Imported QtWebKit TP3 (git b57bc6801f1876c3220d5a4bfea33d620d477443)

Change-Id: I3b1d8a2808782c9f34d50240000e20cb38d3680f
Reviewed-by: Konstantin Tokarev <annulen@yandex.ru>

1381 files changed, 153163 insertions, 72677 deletions

diff --git a/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js
deleted file mode 100644
index 1583d9655..000000000
--- a/Source/WebInspectorUI/UserInterface/ActivateButtonNavigationItem.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ActivateButtonNavigationItem = function(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, suppressEmboss)
-{
-    WebInspector.ButtonNavigationItem.call(this, identifier, defaultToolTip, image, imageWidth, imageHeight, suppressEmboss);
-
-    this._defaultToolTip = defaultToolTip;
-    this._activatedToolTip = activatedToolTip || defaultToolTip;
-};
-
-WebInspector.ActivateButtonNavigationItem.StyleClassName = "activate";
-WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName = "activated";
-
-WebInspector.ActivateButtonNavigationItem.prototype = {
-    constructor: WebInspector.ActivateButtonNavigationItem,
-
-    // Public
-
-    get defaultToolTip()
-    {
-        return this._defaultToolTip;
-    },
-
-    get activatedToolTip()
-    {
-        return this._activatedToolTip;
-    },
-
-    get activated()
-    {
-        return this.element.classList.contains(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
-    },
-
-    set activated(flag)
-    {
-        if (flag) {
-            this.toolTip = this._activatedToolTip;
-            this.element.classList.add(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
-        } else {
-            this.toolTip = this._defaultToolTip;
-            this.element.classList.remove(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
-        }
-    },
-
-    generateStyleText: function(parentSelector)
-    {
-        var classNames = this._classNames.join(".");
-
-        if (this._suppressEmboss)
-            var styleText = parentSelector + " ." + classNames + " > .glyph { background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
-        else {
-            var activatedClassName = "." + WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName;
-
-            // Default state.
-            var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Normal) + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
-
-            // Pressed state.
-            styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
-
-            // Activated state.
-            styleText += parentSelector + " ." + classNames + activatedClassName + ":not(.disabled) > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
-
-            // Activated and pressed state.
-            styleText += parentSelector + " ." + classNames + activatedClassName + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.ActiveFocus) + "); }\n";
-        }
-
-        return styleText;
-    },
-
-    // Private
-
-    _additionalClassNames: [WebInspector.ActivateButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName]
-};
-
-WebInspector.ActivateButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ActivateButtonToolbarItem.js b/Source/WebInspectorUI/UserInterface/ActivateButtonToolbarItem.js
deleted file mode 100644
index af4d6614a..000000000
--- a/Source/WebInspectorUI/UserInterface/ActivateButtonToolbarItem.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ActivateButtonToolbarItem = function(identifier, defaultToolTip, activatedToolTip, label, image, suppressEmboss)
-{
-    WebInspector.ActivateButtonNavigationItem.call(this, identifier, defaultToolTip, activatedToolTip, image, 32, 32, suppressEmboss);
-
-    console.assert(label);
-
-    this._labelElement = document.createElement("div");
-    this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
-    this._element.appendChild(this._labelElement);
-
-    this.label = label;
-};
-
-WebInspector.ActivateButtonToolbarItem.prototype = {
-    constructor: WebInspector.ActivateButtonToolbarItem,
-
-    // Public
-
-    get label()
-    {
-        return this._labelElement.textContent;
-    },
-
-    set label(newLabel)
-    {
-        console.assert(newLabel);
-        if (!newLabel)
-            return;
-
-        this._labelElement.textContent = newLabel;
-    }
-};
-
-WebInspector.ActivateButtonToolbarItem.prototype.__proto__ = WebInspector.ActivateButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheDetailsSidebarPanel.js
deleted file mode 100644
index 2703d708e..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheDetailsSidebarPanel.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ApplicationCacheDetailsSidebarPanel = function() {
-    WebInspector.DetailsSidebarPanel.call(this, "application-cache-details", WebInspector.UIString("Storage"), WebInspector.UIString("Storage"), "Images/NavigationItemStorage.pdf");
-
-    this.element.classList.add(WebInspector.ApplicationCacheDetailsSidebarPanel.StyleClassName);
-
-    this._applicationCacheFrame = null;
-
-    this._locationManifestURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Manifest URL"));
-    this._locationFrameURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Frame URL"));
-
-    this._locationGroup = new WebInspector.DetailsSectionGroup([this._locationManifestURLRow, this._locationFrameURLRow]);
-
-    this._locationSection = new WebInspector.DetailsSection("application-cache-location", WebInspector.UIString("Location"), [this._locationGroup]);
-
-    this._onlineRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Online"));
-    this._statusRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Status"));
-
-    this._statusGroup = new WebInspector.DetailsSectionGroup([this._onlineRow, this._statusRow]);
-
-    this._statusSection = new WebInspector.DetailsSection("application-cache-status", WebInspector.UIString("Status"), [this._statusGroup]);
-
-    this.element.appendChild(this._locationSection.element);
-    this.element.appendChild(this._statusSection.element);
-
-    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, this._networkStateUpdated, this);
-    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._frameManifestStatusChanged, this);
-};
-
-WebInspector.ApplicationCacheDetailsSidebarPanel.StyleClassName = "application-cache";
-
-// This needs to be kept in sync with ApplicationCacheManager.js.
-WebInspector.ApplicationCacheDetailsSidebarPanel.Status = {
-    0: "Uncached",
-    1: "Idle",
-    2: "Checking",
-    3: "Downloading",
-    4: "UpdateReady",
-    5: "Obsolete"
-};
-
-WebInspector.ApplicationCacheDetailsSidebarPanel.prototype = {
-    constructor: WebInspector.ApplicationCacheDetailsSidebarPanel,
-
-    // Public
-
-    inspect: function(objects)
-    {
-        // Convert to a single item array if needed.
-        if (!(objects instanceof Array))
-            objects = [objects];
-
-        var applicationCacheFrameToInspect = null;
-
-        // Iterate over the objects to find a WebInspector.ApplicationCacheFrame to inspect.
-        for (var i = 0; i < objects.length; ++i) {
-            if (objects[i] instanceof WebInspector.ApplicationCacheFrame) {
-                applicationCacheFrameToInspect = objects[i];
-                break;
-            }
-        }
-
-        this.applicationCacheFrame = applicationCacheFrameToInspect;
-
-        return !!this.applicationCacheFrame;
-    },
-    
-    get applicationCacheFrame()
-    {
-        return this._applicationCacheFrame;
-    },
-    
-    set applicationCacheFrame(applicationCacheFrame)
-    {
-        if (this._applicationCacheFrame === applicationCacheFrame)
-            return;
-        
-        this._applicationCacheFrame = applicationCacheFrame;
-
-        this.needsRefresh();
-    },
-
-    refresh: function()
-    {
-        if (!this.applicationCacheFrame)
-            return;
-
-        this._locationFrameURLRow.value = this.applicationCacheFrame.frame.url;
-        this._locationManifestURLRow.value = this.applicationCacheFrame.manifest.manifestURL;
-        
-        this._refreshOnlineRow();
-        this._refreshStatusRow();
-    },
-    
-    // Private
-    
-    _networkStateUpdated: function(event)
-    {
-        if (!this.applicationCacheFrame)
-            return;
-        
-        this._refreshOnlineRow();
-    },
-    
-    _frameManifestStatusChanged: function(event)
-    {
-        if (!this.applicationCacheFrame)
-            return;
-
-        console.assert(event.data.frameManifest instanceof WebInspector.ApplicationCacheFrame);
-        if (event.data.frameManifest !== this.applicationCacheFrame)
-            return;
-
-        this._refreshStatusRow();
-    },
-    
-    _refreshOnlineRow: function()
-    {
-        this._onlineRow.value = WebInspector.applicationCacheManager.online ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
-    },
-    
-    _refreshStatusRow: function()
-    {
-        this._statusRow.value = WebInspector.ApplicationCacheDetailsSidebarPanel.Status[this.applicationCacheFrame.status];
-    }
-};
-
-WebInspector.ApplicationCacheDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrame.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrame.js
deleted file mode 100644
index 84f506ac3..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrame.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ApplicationCacheFrame = function(frame, manifest, status)
-{
-    console.assert(frame instanceof WebInspector.Frame);
-    console.assert(manifest instanceof WebInspector.ApplicationCacheManifest);
-
-    WebInspector.Object.call(this);
-    
-    this._frame = frame;
-    this._manifest = manifest;
-    this._status = status;
-};
-
-WebInspector.ApplicationCacheFrame.prototype = {
-    constructor: WebInspector.ApplicationCacheFrame,
-    
-    get frame()
-    {
-        return this._frame;
-    },
-
-    get manifest()
-    {
-        return this._manifest;
-    },
-
-    get status()
-    {
-        return this._status;
-    },
-    
-    set status(status)
-    {
-        this._status = status;
-    }
-};
-
-WebInspector.ApplicationCacheFrame.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.css b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.css
deleted file mode 100644
index e10b20b0b..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.application-cache-frame > .data-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.js
deleted file mode 100644
index f14f0ed21..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameContentView.js
+++ /dev/null
@@ -1,243 +0,0 @@
-/*
- * Copyright (C) 2010, 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @extends {WebInspector.View}
- */
-WebInspector.ApplicationCacheFrameContentView = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
-
-    WebInspector.ContentView.call(this, representedObject);
-
-    this.element.classList.add(WebInspector.ApplicationCacheFrameContentView.StyleClassName);
-
-    this.element.classList.add("storage-view");
-    this.element.classList.add("table");
-
-    this._frame = representedObject.frame;
-
-    this._emptyView = WebInspector.createMessageTextView(WebInspector.UIString("No Application Cache information available"), false);
-    this._emptyView.classList.add("hidden");
-    this.element.appendChild(this._emptyView);
-
-    this._markDirty();
-    
-    var status = representedObject.status;
-    this.updateStatus(status);
-
-    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._updateStatus, this);
-}
-
-WebInspector.ApplicationCacheFrameContentView.StyleClassName = "application-cache-frame";
-
-WebInspector.ApplicationCacheFrameContentView.prototype = {
-    constructor: WebInspector.ApplicationCacheFrameContentView,
-
-    shown: function()
-    {
-        this._maybeUpdate();
-    },
-
-    closed: function()
-    {
-        WebInspector.applicationCacheManager.removeEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._updateStatus, this);
-    },
-
-    updateLayout: function()
-    {
-        if (this.dataGrid)
-            this.dataGrid.updateLayout();
-    },
-
-    get scrollableElements()
-    {
-        if (!this._dataGrid)
-            return [];
-        return [this._dataGrid.scrollContainer];
-    },
-
-    _maybeUpdate: function()
-    {
-        if (!this.visible || !this._viewDirty)
-            return;
-        
-        this._update();
-        this._viewDirty = false;
-    },
-
-    _markDirty: function()
-    {
-        this._viewDirty = true;
-    },
-
-    _updateStatus: function(event)
-    {
-        var frameManifest = event.data.frameManifest;
-        if (frameManifest !== this.representedObject)
-            return;
-        
-        console.assert(frameManifest instanceof WebInspector.ApplicationCacheFrame);
-        
-        this.updateStatus(frameManifest.status);
-    },
-
-    /**
-     * @param {number} status
-     */
-    updateStatus: function(status)
-    {
-        var oldStatus = this._status;
-        this._status = status;
-        
-        if (this.visible && this._status === WebInspector.ApplicationCacheManager.Status.Idle && (oldStatus === WebInspector.ApplicationCacheManager.Status.UpdateReady || !this._resources))
-            this._markDirty();
-
-        this._maybeUpdate();
-    },
-
-    _update: function()
-    {
-        WebInspector.applicationCacheManager.requestApplicationCache(this._frame, this._updateCallback.bind(this));
-    },
-
-    /**
-     * @param {Object} applicationCache
-     */
-    _updateCallback: function(applicationCache)
-    {
-        if (!applicationCache || !applicationCache.manifestURL) {
-            delete this._manifest;
-            delete this._creationTime;
-            delete this._updateTime;
-            delete this._size;
-            delete this._resources;
-            
-            this._emptyView.classList.remove("hidden");
-            
-            if (this._dataGrid)
-                this._dataGrid.element.classList.add("hidden");
-            return;
-        }
-
-        // FIXME: are these variables needed anywhere else?
-        this._manifest = applicationCache.manifestURL;
-        this._creationTime = applicationCache.creationTime;
-        this._updateTime = applicationCache.updateTime;
-        this._size = applicationCache.size;
-        this._resources = applicationCache.resources;
-
-        if (!this._dataGrid)
-            this._createDataGrid();
-
-        this._populateDataGrid();
-        this._dataGrid.autoSizeColumns(20, 80);
-        this._dataGrid.element.classList.remove("hidden");
-        
-        this._emptyView.classList.add("hidden");
-    },
-
-    _createDataGrid: function()
-    {
-        var columns = { 0: {}, 1: {}, 2: {} };
-        columns[0].title = WebInspector.UIString("Resource");
-        columns[0].sort = "ascending";
-        columns[0].sortable = true;
-        columns[1].title = WebInspector.UIString("Type");
-        columns[1].sortable = true;
-        columns[2].title = WebInspector.UIString("Size");
-        columns[2].aligned = "right";
-        columns[2].sortable = true;
-        this._dataGrid = new WebInspector.DataGrid(columns);
-        this.element.appendChild(this._dataGrid.element);
-        this._dataGrid.updateLayout();
-        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._populateDataGrid, this);
-    },
-
-    _populateDataGrid: function()
-    {
-        var selectedResource = this._dataGrid.selectedNode ? this._dataGrid.selectedNode.resource : null;
-        var sortDirection = this._dataGrid.sortOrder === "ascending" ? 1 : -1;
-
-        function numberCompare(field, resource1, resource2)
-        {
-            return sortDirection * (resource1[field] - resource2[field]);
-        }
-        function localeCompare(field, resource1, resource2)
-        {
-             return sortDirection * (resource1[field] + "").localeCompare(resource2[field] + "")
-        }
-
-        var comparator;
-        switch (parseInt(this._dataGrid.sortColumnIdentifier, 10)) {
-            case 0: comparator = localeCompare.bind(this, "url"); break;
-            case 1: comparator = localeCompare.bind(this, "type"); break;
-            case 2: comparator = numberCompare.bind(this, "size"); break;
-            default: localeCompare.bind(this, "resource"); // FIXME: comparator = ?
-        }
-
-        this._resources.sort(comparator);
-        this._dataGrid.removeChildren();
-
-        var nodeToSelect;
-        for (var i = 0; i < this._resources.length; ++i) {
-            var data = {};
-            var resource = this._resources[i];
-            data[0] = resource.url;
-            data[1] = resource.type;
-            data[2] = Number.bytesToString(resource.size);
-            var node = new WebInspector.DataGridNode(data);
-            node.resource = resource;
-            node.selectable = true;
-            this._dataGrid.appendChild(node);
-            if (resource === selectedResource) {
-                nodeToSelect = node;
-                nodeToSelect.selected = true;
-            }
-        }
-
-        if (!nodeToSelect && this._dataGrid.children.length)
-            this._dataGrid.children[0].selected = true;
-    },
-
-    _deleteButtonClicked: function(event)
-    {
-        if (!this._dataGrid || !this._dataGrid.selectedNode)
-            return;
-
-        // FIXME: Delete Button semantics are not yet defined. (Delete a single, or all?)
-        this._deleteCallback(this._dataGrid.selectedNode);
-    },
-
-    _deleteCallback: function(node)
-    {
-        // FIXME: Should we delete a single (selected) resource or all resources?
-        // InspectorBackend.deleteCachedResource(...)
-        // this._update();
-    }
-}
-
-WebInspector.ApplicationCacheFrameContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameTreeElement.js
deleted file mode 100644
index 5907508a7..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheFrameTreeElement.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ApplicationCacheFrameTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
-
-    WebInspector.GeneralTreeElement.call(this, WebInspector.ApplicationCacheFrameTreeElement.StyleClassName, "", "", representedObject, false);
-
-    this.small = true;
-    
-    this.updateTitles();
-};
-
-WebInspector.ApplicationCacheFrameTreeElement.StyleClassName = "application-cache-frame";
-
-WebInspector.ApplicationCacheFrameTreeElement.prototype = {
-    constructor: WebInspector.ApplicationCacheFrameTreeElement,
-
-    updateTitles: function()
-    {
-        var url = this.representedObject.frame.url;
-        var parsedURL = parseURL(url);
-
-        this.mainTitle = WebInspector.displayNameForURL(url, parsedURL);
-
-        // Show the host as the subtitle only if it doesn't match the subtitle of the manifest tree element,
-        // and it doesn't match the mainTitle.
-        var subtitle = WebInspector.displayNameForHost(parsedURL.host);
-
-        // FIXME: This is bad layering. We should not be calling a global object to get this.
-        var manifestTreeElement = WebInspector.resourceSidebarPanel.treeElementForRepresentedObject(this.representedObject.manifest);
-
-        var subtitleIsDuplicate = subtitle === this._mainTitle || subtitle === manifestTreeElement.subtitle;
-        this.subtitle = subtitleIsDuplicate ? null : subtitle;
-    }
-};
-
-WebInspector.ApplicationCacheFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheIcons.css b/Source/WebInspectorUI/UserInterface/ApplicationCacheIcons.css
deleted file mode 100644
index a54973c89..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheIcons.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.application-cache-manifest .icon {
-    content: -webkit-image-set(url(Images/ApplicationCacheManifest.png) 1x, url(Images/ApplicationCacheManifest@2x.png) 2x);
-}
-
-.application-cache-frame .icon {
-    content: -webkit-image-set(url(Images/ApplicationCache.png) 1x, url(Images/ApplicationCache@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheManager.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheManager.js
deleted file mode 100644
index 854100606..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheManager.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ApplicationCacheManager = function()
-{
-    WebInspector.Object.call(this);
-
-    ApplicationCacheAgent.enable();
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
-
-    this._online = true;
-
-    this.initialize();
-};
-
-WebInspector.ApplicationCacheManager.Event = {
-    Cleared: "application-cache-manager-cleared",
-    FrameManifestAdded: "application-cache-manager-frame-manifest-added",
-    FrameManifestRemoved: "application-cache-manager-frame-manifest-removed",
-    FrameManifestStatusChanged: "application-cache-manager-frame-manifest-status-changed",
-    NetworkStateUpdated: "application-cache-manager-network-state-updated"
-};
-
-WebInspector.ApplicationCacheManager.Status = {
-    Uncached: 0,
-    Idle: 1,
-    Checking: 2,
-    Downloading: 3,
-    UpdateReady: 4,
-    Obsolete: 5
-};
-
-WebInspector.ApplicationCacheManager.prototype = {
-    constructor: WebInspector.ApplicationCacheManager,
-
-    // Public
-
-    initialize: function()
-    {
-        this._applicationCacheObjects = [];
-
-        ApplicationCacheAgent.getFramesWithManifests(this._framesWithManifestsLoaded.bind(this));
-    },
-
-    networkStateUpdated: function(isNowOnline)
-    {
-        this._online = isNowOnline;
-        
-        this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, {online: this._online});
-    },
-
-    get online()
-    {
-        return this._online;
-    },
-
-    applicationCacheStatusUpdated: function(frameId, manifestURL, status)
-    {
-        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameId);
-        if (!frame)
-            return;
-        
-        this._frameManifestUpdated(frame, manifestURL, status);
-    },
-
-    requestApplicationCache: function(frame, callback)
-    {
-        function callbackWrapper(error, applicationCache)
-        {
-            if (error) {
-                callback(null);
-                return;
-            }
-            
-            callback(applicationCache);
-        }
-        
-        ApplicationCacheAgent.getApplicationCacheForFrame(frame.id, callbackWrapper);
-    },
-
-    // Private
-
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (event.target.isMainFrame()) {
-            // If we are dealing with the main frame, we want to clear our list of objects, because we are navigating to a new page.
-            this.initialize();
-
-            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.Cleared);
-
-            return;
-        }
-
-        ApplicationCacheAgent.getManifestForFrame(event.target.id, this._manifestForFrameLoaded.bind(this, event.target.id));
-    },
-
-    _childFrameWasRemoved: function(event)
-    {
-        this._frameManifestRemoved(event.data.childFrame);
-    },
-
-    _manifestForFrameLoaded: function(frameId, error, manifestURL)
-    {
-        if (error)
-            return;
-
-        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameId);
-        if (!frame)
-            return;
-        
-        if (!manifestURL)
-            this._frameManifestRemoved(frame);
-    },
-    
-    _framesWithManifestsLoaded: function(error, framesWithManifests)
-    {
-        if (error)
-            return;
-        
-        for (var i = 0; i < framesWithManifests.length; ++i) {
-            var frame = WebInspector.frameResourceManager.frameForIdentifier(framesWithManifests[i].frameId);
-            if (!frame)
-                continue;
-
-            this._frameManifestUpdated(frame, framesWithManifests[i].manifestURL, framesWithManifests[i].status);
-        }
-    },
-    
-    _frameManifestUpdated: function(frame, manifestURL, status)
-    {
-        if (status === WebInspector.ApplicationCacheManager.Status.Uncached) {
-            this._frameManifestRemoved(frame);
-            return;
-        }
-
-        if (!manifestURL)
-            return;
-
-        var manifestFrame = this._applicationCacheObjects[frame.id];
-        if (manifestFrame && manifestURL !== manifestFrame.manifest.manifestURL)
-            this._frameManifestRemoved(frame);
-
-        var oldStatus = manifestFrame ? manifestFrame.status : -1;
-        var statusChanged = manifestFrame && status !== oldStatus;
-        if (manifestFrame)
-            manifestFrame.status = status;
-        
-        if (!this._applicationCacheObjects[frame.id]) {
-            var cacheManifest = new WebInspector.ApplicationCacheManifest(manifestURL);
-            this._applicationCacheObjects[frame.id] = new WebInspector.ApplicationCacheFrame(frame, cacheManifest, status);
-
-            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestAdded, {frameManifest: this._applicationCacheObjects[frame.id]});
-        }
-        
-        if (statusChanged)
-            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, {frameManifest: this._applicationCacheObjects[frame.id]});
-    },
-    
-    _frameManifestRemoved: function(frame)
-    {
-        if (!this._applicationCacheObjects[frame.id])
-            return;
-
-        delete this._applicationCacheObjects[frame.id];
-
-        this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestRemoved, {frame: frame});
-    }
-};
-
-WebInspector.ApplicationCacheManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheManifest.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheManifest.js
deleted file mode 100644
index 9145899f4..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheManifest.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ApplicationCacheManifest = function(manifestURL)
-{
-    WebInspector.Object.call(this);
-    
-    this._manifestURL = manifestURL;
-};
-
-WebInspector.ApplicationCacheManifest.prototype = {
-    constructor: WebInspector.ApplicationCacheManifest,
-    
-    get manifestURL()
-    {
-        return this._manifestURL;
-    }    
-};
-
-WebInspector.ApplicationCacheManifest.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheManifestTreeElement.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheManifestTreeElement.js
deleted file mode 100644
index 2d64b6dbe..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheManifestTreeElement.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ApplicationCacheManifestTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.ApplicationCacheManifest);
-
-    WebInspector.StorageTreeElement.call(this, WebInspector.ApplicationCacheManifestTreeElement.StyleClassName, "", representedObject);
-};
-
-WebInspector.ApplicationCacheManifestTreeElement.StyleClassName = "application-cache-manifest";
-
-WebInspector.ApplicationCacheManifestTreeElement.prototype = {
-    constructor: WebInspector.ApplicationCacheManifestTreeElement,
-
-    // Public
-
-    get name()
-    {
-        if (!this._name)
-            this._generateTitles();
-    
-        return this._name;
-    },
-
-    get secondaryName()
-    {
-        if (!this._secondaryName)
-            this._generateTitles();
-        
-        return this._secondaryName;
-    },
-
-    get categoryName()
-    {
-        return WebInspector.UIString("Application Cache");
-    },
-    
-    _generateTitles: function()
-    {
-        var parsedURL = parseURL(this.representedObject.manifestURL);
-
-        // Prefer the last path component, with a fallback for the host as the main title.
-        this._name = WebInspector.displayNameForURL(this.representedObject.manifestURL, parsedURL);
-
-        // Show the host as the subtitle.
-        var secondaryName = WebInspector.displayNameForHost(parsedURL.host);
-        this._secondaryName = this._name !== secondaryName ? secondaryName : null;
-    }
-};
-
-WebInspector.ApplicationCacheManifestTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ApplicationCacheObserver.js b/Source/WebInspectorUI/UserInterface/ApplicationCacheObserver.js
deleted file mode 100644
index 7b50a38c5..000000000
--- a/Source/WebInspectorUI/UserInterface/ApplicationCacheObserver.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ApplicationCacheObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.ApplicationCacheObserver.prototype = {
-    constructor: WebInspector.ApplicationCacheObserver,
-
-    // Events defined by the "ApplicationCache" domain (see WebCore/inspector/Inspector.json).
-
-    applicationCacheStatusUpdated: function(frameId, manifestURL, status)
-    {
-        WebInspector.applicationCacheManager.applicationCacheStatusUpdated(frameId, manifestURL, status);
-    },
-
-    networkStateUpdated: function(isNowOnline)
-    {
-        WebInspector.applicationCacheManager.networkStateUpdated(isNowOnline);
-    }
-};
-
-WebInspector.ApplicationCacheObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js b/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js
new file mode 100644
index 000000000..ca7129895
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.displayNameForNode = function(node)
+{
+    var title = node.nodeNameInCorrectCase();
+
+    var idAttribute = node.getAttribute("id");
+    if (idAttribute) {
+        if (/[\s'"]/.test(idAttribute)) {
+            idAttribute = idAttribute.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
+            title += "[id=\"" + idAttribute + "\"]";
+        } else
+            title += "#" + idAttribute;
+    }
+
+    var classAttribute = node.getAttribute("class");
+    if (classAttribute) {
+        var classes = classAttribute.trim().split(/\s+/);
+        var foundClasses = {};
+
+        for (var i = 0; i < classes.length; ++i) {
+            var className = classes[i];
+            if (className && !(className in foundClasses)) {
+                title += "." + className;
+                foundClasses[className] = true;
+            }
+        }
+    }
+
+    return title;
+};
+
+WebInspector.roleSelectorForNode = function(node)
+{
+    // This is proposed syntax for CSS 4 computed role selector :role(foo) and subject to change.
+    // See http://lists.w3.org/Archives/Public/www-style/2013Jul/0104.html
+    var title = "";
+    var role = node.computedRole();
+    if (role)
+        title = ":role(" + role + ")";
+    return title;
+};
+
+WebInspector.linkifyAccessibilityNodeReference = function(node)
+{
+    if (!node)
+        return null;
+    // Same as linkifyNodeReference except the link text has the classnames removed...
+    // ...for list brevity, and both text and title have roleSelectorForNode appended.
+    var link = WebInspector.linkifyNodeReference(node);
+    var tagIdSelector = link.title;
+    var classSelectorIndex = tagIdSelector.indexOf(".");
+    if (classSelectorIndex > -1)
+        tagIdSelector = tagIdSelector.substring(0, classSelectorIndex);
+    var roleSelector = WebInspector.roleSelectorForNode(node);
+    link.textContent = tagIdSelector + roleSelector;
+    link.title += roleSelector;
+    return link;
+};
+
+WebInspector.linkifyNodeReference = function(node)
+{
+    var displayName = WebInspector.displayNameForNode(node);
+
+    var link = document.createElement("span");
+    link.append(displayName);
+    link.setAttribute("role", "link");
+    link.className = "node-link";
+    link.title = displayName;
+
+    link.addEventListener("click", WebInspector.domTreeManager.inspectElement.bind(WebInspector.domTreeManager, node.id));
+    link.addEventListener("mouseover", WebInspector.domTreeManager.highlightDOMNode.bind(WebInspector.domTreeManager, node.id, "all"));
+    link.addEventListener("mouseout", WebInspector.domTreeManager.hideDOMNodeHighlight.bind(WebInspector.domTreeManager));
+
+    return link;
+};
+
+function createSVGElement(tagName)
+{
+    return document.createElementNS("http://www.w3.org/2000/svg", tagName);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Base/EventListener.js b/Source/WebInspectorUI/UserInterface/Base/EventListener.js
new file mode 100644
index 000000000..0bcb099d3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/EventListener.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.EventListener = class EventListener
+{
+    constructor(thisObject, fireOnce)
+    {
+        this._thisObject = thisObject;
+        this._emitter = null;
+        this._callback = null;
+        this._fireOnce = fireOnce;
+    }
+
+    // Public
+
+    connect(emitter, type, callback, usesCapture)
+    {
+        console.assert(!this._emitter && !this._callback, "EventListener already bound to a callback.", this);
+        console.assert(callback, "Missing callback for event: " + type);
+        console.assert(emitter, "Missing event emitter for event: " + type);
+        var emitterIsValid = emitter && (emitter instanceof WebInspector.Object || emitter instanceof Node || (typeof emitter.addEventListener === "function"));
+        console.assert(emitterIsValid,  "Event emitter ", emitter, " (type:" + type + ") is null or does not implement Node or WebInspector.Object!");
+
+        if (!emitterIsValid || !type || !callback)
+            return;
+
+        this._emitter = emitter;
+        this._type = type;
+        this._usesCapture = !!usesCapture;
+
+        if (emitter instanceof Node)
+            callback = callback.bind(this._thisObject);
+
+        if (this._fireOnce) {
+            var listener = this;
+            this._callback = function() {
+                listener.disconnect();
+                callback.apply(this, arguments);
+            };
+        } else
+            this._callback = callback;
+
+        if (this._emitter instanceof Node)
+            this._emitter.addEventListener(this._type, this._callback, this._usesCapture);
+        else
+            this._emitter.addEventListener(this._type, this._callback, this._thisObject);
+    }
+
+    disconnect()
+    {
+        console.assert(this._emitter && this._callback, "EventListener is not bound to a callback.", this);
+
+        if (!this._emitter || !this._callback)
+            return;
+
+        if (this._emitter instanceof Node)
+            this._emitter.removeEventListener(this._type, this._callback, this._usesCapture);
+        else
+            this._emitter.removeEventListener(this._type, this._callback, this._thisObject);
+
+        if (this._fireOnce)
+            delete this._thisObject;
+        delete this._emitter;
+        delete this._type;
+        delete this._callback;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/EventListenerSet.js b/Source/WebInspectorUI/UserInterface/Base/EventListenerSet.js
new file mode 100644
index 000000000..aa4f50b52
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/EventListenerSet.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// This class supports adding and removing many listeners at once.
+// Add DOM or Inspector event listeners to the set using `register()`.
+// Use `install()` and `uninstall()` to enable or disable all listeners
+// in the set at once.
+
+WebInspector.EventListenerSet = class EventListenerSet
+{
+    constructor(defaultThisObject, name)
+    {
+        this.name = name;
+        this._defaultThisObject = defaultThisObject;
+
+        this._listeners = [];
+        this._installed = false;
+    }
+
+    // Public
+
+    register(emitter, type, callback, thisObject, usesCapture)
+    {
+        console.assert(callback, "Missing callback for event: " + type);
+        console.assert(type, "Tried to register listener for unknown event: " + type);
+        var emitterIsValid = emitter && (emitter instanceof WebInspector.Object || emitter instanceof Node || (typeof emitter.addEventListener === "function"));
+        console.assert(emitterIsValid,  "Event emitter ", emitter, " (type:" + type + ") is null or does not implement Node or WebInspector.Object!");
+
+        if (!emitterIsValid || !type || !callback)
+            return;
+
+        this._listeners.push({listener: new WebInspector.EventListener(thisObject || this._defaultThisObject), emitter, type, callback, usesCapture});
+    }
+
+    unregister()
+    {
+        if (this._installed)
+            this.uninstall();
+        this._listeners = [];
+    }
+
+    install()
+    {
+        console.assert(!this._installed, "Already installed listener group: " + this.name);
+        if (this._installed)
+            return;
+
+        this._installed = true;
+
+        for (var data of this._listeners)
+            data.listener.connect(data.emitter, data.type, data.callback, data.usesCapture);
+    }
+
+    uninstall(unregisterListeners)
+    {
+        console.assert(this._installed, "Trying to uninstall listener group " + this.name + ", but it isn't installed.");
+        if (!this._installed)
+            return;
+
+        this._installed = false;
+
+        for (var data of this._listeners)
+            data.listener.disconnect();
+
+        if (unregisterListeners)
+            this._listeners = [];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js b/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js
new file mode 100644
index 000000000..f04831881
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/ImageUtilities.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+function useSVGSymbol(url, className, title)
+{
+    const svgNamespace = "http://www.w3.org/2000/svg";
+    const xlinkNamespace = "http://www.w3.org/1999/xlink";
+
+    let svgElement = document.createElementNS(svgNamespace, "svg");
+    svgElement.style.width = "100%";
+    svgElement.style.height = "100%";
+
+    // URL must contain a fragment reference to a graphical element, like a symbol. If none is given
+    // append #root which all of our SVGs have on the top level <svg> element.
+    if (!url.includes("#"))
+        url += "#root";
+
+    let useElement = document.createElementNS(svgNamespace, "use");
+    useElement.setAttributeNS(xlinkNamespace, "xlink:href", url);
+    svgElement.appendChild(useElement);
+
+    let wrapper = document.createElement("div");
+    wrapper.appendChild(svgElement);
+
+    if (className)
+        wrapper.className = className;
+    if (title)
+        wrapper.title = title;
+
+    return wrapper;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Base/LinkedList.js b/Source/WebInspectorUI/UserInterface/Base/LinkedList.js
new file mode 100644
index 000000000..f9978af42
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/LinkedList.js
@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class LinkedList
+{
+    constructor()
+    {
+        this.head = new LinkedListNode;
+        this.head.next = this.head.prev = this.head;
+        this.length = 0;
+    }
+
+    clear()
+    {
+        this.head.next = this.head.prev = this.head;
+        this.length = 0;
+    }
+
+    get last()
+    {
+        return this.head.prev;
+    }
+
+    push(item)
+    {
+        let newNode = new LinkedListNode(item);
+        let last = this.last;
+        let head = this.head;
+
+        last.next = newNode;
+        newNode.next = head;
+        head.prev = newNode;
+        newNode.prev = last;
+
+        this.length++;
+
+        return newNode;
+    }
+
+    remove(node)
+    {
+        if (!node)
+            return false;
+
+        node.prev.next = node.next;
+        node.next.prev = node.prev;
+
+        this.length--;
+        return true;
+    }
+
+    forEach(callback)
+    {
+        let node = this.head;
+        for (let i = 0, length = this.length; i < length; i++) {
+            node = node.next;
+            let returnValue = callback(node.value, i);
+            if (returnValue === false)
+                return;
+        }
+    }
+
+    toArray()
+    {
+        let node = this.head;
+        let i = this.length;
+        let result = new Array(i);
+        while (i--) {
+            node = node.prev;
+            result[i] = node.value;
+        }
+        return result;
+    }
+
+    toJSON()
+    {
+        return this.toArray();
+    }
+}
+
+
+class LinkedListNode
+{
+    constructor(value)
+    {
+        this.value = value;
+        this.prev = null;
+        this.next = null;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Base/ListMultimap.js b/Source/WebInspectorUI/UserInterface/Base/ListMultimap.js
new file mode 100644
index 000000000..a415fb68f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/ListMultimap.js
@@ -0,0 +1,117 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+class ListMultimap
+{
+    constructor()
+    {
+        this._insertionOrderedEntries = new LinkedList;
+        this._keyMap = new Map;
+    }
+
+    get size()
+    {
+        return this._insertionOrderedEntries.length;
+    }
+
+    add(key, value)
+    {
+        let nodeMap = this._keyMap.get(key);
+        if (!nodeMap) {
+            nodeMap = new Map;
+            this._keyMap.set(key, nodeMap);
+        }
+
+        let node = nodeMap.get(value);
+        if (!node) {
+            node = this._insertionOrderedEntries.push([key, value]);
+            nodeMap.set(value, node);
+        }
+
+        return this;
+    }
+
+    delete(key, value)
+    {
+        let nodeMap = this._keyMap.get(key);
+        if (!nodeMap)
+            return false;
+
+        let node = nodeMap.get(value);
+        if (!node)
+            return false;
+
+        nodeMap.delete(value);
+        this._insertionOrderedEntries.remove(node);
+        return true;
+    }
+
+    deleteAll(key)
+    {
+        let nodeMap = this._keyMap.get(key);
+        if (!nodeMap)
+            return false;
+
+        let list = this._insertionOrderedEntries;
+        let didDelete = false;
+        nodeMap.forEach(function(node) {
+            list.remove(node);
+            didDelete = true;
+        });
+
+        this._keyMap.delete(key);
+        return didDelete;
+    }
+
+    has(key, value)
+    {
+        let nodeMap = this._keyMap.get(key);
+        if (!nodeMap)
+            return false;
+
+        return nodeMap.has(value);
+    }
+
+    clear()
+    {
+        this._keyMap = new Map;
+        this._insertionOrderedEntries = new LinkedList;
+    }
+
+    forEach(callback)
+    {
+        this._insertionOrderedEntries.forEach(callback);
+    }
+
+    toArray()
+    {
+        return this._insertionOrderedEntries.toArray();
+    }
+
+    toJSON()
+    {
+        return this.toArray();
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Base/LoadLocalizedStrings.js b/Source/WebInspectorUI/UserInterface/Base/LoadLocalizedStrings.js
new file mode 100644
index 000000000..84c6e08fe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/LoadLocalizedStrings.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function() {
+    if (WebInspector.dontLocalizeUserInterface)
+        return;
+
+    var localizedStringsURL = InspectorFrontendHost.localizedStringsURL();
+    console.assert(localizedStringsURL);
+    if (localizedStringsURL)
+        document.write("<script src=\"" + localizedStringsURL + "\"></script>");
+})();
diff --git a/Source/WebInspectorUI/UserInterface/MIMETypeUtilities.js b/Source/WebInspectorUI/UserInterface/Base/MIMETypeUtilities.js
index 67e8648a0..67e8648a0 100644
--- a/Source/WebInspectorUI/UserInterface/MIMETypeUtilities.js
+++ b/Source/WebInspectorUI/UserInterface/Base/MIMETypeUtilities.js
diff --git a/Source/WebInspectorUI/UserInterface/Base/Main.js b/Source/WebInspectorUI/UserInterface/Base/Main.js
new file mode 100644
index 000000000..d10646e69
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Main.js
@@ -0,0 +1,2397 @@
+/*
+ * Copyright (C) 2013-2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentViewCookieType = {
+    ApplicationCache: "application-cache",
+    CookieStorage: "cookie-storage",
+    Database: "database",
+    DatabaseTable: "database-table",
+    DOMStorage: "dom-storage",
+    Resource: "resource", // includes Frame too.
+    Timelines: "timelines"
+};
+
+WebInspector.DebuggableType = {
+    Web: "web",
+    JavaScript: "javascript"
+};
+
+WebInspector.SelectedSidebarPanelCookieKey = "selected-sidebar-panel";
+WebInspector.TypeIdentifierCookieKey = "represented-object-type";
+
+WebInspector.StateRestorationType = {
+    Load: "state-restoration-load",
+    Navigation: "state-restoration-navigation",
+    Delayed: "state-restoration-delayed",
+};
+
+WebInspector.loaded = function()
+{
+    // Initialize WebSocket to communication.
+    this._initializeWebSocketIfNeeded();
+
+    this.debuggableType = InspectorFrontendHost.debuggableType() === "web" ? WebInspector.DebuggableType.Web : WebInspector.DebuggableType.JavaScript;
+    this.hasExtraDomains = false;
+
+    // Register observers for events from the InspectorBackend.
+    if (InspectorBackend.registerInspectorDispatcher)
+        InspectorBackend.registerInspectorDispatcher(new WebInspector.InspectorObserver);
+    if (InspectorBackend.registerPageDispatcher)
+        InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
+    if (InspectorBackend.registerConsoleDispatcher)
+        InspectorBackend.registerConsoleDispatcher(new WebInspector.ConsoleObserver);
+    if (InspectorBackend.registerNetworkDispatcher)
+        InspectorBackend.registerNetworkDispatcher(new WebInspector.NetworkObserver);
+    if (InspectorBackend.registerDOMDispatcher)
+        InspectorBackend.registerDOMDispatcher(new WebInspector.DOMObserver);
+    if (InspectorBackend.registerDebuggerDispatcher)
+        InspectorBackend.registerDebuggerDispatcher(new WebInspector.DebuggerObserver);
+    if (InspectorBackend.registerHeapDispatcher)
+        InspectorBackend.registerHeapDispatcher(new WebInspector.HeapObserver);
+    if (InspectorBackend.registerMemoryDispatcher)
+        InspectorBackend.registerMemoryDispatcher(new WebInspector.MemoryObserver);
+    if (InspectorBackend.registerDatabaseDispatcher)
+        InspectorBackend.registerDatabaseDispatcher(new WebInspector.DatabaseObserver);
+    if (InspectorBackend.registerDOMStorageDispatcher)
+        InspectorBackend.registerDOMStorageDispatcher(new WebInspector.DOMStorageObserver);
+    if (InspectorBackend.registerApplicationCacheDispatcher)
+        InspectorBackend.registerApplicationCacheDispatcher(new WebInspector.ApplicationCacheObserver);
+    if (InspectorBackend.registerScriptProfilerDispatcher)
+        InspectorBackend.registerScriptProfilerDispatcher(new WebInspector.ScriptProfilerObserver);
+    if (InspectorBackend.registerTimelineDispatcher)
+        InspectorBackend.registerTimelineDispatcher(new WebInspector.TimelineObserver);
+    if (InspectorBackend.registerCSSDispatcher)
+        InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
+    if (InspectorBackend.registerLayerTreeDispatcher)
+        InspectorBackend.registerLayerTreeDispatcher(new WebInspector.LayerTreeObserver);
+    if (InspectorBackend.registerRuntimeDispatcher)
+        InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
+    if (InspectorBackend.registerReplayDispatcher)
+        InspectorBackend.registerReplayDispatcher(new WebInspector.ReplayObserver);
+
+    // Enable agents.
+    if (window.InspectorAgent)
+        InspectorAgent.enable();
+
+    // Perform one-time tasks.
+    WebInspector.CSSCompletions.requestCSSCompletions();
+
+    // Listen for the ProvisionalLoadStarted event before registering for events so our code gets called before any managers or sidebars.
+    // This lets us save a state cookie before any managers or sidebars do any resets that would affect state (namely TimelineManager).
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ProvisionalLoadStarted, this._provisionalLoadStarted, this);
+
+    // Create the singleton managers next, before the user interface elements, so the user interface can register
+    // as event listeners on these managers.
+    this.branchManager = new WebInspector.BranchManager;
+    this.frameResourceManager = new WebInspector.FrameResourceManager;
+    this.storageManager = new WebInspector.StorageManager;
+    this.domTreeManager = new WebInspector.DOMTreeManager;
+    this.cssStyleManager = new WebInspector.CSSStyleManager;
+    this.logManager = new WebInspector.LogManager;
+    this.issueManager = new WebInspector.IssueManager;
+    this.analyzerManager = new WebInspector.AnalyzerManager;
+    this.runtimeManager = new WebInspector.RuntimeManager;
+    this.heapManager = new WebInspector.HeapManager;
+    this.applicationCacheManager = new WebInspector.ApplicationCacheManager;
+    this.timelineManager = new WebInspector.TimelineManager;
+    this.debuggerManager = new WebInspector.DebuggerManager;
+    this.sourceMapManager = new WebInspector.SourceMapManager;
+    this.layerTreeManager = new WebInspector.LayerTreeManager;
+    this.dashboardManager = new WebInspector.DashboardManager;
+    this.probeManager = new WebInspector.ProbeManager;
+    this.replayManager = new WebInspector.ReplayManager;
+
+    // Enable the Console Agent after creating the singleton managers.
+    if (window.ConsoleAgent)
+        ConsoleAgent.enable();
+
+    // Tell the backend we are initialized after all our initialization messages have been sent.
+    setTimeout(function() {
+        // COMPATIBILITY (iOS 8): Inspector.initialized did not exist yet.
+        if (window.InspectorAgent && InspectorAgent.initialized)
+            InspectorAgent.initialized();
+    }, 0);
+
+    // Register for events.
+    this.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureDidStart, this);
+    this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
+    this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
+    this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.InspectModeStateChanged, this._inspectModeStateChanged, this);
+    this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
+    this.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, this._storageWasInspected, this);
+    this.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasInspected, this._storageWasInspected, this);
+    this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
+    this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
+
+    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+    document.addEventListener("DOMContentLoaded", this.contentLoaded.bind(this));
+
+    // Create settings.
+    this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
+    this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
+
+    this._openTabsSetting = new WebInspector.Setting("open-tab-types", ["elements", "network", "resources", "timeline", "debugger", "storage", "console"]);
+    this._selectedTabIndexSetting = new WebInspector.Setting("selected-tab-index", 0);
+
+    this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", false);
+    this.showReplayInterfaceSetting = new WebInspector.Setting("show-web-replay", false);
+
+    // COMPATIBILITY (iOS 8): Page.enableTypeProfiler did not exist.
+    this.showJavaScriptTypeInformationSetting = new WebInspector.Setting("show-javascript-type-information", false);
+    if (this.showJavaScriptTypeInformationSetting.value && window.RuntimeAgent && RuntimeAgent.enableTypeProfiler)
+        RuntimeAgent.enableTypeProfiler();
+
+    // COMPATIBILITY (iOS 8): Page.setShowPaintRects did not exist.
+    this.showPaintRectsSetting = new WebInspector.Setting("show-paint-rects", false);
+    if (this.showPaintRectsSetting.value && window.PageAgent && PageAgent.setShowPaintRects)
+        PageAgent.setShowPaintRects(true);
+
+    this.mouseCoords = {
+        x: 0,
+        y: 0
+    };
+
+    this._windowKeydownListeners = [];
+};
+
+WebInspector.contentLoaded = function()
+{
+    // If there was an uncaught exception earlier during loading, then
+    // abort loading more content. We could be in an inconsistent state.
+    if (window.__uncaughtExceptions)
+        return;
+
+    // Register for global events.
+    document.addEventListener("beforecopy", this._beforecopy.bind(this));
+    document.addEventListener("copy", this._copy.bind(this));
+
+    document.addEventListener("click", this._mouseWasClicked.bind(this));
+    document.addEventListener("dragover", this._dragOver.bind(this));
+    document.addEventListener("focus", WebInspector._focusChanged.bind(this), true);
+
+    window.addEventListener("focus", this._windowFocused.bind(this));
+    window.addEventListener("blur", this._windowBlurred.bind(this));
+    window.addEventListener("resize", this._windowResized.bind(this));
+    window.addEventListener("keydown", this._windowKeyDown.bind(this));
+    window.addEventListener("keyup", this._windowKeyUp.bind(this));
+    window.addEventListener("mousemove", this._mouseMoved.bind(this), true);
+    window.addEventListener("pagehide", this._pageHidden.bind(this));
+    window.addEventListener("contextmenu", this._contextMenuRequested.bind(this));
+
+    // Add platform style classes so the UI can be tweaked per-platform.
+    document.body.classList.add(WebInspector.Platform.name + "-platform");
+    if (WebInspector.Platform.isNightlyBuild)
+        document.body.classList.add("nightly-build");
+
+    if (WebInspector.Platform.name === "mac") {
+        document.body.classList.add(WebInspector.Platform.version.name);
+
+        if (WebInspector.Platform.version.release >= 11)
+            document.body.classList.add("latest-mac");
+        else
+            document.body.classList.add("legacy-mac");
+    }
+
+    document.body.classList.add(this.debuggableType);
+
+    // Create the user interface elements.
+    this.toolbar = new WebInspector.Toolbar(document.getElementById("toolbar"), null, true);
+    this.toolbar.displayMode = WebInspector.Toolbar.DisplayMode.IconOnly;
+    this.toolbar.sizeMode = WebInspector.Toolbar.SizeMode.Small;
+
+    this.tabBar = new WebInspector.TabBar(document.getElementById("tab-bar"));
+    this.tabBar.addEventListener(WebInspector.TabBar.Event.NewTabItemClicked, this._newTabItemClicked, this);
+    this.tabBar.addEventListener(WebInspector.TabBar.Event.OpenDefaultTab, this._openDefaultTab, this);
+
+    var contentElement = document.getElementById("content");
+    contentElement.setAttribute("role", "main");
+    contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
+
+    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, true);
+    this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
+
+    this.quickConsole = new WebInspector.QuickConsole(document.getElementById("quick-console"));
+    this.quickConsole.addEventListener(WebInspector.QuickConsole.Event.DidResize, this._quickConsoleDidResize, this);
+
+    this._consoleRepresentedObject = new WebInspector.LogObject;
+    this._consoleTreeElement = new WebInspector.LogTreeElement(this._consoleRepresentedObject);
+    this.consoleContentView = WebInspector.splitContentBrowser.contentViewForRepresentedObject(this._consoleRepresentedObject);
+    this.consoleLogViewController = this.consoleContentView.logViewController;
+    this.breakpointPopoverController = new WebInspector.BreakpointPopoverController;
+
+    // FIXME: The sidebars should be flipped in RTL languages.
+    this.navigationSidebar = new WebInspector.Sidebar(document.getElementById("navigation-sidebar"), WebInspector.Sidebar.Sides.Left);
+    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
+
+    this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, null, null, WebInspector.UIString("Details"), true);
+    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
+
+    this.searchKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "F", this._focusSearchField.bind(this));
+    this._findKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "F", this._find.bind(this));
+    this._saveKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this));
+    this._saveAsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "S", this._saveAs.bind(this));
+
+    this.navigationSidebarKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Option, "L", this.toggleNavigationSidebar.bind(this));
+    this.detailsSidebarKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Option, "R", this.toggleDetailsSidebar.bind(this));
+
+    this._increaseZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Plus, this._increaseZoom.bind(this));
+    this._decreaseZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Minus, this._decreaseZoom.bind(this));
+    this._increaseZoomKeyboardShortcut.implicitlyPreventsDefault = this._decreaseZoomKeyboardShortcut.implicitlyPreventsDefault = false;
+
+    this._resetZoomKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "0", this._resetZoom.bind(this));
+
+    this._showTabAtIndexKeyboardShortcuts = [1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, `${i}`, this._showTabAtIndex.bind(this, i)));
+
+    this.tabBrowser = new WebInspector.TabBrowser(document.getElementById("tab-browser"), this.tabBar, this.navigationSidebar, this.detailsSidebar);
+    this.tabBrowser.addEventListener(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange, this._tabBrowserSelectedTabContentViewDidChange, this);
+
+    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._updateNewTabButtonState, this);
+    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._updateNewTabButtonState, this);
+
+    this._reloadPageKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "R", this._reloadPage.bind(this));
+    this._reloadPageIgnoringCacheKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "R", this._reloadPageIgnoringCache.bind(this));
+    this._reloadPageKeyboardShortcut.implicitlyPreventsDefault = this._reloadPageIgnoringCacheKeyboardShortcut.implicitlyPreventsDefault = false;
+
+    this._consoleTabKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Option | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "C", this._showConsoleTab.bind(this));
+    this._quickConsoleKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Apostrophe, this._focusConsolePrompt.bind(this));
+
+    this._inspectModeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "C", this._toggleInspectMode.bind(this));
+
+    this._undoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Z", this._undoKeyboardShortcut.bind(this));
+    this._redoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "Z", this._redoKeyboardShortcut.bind(this));
+    this._undoKeyboardShortcut.implicitlyPreventsDefault = this._redoKeyboardShortcut.implicitlyPreventsDefault = false;
+
+    this.toggleBreakpointsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this.debuggerToggleBreakpoints.bind(this));
+    this.pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this.debuggerPauseResumeToggle.bind(this));
+    this.stepOverKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F6, this.debuggerStepOver.bind(this));
+    this.stepIntoKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F7, this.debuggerStepInto.bind(this));
+    this.stepOutKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F8, this.debuggerStepOut.bind(this));
+
+    this.pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Backslash, this.debuggerPauseResumeToggle.bind(this));
+    this.stepOverAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.SingleQuote, this.debuggerStepOver.bind(this));
+    this.stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this.debuggerStepInto.bind(this));
+    this.stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this.debuggerStepOut.bind(this));
+
+    this._closeToolbarButton = new WebInspector.ControlToolbarItem("dock-close", WebInspector.UIString("Close"), "Images/Close.svg", 16, 14);
+    this._closeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.close, this);
+
+    this._undockToolbarButton = new WebInspector.ButtonToolbarItem("undock", WebInspector.UIString("Detach into separate window"), null, "Images/Undock.svg");
+    this._undockToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
+
+    this._dockRightToolbarButton = new WebInspector.ButtonToolbarItem("dock-right", WebInspector.UIString("Dock to right of window"), null, "Images/DockRight.svg");
+    this._dockRightToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._dockRight, this);
+
+    this._dockBottomToolbarButton = new WebInspector.ButtonToolbarItem("dock-bottom", WebInspector.UIString("Dock to bottom of window"), null, "Images/DockBottom.svg");
+    this._dockBottomToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._dockBottom, this);
+
+    var toolTip;
+    if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
+        toolTip = WebInspector.UIString("Restart (%s)").format(this._reloadPageKeyboardShortcut.displayName);
+    else
+        toolTip = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(this._reloadPageKeyboardShortcut.displayName, this._reloadPageIgnoringCacheKeyboardShortcut.displayName);
+
+    this._reloadToolbarButton = new WebInspector.ButtonToolbarItem("reload", toolTip, null, "Images/ReloadToolbar.svg");
+    this._reloadToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._reloadPageClicked, this);
+
+    this._downloadToolbarButton = new WebInspector.ButtonToolbarItem("download", WebInspector.UIString("Download Web Archive"), null, "Images/DownloadArrow.svg");
+    this._downloadToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._downloadWebArchive, this);
+
+    this._updateReloadToolbarButton();
+    this._updateDownloadToolbarButton();
+
+    // The toolbar button for node inspection.
+    if (this.debuggableType === WebInspector.DebuggableType.Web) {
+        var toolTip = WebInspector.UIString("Enable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
+        var activatedToolTip = WebInspector.UIString("Disable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
+        this._inspectModeToolbarButton = new WebInspector.ActivateButtonToolbarItem("inspect", toolTip, activatedToolTip, null, "Images/Crosshair.svg");
+        this._inspectModeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleInspectMode, this);
+    }
+
+    this._dashboardContainer = new WebInspector.DashboardContainerView;
+    this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
+
+    this._searchToolbarItem = new WebInspector.SearchBar("inspector-search", WebInspector.UIString("Search"), null, true);
+    this._searchToolbarItem.addEventListener(WebInspector.SearchBar.Event.TextChanged, this._searchTextDidChange, this);
+
+    this.toolbar.addToolbarItem(this._closeToolbarButton, WebInspector.Toolbar.Section.Control);
+
+    this.toolbar.addToolbarItem(this._undockToolbarButton, WebInspector.Toolbar.Section.Left);
+    this.toolbar.addToolbarItem(this._dockRightToolbarButton, WebInspector.Toolbar.Section.Left);
+    this.toolbar.addToolbarItem(this._dockBottomToolbarButton, WebInspector.Toolbar.Section.Left);
+
+    this.toolbar.addToolbarItem(this._reloadToolbarButton, WebInspector.Toolbar.Section.CenterLeft);
+    this.toolbar.addToolbarItem(this._downloadToolbarButton, WebInspector.Toolbar.Section.CenterLeft);
+
+    this.toolbar.addToolbarItem(this._dashboardContainer.toolbarItem, WebInspector.Toolbar.Section.Center);
+
+    if (this._inspectModeToolbarButton)
+        this.toolbar.addToolbarItem(this._inspectModeToolbarButton, WebInspector.Toolbar.Section.CenterRight);
+
+    this.toolbar.addToolbarItem(this._searchToolbarItem, WebInspector.Toolbar.Section.Right);
+
+    this.resourceDetailsSidebarPanel = new WebInspector.ResourceDetailsSidebarPanel;
+    this.domNodeDetailsSidebarPanel = new WebInspector.DOMNodeDetailsSidebarPanel;
+    this.cssStyleDetailsSidebarPanel = new WebInspector.CSSStyleDetailsSidebarPanel;
+    this.applicationCacheDetailsSidebarPanel = new WebInspector.ApplicationCacheDetailsSidebarPanel;
+    this.scopeChainDetailsSidebarPanel = new WebInspector.ScopeChainDetailsSidebarPanel;
+    this.probeDetailsSidebarPanel = new WebInspector.ProbeDetailsSidebarPanel;
+
+    if (window.LayerTreeAgent)
+        this.layerTreeDetailsSidebarPanel = new WebInspector.LayerTreeDetailsSidebarPanel;
+
+    this.modifierKeys = {altKey: false, metaKey: false, shiftKey: false};
+
+    this.toolbar.element.addEventListener("mousedown", this._toolbarMouseDown.bind(this));
+    document.getElementById("docked-resizer").addEventListener("mousedown", this._dockedResizerMouseDown.bind(this));
+
+    this._dockingAvailable = false;
+
+    this._updateDockNavigationItems();
+    this._setupViewHierarchy();
+
+    // These tabs are always available for selecting, modulo isTabAllowed().
+    // Other tabs may be engineering-only or toggled at runtime if incomplete.
+    let productionTabClasses = [
+        WebInspector.ConsoleTabContentView,
+        WebInspector.DebuggerTabContentView,
+        WebInspector.ElementsTabContentView,
+        WebInspector.NetworkTabContentView,
+        WebInspector.NewTabContentView,
+        WebInspector.ResourcesTabContentView,
+        WebInspector.SearchTabContentView,
+        WebInspector.StorageTabContentView,
+        WebInspector.TimelineTabContentView,
+    ];
+
+    this._knownTabClassesByType = new Map;
+    // Set tab classes directly. The public API triggers other updates and
+    // notifications that won't work or have no listeners at this point.
+    for (let tabClass of productionTabClasses)
+        this._knownTabClassesByType.set(tabClass.Type, tabClass);
+
+    this._pendingOpenTabs = [];
+
+    // Previously we may have stored duplicates in this setting. Avoid creating duplicate tabs.
+    let openTabTypes = this._openTabsSetting.value;
+    let seenTabTypes = new Set;
+
+    for (let i = 0; i < openTabTypes.length; ++i) {
+        let tabType = openTabTypes[i];
+
+        if (seenTabTypes.has(tabType))
+            continue;
+        seenTabTypes.add(tabType);
+
+        if (!this.isTabTypeAllowed(tabType)) {
+            this._pendingOpenTabs.push({tabType, index: i});
+            continue;
+        }
+
+        let tabContentView = this._createTabContentViewForType(tabType);
+        if (!tabContentView)
+            continue;
+        this.tabBrowser.addTabForContentView(tabContentView, true);
+    }
+
+    this._restoreCookieForOpenTabs(WebInspector.StateRestorationType.Load);
+
+    this.tabBar.selectedTabBarItem = this._selectedTabIndexSetting.value;
+
+    if (!this.tabBar.selectedTabBarItem)
+        this.tabBar.selectedTabBarItem = 0;
+
+    if (!this.tabBar.hasNormalTab())
+        this.showNewTabTab();
+
+    // Listen to the events after restoring the saved tabs to avoid recursion.
+    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._rememberOpenTabs, this);
+    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._rememberOpenTabs, this);
+    this.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemsReordered, this._rememberOpenTabs, this);
+
+    // Signal that the frontend is now ready to receive messages.
+    InspectorFrontendAPI.loadCompleted();
+
+    // Tell the InspectorFrontendHost we loaded, which causes the window to display
+    // and pending InspectorFrontendAPI commands to be sent.
+    InspectorFrontendHost.loaded();
+
+    this._updateSplitConsoleHeight(this._splitConsoleHeightSetting.value);
+
+    if (this._showingSplitConsoleSetting.value)
+        this.showSplitConsole();
+
+    // Store this on the window in case the WebInspector global gets corrupted.
+    window.__frontendCompletedLoad = true;
+
+    if (this.runBootstrapOperations)
+        this.runBootstrapOperations();
+};
+
+WebInspector.isTabTypeAllowed = function(tabType)
+{
+    let tabClass = this._knownTabClassesByType.get(tabType);
+    if (!tabClass)
+        return false;
+
+    return tabClass.isTabAllowed();
+};
+
+WebInspector.knownTabClasses = function()
+{
+    return new Set(this._knownTabClassesByType.values());
+}
+
+WebInspector._createTabContentViewForType = function(tabType)
+{
+    let tabClass = this._knownTabClassesByType.get(tabType);
+    if (!tabClass) {
+        console.error("Unknown tab type", tabType);
+        return null;
+    }
+
+    console.assert(WebInspector.TabContentView.isPrototypeOf(tabClass));
+    return new tabClass;
+};
+
+WebInspector._rememberOpenTabs = function()
+{
+    let seenTabTypes = new Set;
+    let openTabs = [];
+
+    for (let tabBarItem of this.tabBar.tabBarItems) {
+        let tabContentView = tabBarItem.representedObject;
+        if (!(tabContentView instanceof WebInspector.TabContentView))
+            continue;
+        if (!tabContentView.constructor.shouldSaveTab())
+            continue;
+        console.assert(tabContentView.type, "Tab type can't be null, undefined, or empty string", tabContentView.type, tabContentView);
+        openTabs.push(tabContentView.type);
+        seenTabTypes.add(tabContentView.type);
+    }
+
+    // Keep currently unsupported tabs in the setting at their previous index.
+    for (let {tabType, index} of this._pendingOpenTabs) {
+        if (seenTabTypes.has(tabType))
+            continue;
+        openTabs.insertAtIndex(tabType, index);
+        seenTabTypes.add(tabType);
+    }
+
+    this._openTabsSetting.value = openTabs;
+};
+
+WebInspector._updateNewTabButtonState = function(event)
+{
+    let allTabs = [...this._knownTabClassesByType.values()];
+    let addableTabs = allTabs.filter((tabClass) => !tabClass.isEphemeral());
+
+    // FIXME: Use arrow functions once http://webkit.org/b/152497 is resolved.
+    let canMakeNewTab = addableTabs.some(function(tabClass) {
+        return this.isNewTabWithTypeAllowed(tabClass.Type);
+    }.bind(this));
+    this.tabBar.newTabItem.disabled = !canMakeNewTab;
+};
+
+WebInspector._newTabItemClicked = function(event)
+{
+    const shouldAnimate = true;
+    this.showNewTabTab(shouldAnimate);
+};
+
+WebInspector._openDefaultTab = function(event)
+{
+    this.showNewTabTab();
+};
+
+WebInspector._tryToRestorePendingTabs = function()
+{
+    let stillPendingOpenTabs = [];
+    for (let {tabType, index} of this._pendingOpenTabs) {
+        if (!this.isTabTypeAllowed(tabType)) {
+            stillPendingOpenTabs.push({tabType, index});
+            continue;
+        }
+
+        let tabContentView = this._createTabContentViewForType(tabType);
+        if (!tabContentView)
+            continue;
+
+        this.tabBrowser.addTabForContentView(tabContentView, true, index);
+
+        tabContentView.restoreStateFromCookie(WebInspector.StateRestorationType.Load);
+    }
+
+    this._pendingOpenTabs = stillPendingOpenTabs;
+
+    this._updateNewTabButtonState();
+}
+
+WebInspector.showNewTabTab = function(shouldAnimate)
+{
+    let tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.NewTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.NewTabContentView;
+    this.tabBrowser.showTabForContentView(tabContentView, !shouldAnimate);
+};
+
+WebInspector.isNewTabWithTypeAllowed = function(tabType)
+{
+    let tabClass = this._knownTabClassesByType.get(tabType);
+    if (!tabClass || !tabClass.isTabAllowed())
+        return false;
+
+    // Only allow one tab per class for now.
+    for (let tabBarItem of this.tabBar.tabBarItems) {
+        let tabContentView = tabBarItem.representedObject;
+        if (!(tabContentView instanceof WebInspector.TabContentView))
+            continue;
+        if (tabContentView.constructor === tabClass)
+            return false;
+    }
+
+    return true;
+};
+
+WebInspector.createNewTabWithType = function(tabType, options = {})
+{
+    console.assert(this.isNewTabWithTypeAllowed(tabType));
+
+    let {referencedView, shouldReplaceTab, shouldShowNewTab} = options;
+    console.assert(!referencedView || referencedView instanceof WebInspector.TabContentView, referencedView);
+    console.assert(!shouldReplaceTab || referencedView, "Must provide a reference view to replace a tab.");
+
+    let tabContentView = this._createTabContentViewForType(tabType);
+    const suppressAnimations = true;
+    let insertionIndex = referencedView ? this.tabBar.tabBarItems.indexOf(referencedView.tabBarItem) : undefined;
+    this.tabBrowser.addTabForContentView(tabContentView, suppressAnimations, insertionIndex);
+
+    if (shouldReplaceTab)
+        this.tabBrowser.closeTabForContentView(referencedView, suppressAnimations);
+
+    if (shouldShowNewTab)
+        this.tabBrowser.showTabForContentView(tabContentView);
+};
+
+WebInspector.registerTabClass = function(tabClass)
+{
+    console.assert(WebInspector.TabContentView.isPrototypeOf(tabClass));
+    if (!WebInspector.TabContentView.isPrototypeOf(tabClass))
+        return;
+
+    if (this._knownTabClassesByType.has(tabClass.Type))
+        return;
+
+    this._knownTabClassesByType.set(tabClass.Type, tabClass);
+
+    this._tryToRestorePendingTabs();
+    this.notifications.dispatchEventToListeners(WebInspector.Notification.TabTypesChanged);
+}
+
+WebInspector.activateExtraDomains = function(domains)
+{
+    this.hasExtraDomains = true;
+
+    for (var domain of domains) {
+        var agent = InspectorBackend.activateDomain(domain);
+        if (agent.enable)
+            agent.enable();
+    }
+
+    this.notifications.dispatchEventToListeners(WebInspector.Notification.ExtraDomainsActivated, {"domains": domains});
+
+    WebInspector.CSSCompletions.requestCSSCompletions();
+
+    this._updateReloadToolbarButton();
+    this._updateDownloadToolbarButton();
+    this._tryToRestorePendingTabs();
+};
+
+WebInspector.contentBrowserTreeElementForRepresentedObject = function(contentBrowser, representedObject)
+{
+    // The console does not have a sidebar, so return a tree element here so something is shown.
+    if (representedObject === this._consoleRepresentedObject)
+        return this._consoleTreeElement;
+    return null;
+};
+
+WebInspector.updateWindowTitle = function()
+{
+    var mainFrame = this.frameResourceManager.mainFrame;
+    console.assert(mainFrame);
+
+    var urlComponents = mainFrame.mainResource.urlComponents;
+
+    var lastPathComponent;
+    try {
+        lastPathComponent = decodeURIComponent(urlComponents.lastPathComponent || "");
+    } catch (e) {
+        lastPathComponent = urlComponents.lastPathComponent;
+    }
+
+    // Build a title based on the URL components.
+    if (urlComponents.host && lastPathComponent)
+        var title = this.displayNameForHost(urlComponents.host) + " \u2014 " + lastPathComponent;
+    else if (urlComponents.host)
+        var title = this.displayNameForHost(urlComponents.host);
+    else if (lastPathComponent)
+        var title = lastPathComponent;
+    else
+        var title = mainFrame.url;
+
+    // The name "inspectedURLChanged" sounds like the whole URL is required, however this is only
+    // used for updating the window title and it can be any string.
+    InspectorFrontendHost.inspectedURLChanged(title);
+};
+
+WebInspector.updateDockingAvailability = function(available)
+{
+    this._dockingAvailable = available;
+
+    this._updateDockNavigationItems();
+};
+
+WebInspector.updateDockedState = function(side)
+{
+    if (this._dockSide === side)
+        return;
+
+    this._dockSide = side;
+
+    this.docked = side !== "undocked";
+
+    this._ignoreToolbarModeDidChangeEvents = true;
+
+    if (side === "bottom") {
+        document.body.classList.add("docked", "bottom");
+        document.body.classList.remove("window-inactive", "right");
+    } else if (side === "right") {
+        document.body.classList.add("docked", "right");
+        document.body.classList.remove("window-inactive", "bottom");
+    } else
+        document.body.classList.remove("docked", "right", "bottom");
+
+    this._ignoreToolbarModeDidChangeEvents = false;
+
+    this._updateDockNavigationItems();
+};
+
+WebInspector.handlePossibleLinkClick = function(event, frame, alwaysOpenExternally)
+{
+    var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
+    if (!anchorElement || !anchorElement.href)
+        return false;
+
+    if (WebInspector.isBeingEdited(anchorElement)) {
+        // Don't follow the link when it is being edited.
+        return false;
+    }
+
+    // Prevent the link from navigating, since we don't do any navigation by following links normally.
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.openURL(anchorElement.href, frame, false, anchorElement.lineNumber);
+
+    return true;
+};
+
+WebInspector.openURL = function(url, frame, alwaysOpenExternally, lineNumber)
+{
+    console.assert(url);
+    if (!url)
+        return;
+
+    console.assert(typeof lineNumber === "undefined" || typeof lineNumber === "number", "lineNumber should be a number.");
+
+    // If alwaysOpenExternally is not defined, base it off the command/meta key for the current event.
+    if (alwaysOpenExternally === undefined || alwaysOpenExternally === null)
+        alwaysOpenExternally = window.event ? window.event.metaKey : false;
+
+    if (alwaysOpenExternally) {
+        InspectorFrontendHost.openInNewTab(url);
+        return;
+    }
+
+    var searchChildFrames = false;
+    if (!frame) {
+        frame = this.frameResourceManager.mainFrame;
+        searchChildFrames = true;
+    }
+
+    console.assert(frame);
+
+    // WebInspector.Frame.resourceForURL does not check the main resource, only sub-resources. So check both.
+    let simplifiedURL = removeURLFragment(url);
+    var resource = frame.url === simplifiedURL ? frame.mainResource : frame.resourceForURL(simplifiedURL, searchChildFrames);
+    if (resource) {
+        var position = new WebInspector.SourceCodePosition(lineNumber, 0);
+        this.showSourceCode(resource, position);
+        return;
+    }
+
+    InspectorFrontendHost.openInNewTab(url);
+};
+
+WebInspector.close = function()
+{
+    if (this._isClosing)
+        return;
+
+    this._isClosing = true;
+
+    InspectorFrontendHost.closeWindow();
+};
+
+WebInspector.saveDataToFile = function(saveData, forceSaveAs)
+{
+    console.assert(saveData);
+    if (!saveData)
+        return;
+
+    if (typeof saveData.customSaveHandler === "function") {
+        saveData.customSaveHandler(forceSaveAs);
+        return;
+    }
+
+    console.assert(saveData.url);
+    console.assert(typeof saveData.content === "string");
+    if (!saveData.url || typeof saveData.content !== "string")
+        return;
+
+    InspectorFrontendHost.save(saveData.url, saveData.content, false, forceSaveAs || saveData.forceSaveAs);
+};
+
+WebInspector.isConsoleFocused = function()
+{
+    return this.quickConsole.prompt.focused;
+};
+
+WebInspector.isShowingSplitConsole = function()
+{
+    return !this.splitContentBrowser.element.classList.contains("hidden");
+};
+
+WebInspector.doesCurrentTabSupportSplitContentBrowser = function()
+{
+    var currentContentView = this.tabBrowser.selectedTabContentView;
+    return !currentContentView || currentContentView.supportsSplitContentBrowser;
+};
+
+WebInspector.toggleSplitConsole = function()
+{
+    if (!this.doesCurrentTabSupportSplitContentBrowser()) {
+        this.showConsoleTab();
+        return;
+    }
+
+    if (this.isShowingSplitConsole())
+        this.hideSplitConsole();
+    else
+        this.showSplitConsole();
+};
+
+WebInspector.showSplitConsole = function()
+{
+    if (!this.doesCurrentTabSupportSplitContentBrowser()) {
+        this.showConsoleTab();
+        return;
+    }
+
+    this.splitContentBrowser.element.classList.remove("hidden");
+
+    this._showingSplitConsoleSetting.value = true;
+
+    if (this.splitContentBrowser.currentContentView !== this.consoleContentView) {
+        // Be sure to close the view in the tab content browser before showing it in the
+        // split content browser. We can only show a content view in one browser at a time.
+        if (this.consoleContentView.parentContainer)
+            this.consoleContentView.parentContainer.closeContentView(this.consoleContentView);
+        this.splitContentBrowser.showContentView(this.consoleContentView);
+    } else {
+        // This causes the view to know it was shown and focus the prompt.
+        this.splitContentBrowser.shown();
+    }
+
+    this.quickConsole.consoleLogVisibilityChanged(true);
+};
+
+WebInspector.hideSplitConsole = function()
+{
+    if (!this.isShowingSplitConsole())
+        return;
+
+    this.splitContentBrowser.element.classList.add("hidden");
+
+    this._showingSplitConsoleSetting.value = false;
+
+    // This causes the view to know it was hidden.
+    this.splitContentBrowser.hidden();
+
+    this.quickConsole.consoleLogVisibilityChanged(false);
+};
+
+WebInspector.showConsoleTab = function(requestedScope)
+{
+    this.hideSplitConsole();
+
+    var scope = requestedScope || WebInspector.LogContentView.Scopes.All;
+
+    // If the requested scope is already selected and the console is showing, then switch back to All.
+    if (this.isShowingConsoleTab() && this.consoleContentView.scopeBar.item(scope).selected)
+        scope = WebInspector.LogContentView.Scopes.All;
+
+    if (requestedScope || !this.consoleContentView.scopeBar.selectedItems.length)
+        this.consoleContentView.scopeBar.item(scope).selected = true;
+
+    this.showRepresentedObject(this._consoleRepresentedObject);
+
+    console.assert(this.isShowingConsoleTab());
+};
+
+WebInspector.isShowingConsoleTab = function()
+{
+    return this.tabBrowser.selectedTabContentView instanceof WebInspector.ConsoleTabContentView;
+};
+
+WebInspector.showElementsTab = function()
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.ElementsTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.ElementsTabContentView;
+    this.tabBrowser.showTabForContentView(tabContentView);
+};
+
+WebInspector.showDebuggerTab = function(breakpointToSelect)
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.DebuggerTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.DebuggerTabContentView;
+
+    if (breakpointToSelect instanceof WebInspector.Breakpoint)
+        tabContentView.revealAndSelectBreakpoint(breakpointToSelect);
+
+    this.tabBrowser.showTabForContentView(tabContentView);
+};
+
+WebInspector.isShowingDebuggerTab = function()
+{
+    return this.tabBrowser.selectedTabContentView instanceof WebInspector.DebuggerTabContentView;
+};
+
+WebInspector.showResourcesTab = function()
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.ResourcesTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.ResourcesTabContentView;
+    this.tabBrowser.showTabForContentView(tabContentView);
+};
+
+WebInspector.showStorageTab = function()
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.StorageTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.StorageTabContentView;
+    this.tabBrowser.showTabForContentView(tabContentView);
+};
+
+WebInspector.showNetworkTab = function()
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.NetworkTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.NetworkTabContentView;
+    this.tabBrowser.showTabForContentView(tabContentView);
+};
+
+WebInspector.showTimelineTab = function()
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.TimelineTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.TimelineTabContentView;
+    this.tabBrowser.showTabForContentView(tabContentView);
+};
+
+WebInspector.unlocalizedString = function(string)
+{
+    // Intentionally do nothing, since this is for engineering builds
+    // (such as in Debug UI) or in text that is standardized in English.
+    // For example, CSS property names and values are never localized.
+    return string;
+}
+
+WebInspector.UIString = function(string, vararg)
+{
+    if (WebInspector.dontLocalizeUserInterface)
+        return string;
+
+    if (window.localizedStrings && string in window.localizedStrings)
+        return window.localizedStrings[string];
+
+    if (!this._missingLocalizedStrings)
+        this._missingLocalizedStrings = {};
+
+    if (!(string in this._missingLocalizedStrings)) {
+        console.error("Localized string \"" + string + "\" was not found.");
+        this._missingLocalizedStrings[string] = true;
+    }
+
+    return "LOCALIZED STRING NOT FOUND";
+};
+
+WebInspector.restoreFocusFromElement = function(element)
+{
+    if (element && element.isSelfOrAncestor(this.currentFocusElement))
+        this.previousFocusElement.focus();
+};
+
+WebInspector.toggleNavigationSidebar = function(event)
+{
+    if (!this.navigationSidebar.collapsed || !this.navigationSidebar.sidebarPanels.length) {
+        this.navigationSidebar.collapsed = true;
+        return;
+    }
+
+    if (!this.navigationSidebar.selectedSidebarPanel)
+        this.navigationSidebar.selectedSidebarPanel = this.navigationSidebar.sidebarPanels[0];
+    this.navigationSidebar.collapsed = false;
+};
+
+WebInspector.toggleDetailsSidebar = function(event)
+{
+    if (!this.detailsSidebar.collapsed || !this.detailsSidebar.sidebarPanels.length) {
+        this.detailsSidebar.collapsed = true;
+        return;
+    }
+
+    if (!this.detailsSidebar.selectedSidebarPanel)
+        this.detailsSidebar.selectedSidebarPanel = this.detailsSidebar.sidebarPanels[0];
+    this.detailsSidebar.collapsed = false;
+};
+
+WebInspector.tabContentViewClassForRepresentedObject = function(representedObject)
+{
+    if (representedObject instanceof WebInspector.DOMTree)
+        return WebInspector.ElementsTabContentView;
+
+    if (representedObject instanceof WebInspector.TimelineRecording)
+        return WebInspector.TimelineTabContentView;
+
+    // We only support one console tab right now. So this isn't an instanceof check.
+    if (representedObject === this._consoleRepresentedObject)
+        return WebInspector.ConsoleTabContentView;
+
+    if (WebInspector.debuggerManager.paused) {
+        if (representedObject instanceof WebInspector.Script)
+            return WebInspector.DebuggerTabContentView;
+
+        if (representedObject instanceof WebInspector.Resource && (representedObject.type === WebInspector.Resource.Type.Document || representedObject.type === WebInspector.Resource.Type.Script))
+            return WebInspector.DebuggerTabContentView;
+    }
+
+    if (representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Script)
+        return WebInspector.ResourcesTabContentView;
+
+    // FIXME: Move Content Flows to the Elements tab?
+    if (representedObject instanceof WebInspector.ContentFlow)
+        return WebInspector.ResourcesTabContentView;
+
+    // FIXME: Move these to a Storage tab.
+    if (representedObject instanceof WebInspector.DOMStorageObject || representedObject instanceof WebInspector.CookieStorageObject ||
+        representedObject instanceof WebInspector.DatabaseTableObject || representedObject instanceof WebInspector.DatabaseObject ||
+        representedObject instanceof WebInspector.ApplicationCacheFrame || representedObject instanceof WebInspector.IndexedDatabaseObjectStore ||
+        representedObject instanceof WebInspector.IndexedDatabaseObjectStoreIndex)
+        return WebInspector.ResourcesTabContentView;
+
+    return null;
+};
+
+WebInspector.tabContentViewForRepresentedObject = function(representedObject)
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForRepresentedObject(representedObject);
+    if (tabContentView)
+        return tabContentView;
+
+    var tabContentViewClass = this.tabContentViewClassForRepresentedObject(representedObject);
+    if (!tabContentViewClass) {
+        console.error("Unknown representedObject, couldn't create TabContentView.", representedObject);
+        return null;
+    }
+
+    tabContentView = new tabContentViewClass;
+
+    this.tabBrowser.addTabForContentView(tabContentView);
+
+    return tabContentView;
+};
+
+WebInspector.showRepresentedObject = function(representedObject, cookie)
+{
+    var tabContentView = this.tabContentViewForRepresentedObject(representedObject);
+    console.assert(tabContentView);
+    if (!tabContentView)
+        return;
+
+    this.tabBrowser.showTabForContentView(tabContentView);
+    tabContentView.showRepresentedObject(representedObject, cookie);
+};
+
+WebInspector.showMainFrameDOMTree = function(nodeToSelect)
+{
+    console.assert(WebInspector.frameResourceManager.mainFrame);
+    if (!WebInspector.frameResourceManager.mainFrame)
+        return;
+    this.showRepresentedObject(WebInspector.frameResourceManager.mainFrame.domTree, {nodeToSelect});
+};
+
+WebInspector.showContentFlowDOMTree = function(contentFlow, nodeToSelect)
+{
+    this.showRepresentedObject(contentFlow, {nodeToSelect});
+};
+
+WebInspector.showSourceCodeForFrame = function(frameIdentifier)
+{
+    var frame = WebInspector.frameResourceManager.frameForIdentifier(frameIdentifier);
+    if (!frame) {
+        this._frameIdentifierToShowSourceCodeWhenAvailable = frameIdentifier;
+        return;
+    }
+
+    this._frameIdentifierToShowSourceCodeWhenAvailable = undefined;
+
+    this.showRepresentedObject(frame);
+};
+
+WebInspector.showSourceCode = function(sourceCode, positionToReveal, textRangeToSelect, forceUnformatted)
+{
+    console.assert(!positionToReveal || positionToReveal instanceof WebInspector.SourceCodePosition, positionToReveal);
+    var representedObject = sourceCode;
+
+    if (representedObject instanceof WebInspector.Script) {
+        // A script represented by a resource should always show the resource.
+        representedObject = representedObject.resource || representedObject;
+    }
+
+    var cookie = positionToReveal ? {lineNumber: positionToReveal.lineNumber, columnNumber: positionToReveal.columnNumber} : {};
+    this.showRepresentedObject(representedObject, cookie);
+};
+
+WebInspector.showSourceCodeLocation = function(sourceCodeLocation)
+{
+    this.showSourceCode(sourceCodeLocation.displaySourceCode, sourceCodeLocation.displayPosition());
+};
+
+WebInspector.showOriginalUnformattedSourceCodeLocation = function(sourceCodeLocation)
+{
+    this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.position(), null, true);
+};
+
+WebInspector.showOriginalOrFormattedSourceCodeLocation = function(sourceCodeLocation)
+{
+    this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.formattedPosition());
+};
+
+WebInspector.showOriginalOrFormattedSourceCodeTextRange = function(sourceCodeTextRange)
+{
+    var textRangeToSelect = sourceCodeTextRange.formattedTextRange;
+    this.showSourceCode(sourceCodeTextRange.sourceCode, textRangeToSelect.startPosition(), textRangeToSelect);
+};
+
+WebInspector.showResourceRequest = function(resource)
+{
+    this.showRepresentedObject(resource, {[WebInspector.ResourceClusterContentView.ContentViewIdentifierCookieKey]: WebInspector.ResourceClusterContentView.RequestIdentifier});
+};
+
+WebInspector.debuggerToggleBreakpoints = function(event)
+{
+    WebInspector.debuggerManager.breakpointsEnabled = !WebInspector.debuggerManager.breakpointsEnabled;
+};
+
+WebInspector.debuggerPauseResumeToggle = function(event)
+{
+    if (WebInspector.debuggerManager.paused)
+        WebInspector.debuggerManager.resume();
+    else
+        WebInspector.debuggerManager.pause();
+};
+
+WebInspector.debuggerStepOver = function(event)
+{
+    WebInspector.debuggerManager.stepOver();
+};
+
+WebInspector.debuggerStepInto = function(event)
+{
+    WebInspector.debuggerManager.stepInto();
+};
+
+WebInspector.debuggerStepOut = function(event)
+{
+    WebInspector.debuggerManager.stepOut();
+};
+
+WebInspector._searchTextDidChange = function(event)
+{
+    var tabContentView = this.tabBrowser.bestTabContentViewForClass(WebInspector.SearchTabContentView);
+    if (!tabContentView)
+        tabContentView = new WebInspector.SearchTabContentView;
+
+    var searchQuery = this._searchToolbarItem.text;
+    this._searchToolbarItem.text = "";
+
+    this.tabBrowser.showTabForContentView(tabContentView);
+
+    tabContentView.performSearch(searchQuery);
+};
+
+WebInspector._focusSearchField = function(event)
+{
+    if (this.tabBrowser.selectedTabContentView instanceof WebInspector.SearchTabContentView) {
+        this.tabBrowser.selectedTabContentView.focusSearchField();
+        return;
+    }
+
+    this._searchToolbarItem.focus();
+};
+
+WebInspector._focusChanged = function(event)
+{
+    // Make a caret selection inside the focused element if there isn't a range selection and there isn't already
+    // a caret selection inside. This is needed (at least) to remove caret from console when focus is moved.
+    // The selection change should not apply to text fields and text areas either.
+
+    if (WebInspector.isEventTargetAnEditableField(event)) {
+        // Still update the currentFocusElement if inside of a CodeMirror editor.
+        var codeMirrorEditorElement = event.target.enclosingNodeOrSelfWithClass("CodeMirror");
+        if (codeMirrorEditorElement && codeMirrorEditorElement !== this.currentFocusElement) {
+            this.previousFocusElement = this.currentFocusElement;
+            this.currentFocusElement = codeMirrorEditorElement;
+        }
+        return;
+    }
+
+    var selection = window.getSelection();
+    if (!selection.isCollapsed)
+        return;
+
+    var element = event.target;
+
+    if (element !== this.currentFocusElement) {
+        this.previousFocusElement = this.currentFocusElement;
+        this.currentFocusElement = element;
+    }
+
+    if (element.isInsertionCaretInside())
+        return;
+
+    var selectionRange = element.ownerDocument.createRange();
+    selectionRange.setStart(element, 0);
+    selectionRange.setEnd(element, 0);
+
+    selection.removeAllRanges();
+    selection.addRange(selectionRange);
+};
+
+WebInspector._mouseWasClicked = function(event)
+{
+    this.handlePossibleLinkClick(event);
+};
+
+WebInspector._dragOver = function(event)
+{
+    // Do nothing if another event listener handled the event already.
+    if (event.defaultPrevented)
+        return;
+
+    // Allow dropping into editable areas.
+    if (WebInspector.isEventTargetAnEditableField(event))
+        return;
+
+    // Prevent the drop from being accepted.
+    event.dataTransfer.dropEffect = "none";
+    event.preventDefault();
+};
+
+WebInspector._captureDidStart = function(event)
+{
+    this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.replay);
+};
+
+WebInspector._debuggerDidPause = function(event)
+{
+    // FIXME: <webkit.org/b/###> Web Inspector: Preference for Auto Showing Scope Chain sidebar on pause
+    this.showDebuggerTab();
+
+    this._dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
+
+    InspectorFrontendHost.bringToFront();
+};
+
+WebInspector._debuggerDidResume = function(event)
+{
+    this._dashboardContainer.closeDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
+};
+
+WebInspector._frameWasAdded = function(event)
+{
+    if (!this._frameIdentifierToShowSourceCodeWhenAvailable)
+        return;
+
+    var frame = event.data.frame;
+    if (frame.id !== this._frameIdentifierToShowSourceCodeWhenAvailable)
+        return;
+
+    function delayedWork()
+    {
+        this.showSourceCodeForFrame(frame.id);
+    }
+
+    // Delay showing the frame since FrameWasAdded is called before MainFrameChanged.
+    // Calling showSourceCodeForFrame before MainFrameChanged will show the frame then close it.
+    setTimeout(delayedWork.bind(this));
+};
+
+WebInspector._mainFrameDidChange = function(event)
+{
+    this._updateDownloadToolbarButton();
+
+    this.updateWindowTitle();
+};
+
+WebInspector._mainResourceDidChange = function(event)
+{
+    if (!event.target.isMainFrame())
+        return;
+
+    this._inProvisionalLoad = false;
+
+    // Run cookie restoration after we are sure all of the Tabs and NavigationSidebarPanels
+    // have updated with respect to the main resource change.
+    setTimeout(this._restoreCookieForOpenTabs.bind(this, WebInspector.StateRestorationType.Navigation));
+
+    this._updateDownloadToolbarButton();
+
+    this.updateWindowTitle();
+};
+
+WebInspector._provisionalLoadStarted = function(event)
+{
+    if (!event.target.isMainFrame())
+        return;
+
+    this._saveCookieForOpenTabs();
+
+    this._inProvisionalLoad = true;
+};
+
+WebInspector._restoreCookieForOpenTabs = function(restorationType)
+{
+    for (var tabBarItem of this.tabBar.tabBarItems) {
+        var tabContentView = tabBarItem.representedObject;
+        if (!(tabContentView instanceof WebInspector.TabContentView))
+            continue;
+        tabContentView.restoreStateFromCookie(restorationType);
+    }
+};
+
+WebInspector._saveCookieForOpenTabs = function()
+{
+    for (var tabBarItem of this.tabBar.tabBarItems) {
+        var tabContentView = tabBarItem.representedObject;
+        if (!(tabContentView instanceof WebInspector.TabContentView))
+            continue;
+        tabContentView.saveStateToCookie();
+    }
+};
+
+WebInspector._windowFocused = function(event)
+{
+    if (event.target.document.nodeType !== Node.DOCUMENT_NODE)
+        return;
+
+    // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
+    document.body.classList.remove(this.docked ? "window-docked-inactive" : "window-inactive");
+};
+
+WebInspector._windowBlurred = function(event)
+{
+    if (event.target.document.nodeType !== Node.DOCUMENT_NODE)
+        return;
+
+    // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
+    document.body.classList.add(this.docked ? "window-docked-inactive" : "window-inactive");
+};
+
+WebInspector._windowResized = function(event)
+{
+    this.toolbar.updateLayout(WebInspector.View.LayoutReason.Resize);
+    this.tabBar.updateLayout(WebInspector.View.LayoutReason.Resize);
+    this._tabBrowserSizeDidChange();
+};
+
+WebInspector._updateModifierKeys = function(event)
+{
+    var didChange = this.modifierKeys.altKey !== event.altKey || this.modifierKeys.metaKey !== event.metaKey || this.modifierKeys.shiftKey !== event.shiftKey;
+
+    this.modifierKeys = {altKey: event.altKey, metaKey: event.metaKey, shiftKey: event.shiftKey};
+
+    if (didChange)
+        this.notifications.dispatchEventToListeners(WebInspector.Notification.GlobalModifierKeysDidChange, event);
+};
+
+WebInspector._windowKeyDown = function(event)
+{
+    this._updateModifierKeys(event);
+};
+
+WebInspector._windowKeyUp = function(event)
+{
+    this._updateModifierKeys(event);
+};
+
+WebInspector._mouseMoved = function(event)
+{
+    this._updateModifierKeys(event);
+    this.mouseCoords = {
+        x: event.pageX,
+        y: event.pageY
+    };
+};
+
+WebInspector._pageHidden = function(event)
+{
+    this._saveCookieForOpenTabs();
+};
+
+WebInspector._contextMenuRequested = function(event)
+{
+    let proposedContextMenu;
+
+    // This is setting is only defined in engineering builds.
+    if (WebInspector.isDebugUIEnabled()) {
+        proposedContextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        proposedContextMenu.appendSeparator();
+        proposedContextMenu.appendItem(WebInspector.unlocalizedString("Reload Web Inspector"), () => {
+            window.location.reload();
+        });
+
+        let protocolSubMenu = proposedContextMenu.appendSubMenuItem(WebInspector.unlocalizedString("Protocol Debugging"), null, false);
+        let isCapturingTraffic = InspectorBackend.activeTracer instanceof WebInspector.CapturingProtocolTracer;
+
+        protocolSubMenu.appendCheckboxItem(WebInspector.unlocalizedString("Capture Trace"), () => {
+            if (isCapturingTraffic)
+                InspectorBackend.activeTracer = null;
+            else
+                InspectorBackend.activeTracer = new WebInspector.CapturingProtocolTracer;
+        }, isCapturingTraffic);
+
+        protocolSubMenu.appendSeparator();
+
+        protocolSubMenu.appendItem(WebInspector.unlocalizedString("Export Trace\u2026"), () => {
+            const forceSaveAs = true;
+            WebInspector.saveDataToFile(InspectorBackend.activeTracer.trace.saveData, forceSaveAs);
+        }, !isCapturingTraffic);
+    } else {
+        const onlyExisting = true;
+        proposedContextMenu = WebInspector.ContextMenu.createFromEvent(event, onlyExisting);
+    }
+
+    if (proposedContextMenu)
+        proposedContextMenu.show();
+};
+
+WebInspector.isDebugUIEnabled = function()
+{
+    return WebInspector.showDebugUISetting && WebInspector.showDebugUISetting.value;
+}
+
+WebInspector._undock = function(event)
+{
+    InspectorFrontendHost.requestSetDockSide("undocked");
+};
+
+WebInspector._dockBottom = function(event)
+{
+    InspectorFrontendHost.requestSetDockSide("bottom");
+};
+
+WebInspector._dockRight = function(event)
+{
+    InspectorFrontendHost.requestSetDockSide("right");
+};
+
+WebInspector._updateDockNavigationItems = function()
+{
+    if (this._dockingAvailable || this.docked) {
+        this._closeToolbarButton.hidden = !this.docked;
+        this._undockToolbarButton.hidden = this._dockSide === "undocked";
+        this._dockBottomToolbarButton.hidden = this._dockSide === "bottom";
+        this._dockRightToolbarButton.hidden = this._dockSide === "right";
+    } else {
+        this._closeToolbarButton.hidden = true;
+        this._undockToolbarButton.hidden = true;
+        this._dockBottomToolbarButton.hidden = true;
+        this._dockRightToolbarButton.hidden = true;
+    }
+};
+
+WebInspector._tabBrowserSizeDidChange = function()
+{
+    this.tabBrowser.updateLayout(WebInspector.View.LayoutReason.Resize);
+    this.splitContentBrowser.updateLayout(WebInspector.View.LayoutReason.Resize);
+    this.quickConsole.updateLayout(WebInspector.View.LayoutReason.Resize);
+};
+
+WebInspector._quickConsoleDidResize = function(event)
+{
+    this.tabBrowser.updateLayout(WebInspector.View.LayoutReason.Resize);
+};
+
+WebInspector._sidebarWidthDidChange = function(event)
+{
+    this._tabBrowserSizeDidChange();
+};
+
+WebInspector._setupViewHierarchy = function()
+{
+    let rootView = WebInspector.View.rootView();
+    rootView.addSubview(this.toolbar);
+    rootView.addSubview(this.tabBar);
+    rootView.addSubview(this.navigationSidebar);
+    rootView.addSubview(this.tabBrowser);
+    rootView.addSubview(this.splitContentBrowser);
+    rootView.addSubview(this.quickConsole);
+    rootView.addSubview(this.detailsSidebar);
+};
+
+WebInspector._tabBrowserSelectedTabContentViewDidChange = function(event)
+{
+    if (this.tabBar.selectedTabBarItem)
+        this._selectedTabIndexSetting.value = this.tabBar.tabBarItems.indexOf(this.tabBar.selectedTabBarItem);
+
+    if (!this.doesCurrentTabSupportSplitContentBrowser())
+        this.hideSplitConsole();
+
+    if (!this.isShowingSplitConsole())
+        this.quickConsole.consoleLogVisibilityChanged(this.isShowingConsoleTab());
+};
+
+WebInspector._initializeWebSocketIfNeeded = function()
+{
+    if (!InspectorFrontendHost.initializeWebSocket)
+        return;
+
+    var queryParams = parseLocationQueryParameters();
+
+    if ("ws" in queryParams)
+        var url = "ws://" + queryParams.ws;
+    else if ("page" in queryParams) {
+        var page = queryParams.page;
+        var host = "host" in queryParams ? queryParams.host : window.location.host;
+        var url = "ws://" + host + "/devtools/page/" + page;
+    }
+
+    if (!url)
+        return;
+
+    InspectorFrontendHost.initializeWebSocket(url);
+};
+
+WebInspector._updateSplitConsoleHeight = function(height)
+{
+    const minimumHeight = 64;
+    const maximumHeight = window.innerHeight * 0.55;
+
+    height = Math.max(minimumHeight, Math.min(height, maximumHeight));
+
+    this.splitContentBrowser.element.style.height = height + "px";
+};
+
+WebInspector._consoleResizerMouseDown = function(event)
+{
+    if (event.button !== 0 || event.ctrlKey)
+        return;
+
+    // Only start dragging if the target is one of the elements that we expect.
+    if (!event.target.classList.contains("navigation-bar") && !event.target.classList.contains("flexible-space"))
+        return;
+
+    var resizerElement = event.target;
+    var mouseOffset = resizerElement.offsetHeight - (event.pageY - resizerElement.totalOffsetTop);
+
+    function dockedResizerDrag(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var height = window.innerHeight - event.pageY - mouseOffset;
+
+        this._splitConsoleHeightSetting.value = height;
+
+        this._updateSplitConsoleHeight(height);
+
+        this.quickConsole.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
+    }
+
+    function dockedResizerDragEnd(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        this.elementDragEnd(event);
+    }
+
+    this.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, "row-resize");
+};
+
+WebInspector._toolbarMouseDown = function(event)
+{
+    if (event.ctrlKey)
+        return;
+
+    if (this._dockSide === "right")
+        return;
+
+    if (this.docked)
+        this._dockedResizerMouseDown(event);
+    else
+        this._moveWindowMouseDown(event);
+};
+
+WebInspector._dockedResizerMouseDown = function(event)
+{
+    if (event.button !== 0 || event.ctrlKey)
+        return;
+
+    if (!this.docked)
+        return;
+
+    // Only start dragging if the target is one of the elements that we expect.
+    if (event.target.id !== "docked-resizer" && !event.target.classList.contains("toolbar") &&
+        !event.target.classList.contains("flexible-space") && !event.target.classList.contains("item-section"))
+        return;
+
+    var windowProperty = this._dockSide === "bottom" ? "innerHeight" : "innerWidth";
+    var eventScreenProperty = this._dockSide === "bottom" ? "screenY" : "screenX";
+    var eventClientProperty = this._dockSide === "bottom" ? "clientY" : "clientX";
+
+    var resizerElement = event.target;
+    var firstClientPosition = event[eventClientProperty];
+    var lastScreenPosition = event[eventScreenProperty];
+
+    function dockedResizerDrag(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var position = event[eventScreenProperty];
+        var delta = position - lastScreenPosition;
+        var clientPosition = event[eventClientProperty];
+
+        lastScreenPosition = position;
+
+        // If delta is positive the docked Inspector size is decreasing, in which case the cursor client position
+        // with respect to the target cannot be less than the first mouse down position within the target.
+        if (delta > 0 && clientPosition < firstClientPosition)
+            return;
+
+        // If delta is negative the docked Inspector size is increasing, in which case the cursor client position
+        // with respect to the target cannot be greater than the first mouse down position within the target.
+        if (delta < 0 && clientPosition > firstClientPosition)
+            return;
+
+        let dimension = Math.max(0, window[windowProperty] - delta);
+        // If zoomed in/out, there be greater/fewer document pixels shown, but the inspector's
+        // width or height should be the same in device pixels regardless of the document zoom.
+        dimension *= InspectorFrontendHost.zoomFactor();
+
+        if (this._dockSide === "bottom")
+            InspectorFrontendHost.setAttachedWindowHeight(dimension);
+        else
+            InspectorFrontendHost.setAttachedWindowWidth(dimension);
+    }
+
+    function dockedResizerDragEnd(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        WebInspector.elementDragEnd(event);
+    }
+
+    WebInspector.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, this._dockSide === "bottom" ? "row-resize" : "col-resize");
+};
+
+WebInspector._moveWindowMouseDown = function(event)
+{
+    console.assert(!this.docked);
+
+    if (event.button !== 0 || event.ctrlKey)
+        return;
+
+    // Only start dragging if the target is one of the elements that we expect.
+    if (!event.target.classList.contains("toolbar") && !event.target.classList.contains("flexible-space") &&
+        !event.target.classList.contains("item-section"))
+        return;
+
+    if (WebInspector.Platform.name === "mac") {
+        // New Mac releases can start a window drag.
+        if (WebInspector.Platform.version.release >= 11) {
+            InspectorFrontendHost.startWindowDrag();
+            event.preventDefault();
+            return;
+        }
+
+        // Ignore dragging on the top of the toolbar on Mac if the system handles it.
+        if (WebInspector.Platform.version.release === 10) {
+            const windowDragHandledTitleBarHeight = 22;
+            if (event.pageY < windowDragHandledTitleBarHeight) {
+                event.preventDefault();
+                return;
+            }
+        }
+    }
+
+    var lastScreenX = event.screenX;
+    var lastScreenY = event.screenY;
+
+    function toolbarDrag(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var x = event.screenX - lastScreenX;
+        var y = event.screenY - lastScreenY;
+
+        InspectorFrontendHost.moveWindowBy(x, y);
+
+        lastScreenX = event.screenX;
+        lastScreenY = event.screenY;
+    }
+
+    function toolbarDragEnd(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        WebInspector.elementDragEnd(event);
+    }
+
+    WebInspector.elementDragStart(event.target, toolbarDrag, toolbarDragEnd, event, "default");
+};
+
+WebInspector._storageWasInspected = function(event)
+{
+    this.showStorageTab();
+};
+
+WebInspector._domNodeWasInspected = function(event)
+{
+    this.domTreeManager.highlightDOMNodeForTwoSeconds(event.data.node.id);
+
+    InspectorFrontendHost.bringToFront();
+
+    this.showElementsTab();
+    this.showMainFrameDOMTree(event.data.node);
+};
+
+WebInspector._inspectModeStateChanged = function(event)
+{
+    this._inspectModeToolbarButton.activated = this.domTreeManager.inspectModeEnabled;
+};
+
+WebInspector._toggleInspectMode = function(event)
+{
+    this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
+};
+
+WebInspector._downloadWebArchive = function(event)
+{
+    this.archiveMainFrame();
+};
+
+WebInspector._reloadPage = function(event)
+{
+    if (!window.PageAgent)
+        return;
+
+    PageAgent.reload();
+    event.preventDefault();
+};
+
+WebInspector._reloadPageClicked = function(event)
+{
+    // Ignore cache when the shift key is pressed.
+    PageAgent.reload(window.event ? window.event.shiftKey : false);
+};
+
+WebInspector._reloadPageIgnoringCache = function(event)
+{
+    if (!window.PageAgent)
+        return;
+
+    PageAgent.reload(true);
+    event.preventDefault();
+};
+
+WebInspector._updateReloadToolbarButton = function()
+{
+    if (!window.PageAgent) {
+        this._reloadToolbarButton.hidden = true;
+        return;
+    }
+
+    this._reloadToolbarButton.hidden = false;
+};
+
+WebInspector._updateDownloadToolbarButton = function()
+{
+    // COMPATIBILITY (iOS 7): Page.archive did not exist yet.
+    if (!window.PageAgent || !PageAgent.archive || this.debuggableType !== WebInspector.DebuggableType.Web) {
+        this._downloadToolbarButton.hidden = true;
+        return;
+    }
+
+    if (this._downloadingPage) {
+        this._downloadToolbarButton.enabled = false;
+        return;
+    }
+
+    this._downloadToolbarButton.enabled = this.canArchiveMainFrame();
+};
+
+WebInspector._toggleInspectMode = function(event)
+{
+    this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
+};
+
+WebInspector._showConsoleTab = function(event)
+{
+    this.showConsoleTab();
+};
+
+WebInspector._focusConsolePrompt = function(event)
+{
+    this.quickConsole.prompt.focus();
+};
+
+WebInspector._focusedContentBrowser = function()
+{
+    if (this.tabBrowser.element.isSelfOrAncestor(this.currentFocusElement) || document.activeElement === document.body) {
+        var tabContentView = this.tabBrowser.selectedTabContentView;
+        if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
+            return tabContentView.contentBrowser;
+        return null;
+    }
+
+    if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement)
+        || (WebInspector.isShowingSplitConsole() && this.quickConsole.element.isSelfOrAncestor(this.currentFocusElement)))
+        return this.splitContentBrowser;
+
+    return null;
+};
+
+WebInspector._focusedContentView = function()
+{
+    if (this.tabBrowser.element.isSelfOrAncestor(this.currentFocusElement) || document.activeElement === document.body) {
+        var tabContentView = this.tabBrowser.selectedTabContentView;
+        if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
+            return tabContentView.contentBrowser.currentContentView;
+        return tabContentView;
+    }
+
+    if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement)
+        || (WebInspector.isShowingSplitConsole() && this.quickConsole.element.isSelfOrAncestor(this.currentFocusElement)))
+        return this.splitContentBrowser.currentContentView;
+
+    return null;
+};
+
+WebInspector._focusedOrVisibleContentBrowser = function()
+{
+    let focusedContentBrowser = this._focusedContentBrowser();
+    if (focusedContentBrowser)
+        return focusedContentBrowser;
+
+    var tabContentView = this.tabBrowser.selectedTabContentView;
+    if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
+        return tabContentView.contentBrowser;
+
+    return null;
+};
+
+WebInspector._focusedOrVisibleContentView = function()
+{
+    let focusedContentView = this._focusedContentView();
+    if (focusedContentView)
+        return focusedContentView;
+
+    var tabContentView = this.tabBrowser.selectedTabContentView;
+    if (tabContentView instanceof WebInspector.ContentBrowserTabContentView)
+        return tabContentView.contentBrowser.currentContentView;
+    return tabContentView;
+};
+
+WebInspector._beforecopy = function(event)
+{
+    var selection = window.getSelection();
+
+    // If there is no selection, see if the focused element or focused ContentView can handle the copy event.
+    if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
+        var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
+        if (focusedCopyHandler && typeof focusedCopyHandler.handleBeforeCopyEvent === "function") {
+            focusedCopyHandler.handleBeforeCopyEvent(event);
+            if (event.defaultPrevented)
+                return;
+        }
+
+        var focusedContentView = this._focusedContentView();
+        if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
+            event.preventDefault();
+            return;
+        }
+
+        return;
+    }
+
+    if (selection.isCollapsed)
+        return;
+
+    // Say we can handle it (by preventing default) to remove word break characters.
+    event.preventDefault();
+};
+
+WebInspector._find = function(event)
+{
+    var contentBrowser = this._focusedOrVisibleContentBrowser();
+    if (!contentBrowser || typeof contentBrowser.handleFindEvent !== "function")
+        return;
+    
+    contentBrowser.handleFindEvent(event);
+};
+
+WebInspector._save = function(event)
+{
+    var contentView = this._focusedOrVisibleContentView();
+    if (!contentView || !contentView.supportsSave)
+        return;
+
+    WebInspector.saveDataToFile(contentView.saveData);
+};
+
+WebInspector._saveAs = function(event)
+{
+    var contentView = this._focusedOrVisibleContentView();
+    if (!contentView || !contentView.supportsSave)
+        return;
+
+    WebInspector.saveDataToFile(contentView.saveData, true);
+};
+
+WebInspector._copy = function(event)
+{
+    var selection = window.getSelection();
+
+    // If there is no selection, pass the copy event on to the focused element or focused ContentView.
+    if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
+        var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
+        if (focusedCopyHandler && typeof focusedCopyHandler.handleCopyEvent === "function") {
+            focusedCopyHandler.handleCopyEvent(event);
+            if (event.defaultPrevented)
+                return;
+        }
+
+        var focusedContentView = this._focusedContentView();
+        if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
+            focusedContentView.handleCopyEvent(event);
+            return;
+        }
+
+        return;
+    }
+
+    if (selection.isCollapsed)
+        return;
+
+    // Remove word break characters from the selection before putting it on the pasteboard.
+    var selectionString = selection.toString().removeWordBreakCharacters();
+    event.clipboardData.setData("text/plain", selectionString);
+    event.preventDefault();
+};
+
+WebInspector._increaseZoom = function(event)
+{
+    const epsilon = 0.0001;
+    const maximumZoom = 2.4;
+    let currentZoom = InspectorFrontendHost.zoomFactor();
+    if (currentZoom + epsilon >= maximumZoom)
+        return;
+
+    let newZoom = Math.min(maximumZoom, currentZoom + 0.2);
+    InspectorFrontendHost.setZoomFactor(newZoom);
+    event.preventDefault();
+};
+
+WebInspector._decreaseZoom = function(event)
+{
+    const epsilon = 0.0001;
+    const minimumZoom = 0.6;
+    let currentZoom = InspectorFrontendHost.zoomFactor();    
+    if (currentZoom - epsilon <= minimumZoom)
+        return;
+
+    let newZoom = Math.max(minimumZoom, currentZoom - 0.2);
+    InspectorFrontendHost.setZoomFactor(newZoom);
+    event.preventDefault();
+};
+
+WebInspector._resetZoom = function(event)
+{
+    InspectorFrontendHost.setZoomFactor(1);
+};
+
+WebInspector._showTabAtIndex = function(i, event)
+{
+    if (i <= WebInspector.tabBar.tabBarItems.length)
+        WebInspector.tabBar.selectedTabBarItem = i - 1;
+};
+
+WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor, eventTarget)
+{
+    if (WebInspector._elementDraggingEventListener || WebInspector._elementEndDraggingEventListener)
+        WebInspector.elementDragEnd(event);
+
+    if (element) {
+        // Install glass pane
+        if (WebInspector._elementDraggingGlassPane)
+            WebInspector._elementDraggingGlassPane.remove();
+
+        var glassPane = document.createElement("div");
+        glassPane.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1";
+        glassPane.id = "glass-pane-for-drag";
+        element.ownerDocument.body.appendChild(glassPane);
+        WebInspector._elementDraggingGlassPane = glassPane;
+    }
+
+    WebInspector._elementDraggingEventListener = dividerDrag;
+    WebInspector._elementEndDraggingEventListener = elementDragEnd;
+
+    var targetDocument = event.target.ownerDocument;
+
+    WebInspector._elementDraggingEventTarget = eventTarget || targetDocument;
+    WebInspector._elementDraggingEventTarget.addEventListener("mousemove", dividerDrag, true);
+    WebInspector._elementDraggingEventTarget.addEventListener("mouseup", elementDragEnd, true);
+
+    targetDocument.body.style.cursor = cursor;
+
+    event.preventDefault();
+};
+
+WebInspector.elementDragEnd = function(event)
+{
+    WebInspector._elementDraggingEventTarget.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
+    WebInspector._elementDraggingEventTarget.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
+
+    event.target.ownerDocument.body.style.removeProperty("cursor");
+
+    if (WebInspector._elementDraggingGlassPane)
+        WebInspector._elementDraggingGlassPane.remove();
+
+    delete WebInspector._elementDraggingGlassPane;
+    delete WebInspector._elementDraggingEventTarget;
+    delete WebInspector._elementDraggingEventListener;
+    delete WebInspector._elementEndDraggingEventListener;
+
+    event.preventDefault();
+};
+
+WebInspector.createMessageTextView = function(message, isError)
+{
+    var messageElement = document.createElement("div");
+    messageElement.className = "message-text-view";
+    if (isError)
+        messageElement.classList.add("error");
+
+    messageElement.textContent = message;
+
+    return messageElement;
+};
+
+WebInspector.createGoToArrowButton = function()
+{
+    function stopPropagation(event)
+    {
+        event.stopPropagation()
+    }
+
+    var button = document.createElement("button");
+    button.addEventListener("mousedown", stopPropagation, true);
+    button.className = "go-to-arrow";
+    button.tabIndex = -1;
+    return button;
+};
+
+WebInspector.createSourceCodeLocationLink = function(sourceCodeLocation, dontFloat, useGoToArrowButton)
+{
+    console.assert(sourceCodeLocation);
+    if (!sourceCodeLocation)
+        return null;
+
+    var linkElement = document.createElement("a");
+    linkElement.className = "go-to-link";
+    WebInspector.linkifyElement(linkElement, sourceCodeLocation);
+    sourceCodeLocation.populateLiveDisplayLocationTooltip(linkElement);
+
+    if (useGoToArrowButton)
+        linkElement.appendChild(WebInspector.createGoToArrowButton());
+    else
+        sourceCodeLocation.populateLiveDisplayLocationString(linkElement, "textContent");
+
+    if (dontFloat)
+        linkElement.classList.add("dont-float");
+
+    return linkElement;
+};
+
+WebInspector.linkifyLocation = function(url, lineNumber, columnNumber, className)
+{
+    var sourceCode = WebInspector.sourceCodeForURL(url);
+
+    if (!sourceCode) {
+        var anchor = document.createElement("a");
+        anchor.href  = url;
+        anchor.lineNumber = lineNumber;
+        if (className)
+            anchor.className = className;
+        anchor.append(WebInspector.displayNameForURL(url) + ":" + lineNumber);
+        return anchor;
+    }
+
+    var sourceCodeLocation = sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
+    var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, true);
+    if (className)
+        linkElement.classList.add(className);
+    return linkElement;
+};
+
+WebInspector.linkifyElement = function(linkElement, sourceCodeLocation) {
+    console.assert(sourceCodeLocation);
+
+    function showSourceCodeLocation(event)
+    {
+        event.stopPropagation();
+        event.preventDefault();
+
+        if (event.metaKey)
+            this.showOriginalUnformattedSourceCodeLocation(sourceCodeLocation);
+        else
+            this.showSourceCodeLocation(sourceCodeLocation);
+    }
+
+    linkElement.addEventListener("click", showSourceCodeLocation.bind(this));
+};
+
+WebInspector.sourceCodeForURL = function(url) {
+    var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
+    if (!sourceCode) {
+        sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
+        if (sourceCode)
+            sourceCode = sourceCode.resource || sourceCode;
+    }
+    return sourceCode || null;
+};
+
+WebInspector.linkifyURLAsNode = function(url, linkText, classes)
+{
+    if (!linkText)
+        linkText = url;
+
+    classes = (classes ? classes + " " : "");
+
+    var a = document.createElement("a");
+    a.href = url;
+    a.className = classes;
+
+    a.textContent = linkText;
+    a.style.maxWidth = "100%";
+
+    return a;
+};
+
+WebInspector.linkifyStringAsFragmentWithCustomLinkifier = function(string, linkifier)
+{
+    var container = document.createDocumentFragment();
+    var linkStringRegEx = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|www\.)[\w$\-_+*'=\|\/\\(){}[\]%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({%@&#~]/;
+    var lineColumnRegEx = /:(\d+)(:(\d+))?$/;
+
+    while (string) {
+        var linkString = linkStringRegEx.exec(string);
+        if (!linkString)
+            break;
+
+        linkString = linkString[0];
+        var linkIndex = string.indexOf(linkString);
+        var nonLink = string.substring(0, linkIndex);
+        container.append(nonLink);
+
+        var title = linkString;
+        var realURL = (linkString.startsWith("www.") ? "http://" + linkString : linkString);
+        var lineColumnMatch = lineColumnRegEx.exec(realURL);
+        if (lineColumnMatch)
+            realURL = realURL.substring(0, realURL.length - lineColumnMatch[0].length);
+
+        var lineNumber;
+        if (lineColumnMatch)
+            lineNumber = parseInt(lineColumnMatch[1]) - 1;
+
+        var linkNode = linkifier(title, realURL, lineNumber);
+        container.appendChild(linkNode);
+        string = string.substring(linkIndex + linkString.length, string.length);
+    }
+
+    if (string)
+        container.append(string);
+
+    return container;
+};
+
+WebInspector.linkifyStringAsFragment = function(string)
+{
+    function linkifier(title, url, lineNumber)
+    {
+        var urlNode = WebInspector.linkifyURLAsNode(url, title, undefined);
+        if (lineNumber !== undefined)
+            urlNode.lineNumber = lineNumber;
+
+        return urlNode;
+    }
+
+    return WebInspector.linkifyStringAsFragmentWithCustomLinkifier(string, linkifier);
+};
+
+WebInspector.createResourceLink = function(resource, className)
+{
+    function handleClick(event)
+    {
+        event.stopPropagation();
+        event.preventDefault();
+
+        WebInspector.showRepresentedObject(resource);
+    }
+
+    let linkNode = document.createElement("a");
+    linkNode.classList.add("resource-link", className);
+    linkNode.title = resource.url;
+    linkNode.textContent = (resource.urlComponents.lastPathComponent || resource.url).insertWordBreakCharacters();
+    linkNode.addEventListener("click", handleClick.bind(this));
+    return linkNode;
+}
+
+WebInspector._undoKeyboardShortcut = function(event)
+{
+    if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
+        this.undo();
+        event.preventDefault();
+    }
+};
+
+WebInspector._redoKeyboardShortcut = function(event)
+{
+    if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
+        this.redo();
+        event.preventDefault();
+    }
+};
+
+WebInspector.undo = function()
+{
+    DOMAgent.undo();
+};
+
+WebInspector.redo = function()
+{
+    DOMAgent.redo();
+};
+
+WebInspector.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes)
+{
+    changes = changes || [];
+    var highlightNodes = [];
+    var lineText = element.textContent;
+    var ownerDocument = element.ownerDocument;
+    var textNodeSnapshot = ownerDocument.evaluate(".//text()", element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+
+    var snapshotLength = textNodeSnapshot.snapshotLength;
+    if (snapshotLength === 0)
+        return highlightNodes;
+
+    var nodeRanges = [];
+    var rangeEndOffset = 0;
+    for (var i = 0; i < snapshotLength; ++i) {
+        var range = {};
+        range.offset = rangeEndOffset;
+        range.length = textNodeSnapshot.snapshotItem(i).textContent.length;
+        rangeEndOffset = range.offset + range.length;
+        nodeRanges.push(range);
+    }
+
+    var startIndex = 0;
+    for (var i = 0; i < resultRanges.length; ++i) {
+        var startOffset = resultRanges[i].offset;
+        var endOffset = startOffset + resultRanges[i].length;
+
+        while (startIndex < snapshotLength && nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset)
+            startIndex++;
+        var endIndex = startIndex;
+        while (endIndex < snapshotLength && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset)
+            endIndex++;
+        if (endIndex === snapshotLength)
+            break;
+
+        var highlightNode = ownerDocument.createElement("span");
+        highlightNode.className = styleClass;
+        highlightNode.textContent = lineText.substring(startOffset, endOffset);
+
+        var lastTextNode = textNodeSnapshot.snapshotItem(endIndex);
+        var lastText = lastTextNode.textContent;
+        lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
+        changes.push({ node: lastTextNode, type: "changed", oldText: lastText, newText: lastTextNode.textContent });
+
+        if (startIndex === endIndex) {
+            lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
+            changes.push({ node: highlightNode, type: "added", nextSibling: lastTextNode, parent: lastTextNode.parentElement });
+            highlightNodes.push(highlightNode);
+
+            var prefixNode = ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
+            lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
+            changes.push({ node: prefixNode, type: "added", nextSibling: highlightNode, parent: lastTextNode.parentElement });
+        } else {
+            var firstTextNode = textNodeSnapshot.snapshotItem(startIndex);
+            var firstText = firstTextNode.textContent;
+            var anchorElement = firstTextNode.nextSibling;
+
+            firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
+            changes.push({ node: highlightNode, type: "added", nextSibling: anchorElement, parent: firstTextNode.parentElement });
+            highlightNodes.push(highlightNode);
+
+            firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
+            changes.push({ node: firstTextNode, type: "changed", oldText: firstText, newText: firstTextNode.textContent });
+
+            for (var j = startIndex + 1; j < endIndex; j++) {
+                var textNode = textNodeSnapshot.snapshotItem(j);
+                var text = textNode.textContent;
+                textNode.textContent = "";
+                changes.push({ node: textNode, type: "changed", oldText: text, newText: textNode.textContent });
+            }
+        }
+        startIndex = endIndex;
+        nodeRanges[startIndex].offset = endOffset;
+        nodeRanges[startIndex].length = lastTextNode.textContent.length;
+
+    }
+    return highlightNodes;
+};
+
+WebInspector.revertDomChanges = function(domChanges)
+{
+    for (var i = domChanges.length - 1; i >= 0; --i) {
+        var entry = domChanges[i];
+        switch (entry.type) {
+        case "added":
+            entry.node.remove();
+            break;
+        case "changed":
+            entry.node.textContent = entry.oldText;
+            break;
+        }
+    }
+};
+
+WebInspector.archiveMainFrame = function()
+{
+    this._downloadingPage = true;
+    this._updateDownloadToolbarButton();
+
+    PageAgent.archive(function(error, data) {
+        this._downloadingPage = false;
+        this._updateDownloadToolbarButton();
+
+        if (error)
+            return;
+
+        var mainFrame = WebInspector.frameResourceManager.mainFrame;
+        var archiveName = mainFrame.mainResource.urlComponents.host || mainFrame.mainResource.displayName || "Archive";
+        var url = "web-inspector:///" + encodeURI(archiveName) + ".webarchive";
+
+        InspectorFrontendHost.save(url, data, true, true);
+    }.bind(this));
+};
+
+WebInspector.canArchiveMainFrame = function()
+{
+    // COMPATIBILITY (iOS 7): Page.archive did not exist yet.
+    if (!PageAgent.archive || this.debuggableType !== WebInspector.DebuggableType.Web)
+        return false;
+
+    if (!WebInspector.frameResourceManager.mainFrame || !WebInspector.frameResourceManager.mainFrame.mainResource)
+        return;
+
+    return WebInspector.Resource.typeFromMIMEType(WebInspector.frameResourceManager.mainFrame.mainResource.mimeType) === WebInspector.Resource.Type.Document;
+};
+
+WebInspector.addWindowKeydownListener = function(listener)
+{
+    if (typeof listener.handleKeydownEvent !== "function")
+        return;
+
+    this._windowKeydownListeners.push(listener);
+
+    this._updateWindowKeydownListener();
+};
+
+WebInspector.removeWindowKeydownListener = function(listener)
+{
+    this._windowKeydownListeners.remove(listener);
+
+    this._updateWindowKeydownListener();
+};
+
+WebInspector._updateWindowKeydownListener = function()
+{
+    if (this._windowKeydownListeners.length > 0)
+        window.addEventListener("keydown", WebInspector._sharedWindowKeydownListener, true);
+    else
+        window.removeEventListener("keydown", WebInspector._sharedWindowKeydownListener, true);
+};
+
+WebInspector._sharedWindowKeydownListener = function(event)
+{
+    for (var i = WebInspector._windowKeydownListeners.length - 1; i >= 0; --i) {
+        if (WebInspector._windowKeydownListeners[i].handleKeydownEvent(event)) {
+            event.stopImmediatePropagation();
+            event.preventDefault();
+            break;
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/Object.js b/Source/WebInspectorUI/UserInterface/Base/Object.js
new file mode 100644
index 000000000..c2c20869d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Object.js
@@ -0,0 +1,219 @@
+/*
+ * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Object = class WebInspectorObject
+{
+    constructor()
+    {
+        this._listeners = null;
+    }
+
+    // Static
+
+    static addEventListener(eventType, listener, thisObject)
+    {
+        thisObject = thisObject || null;
+
+        console.assert(eventType, "Object.addEventListener: invalid event type ", eventType, "(listener: ", listener, "thisObject: ", thisObject, ")");
+        if (!eventType)
+            return;
+
+        console.assert(listener, "Object.addEventListener: invalid listener ", listener, "(event type: ", eventType, "thisObject: ", thisObject, ")");
+        if (!listener)
+            return;
+
+        if (!this._listeners)
+            this._listeners = new Map();
+
+        let listenersTable = this._listeners.get(eventType);
+        if (!listenersTable) {
+            listenersTable = new ListMultimap();
+            this._listeners.set(eventType, listenersTable);
+        }
+
+        listenersTable.add(thisObject, listener);
+    }
+
+    static singleFireEventListener(eventType, listener, thisObject)
+    {
+        let wrappedCallback = function() {
+            this.removeEventListener(eventType, wrappedCallback, null);
+            listener.apply(thisObject, arguments);
+        }.bind(this);
+
+        this.addEventListener(eventType, wrappedCallback, null);
+        return wrappedCallback;
+    }
+
+    static removeEventListener(eventType, listener, thisObject)
+    {
+        eventType = eventType || null;
+        listener = listener || null;
+        thisObject = thisObject || null;
+
+        if (!this._listeners)
+            return;
+
+        if (thisObject && !eventType) {
+            this._listeners.forEach(function(listenersTable) {
+                let listenerPairs = listenersTable.toArray();
+                for (let i = 0, length = listenerPairs.length; i < length; ++i) {
+                    let existingThisObject = listenerPairs[i][0];
+                    if (existingThisObject === thisObject)
+                        listenersTable.deleteAll(existingThisObject);
+                }
+            });
+
+            return;
+        }
+
+        let listenersTable = this._listeners.get(eventType);
+        if (!listenersTable || listenersTable.size === 0)
+            return;
+
+        let didDelete = listenersTable.delete(thisObject, listener);
+        console.assert(didDelete, "removeEventListener cannot remove " + eventType.toString() + " because it doesn't exist.");
+    }
+
+    // Only used by tests.
+    static hasEventListeners(eventType)
+    {
+        if (!this._listeners)
+            return false;
+
+        let listenersTable = this._listeners.get(eventType);
+        return listenersTable && listenersTable.size > 0;
+    }
+
+    // This should only be used within regression tests to detect leaks.
+    static retainedObjectsWithPrototype(proto)
+    {
+        let results = new Set;
+
+        if (this._listeners) {
+            this._listeners.forEach(function(listenersTable, eventType) {
+                listenersTable.forEach(function(pair) {
+                    let thisObject = pair[0];
+                    if (thisObject instanceof proto)
+                        results.add(thisObject);
+                });
+            });
+        }
+
+        return results;
+    }
+
+    // Public
+
+    addEventListener() { return WebInspector.Object.addEventListener.apply(this, arguments); }
+    singleFireEventListener() { return WebInspector.Object.singleFireEventListener.apply(this, arguments); }
+    removeEventListener() { return WebInspector.Object.removeEventListener.apply(this, arguments); }
+    hasEventListeners() { return WebInspector.Object.hasEventListeners.apply(this, arguments); }
+    retainedObjectsWithPrototype() { return WebInspector.Object.retainedObjectsWithPrototype.apply(this, arguments); }
+
+    dispatchEventToListeners(eventType, eventData)
+    {
+        let event = new WebInspector.Event(this, eventType, eventData);
+
+        function dispatch(object)
+        {
+            if (!object || event._stoppedPropagation)
+                return;
+
+            let listenerTypesMap = object._listeners;
+            if (!listenerTypesMap || !object.hasOwnProperty("_listeners"))
+                return;
+
+            console.assert(listenerTypesMap instanceof Map);
+
+            let listenersTable = listenerTypesMap.get(eventType);
+            if (!listenersTable)
+                return;
+
+            // Make a copy with slice so mutations during the loop doesn't affect us.
+            let listeners = listenersTable.toArray();
+
+            // Iterate over the listeners and call them. Stop if stopPropagation is called.
+            for (let i = 0, length = listeners.length; i < length; ++i) {
+                let [thisObject, listener] = listeners[i];
+                listener.call(thisObject, event);
+                if (event._stoppedPropagation)
+                    break;
+            }
+        }
+
+        // Dispatch to listeners of this specific object.
+        dispatch(this);
+
+        // Allow propagation again so listeners on the constructor always have a crack at the event.
+        event._stoppedPropagation = false;
+
+        // Dispatch to listeners on all constructors up the prototype chain, including the immediate constructor.
+        let constructor = this.constructor;
+        while (constructor) {
+            dispatch(constructor);
+
+            if (!constructor.prototype.__proto__)
+                break;
+
+            constructor = constructor.prototype.__proto__.constructor;
+        }
+
+        return event.defaultPrevented;
+    }
+};
+
+WebInspector.Event = class Event
+{
+    constructor(target, type, data)
+    {
+        this.target = target;
+        this.type = type;
+        this.data = data;
+        this.defaultPrevented = false;
+        this._stoppedPropagation = false;
+    }
+
+    stopPropagation()
+    {
+        this._stoppedPropagation = true;
+    }
+
+    preventDefault()
+    {
+        this.defaultPrevented = true;
+    }
+};
+
+WebInspector.notifications = new WebInspector.Object;
+
+WebInspector.Notification = {
+    GlobalModifierKeysDidChange: "global-modifiers-did-change",
+    PageArchiveStarted: "page-archive-started",
+    PageArchiveEnded: "page-archive-ended",
+    ExtraDomainsActivated: "extra-domains-activated",
+    TabTypesChanged: "tab-types-changed",
+    DebugUIEnabledDidChange: "debug-ui-enabled-did-change",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/Platform.js b/Source/WebInspectorUI/UserInterface/Base/Platform.js
new file mode 100644
index 000000000..e3ddcf76b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Platform.js
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Platform = {
+    name: InspectorFrontendHost.platform(),
+    isNightlyBuild: false,
+    version: {
+        base: 0,
+        release: 0,
+        name: ""
+    }
+};
+
+(function () {
+    // Check for a nightly build by looking for a plus in the version number and a small number of stylesheets (indicating combined resources).
+    var versionMatch = / AppleWebKit\/([^ ]+)/.exec(navigator.userAgent);
+    if (versionMatch && versionMatch[1].indexOf("+") !== -1 && document.styleSheets.length < 10)
+        WebInspector.Platform.isNightlyBuild = true;
+
+    var osVersionMatch = / Mac OS X (\d+)_(\d+)/.exec(navigator.appVersion);
+    if (osVersionMatch && osVersionMatch[1] === "10") {
+        WebInspector.Platform.version.base = 10;
+        WebInspector.Platform.version.release = parseInt(osVersionMatch[2]);
+        switch(osVersionMatch[2]) {
+            case "11":
+                WebInspector.Platform.version.name = "el-capitan";
+                break;
+            case "10":
+                WebInspector.Platform.version.name = "yosemite";
+                break;
+            case "9":
+                WebInspector.Platform.version.name = "mavericks";
+                break;
+            case "8":
+                WebInspector.Platform.version.name = "mountain-lion";
+                break;
+            default:
+                WebInspector.Platform.version.name = "unknown-mac";
+                break;
+        }
+    }
+})();
diff --git a/Source/WebInspectorUI/UserInterface/Base/Setting.js b/Source/WebInspectorUI/UserInterface/Base/Setting.js
new file mode 100644
index 000000000..2781902f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Setting.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Setting = class Setting extends WebInspector.Object
+{
+    constructor(name, defaultValue)
+    {
+        super();
+
+        this._name = name;
+
+        let inspectionLevel = InspectorFrontendHost ? InspectorFrontendHost.inspectionLevel() : 1;
+        let levelString = inspectionLevel > 1 ? "-" + inspectionLevel : "";
+        this._localStorageKey = `com.apple.WebInspector${levelString}.${name}`;
+        this._defaultValue = defaultValue;
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get value()
+    {
+        if ("_value" in this)
+            return this._value;
+
+        // Make a copy of the default value so changes to object values don't modify the default value.
+        this._value = JSON.parse(JSON.stringify(this._defaultValue));
+
+        if (!window.InspectorTest && window.localStorage && this._localStorageKey in window.localStorage) {
+            try {
+                this._value = JSON.parse(window.localStorage[this._localStorageKey]);
+            } catch(e) {
+                delete window.localStorage[this._localStorageKey];
+            }
+        }
+
+        return this._value;
+    }
+
+    set value(value)
+    {
+        if (this._value === value)
+            return;
+
+        this._value = value;
+
+        if (!window.InspectorTest && window.localStorage) {
+            try {
+                // Use Object.shallowEqual to properly compare objects.
+                if (Object.shallowEqual(this._value, this._defaultValue))
+                    delete window.localStorage[this._localStorageKey];
+                else
+                    window.localStorage[this._localStorageKey] = JSON.stringify(this._value);
+            } catch(e) {
+                console.error("Error saving setting with name: " + this._name);
+            }
+        }
+
+        this.dispatchEventToListeners(WebInspector.Setting.Event.Changed, this._value, {name: this._name});
+    }
+
+    reset()
+    {
+        // Make a copy of the default value so changes to object values don't modify the default value.
+        this.value = JSON.parse(JSON.stringify(this._defaultValue));
+    }
+};
+
+WebInspector.Setting.Event = {
+    Changed: "setting-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/URLUtilities.js b/Source/WebInspectorUI/UserInterface/Base/URLUtilities.js
new file mode 100644
index 000000000..e78217bff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/URLUtilities.js
@@ -0,0 +1,263 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+function removeURLFragment(url)
+{
+    var hashIndex = url.indexOf("#");
+    if (hashIndex >= 0)
+        return url.substring(0, hashIndex);
+    return url;
+}
+
+function relativePath(path, basePath)
+{
+    console.assert(path.charAt(0) === "/");
+    console.assert(basePath.charAt(0) === "/");
+
+    var pathComponents = path.split("/");
+    var baseComponents = basePath.replace(/\/$/, "").split("/");
+    var finalComponents = [];
+
+    var index = 1;
+    for (; index < pathComponents.length && index < baseComponents.length; ++index) {
+        if (pathComponents[index] !== baseComponents[index])
+            break;
+    }
+
+    for (var i = index; i < baseComponents.length; ++i)
+        finalComponents.push("..");
+
+    for (var i = index; i < pathComponents.length; ++i)
+        finalComponents.push(pathComponents[i]);
+
+    return finalComponents.join("/");
+}
+
+function parseSecurityOrigin(securityOrigin)
+{
+    securityOrigin = securityOrigin ? securityOrigin.trim() : "";
+
+    var match = securityOrigin.match(/^([^:]+):\/\/([^\/:]*)(?::([\d]+))?$/i);
+    if (!match)
+        return {scheme: null, host: null, port: null};
+
+    var scheme = match[1].toLowerCase();
+    var host = match[2].toLowerCase();
+    var port = Number(match[3]) || null;
+
+    return {scheme, host, port};
+}
+
+function parseDataURL(url)
+{
+    if (!url.startsWith("data:"))
+        return null;
+
+    // data:[<media type>][;charset=<character set>][;base64],<data>
+    let match = url.match(/^data:([^;,]*)?(?:;charset=([^;,]*?))?(;base64)?,(.*)$/);
+    if (!match)
+        return null;
+
+    let scheme = "data";
+    let mimeType = match[1] || "text/plain";
+    let charset = match[2] || "US-ASCII";
+    let base64 = !!match[3];
+    let data = decodeURIComponent(match[4]);
+
+    return {scheme, mimeType, charset, base64, data};
+}
+
+function parseURL(url)
+{
+    url = url ? url.trim() : "";
+
+    if (url.startsWith("data:"))
+        return {scheme: "data", host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
+
+    var match = url.match(/^([^:]+):\/\/([^\/:]*)(?::([\d]+))?(?:(\/[^#]*)(?:#(.*))?)?$/i);
+    if (!match)
+        return {scheme: null, host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
+
+    var scheme = match[1].toLowerCase();
+    var host = match[2].toLowerCase();
+    var port = Number(match[3]) || null;
+    var wholePath = match[4] || null;
+    var fragment = match[5] || null;
+    var path = wholePath;
+    var queryString = null;
+
+    // Split the path and the query string.
+    if (wholePath) {
+        var indexOfQuery = wholePath.indexOf("?");
+        if (indexOfQuery !== -1) {
+            path = wholePath.substring(0, indexOfQuery);
+            queryString = wholePath.substring(indexOfQuery + 1);
+        }
+        path = resolveDotsInPath(path);
+    }
+
+    // Find last path component.
+    var lastPathComponent = null;
+    if (path && path !== "/") {
+        // Skip the trailing slash if there is one.
+        var endOffset = path[path.length - 1] === "/" ? 1 : 0;
+        var lastSlashIndex = path.lastIndexOf("/", path.length - 1 - endOffset);
+        if (lastSlashIndex !== -1)
+            lastPathComponent = path.substring(lastSlashIndex + 1, path.length - endOffset);
+    }
+
+    return {scheme, host, port, path, queryString, fragment, lastPathComponent};
+}
+
+function absoluteURL(partialURL, baseURL)
+{
+    partialURL = partialURL ? partialURL.trim() : "";
+
+    // Return data and javascript URLs as-is.
+    if (partialURL.startsWith("data:") || partialURL.startsWith("javascript:") || partialURL.startsWith("mailto:"))
+        return partialURL;
+
+    // If the URL has a scheme it is already a full URL, so return it.
+    if (parseURL(partialURL).scheme)
+        return partialURL;
+
+    // If there is no partial URL, just return the base URL.
+    if (!partialURL)
+        return baseURL || null;
+
+    var baseURLComponents = parseURL(baseURL);
+
+    // The base URL needs to be an absolute URL. Return null if it isn't.
+    if (!baseURLComponents.scheme)
+        return null;
+
+    // A URL that starts with "//" is a full URL without the scheme. Use the base URL scheme.
+    if (partialURL[0] === "/" && partialURL[1] === "/")
+        return baseURLComponents.scheme + ":" + partialURL;
+
+    // The path can be null for URLs that have just a scheme and host (like "http://apple.com"). So make the path be "/".
+    if (!baseURLComponents.path)
+        baseURLComponents.path = "/";
+
+    // Generate the base URL prefix that is used in the rest of the cases.
+    var baseURLPrefix = baseURLComponents.scheme + "://" + baseURLComponents.host + (baseURLComponents.port ? (":" + baseURLComponents.port) : "");
+
+    // A URL that starts with "?" is just a query string that gets applied to the base URL (replacing the base URL query string and fragment).
+    if (partialURL[0] === "?")
+        return baseURLPrefix + baseURLComponents.path + partialURL;
+
+    // A URL that starts with "/" is an absolute path that gets applied to the base URL (replacing the base URL path, query string and fragment).
+    if (partialURL[0] === "/")
+        return baseURLPrefix + resolveDotsInPath(partialURL);
+
+    // A URL that starts with "#" is just a fragment that gets applied to the base URL (replacing the base URL fragment, maintaining the query string).
+    if (partialURL[0] === "#") {
+        let queryStringComponent = baseURLComponents.queryString ? "?" + baseURLComponents.queryString : "";
+        return baseURLPrefix + baseURLComponents.path + queryStringComponent + partialURL;
+    }
+
+    // Generate the base path that is used in the final case by removing everything after the last "/" from the base URL's path.
+    var basePath = baseURLComponents.path.substring(0, baseURLComponents.path.lastIndexOf("/")) + "/";
+    return baseURLPrefix + resolveDotsInPath(basePath + partialURL);
+}
+
+function parseLocationQueryParameters(arrayResult)
+{
+    // The first character is always the "?".
+    return parseQueryString(window.location.search.substring(1), arrayResult);
+}
+
+function parseQueryString(queryString, arrayResult)
+{
+    if (!queryString)
+        return arrayResult ? [] : {};
+
+    function decode(string)
+    {
+        try {
+            // Replace "+" with " " then decode percent encoded values.
+            return decodeURIComponent(string.replace(/\+/g, " "));
+        } catch (e) {
+            return string;
+        }
+    }
+
+    var parameters = arrayResult ? [] : {};
+    var parameterStrings = queryString.split("&");
+    for (var i = 0; i < parameterStrings.length; ++i) {
+        var pair = parameterStrings[i].split("=").map(decode);
+        if (arrayResult)
+            parameters.push({name: pair[0], value: pair[1]});
+        else
+            parameters[pair[0]] = pair[1];
+    }
+
+    return parameters;
+}
+
+WebInspector.displayNameForURL = function(url, urlComponents)
+{
+    if (url.startsWith("data:"))
+        return WebInspector.truncateURL(url);
+
+    if (!urlComponents)
+        urlComponents = parseURL(url);
+
+    var displayName;
+    try {
+        displayName = decodeURIComponent(urlComponents.lastPathComponent || "");
+    } catch (e) {
+        displayName = urlComponents.lastPathComponent;
+    }
+
+    return displayName || WebInspector.displayNameForHost(urlComponents.host) || url;
+};
+
+WebInspector.truncateURL = function(url, multiline = false, dataURIMaxSize = 6)
+{
+    if (!url.startsWith("data:"))
+        return url;
+
+    const dataIndex = url.indexOf(",") + 1;
+    let header = url.slice(0, dataIndex);
+    if (multiline)
+        header += "\n";
+
+    const data = url.slice(dataIndex);
+    if (data.length < dataURIMaxSize)
+        return header + data;
+
+    const firstChunk = data.slice(0, Math.ceil(dataURIMaxSize / 2));
+    const ellipsis = "\u2026";
+    const middleChunk = multiline ? `\n${ellipsis}\n` : ellipsis;
+    const lastChunk = data.slice(-Math.floor(dataURIMaxSize / 2));
+    return header + firstChunk + middleChunk + lastChunk;
+};
+
+WebInspector.displayNameForHost = function(host)
+{
+    // FIXME <rdar://problem/11237413>: This should decode punycode hostnames.
+    return host;
+};
diff --git a/Source/WebInspectorUI/UserInterface/Base/Utilities.js b/Source/WebInspectorUI/UserInterface/Base/Utilities.js
new file mode 100644
index 000000000..a3f86db0f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/Utilities.js
@@ -0,0 +1,1213 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+var emDash = "\u2014";
+var ellipsis = "\u2026";
+
+Object.defineProperty(Object, "shallowCopy",
+{
+    value: function(object)
+    {
+        // Make a new object and copy all the key/values. The values are not copied.
+        var copy = {};
+        var keys = Object.keys(object);
+        for (var i = 0; i < keys.length; ++i)
+            copy[keys[i]] = object[keys[i]];
+        return copy;
+    }
+});
+
+Object.defineProperty(Object, "shallowEqual",
+{
+    value: function(a, b)
+    {
+        // Checks if two objects have the same top-level properties.
+
+        // Check for strict equality in case they are the same object.
+        if (a === b)
+            return true;
+
+        // Only objects can proceed. null is an object, but Object.keys throws for null.
+        if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
+            return false;
+
+        var aKeys = Object.keys(a);
+        var bKeys = Object.keys(b);
+
+        // Check that each object has the same number of keys.
+        if (aKeys.length !== bKeys.length)
+            return false;
+
+        // Check if all the keys and their values are equal.
+        for (var i = 0; i < aKeys.length; ++i) {
+            // Check that b has the same key as a.
+            if (!(aKeys[i] in b))
+                return false;
+
+            // Check that the values are strict equal since this is only
+            // a shallow check, not a recursive one.
+            if (a[aKeys[i]] !== b[aKeys[i]])
+                return false;
+        }
+
+        return true;
+    }
+});
+
+Object.defineProperty(Object.prototype, "valueForCaseInsensitiveKey",
+{
+    value: function(key)
+    {
+        if (this.hasOwnProperty(key))
+            return this[key];
+
+        var lowerCaseKey = key.toLowerCase();
+        for (var currentKey in this) {
+            if (currentKey.toLowerCase() === lowerCaseKey)
+                return this[currentKey];
+        }
+
+        return undefined;
+    }
+});
+
+Object.defineProperty(Map.prototype, "take",
+{
+    value: function(key)
+    {
+        var deletedValue = this.get(key);
+        this.delete(key);
+        return deletedValue;
+    }
+});
+
+Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithClass",
+{
+    value: function(className)
+    {
+        for (var node = this; node && node !== this.ownerDocument; node = node.parentNode)
+            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(className))
+                return node;
+        return null;
+    }
+});
+
+Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeNameInArray",
+{
+    value: function(nameArray)
+    {
+        var lowerCaseNameArray = nameArray.map(function(name) { return name.toLowerCase(); });
+        for (var node = this; node && node !== this.ownerDocument; node = node.parentNode) {
+            for (var i = 0; i < nameArray.length; ++i) {
+                if (node.nodeName.toLowerCase() === lowerCaseNameArray[i])
+                    return node;
+            }
+        }
+
+        return null;
+    }
+});
+
+Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeName",
+{
+    value: function(nodeName)
+    {
+        return this.enclosingNodeOrSelfWithNodeNameInArray([nodeName]);
+    }
+});
+
+Object.defineProperty(Node.prototype, "isAncestor",
+{
+    value: function(node)
+    {
+        if (!node)
+            return false;
+
+        var currentNode = node.parentNode;
+        while (currentNode) {
+            if (this === currentNode)
+                return true;
+            currentNode = currentNode.parentNode;
+        }
+
+        return false;
+    }
+});
+
+Object.defineProperty(Node.prototype, "isDescendant",
+{
+    value: function(descendant)
+    {
+        return !!descendant && descendant.isAncestor(this);
+    }
+});
+
+
+Object.defineProperty(Node.prototype, "isSelfOrAncestor",
+{
+    value: function(node)
+    {
+        return !!node && (node === this || this.isAncestor(node));
+    }
+});
+
+
+Object.defineProperty(Node.prototype, "isSelfOrDescendant",
+{
+    value: function(node)
+    {
+        return !!node && (node === this || this.isDescendant(node));
+    }
+});
+
+Object.defineProperty(Node.prototype, "traverseNextNode",
+{
+    value: function(stayWithin)
+    {
+        var node = this.firstChild;
+        if (node)
+            return node;
+
+        if (stayWithin && this === stayWithin)
+            return null;
+
+        node = this.nextSibling;
+        if (node)
+            return node;
+
+        node = this;
+        while (node && !node.nextSibling && (!stayWithin || !node.parentNode || node.parentNode !== stayWithin))
+            node = node.parentNode;
+        if (!node)
+            return null;
+
+        return node.nextSibling;
+    }
+});
+
+Object.defineProperty(Node.prototype, "traversePreviousNode",
+{
+    value: function(stayWithin)
+    {
+       if (stayWithin && this === stayWithin)
+            return null;
+        var node = this.previousSibling;
+        while (node && node.lastChild)
+            node = node.lastChild;
+        if (node)
+            return node;
+        return this.parentNode;
+    }
+});
+
+
+Object.defineProperty(Node.prototype, "rangeOfWord",
+{
+    value: function(offset, stopCharacters, stayWithinNode, direction)
+    {
+        var startNode;
+        var startOffset = 0;
+        var endNode;
+        var endOffset = 0;
+
+        if (!stayWithinNode)
+            stayWithinNode = this;
+
+        if (!direction || direction === "backward" || direction === "both") {
+            var node = this;
+            while (node) {
+                if (node === stayWithinNode) {
+                    if (!startNode)
+                        startNode = stayWithinNode;
+                    break;
+                }
+
+                if (node.nodeType === Node.TEXT_NODE) {
+                    var start = (node === this ? (offset - 1) : (node.nodeValue.length - 1));
+                    for (var i = start; i >= 0; --i) {
+                        if (stopCharacters.indexOf(node.nodeValue[i]) !== -1) {
+                            startNode = node;
+                            startOffset = i + 1;
+                            break;
+                        }
+                    }
+                }
+
+                if (startNode)
+                    break;
+
+                node = node.traversePreviousNode(stayWithinNode);
+            }
+
+            if (!startNode) {
+                startNode = stayWithinNode;
+                startOffset = 0;
+            }
+        } else {
+            startNode = this;
+            startOffset = offset;
+        }
+
+        if (!direction || direction === "forward" || direction === "both") {
+            node = this;
+            while (node) {
+                if (node === stayWithinNode) {
+                    if (!endNode)
+                        endNode = stayWithinNode;
+                    break;
+                }
+
+                if (node.nodeType === Node.TEXT_NODE) {
+                    var start = (node === this ? offset : 0);
+                    for (var i = start; i < node.nodeValue.length; ++i) {
+                        if (stopCharacters.indexOf(node.nodeValue[i]) !== -1) {
+                            endNode = node;
+                            endOffset = i;
+                            break;
+                        }
+                    }
+                }
+
+                if (endNode)
+                    break;
+
+                node = node.traverseNextNode(stayWithinNode);
+            }
+
+            if (!endNode) {
+                endNode = stayWithinNode;
+                endOffset = stayWithinNode.nodeType === Node.TEXT_NODE ? stayWithinNode.nodeValue.length : stayWithinNode.childNodes.length;
+            }
+        } else {
+            endNode = this;
+            endOffset = offset;
+        }
+
+        var result = this.ownerDocument.createRange();
+        result.setStart(startNode, startOffset);
+        result.setEnd(endNode, endOffset);
+
+        return result;
+
+    }
+});
+
+Object.defineProperty(Element.prototype, "realOffsetWidth",
+{
+    get: function()
+    {
+        return this.getBoundingClientRect().width;
+    }
+});
+
+Object.defineProperty(Element.prototype, "realOffsetHeight",
+{
+    get: function()
+    {
+        return this.getBoundingClientRect().height;
+    }
+});
+
+Object.defineProperty(Element.prototype, "totalOffsetLeft",
+{
+    get: function()
+    {
+        return this.getBoundingClientRect().left;
+    }
+});
+
+Object.defineProperty(Element.prototype, "totalOffsetTop",
+{
+    get: function()
+    {
+        return this.getBoundingClientRect().top;
+    }
+});
+
+Object.defineProperty(Element.prototype, "removeChildren",
+{
+    value: function()
+    {
+        // This has been tested to be the fastest removal method.
+        if (this.firstChild)
+            this.textContent = "";
+    }
+});
+
+Object.defineProperty(Element.prototype, "isInsertionCaretInside",
+{
+    value: function()
+    {
+        var selection = window.getSelection();
+        if (!selection.rangeCount || !selection.isCollapsed)
+            return false;
+        var selectionRange = selection.getRangeAt(0);
+        return selectionRange.startContainer === this || selectionRange.startContainer.isDescendant(this);
+    }
+});
+
+Object.defineProperty(Element.prototype, "removeMatchingStyleClasses",
+{
+    value: function(classNameRegex)
+    {
+        var regex = new RegExp("(^|\\s+)" + classNameRegex + "($|\\s+)");
+        if (regex.test(this.className))
+            this.className = this.className.replace(regex, " ");
+    }
+});
+
+Object.defineProperty(Element.prototype, "createChild",
+{
+    value: function(elementName, className)
+    {
+        var element = this.ownerDocument.createElement(elementName);
+        if (className)
+            element.className = className;
+        this.appendChild(element);
+        return element;
+    }
+});
+
+Object.defineProperty(Element.prototype, "isScrolledToBottom",
+{
+    value: function()
+    {
+        // This code works only for 0-width border
+        return this.scrollTop + this.clientHeight === this.scrollHeight;
+    }
+});
+
+Object.defineProperty(Element.prototype, "recalculateStyles",
+{
+    value: function()
+    {
+        this.ownerDocument.defaultView.getComputedStyle(this);
+    }
+});
+
+Object.defineProperty(DocumentFragment.prototype, "createChild",
+{
+    value: Element.prototype.createChild
+});
+
+Object.defineProperty(Array.prototype, "lastValue",
+{
+    get: function()
+    {
+        if (!this.length)
+            return undefined;
+        return this[this.length - 1];
+    }
+});
+
+Object.defineProperty(Array.prototype, "remove",
+{
+    value: function(value, onlyFirst)
+    {
+        for (var i = this.length - 1; i >= 0; --i) {
+            if (this[i] === value) {
+                this.splice(i, 1);
+                if (onlyFirst)
+                    return;
+            }
+        }
+    }
+});
+
+Object.defineProperty(Array.prototype, "insertAtIndex",
+{
+    value: function(value, index)
+    {
+        this.splice(index, 0, value);
+    }
+});
+
+Object.defineProperty(Array.prototype, "keySet",
+{
+    value: function()
+    {
+        let keys = Object.create(null);
+        for (var i = 0; i < this.length; ++i)
+            keys[this[i]] = true;
+        return keys;
+    }
+});
+
+Object.defineProperty(Array.prototype, "partition",
+{
+    value: function(callback)
+    {
+        let positive = [];
+        let negative = [];
+        for (let i = 0; i < this.length; ++i) {
+            let value = this[i];
+            if (callback(value))
+                positive.push(value);
+            else
+                negative.push(value);
+        }
+        return [positive, negative];
+    }
+});
+
+Object.defineProperty(String.prototype, "trimMiddle",
+{
+    value: function(maxLength)
+    {
+        if (this.length <= maxLength)
+            return this;
+        var leftHalf = maxLength >> 1;
+        var rightHalf = maxLength - leftHalf - 1;
+        return this.substr(0, leftHalf) + ellipsis + this.substr(this.length - rightHalf, rightHalf);
+    }
+});
+
+Object.defineProperty(String.prototype, "trimEnd",
+{
+    value: function(maxLength)
+    {
+        if (this.length <= maxLength)
+            return this;
+        return this.substr(0, maxLength - 1) + ellipsis;
+    }
+});
+
+Object.defineProperty(String.prototype, "truncate",
+{
+    value: function(maxLength)
+    {
+        "use strict";
+
+        if (this.length <= maxLength)
+            return this;
+
+        let clipped = this.slice(0, maxLength);
+        let indexOfLastWhitespace = clipped.search(/\s\S*$/);
+        if (indexOfLastWhitespace > Math.floor(maxLength / 2))
+            clipped = clipped.slice(0, indexOfLastWhitespace - 1);
+
+        return clipped + ellipsis;
+    }
+});
+
+Object.defineProperty(String.prototype, "collapseWhitespace",
+{
+    value: function()
+    {
+        return this.replace(/[\s\xA0]+/g, " ");
+    }
+});
+
+Object.defineProperty(String.prototype, "escapeCharacters",
+{
+    value: function(chars)
+    {
+        var foundChar = false;
+        for (var i = 0; i < chars.length; ++i) {
+            if (this.indexOf(chars.charAt(i)) !== -1) {
+                foundChar = true;
+                break;
+            }
+        }
+
+        if (!foundChar)
+            return this;
+
+        var result = "";
+        for (var i = 0; i < this.length; ++i) {
+            if (chars.indexOf(this.charAt(i)) !== -1)
+                result += "\\";
+            result += this.charAt(i);
+        }
+
+        return result;
+    }
+});
+
+Object.defineProperty(String.prototype, "escapeForRegExp",
+{
+    value: function()
+    {
+        return this.escapeCharacters("^[]{}()\\.$*+?|");
+    }
+});
+
+Object.defineProperty(String.prototype, "capitalize",
+{
+    value: function()
+    {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    }
+});
+
+Object.defineProperty(String, "tokenizeFormatString",
+{
+    value: function(format)
+    {
+        var tokens = [];
+        var substitutionIndex = 0;
+
+        function addStringToken(str)
+        {
+            tokens.push({type: "string", value: str});
+        }
+
+        function addSpecifierToken(specifier, precision, substitutionIndex)
+        {
+            tokens.push({type: "specifier", specifier, precision, substitutionIndex});
+        }
+
+        var index = 0;
+        for (var precentIndex = format.indexOf("%", index); precentIndex !== -1; precentIndex = format.indexOf("%", index)) {
+            addStringToken(format.substring(index, precentIndex));
+            index = precentIndex + 1;
+
+            if (format[index] === "%") {
+                addStringToken("%");
+                ++index;
+                continue;
+            }
+
+            if (!isNaN(format[index])) {
+                // The first character is a number, it might be a substitution index.
+                var number = parseInt(format.substring(index), 10);
+                while (!isNaN(format[index]))
+                    ++index;
+
+                // If the number is greater than zero and ends with a "$",
+                // then this is a substitution index.
+                if (number > 0 && format[index] === "$") {
+                    substitutionIndex = (number - 1);
+                    ++index;
+                }
+            }
+
+            var precision = -1;
+            if (format[index] === ".") {
+                // This is a precision specifier. If no digit follows the ".",
+                // then the precision should be zero.
+                ++index;
+
+                precision = parseInt(format.substring(index), 10);
+                if (isNaN(precision))
+                    precision = 0;
+
+                while (!isNaN(format[index]))
+                    ++index;
+            }
+
+            addSpecifierToken(format[index], precision, substitutionIndex);
+
+            ++substitutionIndex;
+            ++index;
+        }
+
+        addStringToken(format.substring(index));
+
+        return tokens;
+    }
+});
+
+Object.defineProperty(String.prototype, "hash",
+{
+    get: function()
+    {
+        // Matches the wtf/Hasher.h (SuperFastHash) algorithm.
+
+        // Arbitrary start value to avoid mapping all 0's to all 0's.
+        const stringHashingStartValue = 0x9e3779b9;
+
+        var result = stringHashingStartValue;
+        var pendingCharacter = null;
+        for (var i = 0; i < this.length; ++i) {
+            var currentCharacter = this[i].charCodeAt(0);
+            if (pendingCharacter === null) {
+                pendingCharacter = currentCharacter;
+                continue;
+            }
+
+            result += pendingCharacter;
+            result = (result << 16) ^ ((currentCharacter << 11) ^ result);
+            result += result >> 11;
+
+            pendingCharacter = null;
+        }
+
+        // Handle the last character in odd length strings.
+        if (pendingCharacter !== null) {
+            result += pendingCharacter;
+            result ^= result << 11;
+            result += result >> 17;
+        }
+
+        // Force "avalanching" of final 31 bits.
+        result ^= result << 3;
+        result += result >> 5;
+        result ^= result << 2;
+        result += result >> 15;
+        result ^= result << 10;
+
+        // Prevent 0 and negative results.
+        return (0xffffffff + result + 1).toString(36);
+    }
+});
+
+Object.defineProperty(String, "standardFormatters",
+{
+    value: {
+        d: function(substitution)
+        {
+            return !isNaN(substitution) ? substitution : 0;
+        },
+
+        f: function(substitution, token)
+        {
+            if (substitution && token.precision > -1)
+                substitution = substitution.toFixed(token.precision);
+            return !isNaN(substitution) ? substitution : (token.precision > -1 ? Number(0).toFixed(token.precision) : 0);
+        },
+
+        s: function(substitution)
+        {
+            return substitution;
+        }
+    }
+});
+
+Object.defineProperty(String, "format",
+{
+    value: function(format, substitutions, formatters, initialValue, append)
+    {
+        if (!format || !substitutions || !substitutions.length)
+            return {formattedResult: append(initialValue, format), unusedSubstitutions: substitutions};
+
+        function prettyFunctionName()
+        {
+            return "String.format(\"" + format + "\", \"" + substitutions.join("\", \"") + "\")";
+        }
+
+        function warn(msg)
+        {
+            console.warn(prettyFunctionName() + ": " + msg);
+        }
+
+        function error(msg)
+        {
+            console.error(prettyFunctionName() + ": " + msg);
+        }
+
+        var result = initialValue;
+        var tokens = String.tokenizeFormatString(format);
+        var usedSubstitutionIndexes = {};
+
+        for (var i = 0; i < tokens.length; ++i) {
+            var token = tokens[i];
+
+            if (token.type === "string") {
+                result = append(result, token.value);
+                continue;
+            }
+
+            if (token.type !== "specifier") {
+                error("Unknown token type \"" + token.type + "\" found.");
+                continue;
+            }
+
+            if (token.substitutionIndex >= substitutions.length) {
+                // If there are not enough substitutions for the current substitutionIndex
+                // just output the format specifier literally and move on.
+                error("not enough substitution arguments. Had " + substitutions.length + " but needed " + (token.substitutionIndex + 1) + ", so substitution was skipped.");
+                result = append(result, "%" + (token.precision > -1 ? token.precision : "") + token.specifier);
+                continue;
+            }
+
+            usedSubstitutionIndexes[token.substitutionIndex] = true;
+
+            if (!(token.specifier in formatters)) {
+                // Encountered an unsupported format character, treat as a string.
+                warn("unsupported format character \u201C" + token.specifier + "\u201D. Treating as a string.");
+                result = append(result, substitutions[token.substitutionIndex]);
+                continue;
+            }
+
+            result = append(result, formatters[token.specifier](substitutions[token.substitutionIndex], token));
+        }
+
+        var unusedSubstitutions = [];
+        for (var i = 0; i < substitutions.length; ++i) {
+            if (i in usedSubstitutionIndexes)
+                continue;
+            unusedSubstitutions.push(substitutions[i]);
+        }
+
+        return {formattedResult: result, unusedSubstitutions};
+    }
+});
+
+Object.defineProperty(String.prototype, "format",
+{
+    value: function()
+    {
+        return String.format(this, arguments, String.standardFormatters, "", function(a, b) { return a + b; }).formattedResult;
+    }
+});
+
+Object.defineProperty(String.prototype, "insertWordBreakCharacters",
+{
+    value: function()
+    {
+        // Add zero width spaces after characters that are good to break after.
+        // Otherwise a string with no spaces will not break and overflow its container.
+        // This is mainly used on URL strings, so the characters are tailored for URLs.
+        return this.replace(/([\/;:\)\]\}&?])/g, "$1\u200b");
+    }
+});
+
+Object.defineProperty(String.prototype, "removeWordBreakCharacters",
+{
+    value: function()
+    {
+        // Undoes what insertWordBreakCharacters did.
+        return this.replace(/\u200b/g, "");
+    }
+});
+
+Object.defineProperty(String.prototype, "getMatchingIndexes",
+{
+    value: function(needle)
+    {
+        var indexesOfNeedle = [];
+        var index = this.indexOf(needle);
+
+        while (index >= 0) {
+            indexesOfNeedle.push(index);
+            index = this.indexOf(needle, index + 1);
+        }
+
+        return indexesOfNeedle;
+    }
+});
+
+Object.defineProperty(String.prototype, "levenshteinDistance",
+{
+    value: function(s)
+    {
+        var m = this.length;
+        var n = s.length;
+        var d = new Array(m + 1);
+
+        for (var i = 0; i <= m; ++i) {
+            d[i] = new Array(n + 1);
+            d[i][0] = i;
+        }
+
+        for (var j = 0; j <= n; ++j)
+            d[0][j] = j;
+
+        for (var j = 1; j <= n; ++j) {
+            for (var i = 1; i <= m; ++i) {
+                if (this[i - 1] === s[j - 1])
+                    d[i][j] = d[i - 1][j - 1];
+                else {
+                    var deletion = d[i - 1][j] + 1;
+                    var insertion = d[i][j - 1] + 1;
+                    var substitution = d[i - 1][j - 1] + 1;
+                    d[i][j] = Math.min(deletion, insertion, substitution);
+                }
+            }
+        }
+
+        return d[m][n];
+    }
+});
+
+Object.defineProperty(String.prototype, "toCamelCase",
+{
+    value: function()
+    {
+        return this.toLowerCase().replace(/[^\w]+(\w)/g, (match, group) => group.toUpperCase());
+    }
+});
+
+Object.defineProperty(Math, "roundTo",
+{
+    value: function(num, step)
+    {
+        return Math.round(num / step) * step;
+    }
+});
+
+Object.defineProperty(Number, "constrain",
+{
+    value: function(num, min, max)
+    {
+        if (max < min)
+            return min;
+
+        if (num < min)
+            num = min;
+        else if (num > max)
+            num = max;
+        return num;
+    }
+});
+
+Object.defineProperty(Number, "secondsToString",
+{
+    value: function(seconds, higherResolution)
+    {
+        let ms = seconds * 1000;
+
+        if (Math.abs(ms) < 10) {
+            if (higherResolution)
+                return WebInspector.UIString("%.3fms").format(ms);
+            return WebInspector.UIString("%.2fms").format(ms);
+        }
+
+        if (Math.abs(ms) < 100) {
+            if (higherResolution)
+                return WebInspector.UIString("%.2fms").format(ms);
+            return WebInspector.UIString("%.1fms").format(ms);
+        }
+
+        if (Math.abs(ms) < 1000) {
+            if (higherResolution)
+                return WebInspector.UIString("%.1fms").format(ms);
+            return WebInspector.UIString("%.0fms").format(ms);
+        }
+
+        // Do not go over seconds when in high resolution mode.
+        if (higherResolution || Math.abs(seconds) < 60)
+            return WebInspector.UIString("%.2fs").format(seconds);
+
+        let minutes = seconds / 60;
+        if (Math.abs(minutes) < 60)
+            return WebInspector.UIString("%.1fmin").format(minutes);
+
+        let hours = minutes / 60;
+        if (Math.abs(hours) < 24)
+            return WebInspector.UIString("%.1fhrs").format(hours);
+
+        let days = hours / 24;
+        return WebInspector.UIString("%.1f days").format(days);
+    }
+});
+
+Object.defineProperty(Number, "bytesToString",
+{
+    value: function(bytes, higherResolution)
+    {
+        if (higherResolution === undefined)
+            higherResolution = true;
+
+        if (Math.abs(bytes) < 1024)
+            return WebInspector.UIString("%.0f B").format(bytes);
+
+        let kilobytes = bytes / 1024;
+        if (Math.abs(kilobytes) < 1024) {
+            if (higherResolution || Math.abs(kilobytes) < 10)
+                return WebInspector.UIString("%.2f KB").format(kilobytes);
+            return WebInspector.UIString("%.1f KB").format(kilobytes);
+        }
+
+        let megabytes = kilobytes / 1024;
+        if (higherResolution || Math.abs(megabytes) < 10)
+            return WebInspector.UIString("%.2f MB").format(megabytes);
+        return WebInspector.UIString("%.1f MB").format(megabytes);
+    }
+});
+
+Object.defineProperty(Uint32Array, "isLittleEndian",
+{
+    value: function()
+    {
+        if ("_isLittleEndian" in this)
+            return this._isLittleEndian;
+
+        var buffer = new ArrayBuffer(4);
+        var longData = new Uint32Array(buffer);
+        var data = new Uint8Array(buffer);
+
+        longData[0] = 0x0a0b0c0d;
+
+        this._isLittleEndian = data[0] === 0x0d && data[1] === 0x0c && data[2] === 0x0b && data[3] === 0x0a;
+
+        return this._isLittleEndian;
+    }
+});
+
+function isEmptyObject(object)
+{
+    for (var property in object)
+        return false;
+    return true;
+}
+
+function isEnterKey(event)
+{
+    // Check if this is an IME event.
+    return event.keyCode !== 229 && event.keyIdentifier === "Enter";
+}
+
+function resolveDotsInPath(path)
+{
+    if (!path)
+        return path;
+
+    if (path.indexOf("./") === -1)
+        return path;
+
+    console.assert(path.charAt(0) === "/");
+
+    var result = [];
+
+    var components = path.split("/");
+    for (var i = 0; i < components.length; ++i) {
+        var component = components[i];
+
+        // Skip over "./".
+        if (component === ".")
+            continue;
+
+        // Rewind one component for "../".
+        if (component === "..") {
+            if (result.length === 1)
+                continue;
+            result.pop();
+            continue;
+        }
+
+        result.push(component);
+    }
+
+    return result.join("/");
+}
+
+function parseMIMEType(fullMimeType)
+{
+    if (!fullMimeType)
+        return {type: fullMimeType, boundary: null, encoding: null};
+
+    var typeParts = fullMimeType.split(/\s*;\s*/);
+    console.assert(typeParts.length >= 1);
+
+    var type = typeParts[0];
+    var boundary = null;
+    var encoding = null;
+
+    for (var i = 1; i < typeParts.length; ++i) {
+        var subparts = typeParts[i].split(/\s*=\s*/);
+        if (subparts.length !== 2)
+            continue;
+
+        if (subparts[0].toLowerCase() === "boundary")
+            boundary = subparts[1];
+        else if (subparts[0].toLowerCase() === "charset")
+            encoding = subparts[1].replace("^\"|\"$", ""); // Trim quotes.
+    }
+
+    return {type, boundary: boundary || null, encoding: encoding || null};
+}
+
+function simpleGlobStringToRegExp(globString, regExpFlags)
+{
+    // Only supports "*" globs.
+
+    if (!globString)
+        return null;
+
+    // Escape everything from String.prototype.escapeForRegExp except "*".
+    var regexString = globString.escapeCharacters("^[]{}()\\.$+?|");
+
+    // Unescape all doubly escaped backslashes in front of escaped asterisks.
+    // So "\\*" will become "\*" again, undoing escapeCharacters escaping of "\".
+    // This makes "\*" match a literal "*" instead of using the "*" for globbing.
+    regexString = regexString.replace(/\\\\\*/g, "\\*");
+
+    // The following regex doesn't match an asterisk that has a backslash in front.
+    // It also catches consecutive asterisks so they collapse down when replaced.
+    var unescapedAsteriskRegex = /(^|[^\\])\*+/g;
+    if (unescapedAsteriskRegex.test(globString)) {
+        // Replace all unescaped asterisks with ".*".
+        regexString = regexString.replace(unescapedAsteriskRegex, "$1.*");
+
+        // Match edge boundaries when there is an asterisk to better meet the expectations
+        // of the user. When someone types "*.js" they don't expect "foo.json" to match. They
+        // would only expect that if they type "*.js*". We use \b (instead of ^ and $) to allow
+        // matches inside paths or URLs, so "ba*.js" will match "foo/bar.js" but not "boo/bbar.js".
+        // When there isn't an asterisk the regexString is just a substring search.
+        regexString = "\\b" + regexString + "\\b";
+    }
+
+    return new RegExp(regexString, regExpFlags);
+}
+
+Object.defineProperty(Array.prototype, "lowerBound",
+{
+    // Return index of the leftmost element that is equal or greater
+    // than the specimen object. If there's no such element (i.e. all
+    // elements are smaller than the specimen) returns array.length.
+    // The function works for sorted array.
+    value: function(object, comparator)
+    {
+        function defaultComparator(a, b)
+        {
+            return a - b;
+        }
+        comparator = comparator || defaultComparator;
+        var l = 0;
+        var r = this.length;
+        while (l < r) {
+            var m = (l + r) >> 1;
+            if (comparator(object, this[m]) > 0)
+                l = m + 1;
+            else
+                r = m;
+        }
+        return r;
+    }
+});
+
+Object.defineProperty(Array.prototype, "upperBound",
+{
+    // Return index of the leftmost element that is greater
+    // than the specimen object. If there's no such element (i.e. all
+    // elements are smaller than the specimen) returns array.length.
+    // The function works for sorted array.
+    value: function(object, comparator)
+    {
+        function defaultComparator(a, b)
+        {
+            return a - b;
+        }
+        comparator = comparator || defaultComparator;
+        var l = 0;
+        var r = this.length;
+        while (l < r) {
+            var m = (l + r) >> 1;
+            if (comparator(object, this[m]) >= 0)
+                l = m + 1;
+            else
+                r = m;
+        }
+        return r;
+    }
+});
+
+Object.defineProperty(Array.prototype, "binaryIndexOf",
+{
+    value: function(value, comparator)
+    {
+        var index = this.lowerBound(value, comparator);
+        return index < this.length && comparator(value, this[index]) === 0 ? index : -1;
+    }
+});
+
+(function() {
+    const debounceSymbol = Symbol("function-debounce-timeout");
+    Object.defineProperty(Function.prototype, "debounce",
+    {
+        value: function(delay, thisObject)
+        {
+            let callback = this.bind(thisObject);
+            return function() {
+                clearTimeout(callback[debounceSymbol]);
+                let args = arguments;
+                callback[debounceSymbol] = setTimeout(() => {
+                    callback.apply(null, args);
+                }, delay);
+            };
+        }
+    });
+})();
+
+function appendWebInspectorSourceURL(string)
+{
+    return "\n//# sourceURL=__WebInspectorInternal__\n" + string;
+}
+
+function isWebInspectorInternalScript(url)
+{
+    return url === "__WebInspectorInternal__";
+}
+
+function isWebInspectorDebugScript(url)
+{
+    return url && url.startsWith("__WebInspector");
+}
+
+function isFunctionStringNativeCode(str)
+{
+    return str.endsWith("{\n    [native code]\n}");
+}
+
+function doubleQuotedString(str)
+{
+    return "\"" + str.replace(/"/g, "\\\"") + "\"";
+}
+
+function insertionIndexForObjectInListSortedByFunction(object, list, comparator, insertionIndexAfter)
+{
+    if (insertionIndexAfter) {
+        return list.upperBound(object, comparator);
+    } else {
+        return list.lowerBound(object, comparator);
+    }
+}
+
+function insertObjectIntoSortedArray(object, array, comparator)
+{
+    array.splice(insertionIndexForObjectInListSortedByFunction(object, array, comparator), 0, object);
+}
+
+function decodeBase64ToBlob(base64Data, mimeType)
+{
+    mimeType = mimeType || '';
+
+    const sliceSize = 1024;
+    var byteCharacters = atob(base64Data);
+    var bytesLength = byteCharacters.length;
+    var slicesCount = Math.ceil(bytesLength / sliceSize);
+    var byteArrays = new Array(slicesCount);
+
+    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+        var begin = sliceIndex * sliceSize;
+        var end = Math.min(begin + sliceSize, bytesLength);
+
+        var bytes = new Array(end - begin);
+        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset)
+            bytes[i] = byteCharacters[offset].charCodeAt(0);
+
+        byteArrays[sliceIndex] = new Uint8Array(bytes);
+    }
+
+    return new Blob(byteArrays, {type: mimeType});
+}
+
+// FIXME: This can be removed when WEB_TIMING is enabled for all platforms.
+function timestamp()
+{
+    return window.performance ? performance.now() : Date.now();
+}
diff --git a/Source/WebInspectorUI/UserInterface/Base/WebInspector.js b/Source/WebInspectorUI/UserInterface/Base/WebInspector.js
new file mode 100644
index 000000000..15460bb44
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Base/WebInspector.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+var WebInspector = {}; // Namespace
diff --git a/Source/WebInspectorUI/UserInterface/BinarySearch.js b/Source/WebInspectorUI/UserInterface/BinarySearch.js
deleted file mode 100644
index 50467b74c..000000000
--- a/Source/WebInspectorUI/UserInterface/BinarySearch.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc. All rights reserved.
- * Copyright (C) 2007, 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @param {*} object
- * @param {Array.<*>} array
- * @param {function(*, *)} comparator
- */
-function binarySearch(object, array, comparator)
-{
-    var first = 0;
-    var last = array.length - 1;
-
-    while (first <= last) {
-        var mid = (first + last) >> 1;
-        var c = comparator(object, array[mid]);
-        if (c > 0)
-            first = mid + 1;
-        else if (c < 0)
-            last = mid - 1;
-        else
-            return mid;
-    }
-
-    // Return the nearest lesser index, "-1" means "0, "-2" means "1", etc.
-    return -(first + 1);
-}
-
-Object.defineProperty(Array.prototype, "binaryIndexOf", { value: function(value, comparator)
-{
-    var result = binarySearch(value, this, comparator);
-    return result >= 0 ? result : -1;
-}});
-
-/**
- * @param {*} anObject
- * @param {Array.<*>} aList
- * @param {function(*, *)} aFunction
- */
-function insertionIndexForObjectInListSortedByFunction(anObject, aList, aFunction)
-{
-    var index = binarySearch(anObject, aList, aFunction);
-    if (index < 0)
-        // See binarySearch implementation.
-        return -index - 1;
-    else {
-        // Return the first occurance of an item in the list.
-        while (index > 0 && aFunction(anObject, aList[index - 1]) === 0)
-            index--;
-        return index;
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/BlankStylePropertiesSection.js b/Source/WebInspectorUI/UserInterface/BlankStylePropertiesSection.js
deleted file mode 100644
index 0ed2a7244..000000000
--- a/Source/WebInspectorUI/UserInterface/BlankStylePropertiesSection.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Copyright (C) 2007, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @extends {WebInspector.StylePropertiesSection}
- */
-WebInspector.BlankStylePropertiesSection = function(parentPane, defaultSelectorText)
-{
-    WebInspector.StylePropertiesSection.call(this, parentPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false);
-    this.element.classList.add("blank-section");
-}
-
-WebInspector.BlankStylePropertiesSection.prototype = {
-    get isBlank()
-    {
-        return !this._normal;
-    },
-
-    expand: function()
-    {
-        if (!this.isBlank)
-            WebInspector.StylePropertiesSection.prototype.expand.call(this);
-    },
-
-    editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
-    {
-        if (!this.isBlank) {
-            WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.call(this, element, newContent, oldContent, context, moveDirection);
-            return;
-        }
-
-        function successCallback(newRule, doesSelectorAffectSelectedNode)
-        {
-            var styleRule = { section: this, style: newRule.style, selectorText: newRule.selectorText, sourceURL: newRule.sourceURL, rule: newRule };
-            this.makeNormal(styleRule);
-
-            if (!doesSelectorAffectSelectedNode) {
-                this.noAffect = true;
-                this.element.classList.add("no-affect");
-            }
-
-            this._selectorRefElement.textContent = WebInspector.UIString("via inspector");
-            this.expand();
-            if (this.element.parentElement) // Might have been detached already.
-                this._moveEditorFromSelector(moveDirection);
-        }
-
-        WebInspector.cssModel.addRule(this.pane.node.id, newContent, successCallback.bind(this), this.editingSelectorCancelled.bind(this));
-    },
-
-    editingSelectorCancelled: function()
-    {
-        if (!this.isBlank) {
-            WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);
-            return;
-        }
-
-        this.pane.removeSection(this);
-    },
-
-    makeNormal: function(styleRule)
-    {
-        this.element.classList.remove("blank-section");
-        this.styleRule = styleRule;
-        this.rule = styleRule.rule;
-
-        // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection.
-        this._normal = true;
-    }
-}
-
-WebInspector.BlankStylePropertiesSection.prototype.__proto__ = WebInspector.StylePropertiesSection.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BottomUpProfileDataGridTree.js b/Source/WebInspectorUI/UserInterface/BottomUpProfileDataGridTree.js
deleted file mode 100644
index a83345e14..000000000
--- a/Source/WebInspectorUI/UserInterface/BottomUpProfileDataGridTree.js
+++ /dev/null
@@ -1,265 +0,0 @@
-/*
- * Copyright (C) 2009 280 North Inc. All Rights Reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-// Bottom Up Profiling shows the entire callstack backwards:
-// The root node is a representation of each individual function called, and each child of that node represents
-// a reverse-callstack showing how many of those calls came from it. So, unlike top-down, the statistics in
-// each child still represent the root node. We have to be particularly careful of recursion with this mode
-// because a root node can represent itself AND an ancestor.
-
-WebInspector.BottomUpProfileDataGridNode = function(/*ProfileView*/ profileView, /*ProfileNode*/ profileNode, /*BottomUpProfileDataGridTree*/ owningTree)
-{
-    WebInspector.ProfileDataGridNode.call(this, profileView, profileNode, owningTree, this._willHaveChildren(profileNode));
-
-    this._remainingNodeInfos = [];
-}
-
-WebInspector.BottomUpProfileDataGridNode.prototype = {
-    _takePropertiesFromProfileDataGridNode: function(/*ProfileDataGridNode*/ profileDataGridNode)
-    {
-        this._save();
-
-        this.selfTime = profileDataGridNode.selfTime;
-        this.totalTime = profileDataGridNode.totalTime;
-        this.numberOfCalls = profileDataGridNode.numberOfCalls;
-    },
-
-    // When focusing, we keep just the members of the callstack.
-    _keepOnlyChild: function(/*ProfileDataGridNode*/ child)
-    {
-        this._save();
-
-        this.removeChildren();
-        this.appendChild(child);
-    },
-
-    _exclude: function(aCallUID)
-    {
-        if (this._remainingNodeInfos)
-            this._populate();
-
-        this._save();
-
-        var children = this.children;
-        var index = this.children.length;
-
-        while (index--)
-            children[index]._exclude(aCallUID);
-
-        var child = this.childrenByCallUID[aCallUID];
-
-        if (child)
-            this._merge(child, true);
-    },
-
-    _restore: function()
-    {
-        WebInspector.ProfileDataGridNode.prototype._restore();
-
-        if (!this.children.length)
-            this.hasChildren = this._willHaveChildren();
-    },
-
-    _merge: function(/*ProfileDataGridNode*/ child, /*Boolean*/ shouldAbsorb)
-    {
-        this.selfTime -= child.selfTime;
-
-        WebInspector.ProfileDataGridNode.prototype._merge.call(this, child, shouldAbsorb);
-    },
-
-    _sharedPopulate: function()
-    {
-        var remainingNodeInfos = this._remainingNodeInfos;
-        var count = remainingNodeInfos.length;
-
-        for (var index = 0; index < count; ++index) {
-            var nodeInfo = remainingNodeInfos[index];
-            var ancestor = nodeInfo.ancestor;
-            var focusNode = nodeInfo.focusNode;
-            var child = this.findChild(ancestor);
-
-            // If we already have this child, then merge the data together.
-            if (child) {
-                var totalTimeAccountedFor = nodeInfo.totalTimeAccountedFor;
-
-                child.selfTime += focusNode.selfTime;
-                child.numberOfCalls += focusNode.numberOfCalls;
-
-                if (!totalTimeAccountedFor)
-                    child.totalTime += focusNode.totalTime;
-            } else {
-                // If not, add it as a true ancestor.
-                // In heavy mode, we take our visual identity from ancestor node...
-                var child = new WebInspector.BottomUpProfileDataGridNode(this.profileView, ancestor, this.tree);
-
-                if (ancestor !== focusNode) {
-                    // but the actual statistics from the "root" node (bottom of the callstack).
-                    child.selfTime = focusNode.selfTime;
-                    child.totalTime = focusNode.totalTime;
-                    child.numberOfCalls = focusNode.numberOfCalls;
-                }
-
-                this.appendChild(child);
-            }
-
-            var parent = ancestor.parent;
-            if (parent && parent.parent) {
-                nodeInfo.ancestor = parent;
-                child._remainingNodeInfos.push(nodeInfo);
-            }
-        }
-
-        delete this._remainingNodeInfos;
-    },
-
-    _willHaveChildren: function(profileNode)
-    {
-        profileNode = profileNode || this.profileNode;
-        // In bottom up mode, our parents are our children since we display an inverted tree.
-        // However, we don't want to show the very top parent since it is redundant.
-        return !!(profileNode.parent && profileNode.parent.parent);
-    }
-}
-
-WebInspector.BottomUpProfileDataGridNode.prototype.__proto__ = WebInspector.ProfileDataGridNode.prototype;
-
-WebInspector.BottomUpProfileDataGridTree = function(/*ProfileView*/ aProfileView, /*ProfileNode*/ aProfileNode)
-{
-    WebInspector.ProfileDataGridTree.call(this, aProfileView, aProfileNode);
-
-    // Iterate each node in pre-order.
-    var profileNodeUIDs = 0;
-    var profileNodeGroups = [[], [aProfileNode]];
-    var visitedProfileNodesForCallUID = {};
-
-    this._remainingNodeInfos = [];
-
-    for (var profileNodeGroupIndex = 0; profileNodeGroupIndex < profileNodeGroups.length; ++profileNodeGroupIndex) {
-        var parentProfileNodes = profileNodeGroups[profileNodeGroupIndex];
-        var profileNodes = profileNodeGroups[++profileNodeGroupIndex];
-        var count = profileNodes.length;
-
-        for (var index = 0; index < count; ++index) {
-            var profileNode = profileNodes[index];
-
-            if (!profileNode.UID)
-                profileNode.UID = ++profileNodeUIDs;
-
-            if (profileNode.head && profileNode !== profileNode.head) {
-                // The total time of this ancestor is accounted for if we're in any form of recursive cycle.
-                var visitedNodes = visitedProfileNodesForCallUID[profileNode.callUID];
-                var totalTimeAccountedFor = false;
-
-                if (!visitedNodes) {
-                    visitedNodes = {}
-                    visitedProfileNodesForCallUID[profileNode.callUID] = visitedNodes;
-                } else {
-                    // The total time for this node has already been accounted for iff one of it's parents has already been visited.
-                    // We can do this check in this style because we are traversing the tree in pre-order.
-                    var parentCount = parentProfileNodes.length;
-                    for (var parentIndex = 0; parentIndex < parentCount; ++parentIndex) {
-                        if (visitedNodes[parentProfileNodes[parentIndex].UID]) {
-                            totalTimeAccountedFor = true;
-                            break;
-                        }
-                    }
-                }
-
-                visitedNodes[profileNode.UID] = true;
-
-                this._remainingNodeInfos.push({ ancestor:profileNode, focusNode:profileNode, totalTimeAccountedFor:totalTimeAccountedFor });
-            }
-
-            var children = profileNode.children;
-            if (children.length) {
-                profileNodeGroups.push(parentProfileNodes.concat([profileNode]))
-                profileNodeGroups.push(children);
-            }
-        }
-    }
-
-    // Populate the top level nodes.
-    WebInspector.BottomUpProfileDataGridNode.prototype._populate.call(this);
-
-    return this;
-}
-
-WebInspector.BottomUpProfileDataGridTree.prototype = {
-    // When focusing, we keep the entire callstack up to this ancestor.
-    focus: function(/*ProfileDataGridNode*/ profileDataGridNode)
-    {
-        if (!profileDataGridNode)
-            return;
-
-        this._save();
-
-        var currentNode = profileDataGridNode;
-        var focusNode = profileDataGridNode;
-
-        while (currentNode.parent && (currentNode instanceof WebInspector.ProfileDataGridNode)) {
-            currentNode._takePropertiesFromProfileDataGridNode(profileDataGridNode);
-
-            focusNode = currentNode;
-            currentNode = currentNode.parent;
-
-            if (currentNode instanceof WebInspector.ProfileDataGridNode)
-                currentNode._keepOnlyChild(focusNode);
-        }
-
-        this.children = [focusNode];
-        this.totalTime = profileDataGridNode.totalTime;
-    },
-
-    exclude: function(/*ProfileDataGridNode*/ profileDataGridNode)
-    {
-        if (!profileDataGridNode)
-            return;
-
-        this._save();
-
-        var excludedCallUID = profileDataGridNode.callUID;
-        var excludedTopLevelChild = this.childrenByCallUID[excludedCallUID];
-
-        // If we have a top level node that is excluded, get rid of it completely (not keeping children),
-        // since bottom up data relies entirely on the root node.
-        if (excludedTopLevelChild)
-            this.children.remove(excludedTopLevelChild);
-
-        var children = this.children;
-        var count = children.length;
-
-        for (var index = 0; index < count; ++index)
-            children[index]._exclude(excludedCallUID);
-
-        if (this.lastComparator)
-            this.sort(this.lastComparator, true);
-    },
-
-    _sharedPopulate: WebInspector.BottomUpProfileDataGridNode.prototype._sharedPopulate
-}
-
-WebInspector.BottomUpProfileDataGridTree.prototype.__proto__ = WebInspector.ProfileDataGridTree.prototype;
-
diff --git a/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.css b/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.css
deleted file mode 100644
index 7a88588c9..000000000
--- a/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.css
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.details-section .row.box-model {
-    padding: 6px;
-    text-align: center;
-    white-space: nowrap;
-}
-
-.details-section .row.box-model .label {
-    position: absolute;
-    color: black;
-    margin-left: 3px;
-    padding-left: 2px;
-    padding-right: 2px;
-}
-
-.details-section .row.box-model .position {
-    border: 1px rgb(66%, 66%, 66%) dotted;
-    background-color: rgb(231, 231, 231);
-    display: inline-block;
-    text-align: center;
-    padding: 3px;
-    margin: 3px;
-}
-
-.details-section .row.box-model .margin {
-    border: 1px dashed;
-    background-color: rgb(231, 231, 231);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-}
-
-.details-section .row.box-model .margin.active {
-    background-color: rgba(246, 178, 107, .66);
-}
-
-.details-section .row.box-model .border {
-    border: 1px black solid;
-    background-color: rgb(231, 231, 231);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-}
-
-.details-section .row.box-model .border.active {
-    background-color: rgba(255, 229, 153, .66);
-}
-
-.details-section .row.box-model .padding {
-    border: 1px grey dashed;
-    background-color: rgb(231, 231, 231);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-}
-
-.details-section .row.box-model .padding.active {
-    background-color: rgba(147, 196, 125, .55);
-}
-
-.details-section .row.box-model .content {
-    position: static;
-    border: 1px gray solid;
-    background-color: rgb(231, 231, 231);
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    padding: 3px;
-    margin: 3px;
-    min-width: 80px;
-    text-align: center;
-    overflow: visible;
-}
-
-.details-section .row.box-model .content.active {
-    background-color: rgba(111, 168, 220, .66);
-}
-
-.details-section .row.box-model .content span {
-    display: inline-block;
-}
-
-.details-section .row.box-model .editing {
-    position: relative;
-    z-index: 100;
-}
-
-.details-section .row.box-model .left {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.details-section .row.box-model .right {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.details-section .row.box-model .top {
-    display: inline-block;
-}
-
-.details-section .row.box-model .bottom {
-    display: inline-block;
-}
diff --git a/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.js b/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.js
deleted file mode 100644
index d607cce87..000000000
--- a/Source/WebInspectorUI/UserInterface/BoxModelDetailsSectionRow.js
+++ /dev/null
@@ -1,428 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.BoxModelDetailsSectionRow = function() {
-    WebInspector.DetailsSectionRow.call(this, WebInspector.UIString("No Box Model Information"));
-
-    this.element.classList.add(WebInspector.BoxModelDetailsSectionRow.StyleClassName);
-
-    this._nodeStyles = null;
-};
-
-WebInspector.BoxModelDetailsSectionRow.StyleClassName = "box-model";
-WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters = " \xA0\t\n\"':;,/()";
-WebInspector.BoxModelDetailsSectionRow.CSSNumberRegex = /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/;
-
-WebInspector.BoxModelDetailsSectionRow.prototype = {
-    constructor: WebInspector.BoxModelDetailsSectionRow,
-
-    // Public
-
-    get nodeStyles()
-    {
-        return this._nodeStyles;
-    },
-
-    set nodeStyles(nodeStyles)
-    {
-        this._nodeStyles = nodeStyles;
-
-        this._refresh();
-    },
-
-    // Private
-
-    _refresh: function()
-    {
-        if (this._ignoreNextRefresh) {
-            delete this._ignoreNextRefresh;
-            return;
-        }
-
-        this._updateMetrics();
-    },
-
-    _getPropertyValueAsPx: function(style, propertyName)
-    {
-        return Number(style.propertyForName(propertyName).value.replace(/px$/, "") || 0);
-    },
-
-    _getBox: function(computedStyle, componentName)
-    {
-        var suffix = componentName === "border" ? "-width" : "";
-        var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
-        var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
-        var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
-        var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
-        return { left: left, top: top, right: right, bottom: bottom };
-    },
-
-    _highlightDOMNode: function(showHighlight, mode, event)
-    {
-        event.stopPropagation();
-
-        var nodeId = showHighlight ? this.nodeStyles.node.id : 0;
-        if (nodeId) {
-            if (this._highlightMode === mode)
-                return;
-            this._highlightMode = mode;
-            WebInspector.domTreeManager.highlightDOMNode(nodeId, mode);
-        } else {
-            delete this._highlightMode;
-            WebInspector.domTreeManager.hideDOMNodeHighlight();
-        }
-
-        for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
-            var element = this._boxElements[i];
-            if (nodeId && (mode === "all" || element._name === mode))
-                element.classList.add("active");
-            else
-                element.classList.remove("active");
-        }
-    },
-
-    _updateMetrics: function()
-    {
-        // Updating with computed style.
-        var metricsElement = document.createElement("div");
-
-        var self = this;
-        var style = this._nodeStyles.computedStyle;
-
-        function createElement(type, value, name, propertyName, style)
-        {
-            // Check if the value is a float and whether it should be rounded.
-            var floatValue = parseFloat(value);
-            var shouldRoundValue = (!isNaN(floatValue) && floatValue % 1 !== 0);
-
-            var element = document.createElement(type);
-            element.textContent = shouldRoundValue ? ("~" + Math.round(floatValue * 100) / 100) : value;
-            if (shouldRoundValue)
-                element.title = value;
-            element.addEventListener("dblclick", this._startEditing.bind(this, element, name, propertyName, style), false);
-            return element;
-        }
-
-        function createBoxPartElement(style, name, side, suffix)
-        {
-            var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
-            var value = style.propertyForName(propertyName).value;
-            if (value === "" || (name !== "position" && value === "0px"))
-                value = "\u2012";
-            else if (name === "position" && value === "auto")
-                value = "\u2012";
-            value = value.replace(/px$/, "");
-
-            var element = createElement.call(this, "div", value, name, propertyName, style);
-            element.className = side;
-            return element;
-        }
-
-        function createContentAreaWidthElement(style)
-        {
-            var width = style.propertyForName("width").value.replace(/px$/, "");
-            if (style.propertyForName("box-sizing").value === "border-box") {
-                var borderBox = self._getBox(style, "border");
-                var paddingBox = self._getBox(style, "padding");
-
-                width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right;
-            }
-
-            return createElement.call(this, "span", width, "width", "width", style);
-        }
-
-        function createContentAreaHeightElement(style)
-        {
-            var height = style.propertyForName("height").value.replace(/px$/, "");
-            if (style.propertyForName("box-sizing").value === "border-box") {
-                var borderBox = self._getBox(style, "border");
-                var paddingBox = self._getBox(style, "padding");
-
-                height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom;
-            }
-
-            return createElement.call(this, "span", height, "height", "height", style);
-        }
-
-        // Display types for which margin is ignored.
-        var noMarginDisplayType = {
-            "table-cell": true,
-            "table-column": true,
-            "table-column-group": true,
-            "table-footer-group": true,
-            "table-header-group": true,
-            "table-row": true,
-            "table-row-group": true
-        };
-
-        // Display types for which padding is ignored.
-        var noPaddingDisplayType = {
-            "table-column": true,
-            "table-column-group": true,
-            "table-footer-group": true,
-            "table-header-group": true,
-            "table-row": true,
-            "table-row-group": true
-        };
-
-        // Position types for which top, left, bottom and right are ignored.
-        var noPositionType = {
-            "static": true
-        };
-
-        this._boxElements = [];
-        var boxes = ["content", "padding", "border", "margin", "position"];
-
-        if (!style.properties.length) {
-            this.showEmptyMessage();
-            return;
-        }
-
-        var previousBox = null;
-        for (var i = 0; i < boxes.length; ++i) {
-            var name = boxes[i];
-
-            if (name === "margin" && noMarginDisplayType[style.propertyForName("display").value])
-                continue;
-            if (name === "padding" && noPaddingDisplayType[style.propertyForName("display").value])
-                continue;
-            if (name === "position" && noPositionType[style.propertyForName("position").value])
-                continue;
-
-            var boxElement = document.createElement("div");
-            boxElement.className = name;
-            boxElement._name = name;
-            boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
-            this._boxElements.push(boxElement);
-
-            if (name === "content") {
-                var widthElement = createContentAreaWidthElement.call(this, style);
-                var heightElement = createContentAreaHeightElement.call(this, style);
-
-                boxElement.appendChild(widthElement);
-                boxElement.appendChild(document.createTextNode(" \u00D7 "));
-                boxElement.appendChild(heightElement);
-            } else {
-                var suffix = (name === "border" ? "-width" : "");
-
-                var labelElement = document.createElement("div");
-                labelElement.className = "label";
-                labelElement.textContent = boxes[i];
-                boxElement.appendChild(labelElement);
-
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
-                boxElement.appendChild(document.createElement("br"));
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
-
-                if (previousBox)
-                    boxElement.appendChild(previousBox);
-
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
-                boxElement.appendChild(document.createElement("br"));
-                boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
-            }
-
-            previousBox = boxElement;
-        }
-
-        metricsElement.appendChild(previousBox);
-        metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, ""), false);
-
-        this.hideEmptyMessage();
-        this.element.appendChild(metricsElement);
-    },
-
-    _startEditing: function(targetElement, box, styleProperty, computedStyle)
-    {
-        if (WebInspector.isBeingEdited(targetElement))
-            return;
-
-        // If the target element has a title use it as the editing value
-        // since the current text is likely truncated/rounded.
-        if (targetElement.title)
-            targetElement.textContent = targetElement.title;
-
-        var context = {box: box, styleProperty: styleProperty};
-        var boundKeyDown = this._handleKeyDown.bind(this, context, styleProperty);
-        context.keyDownHandler = boundKeyDown;
-        targetElement.addEventListener("keydown", boundKeyDown, false);
-
-        this._isEditingMetrics = true;
-
-        var config = new WebInspector.EditingConfig(this._editingCommitted.bind(this), this._editingCancelled.bind(this), context);
-        WebInspector.startEditing(targetElement, config);
-
-        window.getSelection().setBaseAndExtent(targetElement, 0, targetElement, 1);
-    },
-
-    _alteredFloatNumber: function(number, event)
-    {
-        var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
-
-        // Jump by 10 when shift is down or jump by 0.1 when Alt/Option is down.
-        // Also jump by 10 for page up and down, or by 100 if shift is held with a page key.
-        var changeAmount = 1;
-        if (event.shiftKey && !arrowKeyPressed)
-            changeAmount = 100;
-        else if (event.shiftKey || !arrowKeyPressed)
-            changeAmount = 10;
-        else if (event.altKey)
-            changeAmount = 0.1;
-
-        if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
-            changeAmount *= -1;
-
-        // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
-        // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
-        var result = Number((number + changeAmount).toFixed(6));
-        if (!String(result).match(WebInspector.BoxModelDetailsSectionRow.CSSNumberRegex))
-            return null;
-
-        return result;
-    },
-
-    _handleKeyDown: function(context, styleProperty, event)
-    {
-        if (!/^(?:Page)?(?:Up|Down)$/.test(event.keyIdentifier))
-            return;
-
-        var element = event.currentTarget;
-
-        var selection = window.getSelection();
-        if (!selection.rangeCount)
-            return;
-
-        var selectionRange = selection.getRangeAt(0);
-        if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
-            return;
-
-        var originalValue = element.textContent;
-        var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.BoxModelDetailsSectionRow.StyleValueDelimiters, element);
-        var wordString = wordRange.toString();
-
-        var matches = /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/.exec(wordString);
-        var replacementString;
-        if (matches && matches.length) {
-            var prefix = matches[1];
-            var suffix = matches[3];
-            var number = this._alteredFloatNumber(parseFloat(matches[2]), event);
-            if (number === null) {
-                // Need to check for null explicitly.
-                return;
-            }
-
-            if (styleProperty !== "margin" && number < 0)
-                number = 0;
-
-            replacementString = prefix + number + suffix;
-        }
-
-        if (!replacementString)
-            return;
-
-        var replacementTextNode = document.createTextNode(replacementString);
-
-        wordRange.deleteContents();
-        wordRange.insertNode(replacementTextNode);
-
-        var finalSelectionRange = document.createRange();
-        finalSelectionRange.setStart(replacementTextNode, 0);
-        finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
-
-        selection.removeAllRanges();
-        selection.addRange(finalSelectionRange);
-
-        event.handled = true;
-        event.preventDefault();
-
-        this._ignoreNextRefresh = true;
-
-        this._applyUserInput(element, replacementString, originalValue, context, false);
-    },
-
-    _editingEnded: function(element, context)
-    {
-        delete this.originalPropertyData;
-        delete this.previousPropertyDataCandidate;
-        element.removeEventListener("keydown", context.keyDownHandler, false);
-        delete this._isEditingMetrics;
-    },
-
-    _editingCancelled: function(element, context)
-    {
-        this._editingEnded(element, context);
-        this._refresh();
-    },
-
-    _applyUserInput: function(element, userInput, previousContent, context, commitEditor)
-    {
-        if (commitEditor && userInput === previousContent)
-            return this._editingCancelled(element, context); // nothing changed, so cancel
-
-        if (context.box !== "position" && (!userInput || userInput === "\u2012"))
-            userInput = "0px";
-        else if (context.box === "position" && (!userInput || userInput === "\u2012"))
-            userInput = "auto";
-
-        userInput = userInput.toLowerCase();
-        // Append a "px" unit if the user input was just a number.
-        if (/^-?(?:\d+(?:\.\d+)?|\.\d+)$/.test(userInput))
-            userInput += "px";
-
-        var styleProperty = context.styleProperty;
-        var computedStyle = this._nodeStyles.computedStyle;
-
-        if (computedStyle.propertyForName("box-sizing").value === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
-            if (!userInput.match(/px$/)) {
-                console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");
-                return;
-            }
-
-            var borderBox = this._getBox(computedStyle, "border");
-            var paddingBox = this._getBox(computedStyle, "padding");
-            var userValuePx = Number(userInput.replace(/px$/, ""));
-            if (isNaN(userValuePx))
-                return;
-            if (styleProperty === "width")
-                userValuePx += borderBox.left + borderBox.right + paddingBox.left + paddingBox.right;
-            else
-                userValuePx += borderBox.top + borderBox.bottom + paddingBox.top + paddingBox.bottom;
-
-            userInput = userValuePx + "px";
-        }
-
-        var property = this._nodeStyles.inlineStyle.propertyForName(context.styleProperty);
-        property.value = userInput;
-        property.add();
-    },
-
-    _editingCommitted: function(element, userInput, previousContent, context)
-    {
-        this._editingEnded(element, context);
-        this._applyUserInput(element, userInput, previousContent, context, true);
-    }
-};
-
-WebInspector.BoxModelDetailsSectionRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Branch.js b/Source/WebInspectorUI/UserInterface/Branch.js
deleted file mode 100644
index 87e97c079..000000000
--- a/Source/WebInspectorUI/UserInterface/Branch.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Branch = function(displayName, revisions, locked)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(displayName);
-
-    this._displayName = displayName;
-    this._revisions = revisions instanceof Array ? revisions.slice() : [];
-    this._locked = locked || false;
-};
-
-WebInspector.Branch.prototype = {
-    constructor: WebInspector.Branch,
-
-    // Public
-
-    get displayName()
-    {
-        return this._displayName;
-    },
-
-    set displayName(displayName)
-    {
-        console.assert(displayName);
-        if (!displayName)
-            return;
-
-        this._displayName = displayName;
-    },
-
-    get revisions()
-    {
-        return this._revisions;
-    },
-
-    get locked()
-    {
-        return this._locked;
-    },
-
-    revisionForRepresentedObject: function(representedObject, doNotCreateIfNeeded)
-    {
-        for (var i = 0; i < this._revisions.length; ++i) {
-            var revision = this._revisions[i];
-            if (revision instanceof WebInspector.SourceCodeRevision && revision.sourceCode === representedObject)
-                return revision;
-        }
-
-        if (doNotCreateIfNeeded)
-            return null;
-
-        if (representedObject instanceof WebInspector.SourceCode) {
-            var revision = representedObject.originalRevision.copy();
-            representedObject.currentRevision = revision;
-            this.addRevision(revision);
-            return revision;
-        }
-
-        return null;
-    },
-
-    addRevision: function(revision)
-    {
-        console.assert(revision instanceof WebInspector.Revision);
-
-        if (this._locked)
-            return;
-
-        if (this._revisions.contains(revision))
-            return;
-
-        this._revisions.push(revision);
-    },
-
-    removeRevision: function(revision)
-    {
-        console.assert(revision instanceof WebInspector.Revision);
-
-        if (this._locked)
-            return;
-
-        this._revisions.remove(revision);
-    },
-
-    reset: function()
-    {
-        if (this._locked)
-            return;
-
-        this._revisions = [];
-    },
-
-    fork: function(displayName)
-    {
-        var copiedRevisions = this._revisions.map(function(revision) { return revision.copy(); });
-        return new WebInspector.Branch(displayName, copiedRevisions);
-    },
-
-    apply: function()
-    {
-        for (var i = 0; i < this._revisions.length; ++i)
-            this._revisions[i].apply();
-    },
-
-    revert: function()
-    {
-        for (var i = this._revisions.length - 1; i >= 0; --i)
-            this._revisions[i].revert();
-    },
-
-    lock: function()
-    {
-        console.assert(!this._locked);
-        this._locked = true;
-    },
-
-    unlock: function()
-    {
-        console.assert(this._locked);
-        this._locked = false;
-    }
-};
-
-WebInspector.Branch.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BranchManager.js b/Source/WebInspectorUI/UserInterface/BranchManager.js
deleted file mode 100644
index 39004c6bb..000000000
--- a/Source/WebInspectorUI/UserInterface/BranchManager.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.BranchManager = function()
-{
-    WebInspector.Object.call(this);
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-
-    this.initialize();
-}
-
-WebInspector.BranchManager.prototype = {
-    constructor: WebInspector.BranchManager,
-
-    // Public
-
-    initialize: function()
-    {
-        this._originalBranch = new WebInspector.Branch(WebInspector.UIString("Original"), null, true);
-        this._currentBranch = this._originalBranch.fork(WebInspector.UIString("Working Copy"));
-        this._branches = [this._originalBranch, this._currentBranch];
-    },
-
-    get branches()
-    {
-        return this._branches;
-    },
-
-    get currentBranch()
-    {
-        return this._currentBranch;
-    },
-
-    set currentBranch(branch)
-    {
-        console.assert(branch instanceof WebInspector.Branch);
-        if (!(branch instanceof WebInspector.Branch))
-            return;
-
-        this._currentBranch.revert();
-
-        this._currentBranch = branch;
-
-        this._currentBranch.apply();
-    },
-
-    createBranch: function(displayName, fromBranch)
-    {
-        if (!fromBranch)
-            fromBranch = this._originalBranch;
-
-        console.assert(fromBranch instanceof WebInspector.Branch);
-        if (!(fromBranch instanceof WebInspector.Branch))
-            return;
-
-        var newBranch = fromBranch.fork(displayName);
-        this._branches.push(newBranch);
-        return newBranch;
-    },
-
-    deleteBranch: function(branch)
-    {
-        console.assert(branch instanceof WebInspector.Branch);
-        if (!(branch instanceof WebInspector.Branch))
-            return;
-
-        console.assert(branch !== this._originalBranch);
-        if (branch === this._originalBranch)
-            return;
-
-        this._branches.remove(branch);
-
-        if (branch === this._currentBranch)
-            this._currentBranch = this._originalBranch;
-    },
-
-    // Private
-
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (!event.target.isMainFrame())
-            return;
-
-        this.initialize();
-    }
-};
-
-WebInspector.BranchManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Breakpoint.css b/Source/WebInspectorUI/UserInterface/Breakpoint.css
deleted file mode 100644
index d122df155..000000000
--- a/Source/WebInspectorUI/UserInterface/Breakpoint.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.popover .edit-breakpoint-popover-content {
-    width: 420px;
-    padding: 5px 15px;
-    
-    font-family: "Lucida Grande", Helvetica, sans-serif;
-    font-size: 11px;
-}
-
-.popover .edit-breakpoint-popover-content > label.toggle {
-    color: black;
-    font-weight: bold;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.popover .edit-breakpoint-popover-content > table {
-    width: 100%;
-}
-
-.popover .edit-breakpoint-popover-content > table > tr > th {
-    color: rgb(89, 89, 89);
-    font-weight: bold;
-    text-align: right;
-    width: 1px; /* Shrink to fit. */
-}
-
-.popover .edit-breakpoint-popover-content > table > tr > td {
-    padding-left: 5px;
-}
-
-#edit-breakpoint-popover-condition {
-    width: 100%;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Breakpoint.js b/Source/WebInspectorUI/UserInterface/Breakpoint.js
deleted file mode 100644
index fa13a8217..000000000
--- a/Source/WebInspectorUI/UserInterface/Breakpoint.js
+++ /dev/null
@@ -1,289 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Breakpoint = function(sourceCodeLocationOrInfo, disabled, condition)
-{
-    WebInspector.Object.call(this);
-
-    if (sourceCodeLocationOrInfo instanceof WebInspector.SourceCodeLocation) {
-        var sourceCode = sourceCodeLocationOrInfo.sourceCode;
-        var url = sourceCode ? sourceCode.url : null;
-        var scriptIdentifier = sourceCode instanceof WebInspector.Script ? sourceCode.id : null;
-        var location = sourceCodeLocationOrInfo;
-    } else if (sourceCodeLocationOrInfo && typeof sourceCodeLocationOrInfo === "object") {
-        var url = sourceCodeLocationOrInfo.url;
-        var lineNumber = sourceCodeLocationOrInfo.lineNumber || 0;
-        var columnNumber = sourceCodeLocationOrInfo.columnNumber || 0;
-        var location = new WebInspector.SourceCodeLocation(null, lineNumber, columnNumber);
-        disabled = sourceCodeLocationOrInfo.disabled;
-        condition = sourceCodeLocationOrInfo.condition;
-    } else
-        console.error("Unexpected type passed to WebInspector.Breakpoint", sourceCodeLocationOrInfo);
-
-    this._id = null;
-    this._url = url || null;
-    this._scriptIdentifier = scriptIdentifier || null;
-    this._disabled = disabled || false;
-    this._condition = condition || "";
-    this._resolved = false;
-
-    this._sourceCodeLocation = location;
-    this._sourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationLocationChanged, this);
-    this._sourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, this._sourceCodeLocationDisplayLocationChanged, this);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.Breakpoint);
-
-WebInspector.Breakpoint.PopoverClassName = "edit-breakpoint-popover-content";
-WebInspector.Breakpoint.PopoverConditionInputId = "edit-breakpoint-popover-condition";
-
-WebInspector.Breakpoint.Event = {
-    DisabledStateDidChange: "breakpoint-disabled-state-did-change",
-    ResolvedStateDidChange: "breakpoint-resolved-state-did-change",
-    ConditionDidChange: "breakpoint-condition-did-change",
-    LocationDidChange: "breakpoint-location-did-change",
-    DisplayLocationDidChange: "breakpoint-display-location-did-change",
-};
-
-WebInspector.Breakpoint.prototype = {
-    constructor: WebInspector.Breakpoint,
-
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    set id(id)
-    {
-        this._id = id || null;
-    },
-
-    get url()
-    {
-        return this._url;
-    },
-
-    get scriptIdentifier()
-    {
-        return this._scriptIdentifier;
-    },
-
-    get sourceCodeLocation()
-    {
-        return this._sourceCodeLocation;
-    },
-
-    get resolved()
-    {
-        return this._resolved && WebInspector.debuggerManager.breakpointsEnabled;
-    },
-
-    set resolved(resolved)
-    {
-        if (this._resolved === resolved)
-            return;
-
-        this._resolved = resolved || false;
-
-        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
-    },
-
-    get disabled()
-    {
-        return this._disabled;
-    },
-
-    set disabled(disabled)
-    {
-        if (this._disabled === disabled)
-            return;
-
-        this._disabled = disabled || false;
-
-        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.DisabledStateDidChange);
-    },
-
-    get condition()
-    {
-        return this._condition;
-    },
-
-    set condition(condition)
-    {
-        if (this._condition === condition)
-            return;
-
-        this._condition = condition;
-
-        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ConditionDidChange);
-    },
-
-    get info()
-    {
-        // The id, scriptIdentifier and resolved state are tied to the current session, so don't include them for serialization.
-        return {
-            url: this._url,
-            lineNumber: this._sourceCodeLocation.lineNumber,
-            columnNumber: this._sourceCodeLocation.columnNumber,
-            disabled: this._disabled,
-            condition: this._condition
-        };
-    },
-
-    appendContextMenuItems: function(contextMenu, breakpointDisplayElement)
-    {
-        function editBreakpoint()
-        {
-            this._showEditBreakpointPopover(breakpointDisplayElement);
-        }
-
-        function removeBreakpoint()
-        {
-            WebInspector.debuggerManager.removeBreakpoint(this);
-        }
-
-        function toggleBreakpoint()
-        {
-            this.disabled = !this.disabled;
-        }
-
-        function revealOriginalSourceCodeLocation()
-        {
-            WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(this._sourceCodeLocation);
-        }
-
-        if (WebInspector.debuggerManager.isBreakpointEditable(this))
-            contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), editBreakpoint.bind(this));
-
-        if (this._disabled)
-            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoint"), toggleBreakpoint.bind(this));
-        else
-            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint.bind(this));
-
-        if (WebInspector.debuggerManager.isBreakpointRemovable(this)) {
-            contextMenu.appendSeparator();
-            contextMenu.appendItem(WebInspector.UIString("Delete Breakpoint"), removeBreakpoint.bind(this));
-        }
-
-        if (this._sourceCodeLocation.hasMappedLocation()) {
-            contextMenu.appendSeparator();
-            contextMenu.appendItem(WebInspector.UIString("Reveal in Original Resource"), revealOriginalSourceCodeLocation.bind(this));
-        }
-    },
-
-    // Private
-
-    _popoverToggleCheckboxChanged: function(event)
-    {
-        this.disabled = !event.target.checked;
-    },
-
-    _popoverConditionInputChanged: function(event)
-    {
-        this.condition = event.target.value;
-    },
-
-    _popoverConditionInputKeyDown: function(event)
-    {
-        if (this._keyboardShortcutEsc.matchesEvent(event) || this._keyboardShortcutEnter.matchesEvent(event)) {
-            this._popover.dismiss();
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    },
-
-    _editBreakpointPopoverContentElement: function()
-    {
-        var content = document.createElement("div");
-        content.className = WebInspector.Breakpoint.PopoverClassName;
-
-        var checkboxElement = document.createElement("input");
-        checkboxElement.type = "checkbox";
-        checkboxElement.checked = !this._disabled;
-        checkboxElement.addEventListener("change", this._popoverToggleCheckboxChanged.bind(this));
-
-        var checkboxLabel = document.createElement("label");
-        checkboxLabel.className = "toggle";
-        checkboxLabel.appendChild(checkboxElement);
-        checkboxLabel.appendChild(document.createTextNode(this._sourceCodeLocation.displayLocationString()));
-
-        var table = document.createElement("table");
-
-        var conditionRow = table.appendChild(document.createElement("tr"));
-        var conditionHeader = conditionRow.appendChild(document.createElement("th"));
-        var conditionData = conditionRow.appendChild(document.createElement("td"));
-        var conditionLabel = conditionHeader.appendChild(document.createElement("label"));
-        var conditionInput = conditionData.appendChild(document.createElement("input"));
-        conditionInput.id = WebInspector.Breakpoint.PopoverConditionInputId;
-        conditionInput.value = this._condition || "";
-        conditionInput.spellcheck = false;
-        conditionInput.addEventListener("change", this._popoverConditionInputChanged.bind(this));
-        conditionInput.addEventListener("keydown", this._popoverConditionInputKeyDown.bind(this));
-        conditionInput.placeholder = WebInspector.UIString("Conditional expression");
-        conditionLabel.setAttribute("for", conditionInput.id);
-        conditionLabel.textContent = WebInspector.UIString("Condition");
-
-        content.appendChild(checkboxLabel);
-        content.appendChild(table);
-
-        return content;
-    },
-
-    _showEditBreakpointPopover: function(element)
-    {
-        const padding = 2;
-        var bounds = WebInspector.Rect.rectFromClientRect(element.getBoundingClientRect());
-        bounds.origin.x -= 1; // Move the anchor left one pixel so it looks more centered.
-        bounds.origin.x -= padding;
-        bounds.origin.y -= padding;
-        bounds.size.width += padding * 2; 
-        bounds.size.height += padding * 2; 
-
-        this._popover = this._popover || new WebInspector.Popover(this);
-        this._popover.content = this._editBreakpointPopoverContentElement();
-        this._popover.present(bounds, [WebInspector.RectEdge.MAX_Y]);
-
-        if (!this._keyboardShortcutEsc) {
-            this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
-            this._keyboardShortcutEnter = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter);
-        }
-
-        document.getElementById(WebInspector.Breakpoint.PopoverConditionInputId).select();
-    },
-
-    _sourceCodeLocationLocationChanged: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.LocationDidChange, event.data);
-    },
-
-    _sourceCodeLocationDisplayLocationChanged: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.DisplayLocationDidChange, event.data);
-    }
-};
-
-WebInspector.Breakpoint.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointIcons.css b/Source/WebInspectorUI/UserInterface/BreakpointIcons.css
deleted file mode 100644
index 6ba2a5b66..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointIcons.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.breakpoint-generic-line-icon .icon {
-    content: url(Images/ResultLine.pdf);
-}
-
-.breakpoint-exception-icon .icon {
-    content: url(Images/Exception.pdf);
-}
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css
deleted file mode 100644
index 9932b5de3..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.item.breakpoint .status > .status-image {
-    width: 21px;
-    height: 12px;
-    content: url(Images/BreakpointInactiveButton.pdf);
-    margin-top: 3px;
-}
-
-.item.breakpoint .status > .status-image.resolved {
-    content: url(Images/BreakpointButton.pdf);
-}
-
-.item.breakpoint .status > .status-image.disabled {
-    opacity: 0.45;
-}
-
-.item.breakpoint .subtitle.formatted-location {
-    font-style: italic;
-}
diff --git a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js
deleted file mode 100644
index adedcad32..000000000
--- a/Source/WebInspectorUI/UserInterface/BreakpointTreeElement.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.BreakpointTreeElement = function(breakpoint, className, title)
-{
-    console.assert(breakpoint instanceof WebInspector.Breakpoint);
-
-    if (!className)
-        className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
-
-    WebInspector.GeneralTreeElement.call(this, [WebInspector.BreakpointTreeElement.StyleClassName, className], title, null, breakpoint, false);
-
-    this._breakpoint = breakpoint;
-
-    if (!title)
-        this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
-    this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
-    this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
-
-    this._statusImageElement = document.createElement("img");
-    this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
-    this._statusImageElement.addEventListener("mousedown", this._statusImageElementMouseDown.bind(this));
-    this._statusImageElement.addEventListener("click", this._statusImageElementClicked.bind(this));
-
-    if (!title)
-        this._updateTitles();
-    this._updateStatus();
-
-    this.status = this._statusImageElement;
-    this.small = true;
-};
-
-WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = "breakpoint-generic-line-icon";
-WebInspector.BreakpointTreeElement.StyleClassName = "breakpoint";
-WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = "status-image";
-WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = "resolved";
-WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
-WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
-
-WebInspector.BreakpointTreeElement.prototype = {
-    constructor: WebInspector.BreakpointTreeElement,
-
-    // Public
-
-    get breakpoint()
-    {
-        return this._breakpoint;
-    },
-
-    ondelete: function()
-    {
-        if (!WebInspector.debuggerManager.isBreakpointRemovable(this._breakpoint))
-            return false;
-
-        WebInspector.debuggerManager.removeBreakpoint(this._breakpoint);
-        return true;
-    },
-
-    onenter: function()
-    {
-        this._breakpoint.disabled = !this._breakpoint.disabled;
-        return true;
-    },
-
-    onspace: function()
-    {
-        this._breakpoint.disabled = !this._breakpoint.disabled;
-        return true;
-    },
-
-    oncontextmenu: function(event)
-    {
-        var contextMenu = new WebInspector.ContextMenu(event);
-        this._breakpoint.appendContextMenuItems(contextMenu, this._statusImageElement);
-        contextMenu.show();
-    },
-
-    // Private
-
-    _updateTitles: function()
-    {
-        var sourceCodeLocation = this._breakpoint.sourceCodeLocation;
-
-        var displayLineNumber = sourceCodeLocation.displayLineNumber;
-        var displayColumnNumber = sourceCodeLocation.displayColumnNumber;
-        if (displayColumnNumber > 0)
-            this.mainTitle = WebInspector.UIString("Line %d:%d").format(displayLineNumber + 1, displayColumnNumber + 1); // The user visible line and column numbers are 1-based.
-        else
-            this.mainTitle = WebInspector.UIString("Line %d").format(displayLineNumber + 1); // The user visible line number is 1-based.
-
-        if (sourceCodeLocation.hasMappedLocation()) {
-            this.subtitle = sourceCodeLocation.formattedLocationString();
-
-            if (sourceCodeLocation.hasFormattedLocation())
-                this.subtitleElement.classList.add(WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName);
-            else
-                this.subtitleElement.classList.remove(WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName);
-
-            this.tooltip = this.mainTitle + " \u2014 " + WebInspector.UIString("originally %s").format(sourceCodeLocation.originalLocationString());
-        }
-    },
-
-    _updateStatus: function()
-    {
-        if (this._breakpoint.disabled)
-            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName);
-        else
-            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName);
-
-        if (this._breakpoint.resolved)
-            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
-        else
-            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
-    },
-
-    _breakpointLocationDidChange: function(event)
-    {
-        console.assert(event.target === this._breakpoint);
-
-        // The Breakpoint has a new display SourceCode. The sidebar will remove us. Stop listening to the breakpoint.
-        if (event.data.oldDisplaySourceCode === this._breakpoint.displaySourceCode) {
-            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange, this);
-            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus, this);
-            this._breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus, this);
-            return;
-        }
-
-        this._updateTitles();
-    },
-
-    _statusImageElementMouseDown: function(event)
-    {
-        // To prevent the tree element from selecting.
-        event.stopPropagation();
-    },
-
-    _statusImageElementClicked: function(event)
-    {
-        this._breakpoint.disabled = !this._breakpoint.disabled;
-    }
-};
-
-WebInspector.BreakpointTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.css
deleted file mode 100644
index c7d40a1d2..000000000
--- a/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.css
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.navigation-bar .item.button {
-    width: 26px;
-}
-
-.navigation-bar .item.button.text-only {
-    width: auto;
-    padding: 0 10px;
-
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    font-family: "Lucida Grande", sans-serif;
-    font-size: 11px;
-    line-height: 20px;
-
-    -webkit-justify-content: center;
-}
-
-.navigation-bar .item.button > .glyph {
-    width: 100%;
-    height: 100%;
-
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-
-body.window-inactive .navigation-bar .item.button:not(.suppress-emboss) > .glyph {
-    opacity: 0.65;
-}
-
-.navigation-bar .item.button.disabled > .glyph {
-    opacity: 0.55 !important;
-}
-
-body.window-inactive .navigation-bar .item.button.disabled:not(.suppress-emboss) > .glyph {
-    opacity: 0.35 !important;
-}
-
-.navigation-bar .item.button.suppress-emboss > .glyph {
-    opacity: 0.7;
-}
-
-.navigation-bar .item.button.suppress-emboss:active > .glyph {
-    opacity: 1;
-}
-
-.navigation-bar .item.button.suppress-emboss.disabled > .glyph {
-    opacity: 0.3 !important;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js
deleted file mode 100644
index 35ad4ce0f..000000000
--- a/Source/WebInspectorUI/UserInterface/ButtonNavigationItem.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ButtonNavigationItem = function(identifier, toolTipOrLabel, image, imageWidth, imageHeight, suppressEmboss, role, label) {
-    WebInspector.NavigationItem.call(this, identifier);
-
-    console.assert(identifier);
-    console.assert(toolTipOrLabel);
-
-    this.toolTip = toolTipOrLabel;
-
-    this._element.addEventListener("click", this._mouseClicked.bind(this));
-    
-    this._element.setAttribute("role", role || "button");
-    
-    if (label) 
-        this._element.setAttribute("aria-label", label);
-
-    this._imageWidth = imageWidth || 16;
-    this._imageHeight = imageHeight || 16;
-    this._suppressEmboss = suppressEmboss || false;
-
-    if (suppressEmboss)
-        this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName);
-
-    if (image)
-        this.image = image;
-    else
-        this.label = toolTipOrLabel;
-};
-
-WebInspector.ButtonNavigationItem.StyleClassName = "button";
-WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
-WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName = "suppress-bezel";
-WebInspector.ButtonNavigationItem.SuppressEmbossStyleClassName = "suppress-emboss";
-WebInspector.ButtonNavigationItem.TextOnlyClassName = "text-only";
-
-WebInspector.ButtonNavigationItem.States = {};
-WebInspector.ButtonNavigationItem.States.Normal = "normal";
-WebInspector.ButtonNavigationItem.States.Active = "active";
-WebInspector.ButtonNavigationItem.States.Focus = "focus";
-WebInspector.ButtonNavigationItem.States.ActiveFocus = "active-focus";
-
-WebInspector.ButtonNavigationItem.Event = {
-    Clicked: "button-navigation-item-clicked"
-};
-
-WebInspector.ButtonNavigationItem.prototype = {
-    constructor: WebInspector.ButtonNavigationItem,
-
-    // Public
-
-    get toolTip()
-    {
-        return this._element.title;
-    },
-
-    set toolTip(newToolTip)
-    {
-        console.assert(newToolTip);
-        if (!newToolTip)
-            return;
-
-        this._element.title = newToolTip;
-    },
-
-    get label()
-    {
-        return this._element.textContent;
-    },
-
-    set label(newLabel)
-    {
-        this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
-        this._element.textContent = newLabel || "";
-        if (this.parentNavigationBar)
-            this.parentNavigationBar.updateLayout();
-    },
-
-    get image()
-    {
-        return this._image;
-    },
-
-    set image(newImage)
-    {
-        if (!newImage) {
-            this._element.removeChildren();
-            return;
-        }
-
-        this._element.removeChildren();
-        this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
-
-        this._image = newImage;
-
-        this._glyphElement = document.createElement("div");
-        this._glyphElement.className = "glyph";
-        this._element.appendChild(this._glyphElement);
-
-        this._updateImage();
-    },
-
-    get enabled()
-    {
-        return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
-    },
-
-    set enabled(flag)
-    {
-        if (flag)
-            this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
-        else
-            this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
-    },
-
-    get suppressBezel()
-    {
-        return this._element.classList.contains(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
-    },
-
-    set suppressBezel(flag)
-    {
-        if (flag)
-            this._element.classList.add(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.ButtonNavigationItem.SuppressBezelStyleClassName);
-    },
-
-    generateStyleText: function(parentSelector)
-    {
-        var classNames = this._classNames.join(".");
-
-        if (this._suppressEmboss)
-            var styleText = parentSelector + " ." + classNames + " > .glyph { background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
-        else {
-            // Default state.
-            var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
-
-            // Pressed state.
-            styleText += parentSelector + " ." + classNames + ":not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Active) + "); }\n";
-
-            // Focused state.
-            styleText += parentSelector + " ." + classNames + ":not(.disabled):focus > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
-        }
-
-        return styleText;
-    },
-
-    // Private
-
-    _additionalClassNames: [WebInspector.ButtonNavigationItem.StyleClassName],
-    _embossedImageStates: WebInspector.ButtonNavigationItem.States,
-    _imageCacheable: true,
-
-    _mouseClicked: function(event)
-    {
-        if (!this.enabled)
-            return;
-        this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
-    },
-
-    _canvasIdentifier: function(state)
-    {
-        console.assert(!this._suppressEmboss);
-        return "navigation-item-" + this._identifier + "-" + (state || WebInspector.ButtonNavigationItem.States.Normal);
-    },
-
-    _updateImage: function()
-    {
-        if (this._suppressEmboss)
-            this._glyphElement.style.backgroundImage = "url(" + this._image + ")";
-        else
-            this._generateImages();
-    },
-
-    _generateImages: function()
-    {
-        console.assert(!this._suppressEmboss);
-        if (this._suppressEmboss)
-            return;
-        generateEmbossedImages(this.image, this._imageWidth, this._imageHeight, this._embossedImageStates, this._canvasIdentifier.bind(this), !this._imageCacheable);
-    }
-};
-
-WebInspector.ButtonNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.css b/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.css
deleted file mode 100644
index 0e7a8f9d1..000000000
--- a/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.css
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.toolbar .item.button {
-    -webkit-align-items: center;
-    -webkit-justify-content: center;
-
-    padding: 0 6px;
-}
-
-.toolbar.icon-and-label-vertical .item.button {
-    -webkit-flex-direction: column;
-}
-
-.toolbar.icon-and-label-horizontal .item.button {
-    -webkit-flex-direction: row;
-}
-
-.toolbar .item.button > .glyph {
-    width: 32px;
-    height: 32px;
-
-    background-size: 100% 100% !important;
-
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-
-.toolbar.small-size .item.button > .glyph {
-    width: 24px;
-    height: 24px;
-}
-
-.toolbar.label-only .item.button > .glyph {
-    display: none;
-}
-
-.toolbar .item.button > .label {
-    font-size: 11px;
-    font-family: Lucida Grande, sans-serif;
-    text-align: center;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    color: rgb(60, 60, 60);
-}
-
-.toolbar.label-only .item.activate.button.activated > .label {
-    color: rgb(35, 125, 195);
-}
-
-.toolbar.icon-and-label-horizontal .item.button > .label {
-    margin-left: 4px;
-}
-
-.toolbar.icon-only .item.button > .label {
-    display: none;
-}
-
-body.window-inactive .toolbar .item.button {
-    opacity: 0.65;
-}
-
-.toolbar .item.button.disabled {
-    opacity: 0.55 !important;
-}
-
-body.window-inactive .toolbar .item.button.disabled {
-    opacity: 0.35 !important;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.js b/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.js
deleted file mode 100644
index ee2442e2f..000000000
--- a/Source/WebInspectorUI/UserInterface/ButtonToolbarItem.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ButtonToolbarItem = function(identifier, toolTip, label, image, suppressEmboss)
-{
-    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, 32, 32, suppressEmboss);
-
-    console.assert(label);
-
-    this._labelElement = document.createElement("div");
-    this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
-    this._element.appendChild(this._labelElement);
-
-    this.label = label;
-};
-
-WebInspector.ButtonToolbarItem.LabelStyleClassName = "label";
-
-WebInspector.ButtonToolbarItem.prototype = {
-    constructor: WebInspector.ButtonToolbarItem,
-
-    // Public
-
-    get label()
-    {
-        return this._labelElement.textContent;
-    },
-
-    set label(newLabel)
-    {
-        console.assert(newLabel);
-        if (!newLabel)
-            return;
-
-        this._labelElement.textContent = newLabel;
-    }
-};
-
-WebInspector.ButtonToolbarItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSColorPicker.css b/Source/WebInspectorUI/UserInterface/CSSColorPicker.css
deleted file mode 100644
index 1496ad192..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSColorPicker.css
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * Copyright (C) 2011 Brian Grinstead All rights reserved.
- * Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.colorpicker-container {
-    top: 0;
-    left: 0;
-    padding: 5px;
-    width: 212px;
-    z-index: 10;
-}
-
-.colorpicker-fill-parent {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.colorpicker-top {
-    position: relative;
-    width: 100%;
-    display: inline-block;
-}
-
-.colorpicker-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 160px;
-    border: 1px solid #D0D0D0;
-}
-
-.colorpicker-bottom span {
-    display: inline-block;
-}
-
-.colorpicker-text {
-    font-family: monospace;
-    font-size: 11px !important;
-}
-
-.colorpicker-color-text-value {
-    -webkit-user-select: text;
-    position: relative;
-    left: 3px;
-    top: -6px;
-    white-space: pre-wrap;
-}
-
-.colorpicker-hue {
-    position: absolute;
-    top: 0;
-    width: 30px;
-    right: 0;
-    bottom: 0;
-    -webkit-box-reflect: right -28px;
-}
-
-.colorpicker-fill {
-    /* Same as colorpicker-color width to force aspect ratio. */
-    margin-top: 160px;
-}
-
-.colorpicker-range-container {
-    position: relative;
-    padding-bottom: 5px;
-}
-
-.colorpicker-range-container * {
-    font-size: 11px;
-    vertical-align: middle;
-}
-
-.colorpicker-range-container label {
-    display: inline-block;
-    padding-right: 4px;
-}
-
-.colorpicker-range-container input {
-    margin: 3px 0 0 3px;
-    width: 137px;
-}
-
-.colorpicker-saturation {
-    background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0));
-}
-
-.colorpicker-value {
-    background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0));
-}
-
-.colorpicker-hue {
-    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-}
-
-.colorpicker-dragger {
-    border-radius: 5px;
-    height: 5px;
-    width: 5px;
-    border: 1px solid white;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: black;
-}
-
-.colorpicker-slider {
-    position: absolute;
-    top: 0;
-    cursor: pointer;
-    border: 1px solid black;
-    height: 4px;
-    left: -1px;
-    right: -1px;
-}
-
-.colorpicker-container .swatch {
-    width: 20px;
-    height:20px;
-    margin: 0;
-}
-
-.colorpicker-container .swatch-inner {
-    height: 100%;
-    width:  100%;
-    display: inline-block;
-    border: 1px solid rgba(128, 128, 128, 0.6); 
-}
diff --git a/Source/WebInspectorUI/UserInterface/CSSColorPicker.js b/Source/WebInspectorUI/UserInterface/CSSColorPicker.js
deleted file mode 100644
index 565595b76..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSColorPicker.js
+++ /dev/null
@@ -1,406 +0,0 @@
-/*
- * Copyright (C) 2011 Brian Grinstead All rights reserved.
- * Copyright (C) 2013 Matt Holden <jftholden@yahoo.com>
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-
-WebInspector.CSSColorPicker = function()
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = "colorpicker-container";
-
-    var topElement = this._element.createChild("div", "colorpicker-top");
-    topElement.createChild("div", "colorpicker-fill");
-
-    var topInnerElement = topElement.createChild("div", "colorpicker-top-inner colorpicker-fill-parent");
-    this._draggerElement = topInnerElement.createChild("div", "colorpicker-color");
-    this._dragHelperElement = this._draggerElement
-        .createChild("div", "colorpicker-saturation colorpicker-fill-parent")
-        .createChild("div", "colorpicker-value colorpicker-fill-parent")
-        .createChild("div", "colorpicker-dragger");
-
-    this._sliderElement = topInnerElement.createChild("div", "colorpicker-hue");
-    this._slideHelper = this._sliderElement.createChild("div", "colorpicker-slider");
-
-    var rangeContainer = this._element.createChild("div", "colorpicker-range-container");
-    var alphaLabel = rangeContainer.createChild("label", "colorpicker-text");
-    alphaLabel.textContent = WebInspector.UIString("Opacity:");
-
-    this._alphaElement = rangeContainer.createChild("input", "colorpicker-range");
-    this._alphaElement.setAttribute("type", "range");
-    this._alphaElement.setAttribute("min", "0");
-    this._alphaElement.setAttribute("max", "100");
-    this._alphaElement.addEventListener("change", alphaDrag.bind(this), false);
-
-    var displayContainer = this._element.createChild("div", "colorpicker-bottom");
-
-    var swatchElement = displayContainer.createChild("span", "swatch");
-    this._swatchInnerElement = swatchElement.createChild("span", "swatch-inner");
-    
-    swatchElement.addEventListener("click", colorSwatchClicked.bind(this), false);
-
-    this._displayElement = displayContainer.createChild("span", "colorpicker-text colorpicker-color-text-value");
-
-    makeDraggable(this._sliderElement, hueDrag.bind(this));
-    makeDraggable(this._draggerElement, colorDrag.bind(this), colorDragStart.bind(this));
-
-    function makeDraggable(element, onmove, onstart, onstop)
-    {
-        var doc = document;
-        var dragging;
-        var offset;
-        var scrollOffset;
-        var maxHeight;
-        var maxWidth;
-
-        function consume(e)
-        {
-            event.preventDefault();
-        }
-
-        function move(e)
-        {
-            if (!dragging || !onmove)
-                return;
-
-            var dragX = Math.max(0, Math.min(e.pageX - offset.left + scrollOffset.left, maxWidth));
-            var dragY = Math.max(0, Math.min(e.pageY - offset.top + scrollOffset.top, maxHeight));
-
-            onmove(element, dragX, dragY, e);
-        }
-
-        function start(e)
-        {
-            if (e.button !== 0 || e.ctrlKey)
-                return;
-
-            if (dragging)
-                return;
-
-            if (onstart)
-                onstart(element, e)
-
-            dragging = true;
-            maxHeight = element.clientHeight;
-            maxWidth = element.clientWidth;
-
-            scrollOffset = {left: 0, top: 0};
-            var boundingRect = element.getBoundingClientRect();
-            offset = {left: boundingRect.left, top: boundingRect.top};
-
-            doc.addEventListener("selectstart", consume, false);
-            doc.addEventListener("dragstart", consume, false);
-            doc.addEventListener("mousemove", move, false);
-            doc.addEventListener("mouseup", stop, false);
-
-            move(e);
-            consume(e);
-        }
-
-        function stop(e)
-        {
-            if (!dragging)
-                return;
-
-            doc.removeEventListener("selectstart", consume, false);
-            doc.removeEventListener("dragstart", consume, false);
-            doc.removeEventListener("mousemove", move, false);
-            doc.removeEventListener("mouseup", stop, false);
-
-            if (onstop)
-                onstop(element, e);
-
-            dragging = false;
-        }
-
-        element.addEventListener("mousedown", start, false);
-    }
-
-    function hueDrag(element, dragX, dragY)
-    {
-        this.hsv[0] = dragY / this.slideHeight;
-
-        this._updateDisplay(true);
-    }
-
-    var initialHelperOffset;
-
-    function colorDragStart(element, dragX, dragY)
-    {
-        initialHelperOffset = {x: this._dragHelperElement.offsetLeft, y: this._dragHelperElement.offsetTop};
-    }
-
-    function colorDrag(element, dragX, dragY, event)
-    {
-        if (event.shiftKey) {
-            if (Math.abs(dragX - initialHelperOffset.x) >= Math.abs(dragY - initialHelperOffset.y))
-                dragY = initialHelperOffset.y;
-            else
-                dragX = initialHelperOffset.x;
-        }
-
-        this.hsv[1] = dragX / this.dragWidth;
-        this.hsv[2] = (this.dragHeight - dragY) / this.dragHeight;
-
-        this._updateDisplay(true);
-    }
-
-    function alphaDrag()
-    {
-        this.hsv[3] = this._alphaElement.value / 100;
-
-        this._updateDisplay(true);
-    }
-
-    function colorSwatchClicked()
-    {
-        // By changing this value, the new color format
-        // will be propagated down to any listeners after the UI is updated.
-        this._originalFormat = this.color.nextFormat();
-        this._updateDisplay(true);
-    }
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSColorPicker);
-
-WebInspector.CSSColorPicker.Event = {
-    ColorChanged: "css-color-picker-color-changed"
-};
-
-WebInspector.CSSColorPicker.prototype = {
-    contructor: WebInspector.CSSColorPicker,
-
-    get element()
-    {
-        return this._element;
-    },
-
-    set color(color)
-    {
-        if (!this._originalFormat) {
-            this._originalFormat = color.format;
-            if (color.format === WebInspector.Color.Format.ShortHEX)
-                this._originalFormat = WebInspector.Color.Format.HEX;
-        }
-
-        var rgba = (color.rgba || color.rgb).slice(0);
-
-        if (rgba.length === 3)
-            rgba[3] = 1;
-
-        this.hsv = WebInspector.CSSColorPicker.rgbaToHSVA(rgba[0], rgba[1], rgba[2], rgba[3]);
-    },
-
-    get color()
-   {
-       var rgba = WebInspector.CSSColorPicker.hsvaToRGBA(this.hsv[0], this.hsv[1], this.hsv[2], this.hsv[3]);
-       var color;
-       if (rgba[3] === 1)
-           color = WebInspector.Color.fromRGB(rgba[0], rgba[1], rgba[2]);
-       else
-           color = WebInspector.Color.fromRGBA(rgba[0], rgba[1], rgba[2], rgba[3]);
-       var colorValue = color.toString(this.outputColorFormat);
-       if (!colorValue)
-           colorValue = color.toString(); // this.outputColorFormat can be invalid for current color (e.g. "nickname").
-       return new WebInspector.Color(colorValue);
-    },
-
-    get outputColorFormat()
-    {
-        var format = this._originalFormat;
-
-        if (this.hsv[3] === 1) {
-            // Simplify transparent formats, and don't allow ShortHex.
-            if (format === WebInspector.Color.Format.RGBA)
-                format = WebInspector.Color.Format.RGB;
-            else if (format === WebInspector.Color.Format.HSLA)
-                format = WebInspector.Color.Format.HSL;
-            else if (format === WebInspector.Color.Format.ShortHEX)
-                format = WebInspector.Color.Format.HEX;
-        } else {
-            // Everything except HSL(A) should be returned as RGBA if transparency is involved.
-            var printableTransparentFormats = [
-                WebInspector.Color.Format.HSLA,
-                WebInspector.Color.Format.RGBA
-            ];
-
-            if (printableTransparentFormats.indexOf(format) === -1)
-                format = WebInspector.Color.Format.RGBA;
-        }
-
-        return format;
-    },
-
-    get colorHueOnly()
-    {
-        var rgba = WebInspector.CSSColorPicker.hsvaToRGBA(this.hsv[0], 1, 1, 1);
-        return WebInspector.Color.fromRGBA(rgba[0], rgba[1], rgba[2], rgba[3]);
-    },
-
-    set displayText(text)
-    {
-        this._displayElement.textContent = text;
-    },
-
-    shown: function()
-    {
-        this.slideHeight = this._sliderElement.offsetHeight;
-        this.dragWidth = this._draggerElement.offsetWidth;
-        this.dragHeight = this._draggerElement.offsetHeight;
-        this._dragHelperElementHeight = this._dragHelperElement.offsetHeight / 2;
-        this.slideHelperHeight = this._slideHelper.offsetHeight / 2;
-        this._updateDisplay();
-    },
-
-    // Private
-
-    _updateHelperLocations: function()
-    {
-        var h = this.hsv[0];
-        var s = this.hsv[1];
-        var v = this.hsv[2];
-
-        // Where to show the little circle that displays your current selected color.
-        var dragX = s * this.dragWidth;
-        var dragY = this.dragHeight - (v * this.dragHeight);
-
-        dragX = Math.max(-this._dragHelperElementHeight,
-            Math.min(this.dragWidth - this._dragHelperElementHeight, dragX - this._dragHelperElementHeight));
-        dragY = Math.max(-this._dragHelperElementHeight,
-            Math.min(this.dragHeight - this._dragHelperElementHeight, dragY - this._dragHelperElementHeight));
-
-        this._dragHelperElement.positionAt(dragX, dragY);
-
-        // Where to show the bar that displays your current selected hue.
-        var slideY = (h * this.slideHeight) - this.slideHelperHeight;
-        this._slideHelper.style.top = slideY + "px";
-
-        this._alphaElement.value = this.hsv[3] * 100;
-    },
-
-    _updateDisplay: function(colorWasChanged)
-    {
-        this._updateHelperLocations();
-
-        var rgb = (this.color.rgba || this.color.rgb).slice(0);
-
-        if (rgb.length === 3)
-            rgb[3] = 1;
-
-        var rgbHueOnly = this.colorHueOnly.rgb;
-
-        var flatColor = "rgb(" + rgbHueOnly[0] + ", " + rgbHueOnly[1] + ", " + rgbHueOnly[2] + ")";
-        var fullColor = "rgba(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ", " + rgb[3] + ")";
-
-        this._draggerElement.style.backgroundColor = flatColor;
-        this._swatchInnerElement.style.backgroundColor = fullColor;
-
-        this._alphaElement.value = this.hsv[3] * 100;
-
-        var colorValue = this.color.toString(this.outputColorFormat);
-        if (!colorValue)
-            colorValue = this.color.toString(); // this.outputColorFormat can be invalid for current color (e.g. "nickname").
-
-        this.displayText = colorValue;
-
-        if (colorWasChanged)
-            this.dispatchEventToListeners(WebInspector.CSSColorPicker.Event.ColorChanged, {color: this.color});
-    }
-};
-
-WebInspector.CSSColorPicker.hsvaToRGBA = function(h, s, v, a)
-{
-    var r, g, b;
-
-    var i = Math.floor(h * 6);
-    var f = h * 6 - i;
-    var p = v * (1 - s);
-    var q = v * (1 - f * s);
-    var t = v * (1 - (1 - f) * s);
-
-    switch(i % 6) {
-    case 0:
-        r = v, g = t, b = p;
-        break;
-    case 1:
-        r = q, g = v, b = p;
-        break;
-    case 2:
-        r = p, g = v, b = t;
-        break;
-    case 3:
-        r = p, g = q, b = v;
-        break;
-    case 4:
-        r = t, g = p, b = v;
-        break;
-    case 5:
-        r = v, g = p, b = q;
-        break;
-    }
-
-    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a];
-};
-
-WebInspector.CSSColorPicker.rgbaToHSVA = function(r, g, b, a)
-{
-    r = r / 255;
-    g = g / 255;
-    b = b / 255;
-
-    var max = Math.max(r, g, b);
-    var min = Math.min(r, g, b);
-    var h;
-    var s;
-    var v = max;
-
-    var d = max - min;
-    s = max ? d / max : 0;
-
-    if(max === min) {
-        // Achromatic.
-        h = 0;
-    } else {
-        switch(max) {
-        case r:
-            h = (g - b) / d + (g < b ? 6 : 0);
-            break;
-        case g:
-            h = (b - r) / d + 2;
-            break;
-        case b:
-            h = (r - g) / d + 4;
-            break;
-        }
-        h /= 6;
-    }
-    return [h, s, v, a];
-};
-
-WebInspector.CSSColorPicker.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSCompletions.js b/Source/WebInspectorUI/UserInterface/CSSCompletions.js
deleted file mode 100644
index b2277669f..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSCompletions.js
+++ /dev/null
@@ -1,271 +0,0 @@
-/*
- * Copyright (C) 2010 Nikita Vasilyev. All rights reserved.
- * Copyright (C) 2010 Joseph Pecoraro. All rights reserved.
- * Copyright (C) 2010 Google Inc. All rights reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- */
-WebInspector.CSSCompletions = function(properties, acceptEmptyPrefix)
-{
-    this._values = [];
-    this._longhands = {};
-    this._shorthands = {};
-
-    for (var i = 0; i < properties.length; ++i) {
-        // COMPATIBILITY (iOS 6): This used to be an array of strings,
-        // now it contains objects with a 'name' property. Support both here.
-        var property = properties[i];
-        if (typeof property === "string") {
-            this._values.push(property);
-            continue;
-        }
-
-        var propertyName = property.name;
-        this._values.push(propertyName);
-
-        var longhands = property.longhands;
-        if (longhands) {
-            this._longhands[propertyName] = longhands;
-
-            for (var j = 0; j < longhands.length; ++j) {
-                var longhandName = longhands[j];
-
-                var shorthands = this._shorthands[longhandName];
-                if (!shorthands) {
-                    shorthands = [];
-                    this._shorthands[longhandName] = shorthands;
-                }
-
-                shorthands.push(propertyName);
-            }
-        }
-    }
-
-    this._values.sort();
-
-    this._acceptEmptyPrefix = acceptEmptyPrefix;
-}
-
-
-/**
- * @type {WebInspector.CSSCompletions}
- */
-WebInspector.CSSCompletions.cssNameCompletions = null;
-
-WebInspector.CSSCompletions.requestCSSNameCompletions = function()
-{
-    function propertyNamesCallback(error, names)
-    {
-        if (error)
-            return;
-
-        WebInspector.CSSCompletions.cssNameCompletions = new WebInspector.CSSCompletions(names, false);
-
-        var propertyNamesForCodeMirror = {};
-        var valueKeywordsForCodeMirror = {"inherit": true, "initial": true};
-        var colorKeywordsForCodeMirror = {};
-
-        function nameForCodeMirror(name)
-        {
-            // CodeMirror parses the vendor prefix separate from the property or keyword name,
-            // so we need to strip vendor prefixes from our names. Also strip function parenthesis.
-            return name.replace(/^-[^-]+-/, "").replace(/\(\)$/, "");
-        }
-
-        function collectPropertyNameForCodeMirror(propertyName)
-        {
-            // Properties can also be value keywords, like when used in a -webkit-transition.
-            // So we add them to both lists.
-            var codeMirrorPropertyName = nameForCodeMirror(propertyName);
-            propertyNamesForCodeMirror[codeMirrorPropertyName] = true;
-            valueKeywordsForCodeMirror[codeMirrorPropertyName] = true;
-        }
-
-        for (var i = 0; i < names.length; ++i) {
-            // COMPATIBILITY (iOS 6): This used to be an array of strings,
-            // now it contains objects with a 'name' property. Support both here.
-            var property = names[i];
-            if (typeof property === "string")
-                collectPropertyNameForCodeMirror(property);
-            else
-                collectPropertyNameForCodeMirror(property.name);
-        }
-
-        for (var propertyName in WebInspector.CSSKeywordCompletions._propertyKeywordMap) {
-            var keywords = WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName];
-            for (var i = 0; i < keywords.length; ++i) {
-                // Skip numbers, like the ones defined for font-weight.
-                if (!isNaN(Number(keywords[i])))
-                    continue;
-                valueKeywordsForCodeMirror[nameForCodeMirror(keywords[i])] = true;
-            }
-        }
-
-        WebInspector.CSSKeywordCompletions._colors.forEach(function(colorName) {
-            colorKeywordsForCodeMirror[nameForCodeMirror(colorName)] = true;
-        });
-
-        function updateCodeMirrorCSSMode(mimeType)
-        {
-            var modeSpec = CodeMirror.resolveMode(mimeType);
-
-            console.assert(modeSpec.propertyKeywords);
-            console.assert(modeSpec.valueKeywords);
-            console.assert(modeSpec.colorKeywords);
-
-            modeSpec.propertyKeywords = propertyNamesForCodeMirror;
-            modeSpec.valueKeywords = valueKeywordsForCodeMirror;
-            modeSpec.colorKeywords = colorKeywordsForCodeMirror;
-
-            CodeMirror.defineMIME(mimeType, modeSpec);
-        }
-
-        updateCodeMirrorCSSMode("text/css");
-        updateCodeMirrorCSSMode("text/x-scss");
-    }
-
-    CSSAgent.getSupportedCSSProperties(propertyNamesCallback);
-}
-
-WebInspector.CSSCompletions.prototype = {
-    get values()
-    {
-        return this._values;
-    },
-
-    startsWith: function(prefix)
-    {
-        var firstIndex = this._firstIndexOfPrefix(prefix);
-        if (firstIndex === -1)
-            return [];
-
-        var results = [];
-        while (firstIndex < this._values.length && this._values[firstIndex].startsWith(prefix))
-            results.push(this._values[firstIndex++]);
-        return results;
-    },
-
-    firstStartsWith: function(prefix)
-    {
-        var foundIndex = this._firstIndexOfPrefix(prefix);
-        return (foundIndex === -1 ? "" : this._values[foundIndex]);
-    },
-
-    _firstIndexOfPrefix: function(prefix)
-    {
-        if (!this._values.length)
-            return -1;
-        if (!prefix)
-            return this._acceptEmptyPrefix ? 0 : -1;
-
-        var maxIndex = this._values.length - 1;
-        var minIndex = 0;
-        var foundIndex;
-
-        do {
-            var middleIndex = (maxIndex + minIndex) >> 1;
-            if (this._values[middleIndex].startsWith(prefix)) {
-                foundIndex = middleIndex;
-                break;
-            }
-            if (this._values[middleIndex] < prefix)
-                minIndex = middleIndex + 1;
-            else
-                maxIndex = middleIndex - 1;
-        } while (minIndex <= maxIndex);
-
-        if (foundIndex === undefined)
-            return -1;
-
-        while (foundIndex && this._values[foundIndex - 1].startsWith(prefix))
-            foundIndex--;
-
-        return foundIndex;
-    },
-
-    keySet: function()
-    {
-        if (!this._keySet)
-            this._keySet = this._values.keySet();
-        return this._keySet;
-    },
-
-    next: function(str, prefix)
-    {
-        return this._closest(str, prefix, 1);
-    },
-
-    previous: function(str, prefix)
-    {
-        return this._closest(str, prefix, -1);
-    },
-
-    _closest: function(str, prefix, shift)
-    {
-        if (!str)
-            return "";
-
-        var index = this._values.indexOf(str);
-        if (index === -1)
-            return "";
-
-        if (!prefix) {
-            index = (index + this._values.length + shift) % this._values.length;
-            return this._values[index];
-        }
-
-        var propertiesWithPrefix = this.startsWith(prefix);
-        var j = propertiesWithPrefix.indexOf(str);
-        j = (j + propertiesWithPrefix.length + shift) % propertiesWithPrefix.length;
-        return propertiesWithPrefix[j];
-    },
-
-    isShorthandPropertyName: function(shorthand)
-    {
-        return shorthand in this._longhands;
-    },
-
-    isLonghandPropertyName: function(longhand)
-    {
-        return longhand in this._shorthands;
-    },
-
-    longhandsForShorthand: function(shorthand)
-    {
-        return this._longhands[shorthand] || [];
-    },
-
-    shorthandsForLonghand: function(longhand)
-    {
-        return this._shorthands[longhand] || [];
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/CSSKeywordCompletions.js b/Source/WebInspectorUI/UserInterface/CSSKeywordCompletions.js
deleted file mode 100644
index 5b705821a..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSKeywordCompletions.js
+++ /dev/null
@@ -1,908 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc. All rights reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSKeywordCompletions = {}
-
-WebInspector.CSSKeywordCompletions.forProperty = function(propertyName)
-{
-    var acceptedKeywords = ["initial"];
-    var isNotPrefixed = propertyName.charAt(0) !== "-";
-
-    if (propertyName in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName]);
-    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap["-webkit-" + propertyName]);
-
-    if (propertyName in WebInspector.CSSKeywordCompletions._colorAwareProperties)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
-    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._colorAwareProperties)
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
-
-    // FIXME: This doesn't necessarily make sense. Some non-inheritable properties allow "inherit".
-    if (propertyName in WebInspector.CSSKeywordCompletions.InheritedProperties)
-        acceptedKeywords.push("inherit");
-    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions.InheritedProperties)
-        acceptedKeywords.push("inherit");
-
-    if (acceptedKeywords.contains(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder)) {
-        acceptedKeywords.remove(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder);
-        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSCompletions.cssNameCompletions.values);
-    }
-
-    return new WebInspector.CSSCompletions(acceptedKeywords, true);
-}
-
-WebInspector.CSSKeywordCompletions.isColorAwareProperty = function(propertyName)
-{
-    return WebInspector.CSSKeywordCompletions._colorAwareProperties[propertyName] === true;
-}
-
-WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder = "__all-properties__";
-
-WebInspector.CSSKeywordCompletions.InheritedProperties = [
-    "azimuth", "border-collapse", "border-spacing", "caption-side", "clip-rule", "color", "color-interpolation",
-    "color-interpolation-filters", "color-rendering", "cursor", "direction", "elevation", "empty-cells", "fill",
-    "fill-opacity", "fill-rule", "font", "font-family", "font-size", "font-style", "font-variant", "font-weight",
-    "glyph-orientation-horizontal", "glyph-orientation-vertical", "image-rendering", "kerning", "letter-spacing",
-    "line-height", "list-style", "list-style-image", "list-style-position", "list-style-type", "marker", "marker-end",
-    "marker-mid", "marker-start", "orphans", "pitch", "pitch-range", "pointer-events", "quotes", "resize", "richness",
-    "shape-rendering", "speak", "speak-header", "speak-numeral", "speak-punctuation", "speech-rate", "stress", "stroke",
-    "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity",
-    "stroke-width", "tab-size", "text-align", "text-anchor", "text-decoration", "text-indent", "text-rendering",
-    "text-shadow", "text-transform", "visibility", "voice-family", "volume", "white-space", "widows", "word-break",
-    "word-spacing", "word-wrap", "writing-mode", "-webkit-aspect-ratio", "-webkit-border-horizontal-spacing",
-    "-webkit-border-vertical-spacing", "-webkit-box-direction", "-webkit-color-correction", "-webkit-font-feature-settings",
-    "-webkit-font-kerning", "-webkit-font-smoothing", "-webkit-font-variant-ligatures", "-webkit-highlight",
-    "-webkit-hyphenate-character", "-webkit-hyphenate-limit-after", "-webkit-hyphenate-limit-before",
-    "-webkit-hyphenate-limit-lines", "-webkit-hyphens", "-webkit-line-align", "-webkit-line-box-contain",
-    "-webkit-line-break", "-webkit-line-grid", "-webkit-line-snap", "-webkit-locale", "-webkit-nbsp-mode",
-    "-webkit-print-color-adjust", "-webkit-rtl-ordering", "-webkit-text-combine", "-webkit-text-decorations-in-effect",
-    "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-emphasis-position", "-webkit-text-emphasis-style",
-    "-webkit-text-fill-color", "-webkit-text-orientation", "-webkit-text-security", "-webkit-text-size-adjust",
-    "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width", "-webkit-user-modify",
-    "-webkit-user-select", "-webkit-writing-mode", "-webkit-cursor-visibility", "image-orientation", "image-resolution",
-    "overflow-wrap", "-webkit-text-align-last", "-webkit-text-justify", "-webkit-ruby-position", "-webkit-text-decoration-line",
-
-    // iOS Properties
-    "-webkit-overflow-scrolling", "-webkit-touch-callout", "-webkit-tap-highlight-color"
-].keySet();
-
-WebInspector.CSSKeywordCompletions._colors = [
-    "aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red",
-    "silver", "teal", "white", "yellow", "transparent", "currentcolor", "grey", "aliceblue", "antiquewhite",
-    "aquamarine", "azure", "beige", "bisque", "blanchedalmond", "blueviolet", "brown", "burlywood", "cadetblue",
-    "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan",
-    "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange",
-    "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey",
-    "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick",
-    "floralwhite", "forestgreen", "gainsboro", "ghostwhite", "gold", "goldenrod", "greenyellow", "honeydew", "hotpink",
-    "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
-    "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink",
-    "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow",
-    "limegreen", "linen", "magenta", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen",
-    "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream",
-    "mistyrose", "moccasin", "navajowhite", "oldlace", "olivedrab", "orangered", "orchid", "palegoldenrod", "palegreen",
-    "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "rosybrown",
-    "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "skyblue", "slateblue",
-    "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "thistle", "tomato", "turquoise", "violet",
-    "wheat", "whitesmoke", "yellowgreen", "rgb()", "rgba()", "hsl()", "hsla()"
-];
-
-WebInspector.CSSKeywordCompletions._colorAwareProperties = [
-    "background", "background-color", "background-image", "border", "border-color", "border-top", "border-right", "border-bottom",
-    "border-left", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "box-shadow", "color",
-    "fill", "outline", "outline-color", "stroke", "text-line-through", "text-line-through-color", "text-overline", "text-overline-color",
-    "text-shadow", "text-underline", "text-underline-color", "-webkit-box-shadow", "-webkit-column-rule", "-webkit-column-rule-color",
-    "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-fill-color", "-webkit-text-stroke", "-webkit-text-stroke-color",
-    "-webkit-text-decoration-color",
-
-    // iOS Properties
-    "-webkit-tap-highlight-color"
-].keySet();
-
-WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
-    "table-layout": [
-        "auto", "fixed"
-    ],
-    "visibility": [
-        "hidden", "visible", "collapse"
-    ],
-    "background-repeat": [
-        "repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"
-    ],
-    "text-underline": [
-        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
-    ],
-    "content": [
-        "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote", "attr()", "counter()", "counters()", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
-    ],
-    "list-style-image": [
-        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
-    ],
-    "clear": [
-        "none", "left", "right", "both"
-    ],
-    "stroke-linejoin": [
-        "round", "miter", "bevel"
-    ],
-    "baseline-shift": [
-        "baseline", "sub", "super"
-    ],
-    "border-bottom-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "margin-top-collapse": [
-        "collapse", "separate", "discard"
-    ],
-    "max-height": [
-        "none"
-    ],
-    "-webkit-box-orient": [
-        "horizontal", "vertical", "inline-axis", "block-axis"
-    ],
-    "font-stretch": [
-        "normal", "wider", "narrower", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
-        "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
-    ],
-    "-webkit-color-correction": [
-        "default", "srgb"
-    ],
-    "border-left-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-writing-mode": [
-        "lr", "rl", "tb", "lr-tb", "rl-tb", "tb-rl", "horizontal-tb", "vertical-rl", "vertical-lr", "horizontal-bt"
-    ],
-    "text-line-through-mode": [
-        "continuous", "skip-white-space"
-    ],
-    "text-overline-mode": [
-        "continuous", "skip-white-space"
-    ],
-    "text-underline-mode": [
-        "continuous", "skip-white-space"
-    ],
-    "text-line-through-style": [
-        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
-    ],
-    "text-overline-style": [
-        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
-    ],
-    "text-underline-style": [
-        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
-    ],
-    "border-collapse": [
-        "collapse", "separate"
-    ],
-    "border-top-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "outline-color": [
-        "invert", "-webkit-focus-ring-color"
-    ],
-    "outline-style": [
-        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double", "auto"
-    ],
-    "cursor": [
-        "none", "copy", "auto", "crosshair", "default", "pointer", "move", "vertical-text", "cell", "context-menu",
-        "alias", "progress", "no-drop", "not-allowed", "-webkit-zoom-in", "-webkit-zoom-out", "e-resize", "ne-resize",
-        "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "ew-resize", "ns-resize",
-        "nesw-resize", "nwse-resize", "col-resize", "row-resize", "text", "wait", "help", "all-scroll", "-webkit-grab",
-        "-webkit-grabbing", "url()", "-webkit-image-set()"
-    ],
-    "border-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "size": [
-        "a3", "a4", "a5", "b4", "b5", "landscape", "ledger", "legal", "letter", "portrait"
-    ],
-    "background-image": [
-        "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
-    ],
-    "background-size": [
-        "contain", "cover"
-    ],
-    "direction": [
-        "ltr", "rtl"
-    ],
-    "enable-background": [
-        "accumulate", "new"
-    ],
-    "float": [
-        "none", "left", "right"
-    ],
-    "overflow-x": [
-        "hidden", "auto", "visible", "overlay", "scroll", "marquee"
-    ],
-    "overflow-y": [
-        "hidden", "auto", "visible", "overlay", "scroll", "marquee", "-webkit-paged-x", "-webkit-paged-y"
-    ],
-    "overflow": [
-        "hidden", "auto", "visible", "overlay", "scroll", "marquee", "-webkit-paged-x", "-webkit-paged-y"
-    ],
-    "margin-bottom-collapse": [
-        "collapse",  "separate", "discard"
-    ],
-    "-webkit-box-reflect": [
-        "none", "left", "right", "above", "below"
-    ],
-    "text-rendering": [
-        "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"
-    ],
-    "text-align": [
-        "-webkit-auto", "left", "right", "center", "justify", "-webkit-left", "-webkit-right", "-webkit-center", "-webkit-match-parent", "start", "end"
-    ],
-    "list-style-position": [
-        "outside", "inside"
-    ],
-    "margin-bottom": [
-        "auto"
-    ],
-    "color-interpolation": [
-        "linearrgb"
-    ],
-    "background-origin": [
-        "border-box", "content-box", "padding-box"
-    ],
-    "word-wrap": [
-        "normal", "break-word"
-    ],
-    "font-weight": [
-        "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
-    ],
-    "margin-before-collapse": [
-        "collapse", "separate", "discard"
-    ],
-    "text-overline-width": [
-        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "text-transform": [
-        "none", "capitalize", "uppercase", "lowercase"
-    ],
-    "border-right-style": [
-        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
-    ],
-    "border-left-style": [
-        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
-    ],
-    "font-style": [
-        "italic", "oblique", "normal"
-    ],
-    "speak": [
-        "none", "normal", "spell-out", "digits", "literal-punctuation", "no-punctuation"
-    ],
-    "text-line-through": [
-        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave", "continuous",
-        "skip-white-space"
-    ],
-    "color-rendering": [
-        "auto", "optimizeSpeed", "optimizeQuality"
-    ],
-    "list-style-type": [
-        "none", "disc", "circle", "square", "decimal", "decimal-leading-zero", "arabic-indic", "binary", "bengali",
-        "cambodian", "khmer", "devanagari", "gujarati", "gurmukhi", "kannada", "lower-hexadecimal", "lao", "malayalam",
-        "mongolian", "myanmar", "octal", "oriya", "persian", "urdu", "telugu", "tibetan", "thai", "upper-hexadecimal",
-        "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "afar",
-        "ethiopic-halehame-aa-et", "ethiopic-halehame-aa-er", "amharic", "ethiopic-halehame-am-et", "amharic-abegede",
-        "ethiopic-abegede-am-et", "cjk-earthly-branch", "cjk-heavenly-stem", "ethiopic", "ethiopic-halehame-gez",
-        "ethiopic-abegede", "ethiopic-abegede-gez", "hangul-consonant", "hangul", "lower-norwegian", "oromo",
-        "ethiopic-halehame-om-et", "sidama", "ethiopic-halehame-sid-et", "somali", "ethiopic-halehame-so-et", "tigre",
-        "ethiopic-halehame-tig", "tigrinya-er", "ethiopic-halehame-ti-er", "tigrinya-er-abegede",
-        "ethiopic-abegede-ti-er", "tigrinya-et", "ethiopic-halehame-ti-et", "tigrinya-et-abegede",
-        "ethiopic-abegede-ti-et", "upper-greek", "upper-norwegian", "asterisks", "footnotes", "hebrew", "armenian",
-        "lower-armenian", "upper-armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha",
-        "katakana-iroha"
-    ],
-    "-webkit-text-combine": [
-        "none", "horizontal"
-    ],
-    "outline": [
-        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
-    ],
-    "font": [
-        "caption", "icon", "menu", "message-box", "small-caption", "-webkit-mini-control", "-webkit-small-control",
-        "-webkit-control", "status-bar", "italic", "oblique", "small-caps", "normal", "bold", "bolder", "lighter",
-        "100", "200", "300", "400", "500", "600", "700", "800", "900", "xx-small", "x-small", "small", "medium",
-        "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger", "serif", "sans-serif", "cursive",
-        "fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-webkit-system-font", "-apple-system-headline",
-        "-apple-system-body", "-apple-system-subheadline", "-apple-system-footnote", "-apple-system-caption1",
-        "-apple-system-caption2", "-apple-system-short-headline", "-apple-system-short-body",
-        "-apple-system-short-subheadline", "-apple-system-short-footnote", "-apple-system-short-caption1",
-        "-apple-system-tall-body"
-    ],
-    "dominant-baseline": [
-        "middle", "auto", "central", "text-before-edge", "text-after-edge", "ideographic", "alphabetic", "hanging",
-        "mathematical", "use-script", "no-change", "reset-size"
-    ],
-    "display": [
-        "none", "inline", "block", "list-item", "run-in", "compact", "inline-block", "table", "inline-table",
-        "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group",
-        "table-column", "table-cell", "table-caption", "-webkit-box", "-webkit-inline-box", "-wap-marquee",
-        "-webkit-flex", "-webkit-inline-flex", "-webkit-grid", "-webkit-inline-grid"
-    ],
-    "image-rendering": [
-        "auto", "optimizeSpeed", "optimizeQuality", "-webkit-crisp-edges", "-webkit-optimize-contrast"
-    ],
-    "alignment-baseline": [
-        "baseline", "middle", "auto", "before-edge", "after-edge", "central", "text-before-edge", "text-after-edge",
-        "ideographic", "alphabetic", "hanging", "mathematical"
-    ],
-    "outline-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "text-line-through-width": [
-        "normal", "medium", "auto", "thick", "thin"
-    ],
-    "box-align": [
-        "baseline", "center", "stretch", "start", "end"
-    ],
-    "box-shadow": [
-        "none"
-    ],
-    "text-shadow": [
-        "none"
-    ],
-    "-webkit-box-shadow": [
-        "none"
-    ],
-    "border-right-width": [
-        "medium", "thick", "thin"
-    ],
-    "border-top-style": [
-        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
-    ],
-    "line-height": [
-        "normal"
-    ],
-    "counter-increment": [
-        "none"
-    ],
-    "counter-reset": [
-        "none"
-    ],
-    "text-overflow": [
-        "clip", "ellipsis"
-    ],
-    "-webkit-box-direction": [
-        "normal", "reverse"
-    ],
-    "margin-after-collapse": [
-        "collapse", "separate", "discard"
-    ],
-    "page-break-after": [
-        "left", "right", "auto", "always", "avoid"
-    ],
-    "page-break-before": [
-        "left", "right", "auto", "always", "avoid"
-    ],
-    "page-break-inside": [
-        "auto", "avoid"
-    ],
-    "-webkit-column-break-after": [
-        "left", "right", "auto", "always", "avoid"
-    ],
-    "-webkit-column-break-before": [
-        "left", "right", "auto", "always", "avoid"
-    ],
-    "-webkit-column-break-inside": [
-        "auto", "avoid"
-    ],
-    "-webkit-hyphens": [
-        "none", "auto", "manual"
-    ],
-    "border-image": [
-        "repeat", "stretch", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
-    ],
-    "border-image-repeat": [
-        "repeat", "stretch", "space", "round"
-    ],
-    "-webkit-mask-box-image-repeat": [
-        "repeat", "stretch", "space", "round"
-    ],
-    "position": [
-        "absolute", "fixed", "relative", "static", "-webkit-sticky"
-    ],
-    "font-family": [
-        "serif", "sans-serif", "cursive", "fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-webkit-system-font"
-    ],
-    "text-overflow-mode": [
-        "clip", "ellipsis"
-    ],
-    "border-bottom-style": [
-        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
-    ],
-    "unicode-bidi": [
-        "normal", "bidi-override", "embed", "-webkit-plaintext", "-webkit-isolate", "-webkit-isolate-override"
-    ],
-    "clip-rule": [
-        "nonzero", "evenodd"
-    ],
-    "margin-left": [
-        "auto"
-    ],
-    "margin-top": [
-        "auto"
-    ],
-    "zoom": [
-        "normal", "document", "reset"
-    ],
-    "z-index": [
-        "auto"
-    ],
-    "width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "max-width": [
-        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "min-width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "max-height": [
-        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "min-height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-logical-width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-logical-height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-max-logical-width": [
-        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-min-logical-width": [
-        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-max-logical-height": [
-        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-min-logical-height": [
-        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "empty-cells": [
-        "hide", "show"
-    ],
-    "pointer-events": [
-        "none", "all", "auto", "visible", "visiblepainted", "visiblefill", "visiblestroke", "painted", "fill", "stroke"
-    ],
-    "letter-spacing": [
-        "normal", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "word-spacing": [
-        "normal", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "background-clip": [
-        "border-box", "content-box", "padding-box"
-    ],
-    "-webkit-font-kerning": [
-        "auto", "normal", "none"
-    ],
-    "-webkit-font-smoothing": [
-        "none", "auto", "antialiased", "subpixel-antialiased"
-    ],
-    "-webkit-hyphens": [
-        "none", "manual", "auto"
-    ],
-    "border": [
-        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
-    ],
-    "font-size": [
-        "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller",
-        "larger"
-    ],
-    "font-variant": [
-        "small-caps", "normal"
-    ],
-    "vertical-align": [
-        "baseline", "middle", "sub", "super", "text-top", "text-bottom", "top", "bottom", "-webkit-baseline-middle"
-    ],
-    "white-space": [
-        "normal", "nowrap", "pre", "pre-line", "pre-wrap"
-    ],
-    "word-break": [
-        "normal", "break-all", "break-word"
-    ],
-    "text-underline-width": [
-        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "text-indent": [
-        "-webkit-each-line", "-webkit-hanging"
-    ],
-    "-webkit-box-lines": [
-        "single", "multiple"
-    ],
-    "clip": [
-        "auto", "rect()"
-    ],
-    "clip-path": [
-        "none", "url()", "rectangle()", "circle()", "ellipse()", "polygon()", "inset-rectangle()"
-    ],
-    "orphans": [
-        "auto"
-    ],
-    "widows": [
-        "auto"
-    ],
-    "margin": [
-        "auto"
-    ],
-    "page": [
-        "auto"
-    ],
-    "-webkit-marquee-increment": [
-        "small", "large", "medium"
-    ],
-    "-webkit-marquee-direction": [
-        "left", "right", "auto", "reverse", "forwards", "backwards", "ahead", "up", "down"
-    ],
-    "-webkit-marquee-style": [
-        "none", "scroll", "slide", "alternate"
-    ],
-    "-webkit-marquee-repetition": [
-        "infinite"
-    ],
-    "-webkit-marquee-speed": [
-        "normal", "slow", "fast"
-    ],
-    "margin-right": [
-        "auto"
-    ],
-    "marquee-speed": [
-        "normal", "slow", "fast"
-    ],
-    "-webkit-text-emphasis": [
-        "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
-    ],
-    "-webkit-text-emphasis-style": [
-        "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
-    ],
-    "-webkit-text-emphasis-position": [
-        "over", "under"
-    ],
-    "-webkit-transform": [
-        "none",
-        "scale()", "scaleX()", "scaleY()", "scale3d()", "rotate()", "rotateX()", "rotateY()", "rotateZ()", "rotate3d()", "skew()", "skewX()", "skewY()",
-        "translate()", "translateX()", "translateY()", "translateZ()", "translate3d()", "matrix()", "matrix3d()", "perspective()"
-    ],
-    "-webkit-cursor-visibility": [
-        "auto", "auto-hide"
-    ],
-    "text-decoration": [
-        "none", "underline", "overline", "line-through", "blink"
-    ],
-    "-webkit-text-decorations-in-effect": [
-        "none", "underline", "overline", "line-through", "blink",
-    ],
-    "-webkit-text-decoration-line": [
-        "none", "underline", "overline", "line-through", "blink",
-    ],
-    "-webkit-text-decoration-style": [
-        "solid", "double", "dotted", "dashed", "wavy"
-    ],
-    "-webkit-text-underline-position": [
-        "auto", "alphabetic", "under"
-    ],
-    "image-resolution": [
-        "from-image", "snap"
-    ],
-    "-webkit-blend-mode": [
-        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity",
-    ],
-    "-webkit-background-blend-mode": [
-        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity",
-    ],
-    "mix": [
-        "auto",
-        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity",
-        "clear", "copy", "destination", "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "xor"
-    ],
-    "geometry": [
-        "detached", "attached", "grid()"
-    ],
-    "overflow-wrap": [
-        "normal", "break-word"
-    ],
-    "transition": [
-        "none", "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "all", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
-    ],
-    "transition-timing-function": [
-        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
-    ],
-    "transition-property": [
-        "all", "none", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
-    ],
-    "-webkit-column-progression": [
-        "normal", "reverse"
-    ],
-    "-webkit-box-decoration-break": [
-        "slice", "clone"
-    ],
-    "-webkit-align-content": [
-        "flex-start", "flex-end", "center", "space-between", "space-around", "stretch"
-    ],
-    "-webkit-align-items": [
-        "flex-start", "flex-end", "center", "baseline", "stretch"
-    ],
-    "-webkit-align-self": [
-        "auto", "flex-start", "flex-end", "center", "baseline", "stretch"
-    ],
-    "-webkit-justify-content": [
-        "flex-start", "flex-end", "center", "space-between", "space-around"
-    ],
-    "-webkit-flex-direction": [
-        "row", "row-reverse", "column", "column-reverse"
-    ],
-    "-webkit-flex-wrap": [
-        "nowrap", "wrap", "wrap-reverse"
-    ],
-    "-webkit-flex-flow": [
-        "row", "row-reverse", "column", "column-reverse",
-        "nowrap", "wrap", "wrap-reverse"
-    ],
-    "-webkit-flex": [
-        "none"
-    ],
-    "-webkit-flex-basis": [
-        "auto"
-    ],
-    "-webkit-grid-after": [
-        "auto"
-    ],
-    "-webkit-grid-before": [
-        "auto"
-    ],
-    "-webkit-grid-end": [
-        "auto"
-    ],
-    "-webkit-grid-start": [
-        "auto"
-    ],
-    "-webkit-grid-auto-flow": [
-        "none", "rows", "columns"
-    ],
-    "-webkit-grid-column": [
-        "auto"
-    ],
-    "-webkit-grid-row": [
-        "auto"
-    ],
-    "-webkit-grid-columns": [
-        "auto", "-webkit-max-content", "-webkit-min-content"
-    ],
-    "-webkit-grid-rows": [
-        "auto", "-webkit-max-content", "-webkit-min-content"
-    ],
-    "-webkit-ruby-position": [
-        "after", "before"
-    ],
-    "-webkit-text-align-last": [
-        "auto", "start", "end", "left", "right", "center", "justify"
-    ],
-    "-webkit-text-justify": [
-        "auto", "none", "inter-word", "inter-ideograph", "inter-cluster", "distribute", "kashida"
-    ],
-    "max-zoom": [
-        "auto"
-    ],
-    "min-zoom": [
-        "auto"
-    ],
-    "orientation": [
-        "auto", "portait", "landscape"
-    ],
-    "user-zoom": [
-        "zoom", "fixed"
-    ],
-    "-webkit-app-region": [
-        "drag", "no-drag"
-    ],
-    "-webkit-line-break": [
-        "auto", "loose", "normal", "strict", "after-white-space"
-    ],
-    "-webkit-background-composite": [
-        "clear", "copy", "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "xor", "plus-darker", "plus-lighter"
-    ],
-    "-webkit-mask-composite": [
-        "clear", "copy", "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "xor", "plus-darker", "plus-lighter"
-    ],
-    "-webkit-animation-direction": [
-        "normal", "alternate", "reverse", "alternate-reverse"
-    ],
-    "-webkit-animation-fill-mode": [
-        "none", "forwards", "backwards", "both"
-    ],
-    "-webkit-animation-iteration-count": [
-        "infinite"
-    ],
-    "-webkit-animation-play-state": [
-        "paused", "running"
-    ],
-    "-webkit-animation-timing-function": [
-        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
-    ],
-    "-webkit-column-span": [
-        "all", "none", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-region-break-after": [
-        "auto", "always", "avoid", "left", "right"
-    ],
-    "-webkit-region-break-before": [
-        "auto", "always", "avoid", "left", "right"
-    ],
-    "-webkit-region-break-inside": [
-        "auto", "avoid"
-    ],
-    "-webkit-region-overflow": [
-        "auto", "break"
-    ],
-    "-webkit-wrap-flow": [
-        "auto", "both", "start", "end", "maximum", "clear"
-    ],
-    "-webkit-wrap-through": [
-        "wrap", "none"
-    ],
-    "-webkit-backface-visibility": [
-        "visible", "hidden"
-    ],
-    "resize": [
-        "none", "both", "horizontal", "vertical", "auto"
-    ],
-    "caption-side": [
-        "top", "bottom", "left", "right"
-    ],
-    "box-sizing": [
-        "border-box", "content-box"
-    ],
-    "-webkit-border-fit": [
-        "border", "lines"
-    ],
-    "-webkit-line-align": [
-        "none", "edges"
-    ],
-    "-webkit-line-snap": [
-        "none", "baseline", "contain"
-    ],
-    "-webkit-nbsp-mode": [
-        "normal", "space"
-    ],
-    "-webkit-print-color-adjust": [
-        "exact", "economy"
-    ],
-    "-webkit-rtl-ordering": [
-        "logical", "visual"
-    ],
-    "-webkit-text-security": [
-        "disc", "circle", "square", "none"
-    ],
-    "-webkit-transform-style": [
-        "flat", "preserve-3d"
-    ],
-    "-webkit-user-drag": [
-        "auto", "none", "element"
-    ],
-    "-webkit-user-modify": [
-        "read-only", "read-write", "read-write-plaintext-only"
-    ],
-    "-webkit-text-stroke-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-border-start-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-border-end-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-border-before-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-border-after-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-column-rule-width": [
-        "medium", "thick", "thin", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-aspect-ratio": [
-        "none"
-    ],
-    "-webkit-filter": [
-        "none", "grayscale()", "sepia()", "saturate()", "hue-rotate()", "invert()", "opacity()", "brightness()", "contrast()", "blur()", "drop-shadow()", "custom()"
-    ],
-    "-webkit-perspective": [
-        "none"
-    ],
-    "-webkit-column-count": [
-        "auto", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-column-gap": [
-        "normal", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-column-axis": [
-        "horizontal", "vertical", "auto"
-    ],
-    "-webkit-column-width": [
-        "auto", "calc()", "-webkit-calc()", "-webkit-min()", "-webkit-max()"
-    ],
-    "-webkit-highlight": [
-        "none"
-    ],
-    "-webkit-hyphenate-character": [
-        "none"
-    ],
-    "-webkit-hyphenate-limit-after": [
-        "auto"
-    ],
-    "-webkit-hyphenate-limit-before": [
-        "auto"
-    ],
-    "-webkit-hyphenate-limit-lines": [
-        "no-limit"
-    ],
-    "-webkit-line-grid": [
-        "none"
-    ],
-    "-webkit-locale": [
-        "auto"
-    ],
-    "-webkit-text-orientation": [
-        "sideways", "sideways-right", "vertical-right", "upright"
-    ],
-    "-webkit-line-box-contain": [
-        "block", "inline", "font", "glyphs", "replaced", "inline-box", "none", "initial"
-    ],
-    "-webkit-font-feature-settings": [
-        "normal"
-    ],
-    "-webkit-font-variant-ligatures": [
-        "normal", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", "historical-ligatures", "no-historical-ligatures"
-    ],
-    /*
-    "-webkit-appearance": [
-        "none", "checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "default-button", "inner-spin-button", "-webkit-input-speech-button", "listbox", "listitem", "media-enter-fullscreen-button", "media-exit-fullscreen-button", "media-fullscreen-volume-slider", "media-fullscreen-volume-slider-thumb", "media-mute-button", "media-play-button", "media-overlay-play-button", "media-seek-back-button", "media-seek-forward-button", "media-rewind-button", "media-return-to-realtime-button", "media-toggle-closed-captions-button", "media-slider", "media-sliderthumb", "media-volume-slider-container", "media-volume-slider", "media-volume-sliderthumb", "media-volume-slider-mute-button", "media-controls-background", "media-controls-fullscreen-background", "media-current-time-display", "media-time-remaining-display", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "meter", "progress-bar", "progress-bar-value", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "snapshotted-plugin-overlay", "textfield", "relevancy-level-indicator", "continuous-capacity-level-indicator", "discrete-capacity-level-indicator", "rating-level-indicator", "textarea"
-    ],
-    */
-
-    // iOS Properties
-    "-webkit-text-size-adjust": [
-        "none", "auto"
-    ],
-    "-webkit-touch-callout": [
-        "default", "none"
-    ],
-    "-webkit-overflow-scrolling": [
-        "auto", "touch"
-    ]
-}
diff --git a/Source/WebInspectorUI/UserInterface/CSSMedia.js b/Source/WebInspectorUI/UserInterface/CSSMedia.js
deleted file mode 100644
index 6e4a4eb89..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSMedia.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSMedia = function(type, text, sourceCodeLocation)
-{
-    WebInspector.Object.call(this);
-
-    this._type = type || null;
-    this._text = text || "";
-    this._sourceCodeLocation = sourceCodeLocation || null;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSMedia);
-
-WebInspector.CSSMedia.Type = {
-    MediaRule: "css-media-type-media-rule",
-    ImportRule: "css-media-type-import-rule",
-    LinkedStyleSheet: "css-media-type-linked-stylesheet",
-    InlineStyleSheet: "css-media-type-inline-stylesheet"
-};
-
-WebInspector.CSSMedia.prototype = {
-    constructor: WebInspector.CSSMedia,
-
-    // Public
-
-    get type()
-    {
-        return this._type;
-    },
-
-    get text()
-    {
-        return this._text;
-    },
-
-    get sourceCodeLocation()
-    {
-        return this._sourceCodeLocation;
-    }
-};
-
-WebInspector.CSSMedia.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSObserver.js b/Source/WebInspectorUI/UserInterface/CSSObserver.js
deleted file mode 100644
index cd066d113..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSObserver.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.CSSObserver.prototype = {
-    constructor: WebInspector.CSSObserver,
-
-    // Events defined by the "CSS" domain (see WebCore/inspector/Inspector.json).
-
-    mediaQueryResultChanged: function()
-    {
-        WebInspector.cssStyleManager.mediaQueryResultChanged();
-    },
-
-    styleSheetChanged: function(styleSheetId)
-    {
-        WebInspector.cssStyleManager.styleSheetChanged(styleSheetId);
-    },
-
-    styleSheetAdded: function(header)
-    {
-        // FIXME: Not implemented. <rdar://problem/13213680>
-    },
-
-    styleSheetRemoved: function(header)
-    {
-        // FIXME: Not implemented. <rdar://problem/13213680>
-    },
-
-    namedFlowCreated: function(namedFlow)
-    {
-        // FIXME: Not implemented.
-    },
-
-    namedFlowRemoved: function(documentNodeId, flowName)
-    {
-        // FIXME: Not implemented.
-    },
-
-    regionLayoutUpdated: function(namedFlow)
-    {
-        // FIXME: Not implemented.
-    }
-};
-
-WebInspector.CSSObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSProperty.js b/Source/WebInspectorUI/UserInterface/CSSProperty.js
deleted file mode 100644
index fefb4ee8f..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSProperty.js
+++ /dev/null
@@ -1,454 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSProperty = function(index, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange)
-{
-    WebInspector.Object.call(this);
-
-    this._ownerStyle = null;
-    this._index = index;
-
-    this.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange, true);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSProperty);
-
-WebInspector.CSSProperty.Event = {
-    Changed: "css-property-changed",
-    OverriddenStatusChanged: "css-property-overridden-status-changed"
-};
-
-WebInspector.CSSProperty.prototype = {
-    constructor: WebInspector.CSSProperty,
-
-    // Public
-
-    get ownerStyle()
-    {
-        return this._ownerStyle;
-    },
-
-    set ownerStyle(ownerStyle)
-    {
-        this._ownerStyle = ownerStyle || null;
-    },
-
-    get index()
-    {
-        return this._index;
-    },
-
-    set index(index)
-    {
-        this._index = index;
-    },
-
-    update: function(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange, dontFireEvents)
-    {
-        text = text || "";
-        name = name || "";
-        value = value || "";
-        priority = priority || "";
-        enabled = enabled || false;
-        overridden = overridden || false;
-        implicit = implicit || false;
-        anonymous = anonymous || false;
-        valid = valid || false;
-
-        var changed = false;
-
-        if (!dontFireEvents) {
-            changed = this._name !== name || this._value !== value || this._priority !== priority ||
-                this._enabled !== enabled || this._implicit !== implicit || this._anonymous !== anonymous || this._valid !== valid;
-        }
-
-        // Use the setter for overridden if we want to fire events since the
-        // OverriddenStatusChanged event coalesces changes before it fires.
-        if (!dontFireEvents)
-            this.overridden = overridden;
-        else
-            this._overridden = overridden;
-
-        this._text = text;
-        this._name = name;
-        this._value = value;
-        this._priority = priority;
-        this._enabled = enabled;
-        this._implicit = implicit;
-        this._anonymous = anonymous;
-        this._inherited = name in WebInspector.CSSKeywordCompletions.InheritedProperties;
-        this._valid = valid;
-        this._styleSheetTextRange = styleSheetTextRange || null;
-
-        if (styleDeclarationTextRange)
-            this._styleDeclarationTextRange = styleDeclarationTextRange;
-        else
-            delete this._styleDeclarationTextRange;
-
-        this._relatedShorthandProperty = null;
-        this._relatedLonghandProperties = [];
-
-        delete this._canonicalName;
-        delete this._hasOtherVendorNameOrKeyword;
-
-        if (!this._updatePropertySoonTimeout) {
-            delete this._pendingName;
-            delete this._pendingValue;
-            delete this._pendingPriority;
-        }
-
-        if (changed)
-            this.dispatchEventToListeners(WebInspector.CSSProperty.Event.Changed);
-    },
-
-    get synthesizedText()
-    {
-        var name = this.name;
-        if (!name)
-            return "";
-
-        var priority = this.priority;
-        return name + ": " + this.value.trim() + (priority ? " !" + priority : "") + ";";
-    },
-
-    get text()
-    {
-        return this._text || this.synthesizedText;
-    },
-
-    set text(text)
-    {
-        if (!this._ownerStyle || !this._ownerStyle.editable)
-            return;
-
-        if (this._text === text)
-            return;
-
-        if (isNaN(this._index)) {
-            this._text = text || "";
-
-            // Clear the name, value and priority since they might not match the text now.
-            this._name = "";
-            this._value = "";
-            this._priority = "";
-
-            // Ditto for the canonical and pending properties.
-            delete this._canonicalName;
-            delete this._pendingName;
-            delete this._pendingValue;
-            delete this._pendingPriority;
-
-            return;
-        }
-
-        this._cancelPendingUpdate();
-        this._ownerStyle.nodeStyles.changePropertyText(this, text);
-    },
-
-    get name()
-    {
-        if (isNaN(this._index))
-            return this._pendingName || this._name;
-        return this._name;
-    },
-
-    set name(name)
-    {
-        if (!this._ownerStyle || !this._ownerStyle.editable)
-            return;
-
-        if (this._name === name)
-            return;
-
-        if (isNaN(this._index)) {
-            this._name = name;
-            this._text = "";
-
-            delete this._canonicalName;
-        } else {
-            this._pendingName = name;
-            this._updatePropertySoon();
-        }
-    },
-
-    get canonicalName()
-    {
-        if (this._canonicalName)
-            return this._canonicalName;
-
-        this._canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(this.name);
-
-        return this._canonicalName;
-    },
-
-    get value()
-    {
-        if (isNaN(this._index))
-            return this._pendingValue || this._value;
-        return this._value;
-    },
-
-    set value(value)
-    {
-        if (!this._ownerStyle || !this._ownerStyle.editable)
-            return;
-
-        if (this._value === value)
-            return;
-
-        if (isNaN(this._index)) {
-            this._value = value;
-            this._text = "";
-        } else {
-            this._pendingValue = value;
-            this._updatePropertySoon();
-        }
-    },
-
-    get important()
-    {
-        return this.priority === "important";
-    },
-
-    set important(important)
-    {
-        this.priority = important ? "important" : "";
-    },
-
-    get priority()
-    {
-        if (isNaN(this._index))
-            return this._pendingPriority || this._priority;
-        return this._priority;
-    },
-
-    set priority(priority)
-    {
-        if (!this._ownerStyle || !this._ownerStyle.editable)
-            return;
-
-        if (this._priority === priority)
-            return;
-
-        if (isNaN(this._index)) {
-            this._priority = priority;
-            this._text = "";
-        } else {
-            this._pendingPriority = priority;
-            this._updatePropertySoon();
-        }
-    },
-
-    get enabled()
-    {
-        return this._enabled && this._ownerStyle && (!isNaN(this._index) || this._ownerStyle.type === WebInspector.CSSStyleDeclaration.Type.Computed);
-    },
-
-    set enabled(enabled)
-    {
-        if (!this._ownerStyle || !this._ownerStyle.editable)
-            return;
-
-        this._ownerStyle.nodeStyles.changePropertyEnabledState(this, enabled);
-    },
-
-    get overridden()
-    {
-        return this._overridden;
-    },
-
-    set overridden(overridden)
-    {
-        overridden = overridden || false;
-
-        if (this._overridden === overridden)
-            return;
-
-        var previousOverridden = this._overridden;
-
-        this._overridden = overridden;
-
-        if (this._overriddenStatusChangedTimeout)
-            return;
-
-        function delayed()
-        {
-            delete this._overriddenStatusChangedTimeout;
-
-            if (this._overridden === previousOverridden)
-                return;
-
-            this.dispatchEventToListeners(WebInspector.CSSProperty.Event.OverriddenStatusChanged);
-        }
-
-        this._overriddenStatusChangedTimeout = setTimeout(delayed.bind(this), 0);
-    },
-
-    get implicit()
-    {
-        return this._implicit;
-    },
-
-    get anonymous()
-    {
-        return this._anonymous;
-    },
-
-    get inherited()
-    {
-        return this._inherited;
-    },
-
-    get valid()
-    {
-        return this._valid;
-    },
-
-    get styleSheetTextRange()
-    {
-        return this._styleSheetTextRange;
-    },
-
-    get styleDeclarationTextRange()
-    {
-        if ("_styleDeclarationTextRange" in this)
-            return this._styleDeclarationTextRange;
-
-        if (!this._ownerStyle || !this._styleSheetTextRange)
-            return null;
-
-        var styleTextRange = this._ownerStyle.styleSheetTextRange;
-        if (!styleTextRange)
-            return null;
-
-        var startLine = this._styleSheetTextRange.startLine - styleTextRange.startLine;
-        var endLine = this._styleSheetTextRange.endLine - styleTextRange.startLine;
-
-        var startColumn = this._styleSheetTextRange.startColumn;
-        if (!startLine)
-            startColumn -= styleTextRange.startColumn;
-
-        var endColumn = this._styleSheetTextRange.endColumn;
-        if (!endLine)
-            endColumn -= styleTextRange.startColumn;
-
-        this._styleDeclarationTextRange = new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
-
-        return this._styleDeclarationTextRange;
-    },
-
-    get relatedShorthandProperty()
-    {
-        return this._relatedShorthandProperty;
-    },
-
-    set relatedShorthandProperty(property)
-    {
-        this._relatedShorthandProperty = property || null;
-    },
-
-    get relatedLonghandProperties()
-    {
-        return this._relatedLonghandProperties;
-    },
-
-    addRelatedLonghandProperty: function(property)
-    {
-        this._relatedLonghandProperties.push(property);
-    },
-
-    clearRelatedLonghandProperties: function(property)
-    {
-        this._relatedLonghandProperties = [];
-    },
-
-    hasOtherVendorNameOrKeyword: function()
-    {
-        if ("_hasOtherVendorNameOrKeyword" in this)
-            return this._hasOtherVendorNameOrKeyword;
-
-        this._hasOtherVendorNameOrKeyword = WebInspector.cssStyleManager.propertyNameHasOtherVendorPrefix(this.name) || WebInspector.cssStyleManager.propertyValueHasOtherVendorKeyword(this.value);
-
-        return this._hasOtherVendorNameOrKeyword;
-    },
-
-    add: function()
-    {
-        // We can only add if the index is NaN. Return early otherwise.
-        if (!this._ownerStyle || !this._ownerStyle.editable || !isNaN(this._index))
-            return;
-
-        this._cancelPendingUpdate();
-        this._ownerStyle.addProperty(this);
-    },
-
-    remove: function()
-    {
-        // We can only remove if the index is not NaN. Return early otherwise.
-        if (!this._ownerStyle || !this._ownerStyle.editable || isNaN(this._index))
-            return;
-
-        this._cancelPendingUpdate();
-        this._ownerStyle.removeProperty(this);
-    },
-
-    // Private
-
-    _updatePropertySoon: function()
-    {
-        if (!this._ownerStyle || isNaN(this._index) || this._updatePropertySoonTimeout)
-            return;
-
-        function performUpdate()
-        {
-            delete this._updatePropertySoonTimeout;
-
-            if (!this._ownerStyle || isNaN(this._index))
-                return;
-
-            var name = "_pendingName" in this ? this._pendingName : this._name;
-            var value = "_pendingValue" in this ? this._pendingValue : this._value;
-            var priority = "_pendingPriority" in this ? this._pendingPriority : this._priority;
-
-            delete this._pendingName;
-            delete this._pendingValue;
-            delete this._pendingPriority;
-
-            this._ownerStyle.nodeStyles.changeProperty(this, name, value, priority);
-        }
-
-        this._updatePropertySoonTimeout = setTimeout(performUpdate.bind(this), 0);
-    },
-
-    _cancelPendingUpdate: function()
-    {
-        if (!this._updatePropertySoonTimeout)
-            return;
-        clearTimeout(this._updatePropertySoonTimeout);
-        delete this._updatePropertySoonTimeout;
-    }
-};
-
-WebInspector.CSSProperty.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSRule.js b/Source/WebInspectorUI/UserInterface/CSSRule.js
deleted file mode 100644
index 8866cb012..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSRule.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSRule = function(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(nodeStyles);
-    this._nodeStyles = nodeStyles;
-
-    this._ownerStyleSheet = ownerStyleSheet || null;
-    this._id = id || null;
-    this._type = type || null;
-
-    this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, true);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSRule);
-
-WebInspector.CSSRule.Event = {
-    Changed: "css-rule-changed"
-};
-
-WebInspector.CSSRule.Type = {
-    Author: "css-rule-type-author",
-    User: "css-rule-type-user",
-    UserAgent: "css-rule-type-user-agent",
-    Inspector: "css-rule-type-inspector"
-};
-
-WebInspector.CSSRule.prototype = {
-    constructor: WebInspector.CSSRule,
-
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get ownerStyleSheet()
-    {
-        return this._ownerStyleSheet;
-    },
-
-    get editable()
-    {
-        return !!this._id && (this._type === WebInspector.CSSRule.Type.Author || this._type === WebInspector.CSSRule.Type.Inspector);
-    },
-
-    update: function(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, dontFireEvents)
-    {
-        sourceCodeLocation = sourceCodeLocation || null;
-        selectorText = selectorText || "";
-        selectors = selectors || [];
-        matchedSelectorIndices = matchedSelectorIndices || [];
-        style = style || null;
-        mediaList = mediaList || [];
-
-        var changed = false;
-        if (!dontFireEvents) {
-            changed = this._selectorText !== selectorText || !Object.shallowEqual(this._selectors, selectors) ||
-                !Object.shallowEqual(this._matchedSelectorIndices, matchedSelectorIndices) || this._style !== style ||
-                !!this._sourceCodeLocation !== !!sourceCodeLocation || this._mediaList.length !== mediaList.length;
-            // FIXME: Look for differences in the media list arrays.
-        }
-
-        if (this._style)
-            this._style.ownerRule = null;
-
-        this._sourceCodeLocation = sourceCodeLocation;
-        this._selectorText = selectorText;
-        this._selectors = selectors;
-        this._matchedSelectorIndices = matchedSelectorIndices;
-        this._style = style;
-        this._mediaList = mediaList;
-
-        delete this._matchedSelectors;
-        delete this._matchedSelectorText;
-
-        if (this._style)
-            this._style.ownerRule = this;
-
-        if (changed)
-            this.dispatchEventToListeners(WebInspector.CSSRule.Event.Changed);
-    },
-
-    get type()
-    {
-        return this._type;
-    },
-
-    get sourceCodeLocation()
-    {
-        return this._sourceCodeLocation;
-    },
-
-    get selectorText()
-    {
-        return this._selectorText;
-    },
-
-    set selectorText(selectorText)
-    {
-        console.assert(this.editable);
-        if (!this.editable)
-            return;
-
-        if (this._selectorText === selectorText)
-            return;
-
-        this._nodeStyles.changeRuleSelector(this, selectorText);
-    },
-
-    get selectors()
-    {
-        return this._selectors;
-    },
-
-    set selectors(selectors)
-    {
-        this.selectorText = (selectors || []).join(", ");
-    },
-
-    get matchedSelectorIndices()
-    {
-        return this._matchedSelectorIndices;
-    },
-
-    get matchedSelectors()
-    {
-        // COMPATIBILITY (iOS 6): The selectors array is always empty, so just return an empty array.
-        if (!this._selectors.length) {
-            console.assert(!this._matchedSelectorIndices.length);
-            return [];
-        }
-
-        if (this._matchedSelectors)
-            return this._matchedSelectors;
-
-        this._matchedSelectors = this._selectors.filter(function(element, index) {
-            return this._matchedSelectorIndices.contains(index);
-        }, this);
-
-        return this._matchedSelectors;
-    },
-
-    get matchedSelectorText()
-    {
-        // COMPATIBILITY (iOS 6): The selectors array is always empty, so just return the whole selector.
-        if (!this._selectors.length) {
-            console.assert(!this._matchedSelectorIndices.length);
-            return this._selectorText;
-        }
-
-        if ("_matchedSelectorText" in this)
-            return this._matchedSelectorText;
-
-        this._matchedSelectorText = this.matchedSelectors.join(", ");
-
-        return this._matchedSelectorText;
-    },
-
-    get style()
-    {
-        return this._style;
-    },
-
-    get mediaList()
-    {
-        return this._mediaList;
-    },
-
-    // Protected
-
-    get nodeStyles()
-    {
-        return this._nodeStyles;
-    }
-};
-
-WebInspector.CSSRule.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileObject.js b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileObject.js
deleted file mode 100644
index 6f087d017..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileObject.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSSelectorProfileObject = function(title, id, recording, data, totalTime)
-{
-    WebInspector.ProfileObject.call(this, WebInspector.CSSSelectorProfileType.TypeId, title, id, recording);
-
-    this._data = data || [];
-    this._totalTime = totalTime || 0;
-};
-
-WebInspector.CSSSelectorProfileObject.prototype = {
-    constructor: WebInspector.CSSSelectorProfileObject,
-    
-    get data()
-    {
-        return this._data;
-    },
-
-    set data(data)
-    {
-        this._data = data;
-    },
-
-    get totalTime()
-    {
-        return this._totalTime;
-    },
-
-    set totalTime(totalTime)
-    {
-        this._totalTime = totalTime;
-    }
-};
-
-WebInspector.CSSSelectorProfileObject.prototype.__proto__ = WebInspector.ProfileObject.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileType.js b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileType.js
deleted file mode 100644
index 85039b5df..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileType.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc. All Rights Reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- */
-WebInspector.CSSSelectorProfileType = function()
-{
-    WebInspector.ProfileType.call(this, WebInspector.CSSSelectorProfileType.TypeId, WebInspector.UIString("Collect CSS Selector Profile"));
-    this._recording = false;
-    this._profileUid = 1;
-    WebInspector.CSSSelectorProfileType.instance = this;
-}
-
-WebInspector.CSSSelectorProfileType.TypeId = "SELECTOR";
-
-WebInspector.CSSSelectorProfileType.prototype = {
-    get buttonTooltip()
-    {
-        return this._recording ? WebInspector.UIString("Stop CSS selector profiling.") : WebInspector.UIString("Start CSS selector profiling.");
-    },
-
-    buttonClicked: function()
-    {
-        if (this._recording)
-            this.stopRecordingProfile();
-        else
-            this.startRecordingProfile();
-    },
-
-    get treeItemTitle()
-    {
-        return WebInspector.UIString("CSS SELECTOR PROFILES");
-    },
-
-    get description()
-    {
-        return WebInspector.UIString("CSS selector profiles show how long the selector matching has taken in total and how many times a certain selector has matched DOM elements (the results are approximate due to matching algorithm optimizations.)");
-    },
-
-    reset: function()
-    {
-        this._profileUid = 1;
-    },
-
-    nextProfileId: function()
-    {
-        return this._profileUid++;
-    },
-
-    isRecordingProfile: function()
-    {
-        return this._recording;
-    },
-
-    setRecordingProfile: function(isProfiling)
-    {
-        this._recording = isProfiling;
-    },
-
-    startRecordingProfile: function()
-    {
-        this._recording = true;
-        CSSAgent.startSelectorProfiler();
-    },
-
-    stopRecordingProfile: function(callback)
-    {
-        this._recording = false;
-        CSSAgent.stopSelectorProfiler(callback);
-    },
-
-    createSidebarTreeElementForProfile: function(profile)
-    {
-        return new WebInspector.ProfileSidebarTreeElement(profile, profile.title, "profile-sidebar-tree-item");
-    },
-
-    createView: function(profile)
-    {
-        return new WebInspector.CSSSelectorProfileView(profile);
-    }
-}
-
-WebInspector.CSSSelectorProfileType.prototype.__proto__ = WebInspector.ProfileType.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileView.js b/Source/WebInspectorUI/UserInterface/CSSSelectorProfileView.js
deleted file mode 100644
index fb16770ca..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSSelectorProfileView.js
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc. All Rights Reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @extends WebInspector.DataGridNode
- * @param {WebInspector.CSSSelectorProfileView} profileView
- */
-WebInspector.CSSSelectorDataGridNode = function(profileView, data)
-{
-    WebInspector.DataGridNode.call(this, data, false);
-    this._profileView = profileView;
-}
-
-WebInspector.CSSSelectorDataGridNode.prototype = {
-    get data()
-    {
-        var data = {};
-        data.selector = this._data.selector;
-        data.matches = this._data.matchCount;
-
-        if (this._profileView.showTimeAsPercent.value)
-            data.time = Number(this._data.timePercent).toFixed(1) + "%";
-        else
-            data.time = Number.secondsToString(this._data.time / 1000, true);
-
-        return data;
-    },
-
-    get rawData()
-    {
-        return this._data;
-    },
-
-    createCell: function(columnIdentifier)
-    {
-        var cell = WebInspector.DataGridNode.prototype.createCell.call(this, columnIdentifier);
-        if (columnIdentifier === "selector" && cell.firstChild) {
-            cell.firstChild.title = this.rawData.selector;
-            return cell;
-        }
-
-        if (columnIdentifier !== "source")
-            return cell;
-
-        cell.removeChildren();
-
-        if (this.rawData.url) {
-            var wrapperDiv = cell.createChild("div");
-            wrapperDiv.appendChild(this._linkifyLocation(this.rawData.url, this.rawData.lineNumber));
-        }
-
-        return cell;
-    },
-
-    _linkifyLocation: function(url, lineNumber)
-    {
-        // FIXME: SelectorProfileEntry need columnNumbers.
-        return WebInspector.linkifyLocation(url, lineNumber, 0);
-    }
-}
-
-WebInspector.CSSSelectorDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
-
-/**
- * @constructor
- * @extends WebInspector.View
- * @param {CSSAgent.SelectorProfile} profile
- */
-WebInspector.CSSSelectorProfileView = function(profile)
-{
-    console.assert(profile instanceof WebInspector.CSSSelectorProfileObject);
-
-    WebInspector.ProfileView.call(this, profile, "css-selector-profiler-show-time-as-percent");
-}
-
-WebInspector.CSSSelectorProfileView.prototype = {
-    constructor: WebInspector.CSSSelectorProfileView,
-
-    updateLayout: function()
-    {
-        if (this.dataGrid)
-            this.dataGrid.updateLayout();
-    },
-
-    get recordingTitle()
-    {
-        return WebInspector.UIString("Recording CSS Selector Profile\u2026");
-    },
-
-    displayProfile: function()
-    {
-        var columns = { "selector": { title: WebInspector.UIString("Selector"), width: "550px", sortable: true },
-                        "source": { title: WebInspector.UIString("Source"), width: "100px", sortable: true },
-                        "time": { title: WebInspector.UIString("Total"), width: "72px", sort: "descending", sortable: true },
-                        "matches": { title: WebInspector.UIString("Matches"), width: "72px", sortable: true } };
-
-        this.dataGrid = new WebInspector.DataGrid(columns);
-        this.dataGrid.element.classList.add("selector-profile-view");
-        this.dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortProfile, this);
-
-        this.element.appendChild(this.dataGrid.element);
-        this.dataGrid.updateLayout();
-
-        this._createProfileNodes();
-        this._sortProfile();
-    },
-
-    _createProfileNodes: function()
-    {
-        var data = this.profile.data;
-        if (!data) {
-            // The profiler may have been terminated with the "Clear all profiles." button.
-            return;
-        }
-
-        this.profile.children = [];
-        for (var i = 0; i < data.length; ++i) {
-            data[i].timePercent = data[i].time * 100 / this.profile.totalTime;
-            var node = new WebInspector.CSSSelectorDataGridNode(this, data[i]);
-            this.profile.children.push(node);
-        }
-    },
-
-    rebuildGridItems: function()
-    {
-        this.dataGrid.removeChildren();
-
-        var children = this.profile.children;
-        var count = children.length;
-
-        for (var index = 0; index < count; ++index)
-            this.dataGrid.appendChild(children[index]);
-    },
-
-    refreshData: function()
-    {
-        var child = this.dataGrid.children[0];
-        while (child) {
-            child.refresh();
-            child = child.traverseNextNode(false, null, true);
-        }
-    },
-
-    toggleTimeDisplay: function(event)
-    {
-        WebInspector.ProfileView.prototype.toggleTimeDisplay.call(this, event);
-        this.showTimeAsPercent.value = !this.showTimeAsPercent.value;
-        this.refreshData();
-    },
-
-    _sortProfile: function()
-    {
-        var sortAscending = this.dataGrid.sortOrder === "ascending";
-        var sortColumnIdentifier = this.dataGrid.sortColumnIdentifier;
-
-        function selectorComparator(a, b)
-        {
-            var result = b.rawData.selector.localeCompare(a.rawData.selector);
-            return sortAscending ? -result : result;
-        }
-
-        function sourceComparator(a, b)
-        {
-            var aRawData = a.rawData;
-            var bRawData = b.rawData;
-            var result = bRawData.url.localeCompare(aRawData.url);
-            if (!result)
-                result = bRawData.lineNumber - aRawData.lineNumber;
-            return sortAscending ? -result : result;
-        }
-
-        function timeComparator(a, b)
-        {
-            const result = b.rawData.time - a.rawData.time;
-            return sortAscending ? -result : result;
-        }
-
-        function matchesComparator(a, b)
-        {
-            const result = b.rawData.matchCount - a.rawData.matchCount;
-            return sortAscending ? -result : result;
-        }
-
-        var comparator;
-        switch (sortColumnIdentifier) {
-        case "time":
-            comparator = timeComparator;
-            break;
-        case "matches":
-            comparator = matchesComparator;
-            break;
-        case "selector":
-            comparator = selectorComparator;
-            break;
-        case "source":
-            comparator = sourceComparator;
-            break;
-        }
-
-        this.profile.children.sort(comparator);
-
-        this.rebuildGridItems();
-    }
-}
-
-WebInspector.CSSSelectorProfileView.prototype.__proto__ = WebInspector.ProfileView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclaration.js b/Source/WebInspectorUI/UserInterface/CSSStyleDeclaration.js
deleted file mode 100644
index eaab18787..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDeclaration.js
+++ /dev/null
@@ -1,310 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSStyleDeclaration = function(nodeStyles, ownerStyleSheet, id, type, node, inherited, text, properties, styleSheetTextRange)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(nodeStyles);
-    this._nodeStyles = nodeStyles;
-
-    this._ownerRule = null;
-
-    this._ownerStyleSheet = ownerStyleSheet || null;
-    this._id = id || null;
-    this._type = type || null;
-    this._node = node || null;
-    this._inherited = inherited || false;
-
-    this._pendingProperties = [];
-    this._propertyNameMap = {};
-
-    this.update(text, properties, styleSheetTextRange, true);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSStyleDeclaration);
-
-WebInspector.CSSStyleDeclaration.Event = {
-    PropertiesChanged: "css-style-declaration-properties-changed"
-};
-
-WebInspector.CSSStyleDeclaration.Type = {
-    Rule: "css-style-declaration-type-rule",
-    Inline: "css-style-declaration-type-inline",
-    Attribute: "css-style-declaration-type-attribute",
-    Computed: "css-style-declaration-type-computed"
-};
-
-WebInspector.CSSStyleDeclaration.prototype = {
-    constructor: WebInspector.CSSStyleDeclaration,
-
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get ownerStyleSheet()
-    {
-        return this._ownerStyleSheet;
-    },
-
-    get type()
-    {
-        return this._type;
-    },
-
-    get inherited()
-    {
-        return this._inherited;
-    },
-
-    get node()
-    {
-        return this._node;
-    },
-
-    get editable()
-    {
-        return !!this._id && ((this._type === WebInspector.CSSStyleDeclaration.Type.Rule && this._ownerRule && this._ownerRule.editable) || this._type === WebInspector.CSSStyleDeclaration.Type.Inline);
-    },
-
-    update: function(text, properties, styleSheetTextRange, dontFireEvents)
-    {
-        text = text || "";
-        properties = properties || [];
-
-        var oldProperties = this._properties || [];
-        var oldText = this._text;
-
-        this._text = text;
-        this._properties = properties;
-        this._styleSheetTextRange = styleSheetTextRange;
-        this._propertyNameMap = {};
-
-        delete this._visibleProperties;
-
-        var editable = this.editable;
-
-        for (var i = 0; i < this._properties.length; ++i) {
-            var property = this._properties[i];
-            property.ownerStyle = this;
-
-            // Store the property in a map if we arn't editable. This
-            // allows for quick lookup for computed style. Editable
-            // styles don't use the map since they need to account for
-            // overridden properties.
-            if (!editable)
-                this._propertyNameMap[property.name] = property;
-            else {
-                // Remove from pendingProperties (if it was pending).
-                this._pendingProperties.remove(property);
-            }
-        }
-
-        var removedProperties = [];
-        for (var i = 0; i < oldProperties.length; ++i) {
-            var oldProperty = oldProperties[i];
-
-            if (!this._properties.contains(oldProperty)) {
-                // Clear the index, since it is no longer valid.
-                oldProperty.index = NaN;
-
-                removedProperties.push(oldProperty);
-
-                // Keep around old properties in pending in case they
-                // are needed again during editing.
-                if (editable)
-                    this._pendingProperties.push(oldProperty);
-            }
-        }
-
-        if (dontFireEvents)
-            return;
-
-        var addedProperties = [];
-        for (var i = 0; i < this._properties.length; ++i) {
-            if (!oldProperties.contains(this._properties[i]))
-                addedProperties.push(this._properties[i]);
-        }
-
-        // Don't fire the event if there is text and it hasn't changed.
-        if (oldText && this._text && oldText === this._text) {
-            // We shouldn't have any added or removed properties in this case.
-            console.assert(!addedProperties.length && !removedProperties.length);
-            if (!addedProperties.length && !removedProperties.length)
-                return;
-        }
-
-        function delayed()
-        {
-            this.dispatchEventToListeners(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, {addedProperties: addedProperties, removedProperties: removedProperties});
-        }
-
-        // Delay firing the PropertiesChanged event so DOMNodeStyles has a chance to mark overridden and associated properties.
-        setTimeout(delayed.bind(this), 0);
-    },
-
-    get ownerRule()
-    {
-        return this._ownerRule;
-    },
-
-    set ownerRule(rule)
-    {
-        this._ownerRule = rule || null;
-    },
-
-    get text()
-    {
-        return this._text;
-    },
-
-    set text(text)
-    {
-        if (this._text === text)
-            return;
-
-        this._nodeStyles.changeStyleText(this, text);
-    },
-
-    get properties()
-    {
-        return this._properties;
-    },
-
-    get visibleProperties()
-    {
-        if (this._visibleProperties)
-            return this._visibleProperties;
-
-        this._visibleProperties = this._properties.filter(function(property) {
-            return !!property.styleDeclarationTextRange;
-        });
-
-        return this._visibleProperties;
-    },
-
-    get pendingProperties()
-    {
-        return this._pendingProperties;
-    },
-
-    get styleSheetTextRange()
-    {
-        return this._styleSheetTextRange;
-    },
-
-    propertyForName: function(name, dontCreateIfMissing)
-    {
-        console.assert(name);
-        if (!name)
-            return null;
-
-        if (!this.editable)
-            return this._propertyNameMap[name] || null;
-
-        // Editable styles don't use the map since they need to
-        // account for overridden properties.
-
-        function findMatch(properties)
-        {
-            for (var i = 0; i < properties.length; ++i) {
-                var property = properties[i];
-                if (property.canonicalName !== name && property.name !== name)
-                    continue;
-                if (bestMatchProperty && !bestMatchProperty.overridden && property.overridden)
-                    continue;
-                bestMatchProperty = property;
-            }
-        }
-
-        var bestMatchProperty = null;
-
-        findMatch(this._properties);
-
-        if (bestMatchProperty)
-            return bestMatchProperty;
-
-        if (dontCreateIfMissing || !this.editable)
-            return null;
-
-        findMatch(this._pendingProperties, true);
-
-        if (bestMatchProperty)
-            return bestMatchProperty;
-
-        var newProperty = new WebInspector.CSSProperty(NaN, null, name);
-        newProperty.ownerStyle = this;
-
-        this._pendingProperties.push(newProperty);
-
-        return newProperty;
-    },
-
-    addProperty: function(property)
-    {
-        console.assert(property);
-        if (!property)
-            return;
-
-        console.assert(property.ownerStyle === this);
-        if (property.ownerStyle !== this)
-            return;
-
-        console.assert(this.editable);
-        if (!this.editable)
-            return;
-
-        this._nodeStyles.addProperty(property);
-    },
-
-    removeProperty: function(property)
-    {
-        console.assert(property);
-        if (!property)
-            return;
-
-        console.assert(property.ownerStyle === this);
-        if (property.ownerStyle !== this)
-            return;
-
-        console.assert(this.editable);
-        if (!this.editable)
-            return;
-
-        this._nodeStyles.removeProperty(property);
-    },
-
-    // Protected
-
-    get nodeStyles()
-    {
-        return this._nodeStyles;
-    }
-};
-
-WebInspector.CSSStyleDeclaration.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.css
deleted file mode 100644
index 434b1c2a7..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.css
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.style-declaration-section {
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
-
-    padding: 5px;
-
-    background-color: white;
-}
-
-.style-declaration-section + .style-declaration-section {
-    border-top: 1px solid rgb(210, 210, 210);
-}
-
-.style-declaration-section.last-in-group {
-    margin-bottom: 15px;
-
-    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px 0;
-}
-
-.style-declaration-section.last-in-group + .style-declaration-section {
-    margin-top: 15px;
-
-    border-top: none;
-
-    box-shadow: rgba(0, 0, 0, 0.3) 0 0 2px 0;
-}
-
-.style-declaration-section:first-child,
-div:not(.style-declaration-section) + .style-declaration-section,
-.style-declaration-section.last-in-group + .style-declaration-section.last-in-group,
-.style-declaration-section.last-in-group + .style-declaration-section:last-child {
-    box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px 1px;
-}
-
-.style-declaration-section:last-child {
-    margin-bottom: 0 !important;
-}
-
-.style-declaration-section > .header {
-    position: relative;
-
-    padding: 4px 5px 3px 25px;
-
-    font-size: 11px;
-    line-height: 12px;
-}
-
-.style-declaration-section > .header > .icon {
-    position: absolute;
-
-    top: 2px;
-    left: 4px;
-
-    width: 16px;
-    height: 16px;
-}
-
-.style-declaration-section > .header > .selector {
-    font-family: Menlo, monospace;
-    color: rgb(128, 128, 128);
-
-    outline: none;
-
-    cursor: text;
-
-    word-wrap: break-word;
-
-    -webkit-user-select: text;
-    -webkit-user-modify: read-write-plaintext-only;
-}
-
-.style-declaration-section > .header > .selector:empty {
-    /* This prevents the cursor from disappearing when empty. */
-    display: inline-block;
-    min-width: 1px;
-}
-
-.style-declaration-section > .header > .selector:empty::before {
-    /* This prevents the cursor from positioning badly when empty. */
-    content: "";
-}
-
-.style-declaration-section > .header > .selector:focus {
-    color: black;
-}
-
-.style-declaration-section.locked > .header > .selector,
-.style-declaration-section.selector-locked > .header > .selector {
-    -webkit-user-modify: read-only;
-}
-
-.style-declaration-section.locked > .header::before {
-    float: right;
-
-    content: "";
-
-    width: 8px;
-    height: 10px;
-
-    background-image: -webkit-canvas(style-lock-normal);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 8px 10px;
-
-    margin-left: 5px;
-}
-
-.style-declaration-section > .header > .selector > .matched {
-    color: black;
-}
-
-.style-declaration-section > .header > .origin {
-    line-height: 10px;
-    font-family: "Lucida Grande", sans-serif;
-
-    color: rgb(128, 128, 128);
-    
-    word-wrap: break-word;
-    white-space: nowrap;
-}
-
-.style-declaration-section > .header > .origin a {
-    white-space: normal;
-}
-
-.style-declaration-section > .header > .origin > .go-to-link {
-    color: inherit !important;
-}
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.js
deleted file mode 100644
index 52569255a..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationSection.js
+++ /dev/null
@@ -1,261 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSStyleDeclarationSection = function(style)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(style);
-    this._style = style || null;
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.CSSStyleDeclarationSection.StyleClassName;
-
-    this._headerElement = document.createElement("div");
-    this._headerElement.className = WebInspector.CSSStyleDeclarationSection.HeaderElementStyleClassName;
-
-    this._iconElement = document.createElement("img");
-    this._iconElement.className = WebInspector.CSSStyleDeclarationSection.IconElementStyleClassName;
-    this._headerElement.appendChild(this._iconElement);
-
-    this._selectorElement = document.createElement("span");
-    this._selectorElement.className = WebInspector.CSSStyleDeclarationSection.SelectorElementStyleClassName;
-    this._selectorElement.setAttribute("spellcheck", "false");
-    this._headerElement.appendChild(this._selectorElement);
-
-    this._originElement = document.createElement("span");
-    this._originElement.className = WebInspector.CSSStyleDeclarationSection.OriginElementStyleClassName;
-    this._headerElement.appendChild(this._originElement);
-
-    this._propertiesElement = document.createElement("div");
-    this._propertiesElement.className = WebInspector.CSSStyleDeclarationSection.PropertiesElementStyleClassName;
-
-    this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this, style);
-    this._propertiesElement.appendChild(this._propertiesTextEditor.element);
-
-    this._element.appendChild(this._headerElement);
-    this._element.appendChild(this._propertiesElement);
-
-    var iconClassName;
-    switch (style.type) {
-    case WebInspector.CSSStyleDeclaration.Type.Rule:
-        console.assert(style.ownerRule);
-
-        if (style.inherited)
-            iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName;
-        else if (style.ownerRule.type === WebInspector.CSSRule.Type.Author)
-            iconClassName = WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName;
-        else if (style.ownerRule.type === WebInspector.CSSRule.Type.User)
-            iconClassName = WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName;
-        else if (style.ownerRule.type === WebInspector.CSSRule.Type.UserAgent)
-            iconClassName = WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName;
-        else if (style.ownerRule.type === WebInspector.CSSRule.Type.Inspector)
-            iconClassName = WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName;
-        break;
-
-    case WebInspector.CSSStyleDeclaration.Type.Inline:
-    case WebInspector.CSSStyleDeclaration.Type.Attribute:
-        if (style.inherited)
-            iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName;
-        else
-            iconClassName = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
-        break;
-    }
-
-    console.assert(iconClassName);
-    this._element.classList.add(iconClassName);
-
-    if (!style.editable)
-        this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LockedStyleClassName);
-    else if (style.ownerRule) {
-        this._commitSelectorKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter, this._commitSelector.bind(this), this._selectorElement);
-        this._selectorElement.addEventListener("blur", this._commitSelector.bind(this));
-    } else
-        this._element.classList.add(WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName);
-
-    if (!WebInspector.CSSStyleDeclarationSection._generatedLockImages) {
-        WebInspector.CSSStyleDeclarationSection._generatedLockImages = true;
-
-        var specifications = {"style-lock-normal": {fillColor: [0, 0, 0, 0.5]}};
-        generateColoredImagesForCSS("Images/Locked.pdf", specifications, 8, 10);
-    }
-
-    this.refresh();
-};
-
-WebInspector.CSSStyleDeclarationSection.StyleClassName = "style-declaration-section";
-WebInspector.CSSStyleDeclarationSection.LockedStyleClassName = "locked";
-WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName = "selector-locked";
-WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName = "last-in-group";
-WebInspector.CSSStyleDeclarationSection.HeaderElementStyleClassName = "header";
-WebInspector.CSSStyleDeclarationSection.IconElementStyleClassName = "icon";
-WebInspector.CSSStyleDeclarationSection.SelectorElementStyleClassName = "selector";
-WebInspector.CSSStyleDeclarationSection.OriginElementStyleClassName = "origin";
-WebInspector.CSSStyleDeclarationSection.PropertiesElementStyleClassName = "properties";
-WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName = "matched";
-
-WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName = "author-style-rule-icon";
-WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName = "user-style-rule-icon";
-WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName = "user-agent-style-rule-icon";
-WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName = "inspector-style-rule-icon";
-WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName = "inherited-style-rule-icon";
-WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName = "inherited-element-style-rule-icon";
-
-WebInspector.CSSStyleDeclarationSection.prototype = {
-    constructor: WebInspector.CSSStyleDeclarationSection,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get style()
-    {
-        return this._style;
-    },
-
-    get lastInGroup()
-    {
-        return this._element.classList.contains(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
-    },
-
-    set lastInGroup(last)
-    {
-        if (last)
-            this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
-    },
-
-    get focused()
-    {
-        return this._propertiesTextEditor.focused;
-    },
-
-    focus: function()
-    {
-        this._propertiesTextEditor.focus();
-    },
-
-    refresh: function()
-    {
-        this._selectorElement.removeChildren();
-        this._originElement.removeChildren();
-
-        this._originElement.appendChild(document.createTextNode(" \u2014 "));
-
-        function appendSelector(selectorText, matched)
-        {
-            var selectorElement = document.createElement("span");
-            if (matched)
-                selectorElement.className = WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName;
-            selectorElement.textContent = selectorText;
-            this._selectorElement.appendChild(selectorElement);
-        }
-
-        switch (this._style.type) {
-        case WebInspector.CSSStyleDeclaration.Type.Rule:
-            console.assert(this._style.ownerRule);
-
-            var selectors = this._style.ownerRule.selectors;
-            var matchedSelectorIndices = this._style.ownerRule.matchedSelectorIndices;
-            if (selectors.length && matchedSelectorIndices.length) {
-                for (var i = 0; i < selectors.length; ++i) {
-                    appendSelector.call(this, selectors[i], matchedSelectorIndices.contains(i));
-                    if (i < selectors.length - 1)
-                        this._selectorElement.appendChild(document.createTextNode(", "));
-                }
-            } else
-                appendSelector.call(this, this._style.ownerRule.selectorText, true);
-
-            if (this._style.ownerRule.sourceCodeLocation) {
-                var sourceCodeLink = WebInspector.createSourceCodeLocationLink(this._style.ownerRule.sourceCodeLocation, true);
-                this._originElement.appendChild(sourceCodeLink);
-            } else {
-                var originString;
-                switch (this._style.ownerRule.type) {
-                case WebInspector.CSSRule.Type.Author:
-                    originString = WebInspector.UIString("Author Stylesheet");
-                    break;
-
-                case WebInspector.CSSRule.Type.User:
-                    originString = WebInspector.UIString("User Stylesheet");
-                    break;
-
-                case WebInspector.CSSRule.Type.UserAgent:
-                    originString = WebInspector.UIString("User Agent Stylesheet");
-                    break;
-
-                case WebInspector.CSSRule.Type.Inspector:
-                    originString = WebInspector.UIString("Web Inspector");
-                    break;
-                }
-
-                console.assert(originString);
-                if (originString)
-                    this._originElement.appendChild(document.createTextNode(originString));
-            }
-
-            break;
-
-        case WebInspector.CSSStyleDeclaration.Type.Inline:
-            appendSelector.call(this, WebInspector.displayNameForNode(this._style.node), true);
-            this._originElement.appendChild(document.createTextNode(WebInspector.UIString("Style Attribute")));
-            break;
-
-        case WebInspector.CSSStyleDeclaration.Type.Attribute:
-            appendSelector.call(this, WebInspector.displayNameForNode(this._style.node), true);
-            this._originElement.appendChild(document.createTextNode(WebInspector.UIString("HTML Attributes")));
-            break;
-        }
-    },
-
-    updateLayout: function()
-    {
-        this._propertiesTextEditor.updateLayout();
-    },
-
-    // Private
-
-    _commitSelector: function(mutations)
-    {
-        console.assert(this._style.ownerRule);
-        if (!this._style.ownerRule)
-            return;
-
-        var newSelectorText = this._selectorElement.textContent.trim();
-        if (!newSelectorText) {
-            // Revert to the current selector (by doing a refresh) since the new selector is empty.
-            this.refresh();
-            return;
-        }
-
-        this._style.ownerRule.selectorText = newSelectorText;
-    }
-};
-
-WebInspector.CSSStyleDeclarationSection.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.css b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.css
deleted file mode 100644
index f001641ff..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.css
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.css-style-text-editor {
-    background-color: white;
-    padding: 2px 0;
-}
-
-.css-style-text-editor > .CodeMirror {
-    height: auto;
-}
-
-.css-style-text-editor > .CodeMirror-scroll {
-    overflow: hidden;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-placeholder {
-    font-family: "Lucida Grande", sans-serif;
-    color: rgb(128, 128, 128);
-    padding: 0 5px 0 39px;
-    text-indent: -14px;
-}
-
-.css-style-text-editor > .CodeMirror pre {
-    padding: 1px 5px 1px 39px;
-    text-indent: -35px;
-}
-
-.css-style-text-editor > .CodeMirror pre * {
-    text-indent: 0;
-}
-
-.css-style-text-editor.read-only > .CodeMirror pre {
-    /* Compensate for the missing checkboxes so properties line up with editable styles that have checkboxes. */
-    text-indent: -14px;
-}
-
-.css-style-text-editor.read-only > .CodeMirror .CodeMirror-cursor {
-    display: none;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines pre span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab),
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.disabled,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.other-vendor,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.overridden {
-    text-decoration: line-through;
-    -webkit-text-stroke-width: 0.000000000000001px; /* A hack to get a different line-through color. */
-    -webkit-text-stroke-color: rgba(0, 0, 0, 0.6);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines pre span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab),
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid {
-    -webkit-text-stroke-color: rgba(255, 0, 0, 0.6);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited {
-    opacity: 0.5;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.disabled,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.other-vendor,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.not-inherited,
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.overridden {
-    -webkit-text-stroke-color: rgba(0, 0, 0, 0.3);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line span:not(.css-style-declaration-property):not(.CodeMirror-widget):not(.cm-comment):not(.cm-tab),
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.invalid {
-    text-decoration: none;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox] {
-    width: 10px;
-    height: 10px;
-    vertical-align: middle;
-    margin: 0 8px 0 3px;
-    visibility: hidden;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .checkbox-placeholder {
-    display: inline-block;
-    width: 21px;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox]:not(:checked),
-.css-style-text-editor > .CodeMirror.CodeMirror-focused .CodeMirror-lines input[type=checkbox],
-.css-style-text-editor:hover > .CodeMirror .CodeMirror-lines input[type=checkbox] {
-    visibility: visible;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch {
-    display: inline-block;
-
-    margin-right: 3px;
-    vertical-align: -2px;
-
-    width: 1em;
-    height: 1em;
-
-    position: relative;
-
-    /* Make a checkered background for transparent colors to show against. */
-    background-image: -webkit-linear-gradient(top, rgb(204, 204, 204), rgb(204, 204, 204)),
-        -webkit-linear-gradient(top, rgb(204, 204, 204), rgb(204, 204, 204));
-    background-color: white;
-    background-size: calc(50% + 1px);
-    background-position: top left, bottom right;
-    background-repeat: no-repeat;
-
-    cursor: default;
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch > span {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    border: 1px solid rgba(64, 64, 64, 0.4);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:hover > span {
-    border: 1px solid rgba(64, 64, 64, 0.8);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:active > span {
-    border: 1px solid rgba(64, 64, 64, 1);
-}
-
-.css-style-text-editor > .CodeMirror .cm-link {
-    /* Style url(...) links as if they are strings. */
-    color: rgb(196, 26, 22);
-    text-decoration: inherit;
-    cursor: inherit;
-}
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js b/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js
deleted file mode 100644
index 357403a1e..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js
+++ /dev/null
@@ -1,1052 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSStyleDeclarationTextEditor = function(delegate, style, element)
-{
-    WebInspector.Object.call(this);
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.StyleClassName);
-    this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
-
-    this._showsImplicitProperties = true;
-    this._alwaysShowPropertyNames = {};
-    this._sortProperties = false;
-
-    this._prefixWhitespace = "";
-    this._suffixWhitespace = "";
-    this._linePrefixWhitespace = "";
-
-    this._delegate = delegate || null;
-
-    this._codeMirror = CodeMirror(this.element, {
-        readOnly: true,
-        lineWrapping: true,
-        mode: "css-rule",
-        electricChars: false,
-        indentWithTabs: true,
-        indentUnit: 4,
-        smartIndent: false,
-        matchBrackets: true,
-        autoCloseBrackets: true
-    });
-
-    this._codeMirror.on("change", this._contentChanged.bind(this));
-    this._codeMirror.on("blur", this._editorBlured.bind(this));
-
-    this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
-    this._tokenTrackingController = new WebInspector.CodeMirrorTokenTrackingController(this._codeMirror, this);
-
-    this._jumpToSymbolTrackingModeEnabled = false;
-    this._tokenTrackingController.classNameForHighlightedRange = WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName;
-    this._tokenTrackingController.mouseOverDelayDuration = 0;
-    this._tokenTrackingController.mouseOutReleaseDelayDuration = 0;
-    this._tokenTrackingController.mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
-
-    this.style = style;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSStyleDeclarationTextEditor);
-
-WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
-WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = "read-only";
-WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName = "color-swatch";
-WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = "checkbox-placeholder";
-WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = "editing-line";
-WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay = 250;
-WebInspector.CSSStyleDeclarationTextEditor.RemoveEditingLineClassesDelay = 2000;
-
-WebInspector.CSSStyleDeclarationTextEditor.prototype = {
-    constructor: WebInspector.CSSStyleDeclarationTextEditor,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    set delegate(delegate)
-    {
-        this._delegate = delegate || null;
-    },
-
-    get style()
-    {
-        return this._style;
-    },
-
-    set style(style)
-    {
-        if (this._style === style)
-            return;
-
-        if (this._style) {
-            this._style.removeEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._propertiesChanged, this);
-            if (this._style.ownerRule && this._style.ownerRule.sourceCodeLocation)
-                WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
-        }
-
-        this._style = style || null;
-
-        if (this._style) {
-            this._style.addEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._propertiesChanged, this);
-            if (this._style.ownerRule && this._style.ownerRule.sourceCodeLocation)
-                WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
-        }
-
-        this._updateJumpToSymbolTrackingMode();
-
-        this._resetContent();
-    },
-
-    get focused()
-    {
-        return this._codeMirror.getWrapperElement().classList.contains("CodeMirror-focused");
-    },
-
-    get alwaysShowPropertyNames()
-    {
-        return Object.keys(this._alwaysShowPropertyNames);
-    },
-
-    set alwaysShowPropertyNames(alwaysShowPropertyNames)
-    {
-        this._alwaysShowPropertyNames = (alwaysShowPropertyNames || []).keySet();
-
-        this._resetContent();
-    },
-
-    get showsImplicitProperties()
-    {
-        return this._showsImplicitProperties;
-    },
-
-    set showsImplicitProperties(showsImplicitProperties)
-    {
-        if (this._showsImplicitProperties === showsImplicitProperties)
-            return;
-
-        this._showsImplicitProperties = showsImplicitProperties;
-
-        this._resetContent();
-    },
-
-    get sortProperties()
-    {
-        return this._sortProperties;
-    },
-
-    set sortProperties(sortProperties)
-    {
-        if (this._sortProperties === sortProperties)
-            return;
-
-        this._sortProperties = sortProperties;
-
-        this._resetContent();
-    },
-
-    focus: function()
-    {
-        this._codeMirror.focus();
-    },
-
-    refresh: function()
-    {
-        this._resetContent();
-    },
-
-    updateLayout: function(force)
-    {
-        this._codeMirror.refresh();
-    },
-
-    // Protected
-
-    didDismissPopover: function(popover) 
-    {
-        if (popover === this._colorPickerPopover)
-            delete this._colorPickerPopover;
-    },
-
-    completionControllerCompletionsHidden: function(completionController)
-    {
-        var styleText = this._style.text;
-        var currentText = this._formattedContent();
-
-        // If the style text and the current editor text differ then we need to commit.
-        // Otherwise we can just update the properties that got skipped because a completion
-        // was pending the last time _propertiesChanged was called.
-        if (styleText !== currentText)
-            this._commitChanges();
-        else
-            this._propertiesChanged();
-    },
-
-    // Private
-
-    _clearRemoveEditingLineClassesTimeout: function()
-    {
-        if (!this._removeEditingLineClassesTimeout)
-            return;
-
-        clearTimeout(this._removeEditingLineClassesTimeout);
-        delete this._removeEditingLineClassesTimeout;
-    },
-
-    _removeEditingLineClasses: function()
-    {
-        this._clearRemoveEditingLineClassesTimeout();
-
-        function removeEditingLineClasses()
-        {
-            var lineCount = this._codeMirror.lineCount();
-            for (var i = 0; i < lineCount; ++i)
-                this._codeMirror.removeLineClass(i, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
-        }
-
-        this._codeMirror.operation(removeEditingLineClasses.bind(this));
-    },
-
-    _removeEditingLineClassesSoon: function()
-    {
-        if (this._removeEditingLineClassesTimeout)
-            return;
-        this._removeEditingLineClassesTimeout = setTimeout(this._removeEditingLineClasses.bind(this), WebInspector.CSSStyleDeclarationTextEditor.RemoveEditingLineClassesDelay);
-    },
-
-    _formattedContent: function()
-    {
-        // Start with the prefix whitespace we stripped.
-        var content = this._prefixWhitespace;
-
-        // Get each line and add the line prefix whitespace and newlines.
-        var lineCount = this._codeMirror.lineCount();
-        for (var i = 0; i < lineCount; ++i) {
-            var lineContent = this._codeMirror.getLine(i);
-            content += this._linePrefixWhitespace + lineContent;
-            if (i !== lineCount - 1)
-                content += "\n";
-        }
-
-        // Add the suffix whitespace we stripped.
-        content += this._suffixWhitespace;
-
-        return content;
-    },
-
-    _commitChanges: function()
-    {
-        if (this._commitChangesTimeout) {
-            clearTimeout(this._commitChangesTimeout);
-            delete this._commitChangesTimeout;
-        }
-
-        this._style.text = this._formattedContent();
-    },
-
-    _editorBlured: function(codeMirror)
-    {
-        // Clicking a suggestion causes the editor to blur. We don't want to reset content in this case.
-        if (this._completionController.isHandlingClickEvent())
-            return;
-
-        // Reset the content on blur since we stop accepting external changes while the the editor is focused.
-        // This causes us to pick up any change that was suppressed while the editor was focused.
-        this._resetContent();
-    },
-
-    _contentChanged: function(codeMirror, change)
-    {
-        // Return early if the style isn't editable. This still can be called when readOnly is set because
-        // clicking on a color swatch modifies the text.
-        if (!this._style || !this._style.editable || this._ignoreCodeMirrorContentDidChangeEvent)
-            return;
-
-        this._markLinesWithCheckboxPlaceholder();
-
-        this._clearRemoveEditingLineClassesTimeout();
-        this._codeMirror.addLineClass(change.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
-
-        // When the change is a completion change, create color swatches now since the changes
-        // will not go through _propertiesChanged until completionControllerCompletionsHidden happens.
-        // This way any auto completed colors get swatches right away.
-        if (this._completionController.isCompletionChange(change))
-            this._createColorSwatches(false, change.from.line);
-
-        // Use a short delay for user input to coalesce more changes before committing. Other actions like
-        // undo, redo and paste are atomic and work better with a zero delay. CodeMirror identifies changes that
-        // get coalesced in the undo stack with a "+" prefix on the origin. Use that to set the delay for our coalescing.
-        const delay = change.origin && change.origin.charAt(0) === "+" ? WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay : 0;
-
-        // Reset the timeout so rapid changes coalesce after a short delay.
-        if (this._commitChangesTimeout)
-            clearTimeout(this._commitChangesTimeout);
-        this._commitChangesTimeout = setTimeout(this._commitChanges.bind(this), delay);
-    },
-
-    _updateTextMarkers: function(nonatomic)
-    {
-        function update()
-        {
-            this._clearTextMarkers(true);
-
-            var styleText = this._style.text;
-
-            this._iterateOverProperties(true, function(property) {
-                var styleTextRange = property.styleDeclarationTextRange;
-                console.assert(styleTextRange);
-                if (!styleTextRange)
-                    return;
-
-                var from = {line: styleTextRange.startLine, ch: styleTextRange.startColumn};
-                var to = {line: styleTextRange.endLine, ch: styleTextRange.endColumn};
-
-                // Adjust the line position for the missing prefix line.
-                if (this._prefixWhitespace) {
-                    --from.line;
-                    --to.line;
-                }
-
-                // Adjust the column for the stripped line prefix whitespace.
-                from.ch -= this._linePrefixWhitespace.length;
-                to.ch -= this._linePrefixWhitespace.length;
-
-                this._createTextMarkerForPropertyIfNeeded(from, to, property);
-            });
-
-            if (!this._codeMirror.getOption("readOnly")) {
-                // Matches a comment like: /* -webkit-foo: bar; */
-                const commentedPropertyRegex = /\/\*\s*[-\w]+\s*:\s*[^;]+;?\s*\*\//g;
-
-                // Look for comments that look like properties and add checkboxes in front of them.
-                var lineCount = this._codeMirror.lineCount();
-                for (var i = 0; i < lineCount; ++i) {
-                    var lineContent = this._codeMirror.getLine(i);
-
-                    var match = commentedPropertyRegex.exec(lineContent);
-                    while (match) {
-                        var checkboxElement = document.createElement("input");
-                        checkboxElement.type = "checkbox";
-                        checkboxElement.checked = false;
-                        checkboxElement.addEventListener("change", this._propertyCommentCheckboxChanged.bind(this));
-
-                        var from = {line: i, ch: match.index};
-                        var to = {line: i, ch: match.index + match[0].length};
-
-                        var checkboxMarker = this._codeMirror.setBookmark(from, checkboxElement);
-                        checkboxMarker.__propertyCheckbox = true;
-
-                        var commentTextMarker = this._codeMirror.markText(from, to);
-
-                        checkboxElement.__commentTextMarker = commentTextMarker;
-
-                        match = commentedPropertyRegex.exec(lineContent);
-                    }
-                }
-            }
-
-            // Look for colors and make swatches.
-            this._createColorSwatches(true);
-
-            this._markLinesWithCheckboxPlaceholder();
-        }
-
-        if (nonatomic)
-            update.call(this);
-        else
-            this._codeMirror.operation(update.bind(this));
-    },
-
-    _createColorSwatches: function(nonatomic, lineNumber)
-    {
-        function update()
-        {
-            // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffffff, white
-            const colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?![-.]))/g;
-
-            var start = typeof lineNumber === "number" ? lineNumber : 0;
-            var end = typeof lineNumber === "number" ? lineNumber + 1 : this._codeMirror.lineCount();
-
-            // Look for color strings and add swatches in front of them.
-            for (var i = start; i < end; ++i) {
-                var lineContent = this._codeMirror.getLine(i);
-
-                var match = colorRegex.exec(lineContent);
-                while (match) {
-
-                    // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
-                    if (match.index > 0 && /[-.]/.test(lineContent[match.index - 1])) {
-                        match = colorRegex.exec(lineContent);
-                        continue;
-                    }
-
-                    var from = {line: i, ch: match.index};
-                    var to = {line: i, ch: match.index + match[0].length};
-
-                    var foundColorMarker = false;
-                    var marks = this._codeMirror.findMarksAt(to);
-                    for (var j = 0; j < marks.length; ++j) {
-                        if (!marks[j].__markedColor)
-                            continue;
-                        foundColorMarker = true;
-                        break;
-                    }
-
-                    if (foundColorMarker) {
-                        match = colorRegex.exec(lineContent);
-                        continue;
-                    }
-
-                    try {
-                        var color = new WebInspector.Color(match[0]);
-                    } catch (e) {
-                        match = colorRegex.exec(lineContent);
-                        continue;
-                    }
-
-                    var swatchElement = document.createElement("span");
-                    swatchElement.title = WebInspector.UIString("Click to open a colorpicker. Shift-click to change color format.");
-                    swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
-                    swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
-
-                    var swatchInnerElement = document.createElement("span");
-                    swatchInnerElement.style.setProperty("background-color", match[0]);
-                    swatchElement.appendChild(swatchInnerElement);
-
-                    var swatchMarker = this._codeMirror.setBookmark(from, swatchElement);
-
-                    var colorTextMarker = this._codeMirror.markText(from, to);
-                    colorTextMarker.__markedColor = true;
-
-                    swatchInnerElement.__colorTextMarker = colorTextMarker;
-                    swatchInnerElement.__color = color;
-
-                    match = colorRegex.exec(lineContent);
-                }
-            }
-        }
-
-        if (nonatomic)
-            update.call(this);
-        else
-            this._codeMirror.operation(update.bind(this));
-    },
-
-    _updateTextMarkerForPropertyIfNeeded: function(property)
-    {
-        var textMarker = property.__propertyTextMarker;
-        console.assert(textMarker);
-        if (!textMarker)
-            return;
-
-        var range = textMarker.find();
-        console.assert(range);
-        if (!range)
-            return;
-
-        this._createTextMarkerForPropertyIfNeeded(range.from, range.to, property);
-    },
-
-    _createTextMarkerForPropertyIfNeeded: function(from, to, property)
-    {
-        if (!this._codeMirror.getOption("readOnly")) {
-            // Create a new checkbox element and marker.
-
-            console.assert(property.enabled);
-
-            var checkboxElement = document.createElement("input");
-            checkboxElement.type = "checkbox";
-            checkboxElement.checked = true;
-            checkboxElement.addEventListener("change", this._propertyCheckboxChanged.bind(this));
-            checkboxElement.__cssProperty = property;
-
-            var checkboxMarker = this._codeMirror.setBookmark(from, checkboxElement);
-            checkboxMarker.__propertyCheckbox = true;
-        }
-
-        var classNames = ["css-style-declaration-property"];
-
-        if (property.overridden)
-            classNames.push("overridden");
-
-        if (property.implicit)
-            classNames.push("implicit");
-
-        if (this._style.inherited && !property.inherited)
-            classNames.push("not-inherited");
-
-        if (!property.valid && property.hasOtherVendorNameOrKeyword())
-            classNames.push("other-vendor");
-        else if (!property.valid)
-            classNames.push("invalid");
-
-        if (!property.enabled)
-            classNames.push("disabled");
-
-        var classNamesString = classNames.join(" ");
-
-        // If there is already a text marker and it's in the same document, then try to avoid recreating it.
-        // FIXME: If there are multiple CSSStyleDeclarationTextEditors for the same style then this will cause
-        // both editors to fight and always recreate their text markers. This isn't really common.
-        if (property.__propertyTextMarker && property.__propertyTextMarker.doc.cm === this._codeMirror && property.__propertyTextMarker.find()) {
-            // If the class name is the same then we don't need to make a new marker.
-            if (property.__propertyTextMarker.className === classNamesString)
-                return;
-
-            property.__propertyTextMarker.clear();
-        }
-
-        var propertyTextMarker = this._codeMirror.markText(from, to, {className: classNamesString});
-
-        propertyTextMarker.__cssProperty = property;
-        property.__propertyTextMarker = propertyTextMarker;
-
-        property.addEventListener(WebInspector.CSSProperty.Event.OverriddenStatusChanged, this._propertyOverriddenStatusChanged, this);
-
-        this._removeCheckboxPlaceholder(from.line);
-    },
-
-    _clearTextMarkers: function(nonatomic, all)
-    {
-        function clear()
-        {
-            var markers = this._codeMirror.getAllMarks();
-            for (var i = 0; i < markers.length; ++i) {
-                var textMarker = markers[i];
-
-                if (!all && textMarker.__checkboxPlaceholder) {
-                    var position = textMarker.find();
-
-                    // Only keep checkbox placeholders if they are in the first column.
-                    if (position && !position.ch)
-                        continue;
-                }
-
-                if (textMarker.__cssProperty) {
-                    textMarker.__cssProperty.removeEventListener(null, null, this);
-
-                    delete textMarker.__cssProperty.__propertyTextMarker;
-                    delete textMarker.__cssProperty;
-                }
-
-                textMarker.clear();
-            }
-        }
-
-        if (nonatomic)
-            clear.call(this);
-        else
-            this._codeMirror.operation(clear.bind(this));
-    },
-
-    _iterateOverProperties: function(onlyVisibleProperties, callback)
-    {
-        var properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
-
-        if (!onlyVisibleProperties) {
-            // Filter based on options only when all properties are used.
-            properties = properties.filter((function(property) {
-                return !property.implicit || this._showsImplicitProperties || property.canonicalName in this._alwaysShowPropertyNames;
-            }).bind(this));
-
-            if (this._sortProperties)
-                properties.sort(function(a, b) { return a.name.localeCompare(b.name) });
-        }
-
-        for (var i = 0; i < properties.length; ++i) {
-            if (callback.call(this, properties[i], i === properties.length - 1))
-                break;
-        }
-    },
-
-    _propertyCheckboxChanged: function(event)
-    {
-        var property = event.target.__cssProperty;
-        console.assert(property);
-        if (!property)
-            return;
-
-        var textMarker = property.__propertyTextMarker;
-        console.assert(textMarker);
-        if (!textMarker)
-            return;
-
-        // Check if the property has been removed already, like from double-clicking
-        // the checkbox and calling this event listener multiple times.
-        var range = textMarker.find();
-        if (!range)
-            return;
-
-        var text = this._codeMirror.getRange(range.from, range.to);
-
-        function update()
-        {
-            // Replace the text with a commented version.
-            this._codeMirror.replaceRange("/* " + text + " */", range.from, range.to);
-
-            // Update the line for any color swatches that got removed.
-            this._createColorSwatches(true, range.from.line);
-        }
-
-        this._codeMirror.operation(update.bind(this));
-    },
-
-    _propertyCommentCheckboxChanged: function(event)
-    {
-        var commentTextMarker = event.target.__commentTextMarker;
-        console.assert(commentTextMarker);
-        if (!commentTextMarker)
-            return;
-
-        // Check if the comment has been removed already, like from double-clicking
-        // the checkbox and calling event listener multiple times.
-        var range = commentTextMarker.find();
-        if (!range)
-            return;
-
-        var text = this._codeMirror.getRange(range.from, range.to);
-
-        // Remove the comment prefix and suffix.
-        text = text.replace(/^\/\*\s*/, "").replace(/\s*\*\/$/, "");
-
-        // Add a semicolon if there isn't one already.
-        if (text.length && text.charAt(text.length - 1) !== ";")
-            text += ";";
-
-        function update()
-        {
-            this._codeMirror.addLineClass(range.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
-            this._codeMirror.replaceRange(text, range.from, range.to);
-
-            // Update the line for any color swatches that got removed.
-            this._createColorSwatches(true, range.from.line);
-        }
-
-        this._codeMirror.operation(update.bind(this));
-    },
-
-    _colorSwatchClicked: function(event)
-    {
-        if (this._colorPickerPopover)
-            return;
-
-        var swatch = event.target;
-
-        var color = swatch.__color;
-        console.assert(color);
-        if (!color)
-            return;
-
-        var colorTextMarker = swatch.__colorTextMarker;
-        console.assert(colorTextMarker);
-        if (!colorTextMarker)
-            return;
-
-        var range = colorTextMarker.find();
-        console.assert(range);
-        if (!range)
-            return;
-
-        function updateCodeMirror(newColorText)
-        {
-            function update()
-            {
-                // The original text marker might have been cleared by a style update,
-                // in this case we need to find the new color text marker so we know
-                // the right range for the new style color text.
-                if (!colorTextMarker || !colorTextMarker.find()) {
-                    colorTextMarker = null;
-
-                    var marks = this._codeMirror.findMarksAt(range.from);
-                    if (!marks.length)
-                        return;
-
-                    for (var i = 0; i < marks.length; ++i) {
-                        var mark = marks[i];
-                        if (!mark.__markedColor)
-                            continue;
-                        colorTextMarker = mark;
-                        break;
-                    }
-                }
-
-                if (!colorTextMarker)
-                    return;
-
-                // Sometimes we still might find a stale text marker with findMarksAt.
-                var newRange = colorTextMarker.find();
-                if (!newRange)
-                    return;
-
-                range = newRange;
-
-                colorTextMarker.clear();
-
-                this._codeMirror.replaceRange(newColorText, range.from, range.to);
-
-                // The color's text format could have changed, so we need to update the "range" 
-                // variable to anticipate a different "range.to" property.
-                range.to.ch = range.from.ch + newColorText.length;
-
-                colorTextMarker = this._codeMirror.markText(range.from, range.to);
-                colorTextMarker.__markedColor = true;
-
-                swatch.__colorTextMarker = colorTextMarker;
-            }
-
-            this._codeMirror.operation(update.bind(this));
-        }
-
-        if (event.shiftKey) {
-            var nextFormat = color.nextFormat();
-            console.assert(nextFormat);
-            if (!nextFormat)
-                return;
-            color.format = nextFormat;
-
-            var newColorText = color.toString();
-
-            // Ignore the change so we don't commit the format change. However, any future user
-            // edits will commit the color format.
-            this._ignoreCodeMirrorContentDidChangeEvent = true;
-            updateCodeMirror.call(this, newColorText);
-            delete this._ignoreCodeMirrorContentDidChangeEvent;
-        } else {
-            this._colorPickerPopover = new WebInspector.Popover(this);
-
-            var colorPicker = new WebInspector.CSSColorPicker;
-            colorPicker.color = color;
-
-            colorPicker.addEventListener(WebInspector.CSSColorPicker.Event.ColorChanged, function(event) {
-                updateCodeMirror.call(this, event.data.color.toString());
-            }.bind(this));
-
-            var bounds = WebInspector.Rect.rectFromClientRect(swatch.getBoundingClientRect());
-            
-            this._colorPickerPopover.content = colorPicker.element;
-            this._colorPickerPopover.present(bounds, [WebInspector.RectEdge.MIN_X]);
-
-            colorPicker.shown();
-        }
-    },
-
-    _propertyOverriddenStatusChanged: function(event)
-    {
-        this._updateTextMarkerForPropertyIfNeeded(event.target);
-    },
-
-    _propertiesChanged: function(event)
-    {
-        // Don't try to update the document while completions are showing. Doing so will clear
-        // the completion hint and prevent further interaction with the completion.
-        if (this._completionController.isShowingCompletions())
-            return;
-
-        // Reset the content if the text is different and we are not focused.
-        if (!this.focused && this._style.text !== this._formattedContent()) {
-            this._resetContent();
-            return;
-        }
-
-        this._removeEditingLineClassesSoon();
-
-        this._updateTextMarkers();
-    },
-
-    _markLinesWithCheckboxPlaceholder: function()
-    {
-        if (this._codeMirror.getOption("readOnly"))
-            return;
-
-        var linesWithPropertyCheckboxes = {};
-        var linesWithCheckboxPlaceholders = {};
-
-        var markers = this._codeMirror.getAllMarks();
-        for (var i = 0; i < markers.length; ++i) {
-            var textMarker = markers[i];
-            if (textMarker.__propertyCheckbox) {
-                var position = textMarker.find();
-                if (position)
-                    linesWithPropertyCheckboxes[position.line] = true;
-            } else if (textMarker.__checkboxPlaceholder) {
-                var position = textMarker.find();
-                if (position)
-                    linesWithCheckboxPlaceholders[position.line] = true;
-            }
-        }
-
-        var lineCount = this._codeMirror.lineCount();
-
-        for (var i = 0; i < lineCount; ++i) {
-            if (i in linesWithPropertyCheckboxes || i in linesWithCheckboxPlaceholders)
-                continue;
-
-            var position = {line: i, ch: 0};
-
-            var placeholderElement = document.createElement("div");
-            placeholderElement.className = WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName;
-
-            var placeholderMark = this._codeMirror.setBookmark(position, placeholderElement);
-            placeholderMark.__checkboxPlaceholder = true;
-        }
-    },
-
-    _removeCheckboxPlaceholder: function(lineNumber)
-    {
-        var marks = this._codeMirror.findMarksAt({line: lineNumber, ch: 0});
-        for (var i = 0; i < marks.length; ++i) {
-            var mark = marks[i];
-            if (!mark.__checkboxPlaceholder)
-                continue;
-
-            mark.clear();
-            return;
-        }
-    },
-
-    _resetContent: function()
-    {
-        if (this._commitChangesTimeout) {
-            clearTimeout(this._commitChangesTimeout);
-            delete this._commitChangesTimeout;
-        }
-
-        this._removeEditingLineClasses();
-
-        // Only allow editing if we have a style, it is editable and we have text range in the stylesheet.
-        var readOnly = !this._style || !this._style.editable || !this._style.styleSheetTextRange;
-        this._codeMirror.setOption("readOnly", readOnly);
-
-        if (readOnly) {
-            this.element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName);
-            this._codeMirror.setOption("placeholder", WebInspector.UIString("No Properties"));
-        } else {
-            this.element.classList.remove(WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName);
-            this._codeMirror.setOption("placeholder", WebInspector.UIString("No Properties \u2014 Click to Edit"));
-        }
-
-        if (!this._style) {
-            this._ignoreCodeMirrorContentDidChangeEvent = true;
-
-            this._clearTextMarkers(false, true);
-
-            this._codeMirror.setValue("");
-            this._codeMirror.clearHistory();
-            this._codeMirror.markClean();
-
-            delete this._ignoreCodeMirrorContentDidChangeEvent;
-
-            return;
-        }
-
-        function update()
-        {
-            // Remember the cursor position/selection.
-            var selectionAnchor = this._codeMirror.getCursor("anchor");
-            var selectionHead = this._codeMirror.getCursor("head");
-
-            function countNewLineCharacters(text)
-            {
-                var matches = text.match(/\n/g);
-                return matches ? matches.length : 0;
-            }
-
-            var styleText = this._style.text;
-
-            // Pretty print the content if there are more properties than there are lines.
-            // This could be an option exposed to the user; however, it is almost always
-            // desired in this case.
-
-            if (styleText && this._style.visibleProperties.length <= countNewLineCharacters(styleText.trim()) + 1) {
-                // This style has formatted text content, so use it for a high-fidelity experience.
-
-                var prefixWhitespaceMatch = styleText.match(/^[ \t]*\n/);
-                this._prefixWhitespace = prefixWhitespaceMatch ? prefixWhitespaceMatch[0] : "";
-
-                var suffixWhitespaceMatch = styleText.match(/\n[ \t]*$/);
-                this._suffixWhitespace = suffixWhitespaceMatch ? suffixWhitespaceMatch[0] : "";
-
-                this._codeMirror.setValue(styleText);
-
-                if (this._prefixWhitespace)
-                    this._codeMirror.removeLine(0);
-
-                if (this._suffixWhitespace) {
-                    var lineCount = this._codeMirror.lineCount();
-                    this._codeMirror.replaceRange("", {line: lineCount - 2}, {line: lineCount - 1});
-                }
-
-                this._linePrefixWhitespace = "";
-
-                var linesToStrip = [];
-
-                // Remember the whitespace so it can be restored on commit.
-                var lineCount = this._codeMirror.lineCount();
-                for (var i = 0; i < lineCount; ++i) {
-                    var lineContent = this._codeMirror.getLine(i);
-
-                    var prefixWhitespaceMatch = lineContent.match(/^\s+/);
-                    if (!prefixWhitespaceMatch)
-                        continue;
-
-                    linesToStrip.push(i);
-
-                    // Only remember the shortest whitespace so we don't loose any of the
-                    // original author's whitespace if their indentation lengths differed.
-                    // Using the shortest also makes the adjustment work in _updateTextMarkers.
-
-                    // FIXME: This messes up if there is a mix of spaces and tabs. One tab
-                    // will be shorter than 4 or 8 spaces, but will look the same visually.
-                    if (!this._linePrefixWhitespace || prefixWhitespaceMatch[0].length < this._linePrefixWhitespace.length)
-                        this._linePrefixWhitespace = prefixWhitespaceMatch[0];
-                }
-
-                // Strip the whitespace from the beginning of each line.
-                for (var i = 0; i < linesToStrip.length; ++i) {
-                    var lineNumber = linesToStrip[i];
-                    var from = {line: lineNumber, ch: 0};
-                    var to = {line: lineNumber, ch: this._linePrefixWhitespace.length};
-                    this._codeMirror.replaceRange("", from, to);
-                }
-
-                // Update all the text markers.
-                this._updateTextMarkers(true);
-            } else {
-                // This style does not have text content or it is minified, so we want to synthesize the text content.
-
-                this._prefixWhitespace = "";
-                this._suffixWhitespace = "";
-                this._linePrefixWhitespace = "";
-
-                this._codeMirror.setValue("");
-
-                var lineNumber = 0;
-
-                // Iterate only visible properties if we have original style text. That way we known we only syntesize
-                // what was originaly in the style text.
-                this._iterateOverProperties(styleText ? true : false, function(property) {
-                    // Some property text can have line breaks, so consider that in the ranges below.
-                    var propertyText = property.synthesizedText;
-                    var propertyLineCount = countNewLineCharacters(propertyText);
-
-                    var from = {line: lineNumber, ch: 0};
-                    var to = {line: lineNumber + propertyLineCount};
-
-                    this._codeMirror.replaceRange((lineNumber ? "\n" : "") + propertyText, from);
-                    this._createTextMarkerForPropertyIfNeeded(from, to, property);
-
-                    lineNumber += propertyLineCount + 1;
-                });
-
-                // Look for colors and make swatches.
-                this._createColorSwatches(true);
-            }
-
-            this._markLinesWithCheckboxPlaceholder();
-
-            // Restore the cursor position/selection.
-            this._codeMirror.setSelection(selectionAnchor, selectionHead);
-
-            // Reset undo history since undo past the reset is wrong when the content was empty before
-            // or the content was representing a previous style object.
-            this._codeMirror.clearHistory();
-
-            // Mark the editor as clean (unedited state).
-            this._codeMirror.markClean();
-        }
-
-        // This needs to be done first and as a separate operation to avoid an exception in CodeMirror.
-        this._clearTextMarkers(false, true);
-
-        this._ignoreCodeMirrorContentDidChangeEvent = true;
-        this._codeMirror.operation(update.bind(this));
-        delete this._ignoreCodeMirrorContentDidChangeEvent;
-    },
-
-    _updateJumpToSymbolTrackingMode: function()
-    {
-        var oldJumpToSymbolTrackingModeEnabled = this._jumpToSymbolTrackingModeEnabled;
-
-        if (!this._style || !this._style.ownerRule || !this._style.ownerRule.sourceCodeLocation)
-            this._jumpToSymbolTrackingModeEnabled = false;
-        else
-            this._jumpToSymbolTrackingModeEnabled = WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.shiftKey;
-
-        if (oldJumpToSymbolTrackingModeEnabled !== this._jumpToSymbolTrackingModeEnabled) {
-            if (this._jumpToSymbolTrackingModeEnabled)
-                this._tokenTrackingController.startTracking();
-            else {
-                this._tokenTrackingController.stopTracking();
-                this._tokenTrackingController.removeHighlightedRange();
-            }
-        }
-    },
-
-    tokenTrackingControllerHighlightedRangeWasClicked: function(tokenTrackingController)
-    {
-        console.assert(this._style.ownerRule.sourceCodeLocation);
-        if (!this._style.ownerRule.sourceCodeLocation)
-            return;
-
-        // Special case command clicking url(...) links.
-        var token = this._tokenTrackingController.candidate.hoveredToken;
-        if (/\blink\b/.test(token.type)) {
-            var url = token.string;
-            var baseURL = this._style.ownerRule.sourceCodeLocation.sourceCode.url;
-            WebInspector.openURL(absoluteURL(url, baseURL));
-            return;
-        }
-
-        // Jump to the rule if we can't find a property.
-        // Find a better source code location from the property that was clicked.
-        var sourceCodeLocation = this._style.ownerRule.sourceCodeLocation;
-        var marks = this._codeMirror.findMarksAt(this._tokenTrackingController.candidate.hoveredTokenRange.start);
-        for (var i = 0; i < marks.length; ++i) {
-            var mark = marks[i];
-            var property = mark.__cssProperty;
-            if (property) {
-                var sourceCode = sourceCodeLocation.sourceCode;
-                var styleSheetTextRange = property.styleSheetTextRange;
-                sourceCodeLocation = sourceCode.createSourceCodeLocation(styleSheetTextRange.startLine, styleSheetTextRange.startColumn);
-            }
-        }
-
-        WebInspector.resourceSidebarPanel.showSourceCodeLocation(sourceCodeLocation);
-    },
-
-    tokenTrackingControllerNewHighlightCandidate: function(tokenTrackingController, candidate)
-    {
-        this._tokenTrackingController.highlightRange(candidate.hoveredTokenRange);
-    }
-};
-
-WebInspector.CSSStyleDeclarationTextEditor.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.css
deleted file mode 100644
index 1e8a061f2..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar > .panel.details.css-style {
-    overflow: none;
-}
-
-.sidebar > .panel.details.css-style > .navigation-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-}
-
-.sidebar > .panel.details.css-style > .content {
-    position: absolute;
-    top: 22px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.sidebar > .panel.details.css-style > .content > .pseudo-classes {
-    font-size: 11px;
-    font-family: "Lucida Grande", sans-serif;
-
-    padding: 10px;
-
-    display: -webkit-flex;
-    -webkit-flex-flow: row wrap;
-    -webkit-justify-content: space-around;
-}
-
-.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group {
-    display: -webkit-inline-flex;
-    -webkit-flex-flow: row wrap;
-    -webkit-justify-content: space-around;
-    -webkit-flex: 1;
-}
-
-.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
-    color: rgb(96, 96, 96);
-    text-shadow: white 0 1px 0;
-
-    margin: 0 5px;
-    min-width: 55px;
-
-    display: inline-block;
-    white-space: nowrap;
-}
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js
deleted file mode 100644
index 35fb7ca5f..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleDetailsSidebarPanel.js
+++ /dev/null
@@ -1,240 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSStyleDetailsSidebarPanel = function()
-{
-    WebInspector.DOMDetailsSidebarPanel.call(this, "css-style", WebInspector.UIString("Styles"), WebInspector.UIString("Style"), "Images/NavigationItemBrushAndRuler.pdf", "4");
-
-    this._selectedPanel = null;
-
-    this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
-    this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
-    this.element.appendChild(this._navigationBar.element);
-
-    this._contentElement = document.createElement("div");
-    this._contentElement.className = WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName;
-
-    this._forcedPseudoClassCheckboxes = {};
-
-    if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
-        this._forcedPseudoClassContainer = document.createElement("div");
-        this._forcedPseudoClassContainer.className = WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesElementStyleClassName;
-
-        var groupElement = null;
-
-        WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
-            // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
-            var label = pseudoClass.capitalize();
-
-            var labelElement = document.createElement("label");
-
-            var checkboxElement = document.createElement("input");
-            checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
-            checkboxElement.type = "checkbox";
-
-            this._forcedPseudoClassCheckboxes[pseudoClass] = checkboxElement;
-
-            labelElement.appendChild(checkboxElement);
-            labelElement.appendChild(document.createTextNode(label));
-
-            if (!groupElement || groupElement.children.length === 2) {
-                groupElement = document.createElement("div");
-                groupElement.className = WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesGroupElementStyleClassName;
-                this._forcedPseudoClassContainer.appendChild(groupElement);
-            }
-
-            groupElement.appendChild(labelElement);
-        }.bind(this));
-
-        this._contentElement.appendChild(this._forcedPseudoClassContainer);
-    }
-
-    this.element.appendChild(this._contentElement);
-
-    this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel;
-    this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel;
-    this._metricsStyleDetailsPanel = new WebInspector.MetricsStyleDetailsPanel;
-
-    this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._metricsStyleDetailsPanel];
-
-    this._navigationBar.addNavigationItem(this._computedStyleDetailsPanel.navigationItem);
-    this._navigationBar.addNavigationItem(this._rulesStyleDetailsPanel.navigationItem);
-    this._navigationBar.addNavigationItem(this._metricsStyleDetailsPanel.navigationItem);
-
-    this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationItem.identifier);
-
-    // This will cause the selected panel to be set in _navigationItemSelected.
-    this._navigationBar.selectedNavigationItem = this._lastSelectedSectionSetting.value;
-};
-
-WebInspector.CSSStyleDetailsSidebarPanel.ContentStyleClassName = "content";
-WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesElementStyleClassName = "pseudo-classes";
-WebInspector.CSSStyleDetailsSidebarPanel.PseudoClassesGroupElementStyleClassName = "group";
-WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 38; // Default height of the forced pseudo classes container. Updated in widthDidChange.
-
-WebInspector.CSSStyleDetailsSidebarPanel.prototype = {
-    constructor: WebInspector.CSSStyleDetailsSidebarPanel,
-
-    // Public
-
-    supportsDOMNode: function(nodeToInspect)
-    {
-        return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
-    },
-
-    refresh: function()
-    {
-        var domNode = this.domNode;
-        if (!domNode)
-            return;
-
-        this._contentElement.scrollTop = this._initialScrollOffset;
-
-        for (var i = 0; i < this._panels.length; ++i) {
-            delete this._panels[i].element._savedScrollTop;
-            this._panels[i].markAsNeedsRefresh(domNode);
-        }
-
-        this._updatePseudoClassCheckboxes();
-    },
-
-    visibilityDidChange: function()
-    {
-        WebInspector.SidebarPanel.prototype.visibilityDidChange.call(this);
-
-        if (!this._selectedPanel)
-            return;
-
-        if (!this.visible) {
-            this._selectedPanel.hidden();
-            return;
-        }
-
-        this._navigationBar.updateLayout();
-
-        this._updateNoForcedPseudoClassesScrollOffset();
-
-        this._selectedPanel.shown();
-        this._selectedPanel.markAsNeedsRefresh(this.domNode);
-    },
-
-    widthDidChange: function()
-    {
-        this._updateNoForcedPseudoClassesScrollOffset();
-
-        if (this._selectedPanel)
-            this._selectedPanel.widthDidChange();
-    },
-
-    // Protected
-
-    addEventListeners: function()
-    {
-        this.domNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassCheckboxes, this);
-    },
-
-    removeEventListeners: function()
-    {
-        this.domNode.removeEventListener(null, null, this);
-    },
-
-    // Private
-
-    get _initialScrollOffset()
-    {
-        if (!WebInspector.cssStyleManager.canForcePseudoClasses())
-            return 0;
-        return this.domNode && this.domNode.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
-    },
-
-    _updateNoForcedPseudoClassesScrollOffset: function()
-    {
-        if (this._forcedPseudoClassContainer)
-            WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
-    },
-
-    _navigationItemSelected: function(event)
-    {
-        console.assert(event.target.selectedNavigationItem);
-        if (!event.target.selectedNavigationItem)
-            return;
-
-        var selectedNavigationItem = event.target.selectedNavigationItem;
-
-        var selectedPanel = null;
-        for (var i = 0; i < this._panels.length; ++i) {
-            if (this._panels[i].navigationItem !== selectedNavigationItem)
-                continue;
-            selectedPanel = this._panels[i];
-            break;
-        }
-
-        console.assert(selectedPanel);
-
-        if (this._selectedPanel) {
-            this._selectedPanel.hidden();
-            this._selectedPanel.element._savedScrollTop = this._contentElement.scrollTop;
-            this._selectedPanel.element.remove();
-        }
-
-        this._selectedPanel = selectedPanel;
-
-        if (this._selectedPanel) {
-            this._contentElement.appendChild(this._selectedPanel.element);
-
-            if (typeof this._selectedPanel.element._savedScrollTop === "number")
-                this._contentElement.scrollTop = this._selectedPanel.element._savedScrollTop;
-            else
-                this._contentElement.scrollTop = this._initialScrollOffset;
-
-            this._selectedPanel.shown();
-        }
-
-        this._lastSelectedSectionSetting.value = selectedNavigationItem.identifier;
-    },
-
-    _forcedPseudoClassCheckboxChanged: function(pseudoClass, event)
-    {
-        if (!this.domNode)
-            return;
-
-        this.domNode.setPseudoClassEnabled(pseudoClass, event.target.checked);
-    },
-
-    _updatePseudoClassCheckboxes: function()
-    {
-        if (!this.domNode)
-            return;
-
-        var enabledPseudoClasses = this.domNode.enabledPseudoClasses;
-
-        for (var pseudoClass in this._forcedPseudoClassCheckboxes) {
-            var checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
-            checkboxElement.checked = enabledPseudoClasses.contains(pseudoClass);
-        }
-    }
-};
-
-WebInspector.CSSStyleDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleManager.js b/Source/WebInspectorUI/UserInterface/CSSStyleManager.js
deleted file mode 100644
index ea625081a..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleManager.js
+++ /dev/null
@@ -1,366 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSStyleManager = function()
-{
-    WebInspector.Object.call(this);
-
-    CSSAgent.enable();
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceAdded, this);
-    WebInspector.Resource.addEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._resourceContentDidChange, this);
-    WebInspector.Resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
-
-    WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeModified, this._nodeAttributesDidChange, this);
-    WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeRemoved, this._nodeAttributesDidChange, this);
-    WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
-
-    this._colorFormatSetting = new WebInspector.Setting("default-color-format", WebInspector.Color.Format.Original);
-
-    this._styleSheetIdentifierMap = {};
-    this._styleSheetFrameURLMap = {};
-    this._nodeStylesMap = {};
-}
-
-WebInspector.CSSStyleManager.ForceablePseudoClasses = ["active", "focus", "hover", "visited"];
-
-WebInspector.CSSStyleManager.prototype = {
-    constructor: WebInspector.CSSStyleManager,
-
-    // Public
-
-    get preferredColorFormat()
-    {
-        return this._colorFormatSetting.value;
-    },
-
-    canForcePseudoClasses: function()
-    {
-        return !!CSSAgent.forcePseudoState;
-    },
-
-    propertyNameHasOtherVendorPrefix: function(name)
-    {
-        if (!name || name.length < 4 || name.charAt(0) !== "-")
-            return false;
-
-        var match = name.match(/^(?:-moz-|-ms-|-o-|-epub-)/);
-        if (!match)
-            return false;
-
-        return true;
-    },
-
-    propertyValueHasOtherVendorKeyword: function(value)
-    {
-        var match = value.match(/(?:-moz-|-ms-|-o-|-epub-)[-\w]+/);
-        if (!match)
-            return false;
-
-        return true;
-    },
-
-    canonicalNameForPropertyName: function(name)
-    {
-        if (!name || name.length < 8 || name.charAt(0) !== "-")
-            return name;
-
-        var match = name.match(/^(?:-webkit-|-khtml-|-apple-)(.+)/);
-        if (!match)
-            return name;
-
-        return match[1];
-    },
-
-    styleSheetForIdentifier: function(id)
-    {
-        if (id in this._styleSheetIdentifierMap)
-            return this._styleSheetIdentifierMap[id];
-
-        var styleSheet = new WebInspector.CSSStyleSheet(id);
-        this._styleSheetIdentifierMap[id] = styleSheet;
-        return styleSheet;
-    },
-
-    stylesForNode: function(node)
-    {
-        if (node.id in this._nodeStylesMap)
-            return this._nodeStylesMap[node.id];
-
-        var styles = new WebInspector.DOMNodeStyles(node);
-        this._nodeStylesMap[node.id] = styles;
-        return styles;
-    },
-
-    // Protected
-
-    mediaQueryResultChanged: function()
-    {
-        // Called from WebInspector.CSSObserver.
-
-        for (var key in this._nodeStylesMap)
-            this._nodeStylesMap[key].mediaQueryResultDidChange();
-    },
-
-    styleSheetChanged: function(styleSheetIdentifier)
-    {
-        // Called from WebInspector.CSSObserver.
-
-        var styleSheet = this.styleSheetForIdentifier(styleSheetIdentifier);
-        console.assert(styleSheet);
-
-        styleSheet.noteContentDidChange();
-
-        this._updateResourceContent(styleSheet);
-    },
-
-    // Private
-
-    _nodePseudoClassesDidChange: function(event)
-    {
-        var node = event.target;
-
-        for (var key in this._nodeStylesMap) {
-            var nodeStyles = this._nodeStylesMap[key];
-            if (nodeStyles.node !== node && !nodeStyles.node.isDescendant(node))
-                continue;
-            nodeStyles.pseudoClassesDidChange(node);
-        }
-    },
-
-    _nodeAttributesDidChange: function(event)
-    {
-        var node = event.target;
-
-        for (var key in this._nodeStylesMap) {
-            var nodeStyles = this._nodeStylesMap[key];
-            if (nodeStyles.node !== node && !nodeStyles.node.isDescendant(node))
-                continue;
-            nodeStyles.attributeDidChange(node, event.data.name);
-        }
-    },
-
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (!event.target.isMainFrame())
-            return;
-
-        // Clear our maps when the main frame navigates.
-
-        this._styleSheetIdentifierMap = {};
-        this._styleSheetFrameURLMap = {};
-        this._nodeStylesMap = {};
-    },
-
-    _resourceAdded: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        var resource = event.data.resource;
-        console.assert(resource);
-
-        if (resource.type !== WebInspector.Resource.Type.Stylesheet)
-            return;
-
-        this._clearStyleSheetsForResource(resource);
-    },
-
-    _resourceTypeDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Resource);
-
-        var resource = event.target;
-        if (resource.type !== WebInspector.Resource.Type.Stylesheet)
-            return;
-
-        this._clearStyleSheetsForResource(resource);
-    },
-
-    _clearStyleSheetsForResource: function(resource)
-    {
-        // Clear known stylesheets for this URL and frame. This will cause the stylesheets to
-        // be updated next time _fetchInfoForAllStyleSheets is called.
-        // COMPATIBILITY (iOS 6): The frame's id was not available for the key, so delete just the url too.
-        delete this._styleSheetFrameURLMap[this._frameURLMapKey(resource.parentFrame, resource.url)];
-        delete this._styleSheetFrameURLMap[resource.url];
-    },
-
-    _frameURLMapKey: function(frame, url)
-    {
-        return (frame ? frame.id + ":" : "") + url;
-    },
-
-    _lookupStyleSheetForResource: function(resource, callback)
-    {
-        this._lookupStyleSheet(resource.parentFrame, resource.url, callback);
-    },
-
-    _lookupStyleSheet: function(frame, url, callback)
-    {
-        console.assert(frame instanceof WebInspector.Frame);
-
-        function syleSheetsFetched()
-        {
-            callback(this._styleSheetFrameURLMap[key] || this._styleSheetFrameURLMap[url] || null);
-        }
-
-        var key = this._frameURLMapKey(frame, url);
-
-        // COMPATIBILITY (iOS 6): The frame's id was not available for the key, so check for just the url too.
-        if (key in this._styleSheetFrameURLMap || url in this._styleSheetFrameURLMap)
-            callback(this._styleSheetFrameURLMap[key] || this._styleSheetFrameURLMap[url] || null);
-        else
-            this._fetchInfoForAllStyleSheets(syleSheetsFetched.bind(this));
-    },
-
-    _fetchInfoForAllStyleSheets: function(callback)
-    {
-        console.assert(typeof callback === "function");
-
-        function processStyleSheets(error, styleSheets)
-        {
-            this._styleSheetFrameURLMap = {};
-
-            if (error) {
-                callback();
-                return;
-            }
-
-            for (var i = 0; i < styleSheets.length; ++i) {
-                var styleSheetInfo = styleSheets[i];
-
-                // COMPATIBILITY (iOS 6): The info did not have 'frameId', so make parentFrame null in that case.
-                var parentFrame = "frameId" in styleSheetInfo ? WebInspector.frameResourceManager.frameForIdentifier(styleSheetInfo.frameId) : null;
-
-                var styleSheet = this.styleSheetForIdentifier(styleSheetInfo.styleSheetId);
-                styleSheet.updateInfo(styleSheetInfo.sourceURL, parentFrame);
-
-                var key = this._frameURLMapKey(parentFrame, styleSheetInfo.sourceURL);
-                this._styleSheetFrameURLMap[key] = styleSheet;
-            }
-
-            callback();
-        }
-
-        CSSAgent.getAllStyleSheets(processStyleSheets.bind(this));
-    },
-
-    _resourceContentDidChange: function(event)
-    {
-        var resource = event.target;
-        if (resource === this._ignoreResourceContentDidChangeEventForResource)
-            return;
-
-        // Ignore if it isn't a CSS stylesheet.
-        if (resource.type !== WebInspector.Resource.Type.Stylesheet || resource.syntheticMIMEType !== "text/css")
-            return;
-
-        function applyStyleSheetChanges()
-        {
-            function styleSheetFound(styleSheet)
-            {
-                delete resource.__pendingChangeTimeout;
-
-                console.assert(styleSheet);
-                if (!styleSheet)
-                    return;
-
-                // To prevent updating a TextEditor's content while the user is typing in it we want to
-                // ignore the next _updateResourceContent call.
-                resource.__ignoreNextUpdateResourceContent = true;
-
-                WebInspector.branchManager.currentBranch.revisionForRepresentedObject(styleSheet).content = resource.content;
-            }
-
-            this._lookupStyleSheetForResource(resource, styleSheetFound.bind(this));
-        }
-
-        if (resource.__pendingChangeTimeout)
-            clearTimeout(resource.__pendingChangeTimeout);
-        resource.__pendingChangeTimeout = setTimeout(applyStyleSheetChanges.bind(this), 500);
-    },
-
-    _updateResourceContent: function(styleSheet)
-    {
-        console.assert(styleSheet);
-
-        function fetchedStyleSheetContent(styleSheet, content)
-        {
-            delete styleSheet.__pendingChangeTimeout;
-
-            console.assert(styleSheet.url);
-            if (!styleSheet.url)
-                return;
-
-            var resource = null;
-
-            // COMPATIBILITY (iOS 6): The stylesheet did not always have a frame, so fallback to looking
-            // for the resource in all frames.
-            if (styleSheet.parentFrame)
-                resource = styleSheet.parentFrame.resourceForURL(styleSheet.url);
-            else
-                resource = WebInspector.frameResourceManager.resourceForURL(styleSheet.url);
-
-            if (!resource)
-                return;
-
-            // Only try to update stylesheet resources. Other resources, like documents, can contain
-            // multiple stylesheets and we don't have the source ranges to update those.
-            if (resource.type !== WebInspector.Resource.Type.Stylesheet)
-                return;
-
-            if (resource.__ignoreNextUpdateResourceContent) {
-                delete resource.__ignoreNextUpdateResourceContent;
-                return;
-            }
-
-            this._ignoreResourceContentDidChangeEventForResource = resource;
-            WebInspector.branchManager.currentBranch.revisionForRepresentedObject(resource).content = content;
-            delete this._ignoreResourceContentDidChangeEventForResource;
-        }
-
-        function styleSheetReady()
-        {
-            styleSheet.requestContent(fetchedStyleSheetContent.bind(this));
-        }
-
-        function applyStyleSheetChanges()
-        {
-            if (styleSheet.url)
-                styleSheetReady.call(this);
-            else
-                this._fetchInfoForAllStyleSheets(styleSheetReady.bind(this));
-        }
-
-        if (styleSheet.__pendingChangeTimeout)
-            clearTimeout(styleSheet.__pendingChangeTimeout);
-        styleSheet.__pendingChangeTimeout = setTimeout(applyStyleSheetChanges.bind(this), 500);
-    }
-}
-
-WebInspector.CSSStyleManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CSSStyleSheet.js b/Source/WebInspectorUI/UserInterface/CSSStyleSheet.js
deleted file mode 100644
index ef26aeb1a..000000000
--- a/Source/WebInspectorUI/UserInterface/CSSStyleSheet.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CSSStyleSheet = function(id, url, parentFrame)
-{
-    WebInspector.SourceCode.call(this);
-
-    console.assert(id);
-
-    this._id = id || null;
-
-    this.updateInfo(url, parentFrame);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.CSSStyleSheet);
-
-WebInspector.CSSStyleSheet.resetUniqueDisplayNameNumbers = function()
-{
-    WebInspector.CSSStyleSheet._nextUniqueDisplayNameNumber = 1;
-}
-
-WebInspector.CSSStyleSheet._nextUniqueDisplayNameNumber = 1;
-
-WebInspector.CSSStyleSheet.Event = {
-    ContentDidChange: "stylesheet-content-did-change"
-};
-
-WebInspector.CSSStyleSheet.prototype = {
-    constructor: WebInspector.CSSStyleSheet,
-
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get parentFrame()
-    {
-        return this._parentFrame;
-    },
-
-    get url()
-    {
-        return this._url;
-    },
-
-    get urlComponents()
-    {
-        if (!this._urlComponents)
-            this._urlComponents = parseURL(this._url);
-        return this._urlComponents;
-    },
-
-    get displayName()
-    {
-        if (this._url)
-            return WebInspector.displayNameForURL(this._url, this.urlComponents);
-
-        // Assign a unique number to the StyleSheet object so it will stay the same.
-        if (!this._uniqueDisplayNameNumber)
-            this._uniqueDisplayNameNumber = this.constructor._nextUniqueDisplayNameNumber++;
-
-        return WebInspector.UIString("Anonymous StyleSheet %d").format(this._uniqueDisplayNameNumber);
-    },
-
-    // Protected
-
-    updateInfo: function(url, parentFrame)
-    {
-        this._url = url || null;
-        delete this._urlComponents;
-
-        this._parentFrame = parentFrame || null;
-    },
-
-    get revisionForRequestedContent()
-    {
-        return this.currentRevision;
-    },
-
-    handleCurrentRevisionContentChange: function()
-    {
-        if (!this._id)
-            return;
-
-        function contentDidChange(error)
-        {
-            if (error)
-                return;
-
-            DOMAgent.markUndoableState();
-
-            this.dispatchEventToListeners(WebInspector.CSSStyleSheet.Event.ContentDidChange);
-        }
-
-        this._ignoreNextContentDidChangeNotification = true;
-
-        CSSAgent.setStyleSheetText(this._id, this.currentRevision.content, contentDidChange.bind(this));
-    },
-
-    canRequestContentFromBackend: function()
-    {
-        // We can request content if we have an id.
-        return !!this._id;
-    },
-
-    requestContentFromBackend: function(callback)
-    {
-        if (!this._id) {
-            // There is no identifier to request content with. Return false to cause the
-            // pending callbacks to get null content.
-            return false;
-        }
-
-        CSSAgent.getStyleSheetText(this._id, callback);
-        return true;
-    },
-
-    noteContentDidChange: function()
-    {
-        if (this._ignoreNextContentDidChangeNotification) {
-            delete this._ignoreNextContentDidChangeNotification;
-            return false;
-        }
-
-        this.markContentAsStale();
-        this.dispatchEventToListeners(WebInspector.CSSStyleSheet.Event.ContentDidChange);
-        return true;
-    }
-};
-
-WebInspector.CSSStyleSheet.prototype.__proto__ = WebInspector.SourceCode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CallFrame.js b/Source/WebInspectorUI/UserInterface/CallFrame.js
deleted file mode 100644
index ffe602b0a..000000000
--- a/Source/WebInspectorUI/UserInterface/CallFrame.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CallFrame = function(id, sourceCodeLocation, functionName, thisObject, scopeChain, nativeCode)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
-    console.assert(!thisObject || thisObject instanceof WebInspector.RemoteObject);
-    console.assert(!scopeChain || scopeChain instanceof Array);
-
-    this._id = id || null;
-    this._sourceCodeLocation = sourceCodeLocation || null;
-    this._functionName = functionName || null;
-    this._thisObject = thisObject || null;
-    this._scopeChain = scopeChain || [];
-    this._nativeCode = nativeCode || false;
-};
-
-WebInspector.CallFrame.prototype = {
-    constructor: WebInspector.CallFrame,
-
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get sourceCodeLocation()
-    {
-        return this._sourceCodeLocation;
-    },
-
-    get functionName()
-    {
-        return this._functionName;
-    },
-
-    get nativeCode()
-    {
-        return this._nativeCode;
-    },
-
-    get thisObject()
-    {
-        return this._thisObject;
-    },
-
-    get scopeChain()
-    {
-        return this._scopeChain;
-    },
-
-    collectScopeChainVariableNames: function(callback)
-    {
-        var result = {this: true};
-
-        var pendingRequests = this._scopeChain.length;
-
-        function propertiesCollected(properties)
-        {
-            for (var i = 0; properties && i < properties.length; ++i)
-                result[properties[i].name] = true;
-
-            if (--pendingRequests)
-                return;
-
-            callback(result);
-        }
-
-        for (var i = 0; i < this._scopeChain.length; ++i)
-            this._scopeChain[i].object.getAllProperties(propertiesCollected);
-    }
-};
-
-WebInspector.CallFrame.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CallFrameIcons.css b/Source/WebInspectorUI/UserInterface/CallFrameIcons.css
deleted file mode 100644
index 66e8d3ca9..000000000
--- a/Source/WebInspectorUI/UserInterface/CallFrameIcons.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.function-icon .icon {
-    content: url(Images/Function.pdf);
-}
-
-.event-listener-icon .icon {
-    content: url(Images/EventListener.pdf);
-}
-
-.native-icon .icon {
-    content: url(Images/Native.pdf);
-}
diff --git a/Source/WebInspectorUI/UserInterface/CallFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/CallFrameTreeElement.js
deleted file mode 100644
index 1fb0329c9..000000000
--- a/Source/WebInspectorUI/UserInterface/CallFrameTreeElement.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CallFrameTreeElement = function(callFrame)
-{
-    console.assert(callFrame instanceof WebInspector.CallFrame);
-
-    var className = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
-    if (callFrame.nativeCode)
-        className = WebInspector.CallFrameTreeElement.NativeIconStyleClassName;
-
-    // This is more than likely an event listener function with an "on" prefix and it is
-    // as long or longer than the shortest event listener name -- "oncut".
-    if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
-        className = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
-
-    var title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
-
-    WebInspector.GeneralTreeElement.call(this, className, title, null, callFrame, false);
-
-    if (!callFrame.nativeCode && callFrame.sourceCodeLocation) {
-        var displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
-        if (displayScriptURL) {
-            this.subtitle = document.createElement("span");
-            callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, "textContent");
-            // Set the tooltip on the entire tree element in onattach, once the element is created.
-            this.tooltipHandledSeparately = true;
-        }
-    }
-
-    this._callFrame = callFrame;
-
-    this.small = true;
-};
-
-WebInspector.CallFrameTreeElement.FunctionIconStyleClassName = "function-icon";
-WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName = "event-listener-icon";
-WebInspector.CallFrameTreeElement.NativeIconStyleClassName = "native-icon";
-
-WebInspector.CallFrameTreeElement.prototype = {
-    constructor: WebInspector.CallFrameTreeElement,
-
-    // Public
-
-    get callFrame()
-    {
-        return this._callFrame;
-    },
-
-    // Protected
-
-    onattach: function()
-    {
-        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
-
-        console.assert(this.element);
-
-        if (this.tooltipHandledSeparately) {
-            var tooltipPrefix = this.mainTitle + "\n";
-            this._callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
-        }
-    }
-};
-
-WebInspector.CallFrameTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ClusterContentView.js b/Source/WebInspectorUI/UserInterface/ClusterContentView.js
deleted file mode 100644
index 4631a0104..000000000
--- a/Source/WebInspectorUI/UserInterface/ClusterContentView.js
+++ /dev/null
@@ -1,257 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ClusterContentView = function(representedObject)
-{
-    WebInspector.ContentView.call(this, representedObject);
-
-    this.element.classList.add(WebInspector.ClusterContentView.StyleClassName);
-
-    this._contentViewContainer = new WebInspector.ContentViewContainer();
-    this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
-    this.element.appendChild(this._contentViewContainer.element);
-
-    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
-    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
-    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
-};
-
-WebInspector.ClusterContentView.StyleClassName = "cluster";
-
-WebInspector.ClusterContentView.prototype = {
-    constructor: WebInspector.ClusterContentView,
-
-    // Public
-
-    get navigationItems()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        return currentContentView ? currentContentView.navigationItems : [];
-    },
-
-    get contentViewContainer()
-    {
-        return this._contentViewContainer;
-    },
-
-    get supportsSplitContentBrowser()
-    {
-        if (this._contentViewContainer.currentContentView)
-            return this._contentViewContainer.currentContentView.supportsSplitContentBrowser;
-        return true;
-    },
-
-    updateLayout: function()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (currentContentView)
-            currentContentView.updateLayout();
-    },
-
-    shown: function()
-    {
-        this._contentViewContainer.shown();
-    },
-
-    hidden: function()
-    {
-        this._contentViewContainer.hidden();
-    },
-
-    closed: function()
-    {
-        this._contentViewContainer.closeAllContentViews();
-
-        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
-        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
-        WebInspector.ContentView.removeEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
-    },
-
-    canGoBack: function()
-    {
-        return this._contentViewContainer.canGoBack();
-    },
-
-    canGoForward: function()
-    {
-        return this._contentViewContainer.canGoForward();
-    },
-
-    goBack: function()
-    {
-        this._contentViewContainer.goBack()
-    },
-
-    goForward: function()
-    {
-        this._contentViewContainer.goForward()
-    },
-
-    get selectionPathComponents()
-    {
-        if (!this._contentViewContainer.currentContentView)
-            return [];
-        return this._contentViewContainer.currentContentView.selectionPathComponents;
-    },
-
-    get supplementalRepresentedObjects()
-    {
-        if (!this._contentViewContainer.currentContentView)
-            return [];
-        return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
-    },
-
-    get handleCopyEvent()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
-    },
-
-    get supportsSave()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        return currentContentView && currentContentView.supportsSave;
-    },
-
-    get saveData()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        return currentContentView && currentContentView.saveData || null;
-    },
-
-    get supportsSearch()
-    {
-        // Always return true so we can intercept the search query to resend it when switching content views.
-        return true;
-    },
-
-    get numberOfSearchResults()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return null;
-        return currentContentView.numberOfSearchResults;
-    },
-
-    get hasPerformedSearch()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return false;
-        return currentContentView.hasPerformedSearch;
-    },
-
-    set automaticallyRevealFirstSearchResult(reveal)
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-        currentContentView.automaticallyRevealFirstSearchResult = reveal;
-    },
-
-    performSearch: function(query)
-    {
-        this._searchQuery = query;
-
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-        currentContentView.performSearch(query);
-    },
-
-    searchCleared: function()
-    {
-        this._searchQuery = null;
-
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-        currentContentView.searchCleared();
-    },
-
-    searchQueryWithSelection: function()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return null;
-        return currentContentView.searchQueryWithSelection();
-    },
-
-    revealPreviousSearchResult: function(changeFocus)
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-        currentContentView.revealPreviousSearchResult(changeFocus);
-    },
-
-    revealNextSearchResult: function(changeFocus)
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-        currentContentView.revealNextSearchResult(changeFocus);
-    },
-
-    // Private
-
-    _currentContentViewDidChange: function(event)
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (currentContentView && currentContentView.supportsSearch) {
-            if (this._searchQuery)
-                currentContentView.performSearch(this._searchQuery);
-            else
-                currentContentView.searchCleared();
-        }
-
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
-    },
-
-    _contentViewSelectionPathComponentDidChange: function(event)
-    {
-        if (event.target !== this._contentViewContainer.currentContentView)
-            return;
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _contentViewSupplementalRepresentedObjectsDidChange: function(event)
-    {
-        if (event.target !== this._contentViewContainer.currentContentView)
-            return;
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
-    },
-
-    _contentViewNumberOfSearchResultsDidChange: function(event)
-    {
-        if (event.target !== this._contentViewContainer.currentContentView)
-            return;
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
-    }
-};
-
-WebInspector.ClusterContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js b/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js
deleted file mode 100644
index db9508c99..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorAdditions.js
+++ /dev/null
@@ -1,435 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-(function () {
-    // By default CodeMirror defines syntax highlighting styles based on token
-    // only and shared styles between modes. This limiting and does not match
-    // what we have done in the Web Inspector. So this modifies the XML, CSS
-    // and JavaScript modes to supply two styles for each token. One for the
-    // token and one with the mode name.
-
-    function tokenizeLinkString(stream, state)
-    {
-        console.assert(state._linkQuoteCharacter !== undefined);
-
-        // Eat the string until the same quote is found that started the string.
-        // If this is unquoted, then eat until whitespace or common parse errors.
-        if (state._linkQuoteCharacter)
-            stream.eatWhile(new RegExp("[^" + state._linkQuoteCharacter + "]"));
-        else
-            stream.eatWhile(/[^\s\u00a0=<>\"\']/);
-
-        // If the stream isn't at the end of line then we found the end quote.
-        // In the case, change _linkTokenize to parse the end of the link next.
-        // Otherwise _linkTokenize will stay as-is to parse more of the link.
-        if (!stream.eol())
-            state._linkTokenize = tokenizeEndOfLinkString;
-
-        return "link";
-    }
-
-    function tokenizeEndOfLinkString(stream, state)
-    {
-        console.assert(state._linkQuoteCharacter !== undefined);
-        console.assert(state._linkBaseStyle);
-
-        // Eat the quote character to style it with the base style.
-        if (state._linkQuoteCharacter)
-            stream.eat(state._linkQuoteCharacter);
-
-        var style = state._linkBaseStyle;
-
-        // Clean up the state.
-        delete state._linkTokenize;
-        delete state._linkQuoteCharacter;
-        delete state._linkBaseStyle;
-
-        return style;
-    }
-
-    function extendedXMLToken(stream, state)
-    {
-        if (state._linkTokenize) {
-            // Call the link tokenizer instead.
-            var style = state._linkTokenize(stream, state);
-            return style && (style + " m-" + this.name);
-        }
-
-        // Remember the start position so we can rewind if needed.
-        var startPosition = stream.pos;
-        var style = this._token(stream, state);
-
-        if (style === "attribute") {
-            // Look for "href" or "src" attributes. If found then we should
-            // expect a string later that should get the "link" style instead.
-            var text = stream.current().toLowerCase();
-            if (text === "href" || text === "src")
-                state._expectLink = true;
-            else
-                delete state._expectLink;
-        } else if (state._expectLink && style === "string") {
-            delete state._expectLink;
-
-            // This is a link, so setup the state to process it next.
-            state._linkTokenize = tokenizeLinkString;
-            state._linkBaseStyle = style;
-
-            // The attribute may or may not be quoted.
-            var quote = stream.current()[0];
-            state._linkQuoteCharacter = quote === "'" || quote === "\"" ? quote : null;
-
-            // Rewind the steam to the start of this token.
-            stream.pos = startPosition;
-
-            // Eat the open quote of the string so the string style
-            // will be used for the quote character.
-            if (state._linkQuoteCharacter)
-                stream.eat(state._linkQuoteCharacter);
-        } else if (style) {
-            // We don't expect other tokens between attribute and string since
-            // spaces and the equal character are not tokenized. So if we get
-            // another token before a string then we stop expecting a link.
-            delete state._expectLink;
-        }
-
-        return style && (style + " m-" + this.name);
-    }
-
-    function tokenizeCSSURLString(stream, state)
-    {
-        console.assert(state._urlQuoteCharacter);
-
-        // If we are an unquoted url string, return whitespace blocks as a whitespace token (null).
-        if (state._unquotedURLString && stream.eatSpace())
-            return null;
-
-        var ch = null;
-        var escaped = false;
-        var reachedEndOfURL = false;
-        var lastNonWhitespace = stream.pos;
-        var quote = state._urlQuoteCharacter;
-
-        // Parse characters until the end of the stream/line or a proper end quote character.
-        while ((ch = stream.next()) != null) {
-            if (ch == quote && !escaped) {
-                reachedEndOfURL = true;
-                break;
-            }
-            escaped = !escaped && ch === "\\";
-            if (!/[\s\u00a0]/.test(ch))
-                lastNonWhitespace = stream.pos;
-        }
-
-        // If we are an unquoted url string, do not include trailing whitespace, rewind to the last real character.
-        if (state._unquotedURLString)
-            stream.pos = lastNonWhitespace;
-
-        // If we have reached the proper the end of the url string, switch to the end tokenizer to reset the state.
-        if (reachedEndOfURL) {
-            if (!state._unquotedURLString)
-                stream.backUp(1);
-            this._urlTokenize = tokenizeEndOfCSSURLString;
-        }
-
-        return "link";
-    }
-
-    function tokenizeEndOfCSSURLString(stream, state)
-    {
-        console.assert(state._urlQuoteCharacter);
-        console.assert(state._urlBaseStyle);
-
-        // Eat the quote character to style it with the base style.
-        if (!state._unquotedURLString)
-            stream.eat(state._urlQuoteCharacter);
-
-        var style = state._urlBaseStyle;
-
-        delete state._urlTokenize;
-        delete state._urlQuoteCharacter;
-        delete state._urlBaseStyle;
-
-        return style;
-    }
-
-    function extendedCSSToken(stream, state)
-    {
-        if (state._urlTokenize) {
-            // Call the link tokenizer instead.
-            var style = state._urlTokenize(stream, state);
-            return style && (style + " m-" + (this.alternateName || this.name));
-        }
-
-        // Remember the start position so we can rewind if needed.
-        var startPosition = stream.pos;
-        var style = this._token(stream, state);
-
-        if (style) {
-            if (style === "variable-2" && stream.current() === "url") {
-                // If the current text is "url" then we should expect the next string token to be a link.
-                state._expectLink = true;
-            } else if (state._expectLink && style === "string") {
-                // We expected a string and got it. This is a link. Parse it the way we want it.
-                delete state._expectLink;
-
-                // This is a link, so setup the state to process it next.
-                state._urlTokenize = tokenizeCSSURLString;
-                state._urlBaseStyle = style;
-
-                // The url may or may not be quoted.
-                var quote = stream.current()[0];
-                state._urlQuoteCharacter = quote === "'" || quote === "\"" ? quote : ")";
-                state._unquotedURLString = state._urlQuoteCharacter === ")";
-
-                // Rewind the steam to the start of this token.
-                stream.pos = startPosition;
-
-                // Eat the open quote of the string so the string style
-                // will be used for the quote character.
-                if (!state._unquotedURLString)
-                    stream.eat(state._urlQuoteCharacter);
-            } else if (state._expectLink) {
-                // We expected a string and didn't get one. Cleanup.
-                delete state._expectLink;
-            }
-        }
-
-        return style && (style + " m-" + (this.alternateName || this.name));
-    }
-
-    function extendedToken(stream, state)
-    {
-        // CodeMirror moves the original token function to _token when we extended it.
-        // So call it to get the style that we will add an additional class name to.
-        var style = this._token(stream, state);
-        return style && (style + " m-" + (this.alternateName || this.name));
-    }
-
-    function extendedCSSRuleStartState(base)
-    {
-        // CodeMirror moves the original token function to _startState when we extended it.
-        // So call it to get the original start state that we will modify.
-        var state = this._startState(base);
-
-        // Start the stack off like it has already parsed a rule. This causes everything
-        // after to be parsed as properties in a rule.
-        state.stack = ["rule"];
-
-        return state;
-    }
-
-    CodeMirror.extendMode("css-base", {token: extendedCSSToken, alternateName: "css"});
-    CodeMirror.extendMode("xml", {token: extendedXMLToken});
-    CodeMirror.extendMode("javascript", {token: extendedToken});
-
-    CodeMirror.defineMode("css-rule", CodeMirror.modes.css);
-    CodeMirror.extendMode("css-rule", {startState: extendedCSSRuleStartState});
-
-    CodeMirror.defineExtension("hasLineClass", function(line, where, className) {
-        // This matches the arguments to addLineClass and removeLineClass.
-        var classProperty = (where === "text" ? "textClass" : (where == "background" ? "bgClass" : "wrapClass"));
-        var lineInfo = this.lineInfo(line);
-        if (!lineInfo)
-            return false;
-
-        if (!lineInfo[classProperty])
-            return false;
-
-        // Test for the simple case.
-        if (lineInfo[classProperty] === className)
-            return true;
-
-        // Do a quick check for the substring. This is faster than a regex, which requires escaping the input first.
-        var index = lineInfo[classProperty].indexOf(className);
-        if (index === -1)
-            return false;
-
-        // Check that it is surrounded by spaces. Add padding spaces first to work with beginning and end of string cases.
-        var paddedClass = " " + lineInfo[classProperty] + " ";
-        return paddedClass.indexOf(" " + className + " ", index) !== -1;
-    });
-
-    CodeMirror.defineExtension("toggleLineClass", function(line, where, className) {
-        if (this.hasLineClass(line, where, className)) {
-            this.removeLineClass(line, where, className);
-            return false;
-        }
-
-        this.addLineClass(line, where, className);
-        return true;
-    });
-
-    CodeMirror.defineExtension("alterNumberInRange", function(amount, startPosition, endPosition, affectsSelection) {
-        // We don't try if the range is multiline, pass to another key handler.
-        if (startPosition.line !== endPosition.line)
-            return false;
-
-        var line = this.getLine(startPosition.line);
-
-        var foundPeriod = false;
-
-        var start = NaN;
-        var end = NaN;
-
-        for (var i = startPosition.ch; i >= 0; --i) {
-            var character = line.charAt(i);
-
-            if (character === ".") {
-                if (foundPeriod)
-                    break;
-                foundPeriod = true;
-            } else if (character !== "-" && character !== "+" && isNaN(parseInt(character))) {
-                // Found the end already, just scan backwards.
-                if (i === startPosition.ch) {
-                    end = i;
-                    continue;
-                }
-
-                break;
-            }
-
-            start = i;
-        }
-
-        if (isNaN(end)) {
-            for (var i = startPosition.ch + 1; i < line.length; ++i) {
-                var character = line.charAt(i);
-
-                if (character === ".") {
-                    if (foundPeriod) {
-                        end = i;
-                        break;
-                    }
-
-                    foundPeriod = true;
-                } else if (isNaN(parseInt(character))) {
-                    end = i;
-                    break;
-                }
-
-                end = i + 1;
-            }
-        }
-
-        // No number range found, pass to another key handler.
-        if (isNaN(start) || isNaN(end))
-            return false;
-
-        var number = parseFloat(line.substring(start, end));
-        if (number < 1 && number >= -1 && amount === 1)
-            amount = 0.1;
-        else if (number <= 1 && number > -1 && amount === -1)
-            amount = -0.1;
-
-        // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
-        // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
-        var alteredNumber = Number((number + amount).toFixed(6));
-        var alteredNumberString = alteredNumber.toString();
-
-        var from = {line: startPosition.line, ch: start};
-        var to = {line: startPosition.line, ch: end};
-
-        this.replaceRange(alteredNumberString, from, to);
-
-        if (affectsSelection) {
-            var newTo = {line: startPosition.line, ch: from.ch + alteredNumberString.length};
-
-            // Fix up the selection so it follows the increase or decrease in the replacement length.
-            if (endPosition.ch >= to.ch)
-                endPosition = newTo;
-
-            if (startPosition.ch >= to.ch)
-                startPosition = newTo;
-
-            this.setSelection(startPosition, endPosition);
-        }
-
-        return true;
-    });
-
-    function alterNumber(amount, codeMirror)
-    {
-        var startPosition = codeMirror.getCursor("anchor");
-        var endPosition = codeMirror.getCursor("head");
-
-        var foundNumber = codeMirror.alterNumberInRange(amount, startPosition, endPosition, true);
-        if (!foundNumber)
-            return CodeMirror.Pass;
-    }
-
-    function ignoreKey(codeMirror)
-    {
-        // Do nothing to ignore the key.
-    }
-
-    CodeMirror.keyMap["default"] = {
-        "Alt-Up": alterNumber.bind(null, 1),
-        "Shift-Alt-Up": alterNumber.bind(null, 10),
-        "Alt-PageUp": alterNumber.bind(null, 10),
-        "Shift-Alt-PageUp": alterNumber.bind(null, 100),
-        "Alt-Down": alterNumber.bind(null, -1),
-        "Shift-Alt-Down": alterNumber.bind(null, -10),
-        "Alt-PageDown": alterNumber.bind(null, -10),
-        "Shift-Alt-PageDown": alterNumber.bind(null, -100),
-        "Cmd-/": "toggleComment",
-        "Shift-Tab": ignoreKey,
-        fallthrough: "macDefault"
-    };
-
-    // Register some extra MIME-types for CodeMirror. These are in addition to the
-    // ones CodeMirror already registers, like text/html, text/javascript, etc.
-    const extraXMLTypes = ["text/xml", "text/xsl"];
-    extraXMLTypes.forEach(function(type) {
-        CodeMirror.defineMIME(type, "xml");
-    });
-
-    const extraHTMLTypes = ["application/xhtml+xml", "image/svg+xml"];
-    extraHTMLTypes.forEach(function(type) {
-        CodeMirror.defineMIME(type, "htmlmixed");
-    });
-
-    const extraJavaScriptTypes = ["text/ecmascript", "application/javascript", "application/ecmascript", "application/x-javascript",
-        "text/x-javascript", "text/javascript1.1", "text/javascript1.2", "text/javascript1.3", "text/jscript", "text/livescript"];
-    extraJavaScriptTypes.forEach(function(type) {
-        CodeMirror.defineMIME(type, "javascript");
-    });
-
-    const extraJSONTypes = ["application/x-json", "text/x-json"];
-    extraJSONTypes.forEach(function(type) {
-        CodeMirror.defineMIME(type, {name: "javascript", json: true});
-    });
-
-})();
-
-WebInspector.compareCodeMirrorPositions = function(a, b)
-{
-    var lineCompare = a.line - b.line;
-    if (lineCompare !== 0)
-        return lineCompare;
-
-    var aColumn = "ch" in a ? a.ch : Number.MAX_VALUE;
-    var bColumn = "ch" in b ? b.ch : Number.MAX_VALUE;
-    return aColumn - bColumn;
-};
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.css b/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.css
deleted file mode 100644
index 2f27d1c6e..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.CodeMirror .CodeMirror-lines .completion-hint {
-    opacity: 0.4;
-}
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.js b/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.js
deleted file mode 100644
index 16922eb80..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorCompletionController.js
+++ /dev/null
@@ -1,812 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CodeMirrorCompletionController = function(codeMirror, delegate, stopCharactersRegex)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(codeMirror);
-
-    this._codeMirror = codeMirror;
-    this._stopCharactersRegex = stopCharactersRegex || null;
-    this._delegate = delegate || null;
-
-    this._startOffset = NaN;
-    this._endOffset = NaN;
-    this._lineNumber = NaN;
-    this._prefix = "";
-    this._completions = [];
-
-    this._suggestionsView = new WebInspector.CompletionSuggestionsView(this);
-
-    this._keyMap = {
-        "Up": this._handleUpKey.bind(this),
-        "Down": this._handleDownKey.bind(this),
-        "Right": this._handleRightOrEnterKey.bind(this),
-        "Esc": this._handleEscapeKey.bind(this),
-        "Enter": this._handleRightOrEnterKey.bind(this),
-        "Tab": this._handleTabKey.bind(this),
-        "Cmd-A": this._handleHideKey.bind(this),
-        "Cmd-Z": this._handleHideKey.bind(this),
-        "Shift-Cmd-Z": this._handleHideKey.bind(this),
-        "Cmd-Y": this._handleHideKey.bind(this)
-    };
-
-    this._handleChangeListener = this._handleChange.bind(this);
-    this._handleCursorActivityListener = this._handleCursorActivity.bind(this);
-    this._handleHideActionListener = this._handleHideAction.bind(this);
-
-    this._codeMirror.addKeyMap(this._keyMap);
-
-    this._codeMirror.on("change", this._handleChangeListener);
-    this._codeMirror.on("cursorActivity", this._handleCursorActivityListener);
-    this._codeMirror.on("blur", this._handleHideActionListener);
-    this._codeMirror.on("scroll", this._handleHideActionListener);
-};
-
-WebInspector.CodeMirrorCompletionController.GenericStopCharactersRegex = /[\s=:;,]/;
-WebInspector.CodeMirrorCompletionController.DefaultStopCharactersRegexModeMap = {"css": /[\s:;,{}()]/, "javascript": /[\s=:;,!+\-*/%&|^~?<>.{}()[\]]/};
-WebInspector.CodeMirrorCompletionController.BaseExpressionStopCharactersRegexModeMap = {"javascript": /[\s=:;,!+\-*/%&|^~?<>]/};
-WebInspector.CodeMirrorCompletionController.OpenBracketCharactersRegex = /[({[]/;
-WebInspector.CodeMirrorCompletionController.CloseBracketCharactersRegex = /[)}\]]/;
-WebInspector.CodeMirrorCompletionController.MatchingBrackets = {"{": "}", "(": ")", "[": "]", "}": "{", ")": "(", "]": "["};
-WebInspector.CodeMirrorCompletionController.CompletionHintStyleClassName = "completion-hint";
-WebInspector.CodeMirrorCompletionController.CompletionsHiddenDelay = 250;
-WebInspector.CodeMirrorCompletionController.CompletionTypingDelay = 250;
-WebInspector.CodeMirrorCompletionController.CompletionOrigin = "+completion";
-WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin = "+delete-completion";
-
-WebInspector.CodeMirrorCompletionController.prototype = {
-    constructor: WebInspector.CodeMirrorCompletionController,
-
-    // Public
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    updateCompletions: function(completions, implicitSuffix)
-    {
-        if (isNaN(this._startOffset) || isNaN(this._endOffset) || isNaN(this._lineNumber))
-            return;
-
-        if (!completions || !completions.length) {
-            this.hideCompletions();
-            return;
-        }
-
-        this._completions = completions;
-
-        if (typeof implicitSuffix === "string")
-            this._implicitSuffix = implicitSuffix;
-
-        var from = {line: this._lineNumber, ch: this._startOffset};
-        var to = {line: this._lineNumber, ch: this._endOffset};
-
-        var firstCharCoords = this._codeMirror.cursorCoords(from);
-        var lastCharCoords = this._codeMirror.cursorCoords(to);
-        var bounds = new WebInspector.Rect(firstCharCoords.left, firstCharCoords.top, lastCharCoords.right - firstCharCoords.left, firstCharCoords.bottom - firstCharCoords.top);
-
-        // Try to restore the previous selected index, otherwise just select the first.
-        var index = this._currentCompletion ? completions.indexOf(this._currentCompletion) : 0;
-        if (index === -1)
-            index = 0;
-
-        if (this._forced || completions.length > 1 || completions[index] !== this._prefix) {
-            // Update and show the suggestion list.
-            this._suggestionsView.update(completions, index);
-            this._suggestionsView.show(bounds);
-        } else if (this._implicitSuffix) {
-            // The prefix and the completion exactly match, but there is an implicit suffix.
-            // Just hide the suggestion list and keep the completion hint for the implicit suffix.
-            this._suggestionsView.hide();
-        } else {
-            // The prefix and the completion exactly match, hide the completions. Return early so
-            // the completion hint isn't updated.
-            this.hideCompletions();
-            return;
-        }
-
-        this._applyCompletionHint(completions[index]);
-    },
-
-    isCompletionChange: function(change)
-    {
-        return this._ignoreChange || change.origin === WebInspector.CodeMirrorCompletionController.CompletionOrigin || change.origin === WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin;
-    },
-
-    isShowingCompletions: function()
-    {
-        return this._suggestionsView.visible || (this._completionHintMarker && this._completionHintMarker.find());
-    },
-
-    isHandlingClickEvent: function()
-    {
-        return this._suggestionsView.isHandlingClickEvent();
-    },
-
-    hideCompletions: function()
-    {
-        this._suggestionsView.hide();
-
-        this._removeCompletionHint();
-
-        this._startOffset = NaN;
-        this._endOffset = NaN;
-        this._lineNumber = NaN;
-        this._prefix = "";
-        this._completions = [];
-        this._implicitSuffix = "";
-        this._forced = false;
-
-        if (this._completionDelayTimeout) {
-            clearTimeout(this._completionDelayTimeout)
-            delete this._completionDelayTimeout;
-        }
-
-        delete this._currentCompletion;
-        delete this._ignoreNextCursorActivity;
-    },
-
-    close: function()
-    {
-        this._codeMirror.removeKeyMap(this._keyMap);
-
-        this._codeMirror.off("change", this._handleChangeListener);
-        this._codeMirror.off("cursorActivity", this._handleCursorActivityListener);
-        this._codeMirror.off("blur", this._handleHideActionListener);
-        this._codeMirror.off("scroll", this._handleHideActionListener);
-    },
-
-    // Protected
-
-    completionSuggestionsSelectedCompletion: function(suggestionsView, completionText)
-    {
-        this._applyCompletionHint(completionText);
-    },
-
-    completionSuggestionsClickedCompletion: function(suggestionsView, completionText)
-    {
-        // The clicked suggestion causes the editor to loose focus. Restore it so the user can keep typing.
-        this._codeMirror.focus();
-
-        this._applyCompletionHint(completionText);
-        this._commitCompletionHint();
-    },
-
-    // Private
-
-    get _currentReplacementText()
-    {
-        return this._currentCompletion + this._implicitSuffix;
-    },
-
-    _hasPendingCompletion: function()
-    {
-        return !isNaN(this._startOffset) && !isNaN(this._endOffset) && !isNaN(this._lineNumber);
-    },
-
-    _notifyCompletionsHiddenSoon: function()
-    {
-        function notify()
-        {
-            if (this._completionHintMarker)
-                return;
-
-            if (this._delegate && typeof this._delegate.completionControllerCompletionsHidden === "function")
-                this._delegate.completionControllerCompletionsHidden(this);
-        }
-
-        if (this._notifyCompletionsHiddenIfNeededTimeout)
-            clearTimeout(this._notifyCompletionsHiddenIfNeededTimeout);
-        this._notifyCompletionsHiddenIfNeededTimeout = setTimeout(notify.bind(this), WebInspector.CodeMirrorCompletionController.CompletionsHiddenDelay);
-    },
-
-    _applyCompletionHint: function(completionText)
-    {
-        console.assert(completionText);
-        if (!completionText)
-            return;
-
-        function update()
-        {
-            this._currentCompletion = completionText;
-
-            this._removeCompletionHint(true, true);
-
-            var replacementText = this._currentReplacementText;
-
-            var from = {line: this._lineNumber, ch: this._startOffset};
-            var cursor = {line: this._lineNumber, ch: this._endOffset};
-            var to = {line: this._lineNumber, ch: this._startOffset + replacementText.length};
-
-            this._codeMirror.replaceRange(replacementText, from, cursor, WebInspector.CodeMirrorCompletionController.CompletionOrigin);
-            this._removeLastChangeFromHistory();
-
-            this._codeMirror.setCursor(cursor);
-
-            if (cursor.ch !== to.ch)
-                this._completionHintMarker = this._codeMirror.markText(cursor, to, {className: WebInspector.CodeMirrorCompletionController.CompletionHintStyleClassName});
-        }
-
-        this._ignoreChange = true;
-        this._ignoreNextCursorActivity = true;
-
-        this._codeMirror.operation(update.bind(this));
-
-        delete this._ignoreChange;
-    },
-
-    _commitCompletionHint: function()
-    {
-        function update()
-        {
-            this._removeCompletionHint(true, true);
-
-            var replacementText = this._currentReplacementText;
-
-            var from = {line: this._lineNumber, ch: this._startOffset};
-            var cursor = {line: this._lineNumber, ch: this._endOffset};
-            var to = {line: this._lineNumber, ch: this._startOffset + replacementText.length};
-
-            var lastChar = this._currentCompletion.charAt(this._currentCompletion.length - 1);
-            var isClosing = ")]}".indexOf(lastChar);
-            if (isClosing !== -1)
-                to.ch -= 1 + this._implicitSuffix.length;
-
-            this._codeMirror.replaceRange(replacementText, from, cursor, WebInspector.CodeMirrorCompletionController.CompletionOrigin);
-
-            // Don't call _removeLastChangeFromHistory here to allow the committed completion to be undone.
-
-            this._codeMirror.setCursor(to);
-
-            this.hideCompletions();
-        }
-
-        this._ignoreChange = true;
-        this._ignoreNextCursorActivity = true;
-
-        this._codeMirror.operation(update.bind(this));
-
-        delete this._ignoreChange;
-    },
-
-    _removeLastChangeFromHistory: function()
-    {
-        var history = this._codeMirror.getHistory();
-
-        // We don't expect a undone history. But if there is one clear it. If could lead to undefined behavior.
-        console.assert(!history.undone.length);
-        history.undone = [];
-
-        // Pop the last item from the done history.
-        console.assert(history.done.length);
-        history.done.pop();
-
-        this._codeMirror.setHistory(history);
-    },
-
-    _removeCompletionHint: function(nonatomic, dontRestorePrefix)
-    {
-        if (!this._completionHintMarker)
-            return;
-
-        this._notifyCompletionsHiddenSoon();
-
-        function update()
-        {
-            var range = this._completionHintMarker.find();
-            if (range) {
-                this._completionHintMarker.clear();
-
-                this._codeMirror.replaceRange("", range.from, range.to, WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin);
-                this._removeLastChangeFromHistory();
-            }
-
-            this._completionHintMarker = null;
-
-            if (dontRestorePrefix)
-                return;
-
-            console.assert(!isNaN(this._startOffset));
-            console.assert(!isNaN(this._endOffset));
-            console.assert(!isNaN(this._lineNumber));
-
-            var from = {line: this._lineNumber, ch: this._startOffset};
-            var to = {line: this._lineNumber, ch: this._endOffset};
-
-            this._codeMirror.replaceRange(this._prefix, from, to, WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin);
-            this._removeLastChangeFromHistory();
-        }
-
-        if (nonatomic) {
-            update.call(this);
-            return;
-        }
-
-        this._ignoreChange = true;
-
-        this._codeMirror.operation(update.bind(this));
-
-        delete this._ignoreChange;
-    },
-
-    _scanStringForExpression: function(modeName, string, startOffset, direction, allowMiddleAndEmpty, includeStopCharacter, ignoreInitialUnmatchedOpenBracket, stopCharactersRegex)
-    {
-        console.assert(direction === -1 || direction === 1);
-
-        var stopCharactersRegex = stopCharactersRegex || this._stopCharactersRegex || WebInspector.CodeMirrorCompletionController.DefaultStopCharactersRegexModeMap[modeName] || WebInspector.CodeMirrorCompletionController.GenericStopCharactersRegex;
-
-        function isStopCharacter(character)
-        {
-            return stopCharactersRegex.test(character);
-        }
-
-        function isOpenBracketCharacter(character)
-        {
-            return WebInspector.CodeMirrorCompletionController.OpenBracketCharactersRegex.test(character);
-        }
-
-        function isCloseBracketCharacter(character)
-        {
-            return WebInspector.CodeMirrorCompletionController.CloseBracketCharactersRegex.test(character);
-        }
-
-        function matchingBracketCharacter(character)
-        {
-            return WebInspector.CodeMirrorCompletionController.MatchingBrackets[character];
-        }
-
-        var endOffset = Math.min(startOffset, string.length);
-
-        var endOfLineOrWord = endOffset === string.length || isStopCharacter(string.charAt(endOffset));
-
-        if (!endOfLineOrWord && !allowMiddleAndEmpty)
-            return null;
-
-        var bracketStack = [];
-        var bracketOffsetStack = [];
-        var lastCloseBracketOffset = NaN;
-
-        var startOffset = endOffset;
-        var firstOffset = endOffset + direction;
-        for (var i = firstOffset; direction > 0 ? i < string.length : i >= 0; i += direction) {
-            var character = string.charAt(i);
-
-            // Ignore stop characters when we are inside brackets.
-            if (isStopCharacter(character) && !bracketStack.length)
-                break;
-
-            if (isCloseBracketCharacter(character)) {
-                bracketStack.push(character);
-                bracketOffsetStack.push(i);
-            } else if (isOpenBracketCharacter(character)) {
-                if ((!ignoreInitialUnmatchedOpenBracket || i !== firstOffset) && (!bracketStack.length || matchingBracketCharacter(character) !== bracketStack.lastValue))
-                    break;
-
-                bracketOffsetStack.pop();
-                bracketStack.pop();
-            }
-
-            startOffset = i + (direction > 0 ? 1 : 0);
-        }
-
-        if (bracketOffsetStack.length)
-            startOffset = bracketOffsetStack.pop() + 1;
-
-        if (includeStopCharacter && startOffset > 0 && startOffset < string.length)
-            startOffset += direction;
-
-        if (direction > 0) {
-            var tempEndOffset = endOffset;
-            endOffset = startOffset;
-            startOffset = tempEndOffset;
-        }
-
-        return {string: string.substring(startOffset, endOffset), startOffset: startOffset, endOffset: endOffset};
-    },
-
-    _completeAtCurrentPosition: function(force)
-    {
-        if (this._codeMirror.somethingSelected()) {
-            this.hideCompletions();
-            return;
-        }
-
-        if (this._completionDelayTimeout) {
-            clearTimeout(this._completionDelayTimeout);
-            delete this._completionDelayTimeout;
-        }
-
-        this._removeCompletionHint(true, true);
-
-        var cursor = this._codeMirror.getCursor();
-        var token = this._codeMirror.getTokenAt(cursor);
-
-        // Don't try to complete inside comments.
-        if (token.type && /\bcomment\b/.test(token.type)) {
-            this.hideCompletions();
-            return;
-        }
-
-        var mode = this._codeMirror.getMode();
-        var innerMode = CodeMirror.innerMode(mode, token.state).mode;
-        var modeName = innerMode.alternateName || innerMode.name;
-
-        var lineNumber = cursor.line;
-        var lineString = this._codeMirror.getLine(lineNumber);
-
-        var backwardScanResult = this._scanStringForExpression(modeName, lineString, cursor.ch, -1, force);
-        if (!backwardScanResult) {
-            this.hideCompletions();
-            return;
-        }
-
-        var forwardScanResult = this._scanStringForExpression(modeName, lineString, cursor.ch, 1, true, true);
-        var suffix = forwardScanResult.string;
-
-        this._ignoreNextCursorActivity = true;
-
-        this._startOffset = backwardScanResult.startOffset;
-        this._endOffset = backwardScanResult.endOffset;
-        this._lineNumber = lineNumber;
-        this._prefix = backwardScanResult.string;
-        this._completions = [];
-        this._implicitSuffix = "";
-        this._forced = force;
-
-        var baseExpressionStopCharactersRegex = WebInspector.CodeMirrorCompletionController.BaseExpressionStopCharactersRegexModeMap[modeName];
-        if (baseExpressionStopCharactersRegex)
-            var baseScanResult = this._scanStringForExpression(modeName, lineString, this._startOffset, -1, true, false, true, baseExpressionStopCharactersRegex);
-
-        if (!force && !backwardScanResult.string && (!baseScanResult || !baseScanResult.string)) {
-            this.hideCompletions();
-            return;
-        }
-
-        var defaultCompletions = [];
-
-        switch (modeName) {
-        case "css":
-            defaultCompletions = this._generateCSSCompletions(token, baseScanResult ? baseScanResult.string : null, suffix);
-            break;
-        case "javascript":
-            defaultCompletions = this._generateJavaScriptCompletions(token, baseScanResult ? baseScanResult.string : null, suffix);
-            break;
-        }
-
-        if (this._delegate && typeof this._delegate.completionControllerCompletionsNeeded === "function")
-            this._delegate.completionControllerCompletionsNeeded(this, this._prefix, defaultCompletions, baseScanResult ? baseScanResult.string : null, suffix, force);
-        else
-            this.updateCompletions(defaultCompletions);
-    },
-
-    _generateCSSCompletions: function(mainToken, base, suffix)
-    {
-        // We only support completion inside CSS rules.
-        if (!mainToken.state || !mainToken.state.stack || !mainToken.state.stack.contains("rule"))
-            return [];
-
-        var token = mainToken;
-        var lineNumber = this._lineNumber;
-
-        // Scan backwards looking for the current property.
-        while (token.state.stack.lastValue === "propertyValue") {
-            // Found the beginning of the line. Go to the previous line.
-            if (!token.start) {
-                --lineNumber;
-
-                // No more lines, stop.
-                if (lineNumber < 0)
-                    break;
-            }
-
-            // Get the previous token.
-            token = this._codeMirror.getTokenAt({line: lineNumber, ch: token.start ? token.start : Number.MAX_VALUE});
-        }
-
-        // If we have a property token and it's not the main token, then we are working on
-        // the value for that property and should complete allowed values.
-        if (mainToken !== token && token.type && /\bproperty\b/.test(token.type)) {
-            var propertyName = token.string;
-
-            // If there is a suffix and it isn't a semicolon, then we should use a space since
-            // the user is editing in the middle.
-            this._implicitSuffix = suffix && suffix !== ";" ? " " : ";";
-
-            // Don't use an implicit suffix if it would be the same as the existing suffix.
-            if (this._implicitSuffix === suffix)
-                this._implicitSuffix = "";
-
-            return WebInspector.CSSKeywordCompletions.forProperty(propertyName).startsWith(this._prefix);
-        }
-
-        this._implicitSuffix = suffix !== ":" ? ": " : "";
-
-        // Complete property names.
-        return WebInspector.CSSCompletions.cssNameCompletions.startsWith(this._prefix);
-    },
-
-    _generateJavaScriptCompletions: function(mainToken, base, suffix)
-    {
-        // If there is a base expression then we should not attempt to match any keywords or variables.
-        // Allow only open bracket characters at the end of the base, otherwise leave completions with
-        // a base up to the delegate to figure out.
-        if (base && !/[({[]$/.test(base))
-            return [];
-
-        var matchingWords = [];
-
-        const prefix = this._prefix;
-
-        const declaringVariable = mainToken.state.lexical.type === "vardef";
-        const insideSwitch = mainToken.state.lexical.prev ? mainToken.state.lexical.prev.info === "switch" : false;
-        const insideBlock = mainToken.state.lexical.prev ? mainToken.state.lexical.prev.type === "}" : false;
-        const insideParenthesis = mainToken.state.lexical.type === ")";
-        const insideBrackets = mainToken.state.lexical.type === "]";
-
-        const allKeywords = ["break", "case", "catch", "const", "continue", "debugger", "default", "delete", "do", "else", "false", "finally", "for", "function", "if", "in",
-            "Infinity", "instanceof", "NaN", "new", "null", "return", "switch", "this", "throw", "true", "try", "typeof", "undefined", "var", "void", "while", "with"];
-        const valueKeywords = ["false", "Infinity", "NaN", "null", "this", "true", "undefined"];
-
-        const allowedKeywordsInsideBlocks = allKeywords.keySet();
-        const allowedKeywordsWhenDeclaringVariable = valueKeywords.keySet();
-        const allowedKeywordsInsideParenthesis = valueKeywords.concat(["function"]).keySet();
-        const allowedKeywordsInsideBrackets = allowedKeywordsInsideParenthesis;
-        const allowedKeywordsOnlyInsideSwitch = ["case", "default"].keySet();
-
-        function matchKeywords(keywords)
-        {
-            matchingWords = matchingWords.concat(keywords.filter(function(word) {
-                if (!insideSwitch && word in allowedKeywordsOnlyInsideSwitch)
-                    return false;
-                if (insideBlock && !(word in allowedKeywordsInsideBlocks))
-                    return false;
-                if (insideBrackets && !(word in allowedKeywordsInsideBrackets))
-                    return false;
-                if (insideParenthesis && !(word in allowedKeywordsInsideParenthesis))
-                    return false;
-                if (declaringVariable && !(word in allowedKeywordsWhenDeclaringVariable))
-                    return false;
-                return word.startsWith(prefix);
-            }));
-        }
-
-        function matchVariables()
-        {
-            function filterVariables(variables)
-            {
-                for (var variable = variables; variable; variable = variable.next) {
-                    // Don't match the variable if this token is in a variable declaration.
-                    // Otherwise the currently typed text will always match and that isn't useful.
-                    if (declaringVariable && variable.name === prefix)
-                        continue;
-
-                    if (variable.name.startsWith(prefix) && !matchingWords.contains(variable.name))
-                        matchingWords.push(variable.name);
-                }
-            }
-
-            var context = mainToken.state.context;
-            while (context) {
-                filterVariables(context.vars);
-                context = context.prev;
-            }
-
-            filterVariables(mainToken.state.globalVars);
-        }
-
-        switch (suffix.substring(0, 1)) {
-        case "":
-        case " ":
-            matchVariables();
-            matchKeywords(allKeywords);
-            break;
-
-        case ".":
-        case "[":
-            matchVariables();
-            matchKeywords(["false", "Infinity", "NaN", "this", "true"]);
-            break;
-
-        case "(":
-            matchVariables();
-            matchKeywords(["catch", "else", "for", "function", "if", "return", "switch", "throw", "while", "with"]);
-            break;
-
-        case "{":
-            matchKeywords(["do", "else", "finally", "return", "try"]);
-            break;
-
-        case ":":
-            if (insideSwitch)
-                matchKeywords(["case", "default"]);
-            break;
-
-        case ";":
-            matchVariables();
-            matchKeywords(valueKeywords);
-            matchKeywords(["break", "continue", "debugger", "return", "void"]);
-            break;
-        }
-
-        return matchingWords;
-    },
-
-    _handleUpKey: function(codeMirror)
-    {
-        if (!this._hasPendingCompletion())
-            return CodeMirror.Pass;
-
-        if (!this.isShowingCompletions())
-            return;
-
-        this._suggestionsView.selectPrevious();
-    },
-
-    _handleDownKey: function(codeMirror)
-    {
-        if (!this._hasPendingCompletion())
-            return CodeMirror.Pass;
-
-        if (!this.isShowingCompletions())
-            return;
-
-        this._suggestionsView.selectNext();
-    },
-
-    _handleRightOrEnterKey: function(codeMirror)
-    {
-        if (!this._hasPendingCompletion())
-            return CodeMirror.Pass;
-
-        if (!this.isShowingCompletions())
-            return;
-
-        this._commitCompletionHint();
-    },
-
-    _handleEscapeKey: function(codeMirror)
-    {
-        var delegateImplementsShouldAllowEscapeCompletion = this._delegate && typeof this._delegate.completionControllerShouldAllowEscapeCompletion === "function";
-        if (this._hasPendingCompletion())
-            this.hideCompletions();
-        else if (this._codeMirror.getOption("readOnly"))
-            return CodeMirror.Pass;
-        else if (!delegateImplementsShouldAllowEscapeCompletion || this._delegate.completionControllerShouldAllowEscapeCompletion(this))
-            this._completeAtCurrentPosition(true);
-        else
-            return CodeMirror.Pass;
-    },
-
-    _handleTabKey: function(codeMirror)
-    {
-        if (!this._hasPendingCompletion())
-            return CodeMirror.Pass;
-
-        if (!this.isShowingCompletions())
-            return;
-
-        console.assert(this._completions.length);
-        if (!this._completions.length)
-            return;
-
-        console.assert(this._currentCompletion);
-        if (!this._currentCompletion)
-            return;
-
-        // Commit the current completion if there is only one suggestion.
-        if (this._completions.length === 1) {
-            this._commitCompletionHint();
-            return;
-        }
-
-        var prefixLength = this._prefix.length;
-
-        var commonPrefix = this._completions[0];
-        for (var i = 1; i < this._completions.length; ++i) {
-            var completion = this._completions[i];
-            var lastIndex = Math.min(commonPrefix.length, completion.length);
-            for (var j = prefixLength; j < lastIndex; ++j) {
-                if (commonPrefix[j] !== completion[j]) {
-                    commonPrefix = commonPrefix.substr(0, j);
-                    break;
-                }
-            }
-        }
-
-        // Commit the current completion if there is no common prefix that is longer.
-        if (commonPrefix === this._prefix) {
-            this._commitCompletionHint();
-            return;
-        }
-
-        // Set the prefix to the common prefix so _applyCompletionHint will insert the
-        // common prefix as commited text. Adjust _endOffset to match the new prefix.
-        this._prefix = commonPrefix;
-        this._endOffset = this._startOffset + commonPrefix.length;
-
-        this._applyCompletionHint(this._currentCompletion);
-    },
-
-    _handleChange: function(codeMirror, change)
-    {
-        if (this.isCompletionChange(change))
-            return;
-
-        this._ignoreNextCursorActivity = true;
-
-        if (!change.origin || change.origin.charAt(0) !== "+") {
-            this.hideCompletions();
-            return;
-        }
-
-        // Only complete on delete if we are showing completions already.
-        if (change.origin === "+delete" && !this._hasPendingCompletion())
-            return;
-
-        if (this._completionDelayTimeout) {
-            clearTimeout(this._completionDelayTimeout);
-            delete this._completionDelayTimeout;
-        }
-
-        if (this._hasPendingCompletion())
-            this._completeAtCurrentPosition(false);
-        else
-            this._completionDelayTimeout = setTimeout(this._completeAtCurrentPosition.bind(this, false), WebInspector.CodeMirrorCompletionController.CompletionTypingDelay);
-    },
-
-    _handleCursorActivity: function(codeMirror)
-    {
-        if (this._ignoreChange)
-            return;
-
-        if (this._ignoreNextCursorActivity) {
-            delete this._ignoreNextCursorActivity;
-            return;
-        }
-
-        this.hideCompletions();
-    },
-
-    _handleHideKey: function(codeMirror)
-    {
-        this.hideCompletions();
-
-        return CodeMirror.Pass;
-    },
-
-    _handleHideAction: function(codeMirror)
-    {
-        // Clicking a suggestion causes the editor to blur. We don't want to hide completions in this case.
-        if (this.isHandlingClickEvent())
-            return;
-
-        this.hideCompletions();
-    }
-};
-
-WebInspector.CodeMirrorCompletionController.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js b/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js
deleted file mode 100644
index 52a0095fa..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.js
+++ /dev/null
@@ -1,234 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CodeMirrorDragToAlterNumberController = function(codeMirror)
-{
-    this._codeMirror = codeMirror;
-    this._active = false;
-    this._dragging = false;
-    this._enabled = false;
-    this._tracksMouseClickAndDrag = false;
-};
-
-WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName = "drag-to-adjust";
-
-WebInspector.CodeMirrorDragToAlterNumberController.prototype = {
-    constructor: WebInspector.CodeMirrorDragToAlterNumberController,
-
-    // Public
-
-    set enabled(enabled)
-    {
-        if (this._enabled === enabled)
-            return;
-
-        this._element = this._codeMirror.getWrapperElement();
-
-        if (enabled) {
-            this._element.addEventListener("mouseenter", this);
-            this._element.addEventListener("mouseleave", this);
-        } else {
-            this._element.removeEventListener("mouseenter", this);
-            this._element.removeEventListener("mouseleave", this);
-        }
-    },
-
-    // Protected
-
-    handleEvent: function(event)
-    {
-        switch(event.type) {
-        case "mouseenter":
-            if (!this._dragging)
-                this._setActive(true);
-            break;
-        case "mouseleave":
-            if (!this._dragging)
-                this._setActive(false);
-            break;
-        case "mousemove":
-            if (this._dragging)
-                this._mouseWasDragged(event);
-            else
-                this._mouseMoved(event);
-            break;
-        case "mousedown":
-            this._mouseWasPressed(event);
-            break;
-        case "mouseup":
-            this._mouseWasReleased(event);
-            break;
-        case "contextmenu":
-            event.preventDefault();
-            break;
-        }
-    },
-
-    // Private
-
-    _setActive: function(active)
-    {
-        if (this._active === active || this._codeMirror.getOption("readOnly"))
-            return;
-
-        if (active) {
-            WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
-            this._element.addEventListener("mousemove", this);
-        } else {
-            WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
-            this._element.removeEventListener("mousemove", this);
-            this._hoveredTokenInfo = null;
-            this._setTracksMouseClickAndDrag(false);
-        }
-
-        this._active = active;
-    },
-
-    _setDragging: function(dragging)
-    {
-        if (this._dragging === dragging)
-            return;
-        
-        console.assert(window.event);
-        if (dragging)
-            WebInspector.elementDragStart(this._element, this, this, window.event, "col-resize", window);
-        else
-            WebInspector.elementDragEnd(window.event);
-
-        this._dragging = dragging;
-    },
-
-    _setTracksMouseClickAndDrag: function(tracksMouseClickAndDrag)
-    {
-        if (this._tracksMouseClickAndDrag === tracksMouseClickAndDrag)
-            return;
-        
-        if (tracksMouseClickAndDrag) {
-            this._element.classList.add(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
-            window.addEventListener("mousedown", this, true);
-            window.addEventListener("contextmenu", this, true);
-        } else {
-            this._element.classList.remove(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
-            window.removeEventListener("mousedown", this, true);
-            window.removeEventListener("contextmenu", this, true);
-            this._setDragging(false);
-        }
-        
-        this._tracksMouseClickAndDrag = tracksMouseClickAndDrag;
-    },
-
-    _modifiersDidChange: function(event)
-    {
-        this._setTracksMouseClickAndDrag(this._hoveredTokenInfo && this._hoveredTokenInfo.containsNumber && WebInspector.modifierKeys.altKey);
-    },
-    
-    _mouseMoved: function(event)
-    {
-        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
-        var token = this._codeMirror.getTokenAt(position);
-
-        if (!token || !token.type || !token.string) {
-            if (this._hoveredTokenInfo)
-                this._reset();
-            return;
-        }
-
-        // Stop right here if we're hovering the same token as we were last time.
-        if (this._hoveredTokenInfo && this._hoveredTokenInfo.line === position.line &&
-            this._hoveredTokenInfo.token.start === token.start && this._hoveredTokenInfo.token.end === token.end)
-            return;
-
-        var containsNumber = token.type.indexOf("number") !== -1;
-        this._hoveredTokenInfo = {
-            token: token,
-            line: position.line,
-            containsNumber: containsNumber,
-            startPosition: {
-                ch: token.start,
-                line: position.line
-            },
-            endPosition: {
-                ch: token.end,
-                line: position.line
-            }
-        };
-
-        this._setTracksMouseClickAndDrag(containsNumber && event.altKey);
-    },
-    
-    _mouseWasPressed: function(event)
-    {
-        this._lastX = event.screenX;
-
-        this._setDragging(true);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _mouseWasDragged: function(event)
-    {
-        var x = event.screenX;
-        var amount = x - this._lastX;
-
-        if (Math.abs(amount) < 1)
-            return;
-
-        this._lastX = x;
-
-        if (event.ctrlKey)
-            amount /= 10;
-        else if (event.shiftKey)
-            amount *= 10;
-
-        this._codeMirror.alterNumberInRange(amount, this._hoveredTokenInfo.startPosition, this._hoveredTokenInfo.endPosition, false);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _mouseWasReleased: function(event)
-    {
-        this._setDragging(false);
-
-        event.preventDefault();
-        event.stopPropagation();
-
-        this._reset();
-    },
-    
-    _reset: function()
-    {
-        this._hoveredTokenInfo = null;
-        this._setTracksMouseClickAndDrag(false);
-        this._element.classList.remove(WebInspector.CodeMirrorDragToAlterNumberController.StyleClassName);
-    }
-};
-
-CodeMirror.defineOption("dragToAdjustNumbers", true, function(codeMirror, value, oldValue) {
-    if (!codeMirror.dragToAlterNumberController)
-        codeMirror.dragToAlterNumberController = new WebInspector.CodeMirrorDragToAlterNumberController(codeMirror);
-    codeMirror.dragToAlterNumberController.enabled = value;
-});
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorFormatters.js b/Source/WebInspectorUI/UserInterface/CodeMirrorFormatters.js
deleted file mode 100644
index 81c8155e7..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorFormatters.js
+++ /dev/null
@@ -1,403 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-// In the inspector token types have been modified to include extra mode information
-// after the actual token type. So we can't do token === "foo". So instead we do
-// /\bfoo\b/.test(token).
-
-CodeMirror.extendMode("javascript", {
-    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (!token) {
-            if (content === "(") // Most keywords like "if (" but not "function(" or "typeof(".
-                return lastToken && /\bkeyword\b/.test(lastToken) && (lastContent !== "function" && lastContent !== "typeof" && lastContent !== "instanceof");
-            if (content === ":") // Ternary.
-                return (state.lexical.type === "stat" || state.lexical.type === ")");
-            if (content === "!") // Unary ! should not be confused with "!=".
-                return false;
-            return "+-/*&&||!===+=-=>=<=?".indexOf(content) >= 0; // Operators.
-        }
-
-        if (isComment)
-            return true;
-
-        if (/\bkeyword\b/.test(token)) { // Most keywords require spaces before them, unless a '}' can come before it.
-            if (content === "else" || content === "catch" || content === "finally")
-                return lastContent === "}";
-            return false;
-        }
-
-        return false;
-    },
-
-    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (lastToken && /\bkeyword\b/.test(lastToken)) {  // Most keywords require spaces after them, unless a '{' or ';' can come after it.
-            if (lastContent === "else")
-                return true;
-            if (lastContent === "catch")
-                return true;
-            if (lastContent === "return")
-                return content !== ";";
-            if (lastContent === "throw")
-                return true;
-            if (lastContent === "try")
-                return true;
-            if (lastContent === "finally")
-                return true;
-            if (lastContent === "do")
-                return true;
-            return false;
-        }
-
-        if (lastToken && /\bcomment\b/.test(lastToken)) // Embedded /* comment */.
-            return true;
-        if (lastContent === ")") // "){".
-            return content === "{";
-        if (lastContent === ";") // In for loop.
-            return state.lexical.type === ")";
-        if (lastContent === "!") // Unary ! should not be confused with "!=".
-            return false;
-
-        return ",+-/*&&||:!===+=-=>=<=?".indexOf(lastContent) >= 0; // Operators.
-    },
-
-    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (!token) {
-            if (content === ",") // In object literals, like in {a:1,b:2}, but not in param lists or vardef lists.
-                return state.lexical.type === "}" ? 1 : 0;
-            if (content === ";") // Everywhere except in for loop conditions.
-                return state.lexical.type !== ")" ? 1 : 0;
-            if (content === ":" && state.lexical.type === "}" && state.lexical.prev && state.lexical.prev.type === "form") // Switch case/default.
-                return 1;
-            return content.length === 1 && "{}".indexOf(content) >= 0 ? 1 : 0; // After braces.
-        }
-
-        if (isComment)
-            return 1;
-
-        return 0;
-    },
-
-    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
-    {
-        if (!token) {
-            if (content === "}") // "{}".
-                return lastContent === "{";
-            if (content === ";") // "x = {};" or ";;".
-                return "};".indexOf(lastContent) >= 0;
-            if (content === ":") // Ternary.
-                return lastContent === "}" && (state.lexical.type === "stat" || state.lexical.type === ")");
-            if (",().".indexOf(content) >= 0) // "})", "}.bind", "function() { ... }()", or "}, false)".
-                return lastContent === "}";
-            return false;
-        }
-
-        if (isComment) { // Comment after semicolon.
-            if (!firstTokenOnLine && lastContent === ";")
-                return true;
-            return false;
-        }
-
-        if (/\bkeyword\b/.test(token)) {
-            if (content === "else" || content === "catch" || content === "finally") // "} else", "} catch", "} finally"
-                return lastContent === "}";
-            return false;
-        }
-
-        return false;
-    },
-
-    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        return content === "{" || content === "case" || content === "default";
-    },
-
-    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (state._jsPrettyPrint.shouldIndent)
-            return true;
-
-        return content === "}" && lastContent !== "{"; // "{}"
-    },
-
-    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (state._jsPrettyPrint.shouldIndent)
-            return true;
-
-        return false;
-    },
-
-    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        var dedent = 0;
-
-        if (state._jsPrettyPrint.shouldDedent)
-            dedent += state._jsPrettyPrint.dedentSize;
-
-        if (!token && content === "}")
-            dedent += 1;
-        else if (token && /\bkeyword\b/.test(token) && (content === "case" || content === "default"))
-            dedent += 1;
-
-        return dedent;
-    },
-
-    modifyStateForTokenPre: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (!state._jsPrettyPrint) {
-            state._jsPrettyPrint = {
-                indentCount: 0,       // How far have we indented because of single statement blocks.
-                shouldIndent: false,  // Signal we should indent on entering a single statement block.
-                shouldDedent: false,  // Signal we should dedent on leaving a single statement block.
-                dedentSize: 0,        // How far we should dedent when leaving a single statement block.
-                lastIfIndentCount: 0, // Keep track of the indent the last time we saw an if without braces.
-                openBraceStartMarkers: [],  // Keep track of non-single statement blocks.
-                openBraceTrackingCount: -1, // Keep track of "{" and "}" in non-single statement blocks.
-            };
-        }
-
-        // - Entering:
-        //   - Preconditions:
-        //     - last lexical was a "form" we haven't encountered before
-        //     - last content was ")", "else", or "do"
-        //     - current lexical is not ")" (in an expression or condition)
-        //   - Cases:
-        //     1. "{"
-        //       - indent +0
-        //       - save this indent size so when we encounter the "}" we know how far to dedent
-        //     2. "else if"
-        //       - indent +0 and do not signal to add a newline and indent
-        //       - mark the last if location so when we encounter an "else" we know how far to dedent
-        //       - mark the lexical state so we know we are inside a single statement block
-        //     3. Token without brace.
-        //       - indent +1 and signal to add a newline and indent
-        //       - mark the last if location so when we encounter an "else" we know how far to dedent
-        //       - mark the lexical state so we know we are inside a single statement block
-        if (!isComment && state.lexical.prev && state.lexical.prev.type === "form" && !state.lexical.prev._jsPrettyPrintMarker && (lastContent === ")" || lastContent === "else" || lastContent === "do") && (state.lexical.type !== ")")) {
-            if (content === "{") {
-                // Save the state at the opening brace so we can return to it when we see "}".
-                var savedState = {indentCount:state._jsPrettyPrint.indentCount, openBraceTrackingCount:state._jsPrettyPrint.openBraceTrackingCount};
-                state._jsPrettyPrint.openBraceStartMarkers.push(savedState);
-                state._jsPrettyPrint.openBraceTrackingCount = 1;
-            } else if (state.lexical.type !== "}") {
-                // Increase the indent count. Signal for a newline and indent if needed.
-                if (!(lastContent === "else" && content === "if")) {
-                    state._jsPrettyPrint.indentCount++;
-                    state._jsPrettyPrint.shouldIndent = true;
-                }
-                state.lexical.prev._jsPrettyPrintMarker = true;
-                if (state._jsPrettyPrint.enteringIf)
-                    state._jsPrettyPrint.lastIfIndentCount = state._jsPrettyPrint.indentCount - 1;
-            }
-        }
-
-        // - Leaving:
-        //   - Preconditions:
-        //     - we must be indented
-        //     - ignore ";", wait for the next token instead.
-        //   - Cases:
-        //     1. "else"
-        //       - dedent to the last "if"
-        //     2. "}" and all braces we saw are balanced
-        //       - dedent to the last "{"
-        //     3. Token without a marker on the stack
-        //       - dedent all the way
-        else if (state._jsPrettyPrint.indentCount) {
-            console.assert(!state._jsPrettyPrint.shouldDedent);
-            console.assert(!state._jsPrettyPrint.dedentSize);
-
-            // Track "{" and "}" to know when the "}" is really closing a block.
-            if (!isComment) {
-                if (content === "{")
-                    state._jsPrettyPrint.openBraceTrackingCount++;
-                else if (content === "}")
-                    state._jsPrettyPrint.openBraceTrackingCount--;
-            }
-
-            if (content === ";") {
-                // Ignore.
-            } else if (content === "else") {
-                // Dedent to the last "if".
-                if (lastContent !== "}") {
-                    state._jsPrettyPrint.shouldDedent = true;
-                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - state._jsPrettyPrint.lastIfIndentCount;
-                    state._jsPrettyPrint.lastIfIndentCount = 0;
-                }
-            } else if (content === "}" && !state._jsPrettyPrint.openBraceTrackingCount && state._jsPrettyPrint.openBraceStartMarkers.length) {
-                // Dedent to the last "{".
-                var savedState = state._jsPrettyPrint.openBraceStartMarkers.pop();
-                state._jsPrettyPrint.shouldDedent = true;
-                state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - savedState.indentCount;
-                state._jsPrettyPrint.openBraceTrackingCount = savedState.openBraceTrackingCount;
-            } else {
-                // Dedent all the way.
-                var shouldDedent = true;
-                var lexical = state.lexical.prev;
-                while (lexical) {
-                    if (lexical._jsPrettyPrintMarker) {
-                        shouldDedent = false;
-                        break;
-                    }
-                    lexical = lexical.prev;
-                }
-                if (shouldDedent) {
-                    state._jsPrettyPrint.shouldDedent = true;
-                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount;
-                }
-            }
-        }
-
-        // Signal for when we will be entering an if.
-        if (token && state.lexical.type === "form" && state.lexical.prev && state.lexical.prev !== "form" && /\bkeyword\b/.test(token))
-            state._jsPrettyPrint.enteringIf = (content === "if");
-    },
-
-    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (state._jsPrettyPrint.shouldIndent)
-            state._jsPrettyPrint.shouldIndent = false;
-
-        if (state._jsPrettyPrint.shouldDedent) {
-            state._jsPrettyPrint.indentCount -= state._jsPrettyPrint.dedentSize;
-            state._jsPrettyPrint.dedentSize = 0;
-            state._jsPrettyPrint.shouldDedent = false;
-        }
-    }
-});
-
-CodeMirror.extendMode("css-base", {
-    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (!token) {
-            if (content === "{")
-                return true;
-            return false;
-        }
-
-        if (isComment)
-            return true;
-
-        if (/\bkeyword\b/.test(token)) {
-            if (content.charAt(0) === "!") // "!important".
-                return true;
-            return false;
-        }
-
-        return false;
-    },
-
-    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (!lastToken) {
-            if (lastContent === ",")
-                return true;
-            return false;
-        }
-
-        if (/\boperator\b/.test(lastToken)) {
-            if (lastContent === ":") // Space in "prop: value" but not in a selectors "a:link" or "div::after" or media queries "(max-device-width:480px)".
-                return state.stack.lastValue === "propertyValue";
-            return false;
-        }
-
-        if (/\bcomment\b/.test(lastToken))
-            return true;
-
-        return false;
-    },
-
-    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (!token) {
-            if (content === ";")
-                return 1;
-            if (content === ",") { // "a,b,c,...,z{}" rule list at top level or in @media top level and only if the line length will be large.
-                if ((!state.stack.length || state.stack.lastValue === "@media{") && state._cssPrettyPrint.lineLength > 60) {
-                    state._cssPrettyPrint.lineLength = 0;
-                    return 1;
-                }
-                return 0;
-            }
-            if (content === "{")
-                return 1;
-            if (content === "}") // 2 newlines between rule declarations.
-                return 2;
-            return 0;
-        }
-
-        if (isComment)
-            return 1;
-
-        return 0;
-    },
-
-    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
-    {
-        if (isComment) { // Comment after semicolon.
-            if (!firstTokenOnLine && lastContent === ";")
-                return true;
-            return false;
-        }
-
-        return content === "}" && (lastContent === "{" || lastContent === "}"); // "{}" and "}\n}" when closing @media.
-    },
-
-    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        return content === "{";
-    },
-
-    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        return content === "}" && (lastContent !== "{" && lastContent !== "}"); // "{}" and "}\n}" when closing @media.
-    },
-
-    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        return false;
-    },
-
-    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        return content === "}" ? 1 : 0;
-    },
-
-    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
-    {
-        if (!state._cssPrettyPrint)
-            state._cssPrettyPrint = {lineLength: 0};
-
-        // In order insert newlines in selector lists we need keep track of the length of the current line.
-        // This isn't exact line length, only the builder knows that, but it is good enough to get an idea.
-        // If we are at a top level, keep track of the current line length, otherwise we reset to 0.
-        if (!state.stack.length || state.stack.lastValue === "@media{")
-            state._cssPrettyPrint.lineLength += content.length;
-        else
-            state._cssPrettyPrint.lineLength = 0;
-    }
-});
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorOverrides.css b/Source/WebInspectorUI/UserInterface/CodeMirrorOverrides.css
deleted file mode 100644
index d77dc9a0e..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorOverrides.css
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.CodeMirror {
-    z-index: 0;
-}
-
-.CodeMirror,
-.CodeMirror * {
-    box-sizing: content-box;
-}
-
-.CodeMirror .CodeMirror-lines {
- /* One pixel bottom padding needed to show the bottom border for matching brackets and search matches. */
-    padding: 0 0 1px 0;
-}
-
-.CodeMirror pre {
-    padding: 1px 3px 1px 7px;
-}
-
-.CodeMirror .CodeMirror-selected {
-    background-color: rgb(212, 212, 212);
-}
-
-.CodeMirror.CodeMirror-focused .CodeMirror-selected {
-    background-color: highlight;
-}
-
-.CodeMirror .CodeMirror-cursor {
-    pointer-events: none;
-}
-
-.CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket {
-    color: inherit;
-    background-color: rgba(100, 130, 235, 0.2);
-    border-bottom: 1px dotted rgb(20, 20, 235);
-}
-
-.CodeMirror .CodeMirror-lines .CodeMirror-nonmatchingbracket {
-    color: inherit;
-    background-color: rgba(235, 30, 20, 0.2);
-    border-bottom: 1px dotted rgb(235, 30, 20);
-}
-
-.CodeMirror .CodeMirror-gutters {
-    background-color: rgb(247, 247, 247);
-    border-right: 1px solid rgb(231, 231, 231);
-}
-
-.CodeMirror .CodeMirror-linenumber {
-    padding: 0 2px;
-    min-width: 21px;
-
-    color: rgb(146, 146, 146);
-
-    font-size: 9px;
-    line-height: 13px;
-    font-family: "Lucida Grande", sans-serif;
-    text-align: right;
-}
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.js b/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.js
deleted file mode 100644
index 2a93cf79e..000000000
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.js
+++ /dev/null
@@ -1,404 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CodeMirrorTokenTrackingController = function(codeMirror, delegate)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(codeMirror);
-
-    this._codeMirror = codeMirror;
-    this._delegate = delegate || null;
-    this._mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
-
-    this._mouseOverDelayDuration = 0;
-    this._mouseOutReleaseDelayDuration = 0;
-    this._classNameForHighlightedRange = null;
-
-    this._tracking = false;
-    this._hoveredTokenInfo = null;
-};
-
-WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName = "jump-to-symbol-highlight";
-
-WebInspector.CodeMirrorTokenTrackingController.Mode = {
-    NonSymbolTokens: "non-symbol-tokens",
-    JavaScriptExpression: "javascript-expression",
-}
-
-WebInspector.CodeMirrorTokenTrackingController.prototype = {
-    constructor: WebInspector.CodeMirrorTokenTrackingController,
-
-    // Public
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    set delegate(x)
-    {
-        this._delegate = x;
-    },
-
-    get mode()
-    {
-        return this._mode;
-    },
-
-    set mode(x)
-    {
-        var oldMode = this._mode;
-
-        this._mode = x || WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
-
-        if (oldMode !== this._mode && this._tracking && this._hoveredTokenInfo)
-            this._processNewHoveredToken();
-    },
-
-    get mouseOverDelayDuration()
-    {
-        return this._mouseOverDelayDuration;
-    },
-
-    set mouseOverDelayDuration(x)
-    {
-        console.assert(x >= 0);
-        this._mouseOverDelayDuration = Math.max(x, 0);
-    },
-
-    get mouseOutReleaseDelayDuration()
-    {
-        return this._mouseOutReleaseDelayDuration;
-    },
-
-    set mouseOutReleaseDelayDuration(x)
-    {
-        console.assert(x >= 0);
-        this._mouseOutReleaseDelayDuration = Math.max(x, 0);
-    },
-
-    get classNameForHighlightedRange()
-    {
-        return this._classNameForHighlightedRange;
-    },
-
-    set classNameForHighlightedRange(x)
-    {
-        this._classNameForHighlightedRange = x || null;
-    },
-
-    get tracking()
-    {
-        return this._tracking;
-    },
-
-    get candidate()
-    {
-        return this._candidate;
-    },
-
-    startTracking: function()
-    {
-        console.assert(!this._tracking);
-        if (this._tracking)
-            return;
-
-        this._tracking = true;
-
-        var wrapper = this._codeMirror.getWrapperElement();
-        wrapper.addEventListener("mousemove", this, true);
-        wrapper.addEventListener("mouseout", this, false);
-        wrapper.addEventListener("mousedown", this, false);
-        wrapper.addEventListener("mouseup", this, false);
-        window.addEventListener("blur", this, true);
-    },
-
-    stopTracking: function()
-    {
-        console.assert(this._tracking);
-        if (!this._tracking)
-            return;
-
-        this._tracking = false;
-
-        var wrapper = this._codeMirror.getWrapperElement();
-        wrapper.removeEventListener("mousemove", this, true);
-        wrapper.removeEventListener("mouseout", this, false);
-        wrapper.removeEventListener("mousedown", this, false);
-        wrapper.removeEventListener("mouseup", this, false);
-        window.removeEventListener("blur", this, true);
-        window.removeEventListener("mousemove", this, true);
-
-        clearTimeout(this._tokenHoverTimer);
-        delete this._selectionMayBeInProgress;
-        delete this._hoveredTokenInfo;
-    },
-
-    highlightRange: function(range)
-    {
-        this.removeHighlightedRange();
-
-        var className = this._classNameForHighlightedRange || "";
-        this._codeMirrorMarkedText = this._codeMirror.markText(range.start, range.end, {className: className});
-
-        window.addEventListener("mousemove", this, true);
-    },
-
-    removeHighlightedRange: function()
-    {
-        if (!this._codeMirrorMarkedText)
-            return;
-
-        this._codeMirrorMarkedText.clear();
-        delete this._codeMirrorMarkedText;
-
-        window.removeEventListener("mousemove", this, true);
-    },
-
-    boundsForRange: function(range)
-    {
-        var firstCharCoords = this._codeMirror.cursorCoords(range.start);
-        var lastCharCoords = this._codeMirror.cursorCoords(range.end);
-        return new WebInspector.Rect(firstCharCoords.left, firstCharCoords.top, lastCharCoords.right - firstCharCoords.left, firstCharCoords.bottom - firstCharCoords.top);
-    },
-
-    // Private
-
-    handleEvent: function(event)
-    {
-        switch (event.type) {
-        case "mousemove":
-            if (event.currentTarget === window)
-                this._mouseMovedWithMarkedText(event);
-            else
-                this._mouseMovedOverEditor(event);
-            break;
-        case "mouseout":
-            // Only deal with a mouseout event that has the editor wrapper as the target.
-            if (!event.currentTarget.contains(event.relatedTarget))
-                this._mouseMovedOutOfEditor(event);
-            break;
-        case "mousedown":
-            this._mouseButtonWasPressedOverEditor(event);
-            break;
-        case "mouseup":
-            this._mouseButtonWasReleasedOverEditor(event);
-            break;
-        case "blur":
-            this._windowLostFocus(event);
-            break;
-        }
-    },
-
-    _mouseMovedWithMarkedText: function(event)
-    {
-        var shouldRelease = !event.target.classList.contains(this._classNameForHighlightedRange);
-        if (shouldRelease && this._delegate && typeof this._delegate.tokenTrackingControllerCanReleaseHighlightedRange === "function")
-            shouldRelease = this._delegate.tokenTrackingControllerCanReleaseHighlightedRange(this, event.target);
-
-        if (shouldRelease) {
-            if (!this._markedTextMouseoutTimer)
-                this._markedTextMouseoutTimer = setTimeout(this._markedTextIsNoLongerHovered.bind(this), this._mouseOutReleaseDelayDuration);
-            return;
-        }
-
-        clearTimeout(this._markedTextMouseoutTimer);
-        delete this._markedTextMouseoutTimer;
-    },
-
-    _markedTextIsNoLongerHovered: function()
-    {
-        if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeReleased === "function")
-            this._delegate.tokenTrackingControllerHighlightedRangeReleased(this);
-        delete this._markedTextMouseoutTimer;
-    },
-
-    _mouseMovedOverEditor: function(event)
-    {
-        // Get the position in the text and the token at that position.
-        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
-        var token = this._codeMirror.getTokenAt(position);
-
-        if (!token || !token.type || !token.string) {
-            clearTimeout(this._tokenHoverTimer);
-            delete this._hoveredTokenInfo;
-            return;
-        }
-
-        // Stop right here if we're hovering the same token as we were last time.
-        if (this._hoveredTokenInfo &&
-            this._hoveredTokenInfo.position.line === position.line &&
-            this._hoveredTokenInfo.token.start === token.start &&
-            this._hoveredTokenInfo.token.end === token.end)
-            return;
-
-        // We have a new hovered token.
-        var innerMode = CodeMirror.innerMode(this._codeMirror.getMode(), token.state);
-        var codeMirrorModeName = innerMode.mode.alternateName || innerMode.mode.name;
-        this._hoveredTokenInfo = {
-            token: token,
-            position: position,
-            innerMode: innerMode,
-            modeName: codeMirrorModeName
-        };
-
-        clearTimeout(this._tokenHoverTimer);
-
-        if (this._codeMirrorMarkedText || !this._mouseOverDelayDuration)
-            this._processNewHoveredToken();
-        else
-            this._tokenHoverTimer = setTimeout(this._processNewHoveredToken.bind(this), this._mouseOverDelayDuration);
-    },
-
-    _mouseMovedOutOfEditor: function(event)
-    {
-        clearTimeout(this._tokenHoverTimer);
-        delete this._hoveredTokenInfo;
-        delete this._selectionMayBeInProgress;
-    },
-
-    _mouseButtonWasPressedOverEditor: function(event)
-    {
-        this._selectionMayBeInProgress = true;
-    },
-
-    _mouseButtonWasReleasedOverEditor: function(event)
-    {
-        delete this._selectionMayBeInProgress;
-        this._mouseMovedOverEditor(event);
-
-        if (this._codeMirrorMarkedText && this._hoveredTokenInfo) {
-            var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
-            var marks = this._codeMirror.findMarksAt(position);
-            for (var i = 0; i < marks.length; ++i) {
-                if (marks[i] === this._codeMirrorMarkedText) {
-                    if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeWasClicked === "function") {
-                        // Trigger the clicked delegate asynchronously, letting the editor complete handling of the click.
-                        setTimeout(function() { this._delegate.tokenTrackingControllerHighlightedRangeWasClicked(this); }.bind(this), 0);
-                    }
-                    break;
-                }
-            }
-        }
-    },
-
-    _windowLostFocus: function(event)
-    {
-        delete this._selectionMayBeInProgress;
-    },
-
-    _processNewHoveredToken: function()
-    {
-        console.assert(this._hoveredTokenInfo);
-
-        if (this._selectionMayBeInProgress)
-            return;
-
-        this._candidate = null;
-
-        switch (this._mode) {
-        case WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens:
-            this._candidate = this._processNonSymbolToken();
-            break;
-        case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression:
-            this._candidate = this._processJavaScriptExpression();
-            break;
-        }
-
-        if (!this._candidate)
-            return;
-
-        clearTimeout(this._markedTextMouseoutTimer);
-        delete this._markedTextMouseoutTimer;
-
-        if (this._delegate && typeof this._delegate.tokenTrackingControllerNewHighlightCandidate === "function")
-            this._delegate.tokenTrackingControllerNewHighlightCandidate(this, this._candidate);
-    },
-
-    _processNonSymbolToken: function()
-    {
-        // Ignore any symbol tokens.
-        var type = this._hoveredTokenInfo.token.type;
-        if (!type)
-            return null;
-
-        var startPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
-        var endPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.end};
-
-        return {
-            hoveredToken: this._hoveredTokenInfo.token,
-            hoveredTokenRange: {start: startPosition, end: endPosition},
-        };
-    },
-
-    _processJavaScriptExpression: function()
-    {
-        // Only valid within JavaScript.
-        if (this._hoveredTokenInfo.modeName !== "javascript")
-            return null;
-
-        // We only handle vars, definitions, properties, and the keyword 'this'.
-        var type = this._hoveredTokenInfo.token.type;
-        var isProperty = type.indexOf("property") !== -1;
-        var isKeyword = type.indexOf("keyword") !== -1;
-        if (!isProperty && !isKeyword && type.indexOf("variable") === -1 && type.indexOf("def") === -1)
-            return null;
-
-        // Not object literal properties.
-        var state = this._hoveredTokenInfo.innerMode.state;
-        if (isProperty && state.lexical && state.lexical.type === "}")
-            return null;
-
-        // Only the "this" keyword.
-        if (isKeyword && this._hoveredTokenInfo.token.string !== "this")
-            return null;
-
-        // Work out the full hovered expression.
-        var expression = this._hoveredTokenInfo.token.string;
-        var expressionStartPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
-        var startPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.start};
-        var endPosition = {line: this._hoveredTokenInfo.position.line, ch: this._hoveredTokenInfo.token.end};
-        while (true) {
-            var token = this._codeMirror.getTokenAt(expressionStartPosition);
-            var isDot = token && !token.type && token.string === ".";
-            var isExpression = token && token.type && token.type.indexOf("m-javascript") !== -1;
-            if (!isDot && !isExpression)
-                break;
-            expression = token.string + expression;
-            expressionStartPosition.ch = token.start;
-        }
-
-        // Return the candidate for this token and expression.
-        return {
-            hoveredToken: this._hoveredTokenInfo.token,
-            hoveredTokenRange: {start: startPosition, end: endPosition},
-            expression: expression,
-            expressionRange: {start: expressionStartPosition, end: endPosition},
-        };
-    }
-};
-
-WebInspector.CodeMirrorCompletionController.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Color.js b/Source/WebInspectorUI/UserInterface/Color.js
deleted file mode 100644
index 086dc1ba0..000000000
--- a/Source/WebInspectorUI/UserInterface/Color.js
+++ /dev/null
@@ -1,851 +0,0 @@
-/*
- * Copyright (C) 2009, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- */
-WebInspector.Color = function(str)
-{
-    this.value = str;
-    this._parse();
-}
-
-WebInspector.Color.Format = {
-    Original: "color-format-original",
-    Nickname: "color-format-nickname",
-    HEX: "color-format-hex",
-    ShortHEX: "color-format-short-hex",
-    RGB: "color-format-rgb",
-    RGBA: "color-format-rgba",
-    HSL: "color-format-hsl",
-    HSLA: "color-format-hsla"
-};
-
-/**
- * @param {number=} a
- */
-WebInspector.Color.fromRGBA = function(r, g, b, a)
-{
-    return new WebInspector.Color("rgba(" + r + "," + g + "," + b + "," + (typeof a === "undefined" ? 1 : a) + ")");
-}
-
-WebInspector.Color.fromRGB = function(r, g, b)
-{
-    return new WebInspector.Color("rgb(" + r + "," + g + "," + b + ")");
-}
-
-WebInspector.Color.prototype = {
-    nextFormat: function(format)
-    {
-        format = format || this.format;
-
-        switch (format) {
-        case WebInspector.Color.Format.Original:
-            return this.simple ? WebInspector.Color.Format.RGB : WebInspector.Color.Format.RGBA;
-
-        case WebInspector.Color.Format.RGB:
-        case WebInspector.Color.Format.RGBA:
-            return this.simple ? WebInspector.Color.Format.HSL : WebInspector.Color.Format.HSLA;
-
-        case WebInspector.Color.Format.HSL:
-        case WebInspector.Color.Format.HSLA:
-            if (this.nickname)
-                return WebInspector.Color.Format.Nickname;
-            if (this.simple)
-                return this.hasShortHex() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
-            else
-                return WebInspector.Color.Format.Original;
-
-        case WebInspector.Color.Format.ShortHEX:
-            return WebInspector.Color.Format.HEX;
-
-        case WebInspector.Color.Format.HEX:
-            return WebInspector.Color.Format.Original;
-
-        case WebInspector.Color.Format.Nickname:
-            if (this.simple)
-                return this.hasShortHex() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
-            else
-                return WebInspector.Color.Format.Original;
-
-        default:
-            console.error("Unknown color format.");
-            return null;
-        }
-    },
-
-    /**
-     * @return {string}
-     */
-    get shorthex()
-    {
-        if ("_short" in this)
-            return this._short;
-
-        if (!this.simple)
-            return "";
-
-        var hex = this.hex;
-        if (hex.charAt(0) === hex.charAt(1) && hex.charAt(2) === hex.charAt(3) && hex.charAt(4) === hex.charAt(5))
-            this._short = hex.charAt(0) + hex.charAt(2) + hex.charAt(4);
-        else
-            this._short = hex;
-
-        return this._short;
-    },
-
-    /**
-     * @return {string}
-     */
-    get hex()
-    {
-        if (!this.simple)
-            return "";
-
-        return this._hex;
-    },
-
-    set hex(x)
-    {
-        this._hex = x;
-    },
-
-    /**
-     * @return {Array.<number>}
-     */
-    get rgb()
-    {
-        if (this._rgb)
-            return this._rgb;
-
-        if (this.simple)
-            this._rgb = this._hexToRGB(this.hex);
-        else {
-            var rgba = this.rgba;
-            this._rgb = [rgba[0], rgba[1], rgba[2]];
-        }
-
-        return this._rgb;
-    },
-
-    set rgb(x)
-    {
-        this._rgb = x;
-    },
-
-    /**
-     * @return {Array.<number>}
-     */
-    get hsl()
-    {
-        if (this._hsl)
-            return this._hsl;
-
-        this._hsl = this._rgbToHSL(this.rgb);
-        return this._hsl;
-    },
-
-    set hsl(x)
-    {
-        this._hsl = x;
-    },
-
-    /**
-     * @return {string}
-     */
-    get nickname()
-    {
-        if (typeof this._nickname !== "undefined") // would be set on parse if there was a nickname
-            return this._nickname;
-        else
-            return "";
-    },
-
-    set nickname(x)
-    {
-        this._nickname = x;
-    },
-
-    /**
-     * @return {Array.<number>}
-     */
-    get rgba()
-    {
-        return this._rgba;
-    },
-
-    set rgba(x)
-    {
-        this._rgba = x;
-    },
-
-    /**
-     * @return {Array.<number>}
-     */
-    get hsla()
-    {
-        return this._hsla;
-    },
-
-    set hsla(x)
-    {
-        this._hsla = x;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    hasShortHex: function()
-    {
-        var shorthex = this.shorthex;
-        return (!!shorthex && shorthex.length === 3);
-    },
-
-    /**
-     * @return {string}
-     */
-    toString: function(format)
-    {
-        if (!format)
-            format = this.format;
-
-        switch (format) {
-            case WebInspector.Color.Format.Original:
-                return this.value;
-            case WebInspector.Color.Format.RGB:
-                return "rgb(" + this.rgb.join(", ") + ")";
-            case WebInspector.Color.Format.RGBA:
-                return "rgba(" + this.rgba.join(", ") + ")";
-            case WebInspector.Color.Format.HSL:
-                var hsl = this.hsl;
-                return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
-            case WebInspector.Color.Format.HSLA:
-                var hsla = this.hsla;
-                return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
-            case WebInspector.Color.Format.HEX:
-                return "#" + this.hex;
-            case WebInspector.Color.Format.ShortHEX:
-                return "#" + this.shorthex;
-            case WebInspector.Color.Format.Nickname:
-                return this.nickname;
-        }
-
-        throw "invalid color format";
-    },
-
-    /**
-     * @return {Object}
-     */
-    toProtocolRGBA: function()
-    {
-        if (this._protocolRGBA)
-            return this._protocolRGBA;
-
-        var components = this.rgba;
-        if (components)
-            this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]), a: Number(components[3]) };
-        else {
-            components = this.rgb;
-            this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]) };
-        }
-        return this._protocolRGBA;
-    },
-
-    /**
-     * @param {number} value
-     * @param {number} min
-     * @param {number} max
-     * @return {number}
-     */
-    _clamp: function(value, min, max)
-    {
-        if (value < min)
-            return min;
-        if (value > max)
-            return max;
-        return value;
-    },
-
-    /**
-     * @param {number|string} rgbValue
-     * @return {number}
-     */
-    _individualRGBValueToFloatValue: function(rgbValue)
-    {
-        if (typeof rgbValue === "number")
-            return this._clamp(rgbValue, 0, 255);
-
-        if (rgbValue.indexOf("%") === -1) {
-            var intValue = parseInt(rgbValue, 10);
-            return this._clamp(intValue, 0, 255);
-        }
-
-        var percentValue = parseFloat(rgbValue);
-        return this._clamp(percentValue, 0, 100) * 2.55;
-    },
-
-    /**
-     * @param {number|string} rgbValue
-     * @return {string}
-     */
-    _individualRGBValueToHexValue: function(rgbValue)
-    {
-        var floatValue = this._individualRGBValueToFloatValue(rgbValue);
-        var hex = Math.round(floatValue).toString(16);
-        if (hex.length === 1)
-            hex = "0" + hex;
-        return hex;
-    },
-
-    /**
-     * @param {Array.<string>} rgb
-     * @return {string}
-     */
-    _rgbStringsToHex: function(rgb)
-    {
-        var r = this._individualRGBValueToHexValue(rgb[0]);
-        var g = this._individualRGBValueToHexValue(rgb[1]);
-        var b = this._individualRGBValueToHexValue(rgb[2]);
-        return (r + g + b).toUpperCase();
-    },
-
-    /**
-     * @param {Array.<number>} rgb
-     * @return {string}
-     */
-    _rgbToHex: function(rgb)
-    {
-        var r = this._individualRGBValueToHexValue(rgb[0]);
-        var g = this._individualRGBValueToHexValue(rgb[1]);
-        var b = this._individualRGBValueToHexValue(rgb[2]);
-        return (r + g + b).toUpperCase();
-    },
-
-    /**
-     * @param {string} hex
-     * @return {Array.<number>}
-     */
-    _hexToRGB: function(hex)
-    {
-        var r = parseInt(hex.substring(0,2), 16);
-        var g = parseInt(hex.substring(2,4), 16);
-        var b = parseInt(hex.substring(4,6), 16);
-
-        return [r, g, b];
-    },
-
-    /**
-     * @param {Array.<string|number>} rgb
-     * @return {Array.<number>}
-     */
-    _rgbToHSL: function(rgb)
-    {
-        var r = this._individualRGBValueToFloatValue(rgb[0]) / 255;
-        var g = this._individualRGBValueToFloatValue(rgb[1]) / 255;
-        var b = this._individualRGBValueToFloatValue(rgb[2]) / 255;
-        var max = Math.max(r, g, b);
-        var min = Math.min(r, g, b);
-        var diff = max - min;
-        var add = max + min;
-
-        if (min === max)
-            var h = 0;
-        else if (r === max)
-            var h = ((60 * (g - b) / diff) + 360) % 360;
-        else if (g === max)
-            var h = (60 * (b - r) / diff) + 120;
-        else
-            var h = (60 * (r - g) / diff) + 240;
-
-        var l = 0.5 * add;
-
-        if (l === 0)
-            var s = 0;
-        else if (l === 1)
-            var s = 1;
-        else if (l <= 0.5)
-            var s = diff / add;
-        else
-            var s = diff / (2 - add);
-
-        h = Math.round(h);
-        s = Math.round(s*100);
-        l = Math.round(l*100);
-
-        return [h, s, l];
-    },
-
-    /**
-     * @param {Array.<number>} hsl
-     * @return {Array.<number>}
-     */
-    _hslToRGB: function(hsl)
-    {
-        var h = parseFloat(hsl[0]) / 360;
-        var s = parseFloat(hsl[1]) / 100;
-        var l = parseFloat(hsl[2]) / 100;
-
-        if (s < 0)
-            s = 0;
-
-        if (l <= 0.5)
-            var q = l * (1 + s);
-        else
-            var q = l + s - (l * s);
-
-        var p = 2 * l - q;
-
-        var tr = h + (1 / 3);
-        var tg = h;
-        var tb = h - (1 / 3);
-
-        var r = Math.round(hueToRGB(p, q, tr) * 255);
-        var g = Math.round(hueToRGB(p, q, tg) * 255);
-        var b = Math.round(hueToRGB(p, q, tb) * 255);
-        return [r, g, b];
-
-        function hueToRGB(p, q, h) {
-            if (h < 0)
-                h += 1;
-            else if (h > 1)
-                h -= 1;
-
-            if ((h * 6) < 1)
-                return p + (q - p) * h * 6;
-            else if ((h * 2) < 1)
-                return q;
-            else if ((h * 3) < 2)
-                return p + (q - p) * ((2 / 3) - h) * 6;
-            else
-                return p;
-        }
-    },
-
-    /**
-     * @param {Array.<number>} rgba
-     * @return {Array.<number>}
-     */
-    _rgbaToHSLA: function(rgba, alpha)
-    {
-        var hsl = this._rgbToHSL(rgba)
-        hsl.push(alpha);
-        return hsl;
-    },
-
-    /**
-     * @param {Array.<number>} hsla
-     * @param {number} alpha
-     * @return {Array.<number>}
-     */
-    _hslaToRGBA: function(hsla, alpha)
-    {
-        var rgb = this._hslToRGB(hsla);
-        rgb.push(alpha);
-        return rgb;
-    },
-
-    _parse: function()
-    {
-        // Special Values - Advanced but Must Be Parsed First - transparent
-        var value = this.value.toLowerCase().replace(/%|\s+/g, "");
-        if (value in WebInspector.Color.AdvancedNickNames) {
-            this.format = WebInspector.Color.Format.Nickname;
-            var set = WebInspector.Color.AdvancedNickNames[value];
-            this.simple = false;
-            this.rgba = set[0];
-            this.hsla = set[1];
-            this.nickname = set[2];
-            this.alpha = set[0][3];
-            return;
-        }
-
-        // Simple - #hex, rgb(), nickname, hsl()
-        var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
-        var match = this.value.match(simple);
-        if (match) {
-            this.simple = true;
-
-            if (match[1]) { // hex
-                var hex = match[1].toUpperCase();
-                if (hex.length === 3) {
-                    this.format = WebInspector.Color.Format.ShortHEX;
-                    this.hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
-                } else {
-                    this.format = WebInspector.Color.Format.HEX;
-                    this.hex = hex;
-                }
-            } else if (match[2]) { // rgb
-                this.format = WebInspector.Color.Format.RGB;
-                var rgb = match[2].split(/\s*,\s*/);
-                this.rgb = rgb;
-                this.hex = this._rgbStringsToHex(rgb);
-            } else if (match[3]) { // nickname
-                var nickname = match[3].toLowerCase();
-                if (nickname in WebInspector.Color.Nicknames) {
-                    this.format = WebInspector.Color.Format.Nickname;
-                    this.hex = WebInspector.Color.Nicknames[nickname];
-                } else // unknown name
-                    throw "unknown color name";
-            } else if (match[4]) { // hsl
-                this.format = WebInspector.Color.Format.HSL;
-                var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
-                this.hsl = hsl;
-                this.rgb = this._hslToRGB(hsl);
-                this.hex = this._rgbToHex(this.rgb);
-            }
-
-            // Fill in the values if this is a known hex color
-            var hex = this.hex;
-            if (hex && hex in WebInspector.Color.HexTable) {
-                var set = WebInspector.Color.HexTable[hex];
-                this.rgb = set[0];
-                this.hsl = set[1];
-                this.nickname = set[2];
-            }
-
-            return;
-        }
-
-        // Advanced - rgba(), hsla()
-        var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
-        match = this.value.match(advanced);
-        if (match) {
-            this.simple = false;
-            if (match[1]) { // rgba
-                this.format = WebInspector.Color.Format.RGBA;
-                this.rgba = match[1].split(/\s*,\s*/);
-                this.rgba[3] = this.alpha = this._clamp(this.rgba[3], 0, 1);
-                this.hsla = this._rgbaToHSLA(this.rgba, this.alpha);
-            } else if (match[2]) { // hsla
-                this.format = WebInspector.Color.Format.HSLA;
-                this.hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
-                this.hsla[3] = this.alpha = this._clamp(this.hsla[3], 0, 1);
-                this.rgba = this._hslaToRGBA(this.hsla, this.alpha);
-            }
-
-            return;
-        }
-
-        // Could not parse as a valid color
-        throw "could not parse color";
-    }
-}
-
-// Simple Values: [rgb, hsl, nickname]
-WebInspector.Color.HexTable = {
-    "000000": [[0, 0, 0], [0, 0, 0], "black"],
-    "000080": [[0, 0, 128], [240, 100, 25], "navy"],
-    "00008B": [[0, 0, 139], [240, 100, 27], "darkBlue"],
-    "0000CD": [[0, 0, 205], [240, 100, 40], "mediumBlue"],
-    "0000FF": [[0, 0, 255], [240, 100, 50], "blue"],
-    "006400": [[0, 100, 0], [120, 100, 20], "darkGreen"],
-    "008000": [[0, 128, 0], [120, 100, 25], "green"],
-    "008080": [[0, 128, 128], [180, 100, 25], "teal"],
-    "008B8B": [[0, 139, 139], [180, 100, 27], "darkCyan"],
-    "00BFFF": [[0, 191, 255], [195, 100, 50], "deepSkyBlue"],
-    "00CED1": [[0, 206, 209], [181, 100, 41], "darkTurquoise"],
-    "00FA9A": [[0, 250, 154], [157, 100, 49], "mediumSpringGreen"],
-    "00FF00": [[0, 255, 0], [120, 100, 50], "lime"],
-    "00FF7F": [[0, 255, 127], [150, 100, 50], "springGreen"],
-    "00FFFF": [[0, 255, 255], [180, 100, 50], "cyan"],
-    "191970": [[25, 25, 112], [240, 64, 27], "midnightBlue"],
-    "1E90FF": [[30, 144, 255], [210, 100, 56], "dodgerBlue"],
-    "20B2AA": [[32, 178, 170], [177, 70, 41], "lightSeaGreen"],
-    "228B22": [[34, 139, 34], [120, 61, 34], "forestGreen"],
-    "2E8B57": [[46, 139, 87], [146, 50, 36], "seaGreen"],
-    "2F4F4F": [[47, 79, 79], [180, 25, 25], "darkSlateGray"],
-    "32CD32": [[50, 205, 50], [120, 61, 50], "limeGreen"],
-    "3CB371": [[60, 179, 113], [147, 50, 47], "mediumSeaGreen"],
-    "40E0D0": [[64, 224, 208], [174, 72, 56], "turquoise"],
-    "4169E1": [[65, 105, 225], [225, 73, 57], "royalBlue"],
-    "4682B4": [[70, 130, 180], [207, 44, 49], "steelBlue"],
-    "483D8B": [[72, 61, 139], [248, 39, 39], "darkSlateBlue"],
-    "48D1CC": [[72, 209, 204], [178, 60, 55], "mediumTurquoise"],
-    "4B0082": [[75, 0, 130], [275, 100, 25], "indigo"],
-    "556B2F": [[85, 107, 47], [82, 39, 30], "darkOliveGreen"],
-    "5F9EA0": [[95, 158, 160], [182, 25, 50], "cadetBlue"],
-    "6495ED": [[100, 149, 237], [219, 79, 66], "cornflowerBlue"],
-    "66CDAA": [[102, 205, 170], [160, 51, 60], "mediumAquaMarine"],
-    "696969": [[105, 105, 105], [0, 0, 41], "dimGray"],
-    "6A5ACD": [[106, 90, 205], [248, 53, 58], "slateBlue"],
-    "6B8E23": [[107, 142, 35], [80, 60, 35], "oliveDrab"],
-    "708090": [[112, 128, 144], [210, 13, 50], "slateGray"],
-    "778899": [[119, 136, 153], [210, 14, 53], "lightSlateGray"],
-    "7B68EE": [[123, 104, 238], [249, 80, 67], "mediumSlateBlue"],
-    "7CFC00": [[124, 252, 0], [90, 100, 49], "lawnGreen"],
-    "7FFF00": [[127, 255, 0], [90, 100, 50], "chartreuse"],
-    "7FFFD4": [[127, 255, 212], [160, 100, 75], "aquamarine"],
-    "800000": [[128, 0, 0], [0, 100, 25], "maroon"],
-    "800080": [[128, 0, 128], [300, 100, 25], "purple"],
-    "808000": [[128, 128, 0], [60, 100, 25], "olive"],
-    "808080": [[128, 128, 128], [0, 0, 50], "gray"],
-    "87CEEB": [[135, 206, 235], [197, 71, 73], "skyBlue"],
-    "87CEFA": [[135, 206, 250], [203, 92, 75], "lightSkyBlue"],
-    "8A2BE2": [[138, 43, 226], [271, 76, 53], "blueViolet"],
-    "8B0000": [[139, 0, 0], [0, 100, 27], "darkRed"],
-    "8B008B": [[139, 0, 139], [300, 100, 27], "darkMagenta"],
-    "8B4513": [[139, 69, 19], [25, 76, 31], "saddleBrown"],
-    "8FBC8F": [[143, 188, 143], [120, 25, 65], "darkSeaGreen"],
-    "90EE90": [[144, 238, 144], [120, 73, 75], "lightGreen"],
-    "9370D8": [[147, 112, 219], [260, 60, 65], "mediumPurple"],
-    "9400D3": [[148, 0, 211], [282, 100, 41], "darkViolet"],
-    "98FB98": [[152, 251, 152], [120, 93, 79], "paleGreen"],
-    "9932CC": [[153, 50, 204], [280, 61, 50], "darkOrchid"],
-    "9ACD32": [[154, 205, 50], [80, 61, 50], "yellowGreen"],
-    "A0522D": [[160, 82, 45], [19, 56, 40], "sienna"],
-    "A52A2A": [[165, 42, 42], [0, 59, 41], "brown"],
-    "A9A9A9": [[169, 169, 169], [0, 0, 66], "darkGray"],
-    "ADD8E6": [[173, 216, 230], [195, 53, 79], "lightBlue"],
-    "ADFF2F": [[173, 255, 47], [84, 100, 59], "greenYellow"],
-    "AFEEEE": [[175, 238, 238], [180, 65, 81], "paleTurquoise"],
-    "B0C4DE": [[176, 196, 222], [214, 41, 78], "lightSteelBlue"],
-    "B0E0E6": [[176, 224, 230], [187, 52, 80], "powderBlue"],
-    "B22222": [[178, 34, 34], [0, 68, 42], "fireBrick"],
-    "B8860B": [[184, 134, 11], [43, 89, 38], "darkGoldenrod"],
-    "BA55D3": [[186, 85, 211], [288, 59, 58], "mediumOrchid"],
-    "BC8F8F": [[188, 143, 143], [0, 25, 65], "rosyBrown"],
-    "BDB76B": [[189, 183, 107], [56, 38, 58], "darkKhaki"],
-    "C0C0C0": [[192, 192, 192], [0, 0, 75], "silver"],
-    "C71585": [[199, 21, 133], [322, 81, 43], "mediumVioletRed"],
-    "CD5C5C": [[205, 92, 92], [0, 53, 58], "indianRed"],
-    "CD853F": [[205, 133, 63], [30, 59, 53], "peru"],
-    "D2691E": [[210, 105, 30], [25, 75, 47], "chocolate"],
-    "D2B48C": [[210, 180, 140], [34, 44, 69], "tan"],
-    "D3D3D3": [[211, 211, 211], [0, 0, 83], "lightGrey"],
-    "D87093": [[219, 112, 147], [340, 60, 65], "paleVioletRed"],
-    "D8BFD8": [[216, 191, 216], [300, 24, 80], "thistle"],
-    "DA70D6": [[218, 112, 214], [302, 59, 65], "orchid"],
-    "DAA520": [[218, 165, 32], [43, 74, 49], "goldenrod"],
-    "DC143C": [[237, 164, 61], [35, 83, 58], "crimson"],
-    "DCDCDC": [[220, 220, 220], [0, 0, 86], "gainsboro"],
-    "DDA0DD": [[221, 160, 221], [300, 47, 75], "plum"],
-    "DEB887": [[222, 184, 135], [34, 57, 70], "burlyWood"],
-    "E0FFFF": [[224, 255, 255], [180, 100, 94], "lightCyan"],
-    "E6E6FA": [[230, 230, 250], [240, 67, 94], "lavender"],
-    "E9967A": [[233, 150, 122], [15, 72, 70], "darkSalmon"],
-    "EE82EE": [[238, 130, 238], [300, 76, 72], "violet"],
-    "EEE8AA": [[238, 232, 170], [55, 67, 80], "paleGoldenrod"],
-    "F08080": [[240, 128, 128], [0, 79, 72], "lightCoral"],
-    "F0E68C": [[240, 230, 140], [54, 77, 75], "khaki"],
-    "F0F8FF": [[240, 248, 255], [208, 100, 97], "aliceBlue"],
-    "F0FFF0": [[240, 255, 240], [120, 100, 97], "honeyDew"],
-    "F0FFFF": [[240, 255, 255], [180, 100, 97], "azure"],
-    "F4A460": [[244, 164, 96], [28, 87, 67], "sandyBrown"],
-    "F5DEB3": [[245, 222, 179], [39, 77, 83], "wheat"],
-    "F5F5DC": [[245, 245, 220], [60, 56, 91], "beige"],
-    "F5F5F5": [[245, 245, 245], [0, 0, 96], "whiteSmoke"],
-    "F5FFFA": [[245, 255, 250], [150, 100, 98], "mintCream"],
-    "F8F8FF": [[248, 248, 255], [240, 100, 99], "ghostWhite"],
-    "FA8072": [[250, 128, 114], [6, 93, 71], "salmon"],
-    "FAEBD7": [[250, 235, 215], [34, 78, 91], "antiqueWhite"],
-    "FAF0E6": [[250, 240, 230], [30, 67, 94], "linen"],
-    "FAFAD2": [[250, 250, 210], [60, 80, 90], "lightGoldenrodYellow"],
-    "FDF5E6": [[253, 245, 230], [39, 85, 95], "oldLace"],
-    "FF0000": [[255, 0, 0], [0, 100, 50], "red"],
-    "FF00FF": [[255, 0, 255], [300, 100, 50], "magenta"],
-    "FF1493": [[255, 20, 147], [328, 100, 54], "deepPink"],
-    "FF4500": [[255, 69, 0], [16, 100, 50], "orangeRed"],
-    "FF6347": [[255, 99, 71], [9, 100, 64], "tomato"],
-    "FF69B4": [[255, 105, 180], [330, 100, 71], "hotPink"],
-    "FF7F50": [[255, 127, 80], [16, 100, 66], "coral"],
-    "FF8C00": [[255, 140, 0], [33, 100, 50], "darkOrange"],
-    "FFA07A": [[255, 160, 122], [17, 100, 74], "lightSalmon"],
-    "FFA500": [[255, 165, 0], [39, 100, 50], "orange"],
-    "FFB6C1": [[255, 182, 193], [351, 100, 86], "lightPink"],
-    "FFC0CB": [[255, 192, 203], [350, 100, 88], "pink"],
-    "FFD700": [[255, 215, 0], [51, 100, 50], "gold"],
-    "FFDAB9": [[255, 218, 185], [28, 100, 86], "peachPuff"],
-    "FFDEAD": [[255, 222, 173], [36, 100, 84], "navajoWhite"],
-    "FFE4B5": [[255, 228, 181], [38, 100, 85], "moccasin"],
-    "FFE4C4": [[255, 228, 196], [33, 100, 88], "bisque"],
-    "FFE4E1": [[255, 228, 225], [6, 100, 94], "mistyRose"],
-    "FFEBCD": [[255, 235, 205], [36, 100, 90], "blanchedAlmond"],
-    "FFEFD5": [[255, 239, 213], [37, 100, 92], "papayaWhip"],
-    "FFF0F5": [[255, 240, 245], [340, 100, 97], "lavenderBlush"],
-    "FFF5EE": [[255, 245, 238], [25, 100, 97], "seaShell"],
-    "FFF8DC": [[255, 248, 220], [48, 100, 93], "cornsilk"],
-    "FFFACD": [[255, 250, 205], [54, 100, 90], "lemonChiffon"],
-    "FFFAF0": [[255, 250, 240], [40, 100, 97], "floralWhite"],
-    "FFFAFA": [[255, 250, 250], [0, 100, 99], "snow"],
-    "FFFF00": [[255, 255, 0], [60, 100, 50], "yellow"],
-    "FFFFE0": [[255, 255, 224], [60, 100, 94], "lightYellow"],
-    "FFFFF0": [[255, 255, 240], [60, 100, 97], "ivory"],
-    "FFFFFF": [[255, 255, 255], [0, 100, 100], "white"]
-};
-
-// Simple Values
-WebInspector.Color.Nicknames = {
-    "aliceblue": "F0F8FF",
-    "antiquewhite": "FAEBD7",
-    "aqua": "00FFFF",
-    "aquamarine": "7FFFD4",
-    "azure": "F0FFFF",
-    "beige": "F5F5DC",
-    "bisque": "FFE4C4",
-    "black": "000000",
-    "blanchedalmond": "FFEBCD",
-    "blue": "0000FF",
-    "blueviolet": "8A2BE2",
-    "brown": "A52A2A",
-    "burlywood": "DEB887",
-    "cadetblue": "5F9EA0",
-    "chartreuse": "7FFF00",
-    "chocolate": "D2691E",
-    "coral": "FF7F50",
-    "cornflowerblue": "6495ED",
-    "cornsilk": "FFF8DC",
-    "crimson": "DC143C",
-    "cyan": "00FFFF",
-    "darkblue": "00008B",
-    "darkcyan": "008B8B",
-    "darkgoldenrod": "B8860B",
-    "darkgray": "A9A9A9",
-    "darkgreen": "006400",
-    "darkkhaki": "BDB76B",
-    "darkmagenta": "8B008B",
-    "darkolivegreen": "556B2F",
-    "darkorange": "FF8C00",
-    "darkorchid": "9932CC",
-    "darkred": "8B0000",
-    "darksalmon": "E9967A",
-    "darkseagreen": "8FBC8F",
-    "darkslateblue": "483D8B",
-    "darkslategray": "2F4F4F",
-    "darkturquoise": "00CED1",
-    "darkviolet": "9400D3",
-    "deeppink": "FF1493",
-    "deepskyblue": "00BFFF",
-    "dimgray": "696969",
-    "dodgerblue": "1E90FF",
-    "firebrick": "B22222",
-    "floralwhite": "FFFAF0",
-    "forestgreen": "228B22",
-    "fuchsia": "FF00FF",
-    "gainsboro": "DCDCDC",
-    "ghostwhite": "F8F8FF",
-    "gold": "FFD700",
-    "goldenrod": "DAA520",
-    "gray": "808080",
-    "green": "008000",
-    "greenyellow": "ADFF2F",
-    "honeydew": "F0FFF0",
-    "hotpink": "FF69B4",
-    "indianred": "CD5C5C",
-    "indigo": "4B0082",
-    "ivory": "FFFFF0",
-    "khaki": "F0E68C",
-    "lavender": "E6E6FA",
-    "lavenderblush": "FFF0F5",
-    "lawngreen": "7CFC00",
-    "lemonchiffon": "FFFACD",
-    "lightblue": "ADD8E6",
-    "lightcoral": "F08080",
-    "lightcyan": "E0FFFF",
-    "lightgoldenrodyellow": "FAFAD2",
-    "lightgreen": "90EE90",
-    "lightgrey": "D3D3D3",
-    "lightpink": "FFB6C1",
-    "lightsalmon": "FFA07A",
-    "lightseagreen": "20B2AA",
-    "lightskyblue": "87CEFA",
-    "lightslategray": "778899",
-    "lightsteelblue": "B0C4DE",
-    "lightyellow": "FFFFE0",
-    "lime": "00FF00",
-    "limegreen": "32CD32",
-    "linen": "FAF0E6",
-    "magenta": "FF00FF",
-    "maroon": "800000",
-    "mediumaquamarine": "66CDAA",
-    "mediumblue": "0000CD",
-    "mediumorchid": "BA55D3",
-    "mediumpurple": "9370DB",
-    "mediumseagreen": "3CB371",
-    "mediumslateblue": "7B68EE",
-    "mediumspringgreen": "00FA9A",
-    "mediumturquoise": "48D1CC",
-    "mediumvioletred": "C71585",
-    "midnightblue": "191970",
-    "mintcream": "F5FFFA",
-    "mistyrose": "FFE4E1",
-    "moccasin": "FFE4B5",
-    "navajowhite": "FFDEAD",
-    "navy": "000080",
-    "oldlace": "FDF5E6",
-    "olive": "808000",
-    "olivedrab": "6B8E23",
-    "orange": "FFA500",
-    "orangered": "FF4500",
-    "orchid": "DA70D6",
-    "palegoldenrod": "EEE8AA",
-    "palegreen": "98FB98",
-    "paleturquoise": "AFEEEE",
-    "palevioletred": "DB7093",
-    "papayawhip": "FFEFD5",
-    "peachpuff": "FFDAB9",
-    "peru": "CD853F",
-    "pink": "FFC0CB",
-    "plum": "DDA0DD",
-    "powderblue": "B0E0E6",
-    "purple": "800080",
-    "red": "FF0000",
-    "rosybrown": "BC8F8F",
-    "royalblue": "4169E1",
-    "saddlebrown": "8B4513",
-    "salmon": "FA8072",
-    "sandybrown": "F4A460",
-    "seagreen": "2E8B57",
-    "seashell": "FFF5EE",
-    "sienna": "A0522D",
-    "silver": "C0C0C0",
-    "skyblue": "87CEEB",
-    "slateblue": "6A5ACD",
-    "slategray": "708090",
-    "snow": "FFFAFA",
-    "springgreen": "00FF7F",
-    "steelblue": "4682B4",
-    "tan": "D2B48C",
-    "teal": "008080",
-    "thistle": "D8BFD8",
-    "tomato": "FF6347",
-    "turquoise": "40E0D0",
-    "violet": "EE82EE",
-    "wheat": "F5DEB3",
-    "white": "FFFFFF",
-    "whitesmoke": "F5F5F5",
-    "yellow": "FFFF00",
-    "yellowgreen": "9ACD32"
-};
-
-// Advanced Values [rgba, hsla, nickname]
-WebInspector.Color.AdvancedNickNames = {
-    "transparent": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
-    "rgba(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
-    "hsla(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
-};
diff --git a/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.css b/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.css
deleted file mode 100644
index bdbd313b4..000000000
--- a/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.css
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.completion-suggestions {
-    position: absolute;
-    display: block;
-
-    background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 5px;
-
-    z-index: 100;
-
-    margin-top: -1px;
-    margin-left: -10px;
-
-    box-shadow: rgba(0, 0, 0, 0.25) 0 5px 10px, rgba(0, 0, 0, 0.15) 0 0 0 1px;
-}
-
-.completion-suggestions > .completion-suggestions-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    border-radius: 5px;
-}
-
-.completion-suggestions-container > .item {
-    padding: 1px 10px;
-    margin: 0;
-
-    font-size: 11px;
-    font-family: Menlo, monospace;
-
-    line-height: 16px;
-    height: 16px;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    color: black;
-}
-
-.completion-suggestions-container:not(:active) > .item.selected,
-.completion-suggestions-container > .item:active {
-    box-shadow: inset rgb(87, 152, 206) 0 1px 0;
-    background: -webkit-linear-gradient(top, rgb(110, 167, 216), rgb(36, 114, 181));
-
-    color: white;
-    text-shadow: rgb(51, 88, 123) 0 1px 0;
-}
diff --git a/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.js b/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.js
deleted file mode 100644
index a09041ce6..000000000
--- a/Source/WebInspectorUI/UserInterface/CompletionSuggestionsView.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CompletionSuggestionsView = function(delegate)
-{
-    WebInspector.Object.call(this);
-
-    this._delegate = delegate || null;
-
-    this._selectedIndex = NaN;
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.CompletionSuggestionsView.StyleClassName;
-
-    this._containerElement = document.createElement("div");
-    this._containerElement.className = WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName;
-    this._containerElement.addEventListener("mousedown", this._mouseDown.bind(this));
-    this._containerElement.addEventListener("mouseup", this._mouseUp.bind(this));
-    this._containerElement.addEventListener("click", this._itemClicked.bind(this));
-    this._element.appendChild(this._containerElement);
-};
-
-WebInspector.CompletionSuggestionsView.StyleClassName = "completion-suggestions";
-WebInspector.CompletionSuggestionsView.ContainerElementStyleClassName = "completion-suggestions-container";
-WebInspector.CompletionSuggestionsView.ItemElementStyleClassName = "item";
-WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";
-
-WebInspector.CompletionSuggestionsView.prototype = {
-    constructor: WebInspector.CompletionSuggestionsView,
-
-    // Public
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    get visible()
-    {
-        return !!this._element.parentNode;
-    },
-
-    get selectedIndex()
-    {
-        return this._selectedIndex;
-    },
-
-    set selectedIndex(index)
-    {
-        var selectedItemElement = this._selectedItemElement;
-        if (selectedItemElement)
-            selectedItemElement.classList.remove(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
-
-        this._selectedIndex = index;
-
-        selectedItemElement = this._selectedItemElement;
-        if (!selectedItemElement)
-            return;
-
-        selectedItemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
-        selectedItemElement.scrollIntoViewIfNeeded(false);
-    },
-
-    selectNext: function()
-    {
-        var count = this._containerElement.children.length;
-
-        if (isNaN(this._selectedIndex) || this._selectedIndex === count - 1)
-            this.selectedIndex = 0;
-        else
-            ++this.selectedIndex;
-
-        var selectedItemElement = this._selectedItemElement;
-        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
-            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
-    },
-
-    selectPrevious: function()
-    {
-        if (isNaN(this._selectedIndex) || this._selectedIndex === 0)
-            this.selectedIndex = this._containerElement.children.length - 1;
-        else
-            --this.selectedIndex;
-
-        var selectedItemElement = this._selectedItemElement;
-        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
-            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
-    },
-
-    isHandlingClickEvent: function()
-    {
-        return this._mouseIsDown;
-    },
-
-    show: function(anchorBounds)
-    {
-        // Measure the container so we can know the intrinsic size of the items.
-        this._containerElement.style.position = "absolute";
-        document.body.appendChild(this._containerElement);
-
-        var containerWidth = this._containerElement.offsetWidth;
-        var containerHeight = this._containerElement.offsetHeight;
-
-        this._containerElement.removeAttribute("style");
-        this._element.appendChild(this._containerElement);
-
-        // Lay out the suggest-box relative to the anchorBounds.
-        const margin = 10;
-        const horizontalPadding = 22;
-        const absoluteMaximumHeight = 160;
-
-        var x = anchorBounds.origin.x;
-        var y = anchorBounds.origin.y + anchorBounds.size.height;
-
-        var maximumWidth = window.innerWidth - anchorBounds.origin.x - margin;
-        var width = Math.min(containerWidth, maximumWidth - horizontalPadding) + horizontalPadding;
-        var paddedWidth = containerWidth + horizontalPadding;
-
-        if (width < paddedWidth) {
-            // Shift the suggest box to the left to accommodate the content without trimming to the BODY edge.
-            maximumWidth = window.innerWidth - margin;
-            width = Math.min(containerWidth, maximumWidth - horizontalPadding) + horizontalPadding;
-            x = document.body.offsetWidth - width;
-        }
-
-        var aboveHeight = anchorBounds.origin.y;
-        var underHeight = window.innerHeight - anchorBounds.origin.y - anchorBounds.size.height;
-        var maximumHeight = Math.min(absoluteMaximumHeight, Math.max(underHeight, aboveHeight) - margin);
-        var height = Math.min(containerHeight, maximumHeight);
-
-        // Position the sugesstions above the anchor if there is more room.
-        // FIXME: This should always prefer positioning below until there is absolutely no room.
-        if (aboveHeight > underHeight)
-            y = anchorBounds.origin.y - height;
-
-        this._element.style.left = x + "px";
-        this._element.style.top = y + "px";
-        this._element.style.width = width + "px";
-        this._element.style.height = height + "px";
-
-        document.body.appendChild(this._element);
-    },
-
-    hide: function()
-    {
-        this._element.remove();
-    },
-
-    update: function(completions, selectedIndex)
-    {
-        this._containerElement.removeChildren();
-
-        if (typeof selectedIndex === "number")
-            this._selectedIndex = selectedIndex;
-
-        for (var i = 0; i < completions.length; ++i) {
-            var itemElement = document.createElement("div");
-            itemElement.className = WebInspector.CompletionSuggestionsView.ItemElementStyleClassName;
-            itemElement.textContent = completions[i];
-            if (i === this._selectedIndex)
-                itemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
-            this._containerElement.appendChild(itemElement);
-        }
-    },
-
-    // Private
-
-    get _selectedItemElement()
-    {
-        if (isNaN(this._selectedIndex))
-            return null;
-
-        var element = this._containerElement.children[this._selectedIndex] || null;
-        console.assert(element);
-        return element;
-    },
-
-    _mouseDown: function(event)
-    {
-        if (event.button !== 0)
-            return;
-        this._mouseIsDown = true;
-    },
-
-    _mouseUp: function(event)
-    {
-        if (event.button !== 0)
-            return;
-        this._mouseIsDown = false;
-    },
-
-    _itemClicked: function(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.CompletionSuggestionsView.ItemElementStyleClassName);
-        console.assert(itemElement);
-        if (!itemElement)
-            return;
-
-        if (this._delegate && typeof this._delegate.completionSuggestionsClickedCompletion === "function")
-            this._delegate.completionSuggestionsClickedCompletion(this, itemElement.textContent);
-    }
-};
-
-WebInspector.CompletionSuggestionsView.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js
deleted file mode 100644
index 0329b9e56..000000000
--- a/Source/WebInspectorUI/UserInterface/ComputedStyleDetailsPanel.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ComputedStyleDetailsPanel = function()
-{
-    WebInspector.StyleDetailsPanel.call(this, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Computed"));
-
-    this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
-
-    var computedStyleShowAllLabel = document.createElement("label");
-    computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
-
-    this._computedStyleShowAllCheckbox = document.createElement("input");
-    this._computedStyleShowAllCheckbox.type = "checkbox";
-    this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
-    this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
-    computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
-
-    this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
-    this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
-    this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
-    this._propertiesTextEditor.sortProperties = true;
-
-    var propertiesRow = new WebInspector.DetailsSectionRow;
-    var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
-    var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
-
-    propertiesRow.element.appendChild(this._propertiesTextEditor.element);
-
-    this.element.appendChild(propertiesSection.element);
-};
-
-WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
-
-WebInspector.ComputedStyleDetailsPanel.prototype = {
-    constructor: WebInspector.ComputedStyleDetailsPanel,
-
-    // Public
-
-    refresh: function()
-    {
-        this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
-    },
-
-    // Protected
-
-    shown: function()
-    {
-        WebInspector.StyleDetailsPanel.prototype.shown.call(this);
-
-        this._propertiesTextEditor.updateLayout();
-    },
-
-    widthDidChange: function()
-    {
-        this._propertiesTextEditor.updateLayout();
-    },
-
-    // Private
-
-    _computedStyleShowAllCheckboxValueChanged: function(event)
-    {
-        var checked = this._computedStyleShowAllCheckbox.checked;
-        this._computedStyleShowAllSetting.value = checked;
-        this._propertiesTextEditor.showsImplicitProperties = checked;
-    }
-};
-
-WebInspector.ComputedStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleCommand.js b/Source/WebInspectorUI/UserInterface/ConsoleCommand.js
deleted file mode 100644
index 95b24c28e..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleCommand.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ConsoleCommand = function(command)
-{
-    WebInspector.Object.call(this);
-
-    this.command = command;
-};
-
-WebInspector.ConsoleCommand.prototype = {
-    constructor: WebInspector.ConsoleCommand,
-
-    // Public
-
-    clearHighlight: function()
-    {
-        var highlightedMessage = this._formattedCommand;
-        delete this._formattedCommand;
-        this._formatCommand();
-        this._element.replaceChild(this._formattedCommand, highlightedMessage);
-    },
-
-    highlightSearchResults: function(regexObject)
-    {
-        regexObject.lastIndex = 0;
-        var text = this.command;
-        var match = regexObject.exec(text);
-        var offset = 0;
-        var matchRanges = [];
-        while (match) {
-            matchRanges.push({ offset: match.index, length: match[0].length });
-            match = regexObject.exec(text);
-        }
-        highlightSearchResults(this._formattedCommand, matchRanges);
-        this._element.scrollIntoViewIfNeeded();
-    },
-
-    matchesRegex: function(regexObject)
-    {
-        return regexObject.test(this.command);
-    },
-
-    toMessageElement: function()
-    {
-        if (!this._element) {
-            this._element = document.createElement("div");
-            this._element.command = this;
-            this._element.className = "console-user-command";
-            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Input: "));
-
-            this._formatCommand();
-            this._element.appendChild(this._formattedCommand);
-        }
-        return this._element;
-    },
-
-    // Private
-
-    _formatCommand: function()
-    {
-        this._formattedCommand = document.createElement("span");
-        this._formattedCommand.className = "console-message-text source-code";
-        this._formattedCommand.textContent = this.command;
-    },
-    
-    toClipboardString: function(isPrefixOptional)
-    {
-        return (isPrefixOptional ? "" : "> ") + this.command;
-    }
-};
-
-WebInspector.ConsoleCommand.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleCommandResult.js b/Source/WebInspectorUI/UserInterface/ConsoleCommandResult.js
deleted file mode 100644
index 4f08a563c..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleCommandResult.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ConsoleCommandResult = function(result, wasThrown, originatingCommand)
-{
-    var level = (wasThrown ? WebInspector.ConsoleMessage.MessageLevel.Error : WebInspector.ConsoleMessage.MessageLevel.Log);
-    this.originatingCommand = originatingCommand;
-
-    WebInspector.ConsoleMessageImpl.call(this, WebInspector.ConsoleMessage.MessageSource.JS, level, "", null, WebInspector.ConsoleMessage.MessageType.Result, undefined, undefined, undefined, undefined, [result]);
-};
-
-WebInspector.ConsoleCommandResult.prototype = {
-    constructor: WebInspector.ConsoleCommandResult,
-
-    // Public
-
-    enforcesClipboardPrefixString: false,
-
-    toMessageElement: function()
-    {
-        var element = WebInspector.ConsoleMessageImpl.prototype.toMessageElement.call(this);
-        element.classList.add("console-user-command-result");
-        element.setAttribute("data-labelprefix", WebInspector.UIString("Output: "));
-        return element;
-    },
-
-    get clipboarPrefixString ()
-    {
-        return "< ";
-    }
-};
-
-WebInspector.ConsoleCommandResult.prototype.__proto__ = WebInspector.ConsoleMessageImpl.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleGroup.js b/Source/WebInspectorUI/UserInterface/ConsoleGroup.js
deleted file mode 100644
index 901e1b193..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleGroup.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ConsoleGroup = function(parentGroup, isNewSession)
-{
-    WebInspector.Object.call(this);
-
-    this.parentGroup = parentGroup;
-
-    var element = document.createElement("div");
-    element.className = "console-group";
-    element.group = this;
-    this.element = element;
-
-    if (isNewSession)
-        element.classList.add("new-session");
-
-    var messagesElement = document.createElement("div");
-    messagesElement.className = "console-group-messages";
-    element.appendChild(messagesElement);
-    this.messagesElement = messagesElement;
-};
-
-WebInspector.ConsoleGroup.prototype = {
-    constructor: WebInspector.ConsoleGroup,
-
-    // Public
-
-    addMessage: function(msg)
-    {
-        var element = msg.toMessageElement();
-
-        var wrapper = document.createElement("div");
-        wrapper.className = WebInspector.LogContentView.ItemWrapperStyleClassName;
-        wrapper.messageElement = wrapper.appendChild(element);
-
-        if (msg.type === WebInspector.ConsoleMessage.MessageType.StartGroup || msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed) {
-            this.messagesElement.parentNode.insertBefore(wrapper, this.messagesElement);
-            element.addEventListener("click", this._titleClicked.bind(this));
-            element.addEventListener("mousedown", this._titleMouseDown.bind(this));
-            var groupElement = element.enclosingNodeOrSelfWithClass("console-group");
-            if (groupElement && msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
-                groupElement.classList.add("collapsed");
-        } else
-            this.messagesElement.appendChild(wrapper);
-    },
-
-    hasMessages: function()
-    {
-        return !!this.messagesElement.childNodes.length;
-    },
-
-    // Private
-
-    _titleMouseDown: function(event)
-    {
-        event.preventDefault();
-    },
-
-    _titleClicked: function(event)
-    {
-        var groupTitleElement = event.target.enclosingNodeOrSelfWithClass("console-group-title");
-        if (groupTitleElement) {
-            var groupElement = groupTitleElement.enclosingNodeOrSelfWithClass("console-group");
-            if (groupElement)
-                if (groupElement.classList.contains("collapsed"))
-                    groupElement.classList.remove("collapsed");
-                else
-                    groupElement.classList.add("collapsed");
-            groupTitleElement.scrollIntoViewIfNeeded(true);
-        }
-    }
-};
-
-WebInspector.ConsoleGroup.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleMessage.js b/Source/WebInspectorUI/UserInterface/ConsoleMessage.js
deleted file mode 100644
index 40786336d..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleMessage.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc.  All rights reserved.
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ConsoleMessage = function(source, level, url, line, column, repeatCount)
-{
-    this.source = source;
-    this.level = level;
-    this.url = url || null;
-    this.line = line || 0;
-    this.column = column || 0;
-
-    repeatCount = repeatCount || 1;
-    this.repeatCount = repeatCount;
-    this.repeatDelta = repeatCount;
-    this.totalRepeatCount = repeatCount;
-}
-
-WebInspector.ConsoleMessage.prototype = {
-    /**
-     * @return {boolean}
-     */
-    isErrorOrWarning: function()
-    {
-        return (this.level === WebInspector.ConsoleMessage.MessageLevel.Warning || this.level === WebInspector.ConsoleMessage.MessageLevel.Error);
-    },
-
-    updateRepeatCount: function()
-    {
-        // Implemented by concrete instances
-    },
-
-    /**
-     * @return {WebInspector.ConsoleMessage}
-     */
-    clone: function()
-    {
-        // Implemented by concrete instances
-    }
-}
-
-/**
- * @param {string} source
- * @param {string} level
- * @param {string} message
- * @param {string=} type
- * @param {string=} url
- * @param {number=} line
- * @param {number=} repeatCount
- * @param {Array.<RuntimeAgent.RemoteObject>=} parameters
- * @param {ConsoleAgent.StackTrace=} stackTrace
- * @param {WebInspector.Resource=} request
- *
- * @return {WebInspector.ConsoleMessage}
- */
-WebInspector.ConsoleMessage.create = function(source, level, message, type, url, line, column, repeatCount, parameters, stackTrace, request)
-{
-    return new WebInspector.ConsoleMessageImpl(source, level, message, null, type, url, line, column, repeatCount, parameters, stackTrace, request);
-}
-
-// Note: Keep these constants in sync with the ones in Console.h
-WebInspector.ConsoleMessage.MessageSource = {
-    HTML: "html",
-    XML: "xml",
-    JS: "javascript",
-    Network: "network",
-    ConsoleAPI: "console-api",
-    Other: "other"
-}
-
-WebInspector.ConsoleMessage.MessageType = {
-    Log: "log",
-    Dir: "dir",
-    DirXML: "dirxml",
-    Trace: "trace",
-    StartGroup: "startGroup",
-    StartGroupCollapsed: "startGroupCollapsed",
-    EndGroup: "endGroup",
-    Assert: "assert",
-    Result: "result"
-}
-
-WebInspector.ConsoleMessage.MessageLevel = {
-    Tip: "tip",
-    Log: "log",
-    Warning: "warning",
-    Error: "error",
-    Debug: "debug"
-}
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleMessageImpl.js b/Source/WebInspectorUI/UserInterface/ConsoleMessageImpl.js
deleted file mode 100644
index 609d9115e..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleMessageImpl.js
+++ /dev/null
@@ -1,711 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc.  All rights reserved.
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ConsoleMessageImpl = function(source, level, message, linkifier, type, url, line, column, repeatCount, parameters, stackTrace, request)
-{
-    WebInspector.ConsoleMessage.call(this, source, level, url, line, column, repeatCount);
-
-    this._linkifier = linkifier;
-    this.type = type || WebInspector.ConsoleMessage.MessageType.Log;
-    this._messageText = message;
-    this._parameters = parameters;
-    this._stackTrace = stackTrace;
-    this._request = request;
-
-    this._customFormatters = {
-        "object": this._formatParameterAsObject,
-        "array":  this._formatParameterAsArray,
-        "node":   this._formatParameterAsNode,
-        "string": this._formatParameterAsString
-    };
-}
-
-WebInspector.ConsoleMessageImpl.prototype = {
-
-    enforcesClipboardPrefixString: true,
-
-    _formatMessage: function()
-    {
-        this._formattedMessage = document.createElement("span");
-        this._formattedMessage.className = "console-message-text source-code";
-
-        var messageText;
-        if (this.source === WebInspector.ConsoleMessage.MessageSource.ConsoleAPI) {
-            switch (this.type) {
-                case WebInspector.ConsoleMessage.MessageType.Trace:
-                    messageText = document.createTextNode("console.trace()");
-                    break;
-                case WebInspector.ConsoleMessage.MessageType.Assert:
-                    var args = [WebInspector.UIString("Assertion failed:")];
-                    if (this._parameters)
-                        args = args.concat(this._parameters);
-                    messageText = this._format(args);
-                    break;
-                case WebInspector.ConsoleMessage.MessageType.Dir:
-                    var obj = this._parameters ? this._parameters[0] : undefined;
-                    var args = ["%O", obj];
-                    messageText = this._format(args);
-                    break;
-                default:
-                    var args = this._parameters || [this._messageText];
-                    messageText = this._format(args);
-            }
-        } else if (this.source === WebInspector.ConsoleMessage.MessageSource.Network) {
-            if (this._request) {
-                this._stackTrace = this._request.stackTrace;
-                if (this._request.initiator && this._request.initiator.url) {
-                    this.url = this._request.initiator.url;
-                    this.line = this._request.initiator.lineNumber;
-                }
-                messageText = document.createElement("span");
-                if (this.level === WebInspector.ConsoleMessage.MessageLevel.Error) {
-                    messageText.appendChild(document.createTextNode(this._request.requestMethod + " "));
-                    messageText.appendChild(WebInspector.linkifyRequestAsNode(this._request));
-                    if (this._request.failed)
-                        messageText.appendChild(document.createTextNode(" " + this._request.localizedFailDescription));
-                    else
-                        messageText.appendChild(document.createTextNode(" " + this._request.statusCode + " (" + this._request.statusText + ")"));
-                } else {
-                    var fragment = WebInspector.linkifyStringAsFragmentWithCustomLinkifier(this._messageText, WebInspector.linkifyRequestAsNode.bind(null, this._request, ""));
-                    messageText.appendChild(fragment);
-                }
-            } else {
-                if (this.url) {
-                    var anchor = WebInspector.linkifyURLAsNode(this.url, this.url, "console-message-url");
-                    this._formattedMessage.appendChild(anchor);
-                }
-                messageText = this._format([this._messageText]);
-            }
-        } else {
-            var args = this._parameters || [this._messageText];
-            messageText = this._format(args);
-        }
-
-        if (this.source !== WebInspector.ConsoleMessage.MessageSource.Network || this._request) {
-            if (this._stackTrace && this._stackTrace.length && this._stackTrace[0].url) {
-                var urlElement = this._linkifyCallFrame(this._stackTrace[0]);
-                this._formattedMessage.appendChild(urlElement);
-            } else if (this.url && this.url !== "undefined") {
-                var urlElement = this._linkifyLocation(this.url, this.line, this.column);
-                this._formattedMessage.appendChild(urlElement);
-            }
-        }
-
-        this._formattedMessage.appendChild(messageText);
-
-        if (this._shouldDumpStackTrace()) {
-            var ol = document.createElement("ol");
-            ol.className = "outline-disclosure";
-            var treeOutline = new TreeOutline(ol);
-
-            var content = this._formattedMessage;
-            var root = new TreeElement(content, null, true);
-            content.treeElementForTest = root;
-            treeOutline.appendChild(root);
-            if (this.type === WebInspector.ConsoleMessage.MessageType.Trace)
-                root.expand();
-
-            this._populateStackTraceTreeElement(root);
-            this._formattedMessage = ol;
-        }
-
-        // This is used for inline message bubbles in SourceFrames, or other plain-text representations.
-        this._message = messageText.textContent;
-    },
-
-    _shouldDumpStackTrace: function()
-    {
-        return !!this._stackTrace && this._stackTrace.length && (this.source === WebInspector.ConsoleMessage.MessageSource.Network || this.level === WebInspector.ConsoleMessage.MessageLevel.Error || this.type === WebInspector.ConsoleMessage.MessageType.Trace);
-    },
-
-    get message()
-    {
-        // force message formatting
-        var formattedMessage = this.formattedMessage;
-        return this._message;
-    },
-
-    get formattedMessage()
-    {
-        if (!this._formattedMessage)
-            this._formatMessage();
-        return this._formattedMessage;
-    },
-
-    _linkifyLocation: function(url, lineNumber, columnNumber)
-    {
-        // ConsoleMessage stack trace line numbers are one-based.
-        lineNumber = lineNumber ? lineNumber - 1 : 0;
-
-        return WebInspector.linkifyLocation(url, lineNumber, columnNumber, "console-message-url");
-    },
-
-    _linkifyCallFrame: function(callFrame)
-    {
-        return this._linkifyLocation(callFrame.url, callFrame.lineNumber, callFrame.columnNumber);
-    },
-
-    isErrorOrWarning: function()
-    {
-        return (this.level === WebInspector.ConsoleMessage.MessageLevel.Warning || this.level === WebInspector.ConsoleMessage.MessageLevel.Error);
-    },
-
-    _format: function(parameters)
-    {
-        // This node is used like a Builder. Values are continually appended onto it.
-        var formattedResult = document.createElement("span");
-        if (!parameters.length)
-            return formattedResult;
-
-        // Formatting code below assumes that parameters are all wrappers whereas frontend console
-        // API allows passing arbitrary values as messages (strings, numbers, etc.). Wrap them here.
-        for (var i = 0; i < parameters.length; ++i) {
-            // FIXME: Only pass runtime wrappers here.
-            if (parameters[i] instanceof WebInspector.RemoteObject)
-                continue;
-
-            if (typeof parameters[i] === "object")
-                parameters[i] = WebInspector.RemoteObject.fromPayload(parameters[i]);
-            else
-                parameters[i] = WebInspector.RemoteObject.fromPrimitiveValue(parameters[i]);
-        }
-
-        // There can be string log and string eval result. We distinguish between them based on message type.
-        var shouldFormatMessage = WebInspector.RemoteObject.type(parameters[0]) === "string" && this.type !== WebInspector.ConsoleMessage.MessageType.Result;
-
-        // Multiple parameters with the first being a format string. Save unused substitutions.
-        if (shouldFormatMessage) {
-            // Multiple parameters with the first being a format string. Save unused substitutions.
-            var result = this._formatWithSubstitutionString(parameters, formattedResult);
-            parameters = result.unusedSubstitutions;
-            if (parameters.length)
-                formattedResult.appendChild(document.createTextNode(" "));
-        }
-
-        // Single parameter, or unused substitutions from above.
-        for (var i = 0; i < parameters.length; ++i) {
-            // Inline strings when formatting.
-            if (shouldFormatMessage && parameters[i].type === "string")
-                formattedResult.appendChild(document.createTextNode(parameters[i].description));
-            else
-                formattedResult.appendChild(this._formatParameter(parameters[i]));
-            if (i < parameters.length - 1)
-                formattedResult.appendChild(document.createTextNode(" "));
-        }
-        return formattedResult;
-    },
-
-    /**
-     * @param {boolean=} forceObjectFormat
-     */
-    _formatParameter: function(output, forceObjectFormat)
-    {
-        var type;
-        if (forceObjectFormat)
-            type = "object";
-        else if (output instanceof WebInspector.RemoteObject)
-            type = output.subtype || output.type;
-        else
-            type = typeof output;
-
-        var formatter = this._customFormatters[type];
-        if (!formatter) {
-            formatter = this._formatParameterAsValue;
-            output = output.description;
-        }
-
-        var span = document.createElement("span");
-        span.className = "console-formatted-" + type + " source-code";
-        formatter.call(this, output, span);
-        return span;
-    },
-
-    _formatParameterAsValue: function(val, elem)
-    {
-        elem.appendChild(document.createTextNode(val));
-    },
-
-    _formatParameterAsObject: function(obj, elem)
-    {
-        elem.appendChild(new WebInspector.ObjectPropertiesSection(obj, obj.description).element);
-    },
-
-    _formatParameterAsNode: function(object, elem)
-    {
-        function printNode(nodeId)
-        {
-            if (!nodeId) {
-                // Sometimes DOM is loaded after the sync message is being formatted, so we get no
-                // nodeId here. So we fall back to object formatting here.
-                this._formatParameterAsObject(object, elem);
-                return;
-            }
-            var treeOutline = new WebInspector.DOMTreeOutline(false, false, true);
-            treeOutline.setVisible(true);
-            treeOutline.rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
-            treeOutline.element.classList.add("outline-disclosure");
-            if (!treeOutline.children[0].hasChildren)
-                treeOutline.element.classList.add("single-node");
-            elem.appendChild(treeOutline.element);
-        }
-        object.pushNodeToFrontend(printNode.bind(this));
-    },
-
-    _formatParameterAsArray: function(arr, elem)
-    {
-        arr.getOwnProperties(this._printArray.bind(this, arr, elem));
-    },
-
-    _formatParameterAsString: function(output, elem)
-    {
-        var span = document.createElement("span");
-        span.className = "console-formatted-string source-code";
-        span.appendChild(WebInspector.linkifyStringAsFragment(output.description));
-
-        // Make black quotes.
-        elem.classList.remove("console-formatted-string");
-        elem.appendChild(document.createTextNode("\""));
-        elem.appendChild(span);
-        elem.appendChild(document.createTextNode("\""));
-    },
-
-    _printArray: function(array, elem, properties)
-    {
-        if (!properties)
-            return;
-
-        var elements = [];
-        for (var i = 0; i < properties.length; ++i) {
-            var property = properties[i];
-            var name = property.name;
-            if (!isNaN(name))
-                elements[name] = this._formatAsArrayEntry(property.value);
-        }
-
-        elem.appendChild(document.createTextNode("["));
-        var lastNonEmptyIndex = -1;
-
-        function appendUndefined(elem, index)
-        {
-            if (index - lastNonEmptyIndex <= 1)
-                return;
-            var span = elem.createChild("span", "console-formatted-undefined");
-            span.textContent = WebInspector.UIString("undefined × %d").format(index - lastNonEmptyIndex - 1);
-        }
-
-        var length = array.arrayLength();
-        for (var i = 0; i < length; ++i) {
-            var element = elements[i];
-            if (!element)
-                continue;
-
-            if (i - lastNonEmptyIndex > 1) {
-                appendUndefined(elem, i);
-                elem.appendChild(document.createTextNode(", "));
-            }
-
-            elem.appendChild(element);
-            lastNonEmptyIndex = i;
-            if (i < length - 1)
-                elem.appendChild(document.createTextNode(", "));
-        }
-        appendUndefined(elem, length);
-
-        elem.appendChild(document.createTextNode("]"));
-    },
-
-    _formatAsArrayEntry: function(output)
-    {
-        // Prevent infinite expansion of cross-referencing arrays.
-        return this._formatParameter(output, output.subtype && output.subtype === "array");
-    },
-
-    _formatWithSubstitutionString: function(parameters, formattedResult)
-    {
-        var formatters = {}
-
-        function parameterFormatter(force, obj)
-        {
-            return this._formatParameter(obj, force);
-        }
-
-        function stringFormatter(obj)
-        {
-            return obj.description;
-        }
-
-        function floatFormatter(obj)
-        {
-            if (typeof obj.value !== "number")
-                return parseFloat(obj.description);
-            return obj.value;
-        }
-
-        function integerFormatter(obj)
-        {
-            if (typeof obj.value !== "number")
-                return parseInt(obj.description);
-            return Math.floor(obj.value);
-        }
-
-        var currentStyle = null;
-        function styleFormatter(obj)
-        {
-            currentStyle = {};
-            var buffer = document.createElement("span");
-            buffer.setAttribute("style", obj.description);
-            for (var i = 0; i < buffer.style.length; i++) {
-                var property = buffer.style[i];
-                if (isWhitelistedProperty(property))
-                    currentStyle[property] = buffer.style[property];
-            }
-        }
-
-        function isWhitelistedProperty(property)
-        {
-            var prefixes = ["background", "border", "color", "font", "line", "margin", "padding", "text", "-webkit-background", "-webkit-border", "-webkit-font", "-webkit-margin", "-webkit-padding", "-webkit-text"];
-            for (var i = 0; i < prefixes.length; i++) {
-                if (property.startsWith(prefixes[i]))
-                    return true;
-            }
-            return false;
-        }
-
-        // Firebug uses %o for formatting objects.
-        formatters.o = parameterFormatter.bind(this, false);
-        formatters.s = stringFormatter;
-        formatters.f = floatFormatter;
-
-        // Firebug allows both %i and %d for formatting integers.
-        formatters.i = integerFormatter;
-        formatters.d = integerFormatter;
-
-        // Firebug uses %c for styling the message.
-        formatters.c = styleFormatter;
-
-        // Support %O to force object formatting, instead of the type-based %o formatting.
-        formatters.O = parameterFormatter.bind(this, true);
-
-        function append(a, b)
-        {
-            if (b instanceof Node)
-                a.appendChild(b);
-            else if (b) {
-                var toAppend = WebInspector.linkifyStringAsFragment(b.toString());
-                if (currentStyle) {
-                    var wrapper = document.createElement("span");
-                    for (var key in currentStyle)
-                        wrapper.style[key] = currentStyle[key];
-                    wrapper.appendChild(toAppend);
-                    toAppend = wrapper;
-                }
-                a.appendChild(toAppend);
-            }
-            return a;
-        }
-
-        // String.format does treat formattedResult like a Builder, result is an object.
-        return String.format(parameters[0].description, parameters.slice(1), formatters, formattedResult, append);
-    },
-
-    clearHighlight: function()
-    {
-        if (!this._formattedMessage)
-            return;
-
-        var highlightedMessage = this._formattedMessage;
-        delete this._formattedMessage;
-        this._formatMessage();
-        this._element.replaceChild(this._formattedMessage, highlightedMessage);
-    },
-
-    highlightSearchResults: function(regexObject)
-    {
-        if (!this._formattedMessage)
-            return;
-
-        regexObject.lastIndex = 0;
-        var text = this.message;
-        var match = regexObject.exec(text);
-        var offset = 0;
-        var matchRanges = [];
-        while (match) {
-            matchRanges.push({ offset: match.index, length: match[0].length });
-            match = regexObject.exec(text);
-        }
-        highlightSearchResults(this._formattedMessage, matchRanges);
-        this._element.scrollIntoViewIfNeeded();
-    },
-
-    matchesRegex: function(regexObject)
-    {
-        return regexObject.test(this.message);
-    },
-
-    toMessageElement: function()
-    {
-        if (this._element)
-            return this._element;
-
-        var element = document.createElement("div");
-        element.message = this;
-        element.className = "console-message";
-
-        this._element = element;
-
-        switch (this.level) {
-            case WebInspector.ConsoleMessage.MessageLevel.Tip:
-                element.classList.add("console-tip-level");
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Log:
-                element.classList.add("console-log-level");
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Debug:
-                element.classList.add("console-debug-level");
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Warning:
-                element.classList.add("console-warning-level");
-                break;
-            case WebInspector.ConsoleMessage.MessageLevel.Error:
-                element.classList.add("console-error-level");
-                break;
-        }
-
-        if (this.type === WebInspector.ConsoleMessage.MessageType.StartGroup || this.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
-            element.classList.add("console-group-title");
-
-        element.appendChild(this.formattedMessage);
-
-        if (this.repeatCount > 1)
-            this.updateRepeatCount();
-
-        return element;
-    },
-
-    _populateStackTraceTreeElement: function(parentTreeElement)
-    {
-        for (var i = 0; i < this._stackTrace.length; i++) {
-            var frame = this._stackTrace[i];
-
-            var content = document.createElement("div");
-            var messageTextElement = document.createElement("span");
-            messageTextElement.className = "console-message-text source-code";
-            var functionName = frame.functionName || WebInspector.UIString("(anonymous function)");
-            messageTextElement.appendChild(document.createTextNode(functionName));
-            content.appendChild(messageTextElement);
-
-            if (frame.url) {
-                var urlElement = this._linkifyCallFrame(frame);
-                content.appendChild(urlElement);
-            }
-
-            var treeElement = new TreeElement(content);
-            parentTreeElement.appendChild(treeElement);
-        }
-    },
-
-    updateRepeatCount: function() {
-        if (!this.repeatCountElement) {
-            this.repeatCountElement = document.createElement("span");
-            this.repeatCountElement.className = "bubble";
-
-            this._element.insertBefore(this.repeatCountElement, this._element.firstChild);
-        }
-        this.repeatCountElement.textContent = this.repeatCount;
-    },
-
-    toString: function()
-    {
-        var sourceString;
-        switch (this.source) {
-            case WebInspector.ConsoleMessage.MessageSource.HTML:
-                sourceString = "HTML";
-                break;
-            case WebInspector.ConsoleMessage.MessageSource.XML:
-                sourceString = "XML";
-                break;
-            case WebInspector.ConsoleMessage.MessageSource.JS:
-                sourceString = "JS";
-                break;
-            case WebInspector.ConsoleMessage.MessageSource.Network:
-                sourceString = "Network";
-                break;
-            case WebInspector.ConsoleMessage.MessageSource.ConsoleAPI:
-                sourceString = "ConsoleAPI";
-                break;
-            case WebInspector.ConsoleMessage.MessageSource.Other:
-                sourceString = "Other";
-                break;
-        }
-
-        var typeString;
-        switch (this.type) {
-            case WebInspector.ConsoleMessage.MessageType.Log:
-                typeString = "Log";
-                break;
-            case WebInspector.ConsoleMessage.MessageType.Dir:
-                typeString = "Dir";
-                break;
-            case WebInspector.ConsoleMessage.MessageType.DirXML:
-                typeString = "Dir XML";
-                break;
-            case WebInspector.ConsoleMessage.MessageType.Trace:
-                typeString = "Trace";
-                break;
-            case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
-            case WebInspector.ConsoleMessage.MessageType.StartGroup:
-                typeString = "Start Group";
-                break;
-            case WebInspector.ConsoleMessage.MessageType.EndGroup:
-                typeString = "End Group";
-                break;
-            case WebInspector.ConsoleMessage.MessageType.Assert:
-                typeString = "Assert";
-                break;
-            case WebInspector.ConsoleMessage.MessageType.Result:
-                typeString = "Result";
-                break;
-        }
-
-        return sourceString + " " + typeString + " " + this.levelString + ": " + this.formattedMessage.textContent + "\n" + this.url + " line " + this.line;
-    },
-
-    get text()
-    {
-        return this._messageText;
-    },
-
-    isEqual: function(msg)
-    {
-        if (!msg)
-            return false;
-
-        if (this._stackTrace) {
-            if (!msg._stackTrace)
-                return false;
-            var l = this._stackTrace;
-            var r = msg._stackTrace;
-            for (var i = 0; i < l.length; i++) {
-                if (l[i].url !== r[i].url ||
-                    l[i].functionName !== r[i].functionName ||
-                    l[i].lineNumber !== r[i].lineNumber ||
-                    l[i].columnNumber !== r[i].columnNumber)
-                    return false;
-            }
-        }
-
-        return (this.source === msg.source)
-            && (this.type === msg.type)
-            && (this.level === msg.level)
-            && (this.line === msg.line)
-            && (this.url === msg.url)
-            && (this.message === msg.message)
-            && (this._request === msg._request);
-    },
-
-    get stackTrace()
-    {
-        return this._stackTrace;
-    },
-
-    /**
-     * @return {WebInspector.ConsoleMessage}
-     */
-    clone: function()
-    {
-        return WebInspector.ConsoleMessage.create(this.source, this.level, this._messageText, this.type, this.url, this.line, this.column, this.repeatCount, this._parameters, this._stackTrace, this._request);
-    },
-
-    get levelString()
-    {
-        switch (this.level) {
-            case WebInspector.ConsoleMessage.MessageLevel.Tip:
-                return "Tip";
-            case WebInspector.ConsoleMessage.MessageLevel.Log:
-                return "Log";
-            case WebInspector.ConsoleMessage.MessageLevel.Warning:
-                return "Warning";
-            case WebInspector.ConsoleMessage.MessageLevel.Debug:
-                return "Debug";
-            case WebInspector.ConsoleMessage.MessageLevel.Error:
-                return "Error";
-        }
-    },
-
-    get clipboarPrefixString ()
-    {
-        return "[" + this.levelString + "] ";
-    },
-
-    toClipboardString: function(isPrefixOptional)
-    {
-        var isTrace = this._shouldDumpStackTrace();
-        
-        var clipboardString = "";
-        if (this._formattedMessage && !isTrace)
-            clipboardString = this._formattedMessage.querySelector("span").innerText;
-        else
-            clipboardString = this.type === WebInspector.ConsoleMessage.MessageType.Trace ? "console.trace()" : this._message || this._messageText;
-
-        if (!isPrefixOptional || this.enforcesClipboardPrefixString)
-            clipboardString = this.clipboarPrefixString + clipboardString;
-
-        if (isTrace) {
-            this._stackTrace.forEach(function(frame) {
-                clipboardString += "\n\t" + (frame.functionName || WebInspector.UIString("(anonymous function)"));
-                if (frame.url)
-                    clipboardString += " (" + WebInspector.displayNameForURL(frame.url) + ", line " + frame.lineNumber + ")";
-            });
-        }
-        else {
-            var repeatString = this.repeatCount > 1 ? "x" + this.repeatCount : "";
-
-            var urlLine = "";
-            if (this.url) {
-                var components = [WebInspector.displayNameForURL(this.url), "line " + this.line];
-                if (repeatString)
-                    components.push(repeatString);
-                urlLine = " (" + components.join(", ") + ")";
-            } else if (repeatString)
-                urlLine = " (" + repeatString + ")";
-        
-            if (urlLine) {
-                var lines = clipboardString.split("\n");
-                lines[0] += urlLine;
-                clipboardString = lines.join("\n");
-            }
-        }
-
-        return clipboardString;
-    }
-
-}
-
-WebInspector.ConsoleMessageImpl.prototype.__proto__ = WebInspector.ConsoleMessage.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsoleObserver.js b/Source/WebInspectorUI/UserInterface/ConsoleObserver.js
deleted file mode 100644
index fe18bc6c3..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsoleObserver.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ConsoleObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.ConsoleObserver.prototype = {
-    constructor: WebInspector.ConsoleObserver,
-
-    // Events defined by the "Console" domain (see WebCore/inspector/Inspector.json).
-
-    messageAdded: function(message)
-    {
-        if (message.level === "warning" || message.level === "error")
-            WebInspector.issueManager.issueWasAdded(message.source, message.level, message.text, message.url, message.line, message.column || 0, message.parameters);
-
-        if (message.url === "[native code]") {
-            if (message.type === "profile")
-                WebInspector.profileManager.profileWasStartedFromConsole(message.text);
-            else if (message.type === "profileEnd")
-                WebInspector.profileManager.profileWasEndedFromConsole();
-        }
-
-        if (message.source === "console-api" && message.type === "clear")
-            return;
-
-        WebInspector.logManager.messageWasAdded(message.source, message.level, message.text, message.type, message.url, message.line, message.column || 0, message.repeatCount, message.parameters, message.stackTrace, message.networkRequestId);
-    },
-
-    messageRepeatCountUpdated: function(count)
-    {
-        WebInspector.logManager.messageRepeatCountUpdated(count);
-    },
-
-    messagesCleared: function()
-    {
-        WebInspector.logManager.messagesCleared();
-    }
-};
-
-WebInspector.ConsoleObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ConsolePrompt.js b/Source/WebInspectorUI/UserInterface/ConsolePrompt.js
deleted file mode 100644
index 5b62b8a1f..000000000
--- a/Source/WebInspectorUI/UserInterface/ConsolePrompt.js
+++ /dev/null
@@ -1,291 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ConsolePrompt = function(delegate, mimeType, element)
-{
-    WebInspector.Object.call(this);
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.ConsolePrompt.StyleClassName);
-    this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
-
-    this._delegate = delegate || null;
-
-    this._codeMirror = CodeMirror(this.element, {
-        lineWrapping: true,
-        mode: mimeType,
-        indentWithTabs: true,
-        indentUnit: 4,
-        matchBrackets: true
-    });
-
-    var keyMap = {
-        "Up": this._handlePreviousKey.bind(this),
-        "Down": this._handleNextKey.bind(this),
-        "Ctrl-P": this._handlePreviousKey.bind(this),
-        "Ctrl-N": this._handleNextKey.bind(this),
-        "Enter": this._handleEnterKey.bind(this),
-        "Cmd-Enter": this._handleCommandEnterKey.bind(this)
-    };
-
-    this._codeMirror.addKeyMap(keyMap);
-
-    this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
-
-    this._history = [{}];
-    this._historyIndex = 0;
-};
-
-WebInspector.ConsolePrompt.StyleClassName = "console-prompt";
-WebInspector.ConsolePrompt.MaximumHistorySize = 30;
-
-WebInspector.ConsolePrompt.prototype = {
-    constructor: WebInspector.ConsolePrompt,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    set delegate(delegate)
-    {
-        this._delegate = delegate || null;
-    },
-
-    get text()
-    {
-        return this._codeMirror.getValue();
-    },
-
-    set text(text)
-    {
-        this._codeMirror.setValue(text || "");
-        this._codeMirror.clearHistory();
-        this._codeMirror.markClean();
-    },
-
-    get history()
-    {
-        this._history[this._historyIndex] = this._historyEntryForCurrentText();
-        return this._history;
-    },
-
-    set history(history)
-    {
-        this._history = history instanceof Array ? history.slice(0, WebInspector.ConsolePrompt.MaximumHistorySize) : [{}];
-        this._historyIndex = 0;
-        this._restoreHistoryEntry(0);
-    },
-
-    get focused()
-    {
-        return this._codeMirror.getWrapperElement().classList.contains("CodeMirror-focused");
-    },
-
-    focus: function()
-    {
-        this._codeMirror.focus();
-    },
-
-    shown: function()
-    {
-        this._codeMirror.refresh();
-    },
-
-    updateLayout: function()
-    {
-        this._codeMirror.refresh();
-    },
-
-    updateCompletions: function(completions, implicitSuffix)
-    {
-        this._completionController.updateCompletions(completions, implicitSuffix);
-    },
-
-    // Protected
-
-    completionControllerCompletionsNeeded: function(completionController, prefix, defaultCompletions, base, suffix, forced)
-    {
-        if (this.delegate && typeof this.delegate.consolePromptCompletionsNeeded === "function")
-            this.delegate.consolePromptCompletionsNeeded(this, defaultCompletions, base, prefix, suffix, forced);
-        else
-            this._completionController.updateCompletions(defaultCompletions);
-    },
-
-    completionControllerShouldAllowEscapeCompletion: function(completionController)
-    {
-        // Only allow escape to complete if there is text in the prompt. Otherwise allow it to pass through
-        // so escape to toggle the quick console still works.
-        return !!this.text;
-    },
-
-    // Private
-
-    _handlePreviousKey: function(codeMirror)
-    {
-        if (this._codeMirror.somethingSelected())
-            return CodeMirror.Pass;
-
-        // Pass unless we are on the first line.
-        if (this._codeMirror.getCursor().line)
-            return CodeMirror.Pass;
-
-        var historyEntry = this._history[this._historyIndex + 1];
-        if (!historyEntry)
-            return CodeMirror.Pass;
-
-        this._rememberCurrentTextInHistory();
-
-        ++this._historyIndex;
-
-        this._restoreHistoryEntry(this._historyIndex);
-    },
-
-    _handleNextKey: function(codeMirror)
-    {
-        if (this._codeMirror.somethingSelected())
-            return CodeMirror.Pass;
-
-        // Pass unless we are on the last line.
-        if (this._codeMirror.getCursor().line !== this._codeMirror.lastLine())
-            return CodeMirror.Pass;
-
-        var historyEntry = this._history[this._historyIndex - 1];
-        if (!historyEntry)
-            return CodeMirror.Pass;
-
-        this._rememberCurrentTextInHistory();
-
-        --this._historyIndex;
-
-        this._restoreHistoryEntry(this._historyIndex);
-    },
-
-    _handleEnterKey: function(codeMirror, forceCommit)
-    {
-        var currentText = this.text;
-
-        // Always do nothing when there is just whitespace.
-        if (!currentText.trim())
-            return;
-
-        var cursor = this._codeMirror.getCursor();
-        var lastLine = this._codeMirror.lastLine();
-        var lastLineLength = this._codeMirror.getLine(lastLine).length;
-        var cursorIsAtLastPosition = positionsEqual(cursor, {line: lastLine, ch: lastLineLength});
-
-        function positionsEqual(a, b)
-        {
-            console.assert(a);
-            console.assert(b);
-            return a.line === b.line && a.ch === b.ch;
-        }
-
-        function commitTextOrInsertNewLine(commit)
-        {
-            if (!commit) {
-                // Only insert a new line if the previous cursor and the current cursor are in the same position.
-                if (positionsEqual(cursor, this._codeMirror.getCursor()))
-                    CodeMirror.commands.newlineAndIndent(this._codeMirror);
-                return;
-            }
-
-            var historyEntry = this._historyEntryForCurrentText();
-
-            // Replace the previous entry if it does not have text or if the text is the same.
-            if (this._history[1] && (!this._history[1].text || this._history[1].text === historyEntry.text)) {
-                this._history[1] = historyEntry;
-                this._history[0] = {};
-            } else {
-                // Replace the first history entry and push a new empty one.
-                this._history[0] = historyEntry;
-                this._history.unshift({});
-
-                // Trim the history length if needed.
-                if (this._history.length > WebInspector.ConsolePrompt.MaximumHistorySize)
-                    this._history = this._history.slice(0, WebInspector.ConsolePrompt.MaximumHistorySize);
-            }
-
-            this._historyIndex = 0;
-
-            this._codeMirror.setValue("");
-            this._codeMirror.clearHistory();
-
-            if (this.delegate && typeof this.delegate.consolePromptHistoryDidChange === "function")
-                this.delegate.consolePromptHistoryDidChange(this);
-
-            if (this.delegate && typeof this.delegate.consolePromptTextCommitted === "function")
-                this.delegate.consolePromptTextCommitted(this, currentText);
-        }
-
-        if (!forceCommit && this.delegate && typeof this.delegate.consolePromptShouldCommitText === "function") {
-            this.delegate.consolePromptShouldCommitText(this, currentText, cursorIsAtLastPosition, commitTextOrInsertNewLine.bind(this));
-            return;
-        }
-
-        commitTextOrInsertNewLine.call(this, true);
-    },
-
-    _handleCommandEnterKey: function(codeMirror)
-    {
-        this._handleEnterKey(codeMirror, true);
-    },
-
-    _restoreHistoryEntry: function(index)
-    {
-        var historyEntry = this._history[index];
-
-        this._codeMirror.setValue(historyEntry.text || "");
-
-        if (historyEntry.undoHistory)
-            this._codeMirror.setHistory(historyEntry.undoHistory);
-        else
-            this._codeMirror.clearHistory();
-
-        this._codeMirror.setCursor(historyEntry.cursor || {line: 0});
-    },
-
-    _historyEntryForCurrentText: function()
-    {
-        return {text: this.text, undoHistory: this._codeMirror.getHistory(), cursor: this._codeMirror.getCursor()};
-    },
-
-    _rememberCurrentTextInHistory: function()
-    {
-        this._history[this._historyIndex] = this._historyEntryForCurrentText();
-
-        if (this.delegate && typeof this.delegate.consolePromptHistoryDidChange === "function")
-            this.delegate.consolePromptHistoryDidChange(this);
-    }
-};
-
-WebInspector.ConsolePrompt.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContentBrowser.css b/Source/WebInspectorUI/UserInterface/ContentBrowser.css
deleted file mode 100644
index bd691d0a2..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentBrowser.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-browser {
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
-}
-
-.content-browser > .content-view-container {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ContentBrowser.js b/Source/WebInspectorUI/UserInterface/ContentBrowser.js
deleted file mode 100644
index 9193c52a7..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentBrowser.js
+++ /dev/null
@@ -1,526 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ContentBrowser = function(element, delegate, disableBackForward)
-{
-    WebInspector.Object.call(this);
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.ContentBrowser.StyleClassName);
-
-    this._navigationBar = new WebInspector.NavigationBar;
-    this._element.appendChild(this._navigationBar.element);
-
-    this._contentViewContainer = new WebInspector.ContentViewContainer;
-    this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
-    this._element.appendChild(this._contentViewContainer.element);
-
-    this._findBanner = new WebInspector.FindBanner(this);
-    this._findKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "F", this._showFindBanner.bind(this));
-    this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidShow, this._findBannerDidShow, this);
-    this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidHide, this._findBannerDidHide, this);
-
-    this._saveKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "S", this._save.bind(this));
-    this._saveAsKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.Command, "S", this._saveAs.bind(this));
-
-    if (!disableBackForward) {
-        this._backKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Left, this._backButtonClicked.bind(this));
-        this._forwardKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Right, this._forwardButtonClicked.bind(this));
-
-        this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), "Images/BackArrow.pdf", 9, 9);
-        this._backButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._backButtonClicked, this);
-        this._backButtonNavigationItem.enabled = false;
-        this._navigationBar.addNavigationItem(this._backButtonNavigationItem);
-
-        this._forwardButtonNavigationItem = new WebInspector.ButtonNavigationItem("forward", WebInspector.UIString("Forward (%s)").format(this._forwardKeyboardShortcut.displayName), "Images/ForwardArrow.pdf", 9, 9);
-        this._forwardButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._forwardButtonClicked, this);
-        this._forwardButtonNavigationItem.enabled = false;
-        this._navigationBar.addNavigationItem(this._forwardButtonNavigationItem);
-
-        this._navigationBar.addNavigationItem(new WebInspector.DividerNavigationItem);
-    }
-
-    this._hierarchicalPathNavigationItem = new WebInspector.HierarchicalPathNavigationItem;
-    this._hierarchicalPathNavigationItem.addEventListener(WebInspector.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, this._hierarchicalPathComponentWasSelected, this);
-    this._navigationBar.addNavigationItem(this._hierarchicalPathNavigationItem);
-
-    this._contentViewSelectionPathNavigationItem = new WebInspector.HierarchicalPathNavigationItem;
-
-    this._navigationBar.addNavigationItem(new WebInspector.FlexibleSpaceNavigationItem);
-
-    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
-    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
-    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
-    WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._contentViewNavigationItemsDidChange, this);
-
-    this._delegate = delegate || null;
-
-    this._currentContentViewNavigationItems = [];
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.ContentBrowser);
-
-WebInspector.ContentBrowser.StyleClassName = "content-browser";
-
-WebInspector.ContentBrowser.Event = {
-    CurrentRepresentedObjectsDidChange: "content-browser-current-represented-objects-did-change",
-    CurrentContentViewDidChange: "content-browser-current-content-view-did-change"
-};
-
-WebInspector.ContentBrowser.prototype = {
-    constructor: WebInspector.ContentBrowser,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get navigationBar()
-    {
-        return this._navigationBar;
-    },
-
-    get contentViewContainer()
-    {
-        return this._contentViewContainer;
-    },
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    set delegate(newDelegate)
-    {
-        this._delegate = newDelegate || null;
-    },
-
-    get currentContentView()
-    {
-        return this._contentViewContainer.currentContentView;
-    },
-
-    get currentRepresentedObjects()
-    {
-        var representedObjects = [];
-
-        var lastComponent = this._hierarchicalPathNavigationItem.lastComponent;
-        if (lastComponent && lastComponent.representedObject)
-            representedObjects.push(lastComponent.representedObject);
-
-        lastComponent = this._contentViewSelectionPathNavigationItem.lastComponent;
-        if (lastComponent && lastComponent.representedObject)
-            representedObjects.push(lastComponent.representedObject);
-
-        var currentContentView = this.currentContentView;
-        if (currentContentView) {
-            var supplementalRepresentedObjects = currentContentView.supplementalRepresentedObjects;
-            if (supplementalRepresentedObjects && supplementalRepresentedObjects.length)
-                representedObjects = representedObjects.concat(supplementalRepresentedObjects);
-        }
-
-        return representedObjects;
-    },
-
-    updateLayout: function()
-    {
-        this._navigationBar.updateLayout();
-        this._contentViewContainer.updateLayout();
-    },
-
-    showContentViewForRepresentedObject: function(representedObject)
-    {
-        return this._contentViewContainer.showContentViewForRepresentedObject(representedObject);
-    },
-
-    showContentView: function(contentView)
-    {
-        return this._contentViewContainer.showContentView(contentView);
-    },
-
-    contentViewForRepresentedObject: function(representedObject, onlyExisting)
-    {
-        return this._contentViewContainer.contentViewForRepresentedObject(representedObject, onlyExisting);
-    },
-
-    canGoBack: function()
-    {
-        var currentContentView = this.currentContentView;
-        if (currentContentView && currentContentView.canGoBack())
-            return true;
-        return this._contentViewContainer.canGoBack();
-    },
-
-    canGoForward: function()
-    {
-        var currentContentView = this.currentContentView;
-        if (currentContentView && currentContentView.canGoForward())
-            return true;
-        return this._contentViewContainer.canGoForward();
-    },
-
-    goBack: function()
-    {
-        var currentContentView = this.currentContentView;
-        if (currentContentView && currentContentView.canGoBack()) {
-            currentContentView.goBack();
-            this._updateBackForwardButtons();
-            return;
-        }
-
-        this._contentViewContainer.goBack();
-
-        // The _updateBackForwardButtons function is called by _currentContentViewDidChange,
-        // so it does not need to be called here.
-    },
-
-    goForward: function()
-    {
-        var currentContentView = this.currentContentView;
-        if (currentContentView && currentContentView.canGoForward()) {
-            currentContentView.goForward();
-            this._updateBackForwardButtons();
-            return;
-        }
-
-        this._contentViewContainer.goForward();
-
-        // The _updateBackForwardButtons function is called by _currentContentViewDidChange,
-        // so it does not need to be called here.
-    },
-
-    findBannerPerformSearch: function(findBanner, query)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-
-        currentContentView.performSearch(query);
-    },
-
-    findBannerSearchCleared: function(findBanner)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-
-        currentContentView.searchCleared();
-    },
-
-    findBannerSearchQueryForSelection: function(findBanner)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return null;
-
-        return currentContentView.searchQueryWithSelection();
-    },
-
-    findBannerRevealPreviousResult: function(findBanner)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-
-        currentContentView.revealPreviousSearchResult(!findBanner.showing);
-    },
-
-    findBannerRevealNextResult: function(findBanner)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-
-        currentContentView.revealNextSearchResult(!findBanner.showing);
-    },
-
-    // Private
-
-    _backButtonClicked: function(event)
-    {
-        this.goBack();
-    },
-
-    _forwardButtonClicked: function(event)
-    {
-        this.goForward();
-    },
-
-    _saveDataToFile: function(saveData, forceSaveAs)
-    {
-        console.assert(saveData);
-        if (!saveData)
-            return;
-
-        console.assert(saveData.url);
-        console.assert(typeof saveData.content === "string");
-        if (!saveData.url || typeof saveData.content !== "string")
-            return;
-
-        InspectorFrontendHost.save(saveData.url, saveData.content, forceSaveAs || saveData.forceSaveAs);
-    },
-
-    _save: function(event)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSave)
-            return;
-
-        this._saveDataToFile(currentContentView.saveData);
-    },
-
-    _saveAs: function(event)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSave)
-            return;
-
-        this._saveDataToFile(currentContentView.saveData, true);
-    },
-
-    _showFindBanner: function(event)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-
-        this._findBanner.show();
-    },
-
-    _findBannerDidShow: function(event)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-
-        currentContentView.automaticallyRevealFirstSearchResult = true;
-    },
-
-    _findBannerDidHide: function(event)
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView || !currentContentView.supportsSearch)
-            return;
-
-        currentContentView.automaticallyRevealFirstSearchResult = false;
-    },
-
-    _contentViewNumberOfSearchResultsDidChange: function(event)
-    {
-        if (event.target !== this.currentContentView)
-            return;
-
-        this._findBanner.numberOfResults = this.currentContentView.numberOfSearchResults;
-    },
-
-    _updateHierarchicalPathNavigationItem: function(representedObject)
-    {
-        if (!this.delegate || typeof this.delegate.contentBrowserTreeElementForRepresentedObject !== "function")
-            return;
-
-        var treeElement = representedObject ? this.delegate.contentBrowserTreeElementForRepresentedObject(this, representedObject) : null;
-        var pathComponents = [];
-
-        while (treeElement && !treeElement.root) {
-            var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
-            pathComponents.unshift(pathComponent);
-            treeElement = treeElement.parent;
-        }
-
-        this._hierarchicalPathNavigationItem.components = pathComponents;
-    },
-
-    _updateContentViewSelectionPathNavigationItem: function(contentView)
-    {
-        var selectionPathComponents = contentView ? contentView.selectionPathComponents || [] : [];
-        this._contentViewSelectionPathNavigationItem.components = selectionPathComponents;
-
-        if (!selectionPathComponents.length) {
-            this._hierarchicalPathNavigationItem.alwaysShowLastPathComponentSeparator = false;
-            this._navigationBar.removeNavigationItem(this._contentViewSelectionPathNavigationItem);
-            return;
-        }
-
-        // Insert the _contentViewSelectionPathNavigationItem after the _hierarchicalPathNavigationItem, if needed.
-        if (!this._navigationBar.navigationItems.contains(this._contentViewSelectionPathNavigationItem)) {
-            var hierarchicalPathItemIndex = this._navigationBar.navigationItems.indexOf(this._hierarchicalPathNavigationItem);
-            console.assert(hierarchicalPathItemIndex !== -1);
-            this._navigationBar.insertNavigationItem(this._contentViewSelectionPathNavigationItem, hierarchicalPathItemIndex + 1);
-            this._hierarchicalPathNavigationItem.alwaysShowLastPathComponentSeparator = true;
-        }
-    },
-
-    _updateBackForwardButtons: function()
-    {
-        if (!this._backButtonNavigationItem || !this._forwardButtonNavigationItem)
-            return;
-
-        this._backButtonNavigationItem.enabled = this.canGoBack();
-        this._forwardButtonNavigationItem.enabled = this.canGoForward();
-    },
-
-    _updateContentViewNavigationItems: function()
-    {
-        var navigationBar = this.navigationBar;
-
-        // First, we remove the navigation items added by the previous content view.
-        this._currentContentViewNavigationItems.forEach(function(navigationItem) {
-            navigationBar.removeNavigationItem(navigationItem);
-        });
-
-        var currentContentView = this.currentContentView;
-        if (!currentContentView) {
-            this._currentContentViewNavigationItems = [];
-            return;
-        }
-
-        var insertionIndex = navigationBar.navigationItems.length;
-        console.assert(insertionIndex >= 0);
-
-        // Keep track of items we'll be adding to the navigation bar.
-        var newNavigationItems = [];
-
-        // Go through each of the items of the new content view and add a divider before them.
-        currentContentView.navigationItems.forEach(function(navigationItem, index) {
-            // Add dividers before items unless it's the first item and not a button. 
-            if (index !== 0 || navigationItem instanceof WebInspector.ButtonNavigationItem) {
-                var divider = new WebInspector.DividerNavigationItem;
-                navigationBar.insertNavigationItem(divider, insertionIndex++);
-                newNavigationItems.push(divider);
-            }
-            navigationBar.insertNavigationItem(navigationItem, insertionIndex++);
-            newNavigationItems.push(navigationItem);
-        });
-
-        // Remember the navigation items we inserted so we can remove them
-        // for the next content view.
-        this._currentContentViewNavigationItems = newNavigationItems;
-    },
-
-    _updateFindBanner: function(currentContentView)
-    {
-        if (!currentContentView) {
-            this._findBanner.targetElement = null;
-            this._findBanner.numberOfResults = null;
-            return;
-        }
-        
-        this._findBanner.targetElement = currentContentView.element;
-        this._findBanner.numberOfResults = currentContentView.hasPerformedSearch ? currentContentView.numberOfSearchResults : null;
-
-        if (currentContentView.supportsSearch && this._findBanner.searchQuery) {
-            currentContentView.automaticallyRevealFirstSearchResult = this._findBanner.showing;
-            currentContentView.performSearch(this._findBanner.searchQuery);
-        }
-    },
-
-    _dispatchCurrentRepresentedObjectsDidChangeEventSoon: function()
-    {
-        if (this._currentRepresentedObjectsDidChangeTimeout)
-            return;
-        this._currentRepresentedObjectsDidChangeTimeout = setTimeout(this._dispatchCurrentRepresentedObjectsDidChangeEvent.bind(this), 0);
-    },
-
-    _dispatchCurrentRepresentedObjectsDidChangeEvent: function()
-    {
-        if (this._currentRepresentedObjectsDidChangeTimeout) {
-            clearTimeout(this._currentRepresentedObjectsDidChangeTimeout);
-            delete this._currentRepresentedObjectsDidChangeTimeout;
-        }
-
-        this.dispatchEventToListeners(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange);
-    },
-
-    _contentViewSelectionPathComponentDidChange: function(event)
-    {
-        if (event.target !== this.currentContentView)
-            return;
-
-        this._updateContentViewSelectionPathNavigationItem(event.target);
-        this._updateBackForwardButtons();
-
-        this._updateContentViewNavigationItems();
-
-        this._navigationBar.updateLayout();
-
-        this._dispatchCurrentRepresentedObjectsDidChangeEventSoon();
-    },
-
-    _contentViewSupplementalRepresentedObjectsDidChange: function(event)
-    {
-        if (event.target !== this.currentContentView)
-            return;
-
-        this._dispatchCurrentRepresentedObjectsDidChangeEventSoon();
-    },
-
-    _currentContentViewDidChange: function(event)
-    {
-        var currentContentView = this.currentContentView;
-
-        this._updateHierarchicalPathNavigationItem(currentContentView ? currentContentView.representedObject : null);
-        this._updateContentViewSelectionPathNavigationItem(currentContentView);
-        this._updateBackForwardButtons();
-
-        this._updateContentViewNavigationItems();
-        this._updateFindBanner(currentContentView);
-
-        this._navigationBar.updateLayout();
-
-        this.dispatchEventToListeners(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange);
-
-        this._dispatchCurrentRepresentedObjectsDidChangeEvent();
-    },
-
-    _contentViewNavigationItemsDidChange: function(event)
-    {
-        if (event.target !== this.currentContentView)
-            return;
-
-        this._updateContentViewNavigationItems();
-        this._navigationBar.updateLayout();
-    },
-
-    _hierarchicalPathComponentWasSelected: function(event)
-    {
-        console.assert(event.data.pathComponent instanceof WebInspector.GeneralTreeElementPathComponent);
-
-        var treeElement = event.data.pathComponent.generalTreeElement;
-        var originalTreeElement = treeElement;
-
-        // Some tree elements (like folders) are not viewable. Find the first descendant that is viewable.
-        while (treeElement && !WebInspector.ContentView.isViewable(treeElement.representedObject))
-            treeElement = treeElement.traverseNextTreeElement(false, originalTreeElement, false);
-
-        if (!treeElement)
-            return;
-
-        this.showContentViewForRepresentedObject(treeElement.representedObject);
-    }
-};
-
-WebInspector.ContentBrowser.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContentView.js b/Source/WebInspectorUI/UserInterface/ContentView.js
deleted file mode 100644
index c3584f601..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentView.js
+++ /dev/null
@@ -1,303 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ContentView = function(representedObject)
-{
-    if (this.constructor === WebInspector.ContentView) {
-        // When instantiated directly return an instance of a type-based concrete subclass.
-
-        console.assert(representedObject);
-
-        if (representedObject instanceof WebInspector.Frame)
-            return new WebInspector.FrameContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.Resource)
-            return new WebInspector.ResourceClusterContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.Script)
-            return new WebInspector.ScriptContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.DOMStorageObject)
-            return new WebInspector.DOMStorageContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.CookieStorageObject)
-            return new WebInspector.CookieStorageContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.DatabaseTableObject)
-            return new WebInspector.DatabaseTableContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.DatabaseObject)
-            return new WebInspector.DatabaseContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.ApplicationCacheFrame)
-            return new WebInspector.ApplicationCacheFrameContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.DOMTree)
-            return new WebInspector.DOMTreeContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.LogObject)
-            return new WebInspector.LogContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.TimelinesObject)
-            return new WebInspector.TimelinesContentView(representedObject);
-
-        if (representedObject instanceof WebInspector.JavaScriptProfileObject)
-            return new WebInspector.JavaScriptProfileView(representedObject);
-        
-        if (representedObject instanceof WebInspector.CSSSelectorProfileObject)
-            return new WebInspector.CSSSelectorProfileView(representedObject);
-
-        if (typeof representedObject === "string" || representedObject instanceof String)
-            return new WebInspector.TextContentView(representedObject);
-
-        console.assert(!WebInspector.ContentView.isViewable(representedObject));
-
-        throw "Can't make a ContentView for an unknown representedObject.";
-    }
-
-    // Concrete object instantiation.
-    console.assert(this.constructor !== WebInspector.ContentView && this instanceof WebInspector.ContentView);
-    console.assert(WebInspector.ContentView.isViewable(representedObject));
-
-    WebInspector.Object.call(this);
-
-    this._representedObject = representedObject;
-
-    this._element = document.createElement("div");
-    this._element.classList.add(WebInspector.ContentView.StyleClassName);
-
-    this._parentContainer = null;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.ContentView);
-
-WebInspector.ContentView.isViewable = function(representedObject)
-{
-    if (representedObject instanceof WebInspector.Frame)
-        return true;
-    if (representedObject instanceof WebInspector.Resource)
-        return true;
-    if (representedObject instanceof WebInspector.Script)
-        return true;
-    if (representedObject instanceof WebInspector.DOMStorageObject)
-        return true;
-    if (representedObject instanceof WebInspector.CookieStorageObject)
-        return true;
-    if (representedObject instanceof WebInspector.DatabaseTableObject)
-        return true;
-    if (representedObject instanceof WebInspector.DatabaseObject)
-        return true;
-    if (representedObject instanceof WebInspector.ApplicationCacheFrame)
-        return true;
-    if (representedObject instanceof WebInspector.DOMTree)
-        return true;
-    if (representedObject instanceof WebInspector.LogObject)
-        return true;
-    if (representedObject instanceof WebInspector.TimelinesObject)
-        return true;
-    if (representedObject instanceof WebInspector.JavaScriptProfileObject)
-        return true;
-    if (representedObject instanceof WebInspector.CSSSelectorProfileObject)
-        return true;
-    if (typeof representedObject === "string" || representedObject instanceof String)
-        return true;
-    return false;
-};
-
-WebInspector.ContentView.StyleClassName = "content-view";
-
-WebInspector.ContentView.Event = {
-    SelectionPathComponentsDidChange: "content-view-selection-path-components-did-change",
-    SupplementalRepresentedObjectsDidChange: "content-view-supplemental-represented-objects-did-change",
-    NumberOfSearchResultsDidChange: "content-view-number-of-search-results-did-change",
-    NavigationItemsDidChange: "content-view-navigation-items-did-change"
-};
-
-WebInspector.ContentView.prototype = {
-    constructor: WebInspector.ContentView,
-
-    // Public
-
-    get representedObject()
-    {
-        return this._representedObject;
-    },
-
-    get navigationItems()
-    {
-        // Navigation items that will be displayed by the ContentBrowser instance,
-        // meant to be subclassed. Implemented by subclasses.
-        return [];
-    },
-
-    get allowedNavigationSidebarPanels()
-    {
-        // Allow any navigation sidebar panel.
-        return [];
-    },
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get parentContainer()
-    {
-        return this._parentContainer;
-    },
-
-    get visible()
-    {
-        return this._visible;
-    },
-
-    set visible(flag)
-    {
-        this._visible = flag;
-    },
-
-    get scrollableElements()
-    {
-        // Implemented by subclasses.
-        return [];
-    },
-
-    get shouldKeepElementsScrolledToBottom()
-    {
-        // Implemented by subclasses.
-        return false;
-    },
-
-    get selectionPathComponents()
-    {
-        // Implemented by subclasses.
-        return [];
-    },
-
-    get supplementalRepresentedObjects()
-    {
-        // Implemented by subclasses.
-        return [];
-    },
-
-    get supportsSplitContentBrowser()
-    {
-        // Implemented by subclasses.
-        return true;
-    },
-
-    updateLayout: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    shown: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    hidden: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    closed: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    canGoBack: function()
-    {
-        // Implemented by subclasses.
-        return false;
-    },
-
-    canGoForward: function()
-    {
-        // Implemented by subclasses.
-        return false;
-    },
-
-    goBack: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    goForward: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    get supportsSearch()
-    {
-        // Implemented by subclasses.
-        return false;
-    },
-
-    get numberOfSearchResults()
-    {
-        // Implemented by subclasses.
-        return null;
-    },
-
-    get hasPerformedSearch()
-    {
-        // Implemented by subclasses.
-        return false;
-    },
-
-    set automaticallyRevealFirstSearchResult(reveal)
-    {
-        // Implemented by subclasses.
-    },
-
-    performSearch: function(query)
-    {
-        // Implemented by subclasses.
-    },
-
-    searchCleared: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    searchQueryWithSelection: function()
-    {
-        // Implemented by subclasses.
-        return null;
-    },
-
-    revealPreviousSearchResult: function(changeFocus)
-    {
-        // Implemented by subclasses.
-    },
-
-    revealNextSearchResult: function(changeFocus)
-    {
-        // Implemented by subclasses.
-    }
-};
-
-WebInspector.ContentView.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContentViewContainer.js b/Source/WebInspectorUI/UserInterface/ContentViewContainer.js
deleted file mode 100644
index 375a6287b..000000000
--- a/Source/WebInspectorUI/UserInterface/ContentViewContainer.js
+++ /dev/null
@@ -1,451 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ContentViewContainer = function(element)
-{
-    WebInspector.Object.call(this);
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.ContentViewContainer.StyleClassName);
-
-    this._backForwardList = [];
-    this._currentIndex = -1;
-};
-
-WebInspector.ContentViewContainer.StyleClassName = "content-view-container";
-
-WebInspector.ContentViewContainer.Event = {
-    CurrentContentViewDidChange: "content-view-container-current-content-view-did-change"
-};
-
-WebInspector.ContentViewContainer.prototype = {
-    constructor: WebInspector.ContentViewContainer,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get currentIndex()
-    {
-        return this._currentIndex;
-    },
-
-    get backForwardList()
-    {
-        return this._backForwardList;
-    },
-
-    get currentContentView()
-    {
-        if (this._currentIndex < 0 || this._currentIndex > this._backForwardList.length - 1)
-            return null;
-        return this._backForwardList[this._currentIndex];
-    },
-
-    updateLayout: function()
-    {
-        var currentContentView = this.currentContentView;
-        if (currentContentView)
-            currentContentView.updateLayout();
-    },
-
-    contentViewForRepresentedObject: function(representedObject, onlyExisting)
-    {
-        console.assert(representedObject);
-        if (!representedObject)
-            return null;
-
-        // Iterate over all the known content views for the representedObject (if any) and find one that doesn't
-        // have a parent container or has this container as its parent.
-        var contentView = null;
-        for (var i = 0; representedObject.__contentViews && i < representedObject.__contentViews.length; ++i) {
-            var currentContentView = representedObject.__contentViews[i];
-            if (!currentContentView._parentContainer || currentContentView._parentContainer === this) {
-                contentView = currentContentView;
-                break;
-            }
-        }
-
-        console.assert(!contentView || contentView instanceof WebInspector.ContentView);
-        if (contentView instanceof WebInspector.ContentView)
-            return contentView;
-
-        // Return early to avoid creating a new content view when onlyExisting is true.
-        if (onlyExisting)
-            return null;
-
-        try {
-            // No existing content view found, make a new one.
-            contentView = new WebInspector.ContentView(representedObject);
-        } catch (e) {
-            console.error(e);
-            return null;
-        }
-
-        // Remember this content view for future calls.
-        if (!representedObject.__contentViews)
-            representedObject.__contentViews = [];
-        representedObject.__contentViews.push(contentView);
-
-        return contentView;
-    },
-
-    showContentViewForRepresentedObject: function(representedObject)
-    {
-        var contentView = this.contentViewForRepresentedObject(representedObject);
-        if (!contentView)
-            return null;
-
-        this.showContentView(contentView);
-
-        return contentView;
-    },
-
-    showContentView: function(contentView)
-    {
-        console.assert(contentView instanceof WebInspector.ContentView);
-        if (!(contentView instanceof WebInspector.ContentView))
-            return null;
-
-        // Don't allow showing a content view that is already associated with another container.
-        // Showing a content view that is already associated with this container is allowed.
-        console.assert(!contentView.parentContainer || contentView.parentContainer === this);
-        if (contentView.parentContainer && contentView.parentContainer !== this)
-            return null;
-
-        // Don't do anything if the content view is already the current content view.
-        var currentContentView = this.currentContentView;
-        if (currentContentView === contentView)
-            return contentView;
-
-        // Showing a content view will truncate the back/forward list after the current index and insert the content view
-        // at the end of the list. Finally, the current index will be updated to point to the end of the back/forward list.
-
-        // Increment the current index to where we will insert the content view.
-        var newIndex = this._currentIndex + 1;
-
-        // Insert the content view at the new index. This will remove any content views greater than or equal to the index.
-        var removedItems = this._backForwardList.splice(newIndex, this._backForwardList.length - newIndex, contentView);
-
-        console.assert(newIndex === this._backForwardList.length - 1);
-        console.assert(this._backForwardList[newIndex] === contentView);
-
-        // Disassociate with the removed content views.
-        for (var i = 0; i < removedItems.length; ++i) {
-            // Skip disassociation if this content view is still in the back/forward list.
-            if (this._backForwardList.contains(contentView))
-                continue;
-
-            this._disassociateFromContentView(removedItems[i]);
-        }
-
-        // Associate with the new content view.
-        contentView._parentContainer = this;
-
-        this.showBackForwardEntry(newIndex);
-
-        return contentView;
-    },
-
-    showBackForwardEntry: function(index)
-    {
-        console.assert(index >= 0 && index <= this._backForwardList.length - 1);
-        if (index < 0 || index > this._backForwardList.length - 1)
-            return;
-
-        if (this._currentIndex === index)
-            return;
-
-        // Hide the currently visible content view.
-        var currentContentView = this.currentContentView;
-        if (currentContentView)
-            this._hideContentView(currentContentView);
-
-        this._currentIndex = index;
-
-        this._showContentView(this.currentContentView);
-
-        this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
-    },
-
-    replaceContentView: function(oldContentView, newContentView)
-    {
-        console.assert(oldContentView instanceof WebInspector.ContentView);
-        if (!(oldContentView instanceof WebInspector.ContentView))
-            return;
-
-        console.assert(newContentView instanceof WebInspector.ContentView);
-        if (!(newContentView instanceof WebInspector.ContentView))
-            return;
-
-        console.assert(oldContentView.parentContainer === this);
-        if (oldContentView.parentContainer !== this)
-            return;
-
-        console.assert(!newContentView.parentContainer || newContentView.parentContainer === this);
-        if (newContentView.parentContainer && newContentView.parentContainer !== this)
-            return;
-
-        var currentlyShowing = (this.currentContentView === oldContentView);
-        if (currentlyShowing)
-            this._hideContentView(oldContentView);
-
-        // Disassociate with the old content view.
-        this._disassociateFromContentView(oldContentView);
-
-        // Associate with the new content view.
-        newContentView._parentContainer = this;
-
-        // Replace all occurrences of oldContentView with newContentView in the back/forward list.
-        for (var i = 0; i < this._backForwardList.length; ++i) {
-            if (this._backForwardList[i] === oldContentView)
-                this._backForwardList[i] = newContentView;
-        }
-
-        if (currentlyShowing) {
-            this._showContentView(newContentView);
-            this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
-        }
-    },
-
-    closeAllContentViewsOfPrototype: function(constructor)
-    {
-        if (!this._backForwardList.length) {
-            console.assert(this._currentIndex === -1);
-            return;
-        }
-
-        // Do a check to see if all the content views are instances of this prototype.
-        // If they all are we can use the quicker closeAllContentViews method.
-        var allSamePrototype = true;
-        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
-            if (!(this._backForwardList[i] instanceof constructor)) {
-                allSamePrototype = false;
-                break;
-            }
-        }
-
-        if (allSamePrototype) {
-            this.closeAllContentViews();
-            return;
-        }
-
-        var oldCurrentContentView = this.currentContentView;
-
-        // Hide and disassociate with all the content views that are instances of the constructor.
-        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
-            var contentView = this._backForwardList[i];
-            if (!(contentView instanceof constructor))
-                continue;
-
-            if (contentView === oldCurrentContentView)
-                this._hideContentView(contentView);
-
-            if (this._currentIndex >= i) {
-                // Decrement the currentIndex since we will remove an item in the back/forward array
-                // that it the current index or comes before it.
-                --this._currentIndex;
-            }
-
-            this._disassociateFromContentView(contentView);
-
-            // Remove the item from the back/forward list.
-            this._backForwardList.splice(i, 1);
-        }
-
-        var currentContentView = this.currentContentView;
-        console.assert(currentContentView || (!currentContentView && this._currentIndex === -1));
-
-        if (currentContentView && currentContentView !== oldCurrentContentView) {
-            this._showContentView(currentContentView);
-            this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
-        }
-    },
-
-    closeAllContentViews: function()
-    {
-        if (!this._backForwardList.length) {
-            console.assert(this._currentIndex === -1);
-            return;
-        }
-
-        // Hide and disassociate with all the content views.
-        for (var i = 0; i < this._backForwardList.length; ++i) {
-            var contentView = this._backForwardList[i];
-            if (i === this._currentIndex)
-                this._hideContentView(contentView);
-            this._disassociateFromContentView(contentView);
-        }
-
-        this._backForwardList = [];
-        this._currentIndex = -1;
-
-        this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
-    },
-
-    canGoBack: function()
-    {
-        return this._currentIndex > 0;
-    },
-
-    canGoForward: function()
-    {
-        return this._currentIndex < this._backForwardList.length - 1;
-    },
-
-    goBack: function()
-    {
-        if (!this.canGoBack())
-            return;
-        this.showBackForwardEntry(this._currentIndex - 1);
-    },
-
-    goForward: function()
-    {
-        if (!this.canGoForward())
-            return;
-        this.showBackForwardEntry(this._currentIndex + 1);
-    },
-
-    shown: function()
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView)
-            return;
-
-        this._showContentView(currentContentView);
-    },
-
-    hidden: function()
-    {
-        var currentContentView = this.currentContentView;
-        if (!currentContentView)
-            return;
-
-        this._hideContentView(currentContentView);
-    },
-
-    // Private
-
-    _addContentViewElement: function(contentView)
-    {
-        if (contentView.element.parentNode !== this._element)
-            this._element.appendChild(contentView.element);
-    },
-
-    _removeContentViewElement: function(contentView)
-    {
-        if (contentView.element.parentNode)
-            contentView.element.parentNode.removeChild(contentView.element);
-    },
-
-    _disassociateFromContentView: function(contentView)
-    {
-        console.assert(!contentView.visible);
-
-        contentView._parentContainer = null;
-
-        var representedObject = contentView.representedObject;
-        if (!representedObject || !representedObject.__contentViews)
-            return;
-
-        representedObject.__contentViews.remove(contentView);
-
-        contentView.closed();
-    },
-
-    _saveScrollPositionsForContentView: function(contentView)
-    {
-        var scrollableElements = contentView.scrollableElements || [];
-        for (var i = 0; i < scrollableElements.length; ++i) {
-            var element = scrollableElements[i];
-            if (!element)
-                continue;
-            if (contentView.shouldKeepElementsScrolledToBottom)
-                element._savedIsScrolledToBottom = element.isScrolledToBottom();
-            element._savedScrollTop = element.scrollTop;
-            element._savedScrollLeft = element.scrollLeft;
-        }
-    },
-
-    _restoreScrollPositionsForContentView: function(contentView)
-    {
-        var scrollableElements = contentView.scrollableElements || [];
-        for (var i = 0; i < scrollableElements.length; ++i) {
-            var element = scrollableElements[i];
-            if (!element)
-                continue;
-
-            // Restore the top scroll position by either scrolling to the bottom or to the saved position.
-            element.scrollTop = element._savedIsScrolledToBottom ? element.scrollHeight : element._savedScrollTop;
-
-            // Don't restore the left scroll position when scrolled to the bottom. This way the when content changes
-            // the user won't be left in a weird horizontal position.
-            element.scrollLeft = element._savedIsScrolledToBottom ? 0 : element._savedScrollLeft;
-        }
-    },
-
-    _showContentView: function(contentView)
-    {
-        if (contentView.visible)
-            return;
-
-        this._addContentViewElement(contentView);
-
-        this._prepareContentViewToShow(contentView);
-    },
-
-    _prepareContentViewToShow: function(contentView)
-    {
-        this._restoreScrollPositionsForContentView(contentView);
-
-        contentView.visible = true;
-        contentView.shown();
-        contentView.updateLayout();
-    },
-
-    _hideContentView: function(contentView)
-    {
-        if (!contentView.visible)
-            return;
-
-        this._prepareContentViewToHide(contentView);
-
-        this._removeContentViewElement(contentView);
-    },
-
-    _prepareContentViewToHide: function(contentView)
-    {
-        contentView.visible = false;
-        contentView.hidden();
-
-        this._saveScrollPositionsForContentView(contentView);
-    }
-};
-
-WebInspector.ContentViewContainer.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ContextMenu.js b/Source/WebInspectorUI/UserInterface/ContextMenu.js
deleted file mode 100644
index 26eacc996..000000000
--- a/Source/WebInspectorUI/UserInterface/ContextMenu.js
+++ /dev/null
@@ -1,275 +0,0 @@
-/*
- * Copyright (C) 2009 Google Inc. All rights reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @param {WebInspector.ContextSubMenuItem} topLevelMenu
- * @param {string} type
- * @param {string=} label
- * @param {boolean=} disabled
- * @param {boolean=} checked
- */
-WebInspector.ContextMenuItem = function(topLevelMenu, type, label, disabled, checked)
-{
-    this._type = type;
-    this._label = label;
-    this._disabled = disabled;
-    this._checked = checked;
-    this._contextMenu = topLevelMenu;
-    if (type === "item" || type === "checkbox")
-        this._id = topLevelMenu.nextId();
-}
-
-WebInspector.ContextMenuItem.prototype = {
-    id: function()
-    {
-        return this._id;
-    },
-
-    type: function()
-    {
-        return this._type;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    isEnabled: function()
-    {
-        return !this._disabled;
-    },
-
-    /**
-     * @param {boolean} enabled
-     */
-    setEnabled: function(enabled)
-    {
-        this._disabled = !enabled;
-    },
-
-    _buildDescriptor: function()
-    {
-        switch (this._type) {
-        case "item":
-            return { type: "item", id: this._id, label: this._label, enabled: !this._disabled };
-        case "separator":
-            return { type: "separator" };
-        case "checkbox":
-            return { type: "checkbox", id: this._id, label: this._label, checked: !!this._checked, enabled: !this._disabled };
-        }
-    }
-}
-
-/**
- * @constructor
- * @extends {WebInspector.ContextMenuItem}
- * @param topLevelMenu
- * @param {string=} label
- * @param {boolean=} disabled
- */
-WebInspector.ContextSubMenuItem = function(topLevelMenu, label, disabled)
-{
-    WebInspector.ContextMenuItem.call(this, topLevelMenu, "subMenu", label, disabled);
-    this._items = [];
-}
-
-WebInspector.ContextSubMenuItem.prototype = {
-    /**
-     * @param {string} label
-     * @param {function} handler
-     * @param {boolean=} disabled
-     * @return {WebInspector.ContextMenuItem}
-     */
-    appendItem: function(label, handler, disabled)
-    {
-        var item = new WebInspector.ContextMenuItem(this._contextMenu, "item", label, disabled);
-        this._pushItem(item);
-        this._contextMenu._setHandler(item.id(), handler);
-        return item;
-    },
-
-    /**
-     * @param {string} label
-     * @param {boolean=} disabled
-     * @return {WebInspector.ContextMenuItem}
-     */
-    appendSubMenuItem: function(label, disabled)
-    {
-        var item = new WebInspector.ContextSubMenuItem(this._contextMenu, label, disabled);
-        this._pushItem(item);
-        return item;
-    },
-
-    /**
-     * @param {boolean=} disabled
-     */
-    appendCheckboxItem: function(label, handler, checked, disabled)
-    {
-        var item = new WebInspector.ContextMenuItem(this._contextMenu, "checkbox", label, disabled, checked);
-        this._pushItem(item);
-        this._contextMenu._setHandler(item.id(), handler);
-        return item;
-    },
-
-    appendSeparator: function()
-    {
-        if (this._items.length)
-            this._pendingSeparator = true;
-    },
-
-    _pushItem: function(item)
-    {
-        if (this._pendingSeparator) {
-            this._items.push(new WebInspector.ContextMenuItem(this._contextMenu, "separator"));
-            delete this._pendingSeparator;
-        }
-        this._items.push(item);
-    },
-
-    /**
-     * @return {boolean}
-     */
-    isEmpty: function()
-    {
-        return !this._items.length;
-    },
-
-    _buildDescriptor: function()
-    {
-        var result = { type: "subMenu", label: this._label, enabled: !this._disabled, subItems: [] };
-        for (var i = 0; i < this._items.length; ++i)
-            result.subItems.push(this._items[i]._buildDescriptor());
-        return result;
-    },
-
-    __proto__: WebInspector.ContextMenuItem.prototype
-}
-
-/**
- * @constructor
- * @extends {WebInspector.ContextSubMenuItem}
- */
-WebInspector.ContextMenu = function(event) {
-    WebInspector.ContextSubMenuItem.call(this, this, "");
-    this._event = event;
-    this._handlers = {};
-    this._id = 0;
-}
-
-WebInspector.ContextMenu.prototype = {
-    nextId: function()
-    {
-        return this._id++;
-    },
-
-    show: function()
-    {
-        var menuObject = this._buildDescriptor();
-
-        if (menuObject.length) {
-            WebInspector._contextMenu = this;
-            InspectorFrontendHost.showContextMenu(this._event, menuObject);
-        }
-        if (this._event)
-            this._event.stopImmediatePropagation();
-    },
-
-    _setHandler: function(id, handler)
-    {
-        if (handler)
-            this._handlers[id] = handler;
-    },
-
-    _buildDescriptor: function()
-    {
-        var result = [];
-        for (var i = 0; i < this._items.length; ++i)
-            result.push(this._items[i]._buildDescriptor());
-        return result;
-    },
-
-    _itemSelected: function(id)
-    {
-        if (this._handlers[id])
-            this._handlers[id].call(this);
-    },
-
-    /**
-     * @param {Object} target
-     */
-    appendApplicableItems: function(target)
-    {
-        for (var i = 0; i < WebInspector.ContextMenu._providers.length; ++i) {
-            var provider = WebInspector.ContextMenu._providers[i];
-            this.appendSeparator();
-            provider.appendApplicableItems(this._event, this, target);
-            this.appendSeparator();
-        }
-    },
-
-    __proto__: WebInspector.ContextSubMenuItem.prototype
-}
-
-/**
- * @interface
- */
-WebInspector.ContextMenu.Provider = function() { 
-}
-
-WebInspector.ContextMenu.Provider.prototype = {
-    /** 
-     * @param {WebInspector.ContextMenu} contextMenu
-     * @param {Object} target
-     */
-    appendApplicableItems: function(event, contextMenu, target) { }
-}
-
-/**
- * @param {WebInspector.ContextMenu.Provider} provider
- */
-WebInspector.ContextMenu.registerProvider = function(provider)
-{
-    WebInspector.ContextMenu._providers.push(provider);
-}
-
-WebInspector.ContextMenu._providers = [];
-
-WebInspector.contextMenuItemSelected = function(id)
-{
-    if (WebInspector._contextMenu)
-        WebInspector._contextMenu._itemSelected(id);
-}
-
-WebInspector.contextMenuCleared = function()
-{
-    // FIXME: Unfortunately, contextMenuCleared is invoked between show and item selected
-    // so we can't delete last menu object from WebInspector. Fix the contract.
-}
diff --git a/Source/WebInspectorUI/UserInterface/ControlToolbarItem.css b/Source/WebInspectorUI/UserInterface/ControlToolbarItem.css
deleted file mode 100644
index 20fa427c0..000000000
--- a/Source/WebInspectorUI/UserInterface/ControlToolbarItem.css
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.toolbar .item.control {
-    -webkit-align-items: center;
-    -webkit-justify-content: center;
-
-    padding: 3px 2px;
-
-    opacity: 0.5;
-}
-
-.toolbar.small-size .item.control {
-    padding: 2px;
-}
-
-.toolbar.icon-and-label-horizontal .item.control,
-.toolbar.icon-only .item.control {
-    padding: 0 2px;
-}
-
-.toolbar .item.control:hover {
-    opacity: 0.8;
-}
-
-.toolbar .item.control:active {
-    opacity: 1;
-}
-
-.toolbar .item.control > .glyph {
-    width: 16px;
-    height: 16px;
-
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-
-body.window-inactive .toolbar .item.control {
-    opacity: 0.35;
-}
-
-.toolbar .item.control.disabled {
-    opacity: 0.35 !important;
-}
-
-body.window-inactive .toolbar .item.control.disabled {
-    opacity: 0.2 !important;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ControlToolbarItem.js b/Source/WebInspectorUI/UserInterface/ControlToolbarItem.js
deleted file mode 100644
index 1497c2bdc..000000000
--- a/Source/WebInspectorUI/UserInterface/ControlToolbarItem.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ControlToolbarItem = function(identifier, toolTip, image, imageWidth, imageHeight)
-{
-    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, false);
-};
-
-WebInspector.ControlToolbarItem.StyleClassName = "control";
-
-WebInspector.ControlToolbarItem.prototype = {
-    constructor: WebInspector.ControlToolbarItem,
-
-    // Private
-
-    _additionalClassNames: [WebInspector.ControlToolbarItem.StyleClassName],
-};
-
-WebInspector.ControlToolbarItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/AnalyzerManager.js b/Source/WebInspectorUI/UserInterface/Controllers/AnalyzerManager.js
new file mode 100644
index 000000000..6666eb330
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/AnalyzerManager.js
@@ -0,0 +1,122 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.AnalyzerManager = class AnalyzerManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._eslintConfig = {
+            env: {
+                "browser": true,
+                "node": false
+            },
+            globals: {
+                "document": true
+            },
+            rules: {
+                "consistent-return": 2,
+                "curly": 0,
+                "eqeqeq": 0,
+                "new-parens": 0,
+                "no-comma-dangle": 0,
+                "no-console": 0,
+                "no-constant-condition": 0,
+                "no-extra-bind": 2,
+                "no-extra-semi": 2,
+                "no-proto": 0,
+                "no-return-assign": 2,
+                "no-trailing-spaces": 2,
+                "no-underscore-dangle": 0,
+                "no-unused-expressions": 2,
+                "no-wrap-func": 2,
+                "semi": 2,
+                "space-infix-ops": 2,
+                "space-return-throw-case": 2,
+                "strict": 0,
+                "valid-typeof": 2
+            }
+        };
+
+        this._sourceCodeMessagesMap = new WeakMap;
+
+        WebInspector.SourceCode.addEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._handleSourceCodeContentDidChange, this);
+    }
+
+    // Public
+
+    getAnalyzerMessagesForSourceCode(sourceCode)
+    {
+        return new Promise(function(resolve, reject) {
+            var analyzer = WebInspector.AnalyzerManager._typeAnalyzerMap.get(sourceCode.type);
+            if (!analyzer) {
+                reject(new Error("This resource type cannot be analyzed."));
+                return;
+            }
+
+            if (this._sourceCodeMessagesMap.has(sourceCode)) {
+                resolve(this._sourceCodeMessagesMap.get(sourceCode));
+                return;
+            }
+
+            function retrieveAnalyzerMessages(properties)
+            {
+                var analyzerMessages = [];
+                var rawAnalyzerMessages = analyzer.verify(sourceCode.content, this._eslintConfig);
+
+                // Raw line and column numbers are one-based. SourceCodeLocation expects them to be zero-based so we subtract 1 from each.
+                for (var rawAnalyzerMessage of rawAnalyzerMessages)
+                    analyzerMessages.push(new WebInspector.AnalyzerMessage(new WebInspector.SourceCodeLocation(sourceCode, rawAnalyzerMessage.line - 1, rawAnalyzerMessage.column - 1), rawAnalyzerMessage.message, rawAnalyzerMessage.ruleId));
+
+                this._sourceCodeMessagesMap.set(sourceCode, analyzerMessages);
+
+                resolve(analyzerMessages);
+            }
+
+            sourceCode.requestContent().then(retrieveAnalyzerMessages.bind(this));
+        }.bind(this));
+    }
+
+    sourceCodeCanBeAnalyzed(sourceCode)
+    {
+        return sourceCode.type === WebInspector.Resource.Type.Script;
+    }
+
+    // Private
+
+    _handleSourceCodeContentDidChange(event)
+    {
+        var sourceCode = event.target;
+
+        // Since sourceCode has changed, remove it and its messages from the map so getAnalyzerMessagesForSourceCode will have to reanalyze the next time it is called.
+        this._sourceCodeMessagesMap.delete(sourceCode);
+    }
+};
+
+WebInspector.AnalyzerManager._typeAnalyzerMap = new Map;
+
+// <https://webkit.org/b/136515> Web Inspector: JavaScript source text editor should have a linter
+// WebInspector.AnalyzerManager._typeAnalyzerMap.set(WebInspector.Resource.Type.Script, eslint);
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/Annotator.js b/Source/WebInspectorUI/UserInterface/Controllers/Annotator.js
new file mode 100644
index 000000000..3e87bb5a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/Annotator.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 Saam Barati <saambarati1@gmail.com>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Annotator = class Annotator extends WebInspector.Object
+{
+    constructor(sourceCodeTextEditor)
+    {
+        super();
+
+        console.assert(sourceCodeTextEditor instanceof WebInspector.SourceCodeTextEditor, sourceCodeTextEditor);
+
+        this._sourceCodeTextEditor = sourceCodeTextEditor;
+        this._timeoutIdentifier = null;
+        this._isActive = false;
+    }
+
+    // Public
+
+    get sourceCodeTextEditor()
+    {
+        return this._sourceCodeTextEditor;
+    }
+
+    isActive()
+    {
+        return this._isActive;
+    }
+
+    pause()
+    {
+        this._clearTimeoutIfNeeded();
+        this._isActive = false;
+    }
+
+    resume()
+    {
+        this._clearTimeoutIfNeeded();
+        this._isActive = true;
+        this.insertAnnotations();
+    }
+
+    refresh()
+    {
+        console.assert(this._isActive);
+        if (!this._isActive)
+            return;
+
+        this._clearTimeoutIfNeeded();
+        this.insertAnnotations();
+    }
+
+    reset()
+    {
+        this._clearTimeoutIfNeeded();
+        this._isActive = true;
+        this.clearAnnotations();
+        this.insertAnnotations();
+    }
+
+    clear()
+    {
+        this.pause();
+        this.clearAnnotations();
+    }
+
+    // Protected
+
+    insertAnnotations()
+    {
+        // Implemented by subclasses.
+    }
+
+    clearAnnotations()
+    {
+        // Implemented by subclasses.
+    }
+
+    // Private
+
+    _clearTimeoutIfNeeded()
+    {
+        if (this._timeoutIdentifier) {
+            clearTimeout(this._timeoutIdentifier);
+            this._timeoutIdentifier = null;
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/ApplicationCacheManager.js b/Source/WebInspectorUI/UserInterface/Controllers/ApplicationCacheManager.js
new file mode 100644
index 000000000..61a55a9f7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/ApplicationCacheManager.js
@@ -0,0 +1,204 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheManager = class ApplicationCacheManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        if (window.ApplicationCacheAgent)
+            ApplicationCacheAgent.enable();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
+
+        this._online = true;
+
+        this.initialize();
+    }
+
+    // Public
+
+    initialize()
+    {
+        this._applicationCacheObjects = {};
+
+        if (window.ApplicationCacheAgent)
+            ApplicationCacheAgent.getFramesWithManifests(this._framesWithManifestsLoaded.bind(this));
+    }
+
+    get applicationCacheObjects()
+    {
+        var applicationCacheObjects = [];
+        for (var id in this._applicationCacheObjects)
+            applicationCacheObjects.push(this._applicationCacheObjects[id]);
+        return applicationCacheObjects;
+    }
+
+    networkStateUpdated(isNowOnline)
+    {
+        this._online = isNowOnline;
+
+        this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, {online: this._online});
+    }
+
+    get online()
+    {
+        return this._online;
+    }
+
+    applicationCacheStatusUpdated(frameId, manifestURL, status)
+    {
+        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameId);
+        if (!frame)
+            return;
+
+        this._frameManifestUpdated(frame, manifestURL, status);
+    }
+
+    requestApplicationCache(frame, callback)
+    {
+        function callbackWrapper(error, applicationCache)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+
+            callback(applicationCache);
+        }
+
+        ApplicationCacheAgent.getApplicationCacheForFrame(frame.id, callbackWrapper);
+    }
+
+    // Private
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (event.target.isMainFrame()) {
+            // If we are dealing with the main frame, we want to clear our list of objects, because we are navigating to a new page.
+            this.initialize();
+
+            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.Cleared);
+
+            return;
+        }
+
+        if (window.ApplicationCacheAgent)
+            ApplicationCacheAgent.getManifestForFrame(event.target.id, this._manifestForFrameLoaded.bind(this, event.target.id));
+    }
+
+    _childFrameWasRemoved(event)
+    {
+        this._frameManifestRemoved(event.data.childFrame);
+    }
+
+    _manifestForFrameLoaded(frameId, error, manifestURL)
+    {
+        if (error)
+            return;
+
+        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameId);
+        if (!frame)
+            return;
+
+        if (!manifestURL)
+            this._frameManifestRemoved(frame);
+    }
+
+    _framesWithManifestsLoaded(error, framesWithManifests)
+    {
+        if (error)
+            return;
+
+        for (var i = 0; i < framesWithManifests.length; ++i) {
+            var frame = WebInspector.frameResourceManager.frameForIdentifier(framesWithManifests[i].frameId);
+            if (!frame)
+                continue;
+
+            this._frameManifestUpdated(frame, framesWithManifests[i].manifestURL, framesWithManifests[i].status);
+        }
+    }
+
+    _frameManifestUpdated(frame, manifestURL, status)
+    {
+        if (status === WebInspector.ApplicationCacheManager.Status.Uncached) {
+            this._frameManifestRemoved(frame);
+            return;
+        }
+
+        if (!manifestURL)
+            return;
+
+        var manifestFrame = this._applicationCacheObjects[frame.id];
+        if (manifestFrame && manifestURL !== manifestFrame.manifest.manifestURL)
+            this._frameManifestRemoved(frame);
+
+        var oldStatus = manifestFrame ? manifestFrame.status : -1;
+        var statusChanged = manifestFrame && status !== oldStatus;
+        if (manifestFrame)
+            manifestFrame.status = status;
+
+        if (!this._applicationCacheObjects[frame.id]) {
+            var cacheManifest = new WebInspector.ApplicationCacheManifest(manifestURL);
+            this._applicationCacheObjects[frame.id] = new WebInspector.ApplicationCacheFrame(frame, cacheManifest, status);
+
+            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestAdded, {frameManifest: this._applicationCacheObjects[frame.id]});
+        }
+
+        if (statusChanged)
+            this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, {frameManifest: this._applicationCacheObjects[frame.id]});
+    }
+
+    _frameManifestRemoved(frame)
+    {
+        if (!this._applicationCacheObjects[frame.id])
+            return;
+
+        delete this._applicationCacheObjects[frame.id];
+
+        this.dispatchEventToListeners(WebInspector.ApplicationCacheManager.Event.FrameManifestRemoved, {frame});
+    }
+};
+
+WebInspector.ApplicationCacheManager.Event = {
+    Cleared: "application-cache-manager-cleared",
+    FrameManifestAdded: "application-cache-manager-frame-manifest-added",
+    FrameManifestRemoved: "application-cache-manager-frame-manifest-removed",
+    FrameManifestStatusChanged: "application-cache-manager-frame-manifest-status-changed",
+    NetworkStateUpdated: "application-cache-manager-network-state-updated"
+};
+
+WebInspector.ApplicationCacheManager.Status = {
+    Uncached: 0,
+    Idle: 1,
+    Checking: 2,
+    Downloading: 3,
+    UpdateReady: 4,
+    Obsolete: 5
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BasicBlockAnnotator.js b/Source/WebInspectorUI/UserInterface/Controllers/BasicBlockAnnotator.js
new file mode 100644
index 000000000..359dee0ae
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/BasicBlockAnnotator.js
@@ -0,0 +1,131 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Saam Barati <saambarati1@gmail.com>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BasicBlockAnnotator = class BasicBlockAnnotator extends WebInspector.Annotator
+{
+    constructor(sourceCodeTextEditor, script)
+    {
+        super(sourceCodeTextEditor);
+
+        this._script = script;
+        this._basicBlockMarkers = new Map; // Only contains unexecuted basic blocks.
+    }
+
+    // Protected
+
+    clearAnnotations()
+    {
+        for (var key of this._basicBlockMarkers.keys())
+            this._clearRangeForBasicBlockMarker(key);
+    }
+
+    insertAnnotations()
+    {
+        if (!this.isActive())
+            return;
+        this._annotateBasicBlockExecutionRanges();
+    }
+
+    // Private
+
+    _annotateBasicBlockExecutionRanges()
+    {
+        var sourceID = this._script.id;
+        var startTime = Date.now();
+
+        RuntimeAgent.getBasicBlocks(sourceID, function(error, basicBlocks) {
+            if (error) {
+                console.error("Error in getting basic block locations: " + error);
+                return;
+            }
+
+            if (!this.isActive())
+                return;
+
+            var {startOffset, endOffset} = this.sourceCodeTextEditor.visibleRangeOffsets();
+            basicBlocks = basicBlocks.filter(function(block) {
+                // Viewport: [--]
+                // Block:         [--]
+                if (block.startOffset > endOffset)
+                    return false;
+
+                // Viewport:      [--]
+                // Block:    [--]
+                if (block.endOffset < startOffset)
+                    return false;
+
+                return true;
+            });
+
+            for (var block of basicBlocks) {
+                var key = block.startOffset + ":" + block.endOffset;
+                var hasKey = this._basicBlockMarkers.has(key);
+                var hasExecuted = block.hasExecuted;
+                if (hasKey && hasExecuted)
+                    this._clearRangeForBasicBlockMarker(key);
+                else if (!hasKey && !hasExecuted) {
+                    var marker = this._highlightTextForBasicBlock(block);
+                    this._basicBlockMarkers.set(key, marker);
+                }
+            }
+
+            var totalTime = Date.now() - startTime;
+            var timeoutTime = Number.constrain(30 * totalTime, 500, 5000);
+            this._timeoutIdentifier = setTimeout(this.insertAnnotations.bind(this), timeoutTime);
+        }.bind(this));
+    }
+
+    _highlightTextForBasicBlock(basicBlock)
+    {
+        console.assert(basicBlock.startOffset <= basicBlock.endOffset && basicBlock.startOffset >= 0 && basicBlock.endOffset >= 0, "" + basicBlock.startOffset + ":" + basicBlock.endOffset);
+        console.assert(!basicBlock.hasExecuted);
+
+        var startPosition = this.sourceCodeTextEditor.originalOffsetToCurrentPosition(basicBlock.startOffset);
+        var endPosition = this.sourceCodeTextEditor.originalOffsetToCurrentPosition(basicBlock.endOffset);
+        if (this._isTextRangeOnlyClosingBrace(startPosition, endPosition))
+            return null;
+
+        var marker = this.sourceCodeTextEditor.addStyleToTextRange(startPosition, endPosition, WebInspector.BasicBlockAnnotator.HasNotExecutedClassName);
+        return marker;
+    }
+
+    _isTextRangeOnlyClosingBrace(startPosition, endPosition)
+    {
+        var isOnlyClosingBrace = /^\s*\}$/;
+        return isOnlyClosingBrace.test(this.sourceCodeTextEditor.getTextInRange(startPosition, endPosition));
+    }
+
+    _clearRangeForBasicBlockMarker(key)
+    {
+        console.assert(this._basicBlockMarkers.has(key));
+        var marker = this._basicBlockMarkers.get(key);
+        if (marker)
+            marker.clear();
+        this._basicBlockMarkers.delete(key);
+    }
+};
+
+WebInspector.BasicBlockAnnotator.HasNotExecutedClassName = "basic-block-has-not-executed";
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BranchManager.js b/Source/WebInspectorUI/UserInterface/Controllers/BranchManager.js
new file mode 100644
index 000000000..6dc8de1ca
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/BranchManager.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BranchManager = class BranchManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        this.initialize();
+    }
+
+    // Public
+
+    initialize()
+    {
+        this._originalBranch = new WebInspector.Branch(WebInspector.UIString("Original"), null, true);
+        this._currentBranch = this._originalBranch.fork(WebInspector.UIString("Working Copy"));
+        this._branches = [this._originalBranch, this._currentBranch];
+    }
+
+    get branches()
+    {
+        return this._branches;
+    }
+
+    get currentBranch()
+    {
+        return this._currentBranch;
+    }
+
+    set currentBranch(branch)
+    {
+        console.assert(branch instanceof WebInspector.Branch);
+        if (!(branch instanceof WebInspector.Branch))
+            return;
+
+        this._currentBranch.revert();
+
+        this._currentBranch = branch;
+
+        this._currentBranch.apply();
+    }
+
+    createBranch(displayName, fromBranch)
+    {
+        if (!fromBranch)
+            fromBranch = this._originalBranch;
+
+        console.assert(fromBranch instanceof WebInspector.Branch);
+        if (!(fromBranch instanceof WebInspector.Branch))
+            return null;
+
+        var newBranch = fromBranch.fork(displayName);
+        this._branches.push(newBranch);
+        return newBranch;
+    }
+
+    deleteBranch(branch)
+    {
+        console.assert(branch instanceof WebInspector.Branch);
+        if (!(branch instanceof WebInspector.Branch))
+            return;
+
+        console.assert(branch !== this._originalBranch);
+        if (branch === this._originalBranch)
+            return;
+
+        this._branches.remove(branch);
+
+        if (branch === this._currentBranch)
+            this._currentBranch = this._originalBranch;
+    }
+
+    // Private
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        this.initialize();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
new file mode 100644
index 000000000..d3b218781
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointPopoverController.js
@@ -0,0 +1,376 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BreakpointPopoverController = class BreakpointPopoverController extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._breakpoint = null;
+        this._popover = null;
+        this._popoverContentElement = null;
+    }
+
+    // Public
+
+    appendContextMenuItems(contextMenu, breakpoint, breakpointDisplayElement)
+    {
+        console.assert(document.body.contains(breakpointDisplayElement), "Breakpoint popover display element must be in the DOM.");
+
+        const editBreakpoint = () => {
+            console.assert(!this._popover, "Breakpoint popover already exists.");
+            if (this._popover)
+                return;
+
+            this._createPopoverContent(breakpoint);
+            this._popover = new WebInspector.Popover(this);
+            this._popover.content = this._popoverContentElement;
+
+            let bounds = WebInspector.Rect.rectFromClientRect(breakpointDisplayElement.getBoundingClientRect());
+            bounds.origin.x -= 1; // Move the anchor left one pixel so it looks more centered.
+            this._popover.present(bounds.pad(2), [WebInspector.RectEdge.MAX_Y]);
+        };
+
+        const removeBreakpoint = () => {
+            WebInspector.debuggerManager.removeBreakpoint(breakpoint);
+        };
+
+        const toggleBreakpoint = () => {
+            breakpoint.disabled = !breakpoint.disabled;
+        };
+
+        const toggleAutoContinue = () => {
+            breakpoint.autoContinue = !breakpoint.autoContinue;
+        };
+
+        const revealOriginalSourceCodeLocation = () => {
+            WebInspector.showOriginalOrFormattedSourceCodeLocation(breakpoint.sourceCodeLocation);
+        };
+
+        if (WebInspector.debuggerManager.isBreakpointEditable(breakpoint))
+            contextMenu.appendItem(WebInspector.UIString("Edit Breakpoint…"), editBreakpoint);
+
+        if (breakpoint.autoContinue && !breakpoint.disabled) {
+            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint);
+            contextMenu.appendItem(WebInspector.UIString("Cancel Automatic Continue"), toggleAutoContinue);
+        } else if (!breakpoint.disabled)
+            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoint"), toggleBreakpoint);
+        else
+            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoint"), toggleBreakpoint);
+
+        if (!breakpoint.autoContinue && !breakpoint.disabled && breakpoint.actions.length)
+            contextMenu.appendItem(WebInspector.UIString("Set to Automatically Continue"), toggleAutoContinue);
+
+        if (WebInspector.debuggerManager.isBreakpointRemovable(breakpoint)) {
+            contextMenu.appendSeparator();
+            contextMenu.appendItem(WebInspector.UIString("Delete Breakpoint"), removeBreakpoint);
+        }
+
+        if (breakpoint._sourceCodeLocation.hasMappedLocation()) {
+            contextMenu.appendSeparator();
+            contextMenu.appendItem(WebInspector.UIString("Reveal in Original Resource"), revealOriginalSourceCodeLocation);
+        }
+    }
+
+    // CodeMirrorCompletionController delegate
+
+    completionControllerShouldAllowEscapeCompletion()
+    {
+        return false;
+    }
+
+    // Private
+
+    _createPopoverContent(breakpoint)
+    {
+        console.assert(!this._popoverContentElement, "Popover content element already exists.");
+        if (this._popoverContentElement)
+            return;
+
+        this._breakpoint = breakpoint;
+        this._popoverContentElement = document.createElement("div");
+        this._popoverContentElement.className = "edit-breakpoint-popover-content";
+
+        let checkboxElement = document.createElement("input");
+        checkboxElement.type = "checkbox";
+        checkboxElement.checked = !this._breakpoint.disabled;
+        checkboxElement.addEventListener("change", this._popoverToggleEnabledCheckboxChanged.bind(this));
+
+        let checkboxLabel = document.createElement("label");
+        checkboxLabel.className = "toggle";
+        checkboxLabel.appendChild(checkboxElement);
+        checkboxLabel.append(this._breakpoint.sourceCodeLocation.displayLocationString());
+
+        let table = document.createElement("table");
+
+        let conditionRow = table.appendChild(document.createElement("tr"));
+        let conditionHeader = conditionRow.appendChild(document.createElement("th"));
+        let conditionData = conditionRow.appendChild(document.createElement("td"));
+        let conditionLabel = conditionHeader.appendChild(document.createElement("label"));
+        conditionLabel.textContent = WebInspector.UIString("Condition");
+        let conditionEditorElement = conditionData.appendChild(document.createElement("div"));
+        conditionEditorElement.classList.add("edit-breakpoint-popover-condition", WebInspector.SyntaxHighlightedStyleClassName);
+
+        this._conditionCodeMirror = WebInspector.CodeMirrorEditor.create(conditionEditorElement, {
+            extraKeys: {Tab: false},
+            lineWrapping: false,
+            mode: "text/javascript",
+            matchBrackets: true,
+            placeholder: WebInspector.UIString("Conditional expression"),
+            scrollbarStyle: null,
+            value: this._breakpoint.condition || "",
+        });
+
+        let conditionCodeMirrorInputField = this._conditionCodeMirror.getInputField();
+        conditionCodeMirrorInputField.id = "codemirror-condition-input-field";
+        conditionLabel.setAttribute("for", conditionCodeMirrorInputField.id);
+
+        this._conditionCodeMirrorEscapeOrEnterKeyHandler = this._conditionCodeMirrorEscapeOrEnterKey.bind(this);
+        this._conditionCodeMirror.addKeyMap({
+            "Esc": this._conditionCodeMirrorEscapeOrEnterKeyHandler,
+            "Enter": this._conditionCodeMirrorEscapeOrEnterKeyHandler,
+        });
+
+        this._conditionCodeMirror.on("change", this._conditionCodeMirrorChanged.bind(this));
+        this._conditionCodeMirror.on("beforeChange", this._conditionCodeMirrorBeforeChange.bind(this));
+
+        let completionController = new WebInspector.CodeMirrorCompletionController(this._conditionCodeMirror, this);
+        completionController.addExtendedCompletionProvider("javascript", WebInspector.javaScriptRuntimeCompletionProvider);
+
+        // CodeMirror needs a refresh after the popover displays, to layout, otherwise it doesn't appear.
+        setTimeout(function() {
+            this._conditionCodeMirror.refresh();
+            this._conditionCodeMirror.focus();
+        }.bind(this), 0);
+
+        // COMPATIBILITY (iOS 7): Debugger.setBreakpoint did not support options.
+        if (DebuggerAgent.setBreakpoint.supports("options")) {
+            // COMPATIBILITY (iOS 9): Legacy backends don't support breakpoint ignore count. Since support
+            // can't be tested directly, check for CSS.getSupportedSystemFontFamilyNames.
+            // FIXME: Use explicit version checking once https://webkit.org/b/148680 is fixed.
+            if (CSSAgent.getSupportedSystemFontFamilyNames) {
+                let ignoreCountRow = table.appendChild(document.createElement("tr"));
+                let ignoreCountHeader = ignoreCountRow.appendChild(document.createElement("th"));
+                let ignoreCountLabel = ignoreCountHeader.appendChild(document.createElement("label"));
+                let ignoreCountData = ignoreCountRow.appendChild(document.createElement("td"));
+                this._ignoreCountInput = ignoreCountData.appendChild(document.createElement("input"));
+                this._ignoreCountInput.id = "edit-breakpoint-popover-ignore";
+                this._ignoreCountInput.type = "number";
+                this._ignoreCountInput.min = 0;
+                this._ignoreCountInput.value = 0;
+                this._ignoreCountInput.addEventListener("change", this._popoverIgnoreInputChanged.bind(this));
+
+                ignoreCountLabel.setAttribute("for", this._ignoreCountInput.id);
+                ignoreCountLabel.textContent = WebInspector.UIString("Ignore");
+
+                this._ignoreCountText = ignoreCountData.appendChild(document.createElement("span"));
+                this._updateIgnoreCountText();
+            }
+
+            let actionRow = table.appendChild(document.createElement("tr"));
+            let actionHeader = actionRow.appendChild(document.createElement("th"));
+            let actionData = this._actionsContainer = actionRow.appendChild(document.createElement("td"));
+            let actionLabel = actionHeader.appendChild(document.createElement("label"));
+            actionLabel.textContent = WebInspector.UIString("Action");
+
+            if (!this._breakpoint.actions.length)
+                this._popoverActionsCreateAddActionButton();
+            else {
+                this._popoverContentElement.classList.add(WebInspector.BreakpointPopoverController.WidePopoverClassName);
+                for (let i = 0; i < this._breakpoint.actions.length; ++i) {
+                    let breakpointActionView = new WebInspector.BreakpointActionView(this._breakpoint.actions[i], this, true);
+                    this._popoverActionsInsertBreakpointActionView(breakpointActionView, i);
+                }
+            }
+
+            let optionsRow = this._popoverOptionsRowElement = table.appendChild(document.createElement("tr"));
+            if (!this._breakpoint.actions.length)
+                optionsRow.classList.add(WebInspector.BreakpointPopoverController.HiddenStyleClassName);
+            let optionsHeader = optionsRow.appendChild(document.createElement("th"));
+            let optionsData = optionsRow.appendChild(document.createElement("td"));
+            let optionsLabel = optionsHeader.appendChild(document.createElement("label"));
+            let optionsCheckbox = this._popoverOptionsCheckboxElement = optionsData.appendChild(document.createElement("input"));
+            let optionsCheckboxLabel = optionsData.appendChild(document.createElement("label"));
+            optionsCheckbox.id = "edit-breakpoint-popoover-auto-continue";
+            optionsCheckbox.type = "checkbox";
+            optionsCheckbox.checked = this._breakpoint.autoContinue;
+            optionsCheckbox.addEventListener("change", this._popoverToggleAutoContinueCheckboxChanged.bind(this));
+            optionsLabel.textContent = WebInspector.UIString("Options");
+            optionsCheckboxLabel.setAttribute("for", optionsCheckbox.id);
+            optionsCheckboxLabel.textContent = WebInspector.UIString("Automatically continue after evaluating");
+        }
+
+        this._popoverContentElement.appendChild(checkboxLabel);
+        this._popoverContentElement.appendChild(table);
+    }
+
+    _popoverToggleEnabledCheckboxChanged(event)
+    {
+        this._breakpoint.disabled = !event.target.checked;
+    }
+
+    _conditionCodeMirrorChanged(codeMirror, change)
+    {
+        this._breakpoint.condition = (codeMirror.getValue() || "").trim();
+    }
+
+    _conditionCodeMirrorBeforeChange(codeMirror, change)
+    {
+        let newText = change.text.join("").replace(/\n/g, "");
+        change.update(change.from, change.to, [newText]);
+        return true;
+    }
+
+    _conditionCodeMirrorEscapeOrEnterKey()
+    {
+        this._popover.dismiss();
+    }
+
+    _popoverIgnoreInputChanged(event)
+    {
+        let ignoreCount = 0;
+        if (event.target.value) {
+            ignoreCount = parseInt(event.target.value, 10);
+            if (isNaN(ignoreCount) || ignoreCount < 0)
+                ignoreCount = 0;
+        }
+
+        this._ignoreCountInput.value = ignoreCount;
+        this._breakpoint.ignoreCount = ignoreCount;
+
+        this._updateIgnoreCountText();
+    }
+
+    _popoverToggleAutoContinueCheckboxChanged(event)
+    {
+        this._breakpoint.autoContinue = event.target.checked;
+    }
+
+    _popoverActionsCreateAddActionButton()
+    {
+        this._popoverContentElement.classList.remove(WebInspector.BreakpointPopoverController.WidePopoverClassName);
+        this._actionsContainer.removeChildren();
+
+        let addActionButton = this._actionsContainer.appendChild(document.createElement("button"));
+        addActionButton.textContent = WebInspector.UIString("Add Action");
+        addActionButton.addEventListener("click", this._popoverActionsAddActionButtonClicked.bind(this));
+    }
+
+    _popoverActionsAddActionButtonClicked(event)
+    {
+        this._popoverContentElement.classList.add(WebInspector.BreakpointPopoverController.WidePopoverClassName);
+        this._actionsContainer.removeChildren();
+
+        let newAction = this._breakpoint.createAction(WebInspector.Breakpoint.DefaultBreakpointActionType);
+        let newBreakpointActionView = new WebInspector.BreakpointActionView(newAction, this);
+        this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, -1);
+        this._popoverOptionsRowElement.classList.remove(WebInspector.BreakpointPopoverController.HiddenStyleClassName);
+        this._popover.update();
+    }
+
+    _popoverActionsInsertBreakpointActionView(breakpointActionView, index)
+    {
+        if (index === -1)
+            this._actionsContainer.appendChild(breakpointActionView.element);
+        else {
+            let nextElement = this._actionsContainer.children[index + 1] || null;
+            this._actionsContainer.insertBefore(breakpointActionView.element, nextElement);
+        }
+    }
+
+    _updateIgnoreCountText()
+    {
+        if (this._breakpoint.ignoreCount === 1)
+            this._ignoreCountText.textContent = WebInspector.UIString("time before stopping");
+        else
+            this._ignoreCountText.textContent = WebInspector.UIString("times before stopping");
+    }
+
+    breakpointActionViewAppendActionView(breakpointActionView, newAction)
+    {
+        let newBreakpointActionView = new WebInspector.BreakpointActionView(newAction, this);
+
+        let index = 0;
+        let children = this._actionsContainer.children;
+        for (let i = 0; children.length; ++i) {
+            if (children[i] === breakpointActionView.element) {
+                index = i;
+                break;
+            }
+        }
+
+        this._popoverActionsInsertBreakpointActionView(newBreakpointActionView, index);
+        this._popoverOptionsRowElement.classList.remove(WebInspector.BreakpointPopoverController.HiddenStyleClassName);
+
+        this._popover.update();
+    }
+
+    breakpointActionViewRemoveActionView(breakpointActionView)
+    {
+        breakpointActionView.element.remove();
+
+        if (!this._actionsContainer.children.length) {
+            this._popoverActionsCreateAddActionButton();
+            this._popoverOptionsRowElement.classList.add(WebInspector.BreakpointPopoverController.HiddenStyleClassName);
+            this._popoverOptionsCheckboxElement.checked = false;
+        }
+
+        this._popover.update();
+    }
+
+    breakpointActionViewResized(breakpointActionView)
+    {
+        this._popover.update();
+    }
+
+    willDismissPopover(popover)
+    {
+        console.assert(this._popover === popover);
+        this._popoverContentElement = null;
+        this._popoverOptionsRowElement = null;
+        this._popoverOptionsCheckboxElement = null;
+        this._actionsContainer = null;
+        this._popover = null;
+    }
+
+    didDismissPopover(popover)
+    {
+        // Remove Evaluate and Probe actions that have no data.
+        let emptyActions = this._breakpoint.actions.filter(function(action) {
+            if (action.type !== WebInspector.BreakpointAction.Type.Evaluate && action.type !== WebInspector.BreakpointAction.Type.Probe)
+                return false;
+            return !(action.data && action.data.trim());
+        });
+
+        for (let action of emptyActions)
+            this._breakpoint.removeAction(action);
+
+        this._breakpoint = null;
+    }
+};
+
+WebInspector.BreakpointPopoverController.WidePopoverClassName = "wide";
+WebInspector.BreakpointPopoverController.HiddenStyleClassName = "hidden";
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CSSStyleManager.js b/Source/WebInspectorUI/UserInterface/Controllers/CSSStyleManager.js
new file mode 100644
index 000000000..d2d6981aa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CSSStyleManager.js
@@ -0,0 +1,545 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleManager = class CSSStyleManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        if (window.CSSAgent)
+            CSSAgent.enable();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceAdded, this);
+        WebInspector.Resource.addEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._resourceContentDidChange, this);
+        WebInspector.Resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+
+        WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeModified, this._nodeAttributesDidChange, this);
+        WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeRemoved, this._nodeAttributesDidChange, this);
+        WebInspector.DOMNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
+
+        this._colorFormatSetting = new WebInspector.Setting("default-color-format", WebInspector.Color.Format.Original);
+
+        this._styleSheetIdentifierMap = new Map;
+        this._styleSheetFrameURLMap = new Map;
+        this._nodeStylesMap = {};
+
+        // COMPATIBILITY (iOS 9): Legacy backends did not send stylesheet
+        // added/removed events and must be fetched manually.
+        this._fetchedInitialStyleSheets = window.CSSAgent && window.CSSAgent.hasEvent("styleSheetAdded");
+    }
+
+    // Static
+
+    static protocolStyleSheetOriginToEnum(origin)
+    {
+        switch (origin) {
+        case CSSAgent.StyleSheetOrigin.Regular:
+            return WebInspector.CSSStyleSheet.Type.Author;
+        case CSSAgent.StyleSheetOrigin.User:
+            return WebInspector.CSSStyleSheet.Type.User;
+        case CSSAgent.StyleSheetOrigin.UserAgent:
+            return WebInspector.CSSStyleSheet.Type.UserAgent;
+        case CSSAgent.StyleSheetOrigin.Inspector:
+            return WebInspector.CSSStyleSheet.Type.Inspector;
+        default:
+            console.assert(false, "Unknown CSS.StyleSheetOrigin", origin);
+            return CSSAgent.StyleSheetOrigin.Regular;
+        }
+    }
+
+    static protocolMediaSourceToEnum(source)
+    {
+        switch (source) {
+        case CSSAgent.CSSMediaSource.MediaRule:
+            return WebInspector.CSSMedia.Type.MediaRule;
+        case CSSAgent.CSSMediaSource.ImportRule:
+            return WebInspector.CSSMedia.Type.ImportRule;
+        case CSSAgent.CSSMediaSource.LinkedSheet:
+            return WebInspector.CSSMedia.Type.LinkedStyleSheet;
+        case CSSAgent.CSSMediaSource.InlineSheet:
+            return WebInspector.CSSMedia.Type.InlineStyleSheet;
+        default:
+            console.assert(false, "Unknown CSS.CSSMediaSource", origin);
+            return WebInspector.CSSMedia.Type.MediaRule;
+        }
+    }
+
+    // Public
+
+    get preferredColorFormat()
+    {
+        return this._colorFormatSetting.value;
+    }
+
+    get styleSheets()
+    {
+        return [...this._styleSheetIdentifierMap.values()];
+    }
+
+    canForcePseudoClasses()
+    {
+        return window.CSSAgent && !!CSSAgent.forcePseudoState;
+    }
+
+    propertyNameHasOtherVendorPrefix(name)
+    {
+        if (!name || name.length < 4 || name.charAt(0) !== "-")
+            return false;
+
+        var match = name.match(/^(?:-moz-|-ms-|-o-|-epub-)/);
+        if (!match)
+            return false;
+
+        return true;
+    }
+
+    propertyValueHasOtherVendorKeyword(value)
+    {
+        var match = value.match(/(?:-moz-|-ms-|-o-|-epub-)[-\w]+/);
+        if (!match)
+            return false;
+
+        return true;
+    }
+
+    canonicalNameForPropertyName(name)
+    {
+        if (!name || name.length < 8 || name.charAt(0) !== "-")
+            return name;
+
+        var match = name.match(/^(?:-webkit-|-khtml-|-apple-)(.+)/);
+        if (!match)
+            return name;
+
+        return match[1];
+    }
+
+    fetchStyleSheetsIfNeeded()
+    {
+        if (this._fetchedInitialStyleSheets)
+            return;
+
+        this._fetchInfoForAllStyleSheets(function() {});
+    }
+
+    styleSheetForIdentifier(id)
+    {
+        let styleSheet = this._styleSheetIdentifierMap.get(id);
+        if (styleSheet)
+            return styleSheet;
+
+        styleSheet = new WebInspector.CSSStyleSheet(id);
+        this._styleSheetIdentifierMap.set(id, styleSheet);
+        return styleSheet;
+    }
+
+    stylesForNode(node)
+    {
+        if (node.id in this._nodeStylesMap)
+            return this._nodeStylesMap[node.id];
+
+        var styles = new WebInspector.DOMNodeStyles(node);
+        this._nodeStylesMap[node.id] = styles;
+        return styles;
+    }
+
+    preferredInspectorStyleSheetForFrame(frame, callback)
+    {
+        var inspectorStyleSheets = this._inspectorStyleSheetsForFrame(frame);
+        for (let styleSheet of inspectorStyleSheets) {
+            if (styleSheet[WebInspector.CSSStyleManager.PreferredInspectorStyleSheetSymbol]) {
+                callback(styleSheet);
+                return;
+            }
+        }
+
+        if (CSSAgent.createStyleSheet) {
+            CSSAgent.createStyleSheet(frame.id, function(error, styleSheetId) {
+                let styleSheet = WebInspector.cssStyleManager.styleSheetForIdentifier(styleSheetId);
+                styleSheet[WebInspector.CSSStyleManager.PreferredInspectorStyleSheetSymbol] = true;
+                callback(styleSheet);
+            });
+            return;
+        }
+
+        // COMPATIBILITY (iOS 9): CSS.createStyleSheet did not exist.
+        // Legacy backends can only create the Inspector StyleSheet through CSS.addRule.
+        // Exploit that to create the Inspector StyleSheet for the document.body node in
+        // this frame, then get the StyleSheet for the new rule.
+
+        let expression = appendWebInspectorSourceURL("document");
+        let contextId = frame.pageExecutionContext.id;
+        RuntimeAgent.evaluate.invoke({expression, objectGroup: "", includeCommandLineAPI: false, doNotPauseOnExceptionsAndMuteConsole: true, contextId, returnByValue: false, generatePreview: false}, documentAvailable);
+
+        function documentAvailable(error, documentRemoteObjectPayload)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+
+            let remoteObject = WebInspector.RemoteObject.fromPayload(documentRemoteObjectPayload);
+            remoteObject.pushNodeToFrontend(documentNodeAvailable.bind(null, remoteObject));
+        }
+
+        function documentNodeAvailable(remoteObject, documentNodeId)
+        {
+            remoteObject.release();
+
+            if (!documentNodeId) {
+                callback(null);
+                return;
+            }
+
+            DOMAgent.querySelector(documentNodeId, "body", bodyNodeAvailable);
+        }
+
+        function bodyNodeAvailable(error, bodyNodeId)
+        {
+            if (error) {
+                console.error(error);
+                callback(null);
+                return;
+            }
+
+            let selector = ""; // Intentionally empty.
+            CSSAgent.addRule(bodyNodeId, selector, cssRuleAvailable);
+        }
+
+        function cssRuleAvailable(error, payload)
+        {
+            if (error || !payload.ruleId) {
+                callback(null);
+                return;
+            }
+
+            let styleSheetId = payload.ruleId.styleSheetId;
+            let styleSheet = WebInspector.cssStyleManager.styleSheetForIdentifier(styleSheetId);
+            if (!styleSheet) {
+                callback(null);
+                return;
+            }
+
+            styleSheet[WebInspector.CSSStyleManager.PreferredInspectorStyleSheetSymbol] = true;
+
+            console.assert(styleSheet.isInspectorStyleSheet());
+            console.assert(styleSheet.parentFrame === frame);
+
+            callback(styleSheet);
+        }
+    }
+
+    // Protected
+
+    mediaQueryResultChanged()
+    {
+        // Called from WebInspector.CSSObserver.
+
+        for (var key in this._nodeStylesMap)
+            this._nodeStylesMap[key].mediaQueryResultDidChange();
+    }
+
+    styleSheetChanged(styleSheetIdentifier)
+    {
+        // Called from WebInspector.CSSObserver.
+        var styleSheet = this.styleSheetForIdentifier(styleSheetIdentifier);
+        console.assert(styleSheet);
+
+        // Do not observe inline styles
+        if (styleSheet.isInlineStyleAttributeStyleSheet())
+            return;
+
+        styleSheet.noteContentDidChange();
+        this._updateResourceContent(styleSheet);
+    }
+
+    styleSheetAdded(styleSheetInfo)
+    {
+        console.assert(!this._styleSheetIdentifierMap.has(styleSheetInfo.styleSheetId), "Attempted to add a CSSStyleSheet but identifier was already in use");
+        let styleSheet = this.styleSheetForIdentifier(styleSheetInfo.styleSheetId);
+        let parentFrame = WebInspector.frameResourceManager.frameForIdentifier(styleSheetInfo.frameId);
+        let origin = WebInspector.CSSStyleManager.protocolStyleSheetOriginToEnum(styleSheetInfo.origin);
+        styleSheet.updateInfo(styleSheetInfo.sourceURL, parentFrame, origin, styleSheetInfo.isInline, styleSheetInfo.startLine, styleSheetInfo.startColumn);
+
+        this.dispatchEventToListeners(WebInspector.CSSStyleManager.Event.StyleSheetAdded, {styleSheet});
+    }
+
+    styleSheetRemoved(styleSheetIdentifier)
+    {
+        let styleSheet = this._styleSheetIdentifierMap.get(styleSheetIdentifier);
+        console.assert(styleSheet, "Attempted to remove a CSSStyleSheet that was not tracked");
+        if (!styleSheet)
+            return;
+
+        this._styleSheetIdentifierMap.delete(styleSheetIdentifier);
+
+        this.dispatchEventToListeners(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, {styleSheet});
+    }
+
+    // Private
+
+    _inspectorStyleSheetsForFrame(frame)
+    {
+        let styleSheets = [];
+
+        for (let styleSheet of this.styleSheets) {
+            if (styleSheet.isInspectorStyleSheet() && styleSheet.parentFrame === frame)
+                styleSheets.push(styleSheet);
+        }
+
+        return styleSheets;
+    }
+
+    _nodePseudoClassesDidChange(event)
+    {
+        var node = event.target;
+
+        for (var key in this._nodeStylesMap) {
+            var nodeStyles = this._nodeStylesMap[key];
+            if (nodeStyles.node !== node && !nodeStyles.node.isDescendant(node))
+                continue;
+            nodeStyles.pseudoClassesDidChange(node);
+        }
+    }
+
+    _nodeAttributesDidChange(event)
+    {
+        var node = event.target;
+
+        for (var key in this._nodeStylesMap) {
+            var nodeStyles = this._nodeStylesMap[key];
+            if (nodeStyles.node !== node && !nodeStyles.node.isDescendant(node))
+                continue;
+            nodeStyles.attributeDidChange(node, event.data.name);
+        }
+    }
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        // Clear our maps when the main frame navigates.
+
+        this._fetchedInitialStyleSheets = window.CSSAgent && window.CSSAgent.hasEvent("styleSheetAdded");
+        this._styleSheetIdentifierMap.clear();
+        this._styleSheetFrameURLMap.clear();
+        this._nodeStylesMap = {};
+    }
+
+    _resourceAdded(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        var resource = event.data.resource;
+        console.assert(resource);
+
+        if (resource.type !== WebInspector.Resource.Type.Stylesheet)
+            return;
+
+        this._clearStyleSheetsForResource(resource);
+    }
+
+    _resourceTypeDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Resource);
+
+        var resource = event.target;
+        if (resource.type !== WebInspector.Resource.Type.Stylesheet)
+            return;
+
+        this._clearStyleSheetsForResource(resource);
+    }
+
+    _clearStyleSheetsForResource(resource)
+    {
+        // Clear known stylesheets for this URL and frame. This will cause the stylesheets to
+        // be updated next time _fetchInfoForAllStyleSheets is called.
+        this._styleSheetIdentifierMap.delete(this._frameURLMapKey(resource.parentFrame, resource.url));
+    }
+
+    _frameURLMapKey(frame, url)
+    {
+        return frame.id + ":" + url;
+    }
+
+    _lookupStyleSheetForResource(resource, callback)
+    {
+        this._lookupStyleSheet(resource.parentFrame, resource.url, callback);
+    }
+
+    _lookupStyleSheet(frame, url, callback)
+    {
+        console.assert(frame instanceof WebInspector.Frame);
+
+        let key = this._frameURLMapKey(frame, url);
+
+        function styleSheetsFetched()
+        {
+            callback(this._styleSheetFrameURLMap.get(key) || null);
+        }
+
+        let styleSheet = this._styleSheetFrameURLMap.get(key) || null;
+        if (styleSheet)
+            callback(styleSheet);
+        else
+            this._fetchInfoForAllStyleSheets(styleSheetsFetched.bind(this));
+    }
+
+    _fetchInfoForAllStyleSheets(callback)
+    {
+        console.assert(typeof callback === "function");
+
+        function processStyleSheets(error, styleSheets)
+        {
+            this._styleSheetFrameURLMap.clear();
+
+            if (error) {
+                callback();
+                return;
+            }
+
+            for (let styleSheetInfo of styleSheets) {
+                let parentFrame = WebInspector.frameResourceManager.frameForIdentifier(styleSheetInfo.frameId);
+                let origin = WebInspector.CSSStyleManager.protocolStyleSheetOriginToEnum(styleSheetInfo.origin);
+
+                // COMPATIBILITY (iOS 9): The info did not have 'isInline', 'startLine', and 'startColumn', so make false and 0 in these cases.
+                let isInline = styleSheetInfo.isInline || false;
+                let startLine = styleSheetInfo.startLine || 0;
+                let startColumn = styleSheetInfo.startColumn || 0;
+
+                let styleSheet = this.styleSheetForIdentifier(styleSheetInfo.styleSheetId);
+                styleSheet.updateInfo(styleSheetInfo.sourceURL, parentFrame, origin, isInline, startLine, startColumn);
+
+                let key = this._frameURLMapKey(parentFrame, styleSheetInfo.sourceURL);
+                this._styleSheetFrameURLMap.set(key, styleSheet);
+            }
+
+            callback();
+        }
+
+        CSSAgent.getAllStyleSheets(processStyleSheets.bind(this));
+    }
+
+    _resourceContentDidChange(event)
+    {
+        var resource = event.target;
+        if (resource === this._ignoreResourceContentDidChangeEventForResource)
+            return;
+
+        // Ignore if it isn't a CSS stylesheet.
+        if (resource.type !== WebInspector.Resource.Type.Stylesheet || resource.syntheticMIMEType !== "text/css")
+            return;
+
+        function applyStyleSheetChanges()
+        {
+            function styleSheetFound(styleSheet)
+            {
+                resource.__pendingChangeTimeout = undefined;
+
+                console.assert(styleSheet);
+                if (!styleSheet)
+                    return;
+
+                // To prevent updating a TextEditor's content while the user is typing in it we want to
+                // ignore the next _updateResourceContent call.
+                resource.__ignoreNextUpdateResourceContent = true;
+
+                WebInspector.branchManager.currentBranch.revisionForRepresentedObject(styleSheet).content = resource.content;
+            }
+
+            this._lookupStyleSheetForResource(resource, styleSheetFound.bind(this));
+        }
+
+        if (resource.__pendingChangeTimeout)
+            clearTimeout(resource.__pendingChangeTimeout);
+        resource.__pendingChangeTimeout = setTimeout(applyStyleSheetChanges.bind(this), 500);
+    }
+
+    _updateResourceContent(styleSheet)
+    {
+        console.assert(styleSheet);
+
+        function fetchedStyleSheetContent(parameters)
+        {
+            var styleSheet = parameters.sourceCode;
+            var content = parameters.content;
+
+            styleSheet.__pendingChangeTimeout = undefined;
+
+            console.assert(styleSheet.url);
+            if (!styleSheet.url)
+                return;
+
+            var resource = styleSheet.parentFrame.resourceForURL(styleSheet.url);;
+            if (!resource)
+                return;
+
+            // Only try to update stylesheet resources. Other resources, like documents, can contain
+            // multiple stylesheets and we don't have the source ranges to update those.
+            if (resource.type !== WebInspector.Resource.Type.Stylesheet)
+                return;
+
+            if (resource.__ignoreNextUpdateResourceContent) {
+                resource.__ignoreNextUpdateResourceContent = false;
+                return;
+            }
+
+            this._ignoreResourceContentDidChangeEventForResource = resource;
+            WebInspector.branchManager.currentBranch.revisionForRepresentedObject(resource).content = content;
+            this._ignoreResourceContentDidChangeEventForResource = null;
+        }
+
+        function styleSheetReady()
+        {
+            styleSheet.requestContent().then(fetchedStyleSheetContent.bind(this));
+        }
+
+        function applyStyleSheetChanges()
+        {
+            if (styleSheet.url)
+                styleSheetReady.call(this);
+            else
+                this._fetchInfoForAllStyleSheets(styleSheetReady.bind(this));
+        }
+
+        if (styleSheet.__pendingChangeTimeout)
+            clearTimeout(styleSheet.__pendingChangeTimeout);
+        styleSheet.__pendingChangeTimeout = setTimeout(applyStyleSheetChanges.bind(this), 500);
+    }
+};
+
+WebInspector.CSSStyleManager.Event = {
+    StyleSheetAdded: "css-style-manager-style-sheet-added",
+    StyleSheetRemoved: "css-style-manager-style-sheet-removed",
+};
+
+WebInspector.CSSStyleManager.PseudoElementNames = ["before", "after"];
+WebInspector.CSSStyleManager.ForceablePseudoClasses = ["active", "focus", "hover", "visited"];
+WebInspector.CSSStyleManager.PreferredInspectorStyleSheetSymbol = Symbol("css-style-manager-preferred-inspector-stylesheet");
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js
new file mode 100644
index 000000000..964b4a7b5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorBezierEditingController.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorBezierEditingController = class CodeMirrorBezierEditingController extends WebInspector.CodeMirrorEditingController
+{
+    constructor(codeMirror, marker)
+    {
+        super(codeMirror, marker);
+    }
+
+    // Public
+
+    get initialValue()
+    {
+        return WebInspector.CubicBezier.fromString(this.text);
+    }
+
+    get cssClassName()
+    {
+        return "cubic-bezier";
+    }
+
+    popoverWillPresent(popover)
+    {
+        this._bezierEditor = new WebInspector.BezierEditor;
+        this._bezierEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._bezierEditorBezierChanged, this);
+        popover.content = this._bezierEditor.element;
+    }
+
+    popoverDidPresent(popover)
+    {
+        this._bezierEditor.bezier = this.value;
+    }
+
+    // Private
+
+    _bezierEditorBezierChanged(event)
+    {
+        this.value = event.data.bezier;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js
new file mode 100644
index 000000000..4a75ca5b4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorColorEditingController = class CodeMirrorColorEditingController extends WebInspector.CodeMirrorEditingController
+{
+    constructor(codeMirror, marker)
+    {
+        super(codeMirror, marker);
+    }
+
+    // Public
+
+    get initialValue()
+    {
+        return WebInspector.Color.fromString(this.text);
+    }
+
+    get cssClassName()
+    {
+        return "color";
+    }
+
+    popoverWillPresent(popover)
+    {
+        this._colorPicker = new WebInspector.ColorPicker;
+        this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
+        popover.content = this._colorPicker.element;
+    }
+
+    popoverDidPresent(popover)
+    {
+        this._colorPicker.color = this._value;
+    }
+
+    // Private
+
+    _colorPickerColorChanged(event)
+    {
+        this.value = event.target.color;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.css b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.css
new file mode 100644
index 000000000..eff18cfb1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.css
@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.CodeMirror .CodeMirror-lines .completion-hint {
+    text-decoration: none !important;
+    opacity: 0.4;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js
new file mode 100644
index 000000000..617ff2aa3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorCompletionController.js
@@ -0,0 +1,854 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorCompletionController = class CodeMirrorCompletionController extends WebInspector.Object
+{
+    constructor(codeMirror, delegate, stopCharactersRegex)
+    {
+        super();
+
+        console.assert(codeMirror);
+
+        this._codeMirror = codeMirror;
+        this._stopCharactersRegex = stopCharactersRegex || null;
+        this._delegate = delegate || null;
+
+        this._startOffset = NaN;
+        this._endOffset = NaN;
+        this._lineNumber = NaN;
+        this._prefix = "";
+        this._noEndingSemicolon = false;
+        this._completions = [];
+        this._extendedCompletionProviders = {};
+
+        this._suggestionsView = new WebInspector.CompletionSuggestionsView(this);
+
+        this._keyMap = {
+            "Up": this._handleUpKey.bind(this),
+            "Down": this._handleDownKey.bind(this),
+            "Right": this._handleRightOrEnterKey.bind(this),
+            "Esc": this._handleEscapeKey.bind(this),
+            "Enter": this._handleRightOrEnterKey.bind(this),
+            "Tab": this._handleTabKey.bind(this),
+            "Cmd-A": this._handleHideKey.bind(this),
+            "Cmd-Z": this._handleHideKey.bind(this),
+            "Shift-Cmd-Z": this._handleHideKey.bind(this),
+            "Cmd-Y": this._handleHideKey.bind(this)
+        };
+
+        this._handleChangeListener = this._handleChange.bind(this);
+        this._handleCursorActivityListener = this._handleCursorActivity.bind(this);
+        this._handleHideActionListener = this._handleHideAction.bind(this);
+
+        this._codeMirror.addKeyMap(this._keyMap);
+
+        this._codeMirror.on("change", this._handleChangeListener);
+        this._codeMirror.on("cursorActivity", this._handleCursorActivityListener);
+        this._codeMirror.on("blur", this._handleHideActionListener);
+        this._codeMirror.on("scroll", this._handleHideActionListener);
+
+        this._updatePromise = null;
+    }
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    addExtendedCompletionProvider(modeName, provider)
+    {
+        this._extendedCompletionProviders[modeName] = provider;
+    }
+
+    updateCompletions(completions, implicitSuffix)
+    {
+        if (isNaN(this._startOffset) || isNaN(this._endOffset) || isNaN(this._lineNumber))
+            return;
+
+        if (!completions || !completions.length) {
+            this.hideCompletions();
+            return;
+        }
+
+        this._completions = completions;
+
+        if (typeof implicitSuffix === "string")
+            this._implicitSuffix = implicitSuffix;
+
+        var from = {line: this._lineNumber, ch: this._startOffset};
+        var to = {line: this._lineNumber, ch: this._endOffset};
+
+        var firstCharCoords = this._codeMirror.cursorCoords(from);
+        var lastCharCoords = this._codeMirror.cursorCoords(to);
+        var bounds = new WebInspector.Rect(firstCharCoords.left, firstCharCoords.top, lastCharCoords.right - firstCharCoords.left, firstCharCoords.bottom - firstCharCoords.top);
+
+        // Try to restore the previous selected index, otherwise just select the first.
+        var index = this._currentCompletion ? completions.indexOf(this._currentCompletion) : 0;
+        if (index === -1)
+            index = 0;
+
+        if (this._forced || completions.length > 1 || completions[index] !== this._prefix) {
+            // Update and show the suggestion list.
+            this._suggestionsView.update(completions, index);
+            this._suggestionsView.show(bounds);
+        } else if (this._implicitSuffix) {
+            // The prefix and the completion exactly match, but there is an implicit suffix.
+            // Just hide the suggestion list and keep the completion hint for the implicit suffix.
+            this._suggestionsView.hide();
+        } else {
+            // The prefix and the completion exactly match, hide the completions. Return early so
+            // the completion hint isn't updated.
+            this.hideCompletions();
+            return;
+        }
+
+        this._applyCompletionHint(completions[index]);
+
+        this._resolveUpdatePromise(WebInspector.CodeMirrorCompletionController.UpdatePromise.CompletionsFound);
+    }
+
+    isCompletionChange(change)
+    {
+        return this._ignoreChange || change.origin === WebInspector.CodeMirrorCompletionController.CompletionOrigin || change.origin === WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin;
+    }
+
+    isShowingCompletions()
+    {
+        return this._suggestionsView.visible || (this._completionHintMarker && this._completionHintMarker.find());
+    }
+
+    isHandlingClickEvent()
+    {
+        return this._suggestionsView.isHandlingClickEvent();
+    }
+
+    hideCompletions()
+    {
+        this._suggestionsView.hide();
+
+        this._removeCompletionHint();
+
+        this._startOffset = NaN;
+        this._endOffset = NaN;
+        this._lineNumber = NaN;
+        this._prefix = "";
+        this._completions = [];
+        this._implicitSuffix = "";
+        this._forced = false;
+
+        delete this._currentCompletion;
+        delete this._ignoreNextCursorActivity;
+
+        this._resolveUpdatePromise(WebInspector.CodeMirrorCompletionController.UpdatePromise.NoCompletionsFound);
+    }
+
+    close()
+    {
+        this._codeMirror.removeKeyMap(this._keyMap);
+
+        this._codeMirror.off("change", this._handleChangeListener);
+        this._codeMirror.off("cursorActivity", this._handleCursorActivityListener);
+        this._codeMirror.off("blur", this._handleHideActionListener);
+        this._codeMirror.off("scroll", this._handleHideActionListener);
+    }
+
+    completeAtCurrentPositionIfNeeded(force)
+    {
+        this._resolveUpdatePromise(WebInspector.CodeMirrorCompletionController.UpdatePromise.Canceled);
+
+        var update = this._updatePromise = new WebInspector.WrappedPromise;
+
+        this._completeAtCurrentPosition(force);
+
+        return update.promise;
+    }
+
+    // Protected
+
+    completionSuggestionsSelectedCompletion(suggestionsView, completionText)
+    {
+        this._applyCompletionHint(completionText);
+    }
+
+    completionSuggestionsClickedCompletion(suggestionsView, completionText)
+    {
+        // The clicked suggestion causes the editor to loose focus. Restore it so the user can keep typing.
+        this._codeMirror.focus();
+
+        this._applyCompletionHint(completionText);
+        this._commitCompletionHint();
+    }
+
+    set noEndingSemicolon(noEndingSemicolon)
+    {
+        this._noEndingSemicolon = noEndingSemicolon;
+    }
+
+    // Private
+
+    _resolveUpdatePromise(message)
+    {
+        if (!this._updatePromise)
+            return;
+
+        this._updatePromise.resolve(message);
+        this._updatePromise = null;
+    }
+
+    get _currentReplacementText()
+    {
+        return this._currentCompletion + this._implicitSuffix;
+    }
+
+    _hasPendingCompletion()
+    {
+        return !isNaN(this._startOffset) && !isNaN(this._endOffset) && !isNaN(this._lineNumber);
+    }
+
+    _notifyCompletionsHiddenSoon()
+    {
+        function notify()
+        {
+            if (this._completionHintMarker)
+                return;
+
+            if (this._delegate && typeof this._delegate.completionControllerCompletionsHidden === "function")
+                this._delegate.completionControllerCompletionsHidden(this);
+        }
+
+        if (this._notifyCompletionsHiddenIfNeededTimeout)
+            clearTimeout(this._notifyCompletionsHiddenIfNeededTimeout);
+        this._notifyCompletionsHiddenIfNeededTimeout = setTimeout(notify.bind(this), WebInspector.CodeMirrorCompletionController.CompletionsHiddenDelay);
+    }
+
+    _createCompletionHintMarker(position, text)
+    {
+        var container = document.createElement("span");
+        container.classList.add(WebInspector.CodeMirrorCompletionController.CompletionHintStyleClassName);
+        container.textContent = text;
+
+        this._completionHintMarker = this._codeMirror.setUniqueBookmark(position, {widget: container, insertLeft: true});
+    }
+
+    _applyCompletionHint(completionText)
+    {
+        console.assert(completionText);
+        if (!completionText)
+            return;
+
+        function update()
+        {
+            this._currentCompletion = completionText;
+
+            this._removeCompletionHint(true, true);
+
+            var replacementText = this._currentReplacementText;
+
+            var from = {line: this._lineNumber, ch: this._startOffset};
+            var cursor = {line: this._lineNumber, ch: this._endOffset};
+            var currentText = this._codeMirror.getRange(from, cursor);
+
+            this._createCompletionHintMarker(cursor, replacementText.replace(currentText, ""));
+        }
+
+        this._ignoreChange = true;
+        this._ignoreNextCursorActivity = true;
+
+        this._codeMirror.operation(update.bind(this));
+
+        delete this._ignoreChange;
+    }
+
+    _commitCompletionHint()
+    {
+        function update()
+        {
+            this._removeCompletionHint(true, true);
+
+            var replacementText = this._currentReplacementText;
+
+            var from = {line: this._lineNumber, ch: this._startOffset};
+            var cursor = {line: this._lineNumber, ch: this._endOffset};
+            var to = {line: this._lineNumber, ch: this._startOffset + replacementText.length};
+
+            var lastChar = this._currentCompletion.charAt(this._currentCompletion.length - 1);
+            var isClosing = ")]}".indexOf(lastChar);
+            if (isClosing !== -1)
+                to.ch -= 1 + this._implicitSuffix.length;
+
+            this._codeMirror.replaceRange(replacementText, from, cursor, WebInspector.CodeMirrorCompletionController.CompletionOrigin);
+
+            // Don't call _removeLastChangeFromHistory here to allow the committed completion to be undone.
+
+            this._codeMirror.setCursor(to);
+
+            this.hideCompletions();
+        }
+
+        this._ignoreChange = true;
+        this._ignoreNextCursorActivity = true;
+
+        this._codeMirror.operation(update.bind(this));
+
+        delete this._ignoreChange;
+    }
+
+    _removeLastChangeFromHistory()
+    {
+        var history = this._codeMirror.getHistory();
+
+        // We don't expect a undone history. But if there is one clear it. If could lead to undefined behavior.
+        console.assert(!history.undone.length);
+        history.undone = [];
+
+        // Pop the last item from the done history.
+        console.assert(history.done.length);
+        history.done.pop();
+
+        this._codeMirror.setHistory(history);
+    }
+
+    _removeCompletionHint(nonatomic, dontRestorePrefix)
+    {
+        if (!this._completionHintMarker)
+            return;
+
+        this._notifyCompletionsHiddenSoon();
+
+        function clearMarker(marker)
+        {
+            if (!marker)
+                return;
+
+            var range = marker.find();
+            if (range)
+                marker.clear();
+
+            return null;
+        }
+
+        function update()
+        {
+            this._completionHintMarker = clearMarker(this._completionHintMarker);
+
+            if (dontRestorePrefix)
+                return;
+
+            console.assert(!isNaN(this._startOffset));
+            console.assert(!isNaN(this._endOffset));
+            console.assert(!isNaN(this._lineNumber));
+
+            var from = {line: this._lineNumber, ch: this._startOffset};
+            var to = {line: this._lineNumber, ch: this._endOffset};
+
+            this._codeMirror.replaceRange(this._prefix, from, to, WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin);
+            this._removeLastChangeFromHistory();
+        }
+
+        if (nonatomic) {
+            update.call(this);
+            return;
+        }
+
+        this._ignoreChange = true;
+
+        this._codeMirror.operation(update.bind(this));
+
+        delete this._ignoreChange;
+    }
+
+    _scanStringForExpression(modeName, string, startOffset, direction, allowMiddleAndEmpty, includeStopCharacter, ignoreInitialUnmatchedOpenBracket, stopCharactersRegex)
+    {
+        console.assert(direction === -1 || direction === 1);
+
+        var stopCharactersRegex = stopCharactersRegex || this._stopCharactersRegex || WebInspector.CodeMirrorCompletionController.DefaultStopCharactersRegexModeMap[modeName] || WebInspector.CodeMirrorCompletionController.GenericStopCharactersRegex;
+
+        function isStopCharacter(character)
+        {
+            return stopCharactersRegex.test(character);
+        }
+
+        function isOpenBracketCharacter(character)
+        {
+            return WebInspector.CodeMirrorCompletionController.OpenBracketCharactersRegex.test(character);
+        }
+
+        function isCloseBracketCharacter(character)
+        {
+            return WebInspector.CodeMirrorCompletionController.CloseBracketCharactersRegex.test(character);
+        }
+
+        function matchingBracketCharacter(character)
+        {
+            return WebInspector.CodeMirrorCompletionController.MatchingBrackets[character];
+        }
+
+        var endOffset = Math.min(startOffset, string.length);
+
+        var endOfLineOrWord = endOffset === string.length || isStopCharacter(string.charAt(endOffset));
+
+        if (!endOfLineOrWord && !allowMiddleAndEmpty)
+            return null;
+
+        var bracketStack = [];
+        var bracketOffsetStack = [];
+        var lastCloseBracketOffset = NaN;
+
+        var startOffset = endOffset;
+        var firstOffset = endOffset + direction;
+        for (var i = firstOffset; direction > 0 ? i < string.length : i >= 0; i += direction) {
+            var character = string.charAt(i);
+
+            // Ignore stop characters when we are inside brackets.
+            if (isStopCharacter(character) && !bracketStack.length)
+                break;
+
+            if (isCloseBracketCharacter(character)) {
+                bracketStack.push(character);
+                bracketOffsetStack.push(i);
+            } else if (isOpenBracketCharacter(character)) {
+                if ((!ignoreInitialUnmatchedOpenBracket || i !== firstOffset) && (!bracketStack.length || matchingBracketCharacter(character) !== bracketStack.lastValue))
+                    break;
+
+                bracketOffsetStack.pop();
+                bracketStack.pop();
+            }
+
+            startOffset = i + (direction > 0 ? 1 : 0);
+        }
+
+        if (bracketOffsetStack.length)
+            startOffset = bracketOffsetStack.pop() + 1;
+
+        if (includeStopCharacter && startOffset > 0 && startOffset < string.length)
+            startOffset += direction;
+
+        if (direction > 0) {
+            var tempEndOffset = endOffset;
+            endOffset = startOffset;
+            startOffset = tempEndOffset;
+        }
+
+        return {string: string.substring(startOffset, endOffset), startOffset, endOffset};
+    }
+
+    _completeAtCurrentPosition(force)
+    {
+        if (this._codeMirror.somethingSelected()) {
+            this.hideCompletions();
+            return;
+        }
+
+        this._removeCompletionHint(true, true);
+
+        var cursor = this._codeMirror.getCursor();
+        var token = this._codeMirror.getTokenAt(cursor);
+
+        // Don't try to complete inside comments.
+        if (token.type && /\bcomment\b/.test(token.type)) {
+            this.hideCompletions();
+            return;
+        }
+
+        var mode = this._codeMirror.getMode();
+        var innerMode = CodeMirror.innerMode(mode, token.state).mode;
+        var modeName = innerMode.alternateName || innerMode.name;
+
+        var lineNumber = cursor.line;
+        var lineString = this._codeMirror.getLine(lineNumber);
+
+        var backwardScanResult = this._scanStringForExpression(modeName, lineString, cursor.ch, -1, force);
+        if (!backwardScanResult) {
+            this.hideCompletions();
+            return;
+        }
+
+        var forwardScanResult = this._scanStringForExpression(modeName, lineString, cursor.ch, 1, true, true);
+        var suffix = forwardScanResult.string;
+
+        this._ignoreNextCursorActivity = true;
+
+        this._startOffset = backwardScanResult.startOffset;
+        this._endOffset = backwardScanResult.endOffset;
+        this._lineNumber = lineNumber;
+        this._prefix = backwardScanResult.string;
+        this._completions = [];
+        this._implicitSuffix = "";
+        this._forced = force;
+
+        var baseExpressionStopCharactersRegex = WebInspector.CodeMirrorCompletionController.BaseExpressionStopCharactersRegexModeMap[modeName];
+        if (baseExpressionStopCharactersRegex)
+            var baseScanResult = this._scanStringForExpression(modeName, lineString, this._startOffset, -1, true, false, true, baseExpressionStopCharactersRegex);
+
+        if (!force && !backwardScanResult.string && (!baseScanResult || !baseScanResult.string)) {
+            this.hideCompletions();
+            return;
+        }
+
+        var defaultCompletions = [];
+
+        switch (modeName) {
+        case "css":
+            defaultCompletions = this._generateCSSCompletions(token, baseScanResult ? baseScanResult.string : null, suffix);
+            break;
+        case "javascript":
+            defaultCompletions = this._generateJavaScriptCompletions(token, baseScanResult ? baseScanResult.string : null, suffix);
+            break;
+        }
+
+        var extendedCompletionsProvider = this._extendedCompletionProviders[modeName];
+        if (extendedCompletionsProvider) {
+            extendedCompletionsProvider.completionControllerCompletionsNeeded(this, defaultCompletions, baseScanResult ? baseScanResult.string : null, this._prefix, suffix, force);
+            return;
+        }
+
+        if (this._delegate && typeof this._delegate.completionControllerCompletionsNeeded === "function")
+            this._delegate.completionControllerCompletionsNeeded(this, this._prefix, defaultCompletions, baseScanResult ? baseScanResult.string : null, suffix, force);
+        else
+            this.updateCompletions(defaultCompletions);
+    }
+
+    _generateCSSCompletions(mainToken, base, suffix)
+    {
+        // We only support completion inside CSS block context.
+        if (mainToken.state.state === "media" || mainToken.state.state === "top" || mainToken.state.state === "parens")
+            return [];
+
+        var token = mainToken;
+        var lineNumber = this._lineNumber;
+
+        // Scan backwards looking for the current property.
+        while (token.state.state === "prop") {
+            // Found the beginning of the line. Go to the previous line.
+            if (!token.start) {
+                --lineNumber;
+
+                // No more lines, stop.
+                if (lineNumber < 0)
+                    break;
+            }
+
+            // Get the previous token.
+            token = this._codeMirror.getTokenAt({line: lineNumber, ch: token.start ? token.start : Number.MAX_VALUE});
+        }
+
+        // If we have a property token and it's not the main token, then we are working on
+        // the value for that property and should complete allowed values.
+        if (mainToken !== token && token.type && /\bproperty\b/.test(token.type)) {
+            var propertyName = token.string;
+
+            // If there is a suffix and it isn't a semicolon, then we should use a space since
+            // the user is editing in the middle.
+            this._implicitSuffix = suffix && suffix !== ";" ? " " : (this._noEndingSemicolon ? "" : ";");
+
+            // Don't use an implicit suffix if it would be the same as the existing suffix.
+            if (this._implicitSuffix === suffix)
+                this._implicitSuffix = "";
+
+            return WebInspector.CSSKeywordCompletions.forProperty(propertyName).startsWith(this._prefix);
+        }
+
+        this._implicitSuffix = suffix !== ":" ? ": " : "";
+
+        // Complete property names.
+        return WebInspector.CSSCompletions.cssNameCompletions.startsWith(this._prefix);
+    }
+
+    _generateJavaScriptCompletions(mainToken, base, suffix)
+    {
+        // If there is a base expression then we should not attempt to match any keywords or variables.
+        // Allow only open bracket characters at the end of the base, otherwise leave completions with
+        // a base up to the delegate to figure out.
+        if (base && !/[({[]$/.test(base))
+            return [];
+
+        var matchingWords = [];
+
+        var prefix = this._prefix;
+
+        var localState = mainToken.state.localState ? mainToken.state.localState : mainToken.state;
+
+        var declaringVariable = localState.lexical.type === "vardef";
+        var insideSwitch = localState.lexical.prev ? localState.lexical.prev.info === "switch" : false;
+        var insideBlock = localState.lexical.prev ? localState.lexical.prev.type === "}" : false;
+        var insideParenthesis = localState.lexical.type === ")";
+        var insideBrackets = localState.lexical.type === "]";
+
+        var allKeywords = ["break", "case", "catch", "const", "continue", "debugger", "default", "delete", "do", "else", "false", "finally", "for", "function", "if", "in",
+            "Infinity", "instanceof", "NaN", "new", "null", "return", "switch", "this", "throw", "true", "try", "typeof", "undefined", "var", "void", "while", "with"];
+        var valueKeywords = ["false", "Infinity", "NaN", "null", "this", "true", "undefined"];
+
+        var allowedKeywordsInsideBlocks = allKeywords.keySet();
+        var allowedKeywordsWhenDeclaringVariable = valueKeywords.keySet();
+        var allowedKeywordsInsideParenthesis = valueKeywords.concat(["function"]).keySet();
+        var allowedKeywordsInsideBrackets = allowedKeywordsInsideParenthesis;
+        var allowedKeywordsOnlyInsideSwitch = ["case", "default"].keySet();
+
+        function matchKeywords(keywords)
+        {
+            matchingWords = matchingWords.concat(keywords.filter(function(word) {
+                if (!insideSwitch && word in allowedKeywordsOnlyInsideSwitch)
+                    return false;
+                if (insideBlock && !(word in allowedKeywordsInsideBlocks))
+                    return false;
+                if (insideBrackets && !(word in allowedKeywordsInsideBrackets))
+                    return false;
+                if (insideParenthesis && !(word in allowedKeywordsInsideParenthesis))
+                    return false;
+                if (declaringVariable && !(word in allowedKeywordsWhenDeclaringVariable))
+                    return false;
+                return word.startsWith(prefix);
+            }));
+        }
+
+        function matchVariables()
+        {
+            function filterVariables(variables)
+            {
+                for (var variable = variables; variable; variable = variable.next) {
+                    // Don't match the variable if this token is in a variable declaration.
+                    // Otherwise the currently typed text will always match and that isn't useful.
+                    if (declaringVariable && variable.name === prefix)
+                        continue;
+
+                    if (variable.name.startsWith(prefix) && !matchingWords.includes(variable.name))
+                        matchingWords.push(variable.name);
+                }
+            }
+
+            var context = localState.context;
+            while (context) {
+                if (context.vars)
+                    filterVariables(context.vars);
+                context = context.prev;
+            }
+
+            if (localState.localVars)
+                filterVariables(localState.localVars);
+            if (localState.globalVars)
+                filterVariables(localState.globalVars);
+        }
+
+        switch (suffix.substring(0, 1)) {
+        case "":
+        case " ":
+            matchVariables();
+            matchKeywords(allKeywords);
+            break;
+
+        case ".":
+        case "[":
+            matchVariables();
+            matchKeywords(["false", "Infinity", "NaN", "this", "true"]);
+            break;
+
+        case "(":
+            matchVariables();
+            matchKeywords(["catch", "else", "for", "function", "if", "return", "switch", "throw", "while", "with"]);
+            break;
+
+        case "{":
+            matchKeywords(["do", "else", "finally", "return", "try"]);
+            break;
+
+        case ":":
+            if (insideSwitch)
+                matchKeywords(["case", "default"]);
+            break;
+
+        case ";":
+            matchVariables();
+            matchKeywords(valueKeywords);
+            matchKeywords(["break", "continue", "debugger", "return", "void"]);
+            break;
+        }
+
+        return matchingWords;
+    }
+
+    _handleUpKey(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        this._suggestionsView.selectPrevious();
+    }
+
+    _handleDownKey(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        this._suggestionsView.selectNext();
+    }
+
+    _handleRightOrEnterKey(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        this._commitCompletionHint();
+    }
+
+    _handleEscapeKey(codeMirror)
+    {
+        var delegateImplementsShouldAllowEscapeCompletion = this._delegate && typeof this._delegate.completionControllerShouldAllowEscapeCompletion === "function";
+        if (this._hasPendingCompletion())
+            this.hideCompletions();
+        else if (this._codeMirror.getOption("readOnly"))
+            return CodeMirror.Pass;
+        else if (!delegateImplementsShouldAllowEscapeCompletion || this._delegate.completionControllerShouldAllowEscapeCompletion(this))
+            this._completeAtCurrentPosition(true);
+        else
+            return CodeMirror.Pass;
+    }
+
+    _handleTabKey(codeMirror)
+    {
+        if (!this._hasPendingCompletion())
+            return CodeMirror.Pass;
+
+        if (!this.isShowingCompletions())
+            return;
+
+        console.assert(this._completions.length);
+        if (!this._completions.length)
+            return;
+
+        console.assert(this._currentCompletion);
+        if (!this._currentCompletion)
+            return;
+
+        // Commit the current completion if there is only one suggestion.
+        if (this._completions.length === 1) {
+            this._commitCompletionHint();
+            return;
+        }
+
+        var prefixLength = this._prefix.length;
+
+        var commonPrefix = this._completions[0];
+        for (var i = 1; i < this._completions.length; ++i) {
+            var completion = this._completions[i];
+            var lastIndex = Math.min(commonPrefix.length, completion.length);
+            for (var j = prefixLength; j < lastIndex; ++j) {
+                if (commonPrefix[j] !== completion[j]) {
+                    commonPrefix = commonPrefix.substr(0, j);
+                    break;
+                }
+            }
+        }
+
+        // Commit the current completion if there is no common prefix that is longer.
+        if (commonPrefix === this._prefix) {
+            this._commitCompletionHint();
+            return;
+        }
+
+        // Set the prefix to the common prefix so _applyCompletionHint will insert the
+        // common prefix as commited text. Adjust _endOffset to match the new prefix.
+        this._prefix = commonPrefix;
+        this._endOffset = this._startOffset + commonPrefix.length;
+
+        this._applyCompletionHint(this._currentCompletion);
+    }
+
+    _handleChange(codeMirror, change)
+    {
+        if (this.isCompletionChange(change))
+            return;
+
+        this._ignoreNextCursorActivity = true;
+
+        if (!change.origin || change.origin.charAt(0) !== "+") {
+            this.hideCompletions();
+            return;
+        }
+
+        // Only complete on delete if we are showing completions already.
+        if (change.origin === "+delete" && !this._hasPendingCompletion())
+            return;
+
+        this._completeAtCurrentPosition(false);
+    }
+
+    _handleCursorActivity(codeMirror)
+    {
+        if (this._ignoreChange)
+            return;
+
+        if (this._ignoreNextCursorActivity) {
+            delete this._ignoreNextCursorActivity;
+            return;
+        }
+
+        this.hideCompletions();
+    }
+
+    _handleHideKey(codeMirror)
+    {
+        this.hideCompletions();
+
+        return CodeMirror.Pass;
+    }
+
+    _handleHideAction(codeMirror)
+    {
+        // Clicking a suggestion causes the editor to blur. We don't want to hide completions in this case.
+        if (this.isHandlingClickEvent())
+            return;
+
+        this.hideCompletions();
+    }
+};
+
+WebInspector.CodeMirrorCompletionController.UpdatePromise = {
+    Canceled: "code-mirror-completion-controller-canceled",
+    CompletionsFound: "code-mirror-completion-controller-completions-found",
+    NoCompletionsFound: "code-mirror-completion-controller-no-completions-found"
+};
+
+WebInspector.CodeMirrorCompletionController.GenericStopCharactersRegex = /[\s=:;,]/;
+WebInspector.CodeMirrorCompletionController.DefaultStopCharactersRegexModeMap = {"css": /[\s:;,{}()]/, "javascript": /[\s=:;,!+\-*/%&|^~?<>.{}()[\]]/};
+WebInspector.CodeMirrorCompletionController.BaseExpressionStopCharactersRegexModeMap = {"javascript": /[\s=:;,!+\-*/%&|^~?<>]/};
+WebInspector.CodeMirrorCompletionController.OpenBracketCharactersRegex = /[({[]/;
+WebInspector.CodeMirrorCompletionController.CloseBracketCharactersRegex = /[)}\]]/;
+WebInspector.CodeMirrorCompletionController.MatchingBrackets = {"{": "}", "(": ")", "[": "]", "}": "{", ")": "(", "]": "["};
+WebInspector.CodeMirrorCompletionController.CompletionHintStyleClassName = "completion-hint";
+WebInspector.CodeMirrorCompletionController.CompletionsHiddenDelay = 250;
+WebInspector.CodeMirrorCompletionController.CompletionTypingDelay = 250;
+WebInspector.CodeMirrorCompletionController.CompletionOrigin = "+completion";
+WebInspector.CodeMirrorCompletionController.DeleteCompletionOrigin = "+delete-completion";
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorDragToAdjustNumberController.css
index d67d6b361..d67d6b361 100644
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorDragToAlterNumberController.css
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorDragToAdjustNumberController.css
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorDragToAdjustNumberController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorDragToAdjustNumberController.js
new file mode 100644
index 000000000..a8105998a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorDragToAdjustNumberController.js
@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorDragToAdjustNumberController = class CodeMirrorDragToAdjustNumberController extends WebInspector.Object
+{
+    constructor(codeMirror)
+    {
+        super();
+
+        this._codeMirror = codeMirror;
+
+        this._dragToAdjustController = new WebInspector.DragToAdjustController(this);
+    }
+
+    // Public
+
+    get enabled()
+    {
+        return this._dragToAdjustController.enabled;
+    }
+
+    set enabled(enabled)
+    {
+        if (this.enabled === enabled)
+            return;
+
+        this._dragToAdjustController.element = this._codeMirror.getWrapperElement();
+        this._dragToAdjustController.enabled = enabled;
+    }
+
+    // Protected
+
+    dragToAdjustControllerActiveStateChanged(dragToAdjustController)
+    {
+        if (!dragToAdjustController.active)
+            this._hoveredTokenInfo = null;
+    }
+
+    dragToAdjustControllerCanBeActivated(dragToAdjustController)
+    {
+        return !this._codeMirror.getOption("readOnly");
+    }
+
+    dragToAdjustControllerCanBeAdjusted(dragToAdjustController)
+    {
+
+        return this._hoveredTokenInfo && this._hoveredTokenInfo.containsNumber;
+    }
+
+    dragToAdjustControllerWasAdjustedByAmount(dragToAdjustController, amount)
+    {
+        this._codeMirror.alterNumberInRange(amount, this._hoveredTokenInfo.startPosition, this._hoveredTokenInfo.endPosition, false);
+    }
+
+    dragToAdjustControllerDidReset(dragToAdjustController)
+    {
+        this._hoveredTokenInfo = null;
+    }
+
+    dragToAdjustControllerCanAdjustObjectAtPoint(dragToAdjustController, point)
+    {
+        var position = this._codeMirror.coordsChar({left: point.x, top: point.y});
+        var token = this._codeMirror.getTokenAt(position);
+
+        if (!token || !token.type || !token.string) {
+            if (this._hoveredTokenInfo)
+                dragToAdjustController.reset();
+            return false;
+        }
+
+        // Stop right here if we're hovering the same token as we were last time.
+        if (this._hoveredTokenInfo && this._hoveredTokenInfo.line === position.line &&
+            this._hoveredTokenInfo.token.start === token.start && this._hoveredTokenInfo.token.end === token.end)
+            return this._hoveredTokenInfo.token.type.indexOf("number") !== -1;
+
+        var containsNumber = token.type.indexOf("number") !== -1;
+        this._hoveredTokenInfo = {
+            token,
+            line: position.line,
+            containsNumber,
+            startPosition: {
+                ch: token.start,
+                line: position.line
+            },
+            endPosition: {
+                ch: token.end,
+                line: position.line
+            }
+        };
+
+        return containsNumber;
+    }
+};
+
+CodeMirror.defineOption("dragToAdjustNumbers", true, function(codeMirror, value, oldValue) {
+    if (!codeMirror.dragToAdjustNumberController)
+        codeMirror.dragToAdjustNumberController = new WebInspector.CodeMirrorDragToAdjustNumberController(codeMirror);
+    codeMirror.dragToAdjustNumberController.enabled = value;
+});
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorEditingController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorEditingController.js
new file mode 100644
index 000000000..6902ca6b9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorEditingController.js
@@ -0,0 +1,188 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorEditingController = class CodeMirrorEditingController extends WebInspector.Object
+{
+    constructor(codeMirror, marker)
+    {
+        super();
+
+        this._codeMirror = codeMirror;
+        this._marker = marker;
+        this._delegate = null;
+
+        this._range = marker.range;
+
+        // The value must support .toString() and .copy() methods.
+        this._value = this.initialValue;
+
+        this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
+    }
+
+    // Public
+
+    get marker()
+    {
+        return this._marker;
+    }
+
+    get range()
+    {
+        return this._range;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    set value(value)
+    {
+        this.text = value.toString();
+        this._value = value;
+    }
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    set delegate(delegate)
+    {
+        this._delegate = delegate;
+    }
+
+    get text()
+    {
+        var from = {line: this._range.startLine, ch: this._range.startColumn};
+        var to = {line: this._range.endLine, ch: this._range.endColumn};
+        return this._codeMirror.getRange(from, to);
+    }
+
+    set text(text)
+    {
+        var from = {line: this._range.startLine, ch: this._range.startColumn};
+        var to = {line: this._range.endLine, ch: this._range.endColumn};
+        this._codeMirror.replaceRange(text, from, to);
+
+        var lines = text.split("\n");
+        var endLine = this._range.startLine + lines.length - 1;
+        var endColumn = lines.length > 1 ? lines.lastValue.length : this._range.startColumn + text.length;
+        this._range = new WebInspector.TextRange(this._range.startLine, this._range.startColumn, endLine, endColumn);
+    }
+
+    get initialValue()
+    {
+        // Implemented by subclasses.
+        return this.text;
+    }
+
+    get cssClassName()
+    {
+        // Implemented by subclasses.
+        return "";
+    }
+
+    get popover()
+    {
+        return this._popover;
+    }
+
+    get popoverPreferredEdges()
+    {
+        // Best to display the popover to the left or above the edited range since its end position may change, but not its start
+        // position. This way we minimize the chances of overlaying the edited range as it changes.
+        return [WebInspector.RectEdge.MIN_X, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MAX_X];
+    }
+
+    popoverTargetFrameWithRects(rects)
+    {
+        return WebInspector.Rect.unionOfRects(rects);
+    }
+
+    presentHoverMenu()
+    {
+        this._hoverMenu = new WebInspector.HoverMenu(this);
+        this._hoverMenu.element.classList.add(this.cssClassName);
+        this._rects = this._marker.rects;
+        this._hoverMenu.present(this._rects);
+    }
+
+    dismissHoverMenu(discrete)
+    {
+        this._hoverMenu.dismiss(discrete);
+    }
+
+    popoverWillPresent(popover)
+    {
+        // Implemented by subclasses.
+    }
+
+    popoverDidPresent(popover)
+    {
+        // Implemented by subclasses.
+    }
+
+    // Protected
+
+    handleKeydownEvent(event)
+    {
+        if (!this._keyboardShortcutEsc.matchesEvent(event) || !this._popover.visible)
+            return false;
+
+        this.value = this._originalValue;
+        this._popover.dismiss();
+
+        return true;
+    }
+
+    hoverMenuButtonWasPressed(hoverMenu)
+    {
+        this._popover = new WebInspector.Popover(this);
+        this.popoverWillPresent(this._popover);
+        this._popover.present(this.popoverTargetFrameWithRects(this._rects).pad(2), this.popoverPreferredEdges);
+        this.popoverDidPresent(this._popover);
+
+        WebInspector.addWindowKeydownListener(this);
+
+        hoverMenu.dismiss();
+
+        if (this._delegate && typeof this._delegate.editingControllerDidStartEditing === "function")
+            this._delegate.editingControllerDidStartEditing(this);
+
+        this._originalValue = this._value.copy();
+    }
+
+    didDismissPopover(popover)
+    {
+        delete this._popover;
+        delete this._originalValue;
+
+        WebInspector.removeWindowKeydownListener(this);
+
+        if (this._delegate && typeof this._delegate.editingControllerDidFinishEditing === "function")
+            this._delegate.editingControllerDidFinishEditing(this);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.js
new file mode 100644
index 000000000..7ff38e0e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorGradientEditingController.js
@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorGradientEditingController = class CodeMirrorGradientEditingController extends WebInspector.CodeMirrorEditingController
+{
+    constructor(codeMirror, marker)
+    {
+        super(codeMirror, marker);
+    }
+
+    // Public
+
+    get initialValue()
+    {
+        return WebInspector.Gradient.fromString(this.text);
+    }
+
+    get cssClassName()
+    {
+        return "gradient";
+    }
+
+    get popoverPreferredEdges()
+    {
+        // Since the gradient editor can resize to be quite tall, let's avoid displaying the popover
+        // above the edited value so that it may not change which edge it attaches to upon editing a stop.
+        return [WebInspector.RectEdge.MIN_X, WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MAX_X];
+    }
+
+    popoverTargetFrameWithRects(rects)
+    {
+        // If a gradient is defined across several lines, we probably want to use the first line only
+        // as a target frame for the editor since we may reformat the gradient value to fit on a single line.
+        return rects[0];
+    }
+
+    popoverWillPresent(popover)
+    {
+        function handleColorPickerToggled(event)
+        {
+            popover.update();
+        }
+
+        this._gradientEditor = new WebInspector.GradientEditor;
+        this._gradientEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._gradientEditorGradientChanged, this);
+        this._gradientEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, handleColorPickerToggled, this);
+        popover.content = this._gradientEditor.element;
+    }
+
+    popoverDidPresent(popover)
+    {
+        this._gradientEditor.gradient = this.value;
+    }
+
+    // Private
+
+    _gradientEditorGradientChanged(event)
+    {
+        this.value = event.data.gradient;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTextKillController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTextKillController.js
new file mode 100644
index 000000000..e453631bb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTextKillController.js
@@ -0,0 +1,139 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorTextKillController = class CodeMirrorTextKillController extends WebInspector.Object
+{
+    constructor(codeMirror)
+    {
+        super();
+
+        console.assert(codeMirror);
+
+        this._codeMirror = codeMirror;
+        this._expectingChangeEventForKill = false;
+        this._nextKillStartsNewSequence = true;
+        this._shouldPrependToKillRing = false;
+
+        this._handleTextChangeListener = this._handleTextChange.bind(this);
+        this._handleEditorBlurListener = this._handleEditorBlur.bind(this);
+        this._handleSelectionOrCaretChangeListener = this._handleSelectionOrCaretChange.bind(this);
+
+        // FIXME: these keybindings match CodeMirror's default keymap for OS X.
+        // They should probably be altered for Windows / Linux someday.
+        this._codeMirror.addKeyMap({
+            // Overrides for the 'emacsy' keymap.
+            "Ctrl-K": this._handleTextKillCommand.bind(this, "killLine", false),
+            "Alt-D": this._handleTextKillCommand.bind(this, "delWordAfter", false),
+            "Cmd-D": this._handleTextKillCommand.bind(this, "deleteLine", false),
+            // Overrides for the 'macDefault' keymap.
+            "Alt-Delete": this._handleTextKillCommand.bind(this, "delGroupAfter", false),
+            "Cmd-Backspace": this._handleTextKillCommand.bind(this, "delWrappedLineLeft", true),
+            "Cmd-Delete": this._handleTextKillCommand.bind(this, "delWrappedLineRight", false),
+            "Alt-Backspace": this._handleTextKillCommand.bind(this, "delGroupBefore", true),
+            "Ctrl-Alt-Backspace": this._handleTextKillCommand.bind(this, "delGroupAfter", false),
+        });
+    }
+
+    _handleTextKillCommand(command, prependsToKillRing, codeMirror)
+    {
+        // Read-only mode is dynamic in some editors, so check every time
+        // and ignore the shortcut if in read-only mode.
+        if (this._codeMirror.getOption("readOnly"))
+            return;
+
+        this._shouldPrependToKillRing = prependsToKillRing;
+
+        // Don't add the listener if it's still registered because
+        // a previous empty kill didn't generate change events.
+        if (!this._expectingChangeEventForKill)
+            this._codeMirror.on("changes", this._handleTextChangeListener);
+
+        this._expectingChangeEventForKill = true;
+        this._codeMirror.execCommand(command);
+    }
+
+    _handleTextChange(codeMirror, changes)
+    {
+        this._codeMirror.off("changes", this._handleTextChangeListener);
+
+        // Sometimes a second change event fires after removing the listener
+        // if you perform an "empty kill" and type after moving the caret.
+        if (!this._expectingChangeEventForKill)
+            return;
+
+        this._expectingChangeEventForKill = false;
+
+        // It doesn't make sense to get more than one change per kill.
+        console.assert(changes.length === 1);
+        let change = changes[0];
+
+        // If an "empty kill" is followed by up/down or typing,
+        // the empty kill won't fire a change event, then we'll get an
+        // unrelated change event that shouldn't be treated as a kill.
+        if (change.origin !== "+delete")
+            return;
+
+        // When killed text includes a newline, CodeMirror returns
+        // strange change objects. Special-case for when this could happen.
+        let killedText;
+        if (change.to.line === change.from.line + 1 && change.removed.length === 2) {
+            // An entire line was deleted, including newline (Cmd-D).
+            if (change.removed[0].length && !change.removed[1].length) 
+                killedText = change.removed[0] + "\n";
+            // A newline was killed by itself (Ctrl-K).
+            else
+                killedText = "\n";
+        } else {
+            console.assert(change.removed.length === 1);
+            killedText = change.removed[0];
+        }
+
+        InspectorFrontendHost.killText(killedText, this._shouldPrependToKillRing, this._nextKillStartsNewSequence);
+
+        // If the editor loses focus or the caret / selection changes
+        // (not as a result of the kill), then the next kill should
+        // start a new kill ring sequence.
+        this._nextKillStartsNewSequence = false;
+        this._codeMirror.on("blur", this._handleEditorBlurListener);
+        this._codeMirror.on("cursorActivity", this._handleSelectionOrCaretChangeListener);
+    }
+
+    _handleEditorBlur(codeMirror)
+    {
+        this._nextKillStartsNewSequence = true;
+        this._codeMirror.off("blur", this._handleEditorBlurListener);
+        this._codeMirror.off("cursorActivity", this._handleSelectionOrCaretChangeListener);
+    }
+
+    _handleSelectionOrCaretChange(codeMirror)
+    {
+        if (this._expectingChangeEventForKill)
+            return;
+
+        this._nextKillStartsNewSequence = true;
+        this._codeMirror.off("blur", this._handleEditorBlurListener);
+        this._codeMirror.off("cursorActivity", this._handleSelectionOrCaretChangeListener);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.css b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.css
index 516755d1c..516755d1c 100644
--- a/Source/WebInspectorUI/UserInterface/CodeMirrorTokenTrackingController.css
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.css
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.js b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.js
new file mode 100644
index 000000000..b263ca82b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorTokenTrackingController.js
@@ -0,0 +1,595 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorTokenTrackingController = class CodeMirrorTokenTrackingController extends WebInspector.Object
+{
+    constructor(codeMirror, delegate)
+    {
+        super();
+
+        console.assert(codeMirror);
+
+        this._codeMirror = codeMirror;
+        this._delegate = delegate || null;
+        this._mode = WebInspector.CodeMirrorTokenTrackingController.Mode.None;
+
+        this._mouseOverDelayDuration = 0;
+        this._mouseOutReleaseDelayDuration = 0;
+        this._classNameForHighlightedRange = null;
+
+        this._enabled = false;
+        this._tracking = false;
+        this._previousTokenInfo = null;
+        this._hoveredMarker = null;
+
+        const hidePopover = this._hidePopover.bind(this);
+
+        this._codeMirror.addKeyMap({
+            "Cmd-Enter": this._handleCommandEnterKey.bind(this),
+            "Esc": hidePopover
+        });
+
+        this._codeMirror.on("cursorActivity", hidePopover);
+    }
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    set delegate(x)
+    {
+        this._delegate = x;
+    }
+
+    get enabled()
+    {
+        return this._enabled;
+    }
+
+    set enabled(enabled)
+    {
+        if (this._enabled === enabled)
+            return;
+
+        this._enabled = enabled;
+
+        var wrapper = this._codeMirror.getWrapperElement();
+        if (enabled) {
+            wrapper.addEventListener("mouseenter", this);
+            wrapper.addEventListener("mouseleave", this);
+            this._updateHoveredTokenInfo({left: WebInspector.mouseCoords.x, top: WebInspector.mouseCoords.y});
+            this._startTracking();
+        } else {
+            wrapper.removeEventListener("mouseenter", this);
+            wrapper.removeEventListener("mouseleave", this);
+            this._stopTracking();
+        }
+    }
+
+    get mode()
+    {
+        return this._mode;
+    }
+
+    set mode(mode)
+    {
+        var oldMode = this._mode;
+
+        this._mode = mode || WebInspector.CodeMirrorTokenTrackingController.Mode.None;
+
+        if (oldMode !== this._mode && this._tracking && this._previousTokenInfo)
+            this._processNewHoveredToken(this._previousTokenInfo);
+    }
+
+    get mouseOverDelayDuration()
+    {
+        return this._mouseOverDelayDuration;
+    }
+
+    set mouseOverDelayDuration(x)
+    {
+        console.assert(x >= 0);
+        this._mouseOverDelayDuration = Math.max(x, 0);
+    }
+
+    get mouseOutReleaseDelayDuration()
+    {
+        return this._mouseOutReleaseDelayDuration;
+    }
+
+    set mouseOutReleaseDelayDuration(x)
+    {
+        console.assert(x >= 0);
+        this._mouseOutReleaseDelayDuration = Math.max(x, 0);
+    }
+
+    get classNameForHighlightedRange()
+    {
+        return this._classNameForHighlightedRange;
+    }
+
+    set classNameForHighlightedRange(x)
+    {
+        this._classNameForHighlightedRange = x || null;
+    }
+
+    get candidate()
+    {
+        return this._candidate;
+    }
+
+    get hoveredMarker()
+    {
+        return this._hoveredMarker;
+    }
+
+    set hoveredMarker(hoveredMarker)
+    {
+        this._hoveredMarker = hoveredMarker;
+    }
+
+    highlightLastHoveredRange()
+    {
+        if (this._candidate)
+            this.highlightRange(this._candidate.hoveredTokenRange);
+    }
+
+    highlightRange(range)
+    {
+        // Nothing to do if we're trying to highlight the same range.
+        if (this._codeMirrorMarkedText && this._codeMirrorMarkedText.className === this._classNameForHighlightedRange) {
+            var highlightedRange = this._codeMirrorMarkedText.find();
+            if (!highlightedRange)
+                return;
+            if (WebInspector.compareCodeMirrorPositions(highlightedRange.from, range.start) === 0 &&
+                WebInspector.compareCodeMirrorPositions(highlightedRange.to, range.end) === 0)
+                return;
+        }
+
+        this.removeHighlightedRange();
+
+        var className = this._classNameForHighlightedRange || "";
+        this._codeMirrorMarkedText = this._codeMirror.markText(range.start, range.end, {className});
+
+        window.addEventListener("mousemove", this, true);
+    }
+
+    removeHighlightedRange()
+    {
+        if (!this._codeMirrorMarkedText)
+            return;
+
+        this._codeMirrorMarkedText.clear();
+        this._codeMirrorMarkedText = null;
+
+        window.removeEventListener("mousemove", this, true);
+    }
+
+    // Private
+
+    _startTracking()
+    {
+        console.assert(!this._tracking);
+        if (this._tracking)
+            return;
+
+        this._tracking = true;
+
+        var wrapper = this._codeMirror.getWrapperElement();
+        wrapper.addEventListener("mousemove", this, true);
+        wrapper.addEventListener("mouseout", this, false);
+        wrapper.addEventListener("mousedown", this, false);
+        wrapper.addEventListener("mouseup", this, false);
+        window.addEventListener("blur", this, true);
+    }
+
+    _stopTracking()
+    {
+        console.assert(this._tracking);
+        if (!this._tracking)
+            return;
+
+        this._tracking = false;
+        this._candidate = null;
+
+        var wrapper = this._codeMirror.getWrapperElement();
+        wrapper.removeEventListener("mousemove", this, true);
+        wrapper.removeEventListener("mouseout", this, false);
+        wrapper.removeEventListener("mousedown", this, false);
+        wrapper.removeEventListener("mouseup", this, false);
+        window.removeEventListener("blur", this, true);
+        window.removeEventListener("mousemove", this, true);
+
+        this._resetTrackingStates();
+    }
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mouseenter":
+            this._mouseEntered(event);
+            break;
+        case "mouseleave":
+            this._mouseLeft(event);
+            break;
+        case "mousemove":
+            if (event.currentTarget === window)
+                this._mouseMovedWithMarkedText(event);
+            else
+                this._mouseMovedOverEditor(event);
+            break;
+        case "mouseout":
+            // Only deal with a mouseout event that has the editor wrapper as the target.
+            if (!event.currentTarget.contains(event.relatedTarget))
+                this._mouseMovedOutOfEditor(event);
+            break;
+        case "mousedown":
+            this._mouseButtonWasPressedOverEditor(event);
+            break;
+        case "mouseup":
+            this._mouseButtonWasReleasedOverEditor(event);
+            break;
+        case "blur":
+            this._windowLostFocus(event);
+            break;
+        }
+    }
+
+    _handleCommandEnterKey(codeMirror)
+    {
+        const tokenInfo = this._getTokenInfoForPosition(codeMirror.getCursor("head"));
+        tokenInfo.triggeredBy = WebInspector.CodeMirrorTokenTrackingController.TriggeredBy.Keyboard;
+        this._processNewHoveredToken(tokenInfo);
+    }
+
+    _hidePopover()
+    {
+        if (!this._candidate)
+            return CodeMirror.Pass;
+
+        if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeReleased === "function") {
+            const forceHidePopover = true;
+            this._delegate.tokenTrackingControllerHighlightedRangeReleased(this, forceHidePopover);
+        }
+    }
+
+    _mouseEntered(event)
+    {
+        if (!this._tracking)
+            this._startTracking();
+    }
+
+    _mouseLeft(event)
+    {
+        this._stopTracking();
+    }
+
+    _mouseMovedWithMarkedText(event)
+    {
+        if (this._candidate && this._candidate.triggeredBy === WebInspector.CodeMirrorTokenTrackingController.TriggeredBy.Keyboard)
+            return;
+
+        var shouldRelease = !event.target.classList.contains(this._classNameForHighlightedRange);
+        if (shouldRelease && this._delegate && typeof this._delegate.tokenTrackingControllerCanReleaseHighlightedRange === "function")
+            shouldRelease = this._delegate.tokenTrackingControllerCanReleaseHighlightedRange(this, event.target);
+
+        if (shouldRelease) {
+            if (!this._markedTextMouseoutTimer)
+                this._markedTextMouseoutTimer = setTimeout(this._markedTextIsNoLongerHovered.bind(this), this._mouseOutReleaseDelayDuration);
+            return;
+        }
+
+        if (this._markedTextMouseoutTimer)
+            clearTimeout(this._markedTextMouseoutTimer);
+
+        this._markedTextMouseoutTimer = 0;
+    }
+
+    _markedTextIsNoLongerHovered()
+    {
+        if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeReleased === "function")
+            this._delegate.tokenTrackingControllerHighlightedRangeReleased(this);
+
+        this._markedTextMouseoutTimer = 0;
+    }
+
+    _mouseMovedOverEditor(event)
+    {
+        this._updateHoveredTokenInfo({left: event.pageX, top: event.pageY});
+    }
+
+    _updateHoveredTokenInfo(mouseCoords)
+    {
+        // Get the position in the text and the token at that position.
+        var position = this._codeMirror.coordsChar(mouseCoords);
+        var token = this._codeMirror.getTokenAt(position);
+
+        if (!token || !token.type || !token.string) {
+            if (this._hoveredMarker && this._delegate && typeof this._delegate.tokenTrackingControllerMouseOutOfHoveredMarker === "function") {
+                if (!this._codeMirror.findMarksAt(position).includes(this._hoveredMarker.codeMirrorTextMarker))
+                    this._delegate.tokenTrackingControllerMouseOutOfHoveredMarker(this, this._hoveredMarker);
+            }
+
+            this._resetTrackingStates();
+            return;
+        }
+
+        // Stop right here if we're hovering the same token as we were last time.
+        if (this._previousTokenInfo &&
+            this._previousTokenInfo.position.line === position.line &&
+            this._previousTokenInfo.token.start === token.start &&
+            this._previousTokenInfo.token.end === token.end)
+            return;
+
+        // We have a new hovered token.
+        var tokenInfo = this._previousTokenInfo = this._getTokenInfoForPosition(position);
+
+        if (this._tokenHoverTimer)
+            clearTimeout(this._tokenHoverTimer);
+
+        this._tokenHoverTimer = 0;
+
+        if (this._codeMirrorMarkedText || !this._mouseOverDelayDuration)
+            this._processNewHoveredToken(tokenInfo);
+        else
+            this._tokenHoverTimer = setTimeout(this._processNewHoveredToken.bind(this, tokenInfo), this._mouseOverDelayDuration);
+    }
+
+    _getTokenInfoForPosition(position)
+    {
+        var token = this._codeMirror.getTokenAt(position);
+        var innerMode = CodeMirror.innerMode(this._codeMirror.getMode(), token.state);
+        var codeMirrorModeName = innerMode.mode.alternateName || innerMode.mode.name;
+        return {
+            token,
+            position,
+            innerMode,
+            modeName: codeMirrorModeName
+        };
+    }
+
+    _mouseMovedOutOfEditor(event)
+    {
+        if (this._tokenHoverTimer)
+            clearTimeout(this._tokenHoverTimer);
+
+        this._tokenHoverTimer = 0;
+        this._previousTokenInfo = null;
+        this._selectionMayBeInProgress = false;
+    }
+
+    _mouseButtonWasPressedOverEditor(event)
+    {
+        this._selectionMayBeInProgress = true;
+    }
+
+    _mouseButtonWasReleasedOverEditor(event)
+    {
+        this._selectionMayBeInProgress = false;
+        this._mouseMovedOverEditor(event);
+
+        if (this._codeMirrorMarkedText && this._previousTokenInfo) {
+            var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+            var marks = this._codeMirror.findMarksAt(position);
+            for (var i = 0; i < marks.length; ++i) {
+                if (marks[i] === this._codeMirrorMarkedText) {
+                    if (this._delegate && typeof this._delegate.tokenTrackingControllerHighlightedRangeWasClicked === "function")
+                        this._delegate.tokenTrackingControllerHighlightedRangeWasClicked(this);
+
+                    break;
+                }
+            }
+        }
+    }
+
+    _windowLostFocus(event)
+    {
+        this._resetTrackingStates();
+    }
+
+    _processNewHoveredToken(tokenInfo)
+    {
+        console.assert(tokenInfo);
+
+        if (this._selectionMayBeInProgress)
+            return;
+
+        this._candidate = null;
+
+        switch (this._mode) {
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens:
+            this._candidate = this._processNonSymbolToken(tokenInfo);
+            break;
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression:
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptTypeInformation:
+            this._candidate = this._processJavaScriptExpression(tokenInfo);
+            break;
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.MarkedTokens:
+            this._candidate = this._processMarkedToken(tokenInfo);
+            break;
+        }
+
+        if (!this._candidate)
+            return;
+
+        this._candidate.triggeredBy = tokenInfo.triggeredBy;
+
+        if (this._markedTextMouseoutTimer)
+            clearTimeout(this._markedTextMouseoutTimer);
+
+        this._markedTextMouseoutTimer = 0;
+
+        if (this._delegate && typeof this._delegate.tokenTrackingControllerNewHighlightCandidate === "function")
+            this._delegate.tokenTrackingControllerNewHighlightCandidate(this, this._candidate);
+    }
+
+    _processNonSymbolToken(tokenInfo)
+    {
+        // Ignore any symbol tokens.
+        var type = tokenInfo.token.type;
+        if (!type)
+            return null;
+
+        var startPosition = {line: tokenInfo.position.line, ch: tokenInfo.token.start};
+        var endPosition = {line: tokenInfo.position.line, ch: tokenInfo.token.end};
+
+        return {
+            hoveredToken: tokenInfo.token,
+            hoveredTokenRange: {start: startPosition, end: endPosition},
+        };
+    }
+
+    _processJavaScriptExpression(tokenInfo)
+    {
+        // Only valid within JavaScript.
+        if (tokenInfo.modeName !== "javascript")
+            return null;
+
+        var startPosition = {line: tokenInfo.position.line, ch: tokenInfo.token.start};
+        var endPosition = {line: tokenInfo.position.line, ch: tokenInfo.token.end};
+
+        function tokenIsInRange(token, range)
+        {
+            return token.line >= range.start.line && token.ch >= range.start.ch &&
+                   token.line <= range.end.line && token.ch <= range.end.ch;
+        }
+
+        // If the hovered token is within a selection, use the selection as our expression.
+        if (this._codeMirror.somethingSelected()) {
+            var selectionRange = {
+                start: this._codeMirror.getCursor("start"),
+                end: this._codeMirror.getCursor("end")
+            };
+
+            if (tokenIsInRange(startPosition, selectionRange) || tokenIsInRange(endPosition, selectionRange)) {
+                return {
+                    hoveredToken: tokenInfo.token,
+                    hoveredTokenRange: selectionRange,
+                    expression: this._codeMirror.getSelection(),
+                    expressionRange: selectionRange,
+                };
+            }
+        }
+
+        // We only handle vars, definitions, properties, and the keyword 'this'.
+        var type = tokenInfo.token.type;
+        var isProperty = type.indexOf("property") !== -1;
+        var isKeyword = type.indexOf("keyword") !== -1;
+        if (!isProperty && !isKeyword && type.indexOf("variable") === -1 && type.indexOf("def") === -1)
+            return null;
+
+        // Not object literal property names, but yes if an object literal shorthand property, which is a variable.
+        let state = tokenInfo.innerMode.state;
+        if (isProperty && state.lexical && state.lexical.type === "}") {
+            // Peek ahead to see if the next token is "}" or ",". If it is, we are a shorthand and therefore a variable.
+            let shorthand = false;
+            let mode = tokenInfo.innerMode.mode;
+            let position =  {line: tokenInfo.position.line, ch: tokenInfo.token.end};
+            WebInspector.walkTokens(this._codeMirror, mode, position, function(tokenType, string) {
+                if (tokenType)
+                    return false;
+                if (string === "(")
+                    return false;
+                if (string === "," || string === "}") {
+                    shorthand = true;
+                    return false;
+                }
+                return true;
+            });
+
+            if (!shorthand)
+                return null;
+        }
+
+        // Only the "this" keyword.
+        if (isKeyword && tokenInfo.token.string !== "this")
+            return null;
+
+        // Work out the full hovered expression.
+        var expression = tokenInfo.token.string;
+        var expressionStartPosition = {line: tokenInfo.position.line, ch: tokenInfo.token.start};
+        while (true) {
+            var token = this._codeMirror.getTokenAt(expressionStartPosition);
+            if (!token)
+                break;
+
+            var isDot = !token.type && token.string === ".";
+            var isExpression = token.type && token.type.includes("m-javascript");
+            if (!isDot && !isExpression)
+                break;
+
+            // Disallow operators. We want the hovered expression to be just a single operand.
+            // Also, some operators can modify values, such as pre-increment and assignment operators.
+            if (isExpression && token.type.includes("operator"))
+                break;
+
+            expression = token.string + expression;
+            expressionStartPosition.ch = token.start;
+        }
+
+        // Return the candidate for this token and expression.
+        return {
+            hoveredToken: tokenInfo.token,
+            hoveredTokenRange: {start: startPosition, end: endPosition},
+            expression,
+            expressionRange: {start: expressionStartPosition, end: endPosition},
+        };
+    }
+
+    _processMarkedToken(tokenInfo)
+    {
+        return this._processNonSymbolToken(tokenInfo);
+    }
+
+    _resetTrackingStates()
+    {
+        if (this._tokenHoverTimer)
+            clearTimeout(this._tokenHoverTimer);
+
+        this._tokenHoverTimer = 0;
+
+        this._selectionMayBeInProgress = false;
+        this._previousTokenInfo = null;
+        this.removeHighlightedRange();
+    }
+};
+
+WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName = "jump-to-symbol-highlight";
+
+WebInspector.CodeMirrorTokenTrackingController.Mode = {
+    None: "none",
+    NonSymbolTokens: "non-symbol-tokens",
+    JavaScriptExpression: "javascript-expression",
+    JavaScriptTypeInformation: "javascript-type-information",
+    MarkedTokens: "marked-tokens"
+};
+
+WebInspector.CodeMirrorTokenTrackingController.TriggeredBy = {
+    Keyboard: "keyboard",
+    Hover: "hover"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js
new file mode 100644
index 000000000..6454fc77d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js
@@ -0,0 +1,789 @@
+/*
+ * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeManager = class DOMTreeManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._idToDOMNode = {};
+        this._document = null;
+        this._attributeLoadNodeIds = {};
+        this._flows = new Map;
+        this._contentNodesToFlowsMap = new Map;
+        this._restoreSelectedNodeIsAllowed = true;
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    }
+
+    // Static
+
+    static _flowPayloadHashKey(flowPayload)
+    {
+        // Use the flow node id, to avoid collisions when we change main document id.
+        return flowPayload.documentNodeId + ":" + flowPayload.name;
+    }
+
+    // Public
+
+    requestDocument(callback)
+    {
+        if (this._document) {
+            callback(this._document);
+            return;
+        }
+
+        if (this._pendingDocumentRequestCallbacks) {
+            this._pendingDocumentRequestCallbacks.push(callback);
+            return;
+        }
+
+        this._pendingDocumentRequestCallbacks = [callback];
+
+        function onDocumentAvailable(error, root)
+        {
+            if (!error)
+                this._setDocument(root);
+
+            for (let callback of this._pendingDocumentRequestCallbacks)
+                callback(this._document);
+
+            this._pendingDocumentRequestCallbacks = null;
+        }
+
+        DOMAgent.getDocument(onDocumentAvailable.bind(this));
+    }
+
+    pushNodeToFrontend(objectId, callback)
+    {
+        this._dispatchWhenDocumentAvailable(DOMAgent.requestNode.bind(DOMAgent, objectId), callback);
+    }
+
+    pushNodeByPathToFrontend(path, callback)
+    {
+        this._dispatchWhenDocumentAvailable(DOMAgent.pushNodeByPathToFrontend.bind(DOMAgent, path), callback);
+    }
+
+    // Private
+
+    _wrapClientCallback(callback)
+    {
+        if (!callback)
+            return null;
+
+        return function(error, result) {
+            if (error)
+                console.error("Error during DOMAgent operation: " + error);
+            callback(error ? null : result);
+        };
+    }
+
+    _dispatchWhenDocumentAvailable(func, callback)
+    {
+        var callbackWrapper = this._wrapClientCallback(callback);
+
+        function onDocumentAvailable()
+        {
+            if (this._document)
+                func(callbackWrapper);
+            else {
+                if (callbackWrapper)
+                    callbackWrapper("No document");
+            }
+        }
+        this.requestDocument(onDocumentAvailable.bind(this));
+    }
+
+    _attributeModified(nodeId, name, value)
+    {
+        var node = this._idToDOMNode[nodeId];
+        if (!node)
+            return;
+
+        node._setAttribute(name, value);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeModified, {node, name});
+        node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeModified, {name});
+    }
+
+    _attributeRemoved(nodeId, name)
+    {
+        var node = this._idToDOMNode[nodeId];
+        if (!node)
+            return;
+
+        node._removeAttribute(name);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeRemoved, {node, name});
+        node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeRemoved, {name});
+    }
+
+    _inlineStyleInvalidated(nodeIds)
+    {
+        for (var nodeId of nodeIds)
+            this._attributeLoadNodeIds[nodeId] = true;
+        if ("_loadNodeAttributesTimeout" in this)
+            return;
+        this._loadNodeAttributesTimeout = setTimeout(this._loadNodeAttributes.bind(this), 0);
+    }
+
+    _loadNodeAttributes()
+    {
+        function callback(nodeId, error, attributes)
+        {
+            if (error) {
+                console.error("Error during DOMAgent operation: " + error);
+                return;
+            }
+            var node = this._idToDOMNode[nodeId];
+            if (node) {
+                node._setAttributesPayload(attributes);
+                this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeModified, { node, name: "style" });
+                node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeModified, {name: "style"});
+            }
+        }
+
+        this._loadNodeAttributesTimeout = undefined;
+
+        for (var nodeId in this._attributeLoadNodeIds) {
+            var nodeIdAsNumber = parseInt(nodeId);
+            DOMAgent.getAttributes(nodeIdAsNumber, callback.bind(this, nodeIdAsNumber));
+        }
+        this._attributeLoadNodeIds = {};
+    }
+
+    _characterDataModified(nodeId, newValue)
+    {
+        var node = this._idToDOMNode[nodeId];
+        node._nodeValue = newValue;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.CharacterDataModified, {node});
+    }
+
+    nodeForId(nodeId)
+    {
+        return this._idToDOMNode[nodeId];
+    }
+
+    _documentUpdated()
+    {
+        this._setDocument(null);
+    }
+
+    _setDocument(payload)
+    {
+        this._idToDOMNode = {};
+        if (payload && "nodeId" in payload)
+            this._document = new WebInspector.DOMNode(this, null, false, payload);
+        else
+            this._document = null;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._document);
+    }
+
+    _setDetachedRoot(payload)
+    {
+        new WebInspector.DOMNode(this, null, false, payload);
+    }
+
+    _setChildNodes(parentId, payloads)
+    {
+        if (!parentId && payloads.length) {
+            this._setDetachedRoot(payloads[0]);
+            return;
+        }
+
+        var parent = this._idToDOMNode[parentId];
+        parent._setChildrenPayload(payloads);
+    }
+
+    _childNodeCountUpdated(nodeId, newValue)
+    {
+        var node = this._idToDOMNode[nodeId];
+        node.childNodeCount = newValue;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ChildNodeCountUpdated, node);
+    }
+
+    _childNodeInserted(parentId, prevId, payload)
+    {
+        var parent = this._idToDOMNode[parentId];
+        var prev = this._idToDOMNode[prevId];
+        var node = parent._insertChild(prev, payload);
+        this._idToDOMNode[node.id] = node;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeInserted, {node, parent});
+    }
+
+    _childNodeRemoved(parentId, nodeId)
+    {
+        var parent = this._idToDOMNode[parentId];
+        var node = this._idToDOMNode[nodeId];
+        parent._removeChild(node);
+        this._unbind(node);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeRemoved, {node, parent});
+    }
+
+    _pseudoElementAdded(parentId, pseudoElement)
+    {
+        var parent = this._idToDOMNode[parentId];
+        if (!parent)
+            return;
+
+        var node = new WebInspector.DOMNode(this, parent.ownerDocument, false, pseudoElement);
+        node.parentNode = parent;
+        this._idToDOMNode[node.id] = node;
+        console.assert(!parent.pseudoElements().get(node.pseudoType()));
+        parent.pseudoElements().set(node.pseudoType(), node);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeInserted, {node, parent});
+    }
+
+    _pseudoElementRemoved(parentId, pseudoElementId)
+    {
+        var pseudoElement = this._idToDOMNode[pseudoElementId];
+        if (!pseudoElement)
+            return;
+
+        var parent = pseudoElement.parentNode;
+        console.assert(parent);
+        console.assert(parent.id === parentId);
+        if (!parent)
+            return;
+
+        parent._removeChild(pseudoElement);
+        this._unbind(pseudoElement);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeRemoved, {node: pseudoElement, parent});
+    }
+
+    _unbind(node)
+    {
+        this._removeContentNodeFromFlowIfNeeded(node);
+
+        delete this._idToDOMNode[node.id];
+
+        for (let i = 0; node.children && i < node.children.length; ++i)
+            this._unbind(node.children[i]);
+
+        let templateContent = node.templateContent();
+        if (templateContent)
+            this._unbind(templateContent);
+
+        for (let pseudoElement of node.pseudoElements().values())
+            this._unbind(pseudoElement);
+
+        // FIXME: Handle shadow roots.
+    }
+
+    get restoreSelectedNodeIsAllowed()
+    {
+        return this._restoreSelectedNodeIsAllowed;
+    }
+
+    inspectElement(nodeId)
+    {
+        var node = this._idToDOMNode[nodeId];
+        if (!node || !node.ownerDocument)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, {node});
+
+        this._inspectModeEnabled = false;
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.InspectModeStateChanged);
+    }
+
+    inspectNodeObject(remoteObject)
+    {
+        this._restoreSelectedNodeIsAllowed = false;
+
+        function nodeAvailable(nodeId)
+        {
+            remoteObject.release();
+
+            console.assert(nodeId);
+            if (!nodeId)
+                return;
+
+            this.inspectElement(nodeId);
+
+            // Re-resolve the node in the console's object group when adding to the console.
+            let domNode = this.nodeForId(nodeId);
+            WebInspector.RemoteObject.resolveNode(domNode, WebInspector.RuntimeManager.ConsoleObjectGroup, function(remoteObject) {
+                if (!remoteObject)
+                    return;
+                let specialLogStyles = true;
+                let synthetic = true;
+                WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(WebInspector.UIString("Selected Element"), remoteObject, specialLogStyles, synthetic);
+            });
+        }
+
+        remoteObject.pushNodeToFrontend(nodeAvailable.bind(this));
+    }
+
+    performSearch(query, searchCallback)
+    {
+        this.cancelSearch();
+
+        function callback(error, searchId, resultsCount)
+        {
+            this._searchId = searchId;
+            searchCallback(resultsCount);
+        }
+        DOMAgent.performSearch(query, callback.bind(this));
+    }
+
+    searchResult(index, callback)
+    {
+        function mycallback(error, nodeIds)
+        {
+            if (error) {
+                console.error(error);
+                callback(null);
+                return;
+            }
+            if (nodeIds.length !== 1)
+                return;
+
+            callback(this._idToDOMNode[nodeIds[0]]);
+        }
+
+        if (this._searchId)
+            DOMAgent.getSearchResults(this._searchId, index, index + 1, mycallback.bind(this));
+        else
+            callback(null);
+    }
+
+    cancelSearch()
+    {
+        if (this._searchId) {
+            DOMAgent.discardSearchResults(this._searchId);
+            this._searchId = undefined;
+        }
+    }
+
+    querySelector(nodeId, selectors, callback)
+    {
+        DOMAgent.querySelector(nodeId, selectors, this._wrapClientCallback(callback));
+    }
+
+    querySelectorAll(nodeId, selectors, callback)
+    {
+        DOMAgent.querySelectorAll(nodeId, selectors, this._wrapClientCallback(callback));
+    }
+
+    highlightDOMNode(nodeId, mode)
+    {
+        if (this._hideDOMNodeHighlightTimeout) {
+            clearTimeout(this._hideDOMNodeHighlightTimeout);
+            this._hideDOMNodeHighlightTimeout = undefined;
+        }
+
+        this._highlightedDOMNodeId = nodeId;
+        if (nodeId)
+            DOMAgent.highlightNode.invoke({nodeId, highlightConfig: this._buildHighlightConfig(mode)});
+        else
+            DOMAgent.hideHighlight();
+    }
+
+    highlightSelector(selectorText, frameId, mode)
+    {
+        // COMPATIBILITY (iOS 8): DOM.highlightSelector did not exist.
+        if (!DOMAgent.highlightSelector)
+            return;
+
+        DOMAgent.highlightSelector(this._buildHighlightConfig(mode), selectorText, frameId);
+    }
+
+    highlightRect(rect, usePageCoordinates)
+    {
+        DOMAgent.highlightRect.invoke({
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            color: {r: 111, g: 168, b: 220, a: 0.66},
+            outlineColor: {r: 255, g: 229, b: 153, a: 0.66},
+            usePageCoordinates
+        });
+    }
+
+    hideDOMNodeHighlight()
+    {
+        this.highlightDOMNode(0);
+    }
+
+    highlightDOMNodeForTwoSeconds(nodeId)
+    {
+        this.highlightDOMNode(nodeId);
+        this._hideDOMNodeHighlightTimeout = setTimeout(this.hideDOMNodeHighlight.bind(this), 2000);
+    }
+
+    get inspectModeEnabled()
+    {
+        return this._inspectModeEnabled;
+    }
+
+    set inspectModeEnabled(enabled)
+    {
+        function callback(error)
+        {
+            this._inspectModeEnabled = error ? false : enabled;
+            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.InspectModeStateChanged);
+        }
+
+        DOMAgent.setInspectModeEnabled(enabled, this._buildHighlightConfig(), callback.bind(this));
+    }
+
+    _buildHighlightConfig(mode = "all")
+    {
+        let highlightConfig = {showInfo: mode === "all"};
+
+        if (mode === "all" || mode === "content")
+            highlightConfig.contentColor = {r: 111, g: 168, b: 220, a: 0.66};
+
+        if (mode === "all" || mode === "padding")
+            highlightConfig.paddingColor = {r: 147, g: 196, b: 125, a: 0.66};
+
+        if (mode === "all" || mode === "border")
+            highlightConfig.borderColor = {r: 255, g: 229, b: 153, a: 0.66};
+
+        if (mode === "all" || mode === "margin")
+            highlightConfig.marginColor = {r: 246, g: 178, b: 107, a: 0.66};
+
+        return highlightConfig;
+    }
+
+    _createContentFlowFromPayload(flowPayload)
+    {
+        // FIXME: Collect the regions from the payload.
+        var flow = new WebInspector.ContentFlow(flowPayload.documentNodeId, flowPayload.name, flowPayload.overset, flowPayload.content.map(this.nodeForId.bind(this)));
+
+        for (var contentNode of flow.contentNodes) {
+            console.assert(!this._contentNodesToFlowsMap.has(contentNode.id));
+            this._contentNodesToFlowsMap.set(contentNode.id, flow);
+        }
+
+        return flow;
+    }
+
+    _updateContentFlowFromPayload(contentFlow, flowPayload)
+    {
+        console.assert(contentFlow.contentNodes.length === flowPayload.content.length);
+        console.assert(contentFlow.contentNodes.every(function(node, i) { return node.id === flowPayload.content[i]; }));
+
+        // FIXME: Collect the regions from the payload.
+        contentFlow.overset = flowPayload.overset;
+    }
+
+    getNamedFlowCollection(documentNodeIdentifier)
+    {
+        function onNamedFlowCollectionAvailable(error, flows)
+        {
+            if (error)
+                return;
+            this._contentNodesToFlowsMap.clear();
+            var contentFlows = [];
+            for (var i = 0; i < flows.length; ++i) {
+                var flowPayload = flows[i];
+                var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
+                var contentFlow = this._flows.get(flowKey);
+                if (contentFlow)
+                    this._updateContentFlowFromPayload(contentFlow, flowPayload);
+                else {
+                    contentFlow = this._createContentFlowFromPayload(flowPayload);
+                    this._flows.set(flowKey, contentFlow);
+                }
+                contentFlows.push(contentFlow);
+            }
+            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowListWasUpdated, {documentNodeIdentifier, flows: contentFlows});
+        }
+
+        if (window.CSSAgent)
+            CSSAgent.getNamedFlowCollection(documentNodeIdentifier, onNamedFlowCollectionAvailable.bind(this));
+    }
+
+    namedFlowCreated(flowPayload)
+    {
+        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
+        console.assert(!this._flows.has(flowKey));
+        var contentFlow = this._createContentFlowFromPayload(flowPayload);
+        this._flows.set(flowKey, contentFlow);
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowWasAdded, {flow: contentFlow});
+    }
+
+    namedFlowRemoved(documentNodeIdentifier, flowName)
+    {
+        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: documentNodeIdentifier, name: flowName});
+        var contentFlow = this._flows.get(flowKey);
+        console.assert(contentFlow);
+        this._flows.delete(flowKey);
+
+        // Remove any back links to this flow from the content nodes.
+        for (var contentNode of contentFlow.contentNodes)
+            this._contentNodesToFlowsMap.delete(contentNode.id);
+
+        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ContentFlowWasRemoved, {flow: contentFlow});
+    }
+
+    _sendNamedFlowUpdateEvents(flowPayload)
+    {
+        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey(flowPayload);
+        console.assert(this._flows.has(flowKey));
+        this._updateContentFlowFromPayload(this._flows.get(flowKey), flowPayload);
+    }
+
+    regionOversetChanged(flowPayload)
+    {
+        this._sendNamedFlowUpdateEvents(flowPayload);
+    }
+
+    registeredNamedFlowContentElement(documentNodeIdentifier, flowName, contentNodeId, nextContentElementNodeId)
+    {
+        var flowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: documentNodeIdentifier, name: flowName});
+        console.assert(this._flows.has(flowKey));
+        console.assert(!this._contentNodesToFlowsMap.has(contentNodeId));
+
+        var flow = this._flows.get(flowKey);
+        var contentNode = this.nodeForId(contentNodeId);
+
+        this._contentNodesToFlowsMap.set(contentNode.id, flow);
+
+        if (nextContentElementNodeId)
+            flow.insertContentNodeBefore(contentNode, this.nodeForId(nextContentElementNodeId));
+        else
+            flow.appendContentNode(contentNode);
+    }
+
+    _removeContentNodeFromFlowIfNeeded(node)
+    {
+        if (!this._contentNodesToFlowsMap.has(node.id))
+            return;
+        var flow = this._contentNodesToFlowsMap.get(node.id);
+        this._contentNodesToFlowsMap.delete(node.id);
+        flow.removeContentNode(node);
+    }
+
+    unregisteredNamedFlowContentElement(documentNodeIdentifier, flowName, contentNodeId)
+    {
+        console.assert(this._contentNodesToFlowsMap.has(contentNodeId));
+
+        var flow = this._contentNodesToFlowsMap.get(contentNodeId);
+        console.assert(flow.id === WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: documentNodeIdentifier, name: flowName}));
+
+        this._contentNodesToFlowsMap.delete(contentNodeId);
+        flow.removeContentNode(this.nodeForId(contentNodeId));
+    }
+
+    _coerceRemoteArrayOfDOMNodes(objectId, callback)
+    {
+        var length, nodes, received = 0, lastError = null, domTreeManager = this;
+
+        function nodeRequested(index, error, nodeId)
+        {
+            if (error)
+                lastError = error;
+            else
+                nodes[index] = domTreeManager._idToDOMNode[nodeId];
+            if (++received === length)
+                callback(lastError, nodes);
+        }
+
+        WebInspector.runtimeManager.getPropertiesForRemoteObject(objectId, function(error, properties) {
+            if (error) {
+                callback(error);
+                return;
+            }
+
+            var lengthProperty = properties.get("length");
+            if (!lengthProperty || lengthProperty.value.type !== "number") {
+                callback(null);
+                return;
+            }
+
+            length = lengthProperty.value.value;
+            if (!length) {
+                callback(null, []);
+                return;
+            }
+
+            nodes = new Array(length);
+            for (var i = 0; i < length; ++i) {
+                var nodeProperty = properties.get(String(i));
+                console.assert(nodeProperty.value.type === "object");
+                DOMAgent.requestNode(nodeProperty.value.objectId, nodeRequested.bind(null, i));
+            }
+        });
+    }
+
+    getNodeContentFlowInfo(domNode, resultReadyCallback)
+    {
+        DOMAgent.resolveNode(domNode.id, domNodeResolved.bind(this));
+
+        function domNodeResolved(error, remoteObject)
+        {
+            if (error) {
+                resultReadyCallback(error);
+                return;
+            }
+            // Serialize "backendFunction" and execute it in the context of the page
+            // passing the DOMNode as the "this" reference.
+            var evalParameters = {
+                objectId: remoteObject.objectId,
+                functionDeclaration: appendWebInspectorSourceURL(backendFunction.toString()),
+                doNotPauseOnExceptionsAndMuteConsole: true,
+                returnByValue: false,
+                generatePreview: false
+            };
+            RuntimeAgent.callFunctionOn.invoke(evalParameters, regionNodesAvailable.bind(this));
+        }
+
+        function regionNodesAvailable(error, remoteObject, wasThrown)
+        {
+            if (error) {
+                resultReadyCallback(error);
+                return;
+            }
+
+            if (wasThrown) {
+                // We should never get here, but having the error is useful for debugging.
+                console.error("Error while executing backend function:", JSON.stringify(remoteObject));
+                resultReadyCallback(null);
+                return;
+            }
+
+            // The backend function can never return null.
+            console.assert(remoteObject.type === "object");
+            console.assert(remoteObject.objectId);
+            WebInspector.runtimeManager.getPropertiesForRemoteObject(remoteObject.objectId, remoteObjectPropertiesAvailable.bind(this));
+        }
+
+        function remoteObjectPropertiesAvailable(error, properties) {
+            if (error) {
+                resultReadyCallback(error);
+                return;
+            }
+
+            var result = {
+                regionFlow: null,
+                contentFlow: null,
+                regions: null
+            };
+
+            var regionFlowNameProperty = properties.get("regionFlowName");
+            if (regionFlowNameProperty && regionFlowNameProperty.value && regionFlowNameProperty.value.value) {
+                console.assert(regionFlowNameProperty.value.type === "string");
+                var regionFlowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: domNode.ownerDocument.id, name: regionFlowNameProperty.value.value});
+                result.regionFlow = this._flows.get(regionFlowKey);
+            }
+
+            var contentFlowNameProperty = properties.get("contentFlowName");
+            if (contentFlowNameProperty && contentFlowNameProperty.value && contentFlowNameProperty.value.value) {
+                console.assert(contentFlowNameProperty.value.type === "string");
+                var contentFlowKey = WebInspector.DOMTreeManager._flowPayloadHashKey({documentNodeId: domNode.ownerDocument.id, name: contentFlowNameProperty.value.value});
+                result.contentFlow = this._flows.get(contentFlowKey);
+            }
+
+            var regionsProperty = properties.get("regions");
+            if (!regionsProperty || !regionsProperty.value.objectId) {
+                // The list of regions is null.
+                resultReadyCallback(null, result);
+                return;
+            }
+
+            console.assert(regionsProperty.value.type === "object");
+            console.assert(regionsProperty.value.subtype === "array");
+            this._coerceRemoteArrayOfDOMNodes(regionsProperty.value.objectId, function(error, nodes) {
+                result.regions = nodes;
+                resultReadyCallback(error, result);
+            });
+        }
+
+        // Note that "backendFunction" is serialized and executed in the context of the page.
+        function backendFunction()
+        {
+            function getComputedProperty(node, propertyName)
+            {
+                if (!node.ownerDocument || !node.ownerDocument.defaultView)
+                    return null;
+                var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+                return computedStyle ? computedStyle[propertyName] : null;
+            }
+
+            function getContentFlowName(node)
+            {
+                for (; node; node = node.parentNode) {
+                    var flowName = getComputedProperty(node, "webkitFlowInto");
+                    if (flowName && flowName !== "none")
+                        return flowName;
+                }
+                return null;
+            }
+
+            var node = this;
+
+            // Even detached nodes have an ownerDocument.
+            console.assert(node.ownerDocument);
+
+            var result = {
+                regionFlowName: getComputedProperty(node, "webkitFlowFrom"),
+                contentFlowName: getContentFlowName(node),
+                regions: null
+            };
+
+            if (result.contentFlowName) {
+                var flowThread = node.ownerDocument.webkitGetNamedFlows().namedItem(result.contentFlowName);
+                if (flowThread)
+                    result.regions = flowThread.getRegionsByContent(node);
+            }
+
+            return result;
+        }
+    }
+
+    // Private
+
+    _mainResourceDidChange(event)
+    {
+        if (event.target.isMainFrame())
+            this._restoreSelectedNodeIsAllowed = true;
+    }
+};
+
+WebInspector.DOMTreeManager.Event = {
+    AttributeModified: "dom-tree-manager-attribute-modified",
+    AttributeRemoved: "dom-tree-manager-attribute-removed",
+    CharacterDataModified: "dom-tree-manager-character-data-modified",
+    NodeInserted: "dom-tree-manager-node-inserted",
+    NodeRemoved: "dom-tree-manager-node-removed",
+    DocumentUpdated: "dom-tree-manager-document-updated",
+    ChildNodeCountUpdated: "dom-tree-manager-child-node-count-updated",
+    DOMNodeWasInspected: "dom-tree-manager-dom-node-was-inspected",
+    InspectModeStateChanged: "dom-tree-manager-inspect-mode-state-changed",
+    ContentFlowListWasUpdated: "dom-tree-manager-content-flow-list-was-updated",
+    ContentFlowWasAdded: "dom-tree-manager-content-flow-was-added",
+    ContentFlowWasRemoved: "dom-tree-manager-content-flow-was-removed",
+    RegionOversetChanged: "dom-tree-manager-region-overset-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js
new file mode 100644
index 000000000..48c4a8fd5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DashboardManager = class DashboardManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._dashboards = {};
+        this._dashboards.default = new WebInspector.DefaultDashboard;
+        this._dashboards.debugger = new WebInspector.DebuggerDashboard;
+        this._dashboards.replay = new WebInspector.ReplayDashboard;
+    }
+
+    get dashboards()
+    {
+        return this._dashboards;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js
new file mode 100644
index 000000000..34444ff68
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js
@@ -0,0 +1,956 @@
+/*
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerManager = class DebuggerManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        if (window.DebuggerAgent)
+            DebuggerAgent.enable();
+
+        WebInspector.notifications.addEventListener(WebInspector.Notification.DebugUIEnabledDidChange, this._debugUIEnabledDidChange, this);
+
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisplayLocationDidChange, this._breakpointDisplayLocationDidChange, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._breakpointDisabledStateDidChange, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ConditionDidChange, this._breakpointEditablePropertyDidChange, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.IgnoreCountDidChange, this._breakpointEditablePropertyDidChange, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._breakpointEditablePropertyDidChange, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ActionsDidChange, this._breakpointEditablePropertyDidChange, this);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        this._allExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-exceptions", false);
+        this._allUncaughtExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-uncaught-exceptions", false);
+
+        var specialBreakpointLocation = new WebInspector.SourceCodeLocation(null, Infinity, Infinity);
+
+        this._allExceptionsBreakpoint = new WebInspector.Breakpoint(specialBreakpointLocation, !this._allExceptionsBreakpointEnabledSetting.value);
+        this._allExceptionsBreakpoint.resolved = true;
+
+        this._allUncaughtExceptionsBreakpoint = new WebInspector.Breakpoint(specialBreakpointLocation, !this._allUncaughtExceptionsBreakpointEnabledSetting.value);
+
+        this._breakpoints = [];
+        this._breakpointURLMap = new Map;
+        this._breakpointScriptIdentifierMap = new Map;
+        this._breakpointIdMap = new Map;
+
+        this._nextBreakpointActionIdentifier = 1;
+
+        this._paused = false;
+        this._pauseReason = null;
+        this._pauseData = null;
+
+        this._inspectorDebugScripts = [];
+        this._scriptIdMap = new Map;
+        this._scriptURLMap = new Map;
+
+        this._breakpointsSetting = new WebInspector.Setting("breakpoints", []);
+        this._breakpointsEnabledSetting = new WebInspector.Setting("breakpoints-enabled", true);
+
+        if (window.DebuggerAgent)
+            DebuggerAgent.setBreakpointsActive(this._breakpointsEnabledSetting.value);
+
+        this._updateBreakOnExceptionsState();
+
+        function restoreBreakpointsSoon() {
+            this._restoringBreakpoints = true;
+            for (var cookie of this._breakpointsSetting.value)
+                this.addBreakpoint(new WebInspector.Breakpoint(cookie));
+            this._restoringBreakpoints = false;
+        }
+
+        // Ensure that all managers learn about restored breakpoints,
+        // regardless of their initialization order.
+        setTimeout(restoreBreakpointsSoon.bind(this), 0);
+    }
+
+    // Public
+
+    get breakpointsEnabled()
+    {
+        return this._breakpointsEnabledSetting.value;
+    }
+
+    set breakpointsEnabled(enabled)
+    {
+        if (this._breakpointsEnabledSetting.value === enabled)
+            return;
+
+        this._breakpointsEnabledSetting.value = enabled;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange);
+
+        DebuggerAgent.setBreakpointsActive(enabled);
+
+        this._updateBreakOnExceptionsState();
+    }
+
+    get paused()
+    {
+        return this._paused;
+    }
+
+    get pauseReason()
+    {
+        return this._pauseReason;
+    }
+
+    get pauseData()
+    {
+        return this._pauseData;
+    }
+
+    get callFrames()
+    {
+        return this._callFrames;
+    }
+
+    get activeCallFrame()
+    {
+        return this._activeCallFrame;
+    }
+
+    set activeCallFrame(callFrame)
+    {
+        if (callFrame === this._activeCallFrame)
+            return;
+
+        this._activeCallFrame = callFrame || null;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    }
+
+    pause()
+    {
+        if (this._paused)
+            return Promise.resolve();
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.WaitingToPause);
+
+        var listener = new WebInspector.EventListener(this, true);
+
+        var managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.Paused, resolve);
+        });
+
+        var protocolResult = DebuggerAgent.pause()
+            .catch(function(error) {
+                listener.disconnect();
+                console.error("DebuggerManager.pause failed: ", error);
+                throw error;
+            });
+
+        return Promise.all([managerResult, protocolResult]);
+    }
+
+    resume()
+    {
+        if (!this._paused)
+            return Promise.resolve();
+
+        var listener = new WebInspector.EventListener(this, true);
+
+        var managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.Resumed, resolve);
+        });
+
+        var protocolResult = DebuggerAgent.resume()
+            .catch(function(error) {
+                listener.disconnect();
+                console.error("DebuggerManager.resume failed: ", error);
+                throw error;
+            });
+
+        return Promise.all([managerResult, protocolResult]);
+    }
+
+    stepOver()
+    {
+        if (!this._paused)
+            return Promise.reject(new Error("Cannot step over because debugger is not paused."));
+
+        var listener = new WebInspector.EventListener(this, true);
+
+        var managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, resolve);
+        });
+
+        var protocolResult = DebuggerAgent.stepOver()
+            .catch(function(error) {
+                listener.disconnect();
+                console.error("DebuggerManager.stepOver failed: ", error);
+                throw error;
+            });
+
+        return Promise.all([managerResult, protocolResult]);
+    }
+
+    stepInto()
+    {
+        if (!this._paused)
+            return Promise.reject(new Error("Cannot step into because debugger is not paused."));
+
+        var listener = new WebInspector.EventListener(this, true);
+
+        var managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, resolve);
+        });
+
+        var protocolResult = DebuggerAgent.stepInto()
+            .catch(function(error) {
+                listener.disconnect();
+                console.error("DebuggerManager.stepInto failed: ", error);
+                throw error;
+            });
+
+        return Promise.all([managerResult, protocolResult]);
+    }
+
+    stepOut()
+    {
+        if (!this._paused)
+            return Promise.reject(new Error("Cannot step out because debugger is not paused."));
+
+        var listener = new WebInspector.EventListener(this, true);
+
+        var managerResult = new Promise(function(resolve, reject) {
+            listener.connect(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, resolve);
+        });
+
+        var protocolResult = DebuggerAgent.stepOut()
+            .catch(function(error) {
+                listener.disconnect();
+                console.error("DebuggerManager.stepOut failed: ", error);
+                throw error;
+            });
+
+        return Promise.all([managerResult, protocolResult]);
+    }
+
+    get allExceptionsBreakpoint()
+    {
+        return this._allExceptionsBreakpoint;
+    }
+
+    get allUncaughtExceptionsBreakpoint()
+    {
+        return this._allUncaughtExceptionsBreakpoint;
+    }
+
+    get breakpoints()
+    {
+        return this._breakpoints;
+    }
+
+    breakpointsForSourceCode(sourceCode)
+    {
+        console.assert(sourceCode instanceof WebInspector.Resource || sourceCode instanceof WebInspector.Script);
+
+        if (sourceCode instanceof WebInspector.SourceMapResource) {
+            var mappedResourceBreakpoints = [];
+            var originalSourceCodeBreakpoints = this.breakpointsForSourceCode(sourceCode.sourceMap.originalSourceCode);
+            return originalSourceCodeBreakpoints.filter(function(breakpoint) {
+                return breakpoint.sourceCodeLocation.displaySourceCode === sourceCode;
+            });
+        }
+
+        let urlBreakpoints = this._breakpointURLMap.get(sourceCode.url);
+        if (urlBreakpoints) {
+            this._associateBreakpointsWithSourceCode(urlBreakpoints, sourceCode);
+            return urlBreakpoints;
+        }
+
+        if (sourceCode instanceof WebInspector.Script) {
+            let scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap.get(sourceCode.id);
+            if (scriptIdentifierBreakpoints) {
+                this._associateBreakpointsWithSourceCode(scriptIdentifierBreakpoints, sourceCode);
+                return scriptIdentifierBreakpoints;
+            }
+        }
+
+        return [];
+    }
+
+    breakpointForIdentifier(id)
+    {
+        return this._breakpointIdMap.get(id) || null;
+    }
+
+    scriptForIdentifier(id)
+    {
+        return this._scriptIdMap.get(id) || null;
+    }
+
+    scriptsForURL(url)
+    {
+        // FIXME: This may not be safe. A Resource's URL may differ from a Script's URL.
+        return this._scriptURLMap.get(url) || [];
+    }
+
+    continueToLocation(scriptIdentifier, lineNumber, columnNumber)
+    {
+        DebuggerAgent.continueToLocation({scriptId: scriptIdentifier, lineNumber, columnNumber});
+    }
+
+    get searchableScripts()
+    {
+        return this.knownNonResourceScripts.filter((script) => !!script.url);
+    }
+
+    get knownNonResourceScripts()
+    {
+        let knownScripts = [];
+        for (let script of this._scriptIdMap.values()) {
+            if (script.resource)
+                continue;
+            if (!WebInspector.isDebugUIEnabled() && isWebInspectorDebugScript(script.url))
+                continue;
+            knownScripts.push(script);
+        }
+
+        return knownScripts;
+    }
+
+    addBreakpoint(breakpoint, skipEventDispatch, shouldSpeculativelyResolve)
+    {
+        console.assert(breakpoint instanceof WebInspector.Breakpoint, "Bad argument to DebuggerManger.addBreakpoint: ", breakpoint);
+        if (!breakpoint)
+            return;
+
+        if (breakpoint.url) {
+            let urlBreakpoints = this._breakpointURLMap.get(breakpoint.url);
+            if (!urlBreakpoints) {
+                urlBreakpoints = [];
+                this._breakpointURLMap.set(breakpoint.url, urlBreakpoints);
+            }
+            urlBreakpoints.push(breakpoint);
+        }
+
+        if (breakpoint.scriptIdentifier) {
+            let scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap.get(breakpoint.scriptIdentifier);
+            if (!scriptIdentifierBreakpoints) {
+                scriptIdentifierBreakpoints = [];
+                this._breakpointScriptIdentifierMap.set(breakpoint.scriptIdentifier, scriptIdentifierBreakpoints);
+            }
+            scriptIdentifierBreakpoints.push(breakpoint);
+        }
+
+        this._breakpoints.push(breakpoint);
+
+        function speculativelyResolveBreakpoint(breakpoint) {
+            breakpoint.resolved = true;
+        }
+
+        if (!breakpoint.disabled)
+            this._setBreakpoint(breakpoint, shouldSpeculativelyResolve ? speculativelyResolveBreakpoint.bind(null, breakpoint) : null);
+
+        this._saveBreakpoints();
+
+        if (!skipEventDispatch)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointAdded, {breakpoint});
+    }
+
+    removeBreakpoint(breakpoint)
+    {
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        console.assert(this.isBreakpointRemovable(breakpoint));
+        if (!this.isBreakpointRemovable(breakpoint))
+            return;
+
+        this._breakpoints.remove(breakpoint);
+
+        if (breakpoint.identifier)
+            this._removeBreakpoint(breakpoint);
+
+        if (breakpoint.url) {
+            let urlBreakpoints = this._breakpointURLMap.get(breakpoint.url);
+            if (urlBreakpoints) {
+                urlBreakpoints.remove(breakpoint);
+                if (!urlBreakpoints.length)
+                    this._breakpointURLMap.delete(breakpoint.url);
+            }
+        }
+
+        if (breakpoint.scriptIdentifier) {
+            let scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap.get(breakpoint.scriptIdentifier);
+            if (scriptIdentifierBreakpoints) {
+                scriptIdentifierBreakpoints.remove(breakpoint);
+                if (!scriptIdentifierBreakpoints.length)
+                    this._breakpointScriptIdentifierMap.delete(breakpoint.scriptIdentifier);
+            }
+        }
+
+        // Disable the breakpoint first, so removing actions doesn't re-add the breakpoint.
+        breakpoint.disabled = true;
+        breakpoint.clearActions();
+
+        this._saveBreakpoints();
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointRemoved, {breakpoint});
+    }
+
+    breakpointResolved(breakpointIdentifier, location)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        let breakpoint = this._breakpointIdMap.get(breakpointIdentifier);
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        console.assert(breakpoint.identifier === breakpointIdentifier);
+
+        if (!breakpoint.sourceCodeLocation.sourceCode) {
+            var sourceCodeLocation = this._sourceCodeLocationFromPayload(location);
+            breakpoint.sourceCodeLocation.sourceCode = sourceCodeLocation.sourceCode;
+        }
+
+        breakpoint.resolved = true;
+    }
+
+    reset()
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        var wasPaused = this._paused;
+
+        WebInspector.Script.resetUniqueDisplayNameNumbers();
+
+        this._paused = false;
+        this._pauseReason = null;
+        this._pauseData = null;
+
+        this._inspectorDebugScripts = [];
+        this._scriptIdMap.clear();
+        this._scriptURLMap.clear();
+
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = true;
+
+        // Mark all the breakpoints as unresolved. They will be reported as resolved when
+        // breakpointResolved is called as the page loads.
+        for (var i = 0; i < this._breakpoints.length; ++i) {
+            var breakpoint = this._breakpoints[i];
+            breakpoint.resolved = false;
+            if (breakpoint.sourceCodeLocation.sourceCode)
+                breakpoint.sourceCodeLocation.sourceCode = null;
+        }
+
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = false;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ScriptsCleared);
+
+        if (wasPaused)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
+    }
+
+    debuggerDidPause(callFramesPayload, reason, data)
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        if (this._delayedResumeTimeout) {
+            clearTimeout(this._delayedResumeTimeout);
+            this._delayedResumeTimeout = undefined;
+        }
+
+        var wasStillPaused = this._paused;
+
+        this._paused = true;
+        this._callFrames = [];
+
+        this._pauseReason = this._pauseReasonFromPayload(reason);
+        this._pauseData = data || null;
+
+        for (var i = 0; i < callFramesPayload.length; ++i) {
+            var callFramePayload = callFramesPayload[i];
+            var sourceCodeLocation = this._sourceCodeLocationFromPayload(callFramePayload.location);
+            // FIXME: There may be useful call frames without a source code location (native callframes), should we include them?
+            if (!sourceCodeLocation)
+                continue;
+            if (!sourceCodeLocation.sourceCode)
+                continue;
+
+            // Exclude the case where the call frame is in the inspector code.
+            if (!WebInspector.isDebugUIEnabled() && isWebInspectorDebugScript(sourceCodeLocation.sourceCode.url))
+                continue;
+
+            let scopeChain = this._scopeChainFromPayload(callFramePayload.scopeChain);
+            let callFrame = WebInspector.CallFrame.fromDebuggerPayload(callFramePayload, scopeChain, sourceCodeLocation);
+            this._callFrames.push(callFrame);
+        }
+
+        this._activeCallFrame = this._callFrames[0];
+
+        if (!wasStillPaused)
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Paused);
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange);
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    }
+
+    debuggerDidResume()
+    {
+        // Called from WebInspector.DebuggerObserver.
+
+        // We delay clearing the state and firing events so the user interface does not flash
+        // between brief steps or successive breakpoints.
+        this._delayedResumeTimeout = setTimeout(this._didResumeInternal.bind(this), 50);
+    }
+
+    playBreakpointActionSound(breakpointActionIdentifier)
+    {
+        InspectorFrontendHost.beep();
+    }
+
+    scriptDidParse(scriptIdentifier, url, isContentScript, startLine, startColumn, endLine, endColumn, sourceMapURL)
+    {
+        // Don't add the script again if it is already known.
+        if (this._scriptIdMap.has(scriptIdentifier)) {
+            const script = this._scriptIdMap.get(scriptIdentifier);
+            console.assert(script.url === (url || null));
+            console.assert(script.range.startLine === startLine);
+            console.assert(script.range.startColumn === startColumn);
+            console.assert(script.range.endLine === endLine);
+            console.assert(script.range.endColumn === endColumn);
+            return;
+        }
+
+        if (isWebInspectorInternalScript(url))
+            return;
+
+        var script = new WebInspector.Script(scriptIdentifier, new WebInspector.TextRange(startLine, startColumn, endLine, endColumn), url, isContentScript, sourceMapURL);
+
+        this._scriptIdMap.set(scriptIdentifier, script);
+
+        if (script.url) {
+            let scripts = this._scriptURLMap.get(script.url);
+            if (!scripts) {
+                scripts = [];
+                this._scriptURLMap.set(script.url, scripts);
+            }
+            scripts.push(script);
+        }
+
+        if (isWebInspectorDebugScript(script.url)) {
+            this._inspectorDebugScripts.push(script);
+            if (!WebInspector.isDebugUIEnabled())
+                return;
+        }
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ScriptAdded, {script});
+    }
+
+    isBreakpointRemovable(breakpoint)
+    {
+        return breakpoint !== this._allExceptionsBreakpoint && breakpoint !== this._allUncaughtExceptionsBreakpoint;
+    }
+
+    isBreakpointEditable(breakpoint)
+    {
+        return this.isBreakpointRemovable(breakpoint);
+    }
+
+    get nextBreakpointActionIdentifier()
+    {
+        return this._nextBreakpointActionIdentifier++;
+    }
+
+    // Private
+
+    _sourceCodeLocationFromPayload(payload)
+    {
+        let script = this._scriptIdMap.get(payload.scriptId);
+        console.assert(script);
+        if (!script)
+            return null;
+
+        return script.createSourceCodeLocation(payload.lineNumber, payload.columnNumber);
+    }
+
+    _scopeChainFromPayload(payload)
+    {
+        var scopeChain = [];
+        for (var i = 0; i < payload.length; ++i)
+            scopeChain.push(this._scopeChainNodeFromPayload(payload[i]));
+        return scopeChain;
+    }
+
+    _scopeChainNodeFromPayload(payload)
+    {
+        var type = null;
+        switch (payload.type) {
+        case DebuggerAgent.ScopeType.Global:
+            type = WebInspector.ScopeChainNode.Type.Global;
+            break;
+        case DebuggerAgent.ScopeType.With:
+            type = WebInspector.ScopeChainNode.Type.With;
+            break;
+        case DebuggerAgent.ScopeType.Closure:
+            type = WebInspector.ScopeChainNode.Type.Closure;
+            break;
+        case DebuggerAgent.ScopeType.Catch:
+            type = WebInspector.ScopeChainNode.Type.Catch;
+            break;
+        case DebuggerAgent.ScopeType.FunctionName:
+            type = WebInspector.ScopeChainNode.Type.FunctionName;
+            break;
+        case DebuggerAgent.ScopeType.NestedLexical:
+            type = WebInspector.ScopeChainNode.Type.Block;
+            break;
+        case DebuggerAgent.ScopeType.GlobalLexicalEnvironment:
+            type = WebInspector.ScopeChainNode.Type.GlobalLexicalEnvironment;
+            break;
+
+        // COMPATIBILITY (iOS 9): Debugger.ScopeType.Local used to be provided by the backend.
+        // Newer backends no longer send this enum value, it should be computed by the frontend.
+        // Map this to "Closure" type. The frontend can recalculate this when needed.
+        case DebuggerAgent.ScopeType.Local:
+            type = WebInspector.ScopeChainNode.Type.Closure;
+            break;
+
+        default:
+            console.error("Unknown type: " + payload.type);
+        }
+
+        var object = WebInspector.RemoteObject.fromPayload(payload.object);
+        return new WebInspector.ScopeChainNode(type, [object]);
+    }
+
+    _pauseReasonFromPayload(payload)
+    {
+        // FIXME: Handle other backend pause reasons.
+        switch (payload) {
+        case DebuggerAgent.PausedReason.Assert:
+            return WebInspector.DebuggerManager.PauseReason.Assertion;
+        case DebuggerAgent.PausedReason.Breakpoint:
+            return WebInspector.DebuggerManager.PauseReason.Breakpoint;
+        case DebuggerAgent.PausedReason.CSPViolation:
+            return WebInspector.DebuggerManager.PauseReason.CSPViolation;
+        case DebuggerAgent.PausedReason.DebuggerStatement:
+            return WebInspector.DebuggerManager.PauseReason.DebuggerStatement;
+        case DebuggerAgent.PausedReason.Exception:
+            return WebInspector.DebuggerManager.PauseReason.Exception;
+        case DebuggerAgent.PausedReason.PauseOnNextStatement:
+            return WebInspector.DebuggerManager.PauseReason.PauseOnNextStatement;
+        default:
+            return WebInspector.DebuggerManager.PauseReason.Other;
+        }
+    }
+
+    _debuggerBreakpointActionType(type)
+    {
+        switch (type) {
+        case WebInspector.BreakpointAction.Type.Log:
+            return DebuggerAgent.BreakpointActionType.Log;
+        case WebInspector.BreakpointAction.Type.Evaluate:
+            return DebuggerAgent.BreakpointActionType.Evaluate;
+        case WebInspector.BreakpointAction.Type.Sound:
+            return DebuggerAgent.BreakpointActionType.Sound;
+        case WebInspector.BreakpointAction.Type.Probe:
+            return DebuggerAgent.BreakpointActionType.Probe;
+        default:
+            console.assert(false);
+            return DebuggerAgent.BreakpointActionType.Log;
+        }
+    }
+
+    _setBreakpoint(breakpoint, callback)
+    {
+        console.assert(!breakpoint.identifier);
+        console.assert(!breakpoint.disabled);
+
+        if (breakpoint.identifier || breakpoint.disabled)
+            return;
+
+        if (!this._restoringBreakpoints) {
+            // Enable breakpoints since a breakpoint is being set. This eliminates
+            // a multi-step process for the user that can be confusing.
+            this.breakpointsEnabled = true;
+        }
+
+        function didSetBreakpoint(error, breakpointIdentifier, locations)
+        {
+            if (error)
+                return;
+
+            this._breakpointIdMap.set(breakpointIdentifier, breakpoint);
+
+            breakpoint.identifier = breakpointIdentifier;
+
+            // Debugger.setBreakpoint returns a single location.
+            if (!(locations instanceof Array))
+                locations = [locations];
+
+            for (var location of locations)
+                this.breakpointResolved(breakpointIdentifier, location);
+
+            if (typeof callback === "function")
+                callback();
+        }
+
+        // The breakpoint will be resolved again by calling DebuggerAgent, so mark it as unresolved.
+        // If something goes wrong it will stay unresolved and show up as such in the user interface.
+        breakpoint.resolved = false;
+
+        // Convert BreakpointAction types to DebuggerAgent protocol types.
+        // NOTE: Breakpoint.options returns new objects each time, so it is safe to modify.
+        // COMPATIBILITY (iOS 7): Debugger.BreakpointActionType did not exist yet.
+        var options;
+        if (DebuggerAgent.BreakpointActionType) {
+            options = breakpoint.options;
+            if (options.actions.length) {
+                for (var i = 0; i < options.actions.length; ++i)
+                    options.actions[i].type = this._debuggerBreakpointActionType(options.actions[i].type);
+            }
+        }
+
+        // COMPATIBILITY (iOS 7): iOS 7 and earlier, DebuggerAgent.setBreakpoint* took a "condition" string argument.
+        // This has been replaced with an "options" BreakpointOptions object.
+        if (breakpoint.url) {
+            DebuggerAgent.setBreakpointByUrl.invoke({
+                lineNumber: breakpoint.sourceCodeLocation.lineNumber,
+                url: breakpoint.url,
+                urlRegex: undefined,
+                columnNumber: breakpoint.sourceCodeLocation.columnNumber,
+                condition: breakpoint.condition,
+                options
+            }, didSetBreakpoint.bind(this));
+        } else if (breakpoint.scriptIdentifier) {
+            DebuggerAgent.setBreakpoint.invoke({
+                location: {scriptId: breakpoint.scriptIdentifier, lineNumber: breakpoint.sourceCodeLocation.lineNumber, columnNumber: breakpoint.sourceCodeLocation.columnNumber},
+                condition: breakpoint.condition,
+                options
+            }, didSetBreakpoint.bind(this));
+        }
+    }
+
+    _removeBreakpoint(breakpoint, callback)
+    {
+        if (!breakpoint.identifier)
+            return;
+
+        function didRemoveBreakpoint(error)
+        {
+            if (error)
+                console.error(error);
+
+            this._breakpointIdMap.delete(breakpoint.identifier);
+
+            breakpoint.identifier = null;
+
+            // Don't reset resolved here since we want to keep disabled breakpoints looking like they
+            // are resolved in the user interface. They will get marked as unresolved in reset.
+
+            if (typeof callback === "function")
+                callback();
+        }
+
+        DebuggerAgent.removeBreakpoint(breakpoint.identifier, didRemoveBreakpoint.bind(this));
+    }
+
+    _breakpointDisplayLocationDidChange(event)
+    {
+        if (this._ignoreBreakpointDisplayLocationDidChangeEvent)
+            return;
+
+        var breakpoint = event.target;
+        if (!breakpoint.identifier || breakpoint.disabled)
+            return;
+
+        // Remove the breakpoint with its old id.
+        this._removeBreakpoint(breakpoint, breakpointRemoved.bind(this));
+
+        function breakpointRemoved()
+        {
+            // Add the breakpoint at its new lineNumber and get a new id.
+            this._setBreakpoint(breakpoint);
+
+            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointMoved, {breakpoint});
+        }
+    }
+
+    _breakpointDisabledStateDidChange(event)
+    {
+        this._saveBreakpoints();
+
+        let breakpoint = event.target;
+        if (breakpoint === this._allExceptionsBreakpoint) {
+            if (!breakpoint.disabled)
+                this.breakpointsEnabled = true;
+            this._allExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
+            this._updateBreakOnExceptionsState();
+            return;
+        }
+
+        if (breakpoint === this._allUncaughtExceptionsBreakpoint) {
+            if (!breakpoint.disabled)
+                this.breakpointsEnabled = true;
+            this._allUncaughtExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
+            this._updateBreakOnExceptionsState();
+            return;
+        }
+
+        if (breakpoint.disabled)
+            this._removeBreakpoint(breakpoint);
+        else
+            this._setBreakpoint(breakpoint);
+    }
+
+    _breakpointEditablePropertyDidChange(event)
+    {
+        this._saveBreakpoints();
+
+        let breakpoint = event.target;
+        if (breakpoint.disabled)
+            return;
+
+        console.assert(this.isBreakpointEditable(breakpoint));
+        if (!this.isBreakpointEditable(breakpoint))
+            return;
+
+        // Remove the breakpoint with its old id.
+        this._removeBreakpoint(breakpoint, breakpointRemoved.bind(this));
+
+        function breakpointRemoved()
+        {
+            // Add the breakpoint with its new condition and get a new id.
+            this._setBreakpoint(breakpoint);
+        }
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this._didResumeInternal();
+    }
+
+    _didResumeInternal()
+    {
+        if (!this._activeCallFrame)
+            return;
+
+        if (this._delayedResumeTimeout) {
+            clearTimeout(this._delayedResumeTimeout);
+            this._delayedResumeTimeout = undefined;
+        }
+
+        this._paused = false;
+        this._callFrames = null;
+        this._activeCallFrame = null;
+
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange);
+        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
+    }
+
+    _updateBreakOnExceptionsState()
+    {
+        var state = "none";
+
+        if (this._breakpointsEnabledSetting.value) {
+            if (!this._allExceptionsBreakpoint.disabled)
+                state = "all";
+            else if (!this._allUncaughtExceptionsBreakpoint.disabled)
+                state = "uncaught";
+        }
+
+        switch (state) {
+        case "all":
+            // Mark the uncaught breakpoint as unresolved since "all" includes "uncaught".
+            // That way it is clear in the user interface that the breakpoint is ignored.
+            this._allUncaughtExceptionsBreakpoint.resolved = false;
+            break;
+        case "uncaught":
+        case "none":
+            // Mark the uncaught breakpoint as resolved again.
+            this._allUncaughtExceptionsBreakpoint.resolved = true;
+            break;
+        }
+
+        DebuggerAgent.setPauseOnExceptions(state);
+    }
+
+    _saveBreakpoints()
+    {
+        if (this._restoringBreakpoints)
+            return;
+
+        let breakpointsToSave = this._breakpoints.filter((breakpoint) => !!breakpoint.url);
+        let serializedBreakpoints = breakpointsToSave.map((breakpoint) => breakpoint.info);
+        this._breakpointsSetting.value = serializedBreakpoints;
+    }
+
+    _associateBreakpointsWithSourceCode(breakpoints, sourceCode)
+    {
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = true;
+
+        for (var i = 0; i < breakpoints.length; ++i) {
+            var breakpoint = breakpoints[i];
+            if (breakpoint.sourceCodeLocation.sourceCode === null)
+                breakpoint.sourceCodeLocation.sourceCode = sourceCode;
+            // SourceCodes can be unequal if the SourceCodeLocation is associated with a Script and we are looking at the Resource.
+            console.assert(breakpoint.sourceCodeLocation.sourceCode === sourceCode || breakpoint.sourceCodeLocation.sourceCode.url === sourceCode.url);
+        }
+
+        this._ignoreBreakpointDisplayLocationDidChangeEvent = false;
+    }
+
+    _debugUIEnabledDidChange()
+    {
+        let eventType = WebInspector.isDebugUIEnabled() ? WebInspector.DebuggerManager.Event.ScriptAdded : WebInspector.DebuggerManager.Event.ScriptRemoved;
+        for (let script of this._inspectorDebugScripts)
+            this.dispatchEventToListeners(eventType, {script});
+    }
+};
+
+WebInspector.DebuggerManager.Event = {
+    BreakpointAdded: "debugger-manager-breakpoint-added",
+    BreakpointRemoved: "debugger-manager-breakpoint-removed",
+    BreakpointMoved: "debugger-manager-breakpoint-moved",
+    WaitingToPause: "debugger-manager-waiting-to-pause",
+    Paused: "debugger-manager-paused",
+    Resumed: "debugger-manager-resumed",
+    CallFramesDidChange: "debugger-manager-call-frames-did-change",
+    ActiveCallFrameDidChange: "debugger-manager-active-call-frame-did-change",
+    ScriptAdded: "debugger-manager-script-added",
+    ScriptRemoved: "debugger-manager-script-removed",
+    ScriptsCleared: "debugger-manager-scripts-cleared",
+    BreakpointsEnabledDidChange: "debugger-manager-breakpoints-enabled-did-change"
+};
+
+WebInspector.DebuggerManager.PauseReason = {
+    Assertion: "assertion",
+    Breakpoint: "breakpoint",
+    CSPViolation: "CSP-violation",
+    DebuggerStatement: "debugger-statement",
+    Exception: "exception",
+    PauseOnNextStatement: "pause-on-next-statement",
+    Other: "other",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DragToAdjustController.js b/Source/WebInspectorUI/UserInterface/Controllers/DragToAdjustController.js
new file mode 100644
index 000000000..a86009ead
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DragToAdjustController.js
@@ -0,0 +1,238 @@
+/*
+ * Copyright (C) 2014 Antoine Quint
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DragToAdjustController = class DragToAdjustController
+{
+    constructor(delegate)
+    {
+        this._delegate = delegate;
+
+        this._element = null;
+        this._active = false;
+        this._enabled = false;
+        this._dragging = false;
+        this._tracksMouseClickAndDrag = false;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    set element(element)
+    {
+        this._element = element;
+    }
+
+    get enabled()
+    {
+        return this._enabled;
+    }
+
+    set enabled(enabled)
+    {
+        if (this._enabled === enabled)
+            return;
+
+        if (enabled) {
+            this._element.addEventListener("mouseenter", this);
+            this._element.addEventListener("mouseleave", this);
+        } else {
+            this._element.removeEventListener("mouseenter", this);
+            this._element.removeEventListener("mouseleave", this);
+        }
+    }
+
+    get active()
+    {
+        return this._active;
+    }
+
+    set active(active)
+    {
+        if (!this._element)
+            return;
+
+        if (this._active === active)
+            return;
+
+        if (active) {
+            WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
+            this._element.addEventListener("mousemove", this);
+        } else {
+            WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._modifiersDidChange, this);
+            this._element.removeEventListener("mousemove", this);
+            this._setTracksMouseClickAndDrag(false);
+        }
+
+        this._active = active;
+
+        if (this._delegate && typeof this._delegate.dragToAdjustControllerActiveStateChanged === "function")
+            this._delegate.dragToAdjustControllerActiveStateChanged(this);
+    }
+
+    reset()
+    {
+        this._setTracksMouseClickAndDrag(false);
+        this._element.classList.remove(WebInspector.DragToAdjustController.StyleClassName);
+
+        if (this._delegate && typeof this._delegate.dragToAdjustControllerDidReset === "function")
+            this._delegate.dragToAdjustControllerDidReset(this);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch(event.type) {
+        case "mouseenter":
+            if (!this._dragging) {
+                if (this._delegate && typeof this._delegate.dragToAdjustControllerCanBeActivated === "function")
+                    this.active = this._delegate.dragToAdjustControllerCanBeActivated(this);
+                else
+                    this.active = true;
+            }
+            break;
+        case "mouseleave":
+            if (!this._dragging)
+                this.active = false;
+            break;
+        case "mousemove":
+            if (this._dragging)
+                this._mouseWasDragged(event);
+            else
+                this._mouseMoved(event);
+            break;
+        case "mousedown":
+            this._mouseWasPressed(event);
+            break;
+        case "mouseup":
+            this._mouseWasReleased(event);
+            break;
+        case "contextmenu":
+            event.preventDefault();
+            break;
+        }
+    }
+
+    // Private
+
+    _setDragging(dragging)
+    {
+        if (this._dragging === dragging)
+            return;
+
+        console.assert(window.event);
+        if (dragging)
+            WebInspector.elementDragStart(this._element, this, this, window.event, "col-resize", window);
+        else
+            WebInspector.elementDragEnd(window.event);
+
+        this._dragging = dragging;
+    }
+
+    _setTracksMouseClickAndDrag(tracksMouseClickAndDrag)
+    {
+        if (this._tracksMouseClickAndDrag === tracksMouseClickAndDrag)
+            return;
+
+        if (tracksMouseClickAndDrag) {
+            this._element.classList.add(WebInspector.DragToAdjustController.StyleClassName);
+            window.addEventListener("mousedown", this, true);
+            window.addEventListener("contextmenu", this, true);
+        } else {
+            this._element.classList.remove(WebInspector.DragToAdjustController.StyleClassName);
+            window.removeEventListener("mousedown", this, true);
+            window.removeEventListener("contextmenu", this, true);
+            this._setDragging(false);
+        }
+
+        this._tracksMouseClickAndDrag = tracksMouseClickAndDrag;
+    }
+
+    _modifiersDidChange(event)
+    {
+        var canBeAdjusted = WebInspector.modifierKeys.altKey;
+        if (canBeAdjusted && this._delegate && typeof this._delegate.dragToAdjustControllerCanBeAdjusted === "function")
+            canBeAdjusted = this._delegate.dragToAdjustControllerCanBeAdjusted(this);
+
+        this._setTracksMouseClickAndDrag(canBeAdjusted);
+    }
+
+    _mouseMoved(event)
+    {
+        var canBeAdjusted = event.altKey;
+        if (canBeAdjusted && this._delegate && typeof this._delegate.dragToAdjustControllerCanAdjustObjectAtPoint === "function")
+            canBeAdjusted = this._delegate.dragToAdjustControllerCanAdjustObjectAtPoint(this, WebInspector.Point.fromEvent(event));
+
+        this._setTracksMouseClickAndDrag(canBeAdjusted);
+    }
+
+    _mouseWasPressed(event)
+    {
+        this._lastX = event.screenX;
+
+        this._setDragging(true);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _mouseWasDragged(event)
+    {
+        var x = event.screenX;
+        var amount = x - this._lastX;
+
+        if (Math.abs(amount) < 1)
+            return;
+
+        this._lastX = x;
+
+        if (event.ctrlKey)
+            amount /= 10;
+        else if (event.shiftKey)
+            amount *= 10;
+
+        if (this._delegate && typeof this._delegate.dragToAdjustControllerWasAdjustedByAmount === "function")
+            this._delegate.dragToAdjustControllerWasAdjustedByAmount(this, amount);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _mouseWasReleased(event)
+    {
+        this._setDragging(false);
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.reset();
+    }
+};
+
+WebInspector.DragToAdjustController.StyleClassName = "drag-to-adjust";
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/Formatter.js b/Source/WebInspectorUI/UserInterface/Controllers/Formatter.js
new file mode 100644
index 000000000..2a1652733
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/Formatter.js
@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Formatter = class Formatter
+{
+    constructor(codeMirror, builder)
+    {
+        console.assert(codeMirror);
+        console.assert(builder);
+
+        this._codeMirror = codeMirror;
+        this._builder = builder;
+
+        this._lastToken = null;
+        this._lastContent = "";
+    }
+
+    // Public
+
+    format(from, to)
+    {
+        console.assert(this._builder.originalContent === null);
+        if (this._builder.originalContent !== null)
+            return;
+
+        var outerMode = this._codeMirror.getMode();
+        var content = this._codeMirror.getRange(from, to);
+        var state = CodeMirror.copyState(outerMode, this._codeMirror.getTokenAt(from).state);
+        this._builder.setOriginalContent(content);
+
+        var lineOffset = 0;
+        var lines = content.split("\n");
+        for (var i = 0; i < lines.length; ++i) {
+            var line = lines[i];
+            var startOfNewLine = true;
+            var firstTokenOnLine = true;
+            var stream = new CodeMirror.StringStream(line);
+            while (!stream.eol()) {
+                var innerMode = CodeMirror.innerMode(outerMode, state);
+                var token = outerMode.token(stream, state);
+                var isWhiteSpace = token === null && /^\s*$/.test(stream.current());
+                this._handleToken(innerMode.mode, token, state, stream, lineOffset + stream.start, isWhiteSpace, startOfNewLine, firstTokenOnLine);
+                stream.start = stream.pos;
+                startOfNewLine = false;
+                if (firstTokenOnLine && !isWhiteSpace)
+                    firstTokenOnLine = false;
+            }
+
+            if (firstTokenOnLine)
+                this._handleEmptyLine();
+
+            lineOffset += line.length + 1; // +1 for the "\n" removed in split.
+            this._handleLineEnding(lineOffset - 1); // -1 for the index of the "\n".
+        }
+
+        this._builder.finish();
+    }
+
+    // Private
+
+    _handleToken(mode, token, state, stream, originalPosition, isWhiteSpace, startOfNewLine, firstTokenOnLine)
+    {
+        // String content of the token.
+        var content = stream.current();
+
+        // Start of a new line. Insert a newline to be safe if code was not-ASI safe. These are collapsed.
+        if (startOfNewLine)
+            this._builder.appendNewline();
+
+        // Whitespace. Remove all spaces or collapse to a single space.
+        if (isWhiteSpace) {
+            this._builder.appendSpace();
+            return;
+        }
+
+        // Avoid some hooks for content in comments.
+        var isComment = token && /\bcomment\b/.test(token);
+
+        if (mode.modifyStateForTokenPre)
+            mode.modifyStateForTokenPre(this._lastToken, this._lastContent, token, state, content, isComment);
+
+        // Should we remove the last whitespace?
+        if (this._builder.lastTokenWasWhitespace && mode.removeLastWhitespace(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.removeLastWhitespace();
+
+        // Should we remove the last newline?
+        if (this._builder.lastTokenWasNewline && mode.removeLastNewline(this._lastToken, this._lastContent, token, state, content, isComment, firstTokenOnLine))
+            this._builder.removeLastNewline();
+
+        // Add whitespace after the last token?
+        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceAfterLastToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendSpace();
+
+        // Add whitespace before this token?
+        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendSpace();
+
+        // Should we dedent before this token?
+        var dedents = mode.dedentsBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment);
+        while (dedents-- > 0)
+            this._builder.dedent();
+
+        // Should we add a newline before this token?
+        if (mode.newlineBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.appendNewline();
+
+        // Should we indent before this token?
+        if (mode.indentBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.indent();
+
+        // Append token.
+        this._builder.appendToken(content, originalPosition);
+
+        // Let the pretty printer update any state it keeps track of.
+        if (mode.modifyStateForTokenPost)
+            mode.modifyStateForTokenPost(this._lastToken, this._lastContent, token, state, content, isComment);
+
+        // Should we indent or dedent after this token?
+        if (!isComment && mode.indentAfterToken(this._lastToken, this._lastContent, token, state, content, isComment))
+            this._builder.indent();
+
+        // Should we add newlines after this token?
+        var newlines = mode.newlinesAfterToken(this._lastToken, this._lastContent, token, state, content, isComment);
+        if (newlines)
+            this._builder.appendMultipleNewlines(newlines);
+
+        // Record this token as the last token.
+        this._lastToken = token;
+        this._lastContent = content;
+    }
+
+    _handleEmptyLine()
+    {
+        // Preserve original whitespace only lines by adding a newline.
+        // However, don't do this if the builder just added multiple newlines.
+        if (!(this._builder.lastTokenWasNewline && this._builder.lastNewlineAppendWasMultiple))
+            this._builder.appendNewline(true);
+    }
+
+    _handleLineEnding(originalNewLinePosition)
+    {
+        // Record the original line ending.
+        this._builder.addOriginalLineEnding(originalNewLinePosition);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/FormatterContentBuilder.js b/Source/WebInspectorUI/UserInterface/Controllers/FormatterContentBuilder.js
new file mode 100644
index 000000000..e9173141b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/FormatterContentBuilder.js
@@ -0,0 +1,242 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Tobias Reiss <tobi+webkit@basecode.de>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FormatterContentBuilder = class FormatterContentBuilder
+{
+    constructor(mapping, originalLineEndings, formattedLineEndings, originalOffset, formattedOffset, indentString)
+    {
+        this._originalContent = null;
+        this._formattedContent = [];
+        this._formattedContentLength = 0;
+
+        this._startOfLine = true;
+        this.lastTokenWasNewline = false;
+        this.lastTokenWasWhitespace = false;
+        this.lastNewlineAppendWasMultiple = false;
+
+        this._indent = 0;
+        this._indentString = indentString;
+        this._indentCache = ["", this._indentString];
+
+        this._mapping = mapping;
+        this._originalLineEndings = originalLineEndings || [];
+        this._formattedLineEndings = formattedLineEndings || [];
+        this._originalOffset = originalOffset || 0;
+        this._formattedOffset = formattedOffset || 0;
+
+        this._lastOriginalPosition = 0;
+        this._lastFormattedPosition = 0;
+    }
+
+    // Public
+
+    get originalContent()
+    {
+        return this._originalContent;
+    }
+
+    get formattedContent()
+    {
+        var formatted = this._formattedContent.join("");
+        console.assert(formatted.length === this._formattedContentLength);
+        return formatted;
+    }
+
+    get mapping()
+    {
+        return this._mapping;
+    }
+
+    get originalLineEndings()
+    {
+        return this._originalLineEndings;
+    }
+
+    get formattedLineEndings()
+    {
+        return this._formattedLineEndings;
+    }
+
+    setOriginalContent(originalContent)
+    {
+        console.assert(!this._originalContent);
+        this._originalContent = originalContent;
+    }
+
+    appendToken(string, originalPosition)
+    {
+        if (this._startOfLine)
+            this._appendIndent();
+
+        this._addMappingIfNeeded(originalPosition);
+
+        this._append(string);
+        this._startOfLine = false;
+        this.lastTokenWasNewline = false;
+        this.lastTokenWasWhitespace = false;
+    }
+
+    appendSpace()
+    {
+        if (!this._startOfLine) {
+            this._append(" ");
+            this.lastTokenWasNewline = false;
+            this.lastTokenWasWhitespace = true;
+        }
+    }
+
+    appendNewline(force)
+    {
+        if ((!this.lastTokenWasNewline && !this._startOfLine) || force) {
+            this._append("\n");
+            this._addFormattedLineEnding();
+            this._startOfLine = true;
+            this.lastTokenWasNewline = true;
+            this.lastTokenWasWhitespace = false;
+            this.lastNewlineAppendWasMultiple = false;
+        }
+    }
+
+    appendMultipleNewlines(newlines)
+    {
+        console.assert(newlines > 0);
+
+        var wasMultiple = newlines > 1;
+
+        while (newlines-- > 0)
+            this.appendNewline(true);
+
+        if (wasMultiple)
+            this.lastNewlineAppendWasMultiple = true;
+    }
+
+    removeLastNewline()
+    {
+        console.assert(this.lastTokenWasNewline);
+        console.assert(this._formattedContent.lastValue === "\n");
+        if (this.lastTokenWasNewline) {
+            this._popFormattedContent();
+            this._formattedLineEndings.pop();
+            this._startOfLine = false;
+            this.lastTokenWasNewline = false;
+            this.lastTokenWasWhitespace = false;
+        }
+    }
+
+    removeLastWhitespace()
+    {
+        console.assert(this.lastTokenWasWhitespace);
+        console.assert(this._formattedContent.lastValue === " ");
+        if (this.lastTokenWasWhitespace) {
+            this._popFormattedContent();
+            // No need to worry about `_startOfLine` and `lastTokenWasNewline`
+            // because `appendSpace` takes care of not adding whitespace
+            // to the beginning of a line.
+            this.lastTokenWasWhitespace = false;
+        }
+    }
+
+    indent()
+    {
+        ++this._indent;
+    }
+
+    dedent()
+    {
+        --this._indent;
+
+        console.assert(this._indent >= 0);
+        if (this._indent < 0)
+            this._indent = 0;
+    }
+
+    addOriginalLineEnding(originalPosition)
+    {
+        this._originalLineEndings.push(originalPosition);
+    }
+
+    finish()
+    {
+        this.appendNewline();
+    }
+
+    // Private
+
+    _popFormattedContent()
+    {
+        var removed = this._formattedContent.pop();
+        this._formattedContentLength -= removed.length;
+    }
+
+    _append(str)
+    {
+        this._formattedContent.push(str);
+        this._formattedContentLength += str.length;
+    }
+
+    _appendIndent()
+    {
+        // Indent is already in the cache.
+        if (this._indent < this._indentCache.length) {
+            this._append(this._indentCache[this._indent]);
+            return;
+        }
+
+        // Indent was not in the cache, fill up the cache up with what was needed.
+        var maxCacheIndent = 20;
+        var max = Math.min(this._indent, maxCacheIndent);
+        for (var i = this._indentCache.length; i <= max; ++i)
+            this._indentCache[i] = this._indentCache[i - 1] + this._indentString;
+
+        // Append indents as needed.
+        var indent = this._indent;
+        do {
+            if (indent >= maxCacheIndent)
+                this._append(this._indentCache[maxCacheIndent]);
+            else
+                this._append(this._indentCache[indent]);
+            indent -= maxCacheIndent;
+        } while (indent > 0);
+    }
+
+    _addMappingIfNeeded(originalPosition)
+    {
+        if (originalPosition - this._lastOriginalPosition === this._formattedContentLength - this._lastFormattedPosition)
+            return;
+
+        this._mapping.original.push(this._originalOffset + originalPosition);
+        this._mapping.formatted.push(this._formattedOffset + this._formattedContentLength);
+
+        this._lastOriginalPosition = originalPosition;
+        this._lastFormattedPosition = this._formattedContentLength;
+    }
+
+    _addFormattedLineEnding()
+    {
+        console.assert(this._formattedContent.lastValue === "\n");
+        this._formattedLineEndings.push(this._formattedContentLength - 1);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/FormatterSourceMap.js b/Source/WebInspectorUI/UserInterface/Controllers/FormatterSourceMap.js
new file mode 100644
index 000000000..934e04633
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/FormatterSourceMap.js
@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FormatterSourceMap = class FormatterSourceMap extends WebInspector.Object
+{
+    constructor(originalLineEndings, formattedLineEndings, mapping)
+    {
+        super();
+
+        this._originalLineEndings = originalLineEndings;
+        this._formattedLineEndings = formattedLineEndings;
+        this._mapping = mapping;
+    }
+
+    // Static
+
+    static fromBuilder(builder)
+    {
+        return new WebInspector.FormatterSourceMap(builder.originalLineEndings, builder.formattedLineEndings, builder.mapping);
+    }
+
+    // Public
+
+    originalToFormatted(lineNumber, columnNumber)
+    {
+        var originalPosition = this._locationToPosition(this._originalLineEndings, lineNumber || 0, columnNumber || 0);
+        return this.originalPositionToFormatted(originalPosition);
+    }
+
+    originalPositionToFormatted(originalPosition)
+    {
+        var formattedPosition = this._convertPosition(this._mapping.original, this._mapping.formatted, originalPosition);
+        return this._positionToLocation(this._formattedLineEndings, formattedPosition);
+    }
+
+
+    formattedToOriginal(lineNumber, columnNumber)
+    {
+        var originalPosition = this.formattedToOriginalOffset(lineNumber, columnNumber);
+        return this._positionToLocation(this._originalLineEndings, originalPosition);
+    }
+
+    formattedToOriginalOffset(lineNumber, columnNumber)
+    {
+        var formattedPosition = this._locationToPosition(this._formattedLineEndings, lineNumber || 0, columnNumber || 0);
+        var originalPosition = this._convertPosition(this._mapping.formatted, this._mapping.original, formattedPosition);
+        return originalPosition;
+    }
+
+    // Private
+
+    _locationToPosition(lineEndings, lineNumber, columnNumber)
+    {
+        var lineOffset = lineNumber ? lineEndings[lineNumber - 1] + 1 : 0;
+        return lineOffset + columnNumber;
+    }
+
+    _positionToLocation(lineEndings, position)
+    {
+        var lineNumber = lineEndings.upperBound(position - 1);
+        if (!lineNumber)
+            var columnNumber = position;
+        else
+            var columnNumber = position - lineEndings[lineNumber - 1] - 1;
+        return {lineNumber, columnNumber};
+    }
+
+    _convertPosition(positions1, positions2, positionInPosition1)
+    {
+        var index = positions1.upperBound(positionInPosition1) - 1;
+        var convertedPosition = positions2[index] + positionInPosition1 - positions1[index];
+        if (index < positions2.length - 1 && convertedPosition > positions2[index + 1])
+            convertedPosition = positions2[index + 1];
+        return convertedPosition;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js b/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js
new file mode 100644
index 000000000..9283708c1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js
@@ -0,0 +1,601 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FrameResourceManager = class FrameResourceManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        if (window.PageAgent)
+            PageAgent.enable();
+        if (window.NetworkAgent)
+            NetworkAgent.enable();
+
+        WebInspector.notifications.addEventListener(WebInspector.Notification.ExtraDomainsActivated, this._extraDomainsActivated, this);
+
+        this.initialize();
+    }
+
+    // Public
+
+    initialize()
+    {
+        var oldMainFrame = this._mainFrame;
+
+        this._frameIdentifierMap = {};
+        this._mainFrame = null;
+        this._resourceRequestIdentifierMap = {};
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+
+        this._waitingForMainFrameResourceTreePayload = true;
+        if (window.PageAgent)
+            PageAgent.getResourceTree(this._processMainFrameResourceTreePayload.bind(this));
+    }
+
+    get mainFrame()
+    {
+        return this._mainFrame;
+    }
+
+    get frames()
+    {
+        var frames = [];
+        for (var key in this._frameIdentifierMap)
+            frames.push(this._frameIdentifierMap[key]);
+
+        return frames;
+    }
+
+    frameForIdentifier(frameId)
+    {
+        return this._frameIdentifierMap[frameId] || null;
+    }
+
+    frameDidNavigate(framePayload)
+    {
+        // Called from WebInspector.PageObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var frameWasLoadedInstantly = false;
+
+        var frame = this.frameForIdentifier(framePayload.id);
+        if (!frame) {
+            // If the frame wasn't known before now, then the main resource was loaded instantly (about:blank, etc.)
+            // Make a new resource (which will make the frame). Mark will mark it as loaded at the end too since we
+            // don't expect any more events about the load finishing for these frames.
+            var frameResource = this._addNewResourceToFrame(null, framePayload.id, framePayload.loaderId, framePayload.url, null, null, null, null, null, framePayload.name, framePayload.securityOrigin);
+            frame = frameResource.parentFrame;
+            frameWasLoadedInstantly = true;
+
+            console.assert(frame);
+            if (!frame)
+                return;
+        }
+
+        if (framePayload.loaderId === frame.provisionalLoaderIdentifier) {
+            // There was a provisional load in progress, commit it.
+            frame.commitProvisionalLoad(framePayload.securityOrigin);
+        } else {
+            if (frame.mainResource.url !== framePayload.url || frame.loaderIdentifier !== framePayload.loaderId) {
+                // Navigations like back/forward do not have provisional loads, so create a new main resource here.
+                var mainResource = new WebInspector.Resource(framePayload.url, framePayload.mimeType, null, framePayload.loaderId);
+            } else {
+                // The main resource is already correct, so reuse it.
+                var mainResource = frame.mainResource;
+            }
+
+            frame.initialize(framePayload.name, framePayload.securityOrigin, framePayload.loaderId, mainResource);
+        }
+
+        var oldMainFrame = this._mainFrame;
+
+        if (framePayload.parentId) {
+            var parentFrame = this.frameForIdentifier(framePayload.parentId);
+            console.assert(parentFrame);
+
+            if (frame === this._mainFrame)
+                this._mainFrame = null;
+
+            if (frame.parentFrame !== parentFrame)
+                parentFrame.addChildFrame(frame);
+        } else {
+            if (frame.parentFrame)
+                frame.parentFrame.removeChildFrame(frame);
+            this._mainFrame = frame;
+        }
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+
+        if (frameWasLoadedInstantly)
+            frame.mainResource.markAsFinished();
+    }
+
+    frameDidDetach(frameId)
+    {
+        // Called from WebInspector.PageObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var frame = this.frameForIdentifier(frameId);
+        if (!frame)
+            return;
+
+        if (frame.parentFrame)
+            frame.parentFrame.removeChildFrame(frame);
+
+        delete this._frameIdentifierMap[frame.id];
+
+        var oldMainFrame = this._mainFrame;
+
+        if (frame === this._mainFrame)
+            this._mainFrame = null;
+
+        frame.clearExecutionContexts();
+
+        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.FrameWasRemoved, {frame});
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+    }
+
+    resourceRequestWillBeSent(requestIdentifier, frameIdentifier, loaderIdentifier, request, type, redirectResponse, timestamp, initiator)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        // COMPATIBILITY (iOS 8): Timeline timestamps for legacy backends are computed
+        // dynamically from the first backend timestamp received. For navigations we
+        // need to reset that base timestamp, and an appropriate timestamp to use is
+        // the new main resource's will be sent timestamp. So save this value on the
+        // resource in case it becomes a main resource.
+        var originalRequestWillBeSentTimestamp = timestamp;
+
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+        if (resource) {
+            // This is an existing request which is being redirected, update the resource.
+            console.assert(redirectResponse);
+            resource.updateForRedirectResponse(request.url, request.headers, elapsedTime);
+            return;
+        }
+
+        var initiatorSourceCodeLocation = this._initiatorSourceCodeLocationFromPayload(initiator);
+
+        // This is a new request, make a new resource and add it to the right frame.
+        resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, request.url, type, request.method, request.headers, request.postData, elapsedTime, null, null, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp);
+
+        // Associate the resource with the requestIdentifier so it can be found in future loading events.
+        this._resourceRequestIdentifierMap[requestIdentifier] = resource;
+    }
+
+    markResourceRequestAsServedFromMemoryCache(requestIdentifier)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+
+        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
+        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
+        // just doesn't have a requestIdentifier for us to look it up.
+        if (!resource)
+            return;
+
+        resource.markAsCached();
+    }
+
+    resourceRequestWasServedFromMemoryCache(requestIdentifier, frameIdentifier, loaderIdentifier, cachedResourcePayload, timestamp, initiator)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        console.assert(!(requestIdentifier in this._resourceRequestIdentifierMap));
+
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);
+        var initiatorSourceCodeLocation = this._initiatorSourceCodeLocationFromPayload(initiator);
+        var response = cachedResourcePayload.response;
+        var resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, cachedResourcePayload.url, cachedResourcePayload.type, "GET", null, null, elapsedTime, null, null, initiatorSourceCodeLocation);
+        resource.markAsCached();
+        resource.updateForResponse(cachedResourcePayload.url, response.mimeType, cachedResourcePayload.type, response.headers, response.status, response.statusText, elapsedTime);
+        resource.increaseSize(cachedResourcePayload.bodySize, elapsedTime);
+        resource.increaseTransferSize(cachedResourcePayload.bodySize);
+        resource.markAsFinished(elapsedTime);
+
+        if (cachedResourcePayload.sourceMapURL)
+            WebInspector.sourceMapManager.downloadSourceMap(cachedResourcePayload.sourceMapURL, resource.url, resource);
+
+        // No need to associate the resource with the requestIdentifier, since this is the only event
+        // sent for memory cache resource loads.
+    }
+
+    resourceRequestDidReceiveResponse(requestIdentifier, frameIdentifier, loaderIdentifier, type, response, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+
+        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
+        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
+        // just doesn't have a requestIdentifier for us to look it up, but we can try to look it up by its URL.
+        if (!resource) {
+            var frame = this.frameForIdentifier(frameIdentifier);
+            if (frame)
+                resource = frame.resourceForURL(response.url);
+
+            // If we find the resource this way we had marked it earlier as finished via PageAgent.getResourceTree.
+            // Associate the resource with the requestIdentifier so it can be found in future loading events.
+            // and roll it back to an unfinished state, we know now it is still loading.
+            if (resource) {
+                this._resourceRequestIdentifierMap[requestIdentifier] = resource;
+                resource.revertMarkAsFinished();
+            }
+        }
+
+        // If we haven't found an existing Resource by now, then it is a resource that was loading when the inspector
+        // opened and we just missed the resourceRequestWillBeSent for it. So make a new resource and add it.
+        if (!resource) {
+            resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, response.url, type, null, response.requestHeaders, null, elapsedTime, null, null, null);
+
+            // Associate the resource with the requestIdentifier so it can be found in future loading events.
+            this._resourceRequestIdentifierMap[requestIdentifier] = resource;
+        }
+
+        if (response.fromDiskCache)
+            resource.markAsCached();
+
+        resource.updateForResponse(response.url, response.mimeType, type, response.headers, response.status, response.statusText, elapsedTime);
+    }
+
+    resourceRequestDidReceiveData(requestIdentifier, dataLength, encodedDataLength, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);
+
+        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
+        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
+        // just doesn't have a requestIdentifier for us to look it up.
+        if (!resource)
+            return;
+
+        resource.increaseSize(dataLength, elapsedTime);
+
+        if (encodedDataLength !== -1)
+            resource.increaseTransferSize(encodedDataLength);
+    }
+
+    resourceRequestDidFinishLoading(requestIdentifier, timestamp, sourceMapURL)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        // By now we should always have the Resource. Either it was fetched when the inspector first opened with
+        // PageAgent.getResourceTree, or it was a currently loading resource that we learned about in resourceRequestDidReceiveResponse.
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+        console.assert(resource);
+        if (!resource)
+            return;
+
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);
+        resource.markAsFinished(elapsedTime);
+
+        if (sourceMapURL)
+            WebInspector.sourceMapManager.downloadSourceMap(sourceMapURL, resource.url, resource);
+
+        delete this._resourceRequestIdentifierMap[requestIdentifier];
+    }
+
+    resourceRequestDidFailLoading(requestIdentifier, canceled, timestamp)
+    {
+        // Called from WebInspector.NetworkObserver.
+
+        // Ignore this while waiting for the whole frame/resource tree.
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        // By now we should always have the Resource. Either it was fetched when the inspector first opened with
+        // PageAgent.getResourceTree, or it was a currently loading resource that we learned about in resourceRequestDidReceiveResponse.
+        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
+        console.assert(resource);
+        if (!resource)
+            return;
+
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);
+        resource.markAsFailed(canceled, elapsedTime);
+
+        if (resource === resource.parentFrame.provisionalMainResource)
+            resource.parentFrame.clearProvisionalLoad();
+
+        delete this._resourceRequestIdentifierMap[requestIdentifier];
+    }
+
+    executionContextCreated(contextPayload)
+    {
+        // Called from WebInspector.RuntimeObserver.
+
+        var frame = this.frameForIdentifier(contextPayload.frameId);
+        console.assert(frame);
+        if (!frame)
+            return;
+
+        var displayName = contextPayload.name || frame.mainResource.displayName;
+        var executionContext = new WebInspector.ExecutionContext(contextPayload.id, displayName, contextPayload.isPageContext, frame);
+        frame.addExecutionContext(executionContext);
+    }
+
+    resourceForURL(url)
+    {
+        if (!this._mainFrame)
+            return null;
+
+        if (this._mainFrame.mainResource.url === url)
+            return this._mainFrame.mainResource;
+
+        return this._mainFrame.resourceForURL(url, true);
+    }
+
+    // Private
+
+    _addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, url, type, requestMethod, requestHeaders, requestData, elapsedTime, frameName, frameSecurityOrigin, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp)
+    {
+        console.assert(!this._waitingForMainFrameResourceTreePayload);
+
+        var resource = null;
+
+        var frame = this.frameForIdentifier(frameIdentifier);
+        if (frame) {
+            // This is a new request for an existing frame, which might be the main resource or a new resource.
+            if (frame.mainResource.url === url && frame.loaderIdentifier === loaderIdentifier)
+                resource = frame.mainResource;
+            else if (frame.provisionalMainResource && frame.provisionalMainResource.url === url && frame.provisionalLoaderIdentifier === loaderIdentifier)
+                resource = frame.provisionalMainResource;
+            else {
+                resource = new WebInspector.Resource(url, null, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, elapsedTime, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp);
+                this._addResourceToFrame(frame, resource);
+            }
+        } else {
+            // This is a new request for a new frame, which is always the main resource.
+            resource = new WebInspector.Resource(url, null, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, elapsedTime, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp);
+            frame = new WebInspector.Frame(frameIdentifier, frameName, frameSecurityOrigin, loaderIdentifier, resource);
+            this._frameIdentifierMap[frame.id] = frame;
+
+            // If we don't have a main frame, assume this is it. This can change later in
+            // frameDidNavigate when the parent frame is known.
+            if (!this._mainFrame) {
+                this._mainFrame = frame;
+                this._mainFrameDidChange(null);
+            }
+
+            this._dispatchFrameWasAddedEvent(frame);
+        }
+
+        console.assert(resource);
+
+        return resource;
+    }
+
+    _addResourceToFrame(frame, resource)
+    {
+        console.assert(!this._waitingForMainFrameResourceTreePayload);
+        if (this._waitingForMainFrameResourceTreePayload)
+            return;
+
+        console.assert(frame);
+        console.assert(resource);
+
+        if (resource.loaderIdentifier !== frame.loaderIdentifier && !frame.provisionalLoaderIdentifier) {
+            // This is the start of a provisional load which happens before frameDidNavigate is called.
+            // This resource will be the new mainResource if frameDidNavigate is called.
+            frame.startProvisionalLoad(resource);
+            return;
+        }
+
+        // This is just another resource, either for the main loader or the provisional loader.
+        console.assert(resource.loaderIdentifier === frame.loaderIdentifier || resource.loaderIdentifier === frame.provisionalLoaderIdentifier);
+        frame.addResource(resource);
+    }
+
+    _initiatorSourceCodeLocationFromPayload(initiatorPayload)
+    {
+        if (!initiatorPayload)
+            return null;
+
+        var url = null;
+        var lineNumber = NaN;
+        var columnNumber = 0;
+
+        if (initiatorPayload.stackTrace && initiatorPayload.stackTrace.length) {
+            var stackTracePayload = initiatorPayload.stackTrace;
+            for (var i = 0; i < stackTracePayload.length; ++i) {
+                var callFramePayload = stackTracePayload[i];
+                if (!callFramePayload.url || callFramePayload.url === "[native code]")
+                    continue;
+
+                url = callFramePayload.url;
+
+                // The lineNumber is 1-based, but we expect 0-based.
+                lineNumber = callFramePayload.lineNumber - 1;
+
+                columnNumber = callFramePayload.columnNumber;
+
+                break;
+            }
+        } else if (initiatorPayload.url) {
+            url = initiatorPayload.url;
+
+            // The lineNumber is 1-based, but we expect 0-based.
+            lineNumber = initiatorPayload.lineNumber - 1;
+        }
+
+        if (!url || isNaN(lineNumber) || lineNumber < 0)
+            return null;
+
+        var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
+        if (!sourceCode)
+            sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
+
+        if (!sourceCode)
+            return null;
+
+        return sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
+    }
+
+    _processMainFrameResourceTreePayload(error, mainFramePayload)
+    {
+        console.assert(this._waitingForMainFrameResourceTreePayload);
+        delete this._waitingForMainFrameResourceTreePayload;
+
+        if (error) {
+            console.error(JSON.stringify(error));
+            return;
+        }
+
+        console.assert(mainFramePayload);
+        console.assert(mainFramePayload.frame);
+
+        this._resourceRequestIdentifierMap = {};
+        this._frameIdentifierMap = {};
+
+        var oldMainFrame = this._mainFrame;
+
+        this._mainFrame = this._addFrameTreeFromFrameResourceTreePayload(mainFramePayload, true);
+
+        if (this._mainFrame !== oldMainFrame)
+            this._mainFrameDidChange(oldMainFrame);
+    }
+
+    _createFrame(payload)
+    {
+        // If payload.url is missing or empty then this page is likely the special empty page. In that case
+        // we will just say it is "about:blank" so we have a URL, which is required for resources.
+        var mainResource = new WebInspector.Resource(payload.url || "about:blank", payload.mimeType, null, payload.loaderId);
+        var frame = new WebInspector.Frame(payload.id, payload.name, payload.securityOrigin, payload.loaderId, mainResource);
+
+        this._frameIdentifierMap[frame.id] = frame;
+
+        mainResource.markAsFinished();
+
+        return frame;
+    }
+
+    _createResource(payload, framePayload)
+    {
+        var resource = new WebInspector.Resource(payload.url, payload.mimeType, payload.type, framePayload.loaderId);
+
+        if (payload.sourceMapURL)
+            WebInspector.sourceMapManager.downloadSourceMap(payload.sourceMapURL, resource.url, resource);
+
+        return resource;
+    }
+
+    _addFrameTreeFromFrameResourceTreePayload(payload, isMainFrame)
+    {
+        var frame = this._createFrame(payload.frame);
+        if (isMainFrame)
+            frame.markAsMainFrame();
+
+        for (var i = 0; payload.childFrames && i < payload.childFrames.length; ++i)
+            frame.addChildFrame(this._addFrameTreeFromFrameResourceTreePayload(payload.childFrames[i], false));
+
+        for (var i = 0; payload.resources && i < payload.resources.length; ++i) {
+            var resourcePayload = payload.resources[i];
+
+            // The main resource is included as a resource. We can skip it since we already created
+            // a main resource when we created the Frame. The resource payload does not include anything
+            // didn't already get from the frame payload.
+            if (resourcePayload.type === "Document" && resourcePayload.url === payload.frame.url)
+                continue;
+
+            var resource = this._createResource(resourcePayload, payload);
+            frame.addResource(resource);
+
+            if (resourcePayload.failed || resourcePayload.canceled)
+                resource.markAsFailed(resourcePayload.canceled);
+            else
+                resource.markAsFinished();
+        }
+
+        this._dispatchFrameWasAddedEvent(frame);
+
+        return frame;
+    }
+
+    _dispatchFrameWasAddedEvent(frame)
+    {
+        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.FrameWasAdded, {frame});
+    }
+
+    _mainFrameDidChange(oldMainFrame)
+    {
+        if (oldMainFrame)
+            oldMainFrame.unmarkAsMainFrame();
+        if (this._mainFrame)
+            this._mainFrame.markAsMainFrame();
+        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.MainFrameDidChange, {oldMainFrame});
+    }
+
+    _extraDomainsActivated(event)
+    {
+        if (event.data.domains.includes("Page") && window.PageAgent)
+            PageAgent.getResourceTree(this._processMainFrameResourceTreePayload.bind(this));
+    }
+};
+
+WebInspector.FrameResourceManager.Event = {
+    FrameWasAdded: "frame-resource-manager-frame-was-added",
+    FrameWasRemoved: "frame-resource-manager-frame-was-removed",
+    MainFrameDidChange: "frame-resource-manager-main-frame-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/HeapManager.js b/Source/WebInspectorUI/UserInterface/Controllers/HeapManager.js
new file mode 100644
index 000000000..bc3dba90d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/HeapManager.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.HeapManager = class HeapManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        if (window.HeapAgent)
+            HeapAgent.enable();
+    }
+
+    // Public
+
+    garbageCollected(payload)
+    {
+        // Called from WebInspector.HeapObserver.
+
+        let collection = WebInspector.GarbageCollection.fromPayload(payload);
+        this.dispatchEventToListeners(WebInspector.HeapManager.Event.GarbageCollected, {collection});
+    }
+};
+
+WebInspector.HeapManager.Event = {
+    GarbageCollected: "heap-manager-garbage-collected"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/IssueManager.js b/Source/WebInspectorUI/UserInterface/Controllers/IssueManager.js
new file mode 100644
index 000000000..1bdd83c49
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/IssueManager.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IssueManager = class IssueManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._logCleared, this);
+
+        this.initialize();
+    }
+
+    // Public
+
+    initialize()
+    {
+        this._issues = [];
+
+        this.dispatchEventToListeners(WebInspector.IssueManager.Event.Cleared);
+    }
+
+    issueWasAdded(source, level, text, url, lineNumber, columnNumber, parameters)
+    {
+        var modifiedLineNumber;
+        if (lineNumber) {
+            console.assert(typeof lineNumber === "number");
+            modifiedLineNumber = lineNumber - 1;
+        }
+
+        var issue = new WebInspector.IssueMessage(source, level, text, url, modifiedLineNumber, columnNumber, parameters);
+        this._issues.push(issue);
+
+        this.dispatchEventToListeners(WebInspector.IssueManager.Event.IssueWasAdded, {issue});
+    }
+
+    issuesForSourceCode(sourceCode)
+    {
+        var issues = [];
+
+        for (var i = 0; i < this._issues.length; ++i) {
+            // FIXME: Support issues based on Script identifiers too.
+            var issue = this._issues[i];
+            if (issue.url === sourceCode.url)
+                issues.push(issue);
+        }
+
+        return issues;
+    }
+
+    // Private
+
+    _logCleared(event)
+    {
+        this.initialize();
+    }
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        this.initialize();
+    }
+};
+
+WebInspector.IssueManager.Event = {
+    IssueWasAdded: "issue-manager-issue-was-added",
+    Cleared: "issue-manager-cleared"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js b/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js
new file mode 100644
index 000000000..c200c072c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptLogViewController.js
@@ -0,0 +1,288 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.JavaScriptLogViewController = class JavaScriptLogViewController extends WebInspector.Object
+{
+    constructor(element, scrollElement, textPrompt, delegate, historySettingIdentifier)
+    {
+        super();
+
+        console.assert(textPrompt instanceof WebInspector.ConsolePrompt);
+        console.assert(historySettingIdentifier);
+
+        this._element = element;
+        this._scrollElement = scrollElement;
+
+        this._promptHistorySetting = new WebInspector.Setting(historySettingIdentifier, null);
+
+        this._prompt = textPrompt;
+        this._prompt.delegate = this;
+        this._prompt.history = this._promptHistorySetting.value;
+
+        this.delegate = delegate;
+
+        this._cleared = true;
+        this._previousMessageView = null;
+        this._lastCommitted = "";
+        this._repeatCountWasInterrupted = false;
+
+        this._sessions = [];
+
+        this.messagesClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "K", this._handleClearShortcut.bind(this));
+        this.messagesAlternateClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "L", this._handleClearShortcut.bind(this), this._element);
+
+        this._messagesFindNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._handleFindNextShortcut.bind(this), this._element);
+        this._messagesFindPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "G", this._handleFindPreviousShortcut.bind(this), this._element);
+
+        this._promptAlternateClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "L", this._handleClearShortcut.bind(this), this._prompt.element);
+        this._promptFindNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._handleFindNextShortcut.bind(this), this._prompt.element);
+        this._promptFindPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "G", this._handleFindPreviousShortcut.bind(this), this._prompt.element);
+
+        this.startNewSession();
+    }
+
+    // Public
+
+    get prompt()
+    {
+        return this._prompt;
+    }
+
+    get currentConsoleGroup()
+    {
+        return this._currentConsoleGroup;
+    }
+
+    clear()
+    {
+        this._cleared = true;
+
+        this.startNewSession(true);
+    }
+
+    startNewSession(clearPreviousSessions)
+    {
+        if (this._sessions.length && clearPreviousSessions) {
+            for (var i = 0; i < this._sessions.length; ++i)
+                this._element.removeChild(this._sessions[i].element);
+
+            this._sessions = [];
+            this._currentConsoleGroup = null;
+        }
+
+        var lastSession = this._sessions.lastValue;
+        // Reuse the last session if it has no messages.
+        if (lastSession && !lastSession.hasMessages()) {
+            // Make sure the session is visible.
+            lastSession.element.scrollIntoView();
+            return;
+        }
+
+        var consoleSession = new WebInspector.ConsoleSession;
+
+        this._previousMessageView = null;
+        this._lastCommitted = "";
+        this._repeatCountWasInterrupted = false;
+
+        this._sessions.push(consoleSession);
+        this._currentConsoleGroup = consoleSession;
+
+        this._element.appendChild(consoleSession.element);
+
+        // Make sure the new session is visible.
+        consoleSession.element.scrollIntoView();
+    }
+
+    appendImmediateExecutionWithResult(text, result, addSpecialUserLogClass, synthetic)
+    {
+        console.assert(result instanceof WebInspector.RemoteObject);
+
+        var commandMessageView = new WebInspector.ConsoleCommandView(text, addSpecialUserLogClass ? "special-user-log" : null);
+        this._appendConsoleMessageView(commandMessageView, true);
+
+        function saveResultCallback(savedResultIndex)
+        {
+            let commandResultMessage = new WebInspector.ConsoleCommandResultMessage(result, false, savedResultIndex, synthetic);
+            let commandResultMessageView = new WebInspector.ConsoleMessageView(commandResultMessage);
+            this._appendConsoleMessageView(commandResultMessageView, true);
+        }
+
+        WebInspector.runtimeManager.saveResult(result, saveResultCallback.bind(this));
+    }
+
+    appendConsoleMessage(consoleMessage)
+    {
+        var consoleMessageView = new WebInspector.ConsoleMessageView(consoleMessage);
+        this._appendConsoleMessageView(consoleMessageView);
+        return consoleMessageView;
+    }
+
+    updatePreviousMessageRepeatCount(count)
+    {
+        console.assert(this._previousMessageView);
+        if (!this._previousMessageView)
+            return false;
+
+        var previousIgnoredCount = this._previousMessageView[WebInspector.JavaScriptLogViewController.IgnoredRepeatCount] || 0;
+        var previousVisibleCount = this._previousMessageView.repeatCount;
+
+        if (!this._repeatCountWasInterrupted) {
+            this._previousMessageView.repeatCount = count - previousIgnoredCount;
+            return true;
+        }
+
+        var consoleMessage = this._previousMessageView.message;
+        var duplicatedConsoleMessageView = new WebInspector.ConsoleMessageView(consoleMessage);
+        duplicatedConsoleMessageView[WebInspector.JavaScriptLogViewController.IgnoredRepeatCount] = previousIgnoredCount + previousVisibleCount;
+        duplicatedConsoleMessageView.repeatCount = 1;
+        this._appendConsoleMessageView(duplicatedConsoleMessageView);
+
+        return true;
+    }
+
+    isScrolledToBottom()
+    {
+        // Lie about being scrolled to the bottom if we have a pending request to scroll to the bottom soon.
+        return this._scrollToBottomTimeout || this._scrollElement.isScrolledToBottom();
+    }
+
+    scrollToBottom()
+    {
+        if (this._scrollToBottomTimeout)
+            return;
+
+        function delayedWork()
+        {
+            this._scrollToBottomTimeout = null;
+            this._scrollElement.scrollTop = this._scrollElement.scrollHeight;
+        }
+
+        // Don't scroll immediately so we are not causing excessive layouts when there
+        // are many messages being added at once.
+        this._scrollToBottomTimeout = setTimeout(delayedWork.bind(this), 0);
+    }
+
+    // Protected
+
+    consolePromptHistoryDidChange(prompt)
+    {
+        this._promptHistorySetting.value = this.prompt.history;
+    }
+
+    consolePromptShouldCommitText(prompt, text, cursorIsAtLastPosition, handler)
+    {
+        // Always commit the text if we are not at the last position.
+        if (!cursorIsAtLastPosition) {
+            handler(true);
+            return;
+        }
+
+        function parseFinished(error, result, message, range)
+        {
+            handler(result !== RuntimeAgent.SyntaxErrorType.Recoverable);
+        }
+
+        RuntimeAgent.parse(text, parseFinished.bind(this));
+    }
+
+    consolePromptTextCommitted(prompt, text)
+    {
+        console.assert(text);
+
+        if (this._lastCommitted !== text) {
+            let commandMessageView = new WebInspector.ConsoleCommandView(text);
+            this._appendConsoleMessageView(commandMessageView, true);
+            this._lastCommitted = text;
+        }
+
+        function printResult(result, wasThrown, savedResultIndex)
+        {
+            if (!result || this._cleared)
+                return;
+
+            let synthetic = false;
+            let commandResultMessage = new WebInspector.ConsoleCommandResultMessage(result, wasThrown, savedResultIndex, synthetic);
+            let commandResultMessageView = new WebInspector.ConsoleMessageView(commandResultMessage);
+            this._appendConsoleMessageView(commandResultMessageView, true);
+        }
+
+        WebInspector.runtimeManager.evaluateInInspectedWindow(text, WebInspector.RuntimeManager.ConsoleObjectGroup, true, false, false, true, true, printResult.bind(this));
+    }
+
+    // Private
+
+    _handleClearShortcut()
+    {
+        WebInspector.logManager.requestClearMessages();
+    }
+
+    _handleFindNextShortcut()
+    {
+        this.delegate.highlightNextSearchMatch();
+    }
+
+    _handleFindPreviousShortcut()
+    {
+        this.delegate.highlightPreviousSearchMatch();
+    }
+
+    _appendConsoleMessageView(messageView, repeatCountWasInterrupted)
+    {
+        var wasScrolledToBottom = this.isScrolledToBottom();
+
+        this._cleared = false;
+        this._repeatCountWasInterrupted = repeatCountWasInterrupted || false;
+
+        if (!repeatCountWasInterrupted)
+            this._previousMessageView = messageView;
+
+        if (messageView.message && messageView.message.source !== WebInspector.ConsoleMessage.MessageSource.JS)
+            this._lastCommitted = "";
+
+        var type = messageView instanceof WebInspector.ConsoleCommandView ? null : messageView.message.type;
+        if (type === WebInspector.ConsoleMessage.MessageType.EndGroup) {
+            var parentGroup = this._currentConsoleGroup.parentGroup;
+            if (parentGroup)
+                this._currentConsoleGroup = parentGroup;
+        } else {
+            if (type === WebInspector.ConsoleMessage.MessageType.StartGroup || type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed) {
+                var group = new WebInspector.ConsoleGroup(this._currentConsoleGroup);
+                var groupElement = group.render(messageView);
+                this._currentConsoleGroup.append(groupElement);
+                this._currentConsoleGroup = group;
+            } else
+                this._currentConsoleGroup.addMessageView(messageView);
+        }
+
+        if (type === WebInspector.ConsoleMessage.MessageType.Result || wasScrolledToBottom)
+            this.scrollToBottom();
+
+        if (this.delegate && typeof this.delegate.didAppendConsoleMessageView === "function")
+            this.delegate.didAppendConsoleMessageView(messageView);
+    }
+};
+
+WebInspector.JavaScriptLogViewController.CachedPropertiesDuration = 30000;
+WebInspector.JavaScriptLogViewController.IgnoredRepeatCount = Symbol("ignored-repeat-count");
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptRuntimeCompletionProvider.js b/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptRuntimeCompletionProvider.js
new file mode 100644
index 000000000..24f327baa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/JavaScriptRuntimeCompletionProvider.js
@@ -0,0 +1,301 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+Object.defineProperty(WebInspector, "javaScriptRuntimeCompletionProvider",
+{
+    get: function()
+    {
+        if (!WebInspector.JavaScriptRuntimeCompletionProvider._instance)
+            WebInspector.JavaScriptRuntimeCompletionProvider._instance = new WebInspector.JavaScriptRuntimeCompletionProvider;
+        return WebInspector.JavaScriptRuntimeCompletionProvider._instance;
+    }
+});
+
+WebInspector.JavaScriptRuntimeCompletionProvider = class JavaScriptRuntimeCompletionProvider extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        console.assert(!WebInspector.JavaScriptRuntimeCompletionProvider._instance);
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._clearLastProperties, this);
+    }
+
+    // Protected
+
+    completionControllerCompletionsNeeded(completionController, defaultCompletions, base, prefix, suffix, forced)
+    {
+        // Don't allow non-forced empty prefix completions unless the base is that start of property access.
+        if (!forced && !prefix && !/[.[]$/.test(base)) {
+            completionController.updateCompletions(null);
+            return;
+        }
+
+        // If the base ends with an open parentheses or open curly bracket then treat it like there is
+        // no base so we get global object completions.
+        if (/[({]$/.test(base))
+            base = "";
+
+        var lastBaseIndex = base.length - 1;
+        var dotNotation = base[lastBaseIndex] === ".";
+        var bracketNotation = base[lastBaseIndex] === "[";
+
+        if (dotNotation || bracketNotation) {
+            base = base.substring(0, lastBaseIndex);
+
+            // Don't suggest anything for an empty base that is using dot notation.
+            // Bracket notation with an empty base will be treated as an array.
+            if (!base && dotNotation) {
+                completionController.updateCompletions(defaultCompletions);
+                return;
+            }
+
+            // Don't allow non-forced empty prefix completions if the user is entering a number, since it might be a float.
+            // But allow number completions if the base already has a decimal, so "10.0." will suggest Number properties.
+            if (!forced && !prefix && dotNotation && base.indexOf(".") === -1 && parseInt(base, 10) == base) {
+                completionController.updateCompletions(null);
+                return;
+            }
+
+            // An empty base with bracket notation is not property access, it is an array.
+            // Clear the bracketNotation flag so completions are not quoted.
+            if (!base && bracketNotation)
+                bracketNotation = false;
+        }
+
+        // If the base is the same as the last time, we can reuse the property names we have already gathered.
+        // Doing this eliminates delay caused by the async nature of the code below and it only calls getters
+        // and functions once instead of repetitively. Sure, there can be difference each time the base is evaluated,
+        // but this optimization gives us more of a win. We clear the cache after 30 seconds or when stepping in the
+        // debugger to make sure we don't use stale properties in most cases.
+        if (this._lastBase === base && this._lastPropertyNames) {
+            receivedPropertyNames.call(this, this._lastPropertyNames);
+            return;
+        }
+
+        this._lastBase = base;
+        this._lastPropertyNames = null;
+
+        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        if (!base && activeCallFrame && !this._alwaysEvaluateInWindowContext)
+            activeCallFrame.collectScopeChainVariableNames(receivedPropertyNames.bind(this));
+        else
+            WebInspector.runtimeManager.evaluateInInspectedWindow(base, "completion", true, true, false, false, false, evaluated.bind(this));
+
+        function updateLastPropertyNames(propertyNames)
+        {
+            if (this._clearLastPropertiesTimeout)
+                clearTimeout(this._clearLastPropertiesTimeout);
+            this._clearLastPropertiesTimeout = setTimeout(this._clearLastProperties.bind(this), WebInspector.JavaScriptLogViewController.CachedPropertiesDuration);
+
+            this._lastPropertyNames = propertyNames || {};
+        }
+
+        function evaluated(result, wasThrown)
+        {
+            if (wasThrown || !result || result.type === "undefined" || (result.type === "object" && result.subtype === "null")) {
+                RuntimeAgent.releaseObjectGroup("completion");
+
+                updateLastPropertyNames.call(this, {});
+                completionController.updateCompletions(defaultCompletions);
+
+                return;
+            }
+
+            function getArrayCompletions(primitiveType)
+            {
+                var array = this;
+                var arrayLength;
+
+                var resultSet = {};
+                for (var o = array; o; o = o.__proto__) {
+                    try {
+                        if (o === array && o.length) {
+                            // If the array type has a length, don't include a list of all the indexes.
+                            // Include it at the end and the frontend can build the list.
+                            arrayLength = o.length;
+                        } else {
+                            var names = Object.getOwnPropertyNames(o);
+                            for (var i = 0; i < names.length; ++i)
+                                resultSet[names[i]] = true;
+                        }
+                    } catch (e) {
+                        // Ignore
+                    }
+                }
+
+                if (arrayLength)
+                    resultSet["length"] = arrayLength;
+
+                return resultSet;
+            }
+
+            function getCompletions(primitiveType)
+            {
+                var object;
+                if (primitiveType === "string")
+                    object = new String("");
+                else if (primitiveType === "number")
+                    object = new Number(0);
+                else if (primitiveType === "boolean")
+                    object = new Boolean(false);
+                else if (primitiveType === "symbol")
+                    object = Symbol();
+                else
+                    object = this;
+
+                var resultSet = {};
+                for (var o = object; o; o = o.__proto__) {
+                    try {
+                        var names = Object.getOwnPropertyNames(o);
+                        for (var i = 0; i < names.length; ++i)
+                            resultSet[names[i]] = true;
+                    } catch (e) {
+                        // Ignore
+                    }
+                }
+
+                return resultSet;
+            }
+
+            if (result.subtype === "array")
+                result.callFunctionJSON(getArrayCompletions, undefined, receivedArrayPropertyNames.bind(this));
+            else if (result.type === "object" || result.type === "function")
+                result.callFunctionJSON(getCompletions, undefined, receivedPropertyNames.bind(this));
+            else if (result.type === "string" || result.type === "number" || result.type === "boolean" || result.type === "symbol")
+                WebInspector.runtimeManager.evaluateInInspectedWindow("(" + getCompletions + ")(\"" + result.type + "\")", "completion", false, true, true, false, false, receivedPropertyNamesFromEvaluate.bind(this));
+            else
+                console.error("Unknown result type: " + result.type);
+        }
+
+        function receivedPropertyNamesFromEvaluate(object, wasThrown, result)
+        {
+            receivedPropertyNames.call(this, result && !wasThrown ? result.value : null);
+        }
+
+        function receivedArrayPropertyNames(propertyNames)
+        {
+            // FIXME: <https://webkit.org/b/143589> Web Inspector: Better handling for large collections in Object Trees
+            // If there was an array like object, we generate autocompletion up to 1000 indexes, but this should
+            // handle a list with arbitrary length.
+            if (propertyNames && typeof propertyNames.length === "number") {
+                var max = Math.min(propertyNames.length, 1000);
+                for (var i = 0; i < max; ++i)
+                    propertyNames[i] = true;
+            }
+
+            receivedPropertyNames.call(this, propertyNames);
+        }
+
+        function receivedPropertyNames(propertyNames)
+        {
+            propertyNames = propertyNames || {};
+
+            updateLastPropertyNames.call(this, propertyNames);
+
+            RuntimeAgent.releaseObjectGroup("completion");
+
+            if (!base) {
+                var commandLineAPI = ["$", "$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "$0", "$_"];
+                if (WebInspector.debuggerManager.paused && WebInspector.debuggerManager.pauseReason === WebInspector.DebuggerManager.PauseReason.Exception)
+                    commandLineAPI.push("$exception");
+                for (var i = 0; i < commandLineAPI.length; ++i)
+                    propertyNames[commandLineAPI[i]] = true;
+
+                // FIXME: Due to caching, sometimes old $n values show up as completion results even though they are not available. We should clear that proactively.
+                for (var i = 1; i <= WebInspector.ConsoleCommandResultMessage.maximumSavedResultIndex; ++i)
+                    propertyNames["$" + i] = true;
+            }
+
+            propertyNames = Object.keys(propertyNames);
+
+            var implicitSuffix = "";
+            if (bracketNotation) {
+                var quoteUsed = prefix[0] === "'" ? "'" : "\"";
+                if (suffix !== "]" && suffix !== quoteUsed)
+                    implicitSuffix = "]";
+            }
+
+            var completions = defaultCompletions;
+            var knownCompletions = completions.keySet();
+
+            for (var i = 0; i < propertyNames.length; ++i) {
+                var property = propertyNames[i];
+
+                if (dotNotation && !/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(property))
+                    continue;
+
+                if (bracketNotation) {
+                    if (parseInt(property) != property)
+                        property = quoteUsed + property.escapeCharacters(quoteUsed + "\\") + (suffix !== quoteUsed ? quoteUsed : "");
+                }
+
+                if (!property.startsWith(prefix) || property in knownCompletions)
+                    continue;
+
+                completions.push(property);
+                knownCompletions[property] = true;
+            }
+
+            function compare(a, b)
+            {
+                // Try to sort in numerical order first.
+                let numericCompareResult = a - b;
+                if (!isNaN(numericCompareResult))
+                    return numericCompareResult;
+
+                // Sort __defineGetter__, __lookupGetter__, and friends last.
+                let aRareProperty = a.startsWith("__") && a.endsWith("__");
+                let bRareProperty = b.startsWith("__") && b.endsWith("__");
+                if (aRareProperty && !bRareProperty)
+                    return 1;
+                if (!aRareProperty && bRareProperty)
+                    return -1;
+
+                // Not numbers, sort as strings.
+                return a.localeCompare(b);
+            }
+
+            completions.sort(compare);
+
+            completionController.updateCompletions(completions, implicitSuffix);
+        }
+    }
+
+    // Private
+
+    _clearLastProperties()
+    {
+        if (this._clearLastPropertiesTimeout) {
+            clearTimeout(this._clearLastPropertiesTimeout);
+            delete this._clearLastPropertiesTimeout;
+        }
+
+        // Clear the cache of property names so any changes while stepping or sitting idle get picked up if the same
+        // expression is evaluated again.
+        this._lastPropertyNames = null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/LayerTreeManager.js b/Source/WebInspectorUI/UserInterface/Controllers/LayerTreeManager.js
new file mode 100644
index 000000000..48ec5f1d4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/LayerTreeManager.js
@@ -0,0 +1,154 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeManager = class LayerTreeManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._supported = !!window.LayerTreeAgent;
+
+        if (this._supported)
+            LayerTreeAgent.enable();
+    }
+
+    // Public
+
+    get supported()
+    {
+        return this._supported;
+    }
+
+    layerTreeMutations(previousLayers, newLayers)
+    {
+        console.assert(this.supported);
+
+        if (isEmptyObject(previousLayers)) {
+            return {
+                preserved: [],
+                additions: newLayers,
+                removals: []
+            };
+        }
+
+        function nodeIdForLayer(layer)
+        {
+            return layer.isGeneratedContent ? layer.pseudoElementId : layer.nodeId;
+        }
+
+        var layerIdsInPreviousLayers = [];
+        var nodeIdsInPreviousLayers = [];
+        var nodeIdsForReflectionsInPreviousLayers = [];
+
+        previousLayers.forEach(function(layer) {
+            layerIdsInPreviousLayers.push(layer.layerId);
+
+            var nodeId = nodeIdForLayer(layer);
+            if (!nodeId)
+                return;
+
+            if (layer.isReflection)
+                nodeIdsForReflectionsInPreviousLayers.push(nodeId);
+            else
+                nodeIdsInPreviousLayers.push(nodeId);
+        });
+
+        var preserved = [];
+        var additions = [];
+
+        var layerIdsInNewLayers = [];
+        var nodeIdsInNewLayers = [];
+        var nodeIdsForReflectionsInNewLayers = [];
+
+        newLayers.forEach(function(layer) {
+            layerIdsInNewLayers.push(layer.layerId);
+
+            var existed = layerIdsInPreviousLayers.includes(layer.layerId);
+
+            var nodeId = nodeIdForLayer(layer);
+            if (!nodeId)
+                return;
+
+            if (layer.isReflection) {
+                nodeIdsForReflectionsInNewLayers.push(nodeId);
+                existed = existed || nodeIdsForReflectionsInPreviousLayers.includes(nodeId);
+            } else {
+                nodeIdsInNewLayers.push(nodeId);
+                existed = existed || nodeIdsInPreviousLayers.includes(nodeId);
+            }
+
+            if (existed)
+                preserved.push(layer);
+            else
+                additions.push(layer);
+        });
+
+        var removals = previousLayers.filter(function(layer) {
+            var nodeId = nodeIdForLayer(layer);
+
+            if (layer.isReflection)
+                return !nodeIdsForReflectionsInNewLayers.includes(nodeId);
+            else
+                return !nodeIdsInNewLayers.includes(nodeId) && !layerIdsInNewLayers.includes(layer.layerId);
+        });
+
+        return {preserved, additions, removals};
+    }
+
+    layersForNode(node, callback)
+    {
+        console.assert(this.supported);
+
+        LayerTreeAgent.layersForNode(node.id, function(error, layers) {
+            if (error || isEmptyObject(layers)) {
+                callback(null, []);
+                return;
+            }
+
+            var firstLayer = layers[0];
+            var layerForNode = firstLayer.nodeId === node.id && !firstLayer.isGeneratedContent ? layers.shift() : null;
+            callback(layerForNode, layers);
+        });
+    }
+
+    reasonsForCompositingLayer(layer, callback)
+    {
+        console.assert(this.supported);
+
+        LayerTreeAgent.reasonsForCompositingLayer(layer.layerId, function(error, reasons) {
+            callback(error ? 0 : reasons);
+        });
+    }
+
+    layerTreeDidChange()
+    {
+        this.dispatchEventToListeners(WebInspector.LayerTreeManager.Event.LayerTreeDidChange);
+    }
+};
+
+WebInspector.LayerTreeManager.Event = {
+    LayerTreeDidChange: "layer-tree-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/LogManager.js b/Source/WebInspectorUI/UserInterface/Controllers/LogManager.js
new file mode 100644
index 000000000..156763882
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/LogManager.js
@@ -0,0 +1,125 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Tobias Reiss <tobi+webkit@basecode.de>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LogManager = class LogManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._clearMessagesRequested = false;
+        this._isNewPageOrReload = false;
+
+        this.clearLogOnNavigateSetting = new WebInspector.Setting("clear-log-on-navigate", true);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    }
+
+    // Public
+
+    messageWasAdded(source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, requestId)
+    {
+        // Called from WebInspector.ConsoleObserver.
+
+        // FIXME: Get a request from request ID.
+
+        if (parameters)
+            parameters = parameters.map(WebInspector.RemoteObject.fromPayload);
+
+        var message = new WebInspector.ConsoleMessage(source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, null);
+        this.dispatchEventToListeners(WebInspector.LogManager.Event.MessageAdded, {message});
+    }
+
+    messagesCleared()
+    {
+        // Called from WebInspector.ConsoleObserver.
+
+        WebInspector.ConsoleCommandResultMessage.clearMaximumSavedResultIndex();
+
+        if (this._clearMessagesRequested) {
+            // Frontend requested "clear console" and Backend successfully completed the request.
+            this._clearMessagesRequested = false;
+            this.dispatchEventToListeners(WebInspector.LogManager.Event.Cleared);
+        } else {
+            // Received an unrequested clear console event.
+            // This could be for a navigation or other reasons (like console.clear()).
+            // If this was a reload, we may not want to dispatch WebInspector.LogManager.Event.Cleared.
+            // To detect if this is a reload we wait a turn and check if there was a main resource change reload.
+            setTimeout(this._delayedMessagesCleared.bind(this), 0);
+        }
+    }
+
+    _delayedMessagesCleared()
+    {
+        if (this._isNewPageOrReload) {
+            this._isNewPageOrReload = false;
+
+            if (!this.clearLogOnNavigateSetting.value)
+                return;
+        }
+
+        // A console.clear() or command line clear() happened.
+        this.dispatchEventToListeners(WebInspector.LogManager.Event.Cleared);
+    }
+
+    messageRepeatCountUpdated(count)
+    {
+        // Called from WebInspector.ConsoleObserver.
+
+        this.dispatchEventToListeners(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, {count});
+    }
+
+    requestClearMessages()
+    {
+        this._clearMessagesRequested = true;
+
+        ConsoleAgent.clearMessages();
+    }
+
+    // Private
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        this._isNewPageOrReload = true;
+
+        if (event.data.oldMainResource.url === event.target.mainResource.url)
+            this.dispatchEventToListeners(WebInspector.LogManager.Event.SessionStarted);
+
+        WebInspector.ConsoleCommandResultMessage.clearMaximumSavedResultIndex();
+    }
+};
+
+WebInspector.LogManager.Event = {
+    SessionStarted: "log-manager-session-was-started",
+    Cleared: "log-manager-cleared",
+    MessageAdded: "log-manager-message-added",
+    PreviousMessageRepeatCountUpdated: "log-manager-previous-message-repeat-count-updated"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/ProbeManager.js b/Source/WebInspectorUI/UserInterface/Controllers/ProbeManager.js
new file mode 100644
index 000000000..d5e43d318
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/ProbeManager.js
@@ -0,0 +1,176 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeManager = class ProbeManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        // Used to detect deleted probe actions.
+        this._knownProbeIdentifiersForBreakpoint = new Map;
+
+        // Main lookup tables for probes and probe sets.
+        this._probesByIdentifier = new Map;
+        this._probeSetsByBreakpoint = new Map;
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ActionsDidChange, this._breakpointActionsChanged, this);
+
+        // Saved breakpoints should not be restored on the first event loop turn, because it
+        // makes manager initialization order very fragile. No breakpoints should be available.
+        console.assert(!WebInspector.debuggerManager.breakpoints.length, "No breakpoints should exist before all the managers are constructed.");
+    }
+
+    // Public
+
+    get probeSets()
+    {
+        return [...this._probeSetsByBreakpoint.values()];
+    }
+
+    probeForIdentifier(identifier)
+    {
+        return this._probesByIdentifier.get(identifier);
+    }
+
+    // Protected (called by WebInspector.DebuggerObserver)
+
+    didSampleProbe(sample)
+    {
+        console.assert(this._probesByIdentifier.has(sample.probeId), "Unknown probe identifier specified for sample: ", sample);
+        var probe = this._probesByIdentifier.get(sample.probeId);
+        var elapsedTime = WebInspector.timelineManager.computeElapsedTime(sample.timestamp);
+        probe.addSample(new WebInspector.ProbeSample(sample.sampleId, sample.batchId, elapsedTime, sample.payload));
+    }
+
+    // Private
+
+    _breakpointAdded(breakpointOrEvent)
+    {
+        var breakpoint;
+        if (breakpointOrEvent instanceof WebInspector.Breakpoint)
+            breakpoint = breakpointOrEvent;
+        else
+            breakpoint = breakpointOrEvent.data.breakpoint;
+
+        console.assert(breakpoint instanceof WebInspector.Breakpoint, "Unknown object passed as breakpoint: ", breakpoint);
+
+        if (this._knownProbeIdentifiersForBreakpoint.has(breakpoint))
+            return;
+
+        this._knownProbeIdentifiersForBreakpoint.set(breakpoint, new Set);
+
+        this._breakpointActionsChanged(breakpoint);
+    }
+
+    _breakpointRemoved(event)
+    {
+        var breakpoint = event.data.breakpoint;
+        console.assert(this._knownProbeIdentifiersForBreakpoint.has(breakpoint));
+
+        this._breakpointActionsChanged(breakpoint);
+        this._knownProbeIdentifiersForBreakpoint.delete(breakpoint);
+    }
+
+    _breakpointActionsChanged(breakpointOrEvent)
+    {
+        var breakpoint;
+        if (breakpointOrEvent instanceof WebInspector.Breakpoint)
+            breakpoint = breakpointOrEvent;
+        else
+            breakpoint = breakpointOrEvent.target;
+
+        console.assert(breakpoint instanceof WebInspector.Breakpoint, "Unknown object passed as breakpoint: ", breakpoint);
+
+        // Sometimes actions change before the added breakpoint is fully dispatched.
+        if (!this._knownProbeIdentifiersForBreakpoint.has(breakpoint)) {
+            this._breakpointAdded(breakpoint);
+            return;
+        }
+
+        var knownProbeIdentifiers = this._knownProbeIdentifiersForBreakpoint.get(breakpoint);
+        var seenProbeIdentifiers = new Set;
+
+        breakpoint.probeActions.forEach(function(probeAction) {
+            var probeIdentifier = probeAction.id;
+            console.assert(probeIdentifier, "Probe added without breakpoint action identifier: ", breakpoint);
+
+            seenProbeIdentifiers.add(probeIdentifier);
+            if (!knownProbeIdentifiers.has(probeIdentifier)) {
+                // New probe; find or create relevant probe set.
+                knownProbeIdentifiers.add(probeIdentifier);
+                var probeSet = this._probeSetForBreakpoint(breakpoint);
+                var newProbe = new WebInspector.Probe(probeIdentifier, breakpoint, probeAction.data);
+                this._probesByIdentifier.set(probeIdentifier, newProbe);
+                probeSet.addProbe(newProbe);
+                return;
+            }
+
+            var probe = this._probesByIdentifier.get(probeIdentifier);
+            console.assert(probe, "Probe known but couldn't be found by identifier: ", probeIdentifier);
+            // Update probe expression; if it differed, change events will fire.
+            probe.expression = probeAction.data;
+        }, this);
+
+        // Look for missing probes based on what we saw last.
+        knownProbeIdentifiers.forEach(function(probeIdentifier) {
+            if (seenProbeIdentifiers.has(probeIdentifier))
+                return;
+
+            // The probe has gone missing, remove it.
+            var probeSet = this._probeSetForBreakpoint(breakpoint);
+            var probe = this._probesByIdentifier.get(probeIdentifier);
+            this._probesByIdentifier.delete(probeIdentifier);
+            knownProbeIdentifiers.delete(probeIdentifier);
+            probeSet.removeProbe(probe);
+
+            // Remove the probe set if it has become empty.
+            if (!probeSet.probes.length) {
+                this._probeSetsByBreakpoint.delete(probeSet.breakpoint);
+                probeSet.willRemove();
+                this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetRemoved, {probeSet});
+            }
+        }, this);
+    }
+
+    _probeSetForBreakpoint(breakpoint)
+    {
+        if (this._probeSetsByBreakpoint.has(breakpoint))
+            return this._probeSetsByBreakpoint.get(breakpoint);
+
+        var newProbeSet = new WebInspector.ProbeSet(breakpoint);
+        this._probeSetsByBreakpoint.set(breakpoint, newProbeSet);
+        this.dispatchEventToListeners(WebInspector.ProbeManager.Event.ProbeSetAdded, {probeSet: newProbeSet});
+        return newProbeSet;
+    }
+};
+
+WebInspector.ProbeManager.Event = {
+    ProbeSetAdded: "probe-manager-probe-set-added",
+    ProbeSetRemoved: "probe-manager-probe-set-removed",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/ReplayManager.js b/Source/WebInspectorUI/UserInterface/Controllers/ReplayManager.js
new file mode 100644
index 000000000..b5c08e2c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/ReplayManager.js
@@ -0,0 +1,678 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ReplayManager = class ReplayManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._sessionState = WebInspector.ReplayManager.SessionState.Inactive;
+        this._segmentState = WebInspector.ReplayManager.SegmentState.Unloaded;
+
+        this._activeSessionIdentifier = null;
+        this._activeSegmentIdentifier = null;
+        this._currentPosition = new WebInspector.ReplayPosition(0, 0);
+        this._initialized = false;
+
+        // These hold actual instances of sessions and segments.
+        this._sessions = new Map;
+        this._segments = new Map;
+        // These hold promises that resolve when the instance data is recieved.
+        this._sessionPromises = new Map;
+        this._segmentPromises = new Map;
+
+        // Playback speed is specified in replayToPosition commands, and persists
+        // for the duration of the playback command until another playback begins.
+        this._playbackSpeed = WebInspector.ReplayManager.PlaybackSpeed.RealTime;
+
+        if (window.ReplayAgent) {
+            var instance = this;
+            this._initializationPromise = ReplayAgent.currentReplayState()
+                .then(function(payload) {
+                    console.assert(payload.sessionState in WebInspector.ReplayManager.SessionState, "Unknown session state: " + payload.sessionState);
+                    console.assert(payload.segmentState in WebInspector.ReplayManager.SegmentState, "Unknown segment state: " + payload.segmentState);
+
+                    instance._activeSessionIdentifier = payload.sessionIdentifier;
+                    instance._activeSegmentIdentifier = payload.segmentIdentifier;
+                    instance._sessionState = WebInspector.ReplayManager.SessionState[payload.sessionState];
+                    instance._segmentState = WebInspector.ReplayManager.SegmentState[payload.segmentState];
+                    instance._currentPosition = payload.replayPosition;
+
+                    instance._initialized = true;
+                }).then(function() {
+                    return ReplayAgent.getAvailableSessions();
+                }).then(function(payload) {
+                    for (var sessionId of payload.ids)
+                        instance.sessionCreated(sessionId);
+                }).catch(function(error) {
+                    console.error("ReplayManager initialization failed: ", error);
+                    throw error;
+                });
+        }
+    }
+
+    // Public
+
+    // The following state is invalid unless called from a function that's chained
+    // to the (resolved) ReplayManager.waitUntilInitialized promise.
+    get sessionState()
+    {
+        console.assert(this._initialized);
+        return this._sessionState;
+    }
+
+    get segmentState()
+    {
+        console.assert(this._initialized);
+        return this._segmentState;
+    }
+
+    get activeSessionIdentifier()
+    {
+        console.assert(this._initialized);
+        return this._activeSessionIdentifier;
+    }
+
+    get activeSegmentIdentifier()
+    {
+        console.assert(this._initialized);
+        return this._activeSegmentIdentifier;
+    }
+
+    get playbackSpeed()
+    {
+        console.assert(this._initialized);
+        return this._playbackSpeed;
+    }
+
+    set playbackSpeed(value)
+    {
+        console.assert(this._initialized);
+        this._playbackSpeed = value;
+    }
+
+    get currentPosition()
+    {
+        console.assert(this._initialized);
+        return this._currentPosition;
+    }
+
+    // These return promises even if the relevant instance is already created.
+    waitUntilInitialized()  // --> ()
+    {
+        return this._initializationPromise;
+    }
+
+    // Return a promise that resolves to a session, if it exists.
+    getSession(sessionId) // --> (WebInspector.ReplaySession)
+    {
+        if (this._sessionPromises.has(sessionId))
+            return this._sessionPromises.get(sessionId);
+
+        var newPromise = ReplayAgent.getSessionData(sessionId)
+            .then(function(payload) {
+                return Promise.resolve(WebInspector.ReplaySession.fromPayload(sessionId, payload));
+            });
+
+        this._sessionPromises.set(sessionId, newPromise);
+        return newPromise;
+    }
+
+    // Return a promise that resolves to a session segment, if it exists.
+    getSegment(segmentId)  // --> (WebInspector.ReplaySessionSegment)
+    {
+        if (this._segmentPromises.has(segmentId))
+            return this._segmentPromises.get(segmentId);
+
+        var newPromise = ReplayAgent.getSegmentData(segmentId)
+            .then(function(payload) {
+                return Promise.resolve(new WebInspector.ReplaySessionSegment(segmentId, payload));
+            });
+
+        this._segmentPromises.set(segmentId, newPromise);
+        return newPromise;
+    }
+
+    // Switch to the specified session.
+    // Returns a promise that resolves when the switch completes.
+    switchSession(sessionId) // --> ()
+    {
+        var manager = this;
+        var result = this.waitUntilInitialized();
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Capturing) {
+            result = result.then(function() {
+                return WebInspector.replayManager.stopCapturing();
+            });
+        }
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Replaying) {
+            result = result.then(function() {
+                return WebInspector.replayManager.cancelPlayback();
+            });
+        }
+
+        result = result.then(function() {
+                console.assert(manager.sessionState === WebInspector.ReplayManager.SessionState.Inactive);
+                console.assert(manager.segmentState === WebInspector.ReplayManager.SegmentState.Unloaded);
+
+                return manager.getSession(sessionId);
+            }).then(function ensureSessionDataIsLoaded(session) {
+                return ReplayAgent.switchSession(session.identifier);
+            }).catch(function(error) {
+                console.error("Failed to switch to session: ", error);
+                throw error;
+            });
+
+        return result;
+    }
+
+    // Start capturing into the current session as soon as possible.
+    // Returns a promise that resolves when capturing begins.
+    startCapturing() // --> ()
+    {
+        var manager = this;
+        var result = this.waitUntilInitialized();
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Capturing)
+            return result; // Already capturing.
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Replaying) {
+            result = result.then(function() {
+                return WebInspector.replayManager.cancelPlayback();
+            });
+        }
+
+        result = result.then(this._suppressBreakpointsAndResumeIfNeeded());
+
+        result = result.then(function() {
+                console.assert(manager.sessionState === WebInspector.ReplayManager.SessionState.Inactive);
+                console.assert(manager.segmentState === WebInspector.ReplayManager.SegmentState.Unloaded);
+
+                return ReplayAgent.startCapturing();
+            }).catch(function(error) {
+                console.error("Failed to start capturing: ", error);
+                throw error;
+            });
+
+        return result;
+    }
+
+    // Stop capturing into the current session as soon as possible.
+    // Returns a promise that resolves when capturing ends.
+    stopCapturing() // --> ()
+    {
+        console.assert(this.sessionState === WebInspector.ReplayManager.SessionState.Capturing, "Cannot stop capturing unless capture is active.");
+        console.assert(this.segmentState === WebInspector.ReplayManager.SegmentState.Appending);
+
+        return ReplayAgent.stopCapturing()
+            .catch(function(error) {
+                console.error("Failed to stop capturing: ", error);
+                throw error;
+            });
+    }
+
+    // Pause playback as soon as possible.
+    // Returns a promise that resolves when playback is paused.
+    pausePlayback() // --> ()
+    {
+        console.assert(this.sessionState !== WebInspector.ReplayManager.SessionState.Capturing, "Cannot pause playback while capturing.");
+
+        var manager = this;
+        var result = this.waitUntilInitialized();
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
+            return result; // Already stopped.
+
+        if (this.segmentState !== WebInspector.ReplayManager.SegmentState.Dispatching)
+            return result; // Already stopped.
+
+        result = result.then(function() {
+                console.assert(manager.sessionState === WebInspector.ReplayManager.SessionState.Replaying);
+                console.assert(manager.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching);
+
+                return ReplayAgent.pausePlayback();
+            }).catch(function(error) {
+                console.error("Failed to pause playback: ", error);
+                throw error;
+            });
+
+        return result;
+    }
+
+    // Pause playback and unload the current session segment as soon as possible.
+    // Returns a promise that resolves when the current segment is unloaded.
+    cancelPlayback() // --> ()
+    {
+        console.assert(this.sessionState !== WebInspector.ReplayManager.SessionState.Capturing, "Cannot stop playback while capturing.");
+
+        var manager = this;
+        var result = this.waitUntilInitialized();
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
+            return result; // Already stopped.
+
+        result = result.then(function() {
+                console.assert(manager.sessionState === WebInspector.ReplayManager.SessionState.Replaying);
+                console.assert(manager.segmentState !== WebInspector.ReplayManager.SegmentState.Appending);
+
+                return ReplayAgent.cancelPlayback();
+            }).catch(function(error) {
+                console.error("Failed to stop playback: ", error);
+                throw error;
+            });
+
+        return result;
+    }
+
+    // Replay to the specified position as soon as possible using the current replay speed.
+    // Returns a promise that resolves when replay has begun (NOT when the position is reached).
+    replayToPosition(replayPosition) // --> ()
+    {
+        console.assert(replayPosition instanceof WebInspector.ReplayPosition, "Cannot replay to a position while capturing.");
+
+        var manager = this;
+        var result = this.waitUntilInitialized();
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Capturing) {
+            result = result.then(function() {
+                return WebInspector.replayManager.stopCapturing();
+            });
+        }
+
+        result = result.then(this._suppressBreakpointsAndResumeIfNeeded());
+
+        result = result.then(function() {
+                console.assert(manager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing);
+                console.assert(manager.segmentState !== WebInspector.ReplayManager.SegmentState.Appending);
+
+                return ReplayAgent.replayToPosition(replayPosition, manager.playbackSpeed === WebInspector.ReplayManager.PlaybackSpeed.FastForward);
+            }).catch(function(error) {
+                console.error("Failed to start playback to position: ", replayPosition, error);
+                throw error;
+            });
+
+        return result;
+    }
+
+    // Replay to the end of the session as soon as possible using the current replay speed.
+    // Returns a promise that resolves when replay has begun (NOT when the end is reached).
+    replayToCompletion() // --> ()
+    {
+        var manager = this;
+        var result = this.waitUntilInitialized();
+
+        if (this.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching)
+            return result; // Already running.
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Capturing) {
+            result = result.then(function() {
+                return WebInspector.replayManager.stopCapturing();
+            });
+        }
+
+        result = result.then(this._suppressBreakpointsAndResumeIfNeeded());
+
+        result = result.then(function() {
+                console.assert(manager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing);
+                console.assert(manager.segmentState === WebInspector.ReplayManager.SegmentState.Loaded || manager.segmentState === WebInspector.ReplayManager.SegmentState.Unloaded);
+
+                return ReplayAgent.replayToCompletion(manager.playbackSpeed === WebInspector.ReplayManager.PlaybackSpeed.FastForward)
+            }).catch(function(error) {
+                console.error("Failed to start playback to completion: ", error);
+                throw error;
+            });
+
+        return result;
+    }
+
+    // Protected (called by ReplayObserver)
+
+    // Since these methods update session and segment state, they depend on the manager
+    // being properly initialized. So, each function body is prepended with a retry guard.
+    // This makes call sites simpler and avoids an extra event loop turn in the common case.
+
+    captureStarted()
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.captureStarted.bind(this));
+
+        this._changeSessionState(WebInspector.ReplayManager.SessionState.Capturing);
+
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.CaptureStarted);
+    }
+
+    captureStopped()
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.captureStopped.bind(this));
+
+        this._changeSessionState(WebInspector.ReplayManager.SessionState.Inactive);
+        this._changeSegmentState(WebInspector.ReplayManager.SegmentState.Unloaded);
+
+        if (this._breakpointsWereSuppressed) {
+            delete this._breakpointsWereSuppressed;
+            WebInspector.debuggerManager.breakpointsEnabled = true;
+        }
+
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.CaptureStopped);
+    }
+
+    playbackStarted()
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.playbackStarted.bind(this));
+
+        if (this.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
+            this._changeSessionState(WebInspector.ReplayManager.SessionState.Replaying);
+
+        this._changeSegmentState(WebInspector.ReplayManager.SegmentState.Dispatching);
+
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.PlaybackStarted);
+    }
+
+    playbackHitPosition(replayPosition, timestamp)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.playbackHitPosition.bind(this, replayPosition, timestamp));
+
+        console.assert(this.sessionState === WebInspector.ReplayManager.SessionState.Replaying);
+        console.assert(this.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching);
+        console.assert(replayPosition instanceof WebInspector.ReplayPosition);
+
+        this._currentPosition = replayPosition;
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.PlaybackPositionChanged);
+    }
+
+    playbackPaused(position)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.playbackPaused.bind(this, position));
+
+        console.assert(this.sessionState === WebInspector.ReplayManager.SessionState.Replaying);
+        this._changeSegmentState(WebInspector.ReplayManager.SegmentState.Loaded);
+
+        if (this._breakpointsWereSuppressed) {
+            delete this._breakpointsWereSuppressed;
+            WebInspector.debuggerManager.breakpointsEnabled = true;
+        }
+
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.PlaybackPaused);
+    }
+
+    playbackFinished()
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.playbackFinished.bind(this));
+
+        this._changeSessionState(WebInspector.ReplayManager.SessionState.Inactive);
+        console.assert(this.segmentState === WebInspector.ReplayManager.SegmentState.Unloaded);
+
+        if (this._breakpointsWereSuppressed) {
+            delete this._breakpointsWereSuppressed;
+            WebInspector.debuggerManager.breakpointsEnabled = true;
+        }
+
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.PlaybackFinished);
+    }
+
+    sessionCreated(sessionId)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.sessionCreated.bind(this, sessionId));
+
+        console.assert(!this._sessions.has(sessionId), "Tried to add duplicate session identifier:", sessionId);
+        var sessionMap = this._sessions;
+        this.getSession(sessionId)
+            .then(function(session) {
+                sessionMap.set(sessionId, session);
+            }).catch(function(error) {
+                console.error("Error obtaining session data: ", error);
+                throw error;
+            });
+
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.SessionAdded, {sessionId});
+    }
+
+    sessionModified(sessionId)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.sessionModified.bind(this, sessionId));
+
+        this.getSession(sessionId).then(function(session) {
+            session.segmentsChanged();
+        });
+    }
+
+    sessionRemoved(sessionId)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.sessionRemoved.bind(this, sessionId));
+
+        console.assert(this._sessions.has(sessionId), "Unknown session identifier:", sessionId);
+
+        if (!this._sessionPromises.has(sessionId))
+            return;
+
+        var manager = this;
+
+        this.getSession(sessionId)
+            .catch(function(error) {
+                // Wait for any outstanding promise to settle so it doesn't get re-added.
+            }).then(function() {
+                manager._sessionPromises.delete(sessionId);
+                var removedSession = manager._sessions.take(sessionId);
+                console.assert(removedSession);
+                manager.dispatchEventToListeners(WebInspector.ReplayManager.Event.SessionRemoved, {removedSession});
+            });
+    }
+
+    segmentCreated(segmentId)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.segmentCreated.bind(this, segmentId));
+
+        console.assert(!this._segments.has(segmentId), "Tried to add duplicate segment identifier:", segmentId);
+
+        this._changeSegmentState(WebInspector.ReplayManager.SegmentState.Appending);
+
+        // Create a dummy segment, and don't try to load any data for it. It will
+        // be removed once the segment is complete, and then its data will be fetched.
+        var incompleteSegment = new WebInspector.IncompleteSessionSegment(segmentId);
+        this._segments.set(segmentId, incompleteSegment);
+        this._segmentPromises.set(segmentId, Promise.resolve(incompleteSegment));
+
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.SessionSegmentAdded, {segmentIdentifier: segmentId});
+    }
+
+    segmentCompleted(segmentId)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.segmentCompleted.bind(this, segmentId));
+
+        var placeholderSegment = this._segments.take(segmentId);
+        console.assert(placeholderSegment instanceof WebInspector.IncompleteSessionSegment);
+        this._segmentPromises.delete(segmentId);
+
+        var segmentMap = this._segments;
+        this.getSegment(segmentId)
+            .then(function(segment) {
+                segmentMap.set(segmentId, segment);
+            }).catch(function(error) {
+                console.error("Error obtaining segment data: ", error);
+                throw error;
+            });
+    }
+
+    segmentRemoved(segmentId)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.segmentRemoved.bind(this, segmentId));
+
+        console.assert(this._segments.has(segmentId), "Unknown segment identifier:", segmentId);
+
+        if (!this._segmentPromises.has(segmentId))
+            return;
+
+        var manager = this;
+
+        // Wait for any outstanding promise to settle so it doesn't get re-added.
+        this.getSegment(segmentId)
+            .catch(function(error) {
+                return Promise.resolve();
+            }).then(function() {
+                manager._segmentPromises.delete(segmentId);
+                var removedSegment = manager._segments.take(segmentId);
+                console.assert(removedSegment);
+                manager.dispatchEventToListeners(WebInspector.ReplayManager.Event.SessionSegmentRemoved, {removedSegment});
+            });
+    }
+
+    segmentLoaded(segmentId)
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.segmentLoaded.bind(this, segmentId));
+
+        console.assert(this._segments.has(segmentId), "Unknown segment identifier:", segmentId);
+
+        console.assert(this.sessionState !== WebInspector.ReplayManager.SessionState.Capturing);
+        this._changeSegmentState(WebInspector.ReplayManager.SegmentState.Loaded);
+
+        var previousIdentifier = this._activeSegmentIdentifier;
+        this._activeSegmentIdentifier = segmentId;
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.ActiveSegmentChanged, {previousSegmentIdentifier: previousIdentifier});
+    }
+
+    segmentUnloaded()
+    {
+        if (!this._initialized)
+            return this.waitUntilInitialized().then(this.segmentUnloaded.bind(this));
+
+        console.assert(this.sessionState === WebInspector.ReplayManager.SessionState.Replaying);
+        this._changeSegmentState(WebInspector.ReplayManager.SegmentState.Unloaded);
+
+        var previousIdentifier = this._activeSegmentIdentifier;
+        this._activeSegmentIdentifier = null;
+        this.dispatchEventToListeners(WebInspector.ReplayManager.Event.ActiveSegmentChanged, {previousSegmentIdentifier: previousIdentifier});
+    }
+
+    // Private
+
+    _changeSessionState(newState)
+    {
+        // Warn about no-op state changes. We shouldn't be seeing them.
+        var isAllowed = this._sessionState !== newState;
+
+        switch (this._sessionState) {
+        case WebInspector.ReplayManager.SessionState.Capturing:
+            isAllowed &= newState === WebInspector.ReplayManager.SessionState.Inactive;
+            break;
+
+        case WebInspector.ReplayManager.SessionState.Replaying:
+            isAllowed &= newState === WebInspector.ReplayManager.SessionState.Inactive;
+            break;
+        }
+
+        console.assert(isAllowed, "Invalid session state change: ", this._sessionState, " to ", newState);
+        if (isAllowed)
+            this._sessionState = newState;
+    }
+
+    _changeSegmentState(newState)
+    {
+        // Warn about no-op state changes. We shouldn't be seeing them.
+        var isAllowed = this._segmentState !== newState;
+
+        switch (this._segmentState) {
+            case WebInspector.ReplayManager.SegmentState.Appending:
+                isAllowed &= newState === WebInspector.ReplayManager.SegmentState.Unloaded;
+                break;
+            case WebInspector.ReplayManager.SegmentState.Unloaded:
+                isAllowed &= newState === WebInspector.ReplayManager.SegmentState.Appending || newState === WebInspector.ReplayManager.SegmentState.Loaded;
+                break;
+            case WebInspector.ReplayManager.SegmentState.Loaded:
+                isAllowed &= newState === WebInspector.ReplayManager.SegmentState.Unloaded || newState === WebInspector.ReplayManager.SegmentState.Dispatching;
+                break;
+            case WebInspector.ReplayManager.SegmentState.Dispatching:
+                isAllowed &= newState === WebInspector.ReplayManager.SegmentState.Loaded;
+                break;
+        }
+
+        console.assert(isAllowed, "Invalid segment state change: ", this._segmentState, " to ", newState);
+        if (isAllowed)
+            this._segmentState = newState;
+    }
+
+    _suppressBreakpointsAndResumeIfNeeded()
+    {
+        var manager = this;
+
+        return new Promise(function(resolve, reject) {
+            manager._breakpointsWereSuppressed = WebInspector.debuggerManager.breakpointsEnabled;
+            WebInspector.debuggerManager.breakpointsEnabled = false;
+
+            return WebInspector.debuggerManager.resume();
+        });
+    }
+};
+
+WebInspector.ReplayManager.Event = {
+    CaptureStarted: "replay-manager-capture-started",
+    CaptureStopped: "replay-manager-capture-stopped",
+
+    PlaybackStarted: "replay-manager-playback-started",
+    PlaybackPaused: "replay-manager-playback-paused",
+    PlaybackFinished: "replay-manager-playback-finished",
+    PlaybackPositionChanged: "replay-manager-play-back-position-changed",
+
+    ActiveSessionChanged: "replay-manager-active-session-changed",
+    ActiveSegmentChanged: "replay-manager-active-segment-changed",
+
+    SessionSegmentAdded: "replay-manager-session-segment-added",
+    SessionSegmentRemoved: "replay-manager-session-segment-removed",
+
+    SessionAdded: "replay-manager-session-added",
+    SessionRemoved: "replay-manager-session-removed",
+};
+
+WebInspector.ReplayManager.SessionState = {
+    Capturing: "replay-manager-session-state-capturing",
+    Inactive: "replay-manager-session-state-inactive",
+    Replaying: "replay-manager-session-state-replaying",
+};
+
+WebInspector.ReplayManager.SegmentState = {
+    Appending: "replay-manager-segment-state-appending",
+    Unloaded: "replay-manager-segment-state-unloaded",
+    Loaded: "replay-manager-segment-state-loaded",
+    Dispatching: "replay-manager-segment-state-dispatching",
+};
+
+WebInspector.ReplayManager.PlaybackSpeed = {
+    RealTime: "replay-manager-playback-speed-real-time",
+    FastForward: "replay-manager-playback-speed-fast-forward",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js b/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js
new file mode 100644
index 000000000..477776cd5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/RuntimeManager.js
@@ -0,0 +1,119 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RuntimeManager = class RuntimeManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        // Enable the RuntimeAgent to receive notification of execution contexts.
+        RuntimeAgent.enable();
+    }
+
+    // Public
+
+    evaluateInInspectedWindow(expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, generatePreview, saveResult, callback)
+    {
+        if (!expression) {
+            // There is no expression, so the completion should happen against global properties.
+            expression = "this";
+        } else if (/^\s*\{/.test(expression) && /\}\s*$/.test(expression)) {
+            // Transform {a:1} to ({a:1}) so it is treated like an object literal instead of a block with a label.
+            expression = "(" + expression + ")";
+        }
+
+        expression = appendWebInspectorSourceURL(expression);
+
+        function evalCallback(error, result, wasThrown, savedResultIndex)
+        {
+            this.dispatchEventToListeners(WebInspector.RuntimeManager.Event.DidEvaluate, {objectGroup});
+
+            if (error) {
+                console.error(error);
+                callback(null, false);
+                return;
+            }
+
+            if (returnByValue)
+                callback(null, wasThrown, wasThrown ? null : result, savedResultIndex);
+            else
+                callback(WebInspector.RemoteObject.fromPayload(result), wasThrown, savedResultIndex);
+        }
+
+        if (WebInspector.debuggerManager.activeCallFrame) {
+            // COMPATIBILITY (iOS 8): "saveResult" did not exist.
+            DebuggerAgent.evaluateOnCallFrame.invoke({callFrameId: WebInspector.debuggerManager.activeCallFrame.id, expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, generatePreview, saveResult}, evalCallback.bind(this));
+            return;
+        }
+
+        // COMPATIBILITY (iOS 8): "saveResult" did not exist.
+        var contextId = WebInspector.quickConsole.executionContextIdentifier;
+        RuntimeAgent.evaluate.invoke({expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, contextId, returnByValue, generatePreview, saveResult}, evalCallback.bind(this));
+    }
+
+    saveResult(remoteObject, callback)
+    {
+        console.assert(remoteObject instanceof WebInspector.RemoteObject);
+
+        // COMPATIBILITY (iOS 8): Runtime.saveResult did not exist.
+        if (!RuntimeAgent.saveResult) {
+            callback(undefined);
+            return;
+        }
+
+        function mycallback(error, savedResultIndex)
+        {
+            callback(savedResultIndex);
+        }
+
+        if (remoteObject.objectId)
+            RuntimeAgent.saveResult(remoteObject.asCallArgument(), mycallback);
+        else
+            RuntimeAgent.saveResult(remoteObject.asCallArgument(), WebInspector.quickConsole.executionContextIdentifier, mycallback);
+    }
+
+    getPropertiesForRemoteObject(objectId, callback)
+    {
+        RuntimeAgent.getProperties(objectId, function(error, result) {
+            if (error) {
+                callback(error);
+                return;
+            }
+
+            var properties = new Map;
+            for (var property of result)
+                properties.set(property.name, property);
+
+            callback(null, properties);
+        });
+    }
+};
+
+WebInspector.RuntimeManager.Event = {
+    DidEvaluate: "runtime-manager-did-evaluate"
+};
+
+WebInspector.RuntimeManager.ConsoleObjectGroup = "console";
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/SourceMapManager.js b/Source/WebInspectorUI/UserInterface/Controllers/SourceMapManager.js
new file mode 100644
index 000000000..20f905e9c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/SourceMapManager.js
@@ -0,0 +1,176 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceMapManager = class SourceMapManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._sourceMapURLMap = {};
+        this._downloadingSourceMaps = {};
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    }
+
+    // Public
+
+    sourceMapForURL(sourceMapURL)
+    {
+        return this._sourceMapURLMap[sourceMapURL];
+    }
+
+    downloadSourceMap(sourceMapURL, baseURL, originalSourceCode)
+    {
+        sourceMapURL = absoluteURL(sourceMapURL, baseURL);
+        if (!sourceMapURL)
+            return;
+
+        console.assert(originalSourceCode.url);
+        if (!originalSourceCode.url)
+            return;
+
+        // FIXME: <rdar://problem/13265694> Source Maps: Better handle when multiple resources reference the same SourceMap
+
+        if (sourceMapURL in this._sourceMapURLMap)
+            return;
+
+        if (sourceMapURL in this._downloadingSourceMaps)
+            return;
+
+        function loadAndParseSourceMap()
+        {
+            this._loadAndParseSourceMap(sourceMapURL, baseURL, originalSourceCode);
+        }
+
+        if (!WebInspector.frameResourceManager.mainFrame) {
+            // If we don't have a main frame, then we are likely in the middle of building the resource tree.
+            // Delaying until the next runloop is enough in this case to then start loading the source map.
+            setTimeout(loadAndParseSourceMap.bind(this), 0);
+            return;
+        }
+
+        loadAndParseSourceMap.call(this);
+    }
+
+    // Private
+
+    _loadAndParseSourceMap(sourceMapURL, baseURL, originalSourceCode)
+    {
+        this._downloadingSourceMaps[sourceMapURL] = true;
+
+        function sourceMapLoaded(error, content, mimeType, statusCode)
+        {
+            if (error || statusCode >= 400) {
+                this._loadAndParseFailed(sourceMapURL);
+                return;
+            }
+
+            if (content.slice(0, 3) === ")]}") {
+                var firstNewlineIndex = content.indexOf("\n");
+                if (firstNewlineIndex === -1) {
+                    this._loadAndParseFailed(sourceMapURL);
+                    return;
+                }
+
+                content = content.substring(firstNewlineIndex);
+            }
+
+            try {
+                var payload = JSON.parse(content);
+                var baseURL = sourceMapURL.startsWith("data:") ? originalSourceCode.url : sourceMapURL;
+                var sourceMap = new WebInspector.SourceMap(baseURL, payload, originalSourceCode);
+                this._loadAndParseSucceeded(sourceMapURL, sourceMap);
+            } catch(e) {
+                this._loadAndParseFailed(sourceMapURL);
+            }
+        }
+
+        if (sourceMapURL.startsWith("data:")) {
+            let {mimeType, base64, data} = parseDataURL(sourceMapURL);
+            let content = base64 ? atob(data) : data;
+            sourceMapLoaded.call(this, null, content, mimeType, 0);
+            return;
+        }
+
+        // COMPATIBILITY (iOS 7): Network.loadResource did not exist.
+        // Also, JavaScript Debuggable may reach this.
+        if (!window.NetworkAgent || !NetworkAgent.loadResource) {
+            this._loadAndParseFailed(sourceMapURL);
+            return;
+        }
+
+        var frameIdentifier = null;
+        if (originalSourceCode instanceof WebInspector.Resource && originalSourceCode.parentFrame)
+            frameIdentifier = originalSourceCode.parentFrame.id;
+
+        if (!frameIdentifier)
+            frameIdentifier = WebInspector.frameResourceManager.mainFrame.id;
+
+        NetworkAgent.loadResource(frameIdentifier, sourceMapURL, sourceMapLoaded.bind(this));
+    }
+
+    _loadAndParseFailed(sourceMapURL)
+    {
+        delete this._downloadingSourceMaps[sourceMapURL];
+    }
+
+    _loadAndParseSucceeded(sourceMapURL, sourceMap)
+    {
+        if (!(sourceMapURL in this._downloadingSourceMaps))
+            return;
+
+        delete this._downloadingSourceMaps[sourceMapURL];
+
+        this._sourceMapURLMap[sourceMapURL] = sourceMap;
+
+        var sources = sourceMap.sources();
+        for (var i = 0; i < sources.length; ++i) {
+            var sourceMapResource = new WebInspector.SourceMapResource(sources[i], sourceMap);
+            sourceMap.addResource(sourceMapResource);
+        }
+
+        // Associate the SourceMap with the originalSourceCode.
+        sourceMap.originalSourceCode.addSourceMap(sourceMap);
+
+        // If the originalSourceCode was not a Resource, be sure to also associate with the Resource if one exists.
+        // FIXME: We should try to use the right frame instead of a global lookup by URL.
+        if (!(sourceMap.originalSourceCode instanceof WebInspector.Resource)) {
+            console.assert(sourceMap.originalSourceCode instanceof WebInspector.Script);
+            var resource = sourceMap.originalSourceCode.resource;
+            if (resource)
+                resource.addSourceMap(sourceMap);
+        }
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this._sourceMapURLMap = {};
+        this._downloadingSourceMaps = {};
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/StorageManager.js b/Source/WebInspectorUI/UserInterface/Controllers/StorageManager.js
new file mode 100644
index 000000000..722032da6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/StorageManager.js
@@ -0,0 +1,329 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013 Samsung Electronics. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StorageManager = class StorageManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        if (window.DOMStorageAgent)
+            DOMStorageAgent.enable();
+        if (window.DatabaseAgent)
+            DatabaseAgent.enable();
+        if (window.IndexedDBAgent)
+            IndexedDBAgent.enable();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.SecurityOriginDidChange, this._securityOriginDidChange, this);
+
+        this.initialize();
+    }
+
+    // Public
+
+    initialize()
+    {
+        this._domStorageObjects = [];
+        this._databaseObjects = [];
+        this._indexedDatabases = [];
+        this._cookieStorageObjects = {};
+    }
+
+    get domStorageObjects()
+    {
+        return this._domStorageObjects;
+    }
+
+    get databases()
+    {
+        return this._databaseObjects;
+    }
+
+    get indexedDatabases()
+    {
+        return this._indexedDatabases;
+    }
+
+    get cookieStorageObjects()
+    {
+        var cookieStorageObjects = [];
+        for (var host in this._cookieStorageObjects)
+            cookieStorageObjects.push(this._cookieStorageObjects[host]);
+        return cookieStorageObjects;
+    }
+
+    domStorageWasAdded(id, host, isLocalStorage)
+    {
+        var domStorage = new WebInspector.DOMStorageObject(id, host, isLocalStorage);
+
+        this._domStorageObjects.push(domStorage);
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DOMStorageObjectWasAdded, {domStorage});
+    }
+
+    databaseWasAdded(id, host, name, version)
+    {
+        var database = new WebInspector.DatabaseObject(id, host, name, version);
+
+        this._databaseObjects.push(database);
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DatabaseWasAdded, {database});
+    }
+
+    itemsCleared(storageId)
+    {
+        let domStorage = this._domStorageForIdentifier(storageId);
+        if (domStorage)
+            domStorage.itemsCleared(storageId);
+    }
+
+    itemRemoved(storageId, key)
+    {
+        let domStorage = this._domStorageForIdentifier(storageId);
+        if (domStorage)
+            domStorage.itemRemoved(key);
+    }
+
+    itemAdded(storageId, key, value)
+    {
+        let domStorage = this._domStorageForIdentifier(storageId);
+        if (domStorage)
+            domStorage.itemAdded(key, value);
+    }
+
+    itemUpdated(storageId, key, oldValue, value)
+    {
+        let domStorage = this._domStorageForIdentifier(storageId);
+        if (domStorage)
+            domStorage.itemUpdated(key, oldValue, value);
+    }
+
+    inspectDatabase(id)
+    {
+        var database = this._databaseForIdentifier(id);
+        console.assert(database);
+        if (!database)
+            return;
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DatabaseWasInspected, {database});
+    }
+
+    inspectDOMStorage(id)
+    {
+        var domStorage = this._domStorageForIdentifier(id);
+        console.assert(domStorage);
+        if (!domStorage)
+            return;
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, {domStorage});
+    }
+
+    // Protected
+
+    requestIndexedDatabaseData(objectStore, objectStoreIndex, startEntryIndex, maximumEntryCount, callback)
+    {
+        console.assert(window.IndexedDBAgent);
+        console.assert(objectStore);
+        console.assert(callback);
+
+        function processData(error, entryPayloads, moreAvailable)
+        {
+            if (error) {
+                callback(null, false);
+                return;
+            }
+
+            var entries = [];
+
+            for (var entryPayload of entryPayloads) {
+                var entry = {};
+                entry.primaryKey = WebInspector.RemoteObject.fromPayload(entryPayload.primaryKey);
+                entry.key = WebInspector.RemoteObject.fromPayload(entryPayload.key);
+                entry.value = WebInspector.RemoteObject.fromPayload(entryPayload.value);
+                entries.push(entry);
+            }
+
+            callback(entries, moreAvailable);
+        }
+
+        var requestArguments = {
+            securityOrigin: objectStore.parentDatabase.securityOrigin,
+            databaseName: objectStore.parentDatabase.name,
+            objectStoreName: objectStore.name,
+            indexName: objectStoreIndex && objectStoreIndex.name || "",
+            skipCount: startEntryIndex || 0,
+            pageSize: maximumEntryCount || 100
+        };
+
+        IndexedDBAgent.requestData.invoke(requestArguments, processData);
+    }
+
+    // Private
+
+    _domStorageForIdentifier(id)
+    {
+        for (var storageObject of this._domStorageObjects) {
+            // The id is an object, so we need to compare the properties using Object.shallowEqual.
+            if (Object.shallowEqual(storageObject.id, id))
+                return storageObject;
+        }
+
+        return null;
+    }
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (event.target.isMainFrame()) {
+            // If we are dealing with the main frame, we want to clear our list of objects, because we are navigating to a new page.
+            this.initialize();
+            this.dispatchEventToListeners(WebInspector.StorageManager.Event.Cleared);
+
+            this._addDOMStorageIfNeeded(event.target);
+            this._addIndexedDBDatabasesIfNeeded(event.target);
+        }
+
+        // Add the host of the frame that changed the main resource to the list of hosts there could be cookies for.
+        var host = parseURL(event.target.url).host;
+        if (!host)
+            return;
+
+        if (this._cookieStorageObjects[host])
+            return;
+
+        this._cookieStorageObjects[host] = new WebInspector.CookieStorageObject(host);
+        this.dispatchEventToListeners(WebInspector.StorageManager.Event.CookieStorageObjectWasAdded, {cookieStorage: this._cookieStorageObjects[host]});
+    }
+
+    _addDOMStorageIfNeeded(frame)
+    {
+        if (!window.DOMStorageAgent)
+            return;
+
+        // Don't show storage if we don't have a security origin (about:blank).
+        if (!frame.securityOrigin || frame.securityOrigin === "://")
+            return;
+
+        // FIXME: Consider passing the other parts of the origin along to domStorageWasAdded.
+
+        var localStorageIdentifier = {securityOrigin: frame.securityOrigin, isLocalStorage: true};
+        if (!this._domStorageForIdentifier(localStorageIdentifier))
+            this.domStorageWasAdded(localStorageIdentifier, frame.mainResource.urlComponents.host, true);
+
+        var sessionStorageIdentifier = {securityOrigin: frame.securityOrigin, isLocalStorage: false};
+        if (!this._domStorageForIdentifier(sessionStorageIdentifier))
+            this.domStorageWasAdded(sessionStorageIdentifier, frame.mainResource.urlComponents.host, false);
+    }
+
+    _addIndexedDBDatabasesIfNeeded(frame)
+    {
+        if (!window.IndexedDBAgent)
+            return;
+
+        var securityOrigin = frame.securityOrigin;
+
+        // Don't show storage if we don't have a security origin (about:blank).
+        if (!securityOrigin || securityOrigin === "://")
+            return;
+
+        function processDatabaseNames(error, names)
+        {
+            if (error || !names)
+                return;
+
+            for (var name of names)
+                IndexedDBAgent.requestDatabase(securityOrigin, name, processDatabase.bind(this));
+        }
+
+        function processDatabase(error, databasePayload)
+        {
+            if (error || !databasePayload)
+                return;
+
+            var objectStores = databasePayload.objectStores.map(processObjectStore);
+            var indexedDatabase = new WebInspector.IndexedDatabase(databasePayload.name, securityOrigin, databasePayload.version, objectStores);
+
+            this._indexedDatabases.push(indexedDatabase);
+            this.dispatchEventToListeners(WebInspector.StorageManager.Event.IndexedDatabaseWasAdded, {indexedDatabase});
+        }
+
+        function processKeyPath(keyPathPayload)
+        {
+            switch (keyPathPayload.type) {
+            case "null":
+                return null;
+            case "string":
+                return keyPathPayload.string;
+            case "array":
+                return keyPathPayload.array;
+            default:
+                console.error("Unknown KeyPath type:", keyPathPayload.type);
+                return null;
+            }
+        }
+
+        function processObjectStore(objectStorePayload)
+        {
+            var keyPath = processKeyPath(objectStorePayload.keyPath);
+            var indexes = objectStorePayload.indexes.map(processObjectStoreIndex);
+            return new WebInspector.IndexedDatabaseObjectStore(objectStorePayload.name, keyPath, objectStorePayload.autoIncrement, indexes);
+        }
+
+        function processObjectStoreIndex(objectStoreIndexPayload)
+        {
+            var keyPath = processKeyPath(objectStoreIndexPayload.keyPath);
+            return new WebInspector.IndexedDatabaseObjectStoreIndex(objectStoreIndexPayload.name, keyPath, objectStoreIndexPayload.unique, objectStoreIndexPayload.multiEntry);
+        }
+
+        IndexedDBAgent.requestDatabaseNames(securityOrigin, processDatabaseNames.bind(this));
+    }
+
+    _securityOriginDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        this._addDOMStorageIfNeeded(event.target);
+        this._addIndexedDBDatabasesIfNeeded(event.target);
+    }
+
+    _databaseForIdentifier(id)
+    {
+        for (var i = 0; i < this._databaseObjects.length; ++i) {
+            if (this._databaseObjects[i].id === id)
+                return this._databaseObjects[i];
+        }
+
+        return null;
+    }
+};
+
+WebInspector.StorageManager.Event = {
+    CookieStorageObjectWasAdded: "storage-manager-cookie-storage-object-was-added",
+    DOMStorageObjectWasAdded: "storage-manager-dom-storage-object-was-added",
+    DOMStorageObjectWasInspected: "storage-dom-object-was-inspected",
+    DatabaseWasAdded: "storage-manager-database-was-added",
+    DatabaseWasInspected: "storage-object-was-inspected",
+    IndexedDatabaseWasAdded: "storage-manager-indexed-database-was-added",
+    Cleared: "storage-manager-cleared"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js b/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
new file mode 100644
index 000000000..c9da69331
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
@@ -0,0 +1,808 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineManager = class TimelineManager extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ProvisionalLoadStarted, this._startAutoCapturing, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+
+        WebInspector.heapManager.addEventListener(WebInspector.HeapManager.Event.GarbageCollected, this._garbageCollected, this);
+
+        this._persistentNetworkTimeline = new WebInspector.NetworkTimeline;
+
+        this._isCapturing = false;
+        this._isCapturingPageReload = false;
+        this._autoCapturingMainResource = null;
+        this._boundStopCapturing = this.stopCapturing.bind(this);
+
+        this._webTimelineScriptRecordsExpectingScriptProfilerEvents = null;
+        this._scriptProfilerRecords = null;
+
+        this._callingContextTree = null;
+
+        this.reset();
+    }
+
+    // Static
+
+    static defaultInstruments()
+    {
+        if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
+            return [new WebInspector.ScriptInstrument];
+
+        let defaults = [
+            new WebInspector.NetworkInstrument,
+            new WebInspector.LayoutInstrument,
+            new WebInspector.ScriptInstrument,
+        ];
+
+        if (WebInspector.FPSInstrument.supported())
+            defaults.push(new WebInspector.FPSInstrument);
+
+        return defaults;
+    }
+
+    // Public
+
+    reset()
+    {
+        if (this._isCapturing)
+            this.stopCapturing();
+
+        this._recordings = [];
+        this._activeRecording = null;
+        this._nextRecordingIdentifier = 1;
+
+        this._loadNewRecording();
+    }
+
+    // The current recording that new timeline records will be appended to, if any.
+    get activeRecording()
+    {
+        console.assert(this._activeRecording || !this._isCapturing);
+        return this._activeRecording;
+    }
+
+    get persistentNetworkTimeline()
+    {
+        return this._persistentNetworkTimeline;
+    }
+
+    get recordings()
+    {
+        return this._recordings.slice();
+    }
+
+    get autoCaptureOnPageLoad()
+    {
+        return this._autoCaptureOnPageLoad;
+    }
+
+    set autoCaptureOnPageLoad(autoCapture)
+    {
+        this._autoCaptureOnPageLoad = autoCapture;
+    }
+
+    isCapturing()
+    {
+        return this._isCapturing;
+    }
+
+    isCapturingPageReload()
+    {
+        return this._isCapturingPageReload;
+    }
+
+    startCapturing(shouldCreateRecording)
+    {
+        console.assert(!this._isCapturing, "TimelineManager is already capturing.");
+
+        if (!this._activeRecording || shouldCreateRecording)
+            this._loadNewRecording();
+
+        this._activeRecording.start();
+    }
+
+    stopCapturing()
+    {
+        console.assert(this._isCapturing, "TimelineManager is not capturing.");
+
+        this._activeRecording.stop();
+
+        // NOTE: Always stop immediately instead of waiting for a Timeline.recordingStopped event.
+        // This way the UI feels as responsive to a stop as possible.
+        // FIXME: <https://webkit.org/b/152904> Web Inspector: Timeline UI should keep up with processing all incoming records
+        this.capturingStopped();
+    }
+
+    unloadRecording()
+    {
+        if (!this._activeRecording)
+            return;
+
+        if (this._isCapturing)
+            this.stopCapturing();
+
+        this._activeRecording.unloaded();
+        this._activeRecording = null;
+    }
+
+    computeElapsedTime(timestamp)
+    {
+        if (!this._activeRecording)
+            return 0;
+
+        return this._activeRecording.computeElapsedTime(timestamp);
+    }
+
+    scriptProfilerIsTracking()
+    {
+        return this._scriptProfilerRecords !== null;
+    }
+
+    // Protected
+
+    capturingStarted(startTime)
+    {
+        if (this._isCapturing)
+            return;
+
+        this._isCapturing = true;
+
+        if (startTime)
+            this.activeRecording.initializeTimeBoundsIfNecessary(startTime);
+
+        this._webTimelineScriptRecordsExpectingScriptProfilerEvents = [];
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.CapturingStarted, {startTime});
+    }
+
+    capturingStopped(endTime)
+    {
+        if (!this._isCapturing)
+            return;
+
+        if (this._stopCapturingTimeout) {
+            clearTimeout(this._stopCapturingTimeout);
+            this._stopCapturingTimeout = undefined;
+        }
+
+        if (this._deadTimeTimeout) {
+            clearTimeout(this._deadTimeTimeout);
+            this._deadTimeTimeout = undefined;
+        }
+
+        this._isCapturing = false;
+        this._isCapturingPageReload = false;
+        this._autoCapturingMainResource = null;
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.CapturingStopped, {endTime});
+    }
+
+    eventRecorded(recordPayload)
+    {
+        // Called from WebInspector.TimelineObserver.
+
+        if (!this._isCapturing)
+            return;
+
+        var records = [];
+
+        // Iterate over the records tree using a stack. Doing this recursively has
+        // been known to cause a call stack overflow. https://webkit.org/b/79106
+        var stack = [{array: [recordPayload], parent: null, parentRecord: null, index: 0}];
+        while (stack.length) {
+            var entry = stack.lastValue;
+            var recordPayloads = entry.array;
+
+            if (entry.index < recordPayloads.length) {
+                var recordPayload = recordPayloads[entry.index];
+                var record = this._processEvent(recordPayload, entry.parent);
+                if (record) {
+                    record.parent = entry.parentRecord;
+                    records.push(record);
+                    if (entry.parentRecord)
+                        entry.parentRecord.children.push(record);
+                }
+
+                if (recordPayload.children && recordPayload.children.length)
+                    stack.push({array: recordPayload.children, parent: recordPayload, parentRecord: record || entry.parentRecord, index: 0});
+                ++entry.index;
+            } else
+                stack.pop();
+        }
+
+        for (var record of records) {
+            if (record.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+                if (!record.children.length)
+                    continue;
+                record.setupFrameIndex();
+            }
+
+            this._addRecord(record);
+        }
+    }
+
+    // Protected
+
+    pageDOMContentLoadedEventFired(timestamp)
+    {
+        // Called from WebInspector.PageObserver.
+
+        console.assert(this._activeRecording);
+        console.assert(isNaN(WebInspector.frameResourceManager.mainFrame.domContentReadyEventTimestamp));
+
+        let computedTimestamp = this.activeRecording.computeElapsedTime(timestamp);
+
+        WebInspector.frameResourceManager.mainFrame.markDOMContentReadyEvent(computedTimestamp);
+
+        let eventMarker = new WebInspector.TimelineMarker(computedTimestamp, WebInspector.TimelineMarker.Type.DOMContentEvent);
+        this._activeRecording.addEventMarker(eventMarker);
+    }
+
+    pageLoadEventFired(timestamp)
+    {
+        // Called from WebInspector.PageObserver.
+
+        console.assert(this._activeRecording);
+        console.assert(isNaN(WebInspector.frameResourceManager.mainFrame.loadEventTimestamp));
+
+        let computedTimestamp = this.activeRecording.computeElapsedTime(timestamp);
+
+        WebInspector.frameResourceManager.mainFrame.markLoadEvent(computedTimestamp);
+
+        let eventMarker = new WebInspector.TimelineMarker(computedTimestamp, WebInspector.TimelineMarker.Type.LoadEvent);
+        this._activeRecording.addEventMarker(eventMarker);
+
+        this._stopAutoRecordingSoon();
+    }
+
+    memoryTrackingStart(timestamp)
+    {
+        // Called from WebInspector.MemoryObserver.
+
+        this.capturingStarted(timestamp);
+    }
+
+    memoryTrackingUpdate(event)
+    {
+        // Called from WebInspector.MemoryObserver.
+
+        if (!this._isCapturing)
+            return;
+
+        this._addRecord(new WebInspector.MemoryTimelineRecord(event.timestamp, event.categories));
+    }
+
+    memoryTrackingComplete()
+    {
+        // Called from WebInspector.MemoryObserver.
+    }
+
+    // Private
+
+    _processRecord(recordPayload, parentRecordPayload)
+    {
+        var startTime = this.activeRecording.computeElapsedTime(recordPayload.startTime);
+        var endTime = this.activeRecording.computeElapsedTime(recordPayload.endTime);
+        var callFrames = this._callFramesFromPayload(recordPayload.stackTrace);
+
+        var significantCallFrame = null;
+        if (callFrames) {
+            for (var i = 0; i < callFrames.length; ++i) {
+                if (callFrames[i].nativeCode)
+                    continue;
+                significantCallFrame = callFrames[i];
+                break;
+            }
+        }
+
+        var sourceCodeLocation = significantCallFrame && significantCallFrame.sourceCodeLocation;
+
+        switch (recordPayload.type) {
+        case TimelineAgent.EventType.ScheduleStyleRecalculation:
+            console.assert(isNaN(endTime));
+
+            // Pass the startTime as the endTime since this record type has no duration.
+            return new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles, startTime, startTime, callFrames, sourceCodeLocation);
+
+        case TimelineAgent.EventType.RecalculateStyles:
+            return new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles, startTime, endTime, callFrames, sourceCodeLocation);
+
+        case TimelineAgent.EventType.InvalidateLayout:
+            console.assert(isNaN(endTime));
+
+            // Pass the startTime as the endTime since this record type has no duration.
+            return new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout, startTime, startTime, callFrames, sourceCodeLocation);
+
+        case TimelineAgent.EventType.Layout:
+            var layoutRecordType = sourceCodeLocation ? WebInspector.LayoutTimelineRecord.EventType.ForcedLayout : WebInspector.LayoutTimelineRecord.EventType.Layout;
+            var quad = new WebInspector.Quad(recordPayload.data.root);
+            return new WebInspector.LayoutTimelineRecord(layoutRecordType, startTime, endTime, callFrames, sourceCodeLocation, quad);
+
+        case TimelineAgent.EventType.Paint:
+            var quad = new WebInspector.Quad(recordPayload.data.clip);
+            return new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Paint, startTime, endTime, callFrames, sourceCodeLocation, quad);
+
+        case TimelineAgent.EventType.Composite:
+            return new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Composite, startTime, endTime, callFrames, sourceCodeLocation);
+
+        case TimelineAgent.EventType.RenderingFrame:
+            if (!recordPayload.children || !recordPayload.children.length)
+                return null;
+
+            return new WebInspector.RenderingFrameTimelineRecord(startTime, endTime);
+
+        case TimelineAgent.EventType.EvaluateScript:
+            if (!sourceCodeLocation) {
+                var mainFrame = WebInspector.frameResourceManager.mainFrame;
+                var scriptResource = mainFrame.url === recordPayload.data.url ? mainFrame.mainResource : mainFrame.resourceForURL(recordPayload.data.url, true);
+                if (scriptResource) {
+                    // The lineNumber is 1-based, but we expect 0-based.
+                    var lineNumber = recordPayload.data.lineNumber - 1;
+
+                    // FIXME: No column number is provided.
+                    sourceCodeLocation = scriptResource.createSourceCodeLocation(lineNumber, 0);
+                }
+            }
+
+            var profileData = recordPayload.data.profile;
+
+            var record;
+            switch (parentRecordPayload && parentRecordPayload.type) {
+            case TimelineAgent.EventType.TimerFire:
+                record = new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.timerId, profileData);
+                break;
+            default:
+                record = new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated, startTime, endTime, callFrames, sourceCodeLocation, null, profileData);
+                break;
+            }
+
+            this._webTimelineScriptRecordsExpectingScriptProfilerEvents.push(record);
+            return record;
+
+        case TimelineAgent.EventType.ConsoleProfile:
+            var profileData = recordPayload.data.profile;
+            console.assert(profileData);
+            return new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ConsoleProfileRecorded, startTime, endTime, callFrames, sourceCodeLocation, recordPayload.data.title, profileData);
+
+        case TimelineAgent.EventType.TimerFire:
+        case TimelineAgent.EventType.EventDispatch:
+        case TimelineAgent.EventType.FireAnimationFrame:
+            // These are handled when the parent of FunctionCall or EvaluateScript.
+            break;
+
+        case TimelineAgent.EventType.FunctionCall:
+            // FunctionCall always happens as a child of another record, and since the FunctionCall record
+            // has useful info we just make the timeline record here (combining the data from both records).
+            if (!parentRecordPayload) {
+                console.warn("Unexpectedly received a FunctionCall timeline record without a parent record");
+                break;
+            }
+
+            if (!sourceCodeLocation) {
+                var mainFrame = WebInspector.frameResourceManager.mainFrame;
+                var scriptResource = mainFrame.url === recordPayload.data.scriptName ? mainFrame.mainResource : mainFrame.resourceForURL(recordPayload.data.scriptName, true);
+                if (scriptResource) {
+                    // The lineNumber is 1-based, but we expect 0-based.
+                    var lineNumber = recordPayload.data.scriptLine - 1;
+
+                    // FIXME: No column number is provided.
+                    sourceCodeLocation = scriptResource.createSourceCodeLocation(lineNumber, 0);
+                }
+            }
+
+            var profileData = recordPayload.data.profile;
+
+            var record;
+            switch (parentRecordPayload.type) {
+            case TimelineAgent.EventType.TimerFire:
+                record = new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.timerId, profileData);
+                break;
+            case TimelineAgent.EventType.EventDispatch:
+                record = new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.type, profileData);
+                break;
+            case TimelineAgent.EventType.FireAnimationFrame:
+                record = new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.id, profileData);
+                break;
+            case TimelineAgent.EventType.FunctionCall:
+                record = new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.id, profileData);
+                break;
+            case TimelineAgent.EventType.RenderingFrame:
+                record = new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated, startTime, endTime, callFrames, sourceCodeLocation, parentRecordPayload.data.id, profileData);
+                break;
+
+            default:
+                console.assert(false, "Missed FunctionCall embedded inside of: " + parentRecordPayload.type);
+                break;
+            }
+
+            if (record) {
+                this._webTimelineScriptRecordsExpectingScriptProfilerEvents.push(record);
+                return record;
+            }
+            break;
+
+        case TimelineAgent.EventType.ProbeSample:
+            // Pass the startTime as the endTime since this record type has no duration.
+            sourceCodeLocation = WebInspector.probeManager.probeForIdentifier(recordPayload.data.probeId).breakpoint.sourceCodeLocation;
+            return new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ProbeSampleRecorded, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.probeId);
+
+        case TimelineAgent.EventType.TimerInstall:
+            console.assert(isNaN(endTime));
+
+            // Pass the startTime as the endTime since this record type has no duration.
+            let timerDetails = {timerId: recordPayload.data.timerId, timeout: recordPayload.data.timeout, repeating: !recordPayload.data.singleShot};
+            return new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerInstalled, startTime, startTime, callFrames, sourceCodeLocation, timerDetails);
+
+        case TimelineAgent.EventType.TimerRemove:
+            console.assert(isNaN(endTime));
+
+            // Pass the startTime as the endTime since this record type has no duration.
+            return new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerRemoved, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.timerId);
+
+        case TimelineAgent.EventType.RequestAnimationFrame:
+            console.assert(isNaN(endTime));
+
+            // Pass the startTime as the endTime since this record type has no duration.
+            return new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.id);
+
+        case TimelineAgent.EventType.CancelAnimationFrame:
+            console.assert(isNaN(endTime));
+
+            // Pass the startTime as the endTime since this record type has no duration.
+            return new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled, startTime, startTime, callFrames, sourceCodeLocation, recordPayload.data.id);
+
+        default:
+            console.error("Missing handling of Timeline Event Type: " + recordPayload.type);
+        }
+
+        return null;
+    }
+
+    _processEvent(recordPayload, parentRecordPayload)
+    {
+        switch (recordPayload.type) {
+        case TimelineAgent.EventType.TimeStamp:
+            var timestamp = this.activeRecording.computeElapsedTime(recordPayload.startTime);
+            var eventMarker = new WebInspector.TimelineMarker(timestamp, WebInspector.TimelineMarker.Type.TimeStamp, recordPayload.data.message);
+            this._activeRecording.addEventMarker(eventMarker);
+            break;
+
+        case TimelineAgent.EventType.Time:
+        case TimelineAgent.EventType.TimeEnd:
+            // FIXME: <https://webkit.org/b/150690> Web Inspector: Show console.time/timeEnd ranges in Timeline
+            // FIXME: Make use of "message" payload properties.
+            break;
+
+        default:
+            return this._processRecord(recordPayload, parentRecordPayload);
+        }
+
+        return null;
+    }
+
+    _loadNewRecording()
+    {
+        if (this._activeRecording && this._activeRecording.isEmpty())
+            return;
+
+        // FIXME: <https://webkit.org/b/153672> Web Inspector: Timelines UI redesign: Provide a way to configure which instruments to use
+        // FIXME: Move the list of instruments for a new recording to a Setting when new Instruments are supported.
+        let instruments = WebInspector.TimelineManager.defaultInstruments();
+
+        var identifier = this._nextRecordingIdentifier++;
+        var newRecording = new WebInspector.TimelineRecording(identifier, WebInspector.UIString("Timeline Recording %d").format(identifier), instruments);
+
+        this._recordings.push(newRecording);
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingCreated, {recording: newRecording});
+
+        if (this._isCapturing)
+            this.stopCapturing();
+
+        var oldRecording = this._activeRecording;
+        if (oldRecording)
+            oldRecording.unloaded();
+
+        this._activeRecording = newRecording;
+
+        // COMPATIBILITY (iOS 8): When using Legacy timestamps, a navigation will have computed
+        // the main resource's will send request timestamp in terms of the last page's base timestamp.
+        // Now that we have navigated, we should reset the legacy base timestamp and the
+        // will send request timestamp for the new main resource. This way, all new timeline
+        // records will be computed relative to the new navigation.
+        if (this._autoCapturingMainResource && WebInspector.TimelineRecording.isLegacy) {
+            console.assert(this._autoCapturingMainResource.originalRequestWillBeSentTimestamp);
+            this._activeRecording.setLegacyBaseTimestamp(this._autoCapturingMainResource.originalRequestWillBeSentTimestamp);
+            this._autoCapturingMainResource._requestSentTimestamp = 0;
+        }
+
+        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingLoaded, {oldRecording});
+    }
+
+    _callFramesFromPayload(payload)
+    {
+        if (!payload)
+            return null;
+
+        return payload.map(WebInspector.CallFrame.fromPayload);
+    }
+
+    _addRecord(record)
+    {
+        this._activeRecording.addRecord(record);
+
+        // Only worry about dead time after the load event.
+        if (WebInspector.frameResourceManager.mainFrame && isNaN(WebInspector.frameResourceManager.mainFrame.loadEventTimestamp))
+            this._resetAutoRecordingDeadTimeTimeout();
+    }
+
+    _startAutoCapturing(event)
+    {
+        if (!this._autoCaptureOnPageLoad)
+            return false;
+
+        if (!event.target.isMainFrame() || (this._isCapturing && !this._autoCapturingMainResource))
+            return false;
+
+        var mainResource = event.target.provisionalMainResource || event.target.mainResource;
+        if (mainResource === this._autoCapturingMainResource)
+            return false;
+
+        var oldMainResource = event.target.mainResource || null;
+        this._isCapturingPageReload = oldMainResource !== null && oldMainResource.url === mainResource.url;
+
+        if (this._isCapturing)
+            this.stopCapturing();
+
+        this._autoCapturingMainResource = mainResource;
+
+        this._loadNewRecording();
+
+        this.startCapturing();
+
+        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
+
+        if (this._stopCapturingTimeout)
+            clearTimeout(this._stopCapturingTimeout);
+        this._stopCapturingTimeout = setTimeout(this._boundStopCapturing, WebInspector.TimelineManager.MaximumAutoRecordDuration);
+
+        return true;
+    }
+
+    _stopAutoRecordingSoon()
+    {
+        // Only auto stop when auto capturing.
+        if (!this._isCapturing || !this._autoCapturingMainResource)
+            return;
+
+        if (this._stopCapturingTimeout)
+            clearTimeout(this._stopCapturingTimeout);
+        this._stopCapturingTimeout = setTimeout(this._boundStopCapturing, WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent);
+    }
+
+    _resetAutoRecordingDeadTimeTimeout()
+    {
+        // Only monitor dead time when auto capturing.
+        if (!this._isCapturing || !this._autoCapturingMainResource)
+            return;
+
+        if (this._deadTimeTimeout)
+            clearTimeout(this._deadTimeTimeout);
+        this._deadTimeTimeout = setTimeout(this._boundStopCapturing, WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly);
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (event.target.isMainFrame())
+            this._persistentNetworkTimeline.reset();
+
+        var mainResource = event.target.mainResource;
+        var record = new WebInspector.ResourceTimelineRecord(mainResource);
+        if (!isNaN(record.startTime))
+            this._persistentNetworkTimeline.addRecord(record);
+
+        // Ignore resource events when there isn't a main frame yet. Those events are triggered by
+        // loading the cached resources when the inspector opens, and they do not have timing information.
+        if (!WebInspector.frameResourceManager.mainFrame)
+            return;
+
+        if (this._startAutoCapturing(event))
+            return;
+
+        if (!this._isCapturing)
+            return;
+
+        if (mainResource === this._autoCapturingMainResource)
+            return;
+
+        this._addRecord(record);
+    }
+
+    _resourceWasAdded(event)
+    {
+        var record = new WebInspector.ResourceTimelineRecord(event.data.resource);
+        if (!isNaN(record.startTime))
+            this._persistentNetworkTimeline.addRecord(record);
+
+        // Ignore resource events when there isn't a main frame yet. Those events are triggered by
+        // loading the cached resources when the inspector opens, and they do not have timing information.
+        if (!WebInspector.frameResourceManager.mainFrame)
+            return;
+
+        if (!this._isCapturing)
+            return;
+
+        this._addRecord(record);
+    }
+
+    _garbageCollected(event)
+    {
+        if (!this._isCapturing)
+            return;
+
+        let collection = event.data.collection;
+        this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.GarbageCollected, collection.startTime, collection.endTime, null, null, collection));
+    }
+
+    _scriptProfilerTypeToScriptTimelineRecordType(type)
+    {
+        switch (type) {
+        case ScriptProfilerAgent.EventType.API:
+            return WebInspector.ScriptTimelineRecord.EventType.APIScriptEvaluated;
+        case ScriptProfilerAgent.EventType.Microtask:
+            return WebInspector.ScriptTimelineRecord.EventType.MicrotaskDispatched;
+        case ScriptProfilerAgent.EventType.Other:
+            return WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated;
+        }
+    }
+
+    scriptProfilerTrackingStarted(timestamp)
+    {
+        this._scriptProfilerRecords = [];
+
+        this.capturingStarted(timestamp);
+    }
+
+    scriptProfilerTrackingUpdated(event)
+    {
+        let {startTime, endTime, type} = event;
+        let scriptRecordType = this._scriptProfilerTypeToScriptTimelineRecordType(type);
+        let record = new WebInspector.ScriptTimelineRecord(scriptRecordType, startTime, endTime, null, null, null, null);
+        record.__scriptProfilerType = type;
+        this._scriptProfilerRecords.push(record);
+
+        // "Other" events, generated by Web content, will have wrapping Timeline records
+        // and need to be merged. Non-Other events, generated purely by the JavaScript
+        // engine or outside of the page via APIs, will not have wrapping Timeline
+        // records, so these records can just be added right now.
+        if (type !== ScriptProfilerAgent.EventType.Other)
+            this._addRecord(record);
+    }
+
+    scriptProfilerTrackingCompleted(samples)
+    {
+        console.assert(!this._webTimelineScriptRecordsExpectingScriptProfilerEvents || this._scriptProfilerRecords.length >= this._webTimelineScriptRecordsExpectingScriptProfilerEvents.length);
+
+        if (samples) {
+            if (!this._callingContextTree)
+                this._callingContextTree = new WebInspector.CallingContextTree;
+
+            // Associate the stackTraces with the ScriptProfiler created records.
+            let stackTraces = samples.stackTraces;
+            for (let i = 0; i < stackTraces.length; i++)
+                this._callingContextTree.updateTreeWithStackTrace(stackTraces[i]);
+
+            for (let i = 0; i < this._scriptProfilerRecords.length; ++i) {
+                let record = this._scriptProfilerRecords[i];
+                record.profilePayload = this._callingContextTree.toCPUProfilePayload(record.startTime, record.endTime);
+            }
+        }
+
+        // Associate the ScriptProfiler created records with Web Timeline records.
+        // Filter out the already added ScriptProfiler events which should not have been wrapped.
+        if (WebInspector.debuggableType !== WebInspector.DebuggableType.JavaScript) {
+            this._scriptProfilerRecords = this._scriptProfilerRecords.filter((x) => x.__scriptProfilerType === ScriptProfilerAgent.EventType.Other);
+            this._mergeScriptProfileRecords();
+        }
+
+        this._scriptProfilerRecords = null;
+
+        let timeline = this.activeRecording.timelineForRecordType(WebInspector.TimelineRecord.Type.Script);
+        timeline.refresh();
+    }
+
+    _mergeScriptProfileRecords()
+    {
+        let nextRecord = function(list) { return list.shift() || null; }
+        let nextWebTimelineRecord = nextRecord.bind(null, this._webTimelineScriptRecordsExpectingScriptProfilerEvents);
+        let nextScriptProfilerRecord = nextRecord.bind(null, this._scriptProfilerRecords);
+        let recordEnclosesRecord = function(record1, record2) {
+            return record1.startTime <= record2.startTime && record1.endTime >= record2.endTime;
+        }
+
+        let webRecord = nextWebTimelineRecord();
+        let profilerRecord = nextScriptProfilerRecord();
+
+        while (webRecord && profilerRecord) {
+            // Skip web records with parent web records. For example an EvaluateScript with an EvaluateScript parent.
+            if (webRecord.parent instanceof WebInspector.ScriptTimelineRecord) {
+                console.assert(recordEnclosesRecord(webRecord.parent, webRecord), "Timeline Record incorrectly wrapping another Timeline Record");
+                webRecord = nextWebTimelineRecord();
+                continue;
+            }
+
+            // Normal case of a Web record wrapping a Script record.
+            if (recordEnclosesRecord(webRecord, profilerRecord)) {
+                webRecord.profilePayload = profilerRecord.profilePayload;
+                profilerRecord = nextScriptProfilerRecord();
+
+                // If there are more script profile records in the same time interval, add them
+                // as individual script evaluated records with profiles. This can happen with
+                // web microtask checkpoints that are technically inside of other web records.
+                // FIXME: <https://webkit.org/b/152903> Web Inspector: Timeline Cleanup: Better Timeline Record for Microtask Checkpoints
+                while (profilerRecord && recordEnclosesRecord(webRecord, profilerRecord)) {
+                    this._addRecord(profilerRecord);
+                    profilerRecord = nextScriptProfilerRecord();
+                }
+
+                webRecord = nextWebTimelineRecord();
+                continue;
+            }
+
+            // Profiler Record is entirely after the Web Record. This would mean an empty web record.
+            if (profilerRecord.startTime > webRecord.endTime) {
+                console.warn("Unexpected case of a Timeline record not containing a ScriptProfiler event and profile data");
+                webRecord = nextWebTimelineRecord();
+                continue;
+            }
+
+            // Non-wrapped profiler record.
+            console.warn("Unexpected case of a ScriptProfiler event not being contained by a Timeline record");
+            this._addRecord(profilerRecord);
+            profilerRecord = nextScriptProfilerRecord();
+        }
+
+        // Skipping the remaining ScriptProfiler events to match the current UI for handling Timeline records.
+        // However, the remaining ScriptProfiler records are valid and could be shown.
+        // FIXME: <https://webkit.org/b/152904> Web Inspector: Timeline UI should keep up with processing all incoming records
+    }
+};
+
+WebInspector.TimelineManager.Event = {
+    RecordingCreated: "timeline-manager-recording-created",
+    RecordingLoaded: "timeline-manager-recording-loaded",
+    CapturingStarted: "timeline-manager-capturing-started",
+    CapturingStopped: "timeline-manager-capturing-stopped"
+};
+
+WebInspector.TimelineManager.MaximumAutoRecordDuration = 90000; // 90 seconds
+WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent = 10000; // 10 seconds
+WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly = 2000; // 2 seconds
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/TypeTokenAnnotator.js b/Source/WebInspectorUI/UserInterface/Controllers/TypeTokenAnnotator.js
new file mode 100644
index 000000000..66563ad8a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/TypeTokenAnnotator.js
@@ -0,0 +1,200 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TypeTokenAnnotator = class TypeTokenAnnotator extends WebInspector.Annotator
+{
+    constructor(sourceCodeTextEditor, script)
+    {
+        super(sourceCodeTextEditor);
+
+        this._script = script;
+        this._typeTokenNodes = [];
+        this._typeTokenBookmarks = [];
+    }
+
+    // Protected
+
+    insertAnnotations()
+    {
+        if (!this.isActive())
+            return;
+
+        var scriptSyntaxTree = this._script.scriptSyntaxTree;
+
+        if (!scriptSyntaxTree) {
+            this._script.requestScriptSyntaxTree(function(syntaxTree) {
+                // After requesting the tree, we still might get a null tree from a parse error.
+                if (syntaxTree)
+                    this.insertAnnotations();
+            }.bind(this));
+
+            return;
+        }
+
+        if (!scriptSyntaxTree.parsedSuccessfully)
+            return;
+
+        var {startOffset, endOffset} = this.sourceCodeTextEditor.visibleRangeOffsets();
+
+        var startTime = Date.now();
+        var allNodesInRange = scriptSyntaxTree.filterByRange(startOffset, endOffset);
+        scriptSyntaxTree.updateTypes(allNodesInRange, function afterTypeUpdates(nodesWithUpdatedTypes) {
+            // Because this is an asynchronous call, we could have been deactivated before the callback function is called.
+            if (!this.isActive())
+                return;
+
+            nodesWithUpdatedTypes.forEach(this._insertTypeToken, this);
+
+            var totalTime = Date.now() - startTime;
+            var timeoutTime = Number.constrain(8 * totalTime, 500, 2000);
+            this._timeoutIdentifier = setTimeout(function timeoutUpdate() {
+                this._timeoutIdentifier = null;
+                this.insertAnnotations();
+            }.bind(this), timeoutTime);
+        }.bind(this));
+    }
+
+    clearAnnotations()
+    {
+        this._clearTypeTokens();
+    }
+
+    // Private
+
+    _insertTypeToken(node)
+    {
+        if (node.type === WebInspector.ScriptSyntaxTree.NodeType.Identifier) {
+            if (!node.attachments.__typeToken && node.attachments.types && node.attachments.types.valid)
+                this._insertToken(node.range[0], node, false, WebInspector.TypeTokenView.TitleType.Variable, node.name);
+
+            if (node.attachments.__typeToken)
+                node.attachments.__typeToken.update(node.attachments.types);
+
+            return;
+        }
+
+        console.assert(node.type === WebInspector.ScriptSyntaxTree.NodeType.FunctionDeclaration || node.type === WebInspector.ScriptSyntaxTree.NodeType.FunctionExpression || node.type === WebInspector.ScriptSyntaxTree.NodeType.ArrowFunctionExpression);
+
+        var functionReturnType = node.attachments.returnTypes;
+        if (!functionReturnType || !functionReturnType.valid)
+            return;
+
+        // If a function does not have an explicit return statement with an argument (i.e, "return x;" instead of "return;") 
+        // then don't show a return type unless we think it's a constructor.
+        var scriptSyntaxTree = this._script._scriptSyntaxTree;
+        if (!node.attachments.__typeToken && (scriptSyntaxTree.containsNonEmptyReturnStatement(node.body) || !functionReturnType.typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Undefined))) {
+            var functionName = node.id ? node.id.name : null;
+            this._insertToken(node.typeProfilingReturnDivot, node, true, WebInspector.TypeTokenView.TitleType.ReturnStatement, functionName);
+        }
+
+        if (node.attachments.__typeToken)
+            node.attachments.__typeToken.update(node.attachments.returnTypes);
+    }
+
+    _insertToken(originalOffset, node, shouldTranslateOffsetToAfterParameterList, typeTokenTitleType, functionOrVariableName)
+    {
+        var tokenPosition = this.sourceCodeTextEditor.originalOffsetToCurrentPosition(originalOffset);
+        var currentOffset = this.sourceCodeTextEditor.currentPositionToCurrentOffset(tokenPosition);
+        var sourceString = this.sourceCodeTextEditor.string;
+
+        if (shouldTranslateOffsetToAfterParameterList) {
+            // Translate the position to the closing parenthesis of the function arguments:
+            // translate from: [type-token] function foo() {} => to: function foo() [type-token] {}
+            currentOffset = this._translateToOffsetAfterFunctionParameterList(node, currentOffset, sourceString);
+            tokenPosition = this.sourceCodeTextEditor.currentOffsetToCurrentPosition(currentOffset);
+        }
+
+        // Note: bookmarks render to the left of the character they're being displayed next to.
+        // This is why right margin checks the current offset. And this is okay to do because JavaScript can't be written right-to-left.
+        var isSpaceRegexp = /\s/;
+        var shouldHaveLeftMargin = currentOffset !== 0 && !isSpaceRegexp.test(sourceString[currentOffset - 1]);
+        var shouldHaveRightMargin = !isSpaceRegexp.test(sourceString[currentOffset]);
+        var typeToken = new WebInspector.TypeTokenView(this, shouldHaveRightMargin, shouldHaveLeftMargin, typeTokenTitleType, functionOrVariableName);
+        var bookmark = this.sourceCodeTextEditor.setInlineWidget(tokenPosition, typeToken.element);
+        node.attachments.__typeToken = typeToken;
+        this._typeTokenNodes.push(node);
+        this._typeTokenBookmarks.push(bookmark);
+    }
+
+    _translateToOffsetAfterFunctionParameterList(node, offset, sourceString)
+    {
+        // The assumption here is that we get the offset starting at the function keyword (or after the get/set keywords).
+        // We will return the offset for the closing parenthesis in the function declaration.
+        // All this code is just a way to find this parenthesis while ignoring comments.
+
+        var isMultiLineComment = false;
+        var isSingleLineComment = false;
+        var shouldIgnore = false;
+        const isArrowFunction = node.type === WebInspector.ScriptSyntaxTree.NodeType.ArrowFunctionExpression;
+
+        function isLineTerminator(char)
+        {
+            // Reference EcmaScript 5 grammar for single line comments and line terminators:
+            // http://www.ecma-international.org/ecma-262/5.1/#sec-7.3
+            // http://www.ecma-international.org/ecma-262/5.1/#sec-7.4
+            return char === "\n" || char === "\r" || char === "\u2028" || char === "\u2029";
+        }
+
+        while (((!isArrowFunction && sourceString[offset] !== ")")
+                || (isArrowFunction && sourceString[offset] !== ">")
+                || shouldIgnore)
+               && offset < sourceString.length) {
+            if (isSingleLineComment && isLineTerminator(sourceString[offset])) {
+                isSingleLineComment = false;
+                shouldIgnore = false;
+            } else if (isMultiLineComment && sourceString[offset] === "*" && sourceString[offset + 1] === "/") {
+                isMultiLineComment = false;
+                shouldIgnore = false;
+                offset++;
+            } else if (!shouldIgnore && sourceString[offset] === "/") {
+                offset++;
+                if (sourceString[offset] === "*")
+                    isMultiLineComment = true;
+                else if (sourceString[offset] === "/")
+                    isSingleLineComment = true;
+                else
+                    throw new Error("Bad parsing. Couldn't parse comment preamble.");
+                shouldIgnore = true;
+            }
+
+            offset++;
+        }
+
+        return offset + 1;
+    }
+
+    _clearTypeTokens()
+    {
+        this._typeTokenNodes.forEach(function(node) {
+            node.attachments.__typeToken = null;
+        });
+        this._typeTokenBookmarks.forEach(function(bookmark) {
+            bookmark.clear();
+        });
+
+        this._typeTokenNodes = [];
+        this._typeTokenBookmarks = [];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/VisualStyleCompletionsController.js b/Source/WebInspectorUI/UserInterface/Controllers/VisualStyleCompletionsController.js
new file mode 100644
index 000000000..ca999a9b6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Controllers/VisualStyleCompletionsController.js
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleCompletionsController = class VisualStyleCompletionsController extends WebInspector.Object
+{
+    constructor(delegate)
+    {
+        super();
+
+        this._delegate = delegate || null;
+        this._suggestionsView = new WebInspector.CompletionSuggestionsView(this);
+        this._completions = null;
+        this._currentCompletions = [];
+        this._selectedCompletionIndex = 0;
+    }
+
+    // Public
+
+    get visible()
+    {
+        return this._completions && this._currentCompletions.length && this._suggestionsView.visible;
+    }
+
+    get hasCompletions()
+    {
+        return !!this._completions;
+    }
+
+    get currentCompletion()
+    {
+        if (!this.hasCompletions)
+            return;
+
+        return this._currentCompletions[this._selectedCompletionIndex] || null;
+    }
+
+    set completions(completions)
+    {
+        this._completions = completions || null;
+    }
+
+    completionSuggestionsViewCustomizeCompletionElement(suggestionsView, element, item)
+    {
+        if (this._delegate && typeof this._delegate.visualStyleCompletionsControllerCustomizeCompletionElement === "function")
+            this._delegate.visualStyleCompletionsControllerCustomizeCompletionElement(suggestionsView, element, item);
+    }
+
+    completionSuggestionsClickedCompletion(suggestionsView, text)
+    {
+        suggestionsView.hide();
+        this.dispatchEventToListeners(WebInspector.VisualStyleCompletionsController.Event.CompletionSelected, {text});
+    }
+
+    previous()
+    {
+        this._suggestionsView.selectPrevious();
+        this._selectedCompletionIndex = this._suggestionsView.selectedIndex;
+    }
+
+    next()
+    {
+        this._suggestionsView.selectNext();
+        this._selectedCompletionIndex = this._suggestionsView.selectedIndex;
+    }
+
+    update(value)
+    {
+        if (!this.hasCompletions)
+            return false;
+
+        this._currentCompletions = this._completions.startsWith(value);
+
+        var currentCompletionsLength = this._currentCompletions.length;
+        if (currentCompletionsLength) {
+            if (currentCompletionsLength === 1 && this._currentCompletions[0] === value) {
+                this.hide();
+                return false;
+            }
+
+            if (this._selectedCompletionIndex >= currentCompletionsLength)
+                this._selectedCompletionIndex = 0;
+
+            this._suggestionsView.update(this._currentCompletions, this._selectedCompletionIndex);
+            return true;
+        }
+
+        this.hide();
+        return false;
+    }
+
+    show(bounds, padding)
+    {
+        if (!bounds)
+            return;
+
+        this._suggestionsView.show(bounds.pad(padding || 0));
+    }
+
+    hide()
+    {
+        if (this._suggestionsView.isHandlingClickEvent())
+            return;
+
+        this._suggestionsView.hide();
+    }
+};
+
+WebInspector.VisualStyleCompletionsController.Event = {
+    CompletionSelected: "visual-style-completions-controller-completion-selected"
+}
diff --git a/Source/WebInspectorUI/UserInterface/CookieIcon.css b/Source/WebInspectorUI/UserInterface/CookieIcon.css
deleted file mode 100644
index 95f3e6365..000000000
--- a/Source/WebInspectorUI/UserInterface/CookieIcon.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.cookie-icon .icon {
-    content: -webkit-image-set(url(Images/Cookie.png) 1x, url(Images/Cookie@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageContentView.css b/Source/WebInspectorUI/UserInterface/CookieStorageContentView.css
deleted file mode 100644
index 8eb7df1c9..000000000
--- a/Source/WebInspectorUI/UserInterface/CookieStorageContentView.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.cookie-storage > .data-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageContentView.js b/Source/WebInspectorUI/UserInterface/CookieStorageContentView.js
deleted file mode 100644
index 87bee9f1f..000000000
--- a/Source/WebInspectorUI/UserInterface/CookieStorageContentView.js
+++ /dev/null
@@ -1,256 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CookieStorageContentView = function(representedObject)
-{
-    WebInspector.ContentView.call(this, representedObject);
-
-    this.element.classList.add(WebInspector.CookieStorageContentView.StyleClassName);
-
-    this.update();
-};
-
-WebInspector.CookieStorageContentView.StyleClassName = "cookie-storage";
-
-WebInspector.CookieStorageContentView.prototype = {
-    constructor: WebInspector.CookieStorageContentView,
-
-    // Public
-
-    update: function()
-    {
-        function callback(error, cookies, cookiesString)
-        {
-            if (error)
-                return;
-
-            this._cookies = this._filterCookies(cookies);
-            this._rebuildTable();
-        }
-    
-        PageAgent.getCookies(callback.bind(this));
-    },
-
-    updateLayout: function()
-    {
-        if (this._dataGrid)
-            this._dataGrid.updateLayout();
-    },
-
-    get scrollableElements()
-    {
-        if (!this._dataGrid)
-            return [];
-        return [this._dataGrid.scrollContainer];
-    },
-
-    // Private
-
-    _rebuildTable: function()
-    {
-        // FIXME: If there are no cookies, do we want to show an empty datagrid, or do something like the old
-        // inspector and show some text saying there are no cookies?
-        if (!this._dataGrid) {
-            var columns = { 0: {}, 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} };
-            columns[0].title = WebInspector.UIString("Name");
-            columns[0].sortable = true;
-            columns[0].width = "24%";
-            columns[1].title = WebInspector.UIString("Value");
-            columns[1].sortable = true;
-            columns[1].width = "34%";
-            columns[2].title = WebInspector.UIString("Domain");
-            columns[2].sortable = true;
-            columns[2].width = "7%";
-            columns[3].title = WebInspector.UIString("Path");
-            columns[3].sortable = true;
-            columns[3].width = "7%";
-            columns[4].title = WebInspector.UIString("Expires");
-            columns[4].sortable = true;
-            columns[4].width = "7%";
-            columns[5].title = WebInspector.UIString("Size");
-            columns[5].aligned = "right";
-            columns[5].sortable = true;
-            columns[5].width = "7%";
-            columns[6].title = WebInspector.UIString("HTTP");
-            columns[6].aligned = "centered";
-            columns[6].sortable = true;
-            columns[6].width = "7%";
-            columns[7].title = WebInspector.UIString("Secure");
-            columns[7].aligned = "centered";
-            columns[7].sortable = true;
-            columns[7].width = "7%";
-
-            this._dataGrid = new WebInspector.DataGrid(columns, null, this._deleteCallback.bind(this));
-            this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._rebuildTable, this);
-
-            this.element.appendChild(this._dataGrid.element);
-            this._dataGrid.updateLayout();
-        }
-        
-        console.assert(this._dataGrid);
-        this._dataGrid.removeChildren();
-
-        this._sortCookies(this._cookies);
-
-        for (var i = 0; i < this._cookies.length; ++i) {
-            const cookie = this._cookies[i];
-
-            var data = {};
-            data[0] = cookie.name;
-            data[1] = cookie.value;
-            data[2] = cookie.domain || "";
-            data[3] = cookie.path || "";
-
-            if (cookie.type === WebInspector.CookieType.Request)
-                data[4] = "";
-            else
-                data[4] = cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toLocaleString();
-
-            data[5] = Number.bytesToString(cookie.size);
-            const checkmark = "\u2713";
-            data[6] = cookie.httpOnly ? checkmark : "";
-            data[7] = cookie.secure ? checkmark : "";
-
-            var node = new WebInspector.DataGridNode(data);
-            node.cookie = cookie;
-            node.selectable = true;
-            
-            this._dataGrid.appendChild(node);
-        }
-    },
-
-    _filterCookies: function(cookies)
-    {
-        var filteredCookies = [];
-        var resourcesForDomain = [];
-
-        var frames = WebInspector.frameResourceManager.frames;
-        for (var i = 0; i < frames.length; ++i) {
-            var resources = frames[i].resources;
-            for (var j = 0; j < resources.length; ++j) {
-                var urlComponents = resources[j].urlComponents;
-                if (urlComponents && urlComponents.host && urlComponents.host === this.representedObject.host)
-                    resourcesForDomain.push(resources[j].url);
-            }
-
-            // The main resource isn't always in the list of resources, make sure to add it to the list of resources
-            // we get the URLs from.
-            var mainResourceURLComponents = frames[i].mainResource.urlComponents;
-            if (mainResourceURLComponents && mainResourceURLComponents.host && mainResourceURLComponents.host == this.representedObject.host)
-                resourcesForDomain.push(frames[i].mainResource.url);
-        }
-
-        for (var i = 0; i < cookies.length; ++i) {
-            for (var j = 0; j < resourcesForDomain.length; ++j) {
-                if (WebInspector.cookieMatchesResourceURL(cookies[i], resourcesForDomain[j])) {
-                    filteredCookies.push(cookies[i]);
-                    break;
-                }
-            }
-        }
-        
-        return filteredCookies;
-    },
-    
-    _sortCookies: function(cookies)
-    {
-        var sortDirection = this._dataGrid.sortOrder === "ascending" ? 1 : -1;
-
-        function localeCompare(field, cookie1, cookie2)
-        {
-            return sortDirection * (cookie1[field] + "").localeCompare(cookie2[field] + "")
-        }
-
-        function numberCompare(field, cookie1, cookie2)
-        {
-            return sortDirection * (cookie1[field] - cookie2[field]);
-        }
-
-        function expiresCompare(cookie1, cookie2)
-        {
-            if (cookie1.session !== cookie2.session)
-                return sortDirection * (cookie1.session ? 1 : -1);
-
-            if (cookie1.session)
-                return 0;
-
-            return sortDirection * (cookie1.expires - cookie2.expires);
-        }
-
-        var comparator;
-        switch (parseInt(this._dataGrid.sortColumnIdentifier, 10)) {
-            case 0: comparator = localeCompare.bind(this, "name"); break;
-            case 1: comparator = localeCompare.bind(this, "value"); break;
-            case 2: comparator = localeCompare.bind(this, "domain"); break;
-            case 3: comparator = localeCompare.bind(this, "path"); break;
-            case 4: comparator = expiresCompare; break;
-            case 5: comparator = numberCompare.bind(this, "size"); break;
-            case 6: comparator = localeCompare.bind(this, "httpOnly"); break;
-            case 7: comparator = localeCompare.bind(this, "secure"); break;
-            default: localeCompare.bind(this, "name");
-        }
-
-        cookies.sort(comparator);
-    },
-
-    _deleteCallback: function(node)
-    {
-        if (!node || !node.cookie)
-            return;
-
-        var cookie = node.cookie;
-        var cookieURL = (cookie.secure ? "https://" : "http://") + cookie.domain + cookie.path;
-
-        // COMPATIBILITY (iOS 6): PageAgent.deleteCookie used to take 'domain', now takes 'url'. Send both.
-        PageAgent.deleteCookie.invoke({cookieName: cookie.name, domain: cookie.domain, url: cookieURL});
-
-        this.update();
-    }
-};
-
-WebInspector.CookieStorageContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
-
-WebInspector.cookieMatchesResourceURL = function(cookie, resourceURL)
-{
-    var parsedURL = parseURL(resourceURL);
-    if (!parsedURL || !WebInspector.cookieDomainMatchesResourceDomain(cookie.domain, parsedURL.host))
-        return false;
-
-    return (parsedURL.path.startsWith(cookie.path)
-        && (!cookie.port || parsedURL.port == cookie.port)
-        && (!cookie.secure || parsedURL.scheme === "https"));
-}
-
-WebInspector.cookieDomainMatchesResourceDomain = function(cookieDomain, resourceDomain)
-{
-    if (cookieDomain.charAt(0) !== '.')
-        return resourceDomain === cookieDomain;
-    return !!resourceDomain.match(new RegExp("^([^\\.]+\\.)?" + cookieDomain.substring(1).escapeForRegExp() + "$"), "i");
-}
-
-WebInspector.CookieType = {
-    Request: 0,
-    Response: 1
-};
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageObject.js b/Source/WebInspectorUI/UserInterface/CookieStorageObject.js
deleted file mode 100644
index 11a3a3c12..000000000
--- a/Source/WebInspectorUI/UserInterface/CookieStorageObject.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CookieStorageObject = function(host)
-{
-    this._host = host;
-};
-
-WebInspector.CookieStorageObject.prototype = {
-    constructor: WebInspector.CookieStorageObject,
-
-    get host()
-    {
-        return this._host;
-    },
-    
-    // FIXME: This class will need to look up cookies that are set for this host.
-};
diff --git a/Source/WebInspectorUI/UserInterface/CookieStorageTreeElement.js b/Source/WebInspectorUI/UserInterface/CookieStorageTreeElement.js
deleted file mode 100644
index 15c9937b8..000000000
--- a/Source/WebInspectorUI/UserInterface/CookieStorageTreeElement.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.CookieStorageTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.CookieStorageObject);
-    
-    WebInspector.StorageTreeElement.call(this, WebInspector.CookieStorageTreeElement.CookieIconStyleClassName, WebInspector.displayNameForHost(representedObject.host), representedObject);
-};
-
-WebInspector.CookieStorageTreeElement.CookieIconStyleClassName = "cookie-icon";
-
-WebInspector.CookieStorageTreeElement.prototype = {
-    constructor: WebInspector.CookieStorageTreeElement,
-    
-    // Public
-    
-    get name()
-    {
-        return this.representedObject.host;
-    },
-    
-    get categoryName()
-    {
-        return WebInspector.UIString("Cookies");
-    }
-};
-
-WebInspector.CookieStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DOMDetailsSidebarPanel.js
deleted file mode 100644
index 66d1d4110..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMDetailsSidebarPanel.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMDetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
-    WebInspector.DetailsSidebarPanel.call(this, identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element);
-
-    this.element.addEventListener("click", this._mouseWasClicked.bind(this), true);
-
-    this._domNode = null;
-};
-
-WebInspector.DOMDetailsSidebarPanel.prototype = {
-    constructor: WebInspector.DOMDetailsSidebarPanel,
-
-    // Public
-
-    inspect: function(objects)
-    {
-        // Convert to a single item array if needed.
-        if (!(objects instanceof Array))
-            objects = [objects];
-
-        var nodeToInspect = null;
-
-        // Iterate over the objects to find a WebInspector.DOMNode to inspect.
-        for (var i = 0; i < objects.length; ++i) {
-            if (objects[i] instanceof WebInspector.DOMNode) {
-                nodeToInspect = objects[i];
-                break;
-            }
-        }
-
-        if (nodeToInspect && !this.supportsDOMNode(nodeToInspect))
-            nodeToInspect = null;
-
-        this.domNode = nodeToInspect;
-
-        return !!this._domNode;
-    },
-
-    get domNode()
-    {
-        return this._domNode;
-    },
-
-    set domNode(domNode)
-    {
-        if (domNode === this._domNode)
-            return;
-
-        if (this._domNode)
-            this.removeEventListeners();
-
-        this._domNode = domNode;
-
-        if (this._domNode)
-            this.addEventListeners();
-
-        this.needsRefresh();
-    },
-
-    supportsDOMNode: function(nodeToInspect)
-    {
-        // Implemented by subclasses.
-        return true;
-    },
-
-    addEventListeners: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    removeEventListeners: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    // Private
-
-    _mouseWasClicked: function(event)
-    {
-        if (this._domNode && this._domNode.ownerDocument) {
-            var mainResource = WebInspector.frameResourceManager.resourceForURL(this._domNode.ownerDocument.documentURL);
-            if (mainResource)
-                var parentFrame = mainResource.parentFrame;
-        }
-
-        WebInspector.handlePossibleLinkClick(event, parentFrame);
-    }
-};
-
-WebInspector.DOMDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMNode.js b/Source/WebInspectorUI/UserInterface/DOMNode.js
deleted file mode 100644
index ee002783c..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMNode.js
+++ /dev/null
@@ -1,690 +0,0 @@
-/*
- * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @param {WebInspector.DOMAgent} domAgent
- * @param {?WebInspector.DOMNode} doc
- * @param {boolean} isInShadowTree
- * @param {DOMAgent.Node} payload
- */
-WebInspector.DOMNode = function(domAgent, doc, isInShadowTree, payload) {
-    WebInspector.Object.call(this);
-
-    this._domAgent = domAgent;
-    this._isInShadowTree = isInShadowTree;
-
-    this.id = payload.nodeId;
-    domAgent._idToDOMNode[this.id] = this;
-
-    this._nodeType = payload.nodeType;
-    this._nodeName = payload.nodeName;
-    this._localName = payload.localName;
-    this._nodeValue = payload.nodeValue;
-
-    if (this._nodeType === Node.DOCUMENT_NODE)
-        this.ownerDocument = this;
-    else
-        this.ownerDocument = doc;
-
-    this._attributes = [];
-    this._attributesMap = {};
-    if (payload.attributes)
-        this._setAttributesPayload(payload.attributes);
-
-    this._childNodeCount = payload.childNodeCount;
-    this._children = null;
-    this._filteredChildren = null;
-    this._filteredChildrenNeedsUpdating = true;
-
-    this._nextSibling = null;
-    this._previousSibling = null;
-    this.parentNode = null;
-
-    this._enabledPseudoClasses = [];
-
-    this._shadowRoots = [];
-    if (payload.shadowRoots) {
-        for (var i = 0; i < payload.shadowRoots.length; ++i) {
-            var root = payload.shadowRoots[i];
-            var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, true, root);
-            this._shadowRoots.push(node);
-        }
-    }
-
-    if (payload.children)
-        this._setChildrenPayload(payload.children);
-
-    if (payload.contentDocument) {
-        this._contentDocument = new WebInspector.DOMNode(domAgent, null, false, payload.contentDocument);
-        this._children = [this._contentDocument];
-        this._renumber();
-    }
-
-    if (this._nodeType === Node.ELEMENT_NODE) {
-        // HTML and BODY from internal iframes should not overwrite top-level ones.
-        if (this.ownerDocument && !this.ownerDocument.documentElement && this._nodeName === "HTML")
-            this.ownerDocument.documentElement = this;
-        if (this.ownerDocument && !this.ownerDocument.body && this._nodeName === "BODY")
-            this.ownerDocument.body = this;
-        if (payload.documentURL)
-            this.documentURL = payload.documentURL;
-    } else if (this._nodeType === Node.DOCUMENT_TYPE_NODE) {
-        this.publicId = payload.publicId;
-        this.systemId = payload.systemId;
-        this.internalSubset = payload.internalSubset;
-    } else if (this._nodeType === Node.DOCUMENT_NODE) {
-        this.documentURL = payload.documentURL;
-        this.xmlVersion = payload.xmlVersion;
-    } else if (this._nodeType === Node.ATTRIBUTE_NODE) {
-        this.name = payload.name;
-        this.value = payload.value;
-    }
-}
-
-WebInspector.Object.addConstructorFunctions(WebInspector.DOMNode);
-
-WebInspector.DOMNode.Event = {
-    EnabledPseudoClassesChanged: "dom-node-enabled-pseudo-classes-did-change",
-    AttributeModified: "dom-node-attribute-modified",
-    AttributeRemoved: "dom-node-attribute-removed"
-};
-
-WebInspector.DOMNode.prototype = {
-    constructor: WebInspector.DOMNode,
-
-    get children()
-    {
-        if (!this._children)
-            return null;
-
-        if (WebInspector.showShadowDOMSetting.value)
-            return this._children;
-
-        if (this._filteredChildrenNeedsUpdating) {
-            this._filteredChildrenNeedsUpdating = false;
-            this._filteredChildren = this._children.filter(function(node) {
-                return !node._isInShadowTree;
-            });
-        }
-
-        return this._filteredChildren;
-    },
-
-    get firstChild()
-    {
-        var children = this.children;
-
-        if (children && children.length > 0)
-            return children[0];
-
-        return null;
-    },
-
-    get lastChild()
-    {
-        var children = this.children;
-
-        if (children && children.length > 0)
-            return children.lastValue;
-
-        return null;
-    },
-
-    get nextSibling()
-    {
-        if (WebInspector.showShadowDOMSetting.value)
-            return this._nextSibling;
-
-        var node = this._nextSibling;
-        while (node) {
-            if (!node._isInShadowTree)
-                return node;
-            node = node._nextSibling;
-        }
-        return null;
-    },
-
-    get previousSibling()
-    {
-        if (WebInspector.showShadowDOMSetting.value)
-            return this._previousSibling;
-
-        var node = this._previousSibling;
-        while (node) {
-            if (!node._isInShadowTree)
-                return node;
-            node = node._previousSibling;
-        }
-        return null;
-    },
-
-    get childNodeCount()
-    {
-        var children = this.children;
-        if (children)
-            return children.length;
-
-        if (WebInspector.showShadowDOMSetting.value)
-            return this._childNodeCount + this._shadowRoots.length;
-
-        return this._childNodeCount;
-    },
-
-    set childNodeCount(count)
-    {
-        this._childNodeCount = count;
-    },
-    
-    /**
-     * @return {boolean}
-     */
-    hasAttributes: function()
-    {
-        return this._attributes.length > 0;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    hasChildNodes: function()
-    {
-        return this.childNodeCount > 0;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    hasShadowRoots: function()
-    {
-        return !!this._shadowRoots.length;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    isInShadowTree: function()
-    {
-        return this._isInShadowTree;
-    },
-
-    /**
-     * @return {number}
-     */
-    nodeType: function()
-    {
-        return this._nodeType;
-    },
-
-    /**
-     * @return {string}
-     */
-    nodeName: function()
-    {
-        return this._nodeName;
-    },
-
-    /**
-     * @return {string}
-     */
-    nodeNameInCorrectCase: function()
-    {
-        return this.isXMLNode() ? this.nodeName() : this.nodeName().toLowerCase();
-    },
-
-    /**
-     * @param {string} name
-     * @param {function()=} callback
-     */
-    setNodeName: function(name, callback)
-    {
-        DOMAgent.setNodeName(this.id, name, this._makeUndoableCallback(callback));
-    },
-
-    /**
-     * @return {string}
-     */
-    localName: function()
-    {
-        return this._localName;
-    },
-
-    /**
-     * @return {string}
-     */
-    nodeValue: function()
-    {
-        return this._nodeValue;
-    },
-
-    /**
-     * @param {string} value
-     * @param {function(?Protocol.Error)=} callback
-     */
-    setNodeValue: function(value, callback)
-    {
-        DOMAgent.setNodeValue(this.id, value, this._makeUndoableCallback(callback));
-    },
-
-    /**
-     * @param {string} name
-     * @return {string}
-     */
-    getAttribute: function(name)
-    {
-        var attr = this._attributesMap[name];
-        return attr ? attr.value : undefined;
-    },
-
-    /**
-     * @param {string} name
-     * @param {string} text
-     * @param {function()=} callback
-     */
-    setAttribute: function(name, text, callback)
-    {
-        DOMAgent.setAttributesAsText(this.id, text, name, this._makeUndoableCallback(callback));
-    },
-
-    /**
-     * @param {string} name
-     * @param {string} value
-     * @param {function()=} callback
-     */
-    setAttributeValue: function(name, value, callback)
-    {
-        DOMAgent.setAttributeValue(this.id, name, value, this._makeUndoableCallback(callback));
-    },
-
-    /**
-     * @return {Object}
-     */
-    attributes: function()
-    {
-        return this._attributes;
-    },
-
-    /**
-     * @param {string} name
-     * @param {function()=} callback
-     */
-    removeAttribute: function(name, callback)
-    {
-        function mycallback(error, success)
-        {
-            if (!error) {
-                delete this._attributesMap[name];
-                for (var i = 0;  i < this._attributes.length; ++i) {
-                    if (this._attributes[i].name === name) {
-                        this._attributes.splice(i, 1);
-                        break;
-                    }
-                }
-            }
-
-            this._makeUndoableCallback(callback)(error);
-        }
-        DOMAgent.removeAttribute(this.id, name, mycallback.bind(this));
-    },
-
-    /**
-     * @param {function(Array.<WebInspector.DOMNode>)=} callback
-     */
-    getChildNodes: function(callback)
-    {
-        if (this.children) {
-            if (callback)
-                callback(this.children);
-            return;
-        }
-
-        /**
-         * @this {WebInspector.DOMNode}
-         * @param {?Protocol.Error} error
-         */
-        function mycallback(error) {
-            if (!error && callback)
-                callback(this.children);
-        }
-
-        DOMAgent.requestChildNodes(this.id, mycallback.bind(this));
-    },
-
-     /**
-      * @param {number} depth
-      * @param {function(Array.<WebInspector.DOMNode>)=} callback
-      */
-    getSubtree: function(depth, callback)
-    {
-        /**
-         * @this {WebInspector.DOMNode}
-         * @param {?Protocol.Error} error
-         */
-        function mycallback(error)
-        {
-            if (callback)
-                callback(error ? null : this.children);                
-        }
-
-        DOMAgent.requestChildNodes(this.id, depth, mycallback.bind(this));
-    },
-
-    /**
-     * @param {function(?Protocol.Error)=} callback
-     */
-    getOuterHTML: function(callback)
-    {
-        DOMAgent.getOuterHTML(this.id, callback);
-    },
-
-    /**
-     * @param {string} html
-     * @param {function(?Protocol.Error)=} callback
-     */
-    setOuterHTML: function(html, callback)
-    {
-        DOMAgent.setOuterHTML(this.id, html, this._makeUndoableCallback(callback));
-    },
-
-    /**
-     * @param {function(?Protocol.Error)=} callback
-     */
-    removeNode: function(callback)
-    {
-        DOMAgent.removeNode(this.id, this._makeUndoableCallback(callback));
-    },
-
-    copyNode: function()
-    {
-        function copy(error, text)
-        {
-            if (!error)
-                InspectorFrontendHost.copyText(text);
-        }
-        DOMAgent.getOuterHTML(this.id, copy);
-    },
-
-    /**
-     * @param {function(?Protocol.Error)=} callback
-     */
-    eventListeners: function(callback)
-    {
-        DOMAgent.getEventListenersForNode(this.id, callback);
-    },
-
-    /**
-     * @return {string}
-     */
-    path: function()
-    {
-        var path = [];
-        var node = this;
-        while (node && "index" in node && node._nodeName.length) {
-            path.push([node.index, node._nodeName]);
-            node = node.parentNode;
-        }
-        path.reverse();
-        return path.join(",");
-    },
-
-    /**
-     * @param {boolean} justSelector
-     * @return {string}
-     */
-    appropriateSelectorFor: function(justSelector)
-    {
-        var lowerCaseName = this.localName() || this.nodeName().toLowerCase();
-
-        var id = this.getAttribute("id");
-        if (id) {
-            if (/[\s'"]/.test(id)) {
-                id = id.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
-                selector = lowerCaseName + "[id=\"" + id + "\"]";
-            } else
-                selector = "#" + id;
-            return (justSelector ? selector : lowerCaseName + selector);
-        }
-
-        var className = this.getAttribute("class");
-        if (className) {
-            var selector = "." + className.trim().replace(/\s+/, ".");
-            return (justSelector ? selector : lowerCaseName + selector);
-        }
-
-        if (lowerCaseName === "input" && this.getAttribute("type"))
-            return lowerCaseName + "[type=\"" + this.getAttribute("type") + "\"]";
-
-        return lowerCaseName;
-    },
-
-    /**
-     * @param {WebInspector.DOMNode} node
-     * @return {boolean}
-     */
-    isAncestor: function(node)
-    {
-        if (!node)
-            return false;
-
-        var currentNode = node.parentNode;
-        while (currentNode) {
-            if (this === currentNode)
-                return true;
-            currentNode = currentNode.parentNode;
-        }
-        return false;
-    },
-
-    /**
-     * @param {WebInspector.DOMNode} descendant
-     * @return {boolean}
-     */
-    isDescendant: function(descendant)
-    {
-        return descendant !== null && descendant.isAncestor(this);
-    },
-
-    /**
-     * @param {Array.<string>} attrs
-     */
-    _setAttributesPayload: function(attrs)
-    {
-        this._attributes = [];
-        this._attributesMap = {};
-        for (var i = 0; i < attrs.length; i += 2)
-            this._addAttribute(attrs[i], attrs[i + 1]);
-    },
-
-    /**
-     * @param {WebInspector.DOMNode} prev
-     * @param {DOMAgent.Node} payload
-     * @return {WebInspector.DOMNode}
-     */
-    _insertChild: function(prev, payload)
-    {
-        var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, this._isInShadowTree, payload);
-        if (!prev) {
-            if (!this._children) {
-                // First node
-                this._children = this._shadowRoots.concat([node]);
-            } else
-                this._children.unshift(node);
-        } else
-            this._children.splice(this._children.indexOf(prev) + 1, 0, node);
-        this._renumber();
-        return node;
-    },
-
-    /**
-     * @param {WebInspector.DOMNode} node
-     */
-    _removeChild: function(node)
-    {
-        this._children.splice(this._children.indexOf(node), 1);
-        node.parentNode = null;
-        this._renumber();
-    },
-
-    /**
-     * @param {Array.<DOMAgent.Node>} payloads
-     */
-    _setChildrenPayload: function(payloads)
-    {
-        // We set children in the constructor.
-        if (this._contentDocument)
-            return;
-
-        this._children = this._shadowRoots.slice();
-        for (var i = 0; i < payloads.length; ++i) {
-            var payload = payloads[i];
-            var node = new WebInspector.DOMNode(this._domAgent, this.ownerDocument, this._isInShadowTree, payload);
-            this._children.push(node);
-        }
-        this._renumber();
-    },
-
-    _renumber: function()
-    {
-        this._filteredChildrenNeedsUpdating = true;
-
-        var childNodeCount = this._children.length;
-        if (childNodeCount === 0)
-            return;
-
-        for (var i = 0; i < childNodeCount; ++i) {
-            var child = this._children[i];
-            child.index = i;
-            child._nextSibling = i + 1 < childNodeCount ? this._children[i + 1] : null;
-            child._previousSibling = i - 1 >= 0 ? this._children[i - 1] : null;
-            child.parentNode = this;
-        }
-    },
-
-    /**
-     * @param {string} name
-     * @param {string} value
-     */
-    _addAttribute: function(name, value)
-    {
-        var attr = {
-            name: name,
-            value: value,
-            _node: this
-        };
-        this._attributesMap[name] = attr;
-        this._attributes.push(attr);
-    },
-
-    /**
-     * @param {string} name
-     * @param {string} value
-     */
-    _setAttribute: function(name, value)
-    {
-        var attr = this._attributesMap[name];
-        if (attr)
-            attr.value = value;
-        else
-            this._addAttribute(name, value);
-    },
-
-    /**
-     * @param {string} name
-     */
-    _removeAttribute: function(name)
-    {
-        var attr = this._attributesMap[name];
-        if (attr) {
-            this._attributes.remove(attr);
-            delete this._attributesMap[name];
-        }
-    },
-
-    /**
-     * @param {WebInspector.DOMNode} targetNode
-     * @param {?WebInspector.DOMNode} anchorNode
-     * @param {function(?Protocol.Error)=} callback
-     */
-    moveTo: function(targetNode, anchorNode, callback)
-    {
-        DOMAgent.moveTo(this.id, targetNode.id, anchorNode ? anchorNode.id : undefined, this._makeUndoableCallback(callback));
-    },
-
-    /**
-     * @return {boolean}
-     */
-    isXMLNode: function()
-    {
-        return !!this.ownerDocument && !!this.ownerDocument.xmlVersion;
-    },
-
-    get enabledPseudoClasses()
-    {
-        return this._enabledPseudoClasses;
-    },
-    
-    setPseudoClassEnabled: function(pseudoClass, enabled)
-    {
-        var pseudoClasses = this._enabledPseudoClasses;
-        if (enabled) {
-            if (pseudoClasses.contains(pseudoClass))
-                return;
-            pseudoClasses.push(pseudoClass);
-        } else {
-            if (!pseudoClasses.contains(pseudoClass))
-                return;
-            pseudoClasses.remove(pseudoClass);
-        }
-
-        function changed(error)
-        {
-            if (!error)
-                this.dispatchEventToListeners(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged);
-        }
-
-        CSSAgent.forcePseudoState(this.id, pseudoClasses, changed.bind(this));
-    },
-
-    _makeUndoableCallback: function(callback)
-    {
-        return function(error)
-        {
-            if (!error)
-                DOMAgent.markUndoableState();
-
-            if (callback)
-                callback.apply(null, arguments);
-        };
-    }
-}
-
-WebInspector.DOMNode.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMNodeDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DOMNodeDetailsSidebarPanel.js
deleted file mode 100644
index b7a8a970d..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMNodeDetailsSidebarPanel.js
+++ /dev/null
@@ -1,281 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMNodeDetailsSidebarPanel = function() {
-    WebInspector.DOMDetailsSidebarPanel.call(this, "dom-node-details", WebInspector.UIString("Node"), WebInspector.UIString("Node"), "Images/NavigationItemAngleBrackets.pdf", "2");
-
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesChanged, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._attributesChanged, this);
-
-    this.element.classList.add(WebInspector.DOMNodeDetailsSidebarPanel.StyleClassName);
-
-    this._identityNodeTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"));
-    this._identityNodeNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Name"));
-    this._identityNodeValueRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Value"));
-
-    var identityGroup = new WebInspector.DetailsSectionGroup([this._identityNodeTypeRow, this._identityNodeNameRow, this._identityNodeValueRow]);
-    var identitySection = new WebInspector.DetailsSection("dom-node-identity", WebInspector.UIString("Identity"), [identityGroup]);
-
-    this._attributesDataGridRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Attributes"));
-
-    var attributesGroup = new WebInspector.DetailsSectionGroup([this._attributesDataGridRow]);
-    var attributesSection = new WebInspector.DetailsSection("dom-node-attributes", WebInspector.UIString("Attributes"), [attributesGroup]);
-
-    this._propertiesRow = new WebInspector.DetailsSectionRow;
-
-    var propertiesGroup = new WebInspector.DetailsSectionGroup([this._propertiesRow]);
-    var propertiesSection = new WebInspector.DetailsSection("dom-node-properties", WebInspector.UIString("Properties"), [propertiesGroup]);
-
-    this._eventListenersSectionGroup = new WebInspector.DetailsSectionGroup;
-    var eventListenersSection = new WebInspector.DetailsSection("dom-node-event-listeners", WebInspector.UIString("Event Listeners"), [this._eventListenersSectionGroup]);    
-
-    this.element.appendChild(identitySection.element);
-    this.element.appendChild(attributesSection.element);
-    this.element.appendChild(propertiesSection.element);
-    this.element.appendChild(eventListenersSection.element);
-};
-
-WebInspector.DOMNodeDetailsSidebarPanel.StyleClassName = "dom-node";
-WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName = "dom-node-details-sidebar-properties-object-group";
-
-WebInspector.DOMNodeDetailsSidebarPanel.prototype = {
-    constructor: WebInspector.DOMNodeDetailsSidebarPanel,
-
-    // Public
-
-    refresh: function()
-    {
-        var domNode = this.domNode;
-        if (!domNode)
-            return;
-
-        this._identityNodeTypeRow.value = this._nodeTypeDisplayName();
-        this._identityNodeNameRow.value = domNode.nodeNameInCorrectCase();
-        this._identityNodeValueRow.value = domNode.nodeValue();
-
-        this._refreshAttributes();
-        this._refreshProperties();
-        this._refreshEventListeners();
-    },
-
-    // Private
-
-    _refreshAttributes: function()
-    {
-        this._attributesDataGridRow.dataGrid = this._createAttributesDataGrid();
-    },
-
-    _refreshProperties: function()
-    {
-        var domNode = this.domNode;
-        if (!domNode)
-            return;
-
-        RuntimeAgent.releaseObjectGroup(WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName);
-        WebInspector.RemoteObject.resolveNode(domNode, WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName, nodeResolved.bind(this));
-
-        function nodeResolved(object)
-        {
-            if (!object)
-                return;
-
-            // Bail if the DOM node changed while we were waiting for the async response.
-            if (this.domNode !== domNode)
-                return;
-
-            function collectPrototypes()
-            {
-                // This builds an object with numeric properties. This is easier than dealing with arrays
-                // with the way RemoteObject works. Start at 1 since we use parseInt later and parseInt
-                // returns 0 for non-numeric strings make it ambiguous.
-                var prototype = this;
-                var result = [];
-                var counter = 1;
-
-                while (prototype) {
-                    result[counter++] = prototype;
-                    prototype = prototype.__proto__;
-                }
-
-                return result;
-            }
-
-            object.callFunction(collectPrototypes, undefined, nodePrototypesReady.bind(this));
-            object.release();
-        }
-
-        function nodePrototypesReady(object)
-        {
-            if (!object)
-                return;
-
-            // Bail if the DOM node changed while we were waiting for the async response.
-            if (this.domNode !== domNode)
-                return;
-
-            object.getOwnProperties(fillSection.bind(this));
-        }
-
-        function fillSection(prototypes)
-        {
-            if (!prototypes)
-                return;
-
-            // Bail if the DOM node changed while we were waiting for the async response.
-            if (this.domNode !== domNode)
-                return;
-
-            var element = this._propertiesRow.element;
-            element.removeChildren();
-
-            // Get array of prototype user-friendly names.
-            for (var i = 0; i < prototypes.length; ++i) {
-                // The only values we care about are numeric, as assigned in collectPrototypes.
-                if (!parseInt(prototypes[i].name, 10))
-                    continue;
-
-                var prototype = prototypes[i].value;
-                var title = prototype.description;
-                if (title.match(/Prototype$/))
-                    title = title.replace(/Prototype$/, WebInspector.UIString(" (Prototype)"));
-                else if (title === "Object")
-                    title = title + WebInspector.UIString(" (Prototype)");
-
-                var propertiesSection = new WebInspector.ObjectPropertiesSection(prototype);
-
-                var detailsSection = new WebInspector.DetailsSection(prototype.description.hash + "-prototype-properties", title, null, null, true);
-                detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(propertiesSection)];
-
-                element.appendChild(detailsSection.element);
-            }
-        }
-    },
-
-    _refreshEventListeners: function()
-    {
-        var domNode = this.domNode;
-        if (!domNode)
-            return;
-
-        domNode.eventListeners(eventListenersCallback.bind(this));
-
-        function eventListenersCallback(error, eventListeners)
-        {
-            if (error)
-                return;
-
-            // Bail if the DOM node changed while we were waiting for the async response.
-            if (this.domNode !== domNode)
-                return;
-
-            var eventListenerTypes = [];
-            var eventListenerSections = {};
-            for (var i = 0; i < eventListeners.length; ++i) {
-                var eventListener = eventListeners[i];
-                eventListener.node = WebInspector.domTreeManager.nodeForId(eventListener.nodeId);
-
-                var type = eventListener.type;
-                var section = eventListenerSections[type];
-                if (!section) {
-                    section = new WebInspector.EventListenerSection(type, domNode.id);
-                    eventListenerSections[type] = section;
-                    eventListenerTypes.push(type);
-                }
-
-                section.addListener(eventListener);
-            }
-
-            if (!eventListenerTypes.length) {
-                var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Event Listeners"));
-                emptyRow.showEmptyMessage();
-                this._eventListenersSectionGroup.rows = [emptyRow];
-                return;
-            }
-
-            eventListenerTypes.sort();
-
-            var rows = [];
-            for (var i = 0; i < eventListenerTypes.length; ++i)
-                rows.push(eventListenerSections[eventListenerTypes[i]]);
-            this._eventListenersSectionGroup.rows = rows;
-        }
-    },
-
-    _attributesChanged: function(event)
-    {
-        if (event.data.node !== this.domNode)
-            return;
-        this._refreshAttributes();
-    },
-
-    _nodeTypeDisplayName: function()
-    {
-        switch (this.domNode.nodeType()) {
-        case Node.ELEMENT_NODE:
-            return WebInspector.UIString("Element");
-        case Node.TEXT_NODE:
-            return WebInspector.UIString("Text Node");
-        case Node.COMMENT_NODE:
-            return WebInspector.UIString("Comment");
-        case Node.DOCUMENT_NODE:
-            return WebInspector.UIString("Document");
-        case Node.DOCUMENT_TYPE_NODE:
-            return WebInspector.UIString("Document Type");
-        case Node.DOCUMENT_FRAGMENT_NODE:
-            return WebInspector.UIString("Document Fragment");
-        case Node.CDATA_SECTION_NODE:
-            return WebInspector.UIString("Character Data");
-        case Node.PROCESSING_INSTRUCTION_NODE:
-            return WebInspector.UIString("Processing Instruction");
-        default:
-            console.error("Unknown DOM node type: ", this.domNode.nodeType());
-            return this.domNode.nodeType();
-        }
-    },
-
-    _createAttributesDataGrid: function()
-    {
-        var domNode = this.domNode;
-        if (!domNode || !domNode.hasAttributes())
-            return null;
-
-        var columns = {name: {title: WebInspector.UIString("Name"), width: "30%"}, value: {title: WebInspector.UIString("Value")}};
-        var dataGrid = new WebInspector.DataGrid(columns);
-
-        var attributes = domNode.attributes();
-        for (var i = 0; i < attributes.length; ++i) {
-            var attribute = attributes[i];
-
-            var node = new WebInspector.DataGridNode({name: attribute.name, value: attribute.value || ""}, false);
-            node.selectable = true;
-
-            dataGrid.appendChild(node);
-        }
-
-        return dataGrid;
-    }
-};
-
-WebInspector.DOMNodeDetailsSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMNodeStyles.js b/Source/WebInspectorUI/UserInterface/DOMNodeStyles.js
deleted file mode 100644
index ea0490253..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMNodeStyles.js
+++ /dev/null
@@ -1,1050 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMNodeStyles = function(node)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(node);
-    this._node = node || null;
-
-    this._rulesMap = {};
-    this._styleDeclarationsMap = {};
-
-    this._matchedRules = [];
-    this._inheritedRules = [];
-    this._pseudoElements = {};
-    this._inlineStyle = null;
-    this._attributesStyle = null;
-    this._computedStyle = null;
-    this._orderedStyles = [];
-    this._stylesNeedingTextCommited = [];
-
-    this._propertyNameToEffectivePropertyMap = {};
-
-    this.refresh();
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.DOMNodeStyles);
-
-WebInspector.DOMNodeStyles.Event = {
-    NeedsRefresh: "dom-node-styles-needs-refresh",
-    Refreshed: "dom-node-styles-refreshed"
-};
-
-WebInspector.DOMNodeStyles.prototype = {
-    constructor: WebInspector.DOMNodeStyles,
-
-    // Public
-
-    get node()
-    {
-        return this._node;
-    },
-
-    get needsRefresh()
-    {
-        return this._refreshPending || this._needsRefresh;
-    },
-
-    refreshIfNeeded: function()
-    {
-        if (!this._needsRefresh)
-            return;
-        this.refresh();
-    },
-
-    refresh: function()
-    {
-        if (this._refreshPending)
-            return;
-
-        this._needsRefresh = false;
-        this._refreshPending = true;
-
-        function parseRuleMatchArrayPayload(matchArray, node, inherited)
-        {
-            var result = [];
-
-            var ruleOccurrences = {};
-
-            // Iterate in reverse order to match the cascade order.
-            for (var i = matchArray.length - 1; i >= 0; --i) {
-                // COMPATIBILITY (iOS 6): This was just an array of rules, now it is an array of matches that have
-                // a 'rule' property. Support both here. And 'matchingSelectors' does not exist on iOS 6.
-                var matchedSelectorIndices = matchArray[i].matchingSelectors || [];
-                var rule = this._parseRulePayload(matchArray[i].rule || matchArray[i], matchedSelectorIndices, node, inherited, ruleOccurrences);
-                if (!rule)
-                    continue;
-                result.push(rule);
-            }
-
-            return result;
-        }
-
-        function fetchedMatchedStyles(error, matchedRulesPayload, pseudoElementRulesPayload, inheritedRulesPayload)
-        {
-            matchedRulesPayload = matchedRulesPayload || [];
-            pseudoElementRulesPayload = pseudoElementRulesPayload || [];
-            inheritedRulesPayload = inheritedRulesPayload || [];
-
-            // Move the current maps to previous.
-            this._previousRulesMap = this._rulesMap;
-            this._previousStyleDeclarationsMap = this._styleDeclarationsMap;
-
-            // Clear the current maps.
-            this._rulesMap = {};
-            this._styleDeclarationsMap = {};
-
-            this._matchedRules = parseRuleMatchArrayPayload.call(this, matchedRulesPayload, this._node);
-
-            this._pseudoElements = {};
-            for (var i = 0; i < pseudoElementRulesPayload.length; ++i) {
-                var pseudoElementRulePayload = pseudoElementRulesPayload[i];
-
-                // COMPATIBILITY (iOS 6): The entry payload had a 'rules' property, now it has a 'matches' property. Support both here.
-                var pseudoElementRules = parseRuleMatchArrayPayload.call(this, pseudoElementRulePayload.matches || pseudoElementRulePayload.rules, this._node);
-                this._pseudoElements[pseudoElementRulePayload.pseudoId] = {matchedRules: pseudoElementRules};
-            }
-
-            this._inheritedRules = [];
-
-            var i = 0;
-            var currentNode = this._node.parentNode;
-            while (currentNode && i < inheritedRulesPayload.length) {
-                var inheritedRulePayload = inheritedRulesPayload[i];
-
-                var inheritedRuleInfo = {node: currentNode};
-                inheritedRuleInfo.inlineStyle = inheritedRulePayload.inlineStyle ? this._parseStyleDeclarationPayload(inheritedRulePayload.inlineStyle, currentNode, true, WebInspector.CSSStyleDeclaration.Type.Inline) : null;
-                inheritedRuleInfo.matchedRules = inheritedRulePayload.matchedCSSRules ? parseRuleMatchArrayPayload.call(this, inheritedRulePayload.matchedCSSRules, currentNode, true) : [];
-
-                if (inheritedRuleInfo.inlineStyle || inheritedRuleInfo.matchedRules.length)
-                    this._inheritedRules.push(inheritedRuleInfo);
-
-                currentNode = currentNode.parentNode
-                ++i;
-            }
-        }
-
-        function fetchedInlineStyles(error, inlineStylePayload, attributesStylePayload)
-        {
-            this._inlineStyle = inlineStylePayload ? this._parseStyleDeclarationPayload(inlineStylePayload, this._node, false, WebInspector.CSSStyleDeclaration.Type.Inline) : null;
-            this._attributesStyle = attributesStylePayload ? this._parseStyleDeclarationPayload(attributesStylePayload, this._node, false, WebInspector.CSSStyleDeclaration.Type.Attribute) : null;
-
-            this._updateStyleCascade();
-        }
-
-        function fetchedComputedStyle(error, computedPropertiesPayload)
-        {
-            var properties = [];
-            for (var i = 0; computedPropertiesPayload && i < computedPropertiesPayload.length; ++i) {
-                var propertyPayload = computedPropertiesPayload[i];
-
-                var canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(propertyPayload.name);
-                propertyPayload.implicit = !this._propertyNameToEffectivePropertyMap[canonicalName];
-
-                var property = this._parseStylePropertyPayload(propertyPayload, NaN, this._computedStyle);
-                properties.push(property);
-            }
-
-            if (this._computedStyle)
-                this._computedStyle.update(null, properties);
-            else
-                this._computedStyle = new WebInspector.CSSStyleDeclaration(this, null, null, WebInspector.CSSStyleDeclaration.Type.Computed, this._node, false, null, properties);
-
-            this._refreshPending = false;
-
-            var significantChange = this._previousSignificantChange || false;
-            if (!significantChange) {
-                for (var key in this._styleDeclarationsMap) {
-                    // Check if the same key exists in the previous map and has the same style objects.
-                    if (key in this._previousStyleDeclarationsMap && Object.shallowEqual(this._styleDeclarationsMap[key], this._previousStyleDeclarationsMap[key]))
-                        continue;
-
-                    if (!this._includeUserAgentRulesOnNextRefresh) {
-                        // We can assume all the styles with the same key are from the same stylesheet and rule, so we only check the first.
-                        var firstStyle = this._styleDeclarationsMap[key][0];
-                        if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSRule.Type.UserAgent) {
-                            // User Agent styles get different identifiers after some edits. This would cause us to fire a significant refreshed
-                            // event more than it is helpful. And since the user agent stylesheet is static it shouldn't match differently
-                            // between refreshes for the same node. This issue is tracked by: https://webkit.org/b/110055
-                            continue;
-                        }
-                    }
-
-                    // This key is new or has different style objects than before. This is a significant change.
-                    significantChange = true;
-                    break;
-                }
-            }
-
-            if (!significantChange) {
-                for (var key in this._previousStyleDeclarationsMap) {
-                    // Check if the same key exists in current map. If it does exist it was already checked for equality above.
-                    if (key in this._styleDeclarationsMap)
-                        continue;
-
-                    if (!this._includeUserAgentRulesOnNextRefresh) {
-                        // See above for why we skip user agent style rules.
-                        var firstStyle = this._previousStyleDeclarationsMap[key][0];
-                        if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSRule.Type.UserAgent)
-                            continue;
-                    }
-
-                    // This key no longer exists. This is a significant change.
-                    significantChange = true;
-                    break;
-                }
-            }
-
-            delete this._includeUserAgentRulesOnNextRefresh;
-
-            // Delete the previous maps now that any reused rules and style have been moved over.
-            delete this._previousRulesMap;
-            delete this._previousStyleDeclarationsMap;
-
-            var styleToCommit = this._stylesNeedingTextCommited.shift();
-            if (styleToCommit) {
-                // Remember the significant change flag so we can pass it along when the pending style
-                // changes trigger a refresh. If we wait to scan later we might not find a significant change
-                // and fail to tell listeners about it.
-                this._previousSignificantChange = significantChange;
-
-                this.changeStyleText(styleToCommit, styleToCommit.__pendingText);
-
-                return;
-            }
-
-            // Delete the previous saved significant change flag so we rescan for a significant change next time.
-            delete this._previousSignificantChange;
-
-            this.dispatchEventToListeners(WebInspector.DOMNodeStyles.Event.Refreshed, {significantChange: significantChange});
-        }
-
-        CSSAgent.getMatchedStylesForNode.invoke({nodeId: this._node.id, includePseudo: true, includeInherited: true}, fetchedMatchedStyles.bind(this));
-        CSSAgent.getInlineStylesForNode.invoke({nodeId: this._node.id}, fetchedInlineStyles.bind(this));
-        CSSAgent.getComputedStyleForNode.invoke({nodeId: this._node.id}, fetchedComputedStyle.bind(this));
-    },
-
-    addRule: function(selector)
-    {
-        function addedRule(error, rulePayload)
-        {
-            if (error)
-                return;
-
-            DOMAgent.markUndoableState();
-
-            this.refresh();
-        }
-
-        selector = selector || this._node.appropriateSelectorFor(true);
-
-        CSSAgent.addRule.invoke({contextNodeId: this._node.id, selector: selector}, addedRule.bind(this));
-    },
-
-    get matchedRules()
-    {
-        return this._matchedRules;
-    },
-
-    get inheritedRules()
-    {
-        return this._inheritedRules;
-    },
-
-    get inlineStyle()
-    {
-        return this._inlineStyle;
-    },
-
-    get attributesStyle()
-    {
-        return this._attributesStyle;
-    },
-
-    get pseudoElements()
-    {
-        return this._pseudoElements;
-    },
-
-    get computedStyle()
-    {
-        return this._computedStyle;
-    },
-
-    get orderedStyles()
-    {
-        return this._orderedStyles;
-    },
-
-    effectivePropertyForName: function(name)
-    {
-        var canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(name);
-        return this._propertyNameToEffectivePropertyMap[canonicalName] || null;
-    },
-
-    // Protected
-
-    mediaQueryResultDidChange: function()
-    {
-        this._markAsNeedsRefresh();
-    },
-
-    pseudoClassesDidChange: function(node)
-    {
-        this._includeUserAgentRulesOnNextRefresh = true;
-        this._markAsNeedsRefresh();
-    },
-
-    attributeDidChange: function(node, attributeName)
-    {
-        // Ignore the attribute we know we just changed and handled above.
-        if (this._ignoreNextStyleAttributeDidChangeEvent && node === this._node && attributeName === "style") {
-            delete this._ignoreNextStyleAttributeDidChangeEvent;
-            return;
-        }
-
-        this._markAsNeedsRefresh();
-    },
-
-    changeRuleSelector: function(rule, selector)
-    {
-        selector = selector || "";
-
-        function ruleSelectorChanged(error, rulePayload)
-        {
-            DOMAgent.markUndoableState();
-
-            // Do a full refresh incase the rule no longer matches the node or the
-            // matched selector indices changed.
-            this.refresh();
-        }
-
-        this._needsRefresh = true;
-        this._ignoreNextContentDidChangeForStyleSheet = rule.ownerStyleSheet;
-
-        CSSAgent.setRuleSelector(rule.id, selector, ruleSelectorChanged.bind(this));
-    },
-
-    changeStyleText: function(style, text)
-    {
-        if (!style.ownerStyleSheet || !style.styleSheetTextRange)
-            return;
-
-        text = text || "";
-
-        if (CSSAgent.setStyleText) {
-            function styleChanged(error, stylePayload)
-            {
-                if (error)
-                    return;
-                this.refresh();
-            }
-
-            CSSAgent.setStyleText(style.id, text, styleChanged.bind(this));
-            return;
-        }
-
-        // COMPATIBILITY (iOS 6): CSSAgent.setStyleText was not available in iOS 6.
-
-        // Setting the text on CSSStyleSheet for inline styles causes a crash. https://webkit.org/b/110359
-        // So we just set the style attribute to get the same affect. This also avoids SourceCodeRevisions.
-        if (style.type === WebInspector.CSSStyleDeclaration.Type.Inline) {
-            text = text.trim();
-
-            function attributeChanged(error)
-            {
-                if (error)
-                    return;
-                this.refresh();
-            }
-
-            this._ignoreNextStyleAttributeDidChangeEvent = true;
-
-            if (text)
-                style.node.setAttributeValue("style", text, attributeChanged.bind(this));
-            else
-                style.node.removeAttribute("style", attributeChanged.bind(this));
-
-            return;
-        }
-
-        if (this._needsRefresh || this._refreshPending) {
-            // If we need refreshed then it is not safe to use the styleSheetTextRange since the range likely has
-            // changed and we need updated ranges. Store the text and remember the style so we can commit it after
-            // the next refresh.
-
-            style.__pendingText = text;
-
-            if (!this._stylesNeedingTextCommited.contains(style))
-                this._stylesNeedingTextCommited.push(style);
-
-            return;
-        }
-
-        function fetchedStyleSheetContent(styleSheet, content)
-        {
-            console.assert(style.styleSheetTextRange);
-            if (!style.styleSheetTextRange)
-                return;
-
-            var startOffset = style.styleSheetTextRange.startOffset;
-            var endOffset = style.styleSheetTextRange.endOffset;
-
-            if (isNaN(startOffset) || isNaN(endOffset)) {
-                style.styleSheetTextRange.resolveOffsets(content);
-
-                startOffset = style.styleSheetTextRange.startOffset;
-                endOffset = style.styleSheetTextRange.endOffset;
-            }
-
-            console.assert(!isNaN(startOffset));
-            console.assert(!isNaN(endOffset));
-            if (isNaN(startOffset) || isNaN(endOffset))
-                return;
-
-            function contentDidChange()
-            {
-                style.ownerStyleSheet.removeEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, contentDidChange, this);
-
-                this.refresh();
-            }
-
-            style.ownerStyleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, contentDidChange, this);
-
-            var newContent = content.substring(0, startOffset) + text + content.substring(endOffset);
-
-            WebInspector.branchManager.currentBranch.revisionForRepresentedObject(style.ownerStyleSheet).content = newContent;
-        }
-
-        this._stylesNeedingTextCommited.remove(style);
-        delete style.__pendingText;
-
-        this._needsRefresh = true;
-        this._ignoreNextContentDidChangeForStyleSheet = style.ownerStyleSheet;
-
-        style.ownerStyleSheet.requestContent(fetchedStyleSheetContent.bind(this));
-    },
-
-    changeProperty: function(property, name, value, priority)
-    {
-        var text = name ? name + ": " + value + (priority ? " !" + priority : "") + ";" : "";
-        this.changePropertyText(property, text);
-    },
-
-    changePropertyText: function(property, text)
-    {
-        text = text || "";
-
-        var index = property.index;
-        var newProperty = isNaN(index);
-        var overwrite = true;
-
-        // If this is a new property, then give it an index at the end of the current properties.
-        // Also don't overwrite, which will cause the property to be added at that index.
-        if (newProperty) {
-            index = property.ownerStyle.properties.length;
-            overwrite = false;
-        }
-
-        if (text && text.charAt(text.length - 1) !== ";")
-            text += ";";
-
-        this._needsRefresh = true;
-        this._ignoreNextContentDidChangeForStyleSheet = property.ownerStyle.ownerStyleSheet;
-
-        CSSAgent.setPropertyText(property.ownerStyle.id, index, text, overwrite, this._handlePropertyChange.bind(this, property));
-    },
-
-    changePropertyEnabledState: function(property, enabled)
-    {
-        enabled = !!enabled;
-
-        // Can't change a pending property with a NaN index.
-        if (isNaN(property.index))
-            return;
-
-        this._ignoreNextContentDidChangeForStyleSheet = property.ownerStyle.ownerStyleSheet;
-
-        CSSAgent.toggleProperty(property.ownerStyle.id, property.index, !enabled, this._handlePropertyChange.bind(this, property));
-    },
-
-    addProperty: function(property)
-    {
-        // Can't add a property unless it has a NaN index.
-        if (!isNaN(property.index))
-            return;
-
-        // Adding is done by setting the text.
-        this.changePropertyText(property, property.text);
-    },
-
-    removeProperty: function(property)
-    {
-        // Can't remove a pending property with a NaN index.
-        if (isNaN(property.index))
-            return;
-
-        // Removing is done by setting text to an empty string.
-        this.changePropertyText(property, "");
-    },
-
-    // Private
-
-    _handlePropertyChange: function(property, error, stylePayload)
-    {
-        if (error)
-            return;
-
-        DOMAgent.markUndoableState();
-
-        // Do a refresh instead of handling stylePayload so computed style is updated and we get valid
-        // styleSheetTextRange values for all the rules after this change.
-        this.refresh();
-    },
-
-    _createSourceCodeLocation: function(sourceURL, sourceLine, sourceColumn)
-    {
-        if (!sourceURL)
-            return null;
-
-        var sourceCode;
-
-        // Try to use the node to find the frame which has the correct resource first.
-        if (this._node.ownerDocument) {
-            var mainResource = WebInspector.frameResourceManager.resourceForURL(this._node.ownerDocument.documentURL);
-            if (mainResource) {
-                var parentFrame = mainResource.parentFrame;
-                sourceCode = parentFrame.resourceForURL(sourceURL);
-            }
-        }
-
-        // If that didn't find the resource, then search all frames.
-        if (!sourceCode)
-            sourceCode = WebInspector.frameResourceManager.resourceForURL(sourceURL);
-
-        if (!sourceCode)
-            return null;
-
-        return sourceCode.createSourceCodeLocation(sourceLine || 0, sourceColumn || 0);
-    },
-
-    _parseSourceRangePayload: function(payload, text)
-    {
-        if (!payload)
-            return null;
-
-        // COMPATIBILITY (iOS 6): The range use to only contain start and end offsets. Now it
-        // has line and column for the start and end position. Support both here.
-        if ("start" in payload && "end" in payload) {
-            var textRange = new WebInspector.TextRange(payload.start, payload.end);
-            if (typeof text === "string")
-                textRange.resolveLinesAndColumns(text);
-            return textRange;
-        }
-
-        return new WebInspector.TextRange(payload.startLine, payload.startColumn, payload.endLine, payload.endColumn);
-    },
-
-    _parseStylePropertyPayload: function(payload, index, styleDeclaration, styleText)
-    {
-        var text = payload.text || "";
-        var name = payload.name;
-        var value = (payload.value || "").replace(/\s*!important\s*$/, "");
-        var priority = payload.priority || "";
-
-        var enabled = true;
-        var overridden = false;
-        var implicit = payload.implicit || false;
-        var anonymous = false;
-        var valid = "parsedOk" in payload ? payload.parsedOk : true;
-
-        switch (payload.status || "style") {
-        case "active":
-            enabled = true;
-            break;
-        case "inactive":
-            overridden = true;
-            enabled = true;
-            break;
-        case "disabled":
-            enabled = false;
-            break;
-        case "style":
-            anonymous = true;
-            break;
-        }
-
-        var styleSheetTextRange = null;
-        var styleDeclarationTextRange = null;
-
-        // COMPATIBILITY (iOS 6): The range is in the style text, not the whole stylesheet.
-        // Later the range was changed to be in the whole stylesheet.
-        if (payload.range && "start" in payload.range && "end" in payload.range)
-            styleDeclarationTextRange = this._parseSourceRangePayload(payload.range, styleText);
-        else
-            styleSheetTextRange = this._parseSourceRangePayload(payload.range);
-
-        if (styleDeclaration) {
-            // Use propertyForName when the index is NaN since propertyForName is fast in that case.
-            var property = isNaN(index) ? styleDeclaration.propertyForName(name, true) : styleDeclaration.properties[index];
-
-            // Reuse a property if the index and name matches. Otherwise it is a different property
-            // and should be created from scratch. This works in the simple cases where only existing
-            // properties change in place and no properties are inserted or deleted at the beginning.
-            // FIXME: This could be smarter by ignoring index and just go by name. However, that gets
-            // tricky for rules that have more than one property with the same name.
-            if (property && property.name === name && (property.index === index || (isNaN(property.index) && isNaN(index)))) {
-                property.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange);
-                return property;
-            }
-
-            // Reuse a pending property with the same name. These properties are pending being committed,
-            // so if we find a match that likely means it got committed and we should use it.
-            var pendingProperties = styleDeclaration.pendingProperties;
-            for (var i = 0; i < pendingProperties.length; ++i) {
-                var pendingProperty = pendingProperties[i];
-                if (pendingProperty.name === name && isNaN(pendingProperty.index)) {
-                    pendingProperty.index = index;
-                    pendingProperty.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange);
-                    return pendingProperty;
-                }
-            }
-        }
-
-        return new WebInspector.CSSProperty(index, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, styleDeclarationTextRange);
-    },
-
-    _parseStyleDeclarationPayload: function(payload, node, inherited, type, rule, updateAllStyles)
-    {
-        if (!payload)
-            return null;
-
-        rule = rule || null;
-        inherited = inherited || false;
-
-        var id = payload.styleId;
-        var mapKey = id ? id.styleSheetId + ":" + id.ordinal : null;
-
-        var styleDeclaration = rule ? rule.style : null;
-        var styleDeclarations = [];
-
-        // Look for existing styles in the previous map if there is one, otherwise use the current map.
-        var previousStyleDeclarationsMap = this._previousStyleDeclarationsMap || this._styleDeclarationsMap;
-        if (mapKey && mapKey in previousStyleDeclarationsMap) {
-            styleDeclarations = previousStyleDeclarationsMap[mapKey];
-
-            // If we need to update all styles, then stop here and call _parseStyleDeclarationPayload for each style.
-            // We need to parse multiple times so we reuse the right properties from each style.
-            if (updateAllStyles && styleDeclarations.length) {
-                for (var i = 0; i < styleDeclarations.length; ++i) {
-                    var styleDeclaration = styleDeclarations[i];
-                    this._parseStyleDeclarationPayload(payload, styleDeclaration.node, styleDeclaration.inherited, styleDeclaration.type, styleDeclaration.ownerRule);
-                }
-
-                return;
-            }
-
-            if (!styleDeclaration) {
-                var filteredStyleDeclarations = styleDeclarations.filter(function(styleDeclaration) {
-                    // This case only applies for styles that are not part of a rule.
-                    if (styleDeclaration.ownerRule) {
-                        console.assert(!rule);
-                        return false;
-                    }
-
-                    if (styleDeclaration.node !== node)
-                        return false;
-
-                    if (styleDeclaration.inherited !== inherited)
-                        return false;
-
-                    return true;
-                });
-
-                console.assert(filteredStyleDeclarations.length <= 1);
-                styleDeclaration = filteredStyleDeclarations[0] || null;
-            }
-        }
-
-        if (previousStyleDeclarationsMap !== this._styleDeclarationsMap) {
-            // If the previous and current maps differ then make sure the found styleDeclaration is added to the current map.
-            styleDeclarations = mapKey && mapKey in this._styleDeclarationsMap ? this._styleDeclarationsMap[mapKey] : [] ;
-
-            if (styleDeclaration && !styleDeclarations.contains(styleDeclaration)) {
-                styleDeclarations.push(styleDeclaration);
-                this._styleDeclarationsMap[mapKey] = styleDeclarations;
-            }
-        }
-
-        var shorthands = {};
-        for (var i = 0; payload.shorthandEntries && i < payload.shorthandEntries.length; ++i) {
-            var shorthand = payload.shorthandEntries[i];
-            shorthands[shorthand.name] = shorthand.value;
-        }
-
-        var text = payload.cssText;
-
-        var inheritedPropertyCount = 0;
-
-        var properties = [];
-        for (var i = 0; payload.cssProperties && i < payload.cssProperties.length; ++i) {
-            var propertyPayload = payload.cssProperties[i];
-
-            if (inherited && propertyPayload.name in WebInspector.CSSKeywordCompletions.InheritedProperties)
-                ++inheritedPropertyCount;
-
-            var property = this._parseStylePropertyPayload(propertyPayload, i, styleDeclaration, text);
-            properties.push(property);
-        }
-
-        if (inherited && !inheritedPropertyCount)
-            return null;
-
-        var styleSheetTextRange = this._parseSourceRangePayload(payload.range);
-
-        if (styleDeclaration) {
-            styleDeclaration.update(text, properties, styleSheetTextRange);
-            return styleDeclaration;
-        }
-
-        var styleSheet = id ? WebInspector.cssStyleManager.styleSheetForIdentifier(id.styleSheetId) : null;
-        if (styleSheet)
-            styleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
-
-        styleDeclaration = new WebInspector.CSSStyleDeclaration(this, styleSheet, id, type, node, inherited, text, properties, styleSheetTextRange);
-
-        if (mapKey) {
-            styleDeclarations.push(styleDeclaration);
-            this._styleDeclarationsMap[mapKey] = styleDeclarations;
-        }
-
-        return styleDeclaration;
-    },
-
-    _parseRulePayload: function(payload, matchedSelectorIndices, node, inherited, ruleOccurrences)
-    {
-        if (!payload)
-            return null;
-
-        // User and User Agent rules don't have 'ruleId' in the payload. However, their style's have 'styleId' and
-        // 'styleId' is the same identifier the backend uses for Author rule identifiers, so do the same here.
-        // They are excluded by the backend because they are not editable, however our front-end does not determine
-        // editability solely based on the existence of the id like the open source front-end does.
-        var id = payload.ruleId || payload.style.styleId;
-
-        var mapKey = id ? id.styleSheetId + ":" + id.ordinal + ":" + (inherited ? "I" : "N") + ":" + node.id : null;
-
-        // Rules can match multiple times if they have multiple selectors or because of inheritance. We keep a count
-        // of occurrences so we have unique rules per occurrence, that way properties will be correctly marked as overridden.
-        var occurrence = 0;
-        if (mapKey) {
-            if (mapKey in ruleOccurrences)
-                occurrence = ++ruleOccurrences[mapKey];
-            else
-                ruleOccurrences[mapKey] = occurrence;
-        }
-
-        // Append the occurrence number to the map key for lookup in the rules map.
-        mapKey += ":" + occurrence;
-
-        var rule = null;
-
-        // Look for existing rules in the previous map if there is one, otherwise use the current map.
-        var previousRulesMap = this._previousRulesMap || this._rulesMap;
-        if (mapKey && mapKey in previousRulesMap) {
-            rule = previousRulesMap[mapKey];
-
-            if (previousRulesMap !== this._rulesMap) {
-                // If the previous and current maps differ then make sure the found rule is added to the current map.
-                this._rulesMap[mapKey] = rule;
-            }
-        }
-
-        var style = this._parseStyleDeclarationPayload(payload.style, node, inherited, WebInspector.CSSStyleDeclaration.Type.Rule, rule);
-        if (!style)
-            return null;
-
-        // COMPATIBILITY (iOS 6): The payload had 'selectorText' as a property,
-        // now it has 'selectorList' with a 'text' property. Support both here.
-        var selectorText = payload.selectorList ? payload.selectorList.text : payload.selectorText;
-        var selectors = payload.selectorList ? payload.selectorList.selectors : [];
-
-        // COMPATIBILITY (iOS 6): The payload did not have 'selectorList'.
-        // Fallback to using 'sourceLine' without column information.
-        if (payload.selectorList && payload.selectorList.range) {
-            var sourceRange = payload.selectorList.range;
-            var sourceCodeLocation = this._createSourceCodeLocation(payload.sourceURL, sourceRange.startLine, sourceRange.startColumn);
-        } else
-            var sourceCodeLocation = this._createSourceCodeLocation(payload.sourceURL, payload.sourceLine);
-
-        var type;
-        switch (payload.origin) {
-        case "regular":
-            type = WebInspector.CSSRule.Type.Author;
-            break;
-        case "user":
-            type = WebInspector.CSSRule.Type.User;
-            break;
-        case "user-agent":
-            type = WebInspector.CSSRule.Type.UserAgent;
-            break;
-        case "inspector":
-            type = WebInspector.CSSRule.Type.Inspector;
-            break;
-        }
-
-        var mediaList = [];
-        for (var i = 0; payload.media && i < payload.media.length; ++i) {
-            var mediaItem = payload.media[i];
-
-            var mediaType;
-            switch (mediaItem.source) {
-            case "mediaRule":
-                mediaType = WebInspector.CSSMedia.Type.MediaRule;
-                break;
-            case "importRule":
-                mediaType = WebInspector.CSSMedia.Type.ImportRule;
-                break;
-            case "linkedSheet":
-                mediaType = WebInspector.CSSMedia.Type.LinkedStyleSheet;
-                break;
-            case "inlineSheet":
-                mediaType = WebInspector.CSSMedia.Type.InlineStyleSheet;
-                break;
-            }
-
-            var mediaText = mediaItem.text;
-            var mediaSourceCodeLocation = this._createSourceCodeLocation(mediaItem.sourceURL, mediaItem.sourceLine);
-
-            mediaList.push(new WebInspector.CSSMedia(mediaType, mediaText, mediaSourceCodeLocation));
-        }
-
-        if (rule) {
-            rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
-            return rule;
-        }
-
-        var styleSheet = id ? WebInspector.cssStyleManager.styleSheetForIdentifier(id.styleSheetId) : null;
-        if (styleSheet)
-            styleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
-
-        rule = new WebInspector.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
-
-        if (mapKey)
-            this._rulesMap[mapKey] = rule;
-
-        return rule;
-    },
-
-    _markAsNeedsRefresh: function()
-    {
-        this._needsRefresh = true;
-        this.dispatchEventToListeners(WebInspector.DOMNodeStyles.Event.NeedsRefresh);
-    },
-
-    _styleSheetContentDidChange: function(event)
-    {
-        var styleSheet = event.target;
-        console.assert(styleSheet);
-        if (!styleSheet)
-            return;
-
-        // Ignore the stylesheet we know we just changed and handled above.
-        if (styleSheet === this._ignoreNextContentDidChangeForStyleSheet) {
-            delete this._ignoreNextContentDidChangeForStyleSheet;
-            return;
-        }
-
-        this._markAsNeedsRefresh();
-    },
-
-    _updateStyleCascade: function()
-    {
-        var cascadeOrderedStyleDeclarations = this._collectStylesInCascadeOrder(this._matchedRules, this._inlineStyle, this._attributesStyle);
-
-        for (var i = 0; i < this._inheritedRules.length; ++i) {
-            var inheritedStyleInfo = this._inheritedRules[i];
-            var inheritedCascadeOrder = this._collectStylesInCascadeOrder(inheritedStyleInfo.matchedRules, inheritedStyleInfo.inlineStyle, null);
-            cascadeOrderedStyleDeclarations = cascadeOrderedStyleDeclarations.concat(inheritedCascadeOrder);
-        }
-
-        this._orderedStyles = cascadeOrderedStyleDeclarations;
-
-        this._propertyNameToEffectivePropertyMap = {};
-
-        this._markOverriddenProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
-        this._associateRelatedProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
-
-        for (var pseudoIdentifier in this._pseudoElements) {
-            var pseudoElementInfo = this._pseudoElements[pseudoIdentifier];
-            pseudoElementInfo.orderedStyles = this._collectStylesInCascadeOrder(pseudoElementInfo.matchedRules, null, null);
-            this._markOverriddenProperties(pseudoElementInfo.orderedStyles);
-            this._associateRelatedProperties(pseudoElementInfo.orderedStyles);
-        }
-    },
-
-    _collectStylesInCascadeOrder: function(matchedRules, inlineStyle, attributesStyle)
-    {
-        var result = [];
-
-        // Inline style has the greatest specificity. So it goes first in the cascade order.
-        if (inlineStyle)
-            result.push(inlineStyle);
-
-        var userAndUserAgentStyles = [];
-
-        for (var i = 0; i < matchedRules.length; ++i) {
-            var rule = matchedRules[i];
-
-            // Only append to the result array here for author and inspector rules since attribute
-            // styles come between author rules and user/user agent rules.
-            switch (rule.type) {
-            case WebInspector.CSSRule.Type.Inspector:
-            case WebInspector.CSSRule.Type.Author:
-                result.push(rule.style);
-                break;
-
-            case WebInspector.CSSRule.Type.User:
-            case WebInspector.CSSRule.Type.UserAgent:
-                userAndUserAgentStyles.push(rule.style);
-                break;
-            }
-        }
-
-        // Style properties from HTML attributes are next.
-        if (attributesStyle)
-            result.push(attributesStyle);
-
-        // Finally add the user and user stylesheet's matched style rules we collected earlier.
-        result = result.concat(userAndUserAgentStyles);
-
-        return result;
-    },
-
-    _markOverriddenProperties: function(styles, propertyNameToEffectiveProperty)
-    {
-        propertyNameToEffectiveProperty = propertyNameToEffectiveProperty || {};
-
-        for (var i = 0; i < styles.length; ++i) {
-            var style = styles[i];
-            var properties = style.properties;
-
-            for (var j = 0; j < properties.length; ++j) {
-                var property = properties[j];
-                if (!property.enabled || property.anonymous || !property.valid) {
-                    property.overridden = false;
-                    continue;
-                }
-
-                if (style.inherited && !property.inherited) {
-                    property.overridden = false;
-                    continue;
-                }
-
-                var canonicalName = property.canonicalName;
-                if (canonicalName in propertyNameToEffectiveProperty) {
-                    var effectiveProperty = propertyNameToEffectiveProperty[canonicalName];
-
-                    if (effectiveProperty.ownerStyle === property.ownerStyle) {
-                        if (effectiveProperty.important && !property.important) {
-                            property.overridden = true;
-                            continue;
-                        }
-                    } else if (effectiveProperty.important || !property.important || effectiveProperty.ownerStyle.node !== property.ownerStyle.node) {
-                        property.overridden = true;
-                        continue;
-                    }
-
-                    effectiveProperty.overridden = true;
-                }
-
-                property.overridden = false;
-
-                propertyNameToEffectiveProperty[canonicalName] = property;
-            }
-        }
-    },
-
-    _associateRelatedProperties: function(styles, propertyNameToEffectiveProperty)
-    {
-        for (var i = 0; i < styles.length; ++i) {
-            var properties = styles[i].properties;
-
-            var knownShorthands = {};
-
-            for (var j = 0; j < properties.length; ++j) {
-                var property = properties[j];
-
-                if (!property.valid)
-                    continue;
-
-                if (!WebInspector.CSSCompletions.cssNameCompletions.isShorthandPropertyName(property.name))
-                    continue;
-
-                if (knownShorthands[property.canonicalName] && !knownShorthands[property.canonicalName].overridden) {
-                    console.assert(property.overridden);
-                    continue;
-                }
-
-                knownShorthands[property.canonicalName] = property;
-            }
-
-            for (var j = 0; j < properties.length; ++j) {
-                var property = properties[j];
-
-                if (!property.valid)
-                    continue;
-
-                var shorthandProperty = null;
-
-                if (!isEmptyObject(knownShorthands)) {
-                    var possibleShorthands = WebInspector.CSSCompletions.cssNameCompletions.shorthandsForLonghand(property.canonicalName);
-                    for (var k = 0; k < possibleShorthands.length; ++k) {
-                        if (possibleShorthands[k] in knownShorthands) {
-                            shorthandProperty = knownShorthands[possibleShorthands[k]];
-                            break;
-                        }
-                    }
-                }
-
-                if (!shorthandProperty || shorthandProperty.overridden !== property.overridden) {
-                    property.relatedShorthandProperty = null;
-                    property.clearRelatedLonghandProperties();
-                    continue;
-                }
-
-                shorthandProperty.addRelatedLonghandProperty(property);
-                property.relatedShorthandProperty = shorthandProperty;
-
-                if (propertyNameToEffectiveProperty && propertyNameToEffectiveProperty[shorthandProperty.canonicalName] === shorthandProperty)
-                    propertyNameToEffectiveProperty[property.canonicalName] = property;
-            }
-        }
-    }
-};
-
-WebInspector.DOMNodeStyles.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMObserver.js b/Source/WebInspectorUI/UserInterface/DOMObserver.js
deleted file mode 100644
index be7742ec3..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMObserver.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.DOMObserver.prototype = {
-    constructor: WebInspector.DOMObserver,
-
-    // Events defined by the "DOM" domain (see WebCore/inspector/Inspector.json).
-
-    documentUpdated: function()
-    {
-        WebInspector.domTreeManager._documentUpdated();
-    },
-
-    setChildNodes: function(parentId, payloads)
-    {
-        WebInspector.domTreeManager._setChildNodes(parentId, payloads);
-    },
-
-    attributeModified: function(nodeId, name, value)
-    {
-        WebInspector.domTreeManager._attributeModified(nodeId, name, value);
-    },
-
-    attributeRemoved: function(nodeId, name)
-    {
-        WebInspector.domTreeManager._attributeRemoved(nodeId, name);
-    },
-
-    inlineStyleInvalidated: function(nodeIds)
-    {
-        WebInspector.domTreeManager._inlineStyleInvalidated(nodeIds);
-    },
-
-    characterDataModified: function(nodeId, characterData)
-    {
-        WebInspector.domTreeManager._characterDataModified(nodeId, characterData);
-    },
-
-    childNodeCountUpdated: function(nodeId, childNodeCount)
-    {
-        WebInspector.domTreeManager._childNodeCountUpdated(nodeId, childNodeCount);
-    },
-
-    childNodeInserted: function(parentNodeId, previousNodeId, payload)
-    {
-        WebInspector.domTreeManager._childNodeInserted(parentNodeId, previousNodeId, payload);
-    },
-
-    childNodeRemoved: function(parentNodeId, nodeId)
-    {
-        WebInspector.domTreeManager._childNodeRemoved(parentNodeId, nodeId);
-    },
-
-    shadowRootPushed: function(parentNodeId, nodeId)
-    {
-        WebInspector.domTreeManager._childNodeInserted(parentNodeId, 0, nodeId);
-    },
-
-    shadowRootPopped: function(parentNodeId, nodeId)
-    {
-        WebInspector.domTreeManager._childNodeRemoved(parentNodeId, nodeId);
-    }
-};
-
-WebInspector.DOMObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMSearchMatchObject.js b/Source/WebInspectorUI/UserInterface/DOMSearchMatchObject.js
deleted file mode 100644
index 6ba045727..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMSearchMatchObject.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMSearchMatchObject = function(resource, domNode, title, searchTerm, textRange)
-{
-    console.assert(resource instanceof WebInspector.Resource);
-    console.assert(domNode instanceof WebInspector.DOMNode);
-
-    WebInspector.Object.call(this);
-
-    this._resource = resource;
-    this._domNode = domNode;
-    this._title = title;
-    this._searchTerm = searchTerm;
-    this._sourceCodeTextRange = resource.createSourceCodeTextRange(textRange);
-};
-
-WebInspector.DOMSearchMatchObject.DOMMatchElementIconStyleClassName = "dom-match-element-icon";
-WebInspector.DOMSearchMatchObject.DOMMatchTextNodeIconStyleClassName = "dom-match-text-node-icon";
-WebInspector.DOMSearchMatchObject.DOMMatchCommentIconStyleClassName = "dom-match-comment-icon";
-WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName = "dom-match-document-type-icon";
-WebInspector.DOMSearchMatchObject.DOMMatchCharacterDataIconStyleClassName = "dom-match-character-data-icon";
-WebInspector.DOMSearchMatchObject.DOMMatchNodeIconStyleClassName = "dom-match-node-icon";
-
-WebInspector.DOMSearchMatchObject.prototype = {
-    constructor: WebInspector.DOMSearchMatchObject,
-
-    // Public
-
-    get domNode()
-    {
-        return this._domNode;
-    },
-
-    get title()
-    {
-        return this._title;     
-    },
-
-    get className()
-    {
-        if (!this._className)
-            this._className = this._generateClassName();
-
-        return this._className;
-    },
-
-    get searchTerm()
-    {
-        return this._searchTerm;
-    },
-
-    get sourceCodeTextRange()
-    {
-        return this._sourceCodeTextRange;
-    },
-
-    // Private
-    
-    _generateClassName: function()
-    {
-        switch (this._domNode.nodeType()) {
-        case Node.ELEMENT_NODE:
-            return WebInspector.DOMSearchMatchObject.DOMMatchElementIconStyleClassName;
-
-        case Node.TEXT_NODE:
-            return WebInspector.DOMSearchMatchObject.DOMMatchTextNodeIconStyleClassName;
-
-        case Node.COMMENT_NODE:
-            return WebInspector.DOMSearchMatchObject.DOMMatchCommentIconStyleClassName;
-
-        case Node.DOCUMENT_TYPE_NODE:
-            return WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName;
-
-        case Node.CDATA_SECTION_NODE:
-            return WebInspector.DOMSearchMatchObject.DOMMatchCharacterDataIconStyleClassName;
-
-        default:
-            console.error("Unknown DOM node type: ", node.nodeType());
-            return WebInspector.DOMSearchMatchObject.DOMMatchNodeIconStyleClassName;
-        }
-    }
-};
-
-WebInspector.DOMSearchMatchObject.titleForDOMNode = function(domNode)
-{
-    switch (domNode.nodeType()) {
-    case Node.ELEMENT_NODE:
-        var title = "<" + domNode.nodeNameInCorrectCase();
-        
-        for (var i = 0; i < domNode.attributes().length; ++i) {
-            title += " " + domNode.attributes()[i].name;
-            if (domNode.attributes()[i].value.length)
-                title += "=\"" + domNode.attributes()[i].value + "\"";
-        }
-
-        return title + ">";
-
-    case Node.TEXT_NODE:
-        return "\"" + domNode.nodeValue() + "\"";
-
-    case Node.COMMENT_NODE:
-        return "<!--" + domNode.nodeValue() + "-->";
-
-    case Node.DOCUMENT_TYPE_NODE:
-        var title = "<!DOCTYPE " + domNode.nodeName();
-        if (domNode.publicId) {
-            title += " PUBLIC \"" + domNode.publicId + "\"";
-            if (node.systemId)
-                title += " \"" + domNode.systemId + "\"";
-        } else if (domNode.systemId)
-            title += " SYSTEM \"" + domNode.systemId + "\"";
-
-        if (domNode.internalSubset)
-            title += " [" + domNode.internalSubset + "]";
-
-        return title + ">";
-
-    case Node.CDATA_SECTION_NODE:
-        return "<![CDATA[" + domNode + "]]>";
-
-    default:
-        console.error("Unknown DOM node type: ", domNode.nodeType());
-        return domNode.nodeNameInCorrectCase();
-    }
-}
-
-WebInspector.DOMSearchMatchObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageContentView.css b/Source/WebInspectorUI/UserInterface/DOMStorageContentView.css
deleted file mode 100644
index 234dec65d..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageContentView.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.dom-storage > .data-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    outline: none;
-    border: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageContentView.js b/Source/WebInspectorUI/UserInterface/DOMStorageContentView.js
deleted file mode 100644
index 0f4e67166..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageContentView.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMStorageContentView = function(representedObject)
-{
-    WebInspector.ContentView.call(this, representedObject);
-    
-    this.element.classList.add(WebInspector.DOMStorageContentView.StyleClassName);
-
-    this.update();
-};
-
-WebInspector.DOMStorageContentView.StyleClassName = "dom-storage";
-
-WebInspector.DOMStorageContentView.prototype = {
-    constructor: WebInspector.DOMStorageContentView,
-    
-    // Public
-    
-    update: function()
-    {
-        this.representedObject.getEntries(this._showDOMStorageEntries.bind(this));
-    },
-
-    updateLayout: function()
-    {
-        if (this._dataGrid)
-            this._dataGrid.updateLayout();
-    },
-
-    get scrollableElements()
-    {
-        if (!this._dataGrid)
-            return [];
-        return [this._dataGrid.scrollContainer];
-    },
-
-    // Private
-
-    _showDOMStorageEntries: function(error, entries)
-    {
-        if (error)
-            return;
-
-        this._updateDataGridForDOMStorageEntries(entries);
-        
-        this._dataGrid.updateLayout();
-    },
-
-    _updateDataGridForDOMStorageEntries: function(entries)
-    {
-        if (!this._dataGrid) {
-            var columns = {};
-            columns[0] = {title: WebInspector.UIString("Key"), sortable: true};
-            columns[1] = {title: WebInspector.UIString("Value"), sortable: true};            
-
-            this._dataGrid = new WebInspector.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this));
-            this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
-
-            this.element.appendChild(this._dataGrid.element);
-        }
-
-        console.assert(this._dataGrid);
-
-        var nodes = [];
-        for (var i = 0; i < entries.length; ++i) {
-            var data = {};
-
-            var key = entries[i][0];
-            var value = entries[i][1];
-
-            data[0] = key;
-            data[1] = value;
-
-            var node = new WebInspector.DataGridNode(data, false);
-            node.selectable = true;
-
-            nodes.push(node);
-        }
-
-        if (this._dataGrid.creationNode)
-            this._dataGrid.removeChild(this._dataGrid.creationNode);
-
-        this._insertNodesIntoDataGridWithSort(nodes);
-
-        if (nodes.length > 0)
-            nodes[0].selected = true;
-    },
-
-    _sortDataGrid: function()
-    {
-        if (this._dataGrid.creationNode)
-            this._dataGrid.removeChild(this._dataGrid.creationNode);
-
-        var nodes = this._dataGrid.children.slice();
-        this._insertNodesIntoDataGridWithSort(nodes);
-    },
-
-    _insertNodesIntoDataGridWithSort: function(nodes)
-    {
-        console.assert(!this._dataGrid.creationNode);
-
-        var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier;
-        var sortAscending = this._dataGrid.sortOrder === "ascending";
-
-        function comparator(a, b)
-        {
-            var result = b.data[sortColumnIdentifier].localeCompare(a.data[sortColumnIdentifier]);
-            return sortAscending ? -result : result;
-        }
-
-        if (sortColumnIdentifier)
-            nodes.sort(comparator);
-
-        this._dataGrid.removeChildren();
-        for (var i = 0; i < nodes.length; i++)
-            this._dataGrid.appendChild(nodes[i]);
-        this._dataGrid.addCreationNode(false);
-    },
-
-    _deleteCallback: function(node)
-    {
-        if (!node || node.isCreationNode)
-            return;
-
-        if (this.representedObject)
-            this.representedObject.removeItem(node.data[0]);
-
-        this.update();
-    },
-
-    _editingCallback: function(editingNode, columnIdentifier, oldText, newText)
-    {
-        var domStorage = this.representedObject;
-        if (columnIdentifier === 0) {
-            if (oldText)
-                domStorage.removeItem(oldText);
-
-            domStorage.setItem(newText, editingNode.data[1]);
-        } else
-            domStorage.setItem(editingNode.data[0], newText);
-
-        this.update();
-    }
-};
-
-WebInspector.DOMStorageContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageIcons.css b/Source/WebInspectorUI/UserInterface/DOMStorageIcons.css
deleted file mode 100644
index 08d16070c..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageIcons.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.local-storage-icon .icon {
-    content: -webkit-image-set(url(Images/LocalStorage.png) 1x, url(Images/LocalStorage@2x.png) 2x);
-}
-
-.session-storage-icon .icon {
-    content: -webkit-image-set(url(Images/SessionStorage.png) 1x, url(Images/SessionStorage@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageObject.js b/Source/WebInspectorUI/UserInterface/DOMStorageObject.js
deleted file mode 100644
index 1c3720f89..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageObject.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMStorageObject = function(id, host, isLocalStorage)
-{
-    this._id = id;
-    this._host = host;
-    this._isLocalStorage = isLocalStorage;
-};
-
-WebInspector.DOMStorageObject.prototype = {
-    constructor: WebInspector.DOMStorageObject,
-    
-    get id()
-    {
-        return this._id;
-    },
-
-    get host()
-    {
-        return this._host;
-    },
-
-    isLocalStorage: function()
-    {
-        return this._isLocalStorage;
-    },
-
-    getEntries: function(callback)
-    {
-        // COMPATIBILITY (iOS 6): The getDOMStorageItems function was later renamed to getDOMStorageItems.
-        if (DOMStorageAgent.getDOMStorageEntries)
-            DOMStorageAgent.getDOMStorageEntries(this._id, callback);
-        else
-            DOMStorageAgent.getDOMStorageItems(this._id, callback);
-    },
-
-    removeItem: function(key, callback)
-    {
-        DOMStorageAgent.removeDOMStorageItem(this._id, key, callback);
-    },
-
-    setItem: function(key, value, callback)
-    {
-        DOMStorageAgent.setDOMStorageItem(this._id, key, value, callback);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageObserver.js b/Source/WebInspectorUI/UserInterface/DOMStorageObserver.js
deleted file mode 100644
index 787137a10..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageObserver.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMStorageObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.DOMStorageObserver.prototype = {
-    constructor: WebInspector.DOMStorageObserver,
-
-    // Events defined by the "DOMStorage" domain (see WebCore/inspector/Inspector.json).
-
-    // COMPATIBILITY (iOS 6): This event no longer exists. It is still needed and called on iOS 6.
-    addDOMStorage: function(storage)
-    {
-        WebInspector.storageManager.domStorageWasAdded(storage.id, storage.host, storage.isLocalStorage);
-    },
-
-    // COMPATIBILITY (iOS 6): This event was split into the granular events below.
-    updateDOMStorage: function(storageId)
-    {
-        WebInspector.storageManager.domStorageWasUpdated(storageId);
-    },
-
-    domStorageItemsCleared: function(storageId)
-    {
-        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
-        this.updateDOMStorage(storageId);
-    },
-
-    domStorageItemRemoved: function(storageId, key)
-    {
-        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
-        this.updateDOMStorage(storageId);
-    },
-
-    domStorageItemAdded: function(storageId, key, newValue)
-    {
-        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
-        this.updateDOMStorage(storageId);
-    },
-
-    domStorageItemUpdated: function(storageId, key, oldValue, newValue)
-    {
-        // FIXME: Handle this granular event better by only updating what changed. <rdar://problem/13223981>
-        this.updateDOMStorage(storageId);
-    }
-};
-
-WebInspector.DOMStorageObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMStorageTreeElement.js b/Source/WebInspectorUI/UserInterface/DOMStorageTreeElement.js
deleted file mode 100644
index 3b3e60c79..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMStorageTreeElement.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMStorageTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.DOMStorageObject);
-
-    if (representedObject.isLocalStorage())
-        var className = WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName;
-    else
-        var className = WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName;
-
-    WebInspector.StorageTreeElement.call(this, className, WebInspector.displayNameForHost(representedObject.host), representedObject);
-};
-
-WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName = "local-storage-icon";
-WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName = "session-storage-icon";
-
-WebInspector.DOMStorageTreeElement.prototype = {
-    constructor: WebInspector.DOMStorageTreeElement,
-
-    // Public
-
-    get name()
-    {
-        return WebInspector.displayNameForHost(this.representedObject.host);
-    },
-
-    get categoryName()
-    {
-        if (this.representedObject.isLocalStorage())
-            return WebInspector.UIString("Local Storage");
-        return WebInspector.UIString("Session Storage");
-    }
-};
-
-WebInspector.DOMStorageTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTree.js b/Source/WebInspectorUI/UserInterface/DOMTree.js
deleted file mode 100644
index 783e97d4d..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTree.js
+++ /dev/null
@@ -1,236 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMTree = function(frame)
-{
-    WebInspector.Object.call(this);
-
-    this._frame = frame;
-
-    this._rootDOMNode = null;
-    this._requestIdentifier = 0;
-
-    this._frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextChanged, this);
-
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._documentUpdated, this);
-
-    // Only add extra event listeners when not the main frame. Since DocumentUpdated is enough for the main frame.
-    if (!this._frame.isMainFrame()) {
-        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
-        this._frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceDidChange, this);
-    }
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.DOMTree);
-
-WebInspector.DOMTree.Event = {
-    RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated"
-};
-
-WebInspector.DOMTree.prototype = {
-    constructor: WebInspector.DOMTree,
-
-    // Public
-
-    get frame()
-    {
-        return this._frame;
-    },
-
-    invalidate: function()
-    {
-        // Set to null so it is fetched again next time requestRootDOMNode is called.
-        this._rootDOMNode = null;
-
-        // Clear the pending callbacks. It is the responsibility of the client to listen for
-        // the RootDOMNodeInvalidated event and request the root DOM node again.
-        delete this._pendingRootDOMNodeRequests;
-
-        if (this._invalidateTimeoutIdentifier)
-            return;
-
-        function performInvalidate()
-        {
-            delete this._invalidateTimeoutIdentifier;
-
-            this.dispatchEventToListeners(WebInspector.DOMTree.Event.RootDOMNodeInvalidated);
-        }
-
-        // Delay the invalidation on a timeout to coalesce multiple calls to invalidate.
-        this._invalidateTimeoutIdentifier = setTimeout(performInvalidate.bind(this), 0);
-    },
-
-    requestRootDOMNode: function(callback)
-    {
-        console.assert(typeof callback === "function");
-        if (typeof callback !== "function")
-            return;
-
-        if (this._rootDOMNode) {
-            callback(this._rootDOMNode);
-            return;
-        }
-
-        if (!this._frame.isMainFrame() && WebInspector.ExecutionContext.supported() && !this._frame.pageExecutionContext) {
-            this._rootDOMNodeRequestWaitingForExecutionContext = true;
-            if (!this._pendingRootDOMNodeRequests)
-                this._pendingRootDOMNodeRequests = [];
-            this._pendingRootDOMNodeRequests.push(callback);
-            return;
-        }
-
-        if (this._pendingRootDOMNodeRequests) {
-            this._pendingRootDOMNodeRequests.push(callback);
-            return;
-        }
-
-        this._pendingRootDOMNodeRequests = [callback];
-        this._requestRootDOMNode();
-    },
-
-    // Private
-
-    _requestRootDOMNode: function()
-    {
-        console.assert(this._frame.isMainFrame() || !WebInspector.ExecutionContext.supported() || this._frame.pageExecutionContext);
-        console.assert(this._pendingRootDOMNodeRequests.length);
-
-        // Bump the request identifier. This prevents pending callbacks for previous requests from completing.
-        var requestIdentifier = ++this._requestIdentifier;
-
-        function rootObjectAvailable(error, result)
-        {
-            // Check to see if we have been invalidated (if the callbacks were cleared).
-            if (!this._pendingRootDOMNodeRequests || requestIdentifier != this._requestIdentifier)
-                return;
-
-            if (error) {
-                console.error(JSON.stringify(error));
-
-                this._rootDOMNode = null;
-                dispatchCallbacks.call(this);
-                return;
-            }
-
-            // Convert the RemoteObject to a DOMNode by asking the backend to push it to us.
-            var remoteObject = WebInspector.RemoteObject.fromPayload(result);
-            remoteObject.pushNodeToFrontend(rootDOMNodeAvailable.bind(this, remoteObject));
-        }
-
-        function rootDOMNodeAvailable(remoteObject, nodeId)
-        {
-            remoteObject.release();
-
-            // Check to see if we have been invalidated (if the callbacks were cleared).
-            if (!this._pendingRootDOMNodeRequests || requestIdentifier != this._requestIdentifier)
-                return;
-
-            if (!nodeId) {
-                this._rootDOMNode = null;
-                dispatchCallbacks.call(this);
-                return;
-            }
-
-            this._rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
-
-            console.assert(this._rootDOMNode);
-            if (!this._rootDOMNode) {
-                dispatchCallbacks.call(this);
-                return;
-            }
-
-            // Request the child nodes since the root node is often not shown in the UI,
-            // and the child nodes will be needed immediately.
-            this._rootDOMNode.getChildNodes(dispatchCallbacks.bind(this));
-        }
-
-        function mainDocumentAvailable(document)
-        {
-            this._rootDOMNode = document;
-
-            dispatchCallbacks.call(this);
-        }
-
-        function dispatchCallbacks()
-        {
-            // Check to see if we have been invalidated (if the callbacks were cleared).
-            if (!this._pendingRootDOMNodeRequests || requestIdentifier != this._requestIdentifier)
-                return;
-
-            for (var i = 0; i < this._pendingRootDOMNodeRequests.length; ++i)
-                this._pendingRootDOMNodeRequests[i](this._rootDOMNode);
-            delete this._pendingRootDOMNodeRequests;
-        }
-
-        // For the main frame we can use the more straight forward requestDocument function. For
-        // child frames we need to do a more roundabout approach since the protocol does not include
-        // a specific way to request a document given a frame identifier. The child frame approach
-        // involves evaluating the JavaScript "document" and resolving that into a DOMNode.
-        if (this._frame.isMainFrame())
-            WebInspector.domTreeManager.requestDocument(mainDocumentAvailable.bind(this));
-        else {
-            // COMPATIBILITY (iOS 6): Execution context identifiers (contextId) did not exist
-            // in iOS 6. Fallback to including the frame identifier (frameId).
-            var contextId = this._frame.pageExecutionContext ? this._frame.pageExecutionContext.id : undefined;
-            RuntimeAgent.evaluate.invoke({expression: "document", objectGroup: "", includeCommandLineAPI: false, doNotPauseOnExceptionsAndMuteConsole: true, contextId: contextId, frameId: this._frame.id, returnByValue: false, generatePreview: false}, rootObjectAvailable.bind(this));
-        }
-    },
-
-    _nodeRemoved: function(event)
-    {
-        console.assert(!this._frame.isMainFrame());
-
-        if (event.data.node !== this._rootDOMNode)
-            return;
-
-        this.invalidate();
-    },
-
-    _documentUpdated: function(event)
-    {
-        this.invalidate();
-    },
-
-    _frameMainResourceDidChange: function(event)
-    {
-        console.assert(!this._frame.isMainFrame());
-
-        this.invalidate();
-    },
-
-    _framePageExecutionContextChanged: function(event)
-    {
-        if (this._rootDOMNodeRequestWaitingForExecutionContext) {
-            console.assert(this._frame.pageExecutionContext);
-            console.assert(this._pendingRootDOMNodeRequests && this._pendingRootDOMNodeRequests.length);
-
-            delete this._rootDOMNodeRequestWaitingForExecutionContext;
-
-            this._requestRootDOMNode();
-        }
-    }
-};
-
-WebInspector.DOMTree.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/DOMTreeContentView.js
deleted file mode 100644
index 57f911169..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeContentView.js
+++ /dev/null
@@ -1,429 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMTreeContentView = function(domTree)
-{
-    console.assert(domTree);
-
-    WebInspector.ContentView.call(this, domTree);
-
-    // The navigation item for the compositing borders button.
-    this._compositingBordersButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("layer-borders", WebInspector.UIString("Show compositing borders"), WebInspector.UIString("Hide compositing borders"), "Images/LayerBorders.pdf", 16, 16);
-    this._compositingBordersButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleCompositingBorders, this);
-    this._compositingBordersButtonNavigationItem.enabled = !!PageAgent.getCompositingBordersVisible;
-
-    // The navigation item for the shadow tree toggle button.
-    WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
-    this._showsShadowDOMButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("shows-shadow-DOM", WebInspector.UIString("Show shadow DOM nodes"), WebInspector.UIString("Hide shadow DOM nodes"), "Images/ShadowDOM.pdf", 16, 16);
-    this._showsShadowDOMButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleShowsShadowDOMSetting, this);
-    this._showShadowDOMSettingChanged();
-
-    this.element.classList.add(WebInspector.DOMTreeContentView.StyleClassName);
-    this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
-
-    this._domTree = domTree;
-    this._domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
-
-    this._domTreeOutline = new WebInspector.DOMTreeOutline(true, true, false);
-    this._domTreeOutline.addEventListener(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged, this._selectedNodeDidChange, this);
-    this._domTreeOutline.wireToDomAgent();
-    this.element.appendChild(this._domTreeOutline.element);
-
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._domNodeChanged, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._domNodeChanged, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CharacterDataModified, this._domNodeChanged, this);
-
-    this._lastSelectedNodePathSetting = new WebInspector.Setting("last-selected-node-path", null);
-
-    this._numberOfSearchResults = null;
-
-    this._requestRootDOMNode();
-};
-
-WebInspector.DOMTreeContentView.StyleClassName = "dom-tree";
-
-WebInspector.DOMTreeContentView.prototype = {
-    constructor: WebInspector.DOMTreeContentView,
-
-    // Public
-
-    get navigationItems()
-    {
-        return [this._showsShadowDOMButtonNavigationItem, this._compositingBordersButtonNavigationItem];
-    },
-
-    get domTree()
-    {
-        return this._domTree;
-    },
-
-    get scrollableElements()
-    {
-        return [this.element];
-    },
-
-    updateLayout: function()
-    {
-        this._domTreeOutline.updateSelection();
-    },
-
-    shown: function()
-    {
-        this._domTreeOutline.setVisible(true, WebInspector.isConsoleFocused());
-        this._updateCompositingBordersButtonToMatchPageSettings();
-    },
-
-    hidden: function()
-    {
-        WebInspector.domTreeManager.hideDOMNodeHighlight();
-        this._domTreeOutline.setVisible(false);
-    },
-
-    closed: function()
-    {
-        this._domTree.removeEventListener(null, null, this);
-        WebInspector.domTreeManager.removeEventListener(null, null, this);
-
-        this._domTreeOutline.close();
-    },
-
-    get selectionPathComponents()
-    {
-        var treeElement = this._domTreeOutline.selectedTreeElement;
-        var pathComponents = [];
-
-        while (treeElement && !treeElement.root) {
-            // The close tag is contained within the element it closes. So skip it since we don't want to
-            // show the same node twice in the hierarchy.
-            if (treeElement.isCloseTag()) {
-                treeElement = treeElement.parent;
-                continue;
-            }
-
-            var pathComponent = new WebInspector.DOMTreeElementPathComponent(treeElement, treeElement.representedObject);
-            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
-            pathComponents.unshift(pathComponent);
-            treeElement = treeElement.parent;
-        }
-
-        return pathComponents;
-    },
-
-    selectAndRevealDOMNode: function(domNode, preventFocusChange)
-    {
-        this._domTreeOutline.selectDOMNode(domNode, !preventFocusChange);
-    },
-
-    handleCopyEvent: function(event)
-    {
-        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
-        if (!selectedDOMNode)
-            return;
-
-        event.clipboardData.clearData();
-        event.preventDefault();
-
-        selectedDOMNode.copyNode();
-    },
-
-    get supportsSearch()
-    {
-        return true;
-    },
-
-    get numberOfSearchResults()
-    {
-        return this._numberOfSearchResults;
-    },
-
-    get hasPerformedSearch()
-    {
-        return this._numberOfSearchResults !== null;
-    },
-
-    set automaticallyRevealFirstSearchResult(reveal)
-    {
-        this._automaticallyRevealFirstSearchResult = reveal;
-
-        // If we haven't shown a search result yet, reveal one now.
-        if (this._automaticallyRevealFirstSearchResult && this._numberOfSearchResults > 0) {
-            if (this._currentSearchResultIndex === -1)
-                this.revealNextSearchResult();
-        }
-    },
-
-    performSearch: function(query)
-    {
-        if (this._searchQuery === query)
-            return;
-
-        if (this._searchIdentifier)
-            DOMAgent.discardSearchResults(this._searchIdentifier);
-
-        this._searchQuery = query;
-        this._searchIdentifier = null;
-        this._numberOfSearchResults = null;
-        this._currentSearchResultIndex = -1;
-
-        function searchResultsReady(error, searchIdentifier, resultsCount)
-        {
-            if (error)
-                return;
-
-            this._searchIdentifier = searchIdentifier;
-            this._numberOfSearchResults = resultsCount;
-
-            this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
-
-            if (this._automaticallyRevealFirstSearchResult)
-                this.revealNextSearchResult();
-        }
-
-        DOMAgent.performSearch(query, searchResultsReady.bind(this));
-    },
-
-    searchCleared: function()
-    {
-        if (this._searchIdentifier)
-            DOMAgent.discardSearchResults(this._searchIdentifier);
-
-        this._searchQuery = null;
-        this._searchIdentifier = null;
-        this._numberOfSearchResults = null;
-        this._currentSearchResultIndex = -1;
-    },
-
-    revealPreviousSearchResult: function(changeFocus)
-    {
-        if (!this._numberOfSearchResults)
-            return;
-
-        if (this._currentSearchResultIndex > 0)
-            --this._currentSearchResultIndex;
-        else
-            this._currentSearchResultIndex = this._numberOfSearchResults - 1;
-
-        this._revealSearchResult(this._currentSearchResultIndex, changeFocus);
-    },
-
-    revealNextSearchResult: function(changeFocus)
-    {
-        if (!this._numberOfSearchResults)
-            return;
-
-        if (this._currentSearchResultIndex + 1 < this._numberOfSearchResults)
-            ++this._currentSearchResultIndex;
-        else
-            this._currentSearchResultIndex = 0;
-
-        this._revealSearchResult(this._currentSearchResultIndex, changeFocus);
-    },
-
-    // Private
-
-    _revealSearchResult: function(index, changeFocus)
-    {
-        console.assert(this._searchIdentifier);
-
-        var searchIdentifier = this._searchIdentifier;
-
-        function revealResult(error, nodeIdentifiers)
-        {
-            if (error)
-                return;
-
-            // Bail if the searchIdentifier changed since we started.
-            if (this._searchIdentifier !== searchIdentifier)
-                return;
-
-            console.assert(nodeIdentifiers.length === 1);
-
-            var domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifiers[0]);
-            console.assert(domNode);
-            if (!domNode)
-                return;
-
-            this._domTreeOutline.selectDOMNode(domNode, changeFocus);
-        }
-
-        DOMAgent.getSearchResults(this._searchIdentifier, index, index + 1, revealResult.bind(this));
-    },
-
-    _rootDOMNodeAvailable: function(rootDOMNode)
-    {
-        this._domTreeOutline.rootDOMNode = rootDOMNode;
-
-        if (!rootDOMNode) {
-            this._domTreeOutline.selectDOMNode(null, false);
-            return;
-        }
-
-        function selectNode(lastSelectedNode)
-        {
-            // A selection was made while waiting for the async reply. Just bail now.
-            if (this._domTreeOutline.selectedTreeElement)
-                return;
-
-            var nodeToFocus = lastSelectedNode;
-            if (!nodeToFocus)
-                nodeToFocus = rootDOMNode.body || rootDOMNode.documentElement;
-
-            if (!nodeToFocus)
-                return;
-
-            this._dontSetLastSelectedNodePath = true;
-            this.selectAndRevealDOMNode(nodeToFocus, WebInspector.isConsoleFocused());
-            this._dontSetLastSelectedNodePath = false;
-
-            // If this wasn't the last selected node, then expand it.
-            if (!lastSelectedNode && this._domTreeOutline.selectedTreeElement)
-                this._domTreeOutline.selectedTreeElement.expand();
-        }
-
-        function selectLastSelectedNode(nodeId)
-        {
-            selectNode.call(this, WebInspector.domTreeManager.nodeForId(nodeId));
-        }
-
-        if (this._lastSelectedNodePathSetting.value && this._lastSelectedNodePathSetting.value.path && this._lastSelectedNodePathSetting.value.url === this._domTree.frame.url.hash)
-            WebInspector.domTreeManager.pushNodeByPathToFrontend(this._lastSelectedNodePathSetting.value.path, selectLastSelectedNode.bind(this));
-        else
-            selectNode.call(this);
-    },
-
-    _rootDOMNodeInvalidated: function(event)
-    {
-        this._requestRootDOMNode();
-    },
-
-    _requestRootDOMNode: function()
-    {
-        this._domTree.requestRootDOMNode(this._rootDOMNodeAvailable.bind(this));
-    },
-
-    _selectedNodeDidChange: function(event)
-    {
-        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
-        if (selectedDOMNode && !this._dontSetLastSelectedNodePath)
-            this._lastSelectedNodePathSetting.value = {url: this._domTree.frame.url.hash, path: selectedDOMNode.path()};
-
-        if (selectedDOMNode)
-            ConsoleAgent.addInspectedNode(selectedDOMNode.id);
-
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _pathComponentSelected: function(event)
-    {
-        console.assert(event.data.pathComponent instanceof WebInspector.DOMTreeElementPathComponent);
-        console.assert(event.data.pathComponent.domTreeElement instanceof WebInspector.DOMTreeElement);
-
-        this._domTreeOutline.selectDOMNode(event.data.pathComponent.domTreeElement.representedObject, true);
-    },
-
-    _domNodeChanged: function(event)
-    {
-        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
-        if (selectedDOMNode !== event.data.node)
-            return;
-
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _mouseWasClicked: function(event)
-    {
-        var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
-        if (!anchorElement || !anchorElement.href)
-            return;
-
-        // Prevent the link from navigating, since we don't do any navigation by following links normally.
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (WebInspector.isBeingEdited(anchorElement)) {
-            // Don't follow the link when it is being edited.
-            return;
-        }
-
-        // Cancel any pending link navigation.
-        if (this._followLinkTimeoutIdentifier) {
-            clearTimeout(this._followLinkTimeoutIdentifier);
-            delete this._followLinkTimeoutIdentifier;
-        }
-
-        // If this is a double-click (or multiple-click), return early.
-        if (event.detail > 1)
-            return;
-
-        function followLink()
-        {
-            // Since followLink is delayed, the call to WebInspector.openURL can't look at window.event
-            // to see if the command key is down like it normally would. So we need to do that check
-            // before calling WebInspector.openURL.
-            var alwaysOpenExternally = event ? event.metaKey : false;
-            WebInspector.openURL(anchorElement.href, this._frame, alwaysOpenExternally, anchorElement.lineNumber);
-        }
-
-        // Start a timeout since this is a single click, if the timeout is canceled before it fires,
-        // then a double-click happened or another link was clicked.
-        // FIXME: The duration might be longer or shorter than the user's configured double click speed.
-        this._followLinkTimeoutIdentifier = setTimeout(followLink.bind(this), 333);
-    },
-
-    _toggleCompositingBorders: function(event)
-    {
-        console.assert(PageAgent.setCompositingBordersVisible);
-
-        var activated = !this._compositingBordersButtonNavigationItem.activated;
-        this._compositingBordersButtonNavigationItem.activated = activated;
-        PageAgent.setCompositingBordersVisible(activated);
-    },
-    
-    _updateCompositingBordersButtonToMatchPageSettings: function()
-    {
-        if (!PageAgent.getCompositingBordersVisible)
-            return;
-
-        var button = this._compositingBordersButtonNavigationItem;
-
-        // We need to sync with the page settings since these can be controlled
-        // in a different way than just using the navigation bar button.
-        PageAgent.getCompositingBordersVisible(function(error, compositingBordersVisible) {
-            button.activated = error ? false : compositingBordersVisible;
-        });
-    },
-
-    _showShadowDOMSettingChanged: function(event)
-    {
-        this._showsShadowDOMButtonNavigationItem.activated = WebInspector.showShadowDOMSetting.value;
-    },
-
-    _toggleShowsShadowDOMSetting: function(event)
-    {
-        WebInspector.showShadowDOMSetting.value = !WebInspector.showShadowDOMSetting.value;
-    }
-};
-
-WebInspector.DOMTreeContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/DOMTreeElement.js
deleted file mode 100644
index d1af2ae68..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeElement.js
+++ /dev/null
@@ -1,1307 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @extends {TreeElement}
- * @param {boolean=} elementCloseTag
- */
-WebInspector.DOMTreeElement = function(node, elementCloseTag)
-{
-    this._elementCloseTag = elementCloseTag;
-    var hasChildrenOverride = !elementCloseTag && node.hasChildNodes() && !this._showInlineText(node);
-
-    // The title will be updated in onattach.
-    TreeElement.call(this, "", node, hasChildrenOverride);
-
-    if (this.representedObject.nodeType() == Node.ELEMENT_NODE && !elementCloseTag)
-        this._canAddAttributes = true;
-    this._searchQuery = null;
-    this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
-}
-
-WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
-WebInspector.DOMTreeElement.MaximumInlineTextChildLength = 80;
-
-// A union of HTML4 and HTML5-Draft elements that explicitly
-// or implicitly (for HTML5) forbid the closing tag.
-// FIXME: Revise once HTML5 Final is published.
-WebInspector.DOMTreeElement.ForbiddenClosingTagElements = [
-    "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
-    "hr", "img", "input", "isindex", "keygen", "link", "meta", "param", "source"
-].keySet();
-
-// These tags we do not allow editing their tag name.
-WebInspector.DOMTreeElement.EditTagBlacklist = [
-    "html", "head", "body"
-].keySet();
-
-WebInspector.DOMTreeElement.prototype = {
-    isCloseTag: function()
-    {
-        return this._elementCloseTag;
-    },
-
-    highlightSearchResults: function(searchQuery)
-    {
-        if (this._searchQuery !== searchQuery) {
-            this._updateSearchHighlight(false);
-            delete this._highlightResult; // A new search query.
-        }
-
-        this._searchQuery = searchQuery;
-        this._searchHighlightsVisible = true;
-        this.updateTitle(true);
-    },
-
-    hideSearchHighlights: function()
-    {
-        delete this._searchHighlightsVisible;
-        this._updateSearchHighlight(false);
-    },
-
-    _updateSearchHighlight: function(show)
-    {
-        if (!this._highlightResult)
-            return;
-
-        function updateEntryShow(entry)
-        {
-            switch (entry.type) {
-                case "added":
-                    entry.parent.insertBefore(entry.node, entry.nextSibling);
-                    break;
-                case "changed":
-                    entry.node.textContent = entry.newText;
-                    break;
-            }
-        }
-
-        function updateEntryHide(entry)
-        {
-            switch (entry.type) {
-                case "added":
-                    if (entry.node.parentElement)
-                        entry.node.parentElement.removeChild(entry.node);
-                    break;
-                case "changed":
-                    entry.node.textContent = entry.oldText;
-                    break;
-            }
-        }
-
-        var updater = show ? updateEntryShow : updateEntryHide;
-
-        for (var i = 0, size = this._highlightResult.length; i < size; ++i)
-            updater(this._highlightResult[i]);
-    },
-
-    get hovered()
-    {
-        return this._hovered;
-    },
-
-    set hovered(x)
-    {
-        if (this._hovered === x)
-            return;
-
-        this._hovered = x;
-
-        if (this.listItemElement) {
-            if (x) {
-                this.updateSelection();
-                this.listItemElement.classList.add("hovered");
-            } else {
-                this.listItemElement.classList.remove("hovered");
-            }
-        }
-    },
-
-    get expandedChildrenLimit()
-    {
-        return this._expandedChildrenLimit;
-    },
-
-    set expandedChildrenLimit(x)
-    {
-        if (this._expandedChildrenLimit === x)
-            return;
-
-        this._expandedChildrenLimit = x;
-        if (this.treeOutline && !this._updateChildrenInProgress)
-            this._updateChildren(true);
-    },
-
-    get expandedChildCount()
-    {
-        var count = this.children.length;
-        if (count && this.children[count - 1]._elementCloseTag)
-            count--;
-        if (count && this.children[count - 1].expandAllButton)
-            count--;
-        return count;
-    },
-
-    showChild: function(index)
-    {
-        if (this._elementCloseTag)
-            return;
-
-        if (index >= this.expandedChildrenLimit) {
-            this._expandedChildrenLimit = index + 1;
-            this._updateChildren(true);
-        }
-
-        // Whether index-th child is visible in the children tree
-        return this.expandedChildCount > index;
-    },
-
-    _createTooltipForNode: function()
-    {
-        var node = /** @type {WebInspector.DOMNode} */ this.representedObject;
-        if (!node.nodeName() || node.nodeName().toLowerCase() !== "img")
-            return;
-
-        function setTooltip(result)
-        {
-            if (!result || result.type !== "string")
-                return;
-
-            try {
-                var properties = JSON.parse(result.description);
-                var offsetWidth = properties[0];
-                var offsetHeight = properties[1];
-                var naturalWidth = properties[2];
-                var naturalHeight = properties[3];
-                if (offsetHeight === naturalHeight && offsetWidth === naturalWidth)
-                    this.tooltip = WebInspector.UIString("%d \xd7 %d pixels").format(offsetWidth, offsetHeight);
-                else
-                    this.tooltip = WebInspector.UIString("%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)").format(offsetWidth, offsetHeight, naturalWidth, naturalHeight);
-            } catch (e) {
-                console.error(e);
-            }
-        }
-
-        function resolvedNode(object)
-        {
-            if (!object)
-                return;
-
-            function dimensions()
-            {
-                return "[" + this.offsetWidth + "," + this.offsetHeight + "," + this.naturalWidth + "," + this.naturalHeight + "]";
-            }
-
-            object.callFunction(dimensions, undefined, setTooltip.bind(this));
-            object.release();
-        }
-        WebInspector.RemoteObject.resolveNode(node, "", resolvedNode.bind(this));
-    },
-
-    updateSelection: function()
-    {
-        var listItemElement = this.listItemElement;
-        if (!listItemElement)
-            return;
-
-        if (document.body.offsetWidth <= 0) {
-            // The stylesheet hasn't loaded yet or the window is closed,
-            // so we can't calculate what is need. Return early.
-            return;
-        }
-
-        if (!this.selectionElement) {
-            this.selectionElement = document.createElement("div");
-            this.selectionElement.className = "selection selected";
-            listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
-        }
-
-        this.selectionElement.style.height = listItemElement.offsetHeight + "px";
-    },
-
-    onattach: function()
-    {
-        if (this._hovered) {
-            this.updateSelection();
-            this.listItemElement.classList.add("hovered");
-        }
-
-        this.updateTitle();
-        this.listItemElement.draggable = true;
-    },
-
-    onpopulate: function()
-    {
-        if (this.children.length || this._showInlineText(this.representedObject) || this._elementCloseTag)
-            return;
-
-        this.updateChildren();
-    },
-
-    expandRecursively: function()
-    {
-        function callback()
-        {
-            TreeElement.prototype.expandRecursively.call(this, Number.MAX_VALUE);
-        }
-
-        this.representedObject.getSubtree(-1, callback.bind(this));
-    },
-
-    /**
-     * @param {boolean=} fullRefresh
-     */
-    updateChildren: function(fullRefresh)
-    {
-        if (this._elementCloseTag)
-            return;
-        this.representedObject.getChildNodes(this._updateChildren.bind(this, fullRefresh));
-    },
-
-    /**
-     * @param {boolean=} closingTag
-     */
-    insertChildElement: function(child, index, closingTag)
-    {
-        var newElement = new WebInspector.DOMTreeElement(child, closingTag);
-        newElement.selectable = this.treeOutline._selectEnabled;
-        this.insertChild(newElement, index);
-        return newElement;
-    },
-
-    moveChild: function(child, targetIndex)
-    {
-        var wasSelected = child.selected;
-        this.removeChild(child);
-        this.insertChild(child, targetIndex);
-        if (wasSelected)
-            child.select();
-    },
-
-    /**
-     * @param {boolean=} fullRefresh
-     */
-    _updateChildren: function(fullRefresh)
-    {
-        if (this._updateChildrenInProgress || !this.treeOutline._visible)
-            return;
-
-        this._updateChildrenInProgress = true;
-        var selectedNode = this.treeOutline.selectedDOMNode();
-        var originalScrollTop = 0;
-        if (fullRefresh) {
-            var treeOutlineContainerElement = this.treeOutline.element.parentNode;
-            originalScrollTop = treeOutlineContainerElement.scrollTop;
-            var selectedTreeElement = this.treeOutline.selectedTreeElement;
-            if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
-                this.select();
-            this.removeChildren();
-        }
-
-        var treeElement = this;
-        var treeChildIndex = 0;
-        var elementToSelect;
-
-        function updateChildrenOfNode(node)
-        {
-            var treeOutline = treeElement.treeOutline;
-            var child = node.firstChild;
-            while (child) {
-                var currentTreeElement = treeElement.children[treeChildIndex];
-                if (!currentTreeElement || currentTreeElement.representedObject !== child) {
-                    // Find any existing element that is later in the children list.
-                    var existingTreeElement = null;
-                    for (var i = (treeChildIndex + 1), size = treeElement.expandedChildCount; i < size; ++i) {
-                        if (treeElement.children[i].representedObject === child) {
-                            existingTreeElement = treeElement.children[i];
-                            break;
-                        }
-                    }
-
-                    if (existingTreeElement && existingTreeElement.parent === treeElement) {
-                        // If an existing element was found and it has the same parent, just move it.
-                        treeElement.moveChild(existingTreeElement, treeChildIndex);
-                    } else {
-                        // No existing element found, insert a new element.
-                        if (treeChildIndex < treeElement.expandedChildrenLimit) {
-                            var newElement = treeElement.insertChildElement(child, treeChildIndex);
-                            if (child === selectedNode)
-                                elementToSelect = newElement;
-                            if (treeElement.expandedChildCount > treeElement.expandedChildrenLimit)
-                                treeElement.expandedChildrenLimit++;
-                        }
-                    }
-                }
-
-                child = child.nextSibling;
-                ++treeChildIndex;
-            }
-        }
-
-        // Remove any tree elements that no longer have this node (or this node's contentDocument) as their parent.
-        for (var i = (this.children.length - 1); i >= 0; --i) {
-            var currentChild = this.children[i];
-            var currentNode = currentChild.representedObject;
-            var currentParentNode = currentNode.parentNode;
-
-            if (currentParentNode === this.representedObject)
-                continue;
-
-            var selectedTreeElement = this.treeOutline.selectedTreeElement;
-            if (selectedTreeElement && (selectedTreeElement === currentChild || selectedTreeElement.hasAncestor(currentChild)))
-                this.select();
-
-            this.removeChildAtIndex(i);
-        }
-
-        updateChildrenOfNode(this.representedObject);
-        this.adjustCollapsedRange();
-
-        var lastChild = this.children.lastValue;
-        if (this.representedObject.nodeType() == Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
-            this.insertChildElement(this.representedObject, this.children.length, true);
-
-        // We want to restore the original selection and tree scroll position after a full refresh, if possible.
-        if (fullRefresh && elementToSelect) {
-            elementToSelect.select();
-            if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
-                treeOutlineContainerElement.scrollTop = originalScrollTop;
-        }
-
-        delete this._updateChildrenInProgress;
-    },
-
-    adjustCollapsedRange: function()
-    {
-        // Ensure precondition: only the tree elements for node children are found in the tree
-        // (not the Expand All button or the closing tag).
-        if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
-            this.removeChild(this.expandAllButtonElement.__treeElement);
-
-        const node = this.representedObject;
-        if (!node.children)
-            return;
-        const childNodeCount = node.children.length;
-
-        // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
-        for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, childNodeCount); i < limit; ++i)
-            this.insertChildElement(node.children[i], i);
-
-        const expandedChildCount = this.expandedChildCount;
-        if (childNodeCount > this.expandedChildCount) {
-            var targetButtonIndex = expandedChildCount;
-            if (!this.expandAllButtonElement) {
-                var button = document.createElement("button");
-                button.className = "show-all-nodes";
-                button.value = "";
-                var item = new TreeElement(button, null, false);
-                item.selectable = false;
-                item.expandAllButton = true;
-                this.insertChild(item, targetButtonIndex);
-                this.expandAllButtonElement = item.listItemElement.firstChild;
-                this.expandAllButtonElement.__treeElement = item;
-                this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
-            } else if (!this.expandAllButtonElement.__treeElement.parent)
-                this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
-            this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)").format(childNodeCount - expandedChildCount);
-        } else if (this.expandAllButtonElement)
-            delete this.expandAllButtonElement;
-    },
-
-    handleLoadAllChildren: function()
-    {
-        this.expandedChildrenLimit = Math.max(this.representedObject.childNodeCount, this.expandedChildrenLimit + WebInspector.DOMTreeElement.InitialChildrenLimit);
-    },
-
-    onexpand: function()
-    {
-        if (this._elementCloseTag)
-            return;
-
-        this.updateTitle();
-        this.treeOutline.updateSelection();
-    },
-
-    oncollapse: function()
-    {
-        if (this._elementCloseTag)
-            return;
-
-        this.updateTitle();
-        this.treeOutline.updateSelection();
-    },
-
-    onreveal: function()
-    {
-        if (this.listItemElement) {
-            var tagSpans = this.listItemElement.getElementsByClassName("html-tag-name");
-            if (tagSpans.length)
-                tagSpans[0].scrollIntoViewIfNeeded(false);
-            else
-                this.listItemElement.scrollIntoViewIfNeeded(false);
-        }
-    },
-
-    onselect: function(treeElement, selectedByUser)
-    {
-        this.treeOutline.suppressRevealAndSelect = true;
-        this.treeOutline.selectDOMNode(this.representedObject, selectedByUser);
-        if (selectedByUser)
-            WebInspector.domTreeManager.highlightDOMNode(this.representedObject.id);
-        this.updateSelection();
-        this.treeOutline.suppressRevealAndSelect = false;
-    },
-
-    ondelete: function()
-    {
-        var startTagTreeElement = this.treeOutline.findTreeElement(this.representedObject);
-        startTagTreeElement ? startTagTreeElement.remove() : this.remove();
-        return true;
-    },
-
-    onenter: function()
-    {
-        // On Enter or Return start editing the first attribute
-        // or create a new attribute on the selected element.
-        if (this.treeOutline.editing)
-            return false;
-
-        this._startEditing();
-
-        // prevent a newline from being immediately inserted
-        return true;
-    },
-
-    selectOnMouseDown: function(event)
-    {
-        TreeElement.prototype.selectOnMouseDown.call(this, event);
-
-        if (this._editing)
-            return;
-
-        // Prevent selecting the nearest word on double click.
-        if (event.detail >= 2)
-            event.preventDefault();
-    },
-
-    ondblclick: function(event)
-    {
-        if (this._editing || this._elementCloseTag)
-            return;
-
-        if (this._startEditingTarget(event.target))
-            return;
-
-        if (this.hasChildren && !this.expanded)
-            this.expand();
-    },
-
-    _insertInLastAttributePosition: function(tag, node)
-    {
-        if (tag.getElementsByClassName("html-attribute").length > 0)
-            tag.insertBefore(node, tag.lastChild);
-        else {
-            var nodeName = tag.textContent.match(/^<(.*?)>$/)[1];
-            tag.textContent = '';
-            tag.appendChild(document.createTextNode('<'+nodeName));
-            tag.appendChild(node);
-            tag.appendChild(document.createTextNode('>'));
-        }
-
-        this.updateSelection();
-    },
-
-    _startEditingTarget: function(eventTarget)
-    {
-        if (this.treeOutline.selectedDOMNode() != this.representedObject)
-            return;
-
-        if (this.representedObject.nodeType() != Node.ELEMENT_NODE && this.representedObject.nodeType() != Node.TEXT_NODE)
-            return false;
-
-        var textNode = eventTarget.enclosingNodeOrSelfWithClass("html-text-node");
-        if (textNode)
-            return this._startEditingTextNode(textNode);
-
-        var attribute = eventTarget.enclosingNodeOrSelfWithClass("html-attribute");
-        if (attribute)
-            return this._startEditingAttribute(attribute, eventTarget);
-
-        var tagName = eventTarget.enclosingNodeOrSelfWithClass("html-tag-name");
-        if (tagName)
-            return this._startEditingTagName(tagName);
-
-        var newAttribute = eventTarget.enclosingNodeOrSelfWithClass("add-attribute");
-        if (newAttribute)
-            return this._addNewAttribute();
-
-        return false;
-    },
-
-    _populateTagContextMenu: function(contextMenu, event)
-    {
-        var attribute = event.target.enclosingNodeOrSelfWithClass("html-attribute");
-        var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
-
-        // Add attribute-related actions.
-        contextMenu.appendItem(WebInspector.UIString("Add Attribute"), this._addNewAttribute.bind(this));
-        if (attribute && !newAttribute)
-            contextMenu.appendItem(WebInspector.UIString("Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
-        contextMenu.appendSeparator();
-
-        if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
-            var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Forced Pseudo-Classes"));
-            this._populateForcedPseudoStateItems(pseudoSubMenu);
-            contextMenu.appendSeparator();
-        }
-
-        this._populateNodeContextMenu(contextMenu);
-        this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
-    },
-
-    _populateForcedPseudoStateItems: function(subMenu)
-    {
-        var node = this.representedObject;
-        var enabledPseudoClasses = node.enabledPseudoClasses;
-        // These strings don't need to be localized as they are CSS pseudo-classes.
-        WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
-            var label = pseudoClass.capitalize();
-            var enabled = enabledPseudoClasses.contains(pseudoClass);
-            subMenu.appendCheckboxItem(label, function() {
-                node.setPseudoClassEnabled(pseudoClass, !enabled);
-            }, enabled, false);
-        });
-    },
-
-    _populateTextContextMenu: function(contextMenu, textNode)
-    {
-        contextMenu.appendItem(WebInspector.UIString("Edit Text"), this._startEditingTextNode.bind(this, textNode));
-        this._populateNodeContextMenu(contextMenu);
-    },
-
-    _populateNodeContextMenu: function(contextMenu)
-    {
-        // Add free-form node-related actions.
-        contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
-        contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
-        contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
-    },
-
-    _startEditing: function()
-    {
-        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
-            return;
-
-        var listItem = this._listItemNode;
-
-        if (this._canAddAttributes) {
-            var attribute = listItem.getElementsByClassName("html-attribute")[0];
-            if (attribute)
-                return this._startEditingAttribute(attribute, attribute.getElementsByClassName("html-attribute-value")[0]);
-
-            return this._addNewAttribute();
-        }
-
-        if (this.representedObject.nodeType() === Node.TEXT_NODE) {
-            var textNode = listItem.getElementsByClassName("html-text-node")[0];
-            if (textNode)
-                return this._startEditingTextNode(textNode);
-            return;
-        }
-    },
-
-    _addNewAttribute: function()
-    {
-        // Cannot just convert the textual html into an element without
-        // a parent node. Use a temporary span container for the HTML.
-        var container = document.createElement("span");
-        this._buildAttributeDOM(container, " ", "");
-        var attr = container.firstChild;
-        attr.style.marginLeft = "2px"; // overrides the .editing margin rule
-        attr.style.marginRight = "2px"; // overrides the .editing margin rule
-
-        var tag = this.listItemElement.getElementsByClassName("html-tag")[0];
-        this._insertInLastAttributePosition(tag, attr);
-        return this._startEditingAttribute(attr, attr);
-    },
-
-    _triggerEditAttribute: function(attributeName)
-    {
-        var attributeElements = this.listItemElement.getElementsByClassName("html-attribute-name");
-        for (var i = 0, len = attributeElements.length; i < len; ++i) {
-            if (attributeElements[i].textContent === attributeName) {
-                for (var elem = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) {
-                    if (elem.nodeType !== Node.ELEMENT_NODE)
-                        continue;
-
-                    if (elem.classList.contains("html-attribute-value"))
-                        return this._startEditingAttribute(elem.parentNode, elem);
-                }
-            }
-        }
-    },
-
-    _startEditingAttribute: function(attribute, elementForSelection)
-    {
-        if (WebInspector.isBeingEdited(attribute))
-            return true;
-
-        var attributeNameElement = attribute.getElementsByClassName("html-attribute-name")[0];
-        if (!attributeNameElement)
-            return false;
-
-        var attributeName = attributeNameElement.textContent;
-
-        function removeZeroWidthSpaceRecursive(node)
-        {
-            if (node.nodeType === Node.TEXT_NODE) {
-                node.nodeValue = node.nodeValue.replace(/\u200B/g, "");
-                return;
-            }
-
-            if (node.nodeType !== Node.ELEMENT_NODE)
-                return;
-
-            for (var child = node.firstChild; child; child = child.nextSibling)
-                removeZeroWidthSpaceRecursive(child);
-        }
-
-        // Remove zero-width spaces that were added by nodeTitleInfo.
-        removeZeroWidthSpaceRecursive(attribute);
-
-        var config = new WebInspector.EditingConfig(this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
-        this._editing = WebInspector.startEditing(attribute, config);
-
-        window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
-
-        return true;
-    },
-
-    _startEditingTextNode: function(textNode)
-    {
-        if (WebInspector.isBeingEdited(textNode))
-            return true;
-
-        var config = new WebInspector.EditingConfig(this._textNodeEditingCommitted.bind(this), this._editingCancelled.bind(this));
-        config.spellcheck = true;
-        this._editing = WebInspector.startEditing(textNode, config);
-        window.getSelection().setBaseAndExtent(textNode, 0, textNode, 1);
-
-        return true;
-    },
-
-    _startEditingTagName: function(tagNameElement)
-    {
-        if (!tagNameElement) {
-            tagNameElement = this.listItemElement.getElementsByClassName("html-tag-name")[0];
-            if (!tagNameElement)
-                return false;
-        }
-
-        var tagName = tagNameElement.textContent;
-        if (WebInspector.DOMTreeElement.EditTagBlacklist[tagName.toLowerCase()])
-            return false;
-
-        if (WebInspector.isBeingEdited(tagNameElement))
-            return true;
-
-        var closingTagElement = this._distinctClosingTagElement();
-
-        function keyupListener(event)
-        {
-            if (closingTagElement)
-                closingTagElement.textContent = "</" + tagNameElement.textContent + ">";
-        }
-
-        function editingComitted(element, newTagName)
-        {
-            tagNameElement.removeEventListener('keyup', keyupListener, false);
-            this._tagNameEditingCommitted.apply(this, arguments);
-        }
-
-        function editingCancelled()
-        {
-            tagNameElement.removeEventListener('keyup', keyupListener, false);
-            this._editingCancelled.apply(this, arguments);
-        }
-
-        tagNameElement.addEventListener('keyup', keyupListener, false);
-
-        var config = new WebInspector.EditingConfig(editingComitted.bind(this), editingCancelled.bind(this), tagName);
-        this._editing = WebInspector.startEditing(tagNameElement, config);
-        window.getSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
-        return true;
-    },
-
-    _startEditingAsHTML: function(commitCallback, error, initialValue)
-    {
-        if (error)
-            return;
-        if (this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement))
-            return;
-
-        this._htmlEditElement = document.createElement("div");
-        this._htmlEditElement.className = "source-code elements-tree-editor";
-        this._htmlEditElement.textContent = initialValue;
-
-        // Hide header items.
-        var child = this.listItemElement.firstChild;
-        while (child) {
-            child.style.display = "none";
-            child = child.nextSibling;
-        }
-        // Hide children item.
-        if (this._childrenListNode)
-            this._childrenListNode.style.display = "none";
-        // Append editor.
-        this.listItemElement.appendChild(this._htmlEditElement);
-
-        this.updateSelection();
-
-        function commit()
-        {
-            commitCallback(this._htmlEditElement.textContent);
-            dispose.call(this);
-        }
-
-        function dispose()
-        {
-            this._editing = false;
-
-            // Remove editor.
-            this.listItemElement.removeChild(this._htmlEditElement);
-            delete this._htmlEditElement;
-            // Unhide children item.
-            if (this._childrenListNode)
-                this._childrenListNode.style.removeProperty("display");
-            // Unhide header items.
-            var child = this.listItemElement.firstChild;
-            while (child) {
-                child.style.removeProperty("display");
-                child = child.nextSibling;
-            }
-
-            this.updateSelection();
-        }
-
-        var config = new WebInspector.EditingConfig(commit.bind(this), dispose.bind(this));
-        config.setMultiline(true);
-        this._editing = WebInspector.startEditing(this._htmlEditElement, config);
-    },
-
-    _attributeEditingCommitted: function(element, newText, oldText, attributeName, moveDirection)
-    {
-        this._editing = false;
-
-        var treeOutline = this.treeOutline;
-        function moveToNextAttributeIfNeeded(error)
-        {
-            if (error)
-                this._editingCancelled(element, attributeName);
-
-            if (!moveDirection)
-                return;
-
-            treeOutline._updateModifiedNodes();
-
-            // Search for the attribute's position, and then decide where to move to.
-            var attributes = this.representedObject.attributes();
-            for (var i = 0; i < attributes.length; ++i) {
-                if (attributes[i].name !== attributeName)
-                    continue;
-
-                if (moveDirection === "backward") {
-                    if (i === 0)
-                        this._startEditingTagName();
-                    else
-                        this._triggerEditAttribute(attributes[i - 1].name);
-                } else {
-                    if (i === attributes.length - 1)
-                        this._addNewAttribute();
-                    else
-                        this._triggerEditAttribute(attributes[i + 1].name);
-                }
-                return;
-            }
-
-            // Moving From the "New Attribute" position.
-            if (moveDirection === "backward") {
-                if (newText === " ") {
-                    // Moving from "New Attribute" that was not edited
-                    if (attributes.length)
-                        this._triggerEditAttribute(attributes.lastValue.name);
-                } else {
-                    // Moving from "New Attribute" that holds new value
-                    if (attributes.length > 1)
-                        this._triggerEditAttribute(attributes[attributes.length - 2].name);
-                }
-            } else if (moveDirection === "forward") {
-                if (!/^\s*$/.test(newText))
-                    this._addNewAttribute();
-                else
-                    this._startEditingTagName();
-            }
-        }
-
-        this.representedObject.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
-    },
-
-    _tagNameEditingCommitted: function(element, newText, oldText, tagName, moveDirection)
-    {
-        this._editing = false;
-        var self = this;
-
-        function cancel()
-        {
-            var closingTagElement = self._distinctClosingTagElement();
-            if (closingTagElement)
-                closingTagElement.textContent = "</" + tagName + ">";
-
-            self._editingCancelled(element, tagName);
-            moveToNextAttributeIfNeeded.call(self);
-        }
-
-        function moveToNextAttributeIfNeeded()
-        {
-            if (moveDirection !== "forward") {
-                this._addNewAttribute();
-                return;
-            }
-
-            var attributes = this.representedObject.attributes();
-            if (attributes.length > 0)
-                this._triggerEditAttribute(attributes[0].name);
-            else
-                this._addNewAttribute();
-        }
-
-        newText = newText.trim();
-        if (newText === oldText) {
-            cancel();
-            return;
-        }
-
-        var treeOutline = this.treeOutline;
-        var wasExpanded = this.expanded;
-
-        function changeTagNameCallback(error, nodeId)
-        {
-            if (error || !nodeId) {
-                cancel();
-                return;
-            }
-
-            var node = WebInspector.domTreeManager.nodeForId(nodeId);
-
-            // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
-            treeOutline._updateModifiedNodes();
-            treeOutline.selectDOMNode(node, true);
-
-            var newTreeItem = treeOutline.findTreeElement(node);
-            if (wasExpanded)
-                newTreeItem.expand();
-
-            moveToNextAttributeIfNeeded.call(newTreeItem);
-        }
-
-        this.representedObject.setNodeName(newText, changeTagNameCallback);
-    },
-
-    _textNodeEditingCommitted: function(element, newText)
-    {
-        this._editing = false;
-
-        var textNode;
-        if (this.representedObject.nodeType() === Node.ELEMENT_NODE) {
-            // We only show text nodes inline in elements if the element only
-            // has a single child, and that child is a text node.
-            textNode = this.representedObject.firstChild;
-        } else if (this.representedObject.nodeType() == Node.TEXT_NODE)
-            textNode = this.representedObject;
-
-        textNode.setNodeValue(newText, this.updateTitle.bind(this));
-    },
-
-    _editingCancelled: function(element, context)
-    {
-        this._editing = false;
-
-        // Need to restore attributes structure.
-        this.updateTitle();
-    },
-
-    _distinctClosingTagElement: function()
-    {
-        // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM
-
-        // For an expanded element, it will be the last element with class "close"
-        // in the child element list.
-        if (this.expanded) {
-            var closers = this._childrenListNode.querySelectorAll(".close");
-            return closers[closers.length-1];
-        }
-
-        // Remaining cases are single line non-expanded elements with a closing
-        // tag, or HTML elements without a closing tag (such as <br>). Return
-        // null in the case where there isn't a closing tag.
-        var tags = this.listItemElement.getElementsByClassName("html-tag");
-        return (tags.length === 1 ? null : tags[tags.length-1]);
-    },
-
-    /**
-     * @param {boolean=} onlySearchQueryChanged
-     */
-    updateTitle: function(onlySearchQueryChanged)
-    {
-        // If we are editing, return early to prevent canceling the edit.
-        // After editing is committed updateTitle will be called.
-        if (this._editing)
-            return;
-
-        if (onlySearchQueryChanged) {
-            if (this._highlightResult)
-                this._updateSearchHighlight(false);
-        } else {
-            var highlightElement = document.createElement("span");
-            highlightElement.className = "highlight";
-            highlightElement.appendChild(this._nodeTitleInfo().titleDOM);
-            this.title = highlightElement;
-            delete this._highlightResult;
-        }
-
-        delete this.selectionElement;
-        this.updateSelection();
-        this._highlightSearchResults();
-    },
-
-    /**
-     * @param {WebInspector.DOMNode=} node
-     */
-    _buildAttributeDOM: function(parentElement, name, value, node)
-    {
-        var hasText = (value.length > 0);
-        var attrSpanElement = parentElement.createChild("span", "html-attribute");
-        var attrNameElement = attrSpanElement.createChild("span", "html-attribute-name");
-        attrNameElement.textContent = name;
-
-        if (hasText)
-            attrSpanElement.appendChild(document.createTextNode("=\u200B\""));
-
-        if (name === "src" || name === "href") {
-            var baseURL = node.ownerDocument ? node.ownerDocument.documentURL : null;
-            var rewrittenURL = absoluteURL(value, baseURL);
-
-            value = value.insertWordBreakCharacters();
-
-            if (!rewrittenURL) {
-                var attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
-                attrValueElement.textContent = value;
-            } else {
-                if (value.startsWith("data:"))
-                    value = value.trimMiddle(60);
-
-                var linkElement = document.createElement("a");
-                linkElement.href = rewrittenURL;
-                linkElement.textContent = value;
-
-                attrSpanElement.appendChild(linkElement);
-            }
-        } else {
-            value = value.insertWordBreakCharacters();
-            var attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
-            attrValueElement.textContent = value;
-        }
-
-        if (hasText)
-            attrSpanElement.appendChild(document.createTextNode("\""));
-    },
-
-    _buildTagDOM: function(parentElement, tagName, isClosingTag, isDistinctTreeElement)
-    {
-        var node = /** @type WebInspector.DOMNode */ this.representedObject;
-        var classes = [ "html-tag" ];
-        if (isClosingTag && isDistinctTreeElement)
-            classes.push("close");
-        if (node.isInShadowTree())
-            classes.push("shadow");
-        var tagElement = parentElement.createChild("span", classes.join(" "));
-        tagElement.appendChild(document.createTextNode("<"));
-        var tagNameElement = tagElement.createChild("span", isClosingTag ? "" : "html-tag-name");
-        tagNameElement.textContent = (isClosingTag ? "/" : "") + tagName;
-        if (!isClosingTag && node.hasAttributes()) {
-            var attributes = node.attributes();
-            for (var i = 0; i < attributes.length; ++i) {
-                var attr = attributes[i];
-                tagElement.appendChild(document.createTextNode(" "));
-                this._buildAttributeDOM(tagElement, attr.name, attr.value, node);
-            }
-        }
-        tagElement.appendChild(document.createTextNode(">"));
-        parentElement.appendChild(document.createTextNode("\u200B"));
-    },
-
-    _nodeTitleInfo: function()
-    {
-        var node = this.representedObject;
-        var info = {titleDOM: document.createDocumentFragment(), hasChildren: this.hasChildren};
-
-        switch (node.nodeType()) {
-            case Node.DOCUMENT_FRAGMENT_NODE:
-                var fragmentElement = info.titleDOM.createChild("span", "webkit-html-fragment");
-                if (node.isInShadowTree()) {
-                    fragmentElement.textContent = WebInspector.UIString("Shadow Content");
-                    fragmentElement.classList.add("shadow");
-                } else
-                    fragmentElement.textContent = WebInspector.UIString("Document Fragment");
-                break;
-
-            case Node.ATTRIBUTE_NODE:
-                var value = node.value || "\u200B"; // Zero width space to force showing an empty value.
-                this._buildAttributeDOM(info.titleDOM, node.name, value);
-                break;
-
-            case Node.ELEMENT_NODE:
-                var tagName = node.nodeNameInCorrectCase();
-                if (this._elementCloseTag) {
-                    this._buildTagDOM(info.titleDOM, tagName, true, true);
-                    info.hasChildren = false;
-                    break;
-                }
-
-                this._buildTagDOM(info.titleDOM, tagName, false, false);
-
-                var textChild = this._singleTextChild(node);
-                var showInlineText = textChild && textChild.nodeValue().length < WebInspector.DOMTreeElement.MaximumInlineTextChildLength;
-
-                if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.DOMTreeElement.ForbiddenClosingTagElements[tagName]))) {
-                    if (this.hasChildren) {
-                        var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
-                        textNodeElement.textContent = "\u2026";
-                        info.titleDOM.appendChild(document.createTextNode("\u200B"));
-                    }
-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
-                }
-
-                // If this element only has a single child that is a text node,
-                // just show that text and the closing tag inline rather than
-                // create a subtree for them
-                if (showInlineText) {
-                    var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
-                    var nodeNameLowerCase = node.nodeName().toLowerCase();
-
-                    if (nodeNameLowerCase === "script")
-                        textNodeElement.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(textChild.nodeValue().trim(), "text/javascript"));
-                    else if (nodeNameLowerCase === "style")
-                        textNodeElement.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(textChild.nodeValue().trim(), "text/css"));
-                    else
-                        textNodeElement.textContent = textChild.nodeValue();
-
-                    info.titleDOM.appendChild(document.createTextNode("\u200B"));
-
-                    this._buildTagDOM(info.titleDOM, tagName, true, false);
-                    info.hasChildren = false;
-                }
-                break;
-
-            case Node.TEXT_NODE:
-                function trimedNodeValue()
-                {
-                    // Trim empty lines from the beginning and extra space at the end since most style and script tags begin with a newline
-                    // and end with a newline and indentation for the end tag.
-                    return node.nodeValue().replace(/^[\n\r]*/, "").replace(/\s*$/, "");
-                }
-
-                if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "script") {
-                    var newNode = info.titleDOM.createChild("span", "html-text-node large");
-                    newNode.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(trimedNodeValue(), "text/javascript"));
-                } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "style") {
-                    var newNode = info.titleDOM.createChild("span", "html-text-node large");
-                    newNode.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(trimedNodeValue(), "text/css"));
-                } else {
-                    info.titleDOM.appendChild(document.createTextNode("\""));
-                    var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
-                    textNodeElement.textContent = node.nodeValue();
-                    info.titleDOM.appendChild(document.createTextNode("\""));
-                }
-                break;
-
-            case Node.COMMENT_NODE:
-                var commentElement = info.titleDOM.createChild("span", "html-comment");
-                commentElement.appendChild(document.createTextNode("<!--" + node.nodeValue() + "-->"));
-                break;
-
-            case Node.DOCUMENT_TYPE_NODE:
-                var docTypeElement = info.titleDOM.createChild("span", "html-doctype");
-                docTypeElement.appendChild(document.createTextNode("<!DOCTYPE " + node.nodeName()));
-                if (node.publicId) {
-                    docTypeElement.appendChild(document.createTextNode(" PUBLIC \"" + node.publicId + "\""));
-                    if (node.systemId)
-                        docTypeElement.appendChild(document.createTextNode(" \"" + node.systemId + "\""));
-                } else if (node.systemId)
-                    docTypeElement.appendChild(document.createTextNode(" SYSTEM \"" + node.systemId + "\""));
-
-                if (node.internalSubset)
-                    docTypeElement.appendChild(document.createTextNode(" [" + node.internalSubset + "]"));
-
-                docTypeElement.appendChild(document.createTextNode(">"));
-                break;
-
-            case Node.CDATA_SECTION_NODE:
-                var cdataElement = info.titleDOM.createChild("span", "html-text-node");
-                cdataElement.appendChild(document.createTextNode("<![CDATA[" + node.nodeValue() + "]]>"));
-                break;
-            default:
-                var defaultElement = info.titleDOM.appendChild(document.createTextNode(node.nodeNameInCorrectCase().collapseWhitespace()));
-        }
-
-        return info;
-    },
-
-    _singleTextChild: function(node)
-    {
-        if (!node)
-            return null;
-
-        var firstChild = node.firstChild;
-        if (!firstChild || firstChild.nodeType() !== Node.TEXT_NODE)
-            return null;
-
-        if (node.hasShadowRoots())
-            return null;
-
-        var sibling = firstChild.nextSibling;
-        return sibling ? null : firstChild;
-    },
-
-    _showInlineText: function(node)
-    {
-        if (node.nodeType() === Node.ELEMENT_NODE) {
-            var textChild = this._singleTextChild(node);
-            if (textChild && textChild.nodeValue().length < WebInspector.DOMTreeElement.MaximumInlineTextChildLength)
-                return true;
-        }
-        return false;
-    },
-
-    remove: function()
-    {
-        var parentElement = this.parent;
-        if (!parentElement)
-            return;
-
-        var self = this;
-        function removeNodeCallback(error, removedNodeId)
-        {
-            if (error)
-                return;
-
-            if (!self.parent)
-                return;
-
-            parentElement.removeChild(self);
-            parentElement.adjustCollapsedRange();
-        }
-
-        this.representedObject.removeNode(removeNodeCallback);
-    },
-
-    _editAsHTML: function()
-    {
-        var treeOutline = this.treeOutline;
-        var node = this.representedObject;
-        var parentNode = node.parentNode;
-        var index = node.index;
-        var wasExpanded = this.expanded;
-
-        function selectNode(error, nodeId)
-        {
-            if (error)
-                return;
-
-            // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
-            treeOutline._updateModifiedNodes();
-
-            var newNode = parentNode ? parentNode.children[index] || parentNode : null;
-            if (!newNode)
-                return;
-
-            treeOutline.selectDOMNode(newNode, true);
-
-            if (wasExpanded) {
-                var newTreeItem = treeOutline.findTreeElement(newNode);
-                if (newTreeItem)
-                    newTreeItem.expand();
-            }
-        }
-
-        function commitChange(value)
-        {
-            node.setOuterHTML(value, selectNode);
-        }
-
-        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
-    },
-
-    _copyHTML: function()
-    {
-        this.representedObject.copyNode();
-    },
-
-    _highlightSearchResults: function()
-    {
-        if (!this._searchQuery || !this._searchHighlightsVisible)
-            return;
-        if (this._highlightResult) {
-            this._updateSearchHighlight(true);
-            return;
-        }
-
-        var text = this.listItemElement.textContent;
-        var regexObject = createPlainTextSearchRegex(this._searchQuery, "gi");
-
-        var offset = 0;
-        var match = regexObject.exec(text);
-        var matchRanges = [];
-        while (match) {
-            matchRanges.push({ offset: match.index, length: match[0].length });
-            match = regexObject.exec(text);
-        }
-
-        // Fall back for XPath, etc. matches.
-        if (!matchRanges.length)
-            matchRanges.push({ offset: 0, length: text.length });
-
-        this._highlightResult = [];
-        highlightSearchResults(this.listItemElement, matchRanges, this._highlightResult);
-    }
-}
-
-WebInspector.DOMTreeElement.prototype.__proto__ = TreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeElementPathComponent.js b/Source/WebInspectorUI/UserInterface/DOMTreeElementPathComponent.js
deleted file mode 100644
index 830af9cd6..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeElementPathComponent.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DOMTreeElementPathComponent = function(domTreeElement, representedObject) {
-    var node = domTreeElement.representedObject;
-
-    var title = null;
-    var className = null;
-
-    switch (node.nodeType()) {
-    case Node.ELEMENT_NODE:
-        className = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
-        title = WebInspector.displayNameForNode(node);
-        break;
-
-    case Node.TEXT_NODE:
-        className = WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName;
-        title = "\"" + node.nodeValue().trimEnd(32) + "\"";
-        break
-
-    case Node.COMMENT_NODE:
-        className = WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName;
-        title = "<!--" + node.nodeValue().trimEnd(32) + "-->";
-        break;
-
-    case Node.DOCUMENT_TYPE_NODE:
-        className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
-        title = "<!DOCTYPE>";
-        break;
-
-    case Node.DOCUMENT_NODE:
-        className = WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName;
-        title = node.nodeNameInCorrectCase();
-        break;
-
-    case Node.CDATA_SECTION_NODE:
-        className = WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName;
-        title = "<![CDATA[" + node.trimEnd(32) + "]]>";
-        break;
-
-    case Node.DOCUMENT_FRAGMENT_NODE:
-        // FIXME: At some point we might want a different icon for this.
-        // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE
-        className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
-        if (node.isInShadowTree())
-            title = WebInspector.UIString("Shadow Content");
-        else
-            title = WebInspector.displayNameForNode(node);
-        break;
-
-    default:
-        console.error("Unknown DOM node type: ", node.nodeType());
-        className = WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName;
-        title = node.nodeNameInCorrectCase();
-    }
-
-    WebInspector.HierarchicalPathComponent.call(this, title, className, representedObject || domTreeElement.representedObject);
-
-    this._domTreeElement = domTreeElement;
-};
-
-WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName = "dom-element-icon";
-WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName = "dom-text-node-icon";
-WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName = "dom-comment-icon";
-WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName = "dom-document-type-icon";
-WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName = "dom-document-icon";
-WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName = "dom-character-data-icon";
-WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName = "dom-node-icon";
-
-WebInspector.DOMTreeElementPathComponent.prototype = {
-    constructor: WebInspector.DOMTreeElementPathComponent,
-
-    // Public
-
-    get domTreeElement()
-    {
-        return this._domTreeElement;
-    },
-
-    get previousSibling()
-    {
-        if (!this._domTreeElement.previousSibling)
-            return null;
-        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.previousSibling);
-    },
-
-    get nextSibling()
-    {
-        if (!this._domTreeElement.nextSibling)
-            return null;
-        if (this._domTreeElement.nextSibling.isCloseTag())
-            return null;
-        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.nextSibling);
-    },
-
-    // Protected
-
-    mouseOver: function()
-    {
-        var nodeId = this._domTreeElement.representedObject.id;
-        WebInspector.domTreeManager.highlightDOMNode(nodeId);
-    },
-
-    mouseOut: function()
-    {
-        WebInspector.domTreeManager.hideDOMNodeHighlight();
-    }
-};
-
-WebInspector.DOMTreeElementPathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeManager.js b/Source/WebInspectorUI/UserInterface/DOMTreeManager.js
deleted file mode 100644
index 7544820a2..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeManager.js
+++ /dev/null
@@ -1,526 +0,0 @@
-/*
- * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
- * Copyright (C) 2009 Joseph Pecoraro
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @extends {WebInspector.Object}
- * @constructor
- */
-WebInspector.DOMTreeManager = function() {
-    /** @type {Object|undefined} */
-    this._idToDOMNode = {};
-    this._document = null;
-    this._attributeLoadNodeIds = {};
-}
-
-WebInspector.Object.addConstructorFunctions(WebInspector.DOMTreeManager);
-
-WebInspector.DOMTreeManager.Event = {
-    AttributeModified: "dom-tree-manager-attribute-modified",
-    AttributeRemoved: "dom-tree-manager-attribute-removed",
-    CharacterDataModified: "dom-tree-manager-character-data-modified",
-    NodeInserted: "dom-tree-manager-node-inserted",
-    NodeRemoved: "dom-tree-manager-node-removed",
-    DocumentUpdated: "dom-tree-manager-document-updated",
-    ChildNodeCountUpdated: "dom-tree-manager-child-node-count-updated",
-    DOMNodeWasInspected: "dom-tree-manager-dom-node-was-inspected",
-    InspectModeStateChanged: "dom-tree-manager-inspect-mode-state-changed"
-}
-
-WebInspector.DOMTreeManager.prototype = {
-    /**
-     * @param {function(WebInspector.DOMDocument)=} callback
-     */
-    requestDocument: function(callback)
-    {
-        if (this._document) {
-            if (callback)
-                callback(this._document);
-            return;
-        }
-
-        if (this._pendingDocumentRequestCallbacks) {
-            this._pendingDocumentRequestCallbacks.push(callback);
-            return;
-        }
-
-        this._pendingDocumentRequestCallbacks = [callback];
-
-        /**
-         * @this {WebInspector.DOMTreeManager}
-         * @param {?Protocol.Error} error
-         * @param {DOMAgent.Node} root
-         */
-        function onDocumentAvailable(error, root)
-        {
-            if (!error)
-                this._setDocument(root);
-
-            for (var i = 0; i < this._pendingDocumentRequestCallbacks.length; ++i) {
-                var callback = this._pendingDocumentRequestCallbacks[i];
-                if (callback)
-                    callback(this._document);
-            }
-            delete this._pendingDocumentRequestCallbacks;
-        }
-
-        DOMAgent.getDocument(onDocumentAvailable.bind(this));
-    },
-
-    /**
-     * @param {RuntimeAgent.RemoteObjectId} objectId
-     * @param {function()=} callback
-     */
-    pushNodeToFrontend: function(objectId, callback)
-    {
-        this._dispatchWhenDocumentAvailable(DOMAgent.requestNode.bind(DOMAgent, objectId), callback);
-    },
-
-    /**
-     * @param {string} path
-     * @param {function(?WebInspector.DOMNode)=} callback
-     */
-    pushNodeByPathToFrontend: function(path, callback)
-    {
-        var callbackCast = /** @type {function(*)} */ callback;
-        this._dispatchWhenDocumentAvailable(DOMAgent.pushNodeByPathToFrontend.bind(DOMAgent, path), callbackCast);
-    },
-
-    /**
-     * @param {function(*)=} callback
-     * @return {function(?Protocol.Error,*=)|undefined}
-     */
-    _wrapClientCallback: function(callback)
-    {
-        if (!callback)
-            return;
-        return function(error, result)
-        {
-            if (error)
-                console.error("Error during DOMAgent operation: " + error);
-            callback(error ? null : result);
-        }
-    },
-
-    /**
-     * @param {function(function()=)} func
-     * @param {function(*)=} callback
-     */
-    _dispatchWhenDocumentAvailable: function(func, callback)
-    {
-        var callbackWrapper = /** @type {function(?Protocol.Error, *=)} */ this._wrapClientCallback(callback);
-
-        function onDocumentAvailable()
-        {
-            if (this._document)
-                func(callbackWrapper);
-            else {
-                if (callbackWrapper)
-                    callbackWrapper("No document");
-            }
-        }
-        this.requestDocument(onDocumentAvailable.bind(this));
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     * @param {string} name
-     * @param {string} value
-     */
-    _attributeModified: function(nodeId, name, value)
-    {
-        var node = this._idToDOMNode[nodeId];
-        if (!node)
-            return;
-        node._setAttribute(name, value);
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeModified, { node: node, name: name });
-        node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeModified, {name: name});
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     * @param {string} name
-     */
-    _attributeRemoved: function(nodeId, name)
-    {
-        var node = this._idToDOMNode[nodeId];
-        if (!node)
-            return;
-        node._removeAttribute(name);
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeRemoved, { node: node, name: name });
-        node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeRemoved, {name: name});
-    },
-
-    /**
-     * @param {Array.<DOMAgent.NodeId>} nodeIds
-     */
-    _inlineStyleInvalidated: function(nodeIds)
-    {
-        for (var i = 0; i < nodeIds.length; ++i)
-            this._attributeLoadNodeIds[nodeIds[i]] = true;
-        if ("_loadNodeAttributesTimeout" in this)
-            return;
-        this._loadNodeAttributesTimeout = setTimeout(this._loadNodeAttributes.bind(this), 0);
-    },
-
-    _loadNodeAttributes: function()
-    {
-        /**
-         * @this {WebInspector.DOMTreeManager}
-         * @param {DOMAgent.NodeId} nodeId
-         * @param {?Protocol.Error} error
-         * @param {Array.<string>} attributes
-         */
-        function callback(nodeId, error, attributes)
-        {
-            if (error) {
-                console.error("Error during DOMAgent operation: " + error);
-                return;
-            }
-            var node = this._idToDOMNode[nodeId];
-            if (node) {
-                node._setAttributesPayload(attributes);
-                this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.AttributeModified, { node: node, name: "style" });
-                node.dispatchEventToListeners(WebInspector.DOMNode.Event.AttributeModified, {name: "style"});
-            }
-        }
-
-        delete this._loadNodeAttributesTimeout;
-
-        for (var nodeId in this._attributeLoadNodeIds) {
-            var nodeIdAsNumber = parseInt(nodeId, 10);
-            DOMAgent.getAttributes(nodeIdAsNumber, callback.bind(this, nodeIdAsNumber));
-        }
-        this._attributeLoadNodeIds = {};
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     * @param {string} newValue
-     */
-    _characterDataModified: function(nodeId, newValue)
-    {
-        var node = this._idToDOMNode[nodeId];
-        node._nodeValue = newValue;
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.CharacterDataModified, {node: node});
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     * @return {WebInspector.DOMNode|undefined}
-     */
-    nodeForId: function(nodeId)
-    {
-        return this._idToDOMNode[nodeId];
-    },
-
-    _documentUpdated: function()
-    {
-        this._setDocument(null);
-    },
-
-    /**
-     * @param {DOMAgent.Node} payload
-     */
-    _setDocument: function(payload)
-    {
-        this._idToDOMNode = {};
-        if (payload && "nodeId" in payload)
-            this._document = new WebInspector.DOMNode(this, null, false, payload);
-        else
-            this._document = null;
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._document);
-    },
-
-    /**
-     * @param {DOMAgent.Node} payload
-     */
-    _setDetachedRoot: function(payload)
-    {
-        new WebInspector.DOMNode(this, null, false, payload);
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} parentId
-     * @param {Array.<DOMAgent.Node>} payloads
-     */
-    _setChildNodes: function(parentId, payloads)
-    {
-        if (!parentId && payloads.length) {
-            this._setDetachedRoot(payloads[0]);
-            return;
-        }
-
-        var parent = this._idToDOMNode[parentId];
-        parent._setChildrenPayload(payloads);
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     * @param {number} newValue
-     */
-    _childNodeCountUpdated: function(nodeId, newValue)
-    {
-        var node = this._idToDOMNode[nodeId];
-        node.childNodeCount = newValue;
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.ChildNodeCountUpdated, node);
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} parentId
-     * @param {DOMAgent.NodeId} prevId
-     * @param {DOMAgent.Node} payload
-     */
-    _childNodeInserted: function(parentId, prevId, payload)
-    {
-        var parent = this._idToDOMNode[parentId];
-        var prev = this._idToDOMNode[prevId];
-        var node = parent._insertChild(prev, payload);
-        this._idToDOMNode[node.id] = node;
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeInserted, {node: node, parent: parent});
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} parentId
-     * @param {DOMAgent.NodeId} nodeId
-     */
-    _childNodeRemoved: function(parentId, nodeId)
-    {
-        var parent = this._idToDOMNode[parentId];
-        var node = this._idToDOMNode[nodeId];
-        parent._removeChild(node);
-        this._unbind(node);
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.NodeRemoved, {node:node, parent: parent});
-    },
-
-    /**
-     * @param {DOMAgent.Node} node
-     */
-    _unbind: function(node)
-    {
-        delete this._idToDOMNode[node.id];
-        for (var i = 0; node.children && i < node.children.length; ++i)
-            this._unbind(node.children[i]);
-    },
-
-    /**
-     * @param {number} nodeId
-     */
-    inspectElement: function(nodeId)
-    {
-        var node = this._idToDOMNode[nodeId];
-        if (node)
-            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, {node: node});
-
-        this._inspectModeEnabled = false;
-        this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.InspectModeStateChanged);
-    },
-
-    inspectNodeObject: function(remoteObject)
-    {
-        function nodeAvailable(nodeId)
-        {
-            remoteObject.release();
-
-            console.assert(nodeId);
-            if (!nodeId)
-                return;
-
-            this.inspectElement(nodeId);
-        }
-
-        remoteObject.pushNodeToFrontend(nodeAvailable.bind(this));
-    },
-
-    /**
-     * @param {string} query
-     * @param {function(number)} searchCallback
-     */
-    performSearch: function(query, searchCallback)
-    {
-        this.cancelSearch();
-
-        /**
-         * @param {?Protocol.Error} error
-         * @param {string} searchId
-         * @param {number} resultsCount
-         */
-        function callback(error, searchId, resultsCount)
-        {
-            this._searchId = searchId;
-            searchCallback(resultsCount);
-        }
-        DOMAgent.performSearch(query, callback.bind(this));
-    },
-
-    /**
-     * @param {number} index
-     * @param {?function(DOMAgent.Node)} callback
-     */
-    searchResult: function(index, callback)
-    {
-        if (this._searchId) {
-            /**
-             * @param {?Protocol.Error} error
-             * @param {Array.<number>} nodeIds
-             */
-            function mycallback(error, nodeIds)
-            {
-                if (error) {
-                    console.error(error);
-                    callback(null);
-                    return;
-                }
-                if (nodeIds.length != 1)
-                    return;
-
-                callback(this._idToDOMNode[nodeIds[0]]);
-            }
-            DOMAgent.getSearchResults(this._searchId, index, index + 1, mycallback.bind(this));
-        } else
-            callback(null);
-    },
-
-    cancelSearch: function()
-    {
-        if (this._searchId) {
-            DOMAgent.discardSearchResults(this._searchId);
-            delete this._searchId;
-        }
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     * @param {string} selectors
-     * @param {function(?DOMAgent.NodeId)=} callback
-     */
-    querySelector: function(nodeId, selectors, callback)
-    {
-        var callbackCast = /** @type {function(*)|undefined} */callback;
-        DOMAgent.querySelector(nodeId, selectors, this._wrapClientCallback(callbackCast));
-    },
-
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     * @param {string} selectors
-     * @param {function(?Array.<DOMAgent.NodeId>)=} callback
-     */
-    querySelectorAll: function(nodeId, selectors, callback)
-    {
-        var callbackCast = /** @type {function(*)|undefined} */callback;
-        DOMAgent.querySelectorAll(nodeId, selectors, this._wrapClientCallback(callbackCast));
-    },
-
-    /**
-     * @param {?number} nodeId
-     * @param {string=} mode
-     */
-    highlightDOMNode: function(nodeId, mode)
-    {
-        if (this._hideDOMNodeHighlightTimeout) {
-            clearTimeout(this._hideDOMNodeHighlightTimeout);
-            delete this._hideDOMNodeHighlightTimeout;
-        }
-
-        this._highlightedDOMNodeId = nodeId;
-        if (nodeId)
-            DOMAgent.highlightNode.invoke({nodeId: nodeId, highlightConfig: this._buildHighlightConfig(mode)});
-        else
-            DOMAgent.hideHighlight();
-    },
-
-    highlightRect: function(rect, usePageCoordinates)
-    {
-        DOMAgent.highlightRect.invoke({
-            x: rect.x,
-            y: rect.y,
-            width: rect.width,
-            height: rect.height,
-            color: {r: 111, g: 168, b: 220, a: 0.66},
-            outlineColor: {r: 255, g: 229, b: 153, a: 0.66},
-            usePageCoordinates: usePageCoordinates
-        });
-    },
-
-    hideDOMNodeHighlight: function()
-    {
-        this.highlightDOMNode(0);
-    },
-
-    /**
-     * @param {?DOMAgent.NodeId} nodeId
-     */
-    highlightDOMNodeForTwoSeconds: function(nodeId)
-    {
-        this.highlightDOMNode(nodeId);
-        this._hideDOMNodeHighlightTimeout = setTimeout(this.hideDOMNodeHighlight.bind(this), 2000);
-    },
-
-    get inspectModeEnabled()
-    {
-        return this._inspectModeEnabled;
-    },
-
-    set inspectModeEnabled(enabled)
-    {
-        function callback(error)
-        {
-            this._inspectModeEnabled = error ? false : enabled;
-            this.dispatchEventToListeners(WebInspector.DOMTreeManager.Event.InspectModeStateChanged);
-        }
-
-        DOMAgent.setInspectModeEnabled(enabled, this._buildHighlightConfig(), callback.bind(this));
-    },
-
-    /**
-     * @param {string=} mode
-     */
-    _buildHighlightConfig: function(mode)
-    {
-        mode = mode || "all";
-        var highlightConfig = { showInfo: mode === "all" };
-        if (mode === "all" || mode === "content")
-            highlightConfig.contentColor = {r: 111, g: 168, b: 220, a: 0.66};
-
-        if (mode === "all" || mode === "padding")
-            highlightConfig.paddingColor = {r: 147, g: 196, b: 125, a: 0.66};
-
-        if (mode === "all" || mode === "border")
-            highlightConfig.borderColor = {r: 255, g: 229, b: 153, a: 0.66};
-
-        if (mode === "all" || mode === "margin")
-            highlightConfig.marginColor = {r: 246, g: 178, b: 107, a: 0.66};
-
-        return highlightConfig;
-    }
-}
-
-WebInspector.DOMTreeManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css
deleted file mode 100644
index 3194b59dc..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.css
+++ /dev/null
@@ -1,148 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.dom-tree-outline {
-    position: relative;
-
-    padding: 0 6px;
-    margin: 0;
-    min-width: 100%;
-
-    outline: none;
-
-    list-style-type: none;
-
- /* Needed to make the negative z-index on .selection works. Otherwise the background-color from .syntax-highlighted hides the selection. */
-    background-color: transparent !important;
-    color: black;
-}
-
-.dom-tree-outline li.hovered:not(.selected) .selection {
-    display: block;
-    left: 3px;
-    right: 3px;
-
-    background-color: rgba(56, 121, 217, 0.1);
-    border-radius: 5px;
-}
-
-.dom-tree-outline li .selection {
-    display: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 15px;
-    z-index: -1;
-}
-
-.dom-tree-outline li.selected .selection {
-    display: block;
-    background-color: rgb(212, 212, 212);
-}
-
-.dom-tree-outline li.elements-drag-over .selection {
-    display: block;
-    margin-top: -2px;
-    border-top: 2px solid rgb(56, 121, 217);
-}
-
-.dom-tree-outline:focus li.selected .selection {
-    background-color: rgb(56, 121, 217);
-}
-
-.dom-tree-outline ol {
-    list-style-type: none;
-    padding-left: 14px;
-    margin: 0;
-}
-
-.dom-tree-outline ol.children {
-    display: none;
-}
-
-.dom-tree-outline ol.children.expanded {
-    display: block;
-}
-
-.dom-tree-outline li {
-    padding: 0 0 0 12px;
-    word-wrap: break-word;
-}
-
-.dom-tree-outline:focus li.selected {
-    color: white;
-}
-
-.dom-tree-outline:focus li.selected * {
-    color: inherit;
-}
-
-.dom-tree-outline li.parent {
-    margin-left: -10px;
-}
-
-.dom-tree-outline li .html-tag.close {
-    margin-left: -14px;
-}
-
-.dom-tree-outline li.parent::before {
-    float: left;
-
-    content: "";
-
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
-    background-size: 8px 8px;
-    background-repeat: no-repeat;
-
-    width: 8px;
-    height: 8px;
-
-    margin-top: 2px;
-    padding-right: 2px;
-}
-
-.dom-tree-outline:focus li.parent.selected::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
-}
-
-.dom-tree-outline li.parent.expanded::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
-}
-
-.dom-tree-outline:focus li.parent.expanded.selected::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
-}
-
-.dom-tree-outline .add-attribute {
-    margin-left: 1px;
-    margin-right: 1px;
-    white-space: nowrap;
-}
-
-.dom-tree-outline .html-text-node.large {
-    display: inline-block;
-    min-width: 100%;
-    white-space: pre-wrap;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js
deleted file mode 100644
index 8ceb23d0b..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeOutline.js
+++ /dev/null
@@ -1,585 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @extends {TreeOutline}
- * @param {boolean=} omitRootDOMNode
- * @param {boolean=} selectEnabled
- */
-WebInspector.DOMTreeOutline = function(omitRootDOMNode, selectEnabled, showInElementsPanelEnabled)
-{
-    this.element = document.createElement("ol");
-    this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
-    this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
-    this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
-    this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
-    this.element.addEventListener("dragover", this._ondragover.bind(this), false);
-    this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
-    this.element.addEventListener("drop", this._ondrop.bind(this), false);
-    this.element.addEventListener("dragend", this._ondragend.bind(this), false);
-
-    this.element.classList.add("dom-tree-outline");
-    this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
-
-    TreeOutline.call(this, this.element);
-
-    this._includeRootDOMNode = !omitRootDOMNode;
-    this._selectEnabled = selectEnabled;
-    this._showInElementsPanelEnabled = showInElementsPanelEnabled;
-    this._rootDOMNode = null;
-    this._selectedDOMNode = null;
-    this._eventSupport = new WebInspector.Object();
-    this._editing = false;
-
-    this._visible = false;
-
-    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
-
-    this._hideElementKeyboardShortcut = new WebInspector.KeyboardShortcut(null, "H", this._hideElement.bind(this), this.element);
-    this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
-
-    WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
-}
-
-WebInspector.Object.addConstructorFunctions(WebInspector.DOMTreeOutline);
-
-WebInspector.DOMTreeOutline.Event = {
-    SelectedNodeChanged: "dom-tree-outline-selected-node-changed"
-}
-
-WebInspector.DOMTreeOutline.prototype = {
-    constructor: WebInspector.DOMTreeOutline,
-
-    wireToDomAgent: function()
-    {
-        this._elementsTreeUpdater = new WebInspector.DOMTreeUpdater(this);
-    },
-
-    close: function()
-    {
-        if (this._elementsTreeUpdater) {
-            this._elementsTreeUpdater.close();
-            this._elementsTreeUpdater = null;
-        }
-    },
-
-    setVisible: function(visible, omitFocus)
-    {
-        this._visible = visible;
-        if (!this._visible)
-            return;
-
-        this._updateModifiedNodes();
-        if (this._selectedDOMNode)
-            this._revealAndSelectNode(this._selectedDOMNode, omitFocus);
-    },
-
-    addEventListener: function(eventType, listener, thisObject)
-    {
-        this._eventSupport.addEventListener(eventType, listener, thisObject);
-    },
-
-    removeEventListener: function(eventType, listener, thisObject)
-    {
-        this._eventSupport.removeEventListener(eventType, listener, thisObject);
-    },
-
-    get rootDOMNode()
-    {
-        return this._rootDOMNode;
-    },
-
-    set rootDOMNode(x)
-    {
-        if (this._rootDOMNode === x)
-            return;
-
-        this._rootDOMNode = x;
-
-        this._isXMLMimeType = x && x.isXMLNode();
-
-        this.update();
-    },
-
-    get isXMLMimeType()
-    {
-        return this._isXMLMimeType;
-    },
-
-    selectedDOMNode: function()
-    {
-        return this._selectedDOMNode;
-    },
-
-    selectDOMNode: function(node, focus)
-    {
-        if (this._selectedDOMNode === node) {
-            this._revealAndSelectNode(node, !focus);
-            return;
-        }
-
-        this._selectedDOMNode = node;
-        this._revealAndSelectNode(node, !focus);
-
-        // The _revealAndSelectNode() method might find a different element if there is inlined text,
-        // and the select() call would change the selectedDOMNode and reenter this setter. So to
-        // avoid calling _selectedNodeChanged() twice, first check if _selectedDOMNode is the same
-        // node as the one passed in.
-        if (this._selectedDOMNode === node)
-            this._selectedNodeChanged();
-    },
-
-    get editing()
-    {
-        return this._editing;
-    },
-
-    update: function()
-    {
-        var selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
-
-        this.removeChildren();
-
-        if (!this.rootDOMNode)
-            return;
-
-        var treeElement;
-        if (this._includeRootDOMNode) {
-            treeElement = new WebInspector.DOMTreeElement(this.rootDOMNode);
-            treeElement.selectable = this._selectEnabled;
-            this.appendChild(treeElement);
-        } else {
-            // FIXME: this could use findTreeElement to reuse a tree element if it already exists
-            var node = this.rootDOMNode.firstChild;
-            while (node) {
-                treeElement = new WebInspector.DOMTreeElement(node);
-                treeElement.selectable = this._selectEnabled;
-                this.appendChild(treeElement);
-                node = node.nextSibling;
-            }
-        }
-
-        if (selectedNode)
-            this._revealAndSelectNode(selectedNode, true);
-    },
-
-    updateSelection: function()
-    {
-        if (!this.selectedTreeElement)
-            return;
-        var element = this.treeOutline.selectedTreeElement;
-        element.updateSelection();
-    },
-
-    _selectedNodeChanged: function()
-    {
-        this._eventSupport.dispatchEventToListeners(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged);
-    },
-
-    findTreeElement: function(node)
-    {
-        function isAncestorNode(ancestor, node)
-        {
-            return ancestor.isAncestor(node);
-        }
-
-        function parentNode(node)
-        {
-            return node.parentNode;
-        }
-
-        var treeElement = TreeOutline.prototype.findTreeElement.call(this, node, isAncestorNode, parentNode);
-        if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
-            // The text node might have been inlined if it was short, so try to find the parent element.
-            treeElement = TreeOutline.prototype.findTreeElement.call(this, node.parentNode, isAncestorNode, parentNode);
-        }
-
-        return treeElement;
-    },
-
-    createTreeElementFor: function(node)
-    {
-        var treeElement = this.findTreeElement(node);
-        if (treeElement)
-            return treeElement;
-        if (!node.parentNode)
-            return null;
-
-        treeElement = this.createTreeElementFor(node.parentNode);
-        if (treeElement && treeElement.showChild(node.index))
-            return treeElement.children[node.index];
-
-        return null;
-    },
-
-    set suppressRevealAndSelect(x)
-    {
-        if (this._suppressRevealAndSelect === x)
-            return;
-        this._suppressRevealAndSelect = x;
-    },
-
-    _revealAndSelectNode: function(node, omitFocus)
-    {
-        if (!node || this._suppressRevealAndSelect)
-            return;
-
-        var treeElement = this.createTreeElementFor(node);
-        if (!treeElement)
-            return;
-
-        treeElement.revealAndSelect(omitFocus);
-    },
-
-    _treeElementFromEvent: function(event)
-    {
-        var scrollContainer = this.element.parentElement;
-
-        // We choose this X coordinate based on the knowledge that our list
-        // items extend at least to the right edge of the outer <ol> container.
-        // In the no-word-wrap mode the outer <ol> may be wider than the tree container
-        // (and partially hidden), in which case we are left to use only its right boundary.
-        var x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
-
-        var y = event.pageY;
-
-        // Our list items have 1-pixel cracks between them vertically. We avoid
-        // the cracks by checking slightly above and slightly below the mouse
-        // and seeing if we hit the same element each time.
-        var elementUnderMouse = this.treeElementFromPoint(x, y);
-        var elementAboveMouse = this.treeElementFromPoint(x, y - 2);
-        var element;
-        if (elementUnderMouse === elementAboveMouse)
-            element = elementUnderMouse;
-        else
-            element = this.treeElementFromPoint(x, y + 2);
-
-        return element;
-    },
-
-    _onmousedown: function(event)
-    {
-        var element = this._treeElementFromEvent(event);
-        if (!element || element.isEventWithinDisclosureTriangle(event)) {
-            event.preventDefault();
-            return;
-        }
-
-        element.select();
-    },
-
-    _onmousemove: function(event)
-    {
-        var element = this._treeElementFromEvent(event);
-        if (element && this._previousHoveredElement === element)
-            return;
-
-        if (this._previousHoveredElement) {
-            this._previousHoveredElement.hovered = false;
-            delete this._previousHoveredElement;
-        }
-
-        if (element) {
-            element.hovered = true;
-            this._previousHoveredElement = element;
-
-            // Lazily compute tag-specific tooltips.
-            if (element.representedObject && !element.tooltip)
-                element._createTooltipForNode();
-        }
-
-        WebInspector.domTreeManager.highlightDOMNode(element ? element.representedObject.id : 0);
-    },
-
-    _onmouseout: function(event)
-    {
-        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
-        if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
-            return;
-
-        if (this._previousHoveredElement) {
-            this._previousHoveredElement.hovered = false;
-            delete this._previousHoveredElement;
-        }
-
-        WebInspector.domTreeManager.hideDOMNodeHighlight();
-    },
-
-    _ondragstart: function(event)
-    {
-        var treeElement = this._treeElementFromEvent(event);
-        if (!treeElement)
-            return false;
-
-        if (!this._isValidDragSourceOrTarget(treeElement))
-            return false;
-
-        if (treeElement.representedObject.nodeName() === "BODY" || treeElement.representedObject.nodeName() === "HEAD")
-            return false;
-
-        event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
-        event.dataTransfer.effectAllowed = "copyMove";
-        this._nodeBeingDragged = treeElement.representedObject;
-
-        WebInspector.domTreeManager.hideDOMNodeHighlight();
-
-        return true;
-    },
-
-    _ondragover: function(event)
-    {
-        if (!this._nodeBeingDragged)
-            return false;
-
-        var treeElement = this._treeElementFromEvent(event);
-        if (!this._isValidDragSourceOrTarget(treeElement))
-            return false;
-
-        var node = treeElement.representedObject;
-        while (node) {
-            if (node === this._nodeBeingDragged)
-                return false;
-            node = node.parentNode;
-        }
-
-        treeElement.updateSelection();
-        treeElement.listItemElement.classList.add("elements-drag-over");
-        this._dragOverTreeElement = treeElement;
-        event.preventDefault();
-        event.dataTransfer.dropEffect = 'move';
-        return false;
-    },
-
-    _ondragleave: function(event)
-    {
-        this._clearDragOverTreeElementMarker();
-        event.preventDefault();
-        return false;
-    },
-
-    _isValidDragSourceOrTarget: function(treeElement)
-    {
-        if (!treeElement)
-            return false;
-
-        var node = treeElement.representedObject;
-        if (!(node instanceof WebInspector.DOMNode))
-            return false;
-
-        if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
-            return false;
-
-        return true;
-    },
-
-    _ondrop: function(event)
-    {
-        event.preventDefault();
-        var treeElement = this._treeElementFromEvent(event);
-        if (this._nodeBeingDragged && treeElement) {
-            var parentNode;
-            var anchorNode;
-
-            if (treeElement._elementCloseTag) {
-                // Drop onto closing tag -> insert as last child.
-                parentNode = treeElement.representedObject;
-            } else {
-                var dragTargetNode = treeElement.representedObject;
-                parentNode = dragTargetNode.parentNode;
-                anchorNode = dragTargetNode;
-            }
-
-            function callback(error, newNodeId)
-            {
-                if (error)
-                    return;
-
-                this._updateModifiedNodes();
-                var newNode = WebInspector.domTreeManager.nodeForId(newNodeId);
-                if (newNode)
-                    this.selectDOMNode(newNode, true);
-            }
-            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
-        }
-
-        delete this._nodeBeingDragged;
-    },
-
-    _ondragend: function(event)
-    {
-        event.preventDefault();
-        this._clearDragOverTreeElementMarker();
-        delete this._nodeBeingDragged;
-    },
-
-    _clearDragOverTreeElementMarker: function()
-    {
-        if (this._dragOverTreeElement) {
-            this._dragOverTreeElement.updateSelection();
-            this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");
-            delete this._dragOverTreeElement;
-        }
-    },
-
-    _contextMenuEventFired: function(event)
-    {
-        var treeElement = this._treeElementFromEvent(event);
-        if (!treeElement)
-            return;
-
-        var contextMenu = new WebInspector.ContextMenu(event);
-        this.populateContextMenu(contextMenu, event);
-        contextMenu.show();
-    },
-
-    populateContextMenu: function(contextMenu, event)
-    {
-        var treeElement = this._treeElementFromEvent(event);
-        if (!treeElement)
-            return false;
-
-        var tag = event.target.enclosingNodeOrSelfWithClass("html-tag");
-        var textNode = event.target.enclosingNodeOrSelfWithClass("html-text-node");
-        var commentNode = event.target.enclosingNodeOrSelfWithClass("html-comment");
-        var populated = false;
-        if (tag && treeElement._populateTagContextMenu) {
-            if (populated)
-                contextMenu.appendSeparator();
-            treeElement._populateTagContextMenu(contextMenu, event);
-            populated = true;
-        } else if (textNode && treeElement._populateTextContextMenu) {
-            if (populated)
-                contextMenu.appendSeparator();
-            treeElement._populateTextContextMenu(contextMenu, textNode);
-            populated = true;
-        } else if (commentNode && treeElement._populateNodeContextMenu) {
-            if (populated)
-                contextMenu.appendSeparator();
-            treeElement._populateNodeContextMenu(contextMenu, textNode);
-            populated = true;
-        }
-
-        return populated;
-    },
-
-    adjustCollapsedRange: function()
-    {
-    },
-
-    _updateModifiedNodes: function()
-    {
-        if (this._elementsTreeUpdater)
-            this._elementsTreeUpdater._updateModifiedNodes();
-    },
-
-    _populateContextMenu: function(contextMenu, domNode)
-    {
-        if (!this._showInElementsPanelEnabled)
-            return;
-
-        function revealElement()
-        {
-            WebInspector.domTreeManager.inspectElement(domNode.id);
-        }
-
-        contextMenu.appendSeparator();
-        contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement);
-    },
-
-    _showShadowDOMSettingChanged: function(event)
-    {
-        var nodeToSelect = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
-        while (nodeToSelect) {
-            if (!nodeToSelect.isInShadowTree())
-                break;
-            nodeToSelect = nodeToSelect.parentNode;
-        }
-
-        this.children.forEach(function(child) {
-            child.updateChildren(true);
-        });
-
-        if (nodeToSelect)
-            this.selectDOMNode(nodeToSelect);
-    },
-
-    _hideElement: function(event, keyboardShortcut)
-    {
-        if (!this.selectedTreeElement || WebInspector.isEditingAnyField())
-            return;
-
-        event.preventDefault();
-
-        var selectedNode = this.selectedTreeElement.representedObject;
-        console.assert(selectedNode);
-        if (!selectedNode)
-            return;
-
-        if (selectedNode.nodeType() !== Node.ELEMENT_NODE)
-            return;
-
-        if (this._togglePending)
-            return;
-        this._togglePending = true;
-
-        function toggleProperties()
-        {
-            nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, toggleProperties, this);
-
-            var opacityProperty = nodeStyles.inlineStyle.propertyForName("opacity");
-            opacityProperty.value = "0";
-            opacityProperty.important = true;
-
-            var pointerEventsProperty = nodeStyles.inlineStyle.propertyForName("pointer-events");
-            pointerEventsProperty.value = "none";
-            pointerEventsProperty.important = true;
-
-            if (opacityProperty.enabled && pointerEventsProperty.enabled) {
-                opacityProperty.remove();
-                pointerEventsProperty.remove();
-            } else {
-                opacityProperty.add();
-                pointerEventsProperty.add();
-            }
-
-            delete this._togglePending;
-        }
-
-        var nodeStyles = WebInspector.cssStyleManager.stylesForNode(selectedNode);
-        if (nodeStyles.needsRefresh) {
-            nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, toggleProperties, this);
-            nodeStyles.refresh();
-        } else
-            toggleProperties.call(this);
-    }
-}
-
-WebInspector.DOMTreeOutline.prototype.__proto__ = TreeOutline.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeUpdater.js b/Source/WebInspectorUI/UserInterface/DOMTreeUpdater.js
deleted file mode 100644
index 094e530fe..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMTreeUpdater.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- */
-WebInspector.DOMTreeUpdater = function(treeOutline)
-{
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeInserted, this._nodeInserted, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesUpdated, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._attributesUpdated, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CharacterDataModified, this._characterDataModified, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._documentUpdated, this);
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
-
-    this._treeOutline = treeOutline;
-    this._recentlyModifiedNodes = [];
-}
-
-WebInspector.DOMTreeUpdater.prototype = {
-    close: function()
-    {
-        WebInspector.domTreeManager.removeEventListener(null, null, this);
-    },
-
-    _documentUpdated: function(event)
-    {
-        this._reset();
-    },
-
-    _attributesUpdated: function(event)
-    {
-        this._recentlyModifiedNodes.push({node: event.data.node, updated: true});
-        if (this._treeOutline._visible)
-            this._updateModifiedNodesSoon();
-    },
-
-    _characterDataModified: function(event)
-    {
-        this._recentlyModifiedNodes.push({node: event.data.node, updated: true});
-        if (this._treeOutline._visible)
-            this._updateModifiedNodesSoon();
-    },
-
-    _nodeInserted: function(event)
-    {
-        this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, inserted: true});
-        if (this._treeOutline._visible)
-            this._updateModifiedNodesSoon();
-    },
-
-    _nodeRemoved: function(event)
-    {
-        this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, removed: true});
-        if (this._treeOutline._visible)
-            this._updateModifiedNodesSoon();
-    },
-
-    _childNodeCountUpdated: function(event)
-    {
-        var treeElement = this._treeOutline.findTreeElement(event.data);
-        if (treeElement)
-            treeElement.hasChildren = event.data.hasChildNodes();
-    },
-
-    _updateModifiedNodesSoon: function()
-    {
-        if (this._updateModifiedNodesTimeout)
-            return;
-        this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 0);
-    },
-
-    _updateModifiedNodes: function()
-    {
-        if (this._updateModifiedNodesTimeout) {
-            clearTimeout(this._updateModifiedNodesTimeout);
-            delete this._updateModifiedNodesTimeout;
-        }
-
-        var updatedParentTreeElements = [];
-
-        for (var i = 0; i < this._recentlyModifiedNodes.length; ++i) {
-            var parent = this._recentlyModifiedNodes[i].parent;
-            var node = this._recentlyModifiedNodes[i].node;
-
-            if (this._recentlyModifiedNodes[i].updated) {
-                var nodeItem = this._treeOutline.findTreeElement(node);
-                if (nodeItem)
-                    nodeItem.updateTitle();
-                continue;
-            }
-
-            if (!parent)
-                continue;
-
-            var parentNodeItem = this._treeOutline.findTreeElement(parent);
-            if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) {
-                parentNodeItem.updateChildren();
-                parentNodeItem.alreadyUpdatedChildren = true;
-                updatedParentTreeElements.push(parentNodeItem);
-            }
-        }
-
-        for (var i = 0; i < updatedParentTreeElements.length; ++i)
-            delete updatedParentTreeElements[i].alreadyUpdatedChildren;
-
-        this._recentlyModifiedNodes = [];
-    },
-
-    _reset: function()
-    {
-        WebInspector.domTreeManager.hideDOMNodeHighlight();
-        this._recentlyModifiedNodes = [];
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/DOMUtilities.js b/Source/WebInspectorUI/UserInterface/DOMUtilities.js
deleted file mode 100644
index 971e900e6..000000000
--- a/Source/WebInspectorUI/UserInterface/DOMUtilities.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc.  All rights reserved.
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
- * Copyright (C) 2009 Joseph Pecoraro
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.displayNameForNode = function(node)
-{
-    var title = node.nodeNameInCorrectCase();
-
-    var idAttribute = node.getAttribute("id");
-    if (idAttribute) {
-        if (/[\s'"]/.test(idAttribute)) {
-            idAttribute = idAttribute.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
-            title += "[id=\"" + idAttribute + "\"]";
-        } else
-            title += "#" + idAttribute;
-    }
-
-    var classAttribute = node.getAttribute("class");
-    if (classAttribute) {
-        var classes = classAttribute.trim().split(/\s+/);
-        var foundClasses = {};
-
-        for (var i = 0; i < classes.length; ++i) {
-            var className = classes[i];
-            if (className && !(className in foundClasses)) {
-                title += "." + className;
-                foundClasses[className] = true;
-            }
-        }
-    }
-
-    return title;
-}
-
-WebInspector.linkifyNodeReference = function(node)
-{
-    var displayName = WebInspector.displayNameForNode(node);
-
-    var link = document.createElement("span");
-    link.appendChild(document.createTextNode(displayName));
-    link.className = "node-link";
-    link.title = displayName;
-
-    link.addEventListener("click", WebInspector.domTreeManager.inspectElement.bind(WebInspector.domTreeManager, node.id));
-    link.addEventListener("mouseover", WebInspector.domTreeManager.highlightDOMNode.bind(WebInspector.domTreeManager, node.id, ""));
-    link.addEventListener("mouseout", WebInspector.domTreeManager.hideDOMNodeHighlight.bind(WebInspector.domTreeManager));
-
-    return link;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DashboardManager.js b/Source/WebInspectorUI/UserInterface/DashboardManager.js
deleted file mode 100644
index 0917defa1..000000000
--- a/Source/WebInspectorUI/UserInterface/DashboardManager.js
+++ /dev/null
@@ -1,191 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DashboardManager = function() {
-    WebInspector.Object.call(this);
-
-    this.toolbarItem = new WebInspector.NavigationItem("dashboard", "group", WebInspector.UIString("Activity Viewer"));
-    this._view = new WebInspector.DashboardView(this.toolbarItem.element);
-
-    this._waitingForFirstMainResourceToStartTrackingSize = true;
-
-    // Necessary event required to track page load time and resource sizes.
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStopped, this._recordingStopped, this);
-
-    // Necessary events required to track load of resources.
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.AllResourcesRemoved, this._resourcesWereCleared, this);
-    WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
-
-    // Necessary events required to track console messages.
-    var logManager = WebInspector.logManager;
-    logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._consoleWasCleared, this);
-    logManager.addEventListener(WebInspector.LogManager.Event.ActiveLogCleared, this._consoleWasCleared, this);
-    logManager.addEventListener(WebInspector.LogManager.Event.MessageAdded, this._consoleMessageAdded, this);
-    logManager.addEventListener(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, this._consoleMessageWasRepeated, this);
-};
-
-WebInspector.DashboardManager.prototype = {
-    constructor: WebInspector.DashboardManager,
-
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (!event.target.isMainFrame())
-            return;
-
-        // Only update the time if we are recording the timeline.
-        if (!WebInspector.timelineManager.recording) {
-            this._view.time = 0;
-            return;
-        }
-
-        // We should only track resource sizes on fresh loads.
-        if (this._waitingForFirstMainResourceToStartTrackingSize) {
-            delete this._waitingForFirstMainResourceToStartTrackingSize;
-            WebInspector.Resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._resourceSizeDidChange, this);
-        }
-
-        this._startUpdatingTime();
-    },
-
-    _recordingStopped: function(event)
-    {
-        // If recording stops, we should stop the timer if it hasn't stopped already.
-        this._stopUpdatingTime();
-    },
-
-    _resourceWasAdded: function(event)
-    {
-        ++this._view.resourcesCount;
-    },
-
-    _resourcesWereCleared: function(event)
-    {
-        this._view.resourcesCount = 1;
-        this._view.resourcesSize = WebInspector.frameResourceManager.mainFrame.mainResource.size || 0;
-    },
-
-    _frameWasAdded: function(event)
-    {
-        ++this._view.resourcesCount;
-    },
-
-    _resourceSizeDidChange: function(event)
-    {
-        this._view.resourcesSize += event.target.size - event.data.previousSize;
-    },
-
-    _startUpdatingTime: function()
-    {
-        this._stopUpdatingTime();
-
-        this._view.time = 0;
-
-        this._timelineBaseTime = Date.now();
-        this._timeIntervalDelay = 50;
-        this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
-    },
-
-    _stopUpdatingTime: function()
-    {
-        if (!this._timeIntervalIdentifier)
-            return;
-
-        clearInterval(this._timeIntervalIdentifier);
-        delete this._timeIntervalIdentifier;
-    },
-
-    _updateTime: function()
-    {
-        var duration = Date.now() - this._timelineBaseTime;
-
-        var timeIntervalDelay = this._timeIntervalDelay;
-        if (duration >= 1000) // 1 second
-            timeIntervalDelay = 100;
-        else if (duration >= 60000) // 60 seconds
-            timeIntervalDelay = 1000;
-        else if (duration >= 3600000) // 1 minute
-            timeIntervalDelay = 10000;
-
-        if (timeIntervalDelay !== this._timeIntervalDelay) {
-            this._timeIntervalDelay = timeIntervalDelay;
-
-            clearInterval(this._timeIntervalIdentifier);
-            this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
-        }
-
-        var timelineManager = WebInspector.timelineManager;
-        var mainFrameLoadEventTime = timelineManager.mainFrameLoadEventTime;
-
-        if (isNaN(mainFrameLoadEventTime)) {
-            this._view.time = (Date.now() - this._timelineBaseTime) / 1000;
-            return;
-        }
-
-        var networkRecords = timelineManager.recordsWithType(WebInspector.TimelineRecord.Type.Network);
-        this._view.time = mainFrameLoadEventTime - networkRecords[0].startTime;
-
-        this._stopUpdatingTime();
-    },
-
-    _consoleMessageAdded: function(event)
-    {
-        var message = event.data.message;
-        this._lastConsoleMessageType = message.level;
-        this._incrementConsoleMessageType(message.level, message.totalRepeatCount);
-    },
-
-    _consoleMessageWasRepeated: function(event)
-    {
-        this._incrementConsoleMessageType(this._lastConsoleMessageType, 1);
-    },
-
-    _incrementConsoleMessageType: function(type, increment)
-    {
-        switch (type) {
-        case "log":
-            this._view.logs += increment;
-            break;
-        case "warning":
-            this._view.issues += increment;
-            break;
-        case "error":
-            this._view.errors += increment;
-            break;
-        }
-    },
-
-    _consoleWasCleared: function(event)
-    {
-        this._view.logs = 0;
-        this._view.issues = 0;
-        this._view.errors = 0;
-    }
-};
-
-WebInspector.DashboardManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DashboardView.css b/Source/WebInspectorUI/UserInterface/DashboardView.css
deleted file mode 100644
index 48d0c608f..000000000
--- a/Source/WebInspectorUI/UserInterface/DashboardView.css
+++ /dev/null
@@ -1,225 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.toolbar .dashboard {
-    display: -webkit-flex;
-    -webkit-flex-flow: row nowrap;
-
-    -webkit-justify-content: space-between;
-
-    margin: 4px 10px;
-    padding: 0 5px;
-
-    width: 375px;
-
-    background-image: -webkit-linear-gradient(bottom, rgba(0, 128, 255, 0.075), rgba(0, 128, 255, 0)),
-        -webkit-linear-gradient(left, rgba(0, 0, 0, 0.09), transparent, rgba(0, 0, 0, 0.09)),
-        -webkit-linear-gradient(top, rgb(240, 244, 251), rgb(250, 253, 255));
-    background-size: 100% 6px, auto, auto;
-    background-position: bottom, center, center;
-    background-repeat: no-repeat;
-
-    border: 1px solid rgb(163, 163, 163);
-    border-radius: 4px;
-
-    box-shadow: rgba(255, 255, 255, 0.45) 0 1px 0;
-}
-
-body.window-inactive .toolbar .dashboard {
-    border-color: rgb(196, 196, 196);
-    background-image: none;
-    background-color: rgb(239, 239, 239);
-}
-
-.toolbar.collapsed .dashboard {
-    width: 175px;
-}
-
-.toolbar.collapsed .dashboard > .time,
-.toolbar.collapsed .dashboard > .resourcesSize,
-.toolbar.collapsed .dashboard > .logs {
-    display: none;
-}
-
-.toolbar .dashboard > .item {
-    font-family: Helvetica, sans-serif;
-    font-weight: bold;
-    font-size: 11px;
-    line-height: 12px;
-
-    padding: 0 5px;
-
-    display: -webkit-flex;
-
-    min-width: 45px;
-
-    -webkit-justify-content: center;
-    -webkit-align-items: center;
-
-    border-radius: 4px;
-    border: 1px solid transparent;
-}
-
-.toolbar .dashboard > .time,
-.toolbar .dashboard > .resourcesSize {
-    min-width: 70px;
-}
-
-.toolbar .dashboard > .item.enabled:hover {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.toolbar .dashboard > .item.enabled:active {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.toolbar .dashboard > .item > * {
-    display: -webkit-flex;
-    -webkit-align-items: center;
-}
-
-.toolbar .dashboard > .item > img {
-    opacity: 0.2;
-    width: 16px;
-    height: 16px;
-    pointer-events: none;
-}
-
-.toolbar .dashboard > .item.enabled > img {
-    opacity: 0.5;
-}
-
-.toolbar .dashboard > .item.enabled:hover > img {
-    opacity: 0.65;
-}
-
-.toolbar .dashboard > .item > div {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-
-    color: rgba(0, 0, 0, 0.2);
-    padding-left: 2px;
-}
-
-.toolbar .dashboard > .item.enabled > div {
-    color: rgba(0, 0, 0, 0.7);
-}
-
-.toolbar .dashboard > .item.enabled:hover > div {
-    color: rgba(0, 0, 0, 0.85);
-}
-
-.toolbar .dashboard > .resourcesCount > img {
-    content: url(Images/Resources.svg);
-}
-
-.toolbar .dashboard > .time > img {
-    content: url(Images/Time.svg);
-}
-
-.toolbar .dashboard > .logs > img {
-    content: url(Images/Logs.svg);
-}
-
-.toolbar .dashboard > .resourcesSize > img {
-    content: url(Images/Weight.svg);
-}
-
-.toolbar .dashboard > .errors > img {
-    content: url(Images/Errors.svg);
-}
-
-.toolbar .dashboard > .errors.enabled > img {
-    content: url(Images/ErrorsEnabled.svg);
-    opacity: 0.9;
-}
-
-.toolbar .dashboard > .errors.enabled:hover > img {
-    opacity: 1;
-}
-
-.toolbar .dashboard > .errors.enabled > div {
-    color: rgba(201, 55, 57, 0.9);
-}
-
-.toolbar .dashboard > .errors.enabled:hover > div {
-    color: rgb(201, 55, 57);
-}
-
-.toolbar .dashboard > .issues > img {
-    content: url(Images/Issues.svg);
-}
-
-.toolbar .dashboard > .issues.enabled > img {
-    content: url(Images/IssuesEnabled.svg);
-    opacity: 0.9;
-}
-
-.toolbar .dashboard > .issues.enabled:hover > img {
-    opacity: 1;
-}
-
-.toolbar .dashboard > .issues.enabled > div {
-    color: rgba(224, 164, 4, 0.9);
-}
-
-.toolbar .dashboard > .issues.enabled:hover > div {
-    color: rgb(224, 164, 4);
-}
-
-.toolbar.small-size.icon-and-label-vertical .dashboard,
-.toolbar.normal-size.icon-and-label-vertical .dashboard {
-    margin-top: 6px;
-}
-
-/* Styles for the extra short style, one row with quite a small y-margin */
-
-.toolbar.label-only .dashboard,
-.toolbar.small-size.icon-only .dashboard,
-.toolbar.small-size.icon-and-label-vertical .dashboard,
-.toolbar.small-size.icon-and-label-horizontal .dashboard {
-    height: 22px;
-}
-
-.toolbar.label-only .dashboard > .item,
-.toolbar.small-size.icon-only .dashboard > .item,
-.toolbar.small-size.icon-and-label-vertical .dashboard > .item,
-.toolbar.small-size.icon-and-label-horizontal .dashboard > .item {
-    margin: 1px 0;
-}
-
-/* Styles for the fairly short style, one row with quite a bit of y-margin */
-
-.toolbar.normal-size.icon-only .dashboard,
-.toolbar.normal-size.icon-and-label-vertical .dashboard,
-.toolbar.normal-size.icon-and-label-horizontal .dashboard {
-    height: 30px;
-}
-
-.toolbar.normal-size.icon-only .dashboard > .item,
-.toolbar.normal-size.icon-and-label-vertical .dashboard > .item,
-.toolbar.normal-size.icon-and-label-horizontal .dashboard > .item {
-    margin: 4px 0;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DashboardView.js b/Source/WebInspectorUI/UserInterface/DashboardView.js
deleted file mode 100644
index 070251755..000000000
--- a/Source/WebInspectorUI/UserInterface/DashboardView.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DashboardView = function(element)
-{
-    WebInspector.Object.call(this);
-
-    this._element = element;
-
-    this._items = {
-        resourcesCount: {
-            tooltip: WebInspector.UIString("Total number of resources, click to show the Resources navigation sidebar"),
-            handler: this._resourcesWasClicked
-        },
-        resourcesSize: {
-            tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
-            handler: this._networkItemWasClicked
-        },
-        time: {
-            tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
-            handler: this._networkItemWasClicked
-        },
-        logs: {
-            tooltip: WebInspector.UIString("Console logs, click to show the Console"),
-            handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
-        },
-        errors: {
-            tooltip: WebInspector.UIString("Console errors, click to show the Console"),
-            handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
-        },
-        issues: {
-            tooltip: WebInspector.UIString("Console warnings, click to show the Console"),
-            handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
-        }
-    };
-
-    for (var name in this._items)
-        this._appendElementForNamedItem(name);
-
-    this.resourcesCount = 0;
-    this.resourcesSize = 0;
-    this.time = 0;
-    this.logs = 0;
-    this.errors = 0;
-    this.issues = 0;
-};
-
-WebInspector.DashboardView.EnabledStyleClassName = "enabled";
-
-WebInspector.DashboardView.prototype = {
-    constructor: WebInspector.DashboardView,
-
-    // Public
-
-    get logs()
-    {
-        return this._logs;
-    },
-
-    set logs(logs)
-    {
-        this._logs = logs;
-        
-        var item = this._items.logs;
-        item.text = this._formatPossibleLargeNumber(logs);
-        this._setItemEnabled(item, logs > 0);
-    },
-
-    get issues()
-    {
-        return this._issues;
-    },
-
-    set issues(issues)
-    {
-        this._issues = issues;
-
-        var item = this._items.issues;
-        item.text = this._formatPossibleLargeNumber(issues);
-        this._setItemEnabled(item, issues > 0);
-    },
-
-    get errors()
-    {
-        return this._errors;
-    },
-
-    set errors(errors)
-    {
-        this._errors = errors;
-
-        var item = this._items.errors;
-        item.text = this._formatPossibleLargeNumber(errors);
-        this._setItemEnabled(item, errors > 0);
-    },
-
-    set time(time)
-    {
-        var item = this._items.time;
-        item.text = time ? Number.secondsToString(time) : "\u2014";
-        this._setItemEnabled(item, time > 0);
-    },
-
-    get resourcesCount()
-    {
-        return this._resourcesCount;
-    },
-
-    set resourcesCount(resourcesCount)
-    {
-        this._resourcesCount = resourcesCount;
-
-        var item = this._items.resourcesCount;
-        item.text = this._formatPossibleLargeNumber(resourcesCount);
-        this._setItemEnabled(item, resourcesCount > 0);
-    },
-
-    get resourcesSize()
-    {
-        return this._resourcesSize;
-    },
-
-    set resourcesSize(resourcesSize)
-    {
-        this._resourcesSize = resourcesSize;
-
-        var item = this._items.resourcesSize;
-        item.text = resourcesSize ? Number.bytesToString(resourcesSize, false) : "\u2014";
-        this._setItemEnabled(item, resourcesSize > 0);
-    },
-
-    // Private
-
-    _formatPossibleLargeNumber: function(number)
-    {
-        return number > 999 ? WebInspector.UIString("999+") : number;
-    },
-
-    _appendElementForNamedItem: function(name)
-    {
-        var item = this._items[name];
-
-        item.container = this._element.appendChild(document.createElement("div"));
-        item.container.className = "item " + name;
-        item.container.title = item.tooltip;
-
-        item.container.appendChild(document.createElement("img"));
-
-        item.outlet = item.container.appendChild(document.createElement("div"));
-
-        Object.defineProperty(item, "text",
-        {
-            set: function(newText)
-            {
-                if (newText === item.outlet.textContent)
-                    return;
-                item.outlet.textContent = newText;
-            }
-        });
-
-        item.container.addEventListener("click", function(event) {
-            this._itemWasClicked(name);
-        }.bind(this));
-    },
-
-    _itemWasClicked: function(name)
-    {
-        var item = this._items[name];
-        if (!item.container.classList.contains(WebInspector.DashboardView.EnabledStyleClassName))
-            return;
-
-        if (item.handler)
-            item.handler.call(this);
-    },
-
-    _resourcesWasClicked: function()
-    {
-        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
-        WebInspector.navigationSidebar.collapsed = false;
-    },
-
-    _networkItemWasClicked: function()
-    {
-        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.instrumentSidebarPanel;
-        WebInspector.instrumentSidebarPanel.showTimelineForRecordType(WebInspector.TimelineRecord.Type.Network);
-    },
-
-    _consoleItemWasClicked: function(scope)
-    {
-        WebInspector.showConsoleView(scope);
-    },
-
-    _setItemEnabled: function(item, enabled)
-    {
-        if (enabled)
-            item.container.classList.add(WebInspector.DashboardView.EnabledStyleClassName);
-        else
-            item.container.classList.remove(WebInspector.DashboardView.EnabledStyleClassName);
-    }
-};
-
-WebInspector.DashboardView.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DataGrid.css b/Source/WebInspectorUI/UserInterface/DataGrid.css
deleted file mode 100644
index f2de5a15d..000000000
--- a/Source/WebInspectorUI/UserInterface/DataGrid.css
+++ /dev/null
@@ -1,329 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.data-grid {
-    position: relative;
-    border: 1px solid #aaa;
-    outline: none;
-}
-
-.data-grid .highlight {
-    background-color: rgb(255, 230, 179);
-}
-
-.data-grid tr.selected .highlight {
-    background-color: transparent;
-}
-
-.data-grid table {
-    table-layout: fixed;
-    border-spacing: 0;
-    border-collapse: collapse;
-    width: 100%;
-    font-size: 10px;
-    font-family: Lucida Grande, sans-serif;
-}
-
-.data-grid .data-container {
-    position: absolute;
-    top: 16px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow-x: hidden;
-    overflow-y: overlay;
-}
-
-.data-grid.inline .data-container {
-    position: static;
-}
-
-.data-grid.inline {
-    border: 1px solid rgb(181, 181, 181);
-}
-
-.data-grid th {
-    text-align: left;
-    vertical-align: middle;
-
-    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(top, transparent, transparent),
-        -webkit-linear-gradient(top, white, white 25%, rgb(244, 244, 244) 50%, rgb(236, 236, 236) 50%, rgb(237, 237, 237));
-    background-size: 1px 11px, 0px 0px, 100% 100%;
-    background-position: left 2px, right 2px, center;
-    background-repeat: no-repeat;
-
-    box-shadow: inset rgba(255, 255, 255, 0.3) 0 -1px 0;
-    border-bottom: 1px solid rgb(182, 182, 182);
-
-    height: 15px;
-    font-weight: normal;
-    padding: 0 4px;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.data-grid th:first-child {
-    background-position: -1px 2px, right 2px, center;
-}
-
-.data-grid th:active:first-child {
-    background-position: -1px 2px, right top, center;
-}
-
-.data-grid th:last-child {
-    background-position: left 2px, -1px 2px, center;
-}
-
-.data-grid th:active:last-child {
-    background-position: left top, -1px top, center;
-}
-
-.data-grid tr.filler {
-    display: table-row !important;
-    height: auto !important;
-}
-
-.data-grid tr.filler td {
-    height: auto !important;
-    padding: 0 !important;
-}
-
-.data-grid table.data {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    height: 100%;
-    border-top: 0 none transparent;
-    background-image: -webkit-linear-gradient(top, white, white 50%, rgb(243, 246, 250) 50%, rgb(243, 246, 250));
-    background-size: 100% 32px;
-    table-layout: fixed;
-}
-
-.data-grid.inline table.data {
-    position: static;
-}
-
-.data-grid table.data tr {
-    display: none;
-}
-
-.data-grid table.data tr.revealed {
-    display: table-row;
-}
-
-.data-grid td {
-    vertical-align: top;
-    height: 12px;
-    line-height: 12px;
-    padding: 2px 4px;
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.data-grid td:last-child {
-    padding-right: 16px;
-}
-
-.data-grid td > div, .data-grid th > div {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.data-grid .centered div {
-    text-align: center;
-}
-
-.data-grid .right div {
-    text-align: right;
-}
-
-.data-grid th.sortable div {
-    position: relative;
-}
-
-.data-grid th.sortable:not(.mouse-over-collapser):active {
-    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
-        -webkit-linear-gradient(top, rgb(224, 224, 224), rgb(224, 224, 224) 25%, rgb(214, 214, 214) 50%, rgb(207, 207, 207) 50%, rgb(208, 208, 208));
-    background-size: 1px 15px, 1px 15px, 100% 100%;
-    background-position: left top, right top, center;
-
-    box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px 0;
-    border-bottom: 1px solid rgb(160, 160, 160);
-}
-
-.data-grid th.sort-ascending, .data-grid th.sort-descending {
-    background-image: -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)), -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)),
-        -webkit-linear-gradient(top, rgb(199, 226, 246), rgb(169, 209, 239) 25%, rgb(158, 204, 239) 50%, rgb(142, 196, 237) 50%, rgb(187, 230, 245));
-    background-size: 1px 15px, 1px 15px, 100% 100%;
-    background-position: left top, right top, center;
-
-    box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px 0;
-    border-bottom: 1px solid rgb(130, 179, 210);
-}
-
-.data-grid th.sortable.sort-ascending:not(.mouse-over-collapser):active, .data-grid th.sortable.sort-descending:not(.mouse-over-collapser):active {
-    background-image: -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)), -webkit-linear-gradient(top, rgba(0, 0, 120, 0.2), rgba(0, 0, 120, 0.2)),
-        -webkit-linear-gradient(top, rgb(144, 180, 227), rgb(109, 160, 220) 25%, rgb(96, 155, 221) 50%, rgb(77, 146, 219) 50%, rgb(130, 186, 227));
-    background-size: 1px 15px, 1px 15px, 100% 100%;
-    background-position: left top, right top, center;
-
-    border-bottom: 1px solid rgb(63, 125, 192);
-}
-
-.data-grid th:active + th,
-.data-grid th.sort-ascending + th,
-.data-grid th.sort-descending + th {
-    background-position: -1px 2px, -1px 2px, center;
-}
-
-.data-grid th:active + th.sort-ascending,
-.data-grid th:active + th.sort-descending,
-.data-grid th.sort-ascending + th:active,
-.data-grid th.sort-descending + th:active {
-    background-position: -1px top, right top, center;
-}
-
-.data-grid th:first-child:active,
-.data-grid th.sort-ascending:first-child,
-.data-grid th.sort-descending:first-child {
-    background-position: -1px top, right top, center !important;
-}
-
-.data-grid th:last-child:active,
-.data-grid th.sort-ascending:last-child,
-.data-grid th.sort-descending:last-child {
-    background-position: left top, -1px top, center !important;
-}
-
-.data-grid th.sort-ascending > div:first-child,
-.data-grid th.sort-descending > div:first-child {
-    padding-right: 10px;
-}
-
-.data-grid th.sort-ascending > div:first-child::after {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-
-    margin-bottom: auto;
-    margin-top: auto;
-
-    width: 9px;
-    height: 8px;
-
-    content: "";
-
-    background-image: -webkit-canvas(data-grid-sort-indicator-up-arrow);
-    background-size: 9px 8px;
-    background-repeat: no-repeat;
-}
-
-.data-grid th.sort-descending > div:first-child::after {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-
-    margin-bottom: auto;
-    margin-top: auto;
-
-    width: 9px;
-    height: 8px;
-
-    content: "";
-
-    background-image: -webkit-canvas(data-grid-sort-indicator-down-arrow);
-    background-size: 9px 8px;
-    background-repeat: no-repeat;
-}
-
-.data-grid button {
-    line-height: 19px;
-}
-
-body.window-inactive .data-grid th.sort-ascending,
-body.window-inactive .data-grid th.sort-descending {
-    background-image: -webkit-linear-gradient(top, white, white 25%, rgb(244, 244, 244) 50%, rgb(236, 236, 236) 50%, rgb(237, 237, 237)),
-        -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
-    background-size: 100% 100%, 1px 11px;
-    background-position: center, right center;
-    background-repeat: no-repeat;
-    border-bottom: 1px solid rgb(182, 182, 182);
-}
-
-.data-grid tr.parent td.disclosure::before {
-    float: left;
-
-    content: "";
-
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
-    background-size: 8px 8px;
-    background-repeat: no-repeat;
-
-    width: 8px;
-    height: 8px;
-
-    margin-top: 2px;
-    margin-right: 2px;
-}
-
-.data-grid tr.parent.expanded td.disclosure::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
-}
-
-.data-grid:focus tr.parent.selected td.disclosure::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
-}
-
-.data-grid:focus tr.parent.expanded.selected td.disclosure::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
-}
-
-.data-grid tr.selected {
-    background-color: rgb(212, 212, 212) !important;
-    color: inherit !important;
-}
-
-.data-grid:focus tr.selected {
-    background-color: rgb(56, 121, 217) !important;
-    color: white !important;
-}
-
-.data-grid tr:not(.parent) td.disclosure {
-    text-indent: 10px;
-}
-
-.data-grid-resizer {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 5px;
-    z-index: 500;
-    cursor: col-resize;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DataGrid.js b/Source/WebInspectorUI/UserInterface/DataGrid.js
deleted file mode 100644
index 7b87eee89..000000000
--- a/Source/WebInspectorUI/UserInterface/DataGrid.js
+++ /dev/null
@@ -1,1846 +0,0 @@
-/*
- * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *        notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *        notice, this list of conditions and the following disclaimer in the
- *        documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.         IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @extends {WebInspector.Object}
- * @param {function(WebInspector.DataGridNode, number, string, string)=} editCallback
- * @param {function(WebInspector.DataGridNode)=} deleteCallback
- */
-WebInspector.DataGrid = function(columns, editCallback, deleteCallback)
-{
-    this.element = document.createElement("div");
-    this.element.className = "data-grid";
-    this.element.tabIndex = 0;
-    this.element.addEventListener("keydown", this._keyDown.bind(this), false);
-    this.element.copyHandler = this;
-
-    this._headerTable = document.createElement("table");
-    this._headerTable.className = "header";
-    this._headerTableHeaders = {};
-
-    this._dataTable = document.createElement("table");
-    this._dataTable.className = "data";
-
-    this._dataTable.addEventListener("mousedown", this._mouseDownInDataTable.bind(this));
-    this._dataTable.addEventListener("click", this._clickInDataTable.bind(this));
-
-    this._dataTable.addEventListener("contextmenu", this._contextMenuInDataTable.bind(this), true);
-
-    // FIXME: Add a createCallback which is different from editCallback and has different
-    // behavior when creating a new node.
-    if (editCallback) {
-        this._dataTable.addEventListener("dblclick", this._ondblclick.bind(this), false);
-        this._editCallback = editCallback;
-    }
-    if (deleteCallback)
-        this._deleteCallback = deleteCallback;
-
-    this.aligned = {};
-    this.groups = {};
-    this._hiddenColumns = {};
-
-    this._scrollContainer = document.createElement("div");
-    this._scrollContainer.className = "data-container";
-    this._scrollContainer.appendChild(this._dataTable);
-
-    this.element.appendChild(this._headerTable);
-    this.element.appendChild(this._scrollContainer);
-
-    var headerRow = document.createElement("tr");
-    var columnGroup = document.createElement("colgroup");
-    this._columnCount = 0;
-
-    for (var columnIdentifier in columns) {
-        var column = columns[columnIdentifier];
-        if (column.disclosure)
-            this.disclosureColumnIdentifier = columnIdentifier;
-
-        var col = document.createElement("col");
-        if (column.width)
-            col.style.width = column.width;
-        column.element = col;
-        columnGroup.appendChild(col);
-
-        var cell = document.createElement("th");
-        cell.className = columnIdentifier + "-column";
-        cell.columnIdentifier = columnIdentifier;
-        this._headerTableHeaders[columnIdentifier] = cell;
-
-        var div = document.createElement("div");
-        if (column.titleDOMFragment)
-            div.appendChild(column.titleDOMFragment);
-        else
-            div.textContent = column.title;
-        cell.appendChild(div);
-
-        if (column.sort) {
-            cell.classList.add("sort-" + column.sort);
-            this._sortColumnCell = cell;
-        }
-
-        if (column.sortable) {
-            cell.addEventListener("click", this._clickInHeaderCell.bind(this), false);
-            cell.classList.add("sortable");
-        }
-
-        if (column.aligned)
-            this.aligned[columnIdentifier] = column.aligned;
-
-        if (column.group) {
-            this.groups[columnIdentifier] = column.group;
-            cell.classList.add("column-group-" + column.group);
-        }
-
-        if (column.collapsesGroup) {
-            console.assert(column.group !== column.collapsesGroup);
-
-            var divider = document.createElement("div");
-            divider.className = "divider";
-            cell.appendChild(divider);
-
-            var collapseDiv = document.createElement("div");
-            collapseDiv.className = "collapser-button";
-            collapseDiv.title = this._collapserButtonCollapseColumnsToolTip();
-            collapseDiv.addEventListener("mouseover", this._mouseoverColumnCollapser.bind(this));
-            collapseDiv.addEventListener("mouseout", this._mouseoutColumnCollapser.bind(this));
-            collapseDiv.addEventListener("click", this._clickInColumnCollapser.bind(this));
-            cell.appendChild(collapseDiv);
-
-            cell.collapsesGroup = column.collapsesGroup;
-            cell.classList.add("collapser");
-        }
-
-        headerRow.appendChild(cell);
-
-        ++this._columnCount;
-    }
-
-    columnGroup.span = this._columnCount;
-
-    this._headerTableColumnGroup = columnGroup;
-    this._headerTable.appendChild(this._headerTableColumnGroup);
-    this.headerTableBody.appendChild(headerRow);
-
-    var fillerRow = document.createElement("tr");
-    fillerRow.className = "filler";
-
-    for (var columnIdentifier in columns) {
-        var column = columns[columnIdentifier];
-        var td = document.createElement("td");
-        td.className = columnIdentifier + "-column";
-        var group = this.groups[columnIdentifier];
-        if (group)
-            td.classList.add("column-group-" + group);
-        fillerRow.appendChild(td);
-    }
-
-    this._dataTableColumnGroup = columnGroup.cloneNode(true);
-    this._dataTable.appendChild(this._dataTableColumnGroup);
-    this.dataTableBody.appendChild(fillerRow);
-
-    this.columns = columns || {};
-    this._columnsArray = [];
-    for (var columnIdentifier in columns) {
-        columns[columnIdentifier].ordinal = this._columnsArray.length;
-        columns[columnIdentifier].identifier = columnIdentifier;
-        this._columnsArray.push(columns[columnIdentifier]);
-    }
-
-    for (var i = 0; i < this._columnsArray.length; ++i)
-        this._columnsArray[i].bodyElement = this._dataTableColumnGroup.children[i];
-
-    this.children = [];
-    this.selectedNode = null;
-    this.expandNodesWhenArrowing = false;
-    this.root = true;
-    this.hasChildren = false;
-    this.expanded = true;
-    this.revealed = true;
-    this.selected = false;
-    this.dataGrid = this;
-    this.indentWidth = 15;
-    this.resizers = [];
-    this._columnWidthsInitialized = false;
-
-    this._generateSortIndicatorImagesIfNeeded();
-}
-
-WebInspector.DataGrid.Event = {
-    DidLayout: "datagrid-did-layout",
-    SortChanged: "datagrid-sort-changed",
-    SelectedNodeChanged: "datagrid-selected-node-changed"
-}
-
-/**
- * @param {Array.<string>} columnNames
- * @param {Array.<string>} values
- */
-WebInspector.DataGrid.createSortableDataGrid = function(columnNames, values)
-{
-    var numColumns = columnNames.length;
-    if (!numColumns)
-        return null;
-
-    var columns = {};
-
-    for (var i = 0; i < columnNames.length; ++i) {
-        var column = {};
-        column.width = columnNames[i].length;
-        column.title = columnNames[i];
-        column.sortable = true;
-
-        columns[columnNames[i]] = column;
-    }
-
-    var nodes = [];
-    for (var i = 0; i < values.length / numColumns; ++i) {
-        var data = {};
-        for (var j = 0; j < columnNames.length; ++j)
-            data[columnNames[j]] = values[numColumns * i + j];
-
-        var node = new WebInspector.DataGridNode(data, false);
-        node.selectable = false;
-        nodes.push(node);
-    }
-
-    var dataGrid = new WebInspector.DataGrid(columns);
-    var length = nodes.length;
-    for (var i = 0; i < length; ++i)
-        dataGrid.appendChild(nodes[i]);
-
-    dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, sortDataGrid, this);
-
-    function sortDataGrid()
-    {
-        var nodes = dataGrid.children.slice();
-        var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
-        var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
-        var columnIsNumeric = true;
-
-        for (var i = 0; i < nodes.length; i++) {
-            if (isNaN(Number(nodes[i].data[sortColumnIdentifier])))
-                columnIsNumeric = false;
-        }
-
-        function comparator(dataGridNode1, dataGridNode2)
-        {
-            var item1 = dataGridNode1.data[sortColumnIdentifier];
-            var item2 = dataGridNode2.data[sortColumnIdentifier];
-
-            var comparison;
-            if (columnIsNumeric) {
-                // Sort numbers based on comparing their values rather than a lexicographical comparison.
-                var number1 = parseFloat(item1);
-                var number2 = parseFloat(item2);
-                comparison = number1 < number2 ? -1 : (number1 > number2 ? 1 : 0);
-            } else
-                comparison = item1 < item2 ? -1 : (item1 > item2 ? 1 : 0);
-
-            return sortDirection * comparison;
-        }
-
-        nodes.sort(comparator);
-        dataGrid.removeChildren();
-        for (var i = 0; i < nodes.length; i++)
-            dataGrid.appendChild(nodes[i]);
-    }
-    return dataGrid;
-}
-
-WebInspector.DataGrid.prototype = {
-    get refreshCallback()
-    {
-        return this._refreshCallback;
-    },
-
-    set refreshCallback(refreshCallback)
-    {
-        this._refreshCallback = refreshCallback;
-    },
-
-    _ondblclick: function(event)
-    {
-        if (this._editing || this._editingNode)
-            return;
-
-        this._startEditing(event.target);
-    },
-
-    _startEditingColumnOfDataGridNode: function(node, column)
-    {
-        this._editing = true;
-        this._editingNode = node;
-        this._editingNode.select();
-
-        var element = this._editingNode._element.children[column];
-        WebInspector.startEditing(element, this._startEditingConfig(element));
-        window.getSelection().setBaseAndExtent(element, 0, element, 1);
-    },
-
-    _startEditing: function(target)
-    {
-        var element = target.enclosingNodeOrSelfWithNodeName("td");
-        if (!element)
-            return;
-
-        this._editingNode = this.dataGridNodeFromNode(target);
-        if (!this._editingNode) {
-            if (!this.creationNode)
-                return;
-            this._editingNode = this.creationNode;
-        }
-
-        // Force editing the 1st column when editing the creation node
-        if (this._editingNode.isCreationNode)
-            return this._startEditingColumnOfDataGridNode(this._editingNode, 0);
-
-        this._editing = true;
-        WebInspector.startEditing(element, this._startEditingConfig(element));
-
-        window.getSelection().setBaseAndExtent(element, 0, element, 1);
-    },
-
-    _startEditingConfig: function(element)
-    {
-        return new WebInspector.EditingConfig(this._editingCommitted.bind(this), this._editingCancelled.bind(this), element.textContent);
-    },
-
-    _editingCommitted: function(element, newText, oldText, context, moveDirection)
-    {
-        // FIXME: We need more column identifiers here throughout this function.
-        // Not needed yet since only editable DataGrid is DOM Storage, which is Key - Value.
-
-        // FIXME: Better way to do this than regular expressions?
-        var columnIdentifier = parseInt(element.className.match(/\b(\d+)-column\b/)[1], 10);
-
-        var textBeforeEditing = this._editingNode.data[columnIdentifier];
-        var currentEditingNode = this._editingNode;
-
-        function moveToNextIfNeeded(wasChange) {
-            if (!moveDirection)
-                return;
-
-            if (moveDirection === "forward") {
-                if (currentEditingNode.isCreationNode && columnIdentifier === 0 && !wasChange)
-                    return;
-
-                if (columnIdentifier === 0)
-                    return this._startEditingColumnOfDataGridNode(currentEditingNode, 1);
-
-                var nextDataGridNode = currentEditingNode.traverseNextNode(true, null, true);
-                if (nextDataGridNode)
-                    return this._startEditingColumnOfDataGridNode(nextDataGridNode, 0);
-                if (currentEditingNode.isCreationNode && wasChange) {
-                    this.addCreationNode(false);
-                    return this._startEditingColumnOfDataGridNode(this.creationNode, 0);
-                }
-                return;
-            }
-
-            if (moveDirection === "backward") {
-                if (columnIdentifier === 1)
-                    return this._startEditingColumnOfDataGridNode(currentEditingNode, 0);
-                    var nextDataGridNode = currentEditingNode.traversePreviousNode(true, null, true);
-
-                if (nextDataGridNode)
-                    return this._startEditingColumnOfDataGridNode(nextDataGridNode, 1);
-                return;
-            }
-        }
-
-        if (textBeforeEditing == newText) {
-            this._editingCancelled(element);
-            moveToNextIfNeeded.call(this, false);
-            return;
-        }
-
-        // Update the text in the datagrid that we typed
-        this._editingNode.data[columnIdentifier] = newText;
-
-        // Make the callback - expects an editing node (table row), the column number that is being edited,
-        // the text that used to be there, and the new text.
-        this._editCallback(this._editingNode, columnIdentifier, textBeforeEditing, newText);
-
-        if (this._editingNode.isCreationNode)
-            this.addCreationNode(false);
-
-        this._editingCancelled(element);
-        moveToNextIfNeeded.call(this, true);
-    },
-
-    _editingCancelled: function(element)
-    {
-        delete this._editing;
-        this._editingNode = null;
-    },
-
-    get sortColumnIdentifier()
-    {
-        if (!this._sortColumnCell)
-            return null;
-        return this._sortColumnCell.columnIdentifier;
-    },
-
-    get sortOrder()
-    {
-        if (!this._sortColumnCell || this._sortColumnCell.classList.contains("sort-ascending"))
-            return "ascending";
-        if (this._sortColumnCell.classList.contains("sort-descending"))
-            return "descending";
-        return null;
-    },
-
-    get headerTableBody()
-    {
-        if ("_headerTableBody" in this)
-            return this._headerTableBody;
-
-        this._headerTableBody = this._headerTable.getElementsByTagName("tbody")[0];
-        if (!this._headerTableBody) {
-            this._headerTableBody = this.element.ownerDocument.createElement("tbody");
-            this._headerTable.insertBefore(this._headerTableBody, this._headerTable.tFoot);
-        }
-
-        return this._headerTableBody;
-    },
-
-    get dataTableBody()
-    {
-        if ("_dataTableBody" in this)
-            return this._dataTableBody;
-
-        this._dataTableBody = this._dataTable.getElementsByTagName("tbody")[0];
-        if (!this._dataTableBody) {
-            this._dataTableBody = this.element.ownerDocument.createElement("tbody");
-            this._dataTable.insertBefore(this._dataTableBody, this._dataTable.tFoot);
-        }
-
-        return this._dataTableBody;
-    },
-
-    /**
-     * @param {number=} maxDescentLevel
-     */
-    autoSizeColumns: function(minPercent, maxPercent, maxDescentLevel)
-    {
-        if (minPercent)
-            minPercent = Math.min(minPercent, Math.floor(100 / this._columnCount));
-        var widths = {};
-        var columns = this.columns;
-        for (var columnIdentifier in columns)
-            widths[columnIdentifier] = (columns[columnIdentifier].title || "").length;
-
-        var children = maxDescentLevel ? this._enumerateChildren(this, [], maxDescentLevel + 1) : this.children;
-        for (var i = 0; i < children.length; ++i) {
-            var node = children[i];
-            for (var columnIdentifier in columns) {
-                var text = node.data[columnIdentifier] || "";
-                if (text.length > widths[columnIdentifier])
-                    widths[columnIdentifier] = text.length;
-            }
-        }
-
-        var totalColumnWidths = 0;
-        for (var columnIdentifier in columns)
-            totalColumnWidths += widths[columnIdentifier];
-
-        var recoupPercent = 0;
-        for (var columnIdentifier in columns) {
-            var width = Math.round(100 * widths[columnIdentifier] / totalColumnWidths);
-            if (minPercent && width < minPercent) {
-                recoupPercent += (minPercent - width);
-                width = minPercent;
-            } else if (maxPercent && width > maxPercent) {
-                recoupPercent -= (width - maxPercent);
-                width = maxPercent;
-            }
-            widths[columnIdentifier] = width;
-        }
-
-        while (minPercent && recoupPercent > 0) {
-            for (var columnIdentifier in columns) {
-                if (widths[columnIdentifier] > minPercent) {
-                    --widths[columnIdentifier];
-                    --recoupPercent;
-                    if (!recoupPercent)
-                        break;
-                }
-            }
-        }
-
-        while (maxPercent && recoupPercent < 0) {
-            for (var columnIdentifier in columns) {
-                if (widths[columnIdentifier] < maxPercent) {
-                    ++widths[columnIdentifier];
-                    ++recoupPercent;
-                    if (!recoupPercent)
-                        break;
-                }
-            }
-        }
-
-        for (var columnIdentifier in columns)
-            columns[columnIdentifier].element.style.width = widths[columnIdentifier] + "%";
-        this._columnWidthsInitialized = false;
-        this.updateLayout();
-    },
-
-    _enumerateChildren: function(rootNode, result, maxLevel)
-    {
-        if (!rootNode.root)
-            result.push(rootNode);
-        if (!maxLevel)
-            return;
-        for (var i = 0; i < rootNode.children.length; ++i)
-            this._enumerateChildren(rootNode.children[i], result, maxLevel - 1);
-        return result;
-    },
-
-    // Updates the widths of the table, including the positions of the column
-    // resizers.
-    //
-    // IMPORTANT: This function MUST be called once after the element of the
-    // DataGrid is attached to its parent element and every subsequent time the
-    // width of the parent element is changed in order to make it possible to
-    // resize the columns.
-    //
-    // If this function is not called after the DataGrid is attached to its
-    // parent element, then the DataGrid's columns will not be resizable.
-    updateLayout: function()
-    {
-        // Do not attempt to use offsetes if we're not attached to the document tree yet.
-        if (!this._columnWidthsInitialized && this.element.offsetWidth) {
-            // Give all the columns initial widths now so that during a resize,
-            // when the two columns that get resized get a percent value for
-            // their widths, all the other columns already have percent values
-            // for their widths.
-            var headerTableColumns = this._headerTableColumnGroup.children;
-            var tableWidth = this._dataTable.offsetWidth;
-            var numColumns = headerTableColumns.length;
-            for (var i = 0; i < numColumns; i++) {
-                var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWidth;
-                var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
-                this._headerTableColumnGroup.children[i].style.width = percentWidth;
-                this._dataTableColumnGroup.children[i].style.width = percentWidth;
-            }
-            this._columnWidthsInitialized = true;
-        }
-        this._positionResizers();
-        this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
-    },
-
-    columnWidthsMap: function()
-    {
-        var result = {};
-        for (var columnIdentifier in this.columns) {
-            var column = this.columns[columnIdentifier];
-            var width = this._headerTableColumnGroup.children[column.ordinal].style.width;
-            result[columnIdentifier] = parseFloat(width);
-        }
-        return result;
-    },
-
-    applyColumnWidthsMap: function(columnWidthsMap)
-    {
-        for (var columnIdentifier in this.columns) {
-            var column = this.columns[columnIdentifier];
-            var width = (columnWidthsMap[columnIdentifier] || 0) + "%";
-            this._headerTableColumnGroup.children[column.ordinal].style.width = width;
-            this._dataTableColumnGroup.children[column.ordinal].style.width = width;
-        }
-
-        this.updateLayout();
-    },
-
-    _isColumnVisible: function(columnIdentifier)
-    {
-        return !(columnIdentifier in this._hiddenColumns);
-    },
-
-    _showColumn: function(columnIdentifier)
-    {
-        delete this._hiddenColumns[columnIdentifier];
-    },
-
-    _hideColumn: function(columnIdentifier)
-    {
-        this._hiddenColumns[columnIdentifier] = true;
-
-        var column = this.columns[columnIdentifier];
-        var columnElement = column.element;
-        columnElement.style.width = 0;
-
-        var columnBodyElement = column.bodyElement;
-        columnBodyElement.style.width = 0;
-
-        this._columnWidthsInitialized = false;
-    },
-
-    get scrollContainer()
-    {
-        return this._scrollContainer;
-    },
-
-    isScrolledToLastRow: function()
-    {
-        return this._scrollContainer.isScrolledToBottom();
-    },
-
-    scrollToLastRow: function()
-    {
-        this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight - this._scrollContainer.offsetHeight;
-    },
-
-    _positionResizers: function()
-    {
-        var headerTableColumns = this._headerTableColumnGroup.children;
-        var numColumns = headerTableColumns.length;
-        var left = 0;
-        var previousResizer = null;
-
-        // Make n - 1 resizers for n columns.
-        for (var i = 0; i < numColumns - 1; i++) {
-            var resizer = this.resizers[i];
-
-            if (!resizer) {
-                // This is the first call to updateWidth, so the resizers need
-                // to be created.
-                resizer = document.createElement("div");
-                resizer.classList.add("data-grid-resizer");
-                // This resizer is associated with the column to its right.
-                resizer.addEventListener("mousedown", this._startResizerDragging.bind(this), false);
-                this.element.appendChild(resizer);
-                this.resizers[i] = resizer;
-            }
-
-            // Get the width of the cell in the first (and only) row of the
-            // header table in order to determine the width of the column, since
-            // it is not possible to query a column for its width.
-            left += this.headerTableBody.rows[0].cells[i].offsetWidth;
-
-            var columnIsVisible = this._isColumnVisible(this._columnsArray[i].identifier);
-            if (columnIsVisible) {
-                resizer.style.removeProperty("display");
-                resizer.style.left = left + "px";
-                resizer.leftNeighboringColumnID = i;
-                if (previousResizer)
-                    previousResizer.rightNeighboringColumnID = i;
-                previousResizer = resizer;
-            } else {
-                resizer.style.setProperty("display", "none");
-                resizer.leftNeighboringColumnID = 0;
-                resizer.rightNeighboringColumnID = 0;
-            }
-        }
-        if (previousResizer)
-            previousResizer.rightNeighboringColumnID = numColumns - 1;
-    },
-
-    addCreationNode: function(hasChildren)
-    {
-        if (this.creationNode)
-            this.creationNode.makeNormal();
-
-        var emptyData = {};
-        for (var column in this.columns)
-            emptyData[column] = '';
-        this.creationNode = new WebInspector.CreationDataGridNode(emptyData, hasChildren);
-        this.appendChild(this.creationNode);
-    },
-
-    appendChild: function(child)
-    {
-        this.insertChild(child, this.children.length);
-    },
-
-    insertChild: function(child, index)
-    {
-        if (!child)
-            throw("insertChild: Node can't be undefined or null.");
-        if (child.parent === this)
-            throw("insertChild: Node is already a child of this node.");
-
-        if (child.parent)
-            child.parent.removeChild(child);
-
-        this.children.splice(index, 0, child);
-        this.hasChildren = true;
-
-        child.parent = this;
-        child.dataGrid = this.dataGrid;
-        child._recalculateSiblings(index);
-
-        delete child._depth;
-        delete child._revealed;
-        delete child._attached;
-        child._shouldRefreshChildren = true;
-
-        var current = child.children[0];
-        while (current) {
-            current.dataGrid = this.dataGrid;
-            delete current._depth;
-            delete current._revealed;
-            delete current._attached;
-            current._shouldRefreshChildren = true;
-            current = current.traverseNextNode(false, child, true);
-        }
-
-        if (this.expanded)
-            child._attach();
-    },
-
-    removeChild: function(child)
-    {
-        if (!child)
-            throw("removeChild: Node can't be undefined or null.");
-        if (child.parent !== this)
-            throw("removeChild: Node is not a child of this node.");
-
-        child.deselect();
-        child._detach();
-
-        this.children.remove(child, true);
-
-        if (child.previousSibling)
-            child.previousSibling.nextSibling = child.nextSibling;
-        if (child.nextSibling)
-            child.nextSibling.previousSibling = child.previousSibling;
-
-        child.dataGrid = null;
-        child.parent = null;
-        child.nextSibling = null;
-        child.previousSibling = null;
-
-        if (this.children.length <= 0)
-            this.hasChildren = false;
-
-        if (this.creationNode === child)
-            delete this.creationNode;
-    },
-
-    removeChildren: function()
-    {
-        for (var i = 0; i < this.children.length; ++i) {
-            var child = this.children[i];
-            child.deselect();
-            child._detach();
-
-            child.dataGrid = null;
-            child.parent = null;
-            child.nextSibling = null;
-            child.previousSibling = null;
-        }
-
-        this.children = [];
-        this.hasChildren = false;
-    },
-
-    removeChildrenRecursive: function()
-    {
-        var childrenToRemove = this.children;
-
-        var child = this.children[0];
-        while (child) {
-            if (child.children.length)
-                childrenToRemove = childrenToRemove.concat(child.children);
-            child = child.traverseNextNode(false, this, true);
-        }
-
-        for (var i = 0; i < childrenToRemove.length; ++i) {
-            child = childrenToRemove[i];
-            child.deselect();
-            child._detach();
-
-            child.children = [];
-            child.dataGrid = null;
-            child.parent = null;
-            child.nextSibling = null;
-            child.previousSibling = null;
-        }
-
-        this.children = [];
-    },
-
-    sortNodes: function(comparator, reverseMode)
-    {
-        function comparatorWrapper(a, b)
-        {
-            if (a._dataGridNode._data.summaryRow)
-                return 1;
-            if (b._dataGridNode._data.summaryRow)
-                return -1;
-
-            var aDataGirdNode = a._dataGridNode;
-            var bDataGirdNode = b._dataGridNode;
-            return reverseMode ? comparator(bDataGirdNode, aDataGirdNode) : comparator(aDataGirdNode, bDataGirdNode);
-        }
-
-        var tbody = this.dataTableBody;
-        var tbodyParent = tbody.parentElement;
-        tbodyParent.removeChild(tbody);
-
-        var childNodes = tbody.childNodes;
-        var fillerRow = childNodes.lastValue;
-
-        var sortedRows = Array.prototype.slice.call(childNodes, 0, childNodes.length - 1);
-        sortedRows.sort(comparatorWrapper);
-        var sortedRowsLength = sortedRows.length;
-
-        tbody.removeChildren();
-        var previousSiblingNode = null;
-        for (var i = 0; i < sortedRowsLength; ++i) {
-            var row = sortedRows[i];
-            var node = row._dataGridNode;
-            node.previousSibling = previousSiblingNode;
-            if (previousSiblingNode)
-                previousSiblingNode.nextSibling = node;
-            tbody.appendChild(row);
-            previousSiblingNode = node;
-        }
-        if (previousSiblingNode)
-            previousSiblingNode.nextSibling = null;
-
-        tbody.appendChild(fillerRow);
-        tbodyParent.appendChild(tbody);
-    },
-
-    _keyDown: function(event)
-    {
-        if (!this.selectedNode || event.shiftKey || event.metaKey || event.ctrlKey || this._editing)
-            return;
-
-        var handled = false;
-        var nextSelectedNode;
-        if (event.keyIdentifier === "Up" && !event.altKey) {
-            nextSelectedNode = this.selectedNode.traversePreviousNode(true);
-            while (nextSelectedNode && !nextSelectedNode.selectable)
-                nextSelectedNode = nextSelectedNode.traversePreviousNode(true);
-            handled = nextSelectedNode ? true : false;
-        } else if (event.keyIdentifier === "Down" && !event.altKey) {
-            nextSelectedNode = this.selectedNode.traverseNextNode(true);
-            while (nextSelectedNode && !nextSelectedNode.selectable)
-                nextSelectedNode = nextSelectedNode.traverseNextNode(true);
-            handled = nextSelectedNode ? true : false;
-        } else if (event.keyIdentifier === "Left") {
-            if (this.selectedNode.expanded) {
-                if (event.altKey)
-                    this.selectedNode.collapseRecursively();
-                else
-                    this.selectedNode.collapse();
-                handled = true;
-            } else if (this.selectedNode.parent && !this.selectedNode.parent.root) {
-                handled = true;
-                if (this.selectedNode.parent.selectable) {
-                    nextSelectedNode = this.selectedNode.parent;
-                    handled = nextSelectedNode ? true : false;
-                } else if (this.selectedNode.parent)
-                    this.selectedNode.parent.collapse();
-            }
-        } else if (event.keyIdentifier === "Right") {
-            if (!this.selectedNode.revealed) {
-                this.selectedNode.reveal();
-                handled = true;
-            } else if (this.selectedNode.hasChildren) {
-                handled = true;
-                if (this.selectedNode.expanded) {
-                    nextSelectedNode = this.selectedNode.children[0];
-                    handled = nextSelectedNode ? true : false;
-                } else {
-                    if (event.altKey)
-                        this.selectedNode.expandRecursively();
-                    else
-                        this.selectedNode.expand();
-                }
-            }
-        } else if (event.keyCode === 8 || event.keyCode === 46) {
-            if (this._deleteCallback) {
-                handled = true;
-                this._deleteCallback(this.selectedNode);
-            }
-        } else if (isEnterKey(event)) {
-            if (this._editCallback) {
-                handled = true;
-                // The first child of the selected element is the <td class="0-column">,
-                // and that's what we want to edit.
-                this._startEditing(this.selectedNode._element.children[0]);
-            }
-        }
-
-        if (nextSelectedNode) {
-            nextSelectedNode.reveal();
-            nextSelectedNode.select();
-        }
-
-        if (handled) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    },
-
-    expand: function()
-    {
-        // This is the root, do nothing.
-    },
-
-    collapse: function()
-    {
-        // This is the root, do nothing.
-    },
-
-    reveal: function()
-    {
-        // This is the root, do nothing.
-    },
-
-    revealAndSelect: function()
-    {
-        // This is the root, do nothing.
-    },
-
-    dataGridNodeFromNode: function(target)
-    {
-        var rowElement = target.enclosingNodeOrSelfWithNodeName("tr");
-        return rowElement && rowElement._dataGridNode;
-    },
-
-    dataGridNodeFromPoint: function(x, y)
-    {
-        var node = this._dataTable.ownerDocument.elementFromPoint(x, y);
-        var rowElement = node.enclosingNodeOrSelfWithNodeName("tr");
-        return rowElement && rowElement._dataGridNode;
-    },
-
-    _clickInHeaderCell: function(event)
-    {
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
-        if (!cell || !cell.columnIdentifier || !cell.classList.contains("sortable"))
-            return;
-
-        var sortOrder = this.sortOrder;
-
-        if (this._sortColumnCell)
-            this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
-
-        if (cell == this._sortColumnCell) {
-            if (sortOrder === "ascending")
-                sortOrder = "descending";
-            else
-                sortOrder = "ascending";
-        }
-
-        this._sortColumnCell = cell;
-
-        cell.classList.add("sort-" + sortOrder);
-    
-        this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
-    },
-
-    _mouseoverColumnCollapser: function(event)
-    {
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
-        if (!cell || !cell.collapsesGroup)
-            return;
-
-        cell.classList.add("mouse-over-collapser");
-    },
-
-    _mouseoutColumnCollapser: function(event)
-    {
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
-        if (!cell || !cell.collapsesGroup)
-            return;
-
-        cell.classList.remove("mouse-over-collapser");
-    },
-
-    _clickInColumnCollapser: function(event)
-    {
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
-        if (!cell || !cell.collapsesGroup)
-            return;
-
-        this._collapseColumnGroupWithCell(cell);
-
-        event.stopPropagation();
-        event.preventDefault();
-    },
-
-    collapseColumnGroup: function(columnGroup)
-    {
-        var collapserColumn = null;
-        for (var columnIdentifier in this.columns) {
-            var column = this.columns[columnIdentifier];
-            if (column.collapsesGroup == columnGroup) {
-                collapserColumn = column;
-                break;
-            }
-        }
-
-        console.assert(collapserColumn);
-        if (!collapserColumn)
-            return;
-
-        var cell = this._headerTableHeaders[collapserColumn.identifier];
-        this._collapseColumnGroupWithCell(cell);
-    },
-
-    _collapseColumnGroupWithCell: function(cell)
-    {
-        var columnsWillCollapse = cell.classList.toggle("collapsed");
-
-        this.willToggleColumnGroup(cell.collapsesGroup, columnsWillCollapse);
-
-        var showOrHide = columnsWillCollapse ? this._hideColumn : this._showColumn;
-        for (var columnIdentifier in this.columns) {
-            var column = this.columns[columnIdentifier];
-            if (column.group === cell.collapsesGroup)
-                showOrHide.call(this, columnIdentifier);
-        }
-
-        var collapserButton = cell.querySelector(".collapser-button");
-        if (collapserButton)
-            collapserButton.title = columnsWillCollapse ? this._collapserButtonExpandColumnsToolTip() : this._collapserButtonCollapseColumnsToolTip();
-
-        this.didToggleColumnGroup(cell.collapsesGroup, columnsWillCollapse);
-    },
-
-    _collapserButtonCollapseColumnsToolTip: function()
-    {
-        return WebInspector.UIString("Collapse columns");
-    },
-
-    _collapserButtonExpandColumnsToolTip: function()
-    {
-        return WebInspector.UIString("Expand columns");
-    },
-
-    willToggleColumnGroup: function(columnGroup, willCollapse)
-    {
-        // Implemented by subclasses if needed.
-    },
-
-    didToggleColumnGroup: function(columnGroup, didCollapse)
-    {
-        // Implemented by subclasses if needed.
-    },
-
-    isColumnSortColumn: function(columnIdentifier)
-    {
-        return this._sortColumnCell === this._headerTableHeaders[columnIdentifier];
-    },
-
-    markColumnAsSortedBy: function(columnIdentifier, sortOrder)
-    {
-        if (this._sortColumnCell)
-            this._sortColumnCell.removeMatchingStyleClasses("sort-\\w+");
-        this._sortColumnCell = this._headerTableHeaders[columnIdentifier];
-        this._sortColumnCell.classList.add("sort-" + sortOrder);
-    },
-
-    headerTableHeader: function(columnIdentifier)
-    {
-        return this._headerTableHeaders[columnIdentifier];
-    },
-
-    _generateSortIndicatorImagesIfNeeded: function()
-    {
-        if (WebInspector.DataGrid._generatedSortIndicatorImages)
-            return;
-
-        WebInspector.DataGrid._generatedSortIndicatorImages = true;
-
-        var specifications = {};
-        specifications["arrow"] = {
-            fillColor: [81, 81, 81],
-            shadowColor: [255, 255, 255, 0.5],
-            shadowOffsetX: 0,
-            shadowOffsetY: 1,
-            shadowBlur: 0
-        };
-
-        generateColoredImagesForCSS("Images/SortIndicatorDownArrow.pdf", specifications, 9, 8, "data-grid-sort-indicator-down-");
-        generateColoredImagesForCSS("Images/SortIndicatorUpArrow.pdf", specifications, 9, 8, "data-grid-sort-indicator-up-");
-    },
-
-    _mouseDownInDataTable: function(event)
-    {
-        var gridNode = this.dataGridNodeFromNode(event.target);
-        if (!gridNode || !gridNode.selectable)
-            return;
-
-        if (gridNode.isEventWithinDisclosureTriangle(event))
-            return;
-
-        if (event.metaKey) {
-            if (gridNode.selected)
-                gridNode.deselect();
-            else
-                gridNode.select();
-        } else
-            gridNode.select();
-    },
-
-    _contextMenuInDataTable: function(event)
-    {
-        var contextMenu = new WebInspector.ContextMenu(event);
-
-        var gridNode = this.dataGridNodeFromNode(event.target);
-        if (this.dataGrid._refreshCallback && (!gridNode || gridNode !== this.creationNode))
-            contextMenu.appendItem(WebInspector.UIString("Refresh"), this._refreshCallback.bind(this));
-
-        if (gridNode && gridNode.selectable && !gridNode.isEventWithinDisclosureTriangle(event)) {
-            contextMenu.appendItem(WebInspector.UIString("Copy Row"), this._copyRow.bind(this, event.target));
-
-            if (this.dataGrid._editCallback) {
-                if (gridNode === this.creationNode)
-                    contextMenu.appendItem(WebInspector.UIString("Add New"), this._startEditing.bind(this, event.target));
-                else {
-                    var element = event.target.enclosingNodeOrSelfWithNodeName("td");
-                    var columnIdentifier = parseInt(element.className.match(/\b(\d+)-column\b/)[1], 10);
-                    var columnTitle = this.dataGrid.columns[columnIdentifier].title;
-                    contextMenu.appendItem(WebInspector.UIString("Edit “%s”").format(columnTitle), this._startEditing.bind(this, event.target));
-                }
-            }
-            if (this.dataGrid._deleteCallback && gridNode !== this.creationNode)
-                contextMenu.appendItem(WebInspector.UIString("Delete"), this._deleteCallback.bind(this, gridNode));
-        }
-
-        contextMenu.show();
-    },
-
-    _clickInDataTable: function(event)
-    {
-        var gridNode = this.dataGridNodeFromNode(event.target);
-        if (!gridNode || !gridNode.hasChildren)
-            return;
-
-        if (!gridNode.isEventWithinDisclosureTriangle(event))
-            return;
-
-        if (gridNode.expanded) {
-            if (event.altKey)
-                gridNode.collapseRecursively();
-            else
-                gridNode.collapse();
-        } else {
-            if (event.altKey)
-                gridNode.expandRecursively();
-            else
-                gridNode.expand();
-        }
-    },
-
-    _copyTextForDataGridNode: function(node)
-    {
-        var fields = [];
-        for (var columnIdentifier in node.dataGrid.columns)
-            fields.push(node.data[columnIdentifier]);
-
-        var tabSeparatedValues = fields.join("\t");
-        return tabSeparatedValues;
-    },
-
-    handleBeforeCopyEvent: function(event)
-    {
-        if (this.selectedNode && window.getSelection().isCollapsed)
-            event.preventDefault();
-    },
-
-    handleCopyEvent: function(event)
-    {
-        if (!this.selectedNode || !window.getSelection().isCollapsed)
-            return;
-
-        var copyText = this._copyTextForDataGridNode(this.selectedNode);
-        event.clipboardData.setData("text/plain", copyText);
-        event.stopPropagation();
-        event.preventDefault();
-    },
-
-    _copyRow: function(target)
-    {
-        var gridNode = this.dataGridNodeFromNode(target);
-        if (!gridNode)
-            return;
-
-        var copyText = this._copyTextForDataGridNode(gridNode);
-        InspectorFrontendHost.copyText(copyText);
-    },
-
-    get resizeMethod()
-    {
-        if (typeof this._resizeMethod === "undefined")
-            return WebInspector.DataGrid.ResizeMethod.Nearest;
-        return this._resizeMethod;
-    },
-
-    set resizeMethod(method)
-    {
-        this._resizeMethod = method;
-    },
-
-    _startResizerDragging: function(event)
-    {
-        if (event.button !== 0 || event.ctrlKey)
-            return;
-
-        this._currentResizer = event.target;
-        if (!this._currentResizer.rightNeighboringColumnID)
-            return;
-
-        WebInspector.elementDragStart(this._currentResizer, this._resizerDragging.bind(this),
-            this._endResizerDragging.bind(this), event, "col-resize");
-    },
-
-    _resizerDragging: function(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        var resizer = this._currentResizer;
-        if (!resizer)
-            return;
-
-        // Constrain the dragpoint to be within the containing div of the
-        // datagrid.
-        var dragPoint = event.clientX - this.element.totalOffsetLeft;
-        // Constrain the dragpoint to be within the space made up by the
-        // column directly to the left and the column directly to the right.
-        var leftCellIndex = resizer.leftNeighboringColumnID;
-        var rightCellIndex = resizer.rightNeighboringColumnID;
-        var firstRowCells = this.headerTableBody.rows[0].cells;
-        var leftEdgeOfPreviousColumn = 0;
-        for (var i = 0; i < leftCellIndex; i++)
-            leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
-
-        // Differences for other resize methods
-        if (this.resizeMethod == WebInspector.DataGrid.ResizeMethod.Last) {
-            rightCellIndex = this.resizers.length;
-        } else if (this.resizeMethod == WebInspector.DataGrid.ResizeMethod.First) {
-            leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth;
-            leftCellIndex = 0;
-        }
-
-        var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftCellIndex].offsetWidth + firstRowCells[rightCellIndex].offsetWidth;
-
-        // Give each column some padding so that they don't disappear.
-        var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding;
-        var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding;
-
-        dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
-
-        resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
-
-        var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTable.offsetWidth) * 100) + "%";
-        this._headerTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
-        this._dataTableColumnGroup.children[leftCellIndex].style.width = percentLeftColumn;
-
-        var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._dataTable.offsetWidth) * 100) + "%";
-        this._headerTableColumnGroup.children[rightCellIndex].style.width =  percentRightColumn;
-        this._dataTableColumnGroup.children[rightCellIndex].style.width = percentRightColumn;
-
-        this._positionResizers();
-        event.preventDefault();
-        this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
-    },
-
-    _endResizerDragging: function(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        WebInspector.elementDragEnd(event);
-        this._currentResizer = null;
-        this.dispatchEventToListeners(WebInspector.DataGrid.Event.DidLayout);
-    },
-
-    ColumnResizePadding: 10,
-
-    CenterResizerOverBorderAdjustment: 3,
-}
-
-WebInspector.DataGrid.ResizeMethod = {
-    Nearest: "nearest",
-    First: "first",
-    Last: "last"
-}
-
-WebInspector.DataGrid.prototype.__proto__ = WebInspector.Object.prototype;
-
-/**
- * @constructor
- * @extends {WebInspector.Object}
- * @param {boolean=} hasChildren
- */
-WebInspector.DataGridNode = function(data, hasChildren)
-{
-    this._expanded = false;
-    this._selected = false;
-    this._shouldRefreshChildren = true;
-    this._data = data || {};
-    this.hasChildren = hasChildren || false;
-    this.children = [];
-    this.dataGrid = null;
-    this.parent = null;
-    this.previousSibling = null;
-    this.nextSibling = null;
-    this.disclosureToggleWidth = 10;
-}
-
-WebInspector.DataGridNode.prototype = {
-    selectable: true,
-
-    get element()
-    {
-        if (this._element)
-            return this._element;
-
-        if (!this.dataGrid)
-            return null;
-
-        this._element = document.createElement("tr");
-        this._element._dataGridNode = this;
-
-        if (this.hasChildren)
-            this._element.classList.add("parent");
-        if (this.expanded)
-            this._element.classList.add("expanded");
-        if (this.selected)
-            this._element.classList.add("selected");
-        if (this.revealed)
-            this._element.classList.add("revealed");
-
-        this.createCells();
-        return this._element;
-    },
-
-    createCells: function()
-    {
-        for (var columnIdentifier in this.dataGrid.columns) {
-            var cell = this.createCell(columnIdentifier);
-            this._element.appendChild(cell);
-        }
-    },
-
-    get data()
-    {
-        return this._data;
-    },
-
-    set data(x)
-    {
-        this._data = x || {};
-        this.refresh();
-    },
-
-    get revealed()
-    {
-        if ("_revealed" in this)
-            return this._revealed;
-
-        var currentAncestor = this.parent;
-        while (currentAncestor && !currentAncestor.root) {
-            if (!currentAncestor.expanded) {
-                this._revealed = false;
-                return false;
-            }
-
-            currentAncestor = currentAncestor.parent;
-        }
-
-        this._revealed = true;
-        return true;
-    },
-
-    set hasChildren(x)
-    {
-        if (this._hasChildren === x)
-            return;
-
-        this._hasChildren = x;
-
-        if (!this._element)
-            return;
-
-        if (this._hasChildren)
-        {
-            this._element.classList.add("parent");
-            if (this.expanded)
-                this._element.classList.add("expanded");
-        }
-        else
-        {
-            this._element.classList.remove("parent");
-            this._element.classList.remove("expanded");
-        }
-    },
-
-    get hasChildren()
-    {
-        return this._hasChildren;
-    },
-
-    set revealed(x)
-    {
-        if (this._revealed === x)
-            return;
-
-        this._revealed = x;
-
-        if (this._element) {
-            if (this._revealed)
-                this._element.classList.add("revealed");
-            else
-                this._element.classList.remove("revealed");
-        }
-
-        for (var i = 0; i < this.children.length; ++i)
-            this.children[i].revealed = x && this.expanded;
-    },
-
-    get depth()
-    {
-        if ("_depth" in this)
-            return this._depth;
-        if (this.parent && !this.parent.root)
-            this._depth = this.parent.depth + 1;
-        else
-            this._depth = 0;
-        return this._depth;
-    },
-
-    get leftPadding()
-    {
-        if (typeof(this._leftPadding) === "number")
-            return this._leftPadding;
-        
-        this._leftPadding = this.depth * this.dataGrid.indentWidth;
-        return this._leftPadding;
-    },
-
-    get shouldRefreshChildren()
-    {
-        return this._shouldRefreshChildren;
-    },
-
-    set shouldRefreshChildren(x)
-    {
-        this._shouldRefreshChildren = x;
-        if (x && this.expanded)
-            this.expand();
-    },
-
-    get selected()
-    {
-        return this._selected;
-    },
-
-    set selected(x)
-    {
-        if (x)
-            this.select();
-        else
-            this.deselect();
-    },
-
-    get expanded()
-    {
-        return this._expanded;
-    },
-
-    set expanded(x)
-    {
-        if (x)
-            this.expand();
-        else
-            this.collapse();
-    },
-
-    refresh: function()
-    {
-        if (!this._element || !this.dataGrid)
-            return;
-
-        this._element.removeChildren();
-        this.createCells();
-    },
-
-    updateLayout: function()
-    {
-        // Implemented by subclasses if needed.
-    },
-
-    createCell: function(columnIdentifier)
-    {
-        var cell = document.createElement("td");
-        cell.className = columnIdentifier + "-column";
-
-        var alignment = this.dataGrid.aligned[columnIdentifier];
-        if (alignment)
-            cell.classList.add(alignment);
-
-        var group = this.dataGrid.groups[columnIdentifier];
-        if (group)
-            cell.classList.add("column-group-" + group);
-
-        var div = document.createElement("div");
-        var content = this.createCellContent(columnIdentifier, cell);
-        div.appendChild(content instanceof Node ? content : document.createTextNode(content));
-        cell.appendChild(div);
-
-        if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) {
-            cell.classList.add("disclosure");
-            if (this.leftPadding)
-                cell.style.setProperty("padding-left", this.leftPadding + "px");
-        }
-
-        return cell;
-    },
-
-    createCellContent: function(columnIdentifier)
-    {
-        return this.data[columnIdentifier];
-    },
-
-    elementWithColumnIdentifier: function(columnIdentifier)
-    {
-        var index = Object.keys(this.dataGrid.columns).indexOf(columnIdentifier);
-        if (index === -1)
-            return null;
-
-        return this._element.children[index];
-    },
-
-    // Share these functions with DataGrid. They are written to work with a DataGridNode this object.
-    appendChild: WebInspector.DataGrid.prototype.appendChild,
-    insertChild: WebInspector.DataGrid.prototype.insertChild,
-    removeChild: WebInspector.DataGrid.prototype.removeChild,
-    removeChildren: WebInspector.DataGrid.prototype.removeChildren,
-    removeChildrenRecursive: WebInspector.DataGrid.prototype.removeChildrenRecursive,
-
-    _recalculateSiblings: function(myIndex)
-    {
-        if (!this.parent)
-            return;
-
-        var previousChild = (myIndex > 0 ? this.parent.children[myIndex - 1] : null);
-
-        if (previousChild) {
-            previousChild.nextSibling = this;
-            this.previousSibling = previousChild;
-        } else
-            this.previousSibling = null;
-
-        var nextChild = this.parent.children[myIndex + 1];
-
-        if (nextChild) {
-            nextChild.previousSibling = this;
-            this.nextSibling = nextChild;
-        } else
-            this.nextSibling = null;
-    },
-
-    collapse: function()
-    {
-        if (this._element)
-            this._element.classList.remove("expanded");
-
-        this._expanded = false;
-
-        for (var i = 0; i < this.children.length; ++i)
-            this.children[i].revealed = false;
-
-        this.dispatchEventToListeners("collapsed");
-    },
-
-    collapseRecursively: function()
-    {
-        var item = this;
-        while (item) {
-            if (item.expanded)
-                item.collapse();
-            item = item.traverseNextNode(false, this, true);
-        }
-    },
-
-    expand: function()
-    {
-        if (!this.hasChildren || this.expanded)
-            return;
-
-        if (this.revealed && !this._shouldRefreshChildren)
-            for (var i = 0; i < this.children.length; ++i)
-                this.children[i].revealed = true;
-
-        if (this._shouldRefreshChildren) {
-            for (var i = 0; i < this.children.length; ++i)
-                this.children[i]._detach();
-
-            this.dispatchEventToListeners("populate");
-
-            if (this._attached) {
-                for (var i = 0; i < this.children.length; ++i) {
-                    var child = this.children[i];
-                    if (this.revealed)
-                        child.revealed = true;
-                    child._attach();
-                }
-            }
-
-            delete this._shouldRefreshChildren;
-        }
-
-        if (this._element)
-            this._element.classList.add("expanded");
-
-        this._expanded = true;
-
-        this.dispatchEventToListeners("expanded");
-    },
-
-    expandRecursively: function()
-    {
-        var item = this;
-        while (item) {
-            item.expand();
-            item = item.traverseNextNode(false, this);
-        }
-    },
-
-    reveal: function()
-    {
-        var currentAncestor = this.parent;
-        while (currentAncestor && !currentAncestor.root) {
-            if (!currentAncestor.expanded)
-                currentAncestor.expand();
-            currentAncestor = currentAncestor.parent;
-        }
-
-        this.element.scrollIntoViewIfNeeded(false);
-
-        this.dispatchEventToListeners("revealed");
-    },
-
-    /**
-     * @param {boolean=} supressSelectedEvent
-     */
-    select: function(supressSelectedEvent)
-    {
-        if (!this.dataGrid || !this.selectable || this.selected)
-            return;
-
-        if (this.dataGrid.selectedNode)
-            this.dataGrid.selectedNode.deselect();
-
-        this._selected = true;
-        this.dataGrid.selectedNode = this;
-
-        if (this._element)
-            this._element.classList.add("selected");
-
-        if (!supressSelectedEvent)
-            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.SelectedNodeChanged);
-    },
-
-    revealAndSelect: function()
-    {
-        this.reveal();
-        this.select();
-    },
-
-    /**
-     * @param {boolean=} supressDeselectedEvent
-     */
-    deselect: function(supressDeselectedEvent)
-    {
-        if (!this.dataGrid || this.dataGrid.selectedNode !== this || !this.selected)
-            return;
-
-        this._selected = false;
-        this.dataGrid.selectedNode = null;
-
-        if (this._element)
-            this._element.classList.remove("selected");
-
-        if (!supressDeselectedEvent)
-            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.SelectedNodeChanged);
-    },
-
-    traverseNextNode: function(skipHidden, stayWithin, dontPopulate, info)
-    {
-        if (!dontPopulate && this.hasChildren)
-            this.dispatchEventToListeners("populate");
-
-        if (info)
-            info.depthChange = 0;
-
-        var node = (!skipHidden || this.revealed) ? this.children[0] : null;
-        if (node && (!skipHidden || this.expanded)) {
-            if (info)
-                info.depthChange = 1;
-            return node;
-        }
-
-        if (this === stayWithin)
-            return null;
-
-        node = (!skipHidden || this.revealed) ? this.nextSibling : null;
-        if (node)
-            return node;
-
-        node = this;
-        while (node && !node.root && !((!skipHidden || node.revealed) ? node.nextSibling : null) && node.parent !== stayWithin) {
-            if (info)
-                info.depthChange -= 1;
-            node = node.parent;
-        }
-
-        if (!node)
-            return null;
-
-        return (!skipHidden || node.revealed) ? node.nextSibling : null;
-    },
-
-    traversePreviousNode: function(skipHidden, dontPopulate)
-    {
-        var node = (!skipHidden || this.revealed) ? this.previousSibling : null;
-        if (!dontPopulate && node && node.hasChildren)
-            node.dispatchEventToListeners("populate");
-
-        while (node && ((!skipHidden || (node.revealed && node.expanded)) ? node.children.lastValue : null)) {
-            if (!dontPopulate && node.hasChildren)
-                node.dispatchEventToListeners("populate");
-            node = ((!skipHidden || (node.revealed && node.expanded)) ? node.children.lastValue : null);
-        }
-
-        if (node)
-            return node;
-
-        if (!this.parent || this.parent.root)
-            return null;
-
-        return this.parent;
-    },
-
-    isEventWithinDisclosureTriangle: function(event)
-    {
-        if (!this.hasChildren)
-            return false;
-        var cell = event.target.enclosingNodeOrSelfWithNodeName("td");
-        if (!cell.classList.contains("disclosure"))
-            return false;
-        
-        var left = cell.totalOffsetLeft + this.leftPadding;
-        return event.pageX >= left && event.pageX <= left + this.disclosureToggleWidth;
-    },
-
-    _attach: function()
-    {
-        if (!this.dataGrid || this._attached)
-            return;
-
-        this._attached = true;
-
-        var nextElement = null;
-
-        var previousGridNode = this.traversePreviousNode(true, true);
-        if (previousGridNode && previousGridNode.element.parentNode)
-            nextElement = previousGridNode.element.nextSibling;
-        else if (!previousGridNode)
-            nextElement = this.dataGrid.dataTableBody.firstChild;
-
-        // If there is no next grid node, then append before the last child since the last child is the filler row.
-        console.assert(this.dataGrid.dataTableBody.lastChild.classList.contains("filler"));
-        if (!nextElement)
-            nextElement = this.dataGrid.dataTableBody.lastChild;
-
-        this.dataGrid.dataTableBody.insertBefore(this.element, nextElement);
-
-        if (this.expanded)
-            for (var i = 0; i < this.children.length; ++i)
-                this.children[i]._attach();
-    },
-
-    _detach: function()
-    {
-        if (!this._attached)
-            return;
-
-        this._attached = false;
-
-        if (this._element && this._element.parentNode)
-            this._element.parentNode.removeChild(this._element);
-
-        for (var i = 0; i < this.children.length; ++i)
-            this.children[i]._detach();
-    },
-
-    savePosition: function()
-    {
-        if (this._savedPosition)
-            return;
-
-        if (!this.parent)
-            throw("savePosition: Node must have a parent.");
-        this._savedPosition = {
-            parent: this.parent,
-            index: this.parent.children.indexOf(this)
-        };
-    },
-
-    restorePosition: function()
-    {
-        if (!this._savedPosition)
-            return;
-
-        if (this.parent !== this._savedPosition.parent)
-            this._savedPosition.parent.insertChild(this, this._savedPosition.index);
-
-        delete this._savedPosition;
-    }
-}
-
-WebInspector.DataGridNode.prototype.__proto__ = WebInspector.Object.prototype;
-
-/**
- * @constructor
- * @extends {WebInspector.DataGridNode}
- */
-WebInspector.CreationDataGridNode = function(data, hasChildren)
-{
-    WebInspector.DataGridNode.call(this, data, hasChildren);
-    this.isCreationNode = true;
-}
-
-WebInspector.CreationDataGridNode.prototype = {
-    makeNormal: function()
-    {
-        delete this.isCreationNode;
-        delete this.makeNormal;
-    }
-}
-
-WebInspector.CreationDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseContentView.css b/Source/WebInspectorUI/UserInterface/DatabaseContentView.css
deleted file mode 100644
index d2de0f614..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseContentView.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.storage-view {    
-    /* Added so fonts look good */
-    font-family: Menlo, monospace;
-    font-size: 11px;
-}
-
-.storage-view .data-grid {
-    border: none;
-    height: 100%;
-}
-
-.storage-view .storage-table-error {
-    color: rgb(66%, 33%, 33%);
-}
-
-.storage-view.query {
-    padding: 2px 0;
-    overflow-y: overlay;
-    overflow-x: hidden;
-    -webkit-text-size-adjust: auto;
-}
-
-.database-query-prompt {
-    position: relative;
-    padding: 4px 22px 4px 11px;
-    min-height: 16px;
-    white-space: pre-wrap;
-    -webkit-user-modify: read-write-plaintext-only;
-    -webkit-user-select: text;
-    
-    /* Added to remove outline */
-    outline: none;
-}
-
-.database-user-query::before, .database-query-prompt::before, .database-query-result::before {
-    position: absolute;
-    display: block;
-    z-index: 1;
-    content: "";
-    left: 4px;
-    top: 10px;
-    width: 10px;
-    height: 10px;
-    margin-top: -5px;
-    -webkit-user-select: none;
-}
-
-.database-query-prompt::before {
-    background-image: url(Images/UserInputPrompt.pdf);
-}
-
-.database-user-query {
-    position: relative;
-    border-bottom: 1px solid rgb(245, 245, 245);
-    padding: 4px 22px 4px 18px;
-    min-height: 16px;
-}
-
-.database-user-query::before {
-    background-image: url(Images/UserInputPromptPrevious.pdf);
-}
-
-.database-query-text {
-    color: rgb(0, 128, 255);
-    -webkit-user-select: text;
-}
-
-.database-query-result {
-    position: relative;
-    padding: 4px 0 1px 18px;
-    min-height: 16px;
-    margin-left: -18px;
-}
-
-.database-query-result.error {
-    color: red;
-    -webkit-user-select: text;
-}
-
-.database-query-result.error::before {
-    background-image: url(Images/ErrorSmall.pdf);
-    background-size: 10px 10px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseContentView.js b/Source/WebInspectorUI/UserInterface/DatabaseContentView.js
deleted file mode 100644
index 3be676d67..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseContentView.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseContentView = function(representedObject)
-{
-    WebInspector.ContentView.call(this, representedObject);
-
-    this.database = representedObject;
-
-    this.element.classList.add("storage-view");
-    this.element.classList.add("query");
-    this.element.classList.add("monospace");
-
-    this._promptElement = document.createElement("div");
-    this._promptElement.className = "database-query-prompt";
-    this.element.appendChild(this._promptElement);
-
-    this.prompt = new WebInspector.ConsolePrompt(this, "text/x-sql");
-    this._promptElement.appendChild(this.prompt.element);
-
-    this.element.addEventListener("click", this._messagesClicked.bind(this), true);
-}
-
-WebInspector.DatabaseContentView.Event = {
-    SchemaUpdated: "SchemaUpdated"
-}
-
-WebInspector.DatabaseContentView.prototype = {
-    constructor: WebInspector.DatabaseContentView,
-
-    shown: function()
-    {
-        this.prompt.shown();
-    },
-
-    updateLayout: function()
-    {
-        this.prompt.updateLayout();
-
-        var results = this.element.querySelectorAll(".database-query-result");
-        for (var i = 0; i < results.length; ++i) {
-            var resultElement = results[i];
-            if (resultElement.dataGrid)
-                resultElement.dataGrid.updateLayout();
-        }
-    },
-
-    _messagesClicked: function()
-    {
-        this.prompt.focus();
-    },
-    
-    consolePromptCompletionsNeeded: function(prompt, defaultCompletions, base, prefix, suffix)
-    {
-        var results = [];
-
-        prefix = prefix.toLowerCase();
-
-        function accumulateMatches(textArray)
-        {
-            for (var i = 0; i < textArray.length; ++i) {
-                var lowerCaseText = textArray[i].toLowerCase();
-                if (lowerCaseText.startsWith(prefix))
-                    results.push(textArray[i]);
-            }
-        }
-
-        function tableNamesCallback(tableNames)
-        {
-            accumulateMatches(tableNames);
-            accumulateMatches(["SELECT", "FROM", "WHERE", "LIMIT", "DELETE FROM", "CREATE", "DROP", "TABLE", "INDEX", "UPDATE", "INSERT INTO", "VALUES"]);
-
-            this.prompt.updateCompletions(results, " ");
-        }
-
-        this.database.getTableNames(tableNamesCallback.bind(this));
-    },
-
-    consolePromptTextCommitted: function(prompt, query)
-    {
-        this.database.executeSQL(query, this._queryFinished.bind(this, query), this._queryError.bind(this, query));
-    },
-
-    _queryFinished: function(query, columnNames, values)
-    {
-        var dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
-        var trimmedQuery = query.trim();
-
-        if (dataGrid) {
-            dataGrid.element.classList.add("inline");
-            this._appendViewQueryResult(trimmedQuery, dataGrid);
-            dataGrid.autoSizeColumns(5);
-        }
-
-        if (trimmedQuery.match(/^create /i) || trimmedQuery.match(/^drop table /i))
-            this.dispatchEventToListeners(WebInspector.DatabaseContentView.Event.SchemaUpdated, this.database);
-    },
-
-    _queryError: function(query, error)
-    {
-        if (error.message)
-            var message = error.message;
-        else if (error.code == 2)
-            var message = WebInspector.UIString("Database no longer has expected version.");
-        else
-            var message = WebInspector.UIString("An unexpected error %s occurred.").format(error.code);
-
-        this._appendErrorQueryResult(query, message);
-    },
-
-    /**
-     * @param {string} query
-     * @param {WebInspector.View} view
-     */
-    _appendViewQueryResult: function(query, view)
-    {
-        var resultElement = this._appendQueryResult(query);
-
-        // Add our DataGrid with the results to the database query result div.
-        resultElement.dataGrid = view;
-        resultElement.appendChild(view.element);
-
-        this._promptElement.scrollIntoView(false);
-    },
-
-    /**
-     * @param {string} query
-     * @param {string} errorText
-     */
-    _appendErrorQueryResult: function(query, errorText)
-    {
-        var resultElement = this._appendQueryResult(query);
-        resultElement.classList.add("error")
-        resultElement.textContent = errorText;
-
-        this._promptElement.scrollIntoView(false);
-    },
-
-    _appendQueryResult: function(query)
-    {
-        var element = document.createElement("div");
-        element.className = "database-user-query";
-        this.element.insertBefore(element, this._promptElement);
-
-        var commandTextElement = document.createElement("span");
-        commandTextElement.className = "database-query-text";
-        commandTextElement.textContent = query;
-        element.appendChild(commandTextElement);
-
-        var resultElement = document.createElement("div");
-        resultElement.className = "database-query-result";
-        element.appendChild(resultElement);
-        return resultElement;
-    }
-}
-
-WebInspector.DatabaseContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseHostTreeElement.js b/Source/WebInspectorUI/UserInterface/DatabaseHostTreeElement.js
deleted file mode 100644
index 5a52d2013..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseHostTreeElement.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseHostTreeElement = function(host)
-{
-    WebInspector.StorageTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
-
-    this._host = host;
-
-    this.hasChildren = true;
-};
-
-WebInspector.DatabaseHostTreeElement.prototype = {
-    constructor: WebInspector.DatabaseHostTreeElement,
-
-    // Public
-
-    get name()
-    {
-        return WebInspector.displayNameForHost(this._host);
-    },
-
-    get categoryName()
-    {
-        return WebInspector.UIString("Databases");
-    }
-};
-
-WebInspector.DatabaseHostTreeElement.prototype.__proto__ = WebInspector.StorageTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseIcon.css b/Source/WebInspectorUI/UserInterface/DatabaseIcon.css
deleted file mode 100644
index d0dcdbc42..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseIcon.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.database-icon .icon {
-    content: -webkit-image-set(url(Images/Database.png) 1x, url(Images/Database@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseObject.js b/Source/WebInspectorUI/UserInterface/DatabaseObject.js
deleted file mode 100644
index c3693e3a5..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseObject.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseObject = function(id, host, name, version)
-{
-    this._id = id;
-    this._host = host ? host : WebInspector.UIString("Local File");
-    this._name = name;
-    this._version = version;
-};
-
-WebInspector.DatabaseObject.prototype = {
-    constructor: WebInspector.DatabaseObject,
-    
-    get id()
-    {
-        return this._id;
-    },
-
-    get host()
-    {
-        return this._host;
-    },
-
-    get name()
-    {
-        return this._name;
-    },
-    
-    get version()
-    {
-        return this._version;
-    },
-    
-    getTableNames: function(callback)
-    {
-        function sortingCallback(error, names)
-        {
-            if (!error)
-                callback(names.sort());
-        }
-        
-        DatabaseAgent.getDatabaseTableNames(this._id, sortingCallback);
-    },
-
-    executeSQL: function(query, successCallback, errorCallback)
-    {
-        function queryCallback(columnNames, values, sqlError)
-        {
-            if (sqlError) {
-                var message;
-
-                switch (sqlError.code) {
-                case SQLException.VERSION_ERR:
-                    message = WebInspector.UIString("Database no longer has expected version.");
-                    break;
-                case SQLException.TOO_LARGE_ERR:
-                    message = WebInspector.UIString("Data returned from the database is too large.");
-                    break;
-                default:
-                    message = WebInspector.UIString("An unexpected error occurred.");
-                    break;
-                }
-
-                errorCallback(message);
-                return;
-            }
-
-            successCallback(columnNames, values);
-        }
-
-        function callback(error, result)
-        {
-            if (error) {
-                errorCallback(WebInspector.UIString("An unexpected error occurred."));
-                return;
-            }
-
-            // COMPATIBILITY (iOS 6): Newer versions of DatabaseAgent.executeSQL can delay before
-            // sending the results. The version on iOS 6 instead returned a transactionId that
-            // would be used later in the sqlTransactionSucceeded or sqlTransactionFailed events.
-            if ("transactionId" in result) {
-                if (!result.success) {
-                    errorCallback(WebInspector.UIString("An unexpected error occurred."));
-                    return;
-                }
-
-                WebInspector.DatabaseObserver._callbacks[result.transactionId] = queryCallback;
-                return;
-            }
-
-            queryCallback(result.columnNames, result.values, result.sqlError);
-        }
-
-        // COMPATIBILITY (iOS 6): Since the parameters of the DatabaseAgent.executeSQL callback differ
-        // we need the result object to lookup parameters by name.
-        callback.expectsResultObject = true;
-
-        DatabaseAgent.executeSQL(this._id, query, callback);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseObserver.js b/Source/WebInspectorUI/UserInterface/DatabaseObserver.js
deleted file mode 100644
index d389b6a6f..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseObserver.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.DatabaseObserver._callbacks = {};
-
-WebInspector.DatabaseObserver.prototype = {
-    constructor: WebInspector.DatabaseObserver,
-
-    // Events defined by the "Database" domain (see WebCore/inspector/Inspector.json).
-
-    addDatabase: function(database)
-    {
-        WebInspector.storageManager.databaseWasAdded(database.id, database.domain, database.name, database.version);
-    },
-
-    // COMPATIBILITY (iOS 6): This event was removed in favor of a more async DatabaseAgent.executeSQL.
-    sqlTransactionSucceeded: function(transactionId, columnNames, values)
-    {
-        if (!WebInspector.DatabaseObserver._callbacks[transactionId])
-            return;
-
-        var callback = WebInspector.DatabaseObserver._callbacks[transactionId];
-        delete WebInspector.DatabaseObserver._callbacks[transactionId];
-
-        if (callback)
-            callback(columnNames, values, null);
-    },
-
-    // COMPATIBILITY (iOS 6): This event was removed in favor of a more async DatabaseAgent.executeSQL.
-    sqlTransactionFailed: function(transactionId, sqlError)
-    {
-        if (!WebInspector.DatabaseObserver._callbacks[transactionId])
-            return;
-
-        var callback = WebInspector.DatabaseObserver._callbacks[transactionId];
-        delete WebInspector.DatabaseObserver._callbacks[transactionId];
-
-        if (callback)
-            callback(null, null, sqlError);
-    }
-};
-
-WebInspector.DatabaseObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.css b/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.css
deleted file mode 100644
index b25a67390..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.database-table > .data-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.js b/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.js
deleted file mode 100644
index 4eab7127d..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTableContentView.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseTableContentView = function(representedObject)
-{
-    WebInspector.ContentView.call(this, representedObject);
-    
-    this.element.classList.add(WebInspector.DatabaseTableContentView.StyleClassName);
-    
-    this.update();
-};
-
-WebInspector.DatabaseTableContentView.StyleClassName = "database-table";
-
-WebInspector.DatabaseTableContentView.prototype = {
-    constructor: WebInspector.DatabaseTableContentView,
-
-    // Public
-
-    update: function()
-    {
-        this.representedObject.database.executeSQL("SELECT * FROM \"" + this._escapeTableName(this.representedObject.name) + "\"", this._queryFinished.bind(this), this._queryError.bind(this));
-    },
-
-    updateLayout: function()
-    {
-        if (this._dataGrid)
-            this._dataGrid.updateLayout();
-    },
-
-    get scrollableElements()
-    {
-        if (!this._dataGrid)
-            return [];
-        return [this._dataGrid.scrollContainer];
-    },
-
-    // Private
-
-    _escapeTableName: function(name)
-    {
-        return name.replace(/\"/g, "\"\"");
-    },
-
-    _queryFinished: function(columnNames, values)
-    {
-        // It would be nice to do better than creating a new data grid each time the table is updated, but the table updating
-        // doesn't happen very frequently. Additionally, using DataGrid's createSortableDataGrid makes our code much cleaner and it knows
-        // how to sort arbitrary columns.
-        this.element.removeChildren();
-
-        this._dataGrid = new WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
-        if (!this._dataGrid || !this._dataGrid.element) {
-            // If the DataGrid is empty, then we were returned a table with no columns. This can happen when a table has
-            // no data, the SELECT query only returns column names when there is data.
-            this.element.removeChildren();
-            this.element.appendChild(WebInspector.createMessageTextView(WebInspector.UIString("The “%s”\ntable is empty.").format(this.representedObject.name), false));
-            return;
-        }
-
-        this.element.appendChild(this._dataGrid.element);
-        this._dataGrid.updateLayout();
-    },
-
-    _queryError: function(error)
-    {
-        this.element.removeChildren();
-        this.element.appendChild(WebInspector.createMessageTextView(WebInspector.UIString("An error occured trying to\nread the “%s” table.").format(this.representedObject.name), true));
-    }
-};
-
-WebInspector.DatabaseTableContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableIcon.css b/Source/WebInspectorUI/UserInterface/DatabaseTableIcon.css
deleted file mode 100644
index 15408948e..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTableIcon.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.database-table-icon .icon {
-    content: -webkit-image-set(url(Images/DatabaseTable.png) 1x, url(Images/DatabaseTable@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableObject.js b/Source/WebInspectorUI/UserInterface/DatabaseTableObject.js
deleted file mode 100644
index 273683981..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTableObject.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseTableObject = function(name, database)
-{
-    console.assert(database instanceof WebInspector.DatabaseObject);
-    
-    this._name = name;
-    this._database = database;
-};
-
-WebInspector.DatabaseTableObject.prototype = {
-    constructor: WebInspector.DatabaseTableObject,
-    
-    get name()
-    {
-        return this._name;
-    },
-    
-    get database()
-    {
-        return this._database;
-    }
-};
-
-WebInspector.DatabaseTableObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTableTreeElement.js b/Source/WebInspectorUI/UserInterface/DatabaseTableTreeElement.js
deleted file mode 100644
index b4a5d4696..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTableTreeElement.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseTableTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
-
-    WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName, representedObject.name, null, representedObject, false);
-
-    this.small = true;
-};
-
-WebInspector.DatabaseTableTreeElement.DatabaseTableIconStyleClassName = "database-table-icon";
-
-WebInspector.DatabaseTableTreeElement.prototype = {
-    constructor: WebInspector.DatabaseTableTreeElement
-};
-
-WebInspector.DatabaseTableTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DatabaseTreeElement.js b/Source/WebInspectorUI/UserInterface/DatabaseTreeElement.js
deleted file mode 100644
index cb4799e9e..000000000
--- a/Source/WebInspectorUI/UserInterface/DatabaseTreeElement.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DatabaseTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.DatabaseObject);
-
-    WebInspector.GeneralTreeElement.call(this, WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName, representedObject.name, null, representedObject, true);
-
-    this.small = true;
-    this.hasChildren = false;
-
-    // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
-    // the tree element (which will get a list of tables) when the element is created.
-    this.onpopulate();
-};
-
-WebInspector.DatabaseTreeElement.DatabaseIconStyleClassName = "database-icon";
-
-WebInspector.DatabaseTreeElement.prototype = {
-    constructor: WebInspector.DatabaseTreeElement,
-
-    // Overrides from TreeElement (Private)
-
-    oncollapse: function()
-    {
-        this.shouldRefreshChildren = true;
-    },
-
-    onpopulate: function()
-    {
-        if (this.children.length && !this.shouldRefreshChildren)
-            return;
-
-        this.shouldRefreshChildren = false;
-
-        this.removeChildren();
-
-        function tableNamesCallback(tableNames)
-        {
-            for (var i = 0; i < tableNames.length; ++i) {
-                var databaseTable = new WebInspector.DatabaseTableObject(tableNames[i], this.representedObject);
-                this.appendChild(new WebInspector.DatabaseTableTreeElement(databaseTable));
-            }
-
-            this.hasChildren = tableNames.length;
-        }
-
-        this.representedObject.getTableNames(tableNamesCallback.bind(this));
-    }
-};
-
-WebInspector.DatabaseTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Debug/Bootstrap.js b/Source/WebInspectorUI/UserInterface/Debug/Bootstrap.js
new file mode 100644
index 000000000..f261fa0d8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Debug/Bootstrap.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2015 University of Washington.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// This function is invoked after the inspector has loaded.
+WebInspector.runBootstrapOperations = function() {
+    WebInspector.showDebugUISetting = new WebInspector.Setting("show-debug-ui", false);
+
+    // Toggle Debug UI setting.
+    new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Option | WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "D", () => {
+        WebInspector.showDebugUISetting.value = !WebInspector.showDebugUISetting.value;
+    });
+
+    // Reload the Web Inspector.
+    new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Option | WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "R", () => {
+        window.location.reload();
+    });
+
+    let toolTip = "Enable dump inspector messages to console";
+    let activatedToolTip = "Disable dump inspector messages to console";
+    let debugInspectorToolbarButton = new WebInspector.ActivateButtonToolbarItem("debug-inspector", toolTip, activatedToolTip, null, "Images/Console.svg");
+    debugInspectorToolbarButton.activated = InspectorBackend.dumpInspectorProtocolMessages;
+    WebInspector.toolbar.addToolbarItem(debugInspectorToolbarButton, WebInspector.Toolbar.Section.CenterRight);
+    debugInspectorToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, () => {
+        InspectorBackend.dumpInspectorProtocolMessages = !InspectorBackend.dumpInspectorProtocolMessages;
+        debugInspectorToolbarButton.activated = InspectorBackend.dumpInspectorProtocolMessages;
+    });
+
+    function updateDebugUI()
+    {
+        debugInspectorToolbarButton.hidden = !WebInspector.showDebugUISetting.value;
+    }
+
+    WebInspector.showDebugUISetting.addEventListener(WebInspector.Setting.Event.Changed, () => {
+        updateDebugUI();
+        WebInspector.notifications.dispatchEventToListeners(WebInspector.Notification.DebugUIEnabledDidChange);
+    });
+
+    updateDebugUI();
+}
diff --git a/Source/WebInspectorUI/UserInterface/Debug/CapturingProtocolTracer.js b/Source/WebInspectorUI/UserInterface/Debug/CapturingProtocolTracer.js
new file mode 100644
index 000000000..f44754a8e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Debug/CapturingProtocolTracer.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CapturingProtocolTracer = class CapturingProtocolTracer extends WebInspector.ProtocolTracer
+{
+    constructor()
+    {
+        super();
+
+        this._trace = new WebInspector.ProtocolTrace;
+    }
+
+    // Public
+
+    get trace()
+    {
+        return this._trace;
+    }
+
+    logFrontendException(message, exception)
+    {
+        this._processEntry({type: "exception", message: this._stringifyMessage(message), exception});
+    }
+
+    logProtocolError(message, error)
+    {
+        this._processEntry({type: "error", message: this._stringifyMessage(message), error});
+    }
+
+    logFrontendRequest(message)
+    {
+        this._processEntry({type: "request", message: this._stringifyMessage(message)});
+    }
+
+    logDidHandleResponse(message, timings = null)
+    {
+        let entry = {type: "response", message: this._stringifyMessage(message)};
+        if (timings)
+            entry.timings = Object.shallowCopy(timings);
+
+        this._processEntry(entry);
+    }
+
+    logDidHandleEvent(message, timings = null)
+    {
+        let entry = {type: "event", message: this._stringifyMessage(message)};
+        if (timings)
+            entry.timings = Object.shallowCopy(timings);
+
+        this._processEntry(entry);
+    }
+
+    _stringifyMessage(message)
+    {
+        try {
+            return JSON.stringify(message);
+        } catch (e) {
+            console.error("couldn't stringify object:", message, e);
+            return {};
+        }
+    }
+
+    _processEntry(entry)
+    {
+        this._trace.addEntry(entry);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Debug/ProtocolTrace.js b/Source/WebInspectorUI/UserInterface/Debug/ProtocolTrace.js
new file mode 100644
index 000000000..a26a965d8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Debug/ProtocolTrace.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProtocolTrace = class ProtocolTrace extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._entries = [];
+    }
+
+    // Public
+
+    addEntry(entry) {
+        this._entries.push(entry);
+    }
+
+    get saveData() {
+        let now = new Date();
+        let YYYY = now.getFullYear();
+        let MM = now.getMonth() + 1;
+        let DD = now.getDate();
+        let hh = now.getHours();
+        let mm = now.getMinutes();
+        let ss = now.getSeconds();
+
+        // This follows the file name of screen shots on OS X (en-US):
+        // "Protocol Trace 2015-12-31 at 12.43.04.json".
+        // When the Intl API is implemented, we can do a better job.
+        let filename = WebInspector.unlocalizedString(`Protocol Trace at ${YYYY}-${MM}-${DD} ${hh}.${mm}.${ss}.json`);
+        return {url: "web-inspector:///" + encodeURIComponent(filename), content: JSON.stringify(this._entries)};
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css b/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css
new file mode 100644
index 000000000..a67648a14
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.css
@@ -0,0 +1,113 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sheet-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: var(--z-index-uncaught-exception-sheet);
+    background-color: hsl(0, 0%, 96%);
+}
+
+.uncaught-exception-sheet {
+    padding: 50px 55px 50px 65px;
+    font-family: '-webkit-system-font';
+    font-size: 11pt;
+    overflow-y: auto;
+    min-width: 400px;
+    color: hsl(0, 0%, 40%);
+}
+
+.uncaught-exception-sheet a {
+    text-decoration: underline;
+    color: hsl(240, 55%, 30%);
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 97%;
+}
+.uncaught-exception-sheet a:hover,
+.uncaught-exception-sheet a:active {
+    color: hsl(240, 55%, 25%);
+}
+
+.uncaught-exception-sheet h1,
+.uncaught-exception-sheet h2 {
+    font-size: 24px;
+    line-height: 28px;
+    margin-bottom: 0px;
+    margin-top: 10px;
+    font-weight: normal;
+}
+
+.uncaught-exception-sheet h2 {
+    margin-top: 40px;
+}
+
+.uncaught-exception-sheet h1 > img {
+    height: 35px;
+    position: relative;
+    margin-left: -50px;
+    margin-top: -5px;
+    float: left;
+}
+
+.uncaught-exception-sheet h2 > img {
+    height: 25px;
+    position: relative;
+    margin-left: -45px;
+    margin-top: 0px;
+    float: left;
+}
+
+.uncaught-exception-sheet dl {
+    max-width: 600px;
+}
+
+.uncaught-exception-sheet dt {
+    font-style: italic;
+    font-size: 17px;
+}
+
+.uncaught-exception-sheet dd {
+    margin: 10px 0 20px 10px;
+    font-size: 13px;
+    line-height: 18px;
+}
+
+.uncaught-exception-sheet ul {
+    font-family: Menlo, monospace;
+    font-size: 12px;
+    line-height: 18px;
+    margin: 0 0 0 2px;
+    padding: 0;
+}
+
+.uncaught-exception-sheet li {
+    margin-bottom: 20px;
+    word-break: break-word;
+    -webkit-user-select: text;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.js b/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.js
new file mode 100644
index 000000000..578ba0596
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Debug/UncaughtExceptionReporter.js
@@ -0,0 +1,203 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function() {
+
+const windowEvents = ["beforecopy", "copy", "click", "dragover", "focus"];
+const documentEvents = ["focus", "blur", "resize", "keydown", "keyup", "mousemove", "pagehide", "contextmenu"];
+
+function stopEventPropagation(event) {
+    if (event.target.classList && event.target.classList.contains("bypass-event-blocking"))
+        return;
+
+    event.stopPropagation();
+}
+
+function blockEventHandlers() {
+    // FIXME (151959): text selection on the sheet doesn't work for some reason.
+    for (let name of windowEvents)
+        window.addEventListener(name, stopEventPropagation, true);
+    for (let name of documentEvents)
+        document.addEventListener(name, stopEventPropagation, true);
+}
+
+function unblockEventHandlers() {
+    for (let name of windowEvents)
+        window.removeEventListener(name, stopEventPropagation, true);
+    for (let name of documentEvents)
+        document.removeEventListener(name, stopEventPropagation, true);
+}
+
+function handleUncaughtException(event) {
+    let exceptionRecord = {
+        message: event.message,
+        url: parseURL(event.filename).lastPathComponent,
+        lineNumber: event.lineno,
+        columnNumber: event.colno
+    };
+
+    if (!window.__uncaughtExceptions)
+        window.__uncaughtExceptions = [];
+
+    const loadCompleted = window.__frontendCompletedLoad;
+    const isFirstException = !window.__uncaughtExceptions.length;
+
+    // If an uncaught exception happens after loading is done, only show
+    // the first such exception. Many others may follow if internal
+    // state has been corrupted, but these are unhelpful to report.
+    if (!loadCompleted || isFirstException)
+        window.__uncaughtExceptions.push(exceptionRecord);
+
+    // If WebInspector.contentLoaded throws an uncaught exception, then these
+    // listeners will not work correctly because the UI is not fully loaded.
+    // Prevent any event handlers from running in an inconsistent state.
+    if (isFirstException)
+        blockEventHandlers();
+
+    if (isFirstException && !loadCompleted) {
+        // Signal that loading is done even though we can't guarantee that
+        // evaluating code on the inspector page will do anything useful.
+        // Without this, the frontend host may never show the window.
+        if (InspectorFrontendHost)
+            InspectorFrontendHost.loaded();
+
+        // Don't tell InspectorFrontendAPI that loading is done, since it can
+        // clear some of the error boilerplate page by accident.
+    }
+
+    createErrorSheet();
+}
+
+function dismissErrorSheet() {
+    unblockEventHandlers();
+
+    window.__sheetElement.remove();
+    window.__sheetElement = null;
+    window.__uncaughtExceptions = [];
+
+    // Do this last in case WebInspector's internal state is corrupted.
+    WebInspector.updateWindowTitle();
+
+    // FIXME (151959): tell the frontend host to hide a draggable title bar.
+}
+
+function createErrorSheet() {
+    // Early errors like parse errors may happen in the <head>, so attach
+    // a body if none exists yet. Code below expects document.body to exist.
+    if (!document.body)
+        document.write("<body></body></html>");
+
+    // FIXME (151959): tell the frontend host to show a draggable title bar.
+    if (InspectorFrontendHost)
+        InspectorFrontendHost.inspectedURLChanged("Internal Error");
+
+    // Only allow one sheet element at a time.
+    if (window.__sheetElement) {
+        window.__sheetElement.remove();
+        window.__sheetElement = null;
+    }
+
+    const loadCompleted = window.__frontendCompletedLoad;
+    let firstException = window.__uncaughtExceptions[0];
+
+    // Inlined from Utilities.js, because that file may not have loaded.
+    function insertWordBreakCharacters(text) {
+        return text.replace(/([\/;:\)\]\}&?])/g, "$1\u200b");
+    }
+
+    // This trampoline is necessary since none of our functions will be
+    // in scope of an href="javascript:"-style evaluation.
+    function handleLinkClick(event) {
+        if (event.target.tagName !== "A")
+            return;
+        if (event.target.id === "dismiss-error-sheet")
+            dismissErrorSheet();
+    }
+
+    let inspectedPageURL = "(unknown)";
+    try {
+        inspectedPageURL = WebInspector.frameResourceManager.mainFrame.url;
+    } catch (e) { }
+
+    let formattedErrorDetails = window.__uncaughtExceptions.map((entry) => `${entry.message} (at ${entry.url}:${entry.lineNumber}:${entry.columnNumber})`);
+    let detailsForBugReport = formattedErrorDetails.map((line) => ` - ${line}`).join("\n");
+    let encodedBugDescription = encodeURIComponent(`-------
+Auto-generated details:
+
+Inspected URL:        ${inspectedPageURL}
+Loading completed:    ${!!loadCompleted}
+Frontend User Agent:  ${window.navigator.userAgent}
+Uncaught exceptions:
+${detailsForBugReport}
+-------
+
+* STEPS TO REPRODUCE
+1. What were you doing? Include setup or other preparations to reproduce the exception.
+2. Include explicit, accurate, and minimal steps taken. Do not include extraneous or irrelevant steps.
+
+* NOTES
+Document any additional information that might be useful in resolving the problem, such as screen shots or other included attachments.
+`);
+    let encodedBugTitle = encodeURIComponent(`Uncaught Exception: ${firstException.message}`);
+    let prefilledBugReportLink = `https://bugs.webkit.org/enter_bug.cgi?alias=&assigned_to=webkit-unassigned%40lists.webkit.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_severity=Normal&bug_status=NEW&comment=${encodedBugDescription}&component=Web%20Inspector&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&dependson=&description=&flag_type-1=X&flag_type-3=X&form_name=enter_bug&keywords=&op_sys=All&priority=P2&product=WebKit&rep_platform=All&short_desc=${encodedBugTitle}&version=WebKit%20Nightly%20Build`;
+    let detailsForHTML = formattedErrorDetails.map((line) => `<li>${insertWordBreakCharacters(line)}</li>`).join("\n");
+
+    let dismissOptionHTML = !loadCompleted ? "" : `<dt>A frivolous exception will not stop me!</dt>
+        <dd><a class="bypass-event-blocking" id="dismiss-error-sheet">Click to close this view</a> and return
+        to the Web Inspector without reloading. However, some things might not work without reloading if the error corrupted the Inspector's internal state.</dd>`;
+
+    let sheetElement = window.__sheetElement = document.createElement("div");
+    sheetElement.classList.add("sheet-container");
+    sheetElement.innerHTML = `<div class="uncaught-exception-sheet">
+    <h1>
+    <img src="Images/Errors.svg">
+    Web Inspector encountered an internal error.
+    </h1>
+    <dl>
+        <dd>Usually, this is caused by a syntax error while modifying the Web Inspector
+        UI, or running an updated frontend with out-of-date WebKit build.</dt>
+        <dt>I didn't do anything...?</dt>
+        <dd>If you don't think you caused this error to happen,
+        <a href="${prefilledBugReportLink}">click to file a pre-populated
+        bug with this information</a>. It is possible that someone else broke it by accident.</dd>
+        <dt>Oops, can I try again?</dt>
+        <dd><a href="javascript:window.location.reload()">Click to reload the Inspector</a>
+        again after making local changes.</dd>
+        ${dismissOptionHTML}
+    </dl>
+    <h2>
+    <img src="Images/Console.svg">
+    These uncaught exceptions caused the problem:
+    </h2>
+    <p><ul>${detailsForHTML}</ul></p>
+    </div>`;
+
+    sheetElement.addEventListener("click", handleLinkClick, true);
+    document.body.appendChild(sheetElement);
+}
+
+window.addEventListener("error", handleUncaughtException);
+
+})();
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerManager.js b/Source/WebInspectorUI/UserInterface/DebuggerManager.js
deleted file mode 100644
index dafb8eaed..000000000
--- a/Source/WebInspectorUI/UserInterface/DebuggerManager.js
+++ /dev/null
@@ -1,644 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DebuggerManager = function()
-{
-    WebInspector.Object.call(this);
-
-    DebuggerAgent.enable();
-
-    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisplayLocationDidChange, this._breakpointDisplayLocationDidChange, this);
-    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._breakpointDisabledStateDidChange, this);
-    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ConditionDidChange, this._breakpointConditionDidChange, this);
-
-    window.addEventListener("pagehide", this._inspectorClosing.bind(this));
-
-    this._allExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-exceptions", false);
-    this._allUncaughtExceptionsBreakpointEnabledSetting = new WebInspector.Setting("break-on-all-uncaught-exceptions", false);
-
-    var specialBreakpointLocation = new WebInspector.SourceCodeLocation(null, Infinity, Infinity);
-
-    this._allExceptionsBreakpoint = new WebInspector.Breakpoint(specialBreakpointLocation, !this._allExceptionsBreakpointEnabledSetting.value);
-    this._allExceptionsBreakpoint.resolved = true;
-
-    this._allUncaughtExceptionsBreakpoint = new WebInspector.Breakpoint(specialBreakpointLocation, !this._allUncaughtExceptionsBreakpointEnabledSetting.value);
-
-    this._breakpoints = [];
-    this._breakpointURLMap = {};
-    this._breakpointScriptIdentifierMap = {};
-    this._breakpointIdMap = {};
-
-    this._scriptIdMap = {};
-    this._scriptURLMap = {};
-
-    this._breakpointsSetting = new WebInspector.Setting("breakpoints", []);
-    this._breakpointsEnabledSetting = new WebInspector.Setting("breakpoints-enabled", true);
-
-    DebuggerAgent.setBreakpointsActive(this._breakpointsEnabledSetting.value);
-
-    this._updateBreakOnExceptionsState();
-
-    var savedBreakpoints = this._breakpointsSetting.value;
-    for (var i = 0; i < savedBreakpoints.length; ++i) {
-        var breakpoint = new WebInspector.Breakpoint(savedBreakpoints[i]);
-        this.addBreakpoint(breakpoint, true);
-    }
-};
-
-WebInspector.DebuggerManager.Event = {
-    BreakpointAdded: "debugger-manager-breakpoint-added",
-    BreakpointRemoved: "debugger-manager-breakpoint-removed",
-    BreakpointMoved: "debugger-manager-breakpoint-moved",
-    Paused: "debugger-manager-paused",
-    Resumed: "debugger-manager-resumed",
-    CallFramesDidChange: "debugger-manager-call-frames-did-change",
-    ActiveCallFrameDidChange: "debugger-manager-active-call-frame-did-change",
-    ScriptAdded: "debugger-manager-script-added",
-    ScriptsCleared: "debugger-manager-scripts-cleared"
-};
-
-WebInspector.DebuggerManager.prototype = {
-    constructor: WebInspector.DebuggerManager,
-
-    // Public
-
-    get breakpointsEnabled()
-    {
-        return this._breakpointsEnabledSetting.value;
-    },
-
-    set breakpointsEnabled(enabled)
-    {
-        if (this._breakpointsEnabled === enabled)
-            return;
-
-        this._breakpointsEnabledSetting.value = enabled;
-
-        this._allExceptionsBreakpoint.dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
-        this._allUncaughtExceptionsBreakpoint.dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
-
-        for (var i = 0; i < this._breakpoints.length; ++i)
-            this._breakpoints[i].dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
-
-        DebuggerAgent.setBreakpointsActive(enabled);
-
-        this._updateBreakOnExceptionsState();
-    },
-
-    get paused()
-    {
-        return this._paused;
-    },
-
-    get callFrames()
-    {
-        return this._callFrames;
-    },
-
-    get activeCallFrame()
-    {
-        return this._activeCallFrame;
-    },
-
-    set activeCallFrame(callFrame)
-    {
-        if (callFrame === this._activeCallFrame)
-            return;
-
-        this._activeCallFrame = callFrame || null;
-
-        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
-    },
-
-    pause: function()
-    {
-        DebuggerAgent.pause();
-    },
-
-    resume: function()
-    {
-        DebuggerAgent.resume();
-    },
-
-    stepOver: function()
-    {
-        DebuggerAgent.stepOver();
-    },
-
-    stepInto: function()
-    {
-        DebuggerAgent.stepInto();
-    },
-
-    stepOut: function()
-    {
-        DebuggerAgent.stepOut();
-    },
-
-    get allExceptionsBreakpoint()
-    {
-        return this._allExceptionsBreakpoint;
-    },
-
-    get allUncaughtExceptionsBreakpoint()
-    {
-        return this._allUncaughtExceptionsBreakpoint;
-    },
-
-    get breakpoints()
-    {
-        return this._breakpoints;
-    },
-
-    breakpointsForSourceCode: function(sourceCode)
-    {
-        console.assert(sourceCode instanceof WebInspector.Resource || sourceCode instanceof WebInspector.Script);
-
-        if (sourceCode instanceof WebInspector.SourceMapResource) {
-            var mappedResourceBreakpoints = [];
-            var originalSourceCodeBreakpoints = this.breakpointsForSourceCode(sourceCode.sourceMap.originalSourceCode);
-            return originalSourceCodeBreakpoints.filter(function(breakpoint) {
-                return breakpoint.sourceCodeLocation.displaySourceCode === sourceCode;
-            });
-        }
-
-        if (sourceCode.url in this._breakpointURLMap) {
-            var urlBreakpoint = this._breakpointURLMap[sourceCode.url] || [];
-            this._associateBreakpointsWithSourceCode(urlBreakpoint, sourceCode);
-            return urlBreakpoint;
-        }
-
-        if (sourceCode instanceof WebInspector.Script && sourceCode.id in this._breakpointScriptIdentifierMap) {
-            var scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[sourceCode.id] || [];
-            this._associateBreakpointsWithSourceCode(scriptIdentifierBreakpoints, sourceCode);
-            return scriptIdentifierBreakpoints;
-        }
-
-        return [];
-    },
-
-    scriptForIdentifier: function(id)
-    {
-        return this._scriptIdMap[id] || null;
-    },
-
-    scriptsForURL: function(url)
-    {
-        // FIXME: This may not be safe. A Resource's URL may differ from a Script's URL.
-        return this._scriptURLMap[url] || [];
-    },
-
-    addBreakpoint: function(breakpoint, skipEventDispatch)
-    {
-        console.assert(breakpoint);
-        if (!breakpoint)
-            return;
-
-        if (breakpoint.url) {
-            var urlBreakpoints = this._breakpointURLMap[breakpoint.url];
-            if (!urlBreakpoints)
-                urlBreakpoints = this._breakpointURLMap[breakpoint.url] = [];
-            urlBreakpoints.push(breakpoint);
-        }
-
-        if (breakpoint.scriptIdentifier) {
-            var scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier];
-            if (!scriptIdentifierBreakpoints)
-                scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier] = [];
-            scriptIdentifierBreakpoints.push(breakpoint);
-        }
-
-        this._breakpoints.push(breakpoint);
-
-        if (!breakpoint.disabled)
-            this._setBreakpoint(breakpoint);
-
-        if (!skipEventDispatch)
-            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointAdded, {breakpoint: breakpoint});
-    },
-
-    removeBreakpoint: function(breakpoint)
-    {
-        console.assert(breakpoint);
-        if (!breakpoint)
-            return;
-
-        console.assert(this.isBreakpointRemovable(breakpoint));
-        if (!this.isBreakpointRemovable(breakpoint))
-            return;
-
-        this._breakpoints.remove(breakpoint);
-
-        if (breakpoint.id)
-            this._removeBreakpoint(breakpoint);
-
-        if (breakpoint.url) {
-            var urlBreakpoints = this._breakpointURLMap[breakpoint.url];
-            if (urlBreakpoints) {
-                urlBreakpoints.remove(breakpoint);
-                if (!urlBreakpoints.length)
-                    delete this._breakpointURLMap[breakpoint.url];
-            }
-        }
-
-        if (breakpoint.scriptIdentifier) {
-            var scriptIdentifierBreakpoints = this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier];
-            if (scriptIdentifierBreakpoints) {
-                scriptIdentifierBreakpoints.remove(breakpoint);
-                if (!scriptIdentifierBreakpoints.length)
-                    delete this._breakpointScriptIdentifierMap[breakpoint.scriptIdentifier];
-            }
-        }
-
-        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointRemoved, {breakpoint: breakpoint});
-    },
-
-    breakpointResolved: function(breakpointIdentifier, location)
-    {
-        // Called from WebInspector.DebuggerObserver.
-
-        var breakpoint = this._breakpointIdMap[breakpointIdentifier];
-        console.assert(breakpoint);
-        if (!breakpoint)
-            return;
-
-        console.assert(breakpoint.id === breakpointIdentifier);
-
-        breakpoint.resolved = true;
-    },
-
-    reset: function()
-    {
-        // Called from WebInspector.DebuggerObserver.
-
-        var wasPaused = this._paused;
-
-        WebInspector.Script.resetUniqueDisplayNameNumbers();
-
-        this._paused = false;
-        this._scriptIdMap = {};
-        this._scriptURLMap = {};
-
-        this._ignoreBreakpointDisplayLocationDidChangeEvent = true;
-
-        // Mark all the breakpoints as unresolved. They will be reported as resolved when
-        // breakpointResolved is called as the page loads.
-        for (var i = 0; i < this._breakpoints.length; ++i) {
-            var breakpoint = this._breakpoints[i];
-            breakpoint.resolved = false;
-            if (breakpoint.sourceCodeLocation.sourceCode)
-                breakpoint.sourceCodeLocation.sourceCode = null;
-        }
-
-        delete this._ignoreBreakpointDisplayLocationDidChangeEvent;
-
-        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ScriptsCleared);
-
-        if (wasPaused)
-            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
-    },
-
-    debuggerDidPause: function(callFramesPayload)
-    {
-        // Called from WebInspector.DebuggerObserver.
-
-        if (this._delayedResumeTimeout) {
-            clearTimeout(this._delayedResumeTimeout);
-            delete this._delayedResumeTimeout;
-        }
-
-        var wasStillPaused = this._paused;
-
-        this._paused = true;
-        this._callFrames = [];
-
-        for (var i = 0; i < callFramesPayload.length; ++i) {
-            var callFramePayload = callFramesPayload[i];
-            var sourceCodeLocation = this._sourceCodeLocationFromPayload(callFramePayload.location);
-            if (!sourceCodeLocation)
-                continue;
-            var thisObject = WebInspector.RemoteObject.fromPayload(callFramePayload.this);
-            var scopeChain = this._scopeChainFromPayload(callFramePayload.scopeChain);
-            var callFrame = new WebInspector.CallFrame(callFramePayload.callFrameId, sourceCodeLocation, callFramePayload.functionName, thisObject, scopeChain);
-            this._callFrames.push(callFrame);
-        }
-
-        this._activeCallFrame = this._callFrames[0];
-
-        if (!wasStillPaused)
-            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Paused);
-        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange);
-        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
-    },
-
-    debuggerDidResume: function()
-    {
-        // Called from WebInspector.DebuggerObserver.
-
-        function delayedWork()
-        {
-            delete this._delayedResumeTimeout;
-
-            this._paused = false;
-            this._callFrames = null;
-            this._activeCallFrame = null;
-
-            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.Resumed);
-            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.CallFramesDidChange);
-            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange);
-        }
-
-        // We delay clearing the state and firing events so the user interface does not flash
-        // between brief steps or successive breakpoints.
-        this._delayedResumeTimeout = setTimeout(delayedWork.bind(this), 50);
-    },
-
-    scriptDidParse: function(scriptIdentifier, url, isContentScript, startLine, startColumn, endLine, endColumn, sourceMapURL)
-    {
-        // Don't add the script again if it is already known.
-        if (this._scriptIdMap[scriptIdentifier]) {
-            console.assert(this._scriptIdMap[scriptIdentifier].url === url);
-            console.assert(this._scriptIdMap[scriptIdentifier].range.startLine === startLine);
-            console.assert(this._scriptIdMap[scriptIdentifier].range.startColumn === startColumn);
-            console.assert(this._scriptIdMap[scriptIdentifier].range.endLine === endLine);
-            console.assert(this._scriptIdMap[scriptIdentifier].range.endColumn === endColumn);
-            return;
-        }
-
-        var script = new WebInspector.Script(scriptIdentifier, new WebInspector.TextRange(startLine, startColumn, endLine, endColumn), url, isContentScript, sourceMapURL);
-
-        this._scriptIdMap[scriptIdentifier] = script;
-
-        if (script.url) {
-            var scripts = this._scriptURLMap[script.url];
-            if (!scripts)
-                scripts = this._scriptURLMap[script.url] = [];
-            scripts.push(script);
-        }
-
-        this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.ScriptAdded, {script: script});
-    },
-
-    isBreakpointRemovable: function(breakpoint)
-    {
-        return breakpoint !== this._allExceptionsBreakpoint && breakpoint !== this._allUncaughtExceptionsBreakpoint;
-    },
-
-    isBreakpointEditable: function(breakpoint)
-    {
-        return this.isBreakpointRemovable(breakpoint);
-    },
-
-    // Private
-
-    _sourceCodeLocationFromPayload: function(payload)
-    {
-        var script = this._scriptIdMap[payload.scriptId];
-        console.assert(script);
-        if (!script)
-            return null;
-
-        return script.createSourceCodeLocation(payload.lineNumber, payload.columnNumber);
-    },
-
-    _scopeChainFromPayload: function(payload)
-    {
-        var scopeChain = [];
-        for (var i = 0; i < payload.length; ++i)
-            scopeChain.push(this._scopeChainNodeFromPayload(payload[i]));
-        return scopeChain;
-    },
-
-    _scopeChainNodeFromPayload: function(payload)
-    {
-        var type = null;
-        switch (payload.type) {
-        case "local":
-            type = WebInspector.ScopeChainNode.Type.Local;
-            break;
-        case "global":
-            type = WebInspector.ScopeChainNode.Type.Global;
-            break;
-        case "with":
-            type = WebInspector.ScopeChainNode.Type.With;
-            break;
-        case "closure":
-            type = WebInspector.ScopeChainNode.Type.Closure;
-            break;
-        case "catch":
-            type = WebInspector.ScopeChainNode.Type.Catch;
-            break;
-        default:
-            console.error("Unknown type: " + payload.type);
-        }
-
-        var object = WebInspector.RemoteObject.fromPayload(payload.object);
-        return new WebInspector.ScopeChainNode(type, object);
-    },
-
-    _setBreakpoint: function(breakpoint, callback)
-    {
-        console.assert(!breakpoint.id);
-        console.assert(!breakpoint.disabled);
-
-        if (breakpoint.id || breakpoint.disabled)
-            return;
-
-        function didSetBreakpoint(error, breakpointIdentifier)
-        {
-            if (error)
-                return;
-
-            this._breakpointIdMap[breakpointIdentifier] = breakpoint;
-
-            breakpoint.id = breakpointIdentifier;
-            breakpoint.resolved = true;
-
-            if (typeof callback === "function")
-                callback();
-        }
-
-        // The breakpoint will be resolved again by calling DebuggerAgent, so mark it as unresolved.
-        // If something goes wrong it will stay unresolved and show up as such in the user interface.
-        breakpoint.resolved = false;
-
-        if (breakpoint.url)
-            DebuggerAgent.setBreakpointByUrl(breakpoint.sourceCodeLocation.lineNumber, breakpoint.url, undefined, breakpoint.sourceCodeLocation.columnNumber, breakpoint.condition, didSetBreakpoint.bind(this));
-        else if (breakpoint.scriptIdentifier)
-            DebuggerAgent.setBreakpoint({scriptId: breakpoint.scriptIdentifier, lineNumber: breakpoint.sourceCodeLocation.lineNumber, columnNumber: breakpoint.sourceCodeLocation.columnNumber}, breakpoint.condition, didSetBreakpoint.bind(this));
-    },
-
-    _removeBreakpoint: function(breakpoint, callback)
-    {
-        console.assert(breakpoint.id);
-
-        if (!breakpoint.id)
-            return;
-
-        function didRemoveBreakpoint(error)
-        {
-            delete this._breakpointIdMap[breakpoint.id];
-
-            breakpoint.id = null;
-
-            // Don't reset resolved here since we want to keep disabled breakpoints looking like they
-            // are resolved in the user interface. They will get marked as unresolved in reset.
-
-            if (typeof callback === "function")
-                callback();
-        }
-
-        DebuggerAgent.removeBreakpoint(breakpoint.id, didRemoveBreakpoint.bind(this));
-    },
-
-    _breakpointDisplayLocationDidChange: function(event)
-    {
-        if (this._ignoreBreakpointDisplayLocationDidChangeEvent)
-            return;
-
-        var breakpoint = event.target;
-        if (!breakpoint.id || breakpoint.disabled)
-            return;
-
-        // Remove the breakpoint with its old id.
-        this._removeBreakpoint(breakpoint, breakpointRemoved.bind(this));
-
-        function breakpointRemoved()
-        {
-            // Add the breakpoint at its new lineNumber and get a new id.
-            this._setBreakpoint(breakpoint);
-
-            this.dispatchEventToListeners(WebInspector.DebuggerManager.Event.BreakpointMoved, {breakpoint: breakpoint});
-        }
-    },
-
-    _breakpointDisabledStateDidChange: function(event)
-    {
-        var breakpoint = event.target;
-
-        if (breakpoint === this._allExceptionsBreakpoint) {
-            this._allExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
-            this._updateBreakOnExceptionsState();
-            return;
-        }
-
-        if (breakpoint === this._allUncaughtExceptionsBreakpoint) {
-            this._allUncaughtExceptionsBreakpointEnabledSetting.value = !breakpoint.disabled;
-            this._updateBreakOnExceptionsState();
-            return;
-        }
-
-        if (breakpoint.disabled)
-            this._removeBreakpoint(breakpoint);
-        else
-            this._setBreakpoint(breakpoint);
-    },
-
-    _breakpointConditionDidChange: function(event)
-    {
-        var breakpoint = event.target;
-        if (breakpoint.disabled)
-            return;
-
-        console.assert(this.isBreakpointEditable(breakpoint));
-        if (!this.isBreakpointEditable(breakpoint))
-            return;
-
-        // Remove the breakpoint with its old id.
-        this._removeBreakpoint(breakpoint, breakpointRemoved.bind(this));
-
-        function breakpointRemoved()
-        {
-            // Add the breakpoint with its new condition and get a new id.
-            this._setBreakpoint(breakpoint);
-        }
-    },
-
-    _updateBreakOnExceptionsState: function()
-    {
-        var state = "none";
-
-        if (this._breakpointsEnabledSetting.value) {
-            if (!this._allExceptionsBreakpoint.disabled)
-                state = "all";
-            else if (!this._allUncaughtExceptionsBreakpoint.disabled)
-                state = "uncaught";
-        }
-
-        switch (state) {
-        case "all":
-            // Mark the uncaught breakpoint as unresolved since "all" includes "uncaught".
-            // That way it is clear in the user interface that the breakpoint is ignored.
-            this._allUncaughtExceptionsBreakpoint.resolved = false;
-            break;
-        case "uncaught":
-        case "none":
-            // Mark the uncaught breakpoint as resolved again.
-            this._allUncaughtExceptionsBreakpoint.resolved = true;
-            break;
-        }
-
-        DebuggerAgent.setPauseOnExceptions(state);
-    },
-
-    _inspectorClosing: function(event)
-    {
-        this._saveBreakpoints();
-    },
-
-    _saveBreakpoints: function()
-    {
-        var savedBreakpoints = [];
-
-        for (var i = 0; i < this._breakpoints.length; ++i) {
-            var breakpoint = this._breakpoints[i];
-
-            // Only breakpoints with URLs can be saved. Breakpoints for transient scripts can't.
-            if (!breakpoint.url)
-                continue;
-
-            savedBreakpoints.push(breakpoint.info);
-        }
-
-        this._breakpointsSetting.value = savedBreakpoints;
-    },
-
-    _associateBreakpointsWithSourceCode: function(breakpoints, sourceCode)
-    {
-        this._ignoreBreakpointDisplayLocationDidChangeEvent = true;
-
-        for (var i = 0; i < breakpoints.length; ++i) {
-            var breakpoint = breakpoints[i];
-            if (breakpoint.sourceCodeLocation.sourceCode === null)
-                breakpoint.sourceCodeLocation.sourceCode = sourceCode;
-            // SourceCodes can be unequal if the SourceCodeLocation is associated with a Script and we are looking at the Resource.
-            console.assert(breakpoint.sourceCodeLocation.sourceCode === sourceCode || breakpoint.sourceCodeLocation.sourceCode.url === sourceCode.url);
-        }
-
-        delete this._ignoreBreakpointDisplayLocationDidChangeEvent;
-    }
-};
-
-WebInspector.DebuggerManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerObserver.js b/Source/WebInspectorUI/UserInterface/DebuggerObserver.js
deleted file mode 100644
index dff661ed2..000000000
--- a/Source/WebInspectorUI/UserInterface/DebuggerObserver.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DebuggerObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.DebuggerObserver.prototype = {
-    constructor: WebInspector.DebuggerObserver,
-
-    // Events defined by the "Debugger" domain (see WebCore/inspector/Inspector.json).
-
-    globalObjectCleared: function()
-    {
-        WebInspector.debuggerManager.reset();
-    },
-
-    scriptParsed: function(scriptId, url, startLine, startColumn, endLine, endColumn, isContentScript, sourceMapURL, hasSourceURL)
-    {
-        WebInspector.debuggerManager.scriptDidParse(scriptId, url, isContentScript, startLine, startColumn, endLine, endColumn, sourceMapURL);
-    },
-
-    scriptFailedToParse: function(url, scriptSource, startLine, errorLine, errorMessage)
-    {
-        // FIXME: Not implemented.
-    },
-
-    breakpointResolved: function(breakpointId, location)
-    {
-        WebInspector.debuggerManager.breakpointResolved(breakpointId, location);
-    },
-
-    paused: function(callFrames, reason, data)
-    {
-        WebInspector.debuggerManager.debuggerDidPause(callFrames);
-    },
-
-    resumed: function()
-    {
-        WebInspector.debuggerManager.debuggerDidResume();
-    }
-};
-
-WebInspector.DebuggerObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.css b/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.css
deleted file mode 100644
index 54d283e72..000000000
--- a/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar > .panel.debugger > .content {
-    top: 22px;
-}
-
-.sidebar > .panel.debugger > .navigation-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.js
deleted file mode 100644
index 1d92251a8..000000000
--- a/Source/WebInspectorUI/UserInterface/DebuggerSidebarPanel.js
+++ /dev/null
@@ -1,497 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DebuggerSidebarPanel = function()
-{
-    WebInspector.NavigationSidebarPanel.call(this, "debugger", WebInspector.UIString("Debugger"), "Images/NavigationItemBug.pdf", "3", true);
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceChanged, this);
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceAdded, this);
-
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.CallFramesDidChange, this._debuggerCallFramesDidChange, this);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptAdded, this);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptsCleared, this._scriptsCleared, this);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
-
-    this._pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.Command, "Y", this._debuggerPauseResumeButtonClicked.bind(this));
-    this._stepOverKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F6, this._debuggerStepOverButtonClicked.bind(this));
-    this._stepIntoKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F7, this._debuggerStepIntoButtonClicked.bind(this));
-    this._stepOutKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F8, this._debuggerStepOutButtonClicked.bind(this));
-
-    this._pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.Slash, this._debuggerPauseResumeButtonClicked.bind(this));
-    this._stepOverAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.SingleQuote, this._debuggerStepOverButtonClicked.bind(this));
-    this._stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepIntoButtonClicked.bind(this));
-    this._stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.Command, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepOutButtonClicked.bind(this));
-
-    this._navigationBar = new WebInspector.NavigationBar;
-    this.element.appendChild(this._navigationBar.element);
-
-    var toolTip = WebInspector.UIString("Enable all breakpoints");
-    var altToolTip = WebInspector.UIString("Disable all breakpoints");
-
-    this._debuggerBreakpointsButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-breakpoints", toolTip, altToolTip, "Images/Breakpoints.pdf", 16, 16);
-    this._debuggerBreakpointsButtonItem.activated = WebInspector.debuggerManager.breakpointsEnabled;
-    this._debuggerBreakpointsButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._breakpointsToggleButtonClicked, this);
-    this._navigationBar.addNavigationItem(this._debuggerBreakpointsButtonItem);
-
-    toolTip = WebInspector.UIString("Pause script execution (%s or %s)").format(this._pauseOrResumeKeyboardShortcut.displayName, this._pauseOrResumeAlternateKeyboardShortcut.displayName);
-    altToolTip = WebInspector.UIString("Continue script execution (%s or %s)").format(this._pauseOrResumeKeyboardShortcut.displayName, this._pauseOrResumeAlternateKeyboardShortcut.displayName);
-
-    this._debuggerPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("debugger-pause-resume", toolTip, altToolTip, "Images/Pause.pdf", "Images/Resume.pdf", 16, 16);
-    this._debuggerPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerPauseResumeButtonClicked, this);
-    this._navigationBar.addNavigationItem(this._debuggerPauseResumeButtonItem);
-
-    this._debuggerStepOverButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-over", WebInspector.UIString("Step over (%s or %s)").format(this._stepOverKeyboardShortcut.displayName, this._stepOverAlternateKeyboardShortcut.displayName), "Images/StepOver.pdf", 16, 16);
-    this._debuggerStepOverButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerStepOverButtonClicked, this);
-    this._debuggerStepOverButtonItem.enabled = false;
-    this._navigationBar.addNavigationItem(this._debuggerStepOverButtonItem);
-
-    this._debuggerStepIntoButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-into", WebInspector.UIString("Step into (%s or %s)").format(this._stepIntoKeyboardShortcut.displayName, this._stepIntoAlternateKeyboardShortcut.displayName), "Images/StepInto.pdf", 16, 16);
-    this._debuggerStepIntoButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerStepIntoButtonClicked, this);
-    this._debuggerStepIntoButtonItem.enabled = false;
-    this._navigationBar.addNavigationItem(this._debuggerStepIntoButtonItem);
-
-    this._debuggerStepOutButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-out", WebInspector.UIString("Step out (%s or %s)").format(this._stepOutKeyboardShortcut.displayName, this._stepOutAlternateKeyboardShortcut.displayName), "Images/StepOut.pdf", 16, 16);
-    this._debuggerStepOutButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerStepOutButtonClicked, this);
-    this._debuggerStepOutButtonItem.enabled = false;
-    this._navigationBar.addNavigationItem(this._debuggerStepOutButtonItem);
-
-    // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
-    this.element.classList.add(WebInspector.DebuggerSidebarPanel.OffsetSectionsStyleClassName);
-
-    this._allExceptionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.allExceptionsBreakpoint, WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName, WebInspector.UIString("All Exceptions"));
-    this._allUncaughtExceptionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.allUncaughtExceptionsBreakpoint, WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName, WebInspector.UIString("All Uncaught Exceptions"));
-
-    this.filterBar.placeholder = WebInspector.UIString("Filter Breakpoint List");
-
-    this._breakpointsContentTreeOutline = this.contentTreeOutline;
-    this._breakpointsContentTreeOutline.onselect = this._treeElementSelected.bind(this);
-    this._breakpointsContentTreeOutline.ondelete = this._breakpointTreeOutlineDeleteTreeElement.bind(this);
-    this._breakpointsContentTreeOutline.oncontextmenu = this._breakpointTreeOutlineContextMenuTreeElement.bind(this);
-
-    this._breakpointsContentTreeOutline.appendChild(this._allExceptionsBreakpointTreeElement);
-    this._breakpointsContentTreeOutline.appendChild(this._allUncaughtExceptionsBreakpointTreeElement);
-
-    var breakpointsRow = new WebInspector.DetailsSectionRow;
-    breakpointsRow.element.appendChild(this._breakpointsContentTreeOutline.element);
-
-    var breakpointsGroup = new WebInspector.DetailsSectionGroup([breakpointsRow]);
-    var breakpointsSection = new WebInspector.DetailsSection("breakpoints", WebInspector.UIString("Breakpoints"), [breakpointsGroup]);
-    this.contentElement.appendChild(breakpointsSection.element);
-
-    this._callStackContentTreeOutline = this.createContentTreeOutline(true);
-    this._callStackContentTreeOutline.onselect = this._treeElementSelected.bind(this);
-
-    this._callStackRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Call Frames"));
-    this._callStackRow.showEmptyMessage();
-
-    var callStackGroup = new WebInspector.DetailsSectionGroup([this._callStackRow]);
-    this._callStackSection = new WebInspector.DetailsSection("call-stack", WebInspector.UIString("Call Stack"), [callStackGroup]);
-
-    WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisplayLocationDidChange, this._breakpointDisplayLocationDidChange, this);
-};
-
-WebInspector.DebuggerSidebarPanel.OffsetSectionsStyleClassName = "offset-sections";
-WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName = "breakpoint-exception-icon";
-
-WebInspector.DebuggerSidebarPanel.prototype = {
-    constructor: WebInspector.DebuggerSidebarPanel,
-
-    // Private
-
-    _debuggerPauseResumeButtonClicked: function(event)
-    {
-        if (WebInspector.debuggerManager.paused)
-            WebInspector.debuggerManager.resume();
-        else {
-            this._debuggerPauseResumeButtonItem.enabled = false;
-            WebInspector.debuggerManager.pause();
-        }
-    },
-
-    _debuggerStepOverButtonClicked: function(event)
-    {
-        WebInspector.debuggerManager.stepOver();
-    },
-
-    _debuggerStepIntoButtonClicked: function(event)
-    {
-        WebInspector.debuggerManager.stepInto();
-    },
-
-    _debuggerStepOutButtonClicked: function(event)
-    {
-        WebInspector.debuggerManager.stepOut();
-    },
-
-    _debuggerDidPause: function(event)
-    {
-        this.contentElement.insertBefore(this._callStackSection.element, this.contentElement.firstChild);
-
-        this._debuggerPauseResumeButtonItem.enabled = true;
-        this._debuggerPauseResumeButtonItem.toggled = true;
-        this._debuggerStepOverButtonItem.enabled = true;
-        this._debuggerStepIntoButtonItem.enabled = true;
-        this._debuggerStepOutButtonItem.enabled = true;
-    },
-
-    _debuggerDidResume: function(event)
-    {
-        this._callStackSection.element.remove();
-
-        this._debuggerPauseResumeButtonItem.enabled = true;
-        this._debuggerPauseResumeButtonItem.toggled = false;
-        this._debuggerStepOverButtonItem.enabled = false;
-        this._debuggerStepIntoButtonItem.enabled = false;
-        this._debuggerStepOutButtonItem.enabled = false;
-    },
-
-    _breakpointsToggleButtonClicked: function(event)
-    {
-        this._debuggerBreakpointsButtonItem.activated = !this._debuggerBreakpointsButtonItem.activated;
-        WebInspector.debuggerManager.breakpointsEnabled = this._debuggerBreakpointsButtonItem.activated;
-    },
-
-    _addBreakpoint: function(breakpoint, sourceCode)
-    {
-        var sourceCode = breakpoint.sourceCodeLocation.displaySourceCode;
-        if (!sourceCode)
-            return null;
-
-        var parentTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(sourceCode);
-        if (!parentTreeElement) {
-            if (sourceCode instanceof WebInspector.SourceMapResource)
-                parentTreeElement = new WebInspector.SourceMapResourceTreeElement(sourceCode);
-            else if (sourceCode instanceof WebInspector.Resource)
-                parentTreeElement = new WebInspector.ResourceTreeElement(sourceCode);
-            else if (sourceCode instanceof WebInspector.Script)
-                parentTreeElement = new WebInspector.ScriptTreeElement(sourceCode);
-        }
-
-        if (!parentTreeElement.parent) {
-            parentTreeElement.hasChildren = true;
-            parentTreeElement.expand();
-
-            this._breakpointsContentTreeOutline.insertChild(parentTreeElement, insertionIndexForObjectInListSortedByFunction(parentTreeElement, this._breakpointsContentTreeOutline.children, this._compareTopLevelTreeElements.bind(this)));
-        }
-
-        // Mark disabled breakpoints as resolved if there is source code loaded with that URL.
-        // This gives the illusion the breakpoint was resolved, but since we don't send disabled
-        // breakpoints to the backend we don't know for sure. If the user enables the breakpoint
-        // it will be resolved properly.
-        if (breakpoint.disabled)
-            breakpoint.resolved = true;
-
-        var breakpointTreeElement = new WebInspector.BreakpointTreeElement(breakpoint);
-        parentTreeElement.insertChild(breakpointTreeElement, insertionIndexForObjectInListSortedByFunction(breakpointTreeElement, parentTreeElement.children, this._compareBreakpointTreeElements));
-        return breakpointTreeElement;
-    },
-
-    _addBreakpointsForSourceCode: function(sourceCode)
-    {
-        var breakpoints = WebInspector.debuggerManager.breakpointsForSourceCode(sourceCode);
-        for (var i = 0; i < breakpoints.length; ++i)
-            this._addBreakpoint(breakpoints[i], sourceCode);
-    },
-
-    _resourceAdded: function(event)
-    {
-        var resource = event.data.resource;
-        this._addBreakpointsForSourceCode(resource);
-    },
-
-    _mainResourceChanged: function(event)
-    {
-        var resource = event.target.mainResource;
-        this._addBreakpointsForSourceCode(resource);
-    },
-
-    _scriptAdded: function(event)
-    {
-        var script = event.data.script;
-
-        // Don't add breakpoints if the script is represented by a Resource. They were
-        // already added by _resourceAdded.
-        if (script.resource)
-            return;
-
-        this._addBreakpointsForSourceCode(script);
-    },
-
-    _scriptsCleared: function(event)
-    {
-        for (var i = this._breakpointsContentTreeOutline.children.length - 1; i >= 0; --i) {
-            var treeElement = this._breakpointsContentTreeOutline.children[i];
-            if (!(treeElement instanceof WebInspector.ScriptTreeElement))
-                continue;
-
-            this._breakpointsContentTreeOutline.removeChildAtIndex(i, true, true);
-        }
-    },
-
-    _breakpointAdded: function(event)
-    {
-        var breakpoint = event.data.breakpoint;
-        this._addBreakpoint(breakpoint);
-    },
-
-    _breakpointRemoved: function(event)
-    {
-        var breakpoint = event.data.breakpoint;
-
-        var breakpointTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(breakpoint);
-        console.assert(breakpointTreeElement);
-        if (!breakpointTreeElement)
-            return;
-
-        this._removeBreakpointTreeElement(breakpointTreeElement);
-    },
-
-    _breakpointDisplayLocationDidChange: function(event)
-    {
-        var breakpoint = event.target;
-        if (event.data.oldDisplaySourceCode === breakpoint.displaySourceCode)
-            return;
-
-        var breakpointTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(breakpoint);
-        if (!breakpointTreeElement)
-            return;
-
-        // A known breakpoint moved between resources, remove the old tree element
-        // and create a new tree element with the updated file.
-
-        var wasSelected = breakpointTreeElement.selected;
-
-        this._removeBreakpointTreeElement(breakpointTreeElement);
-        var newBreakpointTreeElement = this._addBreakpoint(breakpoint);
-
-        if (newBreakpointTreeElement && wasSelected)
-            newBreakpointTreeElement.revealAndSelect(true, false, true, true);
-    },
-
-    _removeBreakpointTreeElement: function(breakpointTreeElement)
-    {
-        var parentTreeElement = breakpointTreeElement.parent;
-        parentTreeElement.removeChild(breakpointTreeElement);
-
-        console.assert(parentTreeElement.parent === this._breakpointsContentTreeOutline);
-
-        if (!parentTreeElement.children.length)
-            this._breakpointsContentTreeOutline.removeChild(parentTreeElement);
-    },
-
-    _debuggerCallFramesDidChange: function()
-    {
-        this._callStackContentTreeOutline.removeChildren();
-
-        var callFrames = WebInspector.debuggerManager.callFrames;
-        if (!callFrames || !callFrames.length) {
-            this._callStackRow.showEmptyMessage();
-            return;
-        }
-
-        this._callStackRow.hideEmptyMessage();
-        this._callStackRow.element.appendChild(this._callStackContentTreeOutline.element);
-
-        var treeElementToSelect = null;
-
-        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
-        for (var i = 0; i < callFrames.length; ++i) {
-            var callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrames[i]);
-            if (callFrames[i] === activeCallFrame)
-                treeElementToSelect = callFrameTreeElement;
-            this._callStackContentTreeOutline.appendChild(callFrameTreeElement);
-        }
-
-        if (treeElementToSelect)
-            treeElementToSelect.select(true, true);
-    },
-
-    _breakpointsBeneathTreeElement: function(treeElement)
-    {
-        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
-        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
-            return [];
-
-        var breakpoints = [];
-        var breakpointTreeElements = treeElement.children;
-        for (var i = 0; i < breakpointTreeElements.length; ++i) {
-            console.assert(breakpointTreeElements[i] instanceof WebInspector.BreakpointTreeElement);
-            console.assert(breakpointTreeElements[i].breakpoint);
-            var breakpoint = breakpointTreeElements[i].breakpoint;
-            if (breakpoint)
-                breakpoints.push(breakpoint);
-        }
-
-        return breakpoints;
-    },
-
-    _removeAllBreakpoints: function(breakpoints)
-    {
-        for (var i = 0; i < breakpoints.length; ++i) {
-            var breakpoint = breakpoints[i];
-            if (WebInspector.debuggerManager.isBreakpointRemovable(breakpoint))
-                WebInspector.debuggerManager.removeBreakpoint(breakpoint);
-        }
-    },
-
-    _toggleAllBreakpoints: function(breakpoints, disabled)
-    {
-        for (var i = 0; i < breakpoints.length; ++i)
-            breakpoints[i].disabled = disabled;
-    },
-
-    _breakpointTreeOutlineDeleteTreeElement: function(treeElement)
-    {
-        console.assert(treeElement.selected);
-        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
-        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
-            return false;
-
-        var wasTopResourceTreeElement = treeElement.previousSibling === this._allUncaughtExceptionsBreakpointTreeElement;
-        var nextSibling = treeElement.nextSibling;
-
-        var breakpoints = this._breakpointsBeneathTreeElement(treeElement);
-        this._removeAllBreakpoints(breakpoints);
-
-        if (wasTopResourceTreeElement && nextSibling)
-            nextSibling.select(true, true);
-
-        return true;
-    },
-
-    _breakpointTreeOutlineContextMenuTreeElement: function(event, treeElement)
-    {
-        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
-        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
-            return;
-
-        var breakpoints = this._breakpointsBeneathTreeElement(treeElement);
-        var shouldDisable = false;
-        for (var i = 0; i < breakpoints.length; ++i) {
-            if (!breakpoints[i].disabled) {
-                shouldDisable = true;
-                break;
-            }
-        }
-
-        function removeAllResourceBreakpoints()
-        {
-            this._removeAllBreakpoints(breakpoints);
-        }
-
-        function toggleAllResourceBreakpoints()
-        {
-            this._toggleAllBreakpoints(breakpoints, shouldDisable);
-        }
-
-        var contextMenu = new WebInspector.ContextMenu(event);
-        if (shouldDisable)
-            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoints"), toggleAllResourceBreakpoints.bind(this));
-        else
-            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoints"), toggleAllResourceBreakpoints.bind(this));
-        contextMenu.appendItem(WebInspector.UIString("Delete Breakpoints"), removeAllResourceBreakpoints.bind(this));
-        contextMenu.show();
-    },
-
-    _treeElementSelected: function(treeElement, selectedByUser)
-    {
-        function deselectCallStackContentTreeElements()
-        {
-            // Deselect any tree element in the call stack content tree outline to prevent two selections in the sidebar.
-            var selectedTreeElement = this._callStackContentTreeOutline.selectedTreeElement;
-            if (selectedTreeElement)
-                selectedTreeElement.deselect();
-        }
-
-        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
-            // If the resource is being selected when it has no children it is in the process of being deleted, don't do anything.
-            if (!treeElement.children.length)
-                return;
-            deselectCallStackContentTreeElements.call(this);
-            WebInspector.resourceSidebarPanel.showSourceCode(treeElement.representedObject);
-            return;
-        }
-
-        if (treeElement instanceof WebInspector.CallFrameTreeElement) {
-            // Deselect any tree element in the breakpoints content tree outline to prevent two selections in the sidebar.
-            var selectedTreeElement = this._breakpointsContentTreeOutline.selectedTreeElement;
-            if (selectedTreeElement)
-                selectedTreeElement.deselect();
-
-            var callFrame = treeElement.callFrame;
-            WebInspector.debuggerManager.activeCallFrame = callFrame;
-            WebInspector.resourceSidebarPanel.showSourceCodeLocation(callFrame.sourceCodeLocation);
-            return;
-        }
-
-        if (!(treeElement instanceof WebInspector.BreakpointTreeElement))
-            return;
-
-        deselectCallStackContentTreeElements.call(this);
-
-        if (!treeElement.parent.representedObject)
-            return;
-
-        console.assert(treeElement.parent.representedObject instanceof WebInspector.SourceCode);
-        if (!(treeElement.parent.representedObject instanceof WebInspector.SourceCode))
-            return;
-
-        var breakpoint = treeElement.breakpoint;
-        WebInspector.resourceSidebarPanel.showSourceCodeLocation(breakpoint.sourceCodeLocation);
-    },
-
-    _compareTopLevelTreeElements: function(a, b)
-    {
-        if (a === this._allExceptionsBreakpointTreeElement)
-            return -1;
-        if (b === this._allExceptionsBreakpointTreeElement)
-            return 1;
-
-        if (a === this._allUncaughtExceptionsBreakpointTreeElement)
-            return -1;
-        if (b === this._allUncaughtExceptionsBreakpointTreeElement)
-            return 1;
-
-        return a.mainTitle.localeCompare(b.mainTitle);
-    },
-
-    _compareBreakpointTreeElements: function(a, b)
-    {
-        var aLocation = a.breakpoint.sourceCodeLocation;
-        var bLocation = b.breakpoint.sourceCodeLocation;
-
-        var comparisonResult = aLocation.displayLineNumber - bLocation.displayLineNumber
-        if (comparisonResult !== 0)
-            return comparisonResult;
-
-        return aLocation.displayColumnNumber - bLocation.displayColumnNumber;
-    }
-};
-
-WebInspector.DebuggerSidebarPanel.prototype.__proto__ = WebInspector.NavigationSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSection.css b/Source/WebInspectorUI/UserInterface/DetailsSection.css
deleted file mode 100644
index 88e0ee048..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSection.css
+++ /dev/null
@@ -1,259 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.details-section {
-    margin-top: -1px;
-    margin-bottom: -1px;
-
-    font-family: "Lucida Grande", sans-serif;
-    font-size: 10px;
-}
-
-.details-section > .header {
-    position: -webkit-sticky;
-    top: -1px;
-    height: 23px;
-
-    border-top: 1px solid rgb(153, 153, 153);
-    border-bottom: 1px solid rgb(153, 153, 153);
-    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
-    background-image: -webkit-linear-gradient(top, rgb(238, 240, 244), rgb(224, 226, 230));
-
-    color: rgb(57, 57, 57);
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    font-weight: bold;
-
-    padding: 4px 5px 4px 0;
-
-    /* Ensure the headers are displayed above scrollbars. */
-    z-index: 200;
-}
-
-.details-section .details-section > .header {
-    background-image: -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(240, 240, 240));
-
-    top: 21px;
-
-    /* Ensure these headers are displayed below the parent header but above scrollbars. */
-    z-index: 100;
-}
-
-.details-section > .header::before {
-    display: block;
-    float: left;
-
-    width: 21px;
-    height: 100%;
-
-    background-image: -webkit-canvas(details-section-disclosure-triangle-open-normal);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 13px 13px;
-
-    content: "";
-}
-
-.details-section > .header:not(.mouse-over-options-element):active::before {
-    background-image: -webkit-canvas(details-section-disclosure-triangle-open-active);
-}
-
-.details-section.collapsed > .header::before {
-    background-image: -webkit-canvas(details-section-disclosure-triangle-closed-normal);
-}
-
-.details-section.collapsed > .header:not(.mouse-over-options-element):active::before {
-    background-image: -webkit-canvas(details-section-disclosure-triangle-closed-active);
-}
-
-.details-section > .header > label {
-    float: right;
-    font-size: 10px;
-    color: rgba(0, 0, 0, 0.6);
-    text-align: right;
-}
-
-.details-section.collapsed  > .header > label {
-    display: none;
-}
-
-.details-section > .header > label > input[type="checkbox"] {
-    margin: 0 0 0 5px;
-    vertical-align: 1px;
-    font-size: 10px;
-}
-
-.details-section > .header > .node-link,
-.details-section > .header > .go-to-arrow {
-    float: right;
-}
-
-.details-section > .header .go-to-arrow {
-    width: 10px;
-    height: 12px;
-    margin-left: 3px;
-}
-
-.details-section > .content {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
-}
-
-.details-section.collapsed > .content {
-    display: none;
-}
-
-.details-section > .content > .group {
-    display: table-row-group;
-}
-
-.details-section > .content > .group:nth-child(even) {
-    background-color: rgb(222, 222, 222);
-}
-
-.details-section > .content > .group:nth-child(even) > .row:not(.simple):first-child,
-.details-section > .content > .group:nth-child(even) > .row.simple:first-child > * {
-    border-top: 1px solid rgb(153, 153, 153);
-}
-
-.details-section > .content > .group:nth-child(even) > .row:not(.simple):last-child,
-.details-section > .content > .group:last-child > .row:not(.simple):last-child,
-.details-section > .content > .group:nth-child(even) > .row.simple:last-child > *,
-.details-section > .content > .group:last-child > .row.simple:last-child > * {
-    border-bottom: 1px solid rgb(153, 153, 153);
-}
-
-.details-section > .content > .group > .row.simple {
-    display: table-row;
-}
-
-.details-section > .content > .group > .row.simple:last-child > * {
-    padding-bottom: 5px !important;
-}
-
-.details-section > .content > .group > .row.simple.empty {
-    display: none;
-}
-
-.details-section > .content > .group > .row.empty.syntax-highlighted {
-    font-family: "Lucida Grande", sans-serif;
-    font-size: 10px;
-}
-
-.details-section > .content > .group > .row.simple.empty:last-child {
-    display: table-row;
-}
-
-.details-section > .content > .group > .row.simple.empty:last-child > * {
-    display: table-cell;
-    height: 1px;
-    font-size: 0;
-    color: transparent;
-    padding-top: 0;
-    padding-bottom: 3px !important;
-}
-
-.details-section > .content > .group > .row.simple.empty:last-child > * > * {
-    display: none;
-}
-
-.details-section > .content > .group > .row.simple > * {
-    display: table-cell;
-    vertical-align: top;
-    padding: 5px 4px 2px;
-}
-
-.details-section > .content > .group > .row.simple > .label {
-    color: rgb(51, 51, 51);
-
-    text-align: right;
-
-    padding-left: 6px;
-
-    width: 85px;
-}
-
-.details-section > .content > .group > .row.simple > .value {
-    word-wrap: break-word;
-
-    padding-right: 6px;
-
-    -webkit-user-select: text;
-    cursor: text;
-}
-
-.details-section > .content > .group > .row.simple > .value .go-to-arrow {
-    width: 10px;
-    height: 12px;
-    margin-left: 5px;
-}
-
-.details-section > .content > .group > .row.simple.data > .value {
-    word-break: break-all;
-}
-
-.details-section > .content > .group > .row.empty {
-    padding: 6px;
-    text-align: center;
-    color: gray;
-}
-
-.details-section > .content > .group > .row.properties:not(.empty) {
-    padding: 4px 6px;
-}
-
-.details-section > .content .data-grid {
-    border: none;
-}
-
-.details-section > .content .data-grid table.data {
-    background-image: none;
-}
-
-.details-section > .content .data-grid tr:nth-child(even) {
-    background-color: white;
-}
-
-.details-section > .content .data-grid tr:nth-child(odd) {
-    background-color: rgb(243, 246, 250);
-}
-
-.details-section > .content .data-grid td.value-column {
-    height: auto;
-    line-height: initial;
-    white-space: normal;
-}
-
-.details-section > .content .data-grid td.value-column > div {
-    white-space: normal;
-    word-break: break-all;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSection.js b/Source/WebInspectorUI/UserInterface/DetailsSection.js
deleted file mode 100644
index 257b00ec1..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSection.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DetailsSection = function(identifier, title, groups, optionsElement, defaultCollapsedSettingValue) {
-    WebInspector.Object.call(this);
-
-    console.assert(identifier);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.DetailsSection.StyleClassName;
-
-    this._headerElement = document.createElement("div");
-    this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));
-    this._headerElement.className = WebInspector.DetailsSection.HeaderElementStyleClassName;
-    this._element.appendChild(this._headerElement);
-
-    if (optionsElement instanceof HTMLElement) {
-        this._optionsElement = optionsElement;
-        this._optionsElement.addEventListener("mousedown", this._optionsElementMouseDown.bind(this));
-        this._optionsElement.addEventListener("mouseup", this._optionsElementMouseUp.bind(this));
-        this._headerElement.appendChild(this._optionsElement);
-    }
-
-    this._titleElement = document.createElement("span");
-    this._headerElement.appendChild(this._titleElement);
-
-    this._contentElement = document.createElement("div");
-    this._contentElement.className = WebInspector.DetailsSection.ContentElementStyleClassName;
-    this._element.appendChild(this._contentElement);
-
-    this._generateDisclosureTrianglesIfNeeded();
-
-    this._identifier = identifier;
-    this.title = title;
-    this.groups = groups || [new WebInspector.DetailsSectionGroup];
-
-    this._collapsedSetting = new WebInspector.Setting(identifier + "-details-section-collapsed", !!defaultCollapsedSettingValue);
-    this.collapsed = this._collapsedSetting.value;
-};
-
-WebInspector.DetailsSection.StyleClassName = "details-section";
-WebInspector.DetailsSection.HeaderElementStyleClassName = "header";
-WebInspector.DetailsSection.TitleElementStyleClassName = "title";
-WebInspector.DetailsSection.ContentElementStyleClassName = "content";
-WebInspector.DetailsSection.CollapsedStyleClassName = "collapsed";
-WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName = "mouse-over-options-element";
-WebInspector.DetailsSection.DisclosureTriangleOpenCanvasIdentifier = "details-section-disclosure-triangle-open";
-WebInspector.DetailsSection.DisclosureTriangleClosedCanvasIdentifier = "details-section-disclosure-triangle-closed";
-WebInspector.DetailsSection.DisclosureTriangleNormalCanvasIdentifierSuffix = "-normal";
-WebInspector.DetailsSection.DisclosureTriangleActiveCanvasIdentifierSuffix = "-active";
-
-WebInspector.DetailsSection.prototype = {
-    constructor: WebInspector.DetailsSection,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get identifier()
-    {
-        return this._identifier;
-    },
-
-    get title()
-    {
-        return this._titleElement.textContent;
-    },
-
-    set title(title)
-    {
-        this._titleElement.textContent = title;
-    },
-
-    get collapsed()
-    {
-        return this._element.classList.contains(WebInspector.DetailsSection.CollapsedStyleClassName);
-    },
-
-    set collapsed(flag)
-    {
-        if (flag)
-            this._element.classList.add(WebInspector.DetailsSection.CollapsedStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.DetailsSection.CollapsedStyleClassName);
-
-        this._collapsedSetting.value = flag || false;
-    },
-
-    get groups()
-    {
-        return this._groups;
-    },
-
-    set groups(groups)
-    {
-        this._contentElement.removeChildren();
-
-        this._groups = groups || [];
-
-        for (var i = 0; i < this._groups.length; ++i)
-            this._contentElement.appendChild(this._groups[i].element);
-    },
-
-    // Private
-
-    _headerElementClicked: function(event)
-    {
-        if (event.target.isSelfOrDescendant(this._optionsElement))
-            return;
-
-        this.collapsed = !this.collapsed;
-
-        this._element.scrollIntoViewIfNeeded(false);
-    },
-
-    _optionsElementMouseDown: function(event)
-    {
-        this._headerElement.classList.add(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
-    },
-
-    _optionsElementMouseUp: function(event)
-    {
-        this._headerElement.classList.remove(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
-    },
-
-    _generateDisclosureTrianglesIfNeeded: function()
-    {
-        if (WebInspector.DetailsSection._generatedDisclosureTriangles)
-            return;
-
-        // Set this early instead of in _generateDisclosureTriangle because we don't want multiple sections that are
-        // created at the same time to duplicate the work (even though it would be harmless.)
-        WebInspector.DetailsSection._generatedDisclosureTriangles = true;
-
-        var specifications = {};
-        specifications[WebInspector.DetailsSection.DisclosureTriangleNormalCanvasIdentifierSuffix] = {
-            fillColor: [134, 134, 134]
-        };
-
-        specifications[WebInspector.DetailsSection.DisclosureTriangleActiveCanvasIdentifierSuffix] = {
-            fillColor: [57, 57, 57]
-        };
-
-        generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.pdf", specifications, 13, 13, WebInspector.DetailsSection.DisclosureTriangleOpenCanvasIdentifier);
-        generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.pdf", specifications, 13, 13, WebInspector.DetailsSection.DisclosureTriangleClosedCanvasIdentifier);
-    }
-};
-
-WebInspector.DetailsSection.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionDataGridRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionDataGridRow.js
deleted file mode 100644
index 95b7bd431..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSectionDataGridRow.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DetailsSectionDataGridRow = function(dataGrid, emptyMessage) {
-    WebInspector.DetailsSectionRow.call(this, emptyMessage);
-
-    this.element.classList.add(WebInspector.DetailsSectionDataGridRow.StyleClassName);
-
-    this.dataGrid = dataGrid;
-};
-
-WebInspector.DetailsSectionDataGridRow.StyleClassName = "data-grid";
-
-WebInspector.DetailsSectionDataGridRow.prototype = {
-    constructor: WebInspector.DetailsSectionDataGridRow,
-
-    // Public
-
-    get dataGrid()
-    {
-        return this._dataGrid;
-    },
-
-    set dataGrid(dataGrid)
-    {
-        if (this._dataGrid === dataGrid)
-            return;
-
-        this._dataGrid = dataGrid || null;
-
-        if (dataGrid) {
-            dataGrid.element.classList.add("inline");
-
-            this.hideEmptyMessage();
-            this.element.appendChild(dataGrid.element);
-        } else
-            this.showEmptyMessage();
-    }
-};
-
-WebInspector.DetailsSectionDataGridRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionGroup.js b/Source/WebInspectorUI/UserInterface/DetailsSectionGroup.js
deleted file mode 100644
index 91d4e7b23..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSectionGroup.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DetailsSectionGroup = function(rows) {
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.DetailsSectionGroup.StyleClassName;
-
-    this.rows = rows;
-};
-
-WebInspector.DetailsSectionGroup.StyleClassName = "group";
-
-WebInspector.DetailsSectionGroup.prototype = {
-    constructor: WebInspector.DetailsSectionGroup,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get rows()
-    {
-        return this._rows;
-    },
-
-    set rows(rows)
-    {
-        this._element.removeChildren();
-
-        this._rows = rows || [];
-
-        for (var i = 0; i < this._rows.length; ++i)
-            this._element.appendChild(this._rows[i].element);
-    }
-};
-
-WebInspector.DetailsSectionGroup.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionPropertiesRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionPropertiesRow.js
deleted file mode 100644
index a98615277..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSectionPropertiesRow.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DetailsSectionPropertiesRow = function(propertiesSection, emptyMessage) {
-    WebInspector.DetailsSectionRow.call(this, emptyMessage);
-
-    this.element.classList.add(WebInspector.DetailsSectionPropertiesRow.StyleClassName);
-    this.element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
-
-    this.propertiesSection = propertiesSection;
-};
-
-WebInspector.DetailsSectionPropertiesRow.StyleClassName = "properties";
-
-WebInspector.DetailsSectionPropertiesRow.prototype = {
-    constructor: WebInspector.DetailsSectionPropertiesRow,
-
-    // Public
-
-    get propertiesSection()
-    {
-        return this._propertiesSection;
-    },
-
-    set propertiesSection(propertiesSection)
-    {
-        this._propertiesSection = propertiesSection || null;
-
-        if (propertiesSection) {
-            // Call expand to cause the section to populate.
-            propertiesSection.expand();
-
-            this.hideEmptyMessage();
-            this.element.appendChild(propertiesSection.element);
-        } else
-            this.showEmptyMessage();
-    }
-};
-
-WebInspector.DetailsSectionPropertiesRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionRow.js
deleted file mode 100644
index f19584792..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSectionRow.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DetailsSectionRow = function(emptyMessage) {
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.DetailsSectionRow.StyleClassName;
-
-    this._emptyMessage = emptyMessage || "";
-};
-
-WebInspector.DetailsSectionRow.StyleClassName = "row";
-WebInspector.DetailsSectionRow.EmptyStyleClassName = "empty";
-
-WebInspector.DetailsSectionRow.prototype = {
-    constructor: WebInspector.DetailsSectionRow,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get emptyMessage()
-    {
-        return this._emptyMessage;
-    },
-
-    set emptyMessage(emptyMessage)
-    {
-        this._emptyMessage = emptyMessage || "";
-
-        if (!this.childNodes.length)
-            this.showEmptyMessage();
-    },
-
-    showEmptyMessage: function()
-    {
-        this.element.classList.add(WebInspector.DetailsSectionRow.EmptyStyleClassName);
-
-        if (this._emptyMessage instanceof Node) {
-            this.element.removeChildren();
-            this.element.appendChild(this._emptyMessage);
-        } else
-            this.element.textContent = this._emptyMessage;
-    },
-
-    hideEmptyMessage: function()
-    {
-        this.element.classList.remove(WebInspector.DetailsSectionRow.EmptyStyleClassName);
-        this.element.removeChildren();
-    }
-};
-
-WebInspector.DetailsSectionRow.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSectionSimpleRow.js b/Source/WebInspectorUI/UserInterface/DetailsSectionSimpleRow.js
deleted file mode 100644
index d6c7e0e87..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSectionSimpleRow.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DetailsSectionSimpleRow = function(label, value) {
-    WebInspector.DetailsSectionRow.call(this);
-
-    this.element.classList.add(WebInspector.DetailsSectionSimpleRow.StyleClassName);
-
-    this._labelElement = document.createElement("div");
-    this._labelElement.className = WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName;
-    this.element.appendChild(this._labelElement);
-
-    this._valueElement = document.createElement("div");
-    this._valueElement.className = WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName;
-    this.element.appendChild(this._valueElement);
-
-    // Workaround for <rdar://problem/12668870> Triple-clicking text within a
-    // <div> set to "display: table-cell" selects text outside the cell.
-    //
-    // On triple-click, adjust the selection range to include only the value
-    // element if the selection extends beyond it.
-    var valueElementClicked = function(event) {
-        event.stopPropagation();
-
-        if (event.detail < 3)
-            return;
-
-        var currentSelection = window.getSelection();
-        if (!currentSelection)
-            return;
-
-        var currentRange = currentSelection.getRangeAt(0);
-        if (!currentRange || currentRange.startContainer == currentRange.endContainer)
-            return;
-
-        var correctedRange = document.createRange();
-        correctedRange.selectNodeContents(event.currentTarget);
-        currentSelection.removeAllRanges();
-        currentSelection.addRange(correctedRange);
-    };
-    this._valueElement.addEventListener("click", valueElementClicked);
-
-    this.label = label;
-    this.value = value;
-};
-
-WebInspector.DetailsSectionSimpleRow.StyleClassName = "simple";
-WebInspector.DetailsSectionSimpleRow.DataStyleClassName = "data";
-WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName = "empty";
-WebInspector.DetailsSectionSimpleRow.LabelElementStyleClassName = "label";
-WebInspector.DetailsSectionSimpleRow.ValueElementStyleClassName = "value";
-
-WebInspector.DetailsSectionSimpleRow.prototype = {
-    constructor: WebInspector.DetailsSectionSimpleRow,
-
-    // Public
-
-    get label()
-    {
-        return this._labelElement.textContent;
-    },
-
-    set label(label)
-    {
-        this._labelElement.textContent = label;
-    },
-
-    get value()
-    {
-        return this._value;
-    },
-
-    set value(value)
-    {
-        this._value = value || "";
-
-        if (this._value) {
-            this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName);
-
-            // If the value has space characters that cause word wrapping then we don't need the data class.
-            if (/[\s\u200b]/.test(this._value))
-                this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
-            else
-                this.element.classList.add(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
-        } else {
-            this.element.classList.add(WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName);
-            this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
-        }
-
-        if (value instanceof Node) {
-            this._valueElement.removeChildren();
-            this._valueElement.appendChild(this._value);
-        } else
-            this._valueElement.textContent = this._value;
-    }
-};
-
-WebInspector.DetailsSectionSimpleRow.prototype.__proto__ = WebInspector.DetailsSectionRow.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.css
deleted file mode 100644
index 5bb2e6e83..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar > .panel.details {
-    overflow-x: hidden;
-    overflow-y: auto;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.js
deleted file mode 100644
index 70317e651..000000000
--- a/Source/WebInspectorUI/UserInterface/DetailsSidebarPanel.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DetailsSidebarPanel = function(identifier, displayName, singularDisplayName, image, keyboardShortcutKey, element) {
-    if (keyboardShortcutKey)
-        this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.Shift, keyboardShortcutKey, this.toggle.bind(this));
-
-    if (this._keyboardShortcut) {
-        var showToolTip = WebInspector.UIString("Show the %s details sidebar (%s)").format(singularDisplayName, this._keyboardShortcut.displayName);
-        var hideToolTip = WebInspector.UIString("Hide the %s details sidebar (%s)").format(singularDisplayName, this._keyboardShortcut.displayName);
-    } else {
-        var showToolTip = WebInspector.UIString("Show the %s details sidebar").format(singularDisplayName);
-        var hideToolTip = WebInspector.UIString("Hide the %s details sidebar").format(singularDisplayName);
-    }
-
-    WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element);
-
-    this.element.classList.add(WebInspector.DetailsSidebarPanel.StyleClassName);
-};
-
-WebInspector.DetailsSidebarPanel.StyleClassName = "details";
-
-WebInspector.DetailsSidebarPanel.prototype = {
-    constructor: WebInspector.DetailsSidebarPanel,
-
-    // Public
-
-    inspect: function(objects)
-    {
-        // Implemented by subclasses.
-        return false;
-    },
-
-    shown: function()
-    {
-        if (this._needsRefresh) {
-            delete this._needsRefresh;
-            this.refresh();
-        }
-    },
-
-    needsRefresh: function()
-    {
-        if (!this.selected) {
-            this._needsRefresh = true;
-            return;
-        }
-
-        this.refresh();
-    },
-
-    refresh: function()
-    {
-        // Implemented by subclasses.
-    }
-};
-
-WebInspector.DetailsSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/DividerNavigationItem.css b/Source/WebInspectorUI/UserInterface/DividerNavigationItem.css
deleted file mode 100644
index cbadc5b6e..000000000
--- a/Source/WebInspectorUI/UserInterface/DividerNavigationItem.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.navigation-bar .item.divider {
-    width: 1px;
-
-    background-image: -webkit-linear-gradient(rgb(190, 190, 190), rgb(190, 190, 190));
-    background-size: 100% 13px;
-    background-repeat: no-repeat;
-    background-position: center;
-}
diff --git a/Source/WebInspectorUI/UserInterface/DividerNavigationItem.js b/Source/WebInspectorUI/UserInterface/DividerNavigationItem.js
deleted file mode 100644
index 5e9767a02..000000000
--- a/Source/WebInspectorUI/UserInterface/DividerNavigationItem.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.DividerNavigationItem = function(identifier) {
-    WebInspector.NavigationItem.call(this, identifier);
-};
-
-WebInspector.DividerNavigationItem.StyleClassName = "divider";
-
-WebInspector.DividerNavigationItem.prototype = {
-    constructor: WebInspector.DividerNavigationItem,
-
-    // Private
-
-    _additionalClassNames: [WebInspector.DividerNavigationItem.StyleClassName],
-};
-
-WebInspector.DividerNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Editing.css b/Source/WebInspectorUI/UserInterface/Editing.css
deleted file mode 100644
index f68c02170..000000000
--- a/Source/WebInspectorUI/UserInterface/Editing.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.editing {
-    -webkit-user-select: text;
-    box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
-    outline: 1px solid rgb(66%, 66%, 66%) !important;
-    background-color: white;
-    -webkit-user-modify: read-write-plaintext-only;
-    text-overflow: clip !important;
-    padding-left: 2px;
-    margin-left: -2px;
-    padding-right: 2px;
-    margin-right: -2px;
-    margin-bottom: -1px;
-    padding-bottom: 1px;
-    opacity: 1.0 !important;
-}
-
-.editing.multiline {
-    white-space: pre-wrap;
-}
-
-.editing, .editing * {
-    color: black !important;
-    text-decoration: none !important;
-}
-
-.editing br {
-    display: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/EditingSupport.js b/Source/WebInspectorUI/UserInterface/EditingSupport.js
deleted file mode 100644
index c2fe47107..000000000
--- a/Source/WebInspectorUI/UserInterface/EditingSupport.js
+++ /dev/null
@@ -1,271 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.isBeingEdited = function(element)
-{
-    while (element) {
-        if (element.__editing)
-            return true;
-        element = element.parentNode;
-    }
-
-    return false;
-}
-
-WebInspector.markBeingEdited = function(element, value)
-{
-    if (value) {
-        if (element.__editing)
-            return false;
-        element.__editing = true;
-        WebInspector.__editingCount = (WebInspector.__editingCount || 0) + 1;
-    } else {
-        if (!element.__editing)
-            return false;
-        delete element.__editing;
-        --WebInspector.__editingCount;
-    }
-    return true;
-}
-
-WebInspector.isEditingAnyField = function()
-{
-    return !!WebInspector.__editingCount;
-}
-
-WebInspector.isEventTargetAnEditableField = function(event)
-{
-    const textInputTypes = {"text": true, "search": true, "tel": true, "url": true, "email": true, "password": true};
-    if (event.target instanceof HTMLInputElement)
-        return event.target.type in textInputTypes;
-
-    var codeMirrorEditorElement = event.target.enclosingNodeOrSelfWithClass("CodeMirror");
-    if (codeMirrorEditorElement && codeMirrorEditorElement.CodeMirror)
-        return !codeMirrorEditorElement.CodeMirror.getOption("readOnly");
-
-    if (event.target instanceof HTMLTextAreaElement)
-        return true;
-
-    if (event.target.enclosingNodeOrSelfWithClass("text-prompt"))
-        return true;
-
-    return false;
-}
-
-/**
- * @constructor
- * @param {function(Element,string,string,*,string)} commitHandler
- * @param {function(Element,*)} cancelHandler
- * @param {*=} context
- */
-WebInspector.EditingConfig = function(commitHandler, cancelHandler, context)
-{
-    this.commitHandler = commitHandler;
-    this.cancelHandler = cancelHandler
-    this.context = context;
-
-    /**
-     * Handles the "paste" event, return values are the same as those for customFinishHandler
-     * @type {function(Element)|undefined}
-     */
-    this.pasteHandler;
-
-    /** 
-     * Whether the edited element is multiline
-     * @type {boolean|undefined}
-     */
-    this.multiline;
-
-    /**
-     * Custom finish handler for the editing session (invoked on keydown)
-     * @type {function(Element,*)|undefined}
-     */
-    this.customFinishHandler;
-
-    /**
-     * Whether or not spellcheck is enabled.
-     * @type {boolean}
-     */
-    this.spellcheck = false;
-}
-
-WebInspector.EditingConfig.prototype = {
-    setPasteHandler: function(pasteHandler)
-    {
-        this.pasteHandler = pasteHandler;
-    },
-
-    setMultiline: function(multiline)
-    {
-        this.multiline = multiline;
-    },
-
-    setCustomFinishHandler: function(customFinishHandler)
-    {
-        this.customFinishHandler = customFinishHandler;
-    }
-}
-
-/** 
- * @param {Element} element
- * @param {WebInspector.EditingConfig=} config
- */
-WebInspector.startEditing = function(element, config)
-{
-    if (!WebInspector.markBeingEdited(element, true))
-        return;
-
-    config = config || new WebInspector.EditingConfig(function() {}, function() {});
-    var committedCallback = config.commitHandler;
-    var cancelledCallback = config.cancelHandler;
-    var pasteCallback = config.pasteHandler;
-    var context = config.context;
-    var oldText = getContent(element);
-    var moveDirection = "";
-
-    element.classList.add("editing");
-
-    var oldSpellCheck = element.hasAttribute("spellcheck") ? element.spellcheck : undefined;
-    element.spellcheck = config.spellcheck;
-
-    if (config.multiline)
-        element.classList.add("multiline");
-
-    var oldTabIndex = element.tabIndex;
-    if (element.tabIndex < 0)
-        element.tabIndex = 0;
-
-    function blurEventListener() {
-        editingCommitted.call(element);
-    }
-
-    function getContent(element) {
-        if (element.tagName === "INPUT" && element.type === "text")
-            return element.value;
-        else
-            return element.textContent;
-    }
-
-    /** @this {Element} */
-    function cleanUpAfterEditing()
-    {
-        WebInspector.markBeingEdited(element, false);
-
-        this.classList.remove("editing");
-        this.scrollTop = 0;
-        this.scrollLeft = 0;
-
-        if (oldSpellCheck === undefined)
-            element.removeAttribute("spellcheck");
-        else
-            element.spellcheck = oldSpellCheck;
-
-        if (oldTabIndex === -1)
-            this.removeAttribute("tabindex");
-        else
-            this.tabIndex = oldTabIndex;
-
-        element.removeEventListener("blur", blurEventListener, false);
-        element.removeEventListener("keydown", keyDownEventListener, true);
-        if (pasteCallback)
-            element.removeEventListener("paste", pasteEventListener, true);
-
-        WebInspector.restoreFocusFromElement(element);
-    }
-
-    /** @this {Element} */
-    function editingCancelled()
-    {
-        if (this.tagName === "INPUT" && this.type === "text")
-            this.value = oldText;
-        else
-            this.textContent = oldText;
-
-        cleanUpAfterEditing.call(this);
-
-        cancelledCallback(this, context);
-    }
-
-    /** @this {Element} */
-    function editingCommitted()
-    {
-        cleanUpAfterEditing.call(this);
-
-        committedCallback(this, getContent(this), oldText, context, moveDirection);
-    }
-
-    function defaultFinishHandler(event)
-    {
-        var hasOnlyMetaModifierKey = event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey;
-        if (isEnterKey(event) && (!config.multiline || hasOnlyMetaModifierKey))
-            return "commit";
-        else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode || event.keyIdentifier === "U+001B")
-            return "cancel";
-        else if (event.keyIdentifier === "U+0009") // Tab key
-            return "move-" + (event.shiftKey ? "backward" : "forward");
-    }
-
-    function handleEditingResult(result, event)
-    {
-        if (result === "commit") {
-            editingCommitted.call(element);
-            event.preventDefault();
-            event.stopPropagation();
-        } else if (result === "cancel") {
-            editingCancelled.call(element);
-            event.preventDefault();
-            event.stopPropagation();
-        } else if (result && result.startsWith("move-")) {
-            moveDirection = result.substring(5);
-            if (event.keyIdentifier !== "U+0009")
-                blurEventListener();
-        }
-    }
-
-    function pasteEventListener(event)
-    {
-        var result = pasteCallback(event);
-        handleEditingResult(result, event);
-    }
-
-    function keyDownEventListener(event)
-    {
-        var handler = config.customFinishHandler || defaultFinishHandler;
-        var result = handler(event);
-        handleEditingResult(result, event);
-    }
-
-    element.addEventListener("blur", blurEventListener, false);
-    element.addEventListener("keydown", keyDownEventListener, true);
-    if (pasteCallback)
-        element.addEventListener("paste", pasteEventListener, true);
-
-    element.focus();
-
-    return {
-        cancel: editingCancelled.bind(element),
-        commit: editingCommitted.bind(element)
-    };
-}
diff --git a/Source/WebInspectorUI/UserInterface/EventHandler.js b/Source/WebInspectorUI/UserInterface/EventHandler.js
deleted file mode 100644
index ff9d3720e..000000000
--- a/Source/WebInspectorUI/UserInterface/EventHandler.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.EventHandler = function(delegate, eventHandlers)
-{
-    this._delegate = delegate;
-    this._eventHandlers = eventHandlers;
-
-    this._tracking = false;
-    this._target = null;
-};
-
-WebInspector.EventHandler.prototype = {
-    constructor: WebInspector.EventHandler,
-
-    // Public
-
-    trackEvents: function(target)
-    {
-        if (this._tracking && target === this._target)
-            return;
-
-        if (this._tracking && this._target)
-            this.stopTrackingEvents();
-
-        Object.getOwnPropertyNames(this._eventHandlers).forEach(function(eventName) {
-            target.addEventListener(eventName, this);
-        }, this);
-
-        this._target = target;
-        this._tracking = true;
-    },
-    
-    stopTrackingEvents: function()
-    {
-        if (!this._tracking)
-            return;
-
-        Object.getOwnPropertyNames(this._eventHandlers).forEach(function(eventType) {
-            this._target.removeEventListener(eventType, this);
-        }, this);
-
-        this._tracking = false;
-    },
-
-    handleEvent: function(event)
-    {
-        if (event.currentTarget !== this._target)
-            return;
-
-        var handler = this._eventHandlers[event.type];
-        if (handler)
-            handler.call(this._delegate, event);
-    }
-}
-
-WebInspector.EventHandler.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/EventListenerSection.js b/Source/WebInspectorUI/UserInterface/EventListenerSection.js
deleted file mode 100644
index e74b4546e..000000000
--- a/Source/WebInspectorUI/UserInterface/EventListenerSection.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.EventListenerSection = function(type, nodeId)
-{
-    WebInspector.DetailsSection.call(this, type + "-event-listener-section", type, [], null, true);
-
-    this.element.classList.add("event-listener-section");
-
-    this._nodeId = nodeId;
-}
-
-WebInspector.EventListenerSection.prototype = {
-    constructor: WebInspector.EventListenerSection,
-
-    addListener: function(eventListener)
-    {
-        var groups = this.groups;
-        groups.push(new WebInspector.EventListenerSectionGroup(eventListener, this._nodeId));
-        this.groups = groups;
-    }
-}
-
-WebInspector.EventListenerSection.prototype.__proto__ = WebInspector.DetailsSection.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.js b/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.js
deleted file mode 100644
index 2d8ec9022..000000000
--- a/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.EventListenerSectionGroup = function(eventListener, nodeId)
-{
-    this._eventListener = eventListener;
-    this._nodeId = nodeId;
-
-    var rows = [];
-    rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Node"), this._nodeTextOrLink()));
-    rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Function"), this._functionTextOrLink()));
-    rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"), this._type()));
-
-    WebInspector.DetailsSectionGroup.call(this, rows);
-}
-
-WebInspector.EventListenerSectionGroup.prototype = {
-    constructor: WebInspector.EventListenerSectionGroup,
-
-    _nodeTextOrLink: function()
-    {
-        var node = this._eventListener.node;
-        if (!node)
-            return;
-
-        if (node.nodeType() === Node.DOCUMENT_NODE)
-            return "document";
-
-        return WebInspector.linkifyNodeReference(node);
-    },
-
-    _type: function()
-    {
-        if (this._eventListener.useCapture)
-            return WebInspector.UIString("Capturing");
-
-        if (this._eventListener.isAttribute)
-            return WebInspector.UIString("Attribute");
-
-        return WebInspector.UIString("Bubbling");
-    },
-
-    _functionTextOrLink: function()
-    {
-        var match = this._eventListener.handlerBody.match(/function ([^\(]+?)\(/);
-        if (match) {
-            var anonymous = false;
-            var functionName = match[1];
-        } else {
-            var anonymous = true;
-            var functionName = WebInspector.UIString("(anonymous function)");        
-        }
-
-        if (!this._eventListener.location)
-            return functionName;
-
-        // COMPATIBILITY (iOS 6): In the past scriptId could be a URL. Now it is always a script identifier.
-        // So try looking up the resource by URL if a script can't be found directly.
-        var scriptIdentifierOrURL = this._eventListener.location.scriptId;
-        var sourceCode = WebInspector.debuggerManager.scriptForIdentifier(scriptIdentifierOrURL);
-        if (!sourceCode)
-            sourceCode = WebInspector.frameResourceManager.resourceForURL(scriptIdentifierOrURL);
-
-        if (!sourceCode)
-            return functionName;
-
-        var sourceCodeLocation = sourceCode.createSourceCodeLocation(this._eventListener.location.lineNumber, this._eventListener.location.columnNumber || 0);
-        var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, anonymous);
-        if (anonymous)
-            return linkElement;
-
-        var fragment = document.createDocumentFragment();
-        fragment.appendChild(linkElement);
-        fragment.appendChild(document.createTextNode(functionName));
-        return fragment;
-    }
-}
-
-WebInspector.EventListenerSectionGroup.prototype.__proto__ = WebInspector.DetailsSectionGroup.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ExecutionContext.js b/Source/WebInspectorUI/UserInterface/ExecutionContext.js
deleted file mode 100644
index 0b8b81d40..000000000
--- a/Source/WebInspectorUI/UserInterface/ExecutionContext.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ExecutionContext = function(id, name, isPageContext, frame)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(typeof id === "number" || id === WebInspector.QuickConsole.MainFrameContextExecutionIdentifier);
-    console.assert(typeof name === "string");
-
-    this._id = id;
-    this._name = name;
-    this._isPageContext = isPageContext || false;
-    this._frame = frame || null;
-};
-
-WebInspector.ExecutionContext.supported = function()
-{
-    // Execution contexts were added to the Inspector protocol alongside RuntimeAgent.enable and
-    // disable methods, which turn on and off sending Runtime agent execution context created events.
-    // So we can feature detect support for execution contexts with these RuntimeAgent functions.
-    return typeof RuntimeAgent.enable === "function";
-}
-
-WebInspector.ExecutionContext.prototype = {
-    constructor: WebInspector.ExecutionContext,
-
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get name()
-    {
-        return this._name;
-    },
-
-    get isPageContext()
-    {
-        return this._isPageContext;
-    },
-
-    get frame()
-    {
-        return this._frame;
-    }
-};
-
-WebInspector.ExecutionContext.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ExecutionContextList.js b/Source/WebInspectorUI/UserInterface/ExecutionContextList.js
deleted file mode 100644
index c806c270f..000000000
--- a/Source/WebInspectorUI/UserInterface/ExecutionContextList.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ExecutionContextList = function()
-{
-    WebInspector.Object.call(this);
-
-    this._contexts = [];
-    this._pageExecutionContext = null;
-};
-
-WebInspector.ExecutionContextList.prototype = {
-    constructor: WebInspector.ExecutionContextList,
-
-    // Public
-
-    get pageExecutionContext()
-    {
-        return this._pageExecutionContext;
-    },
-
-    get contexts()
-    {
-        return this._contexts;
-    },
-
-    add: function(context)
-    {
-        // FIXME: The backend sends duplicate page context execution contexts with the same id. Why?
-        if (context.isPageContext && this._pageExecutionContext) {
-            console.assert(context.id === this._pageExecutionContext.id);
-            return false;
-        }
-
-        this._contexts.push(context);
-
-        if (context.isPageContext) {
-            console.assert(!this._pageExecutionContext);
-            this._pageExecutionContext = context;
-            return true;
-        }
-
-        return false;
-    },
-
-    clear: function()
-    {
-        this._contexts = [];
-        this._pageExecutionContext = null;
-    }
-};
-
-WebInspector.ExecutionContextList.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/External/.eslintrc b/Source/WebInspectorUI/UserInterface/External/.eslintrc
new file mode 100644
index 000000000..ecab33702
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/.eslintrc
@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+{
+    "rules": {
+        "eqeqeq": 0
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE b/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE
index 482d55eb7..f4a5a4a25 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/LICENSE
@@ -1,4 +1,4 @@
-Copyright (C) 2013 by Marijn Haverbeke <marijnh@gmail.com>
+Copyright (C) 2015 by Marijn Haverbeke <marijnh@gmail.com> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -17,7 +17,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
-
-Please note that some subdirectories of the CodeMirror distribution
-include their own LICENSE files, and are released under different
-licences.
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js
index ee22a12fe..d531022a2 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/clojure.js
@@ -1,11 +1,26 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
 /**
  * Author: Hans Engel
  * Branched from CodeMirror's Scheme mode (by Koh Zi Han, based on implementation by Koh Zi Chun)
  */
-CodeMirror.defineMode("clojure", function () {
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("clojure", function (options) {
     var BUILTIN = "builtin", COMMENT = "comment", STRING = "string", CHARACTER = "string-2",
-        ATOM = "atom", NUMBER = "number", BRACKET = "bracket", KEYWORD = "keyword";
-    var INDENT_WORD_SKIP = 2;
+        ATOM = "atom", NUMBER = "number", BRACKET = "bracket", KEYWORD = "keyword", VAR = "variable";
+    var INDENT_WORD_SKIP = options.indentUnit || 2;
+    var NORMAL_INDENT_UNIT = options.indentUnit || 2;
 
     function makeKeywords(str) {
         var obj = {}, words = str.split(" ");
@@ -44,7 +59,7 @@ CodeMirror.defineMode("clojure", function () {
         sign: /[+-]/,
         exponent: /e/i,
         keyword_char: /[^\s\(\[\;\)\]]/,
-        symbol: /[\w*+!\-\._?:\/]/
+        symbol: /[\w*+!\-\._?:<>\/\xa1-\uffff]/
     };
 
     function stateStack(indent, type, prev) { // represents a state stack object
@@ -99,7 +114,7 @@ CodeMirror.defineMode("clojure", function () {
         var first = stream.next();
         // Read special literals: backspace, newline, space, return.
         // Just read all lowercase letters.
-        if (first.match(/[a-z]/) && stream.match(/[a-z]+/, true)) {
+        if (first && first.match(/[a-z]/) && stream.match(/[a-z]+/, true)) {
             return;
         }
         // Read unicode character: \u1000 \uA0a1
@@ -179,8 +194,8 @@ CodeMirror.defineMode("clojure", function () {
                             stream.eatSpace();
                             if (stream.eol() || stream.peek() == ";") {
                                 // nothing significant after
-                                // we restart indentation 1 space after
-                                pushStack(state, indentTemp + 1, ch);
+                                // we restart indentation the user defined spaces after
+                                pushStack(state, indentTemp + NORMAL_INDENT_UNIT, ch);
                             } else {
                                 pushStack(state, indentTemp + stream.current().length, ch); // else we match
                             }
@@ -205,7 +220,9 @@ CodeMirror.defineMode("clojure", function () {
                             returnType = BUILTIN;
                         } else if (atoms && atoms.propertyIsEnumerable(stream.current())) {
                             returnType = ATOM;
-                        } else returnType = null;
+                        } else {
+                          returnType = VAR;
+                        }
                     }
             }
 
@@ -217,8 +234,11 @@ CodeMirror.defineMode("clojure", function () {
             return state.indentStack.indent;
         },
 
+        closeBrackets: {pairs: "()[]{}\"\""},
         lineComment: ";;"
     };
 });
 
 CodeMirror.defineMIME("text/x-clojure", "clojure");
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
index 88718b772..7030268b0 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/closebrackets.js
@@ -1,82 +1,185 @@
-(function() {
-  var DEFAULT_BRACKETS = "()[]{}''\"\"";
-  var DEFAULT_EXPLODE_ON_ENTER = "[]{}";
-  var SPACE_CHAR_REGEX = /\s/;
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  var defaults = {
+    pairs: "()[]{}''\"\"",
+    triples: "",
+    explode: "[]{}"
+  };
+
+  var Pos = CodeMirror.Pos;
 
   CodeMirror.defineOption("autoCloseBrackets", false, function(cm, val, old) {
-    if (old != CodeMirror.Init && old)
-      cm.removeKeyMap("autoCloseBrackets");
-    if (!val) return;
-    var pairs = DEFAULT_BRACKETS, explode = DEFAULT_EXPLODE_ON_ENTER;
-    if (typeof val == "string") pairs = val;
-    else if (typeof val == "object") {
-      if (val.pairs != null) pairs = val.pairs;
-      if (val.explode != null) explode = val.explode;
+    if (old && old != CodeMirror.Init) {
+      cm.removeKeyMap(keyMap);
+      cm.state.closeBrackets = null;
+    }
+    if (val) {
+      cm.state.closeBrackets = val;
+      cm.addKeyMap(keyMap);
     }
-    var map = buildKeymap(pairs);
-    if (explode) map.Enter = buildExplodeHandler(explode);
-    cm.addKeyMap(map);
   });
 
-  function charsAround(cm, pos) {
-    var str = cm.getRange(CodeMirror.Pos(pos.line, pos.ch - 1),
-                          CodeMirror.Pos(pos.line, pos.ch + 1));
-    return str.length == 2 ? str : null;
+  function getOption(conf, name) {
+    if (name == "pairs" && typeof conf == "string") return conf;
+    if (typeof conf == "object" && conf[name] != null) return conf[name];
+    return defaults[name];
   }
 
-  function buildKeymap(pairs) {
-    var map = {
-      name : "autoCloseBrackets",
-      Backspace: function(cm) {
-        if (cm.somethingSelected()) return CodeMirror.Pass;
-        var cur = cm.getCursor(), around = charsAround(cm, cur);
-        if (around && pairs.indexOf(around) % 2 == 0)
-          cm.replaceRange("", CodeMirror.Pos(cur.line, cur.ch - 1), CodeMirror.Pos(cur.line, cur.ch + 1));
-        else
-          return CodeMirror.Pass;
+  var bind = defaults.pairs + "`";
+  var keyMap = {Backspace: handleBackspace, Enter: handleEnter};
+  for (var i = 0; i < bind.length; i++)
+    keyMap["'" + bind.charAt(i) + "'"] = handler(bind.charAt(i));
+
+  function handler(ch) {
+    return function(cm) { return handleChar(cm, ch); };
+  }
+
+  function getConfig(cm) {
+    var deflt = cm.state.closeBrackets;
+    if (!deflt) return null;
+    var mode = cm.getModeAt(cm.getCursor());
+    return mode.closeBrackets || deflt;
+  }
+
+  function handleBackspace(cm) {
+    var conf = getConfig(cm);
+    if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
+
+    var pairs = getOption(conf, "pairs");
+    var ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++) {
+      if (!ranges[i].empty()) return CodeMirror.Pass;
+      var around = charsAround(cm, ranges[i].head);
+      if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
+    }
+    for (var i = ranges.length - 1; i >= 0; i--) {
+      var cur = ranges[i].head;
+      cm.replaceRange("", Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1));
+    }
+  }
+
+  function handleEnter(cm) {
+    var conf = getConfig(cm);
+    var explode = conf && getOption(conf, "explode");
+    if (!explode || cm.getOption("disableInput")) return CodeMirror.Pass;
+
+    var ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++) {
+      if (!ranges[i].empty()) return CodeMirror.Pass;
+      var around = charsAround(cm, ranges[i].head);
+      if (!around || explode.indexOf(around) % 2 != 0) return CodeMirror.Pass;
+    }
+    cm.operation(function() {
+      cm.replaceSelection("\n\n", null);
+      cm.execCommand("goCharLeft");
+      ranges = cm.listSelections();
+      for (var i = 0; i < ranges.length; i++) {
+        var line = ranges[i].head.line;
+        cm.indentLine(line, null, true);
+        cm.indentLine(line + 1, null, true);
       }
-    };
-    var closingBrackets = "";
-    for (var i = 0; i < pairs.length; i += 2) (function(left, right) {
-      if (left != right) closingBrackets += right;
-      function surround(cm) {
-        var selection = cm.getSelection();
-        cm.replaceSelection(left + selection + right);
+    });
+  }
+
+  function handleChar(cm, ch) {
+    var conf = getConfig(cm);
+    if (!conf || cm.getOption("disableInput")) return CodeMirror.Pass;
+
+    var pairs = getOption(conf, "pairs");
+    var pos = pairs.indexOf(ch);
+    if (pos == -1) return CodeMirror.Pass;
+    var triples = getOption(conf, "triples");
+
+    var identical = pairs.charAt(pos + 1) == ch;
+    var ranges = cm.listSelections();
+    var opening = pos % 2 == 0;
+
+    var type, next;
+    for (var i = 0; i < ranges.length; i++) {
+      var range = ranges[i], cur = range.head, curType;
+      var next = cm.getRange(cur, Pos(cur.line, cur.ch + 1));
+      if (opening && !range.empty()) {
+        curType = "surround";
+      } else if ((identical || !opening) && next == ch) {
+        if (triples.indexOf(ch) >= 0 && cm.getRange(cur, Pos(cur.line, cur.ch + 3)) == ch + ch + ch)
+          curType = "skipThree";
+        else
+          curType = "skip";
+      } else if (identical && cur.ch > 1 && triples.indexOf(ch) >= 0 &&
+                 cm.getRange(Pos(cur.line, cur.ch - 2), cur) == ch + ch &&
+                 (cur.ch <= 2 || cm.getRange(Pos(cur.line, cur.ch - 3), Pos(cur.line, cur.ch - 2)) != ch)) {
+        curType = "addFour";
+      } else if (identical) {
+        if (!CodeMirror.isWordChar(next) && enteringString(cm, cur, ch)) curType = "both";
+        else return CodeMirror.Pass;
+      } else if (opening && (cm.getLine(cur.line).length == cur.ch ||
+                             isClosingBracket(next, pairs) ||
+                             /\s/.test(next))) {
+        curType = "both";
+      } else {
+        return CodeMirror.Pass;
       }
-      function maybeOverwrite(cm) {
-        var cur = cm.getCursor(), ahead = cm.getRange(cur, CodeMirror.Pos(cur.line, cur.ch + 1));
-        if (ahead != right || cm.somethingSelected()) return CodeMirror.Pass;
-        else cm.execCommand("goCharRight");
+      if (!type) type = curType;
+      else if (type != curType) return CodeMirror.Pass;
+    }
+
+    var left = pos % 2 ? pairs.charAt(pos - 1) : ch;
+    var right = pos % 2 ? ch : pairs.charAt(pos + 1);
+    cm.operation(function() {
+      if (type == "skip") {
+        cm.execCommand("goCharRight");
+      } else if (type == "skipThree") {
+        for (var i = 0; i < 3; i++)
+          cm.execCommand("goCharRight");
+      } else if (type == "surround") {
+        var sels = cm.getSelections();
+        for (var i = 0; i < sels.length; i++)
+          sels[i] = left + sels[i] + right;
+        cm.replaceSelections(sels, "around");
+      } else if (type == "both") {
+        cm.replaceSelection(left + right, null);
+        cm.triggerElectric(left + right);
+        cm.execCommand("goCharLeft");
+      } else if (type == "addFour") {
+        cm.replaceSelection(left + left + left + left, "before");
+        cm.execCommand("goCharRight");
       }
-      map["'" + left + "'"] = function(cm) {
-        if (left == "'" && cm.getTokenAt(cm.getCursor()).type == "comment")
-          return CodeMirror.Pass;
-        if (cm.somethingSelected()) return surround(cm);
-        if (left == right && maybeOverwrite(cm) != CodeMirror.Pass) return;
-        var cur = cm.getCursor(), ahead = CodeMirror.Pos(cur.line, cur.ch + 1);
-        var line = cm.getLine(cur.line), nextChar = line.charAt(cur.ch), curChar = cur.ch > 0 ? line.charAt(cur.ch - 1) : "";
-        if (left == right && CodeMirror.isWordChar(curChar))
-          return CodeMirror.Pass;
-        if (line.length == cur.ch || closingBrackets.indexOf(nextChar) >= 0 || SPACE_CHAR_REGEX.test(nextChar))
-          cm.replaceSelection(left + right, {head: ahead, anchor: ahead});
-        else
-          return CodeMirror.Pass;
-      };
-      if (left != right) map["'" + right + "'"] = maybeOverwrite;
-    })(pairs.charAt(i), pairs.charAt(i + 1));
-    return map;
+    });
   }
 
-  function buildExplodeHandler(pairs) {
-    return function(cm) {
-      var cur = cm.getCursor(), around = charsAround(cm, cur);
-      if (!around || pairs.indexOf(around) % 2 != 0) return CodeMirror.Pass;
-      cm.operation(function() {
-        var newPos = CodeMirror.Pos(cur.line + 1, 0);
-        cm.replaceSelection("\n\n", {anchor: newPos, head: newPos}, "+input");
-        cm.indentLine(cur.line + 1, null, true);
-        cm.indentLine(cur.line + 2, null, true);
-      });
-    };
+  function isClosingBracket(ch, pairs) {
+    var pos = pairs.lastIndexOf(ch);
+    return pos > -1 && pos % 2 == 1;
+  }
+
+  function charsAround(cm, pos) {
+    var str = cm.getRange(Pos(pos.line, pos.ch - 1),
+                          Pos(pos.line, pos.ch + 1));
+    return str.length == 2 ? str : null;
+  }
+
+  // Project the token type that will exists after the given char is
+  // typed, and use it to determine whether it would cause the start
+  // of a string token.
+  function enteringString(cm, pos, ch) {
+    var line = cm.getLine(pos.line);
+    var token = cm.getTokenAt(pos);
+    if (/\bstring2?\b/.test(token.type)) return false;
+    var stream = new CodeMirror.StringStream(line.slice(0, pos.ch) + ch + line.slice(pos.ch), 4);
+    stream.pos = stream.start = token.start;
+    for (;;) {
+      var type1 = cm.getMode().token(stream, token.state);
+      if (stream.pos >= pos.ch + 1) return /\bstring2?\b/.test(type1);
+      stream.start = stream.pos;
+    }
   }
-})();
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css
index 52881f7df..3543523e6 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.css
@@ -4,10 +4,7 @@
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
   height: 300px;
-}
-.CodeMirror-scroll {
-  /* Set scrolling behaviour here */
-  overflow: auto;
+  color: black;
 }
 
 /* PADDING */
@@ -36,65 +33,110 @@
   min-width: 20px;
   text-align: right;
   color: #999;
+  white-space: nowrap;
 }
 
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
 /* CURSOR */
 
-.CodeMirror div.CodeMirror-cursor {
+.CodeMirror-cursor {
   border-left: 1px solid black;
-  z-index: 3;
+  border-right: none;
+  width: 0;
 }
 /* Shown when moving in bi-directional text */
 .CodeMirror div.CodeMirror-secondarycursor {
   border-left: 1px solid silver;
 }
-.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+.cm-fat-cursor .CodeMirror-cursor {
   width: auto;
   border: 0;
   background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
 /* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
+.CodeMirror-overwrite .CodeMirror-cursor {}
 
-.cm-tab { display: inline-block; }
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  position: absolute;
+}
 
 /* DEFAULT THEME */
 
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
 .cm-s-default .cm-keyword {color: #708;}
 .cm-s-default .cm-atom {color: #219;}
 .cm-s-default .cm-number {color: #164;}
 .cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable {color: black;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
 .cm-s-default .cm-variable-2 {color: #05a;}
 .cm-s-default .cm-variable-3 {color: #085;}
-.cm-s-default .cm-property {color: black;}
-.cm-s-default .cm-operator {color: black;}
 .cm-s-default .cm-comment {color: #a50;}
 .cm-s-default .cm-string {color: #a11;}
 .cm-s-default .cm-string-2 {color: #f50;}
 .cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-error {color: #f00;}
 .cm-s-default .cm-qualifier {color: #555;}
 .cm-s-default .cm-builtin {color: #30a;}
 .cm-s-default .cm-bracket {color: #997;}
 .cm-s-default .cm-tag {color: #170;}
 .cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
 .cm-s-default .cm-hr {color: #999;}
 .cm-s-default .cm-link {color: #00c;}
 
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-
+.cm-s-default .cm-error {color: #f00;}
 .cm-invalidchar {color: #f00;}
 
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
 div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
 div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
 
 /* STOP */
 
@@ -102,24 +144,24 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
    the editor. You probably shouldn't touch them. */
 
 .CodeMirror {
-  line-height: 1;
   position: relative;
   overflow: hidden;
   background: white;
-  color: black;
 }
 
 .CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
   /* 30px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
   margin-bottom: -30px; margin-right: -30px;
-  padding-bottom: 30px; padding-right: 30px;
+  padding-bottom: 30px;
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
 }
 .CodeMirror-sizer {
   position: relative;
+  border-right: 30px solid transparent;
 }
 
 /* The fake, visible scrollbars. Used to force redraw during scrolling
@@ -149,27 +191,42 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-gutters {
   position: absolute; left: 0; top: 0;
-  padding-bottom: 30px;
   z-index: 3;
 }
 .CodeMirror-gutter {
   white-space: normal;
   height: 100%;
-  padding-bottom: 30px;
-  margin-bottom: -32px;
   display: inline-block;
+  margin-bottom: -30px;
   /* Hack to make IE7 behave */
   *zoom:1;
   *display:inline;
 }
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
 .CodeMirror-gutter-elt {
   position: absolute;
   cursor: default;
   z-index: 4;
 }
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 
 .CodeMirror-lines {
   cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
 }
 .CodeMirror pre {
   /* Reset some styles that the rest of the page might have set */
@@ -186,12 +243,14 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   z-index: 2;
   position: relative;
   overflow: visible;
+  -webkit-tap-highlight-color: transparent;
 }
 .CodeMirror-wrap pre {
   word-wrap: break-word;
   white-space: pre-wrap;
   word-break: normal;
 }
+
 .CodeMirror-linebackground {
   position: absolute;
   left: 0; right: 0; top: 0; bottom: 0;
@@ -204,33 +263,51 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: auto;
 }
 
-.CodeMirror-widget {
+.CodeMirror-widget {}
+
+.CodeMirror-code {
+  outline: none;
 }
 
-.CodeMirror-wrap .CodeMirror-scroll {
-  overflow-x: hidden;
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
 }
 
 .CodeMirror-measure {
   position: absolute;
-  width: 100%; height: 0px;
+  width: 100%;
+  height: 0;
   overflow: hidden;
   visibility: hidden;
 }
+
+.CodeMirror-cursor { position: absolute; }
 .CodeMirror-measure pre { position: static; }
 
-.CodeMirror div.CodeMirror-cursor {
-  position: absolute;
+div.CodeMirror-cursors {
   visibility: hidden;
-  border-right: none;
-  width: 0;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
 }
-.CodeMirror-focused div.CodeMirror-cursor {
+
+.CodeMirror-focused div.CodeMirror-cursors {
   visibility: visible;
 }
 
 .CodeMirror-selected { background: #d9d9d9; }
 .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
 
 .cm-searching {
   background: #ffa;
@@ -240,9 +317,18 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 /* IE7 hack to prevent it from returning funny offsetTops on the spans */
 .CodeMirror span { *vertical-align: text-bottom; }
 
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
 @media print {
   /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursor {
+  .CodeMirror div.CodeMirror-cursors {
     visibility: hidden;
   }
 }
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js
index fff4344ae..80a709675 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/codemirror.js
@@ -1,22 +1,37 @@
-// CodeMirror is the only global var we claim
-window.CodeMirror = (function() {
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+// This is CodeMirror (http://codemirror.net), a code editor
+// implemented in JavaScript on top of the browser's DOM.
+//
+// You can find some technical background for some of the code below
+// at http://marijnhaverbeke.nl/blog/#cm-internals .
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    module.exports = mod();
+  else if (typeof define == "function" && define.amd) // AMD
+    return define([], mod);
+  else // Plain browser env
+    this.CodeMirror = mod();
+})(function() {
   "use strict";
 
   // BROWSER SNIFFING
 
-  // Crude, but necessary to handle a number of hard-to-feature-detect
-  // bugs and behavior differences.
+  // Kludges for bugs and behavior differences that can't be feature
+  // detected are enabled based on userAgent etc sniffing.
+
   var gecko = /gecko\/\d/i.test(navigator.userAgent);
-  var ie = /MSIE \d/.test(navigator.userAgent);
-  var ie_lt8 = ie && (document.documentMode == null || document.documentMode < 8);
-  var ie_lt9 = ie && (document.documentMode == null || document.documentMode < 9);
+  var ie_upto10 = /MSIE \d/.test(navigator.userAgent);
+  var ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
+  var ie = ie_upto10 || ie_11up;
+  var ie_version = ie && (ie_upto10 ? document.documentMode || 6 : ie_11up[1]);
   var webkit = /WebKit\//.test(navigator.userAgent);
   var qtwebkit = webkit && /Qt\/\d+\.\d+/.test(navigator.userAgent);
   var chrome = /Chrome\//.test(navigator.userAgent);
-  var opera = /Opera\//.test(navigator.userAgent);
+  var presto = /Opera\//.test(navigator.userAgent);
   var safari = /Apple Computer/.test(navigator.vendor);
-  var khtml = /KHTML\//.test(navigator.userAgent);
-  var mac_geLion = /Mac OS X 1\d\D([7-9]|\d\d)\D/.test(navigator.userAgent);
   var mac_geMountainLion = /Mac OS X 1\d\D([8-9]|\d\d)\D/.test(navigator.userAgent);
   var phantom = /PhantomJS/.test(navigator.userAgent);
 
@@ -24,153 +39,174 @@ window.CodeMirror = (function() {
   // This is woefully incomplete. Suggestions for alternative methods welcome.
   var mobile = ios || /Android|webOS|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
   var mac = ios || /Mac/.test(navigator.platform);
-  var windows = /windows/i.test(navigator.platform);
+  var windows = /win/i.test(navigator.platform);
 
-  var opera_version = opera && navigator.userAgent.match(/Version\/(\d*\.\d*)/);
-  if (opera_version) opera_version = Number(opera_version[1]);
+  var presto_version = presto && navigator.userAgent.match(/Version\/(\d*\.\d*)/);
+  if (presto_version) presto_version = Number(presto_version[1]);
+  if (presto_version && presto_version >= 15) { presto = false; webkit = true; }
   // Some browsers use the wrong event properties to signal cmd/ctrl on OS X
-  var flipCtrlCmd = mac && (qtwebkit || opera && (opera_version == null || opera_version < 12.11));
-  var captureMiddleClick = gecko || (ie && !ie_lt9);
+  var flipCtrlCmd = mac && (qtwebkit || presto && (presto_version == null || presto_version < 12.11));
+  var captureRightClick = gecko || (ie && ie_version >= 9);
 
-  // Optimize some code when these features are not used
+  // Optimize some code when these features are not used.
   var sawReadOnlySpans = false, sawCollapsedSpans = false;
 
-  // CONSTRUCTOR
+  // EDITOR CONSTRUCTOR
+
+  // A CodeMirror instance represents an editor. This is the object
+  // that user code is usually dealing with.
 
   function CodeMirror(place, options) {
     if (!(this instanceof CodeMirror)) return new CodeMirror(place, options);
 
-    this.options = options = options || {};
+    this.options = options = options ? copyObj(options) : {};
     // Determine effective options based on given values and defaults.
-    for (var opt in defaults) if (!options.hasOwnProperty(opt) && defaults.hasOwnProperty(opt))
-      options[opt] = defaults[opt];
+    copyObj(defaults, options, false);
     setGuttersForLineNumbers(options);
 
-    var docStart = typeof options.value == "string" ? 0 : options.value.first;
-    var display = this.display = makeDisplay(place, docStart);
+    var doc = options.value;
+    if (typeof doc == "string") doc = new Doc(doc, options.mode, null, options.lineSeparator);
+    this.doc = doc;
+
+    var input = new CodeMirror.inputStyles[options.inputStyle](this);
+    var display = this.display = new Display(place, doc, input);
     display.wrapper.CodeMirror = this;
     updateGutters(this);
-    if (options.autofocus && !mobile) focusInput(this);
-
-    this.state = {keyMaps: [],
-                  overlays: [],
-                  modeGen: 0,
-                  overwrite: false, focused: false,
-                  suppressEdits: false, pasteIncoming: false,
-                  draggingText: false,
-                  highlight: new Delayed()};
-
     themeChanged(this);
     if (options.lineWrapping)
       this.display.wrapper.className += " CodeMirror-wrap";
+    if (options.autofocus && !mobile) display.input.focus();
+    initScrollbars(this);
+
+    this.state = {
+      keyMaps: [],  // stores maps added by addKeyMap
+      overlays: [], // highlighting overlays, as added by addOverlay
+      modeGen: 0,   // bumped when mode/overlay changes, used to invalidate highlighting info
+      overwrite: false,
+      delayingBlurEvent: false,
+      focused: false,
+      suppressEdits: false, // used to disable editing during key handlers when in readOnly mode
+      pasteIncoming: false, cutIncoming: false, // help recognize paste/cut edits in input.poll
+      selectingText: false,
+      draggingText: false,
+      highlight: new Delayed(), // stores highlight worker timeout
+      keySeq: null,  // Unfinished key sequence
+      specialChars: null
+    };
 
-    var doc = options.value;
-    if (typeof doc == "string") doc = new Doc(options.value, options.mode);
-    operation(this, attachDoc)(this, doc);
+    var cm = this;
 
     // Override magic textarea content restore that IE sometimes does
     // on our hidden textarea on reload
-    if (ie) setTimeout(bind(resetInput, this, true), 20);
+    if (ie && ie_version < 11) setTimeout(function() { cm.display.input.reset(true); }, 20);
 
     registerEventHandlers(this);
-    // IE throws unspecified error in certain cases, when
-    // trying to access activeElement before onload
-    var hasFocus; try { hasFocus = (document.activeElement == display.input); } catch(e) { }
-    if (hasFocus || (options.autofocus && !mobile)) setTimeout(bind(onFocus, this), 20);
-    else onBlur(this);
+    ensureGlobalHandlers();
+
+    startOperation(this);
+    this.curOp.forceUpdate = true;
+    attachDoc(this, doc);
 
-    operation(this, function() {
-      for (var opt in optionHandlers)
-        if (optionHandlers.propertyIsEnumerable(opt))
-          optionHandlers[opt](this, options[opt], Init);
-      for (var i = 0; i < initHooks.length; ++i) initHooks[i](this);
-    })();
+    if ((options.autofocus && !mobile) || cm.hasFocus())
+      setTimeout(bind(onFocus, this), 20);
+    else
+      onBlur(this);
+
+    for (var opt in optionHandlers) if (optionHandlers.hasOwnProperty(opt))
+      optionHandlers[opt](this, options[opt], Init);
+    maybeUpdateLineNumberWidth(this);
+    if (options.finishInit) options.finishInit(this);
+    for (var i = 0; i < initHooks.length; ++i) initHooks[i](this);
+    endOperation(this);
+    // Suppress optimizelegibility in Webkit, since it breaks text
+    // measuring on line wrapping boundaries.
+    if (webkit && options.lineWrapping &&
+        getComputedStyle(display.lineDiv).textRendering == "optimizelegibility")
+      display.lineDiv.style.textRendering = "auto";
   }
 
   // DISPLAY CONSTRUCTOR
 
-  function makeDisplay(place, docStart) {
-    var d = {};
-
-    var input = d.input = elt("textarea", null, null, "position: absolute; padding: 0; width: 1px; height: 1em; outline: none; font-size: 4px;");
-    if (webkit) input.style.width = "1000px";
-    else input.setAttribute("wrap", "off");
-    // if border: 0; -- iOS fails to open keyboard (issue #1287)
-    if (ios) input.style.border = "1px solid black";
-    input.setAttribute("autocorrect", "off"); input.setAttribute("autocapitalize", "off"); input.setAttribute("spellcheck", "false");
-
-    // Wraps and hides input textarea
-    d.inputDiv = elt("div", [input], null, "overflow: hidden; position: relative; width: 3px; height: 0px;");
-    // The actual fake scrollbars.
-    d.scrollbarH = elt("div", [elt("div", null, null, "height: 1px")], "CodeMirror-hscrollbar");
-    d.scrollbarV = elt("div", [elt("div", null, null, "width: 1px")], "CodeMirror-vscrollbar");
+  // The display handles the DOM integration, both for input reading
+  // and content drawing. It holds references to DOM nodes and
+  // display-related state.
+
+  function Display(place, doc, input) {
+    var d = this;
+    this.input = input;
+
+    // Covers bottom-right square when both scrollbars are present.
     d.scrollbarFiller = elt("div", null, "CodeMirror-scrollbar-filler");
+    d.scrollbarFiller.setAttribute("cm-not-content", "true");
+    // Covers bottom of gutter when coverGutterNextToScrollbar is on
+    // and h scrollbar is present.
     d.gutterFiller = elt("div", null, "CodeMirror-gutter-filler");
-    // DIVs containing the selection and the actual code
+    d.gutterFiller.setAttribute("cm-not-content", "true");
+    // Will contain the actual code, positioned to cover the viewport.
     d.lineDiv = elt("div", null, "CodeMirror-code");
+    // Elements are added to these to represent selection and cursors.
     d.selectionDiv = elt("div", null, null, "position: relative; z-index: 1");
-    // Blinky cursor, and element used to ensure cursor fits at the end of a line
-    d.cursor = elt("div", "\u00a0", "CodeMirror-cursor");
-    // Secondary cursor, shown when on a 'jump' in bi-directional text
-    d.otherCursor = elt("div", "\u00a0", "CodeMirror-cursor CodeMirror-secondarycursor");
-    // Used to measure text size
+    d.cursorDiv = elt("div", null, "CodeMirror-cursors");
+    // A visibility: hidden element used to find the size of things.
     d.measure = elt("div", null, "CodeMirror-measure");
+    // When lines outside of the viewport are measured, they are drawn in this.
+    d.lineMeasure = elt("div", null, "CodeMirror-measure");
     // Wraps everything that needs to exist inside the vertically-padded coordinate system
-    d.lineSpace = elt("div", [d.measure, d.selectionDiv, d.lineDiv, d.cursor, d.otherCursor],
-                         null, "position: relative; outline: none");
-    // Moved around its parent to cover visible view
+    d.lineSpace = elt("div", [d.measure, d.lineMeasure, d.selectionDiv, d.cursorDiv, d.lineDiv],
+                      null, "position: relative; outline: none");
+    // Moved around its parent to cover visible view.
     d.mover = elt("div", [elt("div", [d.lineSpace], "CodeMirror-lines")], null, "position: relative");
-    // Set to the height of the text, causes scrolling
+    // Set to the height of the document, allowing scrolling.
     d.sizer = elt("div", [d.mover], "CodeMirror-sizer");
-    // D is needed because behavior of elts with overflow: auto and padding is inconsistent across browsers
-    d.heightForcer = elt("div", null, null, "position: absolute; height: " + scrollerCutOff + "px; width: 1px;");
-    // Will contain the gutters, if any
+    d.sizerWidth = null;
+    // Behavior of elts with overflow: auto and padding is
+    // inconsistent across browsers. This is used to ensure the
+    // scrollable area is big enough.
+    d.heightForcer = elt("div", null, null, "position: absolute; height: " + scrollerGap + "px; width: 1px;");
+    // Will contain the gutters, if any.
     d.gutters = elt("div", null, "CodeMirror-gutters");
     d.lineGutter = null;
-    // Provides scrolling
+    // Actual scrollable element.
     d.scroller = elt("div", [d.sizer, d.heightForcer, d.gutters], "CodeMirror-scroll");
     d.scroller.setAttribute("tabIndex", "-1");
     // The element in which the editor lives.
-    d.wrapper = elt("div", [d.inputDiv, d.scrollbarH, d.scrollbarV,
-                            d.scrollbarFiller, d.gutterFiller, d.scroller], "CodeMirror");
-    // Work around IE7 z-index bug
-    if (ie_lt8) { d.gutters.style.zIndex = -1; d.scroller.style.paddingRight = 0; }
-    if (place.appendChild) place.appendChild(d.wrapper); else place(d.wrapper);
-
-    // Needed to hide big blue blinking cursor on Mobile Safari
-    if (ios) input.style.width = "0px";
-    if (!webkit) d.scroller.draggable = true;
-    // Needed to handle Tab key in KHTML
-    if (khtml) { d.inputDiv.style.height = "1px"; d.inputDiv.style.position = "absolute"; }
-    // Need to set a minimum width to see the scrollbar on IE7 (but must not set it on IE8).
-    else if (ie_lt8) d.scrollbarH.style.minWidth = d.scrollbarV.style.minWidth = "18px";
-
-    // Current visible range (may be bigger than the view window).
-    d.viewOffset = d.lastSizeC = 0;
-    d.showingFrom = d.showingTo = docStart;
+    d.wrapper = elt("div", [d.scrollbarFiller, d.gutterFiller, d.scroller], "CodeMirror");
+
+    // Work around IE7 z-index bug (not perfect, hence IE7 not really being supported)
+    if (ie && ie_version < 8) { d.gutters.style.zIndex = -1; d.scroller.style.paddingRight = 0; }
+    if (!webkit && !(gecko && mobile)) d.scroller.draggable = true;
+
+    if (place) {
+      if (place.appendChild) place.appendChild(d.wrapper);
+      else place(d.wrapper);
+    }
+
+    // Current rendered range (may be bigger than the view window).
+    d.viewFrom = d.viewTo = doc.first;
+    d.reportedViewFrom = d.reportedViewTo = doc.first;
+    // Information about the rendered lines.
+    d.view = [];
+    d.renderedView = null;
+    // Holds info about a single rendered line when it was rendered
+    // for measurement, while not in view.
+    d.externalMeasured = null;
+    // Empty space (in pixels) above the view
+    d.viewOffset = 0;
+    d.lastWrapHeight = d.lastWrapWidth = 0;
+    d.updateLineNumbers = null;
+
+    d.nativeBarWidth = d.barHeight = d.barWidth = 0;
+    d.scrollbarsClipped = false;
 
     // Used to only resize the line number gutter when necessary (when
     // the amount of lines crosses a boundary that makes its width change)
     d.lineNumWidth = d.lineNumInnerWidth = d.lineNumChars = null;
-    // See readInput and resetInput
-    d.prevInput = "";
-    // Set to true when a non-horizontal-scrolling widget is added. As
-    // an optimization, widget aligning is skipped when d is false.
+    // Set to true when a non-horizontal-scrolling line widget is
+    // added. As an optimization, line widget aligning is skipped when
+    // this is false.
     d.alignWidgets = false;
-    // Flag that indicates whether we currently expect input to appear
-    // (after some event like 'keypress' or 'input') and are polling
-    // intensively.
-    d.pollingFast = false;
-    // Self-resetting timeout for the poller
-    d.poll = new Delayed();
 
-    d.cachedCharWidth = d.cachedTextHeight = null;
-    d.measureLineCache = [];
-    d.measureLineCachePos = 0;
-
-    // Tracks when resetInput has punted to just putting a short
-    // string instead of the (large) selection.
-    d.inaccurateSelection = false;
+    d.cachedCharWidth = d.cachedTextHeight = d.cachedPaddingH = null;
 
     // Tracks the maximum line length so that the horizontal scrollbar
     // can be kept static when scrolling.
@@ -181,7 +217,16 @@ window.CodeMirror = (function() {
     // Used for measuring wheel scrolling granularity
     d.wheelDX = d.wheelDY = d.wheelStartX = d.wheelStartY = null;
 
-    return d;
+    // True when shift is held down.
+    d.shift = false;
+
+    // Used to track whether anything happened since the context menu
+    // was opened.
+    d.selForContextMenu = null;
+
+    d.activeTouch = null;
+
+    input.init(d);
   }
 
   // STATE UPDATES
@@ -190,6 +235,10 @@ window.CodeMirror = (function() {
 
   function loadMode(cm) {
     cm.doc.mode = CodeMirror.getMode(cm.options, cm.doc.modeOption);
+    resetModeState(cm);
+  }
+
+  function resetModeState(cm) {
     cm.doc.iter(function(line) {
       if (line.stateAfter) line.stateAfter = null;
       if (line.styles) line.styles = null;
@@ -202,11 +251,12 @@ window.CodeMirror = (function() {
 
   function wrappingChanged(cm) {
     if (cm.options.lineWrapping) {
-      cm.display.wrapper.className += " CodeMirror-wrap";
+      addClass(cm.display.wrapper, "CodeMirror-wrap");
       cm.display.sizer.style.minWidth = "";
+      cm.display.sizerWidth = null;
     } else {
-      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-wrap", "");
-      computeMaxLength(cm);
+      rmClass(cm.display.wrapper, "CodeMirror-wrap");
+      findMaxLine(cm);
     }
     estimateLineHeights(cm);
     regChange(cm);
@@ -214,16 +264,24 @@ window.CodeMirror = (function() {
     setTimeout(function(){updateScrollbars(cm);}, 100);
   }
 
+  // Returns a function that estimates the height of a line, to use as
+  // first approximation until the line becomes visible (and is thus
+  // properly measurable).
   function estimateHeight(cm) {
     var th = textHeight(cm.display), wrapping = cm.options.lineWrapping;
     var perLine = wrapping && Math.max(5, cm.display.scroller.clientWidth / charWidth(cm.display) - 3);
     return function(line) {
-      if (lineIsHidden(cm.doc, line))
-        return 0;
-      else if (wrapping)
-        return (Math.ceil(line.text.length / perLine) || 1) * th;
+      if (lineIsHidden(cm.doc, line)) return 0;
+
+      var widgetsHeight = 0;
+      if (line.widgets) for (var i = 0; i < line.widgets.length; i++) {
+        if (line.widgets[i].height) widgetsHeight += line.widgets[i].height;
+      }
+
+      if (wrapping)
+        return widgetsHeight + (Math.ceil(line.text.length / perLine) || 1) * th;
       else
-        return th;
+        return widgetsHeight + th;
     };
   }
 
@@ -235,13 +293,6 @@ window.CodeMirror = (function() {
     });
   }
 
-  function keyMapChanged(cm) {
-    var map = keyMap[cm.options.keyMap], style = map.style;
-    cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-keymap-\S+/g, "") +
-      (style ? " cm-keymap-" + style : "");
-    cm.state.disableInput = map.disableInput;
-  }
-
   function themeChanged(cm) {
     cm.display.wrapper.className = cm.display.wrapper.className.replace(/\s*cm-s-\S+/g, "") +
       cm.options.theme.replace(/(^|\s)\s*/g, " cm-s-");
@@ -254,6 +305,8 @@ window.CodeMirror = (function() {
     setTimeout(function(){alignHorizontally(cm);}, 20);
   }
 
+  // Rebuild the gutter elements, ensure the margin to the left of the
+  // code matches their width.
   function updateGutters(cm) {
     var gutters = cm.display.gutters, specs = cm.options.gutters;
     removeChildren(gutters);
@@ -266,33 +319,43 @@ window.CodeMirror = (function() {
       }
     }
     gutters.style.display = i ? "" : "none";
+    updateGutterSpace(cm);
   }
 
-  function lineLength(doc, line) {
+  function updateGutterSpace(cm) {
+    var width = cm.display.gutters.offsetWidth;
+    cm.display.sizer.style.marginLeft = width + "px";
+  }
+
+  // Compute the character length of a line, taking into account
+  // collapsed ranges (see markText) that might hide parts, and join
+  // other lines onto it.
+  function lineLength(line) {
     if (line.height == 0) return 0;
     var len = line.text.length, merged, cur = line;
     while (merged = collapsedSpanAtStart(cur)) {
-      var found = merged.find();
-      cur = getLine(doc, found.from.line);
+      var found = merged.find(0, true);
+      cur = found.from.line;
       len += found.from.ch - found.to.ch;
     }
     cur = line;
     while (merged = collapsedSpanAtEnd(cur)) {
-      var found = merged.find();
+      var found = merged.find(0, true);
       len -= cur.text.length - found.from.ch;
-      cur = getLine(doc, found.to.line);
+      cur = found.to.line;
       len += cur.text.length - found.to.ch;
     }
     return len;
   }
 
-  function computeMaxLength(cm) {
+  // Find the longest line in the document.
+  function findMaxLine(cm) {
     var d = cm.display, doc = cm.doc;
     d.maxLine = getLine(doc, doc.first);
-    d.maxLineLength = lineLength(doc, d.maxLine);
+    d.maxLineLength = lineLength(d.maxLine);
     d.maxLineChanged = true;
     doc.iter(function(line) {
-      var len = lineLength(doc, line);
+      var len = lineLength(line);
       if (len > d.maxLineLength) {
         d.maxLineLength = len;
         d.maxLine = line;
@@ -303,78 +366,227 @@ window.CodeMirror = (function() {
   // Make sure the gutters options contains the element
   // "CodeMirror-linenumbers" when the lineNumbers option is true.
   function setGuttersForLineNumbers(options) {
-    var found = false;
-    for (var i = 0; i < options.gutters.length; ++i) {
-      if (options.gutters[i] == "CodeMirror-linenumbers") {
-        if (options.lineNumbers) found = true;
-        else options.gutters.splice(i--, 1);
-      }
+    var found = indexOf(options.gutters, "CodeMirror-linenumbers");
+    if (found == -1 && options.lineNumbers) {
+      options.gutters = options.gutters.concat(["CodeMirror-linenumbers"]);
+    } else if (found > -1 && !options.lineNumbers) {
+      options.gutters = options.gutters.slice(0);
+      options.gutters.splice(found, 1);
     }
-    if (!found && options.lineNumbers)
-      options.gutters.push("CodeMirror-linenumbers");
   }
 
   // SCROLLBARS
 
+  // Prepare DOM reads needed to update the scrollbars. Done in one
+  // shot to minimize update/measure roundtrips.
+  function measureForScrollbars(cm) {
+    var d = cm.display, gutterW = d.gutters.offsetWidth;
+    var docH = Math.round(cm.doc.height + paddingVert(cm.display));
+    return {
+      clientHeight: d.scroller.clientHeight,
+      viewHeight: d.wrapper.clientHeight,
+      scrollWidth: d.scroller.scrollWidth, clientWidth: d.scroller.clientWidth,
+      viewWidth: d.wrapper.clientWidth,
+      barLeft: cm.options.fixedGutter ? gutterW : 0,
+      docHeight: docH,
+      scrollHeight: docH + scrollGap(cm) + d.barHeight,
+      nativeBarWidth: d.nativeBarWidth,
+      gutterWidth: gutterW
+    };
+  }
+
+  function NativeScrollbars(place, scroll, cm) {
+    this.cm = cm;
+    var vert = this.vert = elt("div", [elt("div", null, null, "min-width: 1px")], "CodeMirror-vscrollbar");
+    var horiz = this.horiz = elt("div", [elt("div", null, null, "height: 100%; min-height: 1px")], "CodeMirror-hscrollbar");
+    place(vert); place(horiz);
+
+    on(vert, "scroll", function() {
+      if (vert.clientHeight) scroll(vert.scrollTop, "vertical");
+    });
+    on(horiz, "scroll", function() {
+      if (horiz.clientWidth) scroll(horiz.scrollLeft, "horizontal");
+    });
+
+    this.checkedOverlay = false;
+    // Need to set a minimum width to see the scrollbar on IE7 (but must not set it on IE8).
+    if (ie && ie_version < 8) this.horiz.style.minHeight = this.vert.style.minWidth = "18px";
+  }
+
+  NativeScrollbars.prototype = copyObj({
+    update: function(measure) {
+      var needsH = measure.scrollWidth > measure.clientWidth + 1;
+      var needsV = measure.scrollHeight > measure.clientHeight + 1;
+      var sWidth = measure.nativeBarWidth;
+
+      if (needsV) {
+        this.vert.style.display = "block";
+        this.vert.style.bottom = needsH ? sWidth + "px" : "0";
+        var totalHeight = measure.viewHeight - (needsH ? sWidth : 0);
+        // A bug in IE8 can cause this value to be negative, so guard it.
+        this.vert.firstChild.style.height =
+          Math.max(0, measure.scrollHeight - measure.clientHeight + totalHeight) + "px";
+      } else {
+        this.vert.style.display = "";
+        this.vert.firstChild.style.height = "0";
+      }
+
+      if (needsH) {
+        this.horiz.style.display = "block";
+        this.horiz.style.right = needsV ? sWidth + "px" : "0";
+        this.horiz.style.left = measure.barLeft + "px";
+        var totalWidth = measure.viewWidth - measure.barLeft - (needsV ? sWidth : 0);
+        this.horiz.firstChild.style.width =
+          (measure.scrollWidth - measure.clientWidth + totalWidth) + "px";
+      } else {
+        this.horiz.style.display = "";
+        this.horiz.firstChild.style.width = "0";
+      }
+
+      if (!this.checkedOverlay && measure.clientHeight > 0) {
+        if (sWidth == 0) this.overlayHack();
+        this.checkedOverlay = true;
+      }
+
+      return {right: needsV ? sWidth : 0, bottom: needsH ? sWidth : 0};
+    },
+    setScrollLeft: function(pos) {
+      if (this.horiz.scrollLeft != pos) this.horiz.scrollLeft = pos;
+    },
+    setScrollTop: function(pos) {
+      if (this.vert.scrollTop != pos) this.vert.scrollTop = pos;
+    },
+    overlayHack: function() {
+      var w = mac && !mac_geMountainLion ? "12px" : "18px";
+      this.horiz.style.minHeight = this.vert.style.minWidth = w;
+      var self = this;
+      var barMouseDown = function(e) {
+        if (e_target(e) != self.vert && e_target(e) != self.horiz)
+          operation(self.cm, onMouseDown)(e);
+      };
+      on(this.vert, "mousedown", barMouseDown);
+      on(this.horiz, "mousedown", barMouseDown);
+    },
+    clear: function() {
+      var parent = this.horiz.parentNode;
+      parent.removeChild(this.horiz);
+      parent.removeChild(this.vert);
+    }
+  }, NativeScrollbars.prototype);
+
+  function NullScrollbars() {}
+
+  NullScrollbars.prototype = copyObj({
+    update: function() { return {bottom: 0, right: 0}; },
+    setScrollLeft: function() {},
+    setScrollTop: function() {},
+    clear: function() {}
+  }, NullScrollbars.prototype);
+
+  CodeMirror.scrollbarModel = {"native": NativeScrollbars, "null": NullScrollbars};
+
+  function initScrollbars(cm) {
+    if (cm.display.scrollbars) {
+      cm.display.scrollbars.clear();
+      if (cm.display.scrollbars.addClass)
+        rmClass(cm.display.wrapper, cm.display.scrollbars.addClass);
+    }
+
+    cm.display.scrollbars = new CodeMirror.scrollbarModel[cm.options.scrollbarStyle](function(node) {
+      cm.display.wrapper.insertBefore(node, cm.display.scrollbarFiller);
+      // Prevent clicks in the scrollbars from killing focus
+      on(node, "mousedown", function() {
+        if (cm.state.focused) setTimeout(function() { cm.display.input.focus(); }, 0);
+      });
+      node.setAttribute("cm-not-content", "true");
+    }, function(pos, axis) {
+      if (axis == "horizontal") setScrollLeft(cm, pos);
+      else setScrollTop(cm, pos);
+    }, cm);
+    if (cm.display.scrollbars.addClass)
+      addClass(cm.display.wrapper, cm.display.scrollbars.addClass);
+  }
+
+  function updateScrollbars(cm, measure) {
+    if (!measure) measure = measureForScrollbars(cm);
+    var startWidth = cm.display.barWidth, startHeight = cm.display.barHeight;
+    updateScrollbarsInner(cm, measure);
+    for (var i = 0; i < 4 && startWidth != cm.display.barWidth || startHeight != cm.display.barHeight; i++) {
+      if (startWidth != cm.display.barWidth && cm.options.lineWrapping)
+        updateHeightsInViewport(cm);
+      updateScrollbarsInner(cm, measureForScrollbars(cm));
+      startWidth = cm.display.barWidth; startHeight = cm.display.barHeight;
+    }
+  }
+
   // Re-synchronize the fake scrollbars with the actual size of the
-  // content. Optionally force a scrollTop.
-  function updateScrollbars(cm) {
-    var d = cm.display, docHeight = cm.doc.height;
-    var totalHeight = docHeight + paddingVert(d);
-    d.sizer.style.minHeight = d.heightForcer.style.top = totalHeight + "px";
-    d.gutters.style.height = Math.max(totalHeight, d.scroller.clientHeight - scrollerCutOff) + "px";
-    var scrollHeight = Math.max(totalHeight, d.scroller.scrollHeight);
-    var needsH = d.scroller.scrollWidth > (d.scroller.clientWidth + 1);
-    var needsV = scrollHeight > (d.scroller.clientHeight + 1);
-    if (needsV) {
-      d.scrollbarV.style.display = "block";
-      d.scrollbarV.style.bottom = needsH ? scrollbarWidth(d.measure) + "px" : "0";
-      d.scrollbarV.firstChild.style.height =
-        (scrollHeight - d.scroller.clientHeight + d.scrollbarV.clientHeight) + "px";
-    } else d.scrollbarV.style.display = "";
-    if (needsH) {
-      d.scrollbarH.style.display = "block";
-      d.scrollbarH.style.right = needsV ? scrollbarWidth(d.measure) + "px" : "0";
-      d.scrollbarH.firstChild.style.width =
-        (d.scroller.scrollWidth - d.scroller.clientWidth + d.scrollbarH.clientWidth) + "px";
-    } else d.scrollbarH.style.display = "";
-    if (needsH && needsV) {
+  // content.
+  function updateScrollbarsInner(cm, measure) {
+    var d = cm.display;
+    var sizes = d.scrollbars.update(measure);
+
+    d.sizer.style.paddingRight = (d.barWidth = sizes.right) + "px";
+    d.sizer.style.paddingBottom = (d.barHeight = sizes.bottom) + "px";
+
+    if (sizes.right && sizes.bottom) {
       d.scrollbarFiller.style.display = "block";
-      d.scrollbarFiller.style.height = d.scrollbarFiller.style.width = scrollbarWidth(d.measure) + "px";
+      d.scrollbarFiller.style.height = sizes.bottom + "px";
+      d.scrollbarFiller.style.width = sizes.right + "px";
     } else d.scrollbarFiller.style.display = "";
-    if (needsH && cm.options.coverGutterNextToScrollbar && cm.options.fixedGutter) {
+    if (sizes.bottom && cm.options.coverGutterNextToScrollbar && cm.options.fixedGutter) {
       d.gutterFiller.style.display = "block";
-      d.gutterFiller.style.height = scrollbarWidth(d.measure) + "px";
-      d.gutterFiller.style.width = d.gutters.offsetWidth + "px";
+      d.gutterFiller.style.height = sizes.bottom + "px";
+      d.gutterFiller.style.width = measure.gutterWidth + "px";
     } else d.gutterFiller.style.display = "";
-
-    if (mac_geLion && scrollbarWidth(d.measure) === 0)
-      d.scrollbarV.style.minWidth = d.scrollbarH.style.minHeight = mac_geMountainLion ? "18px" : "12px";
   }
 
-  function visibleLines(display, doc, viewPort) {
-    var top = display.scroller.scrollTop, height = display.wrapper.clientHeight;
-    if (typeof viewPort == "number") top = viewPort;
-    else if (viewPort) {top = viewPort.top; height = viewPort.bottom - viewPort.top;}
+  // Compute the lines that are visible in a given viewport (defaults
+  // the the current scroll position). viewport may contain top,
+  // height, and ensure (see op.scrollToPos) properties.
+  function visibleLines(display, doc, viewport) {
+    var top = viewport && viewport.top != null ? Math.max(0, viewport.top) : display.scroller.scrollTop;
     top = Math.floor(top - paddingTop(display));
-    var bottom = Math.ceil(top + height);
-    return {from: lineAtHeight(doc, top), to: lineAtHeight(doc, bottom)};
+    var bottom = viewport && viewport.bottom != null ? viewport.bottom : top + display.wrapper.clientHeight;
+
+    var from = lineAtHeight(doc, top), to = lineAtHeight(doc, bottom);
+    // Ensure is a {from: {line, ch}, to: {line, ch}} object, and
+    // forces those lines into the viewport (if possible).
+    if (viewport && viewport.ensure) {
+      var ensureFrom = viewport.ensure.from.line, ensureTo = viewport.ensure.to.line;
+      if (ensureFrom < from) {
+        from = ensureFrom;
+        to = lineAtHeight(doc, heightAtLine(getLine(doc, ensureFrom)) + display.wrapper.clientHeight);
+      } else if (Math.min(ensureTo, doc.lastLine()) >= to) {
+        from = lineAtHeight(doc, heightAtLine(getLine(doc, ensureTo)) - display.wrapper.clientHeight);
+        to = ensureTo;
+      }
+    }
+    return {from: from, to: Math.max(to, from + 1)};
   }
 
   // LINE NUMBERS
 
+  // Re-align line numbers and gutter marks to compensate for
+  // horizontal scrolling.
   function alignHorizontally(cm) {
-    var display = cm.display;
+    var display = cm.display, view = display.view;
     if (!display.alignWidgets && (!display.gutters.firstChild || !cm.options.fixedGutter)) return;
     var comp = compensateForHScroll(display) - display.scroller.scrollLeft + cm.doc.scrollLeft;
-    var gutterW = display.gutters.offsetWidth, l = comp + "px";
-    for (var n = display.lineDiv.firstChild; n; n = n.nextSibling) if (n.alignable) {
-      for (var i = 0, a = n.alignable; i < a.length; ++i) a[i].style.left = l;
+    var gutterW = display.gutters.offsetWidth, left = comp + "px";
+    for (var i = 0; i < view.length; i++) if (!view[i].hidden) {
+      if (cm.options.fixedGutter && view[i].gutter)
+        view[i].gutter.style.left = left;
+      var align = view[i].alignable;
+      if (align) for (var j = 0; j < align.length; j++)
+        align[j].style.left = left;
     }
     if (cm.options.fixedGutter)
       display.gutters.style.left = (comp + gutterW) + "px";
   }
 
+  // Used to ensure that the line number gutter is still the right
+  // size for the current document size. Returns true when an update
+  // is needed.
   function maybeUpdateLineNumberWidth(cm) {
     if (!cm.options.lineNumbers) return false;
     var doc = cm.doc, last = lineNumberFor(cm.options, doc.first + doc.size - 1), display = cm.display;
@@ -383,10 +595,11 @@ window.CodeMirror = (function() {
                                                  "CodeMirror-linenumber CodeMirror-gutter-elt"));
       var innerW = test.firstChild.offsetWidth, padding = test.offsetWidth - innerW;
       display.lineGutter.style.width = "";
-      display.lineNumInnerWidth = Math.max(innerW, display.lineGutter.offsetWidth - padding);
+      display.lineNumInnerWidth = Math.max(innerW, display.lineGutter.offsetWidth - padding) + 1;
       display.lineNumWidth = display.lineNumInnerWidth + padding;
       display.lineNumChars = display.lineNumInnerWidth ? last.length : -1;
       display.lineGutter.style.width = display.lineNumWidth + "px";
+      updateGutterSpace(cm);
       return true;
     }
     return false;
@@ -395,185 +608,216 @@ window.CodeMirror = (function() {
   function lineNumberFor(options, i) {
     return String(options.lineNumberFormatter(i + options.firstLineNumber));
   }
+
+  // Computes display.scroller.scrollLeft + display.gutters.offsetWidth,
+  // but using getBoundingClientRect to get a sub-pixel-accurate
+  // result.
   function compensateForHScroll(display) {
-    return getRect(display.scroller).left - getRect(display.sizer).left;
+    return display.scroller.getBoundingClientRect().left - display.sizer.getBoundingClientRect().left;
   }
 
   // DISPLAY DRAWING
 
-  function updateDisplay(cm, changes, viewPort) {
-    var oldFrom = cm.display.showingFrom, oldTo = cm.display.showingTo, updated;
-    var visible = visibleLines(cm.display, cm.doc, viewPort);
-    for (;;) {
-      if (!updateDisplayInner(cm, changes, visible)) break;
-      updated = true;
-      updateSelection(cm);
-      updateScrollbars(cm);
-
-      // Clip forced viewport to actual scrollable area
-      if (viewPort)
-        viewPort = Math.min(cm.display.scroller.scrollHeight - cm.display.scroller.clientHeight,
-                            typeof viewPort == "number" ? viewPort : viewPort.top);
-      visible = visibleLines(cm.display, cm.doc, viewPort);
-      if (visible.from >= cm.display.showingFrom && visible.to <= cm.display.showingTo)
-        break;
-      changes = [];
-    }
+  function DisplayUpdate(cm, viewport, force) {
+    var display = cm.display;
+
+    this.viewport = viewport;
+    // Store some values that we'll need later (but don't want to force a relayout for)
+    this.visible = visibleLines(display, cm.doc, viewport);
+    this.editorIsHidden = !display.wrapper.offsetWidth;
+    this.wrapperHeight = display.wrapper.clientHeight;
+    this.wrapperWidth = display.wrapper.clientWidth;
+    this.oldDisplayWidth = displayWidth(cm);
+    this.force = force;
+    this.dims = getDimensions(cm);
+    this.events = [];
+  }
+
+  DisplayUpdate.prototype.signal = function(emitter, type) {
+    if (hasHandler(emitter, type))
+      this.events.push(arguments);
+  };
+  DisplayUpdate.prototype.finish = function() {
+    for (var i = 0; i < this.events.length; i++)
+      signal.apply(null, this.events[i]);
+  };
 
-    if (updated) {
-      signalLater(cm, "update", cm);
-      if (cm.display.showingFrom != oldFrom || cm.display.showingTo != oldTo)
-        signalLater(cm, "viewportChange", cm, cm.display.showingFrom, cm.display.showingTo);
+  function maybeClipScrollbars(cm) {
+    var display = cm.display;
+    if (!display.scrollbarsClipped && display.scroller.offsetWidth) {
+      display.nativeBarWidth = display.scroller.offsetWidth - display.scroller.clientWidth;
+      display.heightForcer.style.height = scrollGap(cm) + "px";
+      display.sizer.style.marginBottom = -display.nativeBarWidth + "px";
+      display.sizer.style.borderRightWidth = scrollGap(cm) + "px";
+      display.scrollbarsClipped = true;
     }
-    return updated;
   }
 
-  // Uses a set of changes plus the current scroll position to
-  // determine which DOM updates have to be made, and makes the
-  // updates.
-  function updateDisplayInner(cm, changes, visible) {
+  // Does the actual updating of the line display. Bails out
+  // (returning false) when there is nothing to be done and forced is
+  // false.
+  function updateDisplayIfNeeded(cm, update) {
     var display = cm.display, doc = cm.doc;
-    if (!display.wrapper.clientWidth) {
-      display.showingFrom = display.showingTo = doc.first;
-      display.viewOffset = 0;
-      return;
+
+    if (update.editorIsHidden) {
+      resetView(cm);
+      return false;
     }
 
     // Bail out if the visible area is already rendered and nothing changed.
-    if (changes.length == 0 &&
-        visible.from > display.showingFrom && visible.to < display.showingTo)
-      return;
-
-    if (maybeUpdateLineNumberWidth(cm))
-      changes = [{from: doc.first, to: doc.first + doc.size}];
-    var gutterW = display.sizer.style.marginLeft = display.gutters.offsetWidth + "px";
-    display.scrollbarH.style.left = cm.options.fixedGutter ? gutterW : "0";
+    if (!update.force &&
+        update.visible.from >= display.viewFrom && update.visible.to <= display.viewTo &&
+        (display.updateLineNumbers == null || display.updateLineNumbers >= display.viewTo) &&
+        display.renderedView == display.view && countDirtyView(cm) == 0)
+      return false;
 
-    // Used to determine which lines need their line numbers updated
-    var positionsChangedFrom = Infinity;
-    if (cm.options.lineNumbers)
-      for (var i = 0; i < changes.length; ++i)
-        if (changes[i].diff) { positionsChangedFrom = changes[i].from; break; }
+    if (maybeUpdateLineNumberWidth(cm)) {
+      resetView(cm);
+      update.dims = getDimensions(cm);
+    }
 
+    // Compute a suitable new viewport (from & to)
     var end = doc.first + doc.size;
-    var from = Math.max(visible.from - cm.options.viewportMargin, doc.first);
-    var to = Math.min(end, visible.to + cm.options.viewportMargin);
-    if (display.showingFrom < from && from - display.showingFrom < 20) from = Math.max(doc.first, display.showingFrom);
-    if (display.showingTo > to && display.showingTo - to < 20) to = Math.min(end, display.showingTo);
+    var from = Math.max(update.visible.from - cm.options.viewportMargin, doc.first);
+    var to = Math.min(end, update.visible.to + cm.options.viewportMargin);
+    if (display.viewFrom < from && from - display.viewFrom < 20) from = Math.max(doc.first, display.viewFrom);
+    if (display.viewTo > to && display.viewTo - to < 20) to = Math.min(end, display.viewTo);
     if (sawCollapsedSpans) {
-      from = lineNo(visualLine(doc, getLine(doc, from)));
-      while (to < end && lineIsHidden(doc, getLine(doc, to))) ++to;
-    }
-
-    // Create a range of theoretically intact lines, and punch holes
-    // in that using the change info.
-    var intact = [{from: Math.max(display.showingFrom, doc.first),
-                   to: Math.min(display.showingTo, end)}];
-    if (intact[0].from >= intact[0].to) intact = [];
-    else intact = computeIntact(intact, changes);
-    // When merged lines are present, we might have to reduce the
-    // intact ranges because changes in continued fragments of the
-    // intact lines do require the lines to be redrawn.
-    if (sawCollapsedSpans)
-      for (var i = 0; i < intact.length; ++i) {
-        var range = intact[i], merged;
-        while (merged = collapsedSpanAtEnd(getLine(doc, range.to - 1))) {
-          var newTo = merged.find().from.line;
-          if (newTo > range.from) range.to = newTo;
-          else { intact.splice(i--, 1); break; }
-        }
-      }
-
-    // Clip off the parts that won't be visible
-    var intactLines = 0;
-    for (var i = 0; i < intact.length; ++i) {
-      var range = intact[i];
-      if (range.from < from) range.from = from;
-      if (range.to > to) range.to = to;
-      if (range.from >= range.to) intact.splice(i--, 1);
-      else intactLines += range.to - range.from;
-    }
-    if (intactLines == to - from && from == display.showingFrom && to == display.showingTo) {
-      updateViewOffset(cm);
-      return;
+      from = visualLineNo(cm.doc, from);
+      to = visualLineEndNo(cm.doc, to);
     }
-    intact.sort(function(a, b) {return a.from - b.from;});
 
-    // Avoid crashing on IE's "unspecified error" when in iframes
-    try {
-      var focused = document.activeElement;
-    } catch(e) {}
-    if (intactLines < (to - from) * .7) display.lineDiv.style.display = "none";
-    patchDisplay(cm, from, to, intact, positionsChangedFrom);
-    display.lineDiv.style.display = "";
-    if (focused && document.activeElement != focused && focused.offsetHeight) focused.focus();
-
-    var different = from != display.showingFrom || to != display.showingTo ||
-      display.lastSizeC != display.wrapper.clientHeight;
-    // This is just a bogus formula that detects when the editor is
-    // resized or the font size changes.
+    var different = from != display.viewFrom || to != display.viewTo ||
+      display.lastWrapHeight != update.wrapperHeight || display.lastWrapWidth != update.wrapperWidth;
+    adjustView(cm, from, to);
+
+    display.viewOffset = heightAtLine(getLine(cm.doc, display.viewFrom));
+    // Position the mover div to align with the current scroll position
+    cm.display.mover.style.top = display.viewOffset + "px";
+
+    var toUpdate = countDirtyView(cm);
+    if (!different && toUpdate == 0 && !update.force && display.renderedView == display.view &&
+        (display.updateLineNumbers == null || display.updateLineNumbers >= display.viewTo))
+      return false;
+
+    // For big changes, we hide the enclosing element during the
+    // update, since that speeds up the operations on most browsers.
+    var focused = activeElt();
+    if (toUpdate > 4) display.lineDiv.style.display = "none";
+    patchDisplay(cm, display.updateLineNumbers, update.dims);
+    if (toUpdate > 4) display.lineDiv.style.display = "";
+    display.renderedView = display.view;
+    // There might have been a widget with a focused element that got
+    // hidden or updated, if so re-focus it.
+    if (focused && activeElt() != focused && focused.offsetHeight) focused.focus();
+
+    // Prevent selection and cursors from interfering with the scroll
+    // width and height.
+    removeChildren(display.cursorDiv);
+    removeChildren(display.selectionDiv);
+    display.gutters.style.height = display.sizer.style.minHeight = 0;
+
     if (different) {
-      display.lastSizeC = display.wrapper.clientHeight;
+      display.lastWrapHeight = update.wrapperHeight;
+      display.lastWrapWidth = update.wrapperWidth;
       startWorker(cm, 400);
     }
-    display.showingFrom = from; display.showingTo = to;
 
+    display.updateLineNumbers = null;
+
+    return true;
+  }
+
+  function postUpdateDisplay(cm, update) {
+    var viewport = update.viewport;
+    for (var first = true;; first = false) {
+      if (!first || !cm.options.lineWrapping || update.oldDisplayWidth == displayWidth(cm)) {
+        // Clip forced viewport to actual scrollable area.
+        if (viewport && viewport.top != null)
+          viewport = {top: Math.min(cm.doc.height + paddingVert(cm.display) - displayHeight(cm), viewport.top)};
+        // Updated line heights might result in the drawn area not
+        // actually covering the viewport. Keep looping until it does.
+        update.visible = visibleLines(cm.display, cm.doc, viewport);
+        if (update.visible.from >= cm.display.viewFrom && update.visible.to <= cm.display.viewTo)
+          break;
+      }
+      if (!updateDisplayIfNeeded(cm, update)) break;
+      updateHeightsInViewport(cm);
+      var barMeasure = measureForScrollbars(cm);
+      updateSelection(cm);
+      setDocumentHeight(cm, barMeasure);
+      updateScrollbars(cm, barMeasure);
+    }
+
+    update.signal(cm, "update", cm);
+    if (cm.display.viewFrom != cm.display.reportedViewFrom || cm.display.viewTo != cm.display.reportedViewTo) {
+      update.signal(cm, "viewportChange", cm, cm.display.viewFrom, cm.display.viewTo);
+      cm.display.reportedViewFrom = cm.display.viewFrom; cm.display.reportedViewTo = cm.display.viewTo;
+    }
+  }
+
+  function updateDisplaySimple(cm, viewport) {
+    var update = new DisplayUpdate(cm, viewport);
+    if (updateDisplayIfNeeded(cm, update)) {
+      updateHeightsInViewport(cm);
+      postUpdateDisplay(cm, update);
+      var barMeasure = measureForScrollbars(cm);
+      updateSelection(cm);
+      setDocumentHeight(cm, barMeasure);
+      updateScrollbars(cm, barMeasure);
+      update.finish();
+    }
+  }
+
+  function setDocumentHeight(cm, measure) {
+    cm.display.sizer.style.minHeight = measure.docHeight + "px";
+    var total = measure.docHeight + cm.display.barHeight;
+    cm.display.heightForcer.style.top = total + "px";
+    cm.display.gutters.style.height = Math.max(total + scrollGap(cm), measure.clientHeight) + "px";
+  }
+
+  // Read the actual heights of the rendered lines, and update their
+  // stored heights to match.
+  function updateHeightsInViewport(cm) {
+    var display = cm.display;
     var prevBottom = display.lineDiv.offsetTop;
-    for (var node = display.lineDiv.firstChild, height; node; node = node.nextSibling) if (node.lineObj) {
-      if (ie_lt8) {
-        var bot = node.offsetTop + node.offsetHeight;
+    for (var i = 0; i < display.view.length; i++) {
+      var cur = display.view[i], height;
+      if (cur.hidden) continue;
+      if (ie && ie_version < 8) {
+        var bot = cur.node.offsetTop + cur.node.offsetHeight;
         height = bot - prevBottom;
         prevBottom = bot;
       } else {
-        var box = getRect(node);
+        var box = cur.node.getBoundingClientRect();
         height = box.bottom - box.top;
       }
-      var diff = node.lineObj.height - height;
+      var diff = cur.line.height - height;
       if (height < 2) height = textHeight(display);
       if (diff > .001 || diff < -.001) {
-        updateLineHeight(node.lineObj, height);
-        var widgets = node.lineObj.widgets;
-        if (widgets) for (var i = 0; i < widgets.length; ++i)
-          widgets[i].height = widgets[i].node.offsetHeight;
+        updateLineHeight(cur.line, height);
+        updateWidgetHeight(cur.line);
+        if (cur.rest) for (var j = 0; j < cur.rest.length; j++)
+          updateWidgetHeight(cur.rest[j]);
       }
     }
-    updateViewOffset(cm);
-
-    return true;
   }
 
-  function updateViewOffset(cm) {
-    var off = cm.display.viewOffset = heightAtLine(cm, getLine(cm.doc, cm.display.showingFrom));
-    // Position the mover div to align with the current virtual scroll position
-    cm.display.mover.style.top = off + "px";
-  }
-
-  function computeIntact(intact, changes) {
-    for (var i = 0, l = changes.length || 0; i < l; ++i) {
-      var change = changes[i], intact2 = [], diff = change.diff || 0;
-      for (var j = 0, l2 = intact.length; j < l2; ++j) {
-        var range = intact[j];
-        if (change.to <= range.from && change.diff) {
-          intact2.push({from: range.from + diff, to: range.to + diff});
-        } else if (change.to <= range.from || change.from >= range.to) {
-          intact2.push(range);
-        } else {
-          if (change.from > range.from)
-            intact2.push({from: range.from, to: change.from});
-          if (change.to < range.to)
-            intact2.push({from: change.to + diff, to: range.to + diff});
-        }
-      }
-      intact = intact2;
-    }
-    return intact;
+  // Read and store the height of line widgets associated with the
+  // given line.
+  function updateWidgetHeight(line) {
+    if (line.widgets) for (var i = 0; i < line.widgets.length; ++i)
+      line.widgets[i].height = line.widgets[i].node.offsetHeight;
   }
 
+  // Do a bulk-read of the DOM positions and sizes needed to draw the
+  // view, so that we don't interleave reading and writing to the DOM.
   function getDimensions(cm) {
     var d = cm.display, left = {}, width = {};
+    var gutterLeft = d.gutters.clientLeft;
     for (var n = d.gutters.firstChild, i = 0; n; n = n.nextSibling, ++i) {
-      left[cm.options.gutters[i]] = n.offsetLeft;
-      width[cm.options.gutters[i]] = n.offsetWidth;
+      left[cm.options.gutters[i]] = n.offsetLeft + n.clientLeft + gutterLeft;
+      width[cm.options.gutters[i]] = n.clientWidth;
     }
     return {fixedPos: compensateForHScroll(d),
             gutterTotalWidth: d.gutters.offsetWidth,
@@ -582,153 +826,221 @@ window.CodeMirror = (function() {
             wrapperWidth: d.wrapper.clientWidth};
   }
 
-  function patchDisplay(cm, from, to, intact, updateNumbersFrom) {
-    var dims = getDimensions(cm);
+  // Sync the actual display DOM structure with display.view, removing
+  // nodes for lines that are no longer in view, and creating the ones
+  // that are not there yet, and updating the ones that are out of
+  // date.
+  function patchDisplay(cm, updateNumbersFrom, dims) {
     var display = cm.display, lineNumbers = cm.options.lineNumbers;
-    if (!intact.length && (!webkit || !cm.display.currentWheelTarget))
-      removeChildren(display.lineDiv);
     var container = display.lineDiv, cur = container.firstChild;
 
     function rm(node) {
       var next = node.nextSibling;
-      if (webkit && mac && cm.display.currentWheelTarget == node) {
+      // Works around a throw-scroll bug in OS X Webkit
+      if (webkit && mac && cm.display.currentWheelTarget == node)
         node.style.display = "none";
-        node.lineObj = null;
-      } else {
+      else
         node.parentNode.removeChild(node);
-      }
       return next;
     }
 
-    var nextIntact = intact.shift(), lineN = from;
-    cm.doc.iter(from, to, function(line) {
-      if (nextIntact && nextIntact.to == lineN) nextIntact = intact.shift();
-      if (lineIsHidden(cm.doc, line)) {
-        if (line.height != 0) updateLineHeight(line, 0);
-        if (line.widgets && cur.previousSibling) for (var i = 0; i < line.widgets.length; ++i) {
-          var w = line.widgets[i];
-          if (w.showIfHidden) {
-            var prev = cur.previousSibling;
-            if (/pre/i.test(prev.nodeName)) {
-              var wrap = elt("div", null, null, "position: relative");
-              prev.parentNode.replaceChild(wrap, prev);
-              wrap.appendChild(prev);
-              prev = wrap;
-            }
-            var wnode = prev.appendChild(elt("div", [w.node], "CodeMirror-linewidget"));
-            if (!w.handleMouseEvents) wnode.ignoreEvents = true;
-            positionLineWidget(w, wnode, prev, dims);
-          }
+    var view = display.view, lineN = display.viewFrom;
+    // Loop over the elements in the view, syncing cur (the DOM nodes
+    // in display.lineDiv) with the view as we go.
+    for (var i = 0; i < view.length; i++) {
+      var lineView = view[i];
+      if (lineView.hidden) {
+      } else if (!lineView.node || lineView.node.parentNode != container) { // Not drawn yet
+        var node = buildLineElement(cm, lineView, lineN, dims);
+        container.insertBefore(node, cur);
+      } else { // Already drawn
+        while (cur != lineView.node) cur = rm(cur);
+        var updateNumber = lineNumbers && updateNumbersFrom != null &&
+          updateNumbersFrom <= lineN && lineView.lineNumber;
+        if (lineView.changes) {
+          if (indexOf(lineView.changes, "gutter") > -1) updateNumber = false;
+          updateLineForChanges(cm, lineView, lineN, dims);
         }
-      } else if (nextIntact && nextIntact.from <= lineN && nextIntact.to > lineN) {
-        // This line is intact. Skip to the actual node. Update its
-        // line number if needed.
-        while (cur.lineObj != line) cur = rm(cur);
-        if (lineNumbers && updateNumbersFrom <= lineN && cur.lineNumber)
-          setTextContent(cur.lineNumber, lineNumberFor(cm.options, lineN));
-        cur = cur.nextSibling;
-      } else {
-        // For lines with widgets, make an attempt to find and reuse
-        // the existing element, so that widgets aren't needlessly
-        // removed and re-inserted into the dom
-        if (line.widgets) for (var j = 0, search = cur, reuse; search && j < 20; ++j, search = search.nextSibling)
-          if (search.lineObj == line && /div/i.test(search.nodeName)) { reuse = search; break; }
-        // This line needs to be generated.
-        var lineNode = buildLineElement(cm, line, lineN, dims, reuse);
-        if (lineNode != reuse) {
-          container.insertBefore(lineNode, cur);
-        } else {
-          while (cur != reuse) cur = rm(cur);
-          cur = cur.nextSibling;
+        if (updateNumber) {
+          removeChildren(lineView.lineNumber);
+          lineView.lineNumber.appendChild(document.createTextNode(lineNumberFor(cm.options, lineN)));
         }
-
-        lineNode.lineObj = line;
+        cur = lineView.node.nextSibling;
       }
-      ++lineN;
-    });
+      lineN += lineView.size;
+    }
     while (cur) cur = rm(cur);
   }
 
-  function buildLineElement(cm, line, lineNo, dims, reuse) {
-    var lineElement = lineContent(cm, line);
-    var markers = line.gutterMarkers, display = cm.display, wrap;
-
-    if (!cm.options.lineNumbers && !markers && !line.bgClass && !line.wrapClass && !line.widgets)
-      return lineElement;
+  // When an aspect of a line changes, a string is added to
+  // lineView.changes. This updates the relevant part of the line's
+  // DOM structure.
+  function updateLineForChanges(cm, lineView, lineN, dims) {
+    for (var j = 0; j < lineView.changes.length; j++) {
+      var type = lineView.changes[j];
+      if (type == "text") updateLineText(cm, lineView);
+      else if (type == "gutter") updateLineGutter(cm, lineView, lineN, dims);
+      else if (type == "class") updateLineClasses(lineView);
+      else if (type == "widget") updateLineWidgets(cm, lineView, dims);
+    }
+    lineView.changes = null;
+  }
 
-    // Lines with gutter elements, widgets or a background class need
-    // to be wrapped again, and have the extra elements added to the
-    // wrapper div
+  // Lines with gutter elements, widgets or a background class need to
+  // be wrapped, and have the extra elements added to the wrapper div
+  function ensureLineWrapped(lineView) {
+    if (lineView.node == lineView.text) {
+      lineView.node = elt("div", null, null, "position: relative");
+      if (lineView.text.parentNode)
+        lineView.text.parentNode.replaceChild(lineView.node, lineView.text);
+      lineView.node.appendChild(lineView.text);
+      if (ie && ie_version < 8) lineView.node.style.zIndex = 2;
+    }
+    return lineView.node;
+  }
 
-    if (reuse) {
-      reuse.alignable = null;
-      var isOk = true, widgetsSeen = 0, insertBefore = null;
-      for (var n = reuse.firstChild, next; n; n = next) {
-        next = n.nextSibling;
-        if (!/\bCodeMirror-linewidget\b/.test(n.className)) {
-          reuse.removeChild(n);
-        } else {
-          for (var i = 0; i < line.widgets.length; ++i) {
-            var widget = line.widgets[i];
-            if (widget.node == n.firstChild) {
-              if (!widget.above && !insertBefore) insertBefore = n;
-              positionLineWidget(widget, n, reuse, dims);
-              ++widgetsSeen;
-              break;
-            }
-          }
-          if (i == line.widgets.length) { isOk = false; break; }
-        }
-      }
-      reuse.insertBefore(lineElement, insertBefore);
-      if (isOk && widgetsSeen == line.widgets.length) {
-        wrap = reuse;
-        reuse.className = line.wrapClass || "";
-      }
+  function updateLineBackground(lineView) {
+    var cls = lineView.bgClass ? lineView.bgClass + " " + (lineView.line.bgClass || "") : lineView.line.bgClass;
+    if (cls) cls += " CodeMirror-linebackground";
+    if (lineView.background) {
+      if (cls) lineView.background.className = cls;
+      else { lineView.background.parentNode.removeChild(lineView.background); lineView.background = null; }
+    } else if (cls) {
+      var wrap = ensureLineWrapped(lineView);
+      lineView.background = wrap.insertBefore(elt("div", null, cls), wrap.firstChild);
     }
-    if (!wrap) {
-      wrap = elt("div", null, line.wrapClass, "position: relative");
-      wrap.appendChild(lineElement);
+  }
+
+  // Wrapper around buildLineContent which will reuse the structure
+  // in display.externalMeasured when possible.
+  function getLineContent(cm, lineView) {
+    var ext = cm.display.externalMeasured;
+    if (ext && ext.line == lineView.line) {
+      cm.display.externalMeasured = null;
+      lineView.measure = ext.measure;
+      return ext.built;
     }
-    // Kludge to make sure the styled element lies behind the selection (by z-index)
-    if (line.bgClass)
-      wrap.insertBefore(elt("div", null, line.bgClass + " CodeMirror-linebackground"), wrap.firstChild);
+    return buildLineContent(cm, lineView);
+  }
+
+  // Redraw the line's text. Interacts with the background and text
+  // classes because the mode may output tokens that influence these
+  // classes.
+  function updateLineText(cm, lineView) {
+    var cls = lineView.text.className;
+    var built = getLineContent(cm, lineView);
+    if (lineView.text == lineView.node) lineView.node = built.pre;
+    lineView.text.parentNode.replaceChild(built.pre, lineView.text);
+    lineView.text = built.pre;
+    if (built.bgClass != lineView.bgClass || built.textClass != lineView.textClass) {
+      lineView.bgClass = built.bgClass;
+      lineView.textClass = built.textClass;
+      updateLineClasses(lineView);
+    } else if (cls) {
+      lineView.text.className = cls;
+    }
+  }
+
+  function updateLineClasses(lineView) {
+    updateLineBackground(lineView);
+    if (lineView.line.wrapClass)
+      ensureLineWrapped(lineView).className = lineView.line.wrapClass;
+    else if (lineView.node != lineView.text)
+      lineView.node.className = "";
+    var textClass = lineView.textClass ? lineView.textClass + " " + (lineView.line.textClass || "") : lineView.line.textClass;
+    lineView.text.className = textClass || "";
+  }
+
+  function updateLineGutter(cm, lineView, lineN, dims) {
+    if (lineView.gutter) {
+      lineView.node.removeChild(lineView.gutter);
+      lineView.gutter = null;
+    }
+    if (lineView.gutterBackground) {
+      lineView.node.removeChild(lineView.gutterBackground);
+      lineView.gutterBackground = null;
+    }
+    if (lineView.line.gutterClass) {
+      var wrap = ensureLineWrapped(lineView);
+      lineView.gutterBackground = elt("div", null, "CodeMirror-gutter-background " + lineView.line.gutterClass,
+                                      "left: " + (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) +
+                                      "px; width: " + dims.gutterTotalWidth + "px");
+      wrap.insertBefore(lineView.gutterBackground, lineView.text);
+    }
+    var markers = lineView.line.gutterMarkers;
     if (cm.options.lineNumbers || markers) {
-      var gutterWrap = wrap.insertBefore(elt("div", null, null, "position: absolute; left: " +
-                                             (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + "px"),
-                                         wrap.firstChild);
-      if (cm.options.fixedGutter) (wrap.alignable || (wrap.alignable = [])).push(gutterWrap);
+      var wrap = ensureLineWrapped(lineView);
+      var gutterWrap = lineView.gutter = elt("div", null, "CodeMirror-gutter-wrapper", "left: " +
+                                             (cm.options.fixedGutter ? dims.fixedPos : -dims.gutterTotalWidth) + "px");
+      cm.display.input.setUneditable(gutterWrap);
+      wrap.insertBefore(gutterWrap, lineView.text);
+      if (lineView.line.gutterClass)
+        gutterWrap.className += " " + lineView.line.gutterClass;
       if (cm.options.lineNumbers && (!markers || !markers["CodeMirror-linenumbers"]))
-        wrap.lineNumber = gutterWrap.appendChild(
-          elt("div", lineNumberFor(cm.options, lineNo),
+        lineView.lineNumber = gutterWrap.appendChild(
+          elt("div", lineNumberFor(cm.options, lineN),
               "CodeMirror-linenumber CodeMirror-gutter-elt",
               "left: " + dims.gutterLeft["CodeMirror-linenumbers"] + "px; width: "
-              + display.lineNumInnerWidth + "px"));
-      if (markers)
-        for (var k = 0; k < cm.options.gutters.length; ++k) {
-          var id = cm.options.gutters[k], found = markers.hasOwnProperty(id) && markers[id];
-          if (found)
-            gutterWrap.appendChild(elt("div", [found], "CodeMirror-gutter-elt", "left: " +
-                                       dims.gutterLeft[id] + "px; width: " + dims.gutterWidth[id] + "px"));
-        }
+              + cm.display.lineNumInnerWidth + "px"));
+      if (markers) for (var k = 0; k < cm.options.gutters.length; ++k) {
+        var id = cm.options.gutters[k], found = markers.hasOwnProperty(id) && markers[id];
+        if (found)
+          gutterWrap.appendChild(elt("div", [found], "CodeMirror-gutter-elt", "left: " +
+                                     dims.gutterLeft[id] + "px; width: " + dims.gutterWidth[id] + "px"));
+      }
     }
-    if (ie_lt8) wrap.style.zIndex = 2;
-    if (line.widgets && wrap != reuse) for (var i = 0, ws = line.widgets; i < ws.length; ++i) {
+  }
+
+  function updateLineWidgets(cm, lineView, dims) {
+    if (lineView.alignable) lineView.alignable = null;
+    for (var node = lineView.node.firstChild, next; node; node = next) {
+      var next = node.nextSibling;
+      if (node.className == "CodeMirror-linewidget")
+        lineView.node.removeChild(node);
+    }
+    insertLineWidgets(cm, lineView, dims);
+  }
+
+  // Build a line's DOM representation from scratch
+  function buildLineElement(cm, lineView, lineN, dims) {
+    var built = getLineContent(cm, lineView);
+    lineView.text = lineView.node = built.pre;
+    if (built.bgClass) lineView.bgClass = built.bgClass;
+    if (built.textClass) lineView.textClass = built.textClass;
+
+    updateLineClasses(lineView);
+    updateLineGutter(cm, lineView, lineN, dims);
+    insertLineWidgets(cm, lineView, dims);
+    return lineView.node;
+  }
+
+  // A lineView may contain multiple logical lines (when merged by
+  // collapsed spans). The widgets for all of them need to be drawn.
+  function insertLineWidgets(cm, lineView, dims) {
+    insertLineWidgetsFor(cm, lineView.line, lineView, dims, true);
+    if (lineView.rest) for (var i = 0; i < lineView.rest.length; i++)
+      insertLineWidgetsFor(cm, lineView.rest[i], lineView, dims, false);
+  }
+
+  function insertLineWidgetsFor(cm, line, lineView, dims, allowAbove) {
+    if (!line.widgets) return;
+    var wrap = ensureLineWrapped(lineView);
+    for (var i = 0, ws = line.widgets; i < ws.length; ++i) {
       var widget = ws[i], node = elt("div", [widget.node], "CodeMirror-linewidget");
-      if (!widget.handleMouseEvents) node.ignoreEvents = true;
-      positionLineWidget(widget, node, wrap, dims);
-      if (widget.above)
-        wrap.insertBefore(node, cm.options.lineNumbers && line.height != 0 ? gutterWrap : lineElement);
+      if (!widget.handleMouseEvents) node.setAttribute("cm-ignore-events", "true");
+      positionLineWidget(widget, node, lineView, dims);
+      cm.display.input.setUneditable(node);
+      if (allowAbove && widget.above)
+        wrap.insertBefore(node, lineView.gutter || lineView.text);
       else
         wrap.appendChild(node);
       signalLater(widget, "redraw");
     }
-    return wrap;
   }
 
-  function positionLineWidget(widget, node, wrap, dims) {
+  function positionLineWidget(widget, node, lineView, dims) {
     if (widget.noHScroll) {
-      (wrap.alignable || (wrap.alignable = [])).push(node);
+      (lineView.alignable || (lineView.alignable = [])).push(node);
       var width = dims.wrapperWidth;
       node.style.left = dims.fixedPos + "px";
       if (!widget.coverGutter) {
@@ -744,57 +1056,1261 @@ window.CodeMirror = (function() {
     }
   }
 
+  // POSITION OBJECT
+
+  // A Pos instance represents a position within the text.
+  var Pos = CodeMirror.Pos = function(line, ch) {
+    if (!(this instanceof Pos)) return new Pos(line, ch);
+    this.line = line; this.ch = ch;
+  };
+
+  // Compare two positions, return 0 if they are the same, a negative
+  // number when a is less, and a positive number otherwise.
+  var cmp = CodeMirror.cmpPos = function(a, b) { return a.line - b.line || a.ch - b.ch; };
+
+  function copyPos(x) {return Pos(x.line, x.ch);}
+  function maxPos(a, b) { return cmp(a, b) < 0 ? b : a; }
+  function minPos(a, b) { return cmp(a, b) < 0 ? a : b; }
+
+  // INPUT HANDLING
+
+  function ensureFocus(cm) {
+    if (!cm.state.focused) { cm.display.input.focus(); onFocus(cm); }
+  }
+
+  function isReadOnly(cm) {
+    return cm.options.readOnly || cm.doc.cantEdit;
+  }
+
+  // This will be set to an array of strings when copying, so that,
+  // when pasting, we know what kind of selections the copied text
+  // was made out of.
+  var lastCopied = null;
+
+  function applyTextInput(cm, inserted, deleted, sel, origin) {
+    var doc = cm.doc;
+    cm.display.shift = false;
+    if (!sel) sel = doc.sel;
+
+    var paste = cm.state.pasteIncoming || origin == "paste";
+    var textLines = doc.splitLines(inserted), multiPaste = null;
+    // When pasing N lines into N selections, insert one line per selection
+    if (paste && sel.ranges.length > 1) {
+      if (lastCopied && lastCopied.join("\n") == inserted) {
+        if (sel.ranges.length % lastCopied.length == 0) {
+          multiPaste = [];
+          for (var i = 0; i < lastCopied.length; i++)
+            multiPaste.push(doc.splitLines(lastCopied[i]));
+        }
+      } else if (textLines.length == sel.ranges.length) {
+        multiPaste = map(textLines, function(l) { return [l]; });
+      }
+    }
+
+    // Normal behavior is to insert the new text into every selection
+    for (var i = sel.ranges.length - 1; i >= 0; i--) {
+      var range = sel.ranges[i];
+      var from = range.from(), to = range.to();
+      if (range.empty()) {
+        if (deleted && deleted > 0) // Handle deletion
+          from = Pos(from.line, from.ch - deleted);
+        else if (cm.state.overwrite && !paste) // Handle overwrite
+          to = Pos(to.line, Math.min(getLine(doc, to.line).text.length, to.ch + lst(textLines).length));
+      }
+      var updateInput = cm.curOp.updateInput;
+      var changeEvent = {from: from, to: to, text: multiPaste ? multiPaste[i % multiPaste.length] : textLines,
+                         origin: origin || (paste ? "paste" : cm.state.cutIncoming ? "cut" : "+input")};
+      makeChange(cm.doc, changeEvent);
+      signalLater(cm, "inputRead", cm, changeEvent);
+    }
+    if (inserted && !paste)
+      triggerElectric(cm, inserted);
+
+    ensureCursorVisible(cm);
+    cm.curOp.updateInput = updateInput;
+    cm.curOp.typing = true;
+    cm.state.pasteIncoming = cm.state.cutIncoming = false;
+  }
+
+  function handlePaste(e, cm) {
+    var pasted = e.clipboardData && e.clipboardData.getData("text/plain");
+    if (pasted) {
+      e.preventDefault();
+      if (!isReadOnly(cm) && !cm.options.disableInput)
+        runInOp(cm, function() { applyTextInput(cm, pasted, 0, null, "paste"); });
+      return true;
+    }
+  }
+
+  function triggerElectric(cm, inserted) {
+    // When an 'electric' character is inserted, immediately trigger a reindent
+    if (!cm.options.electricChars || !cm.options.smartIndent) return;
+    var sel = cm.doc.sel;
+
+    for (var i = sel.ranges.length - 1; i >= 0; i--) {
+      var range = sel.ranges[i];
+      if (range.head.ch > 100 || (i && sel.ranges[i - 1].head.line == range.head.line)) continue;
+      var mode = cm.getModeAt(range.head);
+      var indented = false;
+      if (mode.electricChars) {
+        for (var j = 0; j < mode.electricChars.length; j++)
+          if (inserted.indexOf(mode.electricChars.charAt(j)) > -1) {
+            indented = indentLine(cm, range.head.line, "smart");
+            break;
+          }
+      } else if (mode.electricInput) {
+        if (mode.electricInput.test(getLine(cm.doc, range.head.line).text.slice(0, range.head.ch)))
+          indented = indentLine(cm, range.head.line, "smart");
+      }
+      if (indented) signalLater(cm, "electricInput", cm, range.head.line);
+    }
+  }
+
+  function copyableRanges(cm) {
+    var text = [], ranges = [];
+    for (var i = 0; i < cm.doc.sel.ranges.length; i++) {
+      var line = cm.doc.sel.ranges[i].head.line;
+      var lineRange = {anchor: Pos(line, 0), head: Pos(line + 1, 0)};
+      ranges.push(lineRange);
+      text.push(cm.getRange(lineRange.anchor, lineRange.head));
+    }
+    return {text: text, ranges: ranges};
+  }
+
+  function disableBrowserMagic(field) {
+    field.setAttribute("autocorrect", "off");
+    field.setAttribute("autocapitalize", "off");
+    field.setAttribute("spellcheck", "false");
+  }
+
+  // TEXTAREA INPUT STYLE
+
+  function TextareaInput(cm) {
+    this.cm = cm;
+    // See input.poll and input.reset
+    this.prevInput = "";
+
+    // Flag that indicates whether we expect input to appear real soon
+    // now (after some event like 'keypress' or 'input') and are
+    // polling intensively.
+    this.pollingFast = false;
+    // Self-resetting timeout for the poller
+    this.polling = new Delayed();
+    // Tracks when input.reset has punted to just putting a short
+    // string into the textarea instead of the full selection.
+    this.inaccurateSelection = false;
+    // Used to work around IE issue with selection being forgotten when focus moves away from textarea
+    this.hasSelection = false;
+    this.composing = null;
+  };
+
+  function hiddenTextarea() {
+    var te = elt("textarea", null, null, "position: absolute; padding: 0; width: 1px; height: 1em; outline: none");
+    var div = elt("div", [te], null, "overflow: hidden; position: relative; width: 3px; height: 0px;");
+    // The textarea is kept positioned near the cursor to prevent the
+    // fact that it'll be scrolled into view on input from scrolling
+    // our fake cursor out of view. On webkit, when wrap=off, paste is
+    // very slow. So make the area wide instead.
+    if (webkit) te.style.width = "1000px";
+    else te.setAttribute("wrap", "off");
+    // If border: 0; -- iOS fails to open keyboard (issue #1287)
+    if (ios) te.style.border = "1px solid black";
+    disableBrowserMagic(te);
+    return div;
+  }
+
+  TextareaInput.prototype = copyObj({
+    init: function(display) {
+      var input = this, cm = this.cm;
+
+      // Wraps and hides input textarea
+      var div = this.wrapper = hiddenTextarea();
+      // The semihidden textarea that is focused when the editor is
+      // focused, and receives input.
+      var te = this.textarea = div.firstChild;
+      display.wrapper.insertBefore(div, display.wrapper.firstChild);
+
+      // Needed to hide big blue blinking cursor on Mobile Safari (doesn't seem to work in iOS 8 anymore)
+      if (ios) te.style.width = "0px";
+
+      on(te, "input", function() {
+        if (ie && ie_version >= 9 && input.hasSelection) input.hasSelection = null;
+        input.poll();
+      });
+
+      on(te, "paste", function(e) {
+        if (handlePaste(e, cm)) return true;
+
+        cm.state.pasteIncoming = true;
+        input.fastPoll();
+      });
+
+      function prepareCopyCut(e) {
+        if (cm.somethingSelected()) {
+          lastCopied = cm.getSelections();
+          if (input.inaccurateSelection) {
+            input.prevInput = "";
+            input.inaccurateSelection = false;
+            te.value = lastCopied.join("\n");
+            selectInput(te);
+          }
+        } else if (!cm.options.lineWiseCopyCut) {
+          return;
+        } else {
+          var ranges = copyableRanges(cm);
+          lastCopied = ranges.text;
+          if (e.type == "cut") {
+            cm.setSelections(ranges.ranges, null, sel_dontScroll);
+          } else {
+            input.prevInput = "";
+            te.value = ranges.text.join("\n");
+            selectInput(te);
+          }
+        }
+        if (e.type == "cut") cm.state.cutIncoming = true;
+      }
+      on(te, "cut", prepareCopyCut);
+      on(te, "copy", prepareCopyCut);
+
+      on(display.scroller, "paste", function(e) {
+        if (eventInWidget(display, e)) return;
+        cm.state.pasteIncoming = true;
+        input.focus();
+      });
+
+      // Prevent normal selection in the editor (we handle our own)
+      on(display.lineSpace, "selectstart", function(e) {
+        if (!eventInWidget(display, e)) e_preventDefault(e);
+      });
+
+      on(te, "compositionstart", function() {
+        var start = cm.getCursor("from");
+        input.composing = {
+          start: start,
+          range: cm.markText(start, cm.getCursor("to"), {className: "CodeMirror-composing"})
+        };
+      });
+      on(te, "compositionend", function() {
+        if (input.composing) {
+          input.poll();
+          input.composing.range.clear();
+          input.composing = null;
+        }
+      });
+    },
+
+    prepareSelection: function() {
+      // Redraw the selection and/or cursor
+      var cm = this.cm, display = cm.display, doc = cm.doc;
+      var result = prepareSelection(cm);
+
+      // Move the hidden textarea near the cursor to prevent scrolling artifacts
+      if (cm.options.moveInputWithCursor) {
+        var headPos = cursorCoords(cm, doc.sel.primary().head, "div");
+        var wrapOff = display.wrapper.getBoundingClientRect(), lineOff = display.lineDiv.getBoundingClientRect();
+        result.teTop = Math.max(0, Math.min(display.wrapper.clientHeight - 10,
+                                            headPos.top + lineOff.top - wrapOff.top));
+        result.teLeft = Math.max(0, Math.min(display.wrapper.clientWidth - 10,
+                                             headPos.left + lineOff.left - wrapOff.left));
+      }
+
+      return result;
+    },
+
+    showSelection: function(drawn) {
+      var cm = this.cm, display = cm.display;
+      removeChildrenAndAdd(display.cursorDiv, drawn.cursors);
+      removeChildrenAndAdd(display.selectionDiv, drawn.selection);
+      if (drawn.teTop != null) {
+        this.wrapper.style.top = drawn.teTop + "px";
+        this.wrapper.style.left = drawn.teLeft + "px";
+      }
+    },
+
+    // Reset the input to correspond to the selection (or to be empty,
+    // when not typing and nothing is selected)
+    reset: function(typing) {
+      if (this.contextMenuPending) return;
+      var minimal, selected, cm = this.cm, doc = cm.doc;
+      if (cm.somethingSelected()) {
+        this.prevInput = "";
+        var range = doc.sel.primary();
+        minimal = hasCopyEvent &&
+          (range.to().line - range.from().line > 100 || (selected = cm.getSelection()).length > 1000);
+        var content = minimal ? "-" : selected || cm.getSelection();
+        this.textarea.value = content;
+        if (cm.state.focused) selectInput(this.textarea);
+        if (ie && ie_version >= 9) this.hasSelection = content;
+      } else if (!typing) {
+        this.prevInput = this.textarea.value = "";
+        if (ie && ie_version >= 9) this.hasSelection = null;
+      }
+      this.inaccurateSelection = minimal;
+    },
+
+    getField: function() { return this.textarea; },
+
+    supportsTouch: function() { return false; },
+
+    focus: function() {
+      if (this.cm.options.readOnly != "nocursor" && (!mobile || activeElt() != this.textarea)) {
+        try { this.textarea.focus(); }
+        catch (e) {} // IE8 will throw if the textarea is display: none or not in DOM
+      }
+    },
+
+    blur: function() { this.textarea.blur(); },
+
+    resetPosition: function() {
+      this.wrapper.style.top = this.wrapper.style.left = 0;
+    },
+
+    receivedFocus: function() { this.slowPoll(); },
+
+    // Poll for input changes, using the normal rate of polling. This
+    // runs as long as the editor is focused.
+    slowPoll: function() {
+      var input = this;
+      if (input.pollingFast) return;
+      input.polling.set(this.cm.options.pollInterval, function() {
+        input.poll();
+        if (input.cm.state.focused) input.slowPoll();
+      });
+    },
+
+    // When an event has just come in that is likely to add or change
+    // something in the input textarea, we poll faster, to ensure that
+    // the change appears on the screen quickly.
+    fastPoll: function() {
+      var missed = false, input = this;
+      input.pollingFast = true;
+      function p() {
+        var changed = input.poll();
+        if (!changed && !missed) {missed = true; input.polling.set(60, p);}
+        else {input.pollingFast = false; input.slowPoll();}
+      }
+      input.polling.set(20, p);
+    },
+
+    // Read input from the textarea, and update the document to match.
+    // When something is selected, it is present in the textarea, and
+    // selected (unless it is huge, in which case a placeholder is
+    // used). When nothing is selected, the cursor sits after previously
+    // seen text (can be empty), which is stored in prevInput (we must
+    // not reset the textarea when typing, because that breaks IME).
+    poll: function() {
+      var cm = this.cm, input = this.textarea, prevInput = this.prevInput;
+      // Since this is called a *lot*, try to bail out as cheaply as
+      // possible when it is clear that nothing happened. hasSelection
+      // will be the case when there is a lot of text in the textarea,
+      // in which case reading its value would be expensive.
+      if (this.contextMenuPending || !cm.state.focused ||
+          (hasSelection(input) && !prevInput && !this.composing) ||
+          isReadOnly(cm) || cm.options.disableInput || cm.state.keySeq)
+        return false;
+
+      var text = input.value;
+      // If nothing changed, bail.
+      if (text == prevInput && !cm.somethingSelected()) return false;
+      // Work around nonsensical selection resetting in IE9/10, and
+      // inexplicable appearance of private area unicode characters on
+      // some key combos in Mac (#2689).
+      if (ie && ie_version >= 9 && this.hasSelection === text ||
+          mac && /[\uf700-\uf7ff]/.test(text)) {
+        cm.display.input.reset();
+        return false;
+      }
+
+      if (cm.doc.sel == cm.display.selForContextMenu) {
+        var first = text.charCodeAt(0);
+        if (first == 0x200b && !prevInput) prevInput = "\u200b";
+        if (first == 0x21da) { this.reset(); return this.cm.execCommand("undo"); }
+      }
+      // Find the part of the input that is actually new
+      var same = 0, l = Math.min(prevInput.length, text.length);
+      while (same < l && prevInput.charCodeAt(same) == text.charCodeAt(same)) ++same;
+
+      var self = this;
+      runInOp(cm, function() {
+        applyTextInput(cm, text.slice(same), prevInput.length - same,
+                       null, self.composing ? "*compose" : null);
+
+        // Don't leave long text in the textarea, since it makes further polling slow
+        if (text.length > 1000 || text.indexOf("\n") > -1) input.value = self.prevInput = "";
+        else self.prevInput = text;
+
+        if (self.composing) {
+          self.composing.range.clear();
+          self.composing.range = cm.markText(self.composing.start, cm.getCursor("to"),
+                                             {className: "CodeMirror-composing"});
+        }
+      });
+      return true;
+    },
+
+    ensurePolled: function() {
+      if (this.pollingFast && this.poll()) this.pollingFast = false;
+    },
+
+    onKeyPress: function() {
+      if (ie && ie_version >= 9) this.hasSelection = null;
+      this.fastPoll();
+    },
+
+    onContextMenu: function(e) {
+      var input = this, cm = input.cm, display = cm.display, te = input.textarea;
+      var pos = posFromMouse(cm, e), scrollPos = display.scroller.scrollTop;
+      if (!pos || presto) return; // Opera is difficult.
+
+      // Reset the current text selection only if the click is done outside of the selection
+      // and 'resetSelectionOnContextMenu' option is true.
+      var reset = cm.options.resetSelectionOnContextMenu;
+      if (reset && cm.doc.sel.contains(pos) == -1)
+        operation(cm, setSelection)(cm.doc, simpleSelection(pos), sel_dontScroll);
+
+      var oldCSS = te.style.cssText;
+      input.wrapper.style.position = "absolute";
+      te.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.clientY - 5) +
+        "px; left: " + (e.clientX - 5) + "px; z-index: 1000; background: " +
+        (ie ? "rgba(255, 255, 255, .05)" : "transparent") +
+        "; outline: none; border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);";
+      if (webkit) var oldScrollY = window.scrollY; // Work around Chrome issue (#2712)
+      display.input.focus();
+      if (webkit) window.scrollTo(null, oldScrollY);
+      display.input.reset();
+      // Adds "Select all" to context menu in FF
+      if (!cm.somethingSelected()) te.value = input.prevInput = " ";
+      input.contextMenuPending = true;
+      display.selForContextMenu = cm.doc.sel;
+      clearTimeout(display.detectingSelectAll);
+
+      // Select-all will be greyed out if there's nothing to select, so
+      // this adds a zero-width space so that we can later check whether
+      // it got selected.
+      function prepareSelectAllHack() {
+        if (te.selectionStart != null) {
+          var selected = cm.somethingSelected();
+          var extval = "\u200b" + (selected ? te.value : "");
+          te.value = "\u21da"; // Used to catch context-menu undo
+          te.value = extval;
+          input.prevInput = selected ? "" : "\u200b";
+          te.selectionStart = 1; te.selectionEnd = extval.length;
+          // Re-set this, in case some other handler touched the
+          // selection in the meantime.
+          display.selForContextMenu = cm.doc.sel;
+        }
+      }
+      function rehide() {
+        input.contextMenuPending = false;
+        input.wrapper.style.position = "relative";
+        te.style.cssText = oldCSS;
+        if (ie && ie_version < 9) display.scrollbars.setScrollTop(display.scroller.scrollTop = scrollPos);
+
+        // Try to detect the user choosing select-all
+        if (te.selectionStart != null) {
+          if (!ie || (ie && ie_version < 9)) prepareSelectAllHack();
+          var i = 0, poll = function() {
+            if (display.selForContextMenu == cm.doc.sel && te.selectionStart == 0 &&
+                te.selectionEnd > 0 && input.prevInput == "\u200b")
+              operation(cm, commands.selectAll)(cm);
+            else if (i++ < 10) display.detectingSelectAll = setTimeout(poll, 500);
+            else display.input.reset();
+          };
+          display.detectingSelectAll = setTimeout(poll, 200);
+        }
+      }
+
+      if (ie && ie_version >= 9) prepareSelectAllHack();
+      if (captureRightClick) {
+        e_stop(e);
+        var mouseup = function() {
+          off(window, "mouseup", mouseup);
+          setTimeout(rehide, 20);
+        };
+        on(window, "mouseup", mouseup);
+      } else {
+        setTimeout(rehide, 50);
+      }
+    },
+
+    setUneditable: nothing,
+
+    needsContentAttribute: false
+  }, TextareaInput.prototype);
+
+  // CONTENTEDITABLE INPUT STYLE
+
+  function ContentEditableInput(cm) {
+    this.cm = cm;
+    this.lastAnchorNode = this.lastAnchorOffset = this.lastFocusNode = this.lastFocusOffset = null;
+    this.polling = new Delayed();
+    this.gracePeriod = false;
+  }
+
+  ContentEditableInput.prototype = copyObj({
+    init: function(display) {
+      var input = this, cm = input.cm;
+      var div = input.div = display.lineDiv;
+      div.contentEditable = "true";
+      disableBrowserMagic(div);
+
+      on(div, "paste", function(e) { handlePaste(e, cm); })
+
+      on(div, "compositionstart", function(e) {
+        var data = e.data;
+        input.composing = {sel: cm.doc.sel, data: data, startData: data};
+        if (!data) return;
+        var prim = cm.doc.sel.primary();
+        var line = cm.getLine(prim.head.line);
+        var found = line.indexOf(data, Math.max(0, prim.head.ch - data.length));
+        if (found > -1 && found <= prim.head.ch)
+          input.composing.sel = simpleSelection(Pos(prim.head.line, found),
+                                                Pos(prim.head.line, found + data.length));
+      });
+      on(div, "compositionupdate", function(e) {
+        input.composing.data = e.data;
+      });
+      on(div, "compositionend", function(e) {
+        var ours = input.composing;
+        if (!ours) return;
+        if (e.data != ours.startData && !/\u200b/.test(e.data))
+          ours.data = e.data;
+        // Need a small delay to prevent other code (input event,
+        // selection polling) from doing damage when fired right after
+        // compositionend.
+        setTimeout(function() {
+          if (!ours.handled)
+            input.applyComposition(ours);
+          if (input.composing == ours)
+            input.composing = null;
+        }, 50);
+      });
+
+      on(div, "touchstart", function() {
+        input.forceCompositionEnd();
+      });
+
+      on(div, "input", function() {
+        if (input.composing) return;
+        if (!input.pollContent())
+          runInOp(input.cm, function() {regChange(cm);});
+      });
+
+      function onCopyCut(e) {
+        if (cm.somethingSelected()) {
+          lastCopied = cm.getSelections();
+          if (e.type == "cut") cm.replaceSelection("", null, "cut");
+        } else if (!cm.options.lineWiseCopyCut) {
+          return;
+        } else {
+          var ranges = copyableRanges(cm);
+          lastCopied = ranges.text;
+          if (e.type == "cut") {
+            cm.operation(function() {
+              cm.setSelections(ranges.ranges, 0, sel_dontScroll);
+              cm.replaceSelection("", null, "cut");
+            });
+          }
+        }
+        // iOS exposes the clipboard API, but seems to discard content inserted into it
+        if (e.clipboardData && !ios) {
+          e.preventDefault();
+          e.clipboardData.clearData();
+          e.clipboardData.setData("text/plain", lastCopied.join("\n"));
+        } else {
+          // Old-fashioned briefly-focus-a-textarea hack
+          var kludge = hiddenTextarea(), te = kludge.firstChild;
+          cm.display.lineSpace.insertBefore(kludge, cm.display.lineSpace.firstChild);
+          te.value = lastCopied.join("\n");
+          var hadFocus = document.activeElement;
+          selectInput(te);
+          setTimeout(function() {
+            cm.display.lineSpace.removeChild(kludge);
+            hadFocus.focus();
+          }, 50);
+        }
+      }
+      on(div, "copy", onCopyCut);
+      on(div, "cut", onCopyCut);
+    },
+
+    prepareSelection: function() {
+      var result = prepareSelection(this.cm, false);
+      result.focus = this.cm.state.focused;
+      return result;
+    },
+
+    showSelection: function(info) {
+      if (!info || !this.cm.display.view.length) return;
+      if (info.focus) this.showPrimarySelection();
+      this.showMultipleSelections(info);
+    },
+
+    showPrimarySelection: function() {
+      var sel = window.getSelection(), prim = this.cm.doc.sel.primary();
+      var curAnchor = domToPos(this.cm, sel.anchorNode, sel.anchorOffset);
+      var curFocus = domToPos(this.cm, sel.focusNode, sel.focusOffset);
+      if (curAnchor && !curAnchor.bad && curFocus && !curFocus.bad &&
+          cmp(minPos(curAnchor, curFocus), prim.from()) == 0 &&
+          cmp(maxPos(curAnchor, curFocus), prim.to()) == 0)
+        return;
+
+      var start = posToDOM(this.cm, prim.from());
+      var end = posToDOM(this.cm, prim.to());
+      if (!start && !end) return;
+
+      var view = this.cm.display.view;
+      var old = sel.rangeCount && sel.getRangeAt(0);
+      if (!start) {
+        start = {node: view[0].measure.map[2], offset: 0};
+      } else if (!end) { // FIXME dangerously hacky
+        var measure = view[view.length - 1].measure;
+        var map = measure.maps ? measure.maps[measure.maps.length - 1] : measure.map;
+        end = {node: map[map.length - 1], offset: map[map.length - 2] - map[map.length - 3]};
+      }
+
+      try { var rng = range(start.node, start.offset, end.offset, end.node); }
+      catch(e) {} // Our model of the DOM might be outdated, in which case the range we try to set can be impossible
+      if (rng) {
+        sel.removeAllRanges();
+        sel.addRange(rng);
+        if (old && sel.anchorNode == null) sel.addRange(old);
+        else if (gecko) this.startGracePeriod();
+      }
+      this.rememberSelection();
+    },
+
+    startGracePeriod: function() {
+      var input = this;
+      clearTimeout(this.gracePeriod);
+      this.gracePeriod = setTimeout(function() {
+        input.gracePeriod = false;
+        if (input.selectionChanged())
+          input.cm.operation(function() { input.cm.curOp.selectionChanged = true; });
+      }, 20);
+    },
+
+    showMultipleSelections: function(info) {
+      removeChildrenAndAdd(this.cm.display.cursorDiv, info.cursors);
+      removeChildrenAndAdd(this.cm.display.selectionDiv, info.selection);
+    },
+
+    rememberSelection: function() {
+      var sel = window.getSelection();
+      this.lastAnchorNode = sel.anchorNode; this.lastAnchorOffset = sel.anchorOffset;
+      this.lastFocusNode = sel.focusNode; this.lastFocusOffset = sel.focusOffset;
+    },
+
+    selectionInEditor: function() {
+      var sel = window.getSelection();
+      if (!sel.rangeCount) return false;
+      var node = sel.getRangeAt(0).commonAncestorContainer;
+      return contains(this.div, node);
+    },
+
+    focus: function() {
+      if (this.cm.options.readOnly != "nocursor") this.div.focus();
+    },
+    blur: function() { this.div.blur(); },
+    getField: function() { return this.div; },
+
+    supportsTouch: function() { return true; },
+
+    receivedFocus: function() {
+      var input = this;
+      if (this.selectionInEditor())
+        this.pollSelection();
+      else
+        runInOp(this.cm, function() { input.cm.curOp.selectionChanged = true; });
+
+      function poll() {
+        if (input.cm.state.focused) {
+          input.pollSelection();
+          input.polling.set(input.cm.options.pollInterval, poll);
+        }
+      }
+      this.polling.set(this.cm.options.pollInterval, poll);
+    },
+
+    selectionChanged: function() {
+      var sel = window.getSelection();
+      return sel.anchorNode != this.lastAnchorNode || sel.anchorOffset != this.lastAnchorOffset ||
+        sel.focusNode != this.lastFocusNode || sel.focusOffset != this.lastFocusOffset;
+    },
+
+    pollSelection: function() {
+      if (!this.composing && !this.gracePeriod && this.selectionChanged()) {
+        var sel = window.getSelection(), cm = this.cm;
+        this.rememberSelection();
+        var anchor = domToPos(cm, sel.anchorNode, sel.anchorOffset);
+        var head = domToPos(cm, sel.focusNode, sel.focusOffset);
+        if (anchor && head) runInOp(cm, function() {
+          setSelection(cm.doc, simpleSelection(anchor, head), sel_dontScroll);
+          if (anchor.bad || head.bad) cm.curOp.selectionChanged = true;
+        });
+      }
+    },
+
+    pollContent: function() {
+      var cm = this.cm, display = cm.display, sel = cm.doc.sel.primary();
+      var from = sel.from(), to = sel.to();
+      if (from.line < display.viewFrom || to.line > display.viewTo - 1) return false;
+
+      var fromIndex;
+      if (from.line == display.viewFrom || (fromIndex = findViewIndex(cm, from.line)) == 0) {
+        var fromLine = lineNo(display.view[0].line);
+        var fromNode = display.view[0].node;
+      } else {
+        var fromLine = lineNo(display.view[fromIndex].line);
+        var fromNode = display.view[fromIndex - 1].node.nextSibling;
+      }
+      var toIndex = findViewIndex(cm, to.line);
+      if (toIndex == display.view.length - 1) {
+        var toLine = display.viewTo - 1;
+        var toNode = display.lineDiv.lastChild;
+      } else {
+        var toLine = lineNo(display.view[toIndex + 1].line) - 1;
+        var toNode = display.view[toIndex + 1].node.previousSibling;
+      }
+
+      var newText = cm.doc.splitLines(domTextBetween(cm, fromNode, toNode, fromLine, toLine));
+      var oldText = getBetween(cm.doc, Pos(fromLine, 0), Pos(toLine, getLine(cm.doc, toLine).text.length));
+      while (newText.length > 1 && oldText.length > 1) {
+        if (lst(newText) == lst(oldText)) { newText.pop(); oldText.pop(); toLine--; }
+        else if (newText[0] == oldText[0]) { newText.shift(); oldText.shift(); fromLine++; }
+        else break;
+      }
+
+      var cutFront = 0, cutEnd = 0;
+      var newTop = newText[0], oldTop = oldText[0], maxCutFront = Math.min(newTop.length, oldTop.length);
+      while (cutFront < maxCutFront && newTop.charCodeAt(cutFront) == oldTop.charCodeAt(cutFront))
+        ++cutFront;
+      var newBot = lst(newText), oldBot = lst(oldText);
+      var maxCutEnd = Math.min(newBot.length - (newText.length == 1 ? cutFront : 0),
+                               oldBot.length - (oldText.length == 1 ? cutFront : 0));
+      while (cutEnd < maxCutEnd &&
+             newBot.charCodeAt(newBot.length - cutEnd - 1) == oldBot.charCodeAt(oldBot.length - cutEnd - 1))
+        ++cutEnd;
+
+      newText[newText.length - 1] = newBot.slice(0, newBot.length - cutEnd);
+      newText[0] = newText[0].slice(cutFront);
+
+      var chFrom = Pos(fromLine, cutFront);
+      var chTo = Pos(toLine, oldText.length ? lst(oldText).length - cutEnd : 0);
+      if (newText.length > 1 || newText[0] || cmp(chFrom, chTo)) {
+        replaceRange(cm.doc, newText, chFrom, chTo, "+input");
+        return true;
+      }
+    },
+
+    ensurePolled: function() {
+      this.forceCompositionEnd();
+    },
+    reset: function() {
+      this.forceCompositionEnd();
+    },
+    forceCompositionEnd: function() {
+      if (!this.composing || this.composing.handled) return;
+      this.applyComposition(this.composing);
+      this.composing.handled = true;
+      this.div.blur();
+      this.div.focus();
+    },
+    applyComposition: function(composing) {
+      if (composing.data && composing.data != composing.startData)
+        operation(this.cm, applyTextInput)(this.cm, composing.data, 0, composing.sel);
+    },
+
+    setUneditable: function(node) {
+      node.setAttribute("contenteditable", "false");
+    },
+
+    onKeyPress: function(e) {
+      e.preventDefault();
+      operation(this.cm, applyTextInput)(this.cm, String.fromCharCode(e.charCode == null ? e.keyCode : e.charCode), 0);
+    },
+
+    onContextMenu: nothing,
+    resetPosition: nothing,
+
+    needsContentAttribute: true
+  }, ContentEditableInput.prototype);
+
+  function posToDOM(cm, pos) {
+    var view = findViewForLine(cm, pos.line);
+    if (!view || view.hidden) return null;
+    var line = getLine(cm.doc, pos.line);
+    var info = mapFromLineView(view, line, pos.line);
+
+    var order = getOrder(line), side = "left";
+    if (order) {
+      var partPos = getBidiPartAt(order, pos.ch);
+      side = partPos % 2 ? "right" : "left";
+    }
+    var result = nodeAndOffsetInLineMap(info.map, pos.ch, side);
+    result.offset = result.collapse == "right" ? result.end : result.start;
+    return result;
+  }
+
+  function badPos(pos, bad) { if (bad) pos.bad = true; return pos; }
+
+  function domToPos(cm, node, offset) {
+    var lineNode;
+    if (node == cm.display.lineDiv) {
+      lineNode = cm.display.lineDiv.childNodes[offset];
+      if (!lineNode) return badPos(cm.clipPos(Pos(cm.display.viewTo - 1)), true);
+      node = null; offset = 0;
+    } else {
+      for (lineNode = node;; lineNode = lineNode.parentNode) {
+        if (!lineNode || lineNode == cm.display.lineDiv) return null;
+        if (lineNode.parentNode && lineNode.parentNode == cm.display.lineDiv) break;
+      }
+    }
+    for (var i = 0; i < cm.display.view.length; i++) {
+      var lineView = cm.display.view[i];
+      if (lineView.node == lineNode)
+        return locateNodeInLineView(lineView, node, offset);
+    }
+  }
+
+  function locateNodeInLineView(lineView, node, offset) {
+    var wrapper = lineView.text.firstChild, bad = false;
+    if (!node || !contains(wrapper, node)) return badPos(Pos(lineNo(lineView.line), 0), true);
+    if (node == wrapper) {
+      bad = true;
+      node = wrapper.childNodes[offset];
+      offset = 0;
+      if (!node) {
+        var line = lineView.rest ? lst(lineView.rest) : lineView.line;
+        return badPos(Pos(lineNo(line), line.text.length), bad);
+      }
+    }
+
+    var textNode = node.nodeType == 3 ? node : null, topNode = node;
+    if (!textNode && node.childNodes.length == 1 && node.firstChild.nodeType == 3) {
+      textNode = node.firstChild;
+      if (offset) offset = textNode.nodeValue.length;
+    }
+    while (topNode.parentNode != wrapper) topNode = topNode.parentNode;
+    var measure = lineView.measure, maps = measure.maps;
+
+    function find(textNode, topNode, offset) {
+      for (var i = -1; i < (maps ? maps.length : 0); i++) {
+        var map = i < 0 ? measure.map : maps[i];
+        for (var j = 0; j < map.length; j += 3) {
+          var curNode = map[j + 2];
+          if (curNode == textNode || curNode == topNode) {
+            var line = lineNo(i < 0 ? lineView.line : lineView.rest[i]);
+            var ch = map[j] + offset;
+            if (offset < 0 || curNode != textNode) ch = map[j + (offset ? 1 : 0)];
+            return Pos(line, ch);
+          }
+        }
+      }
+    }
+    var found = find(textNode, topNode, offset);
+    if (found) return badPos(found, bad);
+
+    // FIXME this is all really shaky. might handle the few cases it needs to handle, but likely to cause problems
+    for (var after = topNode.nextSibling, dist = textNode ? textNode.nodeValue.length - offset : 0; after; after = after.nextSibling) {
+      found = find(after, after.firstChild, 0);
+      if (found)
+        return badPos(Pos(found.line, found.ch - dist), bad);
+      else
+        dist += after.textContent.length;
+    }
+    for (var before = topNode.previousSibling, dist = offset; before; before = before.previousSibling) {
+      found = find(before, before.firstChild, -1);
+      if (found)
+        return badPos(Pos(found.line, found.ch + dist), bad);
+      else
+        dist += after.textContent.length;
+    }
+  }
+
+  function domTextBetween(cm, from, to, fromLine, toLine) {
+    var text = "", closing = false, lineSep = cm.doc.lineSeparator();
+    function recognizeMarker(id) { return function(marker) { return marker.id == id; }; }
+    function walk(node) {
+      if (node.nodeType == 1) {
+        var cmText = node.getAttribute("cm-text");
+        if (cmText != null) {
+          if (cmText == "") cmText = node.textContent.replace(/\u200b/g, "");
+          text += cmText;
+          return;
+        }
+        var markerID = node.getAttribute("cm-marker"), range;
+        if (markerID) {
+          var found = cm.findMarks(Pos(fromLine, 0), Pos(toLine + 1, 0), recognizeMarker(+markerID));
+          if (found.length && (range = found[0].find()))
+            text += getBetween(cm.doc, range.from, range.to).join(lineSep);
+          return;
+        }
+        if (node.getAttribute("contenteditable") == "false") return;
+        for (var i = 0; i < node.childNodes.length; i++)
+          walk(node.childNodes[i]);
+        if (/^(pre|div|p)$/i.test(node.nodeName))
+          closing = true;
+      } else if (node.nodeType == 3) {
+        var val = node.nodeValue;
+        if (!val) return;
+        if (closing) {
+          text += lineSep;
+          closing = false;
+        }
+        text += val;
+      }
+    }
+    for (;;) {
+      walk(from);
+      if (from == to) break;
+      from = from.nextSibling;
+    }
+    return text;
+  }
+
+  CodeMirror.inputStyles = {"textarea": TextareaInput, "contenteditable": ContentEditableInput};
+
   // SELECTION / CURSOR
 
+  // Selection objects are immutable. A new one is created every time
+  // the selection changes. A selection is one or more non-overlapping
+  // (and non-touching) ranges, sorted, and an integer that indicates
+  // which one is the primary selection (the one that's scrolled into
+  // view, that getCursor returns, etc).
+  function Selection(ranges, primIndex) {
+    this.ranges = ranges;
+    this.primIndex = primIndex;
+  }
+
+  Selection.prototype = {
+    primary: function() { return this.ranges[this.primIndex]; },
+    equals: function(other) {
+      if (other == this) return true;
+      if (other.primIndex != this.primIndex || other.ranges.length != this.ranges.length) return false;
+      for (var i = 0; i < this.ranges.length; i++) {
+        var here = this.ranges[i], there = other.ranges[i];
+        if (cmp(here.anchor, there.anchor) != 0 || cmp(here.head, there.head) != 0) return false;
+      }
+      return true;
+    },
+    deepCopy: function() {
+      for (var out = [], i = 0; i < this.ranges.length; i++)
+        out[i] = new Range(copyPos(this.ranges[i].anchor), copyPos(this.ranges[i].head));
+      return new Selection(out, this.primIndex);
+    },
+    somethingSelected: function() {
+      for (var i = 0; i < this.ranges.length; i++)
+        if (!this.ranges[i].empty()) return true;
+      return false;
+    },
+    contains: function(pos, end) {
+      if (!end) end = pos;
+      for (var i = 0; i < this.ranges.length; i++) {
+        var range = this.ranges[i];
+        if (cmp(end, range.from()) >= 0 && cmp(pos, range.to()) <= 0)
+          return i;
+      }
+      return -1;
+    }
+  };
+
+  function Range(anchor, head) {
+    this.anchor = anchor; this.head = head;
+  }
+
+  Range.prototype = {
+    from: function() { return minPos(this.anchor, this.head); },
+    to: function() { return maxPos(this.anchor, this.head); },
+    empty: function() {
+      return this.head.line == this.anchor.line && this.head.ch == this.anchor.ch;
+    }
+  };
+
+  // Take an unsorted, potentially overlapping set of ranges, and
+  // build a selection out of it. 'Consumes' ranges array (modifying
+  // it).
+  function normalizeSelection(ranges, primIndex) {
+    var prim = ranges[primIndex];
+    ranges.sort(function(a, b) { return cmp(a.from(), b.from()); });
+    primIndex = indexOf(ranges, prim);
+    for (var i = 1; i < ranges.length; i++) {
+      var cur = ranges[i], prev = ranges[i - 1];
+      if (cmp(prev.to(), cur.from()) >= 0) {
+        var from = minPos(prev.from(), cur.from()), to = maxPos(prev.to(), cur.to());
+        var inv = prev.empty() ? cur.from() == cur.head : prev.from() == prev.head;
+        if (i <= primIndex) --primIndex;
+        ranges.splice(--i, 2, new Range(inv ? to : from, inv ? from : to));
+      }
+    }
+    return new Selection(ranges, primIndex);
+  }
+
+  function simpleSelection(anchor, head) {
+    return new Selection([new Range(anchor, head || anchor)], 0);
+  }
+
+  // Most of the external API clips given positions to make sure they
+  // actually exist within the document.
+  function clipLine(doc, n) {return Math.max(doc.first, Math.min(n, doc.first + doc.size - 1));}
+  function clipPos(doc, pos) {
+    if (pos.line < doc.first) return Pos(doc.first, 0);
+    var last = doc.first + doc.size - 1;
+    if (pos.line > last) return Pos(last, getLine(doc, last).text.length);
+    return clipToLen(pos, getLine(doc, pos.line).text.length);
+  }
+  function clipToLen(pos, linelen) {
+    var ch = pos.ch;
+    if (ch == null || ch > linelen) return Pos(pos.line, linelen);
+    else if (ch < 0) return Pos(pos.line, 0);
+    else return pos;
+  }
+  function isLine(doc, l) {return l >= doc.first && l < doc.first + doc.size;}
+  function clipPosArray(doc, array) {
+    for (var out = [], i = 0; i < array.length; i++) out[i] = clipPos(doc, array[i]);
+    return out;
+  }
+
+  // SELECTION UPDATES
+
+  // The 'scroll' parameter given to many of these indicated whether
+  // the new cursor position should be scrolled into view after
+  // modifying the selection.
+
+  // If shift is held or the extend flag is set, extends a range to
+  // include a given position (and optionally a second position).
+  // Otherwise, simply returns the range between the given positions.
+  // Used for cursor motion and such.
+  function extendRange(doc, range, head, other) {
+    if (doc.cm && doc.cm.display.shift || doc.extend) {
+      var anchor = range.anchor;
+      if (other) {
+        var posBefore = cmp(head, anchor) < 0;
+        if (posBefore != (cmp(other, anchor) < 0)) {
+          anchor = head;
+          head = other;
+        } else if (posBefore != (cmp(head, other) < 0)) {
+          head = other;
+        }
+      }
+      return new Range(anchor, head);
+    } else {
+      return new Range(other || head, head);
+    }
+  }
+
+  // Extend the primary selection range, discard the rest.
+  function extendSelection(doc, head, other, options) {
+    setSelection(doc, new Selection([extendRange(doc, doc.sel.primary(), head, other)], 0), options);
+  }
+
+  // Extend all selections (pos is an array of selections with length
+  // equal the number of selections)
+  function extendSelections(doc, heads, options) {
+    for (var out = [], i = 0; i < doc.sel.ranges.length; i++)
+      out[i] = extendRange(doc, doc.sel.ranges[i], heads[i], null);
+    var newSel = normalizeSelection(out, doc.sel.primIndex);
+    setSelection(doc, newSel, options);
+  }
+
+  // Updates a single range in the selection.
+  function replaceOneSelection(doc, i, range, options) {
+    var ranges = doc.sel.ranges.slice(0);
+    ranges[i] = range;
+    setSelection(doc, normalizeSelection(ranges, doc.sel.primIndex), options);
+  }
+
+  // Reset the selection to a single range.
+  function setSimpleSelection(doc, anchor, head, options) {
+    setSelection(doc, simpleSelection(anchor, head), options);
+  }
+
+  // Give beforeSelectionChange handlers a change to influence a
+  // selection update.
+  function filterSelectionChange(doc, sel) {
+    var obj = {
+      ranges: sel.ranges,
+      update: function(ranges) {
+        this.ranges = [];
+        for (var i = 0; i < ranges.length; i++)
+          this.ranges[i] = new Range(clipPos(doc, ranges[i].anchor),
+                                     clipPos(doc, ranges[i].head));
+      }
+    };
+    signal(doc, "beforeSelectionChange", doc, obj);
+    if (doc.cm) signal(doc.cm, "beforeSelectionChange", doc.cm, obj);
+    if (obj.ranges != sel.ranges) return normalizeSelection(obj.ranges, obj.ranges.length - 1);
+    else return sel;
+  }
+
+  function setSelectionReplaceHistory(doc, sel, options) {
+    var done = doc.history.done, last = lst(done);
+    if (last && last.ranges) {
+      done[done.length - 1] = sel;
+      setSelectionNoUndo(doc, sel, options);
+    } else {
+      setSelection(doc, sel, options);
+    }
+  }
+
+  // Set a new selection.
+  function setSelection(doc, sel, options) {
+    setSelectionNoUndo(doc, sel, options);
+    addSelectionToHistory(doc, doc.sel, doc.cm ? doc.cm.curOp.id : NaN, options);
+  }
+
+  function setSelectionNoUndo(doc, sel, options) {
+    if (hasHandler(doc, "beforeSelectionChange") || doc.cm && hasHandler(doc.cm, "beforeSelectionChange"))
+      sel = filterSelectionChange(doc, sel);
+
+    var bias = options && options.bias ||
+      (cmp(sel.primary().head, doc.sel.primary().head) < 0 ? -1 : 1);
+    setSelectionInner(doc, skipAtomicInSelection(doc, sel, bias, true));
+
+    if (!(options && options.scroll === false) && doc.cm)
+      ensureCursorVisible(doc.cm);
+  }
+
+  function setSelectionInner(doc, sel) {
+    if (sel.equals(doc.sel)) return;
+
+    doc.sel = sel;
+
+    if (doc.cm) {
+      doc.cm.curOp.updateInput = doc.cm.curOp.selectionChanged = true;
+      signalCursorActivity(doc.cm);
+    }
+    signalLater(doc, "cursorActivity", doc);
+  }
+
+  // Verify that the selection does not partially select any atomic
+  // marked ranges.
+  function reCheckSelection(doc) {
+    setSelectionInner(doc, skipAtomicInSelection(doc, doc.sel, null, false), sel_dontScroll);
+  }
+
+  // Return a selection that does not partially select any atomic
+  // ranges.
+  function skipAtomicInSelection(doc, sel, bias, mayClear) {
+    var out;
+    for (var i = 0; i < sel.ranges.length; i++) {
+      var range = sel.ranges[i];
+      var newAnchor = skipAtomic(doc, range.anchor, bias, mayClear);
+      var newHead = skipAtomic(doc, range.head, bias, mayClear);
+      if (out || newAnchor != range.anchor || newHead != range.head) {
+        if (!out) out = sel.ranges.slice(0, i);
+        out[i] = new Range(newAnchor, newHead);
+      }
+    }
+    return out ? normalizeSelection(out, sel.primIndex) : sel;
+  }
+
+  // Ensure a given position is not inside an atomic range.
+  function skipAtomic(doc, pos, bias, mayClear) {
+    var flipped = false, curPos = pos;
+    var dir = bias || 1;
+    doc.cantEdit = false;
+    search: for (;;) {
+      var line = getLine(doc, curPos.line);
+      if (line.markedSpans) {
+        for (var i = 0; i < line.markedSpans.length; ++i) {
+          var sp = line.markedSpans[i], m = sp.marker;
+          if ((sp.from == null || (m.inclusiveLeft ? sp.from <= curPos.ch : sp.from < curPos.ch)) &&
+              (sp.to == null || (m.inclusiveRight ? sp.to >= curPos.ch : sp.to > curPos.ch))) {
+            if (mayClear) {
+              signal(m, "beforeCursorEnter");
+              if (m.explicitlyCleared) {
+                if (!line.markedSpans) break;
+                else {--i; continue;}
+              }
+            }
+            if (!m.atomic) continue;
+            var newPos = m.find(dir < 0 ? -1 : 1);
+            if (cmp(newPos, curPos) == 0) {
+              newPos.ch += dir;
+              if (newPos.ch < 0) {
+                if (newPos.line > doc.first) newPos = clipPos(doc, Pos(newPos.line - 1));
+                else newPos = null;
+              } else if (newPos.ch > line.text.length) {
+                if (newPos.line < doc.first + doc.size - 1) newPos = Pos(newPos.line + 1, 0);
+                else newPos = null;
+              }
+              if (!newPos) {
+                if (flipped) {
+                  // Driven in a corner -- no valid cursor position found at all
+                  // -- try again *with* clearing, if we didn't already
+                  if (!mayClear) return skipAtomic(doc, pos, bias, true);
+                  // Otherwise, turn off editing until further notice, and return the start of the doc
+                  doc.cantEdit = true;
+                  return Pos(doc.first, 0);
+                }
+                flipped = true; newPos = pos; dir = -dir;
+              }
+            }
+            curPos = newPos;
+            continue search;
+          }
+        }
+      }
+      return curPos;
+    }
+  }
+
+  // SELECTION DRAWING
+
   function updateSelection(cm) {
-    var display = cm.display;
-    var collapsed = posEq(cm.doc.sel.from, cm.doc.sel.to);
-    if (collapsed || cm.options.showCursorWhenSelecting)
-      updateSelectionCursor(cm);
-    else
-      display.cursor.style.display = display.otherCursor.style.display = "none";
-    if (!collapsed)
-      updateSelectionRange(cm);
-    else
-      display.selectionDiv.style.display = "none";
+    cm.display.input.showSelection(cm.display.input.prepareSelection());
+  }
 
-    // Move the hidden textarea near the cursor to prevent scrolling artifacts
-    if (cm.options.moveInputWithCursor) {
-      var headPos = cursorCoords(cm, cm.doc.sel.head, "div");
-      var wrapOff = getRect(display.wrapper), lineOff = getRect(display.lineDiv);
-      display.inputDiv.style.top = Math.max(0, Math.min(display.wrapper.clientHeight - 10,
-                                                        headPos.top + lineOff.top - wrapOff.top)) + "px";
-      display.inputDiv.style.left = Math.max(0, Math.min(display.wrapper.clientWidth - 10,
-                                                         headPos.left + lineOff.left - wrapOff.left)) + "px";
+  function prepareSelection(cm, primary) {
+    var doc = cm.doc, result = {};
+    var curFragment = result.cursors = document.createDocumentFragment();
+    var selFragment = result.selection = document.createDocumentFragment();
+
+    for (var i = 0; i < doc.sel.ranges.length; i++) {
+      if (primary === false && i == doc.sel.primIndex) continue;
+      var range = doc.sel.ranges[i];
+      var collapsed = range.empty();
+      if (collapsed || cm.options.showCursorWhenSelecting)
+        drawSelectionCursor(cm, range.head, curFragment);
+      if (!collapsed)
+        drawSelectionRange(cm, range, selFragment);
     }
+    return result;
   }
 
-  // No selection, plain cursor
-  function updateSelectionCursor(cm) {
-    var display = cm.display, pos = cursorCoords(cm, cm.doc.sel.head, "div");
-    display.cursor.style.left = pos.left + "px";
-    display.cursor.style.top = pos.top + "px";
-    display.cursor.style.height = Math.max(0, pos.bottom - pos.top) * cm.options.cursorHeight + "px";
-    display.cursor.style.display = "";
+  // Draws a cursor for the given range
+  function drawSelectionCursor(cm, head, output) {
+    var pos = cursorCoords(cm, head, "div", null, null, !cm.options.singleCursorHeightPerLine);
+
+    var cursor = output.appendChild(elt("div", "\u00a0", "CodeMirror-cursor"));
+    cursor.style.left = pos.left + "px";
+    cursor.style.top = pos.top + "px";
+    cursor.style.height = Math.max(0, pos.bottom - pos.top) * cm.options.cursorHeight + "px";
 
     if (pos.other) {
-      display.otherCursor.style.display = "";
-      display.otherCursor.style.left = pos.other.left + "px";
-      display.otherCursor.style.top = pos.other.top + "px";
-      display.otherCursor.style.height = (pos.other.bottom - pos.other.top) * .85 + "px";
-    } else { display.otherCursor.style.display = "none"; }
+      // Secondary cursor, shown when on a 'jump' in bi-directional text
+      var otherCursor = output.appendChild(elt("div", "\u00a0", "CodeMirror-cursor CodeMirror-secondarycursor"));
+      otherCursor.style.display = "";
+      otherCursor.style.left = pos.other.left + "px";
+      otherCursor.style.top = pos.other.top + "px";
+      otherCursor.style.height = (pos.other.bottom - pos.other.top) * .85 + "px";
+    }
   }
 
-  // Highlight selection
-  function updateSelectionRange(cm) {
-    var display = cm.display, doc = cm.doc, sel = cm.doc.sel;
+  // Draws the given range as a highlighted selection
+  function drawSelectionRange(cm, range, output) {
+    var display = cm.display, doc = cm.doc;
     var fragment = document.createDocumentFragment();
-    var clientWidth = display.lineSpace.offsetWidth, pl = paddingLeft(cm.display);
+    var padding = paddingH(cm.display), leftSide = padding.left;
+    var rightSide = Math.max(display.sizerWidth, displayWidth(cm) - display.sizer.offsetLeft) - padding.right;
 
     function add(left, top, width, bottom) {
       if (top < 0) top = 0;
+      top = Math.round(top);
+      bottom = Math.round(bottom);
       fragment.appendChild(elt("div", null, "CodeMirror-selected", "position: absolute; left: " + left +
-                               "px; top: " + top + "px; width: " + (width == null ? clientWidth - left : width) +
+                               "px; top: " + top + "px; width: " + (width == null ? rightSide - left : width) +
                                "px; height: " + (bottom - top) + "px"));
     }
 
@@ -817,44 +2333,44 @@ window.CodeMirror = (function() {
           left = leftPos.left;
           right = rightPos.right;
         }
-        if (fromArg == null && from == 0) left = pl;
+        if (fromArg == null && from == 0) left = leftSide;
         if (rightPos.top - leftPos.top > 3) { // Different lines, draw top part
           add(left, leftPos.top, null, leftPos.bottom);
-          left = pl;
+          left = leftSide;
           if (leftPos.bottom < rightPos.top) add(left, leftPos.bottom, null, rightPos.top);
         }
-        if (toArg == null && to == lineLen) right = clientWidth;
+        if (toArg == null && to == lineLen) right = rightSide;
         if (!start || leftPos.top < start.top || leftPos.top == start.top && leftPos.left < start.left)
           start = leftPos;
         if (!end || rightPos.bottom > end.bottom || rightPos.bottom == end.bottom && rightPos.right > end.right)
           end = rightPos;
-        if (left < pl + 1) left = pl;
+        if (left < leftSide + 1) left = leftSide;
         add(left, rightPos.top, right - left, rightPos.bottom);
       });
       return {start: start, end: end};
     }
 
-    if (sel.from.line == sel.to.line) {
-      drawForLine(sel.from.line, sel.from.ch, sel.to.ch);
+    var sFrom = range.from(), sTo = range.to();
+    if (sFrom.line == sTo.line) {
+      drawForLine(sFrom.line, sFrom.ch, sTo.ch);
     } else {
-      var fromLine = getLine(doc, sel.from.line), toLine = getLine(doc, sel.to.line);
-      var singleVLine = visualLine(doc, fromLine) == visualLine(doc, toLine);
-      var leftEnd = drawForLine(sel.from.line, sel.from.ch, singleVLine ? fromLine.text.length : null).end;
-      var rightStart = drawForLine(sel.to.line, singleVLine ? 0 : null, sel.to.ch).start;
+      var fromLine = getLine(doc, sFrom.line), toLine = getLine(doc, sTo.line);
+      var singleVLine = visualLine(fromLine) == visualLine(toLine);
+      var leftEnd = drawForLine(sFrom.line, sFrom.ch, singleVLine ? fromLine.text.length + 1 : null).end;
+      var rightStart = drawForLine(sTo.line, singleVLine ? 0 : null, sTo.ch).start;
       if (singleVLine) {
         if (leftEnd.top < rightStart.top - 2) {
           add(leftEnd.right, leftEnd.top, null, leftEnd.bottom);
-          add(pl, rightStart.top, rightStart.left, rightStart.bottom);
+          add(leftSide, rightStart.top, rightStart.left, rightStart.bottom);
         } else {
           add(leftEnd.right, leftEnd.top, rightStart.left - leftEnd.right, leftEnd.bottom);
         }
       }
       if (leftEnd.bottom < rightStart.top)
-        add(pl, leftEnd.bottom, null, rightStart.top);
+        add(leftSide, leftEnd.bottom, null, rightStart.top);
     }
 
-    removeChildrenAndAdd(display.selectionDiv, fragment);
-    display.selectionDiv.style.display = "";
+    output.appendChild(fragment);
   }
 
   // Cursor-blinking
@@ -863,39 +2379,45 @@ window.CodeMirror = (function() {
     var display = cm.display;
     clearInterval(display.blinker);
     var on = true;
-    display.cursor.style.visibility = display.otherCursor.style.visibility = "";
-    display.blinker = setInterval(function() {
-      display.cursor.style.visibility = display.otherCursor.style.visibility = (on = !on) ? "" : "hidden";
-    }, cm.options.cursorBlinkRate);
+    display.cursorDiv.style.visibility = "";
+    if (cm.options.cursorBlinkRate > 0)
+      display.blinker = setInterval(function() {
+        display.cursorDiv.style.visibility = (on = !on) ? "" : "hidden";
+      }, cm.options.cursorBlinkRate);
+    else if (cm.options.cursorBlinkRate < 0)
+      display.cursorDiv.style.visibility = "hidden";
   }
 
   // HIGHLIGHT WORKER
 
   function startWorker(cm, time) {
-    if (cm.doc.mode.startState && cm.doc.frontier < cm.display.showingTo)
+    if (cm.doc.mode.startState && cm.doc.frontier < cm.display.viewTo)
       cm.state.highlight.set(time, bind(highlightWorker, cm));
   }
 
   function highlightWorker(cm) {
     var doc = cm.doc;
     if (doc.frontier < doc.first) doc.frontier = doc.first;
-    if (doc.frontier >= cm.display.showingTo) return;
+    if (doc.frontier >= cm.display.viewTo) return;
     var end = +new Date + cm.options.workTime;
     var state = copyState(doc.mode, getStateBefore(cm, doc.frontier));
-    var changed = [], prevChange;
-    doc.iter(doc.frontier, Math.min(doc.first + doc.size, cm.display.showingTo + 500), function(line) {
-      if (doc.frontier >= cm.display.showingFrom) { // Visible
+    var changedLines = [];
+
+    doc.iter(doc.frontier, Math.min(doc.first + doc.size, cm.display.viewTo + 500), function(line) {
+      if (doc.frontier >= cm.display.viewFrom) { // Visible
         var oldStyles = line.styles;
-        line.styles = highlightLine(cm, line, state);
-        var ischange = !oldStyles || oldStyles.length != line.styles.length;
+        var highlighted = highlightLine(cm, line, state, true);
+        line.styles = highlighted.styles;
+        var oldCls = line.styleClasses, newCls = highlighted.classes;
+        if (newCls) line.styleClasses = newCls;
+        else if (oldCls) line.styleClasses = null;
+        var ischange = !oldStyles || oldStyles.length != line.styles.length ||
+          oldCls != newCls && (!oldCls || !newCls || oldCls.bgClass != newCls.bgClass || oldCls.textClass != newCls.textClass);
         for (var i = 0; !ischange && i < oldStyles.length; ++i) ischange = oldStyles[i] != line.styles[i];
-        if (ischange) {
-          if (prevChange && prevChange.end == doc.frontier) prevChange.end++;
-          else changed.push(prevChange = {start: doc.frontier, end: doc.frontier + 1});
-        }
+        if (ischange) changedLines.push(doc.frontier);
         line.stateAfter = copyState(doc.mode, state);
       } else {
-        processLine(cm, line, state);
+        processLine(cm, line.text, state);
         line.stateAfter = doc.frontier % 5 == 0 ? copyState(doc.mode, state) : null;
       }
       ++doc.frontier;
@@ -904,11 +2426,10 @@ window.CodeMirror = (function() {
         return true;
       }
     });
-    if (changed.length)
-      operation(cm, function() {
-        for (var i = 0; i < changed.length; ++i)
-          regChange(this, changed[i].start, changed[i].end);
-      })();
+    if (changedLines.length) runInOp(cm, function() {
+      for (var i = 0; i < changedLines.length; i++)
+        regLineChange(cm, changedLines[i], "text");
+    });
   }
 
   // Finds the line to start with when starting a parse. Tries to
@@ -918,7 +2439,8 @@ window.CodeMirror = (function() {
   // parse correctly.
   function findStartLine(cm, n, precise) {
     var minindent, minline, doc = cm.doc;
-    for (var search = n, lim = n - 100; search > lim; --search) {
+    var lim = precise ? -1 : n - (cm.doc.mode.innerMode ? 1000 : 100);
+    for (var search = n; search > lim; --search) {
       if (search <= doc.first) return doc.first;
       var line = getLine(doc, search - 1);
       if (line.stateAfter && (!precise || search <= doc.frontier)) return search;
@@ -933,16 +2455,17 @@ window.CodeMirror = (function() {
 
   function getStateBefore(cm, n, precise) {
     var doc = cm.doc, display = cm.display;
-      if (!doc.mode.startState) return true;
+    if (!doc.mode.startState) return true;
     var pos = findStartLine(cm, n, precise), state = pos > doc.first && getLine(doc, pos-1).stateAfter;
     if (!state) state = startState(doc.mode);
     else state = copyState(doc.mode, state);
     doc.iter(pos, n, function(line) {
-      processLine(cm, line, state);
-      var save = pos == n - 1 || pos % 5 == 0 || pos >= display.showingFrom && pos < display.showingTo;
+      processLine(cm, line.text, state);
+      var save = pos == n - 1 || pos % 5 == 0 || pos >= display.viewFrom && pos < display.viewTo;
       line.stateAfter = save ? copyState(doc.mode, state) : null;
       ++pos;
     });
+    if (precise) doc.frontier = pos;
     return state;
   }
 
@@ -950,165 +2473,261 @@ window.CodeMirror = (function() {
 
   function paddingTop(display) {return display.lineSpace.offsetTop;}
   function paddingVert(display) {return display.mover.offsetHeight - display.lineSpace.offsetHeight;}
-  function paddingLeft(display) {
-    var e = removeChildrenAndAdd(display.measure, elt("pre", null, null, "text-align: left")).appendChild(elt("span", "x"));
-    return e.offsetLeft;
-  }
-
-  function measureChar(cm, line, ch, data, bias) {
-    var dir = -1;
-    data = data || measureLine(cm, line);
-
-    for (var pos = ch;; pos += dir) {
-      var r = data[pos];
-      if (r) break;
-      if (dir < 0 && pos == 0) dir = 1;
-    }
-    bias = pos > ch ? "left" : pos < ch ? "right" : bias;
-    if (bias == "left" && r.leftSide) r = r.leftSide;
-    else if (bias == "right" && r.rightSide) r = r.rightSide;
-    return {left: pos < ch ? r.right : r.left,
-            right: pos > ch ? r.left : r.right,
-            top: r.top,
-            bottom: r.bottom};
-  }
-
-  function findCachedMeasurement(cm, line) {
-    var cache = cm.display.measureLineCache;
-    for (var i = 0; i < cache.length; ++i) {
-      var memo = cache[i];
-      if (memo.text == line.text && memo.markedSpans == line.markedSpans &&
-          cm.display.scroller.clientWidth == memo.width &&
-          memo.classes == line.textClass + "|" + line.bgClass + "|" + line.wrapClass)
-        return memo;
-    }
-  }
-
-  function clearCachedMeasurement(cm, line) {
-    var exists = findCachedMeasurement(cm, line);
-    if (exists) exists.text = exists.measure = exists.markedSpans = null;
-  }
-
-  function measureLine(cm, line) {
-    // First look in the cache
-    var cached = findCachedMeasurement(cm, line);
-    if (cached) return cached.measure;
-
-    // Failing that, recompute and store result in cache
-    var measure = measureLineInner(cm, line);
-    var cache = cm.display.measureLineCache;
-    var memo = {text: line.text, width: cm.display.scroller.clientWidth,
-                markedSpans: line.markedSpans, measure: measure,
-                classes: line.textClass + "|" + line.bgClass + "|" + line.wrapClass};
-    if (cache.length == 16) cache[++cm.display.measureLineCachePos % 16] = memo;
-    else cache.push(memo);
-    return measure;
-  }
-
-  function measureLineInner(cm, line) {
-    var display = cm.display, measure = emptyArray(line.text.length);
-    var pre = lineContent(cm, line, measure);
-
-    // IE does not cache element positions of inline elements between
-    // calls to getBoundingClientRect. This makes the loop below,
-    // which gathers the positions of all the characters on the line,
-    // do an amount of layout work quadratic to the number of
-    // characters. When line wrapping is off, we try to improve things
-    // by first subdividing the line into a bunch of inline blocks, so
-    // that IE can reuse most of the layout information from caches
-    // for those blocks. This does interfere with line wrapping, so it
-    // doesn't work when wrapping is on, but in that case the
-    // situation is slightly better, since IE does cache line-wrapping
-    // information and only recomputes per-line.
-    if (ie && !ie_lt8 && !cm.options.lineWrapping && pre.childNodes.length > 100) {
-      var fragment = document.createDocumentFragment();
-      var chunk = 10, n = pre.childNodes.length;
-      for (var i = 0, chunks = Math.ceil(n / chunk); i < chunks; ++i) {
-        var wrap = elt("div", null, null, "display: inline-block");
-        for (var j = 0; j < chunk && n; ++j) {
-          wrap.appendChild(pre.firstChild);
-          --n;
+  function paddingH(display) {
+    if (display.cachedPaddingH) return display.cachedPaddingH;
+    var e = removeChildrenAndAdd(display.measure, elt("pre", "x"));
+    var style = window.getComputedStyle ? window.getComputedStyle(e) : e.currentStyle;
+    var data = {left: parseInt(style.paddingLeft), right: parseInt(style.paddingRight)};
+    if (!isNaN(data.left) && !isNaN(data.right)) display.cachedPaddingH = data;
+    return data;
+  }
+
+  function scrollGap(cm) { return scrollerGap - cm.display.nativeBarWidth; }
+  function displayWidth(cm) {
+    return cm.display.scroller.clientWidth - scrollGap(cm) - cm.display.barWidth;
+  }
+  function displayHeight(cm) {
+    return cm.display.scroller.clientHeight - scrollGap(cm) - cm.display.barHeight;
+  }
+
+  // Ensure the lineView.wrapping.heights array is populated. This is
+  // an array of bottom offsets for the lines that make up a drawn
+  // line. When lineWrapping is on, there might be more than one
+  // height.
+  function ensureLineHeights(cm, lineView, rect) {
+    var wrapping = cm.options.lineWrapping;
+    var curWidth = wrapping && displayWidth(cm);
+    if (!lineView.measure.heights || wrapping && lineView.measure.width != curWidth) {
+      var heights = lineView.measure.heights = [];
+      if (wrapping) {
+        lineView.measure.width = curWidth;
+        var rects = lineView.text.firstChild.getClientRects();
+        for (var i = 0; i < rects.length - 1; i++) {
+          var cur = rects[i], next = rects[i + 1];
+          if (Math.abs(cur.bottom - next.bottom) > 2)
+            heights.push((cur.bottom + next.top) / 2 - rect.top);
         }
-        fragment.appendChild(wrap);
       }
-      pre.appendChild(fragment);
-    }
+      heights.push(rect.bottom - rect.top);
+    }
+  }
+
+  // Find a line map (mapping character offsets to text nodes) and a
+  // measurement cache for the given line number. (A line view might
+  // contain multiple lines when collapsed ranges are present.)
+  function mapFromLineView(lineView, line, lineN) {
+    if (lineView.line == line)
+      return {map: lineView.measure.map, cache: lineView.measure.cache};
+    for (var i = 0; i < lineView.rest.length; i++)
+      if (lineView.rest[i] == line)
+        return {map: lineView.measure.maps[i], cache: lineView.measure.caches[i]};
+    for (var i = 0; i < lineView.rest.length; i++)
+      if (lineNo(lineView.rest[i]) > lineN)
+        return {map: lineView.measure.maps[i], cache: lineView.measure.caches[i], before: true};
+  }
+
+  // Render a line into the hidden node display.externalMeasured. Used
+  // when measurement is needed for a line that's not in the viewport.
+  function updateExternalMeasurement(cm, line) {
+    line = visualLine(line);
+    var lineN = lineNo(line);
+    var view = cm.display.externalMeasured = new LineView(cm.doc, line, lineN);
+    view.lineN = lineN;
+    var built = view.built = buildLineContent(cm, view);
+    view.text = built.pre;
+    removeChildrenAndAdd(cm.display.lineMeasure, built.pre);
+    return view;
+  }
+
+  // Get a {top, bottom, left, right} box (in line-local coordinates)
+  // for a given character.
+  function measureChar(cm, line, ch, bias) {
+    return measureCharPrepared(cm, prepareMeasureForLine(cm, line), ch, bias);
+  }
+
+  // Find a line view that corresponds to the given line number.
+  function findViewForLine(cm, lineN) {
+    if (lineN >= cm.display.viewFrom && lineN < cm.display.viewTo)
+      return cm.display.view[findViewIndex(cm, lineN)];
+    var ext = cm.display.externalMeasured;
+    if (ext && lineN >= ext.lineN && lineN < ext.lineN + ext.size)
+      return ext;
+  }
+
+  // Measurement can be split in two steps, the set-up work that
+  // applies to the whole line, and the measurement of the actual
+  // character. Functions like coordsChar, that need to do a lot of
+  // measurements in a row, can thus ensure that the set-up work is
+  // only done once.
+  function prepareMeasureForLine(cm, line) {
+    var lineN = lineNo(line);
+    var view = findViewForLine(cm, lineN);
+    if (view && !view.text) {
+      view = null;
+    } else if (view && view.changes) {
+      updateLineForChanges(cm, view, lineN, getDimensions(cm));
+      cm.curOp.forceUpdate = true;
+    }
+    if (!view)
+      view = updateExternalMeasurement(cm, line);
+
+    var info = mapFromLineView(view, line, lineN);
+    return {
+      line: line, view: view, rect: null,
+      map: info.map, cache: info.cache, before: info.before,
+      hasHeights: false
+    };
+  }
 
-    removeChildrenAndAdd(display.measure, pre);
+  // Given a prepared measurement object, measures the position of an
+  // actual character (or fetches it from the cache).
+  function measureCharPrepared(cm, prepared, ch, bias, varHeight) {
+    if (prepared.before) ch = -1;
+    var key = ch + (bias || ""), found;
+    if (prepared.cache.hasOwnProperty(key)) {
+      found = prepared.cache[key];
+    } else {
+      if (!prepared.rect)
+        prepared.rect = prepared.view.text.getBoundingClientRect();
+      if (!prepared.hasHeights) {
+        ensureLineHeights(cm, prepared.view, prepared.rect);
+        prepared.hasHeights = true;
+      }
+      found = measureCharInner(cm, prepared, ch, bias);
+      if (!found.bogus) prepared.cache[key] = found;
+    }
+    return {left: found.left, right: found.right,
+            top: varHeight ? found.rtop : found.top,
+            bottom: varHeight ? found.rbottom : found.bottom};
+  }
+
+  var nullRect = {left: 0, right: 0, top: 0, bottom: 0};
+
+  function nodeAndOffsetInLineMap(map, ch, bias) {
+    var node, start, end, collapse;
+    // First, search the line map for the text node corresponding to,
+    // or closest to, the target character.
+    for (var i = 0; i < map.length; i += 3) {
+      var mStart = map[i], mEnd = map[i + 1];
+      if (ch < mStart) {
+        start = 0; end = 1;
+        collapse = "left";
+      } else if (ch < mEnd) {
+        start = ch - mStart;
+        end = start + 1;
+      } else if (i == map.length - 3 || ch == mEnd && map[i + 3] > ch) {
+        end = mEnd - mStart;
+        start = end - 1;
+        if (ch >= mEnd) collapse = "right";
+      }
+      if (start != null) {
+        node = map[i + 2];
+        if (mStart == mEnd && bias == (node.insertLeft ? "left" : "right"))
+          collapse = bias;
+        if (bias == "left" && start == 0)
+          while (i && map[i - 2] == map[i - 3] && map[i - 1].insertLeft) {
+            node = map[(i -= 3) + 2];
+            collapse = "left";
+          }
+        if (bias == "right" && start == mEnd - mStart)
+          while (i < map.length - 3 && map[i + 3] == map[i + 4] && !map[i + 5].insertLeft) {
+            node = map[(i += 3) + 2];
+            collapse = "right";
+          }
+        break;
+      }
+    }
+    return {node: node, start: start, end: end, collapse: collapse, coverStart: mStart, coverEnd: mEnd};
+  }
 
-    var outer = getRect(display.lineDiv);
-    var vranges = [], data = emptyArray(line.text.length), maxBot = pre.offsetHeight;
-    // Work around an IE7/8 bug where it will sometimes have randomly
-    // replaced our pre with a clone at this point.
-    if (ie_lt9 && display.measure.first != pre)
-      removeChildrenAndAdd(display.measure, pre);
+  function measureCharInner(cm, prepared, ch, bias) {
+    var place = nodeAndOffsetInLineMap(prepared.map, ch, bias);
+    var node = place.node, start = place.start, end = place.end, collapse = place.collapse;
 
-    function measureRect(rect) {
-      var top = rect.top - outer.top, bot = rect.bottom - outer.top;
-      if (bot > maxBot) bot = maxBot;
-      if (top < 0) top = 0;
-      for (var i = vranges.length - 2; i >= 0; i -= 2) {
-        var rtop = vranges[i], rbot = vranges[i+1];
-        if (rtop > bot || rbot < top) continue;
-        if (rtop <= top && rbot >= bot ||
-            top <= rtop && bot >= rbot ||
-            Math.min(bot, rbot) - Math.max(top, rtop) >= (bot - top) >> 1) {
-          vranges[i] = Math.min(top, rtop);
-          vranges[i+1] = Math.max(bot, rbot);
-          break;
-        }
-      }
-      if (i < 0) { i = vranges.length; vranges.push(top, bot); }
-      return {left: rect.left - outer.left,
-              right: rect.right - outer.left,
-              top: i, bottom: null};
-    }
-    function finishRect(rect) {
-      rect.bottom = vranges[rect.top+1];
-      rect.top = vranges[rect.top];
-    }
-
-    for (var i = 0, cur; i < measure.length; ++i) if (cur = measure[i]) {
-      var node = cur, rect = null;
-      // A widget might wrap, needs special care
-      if (/\bCodeMirror-widget\b/.test(cur.className) && cur.getClientRects) {
-        if (cur.firstChild.nodeType == 1) node = cur.firstChild;
-        var rects = node.getClientRects();
-        if (rects.length > 1) {
-          rect = data[i] = measureRect(rects[0]);
-          rect.rightSide = measureRect(rects[rects.length - 1]);
+    var rect;
+    if (node.nodeType == 3) { // If it is a text node, use a range to retrieve the coordinates.
+      for (var i = 0; i < 4; i++) { // Retry a maximum of 4 times when nonsense rectangles are returned
+        while (start && isExtendingChar(prepared.line.text.charAt(place.coverStart + start))) --start;
+        while (place.coverStart + end < place.coverEnd && isExtendingChar(prepared.line.text.charAt(place.coverStart + end))) ++end;
+        if (ie && ie_version < 9 && start == 0 && end == place.coverEnd - place.coverStart) {
+          rect = node.parentNode.getBoundingClientRect();
+        } else if (ie && cm.options.lineWrapping) {
+          var rects = range(node, start, end).getClientRects();
+          if (rects.length)
+            rect = rects[bias == "right" ? rects.length - 1 : 0];
+          else
+            rect = nullRect;
+        } else {
+          rect = range(node, start, end).getBoundingClientRect() || nullRect;
         }
+        if (rect.left || rect.right || start == 0) break;
+        end = start;
+        start = start - 1;
+        collapse = "right";
       }
-      if (!rect) rect = data[i] = measureRect(getRect(node));
-      if (cur.measureRight) rect.right = getRect(cur.measureRight).left;
-      if (cur.leftSide) rect.leftSide = measureRect(getRect(cur.leftSide));
+      if (ie && ie_version < 11) rect = maybeUpdateRectForZooming(cm.display.measure, rect);
+    } else { // If it is a widget, simply get the box for the whole widget.
+      if (start > 0) collapse = bias = "right";
+      var rects;
+      if (cm.options.lineWrapping && (rects = node.getClientRects()).length > 1)
+        rect = rects[bias == "right" ? rects.length - 1 : 0];
+      else
+        rect = node.getBoundingClientRect();
     }
-    for (var i = 0, cur; i < data.length; ++i) if (cur = data[i]) {
-      finishRect(cur);
-      if (cur.leftSide) finishRect(cur.leftSide);
-      if (cur.rightSide) finishRect(cur.rightSide);
+    if (ie && ie_version < 9 && !start && (!rect || !rect.left && !rect.right)) {
+      var rSpan = node.parentNode.getClientRects()[0];
+      if (rSpan)
+        rect = {left: rSpan.left, right: rSpan.left + charWidth(cm.display), top: rSpan.top, bottom: rSpan.bottom};
+      else
+        rect = nullRect;
     }
-    return data;
+
+    var rtop = rect.top - prepared.rect.top, rbot = rect.bottom - prepared.rect.top;
+    var mid = (rtop + rbot) / 2;
+    var heights = prepared.view.measure.heights;
+    for (var i = 0; i < heights.length - 1; i++)
+      if (mid < heights[i]) break;
+    var top = i ? heights[i - 1] : 0, bot = heights[i];
+    var result = {left: (collapse == "right" ? rect.right : rect.left) - prepared.rect.left,
+                  right: (collapse == "left" ? rect.left : rect.right) - prepared.rect.left,
+                  top: top, bottom: bot};
+    if (!rect.left && !rect.right) result.bogus = true;
+    if (!cm.options.singleCursorHeightPerLine) { result.rtop = rtop; result.rbottom = rbot; }
+
+    return result;
+  }
+
+  // Work around problem with bounding client rects on ranges being
+  // returned incorrectly when zoomed on IE10 and below.
+  function maybeUpdateRectForZooming(measure, rect) {
+    if (!window.screen || screen.logicalXDPI == null ||
+        screen.logicalXDPI == screen.deviceXDPI || !hasBadZoomedRects(measure))
+      return rect;
+    var scaleX = screen.logicalXDPI / screen.deviceXDPI;
+    var scaleY = screen.logicalYDPI / screen.deviceYDPI;
+    return {left: rect.left * scaleX, right: rect.right * scaleX,
+            top: rect.top * scaleY, bottom: rect.bottom * scaleY};
   }
 
-  function measureLineWidth(cm, line) {
-    var hasBadSpan = false;
-    if (line.markedSpans) for (var i = 0; i < line.markedSpans; ++i) {
-      var sp = line.markedSpans[i];
-      if (sp.collapsed && (sp.to == null || sp.to == line.text.length)) hasBadSpan = true;
+  function clearLineMeasurementCacheFor(lineView) {
+    if (lineView.measure) {
+      lineView.measure.cache = {};
+      lineView.measure.heights = null;
+      if (lineView.rest) for (var i = 0; i < lineView.rest.length; i++)
+        lineView.measure.caches[i] = {};
     }
-    var cached = !hasBadSpan && findCachedMeasurement(cm, line);
-    if (cached) return measureChar(cm, line, line.text.length, cached.measure, "right").right;
+  }
 
-    var pre = lineContent(cm, line);
-    var end = pre.appendChild(zeroWidthElement(cm.display.measure));
-    removeChildrenAndAdd(cm.display.measure, pre);
-    return getRect(end).right - getRect(cm.display.lineDiv).left;
+  function clearLineMeasurementCache(cm) {
+    cm.display.externalMeasure = null;
+    removeChildren(cm.display.lineMeasure);
+    for (var i = 0; i < cm.display.view.length; i++)
+      clearLineMeasurementCacheFor(cm.display.view[i]);
   }
 
   function clearCaches(cm) {
-    cm.display.measureLineCache.length = cm.display.measureLineCachePos = 0;
-    cm.display.cachedCharWidth = cm.display.cachedTextHeight = null;
+    clearLineMeasurementCache(cm);
+    cm.display.cachedCharWidth = cm.display.cachedTextHeight = cm.display.cachedPaddingH = null;
     if (!cm.options.lineWrapping) cm.display.maxLineChanged = true;
     cm.display.lineNumChars = null;
   }
@@ -1116,7 +2735,10 @@ window.CodeMirror = (function() {
   function pageScrollX() { return window.pageXOffset || (document.documentElement || document.body).scrollLeft; }
   function pageScrollY() { return window.pageYOffset || (document.documentElement || document.body).scrollTop; }
 
-  // Context is one of "line", "div" (display.lineDiv), "local"/null (editor), or "page"
+  // Converts a {top, bottom, left, right} box from line-local
+  // coordinates into another coordinate system. Context may be one of
+  // "line", "div" (display.lineDiv), "local"/null (editor), "window",
+  // or "page".
   function intoCoordSystem(cm, lineObj, rect, context) {
     if (lineObj.widgets) for (var i = 0; i < lineObj.widgets.length; ++i) if (lineObj.widgets[i].above) {
       var size = widgetHeight(lineObj.widgets[i]);
@@ -1124,11 +2746,11 @@ window.CodeMirror = (function() {
     }
     if (context == "line") return rect;
     if (!context) context = "local";
-    var yOff = heightAtLine(cm, lineObj);
+    var yOff = heightAtLine(lineObj);
     if (context == "local") yOff += paddingTop(cm.display);
     else yOff -= cm.display.viewOffset;
     if (context == "page" || context == "window") {
-      var lOff = getRect(cm.display.lineSpace);
+      var lOff = cm.display.lineSpace.getBoundingClientRect();
       yOff += lOff.top + (context == "window" ? 0 : pageScrollY());
       var xOff = lOff.left + (context == "window" ? 0 : pageScrollX());
       rect.left += xOff; rect.right += xOff;
@@ -1137,8 +2759,8 @@ window.CodeMirror = (function() {
     return rect;
   }
 
-  // Context may be "window", "page", "div", or "local"/null
-  // Result is in "div" coords
+  // Coverts a box from "div" coords to another coordinate system.
+  // Context may be "window", "page", "div", or "local"/null.
   function fromCoordSystem(cm, coords, context) {
     if (context == "div") return coords;
     var left = coords.left, top = coords.top;
@@ -1147,25 +2769,28 @@ window.CodeMirror = (function() {
       left -= pageScrollX();
       top -= pageScrollY();
     } else if (context == "local" || !context) {
-      var localBox = getRect(cm.display.sizer);
+      var localBox = cm.display.sizer.getBoundingClientRect();
       left += localBox.left;
       top += localBox.top;
     }
 
-    var lineSpaceBox = getRect(cm.display.lineSpace);
+    var lineSpaceBox = cm.display.lineSpace.getBoundingClientRect();
     return {left: left - lineSpaceBox.left, top: top - lineSpaceBox.top};
   }
 
   function charCoords(cm, pos, context, lineObj, bias) {
     if (!lineObj) lineObj = getLine(cm.doc, pos.line);
-    return intoCoordSystem(cm, lineObj, measureChar(cm, lineObj, pos.ch, null, bias), context);
+    return intoCoordSystem(cm, lineObj, measureChar(cm, lineObj, pos.ch, bias), context);
   }
 
-  function cursorCoords(cm, pos, context, lineObj, measurement) {
+  // Returns a box for a given cursor position, which may have an
+  // 'other' property containing the position of the secondary cursor
+  // on a bidi boundary.
+  function cursorCoords(cm, pos, context, lineObj, preparedMeasure, varHeight) {
     lineObj = lineObj || getLine(cm.doc, pos.line);
-    if (!measurement) measurement = measureLine(cm, lineObj);
+    if (!preparedMeasure) preparedMeasure = prepareMeasureForLine(cm, lineObj);
     function get(ch, right) {
-      var m = measureChar(cm, lineObj, ch, measurement, right ? "right" : "left");
+      var m = measureCharPrepared(cm, preparedMeasure, ch, right ? "right" : "left", varHeight);
       if (right) m.left = m.right; else m.right = m.left;
       return intoCoordSystem(cm, lineObj, m, context);
     }
@@ -1191,43 +2816,59 @@ window.CodeMirror = (function() {
     return val;
   }
 
+  // Used to cheaply estimate the coordinates for a position. Used for
+  // intermediate scroll updates.
+  function estimateCoords(cm, pos) {
+    var left = 0, pos = clipPos(cm.doc, pos);
+    if (!cm.options.lineWrapping) left = charWidth(cm.display) * pos.ch;
+    var lineObj = getLine(cm.doc, pos.line);
+    var top = heightAtLine(lineObj) + paddingTop(cm.display);
+    return {left: left, right: left, top: top, bottom: top + lineObj.height};
+  }
+
+  // Positions returned by coordsChar contain some extra information.
+  // xRel is the relative x position of the input coordinates compared
+  // to the found position (so xRel > 0 means the coordinates are to
+  // the right of the character position, for example). When outside
+  // is true, that means the coordinates lie outside the line's
+  // vertical range.
   function PosWithInfo(line, ch, outside, xRel) {
-    var pos = new Pos(line, ch);
+    var pos = Pos(line, ch);
     pos.xRel = xRel;
     if (outside) pos.outside = true;
     return pos;
   }
 
-  // Coords must be lineSpace-local
+  // Compute the character position closest to the given coordinates.
+  // Input must be lineSpace-local ("div" coordinate system).
   function coordsChar(cm, x, y) {
     var doc = cm.doc;
     y += cm.display.viewOffset;
     if (y < 0) return PosWithInfo(doc.first, 0, true, -1);
-    var lineNo = lineAtHeight(doc, y), last = doc.first + doc.size - 1;
-    if (lineNo > last)
+    var lineN = lineAtHeight(doc, y), last = doc.first + doc.size - 1;
+    if (lineN > last)
       return PosWithInfo(doc.first + doc.size - 1, getLine(doc, last).text.length, true, 1);
     if (x < 0) x = 0;
 
+    var lineObj = getLine(doc, lineN);
     for (;;) {
-      var lineObj = getLine(doc, lineNo);
-      var found = coordsCharInner(cm, lineObj, lineNo, x, y);
+      var found = coordsCharInner(cm, lineObj, lineN, x, y);
       var merged = collapsedSpanAtEnd(lineObj);
-      var mergedPos = merged && merged.find();
+      var mergedPos = merged && merged.find(0, true);
       if (merged && (found.ch > mergedPos.from.ch || found.ch == mergedPos.from.ch && found.xRel > 0))
-        lineNo = mergedPos.to.line;
+        lineN = lineNo(lineObj = mergedPos.to.line);
       else
         return found;
     }
   }
 
   function coordsCharInner(cm, lineObj, lineNo, x, y) {
-    var innerOff = y - heightAtLine(cm, lineObj);
+    var innerOff = y - heightAtLine(lineObj);
     var wrongLine = false, adjust = 2 * cm.display.wrapper.clientWidth;
-    var measurement = measureLine(cm, lineObj);
+    var preparedMeasure = prepareMeasureForLine(cm, lineObj);
 
     function getX(ch) {
-      var sp = cursorCoords(cm, Pos(lineNo, ch), "line",
-                            lineObj, measurement);
+      var sp = cursorCoords(cm, Pos(lineNo, ch), "line", lineObj, preparedMeasure);
       wrongLine = true;
       if (innerOff > sp.bottom) return sp.left - adjust;
       else if (innerOff < sp.top) return sp.left + adjust;
@@ -1245,9 +2886,9 @@ window.CodeMirror = (function() {
       if (bidi ? to == from || to == moveVisually(lineObj, from, 1) : to - from <= 1) {
         var ch = x < fromX || x - fromX <= toX - x ? from : to;
         var xDiff = x - (ch == from ? fromX : toX);
-        while (isExtendingChar.test(lineObj.text.charAt(ch))) ++ch;
+        while (isExtendingChar(lineObj.text.charAt(ch))) ++ch;
         var pos = PosWithInfo(lineNo, ch, ch == from ? fromOutside : toOutside,
-                              xDiff < 0 ? -1 : xDiff ? 1 : 0);
+                              xDiff < -1 ? -1 : xDiff > 1 ? 1 : 0);
         return pos;
       }
       var step = Math.ceil(dist / 2), middle = from + step;
@@ -1262,6 +2903,7 @@ window.CodeMirror = (function() {
   }
 
   var measureText;
+  // Compute the default text height.
   function textHeight(display) {
     if (display.cachedTextHeight != null) return display.cachedTextHeight;
     if (measureText == null) {
@@ -1281,241 +2923,512 @@ window.CodeMirror = (function() {
     return height || 1;
   }
 
+  // Compute the default character width.
   function charWidth(display) {
     if (display.cachedCharWidth != null) return display.cachedCharWidth;
-    var anchor = elt("span", "x");
+    var anchor = elt("span", "xxxxxxxxxx");
     var pre = elt("pre", [anchor]);
     removeChildrenAndAdd(display.measure, pre);
-    var width = anchor.offsetWidth;
+    var rect = anchor.getBoundingClientRect(), width = (rect.right - rect.left) / 10;
     if (width > 2) display.cachedCharWidth = width;
     return width || 10;
   }
 
   // OPERATIONS
 
-  // Operations are used to wrap changes in such a way that each
-  // change won't have to update the cursor and display (which would
-  // be awkward, slow, and error-prone), but instead updates are
-  // batched and then all combined and executed at once.
+  // Operations are used to wrap a series of changes to the editor
+  // state in such a way that each change won't have to update the
+  // cursor and display (which would be awkward, slow, and
+  // error-prone). Instead, display updates are batched and then all
+  // combined and executed at once.
+
+  var operationGroup = null;
 
   var nextOpId = 0;
+  // Start a new operation.
   function startOperation(cm) {
     cm.curOp = {
-      // An array of ranges of lines that have to be updated. See
-      // updateDisplay.
-      changes: [],
-      updateInput: null,
-      userSelChange: null,
-      textChanged: null,
-      selectionChanged: false,
-      cursorActivity: false,
-      updateMaxLine: false,
-      updateScrollPos: false,
-      id: ++nextOpId
+      cm: cm,
+      viewChanged: false,      // Flag that indicates that lines might need to be redrawn
+      startHeight: cm.doc.height, // Used to detect need to update scrollbar
+      forceUpdate: false,      // Used to force a redraw
+      updateInput: null,       // Whether to reset the input textarea
+      typing: false,           // Whether this reset should be careful to leave existing text (for compositing)
+      changeObjs: null,        // Accumulated changes, for firing change events
+      cursorActivityHandlers: null, // Set of handlers to fire cursorActivity on
+      cursorActivityCalled: 0, // Tracks which cursorActivity handlers have been called already
+      selectionChanged: false, // Whether the selection needs to be redrawn
+      updateMaxLine: false,    // Set when the widest line needs to be determined anew
+      scrollLeft: null, scrollTop: null, // Intermediate scroll position, not pushed to DOM yet
+      scrollToPos: null,       // Used to scroll to a specific position
+      focus: false,
+      id: ++nextOpId           // Unique ID
     };
-    if (!delayedCallbackDepth++) delayedCallbacks = [];
+    if (operationGroup) {
+      operationGroup.ops.push(cm.curOp);
+    } else {
+      cm.curOp.ownsGroup = operationGroup = {
+        ops: [cm.curOp],
+        delayedCallbacks: []
+      };
+    }
+  }
+
+  function fireCallbacksForOps(group) {
+    // Calls delayed callbacks and cursorActivity handlers until no
+    // new ones appear
+    var callbacks = group.delayedCallbacks, i = 0;
+    do {
+      for (; i < callbacks.length; i++)
+        callbacks[i].call(null);
+      for (var j = 0; j < group.ops.length; j++) {
+        var op = group.ops[j];
+        if (op.cursorActivityHandlers)
+          while (op.cursorActivityCalled < op.cursorActivityHandlers.length)
+            op.cursorActivityHandlers[op.cursorActivityCalled++].call(null, op.cm);
+      }
+    } while (i < callbacks.length);
   }
 
+  // Finish an operation, updating the display and signalling delayed events
   function endOperation(cm) {
-    var op = cm.curOp, doc = cm.doc, display = cm.display;
-    cm.curOp = null;
-
-    if (op.updateMaxLine) computeMaxLength(cm);
-    if (display.maxLineChanged && !cm.options.lineWrapping && display.maxLine) {
-      var width = measureLineWidth(cm, display.maxLine);
-      display.sizer.style.minWidth = Math.max(0, width + 3 + scrollerCutOff) + "px";
-      display.maxLineChanged = false;
-      var maxScrollLeft = Math.max(0, display.sizer.offsetLeft + display.sizer.offsetWidth - display.scroller.clientWidth);
-      if (maxScrollLeft < doc.scrollLeft && !op.updateScrollPos)
-        setScrollLeft(cm, Math.min(display.scroller.scrollLeft, maxScrollLeft), true);
-    }
-    var newScrollPos, updated;
-    if (op.updateScrollPos) {
-      newScrollPos = op.updateScrollPos;
-    } else if (op.selectionChanged && display.scroller.clientHeight) { // don't rescroll if not visible
-      var coords = cursorCoords(cm, doc.sel.head);
-      newScrollPos = calculateScrollPos(cm, coords.left, coords.top, coords.left, coords.bottom);
-    }
-    if (op.changes.length || newScrollPos && newScrollPos.scrollTop != null) {
-      updated = updateDisplay(cm, op.changes, newScrollPos && newScrollPos.scrollTop);
-      if (cm.display.scroller.offsetHeight) cm.doc.scrollTop = cm.display.scroller.scrollTop;
-    }
-    if (!updated && op.selectionChanged) updateSelection(cm);
-    if (op.updateScrollPos) {
-      display.scroller.scrollTop = display.scrollbarV.scrollTop = doc.scrollTop = newScrollPos.scrollTop;
-      display.scroller.scrollLeft = display.scrollbarH.scrollLeft = doc.scrollLeft = newScrollPos.scrollLeft;
-      alignHorizontally(cm);
-      if (op.scrollToPos)
-        scrollPosIntoView(cm, clipPos(cm.doc, op.scrollToPos), op.scrollToPosMargin);
-    } else if (newScrollPos) {
-      scrollCursorIntoView(cm);
+    var op = cm.curOp, group = op.ownsGroup;
+    if (!group) return;
+
+    try { fireCallbacksForOps(group); }
+    finally {
+      operationGroup = null;
+      for (var i = 0; i < group.ops.length; i++)
+        group.ops[i].cm.curOp = null;
+      endOperations(group);
     }
+  }
+
+  // The DOM updates done when an operation finishes are batched so
+  // that the minimum number of relayouts are required.
+  function endOperations(group) {
+    var ops = group.ops;
+    for (var i = 0; i < ops.length; i++) // Read DOM
+      endOperation_R1(ops[i]);
+    for (var i = 0; i < ops.length; i++) // Write DOM (maybe)
+      endOperation_W1(ops[i]);
+    for (var i = 0; i < ops.length; i++) // Read DOM
+      endOperation_R2(ops[i]);
+    for (var i = 0; i < ops.length; i++) // Write DOM (maybe)
+      endOperation_W2(ops[i]);
+    for (var i = 0; i < ops.length; i++) // Read DOM
+      endOperation_finish(ops[i]);
+  }
+
+  function endOperation_R1(op) {
+    var cm = op.cm, display = cm.display;
+    maybeClipScrollbars(cm);
+    if (op.updateMaxLine) findMaxLine(cm);
+
+    op.mustUpdate = op.viewChanged || op.forceUpdate || op.scrollTop != null ||
+      op.scrollToPos && (op.scrollToPos.from.line < display.viewFrom ||
+                         op.scrollToPos.to.line >= display.viewTo) ||
+      display.maxLineChanged && cm.options.lineWrapping;
+    op.update = op.mustUpdate &&
+      new DisplayUpdate(cm, op.mustUpdate && {top: op.scrollTop, ensure: op.scrollToPos}, op.forceUpdate);
+  }
+
+  function endOperation_W1(op) {
+    op.updatedDisplay = op.mustUpdate && updateDisplayIfNeeded(op.cm, op.update);
+  }
+
+  function endOperation_R2(op) {
+    var cm = op.cm, display = cm.display;
+    if (op.updatedDisplay) updateHeightsInViewport(cm);
+
+    op.barMeasure = measureForScrollbars(cm);
+
+    // If the max line changed since it was last measured, measure it,
+    // and ensure the document's width matches it.
+    // updateDisplay_W2 will use these properties to do the actual resizing
+    if (display.maxLineChanged && !cm.options.lineWrapping) {
+      op.adjustWidthTo = measureChar(cm, display.maxLine, display.maxLine.text.length).left + 3;
+      cm.display.sizerWidth = op.adjustWidthTo;
+      op.barMeasure.scrollWidth =
+        Math.max(display.scroller.clientWidth, display.sizer.offsetLeft + op.adjustWidthTo + scrollGap(cm) + cm.display.barWidth);
+      op.maxScrollLeft = Math.max(0, display.sizer.offsetLeft + op.adjustWidthTo - displayWidth(cm));
+    }
+
+    if (op.updatedDisplay || op.selectionChanged)
+      op.preparedSelection = display.input.prepareSelection();
+  }
+
+  function endOperation_W2(op) {
+    var cm = op.cm;
+
+    if (op.adjustWidthTo != null) {
+      cm.display.sizer.style.minWidth = op.adjustWidthTo + "px";
+      if (op.maxScrollLeft < cm.doc.scrollLeft)
+        setScrollLeft(cm, Math.min(cm.display.scroller.scrollLeft, op.maxScrollLeft), true);
+      cm.display.maxLineChanged = false;
+    }
+
+    if (op.preparedSelection)
+      cm.display.input.showSelection(op.preparedSelection);
+    if (op.updatedDisplay)
+      setDocumentHeight(cm, op.barMeasure);
+    if (op.updatedDisplay || op.startHeight != cm.doc.height)
+      updateScrollbars(cm, op.barMeasure);
+
     if (op.selectionChanged) restartBlink(cm);
 
     if (cm.state.focused && op.updateInput)
-      resetInput(cm, op.userSelChange);
+      cm.display.input.reset(op.typing);
+    if (op.focus && op.focus == activeElt()) ensureFocus(op.cm);
+  }
+
+  function endOperation_finish(op) {
+    var cm = op.cm, display = cm.display, doc = cm.doc;
 
+    if (op.updatedDisplay) postUpdateDisplay(cm, op.update);
+
+    // Abort mouse wheel delta measurement, when scrolling explicitly
+    if (display.wheelStartX != null && (op.scrollTop != null || op.scrollLeft != null || op.scrollToPos))
+      display.wheelStartX = display.wheelStartY = null;
+
+    // Propagate the scroll position to the actual DOM scroller
+    if (op.scrollTop != null && (display.scroller.scrollTop != op.scrollTop || op.forceScroll)) {
+      doc.scrollTop = Math.max(0, Math.min(display.scroller.scrollHeight - display.scroller.clientHeight, op.scrollTop));
+      display.scrollbars.setScrollTop(doc.scrollTop);
+      display.scroller.scrollTop = doc.scrollTop;
+    }
+    if (op.scrollLeft != null && (display.scroller.scrollLeft != op.scrollLeft || op.forceScroll)) {
+      doc.scrollLeft = Math.max(0, Math.min(display.scroller.scrollWidth - displayWidth(cm), op.scrollLeft));
+      display.scrollbars.setScrollLeft(doc.scrollLeft);
+      display.scroller.scrollLeft = doc.scrollLeft;
+      alignHorizontally(cm);
+    }
+    // If we need to scroll a specific position into view, do so.
+    if (op.scrollToPos) {
+      var coords = scrollPosIntoView(cm, clipPos(doc, op.scrollToPos.from),
+                                     clipPos(doc, op.scrollToPos.to), op.scrollToPos.margin);
+      if (op.scrollToPos.isCursor && cm.state.focused) maybeScrollWindow(cm, coords);
+    }
+
+    // Fire events for markers that are hidden/unidden by editing or
+    // undoing
     var hidden = op.maybeHiddenMarkers, unhidden = op.maybeUnhiddenMarkers;
     if (hidden) for (var i = 0; i < hidden.length; ++i)
       if (!hidden[i].lines.length) signal(hidden[i], "hide");
     if (unhidden) for (var i = 0; i < unhidden.length; ++i)
       if (unhidden[i].lines.length) signal(unhidden[i], "unhide");
 
-    var delayed;
-    if (!--delayedCallbackDepth) {
-      delayed = delayedCallbacks;
-      delayedCallbacks = null;
-    }
-    if (op.textChanged)
-      signal(cm, "change", cm, op.textChanged);
-    if (op.cursorActivity) signal(cm, "cursorActivity", cm);
-    if (delayed) for (var i = 0; i < delayed.length; ++i) delayed[i]();
+    if (display.wrapper.offsetHeight)
+      doc.scrollTop = cm.display.scroller.scrollTop;
+
+    // Fire change events, and delayed event handlers
+    if (op.changeObjs)
+      signal(cm, "changes", cm, op.changeObjs);
+    if (op.update)
+      op.update.finish();
   }
 
+  // Run the given function in an operation
+  function runInOp(cm, f) {
+    if (cm.curOp) return f();
+    startOperation(cm);
+    try { return f(); }
+    finally { endOperation(cm); }
+  }
   // Wraps a function in an operation. Returns the wrapped function.
-  function operation(cm1, f) {
+  function operation(cm, f) {
     return function() {
-      var cm = cm1 || this, withOp = !cm.curOp;
-      if (withOp) startOperation(cm);
-      try { var result = f.apply(cm, arguments); }
-      finally { if (withOp) endOperation(cm); }
-      return result;
+      if (cm.curOp) return f.apply(cm, arguments);
+      startOperation(cm);
+      try { return f.apply(cm, arguments); }
+      finally { endOperation(cm); }
     };
   }
-  function docOperation(f) {
+  // Used to add methods to editor and doc instances, wrapping them in
+  // operations.
+  function methodOp(f) {
     return function() {
-      var withOp = this.cm && !this.cm.curOp, result;
-      if (withOp) startOperation(this.cm);
-      try { result = f.apply(this, arguments); }
-      finally { if (withOp) endOperation(this.cm); }
-      return result;
+      if (this.curOp) return f.apply(this, arguments);
+      startOperation(this);
+      try { return f.apply(this, arguments); }
+      finally { endOperation(this); }
     };
   }
-  function runInOp(cm, f) {
-    var withOp = !cm.curOp, result;
-    if (withOp) startOperation(cm);
-    try { result = f(); }
-    finally { if (withOp) endOperation(cm); }
-    return result;
+  function docMethodOp(f) {
+    return function() {
+      var cm = this.cm;
+      if (!cm || cm.curOp) return f.apply(this, arguments);
+      startOperation(cm);
+      try { return f.apply(this, arguments); }
+      finally { endOperation(cm); }
+    };
   }
 
-  function regChange(cm, from, to, lendiff) {
-    if (from == null) from = cm.doc.first;
-    if (to == null) to = cm.doc.first + cm.doc.size;
-    cm.curOp.changes.push({from: from, to: to, diff: lendiff});
-  }
+  // VIEW TRACKING
 
-  // INPUT HANDLING
-
-  function slowPoll(cm) {
-    if (cm.display.pollingFast) return;
-    cm.display.poll.set(cm.options.pollInterval, function() {
-      readInput(cm);
-      if (cm.state.focused) slowPoll(cm);
-    });
+  // These objects are used to represent the visible (currently drawn)
+  // part of the document. A LineView may correspond to multiple
+  // logical lines, if those are connected by collapsed ranges.
+  function LineView(doc, line, lineN) {
+    // The starting line
+    this.line = line;
+    // Continuing lines, if any
+    this.rest = visualLineContinued(line);
+    // Number of logical lines in this visual line
+    this.size = this.rest ? lineNo(lst(this.rest)) - lineN + 1 : 1;
+    this.node = this.text = null;
+    this.hidden = lineIsHidden(doc, line);
   }
 
-  function fastPoll(cm) {
-    var missed = false;
-    cm.display.pollingFast = true;
-    function p() {
-      var changed = readInput(cm);
-      if (!changed && !missed) {missed = true; cm.display.poll.set(60, p);}
-      else {cm.display.pollingFast = false; slowPoll(cm);}
-    }
-    cm.display.poll.set(20, p);
-  }
-
-  // prevInput is a hack to work with IME. If we reset the textarea
-  // on every change, that breaks IME. So we look for changes
-  // compared to the previous content instead. (Modern browsers have
-  // events that indicate IME taking place, but these are not widely
-  // supported or compatible enough yet to rely on.)
-  function readInput(cm) {
-    var input = cm.display.input, prevInput = cm.display.prevInput, doc = cm.doc, sel = doc.sel;
-    if (!cm.state.focused || hasSelection(input) || isReadOnly(cm) || cm.state.disableInput) return false;
-    var text = input.value;
-    if (text == prevInput && posEq(sel.from, sel.to)) return false;
-    if (ie && !ie_lt9 && cm.display.inputHasSelection === text) {
-      resetInput(cm, true);
-      return false;
+  // Create a range of LineView objects for the given lines.
+  function buildViewArray(cm, from, to) {
+    var array = [], nextPos;
+    for (var pos = from; pos < to; pos = nextPos) {
+      var view = new LineView(cm.doc, getLine(cm.doc, pos), pos);
+      nextPos = pos + view.size;
+      array.push(view);
     }
+    return array;
+  }
 
-    var withOp = !cm.curOp;
-    if (withOp) startOperation(cm);
-    sel.shift = false;
-    var same = 0, l = Math.min(prevInput.length, text.length);
-    while (same < l && prevInput.charCodeAt(same) == text.charCodeAt(same)) ++same;
-    var from = sel.from, to = sel.to;
-    if (same < prevInput.length)
-      from = Pos(from.line, from.ch - (prevInput.length - same));
-    else if (cm.state.overwrite && posEq(from, to) && !cm.state.pasteIncoming)
-      to = Pos(to.line, Math.min(getLine(doc, to.line).text.length, to.ch + (text.length - same)));
-
-    var updateInput = cm.curOp.updateInput;
-    var changeEvent = {from: from, to: to, text: splitLines(text.slice(same)),
-                       origin: cm.state.pasteIncoming ? "paste" : "+input"};
-    makeChange(cm.doc, changeEvent, "end");
-    cm.curOp.updateInput = updateInput;
-    signalLater(cm, "inputRead", cm, changeEvent);
+  // Updates the display.view data structure for a given change to the
+  // document. From and to are in pre-change coordinates. Lendiff is
+  // the amount of lines added or subtracted by the change. This is
+  // used for changes that span multiple lines, or change the way
+  // lines are divided into visual lines. regLineChange (below)
+  // registers single-line changes.
+  function regChange(cm, from, to, lendiff) {
+    if (from == null) from = cm.doc.first;
+    if (to == null) to = cm.doc.first + cm.doc.size;
+    if (!lendiff) lendiff = 0;
 
-    if (text.length > 1000 || text.indexOf("\n") > -1) input.value = cm.display.prevInput = "";
-    else cm.display.prevInput = text;
-    if (withOp) endOperation(cm);
-    cm.state.pasteIncoming = false;
-    return true;
-  }
+    var display = cm.display;
+    if (lendiff && to < display.viewTo &&
+        (display.updateLineNumbers == null || display.updateLineNumbers > from))
+      display.updateLineNumbers = from;
+
+    cm.curOp.viewChanged = true;
+
+    if (from >= display.viewTo) { // Change after
+      if (sawCollapsedSpans && visualLineNo(cm.doc, from) < display.viewTo)
+        resetView(cm);
+    } else if (to <= display.viewFrom) { // Change before
+      if (sawCollapsedSpans && visualLineEndNo(cm.doc, to + lendiff) > display.viewFrom) {
+        resetView(cm);
+      } else {
+        display.viewFrom += lendiff;
+        display.viewTo += lendiff;
+      }
+    } else if (from <= display.viewFrom && to >= display.viewTo) { // Full overlap
+      resetView(cm);
+    } else if (from <= display.viewFrom) { // Top overlap
+      var cut = viewCuttingPoint(cm, to, to + lendiff, 1);
+      if (cut) {
+        display.view = display.view.slice(cut.index);
+        display.viewFrom = cut.lineN;
+        display.viewTo += lendiff;
+      } else {
+        resetView(cm);
+      }
+    } else if (to >= display.viewTo) { // Bottom overlap
+      var cut = viewCuttingPoint(cm, from, from, -1);
+      if (cut) {
+        display.view = display.view.slice(0, cut.index);
+        display.viewTo = cut.lineN;
+      } else {
+        resetView(cm);
+      }
+    } else { // Gap in the middle
+      var cutTop = viewCuttingPoint(cm, from, from, -1);
+      var cutBot = viewCuttingPoint(cm, to, to + lendiff, 1);
+      if (cutTop && cutBot) {
+        display.view = display.view.slice(0, cutTop.index)
+          .concat(buildViewArray(cm, cutTop.lineN, cutBot.lineN))
+          .concat(display.view.slice(cutBot.index));
+        display.viewTo += lendiff;
+      } else {
+        resetView(cm);
+      }
+    }
 
-  function resetInput(cm, user) {
-    var minimal, selected, doc = cm.doc;
-    if (!posEq(doc.sel.from, doc.sel.to)) {
-      cm.display.prevInput = "";
-      minimal = hasCopyEvent &&
-        (doc.sel.to.line - doc.sel.from.line > 100 || (selected = cm.getSelection()).length > 1000);
-      var content = minimal ? "-" : selected || cm.getSelection();
-      cm.display.input.value = content;
-      if (cm.state.focused) selectInput(cm.display.input);
-      if (ie && !ie_lt9) cm.display.inputHasSelection = content;
-    } else if (user) {
-      cm.display.prevInput = cm.display.input.value = "";
-      if (ie && !ie_lt9) cm.display.inputHasSelection = null;
+    var ext = display.externalMeasured;
+    if (ext) {
+      if (to < ext.lineN)
+        ext.lineN += lendiff;
+      else if (from < ext.lineN + ext.size)
+        display.externalMeasured = null;
+    }
+  }
+
+  // Register a change to a single line. Type must be one of "text",
+  // "gutter", "class", "widget"
+  function regLineChange(cm, line, type) {
+    cm.curOp.viewChanged = true;
+    var display = cm.display, ext = cm.display.externalMeasured;
+    if (ext && line >= ext.lineN && line < ext.lineN + ext.size)
+      display.externalMeasured = null;
+
+    if (line < display.viewFrom || line >= display.viewTo) return;
+    var lineView = display.view[findViewIndex(cm, line)];
+    if (lineView.node == null) return;
+    var arr = lineView.changes || (lineView.changes = []);
+    if (indexOf(arr, type) == -1) arr.push(type);
+  }
+
+  // Clear the view.
+  function resetView(cm) {
+    cm.display.viewFrom = cm.display.viewTo = cm.doc.first;
+    cm.display.view = [];
+    cm.display.viewOffset = 0;
+  }
+
+  // Find the view element corresponding to a given line. Return null
+  // when the line isn't visible.
+  function findViewIndex(cm, n) {
+    if (n >= cm.display.viewTo) return null;
+    n -= cm.display.viewFrom;
+    if (n < 0) return null;
+    var view = cm.display.view;
+    for (var i = 0; i < view.length; i++) {
+      n -= view[i].size;
+      if (n < 0) return i;
+    }
+  }
+
+  function viewCuttingPoint(cm, oldN, newN, dir) {
+    var index = findViewIndex(cm, oldN), diff, view = cm.display.view;
+    if (!sawCollapsedSpans || newN == cm.doc.first + cm.doc.size)
+      return {index: index, lineN: newN};
+    for (var i = 0, n = cm.display.viewFrom; i < index; i++)
+      n += view[i].size;
+    if (n != oldN) {
+      if (dir > 0) {
+        if (index == view.length - 1) return null;
+        diff = (n + view[index].size) - oldN;
+        index++;
+      } else {
+        diff = n - oldN;
+      }
+      oldN += diff; newN += diff;
+    }
+    while (visualLineNo(cm.doc, newN) != newN) {
+      if (index == (dir < 0 ? 0 : view.length - 1)) return null;
+      newN += dir * view[index - (dir < 0 ? 1 : 0)].size;
+      index += dir;
     }
-    cm.display.inaccurateSelection = minimal;
+    return {index: index, lineN: newN};
   }
 
-  function focusInput(cm) {
-    if (cm.options.readOnly != "nocursor" && (!mobile || document.activeElement != cm.display.input))
-      cm.display.input.focus();
+  // Force the view to cover a given range, adding empty view element
+  // or clipping off existing ones as needed.
+  function adjustView(cm, from, to) {
+    var display = cm.display, view = display.view;
+    if (view.length == 0 || from >= display.viewTo || to <= display.viewFrom) {
+      display.view = buildViewArray(cm, from, to);
+      display.viewFrom = from;
+    } else {
+      if (display.viewFrom > from)
+        display.view = buildViewArray(cm, from, display.viewFrom).concat(display.view);
+      else if (display.viewFrom < from)
+        display.view = display.view.slice(findViewIndex(cm, from));
+      display.viewFrom = from;
+      if (display.viewTo < to)
+        display.view = display.view.concat(buildViewArray(cm, display.viewTo, to));
+      else if (display.viewTo > to)
+        display.view = display.view.slice(0, findViewIndex(cm, to));
+    }
+    display.viewTo = to;
   }
 
-  function isReadOnly(cm) {
-    return cm.options.readOnly || cm.doc.cantEdit;
+  // Count the number of lines in the view whose DOM representation is
+  // out of date (or nonexistent).
+  function countDirtyView(cm) {
+    var view = cm.display.view, dirty = 0;
+    for (var i = 0; i < view.length; i++) {
+      var lineView = view[i];
+      if (!lineView.hidden && (!lineView.node || lineView.changes)) ++dirty;
+    }
+    return dirty;
   }
 
   // EVENT HANDLERS
 
+  // Attach the necessary event handlers when initializing the editor
   function registerEventHandlers(cm) {
     var d = cm.display;
     on(d.scroller, "mousedown", operation(cm, onMouseDown));
-    if (ie)
+    // Older IE's will not fire a second mousedown for a double click
+    if (ie && ie_version < 11)
       on(d.scroller, "dblclick", operation(cm, function(e) {
         if (signalDOMEvent(cm, e)) return;
         var pos = posFromMouse(cm, e);
         if (!pos || clickInGutter(cm, e) || eventInWidget(cm.display, e)) return;
         e_preventDefault(e);
-        var word = findWordAt(getLine(cm.doc, pos.line).text, pos);
-        extendSelection(cm.doc, word.from, word.to);
+        var word = cm.findWordAt(pos);
+        extendSelection(cm.doc, word.anchor, word.head);
       }));
     else
       on(d.scroller, "dblclick", function(e) { signalDOMEvent(cm, e) || e_preventDefault(e); });
-    on(d.lineSpace, "selectstart", function(e) {
-      if (!eventInWidget(d, e)) e_preventDefault(e);
-    });
-    // Gecko browsers fire contextmenu *after* opening the menu, at
+    // Some browsers fire contextmenu *after* opening the menu, at
     // which point we can't mess with it anymore. Context menu is
-    // handled in onMouseDown for Gecko.
-    if (!captureMiddleClick) on(d.scroller, "contextmenu", function(e) {onContextMenu(cm, e);});
+    // handled in onMouseDown for these browsers.
+    if (!captureRightClick) on(d.scroller, "contextmenu", function(e) {onContextMenu(cm, e);});
+
+    // Used to suppress mouse event handling when a touch happens
+    var touchFinished, prevTouch = {end: 0};
+    function finishTouch() {
+      if (d.activeTouch) {
+        touchFinished = setTimeout(function() {d.activeTouch = null;}, 1000);
+        prevTouch = d.activeTouch;
+        prevTouch.end = +new Date;
+      }
+    };
+    function isMouseLikeTouchEvent(e) {
+      if (e.touches.length != 1) return false;
+      var touch = e.touches[0];
+      return touch.radiusX <= 1 && touch.radiusY <= 1;
+    }
+    function farAway(touch, other) {
+      if (other.left == null) return true;
+      var dx = other.left - touch.left, dy = other.top - touch.top;
+      return dx * dx + dy * dy > 20 * 20;
+    }
+    on(d.scroller, "touchstart", function(e) {
+      if (!isMouseLikeTouchEvent(e)) {
+        clearTimeout(touchFinished);
+        var now = +new Date;
+        d.activeTouch = {start: now, moved: false,
+                         prev: now - prevTouch.end <= 300 ? prevTouch : null};
+        if (e.touches.length == 1) {
+          d.activeTouch.left = e.touches[0].pageX;
+          d.activeTouch.top = e.touches[0].pageY;
+        }
+      }
+    });
+    on(d.scroller, "touchmove", function() {
+      if (d.activeTouch) d.activeTouch.moved = true;
+    });
+    on(d.scroller, "touchend", function(e) {
+      var touch = d.activeTouch;
+      if (touch && !eventInWidget(d, e) && touch.left != null &&
+          !touch.moved && new Date - touch.start < 300) {
+        var pos = cm.coordsChar(d.activeTouch, "page"), range;
+        if (!touch.prev || farAway(touch, touch.prev)) // Single tap
+          range = new Range(pos, pos);
+        else if (!touch.prev.prev || farAway(touch, touch.prev.prev)) // Double tap
+          range = cm.findWordAt(pos);
+        else // Triple tap
+          range = new Range(Pos(pos.line, 0), clipPos(cm.doc, Pos(pos.line + 1, 0)));
+        cm.setSelection(range.anchor, range.head);
+        cm.focus();
+        e_preventDefault(e);
+      }
+      finishTouch();
+    });
+    on(d.scroller, "touchcancel", finishTouch);
 
+    // Sync scrolling between fake scrollbars and real scrollable
+    // area, ensure viewport is updated when scrolling.
     on(d.scroller, "scroll", function() {
       if (d.scroller.clientHeight) {
         setScrollTop(cm, d.scroller.scrollTop);
@@ -1523,119 +3436,100 @@ window.CodeMirror = (function() {
         signal(cm, "scroll", cm);
       }
     });
-    on(d.scrollbarV, "scroll", function() {
-      if (d.scroller.clientHeight) setScrollTop(cm, d.scrollbarV.scrollTop);
-    });
-    on(d.scrollbarH, "scroll", function() {
-      if (d.scroller.clientHeight) setScrollLeft(cm, d.scrollbarH.scrollLeft);
-    });
 
+    // Listen to wheel events in order to try and update the viewport on time.
     on(d.scroller, "mousewheel", function(e){onScrollWheel(cm, e);});
     on(d.scroller, "DOMMouseScroll", function(e){onScrollWheel(cm, e);});
 
-    function reFocus() { if (cm.state.focused) setTimeout(bind(focusInput, cm), 0); }
-    on(d.scrollbarH, "mousedown", reFocus);
-    on(d.scrollbarV, "mousedown", reFocus);
     // Prevent wrapper from ever scrolling
     on(d.wrapper, "scroll", function() { d.wrapper.scrollTop = d.wrapper.scrollLeft = 0; });
 
-    var resizeTimer;
-    function onResize() {
-      if (resizeTimer == null) resizeTimer = setTimeout(function() {
-        resizeTimer = null;
-        // Might be a text scaling operation, clear size caches.
-        d.cachedCharWidth = d.cachedTextHeight = knownScrollbarWidth = null;
-        clearCaches(cm);
-        runInOp(cm, bind(regChange, cm));
-      }, 100);
-    }
-    on(window, "resize", onResize);
-    // Above handler holds on to the editor and its data structures.
-    // Here we poll to unregister it when the editor is no longer in
-    // the document, so that it can be garbage-collected.
-    function unregister() {
-      for (var p = d.wrapper.parentNode; p && p != document.body; p = p.parentNode) {}
-      if (p) setTimeout(unregister, 5000);
-      else off(window, "resize", onResize);
-    }
-    setTimeout(unregister, 5000);
-
-    on(d.input, "keyup", operation(cm, function(e) {
-      if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
-      if (e.keyCode == 16) cm.doc.sel.shift = false;
-    }));
-    on(d.input, "input", bind(fastPoll, cm));
-    on(d.input, "keydown", operation(cm, onKeyDown));
-    on(d.input, "keypress", operation(cm, onKeyPress));
-    on(d.input, "focus", bind(onFocus, cm));
-    on(d.input, "blur", bind(onBlur, cm));
-
-    function drag_(e) {
-      if (signalDOMEvent(cm, e) || cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))) return;
-      e_stop(e);
-    }
-    if (cm.options.dragDrop) {
-      on(d.scroller, "dragstart", function(e){onDragStart(cm, e);});
-      on(d.scroller, "dragenter", drag_);
-      on(d.scroller, "dragover", drag_);
-      on(d.scroller, "drop", operation(cm, onDrop));
-    }
-    on(d.scroller, "paste", function(e){
-      if (eventInWidget(d, e)) return;
-      focusInput(cm);
-      fastPoll(cm);
-    });
-    on(d.input, "paste", function() {
-      cm.state.pasteIncoming = true;
-      fastPoll(cm);
-    });
+    d.dragFunctions = {
+      enter: function(e) {if (!signalDOMEvent(cm, e)) e_stop(e);},
+      over: function(e) {if (!signalDOMEvent(cm, e)) { onDragOver(cm, e); e_stop(e); }},
+      start: function(e){onDragStart(cm, e);},
+      drop: operation(cm, onDrop),
+      leave: function() {clearDragCursor(cm);}
+    };
 
-    function prepareCopy() {
-      if (d.inaccurateSelection) {
-        d.prevInput = "";
-        d.inaccurateSelection = false;
-        d.input.value = cm.getSelection();
-        selectInput(d.input);
-      }
+    var inp = d.input.getField();
+    on(inp, "keyup", function(e) { onKeyUp.call(cm, e); });
+    on(inp, "keydown", operation(cm, onKeyDown));
+    on(inp, "keypress", operation(cm, onKeyPress));
+    on(inp, "focus", bind(onFocus, cm));
+    on(inp, "blur", bind(onBlur, cm));
+  }
+
+  function dragDropChanged(cm, value, old) {
+    var wasOn = old && old != CodeMirror.Init;
+    if (!value != !wasOn) {
+      var funcs = cm.display.dragFunctions;
+      var toggle = value ? on : off;
+      toggle(cm.display.scroller, "dragstart", funcs.start);
+      toggle(cm.display.scroller, "dragenter", funcs.enter);
+      toggle(cm.display.scroller, "dragover", funcs.over);
+      toggle(cm.display.scroller, "dragleave", funcs.leave);
+      toggle(cm.display.scroller, "drop", funcs.drop);
     }
-    on(d.input, "cut", prepareCopy);
-    on(d.input, "copy", prepareCopy);
+  }
 
-    // Needed to handle Tab key in KHTML
-    if (khtml) on(d.sizer, "mouseup", function() {
-        if (document.activeElement == d.input) d.input.blur();
-        focusInput(cm);
-    });
+  // Called when the window resizes
+  function onResize(cm) {
+    var d = cm.display;
+    if (d.lastWrapHeight == d.wrapper.clientHeight && d.lastWrapWidth == d.wrapper.clientWidth)
+      return;
+    // Might be a text scaling operation, clear size caches.
+    d.cachedCharWidth = d.cachedTextHeight = d.cachedPaddingH = null;
+    d.scrollbarsClipped = false;
+    cm.setSize();
   }
 
+  // MOUSE EVENTS
+
+  // Return true when the given mouse event happened in a widget
   function eventInWidget(display, e) {
     for (var n = e_target(e); n != display.wrapper; n = n.parentNode) {
-      if (!n || n.ignoreEvents || n.parentNode == display.sizer && n != display.mover) return true;
+      if (!n || (n.nodeType == 1 && n.getAttribute("cm-ignore-events") == "true") ||
+          (n.parentNode == display.sizer && n != display.mover))
+        return true;
     }
   }
 
-  function posFromMouse(cm, e, liberal) {
+  // Given a mouse event, find the corresponding position. If liberal
+  // is false, it checks whether a gutter or scrollbar was clicked,
+  // and returns null if it was. forRect is used by rectangular
+  // selections, and tries to estimate a character position even for
+  // coordinates beyond the right of the text.
+  function posFromMouse(cm, e, liberal, forRect) {
     var display = cm.display;
-    if (!liberal) {
-      var target = e_target(e);
-      if (target == display.scrollbarH || target == display.scrollbarH.firstChild ||
-          target == display.scrollbarV || target == display.scrollbarV.firstChild ||
-          target == display.scrollbarFiller || target == display.gutterFiller) return null;
-    }
-    var x, y, space = getRect(display.lineSpace);
+    if (!liberal && e_target(e).getAttribute("cm-not-content") == "true") return null;
+
+    var x, y, space = display.lineSpace.getBoundingClientRect();
     // Fails unpredictably on IE[67] when mouse is dragged around quickly.
-    try { x = e.clientX; y = e.clientY; } catch (e) { return null; }
-    return coordsChar(cm, x - space.left, y - space.top);
+    try { x = e.clientX - space.left; y = e.clientY - space.top; }
+    catch (e) { return null; }
+    var coords = coordsChar(cm, x, y), line;
+    if (forRect && coords.xRel == 1 && (line = getLine(cm.doc, coords.line).text).length == coords.ch) {
+      var colDiff = countColumn(line, line.length, cm.options.tabSize) - line.length;
+      coords = Pos(coords.line, Math.max(0, Math.round((x - paddingH(cm.display).left) / charWidth(cm.display)) - colDiff));
+    }
+    return coords;
   }
 
-  var lastClick, lastDoubleClick;
+  // A mouse down can be a single click, double click, triple click,
+  // start of selection drag, start of text drag, new cursor
+  // (ctrl-click), rectangle drag (alt-drag), or xwin
+  // middle-click-paste. Or it might be a click on something we should
+  // not interfere with, such as a scrollbar or widget.
   function onMouseDown(e) {
-    if (signalDOMEvent(this, e)) return;
-    var cm = this, display = cm.display, doc = cm.doc, sel = doc.sel;
-    sel.shift = e.shiftKey;
+    var cm = this, display = cm.display;
+    if (display.activeTouch && display.input.supportsTouch() || signalDOMEvent(cm, e)) return;
+    display.shift = e.shiftKey;
 
     if (eventInWidget(display, e)) {
       if (!webkit) {
+        // Briefly turn off draggability, to allow widgets to do
+        // normal dragging things.
         display.scroller.draggable = false;
         setTimeout(function(){display.scroller.draggable = true;}, 100);
       }
@@ -1643,88 +3537,184 @@ window.CodeMirror = (function() {
     }
     if (clickInGutter(cm, e)) return;
     var start = posFromMouse(cm, e);
+    window.focus();
 
     switch (e_button(e)) {
-    case 3:
-      if (captureMiddleClick) onContextMenu.call(cm, cm, e);
-      return;
+    case 1:
+      // #3261: make sure, that we're not starting a second selection
+      if (cm.state.selectingText)
+        cm.state.selectingText(e);
+      else if (start)
+        leftButtonDown(cm, e, start);
+      else if (e_target(e) == display.scroller)
+        e_preventDefault(e);
+      break;
     case 2:
+      if (webkit) cm.state.lastMiddleDown = +new Date;
       if (start) extendSelection(cm.doc, start);
-      setTimeout(bind(focusInput, cm), 20);
+      setTimeout(function() {display.input.focus();}, 20);
       e_preventDefault(e);
-      return;
+      break;
+    case 3:
+      if (captureRightClick) onContextMenu(cm, e);
+      else delayBlurEvent(cm);
+      break;
     }
-    // For button 1, if it was clicked inside the editor
-    // (posFromMouse returning non-null), we have to adjust the
-    // selection.
-    if (!start) {if (e_target(e) == display.scroller) e_preventDefault(e); return;}
+  }
 
-    if (!cm.state.focused) onFocus(cm);
+  var lastClick, lastDoubleClick;
+  function leftButtonDown(cm, e, start) {
+    if (ie) setTimeout(bind(ensureFocus, cm), 0);
+    else cm.curOp.focus = activeElt();
 
-    var now = +new Date, type = "single";
-    if (lastDoubleClick && lastDoubleClick.time > now - 400 && posEq(lastDoubleClick.pos, start)) {
+    var now = +new Date, type;
+    if (lastDoubleClick && lastDoubleClick.time > now - 400 && cmp(lastDoubleClick.pos, start) == 0) {
       type = "triple";
-      e_preventDefault(e);
-      setTimeout(bind(focusInput, cm), 20);
-      selectLine(cm, start.line);
-    } else if (lastClick && lastClick.time > now - 400 && posEq(lastClick.pos, start)) {
+    } else if (lastClick && lastClick.time > now - 400 && cmp(lastClick.pos, start) == 0) {
       type = "double";
       lastDoubleClick = {time: now, pos: start};
-      e_preventDefault(e);
-      var word = findWordAt(getLine(doc, start.line).text, start);
-      extendSelection(cm.doc, word.from, word.to);
-    } else { lastClick = {time: now, pos: start}; }
-
-    var last = start;
-    if (cm.options.dragDrop && dragAndDrop && !isReadOnly(cm) && !posEq(sel.from, sel.to) &&
-        !posLess(start, sel.from) && !posLess(sel.to, start) && type == "single") {
-      var dragEnd = operation(cm, function(e2) {
-        if (webkit) display.scroller.draggable = false;
-        cm.state.draggingText = false;
-        off(document, "mouseup", dragEnd);
-        off(display.scroller, "drop", dragEnd);
-        if (Math.abs(e.clientX - e2.clientX) + Math.abs(e.clientY - e2.clientY) < 10) {
-          e_preventDefault(e2);
-          extendSelection(cm.doc, start);
-          focusInput(cm);
-        }
-      });
-      // Let the drag handler handle this.
-      if (webkit) display.scroller.draggable = true;
-      cm.state.draggingText = dragEnd;
-      // IE's approach to draggable
-      if (display.scroller.dragDrop) display.scroller.dragDrop();
-      on(document, "mouseup", dragEnd);
-      on(display.scroller, "drop", dragEnd);
-      return;
+    } else {
+      type = "single";
+      lastClick = {time: now, pos: start};
     }
-    e_preventDefault(e);
-    if (type == "single") extendSelection(cm.doc, clipPos(doc, start));
 
-    var startstart = sel.from, startend = sel.to, lastPos = start;
-
-    function doSelect(cur) {
-      if (posEq(lastPos, cur)) return;
-      lastPos = cur;
-
-      if (type == "single") {
-        extendSelection(cm.doc, clipPos(doc, start), cur);
-        return;
+    var sel = cm.doc.sel, modifier = mac ? e.metaKey : e.ctrlKey, contained;
+    if (cm.options.dragDrop && dragAndDrop && !isReadOnly(cm) &&
+        type == "single" && (contained = sel.contains(start)) > -1 &&
+        (cmp((contained = sel.ranges[contained]).from(), start) < 0 || start.xRel > 0) &&
+        (cmp(contained.to(), start) > 0 || start.xRel < 0))
+      leftButtonStartDrag(cm, e, start, modifier);
+    else
+      leftButtonSelect(cm, e, start, type, modifier);
+  }
+
+  // Start a text drag. When it ends, see if any dragging actually
+  // happen, and treat as a click if it didn't.
+  function leftButtonStartDrag(cm, e, start, modifier) {
+    var display = cm.display, startTime = +new Date;
+    var dragEnd = operation(cm, function(e2) {
+      if (webkit) display.scroller.draggable = false;
+      cm.state.draggingText = false;
+      off(document, "mouseup", dragEnd);
+      off(display.scroller, "drop", dragEnd);
+      if (Math.abs(e.clientX - e2.clientX) + Math.abs(e.clientY - e2.clientY) < 10) {
+        e_preventDefault(e2);
+        if (!modifier && +new Date - 200 < startTime)
+          extendSelection(cm.doc, start);
+        // Work around unexplainable focus problem in IE9 (#2127) and Chrome (#3081)
+        if (webkit || ie && ie_version == 9)
+          setTimeout(function() {document.body.focus(); display.input.focus();}, 20);
+        else
+          display.input.focus();
       }
+    });
+    // Let the drag handler handle this.
+    if (webkit) display.scroller.draggable = true;
+    cm.state.draggingText = dragEnd;
+    // IE's approach to draggable
+    if (display.scroller.dragDrop) display.scroller.dragDrop();
+    on(document, "mouseup", dragEnd);
+    on(display.scroller, "drop", dragEnd);
+  }
+
+  // Normal selection, as opposed to text dragging.
+  function leftButtonSelect(cm, e, start, type, addNew) {
+    var display = cm.display, doc = cm.doc;
+    e_preventDefault(e);
 
-      startstart = clipPos(doc, startstart);
-      startend = clipPos(doc, startend);
-      if (type == "double") {
-        var word = findWordAt(getLine(doc, cur.line).text, cur);
-        if (posLess(cur, startstart)) extendSelection(cm.doc, word.from, startend);
-        else extendSelection(cm.doc, startstart, word.to);
-      } else if (type == "triple") {
-        if (posLess(cur, startstart)) extendSelection(cm.doc, startend, clipPos(doc, Pos(cur.line, 0)));
-        else extendSelection(cm.doc, startstart, clipPos(doc, Pos(cur.line + 1, 0)));
+    var ourRange, ourIndex, startSel = doc.sel, ranges = startSel.ranges;
+    if (addNew && !e.shiftKey) {
+      ourIndex = doc.sel.contains(start);
+      if (ourIndex > -1)
+        ourRange = ranges[ourIndex];
+      else
+        ourRange = new Range(start, start);
+    } else {
+      ourRange = doc.sel.primary();
+      ourIndex = doc.sel.primIndex;
+    }
+
+    if (e.altKey) {
+      type = "rect";
+      if (!addNew) ourRange = new Range(start, start);
+      start = posFromMouse(cm, e, true, true);
+      ourIndex = -1;
+    } else if (type == "double") {
+      var word = cm.findWordAt(start);
+      if (cm.display.shift || doc.extend)
+        ourRange = extendRange(doc, ourRange, word.anchor, word.head);
+      else
+        ourRange = word;
+    } else if (type == "triple") {
+      var line = new Range(Pos(start.line, 0), clipPos(doc, Pos(start.line + 1, 0)));
+      if (cm.display.shift || doc.extend)
+        ourRange = extendRange(doc, ourRange, line.anchor, line.head);
+      else
+        ourRange = line;
+    } else {
+      ourRange = extendRange(doc, ourRange, start);
+    }
+
+    if (!addNew) {
+      ourIndex = 0;
+      setSelection(doc, new Selection([ourRange], 0), sel_mouse);
+      startSel = doc.sel;
+    } else if (ourIndex == -1) {
+      ourIndex = ranges.length;
+      setSelection(doc, normalizeSelection(ranges.concat([ourRange]), ourIndex),
+                   {scroll: false, origin: "*mouse"});
+    } else if (ranges.length > 1 && ranges[ourIndex].empty() && type == "single" && !e.shiftKey) {
+      setSelection(doc, normalizeSelection(ranges.slice(0, ourIndex).concat(ranges.slice(ourIndex + 1)), 0));
+      startSel = doc.sel;
+    } else {
+      replaceOneSelection(doc, ourIndex, ourRange, sel_mouse);
+    }
+
+    var lastPos = start;
+    function extendTo(pos) {
+      if (cmp(lastPos, pos) == 0) return;
+      lastPos = pos;
+
+      if (type == "rect") {
+        var ranges = [], tabSize = cm.options.tabSize;
+        var startCol = countColumn(getLine(doc, start.line).text, start.ch, tabSize);
+        var posCol = countColumn(getLine(doc, pos.line).text, pos.ch, tabSize);
+        var left = Math.min(startCol, posCol), right = Math.max(startCol, posCol);
+        for (var line = Math.min(start.line, pos.line), end = Math.min(cm.lastLine(), Math.max(start.line, pos.line));
+             line <= end; line++) {
+          var text = getLine(doc, line).text, leftPos = findColumn(text, left, tabSize);
+          if (left == right)
+            ranges.push(new Range(Pos(line, leftPos), Pos(line, leftPos)));
+          else if (text.length > leftPos)
+            ranges.push(new Range(Pos(line, leftPos), Pos(line, findColumn(text, right, tabSize))));
+        }
+        if (!ranges.length) ranges.push(new Range(start, start));
+        setSelection(doc, normalizeSelection(startSel.ranges.slice(0, ourIndex).concat(ranges), ourIndex),
+                     {origin: "*mouse", scroll: false});
+        cm.scrollIntoView(pos);
+      } else {
+        var oldRange = ourRange;
+        var anchor = oldRange.anchor, head = pos;
+        if (type != "single") {
+          if (type == "double")
+            var range = cm.findWordAt(pos);
+          else
+            var range = new Range(Pos(pos.line, 0), clipPos(doc, Pos(pos.line + 1, 0)));
+          if (cmp(range.anchor, anchor) > 0) {
+            head = range.head;
+            anchor = minPos(oldRange.from(), range.anchor);
+          } else {
+            head = range.anchor;
+            anchor = maxPos(oldRange.to(), range.head);
+          }
+        }
+        var ranges = startSel.ranges.slice(0);
+        ranges[ourIndex] = new Range(clipPos(doc, anchor), head);
+        setSelection(doc, normalizeSelection(ranges, ourIndex), sel_mouse);
       }
     }
 
-    var editorSize = getRect(display.wrapper);
+    var editorSize = display.wrapper.getBoundingClientRect();
     // Used to ensure timeout re-tries don't fire when another extend
     // happened in the meantime (clearTimeout isn't reliable -- at
     // least on Chrome, the timeouts still happen even when cleared,
@@ -1733,12 +3723,11 @@ window.CodeMirror = (function() {
 
     function extend(e) {
       var curCount = ++counter;
-      var cur = posFromMouse(cm, e, true);
+      var cur = posFromMouse(cm, e, true, type == "rect");
       if (!cur) return;
-      if (!posEq(cur, last)) {
-        if (!cm.state.focused) onFocus(cm);
-        last = cur;
-        doSelect(cur);
+      if (cmp(cur, lastPos) != 0) {
+        cm.curOp.focus = activeElt();
+        extendTo(cur);
         var visible = visibleLines(display, doc);
         if (cur.line >= visible.to || cur.line < visible.from)
           setTimeout(operation(cm, function(){if (counter == curCount) extend(e);}), 150);
@@ -1753,45 +3742,52 @@ window.CodeMirror = (function() {
     }
 
     function done(e) {
+      cm.state.selectingText = false;
       counter = Infinity;
       e_preventDefault(e);
-      focusInput(cm);
+      display.input.focus();
       off(document, "mousemove", move);
       off(document, "mouseup", up);
+      doc.history.lastSelOrigin = null;
     }
 
     var move = operation(cm, function(e) {
-      if (!ie && !e_button(e)) done(e);
+      if (!e_button(e)) done(e);
       else extend(e);
     });
     var up = operation(cm, done);
+    cm.state.selectingText = up;
     on(document, "mousemove", move);
     on(document, "mouseup", up);
   }
 
-  function clickInGutter(cm, e) {
-    var display = cm.display;
+  // Determines whether an event happened in the gutter, and fires the
+  // handlers for the corresponding event.
+  function gutterEvent(cm, e, type, prevent, signalfn) {
     try { var mX = e.clientX, mY = e.clientY; }
     catch(e) { return false; }
+    if (mX >= Math.floor(cm.display.gutters.getBoundingClientRect().right)) return false;
+    if (prevent) e_preventDefault(e);
 
-    if (mX >= Math.floor(getRect(display.gutters).right)) return false;
-    e_preventDefault(e);
-    if (!hasHandler(cm, "gutterClick")) return true;
+    var display = cm.display;
+    var lineBox = display.lineDiv.getBoundingClientRect();
 
-    var lineBox = getRect(display.lineDiv);
-    if (mY > lineBox.bottom) return true;
+    if (mY > lineBox.bottom || !hasHandler(cm, type)) return e_defaultPrevented(e);
     mY -= lineBox.top - display.viewOffset;
 
     for (var i = 0; i < cm.options.gutters.length; ++i) {
       var g = display.gutters.childNodes[i];
-      if (g && getRect(g).right >= mX) {
+      if (g && g.getBoundingClientRect().right >= mX) {
         var line = lineAtHeight(cm.doc, mY);
         var gutter = cm.options.gutters[i];
-        signalLater(cm, "gutterClick", cm, line, gutter, e);
-        break;
+        signalfn(cm, type, cm, line, gutter, e);
+        return e_defaultPrevented(e);
       }
     }
-    return true;
+  }
+
+  function clickInGutter(cm, e) {
+    return gutterEvent(cm, e, "gutterClick", true, signalLater);
   }
 
   // Kludge to work around strange IE behavior where it'll sometimes
@@ -1800,43 +3796,51 @@ window.CodeMirror = (function() {
 
   function onDrop(e) {
     var cm = this;
-    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e) || (cm.options.onDragEvent && cm.options.onDragEvent(cm, addStop(e))))
+    clearDragCursor(cm);
+    if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e))
       return;
     e_preventDefault(e);
     if (ie) lastDrop = +new Date;
     var pos = posFromMouse(cm, e, true), files = e.dataTransfer.files;
     if (!pos || isReadOnly(cm)) return;
+    // Might be a file drop, in which case we simply extract the text
+    // and insert it.
     if (files && files.length && window.FileReader && window.File) {
       var n = files.length, text = Array(n), read = 0;
       var loadFile = function(file, i) {
         var reader = new FileReader;
-        reader.onload = function() {
+        reader.onload = operation(cm, function() {
           text[i] = reader.result;
           if (++read == n) {
             pos = clipPos(cm.doc, pos);
-            makeChange(cm.doc, {from: pos, to: pos, text: splitLines(text.join("\n")), origin: "paste"}, "around");
+            var change = {from: pos, to: pos,
+                          text: cm.doc.splitLines(text.join(cm.doc.lineSeparator())),
+                          origin: "paste"};
+            makeChange(cm.doc, change);
+            setSelectionReplaceHistory(cm.doc, simpleSelection(pos, changeEnd(change)));
           }
-        };
+        });
         reader.readAsText(file);
       };
       for (var i = 0; i < n; ++i) loadFile(files[i], i);
-    } else {
+    } else { // Normal drop
       // Don't do a replace if the drop happened inside of the selected text.
-      if (cm.state.draggingText && !(posLess(pos, cm.doc.sel.from) || posLess(cm.doc.sel.to, pos))) {
+      if (cm.state.draggingText && cm.doc.sel.contains(pos) > -1) {
         cm.state.draggingText(e);
         // Ensure the editor is re-focused
-        setTimeout(bind(focusInput, cm), 20);
+        setTimeout(function() {cm.display.input.focus();}, 20);
         return;
       }
       try {
         var text = e.dataTransfer.getData("Text");
         if (text) {
-          var curFrom = cm.doc.sel.from, curTo = cm.doc.sel.to;
-          setSelection(cm.doc, pos, pos);
-          if (cm.state.draggingText) replaceRange(cm.doc, "", curFrom, curTo, "paste");
-          cm.replaceSelection(text, null, "paste");
-          focusInput(cm);
-          onFocus(cm);
+          if (cm.state.draggingText && !(mac ? e.altKey : e.ctrlKey))
+            var selected = cm.listSelections();
+          setSelectionNoUndo(cm.doc, simpleSelection(pos, pos));
+          if (selected) for (var i = 0; i < selected.length; ++i)
+            replaceRange(cm.doc, "", selected[i].anchor, selected[i].head, "drag");
+          cm.replaceSelection(text, "around", "paste");
+          cm.display.input.focus();
         }
       }
       catch(e){}
@@ -1847,40 +3851,65 @@ window.CodeMirror = (function() {
     if (ie && (!cm.state.draggingText || +new Date - lastDrop < 100)) { e_stop(e); return; }
     if (signalDOMEvent(cm, e) || eventInWidget(cm.display, e)) return;
 
-    var txt = cm.getSelection();
-    e.dataTransfer.setData("Text", txt);
+    e.dataTransfer.setData("Text", cm.getSelection());
 
     // Use dummy image instead of default browsers image.
     // Recent Safari (~6.0.2) have a tendency to segfault when this happens, so we don't do it there.
     if (e.dataTransfer.setDragImage && !safari) {
       var img = elt("img", null, null, "position: fixed; left: 0; top: 0;");
-      if (opera) {
+      img.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
+      if (presto) {
         img.width = img.height = 1;
         cm.display.wrapper.appendChild(img);
         // Force a relayout, or Opera won't use our image for some obscure reason
         img._top = img.offsetTop;
       }
       e.dataTransfer.setDragImage(img, 0, 0);
-      if (opera) img.parentNode.removeChild(img);
+      if (presto) img.parentNode.removeChild(img);
     }
   }
 
+  function onDragOver(cm, e) {
+    var pos = posFromMouse(cm, e);
+    if (!pos) return;
+    var frag = document.createDocumentFragment();
+    drawSelectionCursor(cm, pos, frag);
+    if (!cm.display.dragCursor) {
+      cm.display.dragCursor = elt("div", null, "CodeMirror-cursors CodeMirror-dragcursors");
+      cm.display.lineSpace.insertBefore(cm.display.dragCursor, cm.display.cursorDiv);
+    }
+    removeChildrenAndAdd(cm.display.dragCursor, frag);
+  }
+
+  function clearDragCursor(cm) {
+    if (cm.display.dragCursor) {
+      cm.display.lineSpace.removeChild(cm.display.dragCursor);
+      cm.display.dragCursor = null;
+    }
+  }
+
+  // SCROLL EVENTS
+
+  // Sync the scrollable area and scrollbars, ensure the viewport
+  // covers the visible area.
   function setScrollTop(cm, val) {
     if (Math.abs(cm.doc.scrollTop - val) < 2) return;
     cm.doc.scrollTop = val;
-    if (!gecko) updateDisplay(cm, [], val);
+    if (!gecko) updateDisplaySimple(cm, {top: val});
     if (cm.display.scroller.scrollTop != val) cm.display.scroller.scrollTop = val;
-    if (cm.display.scrollbarV.scrollTop != val) cm.display.scrollbarV.scrollTop = val;
-    if (gecko) updateDisplay(cm, []);
+    cm.display.scrollbars.setScrollTop(val);
+    if (gecko) updateDisplaySimple(cm);
     startWorker(cm, 100);
   }
+  // Sync scroller and scrollbar, ensure the gutter elements are
+  // aligned.
   function setScrollLeft(cm, val, isScroller) {
     if (isScroller ? val == cm.doc.scrollLeft : Math.abs(cm.doc.scrollLeft - val) < 2) return;
     val = Math.min(val, cm.display.scroller.scrollWidth - cm.display.scroller.clientWidth);
     cm.doc.scrollLeft = val;
     alignHorizontally(cm);
     if (cm.display.scroller.scrollLeft != val) cm.display.scroller.scrollLeft = val;
-    if (cm.display.scrollbarH.scrollLeft != val) cm.display.scrollbarH.scrollLeft = val;
+    cm.display.scrollbars.setScrollLeft(val);
   }
 
   // Since the delta values reported on mouse wheel events are
@@ -1904,11 +3933,22 @@ window.CodeMirror = (function() {
   else if (chrome) wheelPixelsPerUnit = -.7;
   else if (safari) wheelPixelsPerUnit = -1/3;
 
-  function onScrollWheel(cm, e) {
+  var wheelEventDelta = function(e) {
     var dx = e.wheelDeltaX, dy = e.wheelDeltaY;
     if (dx == null && e.detail && e.axis == e.HORIZONTAL_AXIS) dx = e.detail;
     if (dy == null && e.detail && e.axis == e.VERTICAL_AXIS) dy = e.detail;
     else if (dy == null) dy = e.wheelDelta;
+    return {x: dx, y: dy};
+  };
+  CodeMirror.wheelEventPixels = function(e) {
+    var delta = wheelEventDelta(e);
+    delta.x *= wheelPixelsPerUnit;
+    delta.y *= wheelPixelsPerUnit;
+    return delta;
+  };
+
+  function onScrollWheel(cm, e) {
+    var delta = wheelEventDelta(e), dx = delta.x, dy = delta.y;
 
     var display = cm.display, scroll = display.scroller;
     // Quit if there's nothing to scroll here
@@ -1920,10 +3960,12 @@ window.CodeMirror = (function() {
     // This hack (see related code in patchDisplay) makes sure the
     // element is kept around.
     if (dy && mac && webkit) {
-      for (var cur = e.target; cur != scroll; cur = cur.parentNode) {
-        if (cur.lineObj) {
-          cm.display.currentWheelTarget = cur;
-          break;
+      outer: for (var cur = e.target, view = display.view; cur != scroll; cur = cur.parentNode) {
+        for (var i = 0; i < view.length; i++) {
+          if (view[i].node == cur) {
+            cm.display.currentWheelTarget = cur;
+            break outer;
+          }
         }
       }
     }
@@ -1934,7 +3976,7 @@ window.CodeMirror = (function() {
     // estimated pixels/delta value, we just handle horizontal
     // scrolling entirely here. It'll be slightly off from native, but
     // better than glitching out.
-    if (dx && !gecko && !opera && wheelPixelsPerUnit != null) {
+    if (dx && !gecko && !presto && wheelPixelsPerUnit != null) {
       if (dy)
         setScrollTop(cm, Math.max(0, Math.min(scroll.scrollTop + dy * wheelPixelsPerUnit, scroll.scrollHeight - scroll.clientHeight)));
       setScrollLeft(cm, Math.max(0, Math.min(scroll.scrollLeft + dx * wheelPixelsPerUnit, scroll.scrollWidth - scroll.clientWidth)));
@@ -1943,12 +3985,14 @@ window.CodeMirror = (function() {
       return;
     }
 
+    // 'Project' the visible viewport to cover the area that is being
+    // scrolled into view (if we know enough to estimate it).
     if (dy && wheelPixelsPerUnit != null) {
       var pixels = dy * wheelPixelsPerUnit;
       var top = cm.doc.scrollTop, bot = top + display.wrapper.clientHeight;
       if (pixels < 0) top = Math.max(0, top + pixels - 50);
       else bot = Math.min(cm.doc.height, bot + pixels + 50);
-      updateDisplay(cm, [], {top: top, bottom: bot});
+      updateDisplaySimple(cm, {top: top, bottom: bot});
     }
 
     if (wheelSamples < 20) {
@@ -1972,6 +4016,9 @@ window.CodeMirror = (function() {
     }
   }
 
+  // KEY EVENTS
+
+  // Run a handler that was bound to a key.
   function doHandleBinding(cm, bound, dropShift) {
     if (typeof bound == "string") {
       bound = commands[bound];
@@ -1979,241 +4026,256 @@ window.CodeMirror = (function() {
     }
     // Ensure previous input has been read, so that the handler sees a
     // consistent view of the document
-    if (cm.display.pollingFast && readInput(cm)) cm.display.pollingFast = false;
-    var doc = cm.doc, prevShift = doc.sel.shift, done = false;
+    cm.display.input.ensurePolled();
+    var prevShift = cm.display.shift, done = false;
     try {
       if (isReadOnly(cm)) cm.state.suppressEdits = true;
-      if (dropShift) doc.sel.shift = false;
+      if (dropShift) cm.display.shift = false;
       done = bound(cm) != Pass;
     } finally {
-      doc.sel.shift = prevShift;
+      cm.display.shift = prevShift;
       cm.state.suppressEdits = false;
     }
     return done;
   }
 
-  function allKeyMaps(cm) {
-    var maps = cm.state.keyMaps.slice(0);
-    if (cm.options.extraKeys) maps.push(cm.options.extraKeys);
-    maps.push(cm.options.keyMap);
-    return maps;
+  function lookupKeyForEditor(cm, name, handle) {
+    for (var i = 0; i < cm.state.keyMaps.length; i++) {
+      var result = lookupKey(name, cm.state.keyMaps[i], handle, cm);
+      if (result) return result;
+    }
+    return (cm.options.extraKeys && lookupKey(name, cm.options.extraKeys, handle, cm))
+      || lookupKey(name, cm.options.keyMap, handle, cm);
   }
 
-  var maybeTransition;
-  function handleKeyBinding(cm, e) {
-    // Handle auto keymap transitions
-    var startMap = getKeyMap(cm.options.keyMap), next = startMap.auto;
-    clearTimeout(maybeTransition);
-    if (next && !isModifierKey(e)) maybeTransition = setTimeout(function() {
-      if (getKeyMap(cm.options.keyMap) == startMap) {
-        cm.options.keyMap = (next.call ? next.call(null, cm) : next);
-        keyMapChanged(cm);
-      }
-    }, 50);
+  var stopSeq = new Delayed;
+  function dispatchKey(cm, name, e, handle) {
+    var seq = cm.state.keySeq;
+    if (seq) {
+      if (isModifierKey(name)) return "handled";
+      stopSeq.set(50, function() {
+        if (cm.state.keySeq == seq) {
+          cm.state.keySeq = null;
+          cm.display.input.reset();
+        }
+      });
+      name = seq + " " + name;
+    }
+    var result = lookupKeyForEditor(cm, name, handle);
+
+    if (result == "multi")
+      cm.state.keySeq = name;
+    if (result == "handled")
+      signalLater(cm, "keyHandled", cm, name, e);
 
-    var name = keyName(e, true), handled = false;
+    if (result == "handled" || result == "multi") {
+      e_preventDefault(e);
+      restartBlink(cm);
+    }
+
+    if (seq && !result && /\'$/.test(name)) {
+      e_preventDefault(e);
+      return true;
+    }
+    return !!result;
+  }
+
+  // Handle a key from the keydown event.
+  function handleKeyBinding(cm, e) {
+    var name = keyName(e, true);
     if (!name) return false;
-    var keymaps = allKeyMaps(cm);
 
-    if (e.shiftKey) {
+    if (e.shiftKey && !cm.state.keySeq) {
       // First try to resolve full name (including 'Shift-'). Failing
       // that, see if there is a cursor-motion command (starting with
       // 'go') bound to the keyname without 'Shift-'.
-      handled = lookupKey("Shift-" + name, keymaps, function(b) {return doHandleBinding(cm, b, true);})
-             || lookupKey(name, keymaps, function(b) {
-                  if (typeof b == "string" ? /^go[A-Z]/.test(b) : b.motion)
-                    return doHandleBinding(cm, b);
-                });
+      return dispatchKey(cm, "Shift-" + name, e, function(b) {return doHandleBinding(cm, b, true);})
+          || dispatchKey(cm, name, e, function(b) {
+               if (typeof b == "string" ? /^go[A-Z]/.test(b) : b.motion)
+                 return doHandleBinding(cm, b);
+             });
     } else {
-      handled = lookupKey(name, keymaps, function(b) { return doHandleBinding(cm, b); });
+      return dispatchKey(cm, name, e, function(b) { return doHandleBinding(cm, b); });
     }
-
-    if (handled) {
-      e_preventDefault(e);
-      restartBlink(cm);
-      if (ie_lt9) { e.oldKeyCode = e.keyCode; e.keyCode = 0; }
-      signalLater(cm, "keyHandled", cm, name, e);
-    }
-    return handled;
   }
 
+  // Handle a key from the keypress event
   function handleCharBinding(cm, e, ch) {
-    var handled = lookupKey("'" + ch + "'", allKeyMaps(cm),
-                            function(b) { return doHandleBinding(cm, b, true); });
-    if (handled) {
-      e_preventDefault(e);
-      restartBlink(cm);
-      signalLater(cm, "keyHandled", cm, "'" + ch + "'", e);
-    }
-    return handled;
+    return dispatchKey(cm, "'" + ch + "'", e,
+                       function(b) { return doHandleBinding(cm, b, true); });
   }
 
   var lastStoppedKey = null;
   function onKeyDown(e) {
     var cm = this;
-    if (!cm.state.focused) onFocus(cm);
-    if (ie && e.keyCode == 27) { e.returnValue = false; }
-    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
-    var code = e.keyCode;
+    cm.curOp.focus = activeElt();
+    if (signalDOMEvent(cm, e)) return;
     // IE does strange things with escape.
-    cm.doc.sel.shift = code == 16 || e.shiftKey;
-    // First give onKeyEvent option a chance to handle this.
+    if (ie && ie_version < 11 && e.keyCode == 27) e.returnValue = false;
+    var code = e.keyCode;
+    cm.display.shift = code == 16 || e.shiftKey;
     var handled = handleKeyBinding(cm, e);
-    if (opera) {
+    if (presto) {
       lastStoppedKey = handled ? code : null;
       // Opera has no cut event... we try to at least catch the key combo
       if (!handled && code == 88 && !hasCopyEvent && (mac ? e.metaKey : e.ctrlKey))
-        cm.replaceSelection("");
+        cm.replaceSelection("", null, "cut");
+    }
+
+    // Turn mouse into crosshair when Alt is held on Mac.
+    if (code == 18 && !/\bCodeMirror-crosshair\b/.test(cm.display.lineDiv.className))
+      showCrossHair(cm);
+  }
+
+  function showCrossHair(cm) {
+    var lineDiv = cm.display.lineDiv;
+    addClass(lineDiv, "CodeMirror-crosshair");
+
+    function up(e) {
+      if (e.keyCode == 18 || !e.altKey) {
+        rmClass(lineDiv, "CodeMirror-crosshair");
+        off(document, "keyup", up);
+        off(document, "mouseover", up);
+      }
     }
+    on(document, "keyup", up);
+    on(document, "mouseover", up);
+  }
+
+  function onKeyUp(e) {
+    if (e.keyCode == 16) this.doc.sel.shift = false;
+    signalDOMEvent(this, e);
   }
 
   function onKeyPress(e) {
     var cm = this;
-    if (signalDOMEvent(cm, e) || cm.options.onKeyEvent && cm.options.onKeyEvent(cm, addStop(e))) return;
+    if (eventInWidget(cm.display, e) || signalDOMEvent(cm, e) || e.ctrlKey && !e.altKey || mac && e.metaKey) return;
     var keyCode = e.keyCode, charCode = e.charCode;
-    if (opera && keyCode == lastStoppedKey) {lastStoppedKey = null; e_preventDefault(e); return;}
-    if (((opera && (!e.which || e.which < 10)) || khtml) && handleKeyBinding(cm, e)) return;
+    if (presto && keyCode == lastStoppedKey) {lastStoppedKey = null; e_preventDefault(e); return;}
+    if ((presto && (!e.which || e.which < 10)) && handleKeyBinding(cm, e)) return;
     var ch = String.fromCharCode(charCode == null ? keyCode : charCode);
-    if (this.options.electricChars && this.doc.mode.electricChars &&
-        this.options.smartIndent && !isReadOnly(this) &&
-        this.doc.mode.electricChars.indexOf(ch) > -1)
-      setTimeout(operation(cm, function() {indentLine(cm, cm.doc.sel.to.line, "smart");}), 75);
     if (handleCharBinding(cm, e, ch)) return;
-    if (ie && !ie_lt9) cm.display.inputHasSelection = null;
-    fastPoll(cm);
+    cm.display.input.onKeyPress(e);
+  }
+
+  // FOCUS/BLUR EVENTS
+
+  function delayBlurEvent(cm) {
+    cm.state.delayingBlurEvent = true;
+    setTimeout(function() {
+      if (cm.state.delayingBlurEvent) {
+        cm.state.delayingBlurEvent = false;
+        onBlur(cm);
+      }
+    }, 100);
   }
 
   function onFocus(cm) {
+    if (cm.state.delayingBlurEvent) cm.state.delayingBlurEvent = false;
+
     if (cm.options.readOnly == "nocursor") return;
     if (!cm.state.focused) {
       signal(cm, "focus", cm);
       cm.state.focused = true;
-      if (cm.display.wrapper.className.search(/\bCodeMirror-focused\b/) == -1)
-        cm.display.wrapper.className += " CodeMirror-focused";
-      resetInput(cm, true);
+      addClass(cm.display.wrapper, "CodeMirror-focused");
+      // This test prevents this from firing when a context
+      // menu is closed (since the input reset would kill the
+      // select-all detection hack)
+      if (!cm.curOp && cm.display.selForContextMenu != cm.doc.sel) {
+        cm.display.input.reset();
+        if (webkit) setTimeout(function() { cm.display.input.reset(true); }, 20); // Issue #1730
+      }
+      cm.display.input.receivedFocus();
     }
-    slowPoll(cm);
     restartBlink(cm);
   }
   function onBlur(cm) {
+    if (cm.state.delayingBlurEvent) return;
+
     if (cm.state.focused) {
       signal(cm, "blur", cm);
       cm.state.focused = false;
-      cm.display.wrapper.className = cm.display.wrapper.className.replace(" CodeMirror-focused", "");
+      rmClass(cm.display.wrapper, "CodeMirror-focused");
     }
     clearInterval(cm.display.blinker);
-    setTimeout(function() {if (!cm.state.focused) cm.doc.sel.shift = false;}, 150);
+    setTimeout(function() {if (!cm.state.focused) cm.display.shift = false;}, 150);
   }
 
-  var detectingSelectAll;
+  // CONTEXT MENU HANDLING
+
+  // To make the context menu work, we need to briefly unhide the
+  // textarea (making it as unobtrusive as possible) to let the
+  // right-click take effect on it.
   function onContextMenu(cm, e) {
-    if (signalDOMEvent(cm, e, "contextmenu")) return;
-    var display = cm.display, sel = cm.doc.sel;
-    if (eventInWidget(display, e)) return;
-
-    var pos = posFromMouse(cm, e), scrollPos = display.scroller.scrollTop;
-    if (!pos || opera) return; // Opera is difficult.
-    if (posEq(sel.from, sel.to) || posLess(pos, sel.from) || !posLess(pos, sel.to))
-      operation(cm, setSelection)(cm.doc, pos, pos);
-
-    var oldCSS = display.input.style.cssText;
-    display.inputDiv.style.position = "absolute";
-    display.input.style.cssText = "position: fixed; width: 30px; height: 30px; top: " + (e.clientY - 5) +
-      "px; left: " + (e.clientX - 5) + "px; z-index: 1000; background: white; outline: none;" +
-      "border-width: 0; outline: none; overflow: hidden; opacity: .05; -ms-opacity: .05; filter: alpha(opacity=5);";
-    focusInput(cm);
-    resetInput(cm, true);
-    // Adds "Select all" to context menu in FF
-    if (posEq(sel.from, sel.to)) display.input.value = display.prevInput = " ";
-
-    function prepareSelectAllHack() {
-      if (display.input.selectionStart != null) {
-        var extval = display.input.value = " " + (posEq(sel.from, sel.to) ? "" : display.input.value);
-        display.prevInput = " ";
-        display.input.selectionStart = 1; display.input.selectionEnd = extval.length;
-      }
-    }
-    function rehide() {
-      display.inputDiv.style.position = "relative";
-      display.input.style.cssText = oldCSS;
-      if (ie_lt9) display.scrollbarV.scrollTop = display.scroller.scrollTop = scrollPos;
-      slowPoll(cm);
-
-      // Try to detect the user choosing select-all
-      if (display.input.selectionStart != null) {
-        if (!ie || ie_lt9) prepareSelectAllHack();
-        clearTimeout(detectingSelectAll);
-        var i = 0, poll = function(){
-          if (display.prevInput == " " && display.input.selectionStart == 0)
-            operation(cm, commands.selectAll)(cm);
-          else if (i++ < 10) detectingSelectAll = setTimeout(poll, 500);
-          else resetInput(cm);
-        };
-        detectingSelectAll = setTimeout(poll, 200);
-      }
-    }
+    if (eventInWidget(cm.display, e) || contextMenuInGutter(cm, e)) return;
+    cm.display.input.onContextMenu(e);
+  }
 
-    if (ie && !ie_lt9) prepareSelectAllHack();
-    if (captureMiddleClick) {
-      e_stop(e);
-      var mouseup = function() {
-        off(window, "mouseup", mouseup);
-        setTimeout(rehide, 20);
-      };
-      on(window, "mouseup", mouseup);
-    } else {
-      setTimeout(rehide, 50);
-    }
+  function contextMenuInGutter(cm, e) {
+    if (!hasHandler(cm, "gutterContextMenu")) return false;
+    return gutterEvent(cm, e, "gutterContextMenu", false, signal);
   }
 
   // UPDATING
 
+  // Compute the position of the end of a change (its 'to' property
+  // refers to the pre-change end).
   var changeEnd = CodeMirror.changeEnd = function(change) {
     if (!change.text) return change.to;
     return Pos(change.from.line + change.text.length - 1,
                lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0));
   };
 
-  // Make sure a position will be valid after the given change.
-  function clipPostChange(doc, change, pos) {
-    if (!posLess(change.from, pos)) return clipPos(doc, pos);
-    var diff = (change.text.length - 1) - (change.to.line - change.from.line);
-    if (pos.line > change.to.line + diff) {
-      var preLine = pos.line - diff, lastLine = doc.first + doc.size - 1;
-      if (preLine > lastLine) return Pos(lastLine, getLine(doc, lastLine).text.length);
-      return clipToLen(pos, getLine(doc, preLine).text.length);
-    }
-    if (pos.line == change.to.line + diff)
-      return clipToLen(pos, lst(change.text).length + (change.text.length == 1 ? change.from.ch : 0) +
-                       getLine(doc, change.to.line).text.length - change.to.ch);
-    var inside = pos.line - change.from.line;
-    return clipToLen(pos, change.text[inside].length + (inside ? 0 : change.from.ch));
-  }
-
-  // Hint can be null|"end"|"start"|"around"|{anchor,head}
-  function computeSelAfterChange(doc, change, hint) {
-    if (hint && typeof hint == "object") // Assumed to be {anchor, head} object
-      return {anchor: clipPostChange(doc, change, hint.anchor),
-              head: clipPostChange(doc, change, hint.head)};
-
-    if (hint == "start") return {anchor: change.from, head: change.from};
-
-    var end = changeEnd(change);
-    if (hint == "around") return {anchor: change.from, head: end};
-    if (hint == "end") return {anchor: end, head: end};
-
-    // hint is null, leave the selection alone as much as possible
-    var adjustPos = function(pos) {
-      if (posLess(pos, change.from)) return pos;
-      if (!posLess(change.to, pos)) return end;
-
-      var line = pos.line + change.text.length - (change.to.line - change.from.line) - 1, ch = pos.ch;
-      if (pos.line == change.to.line) ch += end.ch - change.to.ch;
-      return Pos(line, ch);
-    };
-    return {anchor: adjustPos(doc.sel.anchor), head: adjustPos(doc.sel.head)};
+  // Adjust a position to refer to the post-change position of the
+  // same text, or the end of the change if the change covers it.
+  function adjustForChange(pos, change) {
+    if (cmp(pos, change.from) < 0) return pos;
+    if (cmp(pos, change.to) <= 0) return changeEnd(change);
+
+    var line = pos.line + change.text.length - (change.to.line - change.from.line) - 1, ch = pos.ch;
+    if (pos.line == change.to.line) ch += changeEnd(change).ch - change.to.ch;
+    return Pos(line, ch);
+  }
+
+  function computeSelAfterChange(doc, change) {
+    var out = [];
+    for (var i = 0; i < doc.sel.ranges.length; i++) {
+      var range = doc.sel.ranges[i];
+      out.push(new Range(adjustForChange(range.anchor, change),
+                         adjustForChange(range.head, change)));
+    }
+    return normalizeSelection(out, doc.sel.primIndex);
+  }
+
+  function offsetPos(pos, old, nw) {
+    if (pos.line == old.line)
+      return Pos(nw.line, pos.ch - old.ch + nw.ch);
+    else
+      return Pos(nw.line + (pos.line - old.line), pos.ch);
+  }
+
+  // Used by replaceSelections to allow moving the selection to the
+  // start or around the replaced test. Hint may be "start" or "around".
+  function computeReplacedSel(doc, changes, hint) {
+    var out = [];
+    var oldPrev = Pos(doc.first, 0), newPrev = oldPrev;
+    for (var i = 0; i < changes.length; i++) {
+      var change = changes[i];
+      var from = offsetPos(change.from, oldPrev, newPrev);
+      var to = offsetPos(changeEnd(change), oldPrev, newPrev);
+      oldPrev = change.to;
+      newPrev = to;
+      if (hint == "around") {
+        var range = doc.sel.ranges[i], inv = cmp(range.head, range.anchor) < 0;
+        out[i] = new Range(inv ? to : from, inv ? from : to);
+      } else {
+        out[i] = new Range(from, from);
+      }
+    }
+    return new Selection(out, doc.sel.primIndex);
   }
 
+  // Allow "beforeChange" event handlers to influence a change
   function filterChange(doc, change, update) {
     var obj = {
       canceled: false,
@@ -2236,11 +4298,11 @@ window.CodeMirror = (function() {
     return {from: obj.from, to: obj.to, text: obj.text, origin: obj.origin};
   }
 
-  // Replace the range from from to to by the strings in replacement.
-  // change is a {from, to, text [, origin]} object
-  function makeChange(doc, change, selUpdate, ignoreReadOnly) {
+  // Apply a change to a document, and add it to the document's
+  // history, and propagating it to all linked documents.
+  function makeChange(doc, change, ignoreReadOnly) {
     if (doc.cm) {
-      if (!doc.cm.curOp) return operation(doc.cm, makeChange)(doc, change, selUpdate, ignoreReadOnly);
+      if (!doc.cm.curOp) return operation(doc.cm, makeChange)(doc, change, ignoreReadOnly);
       if (doc.cm.state.suppressEdits) return;
     }
 
@@ -2253,18 +4315,17 @@ window.CodeMirror = (function() {
     // of read-only spans in its range.
     var split = sawReadOnlySpans && !ignoreReadOnly && removeReadOnlyRanges(doc, change.from, change.to);
     if (split) {
-      for (var i = split.length - 1; i >= 1; --i)
-        makeChangeNoReadonly(doc, {from: split[i].from, to: split[i].to, text: [""]});
-      if (split.length)
-        makeChangeNoReadonly(doc, {from: split[0].from, to: split[0].to, text: change.text}, selUpdate);
+      for (var i = split.length - 1; i >= 0; --i)
+        makeChangeInner(doc, {from: split[i].from, to: split[i].to, text: i ? [""] : change.text});
     } else {
-      makeChangeNoReadonly(doc, change, selUpdate);
+      makeChangeInner(doc, change);
     }
   }
 
-  function makeChangeNoReadonly(doc, change, selUpdate) {
-    var selAfter = computeSelAfterChange(doc, change, selUpdate);
-    addToHistory(doc, change, selAfter, doc.cm ? doc.cm.curOp.id : NaN);
+  function makeChangeInner(doc, change) {
+    if (change.text.length == 1 && change.text[0] == "" && cmp(change.from, change.to) == 0) return;
+    var selAfter = computeSelAfterChange(doc, change);
+    addChangeToHistory(doc, change, selAfter, doc.cm ? doc.cm.curOp.id : NaN);
 
     makeChangeSingleDoc(doc, change, selAfter, stretchSpansOverChange(doc, change));
     var rebased = [];
@@ -2278,17 +4339,41 @@ window.CodeMirror = (function() {
     });
   }
 
-  function makeChangeFromHistory(doc, type) {
+  // Revert a change stored in a document's history.
+  function makeChangeFromHistory(doc, type, allowSelectionOnly) {
     if (doc.cm && doc.cm.state.suppressEdits) return;
 
-    var hist = doc.history;
-    var event = (type == "undo" ? hist.done : hist.undone).pop();
-    if (!event) return;
+    var hist = doc.history, event, selAfter = doc.sel;
+    var source = type == "undo" ? hist.done : hist.undone, dest = type == "undo" ? hist.undone : hist.done;
+
+    // Verify that there is a useable event (so that ctrl-z won't
+    // needlessly clear selection events)
+    for (var i = 0; i < source.length; i++) {
+      event = source[i];
+      if (allowSelectionOnly ? event.ranges && !event.equals(doc.sel) : !event.ranges)
+        break;
+    }
+    if (i == source.length) return;
+    hist.lastOrigin = hist.lastSelOrigin = null;
 
-    var anti = {changes: [], anchorBefore: event.anchorAfter, headBefore: event.headAfter,
-                anchorAfter: event.anchorBefore, headAfter: event.headBefore,
-                generation: hist.generation};
-    (type == "undo" ? hist.undone : hist.done).push(anti);
+    for (;;) {
+      event = source.pop();
+      if (event.ranges) {
+        pushSelectionToHistory(event, dest);
+        if (allowSelectionOnly && !event.equals(doc.sel)) {
+          setSelection(doc, event, {clearRedo: false});
+          return;
+        }
+        selAfter = event;
+      }
+      else break;
+    }
+
+    // Build up a reverse change object to add to the opposite history
+    // stack (redo when undoing, and vice versa).
+    var antiChanges = [];
+    pushSelectionToHistory(selAfter, dest);
+    dest.push({changes: antiChanges, generation: hist.generation});
     hist.generation = event.generation || ++hist.maxGeneration;
 
     var filter = hasHandler(doc, "beforeChange") || doc.cm && hasHandler(doc.cm, "beforeChange");
@@ -2297,17 +4382,18 @@ window.CodeMirror = (function() {
       var change = event.changes[i];
       change.origin = type;
       if (filter && !filterChange(doc, change, false)) {
-        (type == "undo" ? hist.done : hist.undone).length = 0;
+        source.length = 0;
         return;
       }
 
-      anti.changes.push(historyChangeFromChange(doc, change));
+      antiChanges.push(historyChangeFromChange(doc, change));
 
-      var after = i ? computeSelAfterChange(doc, change, null)
-                    : {anchor: event.anchorBefore, head: event.headBefore};
+      var after = i ? computeSelAfterChange(doc, change) : lst(source);
       makeChangeSingleDoc(doc, change, after, mergeOldSpans(doc, change));
+      if (!i && doc.cm) doc.cm.scrollIntoView({from: change.from, to: changeEnd(change)});
       var rebased = [];
 
+      // Propagate to the linked documents
       linkedDocs(doc, function(doc, sharedHist) {
         if (!sharedHist && indexOf(rebased, doc.history) == -1) {
           rebaseHist(doc.history, change);
@@ -2318,14 +4404,24 @@ window.CodeMirror = (function() {
     }
   }
 
+  // Sub-views need their line numbers shifted when text is added
+  // above or below them in the parent document.
   function shiftDoc(doc, distance) {
-    function shiftPos(pos) {return Pos(pos.line + distance, pos.ch);}
+    if (distance == 0) return;
     doc.first += distance;
-    if (doc.cm) regChange(doc.cm, doc.first, doc.first, distance);
-    doc.sel.head = shiftPos(doc.sel.head); doc.sel.anchor = shiftPos(doc.sel.anchor);
-    doc.sel.from = shiftPos(doc.sel.from); doc.sel.to = shiftPos(doc.sel.to);
+    doc.sel = new Selection(map(doc.sel.ranges, function(range) {
+      return new Range(Pos(range.anchor.line + distance, range.anchor.ch),
+                       Pos(range.head.line + distance, range.head.ch));
+    }), doc.sel.primIndex);
+    if (doc.cm) {
+      regChange(doc.cm, doc.first, doc.first - distance, distance);
+      for (var d = doc.cm.display, l = d.viewFrom; l < d.viewTo; l++)
+        regLineChange(doc.cm, l, "gutter");
+    }
   }
 
+  // More lower-level change function, handling only a single document
+  // (not linked ones).
   function makeChangeSingleDoc(doc, change, selAfter, spans) {
     if (doc.cm && !doc.cm.curOp)
       return operation(doc.cm, makeChangeSingleDoc)(doc, change, selAfter, spans);
@@ -2351,17 +4447,20 @@ window.CodeMirror = (function() {
 
     change.removed = getBetween(doc, change.from, change.to);
 
-    if (!selAfter) selAfter = computeSelAfterChange(doc, change, null);
-    if (doc.cm) makeChangeSingleDocInEditor(doc.cm, change, spans, selAfter);
-    else updateDoc(doc, change, spans, selAfter);
+    if (!selAfter) selAfter = computeSelAfterChange(doc, change);
+    if (doc.cm) makeChangeSingleDocInEditor(doc.cm, change, spans);
+    else updateDoc(doc, change, spans);
+    setSelectionNoUndo(doc, selAfter, sel_dontScroll);
   }
 
-  function makeChangeSingleDocInEditor(cm, change, spans, selAfter) {
+  // Handle the interaction of a change to a document with the editor
+  // that this document is part of.
+  function makeChangeSingleDocInEditor(cm, change, spans) {
     var doc = cm.doc, display = cm.display, from = change.from, to = change.to;
 
     var recomputeMaxLength = false, checkWidthStart = from.line;
     if (!cm.options.lineWrapping) {
-      checkWidthStart = lineNo(visualLine(doc, getLine(doc, from.line)));
+      checkWidthStart = lineNo(visualLine(getLine(doc, from.line)));
       doc.iter(checkWidthStart, to.line + 1, function(line) {
         if (line == display.maxLine) {
           recomputeMaxLength = true;
@@ -2370,14 +4469,14 @@ window.CodeMirror = (function() {
       });
     }
 
-    if (!posLess(doc.sel.head, change.from) && !posLess(change.to, doc.sel.head))
-      cm.curOp.cursorActivity = true;
+    if (doc.sel.contains(change.from, change.to) > -1)
+      signalCursorActivity(cm);
 
-    updateDoc(doc, change, spans, selAfter, estimateHeight(cm));
+    updateDoc(doc, change, spans, estimateHeight(cm));
 
     if (!cm.options.lineWrapping) {
       doc.iter(checkWidthStart, from.line + change.text.length, function(line) {
-        var len = lineLength(doc, line);
+        var len = lineLength(line);
         if (len > display.maxLineLength) {
           display.maxLine = line;
           display.maxLineLength = len;
@@ -2394,196 +4493,67 @@ window.CodeMirror = (function() {
 
     var lendiff = change.text.length - (to.line - from.line) - 1;
     // Remember that these lines changed, for updating the display
-    regChange(cm, from.line, to.line + 1, lendiff);
-
-    if (hasHandler(cm, "change")) {
-      var changeObj = {from: from, to: to,
-                       text: change.text,
-                       removed: change.removed,
-                       origin: change.origin};
-      if (cm.curOp.textChanged) {
-        for (var cur = cm.curOp.textChanged; cur.next; cur = cur.next) {}
-        cur.next = changeObj;
-      } else cm.curOp.textChanged = changeObj;
+    if (change.full)
+      regChange(cm);
+    else if (from.line == to.line && change.text.length == 1 && !isWholeLineUpdate(cm.doc, change))
+      regLineChange(cm, from.line, "text");
+    else
+      regChange(cm, from.line, to.line + 1, lendiff);
+
+    var changesHandler = hasHandler(cm, "changes"), changeHandler = hasHandler(cm, "change");
+    if (changeHandler || changesHandler) {
+      var obj = {
+        from: from, to: to,
+        text: change.text,
+        removed: change.removed,
+        origin: change.origin
+      };
+      if (changeHandler) signalLater(cm, "change", cm, obj);
+      if (changesHandler) (cm.curOp.changeObjs || (cm.curOp.changeObjs = [])).push(obj);
     }
+    cm.display.selForContextMenu = null;
   }
 
   function replaceRange(doc, code, from, to, origin) {
     if (!to) to = from;
-    if (posLess(to, from)) { var tmp = to; to = from; from = tmp; }
-    if (typeof code == "string") code = splitLines(code);
-    makeChange(doc, {from: from, to: to, text: code, origin: origin}, null);
-  }
-
-  // POSITION OBJECT
-
-  function Pos(line, ch) {
-    if (!(this instanceof Pos)) return new Pos(line, ch);
-    this.line = line; this.ch = ch;
-  }
-  CodeMirror.Pos = Pos;
-
-  function posEq(a, b) {return a.line == b.line && a.ch == b.ch;}
-  function posLess(a, b) {return a.line < b.line || (a.line == b.line && a.ch < b.ch);}
-  function copyPos(x) {return Pos(x.line, x.ch);}
-
-  // SELECTION
-
-  function clipLine(doc, n) {return Math.max(doc.first, Math.min(n, doc.first + doc.size - 1));}
-  function clipPos(doc, pos) {
-    if (pos.line < doc.first) return Pos(doc.first, 0);
-    var last = doc.first + doc.size - 1;
-    if (pos.line > last) return Pos(last, getLine(doc, last).text.length);
-    return clipToLen(pos, getLine(doc, pos.line).text.length);
+    if (cmp(to, from) < 0) { var tmp = to; to = from; from = tmp; }
+    if (typeof code == "string") code = doc.splitLines(code);
+    makeChange(doc, {from: from, to: to, text: code, origin: origin});
   }
-  function clipToLen(pos, linelen) {
-    var ch = pos.ch;
-    if (ch == null || ch > linelen) return Pos(pos.line, linelen);
-    else if (ch < 0) return Pos(pos.line, 0);
-    else return pos;
-  }
-  function isLine(doc, l) {return l >= doc.first && l < doc.first + doc.size;}
 
-  // If shift is held, this will move the selection anchor. Otherwise,
-  // it'll set the whole selection.
-  function extendSelection(doc, pos, other, bias) {
-    if (doc.sel.shift || doc.sel.extend) {
-      var anchor = doc.sel.anchor;
-      if (other) {
-        var posBefore = posLess(pos, anchor);
-        if (posBefore != posLess(other, anchor)) {
-          anchor = pos;
-          pos = other;
-        } else if (posBefore != posLess(pos, other)) {
-          pos = other;
-        }
-      }
-      setSelection(doc, anchor, pos, bias);
-    } else {
-      setSelection(doc, pos, other || pos, bias);
-    }
-    if (doc.cm) doc.cm.curOp.userSelChange = true;
-  }
+  // SCROLLING THINGS INTO VIEW
 
-  function filterSelectionChange(doc, anchor, head) {
-    var obj = {anchor: anchor, head: head};
-    signal(doc, "beforeSelectionChange", doc, obj);
-    if (doc.cm) signal(doc.cm, "beforeSelectionChange", doc.cm, obj);
-    obj.anchor = clipPos(doc, obj.anchor); obj.head = clipPos(doc, obj.head);
-    return obj;
-  }
-
-  // Update the selection. Last two args are only used by
-  // updateDoc, since they have to be expressed in the line
-  // numbers before the update.
-  function setSelection(doc, anchor, head, bias, checkAtomic) {
-    if (!checkAtomic && hasHandler(doc, "beforeSelectionChange") || doc.cm && hasHandler(doc.cm, "beforeSelectionChange")) {
-      var filtered = filterSelectionChange(doc, anchor, head);
-      head = filtered.head;
-      anchor = filtered.anchor;
-    }
-
-    var sel = doc.sel;
-    sel.goalColumn = null;
-    // Skip over atomic spans.
-    if (checkAtomic || !posEq(anchor, sel.anchor))
-      anchor = skipAtomic(doc, anchor, bias, checkAtomic != "push");
-    if (checkAtomic || !posEq(head, sel.head))
-      head = skipAtomic(doc, head, bias, checkAtomic != "push");
-
-    if (posEq(sel.anchor, anchor) && posEq(sel.head, head)) return;
-
-    sel.anchor = anchor; sel.head = head;
-    var inv = posLess(head, anchor);
-    sel.from = inv ? head : anchor;
-    sel.to = inv ? anchor : head;
-
-    if (doc.cm)
-      doc.cm.curOp.updateInput = doc.cm.curOp.selectionChanged =
-        doc.cm.curOp.cursorActivity = true;
-
-    signalLater(doc, "cursorActivity", doc);
-  }
-
-  function reCheckSelection(cm) {
-    setSelection(cm.doc, cm.doc.sel.from, cm.doc.sel.to, null, "push");
-  }
+  // If an editor sits on the top or bottom of the window, partially
+  // scrolled out of view, this ensures that the cursor is visible.
+  function maybeScrollWindow(cm, coords) {
+    if (signalDOMEvent(cm, "scrollCursorIntoView")) return;
 
-  function skipAtomic(doc, pos, bias, mayClear) {
-    var flipped = false, curPos = pos;
-    var dir = bias || 1;
-    doc.cantEdit = false;
-    search: for (;;) {
-      var line = getLine(doc, curPos.line);
-      if (line.markedSpans) {
-        for (var i = 0; i < line.markedSpans.length; ++i) {
-          var sp = line.markedSpans[i], m = sp.marker;
-          if ((sp.from == null || (m.inclusiveLeft ? sp.from <= curPos.ch : sp.from < curPos.ch)) &&
-              (sp.to == null || (m.inclusiveRight ? sp.to >= curPos.ch : sp.to > curPos.ch))) {
-            if (mayClear) {
-              signal(m, "beforeCursorEnter");
-              if (m.explicitlyCleared) {
-                if (!line.markedSpans) break;
-                else {--i; continue;}
-              }
-            }
-            if (!m.atomic) continue;
-            var newPos = m.find()[dir < 0 ? "from" : "to"];
-            if (posEq(newPos, curPos)) {
-              newPos.ch += dir;
-              if (newPos.ch < 0) {
-                if (newPos.line > doc.first) newPos = clipPos(doc, Pos(newPos.line - 1));
-                else newPos = null;
-              } else if (newPos.ch > line.text.length) {
-                if (newPos.line < doc.first + doc.size - 1) newPos = Pos(newPos.line + 1, 0);
-                else newPos = null;
-              }
-              if (!newPos) {
-                if (flipped) {
-                  // Driven in a corner -- no valid cursor position found at all
-                  // -- try again *with* clearing, if we didn't already
-                  if (!mayClear) return skipAtomic(doc, pos, bias, true);
-                  // Otherwise, turn off editing until further notice, and return the start of the doc
-                  doc.cantEdit = true;
-                  return Pos(doc.first, 0);
-                }
-                flipped = true; newPos = pos; dir = -dir;
-              }
-            }
-            curPos = newPos;
-            continue search;
-          }
-        }
-      }
-      return curPos;
-    }
-  }
-
-  // SCROLLING
-
-  function scrollCursorIntoView(cm) {
-    var coords = scrollPosIntoView(cm, cm.doc.sel.head, cm.options.cursorScrollMargin);
-    if (!cm.state.focused) return;
-    var display = cm.display, box = getRect(display.sizer), doScroll = null;
+    var display = cm.display, box = display.sizer.getBoundingClientRect(), doScroll = null;
     if (coords.top + box.top < 0) doScroll = true;
     else if (coords.bottom + box.top > (window.innerHeight || document.documentElement.clientHeight)) doScroll = false;
     if (doScroll != null && !phantom) {
-      var hidden = display.cursor.style.display == "none";
-      if (hidden) {
-        display.cursor.style.display = "";
-        display.cursor.style.left = coords.left + "px";
-        display.cursor.style.top = (coords.top - display.viewOffset) + "px";
-      }
-      display.cursor.scrollIntoView(doScroll);
-      if (hidden) display.cursor.style.display = "none";
+      var scrollNode = elt("div", "\u200b", null, "position: absolute; top: " +
+                           (coords.top - display.viewOffset - paddingTop(cm.display)) + "px; height: " +
+                           (coords.bottom - coords.top + scrollGap(cm) + display.barHeight) + "px; left: " +
+                           coords.left + "px; width: 2px;");
+      cm.display.lineSpace.appendChild(scrollNode);
+      scrollNode.scrollIntoView(doScroll);
+      cm.display.lineSpace.removeChild(scrollNode);
     }
   }
 
-  function scrollPosIntoView(cm, pos, margin) {
+  // Scroll a given position into view (immediately), verifying that
+  // it actually became visible (as line heights are accurately
+  // measured, the position of something may 'drift' during drawing).
+  function scrollPosIntoView(cm, pos, end, margin) {
     if (margin == null) margin = 0;
-    for (;;) {
+    for (var limit = 0; limit < 5; limit++) {
       var changed = false, coords = cursorCoords(cm, pos);
-      var scrollPos = calculateScrollPos(cm, coords.left, coords.top - margin, coords.left, coords.bottom + margin);
+      var endCoords = !end || end == pos ? coords : cursorCoords(cm, end);
+      var scrollPos = calculateScrollPos(cm, Math.min(coords.left, endCoords.left),
+                                         Math.min(coords.top, endCoords.top) - margin,
+                                         Math.max(coords.left, endCoords.left),
+                                         Math.max(coords.bottom, endCoords.bottom) + margin);
       var startTop = cm.doc.scrollTop, startLeft = cm.doc.scrollLeft;
       if (scrollPos.scrollTop != null) {
         setScrollTop(cm, scrollPos.scrollTop);
@@ -2593,20 +4563,28 @@ window.CodeMirror = (function() {
         setScrollLeft(cm, scrollPos.scrollLeft);
         if (Math.abs(cm.doc.scrollLeft - startLeft) > 1) changed = true;
       }
-      if (!changed) return coords;
+      if (!changed) break;
     }
+    return coords;
   }
 
+  // Scroll a given set of coordinates into view (immediately).
   function scrollIntoView(cm, x1, y1, x2, y2) {
     var scrollPos = calculateScrollPos(cm, x1, y1, x2, y2);
     if (scrollPos.scrollTop != null) setScrollTop(cm, scrollPos.scrollTop);
     if (scrollPos.scrollLeft != null) setScrollLeft(cm, scrollPos.scrollLeft);
   }
 
+  // Calculate a new scroll position needed to scroll the given
+  // rectangle into view. Returns an object with scrollTop and
+  // scrollLeft properties. When these are undefined, the
+  // vertical/horizontal position does not need to be adjusted.
   function calculateScrollPos(cm, x1, y1, x2, y2) {
     var display = cm.display, snapMargin = textHeight(cm.display);
     if (y1 < 0) y1 = 0;
-    var screen = display.scroller.clientHeight - scrollerCutOff, screentop = display.scroller.scrollTop, result = {};
+    var screentop = cm.curOp && cm.curOp.scrollTop != null ? cm.curOp.scrollTop : display.scroller.scrollTop;
+    var screen = displayHeight(cm), result = {};
+    if (y2 - y1 > screen) y2 = y1 + screen;
     var docBottom = cm.doc.height + paddingVert(display);
     var atTop = y1 < snapMargin, atBottom = y2 > docBottom - snapMargin;
     if (y1 < screentop) {
@@ -2616,47 +4594,85 @@ window.CodeMirror = (function() {
       if (newTop != screentop) result.scrollTop = newTop;
     }
 
-    var screenw = display.scroller.clientWidth - scrollerCutOff, screenleft = display.scroller.scrollLeft;
-    x1 += display.gutters.offsetWidth; x2 += display.gutters.offsetWidth;
-    var gutterw = display.gutters.offsetWidth;
-    var atLeft = x1 < gutterw + 10;
-    if (x1 < screenleft + gutterw || atLeft) {
-      if (atLeft) x1 = 0;
-      result.scrollLeft = Math.max(0, x1 - 10 - gutterw);
-    } else if (x2 > screenw + screenleft - 3) {
-      result.scrollLeft = x2 + 10 - screenw;
-    }
+    var screenleft = cm.curOp && cm.curOp.scrollLeft != null ? cm.curOp.scrollLeft : display.scroller.scrollLeft;
+    var screenw = displayWidth(cm) - (cm.options.fixedGutter ? display.gutters.offsetWidth : 0);
+    var tooWide = x2 - x1 > screenw;
+    if (tooWide) x2 = x1 + screenw;
+    if (x1 < 10)
+      result.scrollLeft = 0;
+    else if (x1 < screenleft)
+      result.scrollLeft = Math.max(0, x1 - (tooWide ? 0 : 10));
+    else if (x2 > screenw + screenleft - 3)
+      result.scrollLeft = x2 + (tooWide ? 0 : 10) - screenw;
     return result;
   }
 
-  function updateScrollPos(cm, left, top) {
-    cm.curOp.updateScrollPos = {scrollLeft: left == null ? cm.doc.scrollLeft : left,
-                                scrollTop: top == null ? cm.doc.scrollTop : top};
+  // Store a relative adjustment to the scroll position in the current
+  // operation (to be applied when the operation finishes).
+  function addToScrollPos(cm, left, top) {
+    if (left != null || top != null) resolveScrollToPos(cm);
+    if (left != null)
+      cm.curOp.scrollLeft = (cm.curOp.scrollLeft == null ? cm.doc.scrollLeft : cm.curOp.scrollLeft) + left;
+    if (top != null)
+      cm.curOp.scrollTop = (cm.curOp.scrollTop == null ? cm.doc.scrollTop : cm.curOp.scrollTop) + top;
+  }
+
+  // Make sure that at the end of the operation the current cursor is
+  // shown.
+  function ensureCursorVisible(cm) {
+    resolveScrollToPos(cm);
+    var cur = cm.getCursor(), from = cur, to = cur;
+    if (!cm.options.lineWrapping) {
+      from = cur.ch ? Pos(cur.line, cur.ch - 1) : cur;
+      to = Pos(cur.line, cur.ch + 1);
+    }
+    cm.curOp.scrollToPos = {from: from, to: to, margin: cm.options.cursorScrollMargin, isCursor: true};
   }
 
-  function addToScrollPos(cm, left, top) {
-    var pos = cm.curOp.updateScrollPos || (cm.curOp.updateScrollPos = {scrollLeft: cm.doc.scrollLeft, scrollTop: cm.doc.scrollTop});
-    var scroll = cm.display.scroller;
-    pos.scrollTop = Math.max(0, Math.min(scroll.scrollHeight - scroll.clientHeight, pos.scrollTop + top));
-    pos.scrollLeft = Math.max(0, Math.min(scroll.scrollWidth - scroll.clientWidth, pos.scrollLeft + left));
+  // When an operation has its scrollToPos property set, and another
+  // scroll action is applied before the end of the operation, this
+  // 'simulates' scrolling that position into view in a cheap way, so
+  // that the effect of intermediate scroll commands is not ignored.
+  function resolveScrollToPos(cm) {
+    var range = cm.curOp.scrollToPos;
+    if (range) {
+      cm.curOp.scrollToPos = null;
+      var from = estimateCoords(cm, range.from), to = estimateCoords(cm, range.to);
+      var sPos = calculateScrollPos(cm, Math.min(from.left, to.left),
+                                    Math.min(from.top, to.top) - range.margin,
+                                    Math.max(from.right, to.right),
+                                    Math.max(from.bottom, to.bottom) + range.margin);
+      cm.scrollTo(sPos.scrollLeft, sPos.scrollTop);
+    }
   }
 
   // API UTILITIES
 
+  // Indent the given line. The how parameter can be "smart",
+  // "add"/null, "subtract", or "prev". When aggressive is false
+  // (typically set to true for forced single-line indents), empty
+  // lines are not indented, and places where the mode returns Pass
+  // are left alone.
   function indentLine(cm, n, how, aggressive) {
-    var doc = cm.doc;
+    var doc = cm.doc, state;
     if (how == null) how = "add";
     if (how == "smart") {
-      if (!cm.doc.mode.indent) how = "prev";
-      else var state = getStateBefore(cm, n);
+      // Fall back to "prev" when the mode doesn't have an indentation
+      // method.
+      if (!doc.mode.indent) how = "prev";
+      else state = getStateBefore(cm, n);
     }
 
     var tabSize = cm.options.tabSize;
     var line = getLine(doc, n), curSpace = countColumn(line.text, null, tabSize);
+    if (line.stateAfter) line.stateAfter = null;
     var curSpaceString = line.text.match(/^\s*/)[0], indentation;
-    if (how == "smart") {
-      indentation = cm.doc.mode.indent(state, line.text.slice(curSpaceString.length), line.text);
-      if (indentation == Pass) {
+    if (!aggressive && !/\S/.test(line.text)) {
+      indentation = 0;
+      how = "not";
+    } else if (how == "smart") {
+      indentation = doc.mode.indent(state, line.text.slice(curSpaceString.length), line.text);
+      if (indentation == Pass || indentation > 150) {
         if (!aggressive) return;
         how = "prev";
       }
@@ -2678,21 +4694,70 @@ window.CodeMirror = (function() {
       for (var i = Math.floor(indentation / tabSize); i; --i) {pos += tabSize; indentString += "\t";}
     if (pos < indentation) indentString += spaceStr(indentation - pos);
 
-    if (indentString != curSpaceString)
-      replaceRange(cm.doc, indentString, Pos(n, 0), Pos(n, curSpaceString.length), "+input");
-    line.stateAfter = null;
+    if (indentString != curSpaceString) {
+      replaceRange(doc, indentString, Pos(n, 0), Pos(n, curSpaceString.length), "+input");
+      line.stateAfter = null;
+      return true;
+    } else {
+      // Ensure that, if the cursor was in the whitespace at the start
+      // of the line, it is moved to the end of that space.
+      for (var i = 0; i < doc.sel.ranges.length; i++) {
+        var range = doc.sel.ranges[i];
+        if (range.head.line == n && range.head.ch < curSpaceString.length) {
+          var pos = Pos(n, curSpaceString.length);
+          replaceOneSelection(doc, i, new Range(pos, pos));
+          break;
+        }
+      }
+    }
   }
 
-  function changeLine(cm, handle, op) {
-    var no = handle, line = handle, doc = cm.doc;
+  // Utility for applying a change to a line by handle or number,
+  // returning the number and optionally registering the line as
+  // changed.
+  function changeLine(doc, handle, changeType, op) {
+    var no = handle, line = handle;
     if (typeof handle == "number") line = getLine(doc, clipLine(doc, handle));
     else no = lineNo(handle);
     if (no == null) return null;
-    if (op(line, no)) regChange(cm, no, no + 1);
-    else return null;
+    if (op(line, no) && doc.cm) regLineChange(doc.cm, no, changeType);
     return line;
   }
 
+  // Helper for deleting text near the selection(s), used to implement
+  // backspace, delete, and similar functionality.
+  function deleteNearSelection(cm, compute) {
+    var ranges = cm.doc.sel.ranges, kill = [];
+    // Build up a set of ranges to kill first, merging overlapping
+    // ranges.
+    for (var i = 0; i < ranges.length; i++) {
+      var toKill = compute(ranges[i]);
+      while (kill.length && cmp(toKill.from, lst(kill).to) <= 0) {
+        var replaced = kill.pop();
+        if (cmp(replaced.from, toKill.from) < 0) {
+          toKill.from = replaced.from;
+          break;
+        }
+      }
+      kill.push(toKill);
+    }
+    // Next, remove those actual ranges.
+    runInOp(cm, function() {
+      for (var i = kill.length - 1; i >= 0; i--)
+        replaceRange(cm.doc, "", kill[i].from, kill[i].to, "+delete");
+      ensureCursorVisible(cm);
+    });
+  }
+
+  // Used for horizontal relative motion. Dir is -1 or 1 (left or
+  // right), unit can be "char", "column" (like char, but doesn't
+  // cross line boundaries), "word" (across next word), or "group" (to
+  // the start of next group of word or non-word-non-whitespace
+  // chars). The visually param controls whether, in right-to-left
+  // text, direction 1 means to move towards the next index in the
+  // string, or towards the character to the right of the current
+  // position. The resulting position will have a hitSide=true
+  // property if it reached the end of the document.
   function findPosH(doc, pos, dir, unit, visually) {
     var line = pos.line, ch = pos.ch, origDir = dir;
     var lineObj = getLine(doc, line);
@@ -2718,17 +4783,20 @@ window.CodeMirror = (function() {
     else if (unit == "column") moveOnce(true);
     else if (unit == "word" || unit == "group") {
       var sawType = null, group = unit == "group";
+      var helper = doc.cm && doc.cm.getHelper(pos, "wordChars");
       for (var first = true;; first = false) {
         if (dir < 0 && !moveOnce(!first)) break;
         var cur = lineObj.text.charAt(ch) || "\n";
-        var type = isWordChar(cur) ? "w"
-          : !group ? null
-          : /\s/.test(cur) ? null
+        var type = isWordChar(cur, helper) ? "w"
+          : group && cur == "\n" ? "n"
+          : !group || /\s/.test(cur) ? null
           : "p";
+        if (group && !first && !type) type = "s";
         if (sawType && sawType != type) {
           if (dir < 0) {dir = 1; moveOnce();}
           break;
         }
+
         if (type) sawType = type;
         if (dir > 0 && !moveOnce(!first)) break;
       }
@@ -2738,6 +4806,9 @@ window.CodeMirror = (function() {
     return result;
   }
 
+  // For relative vertical movement. Dir may be -1 or 1. Unit can be
+  // "page" or "line". The resulting position will have a hitSide=true
+  // property if it reached the end of the document.
   function findPosV(cm, pos, dir, unit) {
     var doc = cm.doc, x = pos.left, y;
     if (unit == "page") {
@@ -2755,32 +4826,19 @@ window.CodeMirror = (function() {
     return target;
   }
 
-  function findWordAt(line, pos) {
-    var start = pos.ch, end = pos.ch;
-    if (line) {
-      if ((pos.xRel < 0 || end == line.length) && start) --start; else ++end;
-      var startChar = line.charAt(start);
-      var check = isWordChar(startChar) ? isWordChar
-        : /\s/.test(startChar) ? function(ch) {return /\s/.test(ch);}
-        : function(ch) {return !/\s/.test(ch) && !isWordChar(ch);};
-      while (start > 0 && check(line.charAt(start - 1))) --start;
-      while (end < line.length && check(line.charAt(end))) ++end;
-    }
-    return {from: Pos(pos.line, start), to: Pos(pos.line, end)};
-  }
-
-  function selectLine(cm, line) {
-    extendSelection(cm.doc, Pos(line, 0), clipPos(cm.doc, Pos(line + 1, 0)));
-  }
+  // EDITOR METHODS
 
-  // PROTOTYPE
+  // The publicly visible API. Note that methodOp(f) means
+  // 'wrap f in an operation, performed on its `this` parameter'.
 
-  // The publicly visible API. Note that operation(null, f) means
-  // 'wrap f in an operation, performed on its `this` parameter'
+  // This is not the complete set of editor methods. Most of the
+  // methods defined on the Doc type are also injected into
+  // CodeMirror.prototype, for backwards compatibility and
+  // convenience.
 
   CodeMirror.prototype = {
     constructor: CodeMirror,
-    focus: function(){window.focus(); focusInput(this); onFocus(this); fastPoll(this);},
+    focus: function(){window.focus(); this.display.input.focus();},
 
     setOption: function(option, value) {
       var options = this.options, old = options[option];
@@ -2794,25 +4852,25 @@ window.CodeMirror = (function() {
     getDoc: function() {return this.doc;},
 
     addKeyMap: function(map, bottom) {
-      this.state.keyMaps[bottom ? "push" : "unshift"](map);
+      this.state.keyMaps[bottom ? "push" : "unshift"](getKeyMap(map));
     },
     removeKeyMap: function(map) {
       var maps = this.state.keyMaps;
       for (var i = 0; i < maps.length; ++i)
-        if (maps[i] == map || (typeof maps[i] != "string" && maps[i].name == map)) {
+        if (maps[i] == map || maps[i].name == map) {
           maps.splice(i, 1);
           return true;
         }
     },
 
-    addOverlay: operation(null, function(spec, options) {
+    addOverlay: methodOp(function(spec, options) {
       var mode = spec.token ? spec : CodeMirror.getMode(this.options, spec);
       if (mode.startState) throw new Error("Overlays may not be stateful.");
       this.state.overlays.push({mode: mode, modeSpec: spec, opaque: options && options.opaque});
       this.state.modeGen++;
       regChange(this);
     }),
-    removeOverlay: operation(null, function(spec) {
+    removeOverlay: methodOp(function(spec) {
       var overlays = this.state.overlays;
       for (var i = 0; i < overlays.length; ++i) {
         var cur = overlays[i].modeSpec;
@@ -2825,51 +4883,58 @@ window.CodeMirror = (function() {
       }
     }),
 
-    indentLine: operation(null, function(n, dir, aggressive) {
+    indentLine: methodOp(function(n, dir, aggressive) {
       if (typeof dir != "string" && typeof dir != "number") {
         if (dir == null) dir = this.options.smartIndent ? "smart" : "prev";
         else dir = dir ? "add" : "subtract";
       }
       if (isLine(this.doc, n)) indentLine(this, n, dir, aggressive);
     }),
-    indentSelection: operation(null, function(how) {
-      var sel = this.doc.sel;
-      if (posEq(sel.from, sel.to)) return indentLine(this, sel.from.line, how);
-      var e = sel.to.line - (sel.to.ch ? 0 : 1);
-      for (var i = sel.from.line; i <= e; ++i) indentLine(this, i, how);
+    indentSelection: methodOp(function(how) {
+      var ranges = this.doc.sel.ranges, end = -1;
+      for (var i = 0; i < ranges.length; i++) {
+        var range = ranges[i];
+        if (!range.empty()) {
+          var from = range.from(), to = range.to();
+          var start = Math.max(end, from.line);
+          end = Math.min(this.lastLine(), to.line - (to.ch ? 0 : 1)) + 1;
+          for (var j = start; j < end; ++j)
+            indentLine(this, j, how);
+          var newRanges = this.doc.sel.ranges;
+          if (from.ch == 0 && ranges.length == newRanges.length && newRanges[i].from().ch > 0)
+            replaceOneSelection(this.doc, i, new Range(from, newRanges[i].to()), sel_dontScroll);
+        } else if (range.head.line > end) {
+          indentLine(this, range.head.line, how, true);
+          end = range.head.line;
+          if (i == this.doc.sel.primIndex) ensureCursorVisible(this);
+        }
+      }
     }),
 
     // Fetch the parser token for a given character. Useful for hacks
     // that want to inspect the mode state (say, for completion).
     getTokenAt: function(pos, precise) {
-      var doc = this.doc;
-      pos = clipPos(doc, pos);
-      var state = getStateBefore(this, pos.line, precise), mode = this.doc.mode;
-      var line = getLine(doc, pos.line);
-      var stream = new StringStream(line.text, this.options.tabSize);
-      while (stream.pos < pos.ch && !stream.eol()) {
-        stream.start = stream.pos;
-        var style = mode.token(stream, state);
-      }
-      return {start: stream.start,
-              end: stream.pos,
-              string: stream.current(),
-              className: style || null, // Deprecated, use 'type' instead
-              type: style || null,
-              state: state};
+      return takeToken(this, pos, precise);
+    },
+
+    getLineTokens: function(line, precise) {
+      return takeToken(this, Pos(line), precise, true);
     },
 
     getTokenTypeAt: function(pos) {
       pos = clipPos(this.doc, pos);
       var styles = getLineStyles(this, getLine(this.doc, pos.line));
       var before = 0, after = (styles.length - 1) / 2, ch = pos.ch;
-      if (ch == 0) return styles[2];
-      for (;;) {
+      var type;
+      if (ch == 0) type = styles[2];
+      else for (;;) {
         var mid = (before + after) >> 1;
         if ((mid ? styles[mid * 2 - 1] : 0) >= ch) after = mid;
         else if (styles[mid * 2 + 1] < ch) before = mid + 1;
-        else return styles[mid * 2 + 2];
+        else { type = styles[mid * 2 + 2]; break; }
       }
+      var cut = type ? type.indexOf("cm-overlay ") : -1;
+      return cut < 0 ? type : cut == 0 ? null : type.slice(0, cut - 1);
     },
 
     getModeAt: function(pos) {
@@ -2879,11 +4944,31 @@ window.CodeMirror = (function() {
     },
 
     getHelper: function(pos, type) {
-      if (!helpers.hasOwnProperty(type)) return;
+      return this.getHelpers(pos, type)[0];
+    },
+
+    getHelpers: function(pos, type) {
+      var found = [];
+      if (!helpers.hasOwnProperty(type)) return found;
       var help = helpers[type], mode = this.getModeAt(pos);
-      return mode[type] && help[mode[type]] ||
-        mode.helperType && help[mode.helperType] ||
-        help[mode.name];
+      if (typeof mode[type] == "string") {
+        if (help[mode[type]]) found.push(help[mode[type]]);
+      } else if (mode[type]) {
+        for (var i = 0; i < mode[type].length; i++) {
+          var val = help[mode[type][i]];
+          if (val) found.push(val);
+        }
+      } else if (mode.helperType && help[mode.helperType]) {
+        found.push(help[mode.helperType]);
+      } else if (help[mode.name]) {
+        found.push(help[mode.name]);
+      }
+      for (var i = 0; i < help._global.length; i++) {
+        var cur = help._global[i];
+        if (cur.pred(mode, this) && indexOf(found, cur.val) == -1)
+          found.push(cur.val);
+      }
+      return found;
     },
 
     getStateAfter: function(line, precise) {
@@ -2893,10 +4978,10 @@ window.CodeMirror = (function() {
     },
 
     cursorCoords: function(start, mode) {
-      var pos, sel = this.doc.sel;
-      if (start == null) pos = sel.head;
+      var pos, range = this.doc.sel.primary();
+      if (start == null) pos = range.head;
       else if (typeof start == "object") pos = clipPos(this.doc, start);
-      else pos = start ? sel.from : sel.to;
+      else pos = start ? range.from() : range.to();
       return cursorCoords(this, pos, mode || "page");
     },
 
@@ -2914,19 +4999,24 @@ window.CodeMirror = (function() {
       return lineAtHeight(this.doc, height + this.display.viewOffset);
     },
     heightAtLine: function(line, mode) {
-      var end = false, last = this.doc.first + this.doc.size - 1;
-      if (line < this.doc.first) line = this.doc.first;
-      else if (line > last) { line = last; end = true; }
-      var lineObj = getLine(this.doc, line);
-      return intoCoordSystem(this, getLine(this.doc, line), {top: 0, left: 0}, mode || "page").top +
-        (end ? lineObj.height : 0);
+      var end = false, lineObj;
+      if (typeof line == "number") {
+        var last = this.doc.first + this.doc.size - 1;
+        if (line < this.doc.first) line = this.doc.first;
+        else if (line > last) { line = last; end = true; }
+        lineObj = getLine(this.doc, line);
+      } else {
+        lineObj = line;
+      }
+      return intoCoordSystem(this, lineObj, {top: 0, left: 0}, mode || "page").top +
+        (end ? this.doc.height - heightAtLine(lineObj) : 0);
     },
 
     defaultTextHeight: function() { return textHeight(this.display); },
     defaultCharWidth: function() { return charWidth(this.display); },
 
-    setGutterMarker: operation(null, function(line, gutterID, value) {
-      return changeLine(this, line, function(line) {
+    setGutterMarker: methodOp(function(line, gutterID, value) {
+      return changeLine(this.doc, line, "gutter", function(line) {
         var markers = line.gutterMarkers || (line.gutterMarkers = {});
         markers[gutterID] = value;
         if (!value && isEmpty(markers)) line.gutterMarkers = null;
@@ -2934,50 +5024,18 @@ window.CodeMirror = (function() {
       });
     }),
 
-    clearGutter: operation(null, function(gutterID) {
+    clearGutter: methodOp(function(gutterID) {
       var cm = this, doc = cm.doc, i = doc.first;
       doc.iter(function(line) {
         if (line.gutterMarkers && line.gutterMarkers[gutterID]) {
           line.gutterMarkers[gutterID] = null;
-          regChange(cm, i, i + 1);
+          regLineChange(cm, i, "gutter");
           if (isEmpty(line.gutterMarkers)) line.gutterMarkers = null;
         }
         ++i;
       });
     }),
 
-    addLineClass: operation(null, function(handle, where, cls) {
-      return changeLine(this, handle, function(line) {
-        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
-        if (!line[prop]) line[prop] = cls;
-        else if (new RegExp("(?:^|\\s)" + cls + "(?:$|\\s)").test(line[prop])) return false;
-        else line[prop] += " " + cls;
-        return true;
-      });
-    }),
-
-    removeLineClass: operation(null, function(handle, where, cls) {
-      return changeLine(this, handle, function(line) {
-        var prop = where == "text" ? "textClass" : where == "background" ? "bgClass" : "wrapClass";
-        var cur = line[prop];
-        if (!cur) return false;
-        else if (cls == null) line[prop] = null;
-        else {
-          var found = cur.match(new RegExp("(?:^|\\s+)" + cls + "(?:$|\\s+)"));
-          if (!found) return false;
-          var end = found.index + found[0].length;
-          line[prop] = cur.slice(0, found.index) + (!found.index || end == cur.length ? "" : " ") + cur.slice(end) || null;
-        }
-        return true;
-      });
-    }),
-
-    addLineWidget: operation(null, function(handle, node, options) {
-      return addLineWidget(this, handle, node, options);
-    }),
-
-    removeLineWidget: function(widget) { widget.clear(); },
-
     lineInfo: function(line) {
       if (typeof line == "number") {
         if (!isLine(this.doc, line)) return null;
@@ -2993,13 +5051,15 @@ window.CodeMirror = (function() {
               widgets: line.widgets};
     },
 
-    getViewport: function() { return {from: this.display.showingFrom, to: this.display.showingTo};},
+    getViewport: function() { return {from: this.display.viewFrom, to: this.display.viewTo};},
 
     addWidget: function(pos, node, scroll, vert, horiz) {
       var display = this.display;
       pos = cursorCoords(this, clipPos(this.doc, pos));
       var top = pos.bottom, left = pos.left;
       node.style.position = "absolute";
+      node.setAttribute("cm-ignore-events", "true");
+      this.display.input.setUneditable(node);
       display.sizer.appendChild(node);
       if (vert == "over") {
         top = pos.top;
@@ -3028,9 +5088,16 @@ window.CodeMirror = (function() {
         scrollIntoView(this, left, top, left + node.offsetWidth, top + node.offsetHeight);
     },
 
-    triggerOnKeyDown: operation(null, onKeyDown),
+    triggerOnKeyDown: methodOp(onKeyDown),
+    triggerOnKeyPress: methodOp(onKeyPress),
+    triggerOnKeyUp: onKeyUp,
 
-    execCommand: function(cmd) {return commands[cmd](this);},
+    execCommand: function(cmd) {
+      if (commands.hasOwnProperty(cmd))
+        return commands[cmd].call(null, this);
+    },
+
+    triggerElectric: methodOp(function(text) { triggerElectric(this, text); }),
 
     findPosH: function(from, amount, unit, visually) {
       var dir = 1;
@@ -3042,20 +5109,25 @@ window.CodeMirror = (function() {
       return cur;
     },
 
-    moveH: operation(null, function(dir, unit) {
-      var sel = this.doc.sel, pos;
-      if (sel.shift || sel.extend || posEq(sel.from, sel.to))
-        pos = findPosH(this.doc, sel.head, dir, unit, this.options.rtlMoveVisually);
-      else
-        pos = dir < 0 ? sel.from : sel.to;
-      extendSelection(this.doc, pos, pos, dir);
+    moveH: methodOp(function(dir, unit) {
+      var cm = this;
+      cm.extendSelectionsBy(function(range) {
+        if (cm.display.shift || cm.doc.extend || range.empty())
+          return findPosH(cm.doc, range.head, dir, unit, cm.options.rtlMoveVisually);
+        else
+          return dir < 0 ? range.from() : range.to();
+      }, sel_move);
     }),
 
-    deleteH: operation(null, function(dir, unit) {
-      var sel = this.doc.sel;
-      if (!posEq(sel.from, sel.to)) replaceRange(this.doc, "", sel.from, sel.to, "+delete");
-      else replaceRange(this.doc, "", sel.from, findPosH(this.doc, sel.head, dir, unit, false), "+delete");
-      this.curOp.userSelChange = true;
+    deleteH: methodOp(function(dir, unit) {
+      var sel = this.doc.sel, doc = this.doc;
+      if (sel.somethingSelected())
+        doc.replaceSelection("", null, "+delete");
+      else
+        deleteNearSelection(this, function(range) {
+          var other = findPosH(doc, range.head, dir, unit, false);
+          return dir < 0 ? {from: other, to: range.head} : {from: range.head, to: other};
+        });
     }),
 
     findPosV: function(from, amount, unit, goalColumn) {
@@ -3071,78 +5143,135 @@ window.CodeMirror = (function() {
       return cur;
     },
 
-    moveV: operation(null, function(dir, unit) {
-      var sel = this.doc.sel;
-      var pos = cursorCoords(this, sel.head, "div");
-      if (sel.goalColumn != null) pos.left = sel.goalColumn;
-      var target = findPosV(this, pos, dir, unit);
-
-      if (unit == "page") addToScrollPos(this, 0, charCoords(this, target, "div").top - pos.top);
-      extendSelection(this.doc, target, target, dir);
-      sel.goalColumn = pos.left;
+    moveV: methodOp(function(dir, unit) {
+      var cm = this, doc = this.doc, goals = [];
+      var collapse = !cm.display.shift && !doc.extend && doc.sel.somethingSelected();
+      doc.extendSelectionsBy(function(range) {
+        if (collapse)
+          return dir < 0 ? range.from() : range.to();
+        var headPos = cursorCoords(cm, range.head, "div");
+        if (range.goalColumn != null) headPos.left = range.goalColumn;
+        goals.push(headPos.left);
+        var pos = findPosV(cm, headPos, dir, unit);
+        if (unit == "page" && range == doc.sel.primary())
+          addToScrollPos(cm, null, charCoords(cm, pos, "div").top - headPos.top);
+        return pos;
+      }, sel_move);
+      if (goals.length) for (var i = 0; i < doc.sel.ranges.length; i++)
+        doc.sel.ranges[i].goalColumn = goals[i];
     }),
 
+    // Find the word at the given position (as returned by coordsChar).
+    findWordAt: function(pos) {
+      var doc = this.doc, line = getLine(doc, pos.line).text;
+      var start = pos.ch, end = pos.ch;
+      if (line) {
+        var helper = this.getHelper(pos, "wordChars");
+        if ((pos.xRel < 0 || end == line.length) && start) --start; else ++end;
+        var startChar = line.charAt(start);
+        var check = isWordChar(startChar, helper)
+          ? function(ch) { return isWordChar(ch, helper); }
+          : /\s/.test(startChar) ? function(ch) {return /\s/.test(ch);}
+          : function(ch) {return !/\s/.test(ch) && !isWordChar(ch);};
+        while (start > 0 && check(line.charAt(start - 1))) --start;
+        while (end < line.length && check(line.charAt(end))) ++end;
+      }
+      return new Range(Pos(pos.line, start), Pos(pos.line, end));
+    },
+
     toggleOverwrite: function(value) {
       if (value != null && value == this.state.overwrite) return;
       if (this.state.overwrite = !this.state.overwrite)
-        this.display.cursor.className += " CodeMirror-overwrite";
+        addClass(this.display.cursorDiv, "CodeMirror-overwrite");
       else
-        this.display.cursor.className = this.display.cursor.className.replace(" CodeMirror-overwrite", "");
+        rmClass(this.display.cursorDiv, "CodeMirror-overwrite");
+
+      signal(this, "overwriteToggle", this, this.state.overwrite);
     },
-    hasFocus: function() { return this.state.focused; },
+    hasFocus: function() { return this.display.input.getField() == activeElt(); },
 
-    scrollTo: operation(null, function(x, y) {
-      updateScrollPos(this, x, y);
+    scrollTo: methodOp(function(x, y) {
+      if (x != null || y != null) resolveScrollToPos(this);
+      if (x != null) this.curOp.scrollLeft = x;
+      if (y != null) this.curOp.scrollTop = y;
     }),
     getScrollInfo: function() {
-      var scroller = this.display.scroller, co = scrollerCutOff;
+      var scroller = this.display.scroller;
       return {left: scroller.scrollLeft, top: scroller.scrollTop,
-              height: scroller.scrollHeight - co, width: scroller.scrollWidth - co,
-              clientHeight: scroller.clientHeight - co, clientWidth: scroller.clientWidth - co};
+              height: scroller.scrollHeight - scrollGap(this) - this.display.barHeight,
+              width: scroller.scrollWidth - scrollGap(this) - this.display.barWidth,
+              clientHeight: displayHeight(this), clientWidth: displayWidth(this)};
     },
 
-    scrollIntoView: operation(null, function(pos, margin) {
-      if (typeof pos == "number") pos = Pos(pos, 0);
-      if (!margin) margin = 0;
-      var coords = pos;
+    scrollIntoView: methodOp(function(range, margin) {
+      if (range == null) {
+        range = {from: this.doc.sel.primary().head, to: null};
+        if (margin == null) margin = this.options.cursorScrollMargin;
+      } else if (typeof range == "number") {
+        range = {from: Pos(range, 0), to: null};
+      } else if (range.from == null) {
+        range = {from: range, to: null};
+      }
+      if (!range.to) range.to = range.from;
+      range.margin = margin || 0;
 
-      if (!pos || pos.line != null) {
-        this.curOp.scrollToPos = pos ? clipPos(this.doc, pos) : this.doc.sel.head;
-        this.curOp.scrollToPosMargin = margin;
-        coords = cursorCoords(this, this.curOp.scrollToPos);
+      if (range.from.line != null) {
+        resolveScrollToPos(this);
+        this.curOp.scrollToPos = range;
+      } else {
+        var sPos = calculateScrollPos(this, Math.min(range.from.left, range.to.left),
+                                      Math.min(range.from.top, range.to.top) - range.margin,
+                                      Math.max(range.from.right, range.to.right),
+                                      Math.max(range.from.bottom, range.to.bottom) + range.margin);
+        this.scrollTo(sPos.scrollLeft, sPos.scrollTop);
       }
-      var sPos = calculateScrollPos(this, coords.left, coords.top - margin, coords.right, coords.bottom + margin);
-      updateScrollPos(this, sPos.scrollLeft, sPos.scrollTop);
     }),
 
-    setSize: function(width, height) {
+    setSize: methodOp(function(width, height) {
+      var cm = this;
       function interpret(val) {
         return typeof val == "number" || /^\d+$/.test(String(val)) ? val + "px" : val;
       }
-      if (width != null) this.display.wrapper.style.width = interpret(width);
-      if (height != null) this.display.wrapper.style.height = interpret(height);
-      this.refresh();
-    },
+      if (width != null) cm.display.wrapper.style.width = interpret(width);
+      if (height != null) cm.display.wrapper.style.height = interpret(height);
+      if (cm.options.lineWrapping) clearLineMeasurementCache(this);
+      var lineNo = cm.display.viewFrom;
+      cm.doc.iter(lineNo, cm.display.viewTo, function(line) {
+        if (line.widgets) for (var i = 0; i < line.widgets.length; i++)
+          if (line.widgets[i].noHScroll) { regLineChange(cm, lineNo, "widget"); break; }
+        ++lineNo;
+      });
+      cm.curOp.forceUpdate = true;
+      signal(cm, "refresh", this);
+    }),
 
     operation: function(f){return runInOp(this, f);},
 
-    refresh: operation(null, function() {
-      clearCaches(this);
-      updateScrollPos(this, this.doc.scrollLeft, this.doc.scrollTop);
+    refresh: methodOp(function() {
+      var oldHeight = this.display.cachedTextHeight;
       regChange(this);
+      this.curOp.forceUpdate = true;
+      clearCaches(this);
+      this.scrollTo(this.doc.scrollLeft, this.doc.scrollTop);
+      updateGutterSpace(this);
+      if (oldHeight == null || Math.abs(oldHeight - textHeight(this.display)) > .5)
+        estimateLineHeights(this);
+      signal(this, "refresh", this);
     }),
 
-    swapDoc: operation(null, function(doc) {
+    swapDoc: methodOp(function(doc) {
       var old = this.doc;
       old.cm = null;
       attachDoc(this, doc);
       clearCaches(this);
-      resetInput(this, true);
-      updateScrollPos(this, doc.scrollLeft, doc.scrollTop);
+      this.display.input.reset();
+      this.scrollTo(doc.scrollLeft, doc.scrollTop);
+      this.curOp.forceScroll = true;
+      signalLater(this, "swapDoc", this, old);
       return old;
     }),
 
-    getInputField: function(){return this.display.input;},
+    getInputField: function(){return this.display.input.getField();},
     getWrapperElement: function(){return this.display.wrapper;},
     getScrollerElement: function(){return this.display.scroller;},
     getGutterElement: function(){return this.display.gutters;}
@@ -3151,10 +5280,10 @@ window.CodeMirror = (function() {
 
   // OPTION DEFAULTS
 
-  var optionHandlers = CodeMirror.optionHandlers = {};
-
   // The default configuration options.
   var defaults = CodeMirror.defaults = {};
+  // Functions to run when options are changed.
+  var optionHandlers = CodeMirror.optionHandlers = {};
 
   function option(name, deflt, handle, notOnInit) {
     CodeMirror.defaults[name] = deflt;
@@ -3162,6 +5291,7 @@ window.CodeMirror = (function() {
       notOnInit ? function(cm, val, old) {if (old != Init) handle(cm, val, old);} : handle;
   }
 
+  // Passed to option handlers when there is no old value.
   var Init = CodeMirror.Init = {toString: function(){return "CodeMirror.Init";}};
 
   // These two are, on init, called from the constructor because they
@@ -3178,23 +5308,50 @@ window.CodeMirror = (function() {
   option("indentWithTabs", false);
   option("smartIndent", true);
   option("tabSize", 4, function(cm) {
-    loadMode(cm);
+    resetModeState(cm);
     clearCaches(cm);
     regChange(cm);
   }, true);
+  option("lineSeparator", null, function(cm, val) {
+    cm.doc.lineSep = val;
+    if (!val) return;
+    var newBreaks = [], lineNo = cm.doc.first;
+    cm.doc.iter(function(line) {
+      for (var pos = 0;;) {
+        var found = line.text.indexOf(val, pos);
+        if (found == -1) break;
+        pos = found + val.length;
+        newBreaks.push(Pos(lineNo, found));
+      }
+      lineNo++;
+    });
+    for (var i = newBreaks.length - 1; i >= 0; i--)
+      replaceRange(cm.doc, val, newBreaks[i], Pos(newBreaks[i].line, newBreaks[i].ch + val.length))
+  });
+  option("specialChars", /[\t\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/g, function(cm, val, old) {
+    cm.state.specialChars = new RegExp(val.source + (val.test("\t") ? "" : "|\t"), "g");
+    if (old != CodeMirror.Init) cm.refresh();
+  });
+  option("specialCharPlaceholder", defaultSpecialCharPlaceholder, function(cm) {cm.refresh();}, true);
   option("electricChars", true);
+  option("inputStyle", mobile ? "contenteditable" : "textarea", function() {
+    throw new Error("inputStyle can not (yet) be changed in a running editor"); // FIXME
+  }, true);
   option("rtlMoveVisually", !windows);
+  option("wholeLineUpdateBefore", true);
 
   option("theme", "default", function(cm) {
     themeChanged(cm);
     guttersChanged(cm);
   }, true);
-  option("keyMap", "default", keyMapChanged);
+  option("keyMap", "default", function(cm, val, old) {
+    var next = getKeyMap(val);
+    var prev = old != CodeMirror.Init && getKeyMap(old);
+    if (prev && prev.detach) prev.detach(cm, next);
+    if (next.attach) next.attach(cm, prev || null);
+  });
   option("extraKeys", null);
 
-  option("onKeyEvent", null);
-  option("onDragEvent", null);
-
   option("lineWrapping", false, wrappingChanged, true);
   option("gutters", [], function(cm) {
     setGuttersForLineNumbers(cm.options);
@@ -3204,7 +5361,13 @@ window.CodeMirror = (function() {
     cm.display.gutters.style.left = val ? compensateForHScroll(cm.display) + "px" : "0";
     cm.refresh();
   }, true);
-  option("coverGutterNextToScrollbar", false, updateScrollbars, true);
+  option("coverGutterNextToScrollbar", false, function(cm) {updateScrollbars(cm);}, true);
+  option("scrollbarStyle", "native", function(cm) {
+    initScrollbars(cm);
+    updateScrollbars(cm);
+    cm.display.scrollbars.setScrollTop(cm.doc.scrollTop);
+    cm.display.scrollbars.setScrollLeft(cm.doc.scrollLeft);
+  }, true);
   option("lineNumbers", false, function(cm) {
     setGuttersForLineNumbers(cm.options);
     guttersChanged(cm);
@@ -3213,29 +5376,41 @@ window.CodeMirror = (function() {
   option("lineNumberFormatter", function(integer) {return integer;}, guttersChanged, true);
   option("showCursorWhenSelecting", false, updateSelection, true);
 
+  option("resetSelectionOnContextMenu", true);
+  option("lineWiseCopyCut", true);
+
   option("readOnly", false, function(cm, val) {
-    if (val == "nocursor") {onBlur(cm); cm.display.input.blur();}
-    else if (!val) resetInput(cm, true);
+    if (val == "nocursor") {
+      onBlur(cm);
+      cm.display.input.blur();
+      cm.display.disabled = true;
+    } else {
+      cm.display.disabled = false;
+      if (!val) cm.display.input.reset();
+    }
   });
-  option("dragDrop", true);
+  option("disableInput", false, function(cm, val) {if (!val) cm.display.input.reset();}, true);
+  option("dragDrop", true, dragDropChanged);
 
   option("cursorBlinkRate", 530);
   option("cursorScrollMargin", 0);
-  option("cursorHeight", 1);
+  option("cursorHeight", 1, updateSelection, true);
+  option("singleCursorHeightPerLine", true, updateSelection, true);
   option("workTime", 100);
   option("workDelay", 100);
-  option("flattenSpans", true);
+  option("flattenSpans", true, resetModeState, true);
+  option("addModeClass", false, resetModeState, true);
   option("pollInterval", 100);
-  option("undoDepth", 40, function(cm, val){cm.doc.history.undoDepth = val;});
-  option("historyEventDelay", 500);
+  option("undoDepth", 200, function(cm, val){cm.doc.history.undoDepth = val;});
+  option("historyEventDelay", 1250);
   option("viewportMargin", 10, function(cm){cm.refresh();}, true);
-  option("maxHighlightLength", 10000, function(cm){loadMode(cm); cm.refresh();}, true);
+  option("maxHighlightLength", 10000, resetModeState, true);
   option("moveInputWithCursor", true, function(cm, val) {
-    if (!val) cm.display.inputDiv.style.top = cm.display.inputDiv.style.left = 0;
+    if (!val) cm.display.input.resetPosition();
   });
 
   option("tabindex", null, function(cm, val) {
-    cm.display.input.tabIndex = val || "";
+    cm.display.input.getField().tabIndex = val || "";
   });
   option("autofocus", null);
 
@@ -3244,12 +5419,13 @@ window.CodeMirror = (function() {
   // Known modes, by name and by MIME
   var modes = CodeMirror.modes = {}, mimeModes = CodeMirror.mimeModes = {};
 
+  // Extra arguments are stored as the mode's dependencies, which is
+  // used by (legacy) mechanisms like loadmode.js to automatically
+  // load a mode. (Preferred mechanism is the require/define calls.)
   CodeMirror.defineMode = function(name, mode) {
     if (!CodeMirror.defaults.mode && name != "null") CodeMirror.defaults.mode = name;
-    if (arguments.length > 2) {
-      mode.dependencies = [];
-      for (var i = 2; i < arguments.length; ++i) mode.dependencies.push(arguments[i]);
-    }
+    if (arguments.length > 2)
+      mode.dependencies = Array.prototype.slice.call(arguments, 2);
     modes[name] = mode;
   };
 
@@ -3257,11 +5433,14 @@ window.CodeMirror = (function() {
     mimeModes[mime] = spec;
   };
 
+  // Given a MIME type, a {name, ...options} config object, or a name
+  // string, return a mode config object.
   CodeMirror.resolveMode = function(spec) {
     if (typeof spec == "string" && mimeModes.hasOwnProperty(spec)) {
       spec = mimeModes[spec];
     } else if (spec && typeof spec.name == "string" && mimeModes.hasOwnProperty(spec.name)) {
       var found = mimeModes[spec.name];
+      if (typeof found == "string") found = {name: found};
       spec = createObj(found, spec);
       spec.name = found.name;
     } else if (typeof spec == "string" && /^[\w\-]+\/[\w\-]+\+xml$/.test(spec)) {
@@ -3271,6 +5450,8 @@ window.CodeMirror = (function() {
     else return spec || {name: "null"};
   };
 
+  // Given a mode spec (anything that resolveMode accepts), find and
+  // initialize an actual mode object.
   CodeMirror.getMode = function(options, spec) {
     var spec = CodeMirror.resolveMode(spec);
     var mfactory = modes[spec.name];
@@ -3285,15 +5466,21 @@ window.CodeMirror = (function() {
       }
     }
     modeObj.name = spec.name;
+    if (spec.helperType) modeObj.helperType = spec.helperType;
+    if (spec.modeProps) for (var prop in spec.modeProps)
+      modeObj[prop] = spec.modeProps[prop];
 
     return modeObj;
   };
 
+  // Minimal default mode.
   CodeMirror.defineMode("null", function() {
     return {token: function(stream) {stream.skipToEnd();}};
   });
   CodeMirror.defineMIME("text/plain", "null");
 
+  // This can be used to attach properties to mode objects from
+  // outside the actual mode definition.
   var modeExtensions = CodeMirror.modeExtensions = {};
   CodeMirror.extendMode = function(mode, properties) {
     var exts = modeExtensions.hasOwnProperty(mode) ? modeExtensions[mode] : (modeExtensions[mode] = {});
@@ -3315,19 +5502,20 @@ window.CodeMirror = (function() {
 
   var helpers = CodeMirror.helpers = {};
   CodeMirror.registerHelper = function(type, name, value) {
-    if (!helpers.hasOwnProperty(type)) helpers[type] = CodeMirror[type] = {};
+    if (!helpers.hasOwnProperty(type)) helpers[type] = CodeMirror[type] = {_global: []};
     helpers[type][name] = value;
   };
-
-  // UTILITIES
-
-  CodeMirror.isWordChar = isWordChar;
+  CodeMirror.registerGlobalHelper = function(type, name, predicate, value) {
+    CodeMirror.registerHelper(type, name, value);
+    helpers[type]._global.push({pred: predicate, val: value});
+  };
 
   // MODE STATE HANDLING
 
-  // Utility functions for working with state. Exported because modes
-  // sometimes need to do this.
-  function copyState(mode, state) {
+  // Utility functions for working with state. Exported because nested
+  // modes need to do this for their inner modes.
+
+  var copyState = CodeMirror.copyState = function(mode, state) {
     if (state === true) return state;
     if (mode.copyState) return mode.copyState(state);
     var nstate = {};
@@ -3337,17 +5525,18 @@ window.CodeMirror = (function() {
       nstate[n] = val;
     }
     return nstate;
-  }
-  CodeMirror.copyState = copyState;
+  };
 
-  function startState(mode, a1, a2) {
+  var startState = CodeMirror.startState = function(mode, a1, a2) {
     return mode.startState ? mode.startState(a1, a2) : true;
-  }
-  CodeMirror.startState = startState;
+  };
 
+  // Given a mode and a state (for that mode), find the inner mode and
+  // state at the position that the state refers to.
   CodeMirror.innerMode = function(mode, state) {
     while (mode.innerMode) {
       var info = mode.innerMode(state);
+      if (!info || info.mode == mode) break;
       state = info.state;
       mode = info.mode;
     }
@@ -3356,49 +5545,89 @@ window.CodeMirror = (function() {
 
   // STANDARD COMMANDS
 
+  // Commands are parameter-less actions that can be performed on an
+  // editor, mostly used for keybindings.
   var commands = CodeMirror.commands = {
-    selectAll: function(cm) {cm.setSelection(Pos(cm.firstLine(), 0), Pos(cm.lastLine()));},
+    selectAll: function(cm) {cm.setSelection(Pos(cm.firstLine(), 0), Pos(cm.lastLine()), sel_dontScroll);},
+    singleSelection: function(cm) {
+      cm.setSelection(cm.getCursor("anchor"), cm.getCursor("head"), sel_dontScroll);
+    },
     killLine: function(cm) {
-      var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
-      if (!sel && cm.getLine(from.line).length == from.ch)
-        cm.replaceRange("", from, Pos(from.line + 1, 0), "+delete");
-      else cm.replaceRange("", from, sel ? to : Pos(from.line), "+delete");
+      deleteNearSelection(cm, function(range) {
+        if (range.empty()) {
+          var len = getLine(cm.doc, range.head.line).text.length;
+          if (range.head.ch == len && range.head.line < cm.lastLine())
+            return {from: range.head, to: Pos(range.head.line + 1, 0)};
+          else
+            return {from: range.head, to: Pos(range.head.line, len)};
+        } else {
+          return {from: range.from(), to: range.to()};
+        }
+      });
     },
     deleteLine: function(cm) {
-      var l = cm.getCursor().line;
-      cm.replaceRange("", Pos(l, 0), Pos(l), "+delete");
+      deleteNearSelection(cm, function(range) {
+        return {from: Pos(range.from().line, 0),
+                to: clipPos(cm.doc, Pos(range.to().line + 1, 0))};
+      });
     },
     delLineLeft: function(cm) {
-      var cur = cm.getCursor();
-      cm.replaceRange("", Pos(cur.line, 0), cur, "+delete");
+      deleteNearSelection(cm, function(range) {
+        return {from: Pos(range.from().line, 0), to: range.from()};
+      });
+    },
+    delWrappedLineLeft: function(cm) {
+      deleteNearSelection(cm, function(range) {
+        var top = cm.charCoords(range.head, "div").top + 5;
+        var leftPos = cm.coordsChar({left: 0, top: top}, "div");
+        return {from: leftPos, to: range.from()};
+      });
+    },
+    delWrappedLineRight: function(cm) {
+      deleteNearSelection(cm, function(range) {
+        var top = cm.charCoords(range.head, "div").top + 5;
+        var rightPos = cm.coordsChar({left: cm.display.lineDiv.offsetWidth + 100, top: top}, "div");
+        return {from: range.from(), to: rightPos };
+      });
     },
     undo: function(cm) {cm.undo();},
     redo: function(cm) {cm.redo();},
+    undoSelection: function(cm) {cm.undoSelection();},
+    redoSelection: function(cm) {cm.redoSelection();},
     goDocStart: function(cm) {cm.extendSelection(Pos(cm.firstLine(), 0));},
     goDocEnd: function(cm) {cm.extendSelection(Pos(cm.lastLine()));},
     goLineStart: function(cm) {
-      cm.extendSelection(lineStart(cm, cm.getCursor().line));
+      cm.extendSelectionsBy(function(range) { return lineStart(cm, range.head.line); },
+                            {origin: "+move", bias: 1});
     },
     goLineStartSmart: function(cm) {
-      var cur = cm.getCursor(), start = lineStart(cm, cur.line);
-      var line = cm.getLineHandle(start.line);
-      var order = getOrder(line);
-      if (!order || order[0].level == 0) {
-        var firstNonWS = Math.max(0, line.text.search(/\S/));
-        var inWS = cur.line == start.line && cur.ch <= firstNonWS && cur.ch;
-        cm.extendSelection(Pos(start.line, inWS ? 0 : firstNonWS));
-      } else cm.extendSelection(start);
+      cm.extendSelectionsBy(function(range) {
+        return lineStartSmart(cm, range.head);
+      }, {origin: "+move", bias: 1});
     },
     goLineEnd: function(cm) {
-      cm.extendSelection(lineEnd(cm, cm.getCursor().line));
+      cm.extendSelectionsBy(function(range) { return lineEnd(cm, range.head.line); },
+                            {origin: "+move", bias: -1});
     },
     goLineRight: function(cm) {
-      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
-      cm.extendSelection(cm.coordsChar({left: cm.display.lineDiv.offsetWidth + 100, top: top}, "div"));
+      cm.extendSelectionsBy(function(range) {
+        var top = cm.charCoords(range.head, "div").top + 5;
+        return cm.coordsChar({left: cm.display.lineDiv.offsetWidth + 100, top: top}, "div");
+      }, sel_move);
     },
     goLineLeft: function(cm) {
-      var top = cm.charCoords(cm.getCursor(), "div").top + 5;
-      cm.extendSelection(cm.coordsChar({left: 0, top: top}, "div"));
+      cm.extendSelectionsBy(function(range) {
+        var top = cm.charCoords(range.head, "div").top + 5;
+        return cm.coordsChar({left: 0, top: top}, "div");
+      }, sel_move);
+    },
+    goLineLeftSmart: function(cm) {
+      cm.extendSelectionsBy(function(range) {
+        var top = cm.charCoords(range.head, "div").top + 5;
+        var pos = cm.coordsChar({left: 0, top: top}, "div");
+        if (pos.ch < cm.getLine(pos.line).search(/\S/)) return lineStartSmart(cm, range.head);
+        return pos;
+      }, sel_move);
     },
     goLineUp: function(cm) {cm.moveV(-1, "line");},
     goLineDown: function(cm) {cm.moveV(1, "line");},
@@ -3421,127 +5650,208 @@ window.CodeMirror = (function() {
     indentAuto: function(cm) {cm.indentSelection("smart");},
     indentMore: function(cm) {cm.indentSelection("add");},
     indentLess: function(cm) {cm.indentSelection("subtract");},
-    insertTab: function(cm) {cm.replaceSelection("\t", "end", "+input");},
+    insertTab: function(cm) {cm.replaceSelection("\t");},
+    insertSoftTab: function(cm) {
+      var spaces = [], ranges = cm.listSelections(), tabSize = cm.options.tabSize;
+      for (var i = 0; i < ranges.length; i++) {
+        var pos = ranges[i].from();
+        var col = countColumn(cm.getLine(pos.line), pos.ch, tabSize);
+        spaces.push(new Array(tabSize - col % tabSize + 1).join(" "));
+      }
+      cm.replaceSelections(spaces);
+    },
     defaultTab: function(cm) {
       if (cm.somethingSelected()) cm.indentSelection("add");
-      else cm.replaceSelection("\t", "end", "+input");
+      else cm.execCommand("insertTab");
     },
     transposeChars: function(cm) {
-      var cur = cm.getCursor(), line = cm.getLine(cur.line);
-      if (cur.ch > 0 && cur.ch < line.length - 1)
-        cm.replaceRange(line.charAt(cur.ch) + line.charAt(cur.ch - 1),
-                        Pos(cur.line, cur.ch - 1), Pos(cur.line, cur.ch + 1));
+      runInOp(cm, function() {
+        var ranges = cm.listSelections(), newSel = [];
+        for (var i = 0; i < ranges.length; i++) {
+          var cur = ranges[i].head, line = getLine(cm.doc, cur.line).text;
+          if (line) {
+            if (cur.ch == line.length) cur = new Pos(cur.line, cur.ch - 1);
+            if (cur.ch > 0) {
+              cur = new Pos(cur.line, cur.ch + 1);
+              cm.replaceRange(line.charAt(cur.ch - 1) + line.charAt(cur.ch - 2),
+                              Pos(cur.line, cur.ch - 2), cur, "+transpose");
+            } else if (cur.line > cm.doc.first) {
+              var prev = getLine(cm.doc, cur.line - 1).text;
+              if (prev)
+                cm.replaceRange(line.charAt(0) + cm.doc.lineSeparator() +
+                                prev.charAt(prev.length - 1),
+                                Pos(cur.line - 1, prev.length - 1), Pos(cur.line, 1), "+transpose");
+            }
+          }
+          newSel.push(new Range(cur, cur));
+        }
+        cm.setSelections(newSel);
+      });
     },
     newlineAndIndent: function(cm) {
-      operation(cm, function() {
-        cm.replaceSelection("\n", "end", "+input");
-        cm.indentLine(cm.getCursor().line, null, true);
-      })();
+      runInOp(cm, function() {
+        var len = cm.listSelections().length;
+        for (var i = 0; i < len; i++) {
+          var range = cm.listSelections()[i];
+          cm.replaceRange(cm.doc.lineSeparator(), range.anchor, range.head, "+input");
+          cm.indentLine(range.from().line + 1, null, true);
+          ensureCursorVisible(cm);
+        }
+      });
     },
     toggleOverwrite: function(cm) {cm.toggleOverwrite();}
   };
 
+
   // STANDARD KEYMAPS
 
   var keyMap = CodeMirror.keyMap = {};
+
   keyMap.basic = {
     "Left": "goCharLeft", "Right": "goCharRight", "Up": "goLineUp", "Down": "goLineDown",
     "End": "goLineEnd", "Home": "goLineStartSmart", "PageUp": "goPageUp", "PageDown": "goPageDown",
-    "Delete": "delCharAfter", "Backspace": "delCharBefore", "Tab": "defaultTab", "Shift-Tab": "indentAuto",
-    "Enter": "newlineAndIndent", "Insert": "toggleOverwrite"
+    "Delete": "delCharAfter", "Backspace": "delCharBefore", "Shift-Backspace": "delCharBefore",
+    "Tab": "defaultTab", "Shift-Tab": "indentAuto",
+    "Enter": "newlineAndIndent", "Insert": "toggleOverwrite",
+    "Esc": "singleSelection"
   };
   // Note that the save and find-related commands aren't defined by
-  // default. Unknown commands are simply ignored.
+  // default. User code or addons can define them. Unknown commands
+  // are simply ignored.
   keyMap.pcDefault = {
     "Ctrl-A": "selectAll", "Ctrl-D": "deleteLine", "Ctrl-Z": "undo", "Shift-Ctrl-Z": "redo", "Ctrl-Y": "redo",
-    "Ctrl-Home": "goDocStart", "Alt-Up": "goDocStart", "Ctrl-End": "goDocEnd", "Ctrl-Down": "goDocEnd",
+    "Ctrl-Home": "goDocStart", "Ctrl-End": "goDocEnd", "Ctrl-Up": "goLineUp", "Ctrl-Down": "goLineDown",
     "Ctrl-Left": "goGroupLeft", "Ctrl-Right": "goGroupRight", "Alt-Left": "goLineStart", "Alt-Right": "goLineEnd",
     "Ctrl-Backspace": "delGroupBefore", "Ctrl-Delete": "delGroupAfter", "Ctrl-S": "save", "Ctrl-F": "find",
     "Ctrl-G": "findNext", "Shift-Ctrl-G": "findPrev", "Shift-Ctrl-F": "replace", "Shift-Ctrl-R": "replaceAll",
     "Ctrl-[": "indentLess", "Ctrl-]": "indentMore",
+    "Ctrl-U": "undoSelection", "Shift-Ctrl-U": "redoSelection", "Alt-U": "redoSelection",
     fallthrough: "basic"
   };
+  // Very basic readline/emacs-style bindings, which are standard on Mac.
+  keyMap.emacsy = {
+    "Ctrl-F": "goCharRight", "Ctrl-B": "goCharLeft", "Ctrl-P": "goLineUp", "Ctrl-N": "goLineDown",
+    "Alt-F": "goWordRight", "Alt-B": "goWordLeft", "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd",
+    "Ctrl-V": "goPageDown", "Shift-Ctrl-V": "goPageUp", "Ctrl-D": "delCharAfter", "Ctrl-H": "delCharBefore",
+    "Alt-D": "delWordAfter", "Alt-Backspace": "delWordBefore", "Ctrl-K": "killLine", "Ctrl-T": "transposeChars"
+  };
   keyMap.macDefault = {
     "Cmd-A": "selectAll", "Cmd-D": "deleteLine", "Cmd-Z": "undo", "Shift-Cmd-Z": "redo", "Cmd-Y": "redo",
-    "Cmd-Up": "goDocStart", "Cmd-End": "goDocEnd", "Cmd-Down": "goDocEnd", "Alt-Left": "goGroupLeft",
-    "Alt-Right": "goGroupRight", "Cmd-Left": "goLineStart", "Cmd-Right": "goLineEnd", "Alt-Backspace": "delGroupBefore",
+    "Cmd-Home": "goDocStart", "Cmd-Up": "goDocStart", "Cmd-End": "goDocEnd", "Cmd-Down": "goDocEnd", "Alt-Left": "goGroupLeft",
+    "Alt-Right": "goGroupRight", "Cmd-Left": "goLineLeft", "Cmd-Right": "goLineRight", "Alt-Backspace": "delGroupBefore",
     "Ctrl-Alt-Backspace": "delGroupAfter", "Alt-Delete": "delGroupAfter", "Cmd-S": "save", "Cmd-F": "find",
     "Cmd-G": "findNext", "Shift-Cmd-G": "findPrev", "Cmd-Alt-F": "replace", "Shift-Cmd-Alt-F": "replaceAll",
-    "Cmd-[": "indentLess", "Cmd-]": "indentMore", "Cmd-Backspace": "delLineLeft",
+    "Cmd-[": "indentLess", "Cmd-]": "indentMore", "Cmd-Backspace": "delWrappedLineLeft", "Cmd-Delete": "delWrappedLineRight",
+    "Cmd-U": "undoSelection", "Shift-Cmd-U": "redoSelection", "Ctrl-Up": "goDocStart", "Ctrl-Down": "goDocEnd",
     fallthrough: ["basic", "emacsy"]
   };
   keyMap["default"] = mac ? keyMap.macDefault : keyMap.pcDefault;
-  keyMap.emacsy = {
-    "Ctrl-F": "goCharRight", "Ctrl-B": "goCharLeft", "Ctrl-P": "goLineUp", "Ctrl-N": "goLineDown",
-    "Alt-F": "goWordRight", "Alt-B": "goWordLeft", "Ctrl-A": "goLineStart", "Ctrl-E": "goLineEnd",
-    "Ctrl-V": "goPageDown", "Shift-Ctrl-V": "goPageUp", "Ctrl-D": "delCharAfter", "Ctrl-H": "delCharBefore",
-    "Alt-D": "delWordAfter", "Alt-Backspace": "delWordBefore", "Ctrl-K": "killLine", "Ctrl-T": "transposeChars"
-  };
 
   // KEYMAP DISPATCH
 
-  function getKeyMap(val) {
-    if (typeof val == "string") return keyMap[val];
-    else return val;
-  }
-
-  function lookupKey(name, maps, handle) {
-    function lookup(map) {
-      map = getKeyMap(map);
-      var found = map[name];
-      if (found === false) return "stop";
-      if (found != null && handle(found)) return true;
-      if (map.nofallthrough) return "stop";
-
-      var fallthrough = map.fallthrough;
-      if (fallthrough == null) return false;
-      if (Object.prototype.toString.call(fallthrough) != "[object Array]")
-        return lookup(fallthrough);
-      for (var i = 0, e = fallthrough.length; i < e; ++i) {
-        var done = lookup(fallthrough[i]);
-        if (done) return done;
+  function normalizeKeyName(name) {
+    var parts = name.split(/-(?!$)/), name = parts[parts.length - 1];
+    var alt, ctrl, shift, cmd;
+    for (var i = 0; i < parts.length - 1; i++) {
+      var mod = parts[i];
+      if (/^(cmd|meta|m)$/i.test(mod)) cmd = true;
+      else if (/^a(lt)?$/i.test(mod)) alt = true;
+      else if (/^(c|ctrl|control)$/i.test(mod)) ctrl = true;
+      else if (/^s(hift)$/i.test(mod)) shift = true;
+      else throw new Error("Unrecognized modifier name: " + mod);
+    }
+    if (alt) name = "Alt-" + name;
+    if (ctrl) name = "Ctrl-" + name;
+    if (cmd) name = "Cmd-" + name;
+    if (shift) name = "Shift-" + name;
+    return name;
+  }
+
+  // This is a kludge to keep keymaps mostly working as raw objects
+  // (backwards compatibility) while at the same time support features
+  // like normalization and multi-stroke key bindings. It compiles a
+  // new normalized keymap, and then updates the old object to reflect
+  // this.
+  CodeMirror.normalizeKeyMap = function(keymap) {
+    var copy = {};
+    for (var keyname in keymap) if (keymap.hasOwnProperty(keyname)) {
+      var value = keymap[keyname];
+      if (/^(name|fallthrough|(de|at)tach)$/.test(keyname)) continue;
+      if (value == "...") { delete keymap[keyname]; continue; }
+
+      var keys = map(keyname.split(" "), normalizeKeyName);
+      for (var i = 0; i < keys.length; i++) {
+        var val, name;
+        if (i == keys.length - 1) {
+          name = keys.join(" ");
+          val = value;
+        } else {
+          name = keys.slice(0, i + 1).join(" ");
+          val = "...";
+        }
+        var prev = copy[name];
+        if (!prev) copy[name] = val;
+        else if (prev != val) throw new Error("Inconsistent bindings for " + name);
       }
-      return false;
+      delete keymap[keyname];
     }
+    for (var prop in copy) keymap[prop] = copy[prop];
+    return keymap;
+  };
 
-    for (var i = 0; i < maps.length; ++i) {
-      var done = lookup(maps[i]);
-      if (done) return done != "stop";
+  var lookupKey = CodeMirror.lookupKey = function(key, map, handle, context) {
+    map = getKeyMap(map);
+    var found = map.call ? map.call(key, context) : map[key];
+    if (found === false) return "nothing";
+    if (found === "...") return "multi";
+    if (found != null && handle(found)) return "handled";
+
+    if (map.fallthrough) {
+      if (Object.prototype.toString.call(map.fallthrough) != "[object Array]")
+        return lookupKey(key, map.fallthrough, handle, context);
+      for (var i = 0; i < map.fallthrough.length; i++) {
+        var result = lookupKey(key, map.fallthrough[i], handle, context);
+        if (result) return result;
+      }
     }
-  }
-  function isModifierKey(event) {
-    var name = keyNames[event.keyCode];
+  };
+
+  // Modifier key presses don't count as 'real' key presses for the
+  // purpose of keymap fallthrough.
+  var isModifierKey = CodeMirror.isModifierKey = function(value) {
+    var name = typeof value == "string" ? value : keyNames[value.keyCode];
     return name == "Ctrl" || name == "Alt" || name == "Shift" || name == "Mod";
-  }
-  function keyName(event, noShift) {
-    if (opera && event.keyCode == 34 && event["char"]) return false;
-    var name = keyNames[event.keyCode];
+  };
+
+  // Look up the name of a key as indicated by an event object.
+  var keyName = CodeMirror.keyName = function(event, noShift) {
+    if (presto && event.keyCode == 34 && event["char"]) return false;
+    var base = keyNames[event.keyCode], name = base;
     if (name == null || event.altGraphKey) return false;
-    if (event.altKey) name = "Alt-" + name;
-    if (flipCtrlCmd ? event.metaKey : event.ctrlKey) name = "Ctrl-" + name;
-    if (flipCtrlCmd ? event.ctrlKey : event.metaKey) name = "Cmd-" + name;
-    if (!noShift && event.shiftKey) name = "Shift-" + name;
+    if (event.altKey && base != "Alt") name = "Alt-" + name;
+    if ((flipCtrlCmd ? event.metaKey : event.ctrlKey) && base != "Ctrl") name = "Ctrl-" + name;
+    if ((flipCtrlCmd ? event.ctrlKey : event.metaKey) && base != "Cmd") name = "Cmd-" + name;
+    if (!noShift && event.shiftKey && base != "Shift") name = "Shift-" + name;
     return name;
+  };
+
+  function getKeyMap(val) {
+    return typeof val == "string" ? keyMap[val] : val;
   }
-  CodeMirror.lookupKey = lookupKey;
-  CodeMirror.isModifierKey = isModifierKey;
-  CodeMirror.keyName = keyName;
 
   // FROMTEXTAREA
 
   CodeMirror.fromTextArea = function(textarea, options) {
-    if (!options) options = {};
+    options = options ? copyObj(options) : {};
     options.value = textarea.value;
-    if (!options.tabindex && textarea.tabindex)
-      options.tabindex = textarea.tabindex;
+    if (!options.tabindex && textarea.tabIndex)
+      options.tabindex = textarea.tabIndex;
     if (!options.placeholder && textarea.placeholder)
       options.placeholder = textarea.placeholder;
     // Set autofocus to true if this textarea is focused, or if it has
     // autofocus and no other element is focused.
     if (options.autofocus == null) {
-      var hasFocus = document.body;
-      // doc.activeElement occasionally throws on IE
-      try { hasFocus = document.activeElement; } catch(e) {}
+      var hasFocus = activeElt();
       options.autofocus = hasFocus == textarea ||
         textarea.getAttribute("autofocus") != null && hasFocus == document.body;
     }
@@ -3563,22 +5873,26 @@ window.CodeMirror = (function() {
       }
     }
 
+    options.finishInit = function(cm) {
+      cm.save = save;
+      cm.getTextArea = function() { return textarea; };
+      cm.toTextArea = function() {
+        cm.toTextArea = isNaN; // Prevent this from being ran twice
+        save();
+        textarea.parentNode.removeChild(cm.getWrapperElement());
+        textarea.style.display = "";
+        if (textarea.form) {
+          off(textarea.form, "submit", save);
+          if (typeof textarea.form.submit == "function")
+            textarea.form.submit = realSubmit;
+        }
+      };
+    };
+
     textarea.style.display = "none";
     var cm = CodeMirror(function(node) {
       textarea.parentNode.insertBefore(node, textarea.nextSibling);
     }, options);
-    cm.save = save;
-    cm.getTextArea = function() { return textarea; };
-    cm.toTextArea = function() {
-      save();
-      textarea.parentNode.removeChild(cm.getWrapperElement());
-      textarea.style.display = "";
-      if (textarea.form) {
-        off(textarea.form, "submit", save);
-        if (typeof textarea.form.submit == "function")
-          textarea.form.submit = realSubmit;
-      }
-    };
     return cm;
   };
 
@@ -3587,17 +5901,17 @@ window.CodeMirror = (function() {
   // Fed to the mode parsers, provides helper functions to make
   // parsers more succinct.
 
-  // The character stream used by a mode's parser.
-  function StringStream(string, tabSize) {
+  var StringStream = CodeMirror.StringStream = function(string, tabSize) {
     this.pos = this.start = 0;
     this.string = string;
     this.tabSize = tabSize || 8;
     this.lastColumnPos = this.lastColumnValue = 0;
-  }
+    this.lineStart = 0;
+  };
 
   StringStream.prototype = {
     eol: function() {return this.pos >= this.string.length;},
-    sol: function() {return this.pos == 0;},
+    sol: function() {return this.pos == this.lineStart;},
     peek: function() {return this.string.charAt(this.pos) || undefined;},
     next: function() {
       if (this.pos < this.string.length)
@@ -3630,9 +5944,12 @@ window.CodeMirror = (function() {
         this.lastColumnValue = countColumn(this.string, this.start, this.tabSize, this.lastColumnPos, this.lastColumnValue);
         this.lastColumnPos = this.start;
       }
-      return this.lastColumnValue;
+      return this.lastColumnValue - (this.lineStart ? countColumn(this.string, this.lineStart, this.tabSize) : 0);
+    },
+    indentation: function() {
+      return countColumn(this.string, null, this.tabSize) -
+        (this.lineStart ? countColumn(this.string, this.lineStart, this.tabSize) : 0);
     },
-    indentation: function() {return countColumn(this.string, null, this.tabSize);},
     match: function(pattern, consume, caseInsensitive) {
       if (typeof pattern == "string") {
         var cased = function(str) {return caseInsensitive ? str.toLowerCase() : str;};
@@ -3648,37 +5965,60 @@ window.CodeMirror = (function() {
         return match;
       }
     },
-    current: function(){return this.string.slice(this.start, this.pos);}
+    current: function(){return this.string.slice(this.start, this.pos);},
+    hideFirstChars: function(n, inner) {
+      this.lineStart += n;
+      try { return inner(); }
+      finally { this.lineStart -= n; }
+    }
   };
-  CodeMirror.StringStream = StringStream;
 
   // TEXTMARKERS
 
-  function TextMarker(doc, type) {
+  // Created with markText and setBookmark methods. A TextMarker is a
+  // handle that can be used to clear or find a marked position in the
+  // document. Line objects hold arrays (markedSpans) containing
+  // {from, to, marker} object pointing to such marker objects, and
+  // indicating that such a marker is present on that line. Multiple
+  // lines may point to the same marker when it spans across lines.
+  // The spans will have null for their from/to properties when the
+  // marker continues beyond the start/end of the line. Markers have
+  // links back to the lines they currently touch.
+
+  var nextMarkerId = 0;
+
+  var TextMarker = CodeMirror.TextMarker = function(doc, type) {
     this.lines = [];
     this.type = type;
     this.doc = doc;
-  }
-  CodeMirror.TextMarker = TextMarker;
+    this.id = ++nextMarkerId;
+  };
   eventMixin(TextMarker);
 
+  // Clear the marker.
   TextMarker.prototype.clear = function() {
     if (this.explicitlyCleared) return;
     var cm = this.doc.cm, withOp = cm && !cm.curOp;
     if (withOp) startOperation(cm);
+    if (hasHandler(this, "clear")) {
+      var found = this.find();
+      if (found) signalLater(this, "clear", found.from, found.to);
+    }
     var min = null, max = null;
     for (var i = 0; i < this.lines.length; ++i) {
       var line = this.lines[i];
       var span = getMarkedSpanFor(line.markedSpans, this);
-      if (span.to != null) max = lineNo(line);
+      if (cm && !this.collapsed) regLineChange(cm, lineNo(line), "text");
+      else if (cm) {
+        if (span.to != null) max = lineNo(line);
+        if (span.from != null) min = lineNo(line);
+      }
       line.markedSpans = removeMarkedSpan(line.markedSpans, span);
-      if (span.from != null)
-        min = lineNo(line);
-      else if (this.collapsed && !lineIsHidden(this.doc, line) && cm)
+      if (span.from == null && this.collapsed && !lineIsHidden(this.doc, line) && cm)
         updateLineHeight(line, textHeight(cm.display));
     }
     if (cm && this.collapsed && !cm.options.lineWrapping) for (var i = 0; i < this.lines.length; ++i) {
-      var visual = visualLine(cm.doc, this.lines[i]), len = lineLength(cm.doc, visual);
+      var visual = visualLine(this.lines[i]), len = lineLength(visual);
       if (len > cm.display.maxLineLength) {
         cm.display.maxLine = visual;
         cm.display.maxLineLength = len;
@@ -3686,44 +6026,62 @@ window.CodeMirror = (function() {
       }
     }
 
-    if (min != null && cm) regChange(cm, min, max + 1);
+    if (min != null && cm && this.collapsed) regChange(cm, min, max + 1);
     this.lines.length = 0;
     this.explicitlyCleared = true;
     if (this.atomic && this.doc.cantEdit) {
       this.doc.cantEdit = false;
-      if (cm) reCheckSelection(cm);
+      if (cm) reCheckSelection(cm.doc);
     }
+    if (cm) signalLater(cm, "markerCleared", cm, this);
     if (withOp) endOperation(cm);
-    signalLater(this, "clear");
+    if (this.parent) this.parent.clear();
   };
 
-  TextMarker.prototype.find = function() {
+  // Find the position of the marker in the document. Returns a {from,
+  // to} object by default. Side can be passed to get a specific side
+  // -- 0 (both), -1 (left), or 1 (right). When lineObj is true, the
+  // Pos objects returned contain a line object, rather than a line
+  // number (used to prevent looking up the same line twice).
+  TextMarker.prototype.find = function(side, lineObj) {
+    if (side == null && this.type == "bookmark") side = 1;
     var from, to;
     for (var i = 0; i < this.lines.length; ++i) {
       var line = this.lines[i];
       var span = getMarkedSpanFor(line.markedSpans, this);
-      if (span.from != null || span.to != null) {
-        var found = lineNo(line);
-        if (span.from != null) from = Pos(found, span.from);
-        if (span.to != null) to = Pos(found, span.to);
+      if (span.from != null) {
+        from = Pos(lineObj ? line : lineNo(line), span.from);
+        if (side == -1) return from;
+      }
+      if (span.to != null) {
+        to = Pos(lineObj ? line : lineNo(line), span.to);
+        if (side == 1) return to;
       }
     }
-    if (this.type == "bookmark") return from;
     return from && {from: from, to: to};
   };
 
+  // Signals that the marker's widget changed, and surrounding layout
+  // should be recomputed.
   TextMarker.prototype.changed = function() {
-    var pos = this.find(), cm = this.doc.cm;
+    var pos = this.find(-1, true), widget = this, cm = this.doc.cm;
     if (!pos || !cm) return;
-    var line = getLine(this.doc, pos.from.line);
-    clearCachedMeasurement(cm, line);
-    if (pos.from.line >= cm.display.showingFrom && pos.from.line < cm.display.showingTo) {
-      for (var node = cm.display.lineDiv.firstChild; node; node = node.nextSibling) if (node.lineObj == line) {
-        if (node.offsetHeight != line.height) updateLineHeight(line, node.offsetHeight);
-        break;
+    runInOp(cm, function() {
+      var line = pos.line, lineN = lineNo(pos.line);
+      var view = findViewForLine(cm, lineN);
+      if (view) {
+        clearLineMeasurementCacheFor(view);
+        cm.curOp.selectionChanged = cm.curOp.forceUpdate = true;
       }
-      runInOp(cm, function() { cm.curOp.selectionChanged = true; });
-    }
+      cm.curOp.updateMaxLine = true;
+      if (!lineIsHidden(widget.doc, line) && widget.height != null) {
+        var oldHeight = widget.height;
+        widget.height = null;
+        var dHeight = widgetHeight(widget) - oldHeight;
+        if (dHeight)
+          updateLineHeight(line, line.height + dHeight);
+      }
+    });
   };
 
   TextMarker.prototype.attachLine = function(line) {
@@ -3742,40 +6100,53 @@ window.CodeMirror = (function() {
     }
   };
 
+  // Collapsed markers have unique ids, in order to be able to order
+  // them, which is needed for uniquely determining an outer marker
+  // when they overlap (they may nest, but not partially overlap).
+  var nextMarkerId = 0;
+
+  // Create a marker, wire it up to the right lines, and
   function markText(doc, from, to, options, type) {
+    // Shared markers (across linked documents) are handled separately
+    // (markTextShared will call out to this again, once per
+    // document).
     if (options && options.shared) return markTextShared(doc, from, to, options, type);
+    // Ensure we are in an operation.
     if (doc.cm && !doc.cm.curOp) return operation(doc.cm, markText)(doc, from, to, options, type);
 
-    var marker = new TextMarker(doc, type);
-    if (type == "range" && !posLess(from, to)) return marker;
-    if (options) copyObj(options, marker);
+    var marker = new TextMarker(doc, type), diff = cmp(from, to);
+    if (options) copyObj(options, marker, false);
+    // Don't connect empty markers unless clearWhenEmpty is false
+    if (diff > 0 || diff == 0 && marker.clearWhenEmpty !== false)
+      return marker;
     if (marker.replacedWith) {
+      // Showing up as a widget implies collapsed (widget replaces text)
       marker.collapsed = true;
-      marker.replacedWith = elt("span", [marker.replacedWith], "CodeMirror-widget");
-      if (!options.handleMouseEvents) marker.replacedWith.ignoreEvents = true;
+      marker.widgetNode = elt("span", [marker.replacedWith], "CodeMirror-widget");
+      if (!options.handleMouseEvents) marker.widgetNode.setAttribute("cm-ignore-events", "true");
+      if (options.insertLeft) marker.widgetNode.insertLeft = true;
+    }
+    if (marker.collapsed) {
+      if (conflictingCollapsedRange(doc, from.line, from, to, marker) ||
+          from.line != to.line && conflictingCollapsedRange(doc, to.line, from, to, marker))
+        throw new Error("Inserting collapsed marker partially overlapping an existing one");
+      sawCollapsedSpans = true;
     }
-    if (marker.collapsed) sawCollapsedSpans = true;
 
     if (marker.addToHistory)
-      addToHistory(doc, {from: from, to: to, origin: "markText"},
-                   {head: doc.sel.head, anchor: doc.sel.anchor}, NaN);
+      addChangeToHistory(doc, {from: from, to: to, origin: "markText"}, doc.sel, NaN);
 
-    var curLine = from.line, size = 0, collapsedAtStart, collapsedAtEnd, cm = doc.cm, updateMaxLine;
+    var curLine = from.line, cm = doc.cm, updateMaxLine;
     doc.iter(curLine, to.line + 1, function(line) {
-      if (cm && marker.collapsed && !cm.options.lineWrapping && visualLine(doc, line) == cm.display.maxLine)
+      if (cm && marker.collapsed && !cm.options.lineWrapping && visualLine(line) == cm.display.maxLine)
         updateMaxLine = true;
-      var span = {from: null, to: null, marker: marker};
-      size += line.text.length;
-      if (curLine == from.line) {span.from = from.ch; size -= from.ch;}
-      if (curLine == to.line) {span.to = to.ch; size -= line.text.length - to.ch;}
-      if (marker.collapsed) {
-        if (curLine == to.line) collapsedAtEnd = collapsedSpanAt(line, to.ch);
-        if (curLine == from.line) collapsedAtStart = collapsedSpanAt(line, from.ch);
-        else updateLineHeight(line, 0);
-      }
-      addMarkedSpan(line, span);
+      if (marker.collapsed && curLine != from.line) updateLineHeight(line, 0);
+      addMarkedSpan(line, new MarkedSpan(marker,
+                                         curLine == from.line ? from.ch : null,
+                                         curLine == to.line ? to.ch : null));
       ++curLine;
     });
+    // lineIsHidden depends on the presence of the spans, so needs a second pass
     if (marker.collapsed) doc.iter(from.line, to.line + 1, function(line) {
       if (lineIsHidden(doc, line)) updateLineHeight(line, 0);
     });
@@ -3788,31 +6159,33 @@ window.CodeMirror = (function() {
         doc.clearHistory();
     }
     if (marker.collapsed) {
-      if (collapsedAtStart != collapsedAtEnd)
-        throw new Error("Inserting collapsed marker overlapping an existing one");
-      marker.size = size;
+      marker.id = ++nextMarkerId;
       marker.atomic = true;
     }
     if (cm) {
+      // Sync editor state
       if (updateMaxLine) cm.curOp.updateMaxLine = true;
-      if (marker.className || marker.title || marker.startStyle || marker.endStyle || marker.collapsed)
+      if (marker.collapsed)
         regChange(cm, from.line, to.line + 1);
-      if (marker.atomic) reCheckSelection(cm);
+      else if (marker.className || marker.title || marker.startStyle || marker.endStyle || marker.css)
+        for (var i = from.line; i <= to.line; i++) regLineChange(cm, i, "text");
+      if (marker.atomic) reCheckSelection(cm.doc);
+      signalLater(cm, "markerAdded", cm, marker);
     }
     return marker;
   }
 
   // SHARED TEXTMARKERS
 
-  function SharedTextMarker(markers, primary) {
+  // A shared marker spans multiple linked documents. It is
+  // implemented as a meta-marker-object controlling multiple normal
+  // markers.
+  var SharedTextMarker = CodeMirror.SharedTextMarker = function(markers, primary) {
     this.markers = markers;
     this.primary = primary;
-    for (var i = 0, me = this; i < markers.length; ++i) {
+    for (var i = 0; i < markers.length; ++i)
       markers[i].parent = this;
-      on(markers[i], "clear", function(){me.clear();});
-    }
-  }
-  CodeMirror.SharedTextMarker = SharedTextMarker;
+  };
   eventMixin(SharedTextMarker);
 
   SharedTextMarker.prototype.clear = function() {
@@ -3822,17 +6195,17 @@ window.CodeMirror = (function() {
       this.markers[i].clear();
     signalLater(this, "clear");
   };
-  SharedTextMarker.prototype.find = function() {
-    return this.primary.find();
+  SharedTextMarker.prototype.find = function(side, lineObj) {
+    return this.primary.find(side, lineObj);
   };
 
   function markTextShared(doc, from, to, options, type) {
     options = copyObj(options);
     options.shared = false;
     var markers = [markText(doc, from, to, options, type)], primary = markers[0];
-    var widget = options.replacedWith;
+    var widget = options.widgetNode;
     linkedDocs(doc, function(doc) {
-      if (widget) options.replacedWith = widget.cloneNode(true);
+      if (widget) options.widgetNode = widget.cloneNode(true);
       markers.push(markText(doc, clipPos(doc, from), clipPos(doc, to), options, type));
       for (var i = 0; i < doc.linked.length; ++i)
         if (doc.linked[i].isParent) return;
@@ -3841,58 +6214,105 @@ window.CodeMirror = (function() {
     return new SharedTextMarker(markers, primary);
   }
 
+  function findSharedMarkers(doc) {
+    return doc.findMarks(Pos(doc.first, 0), doc.clipPos(Pos(doc.lastLine())),
+                         function(m) { return m.parent; });
+  }
+
+  function copySharedMarkers(doc, markers) {
+    for (var i = 0; i < markers.length; i++) {
+      var marker = markers[i], pos = marker.find();
+      var mFrom = doc.clipPos(pos.from), mTo = doc.clipPos(pos.to);
+      if (cmp(mFrom, mTo)) {
+        var subMark = markText(doc, mFrom, mTo, marker.primary, marker.primary.type);
+        marker.markers.push(subMark);
+        subMark.parent = marker;
+      }
+    }
+  }
+
+  function detachSharedMarkers(markers) {
+    for (var i = 0; i < markers.length; i++) {
+      var marker = markers[i], linked = [marker.primary.doc];;
+      linkedDocs(marker.primary.doc, function(d) { linked.push(d); });
+      for (var j = 0; j < marker.markers.length; j++) {
+        var subMarker = marker.markers[j];
+        if (indexOf(linked, subMarker.doc) == -1) {
+          subMarker.parent = null;
+          marker.markers.splice(j--, 1);
+        }
+      }
+    }
+  }
+
   // TEXTMARKER SPANS
 
+  function MarkedSpan(marker, from, to) {
+    this.marker = marker;
+    this.from = from; this.to = to;
+  }
+
+  // Search an array of spans for a span matching the given marker.
   function getMarkedSpanFor(spans, marker) {
     if (spans) for (var i = 0; i < spans.length; ++i) {
       var span = spans[i];
       if (span.marker == marker) return span;
     }
   }
+  // Remove a span from an array, returning undefined if no spans are
+  // left (we don't store arrays for lines without spans).
   function removeMarkedSpan(spans, span) {
     for (var r, i = 0; i < spans.length; ++i)
       if (spans[i] != span) (r || (r = [])).push(spans[i]);
     return r;
   }
+  // Add a span to a line.
   function addMarkedSpan(line, span) {
     line.markedSpans = line.markedSpans ? line.markedSpans.concat([span]) : [span];
     span.marker.attachLine(line);
   }
 
+  // Used for the algorithm that adjusts markers for a change in the
+  // document. These functions cut an array of spans at a given
+  // character position, returning an array of remaining chunks (or
+  // undefined if nothing remains).
   function markedSpansBefore(old, startCh, isInsert) {
     if (old) for (var i = 0, nw; i < old.length; ++i) {
       var span = old[i], marker = span.marker;
       var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= startCh : span.from < startCh);
-      if (startsBefore || marker.type == "bookmark" && span.from == startCh && (!isInsert || !span.marker.insertLeft)) {
+      if (startsBefore || span.from == startCh && marker.type == "bookmark" && (!isInsert || !span.marker.insertLeft)) {
         var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= startCh : span.to > startCh);
-        (nw || (nw = [])).push({from: span.from,
-                                to: endsAfter ? null : span.to,
-                                marker: marker});
+        (nw || (nw = [])).push(new MarkedSpan(marker, span.from, endsAfter ? null : span.to));
       }
     }
     return nw;
   }
-
   function markedSpansAfter(old, endCh, isInsert) {
     if (old) for (var i = 0, nw; i < old.length; ++i) {
       var span = old[i], marker = span.marker;
       var endsAfter = span.to == null || (marker.inclusiveRight ? span.to >= endCh : span.to > endCh);
-      if (endsAfter || marker.type == "bookmark" && span.from == endCh && (!isInsert || span.marker.insertLeft)) {
+      if (endsAfter || span.from == endCh && marker.type == "bookmark" && (!isInsert || span.marker.insertLeft)) {
         var startsBefore = span.from == null || (marker.inclusiveLeft ? span.from <= endCh : span.from < endCh);
-        (nw || (nw = [])).push({from: startsBefore ? null : span.from - endCh,
-                                to: span.to == null ? null : span.to - endCh,
-                                marker: marker});
+        (nw || (nw = [])).push(new MarkedSpan(marker, startsBefore ? null : span.from - endCh,
+                                              span.to == null ? null : span.to - endCh));
       }
     }
     return nw;
   }
 
+  // Given a change object, compute the new set of marker spans that
+  // cover the line in which the change took place. Removes spans
+  // entirely within the change, reconnects spans belonging to the
+  // same marker that appear on both sides of the change, and cuts off
+  // spans partially within the change. Returns an array of span
+  // arrays with one element for each line in (after) the change.
   function stretchSpansOverChange(doc, change) {
+    if (change.full) return null;
     var oldFirst = isLine(doc, change.from.line) && getLine(doc, change.from.line).markedSpans;
     var oldLast = isLine(doc, change.to.line) && getLine(doc, change.to.line).markedSpans;
     if (!oldFirst && !oldLast) return null;
 
-    var startCh = change.from.ch, endCh = change.to.ch, isInsert = posEq(change.from, change.to);
+    var startCh = change.from.ch, endCh = change.to.ch, isInsert = cmp(change.from, change.to) == 0;
     // Get the spans that 'stick out' on both sides
     var first = markedSpansBefore(oldFirst, startCh, isInsert);
     var last = markedSpansAfter(oldLast, endCh, isInsert);
@@ -3927,13 +6347,9 @@ window.CodeMirror = (function() {
         }
       }
     }
-    if (sameLine && first) {
-      // Make sure we didn't create any zero-length spans
-      for (var i = 0; i < first.length; ++i)
-        if (first[i].from != null && first[i].from == first[i].to && first[i].marker.type != "bookmark")
-          first.splice(i--, 1);
-      if (!first.length) first = null;
-    }
+    // Make sure we didn't create any zero-length spans
+    if (first) first = clearEmptySpans(first);
+    if (last && last != first) last = clearEmptySpans(last);
 
     var newMarkers = [first];
     if (!sameLine) {
@@ -3942,7 +6358,7 @@ window.CodeMirror = (function() {
       if (gap > 0 && first)
         for (var i = 0; i < first.length; ++i)
           if (first[i].to == null)
-            (gapMarkers || (gapMarkers = [])).push({from: null, to: null, marker: first[i].marker});
+            (gapMarkers || (gapMarkers = [])).push(new MarkedSpan(first[i].marker, null, null));
       for (var i = 0; i < gap; ++i)
         newMarkers.push(gapMarkers);
       newMarkers.push(last);
@@ -3950,6 +6366,22 @@ window.CodeMirror = (function() {
     return newMarkers;
   }
 
+  // Remove spans that are empty and don't have a clearWhenEmpty
+  // option of false.
+  function clearEmptySpans(spans) {
+    for (var i = 0; i < spans.length; ++i) {
+      var span = spans[i];
+      if (span.from != null && span.from == span.to && span.marker.clearWhenEmpty !== false)
+        spans.splice(i--, 1);
+    }
+    if (!spans.length) return null;
+    return spans;
+  }
+
+  // Used for un/re-doing changes from the history. Combines the
+  // result of computing the existing spans with the set of spans that
+  // existed in the history (so that deleting around a span and then
+  // undoing brings back the span).
   function mergeOldSpans(doc, change) {
     var old = getOldSpans(doc, change);
     var stretched = stretchSpansOverChange(doc, change);
@@ -3972,6 +6404,7 @@ window.CodeMirror = (function() {
     return old;
   }
 
+  // Used to 'clip' out readOnly ranges when making a change.
   function removeReadOnlyRanges(doc, from, to) {
     var markers = null;
     doc.iter(from.line, to.line + 1, function(line) {
@@ -3984,14 +6417,14 @@ window.CodeMirror = (function() {
     if (!markers) return null;
     var parts = [{from: from, to: to}];
     for (var i = 0; i < markers.length; ++i) {
-      var mk = markers[i], m = mk.find();
+      var mk = markers[i], m = mk.find(0);
       for (var j = 0; j < parts.length; ++j) {
         var p = parts[j];
-        if (posLess(p.to, m.from) || posLess(m.to, p.from)) continue;
-        var newParts = [j, 1];
-        if (posLess(p.from, m.from) || !mk.inclusiveLeft && posEq(p.from, m.from))
+        if (cmp(p.to, m.from) < 0 || cmp(p.from, m.to) > 0) continue;
+        var newParts = [j, 1], dfrom = cmp(p.from, m.from), dto = cmp(p.to, m.to);
+        if (dfrom < 0 || !mk.inclusiveLeft && !dfrom)
           newParts.push({from: p.from, to: m.from});
-        if (posLess(m.to, p.to) || !mk.inclusiveRight && posEq(p.to, m.to))
+        if (dto > 0 || !mk.inclusiveRight && !dto)
           newParts.push({from: m.to, to: p.to});
         parts.splice.apply(parts, newParts);
         j += newParts.length - 1;
@@ -4000,126 +6433,214 @@ window.CodeMirror = (function() {
     return parts;
   }
 
-  function collapsedSpanAt(line, ch) {
+  // Connect or disconnect spans from a line.
+  function detachMarkedSpans(line) {
+    var spans = line.markedSpans;
+    if (!spans) return;
+    for (var i = 0; i < spans.length; ++i)
+      spans[i].marker.detachLine(line);
+    line.markedSpans = null;
+  }
+  function attachMarkedSpans(line, spans) {
+    if (!spans) return;
+    for (var i = 0; i < spans.length; ++i)
+      spans[i].marker.attachLine(line);
+    line.markedSpans = spans;
+  }
+
+  // Helpers used when computing which overlapping collapsed span
+  // counts as the larger one.
+  function extraLeft(marker) { return marker.inclusiveLeft ? -1 : 0; }
+  function extraRight(marker) { return marker.inclusiveRight ? 1 : 0; }
+
+  // Returns a number indicating which of two overlapping collapsed
+  // spans is larger (and thus includes the other). Falls back to
+  // comparing ids when the spans cover exactly the same range.
+  function compareCollapsedMarkers(a, b) {
+    var lenDiff = a.lines.length - b.lines.length;
+    if (lenDiff != 0) return lenDiff;
+    var aPos = a.find(), bPos = b.find();
+    var fromCmp = cmp(aPos.from, bPos.from) || extraLeft(a) - extraLeft(b);
+    if (fromCmp) return -fromCmp;
+    var toCmp = cmp(aPos.to, bPos.to) || extraRight(a) - extraRight(b);
+    if (toCmp) return toCmp;
+    return b.id - a.id;
+  }
+
+  // Find out whether a line ends or starts in a collapsed span. If
+  // so, return the marker for that span.
+  function collapsedSpanAtSide(line, start) {
     var sps = sawCollapsedSpans && line.markedSpans, found;
     if (sps) for (var sp, i = 0; i < sps.length; ++i) {
       sp = sps[i];
-      if (!sp.marker.collapsed) continue;
-      if ((sp.from == null || sp.from < ch) &&
-          (sp.to == null || sp.to > ch) &&
-          (!found || found.width < sp.marker.width))
+      if (sp.marker.collapsed && (start ? sp.from : sp.to) == null &&
+          (!found || compareCollapsedMarkers(found, sp.marker) < 0))
         found = sp.marker;
     }
     return found;
   }
-  function collapsedSpanAtStart(line) { return collapsedSpanAt(line, -1); }
-  function collapsedSpanAtEnd(line) { return collapsedSpanAt(line, line.text.length + 1); }
+  function collapsedSpanAtStart(line) { return collapsedSpanAtSide(line, true); }
+  function collapsedSpanAtEnd(line) { return collapsedSpanAtSide(line, false); }
+
+  // Test whether there exists a collapsed span that partially
+  // overlaps (covers the start or end, but not both) of a new span.
+  // Such overlap is not allowed.
+  function conflictingCollapsedRange(doc, lineNo, from, to, marker) {
+    var line = getLine(doc, lineNo);
+    var sps = sawCollapsedSpans && line.markedSpans;
+    if (sps) for (var i = 0; i < sps.length; ++i) {
+      var sp = sps[i];
+      if (!sp.marker.collapsed) continue;
+      var found = sp.marker.find(0);
+      var fromCmp = cmp(found.from, from) || extraLeft(sp.marker) - extraLeft(marker);
+      var toCmp = cmp(found.to, to) || extraRight(sp.marker) - extraRight(marker);
+      if (fromCmp >= 0 && toCmp <= 0 || fromCmp <= 0 && toCmp >= 0) continue;
+      if (fromCmp <= 0 && (cmp(found.to, from) > 0 || (sp.marker.inclusiveRight && marker.inclusiveLeft)) ||
+          fromCmp >= 0 && (cmp(found.from, to) < 0 || (sp.marker.inclusiveLeft && marker.inclusiveRight)))
+        return true;
+    }
+  }
 
-  function visualLine(doc, line) {
+  // A visual line is a line as drawn on the screen. Folding, for
+  // example, can cause multiple logical lines to appear on the same
+  // visual line. This finds the start of the visual line that the
+  // given line is part of (usually that is the line itself).
+  function visualLine(line) {
     var merged;
     while (merged = collapsedSpanAtStart(line))
-      line = getLine(doc, merged.find().from.line);
+      line = merged.find(-1, true).line;
     return line;
   }
 
+  // Returns an array of logical lines that continue the visual line
+  // started by the argument, or undefined if there are no such lines.
+  function visualLineContinued(line) {
+    var merged, lines;
+    while (merged = collapsedSpanAtEnd(line)) {
+      line = merged.find(1, true).line;
+      (lines || (lines = [])).push(line);
+    }
+    return lines;
+  }
+
+  // Get the line number of the start of the visual line that the
+  // given line number is part of.
+  function visualLineNo(doc, lineN) {
+    var line = getLine(doc, lineN), vis = visualLine(line);
+    if (line == vis) return lineN;
+    return lineNo(vis);
+  }
+  // Get the line number of the start of the next visual line after
+  // the given line.
+  function visualLineEndNo(doc, lineN) {
+    if (lineN > doc.lastLine()) return lineN;
+    var line = getLine(doc, lineN), merged;
+    if (!lineIsHidden(doc, line)) return lineN;
+    while (merged = collapsedSpanAtEnd(line))
+      line = merged.find(1, true).line;
+    return lineNo(line) + 1;
+  }
+
+  // Compute whether a line is hidden. Lines count as hidden when they
+  // are part of a visual line that starts with another line, or when
+  // they are entirely covered by collapsed, non-widget span.
   function lineIsHidden(doc, line) {
     var sps = sawCollapsedSpans && line.markedSpans;
     if (sps) for (var sp, i = 0; i < sps.length; ++i) {
       sp = sps[i];
       if (!sp.marker.collapsed) continue;
       if (sp.from == null) return true;
-      if (sp.marker.replacedWith) continue;
+      if (sp.marker.widgetNode) continue;
       if (sp.from == 0 && sp.marker.inclusiveLeft && lineIsHiddenInner(doc, line, sp))
         return true;
     }
   }
   function lineIsHiddenInner(doc, line, span) {
     if (span.to == null) {
-      var end = span.marker.find().to, endLine = getLine(doc, end.line);
-      return lineIsHiddenInner(doc, endLine, getMarkedSpanFor(endLine.markedSpans, span.marker));
+      var end = span.marker.find(1, true);
+      return lineIsHiddenInner(doc, end.line, getMarkedSpanFor(end.line.markedSpans, span.marker));
     }
     if (span.marker.inclusiveRight && span.to == line.text.length)
       return true;
     for (var sp, i = 0; i < line.markedSpans.length; ++i) {
       sp = line.markedSpans[i];
-      if (sp.marker.collapsed && !sp.marker.replacedWith && sp.from == span.to &&
+      if (sp.marker.collapsed && !sp.marker.widgetNode && sp.from == span.to &&
+          (sp.to == null || sp.to != span.from) &&
           (sp.marker.inclusiveLeft || span.marker.inclusiveRight) &&
           lineIsHiddenInner(doc, line, sp)) return true;
     }
   }
 
-  function detachMarkedSpans(line) {
-    var spans = line.markedSpans;
-    if (!spans) return;
-    for (var i = 0; i < spans.length; ++i)
-      spans[i].marker.detachLine(line);
-    line.markedSpans = null;
-  }
-
-  function attachMarkedSpans(line, spans) {
-    if (!spans) return;
-    for (var i = 0; i < spans.length; ++i)
-      spans[i].marker.attachLine(line);
-    line.markedSpans = spans;
-  }
-
   // LINE WIDGETS
 
-  var LineWidget = CodeMirror.LineWidget = function(cm, node, options) {
+  // Line widgets are block elements displayed above or below a line.
+
+  var LineWidget = CodeMirror.LineWidget = function(doc, node, options) {
     if (options) for (var opt in options) if (options.hasOwnProperty(opt))
       this[opt] = options[opt];
-    this.cm = cm;
+    this.doc = doc;
     this.node = node;
   };
   eventMixin(LineWidget);
-  function widgetOperation(f) {
-    return function() {
-      var withOp = !this.cm.curOp;
-      if (withOp) startOperation(this.cm);
-      try {var result = f.apply(this, arguments);}
-      finally {if (withOp) endOperation(this.cm);}
-      return result;
-    };
+
+  function adjustScrollWhenAboveVisible(cm, line, diff) {
+    if (heightAtLine(line) < ((cm.curOp && cm.curOp.scrollTop) || cm.doc.scrollTop))
+      addToScrollPos(cm, null, diff);
   }
-  LineWidget.prototype.clear = widgetOperation(function() {
-    var ws = this.line.widgets, no = lineNo(this.line);
+
+  LineWidget.prototype.clear = function() {
+    var cm = this.doc.cm, ws = this.line.widgets, line = this.line, no = lineNo(line);
     if (no == null || !ws) return;
     for (var i = 0; i < ws.length; ++i) if (ws[i] == this) ws.splice(i--, 1);
-    if (!ws.length) this.line.widgets = null;
-    var aboveVisible = heightAtLine(this.cm, this.line) < this.cm.doc.scrollTop;
-    updateLineHeight(this.line, Math.max(0, this.line.height - widgetHeight(this)));
-    if (aboveVisible) addToScrollPos(this.cm, 0, -this.height);
-    regChange(this.cm, no, no + 1);
-  });
-  LineWidget.prototype.changed = widgetOperation(function() {
-    var oldH = this.height;
+    if (!ws.length) line.widgets = null;
+    var height = widgetHeight(this);
+    updateLineHeight(line, Math.max(0, line.height - height));
+    if (cm) runInOp(cm, function() {
+      adjustScrollWhenAboveVisible(cm, line, -height);
+      regLineChange(cm, no, "widget");
+    });
+  };
+  LineWidget.prototype.changed = function() {
+    var oldH = this.height, cm = this.doc.cm, line = this.line;
     this.height = null;
     var diff = widgetHeight(this) - oldH;
     if (!diff) return;
-    updateLineHeight(this.line, this.line.height + diff);
-    var no = lineNo(this.line);
-    regChange(this.cm, no, no + 1);
-  });
+    updateLineHeight(line, line.height + diff);
+    if (cm) runInOp(cm, function() {
+      cm.curOp.forceUpdate = true;
+      adjustScrollWhenAboveVisible(cm, line, diff);
+    });
+  };
 
   function widgetHeight(widget) {
     if (widget.height != null) return widget.height;
-    if (!widget.node.parentNode || widget.node.parentNode.nodeType != 1)
-      removeChildrenAndAdd(widget.cm.display.measure, elt("div", [widget.node], null, "position: relative"));
+    var cm = widget.doc.cm;
+    if (!cm) return 0;
+    if (!contains(document.body, widget.node)) {
+      var parentStyle = "position: relative;";
+      if (widget.coverGutter)
+        parentStyle += "margin-left: -" + cm.display.gutters.offsetWidth + "px;";
+      if (widget.noHScroll)
+        parentStyle += "width: " + cm.display.wrapper.clientWidth + "px;";
+      removeChildrenAndAdd(cm.display.measure, elt("div", [widget.node], null, parentStyle));
+    }
     return widget.height = widget.node.offsetHeight;
   }
 
-  function addLineWidget(cm, handle, node, options) {
-    var widget = new LineWidget(cm, node, options);
-    if (widget.noHScroll) cm.display.alignWidgets = true;
-    changeLine(cm, handle, function(line) {
+  function addLineWidget(doc, handle, node, options) {
+    var widget = new LineWidget(doc, node, options);
+    var cm = doc.cm;
+    if (cm && widget.noHScroll) cm.display.alignWidgets = true;
+    changeLine(doc, handle, "widget", function(line) {
       var widgets = line.widgets || (line.widgets = []);
       if (widget.insertAt == null) widgets.push(widget);
       else widgets.splice(Math.min(widgets.length - 1, Math.max(0, widget.insertAt)), 0, widget);
       widget.line = line;
-      if (!lineIsHidden(cm.doc, line) || widget.showIfHidden) {
-        var aboveVisible = heightAtLine(cm, line) < cm.doc.scrollTop;
+      if (cm && !lineIsHidden(doc, line)) {
+        var aboveVisible = heightAtLine(line) < doc.scrollTop;
         updateLineHeight(line, line.height + widgetHeight(widget));
-        if (aboveVisible) addToScrollPos(cm, 0, widget.height);
+        if (aboveVisible) addToScrollPos(cm, null, widget.height);
+        cm.curOp.forceUpdate = true;
       }
       return true;
     });
@@ -4136,7 +6657,11 @@ window.CodeMirror = (function() {
     this.height = estimateHeight ? estimateHeight(this) : 1;
   };
   eventMixin(Line);
+  Line.prototype.lineNo = function() { return lineNo(this); };
 
+  // Change the content (text, markers) of a line. Automatically
+  // invalidates cached information and tries to re-estimate the
+  // line's height.
   function updateLine(line, text, markedSpans, estimateHeight) {
     line.text = text;
     if (line.stateAfter) line.stateAfter = null;
@@ -4148,44 +6673,114 @@ window.CodeMirror = (function() {
     if (estHeight != line.height) updateLineHeight(line, estHeight);
   }
 
+  // Detach a line from the document tree and its markers.
   function cleanUpLine(line) {
     line.parent = null;
     detachMarkedSpans(line);
   }
 
-  // Run the given mode's parser over a line, update the styles
-  // array, which contains alternating fragments of text and CSS
-  // classes.
-  function runMode(cm, text, mode, state, f) {
+  function extractLineClasses(type, output) {
+    if (type) for (;;) {
+      var lineClass = type.match(/(?:^|\s+)line-(background-)?(\S+)/);
+      if (!lineClass) break;
+      type = type.slice(0, lineClass.index) + type.slice(lineClass.index + lineClass[0].length);
+      var prop = lineClass[1] ? "bgClass" : "textClass";
+      if (output[prop] == null)
+        output[prop] = lineClass[2];
+      else if (!(new RegExp("(?:^|\s)" + lineClass[2] + "(?:$|\s)")).test(output[prop]))
+        output[prop] += " " + lineClass[2];
+    }
+    return type;
+  }
+
+  function callBlankLine(mode, state) {
+    if (mode.blankLine) return mode.blankLine(state);
+    if (!mode.innerMode) return;
+    var inner = CodeMirror.innerMode(mode, state);
+    if (inner.mode.blankLine) return inner.mode.blankLine(inner.state);
+  }
+
+  function readToken(mode, stream, state, inner) {
+    for (var i = 0; i < 10; i++) {
+      if (inner) inner[0] = CodeMirror.innerMode(mode, state).mode;
+      var style = mode.token(stream, state);
+      if (stream.pos > stream.start) return style;
+    }
+    throw new Error("Mode " + mode.name + " failed to advance stream.");
+  }
+
+  // Utility for getTokenAt and getLineTokens
+  function takeToken(cm, pos, precise, asArray) {
+    function getObj(copy) {
+      return {start: stream.start, end: stream.pos,
+              string: stream.current(),
+              type: style || null,
+              state: copy ? copyState(doc.mode, state) : state};
+    }
+
+    var doc = cm.doc, mode = doc.mode, style;
+    pos = clipPos(doc, pos);
+    var line = getLine(doc, pos.line), state = getStateBefore(cm, pos.line, precise);
+    var stream = new StringStream(line.text, cm.options.tabSize), tokens;
+    if (asArray) tokens = [];
+    while ((asArray || stream.pos < pos.ch) && !stream.eol()) {
+      stream.start = stream.pos;
+      style = readToken(mode, stream, state);
+      if (asArray) tokens.push(getObj(true));
+    }
+    return asArray ? tokens : getObj();
+  }
+
+  // Run the given mode's parser over a line, calling f for each token.
+  function runMode(cm, text, mode, state, f, lineClasses, forceToEnd) {
     var flattenSpans = mode.flattenSpans;
     if (flattenSpans == null) flattenSpans = cm.options.flattenSpans;
     var curStart = 0, curStyle = null;
     var stream = new StringStream(text, cm.options.tabSize), style;
-    if (text == "" && mode.blankLine) mode.blankLine(state);
+    var inner = cm.options.addModeClass && [null];
+    if (text == "") extractLineClasses(callBlankLine(mode, state), lineClasses);
     while (!stream.eol()) {
       if (stream.pos > cm.options.maxHighlightLength) {
         flattenSpans = false;
-        // Webkit seems to refuse to render text nodes longer than 57444 characters
-        stream.pos = Math.min(text.length, stream.start + 50000);
+        if (forceToEnd) processLine(cm, text, state, stream.pos);
+        stream.pos = text.length;
         style = null;
       } else {
-        style = mode.token(stream, state);
+        style = extractLineClasses(readToken(mode, stream, state, inner), lineClasses);
+      }
+      if (inner) {
+        var mName = inner[0].name;
+        if (mName) style = "m-" + (style ? mName + " " + style : mName);
       }
       if (!flattenSpans || curStyle != style) {
-        if (curStart < stream.start) f(stream.start, curStyle);
-        curStart = stream.start; curStyle = style;
+        while (curStart < stream.start) {
+          curStart = Math.min(stream.start, curStart + 50000);
+          f(curStart, curStyle);
+        }
+        curStyle = style;
       }
       stream.start = stream.pos;
     }
-    if (curStart < stream.pos) f(stream.pos, curStyle);
+    while (curStart < stream.pos) {
+      // Webkit seems to refuse to render text nodes longer than 57444 characters
+      var pos = Math.min(stream.pos, curStart + 50000);
+      f(pos, curStyle);
+      curStart = pos;
+    }
   }
 
-  function highlightLine(cm, line, state) {
+  // Compute a style array (an array starting with a mode generation
+  // -- for invalidation -- followed by pairs of end positions and
+  // style strings), which is used to highlight the tokens on the
+  // line.
+  function highlightLine(cm, line, state, forceToEnd) {
     // A styles array always starts with a number identifying the
     // mode/overlays that it is based on (for easy invalidation).
-    var st = [cm.state.modeGen];
+    var st = [cm.state.modeGen], lineClasses = {};
     // Compute the base array of styles
-    runMode(cm, line.text, cm.doc.mode, state, function(end, style) {st.push(end, style);});
+    runMode(cm, line.text, cm.doc.mode, state, function(end, style) {
+      st.push(end, style);
+    }, lineClasses, forceToEnd);
 
     // Run overlays, adjust style array.
     for (var o = 0; o < cm.state.overlays.length; ++o) {
@@ -4202,189 +6797,221 @@ window.CodeMirror = (function() {
         }
         if (!style) return;
         if (overlay.opaque) {
-          st.splice(start, i - start, end, style);
+          st.splice(start, i - start, end, "cm-overlay " + style);
           i = start + 2;
         } else {
           for (; start < i; start += 2) {
             var cur = st[start+1];
-            st[start+1] = cur ? cur + " " + style : style;
+            st[start+1] = (cur ? cur + " " : "") + "cm-overlay " + style;
           }
         }
-      });
+      }, lineClasses);
     }
 
-    return st;
+    return {styles: st, classes: lineClasses.bgClass || lineClasses.textClass ? lineClasses : null};
   }
 
-  function getLineStyles(cm, line) {
-    if (!line.styles || line.styles[0] != cm.state.modeGen)
-      line.styles = highlightLine(cm, line, line.stateAfter = getStateBefore(cm, lineNo(line)));
+  function getLineStyles(cm, line, updateFrontier) {
+    if (!line.styles || line.styles[0] != cm.state.modeGen) {
+      var result = highlightLine(cm, line, line.stateAfter = getStateBefore(cm, lineNo(line)));
+      line.styles = result.styles;
+      if (result.classes) line.styleClasses = result.classes;
+      else if (line.styleClasses) line.styleClasses = null;
+      if (updateFrontier === cm.doc.frontier) cm.doc.frontier++;
+    }
     return line.styles;
   }
 
   // Lightweight form of highlight -- proceed over this line and
-  // update state, but don't save a style array.
-  function processLine(cm, line, state) {
+  // update state, but don't save a style array. Used for lines that
+  // aren't currently visible.
+  function processLine(cm, text, state, startAt) {
     var mode = cm.doc.mode;
-    var stream = new StringStream(line.text, cm.options.tabSize);
-    if (line.text == "" && mode.blankLine) mode.blankLine(state);
+    var stream = new StringStream(text, cm.options.tabSize);
+    stream.start = stream.pos = startAt || 0;
+    if (text == "") callBlankLine(mode, state);
     while (!stream.eol() && stream.pos <= cm.options.maxHighlightLength) {
-      mode.token(stream, state);
+      readToken(mode, stream, state);
       stream.start = stream.pos;
     }
   }
 
-  var styleToClassCache = {};
-  function styleToClass(style) {
-    if (!style) return null;
-    return styleToClassCache[style] ||
-      (styleToClassCache[style] = "cm-" + style.replace(/ +/g, " cm-"));
-  }
+  // Convert a style as returned by a mode (either null, or a string
+  // containing one or more styles) to a CSS style. This is cached,
+  // and also looks for line-wide styles.
+  var styleToClassCache = {}, styleToClassCacheWithMode = {};
+  function interpretTokenStyle(style, options) {
+    if (!style || /^\s*$/.test(style)) return null;
+    var cache = options.addModeClass ? styleToClassCacheWithMode : styleToClassCache;
+    return cache[style] ||
+      (cache[style] = style.replace(/\S+/g, "cm-$&"));
+  }
+
+  // Render the DOM representation of the text of a line. Also builds
+  // up a 'line map', which points at the DOM nodes that represent
+  // specific stretches of text, and is used by the measuring code.
+  // The returned object contains the DOM node, this map, and
+  // information about line-wide styles that were set by the mode.
+  function buildLineContent(cm, lineView) {
+    // The padding-right forces the element to have a 'border', which
+    // is needed on Webkit to be able to get line-level bounding
+    // rectangles for it (in measureChar).
+    var content = elt("span", null, null, webkit ? "padding-right: .1px" : null);
+    var builder = {pre: elt("pre", [content], "CodeMirror-line"), content: content,
+                   col: 0, pos: 0, cm: cm,
+                   splitSpaces: (ie || webkit) && cm.getOption("lineWrapping")};
+    lineView.measure = {};
+
+    // Iterate over the logical lines that make up this visual line.
+    for (var i = 0; i <= (lineView.rest ? lineView.rest.length : 0); i++) {
+      var line = i ? lineView.rest[i - 1] : lineView.line, order;
+      builder.pos = 0;
+      builder.addToken = buildToken;
+      // Optionally wire in some hacks into the token-rendering
+      // algorithm, to deal with browser quirks.
+      if (hasBadBidiRects(cm.display.measure) && (order = getOrder(line)))
+        builder.addToken = buildTokenBadBidi(builder.addToken, order);
+      builder.map = [];
+      var allowFrontierUpdate = lineView != cm.display.externalMeasured && lineNo(line);
+      insertLineContent(line, builder, getLineStyles(cm, line, allowFrontierUpdate));
+      if (line.styleClasses) {
+        if (line.styleClasses.bgClass)
+          builder.bgClass = joinClasses(line.styleClasses.bgClass, builder.bgClass || "");
+        if (line.styleClasses.textClass)
+          builder.textClass = joinClasses(line.styleClasses.textClass, builder.textClass || "");
+      }
 
-  function lineContent(cm, realLine, measure) {
-    var merged, line = realLine, empty = true;
-    while (merged = collapsedSpanAtStart(line))
-      line = getLine(cm.doc, merged.find().from.line);
+      // Ensure at least a single node is present, for measuring.
+      if (builder.map.length == 0)
+        builder.map.push(0, 0, builder.content.appendChild(zeroWidthElement(cm.display.measure)));
 
-    var builder = {pre: elt("pre"), col: 0, pos: 0, display: !measure,
-                   measure: null, measuredSomething: false, cm: cm};
-    if (line.textClass) builder.pre.className = line.textClass;
+      // Store the map and a cache object for the current logical line
+      if (i == 0) {
+        lineView.measure.map = builder.map;
+        lineView.measure.cache = {};
+      } else {
+        (lineView.measure.maps || (lineView.measure.maps = [])).push(builder.map);
+        (lineView.measure.caches || (lineView.measure.caches = [])).push({});
+      }
+    }
 
-    do {
-      if (line.text) empty = false;
-      builder.measure = line == realLine && measure;
-      builder.pos = 0;
-      builder.addToken = builder.measure ? buildTokenMeasure : buildToken;
-      if ((ie || webkit) && cm.getOption("lineWrapping"))
-        builder.addToken = buildTokenSplitSpaces(builder.addToken);
-      var next = insertLineContent(line, builder, getLineStyles(cm, line));
-      if (measure && line == realLine && !builder.measuredSomething) {
-        measure[0] = builder.pre.appendChild(zeroWidthElement(cm.display.measure));
-        builder.measuredSomething = true;
-      }
-      if (next) line = getLine(cm.doc, next.to.line);
-    } while (next);
-
-    if (measure && !builder.measuredSomething && !measure[0])
-      measure[0] = builder.pre.appendChild(empty ? elt("span", "\u00a0") : zeroWidthElement(cm.display.measure));
-    if (!builder.pre.firstChild && !lineIsHidden(cm.doc, realLine))
-      builder.pre.appendChild(document.createTextNode("\u00a0"));
-
-    var order;
-    // Work around problem with the reported dimensions of single-char
-    // direction spans on IE (issue #1129). See also the comment in
-    // cursorCoords.
-    if (measure && ie && (order = getOrder(line))) {
-      var l = order.length - 1;
-      if (order[l].from == order[l].to) --l;
-      var last = order[l], prev = order[l - 1];
-      if (last.from + 1 == last.to && prev && last.level < prev.level) {
-        var span = measure[builder.pos - 1];
-        if (span) span.parentNode.insertBefore(span.measureRight = zeroWidthElement(cm.display.measure),
-                                               span.nextSibling);
-      }
-    }
-
-    signal(cm, "renderLine", cm, realLine, builder.pre);
-    return builder.pre;
-  }
-
-  var tokenSpecialChars = /[\t\u0000-\u0019\u00ad\u200b\u2028\u2029\uFEFF]/g;
-  function buildToken(builder, text, style, startStyle, endStyle, title) {
+    // See issue #2901
+    if (webkit && /\bcm-tab\b/.test(builder.content.lastChild.className))
+      builder.content.className = "cm-tab-wrap-hack";
+
+    signal(cm, "renderLine", cm, lineView.line, builder.pre);
+    if (builder.pre.className)
+      builder.textClass = joinClasses(builder.pre.className, builder.textClass || "");
+
+    return builder;
+  }
+
+  function defaultSpecialCharPlaceholder(ch) {
+    var token = elt("span", "\u2022", "cm-invalidchar");
+    token.title = "\\u" + ch.charCodeAt(0).toString(16);
+    token.setAttribute("aria-label", token.title);
+    return token;
+  }
+
+  // Build up the DOM representation for a single token, and add it to
+  // the line map. Takes care to render special characters separately.
+  function buildToken(builder, text, style, startStyle, endStyle, title, css) {
     if (!text) return;
-    if (!tokenSpecialChars.test(text)) {
+    var displayText = builder.splitSpaces ? text.replace(/ {3,}/g, splitSpaces) : text;
+    var special = builder.cm.state.specialChars, mustWrap = false;
+    if (!special.test(text)) {
       builder.col += text.length;
-      var content = document.createTextNode(text);
+      var content = document.createTextNode(displayText);
+      builder.map.push(builder.pos, builder.pos + text.length, content);
+      if (ie && ie_version < 9) mustWrap = true;
+      builder.pos += text.length;
     } else {
       var content = document.createDocumentFragment(), pos = 0;
       while (true) {
-        tokenSpecialChars.lastIndex = pos;
-        var m = tokenSpecialChars.exec(text);
+        special.lastIndex = pos;
+        var m = special.exec(text);
         var skipped = m ? m.index - pos : text.length - pos;
         if (skipped) {
-          content.appendChild(document.createTextNode(text.slice(pos, pos + skipped)));
+          var txt = document.createTextNode(displayText.slice(pos, pos + skipped));
+          if (ie && ie_version < 9) content.appendChild(elt("span", [txt]));
+          else content.appendChild(txt);
+          builder.map.push(builder.pos, builder.pos + skipped, txt);
           builder.col += skipped;
+          builder.pos += skipped;
         }
         if (!m) break;
         pos += skipped + 1;
         if (m[0] == "\t") {
           var tabSize = builder.cm.options.tabSize, tabWidth = tabSize - builder.col % tabSize;
-          content.appendChild(elt("span", spaceStr(tabWidth), "cm-tab"));
+          var txt = content.appendChild(elt("span", spaceStr(tabWidth), "cm-tab"));
+          txt.setAttribute("role", "presentation");
+          txt.setAttribute("cm-text", "\t");
           builder.col += tabWidth;
+        } else if (m[0] == "\r" || m[0] == "\n") {
+          var txt = content.appendChild(elt("span", m[0] == "\r" ? "␍" : "␤", "cm-invalidchar"));
+          txt.setAttribute("cm-text", m[0]);
+          builder.col += 1;
         } else {
-          var token = elt("span", "\u2022", "cm-invalidchar");
-          token.title = "\\u" + m[0].charCodeAt(0).toString(16);
-          content.appendChild(token);
+          var txt = builder.cm.options.specialCharPlaceholder(m[0]);
+          txt.setAttribute("cm-text", m[0]);
+          if (ie && ie_version < 9) content.appendChild(elt("span", [txt]));
+          else content.appendChild(txt);
           builder.col += 1;
         }
+        builder.map.push(builder.pos, builder.pos + 1, txt);
+        builder.pos++;
       }
     }
-    if (style || startStyle || endStyle || builder.measure) {
+    if (style || startStyle || endStyle || mustWrap || css) {
       var fullStyle = style || "";
       if (startStyle) fullStyle += startStyle;
       if (endStyle) fullStyle += endStyle;
-      var token = elt("span", [content], fullStyle);
+      var token = elt("span", [content], fullStyle, css);
       if (title) token.title = title;
-      return builder.pre.appendChild(token);
+      return builder.content.appendChild(token);
     }
-    builder.pre.appendChild(content);
+    builder.content.appendChild(content);
   }
 
-  function buildTokenMeasure(builder, text, style, startStyle, endStyle) {
-    var wrapping = builder.cm.options.lineWrapping;
-    for (var i = 0; i < text.length; ++i) {
-      var ch = text.charAt(i), start = i == 0;
-      if (ch >= "\ud800" && ch < "\udbff" && i < text.length - 1) {
-        ch = text.slice(i, i + 2);
-        ++i;
-      } else if (i && wrapping && spanAffectsWrapping(text, i)) {
-        builder.pre.appendChild(elt("wbr"));
-      }
-      var old = builder.measure[builder.pos];
-      var span = builder.measure[builder.pos] =
-        buildToken(builder, ch, style,
-                   start && startStyle, i == text.length - 1 && endStyle);
-      if (old) span.leftSide = old.leftSide || old;
-      // In IE single-space nodes wrap differently than spaces
-      // embedded in larger text nodes, except when set to
-      // white-space: normal (issue #1268).
-      if (ie && wrapping && ch == " " && i && !/\s/.test(text.charAt(i - 1)) &&
-          i < text.length - 1 && !/\s/.test(text.charAt(i + 1)))
-        span.style.whiteSpace = "normal";
-      builder.pos += ch.length;
-    }
-    if (text.length) builder.measuredSomething = true;
-  }
-
-  function buildTokenSplitSpaces(inner) {
-    function split(old) {
-      var out = " ";
-      for (var i = 0; i < old.length - 2; ++i) out += i % 2 ? " " : "\u00a0";
-      out += " ";
-      return out;
-    }
-    return function(builder, text, style, startStyle, endStyle, title) {
-      return inner(builder, text.replace(/ {3,}/, split), style, startStyle, endStyle, title);
+  function splitSpaces(old) {
+    var out = " ";
+    for (var i = 0; i < old.length - 2; ++i) out += i % 2 ? " " : "\u00a0";
+    out += " ";
+    return out;
+  }
+
+  // Work around nonsense dimensions being reported for stretches of
+  // right-to-left text.
+  function buildTokenBadBidi(inner, order) {
+    return function(builder, text, style, startStyle, endStyle, title, css) {
+      style = style ? style + " cm-force-border" : "cm-force-border";
+      var start = builder.pos, end = start + text.length;
+      for (;;) {
+        // Find the part that overlaps with the start of this text
+        for (var i = 0; i < order.length; i++) {
+          var part = order[i];
+          if (part.to > start && part.from <= start) break;
+        }
+        if (part.to >= end) return inner(builder, text, style, startStyle, endStyle, title, css);
+        inner(builder, text.slice(0, part.to - start), style, startStyle, null, title, css);
+        startStyle = null;
+        text = text.slice(part.to - start);
+        start = part.to;
+      }
     };
   }
 
   function buildCollapsedSpan(builder, size, marker, ignoreWidget) {
-    var widget = !ignoreWidget && marker.replacedWith;
+    var widget = !ignoreWidget && marker.widgetNode;
+    if (widget) builder.map.push(builder.pos, builder.pos + size, widget);
+    if (!ignoreWidget && builder.cm.display.input.needsContentAttribute) {
+      if (!widget)
+        widget = builder.content.appendChild(document.createElement("span"));
+      widget.setAttribute("cm-marker", marker.id);
+    }
     if (widget) {
-      if (!builder.display) widget = widget.cloneNode(true);
-      builder.pre.appendChild(widget);
-      if (builder.measure) {
-        if (size) {
-          builder.measure[builder.pos] = widget;
-        } else {
-          var elt = builder.measure[builder.pos] = zeroWidthElement(builder.cm.display.measure);
-          if (marker.type != "bookmark" || marker.insertLeft)
-            builder.pre.insertBefore(elt, widget);
-          else
-            builder.pre.appendChild(elt);
-        }
-        builder.measuredSomething = true;
-      }
+      builder.cm.display.input.setUneditable(widget);
+      builder.content.appendChild(widget);
     }
     builder.pos += size;
   }
@@ -4395,38 +7022,45 @@ window.CodeMirror = (function() {
     var spans = line.markedSpans, allText = line.text, at = 0;
     if (!spans) {
       for (var i = 1; i < styles.length; i+=2)
-        builder.addToken(builder, allText.slice(at, at = styles[i]), styleToClass(styles[i+1]));
+        builder.addToken(builder, allText.slice(at, at = styles[i]), interpretTokenStyle(styles[i+1], builder.cm.options));
       return;
     }
 
-    var len = allText.length, pos = 0, i = 1, text = "", style;
+    var len = allText.length, pos = 0, i = 1, text = "", style, css;
     var nextChange = 0, spanStyle, spanEndStyle, spanStartStyle, title, collapsed;
     for (;;) {
       if (nextChange == pos) { // Update current marker set
-        spanStyle = spanEndStyle = spanStartStyle = title = "";
+        spanStyle = spanEndStyle = spanStartStyle = title = css = "";
         collapsed = null; nextChange = Infinity;
-        var foundBookmark = null;
+        var foundBookmarks = [];
         for (var j = 0; j < spans.length; ++j) {
           var sp = spans[j], m = sp.marker;
-          if (sp.from <= pos && (sp.to == null || sp.to > pos)) {
-            if (sp.to != null && nextChange > sp.to) { nextChange = sp.to; spanEndStyle = ""; }
+          if (m.type == "bookmark" && sp.from == pos && m.widgetNode) {
+            foundBookmarks.push(m);
+          } else if (sp.from <= pos && (sp.to == null || sp.to > pos || m.collapsed && sp.to == pos && sp.from == pos)) {
+            if (sp.to != null && sp.to != pos && nextChange > sp.to) {
+              nextChange = sp.to;
+              spanEndStyle = "";
+            }
             if (m.className) spanStyle += " " + m.className;
+            if (m.css) css = m.css;
             if (m.startStyle && sp.from == pos) spanStartStyle += " " + m.startStyle;
             if (m.endStyle && sp.to == nextChange) spanEndStyle += " " + m.endStyle;
             if (m.title && !title) title = m.title;
-            if (m.collapsed && (!collapsed || collapsed.marker.size < m.size))
+            if (m.collapsed && (!collapsed || compareCollapsedMarkers(collapsed.marker, m) < 0))
               collapsed = sp;
           } else if (sp.from > pos && nextChange > sp.from) {
             nextChange = sp.from;
           }
-          if (m.type == "bookmark" && sp.from == pos && m.replacedWith) foundBookmark = m;
         }
         if (collapsed && (collapsed.from || 0) == pos) {
-          buildCollapsedSpan(builder, (collapsed.to == null ? len : collapsed.to) - pos,
+          buildCollapsedSpan(builder, (collapsed.to == null ? len + 1 : collapsed.to) - pos,
                              collapsed.marker, collapsed.from == null);
-          if (collapsed.to == null) return collapsed.marker.find();
+          if (collapsed.to == null) return;
+          if (collapsed.to == pos) collapsed = false;
         }
-        if (foundBookmark && !collapsed) buildCollapsedSpan(builder, 0, foundBookmark);
+        if (!collapsed && foundBookmarks.length) for (var j = 0; j < foundBookmarks.length; ++j)
+          buildCollapsedSpan(builder, 0, foundBookmarks[j]);
       }
       if (pos >= len) break;
 
@@ -4437,37 +7071,53 @@ window.CodeMirror = (function() {
           if (!collapsed) {
             var tokenText = end > upto ? text.slice(0, upto - pos) : text;
             builder.addToken(builder, tokenText, style ? style + spanStyle : spanStyle,
-                             spanStartStyle, pos + tokenText.length == nextChange ? spanEndStyle : "", title);
+                             spanStartStyle, pos + tokenText.length == nextChange ? spanEndStyle : "", title, css);
           }
           if (end >= upto) {text = text.slice(upto - pos); pos = upto; break;}
           pos = end;
           spanStartStyle = "";
         }
         text = allText.slice(at, at = styles[i++]);
-        style = styleToClass(styles[i++]);
+        style = interpretTokenStyle(styles[i++], builder.cm.options);
       }
     }
   }
 
   // DOCUMENT DATA STRUCTURE
 
-  function updateDoc(doc, change, markedSpans, selAfter, estimateHeight) {
+  // By default, updates that start and end at the beginning of a line
+  // are treated specially, in order to make the association of line
+  // widgets and marker elements with the text behave more intuitive.
+  function isWholeLineUpdate(doc, change) {
+    return change.from.ch == 0 && change.to.ch == 0 && lst(change.text) == "" &&
+      (!doc.cm || doc.cm.options.wholeLineUpdateBefore);
+  }
+
+  // Perform a change on the document data structure.
+  function updateDoc(doc, change, markedSpans, estimateHeight) {
     function spansFor(n) {return markedSpans ? markedSpans[n] : null;}
     function update(line, text, spans) {
       updateLine(line, text, spans, estimateHeight);
       signalLater(line, "change", line, change);
     }
+    function linesFor(start, end) {
+      for (var i = start, result = []; i < end; ++i)
+        result.push(new Line(text[i], spansFor(i), estimateHeight));
+      return result;
+    }
 
     var from = change.from, to = change.to, text = change.text;
     var firstLine = getLine(doc, from.line), lastLine = getLine(doc, to.line);
     var lastText = lst(text), lastSpans = spansFor(text.length - 1), nlines = to.line - from.line;
 
-    // First adjust the line structure
-    if (from.ch == 0 && to.ch == 0 && lastText == "") {
+    // Adjust the line structure
+    if (change.full) {
+      doc.insert(0, linesFor(0, text.length));
+      doc.remove(text.length, doc.size - text.length);
+    } else if (isWholeLineUpdate(doc, change)) {
       // This is a whole-line replace. Treated specially to make
       // sure line objects move the way they are supposed to.
-      for (var i = 0, e = text.length - 1, added = []; i < e; ++i)
-        added.push(new Line(text[i], spansFor(i), estimateHeight));
+      var added = linesFor(0, text.length - 1);
       update(lastLine, lastLine.text, lastSpans);
       if (nlines) doc.remove(from.line, nlines);
       if (added.length) doc.insert(from.line, added);
@@ -4475,8 +7125,7 @@ window.CodeMirror = (function() {
       if (text.length == 1) {
         update(firstLine, firstLine.text.slice(0, from.ch) + lastText + firstLine.text.slice(to.ch), lastSpans);
       } else {
-        for (var added = [], i = 1, e = text.length - 1; i < e; ++i)
-          added.push(new Line(text[i], spansFor(i), estimateHeight));
+        var added = linesFor(1, text.length - 1);
         added.push(new Line(lastText + firstLine.text.slice(to.ch), lastSpans, estimateHeight));
         update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
         doc.insert(from.line + 1, added);
@@ -4487,20 +7136,31 @@ window.CodeMirror = (function() {
     } else {
       update(firstLine, firstLine.text.slice(0, from.ch) + text[0], spansFor(0));
       update(lastLine, lastText + lastLine.text.slice(to.ch), lastSpans);
-      for (var i = 1, e = text.length - 1, added = []; i < e; ++i)
-        added.push(new Line(text[i], spansFor(i), estimateHeight));
+      var added = linesFor(1, text.length - 1);
       if (nlines > 1) doc.remove(from.line + 1, nlines - 1);
       doc.insert(from.line + 1, added);
     }
 
     signalLater(doc, "change", doc, change);
-    setSelection(doc, selAfter.anchor, selAfter.head, null, true);
   }
 
+  // The document is represented as a BTree consisting of leaves, with
+  // chunk of lines in them, and branches, with up to ten leaves or
+  // other branch nodes below them. The top node is always a branch
+  // node, and is the document object itself (meaning it has
+  // additional methods and properties).
+  //
+  // All nodes have parent links. The tree is used both to go from
+  // line numbers to line objects, and to go from objects to numbers.
+  // It also indexes by height, and is used to convert between height
+  // and line object, and to find the total height of the document.
+  //
+  // See also http://marijnhaverbeke.nl/blog/codemirror-line-tree.html
+
   function LeafChunk(lines) {
     this.lines = lines;
     this.parent = null;
-    for (var i = 0, e = lines.length, height = 0; i < e; ++i) {
+    for (var i = 0, height = 0; i < lines.length; ++i) {
       lines[i].parent = this;
       height += lines[i].height;
     }
@@ -4509,6 +7169,7 @@ window.CodeMirror = (function() {
 
   LeafChunk.prototype = {
     chunkSize: function() { return this.lines.length; },
+    // Remove the n lines at offset 'at'.
     removeInner: function(at, n) {
       for (var i = at, e = at + n; i < e; ++i) {
         var line = this.lines[i];
@@ -4518,14 +7179,18 @@ window.CodeMirror = (function() {
       }
       this.lines.splice(at, n);
     },
+    // Helper used to collapse a small branch into a single leaf.
     collapse: function(lines) {
-      lines.splice.apply(lines, [lines.length, 0].concat(this.lines));
+      lines.push.apply(lines, this.lines);
     },
+    // Insert the given array of lines at offset 'at', count them as
+    // having the given height.
     insertInner: function(at, lines, height) {
       this.height += height;
       this.lines = this.lines.slice(0, at).concat(lines).concat(this.lines.slice(at));
-      for (var i = 0, e = lines.length; i < e; ++i) lines[i].parent = this;
+      for (var i = 0; i < lines.length; ++i) lines[i].parent = this;
     },
+    // Used to iterate over a part of the tree.
     iterN: function(at, n, op) {
       for (var e = at + n; at < e; ++at)
         if (op(this.lines[at])) return true;
@@ -4535,7 +7200,7 @@ window.CodeMirror = (function() {
   function BranchChunk(children) {
     this.children = children;
     var size = 0, height = 0;
-    for (var i = 0, e = children.length; i < e; ++i) {
+    for (var i = 0; i < children.length; ++i) {
       var ch = children[i];
       size += ch.chunkSize(); height += ch.height;
       ch.parent = this;
@@ -4560,7 +7225,10 @@ window.CodeMirror = (function() {
           at = 0;
         } else at -= sz;
       }
-      if (this.size - n < 25) {
+      // If the result is smaller than 25 lines, ensure that it is a
+      // single leaf node.
+      if (this.size - n < 25 &&
+          (this.children.length > 1 || !(this.children[0] instanceof LeafChunk))) {
         var lines = [];
         this.collapse(lines);
         this.children = [new LeafChunk(lines)];
@@ -4568,12 +7236,12 @@ window.CodeMirror = (function() {
       }
     },
     collapse: function(lines) {
-      for (var i = 0, e = this.children.length; i < e; ++i) this.children[i].collapse(lines);
+      for (var i = 0; i < this.children.length; ++i) this.children[i].collapse(lines);
     },
     insertInner: function(at, lines, height) {
       this.size += lines.length;
       this.height += height;
-      for (var i = 0, e = this.children.length; i < e; ++i) {
+      for (var i = 0; i < this.children.length; ++i) {
         var child = this.children[i], sz = child.chunkSize();
         if (at <= sz) {
           child.insertInner(at, lines, height);
@@ -4592,6 +7260,7 @@ window.CodeMirror = (function() {
         at -= sz;
       }
     },
+    // When a node has grown, check whether it should be split.
     maybeSpill: function() {
       if (this.children.length <= 10) return;
       var me = this;
@@ -4614,7 +7283,7 @@ window.CodeMirror = (function() {
       me.parent.maybeSpill();
     },
     iterN: function(at, n, op) {
-      for (var i = 0, e = this.children.length; i < e; ++i) {
+      for (var i = 0; i < this.children.length; ++i) {
         var child = this.children[i], sz = child.chunkSize();
         if (at < sz) {
           var used = Math.min(n, sz - at);
@@ -4627,51 +7296,61 @@ window.CodeMirror = (function() {
   };
 
   var nextDocId = 0;
-  var Doc = CodeMirror.Doc = function(text, mode, firstLine) {
-    if (!(this instanceof Doc)) return new Doc(text, mode, firstLine);
+  var Doc = CodeMirror.Doc = function(text, mode, firstLine, lineSep) {
+    if (!(this instanceof Doc)) return new Doc(text, mode, firstLine, lineSep);
     if (firstLine == null) firstLine = 0;
 
     BranchChunk.call(this, [new LeafChunk([new Line("", null)])]);
     this.first = firstLine;
     this.scrollTop = this.scrollLeft = 0;
     this.cantEdit = false;
-    this.history = makeHistory();
     this.cleanGeneration = 1;
     this.frontier = firstLine;
     var start = Pos(firstLine, 0);
-    this.sel = {from: start, to: start, head: start, anchor: start, shift: false, extend: false, goalColumn: null};
+    this.sel = simpleSelection(start);
+    this.history = new History(null);
     this.id = ++nextDocId;
     this.modeOption = mode;
+    this.lineSep = lineSep;
 
-    if (typeof text == "string") text = splitLines(text);
-    updateDoc(this, {from: start, to: start, text: text}, null, {head: start, anchor: start});
+    if (typeof text == "string") text = this.splitLines(text);
+    updateDoc(this, {from: start, to: start, text: text});
+    setSelection(this, simpleSelection(start), sel_dontScroll);
   };
 
   Doc.prototype = createObj(BranchChunk.prototype, {
     constructor: Doc,
+    // Iterate over the document. Supports two forms -- with only one
+    // argument, it calls that for each line in the document. With
+    // three, it iterates over the range given by the first two (with
+    // the second being non-inclusive).
     iter: function(from, to, op) {
       if (op) this.iterN(from - this.first, to - from, op);
       else this.iterN(this.first, this.first + this.size, from);
     },
 
+    // Non-public interface for adding and removing lines.
     insert: function(at, lines) {
       var height = 0;
-      for (var i = 0, e = lines.length; i < e; ++i) height += lines[i].height;
+      for (var i = 0; i < lines.length; ++i) height += lines[i].height;
       this.insertInner(at - this.first, lines, height);
     },
     remove: function(at, n) { this.removeInner(at - this.first, n); },
 
+    // From here, the methods are part of the public interface. Most
+    // are also available from CodeMirror (editor) instances.
+
     getValue: function(lineSep) {
       var lines = getLines(this, this.first, this.first + this.size);
       if (lineSep === false) return lines;
-      return lines.join(lineSep || "\n");
+      return lines.join(lineSep || this.lineSeparator());
     },
-    setValue: function(code) {
+    setValue: docMethodOp(function(code) {
       var top = Pos(this.first, 0), last = this.first + this.size - 1;
       makeChange(this, {from: top, to: Pos(last, getLine(this, last).text.length),
-                        text: splitLines(code), origin: "setValue"},
-                 {head: top, anchor: top}, true);
-    },
+                        text: this.splitLines(code), origin: "setValue", full: true}, true);
+      setSelection(this, simpleSelection(top));
+    }),
     replaceRange: function(code, from, to, origin) {
       from = clipPos(this, from);
       to = to ? clipPos(this, to) : from;
@@ -4680,25 +7359,17 @@ window.CodeMirror = (function() {
     getRange: function(from, to, lineSep) {
       var lines = getBetween(this, clipPos(this, from), clipPos(this, to));
       if (lineSep === false) return lines;
-      return lines.join(lineSep || "\n");
+      return lines.join(lineSep || this.lineSeparator());
     },
 
     getLine: function(line) {var l = this.getLineHandle(line); return l && l.text;},
-    setLine: function(line, text) {
-      if (isLine(this, line))
-        replaceRange(this, text, Pos(line, 0), clipPos(this, Pos(line)));
-    },
-    removeLine: function(line) {
-      if (line) replaceRange(this, "", clipPos(this, Pos(line - 1)), clipPos(this, Pos(line)));
-      else replaceRange(this, "", Pos(0, 0), clipPos(this, Pos(1, 0)));
-    },
 
     getLineHandle: function(line) {if (isLine(this, line)) return getLine(this, line);},
     getLineNumber: function(line) {return lineNo(line);},
 
     getLineHandleVisualStart: function(line) {
       if (typeof line == "number") line = getLine(this, line);
-      return visualLine(this, line);
+      return visualLine(line);
     },
 
     lineCount: function() {return this.size;},
@@ -4708,47 +7379,103 @@ window.CodeMirror = (function() {
     clipPos: function(pos) {return clipPos(this, pos);},
 
     getCursor: function(start) {
-      var sel = this.sel, pos;
-      if (start == null || start == "head") pos = sel.head;
-      else if (start == "anchor") pos = sel.anchor;
-      else if (start == "end" || start === false) pos = sel.to;
-      else pos = sel.from;
-      return copyPos(pos);
+      var range = this.sel.primary(), pos;
+      if (start == null || start == "head") pos = range.head;
+      else if (start == "anchor") pos = range.anchor;
+      else if (start == "end" || start == "to" || start === false) pos = range.to();
+      else pos = range.from();
+      return pos;
     },
-    somethingSelected: function() {return !posEq(this.sel.head, this.sel.anchor);},
+    listSelections: function() { return this.sel.ranges; },
+    somethingSelected: function() {return this.sel.somethingSelected();},
 
-    setCursor: docOperation(function(line, ch, extend) {
-      var pos = clipPos(this, typeof line == "number" ? Pos(line, ch || 0) : line);
-      if (extend) extendSelection(this, pos);
-      else setSelection(this, pos, pos);
+    setCursor: docMethodOp(function(line, ch, options) {
+      setSimpleSelection(this, clipPos(this, typeof line == "number" ? Pos(line, ch || 0) : line), null, options);
+    }),
+    setSelection: docMethodOp(function(anchor, head, options) {
+      setSimpleSelection(this, clipPos(this, anchor), clipPos(this, head || anchor), options);
+    }),
+    extendSelection: docMethodOp(function(head, other, options) {
+      extendSelection(this, clipPos(this, head), other && clipPos(this, other), options);
     }),
-    setSelection: docOperation(function(anchor, head) {
-      setSelection(this, clipPos(this, anchor), clipPos(this, head || anchor));
+    extendSelections: docMethodOp(function(heads, options) {
+      extendSelections(this, clipPosArray(this, heads, options));
     }),
-    extendSelection: docOperation(function(from, to) {
-      extendSelection(this, clipPos(this, from), to && clipPos(this, to));
+    extendSelectionsBy: docMethodOp(function(f, options) {
+      extendSelections(this, map(this.sel.ranges, f), options);
+    }),
+    setSelections: docMethodOp(function(ranges, primary, options) {
+      if (!ranges.length) return;
+      for (var i = 0, out = []; i < ranges.length; i++)
+        out[i] = new Range(clipPos(this, ranges[i].anchor),
+                           clipPos(this, ranges[i].head));
+      if (primary == null) primary = Math.min(ranges.length - 1, this.sel.primIndex);
+      setSelection(this, normalizeSelection(out, primary), options);
+    }),
+    addSelection: docMethodOp(function(anchor, head, options) {
+      var ranges = this.sel.ranges.slice(0);
+      ranges.push(new Range(clipPos(this, anchor), clipPos(this, head || anchor)));
+      setSelection(this, normalizeSelection(ranges, ranges.length - 1), options);
     }),
 
-    getSelection: function(lineSep) {return this.getRange(this.sel.from, this.sel.to, lineSep);},
+    getSelection: function(lineSep) {
+      var ranges = this.sel.ranges, lines;
+      for (var i = 0; i < ranges.length; i++) {
+        var sel = getBetween(this, ranges[i].from(), ranges[i].to());
+        lines = lines ? lines.concat(sel) : sel;
+      }
+      if (lineSep === false) return lines;
+      else return lines.join(lineSep || this.lineSeparator());
+    },
+    getSelections: function(lineSep) {
+      var parts = [], ranges = this.sel.ranges;
+      for (var i = 0; i < ranges.length; i++) {
+        var sel = getBetween(this, ranges[i].from(), ranges[i].to());
+        if (lineSep !== false) sel = sel.join(lineSep || this.lineSeparator());
+        parts[i] = sel;
+      }
+      return parts;
+    },
     replaceSelection: function(code, collapse, origin) {
-      makeChange(this, {from: this.sel.from, to: this.sel.to, text: splitLines(code), origin: origin}, collapse || "around");
+      var dup = [];
+      for (var i = 0; i < this.sel.ranges.length; i++)
+        dup[i] = code;
+      this.replaceSelections(dup, collapse, origin || "+input");
     },
-    undo: docOperation(function() {makeChangeFromHistory(this, "undo");}),
-    redo: docOperation(function() {makeChangeFromHistory(this, "redo");}),
+    replaceSelections: docMethodOp(function(code, collapse, origin) {
+      var changes = [], sel = this.sel;
+      for (var i = 0; i < sel.ranges.length; i++) {
+        var range = sel.ranges[i];
+        changes[i] = {from: range.from(), to: range.to(), text: this.splitLines(code[i]), origin: origin};
+      }
+      var newSel = collapse && collapse != "end" && computeReplacedSel(this, changes, collapse);
+      for (var i = changes.length - 1; i >= 0; i--)
+        makeChange(this, changes[i]);
+      if (newSel) setSelectionReplaceHistory(this, newSel);
+      else if (this.cm) ensureCursorVisible(this.cm);
+    }),
+    undo: docMethodOp(function() {makeChangeFromHistory(this, "undo");}),
+    redo: docMethodOp(function() {makeChangeFromHistory(this, "redo");}),
+    undoSelection: docMethodOp(function() {makeChangeFromHistory(this, "undo", true);}),
+    redoSelection: docMethodOp(function() {makeChangeFromHistory(this, "redo", true);}),
 
-    setExtending: function(val) {this.sel.extend = val;},
+    setExtending: function(val) {this.extend = val;},
+    getExtending: function() {return this.extend;},
 
     historySize: function() {
-      var hist = this.history;
-      return {undo: hist.done.length, redo: hist.undone.length};
+      var hist = this.history, done = 0, undone = 0;
+      for (var i = 0; i < hist.done.length; i++) if (!hist.done[i].ranges) ++done;
+      for (var i = 0; i < hist.undone.length; i++) if (!hist.undone[i].ranges) ++undone;
+      return {undo: done, redo: undone};
     },
-    clearHistory: function() {this.history = makeHistory(this.history.maxGeneration);},
+    clearHistory: function() {this.history = new History(this.history.maxGeneration);},
 
     markClean: function() {
-      this.cleanGeneration = this.changeGeneration();
+      this.cleanGeneration = this.changeGeneration(true);
     },
-    changeGeneration: function() {
-      this.history.lastOp = this.history.lastOrigin = null;
+    changeGeneration: function(forceSplit) {
+      if (forceSplit)
+        this.history.lastOp = this.history.lastSelOp = this.history.lastOrigin = null;
       return this.history.generation;
     },
     isClean: function (gen) {
@@ -4760,17 +7487,53 @@ window.CodeMirror = (function() {
               undone: copyHistoryArray(this.history.undone)};
     },
     setHistory: function(histData) {
-      var hist = this.history = makeHistory(this.history.maxGeneration);
-      hist.done = histData.done.slice(0);
-      hist.undone = histData.undone.slice(0);
+      var hist = this.history = new History(this.history.maxGeneration);
+      hist.done = copyHistoryArray(histData.done.slice(0), null, true);
+      hist.undone = copyHistoryArray(histData.undone.slice(0), null, true);
     },
 
+    addLineClass: docMethodOp(function(handle, where, cls) {
+      return changeLine(this, handle, where == "gutter" ? "gutter" : "class", function(line) {
+        var prop = where == "text" ? "textClass"
+                 : where == "background" ? "bgClass"
+                 : where == "gutter" ? "gutterClass" : "wrapClass";
+        if (!line[prop]) line[prop] = cls;
+        else if (classTest(cls).test(line[prop])) return false;
+        else line[prop] += " " + cls;
+        return true;
+      });
+    }),
+    removeLineClass: docMethodOp(function(handle, where, cls) {
+      return changeLine(this, handle, where == "gutter" ? "gutter" : "class", function(line) {
+        var prop = where == "text" ? "textClass"
+                 : where == "background" ? "bgClass"
+                 : where == "gutter" ? "gutterClass" : "wrapClass";
+        var cur = line[prop];
+        if (!cur) return false;
+        else if (cls == null) line[prop] = null;
+        else {
+          var found = cur.match(classTest(cls));
+          if (!found) return false;
+          var end = found.index + found[0].length;
+          line[prop] = cur.slice(0, found.index) + (!found.index || end == cur.length ? "" : " ") + cur.slice(end) || null;
+        }
+        return true;
+      });
+    }),
+
+    addLineWidget: docMethodOp(function(handle, node, options) {
+      return addLineWidget(this, handle, node, options);
+    }),
+    removeLineWidget: function(widget) { widget.clear(); },
+
     markText: function(from, to, options) {
       return markText(this, clipPos(this, from), clipPos(this, to), options, "range");
     },
     setBookmark: function(pos, options) {
       var realOpts = {replacedWith: options && (options.nodeType == null ? options.widget : options),
-                      insertLeft: options && options.insertLeft};
+                      insertLeft: options && options.insertLeft,
+                      clearWhenEmpty: false, shared: options && options.shared,
+                      handleMouseEvents: options && options.handleMouseEvents};
       pos = clipPos(this, pos);
       return markText(this, pos, pos, realOpts, "bookmark");
     },
@@ -4785,6 +7548,23 @@ window.CodeMirror = (function() {
       }
       return markers;
     },
+    findMarks: function(from, to, filter) {
+      from = clipPos(this, from); to = clipPos(this, to);
+      var found = [], lineNo = from.line;
+      this.iter(from.line, to.line + 1, function(line) {
+        var spans = line.markedSpans;
+        if (spans) for (var i = 0; i < spans.length; i++) {
+          var span = spans[i];
+          if (!(lineNo == from.line && from.ch > span.to ||
+                span.from == null && lineNo != from.line||
+                lineNo == to.line && span.from > to.ch) &&
+              (!filter || filter(span.marker)))
+            found.push(span.marker.parent || span.marker);
+        }
+        ++lineNo;
+      });
+      return found;
+    },
     getAllMarks: function() {
       var markers = [];
       this.iter(function(line) {
@@ -4816,10 +7596,11 @@ window.CodeMirror = (function() {
     },
 
     copy: function(copyHistory) {
-      var doc = new Doc(getLines(this, this.first, this.first + this.size), this.modeOption, this.first);
+      var doc = new Doc(getLines(this, this.first, this.first + this.size),
+                        this.modeOption, this.first, this.lineSep);
       doc.scrollTop = this.scrollTop; doc.scrollLeft = this.scrollLeft;
-      doc.sel = {from: this.sel.from, to: this.sel.to, head: this.sel.head, anchor: this.sel.anchor,
-                 shift: this.sel.shift, extend: false, goalColumn: this.sel.goalColumn};
+      doc.sel = this.sel;
+      doc.extend = false;
       if (copyHistory) {
         doc.history.undoDepth = this.history.undoDepth;
         doc.setHistory(this.getHistory());
@@ -4832,10 +7613,11 @@ window.CodeMirror = (function() {
       var from = this.first, to = this.first + this.size;
       if (options.from != null && options.from > from) from = options.from;
       if (options.to != null && options.to < to) to = options.to;
-      var copy = new Doc(getLines(this, from, to), options.mode || this.modeOption, from);
+      var copy = new Doc(getLines(this, from, to), options.mode || this.modeOption, from, this.lineSep);
       if (options.sharedHist) copy.history = this.history;
       (this.linked || (this.linked = [])).push({doc: copy, sharedHist: options.sharedHist});
       copy.linked = [{doc: this, isParent: true, sharedHist: options.sharedHist}];
+      copySharedMarkers(copy, findSharedMarkers(this));
       return copy;
     },
     unlinkDoc: function(other) {
@@ -4845,13 +7627,14 @@ window.CodeMirror = (function() {
         if (link.doc != other) continue;
         this.linked.splice(i, 1);
         other.unlinkDoc(this);
+        detachSharedMarkers(findSharedMarkers(this));
         break;
       }
       // If the histories were shared, split them again
       if (other.history == this.history) {
         var splitIds = [other.id];
         linkedDocs(other, function(doc) {splitIds.push(doc.id);}, true);
-        other.history = makeHistory();
+        other.history = new History(null);
         other.history.done = copyHistoryArray(this.history.done, splitIds);
         other.history.undone = copyHistoryArray(this.history.undone, splitIds);
       }
@@ -4859,13 +7642,20 @@ window.CodeMirror = (function() {
     iterLinkedDocs: function(f) {linkedDocs(this, f);},
 
     getMode: function() {return this.mode;},
-    getEditor: function() {return this.cm;}
+    getEditor: function() {return this.cm;},
+
+    splitLines: function(str) {
+      if (this.lineSep) return str.split(this.lineSep);
+      return splitLinesAuto(str);
+    },
+    lineSeparator: function() { return this.lineSep || "\n"; }
   });
 
+  // Public alias.
   Doc.prototype.eachLine = Doc.prototype.iter;
 
-  // The Doc methods that should be available on CodeMirror instances
-  var dontDelegate = "iter insert remove copy getEditor".split(" ");
+  // Set up methods on CodeMirror's prototype to redirect to the editor's document.
+  var dontDelegate = "iter insert remove copy getEditor constructor".split(" ");
   for (var prop in Doc.prototype) if (Doc.prototype.hasOwnProperty(prop) && indexOf(dontDelegate, prop) < 0)
     CodeMirror.prototype[prop] = (function(method) {
       return function() {return method.apply(this.doc, arguments);};
@@ -4873,6 +7663,7 @@ window.CodeMirror = (function() {
 
   eventMixin(Doc);
 
+  // Call f for all linked documents.
   function linkedDocs(doc, f, sharedHistOnly) {
     function propagate(doc, skip, sharedHist) {
       if (doc.linked) for (var i = 0; i < doc.linked.length; ++i) {
@@ -4887,22 +7678,25 @@ window.CodeMirror = (function() {
     propagate(doc, null, true);
   }
 
+  // Attach a document to an editor.
   function attachDoc(cm, doc) {
     if (doc.cm) throw new Error("This document is already in use.");
     cm.doc = doc;
     doc.cm = cm;
     estimateLineHeights(cm);
     loadMode(cm);
-    if (!cm.options.lineWrapping) computeMaxLength(cm);
+    if (!cm.options.lineWrapping) findMaxLine(cm);
     cm.options.mode = doc.modeOption;
     regChange(cm);
   }
 
   // LINE UTILITIES
 
-  function getLine(chunk, n) {
-    n -= chunk.first;
-    while (!chunk.lines) {
+  // Find the line object corresponding to the given line number.
+  function getLine(doc, n) {
+    n -= doc.first;
+    if (n < 0 || n >= doc.size) throw new Error("There is no line " + (n + doc.first) + " in the document.");
+    for (var chunk = doc; !chunk.lines;) {
       for (var i = 0;; ++i) {
         var child = chunk.children[i], sz = child.chunkSize();
         if (n < sz) { chunk = child; break; }
@@ -4912,6 +7706,8 @@ window.CodeMirror = (function() {
     return chunk.lines[n];
   }
 
+  // Get the part of a document between two positions, as an array of
+  // strings.
   function getBetween(doc, start, end) {
     var out = [], n = start.line;
     doc.iter(start.line, end.line + 1, function(line) {
@@ -4923,17 +7719,22 @@ window.CodeMirror = (function() {
     });
     return out;
   }
+  // Get the lines between from and to, as array of strings.
   function getLines(doc, from, to) {
     var out = [];
     doc.iter(from, to, function(line) { out.push(line.text); });
     return out;
   }
 
+  // Update the height of a line, propagating the height change
+  // upwards to parent nodes.
   function updateLineHeight(line, height) {
     var diff = height - line.height;
-    for (var n = line; n; n = n.parent) n.height += diff;
+    if (diff) for (var n = line; n; n = n.parent) n.height += diff;
   }
 
+  // Given a line object, find its line number by walking up through
+  // its parent links.
   function lineNo(line) {
     if (line.parent == null) return null;
     var cur = line.parent, no = indexOf(cur.lines, line);
@@ -4946,10 +7747,12 @@ window.CodeMirror = (function() {
     return no + cur.first;
   }
 
+  // Find the line at the given vertical position, using the height
+  // information in the document tree.
   function lineAtHeight(chunk, h) {
     var n = chunk.first;
     outer: do {
-      for (var i = 0, e = chunk.children.length; i < e; ++i) {
+      for (var i = 0; i < chunk.children.length; ++i) {
         var child = chunk.children[i], ch = child.height;
         if (h < ch) { chunk = child; continue outer; }
         h -= ch;
@@ -4957,7 +7760,7 @@ window.CodeMirror = (function() {
       }
       return n;
     } while (!chunk.lines);
-    for (var i = 0, e = chunk.lines.length; i < e; ++i) {
+    for (var i = 0; i < chunk.lines.length; ++i) {
       var line = chunk.lines[i], lh = line.height;
       if (h < lh) break;
       h -= lh;
@@ -4965,8 +7768,10 @@ window.CodeMirror = (function() {
     return n + i;
   }
 
-  function heightAtLine(cm, lineObj) {
-    lineObj = visualLine(cm.doc, lineObj);
+
+  // Find the height above the given line.
+  function heightAtLine(lineObj) {
+    lineObj = visualLine(lineObj);
 
     var h = 0, chunk = lineObj.parent;
     for (var i = 0; i < chunk.lines.length; ++i) {
@@ -4984,6 +7789,9 @@ window.CodeMirror = (function() {
     return h;
   }
 
+  // Get the bidi ordering for the given line (and cache it). Returns
+  // false for lines that are fully left-to-right, and an array of
+  // BidiSpan objects otherwise.
   function getOrder(line) {
     var order = line.order;
     if (order == null) order = line.order = bidiOrdering(line.text);
@@ -4992,50 +7800,70 @@ window.CodeMirror = (function() {
 
   // HISTORY
 
-  function makeHistory(startGen) {
-    return {
-      // Arrays of history events. Doing something adds an event to
-      // done and clears undo. Undoing moves events from done to
-      // undone, redoing moves them in the other direction.
-      done: [], undone: [], undoDepth: Infinity,
-      // Used to track when changes can be merged into a single undo
-      // event
-      lastTime: 0, lastOp: null, lastOrigin: null,
-      // Used by the isClean() method
-      generation: startGen || 1, maxGeneration: startGen || 1
-    };
-  }
-
-  function attachLocalSpans(doc, change, from, to) {
-    var existing = change["spans_" + doc.id], n = 0;
-    doc.iter(Math.max(doc.first, from), Math.min(doc.first + doc.size, to), function(line) {
-      if (line.markedSpans)
-        (existing || (existing = change["spans_" + doc.id] = {}))[n] = line.markedSpans;
-      ++n;
-    });
-  }
-
+  function History(startGen) {
+    // Arrays of change events and selections. Doing something adds an
+    // event to done and clears undo. Undoing moves events from done
+    // to undone, redoing moves them in the other direction.
+    this.done = []; this.undone = [];
+    this.undoDepth = Infinity;
+    // Used to track when changes can be merged into a single undo
+    // event
+    this.lastModTime = this.lastSelTime = 0;
+    this.lastOp = this.lastSelOp = null;
+    this.lastOrigin = this.lastSelOrigin = null;
+    // Used by the isClean() method
+    this.generation = this.maxGeneration = startGen || 1;
+  }
+
+  // Create a history change event from an updateDoc-style change
+  // object.
   function historyChangeFromChange(doc, change) {
-    var from = { line: change.from.line, ch: change.from.ch };
-    var histChange = {from: from, to: changeEnd(change), text: getBetween(doc, change.from, change.to)};
+    var histChange = {from: copyPos(change.from), to: changeEnd(change), text: getBetween(doc, change.from, change.to)};
     attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);
     linkedDocs(doc, function(doc) {attachLocalSpans(doc, histChange, change.from.line, change.to.line + 1);}, true);
     return histChange;
   }
 
-  function addToHistory(doc, change, selAfter, opId) {
+  // Pop all selection events off the end of a history array. Stop at
+  // a change event.
+  function clearSelectionEvents(array) {
+    while (array.length) {
+      var last = lst(array);
+      if (last.ranges) array.pop();
+      else break;
+    }
+  }
+
+  // Find the top change event in the history. Pop off selection
+  // events that are in the way.
+  function lastChangeEvent(hist, force) {
+    if (force) {
+      clearSelectionEvents(hist.done);
+      return lst(hist.done);
+    } else if (hist.done.length && !lst(hist.done).ranges) {
+      return lst(hist.done);
+    } else if (hist.done.length > 1 && !hist.done[hist.done.length - 2].ranges) {
+      hist.done.pop();
+      return lst(hist.done);
+    }
+  }
+
+  // Register a change in the history. Merges changes that are within
+  // a single operation, ore are close together with an origin that
+  // allows merging (starting with "+") into a single event.
+  function addChangeToHistory(doc, change, selAfter, opId) {
     var hist = doc.history;
     hist.undone.length = 0;
-    var time = +new Date, cur = lst(hist.done);
+    var time = +new Date, cur;
 
-    if (cur &&
-        (hist.lastOp == opId ||
+    if ((hist.lastOp == opId ||
          hist.lastOrigin == change.origin && change.origin &&
-         ((change.origin.charAt(0) == "+" && doc.cm && hist.lastTime > time - doc.cm.options.historyEventDelay) ||
-          change.origin.charAt(0) == "*"))) {
+         ((change.origin.charAt(0) == "+" && doc.cm && hist.lastModTime > time - doc.cm.options.historyEventDelay) ||
+          change.origin.charAt(0) == "*")) &&
+        (cur = lastChangeEvent(hist, hist.lastOp == opId))) {
       // Merge this change into the last event
       var last = lst(cur.changes);
-      if (posEq(change.from, change.to) && posEq(change.from, last.to)) {
+      if (cmp(change.from, change.to) == 0 && cmp(change.from, last.to) == 0) {
         // Optimized case for simple insertion -- don't want to add
         // new changesets for every character typed
         last.to = changeEnd(change);
@@ -5043,23 +7871,81 @@ window.CodeMirror = (function() {
         // Add new sub-event
         cur.changes.push(historyChangeFromChange(doc, change));
       }
-      cur.anchorAfter = selAfter.anchor; cur.headAfter = selAfter.head;
     } else {
       // Can not be merged, start a new event.
+      var before = lst(hist.done);
+      if (!before || !before.ranges)
+        pushSelectionToHistory(doc.sel, hist.done);
       cur = {changes: [historyChangeFromChange(doc, change)],
-             generation: hist.generation,
-             anchorBefore: doc.sel.anchor, headBefore: doc.sel.head,
-             anchorAfter: selAfter.anchor, headAfter: selAfter.head};
+             generation: hist.generation};
       hist.done.push(cur);
-      hist.generation = ++hist.maxGeneration;
-      while (hist.done.length > hist.undoDepth)
+      while (hist.done.length > hist.undoDepth) {
         hist.done.shift();
+        if (!hist.done[0].ranges) hist.done.shift();
+      }
     }
-    hist.lastTime = time;
-    hist.lastOp = opId;
-    hist.lastOrigin = change.origin;
+    hist.done.push(selAfter);
+    hist.generation = ++hist.maxGeneration;
+    hist.lastModTime = hist.lastSelTime = time;
+    hist.lastOp = hist.lastSelOp = opId;
+    hist.lastOrigin = hist.lastSelOrigin = change.origin;
+
+    if (!last) signal(doc, "historyAdded");
+  }
+
+  function selectionEventCanBeMerged(doc, origin, prev, sel) {
+    var ch = origin.charAt(0);
+    return ch == "*" ||
+      ch == "+" &&
+      prev.ranges.length == sel.ranges.length &&
+      prev.somethingSelected() == sel.somethingSelected() &&
+      new Date - doc.history.lastSelTime <= (doc.cm ? doc.cm.options.historyEventDelay : 500);
+  }
+
+  // Called whenever the selection changes, sets the new selection as
+  // the pending selection in the history, and pushes the old pending
+  // selection into the 'done' array when it was significantly
+  // different (in number of selected ranges, emptiness, or time).
+  function addSelectionToHistory(doc, sel, opId, options) {
+    var hist = doc.history, origin = options && options.origin;
+
+    // A new event is started when the previous origin does not match
+    // the current, or the origins don't allow matching. Origins
+    // starting with * are always merged, those starting with + are
+    // merged when similar and close together in time.
+    if (opId == hist.lastSelOp ||
+        (origin && hist.lastSelOrigin == origin &&
+         (hist.lastModTime == hist.lastSelTime && hist.lastOrigin == origin ||
+          selectionEventCanBeMerged(doc, origin, lst(hist.done), sel))))
+      hist.done[hist.done.length - 1] = sel;
+    else
+      pushSelectionToHistory(sel, hist.done);
+
+    hist.lastSelTime = +new Date;
+    hist.lastSelOrigin = origin;
+    hist.lastSelOp = opId;
+    if (options && options.clearRedo !== false)
+      clearSelectionEvents(hist.undone);
+  }
+
+  function pushSelectionToHistory(sel, dest) {
+    var top = lst(dest);
+    if (!(top && top.ranges && top.equals(sel)))
+      dest.push(sel);
   }
 
+  // Used to store marked span information in the history.
+  function attachLocalSpans(doc, change, from, to) {
+    var existing = change["spans_" + doc.id], n = 0;
+    doc.iter(Math.max(doc.first, from), Math.min(doc.first + doc.size, to), function(line) {
+      if (line.markedSpans)
+        (existing || (existing = change["spans_" + doc.id] = {}))[n] = line.markedSpans;
+      ++n;
+    });
+  }
+
+  // When un/re-doing restores text containing marked spans, those
+  // that have been explicitly cleared should not be restored.
   function removeClearedSpans(spans) {
     if (!spans) return null;
     for (var i = 0, out; i < spans.length; ++i) {
@@ -5069,6 +7955,7 @@ window.CodeMirror = (function() {
     return !out ? spans : out.length ? out : null;
   }
 
+  // Retrieve and filter the old marked spans stored in a change event.
   function getOldSpans(doc, change) {
     var found = change["spans_" + doc.id];
     if (!found) return null;
@@ -5079,11 +7966,15 @@ window.CodeMirror = (function() {
 
   // Used both to provide a JSON-safe object in .getHistory, and, when
   // detaching a document, to split the history in two
-  function copyHistoryArray(events, newGroup) {
+  function copyHistoryArray(events, newGroup, instantiateSel) {
     for (var i = 0, copy = []; i < events.length; ++i) {
-      var event = events[i], changes = event.changes, newChanges = [];
-      copy.push({changes: newChanges, anchorBefore: event.anchorBefore, headBefore: event.headBefore,
-                 anchorAfter: event.anchorAfter, headAfter: event.headAfter});
+      var event = events[i];
+      if (event.ranges) {
+        copy.push(instantiateSel ? Selection.prototype.deepCopy.call(event) : event);
+        continue;
+      }
+      var changes = event.changes, newChanges = [];
+      copy.push({changes: newChanges});
       for (var j = 0; j < changes.length; ++j) {
         var change = changes[j], m;
         newChanges.push({from: change.from, to: change.to, text: change.text});
@@ -5100,7 +7991,7 @@ window.CodeMirror = (function() {
 
   // Rebasing/resetting history to deal with externally-sourced changes
 
-  function rebaseHistSel(pos, from, to, diff) {
+  function rebaseHistSelSingle(pos, from, to, diff) {
     if (to < pos.line) {
       pos.line += diff;
     } else if (from < pos.line) {
@@ -5119,28 +8010,27 @@ window.CodeMirror = (function() {
   function rebaseHistArray(array, from, to, diff) {
     for (var i = 0; i < array.length; ++i) {
       var sub = array[i], ok = true;
+      if (sub.ranges) {
+        if (!sub.copied) { sub = array[i] = sub.deepCopy(); sub.copied = true; }
+        for (var j = 0; j < sub.ranges.length; j++) {
+          rebaseHistSelSingle(sub.ranges[j].anchor, from, to, diff);
+          rebaseHistSelSingle(sub.ranges[j].head, from, to, diff);
+        }
+        continue;
+      }
       for (var j = 0; j < sub.changes.length; ++j) {
         var cur = sub.changes[j];
-        if (!sub.copied) { cur.from = copyPos(cur.from); cur.to = copyPos(cur.to); }
         if (to < cur.from.line) {
-          cur.from.line += diff;
-          cur.to.line += diff;
+          cur.from = Pos(cur.from.line + diff, cur.from.ch);
+          cur.to = Pos(cur.to.line + diff, cur.to.ch);
         } else if (from <= cur.to.line) {
           ok = false;
           break;
         }
       }
-      if (!sub.copied) {
-        sub.anchorBefore = copyPos(sub.anchorBefore); sub.headBefore = copyPos(sub.headBefore);
-        sub.anchorAfter = copyPos(sub.anchorAfter); sub.readAfter = copyPos(sub.headAfter);
-        sub.copied = true;
-      }
       if (!ok) {
         array.splice(0, i + 1);
         i = 0;
-      } else {
-        rebaseHistSel(sub.anchorBefore); rebaseHistSel(sub.headBefore);
-        rebaseHistSel(sub.anchorAfter); rebaseHistSel(sub.headAfter);
       }
     }
   }
@@ -5151,30 +8041,23 @@ window.CodeMirror = (function() {
     rebaseHistArray(hist.undone, from, to, diff);
   }
 
-  // EVENT OPERATORS
+  // EVENT UTILITIES
 
-  function stopMethod() {e_stop(this);}
-  // Ensure an event has a stop method.
-  function addStop(event) {
-    if (!event.stop) event.stop = stopMethod;
-    return event;
-  }
+  // Due to the fact that we still support jurassic IE versions, some
+  // compatibility wrappers are needed.
 
-  function e_preventDefault(e) {
+  var e_preventDefault = CodeMirror.e_preventDefault = function(e) {
     if (e.preventDefault) e.preventDefault();
     else e.returnValue = false;
-  }
-  function e_stopPropagation(e) {
+  };
+  var e_stopPropagation = CodeMirror.e_stopPropagation = function(e) {
     if (e.stopPropagation) e.stopPropagation();
     else e.cancelBubble = true;
-  }
+  };
   function e_defaultPrevented(e) {
     return e.defaultPrevented != null ? e.defaultPrevented : e.returnValue == false;
   }
-  function e_stop(e) {e_preventDefault(e); e_stopPropagation(e);}
-  CodeMirror.e_stop = e_stop;
-  CodeMirror.e_preventDefault = e_preventDefault;
-  CodeMirror.e_stopPropagation = e_stopPropagation;
+  var e_stop = CodeMirror.e_stop = function(e) {e_preventDefault(e); e_stopPropagation(e);};
 
   function e_target(e) {return e.target || e.srcElement;}
   function e_button(e) {
@@ -5190,7 +8073,10 @@ window.CodeMirror = (function() {
 
   // EVENT HANDLING
 
-  function on(emitter, type, f) {
+  // Lightweight event framework. on/off also work on DOM nodes,
+  // registering native DOM handlers.
+
+  var on = CodeMirror.on = function(emitter, type, f) {
     if (emitter.addEventListener)
       emitter.addEventListener(type, f, false);
     else if (emitter.attachEvent)
@@ -5200,9 +8086,9 @@ window.CodeMirror = (function() {
       var arr = map[type] || (map[type] = []);
       arr.push(f);
     }
-  }
+  };
 
-  function off(emitter, type, f) {
+  var off = CodeMirror.off = function(emitter, type, f) {
     if (emitter.removeEventListener)
       emitter.removeEventListener(type, f, false);
     else if (emitter.detachEvent)
@@ -5213,40 +8099,63 @@ window.CodeMirror = (function() {
       for (var i = 0; i < arr.length; ++i)
         if (arr[i] == f) { arr.splice(i, 1); break; }
     }
-  }
+  };
 
-  function signal(emitter, type /*, values...*/) {
+  var signal = CodeMirror.signal = function(emitter, type /*, values...*/) {
     var arr = emitter._handlers && emitter._handlers[type];
     if (!arr) return;
     var args = Array.prototype.slice.call(arguments, 2);
     for (var i = 0; i < arr.length; ++i) arr[i].apply(null, args);
-  }
+  };
+
+  var orphanDelayedCallbacks = null;
 
-  var delayedCallbacks, delayedCallbackDepth = 0;
+  // Often, we want to signal events at a point where we are in the
+  // middle of some work, but don't want the handler to start calling
+  // other methods on the editor, which might be in an inconsistent
+  // state or simply not expect any other events to happen.
+  // signalLater looks whether there are any handlers, and schedules
+  // them to be executed when the last operation ends, or, if no
+  // operation is active, when a timeout fires.
   function signalLater(emitter, type /*, values...*/) {
     var arr = emitter._handlers && emitter._handlers[type];
     if (!arr) return;
-    var args = Array.prototype.slice.call(arguments, 2);
-    if (!delayedCallbacks) {
-      ++delayedCallbackDepth;
-      delayedCallbacks = [];
-      setTimeout(fireDelayed, 0);
+    var args = Array.prototype.slice.call(arguments, 2), list;
+    if (operationGroup) {
+      list = operationGroup.delayedCallbacks;
+    } else if (orphanDelayedCallbacks) {
+      list = orphanDelayedCallbacks;
+    } else {
+      list = orphanDelayedCallbacks = [];
+      setTimeout(fireOrphanDelayed, 0);
     }
     function bnd(f) {return function(){f.apply(null, args);};};
     for (var i = 0; i < arr.length; ++i)
-      delayedCallbacks.push(bnd(arr[i]));
+      list.push(bnd(arr[i]));
   }
 
+  function fireOrphanDelayed() {
+    var delayed = orphanDelayedCallbacks;
+    orphanDelayedCallbacks = null;
+    for (var i = 0; i < delayed.length; ++i) delayed[i]();
+  }
+
+  // The DOM events that CodeMirror handles can be overridden by
+  // registering a (non-DOM) handler on the editor for the event name,
+  // and preventDefault-ing the event in that handler.
   function signalDOMEvent(cm, e, override) {
+    if (typeof e == "string")
+      e = {type: e, preventDefault: function() { this.defaultPrevented = true; }};
     signal(cm, override || e.type, cm, e);
-    return e_defaultPrevented(e);
+    return e_defaultPrevented(e) || e.codemirrorIgnore;
   }
 
-  function fireDelayed() {
-    --delayedCallbackDepth;
-    var delayed = delayedCallbacks;
-    delayedCallbacks = null;
-    for (var i = 0; i < delayed.length; ++i) delayed[i]();
+  function signalCursorActivity(cm) {
+    var arr = cm._handlers && cm._handlers.cursorActivity;
+    if (!arr) return;
+    var set = cm.curOp.cursorActivityHandlers || (cm.curOp.cursorActivityHandlers = []);
+    for (var i = 0; i < arr.length; ++i) if (indexOf(set, arr[i]) == -1)
+      set.push(arr[i]);
   }
 
   function hasHandler(emitter, type) {
@@ -5254,8 +8163,8 @@ window.CodeMirror = (function() {
     return arr && arr.length > 0;
   }
 
-  CodeMirror.on = on; CodeMirror.off = off; CodeMirror.signal = signal;
-
+  // Add on and off methods to a constructor's prototype, to make
+  // registering events on such objects more convenient.
   function eventMixin(ctor) {
     ctor.prototype.on = function(type, f) {on(this, type, f);};
     ctor.prototype.off = function(type, f) {off(this, type, f);};
@@ -5264,29 +8173,53 @@ window.CodeMirror = (function() {
   // MISC UTILITIES
 
   // Number of pixels added to scroller and sizer to hide scrollbar
-  var scrollerCutOff = 30;
+  var scrollerGap = 30;
 
   // Returned or thrown by various protocols to signal 'I'm not
   // handling this'.
   var Pass = CodeMirror.Pass = {toString: function(){return "CodeMirror.Pass";}};
 
+  // Reused option objects for setSelection & friends
+  var sel_dontScroll = {scroll: false}, sel_mouse = {origin: "*mouse"}, sel_move = {origin: "+move"};
+
   function Delayed() {this.id = null;}
-  Delayed.prototype = {set: function(ms, f) {clearTimeout(this.id); this.id = setTimeout(f, ms);}};
+  Delayed.prototype.set = function(ms, f) {
+    clearTimeout(this.id);
+    this.id = setTimeout(f, ms);
+  };
 
   // Counts the column offset in a string, taking tabs into account.
   // Used mostly to find indentation.
-  function countColumn(string, end, tabSize, startIndex, startValue) {
+  var countColumn = CodeMirror.countColumn = function(string, end, tabSize, startIndex, startValue) {
     if (end == null) {
       end = string.search(/[^\s\u00a0]/);
       if (end == -1) end = string.length;
     }
-    for (var i = startIndex || 0, n = startValue || 0; i < end; ++i) {
-      if (string.charAt(i) == "\t") n += tabSize - (n % tabSize);
-      else ++n;
+    for (var i = startIndex || 0, n = startValue || 0;;) {
+      var nextTab = string.indexOf("\t", i);
+      if (nextTab < 0 || nextTab >= end)
+        return n + (end - i);
+      n += nextTab - i;
+      n += tabSize - (n % tabSize);
+      i = nextTab + 1;
+    }
+  };
+
+  // The inverse of countColumn -- find the offset that corresponds to
+  // a particular column.
+  function findColumn(string, goal, tabSize) {
+    for (var pos = 0, col = 0;;) {
+      var nextTab = string.indexOf("\t", pos);
+      if (nextTab == -1) nextTab = string.length;
+      var skipped = nextTab - pos;
+      if (nextTab == string.length || col + skipped >= goal)
+        return pos + Math.min(skipped, goal - col);
+      col += nextTab - pos;
+      col += tabSize - (col % tabSize);
+      pos = nextTab + 1;
+      if (col >= goal) return pos;
     }
-    return n;
   }
-  CodeMirror.countColumn = countColumn;
 
   var spaceStrs = [""];
   function spaceStr(n) {
@@ -5297,52 +8230,59 @@ window.CodeMirror = (function() {
 
   function lst(arr) { return arr[arr.length-1]; }
 
-  function selectInput(node) {
-    if (ios) { // Mobile Safari apparently has a bug where select() is broken.
-      node.selectionStart = 0;
-      node.selectionEnd = node.value.length;
-    } else {
-      // Suppress mysterious IE10 errors
-      try { node.select(); }
-      catch(_e) {}
-    }
-  }
+  var selectInput = function(node) { node.select(); };
+  if (ios) // Mobile Safari apparently has a bug where select() is broken.
+    selectInput = function(node) { node.selectionStart = 0; node.selectionEnd = node.value.length; };
+  else if (ie) // Suppress mysterious IE10 errors
+    selectInput = function(node) { try { node.select(); } catch(_e) {} };
 
-  function indexOf(collection, elt) {
-    if (collection.indexOf) return collection.indexOf(elt);
-    for (var i = 0, e = collection.length; i < e; ++i)
-      if (collection[i] == elt) return i;
+  function indexOf(array, elt) {
+    for (var i = 0; i < array.length; ++i)
+      if (array[i] == elt) return i;
     return -1;
   }
+  function map(array, f) {
+    var out = [];
+    for (var i = 0; i < array.length; i++) out[i] = f(array[i], i);
+    return out;
+  }
+
+  function nothing() {}
 
   function createObj(base, props) {
-    function Obj() {}
-    Obj.prototype = base;
-    var inst = new Obj();
+    var inst;
+    if (Object.create) {
+      inst = Object.create(base);
+    } else {
+      nothing.prototype = base;
+      inst = new nothing();
+    }
     if (props) copyObj(props, inst);
     return inst;
-  }
+  };
 
-  function copyObj(obj, target) {
+  function copyObj(obj, target, overwrite) {
     if (!target) target = {};
-    for (var prop in obj) if (obj.hasOwnProperty(prop)) target[prop] = obj[prop];
+    for (var prop in obj)
+      if (obj.hasOwnProperty(prop) && (overwrite !== false || !target.hasOwnProperty(prop)))
+        target[prop] = obj[prop];
     return target;
   }
 
-  function emptyArray(size) {
-    for (var a = [], i = 0; i < size; ++i) a.push(undefined);
-    return a;
-  }
-
   function bind(f) {
     var args = Array.prototype.slice.call(arguments, 1);
     return function(){return f.apply(null, args);};
   }
 
-  var nonASCIISingleCaseWordChar = /[\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;
-  function isWordChar(ch) {
+  var nonASCIISingleCaseWordChar = /[\u00df\u0587\u0590-\u05f4\u0600-\u06ff\u3040-\u309f\u30a0-\u30ff\u3400-\u4db5\u4e00-\u9fcc\uac00-\ud7af]/;
+  var isWordCharBasic = CodeMirror.isWordChar = function(ch) {
     return /\w/.test(ch) || ch > "\x80" &&
       (ch.toUpperCase() != ch.toLowerCase() || nonASCIISingleCaseWordChar.test(ch));
+  };
+  function isWordChar(ch, helper) {
+    if (!helper) return isWordCharBasic(ch);
+    if (helper.source.indexOf("\\w") > -1 && isWordCharBasic(ch)) return true;
+    return helper.test(ch);
   }
 
   function isEmpty(obj) {
@@ -5350,7 +8290,13 @@ window.CodeMirror = (function() {
     return true;
   }
 
-  var isExtendingChar = /[\u0300-\u036F\u0483-\u0487\u0488-\u0489\u0591-\u05BD\u05BF\u05C1-\u05C2\u05C4-\u05C5\u05C7\u0610-\u061A\u064B-\u065F\u0670\u06D6-\u06DC\u06DF-\u06E4\u06E7-\u06E8\u06EA-\u06ED\uA66F\uA670-\uA672\uA674-\uA67D\uA69F\udc00-\udfff]/;
+  // Extending unicode characters. A series of a non-extending char +
+  // any number of extending chars is treated as a single unit as far
+  // as editing and measuring is concerned. This is not fully correct,
+  // since some scripts/fonts/browsers also treat other configurations
+  // of code points as a group.
+  var extendingChars = /[\u0300-\u036f\u0483-\u0489\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7\u0610-\u061a\u064b-\u065e\u0670\u06d6-\u06dc\u06de-\u06e4\u06e7\u06e8\u06ea-\u06ed\u0711\u0730-\u074a\u07a6-\u07b0\u07eb-\u07f3\u0816-\u0819\u081b-\u0823\u0825-\u0827\u0829-\u082d\u0900-\u0902\u093c\u0941-\u0948\u094d\u0951-\u0955\u0962\u0963\u0981\u09bc\u09be\u09c1-\u09c4\u09cd\u09d7\u09e2\u09e3\u0a01\u0a02\u0a3c\u0a41\u0a42\u0a47\u0a48\u0a4b-\u0a4d\u0a51\u0a70\u0a71\u0a75\u0a81\u0a82\u0abc\u0ac1-\u0ac5\u0ac7\u0ac8\u0acd\u0ae2\u0ae3\u0b01\u0b3c\u0b3e\u0b3f\u0b41-\u0b44\u0b4d\u0b56\u0b57\u0b62\u0b63\u0b82\u0bbe\u0bc0\u0bcd\u0bd7\u0c3e-\u0c40\u0c46-\u0c48\u0c4a-\u0c4d\u0c55\u0c56\u0c62\u0c63\u0cbc\u0cbf\u0cc2\u0cc6\u0ccc\u0ccd\u0cd5\u0cd6\u0ce2\u0ce3\u0d3e\u0d41-\u0d44\u0d4d\u0d57\u0d62\u0d63\u0dca\u0dcf\u0dd2-\u0dd4\u0dd6\u0ddf\u0e31\u0e34-\u0e3a\u0e47-\u0e4e\u0eb1\u0eb4-\u0eb9\u0ebb\u0ebc\u0ec8-\u0ecd\u0f18\u0f19\u0f35\u0f37\u0f39\u0f71-\u0f7e\u0f80-\u0f84\u0f86\u0f87\u0f90-\u0f97\u0f99-\u0fbc\u0fc6\u102d-\u1030\u1032-\u1037\u1039\u103a\u103d\u103e\u1058\u1059\u105e-\u1060\u1071-\u1074\u1082\u1085\u1086\u108d\u109d\u135f\u1712-\u1714\u1732-\u1734\u1752\u1753\u1772\u1773\u17b7-\u17bd\u17c6\u17c9-\u17d3\u17dd\u180b-\u180d\u18a9\u1920-\u1922\u1927\u1928\u1932\u1939-\u193b\u1a17\u1a18\u1a56\u1a58-\u1a5e\u1a60\u1a62\u1a65-\u1a6c\u1a73-\u1a7c\u1a7f\u1b00-\u1b03\u1b34\u1b36-\u1b3a\u1b3c\u1b42\u1b6b-\u1b73\u1b80\u1b81\u1ba2-\u1ba5\u1ba8\u1ba9\u1c2c-\u1c33\u1c36\u1c37\u1cd0-\u1cd2\u1cd4-\u1ce0\u1ce2-\u1ce8\u1ced\u1dc0-\u1de6\u1dfd-\u1dff\u200c\u200d\u20d0-\u20f0\u2cef-\u2cf1\u2de0-\u2dff\u302a-\u302f\u3099\u309a\ua66f-\ua672\ua67c\ua67d\ua6f0\ua6f1\ua802\ua806\ua80b\ua825\ua826\ua8c4\ua8e0-\ua8f1\ua926-\ua92d\ua947-\ua951\ua980-\ua982\ua9b3\ua9b6-\ua9b9\ua9bc\uaa29-\uaa2e\uaa31\uaa32\uaa35\uaa36\uaa43\uaa4c\uaab0\uaab2-\uaab4\uaab7\uaab8\uaabe\uaabf\uaac1\uabe5\uabe8\uabed\udc00-\udfff\ufb1e\ufe00-\ufe0f\ufe20-\ufe26\uff9e\uff9f]/;
+  function isExtendingChar(ch) { return ch.charCodeAt(0) >= 768 && extendingChars.test(ch); }
 
   // DOM UTILITIES
 
@@ -5358,11 +8304,28 @@ window.CodeMirror = (function() {
     var e = document.createElement(tag);
     if (className) e.className = className;
     if (style) e.style.cssText = style;
-    if (typeof content == "string") setTextContent(e, content);
+    if (typeof content == "string") e.appendChild(document.createTextNode(content));
     else if (content) for (var i = 0; i < content.length; ++i) e.appendChild(content[i]);
     return e;
   }
 
+  var range;
+  if (document.createRange) range = function(node, start, end, endNode) {
+    var r = document.createRange();
+    r.setEnd(endNode || node, end);
+    r.setStart(node, start);
+    return r;
+  };
+  else range = function(node, start, end) {
+    var r = document.body.createTextRange();
+    try { r.moveToElementText(node.parentNode); }
+    catch(e) { return r; }
+    r.collapse(true);
+    r.moveEnd("character", end);
+    r.moveStart("character", start);
+    return r;
+  };
+
   function removeChildren(e) {
     for (var count = e.childNodes.length; count > 0; --count)
       e.removeChild(e.firstChild);
@@ -5373,17 +8336,85 @@ window.CodeMirror = (function() {
     return removeChildren(parent).appendChild(e);
   }
 
-  function setTextContent(e, str) {
-    if (ie_lt9) {
-      e.innerHTML = "";
-      e.appendChild(document.createTextNode(str));
-    } else e.textContent = str;
+  var contains = CodeMirror.contains = function(parent, child) {
+    if (child.nodeType == 3) // Android browser always returns false when child is a textnode
+      child = child.parentNode;
+    if (parent.contains)
+      return parent.contains(child);
+    do {
+      if (child.nodeType == 11) child = child.host;
+      if (child == parent) return true;
+    } while (child = child.parentNode);
+  };
+
+  function activeElt() {
+    var activeElement = document.activeElement;
+    while (activeElement && activeElement.root && activeElement.root.activeElement)
+      activeElement = activeElement.root.activeElement;
+    return activeElement;
+  }
+  // Older versions of IE throws unspecified error when touching
+  // document.activeElement in some cases (during loading, in iframe)
+  if (ie && ie_version < 11) activeElt = function() {
+    try { return document.activeElement; }
+    catch(e) { return document.body; }
+  };
+
+  function classTest(cls) { return new RegExp("(^|\\s)" + cls + "(?:$|\\s)\\s*"); }
+  var rmClass = CodeMirror.rmClass = function(node, cls) {
+    var current = node.className;
+    var match = classTest(cls).exec(current);
+    if (match) {
+      var after = current.slice(match.index + match[0].length);
+      node.className = current.slice(0, match.index) + (after ? match[1] + after : "");
+    }
+  };
+  var addClass = CodeMirror.addClass = function(node, cls) {
+    var current = node.className;
+    if (!classTest(cls).test(current)) node.className += (current ? " " : "") + cls;
+  };
+  function joinClasses(a, b) {
+    var as = a.split(" ");
+    for (var i = 0; i < as.length; i++)
+      if (as[i] && !classTest(as[i]).test(b)) b += " " + as[i];
+    return b;
   }
 
-  function getRect(node) {
-    return node.getBoundingClientRect();
+  // WINDOW-WIDE EVENTS
+
+  // These must be handled carefully, because naively registering a
+  // handler for each editor will cause the editors to never be
+  // garbage collected.
+
+  function forEachCodeMirror(f) {
+    if (!document.body.getElementsByClassName) return;
+    var byClass = document.body.getElementsByClassName("CodeMirror");
+    for (var i = 0; i < byClass.length; i++) {
+      var cm = byClass[i].CodeMirror;
+      if (cm) f(cm);
+    }
+  }
+
+  var globalsRegistered = false;
+  function ensureGlobalHandlers() {
+    if (globalsRegistered) return;
+    registerGlobalHandlers();
+    globalsRegistered = true;
+  }
+  function registerGlobalHandlers() {
+    // When the window resizes, we need to refresh active editors.
+    var resizeTimer;
+    on(window, "resize", function() {
+      if (resizeTimer == null) resizeTimer = setTimeout(function() {
+        resizeTimer = null;
+        forEachCodeMirror(onResize);
+      }, 100);
+    });
+    // When the window loses focus, we want to show the editor as blurred
+    on(window, "blur", function() {
+      forEachCodeMirror(onBlur);
+    });
   }
-  CodeMirror.replaceGetRect = function(f) { getRect = f; };
 
   // FEATURE DETECTION
 
@@ -5391,61 +8422,39 @@ window.CodeMirror = (function() {
   var dragAndDrop = function() {
     // There is *some* kind of drag-and-drop support in IE6-8, but I
     // couldn't get it to work yet.
-    if (ie_lt9) return false;
+    if (ie && ie_version < 9) return false;
     var div = elt('div');
     return "draggable" in div || "dragDrop" in div;
   }();
 
-  // For a reason I have yet to figure out, some browsers disallow
-  // word wrapping between certain characters *only* if a new inline
-  // element is started between them. This makes it hard to reliably
-  // measure the position of things, since that requires inserting an
-  // extra span. This terribly fragile set of tests matches the
-  // character combinations that suffer from this phenomenon on the
-  // various browsers.
-  function spanAffectsWrapping() { return false; }
-  if (gecko) // Only for "$'"
-    spanAffectsWrapping = function(str, i) {
-      return str.charCodeAt(i - 1) == 36 && str.charCodeAt(i) == 39;
-    };
-  else if (safari && !/Version\/([6-9]|\d\d)\b/.test(navigator.userAgent))
-    spanAffectsWrapping = function(str, i) {
-      return (/\-[^ \-?]|\?[^ !\'\"\),.\-\/:;\?\]\}]/).test(str.slice(i - 1, i + 1));
-    };
-  else if (webkit && !/Chrome\/(?:29|[3-9]\d|\d\d\d)\./.test(navigator.userAgent))
-    spanAffectsWrapping = function(str, i) {
-      if (i > 1 && str.charCodeAt(i - 1) == 45) {
-        if (/\w/.test(str.charAt(i - 2)) && /[^\-?\.]/.test(str.charAt(i))) return true;
-        if (i > 2 && /[\d\.,]/.test(str.charAt(i - 2)) && /[\d\.,]/.test(str.charAt(i))) return false;
-      }
-      return (/[~!#%&*)=+}\]|\"\.>,:;][({[<]|-[^\-?\.\u2010-\u201f\u2026]|\?[\w~`@#$%\^&*(_=+{[|><]|…[\w~`@#$%\^&*(_=+{[><]/).test(str.slice(i - 1, i + 1));
-    };
-
-  var knownScrollbarWidth;
-  function scrollbarWidth(measure) {
-    if (knownScrollbarWidth != null) return knownScrollbarWidth;
-    var test = elt("div", null, null, "width: 50px; height: 50px; overflow-x: scroll");
-    removeChildrenAndAdd(measure, test);
-    if (test.offsetWidth)
-      knownScrollbarWidth = test.offsetHeight - test.clientHeight;
-    return knownScrollbarWidth || 0;
-  }
-
   var zwspSupported;
   function zeroWidthElement(measure) {
     if (zwspSupported == null) {
       var test = elt("span", "\u200b");
       removeChildrenAndAdd(measure, elt("span", [test, document.createTextNode("x")]));
       if (measure.firstChild.offsetHeight != 0)
-        zwspSupported = test.offsetWidth <= 1 && test.offsetHeight > 2 && !ie_lt8;
+        zwspSupported = test.offsetWidth <= 1 && test.offsetHeight > 2 && !(ie && ie_version < 8);
     }
-    if (zwspSupported) return elt("span", "\u200b");
-    else return elt("span", "\u00a0", null, "display: inline-block; width: 1px; margin-right: -1px");
+    var node = zwspSupported ? elt("span", "\u200b") :
+      elt("span", "\u00a0", null, "display: inline-block; width: 1px; margin-right: -1px");
+    node.setAttribute("cm-text", "");
+    return node;
+  }
+
+  // Feature-detect IE's crummy client rect reporting for bidi text
+  var badBidiRects;
+  function hasBadBidiRects(measure) {
+    if (badBidiRects != null) return badBidiRects;
+    var txt = removeChildrenAndAdd(measure, document.createTextNode("A\u062eA"));
+    var r0 = range(txt, 0, 1).getBoundingClientRect();
+    if (!r0 || r0.left == r0.right) return false; // Safari returns null in some cases (#2780)
+    var r1 = range(txt, 1, 2).getBoundingClientRect();
+    return badBidiRects = (r1.right - r0.right < 3);
   }
 
   // See if "".split is the broken IE version, if so, provide an
   // alternative way to split lines.
-  var splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) {
+  var splitLinesAuto = CodeMirror.splitLines = "\n\nb".split(/\n/).length != 3 ? function(string) {
     var pos = 0, result = [], l = string.length;
     while (pos <= l) {
       var nl = string.indexOf("\n", pos);
@@ -5462,7 +8471,6 @@ window.CodeMirror = (function() {
     }
     return result;
   } : function(string){return string.split(/\r\n?|\n/);};
-  CodeMirror.splitLines = splitLines;
 
   var hasSelection = window.getSelection ? function(te) {
     try { return te.selectionStart != te.selectionEnd; }
@@ -5478,22 +8486,31 @@ window.CodeMirror = (function() {
     var e = elt("div");
     if ("oncopy" in e) return true;
     e.setAttribute("oncopy", "return;");
-    return typeof e.oncopy == 'function';
+    return typeof e.oncopy == "function";
   })();
 
-  // KEY NAMING
+  var badZoomedRects = null;
+  function hasBadZoomedRects(measure) {
+    if (badZoomedRects != null) return badZoomedRects;
+    var node = removeChildrenAndAdd(measure, elt("span", "x"));
+    var normal = node.getBoundingClientRect();
+    var fromRange = range(node, 0, 1).getBoundingClientRect();
+    return badZoomedRects = Math.abs(normal.left - fromRange.left) > 1;
+  }
+
+  // KEY NAMES
 
   var keyNames = {3: "Enter", 8: "Backspace", 9: "Tab", 13: "Enter", 16: "Shift", 17: "Ctrl", 18: "Alt",
                   19: "Pause", 20: "CapsLock", 27: "Esc", 32: "Space", 33: "PageUp", 34: "PageDown", 35: "End",
                   36: "Home", 37: "Left", 38: "Up", 39: "Right", 40: "Down", 44: "PrintScrn", 45: "Insert",
-                  46: "Delete", 59: ";", 91: "Mod", 92: "Mod", 93: "Mod", 109: "-", 107: "=", 127: "Delete",
-                  186: ";", 187: "=", 188: ",", 189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\",
-                  221: "]", 222: "'", 63276: "PageUp", 63277: "PageDown", 63275: "End", 63273: "Home",
-                  63234: "Left", 63232: "Up", 63235: "Right", 63233: "Down", 63302: "Insert", 63272: "Delete"};
+                  46: "Delete", 59: ";", 61: "=", 91: "Mod", 92: "Mod", 93: "Mod", 107: "=", 109: "-", 127: "Delete",
+                  173: "-", 186: ";", 187: "=", 188: ",", 189: "-", 190: ".", 191: "/", 192: "`", 219: "[", 220: "\\",
+                  221: "]", 222: "'", 63232: "Up", 63233: "Down", 63234: "Left", 63235: "Right", 63272: "Delete",
+                  63273: "Home", 63275: "End", 63276: "PageUp", 63277: "PageDown", 63302: "Insert"};
   CodeMirror.keyNames = keyNames;
   (function() {
     // Number keys
-    for (var i = 0; i < 10; i++) keyNames[i + 48] = String(i);
+    for (var i = 0; i < 10; i++) keyNames[i + 48] = keyNames[i + 96] = String(i);
     // Alphabetic keys
     for (var i = 65; i <= 90; i++) keyNames[i] = String.fromCharCode(i);
     // Function keys
@@ -5527,19 +8544,32 @@ window.CodeMirror = (function() {
 
   function lineStart(cm, lineN) {
     var line = getLine(cm.doc, lineN);
-    var visual = visualLine(cm.doc, line);
+    var visual = visualLine(line);
     if (visual != line) lineN = lineNo(visual);
     var order = getOrder(visual);
     var ch = !order ? 0 : order[0].level % 2 ? lineRight(visual) : lineLeft(visual);
     return Pos(lineN, ch);
   }
   function lineEnd(cm, lineN) {
-    var merged, line;
-    while (merged = collapsedSpanAtEnd(line = getLine(cm.doc, lineN)))
-      lineN = merged.find().to.line;
+    var merged, line = getLine(cm.doc, lineN);
+    while (merged = collapsedSpanAtEnd(line)) {
+      line = merged.find(1, true).line;
+      lineN = null;
+    }
     var order = getOrder(line);
     var ch = !order ? line.text.length : order[0].level % 2 ? lineLeft(line) : lineRight(line);
-    return Pos(lineN, ch);
+    return Pos(lineN == null ? lineNo(line) : lineN, ch);
+  }
+  function lineStartSmart(cm, pos) {
+    var start = lineStart(cm, pos.line);
+    var line = getLine(cm.doc, start.line);
+    var order = getOrder(line);
+    if (!order || order[0].level == 0) {
+      var firstNonWS = Math.max(0, line.text.search(/\S/));
+      var inWS = pos.line == start.line && pos.ch <= firstNonWS && pos.ch;
+      return Pos(start.line, inWS ? 0 : firstNonWS);
+    }
+    return start;
   }
 
   function compareBidiLevel(order, a, b) {
@@ -5550,38 +8580,37 @@ window.CodeMirror = (function() {
   }
   var bidiOther;
   function getBidiPartAt(order, pos) {
+    bidiOther = null;
     for (var i = 0, found; i < order.length; ++i) {
       var cur = order[i];
-      if (cur.from < pos && cur.to > pos) { bidiOther = null; return i; }
-      if (cur.from == pos || cur.to == pos) {
+      if (cur.from < pos && cur.to > pos) return i;
+      if ((cur.from == pos || cur.to == pos)) {
         if (found == null) {
           found = i;
         } else if (compareBidiLevel(order, cur.level, order[found].level)) {
-          bidiOther = found;
+          if (cur.from != cur.to) bidiOther = found;
           return i;
         } else {
-          bidiOther = i;
+          if (cur.from != cur.to) bidiOther = i;
           return found;
         }
       }
     }
-    bidiOther = null;
     return found;
   }
 
   function moveInLine(line, pos, dir, byUnit) {
     if (!byUnit) return pos + dir;
     do pos += dir;
-    while (pos > 0 && isExtendingChar.test(line.text.charAt(pos)));
+    while (pos > 0 && isExtendingChar(line.text.charAt(pos)));
     return pos;
   }
 
-  // This is somewhat involved. It is needed in order to move
-  // 'visually' through bi-directional text -- i.e., pressing left
-  // should make the cursor go left, even when in RTL text. The
-  // tricky part is the 'jumps', where RTL and LTR text touch each
-  // other. This often requires the cursor offset to move more than
-  // one unit, in order to visually move one unit.
+  // This is needed in order to move 'visually' through bi-directional
+  // text -- i.e., pressing left should make the cursor go left, even
+  // when in RTL text. The tricky part is the 'jumps', where RTL and
+  // LTR text touch each other. This often requires the cursor offset
+  // to move more than one unit, in order to visually move one unit.
   function moveVisually(line, start, dir, byUnit) {
     var bidi = getOrder(line);
     if (!bidi) return moveLogically(line, start, dir, byUnit);
@@ -5607,7 +8636,7 @@ window.CodeMirror = (function() {
 
   function moveLogically(line, start, dir, byUnit) {
     var target = start + dir;
-    if (byUnit) while (target > 0 && isExtendingChar.test(line.text.charAt(target))) target += dir;
+    if (byUnit) while (target > 0 && isExtendingChar(line.text.charAt(target))) target += dir;
     return target < 0 || target > line.text.length ? null : target;
   }
 
@@ -5636,14 +8665,16 @@ window.CodeMirror = (function() {
   // objects) in the order in which they occur visually.
   var bidiOrdering = (function() {
     // Character types for codepoints 0 to 0xff
-    var lowTypes = "bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLL";
+    var lowTypes = "bbbbbbbbbtstwsbbbbbbbbbbbbbbssstwNN%%%NNNNNN,N,N1111111111NNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNNNLLLLLLLLLLLLLLLLLLLLLLLLLLNNNNbbbbbbsbbbbbbbbbbbbbbbbbbbbbbbbbb,N%%%%NNNNLNNNNN%%11NLNNN1LNNNNNLLLLLLLLLLLLLLLLLLLLLLLNLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLN";
     // Character types for codepoints 0x600 to 0x6ff
-    var arabicTypes = "rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmmrrrrrrrrrrrrrrrrrr";
+    var arabicTypes = "rrrrrrrrrrrr,rNNmmmmmmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmrrrrrrrnnnnnnnnnn%nnrrrmrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrmmmmmmmmmmmmmmmmmmmNmmmm";
     function charType(code) {
-      if (code <= 0xff) return lowTypes.charAt(code);
+      if (code <= 0xf7) return lowTypes.charAt(code);
       else if (0x590 <= code && code <= 0x5f4) return "R";
-      else if (0x600 <= code && code <= 0x6ff) return arabicTypes.charAt(code - 0x600);
-      else if (0x700 <= code && code <= 0x8ac) return "r";
+      else if (0x600 <= code && code <= 0x6ed) return arabicTypes.charAt(code - 0x600);
+      else if (0x6ee <= code && code <= 0x8ac) return "r";
+      else if (0x2000 <= code && code <= 0x200b) return "w";
+      else if (code == 0x200c) return "b";
       else return "L";
     }
 
@@ -5652,6 +8683,11 @@ window.CodeMirror = (function() {
     // Browsers seem to always treat the boundaries of block elements as being L.
     var outerType = "L";
 
+    function BidiSpan(level, from, to) {
+      this.level = level;
+      this.from = from; this.to = to;
+    }
+
     return function(str) {
       if (!bidiRE.test(str)) return false;
       var len = str.length, types = [];
@@ -5699,7 +8735,7 @@ window.CodeMirror = (function() {
         if (type == ",") types[i] = "N";
         else if (type == "%") {
           for (var end = i + 1; end < len && types[end] == "%"; ++end) {}
-          var replace = (i && types[i-1] == "!") || (end < len - 1 && types[end] == "1") ? "1" : "N";
+          var replace = (i && types[i-1] == "!") || (end < len && types[end] == "1") ? "1" : "N";
           for (var j = i; j < end; ++j) types[j] = replace;
           i = end - 1;
         }
@@ -5724,7 +8760,7 @@ window.CodeMirror = (function() {
         if (isNeutral.test(types[i])) {
           for (var end = i + 1; end < len && isNeutral.test(types[end]); ++end) {}
           var before = (i ? types[i-1] : outerType) == "L";
-          var after = (end < len - 1 ? types[end] : outerType) == "L";
+          var after = (end < len ? types[end] : outerType) == "L";
           var replace = before || after ? "L" : "R";
           for (var j = i; j < end; ++j) types[j] = replace;
           i = end - 1;
@@ -5741,32 +8777,34 @@ window.CodeMirror = (function() {
         if (countsAsLeft.test(types[i])) {
           var start = i;
           for (++i; i < len && countsAsLeft.test(types[i]); ++i) {}
-          order.push({from: start, to: i, level: 0});
+          order.push(new BidiSpan(0, start, i));
         } else {
           var pos = i, at = order.length;
           for (++i; i < len && types[i] != "L"; ++i) {}
           for (var j = pos; j < i;) {
             if (countsAsNum.test(types[j])) {
-              if (pos < j) order.splice(at, 0, {from: pos, to: j, level: 1});
+              if (pos < j) order.splice(at, 0, new BidiSpan(1, pos, j));
               var nstart = j;
               for (++j; j < i && countsAsNum.test(types[j]); ++j) {}
-              order.splice(at, 0, {from: nstart, to: j, level: 2});
+              order.splice(at, 0, new BidiSpan(2, nstart, j));
               pos = j;
             } else ++j;
           }
-          if (pos < i) order.splice(at, 0, {from: pos, to: i, level: 1});
+          if (pos < i) order.splice(at, 0, new BidiSpan(1, pos, i));
         }
       }
       if (order[0].level == 1 && (m = str.match(/^\s+/))) {
         order[0].from = m[0].length;
-        order.unshift({from: 0, to: m[0].length, level: 0});
+        order.unshift(new BidiSpan(0, 0, m[0].length));
       }
       if (lst(order).level == 1 && (m = str.match(/\s+$/))) {
         lst(order).to -= m[0].length;
-        order.push({from: len - m[0].length, to: len, level: 0});
+        order.push(new BidiSpan(0, len - m[0].length, len));
       }
+      if (order[0].level == 2)
+        order.unshift(new BidiSpan(1, order[0].to, order[0].to));
       if (order[0].level != lst(order).level)
-        order.push({from: len, to: len, level: order[0].level});
+        order.push(new BidiSpan(order[0].level, len, len));
 
       return order;
     };
@@ -5774,7 +8812,7 @@ window.CodeMirror = (function() {
 
   // THE END
 
-  CodeMirror.version = "3.14.1";
+  CodeMirror.version = "5.5.1";
 
   return CodeMirror;
-})();
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
index 4f54b0c69..da0eb2d51 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/coffeescript.js
@@ -1,348 +1,369 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
 /**
  * Link to the project's GitHub page:
  * https://github.com/pickhardt/coffeescript-codemirror-mode
  */
-CodeMirror.defineMode('coffeescript', function(conf) {
-    var ERRORCLASS = 'error';
-
-    function wordRegexp(words) {
-        return new RegExp("^((" + words.join(")|(") + "))\\b");
-    }
-
-    var singleOperators = new RegExp("^[\\+\\-\\*/%&|\\^~<>!\?]");
-    var singleDelimiters = new RegExp('^[\\(\\)\\[\\]\\{\\},:`=;\\.]');
-    var doubleOperators = new RegExp("^((\->)|(\=>)|(\\+\\+)|(\\+\\=)|(\\-\\-)|(\\-\\=)|(\\*\\*)|(\\*\\=)|(\\/\\/)|(\\/\\=)|(==)|(!=)|(<=)|(>=)|(<>)|(<<)|(>>)|(//))");
-    var doubleDelimiters = new RegExp("^((\\.\\.)|(\\+=)|(\\-=)|(\\*=)|(%=)|(/=)|(&=)|(\\|=)|(\\^=))");
-    var tripleDelimiters = new RegExp("^((\\.\\.\\.)|(//=)|(>>=)|(<<=)|(\\*\\*=))");
-    var identifiers = new RegExp("^[_A-Za-z$][_A-Za-z$0-9]*");
-    var properties = new RegExp("^(@|this\.)[_A-Za-z$][_A-Za-z$0-9]*");
-
-    var wordOperators = wordRegexp(['and', 'or', 'not',
-                                    'is', 'isnt', 'in',
-                                    'instanceof', 'typeof']);
-    var indentKeywords = ['for', 'while', 'loop', 'if', 'unless', 'else',
-                          'switch', 'try', 'catch', 'finally', 'class'];
-    var commonKeywords = ['break', 'by', 'continue', 'debugger', 'delete',
-                          'do', 'in', 'of', 'new', 'return', 'then',
-                          'this', 'throw', 'when', 'until'];
-
-    var keywords = wordRegexp(indentKeywords.concat(commonKeywords));
-
-    indentKeywords = wordRegexp(indentKeywords);
-
-
-    var stringPrefixes = new RegExp("^('{3}|\"{3}|['\"])");
-    var regexPrefixes = new RegExp("^(/{3}|/)");
-    var commonConstants = ['Infinity', 'NaN', 'undefined', 'null', 'true', 'false', 'on', 'off', 'yes', 'no'];
-    var constants = wordRegexp(commonConstants);
-
-    // Tokenizers
-    function tokenBase(stream, state) {
-        // Handle scope changes
-        if (stream.sol()) {
-            var scopeOffset = state.scopes[0].offset;
-            if (stream.eatSpace()) {
-                var lineOffset = stream.indentation();
-                if (lineOffset > scopeOffset) {
-                    return 'indent';
-                } else if (lineOffset < scopeOffset) {
-                    return 'dedent';
-                }
-                return null;
-            } else {
-                if (scopeOffset > 0) {
-                    dedent(stream, state);
-                }
-            }
-        }
-        if (stream.eatSpace()) {
-            return null;
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
+CodeMirror.defineMode("coffeescript", function(conf, parserConf) {
+  var ERRORCLASS = "error";
+
+  function wordRegexp(words) {
+    return new RegExp("^((" + words.join(")|(") + "))\\b");
+  }
+
+  var operators = /^(?:->|=>|\+[+=]?|-[\-=]?|\*[\*=]?|\/[\/=]?|[=!]=|<[><]?=?|>>?=?|%=?|&=?|\|=?|\^=?|\~|!|\?|(or|and|\|\||&&|\?)=)/;
+  var delimiters = /^(?:[()\[\]{},:`=;]|\.\.?\.?)/;
+  var identifiers = /^[_A-Za-z$][_A-Za-z$0-9]*/;
+  var properties = /^(@|this\.)[_A-Za-z$][_A-Za-z$0-9]*/;
+
+  var wordOperators = wordRegexp(["and", "or", "not",
+                                  "is", "isnt", "in",
+                                  "instanceof", "typeof"]);
+  var indentKeywords = ["for", "while", "loop", "if", "unless", "else",
+                        "switch", "try", "catch", "finally", "class"];
+  var commonKeywords = ["break", "by", "continue", "debugger", "delete",
+                        "do", "in", "of", "new", "return", "then",
+                        "this", "@", "throw", "when", "until", "extends"];
+
+  var keywords = wordRegexp(indentKeywords.concat(commonKeywords));
+
+  indentKeywords = wordRegexp(indentKeywords);
+
+
+  var stringPrefixes = /^('{3}|\"{3}|['\"])/;
+  var regexPrefixes = /^(\/{3}|\/)/;
+  var commonConstants = ["Infinity", "NaN", "undefined", "null", "true", "false", "on", "off", "yes", "no"];
+  var constants = wordRegexp(commonConstants);
+
+  // Tokenizers
+  function tokenBase(stream, state) {
+    // Handle scope changes
+    if (stream.sol()) {
+      if (state.scope.align === null) state.scope.align = false;
+      var scopeOffset = state.scope.offset;
+      if (stream.eatSpace()) {
+        var lineOffset = stream.indentation();
+        if (lineOffset > scopeOffset && state.scope.type == "coffee") {
+          return "indent";
+        } else if (lineOffset < scopeOffset) {
+          return "dedent";
         }
-
-        var ch = stream.peek();
-
-        // Handle docco title comment (single line)
-        if (stream.match("####")) {
-            stream.skipToEnd();
-            return 'comment';
-        }
-
-        // Handle multi line comments
-        if (stream.match("###")) {
-            state.tokenize = longComment;
-            return state.tokenize(stream, state);
+        return null;
+      } else {
+        if (scopeOffset > 0) {
+          dedent(stream, state);
         }
+      }
+    }
+    if (stream.eatSpace()) {
+      return null;
+    }
 
-        // Single line comment
-        if (ch === '#') {
-            stream.skipToEnd();
-            return 'comment';
-        }
+    var ch = stream.peek();
 
-        // Handle number literals
-        if (stream.match(/^-?[0-9\.]/, false)) {
-            var floatLiteral = false;
-            // Floats
-            if (stream.match(/^-?\d*\.\d+(e[\+\-]?\d+)?/i)) {
-              floatLiteral = true;
-            }
-            if (stream.match(/^-?\d+\.\d*/)) {
-              floatLiteral = true;
-            }
-            if (stream.match(/^-?\.\d+/)) {
-              floatLiteral = true;
-            }
-
-            if (floatLiteral) {
-                // prevent from getting extra . on 1..
-                if (stream.peek() == "."){
-                    stream.backUp(1);
-                }
-                return 'number';
-            }
-            // Integers
-            var intLiteral = false;
-            // Hex
-            if (stream.match(/^-?0x[0-9a-f]+/i)) {
-              intLiteral = true;
-            }
-            // Decimal
-            if (stream.match(/^-?[1-9]\d*(e[\+\-]?\d+)?/)) {
-                intLiteral = true;
-            }
-            // Zero by itself with no other piece of number.
-            if (stream.match(/^-?0(?![\dx])/i)) {
-              intLiteral = true;
-            }
-            if (intLiteral) {
-                return 'number';
-            }
-        }
+    // Handle docco title comment (single line)
+    if (stream.match("####")) {
+      stream.skipToEnd();
+      return "comment";
+    }
 
-        // Handle strings
-        if (stream.match(stringPrefixes)) {
-            state.tokenize = tokenFactory(stream.current(), 'string');
-            return state.tokenize(stream, state);
-        }
-        // Handle regex literals
-        if (stream.match(regexPrefixes)) {
-            if (stream.current() != '/' || stream.match(/^.*\//, false)) { // prevent highlight of division
-                state.tokenize = tokenFactory(stream.current(), 'string-2');
-                return state.tokenize(stream, state);
-            } else {
-                stream.backUp(1);
-            }
-        }
+    // Handle multi line comments
+    if (stream.match("###")) {
+      state.tokenize = longComment;
+      return state.tokenize(stream, state);
+    }
 
-        // Handle operators and delimiters
-        if (stream.match(tripleDelimiters) || stream.match(doubleDelimiters)) {
-            return 'punctuation';
-        }
-        if (stream.match(doubleOperators)
-            || stream.match(singleOperators)
-            || stream.match(wordOperators)) {
-            return 'operator';
-        }
-        if (stream.match(singleDelimiters)) {
-            return 'punctuation';
-        }
+    // Single line comment
+    if (ch === "#") {
+      stream.skipToEnd();
+      return "comment";
+    }
 
-        if (stream.match(constants)) {
-            return 'atom';
+    // Handle number literals
+    if (stream.match(/^-?[0-9\.]/, false)) {
+      var floatLiteral = false;
+      // Floats
+      if (stream.match(/^-?\d*\.\d+(e[\+\-]?\d+)?/i)) {
+        floatLiteral = true;
+      }
+      if (stream.match(/^-?\d+\.\d*/)) {
+        floatLiteral = true;
+      }
+      if (stream.match(/^-?\.\d+/)) {
+        floatLiteral = true;
+      }
+
+      if (floatLiteral) {
+        // prevent from getting extra . on 1..
+        if (stream.peek() == "."){
+          stream.backUp(1);
         }
+        return "number";
+      }
+      // Integers
+      var intLiteral = false;
+      // Hex
+      if (stream.match(/^-?0x[0-9a-f]+/i)) {
+        intLiteral = true;
+      }
+      // Decimal
+      if (stream.match(/^-?[1-9]\d*(e[\+\-]?\d+)?/)) {
+        intLiteral = true;
+      }
+      // Zero by itself with no other piece of number.
+      if (stream.match(/^-?0(?![\dx])/i)) {
+        intLiteral = true;
+      }
+      if (intLiteral) {
+        return "number";
+      }
+    }
 
-        if (stream.match(keywords)) {
-            return 'keyword';
-        }
+    // Handle strings
+    if (stream.match(stringPrefixes)) {
+      state.tokenize = tokenFactory(stream.current(), false, "string");
+      return state.tokenize(stream, state);
+    }
+    // Handle regex literals
+    if (stream.match(regexPrefixes)) {
+      if (stream.current() != "/" || stream.match(/^.*\//, false)) { // prevent highlight of division
+        state.tokenize = tokenFactory(stream.current(), true, "string-2");
+        return state.tokenize(stream, state);
+      } else {
+        stream.backUp(1);
+      }
+    }
 
-        if (stream.match(identifiers)) {
-            return 'variable';
-        }
+    // Handle operators and delimiters
+    if (stream.match(operators) || stream.match(wordOperators)) {
+      return "operator";
+    }
+    if (stream.match(delimiters)) {
+      return "punctuation";
+    }
 
-        if (stream.match(properties)) {
-            return 'property';
-        }
+    if (stream.match(constants)) {
+      return "atom";
+    }
 
-        // Handle non-detected items
-        stream.next();
-        return ERRORCLASS;
+    if (stream.match(keywords)) {
+      return "keyword";
     }
 
-    function tokenFactory(delimiter, outclass) {
-        var singleline = delimiter.length == 1;
-        return function(stream, state) {
-            while (!stream.eol()) {
-                stream.eatWhile(/[^'"\/\\]/);
-                if (stream.eat('\\')) {
-                    stream.next();
-                    if (singleline && stream.eol()) {
-                        return outclass;
-                    }
-                } else if (stream.match(delimiter)) {
-                    state.tokenize = tokenBase;
-                    return outclass;
-                } else {
-                    stream.eat(/['"\/]/);
-                }
-            }
-            if (singleline) {
-                if (conf.mode.singleLineStringErrors) {
-                    outclass = ERRORCLASS;
-                } else {
-                    state.tokenize = tokenBase;
-                }
-            }
-            return outclass;
-        };
+    if (stream.match(identifiers)) {
+      return "variable";
     }
 
-    function longComment(stream, state) {
-        while (!stream.eol()) {
-            stream.eatWhile(/[^#]/);
-            if (stream.match("###")) {
-                state.tokenize = tokenBase;
-                break;
-            }
-            stream.eatWhile("#");
-        }
-        return "comment";
+    if (stream.match(properties)) {
+      return "property";
     }
 
-    function indent(stream, state, type) {
-        type = type || 'coffee';
-        var indentUnit = 0;
-        if (type === 'coffee') {
-            for (var i = 0; i < state.scopes.length; i++) {
-                if (state.scopes[i].type === 'coffee') {
-                    indentUnit = state.scopes[i].offset + conf.indentUnit;
-                    break;
-                }
-            }
+    // Handle non-detected items
+    stream.next();
+    return ERRORCLASS;
+  }
+
+  function tokenFactory(delimiter, singleline, outclass) {
+    return function(stream, state) {
+      while (!stream.eol()) {
+        stream.eatWhile(/[^'"\/\\]/);
+        if (stream.eat("\\")) {
+          stream.next();
+          if (singleline && stream.eol()) {
+            return outclass;
+          }
+        } else if (stream.match(delimiter)) {
+          state.tokenize = tokenBase;
+          return outclass;
         } else {
-            indentUnit = stream.column() + stream.current().length;
+          stream.eat(/['"\/]/);
         }
-        state.scopes.unshift({
-            offset: indentUnit,
-            type: type
-        });
-    }
-
-    function dedent(stream, state) {
-        if (state.scopes.length == 1) return;
-        if (state.scopes[0].type === 'coffee') {
-            var _indent = stream.indentation();
-            var _indent_index = -1;
-            for (var i = 0; i < state.scopes.length; ++i) {
-                if (_indent === state.scopes[i].offset) {
-                    _indent_index = i;
-                    break;
-                }
-            }
-            if (_indent_index === -1) {
-                return true;
-            }
-            while (state.scopes[0].offset !== _indent) {
-                state.scopes.shift();
-            }
-            return false;
+      }
+      if (singleline) {
+        if (parserConf.singleLineStringErrors) {
+          outclass = ERRORCLASS;
         } else {
-            state.scopes.shift();
-            return false;
+          state.tokenize = tokenBase;
         }
+      }
+      return outclass;
+    };
+  }
+
+  function longComment(stream, state) {
+    while (!stream.eol()) {
+      stream.eatWhile(/[^#]/);
+      if (stream.match("###")) {
+        state.tokenize = tokenBase;
+        break;
+      }
+      stream.eatWhile("#");
     }
-
-    function tokenLexer(stream, state) {
-        var style = state.tokenize(stream, state);
-        var current = stream.current();
-
-        // Handle '.' connected identifiers
-        if (current === '.') {
-            style = state.tokenize(stream, state);
-            current = stream.current();
-            if (style === 'variable') {
-                return 'variable';
-            } else {
-                return ERRORCLASS;
-            }
-        }
-
-        // Handle scope changes.
-        if (current === 'return') {
-            state.dedent += 1;
-        }
-        if (((current === '->' || current === '=>') &&
-                  !state.lambda &&
-                  state.scopes[0].type == 'coffee' &&
-                  stream.peek() === '')
-               || style === 'indent') {
-            indent(stream, state);
-        }
-        var delimiter_index = '[({'.indexOf(current);
-        if (delimiter_index !== -1) {
-            indent(stream, state, '])}'.slice(delimiter_index, delimiter_index+1));
-        }
-        if (indentKeywords.exec(current)){
-            indent(stream, state);
-        }
-        if (current == 'then'){
-            dedent(stream, state);
-        }
-
-
-        if (style === 'dedent') {
-            if (dedent(stream, state)) {
-                return ERRORCLASS;
-            }
-        }
-        delimiter_index = '])}'.indexOf(current);
-        if (delimiter_index !== -1) {
-            if (dedent(stream, state)) {
-                return ERRORCLASS;
-            }
-        }
-        if (state.dedent > 0 && stream.eol() && state.scopes[0].type == 'coffee') {
-            if (state.scopes.length > 1) state.scopes.shift();
-            state.dedent -= 1;
+    return "comment";
+  }
+
+  function indent(stream, state, type) {
+    type = type || "coffee";
+    var offset = 0, align = false, alignOffset = null;
+    for (var scope = state.scope; scope; scope = scope.prev) {
+      if (scope.type === "coffee" || scope.type == "}") {
+        offset = scope.offset + conf.indentUnit;
+        break;
+      }
+    }
+    if (type !== "coffee") {
+      align = null;
+      alignOffset = stream.column() + stream.current().length;
+    } else if (state.scope.align) {
+      state.scope.align = false;
+    }
+    state.scope = {
+      offset: offset,
+      type: type,
+      prev: state.scope,
+      align: align,
+      alignOffset: alignOffset
+    };
+  }
+
+  function dedent(stream, state) {
+    if (!state.scope.prev) return;
+    if (state.scope.type === "coffee") {
+      var _indent = stream.indentation();
+      var matched = false;
+      for (var scope = state.scope; scope; scope = scope.prev) {
+        if (_indent === scope.offset) {
+          matched = true;
+          break;
         }
-
-        return style;
+      }
+      if (!matched) {
+        return true;
+      }
+      while (state.scope.prev && state.scope.offset !== _indent) {
+        state.scope = state.scope.prev;
+      }
+      return false;
+    } else {
+      state.scope = state.scope.prev;
+      return false;
+    }
+  }
+
+  function tokenLexer(stream, state) {
+    var style = state.tokenize(stream, state);
+    var current = stream.current();
+
+    // Handle "." connected identifiers
+    if (current === ".") {
+      style = state.tokenize(stream, state);
+      current = stream.current();
+      if (/^\.[\w$]+$/.test(current)) {
+        return "variable";
+      } else {
+        return ERRORCLASS;
+      }
     }
 
-    var external = {
-        startState: function(basecolumn) {
-            return {
-              tokenize: tokenBase,
-              scopes: [{offset:basecolumn || 0, type:'coffee'}],
-              lastToken: null,
-              lambda: false,
-              dedent: 0
-          };
-        },
-
-        token: function(stream, state) {
-            var style = tokenLexer(stream, state);
-
-            state.lastToken = {style:style, content: stream.current()};
+    // Handle scope changes.
+    if (current === "return") {
+      state.dedent = true;
+    }
+    if (((current === "->" || current === "=>") &&
+         !state.lambda &&
+         !stream.peek())
+        || style === "indent") {
+      indent(stream, state);
+    }
+    var delimiter_index = "[({".indexOf(current);
+    if (delimiter_index !== -1) {
+      indent(stream, state, "])}".slice(delimiter_index, delimiter_index+1));
+    }
+    if (indentKeywords.exec(current)){
+      indent(stream, state);
+    }
+    if (current == "then"){
+      dedent(stream, state);
+    }
 
-            if (stream.eol() && stream.lambda) {
-                state.lambda = false;
-            }
 
-            return style;
-        },
+    if (style === "dedent") {
+      if (dedent(stream, state)) {
+        return ERRORCLASS;
+      }
+    }
+    delimiter_index = "])}".indexOf(current);
+    if (delimiter_index !== -1) {
+      while (state.scope.type == "coffee" && state.scope.prev)
+        state.scope = state.scope.prev;
+      if (state.scope.type == current)
+        state.scope = state.scope.prev;
+    }
+    if (state.dedent && stream.eol()) {
+      if (state.scope.type == "coffee" && state.scope.prev)
+        state.scope = state.scope.prev;
+      state.dedent = false;
+    }
 
-        indent: function(state) {
-            if (state.tokenize != tokenBase) {
-                return 0;
-            }
+    return style;
+  }
+
+  var external = {
+    startState: function(basecolumn) {
+      return {
+        tokenize: tokenBase,
+        scope: {offset:basecolumn || 0, type:"coffee", prev: null, align: false},
+        lastToken: null,
+        lambda: false,
+        dedent: 0
+      };
+    },
+
+    token: function(stream, state) {
+      var fillAlign = state.scope.align === null && state.scope;
+      if (fillAlign && stream.sol()) fillAlign.align = false;
+
+      var style = tokenLexer(stream, state);
+      if (fillAlign && style && style != "comment") fillAlign.align = true;
+
+      state.lastToken = {style:style, content: stream.current()};
+
+      if (stream.eol() && stream.lambda) {
+        state.lambda = false;
+      }
+
+      return style;
+    },
+
+    indent: function(state, text) {
+      if (state.tokenize != tokenBase) return 0;
+      var scope = state.scope;
+      var closer = text && "])}".indexOf(text.charAt(0)) > -1;
+      if (closer) while (scope.type == "coffee" && scope.prev) scope = scope.prev;
+      var closes = closer && scope.type === text.charAt(0);
+      if (scope.align)
+        return scope.alignOffset - (closes ? 1 : 0);
+      else
+        return (closes ? scope.prev : scope).offset;
+    },
+
+    lineComment: "#",
+    fold: "indent"
+  };
+  return external;
+});
 
-            return state.scopes[0].offset;
-        },
+CodeMirror.defineMIME("text/x-coffeescript", "coffeescript");
 
-        lineComment: "#",
-        fold: "indent"
-    };
-    return external;
 });
-
-CodeMirror.defineMIME('text/x-coffeescript', 'coffeescript');
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js
index cd2123e17..2dd114d33 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/comment.js
@@ -1,4 +1,14 @@
-(function() {
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
   "use strict";
 
   var noOptions = {};
@@ -11,8 +21,21 @@
   }
 
   CodeMirror.commands.toggleComment = function(cm) {
-    var from = cm.getCursor("start"), to = cm.getCursor("end");
-    cm.uncomment(from, to) || cm.lineComment(from, to);
+    var minLine = Infinity, ranges = cm.listSelections(), mode = null;
+    for (var i = ranges.length - 1; i >= 0; i--) {
+      var from = ranges[i].from(), to = ranges[i].to();
+      if (from.line >= minLine) continue;
+      if (to.line >= minLine) to = Pos(minLine, 0);
+      minLine = from.line;
+      if (mode == null) {
+        if (cm.uncomment(from, to)) mode = "un";
+        else { cm.lineComment(from, to); mode = "line"; }
+      } else if (mode == "un") {
+        cm.uncomment(from, to);
+      } else {
+        cm.lineComment(from, to);
+      }
+    }
   };
 
   CodeMirror.defineExtension("lineComment", function(from, to, options) {
@@ -86,7 +109,7 @@
   CodeMirror.defineExtension("uncomment", function(from, to, options) {
     if (!options) options = noOptions;
     var self = this, mode = self.getModeAt(from);
-    var end = Math.min(to.line, self.lastLine()), start = Math.min(from.line, end);
+    var end = Math.min(to.ch != 0 || to.line == from.line ? to.line : to.line - 1, self.lastLine()), start = Math.min(from.line, end);
 
     // Try finding line comments
     var lineString = options.lineComment || mode.lineComment, lines = [];
@@ -96,8 +119,9 @@
       for (var i = start; i <= end; ++i) {
         var line = self.getLine(i);
         var found = line.indexOf(lineString);
+        if (found > -1 && !/comment/.test(self.getTokenTypeAt(Pos(i, found + 1)))) found = -1;
         if (found == -1 && (i != end || i == start) && nonWS.test(line)) break lineComment;
-        if (i != start && found > -1 && nonWS.test(line.slice(0, found))) break lineComment;
+        if (found > -1 && nonWS.test(line.slice(0, found))) break lineComment;
         lines.push(line);
       }
       self.operation(function() {
@@ -124,7 +148,21 @@
       endLine = self.getLine(--end);
       close = endLine.lastIndexOf(endString);
     }
-    if (open == -1 || close == -1) return false;
+    if (open == -1 || close == -1 ||
+        !/comment/.test(self.getTokenTypeAt(Pos(start, open + 1))) ||
+        !/comment/.test(self.getTokenTypeAt(Pos(end, close + 1))))
+      return false;
+
+    // Avoid killing block comments completely outside the selection.
+    // Positions of the last startString before the start of the selection, and the first endString after it.
+    var lastStart = startLine.lastIndexOf(startString, from.ch);
+    var firstEnd = lastStart == -1 ? -1 : startLine.slice(0, from.ch).indexOf(endString, lastStart + startString.length);
+    if (lastStart != -1 && firstEnd != -1 && firstEnd + endString.length != from.ch) return false;
+    // Positions of the first endString after the end of the selection, and the last startString before it.
+    firstEnd = endLine.indexOf(endString, to.ch);
+    var almostLastStart = endLine.slice(to.ch).lastIndexOf(startString, firstEnd - to.ch);
+    lastStart = (firstEnd == -1 || almostLastStart == -1) ? -1 : to.ch + almostLastStart;
+    if (firstEnd != -1 && lastStart != -1 && lastStart != to.ch) return false;
 
     self.operation(function() {
       self.replaceRange("", Pos(end, close - (pad && endLine.slice(close - pad.length, close) == pad ? pad.length : 0)),
@@ -142,4 +180,4 @@
     });
     return true;
   });
-})();
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
index b52e787a7..f67cd2161 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js
@@ -1,290 +1,377 @@
-CodeMirror.defineMode("css", function(config) {
-  return CodeMirror.getMode(config, "text/css");
-});
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
 
-CodeMirror.defineMode("css-base", function(config, parserConfig) {
-  "use strict";
+CodeMirror.defineMode("css", function(config, parserConfig) {
+  var provided = parserConfig;
+  if (!parserConfig.propertyKeywords) parserConfig = CodeMirror.resolveMode("text/css");
+  parserConfig.inline = provided.inline;
 
   var indentUnit = config.indentUnit,
-      hooks = parserConfig.hooks || {},
-      atMediaTypes = parserConfig.atMediaTypes || {},
-      atMediaFeatures = parserConfig.atMediaFeatures || {},
+      tokenHooks = parserConfig.tokenHooks,
+      documentTypes = parserConfig.documentTypes || {},
+      mediaTypes = parserConfig.mediaTypes || {},
+      mediaFeatures = parserConfig.mediaFeatures || {},
+      mediaValueKeywords = parserConfig.mediaValueKeywords || {},
       propertyKeywords = parserConfig.propertyKeywords || {},
+      nonStandardPropertyKeywords = parserConfig.nonStandardPropertyKeywords || {},
+      fontProperties = parserConfig.fontProperties || {},
+      counterDescriptors = parserConfig.counterDescriptors || {},
       colorKeywords = parserConfig.colorKeywords || {},
       valueKeywords = parserConfig.valueKeywords || {},
-      allowNested = !!parserConfig.allowNested,
-      type = null;
+      allowNested = parserConfig.allowNested;
 
+  var type, override;
   function ret(style, tp) { type = tp; return style; }
 
+  // Tokenizers
+
   function tokenBase(stream, state) {
     var ch = stream.next();
-    if (hooks[ch]) {
-      // result[0] is style and result[1] is type
-      var result = hooks[ch](stream, state);
+    if (tokenHooks[ch]) {
+      var result = tokenHooks[ch](stream, state);
       if (result !== false) return result;
     }
-    if (ch == "@") {stream.eatWhile(/[\w\\\-]/); return ret("def", stream.current());}
-    else if (ch == "=") ret(null, "compare");
-    else if ((ch == "~" || ch == "|") && stream.eat("=")) return ret(null, "compare");
-    else if (ch == "\"" || ch == "'") {
+    if (ch == "@") {
+      stream.eatWhile(/[\w\\\-]/);
+      return ret("def", stream.current());
+    } else if (ch == "=" || (ch == "~" || ch == "|") && stream.eat("=")) {
+      return ret(null, "compare");
+    } else if (ch == "\"" || ch == "'") {
       state.tokenize = tokenString(ch);
       return state.tokenize(stream, state);
-    }
-    else if (ch == "#") {
+    } else if (ch == "#") {
       stream.eatWhile(/[\w\\\-]/);
       return ret("atom", "hash");
-    }
-    else if (ch == "!") {
+    } else if (ch == "!") {
       stream.match(/^\s*\w*/);
       return ret("keyword", "important");
-    }
-    else if (/\d/.test(ch)) {
+    } else if (/\d/.test(ch) || ch == "." && stream.eat(/\d/)) {
       stream.eatWhile(/[\w.%]/);
       return ret("number", "unit");
-    }
-    else if (ch === "-") {
-      if (/\d/.test(stream.peek())) {
+    } else if (ch === "-") {
+      if (/[\d.]/.test(stream.peek())) {
         stream.eatWhile(/[\w.%]/);
         return ret("number", "unit");
-      } else if (stream.match(/^[^-]+-/)) {
+      } else if (stream.match(/^-[\w\\\-]+/)) {
+        stream.eatWhile(/[\w\\\-]/);
+        if (stream.match(/^\s*:/, false))
+          return ret("variable-2", "variable-definition");
+        return ret("variable-2", "variable");
+      } else if (stream.match(/^\w+-/)) {
         return ret("meta", "meta");
       }
-    }
-    else if (/[,+>*\/]/.test(ch)) {
+    } else if (/[,+>*\/]/.test(ch)) {
       return ret(null, "select-op");
-    }
-    else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) {
+    } else if (ch == "." && stream.match(/^-?[_a-z][_a-z0-9-]*/i)) {
       return ret("qualifier", "qualifier");
-    }
-    else if (ch == ":") {
-      return ret("operator", ch);
-    }
-    else if (/[;{}\[\]\(\)]/.test(ch)) {
+    } else if (/[:;{}\[\]\(\)]/.test(ch)) {
       return ret(null, ch);
-    }
-    else if (ch == "u" && stream.match("rl(")) {
+    } else if ((ch == "u" && stream.match(/rl(-prefix)?\(/)) ||
+               (ch == "d" && stream.match("omain(")) ||
+               (ch == "r" && stream.match("egexp("))) {
       stream.backUp(1);
       state.tokenize = tokenParenthesized;
-      return ret("property", "variable");
-    }
-    else {
+      return ret("property", "word");
+    } else if (/[\w\\\-]/.test(ch)) {
       stream.eatWhile(/[\w\\\-]/);
-      return ret("property", "variable");
+      return ret("property", "word");
+    } else {
+      return ret(null, null);
     }
   }
 
-  function tokenString(quote, nonInclusive) {
+  function tokenString(quote) {
     return function(stream, state) {
       var escaped = false, ch;
       while ((ch = stream.next()) != null) {
-        if (ch == quote && !escaped)
+        if (ch == quote && !escaped) {
+          if (quote == ")") stream.backUp(1);
           break;
+        }
         escaped = !escaped && ch == "\\";
       }
-      if (!escaped) {
-        if (nonInclusive) stream.backUp(1);
-        state.tokenize = tokenBase;
-      }
+      if (ch == quote || !escaped && quote != ")") state.tokenize = null;
       return ret("string", "string");
     };
   }
 
   function tokenParenthesized(stream, state) {
     stream.next(); // Must be '('
-    if (!stream.match(/\s*[\"\']/, false))
-      state.tokenize = tokenString(")", true);
+    if (!stream.match(/\s*[\"\')]/, false))
+      state.tokenize = tokenString(")");
     else
-      state.tokenize = tokenBase;
+      state.tokenize = null;
     return ret(null, "(");
   }
 
+  // Context management
+
+  function Context(type, indent, prev) {
+    this.type = type;
+    this.indent = indent;
+    this.prev = prev;
+  }
+
+  function pushContext(state, stream, type) {
+    state.context = new Context(type, stream.indentation() + indentUnit, state.context);
+    return type;
+  }
+
+  function popContext(state) {
+    state.context = state.context.prev;
+    return state.context.type;
+  }
+
+  function pass(type, stream, state) {
+    return states[state.context.type](type, stream, state);
+  }
+  function popAndPass(type, stream, state, n) {
+    for (var i = n || 1; i > 0; i--)
+      state.context = state.context.prev;
+    return pass(type, stream, state);
+  }
+
+  // Parser
+
+  function wordAsValue(stream) {
+    var word = stream.current().toLowerCase();
+    if (valueKeywords.hasOwnProperty(word))
+      override = "atom";
+    else if (colorKeywords.hasOwnProperty(word))
+      override = "keyword";
+    else
+      override = "variable";
+  }
+
+  var states = {};
+
+  states.top = function(type, stream, state) {
+    if (type == "{") {
+      return pushContext(state, stream, "block");
+    } else if (type == "}" && state.context.prev) {
+      return popContext(state);
+    } else if (/@(media|supports|(-moz-)?document)/.test(type)) {
+      return pushContext(state, stream, "atBlock");
+    } else if (/@(font-face|counter-style)/.test(type)) {
+      state.stateArg = type;
+      return "restricted_atBlock_before";
+    } else if (/^@(-(moz|ms|o|webkit)-)?keyframes$/.test(type)) {
+      return "keyframes";
+    } else if (type && type.charAt(0) == "@") {
+      return pushContext(state, stream, "at");
+    } else if (type == "hash") {
+      override = "builtin";
+    } else if (type == "word") {
+      override = "tag";
+    } else if (type == "variable-definition") {
+      return "maybeprop";
+    } else if (type == "interpolation") {
+      return pushContext(state, stream, "interpolation");
+    } else if (type == ":") {
+      return "pseudo";
+    } else if (allowNested && type == "(") {
+      return pushContext(state, stream, "parens");
+    }
+    return state.context.type;
+  };
+
+  states.block = function(type, stream, state) {
+    if (type == "word") {
+      var word = stream.current().toLowerCase();
+      if (propertyKeywords.hasOwnProperty(word)) {
+        override = "property";
+        return "maybeprop";
+      } else if (nonStandardPropertyKeywords.hasOwnProperty(word)) {
+        override = "string-2";
+        return "maybeprop";
+      } else if (allowNested) {
+        override = stream.match(/^\s*:(?:\s|$)/, false) ? "property" : "tag";
+        return "block";
+      } else {
+        override += " error";
+        return "maybeprop";
+      }
+    } else if (type == "meta") {
+      return "block";
+    } else if (!allowNested && (type == "hash" || type == "qualifier")) {
+      override = "error";
+      return "block";
+    } else {
+      return states.top(type, stream, state);
+    }
+  };
+
+  states.maybeprop = function(type, stream, state) {
+    if (type == ":") return pushContext(state, stream, "prop");
+    return pass(type, stream, state);
+  };
+
+  states.prop = function(type, stream, state) {
+    if (type == ";") return popContext(state);
+    if (type == "{" && allowNested) return pushContext(state, stream, "propBlock");
+    if (type == "}" || type == "{") return popAndPass(type, stream, state);
+    if (type == "(") return pushContext(state, stream, "parens");
+
+    if (type == "hash" && !/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(stream.current())) {
+      override += " error";
+    } else if (type == "word") {
+      wordAsValue(stream);
+    } else if (type == "interpolation") {
+      return pushContext(state, stream, "interpolation");
+    }
+    return "prop";
+  };
+
+  states.propBlock = function(type, _stream, state) {
+    if (type == "}") return popContext(state);
+    if (type == "word") { override = "property"; return "maybeprop"; }
+    return state.context.type;
+  };
+
+  states.parens = function(type, stream, state) {
+    if (type == "{" || type == "}") return popAndPass(type, stream, state);
+    if (type == ")") return popContext(state);
+    if (type == "(") return pushContext(state, stream, "parens");
+    if (type == "interpolation") return pushContext(state, stream, "interpolation");
+    if (type == "word") wordAsValue(stream);
+    return "parens";
+  };
+
+  states.pseudo = function(type, stream, state) {
+    if (type == "word") {
+      override = "variable-3";
+      return state.context.type;
+    }
+    return pass(type, stream, state);
+  };
+
+  states.atBlock = function(type, stream, state) {
+    if (type == "(") return pushContext(state, stream, "atBlock_parens");
+    if (type == "}") return popAndPass(type, stream, state);
+    if (type == "{") return popContext(state) && pushContext(state, stream, allowNested ? "block" : "top");
+
+    if (type == "word") {
+      var word = stream.current().toLowerCase();
+      if (word == "only" || word == "not" || word == "and" || word == "or")
+        override = "keyword";
+      else if (documentTypes.hasOwnProperty(word))
+        override = "tag";
+      else if (mediaTypes.hasOwnProperty(word))
+        override = "attribute";
+      else if (mediaFeatures.hasOwnProperty(word))
+        override = "property";
+      else if (mediaValueKeywords.hasOwnProperty(word))
+        override = "keyword";
+      else if (propertyKeywords.hasOwnProperty(word))
+        override = "property";
+      else if (nonStandardPropertyKeywords.hasOwnProperty(word))
+        override = "string-2";
+      else if (valueKeywords.hasOwnProperty(word))
+        override = "atom";
+      else if (colorKeywords.hasOwnProperty(word))
+        override = "keyword";
+      else
+        override = "error";
+    }
+    return state.context.type;
+  };
+
+  states.atBlock_parens = function(type, stream, state) {
+    if (type == ")") return popContext(state);
+    if (type == "{" || type == "}") return popAndPass(type, stream, state, 2);
+    return states.atBlock(type, stream, state);
+  };
+
+  states.restricted_atBlock_before = function(type, stream, state) {
+    if (type == "{")
+      return pushContext(state, stream, "restricted_atBlock");
+    if (type == "word" && state.stateArg == "@counter-style") {
+      override = "variable";
+      return "restricted_atBlock_before";
+    }
+    return pass(type, stream, state);
+  };
+
+  states.restricted_atBlock = function(type, stream, state) {
+    if (type == "}") {
+      state.stateArg = null;
+      return popContext(state);
+    }
+    if (type == "word") {
+      if ((state.stateArg == "@font-face" && !fontProperties.hasOwnProperty(stream.current().toLowerCase())) ||
+          (state.stateArg == "@counter-style" && !counterDescriptors.hasOwnProperty(stream.current().toLowerCase())))
+        override = "error";
+      else
+        override = "property";
+      return "maybeprop";
+    }
+    return "restricted_atBlock";
+  };
+
+  states.keyframes = function(type, stream, state) {
+    if (type == "word") { override = "variable"; return "keyframes"; }
+    if (type == "{") return pushContext(state, stream, "top");
+    return pass(type, stream, state);
+  };
+
+  states.at = function(type, stream, state) {
+    if (type == ";") return popContext(state);
+    if (type == "{" || type == "}") return popAndPass(type, stream, state);
+    if (type == "word") override = "tag";
+    else if (type == "hash") override = "builtin";
+    return "at";
+  };
+
+  states.interpolation = function(type, stream, state) {
+    if (type == "}") return popContext(state);
+    if (type == "{" || type == ";") return popAndPass(type, stream, state);
+    if (type == "word") override = "variable";
+    else if (type != "variable" && type != "(" && type != ")") override = "error";
+    return "interpolation";
+  };
+
   return {
     startState: function(base) {
-      return {tokenize: tokenBase,
-              baseIndent: base || 0,
-              stack: [],
-              lastToken: null};
+      return {tokenize: null,
+              state: parserConfig.inline ? "block" : "top",
+              stateArg: null,
+              context: new Context(parserConfig.inline ? "block" : "top", base || 0, null)};
     },
 
     token: function(stream, state) {
-
-      // Use these terms when applicable (see http://www.xanthir.com/blog/b4E50)
-      //
-      // rule** or **ruleset:
-      // A selector + braces combo, or an at-rule.
-      //
-      // declaration block:
-      // A sequence of declarations.
-      //
-      // declaration:
-      // A property + colon + value combo.
-      //
-      // property value:
-      // The entire value of a property.
-      //
-      // component value:
-      // A single piece of a property value. Like the 5px in
-      // text-shadow: 0 0 5px blue;. Can also refer to things that are
-      // multiple terms, like the 1-4 terms that make up the background-size
-      // portion of the background shorthand.
-      //
-      // term:
-      // The basic unit of author-facing CSS, like a single number (5),
-      // dimension (5px), string ("foo"), or function. Officially defined
-      //  by the CSS 2.1 grammar (look for the 'term' production)
-      //
-      //
-      // simple selector:
-      // A single atomic selector, like a type selector, an attr selector, a
-      // class selector, etc.
-      //
-      // compound selector:
-      // One or more simple selectors without a combinator. div.example is
-      // compound, div > .example is not.
-      //
-      // complex selector:
-      // One or more compound selectors chained with combinators.
-      //
-      // combinator:
-      // The parts of selectors that express relationships. There are four
-      // currently - the space (descendant combinator), the greater-than
-      // bracket (child combinator), the plus sign (next sibling combinator),
-      // and the tilda (following sibling combinator).
-      //
-      // sequence of selectors:
-      // One or more of the named type of selector chained with commas.
-
-      state.tokenize = state.tokenize || tokenBase;
-      if (state.tokenize == tokenBase && stream.eatSpace()) return null;
-      var style = state.tokenize(stream, state);
-      if (style && typeof style != "string") style = ret(style[0], style[1]);
-
-      // Changing style returned based on context
-      var context = state.stack[state.stack.length-1];
-      if (style == "variable") {
-        if (type == "variable-definition") state.stack.push("propertyValue");
-        return state.lastToken = "variable-2";
-      } else if (style == "property") {
-        var word = stream.current().toLowerCase();
-        if (context == "propertyValue") {
-          if (valueKeywords.hasOwnProperty(word)) {
-            style = "string-2";
-          } else if (colorKeywords.hasOwnProperty(word)) {
-            style = "keyword";
-          } else {
-            style = "variable-2";
-          }
-        } else if (context == "rule") {
-          if (!propertyKeywords.hasOwnProperty(word)) {
-            style += " error";
-          }
-        } else if (context == "block") {
-          // if a value is present in both property, value, or color, the order
-          // of preference is property -> color -> value
-          if (propertyKeywords.hasOwnProperty(word)) {
-            style = "property";
-          } else if (colorKeywords.hasOwnProperty(word)) {
-            style = "keyword";
-          } else if (valueKeywords.hasOwnProperty(word)) {
-            style = "string-2";
-          } else {
-            style = "tag";
-          }
-        } else if (!context || context == "@media{") {
-          style = "tag";
-        } else if (context == "@media") {
-          if (atMediaTypes[stream.current()]) {
-            style = "attribute"; // Known attribute
-          } else if (/^(only|not)$/.test(word)) {
-            style = "keyword";
-          } else if (word == "and") {
-            style = "error"; // "and" is only allowed in @mediaType
-          } else if (atMediaFeatures.hasOwnProperty(word)) {
-            style = "error"; // Known property, should be in @mediaType(
-          } else {
-            // Unknown, expecting keyword or attribute, assuming attribute
-            style = "attribute error";
-          }
-        } else if (context == "@mediaType") {
-          if (atMediaTypes.hasOwnProperty(word)) {
-            style = "attribute";
-          } else if (word == "and") {
-            style = "operator";
-          } else if (/^(only|not)$/.test(word)) {
-            style = "error"; // Only allowed in @media
-          } else {
-            // Unknown attribute or property, but expecting property (preceded
-            // by "and"). Should be in parentheses
-            style = "error";
-          }
-        } else if (context == "@mediaType(") {
-          if (propertyKeywords.hasOwnProperty(word)) {
-            // do nothing, remains "property"
-          } else if (atMediaTypes.hasOwnProperty(word)) {
-            style = "error"; // Known property, should be in parentheses
-          } else if (word == "and") {
-            style = "operator";
-          } else if (/^(only|not)$/.test(word)) {
-            style = "error"; // Only allowed in @media
-          } else {
-            style += " error";
-          }
-        } else if (context == "@import") {
-          style = "tag";
-        } else {
-          style = "error";
-        }
-      } else if (style == "atom") {
-        if(!context || context == "@media{" || context == "block") {
-          style = "builtin";
-        } else if (context == "propertyValue") {
-          if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(stream.current())) {
-            style += " error";
-          }
-        } else {
-          style = "error";
-        }
-      } else if (context == "@media" && type == "{") {
-        style = "error";
+      if (!state.tokenize && stream.eatSpace()) return null;
+      var style = (state.tokenize || tokenBase)(stream, state);
+      if (style && typeof style == "object") {
+        type = style[1];
+        style = style[0];
       }
-
-      // Push/pop context stack
-      if (type == "{") {
-        if (context == "@media" || context == "@mediaType") {
-          state.stack.pop();
-          state.stack[state.stack.length-1] = "@media{";
-        }
-        else {
-          var newContext = allowNested ? "block" : "rule";
-          state.stack.push(newContext);
-        }
-      }
-      else if (type == "}") {
-        var lastState = state.stack[state.stack.length - 1];
-        if (lastState == "interpolation") style = "operator";
-        state.stack.pop();
-        if (context == "propertyValue") state.stack.pop();
-      }
-      else if (type == "interpolation") state.stack.push("interpolation");
-      else if (type == "@media") state.stack.push("@media");
-      else if (type == "@import") state.stack.push("@import");
-      else if (context == "@media" && /\b(keyword|attribute)\b/.test(style))
-        state.stack.push("@mediaType");
-      else if (context == "@mediaType" && stream.current() == ",") state.stack.pop();
-      else if (context == "@mediaType" && type == "(") state.stack.push("@mediaType(");
-      else if (context == "@mediaType(" && type == ")") state.stack.pop();
-      else if (type == ":" && state.lastToken == "property") state.stack.push("propertyValue");
-      else if (context == "propertyValue" && type == ";") state.stack.pop();
-      else if (context == "@import" && type == ";") state.stack.pop();
-      return state.lastToken = style;
+      override = style;
+      state.state = states[state.state](type, stream, state);
+      return override;
     },
 
     indent: function(state, textAfter) {
-      var n = state.stack.length;
-      if (/^\}/.test(textAfter))
-        n -= state.stack[state.stack.length-1] == "propertyValue" ? 2 : 1;
-      return state.baseIndent + n * indentUnit;
+      var cx = state.context, ch = textAfter && textAfter.charAt(0);
+      var indent = cx.indent;
+      if (cx.type == "prop" && (ch == "}" || ch == ")")) cx = cx.prev;
+      if (cx.prev &&
+          (ch == "}" && (cx.type == "block" || cx.type == "top" || cx.type == "interpolation" || cx.type == "restricted_atBlock") ||
+           ch == ")" && (cx.type == "parens" || cx.type == "atBlock_parens") ||
+           ch == "{" && (cx.type == "at" || cx.type == "atBlock"))) {
+        indent = cx.indent - indentUnit;
+        cx = cx.prev;
+      }
+      return indent;
     },
 
     electricChars: "}",
@@ -294,7 +381,6 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
   };
 });
 
-(function() {
   function keySet(array) {
     var keys = {};
     for (var i = 0; i < array.length; ++i) {
@@ -303,12 +389,16 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     return keys;
   }
 
-  var atMediaTypes = keySet([
+  var documentTypes_ = [
+    "domain", "regexp", "url", "url-prefix"
+  ], documentTypes = keySet(documentTypes_);
+
+  var mediaTypes_ = [
     "all", "aural", "braille", "handheld", "print", "projection", "screen",
     "tty", "tv", "embossed"
-  ]);
+  ], mediaTypes = keySet(mediaTypes_);
 
-  var atMediaFeatures = keySet([
+  var mediaFeatures_ = [
     "width", "min-width", "max-width", "height", "min-height", "max-height",
     "device-width", "min-device-width", "max-device-width", "device-height",
     "min-device-height", "max-device-height", "aspect-ratio",
@@ -316,16 +406,23 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     "min-device-aspect-ratio", "max-device-aspect-ratio", "color", "min-color",
     "max-color", "color-index", "min-color-index", "max-color-index",
     "monochrome", "min-monochrome", "max-monochrome", "resolution",
-    "min-resolution", "max-resolution", "scan", "grid"
-  ]);
+    "min-resolution", "max-resolution", "scan", "grid", "orientation",
+    "device-pixel-ratio", "min-device-pixel-ratio", "max-device-pixel-ratio",
+    "pointer", "any-pointer", "hover", "any-hover"
+  ], mediaFeatures = keySet(mediaFeatures_);
 
-  var propertyKeywords = keySet([
+  var mediaValueKeywords_ = [
+    "landscape", "portrait", "none", "coarse", "fine", "on-demand", "hover",
+    "interlace", "progressive"
+  ], mediaValueKeywords = keySet(mediaValueKeywords_);
+
+  var propertyKeywords_ = [
     "align-content", "align-items", "align-self", "alignment-adjust",
     "alignment-baseline", "anchor-point", "animation", "animation-delay",
-    "animation-direction", "animation-duration", "animation-iteration-count",
-    "animation-name", "animation-play-state", "animation-timing-function",
-    "appearance", "azimuth", "backface-visibility", "background",
-    "background-attachment", "background-clip", "background-color",
+    "animation-direction", "animation-duration", "animation-fill-mode",
+    "animation-iteration-count", "animation-name", "animation-play-state",
+    "animation-timing-function", "appearance", "azimuth", "backface-visibility",
+    "background", "background-attachment", "background-clip", "background-color",
     "background-image", "background-origin", "background-position",
     "background-repeat", "background-size", "baseline-shift", "binding",
     "bleed", "bookmark-label", "bookmark-level", "bookmark-state",
@@ -351,15 +448,16 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     "drop-initial-before-align", "drop-initial-size", "drop-initial-value",
     "elevation", "empty-cells", "fit", "fit-position", "flex", "flex-basis",
     "flex-direction", "flex-flow", "flex-grow", "flex-shrink", "flex-wrap",
-    "float", "float-offset", "font", "font-feature-settings", "font-family",
-    "font-kerning", "font-language-override", "font-size", "font-size-adjust",
+    "float", "float-offset", "flow-from", "flow-into", "font", "font-feature-settings",
+    "font-family", "font-kerning", "font-language-override", "font-size", "font-size-adjust",
     "font-stretch", "font-style", "font-synthesis", "font-variant",
     "font-variant-alternates", "font-variant-caps", "font-variant-east-asian",
     "font-variant-ligatures", "font-variant-numeric", "font-variant-position",
-    "font-weight", "grid-cell", "grid-column", "grid-column-align",
-    "grid-column-sizing", "grid-column-span", "grid-columns", "grid-flow",
-    "grid-row", "grid-row-align", "grid-row-sizing", "grid-row-span",
-    "grid-rows", "grid-template", "hanging-punctuation", "height", "hyphens",
+    "font-weight", "grid", "grid-area", "grid-auto-columns", "grid-auto-flow",
+    "grid-auto-position", "grid-auto-rows", "grid-column", "grid-column-end",
+    "grid-column-start", "grid-row", "grid-row-end", "grid-row-start",
+    "grid-template", "grid-template-areas", "grid-template-columns",
+    "grid-template-rows", "hanging-punctuation", "height", "hyphens",
     "icon", "image-orientation", "image-rendering", "image-resolution",
     "inline-box-align", "justify-content", "left", "letter-spacing",
     "line-break", "line-height", "line-stacking", "line-stacking-ruby",
@@ -369,25 +467,28 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     "marker-offset", "marks", "marquee-direction", "marquee-loop",
     "marquee-play-count", "marquee-speed", "marquee-style", "max-height",
     "max-width", "min-height", "min-width", "move-to", "nav-down", "nav-index",
-    "nav-left", "nav-right", "nav-up", "opacity", "order", "orphans", "outline",
+    "nav-left", "nav-right", "nav-up", "object-fit", "object-position",
+    "opacity", "order", "orphans", "outline",
     "outline-color", "outline-offset", "outline-style", "outline-width",
     "overflow", "overflow-style", "overflow-wrap", "overflow-x", "overflow-y",
     "padding", "padding-bottom", "padding-left", "padding-right", "padding-top",
     "page", "page-break-after", "page-break-before", "page-break-inside",
     "page-policy", "pause", "pause-after", "pause-before", "perspective",
     "perspective-origin", "pitch", "pitch-range", "play-during", "position",
-    "presentation-level", "punctuation-trim", "quotes", "rendering-intent",
-    "resize", "rest", "rest-after", "rest-before", "richness", "right",
-    "rotation", "rotation-point", "ruby-align", "ruby-overhang",
-    "ruby-position", "ruby-span", "size", "speak", "speak-as", "speak-header",
+    "presentation-level", "punctuation-trim", "quotes", "region-break-after",
+    "region-break-before", "region-break-inside", "region-fragment",
+    "rendering-intent", "resize", "rest", "rest-after", "rest-before", "richness",
+    "right", "rotation", "rotation-point", "ruby-align", "ruby-overhang",
+    "ruby-position", "ruby-span", "shape-image-threshold", "shape-inside", "shape-margin",
+    "shape-outside", "size", "speak", "speak-as", "speak-header",
     "speak-numeral", "speak-punctuation", "speech-rate", "stress", "string-set",
     "tab-size", "table-layout", "target", "target-name", "target-new",
     "target-position", "text-align", "text-align-last", "text-decoration",
     "text-decoration-color", "text-decoration-line", "text-decoration-skip",
     "text-decoration-style", "text-emphasis", "text-emphasis-color",
     "text-emphasis-position", "text-emphasis-style", "text-height",
-    "text-indent", "text-justify", "text-outline", "text-shadow",
-    "text-space-collapse", "text-transform", "text-underline-position",
+    "text-indent", "text-justify", "text-outline", "text-overflow", "text-shadow",
+    "text-size-adjust", "text-space-collapse", "text-transform", "text-underline-position",
     "text-wrap", "top", "transform", "transform-origin", "transform-style",
     "transition", "transition-delay", "transition-duration",
     "transition-property", "transition-timing-function", "unicode-bidi",
@@ -398,16 +499,34 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     // SVG-specific
     "clip-path", "clip-rule", "mask", "enable-background", "filter", "flood-color",
     "flood-opacity", "lighting-color", "stop-color", "stop-opacity", "pointer-events",
-    "color-interpolation", "color-interpolation-filters", "color-profile",
+    "color-interpolation", "color-interpolation-filters",
     "color-rendering", "fill", "fill-opacity", "fill-rule", "image-rendering",
     "marker", "marker-end", "marker-mid", "marker-start", "shape-rendering", "stroke",
     "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin",
     "stroke-miterlimit", "stroke-opacity", "stroke-width", "text-rendering",
     "baseline-shift", "dominant-baseline", "glyph-orientation-horizontal",
-    "glyph-orientation-vertical", "kerning", "text-anchor", "writing-mode"
-  ]);
+    "glyph-orientation-vertical", "text-anchor", "writing-mode"
+  ], propertyKeywords = keySet(propertyKeywords_);
+
+  var nonStandardPropertyKeywords_ = [
+    "scrollbar-arrow-color", "scrollbar-base-color", "scrollbar-dark-shadow-color",
+    "scrollbar-face-color", "scrollbar-highlight-color", "scrollbar-shadow-color",
+    "scrollbar-3d-light-color", "scrollbar-track-color", "shape-inside",
+    "searchfield-cancel-button", "searchfield-decoration", "searchfield-results-button",
+    "searchfield-results-decoration", "zoom"
+  ], nonStandardPropertyKeywords = keySet(nonStandardPropertyKeywords_);
+
+  var fontProperties_ = [
+    "font-family", "src", "unicode-range", "font-variant", "font-feature-settings",
+    "font-stretch", "font-weight", "font-style"
+  ], fontProperties = keySet(fontProperties_);
+
+  var counterDescriptors_ = [
+    "additive-symbols", "fallback", "negative", "pad", "prefix", "range",
+    "speak-as", "suffix", "symbols", "system"
+  ], counterDescriptors = keySet(counterDescriptors_);
 
-  var colorKeywords = keySet([
+  var colorKeywords_ = [
     "aliceblue", "antiquewhite", "aqua", "aquamarine", "azure", "beige",
     "bisque", "black", "blanchedalmond", "blue", "blueviolet", "brown",
     "burlywood", "cadetblue", "chartreuse", "chocolate", "coral", "cornflowerblue",
@@ -417,7 +536,7 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     "darkslateblue", "darkslategray", "darkturquoise", "darkviolet",
     "deeppink", "deepskyblue", "dimgray", "dodgerblue", "firebrick",
     "floralwhite", "forestgreen", "fuchsia", "gainsboro", "ghostwhite",
-    "gold", "goldenrod", "gray", "green", "greenyellow", "honeydew",
+    "gold", "goldenrod", "gray", "grey", "green", "greenyellow", "honeydew",
     "hotpink", "indianred", "indigo", "ivory", "khaki", "lavender",
     "lavenderblush", "lawngreen", "lemonchiffon", "lightblue", "lightcoral",
     "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightpink",
@@ -429,54 +548,57 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     "navajowhite", "navy", "oldlace", "olive", "olivedrab", "orange", "orangered",
     "orchid", "palegoldenrod", "palegreen", "paleturquoise", "palevioletred",
     "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue",
-    "purple", "red", "rosybrown", "royalblue", "saddlebrown", "salmon",
-    "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue",
+    "purple", "rebeccapurple", "red", "rosybrown", "royalblue", "saddlebrown",
+    "salmon", "sandybrown", "seagreen", "seashell", "sienna", "silver", "skyblue",
     "slateblue", "slategray", "snow", "springgreen", "steelblue", "tan",
     "teal", "thistle", "tomato", "turquoise", "violet", "wheat", "white",
     "whitesmoke", "yellow", "yellowgreen"
-  ]);
+  ], colorKeywords = keySet(colorKeywords_);
 
-  var valueKeywords = keySet([
-    "above", "absolute", "activeborder", "activecaption", "afar",
-    "after-white-space", "ahead", "alias", "all", "all-scroll", "alternate",
+  var valueKeywords_ = [
+    "above", "absolute", "activeborder", "additive", "activecaption", "afar",
+    "after-white-space", "ahead", "alias", "all", "all-scroll", "alphabetic", "alternate",
     "always", "amharic", "amharic-abegede", "antialiased", "appworkspace",
-    "arabic-indic", "armenian", "asterisks", "auto", "avoid", "background",
-    "backwards", "baseline", "below", "bidi-override", "binary", "bengali",
-    "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
-    "both", "bottom", "break-all", "break-word", "button", "button-bevel",
-    "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "cambodian",
+    "arabic-indic", "armenian", "asterisks", "attr", "auto", "avoid", "avoid-column", "avoid-page",
+    "avoid-region", "background", "backwards", "baseline", "below", "bidi-override", "binary",
+    "bengali", "blink", "block", "block-axis", "bold", "bolder", "border", "border-box",
+    "both", "bottom", "break", "break-all", "break-word", "bullets", "button", "button-bevel",
+    "buttonface", "buttonhighlight", "buttonshadow", "buttontext", "calc", "cambodian",
     "capitalize", "caps-lock-indicator", "caption", "captiontext", "caret",
-    "cell", "center", "checkbox", "circle", "cjk-earthly-branch",
+    "cell", "center", "checkbox", "circle", "cjk-decimal", "cjk-earthly-branch",
     "cjk-heavenly-stem", "cjk-ideographic", "clear", "clip", "close-quote",
-    "col-resize", "collapse", "compact", "condensed", "contain", "content",
-    "content-box", "context-menu", "continuous", "copy", "cover", "crop",
-    "cross", "crosshair", "currentcolor", "cursive", "dashed", "decimal",
+    "col-resize", "collapse", "column", "column-reverse", "compact", "condensed", "contain", "content",
+    "content-box", "context-menu", "continuous", "copy", "counter", "counters", "cover", "crop",
+    "cross", "crosshair", "currentcolor", "cursive", "cyclic", "dashed", "decimal",
     "decimal-leading-zero", "default", "default-button", "destination-atop",
     "destination-in", "destination-out", "destination-over", "devanagari",
-    "disc", "discard", "document", "dot-dash", "dot-dot-dash", "dotted",
-    "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
-    "element", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
+    "disc", "discard", "disclosure-closed", "disclosure-open", "document",
+    "dot-dash", "dot-dot-dash",
+    "dotted", "double", "down", "e-resize", "ease", "ease-in", "ease-in-out", "ease-out",
+    "element", "ellipse", "ellipsis", "embed", "end", "ethiopic", "ethiopic-abegede",
     "ethiopic-abegede-am-et", "ethiopic-abegede-gez", "ethiopic-abegede-ti-er",
     "ethiopic-abegede-ti-et", "ethiopic-halehame-aa-er",
     "ethiopic-halehame-aa-et", "ethiopic-halehame-am-et",
     "ethiopic-halehame-gez", "ethiopic-halehame-om-et",
     "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
-    "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et",
-    "ethiopic-halehame-tig", "ew-resize", "expanded", "extra-condensed",
-    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "footnotes",
+    "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig",
+    "ethiopic-numeric", "ew-resize", "expanded", "extends", "extra-condensed",
+    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "flex", "footnotes",
     "forwards", "from", "geometricPrecision", "georgian", "graytext", "groove",
     "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hebrew",
     "help", "hidden", "hide", "higher", "highlight", "highlighttext",
     "hiragana", "hiragana-iroha", "horizontal", "hsl", "hsla", "icon", "ignore",
     "inactiveborder", "inactivecaption", "inactivecaptiontext", "infinite",
     "infobackground", "infotext", "inherit", "initial", "inline", "inline-axis",
-    "inline-block", "inline-table", "inset", "inside", "intrinsic", "invert",
-    "italic", "justify", "kannada", "katakana", "katakana-iroha", "khmer",
+    "inline-block", "inline-flex", "inline-table", "inset", "inside", "intrinsic", "invert",
+    "italic", "japanese-formal", "japanese-informal", "justify", "kannada",
+    "katakana", "katakana-iroha", "keep-all", "khmer",
+    "korean-hangul-formal", "korean-hanja-formal", "korean-hanja-informal",
     "landscape", "lao", "large", "larger", "left", "level", "lighter",
-    "line-through", "linear", "lines", "list-item", "listbox", "listitem",
+    "line-through", "linear", "linear-gradient", "lines", "list-item", "listbox", "listitem",
     "local", "logical", "loud", "lower", "lower-alpha", "lower-armenian",
     "lower-greek", "lower-hexadecimal", "lower-latin", "lower-norwegian",
-    "lower-roman", "lowercase", "ltr", "malayalam", "match",
+    "lower-roman", "lowercase", "ltr", "malayalam", "match", "matrix", "matrix3d",
     "media-controls-background", "media-current-time-display",
     "media-fullscreen-button", "media-mute-button", "media-play-button",
     "media-return-to-realtime-button", "media-rewind-button",
@@ -488,38 +610,51 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
     "mix", "mongolian", "monospace", "move", "multiple", "myanmar", "n-resize",
     "narrower", "ne-resize", "nesw-resize", "no-close-quote", "no-drop",
     "no-open-quote", "no-repeat", "none", "normal", "not-allowed", "nowrap",
-    "ns-resize", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote",
+    "ns-resize", "numbers", "numeric", "nw-resize", "nwse-resize", "oblique", "octal", "open-quote",
     "optimizeLegibility", "optimizeSpeed", "oriya", "oromo", "outset",
-    "outside", "overlay", "overline", "padding", "padding-box", "painted",
-    "paused", "persian", "plus-darker", "plus-lighter", "pointer", "portrait",
-    "pre", "pre-line", "pre-wrap", "preserve-3d", "progress", "push-button",
-    "radio", "read-only", "read-write", "read-write-plaintext-only", "relative",
-    "repeat", "repeat-x", "repeat-y", "reset", "reverse", "rgb", "rgba",
-    "ridge", "right", "round", "row-resize", "rtl", "run-in", "running",
-    "s-resize", "sans-serif", "scroll", "scrollbar", "se-resize", "searchfield",
+    "outside", "outside-shape", "overlay", "overline", "padding", "padding-box",
+    "painted", "page", "paused", "persian", "perspective", "plus-darker", "plus-lighter",
+    "pointer", "polygon", "portrait", "pre", "pre-line", "pre-wrap", "preserve-3d",
+    "progress", "push-button", "radial-gradient", "radio", "read-only",
+    "read-write", "read-write-plaintext-only", "rectangle", "region",
+    "relative", "repeat", "repeating-linear-gradient",
+    "repeating-radial-gradient", "repeat-x", "repeat-y", "reset", "reverse",
+    "rgb", "rgba", "ridge", "right", "rotate", "rotate3d", "rotateX", "rotateY",
+    "rotateZ", "round", "row", "row-resize", "row-reverse", "rtl", "run-in", "running",
+    "s-resize", "sans-serif", "scale", "scale3d", "scaleX", "scaleY", "scaleZ",
+    "scroll", "scrollbar", "se-resize", "searchfield",
     "searchfield-cancel-button", "searchfield-decoration",
     "searchfield-results-button", "searchfield-results-decoration",
     "semi-condensed", "semi-expanded", "separate", "serif", "show", "sidama",
-    "single", "skip-white-space", "slide", "slider-horizontal",
+    "simp-chinese-formal", "simp-chinese-informal", "single",
+    "skew", "skewX", "skewY", "skip-white-space", "slide", "slider-horizontal",
     "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "slow",
     "small", "small-caps", "small-caption", "smaller", "solid", "somali",
-    "source-atop", "source-in", "source-out", "source-over", "space", "square",
-    "square-button", "start", "static", "status-bar", "stretch", "stroke",
-    "sub", "subpixel-antialiased", "super", "sw-resize", "table",
+    "source-atop", "source-in", "source-out", "source-over", "space", "spell-out", "square",
+    "square-button", "start", "static", "status-bar", "stretch", "stroke", "sub",
+    "subpixel-antialiased", "super", "sw-resize", "symbolic", "symbols", "table",
     "table-caption", "table-cell", "table-column", "table-column-group",
     "table-footer-group", "table-header-group", "table-row", "table-row-group",
+    "tamil",
     "telugu", "text", "text-bottom", "text-top", "textarea", "textfield", "thai",
     "thick", "thin", "threeddarkshadow", "threedface", "threedhighlight",
     "threedlightshadow", "threedshadow", "tibetan", "tigre", "tigrinya-er",
     "tigrinya-er-abegede", "tigrinya-et", "tigrinya-et-abegede", "to", "top",
+    "trad-chinese-formal", "trad-chinese-informal",
+    "translate", "translate3d", "translateX", "translateY", "translateZ",
     "transparent", "ultra-condensed", "ultra-expanded", "underline", "up",
     "upper-alpha", "upper-armenian", "upper-greek", "upper-hexadecimal",
     "upper-latin", "upper-norwegian", "upper-roman", "uppercase", "urdu", "url",
-    "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted",
+    "var", "vertical", "vertical-text", "visible", "visibleFill", "visiblePainted",
     "visibleStroke", "visual", "w-resize", "wait", "wave", "wider",
-    "window", "windowframe", "windowtext", "x-large", "x-small", "xor",
+    "window", "windowframe", "windowtext", "words", "x-large", "x-small", "xor",
     "xx-large", "xx-small"
-  ]);
+  ], valueKeywords = keySet(valueKeywords_);
+
+  var allWords = documentTypes_.concat(mediaTypes_).concat(mediaFeatures_).concat(mediaValueKeywords_)
+    .concat(propertyKeywords_).concat(nonStandardPropertyKeywords_).concat(colorKeywords_)
+    .concat(valueKeywords_);
+  CodeMirror.registerHelper("hintWords", "css", allWords);
 
   function tokenCComment(stream, state) {
     var maybeEnd = false, ch;
@@ -534,55 +669,37 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
   }
 
   CodeMirror.defineMIME("text/css", {
-    atMediaTypes: atMediaTypes,
-    atMediaFeatures: atMediaFeatures,
+    documentTypes: documentTypes,
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    mediaValueKeywords: mediaValueKeywords,
     propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
+    fontProperties: fontProperties,
+    counterDescriptors: counterDescriptors,
     colorKeywords: colorKeywords,
     valueKeywords: valueKeywords,
-    hooks: {
-      "<": function(stream, state) {
-        function tokenSGMLComment(stream, state) {
-          var dashes = 0, ch;
-          while ((ch = stream.next()) != null) {
-            if (dashes >= 2 && ch == ">") {
-              state.tokenize = null;
-              break;
-            }
-            dashes = (ch == "-") ? dashes + 1 : 0;
-          }
-          return ["comment", "comment"];
-        }
-        if (stream.eat("!")) {
-          state.tokenize = tokenSGMLComment;
-          return tokenSGMLComment(stream, state);
-        }
-      },
+    tokenHooks: {
       "/": function(stream, state) {
-        if (stream.eat("*")) {
-          state.tokenize = tokenCComment;
-          return tokenCComment(stream, state);
-        }
-        return false;
+        if (!stream.eat("*")) return false;
+        state.tokenize = tokenCComment;
+        return tokenCComment(stream, state);
       }
     },
-    name: "css-base"
+    name: "css"
   });
 
   CodeMirror.defineMIME("text/x-scss", {
-    atMediaTypes: atMediaTypes,
-    atMediaFeatures: atMediaFeatures,
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    mediaValueKeywords: mediaValueKeywords,
     propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
     colorKeywords: colorKeywords,
     valueKeywords: valueKeywords,
+    fontProperties: fontProperties,
     allowNested: true,
-    hooks: {
-      "$": function(stream) {
-        stream.match(/^[\w-]+/);
-        if (stream.peek() == ":") {
-          return ["variable", "variable-definition"];
-        }
-        return ["variable", "variable"];
-      },
+    tokenHooks: {
       "/": function(stream, state) {
         if (stream.eat("/")) {
           stream.skipToEnd();
@@ -594,15 +711,62 @@ CodeMirror.defineMode("css-base", function(config, parserConfig) {
           return ["operator", "operator"];
         }
       },
+      ":": function(stream) {
+        if (stream.match(/\s*\{/))
+          return [null, "{"];
+        return false;
+      },
+      "$": function(stream) {
+        stream.match(/^[\w-]+/);
+        if (stream.match(/^\s*:/, false))
+          return ["variable-2", "variable-definition"];
+        return ["variable-2", "variable"];
+      },
       "#": function(stream) {
-        if (stream.eat("{")) {
-          return ["operator", "interpolation"];
+        if (!stream.eat("{")) return false;
+        return [null, "interpolation"];
+      }
+    },
+    name: "css",
+    helperType: "scss"
+  });
+
+  CodeMirror.defineMIME("text/x-less", {
+    mediaTypes: mediaTypes,
+    mediaFeatures: mediaFeatures,
+    mediaValueKeywords: mediaValueKeywords,
+    propertyKeywords: propertyKeywords,
+    nonStandardPropertyKeywords: nonStandardPropertyKeywords,
+    colorKeywords: colorKeywords,
+    valueKeywords: valueKeywords,
+    fontProperties: fontProperties,
+    allowNested: true,
+    tokenHooks: {
+      "/": function(stream, state) {
+        if (stream.eat("/")) {
+          stream.skipToEnd();
+          return ["comment", "comment"];
+        } else if (stream.eat("*")) {
+          state.tokenize = tokenCComment;
+          return tokenCComment(stream, state);
         } else {
-          stream.eatWhile(/[\w\\\-]/);
-          return ["atom", "hash"];
+          return ["operator", "operator"];
         }
+      },
+      "@": function(stream) {
+        if (stream.eat("{")) return [null, "interpolation"];
+        if (stream.match(/^(charset|document|font-face|import|(-(moz|ms|o|webkit)-)?keyframes|media|namespace|page|supports)\b/, false)) return false;
+        stream.eatWhile(/[\w\\\-]/);
+        if (stream.match(/^\s*:/, false))
+          return ["variable-2", "variable-definition"];
+        return ["variable-2", "variable"];
+      },
+      "&": function() {
+        return ["atom", "atom"];
       }
     },
-    name: "css-base"
+    name: "css",
+    helperType: "less"
   });
-})();
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
index ec0c21d24..24552e2d8 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/htmlmixed.js
@@ -1,5 +1,21 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"), require("../xml/xml"), require("../javascript/javascript"), require("../css/css"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror", "../xml/xml", "../javascript/javascript", "../css/css"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
 CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
-  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+  var htmlMode = CodeMirror.getMode(config, {name: "xml",
+                                             htmlMode: true,
+                                             multilineTagIndentFactor: parserConfig.multilineTagIndentFactor,
+                                             multilineTagIndentPastTag: parserConfig.multilineTagIndentPastTag});
   var cssMode = CodeMirror.getMode(config, "css");
 
   var scriptTypes = [], scriptTypesConf = parserConfig && parserConfig.scriptTypes;
@@ -14,6 +30,7 @@ CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
 
   function html(stream, state) {
     var tagName = state.htmlState.tagName;
+    if (tagName) tagName = tagName.toLowerCase();
     var style = htmlMode.token(stream, state.htmlState);
     if (tagName == "script" && /\btag\b/.test(style) && stream.current() == ">") {
       // Script block: mode to change to depends on type attribute
@@ -40,11 +57,11 @@ CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
   }
   function maybeBackup(stream, pat, style) {
     var cur = stream.current();
-    var close = cur.search(pat), m;
+    var close = cur.search(pat);
     if (close > -1) stream.backUp(cur.length - close);
-    else if (m = cur.match(/<\/?$/)) {
+    else if (cur.match(/<\/?$/)) {
       stream.backUp(cur.length);
-      if (!stream.match(pat, false)) stream.match(cur[0]);
+      if (!stream.match(pat, false)) stream.match(cur);
     }
     return style;
   }
@@ -52,7 +69,7 @@ CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
     if (stream.match(/^<\/\s*script\s*>/i, false)) {
       state.token = html;
       state.localState = state.localMode = null;
-      return html(stream, state);
+      return null;
     }
     return maybeBackup(stream, /<\/\s*script\s*>/,
                        state.localMode.token(stream, state.localState));
@@ -61,7 +78,7 @@ CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
     if (stream.match(/^<\/\s*style\s*>/i, false)) {
       state.token = html;
       state.localState = state.localMode = null;
-      return html(stream, state);
+      return null;
     }
     return maybeBackup(stream, /<\/\s*style\s*>/,
                        cssMode.token(stream, state.localState));
@@ -93,8 +110,6 @@ CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
         return CodeMirror.Pass;
     },
 
-    electricChars: "/{}:",
-
     innerMode: function(state) {
       return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode};
     }
@@ -102,3 +117,5 @@ CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
 }, "xml", "javascript", "css");
 
 CodeMirror.defineMIME("text/html", "htmlmixed");
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
index 3d04603c2..c86f49e1f 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/javascript.js
@@ -1,10 +1,25 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
 // TODO actually recognize syntax of TypeScript constructs
 
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
 CodeMirror.defineMode("javascript", function(config, parserConfig) {
   var indentUnit = config.indentUnit;
   var statementIndent = parserConfig.statementIndent;
-  var jsonMode = parserConfig.json;
+  var jsonldMode = parserConfig.jsonld;
+  var jsonMode = parserConfig.json || jsonldMode;
   var isTS = parserConfig.typescript;
+  var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
 
   // Tokenizer
 
@@ -15,13 +30,14 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
 
     var jsKeywords = {
       "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
-      "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C,
+      "return": C, "break": C, "continue": C, "new": C, "delete": C, "throw": C, "debugger": C,
       "var": kw("var"), "const": kw("var"), "let": kw("var"),
       "function": kw("function"), "catch": kw("catch"),
       "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
       "in": operator, "typeof": operator, "instanceof": operator,
       "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
-      "this": kw("this")
+      "this": kw("this"), "module": kw("module"), "class": kw("class"), "super": kw("atom"),
+      "yield": C, "export": kw("export"), "import": kw("import"), "extends": C
     };
 
     // Extend the 'normal' keywords with the TypeScript language extensions
@@ -30,7 +46,6 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       var tsKeywords = {
         // object-like things
         "interface": kw("interface"),
-        "class": kw("class"),
         "extends": kw("extends"),
         "constructor": kw("constructor"),
 
@@ -40,8 +55,6 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
         "protected": kw("protected"),
         "static": kw("static"),
 
-        "super": kw("super"),
-
         // types
         "string": type, "number": type, "bool": type, "any": type
       };
@@ -55,20 +68,18 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   }();
 
   var isOperatorChar = /[+\-*&%=<>!?|~^]/;
+  var isJsonldKeyword = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
 
-  function chain(stream, state, f) {
-    state.tokenize = f;
-    return f(stream, state);
-  }
-
-  function nextUntilUnescaped(stream, end) {
-    var escaped = false, next;
+  function readRegexp(stream) {
+    var escaped = false, next, inSet = false;
     while ((next = stream.next()) != null) {
-      if (next == end && !escaped)
-        return false;
+      if (!escaped) {
+        if (next == "/" && !inSet) return;
+        if (next == "[") inSet = true;
+        else if (inSet && next == "]") inSet = false;
+      }
       escaped = !escaped && next == "\\";
     }
-    return escaped;
   }
 
   // Used as scratch variables to communicate multiple values without
@@ -78,69 +89,79 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     type = tp; content = cont;
     return style;
   }
-
-  function jsTokenBase(stream, state) {
+  function tokenBase(stream, state) {
     var ch = stream.next();
-    if (ch == '"' || ch == "'")
-      return chain(stream, state, jsTokenString(ch));
-    else if (/[\[\]{}\(\),;\:\.]/.test(ch))
+    if (ch == '"' || ch == "'") {
+      state.tokenize = tokenString(ch);
+      return state.tokenize(stream, state);
+    } else if (ch == "." && stream.match(/^\d+(?:[eE][+\-]?\d+)?/)) {
+      return ret("number", "number");
+    } else if (ch == "." && stream.match("..")) {
+      return ret("spread", "meta");
+    } else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
       return ret(ch);
-    else if (ch == "0" && stream.eat(/x/i)) {
+    } else if (ch == "=" && stream.eat(">")) {
+      return ret("=>", "operator");
+    } else if (ch == "0" && stream.eat(/x/i)) {
       stream.eatWhile(/[\da-f]/i);
       return ret("number", "number");
-    }
-    else if (/\d/.test(ch) || ch == "-" && stream.eat(/\d/)) {
+    } else if (/\d/.test(ch)) {
       stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
       return ret("number", "number");
-    }
-    else if (ch == "/") {
+    } else if (ch == "/") {
       if (stream.eat("*")) {
-        return chain(stream, state, jsTokenComment);
-      }
-      else if (stream.eat("/")) {
+        state.tokenize = tokenComment;
+        return tokenComment(stream, state);
+      } else if (stream.eat("/")) {
         stream.skipToEnd();
         return ret("comment", "comment");
-      }
-      else if (state.lastType == "operator" || state.lastType == "keyword c" ||
-               /^[\[{}\(,;:]$/.test(state.lastType)) {
-        nextUntilUnescaped(stream, "/");
-        stream.eatWhile(/[gimy]/); // 'y' is "sticky" option in Mozilla
+      } else if (state.lastType == "operator" || state.lastType == "keyword c" ||
+               state.lastType == "sof" || /^[\[{}\(,;:]$/.test(state.lastType)) {
+        readRegexp(stream);
+        stream.match(/^\b(([gimyu])(?![gimyu]*\2))+\b/);
         return ret("regexp", "string-2");
-      }
-      else {
+      } else {
         stream.eatWhile(isOperatorChar);
-        return ret("operator", null, stream.current());
+        return ret("operator", "operator", stream.current());
       }
-    }
-    else if (ch == "#") {
+    } else if (ch == "`") {
+      state.tokenize = tokenQuasi;
+      return tokenQuasi(stream, state);
+    } else if (ch == "#") {
       stream.skipToEnd();
       return ret("error", "error");
-    }
-    else if (isOperatorChar.test(ch)) {
+    } else if (isOperatorChar.test(ch)) {
       stream.eatWhile(isOperatorChar);
-      return ret("operator", null, stream.current());
-    }
-    else {
-      stream.eatWhile(/[\w\$_]/);
+      return ret("operator", "operator", stream.current());
+    } else if (wordRE.test(ch)) {
+      stream.eatWhile(wordRE);
       var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
       return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
                      ret("variable", "variable", word);
     }
   }
 
-  function jsTokenString(quote) {
+  function tokenString(quote) {
     return function(stream, state) {
-      if (!nextUntilUnescaped(stream, quote))
-        state.tokenize = jsTokenBase;
+      var escaped = false, next;
+      if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)){
+        state.tokenize = tokenBase;
+        return ret("jsonld-keyword", "meta");
+      }
+      while ((next = stream.next()) != null) {
+        if (next == quote && !escaped) break;
+        escaped = !escaped && next == "\\";
+      }
+      if (!escaped) state.tokenize = tokenBase;
       return ret("string", "string");
     };
   }
 
-  function jsTokenComment(stream, state) {
+  function tokenComment(stream, state) {
     var maybeEnd = false, ch;
     while (ch = stream.next()) {
       if (ch == "/" && maybeEnd) {
-        state.tokenize = jsTokenBase;
+        state.tokenize = tokenBase;
         break;
       }
       maybeEnd = (ch == "*");
@@ -148,9 +169,55 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     return ret("comment", "comment");
   }
 
+  function tokenQuasi(stream, state) {
+    var escaped = false, next;
+    while ((next = stream.next()) != null) {
+      if (!escaped && (next == "`" || next == "$" && stream.eat("{"))) {
+        state.tokenize = tokenBase;
+        break;
+      }
+      escaped = !escaped && next == "\\";
+    }
+    return ret("quasi", "string-2", stream.current());
+  }
+
+  var brackets = "([{}])";
+  // This is a crude lookahead trick to try and notice that we're
+  // parsing the argument patterns for a fat-arrow function before we
+  // actually hit the arrow token. It only works if the arrow is on
+  // the same line as the arguments and there's no strange noise
+  // (comments) in between. Fallback is to only notice when we hit the
+  // arrow, and not declare the arguments as locals for the arrow
+  // body.
+  function findFatArrow(stream, state) {
+    if (state.fatArrowAt) state.fatArrowAt = null;
+    var arrow = stream.string.indexOf("=>", stream.start);
+    if (arrow < 0) return;
+
+    var depth = 0, sawSomething = false;
+    for (var pos = arrow - 1; pos >= 0; --pos) {
+      var ch = stream.string.charAt(pos);
+      var bracket = brackets.indexOf(ch);
+      if (bracket >= 0 && bracket < 3) {
+        if (!depth) { ++pos; break; }
+        if (--depth == 0) break;
+      } else if (bracket >= 3 && bracket < 6) {
+        ++depth;
+      } else if (wordRE.test(ch)) {
+        sawSomething = true;
+      } else if (/["'\/]/.test(ch)) {
+        return;
+      } else if (sawSomething && !depth) {
+        ++pos;
+        break;
+      }
+    }
+    if (sawSomething && !depth) state.fatArrowAt = pos;
+  }
+
   // Parser
 
-  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true};
+  var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true, "jsonld-keyword": true};
 
   function JSLexical(indented, column, type, align, prev, info) {
     this.indented = indented;
@@ -164,13 +231,17 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   function inScope(state, varname) {
     for (var v = state.localVars; v; v = v.next)
       if (v.name == varname) return true;
+    for (var cx = state.context; cx; cx = cx.prev) {
+      for (var v = cx.vars; v; v = v.next)
+        if (v.name == varname) return true;
+    }
   }
 
   function parseJS(state, style, type, content, stream) {
     var cc = state.cc;
     // Communicate our context to the combinators.
     // (Less wasteful than consing up a hundred closures on every call.)
-    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc;
+    cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc; cx.style = style;
 
     if (!state.lexical.hasOwnProperty("align"))
       state.lexical.align = true;
@@ -210,7 +281,8 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
       state.localVars = {name: varname, next: state.localVars};
     } else {
       if (inList(state.globalVars)) return;
-      state.globalVars = {name: varname, next: state.globalVars};
+      if (parserConfig.globalVars)
+        state.globalVars = {name: varname, next: state.globalVars};
     }
   }
 
@@ -229,6 +301,8 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     var result = function() {
       var state = cx.state, indent = state.indented;
       if (state.lexical.type == "stat") indent = state.lexical.indented;
+      else for (var outer = state.lexical; outer && outer.type == ")" && outer.align; outer = outer.prev)
+        indent = outer.indented;
       state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
     };
     result.lex = true;
@@ -245,23 +319,27 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
   poplex.lex = true;
 
   function expect(wanted) {
-    return function(type) {
+    function exp(type) {
       if (type == wanted) return cont();
       else if (wanted == ";") return pass();
-      else return cont(arguments.callee);
+      else return cont(exp);
     };
+    return exp;
   }
 
-  function statement(type) {
-    if (type == "var") return cont(pushlex("vardef"), vardef1, expect(";"), poplex);
+  function statement(type, value) {
+    if (type == "var") return cont(pushlex("vardef", value.length), vardef, expect(";"), poplex);
     if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
     if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
     if (type == "{") return cont(pushlex("}"), block, poplex);
     if (type == ";") return cont();
-    if (type == "if") return cont(pushlex("form"), expression, statement, poplex, maybeelse);
+    if (type == "if") {
+      if (cx.state.lexical.info == "else" && cx.state.cc[cx.state.cc.length - 1] == poplex)
+        cx.state.cc.pop()();
+      return cont(pushlex("form"), expression, statement, poplex, maybeelse);
+    }
     if (type == "function") return cont(functiondef);
-    if (type == "for") return cont(pushlex("form"), expect("("), pushlex(")"), forspec1, expect(")"),
-                                   poplex, statement, poplex);
+    if (type == "for") return cont(pushlex("form"), forspec, statement, poplex);
     if (type == "variable") return cont(pushlex("stat"), maybelabel);
     if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
                                       block, poplex, poplex);
@@ -269,6 +347,10 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     if (type == "default") return cont(expect(":"));
     if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
                                      statement, poplex, popcontext);
+    if (type == "module") return cont(pushlex("form"), pushcontext, afterModule, popcontext, poplex);
+    if (type == "class") return cont(pushlex("form"), className, poplex);
+    if (type == "export") return cont(pushlex("form"), afterExport, poplex);
+    if (type == "import") return cont(pushlex("form"), afterImport, poplex);
     return pass(pushlex("stat"), expression, expect(";"), poplex);
   }
   function expression(type) {
@@ -278,14 +360,21 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     return expressionInner(type, true);
   }
   function expressionInner(type, noComma) {
+    if (cx.state.fatArrowAt == cx.stream.start) {
+      var body = noComma ? arrowBodyNoComma : arrowBody;
+      if (type == "(") return cont(pushcontext, pushlex(")"), commasep(pattern, ")"), poplex, expect("=>"), body, popcontext);
+      else if (type == "variable") return pass(pushcontext, pattern, expect("=>"), body, popcontext);
+    }
+
     var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
     if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
-    if (type == "function") return cont(functiondef);
+    if (type == "function") return cont(functiondef, maybeop);
     if (type == "keyword c") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
-    if (type == "(") return cont(pushlex(")"), maybeexpression, expect(")"), poplex, maybeop);
-    if (type == "operator") return cont(noComma ? expressionNoComma : expression);
-    if (type == "[") return cont(pushlex("]"), commasep(expressionNoComma, "]"), poplex, maybeop);
-    if (type == "{") return cont(pushlex("}"), commasep(objprop, "}"), poplex, maybeop);
+    if (type == "(") return cont(pushlex(")"), maybeexpression, comprehension, expect(")"), poplex, maybeop);
+    if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
+    if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
+    if (type == "{") return contCommasep(objprop, "}", null, maybeop);
+    if (type == "quasi") { return pass(quasi, maybeop); }
     return cont();
   }
   function maybeexpression(type) {
@@ -299,20 +388,43 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
 
   function maybeoperatorComma(type, value) {
     if (type == ",") return cont(expression);
-    return maybeoperatorNoComma(type, value, maybeoperatorComma);
+    return maybeoperatorNoComma(type, value, false);
   }
-  function maybeoperatorNoComma(type, value, me) {
-    if (!me) me = maybeoperatorNoComma;
+  function maybeoperatorNoComma(type, value, noComma) {
+    var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
+    var expr = noComma == false ? expression : expressionNoComma;
+    if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
     if (type == "operator") {
       if (/\+\+|--/.test(value)) return cont(me);
-      if (value == "?") return cont(expression, expect(":"), expression);
-      return cont(expression);
+      if (value == "?") return cont(expression, expect(":"), expr);
+      return cont(expr);
     }
+    if (type == "quasi") { return pass(quasi, me); }
     if (type == ";") return;
-    if (type == "(") return cont(pushlex(")", "call"), commasep(expressionNoComma, ")"), poplex, me);
+    if (type == "(") return contCommasep(expressionNoComma, ")", "call", me);
     if (type == ".") return cont(property, me);
     if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
   }
+  function quasi(type, value) {
+    if (type != "quasi") return pass();
+    if (value.slice(value.length - 2) != "${") return cont(quasi);
+    return cont(expression, continueQuasi);
+  }
+  function continueQuasi(type) {
+    if (type == "}") {
+      cx.marked = "string-2";
+      cx.state.tokenize = tokenQuasi;
+      return cont(quasi);
+    }
+  }
+  function arrowBody(type) {
+    findFatArrow(cx.stream, cx.state);
+    return pass(type == "{" ? statement : expression);
+  }
+  function arrowBodyNoComma(type) {
+    findFatArrow(cx.stream, cx.state);
+    return pass(type == "{" ? statement : expressionNoComma);
+  }
   function maybelabel(type) {
     if (type == ":") return cont(poplex, statement);
     return pass(maybeoperatorComma, expect(";"), poplex);
@@ -321,20 +433,28 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     if (type == "variable") {cx.marked = "property"; return cont();}
   }
   function objprop(type, value) {
-    if (type == "variable") {
+    if (type == "variable" || cx.style == "keyword") {
       cx.marked = "property";
       if (value == "get" || value == "set") return cont(getterSetter);
+      return cont(afterprop);
     } else if (type == "number" || type == "string") {
-      cx.marked = type + " property";
+      cx.marked = jsonldMode ? "property" : (cx.style + " property");
+      return cont(afterprop);
+    } else if (type == "jsonld-keyword") {
+      return cont(afterprop);
+    } else if (type == "[") {
+      return cont(expression, expect("]"), afterprop);
     }
-    if (atomicTypes.hasOwnProperty(type)) return cont(expect(":"), expressionNoComma);
   }
   function getterSetter(type) {
-    if (type == ":") return cont(expression);
-    if (type != "variable") return cont(expect(":"), expression);
+    if (type != "variable") return pass(afterprop);
     cx.marked = "property";
     return cont(functiondef);
   }
+  function afterprop(type) {
+    if (type == ":") return cont(expressionNoComma);
+    if (type == "(") return pass(functiondef);
+  }
   function commasep(what, end) {
     function proceed(type) {
       if (type == ",") {
@@ -347,75 +467,172 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     }
     return function(type) {
       if (type == end) return cont();
-      else return pass(what, proceed);
+      return pass(what, proceed);
     };
   }
+  function contCommasep(what, end, info) {
+    for (var i = 3; i < arguments.length; i++)
+      cx.cc.push(arguments[i]);
+    return cont(pushlex(end, info), commasep(what, end), poplex);
+  }
   function block(type) {
     if (type == "}") return cont();
     return pass(statement, block);
   }
   function maybetype(type) {
-    if (type == ":") return cont(typedef);
-    return pass();
+    if (isTS && type == ":") return cont(typedef);
+  }
+  function maybedefault(_, value) {
+    if (value == "=") return cont(expressionNoComma);
   }
   function typedef(type) {
-    if (type == "variable"){cx.marked = "variable-3"; return cont();}
-    return pass();
+    if (type == "variable") {cx.marked = "variable-3"; return cont();}
+  }
+  function vardef() {
+    return pass(pattern, maybetype, maybeAssign, vardefCont);
+  }
+  function pattern(type, value) {
+    if (type == "variable") { register(value); return cont(); }
+    if (type == "[") return contCommasep(pattern, "]");
+    if (type == "{") return contCommasep(proppattern, "}");
   }
-  function vardef1(type, value) {
-    if (type == "variable") {
+  function proppattern(type, value) {
+    if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
       register(value);
-      return isTS ? cont(maybetype, vardef2) : cont(vardef2);
+      return cont(maybeAssign);
     }
-    return pass();
+    if (type == "variable") cx.marked = "property";
+    return cont(expect(":"), pattern, maybeAssign);
   }
-  function vardef2(type, value) {
-    if (value == "=") return cont(expressionNoComma, vardef2);
-    if (type == ",") return cont(vardef1);
+  function maybeAssign(_type, value) {
+    if (value == "=") return cont(expressionNoComma);
+  }
+  function vardefCont(type) {
+    if (type == ",") return cont(vardef);
   }
   function maybeelse(type, value) {
-    if (type == "keyword b" && value == "else") return cont(pushlex("form"), statement, poplex);
+    if (type == "keyword b" && value == "else") return cont(pushlex("form", "else"), statement, poplex);
+  }
+  function forspec(type) {
+    if (type == "(") return cont(pushlex(")"), forspec1, expect(")"), poplex);
   }
   function forspec1(type) {
-    if (type == "var") return cont(vardef1, expect(";"), forspec2);
+    if (type == "var") return cont(vardef, expect(";"), forspec2);
     if (type == ";") return cont(forspec2);
-    if (type == "variable") return cont(formaybein);
+    if (type == "variable") return cont(formaybeinof);
     return pass(expression, expect(";"), forspec2);
   }
-  function formaybein(_type, value) {
-    if (value == "in") return cont(expression);
+  function formaybeinof(_type, value) {
+    if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
     return cont(maybeoperatorComma, forspec2);
   }
   function forspec2(type, value) {
     if (type == ";") return cont(forspec3);
-    if (value == "in") return cont(expression);
+    if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
     return pass(expression, expect(";"), forspec3);
   }
   function forspec3(type) {
     if (type != ")") cont(expression);
   }
   function functiondef(type, value) {
+    if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
     if (type == "variable") {register(value); return cont(functiondef);}
-    if (type == "(") return cont(pushlex(")"), pushcontext, commasep(funarg, ")"), poplex, statement, popcontext);
+    if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, statement, popcontext);
+  }
+  function funarg(type) {
+    if (type == "spread") return cont(funarg);
+    return pass(pattern, maybetype, maybedefault);
   }
-  function funarg(type, value) {
-    if (type == "variable") {register(value); return isTS ? cont(maybetype) : cont();}
+  function className(type, value) {
+    if (type == "variable") {register(value); return cont(classNameAfter);}
+  }
+  function classNameAfter(type, value) {
+    if (value == "extends") return cont(expression, classNameAfter);
+    if (type == "{") return cont(pushlex("}"), classBody, poplex);
+  }
+  function classBody(type, value) {
+    if (type == "variable" || cx.style == "keyword") {
+      if (value == "static") {
+        cx.marked = "keyword";
+        return cont(classBody);
+      }
+      cx.marked = "property";
+      if (value == "get" || value == "set") return cont(classGetterSetter, functiondef, classBody);
+      return cont(functiondef, classBody);
+    }
+    if (value == "*") {
+      cx.marked = "keyword";
+      return cont(classBody);
+    }
+    if (type == ";") return cont(classBody);
+    if (type == "}") return cont();
+  }
+  function classGetterSetter(type) {
+    if (type != "variable") return pass();
+    cx.marked = "property";
+    return cont();
+  }
+  function afterModule(type, value) {
+    if (type == "string") return cont(statement);
+    if (type == "variable") { register(value); return cont(maybeFrom); }
+  }
+  function afterExport(_type, value) {
+    if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
+    if (value == "default") { cx.marked = "keyword"; return cont(expression, expect(";")); }
+    return pass(statement);
+  }
+  function afterImport(type) {
+    if (type == "string") return cont();
+    return pass(importSpec, maybeFrom);
+  }
+  function importSpec(type, value) {
+    if (type == "{") return contCommasep(importSpec, "}");
+    if (type == "variable") register(value);
+    if (value == "*") cx.marked = "keyword";
+    return cont(maybeAs);
+  }
+  function maybeAs(_type, value) {
+    if (value == "as") { cx.marked = "keyword"; return cont(importSpec); }
+  }
+  function maybeFrom(_type, value) {
+    if (value == "from") { cx.marked = "keyword"; return cont(expression); }
+  }
+  function arrayLiteral(type) {
+    if (type == "]") return cont();
+    return pass(expressionNoComma, maybeArrayComprehension);
+  }
+  function maybeArrayComprehension(type) {
+    if (type == "for") return pass(comprehension, expect("]"));
+    if (type == ",") return cont(commasep(maybeexpressionNoComma, "]"));
+    return pass(commasep(expressionNoComma, "]"));
+  }
+  function comprehension(type) {
+    if (type == "for") return cont(forspec, comprehension);
+    if (type == "if") return cont(expression, comprehension);
+  }
+
+  function isContinuedStatement(state, textAfter) {
+    return state.lastType == "operator" || state.lastType == "," ||
+      isOperatorChar.test(textAfter.charAt(0)) ||
+      /[,.]/.test(textAfter.charAt(0));
   }
 
   // Interface
 
   return {
     startState: function(basecolumn) {
-      return {
-        tokenize: jsTokenBase,
-        lastType: null,
+      var state = {
+        tokenize: tokenBase,
+        lastType: "sof",
         cc: [],
         lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
         localVars: parserConfig.localVars,
-        globalVars: parserConfig.globalVars,
         context: parserConfig.localVars && {vars: parserConfig.localVars},
         indented: 0
       };
+      if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
+        state.globalVars = parserConfig.globalVars;
+      return state;
     },
 
     token: function(stream, state) {
@@ -423,8 +640,9 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
         if (!state.lexical.hasOwnProperty("align"))
           state.lexical.align = false;
         state.indented = stream.indentation();
+        findFatArrow(stream, state);
       }
-      if (state.tokenize != jsTokenComment && stream.eatSpace()) return null;
+      if (state.tokenize != tokenComment && stream.eatSpace()) return null;
       var style = state.tokenize(stream, state);
       if (type == "comment") return style;
       state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
@@ -432,47 +650,55 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) {
     },
 
     indent: function(state, textAfter) {
-      if (state.tokenize == jsTokenComment) return CodeMirror.Pass;
-      if (state.tokenize != jsTokenBase) return 0;
+      if (state.tokenize == tokenComment) return CodeMirror.Pass;
+      if (state.tokenize != tokenBase) return 0;
       var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
       // Kludge to prevent 'maybelse' from blocking lexical scope pops
-      for (var i = state.cc.length - 1; i >= 0; --i) {
+      if (!/^\s*else\b/.test(textAfter)) for (var i = state.cc.length - 1; i >= 0; --i) {
         var c = state.cc[i];
         if (c == poplex) lexical = lexical.prev;
-        else if (c != maybeelse || /^else\b/.test(textAfter)) break;
+        else if (c != maybeelse) break;
       }
       if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
       if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
         lexical = lexical.prev;
       var type = lexical.type, closing = firstChar == type;
 
-      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? 4 : 0);
+      if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? lexical.info + 1 : 0);
       else if (type == "form" && firstChar == "{") return lexical.indented;
       else if (type == "form") return lexical.indented + indentUnit;
       else if (type == "stat")
-        return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? statementIndent || indentUnit : 0);
+        return lexical.indented + (isContinuedStatement(state, textAfter) ? statementIndent || indentUnit : 0);
       else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
         return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
       else if (lexical.align) return lexical.column + (closing ? 0 : 1);
       else return lexical.indented + (closing ? 0 : indentUnit);
     },
 
-    electricChars: ":{}",
+    electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
     blockCommentStart: jsonMode ? null : "/*",
     blockCommentEnd: jsonMode ? null : "*/",
     lineComment: jsonMode ? null : "//",
     fold: "brace",
+    closeBrackets: "()[]{}''\"\"``",
 
     helperType: jsonMode ? "json" : "javascript",
+    jsonldMode: jsonldMode,
     jsonMode: jsonMode
   };
 });
 
+CodeMirror.registerHelper("wordChars", "javascript", /[\w$]/);
+
 CodeMirror.defineMIME("text/javascript", "javascript");
 CodeMirror.defineMIME("text/ecmascript", "javascript");
 CodeMirror.defineMIME("application/javascript", "javascript");
+CodeMirror.defineMIME("application/x-javascript", "javascript");
 CodeMirror.defineMIME("application/ecmascript", "javascript");
 CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
 CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
+CodeMirror.defineMIME("application/ld+json", {name: "javascript", jsonld: true});
 CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
 CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js
deleted file mode 100644
index 09f510e03..000000000
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/less.js
+++ /dev/null
@@ -1,258 +0,0 @@
-/*
-  LESS mode - http://www.lesscss.org/
-  Ported to CodeMirror by Peter Kroon <plakroon@gmail.com>
-  Report bugs/issues here: https://github.com/marijnh/CodeMirror/issues  GitHub: @peterkroon
-*/
-
-CodeMirror.defineMode("less", function(config) {
-  var indentUnit = config.indentUnit, type;
-  function ret(style, tp) {type = tp; return style;}
-
-  var selectors = /(^\:root$|^\:nth\-child$|^\:nth\-last\-child$|^\:nth\-of\-type$|^\:nth\-last\-of\-type$|^\:first\-child$|^\:last\-child$|^\:first\-of\-type$|^\:last\-of\-type$|^\:only\-child$|^\:only\-of\-type$|^\:empty$|^\:link|^\:visited$|^\:active$|^\:hover$|^\:focus$|^\:target$|^\:lang$|^\:enabled^\:disabled$|^\:checked$|^\:first\-line$|^\:first\-letter$|^\:before$|^\:after$|^\:not$|^\:required$|^\:invalid$)/;
-
-  function tokenBase(stream, state) {
-    var ch = stream.next();
-
-    if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());}
-    else if (ch == "/" && stream.eat("*")) {
-      state.tokenize = tokenCComment;
-      return tokenCComment(stream, state);
-    }
-    else if (ch == "<" && stream.eat("!")) {
-      state.tokenize = tokenSGMLComment;
-      return tokenSGMLComment(stream, state);
-    }
-    else if (ch == "=") ret(null, "compare");
-    else if (ch == "|" && stream.eat("=")) return ret(null, "compare");
-    else if (ch == "\"" || ch == "'") {
-      state.tokenize = tokenString(ch);
-      return state.tokenize(stream, state);
-    }
-    else if (ch == "/") { // e.g.: .png will not be parsed as a class
-      if(stream.eat("/")){
-        state.tokenize = tokenSComment;
-        return tokenSComment(stream, state);
-      }else{
-        if(type == "string" || type == "(")return ret("string", "string");
-        if(state.stack[state.stack.length-1] != undefined)return ret(null, ch);
-        stream.eatWhile(/[\a-zA-Z0-9\-_.\s]/);
-        if( /\/|\)|#/.test(stream.peek() || (stream.eatSpace() && stream.peek() == ")"))  || stream.eol() )return ret("string", "string"); // let url(/images/logo.png) without quotes return as string
-      }
-    }
-    else if (ch == "!") {
-      stream.match(/^\s*\w*/);
-      return ret("keyword", "important");
-    }
-    else if (/\d/.test(ch)) {
-      stream.eatWhile(/[\w.%]/);
-      return ret("number", "unit");
-    }
-    else if (/[,+<>*\/]/.test(ch)) {
-      if(stream.peek() == "=" || type == "a")return ret("string", "string");
-      return ret(null, "select-op");
-    }
-    else if (/[;{}:\[\]()~\|]/.test(ch)) {
-      if(ch == ":"){
-        stream.eatWhile(/[a-z\\\-]/);
-        if( selectors.test(stream.current()) ){
-          return ret("tag", "tag");
-        }else if(stream.peek() == ":"){//::-webkit-search-decoration
-          stream.next();
-          stream.eatWhile(/[a-z\\\-]/);
-          if(stream.current().match(/\:\:\-(o|ms|moz|webkit)\-/))return ret("string", "string");
-          if( selectors.test(stream.current().substring(1)) )return ret("tag", "tag");
-          return ret(null, ch);
-        }else{
-          return ret(null, ch);
-        }
-      }else if(ch == "~"){
-        if(type == "r")return ret("string", "string");
-      }else{
-        return ret(null, ch);
-      }
-    }
-    else if (ch == ".") {
-      if(type == "(" || type == "string")return ret("string", "string"); // allow url(../image.png)
-      stream.eatWhile(/[\a-zA-Z0-9\-_]/);
-      if(stream.peek() == " ")stream.eatSpace();
-      if(stream.peek() == ")")return ret("number", "unit");//rgba(0,0,0,.25);
-      return ret("tag", "tag");
-    }
-    else if (ch == "#") {
-      //we don't eat white-space, we want the hex color and or id only
-      stream.eatWhile(/[A-Za-z0-9]/);
-      //check if there is a proper hex color length e.g. #eee || #eeeEEE
-      if(stream.current().length == 4 || stream.current().length == 7){
-        if(stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false) != null){//is there a valid hex color value present in the current stream
-          //when not a valid hex value, parse as id
-          if(stream.current().substring(1) != stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false))return ret("atom", "tag");
-          //eat white-space
-          stream.eatSpace();
-          //when hex value declaration doesn't end with [;,] but is does with a slash/cc comment treat it as an id, just like the other hex values that don't end with[;,]
-          if( /[\/<>.(){!$%^&*_\-\\?=+\|#'~`]/.test(stream.peek()) )return ret("atom", "tag");
-          //#time { color: #aaa }
-          else if(stream.peek() == "}" )return ret("number", "unit");
-          //we have a valid hex color value, parse as id whenever an element/class is defined after the hex(id) value e.g. #eee aaa || #eee .aaa
-          else if( /[a-zA-Z\\]/.test(stream.peek()) )return ret("atom", "tag");
-          //when a hex value is on the end of a line, parse as id
-          else if(stream.eol())return ret("atom", "tag");
-          //default
-          else return ret("number", "unit");
-        }else{//when not a valid hexvalue in the current stream e.g. #footer
-          stream.eatWhile(/[\w\\\-]/);
-          return ret("atom", "tag");
-        }
-      }else{//when not a valid hexvalue length
-        stream.eatWhile(/[\w\\\-]/);
-        return ret("atom", "tag");
-      }
-    }
-    else if (ch == "&") {
-      stream.eatWhile(/[\w\-]/);
-      return ret(null, ch);
-    }
-    else {
-      stream.eatWhile(/[\w\\\-_%.{]/);
-      if(type == "string"){
-        return ret("string", "string");
-      }else if(stream.current().match(/(^http$|^https$)/) != null){
-        stream.eatWhile(/[\w\\\-_%.{:\/]/);
-        return ret("string", "string");
-      }else if(stream.peek() == "<" || stream.peek() == ">"){
-        return ret("tag", "tag");
-      }else if( /\(/.test(stream.peek()) ){
-        return ret(null, ch);
-      }else if (stream.peek() == "/" && state.stack[state.stack.length-1] != undefined){ // url(dir/center/image.png)
-        return ret("string", "string");
-      }else if( stream.current().match(/\-\d|\-.\d/) ){ // match e.g.: -5px -0.4 etc... only colorize the minus sign
-        //commment out these 2 comment if you want the minus sign to be parsed as null -500px
-        //stream.backUp(stream.current().length-1);
-        //return ret(null, ch); //console.log( stream.current() );
-        return ret("number", "unit");
-      }else if( /\/|[\s\)]/.test(stream.peek() || stream.eol() || (stream.eatSpace() && stream.peek() == "/")) && stream.current().indexOf(".") !== -1){
-        if(stream.current().substring(stream.current().length-1,stream.current().length) == "{"){
-          stream.backUp(1);
-          return ret("tag", "tag");
-        }//end if
-        stream.eatSpace();
-        if( /[{<>.a-zA-Z\/]/.test(stream.peek())  || stream.eol() )return ret("tag", "tag"); // e.g. button.icon-plus
-        return ret("string", "string"); // let url(/images/logo.png) without quotes return as string
-      }else if( stream.eol() || stream.peek() == "[" || stream.peek() == "#" || type == "tag" ){
-        if(stream.current().substring(stream.current().length-1,stream.current().length) == "{")stream.backUp(1);
-        return ret("tag", "tag");
-      }else if(type == "compare" || type == "a" || type == "("){
-        return ret("string", "string");
-      }else if(type == "|" || stream.current() == "-" || type == "["){
-        return ret(null, ch);
-      }else if(stream.peek() == ":") {
-        stream.next();
-        var t_v = stream.peek() == ":" ? true : false;
-        if(!t_v){
-          var old_pos = stream.pos;
-          var sc = stream.current().length;
-          stream.eatWhile(/[a-z\\\-]/);
-          var new_pos = stream.pos;
-          if(stream.current().substring(sc-1).match(selectors) != null){
-            stream.backUp(new_pos-(old_pos-1));
-            return ret("tag", "tag");
-          } else stream.backUp(new_pos-(old_pos-1));
-        }else{
-          stream.backUp(1);
-        }
-        if(t_v)return ret("tag", "tag"); else return ret("variable", "variable");
-      }else{
-        return ret("variable", "variable");
-      }
-    }
-  }
-
-  function tokenSComment(stream, state) { // SComment = Slash comment
-    stream.skipToEnd();
-    state.tokenize = tokenBase;
-    return ret("comment", "comment");
-  }
-
-  function tokenCComment(stream, state) {
-    var maybeEnd = false, ch;
-    while ((ch = stream.next()) != null) {
-      if (maybeEnd && ch == "/") {
-        state.tokenize = tokenBase;
-        break;
-      }
-      maybeEnd = (ch == "*");
-    }
-    return ret("comment", "comment");
-  }
-
-  function tokenSGMLComment(stream, state) {
-    var dashes = 0, ch;
-    while ((ch = stream.next()) != null) {
-      if (dashes >= 2 && ch == ">") {
-        state.tokenize = tokenBase;
-        break;
-      }
-      dashes = (ch == "-") ? dashes + 1 : 0;
-    }
-    return ret("comment", "comment");
-  }
-
-  function tokenString(quote) {
-    return function(stream, state) {
-      var escaped = false, ch;
-      while ((ch = stream.next()) != null) {
-        if (ch == quote && !escaped)
-          break;
-        escaped = !escaped && ch == "\\";
-      }
-      if (!escaped) state.tokenize = tokenBase;
-      return ret("string", "string");
-    };
-  }
-
-  return {
-    startState: function(base) {
-      return {tokenize: tokenBase,
-              baseIndent: base || 0,
-              stack: []};
-    },
-
-    token: function(stream, state) {
-      if (stream.eatSpace()) return null;
-      var style = state.tokenize(stream, state);
-
-      var context = state.stack[state.stack.length-1];
-      if (type == "hash" && context == "rule") style = "atom";
-      else if (style == "variable") {
-        if (context == "rule") style = null; //"tag"
-        else if (!context || context == "@media{") {
-          style = stream.current() == "when"  ? "variable" :
-          /[\s,|\s\)|\s]/.test(stream.peek()) ? "tag"      : type;
-        }
-      }
-
-      if (context == "rule" && /^[\{\};]$/.test(type))
-        state.stack.pop();
-      if (type == "{") {
-        if (context == "@media") state.stack[state.stack.length-1] = "@media{";
-        else state.stack.push("{");
-      }
-      else if (type == "}") state.stack.pop();
-      else if (type == "@media") state.stack.push("@media");
-      else if (context == "{" && type != "comment") state.stack.push("rule");
-      return style;
-    },
-
-    indent: function(state, textAfter) {
-      var n = state.stack.length;
-      if (/^\}/.test(textAfter))
-        n -= state.stack[state.stack.length-1] == "rule" ? 2 : 1;
-      return state.baseIndent + n * indentUnit;
-    },
-
-    electricChars: "}"
-  };
-});
-
-CodeMirror.defineMIME("text/x-less", "less");
-if (!CodeMirror.mimeModes.hasOwnProperty("text/css"))
-  CodeMirror.defineMIME("text/css", "less");
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js
index c000324b8..4b26e0461 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/livescript.js
@@ -1,19 +1,32 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
 /**
  * Link to the project's GitHub page:
  * https://github.com/duralog/CodeMirror
  */
-(function() {
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+
   CodeMirror.defineMode('livescript', function(){
-    var tokenBase, external;
-    tokenBase = function(stream, state){
-      var next_rule, nr, i$, len$, r, m;
-      if (next_rule = state.next || 'start') {
+    var tokenBase = function(stream, state) {
+      var next_rule = state.next || "start";
+      if (next_rule) {
         state.next = state.next;
-        if (Array.isArray(nr = Rules[next_rule])) {
-          for (i$ = 0, len$ = nr.length; i$ < len$; ++i$) {
-            r = nr[i$];
-            if (r.regex && (m = stream.match(r.regex))) {
-              state.next = r.next;
+        var nr = Rules[next_rule];
+        if (nr.splice) {
+          for (var i$ = 0; i$ < nr.length; ++i$) {
+            var r = nr[i$];
+            if (r.regex && stream.match(r.regex)) {
+              state.next = r.next || state.next;
               return r.token;
             }
           }
@@ -33,7 +46,7 @@
       stream.next();
       return 'error';
     };
-    external = {
+    var external = {
       startState: function(){
         return {
           next: 'start',
@@ -41,8 +54,8 @@
         };
       },
       token: function(stream, state){
-        var style;
-        style = tokenBase(stream, state);
+        while (stream.pos == stream.start)
+          var style = tokenBase(stream, state);
         state.lastToken = {
           style: style,
           indent: stream.indentation(),
@@ -51,8 +64,7 @@
         return style.replace(/\./g, ' ');
       },
       indent: function(state){
-        var indentation;
-        indentation = state.lastToken.indent;
+        var indentation = state.lastToken.indent;
         if (state.lastToken.content.match(indenter)) {
           indentation += 2;
         }
@@ -192,7 +204,7 @@
         next: 'start'
       }, {
         token: 'text',
-        regex: '.',
+        regex: '',
         next: 'start'
       }
     ],
@@ -251,17 +263,18 @@
   };
   for (var idx in Rules) {
     var r = Rules[idx];
-    if (Array.isArray(r)) {
+    if (r.splice) {
       for (var i = 0, len = r.length; i < len; ++i) {
         var rr = r[i];
-        if (rr.regex) {
+        if (typeof rr.regex === 'string') {
           Rules[idx][i].regex = new RegExp('^' + rr.regex);
         }
       }
-    } else if (r.regex) {
+    } else if (typeof rr.regex === 'string') {
       Rules[idx].regex = new RegExp('^' + r.regex);
     }
   }
-})();
 
-CodeMirror.defineMIME('text/x-livescript', 'livescript');
+  CodeMirror.defineMIME('text/x-livescript', 'livescript');
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
index 131fe831f..70e1ae18c 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/matchbrackets.js
@@ -1,72 +1,103 @@
-(function() {
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
   var ie_lt8 = /MSIE \d/.test(navigator.userAgent) &&
     (document.documentMode == null || document.documentMode < 8);
 
   var Pos = CodeMirror.Pos;
 
   var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
-  function findMatchingBracket(cm, where, strict) {
-    var state = cm.state.matchBrackets;
-    var maxScanLen = (state && state.maxScanLineLength) || 10000;
 
-    var cur = where || cm.getCursor(), line = cm.getLineHandle(cur.line), pos = cur.ch - 1;
+  function findMatchingBracket(cm, where, strict, config) {
+    var line = cm.getLineHandle(where.line), pos = where.ch - 1;
     var match = (pos >= 0 && matching[line.text.charAt(pos)]) || matching[line.text.charAt(++pos)];
     if (!match) return null;
-    var forward = match.charAt(1) == ">", d = forward ? 1 : -1;
-    if (strict && forward != (pos == cur.ch)) return null;
-    var style = cm.getTokenTypeAt(Pos(cur.line, pos + 1));
+    var dir = match.charAt(1) == ">" ? 1 : -1;
+    if (strict && (dir > 0) != (pos == where.ch)) return null;
+    var style = cm.getTokenTypeAt(Pos(where.line, pos + 1));
+
+    var found = scanForBracket(cm, Pos(where.line, pos + (dir > 0 ? 1 : 0)), dir, style || null, config);
+    if (found == null) return null;
+    return {from: Pos(where.line, pos), to: found && found.pos,
+            match: found && found.ch == match.charAt(0), forward: dir > 0};
+  }
 
-    var stack = [line.text.charAt(pos)], re = /[(){}[\]]/;
-    function scan(line, lineNo, start) {
-      if (!line.text) return;
-      var pos = forward ? 0 : line.text.length - 1, end = forward ? line.text.length : -1;
-      if (line.text.length > maxScanLen) return null;
-      if (start != null) pos = start + d;
-      for (; pos != end; pos += d) {
-        var ch = line.text.charAt(pos);
-        if (re.test(ch) && cm.getTokenTypeAt(Pos(lineNo, pos + 1)) == style) {
+  // bracketRegex is used to specify which type of bracket to scan
+  // should be a regexp, e.g. /[[\]]/
+  //
+  // Note: If "where" is on an open bracket, then this bracket is ignored.
+  //
+  // Returns false when no bracket was found, null when it reached
+  // maxScanLines and gave up
+  function scanForBracket(cm, where, dir, style, config) {
+    var maxScanLen = (config && config.maxScanLineLength) || 10000;
+    var maxScanLines = (config && config.maxScanLines) || 1000;
+
+    var stack = [];
+    var re = config && config.bracketRegex ? config.bracketRegex : /[(){}[\]]/;
+    var lineEnd = dir > 0 ? Math.min(where.line + maxScanLines, cm.lastLine() + 1)
+                          : Math.max(cm.firstLine() - 1, where.line - maxScanLines);
+    for (var lineNo = where.line; lineNo != lineEnd; lineNo += dir) {
+      var line = cm.getLine(lineNo);
+      if (!line) continue;
+      var pos = dir > 0 ? 0 : line.length - 1, end = dir > 0 ? line.length : -1;
+      if (line.length > maxScanLen) continue;
+      if (lineNo == where.line) pos = where.ch - (dir < 0 ? 1 : 0);
+      for (; pos != end; pos += dir) {
+        var ch = line.charAt(pos);
+        if (re.test(ch) && (style === undefined || cm.getTokenTypeAt(Pos(lineNo, pos + 1)) == style)) {
           var match = matching[ch];
-          if (match.charAt(1) == ">" == forward) stack.push(ch);
-          else if (stack.pop() != match.charAt(0)) return {pos: pos, match: false};
-          else if (!stack.length) return {pos: pos, match: true};
+          if ((match.charAt(1) == ">") == (dir > 0)) stack.push(ch);
+          else if (!stack.length) return {pos: Pos(lineNo, pos), ch: ch};
+          else stack.pop();
         }
       }
     }
-    for (var i = cur.line, found, e = forward ? Math.min(i + 100, cm.lineCount()) : Math.max(-1, i - 100); i != e; i+=d) {
-      if (i == cur.line) found = scan(line, i, pos);
-      else found = scan(cm.getLineHandle(i), i);
-      if (found) break;
-    }
-    return {from: Pos(cur.line, pos), to: found && Pos(i, found.pos),
-            match: found && found.match, forward: forward};
+    return lineNo - dir == (dir > 0 ? cm.lastLine() : cm.firstLine()) ? false : null;
   }
 
-  function matchBrackets(cm, autoclear) {
+  function matchBrackets(cm, autoclear, config) {
     // Disable brace matching in long lines, since it'll cause hugely slow updates
     var maxHighlightLen = cm.state.matchBrackets.maxHighlightLineLength || 1000;
-    var found = findMatchingBracket(cm);
-    if (!found || cm.getLine(found.from.line).length > maxHighlightLen ||
-       found.to && cm.getLine(found.to.line).length > maxHighlightLen)
-      return;
+    var marks = [], ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++) {
+      var match = ranges[i].empty() && findMatchingBracket(cm, ranges[i].head, false, config);
+      if (match && cm.getLine(match.from.line).length <= maxHighlightLen) {
+        var style = match.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+        marks.push(cm.markText(match.from, Pos(match.from.line, match.from.ch + 1), {className: style}));
+        if (match.to && cm.getLine(match.to.line).length <= maxHighlightLen)
+          marks.push(cm.markText(match.to, Pos(match.to.line, match.to.ch + 1), {className: style}));
+      }
+    }
+
+    if (marks.length) {
+      // Kludge to work around the IE bug from issue #1193, where text
+      // input stops going to the textare whever this fires.
+      if (ie_lt8 && cm.state.focused) cm.focus();
 
-    var style = found.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
-    var one = cm.markText(found.from, Pos(found.from.line, found.from.ch + 1), {className: style});
-    var two = found.to && cm.markText(found.to, Pos(found.to.line, found.to.ch + 1), {className: style});
-    // Kludge to work around the IE bug from issue #1193, where text
-    // input stops going to the textare whever this fires.
-    if (ie_lt8 && cm.state.focused) cm.display.input.focus();
-    var clear = function() {
-      cm.operation(function() { one.clear(); two && two.clear(); });
-    };
-    if (autoclear) setTimeout(clear, 800);
-    else return clear;
+      var clear = function() {
+        cm.operation(function() {
+          for (var i = 0; i < marks.length; i++) marks[i].clear();
+        });
+      };
+      if (autoclear) setTimeout(clear, 800);
+      else return clear;
+    }
   }
 
   var currentlyHighlighted = null;
   function doMatchBrackets(cm) {
     cm.operation(function() {
       if (currentlyHighlighted) {currentlyHighlighted(); currentlyHighlighted = null;}
-      if (!cm.somethingSelected()) currentlyHighlighted = matchBrackets(cm, false);
+      currentlyHighlighted = matchBrackets(cm, false, cm.state.matchBrackets);
     });
   }
 
@@ -80,7 +111,10 @@
   });
 
   CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);});
-  CodeMirror.defineExtension("findMatchingBracket", function(pos, strict){
-    return findMatchingBracket(this, pos, strict);
+  CodeMirror.defineExtension("findMatchingBracket", function(pos, strict, config){
+    return findMatchingBracket(this, pos, strict, config);
+  });
+  CodeMirror.defineExtension("scanForBracket", function(pos, dir, style, config){
+    return scanForBracket(this, pos, dir, style, config);
   });
-})();
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/overlay.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/overlay.js
index b7928a7bb..e1b9ed375 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/overlay.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/overlay.js
@@ -1,20 +1,34 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
 // Utility function that allows modes to be combined. The mode given
 // as the base argument takes care of most of the normal mode
 // functionality, but a second (typically simple) mode is used, which
 // can override the style of text. Both modes get to parse all of the
 // text, but when both assign a non-null style to a piece of code, the
-// overlay wins, unless the combine argument was true, in which case
-// the styles are combined.
+// overlay wins, unless the combine argument was true and not overridden,
+// or state.overlay.combineTokens was true, in which case the styles are
+// combined.
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
 
-// overlayParser is the old, deprecated name
-CodeMirror.overlayMode = CodeMirror.overlayParser = function(base, overlay, combine) {
+CodeMirror.overlayMode = function(base, overlay, combine) {
   return {
     startState: function() {
       return {
         base: CodeMirror.startState(base),
         overlay: CodeMirror.startState(overlay),
         basePos: 0, baseCur: null,
-        overlayPos: 0, overlayCur: null
+        overlayPos: 0, overlayCur: null,
+        streamSeen: null
       };
     },
     copyState: function(state) {
@@ -27,6 +41,12 @@ CodeMirror.overlayMode = CodeMirror.overlayParser = function(base, overlay, comb
     },
 
     token: function(stream, state) {
+      if (stream != state.streamSeen ||
+          Math.min(state.basePos, state.overlayPos) < stream.start) {
+        state.streamSeen = stream;
+        state.basePos = state.overlayPos = stream.start;
+      }
+
       if (stream.start == state.basePos) {
         state.baseCur = base.token(stream, state.base);
         state.basePos = stream.pos;
@@ -37,10 +57,14 @@ CodeMirror.overlayMode = CodeMirror.overlayParser = function(base, overlay, comb
         state.overlayPos = stream.pos;
       }
       stream.pos = Math.min(state.basePos, state.overlayPos);
-      if (stream.eol()) state.basePos = state.overlayPos = 0;
 
+      // state.overlay.combineTokens always takes precedence over combine,
+      // unless set to null
       if (state.overlayCur == null) return state.baseCur;
-      if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur;
+      else if (state.baseCur != null &&
+               state.overlay.combineTokens ||
+               combine && state.overlay.combineTokens == null)
+        return state.baseCur + " " + state.overlayCur;
       else return state.overlayCur;
     },
 
@@ -57,3 +81,5 @@ CodeMirror.overlayMode = CodeMirror.overlayParser = function(base, overlay, comb
     }
   };
 };
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
index 18f9dff3a..bb0c3931e 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/placeholder.js
@@ -1,13 +1,21 @@
-(function() {
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
   CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
     var prev = old && old != CodeMirror.Init;
     if (val && !prev) {
-      cm.on("focus", onFocus);
       cm.on("blur", onBlur);
       cm.on("change", onChange);
       onChange(cm);
     } else if (!val && prev) {
-      cm.off("focus", onFocus);
       cm.off("blur", onBlur);
       cm.off("change", onChange);
       clearPlaceholder(cm);
@@ -33,9 +41,6 @@
     cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
   }
 
-  function onFocus(cm) {
-    clearPlaceholder(cm);
-  }
   function onBlur(cm) {
     if (isEmpty(cm)) setPlaceholder(cm);
   }
@@ -43,7 +48,6 @@
     var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
     wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
 
-    if (cm.hasFocus()) return;
     if (empty) setPlaceholder(cm);
     else clearPlaceholder(cm);
   }
@@ -51,4 +55,4 @@
   function isEmpty(cm) {
     return (cm.lineCount() === 1) && (cm.getLine(0) === "");
   }
-})();
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js
index a7da6d718..07d2279f7 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/runmode.js
@@ -1,3 +1,16 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
 CodeMirror.runMode = function(string, modespec, callback, options) {
   var mode = CodeMirror.getMode(CodeMirror.defaults, modespec);
   var ie = /MSIE \d/.test(navigator.userAgent);
@@ -43,14 +56,17 @@ CodeMirror.runMode = function(string, modespec, callback, options) {
     };
   }
 
-  var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode);
+  var lines = CodeMirror.splitLines(string), state = (options && options.state) || CodeMirror.startState(mode);
   for (var i = 0, e = lines.length; i < e; ++i) {
     if (i) callback("\n");
     var stream = new CodeMirror.StringStream(lines[i]);
+    if (!stream.string && mode.blankLine) mode.blankLine(state);
     while (!stream.eol()) {
       var style = mode.token(stream, state);
-      callback(stream.current(), style, i, stream.start);
+      callback(stream.current(), style, i, stream.start, state);
       stream.start = stream.pos;
     }
   }
 };
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/sass.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sass.js
index 9c9a0dae0..6973ece29 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/sass.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sass.js
@@ -1,300 +1,379 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
 CodeMirror.defineMode("sass", function(config) {
-  var tokenRegexp = function(words){
+  function tokenRegexp(words) {
     return new RegExp("^" + words.join("|"));
-  };
+  }
 
   var keywords = ["true", "false", "null", "auto"];
   var keywordsRegexp = new RegExp("^" + keywords.join("|"));
 
-  var operators = ["\\(", "\\)", "=", ">", "<", "==", ">=", "<=", "\\+", "-", "\\!=", "/", "\\*", "%", "and", "or", "not"];
+  var operators = ["\\(", "\\)", "=", ">", "<", "==", ">=", "<=", "\\+", "-",
+                   "\\!=", "/", "\\*", "%", "and", "or", "not", ";","\\{","\\}",":"];
   var opRegexp = tokenRegexp(operators);
 
-  var pseudoElementsRegexp = /^::?[\w\-]+/;
+  var pseudoElementsRegexp = /^::?[a-zA-Z_][\w\-]*/;
 
-  var urlTokens = function(stream, state){
+  function urlTokens(stream, state) {
     var ch = stream.peek();
 
-    if (ch === ")"){
+    if (ch === ")") {
       stream.next();
       state.tokenizer = tokenBase;
       return "operator";
-    }else if (ch === "("){
+    } else if (ch === "(") {
       stream.next();
       stream.eatSpace();
 
       return "operator";
-    }else if (ch === "'" || ch === '"'){
+    } else if (ch === "'" || ch === '"') {
       state.tokenizer = buildStringTokenizer(stream.next());
       return "string";
-    }else{
+    } else {
       state.tokenizer = buildStringTokenizer(")", false);
       return "string";
     }
-  };
-  var multilineComment = function(stream, state) {
-    if (stream.skipTo("*/")){
-      stream.next();
-      stream.next();
-      state.tokenizer = tokenBase;
-    }else {
-      stream.next();
-    }
+  }
+  function comment(indentation, multiLine) {
+    return function(stream, state) {
+      if (stream.sol() && stream.indentation() <= indentation) {
+        state.tokenizer = tokenBase;
+        return tokenBase(stream, state);
+      }
 
-    return "comment";
-  };
+      if (multiLine && stream.skipTo("*/")) {
+        stream.next();
+        stream.next();
+        state.tokenizer = tokenBase;
+      } else {
+        stream.skipToEnd();
+      }
 
-  var buildStringTokenizer = function(quote, greedy){
-    if(greedy == null){ greedy = true; }
+      return "comment";
+    };
+  }
 
-    function stringTokenizer(stream, state){
+  function buildStringTokenizer(quote, greedy) {
+    if (greedy == null) { greedy = true; }
+
+    function stringTokenizer(stream, state) {
       var nextChar = stream.next();
       var peekChar = stream.peek();
       var previousChar = stream.string.charAt(stream.pos-2);
 
       var endingString = ((nextChar !== "\\" && peekChar === quote) || (nextChar === quote && previousChar !== "\\"));
 
-      /*
-      console.log("previousChar: " + previousChar);
-      console.log("nextChar: " + nextChar);
-      console.log("peekChar: " + peekChar);
-      console.log("ending: " + endingString);
-      */
-
-      if (endingString){
+      if (endingString) {
         if (nextChar !== quote && greedy) { stream.next(); }
         state.tokenizer = tokenBase;
         return "string";
-      }else if (nextChar === "#" && peekChar === "{"){
+      } else if (nextChar === "#" && peekChar === "{") {
         state.tokenizer = buildInterpolationTokenizer(stringTokenizer);
         stream.next();
         return "operator";
-      }else {
+      } else {
         return "string";
       }
     }
 
     return stringTokenizer;
-  };
+  }
 
-  var buildInterpolationTokenizer = function(currentTokenizer){
-    return function(stream, state){
-      if (stream.peek() === "}"){
+  function buildInterpolationTokenizer(currentTokenizer) {
+    return function(stream, state) {
+      if (stream.peek() === "}") {
         stream.next();
         state.tokenizer = currentTokenizer;
         return "operator";
-      }else{
+      } else {
         return tokenBase(stream, state);
       }
     };
-  };
+  }
 
-  var indent = function(state){
-    if (state.indentCount == 0){
+  function indent(state) {
+    if (state.indentCount == 0) {
       state.indentCount++;
       var lastScopeOffset = state.scopes[0].offset;
       var currentOffset = lastScopeOffset + config.indentUnit;
       state.scopes.unshift({ offset:currentOffset });
     }
-  };
+  }
 
-  var dedent = function(state){
-    if (state.scopes.length == 1) { return; }
+  function dedent(state) {
+    if (state.scopes.length == 1) return;
 
     state.scopes.shift();
-  };
+  }
 
-  var tokenBase = function(stream, state) {
+  function tokenBase(stream, state) {
     var ch = stream.peek();
 
-    // Single line Comment
-    if (stream.match('//')) {
-      stream.skipToEnd();
-      return "comment";
+    // Comment
+    if (stream.match("/*")) {
+      state.tokenizer = comment(stream.indentation(), true);
+      return state.tokenizer(stream, state);
     }
-
-    // Multiline Comment
-    if (stream.match('/*')){
-      state.tokenizer = multilineComment;
+    if (stream.match("//")) {
+      state.tokenizer = comment(stream.indentation(), false);
       return state.tokenizer(stream, state);
     }
 
     // Interpolation
-    if (stream.match('#{')){
-    state.tokenizer = buildInterpolationTokenizer(tokenBase);
+    if (stream.match("#{")) {
+      state.tokenizer = buildInterpolationTokenizer(tokenBase);
       return "operator";
     }
 
-    if (ch === "."){
+    // Strings
+    if (ch === '"' || ch === "'") {
       stream.next();
+      state.tokenizer = buildStringTokenizer(ch);
+      return "string";
+    }
 
-      // Match class selectors
-      if (stream.match(/^[\w-]+/)){
-        indent(state);
-        return "atom";
-      }else if (stream.peek() === "#"){
-        indent(state);
-        return "atom";
-      }else{
-        return "operator";
+    if(!state.cursorHalf){// state.cursorHalf === 0
+    // first half i.e. before : for key-value pairs
+    // including selectors
+
+      if (ch === ".") {
+        stream.next();
+        if (stream.match(/^[\w-]+/)) {
+          indent(state);
+          return "atom";
+        } else if (stream.peek() === "#") {
+          indent(state);
+          return "atom";
+        }
       }
-    }
 
-    if (ch === "#"){
-      stream.next();
+      if (ch === "#") {
+        stream.next();
+        // ID selectors
+        if (stream.match(/^[\w-]+/)) {
+          indent(state);
+          return "atom";
+        }
+        if (stream.peek() === "#") {
+          indent(state);
+          return "atom";
+        }
+      }
 
-      // Hex numbers
-      if (stream.match(/[0-9a-fA-F]{6}|[0-9a-fA-F]{3}/)){
-        return "number";
+      // Variables
+      if (ch === "$") {
+        stream.next();
+        stream.eatWhile(/[\w-]/);
+        return "variable-2";
       }
 
-      // ID selectors
-      if (stream.match(/^[\w-]+/)){
-        indent(state);
+      // Numbers
+      if (stream.match(/^-?[0-9\.]+/))
+        return "number";
+
+      // Units
+      if (stream.match(/^(px|em|in)\b/))
+        return "unit";
+
+      if (stream.match(keywordsRegexp))
+        return "keyword";
+
+      if (stream.match(/^url/) && stream.peek() === "(") {
+        state.tokenizer = urlTokens;
         return "atom";
       }
 
-      if (stream.peek() === "#"){
-        indent(state);
-        return "atom";
+      if (ch === "=") {
+        // Match shortcut mixin definition
+        if (stream.match(/^=[\w-]+/)) {
+          indent(state);
+          return "meta";
+        }
       }
-    }
 
-    // Numbers
-    if (stream.match(/^-?[0-9\.]+/)){
-      return "number";
-    }
+      if (ch === "+") {
+        // Match shortcut mixin definition
+        if (stream.match(/^\+[\w-]+/)){
+          return "variable-3";
+        }
+      }
 
-    // Units
-    if (stream.match(/^(px|em|in)\b/)){
-      return "unit";
-    }
+      if(ch === "@"){
+        if(stream.match(/@extend/)){
+          if(!stream.match(/\s*[\w]/))
+            dedent(state);
+        }
+      }
 
-    if (stream.match(keywordsRegexp)){
-      return "keyword";
-    }
 
-    if (stream.match(/^url/) && stream.peek() === "("){
-      state.tokenizer = urlTokens;
-      return "atom";
-    }
+      // Indent Directives
+      if (stream.match(/^@(else if|if|media|else|for|each|while|mixin|function)/)) {
+        indent(state);
+        return "meta";
+      }
 
-    // Variables
-    if (ch === "$"){
-      stream.next();
-      stream.eatWhile(/[\w-]/);
+      // Other Directives
+      if (ch === "@") {
+        stream.next();
+        stream.eatWhile(/[\w-]/);
+        return "meta";
+      }
+
+      if (stream.eatWhile(/[\w-]/)){
+        if(stream.match(/ *: *[\w-\+\$#!\("']/,false)){
+          return "property";
+        }
+        else if(stream.match(/ *:/,false)){
+          indent(state);
+          state.cursorHalf = 1;
+          return "atom";
+        }
+        else if(stream.match(/ *,/,false)){
+          return "atom";
+        }
+        else{
+          indent(state);
+          return "atom";
+        }
+      }
 
-      if (stream.peek() === ":"){
+      if(ch === ":"){
+        if (stream.match(pseudoElementsRegexp)){ // could be a pseudo-element
+          return "keyword";
+        }
         stream.next();
-        return "variable-2";
-      }else{
-        return "variable-3";
+        state.cursorHalf=1;
+        return "operator";
       }
-    }
 
-    if (ch === "!"){
-      stream.next();
+    } // cursorHalf===0 ends here
+    else{
 
-      if (stream.match(/^[\w]+/)){
-        return "keyword";
+      if (ch === "#") {
+        stream.next();
+        // Hex numbers
+        if (stream.match(/[0-9a-fA-F]{6}|[0-9a-fA-F]{3}/)){
+          if(!stream.peek()){
+            state.cursorHalf = 0;
+          }
+          return "number";
+        }
       }
 
-      return "operator";
-    }
+      // Numbers
+      if (stream.match(/^-?[0-9\.]+/)){
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
+        return "number";
+      }
 
-    if (ch === "="){
-      stream.next();
+      // Units
+      if (stream.match(/^(px|em|in)\b/)){
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
+        return "unit";
+      }
 
-      // Match shortcut mixin definition
-      if (stream.match(/^[\w-]+/)){
-        indent(state);
-        return "meta";
-      }else {
-        return "operator";
+      if (stream.match(keywordsRegexp)){
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
+        return "keyword";
       }
-    }
 
-    if (ch === "+"){
-      stream.next();
+      if (stream.match(/^url/) && stream.peek() === "(") {
+        state.tokenizer = urlTokens;
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
+        return "atom";
+      }
 
-      // Match shortcut mixin definition
-      if (stream.match(/^[\w-]+/)){
+      // Variables
+      if (ch === "$") {
+        stream.next();
+        stream.eatWhile(/[\w-]/);
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
         return "variable-3";
-      }else {
-        return "operator";
       }
-    }
 
-    // Indent Directives
-    if (stream.match(/^@(else if|if|media|else|for|each|while|mixin|function)/)){
-      indent(state);
-      return "meta";
-    }
+      // bang character for !important, !default, etc.
+      if (ch === "!") {
+        stream.next();
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
+        return stream.match(/^[\w]+/) ? "keyword": "operator";
+      }
 
-    // Other Directives
-    if (ch === "@"){
-      stream.next();
-      stream.eatWhile(/[\w-]/);
-      return "meta";
-    }
+      if (stream.match(opRegexp)){
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
+        return "operator";
+      }
 
-    // Strings
-    if (ch === '"' || ch === "'"){
-      stream.next();
-      state.tokenizer = buildStringTokenizer(ch);
-      return "string";
-    }
+      // attributes
+      if (stream.eatWhile(/[\w-]/)) {
+        if(!stream.peek()){
+          state.cursorHalf = 0;
+        }
+        return "attribute";
+      }
 
-    // Pseudo element selectors
-    if (ch == ':' && stream.match(pseudoElementsRegexp)){
-      return "keyword";
-    }
+      //stream.eatSpace();
+      if(!stream.peek()){
+        state.cursorHalf = 0;
+        return null;
+      }
 
-    // atoms
-    if (stream.eatWhile(/[\w-&]/)){
-      // matches a property definition
-      if (stream.peek() === ":" && !stream.match(pseudoElementsRegexp, false))
-        return "property";
-      else
-        return "atom";
-    }
+    } // else ends here
 
-    if (stream.match(opRegexp)){
+    if (stream.match(opRegexp))
       return "operator";
-    }
 
     // If we haven't returned by now, we move 1 character
     // and return an error
     stream.next();
     return null;
-  };
+  }
 
-  var tokenLexer = function(stream, state) {
-    if (stream.sol()){
-      state.indentCount = 0;
-    }
+  function tokenLexer(stream, state) {
+    if (stream.sol()) state.indentCount = 0;
     var style = state.tokenizer(stream, state);
     var current = stream.current();
 
-    if (current === "@return"){
+    if (current === "@return" || current === "}"){
       dedent(state);
     }
 
-    if (style === "atom"){
-      indent(state);
-    }
-
-    if (style !== null){
+    if (style !== null) {
       var startOfToken = stream.pos - current.length;
+
       var withCurrentIndent = startOfToken + (config.indentUnit * state.indentCount);
 
       var newScopes = [];
 
-      for (var i = 0; i < state.scopes.length; i++){
+      for (var i = 0; i < state.scopes.length; i++) {
         var scope = state.scopes[i];
 
-        if (scope.offset <= withCurrentIndent){
+        if (scope.offset <= withCurrentIndent)
           newScopes.push(scope);
-        }
       }
 
       state.scopes = newScopes;
@@ -302,13 +381,16 @@ CodeMirror.defineMode("sass", function(config) {
 
 
     return style;
-  };
+  }
 
   return {
     startState: function() {
       return {
         tokenizer: tokenBase,
-        scopes: [{offset: 0, type: 'sass'}],
+        scopes: [{offset: 0, type: "sass"}],
+        indentCount: 0,
+        cursorHalf: 0,  // cursor half tells us if cursor lies after (1)
+                        // or before (0) colon (well... more or less)
         definedVars: [],
         definedMixins: []
       };
@@ -328,3 +410,5 @@ CodeMirror.defineMode("sass", function(config) {
 });
 
 CodeMirror.defineMIME("text/x-sass", "sass");
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/searchcursor.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/searchcursor.js
index 3da3f04e8..b70242ee4 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/searchcursor.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/searchcursor.js
@@ -1,4 +1,15 @@
-(function(){
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
   var Pos = CodeMirror.Pos;
 
   function SearchCursor(doc, query, pos, caseFold) {
@@ -47,6 +58,7 @@
                   match: match};
       };
     } else { // String query
+      var origQuery = query;
       if (caseFold) query = query.toLowerCase();
       var fold = caseFold ? function(str){return str.toLowerCase();} : function(str){return str;};
       var target = query.split("\n");
@@ -58,33 +70,45 @@
           this.matches = function() {};
         } else {
           this.matches = function(reverse, pos) {
-            var line = fold(doc.getLine(pos.line)), len = query.length, match;
-            if (reverse ? (pos.ch >= len && (match = line.lastIndexOf(query, pos.ch - len)) != -1)
-                        : (match = line.indexOf(query, pos.ch)) != -1)
-              return {from: Pos(pos.line, match),
-                      to: Pos(pos.line, match + len)};
+            if (reverse) {
+              var orig = doc.getLine(pos.line).slice(0, pos.ch), line = fold(orig);
+              var match = line.lastIndexOf(query);
+              if (match > -1) {
+                match = adjustPos(orig, line, match);
+                return {from: Pos(pos.line, match), to: Pos(pos.line, match + origQuery.length)};
+              }
+             } else {
+               var orig = doc.getLine(pos.line).slice(pos.ch), line = fold(orig);
+               var match = line.indexOf(query);
+               if (match > -1) {
+                 match = adjustPos(orig, line, match) + pos.ch;
+                 return {from: Pos(pos.line, match), to: Pos(pos.line, match + origQuery.length)};
+               }
+            }
           };
         }
       } else {
+        var origTarget = origQuery.split("\n");
         this.matches = function(reverse, pos) {
-          var ln = pos.line, idx = (reverse ? target.length - 1 : 0), match = target[idx], line = fold(doc.getLine(ln));
-          var offsetA = (reverse ? line.indexOf(match) + match.length : line.lastIndexOf(match));
-          if (reverse ? offsetA >= pos.ch || offsetA != match.length
-              : offsetA <= pos.ch || offsetA != line.length - match.length)
-            return;
-          for (;;) {
-            if (reverse ? !ln : ln == doc.lineCount() - 1) return;
-            line = fold(doc.getLine(ln += reverse ? -1 : 1));
-            match = target[reverse ? --idx : ++idx];
-            if (idx > 0 && idx < target.length - 1) {
-              if (line != match) return;
-              else continue;
-            }
-            var offsetB = (reverse ? line.lastIndexOf(match) : line.indexOf(match) + match.length);
-            if (reverse ? offsetB != line.length - match.length : offsetB != match.length)
-              return;
-            var start = Pos(pos.line, offsetA), end = Pos(ln, offsetB);
-            return {from: reverse ? end : start, to: reverse ? start : end};
+          var last = target.length - 1;
+          if (reverse) {
+            if (pos.line - (target.length - 1) < doc.firstLine()) return;
+            if (fold(doc.getLine(pos.line).slice(0, origTarget[last].length)) != target[target.length - 1]) return;
+            var to = Pos(pos.line, origTarget[last].length);
+            for (var ln = pos.line - 1, i = last - 1; i >= 1; --i, --ln)
+              if (target[i] != fold(doc.getLine(ln))) return;
+            var line = doc.getLine(ln), cut = line.length - origTarget[0].length;
+            if (fold(line.slice(cut)) != target[0]) return;
+            return {from: Pos(ln, cut), to: to};
+          } else {
+            if (pos.line + (target.length - 1) > doc.lastLine()) return;
+            var line = doc.getLine(pos.line), cut = line.length - origTarget[0].length;
+            if (fold(line.slice(cut)) != target[0]) return;
+            var from = Pos(pos.line, cut);
+            for (var ln = pos.line + 1, i = 1; i < last; ++i, ++ln)
+              if (target[i] != fold(doc.getLine(ln))) return;
+            if (fold(doc.getLine(ln).slice(0, origTarget[last].length)) != target[last]) return;
+            return {from: from, to: Pos(ln, origTarget[last].length)};
           }
         };
       }
@@ -106,7 +130,6 @@
 
       for (;;) {
         if (this.pos = this.matches(reverse, pos)) {
-          if (!this.pos.from || !this.pos.to) { console.log(this.matches, this.pos); }
           this.atOccurrence = true;
           return this.pos.match || true;
         }
@@ -125,19 +148,42 @@
     from: function() {if (this.atOccurrence) return this.pos.from;},
     to: function() {if (this.atOccurrence) return this.pos.to;},
 
-    replace: function(newText) {
+    replace: function(newText, origin) {
       if (!this.atOccurrence) return;
       var lines = CodeMirror.splitLines(newText);
-      this.doc.replaceRange(lines, this.pos.from, this.pos.to);
+      this.doc.replaceRange(lines, this.pos.from, this.pos.to, origin);
       this.pos.to = Pos(this.pos.from.line + lines.length - 1,
                         lines[lines.length - 1].length + (lines.length == 1 ? this.pos.from.ch : 0));
     }
   };
 
+  // Maps a position in a case-folded line back to a position in the original line
+  // (compensating for codepoints increasing in number during folding)
+  function adjustPos(orig, folded, pos) {
+    if (orig.length == folded.length) return pos;
+    for (var pos1 = Math.min(pos, orig.length);;) {
+      var len1 = orig.slice(0, pos1).toLowerCase().length;
+      if (len1 < pos) ++pos1;
+      else if (len1 > pos) --pos1;
+      else return pos1;
+    }
+  }
+
   CodeMirror.defineExtension("getSearchCursor", function(query, pos, caseFold) {
     return new SearchCursor(this.doc, query, pos, caseFold);
   });
   CodeMirror.defineDocExtension("getSearchCursor", function(query, pos, caseFold) {
     return new SearchCursor(this, query, pos, caseFold);
   });
-})();
+
+  CodeMirror.defineExtension("selectMatches", function(query, caseFold) {
+    var ranges = [];
+    var cur = this.getSearchCursor(query, this.getCursor("from"), caseFold);
+    while (cur.findNext()) {
+      if (CodeMirror.cmpPos(cur.to(), this.getCursor("to")) > 0) break;
+      ranges.push({anchor: cur.from(), head: cur.to()});
+    }
+    if (ranges.length)
+      this.setSelections(ranges, 0);
+  });
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/sql.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sql.js
index 9016cc7aa..a90827715 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/sql.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/sql.js
@@ -1,3 +1,16 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
 CodeMirror.defineMode("sql", function(config, parserConfig) {
   "use strict";
 
@@ -178,9 +191,14 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
     indent: function(state, textAfter) {
       var cx = state.context;
       if (!cx) return CodeMirror.Pass;
-      if (cx.align) return cx.col + (textAfter.charAt(0) == cx.type ? 0 : 1);
-      else return cx.indent + config.indentUnit;
-    }
+      var closing = textAfter.charAt(0) == cx.type;
+      if (cx.align) return cx.col + (closing ? 0 : 1);
+      else return cx.indent + (closing ? 0 : config.indentUnit);
+    },
+
+    blockCommentStart: "/*",
+    blockCommentEnd: "*/",
+    lineComment: support.commentSlashSlash ? "//" : support.commentHash ? "#" : null
   };
 });
 
@@ -195,7 +213,8 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
     while ((ch = stream.next()) != null) {
       if (ch == "`" && !stream.eat("`")) return "variable-2";
     }
-    return null;
+    stream.backUp(stream.current().length - 1);
+    return stream.eatWhile(/\w/) ? "variable-2" : null;
   }
 
   // variable token
@@ -238,7 +257,7 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
   }
 
   // these keywords are used by all SQL dialects (however, a mode can still overwrite it)
-  var sqlKeywords = "alter and as asc between by count create delete desc distinct drop from having in insert into is join like not on or order select set table union update values where ";
+  var sqlKeywords = "alter and as asc between by count create delete desc distinct drop from group having in insert into is join like not on or order select set table union update values where ";
 
   // turn a space-separated list into an array
   function set(str) {
@@ -258,11 +277,24 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
     support: set("ODBCdotTable doubleQuote binaryNumber hexNumber")
   });
 
+  CodeMirror.defineMIME("text/x-mssql", {
+    name: "sql",
+    client: set("charset clear connect edit ego exit go help nopager notee nowarning pager print prompt quit rehash source status system tee"),
+    keywords: set(sqlKeywords + "begin trigger proc view index for add constraint key primary foreign collate clustered nonclustered declare"),
+    builtin: set("bigint numeric bit smallint decimal smallmoney int tinyint money float real char varchar text nchar nvarchar ntext binary varbinary image cursor timestamp hierarchyid uniqueidentifier sql_variant xml table "),
+    atoms: set("false true null unknown"),
+    operatorChars: /^[*+\-%<>!=]/,
+    dateSQL: set("date datetimeoffset datetime2 smalldatetime datetime time"),
+    hooks: {
+      "@":   hookVar
+    }
+  });
+
   CodeMirror.defineMIME("text/x-mysql", {
     name: "sql",
     client: set("charset clear connect edit ego exit go help nopager notee nowarning pager print prompt quit rehash source status system tee"),
-    keywords: set(sqlKeywords + "accessible action add after algorithm all analyze asensitive at authors auto_increment autocommit avg avg_row_length before binary binlog both btree cache call cascade cascaded case catalog_name chain change changed character check checkpoint checksum class_origin client_statistics close coalesce code collate collation collations column columns comment commit committed completion concurrent condition connection consistent constraint contains continue contributors convert cross current_date current_time current_timestamp current_user cursor data database databases day_hour day_microsecond day_minute day_second deallocate dec declare default delay_key_write delayed delimiter des_key_file describe deterministic dev_pop dev_samp deviance directory disable discard distinctrow div dual dumpfile each elseif enable enclosed end ends engine engines enum errors escape escaped even event events every execute exists exit explain extended fast fetch field fields first flush for force foreign found_rows full fulltext function general global grant grants group groupby_concat handler hash help high_priority hosts hour_microsecond hour_minute hour_second if ignore ignore_server_ids import index index_statistics infile inner innodb inout insensitive insert_method install interval invoker isolation iterate key keys kill language last leading leave left level limit linear lines list load local localtime localtimestamp lock logs low_priority master master_heartbeat_period master_ssl_verify_server_cert masters match max max_rows maxvalue message_text middleint migrate min min_rows minute_microsecond minute_second mod mode modifies modify mutex mysql_errno natural next no no_write_to_binlog offline offset one online open optimize option optionally out outer outfile pack_keys parser partition partitions password phase plugin plugins prepare preserve prev primary privileges procedure processlist profile profiles purge query quick range read read_write reads real rebuild recover references regexp relaylog release remove rename reorganize repair repeatable replace require resignal restrict resume return returns revoke right rlike rollback rollup row row_format rtree savepoint schedule schema schema_name schemas second_microsecond security sensitive separator serializable server session share show signal slave slow smallint snapshot soname spatial specific sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result sqlexception sqlstate sqlwarning ssl start starting starts status std stddev stddev_pop stddev_samp storage straight_join subclass_origin sum suspend table_name table_statistics tables tablespace temporary terminated to trailing transaction trigger triggers truncate uncommitted undo uninstall unique unlock upgrade usage use use_frm user user_resources user_statistics using utc_date utc_time utc_timestamp value variables varying view views warnings when while with work write xa xor year_month zerofill begin do then else loop repeat"),
-    builtin: set("bool boolean bit blob decimal double enum float long longblob longtext medium mediumblob mediumint mediumtext time timestamp tinyblob tinyint tinytext text bigint int int1 int2 int3 int4 int8 integer float float4 float8 double char varbinary varchar varcharacter precision date datetime year unsigned signed numeric"),
+    keywords: set(sqlKeywords + "accessible action add after algorithm all analyze asensitive at authors auto_increment autocommit avg avg_row_length before binary binlog both btree cache call cascade cascaded case catalog_name chain change changed character check checkpoint checksum class_origin client_statistics close coalesce code collate collation collations column columns comment commit committed completion concurrent condition connection consistent constraint contains continue contributors convert cross current current_date current_time current_timestamp current_user cursor data database databases day_hour day_microsecond day_minute day_second deallocate dec declare default delay_key_write delayed delimiter des_key_file describe deterministic dev_pop dev_samp deviance diagnostics directory disable discard distinctrow div dual dumpfile each elseif enable enclosed end ends engine engines enum errors escape escaped even event events every execute exists exit explain extended fast fetch field fields first flush for force foreign found_rows full fulltext function general get global grant grants group group_concat handler hash help high_priority hosts hour_microsecond hour_minute hour_second if ignore ignore_server_ids import index index_statistics infile inner innodb inout insensitive insert_method install interval invoker isolation iterate key keys kill language last leading leave left level limit linear lines list load local localtime localtimestamp lock logs low_priority master master_heartbeat_period master_ssl_verify_server_cert masters match max max_rows maxvalue message_text middleint migrate min min_rows minute_microsecond minute_second mod mode modifies modify mutex mysql_errno natural next no no_write_to_binlog offline offset one online open optimize option optionally out outer outfile pack_keys parser partition partitions password phase plugin plugins prepare preserve prev primary privileges procedure processlist profile profiles purge query quick range read read_write reads real rebuild recover references regexp relaylog release remove rename reorganize repair repeatable replace require resignal restrict resume return returns revoke right rlike rollback rollup row row_format rtree savepoint schedule schema schema_name schemas second_microsecond security sensitive separator serializable server session share show signal slave slow smallint snapshot soname spatial specific sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result sqlexception sqlstate sqlwarning ssl start starting starts status std stddev stddev_pop stddev_samp storage straight_join subclass_origin sum suspend table_name table_statistics tables tablespace temporary terminated to trailing transaction trigger triggers truncate uncommitted undo uninstall unique unlock upgrade usage use use_frm user user_resources user_statistics using utc_date utc_time utc_timestamp value variables varying view views warnings when while with work write xa xor year_month zerofill begin do then else loop repeat"),
+    builtin: set("bool boolean bit blob decimal double float long longblob longtext medium mediumblob mediumint mediumtext time timestamp tinyblob tinyint tinytext text bigint int int1 int2 int3 int4 int8 integer float float4 float8 double char varbinary varchar varcharacter precision date datetime year unsigned signed numeric"),
     atoms: set("false true null unknown"),
     operatorChars: /^[*+\-%<>!=&|^]/,
     dateSQL: set("date time timestamp"),
@@ -277,8 +309,8 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
   CodeMirror.defineMIME("text/x-mariadb", {
     name: "sql",
     client: set("charset clear connect edit ego exit go help nopager notee nowarning pager print prompt quit rehash source status system tee"),
-    keywords: set(sqlKeywords + "accessible action add after algorithm all always analyze asensitive at authors auto_increment autocommit avg avg_row_length before binary binlog both btree cache call cascade cascaded case catalog_name chain change changed character check checkpoint checksum class_origin client_statistics close coalesce code collate collation collations column columns comment commit committed completion concurrent condition connection consistent constraint contains continue contributors convert cross current_date current_time current_timestamp current_user cursor data database databases day_hour day_microsecond day_minute day_second deallocate dec declare default delay_key_write delayed delimiter des_key_file describe deterministic dev_pop dev_samp deviance directory disable discard distinctrow div dual dumpfile each elseif enable enclosed end ends engine engines enum errors escape escaped even event events every execute exists exit explain extended fast fetch field fields first flush for force foreign found_rows full fulltext function general generated global grant grants group groupby_concat handler hard hash help high_priority hosts hour_microsecond hour_minute hour_second if ignore ignore_server_ids import index index_statistics infile inner innodb inout insensitive insert_method install interval invoker isolation iterate key keys kill language last leading leave left level limit linear lines list load local localtime localtimestamp lock logs low_priority master master_heartbeat_period master_ssl_verify_server_cert masters match max max_rows maxvalue message_text middleint migrate min min_rows minute_microsecond minute_second mod mode modifies modify mutex mysql_errno natural next no no_write_to_binlog offline offset one online open optimize option optionally out outer outfile pack_keys parser partition partitions password persistent phase plugin plugins prepare preserve prev primary privileges procedure processlist profile profiles purge query quick range read read_write reads real rebuild recover references regexp relaylog release remove rename reorganize repair repeatable replace require resignal restrict resume return returns revoke right rlike rollback rollup row row_format rtree savepoint schedule schema schema_name schemas second_microsecond security sensitive separator serializable server session share show signal slave slow smallint snapshot soft soname spatial specific sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result sqlexception sqlstate sqlwarning ssl start starting starts status std stddev stddev_pop stddev_samp storage straight_join subclass_origin sum suspend table_name table_statistics tables tablespace temporary terminated to trailing transaction trigger triggers truncate uncommitted undo uninstall unique unlock upgrade usage use use_frm user user_resources user_statistics using utc_date utc_time utc_timestamp value variables varying view views virtual warnings when while with work write xa xor year_month zerofill begin do then else loop repeat"),
-    builtin: set("bool boolean bit blob decimal double enum float long longblob longtext medium mediumblob mediumint mediumtext time timestamp tinyblob tinyint tinytext text bigint int int1 int2 int3 int4 int8 integer float float4 float8 double char varbinary varchar varcharacter precision date datetime year unsigned signed numeric"),
+    keywords: set(sqlKeywords + "accessible action add after algorithm all always analyze asensitive at authors auto_increment autocommit avg avg_row_length before binary binlog both btree cache call cascade cascaded case catalog_name chain change changed character check checkpoint checksum class_origin client_statistics close coalesce code collate collation collations column columns comment commit committed completion concurrent condition connection consistent constraint contains continue contributors convert cross current current_date current_time current_timestamp current_user cursor data database databases day_hour day_microsecond day_minute day_second deallocate dec declare default delay_key_write delayed delimiter des_key_file describe deterministic dev_pop dev_samp deviance diagnostics directory disable discard distinctrow div dual dumpfile each elseif enable enclosed end ends engine engines enum errors escape escaped even event events every execute exists exit explain extended fast fetch field fields first flush for force foreign found_rows full fulltext function general generated get global grant grants group groupby_concat handler hard hash help high_priority hosts hour_microsecond hour_minute hour_second if ignore ignore_server_ids import index index_statistics infile inner innodb inout insensitive insert_method install interval invoker isolation iterate key keys kill language last leading leave left level limit linear lines list load local localtime localtimestamp lock logs low_priority master master_heartbeat_period master_ssl_verify_server_cert masters match max max_rows maxvalue message_text middleint migrate min min_rows minute_microsecond minute_second mod mode modifies modify mutex mysql_errno natural next no no_write_to_binlog offline offset one online open optimize option optionally out outer outfile pack_keys parser partition partitions password persistent phase plugin plugins prepare preserve prev primary privileges procedure processlist profile profiles purge query quick range read read_write reads real rebuild recover references regexp relaylog release remove rename reorganize repair repeatable replace require resignal restrict resume return returns revoke right rlike rollback rollup row row_format rtree savepoint schedule schema schema_name schemas second_microsecond security sensitive separator serializable server session share show shutdown signal slave slow smallint snapshot soft soname spatial specific sql sql_big_result sql_buffer_result sql_cache sql_calc_found_rows sql_no_cache sql_small_result sqlexception sqlstate sqlwarning ssl start starting starts status std stddev stddev_pop stddev_samp storage straight_join subclass_origin sum suspend table_name table_statistics tables tablespace temporary terminated to trailing transaction trigger triggers truncate uncommitted undo uninstall unique unlock upgrade usage use use_frm user user_resources user_statistics using utc_date utc_time utc_timestamp value variables varying view views virtual warnings when while with work write xa xor year_month zerofill begin do then else loop repeat"),
+    builtin: set("bool boolean bit blob decimal double float long longblob longtext medium mediumblob mediumint mediumtext time timestamp tinyblob tinyint tinytext text bigint int int1 int2 int3 int4 int8 integer float float4 float8 double char varbinary varchar varcharacter precision date datetime year unsigned signed numeric"),
     atoms: set("false true null unknown"),
     operatorChars: /^[*+\-%<>!=&|^]/,
     dateSQL: set("date time timestamp"),
@@ -295,9 +327,9 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
   CodeMirror.defineMIME("text/x-cassandra", {
     name: "sql",
     client: { },
-    keywords: set("use select from using consistency where limit first reversed first and in insert into values using consistency ttl update set delete truncate begin batch apply create keyspace with columnfamily primary key index on drop alter type add any one quorum all local_quorum each_quorum"),
-    builtin: set("ascii bigint blob boolean counter decimal double float int text timestamp uuid varchar varint"),
-    atoms: set("false true"),
+    keywords: set("add all allow alter and any apply as asc authorize batch begin by clustering columnfamily compact consistency count create custom delete desc distinct drop each_quorum exists filtering from grant if in index insert into key keyspace keyspaces level limit local_one local_quorum modify nan norecursive nosuperuser not of on one order password permission permissions primary quorum rename revoke schema select set storage superuser table three to token truncate ttl two type unlogged update use user users using values where with writetime"),
+    builtin: set("ascii bigint blob boolean counter decimal double float frozen inet int list map static text timestamp timeuuid tuple uuid varchar varint"),
+    atoms: set("false true infinity NaN"),
     operatorChars: /^[<>=]/,
     dateSQL: { },
     support: set("commentSlashSlash decimallessFloat"),
@@ -308,23 +340,33 @@ CodeMirror.defineMode("sql", function(config, parserConfig) {
   CodeMirror.defineMIME("text/x-plsql", {
     name:       "sql",
     client:     set("appinfo arraysize autocommit autoprint autorecovery autotrace blockterminator break btitle cmdsep colsep compatibility compute concat copycommit copytypecheck define describe echo editfile embedded escape exec execute feedback flagger flush heading headsep instance linesize lno loboffset logsource long longchunksize markup native newpage numformat numwidth pagesize pause pno recsep recsepchar release repfooter repheader serveroutput shiftinout show showmode size spool sqlblanklines sqlcase sqlcode sqlcontinue sqlnumber sqlpluscompatibility sqlprefix sqlprompt sqlterminator suffix tab term termout time timing trimout trimspool ttitle underline verify version wrap"),
-    keywords:   set("abort accept access add all alter and any array arraylen as asc assert assign at attributes audit authorization avg base_table begin between binary_integer body boolean by case cast char char_base check close cluster clusters colauth column comment commit compress connect connected constant constraint crash create current currval cursor data_base database date dba deallocate debugoff debugon decimal declare default definition delay delete desc digits dispose distinct do drop else elsif enable end entry escape exception exception_init exchange exclusive exists exit external fast fetch file for force form from function generic goto grant group having identified if immediate in increment index indexes indicator initial initrans insert interface intersect into is key level library like limited local lock log logging long loop master maxextents maxtrans member minextents minus mislabel mode modify multiset new next no noaudit nocompress nologging noparallel not nowait number_base object of off offline on online only open option or order out package parallel partition pctfree pctincrease pctused pls_integer positive positiven pragma primary prior private privileges procedure public raise range raw read rebuild record ref references refresh release rename replace resource restrict return returning reverse revoke rollback row rowid rowlabel rownum rows run savepoint schema segment select separate session set share snapshot some space split sql start statement storage subtype successful synonym tabauth table tables tablespace task terminate then to trigger truncate type union unique unlimited unrecoverable unusable update use using validate value values variable view views when whenever where while with work"),
-    functions:  set("abs acos add_months ascii asin atan atan2 average bfilename ceil chartorowid chr concat convert cos cosh count decode deref dual dump dup_val_on_index empty error exp false floor found glb greatest hextoraw initcap instr instrb isopen last_day least lenght lenghtb ln lower lpad ltrim lub make_ref max min mod months_between new_time next_day nextval nls_charset_decl_len nls_charset_id nls_charset_name nls_initcap nls_lower nls_sort nls_upper nlssort no_data_found notfound null nvl others power rawtohex reftohex round rowcount rowidtochar rpad rtrim sign sin sinh soundex sqlcode sqlerrm sqrt stddev substr substrb sum sysdate tan tanh to_char to_date to_label to_multi_byte to_number to_single_byte translate true trunc uid upper user userenv variance vsize"),
-    builtin:    set("bfile blob character clob dec float int integer mlslabel natural naturaln nchar nclob number numeric nvarchar2 real rowtype signtype smallint string varchar varchar2"),
+    keywords:   set("abort accept access add all alter and any array arraylen as asc assert assign at attributes audit authorization avg base_table begin between binary_integer body boolean by case cast char char_base check close cluster clusters colauth column comment commit compress connect connected constant constraint crash create current currval cursor data_base database date dba deallocate debugoff debugon decimal declare default definition delay delete desc digits dispose distinct do drop else elseif elsif enable end entry escape exception exception_init exchange exclusive exists exit external fast fetch file for force form from function generic goto grant group having identified if immediate in increment index indexes indicator initial initrans insert interface intersect into is key level library like limited local lock log logging long loop master maxextents maxtrans member minextents minus mislabel mode modify multiset new next no noaudit nocompress nologging noparallel not nowait number_base object of off offline on online only open option or order out package parallel partition pctfree pctincrease pctused pls_integer positive positiven pragma primary prior private privileges procedure public raise range raw read rebuild record ref references refresh release rename replace resource restrict return returning returns reverse revoke rollback row rowid rowlabel rownum rows run savepoint schema segment select separate session set share snapshot some space split sql start statement storage subtype successful synonym tabauth table tables tablespace task terminate then to trigger truncate type union unique unlimited unrecoverable unusable update use using validate value values variable view views when whenever where while with work"),
+    builtin:    set("abs acos add_months ascii asin atan atan2 average bfile bfilename bigserial bit blob ceil character chartorowid chr clob concat convert cos cosh count dec decode deref dual dump dup_val_on_index empty error exp false float floor found glb greatest hextoraw initcap instr instrb int integer isopen last_day least lenght lenghtb ln lower lpad ltrim lub make_ref max min mlslabel mod months_between natural naturaln nchar nclob new_time next_day nextval nls_charset_decl_len nls_charset_id nls_charset_name nls_initcap nls_lower nls_sort nls_upper nlssort no_data_found notfound null number numeric nvarchar2 nvl others power rawtohex real reftohex round rowcount rowidtochar rowtype rpad rtrim serial sign signtype sin sinh smallint soundex sqlcode sqlerrm sqrt stddev string substr substrb sum sysdate tan tanh to_char text to_date to_label to_multi_byte to_number to_single_byte translate true trunc uid unlogged upper user userenv varchar varchar2 variance varying vsize xml"),
     operatorChars: /^[*+\-%<>!=~]/,
     dateSQL:    set("date time timestamp"),
     support:    set("doubleQuote nCharCast zerolessFloat binaryNumber hexNumber")
   });
+
+  // Created to support specific hive keywords
+  CodeMirror.defineMIME("text/x-hive", {
+    name: "sql",
+    keywords: set("select alter $elem$ $key$ $value$ add after all analyze and archive as asc before between binary both bucket buckets by cascade case cast change cluster clustered clusterstatus collection column columns comment compute concatenate continue create cross cursor data database databases dbproperties deferred delete delimited desc describe directory disable distinct distribute drop else enable end escaped exclusive exists explain export extended external false fetch fields fileformat first format formatted from full function functions grant group having hold_ddltime idxproperties if import in index indexes inpath inputdriver inputformat insert intersect into is items join keys lateral left like limit lines load local location lock locks mapjoin materialized minus msck no_drop nocompress not of offline on option or order out outer outputdriver outputformat overwrite partition partitioned partitions percent plus preserve procedure purge range rcfile read readonly reads rebuild recordreader recordwriter recover reduce regexp rename repair replace restrict revoke right rlike row schema schemas semi sequencefile serde serdeproperties set shared show show_database sort sorted ssl statistics stored streamtable table tables tablesample tblproperties temporary terminated textfile then tmp to touch transform trigger true unarchive undo union uniquejoin unlock update use using utc utc_tmestamp view when where while with"),
+    builtin: set("bool boolean long timestamp tinyint smallint bigint int float double date datetime unsigned string array struct map uniontype"),
+    atoms: set("false true null unknown"),
+    operatorChars: /^[*+\-%<>!=]/,
+    dateSQL: set("date timestamp"),
+    support: set("ODBCdotTable doubleQuote binaryNumber hexNumber")
+  });
 }());
 
+});
+
 /*
   How Properties of Mime Types are used by SQL Mode
   =================================================
 
   keywords:
     A list of keywords you want to be highlighted.
-  functions:
-    A list of function names you want to be highlighted.
   builtin:
     A list of builtin types you want to be highlighted (if you want types to be of class "builtin" instead of "keyword").
   operatorChars:
diff --git a/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js b/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
index 07db29903..5ad21720f 100644
--- a/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
+++ b/Source/WebInspectorUI/UserInterface/External/CodeMirror/xml.js
@@ -1,12 +1,27 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+"use strict";
+
 CodeMirror.defineMode("xml", function(config, parserConfig) {
   var indentUnit = config.indentUnit;
   var multilineTagIndentFactor = parserConfig.multilineTagIndentFactor || 1;
+  var multilineTagIndentPastTag = parserConfig.multilineTagIndentPastTag;
+  if (multilineTagIndentPastTag == null) multilineTagIndentPastTag = true;
 
   var Kludges = parserConfig.htmlMode ? {
     autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
                       'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
                       'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
-                      'track': true, 'wbr': true},
+                      'track': true, 'wbr': true, 'menuitem': true},
     implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
                        'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
                        'th': true, 'tr': true},
@@ -32,19 +47,21 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
     },
     doNotIndent: {"pre": true},
     allowUnquoted: true,
-    allowMissing: true
+    allowMissing: true,
+    caseFold: true
   } : {
     autoSelfClosers: {},
     implicitlyClosed: {},
     contextGrabbers: {},
     doNotIndent: {},
     allowUnquoted: false,
-    allowMissing: false
+    allowMissing: false,
+    caseFold: false
   };
   var alignCDATA = parserConfig.alignCDATA;
 
   // Return variables for tokenizers
-  var tagName, type;
+  var type, setStyle;
 
   function inText(stream, state) {
     function chain(parser) {
@@ -71,14 +88,9 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
         state.tokenize = inBlock("meta", "?>");
         return "meta";
       } else {
-        var isClose = stream.eat("/");
-        tagName = "";
-        var c;
-        while ((c = stream.eat(/[^\s\u00a0=<>\"\'\/?]/))) tagName += c;
-        if (!tagName) return "error";
-        type = isClose ? "closeTag" : "openTag";
+        type = stream.eat("/") ? "closeTag" : "openTag";
         state.tokenize = inTag;
-        return "tag";
+        return "tag bracket";
       }
     } else if (ch == "&") {
       var ok;
@@ -97,29 +109,35 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
       return null;
     }
   }
+  inText.isInText = true;
 
   function inTag(stream, state) {
     var ch = stream.next();
     if (ch == ">" || (ch == "/" && stream.eat(">"))) {
       state.tokenize = inText;
       type = ch == ">" ? "endTag" : "selfcloseTag";
-      return "tag";
+      return "tag bracket";
     } else if (ch == "=") {
       type = "equals";
       return null;
     } else if (ch == "<") {
-      return "error";
+      state.tokenize = inText;
+      state.state = baseState;
+      state.tagName = state.tagStart = null;
+      var next = state.tokenize(stream, state);
+      return next ? next + " tag error" : "tag error";
     } else if (/[\'\"]/.test(ch)) {
       state.tokenize = inAttribute(ch);
+      state.stringStartCol = stream.column();
       return state.tokenize(stream, state);
     } else {
-      stream.eatWhile(/[^\s\u00a0=<>\"\']/);
+      stream.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/);
       return "word";
     }
   }
 
   function inAttribute(quote) {
-    return function(stream, state) {
+    var closure = function(stream, state) {
       while (!stream.eol()) {
         if (stream.next() == quote) {
           state.tokenize = inTag;
@@ -128,6 +146,8 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
       }
       return "string";
     };
+    closure.isInAttribute = true;
+    return closure;
   }
 
   function inBlock(style, terminator) {
@@ -163,156 +183,192 @@ CodeMirror.defineMode("xml", function(config, parserConfig) {
     };
   }
 
-  var curState, curStream, setStyle;
-  function pass() {
-    for (var i = arguments.length - 1; i >= 0; i--) curState.cc.push(arguments[i]);
+  function Context(state, tagName, startOfLine) {
+    this.prev = state.context;
+    this.tagName = tagName;
+    this.indent = state.indented;
+    this.startOfLine = startOfLine;
+    if (Kludges.doNotIndent.hasOwnProperty(tagName) || (state.context && state.context.noIndent))
+      this.noIndent = true;
   }
-  function cont() {
-    pass.apply(null, arguments);
-    return true;
+  function popContext(state) {
+    if (state.context) state.context = state.context.prev;
   }
-
-  function pushContext(tagName, startOfLine) {
-    var noIndent = Kludges.doNotIndent.hasOwnProperty(tagName) || (curState.context && curState.context.noIndent);
-    curState.context = {
-      prev: curState.context,
-      tagName: tagName,
-      indent: curState.indented,
-      startOfLine: startOfLine,
-      noIndent: noIndent
-    };
-  }
-  function popContext() {
-    if (curState.context) curState.context = curState.context.prev;
+  function maybePopContext(state, nextTagName) {
+    var parentTagName;
+    while (true) {
+      if (!state.context) {
+        return;
+      }
+      parentTagName = state.context.tagName;
+      if (!Kludges.contextGrabbers.hasOwnProperty(parentTagName) ||
+          !Kludges.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
+        return;
+      }
+      popContext(state);
+    }
   }
 
-  function element(type) {
+  function baseState(type, stream, state) {
     if (type == "openTag") {
-      curState.tagName = tagName;
-      curState.tagStart = curStream.column();
-      return cont(attributes, endtag(curState.startOfLine));
+      state.tagStart = stream.column();
+      return tagNameState;
     } else if (type == "closeTag") {
-      var err = false;
-      if (curState.context) {
-        if (curState.context.tagName != tagName) {
-          if (Kludges.implicitlyClosed.hasOwnProperty(curState.context.tagName.toLowerCase())) {
-            popContext();
-          }
-          err = !curState.context || curState.context.tagName != tagName;
-        }
-      } else {
-        err = true;
-      }
-      if (err) setStyle = "error";
-      return cont(endclosetag(err));
+      return closeTagNameState;
+    } else {
+      return baseState;
     }
-    return cont();
-  }
-  function endtag(startOfLine) {
-    return function(type) {
-      var tagName = curState.tagName;
-      curState.tagName = curState.tagStart = null;
-      if (type == "selfcloseTag" ||
-          (type == "endTag" && Kludges.autoSelfClosers.hasOwnProperty(tagName.toLowerCase()))) {
-        maybePopContext(tagName.toLowerCase());
-        return cont();
-      }
-      if (type == "endTag") {
-        maybePopContext(tagName.toLowerCase());
-        pushContext(tagName, startOfLine);
-        return cont();
-      }
-      return cont();
-    };
   }
-  function endclosetag(err) {
-    return function(type) {
-      if (err) setStyle = "error";
-      if (type == "endTag") { popContext(); return cont(); }
+  function tagNameState(type, stream, state) {
+    if (type == "word") {
+      state.tagName = stream.current();
+      setStyle = "tag";
+      return attrState;
+    } else {
       setStyle = "error";
-      return cont(arguments.callee);
-    };
+      return tagNameState;
+    }
   }
-  function maybePopContext(nextTagName) {
-    var parentTagName;
-    while (true) {
-      if (!curState.context) {
-        return;
-      }
-      parentTagName = curState.context.tagName.toLowerCase();
-      if (!Kludges.contextGrabbers.hasOwnProperty(parentTagName) ||
-          !Kludges.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
-        return;
+  function closeTagNameState(type, stream, state) {
+    if (type == "word") {
+      var tagName = stream.current();
+      if (state.context && state.context.tagName != tagName &&
+          Kludges.implicitlyClosed.hasOwnProperty(state.context.tagName))
+        popContext(state);
+      if (state.context && state.context.tagName == tagName) {
+        setStyle = "tag";
+        return closeState;
+      } else {
+        setStyle = "tag error";
+        return closeStateErr;
       }
-      popContext();
+    } else {
+      setStyle = "error";
+      return closeStateErr;
     }
   }
 
-  function attributes(type) {
-    if (type == "word") {setStyle = "attribute"; return cont(attribute, attributes);}
-    if (type == "endTag" || type == "selfcloseTag") return pass();
+  function closeState(type, _stream, state) {
+    if (type != "endTag") {
+      setStyle = "error";
+      return closeState;
+    }
+    popContext(state);
+    return baseState;
+  }
+  function closeStateErr(type, stream, state) {
     setStyle = "error";
-    return cont(attributes);
+    return closeState(type, stream, state);
   }
-  function attribute(type) {
-    if (type == "equals") return cont(attvalue, attributes);
+
+  function attrState(type, _stream, state) {
+    if (type == "word") {
+      setStyle = "attribute";
+      return attrEqState;
+    } else if (type == "endTag" || type == "selfcloseTag") {
+      var tagName = state.tagName, tagStart = state.tagStart;
+      state.tagName = state.tagStart = null;
+      if (type == "selfcloseTag" ||
+          Kludges.autoSelfClosers.hasOwnProperty(tagName)) {
+        maybePopContext(state, tagName);
+      } else {
+        maybePopContext(state, tagName);
+        state.context = new Context(state, tagName, tagStart == state.indented);
+      }
+      return baseState;
+    }
+    setStyle = "error";
+    return attrState;
+  }
+  function attrEqState(type, stream, state) {
+    if (type == "equals") return attrValueState;
     if (!Kludges.allowMissing) setStyle = "error";
-    else if (type == "word") setStyle = "attribute";
-    return (type == "endTag" || type == "selfcloseTag") ? pass() : cont();
+    return attrState(type, stream, state);
   }
-  function attvalue(type) {
-    if (type == "string") return cont(attvaluemaybe);
-    if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return cont();}
+  function attrValueState(type, stream, state) {
+    if (type == "string") return attrContinuedState;
+    if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return attrState;}
     setStyle = "error";
-    return (type == "endTag" || type == "selfCloseTag") ? pass() : cont();
+    return attrState(type, stream, state);
   }
-  function attvaluemaybe(type) {
-    if (type == "string") return cont(attvaluemaybe);
-    else return pass();
+  function attrContinuedState(type, stream, state) {
+    if (type == "string") return attrContinuedState;
+    return attrState(type, stream, state);
   }
 
   return {
     startState: function() {
-      return {tokenize: inText, cc: [], indented: 0, startOfLine: true, tagName: null, tagStart: null, context: null};
+      return {tokenize: inText,
+              state: baseState,
+              indented: 0,
+              tagName: null, tagStart: null,
+              context: null};
     },
 
     token: function(stream, state) {
-      if (!state.tagName && stream.sol()) {
-        state.startOfLine = true;
+      if (!state.tagName && stream.sol())
         state.indented = stream.indentation();
-      }
-      if (stream.eatSpace()) return null;
 
-      setStyle = type = tagName = null;
+      if (stream.eatSpace()) return null;
+      type = null;
       var style = state.tokenize(stream, state);
-      state.type = type;
       if ((style || type) && style != "comment") {
-        curState = state; curStream = stream;
-        while (true) {
-          var comb = state.cc.pop() || element;
-          if (comb(type || style)) break;
-        }
+        setStyle = null;
+        state.state = state.state(type || style, stream, state);
+        if (setStyle)
+          style = setStyle == "error" ? style + " error" : setStyle;
       }
-      state.startOfLine = false;
-      return setStyle || style;
+      return style;
     },
 
     indent: function(state, textAfter, fullLine) {
       var context = state.context;
-      if ((state.tokenize != inTag && state.tokenize != inText) ||
-          context && context.noIndent)
+      // Indent multi-line strings (e.g. css).
+      if (state.tokenize.isInAttribute) {
+        if (state.tagStart == state.indented)
+          return state.stringStartCol + 1;
+        else
+          return state.indented + indentUnit;
+      }
+      if (context && context.noIndent) return CodeMirror.Pass;
+      if (state.tokenize != inTag && state.tokenize != inText)
         return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
-      if (state.tagName) return state.tagStart + indentUnit * multilineTagIndentFactor;
+      // Indent the starts of attribute names.
+      if (state.tagName) {
+        if (multilineTagIndentPastTag)
+          return state.tagStart + state.tagName.length + 2;
+        else
+          return state.tagStart + indentUnit * multilineTagIndentFactor;
+      }
       if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
-      if (context && /^<\//.test(textAfter))
-        context = context.prev;
+      var tagAfter = textAfter && /^<(\/)?([\w_:\.-]*)/.exec(textAfter);
+      if (tagAfter && tagAfter[1]) { // Closing tag spotted
+        while (context) {
+          if (context.tagName == tagAfter[2]) {
+            context = context.prev;
+            break;
+          } else if (Kludges.implicitlyClosed.hasOwnProperty(context.tagName)) {
+            context = context.prev;
+          } else {
+            break;
+          }
+        }
+      } else if (tagAfter) { // Opening tag spotted
+        while (context) {
+          var grabbers = Kludges.contextGrabbers[context.tagName];
+          if (grabbers && grabbers.hasOwnProperty(tagAfter[2]))
+            context = context.prev;
+          else
+            break;
+        }
+      }
       while (context && !context.startOfLine)
         context = context.prev;
       if (context) return context.indent + indentUnit;
       else return 0;
     },
 
-    electricChars: "/",
+    electricInput: /<\/[\s\w:]+>$/,
     blockCommentStart: "<!--",
     blockCommentEnd: "-->",
 
@@ -325,3 +381,5 @@ CodeMirror.defineMIME("text/xml", "xml");
 CodeMirror.defineMIME("application/xml", "xml");
 if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
   CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
+
+});
diff --git a/Source/WebInspectorUI/UserInterface/External/ESLint/LICENSE b/Source/WebInspectorUI/UserInterface/External/ESLint/LICENSE
new file mode 100644
index 000000000..d5f046fdc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/ESLint/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2014 TJ Holowaychuk <tj@vision-media.ca>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the 'Software'), to deal
+in the Software without restriction, including without limitation the rights to 
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/Source/WebInspectorUI/UserInterface/External/ESLint/eslint.js b/Source/WebInspectorUI/UserInterface/External/ESLint/eslint.js
new file mode 100644
index 000000000..3b123a2f4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/ESLint/eslint.js
@@ -0,0 +1,18223 @@
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.eslint=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+module.exports={
+    "builtin": {
+        "NaN": false,
+        "Infinity": false,
+        "undefined": false,
+        "eval": false,
+
+        "parseFloat": false,
+        "parseInt": false,
+        "isNaN": false,
+        "isFinite": false,
+
+        "decodeURI": false,
+        "decodeURIComponent": false,
+        "encodeURI": false,
+        "encodeURIComponent": false,
+
+        "Object": false,
+        "Function": false,
+        "Array": false,
+        "String": false,
+        "Boolean": false,
+        "Map": false,
+        "Number": false,
+        "Date": false,
+        "RegExp": false,
+        "Error": false,
+        "EvalError": false,
+        "RangeError": false,
+        "ReferenceError": false,
+        "Set": false,
+        "SyntaxError": false,
+        "TypeError": false,
+        "URIError": false,
+        "WeakMap": false,
+        "WeakSet": false,
+
+        "ArrayBuffer": false,
+        "Float32Array": false,
+        "Float64Array": false,
+        "Int16Array": false,
+        "Int32Array": false,
+        "Int8Array": false,
+        "Uint16Array": false,
+        "Uint32Array": false,
+        "Uint8Array": false,
+        "Uint8ClampedArray": false,
+
+        "Math": false,
+        "JSON": false,
+
+        "toString": false,
+        "hasOwnProperty": false,
+        "valueOf": false,
+        "propertyIsEnumerable": false,
+        "constructor": false,
+        "isPrototypeOf": false,
+        "toLocaleString": false
+    },
+
+    "browser": {
+        "globals": {
+            "addEventListener": false,
+            "applicationCache": false,
+            "atob": false,
+            "Audio": false,
+            "Blob": false,
+            "blur": false,
+            "btoa": false,
+            "cancelAnimationFrame": false,
+            "clearInterval": false,
+            "clearTimeout": false,
+            "close": false,
+            "closed": false,
+            "crypto": false,
+            "DataView": false,
+            "defaultStatus": false,
+            "devicePixelRatio": false,
+            "dispatchEvent": false,
+            "document": false,
+            "DOMParser": false,
+            "Element": false,
+            "FileReader": false,
+            "find": false,
+            "focus": false,
+            "FormData": false,
+            "frameElement": false,
+            "frames": false,
+            "getComputedStyle": false,
+            "getSelection": false,
+            "history": false,
+            "HTMLAnchorElement": false,
+            "HTMLBaseElement": false,
+            "HTMLBodyElement": false,
+            "HTMLBRElement": false,
+            "HTMLButtonElement": false,
+            "HTMLCanvasElement": false,
+            "HTMLDirectoryElement": false,
+            "HTMLDivElement": false,
+            "HTMLDListElement": false,
+            "HTMLElement": false,
+            "HTMLFieldSetElement": false,
+            "HTMLFontElement": false,
+            "HTMLFormElement": false,
+            "HTMLFrameElement": false,
+            "HTMLFrameSetElement": false,
+            "HTMLHeadElement": false,
+            "HTMLHeadingElement": false,
+            "HTMLHRElement": false,
+            "HTMLHtmlElement": false,
+            "HTMLIFrameElement": false,
+            "HTMLImageElement": false,
+            "HTMLInputElement": false,
+            "HTMLLabelElement": false,
+            "HTMLLegendElement": false,
+            "HTMLLIElement": false,
+            "HTMLLinkElement": false,
+            "HTMLMapElement": false,
+            "HTMLMenuElement": false,
+            "HTMLMetaElement": false,
+            "HTMLModElement": false,
+            "HTMLObjectElement": false,
+            "HTMLOListElement": false,
+            "HTMLOptGroupElement": false,
+            "HTMLOptionElement": false,
+            "HTMLParagraphElement": false,
+            "HTMLParamElement": false,
+            "HTMLPreElement": false,
+            "HTMLQuoteElement": false,
+            "HTMLScriptElement": false,
+            "HTMLSelectElement": false,
+            "HTMLStyleElement": false,
+            "HTMLTableCaptionElement": false,
+            "HTMLTableCellElement": false,
+            "HTMLTableColElement": false,
+            "HTMLTableElement": false,
+            "HTMLTableRowElement": false,
+            "HTMLTableSectionElement": false,
+            "HTMLTextAreaElement": false,
+            "HTMLTitleElement": false,
+            "HTMLUListElement": false,
+            "HTMLVideoElement": false,
+            "Image": false,
+            "indexedDB": false,
+            "innerHeight": false,
+            "innerWidth": false,
+            "Intl": false,
+            "length": false,
+            "localStorage": false,
+            "location": false,
+            "matchMedia": false,
+            "MessageChannel": false,
+            "MessageEvent": false,
+            "MessagePort": false,
+            "moveBy": false,
+            "moveTo": false,
+            "MutationObserver": false,
+            "name": false,
+            "navigator": false,
+            "Node": false,
+            "NodeFilter": false,
+            "onbeforeunload": true,
+            "onblur": true,
+            "onerror": true,
+            "onfocus": true,
+            "onload": true,
+            "onresize": true,
+            "onunload": true,
+            "open": false,
+            "openDatabase": false,
+            "opener": false,
+            "Option": false,
+            "outerHeight": false,
+            "outerWidth": false,
+            "pageXOffset": false,
+            "pageYOffset": false,
+            "parent": false,
+            "postMessage": false,
+            "print": false,
+            "removeEventListener": false,
+            "requestAnimationFrame": false,
+            "resizeBy": false,
+            "resizeTo": false,
+            "screen": false,
+            "screenX": false,
+            "screenY": false,
+            "scroll": false,
+            "scrollbars": false,
+            "scrollBy": false,
+            "scrollTo": false,
+            "scrollX": false,
+            "scrollY": false,
+            "self": false,
+            "sessionStorage": false,
+            "setInterval": false,
+            "setTimeout": false,
+            "SharedWorker": false,
+            "showModalDialog": false,
+            "stop": false,
+            "SVGAElement": false,
+            "SVGAltGlyphDefElement": false,
+            "SVGAltGlyphElement": false,
+            "SVGAltGlyphItemElement": false,
+            "SVGAngle": false,
+            "SVGAnimateColorElement": false,
+            "SVGAnimatedAngle": false,
+            "SVGAnimatedBoolean": false,
+            "SVGAnimatedEnumeration": false,
+            "SVGAnimatedInteger": false,
+            "SVGAnimatedLength": false,
+            "SVGAnimatedLengthList": false,
+            "SVGAnimatedNumber": false,
+            "SVGAnimatedNumberList": false,
+            "SVGAnimatedPreserveAspectRatio": false,
+            "SVGAnimatedRect": false,
+            "SVGAnimatedString": false,
+            "SVGAnimatedTransformList": false,
+            "SVGAnimateElement": false,
+            "SVGAnimateMotionElement": false,
+            "SVGAnimateTransformElement": false,
+            "SVGAnimationElement": false,
+            "SVGCircleElement": false,
+            "SVGClipPathElement": false,
+            "SVGColor": false,
+            "SVGComponentTransferFunctionElement": false,
+            "SVGCursorElement": false,
+            "SVGDefsElement": false,
+            "SVGDescElement": false,
+            "SVGDocument": false,
+            "SVGElement": false,
+            "SVGElementInstance": false,
+            "SVGElementInstanceList": false,
+            "SVGEllipseElement": false,
+            "SVGFEBlendElement": false,
+            "SVGFEColorMatrixElement": false,
+            "SVGFEComponentTransferElement": false,
+            "SVGFECompositeElement": false,
+            "SVGFEConvolveMatrixElement": false,
+            "SVGFEDiffuseLightingElement": false,
+            "SVGFEDisplacementMapElement": false,
+            "SVGFEDistantLightElement": false,
+            "SVGFEFloodElement": false,
+            "SVGFEFuncAElement": false,
+            "SVGFEFuncBElement": false,
+            "SVGFEFuncGElement": false,
+            "SVGFEFuncRElement": false,
+            "SVGFEGaussianBlurElement": false,
+            "SVGFEImageElement": false,
+            "SVGFEMergeElement": false,
+            "SVGFEMergeNodeElement": false,
+            "SVGFEMorphologyElement": false,
+            "SVGFEOffsetElement": false,
+            "SVGFEPointLightElement": false,
+            "SVGFESpecularLightingElement": false,
+            "SVGFESpotLightElement": false,
+            "SVGFETileElement": false,
+            "SVGFETurbulenceElement": false,
+            "SVGFilterElement": false,
+            "SVGFontElement": false,
+            "SVGFontFaceElement": false,
+            "SVGFontFaceFormatElement": false,
+            "SVGFontFaceNameElement": false,
+            "SVGFontFaceSrcElement": false,
+            "SVGFontFaceUriElement": false,
+            "SVGForeignObjectElement": false,
+            "SVGGElement": false,
+            "SVGGlyphElement": false,
+            "SVGGlyphRefElement": false,
+            "SVGGradientElement": false,
+            "SVGHKernElement": false,
+            "SVGImageElement": false,
+            "SVGLength": false,
+            "SVGLengthList": false,
+            "SVGLinearGradientElement": false,
+            "SVGLineElement": false,
+            "SVGMarkerElement": false,
+            "SVGMaskElement": false,
+            "SVGMatrix": false,
+            "SVGMetadataElement": false,
+            "SVGMissingGlyphElement": false,
+            "SVGMPathElement": false,
+            "SVGNumber": false,
+            "SVGNumberList": false,
+            "SVGPaint": false,
+            "SVGPathElement": false,
+            "SVGPathSeg": false,
+            "SVGPathSegArcAbs": false,
+            "SVGPathSegArcRel": false,
+            "SVGPathSegClosePath": false,
+            "SVGPathSegCurvetoCubicAbs": false,
+            "SVGPathSegCurvetoCubicRel": false,
+            "SVGPathSegCurvetoCubicSmoothAbs": false,
+            "SVGPathSegCurvetoCubicSmoothRel": false,
+            "SVGPathSegCurvetoQuadraticAbs": false,
+            "SVGPathSegCurvetoQuadraticRel": false,
+            "SVGPathSegCurvetoQuadraticSmoothAbs": false,
+            "SVGPathSegCurvetoQuadraticSmoothRel": false,
+            "SVGPathSegLinetoAbs": false,
+            "SVGPathSegLinetoHorizontalAbs": false,
+            "SVGPathSegLinetoHorizontalRel": false,
+            "SVGPathSegLinetoRel": false,
+            "SVGPathSegLinetoVerticalAbs": false,
+            "SVGPathSegLinetoVerticalRel": false,
+            "SVGPathSegList": false,
+            "SVGPathSegMovetoAbs": false,
+            "SVGPathSegMovetoRel": false,
+            "SVGPatternElement": false,
+            "SVGPoint": false,
+            "SVGPointList": false,
+            "SVGPolygonElement": false,
+            "SVGPolylineElement": false,
+            "SVGPreserveAspectRatio": false,
+            "SVGRadialGradientElement": false,
+            "SVGRect": false,
+            "SVGRectElement": false,
+            "SVGRenderingIntent": false,
+            "SVGScriptElement": false,
+            "SVGSetElement": false,
+            "SVGStopElement": false,
+            "SVGStringList": false,
+            "SVGStyleElement": false,
+            "SVGSVGElement": false,
+            "SVGSwitchElement": false,
+            "SVGSymbolElement": false,
+            "SVGTextContentElement": false,
+            "SVGTextElement": false,
+            "SVGTextPathElement": false,
+            "SVGTextPositioningElement": false,
+            "SVGTitleElement": false,
+            "SVGTransform": false,
+            "SVGTransformList": false,
+            "SVGTRefElement": false,
+            "SVGTSpanElement": false,
+            "SVGUnitTypes": false,
+            "SVGUseElement": false,
+            "SVGViewElement": false,
+            "SVGViewSpec": false,
+            "SVGVKernElement": false,
+            "top": false,
+            "WebSocket": false,
+            "window": false,
+            "Worker": false,
+            "XMLHttpRequest": false,
+            "XMLSerializer": false,
+            "XPathEvaluator": false,
+            "XPathExpression": false,
+            "XPathResult": false
+        }
+    },
+
+    "node": {
+        "globals": {
+            "__filename": false,
+            "__dirname": false,
+            "Buffer": false,
+            "DataView": false,
+            "console": false,
+            "exports": true,
+            "GLOBAL": false,
+            "global": false,
+            "module": false,
+            "process": false,
+            "require": false,
+            "setTimeout": false,
+            "clearTimeout": false,
+            "setInterval": false,
+            "clearInterval": false,
+            "setImmediate": false,
+            "clearImmediate": false
+        },
+
+        "rules": {
+            "no-catch-shadow": 0,
+            "no-console": 0,
+            "no-mixed-requires": 2,
+            "no-new-require": 2,
+            "no-path-concat": 2,
+            "no-process-exit": 2,
+            "global-strict": [0, "always"],
+            "handle-callback-err": [2, "err"]
+        }
+    },
+
+    "amd": {
+        "globals": {
+            "require": false,
+            "define": false
+        }
+    },
+
+    "mocha": {
+        "globals": {
+            "describe": false,
+            "it": false,
+            "before": false,
+            "after": false,
+            "beforeEach": false,
+            "afterEach": false,
+
+            "suite": false,
+            "test": false,
+            "setup": false,
+            "teardown": false,
+            "suiteSetup": false,
+            "suiteTeardown": false
+        }
+    },
+
+    "jasmine": {
+        "globals": {
+            "afterEach": false,
+            "beforeEach": false,
+            "describe": false,
+            "expect": false,
+            "it": false,
+            "jasmine": false,
+            "pending": false,
+            "spyOn": false,
+            "waits": false,
+            "waitsFor": false,
+            "xdescribe": false,
+            "xit": false
+        }
+    }
+}
+
+},{}],2:[function(require,module,exports){
+module.exports={
+    "env": {
+        "browser": false,
+        "node": false,
+        "amd": false,
+        "mocha": false,
+        "jasmine": false
+    },
+
+    "rules": {
+        "no-alert": 2,
+        "no-array-constructor": 2,
+        "no-bitwise": 0,
+        "no-caller": 2,
+        "no-catch-shadow": 2,
+        "no-comma-dangle": 2,
+        "no-cond-assign": 2,
+        "no-console": 2,
+        "no-constant-condition": 2,
+        "no-control-regex": 2,
+        "no-debugger": 2,
+        "no-delete-var": 2,
+        "no-div-regex": 0,
+        "no-dupe-keys": 2,
+        "no-else-return": 0,
+        "no-empty": 2,
+        "no-empty-class": 2,
+        "no-empty-label": 2,
+        "no-eq-null": 0,
+        "no-eval": 2,
+        "no-ex-assign": 2,
+        "no-extend-native": 2,
+        "no-extra-bind": 2,
+        "no-extra-boolean-cast": 2,
+        "no-extra-parens": 0,
+        "no-extra-semi": 2,
+        "no-extra-strict": 2,
+        "no-fallthrough": 2,
+        "no-floating-decimal": 0,
+        "no-func-assign": 2,
+        "no-implied-eval": 2,
+        "no-inner-declarations": [2, "functions"],
+        "no-invalid-regexp": 2,
+        "no-iterator": 2,
+        "no-label-var": 2,
+        "no-labels": 2,
+        "no-lone-blocks": 2,
+        "no-lonely-if": 0,
+        "no-loop-func": 2,
+        "no-mixed-requires": [0, false],
+        "no-mixed-spaces-and-tabs": [2, false],
+        "no-multi-spaces": 2,
+        "no-multi-str": 2,
+        "no-multiple-empty-lines": [0, {"max": 2}],
+        "no-native-reassign": 2,
+        "no-negated-in-lhs": 2,
+        "no-nested-ternary": 0,
+        "no-new": 2,
+        "no-new-func": 2,
+        "no-new-object": 2,
+        "no-new-require": 0,
+        "no-new-wrappers": 2,
+        "no-obj-calls": 2,
+        "no-octal": 2,
+        "no-octal-escape": 2,
+        "no-path-concat": 0,
+        "no-plusplus": 0,
+        "no-process-env": 0,
+        "no-process-exit": 2,
+        "no-proto": 2,
+        "no-redeclare": 2,
+        "no-regex-spaces": 2,
+        "no-reserved-keys": 0,
+        "no-restricted-modules": 0,
+        "no-return-assign": 2,
+        "no-script-url": 2,
+        "no-self-compare": 0,
+        "no-sequences": 2,
+        "no-shadow": 2,
+        "no-shadow-restricted-names": 2,
+        "no-space-before-semi": 2,
+        "no-spaced-func": 2,
+        "no-sparse-arrays": 2,
+        "no-sync": 0,
+        "no-ternary": 0,
+        "no-trailing-spaces": 2,
+        "no-undef": 2,
+        "no-undef-init": 2,
+        "no-undefined": 0,
+        "no-underscore-dangle": 2,
+        "no-unreachable": 2,
+        "no-unused-expressions": 2,
+        "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
+        "no-use-before-define": 2,
+        "no-void": 0,
+        "no-warning-comments": [0, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],
+        "no-with": 2,
+        "no-wrap-func": 2,
+
+        "block-scoped-var": 0,
+        "brace-style": [0, "1tbs"],
+        "camelcase": 2,
+        "comma-spacing": 2,
+        "comma-style": 0,
+        "complexity": [0, 11],
+        "consistent-return": 2,
+        "consistent-this": [0, "that"],
+        "curly": [2, "all"],
+        "default-case": 0,
+        "dot-notation": 2,
+        "eol-last": 2,
+        "eqeqeq": 2,
+        "func-names": 0,
+        "func-style": [0, "declaration"],
+        "global-strict": [2, "never"],
+        "guard-for-in": 0,
+        "handle-callback-err": 0,
+        "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+        "max-depth": [0, 4],
+        "max-len": [0, 80, 4],
+        "max-nested-callbacks": [0, 2],
+        "max-params": [0, 3],
+        "max-statements": [0, 10],
+        "new-cap": 2,
+        "new-parens": 2,
+        "one-var": 0,
+        "padded-blocks": 0,
+        "quote-props": 0,
+        "quotes": [2, "double"],
+        "radix": 0,
+        "semi": 2,
+        "sort-vars": 0,
+        "space-after-keywords": [0, "always"],
+        "space-before-blocks": [0, "always"],
+        "space-in-brackets": [0, "never"],
+        "space-in-parens": [0, "never"],
+        "space-infix-ops": 2,
+        "space-return-throw-case": 2,
+        "space-unary-word-ops": 0,
+        "spaced-line-comment": [0, "always"],
+        "strict": 2,
+        "use-isnan": 2,
+        "valid-jsdoc": 0,
+        "valid-typeof": 2,
+        "vars-on-top": 0,
+        "wrap-iife": 0,
+        "wrap-regex": 0,
+        "yoda": [2, "never"]
+    }
+}
+
+},{}],3:[function(require,module,exports){
+// Copyright Joyent, Inc. and other Node contributors.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to permit
+// persons to whom the Software is furnished to do so, subject to the
+// following conditions:
+//
+// The above copyright notice and this permission notice shall be included
+// in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+// USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+function EventEmitter() {
+  this._events = this._events || {};
+  this._maxListeners = this._maxListeners || undefined;
+}
+module.exports = EventEmitter;
+
+// Backwards-compat with node 0.10.x
+EventEmitter.EventEmitter = EventEmitter;
+
+EventEmitter.prototype._events = undefined;
+EventEmitter.prototype._maxListeners = undefined;
+
+// By default EventEmitters will print a warning if more than 10 listeners are
+// added to it. This is a useful default which helps finding memory leaks.
+EventEmitter.defaultMaxListeners = 10;
+
+// Obviously not all Emitters should be limited to 10. This function allows
+// that to be increased. Set to zero for unlimited.
+EventEmitter.prototype.setMaxListeners = function(n) {
+  if (!isNumber(n) || n < 0 || isNaN(n))
+    throw TypeError('n must be a positive number');
+  this._maxListeners = n;
+  return this;
+};
+
+EventEmitter.prototype.emit = function(type) {
+  var er, handler, len, args, i, listeners;
+
+  if (!this._events)
+    this._events = {};
+
+  // If there is no 'error' event listener then throw.
+  if (type === 'error') {
+    if (!this._events.error ||
+        (isObject(this._events.error) && !this._events.error.length)) {
+      er = arguments[1];
+      if (er instanceof Error) {
+        throw er; // Unhandled 'error' event
+      }
+      throw TypeError('Uncaught, unspecified "error" event.');
+    }
+  }
+
+  handler = this._events[type];
+
+  if (isUndefined(handler))
+    return false;
+
+  if (isFunction(handler)) {
+    switch (arguments.length) {
+      // fast cases
+      case 1:
+        handler.call(this);
+        break;
+      case 2:
+        handler.call(this, arguments[1]);
+        break;
+      case 3:
+        handler.call(this, arguments[1], arguments[2]);
+        break;
+      // slower
+      default:
+        len = arguments.length;
+        args = new Array(len - 1);
+        for (i = 1; i < len; i++)
+          args[i - 1] = arguments[i];
+        handler.apply(this, args);
+    }
+  } else if (isObject(handler)) {
+    len = arguments.length;
+    args = new Array(len - 1);
+    for (i = 1; i < len; i++)
+      args[i - 1] = arguments[i];
+
+    listeners = handler.slice();
+    len = listeners.length;
+    for (i = 0; i < len; i++)
+      listeners[i].apply(this, args);
+  }
+
+  return true;
+};
+
+EventEmitter.prototype.addListener = function(type, listener) {
+  var m;
+
+  if (!isFunction(listener))
+    throw TypeError('listener must be a function');
+
+  if (!this._events)
+    this._events = {};
+
+  // To avoid recursion in the case that type === "newListener"! Before
+  // adding it to the listeners, first emit "newListener".
+  if (this._events.newListener)
+    this.emit('newListener', type,
+              isFunction(listener.listener) ?
+              listener.listener : listener);
+
+  if (!this._events[type])
+    // Optimize the case of one listener. Don't need the extra array object.
+    this._events[type] = listener;
+  else if (isObject(this._events[type]))
+    // If we've already got an array, just append.
+    this._events[type].push(listener);
+  else
+    // Adding the second element, need to change to array.
+    this._events[type] = [this._events[type], listener];
+
+  // Check for listener leak
+  if (isObject(this._events[type]) && !this._events[type].warned) {
+    var m;
+    if (!isUndefined(this._maxListeners)) {
+      m = this._maxListeners;
+    } else {
+      m = EventEmitter.defaultMaxListeners;
+    }
+
+    if (m && m > 0 && this._events[type].length > m) {
+      this._events[type].warned = true;
+      console.error('(node) warning: possible EventEmitter memory ' +
+                    'leak detected. %d listeners added. ' +
+                    'Use emitter.setMaxListeners() to increase limit.',
+                    this._events[type].length);
+      if (typeof console.trace === 'function') {
+        // not supported in IE 10
+        console.trace();
+      }
+    }
+  }
+
+  return this;
+};
+
+EventEmitter.prototype.on = EventEmitter.prototype.addListener;
+
+EventEmitter.prototype.once = function(type, listener) {
+  if (!isFunction(listener))
+    throw TypeError('listener must be a function');
+
+  var fired = false;
+
+  function g() {
+    this.removeListener(type, g);
+
+    if (!fired) {
+      fired = true;
+      listener.apply(this, arguments);
+    }
+  }
+
+  g.listener = listener;
+  this.on(type, g);
+
+  return this;
+};
+
+// emits a 'removeListener' event iff the listener was removed
+EventEmitter.prototype.removeListener = function(type, listener) {
+  var list, position, length, i;
+
+  if (!isFunction(listener))
+    throw TypeError('listener must be a function');
+
+  if (!this._events || !this._events[type])
+    return this;
+
+  list = this._events[type];
+  length = list.length;
+  position = -1;
+
+  if (list === listener ||
+      (isFunction(list.listener) && list.listener === listener)) {
+    delete this._events[type];
+    if (this._events.removeListener)
+      this.emit('removeListener', type, listener);
+
+  } else if (isObject(list)) {
+    for (i = length; i-- > 0;) {
+      if (list[i] === listener ||
+          (list[i].listener && list[i].listener === listener)) {
+        position = i;
+        break;
+      }
+    }
+
+    if (position < 0)
+      return this;
+
+    if (list.length === 1) {
+      list.length = 0;
+      delete this._events[type];
+    } else {
+      list.splice(position, 1);
+    }
+
+    if (this._events.removeListener)
+      this.emit('removeListener', type, listener);
+  }
+
+  return this;
+};
+
+EventEmitter.prototype.removeAllListeners = function(type) {
+  var key, listeners;
+
+  if (!this._events)
+    return this;
+
+  // not listening for removeListener, no need to emit
+  if (!this._events.removeListener) {
+    if (arguments.length === 0)
+      this._events = {};
+    else if (this._events[type])
+      delete this._events[type];
+    return this;
+  }
+
+  // emit removeListener for all listeners on all events
+  if (arguments.length === 0) {
+    for (key in this._events) {
+      if (key === 'removeListener') continue;
+      this.removeAllListeners(key);
+    }
+    this.removeAllListeners('removeListener');
+    this._events = {};
+    return this;
+  }
+
+  listeners = this._events[type];
+
+  if (isFunction(listeners)) {
+    this.removeListener(type, listeners);
+  } else {
+    // LIFO order
+    while (listeners.length)
+      this.removeListener(type, listeners[listeners.length - 1]);
+  }
+  delete this._events[type];
+
+  return this;
+};
+
+EventEmitter.prototype.listeners = function(type) {
+  var ret;
+  if (!this._events || !this._events[type])
+    ret = [];
+  else if (isFunction(this._events[type]))
+    ret = [this._events[type]];
+  else
+    ret = this._events[type].slice();
+  return ret;
+};
+
+EventEmitter.listenerCount = function(emitter, type) {
+  var ret;
+  if (!emitter._events || !emitter._events[type])
+    ret = 0;
+  else if (isFunction(emitter._events[type]))
+    ret = 1;
+  else
+    ret = emitter._events[type].length;
+  return ret;
+};
+
+function isFunction(arg) {
+  return typeof arg === 'function';
+}
+
+function isNumber(arg) {
+  return typeof arg === 'number';
+}
+
+function isObject(arg) {
+  return typeof arg === 'object' && arg !== null;
+}
+
+function isUndefined(arg) {
+  return arg === void 0;
+}
+
+},{}],4:[function(require,module,exports){
+/*
+  Copyright (C) 2012-2014 Yusuke Suzuki <utatane.tea@gmail.com>
+  Copyright (C) 2014 Dan Tao <daniel.tao@gmail.com>
+  Copyright (C) 2013 Andrew Eisenberg <andrew@eisenberg.as>
+
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+
+  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+  ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+/*jslint bitwise:true plusplus:true eqeq:true nomen:true*/
+/*global doctrine:true, exports:true, parseTypeExpression:true, parseTop:true*/
+
+(function (exports) {
+    'use strict';
+
+    var VERSION,
+        Regex,
+        CanAccessStringByIndex,
+        typed,
+        jsdoc,
+        isArray,
+        hasOwnProperty;
+
+    // Sync with package.json.
+    VERSION = '0.5.2-dev';
+
+    // See also tools/generate-unicode-regex.py.
+    Regex = {
+        NonAsciiIdentifierStart: new RegExp('[\xaa\xb5\xba\xc0-\xd6\xd8-\xf6\xf8-\u02c1\u02c6-\u02d1\u02e0-\u02e4\u02ec\u02ee\u0370-\u0374\u0376\u0377\u037a-\u037d\u0386\u0388-\u038a\u038c\u038e-\u03a1\u03a3-\u03f5\u03f7-\u0481\u048a-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05d0-\u05ea\u05f0-\u05f2\u0620-\u064a\u066e\u066f\u0671-\u06d3\u06d5\u06e5\u06e6\u06ee\u06ef\u06fa-\u06fc\u06ff\u0710\u0712-\u072f\u074d-\u07a5\u07b1\u07ca-\u07ea\u07f4\u07f5\u07fa\u0800-\u0815\u081a\u0824\u0828\u0840-\u0858\u08a0\u08a2-\u08ac\u0904-\u0939\u093d\u0950\u0958-\u0961\u0971-\u0977\u0979-\u097f\u0985-\u098c\u098f\u0990\u0993-\u09a8\u09aa-\u09b0\u09b2\u09b6-\u09b9\u09bd\u09ce\u09dc\u09dd\u09df-\u09e1\u09f0\u09f1\u0a05-\u0a0a\u0a0f\u0a10\u0a13-\u0a28\u0a2a-\u0a30\u0a32\u0a33\u0a35\u0a36\u0a38\u0a39\u0a59-\u0a5c\u0a5e\u0a72-\u0a74\u0a85-\u0a8d\u0a8f-\u0a91\u0a93-\u0aa8\u0aaa-\u0ab0\u0ab2\u0ab3\u0ab5-\u0ab9\u0abd\u0ad0\u0ae0\u0ae1\u0b05-\u0b0c\u0b0f\u0b10\u0b13-\u0b28\u0b2a-\u0b30\u0b32\u0b33\u0b35-\u0b39\u0b3d\u0b5c\u0b5d\u0b5f-\u0b61\u0b71\u0b83\u0b85-\u0b8a\u0b8e-\u0b90\u0b92-\u0b95\u0b99\u0b9a\u0b9c\u0b9e\u0b9f\u0ba3\u0ba4\u0ba8-\u0baa\u0bae-\u0bb9\u0bd0\u0c05-\u0c0c\u0c0e-\u0c10\u0c12-\u0c28\u0c2a-\u0c33\u0c35-\u0c39\u0c3d\u0c58\u0c59\u0c60\u0c61\u0c85-\u0c8c\u0c8e-\u0c90\u0c92-\u0ca8\u0caa-\u0cb3\u0cb5-\u0cb9\u0cbd\u0cde\u0ce0\u0ce1\u0cf1\u0cf2\u0d05-\u0d0c\u0d0e-\u0d10\u0d12-\u0d3a\u0d3d\u0d4e\u0d60\u0d61\u0d7a-\u0d7f\u0d85-\u0d96\u0d9a-\u0db1\u0db3-\u0dbb\u0dbd\u0dc0-\u0dc6\u0e01-\u0e30\u0e32\u0e33\u0e40-\u0e46\u0e81\u0e82\u0e84\u0e87\u0e88\u0e8a\u0e8d\u0e94-\u0e97\u0e99-\u0e9f\u0ea1-\u0ea3\u0ea5\u0ea7\u0eaa\u0eab\u0ead-\u0eb0\u0eb2\u0eb3\u0ebd\u0ec0-\u0ec4\u0ec6\u0edc-\u0edf\u0f00\u0f40-\u0f47\u0f49-\u0f6c\u0f88-\u0f8c\u1000-\u102a\u103f\u1050-\u1055\u105a-\u105d\u1061\u1065\u1066\u106e-\u1070\u1075-\u1081\u108e\u10a0-\u10c5\u10c7\u10cd\u10d0-\u10fa\u10fc-\u1248\u124a-\u124d\u1250-\u1256\u1258\u125a-\u125d\u1260-\u1288\u128a-\u128d\u1290-\u12b0\u12b2-\u12b5\u12b8-\u12be\u12c0\u12c2-\u12c5\u12c8-\u12d6\u12d8-\u1310\u1312-\u1315\u1318-\u135a\u1380-\u138f\u13a0-\u13f4\u1401-\u166c\u166f-\u167f\u1681-\u169a\u16a0-\u16ea\u16ee-\u16f0\u1700-\u170c\u170e-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176c\u176e-\u1770\u1780-\u17b3\u17d7\u17dc\u1820-\u1877\u1880-\u18a8\u18aa\u18b0-\u18f5\u1900-\u191c\u1950-\u196d\u1970-\u1974\u1980-\u19ab\u19c1-\u19c7\u1a00-\u1a16\u1a20-\u1a54\u1aa7\u1b05-\u1b33\u1b45-\u1b4b\u1b83-\u1ba0\u1bae\u1baf\u1bba-\u1be5\u1c00-\u1c23\u1c4d-\u1c4f\u1c5a-\u1c7d\u1ce9-\u1cec\u1cee-\u1cf1\u1cf5\u1cf6\u1d00-\u1dbf\u1e00-\u1f15\u1f18-\u1f1d\u1f20-\u1f45\u1f48-\u1f4d\u1f50-\u1f57\u1f59\u1f5b\u1f5d\u1f5f-\u1f7d\u1f80-\u1fb4\u1fb6-\u1fbc\u1fbe\u1fc2-\u1fc4\u1fc6-\u1fcc\u1fd0-\u1fd3\u1fd6-\u1fdb\u1fe0-\u1fec\u1ff2-\u1ff4\u1ff6-\u1ffc\u2071\u207f\u2090-\u209c\u2102\u2107\u210a-\u2113\u2115\u2119-\u211d\u2124\u2126\u2128\u212a-\u212d\u212f-\u2139\u213c-\u213f\u2145-\u2149\u214e\u2160-\u2188\u2c00-\u2c2e\u2c30-\u2c5e\u2c60-\u2ce4\u2ceb-\u2cee\u2cf2\u2cf3\u2d00-\u2d25\u2d27\u2d2d\u2d30-\u2d67\u2d6f\u2d80-\u2d96\u2da0-\u2da6\u2da8-\u2dae\u2db0-\u2db6\u2db8-\u2dbe\u2dc0-\u2dc6\u2dc8-\u2dce\u2dd0-\u2dd6\u2dd8-\u2dde\u2e2f\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303c\u3041-\u3096\u309d-\u309f\u30a1-\u30fa\u30fc-\u30ff\u3105-\u312d\u3131-\u318e\u31a0-\u31ba\u31f0-\u31ff\u3400-\u4db5\u4e00-\u9fcc\ua000-\ua48c\ua4d0-\ua4fd\ua500-\ua60c\ua610-\ua61f\ua62a\ua62b\ua640-\ua66e\ua67f-\ua697\ua6a0-\ua6ef\ua717-\ua71f\ua722-\ua788\ua78b-\ua78e\ua790-\ua793\ua7a0-\ua7aa\ua7f8-\ua801\ua803-\ua805\ua807-\ua80a\ua80c-\ua822\ua840-\ua873\ua882-\ua8b3\ua8f2-\ua8f7\ua8fb\ua90a-\ua925\ua930-\ua946\ua960-\ua97c\ua984-\ua9b2\ua9cf\uaa00-\uaa28\uaa40-\uaa42\uaa44-\uaa4b\uaa60-\uaa76\uaa7a\uaa80-\uaaaf\uaab1\uaab5\uaab6\uaab9-\uaabd\uaac0\uaac2\uaadb-\uaadd\uaae0-\uaaea\uaaf2-\uaaf4\uab01-\uab06\uab09-\uab0e\uab11-\uab16\uab20-\uab26\uab28-\uab2e\uabc0-\uabe2\uac00-\ud7a3\ud7b0-\ud7c6\ud7cb-\ud7fb\uf900-\ufa6d\ufa70-\ufad9\ufb00-\ufb06\ufb13-\ufb17\ufb1d\ufb1f-\ufb28\ufb2a-\ufb36\ufb38-\ufb3c\ufb3e\ufb40\ufb41\ufb43\ufb44\ufb46-\ufbb1\ufbd3-\ufd3d\ufd50-\ufd8f\ufd92-\ufdc7\ufdf0-\ufdfb\ufe70-\ufe74\ufe76-\ufefc\uff21-\uff3a\uff41-\uff5a\uff66-\uffbe\uffc2-\uffc7\uffca-\uffcf\uffd2-\uffd7\uffda-\uffdc]'),
+        NonAsciiIdentifierPart: new RegExp('[\xaa\xb5\xba\xc0-\xd6\xd8-\xf6\xf8-\u02c1\u02c6-\u02d1\u02e0-\u02e4\u02ec\u02ee\u0300-\u0374\u0376\u0377\u037a-\u037d\u0386\u0388-\u038a\u038c\u038e-\u03a1\u03a3-\u03f5\u03f7-\u0481\u0483-\u0487\u048a-\u0527\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05bd\u05bf\u05c1\u05c2\u05c4\u05c5\u05c7\u05d0-\u05ea\u05f0-\u05f2\u0610-\u061a\u0620-\u0669\u066e-\u06d3\u06d5-\u06dc\u06df-\u06e8\u06ea-\u06fc\u06ff\u0710-\u074a\u074d-\u07b1\u07c0-\u07f5\u07fa\u0800-\u082d\u0840-\u085b\u08a0\u08a2-\u08ac\u08e4-\u08fe\u0900-\u0963\u0966-\u096f\u0971-\u0977\u0979-\u097f\u0981-\u0983\u0985-\u098c\u098f\u0990\u0993-\u09a8\u09aa-\u09b0\u09b2\u09b6-\u09b9\u09bc-\u09c4\u09c7\u09c8\u09cb-\u09ce\u09d7\u09dc\u09dd\u09df-\u09e3\u09e6-\u09f1\u0a01-\u0a03\u0a05-\u0a0a\u0a0f\u0a10\u0a13-\u0a28\u0a2a-\u0a30\u0a32\u0a33\u0a35\u0a36\u0a38\u0a39\u0a3c\u0a3e-\u0a42\u0a47\u0a48\u0a4b-\u0a4d\u0a51\u0a59-\u0a5c\u0a5e\u0a66-\u0a75\u0a81-\u0a83\u0a85-\u0a8d\u0a8f-\u0a91\u0a93-\u0aa8\u0aaa-\u0ab0\u0ab2\u0ab3\u0ab5-\u0ab9\u0abc-\u0ac5\u0ac7-\u0ac9\u0acb-\u0acd\u0ad0\u0ae0-\u0ae3\u0ae6-\u0aef\u0b01-\u0b03\u0b05-\u0b0c\u0b0f\u0b10\u0b13-\u0b28\u0b2a-\u0b30\u0b32\u0b33\u0b35-\u0b39\u0b3c-\u0b44\u0b47\u0b48\u0b4b-\u0b4d\u0b56\u0b57\u0b5c\u0b5d\u0b5f-\u0b63\u0b66-\u0b6f\u0b71\u0b82\u0b83\u0b85-\u0b8a\u0b8e-\u0b90\u0b92-\u0b95\u0b99\u0b9a\u0b9c\u0b9e\u0b9f\u0ba3\u0ba4\u0ba8-\u0baa\u0bae-\u0bb9\u0bbe-\u0bc2\u0bc6-\u0bc8\u0bca-\u0bcd\u0bd0\u0bd7\u0be6-\u0bef\u0c01-\u0c03\u0c05-\u0c0c\u0c0e-\u0c10\u0c12-\u0c28\u0c2a-\u0c33\u0c35-\u0c39\u0c3d-\u0c44\u0c46-\u0c48\u0c4a-\u0c4d\u0c55\u0c56\u0c58\u0c59\u0c60-\u0c63\u0c66-\u0c6f\u0c82\u0c83\u0c85-\u0c8c\u0c8e-\u0c90\u0c92-\u0ca8\u0caa-\u0cb3\u0cb5-\u0cb9\u0cbc-\u0cc4\u0cc6-\u0cc8\u0cca-\u0ccd\u0cd5\u0cd6\u0cde\u0ce0-\u0ce3\u0ce6-\u0cef\u0cf1\u0cf2\u0d02\u0d03\u0d05-\u0d0c\u0d0e-\u0d10\u0d12-\u0d3a\u0d3d-\u0d44\u0d46-\u0d48\u0d4a-\u0d4e\u0d57\u0d60-\u0d63\u0d66-\u0d6f\u0d7a-\u0d7f\u0d82\u0d83\u0d85-\u0d96\u0d9a-\u0db1\u0db3-\u0dbb\u0dbd\u0dc0-\u0dc6\u0dca\u0dcf-\u0dd4\u0dd6\u0dd8-\u0ddf\u0df2\u0df3\u0e01-\u0e3a\u0e40-\u0e4e\u0e50-\u0e59\u0e81\u0e82\u0e84\u0e87\u0e88\u0e8a\u0e8d\u0e94-\u0e97\u0e99-\u0e9f\u0ea1-\u0ea3\u0ea5\u0ea7\u0eaa\u0eab\u0ead-\u0eb9\u0ebb-\u0ebd\u0ec0-\u0ec4\u0ec6\u0ec8-\u0ecd\u0ed0-\u0ed9\u0edc-\u0edf\u0f00\u0f18\u0f19\u0f20-\u0f29\u0f35\u0f37\u0f39\u0f3e-\u0f47\u0f49-\u0f6c\u0f71-\u0f84\u0f86-\u0f97\u0f99-\u0fbc\u0fc6\u1000-\u1049\u1050-\u109d\u10a0-\u10c5\u10c7\u10cd\u10d0-\u10fa\u10fc-\u1248\u124a-\u124d\u1250-\u1256\u1258\u125a-\u125d\u1260-\u1288\u128a-\u128d\u1290-\u12b0\u12b2-\u12b5\u12b8-\u12be\u12c0\u12c2-\u12c5\u12c8-\u12d6\u12d8-\u1310\u1312-\u1315\u1318-\u135a\u135d-\u135f\u1380-\u138f\u13a0-\u13f4\u1401-\u166c\u166f-\u167f\u1681-\u169a\u16a0-\u16ea\u16ee-\u16f0\u1700-\u170c\u170e-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176c\u176e-\u1770\u1772\u1773\u1780-\u17d3\u17d7\u17dc\u17dd\u17e0-\u17e9\u180b-\u180d\u1810-\u1819\u1820-\u1877\u1880-\u18aa\u18b0-\u18f5\u1900-\u191c\u1920-\u192b\u1930-\u193b\u1946-\u196d\u1970-\u1974\u1980-\u19ab\u19b0-\u19c9\u19d0-\u19d9\u1a00-\u1a1b\u1a20-\u1a5e\u1a60-\u1a7c\u1a7f-\u1a89\u1a90-\u1a99\u1aa7\u1b00-\u1b4b\u1b50-\u1b59\u1b6b-\u1b73\u1b80-\u1bf3\u1c00-\u1c37\u1c40-\u1c49\u1c4d-\u1c7d\u1cd0-\u1cd2\u1cd4-\u1cf6\u1d00-\u1de6\u1dfc-\u1f15\u1f18-\u1f1d\u1f20-\u1f45\u1f48-\u1f4d\u1f50-\u1f57\u1f59\u1f5b\u1f5d\u1f5f-\u1f7d\u1f80-\u1fb4\u1fb6-\u1fbc\u1fbe\u1fc2-\u1fc4\u1fc6-\u1fcc\u1fd0-\u1fd3\u1fd6-\u1fdb\u1fe0-\u1fec\u1ff2-\u1ff4\u1ff6-\u1ffc\u200c\u200d\u203f\u2040\u2054\u2071\u207f\u2090-\u209c\u20d0-\u20dc\u20e1\u20e5-\u20f0\u2102\u2107\u210a-\u2113\u2115\u2119-\u211d\u2124\u2126\u2128\u212a-\u212d\u212f-\u2139\u213c-\u213f\u2145-\u2149\u214e\u2160-\u2188\u2c00-\u2c2e\u2c30-\u2c5e\u2c60-\u2ce4\u2ceb-\u2cf3\u2d00-\u2d25\u2d27\u2d2d\u2d30-\u2d67\u2d6f\u2d7f-\u2d96\u2da0-\u2da6\u2da8-\u2dae\u2db0-\u2db6\u2db8-\u2dbe\u2dc0-\u2dc6\u2dc8-\u2dce\u2dd0-\u2dd6\u2dd8-\u2dde\u2de0-\u2dff\u2e2f\u3005-\u3007\u3021-\u302f\u3031-\u3035\u3038-\u303c\u3041-\u3096\u3099\u309a\u309d-\u309f\u30a1-\u30fa\u30fc-\u30ff\u3105-\u312d\u3131-\u318e\u31a0-\u31ba\u31f0-\u31ff\u3400-\u4db5\u4e00-\u9fcc\ua000-\ua48c\ua4d0-\ua4fd\ua500-\ua60c\ua610-\ua62b\ua640-\ua66f\ua674-\ua67d\ua67f-\ua697\ua69f-\ua6f1\ua717-\ua71f\ua722-\ua788\ua78b-\ua78e\ua790-\ua793\ua7a0-\ua7aa\ua7f8-\ua827\ua840-\ua873\ua880-\ua8c4\ua8d0-\ua8d9\ua8e0-\ua8f7\ua8fb\ua900-\ua92d\ua930-\ua953\ua960-\ua97c\ua980-\ua9c0\ua9cf-\ua9d9\uaa00-\uaa36\uaa40-\uaa4d\uaa50-\uaa59\uaa60-\uaa76\uaa7a\uaa7b\uaa80-\uaac2\uaadb-\uaadd\uaae0-\uaaef\uaaf2-\uaaf6\uab01-\uab06\uab09-\uab0e\uab11-\uab16\uab20-\uab26\uab28-\uab2e\uabc0-\uabea\uabec\uabed\uabf0-\uabf9\uac00-\ud7a3\ud7b0-\ud7c6\ud7cb-\ud7fb\uf900-\ufa6d\ufa70-\ufad9\ufb00-\ufb06\ufb13-\ufb17\ufb1d-\ufb28\ufb2a-\ufb36\ufb38-\ufb3c\ufb3e\ufb40\ufb41\ufb43\ufb44\ufb46-\ufbb1\ufbd3-\ufd3d\ufd50-\ufd8f\ufd92-\ufdc7\ufdf0-\ufdfb\ufe00-\ufe0f\ufe20-\ufe26\ufe33\ufe34\ufe4d-\ufe4f\ufe70-\ufe74\ufe76-\ufefc\uff10-\uff19\uff21-\uff3a\uff3f\uff41-\uff5a\uff66-\uffbe\uffc2-\uffc7\uffca-\uffcf\uffd2-\uffd7\uffda-\uffdc]')
+    };
+
+    CanAccessStringByIndex = typeof 'doctrine'[0] !== undefined;
+
+    function sliceSource(source, index, last) {
+        var output;
+        if (!CanAccessStringByIndex) {
+            output = source.slice(index, last).join('');
+        } else {
+            output = source.slice(index, last);
+        }
+        return output;
+    }
+
+    isArray = Array.isArray;
+    if (!isArray) {
+        isArray = function isArray(ary) {
+            return Object.prototype.toString.call(ary) === '[object Array]';
+        };
+    }
+
+    hasOwnProperty = (function () {
+        var func = Object.prototype.hasOwnProperty;
+        return function hasOwnProperty(obj, name) {
+            return func.call(obj, name);
+        };
+    }());
+
+    function shallowCopy(obj) {
+        var ret = {}, key;
+        for (key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                ret[key] = obj[key];
+            }
+        }
+        return ret;
+    }
+
+    function isLineTerminator(ch) {
+        return ch === '\n' || ch === '\r' || ch === '\u2028' || ch === '\u2029';
+    }
+
+    function isWhiteSpace(ch) {
+        return (ch === ' ') || (ch === '\u0009') || (ch === '\u000B') ||
+            (ch === '\u000C') || (ch === '\u00A0') ||
+            (ch.charCodeAt(0) >= 0x1680 &&
+             '\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\uFEFF'.indexOf(ch) >= 0);
+    }
+
+    function isDecimalDigit(ch) {
+        return '0123456789'.indexOf(ch) >= 0;
+    }
+
+    function isHexDigit(ch) {
+        return '0123456789abcdefABCDEF'.indexOf(ch) >= 0;
+    }
+
+    function isOctalDigit(ch) {
+        return '01234567'.indexOf(ch) >= 0;
+    }
+
+    function isASCIIAlphanumeric(ch) {
+        return (ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') || (ch >= '0' && ch <= '9');
+    }
+
+    function isIdentifierStart(ch) {
+        return (ch === '$') || (ch === '_') || (ch === '\\') ||
+            (ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') ||
+            ((ch.charCodeAt(0) >= 0x80) && Regex.NonAsciiIdentifierStart.test(ch));
+    }
+
+    function isIdentifierPart(ch) {
+        return (ch === '$') || (ch === '_') || (ch === '\\') ||
+            (ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') ||
+            ((ch >= '0') && (ch <= '9')) ||
+            ((ch.charCodeAt(0) >= 0x80) && Regex.NonAsciiIdentifierPart.test(ch));
+    }
+
+    function isTypeName(ch) {
+        return '><(){}[],:*|?!='.indexOf(ch) === -1 && !isWhiteSpace(ch) && !isLineTerminator(ch);
+    }
+
+    function isParamTitle(title) {
+        return title === 'param' || title === 'argument' || title === 'arg';
+    }
+
+    function isProperty(title) {
+        return title === 'property' || title === 'prop';
+    }
+
+    function isNameParameterRequired(title) {
+        return isParamTitle(title) || isProperty(title) ||
+            title === 'alias' || title === 'this' || title === 'mixes' || title === 'requires';
+    }
+
+    function isAllowedName(title) {
+        return isNameParameterRequired(title) || title === 'const' || title === 'constant';
+    }
+
+    function isAllowedNested(title) {
+        return isProperty(title) || isParamTitle(title);
+    }
+
+    function isTypeParameterRequired(title) {
+        return isParamTitle(title) || title === 'define' || title === 'enum' ||
+            title === 'implements' || title === 'return' ||
+            title === 'this' || title === 'type' || title === 'typedef' ||
+            title === 'returns' || isProperty(title);
+    }
+
+    // Consider deprecation instead using 'isTypeParameterRequired' and 'Rules' declaration to pick when a type is optional/required
+    // This would require changes to 'parseType'
+    function isAllowedType(title) {
+        return isTypeParameterRequired(title) || title === 'throws' || title === 'const' || title === 'constant' ||
+            title === 'namespace' || title === 'member' || title === 'var' || title === 'module' ||
+            title === 'constructor' || title === 'class' || title === 'extends' || title === 'augments' ||
+            title === 'public' || title === 'private' || title === 'protected';
+    }
+
+    function DoctrineError(message) {
+        this.name = 'DoctrineError';
+        this.message = message;
+    }
+    DoctrineError.prototype = new Error();
+    DoctrineError.prototype.constructor = DoctrineError;
+
+    function throwError(message) {
+        throw new DoctrineError(message);
+    }
+
+    function assert(cond, text) {
+        if (VERSION.slice(-3) === 'dev') {
+            if (!cond) {
+                throwError(text);
+            }
+        }
+    }
+
+    function trim(str) {
+        return str.replace(/^\s+/, '').replace(/\s+$/, '');
+    }
+
+    function unwrapComment(doc) {
+        // JSDoc comment is following form
+        //   /**
+        //    * .......
+        //    */
+        // remove /**, */ and *
+        var BEFORE_STAR = 0,
+            STAR = 1,
+            AFTER_STAR = 2,
+            index,
+            len,
+            mode,
+            result,
+            ch;
+
+        doc = doc.replace(/^\/\*\*?/, '').replace(/\*\/$/, '');
+        index = 0;
+        len = doc.length;
+        mode = BEFORE_STAR;
+        result = '';
+
+        while (index < len) {
+            ch = doc[index];
+            switch (mode) {
+            case BEFORE_STAR:
+                if (isLineTerminator(ch)) {
+                    result += ch;
+                } else if (ch === '*') {
+                    mode = STAR;
+                } else if (!isWhiteSpace(ch)) {
+                    result += ch;
+                    mode = AFTER_STAR;
+                }
+                break;
+
+            case STAR:
+                if (!isWhiteSpace(ch)) {
+                    result += ch;
+                }
+                mode = isLineTerminator(ch) ? BEFORE_STAR : AFTER_STAR;
+                break;
+
+            case AFTER_STAR:
+                result += ch;
+                if (isLineTerminator(ch)) {
+                    mode = BEFORE_STAR;
+                }
+                break;
+            }
+            index += 1;
+        }
+
+        return result;
+    }
+
+    // Type Expression Parser
+
+    (function (exports) {
+        var Syntax,
+            Token,
+            source,
+            length,
+            index,
+            previous,
+            token,
+            value;
+
+        Syntax = {
+            NullableLiteral: 'NullableLiteral',
+            AllLiteral: 'AllLiteral',
+            NullLiteral: 'NullLiteral',
+            UndefinedLiteral: 'UndefinedLiteral',
+            VoidLiteral: 'VoidLiteral',
+            UnionType: 'UnionType',
+            ArrayType: 'ArrayType',
+            RecordType: 'RecordType',
+            FieldType: 'FieldType',
+            FunctionType: 'FunctionType',
+            ParameterType: 'ParameterType',
+            RestType: 'RestType',
+            NonNullableType: 'NonNullableType',
+            OptionalType: 'OptionalType',
+            NullableType: 'NullableType',
+            NameExpression: 'NameExpression',
+            TypeApplication: 'TypeApplication'
+        };
+
+        Token = {
+            ILLEGAL: 0,    // ILLEGAL
+            DOT: 1,        // .
+            DOT_LT: 2,     // .<
+            REST: 3,       // ...
+            LT: 4,         // <
+            GT: 5,         // >
+            LPAREN: 6,     // (
+            RPAREN: 7,     // )
+            LBRACE: 8,     // {
+            RBRACE: 9,     // }
+            LBRACK: 10,    // [
+            RBRACK: 11,    // ]
+            COMMA: 12,     // ,
+            COLON: 13,     // :
+            STAR: 14,      // *
+            PIPE: 15,      // |
+            QUESTION: 16,  // ?
+            BANG: 17,      // !
+            EQUAL: 18,     // =
+            NAME: 19,      // name token
+            STRING: 20,    // string
+            NUMBER: 21,    // number
+            EOF: 22
+        };
+
+        function Context(previous, index, token, value) {
+            this._previous = previous;
+            this._index = index;
+            this._token = token;
+            this._value = value;
+        }
+
+        Context.prototype.restore = function () {
+            previous = this._previous;
+            index = this._index;
+            token = this._token;
+            value = this._value;
+        };
+
+        Context.save = function () {
+            return new Context(previous, index, token, value);
+        };
+
+        function advance() {
+            var ch = source[index];
+            index += 1;
+            return ch;
+        }
+
+        function scanHexEscape(prefix) {
+            var i, len, ch, code = 0;
+
+            len = (prefix === 'u') ? 4 : 2;
+            for (i = 0; i < len; ++i) {
+                if (index < length && isHexDigit(source[index])) {
+                    ch = advance();
+                    code = code * 16 + '0123456789abcdef'.indexOf(ch.toLowerCase());
+                } else {
+                    return '';
+                }
+            }
+            return String.fromCharCode(code);
+        }
+
+        function scanString() {
+            var str = '', quote, ch, code, unescaped, restore; //TODO review removal octal = false
+            quote = source[index];
+            ++index;
+
+            while (index < length) {
+                ch = advance();
+
+                if (ch === quote) {
+                    quote = '';
+                    break;
+                } else if (ch === '\\') {
+                    ch = advance();
+                    if (!isLineTerminator(ch)) {
+                        switch (ch) {
+                        case 'n':
+                            str += '\n';
+                            break;
+                        case 'r':
+                            str += '\r';
+                            break;
+                        case 't':
+                            str += '\t';
+                            break;
+                        case 'u':
+                        case 'x':
+                            restore = index;
+                            unescaped = scanHexEscape(ch);
+                            if (unescaped) {
+                                str += unescaped;
+                            } else {
+                                index = restore;
+                                str += ch;
+                            }
+                            break;
+                        case 'b':
+                            str += '\b';
+                            break;
+                        case 'f':
+                            str += '\f';
+                            break;
+                        case 'v':
+                            str += '\v';
+                            break;
+
+                        default:
+                            if (isOctalDigit(ch)) {
+                                code = '01234567'.indexOf(ch);
+
+                                // \0 is not octal escape sequence
+                                // Deprecating unused code. TODO review removal
+                                //if (code !== 0) {
+                                //    octal = true;
+                                //}
+
+                                if (index < length && isOctalDigit(source[index])) {
+                                    //TODO Review Removal octal = true;
+                                    code = code * 8 + '01234567'.indexOf(advance());
+
+                                    // 3 digits are only allowed when string starts
+                                    // with 0, 1, 2, 3
+                                    if ('0123'.indexOf(ch) >= 0 &&
+                                            index < length &&
+                                            isOctalDigit(source[index])) {
+                                        code = code * 8 + '01234567'.indexOf(advance());
+                                    }
+                                }
+                                str += String.fromCharCode(code);
+                            } else {
+                                str += ch;
+                            }
+                            break;
+                        }
+                    } else {
+                        if (ch ===  '\r' && source[index] === '\n') {
+                            ++index;
+                        }
+                    }
+                } else if (isLineTerminator(ch)) {
+                    break;
+                } else {
+                    str += ch;
+                }
+            }
+
+            if (quote !== '') {
+                throwError('unexpected quote');
+            }
+
+            value = str;
+            return Token.STRING;
+        }
+
+        function scanNumber() {
+            var number, ch;
+
+            number = '';
+            if (ch !== '.') {
+                number = advance();
+                ch = source[index];
+
+                if (number === '0') {
+                    if (ch === 'x' || ch === 'X') {
+                        number += advance();
+                        while (index < length) {
+                            ch = source[index];
+                            if (!isHexDigit(ch)) {
+                                break;
+                            }
+                            number += advance();
+                        }
+
+                        if (number.length <= 2) {
+                            // only 0x
+                            throwError('unexpected token');
+                        }
+
+                        if (index < length) {
+                            ch = source[index];
+                            if (isIdentifierStart(ch)) {
+                                throwError('unexpected token');
+                            }
+                        }
+                        value = parseInt(number, 16);
+                        return Token.NUMBER;
+                    }
+
+                    if (isOctalDigit(ch)) {
+                        number += advance();
+                        while (index < length) {
+                            ch = source[index];
+                            if (!isOctalDigit(ch)) {
+                                break;
+                            }
+                            number += advance();
+                        }
+
+                        if (index < length) {
+                            ch = source[index];
+                            if (isIdentifierStart(ch) || isDecimalDigit(ch)) {
+                                throwError('unexpected token');
+                            }
+                        }
+                        value = parseInt(number, 8);
+                        return Token.NUMBER;
+                    }
+
+                    if (isDecimalDigit(ch)) {
+                        throwError('unexpected token');
+                    }
+                }
+
+                while (index < length) {
+                    ch = source[index];
+                    if (!isDecimalDigit(ch)) {
+                        break;
+                    }
+                    number += advance();
+                }
+            }
+
+            if (ch === '.') {
+                number += advance();
+                while (index < length) {
+                    ch = source[index];
+                    if (!isDecimalDigit(ch)) {
+                        break;
+                    }
+                    number += advance();
+                }
+            }
+
+            if (ch === 'e' || ch === 'E') {
+                number += advance();
+
+                ch = source[index];
+                if (ch === '+' || ch === '-') {
+                    number += advance();
+                }
+
+                ch = source[index];
+                if (isDecimalDigit(ch)) {
+                    number += advance();
+                    while (index < length) {
+                        ch = source[index];
+                        if (!isDecimalDigit(ch)) {
+                            break;
+                        }
+                        number += advance();
+                    }
+                } else {
+                    throwError('unexpected token');
+                }
+            }
+
+            if (index < length) {
+                ch = source[index];
+                if (isIdentifierStart(ch)) {
+                    throwError('unexpected token');
+                }
+            }
+
+            value = parseFloat(number);
+            return Token.NUMBER;
+        }
+
+
+        function scanTypeName() {
+            var ch, ch2;
+
+            value = advance();
+            while (index < length && isTypeName(source[index])) {
+                ch = source[index];
+                if (ch === '.') {
+                    if ((index + 1) < length) {
+                        ch2 = source[index + 1];
+                        if (ch2 === '<') {
+                            break;
+                        }
+                    }
+                }
+                value += advance();
+            }
+            return Token.NAME;
+        }
+
+        function next() {
+            var ch;
+
+            previous = index;
+
+            while (index < length && isWhiteSpace(source[index])) {
+                advance();
+            }
+            if (index >= length) {
+                token = Token.EOF;
+                return token;
+            }
+
+            ch = source[index];
+            switch (ch) {
+            case '"':
+                token = scanString();
+                return token;
+
+            case ':':
+                advance();
+                token = Token.COLON;
+                return token;
+
+            case ',':
+                advance();
+                token = Token.COMMA;
+                return token;
+
+            case '(':
+                advance();
+                token = Token.LPAREN;
+                return token;
+
+            case ')':
+                advance();
+                token = Token.RPAREN;
+                return token;
+
+            case '[':
+                advance();
+                token = Token.LBRACK;
+                return token;
+
+            case ']':
+                advance();
+                token = Token.RBRACK;
+                return token;
+
+            case '{':
+                advance();
+                token = Token.LBRACE;
+                return token;
+
+            case '}':
+                advance();
+                token = Token.RBRACE;
+                return token;
+
+            case '.':
+                advance();
+                if (index < length) {
+                    ch = source[index];
+                    if (ch === '<') {
+                        advance();
+                        token = Token.DOT_LT;
+                        return token;
+                    }
+
+                    if (ch === '.' && index + 1 < length && source[index + 1] === '.') {
+                        advance();
+                        advance();
+                        token = Token.REST;
+                        return token;
+                    }
+
+                    if (isDecimalDigit(ch)) {
+                        token = scanNumber();
+                        return token;
+                    }
+                }
+                token = Token.DOT;
+                return token;
+
+            case '<':
+                advance();
+                token = Token.LT;
+                return token;
+
+            case '>':
+                advance();
+                token = Token.GT;
+                return token;
+
+            case '*':
+                advance();
+                token = Token.STAR;
+                return token;
+
+            case '|':
+                advance();
+                token = Token.PIPE;
+                return token;
+
+            case '?':
+                advance();
+                token = Token.QUESTION;
+                return token;
+
+            case '!':
+                advance();
+                token = Token.BANG;
+                return token;
+
+            case '=':
+                advance();
+                token = Token.EQUAL;
+                return token;
+
+            default:
+                if (isDecimalDigit(ch)) {
+                    token = scanNumber();
+                    return token;
+                }
+
+                // type string permits following case,
+                //
+                // namespace.module.MyClass
+                //
+                // this reduced 1 token TK_NAME
+                if (isTypeName(ch)) {
+                    token = scanTypeName();
+                    return token;
+                }
+
+                token = Token.ILLEGAL;
+                return token;
+            }
+        }
+
+        function consume(target, text) {
+            assert(token === target, text || 'consumed token not matched');
+            next();
+        }
+
+        function expect(target) {
+            if (token !== target) {
+                throwError('unexpected token');
+            }
+            next();
+        }
+
+        // UnionType := '(' TypeUnionList ')'
+        //
+        // TypeUnionList :=
+        //     <<empty>>
+        //   | NonemptyTypeUnionList
+        //
+        // NonemptyTypeUnionList :=
+        //     TypeExpression
+        //   | TypeExpression '|' NonemptyTypeUnionList
+        function parseUnionType() {
+            var elements;
+            consume(Token.LPAREN, 'UnionType should start with (');
+            elements = [];
+            if (token !== Token.RPAREN) {
+                while (true) {
+                    elements.push(parseTypeExpression());
+                    if (token === Token.RPAREN) {
+                        break;
+                    }
+                    expect(Token.PIPE);
+                }
+            }
+            consume(Token.RPAREN, 'UnionType should end with )');
+            return {
+                type: Syntax.UnionType,
+                elements: elements
+            };
+        }
+
+        // ArrayType := '[' ElementTypeList ']'
+        //
+        // ElementTypeList :=
+        //     <<empty>>
+        //  | TypeExpression
+        //  | '...' TypeExpression
+        //  | TypeExpression ',' ElementTypeList
+        function parseArrayType() {
+            var elements;
+            consume(Token.LBRACK, 'ArrayType should start with [');
+            elements = [];
+            while (token !== Token.RBRACK) {
+                if (token === Token.REST) {
+                    consume(Token.REST);
+                    elements.push({
+                        type: Syntax.RestType,
+                        expression: parseTypeExpression()
+                    });
+                    break;
+                } else {
+                    elements.push(parseTypeExpression());
+                }
+                if (token !== Token.RBRACK) {
+                    expect(Token.COMMA);
+                }
+            }
+            expect(Token.RBRACK);
+            return {
+                type: Syntax.ArrayType,
+                elements: elements
+            };
+        }
+
+        function parseFieldName() {
+            var v = value;
+            if (token === Token.NAME || token === Token.STRING) {
+                next();
+                return v;
+            }
+
+            if (token === Token.NUMBER) {
+                consume(Token.NUMBER);
+                return String(v);
+            }
+
+            throwError('unexpected token');
+        }
+
+        // FieldType :=
+        //     FieldName
+        //   | FieldName ':' TypeExpression
+        //
+        // FieldName :=
+        //     NameExpression
+        //   | StringLiteral
+        //   | NumberLiteral
+        //   | ReservedIdentifier
+        function parseFieldType() {
+            var key;
+
+            key = parseFieldName();
+            if (token === Token.COLON) {
+                consume(Token.COLON);
+                return {
+                    type: Syntax.FieldType,
+                    key: key,
+                    value: parseTypeExpression()
+                };
+            }
+            return {
+                type: Syntax.FieldType,
+                key: key,
+                value: null
+            };
+        }
+
+        // RecordType := '{' FieldTypeList '}'
+        //
+        // FieldTypeList :=
+        //     <<empty>>
+        //   | FieldType
+        //   | FieldType ',' FieldTypeList
+        function parseRecordType() {
+            var fields;
+
+            consume(Token.LBRACE, 'RecordType should start with {');
+            fields = [];
+            if (token === Token.COMMA) {
+                consume(Token.COMMA);
+            } else {
+                while (token !== Token.RBRACE) {
+                    fields.push(parseFieldType());
+                    if (token !== Token.RBRACE) {
+                        expect(Token.COMMA);
+                    }
+                }
+            }
+            expect(Token.RBRACE);
+            return {
+                type: Syntax.RecordType,
+                fields: fields
+            };
+        }
+
+        function parseNameExpression() {
+            var name = value;
+            expect(Token.NAME);
+            return {
+                type: Syntax.NameExpression,
+                name: name
+            };
+        }
+
+        // TypeExpressionList :=
+        //     TopLevelTypeExpression
+        //   | TopLevelTypeExpression ',' TypeExpressionList
+        function parseTypeExpressionList() {
+            var elements = [];
+
+            elements.push(parseTop());
+            while (token === Token.COMMA) {
+                consume(Token.COMMA);
+                elements.push(parseTop());
+            }
+            return elements;
+        }
+
+        // TypeName :=
+        //     NameExpression
+        //   | NameExpression TypeApplication
+        //
+        // TypeApplication :=
+        //     '.<' TypeExpressionList '>'
+        //   | '<' TypeExpressionList '>'   // this is extension of doctrine
+        function parseTypeName() {
+            var expr, applications;
+
+            expr = parseNameExpression();
+            if (token === Token.DOT_LT || token === Token.LT) {
+                next();
+                applications = parseTypeExpressionList();
+                expect(Token.GT);
+                return {
+                    type: Syntax.TypeApplication,
+                    expression: expr,
+                    applications: applications
+                };
+            }
+            return expr;
+        }
+
+        // ResultType :=
+        //     <<empty>>
+        //   | ':' void
+        //   | ':' TypeExpression
+        //
+        // BNF is above
+        // but, we remove <<empty>> pattern, so token is always TypeToken::COLON
+        function parseResultType() {
+            consume(Token.COLON, 'ResultType should start with :');
+            if (token === Token.NAME && value === 'void') {
+                consume(Token.NAME);
+                return {
+                    type: Syntax.VoidLiteral
+                };
+            }
+            return parseTypeExpression();
+        }
+
+        // ParametersType :=
+        //     RestParameterType
+        //   | NonRestParametersType
+        //   | NonRestParametersType ',' RestParameterType
+        //
+        // RestParameterType :=
+        //     '...'
+        //     '...' Identifier
+        //
+        // NonRestParametersType :=
+        //     ParameterType ',' NonRestParametersType
+        //   | ParameterType
+        //   | OptionalParametersType
+        //
+        // OptionalParametersType :=
+        //     OptionalParameterType
+        //   | OptionalParameterType, OptionalParametersType
+        //
+        // OptionalParameterType := ParameterType=
+        //
+        // ParameterType := TypeExpression | Identifier ':' TypeExpression
+        //
+        // Identifier is "new" or "this"
+        function parseParametersType() {
+            var params = [], normal = true, expr, rest = false;
+
+            while (token !== Token.RPAREN) {
+                if (token === Token.REST) {
+                    // RestParameterType
+                    consume(Token.REST);
+                    rest = true;
+                }
+
+                expr = parseTypeExpression();
+                if (expr.type === Syntax.NameExpression && token === Token.COLON) {
+                    // Identifier ':' TypeExpression
+                    consume(Token.COLON);
+                    expr = {
+                        type: Syntax.ParameterType,
+                        name: expr.name,
+                        expression: parseTypeExpression()
+                    };
+                }
+                if (token === Token.EQUAL) {
+                    consume(Token.EQUAL);
+                    expr = {
+                        type: Syntax.OptionalType,
+                        expression: expr
+                    };
+                    normal = false;
+                } else {
+                    if (!normal) {
+                        throwError('unexpected token');
+                    }
+                }
+                if (rest) {
+                    expr = {
+                        type: Syntax.RestType,
+                        expression: expr
+                    };
+                }
+                params.push(expr);
+                if (token !== Token.RPAREN) {
+                    expect(Token.COMMA);
+                }
+            }
+            return params;
+        }
+
+        // FunctionType := 'function' FunctionSignatureType
+        //
+        // FunctionSignatureType :=
+        //   | TypeParameters '(' ')' ResultType
+        //   | TypeParameters '(' ParametersType ')' ResultType
+        //   | TypeParameters '(' 'this' ':' TypeName ')' ResultType
+        //   | TypeParameters '(' 'this' ':' TypeName ',' ParametersType ')' ResultType
+        function parseFunctionType() {
+            var isNew, thisBinding, params, result, fnType;
+            assert(token === Token.NAME && value === 'function', 'FunctionType should start with \'function\'');
+            consume(Token.NAME);
+
+            // Google Closure Compiler is not implementing TypeParameters.
+            // So we do not. if we don't get '(', we see it as error.
+            expect(Token.LPAREN);
+
+            isNew = false;
+            params = [];
+            thisBinding = null;
+            if (token !== Token.RPAREN) {
+                // ParametersType or 'this'
+                if (token === Token.NAME &&
+                        (value === 'this' || value === 'new')) {
+                    // 'this' or 'new'
+                    // 'new' is Closure Compiler extension
+                    isNew = value === 'new';
+                    consume(Token.NAME);
+                    expect(Token.COLON);
+                    thisBinding = parseTypeName();
+                    if (token === Token.COMMA) {
+                        consume(Token.COMMA);
+                        params = parseParametersType();
+                    }
+                } else {
+                    params = parseParametersType();
+                }
+            }
+
+            expect(Token.RPAREN);
+
+            result = null;
+            if (token === Token.COLON) {
+                result = parseResultType();
+            }
+
+            fnType = {
+                type: Syntax.FunctionType,
+                params: params,
+                result: result
+            };
+            if (thisBinding) {
+                // avoid adding null 'new' and 'this' properties
+                fnType['this'] = thisBinding;
+                if (isNew) {
+                    fnType['new'] = true;
+                }
+            }
+            return fnType;
+        }
+
+        // BasicTypeExpression :=
+        //     '*'
+        //   | 'null'
+        //   | 'undefined'
+        //   | TypeName
+        //   | FunctionType
+        //   | UnionType
+        //   | RecordType
+        //   | ArrayType
+        function parseBasicTypeExpression() {
+            var context;
+            switch (token) {
+            case Token.STAR:
+                consume(Token.STAR);
+                return {
+                    type: Syntax.AllLiteral
+                };
+
+            case Token.LPAREN:
+                return parseUnionType();
+
+            case Token.LBRACK:
+                return parseArrayType();
+
+            case Token.LBRACE:
+                return parseRecordType();
+
+            case Token.NAME:
+                if (value === 'null') {
+                    consume(Token.NAME);
+                    return {
+                        type: Syntax.NullLiteral
+                    };
+                }
+
+                if (value === 'undefined') {
+                    consume(Token.NAME);
+                    return {
+                        type: Syntax.UndefinedLiteral
+                    };
+                }
+
+                context = Context.save();
+                if (value === 'function') {
+                    try {
+                        return parseFunctionType();
+                    } catch (e) {
+                        context.restore();
+                    }
+                }
+
+                return parseTypeName();
+
+            default:
+                throwError('unexpected token');
+            }
+        }
+
+        // TypeExpression :=
+        //     BasicTypeExpression
+        //   | '?' BasicTypeExpression
+        //   | '!' BasicTypeExpression
+        //   | BasicTypeExpression '?'
+        //   | BasicTypeExpression '!'
+        //   | '?'
+        //   | BasicTypeExpression '[]'
+        function parseTypeExpression() {
+            var expr;
+
+            if (token === Token.QUESTION) {
+                consume(Token.QUESTION);
+                if (token === Token.COMMA || token === Token.EQUAL || token === Token.RBRACE ||
+                        token === Token.RPAREN || token === Token.PIPE || token === Token.EOF ||
+                        token === Token.RBRACK) {
+                    return {
+                        type: Syntax.NullableLiteral
+                    };
+                }
+                return {
+                    type: Syntax.NullableType,
+                    expression: parseBasicTypeExpression(),
+                    prefix: true
+                };
+            }
+
+            if (token === Token.BANG) {
+                consume(Token.BANG);
+                return {
+                    type: Syntax.NonNullableType,
+                    expression: parseBasicTypeExpression(),
+                    prefix: true
+                };
+            }
+
+            expr = parseBasicTypeExpression();
+            if (token === Token.BANG) {
+                consume(Token.BANG);
+                return {
+                    type: Syntax.NonNullableType,
+                    expression: expr,
+                    prefix: false
+                };
+            }
+
+            if (token === Token.QUESTION) {
+                consume(Token.QUESTION);
+                return {
+                    type: Syntax.NullableType,
+                    expression: expr,
+                    prefix: false
+                };
+            }
+
+            if (token === Token.LBRACK) {
+                consume(Token.LBRACK);
+                consume(Token.RBRACK, 'expected an array-style type declaration (' + value + '[])');
+                return {
+                    type: Syntax.TypeApplication,
+                    expression: {
+                        type: Syntax.NameExpression,
+                        name: 'Array'
+                    },
+                    applications: [expr]
+                };
+            }
+
+            return expr;
+        }
+
+        // TopLevelTypeExpression :=
+        //      TypeExpression
+        //    | TypeUnionList
+        //
+        // This rule is Google Closure Compiler extension, not ES4
+        // like,
+        //   { number | string }
+        // If strict to ES4, we should write it as
+        //   { (number|string) }
+        function parseTop() {
+            var expr, elements;
+
+            expr = parseTypeExpression();
+            if (token !== Token.PIPE) {
+                return expr;
+            }
+
+            elements = [ expr ];
+            consume(Token.PIPE);
+            while (true) {
+                elements.push(parseTypeExpression());
+                if (token !== Token.PIPE) {
+                    break;
+                }
+                consume(Token.PIPE);
+            }
+
+            return {
+                type: Syntax.UnionType,
+                elements: elements
+            };
+        }
+
+        function parseTopParamType() {
+            var expr;
+
+            if (token === Token.REST) {
+                consume(Token.REST);
+                return {
+                    type: Syntax.RestType,
+                    expression: parseTop()
+                };
+            }
+
+            expr = parseTop();
+            if (token === Token.EQUAL) {
+                consume(Token.EQUAL);
+                return {
+                    type: Syntax.OptionalType,
+                    expression: expr
+                };
+            }
+
+            return expr;
+        }
+
+        function parseType(src, opt) {
+            var expr;
+
+            source = src;
+            length = source.length;
+            index = 0;
+            previous = 0;
+
+            if (!CanAccessStringByIndex) {
+                source = source.split('');
+            }
+
+            next();
+            expr = parseTop();
+
+            if (opt && opt.midstream) {
+                return {
+                    expression: expr,
+                    index: previous
+                };
+            }
+
+            if (token !== Token.EOF) {
+                throwError('not reach to EOF');
+            }
+
+            return expr;
+        }
+
+        function parseParamType(src, opt) {
+            var expr;
+
+            source = src;
+            length = source.length;
+            index = 0;
+            previous = 0;
+
+            if (!CanAccessStringByIndex) {
+                source = source.split('');
+            }
+
+            next();
+            expr = parseTopParamType();
+
+            if (opt && opt.midstream) {
+                return {
+                    expression: expr,
+                    index: previous
+                };
+            }
+
+            if (token !== Token.EOF) {
+                throwError('not reach to EOF');
+            }
+
+            return expr;
+        }
+
+        function stringifyImpl(node, compact, topLevel) {
+            var result, i, iz;
+
+            switch (node.type) {
+            case Syntax.NullableLiteral:
+                result = '?';
+                break;
+
+            case Syntax.AllLiteral:
+                result = '*';
+                break;
+
+            case Syntax.NullLiteral:
+                result = 'null';
+                break;
+
+            case Syntax.UndefinedLiteral:
+                result = 'undefined';
+                break;
+
+            case Syntax.VoidLiteral:
+                result = 'void';
+                break;
+
+            case Syntax.UnionType:
+                if (!topLevel) {
+                    result = '(';
+                } else {
+                    result = '';
+                }
+
+                for (i = 0, iz = node.elements.length; i < iz; ++i) {
+                    result += stringifyImpl(node.elements[i], compact);
+                    if ((i + 1) !== iz) {
+                        result += '|';
+                    }
+                }
+
+                if (!topLevel) {
+                    result += ')';
+                }
+                break;
+
+            case Syntax.ArrayType:
+                result = '[';
+                for (i = 0, iz = node.elements.length; i < iz; ++i) {
+                    result += stringifyImpl(node.elements[i], compact);
+                    if ((i + 1) !== iz) {
+                        result += compact ? ',' : ', ';
+                    }
+                }
+                result += ']';
+                break;
+
+            case Syntax.RecordType:
+                result = '{';
+                for (i = 0, iz = node.fields.length; i < iz; ++i) {
+                    result += stringifyImpl(node.fields[i], compact);
+                    if ((i + 1) !== iz) {
+                        result += compact ? ',' : ', ';
+                    }
+                }
+                result += '}';
+                break;
+
+            case Syntax.FieldType:
+                if (node.value) {
+                    result = node.key + (compact ? ':' : ': ') + stringifyImpl(node.value, compact);
+                } else {
+                    result = node.key;
+                }
+                break;
+
+            case Syntax.FunctionType:
+                result = compact ? 'function(' : 'function (';
+
+                if (node['this']) {
+                    if (node['new']) {
+                        result += (compact ? 'new:' : 'new: ');
+                    } else {
+                        result += (compact ? 'this:' : 'this: ');
+                    }
+
+                    result += stringifyImpl(node['this'], compact);
+
+                    if (node.params.length !== 0) {
+                        result += compact ? ',' : ', ';
+                    }
+                }
+
+                for (i = 0, iz = node.params.length; i < iz; ++i) {
+                    result += stringifyImpl(node.params[i], compact);
+                    if ((i + 1) !== iz) {
+                        result += compact ? ',' : ', ';
+                    }
+                }
+
+                result += ')';
+
+                if (node.result) {
+                    result += (compact ? ':' : ': ') + stringifyImpl(node.result, compact);
+                }
+                break;
+
+            case Syntax.ParameterType:
+                result = node.name + (compact ? ':' : ': ') + stringifyImpl(node.expression, compact);
+                break;
+
+            case Syntax.RestType:
+                result = '...';
+                if (node.expression) {
+                    result += stringifyImpl(node.expression, compact);
+                }
+                break;
+
+            case Syntax.NonNullableType:
+                if (node.prefix) {
+                    result = '!' + stringifyImpl(node.expression, compact);
+                } else {
+                    result = stringifyImpl(node.expression, compact) + '!';
+                }
+                break;
+
+            case Syntax.OptionalType:
+                result = stringifyImpl(node.expression, compact) + '=';
+                break;
+
+            case Syntax.NullableType:
+                if (node.prefix) {
+                    result = '?' + stringifyImpl(node.expression, compact);
+                } else {
+                    result = stringifyImpl(node.expression, compact) + '?';
+                }
+                break;
+
+            case Syntax.NameExpression:
+                result = node.name;
+                break;
+
+            case Syntax.TypeApplication:
+                result = stringifyImpl(node.expression, compact) + '.<';
+                for (i = 0, iz = node.applications.length; i < iz; ++i) {
+                    result += stringifyImpl(node.applications[i], compact);
+                    if ((i + 1) !== iz) {
+                        result += compact ? ',' : ', ';
+                    }
+                }
+                result += '>';
+                break;
+
+            default:
+                throwError('Unknown type ' + node.type);
+            }
+
+            return result;
+        }
+
+        function stringify(node, options) {
+            if (options == null) {
+                options = {};
+            }
+            return stringifyImpl(node, options.compact, options.topLevel);
+        }
+
+        exports.parseType = parseType;
+        exports.parseParamType = parseParamType;
+        exports.stringify = stringify;
+        exports.Syntax = Syntax;
+    }(typed = {}));
+
+    // JSDoc Tag Parser
+
+    (function (exports) {
+        var Rules,
+            index,
+            lineNumber,
+            length,
+            source,
+            recoverable,
+            sloppy,
+            strict;
+
+        function advance() {
+            var ch = source[index];
+            index += 1;
+            if (isLineTerminator(ch)) {
+                lineNumber += 1;
+            }
+            return ch;
+        }
+
+        function scanTitle() {
+            var title = '';
+            // waste '@'
+            advance();
+
+            while (index < length && isASCIIAlphanumeric(source[index])) {
+                title += advance();
+            }
+
+            return title;
+        }
+
+        function seekContent() {
+            var ch, waiting, last = index;
+
+            waiting = false;
+            while (last < length) {
+                ch = source[last];
+                if (isLineTerminator(ch)) {
+                    lineNumber += 1;
+                    waiting = true;
+                } else if (waiting) {
+                    if (ch === '@') {
+                        break;
+                    }
+                    if (!isWhiteSpace(ch)) {
+                        waiting = false;
+                    }
+                }
+                last += 1;
+            }
+            return last;
+        }
+
+        // type expression may have nest brace, such as,
+        // { { ok: string } }
+        //
+        // therefore, scanning type expression with balancing braces.
+        function parseType(title, last) {
+            var ch, brace, type, direct = false;
+
+            // search '{'
+            while (index < last) {
+                ch = source[index];
+                if (isWhiteSpace(ch)) {
+                    advance();
+                } else if (ch === '{') {
+                    advance();
+                    break;
+                } else {
+                    // this is direct pattern
+                    direct = true;
+                    break;
+                }
+            }
+
+            if (!direct) {
+                // type expression { is found
+                brace = 1;
+                type = '';
+                while (index < last) {
+                    ch = source[index];
+                    if (isLineTerminator(ch)) {
+                        advance();
+                    } else {
+                        if (ch === '}') {
+                            brace -= 1;
+                            if (brace === 0) {
+                                advance();
+                                break;
+                            }
+                        } else if (ch === '{') {
+                            brace += 1;
+                        }
+                        type += advance();
+                    }
+                }
+
+                if (brace !== 0) {
+                    // braces is not balanced
+                    return throwError('Braces are not balanced');
+                }
+
+                try {
+                    if (isParamTitle(title)) {
+                        return typed.parseParamType(type);
+                    }
+                    return typed.parseType(type);
+                } catch (e1) {
+                    // parse failed
+                    return null;
+                }
+            } else {
+                return null;
+            }
+        }
+
+        function scanIdentifier(last) {
+            var identifier;
+            if (!isIdentifierStart(source[index])) {
+                return null;
+            }
+            identifier = advance();
+            while (index < last && isIdentifierPart(source[index])) {
+                identifier += advance();
+            }
+            return identifier;
+        }
+
+        function skipWhiteSpace(last) {
+            while (index < last && (isWhiteSpace(source[index]) || isLineTerminator(source[index]))) {
+                advance();
+            }
+        }
+
+        function parseName(last, allowBrackets, allowNestedParams) {
+            var name = '', useBrackets;
+
+            skipWhiteSpace(last);
+
+            if (index >= last) {
+                return null;
+            }
+
+            if (allowBrackets && source[index] === '[') {
+                useBrackets = true;
+                name = advance();
+            }
+
+            if (!isIdentifierStart(source[index])) {
+                return null;
+            }
+
+            name += scanIdentifier(last);
+
+            if (allowNestedParams) {
+                while (source[index] === '.') {
+                    name += '.';
+                    index += 1;
+                    name += scanIdentifier(last);
+                }
+            }
+
+            if (useBrackets) {
+                // do we have a default value for this?
+                if (source[index] === '=') {
+
+                    // consume the '='' symbol
+                    name += advance();
+                    // scan in the default value
+                    while (index < last && source[index] !== ']') {
+                        name += advance();
+                    }
+                }
+
+                if (index >= last  || source[index] !== ']') {
+                    // we never found a closing ']'
+                    return null;
+                }
+
+                // collect the last ']'
+                name += advance();
+            }
+
+            return name;
+        }
+
+        function skipToTag() {
+            while (index < length && source[index] !== '@') {
+                advance();
+            }
+            if (index >= length) {
+                return false;
+            }
+            assert(source[index] === '@');
+            return true;
+        }
+
+        function TagParser(options, title) {
+            this._options = options;
+            this._title = title;
+            this._tag = {
+                title: title,
+                description: null
+            };
+            if (this._options.lineNumbers) {
+                this._tag.lineNumber = lineNumber;
+            }
+            this._last = 0;
+            // space to save special information for title parsers.
+            this._extra = { };
+        }
+
+        // addError(err, ...)
+        TagParser.prototype.addError = function addError(errorText) {
+            var args = Array.prototype.slice.call(arguments, 1),
+                msg = errorText.replace(
+                    /%(\d)/g,
+                    function (whole, index) {
+                        assert(index < args.length, 'Message reference must be in range');
+                        return args[index];
+                    }
+                );
+
+            if (!this._tag.errors) {
+                this._tag.errors = [];
+            }
+            if (strict) {
+                throwError(msg);
+            }
+            this._tag.errors.push(msg);
+            return recoverable;
+        };
+
+        TagParser.prototype.parseType = function () {
+            // type required titles
+            if (isTypeParameterRequired(this._title)) {
+                try {
+                    this._tag.type = parseType(this._title, this._last);
+                    if (!this._tag.type) {
+                        if (!isParamTitle(this._title)) {
+                            if (!this.addError('Missing or invalid tag type')) {
+                                return false;
+                            }
+                        }
+                    }
+                } catch (error) {
+                    this._tag.type = null;
+                    if (!this.addError(error.message)) {
+                        return false;
+                    }
+                }
+            } else if (isAllowedType(this._title)) {
+                // optional types
+                try {
+                    this._tag.type = parseType(this._title, this._last);
+                } catch (e) {
+                    //For optional types, lets drop the thrown error when we hit the end of the file
+                }
+            }
+            return true;
+        };
+
+        TagParser.prototype._parseNamePath = function (optional) {
+            var name;
+            name = parseName(this._last, sloppy && isParamTitle(this._title), true);
+            if (!name) {
+                if (!optional) {
+                    if (!this.addError('Missing or invalid tag name')) {
+                        return false;
+                    }
+                }
+            }
+            this._tag.name = name;
+            return true;
+        };
+
+        TagParser.prototype.parseNamePath = function () {
+            return this._parseNamePath(false);
+        };
+
+        TagParser.prototype.parseNamePathOptional = function () {
+            return this._parseNamePath(true);
+        };
+
+
+        TagParser.prototype.parseName = function () {
+            var assign, name;
+
+            // param, property requires name
+            if (isAllowedName(this._title)) {
+                this._tag.name = parseName(this._last, sloppy && isParamTitle(this._title), isAllowedNested(this._title));
+                if (!this._tag.name) {
+                    if (!isNameParameterRequired(this._title)) {
+                        return true;
+                    }
+
+                    // it's possible the name has already been parsed but interpreted as a type
+                    // it's also possible this is a sloppy declaration, in which case it will be
+                    // fixed at the end
+                    if (isParamTitle(this._title) && this._tag.type.name) {
+                        this._extra.name = this._tag.type;
+                        this._tag.name = this._tag.type.name;
+                        this._tag.type = null;
+                    } else {
+                        if (!this.addError('Missing or invalid tag name')) {
+                            return false;
+                        }
+                    }
+                } else {
+                    name = this._tag.name;
+                    if (name.charAt(0) === '[' && name.charAt(name.length - 1) === ']') {
+                        // extract the default value if there is one
+                        // example: @param {string} [somebody=John Doe] description
+                        assign = name.substring(1, name.length - 1).split('=');
+                        if (assign[1]) {
+                            this._tag['default'] = assign[1];
+                        }
+                        this._tag.name = assign[0];
+
+                        // convert to an optional type
+                        if (this._tag.type.type !== 'OptionalType') {
+                            this._tag.type = {
+                                type: 'OptionalType',
+                                expression: this._tag.type
+                            };
+                        }
+                    }
+                }
+            }
+
+            return true;
+        };
+
+        TagParser.prototype.parseDescription = function parseDescription() {
+            var description = trim(sliceSource(source, index, this._last));
+            if (description) {
+                if ((/^-\s+/).test(description)) {
+                    description = description.substring(2);
+                }
+                this._tag.description = description;
+            }
+            return true;
+        };
+
+        TagParser.prototype.parseKind = function parseKind() {
+            var kind, kinds;
+            kinds = {
+                'class': true,
+                'constant': true,
+                'event': true,
+                'external': true,
+                'file': true,
+                'function': true,
+                'member': true,
+                'mixin': true,
+                'module': true,
+                'namespace': true,
+                'typedef': true
+            };
+            kind = trim(sliceSource(source, index, this._last));
+            this._tag.kind = kind;
+            if (!hasOwnProperty(kinds, kind)) {
+                if (!this.addError('Invalid kind name \'%0\'', kind)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+
+        TagParser.prototype.parseAccess = function parseAccess() {
+            var access;
+            access = trim(sliceSource(source, index, this._last));
+            this._tag.access = access;
+            if (access !== 'private' && access !== 'protected' && access !== 'public') {
+                if (!this.addError('Invalid access name \'%0\'', access)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+
+        TagParser.prototype.parseVariation = function parseVariation() {
+            var variation, text;
+            text = trim(sliceSource(source, index, this._last));
+            variation = parseFloat(text, 10);
+            this._tag.variation = variation;
+            if (isNaN(variation)) {
+                if (!this.addError('Invalid variation \'%0\'', text)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+
+        TagParser.prototype.ensureEnd = function () {
+            var shouldBeEmpty = trim(sliceSource(source, index, this._last));
+            if (shouldBeEmpty) {
+                if (!this.addError('Unknown content \'%0\'', shouldBeEmpty)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+
+        TagParser.prototype.epilogue = function epilogue() {
+            var description;
+
+            description = this._tag.description;
+            // un-fix potentially sloppy declaration
+            if (isParamTitle(this._title) && !this._tag.type && description && description.charAt(0) === '[') {
+                this._tag.type = this._extra.name;
+                this._tag.name = undefined;
+
+                if (!sloppy) {
+                    if (!this.addError('Missing or invalid tag name')) {
+                        return false;
+                    }
+                }
+            }
+
+            return true;
+        };
+
+        Rules = {
+            // http://usejsdoc.org/tags-access.html
+            'access': ['parseAccess'],
+            // http://usejsdoc.org/tags-alias.html
+            'alias': ['parseNamePath', 'ensureEnd'],
+            // http://usejsdoc.org/tags-augments.html
+            'augments': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // http://usejsdoc.org/tags-constructor.html
+            'constructor': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // Synonym: http://usejsdoc.org/tags-constructor.html
+            'class': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // Synonym: http://usejsdoc.org/tags-extends.html
+            'extends': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // http://usejsdoc.org/tags-deprecated.html
+            'deprecated': ['parseDescription'],
+            // http://usejsdoc.org/tags-global.html
+            'global': ['ensureEnd'],
+            // http://usejsdoc.org/tags-inner.html
+            'inner': ['ensureEnd'],
+            // http://usejsdoc.org/tags-instance.html
+            'instance': ['ensureEnd'],
+            // http://usejsdoc.org/tags-kind.html
+            'kind': ['parseKind'],
+            // http://usejsdoc.org/tags-mixes.html
+            'mixes': ['parseNamePath', 'ensureEnd'],
+            // http://usejsdoc.org/tags-mixin.html
+            'mixin': ['parseNamePathOptional', 'ensureEnd'],
+            // http://usejsdoc.org/tags-member.html
+            'member': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // http://usejsdoc.org/tags-method.html
+            'method': ['parseNamePathOptional', 'ensureEnd'],
+            // http://usejsdoc.org/tags-module.html
+            'module': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // Synonym: http://usejsdoc.org/tags-method.html
+            'func': ['parseNamePathOptional', 'ensureEnd'],
+            // Synonym: http://usejsdoc.org/tags-method.html
+            'function': ['parseNamePathOptional', 'ensureEnd'],
+            // Synonym: http://usejsdoc.org/tags-member.html
+            'var': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // http://usejsdoc.org/tags-name.html
+            'name': ['parseNamePath', 'ensureEnd'],
+            // http://usejsdoc.org/tags-namespace.html
+            'namespace': ['parseType', 'parseNamePathOptional', 'ensureEnd'],
+            // http://usejsdoc.org/tags-private.html
+            'private': ['parseType', 'parseDescription'],
+            // http://usejsdoc.org/tags-protected.html
+            'protected': ['parseType', 'parseDescription'],
+            // http://usejsdoc.org/tags-public.html
+            'public': ['parseType', 'parseDescription'],
+            // http://usejsdoc.org/tags-readonly.html
+            'readonly': ['ensureEnd'],
+            // http://usejsdoc.org/tags-requires.html
+            'requires': ['parseNamePath', 'ensureEnd'],
+            // http://usejsdoc.org/tags-since.html
+            'since': ['parseDescription'],
+            // http://usejsdoc.org/tags-static.html
+            'static': ['ensureEnd'],
+            // http://usejsdoc.org/tags-summary.html
+            'summary': ['parseDescription'],
+            // http://usejsdoc.org/tags-this.html
+            'this': ['parseNamePath', 'ensureEnd'],
+            // http://usejsdoc.org/tags-todo.html
+            'todo': ['parseDescription'],
+            // http://usejsdoc.org/tags-variation.html
+            'variation': ['parseVariation'],
+            // http://usejsdoc.org/tags-version.html
+            'version': ['parseDescription']
+        };
+
+        TagParser.prototype.parse = function parse() {
+            var i, iz, sequences, method;
+
+            // empty title
+            if (!this._title) {
+                if (!this.addError('Missing or invalid title')) {
+                    return null;
+                }
+            }
+
+            // Seek to content last index.
+            this._last = seekContent(this._title);
+
+            if (hasOwnProperty(Rules, this._title)) {
+                sequences = Rules[this._title];
+            } else {
+                // default sequences
+                sequences = ['parseType', 'parseName', 'parseDescription', 'epilogue'];
+            }
+
+            for (i = 0, iz = sequences.length; i < iz; ++i) {
+                method = sequences[i];
+                if (!this[method]()) {
+                    return null;
+                }
+            }
+
+            // Seek global index to end of this tag.
+            index = this._last;
+            return this._tag;
+        };
+
+        function parseTag(options) {
+            var title, parser;
+
+            // skip to tag
+            if (!skipToTag()) {
+                return null;
+            }
+
+            // scan title
+            title = scanTitle();
+
+            // construct tag parser
+            parser = new TagParser(options, title);
+            return parser.parse();
+        }
+
+        //
+        // Parse JSDoc
+        //
+
+        function scanJSDocDescription() {
+            var description = '', ch, atAllowed;
+
+            atAllowed = true;
+            while (index < length) {
+                ch = source[index];
+
+                if (atAllowed && ch === '@') {
+                    break;
+                }
+
+                if (isLineTerminator(ch)) {
+                    atAllowed = true;
+                } else if (atAllowed && !isWhiteSpace(ch)) {
+                    atAllowed = false;
+                }
+
+                description += advance();
+            }
+            return trim(description);
+        }
+
+        function parse(comment, options) {
+            var tags = [], tag, description, interestingTags, i, iz;
+
+            if (options === undefined) {
+                options = {};
+            }
+
+            if (typeof options.unwrap === 'boolean' && options.unwrap) {
+                source = unwrapComment(comment);
+            } else {
+                source = comment;
+            }
+
+            // array of relevant tags
+            if (options.tags) {
+                if (isArray(options.tags)) {
+                    interestingTags = { };
+                    for (i = 0, iz = options.tags.length; i < iz; i++) {
+                        if (typeof options.tags[i] === 'string') {
+                            interestingTags[options.tags[i]] = true;
+                        } else {
+                            throwError('Invalid "tags" parameter: ' + options.tags);
+                        }
+                    }
+                } else {
+                    throwError('Invalid "tags" parameter: ' + options.tags);
+                }
+            }
+
+            if (!CanAccessStringByIndex) {
+                source = source.split('');
+            }
+
+            length = source.length;
+            index = 0;
+            lineNumber = 0;
+            recoverable = options.recoverable;
+            sloppy = options.sloppy;
+            strict = options.strict;
+
+            description = scanJSDocDescription();
+
+            while (true) {
+                tag = parseTag(options);
+                if (!tag) {
+                    break;
+                }
+                if (!interestingTags || interestingTags.hasOwnProperty(tag.title)) {
+                    tags.push(tag);
+                }
+            }
+
+            return {
+                description: description,
+                tags: tags
+            };
+        }
+        exports.parse = parse;
+    }(jsdoc = {}));
+
+    exports.version = VERSION;
+    exports.parse = jsdoc.parse;
+    exports.parseType = typed.parseType;
+    exports.parseParamType = typed.parseParamType;
+    exports.unwrapComment = unwrapComment;
+    exports.Syntax = shallowCopy(typed.Syntax);
+    exports.Error = DoctrineError;
+    exports.type = {
+        Syntax: exports.Syntax,
+        parseType: typed.parseType,
+        parseParamType: typed.parseParamType,
+        stringify: typed.stringify
+    };
+}(typeof exports === 'undefined' ? (doctrine = {}) : exports));
+/* vim: set sw=4 ts=4 et tw=80 : */
+
+},{}],5:[function(require,module,exports){
+/*
+  Copyright (C) 2012-2013 Yusuke Suzuki <utatane.tea@gmail.com>
+  Copyright (C) 2013 Alex Seville <hi@alexanderseville.com>
+
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+
+  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+  ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+/**
+ * Escope (<a href="http://github.com/Constellation/escope">escope</a>) is an <a
+ * href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript</a>
+ * scope analyzer extracted from the <a
+ * href="http://github.com/Constellation/esmangle">esmangle project</a/>.
+ * <p>
+ * <em>escope</em> finds lexical scopes in a source program, i.e. areas of that
+ * program where different occurrences of the same identifier refer to the same
+ * variable. With each scope the contained variables are collected, and each
+ * identifier reference in code is linked to its corresponding variable (if
+ * possible).
+ * <p>
+ * <em>escope</em> works on a syntax tree of the parsed source code which has
+ * to adhere to the <a
+ * href="https://developer.mozilla.org/en-US/docs/SpiderMonkey/Parser_API">
+ * Mozilla Parser API</a>. E.g. <a href="http://esprima.org">esprima</a> is a parser
+ * that produces such syntax trees.
+ * <p>
+ * The main interface is the {@link analyze} function.
+ * @module
+ */
+
+/*jslint bitwise:true */
+/*global exports:true, define:true, require:true*/
+(function (factory, global) {
+    'use strict';
+
+    function namespace(str, obj) {
+        var i, iz, names, name;
+        names = str.split('.');
+        for (i = 0, iz = names.length; i < iz; ++i) {
+            name = names[i];
+            if (obj.hasOwnProperty(name)) {
+                obj = obj[name];
+            } else {
+                obj = (obj[name] = {});
+            }
+        }
+        return obj;
+    }
+
+    // Universal Module Definition (UMD) to support AMD, CommonJS/Node.js,
+    // and plain browser loading,
+    if (typeof define === 'function' && define.amd) {
+        define('escope', ['exports', 'estraverse'], function (exports, estraverse) {
+            factory(exports, global, estraverse);
+        });
+    } else if (typeof exports !== 'undefined') {
+        factory(exports, global, require('estraverse'));
+    } else {
+        factory(namespace('escope', global), global, global.estraverse);
+    }
+}(function (exports, global, estraverse) {
+    'use strict';
+
+    var Syntax,
+        Map,
+        currentScope,
+        globalScope,
+        scopes,
+        options;
+
+    Syntax = estraverse.Syntax;
+
+    if (typeof global.Map !== 'undefined') {
+        // ES6 Map
+        Map = global.Map;
+    } else {
+        Map = function Map() {
+            this.__data = {};
+        };
+
+        Map.prototype.get = function MapGet(key) {
+            key = '$' + key;
+            if (this.__data.hasOwnProperty(key)) {
+                return this.__data[key];
+            }
+            return undefined;
+        };
+
+        Map.prototype.has = function MapHas(key) {
+            key = '$' + key;
+            return this.__data.hasOwnProperty(key);
+        };
+
+        Map.prototype.set = function MapSet(key, val) {
+            key = '$' + key;
+            this.__data[key] = val;
+        };
+
+        Map.prototype['delete'] = function MapDelete(key) {
+            key = '$' + key;
+            return delete this.__data[key];
+        };
+    }
+
+    function assert(cond, text) {
+        if (!cond) {
+            throw new Error(text);
+        }
+    }
+
+    function defaultOptions() {
+        return {
+            optimistic: false,
+            directive: false
+        };
+    }
+
+    function updateDeeply(target, override) {
+        var key, val;
+
+        function isHashObject(target) {
+            return typeof target === 'object' && target instanceof Object && !(target instanceof RegExp);
+        }
+
+        for (key in override) {
+            if (override.hasOwnProperty(key)) {
+                val = override[key];
+                if (isHashObject(val)) {
+                    if (isHashObject(target[key])) {
+                        updateDeeply(target[key], val);
+                    } else {
+                        target[key] = updateDeeply({}, val);
+                    }
+                } else {
+                    target[key] = val;
+                }
+            }
+        }
+        return target;
+    }
+
+    /**
+     * A Reference represents a single occurrence of an identifier in code.
+     * @class Reference
+     */
+    function Reference(ident, scope, flag, writeExpr, maybeImplicitGlobal) {
+        /** 
+         * Identifier syntax node.
+         * @member {esprima#Identifier} Reference#identifier 
+         */
+        this.identifier = ident;
+        /** 
+         * Reference to the enclosing Scope.
+         * @member {Scope} Reference#from 
+         */
+        this.from = scope;
+        /**
+         * Whether the reference comes from a dynamic scope (such as 'eval',
+         * 'with', etc.), and may be trapped by dynamic scopes.
+         * @member {boolean} Reference#tainted
+         */
+        this.tainted = false;
+        /** 
+         * The variable this reference is resolved with.
+         * @member {Variable} Reference#resolved 
+         */
+        this.resolved = null;
+        /** 
+         * The read-write mode of the reference. (Value is one of {@link
+         * Reference.READ}, {@link Reference.RW}, {@link Reference.WRITE}).
+         * @member {number} Reference#flag 
+         * @private
+         */
+        this.flag = flag;
+        if (this.isWrite()) {
+            /** 
+             * If reference is writeable, this is the tree being written to it.
+             * @member {esprima#Node} Reference#writeExpr 
+             */
+            this.writeExpr = writeExpr;
+        }
+        /** 
+         * Whether the Reference might refer to a global variable.
+         * @member {boolean} Reference#__maybeImplicitGlobal 
+         * @private
+         */
+        this.__maybeImplicitGlobal = maybeImplicitGlobal;
+    }
+
+    /** 
+     * @constant Reference.READ 
+     * @private
+     */
+    Reference.READ = 0x1;
+    /** 
+     * @constant Reference.WRITE 
+     * @private
+     */
+    Reference.WRITE = 0x2;
+    /** 
+     * @constant Reference.RW 
+     * @private
+     */
+    Reference.RW = 0x3;
+
+    /**
+     * Whether the reference is static.
+     * @method Reference#isStatic
+     * @return {boolean}
+     */
+    Reference.prototype.isStatic = function isStatic() {
+        return !this.tainted && this.resolved && this.resolved.scope.isStatic();
+    };
+
+    /**
+     * Whether the reference is writeable.
+     * @method Reference#isWrite
+     * @return {boolean}
+     */
+    Reference.prototype.isWrite = function isWrite() {
+        return this.flag & Reference.WRITE;
+    };
+
+    /**
+     * Whether the reference is readable.
+     * @method Reference#isRead
+     * @return {boolean}
+     */
+    Reference.prototype.isRead = function isRead() {
+        return this.flag & Reference.READ;
+    };
+
+    /**
+     * Whether the reference is read-only.
+     * @method Reference#isReadOnly
+     * @return {boolean}
+     */
+    Reference.prototype.isReadOnly = function isReadOnly() {
+        return this.flag === Reference.READ;
+    };
+
+    /**
+     * Whether the reference is write-only.
+     * @method Reference#isWriteOnly
+     * @return {boolean}
+     */
+    Reference.prototype.isWriteOnly = function isWriteOnly() {
+        return this.flag === Reference.WRITE;
+    };
+
+    /**
+     * Whether the reference is read-write.
+     * @method Reference#isReadWrite
+     * @return {boolean}
+     */
+    Reference.prototype.isReadWrite = function isReadWrite() {
+        return this.flag === Reference.RW;
+    };
+
+    /**
+     * A Variable represents a locally scoped identifier. These include arguments to
+     * functions.
+     * @class Variable
+     */
+    function Variable(name, scope) {
+        /**  
+         * The variable name, as given in the source code.
+         * @member {String} Variable#name 
+         */
+        this.name = name;
+        /**
+         * List of defining occurrences of this variable (like in 'var ...'
+         * statements or as parameter), as AST nodes.
+         * @member {esprima.Identifier[]} Variable#identifiers
+         */
+        this.identifiers = [];
+        /**
+         * List of {@link Reference|references} of this variable (excluding parameter entries)
+         * in its defining scope and all nested scopes. For defining
+         * occurrences only see {@link Variable#defs}.
+         * @member {Reference[]} Variable#references
+         */
+        this.references = [];
+
+        /**
+         * List of defining occurrences of this variable (like in 'var ...'
+         * statements or as parameter), as custom objects.
+         * @typedef {Object} DefEntry
+         * @property {String} DefEntry.type - the type of the occurrence (e.g.
+         *      "Parameter", "Variable", ...)
+         * @property {esprima.Identifier} DefEntry.name - the identifier AST node of the occurrence
+         * @property {esprima.Node} DefEntry.node - the enclosing node of the
+         *      identifier
+         * @property {esprima.Node} [DefEntry.parent] - the enclosing statement
+         *      node of the identifier
+         * @member {DefEntry[]} Variable#defs
+         */
+        this.defs = [];
+
+        this.tainted = false;
+        /**
+         * Whether this is a stack variable.
+         * @member {boolean} Variable#stack
+         */
+        this.stack = true;
+        /** 
+         * Reference to the enclosing Scope.
+         * @member {Scope} Variable#scope 
+         */
+        this.scope = scope;
+    }
+
+    Variable.CatchClause = 'CatchClause';
+    Variable.Parameter = 'Parameter';
+    Variable.FunctionName = 'FunctionName';
+    Variable.Variable = 'Variable';
+    Variable.ImplicitGlobalVariable = 'ImplicitGlobalVariable';
+
+    function isStrictScope(scope, block) {
+        var body, i, iz, stmt, expr;
+
+        // When upper scope is exists and strict, inner scope is also strict.
+        if (scope.upper && scope.upper.isStrict) {
+            return true;
+        }
+
+        if (scope.type === 'function') {
+            body = block.body;
+        } else if (scope.type === 'global') {
+            body = block;
+        } else {
+            return false;
+        }
+
+        if (options.directive) {
+            for (i = 0, iz = body.body.length; i < iz; ++i) {
+                stmt = body.body[i];
+                if (stmt.type !== 'DirectiveStatement') {
+                    break;
+                }
+                if (stmt.raw === '"use strict"' || stmt.raw === '\'use strict\'') {
+                    return true;
+                }
+            }
+        } else {
+            for (i = 0, iz = body.body.length; i < iz; ++i) {
+                stmt = body.body[i];
+                if (stmt.type !== Syntax.ExpressionStatement) {
+                    break;
+                }
+                expr = stmt.expression;
+                if (expr.type !== Syntax.Literal || typeof expr.value !== 'string') {
+                    break;
+                }
+                if (expr.raw != null) {
+                    if (expr.raw === '"use strict"' || expr.raw === '\'use strict\'') {
+                        return true;
+                    }
+                } else {
+                    if (expr.value === 'use strict') {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
+    /**
+     * @class Scope
+     */
+    function Scope(block, opt) {
+        var variable, body;
+
+        /**
+         * One of 'catch', 'with', 'function' or 'global'.
+         * @member {String} Scope#type
+         */
+        this.type =
+            (block.type === Syntax.CatchClause) ? 'catch' :
+            (block.type === Syntax.WithStatement) ? 'with' :
+            (block.type === Syntax.Program) ? 'global' : 'function';
+         /**
+         * The scoped {@link Variable}s of this scope, as <code>{ Variable.name
+         * : Variable }</code>.
+         * @member {Map} Scope#set
+         */
+        this.set = new Map();
+        /**
+         * The tainted variables of this scope, as <code>{ Variable.name :
+         * boolean }</code>.
+         * @member {Map} Scope#taints */
+        this.taints = new Map();
+        /**
+         * Generally, through the lexical scoping of JS you can always know
+         * which variable an identifier in the source code refers to. There are
+         * a few exceptions to this rule. With 'global' and 'with' scopes you
+         * can only decide at runtime which variable a reference refers to.
+         * Moreover, if 'eval()' is used in a scope, it might introduce new
+         * bindings in this or its prarent scopes.
+         * All those scopes are considered 'dynamic'.
+         * @member {boolean} Scope#dynamic
+         */
+        this.dynamic = this.type === 'global' || this.type === 'with';
+        /**
+         * A reference to the scope-defining syntax node.
+         * @member {esprima.Node} Scope#block
+         */
+        this.block = block;
+         /**
+         * The {@link Reference|references} that are not resolved with this scope.
+         * @member {Reference[]} Scope#through
+         */
+        this.through = [];
+         /**
+         * The scoped {@link Variable}s of this scope. In the case of a
+         * 'function' scope this includes the automatic argument <em>arguments</em> as
+         * its first element, as well as all further formal arguments.
+         * @member {Variable[]} Scope#variables
+         */
+        this.variables = [];
+         /**
+         * Any variable {@link Reference|reference} found in this scope. This
+         * includes occurrences of local variables as well as variables from
+         * parent scopes (including the global scope). For local variables
+         * this also includes defining occurrences (like in a 'var' statement).
+         * In a 'function' scope this does not include the occurrences of the
+         * formal parameter in the parameter list.
+         * @member {Reference[]} Scope#references
+         */
+        this.references = [];
+         /**
+         * List of {@link Reference}s that are left to be resolved (i.e. which
+         * need to be linked to the variable they refer to). Used internally to
+         * resolve bindings during scope analysis. On a finalized scope
+         * analysis, all sopes have <em>left</em> value <strong>null</strong>.
+         * @member {Reference[]} Scope#left
+         */
+        this.left = [];
+         /**
+         * For 'global' and 'function' scopes, this is a self-reference. For
+         * other scope types this is the <em>variableScope</em> value of the
+         * parent scope.
+         * @member {Scope} Scope#variableScope
+         */
+        this.variableScope =
+            (this.type === 'global' || this.type === 'function') ? this : currentScope.variableScope;
+         /**
+         * Whether this scope is created by a FunctionExpression.
+         * @member {boolean} Scope#functionExpressionScope
+         */
+        this.functionExpressionScope = false;
+         /**
+         * Whether this is a scope that contains an 'eval()' invocation.
+         * @member {boolean} Scope#directCallToEvalScope
+         */
+        this.directCallToEvalScope = false;
+         /**
+         * @member {boolean} Scope#thisFound
+         */
+        this.thisFound = false;
+        body = this.type === 'function' ? block.body : block;
+        if (opt.naming) {
+            this.__define(block.id, {
+                type: Variable.FunctionName,
+                name: block.id,
+                node: block
+            });
+            this.functionExpressionScope = true;
+        } else {
+            if (this.type === 'function') {
+                variable = new Variable('arguments', this);
+                this.taints.set('arguments', true);
+                this.set.set('arguments', variable);
+                this.variables.push(variable);
+            }
+
+            if (block.type === Syntax.FunctionExpression && block.id) {
+                new Scope(block, { naming: true });
+            }
+        }
+
+         /**
+         * Reference to the parent {@link Scope|scope}.
+         * @member {Scope} Scope#upper
+         */
+        this.upper = currentScope;
+         /**
+         * Whether 'use strict' is in effect in this scope.
+         * @member {boolean} Scope#isStrict
+         */
+        this.isStrict = isStrictScope(this, block);
+
+         /**
+         * List of nested {@link Scope}s.
+         * @member {Scope[]} Scope#childScopes
+         */
+        this.childScopes = [];
+        if (currentScope) {
+            currentScope.childScopes.push(this);
+        }
+
+
+        // RAII
+        currentScope = this;
+        if (this.type === 'global') {
+            globalScope = this;
+            globalScope.implicit = {
+                set: new Map(),
+                variables: []
+            };
+        }
+        scopes.push(this);
+    }
+
+    Scope.prototype.__close = function __close() {
+        var i, iz, ref, current, node, implicit;
+
+        // Because if this is global environment, upper is null
+        if (!this.dynamic || options.optimistic) {
+            // static resolve
+            for (i = 0, iz = this.left.length; i < iz; ++i) {
+                ref = this.left[i];
+                if (!this.__resolve(ref)) {
+                    this.__delegateToUpperScope(ref);
+                }
+            }
+        } else {
+            // this is "global" / "with" / "function with eval" environment
+            if (this.type === 'with') {
+                for (i = 0, iz = this.left.length; i < iz; ++i) {
+                    ref = this.left[i];
+                    ref.tainted = true;
+                    this.__delegateToUpperScope(ref);
+                }
+            } else {
+                for (i = 0, iz = this.left.length; i < iz; ++i) {
+                    // notify all names are through to global
+                    ref = this.left[i];
+                    current = this;
+                    do {
+                        current.through.push(ref);
+                        current = current.upper;
+                    } while (current);
+                }
+            }
+        }
+
+        if (this.type === 'global') {
+            implicit = [];
+            for (i = 0, iz = this.left.length; i < iz; ++i) {
+                ref = this.left[i];
+                if (ref.__maybeImplicitGlobal && !this.set.has(ref.identifier.name)) {
+                    implicit.push(ref.__maybeImplicitGlobal);
+                }
+            }
+
+            // create an implicit global variable from assignment expression
+            for (i = 0, iz = implicit.length; i < iz; ++i) {
+                node = implicit[i];
+                this.__defineImplicit(node.left, {
+                    type: Variable.ImplicitGlobalVariable,
+                    name: node.left,
+                    node: node
+                });
+            }
+        }
+
+        this.left = null;
+        currentScope = this.upper;
+    };
+
+    Scope.prototype.__resolve = function __resolve(ref) {
+        var variable, name;
+        name = ref.identifier.name;
+        if (this.set.has(name)) {
+            variable = this.set.get(name);
+            variable.references.push(ref);
+            variable.stack = variable.stack && ref.from.variableScope === this.variableScope;
+            if (ref.tainted) {
+                variable.tainted = true;
+                this.taints.set(variable.name, true);
+            }
+            ref.resolved = variable;
+            return true;
+        }
+        return false;
+    };
+
+    Scope.prototype.__delegateToUpperScope = function __delegateToUpperScope(ref) {
+        if (this.upper) {
+            this.upper.left.push(ref);
+        }
+        this.through.push(ref);
+    };
+
+    Scope.prototype.__defineImplicit = function __defineImplicit(node, info) {
+        var name, variable;
+        if (node && node.type === Syntax.Identifier) {
+            name = node.name;
+            if (!this.implicit.set.has(name)) {
+                variable = new Variable(name, this);
+                variable.identifiers.push(node);
+                variable.defs.push(info);
+                this.implicit.set.set(name, variable);
+                this.implicit.variables.push(variable);
+            } else {
+                variable = this.implicit.set.get(name);
+                variable.identifiers.push(node);
+                variable.defs.push(info);
+            }
+        }
+    };
+
+    Scope.prototype.__define = function __define(node, info) {
+        var name, variable;
+        if (node && node.type === Syntax.Identifier) {
+            name = node.name;
+            if (!this.set.has(name)) {
+                variable = new Variable(name, this);
+                variable.identifiers.push(node);
+                variable.defs.push(info);
+                this.set.set(name, variable);
+                this.variables.push(variable);
+            } else {
+                variable = this.set.get(name);
+                variable.identifiers.push(node);
+                variable.defs.push(info);
+            }
+        }
+    };
+
+    Scope.prototype.__referencing = function __referencing(node, assign, writeExpr, maybeImplicitGlobal) {
+        var ref;
+        // because Array element may be null
+        if (node && node.type === Syntax.Identifier) {
+            ref = new Reference(node, this, assign || Reference.READ, writeExpr, maybeImplicitGlobal);
+            this.references.push(ref);
+            this.left.push(ref);
+        }
+    };
+
+    Scope.prototype.__detectEval = function __detectEval() {
+        var current;
+        current = this;
+        this.directCallToEvalScope = true;
+        do {
+            current.dynamic = true;
+            current = current.upper;
+        } while (current);
+    };
+
+    Scope.prototype.__detectThis = function __detectThis() {
+        this.thisFound = true;
+    };
+
+    Scope.prototype.__isClosed = function isClosed() {
+        return this.left === null;
+    };
+
+    // API Scope#resolve(name)
+    // returns resolved reference
+    Scope.prototype.resolve = function resolve(ident) {
+        var ref, i, iz;
+        assert(this.__isClosed(), 'scope should be closed');
+        assert(ident.type === Syntax.Identifier, 'target should be identifier');
+        for (i = 0, iz = this.references.length; i < iz; ++i) {
+            ref = this.references[i];
+            if (ref.identifier === ident) {
+                return ref;
+            }
+        }
+        return null;
+    };
+
+    // API Scope#isStatic
+    // returns this scope is static
+    Scope.prototype.isStatic = function isStatic() {
+        return !this.dynamic;
+    };
+
+    // API Scope#isArgumentsMaterialized
+    // return this scope has materialized arguments
+    Scope.prototype.isArgumentsMaterialized = function isArgumentsMaterialized() {
+        // TODO(Constellation)
+        // We can more aggressive on this condition like this.
+        //
+        // function t() {
+        //     // arguments of t is always hidden.
+        //     function arguments() {
+        //     }
+        // }
+        var variable;
+
+        // This is not function scope
+        if (this.type !== 'function') {
+            return true;
+        }
+
+        if (!this.isStatic()) {
+            return true;
+        }
+
+        variable = this.set.get('arguments');
+        assert(variable, 'always have arguments variable');
+        return variable.tainted || variable.references.length  !== 0;
+    };
+
+    // API Scope#isThisMaterialized
+    // return this scope has materialized `this` reference
+    Scope.prototype.isThisMaterialized = function isThisMaterialized() {
+        // This is not function scope
+        if (this.type !== 'function') {
+            return true;
+        }
+        if (!this.isStatic()) {
+            return true;
+        }
+        return this.thisFound;
+    };
+
+    Scope.mangledName = '__$escope$__';
+
+    Scope.prototype.attach = function attach() {
+        if (!this.functionExpressionScope) {
+            this.block[Scope.mangledName] = this;
+        }
+    };
+
+    Scope.prototype.detach = function detach() {
+        if (!this.functionExpressionScope) {
+            delete this.block[Scope.mangledName];
+        }
+    };
+
+    Scope.prototype.isUsedName = function (name) {
+        if (this.set.has(name)) {
+            return true;
+        }
+        for (var i = 0, iz = this.through.length; i < iz; ++i) {
+            if (this.through[i].identifier.name === name) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    /**
+     * @class ScopeManager
+     */
+    function ScopeManager(scopes) {
+        this.scopes = scopes;
+        this.attached = false;
+    }
+
+    // Returns appropliate scope for this node
+    ScopeManager.prototype.__get = function __get(node) {
+        var i, iz, scope;
+        if (this.attached) {
+            return node[Scope.mangledName] || null;
+        }
+        if (Scope.isScopeRequired(node)) {
+            for (i = 0, iz = this.scopes.length; i < iz; ++i) {
+                scope = this.scopes[i];
+                if (!scope.functionExpressionScope) {
+                    if (scope.block === node) {
+                        return scope;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+
+    ScopeManager.prototype.acquire = function acquire(node) {
+        return this.__get(node);
+    };
+
+    ScopeManager.prototype.release = function release(node) {
+        var scope = this.__get(node);
+        if (scope) {
+            scope = scope.upper;
+            while (scope) {
+                if (!scope.functionExpressionScope) {
+                    return scope;
+                }
+                scope = scope.upper;
+            }
+        }
+        return null;
+    };
+
+    ScopeManager.prototype.attach = function attach() {
+        var i, iz;
+        for (i = 0, iz = this.scopes.length; i < iz; ++i) {
+            this.scopes[i].attach();
+        }
+        this.attached = true;
+    };
+
+    ScopeManager.prototype.detach = function detach() {
+        var i, iz;
+        for (i = 0, iz = this.scopes.length; i < iz; ++i) {
+            this.scopes[i].detach();
+        }
+        this.attached = false;
+    };
+
+    Scope.isScopeRequired = function isScopeRequired(node) {
+        return Scope.isVariableScopeRequired(node) || node.type === Syntax.WithStatement || node.type === Syntax.CatchClause;
+    };
+
+    Scope.isVariableScopeRequired = function isVariableScopeRequired(node) {
+        return node.type === Syntax.Program || node.type === Syntax.FunctionExpression || node.type === Syntax.FunctionDeclaration;
+    };
+
+    /**
+     * Main interface function. Takes an Esprima syntax tree and returns the
+     * analyzed scopes.
+     * @function analyze
+     * @param {esprima.Tree} tree
+     * @param {Object} providedOptions - Options that tailor the scope analysis
+     * @param {boolean} [providedOptions.optimistic=false] - the optimistic flag
+     * @param {boolean} [providedOptions.directive=false]- the directive flag
+     * @param {boolean} [providedOptions.ignoreEval=false]- whether to check 'eval()' calls
+     * @return {ScopeManager}
+     */
+    function analyze(tree, providedOptions) {
+        var resultScopes;
+
+        options = updateDeeply(defaultOptions(), providedOptions);
+        resultScopes = scopes = [];
+        currentScope = null;
+        globalScope = null;
+
+        // attach scope and collect / resolve names
+        estraverse.traverse(tree, {
+            enter: function enter(node) {
+                var i, iz, decl;
+                if (Scope.isScopeRequired(node)) {
+                    new Scope(node, {});
+                }
+
+                switch (node.type) {
+                case Syntax.AssignmentExpression:
+                    if (node.operator === '=') {
+                        currentScope.__referencing(node.left, Reference.WRITE, node.right, (!currentScope.isStrict && node.left.name != null) && node);
+                    } else {
+                        currentScope.__referencing(node.left, Reference.RW, node.right);
+                    }
+                    currentScope.__referencing(node.right);
+                    break;
+
+                case Syntax.ArrayExpression:
+                    for (i = 0, iz = node.elements.length; i < iz; ++i) {
+                        currentScope.__referencing(node.elements[i]);
+                    }
+                    break;
+
+                case Syntax.BlockStatement:
+                    break;
+
+                case Syntax.BinaryExpression:
+                    currentScope.__referencing(node.left);
+                    currentScope.__referencing(node.right);
+                    break;
+
+                case Syntax.BreakStatement:
+                    break;
+
+                case Syntax.CallExpression:
+                    currentScope.__referencing(node.callee);
+                    for (i = 0, iz = node['arguments'].length; i < iz; ++i) {
+                        currentScope.__referencing(node['arguments'][i]);
+                    }
+
+                    // check this is direct call to eval
+                    if (!options.ignoreEval && node.callee.type === Syntax.Identifier && node.callee.name === 'eval') {
+                        currentScope.variableScope.__detectEval();
+                    }
+                    break;
+
+                case Syntax.CatchClause:
+                    currentScope.__define(node.param, {
+                        type: Variable.CatchClause,
+                        name: node.param,
+                        node: node
+                    });
+                    break;
+
+                case Syntax.ConditionalExpression:
+                    currentScope.__referencing(node.test);
+                    currentScope.__referencing(node.consequent);
+                    currentScope.__referencing(node.alternate);
+                    break;
+
+                case Syntax.ContinueStatement:
+                    break;
+
+                case Syntax.DirectiveStatement:
+                    break;
+
+                case Syntax.DoWhileStatement:
+                    currentScope.__referencing(node.test);
+                    break;
+
+                case Syntax.DebuggerStatement:
+                    break;
+
+                case Syntax.EmptyStatement:
+                    break;
+
+                case Syntax.ExpressionStatement:
+                    currentScope.__referencing(node.expression);
+                    break;
+
+                case Syntax.ForStatement:
+                    currentScope.__referencing(node.init);
+                    currentScope.__referencing(node.test);
+                    currentScope.__referencing(node.update);
+                    break;
+
+                case Syntax.ForInStatement:
+                    if (node.left.type === Syntax.VariableDeclaration) {
+                        currentScope.__referencing(node.left.declarations[0].id, Reference.WRITE, null, false);
+                    } else {
+                        currentScope.__referencing(node.left, Reference.WRITE, null, (!currentScope.isStrict && node.left.name != null) && node);
+                    }
+                    currentScope.__referencing(node.right);
+                    break;
+
+                case Syntax.FunctionDeclaration:
+                    // FunctionDeclaration name is defined in upper scope
+                    currentScope.upper.__define(node.id, {
+                        type: Variable.FunctionName,
+                        name: node.id,
+                        node: node
+                    });
+                    for (i = 0, iz = node.params.length; i < iz; ++i) {
+                        currentScope.__define(node.params[i], {
+                            type: Variable.Parameter,
+                            name: node.params[i],
+                            node: node,
+                            index: i
+                        });
+                    }
+                    break;
+
+                case Syntax.FunctionExpression:
+                    // id is defined in upper scope
+                    for (i = 0, iz = node.params.length; i < iz; ++i) {
+                        currentScope.__define(node.params[i], {
+                            type: Variable.Parameter,
+                            name: node.params[i],
+                            node: node,
+                            index: i
+                        });
+                    }
+                    break;
+
+                case Syntax.Identifier:
+                    break;
+
+                case Syntax.IfStatement:
+                    currentScope.__referencing(node.test);
+                    break;
+
+                case Syntax.Literal:
+                    break;
+
+                case Syntax.LabeledStatement:
+                    break;
+
+                case Syntax.LogicalExpression:
+                    currentScope.__referencing(node.left);
+                    currentScope.__referencing(node.right);
+                    break;
+
+                case Syntax.MemberExpression:
+                    currentScope.__referencing(node.object);
+                    if (node.computed) {
+                        currentScope.__referencing(node.property);
+                    }
+                    break;
+
+                case Syntax.NewExpression:
+                    currentScope.__referencing(node.callee);
+                    for (i = 0, iz = node['arguments'].length; i < iz; ++i) {
+                        currentScope.__referencing(node['arguments'][i]);
+                    }
+                    break;
+
+                case Syntax.ObjectExpression:
+                    break;
+
+                case Syntax.Program:
+                    break;
+
+                case Syntax.Property:
+                    currentScope.__referencing(node.value);
+                    break;
+
+                case Syntax.ReturnStatement:
+                    currentScope.__referencing(node.argument);
+                    break;
+
+                case Syntax.SequenceExpression:
+                    for (i = 0, iz = node.expressions.length; i < iz; ++i) {
+                        currentScope.__referencing(node.expressions[i]);
+                    }
+                    break;
+
+                case Syntax.SwitchStatement:
+                    currentScope.__referencing(node.discriminant);
+                    break;
+
+                case Syntax.SwitchCase:
+                    currentScope.__referencing(node.test);
+                    break;
+
+                case Syntax.ThisExpression:
+                    currentScope.variableScope.__detectThis();
+                    break;
+
+                case Syntax.ThrowStatement:
+                    currentScope.__referencing(node.argument);
+                    break;
+
+                case Syntax.TryStatement:
+                    break;
+
+                case Syntax.UnaryExpression:
+                    currentScope.__referencing(node.argument);
+                    break;
+
+                case Syntax.UpdateExpression:
+                    currentScope.__referencing(node.argument, Reference.RW, null);
+                    break;
+
+                case Syntax.VariableDeclaration:
+                    for (i = 0, iz = node.declarations.length; i < iz; ++i) {
+                        decl = node.declarations[i];
+                        currentScope.variableScope.__define(decl.id, {
+                            type: Variable.Variable,
+                            name: decl.id,
+                            node: decl,
+                            index: i,
+                            parent: node
+                        });
+                        if (decl.init) {
+                            // initializer is found
+                            currentScope.__referencing(decl.id, Reference.WRITE, decl.init, false);
+                            currentScope.__referencing(decl.init);
+                        }
+                    }
+                    break;
+
+                case Syntax.VariableDeclarator:
+                    break;
+
+                case Syntax.WhileStatement:
+                    currentScope.__referencing(node.test);
+                    break;
+
+                case Syntax.WithStatement:
+                    // WithStatement object is referenced at upper scope
+                    currentScope.upper.__referencing(node.object);
+                    break;
+                }
+            },
+
+            leave: function leave(node) {
+                while (currentScope && node === currentScope.block) {
+                    currentScope.__close();
+                }
+            }
+        });
+
+        assert(currentScope === null);
+        globalScope = null;
+        scopes = null;
+        options = null;
+
+        return new ScopeManager(resultScopes);
+    }
+
+    /** @name module:escope.version */
+    exports.version = '1.0.1';
+    /** @name module:escope.Reference */
+    exports.Reference = Reference;
+    /** @name module:escope.Variable */
+    exports.Variable = Variable;
+    /** @name module:escope.Scope */
+    exports.Scope = Scope;
+    /** @name module:escope.ScopeManager */
+    exports.ScopeManager = ScopeManager;
+    /** @name module:escope.analyze */
+    exports.analyze = analyze;
+}, this));
+/* vim: set sw=4 ts=4 et tw=80 : */
+
+},{"estraverse":7}],6:[function(require,module,exports){
+/*
+  Copyright (C) 2013 Ariya Hidayat <ariya.hidayat@gmail.com>
+  Copyright (C) 2013 Thaddee Tyl <thaddee.tyl@gmail.com>
+  Copyright (C) 2013 Mathias Bynens <mathias@qiwi.be>
+  Copyright (C) 2012 Ariya Hidayat <ariya.hidayat@gmail.com>
+  Copyright (C) 2012 Mathias Bynens <mathias@qiwi.be>
+  Copyright (C) 2012 Joost-Wim Boekesteijn <joost-wim@boekesteijn.nl>
+  Copyright (C) 2012 Kris Kowal <kris.kowal@cixar.com>
+  Copyright (C) 2012 Yusuke Suzuki <utatane.tea@gmail.com>
+  Copyright (C) 2012 Arpad Borsos <arpad.borsos@googlemail.com>
+  Copyright (C) 2011 Ariya Hidayat <ariya.hidayat@gmail.com>
+
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+
+  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+  ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+/*jslint bitwise:true plusplus:true */
+/*global esprima:true, define:true, exports:true, window: true,
+throwErrorTolerant: true,
+throwError: true, generateStatement: true, peek: true,
+parseAssignmentExpression: true, parseBlock: true, parseExpression: true,
+parseFunctionDeclaration: true, parseFunctionExpression: true,
+parseFunctionSourceElements: true, parseVariableIdentifier: true,
+parseLeftHandSideExpression: true,
+parseUnaryExpression: true,
+parseStatement: true, parseSourceElement: true */
+
+(function (root, factory) {
+    'use strict';
+
+    // Universal Module Definition (UMD) to support AMD, CommonJS/Node.js,
+    // Rhino, and plain browser loading.
+
+    /* istanbul ignore next */
+    if (typeof define === 'function' && define.amd) {
+        define(['exports'], factory);
+    } else if (typeof exports !== 'undefined') {
+        factory(exports);
+    } else {
+        factory((root.esprima = {}));
+    }
+}(this, function (exports) {
+    'use strict';
+
+    var Token,
+        TokenName,
+        FnExprTokens,
+        Syntax,
+        PropertyKind,
+        Messages,
+        Regex,
+        SyntaxTreeDelegate,
+        source,
+        strict,
+        index,
+        lineNumber,
+        lineStart,
+        length,
+        delegate,
+        lookahead,
+        state,
+        extra;
+
+    Token = {
+        BooleanLiteral: 1,
+        EOF: 2,
+        Identifier: 3,
+        Keyword: 4,
+        NullLiteral: 5,
+        NumericLiteral: 6,
+        Punctuator: 7,
+        StringLiteral: 8,
+        RegularExpression: 9
+    };
+
+    TokenName = {};
+    TokenName[Token.BooleanLiteral] = 'Boolean';
+    TokenName[Token.EOF] = '<end>';
+    TokenName[Token.Identifier] = 'Identifier';
+    TokenName[Token.Keyword] = 'Keyword';
+    TokenName[Token.NullLiteral] = 'Null';
+    TokenName[Token.NumericLiteral] = 'Numeric';
+    TokenName[Token.Punctuator] = 'Punctuator';
+    TokenName[Token.StringLiteral] = 'String';
+    TokenName[Token.RegularExpression] = 'RegularExpression';
+
+    // A function following one of those tokens is an expression.
+    FnExprTokens = ['(', '{', '[', 'in', 'typeof', 'instanceof', 'new',
+                    'return', 'case', 'delete', 'throw', 'void',
+                    // assignment operators
+                    '=', '+=', '-=', '*=', '/=', '%=', '<<=', '>>=', '>>>=',
+                    '&=', '|=', '^=', ',',
+                    // binary/unary operators
+                    '+', '-', '*', '/', '%', '++', '--', '<<', '>>', '>>>', '&',
+                    '|', '^', '!', '~', '&&', '||', '?', ':', '===', '==', '>=',
+                    '<=', '<', '>', '!=', '!=='];
+
+    Syntax = {
+        AssignmentExpression: 'AssignmentExpression',
+        ArrayExpression: 'ArrayExpression',
+        BlockStatement: 'BlockStatement',
+        BinaryExpression: 'BinaryExpression',
+        BreakStatement: 'BreakStatement',
+        CallExpression: 'CallExpression',
+        CatchClause: 'CatchClause',
+        ConditionalExpression: 'ConditionalExpression',
+        ContinueStatement: 'ContinueStatement',
+        DoWhileStatement: 'DoWhileStatement',
+        DebuggerStatement: 'DebuggerStatement',
+        EmptyStatement: 'EmptyStatement',
+        ExpressionStatement: 'ExpressionStatement',
+        ForStatement: 'ForStatement',
+        ForInStatement: 'ForInStatement',
+        FunctionDeclaration: 'FunctionDeclaration',
+        FunctionExpression: 'FunctionExpression',
+        Identifier: 'Identifier',
+        IfStatement: 'IfStatement',
+        Literal: 'Literal',
+        LabeledStatement: 'LabeledStatement',
+        LogicalExpression: 'LogicalExpression',
+        MemberExpression: 'MemberExpression',
+        NewExpression: 'NewExpression',
+        ObjectExpression: 'ObjectExpression',
+        Program: 'Program',
+        Property: 'Property',
+        ReturnStatement: 'ReturnStatement',
+        SequenceExpression: 'SequenceExpression',
+        SwitchStatement: 'SwitchStatement',
+        SwitchCase: 'SwitchCase',
+        ThisExpression: 'ThisExpression',
+        ThrowStatement: 'ThrowStatement',
+        TryStatement: 'TryStatement',
+        UnaryExpression: 'UnaryExpression',
+        UpdateExpression: 'UpdateExpression',
+        VariableDeclaration: 'VariableDeclaration',
+        VariableDeclarator: 'VariableDeclarator',
+        WhileStatement: 'WhileStatement',
+        WithStatement: 'WithStatement'
+    };
+
+    PropertyKind = {
+        Data: 1,
+        Get: 2,
+        Set: 4
+    };
+
+    // Error messages should be identical to V8.
+    Messages = {
+        UnexpectedToken:  'Unexpected token %0',
+        UnexpectedNumber:  'Unexpected number',
+        UnexpectedString:  'Unexpected string',
+        UnexpectedIdentifier:  'Unexpected identifier',
+        UnexpectedReserved:  'Unexpected reserved word',
+        UnexpectedEOS:  'Unexpected end of input',
+        NewlineAfterThrow:  'Illegal newline after throw',
+        InvalidRegExp: 'Invalid regular expression',
+        UnterminatedRegExp:  'Invalid regular expression: missing /',
+        InvalidLHSInAssignment:  'Invalid left-hand side in assignment',
+        InvalidLHSInForIn:  'Invalid left-hand side in for-in',
+        MultipleDefaultsInSwitch: 'More than one default clause in switch statement',
+        NoCatchOrFinally:  'Missing catch or finally after try',
+        UnknownLabel: 'Undefined label \'%0\'',
+        Redeclaration: '%0 \'%1\' has already been declared',
+        IllegalContinue: 'Illegal continue statement',
+        IllegalBreak: 'Illegal break statement',
+        IllegalReturn: 'Illegal return statement',
+        StrictModeWith:  'Strict mode code may not include a with statement',
+        StrictCatchVariable:  'Catch variable may not be eval or arguments in strict mode',
+        StrictVarName:  'Variable name may not be eval or arguments in strict mode',
+        StrictParamName:  'Parameter name eval or arguments is not allowed in strict mode',
+        StrictParamDupe: 'Strict mode function may not have duplicate parameter names',
+        StrictFunctionName:  'Function name may not be eval or arguments in strict mode',
+        StrictOctalLiteral:  'Octal literals are not allowed in strict mode.',
+        StrictDelete:  'Delete of an unqualified identifier in strict mode.',
+        StrictDuplicateProperty:  'Duplicate data property in object literal not allowed in strict mode',
+        AccessorDataProperty:  'Object literal may not have data and accessor property with the same name',
+        AccessorGetSet:  'Object literal may not have multiple get/set accessors with the same name',
+        StrictLHSAssignment:  'Assignment to eval or arguments is not allowed in strict mode',
+        StrictLHSPostfix:  'Postfix increment/decrement may not have eval or arguments operand in strict mode',
+        StrictLHSPrefix:  'Prefix increment/decrement may not have eval or arguments operand in strict mode',
+        StrictReservedWord:  'Use of future reserved word in strict mode'
+    };
+
+    // See also tools/generate-unicode-regex.py.
+    Regex = {
+        NonAsciiIdentifierStart: new RegExp('[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F0\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]'),
+        NonAsciiIdentifierPart: new RegExp('[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u08A0\u08A2-\u08AC\u08E4-\u08FE\u0900-\u0963\u0966-\u096F\u0971-\u0977\u0979-\u097F\u0981-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C01-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58\u0C59\u0C60-\u0C63\u0C66-\u0C6F\u0C82\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D02\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D57\u0D60-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F0\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191C\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19D9\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1CD0-\u1CD2\u1CD4-\u1CF6\u1D00-\u1DE6\u1DFC-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u200C\u200D\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u2E2F\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099\u309A\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA697\uA69F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA827\uA840-\uA873\uA880-\uA8C4\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A\uAA7B\uAA80-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uABC0-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE26\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]')
+    };
+
+    // Ensure the condition is true, otherwise throw an error.
+    // This is only to have a better contract semantic, i.e. another safety net
+    // to catch a logic error. The condition shall be fulfilled in normal case.
+    // Do NOT use this to enforce a certain condition on any user input.
+
+    function assert(condition, message) {
+        /* istanbul ignore if */
+        if (!condition) {
+            throw new Error('ASSERT: ' + message);
+        }
+    }
+
+    function isDecimalDigit(ch) {
+        return (ch >= 48 && ch <= 57);   // 0..9
+    }
+
+    function isHexDigit(ch) {
+        return '0123456789abcdefABCDEF'.indexOf(ch) >= 0;
+    }
+
+    function isOctalDigit(ch) {
+        return '01234567'.indexOf(ch) >= 0;
+    }
+
+
+    // 7.2 White Space
+
+    function isWhiteSpace(ch) {
+        return (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) ||
+            (ch >= 0x1680 && [0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF].indexOf(ch) >= 0);
+    }
+
+    // 7.3 Line Terminators
+
+    function isLineTerminator(ch) {
+        return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029);
+    }
+
+    // 7.6 Identifier Names and Identifiers
+
+    function isIdentifierStart(ch) {
+        return (ch === 0x24) || (ch === 0x5F) ||  // $ (dollar) and _ (underscore)
+            (ch >= 0x41 && ch <= 0x5A) ||         // A..Z
+            (ch >= 0x61 && ch <= 0x7A) ||         // a..z
+            (ch === 0x5C) ||                      // \ (backslash)
+            ((ch >= 0x80) && Regex.NonAsciiIdentifierStart.test(String.fromCharCode(ch)));
+    }
+
+    function isIdentifierPart(ch) {
+        return (ch === 0x24) || (ch === 0x5F) ||  // $ (dollar) and _ (underscore)
+            (ch >= 0x41 && ch <= 0x5A) ||         // A..Z
+            (ch >= 0x61 && ch <= 0x7A) ||         // a..z
+            (ch >= 0x30 && ch <= 0x39) ||         // 0..9
+            (ch === 0x5C) ||                      // \ (backslash)
+            ((ch >= 0x80) && Regex.NonAsciiIdentifierPart.test(String.fromCharCode(ch)));
+    }
+
+    // 7.6.1.2 Future Reserved Words
+
+    function isFutureReservedWord(id) {
+        switch (id) {
+        case 'class':
+        case 'enum':
+        case 'export':
+        case 'extends':
+        case 'import':
+        case 'super':
+            return true;
+        default:
+            return false;
+        }
+    }
+
+    function isStrictModeReservedWord(id) {
+        switch (id) {
+        case 'implements':
+        case 'interface':
+        case 'package':
+        case 'private':
+        case 'protected':
+        case 'public':
+        case 'static':
+        case 'yield':
+        case 'let':
+            return true;
+        default:
+            return false;
+        }
+    }
+
+    function isRestrictedWord(id) {
+        return id === 'eval' || id === 'arguments';
+    }
+
+    // 7.6.1.1 Keywords
+
+    function isKeyword(id) {
+        if (strict && isStrictModeReservedWord(id)) {
+            return true;
+        }
+
+        // 'const' is specialized as Keyword in V8.
+        // 'yield' and 'let' are for compatiblity with SpiderMonkey and ES.next.
+        // Some others are from future reserved words.
+
+        switch (id.length) {
+        case 2:
+            return (id === 'if') || (id === 'in') || (id === 'do');
+        case 3:
+            return (id === 'var') || (id === 'for') || (id === 'new') ||
+                (id === 'try') || (id === 'let');
+        case 4:
+            return (id === 'this') || (id === 'else') || (id === 'case') ||
+                (id === 'void') || (id === 'with') || (id === 'enum');
+        case 5:
+            return (id === 'while') || (id === 'break') || (id === 'catch') ||
+                (id === 'throw') || (id === 'const') || (id === 'yield') ||
+                (id === 'class') || (id === 'super');
+        case 6:
+            return (id === 'return') || (id === 'typeof') || (id === 'delete') ||
+                (id === 'switch') || (id === 'export') || (id === 'import');
+        case 7:
+            return (id === 'default') || (id === 'finally') || (id === 'extends');
+        case 8:
+            return (id === 'function') || (id === 'continue') || (id === 'debugger');
+        case 10:
+            return (id === 'instanceof');
+        default:
+            return false;
+        }
+    }
+
+    // 7.4 Comments
+
+    function addComment(type, value, start, end, loc) {
+        var comment, attacher;
+
+        assert(typeof start === 'number', 'Comment must have valid position');
+
+        // Because the way the actual token is scanned, often the comments
+        // (if any) are skipped twice during the lexical analysis.
+        // Thus, we need to skip adding a comment if the comment array already
+        // handled it.
+        if (state.lastCommentStart >= start) {
+            return;
+        }
+        state.lastCommentStart = start;
+
+        comment = {
+            type: type,
+            value: value
+        };
+        if (extra.range) {
+            comment.range = [start, end];
+        }
+        if (extra.loc) {
+            comment.loc = loc;
+        }
+        extra.comments.push(comment);
+        if (extra.attachComment) {
+            extra.leadingComments.push(comment);
+            extra.trailingComments.push(comment);
+        }
+    }
+
+    function skipSingleLineComment(offset) {
+        var start, loc, ch, comment;
+
+        start = index - offset;
+        loc = {
+            start: {
+                line: lineNumber,
+                column: index - lineStart - offset
+            }
+        };
+
+        while (index < length) {
+            ch = source.charCodeAt(index);
+            ++index;
+            if (isLineTerminator(ch)) {
+                if (extra.comments) {
+                    comment = source.slice(start + offset, index - 1);
+                    loc.end = {
+                        line: lineNumber,
+                        column: index - lineStart - 1
+                    };
+                    addComment('Line', comment, start, index - 1, loc);
+                }
+                if (ch === 13 && source.charCodeAt(index) === 10) {
+                    ++index;
+                }
+                ++lineNumber;
+                lineStart = index;
+                return;
+            }
+        }
+
+        if (extra.comments) {
+            comment = source.slice(start + offset, index);
+            loc.end = {
+                line: lineNumber,
+                column: index - lineStart
+            };
+            addComment('Line', comment, start, index, loc);
+        }
+    }
+
+    function skipMultiLineComment() {
+        var start, loc, ch, comment;
+
+        if (extra.comments) {
+            start = index - 2;
+            loc = {
+                start: {
+                    line: lineNumber,
+                    column: index - lineStart - 2
+                }
+            };
+        }
+
+        while (index < length) {
+            ch = source.charCodeAt(index);
+            if (isLineTerminator(ch)) {
+                if (ch === 0x0D && source.charCodeAt(index + 1) === 0x0A) {
+                    ++index;
+                }
+                ++lineNumber;
+                ++index;
+                lineStart = index;
+                if (index >= length) {
+                    throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+                }
+            } else if (ch === 0x2A) {
+                // Block comment ends with '*/'.
+                if (source.charCodeAt(index + 1) === 0x2F) {
+                    ++index;
+                    ++index;
+                    if (extra.comments) {
+                        comment = source.slice(start + 2, index - 2);
+                        loc.end = {
+                            line: lineNumber,
+                            column: index - lineStart
+                        };
+                        addComment('Block', comment, start, index, loc);
+                    }
+                    return;
+                }
+                ++index;
+            } else {
+                ++index;
+            }
+        }
+
+        throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+    }
+
+    function skipComment() {
+        var ch, start;
+
+        start = (index === 0);
+        while (index < length) {
+            ch = source.charCodeAt(index);
+
+            if (isWhiteSpace(ch)) {
+                ++index;
+            } else if (isLineTerminator(ch)) {
+                ++index;
+                if (ch === 0x0D && source.charCodeAt(index) === 0x0A) {
+                    ++index;
+                }
+                ++lineNumber;
+                lineStart = index;
+                start = true;
+            } else if (ch === 0x2F) { // U+002F is '/'
+                ch = source.charCodeAt(index + 1);
+                if (ch === 0x2F) {
+                    ++index;
+                    ++index;
+                    skipSingleLineComment(2);
+                    start = true;
+                } else if (ch === 0x2A) {  // U+002A is '*'
+                    ++index;
+                    ++index;
+                    skipMultiLineComment();
+                } else {
+                    break;
+                }
+            } else if (start && ch === 0x2D) { // U+002D is '-'
+                // U+003E is '>'
+                if ((source.charCodeAt(index + 1) === 0x2D) && (source.charCodeAt(index + 2) === 0x3E)) {
+                    // '-->' is a single-line comment
+                    index += 3;
+                    skipSingleLineComment(3);
+                } else {
+                    break;
+                }
+            } else if (ch === 0x3C) { // U+003C is '<'
+                if (source.slice(index + 1, index + 4) === '!--') {
+                    ++index; // `<`
+                    ++index; // `!`
+                    ++index; // `-`
+                    ++index; // `-`
+                    skipSingleLineComment(4);
+                } else {
+                    break;
+                }
+            } else {
+                break;
+            }
+        }
+    }
+
+    function scanHexEscape(prefix) {
+        var i, len, ch, code = 0;
+
+        len = (prefix === 'u') ? 4 : 2;
+        for (i = 0; i < len; ++i) {
+            if (index < length && isHexDigit(source[index])) {
+                ch = source[index++];
+                code = code * 16 + '0123456789abcdef'.indexOf(ch.toLowerCase());
+            } else {
+                return '';
+            }
+        }
+        return String.fromCharCode(code);
+    }
+
+    function getEscapedIdentifier() {
+        var ch, id;
+
+        ch = source.charCodeAt(index++);
+        id = String.fromCharCode(ch);
+
+        // '\u' (U+005C, U+0075) denotes an escaped character.
+        if (ch === 0x5C) {
+            if (source.charCodeAt(index) !== 0x75) {
+                throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+            }
+            ++index;
+            ch = scanHexEscape('u');
+            if (!ch || ch === '\\' || !isIdentifierStart(ch.charCodeAt(0))) {
+                throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+            }
+            id = ch;
+        }
+
+        while (index < length) {
+            ch = source.charCodeAt(index);
+            if (!isIdentifierPart(ch)) {
+                break;
+            }
+            ++index;
+            id += String.fromCharCode(ch);
+
+            // '\u' (U+005C, U+0075) denotes an escaped character.
+            if (ch === 0x5C) {
+                id = id.substr(0, id.length - 1);
+                if (source.charCodeAt(index) !== 0x75) {
+                    throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+                }
+                ++index;
+                ch = scanHexEscape('u');
+                if (!ch || ch === '\\' || !isIdentifierPart(ch.charCodeAt(0))) {
+                    throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+                }
+                id += ch;
+            }
+        }
+
+        return id;
+    }
+
+    function getIdentifier() {
+        var start, ch;
+
+        start = index++;
+        while (index < length) {
+            ch = source.charCodeAt(index);
+            if (ch === 0x5C) {
+                // Blackslash (U+005C) marks Unicode escape sequence.
+                index = start;
+                return getEscapedIdentifier();
+            }
+            if (isIdentifierPart(ch)) {
+                ++index;
+            } else {
+                break;
+            }
+        }
+
+        return source.slice(start, index);
+    }
+
+    function scanIdentifier() {
+        var start, id, type;
+
+        start = index;
+
+        // Backslash (U+005C) starts an escaped character.
+        id = (source.charCodeAt(index) === 0x5C) ? getEscapedIdentifier() : getIdentifier();
+
+        // There is no keyword or literal with only one character.
+        // Thus, it must be an identifier.
+        if (id.length === 1) {
+            type = Token.Identifier;
+        } else if (isKeyword(id)) {
+            type = Token.Keyword;
+        } else if (id === 'null') {
+            type = Token.NullLiteral;
+        } else if (id === 'true' || id === 'false') {
+            type = Token.BooleanLiteral;
+        } else {
+            type = Token.Identifier;
+        }
+
+        return {
+            type: type,
+            value: id,
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+
+    // 7.7 Punctuators
+
+    function scanPunctuator() {
+        var start = index,
+            code = source.charCodeAt(index),
+            code2,
+            ch1 = source[index],
+            ch2,
+            ch3,
+            ch4;
+
+        switch (code) {
+
+        // Check for most common single-character punctuators.
+        case 0x2E:  // . dot
+        case 0x28:  // ( open bracket
+        case 0x29:  // ) close bracket
+        case 0x3B:  // ; semicolon
+        case 0x2C:  // , comma
+        case 0x7B:  // { open curly brace
+        case 0x7D:  // } close curly brace
+        case 0x5B:  // [
+        case 0x5D:  // ]
+        case 0x3A:  // :
+        case 0x3F:  // ?
+        case 0x7E:  // ~
+            ++index;
+            if (extra.tokenize) {
+                if (code === 0x28) {
+                    extra.openParenToken = extra.tokens.length;
+                } else if (code === 0x7B) {
+                    extra.openCurlyToken = extra.tokens.length;
+                }
+            }
+            return {
+                type: Token.Punctuator,
+                value: String.fromCharCode(code),
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: start,
+                end: index
+            };
+
+        default:
+            code2 = source.charCodeAt(index + 1);
+
+            // '=' (U+003D) marks an assignment or comparison operator.
+            if (code2 === 0x3D) {
+                switch (code) {
+                case 0x2B:  // +
+                case 0x2D:  // -
+                case 0x2F:  // /
+                case 0x3C:  // <
+                case 0x3E:  // >
+                case 0x5E:  // ^
+                case 0x7C:  // |
+                case 0x25:  // %
+                case 0x26:  // &
+                case 0x2A:  // *
+                    index += 2;
+                    return {
+                        type: Token.Punctuator,
+                        value: String.fromCharCode(code) + String.fromCharCode(code2),
+                        lineNumber: lineNumber,
+                        lineStart: lineStart,
+                        start: start,
+                        end: index
+                    };
+
+                case 0x21: // !
+                case 0x3D: // =
+                    index += 2;
+
+                    // !== and ===
+                    if (source.charCodeAt(index) === 0x3D) {
+                        ++index;
+                    }
+                    return {
+                        type: Token.Punctuator,
+                        value: source.slice(start, index),
+                        lineNumber: lineNumber,
+                        lineStart: lineStart,
+                        start: start,
+                        end: index
+                    };
+                }
+            }
+        }
+
+        // 4-character punctuator: >>>=
+
+        ch4 = source.substr(index, 4);
+
+        if (ch4 === '>>>=') {
+            index += 4;
+            return {
+                type: Token.Punctuator,
+                value: ch4,
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: start,
+                end: index
+            };
+        }
+
+        // 3-character punctuators: === !== >>> <<= >>=
+
+        ch3 = ch4.substr(0, 3);
+
+        if (ch3 === '>>>' || ch3 === '<<=' || ch3 === '>>=') {
+            index += 3;
+            return {
+                type: Token.Punctuator,
+                value: ch3,
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: start,
+                end: index
+            };
+        }
+
+        // Other 2-character punctuators: ++ -- << >> && ||
+        ch2 = ch3.substr(0, 2);
+
+        if ((ch1 === ch2[1] && ('+-<>&|'.indexOf(ch1) >= 0)) || ch2 === '=>') {
+            index += 2;
+            return {
+                type: Token.Punctuator,
+                value: ch2,
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: start,
+                end: index
+            };
+        }
+
+        // 1-character punctuators: < > = ! + - * % & | ^ /
+        if ('<>=!+-*%&|^/'.indexOf(ch1) >= 0) {
+            ++index;
+            return {
+                type: Token.Punctuator,
+                value: ch1,
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: start,
+                end: index
+            };
+        }
+
+        throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+    }
+
+    // 7.8.3 Numeric Literals
+
+    function scanHexLiteral(start) {
+        var number = '';
+
+        while (index < length) {
+            if (!isHexDigit(source[index])) {
+                break;
+            }
+            number += source[index++];
+        }
+
+        if (number.length === 0) {
+            throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+        }
+
+        if (isIdentifierStart(source.charCodeAt(index))) {
+            throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+        }
+
+        return {
+            type: Token.NumericLiteral,
+            value: parseInt('0x' + number, 16),
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    function scanOctalLiteral(start) {
+        var number = '0' + source[index++];
+        while (index < length) {
+            if (!isOctalDigit(source[index])) {
+                break;
+            }
+            number += source[index++];
+        }
+
+        if (isIdentifierStart(source.charCodeAt(index)) || isDecimalDigit(source.charCodeAt(index))) {
+            throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+        }
+
+        return {
+            type: Token.NumericLiteral,
+            value: parseInt(number, 8),
+            octal: true,
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    function scanNumericLiteral() {
+        var number, start, ch;
+
+        ch = source[index];
+        assert(isDecimalDigit(ch.charCodeAt(0)) || (ch === '.'),
+            'Numeric literal must start with a decimal digit or a decimal point');
+
+        start = index;
+        number = '';
+        if (ch !== '.') {
+            number = source[index++];
+            ch = source[index];
+
+            // Hex number starts with '0x'.
+            // Octal number starts with '0'.
+            if (number === '0') {
+                if (ch === 'x' || ch === 'X') {
+                    ++index;
+                    return scanHexLiteral(start);
+                }
+                if (isOctalDigit(ch)) {
+                    return scanOctalLiteral(start);
+                }
+
+                // decimal number starts with '0' such as '09' is illegal.
+                if (ch && isDecimalDigit(ch.charCodeAt(0))) {
+                    throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+                }
+            }
+
+            while (isDecimalDigit(source.charCodeAt(index))) {
+                number += source[index++];
+            }
+            ch = source[index];
+        }
+
+        if (ch === '.') {
+            number += source[index++];
+            while (isDecimalDigit(source.charCodeAt(index))) {
+                number += source[index++];
+            }
+            ch = source[index];
+        }
+
+        if (ch === 'e' || ch === 'E') {
+            number += source[index++];
+
+            ch = source[index];
+            if (ch === '+' || ch === '-') {
+                number += source[index++];
+            }
+            if (isDecimalDigit(source.charCodeAt(index))) {
+                while (isDecimalDigit(source.charCodeAt(index))) {
+                    number += source[index++];
+                }
+            } else {
+                throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+            }
+        }
+
+        if (isIdentifierStart(source.charCodeAt(index))) {
+            throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+        }
+
+        return {
+            type: Token.NumericLiteral,
+            value: parseFloat(number),
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    // 7.8.4 String Literals
+
+    function scanStringLiteral() {
+        var str = '', quote, start, ch, code, unescaped, restore, octal = false, startLineNumber, startLineStart;
+        startLineNumber = lineNumber;
+        startLineStart = lineStart;
+
+        quote = source[index];
+        assert((quote === '\'' || quote === '"'),
+            'String literal must starts with a quote');
+
+        start = index;
+        ++index;
+
+        while (index < length) {
+            ch = source[index++];
+
+            if (ch === quote) {
+                quote = '';
+                break;
+            } else if (ch === '\\') {
+                ch = source[index++];
+                if (!ch || !isLineTerminator(ch.charCodeAt(0))) {
+                    switch (ch) {
+                    case 'u':
+                    case 'x':
+                        restore = index;
+                        unescaped = scanHexEscape(ch);
+                        if (unescaped) {
+                            str += unescaped;
+                        } else {
+                            index = restore;
+                            str += ch;
+                        }
+                        break;
+                    case 'n':
+                        str += '\n';
+                        break;
+                    case 'r':
+                        str += '\r';
+                        break;
+                    case 't':
+                        str += '\t';
+                        break;
+                    case 'b':
+                        str += '\b';
+                        break;
+                    case 'f':
+                        str += '\f';
+                        break;
+                    case 'v':
+                        str += '\x0B';
+                        break;
+
+                    default:
+                        if (isOctalDigit(ch)) {
+                            code = '01234567'.indexOf(ch);
+
+                            // \0 is not octal escape sequence
+                            if (code !== 0) {
+                                octal = true;
+                            }
+
+                            if (index < length && isOctalDigit(source[index])) {
+                                octal = true;
+                                code = code * 8 + '01234567'.indexOf(source[index++]);
+
+                                // 3 digits are only allowed when string starts
+                                // with 0, 1, 2, 3
+                                if ('0123'.indexOf(ch) >= 0 &&
+                                        index < length &&
+                                        isOctalDigit(source[index])) {
+                                    code = code * 8 + '01234567'.indexOf(source[index++]);
+                                }
+                            }
+                            str += String.fromCharCode(code);
+                        } else {
+                            str += ch;
+                        }
+                        break;
+                    }
+                } else {
+                    ++lineNumber;
+                    if (ch ===  '\r' && source[index] === '\n') {
+                        ++index;
+                    }
+                    lineStart = index;
+                }
+            } else if (isLineTerminator(ch.charCodeAt(0))) {
+                break;
+            } else {
+                str += ch;
+            }
+        }
+
+        if (quote !== '') {
+            throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
+        }
+
+        return {
+            type: Token.StringLiteral,
+            value: str,
+            octal: octal,
+            startLineNumber: startLineNumber,
+            startLineStart: startLineStart,
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    function testRegExp(pattern, flags) {
+        var value;
+        try {
+            value = new RegExp(pattern, flags);
+        } catch (e) {
+            throwError({}, Messages.InvalidRegExp);
+        }
+        return value;
+    }
+
+    function scanRegExpBody() {
+        var ch, str, classMarker, terminated, body;
+
+        ch = source[index];
+        assert(ch === '/', 'Regular expression literal must start with a slash');
+        str = source[index++];
+
+        classMarker = false;
+        terminated = false;
+        while (index < length) {
+            ch = source[index++];
+            str += ch;
+            if (ch === '\\') {
+                ch = source[index++];
+                // ECMA-262 7.8.5
+                if (isLineTerminator(ch.charCodeAt(0))) {
+                    throwError({}, Messages.UnterminatedRegExp);
+                }
+                str += ch;
+            } else if (isLineTerminator(ch.charCodeAt(0))) {
+                throwError({}, Messages.UnterminatedRegExp);
+            } else if (classMarker) {
+                if (ch === ']') {
+                    classMarker = false;
+                }
+            } else {
+                if (ch === '/') {
+                    terminated = true;
+                    break;
+                } else if (ch === '[') {
+                    classMarker = true;
+                }
+            }
+        }
+
+        if (!terminated) {
+            throwError({}, Messages.UnterminatedRegExp);
+        }
+
+        // Exclude leading and trailing slash.
+        body = str.substr(1, str.length - 2);
+        return {
+            value: body,
+            literal: str
+        };
+    }
+
+    function scanRegExpFlags() {
+        var ch, str, flags, restore;
+
+        str = '';
+        flags = '';
+        while (index < length) {
+            ch = source[index];
+            if (!isIdentifierPart(ch.charCodeAt(0))) {
+                break;
+            }
+
+            ++index;
+            if (ch === '\\' && index < length) {
+                ch = source[index];
+                if (ch === 'u') {
+                    ++index;
+                    restore = index;
+                    ch = scanHexEscape('u');
+                    if (ch) {
+                        flags += ch;
+                        for (str += '\\u'; restore < index; ++restore) {
+                            str += source[restore];
+                        }
+                    } else {
+                        index = restore;
+                        flags += 'u';
+                        str += '\\u';
+                    }
+                    throwErrorTolerant({}, Messages.UnexpectedToken, 'ILLEGAL');
+                } else {
+                    str += '\\';
+                    throwErrorTolerant({}, Messages.UnexpectedToken, 'ILLEGAL');
+                }
+            } else {
+                flags += ch;
+                str += ch;
+            }
+        }
+
+        return {
+            value: flags,
+            literal: str
+        };
+    }
+
+    function scanRegExp() {
+        var start, body, flags, pattern, value;
+
+        lookahead = null;
+        skipComment();
+        start = index;
+
+        body = scanRegExpBody();
+        flags = scanRegExpFlags();
+        value = testRegExp(body.value, flags.value);
+
+        if (extra.tokenize) {
+            return {
+                type: Token.RegularExpression,
+                value: value,
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: start,
+                end: index
+            };
+        }
+
+        return {
+            literal: body.literal + flags.literal,
+            value: value,
+            start: start,
+            end: index
+        };
+    }
+
+    function collectRegex() {
+        var pos, loc, regex, token;
+
+        skipComment();
+
+        pos = index;
+        loc = {
+            start: {
+                line: lineNumber,
+                column: index - lineStart
+            }
+        };
+
+        regex = scanRegExp();
+        loc.end = {
+            line: lineNumber,
+            column: index - lineStart
+        };
+
+        /* istanbul ignore next */
+        if (!extra.tokenize) {
+            // Pop the previous token, which is likely '/' or '/='
+            if (extra.tokens.length > 0) {
+                token = extra.tokens[extra.tokens.length - 1];
+                if (token.range[0] === pos && token.type === 'Punctuator') {
+                    if (token.value === '/' || token.value === '/=') {
+                        extra.tokens.pop();
+                    }
+                }
+            }
+
+            extra.tokens.push({
+                type: 'RegularExpression',
+                value: regex.literal,
+                range: [pos, index],
+                loc: loc
+            });
+        }
+
+        return regex;
+    }
+
+    function isIdentifierName(token) {
+        return token.type === Token.Identifier ||
+            token.type === Token.Keyword ||
+            token.type === Token.BooleanLiteral ||
+            token.type === Token.NullLiteral;
+    }
+
+    function advanceSlash() {
+        var prevToken,
+            checkToken;
+        // Using the following algorithm:
+        // https://github.com/mozilla/sweet.js/wiki/design
+        prevToken = extra.tokens[extra.tokens.length - 1];
+        if (!prevToken) {
+            // Nothing before that: it cannot be a division.
+            return collectRegex();
+        }
+        if (prevToken.type === 'Punctuator') {
+            if (prevToken.value === ']') {
+                return scanPunctuator();
+            }
+            if (prevToken.value === ')') {
+                checkToken = extra.tokens[extra.openParenToken - 1];
+                if (checkToken &&
+                        checkToken.type === 'Keyword' &&
+                        (checkToken.value === 'if' ||
+                         checkToken.value === 'while' ||
+                         checkToken.value === 'for' ||
+                         checkToken.value === 'with')) {
+                    return collectRegex();
+                }
+                return scanPunctuator();
+            }
+            if (prevToken.value === '}') {
+                // Dividing a function by anything makes little sense,
+                // but we have to check for that.
+                if (extra.tokens[extra.openCurlyToken - 3] &&
+                        extra.tokens[extra.openCurlyToken - 3].type === 'Keyword') {
+                    // Anonymous function.
+                    checkToken = extra.tokens[extra.openCurlyToken - 4];
+                    if (!checkToken) {
+                        return scanPunctuator();
+                    }
+                } else if (extra.tokens[extra.openCurlyToken - 4] &&
+                        extra.tokens[extra.openCurlyToken - 4].type === 'Keyword') {
+                    // Named function.
+                    checkToken = extra.tokens[extra.openCurlyToken - 5];
+                    if (!checkToken) {
+                        return collectRegex();
+                    }
+                } else {
+                    return scanPunctuator();
+                }
+                // checkToken determines whether the function is
+                // a declaration or an expression.
+                if (FnExprTokens.indexOf(checkToken.value) >= 0) {
+                    // It is an expression.
+                    return scanPunctuator();
+                }
+                // It is a declaration.
+                return collectRegex();
+            }
+            return collectRegex();
+        }
+        if (prevToken.type === 'Keyword') {
+            return collectRegex();
+        }
+        return scanPunctuator();
+    }
+
+    function advance() {
+        var ch;
+
+        skipComment();
+
+        if (index >= length) {
+            return {
+                type: Token.EOF,
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: index,
+                end: index
+            };
+        }
+
+        ch = source.charCodeAt(index);
+
+        if (isIdentifierStart(ch)) {
+            return scanIdentifier();
+        }
+
+        // Very common: ( and ) and ;
+        if (ch === 0x28 || ch === 0x29 || ch === 0x3B) {
+            return scanPunctuator();
+        }
+
+        // String literal starts with single quote (U+0027) or double quote (U+0022).
+        if (ch === 0x27 || ch === 0x22) {
+            return scanStringLiteral();
+        }
+
+
+        // Dot (.) U+002E can also start a floating-point number, hence the need
+        // to check the next character.
+        if (ch === 0x2E) {
+            if (isDecimalDigit(source.charCodeAt(index + 1))) {
+                return scanNumericLiteral();
+            }
+            return scanPunctuator();
+        }
+
+        if (isDecimalDigit(ch)) {
+            return scanNumericLiteral();
+        }
+
+        // Slash (/) U+002F can also start a regex.
+        if (extra.tokenize && ch === 0x2F) {
+            return advanceSlash();
+        }
+
+        return scanPunctuator();
+    }
+
+    function collectToken() {
+        var loc, token, range, value;
+
+        skipComment();
+        loc = {
+            start: {
+                line: lineNumber,
+                column: index - lineStart
+            }
+        };
+
+        token = advance();
+        loc.end = {
+            line: lineNumber,
+            column: index - lineStart
+        };
+
+        if (token.type !== Token.EOF) {
+            value = source.slice(token.start, token.end);
+            extra.tokens.push({
+                type: TokenName[token.type],
+                value: value,
+                range: [token.start, token.end],
+                loc: loc
+            });
+        }
+
+        return token;
+    }
+
+    function lex() {
+        var token;
+
+        token = lookahead;
+        index = token.end;
+        lineNumber = token.lineNumber;
+        lineStart = token.lineStart;
+
+        lookahead = (typeof extra.tokens !== 'undefined') ? collectToken() : advance();
+
+        index = token.end;
+        lineNumber = token.lineNumber;
+        lineStart = token.lineStart;
+
+        return token;
+    }
+
+    function peek() {
+        var pos, line, start;
+
+        pos = index;
+        line = lineNumber;
+        start = lineStart;
+        lookahead = (typeof extra.tokens !== 'undefined') ? collectToken() : advance();
+        index = pos;
+        lineNumber = line;
+        lineStart = start;
+    }
+
+    function Position(line, column) {
+        this.line = line;
+        this.column = column;
+    }
+
+    function SourceLocation(startLine, startColumn, line, column) {
+        this.start = new Position(startLine, startColumn);
+        this.end = new Position(line, column);
+    }
+
+    SyntaxTreeDelegate = {
+
+        name: 'SyntaxTree',
+
+        processComment: function (node) {
+            var lastChild, trailingComments;
+
+            if (node.type === Syntax.Program) {
+                if (node.body.length > 0) {
+                    return;
+                }
+            }
+
+            if (extra.trailingComments.length > 0) {
+                if (extra.trailingComments[0].range[0] >= node.range[1]) {
+                    trailingComments = extra.trailingComments;
+                    extra.trailingComments = [];
+                } else {
+                    extra.trailingComments.length = 0;
+                }
+            } else {
+                if (extra.bottomRightStack.length > 0 &&
+                        extra.bottomRightStack[extra.bottomRightStack.length - 1].trailingComments &&
+                        extra.bottomRightStack[extra.bottomRightStack.length - 1].trailingComments[0].range[0] >= node.range[1]) {
+                    trailingComments = extra.bottomRightStack[extra.bottomRightStack.length - 1].trailingComments;
+                    delete extra.bottomRightStack[extra.bottomRightStack.length - 1].trailingComments;
+                }
+            }
+
+            // Eating the stack.
+            while (extra.bottomRightStack.length > 0 && extra.bottomRightStack[extra.bottomRightStack.length - 1].range[0] >= node.range[0]) {
+                lastChild = extra.bottomRightStack.pop();
+            }
+
+            if (lastChild) {
+                if (lastChild.leadingComments && lastChild.leadingComments[lastChild.leadingComments.length - 1].range[1] <= node.range[0]) {
+                    node.leadingComments = lastChild.leadingComments;
+                    delete lastChild.leadingComments;
+                }
+            } else if (extra.leadingComments.length > 0 && extra.leadingComments[extra.leadingComments.length - 1].range[1] <= node.range[0]) {
+                node.leadingComments = extra.leadingComments;
+                extra.leadingComments = [];
+            }
+
+
+            if (trailingComments) {
+                node.trailingComments = trailingComments;
+            }
+
+            extra.bottomRightStack.push(node);
+        },
+
+        markEnd: function (node, startToken) {
+            if (extra.range) {
+                node.range = [startToken.start, index];
+            }
+            if (extra.loc) {
+                node.loc = new SourceLocation(
+                    startToken.startLineNumber === undefined ?  startToken.lineNumber : startToken.startLineNumber,
+                    startToken.start - (startToken.startLineStart === undefined ?  startToken.lineStart : startToken.startLineStart),
+                    lineNumber,
+                    index - lineStart
+                );
+                this.postProcess(node);
+            }
+
+            if (extra.attachComment) {
+                this.processComment(node);
+            }
+            return node;
+        },
+
+        postProcess: function (node) {
+            if (extra.source) {
+                node.loc.source = extra.source;
+            }
+            return node;
+        },
+
+        createArrayExpression: function (elements) {
+            return {
+                type: Syntax.ArrayExpression,
+                elements: elements
+            };
+        },
+
+        createAssignmentExpression: function (operator, left, right) {
+            return {
+                type: Syntax.AssignmentExpression,
+                operator: operator,
+                left: left,
+                right: right
+            };
+        },
+
+        createBinaryExpression: function (operator, left, right) {
+            var type = (operator === '||' || operator === '&&') ? Syntax.LogicalExpression :
+                        Syntax.BinaryExpression;
+            return {
+                type: type,
+                operator: operator,
+                left: left,
+                right: right
+            };
+        },
+
+        createBlockStatement: function (body) {
+            return {
+                type: Syntax.BlockStatement,
+                body: body
+            };
+        },
+
+        createBreakStatement: function (label) {
+            return {
+                type: Syntax.BreakStatement,
+                label: label
+            };
+        },
+
+        createCallExpression: function (callee, args) {
+            return {
+                type: Syntax.CallExpression,
+                callee: callee,
+                'arguments': args
+            };
+        },
+
+        createCatchClause: function (param, body) {
+            return {
+                type: Syntax.CatchClause,
+                param: param,
+                body: body
+            };
+        },
+
+        createConditionalExpression: function (test, consequent, alternate) {
+            return {
+                type: Syntax.ConditionalExpression,
+                test: test,
+                consequent: consequent,
+                alternate: alternate
+            };
+        },
+
+        createContinueStatement: function (label) {
+            return {
+                type: Syntax.ContinueStatement,
+                label: label
+            };
+        },
+
+        createDebuggerStatement: function () {
+            return {
+                type: Syntax.DebuggerStatement
+            };
+        },
+
+        createDoWhileStatement: function (body, test) {
+            return {
+                type: Syntax.DoWhileStatement,
+                body: body,
+                test: test
+            };
+        },
+
+        createEmptyStatement: function () {
+            return {
+                type: Syntax.EmptyStatement
+            };
+        },
+
+        createExpressionStatement: function (expression) {
+            return {
+                type: Syntax.ExpressionStatement,
+                expression: expression
+            };
+        },
+
+        createForStatement: function (init, test, update, body) {
+            return {
+                type: Syntax.ForStatement,
+                init: init,
+                test: test,
+                update: update,
+                body: body
+            };
+        },
+
+        createForInStatement: function (left, right, body) {
+            return {
+                type: Syntax.ForInStatement,
+                left: left,
+                right: right,
+                body: body,
+                each: false
+            };
+        },
+
+        createFunctionDeclaration: function (id, params, defaults, body) {
+            return {
+                type: Syntax.FunctionDeclaration,
+                id: id,
+                params: params,
+                defaults: defaults,
+                body: body,
+                rest: null,
+                generator: false,
+                expression: false
+            };
+        },
+
+        createFunctionExpression: function (id, params, defaults, body) {
+            return {
+                type: Syntax.FunctionExpression,
+                id: id,
+                params: params,
+                defaults: defaults,
+                body: body,
+                rest: null,
+                generator: false,
+                expression: false
+            };
+        },
+
+        createIdentifier: function (name) {
+            return {
+                type: Syntax.Identifier,
+                name: name
+            };
+        },
+
+        createIfStatement: function (test, consequent, alternate) {
+            return {
+                type: Syntax.IfStatement,
+                test: test,
+                consequent: consequent,
+                alternate: alternate
+            };
+        },
+
+        createLabeledStatement: function (label, body) {
+            return {
+                type: Syntax.LabeledStatement,
+                label: label,
+                body: body
+            };
+        },
+
+        createLiteral: function (token) {
+            return {
+                type: Syntax.Literal,
+                value: token.value,
+                raw: source.slice(token.start, token.end)
+            };
+        },
+
+        createMemberExpression: function (accessor, object, property) {
+            return {
+                type: Syntax.MemberExpression,
+                computed: accessor === '[',
+                object: object,
+                property: property
+            };
+        },
+
+        createNewExpression: function (callee, args) {
+            return {
+                type: Syntax.NewExpression,
+                callee: callee,
+                'arguments': args
+            };
+        },
+
+        createObjectExpression: function (properties) {
+            return {
+                type: Syntax.ObjectExpression,
+                properties: properties
+            };
+        },
+
+        createPostfixExpression: function (operator, argument) {
+            return {
+                type: Syntax.UpdateExpression,
+                operator: operator,
+                argument: argument,
+                prefix: false
+            };
+        },
+
+        createProgram: function (body) {
+            return {
+                type: Syntax.Program,
+                body: body
+            };
+        },
+
+        createProperty: function (kind, key, value) {
+            return {
+                type: Syntax.Property,
+                key: key,
+                value: value,
+                kind: kind
+            };
+        },
+
+        createReturnStatement: function (argument) {
+            return {
+                type: Syntax.ReturnStatement,
+                argument: argument
+            };
+        },
+
+        createSequenceExpression: function (expressions) {
+            return {
+                type: Syntax.SequenceExpression,
+                expressions: expressions
+            };
+        },
+
+        createSwitchCase: function (test, consequent) {
+            return {
+                type: Syntax.SwitchCase,
+                test: test,
+                consequent: consequent
+            };
+        },
+
+        createSwitchStatement: function (discriminant, cases) {
+            return {
+                type: Syntax.SwitchStatement,
+                discriminant: discriminant,
+                cases: cases
+            };
+        },
+
+        createThisExpression: function () {
+            return {
+                type: Syntax.ThisExpression
+            };
+        },
+
+        createThrowStatement: function (argument) {
+            return {
+                type: Syntax.ThrowStatement,
+                argument: argument
+            };
+        },
+
+        createTryStatement: function (block, guardedHandlers, handlers, finalizer) {
+            return {
+                type: Syntax.TryStatement,
+                block: block,
+                guardedHandlers: guardedHandlers,
+                handlers: handlers,
+                finalizer: finalizer
+            };
+        },
+
+        createUnaryExpression: function (operator, argument) {
+            if (operator === '++' || operator === '--') {
+                return {
+                    type: Syntax.UpdateExpression,
+                    operator: operator,
+                    argument: argument,
+                    prefix: true
+                };
+            }
+            return {
+                type: Syntax.UnaryExpression,
+                operator: operator,
+                argument: argument,
+                prefix: true
+            };
+        },
+
+        createVariableDeclaration: function (declarations, kind) {
+            return {
+                type: Syntax.VariableDeclaration,
+                declarations: declarations,
+                kind: kind
+            };
+        },
+
+        createVariableDeclarator: function (id, init) {
+            return {
+                type: Syntax.VariableDeclarator,
+                id: id,
+                init: init
+            };
+        },
+
+        createWhileStatement: function (test, body) {
+            return {
+                type: Syntax.WhileStatement,
+                test: test,
+                body: body
+            };
+        },
+
+        createWithStatement: function (object, body) {
+            return {
+                type: Syntax.WithStatement,
+                object: object,
+                body: body
+            };
+        }
+    };
+
+    // Return true if there is a line terminator before the next token.
+
+    function peekLineTerminator() {
+        var pos, line, start, found;
+
+        pos = index;
+        line = lineNumber;
+        start = lineStart;
+        skipComment();
+        found = lineNumber !== line;
+        index = pos;
+        lineNumber = line;
+        lineStart = start;
+
+        return found;
+    }
+
+    // Throw an exception
+
+    function throwError(token, messageFormat) {
+        var error,
+            args = Array.prototype.slice.call(arguments, 2),
+            msg = messageFormat.replace(
+                /%(\d)/g,
+                function (whole, index) {
+                    assert(index < args.length, 'Message reference must be in range');
+                    return args[index];
+                }
+            );
+
+        if (typeof token.lineNumber === 'number') {
+            error = new Error('Line ' + token.lineNumber + ': ' + msg);
+            error.index = token.start;
+            error.lineNumber = token.lineNumber;
+            error.column = token.start - lineStart + 1;
+        } else {
+            error = new Error('Line ' + lineNumber + ': ' + msg);
+            error.index = index;
+            error.lineNumber = lineNumber;
+            error.column = index - lineStart + 1;
+        }
+
+        error.description = msg;
+        throw error;
+    }
+
+    function throwErrorTolerant() {
+        try {
+            throwError.apply(null, arguments);
+        } catch (e) {
+            if (extra.errors) {
+                extra.errors.push(e);
+            } else {
+                throw e;
+            }
+        }
+    }
+
+
+    // Throw an exception because of the token.
+
+    function throwUnexpected(token) {
+        if (token.type === Token.EOF) {
+            throwError(token, Messages.UnexpectedEOS);
+        }
+
+        if (token.type === Token.NumericLiteral) {
+            throwError(token, Messages.UnexpectedNumber);
+        }
+
+        if (token.type === Token.StringLiteral) {
+            throwError(token, Messages.UnexpectedString);
+        }
+
+        if (token.type === Token.Identifier) {
+            throwError(token, Messages.UnexpectedIdentifier);
+        }
+
+        if (token.type === Token.Keyword) {
+            if (isFutureReservedWord(token.value)) {
+                throwError(token, Messages.UnexpectedReserved);
+            } else if (strict && isStrictModeReservedWord(token.value)) {
+                throwErrorTolerant(token, Messages.StrictReservedWord);
+                return;
+            }
+            throwError(token, Messages.UnexpectedToken, token.value);
+        }
+
+        // BooleanLiteral, NullLiteral, or Punctuator.
+        throwError(token, Messages.UnexpectedToken, token.value);
+    }
+
+    // Expect the next token to match the specified punctuator.
+    // If not, an exception will be thrown.
+
+    function expect(value) {
+        var token = lex();
+        if (token.type !== Token.Punctuator || token.value !== value) {
+            throwUnexpected(token);
+        }
+    }
+
+    // Expect the next token to match the specified keyword.
+    // If not, an exception will be thrown.
+
+    function expectKeyword(keyword) {
+        var token = lex();
+        if (token.type !== Token.Keyword || token.value !== keyword) {
+            throwUnexpected(token);
+        }
+    }
+
+    // Return true if the next token matches the specified punctuator.
+
+    function match(value) {
+        return lookahead.type === Token.Punctuator && lookahead.value === value;
+    }
+
+    // Return true if the next token matches the specified keyword
+
+    function matchKeyword(keyword) {
+        return lookahead.type === Token.Keyword && lookahead.value === keyword;
+    }
+
+    // Return true if the next token is an assignment operator
+
+    function matchAssign() {
+        var op;
+
+        if (lookahead.type !== Token.Punctuator) {
+            return false;
+        }
+        op = lookahead.value;
+        return op === '=' ||
+            op === '*=' ||
+            op === '/=' ||
+            op === '%=' ||
+            op === '+=' ||
+            op === '-=' ||
+            op === '<<=' ||
+            op === '>>=' ||
+            op === '>>>=' ||
+            op === '&=' ||
+            op === '^=' ||
+            op === '|=';
+    }
+
+    function consumeSemicolon() {
+        var line;
+
+        // Catch the very common case first: immediately a semicolon (U+003B).
+        if (source.charCodeAt(index) === 0x3B || match(';')) {
+            lex();
+            return;
+        }
+
+        line = lineNumber;
+        skipComment();
+        if (lineNumber !== line) {
+            return;
+        }
+
+        if (lookahead.type !== Token.EOF && !match('}')) {
+            throwUnexpected(lookahead);
+        }
+    }
+
+    // Return true if provided expression is LeftHandSideExpression
+
+    function isLeftHandSide(expr) {
+        return expr.type === Syntax.Identifier || expr.type === Syntax.MemberExpression;
+    }
+
+    // 11.1.4 Array Initialiser
+
+    function parseArrayInitialiser() {
+        var elements = [], startToken;
+
+        startToken = lookahead;
+        expect('[');
+
+        while (!match(']')) {
+            if (match(',')) {
+                lex();
+                elements.push(null);
+            } else {
+                elements.push(parseAssignmentExpression());
+
+                if (!match(']')) {
+                    expect(',');
+                }
+            }
+        }
+
+        lex();
+
+        return delegate.markEnd(delegate.createArrayExpression(elements), startToken);
+    }
+
+    // 11.1.5 Object Initialiser
+
+    function parsePropertyFunction(param, first) {
+        var previousStrict, body, startToken;
+
+        previousStrict = strict;
+        startToken = lookahead;
+        body = parseFunctionSourceElements();
+        if (first && strict && isRestrictedWord(param[0].name)) {
+            throwErrorTolerant(first, Messages.StrictParamName);
+        }
+        strict = previousStrict;
+        return delegate.markEnd(delegate.createFunctionExpression(null, param, [], body), startToken);
+    }
+
+    function parseObjectPropertyKey() {
+        var token, startToken;
+
+        startToken = lookahead;
+        token = lex();
+
+        // Note: This function is called only from parseObjectProperty(), where
+        // EOF and Punctuator tokens are already filtered out.
+
+        if (token.type === Token.StringLiteral || token.type === Token.NumericLiteral) {
+            if (strict && token.octal) {
+                throwErrorTolerant(token, Messages.StrictOctalLiteral);
+            }
+            return delegate.markEnd(delegate.createLiteral(token), startToken);
+        }
+
+        return delegate.markEnd(delegate.createIdentifier(token.value), startToken);
+    }
+
+    function parseObjectProperty() {
+        var token, key, id, value, param, startToken;
+
+        token = lookahead;
+        startToken = lookahead;
+
+        if (token.type === Token.Identifier) {
+
+            id = parseObjectPropertyKey();
+
+            // Property Assignment: Getter and Setter.
+
+            if (token.value === 'get' && !match(':')) {
+                key = parseObjectPropertyKey();
+                expect('(');
+                expect(')');
+                value = parsePropertyFunction([]);
+                return delegate.markEnd(delegate.createProperty('get', key, value), startToken);
+            }
+            if (token.value === 'set' && !match(':')) {
+                key = parseObjectPropertyKey();
+                expect('(');
+                token = lookahead;
+                if (token.type !== Token.Identifier) {
+                    expect(')');
+                    throwErrorTolerant(token, Messages.UnexpectedToken, token.value);
+                    value = parsePropertyFunction([]);
+                } else {
+                    param = [ parseVariableIdentifier() ];
+                    expect(')');
+                    value = parsePropertyFunction(param, token);
+                }
+                return delegate.markEnd(delegate.createProperty('set', key, value), startToken);
+            }
+            expect(':');
+            value = parseAssignmentExpression();
+            return delegate.markEnd(delegate.createProperty('init', id, value), startToken);
+        }
+        if (token.type === Token.EOF || token.type === Token.Punctuator) {
+            throwUnexpected(token);
+        } else {
+            key = parseObjectPropertyKey();
+            expect(':');
+            value = parseAssignmentExpression();
+            return delegate.markEnd(delegate.createProperty('init', key, value), startToken);
+        }
+    }
+
+    function parseObjectInitialiser() {
+        var properties = [], property, name, key, kind, map = {}, toString = String, startToken;
+
+        startToken = lookahead;
+
+        expect('{');
+
+        while (!match('}')) {
+            property = parseObjectProperty();
+
+            if (property.key.type === Syntax.Identifier) {
+                name = property.key.name;
+            } else {
+                name = toString(property.key.value);
+            }
+            kind = (property.kind === 'init') ? PropertyKind.Data : (property.kind === 'get') ? PropertyKind.Get : PropertyKind.Set;
+
+            key = '$' + name;
+            if (Object.prototype.hasOwnProperty.call(map, key)) {
+                if (map[key] === PropertyKind.Data) {
+                    if (strict && kind === PropertyKind.Data) {
+                        throwErrorTolerant({}, Messages.StrictDuplicateProperty);
+                    } else if (kind !== PropertyKind.Data) {
+                        throwErrorTolerant({}, Messages.AccessorDataProperty);
+                    }
+                } else {
+                    if (kind === PropertyKind.Data) {
+                        throwErrorTolerant({}, Messages.AccessorDataProperty);
+                    } else if (map[key] & kind) {
+                        throwErrorTolerant({}, Messages.AccessorGetSet);
+                    }
+                }
+                map[key] |= kind;
+            } else {
+                map[key] = kind;
+            }
+
+            properties.push(property);
+
+            if (!match('}')) {
+                expect(',');
+            }
+        }
+
+        expect('}');
+
+        return delegate.markEnd(delegate.createObjectExpression(properties), startToken);
+    }
+
+    // 11.1.6 The Grouping Operator
+
+    function parseGroupExpression() {
+        var expr;
+
+        expect('(');
+
+        expr = parseExpression();
+
+        expect(')');
+
+        return expr;
+    }
+
+
+    // 11.1 Primary Expressions
+
+    function parsePrimaryExpression() {
+        var type, token, expr, startToken;
+
+        if (match('(')) {
+            return parseGroupExpression();
+        }
+
+        if (match('[')) {
+            return parseArrayInitialiser();
+        }
+
+        if (match('{')) {
+            return parseObjectInitialiser();
+        }
+
+        type = lookahead.type;
+        startToken = lookahead;
+
+        if (type === Token.Identifier) {
+            expr =  delegate.createIdentifier(lex().value);
+        } else if (type === Token.StringLiteral || type === Token.NumericLiteral) {
+            if (strict && lookahead.octal) {
+                throwErrorTolerant(lookahead, Messages.StrictOctalLiteral);
+            }
+            expr = delegate.createLiteral(lex());
+        } else if (type === Token.Keyword) {
+            if (matchKeyword('function')) {
+                return parseFunctionExpression();
+            }
+            if (matchKeyword('this')) {
+                lex();
+                expr = delegate.createThisExpression();
+            } else {
+                throwUnexpected(lex());
+            }
+        } else if (type === Token.BooleanLiteral) {
+            token = lex();
+            token.value = (token.value === 'true');
+            expr = delegate.createLiteral(token);
+        } else if (type === Token.NullLiteral) {
+            token = lex();
+            token.value = null;
+            expr = delegate.createLiteral(token);
+        } else if (match('/') || match('/=')) {
+            if (typeof extra.tokens !== 'undefined') {
+                expr = delegate.createLiteral(collectRegex());
+            } else {
+                expr = delegate.createLiteral(scanRegExp());
+            }
+            peek();
+        } else {
+            throwUnexpected(lex());
+        }
+
+        return delegate.markEnd(expr, startToken);
+    }
+
+    // 11.2 Left-Hand-Side Expressions
+
+    function parseArguments() {
+        var args = [];
+
+        expect('(');
+
+        if (!match(')')) {
+            while (index < length) {
+                args.push(parseAssignmentExpression());
+                if (match(')')) {
+                    break;
+                }
+                expect(',');
+            }
+        }
+
+        expect(')');
+
+        return args;
+    }
+
+    function parseNonComputedProperty() {
+        var token, startToken;
+
+        startToken = lookahead;
+        token = lex();
+
+        if (!isIdentifierName(token)) {
+            throwUnexpected(token);
+        }
+
+        return delegate.markEnd(delegate.createIdentifier(token.value), startToken);
+    }
+
+    function parseNonComputedMember() {
+        expect('.');
+
+        return parseNonComputedProperty();
+    }
+
+    function parseComputedMember() {
+        var expr;
+
+        expect('[');
+
+        expr = parseExpression();
+
+        expect(']');
+
+        return expr;
+    }
+
+    function parseNewExpression() {
+        var callee, args, startToken;
+
+        startToken = lookahead;
+        expectKeyword('new');
+        callee = parseLeftHandSideExpression();
+        args = match('(') ? parseArguments() : [];
+
+        return delegate.markEnd(delegate.createNewExpression(callee, args), startToken);
+    }
+
+    function parseLeftHandSideExpressionAllowCall() {
+        var previousAllowIn, expr, args, property, startToken;
+
+        startToken = lookahead;
+
+        previousAllowIn = state.allowIn;
+        state.allowIn = true;
+        expr = matchKeyword('new') ? parseNewExpression() : parsePrimaryExpression();
+        state.allowIn = previousAllowIn;
+
+        for (;;) {
+            if (match('.')) {
+                property = parseNonComputedMember();
+                expr = delegate.createMemberExpression('.', expr, property);
+            } else if (match('(')) {
+                args = parseArguments();
+                expr = delegate.createCallExpression(expr, args);
+            } else if (match('[')) {
+                property = parseComputedMember();
+                expr = delegate.createMemberExpression('[', expr, property);
+            } else {
+                break;
+            }
+            delegate.markEnd(expr, startToken);
+        }
+
+        return expr;
+    }
+
+    function parseLeftHandSideExpression() {
+        var previousAllowIn, expr, property, startToken;
+
+        startToken = lookahead;
+
+        previousAllowIn = state.allowIn;
+        expr = matchKeyword('new') ? parseNewExpression() : parsePrimaryExpression();
+        state.allowIn = previousAllowIn;
+
+        while (match('.') || match('[')) {
+            if (match('[')) {
+                property = parseComputedMember();
+                expr = delegate.createMemberExpression('[', expr, property);
+            } else {
+                property = parseNonComputedMember();
+                expr = delegate.createMemberExpression('.', expr, property);
+            }
+            delegate.markEnd(expr, startToken);
+        }
+
+        return expr;
+    }
+
+    // 11.3 Postfix Expressions
+
+    function parsePostfixExpression() {
+        var expr, token, startToken = lookahead;
+
+        expr = parseLeftHandSideExpressionAllowCall();
+
+        if (lookahead.type === Token.Punctuator) {
+            if ((match('++') || match('--')) && !peekLineTerminator()) {
+                // 11.3.1, 11.3.2
+                if (strict && expr.type === Syntax.Identifier && isRestrictedWord(expr.name)) {
+                    throwErrorTolerant({}, Messages.StrictLHSPostfix);
+                }
+
+                if (!isLeftHandSide(expr)) {
+                    throwErrorTolerant({}, Messages.InvalidLHSInAssignment);
+                }
+
+                token = lex();
+                expr = delegate.markEnd(delegate.createPostfixExpression(token.value, expr), startToken);
+            }
+        }
+
+        return expr;
+    }
+
+    // 11.4 Unary Operators
+
+    function parseUnaryExpression() {
+        var token, expr, startToken;
+
+        if (lookahead.type !== Token.Punctuator && lookahead.type !== Token.Keyword) {
+            expr = parsePostfixExpression();
+        } else if (match('++') || match('--')) {
+            startToken = lookahead;
+            token = lex();
+            expr = parseUnaryExpression();
+            // 11.4.4, 11.4.5
+            if (strict && expr.type === Syntax.Identifier && isRestrictedWord(expr.name)) {
+                throwErrorTolerant({}, Messages.StrictLHSPrefix);
+            }
+
+            if (!isLeftHandSide(expr)) {
+                throwErrorTolerant({}, Messages.InvalidLHSInAssignment);
+            }
+
+            expr = delegate.createUnaryExpression(token.value, expr);
+            expr = delegate.markEnd(expr, startToken);
+        } else if (match('+') || match('-') || match('~') || match('!')) {
+            startToken = lookahead;
+            token = lex();
+            expr = parseUnaryExpression();
+            expr = delegate.createUnaryExpression(token.value, expr);
+            expr = delegate.markEnd(expr, startToken);
+        } else if (matchKeyword('delete') || matchKeyword('void') || matchKeyword('typeof')) {
+            startToken = lookahead;
+            token = lex();
+            expr = parseUnaryExpression();
+            expr = delegate.createUnaryExpression(token.value, expr);
+            expr = delegate.markEnd(expr, startToken);
+            if (strict && expr.operator === 'delete' && expr.argument.type === Syntax.Identifier) {
+                throwErrorTolerant({}, Messages.StrictDelete);
+            }
+        } else {
+            expr = parsePostfixExpression();
+        }
+
+        return expr;
+    }
+
+    function binaryPrecedence(token, allowIn) {
+        var prec = 0;
+
+        if (token.type !== Token.Punctuator && token.type !== Token.Keyword) {
+            return 0;
+        }
+
+        switch (token.value) {
+        case '||':
+            prec = 1;
+            break;
+
+        case '&&':
+            prec = 2;
+            break;
+
+        case '|':
+            prec = 3;
+            break;
+
+        case '^':
+            prec = 4;
+            break;
+
+        case '&':
+            prec = 5;
+            break;
+
+        case '==':
+        case '!=':
+        case '===':
+        case '!==':
+            prec = 6;
+            break;
+
+        case '<':
+        case '>':
+        case '<=':
+        case '>=':
+        case 'instanceof':
+            prec = 7;
+            break;
+
+        case 'in':
+            prec = allowIn ? 7 : 0;
+            break;
+
+        case '<<':
+        case '>>':
+        case '>>>':
+            prec = 8;
+            break;
+
+        case '+':
+        case '-':
+            prec = 9;
+            break;
+
+        case '*':
+        case '/':
+        case '%':
+            prec = 11;
+            break;
+
+        default:
+            break;
+        }
+
+        return prec;
+    }
+
+    // 11.5 Multiplicative Operators
+    // 11.6 Additive Operators
+    // 11.7 Bitwise Shift Operators
+    // 11.8 Relational Operators
+    // 11.9 Equality Operators
+    // 11.10 Binary Bitwise Operators
+    // 11.11 Binary Logical Operators
+
+    function parseBinaryExpression() {
+        var marker, markers, expr, token, prec, stack, right, operator, left, i;
+
+        marker = lookahead;
+        left = parseUnaryExpression();
+
+        token = lookahead;
+        prec = binaryPrecedence(token, state.allowIn);
+        if (prec === 0) {
+            return left;
+        }
+        token.prec = prec;
+        lex();
+
+        markers = [marker, lookahead];
+        right = parseUnaryExpression();
+
+        stack = [left, token, right];
+
+        while ((prec = binaryPrecedence(lookahead, state.allowIn)) > 0) {
+
+            // Reduce: make a binary expression from the three topmost entries.
+            while ((stack.length > 2) && (prec <= stack[stack.length - 2].prec)) {
+                right = stack.pop();
+                operator = stack.pop().value;
+                left = stack.pop();
+                expr = delegate.createBinaryExpression(operator, left, right);
+                markers.pop();
+                marker = markers[markers.length - 1];
+                delegate.markEnd(expr, marker);
+                stack.push(expr);
+            }
+
+            // Shift.
+            token = lex();
+            token.prec = prec;
+            stack.push(token);
+            markers.push(lookahead);
+            expr = parseUnaryExpression();
+            stack.push(expr);
+        }
+
+        // Final reduce to clean-up the stack.
+        i = stack.length - 1;
+        expr = stack[i];
+        markers.pop();
+        while (i > 1) {
+            expr = delegate.createBinaryExpression(stack[i - 1].value, stack[i - 2], expr);
+            i -= 2;
+            marker = markers.pop();
+            delegate.markEnd(expr, marker);
+        }
+
+        return expr;
+    }
+
+
+    // 11.12 Conditional Operator
+
+    function parseConditionalExpression() {
+        var expr, previousAllowIn, consequent, alternate, startToken;
+
+        startToken = lookahead;
+
+        expr = parseBinaryExpression();
+
+        if (match('?')) {
+            lex();
+            previousAllowIn = state.allowIn;
+            state.allowIn = true;
+            consequent = parseAssignmentExpression();
+            state.allowIn = previousAllowIn;
+            expect(':');
+            alternate = parseAssignmentExpression();
+
+            expr = delegate.createConditionalExpression(expr, consequent, alternate);
+            delegate.markEnd(expr, startToken);
+        }
+
+        return expr;
+    }
+
+    // 11.13 Assignment Operators
+
+    function parseAssignmentExpression() {
+        var token, left, right, node, startToken;
+
+        token = lookahead;
+        startToken = lookahead;
+
+        node = left = parseConditionalExpression();
+
+        if (matchAssign()) {
+            // LeftHandSideExpression
+            if (!isLeftHandSide(left)) {
+                throwErrorTolerant({}, Messages.InvalidLHSInAssignment);
+            }
+
+            // 11.13.1
+            if (strict && left.type === Syntax.Identifier && isRestrictedWord(left.name)) {
+                throwErrorTolerant(token, Messages.StrictLHSAssignment);
+            }
+
+            token = lex();
+            right = parseAssignmentExpression();
+            node = delegate.markEnd(delegate.createAssignmentExpression(token.value, left, right), startToken);
+        }
+
+        return node;
+    }
+
+    // 11.14 Comma Operator
+
+    function parseExpression() {
+        var expr, startToken = lookahead;
+
+        expr = parseAssignmentExpression();
+
+        if (match(',')) {
+            expr = delegate.createSequenceExpression([ expr ]);
+
+            while (index < length) {
+                if (!match(',')) {
+                    break;
+                }
+                lex();
+                expr.expressions.push(parseAssignmentExpression());
+            }
+
+            delegate.markEnd(expr, startToken);
+        }
+
+        return expr;
+    }
+
+    // 12.1 Block
+
+    function parseStatementList() {
+        var list = [],
+            statement;
+
+        while (index < length) {
+            if (match('}')) {
+                break;
+            }
+            statement = parseSourceElement();
+            if (typeof statement === 'undefined') {
+                break;
+            }
+            list.push(statement);
+        }
+
+        return list;
+    }
+
+    function parseBlock() {
+        var block, startToken;
+
+        startToken = lookahead;
+        expect('{');
+
+        block = parseStatementList();
+
+        expect('}');
+
+        return delegate.markEnd(delegate.createBlockStatement(block), startToken);
+    }
+
+    // 12.2 Variable Statement
+
+    function parseVariableIdentifier() {
+        var token, startToken;
+
+        startToken = lookahead;
+        token = lex();
+
+        if (token.type !== Token.Identifier) {
+            throwUnexpected(token);
+        }
+
+        return delegate.markEnd(delegate.createIdentifier(token.value), startToken);
+    }
+
+    function parseVariableDeclaration(kind) {
+        var init = null, id, startToken;
+
+        startToken = lookahead;
+        id = parseVariableIdentifier();
+
+        // 12.2.1
+        if (strict && isRestrictedWord(id.name)) {
+            throwErrorTolerant({}, Messages.StrictVarName);
+        }
+
+        if (kind === 'const') {
+            expect('=');
+            init = parseAssignmentExpression();
+        } else if (match('=')) {
+            lex();
+            init = parseAssignmentExpression();
+        }
+
+        return delegate.markEnd(delegate.createVariableDeclarator(id, init), startToken);
+    }
+
+    function parseVariableDeclarationList(kind) {
+        var list = [];
+
+        do {
+            list.push(parseVariableDeclaration(kind));
+            if (!match(',')) {
+                break;
+            }
+            lex();
+        } while (index < length);
+
+        return list;
+    }
+
+    function parseVariableStatement() {
+        var declarations;
+
+        expectKeyword('var');
+
+        declarations = parseVariableDeclarationList();
+
+        consumeSemicolon();
+
+        return delegate.createVariableDeclaration(declarations, 'var');
+    }
+
+    // kind may be `const` or `let`
+    // Both are experimental and not in the specification yet.
+    // see http://wiki.ecmascript.org/doku.php?id=harmony:const
+    // and http://wiki.ecmascript.org/doku.php?id=harmony:let
+    function parseConstLetDeclaration(kind) {
+        var declarations, startToken;
+
+        startToken = lookahead;
+
+        expectKeyword(kind);
+
+        declarations = parseVariableDeclarationList(kind);
+
+        consumeSemicolon();
+
+        return delegate.markEnd(delegate.createVariableDeclaration(declarations, kind), startToken);
+    }
+
+    // 12.3 Empty Statement
+
+    function parseEmptyStatement() {
+        expect(';');
+        return delegate.createEmptyStatement();
+    }
+
+    // 12.4 Expression Statement
+
+    function parseExpressionStatement() {
+        var expr = parseExpression();
+        consumeSemicolon();
+        return delegate.createExpressionStatement(expr);
+    }
+
+    // 12.5 If statement
+
+    function parseIfStatement() {
+        var test, consequent, alternate;
+
+        expectKeyword('if');
+
+        expect('(');
+
+        test = parseExpression();
+
+        expect(')');
+
+        consequent = parseStatement();
+
+        if (matchKeyword('else')) {
+            lex();
+            alternate = parseStatement();
+        } else {
+            alternate = null;
+        }
+
+        return delegate.createIfStatement(test, consequent, alternate);
+    }
+
+    // 12.6 Iteration Statements
+
+    function parseDoWhileStatement() {
+        var body, test, oldInIteration;
+
+        expectKeyword('do');
+
+        oldInIteration = state.inIteration;
+        state.inIteration = true;
+
+        body = parseStatement();
+
+        state.inIteration = oldInIteration;
+
+        expectKeyword('while');
+
+        expect('(');
+
+        test = parseExpression();
+
+        expect(')');
+
+        if (match(';')) {
+            lex();
+        }
+
+        return delegate.createDoWhileStatement(body, test);
+    }
+
+    function parseWhileStatement() {
+        var test, body, oldInIteration;
+
+        expectKeyword('while');
+
+        expect('(');
+
+        test = parseExpression();
+
+        expect(')');
+
+        oldInIteration = state.inIteration;
+        state.inIteration = true;
+
+        body = parseStatement();
+
+        state.inIteration = oldInIteration;
+
+        return delegate.createWhileStatement(test, body);
+    }
+
+    function parseForVariableDeclaration() {
+        var token, declarations, startToken;
+
+        startToken = lookahead;
+        token = lex();
+        declarations = parseVariableDeclarationList();
+
+        return delegate.markEnd(delegate.createVariableDeclaration(declarations, token.value), startToken);
+    }
+
+    function parseForStatement() {
+        var init, test, update, left, right, body, oldInIteration;
+
+        init = test = update = null;
+
+        expectKeyword('for');
+
+        expect('(');
+
+        if (match(';')) {
+            lex();
+        } else {
+            if (matchKeyword('var') || matchKeyword('let')) {
+                state.allowIn = false;
+                init = parseForVariableDeclaration();
+                state.allowIn = true;
+
+                if (init.declarations.length === 1 && matchKeyword('in')) {
+                    lex();
+                    left = init;
+                    right = parseExpression();
+                    init = null;
+                }
+            } else {
+                state.allowIn = false;
+                init = parseExpression();
+                state.allowIn = true;
+
+                if (matchKeyword('in')) {
+                    // LeftHandSideExpression
+                    if (!isLeftHandSide(init)) {
+                        throwErrorTolerant({}, Messages.InvalidLHSInForIn);
+                    }
+
+                    lex();
+                    left = init;
+                    right = parseExpression();
+                    init = null;
+                }
+            }
+
+            if (typeof left === 'undefined') {
+                expect(';');
+            }
+        }
+
+        if (typeof left === 'undefined') {
+
+            if (!match(';')) {
+                test = parseExpression();
+            }
+            expect(';');
+
+            if (!match(')')) {
+                update = parseExpression();
+            }
+        }
+
+        expect(')');
+
+        oldInIteration = state.inIteration;
+        state.inIteration = true;
+
+        body = parseStatement();
+
+        state.inIteration = oldInIteration;
+
+        return (typeof left === 'undefined') ?
+                delegate.createForStatement(init, test, update, body) :
+                delegate.createForInStatement(left, right, body);
+    }
+
+    // 12.7 The continue statement
+
+    function parseContinueStatement() {
+        var label = null, key;
+
+        expectKeyword('continue');
+
+        // Optimize the most common form: 'continue;'.
+        if (source.charCodeAt(index) === 0x3B) {
+            lex();
+
+            if (!state.inIteration) {
+                throwError({}, Messages.IllegalContinue);
+            }
+
+            return delegate.createContinueStatement(null);
+        }
+
+        if (peekLineTerminator()) {
+            if (!state.inIteration) {
+                throwError({}, Messages.IllegalContinue);
+            }
+
+            return delegate.createContinueStatement(null);
+        }
+
+        if (lookahead.type === Token.Identifier) {
+            label = parseVariableIdentifier();
+
+            key = '$' + label.name;
+            if (!Object.prototype.hasOwnProperty.call(state.labelSet, key)) {
+                throwError({}, Messages.UnknownLabel, label.name);
+            }
+        }
+
+        consumeSemicolon();
+
+        if (label === null && !state.inIteration) {
+            throwError({}, Messages.IllegalContinue);
+        }
+
+        return delegate.createContinueStatement(label);
+    }
+
+    // 12.8 The break statement
+
+    function parseBreakStatement() {
+        var label = null, key;
+
+        expectKeyword('break');
+
+        // Catch the very common case first: immediately a semicolon (U+003B).
+        if (source.charCodeAt(index) === 0x3B) {
+            lex();
+
+            if (!(state.inIteration || state.inSwitch)) {
+                throwError({}, Messages.IllegalBreak);
+            }
+
+            return delegate.createBreakStatement(null);
+        }
+
+        if (peekLineTerminator()) {
+            if (!(state.inIteration || state.inSwitch)) {
+                throwError({}, Messages.IllegalBreak);
+            }
+
+            return delegate.createBreakStatement(null);
+        }
+
+        if (lookahead.type === Token.Identifier) {
+            label = parseVariableIdentifier();
+
+            key = '$' + label.name;
+            if (!Object.prototype.hasOwnProperty.call(state.labelSet, key)) {
+                throwError({}, Messages.UnknownLabel, label.name);
+            }
+        }
+
+        consumeSemicolon();
+
+        if (label === null && !(state.inIteration || state.inSwitch)) {
+            throwError({}, Messages.IllegalBreak);
+        }
+
+        return delegate.createBreakStatement(label);
+    }
+
+    // 12.9 The return statement
+
+    function parseReturnStatement() {
+        var argument = null;
+
+        expectKeyword('return');
+
+        if (!state.inFunctionBody) {
+            throwErrorTolerant({}, Messages.IllegalReturn);
+        }
+
+        // 'return' followed by a space and an identifier is very common.
+        if (source.charCodeAt(index) === 0x20) {
+            if (isIdentifierStart(source.charCodeAt(index + 1))) {
+                argument = parseExpression();
+                consumeSemicolon();
+                return delegate.createReturnStatement(argument);
+            }
+        }
+
+        if (peekLineTerminator()) {
+            return delegate.createReturnStatement(null);
+        }
+
+        if (!match(';')) {
+            if (!match('}') && lookahead.type !== Token.EOF) {
+                argument = parseExpression();
+            }
+        }
+
+        consumeSemicolon();
+
+        return delegate.createReturnStatement(argument);
+    }
+
+    // 12.10 The with statement
+
+    function parseWithStatement() {
+        var object, body;
+
+        if (strict) {
+            // TODO(ikarienator): Should we update the test cases instead?
+            skipComment();
+            throwErrorTolerant({}, Messages.StrictModeWith);
+        }
+
+        expectKeyword('with');
+
+        expect('(');
+
+        object = parseExpression();
+
+        expect(')');
+
+        body = parseStatement();
+
+        return delegate.createWithStatement(object, body);
+    }
+
+    // 12.10 The swith statement
+
+    function parseSwitchCase() {
+        var test, consequent = [], statement, startToken;
+
+        startToken = lookahead;
+        if (matchKeyword('default')) {
+            lex();
+            test = null;
+        } else {
+            expectKeyword('case');
+            test = parseExpression();
+        }
+        expect(':');
+
+        while (index < length) {
+            if (match('}') || matchKeyword('default') || matchKeyword('case')) {
+                break;
+            }
+            statement = parseStatement();
+            consequent.push(statement);
+        }
+
+        return delegate.markEnd(delegate.createSwitchCase(test, consequent), startToken);
+    }
+
+    function parseSwitchStatement() {
+        var discriminant, cases, clause, oldInSwitch, defaultFound;
+
+        expectKeyword('switch');
+
+        expect('(');
+
+        discriminant = parseExpression();
+
+        expect(')');
+
+        expect('{');
+
+        cases = [];
+
+        if (match('}')) {
+            lex();
+            return delegate.createSwitchStatement(discriminant, cases);
+        }
+
+        oldInSwitch = state.inSwitch;
+        state.inSwitch = true;
+        defaultFound = false;
+
+        while (index < length) {
+            if (match('}')) {
+                break;
+            }
+            clause = parseSwitchCase();
+            if (clause.test === null) {
+                if (defaultFound) {
+                    throwError({}, Messages.MultipleDefaultsInSwitch);
+                }
+                defaultFound = true;
+            }
+            cases.push(clause);
+        }
+
+        state.inSwitch = oldInSwitch;
+
+        expect('}');
+
+        return delegate.createSwitchStatement(discriminant, cases);
+    }
+
+    // 12.13 The throw statement
+
+    function parseThrowStatement() {
+        var argument;
+
+        expectKeyword('throw');
+
+        if (peekLineTerminator()) {
+            throwError({}, Messages.NewlineAfterThrow);
+        }
+
+        argument = parseExpression();
+
+        consumeSemicolon();
+
+        return delegate.createThrowStatement(argument);
+    }
+
+    // 12.14 The try statement
+
+    function parseCatchClause() {
+        var param, body, startToken;
+
+        startToken = lookahead;
+        expectKeyword('catch');
+
+        expect('(');
+        if (match(')')) {
+            throwUnexpected(lookahead);
+        }
+
+        param = parseVariableIdentifier();
+        // 12.14.1
+        if (strict && isRestrictedWord(param.name)) {
+            throwErrorTolerant({}, Messages.StrictCatchVariable);
+        }
+
+        expect(')');
+        body = parseBlock();
+        return delegate.markEnd(delegate.createCatchClause(param, body), startToken);
+    }
+
+    function parseTryStatement() {
+        var block, handlers = [], finalizer = null;
+
+        expectKeyword('try');
+
+        block = parseBlock();
+
+        if (matchKeyword('catch')) {
+            handlers.push(parseCatchClause());
+        }
+
+        if (matchKeyword('finally')) {
+            lex();
+            finalizer = parseBlock();
+        }
+
+        if (handlers.length === 0 && !finalizer) {
+            throwError({}, Messages.NoCatchOrFinally);
+        }
+
+        return delegate.createTryStatement(block, [], handlers, finalizer);
+    }
+
+    // 12.15 The debugger statement
+
+    function parseDebuggerStatement() {
+        expectKeyword('debugger');
+
+        consumeSemicolon();
+
+        return delegate.createDebuggerStatement();
+    }
+
+    // 12 Statements
+
+    function parseStatement() {
+        var type = lookahead.type,
+            expr,
+            labeledBody,
+            key,
+            startToken;
+
+        if (type === Token.EOF) {
+            throwUnexpected(lookahead);
+        }
+
+        if (type === Token.Punctuator && lookahead.value === '{') {
+            return parseBlock();
+        }
+
+        startToken = lookahead;
+
+        if (type === Token.Punctuator) {
+            switch (lookahead.value) {
+            case ';':
+                return delegate.markEnd(parseEmptyStatement(), startToken);
+            case '(':
+                return delegate.markEnd(parseExpressionStatement(), startToken);
+            default:
+                break;
+            }
+        }
+
+        if (type === Token.Keyword) {
+            switch (lookahead.value) {
+            case 'break':
+                return delegate.markEnd(parseBreakStatement(), startToken);
+            case 'continue':
+                return delegate.markEnd(parseContinueStatement(), startToken);
+            case 'debugger':
+                return delegate.markEnd(parseDebuggerStatement(), startToken);
+            case 'do':
+                return delegate.markEnd(parseDoWhileStatement(), startToken);
+            case 'for':
+                return delegate.markEnd(parseForStatement(), startToken);
+            case 'function':
+                return delegate.markEnd(parseFunctionDeclaration(), startToken);
+            case 'if':
+                return delegate.markEnd(parseIfStatement(), startToken);
+            case 'return':
+                return delegate.markEnd(parseReturnStatement(), startToken);
+            case 'switch':
+                return delegate.markEnd(parseSwitchStatement(), startToken);
+            case 'throw':
+                return delegate.markEnd(parseThrowStatement(), startToken);
+            case 'try':
+                return delegate.markEnd(parseTryStatement(), startToken);
+            case 'var':
+                return delegate.markEnd(parseVariableStatement(), startToken);
+            case 'while':
+                return delegate.markEnd(parseWhileStatement(), startToken);
+            case 'with':
+                return delegate.markEnd(parseWithStatement(), startToken);
+            default:
+                break;
+            }
+        }
+
+        expr = parseExpression();
+
+        // 12.12 Labelled Statements
+        if ((expr.type === Syntax.Identifier) && match(':')) {
+            lex();
+
+            key = '$' + expr.name;
+            if (Object.prototype.hasOwnProperty.call(state.labelSet, key)) {
+                throwError({}, Messages.Redeclaration, 'Label', expr.name);
+            }
+
+            state.labelSet[key] = true;
+            labeledBody = parseStatement();
+            delete state.labelSet[key];
+            return delegate.markEnd(delegate.createLabeledStatement(expr, labeledBody), startToken);
+        }
+
+        consumeSemicolon();
+
+        return delegate.markEnd(delegate.createExpressionStatement(expr), startToken);
+    }
+
+    // 13 Function Definition
+
+    function parseFunctionSourceElements() {
+        var sourceElement, sourceElements = [], token, directive, firstRestricted,
+            oldLabelSet, oldInIteration, oldInSwitch, oldInFunctionBody, startToken;
+
+        startToken = lookahead;
+        expect('{');
+
+        while (index < length) {
+            if (lookahead.type !== Token.StringLiteral) {
+                break;
+            }
+            token = lookahead;
+
+            sourceElement = parseSourceElement();
+            sourceElements.push(sourceElement);
+            if (sourceElement.expression.type !== Syntax.Literal) {
+                // this is not directive
+                break;
+            }
+            directive = source.slice(token.start + 1, token.end - 1);
+            if (directive === 'use strict') {
+                strict = true;
+                if (firstRestricted) {
+                    throwErrorTolerant(firstRestricted, Messages.StrictOctalLiteral);
+                }
+            } else {
+                if (!firstRestricted && token.octal) {
+                    firstRestricted = token;
+                }
+            }
+        }
+
+        oldLabelSet = state.labelSet;
+        oldInIteration = state.inIteration;
+        oldInSwitch = state.inSwitch;
+        oldInFunctionBody = state.inFunctionBody;
+
+        state.labelSet = {};
+        state.inIteration = false;
+        state.inSwitch = false;
+        state.inFunctionBody = true;
+
+        while (index < length) {
+            if (match('}')) {
+                break;
+            }
+            sourceElement = parseSourceElement();
+            if (typeof sourceElement === 'undefined') {
+                break;
+            }
+            sourceElements.push(sourceElement);
+        }
+
+        expect('}');
+
+        state.labelSet = oldLabelSet;
+        state.inIteration = oldInIteration;
+        state.inSwitch = oldInSwitch;
+        state.inFunctionBody = oldInFunctionBody;
+
+        return delegate.markEnd(delegate.createBlockStatement(sourceElements), startToken);
+    }
+
+    function parseParams(firstRestricted) {
+        var param, params = [], token, stricted, paramSet, key, message;
+        expect('(');
+
+        if (!match(')')) {
+            paramSet = {};
+            while (index < length) {
+                token = lookahead;
+                param = parseVariableIdentifier();
+                key = '$' + token.value;
+                if (strict) {
+                    if (isRestrictedWord(token.value)) {
+                        stricted = token;
+                        message = Messages.StrictParamName;
+                    }
+                    if (Object.prototype.hasOwnProperty.call(paramSet, key)) {
+                        stricted = token;
+                        message = Messages.StrictParamDupe;
+                    }
+                } else if (!firstRestricted) {
+                    if (isRestrictedWord(token.value)) {
+                        firstRestricted = token;
+                        message = Messages.StrictParamName;
+                    } else if (isStrictModeReservedWord(token.value)) {
+                        firstRestricted = token;
+                        message = Messages.StrictReservedWord;
+                    } else if (Object.prototype.hasOwnProperty.call(paramSet, key)) {
+                        firstRestricted = token;
+                        message = Messages.StrictParamDupe;
+                    }
+                }
+                params.push(param);
+                paramSet[key] = true;
+                if (match(')')) {
+                    break;
+                }
+                expect(',');
+            }
+        }
+
+        expect(')');
+
+        return {
+            params: params,
+            stricted: stricted,
+            firstRestricted: firstRestricted,
+            message: message
+        };
+    }
+
+    function parseFunctionDeclaration() {
+        var id, params = [], body, token, stricted, tmp, firstRestricted, message, previousStrict, startToken;
+
+        startToken = lookahead;
+
+        expectKeyword('function');
+        token = lookahead;
+        id = parseVariableIdentifier();
+        if (strict) {
+            if (isRestrictedWord(token.value)) {
+                throwErrorTolerant(token, Messages.StrictFunctionName);
+            }
+        } else {
+            if (isRestrictedWord(token.value)) {
+                firstRestricted = token;
+                message = Messages.StrictFunctionName;
+            } else if (isStrictModeReservedWord(token.value)) {
+                firstRestricted = token;
+                message = Messages.StrictReservedWord;
+            }
+        }
+
+        tmp = parseParams(firstRestricted);
+        params = tmp.params;
+        stricted = tmp.stricted;
+        firstRestricted = tmp.firstRestricted;
+        if (tmp.message) {
+            message = tmp.message;
+        }
+
+        previousStrict = strict;
+        body = parseFunctionSourceElements();
+        if (strict && firstRestricted) {
+            throwError(firstRestricted, message);
+        }
+        if (strict && stricted) {
+            throwErrorTolerant(stricted, message);
+        }
+        strict = previousStrict;
+
+        return delegate.markEnd(delegate.createFunctionDeclaration(id, params, [], body), startToken);
+    }
+
+    function parseFunctionExpression() {
+        var token, id = null, stricted, firstRestricted, message, tmp, params = [], body, previousStrict, startToken;
+
+        startToken = lookahead;
+        expectKeyword('function');
+
+        if (!match('(')) {
+            token = lookahead;
+            id = parseVariableIdentifier();
+            if (strict) {
+                if (isRestrictedWord(token.value)) {
+                    throwErrorTolerant(token, Messages.StrictFunctionName);
+                }
+            } else {
+                if (isRestrictedWord(token.value)) {
+                    firstRestricted = token;
+                    message = Messages.StrictFunctionName;
+                } else if (isStrictModeReservedWord(token.value)) {
+                    firstRestricted = token;
+                    message = Messages.StrictReservedWord;
+                }
+            }
+        }
+
+        tmp = parseParams(firstRestricted);
+        params = tmp.params;
+        stricted = tmp.stricted;
+        firstRestricted = tmp.firstRestricted;
+        if (tmp.message) {
+            message = tmp.message;
+        }
+
+        previousStrict = strict;
+        body = parseFunctionSourceElements();
+        if (strict && firstRestricted) {
+            throwError(firstRestricted, message);
+        }
+        if (strict && stricted) {
+            throwErrorTolerant(stricted, message);
+        }
+        strict = previousStrict;
+
+        return delegate.markEnd(delegate.createFunctionExpression(id, params, [], body), startToken);
+    }
+
+    // 14 Program
+
+    function parseSourceElement() {
+        if (lookahead.type === Token.Keyword) {
+            switch (lookahead.value) {
+            case 'const':
+            case 'let':
+                return parseConstLetDeclaration(lookahead.value);
+            case 'function':
+                return parseFunctionDeclaration();
+            default:
+                return parseStatement();
+            }
+        }
+
+        if (lookahead.type !== Token.EOF) {
+            return parseStatement();
+        }
+    }
+
+    function parseSourceElements() {
+        var sourceElement, sourceElements = [], token, directive, firstRestricted;
+
+        while (index < length) {
+            token = lookahead;
+            if (token.type !== Token.StringLiteral) {
+                break;
+            }
+
+            sourceElement = parseSourceElement();
+            sourceElements.push(sourceElement);
+            if (sourceElement.expression.type !== Syntax.Literal) {
+                // this is not directive
+                break;
+            }
+            directive = source.slice(token.start + 1, token.end - 1);
+            if (directive === 'use strict') {
+                strict = true;
+                if (firstRestricted) {
+                    throwErrorTolerant(firstRestricted, Messages.StrictOctalLiteral);
+                }
+            } else {
+                if (!firstRestricted && token.octal) {
+                    firstRestricted = token;
+                }
+            }
+        }
+
+        while (index < length) {
+            sourceElement = parseSourceElement();
+            /* istanbul ignore if */
+            if (typeof sourceElement === 'undefined') {
+                break;
+            }
+            sourceElements.push(sourceElement);
+        }
+        return sourceElements;
+    }
+
+    function parseProgram() {
+        var body, startToken;
+
+        skipComment();
+        peek();
+        startToken = lookahead;
+        strict = false;
+
+        body = parseSourceElements();
+        return delegate.markEnd(delegate.createProgram(body), startToken);
+    }
+
+    function filterTokenLocation() {
+        var i, entry, token, tokens = [];
+
+        for (i = 0; i < extra.tokens.length; ++i) {
+            entry = extra.tokens[i];
+            token = {
+                type: entry.type,
+                value: entry.value
+            };
+            if (extra.range) {
+                token.range = entry.range;
+            }
+            if (extra.loc) {
+                token.loc = entry.loc;
+            }
+            tokens.push(token);
+        }
+
+        extra.tokens = tokens;
+    }
+
+    function tokenize(code, options) {
+        var toString,
+            token,
+            tokens;
+
+        toString = String;
+        if (typeof code !== 'string' && !(code instanceof String)) {
+            code = toString(code);
+        }
+
+        delegate = SyntaxTreeDelegate;
+        source = code;
+        index = 0;
+        lineNumber = (source.length > 0) ? 1 : 0;
+        lineStart = 0;
+        length = source.length;
+        lookahead = null;
+        state = {
+            allowIn: true,
+            labelSet: {},
+            inFunctionBody: false,
+            inIteration: false,
+            inSwitch: false,
+            lastCommentStart: -1
+        };
+
+        extra = {};
+
+        // Options matching.
+        options = options || {};
+
+        // Of course we collect tokens here.
+        options.tokens = true;
+        extra.tokens = [];
+        extra.tokenize = true;
+        // The following two fields are necessary to compute the Regex tokens.
+        extra.openParenToken = -1;
+        extra.openCurlyToken = -1;
+
+        extra.range = (typeof options.range === 'boolean') && options.range;
+        extra.loc = (typeof options.loc === 'boolean') && options.loc;
+
+        if (typeof options.comment === 'boolean' && options.comment) {
+            extra.comments = [];
+        }
+        if (typeof options.tolerant === 'boolean' && options.tolerant) {
+            extra.errors = [];
+        }
+
+        try {
+            peek();
+            if (lookahead.type === Token.EOF) {
+                return extra.tokens;
+            }
+
+            token = lex();
+            while (lookahead.type !== Token.EOF) {
+                try {
+                    token = lex();
+                } catch (lexError) {
+                    token = lookahead;
+                    if (extra.errors) {
+                        extra.errors.push(lexError);
+                        // We have to break on the first error
+                        // to avoid infinite loops.
+                        break;
+                    } else {
+                        throw lexError;
+                    }
+                }
+            }
+
+            filterTokenLocation();
+            tokens = extra.tokens;
+            if (typeof extra.comments !== 'undefined') {
+                tokens.comments = extra.comments;
+            }
+            if (typeof extra.errors !== 'undefined') {
+                tokens.errors = extra.errors;
+            }
+        } catch (e) {
+            throw e;
+        } finally {
+            extra = {};
+        }
+        return tokens;
+    }
+
+    function parse(code, options) {
+        var program, toString;
+
+        toString = String;
+        if (typeof code !== 'string' && !(code instanceof String)) {
+            code = toString(code);
+        }
+
+        delegate = SyntaxTreeDelegate;
+        source = code;
+        index = 0;
+        lineNumber = (source.length > 0) ? 1 : 0;
+        lineStart = 0;
+        length = source.length;
+        lookahead = null;
+        state = {
+            allowIn: true,
+            labelSet: {},
+            inFunctionBody: false,
+            inIteration: false,
+            inSwitch: false,
+            lastCommentStart: -1
+        };
+
+        extra = {};
+        if (typeof options !== 'undefined') {
+            extra.range = (typeof options.range === 'boolean') && options.range;
+            extra.loc = (typeof options.loc === 'boolean') && options.loc;
+            extra.attachComment = (typeof options.attachComment === 'boolean') && options.attachComment;
+
+            if (extra.loc && options.source !== null && options.source !== undefined) {
+                extra.source = toString(options.source);
+            }
+
+            if (typeof options.tokens === 'boolean' && options.tokens) {
+                extra.tokens = [];
+            }
+            if (typeof options.comment === 'boolean' && options.comment) {
+                extra.comments = [];
+            }
+            if (typeof options.tolerant === 'boolean' && options.tolerant) {
+                extra.errors = [];
+            }
+            if (extra.attachComment) {
+                extra.range = true;
+                extra.comments = [];
+                extra.bottomRightStack = [];
+                extra.trailingComments = [];
+                extra.leadingComments = [];
+            }
+        }
+
+        try {
+            program = parseProgram();
+            if (typeof extra.comments !== 'undefined') {
+                program.comments = extra.comments;
+            }
+            if (typeof extra.tokens !== 'undefined') {
+                filterTokenLocation();
+                program.tokens = extra.tokens;
+            }
+            if (typeof extra.errors !== 'undefined') {
+                program.errors = extra.errors;
+            }
+        } catch (e) {
+            throw e;
+        } finally {
+            extra = {};
+        }
+
+        return program;
+    }
+
+    // Sync with *.json manifests.
+    exports.version = '1.2.2';
+
+    exports.tokenize = tokenize;
+
+    exports.parse = parse;
+
+    // Deep copy.
+   /* istanbul ignore next */
+    exports.Syntax = (function () {
+        var name, types = {};
+
+        if (typeof Object.create === 'function') {
+            types = Object.create(null);
+        }
+
+        for (name in Syntax) {
+            if (Syntax.hasOwnProperty(name)) {
+                types[name] = Syntax[name];
+            }
+        }
+
+        if (typeof Object.freeze === 'function') {
+            Object.freeze(types);
+        }
+
+        return types;
+    }());
+
+}));
+/* vim: set sw=4 ts=4 et tw=80 : */
+
+},{}],7:[function(require,module,exports){
+/*
+  Copyright (C) 2012-2013 Yusuke Suzuki <utatane.tea@gmail.com>
+  Copyright (C) 2012 Ariya Hidayat <ariya.hidayat@gmail.com>
+
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+
+  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+  ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+/*jslint vars:false, bitwise:true*/
+/*jshint indent:4*/
+/*global exports:true, define:true*/
+(function (root, factory) {
+    'use strict';
+
+    // Universal Module Definition (UMD) to support AMD, CommonJS/Node.js,
+    // and plain browser loading,
+    if (typeof define === 'function' && define.amd) {
+        define(['exports'], factory);
+    } else if (typeof exports !== 'undefined') {
+        factory(exports);
+    } else {
+        factory((root.estraverse = {}));
+    }
+}(this, function (exports) {
+    'use strict';
+
+    var Syntax,
+        isArray,
+        VisitorOption,
+        VisitorKeys,
+        BREAK,
+        SKIP;
+
+    Syntax = {
+        AssignmentExpression: 'AssignmentExpression',
+        ArrayExpression: 'ArrayExpression',
+        ArrayPattern: 'ArrayPattern',
+        ArrowFunctionExpression: 'ArrowFunctionExpression',
+        BlockStatement: 'BlockStatement',
+        BinaryExpression: 'BinaryExpression',
+        BreakStatement: 'BreakStatement',
+        CallExpression: 'CallExpression',
+        CatchClause: 'CatchClause',
+        ClassBody: 'ClassBody',
+        ClassDeclaration: 'ClassDeclaration',
+        ClassExpression: 'ClassExpression',
+        ConditionalExpression: 'ConditionalExpression',
+        ContinueStatement: 'ContinueStatement',
+        DebuggerStatement: 'DebuggerStatement',
+        DirectiveStatement: 'DirectiveStatement',
+        DoWhileStatement: 'DoWhileStatement',
+        EmptyStatement: 'EmptyStatement',
+        ExpressionStatement: 'ExpressionStatement',
+        ForStatement: 'ForStatement',
+        ForInStatement: 'ForInStatement',
+        FunctionDeclaration: 'FunctionDeclaration',
+        FunctionExpression: 'FunctionExpression',
+        Identifier: 'Identifier',
+        IfStatement: 'IfStatement',
+        Literal: 'Literal',
+        LabeledStatement: 'LabeledStatement',
+        LogicalExpression: 'LogicalExpression',
+        MemberExpression: 'MemberExpression',
+        MethodDefinition: 'MethodDefinition',
+        NewExpression: 'NewExpression',
+        ObjectExpression: 'ObjectExpression',
+        ObjectPattern: 'ObjectPattern',
+        Program: 'Program',
+        Property: 'Property',
+        ReturnStatement: 'ReturnStatement',
+        SequenceExpression: 'SequenceExpression',
+        SwitchStatement: 'SwitchStatement',
+        SwitchCase: 'SwitchCase',
+        ThisExpression: 'ThisExpression',
+        ThrowStatement: 'ThrowStatement',
+        TryStatement: 'TryStatement',
+        UnaryExpression: 'UnaryExpression',
+        UpdateExpression: 'UpdateExpression',
+        VariableDeclaration: 'VariableDeclaration',
+        VariableDeclarator: 'VariableDeclarator',
+        WhileStatement: 'WhileStatement',
+        WithStatement: 'WithStatement',
+        YieldExpression: 'YieldExpression'
+    };
+
+    function ignoreJSHintError() { }
+
+    isArray = Array.isArray;
+    if (!isArray) {
+        isArray = function isArray(array) {
+            return Object.prototype.toString.call(array) === '[object Array]';
+        };
+    }
+
+    function deepCopy(obj) {
+        var ret = {}, key, val;
+        for (key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                val = obj[key];
+                if (typeof val === 'object' && val !== null) {
+                    ret[key] = deepCopy(val);
+                } else {
+                    ret[key] = val;
+                }
+            }
+        }
+        return ret;
+    }
+
+    function shallowCopy(obj) {
+        var ret = {}, key;
+        for (key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                ret[key] = obj[key];
+            }
+        }
+        return ret;
+    }
+    ignoreJSHintError(shallowCopy);
+
+    // based on LLVM libc++ upper_bound / lower_bound
+    // MIT License
+
+    function upperBound(array, func) {
+        var diff, len, i, current;
+
+        len = array.length;
+        i = 0;
+
+        while (len) {
+            diff = len >>> 1;
+            current = i + diff;
+            if (func(array[current])) {
+                len = diff;
+            } else {
+                i = current + 1;
+                len -= diff + 1;
+            }
+        }
+        return i;
+    }
+
+    function lowerBound(array, func) {
+        var diff, len, i, current;
+
+        len = array.length;
+        i = 0;
+
+        while (len) {
+            diff = len >>> 1;
+            current = i + diff;
+            if (func(array[current])) {
+                i = current + 1;
+                len -= diff + 1;
+            } else {
+                len = diff;
+            }
+        }
+        return i;
+    }
+    ignoreJSHintError(lowerBound);
+
+    VisitorKeys = {
+        AssignmentExpression: ['left', 'right'],
+        ArrayExpression: ['elements'],
+        ArrayPattern: ['elements'],
+        ArrowFunctionExpression: ['params', 'defaults', 'rest', 'body'],
+        BlockStatement: ['body'],
+        BinaryExpression: ['left', 'right'],
+        BreakStatement: ['label'],
+        CallExpression: ['callee', 'arguments'],
+        CatchClause: ['param', 'body'],
+        ClassBody: ['body'],
+        ClassDeclaration: ['id', 'body', 'superClass'],
+        ClassExpression: ['id', 'body', 'superClass'],
+        ConditionalExpression: ['test', 'consequent', 'alternate'],
+        ContinueStatement: ['label'],
+        DebuggerStatement: [],
+        DirectiveStatement: [],
+        DoWhileStatement: ['body', 'test'],
+        EmptyStatement: [],
+        ExpressionStatement: ['expression'],
+        ForStatement: ['init', 'test', 'update', 'body'],
+        ForInStatement: ['left', 'right', 'body'],
+        ForOfStatement: ['left', 'right', 'body'],
+        FunctionDeclaration: ['id', 'params', 'defaults', 'rest', 'body'],
+        FunctionExpression: ['id', 'params', 'defaults', 'rest', 'body'],
+        Identifier: [],
+        IfStatement: ['test', 'consequent', 'alternate'],
+        Literal: [],
+        LabeledStatement: ['label', 'body'],
+        LogicalExpression: ['left', 'right'],
+        MemberExpression: ['object', 'property'],
+        MethodDefinition: ['key', 'value'],
+        NewExpression: ['callee', 'arguments'],
+        ObjectExpression: ['properties'],
+        ObjectPattern: ['properties'],
+        Program: ['body'],
+        Property: ['key', 'value'],
+        ReturnStatement: ['argument'],
+        SequenceExpression: ['expressions'],
+        SwitchStatement: ['discriminant', 'cases'],
+        SwitchCase: ['test', 'consequent'],
+        ThisExpression: [],
+        ThrowStatement: ['argument'],
+        TryStatement: ['block', 'handlers', 'handler', 'guardedHandlers', 'finalizer'],
+        UnaryExpression: ['argument'],
+        UpdateExpression: ['argument'],
+        VariableDeclaration: ['declarations'],
+        VariableDeclarator: ['id', 'init'],
+        WhileStatement: ['test', 'body'],
+        WithStatement: ['object', 'body'],
+        YieldExpression: ['argument']
+    };
+
+    // unique id
+    BREAK = {};
+    SKIP = {};
+
+    VisitorOption = {
+        Break: BREAK,
+        Skip: SKIP
+    };
+
+    function Reference(parent, key) {
+        this.parent = parent;
+        this.key = key;
+    }
+
+    Reference.prototype.replace = function replace(node) {
+        this.parent[this.key] = node;
+    };
+
+    function Element(node, path, wrap, ref) {
+        this.node = node;
+        this.path = path;
+        this.wrap = wrap;
+        this.ref = ref;
+    }
+
+    function Controller() { }
+
+    // API:
+    // return property path array from root to current node
+    Controller.prototype.path = function path() {
+        var i, iz, j, jz, result, element;
+
+        function addToPath(result, path) {
+            if (isArray(path)) {
+                for (j = 0, jz = path.length; j < jz; ++j) {
+                    result.push(path[j]);
+                }
+            } else {
+                result.push(path);
+            }
+        }
+
+        // root node
+        if (!this.__current.path) {
+            return null;
+        }
+
+        // first node is sentinel, second node is root element
+        result = [];
+        for (i = 2, iz = this.__leavelist.length; i < iz; ++i) {
+            element = this.__leavelist[i];
+            addToPath(result, element.path);
+        }
+        addToPath(result, this.__current.path);
+        return result;
+    };
+
+    // API:
+    // return array of parent elements
+    Controller.prototype.parents = function parents() {
+        var i, iz, result;
+
+        // first node is sentinel
+        result = [];
+        for (i = 1, iz = this.__leavelist.length; i < iz; ++i) {
+            result.push(this.__leavelist[i].node);
+        }
+
+        return result;
+    };
+
+    // API:
+    // return current node
+    Controller.prototype.current = function current() {
+        return this.__current.node;
+    };
+
+    Controller.prototype.__execute = function __execute(callback, element) {
+        var previous, result;
+
+        result = undefined;
+
+        previous  = this.__current;
+        this.__current = element;
+        this.__state = null;
+        if (callback) {
+            result = callback.call(this, element.node, this.__leavelist[this.__leavelist.length - 1].node);
+        }
+        this.__current = previous;
+
+        return result;
+    };
+
+    // API:
+    // notify control skip / break
+    Controller.prototype.notify = function notify(flag) {
+        this.__state = flag;
+    };
+
+    // API:
+    // skip child nodes of current node
+    Controller.prototype.skip = function () {
+        this.notify(SKIP);
+    };
+
+    // API:
+    // break traversals
+    Controller.prototype['break'] = function () {
+        this.notify(BREAK);
+    };
+
+    Controller.prototype.__initialize = function(root, visitor) {
+        this.visitor = visitor;
+        this.root = root;
+        this.__worklist = [];
+        this.__leavelist = [];
+        this.__current = null;
+        this.__state = null;
+    };
+
+    Controller.prototype.traverse = function traverse(root, visitor) {
+        var worklist,
+            leavelist,
+            element,
+            node,
+            nodeType,
+            ret,
+            key,
+            current,
+            current2,
+            candidates,
+            candidate,
+            sentinel;
+
+        this.__initialize(root, visitor);
+
+        sentinel = {};
+
+        // reference
+        worklist = this.__worklist;
+        leavelist = this.__leavelist;
+
+        // initialize
+        worklist.push(new Element(root, null, null, null));
+        leavelist.push(new Element(null, null, null, null));
+
+        while (worklist.length) {
+            element = worklist.pop();
+
+            if (element === sentinel) {
+                element = leavelist.pop();
+
+                ret = this.__execute(visitor.leave, element);
+
+                if (this.__state === BREAK || ret === BREAK) {
+                    return;
+                }
+                continue;
+            }
+
+            if (element.node) {
+
+                ret = this.__execute(visitor.enter, element);
+
+                if (this.__state === BREAK || ret === BREAK) {
+                    return;
+                }
+
+                worklist.push(sentinel);
+                leavelist.push(element);
+
+                if (this.__state === SKIP || ret === SKIP) {
+                    continue;
+                }
+
+                node = element.node;
+                nodeType = element.wrap || node.type;
+                candidates = VisitorKeys[nodeType];
+
+                current = candidates.length;
+                while ((current -= 1) >= 0) {
+                    key = candidates[current];
+                    candidate = node[key];
+                    if (!candidate) {
+                        continue;
+                    }
+
+                    if (!isArray(candidate)) {
+                        worklist.push(new Element(candidate, key, null, null));
+                        continue;
+                    }
+
+                    current2 = candidate.length;
+                    while ((current2 -= 1) >= 0) {
+                        if (!candidate[current2]) {
+                            continue;
+                        }
+                        if ((nodeType === Syntax.ObjectExpression || nodeType === Syntax.ObjectPattern) && 'properties' === candidates[current]) {
+                            element = new Element(candidate[current2], [key, current2], 'Property', null);
+                        } else {
+                            element = new Element(candidate[current2], [key, current2], null, null);
+                        }
+                        worklist.push(element);
+                    }
+                }
+            }
+        }
+    };
+
+    Controller.prototype.replace = function replace(root, visitor) {
+        var worklist,
+            leavelist,
+            node,
+            nodeType,
+            target,
+            element,
+            current,
+            current2,
+            candidates,
+            candidate,
+            sentinel,
+            outer,
+            key;
+
+        this.__initialize(root, visitor);
+
+        sentinel = {};
+
+        // reference
+        worklist = this.__worklist;
+        leavelist = this.__leavelist;
+
+        // initialize
+        outer = {
+            root: root
+        };
+        element = new Element(root, null, null, new Reference(outer, 'root'));
+        worklist.push(element);
+        leavelist.push(element);
+
+        while (worklist.length) {
+            element = worklist.pop();
+
+            if (element === sentinel) {
+                element = leavelist.pop();
+
+                target = this.__execute(visitor.leave, element);
+
+                // node may be replaced with null,
+                // so distinguish between undefined and null in this place
+                if (target !== undefined && target !== BREAK && target !== SKIP) {
+                    // replace
+                    element.ref.replace(target);
+                }
+
+                if (this.__state === BREAK || target === BREAK) {
+                    return outer.root;
+                }
+                continue;
+            }
+
+            target = this.__execute(visitor.enter, element);
+
+            // node may be replaced with null,
+            // so distinguish between undefined and null in this place
+            if (target !== undefined && target !== BREAK && target !== SKIP) {
+                // replace
+                element.ref.replace(target);
+                element.node = target;
+            }
+
+            if (this.__state === BREAK || target === BREAK) {
+                return outer.root;
+            }
+
+            // node may be null
+            node = element.node;
+            if (!node) {
+                continue;
+            }
+
+            worklist.push(sentinel);
+            leavelist.push(element);
+
+            if (this.__state === SKIP || target === SKIP) {
+                continue;
+            }
+
+            nodeType = element.wrap || node.type;
+            candidates = VisitorKeys[nodeType];
+
+            current = candidates.length;
+            while ((current -= 1) >= 0) {
+                key = candidates[current];
+                candidate = node[key];
+                if (!candidate) {
+                    continue;
+                }
+
+                if (!isArray(candidate)) {
+                    worklist.push(new Element(candidate, key, null, new Reference(node, key)));
+                    continue;
+                }
+
+                current2 = candidate.length;
+                while ((current2 -= 1) >= 0) {
+                    if (!candidate[current2]) {
+                        continue;
+                    }
+                    if (nodeType === Syntax.ObjectExpression && 'properties' === candidates[current]) {
+                        element = new Element(candidate[current2], [key, current2], 'Property', new Reference(candidate, current2));
+                    } else {
+                        element = new Element(candidate[current2], [key, current2], null, new Reference(candidate, current2));
+                    }
+                    worklist.push(element);
+                }
+            }
+        }
+
+        return outer.root;
+    };
+
+    function traverse(root, visitor) {
+        var controller = new Controller();
+        return controller.traverse(root, visitor);
+    }
+
+    function replace(root, visitor) {
+        var controller = new Controller();
+        return controller.replace(root, visitor);
+    }
+
+    function extendCommentRange(comment, tokens) {
+        var target;
+
+        target = upperBound(tokens, function search(token) {
+            return token.range[0] > comment.range[0];
+        });
+
+        comment.extendedRange = [comment.range[0], comment.range[1]];
+
+        if (target !== tokens.length) {
+            comment.extendedRange[1] = tokens[target].range[0];
+        }
+
+        target -= 1;
+        if (target >= 0) {
+            comment.extendedRange[0] = tokens[target].range[1];
+        }
+
+        return comment;
+    }
+
+    function attachComments(tree, providedComments, tokens) {
+        // At first, we should calculate extended comment ranges.
+        var comments = [], comment, len, i, cursor;
+
+        if (!tree.range) {
+            throw new Error('attachComments needs range information');
+        }
+
+        // tokens array is empty, we attach comments to tree as 'leadingComments'
+        if (!tokens.length) {
+            if (providedComments.length) {
+                for (i = 0, len = providedComments.length; i < len; i += 1) {
+                    comment = deepCopy(providedComments[i]);
+                    comment.extendedRange = [0, tree.range[0]];
+                    comments.push(comment);
+                }
+                tree.leadingComments = comments;
+            }
+            return tree;
+        }
+
+        for (i = 0, len = providedComments.length; i < len; i += 1) {
+            comments.push(extendCommentRange(deepCopy(providedComments[i]), tokens));
+        }
+
+        // This is based on John Freeman's implementation.
+        cursor = 0;
+        traverse(tree, {
+            enter: function (node) {
+                var comment;
+
+                while (cursor < comments.length) {
+                    comment = comments[cursor];
+                    if (comment.extendedRange[1] > node.range[0]) {
+                        break;
+                    }
+
+                    if (comment.extendedRange[1] === node.range[0]) {
+                        if (!node.leadingComments) {
+                            node.leadingComments = [];
+                        }
+                        node.leadingComments.push(comment);
+                        comments.splice(cursor, 1);
+                    } else {
+                        cursor += 1;
+                    }
+                }
+
+                // already out of owned node
+                if (cursor === comments.length) {
+                    return VisitorOption.Break;
+                }
+
+                if (comments[cursor].extendedRange[0] > node.range[1]) {
+                    return VisitorOption.Skip;
+                }
+            }
+        });
+
+        cursor = 0;
+        traverse(tree, {
+            leave: function (node) {
+                var comment;
+
+                while (cursor < comments.length) {
+                    comment = comments[cursor];
+                    if (node.range[1] < comment.extendedRange[0]) {
+                        break;
+                    }
+
+                    if (node.range[1] === comment.extendedRange[0]) {
+                        if (!node.trailingComments) {
+                            node.trailingComments = [];
+                        }
+                        node.trailingComments.push(comment);
+                        comments.splice(cursor, 1);
+                    } else {
+                        cursor += 1;
+                    }
+                }
+
+                // already out of owned node
+                if (cursor === comments.length) {
+                    return VisitorOption.Break;
+                }
+
+                if (comments[cursor].extendedRange[0] > node.range[1]) {
+                    return VisitorOption.Skip;
+                }
+            }
+        });
+
+        return tree;
+    }
+
+    exports.version = '1.5.1-dev';
+    exports.Syntax = Syntax;
+    exports.traverse = traverse;
+    exports.replace = replace;
+    exports.attachComments = attachComments;
+    exports.VisitorKeys = VisitorKeys;
+    exports.VisitorOption = VisitorOption;
+    exports.Controller = Controller;
+}));
+/* vim: set sw=4 ts=4 et tw=80 : */
+
+},{}],8:[function(require,module,exports){
+'use strict';
+
+function ToObject(val) {
+	if (val == null) {
+		throw new TypeError('Object.assign cannot be called with null or undefined');
+	}
+
+	return Object(val);
+}
+
+module.exports = Object.assign || function (target, source) {
+	var pendingException;
+	var from;
+	var keys;
+	var to = ToObject(target);
+
+	for (var s = 1; s < arguments.length; s++) {
+		from = arguments[s];
+		keys = Object.keys(Object(from));
+
+		for (var i = 0; i < keys.length; i++) {
+			try {
+				to[keys[i]] = from[keys[i]];
+			} catch (err) {
+				if (pendingException === undefined) {
+					pendingException = err;
+				}
+			}
+		}
+	}
+
+	if (pendingException) {
+		throw pendingException;
+	}
+
+	return to;
+};
+
+},{}],9:[function(require,module,exports){
+/**
+ * @fileoverview Main ESLint object.
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var esprima = require("esprima"),
+    estraverse = require("estraverse"),
+    escope = require("escope"),
+    environments = require("../conf/environments.json"),
+    assign = require("object-assign"),
+    rules = require("./rules"),
+    util = require("./util"),
+    RuleContext = require("./rule-context"),
+    EventEmitter = require("events").EventEmitter;
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+function escapeRegExp(rx) {
+    return rx.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+}
+
+/**
+ * Parses a list of "name:boolean_value" or/and "name" options divided by comma or
+ * whitespace.
+ * @param {string} string The string to parse.
+ * @returns {Object} Result map object of names and boolean values
+ */
+function parseBooleanConfig(string) {
+    var items = {};
+    // Collapse whitespace around : to make parsing easier
+    string = string.replace(/\s*:\s*/g, ":");
+    // Collapse whitespace around ,
+    string = string.replace(/\s*,\s*/g, ",");
+    string.split(/\s|,+/).forEach(function(name) {
+        if (!name) {
+            return;
+        }
+        var pos = name.indexOf(":"),
+            value;
+        if (pos !== -1) {
+            value = name.substring(pos + 1, name.length);
+            name = name.substring(0, pos);
+        }
+
+        items[name] = (value === "true");
+
+    });
+    return items;
+}
+
+/**
+ * Parses a JSON-like config.
+ * @param {string} string The string to parse.
+ * @returns {Object} Result map object
+ */
+function parseJsonConfig(string) {
+    var items = {};
+    string = string.replace(/([a-z0-9\-\/]+):/g, "\"$1\":").replace(/(\]|[0-9])\s+(?=")/, "$1,");
+    try {
+        items = JSON.parse("{" + string + "}");
+    } catch(e) { }
+
+    return items;
+}
+
+/**
+ * Parses a config of values separated by comma.
+ * @param {string} string The string to parse.
+ * @returns {Object} Result map of values and true values
+ */
+function parseListConfig(string) {
+    var items = {};
+    // Collapse whitespace around ,
+    string = string.replace(/\s*,\s*/g, ",");
+    string.split(/,+/).forEach(function(name) {
+        name = name.trim();
+        if (!name) {
+            return;
+        }
+        items[name] = true;
+    });
+    return items;
+}
+
+/**
+ * @param {Scope} scope The scope object to check.
+ * @param {string} name The name of the variable to look up.
+ * @returns {Variable} The variable object if found or null if not.
+ */
+function getVariable(scope, name) {
+    var variable = null;
+    scope.variables.some(function(v) {
+        if (v.name === name) {
+            variable = v;
+            return true;
+        } else {
+            return false;
+        }
+
+    });
+    return variable;
+}
+
+/**
+ * Ensures that variables representing built-in properties of the Global Object,
+ * and any globals declared by special block comments, are present in the global
+ * scope.
+ * @param {ASTNode} program The top node of the AST.
+ * @param {Scope} globalScope The global scope.
+ * @param {Object} config The existing configuration data.
+ * @returns {void}
+ */
+function addDeclaredGlobals(program, globalScope, config) {
+    var declaredGlobals = {},
+        explicitGlobals = {},
+        builtin = environments.builtin;
+
+    assign(declaredGlobals, builtin);
+
+    Object.keys(config.env).forEach(function (name) {
+        if (config.env[name]) {
+            var environmentGlobals = environments[name] && environments[name].globals;
+            if (environmentGlobals) {
+                assign(declaredGlobals, environmentGlobals);
+            }
+        }
+    });
+
+    assign(declaredGlobals, config.globals);
+    assign(explicitGlobals, config.astGlobals);
+
+    Object.keys(declaredGlobals).forEach(function(name) {
+        var variable = getVariable(globalScope, name);
+        if (!variable) {
+            variable = new escope.Variable(name, globalScope);
+            variable.eslintExplicitGlobal = false;
+            globalScope.variables.push(variable);
+        }
+        variable.writeable = declaredGlobals[name];
+    });
+
+    Object.keys(explicitGlobals).forEach(function(name) {
+        var variable = getVariable(globalScope, name);
+        if (!variable) {
+            variable = new escope.Variable(name, globalScope);
+            variable.eslintExplicitGlobal = true;
+            globalScope.variables.push(variable);
+        }
+        variable.writeable = explicitGlobals[name];
+    });
+}
+
+/**
+ * Add data to reporting configuration to disable reporting for list of rules
+ * starting from start location
+ * @param  {Object[]} reportingConfig Current reporting configuration
+ * @param  {Object} start Position to start
+ * @param  {string[]} rules List of rules
+ * @returns {void}
+ */
+function disableReporting(reportingConfig, start, rules) {
+
+    if (rules.length) {
+        rules.forEach(function(rule) {
+            reportingConfig.push({
+                start: start,
+                end: null,
+                rule: rule
+            });
+        });
+    } else {
+        reportingConfig.push({
+            start: start,
+            end: null,
+            rule: null
+        });
+    }
+}
+
+/**
+ * Add data to reporting configuration to enable reporting for list of rules
+ * starting from start location
+ * @param  {Object[]} reportingConfig Current reporting configuration
+ * @param  {Object} start Position to start
+ * @param  {string[]} rules List of rules
+ * @returns {void}
+ */
+function enableReporting(reportingConfig, start, rules) {
+    var i;
+
+    if (rules.length) {
+        rules.forEach(function(rule) {
+            for (i = reportingConfig.length - 1; i >= 0; i--) {
+                if (!reportingConfig[i].end && reportingConfig[i].rule === rule ) {
+                    reportingConfig[i].end = start;
+                    break;
+                }
+            }
+        });
+    } else {
+        // find all previous disabled locations if they was started as list of rules
+        var prevStart;
+        for (i = reportingConfig.length - 1; i >= 0; i--) {
+            if (prevStart && prevStart !== reportingConfig[i].start) {
+                break;
+            }
+
+            if (!reportingConfig[i].end) {
+                reportingConfig[i].end = start;
+                prevStart = reportingConfig[i].start;
+            }
+        }
+    }
+}
+
+
+/**
+ * Parses comments in file to extract file-specific config of rules, globals
+ * and environments and merges them with global config; also code blocks
+ * where reporting is disabled or enabled and merges them with reporting config.
+ * @param {ASTNode} ast The top node of the AST.
+ * @param {Object} config The existing configuration data.
+ * @param {Object[]} reportingConfig The existing reporting configuration data.
+ * @returns {void}
+ */
+function modifyConfigsFromComments(ast, config, reportingConfig) {
+
+    var commentConfig = {
+        astGlobals: {},
+        rules: {},
+        env: {}
+    };
+    var commentRules = {};
+
+    ast.comments.forEach(function(comment) {
+        if (comment.type === "Block") {
+
+            var value = comment.value.trim();
+            var match = /^(eslint-\w+|eslint|globals?)(\s|$)/.exec(value);
+
+            if (match) {
+                value = value.substring(match.index + match[1].length);
+
+                switch (match[1]) {
+                    case "globals":
+                    case "global":
+                        util.mixin(commentConfig.astGlobals, parseBooleanConfig(value));
+                        break;
+
+                    case "eslint-env":
+                        util.mixin(commentConfig.env, parseListConfig(value));
+                        break;
+
+                    case "eslint-disable":
+                        disableReporting(reportingConfig, comment.loc.start, Object.keys(parseListConfig(value)));
+                        break;
+
+                    case "eslint-enable":
+                        enableReporting(reportingConfig, comment.loc.start, Object.keys(parseListConfig(value)));
+                        break;
+
+                    case "eslint":
+                        var items = parseJsonConfig(value);
+                        Object.keys(items).forEach(function(name) {
+                            var ruleValue = items[name];
+                            if (typeof ruleValue === "number" || (Array.isArray(ruleValue) && typeof ruleValue[0] === "number")) {
+                                commentRules[name] = ruleValue;
+                            }
+                        });
+                        break;
+
+                    // no default
+                }
+            }
+        }
+    });
+
+    // apply environment rules before user rules
+    Object.keys(commentConfig.env).forEach(function (name) {
+        var environmentRules = environments[name] && environments[name].rules;
+        if (commentConfig.env[name] && environmentRules) {
+            util.mixin(commentConfig.rules, environmentRules);
+        }
+    });
+    util.mixin(commentConfig.rules, commentRules);
+
+    util.mergeConfigs(config, commentConfig);
+}
+
+/**
+ * Check if message of rule with ruleId should be ignored in location
+ * @param  {Object[]} reportingConfig  Collection of ignore records
+ * @param  {string} ruleId   Id of rule
+ * @param  {Object} location Location of message
+ * @returns {boolean}          True if message should be ignored, false otherwise
+ */
+function isDisabledByReportingConfig(reportingConfig, ruleId, location) {
+
+    for (var i = 0, c = reportingConfig.length; i < c; i++) {
+
+        var ignore = reportingConfig[i];
+        if ((!ignore.rule || ignore.rule === ruleId) &&
+            (location.line > ignore.start.line || (location.line === ignore.start.line && location.column >= ignore.start.column)) &&
+            (!ignore.end || (location.line < ignore.end.line || (location.line === ignore.end.line && location.column <= ignore.end.column)))) {
+                return true;
+        }
+    }
+
+    return false;
+}
+
+/**
+ * Process initial config to make it safe to extend by file comment config
+ * @param  {Object} config Initial config
+ * @returns {Object}        Processed config
+ */
+function prepareConfig(config) {
+
+    config.globals = config.globals || config.global || {};
+    delete config.global;
+
+    var copiedRules = {};
+    if (typeof config.rules === "object") {
+        Object.keys(config.rules).forEach(function(k) {
+            var rule = config.rules[k];
+            if (Array.isArray(rule)) {
+                copiedRules[k] = rule.slice();
+            } else {
+                copiedRules[k] = rule;
+            }
+        });
+    }
+
+    return {
+        rules: copiedRules,
+        globals: util.mergeConfigs({}, config.globals),
+        env: util.mergeConfigs({}, config.env || {}),
+        settings: util.mergeConfigs({}, config.settings || {})
+    };
+}
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * Object that is responsible for verifying JavaScript text
+ * @name eslint
+ */
+module.exports = (function() {
+
+    var api = Object.create(new EventEmitter()),
+        messages = [],
+        currentText = null,
+        currentTextLines = [],
+        currentConfig = null,
+        currentTokens = null,
+        currentScopes = null,
+        scopeMap = null,
+        currentFilename = null,
+        controller = null,
+        reportingConfig = [],
+        commentLocsEnter = [],
+        commentLocsExit = [];
+
+    /**
+     * Parses text into an AST. Moved out here because the try-catch prevents
+     * optimization of functions, so it's best to keep the try-catch as isolated
+     * as possible
+     * @param {string} text The text to parse.
+     * @returns {ASTNode} The AST if successful or null if not.
+     * @private
+     */
+    function parse(text) {
+        /*
+         * Check for parsing errors first. If there's a parsing error, nothing
+         * else can happen. However, a parsing error does not throw an error
+         * from this method - it's just considered a fatal error message, a
+         * problem that ESLint identified just like any other.
+         */
+        try {
+            return esprima.parse(text, {
+                loc: true,
+                range: true,
+                raw: true,
+                tokens: true,
+                comment: true,
+                attachComment: true
+            });
+        } catch (ex) {
+
+            messages.push({
+                fatal: true,
+                severity: 2,
+
+                // messages come as "Line X: Unexpected token foo", so strip off leading part
+                message: ex.message.substring(ex.message.indexOf(":") + 1).trim(),
+
+                line: ex.lineNumber,
+                column: ex.column
+            });
+
+            return null;
+        }
+    }
+
+    /**
+     * Check collection of comments to prevent double event for comment as
+     * leading and trailing, then emit event if passing
+     * @param {ASTNode[]} comments Collection of comment nodes
+     * @param {Object[]} locs List of locations of previous comment nodes
+     * @param {string} eventName Event name postfix
+     * @returns {void}
+     */
+    function emitComments(comments, locs, eventName) {
+
+        if (comments.length) {
+            comments.forEach(function(node) {
+                if (locs.indexOf(node.loc) >= 0) {
+                    locs.splice(locs.indexOf(node.loc), 1);
+                } else {
+                    locs.push(node.loc);
+                    api.emit(node.type + eventName, node);
+                }
+            });
+        }
+    }
+
+    /**
+     * Shortcut to check and emit enter of comment nodes
+     * @param {ASTNode[]} comments Collection of comment nodes
+     * @returns {void}
+     */
+    function emitCommentsEnter(comments) {
+        emitComments(comments, commentLocsEnter, "Comment");
+    }
+
+    /**
+     * Shortcut to check and emit exit of comment nodes
+     * @param {ASTNode[]} comments Collection of comment nodes
+     * @returns {void}
+     */
+    function emitCommentsExit(comments) {
+        emitComments(comments, commentLocsExit, "Comment:exit");
+    }
+
+    /**
+     * Get the severity level of a rule (0 - none, 1 - warning, 2 - error)
+     * Returns 0 if the rule config is not valid (an Array or a number)
+     * @param {Array|number} ruleConfig rule configuration
+     * @returns {number} 0, 1, or 2, indicating rule severity
+     */
+    function getRuleSeverity(ruleConfig) {
+        if (typeof ruleConfig === "number") {
+            return ruleConfig;
+        } else if (Array.isArray(ruleConfig)) {
+            return ruleConfig[0];
+        } else {
+            return 0;
+        }
+    }
+
+    /**
+     * Get the options for a rule (not including severity), if any
+     * @param {Array|number} ruleConfig rule configuration
+     * @returns {Array} of rule options, empty Array if none
+     */
+    function getRuleOptions(ruleConfig) {
+        if (Array.isArray(ruleConfig)) {
+            return ruleConfig.slice(1);
+        } else {
+            return [];
+        }
+    }
+
+    // set unlimited listeners (see https://github.com/eslint/eslint/issues/524)
+    api.setMaxListeners(0);
+
+    /**
+     * Resets the internal state of the object.
+     * @returns {void}
+     */
+    api.reset = function() {
+        this.removeAllListeners();
+        messages = [];
+        currentConfig = null;
+        currentText = null;
+        currentTextLines = [];
+        currentTokens = null;
+        currentScopes = null;
+        scopeMap = null;
+        controller = null;
+        reportingConfig = [];
+        commentLocsEnter = [];
+        commentLocsExit = [];
+    };
+
+    /**
+     * Verifies the text against the rules specified by the second argument.
+     * @param {string} text The JavaScript text to verify.
+     * @param {Object} config An object whose keys specify the rules to use.
+     * @param {string=} filename The optional filename of the file being checked.
+     *      If this is not set, the filename will default to '<input>' in the rule context.
+     * @param {boolean=} saveState Indicates if the state from the last run should be saved.
+     *      Mostly useful for testing purposes.
+     * @returns {Object[]} The results as an array of messages or null if no messages.
+     */
+    api.verify = function(text, config, filename, saveState) {
+
+        var ast;
+
+        // set the current parsed filename
+        currentFilename = filename;
+
+        if (!saveState) {
+            this.reset();
+        }
+
+        ast = parse(text.replace(/^#!([^\r\n]+[\r\n]+)/, "//$1"));
+
+        // if Esprima failed to parse the file, there's no sense in setting up rules
+        if (ast) {
+            // process initial config to make it safe to extend
+            config = prepareConfig(config);
+
+            // parse global comments and modify config
+            modifyConfigsFromComments(ast, config, reportingConfig);
+
+            // enable appropriate rules
+            Object.keys(config.rules).filter(function(key) {
+                return getRuleSeverity(config.rules[key]) > 0;
+            }).forEach(function(key) {
+
+                var ruleCreator = rules.get(key),
+                    severity = getRuleSeverity(config.rules[key]),
+                    options = getRuleOptions(config.rules[key]),
+                    rule;
+
+                if (ruleCreator) {
+                    try {
+                        rule = ruleCreator(new RuleContext(key, api, severity, options, config.settings));
+
+                        // add all the node types as listeners
+                        Object.keys(rule).forEach(function(nodeType) {
+                            api.on(nodeType, rule[nodeType]);
+                        });
+                    } catch(ex) {
+                        ex.message = "Error while loading rule '" + key + "': " + ex.message;
+                        throw ex;
+                    }
+
+                } else {
+                    throw new Error("Definition for rule '" + key + "' was not found.");
+                }
+            });
+
+            // save config so rules can access as necessary
+            currentConfig = config;
+            currentText = text;
+            controller = new estraverse.Controller();
+
+            // gather data that may be needed by the rules
+            currentScopes = escope.analyze(ast, { ignoreEval: true }).scopes;
+
+            /*
+             * Index the scopes by the start range of their block for efficient
+             * lookup in getScope.
+             */
+            scopeMap = [];
+            currentScopes.forEach(function (scope, index) {
+                var range = scope.block.range[0];
+
+                // Sometimes two scopes are returned for a given node. This is
+                // handled later in a known way, so just don't overwrite here.
+                if (!scopeMap[range]) {
+                    scopeMap[range] = index;
+                }
+            });
+
+            /*
+             * Split text here into array of lines so
+             * it's not being done repeatedly
+             * by individual rules.
+             */
+            currentTextLines = currentText.split(/\r?\n/g);
+
+            // Freezing so array isn't accidentally changed by a rule.
+            Object.freeze(currentTextLines);
+
+            /* get all tokens from the ast and store them as a hashtable to
+             * improve traversal speed when wanting to find tokens for a given
+             * node
+             */
+            currentTokens = [];
+            ast.tokens.forEach(function(token) {
+                currentTokens[token.range[0]] = token;
+            });
+
+            // augment global scope with declared global variables
+            addDeclaredGlobals(ast, currentScopes[0], currentConfig);
+
+            /*
+             * Each node has a type property. Whenever a particular type of node is found,
+             * an event is fired. This allows any listeners to automatically be informed
+             * that this type of node has been found and react accordingly.
+             */
+            controller.traverse(ast, {
+                enter: function(node, parent) {
+
+                    var comments = api.getComments(node);
+
+                    emitCommentsEnter(comments.leading);
+                    node.parent = parent;
+                    api.emit(node.type, node);
+                    emitCommentsEnter(comments.trailing);
+                },
+                leave: function(node) {
+
+                    var comments = api.getComments(node);
+
+                    emitCommentsExit(comments.trailing);
+                    api.emit(node.type + ":exit", node);
+                    emitCommentsExit(comments.leading);
+                }
+            });
+
+        }
+
+        return messages;
+    };
+
+    /**
+     * Reports a message from one of the rules.
+     * @param {string} ruleId The ID of the rule causing the message.
+     * @param {number} severity The severity level of the rule as configured.
+     * @param {ASTNode} node The AST node that the message relates to.
+     * @param {Object=} location An object containing the error line and column
+     *      numbers. If location is not provided the node's start location will
+     *      be used.
+     * @param {string} message The actual message.
+     * @param {Object} opts Optional template data which produces a formatted message
+     *     with symbols being replaced by this object's values.
+     * @returns {void}
+     */
+    api.report = function(ruleId, severity, node, location, message, opts) {
+
+        if (typeof location === "string") {
+            opts = message;
+            message = location;
+            location = node.loc.start;
+        }
+
+        Object.keys(opts || {}).forEach(function (key) {
+            var rx = new RegExp("{{" + escapeRegExp(key) + "}}", "g");
+            message = message.replace(rx, opts[key]);
+        });
+
+        if (isDisabledByReportingConfig(reportingConfig, ruleId, location)) {
+            return;
+        }
+
+        messages.push({
+            ruleId: ruleId,
+            severity: severity,
+            node: node,
+            message: message,
+            line: location.line,
+            column: location.column,
+            source: api.getSource(node)
+        });
+    };
+
+    /**
+     * Gets the source code for the given node.
+     * @param {ASTNode=} node The AST node to get the text for.
+     * @param {int=} beforeCount The number of characters before the node to retrieve.
+     * @param {int=} afterCount The number of characters after the node to retrieve.
+     * @returns {string} The text representing the AST node.
+     */
+    api.getSource = function(node, beforeCount, afterCount) {
+        if (node) {
+            return (currentText !== null) ? currentText.slice(node.range[0] - (beforeCount || 0),
+                node.range[1] + (afterCount || 0)) : null;
+        } else {
+            return currentText;
+        }
+
+    };
+
+    /**
+     * Gets the entire source text split into an array of lines.
+     * @returns {Array} The source text as an array of lines.
+     */
+    api.getSourceLines = function() {
+        return currentTextLines;
+    };
+
+    /**
+     * Gets all comments for the given node.
+     * @param {ASTNode} node The AST node to get the comments for.
+     * @returns {Object} The list of comments indexed by their position.
+     */
+    api.getComments = function(node) {
+
+        var leadingComments = node.leadingComments || [],
+            trailingComments = node.trailingComments || [];
+
+        /*
+         * Esprima adds a "comments" array on Program nodes rather than
+         * leadingComments/trailingComments. Comments are only left in the
+         * Program node comments array if there is no executable code.
+         */
+        if (node.type === "Program") {
+            if (node.body.length === 0) {
+                leadingComments = node.comments;
+            }
+        }
+
+        return {
+            leading: leadingComments,
+            trailing: trailingComments
+        };
+    };
+
+    /**
+     * Retrieves the JSDoc comment for a given node.
+     * @param {ASTNode} node The AST node to get the comment for.
+     * @returns {ASTNode} The BlockComment node containing the JSDoc for the
+     *      given node or null if not found.
+     */
+    api.getJSDocComment = function(node) {
+
+        var parent = node.parent,
+            line = node.loc.start.line;
+
+        /**
+         * Finds a JSDoc comment node in an array of comment nodes.
+         * @param {ASTNode[]} comments The array of comment nodes to search.
+         * @returns {ASTNode} The node if found, null if not.
+         * @private
+         */
+        function findJSDocComment(comments) {
+
+            if (comments) {
+                for (var i = comments.length - 1; i >= 0; i--) {
+                    if (comments[i].type === "Block" && comments[i].value.charAt(0) === "*") {
+
+                        if (line - comments[i].loc.end.line <= 1) {
+                            return comments[i];
+                        } else {
+                            break;
+                        }
+                    }
+                }
+            }
+
+            return null;
+        }
+
+        switch (node.type) {
+            case "FunctionDeclaration":
+                return findJSDocComment(node.leadingComments);
+
+            case "FunctionExpression":
+
+                if (parent.type !== "CallExpression" || parent.callee !== node) {
+                    while (parent && !parent.leadingComments && parent.type !== "FunctionExpression" && parent.type !== "FunctionDeclaration") {
+                        parent = parent.parent;
+                    }
+
+                    return parent && (parent.type !== "FunctionDeclaration") ? findJSDocComment(parent.leadingComments) : null;
+                }
+
+                // falls through
+
+            default:
+                return null;
+        }
+    };
+
+    /**
+     * Gets a number of tokens that precede a given node's tokens in the token stream.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [beforeCount=0] The number of tokens before the node to retrieve.
+     * @returns {[Token]} Array of objects representing tokens.
+     */
+    api.getTokensBefore = function(node, beforeCount) {
+        var beforeTokens = [], cursor = node.range[0] - 1;
+        while (beforeCount > 0 && cursor >= 0) {
+            if (currentTokens[cursor]) {
+                beforeTokens.unshift(currentTokens[cursor]);
+                --beforeCount;
+            }
+            --cursor;
+        }
+        return beforeTokens;
+    };
+
+    /**
+     * Gets the token that precedes a given node's tokens in the token stream.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [skip=0] A number of tokens to skip before the given node.
+     * @returns {Token} An object representing the token.
+     */
+    api.getTokenBefore = function(node, skip) {
+        for (var cursor = node.range[0] - 1; cursor >= 0; --cursor) {
+            if (currentTokens[cursor]) {
+                if (skip > 0) {
+                    --skip;
+                } else {
+                    return currentTokens[cursor];
+                }
+            }
+        }
+    };
+
+    /**
+     * Gets a number of tokens that precede a given node's tokens in the token stream.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [afterCount=0] The number of tokens after the node to retrieve.
+     * @returns {[Token]} Array of objects representing tokens.
+     */
+    api.getTokensAfter = function(node, afterCount) {
+        var afterTokens = [], cursor = node.range[1];
+        while (afterCount > 0 && cursor < currentTokens.length) {
+            if (currentTokens[cursor]) {
+                afterTokens.push(currentTokens[cursor]);
+                --afterCount;
+                cursor = currentTokens[cursor].range[1];
+            } else {
+                ++cursor;
+            }
+        }
+        return afterTokens;
+    };
+
+    /**
+     * Gets the token that follows a given node's tokens in the token stream.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [skip=0] A number of tokens to skip after the given node.
+     * @returns {Token} An object representing the token.
+     */
+    api.getTokenAfter = function(node, skip) {
+        for (var cursor = node.range[1]; cursor < currentTokens.length; ++cursor) {
+            if (currentTokens[cursor]) {
+                if (skip > 0) {
+                    --skip;
+                } else {
+                    return currentTokens[cursor];
+                }
+            }
+        }
+    };
+
+    /**
+     * Gets all tokens that are related to the given node.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [beforeCount=0] The number of tokens before the node to retrieve.
+     * @param {int} [afterCount=0] The number of tokens after the node to retrieve.
+     * @returns {[Token]} Array of objects representing tokens.
+     */
+    api.getTokens = function(node, beforeCount, afterCount) {
+        var beforeTokens = api.getTokensBefore(node, beforeCount),
+            afterTokens = api.getTokensAfter(node, afterCount),
+            tokens = [],
+            cursor = node.range[0];
+        while (cursor < node.range[1]) {
+            if (currentTokens[cursor]) {
+                tokens.push(currentTokens[cursor]);
+                cursor = currentTokens[cursor].range[1];
+            } else {
+                ++cursor;
+            }
+        }
+        return beforeTokens.concat(tokens, afterTokens);
+    };
+
+    /**
+     * Gets the first `count` tokens of the given node's token stream.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [count=0] The number of tokens of the node to retrieve.
+     * @returns {[Token]} Array of objects representing tokens.
+     */
+    api.getFirstTokens = function(node, count) {
+        var tokens = [], cursor = node.range[0];
+        while (count > 0 && cursor < node.range[1]) {
+            if (currentTokens[cursor]) {
+                tokens.push(currentTokens[cursor]);
+                --count;
+                cursor = currentTokens[cursor].range[1];
+            } else {
+                ++cursor;
+            }
+        }
+        return tokens;
+    };
+
+    /**
+     * Gets the first token of the given node's token stream.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [skip=0] A number of tokens to skip.
+     * @returns {Token} An object representing the token.
+     */
+    api.getFirstToken = function(node, skip) {
+        for (var cursor = node.range[0]; cursor < node.range[1]; ++cursor) {
+            if (currentTokens[cursor]) {
+                if (skip > 0) {
+                    --skip;
+                } else {
+                    return currentTokens[cursor];
+                }
+            }
+        }
+    };
+
+    /**
+     * Gets the last `count` tokens of the given node.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [count=0] The number of tokens of the node to retrieve.
+     * @returns {[Token]} Array of objects representing tokens.
+     */
+    api.getLastTokens = function(node, count) {
+        var tokens = [], cursor = node.range[1] - 1;
+        while (count > 0 && cursor >= node.range[0]) {
+            if (currentTokens[cursor]) {
+                tokens.unshift(currentTokens[cursor]);
+                --count;
+            }
+            --cursor;
+        }
+        return tokens;
+    };
+
+    /**
+     * Gets the last token of the given node's token stream.
+     * @param {ASTNode} node The AST node.
+     * @param {int} [skip=0] A number of tokens to skip.
+     * @returns {Token} An object representing the token.
+     */
+    api.getLastToken = function(node, skip) {
+        for (var cursor = node.range[1] - 1; cursor >= node.range[0]; --cursor) {
+            if (currentTokens[cursor]) {
+                if (skip > 0) {
+                    --skip;
+                } else {
+                    return currentTokens[cursor];
+                }
+            }
+        }
+    };
+
+    /**
+     * Gets nodes that are ancestors of current node.
+     * @returns {ASTNode[]} Array of objects representing ancestors.
+     */
+    api.getAncestors = function() {
+        return controller.parents();
+    };
+
+
+    /**
+     * Gets the scope for the current node.
+     * @returns {Object} An object representing the current node's scope.
+     */
+    api.getScope = function() {
+        var parents = controller.parents(),
+            innerBlock = null,
+            selectedScopeIndex;
+
+        // Don't do this for Program nodes - they have no parents
+        if (parents.length) {
+
+            // if current node is function declaration, add it to the list
+            var current = controller.current();
+            if (current.type === "FunctionDeclaration" || current.type === "FunctionExpression") {
+                parents.push(current);
+            }
+
+            // Ascend the current node's parents
+            for (var i = parents.length - 1; i >= 0; --i) {
+
+                // The first node that requires a scope is the node that will be
+                // our current node's innermost scope.
+                if (escope.Scope.isScopeRequired(parents[i])) {
+                    innerBlock = parents[i];
+                    break;
+                }
+            }
+
+            // Find and return the innermost scope
+            selectedScopeIndex = scopeMap[innerBlock.range[0]];
+
+            // Named function expressions create two nested scope objects. The
+            // outer scope contains only the function expression name. We return
+            // the inner scope.
+            if (innerBlock.type === "FunctionExpression" && innerBlock.id && innerBlock.id.name) {
+                ++selectedScopeIndex;
+            }
+
+            return currentScopes[selectedScopeIndex];
+        } else {
+            return currentScopes[0];    // global scope
+        }
+    };
+
+    /**
+     * Gets the filename for the currently parsed source.
+     * @returns {string} The filename associated with the source being parsed.
+     *     Defaults to "<input>" if no filename info is present.
+     */
+    api.getFilename = function() {
+        if (typeof currentFilename === "string") {
+            return currentFilename;
+        } else {
+            return "<input>";
+        }
+    };
+
+    /**
+     * Defines a new linting rule.
+     * @param {string} ruleId A unique rule identifier
+     * @param {Function} ruleModule Function from context to object mapping AST node types to event handlers
+     * @returns {void}
+     */
+    var defineRule = api.defineRule = function(ruleId, ruleModule) {
+        rules.define(ruleId, ruleModule);
+    };
+
+    /**
+     * Defines many new linting rules.
+     * @param {object} rules map from unique rule identifier to rule
+     * @returns {void}
+     */
+    api.defineRules = function(rules) {
+        Object.getOwnPropertyNames(rules).forEach(function(ruleId) {
+            defineRule(ruleId, rules[ruleId]);
+        });
+    };
+
+    /**
+     * Gets the default eslint configuration.
+     * @returns {Object} Object mapping rule IDs to their default configurations
+     */
+    api.defaults = function() {
+        return require("../conf/eslint.json");
+    };
+
+    return api;
+
+}());
+
+},{"../conf/environments.json":1,"../conf/eslint.json":2,"./rule-context":11,"./rules":12,"./util":150,"escope":5,"esprima":6,"estraverse":7,"events":3,"object-assign":8}],10:[function(require,module,exports){
+module.exports = function() {
+    var rules = Object.create(null);
+    rules["block-scoped-var"] = require("./rules/block-scoped-var");
+    rules["brace-style"] = require("./rules/brace-style");
+    rules["camelcase"] = require("./rules/camelcase");
+    rules["comma-spacing"] = require("./rules/comma-spacing");
+    rules["comma-style"] = require("./rules/comma-style");
+    rules["complexity"] = require("./rules/complexity");
+    rules["consistent-return"] = require("./rules/consistent-return");
+    rules["consistent-this"] = require("./rules/consistent-this");
+    rules["curly"] = require("./rules/curly");
+    rules["default-case"] = require("./rules/default-case");
+    rules["dot-notation"] = require("./rules/dot-notation");
+    rules["eol-last"] = require("./rules/eol-last");
+    rules["eqeqeq"] = require("./rules/eqeqeq");
+    rules["func-names"] = require("./rules/func-names");
+    rules["func-style"] = require("./rules/func-style");
+    rules["global-strict"] = require("./rules/global-strict");
+    rules["guard-for-in"] = require("./rules/guard-for-in");
+    rules["handle-callback-err"] = require("./rules/handle-callback-err");
+    rules["key-spacing"] = require("./rules/key-spacing");
+    rules["max-depth"] = require("./rules/max-depth");
+    rules["max-len"] = require("./rules/max-len");
+    rules["max-nested-callbacks"] = require("./rules/max-nested-callbacks");
+    rules["max-params"] = require("./rules/max-params");
+    rules["max-statements"] = require("./rules/max-statements");
+    rules["new-cap"] = require("./rules/new-cap");
+    rules["new-parens"] = require("./rules/new-parens");
+    rules["no-alert"] = require("./rules/no-alert");
+    rules["no-array-constructor"] = require("./rules/no-array-constructor");
+    rules["no-bitwise"] = require("./rules/no-bitwise");
+    rules["no-caller"] = require("./rules/no-caller");
+    rules["no-catch-shadow"] = require("./rules/no-catch-shadow");
+    rules["no-comma-dangle"] = require("./rules/no-comma-dangle");
+    rules["no-cond-assign"] = require("./rules/no-cond-assign");
+    rules["no-console"] = require("./rules/no-console");
+    rules["no-constant-condition"] = require("./rules/no-constant-condition");
+    rules["no-control-regex"] = require("./rules/no-control-regex");
+    rules["no-debugger"] = require("./rules/no-debugger");
+    rules["no-delete-var"] = require("./rules/no-delete-var");
+    rules["no-div-regex"] = require("./rules/no-div-regex");
+    rules["no-dupe-keys"] = require("./rules/no-dupe-keys");
+    rules["no-else-return"] = require("./rules/no-else-return");
+    rules["no-empty-class"] = require("./rules/no-empty-class");
+    rules["no-empty-label"] = require("./rules/no-empty-label");
+    rules["no-empty"] = require("./rules/no-empty");
+    rules["no-eq-null"] = require("./rules/no-eq-null");
+    rules["no-eval"] = require("./rules/no-eval");
+    rules["no-ex-assign"] = require("./rules/no-ex-assign");
+    rules["no-extend-native"] = require("./rules/no-extend-native");
+    rules["no-extra-bind"] = require("./rules/no-extra-bind");
+    rules["no-extra-boolean-cast"] = require("./rules/no-extra-boolean-cast");
+    rules["no-extra-parens"] = require("./rules/no-extra-parens");
+    rules["no-extra-semi"] = require("./rules/no-extra-semi");
+    rules["no-extra-strict"] = require("./rules/no-extra-strict");
+    rules["no-fallthrough"] = require("./rules/no-fallthrough");
+    rules["no-floating-decimal"] = require("./rules/no-floating-decimal");
+    rules["no-func-assign"] = require("./rules/no-func-assign");
+    rules["no-implied-eval"] = require("./rules/no-implied-eval");
+    rules["no-inner-declarations"] = require("./rules/no-inner-declarations");
+    rules["no-invalid-regexp"] = require("./rules/no-invalid-regexp");
+    rules["no-iterator"] = require("./rules/no-iterator");
+    rules["no-label-var"] = require("./rules/no-label-var");
+    rules["no-labels"] = require("./rules/no-labels");
+    rules["no-lone-blocks"] = require("./rules/no-lone-blocks");
+    rules["no-lonely-if"] = require("./rules/no-lonely-if");
+    rules["no-loop-func"] = require("./rules/no-loop-func");
+    rules["no-mixed-requires"] = require("./rules/no-mixed-requires");
+    rules["no-mixed-spaces-and-tabs"] = require("./rules/no-mixed-spaces-and-tabs");
+    rules["no-multi-spaces"] = require("./rules/no-multi-spaces");
+    rules["no-multi-str"] = require("./rules/no-multi-str");
+    rules["no-multiple-empty-lines"] = require("./rules/no-multiple-empty-lines");
+    rules["no-native-reassign"] = require("./rules/no-native-reassign");
+    rules["no-negated-in-lhs"] = require("./rules/no-negated-in-lhs");
+    rules["no-nested-ternary"] = require("./rules/no-nested-ternary");
+    rules["no-new-func"] = require("./rules/no-new-func");
+    rules["no-new-object"] = require("./rules/no-new-object");
+    rules["no-new-require"] = require("./rules/no-new-require");
+    rules["no-new-wrappers"] = require("./rules/no-new-wrappers");
+    rules["no-new"] = require("./rules/no-new");
+    rules["no-obj-calls"] = require("./rules/no-obj-calls");
+    rules["no-octal-escape"] = require("./rules/no-octal-escape");
+    rules["no-octal"] = require("./rules/no-octal");
+    rules["no-path-concat"] = require("./rules/no-path-concat");
+    rules["no-plusplus"] = require("./rules/no-plusplus");
+    rules["no-process-env"] = require("./rules/no-process-env");
+    rules["no-process-exit"] = require("./rules/no-process-exit");
+    rules["no-proto"] = require("./rules/no-proto");
+    rules["no-redeclare"] = require("./rules/no-redeclare");
+    rules["no-regex-spaces"] = require("./rules/no-regex-spaces");
+    rules["no-reserved-keys"] = require("./rules/no-reserved-keys");
+    rules["no-restricted-modules"] = require("./rules/no-restricted-modules");
+    rules["no-return-assign"] = require("./rules/no-return-assign");
+    rules["no-script-url"] = require("./rules/no-script-url");
+    rules["no-self-compare"] = require("./rules/no-self-compare");
+    rules["no-sequences"] = require("./rules/no-sequences");
+    rules["no-shadow-restricted-names"] = require("./rules/no-shadow-restricted-names");
+    rules["no-shadow"] = require("./rules/no-shadow");
+    rules["no-space-before-semi"] = require("./rules/no-space-before-semi");
+    rules["no-spaced-func"] = require("./rules/no-spaced-func");
+    rules["no-sparse-arrays"] = require("./rules/no-sparse-arrays");
+    rules["no-sync"] = require("./rules/no-sync");
+    rules["no-ternary"] = require("./rules/no-ternary");
+    rules["no-trailing-spaces"] = require("./rules/no-trailing-spaces");
+    rules["no-undef-init"] = require("./rules/no-undef-init");
+    rules["no-undef"] = require("./rules/no-undef");
+    rules["no-undefined"] = require("./rules/no-undefined");
+    rules["no-underscore-dangle"] = require("./rules/no-underscore-dangle");
+    rules["no-unreachable"] = require("./rules/no-unreachable");
+    rules["no-unused-expressions"] = require("./rules/no-unused-expressions");
+    rules["no-unused-vars"] = require("./rules/no-unused-vars");
+    rules["no-use-before-define"] = require("./rules/no-use-before-define");
+    rules["no-void"] = require("./rules/no-void");
+    rules["no-warning-comments"] = require("./rules/no-warning-comments");
+    rules["no-with"] = require("./rules/no-with");
+    rules["no-wrap-func"] = require("./rules/no-wrap-func");
+    rules["one-var"] = require("./rules/one-var");
+    rules["padded-blocks"] = require("./rules/padded-blocks");
+    rules["quote-props"] = require("./rules/quote-props");
+    rules["quotes"] = require("./rules/quotes");
+    rules["radix"] = require("./rules/radix");
+    rules["semi"] = require("./rules/semi");
+    rules["sort-vars"] = require("./rules/sort-vars");
+    rules["space-after-keywords"] = require("./rules/space-after-keywords");
+    rules["space-before-blocks"] = require("./rules/space-before-blocks");
+    rules["space-in-brackets"] = require("./rules/space-in-brackets");
+    rules["space-in-parens"] = require("./rules/space-in-parens");
+    rules["space-infix-ops"] = require("./rules/space-infix-ops");
+    rules["space-return-throw-case"] = require("./rules/space-return-throw-case");
+    rules["space-unary-word-ops"] = require("./rules/space-unary-word-ops");
+    rules["spaced-line-comment"] = require("./rules/spaced-line-comment");
+    rules["strict"] = require("./rules/strict");
+    rules["use-isnan"] = require("./rules/use-isnan");
+    rules["valid-jsdoc"] = require("./rules/valid-jsdoc");
+    rules["valid-typeof"] = require("./rules/valid-typeof");
+    rules["vars-on-top"] = require("./rules/vars-on-top");
+    rules["wrap-iife"] = require("./rules/wrap-iife");
+    rules["wrap-regex"] = require("./rules/wrap-regex");
+    rules["yoda"] = require("./rules/yoda");
+
+    return rules;
+};
+},{"./rules/block-scoped-var":13,"./rules/brace-style":14,"./rules/camelcase":15,"./rules/comma-spacing":16,"./rules/comma-style":17,"./rules/complexity":18,"./rules/consistent-return":19,"./rules/consistent-this":20,"./rules/curly":21,"./rules/default-case":22,"./rules/dot-notation":23,"./rules/eol-last":24,"./rules/eqeqeq":25,"./rules/func-names":26,"./rules/func-style":27,"./rules/global-strict":28,"./rules/guard-for-in":29,"./rules/handle-callback-err":30,"./rules/key-spacing":31,"./rules/max-depth":32,"./rules/max-len":33,"./rules/max-nested-callbacks":34,"./rules/max-params":35,"./rules/max-statements":36,"./rules/new-cap":37,"./rules/new-parens":38,"./rules/no-alert":39,"./rules/no-array-constructor":40,"./rules/no-bitwise":41,"./rules/no-caller":42,"./rules/no-catch-shadow":43,"./rules/no-comma-dangle":44,"./rules/no-cond-assign":45,"./rules/no-console":46,"./rules/no-constant-condition":47,"./rules/no-control-regex":48,"./rules/no-debugger":49,"./rules/no-delete-var":50,"./rules/no-div-regex":51,"./rules/no-dupe-keys":52,"./rules/no-else-return":53,"./rules/no-empty":56,"./rules/no-empty-class":54,"./rules/no-empty-label":55,"./rules/no-eq-null":57,"./rules/no-eval":58,"./rules/no-ex-assign":59,"./rules/no-extend-native":60,"./rules/no-extra-bind":61,"./rules/no-extra-boolean-cast":62,"./rules/no-extra-parens":63,"./rules/no-extra-semi":64,"./rules/no-extra-strict":65,"./rules/no-fallthrough":66,"./rules/no-floating-decimal":67,"./rules/no-func-assign":68,"./rules/no-implied-eval":69,"./rules/no-inner-declarations":70,"./rules/no-invalid-regexp":71,"./rules/no-iterator":72,"./rules/no-label-var":73,"./rules/no-labels":74,"./rules/no-lone-blocks":75,"./rules/no-lonely-if":76,"./rules/no-loop-func":77,"./rules/no-mixed-requires":78,"./rules/no-mixed-spaces-and-tabs":79,"./rules/no-multi-spaces":80,"./rules/no-multi-str":81,"./rules/no-multiple-empty-lines":82,"./rules/no-native-reassign":83,"./rules/no-negated-in-lhs":84,"./rules/no-nested-ternary":85,"./rules/no-new":90,"./rules/no-new-func":86,"./rules/no-new-object":87,"./rules/no-new-require":88,"./rules/no-new-wrappers":89,"./rules/no-obj-calls":91,"./rules/no-octal":93,"./rules/no-octal-escape":92,"./rules/no-path-concat":94,"./rules/no-plusplus":95,"./rules/no-process-env":96,"./rules/no-process-exit":97,"./rules/no-proto":98,"./rules/no-redeclare":99,"./rules/no-regex-spaces":100,"./rules/no-reserved-keys":101,"./rules/no-restricted-modules":102,"./rules/no-return-assign":103,"./rules/no-script-url":104,"./rules/no-self-compare":105,"./rules/no-sequences":106,"./rules/no-shadow":108,"./rules/no-shadow-restricted-names":107,"./rules/no-space-before-semi":109,"./rules/no-spaced-func":110,"./rules/no-sparse-arrays":111,"./rules/no-sync":112,"./rules/no-ternary":113,"./rules/no-trailing-spaces":114,"./rules/no-undef":116,"./rules/no-undef-init":115,"./rules/no-undefined":117,"./rules/no-underscore-dangle":118,"./rules/no-unreachable":119,"./rules/no-unused-expressions":120,"./rules/no-unused-vars":121,"./rules/no-use-before-define":122,"./rules/no-void":123,"./rules/no-warning-comments":124,"./rules/no-with":125,"./rules/no-wrap-func":126,"./rules/one-var":127,"./rules/padded-blocks":128,"./rules/quote-props":129,"./rules/quotes":130,"./rules/radix":131,"./rules/semi":132,"./rules/sort-vars":133,"./rules/space-after-keywords":134,"./rules/space-before-blocks":135,"./rules/space-in-brackets":136,"./rules/space-in-parens":137,"./rules/space-infix-ops":138,"./rules/space-return-throw-case":139,"./rules/space-unary-word-ops":140,"./rules/spaced-line-comment":141,"./rules/strict":142,"./rules/use-isnan":143,"./rules/valid-jsdoc":144,"./rules/valid-typeof":145,"./rules/vars-on-top":146,"./rules/wrap-iife":147,"./rules/wrap-regex":148,"./rules/yoda":149}],11:[function(require,module,exports){
+/**
+ * @fileoverview RuleContext utility for rules
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+
+var PASSTHROUGHS = [
+        "getSource",
+        "getSourceLines",
+        "getTokens",
+        "getTokensBefore",
+        "getTokenBefore",
+        "getTokensAfter",
+        "getTokenAfter",
+        "getFirstTokens",
+        "getFirstToken",
+        "getLastTokens",
+        "getLastToken",
+        "getComments",
+        "getAncestors",
+        "getScope",
+        "getJSDocComment",
+        "getFilename"
+    ];
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/**
+ * Acts as an abstraction layer between rules and the main eslint object.
+ * @constructor
+ * @param {string} ruleId The ID of the rule using this object.
+ * @param {eslint} eslint The eslint object.
+ * @param {number} severity The configured severity level of the rule.
+ * @param {array} options The configuration information to be added to the rule.
+ * @param {object} settings The configuration settings passed from the config file.
+ */
+function RuleContext(ruleId, eslint, severity, options, settings) {
+
+    /**
+     * The read-only ID of the rule.
+     */
+    Object.defineProperty(this, "id", {
+        value: ruleId
+    });
+
+    /**
+     * The read-only options of the rule
+     */
+    Object.defineProperty(this, "options", {
+        value: options
+    });
+
+    /**
+     * The read-only settings shared between all rules
+     */
+    Object.defineProperty(this, "settings", {
+        value: settings
+    });
+
+    // copy over passthrough methods
+    PASSTHROUGHS.forEach(function(name) {
+        this[name] = function() {
+            return eslint[name].apply(eslint, arguments);
+        };
+    }, this);
+
+    /**
+     * Passthrough to eslint.report() that automatically assigns the rule ID and severity.
+     * @param {ASTNode} node The AST node related to the message.
+     * @param {Object=} location The location of the error.
+     * @param {string} message The message to display to the user.
+     * @param {Object} opts Optional template data which produces a formatted message
+     *     with symbols being replaced by this object's values.
+     * @returns {void}
+     */
+    this.report = function(node, location, message, opts) {
+        eslint.report(ruleId, severity, node, location, message, opts);
+    };
+
+}
+
+RuleContext.prototype = {
+    constructor: RuleContext
+};
+
+module.exports = RuleContext;
+
+},{}],12:[function(require,module,exports){
+/**
+ * @fileoverview Defines a storage for rules.
+ * @author Nicholas C. Zakas
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var loadRules = require("./load-rules");
+
+//------------------------------------------------------------------------------
+// Privates
+//------------------------------------------------------------------------------
+
+var rules = Object.create(null);
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+
+/**
+ * Registers a rule module for rule id in storage.
+ * @param {String} ruleId Rule id (file name).
+ * @param {Function} ruleModule Rule handler.
+ * @returns {void}
+ */
+function define(ruleId, ruleModule) {
+    rules[ruleId] = ruleModule;
+}
+
+exports.define = define;
+
+/**
+ * Loads and registers all rules from passed rules directory.
+ * @param {String} [rulesDir] Path to rules directory, may be relative. Defaults to `lib/rules`.
+ * @returns {void}
+ */
+function load(rulesDir) {
+    var newRules = loadRules(rulesDir);
+    Object.keys(newRules).forEach(function(ruleId) {
+        define(ruleId, newRules[ruleId]);
+    });
+}
+
+exports.load = load;
+
+/**
+ * Registers all given rules of a plugin.
+ * @param {Object} pluginRules A key/value map of rule definitions.
+ * @param {String} pluginName The name of the plugin without prefix (`eslint-plugin-`).
+ * @returns {void}
+ */
+exports.import = function (pluginRules, pluginName) {
+    Object.keys(pluginRules).forEach(function (ruleId) {
+        var qualifiedRuleId = pluginName + "/" + ruleId,
+            rule = pluginRules[ruleId];
+
+        define(qualifiedRuleId, rule);
+    });
+};
+
+/**
+ * Access rule handler by id (file name).
+ * @param {String} ruleId Rule id (file name).
+ * @returns {Function} Rule handler.
+ */
+exports.get = function(ruleId) {
+    return rules[ruleId];
+};
+
+/**
+ * Reset rules storage.
+ * Should be used only in tests.
+ * @returns {void}
+ */
+exports.testClear = function() {
+    rules = Object.create(null);
+};
+
+//------------------------------------------------------------------------------
+// Initialization
+//------------------------------------------------------------------------------
+
+// loads built-in rules
+load();
+
+},{"./load-rules":10}],13:[function(require,module,exports){
+/**
+ * @fileoverview Rule to check for "block scoped" variables by binding context
+ * @author Matt DuVall <http://www.mattduvall.com>
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var scopeStack = [];
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Determines whether an identifier is in declaration position or is a non-declaration reference.
+     * @param {ASTNode} id The identifier.
+     * @param {ASTNode} parent The identifier's parent AST node.
+     * @returns {Boolean} true when the identifier is in declaration position.
+     */
+    function isDeclaration(id, parent) {
+        switch (parent.type) {
+            case "FunctionDeclaration":
+            case "FunctionExpression":
+                return parent.params.indexOf(id) > -1 || id === parent.id;
+
+            case "VariableDeclarator":
+                return id === parent.id;
+
+            case "CatchClause":
+                return id === parent.param;
+
+            default:
+                return false;
+        }
+    }
+
+    /**
+     * Determines whether an identifier is in property position.
+     * @param {ASTNode} id The identifier.
+     * @param {ASTNode} parent The identifier's parent AST node.
+     * @returns {Boolean} true when the identifier is in property position.
+     */
+    function isProperty(id, parent) {
+        switch (parent.type) {
+            case "MemberExpression":
+                return id === parent.property && !parent.computed;
+
+            case "Property":
+                return id === parent.key;
+
+            default:
+                return false;
+        }
+    }
+
+    /**
+     * Pushes a new scope object on the scope stack.
+     * @returns {void}
+     */
+    function pushScope() {
+        scopeStack.push([]);
+    }
+
+    /**
+     * Removes the topmost scope object from the scope stack.
+     * @returns {void}
+     */
+    function popScope() {
+        scopeStack.pop();
+    }
+
+    /**
+     * Declares the given names in the topmost scope object.
+     * @param {[String]} names A list of names to declare.
+     * @returns {void}
+     */
+    function declare(names) {
+        [].push.apply(scopeStack[scopeStack.length - 1], names);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    function functionHandler(node) {
+        pushScope();
+        declare(node.params.map(function(id) {
+            return id.name;
+        }));
+        declare(node.id ? [node.id.name] : []);
+        declare(["arguments"]);
+    }
+
+    function variableDeclarationHandler(node) {
+        declare(node.declarations.map(function(decl) {
+            return decl.id.name;
+        }));
+    }
+
+    return {
+        "Program": function() {
+            scopeStack = [context.getScope().variables.map(function(v) {
+                return v.name;
+            })];
+        },
+
+        "BlockStatement": function(node) {
+            var statements = node.body;
+            pushScope();
+            statements.forEach(function(stmt) {
+                if (stmt.type === "VariableDeclaration") {
+                    variableDeclarationHandler(stmt);
+                } else if (stmt.type === "FunctionDeclaration") {
+                    declare([stmt.id.name]);
+                }
+            });
+        },
+
+        "BlockStatement:exit": popScope,
+
+        "CatchClause": function(node) {
+            pushScope();
+            declare([node.param.name]);
+        },
+        "CatchClause:exit": popScope,
+
+        "FunctionDeclaration": functionHandler,
+        "FunctionDeclaration:exit": popScope,
+
+        "FunctionExpression": functionHandler,
+        "FunctionExpression:exit": popScope,
+
+        "ForStatement": function(node) {
+            pushScope();
+            if (node.init && node.init.type === "VariableDeclaration") {
+                variableDeclarationHandler(node.init);
+            }
+        },
+        "ForStatement:exit": popScope,
+
+        "ForInStatement": function(node) {
+            pushScope();
+            if (node.left.type === "VariableDeclaration") {
+                variableDeclarationHandler(node.left);
+            }
+        },
+        "ForInStatement:exit": popScope,
+
+        "Identifier": function(node) {
+            var ancestor = context.getAncestors().pop();
+            if (isDeclaration(node, ancestor) || isProperty(node, ancestor)) {
+                return;
+            }
+            for (var i = 0, l = scopeStack.length; i < l; i++) {
+                if (scopeStack[i].indexOf(node.name) > -1) {
+                    return;
+                }
+            }
+
+            context.report(node, "\"" + node.name + "\" used outside of binding context.");
+        }
+    };
+
+};
+
+},{}],14:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag block statements that do not use the one true brace style
+ * @author Ian Christian Myers
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+    var style = context.options[0] || "1tbs";
+    var params = context.options[1] || {};
+
+    var OPEN_MESSAGE = "Opening curly brace does not appear on the same line as controlling statement.",
+        BODY_MESSAGE = "Statement inside of curly braces should be on next line.",
+        CLOSE_MESSAGE = "Closing curly brace does not appear on the same line as the subsequent block.",
+        CLOSE_MESSAGE_SINGLE = "Closing curly brace should be on the same line as opening curly brace or on the line after the previous block.",
+        CLOSE_MESSAGE_STROUSTRUP = "Closing curly brace appears on the same line as the subsequent block.";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Binds a list of properties to a function that verifies that the opening
+     * curly brace is on the same line as its controlling statement of a given
+     * node.
+     * @param {...string} The properties to check on the node.
+     * @returns {Function} A function that will perform the check on a node
+     */
+    function checkBlock() {
+        var blockProperties = arguments;
+        return function(node) {
+            [].forEach.call(blockProperties, function(blockProp) {
+                var block = node[blockProp], previousToken, curlyToken, curlyTokenEnd, curlyTokensOnSameLine;
+                block = node[blockProp];
+                if (block && block.type === "BlockStatement") {
+                    previousToken = context.getTokenBefore(block);
+                    curlyToken = context.getFirstToken(block);
+                    curlyTokenEnd = context.getLastToken(block);
+                    curlyTokensOnSameLine = curlyToken.loc.start.line === curlyTokenEnd.loc.start.line;
+
+                    if (previousToken.loc.start.line !== curlyToken.loc.start.line) {
+                        context.report(node, OPEN_MESSAGE);
+                    } else if (block.body.length && params.allowSingleLine) {
+                        if (curlyToken.loc.start.line === block.body[0].loc.start.line && !curlyTokensOnSameLine) {
+                            context.report(block.body[0], BODY_MESSAGE);
+                        } else if (curlyTokenEnd.loc.start.line === block.body[block.body.length - 1].loc.start.line && !curlyTokensOnSameLine) {
+                            context.report(block.body[block.body.length - 1], CLOSE_MESSAGE_SINGLE);
+                        }
+                    } else if (block.body.length && curlyToken.loc.start.line === block.body[0].loc.start.line) {
+                        context.report(block.body[0], BODY_MESSAGE);
+                    }
+                }
+            });
+        };
+    }
+
+    /**
+     * Enforces the configured brace style on IfStatements
+     * @param {ASTNode} node An IfStatement node.
+     * @returns {void}
+     */
+    function checkIfStatement(node) {
+        var tokens;
+
+        checkBlock("consequent", "alternate")(node);
+
+        if (node.alternate && node.alternate.type === "BlockStatement") {
+            tokens = context.getTokensBefore(node.alternate, 2);
+            if (style === "1tbs") {
+                if (tokens[0].loc.start.line !== tokens[1].loc.start.line) {
+                    context.report(node.alternate, CLOSE_MESSAGE);
+                }
+            } else if (style === "stroustrup") {
+                if (tokens[0].loc.start.line === tokens[1].loc.start.line) {
+                    context.report(node.alternate, CLOSE_MESSAGE_STROUSTRUP);
+                }
+            }
+        }
+    }
+
+    /**
+     * Enforces the configured brace style on TryStatements
+     * @param {ASTNode} node A TryStatement node.
+     * @returns {void}
+     */
+    function checkTryStatement(node) {
+        var tokens;
+
+        checkBlock("block", "finalizer")(node);
+
+        if (node.finalizer && node.finalizer.type === "BlockStatement") {
+            tokens = context.getTokensBefore(node.finalizer, 2);
+            if (style === "1tbs") {
+                if (tokens[0].loc.start.line !== tokens[1].loc.start.line) {
+                    context.report(node.finalizer, CLOSE_MESSAGE);
+                }
+            } else if (style === "stroustrup") {
+                if (tokens[0].loc.start.line === tokens[1].loc.start.line) {
+                    context.report(node.finalizer, CLOSE_MESSAGE_STROUSTRUP);
+                }
+            }
+        }
+    }
+
+    /**
+     * Enforces the configured brace style on CatchClauses
+     * @param {ASTNode} node A CatchClause node.
+     * @returns {void}
+     */
+    function checkCatchClause(node) {
+        var previousToken = context.getTokenBefore(node),
+            firstToken = context.getFirstToken(node);
+
+        checkBlock("body")(node);
+
+        if (node.body && node.body.type === "BlockStatement") {
+            if (style === "1tbs") {
+                if (previousToken.loc.start.line !== firstToken.loc.start.line) {
+                    context.report(node, CLOSE_MESSAGE);
+                }
+            } else if (style === "stroustrup") {
+                if (previousToken.loc.start.line === firstToken.loc.start.line) {
+                    context.report(node, CLOSE_MESSAGE_STROUSTRUP);
+                }
+            }
+        }
+    }
+
+    /**
+     * Enforces the configured brace style on SwitchStatements
+     * @param {ASTNode} node A SwitchStatement node.
+     * @returns {void}
+     */
+    function checkSwitchStatement(node) {
+        var tokens;
+        if (node.cases && node.cases.length) {
+            tokens = context.getTokensBefore(node.cases[0], 2);
+            if (tokens[0].loc.start.line !== tokens[1].loc.start.line) {
+                context.report(node, OPEN_MESSAGE);
+            }
+        } else {
+            tokens = context.getLastTokens(node, 3);
+            if (tokens[0].loc.start.line !== tokens[1].loc.start.line) {
+                context.report(node, OPEN_MESSAGE);
+            }
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "FunctionDeclaration": checkBlock("body"),
+        "FunctionExpression": checkBlock("body"),
+        "IfStatement": checkIfStatement,
+        "TryStatement": checkTryStatement,
+        "CatchClause": checkCatchClause,
+        "DoWhileStatement": checkBlock("body"),
+        "WhileStatement": checkBlock("body"),
+        "WithStatement": checkBlock("body"),
+        "ForStatement": checkBlock("body"),
+        "ForInStatement": checkBlock("body"),
+        "SwitchStatement": checkSwitchStatement
+    };
+
+};
+
+},{}],15:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag non-camelcased identifiers
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Checks if a string contains an underscore and isn't all upper-case
+     * @param {String} name The string to check.
+     * @returns {boolean} if the string is underscored
+     * @private
+     */
+    function isUnderscored(name) {
+
+        // if there's an underscore, it might be A_CONSTANT, which is okay
+        return name.indexOf("_") > -1 && name !== name.toUpperCase();
+    }
+
+    /**
+     * Reports an AST node as a rule violation.
+     * @param {ASTNode} node The node to report.
+     * @returns {void}
+     * @private
+     */
+    function report(node) {
+        context.report(node, "Identifier '{{name}}' is not in camel case.", { name: node.name });
+    }
+
+    return {
+
+        "Identifier": function(node) {
+
+            // Leading and trailing underscores are commonly used to flag private/protected identifiers, strip them
+            var name = node.name.replace(/^_+|_+$/g, ""),
+                effectiveParent = (node.parent.type === "MemberExpression") ? node.parent.parent : node.parent;
+
+            // MemberExpressions get special rules
+            if (node.parent.type === "MemberExpression") {
+
+                // Always report underscored object names
+                if (node.parent.object.type === "Identifier" &&
+                        node.parent.object.name === node.name &&
+                        isUnderscored(name)) {
+                    report(node);
+
+                // Report AssignmentExpressions only if they are the left side of the assignment
+                } else if (effectiveParent.type === "AssignmentExpression" &&
+                        isUnderscored(name) &&
+                        (effectiveParent.right.type !== "MemberExpression" ||
+                        effectiveParent.left.type === "MemberExpression" &&
+                        effectiveParent.left.property.name === node.name)) {
+                    report(node);
+                }
+
+            // Report anything that is underscored that isn't a CallExpression
+            } else if (isUnderscored(name) && effectiveParent.type !== "CallExpression") {
+                report(node);
+            }
+        }
+    };
+
+};
+
+},{}],16:[function(require,module,exports){
+/**
+ * @fileoverview Comma spacing - validates spacing before and after comma
+ * @author Vignesh Anand aka vegetableman.
+ * @copyright 2014 Vignesh Anand. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+    var options = {
+        before: context.options[0] ? !!context.options[0].before : false,
+        after: context.options[0] ? !!context.options[0].after : true
+    };
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Determines whether two adjacent tokens have whitespace between them.
+     * @param {Object} left - The left token object.
+     * @param {Object} right - The right token object.
+     * @returns {boolean} Whether or not there is space between the tokens.
+     */
+    function isSpaced(left, right) {
+        return left.range[1] < right.range[0];
+    }
+
+    /**
+     * Run report.
+     * @param {ASTNode} node The binary expression node to check.
+     * @param {string} msg The error msg to show.
+     * @private
+     * @returns {void}
+     */
+    function report(node, msg) {
+        context.report(node, msg);
+    }
+
+    /**
+     * Show space required message.
+     * @param {string} dir The location of spacing.
+     * @private
+     * @returns {string} The spacing error msg.
+     */
+    function getSpaceReqMsg(dir) {
+        return "A space is required " + dir + " ','.";
+    }
+
+    /**
+     * Show no space message.
+     * @param {string} dir The location of spacing
+     * @private
+     * @returns {string} The spacing error msg.
+     */
+    function getNoSpaceMsg(dir) {
+        return "There should be no space " + dir + " ','.";
+    }
+
+    /**
+     * Validates the spacing before and after commas.
+     * @param {ASTNode} node The binary expression node to check.
+     * @param {string} property The property of the node.
+     * @private
+     * @returns {void}
+     */
+    function validateCommaSpacing(node, property) {
+        var items = node[property];
+
+        if (items && items.length > 1) {
+            items.forEach(function(item, index) {
+                var tokenBefore = context.getTokenBefore(item),
+                    itemBefore = items[index - 1],
+                    tokenEndLine;
+
+                if (tokenBefore && tokenBefore.value === ",") {
+                    tokenEndLine = tokenBefore.loc.end.line;
+
+                    // single line
+                    if (tokenEndLine === itemBefore.loc.end.line &&
+                        tokenEndLine === item.loc.start.line) {
+                        if (options.before && options.after) {
+                            if (!isSpaced(itemBefore, tokenBefore)) {
+                                report(item, getSpaceReqMsg("before"));
+                            }
+                            if (!isSpaced(tokenBefore, item)) {
+                                report(item, getSpaceReqMsg("after"));
+                            }
+                        } else if (options.before) {
+                            if (!isSpaced(itemBefore, tokenBefore)) {
+                                report(item, getSpaceReqMsg("before"));
+                            }
+                            if (isSpaced(tokenBefore, item)) {
+                                report(item, getNoSpaceMsg("after"));
+                            }
+                        } else if (options.after) {
+                            if (!isSpaced(tokenBefore, item)) {
+                                report(item, getSpaceReqMsg("after"));
+                            }
+                            if (isSpaced(itemBefore, tokenBefore)) {
+                                report(item, getNoSpaceMsg("before"));
+                            }
+                        } else {
+                            if (isSpaced(itemBefore, tokenBefore)) {
+                                report(item, getNoSpaceMsg("before"));
+                            }
+                            if (isSpaced(tokenBefore, item)) {
+                                report(item, getNoSpaceMsg("after"));
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+        "VariableDeclaration": function(node) {
+            validateCommaSpacing(node, "declarations");
+        },
+        "ObjectExpression": function(node) {
+            validateCommaSpacing(node, "properties");
+        },
+        "ArrayExpression": function(node) {
+            validateCommaSpacing(node, "elements");
+        },
+        "SequenceExpression": function(node) {
+            validateCommaSpacing(node, "expressions");
+        },
+        "FunctionExpression": function(node) {
+            validateCommaSpacing(node, "params");
+        },
+        "FunctionDeclaration": function(node) {
+            validateCommaSpacing(node, "params");
+        }
+    };
+
+};
+
+},{}],17:[function(require,module,exports){
+/**
+ * @fileoverview Comma style - enforces comma styles of two types: last and first
+ * @author Vignesh Anand aka vegetableman
+ * @copyright 2014 Vignesh Anand. All rights reserved.
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var style = context.options[0] || "last";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Checks the comma placement with regards to a declaration/property/element
+     * @param {ASTNode} node The binary expression node to check
+     * @private
+     * @returns {void}
+     */
+    function validateComma(node) {
+        var items = node.declarations || node.properties || node.elements;
+
+        if (items.length > 1) {
+            items.forEach(function(item, index) {
+                var tokenBefore = context.getTokenBefore(item),
+                    itemBefore = items[index - 1];
+
+                if (tokenBefore.value === ",") {
+                    // if single line
+                    if (tokenBefore.loc.end.line === item.loc.start.line &&
+                        tokenBefore.loc.end.line === itemBefore.loc.end.line) {
+                        return;
+                    }
+                    // lone comma
+                    else if (tokenBefore.loc.end.line !== item.loc.start.line &&
+                        tokenBefore.loc.end.line !== itemBefore.loc.end.line) {
+                        context.report(item, {
+                            line: tokenBefore.loc.end.line,
+                            column: tokenBefore.loc.start.column
+                        }, "Bad line breaking before and after ','.");
+                    }
+                    else if (style === "first" &&
+                        tokenBefore.loc.start.line !== item.loc.start.line) {
+                        context.report(item, "',' should be placed first.");
+                    }
+                    else if (style === "last" &&
+                        tokenBefore.loc.end.line === item.loc.start.line) {
+                        context.report(item, {
+                            line: itemBefore.loc.end.line,
+                            column: itemBefore.loc.end.column
+                        }, "',' should be placed last.");
+                    }
+                }
+            });
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+        "VariableDeclaration": validateComma,
+        "ObjectExpression": validateComma,
+        "ArrayExpression": validateComma
+    };
+
+};
+
+},{}],18:[function(require,module,exports){
+/**
+ * @fileoverview Counts the cyclomatic complexity of each function of the script. See http://en.wikipedia.org/wiki/Cyclomatic_complexity.
+ * Counts the number of if, conditional, for, whilte, try, switch/case,
+ * @author Patrick Brosset
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var THRESHOLD = context.options[0];
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    // Using a stack to store complexity (handling nested functions)
+    var fns = [];
+
+    // When parsing a new function, store it in our function stack
+    function startFunction() {
+        fns.push(1);
+    }
+
+    function endFunction(node) {
+        var complexity = fns.pop(), name = "anonymous";
+
+        if (node.id) {
+            name = node.id.name;
+        }
+        if (complexity > THRESHOLD) {
+            context.report(node, "Function '{{name}}' has a complexity of {{complexity}}.", { name: name, complexity: complexity });
+        }
+    }
+
+    function increaseComplexity() {
+        if (fns.length) {
+            fns[fns.length - 1] ++;
+        }
+    }
+
+    function increaseSwitchComplexity(node) {
+        // Avoiding `default`
+        if (node.test) {
+            increaseComplexity(node);
+        }
+    }
+
+    function increaseLogicalComplexity(node) {
+        // Avoiding &&
+        if (node.operator === "||") {
+            increaseComplexity(node);
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "FunctionDeclaration": startFunction,
+        "FunctionExpression": startFunction,
+        "FunctionDeclaration:exit": endFunction,
+        "FunctionExpression:exit": endFunction,
+
+        "CatchClause": increaseComplexity,
+        "ConditionalExpression": increaseComplexity,
+        "LogicalExpression": increaseLogicalComplexity,
+        "ForStatement": increaseComplexity,
+        "ForInStatement": increaseComplexity,
+        "IfStatement": increaseComplexity,
+        "SwitchCase": increaseSwitchComplexity,
+        "WhileStatement": increaseComplexity,
+        "DoWhileStatement": increaseComplexity
+    };
+
+};
+
+},{}],19:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag consistent return values
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var functions = [];
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    function enterFunction() {
+        functions.push({});
+    }
+
+    function exitFunction() {
+        functions.pop();
+    }
+
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "FunctionDeclaration": enterFunction,
+        "FunctionExpression": enterFunction,
+        "FunctionDeclaration:exit": exitFunction,
+        "FunctionExpression:exit": exitFunction,
+
+        "ReturnStatement": function(node) {
+
+            var returnInfo = functions[functions.length - 1],
+                returnTypeDefined = "type" in returnInfo;
+
+            if (returnTypeDefined) {
+
+                if (returnInfo.type !== !!node.argument) {
+                    context.report(node, "Expected " + (returnInfo.type ? "a" : "no") + " return value.");
+                }
+
+            } else {
+                returnInfo.type = !!node.argument;
+            }
+
+        }
+    };
+
+};
+
+},{}],20:[function(require,module,exports){
+/**
+ * @fileoverview Rule to enforce consistent naming of "this" context variables
+ * @author Raphael Pigulla
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "VariableDeclaration": function(node) {
+            var alias = context.options[0];
+
+            node.declarations.forEach(function(declaration) {
+                if (declaration.id.name === alias &&
+                        !(declaration.init && declaration.init.type === "ThisExpression")) {
+
+                    context.report(
+                        node,
+                        "Designated 'this' alias '{{alias}}' is not assigned " +
+                            "to the current execution context.",
+                        { alias: declaration.id.name }
+                    );
+                }
+
+                if (declaration.init &&
+                        declaration.init.type === "ThisExpression" &&
+                        declaration.id.name !== alias) {
+
+                    context.report(
+                        node,
+                        "Unexpected alias '{{alias}}' for 'this'.",
+                        { alias: declaration.id.name }
+                    );
+                }
+            });
+        }
+    };
+
+};
+
+},{}],21:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag statements without curly braces
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var multiOnly = (context.options[0] === "multi");
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Checks the body of a node to see if it's a block statement. Depending on
+     * the rule options, reports the appropriate problems.
+     * @param {ASTNode} node The node to report if there's a problem.
+     * @param {ASTNode} body The body node to check for blocks.
+     * @param {string} name The name to report if there's a problem.
+     * @param {string} suffix Additional string to add to the end of a report.
+     * @returns {void}
+     */
+    function checkBody(node, body, name, suffix) {
+        var hasBlock = (body.type === "BlockStatement");
+
+        if (multiOnly) {
+            if (hasBlock && body.body.length === 1) {
+                context.report(node, "Unnecessary { after '{{name}}'{{suffix}}.",
+                    {
+                        name: name,
+                        suffix: (suffix ? " " + suffix : "")
+                    }
+                );
+            }
+        } else {
+            if (!hasBlock) {
+                context.report(node, "Expected { after '{{name}}'{{suffix}}.",
+                    {
+                        name: name,
+                        suffix: (suffix ? " " + suffix : "")
+                    }
+                );
+            }
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "IfStatement": function(node) {
+
+            checkBody(node, node.consequent, "if", "condition");
+
+            if (node.alternate && node.alternate.type !== "IfStatement") {
+                checkBody(node, node.alternate, "else");
+            }
+
+        },
+
+        "WhileStatement": function(node) {
+            checkBody(node, node.body, "while", "condition");
+        },
+
+        "DoWhileStatement": function (node) {
+            checkBody(node, node.body, "do");
+        },
+
+        "ForStatement": function(node) {
+            checkBody(node, node.body, "for", "condition");
+        }
+    };
+
+};
+
+},{}],22:[function(require,module,exports){
+/**
+ * @fileoverview require default case in switch statements
+ * @author Aliaksei Shytkin
+ */
+"use strict";
+
+var COMMENT_VALUE = "no default";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Shortcut to get last element of array
+     * @param  {*[]} collection Array
+     * @returns {*} Last element
+     */
+    function last(collection) {
+        return collection[collection.length - 1];
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "SwitchStatement": function(node) {
+
+            if (!node.cases.length) {
+                // skip check of empty switch because there is no easy way
+                // to extract comments inside it now
+                return;
+            }
+
+            var hasDefault = node.cases.some(function(v) {
+                return v.test === null;
+            });
+
+            if (!hasDefault) {
+
+                var comment;
+                var comments;
+
+                var lastCase = last(node.cases);
+                comments = context.getComments(lastCase).trailing;
+
+                if (comments.length) {
+                    comment = last(comments);
+                }
+
+                if (!comment || comment.value.trim() !== COMMENT_VALUE) {
+                    context.report(node, "Expected a default case.");
+                }
+            }
+        }
+    };
+};
+
+},{}],23:[function(require,module,exports){
+/**
+ * @fileoverview Rule to warn about using dot notation instead of square bracket notation when possible.
+ * @author Josh Perez
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+var validIdentifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+var keywords = [
+    "this",
+    "function",
+    "if",
+    "return",
+    "var",
+    "else",
+    "for",
+    "new",
+    "arguments",
+    "in",
+    "typeof",
+    "while",
+    "case",
+    "break",
+    "try",
+    "catch",
+    "delete",
+    "throw",
+    "switch",
+    "continue",
+    "default",
+    "instanceof",
+    "do",
+    "void",
+    "finally",
+    "with",
+    "debugger",
+    "eval",
+    "implements",
+    "interface",
+    "package",
+    "private",
+    "protected",
+    "public",
+    "static",
+    "yield",
+    "let",
+    "class",
+    "enum",
+    "export",
+    "extends",
+    "import",
+    "super",
+    "true",
+    "false",
+    "null",
+    "abstract",
+    "boolean",
+    "byte",
+    "char",
+    "const",
+    "double",
+    "final",
+    "float",
+    "goto",
+    "int",
+    "long",
+    "native",
+    "short",
+    "synchronized",
+    "throws",
+    "transient",
+    "volatile"
+];
+
+function canBeWrittenInDotNotation(node) {
+    return node.computed === true &&
+        node.property.type === "Literal" &&
+        validIdentifier.test(node.property.value) &&
+        keywords.indexOf("" + node.property.value) === -1;
+}
+
+module.exports = function(context) {
+    return {
+        "MemberExpression": function(node) {
+            if (canBeWrittenInDotNotation(node)) {
+                context.report(node, "['" + node.property.value + "'] is better written in dot notation.");
+            }
+        }
+    };
+};
+
+},{}],24:[function(require,module,exports){
+/**
+ * @fileoverview Require file to end with single newline.
+ * @author Nodeca Team <https://github.com/nodeca>
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "Program": function checkBadEOF(node) {
+            // Get the whole source code, not for node only.
+            var src = context.getSource(), location = {column: 1};
+
+            if (src.length === 0) {
+                return;
+            }
+
+            if (src[src.length - 1] !== "\n") {
+                // file is not newline-terminated
+                location.line = src.split(/\n/g).length;
+                context.report(node, location, "Newline required at end of file but not found.");
+            } else if (/\n\s*\n$/.test(src)) {
+                // last line is empty
+                location.line = src.split(/\n/g).length - 1;
+                context.report(node, location, "Unexpected blank line at end of file.");
+            }
+        }
+
+    };
+
+};
+
+},{}],25:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag statements that use != and == instead of !== and ===
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    /**
+     * Checks if either operand of a binary expression is a typeof operation
+     * @param {ASTNode} node The node to check
+     * @returns {boolean} if one of the operands is typeof
+     * @private
+     */
+    function isTypeOf(node) {
+        return [node.left, node.right].some(function(node) {
+            return node.type === "UnaryExpression" && node.operator === "typeof";
+        });
+    }
+
+    /**
+     * Checks if operands are literals of the same type (via typeof)
+     * @param {ASTNode} node The node to check
+     * @returns {boolean} if operands are of same type
+     * @private
+     */
+    function areLiteralsAndSameType(node) {
+        return node.left.type === "Literal" && node.right.type === "Literal" &&
+                typeof node.left.value === typeof node.right.value;
+    }
+
+    /**
+     * Checks if one of the operands is a literal null
+     * @param {ASTNode} node The node to check
+     * @returns {boolean} if operands are null
+     * @private
+     */
+    function isNullCheck(node) {
+        return (node.right.type === "Literal" && node.right.value === null) ||
+                (node.left.type === "Literal" && node.left.value === null);
+    }
+
+    /**
+     * Gets the location (line and column) of the binary expression's operator
+     * @param {ASTNode} node The binary expression node to check
+     * @param {String} operator The operator to find
+     * @returns {Object} { line, column } location of operator
+     * @private
+     */
+    function getOperatorLocation(node) {
+        var opToken = context.getTokens(node)[context.getTokens(node.left).length];
+        return {line: opToken.loc.start.line, column: opToken.loc.start.column};
+    }
+
+    return {
+        "BinaryExpression": function(node) {
+            if (node.operator !== "==" && node.operator !== "!=") {
+                return;
+            }
+
+            if (context.options[0] === "smart" && (isTypeOf(node) ||
+                    areLiteralsAndSameType(node)) || isNullCheck(node)) {
+                return;
+            }
+
+            if (context.options[0] === "allow-null" && isNullCheck(node)) {
+                return;
+            }
+
+            context.report(
+                node, getOperatorLocation(node),
+                "Expected '{{op}}=' and instead saw '{{op}}'.",
+                {op: node.operator}
+            );
+        }
+    };
+
+};
+
+},{}],26:[function(require,module,exports){
+/**
+ * @fileoverview Rule to warn when a function expression does not have a name.
+ * @author Kyle T. Nunery
+ */
+ "use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+    return {
+        "FunctionExpression": function(node) {
+
+            var name = node.id && node.id.name;
+
+            if (!name) {
+                context.report(node, "Missing function expression name.");
+            }
+        }
+    };
+};
+
+},{}],27:[function(require,module,exports){
+/**
+ * @fileoverview Rule to enforce a particular function style
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var style = context.options[0],
+        enforceDeclarations = (style === "declaration");
+
+    return {
+
+        "FunctionDeclaration": function(node) {
+            if (!enforceDeclarations) {
+                context.report(node, "Expected a function expression.");
+            }
+        },
+
+        "FunctionExpression": function() {
+            var parent = context.getAncestors().pop();
+
+            if (enforceDeclarations && parent.type === "VariableDeclarator") {
+                context.report(parent, "Expected a function declaration.");
+            }
+        }
+    };
+
+};
+
+},{}],28:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag or require global strict mode.
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var mode = context.options[0];
+
+    if (mode === "always") {
+
+        return {
+            "Program": function(node) {
+                if (node.body.length > 0) {
+                    var statement = node.body[0];
+
+                    if (!(statement.type === "ExpressionStatement" && statement.expression.value === "use strict")) {
+                        context.report(node, "Use the global form of \"use strict\".");
+                    }
+                }
+            }
+        };
+
+    } else { // mode = "never"
+
+        return {
+            "ExpressionStatement": function(node) {
+                var parent = context.getAncestors().pop();
+
+                if (node.expression.value === "use strict" && parent.type === "Program") {
+                    context.report(node, "Use the function form of \"use strict\".");
+                }
+            }
+        };
+
+    }
+
+};
+
+},{}],29:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag for-in loops without if statements inside
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "ForInStatement": function(node) {
+
+            /*
+             * If the for-in statement has {}, then the real body is the body
+             * of the BlockStatement. Otherwise, just use body as provided.
+             */
+            var body = node.body.type === "BlockStatement" ? node.body.body[0] : node.body;
+
+            if (body && body.type !== "IfStatement") {
+                context.report(node, "The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype.");
+            }
+        }
+    };
+
+};
+
+},{}],30:[function(require,module,exports){
+/**
+ * @fileoverview Ensure handling of errors when we know they exist.
+ * @author Jamund Ferguson
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var errorArgument = context.options[0] || "err";
+    var callbacks = [];
+    var scopes = 0;
+
+    /**
+     * Checks if the given argument should be interpreted as a regexp pattern.
+     * @param {string} stringToCheck The string which should be checked.
+     * @returns {boolean} Whether or not the string should be interpreted as a pattern.
+     */
+    function isPattern(stringToCheck) {
+        var firstChar = stringToCheck[0];
+        return firstChar === "^";
+    }
+
+    /**
+     * Checks if the given name matches the configured error argument.
+     * @param {string} name The name which should be compared.
+     * @returns {boolean} Whether or not the given name matches the configured error variable name.
+     */
+    function matchesConfiguredErrorName(name) {
+        if (isPattern(errorArgument)) {
+            var regexp = new RegExp(errorArgument);
+            return regexp.test(name);
+        }
+        return name === errorArgument;
+    }
+
+    /**
+     * Check the arguments to see if we need to start tracking the error object.
+     * @param {ASTNode} node The AST node to check.
+     * @returns {void}
+     */
+    function startFunction(node) {
+
+        // keep track of nested scopes
+        scopes++;
+
+        // check if the first argument matches our argument name
+        var firstArg = node.params && node.params[0];
+        if (firstArg && matchesConfiguredErrorName(firstArg.name)) {
+            callbacks.push({handled: false, depth: scopes, errorVariableName: firstArg.name});
+        }
+    }
+
+    /**
+     * At the end of a function check to see if the error was handled.
+     * @param {ASTNode} node The AST node to check.
+     * @returns {void}
+     */
+    function endFunction(node) {
+
+        var callback = callbacks[callbacks.length - 1] || {};
+
+        // check if a callback is ending, if so pop it off the stack
+        if (callback.depth === scopes) {
+            callbacks.pop();
+
+            // check if there were no handled errors since the last callback
+            if (!callback.handled) {
+                context.report(node, "Expected error to be handled.");
+            }
+        }
+
+        // less nested functions
+        scopes--;
+
+    }
+
+    /**
+     * Check to see if we're handling the error object properly.
+     * @param {ASTNode} node The AST node to check.
+     * @returns {void}
+     */
+    function checkForError(node) {
+        if (callbacks.length > 0) {
+            var callback = callbacks[callbacks.length - 1] || {};
+
+            // make sure the node's name matches our error argument name
+            var isAboutError = node.name === callback.errorVariableName;
+
+            // we don't consider these use cases as "handling" the error
+            var doNotCount = ["FunctionDeclaration", "FunctionExpression", "CatchClause"];
+
+            // make sure this identifier isn't used as part of one of them
+            var isHandled = doNotCount.indexOf(node.parent.type) === -1;
+
+            if (isAboutError && isHandled) {
+                // record that this callback handled its error
+                callback.handled = true;
+            }
+        }
+    }
+
+    return {
+        "FunctionDeclaration": startFunction,
+        "FunctionExpression": startFunction,
+        "Identifier": checkForError,
+        "FunctionDeclaration:exit": endFunction,
+        "FunctionExpression:exit": endFunction
+    };
+
+};
+
+},{}],31:[function(require,module,exports){
+/**
+ * @fileoverview Rule to specify spacing of object literal keys and values
+ * @author Brandon Mills
+ * @copyright 2014 Brandon Mills. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+/**
+ * Gets an object literal property's key as the identifier name or string value.
+ * @param {ASTNode} property Property node whose key to retrieve.
+ * @returns {string} The property's key.
+ */
+function getKey(property) {
+    return property.key.name || property.key.value;
+}
+
+/**
+ * Gets the number of characters in a key, including quotes around string keys.
+ * @param {ASTNode} property Property of on object literal.
+ * @returns {int} Width of the key, including string quotes where present.
+ */
+function getKeyWidth(property) {
+    var key = property.key;
+    return (key.type === "Identifier" ? key.name : key.raw).length;
+}
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+var messages = {
+    key: "{{error}} space after key \"{{key}}\".",
+    value: "{{error}} space before value for key \"{{key}}\"."
+};
+
+module.exports = function(context) {
+
+    /**
+     * OPTIONS
+     * "key-spacing": [2, {
+     *     beforeColon: false,
+     *     afterColon: true,
+     *     align: "colon" // Optional, or "value"
+     * }
+     */
+
+    var options = context.options[0] || {},
+        align = options.align,
+        beforeColon = +!!options.beforeColon, // Defaults to false
+        afterColon = +!(options.afterColon === false); // Defaults to true
+
+    /**
+     * Gets the spacing around the colon in an object literal property
+     * @param {ASTNode} property Property node from an object literal
+     * @returns {Object} Spacing before and after the property's colon
+     */
+    function getPropertySpacing(property) {
+        var whitespace = /^(\s*):(\s*)/.exec(context.getSource().slice(
+            property.key.range[1], property.value.range[0]
+        ));
+
+        if (whitespace) {
+            return {
+                beforeColon: whitespace[1].length,
+                afterColon: whitespace[2].length
+            };
+        }
+    }
+
+    /**
+     * Reports an appropriately-formatted error if spacing is incorrect on one
+     * side of the colon.
+     * @param {ASTNode} property Key-value pair in an object literal.
+     * @param {string} side Side being verified - either "key" or "value".
+     * @param {int} diff Difference between actual and expected spacing.
+     * @returns {void}
+     */
+    function report(property, side, diff) {
+        if (diff) {
+            context.report(property[side], messages[side], {
+                error: diff > 0 ? "Extra" : "Missing",
+                key: getKey(property)
+            });
+        }
+    }
+
+    if (align) { // Verify vertical alignment
+
+        return {
+            "ObjectExpression": function(node) {
+                var properties = node.properties,
+                    length = properties.length,
+                    widths = properties.map(getKeyWidth), // Width of keys, including quotes
+                    targetWidth = Math.max.apply(null, widths),
+                    i, property, spacing, width;
+
+                // Conditionally include one space before or after colon
+                targetWidth += (align === "colon" ? beforeColon : afterColon);
+
+                for (i = 0; i < length; i++) {
+                    property = properties[i];
+                    spacing = getPropertySpacing(property);
+
+                    if (!spacing) {
+                        continue; // Object literal getters/setters lack a colon
+                    }
+
+                    width = widths[i];
+
+                    if (align === "value") {
+                        report(property, "key", spacing.beforeColon - beforeColon);
+                        report(property, "value", (width + spacing.afterColon) - targetWidth);
+                    } else { // align = "colon"
+                        report(property, "key", (width + spacing.beforeColon) - targetWidth);
+                        report(property, "value", spacing.afterColon - afterColon);
+                    }
+                }
+            }
+        };
+
+    } else { // Strictly obey beforeColon and afterColon in each property
+
+        return {
+            "Property": function (node) {
+                var spacing = getPropertySpacing(node);
+                if (spacing) { // Object literal getters/setters lack colon spacing
+                    report(node, "key", spacing.beforeColon - beforeColon);
+                    report(node, "value", spacing.afterColon - afterColon);
+                }
+            }
+        };
+
+    }
+
+};
+
+},{}],32:[function(require,module,exports){
+/**
+ * @fileoverview A rule to set the maximum depth block can be nested in a function.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    var functionStack = [],
+        maxDepth = context.options[0] || 4;
+
+    function startFunction() {
+        functionStack.push(0);
+    }
+
+    function endFunction() {
+        functionStack.pop();
+    }
+
+    function pushBlock(node) {
+        var len = ++functionStack[functionStack.length - 1];
+
+        if (len > maxDepth) {
+            context.report(node, "Blocks are nested too deeply ({{depth}}).",
+                    { depth: len });
+        }
+    }
+
+    function popBlock() {
+        functionStack[functionStack.length - 1]--;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "Program": startFunction,
+        "FunctionDeclaration": startFunction,
+        "FunctionExpression": startFunction,
+
+        "IfStatement": pushBlock,
+        "SwitchStatement": pushBlock,
+        "TryStatement": pushBlock,
+        "DoWhileStatement": pushBlock,
+        "WhileStatement": pushBlock,
+        "WithStatement": pushBlock,
+        "ForStatement": pushBlock,
+        "ForInStatement": pushBlock,
+
+        "IfStatement:exit": popBlock,
+        "SwitchStatement:exit": popBlock,
+        "TryStatement:exit": popBlock,
+        "DoWhileStatement:exit": popBlock,
+        "WhileStatement:exit": popBlock,
+        "WithStatement:exit": popBlock,
+        "ForStatement:exit": popBlock,
+        "ForInStatement:exit": popBlock,
+
+        "FunctionDeclaration:exit": endFunction,
+        "FunctionExpression:exit": endFunction,
+        "Program:exit": endFunction
+    };
+
+};
+
+},{}],33:[function(require,module,exports){
+/**
+ * @fileoverview Rule to check for max length on a line.
+ * @author Matt DuVall <http://www.mattduvall.com>
+ * @copyright 2013 Matt DuVall. All rights reserved.
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    /**
+     * Creates a string that is made up of repeating a given string a certain
+     * number of times. This uses exponentiation of squares to achieve significant
+     * performance gains over the more traditional implementation of such
+     * functionality.
+     * @param {string} str The string to repeat.
+     * @param {int} num The number of times to repeat the string.
+     * @returns {string} The created string.
+     * @private
+     */
+    function stringRepeat(str, num) {
+        var result = "";
+        for (num |= 0; num > 0; num >>>= 1, str += str) {
+            if (num & 1) {
+                result += str;
+            }
+        }
+        return result;
+    }
+
+    var tabWidth = context.options[1];
+
+    var maxLength = context.options[0],
+        tabString = stringRepeat(" ", tabWidth);
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+    function checkProgramForMaxLength(node) {
+        var lines = context.getSourceLines();
+
+        // Replace the tabs
+        // Split (honors line-ending)
+        // Iterate
+        lines.forEach(function(line, i) {
+            if (line.replace(/\t/g, tabString).length > maxLength) {
+                context.report(node, { line: i + 1, col: 1 }, "Line " + (i + 1) + " exceeds the maximum line length of " + maxLength + ".");
+            }
+        });
+    }
+
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "Program": checkProgramForMaxLength
+    };
+
+};
+
+},{}],34:[function(require,module,exports){
+/**
+ * @fileoverview Rule to enforce a maximum number of nested callbacks.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Constants
+    //--------------------------------------------------------------------------
+
+    var THRESHOLD = context.options[0];
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    var callbackStack = [];
+
+    return {
+
+        "FunctionExpression": function (node) {
+            var parent = context.getAncestors().pop();
+
+            if (parent.type === "CallExpression") {
+                callbackStack.push(node);
+            }
+
+            if (callbackStack.length > THRESHOLD) {
+                var opts = {num: callbackStack.length, max: THRESHOLD};
+                context.report(node, "Too many nested callbacks ({{num}}). Maximum allowed is {{max}}.", opts);
+            }
+        },
+
+
+        "FunctionExpression:exit": function() {
+            callbackStack.pop();
+        }
+
+    };
+
+};
+
+},{}],35:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when a function has too many parameters
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var numParams = context.options[0] || 3;
+
+    return {
+
+        "FunctionDeclaration": function(node) {
+            if (node.params.length > numParams) {
+                context.report(node, "This function has too many parameters ({{count}}). Maximum allowed is {{max}}.", {
+                    count: node.params.length,
+                    max: numParams
+                });
+            }
+        },
+
+        "FunctionExpression": function(node) {
+            if (node.params.length > numParams) {
+                context.report(node, "This function has too many parameters ({{count}}). Maximum allowed is {{max}}.", {
+                    count: node.params.length,
+                    max: numParams
+                });
+            }
+        }
+    };
+
+};
+
+},{}],36:[function(require,module,exports){
+/**
+ * @fileoverview A rule to set the maximum number of statements in a function.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    var functionStack = [],
+        maxStatements = context.options[0] || 10;
+
+    function startFunction() {
+        functionStack.push(0);
+    }
+
+    function endFunction(node) {
+        var count = functionStack.pop();
+
+        if (count > maxStatements) {
+            context.report(node, "This function has too many statements ({{count}}). Maximum allowed is {{max}}.",
+                    { count: count, max: maxStatements });
+        }
+    }
+
+    function countStatements(node) {
+        functionStack[functionStack.length - 1] += node.body.length;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "FunctionDeclaration": startFunction,
+        "FunctionExpression": startFunction,
+
+        "BlockStatement": countStatements,
+
+        "FunctionDeclaration:exit": endFunction,
+        "FunctionExpression:exit": endFunction
+    };
+
+};
+
+},{}],37:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of constructors without capital letters
+ * @author Nicholas C. Zakas
+ * @copyright 2013-2014 Nicholas C. Zakas. All rights reserved.
+ */
+
+"use strict";
+
+var CAPS_ALLOWED = [
+    "Number",
+    "String",
+    "Boolean",
+    "Date",
+    "Array",
+    "Symbol",
+    "RegExp"
+];
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var config = context.options[0] || {};
+    config.newIsCap = config.newIsCap === false ? false : true;
+    config.capIsNew = config.capIsNew === false ? false : true;
+
+    var listeners = {};
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Get exact callee name from expression
+     * @param {ASTNode} node CallExpression or NewExpression node
+     * @returns {String} name
+     */
+    function extractNameFromExpression(node) {
+
+        var name = "",
+            property;
+
+        if (node.callee.type === "MemberExpression") {
+            property = node.callee.property;
+
+            if (property.type === "Literal" && (typeof property.value === "string")) {
+                name = property.value;
+            } else if (property.type === "Identifier" && !node.callee.computed) {
+                name = property.name;
+            }
+        } else {
+            name = node.callee.name;
+        }
+        return name;
+    }
+
+    /**
+     * Returns the capitalization state of the string -
+     * Whether the first character is uppercase, lowercase, or non-alphabetic
+     * @param {String} str String
+     * @returns {String} capitalization state: "non-alpha", "lower", or "upper"
+     */
+    function getCap(str) {
+        var firstChar = str.charAt(0);
+
+        var firstCharLower = firstChar.toLowerCase();
+        var firstCharUpper = firstChar.toUpperCase();
+
+        if (firstCharLower === firstCharUpper) {
+            // char has no uppercase variant, so it's non-alphabetic
+            return "non-alpha";
+        } else if (firstChar === firstCharLower) {
+            return "lower";
+        } else {
+            return "upper";
+        }
+    }
+
+    /**
+     * Check if capitalization is allowed for a CallExpression
+     * @param {ASTNode} node CallExpression node
+     * @param {String} calleeName Capitalized callee name from a CallExpression
+     * @returns {Boolean} Returns true if the callee may be capitalized
+     */
+    function isCapAllowed(node, calleeName) {
+        if (CAPS_ALLOWED.indexOf(calleeName) >= 0) {
+            return true;
+        }
+        if (calleeName === "UTC" && node.callee.type === "MemberExpression") {
+            // allow if callee is Date.UTC
+            return node.callee.object.type === "Identifier" &&
+                   node.callee.object.name === "Date";
+        }
+        return false;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    if (config.newIsCap) {
+        listeners.NewExpression = function(node) {
+
+            var constructorName = extractNameFromExpression(node);
+            if (constructorName && getCap(constructorName) === "lower") {
+                context.report(node, "A constructor name should not start with a lowercase letter.");
+            }
+        };
+    }
+
+    if (config.capIsNew) {
+        listeners.CallExpression = function(node) {
+
+            var calleeName = extractNameFromExpression(node);
+            if (calleeName && getCap(calleeName) === "upper" && !isCapAllowed(node, calleeName)) {
+                context.report(node, "A function with a name starting with an uppercase letter should only be used as a constructor.");
+            }
+        };
+    }
+
+    return listeners;
+};
+
+},{}],38:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when using constructor without parentheses
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "NewExpression": function(node) {
+            var tokens = context.getTokens(node);
+            var prenticesTokens = tokens.filter(function(token) {
+                return token.value === "(" || token.value === ")";
+            });
+            if (prenticesTokens.length < 2) {
+                context.report(node, "Missing '()' invoking a constructor");
+            }
+        }
+    };
+
+};
+
+},{}],39:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of alert, confirm, prompt
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+function matchProhibited(name) {
+    return name.match(/^(alert|confirm|prompt)$/);
+}
+
+function report(context, node, result) {
+    context.report(node, "Unexpected {{name}}.", { name: result[1] });
+}
+
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "CallExpression": function(node) {
+
+            var result;
+
+            // without window.
+            if (node.callee.type === "Identifier") {
+
+                result = matchProhibited(node.callee.name);
+
+                if (result) {
+                    report(context, node, result);
+                }
+
+            } else if (node.callee.type === "MemberExpression" && node.callee.property.type === "Identifier") {
+
+                result = matchProhibited(node.callee.property.name);
+
+                if (result && node.callee.object.name === "window") {
+                    report(context, node, result);
+                }
+
+            }
+
+        }
+    };
+
+};
+
+},{}],40:[function(require,module,exports){
+/**
+ * @fileoverview Disallow construction of dense arrays using the Array constructor
+ * @author Matt DuVall <http://www.mattduvall.com/>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    function check(node) {
+        if (
+            node.arguments.length !== 1 &&
+            node.callee.type === "Identifier" &&
+            node.callee.name === "Array"
+        ) {
+            context.report(node, "The array literal notation [] is preferrable.");
+        }
+    }
+
+    return {
+        "CallExpression": check,
+        "NewExpression": check
+    };
+
+};
+
+},{}],41:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag bitwise identifiers
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    function report(node) {
+        context.report(node, "Unexpected use of '{{operator}}'.", { operator: node.operator });
+    }
+
+    return {
+        "BinaryExpression": function(node) {
+
+            // warn for ^ | & ~ << >> >>>
+            if (node.operator.match(/^(?:[\^&\|~]|<<|>>>?)$/)) {
+                report(node);
+            }
+
+        },
+
+        "UnaryExpression": function(node) {
+
+            // warn for ~
+            if (node.operator === "~") {
+                report(node);
+            }
+
+        }
+    };
+
+};
+
+},{}],42:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of arguments.callee and arguments.caller.
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "MemberExpression": function(node) {
+            var objectName = node.object.name,
+                propertyName = node.property.name;
+
+            if (objectName === "arguments" && !node.computed && propertyName && propertyName.match(/^calle[er]$/)) {
+                context.report(node, "Avoid arguments.{{property}}.", { property: propertyName });
+            }
+
+        }
+    };
+
+};
+
+},{}],43:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag variable leak in CatchClauses in IE 8 and earlier
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    function paramIsShadowing(scope, name) {
+        var found = scope.variables.some(function(variable) {
+            return variable.name === name;
+        });
+
+        if (found) {
+            return true;
+        }
+
+        if (scope.upper) {
+            return paramIsShadowing(scope.upper, name);
+        }
+
+        return false;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "CatchClause": function(node) {
+            var scope = context.getScope();
+
+            if (paramIsShadowing(scope, node.param.name)) {
+                context.report(node, "Value of '{{name}}' may be overwritten in IE 8 and earlier.",
+                        { name: node.param.name });
+            }
+        }
+    };
+
+};
+
+},{}],44:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag trailing commas in object literals.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+     //-------------------------------------------------------------------------
+     // Helpers
+     //-------------------------------------------------------------------------
+
+    function checkForTrailingComma(node) {
+        var secondToLastToken = context.getLastTokens(node, 2)[0];
+
+        var items = node.properties || node.elements,
+            lastItem = items[items.length - 1];
+        // The last token in an object/array literal will always be a closing
+        // curly, so we check the second to last token for a comma.
+        if (secondToLastToken.value === "," && items.length && lastItem) {
+            context.report(lastItem, secondToLastToken.loc.start, "Trailing comma.");
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "ObjectExpression": checkForTrailingComma,
+        "ArrayExpression": checkForTrailingComma
+    };
+
+};
+
+},{}],45:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag assignment in a conditional expression
+ * @author Stephen Murray <spmurrayzzz>
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    function isParenthesised(node) {
+        var previousToken = context.getTokenBefore(node),
+            nextToken = context.getTokenAfter(node);
+
+        return previousToken.value === "(" && previousToken.range[1] <= node.range[0] &&
+            nextToken.value === ")" && nextToken.range[0] >= node.range[1];
+    }
+
+    function isParenthesisedTwice(node) {
+        var previousToken = context.getTokenBefore(node, 1),
+            nextToken = context.getTokenAfter(node, 1);
+
+        return isParenthesised(node) &&
+            previousToken.value === "(" && previousToken.range[1] <= node.range[0] &&
+            nextToken.value === ")" && nextToken.range[0] >= node.range[1];
+    }
+
+    function testForAssign(node) {
+        if (node.test && (node.test.type === "AssignmentExpression") && !isParenthesisedTwice(node.test)) {
+            context.report(node, "Expected a conditional expression and instead saw an assignment.");
+        }
+    }
+
+    return {
+        "IfStatement": testForAssign,
+        "WhileStatement": testForAssign,
+        "DoWhileStatement": testForAssign,
+        "ForStatement": testForAssign
+    };
+
+};
+
+},{}],46:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of console object
+ * @author Nicholas C. Zakas
+ */
+
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "MemberExpression": function(node) {
+
+            if (node.object.name === "console") {
+                context.report(node, "Unexpected console statement.");
+            }
+
+        }
+    };
+
+};
+
+},{}],47:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use constant conditions
+ * @author Christian Schulz <http://rndm.de>
+ */
+
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Checks if a node has a constant truthiness value.
+     * @param {ASTNode} node The AST node to check.
+     * @returns {Bool} true when node's truthiness is constant
+     * @private
+     */
+    function isConstant(node) {
+        switch (node.type) {
+        case "Literal":
+        case "FunctionExpression":
+        case "ObjectExpression":
+        case "ArrayExpression":
+            return true;
+        case "UnaryExpression":
+            return isConstant(node.argument);
+        case "BinaryExpression":
+        case "LogicalExpression":
+            return isConstant(node.left) && isConstant(node.right);
+        case "AssignmentExpression":
+            return isConstant(node.right);
+        case "SequenceExpression":
+            return isConstant(node.expressions[node.expressions.length - 1]);
+        // no default
+        }
+        return false;
+    }
+
+    /**
+     * Reports when the given node contains a constant condition.
+     * @param {ASTNode} node The AST node to check.
+     * @returns {void}
+     * @private
+     */
+    function checkConstantCondition(node) {
+        if (node.test && isConstant(node.test)) {
+            context.report(node, "Unexpected constant condition.");
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+        "ConditionalExpression": checkConstantCondition,
+        "IfStatement": checkConstantCondition,
+        "WhileStatement": checkConstantCondition,
+        "DoWhileStatement": checkConstantCondition,
+        "ForStatement": checkConstantCondition
+    };
+
+};
+
+},{}],48:[function(require,module,exports){
+/**
+ * @fileoverview Rule to forbid control charactes from regular expressions.
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+
+    function getRegExp(node) {
+
+        if (node.value instanceof RegExp) {
+            return node.value;
+        } else if (typeof node.value === "string") {
+
+            var parent = context.getAncestors().pop();
+            if ((parent.type === "NewExpression" || parent.type === "CallExpression") &&
+            parent.callee.type === "Identifier" && parent.callee.name === "RegExp") {
+
+                // there could be an invalid regular expression string
+                try {
+                    return new RegExp(node.value);
+                } catch (ex) {
+                    return null;
+                }
+
+            }
+        } else {
+            return null;
+        }
+
+    }
+
+
+
+    return {
+
+        "Literal": function(node) {
+
+            var computedValue,
+                regex = getRegExp(node);
+
+            if (regex) {
+                computedValue = regex.toString();
+                if (/[\x00-\x1f]/.test(computedValue)) {
+                    context.report(node, "Unexpected control character in regular expression.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],49:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of a debugger statement
+ * @author Nicholas C. Zakas
+ */
+
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "DebuggerStatement": function(node) {
+            context.report(node, "Unexpected 'debugger' statement.");
+        }
+    };
+
+};
+
+},{}],50:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when deleting variables
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "UnaryExpression": function(node) {
+            if (node.operator === "delete" && node.argument.type === "Identifier") {
+                context.report(node, "Variables should not be deleted.");
+            }
+        }
+    };
+
+};
+
+},{}],51:[function(require,module,exports){
+/**
+ * @fileoverview Rule to check for ambiguous div operator in regexes
+ * @author Matt DuVall <http://www.mattduvall.com>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "Literal": function(node) {
+            var token = context.getFirstTokens(node, 1)[0],
+                nodeType = token.type,
+                source;
+
+            if (nodeType === "RegularExpression") {
+                source = context.getFirstTokens(node, 1)[0].value;
+
+                if (source[1] === "=") {
+                    context.report(node, "A regular expression literal can be confused with '/='.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],52:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of duplicate keys in an object.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "ObjectExpression": function(node) {
+
+            // Object that will be a map of properties--safe because we will
+            // prefix all of the keys.
+            var nodeProps = {};
+
+            node.properties.forEach(function(property) {
+                var keyName = property.key.name || property.key.value;
+                var key = property.kind + "-" + keyName;
+
+                if (nodeProps[key]) {
+                    context.report(node, "Duplicate key '{{key}}'.", { key: keyName });
+                } else {
+                    nodeProps[key] = true;
+                }
+            });
+
+        }
+    };
+
+};
+
+},{}],53:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag `else` after a `return` in `if`
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    function checkForReturnStatement(node, alternate) {
+        if (node.type === "ReturnStatement") {
+            context.report(alternate, "Unexpected 'else' after 'return'.");
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "IfStatement": function(node) {
+
+            // Don't bother finding a ReturnStatement, if there's no `else`
+            // or if the alternate is also an if (indicating an else if).
+            if (node.alternate && node.consequent && node.alternate.type !== "IfStatement") {
+
+                // If we have a BlockStatement, check each consequent body node.
+                if (node.consequent.type === "BlockStatement") {
+                    node.consequent.body.forEach(function (bodyNode) {
+                        checkForReturnStatement(bodyNode, node.alternate);
+                    });
+
+                // If not a block statement, make sure the consequent isn't a
+                // ReturnStatement
+                } else {
+                    checkForReturnStatement(node.consequent, node.alternate);
+                }
+            }
+        }
+
+    };
+
+};
+
+},{}],54:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag the use of empty character classes in regular expressions
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "Literal": function(node) {
+            var tokens = context.getTokens(node);
+            tokens.forEach(function (token) {
+                /*
+                plain-English description of the following regexp:
+                0. `^` fix the match at the beginning of the string
+                1. `\/`: the `/` that begins the regexp
+                2. `([^\\[]|\\.|\[([^\\\]]|\\.)+\])*`: regexp contents; 0 or more of the following
+                  2.0. `[^\\[]`: any character that's not a `\` or a `[` (anything but escape sequences and character classes)
+                  2.1. `\\.`: an escape sequence
+                  2.2. `\[([^\\\]]|\\.)+\]`: a character class that isn't empty
+                3. `\/` the `/` that ends the regexp
+                4. `[gimy]*`: optional regexp flags
+                5. `$`: fix the match at the end of the string
+                */
+                if (token.type === "RegularExpression" &&
+                !/^\/([^\\[]|\\.|\[([^\\\]]|\\.)+\])*\/[gimy]*$/.test(token.value)) {
+                    context.report(node, "Empty class.");
+                }
+            });
+        }
+
+    };
+
+};
+
+},{}],55:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when label is not used for a loop or switch
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "LabeledStatement": function(node) {
+            if (node.body.type !== "ForStatement" && node.body.type !== "WhileStatement" && node.body.type !== "DoWhileStatement" && node.body.type !== "SwitchStatement" && node.body.type !== "ForInStatement") {
+                context.report(node, "Unexpected label {{l}}", {l: node.label.name});
+            }
+        }
+    };
+
+};
+
+},{}],56:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of an empty block statement
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "BlockStatement": function(node) {
+            var ancestors = context.getAncestors(),
+                parent = ancestors[ancestors.length - 1],
+                parentType = parent.type,
+                isFinallyBlock = (parentType === "TryStatement") && (parent.finalizer === node);
+
+            if (/FunctionExpression|FunctionDeclaration|CatchClause/.test(parentType) ||
+                    (isFinallyBlock && !parent.handlers.length)) {
+                return;
+            }
+
+            if (node.body.length === 0) {
+                context.report(node, "Empty block statement.");
+            }
+        },
+
+        "SwitchStatement": function(node) {
+
+            if (typeof node.cases === "undefined" || node.cases.length === 0) {
+                context.report(node, "Empty switch statement.");
+            }
+        }
+    };
+
+};
+
+},{}],57:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag comparisons to null without a type-checking
+ * operator.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+    "use strict";
+
+    return {
+
+        "BinaryExpression": function(node) {
+            var badOperator = node.operator === "==" || node.operator === "!=";
+
+            if (node.right.type === "Literal" && node.right.raw === "null" && badOperator ||
+                    node.left.type === "Literal" && node.left.raw === "null" && badOperator) {
+                context.report(node, "Use ‘===’ to compare with ‘null’.");
+            }
+        }
+    };
+
+};
+
+},{}],58:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of eval() statement
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var IMPLIED_EVAL = /set(?:Timeout|Interval)/;
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Determines if a node represents a call to setTimeout/setInterval with
+     * a string argument.
+     * @param {ASTNode} node The node to check.
+     * @returns {boolean} True if the node matches, false if not.
+     * @private
+     */
+    function isImpliedEval(node) {
+
+        var isMemberExpression = (node.callee.type === "MemberExpression"),
+            isIdentifier = (node.callee.type === "Identifier"),
+            isSetMethod = (isIdentifier && IMPLIED_EVAL.test(node.callee.name)) ||
+                (isMemberExpression && node.callee.object.name === "window" &&
+                IMPLIED_EVAL.test(node.callee.property.name)),
+            hasStringArgument = node.arguments.length && (typeof node.arguments[0].value === "string");
+
+        return isSetMethod && hasStringArgument;
+    }
+
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+        "CallExpression": function(node) {
+            if (node.callee.name === "eval") {
+                context.report(node, "eval can be harmful.");
+            } else if (isImpliedEval(node)) {
+                if (node.arguments.length && (typeof node.arguments[0].value === "string")) {
+                    context.report(node, "Implied eval can be harmful. Pass a function instead of a string.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],59:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag assignment of the exception parameter
+ * @author Stephen Murray <spmurrayzzz>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var inCatch = false,
+        exceptionName = null;
+
+    return {
+
+        "CatchClause": function(node) {
+            inCatch = true;
+            exceptionName = node.param.name;
+        },
+
+        "CatchClause:exit": function() {
+            inCatch = false;
+            exceptionName = null;
+        },
+
+        "AssignmentExpression": function(node) {
+
+            if (inCatch) {
+
+                if (node.left.name === exceptionName) {
+                    context.report(node, "Do not assign to the exception parameter.");
+                }
+            }
+        }
+
+    };
+
+};
+
+},{}],60:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag adding properties to native object's prototypes.
+ * @author David Nelson
+ */
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var BUILTINS = [
+    "Object", "Function", "Array", "String", "Boolean", "Number", "Date",
+    "RegExp", "Error", "EvalError", "RangeError", "ReferenceError",
+    "SyntaxError", "TypeError", "URIError"
+];
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        // handle the Array.prototype.extra style case
+        "AssignmentExpression": function(node) {
+            var lhs = node.left, affectsProto;
+
+            if (lhs.type !== "MemberExpression" || lhs.object.type !== "MemberExpression") {
+                return;
+            }
+
+            affectsProto = lhs.object.computed ?
+                lhs.object.property.type === "Literal" && lhs.object.property.value === "prototype" :
+                lhs.object.property.name === "prototype";
+
+            if (!affectsProto) {
+                return;
+            }
+
+            BUILTINS.forEach(function(builtin) {
+                if (lhs.object.object.name === builtin) {
+                    context.report(node, builtin + " prototype is read only, properties should not be added.");
+                }
+            });
+        },
+
+        // handle the Object.defineProperty(Array.prototype) case
+        "CallExpression": function(node) {
+
+            var callee = node.callee,
+                subject,
+                object;
+
+            // only worry about Object.defineProperty
+            if (callee.type === "MemberExpression" &&
+                callee.object.name === "Object" &&
+                callee.property.name === "defineProperty") {
+
+                // verify the object being added to is a native prototype
+                subject = node.arguments[0];
+                object = subject.object;
+
+                if (object &&
+                    object.type === "Identifier" &&
+                    (BUILTINS.indexOf(object.name) > -1) &&
+                    subject.property.name === "prototype") {
+
+                    context.report(node, object.name + " prototype is read only, properties should not be added.");
+                }
+            }
+
+        }
+    };
+
+};
+
+},{}],61:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag unnecessary bind calls
+ * @author Bence Dányi <bence@danyi.me>
+ * @copyright 2014 Bence Dányi. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var scope = [{
+        depth: -1,
+        found: 0
+    }];
+
+    /**
+     * Get the topmost scope
+     * @returns {Object} The topmost scope
+     */
+    function getTopScope() {
+        return scope[scope.length - 1];
+    }
+
+    /**
+     * Increment the depth of the top scope
+     * @returns {void}
+     */
+    function incrementScopeDepth() {
+        var top = getTopScope();
+        top.depth++;
+    }
+
+    /**
+     * Decrement the depth of the top scope
+     * @returns {void}
+     */
+    function decrementScopeDepth() {
+        var top = getTopScope();
+        top.depth--;
+    }
+
+    return {
+        "CallExpression": function(node) {
+            if (node.arguments.length === 1 &&
+                node.callee.type === "MemberExpression" &&
+                node.callee.property.name === "bind" &&
+                node.callee.object.type === "FunctionExpression") {
+                scope.push({
+                    call: node,
+                    depth: -1,
+                    found: 0
+                });
+            }
+        },
+        "CallExpression:exit": function(node) {
+            var top = getTopScope();
+            if (top.call === node && top.found === 0) {
+                context.report(node, "The function binding is unnecessary.");
+                scope.pop();
+            }
+        },
+        "FunctionExpression": incrementScopeDepth,
+        "FunctionExpression:exit": decrementScopeDepth,
+        "FunctionDeclaration": incrementScopeDepth,
+        "FunctionDeclaration:exit": decrementScopeDepth,
+        "ThisExpression": function() {
+            var top = getTopScope();
+            if (top.depth === 0) {
+                top.found++;
+            }
+        }
+    };
+
+};
+
+},{}],62:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag unnecessary double negation in Boolean contexts
+ * @author Brandon Mills
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "UnaryExpression": function (node) {
+            var ancestors = context.getAncestors(),
+                parent = ancestors.pop(),
+                grandparent = ancestors.pop();
+
+            // Exit early if it's guaranteed not to match
+            if (node.operator !== "!" ||
+                    parent.type !== "UnaryExpression" ||
+                    parent.operator !== "!") {
+                return;
+            }
+
+            // if (<bool>) ...
+            if (grandparent.type === "IfStatement") {
+                context.report(node, "Redundant double negation in an if statement condition.");
+
+            // do ... while (<bool>)
+            } else if (grandparent.type === "DoWhileStatement") {
+                context.report(node, "Redundant double negation in a do while loop condition.");
+
+            // while (<bool>) ...
+            } else if (grandparent.type === "WhileStatement") {
+                context.report(node, "Redundant double negation in a while loop condition.");
+
+            // <bool> ? ... : ...
+            } else if ((grandparent.type === "ConditionalExpression" &&
+                    parent === grandparent.test)) {
+                context.report(node, "Redundant double negation in a ternary condition.");
+
+            // for (...; <bool>; ...) ...
+            } else if ((grandparent.type === "ForStatement" &&
+                    parent === grandparent.test)) {
+                context.report(node, "Redundant double negation in a for loop condition.");
+
+            // !<bool>
+            } else if ((grandparent.type === "UnaryExpression" &&
+                    grandparent.operator === "!")) {
+                context.report(node, "Redundant multiple negation.");
+
+            // Boolean(<bool>)
+            } else if ((grandparent.type === "CallExpression" &&
+                    grandparent.callee.type === "Identifier" &&
+                    grandparent.callee.name === "Boolean")) {
+                context.report(node, "Redundant double negation in call to Boolean().");
+
+            // new Boolean(<bool>)
+            } else if ((grandparent.type === "NewExpression" &&
+                    grandparent.callee.type === "Identifier" &&
+                    grandparent.callee.name === "Boolean")) {
+                context.report(node, "Redundant double negation in Boolean constructor call.");
+            }
+        }
+    };
+
+};
+
+},{}],63:[function(require,module,exports){
+/**
+ * @fileoverview Disallow parenthesesisng higher precedence subexpressions.
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    function isParenthesised(node) {
+        var previousToken = context.getTokenBefore(node),
+            nextToken = context.getTokenAfter(node);
+
+        return previousToken && nextToken &&
+            previousToken.value === "(" && previousToken.range[1] <= node.range[0] &&
+            nextToken.value === ")" && nextToken.range[0] >= node.range[1];
+    }
+
+    function isParenthesisedTwice(node) {
+        var previousToken = context.getTokenBefore(node, 1),
+            nextToken = context.getTokenAfter(node, 1);
+
+        return isParenthesised(node) && previousToken && nextToken &&
+            previousToken.value === "(" && previousToken.range[1] <= node.range[0] &&
+            nextToken.value === ")" && nextToken.range[0] >= node.range[1];
+    }
+
+    function precedence(node) {
+
+        switch (node.type) {
+            case "SequenceExpression":
+                return 0;
+
+            case "AssignmentExpression":
+                return 1;
+
+            case "ConditionalExpression":
+                return 3;
+
+            case "LogicalExpression":
+                switch (node.operator) {
+                    case "||":
+                        return 4;
+                    case "&&":
+                        return 5;
+                    // no default
+                }
+
+                /* falls through */
+            case "BinaryExpression":
+                switch (node.operator) {
+                    case "|":
+                        return 6;
+                    case "^":
+                        return 7;
+                    case "&":
+                        return 8;
+                    case "==":
+                    case "!=":
+                    case "===":
+                    case "!==":
+                        return 9;
+                    case "<":
+                    case "<=":
+                    case ">":
+                    case ">=":
+                    case "in":
+                    case "instanceof":
+                        return 10;
+                    case "<<":
+                    case ">>":
+                    case ">>>":
+                        return 11;
+                    case "+":
+                    case "-":
+                        return 12;
+                    case "*":
+                    case "/":
+                    case "%":
+                        return 13;
+                    // no default
+                }
+                /* falls through */
+            case "UnaryExpression":
+                return 14;
+            case "UpdateExpression":
+                return 15;
+            case "CallExpression":
+                // IIFE is allowed to have parens in any position (#655)
+                if (node.callee.type === "FunctionExpression") {
+                    return -1;
+                }
+                return 16;
+            case "NewExpression":
+                return 17;
+            // no default
+        }
+        return 18;
+    }
+
+    function report(node) {
+        context.report(node, "Gratuitous parentheses around expression.");
+    }
+
+    function dryUnaryUpdate(node) {
+        if (isParenthesised(node.argument) && precedence(node.argument) >= precedence(node)) {
+            report(node.argument);
+        }
+    }
+
+    function dryCallNew(node) {
+        if (isParenthesised(node.callee) && precedence(node.callee) >= precedence(node) &&
+        !(node.type === "CallExpression" && node.callee.type === "FunctionExpression")) {
+            report(node.callee);
+        }
+        if (node.arguments.length === 1) {
+            if (isParenthesisedTwice(node.arguments[0]) && precedence(node.arguments[0]) >= precedence({type: "AssignmentExpression"})) {
+                report(node.arguments[0]);
+            }
+        } else {
+            [].forEach.call(node.arguments, function(arg) {
+                if (isParenthesised(arg) && precedence(arg) >= precedence({type: "AssignmentExpression"})) {
+                    report(arg);
+                }
+            });
+        }
+    }
+
+    function dryBinaryLogical(node) {
+        var prec = precedence(node);
+        if (isParenthesised(node.left) && precedence(node.left) >= prec) {
+            report(node.left);
+        }
+        if (isParenthesised(node.right) && precedence(node.right) > prec) {
+            report(node.right);
+        }
+    }
+
+    return {
+        "ArrayExpression": function(node) {
+            [].forEach.call(node.elements, function(e) {
+                if (e && isParenthesised(e) && precedence(e) >= precedence({type: "AssignmentExpression"})) {
+                    report(e);
+                }
+            });
+        },
+        "AssignmentExpression": function(node) {
+            if (isParenthesised(node.right) && precedence(node.right) >= precedence(node)) {
+                report(node.right);
+            }
+        },
+        "BinaryExpression": dryBinaryLogical,
+        "CallExpression": dryCallNew,
+        "ConditionalExpression": function(node) {
+            if (isParenthesised(node.test) && precedence(node.test) >= precedence({type: "LogicalExpression", operator: "||"})) {
+                report(node.test);
+            }
+            if (isParenthesised(node.consequent) && precedence(node.consequent) >= precedence({type: "AssignmentExpression"})) {
+                report(node.consequent);
+            }
+            if (isParenthesised(node.alternate) && precedence(node.alternate) >= precedence({type: "AssignmentExpression"})) {
+                report(node.alternate);
+            }
+        },
+        "DoWhileStatement": function(node) {
+            if (isParenthesisedTwice(node.test)) {
+                report(node.test);
+            }
+        },
+        "ExpressionStatement": function(node) {
+            var firstToken;
+            if (isParenthesised(node.expression)) {
+                firstToken = context.getFirstToken(node.expression);
+                if (firstToken.value !== "function" && firstToken.value !== "{") {
+                    report(node.expression);
+                }
+            }
+        },
+        "ForInStatement": function(node) {
+            if (isParenthesised(node.right)) {
+                report(node.right);
+            }
+        },
+        "ForStatement": function(node) {
+            if (node.init && isParenthesised(node.init)) {
+                report(node.init);
+            }
+
+            if (node.test && isParenthesised(node.test)) {
+                report(node.test);
+            }
+
+            if (node.update && isParenthesised(node.update)) {
+                report(node.update);
+            }
+        },
+        "IfStatement": function(node) {
+            if (isParenthesisedTwice(node.test)) {
+                report(node.test);
+            }
+        },
+        "LogicalExpression": dryBinaryLogical,
+        "MemberExpression": function(node) {
+            if (
+                isParenthesised(node.object) &&
+                precedence(node.object) >= precedence(node) &&
+                (
+                    node.computed ||
+                    !(
+                        node.object.type === "Literal" &&
+                        typeof node.object.value === "number" &&
+                        /^[0-9]+$/.test(context.getFirstToken(node.object).value)
+                    )
+                )
+            ) {
+                report(node.object);
+            }
+        },
+        "NewExpression": dryCallNew,
+        "ObjectExpression": function(node) {
+            [].forEach.call(node.properties, function(e) {
+                var v = e.value;
+                if (v && isParenthesised(v) && precedence(v) >= precedence({type: "AssignmentExpression"})) {
+                    report(v);
+                }
+            });
+        },
+        "ReturnStatement": function(node) {
+            if (node.argument && isParenthesised(node.argument)) {
+                report(node.argument);
+            }
+        },
+        "SequenceExpression": function(node) {
+            [].forEach.call(node.expressions, function(e) {
+                if (isParenthesised(e) && precedence(e) >= precedence(node)) {
+                    report(e);
+                }
+            });
+        },
+        "SwitchCase": function(node) {
+            if (node.test && isParenthesised(node.test)) {
+                report(node.test);
+            }
+        },
+        "SwitchStatement": function(node) {
+            if (isParenthesisedTwice(node.discriminant)) {
+                report(node.discriminant);
+            }
+        },
+        "ThrowStatement": function(node) {
+            if (isParenthesised(node.argument)) {
+                report(node.argument);
+            }
+        },
+        "UnaryExpression": dryUnaryUpdate,
+        "UpdateExpression": dryUnaryUpdate,
+        "VariableDeclarator": function(node) {
+            if (node.init && isParenthesised(node.init) && precedence(node.init) >= precedence({type: "AssignmentExpression"})) {
+                report(node.init);
+            }
+        },
+        "WhileStatement": function(node) {
+            if (isParenthesisedTwice(node.test)) {
+                report(node.test);
+            }
+        },
+        "WithStatement": function(node) {
+            if (isParenthesisedTwice(node.object)) {
+                report(node.object);
+            }
+        }
+    };
+
+};
+
+},{}],64:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of unnecessary semicolons
+ * @author Nicholas C. Zakas
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "EmptyStatement": function(node) {
+            context.report(node, "Unnecessary semicolon.");
+        }
+    };
+
+};
+
+},{}],65:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag unnecessary strict directives.
+ * @author Ian Christian Myers
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    function directives(block) {
+        var ds = [], body = block.body, e, i, l;
+
+        for (i = 0, l = body.length; i < l; ++i) {
+            e = body[i];
+
+            if (
+                e.type === "ExpressionStatement" &&
+                e.expression.type === "Literal" &&
+                typeof e.expression.value === "string"
+            ) {
+                ds.push(e.expression);
+            } else {
+                break;
+            }
+        }
+        return ds;
+    }
+
+    function isStrict(directive) {
+        return directive.value === "use strict";
+    }
+
+    function checkForUnnecessaryUseStrict(node) {
+        var useStrictDirectives, scope, upper;
+        useStrictDirectives = directives(node).filter(isStrict);
+
+        switch (useStrictDirectives.length) {
+            case 0:
+                break;
+
+            case 1:
+                scope = context.getScope();
+                upper = scope.upper;
+
+                if (upper && upper.functionExpressionScope) {
+                    upper = upper.upper;
+                }
+
+                if (upper && upper.isStrict) {
+                    context.report(useStrictDirectives[0], "Unnecessary 'use strict'.");
+                }
+                break;
+
+            default:
+                context.report(useStrictDirectives[1], "Multiple 'use strict' directives.");
+        }
+    }
+
+    return {
+
+        "Program": checkForUnnecessaryUseStrict,
+
+        "FunctionExpression": function(node) {
+            checkForUnnecessaryUseStrict(node.body);
+        },
+
+        "FunctionDeclaration": function(node) {
+            checkForUnnecessaryUseStrict(node.body);
+        }
+    };
+
+};
+
+},{}],66:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag fall-through cases in switch statements.
+ * @author Matt DuVall <http://mattduvall.com/>
+ */
+"use strict";
+
+
+var FALLTHROUGH_COMMENT = /falls\sthrough/;
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var switches = [];
+
+    return {
+
+        "SwitchCase": function(node) {
+
+            var consequent = node.consequent,
+                switchData = switches[switches.length - 1],
+                i,
+                comments,
+                comment;
+
+            /*
+             * Some developers wrap case bodies in blocks, so if there is just one
+             * node and it's a block statement, check inside.
+             */
+            if (consequent.length === 1 && consequent[0].type === "BlockStatement") {
+                consequent = consequent[0];
+            }
+
+            // checking on previous case
+            if (!switchData.lastCaseClosed) {
+
+                // a fall through comment will be the last trailing comment of the last case
+                comments = context.getComments(switchData.lastCase).trailing;
+                comment = comments[comments.length - 1];
+
+                // check for comment
+                if (!comment || !FALLTHROUGH_COMMENT.test(comment.value)) {
+                    context.report(switchData.lastCase,
+                        "Expected a \"break\" statement before \"{{code}}\".",
+                        { code: node.test ? "case" : "default" });
+                }
+            }
+
+            // now dealing with the current case
+            switchData.lastCaseClosed = false;
+            switchData.lastCase = node;
+
+            // try to verify using statements - go backwards as a fast path for the search
+            if (consequent.length) {
+                for (i = consequent.length - 1; i >= 0; i--) {
+                    if (/(?:Break|Continue|Return|Throw)Statement/.test(consequent[i].type)) {
+                        switchData.lastCaseClosed = true;
+                        break;
+                    }
+                }
+            } else {
+                // the case statement has no statements, so it must logically fall through
+                switchData.lastCaseClosed = true;
+            }
+
+            /*
+             * Any warnings are triggered when the next SwitchCase occurs.
+             * There is no need to warn on the last SwitchCase, since it can't
+             * fall through to anything.
+             */
+        },
+
+        "SwitchStatement": function(node) {
+            switches.push({
+                node: node,
+                lastCaseClosed: true,
+                lastCase: null
+            });
+        },
+
+        "SwitchStatement:exit": function() {
+            switches.pop();
+        }
+    };
+
+};
+
+},{}],67:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of a leading/trailing decimal point in a numeric literal
+ * @author James Allardice
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "Literal": function(node) {
+
+            if (typeof node.value === "number") {
+                if (node.raw.indexOf(".") === 0) {
+                    context.report(node, "A leading decimal point can be confused with a dot.");
+                }
+                if (node.raw.indexOf(".") === node.raw.length - 1) {
+                    context.report(node, "A trailing decimal point can be confused with a dot.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],68:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of function declaration identifiers as variables.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /*
+     * Walk the scope chain looking for either a FunctionDeclaration or a
+     * VariableDeclaration with the same name as left-hand side of the
+     * AssignmentExpression. If we find the FunctionDeclaration first, then we
+     * warn, because a FunctionDeclaration is trying to become a Variable or a
+     * FunctionExpression. If we find a VariableDeclaration first, then we have
+     * a legitimate shadow variable.
+     */
+    function checkIfIdentifierIsFunction(scope, name) {
+        var variable,
+            def,
+            i,
+            j;
+
+        // Loop over all of the identifiers available in scope.
+        for (i = 0; i < scope.variables.length; i++) {
+            variable = scope.variables[i];
+
+            // For each identifier, see if it was defined in _this_ scope.
+            for (j = 0; j < variable.defs.length; j++) {
+                def = variable.defs[j];
+
+                // Identifier is a function and was declared in this scope
+                if (def.name.name === name && def.type === "FunctionName") {
+                    return true;
+                }
+
+                // Identifier is a variable and was declared in this scope. This
+                // is a legitimate shadow variable.
+                if (def.name.name === name) {
+                    return false;
+                }
+            }
+        }
+
+        // Check the upper scope.
+        if (scope.upper) {
+            return checkIfIdentifierIsFunction(scope.upper, name);
+        }
+
+        // We've reached the global scope and haven't found anything.
+        return false;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "AssignmentExpression": function(node) {
+            var scope = context.getScope(),
+                name = node.left.name;
+
+            if (checkIfIdentifierIsFunction(scope, name)) {
+                context.report(node, "'{{name}}' is a function.", { name: name });
+            }
+
+        }
+
+    };
+
+};
+
+},{}],69:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of implied eval via setTimeout and setInterval
+ * @author James Allardice
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "CallExpression": function(node) {
+
+            if (node.callee.type === "Identifier") {
+                var callee = node.callee.name;
+
+                if (callee === "setTimeout" || callee === "setInterval") {
+                    var argument = node.arguments[0];
+                    if (argument && argument.type === "Literal" && typeof argument.value === "string") {
+                        context.report(node, "Implied eval. Consider passing a function instead of a string.");
+                    }
+                }
+            }
+        }
+    };
+
+};
+
+},{}],70:[function(require,module,exports){
+/**
+ * @fileoverview Rule to enforce declarations in program or function body root.
+ * @author Brandon Mills
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    /**
+     * Find the nearest Program or Function ancestor node.
+     * @returns {Object} Ancestor's type and distance from node.
+     */
+    function nearestBody() {
+        var ancestors = context.getAncestors(),
+            ancestor = ancestors.pop(),
+            generation = 1;
+
+        while (ancestor && ["Program", "FunctionDeclaration",
+                "FunctionExpression"].indexOf(ancestor.type) < 0) {
+            generation += 1;
+            ancestor = ancestors.pop();
+        }
+
+        return {
+            // Type of containing ancestor
+            type: ancestor.type,
+            // Separation between ancestor and node
+            distance: generation
+        };
+    }
+
+    /**
+     * Ensure that a given node is at a program or function body's root.
+     * @param {ASTNode} node Declaration node to check.
+     * @returns {void}
+     */
+    function check(node) {
+        var body = nearestBody(node),
+            valid = ((body.type === "Program" && body.distance === 1) ||
+                body.distance === 2);
+
+        if (!valid) {
+            context.report(node, "Move {{type}} declaration to {{body}} root.",
+                {
+                    type: (node.type === "FunctionDeclaration" ?
+                        "function" : "variable"),
+                    body: (body.type === "Program" ?
+                        "program" : "function body")
+                }
+            );
+        }
+    }
+
+    return {
+
+        "FunctionDeclaration": check,
+        "VariableDeclaration": function(node) {
+            if (context.options[0] === "both") {
+                check(node);
+            }
+        }
+
+    };
+
+};
+
+},{}],71:[function(require,module,exports){
+/**
+ * @fileoverview Validate strings passed to the RegExp constructor
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    function isString(node) {
+        return node && node.type === "Literal" && typeof node.value === "string";
+    }
+
+    function check(node) {
+        if (node.callee.type === "Identifier" && node.callee.name === "RegExp" && isString(node.arguments[0])) {
+            try {
+                if (isString(node.arguments[1])) {
+                    void new RegExp(node.arguments[0].value, node.arguments[1].value);
+                } else {
+                    void new RegExp(node.arguments[0].value);
+                }
+            } catch(e) {
+                context.report(node, e.message);
+            }
+        }
+    }
+
+    return {
+        "CallExpression": check,
+        "NewExpression": check
+    };
+
+};
+
+},{}],72:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag usage of __iterator__ property
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "MemberExpression": function(node) {
+
+            if (node.property &&
+                    (node.property.type === "Identifier" && node.property.name === "__iterator__" && !node.computed) ||
+                    (node.property.type === "Literal" && node.property.value === "__iterator__")) {
+                context.report(node, "Reserved name '__iterator__'.");
+            }
+        }
+    };
+
+};
+
+},{}],73:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag labels that are the same as an identifier
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    function findIdentifier(scope, identifier) {
+        var found = false;
+
+        scope.variables.forEach(function(variable) {
+            if (variable.name === identifier) {
+                found = true;
+            }
+        });
+
+        scope.references.forEach(function(reference) {
+            if (reference.identifier.name === identifier) {
+                found = true;
+            }
+        });
+
+        // If we have not found the identifier in this scope, check the parent
+        // scope.
+        if (scope.upper && !found) {
+            return findIdentifier(scope.upper, identifier);
+        }
+
+        return found;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "LabeledStatement": function(node) {
+
+            // Fetch the innermost scope.
+            var scope = context.getScope();
+
+            // Recursively find the identifier walking up the scope, starting
+            // with the innermost scope.
+            if (findIdentifier(scope, node.label.name)) {
+                context.report(node, "Found identifier with same name as label.");
+            }
+        }
+
+    };
+
+};
+
+},{}],74:[function(require,module,exports){
+/**
+ * @fileoverview Disallow Labeled Statements
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "LabeledStatement": function(node) {
+            context.report(node, "Unexpected labeled statement.");
+        },
+
+        "BreakStatement": function(node) {
+
+            if (node.label) {
+                context.report(node, "Unexpected label in break statement.");
+            }
+
+        },
+
+        "ContinueStatement": function(node) {
+
+            if (node.label) {
+                context.report(node, "Unexpected label in continue statement.");
+            }
+
+        }
+
+
+    };
+
+};
+
+},{}],75:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag blocks with no reason to exist
+ * @author Brandon Mills
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "BlockStatement": function (node) {
+            // Check for any occurrence of BlockStatement > BlockStatement or
+            // Program > BlockStatement
+            var parent = context.getAncestors().pop();
+            if (parent.type === "BlockStatement" || parent.type === "Program") {
+                context.report(node, "Block is nested inside another block.");
+            }
+        }
+    };
+
+};
+
+},{}],76:[function(require,module,exports){
+/**
+ * @fileoverview Rule to disallow if as the only statmenet in an else block
+ * @author Brandon Mills
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+        "IfStatement": function(node) {
+            var ancestors = context.getAncestors(),
+                parent = ancestors.pop(),
+                grandparent = ancestors.pop();
+
+            if (parent && parent.type === "BlockStatement" &&
+                    parent.body.length === 1 && grandparent &&
+                    grandparent.type === "IfStatement" &&
+                    parent === grandparent.alternate) {
+                context.report(node, "Unexpected if as the only statement in an else block.");
+            }
+        }
+    };
+
+};
+
+},{}],77:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag creation of function inside a loop
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    function checkForLoops(node) {
+        var ancestors = context.getAncestors();
+
+        if (ancestors.some(function(ancestor) {
+            return ancestor.type === "ForStatement" || ancestor.type === "WhileStatement" || ancestor.type === "DoWhileStatement";
+        })) {
+            context.report(node, "Don't make functions within a loop");
+        }
+    }
+
+    return {
+        "FunctionExpression": checkForLoops,
+        "FunctionDeclaration": checkForLoops
+    };
+};
+
+},{}],78:[function(require,module,exports){
+/**
+ * @fileoverview Rule to enforce grouped require statements for Node.JS
+ * @author Raphael Pigulla
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+    "use strict";
+
+    /**
+     * Returns the list of built-in modules.
+     *
+     * @returns {string[]} An array of built-in Node.js modules.
+     */
+    function getBuiltinModules() {
+        // This list is generated using `require("repl")._builtinLibs.concat('repl').sort()`
+        // This particular list was generated using node v0.11.9
+        return [
+            "assert", "buffer", "child_process", "cluster", "crypto",
+            "dgram", "dns", "domain", "events", "fs", "http", "https",
+            "net", "os", "path", "punycode", "querystring", "readline",
+            "repl", "smalloc", "stream", "string_decoder", "tls", "tty",
+            "url", "util", "vm", "zlib"
+        ];
+    }
+
+    var BUILTIN_MODULES = getBuiltinModules();
+
+    var DECL_REQUIRE = "require",
+        DECL_UNINITIALIZED = "uninitialized",
+        DECL_OTHER = "other";
+
+    var REQ_CORE = "core",
+        REQ_FILE = "file",
+        REQ_MODULE = "module",
+        REQ_COMPUTED = "computed";
+
+    /**
+     * Determines the type of a declaration statement.
+     * @param {ASTNode} initExpression The init node of the VariableDeclarator.
+     * @returns {string} The type of declaration represented by the expression.
+     */
+    function getDeclarationType(initExpression) {
+        if (!initExpression) {
+            // "var x;"
+            return DECL_UNINITIALIZED;
+        }
+
+        if (initExpression.type === "CallExpression" &&
+            initExpression.callee.type === "Identifier" &&
+            initExpression.callee.name === "require"
+        ) {
+            // "var x = require('util');"
+            return DECL_REQUIRE;
+        } else if (initExpression.type === "MemberExpression") {
+            // "var x = require('glob').Glob;"
+            return getDeclarationType(initExpression.object);
+        }
+
+        // "var x = 42;"
+        return DECL_OTHER;
+    }
+
+    /**
+     * Determines the type of module that is loaded via require.
+     * @param {ASTNode} initExpression The init node of the VariableDeclarator.
+     * @returns {string} The module type.
+     */
+    function inferModuleType(initExpression) {
+        if (initExpression.type === "MemberExpression") {
+            // "var x = require('glob').Glob;"
+            return inferModuleType(initExpression.object);
+        } else if (initExpression["arguments"].length === 0) {
+            // "var x = require();"
+            return REQ_COMPUTED;
+        }
+
+        var arg = initExpression["arguments"][0];
+
+        if (arg.type !== "Literal" || typeof arg.value !== "string") {
+            // "var x = require(42);"
+            return REQ_COMPUTED;
+        }
+
+        if (BUILTIN_MODULES.indexOf(arg.value) !== -1) {
+            // "var fs = require('fs');"
+            return REQ_CORE;
+        } else if (/^\.{0,2}\//.test(arg.value)) {
+            // "var utils = require('./utils');"
+            return REQ_FILE;
+        } else {
+            // "var async = require('async');"
+            return REQ_MODULE;
+        }
+    }
+
+    /**
+     * Check if the list of variable declarations is mixed, i.e. whether it
+     * contains both require and other declarations.
+     * @param {ASTNode} declarations The list of VariableDeclarators.
+     * @returns {boolean} True if the declarations are mixed, false if not.
+     */
+    function isMixed(declarations) {
+        var contains = {};
+
+        declarations.forEach(function (declaration) {
+            var type = getDeclarationType(declaration.init);
+            contains[type] = true;
+        });
+
+        return !!(
+            contains[DECL_REQUIRE] &&
+            (contains[DECL_UNINITIALIZED] || contains[DECL_OTHER])
+        );
+    }
+
+    /**
+     * Check if all require declarations in the given list are of the same
+     * type.
+     * @param {ASTNode} declarations The list of VariableDeclarators.
+     * @returns {boolean} True if the declarations are grouped, false if not.
+     */
+    function isGrouped(declarations) {
+        var found = {};
+
+        declarations.forEach(function (declaration) {
+            if (getDeclarationType(declaration.init) === DECL_REQUIRE) {
+                found[inferModuleType(declaration.init)] = true;
+            }
+        });
+
+        return Object.keys(found).length <= 1;
+    }
+
+
+    return {
+
+        "VariableDeclaration": function(node) {
+            var grouping = !!context.options[0];
+
+            if (isMixed(node.declarations)) {
+                context.report(
+                    node,
+                    "Do not mix 'require' and other declarations."
+                );
+            } else if (grouping && !isGrouped(node.declarations)) {
+                context.report(
+                    node,
+                    "Do not mix core, module, file and computed requires."
+                );
+            }
+        }
+    };
+
+};
+
+},{}],79:[function(require,module,exports){
+/**
+ * @fileoverview Disallow mixed spaces and tabs for indentation
+ * @author Jary Niebur
+ * @copyright 2014 Nicholas C. Zakas. All rights reserved.
+ * @copyright 2014 Jary Niebur. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var smartTabs = context.options[0];
+
+    var COMMENT_START = /^\s*\/\*/,
+        MAYBE_COMMENT = /^\s*\*/;
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "Program": function(node) {
+            /*
+             * At least one space followed by a tab
+             * or the reverse before non-tab/-space
+             * characters begin.
+             */
+            var regex = /^(?=[\t ]*(\t | \t))/,
+                match,
+                lines = context.getSourceLines();
+
+            if (smartTabs) {
+                /*
+                 * At least one space followed by a tab
+                 * before non-tab/-space characters begin.
+                 */
+                regex = /^(?=[\t ]* \t)/;
+            }
+
+            lines.forEach(function(line, i) {
+                match = regex.exec(line);
+
+                if (match) {
+
+                    if (!MAYBE_COMMENT.test(line) && !COMMENT_START.test(lines[i - 1])) {
+                        context.report(node, { line: i + 1, column: match.index + 1 }, "Mixed spaces and tabs.");
+                    }
+
+                }
+            });
+        }
+
+    };
+
+};
+
+},{}],80:[function(require,module,exports){
+/**
+ * @fileoverview Disallow use of multiple spaces.
+ * @author Vignesh Anand aka vegetableman.
+ * @copyright 2014 Vignesh Anand. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var OPERATORS = [
+        "*", "/", "%", "+", "-", "<<", ">>", ">>>", "<", "<=", ">", ">=", "in",
+        "instanceof", "==", "!=", "===", "!==", "&", "^", "|", "&&", "||", "=",
+        "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=", "&=", "^=", "|=",
+        "?", ":", ","
+    ], errOps = [];
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Reports an AST node as a rule violation.
+     * @param {ASTNode} node The node to report.
+     * @returns {void}
+     * @private
+     */
+    function report(node) {
+        context.report(node, "Multiple spaces found around '" + errOps.shift() + "'.");
+    }
+
+    /**
+     * Checks whether the operator is in same line as two adjacent tokens.
+     * @param {ASTNode} left The token left to the operator.
+     * @param {ASTNode} right The token right to the operator.
+     * @param {ASTNode} operator The operator.
+     * @returns {boolean} Whether the operator is in same line as two adjacent tokens.
+     * @private
+     */
+    function isSameLine(left, right, operator) {
+        return operator.loc.end.line === left.loc.end.line &&
+                        operator.loc.end.line === right.loc.start.line;
+    }
+
+    /**
+     * Check whether there are multiple spaces around the operator.
+     * @param {ASTNode} left The token left to the operator.
+     * @param {ASTNode} right The token right to the operator.
+     * @param {ASTNode} operator The operator.
+     * @returns {boolean} Whether there are multiple spaces.
+     * @private
+     */
+    function isMultiSpaced(left, right, operator) {
+        return operator.range[0] - left.range[1] > 1 ||
+                right.range[0] - operator.range[1] > 1;
+    }
+
+    /**
+     * Get tokens and validate the spacing.
+     * @param {ASTNode} left The token left to the operator.
+     * @param {ASTNode} right The token right to the operator.
+     * @returns {boolean} Whether multiple spaces were found.
+     * @private
+     */
+    function validateSpacing(left, right) {
+        var tokens = context.getTokens({range: [left.range[1], right.range[0]]}, 1, 1),
+            operator;
+
+        for (var i = 1, l = tokens.length - 1; i < l; ++i) {
+            left = tokens[i - 1];
+            operator = tokens[i];
+            right = tokens[i + 1];
+
+            if (operator && operator.type === "Punctuator" && OPERATORS.indexOf(operator.value) >= 0 &&
+                isSameLine(left, right, operator) && isMultiSpaced(left, right, operator)) {
+                errOps.push(operator.value);
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+
+    /**
+     * Report if there are multiple spaces on the expression.
+     * @param {ASTNode} node The node to check.
+     * @returns {void}
+     * @private
+     */
+    function checkExpression(node) {
+        if (validateSpacing(node.left, node.right)) {
+            report(node);
+        }
+    }
+
+    /**
+     * Report if there are multiple spaces around conditional ternary operators.
+     * @param {ASTNode} node The node to check.
+     * @returns {void}
+     * @private
+     */
+    function checkConditional(node) {
+        if (validateSpacing(node.test, node.consequent)) {
+            report(node);
+        }
+        if (validateSpacing(node.consequent, node.alternate)) {
+            report(node);
+        }
+    }
+
+    /**
+     * Report if there are multiple spaces around equal operator in variable declaration.
+     * @param {ASTNode} node The node to check.
+     * @returns {void}
+     * @private
+     */
+    function checkVar(node) {
+        if (node.init && validateSpacing(node.id, node.init)) {
+            report(node);
+        }
+    }
+
+    /**
+     * Report if there are multiple spaces around list of items in objects, arrays,
+     * function parameters, sequences and declarations.
+     * @param {ASTNode} node The node to check.
+     * @param {string} property The property of node.
+     * @returns {void}
+     * @private
+     */
+    function checkList(node, property) {
+        var items = node[property];
+
+        for (var i = 0, l = items.length; i < l; i++) {
+            var left = items[i - 1],
+                right = items[i],
+                operator = context.getTokenBefore(right);
+
+            if (operator && operator.type === "Punctuator" && operator.value === ",") {
+                if (isSameLine(left, right, operator) && isMultiSpaced(left, right, operator)) {
+                    errOps.push(operator.value);
+                    report(right);
+                }
+            }
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+        "AssignmentExpression": checkExpression,
+        "BinaryExpression": checkExpression,
+        "LogicalExpression": checkExpression,
+        "ConditionalExpression": checkConditional,
+        "VariableDeclarator": checkVar,
+        "ArrayExpression": function(node) {
+            checkList(node, "elements");
+        },
+        "ObjectExpression": function(node) {
+            checkList(node, "properties");
+        },
+        "SequenceExpression": function(node) {
+            checkList(node, "expressions");
+        },
+        "FunctionExpression": function(node) {
+            checkList(node, "params");
+        },
+        "FunctionDeclaration": function(node) {
+            checkList(node, "params");
+        },
+        "VariableDeclaration": function(node) {
+            checkList(node, "declarations");
+        }
+    };
+
+};
+
+},{}],81:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when using multiline strings
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+    "use strict";
+
+    return {
+
+        "Literal": function(node) {
+            var lineBreak = /\n/;
+            if (lineBreak.test(node.raw)) {
+                context.report(node, "Multiline support is limited to browsers supporting ES5 only.");
+            }
+        }
+    };
+
+};
+
+},{}],82:[function(require,module,exports){
+/**
+ * @fileoverview Disallows multiple blank lines.
+ * implementation adapted from the no-trailing-spaces rule.
+ * @author Greg Cochard
+ * @copyright 2014 Greg Cochard. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    // Use options.max or 2 as default
+    var numLines = 2;
+
+    if (context.options.length) {
+        numLines = context.options[0].max;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "Program": function checkBlankLines(node) {
+            var lines = context.getSourceLines(),
+                currentLocation = -1,
+                lastLocation,
+                blankCounter = 0,
+                location,
+                trimmedLines = lines.map(function(str) {
+                    return str.trim();
+                });
+
+            // Aggregate and count blank lines
+            do {
+                lastLocation = currentLocation;
+                currentLocation = trimmedLines.indexOf("",currentLocation + 1);
+                if (lastLocation === currentLocation - 1) {
+                    blankCounter++;
+                } else {
+                    if (blankCounter >= numLines) {
+                        location = {
+                            line: lastLocation + 1,
+                            column: lines[lastLocation].length
+                        };
+                        context.report(node, location, "Multiple blank lines not allowed.");
+                    }
+
+                    // Finally, reset the blank counter
+                    blankCounter = 0;
+                }
+            } while (currentLocation !== -1);
+        }
+    };
+
+};
+
+},{}],83:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when re-assigning native objects
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var nativeObjects = ["Array", "Boolean", "Date", "decodeURI",
+                        "decodeURIComponent", "encodeURI", "encodeURIComponent",
+                        "Error", "eval", "EvalError", "Function", "isFinite",
+                        "isNaN", "JSON", "Math", "Number", "Object", "parseInt",
+                        "parseFloat", "RangeError", "ReferenceError", "RegExp",
+                        "String", "SyntaxError", "TypeError", "URIError",
+                        "Map", "NaN", "Set", "WeakMap", "Infinity", "undefined"];
+
+    return {
+
+        "AssignmentExpression": function(node) {
+            if (nativeObjects.indexOf(node.left.name) >= 0) {
+                context.report(node, node.left.name + " is a read-only native object.");
+            }
+        },
+
+        "VariableDeclarator": function(node) {
+            if (nativeObjects.indexOf(node.id.name) >= 0) {
+                context.report(node, "Redefinition of '{{nativeObject}}'.", { nativeObject: node.id.name });
+            }
+        }
+    };
+
+};
+
+},{}],84:[function(require,module,exports){
+/**
+ * @fileoverview A rule to disallow negated left operands of the `in` operator
+ * @author Michael Ficarra
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "BinaryExpression": function(node) {
+            if (node.operator === "in" && node.left.type === "UnaryExpression" && node.left.operator === "!") {
+                context.report(node, "The `in` expression's left operand is negated");
+            }
+        }
+    };
+
+};
+
+},{}],85:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag nested ternary expressions
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "ConditionalExpression": function(node) {
+            if (node.alternate.type === "ConditionalExpression" ||
+                    node.consequent.type === "ConditionalExpression") {
+                context.report(node, "Do not nest ternary expressions");
+            }
+        }
+    };
+};
+
+},{}],86:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when using new Function
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "NewExpression": function(node) {
+            if (node.callee.name === "Function") {
+                context.report(node, "The Function constructor is eval.");
+            }
+        }
+    };
+
+};
+
+},{}],87:[function(require,module,exports){
+/**
+ * @fileoverview A rule to disallow calls to the Object constructor
+ * @author Matt DuVall <http://www.mattduvall.com/>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "NewExpression": function(node) {
+            if (node.callee.name === "Object") {
+                context.report(node, "The object literal notation {} is preferrable.");
+            }
+        }
+    };
+
+};
+
+},{}],88:[function(require,module,exports){
+/**
+ * @fileoverview Rule to disallow use of new operator with the `require` function
+ * @author Wil Moore III
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "NewExpression": function(node) {
+            if (node.callee.type === "Identifier" && node.callee.name === "require") {
+                context.report(node, "Unexpected use of new with require.");
+            }
+        }
+    };
+
+};
+
+},{}],89:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when using constructor for wrapper objects
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "NewExpression": function(node) {
+            var wrapperObjects = ["String", "Number", "Boolean", "Math", "JSON"];
+            if (wrapperObjects.indexOf(node.callee.name) > -1) {
+                context.report(node, "Do not use {{fn}} as a constructor.", { fn: node.callee.name });
+            }
+        }
+    };
+
+};
+
+},{}],90:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag statements with function invocation preceded by
+ * "new" and not part of assignment
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "ExpressionStatement": function(node) {
+
+            if (node.expression.type === "NewExpression") {
+                context.report(node, "Do not use 'new' for side effects.");
+            }
+        }
+    };
+
+};
+
+},{}],91:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of an object property of the global object (Math and JSON) as a function
+ * @author James Allardice
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "CallExpression": function(node) {
+
+            if (node.callee.type === "Identifier") {
+                var name = node.callee.name;
+                if (name === "Math" || name === "JSON") {
+                    context.report(node, "'{{name}}' is not a function.", { name: name });
+                }
+            }
+        }
+    };
+
+};
+
+},{}],92:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag octal escape sequences in string literals.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "Literal": function(node) {
+            if (typeof node.value !== "string") {
+                return;
+            }
+            var match = node.raw.match(/^([^\\]|\\[^0-7])*\\([0-7])/),
+                octalDigit;
+
+            if (match) {
+                octalDigit = match[2];
+                context.report(node, "Don't use octal: '\\{{octalDigit}}'. Use '\\u....' instead.",
+                        { octalDigit: octalDigit });
+            }
+        }
+
+    };
+
+};
+
+},{}],93:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when initializing octal literal
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "Literal": function(node) {
+            if (typeof node.value === "number" && /^0[0-7]/.test(node.raw)) {
+                context.report(node, "Octal literals should not be used.");
+            }
+        }
+    };
+
+};
+
+},{}],94:[function(require,module,exports){
+/**
+ * @fileoverview Disallow string concatenation when using __dirname and __filename
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var MATCHER = /^__(?:dir|file)name$/;
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "BinaryExpression": function(node) {
+
+            var left = node.left,
+                right = node.right;
+
+            if (node.operator === "+" &&
+                    ((left.type === "Identifier" && MATCHER.test(left.name)) ||
+                    (right.type === "Identifier" && MATCHER.test(right.name)))
+            ) {
+
+                context.report(node, "Use path.join() or path.resolve() instead of + to create paths.");
+            }
+        }
+
+    };
+
+};
+
+},{}],95:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of unary increment and decrement operators.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "UpdateExpression": function(node) {
+            context.report(node, "Unary operator '" + node.operator + "' used.");
+        }
+
+    };
+
+};
+
+},{}],96:[function(require,module,exports){
+/**
+ * @fileoverview Disallow the use of process.env()
+ * @author Vignesh Anand
+ * @copyright 2014 Vignesh Anand. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "MemberExpression": function(node) {
+            var objectName = node.object.name,
+                propertyName = node.property.name;
+
+            if (objectName === "process" && !node.computed && propertyName && propertyName === "env") {
+                context.report(node, "Unexpected use of process.env.");
+            }
+
+        }
+
+    };
+
+};
+
+},{}],97:[function(require,module,exports){
+/**
+ * @fileoverview Disallow the use of process.exit()
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "CallExpression": function(node) {
+            var callee = node.callee;
+
+            if (callee.type === "MemberExpression" && callee.object.name === "process" &&
+                callee.property.name === "exit"
+            ) {
+                context.report(node, "Don't use process.exit(); throw an error instead.");
+            }
+        }
+
+    };
+
+};
+
+},{}],98:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag usage of __proto__ property
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "MemberExpression": function(node) {
+
+            if (node.property &&
+                    (node.property.type === "Identifier" && node.property.name === "__proto__" && !node.computed) ||
+                    (node.property.type === "Literal" && node.property.value === "__proto__")) {
+                context.report(node, "The '__proto__' property is deprecated.");
+            }
+        }
+    };
+
+};
+
+},{}],99:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when the same variable is declared more then once.
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    function findVariables() {
+        var scope = context.getScope();
+
+        scope.variables.forEach(function(variable) {
+            if (variable.identifiers && variable.identifiers.length > 1) {
+                variable.identifiers.sort(function(a, b) {
+                    return a.range[1] - b.range[1];
+                });
+
+                for (var i = 1, l = variable.identifiers.length; i < l; i++) {
+                    context.report(variable.identifiers[i], "{{a}} is already defined", {a: variable.name});
+                }
+            }
+        });
+    }
+
+    return {
+        "Program": findVariables,
+        "FunctionExpression": findVariables,
+        "FunctionDeclaration": findVariables
+    };
+};
+
+},{}],100:[function(require,module,exports){
+/**
+ * @fileoverview Rule to count multiple spaces in regular expressions
+ * @author Matt DuVall <http://www.mattduvall.com/>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "Literal": function(node) {
+            var token = context.getFirstTokens(node, 1)[0],
+                nodeType = token.type,
+                nodeValue = token.value,
+                multipleSpacesRegex = /( {2,})+?/,
+                regexResults;
+
+            if (nodeType === "RegularExpression") {
+                regexResults = multipleSpacesRegex.exec(nodeValue);
+
+                if (regexResults !== null) {
+                    context.report(node, "Spaces are hard to count. Use {" + regexResults[0].length + "}.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],101:[function(require,module,exports){
+/**
+ * @fileoverview Rule to disallow reserved words being used as keys
+ * @author Emil Bay
+ * @copyright 2014 Emil Bay. All rights reserved.
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var MESSAGE = "Reserved word '{{key}}' used as key.";
+
+    var reservedWords = [
+        "abstract",
+        "boolean", "break", "byte",
+        "case", "catch", "char", "class", "const", "continue",
+        "debugger", "default", "delete", "do", "double",
+        "else", "enum", "export", "extends",
+        "final", "finally", "float", "for", "function",
+        "goto",
+        "if", "implements", "import", "in", "instanceof", "int", "interface",
+        "long",
+        "native", "new",
+        "package", "private", "protected", "public",
+        "return",
+        "short", "static", "super", "switch", "synchronized",
+        "this", "throw", "throws", "transient", "try", "typeof",
+        "var", "void", "volatile",
+        "while", "with"
+    ];
+
+    return {
+
+        "ObjectExpression": function(node) {
+            node.properties.forEach(function(property) {
+
+                if (property.key.type === "Identifier") {
+                    var keyName = property.key.name;
+
+                    if (reservedWords.indexOf("" + keyName) !== -1) {
+                        context.report(node, MESSAGE, { key: keyName });
+                    }
+                }
+
+            });
+
+        }
+    };
+
+};
+
+},{}],102:[function(require,module,exports){
+/**
+ * @fileoverview Restrict usage of specified node modules.
+ * @author Christian Schulz
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function (context) {
+    // trim restricted module names
+    var restrictedModules = context.options;
+
+    // if no modules are restricted we don't need to check the CallExpressions
+    if (restrictedModules.length === 0) {
+        return {};
+    }
+
+    /**
+     * Function to check if a node is a string literal.
+     * @param {ASTNode} node The node to check.
+     * @returns {boolean} If the node is a string literal.
+     */
+    function isString(node) {
+        return node && node.type === "Literal" && typeof node.value === "string";
+    }
+
+    /**
+     * Function to check if a node is a require call.
+     * @param {ASTNode} node The node to check.
+     * @returns {boolean} If the node is a require call.
+     */
+    function isRequireCall(node) {
+        return node.callee.type === "Identifier" && node.callee.name === "require";
+    }
+
+    /**
+     * Function to check if a node has an argument that is an restricted module and return its name.
+     * @param {ASTNode} node The node to check
+     * @returns {undefined|String} restricted module name or undefined if node argument isn't restricted.
+     */
+    function getRestrictedModuleName(node) {
+        var moduleName;
+
+        // node has arguments and first argument is string
+        if (node.arguments.length && isString(node.arguments[0])) {
+            var argumentValue = node.arguments[0].value.trim();
+
+            // check if argument value is in restricted modules array
+            if (restrictedModules.indexOf(argumentValue) !== -1) {
+                moduleName = argumentValue;
+            }
+        }
+
+        return moduleName;
+    }
+
+    return {
+        "CallExpression": function (node) {
+            if (isRequireCall(node)) {
+                var restrictedModuleName = getRestrictedModuleName(node);
+
+                if (restrictedModuleName) {
+                    context.report(node, "'{{moduleName}}' module is restricted from being used.", {
+                        moduleName: restrictedModuleName
+                    });
+                }
+            }
+        }
+    };
+};
+
+},{}],103:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when return statement contains assignment
+ * @author Ilya Volodin
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "ReturnStatement": function(node) {
+            if (node.argument && node.argument.type === "AssignmentExpression") {
+                context.report(node, "Return statement should not contain assignment.");
+            }
+        }
+    };
+
+};
+
+},{}],104:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when using javascript: urls
+ * @author Ilya Volodin
+ */
+/*jshint scripturl: true */
+/*eslint no-script-url: 0*/
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "Literal": function(node) {
+
+            var value;
+
+            if (node.value && typeof(node.value) === "string") {
+                value = node.value.toLowerCase();
+
+                if (value.indexOf("javascript:") === 0) {
+                    context.report(node, "Script URL is a form of eval.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],105:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag comparison where left part is the same as the right
+ * part.
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+    "use strict";
+
+    return {
+
+        "BinaryExpression": function(node) {
+            var operators = ["===", "==", "!==", "!=", ">", "<", ">=", "<="];
+            if (operators.indexOf(node.operator) > -1 &&
+                (node.left.type === "Identifier" && node.right.type === "Identifier" && node.left.name === node.right.name ||
+                node.left.type === "Literal" && node.right.type === "Literal" && node.left.value === node.right.value)) {
+                context.report(node, "Comparing to itself is potentially pointless.");
+            }
+        }
+    };
+
+};
+
+},{}],106:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of comma operator
+ * @author Brandon Mills
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    /**
+     * Parts of the grammar that are required to have parens.
+     */
+    var parenthesized = {
+        "DoWhileStatement": "test",
+        "IfStatement": "test",
+        "SwitchStatement": "discriminant",
+        "WhileStatement": "test",
+        "WithStatement": "object"
+
+        // Omitting CallExpression - commas are parsed as argument separators
+        // Omitting NewExpression - commas are parsed as argument separators
+        // Omitting ForInStatement - parts aren't individually parenthesised
+        // Omitting ForStatement - parts aren't individually parenthesised
+    };
+
+    /**
+     * Determines whether a node is required by the grammar to be wrapped in
+     * parens, e.g. the test of an if statement.
+     * @param {ASTNode} node - The AST node
+     * @returns {boolean} True if parens around node belong to parent node.
+     */
+    function requiresExtraParens(node) {
+        return node.parent && parenthesized[node.parent.type] != null &&
+                node === node.parent[parenthesized[node.parent.type]];
+    }
+
+    /**
+     * Check if a node is wrapped in parens.
+     * @param {ASTNode} node - The AST node
+     * @returns {boolean} True if the node has a paren on each side.
+     */
+    function isParenthesised(node) {
+        var previousToken = context.getTokenBefore(node),
+            nextToken = context.getTokenAfter(node);
+
+        return previousToken && nextToken &&
+            previousToken.value === "(" && previousToken.range[1] <= node.range[0] &&
+            nextToken.value === ")" && nextToken.range[0] >= node.range[1];
+    }
+
+    /**
+     * Check if a node is wrapped in two levels of parens.
+     * @param {ASTNode} node - The AST node
+     * @returns {boolean} True if two parens surround the node on each side.
+     */
+    function isParenthesisedTwice(node) {
+        var previousToken = context.getTokenBefore(node, 1),
+            nextToken = context.getTokenAfter(node, 1);
+
+        return isParenthesised(node) && previousToken && nextToken &&
+            previousToken.value === "(" && previousToken.range[1] <= node.range[0] &&
+            nextToken.value === ")" && nextToken.range[0] >= node.range[1];
+    }
+
+    return {
+        "SequenceExpression": function(node) {
+            // Always allow sequences in for statement update
+            if (node.parent.type === "ForStatement" &&
+                    (node === node.parent.init || node === node.parent.update)) {
+                return;
+            }
+
+            // Wrapping a sequence in extra parens indicates intent
+            if (requiresExtraParens(node)) {
+                if (isParenthesisedTwice(node)) {
+                    return;
+                }
+            } else {
+                if (isParenthesised(node)) {
+                    return;
+                }
+            }
+
+            context.report(node, "Unexpected use of comma operator.");
+        }
+    };
+
+};
+
+},{}],107:[function(require,module,exports){
+/**
+ * @fileoverview Disallow shadowing of NaN, undefined, and Infinity (ES5 section 15.1.1)
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var RESTRICTED = ["undefined", "NaN", "Infinity", "arguments", "eval"];
+
+    function checkForViolation(id) {
+        if (RESTRICTED.indexOf(id.name) > -1) {
+            context.report(id, "Shadowing of global property \"" + id.name + "\".");
+        }
+    }
+
+    return {
+        "VariableDeclarator": function(node) {
+            checkForViolation(node.id);
+        },
+        "FunctionExpression": function(node) {
+            if (node.id) {
+                checkForViolation(node.id);
+            }
+            [].map.call(node.params, checkForViolation);
+        },
+        "FunctionDeclaration": function(node) {
+            checkForViolation(node.id);
+            [].map.call(node.params, checkForViolation);
+        },
+        "CatchClause": function(node) {
+            checkForViolation(node.param);
+        }
+    };
+
+};
+
+},{}],108:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag on declaring variables already declared in the outer scope
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    /**
+     * Checks if a variable is contained in the list of given scope variables.
+     * @param {Object} variable The variable to check.
+     * @param {Array} scopeVars The scope variables to look for.
+     * @returns {boolean} Whether or not the variable is contains in the list of scope variables.
+     */
+    function isContainedInScopeVars(variable, scopeVars) {
+        return scopeVars.some(function (scopeVar) {
+            if (scopeVar.identifiers.length > 0) {
+                return variable.name === scopeVar.name;
+            }
+            return false;
+        });
+    }
+
+    /**
+     * Checks if the given variables are shadowed in the given scope.
+     * @param {Array} variables The variables to look for
+     * @param {Object} scope The scope to be checked.
+     * @returns {void}
+     */
+    function checkShadowsInScope(variables, scope) {
+        variables.forEach(function (variable) {
+            if (isContainedInScopeVars(variable, scope.variables)) {
+                context.report(variable.identifiers[0], "{{a}} is already declared in the upper scope.", {a: variable.name});
+            }
+        });
+    }
+
+    /**
+     * Filters all variables of a list which already occur in another list.
+     * @param {Array} variableListA List of variables which should be filtered.
+     * @param {Array} variableListB List of variables which should no occur in variableListA.
+     * @returns {Array} Filtered list of variables.
+     */
+    function filterVariableList(variableListA, variableListB) {
+        return variableListA.filter(function (variableA) {
+            return !variableListB.some(function (variableB) {
+                return variableA.name === variableB.name;
+            });
+        });
+    }
+
+    /**
+     * Checks the given node for shadowed variables.
+     * @param {ASTNode} node The AST node of a FunctionDeclaration or FunctionExpression.
+     * @returns {void}
+     */
+    function checkForShadows(node) {
+        var scope = context.getScope(),
+            args = node.params,
+            variables = filterVariableList(scope.variables, args);
+
+        // iterate through the array of variables and find duplicates with the upper scope
+        var upper = scope.upper;
+        while (upper) {
+            checkShadowsInScope(variables, upper);
+            upper = upper.upper;
+        }
+    }
+
+    return {
+        "FunctionDeclaration": checkForShadows,
+        "FunctionExpression": checkForShadows
+    };
+
+};
+
+},{}],109:[function(require,module,exports){
+/**
+ * @fileoverview Rule to require variables declared without whitespace before the lines semicolon
+ * @author Jonathan Kingston
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var semicolonWhitespace = /\s;$/;
+
+    return {
+        "VariableDeclaration": function(node) {
+            var source = context.getSource(node);
+            if (semicolonWhitespace.test(source)) {
+                context.report(node, "Variable declared with trailing whitespace before semicolon");
+            }
+        },
+        "ExpressionStatement": function(node) {
+            var source = context.getSource(node);
+            if (semicolonWhitespace.test(source)) {
+                context.report(node, "Expression called with trailing whitespace before semicolon");
+            }
+        }
+    };
+};
+
+},{}],110:[function(require,module,exports){
+/**
+ * @fileoverview Rule to check that spaced function application
+ * @author Matt DuVall <http://www.mattduvall.com>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    function detectOpenSpaces(node) {
+        var lastCalleeToken = context.getLastToken(node.callee);
+        var tokens = context.getTokens(node);
+        var i = tokens.indexOf(lastCalleeToken), l = tokens.length;
+        while (i < l && tokens[i].value !== "(") {
+            ++i;
+        }
+        if (i >= l) {
+            return;
+        }
+        // look for a space between the callee and the open paren
+        if (tokens[i - 1].range[1] !== tokens[i].range[0]) {
+            context.report(node, "Unexpected space between function name and paren.");
+        }
+    }
+
+    return {
+        "CallExpression": detectOpenSpaces,
+        "NewExpression": detectOpenSpaces
+    };
+
+};
+
+},{}],111:[function(require,module,exports){
+/**
+ * @fileoverview Disallow sparse arrays
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "ArrayExpression": function(node) {
+
+            var emptySpot = node.elements.indexOf(null) > -1;
+
+            if (emptySpot) {
+                context.report(node, "Unexpected comma in middle of array.");
+            }
+        }
+
+    };
+
+};
+
+},{}],112:[function(require,module,exports){
+/**
+ * @fileoverview Rule to check for properties whose identifier ends with the string Sync
+ * @author Matt DuVall<http://mattduvall.com/>
+ */
+
+/*jshint node:true*/
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "MemberExpression": function(node) {
+            var propertyName = node.property.name,
+                syncRegex = /.*Sync$/;
+
+            if (syncRegex.exec(propertyName) !== null) {
+                context.report(node, "Unexpected sync method: '" + propertyName + "'.");
+            }
+        }
+    };
+
+};
+
+},{}],113:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of ternary operators.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "ConditionalExpression": function(node) {
+            context.report(node, "Ternary operator used.");
+        }
+
+    };
+
+};
+
+},{}],114:[function(require,module,exports){
+/**
+ * @fileoverview Disallow trailing spaces at the end of lines.
+ * @author Nodeca Team <https://github.com/nodeca>
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var TRAILER = "[ \t\u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]+$";
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "Program": function checkTrailingSpaces(node) {
+
+            // Let's hack. Since Esprima does not return whitespace nodes,
+            // fetch the source code and do black magic via regexps.
+
+            var src = context.getSource(),
+                re = new RegExp(TRAILER, "mg"),
+                match, lines, location;
+
+            while ((match = re.exec(src)) !== null) {
+                lines = src.slice(0, re.lastIndex).split(/\r?\n/g);
+
+                location = {
+                    line: lines.length,
+                    column: lines[lines.length - 1].length - match[0].length + 1
+                };
+
+                // Passing node is a bit dirty, because message data will contain
+                // big text in `source`. But... who cares :) ?
+                // One more kludge will not make worse the bloody wizardry of this plugin.
+                context.report(node, location, "Trailing spaces not allowed.");
+            }
+        }
+
+    };
+};
+
+},{}],115:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when initializing to undefined
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "VariableDeclarator": function(node) {
+            var name = node.id.name;
+            var init = node.init && node.init.name;
+
+            if (init === "undefined") {
+                context.report(node, "It's not necessary to initialize '{{name}}' to undefined.", { name: name });
+            }
+        }
+    };
+
+};
+
+},{}],116:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag references to undeclared variables.
+ * @author Mark Macdonald
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+function isImplicitGlobal(variable) {
+    return variable.defs.every(function(def) {
+        return def.type === "ImplicitGlobalVariable";
+    });
+}
+
+/**
+ * Gets the declared variable, defined in `scope`, that `ref` refers to.
+ * @param {Scope} scope The scope in which to search.
+ * @param {Reference} ref The reference to find in the scope.
+ * @returns {Variable} The variable, or null if ref refers to an undeclared variable.
+ */
+function getDeclaredGlobalVariable(scope, ref) {
+    var declaredGlobal = null;
+    scope.variables.some(function(variable) {
+        if (variable.name === ref.identifier.name) {
+            // If it's an implicit global, it must have a `writeable` field (indicating it was declared)
+            if (!isImplicitGlobal(variable) || {}.hasOwnProperty.call(variable, "writeable")) {
+                declaredGlobal = variable;
+                return true;
+            }
+        }
+        return false;
+    });
+    return declaredGlobal;
+}
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "Program": function(/*node*/) {
+
+            var globalScope = context.getScope();
+
+            globalScope.through.forEach(function(ref) {
+                var variable = getDeclaredGlobalVariable(globalScope, ref),
+                    name = ref.identifier.name;
+                if (!variable) {
+                    context.report(ref.identifier, "'{{name}}' is not defined.", { name: name });
+                } else if (ref.isWrite() && variable.writeable === false) {
+                    context.report(ref.identifier, "'{{name}}' is read only.", { name: name });
+                }
+            });
+        }
+    };
+
+};
+
+},{}],117:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag references to the undefined variable.
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    return {
+
+        "Identifier": function(node) {
+            if (node.name === "undefined") {
+                var parent = context.getAncestors().pop();
+                if (!parent || parent.type !== "MemberExpression" || node !== parent.property || parent.computed) {
+                    context.report(node, "Unexpected use of undefined.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],118:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag trailing underscores in variable declarations.
+ * @author Matt DuVall <http://www.mattduvall.com>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //-------------------------------------------------------------------------
+    // Helpers
+    //-------------------------------------------------------------------------
+
+    function hasTrailingUnderscore(identifier) {
+        var len = identifier.length;
+
+        return identifier !== "_" && (identifier[0] === "_" || identifier[len - 1] === "_");
+    }
+
+    function isSpecialCaseIdentifierForMemberExpression(identifier) {
+        return identifier === "__proto__";
+    }
+
+    function isSpecialCaseIdentifierInVariableExpression(identifier) {
+        // Checks for the underscore library usage here
+        return identifier === "_";
+    }
+
+    function checkForTrailingUnderscoreInFunctionDeclaration(node) {
+        var identifier = node.id.name;
+
+        if (typeof identifier !== "undefined" && hasTrailingUnderscore(identifier)) {
+            context.report(node, "Unexpected dangling '_' in '" + identifier + "'.");
+        }
+    }
+
+    function checkForTrailingUnderscoreInVariableExpression(node) {
+        var identifier = node.id.name;
+
+        if (typeof identifier !== "undefined" && hasTrailingUnderscore(identifier) &&
+            !isSpecialCaseIdentifierInVariableExpression(identifier)) {
+            context.report(node, "Unexpected dangling '_' in '" + identifier + "'.");
+        }
+    }
+
+    function checkForTrailingUnderscoreInMemberExpression(node) {
+        var identifier = node.property.name;
+
+        if (typeof identifier !== "undefined" && hasTrailingUnderscore(identifier) &&
+            !isSpecialCaseIdentifierForMemberExpression(identifier)) {
+            context.report(node, "Unexpected dangling '_' in '" + identifier + "'.");
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "FunctionDeclaration": checkForTrailingUnderscoreInFunctionDeclaration,
+        "VariableDeclarator": checkForTrailingUnderscoreInVariableExpression,
+        "MemberExpression": checkForTrailingUnderscoreInMemberExpression
+    };
+
+};
+
+},{}],119:[function(require,module,exports){
+/**
+ * @fileoverview Checks for unreachable code due to return, throws, break, and continue.
+ * @author Joel Feenstra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+
+function report(context, node, unreachableType) {
+    var keyword;
+    switch (unreachableType) {
+        case "BreakStatement":
+            keyword = "break";
+            break;
+        case "ContinueStatement":
+            keyword = "continue";
+            break;
+        case "ReturnStatement":
+            keyword = "return";
+            break;
+        case "ThrowStatement":
+            keyword = "throw";
+            break;
+        default:
+            return;
+    }
+    context.report(node, "Found unexpected statement after a {{type}}.", { type: keyword });
+}
+
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    /**
+     * Checks if a node is an exception for no-unreachable because of variable/function hoisting
+     * @param {ASTNode} node The AST node to check.
+     * @returns {boolean} if the node doesn't trigger unreachable
+     * @private
+     */
+    function isUnreachableAllowed(node) {
+        return node.type === "FunctionDeclaration" ||
+            node.type === "VariableDeclaration" &&
+            node.declarations.every(function(declaration) {
+                return declaration.type === "VariableDeclarator" && declaration.init === null;
+            });
+    }
+
+    /*
+     * Verifies that the given node is the last node or followed exclusively by
+     * hoisted declarations
+     * @param {ASTNode} node Node that should be the last node
+     * @returns {void}
+     * @private
+     */
+    function checkNode(node) {
+        var parent = context.getAncestors().pop();
+        var field, i, sibling;
+
+        switch (parent.type) {
+            case "SwitchCase":
+                field = "consequent";
+                break;
+            case "Program":
+            case "BlockStatement":
+                field = "body";
+                break;
+            default:
+                return;
+        }
+
+        for (i = parent[field].length - 1; i >= 0; i--) {
+            sibling = parent[field][i];
+            if (sibling === node) {
+                return; // Found the last reachable statement, all done
+            }
+
+            if (!isUnreachableAllowed(sibling)) {
+                report(context, sibling, node.type);
+            }
+        }
+    }
+
+    return {
+        "ReturnStatement": checkNode,
+        "ThrowStatement": checkNode,
+        "ContinueStatement": checkNode,
+        "BreakStatement": checkNode
+    };
+
+};
+
+},{}],120:[function(require,module,exports){
+/**
+ * @fileoverview Flag expressions in statement position that do not side effect
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    /**
+     * @param {ASTNode} node - any node
+     * @returns {Boolean} whether the given node structurally represents a directive
+     */
+    function looksLikeDirective(node) {
+       return node.type === "ExpressionStatement" &&
+           node.expression.type === "Literal" && typeof node.expression.value === "string";
+    }
+
+    /**
+     * @param {Function} predicate - ([a] -> Boolean) the function used to make the determination
+     * @param {a[]} list - the input list
+     * @returns {a[]} the leading sequence of members in the given list that pass the given predicate
+     */
+    function takeWhile(predicate, list) {
+        for (var i = 0, l = list.length; i < l; ++i) {
+            if (!predicate(list[i])) {
+                break;
+            }
+        }
+        return [].slice.call(list, 0, i);
+    }
+
+    /**
+     * @param {ASTNode} node - a Program or BlockStatement node
+     * @returns {ASTNode[]} the leading sequence of directive nodes in the given node's body
+     */
+    function directives(node) {
+        return takeWhile(looksLikeDirective, node.body);
+    }
+
+    /**
+     * @param {ASTNode} node - any node
+     * @param {ASTNode[]} ancestors - the given node's ancestors
+     * @returns {Boolean} whether the given node is considered a directive in its current position
+     */
+    function isDirective(node, ancestors) {
+        var parent = ancestors[ancestors.length - 1],
+            grandparent = ancestors[ancestors.length - 2];
+        return (parent.type === "Program" || parent.type === "BlockStatement" && (grandparent.type === "FunctionExpression" || grandparent.type === "FunctionDeclaration")) &&
+            directives(parent).indexOf(node) >= 0;
+    }
+
+    return {
+        "ExpressionStatement": function(node) {
+
+            var type = node.expression.type,
+                ancestors = context.getAncestors();
+
+            if (
+                !/^(?:Assignment|Call|New|Update)Expression$/.test(type) &&
+                (type !== "UnaryExpression" || ["delete", "void"].indexOf(node.expression.operator) < 0) &&
+                !isDirective(node, ancestors)
+            ) {
+                context.report(node, "Expected an assignment or function call and instead saw an expression.");
+            }
+        }
+    };
+
+};
+
+},{}],121:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag declared but unused variables
+ * @author Ilya Volodin
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var config = {
+        vars: "all",
+        args: "after-used"
+    };
+
+    if (context.options[0]) {
+        if (typeof(context.options[0]) === "string") {
+            config.vars = context.options[0];
+        } else {
+            config.vars = context.options[0].vars || config.vars;
+            config.args = context.options[0].args || config.args;
+        }
+    }
+
+    var MESSAGE = "{{name}} is defined but never used";
+
+    /**
+     * @param {Reference} ref - an escope Reference
+     * @returns {Boolean} whether the given reference represents a read operation
+     */
+    function isReadRef(ref) {
+        return ref.isRead();
+    }
+
+    /**
+     * @param {Scope} scope - an escope Scope object
+     * @returns {Variable[]} most of the local variables with no read references
+     */
+    function unusedLocals(scope) {
+        var unused = [];
+        var variables = scope.variables;
+        if (scope.type !== "global") {
+            for (var i = 0, l = variables.length; i < l; ++i) {
+                // skip function expression names
+                if (scope.functionExpressionScope) {
+                    continue;
+                }
+                // skip implicit "arguments" variable
+                if (scope.type === "function" && variables[i].name === "arguments" && variables[i].identifiers.length === 0) {
+                    continue;
+                }
+                var type = variables[i].defs[0].type;
+                // skip catch variables
+                if (type === "CatchClause") {
+                    continue;
+                }
+                // if "args" option is "none", skip any parameter
+                if (config.args === "none" && type === "Parameter") {
+                    continue;
+                }
+                // if "args" option is "after-used", skip all but the last parameter
+                if (config.args === "after-used" && type === "Parameter" && variables[i].defs[0].index < variables[i].defs[0].node.params.length - 1) {
+                    continue;
+                }
+                if (variables[i].references.filter(isReadRef).length === 0) {
+                    unused.push(variables[i]);
+                }
+            }
+        }
+        return [].concat.apply(unused, [].map.call(scope.childScopes, unusedLocals));
+    }
+
+    return {
+        "Program": function(programNode) {
+            var globalScope = context.getScope();
+            var unused = unusedLocals(globalScope);
+            var i, l;
+
+            // determine unused globals
+            if (config.vars === "all") {
+                var unresolvedRefs = globalScope.through.filter(isReadRef).map(function(ref) {
+                    return ref.identifier.name;
+                });
+                for (i = 0, l = globalScope.variables.length; i < l; ++i) {
+                    if (unresolvedRefs.indexOf(globalScope.variables[i].name) < 0) {
+                        unused.push(globalScope.variables[i]);
+                    }
+                }
+            }
+
+            for (i = 0, l = unused.length; i < l; ++i) {
+                if (unused[i].eslintExplicitGlobal) {
+                    context.report(programNode, MESSAGE, unused[i]);
+                } else if (unused[i].defs.length > 0) {
+                    context.report(unused[i].identifiers[0], MESSAGE, unused[i]);
+                }
+            }
+        }
+    };
+
+};
+
+},{}],122:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of variables before they are defined
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+
+var NO_FUNC = "nofunc";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    function findDeclaration(name, scope) {
+        // try searching in the current scope first
+        for (var i = 0, l = scope.variables.length; i < l; i++) {
+            if (scope.variables[i].name === name) {
+                return scope.variables[i];
+            }
+        }
+        // check if there's upper scope and call recursivly till we find the variable
+        if (scope.upper) {
+            return findDeclaration(name, scope.upper);
+        }
+    }
+
+    function findVariables() {
+        var scope = context.getScope();
+        var typeOption = context.options[0];
+
+        function checkLocationAndReport(reference, declaration) {
+            if (typeOption !== NO_FUNC || declaration.defs[0].type !== "FunctionName") {
+                if (declaration.identifiers[0].range[1] > reference.identifier.range[1]) {
+                    context.report(reference.identifier, "{{a}} was used before it was defined", {a: reference.identifier.name});
+                }
+            }
+        }
+
+        scope.references.forEach(function(reference) {
+            // if the reference is resolved check for declaration location
+            // if not, it could be function invocation, try to find manually
+            if (reference.resolved && reference.resolved.identifiers.length > 0) {
+                checkLocationAndReport(reference, reference.resolved);
+            } else {
+                var declaration = findDeclaration(reference.identifier.name, scope);
+                // if there're no identifiers, this is a global environment variable
+                if (declaration && declaration.identifiers.length !== 0) {
+                    checkLocationAndReport(reference, declaration);
+                }
+            }
+        });
+    }
+
+    return {
+        "Program": findVariables,
+        "FunctionExpression": findVariables,
+        "FunctionDeclaration": findVariables
+    };
+};
+
+},{}],123:[function(require,module,exports){
+/**
+ * @fileoverview Rule to disallow use of void operator.
+ * @author Mike Sidorov
+ * @copyright 2014 Mike Sidorov. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+        "UnaryExpression": function(node) {
+            if (node.operator === "void") {
+                context.report(node, "Expected 'undefined' and instead saw 'void'.");
+            }
+        }
+    };
+
+};
+
+},{}],124:[function(require,module,exports){
+/**
+ * @fileoverview Rule that warns about used warning comments
+ * @author Alexander Schmidt <https://github.com/lxanders>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function (context) {
+    "use strict";
+
+    var configuration = context.options[0] || {},
+        warningTerms = configuration.terms || ["todo", "fixme", "xxx"],
+        location = configuration.location || "start";
+
+    /**
+     * Prepares a specified comment for being checked.
+     * @param {String} comment The comment to prepare.
+     * @returns {String} The specified comment prepared for being checked.
+     */
+    function prepareCommentForChecking(comment) {
+        var commentToCheck;
+
+        commentToCheck = comment.toLowerCase();
+        commentToCheck = commentToCheck.trim();
+
+        return commentToCheck;
+    }
+
+    /**
+     * Checks if the specified comment starts with a specified term.
+     * @param {String} commentToCheck The comment to check.
+     * @param {String} lowerCaseTerm The term to search for.
+     * @returns {Boolean} True if the comment started with the specified term, else false.
+     */
+    function commentStartsWithTerm(commentToCheck, lowerCaseTerm) {
+        return commentToCheck.indexOf(lowerCaseTerm) === 0;
+    }
+
+    /**
+     * Checks if the specified comment contains a specified term at any location.
+     * @param {String} commentToCheck The comment to check.
+     * @param {String} lowerCaseTerm The term to search for.
+     * @returns {Boolean} True if the term was contained in the comment, else false.
+     */
+    function commentContainsTerm(commentToCheck, lowerCaseTerm) {
+        return commentToCheck.indexOf(lowerCaseTerm) !== -1;
+    }
+
+
+    /**
+     * Checks the specified comment for matches of the configured warning terms and returns the matches.
+     * @param {String} comment The comment which is checked.
+     * @returns {Array} All matched warning terms for this comment.
+     */
+    function commentContainsWarningTerm(comment) {
+        var matches = [];
+
+        warningTerms.forEach(function (term) {
+            var lowerCaseTerm = term.toLowerCase(),
+                commentToCheck = prepareCommentForChecking(comment);
+
+            if (location === "start") {
+                if (commentStartsWithTerm(commentToCheck, lowerCaseTerm)) {
+                    matches.push(term);
+                }
+            } else if (location === "anywhere") {
+                if (commentContainsTerm(commentToCheck, lowerCaseTerm)) {
+                    matches.push(term);
+                }
+            }
+        });
+
+        return matches;
+    }
+
+    /**
+     * Checks the specified node for matching warning comments and reports them.
+     * @param {ASTNode} node The AST node being checked.
+     * @returns {void} undefined.
+     */
+    function checkComment(node) {
+        var matches = commentContainsWarningTerm(node.value);
+
+        matches.forEach(function (matchedTerm) {
+            context.report(node, "Unexpected " + matchedTerm + " comment.");
+        });
+    }
+
+    return {
+        "BlockComment": checkComment,
+        "LineComment": checkComment
+    };
+};
+
+},{}],125:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of with statement
+ * @author Nicholas C. Zakas
+ */
+
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "WithStatement": function(node) {
+            context.report(node, "Unexpected use of 'with' statement.");
+        }
+    };
+
+};
+
+},{}],126:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag wrapping none-iffe in parens
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "FunctionExpression": function(node) {
+            var ancestors = context.getAncestors(),
+                previousToken, nextToken;
+
+            if (!/CallExpression|NewExpression/.test(ancestors.pop().type)) {
+                previousToken = context.getTokenBefore(node);
+                nextToken = context.getTokenAfter(node);
+                if (previousToken.value === "(" && nextToken.value === ")") {
+                    context.report(node, "Wrapping non-IIFE function literals in parens is unnecessary.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],127:[function(require,module,exports){
+/**
+ * @fileoverview A rule to ensure the use of a single variable declaration.
+ * @author Ian Christian Myers
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    var functionStack = [];
+
+    function startFunction() {
+        functionStack.push(false);
+    }
+
+    function endFunction() {
+        functionStack.pop();
+    }
+
+    function checkDeclarations(node) {
+        if (functionStack[functionStack.length - 1]) {
+            context.report(node, "Combine this with the previous 'var' statement.");
+        } else {
+            functionStack[functionStack.length - 1] = true;
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "Program": startFunction,
+        "FunctionDeclaration": startFunction,
+        "FunctionExpression": startFunction,
+
+        "VariableDeclaration": checkDeclarations,
+
+        "Program:exit": endFunction,
+        "FunctionDeclaration:exit": endFunction,
+        "FunctionExpression:exit": endFunction
+    };
+
+};
+
+},{}],128:[function(require,module,exports){
+/**
+ * @fileoverview A rule to ensure blank lines within blocks.
+ * @author Mathias Schreck <https://github.com/lo1tuma>
+ * @copyright 2014 Mathias Schreck. All rights reserved.
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function (context) {
+    var requirePadding = context.options[0] !== "never";
+
+    /**
+     * Checks if the given non empty block node has a blank line before its first child node.
+     * @param {ASTNode} node The AST node of a BlockStatement.
+     * @returns {boolean} Whether or not the block starts with a blank line.
+     */
+    function isNonEmptyBlockTopPadded(node) {
+        var blockStart = node.loc.start.line,
+            first = node.body[0],
+            firstLine = first.loc.start.line,
+            expectedFirstLine = blockStart + 2,
+            leadingComments = context.getComments(first).leading;
+
+        if (leadingComments.length > 0) {
+            firstLine = leadingComments[0].loc.start.line;
+        }
+
+        return expectedFirstLine <= firstLine;
+    }
+
+    /**
+     * Checks if the given non empty block node has a blank line after its last child node.
+     * @param {ASTNode} node The AST node of a BlockStatement.
+     * @returns {boolean} Whether or not the block ends with a blank line.
+     */
+    function isNonEmptyBlockBottomPadded(node) {
+        var blockEnd = node.loc.end.line,
+            last = node.body[node.body.length - 1],
+            lastLine = last.loc.end.line,
+            expectedLastLine = blockEnd - 2,
+            trailingComments = context.getComments(last).trailing;
+
+        if (trailingComments.length > 0) {
+            lastLine = trailingComments[trailingComments.length - 1].loc.end.line;
+        }
+
+        return lastLine <= expectedLastLine;
+    }
+
+    /**
+     * Checks if the given non empty block node starts AND ends with a blank line.
+     * @param {ASTNode} node The AST node of a BlockStatement.
+     * @returns {boolean} Whether or not the block starts and ends with a blank line.
+     */
+    function isNonEmptyBlockPadded(node) {
+        return isNonEmptyBlockTopPadded(node) && isNonEmptyBlockBottomPadded(node);
+    }
+
+    /**
+     * Checks if the given non empty block node starts OR ends with a blank line.
+     * @param {ASTNode} node The AST node of a BlockStatement.
+     * @returns {boolean} Whether or not the block starts and ends with a blank line.
+     */
+    function hasNonEmptyBlockExtraPadding(node) {
+        return isNonEmptyBlockTopPadded(node) || isNonEmptyBlockBottomPadded(node);
+    }
+
+    /**
+     * Checks the given BlockStatement node to be padded if the block is not empty.
+     * @param {ASTNode} node The AST node of a BlockStatement.
+     * @returns {void} undefined.
+     */
+    function checkPadding(node) {
+        if (node.body.length > 0) {
+            if (requirePadding) {
+                if (!isNonEmptyBlockPadded(node)) {
+                    context.report(node, "Block must be padded by blank lines.");
+                }
+            } else {
+                if (hasNonEmptyBlockExtraPadding(node)) {
+                    context.report(node, "Block must not be padded by blank lines.");
+                }
+            }
+        }
+    }
+
+    return {
+        "BlockStatement": checkPadding
+    };
+
+};
+
+},{}],129:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag non-quoted property names in object literals.
+ * @author Mathias Bynens <http://mathiasbynens.be/>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+var esprima = require("esprima");
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var MODE = context.options[0];
+
+    switch (MODE) {
+
+        case "as-needed":
+            return {
+                Property: function(node) {
+                    var key = node.key;
+                    // Ensure that any quoted property names required quoting
+                    if (key.type === "Literal" && typeof key.value === "string") {
+                        try {
+                            var tokens = esprima.tokenize(key.value);
+                            if (tokens.length !== 1) {
+                                return;
+                            }
+                            var t = tokens[0];
+                        } catch(e) {
+                            return;
+                        }
+                        if (t.type === "Identifier" || t.type === "Null" || t.type === "Boolean" || t.type === "Numeric" && "" + +t.value === t.value) {
+                            context.report(node, "Unnecessarily quoted property `{{name}}` found.", key);
+                        }
+                    }
+                }
+            };
+
+        default:
+            return {
+                Property: function(node) {
+                    var key = node.key;
+                    // Ensure all property names are quoted
+                    if (key.type !== "Literal" || typeof key.value !== "string") {
+                        context.report(node, "Unquoted property `{{name}}` found.", key);
+                    }
+                }
+            };
+
+    }
+
+};
+
+},{"esprima":6}],130:[function(require,module,exports){
+/**
+ * @fileoverview A rule to choose between single and double quote marks
+ * @author Matt DuVall <http://www.mattduvall.com/>, Brandon Payton
+ */
+
+//------------------------------------------------------------------------------
+// Constants
+//------------------------------------------------------------------------------
+
+var QUOTE_SETTINGS = {
+    "double": {
+        quote: "\"",
+        alternateQuote: "'",
+        description: "doublequote"
+    },
+    "single": {
+        quote: "'",
+        alternateQuote: "\"",
+        description: "singlequote"
+    }
+};
+
+var AVOID_ESCAPE = "avoid-escape";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    /**
+     * Validate that a string passed in is surrounded by the specified character
+     * @param  {string} val The text to check.
+     * @param  {string} character The character to see if it's surrounded by.
+     * @returns {boolean} True if the text is surrounded by the character, false if not.
+     */
+    function isSurroundedBy(val, character) {
+        return val[0] === character && val[val.length - 1] === character;
+    }
+
+    return {
+
+        "Literal": function(node) {
+            var val = node.value,
+                rawVal = node.raw,
+                quoteOption = context.options[0],
+                settings = QUOTE_SETTINGS[quoteOption],
+                avoidEscape = context.options[1] === AVOID_ESCAPE,
+                isValid;
+
+            if (settings && typeof val === "string") {
+                isValid = isSurroundedBy(rawVal, settings.quote);
+
+                if (!isValid && avoidEscape) {
+                    isValid = isSurroundedBy(rawVal, settings.alternateQuote) && rawVal.indexOf(settings.quote) >= 0;
+                }
+
+                if (!isValid) {
+                    context.report(node, "Strings must use " + settings.description + ".");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],131:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag use of parseInt without a radix argument
+ * @author James Allardice
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "CallExpression": function(node) {
+
+            var radix;
+
+            if (node.callee.name === "parseInt") {
+
+                if (node.arguments.length < 2) {
+                    context.report(node, "Missing radix parameter.");
+                } else {
+
+                    radix = node.arguments[1];
+
+                    // don't allow non-numeric literals or undefined
+                    if ((radix.type === "Literal" && typeof radix.value !== "number") ||
+                        (radix.type === "Identifier" && radix.name === "undefined")
+                    ) {
+                        context.report(node, "Invalid radix parameter.");
+                    }
+                }
+
+            }
+        }
+    };
+
+};
+
+},{}],132:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag missing semicolons.
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+module.exports = function(context) {
+
+    var OPT_OUT_PATTERN = /[\[\(\/\+\-]/;
+
+    var always = context.options[0] !== "never";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Checks a node to see if it's followed by a semicolon.
+     * @param {ASTNode} node The node to check.
+     * @returns {void}
+     */
+    function checkForSemicolon(node) {
+        var lastToken = context.getLastToken(node),
+            nextToken = context.getTokenAfter(node);
+
+        if (always) {
+            if (lastToken.type !== "Punctuator" || lastToken.value !== ";") {
+                context.report(node, lastToken.loc.end, "Missing semicolon.");
+            }
+        } else {
+            if (lastToken.type === "Punctuator" && lastToken.value === ";") {
+
+                if (!nextToken || !(OPT_OUT_PATTERN.test(nextToken.value))) {
+                    context.report(node, node.loc.end, "Extra semicolon.");
+                }
+
+            }
+        }
+    }
+
+    /**
+     * Checks to see if there's a semicolon after a variable declaration.
+     * @param {ASTNode} node The node to check.
+     * @returns {void}
+     */
+    function checkForSemicolonForVariableDeclaration(node) {
+
+        var ancestors = context.getAncestors(),
+            parentIndex = ancestors.length - 1,
+            parent = ancestors[parentIndex];
+
+        if ((parent.type !== "ForStatement" || parent.init !== node) &&
+            (parent.type !== "ForInStatement" || parent.left !== node)
+        ) {
+            checkForSemicolon(node);
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "VariableDeclaration": checkForSemicolonForVariableDeclaration,
+        "ExpressionStatement": checkForSemicolon,
+        "ReturnStatement": checkForSemicolon,
+        "DebuggerStatement": checkForSemicolon,
+        "BreakStatement": checkForSemicolon,
+        "ContinueStatement": checkForSemicolon,
+        "EmptyStatement": function (node) {
+            var nextToken;
+
+            if (!always) {
+                nextToken = context.getTokenAfter(node) || context.getLastToken(node);
+
+                if (!(OPT_OUT_PATTERN.test(nextToken.value))) {
+                    context.report(node, "Extra semicolon.");
+                }
+            }
+
+
+        }
+    };
+
+};
+
+},{}],133:[function(require,module,exports){
+/**
+ * @fileoverview Rule to require sorting of variables within a single Variable Declaration block
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    var configuration = context.options[0] || {},
+        ignoreCase = configuration.ignoreCase || false;
+
+    return {
+        "VariableDeclaration": function(node) {
+            node.declarations.reduce(function(memo, decl) {
+                var lastVariableName = memo.id.name,
+                    currenVariableName = decl.id.name;
+
+                if (ignoreCase) {
+                    lastVariableName = lastVariableName.toLowerCase();
+                    currenVariableName = currenVariableName.toLowerCase();
+                }
+
+                if (currenVariableName < lastVariableName) {
+                    context.report(decl, "Variables within the same declaration block should be sorted alphabetically");
+                    return memo;
+                } else {
+                    return decl;
+                }
+            }, node.declarations[0]);
+        }
+    };
+};
+
+},{}],134:[function(require,module,exports){
+/**
+ * @fileoverview Rule to enforce the number of spaces after certain keywords
+ * @author Nick Fisher
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    // unless the first option is `"never"`, then a space is required
+    var requiresSpace = context.options[0] !== "never",
+        config = context.options[1] || { checkFunctionKeyword: false };
+
+    /**
+     * Check if the separation of two adjacent tokens meets the spacing rules, and report a problem if not.
+     *
+     * @param {ASTNode} node  The node to which the potential problem belongs.
+     * @param {Token} left    The first token.
+     * @param {Token} right   The second token
+     * @returns {void}
+     */
+    function checkTokens(node, left, right) {
+        var hasSpace = left.range[1] < right.range[0],
+            value = left.value;
+
+        if (hasSpace !== requiresSpace) {
+            context.report(node, "Keyword \"{{value}}\" must {{not}}be followed by whitespace.", {
+                value: value,
+                not: requiresSpace ? "" : "not "
+            });
+        }
+    }
+
+    /**
+     * Check if the given node (`if`, `for`, `while`, etc), has the correct spacing after it.
+     * @param {ASTNode} node The node to check.
+     * @returns {void}
+     */
+    function check(node) {
+        var tokens = context.getFirstTokens(node, 2);
+        checkTokens(node, tokens[0], tokens[1]);
+    }
+
+    return {
+        "IfStatement": function (node) {
+            check(node);
+            // check the `else`
+            if (node.alternate && node.alternate.type !== "IfStatement") {
+                checkTokens(node.alternate, context.getTokenBefore(node.alternate), context.getFirstToken(node.alternate));
+            }
+        },
+        "ForStatement": check,
+        "ForOfStatement": check,
+        "ForInStatement": check,
+        "WhileStatement": check,
+        "DoWhileStatement": function (node) {
+            check(node);
+            // check the `while`
+            var whileTokens = context.getTokensBefore(node.test, 2);
+            checkTokens(node, whileTokens[0], whileTokens[1]);
+        },
+        "SwitchStatement": check,
+        "TryStatement": function (node) {
+            check(node);
+            // check the `finally`
+            if (node.finalizer) {
+                checkTokens(node.finalizer, context.getTokenBefore(node.finalizer), context.getFirstToken(node.finalizer));
+            }
+        },
+        "CatchStatement": check,
+        "WithStatement": check,
+        "FunctionExpression": function (node) {
+            if (config.checkFunctionKeyword) {
+                check(node);
+            }
+        }
+    };
+};
+
+},{}],135:[function(require,module,exports){
+/**
+ * @fileoverview A rule to ensure whitespace before blocks.
+ * @author Mathias Schreck <https://github.com/lo1tuma>
+ * @copyright 2014 Mathias Schreck. All rights reserved.
+ */
+
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function (context) {
+    var requireSpace = context.options[0] !== "never";
+
+    /**
+     * Determines whether two adjacent tokens are have whitespace between them.
+     * @param {Object} left - The left token object.
+     * @param {Object} right - The right token object.
+     * @returns {boolean} Whether or not there is space between the tokens.
+     */
+    function isSpaced(left, right) {
+        return left.range[1] < right.range[0];
+    }
+
+    /**
+     * Determines whether two adjacent tokens are on the same line.
+     * @param {Object} left - The left token object.
+     * @param {Object} right - The right token object.
+     * @returns {boolean} Whether or not the tokens are on the same line.
+     */
+    function isSameLine(left, right) {
+        return left.loc.start.line === right.loc.start.line;
+    }
+
+    /**
+     * Checks the given BlockStatement node has a preceding space if it doesn’t start on a new line.
+     * @param {ASTNode} node The AST node of a BlockStatement.
+     * @returns {void} undefined.
+     */
+    function checkPrecedingSpace(node) {
+        var precedingToken = context.getTokenBefore(node),
+            hasSpace;
+
+        if (precedingToken && isSameLine(precedingToken, node)) {
+            hasSpace = isSpaced(precedingToken, node);
+
+            if (requireSpace) {
+                if (!hasSpace) {
+                    context.report(node, "Missing space before opening brace.");
+                }
+            } else {
+                if (hasSpace) {
+                    context.report(node, "Unexpected space before opening brace.");
+                }
+            }
+        }
+    }
+
+    return {
+        "BlockStatement": checkPrecedingSpace
+    };
+
+};
+
+},{}],136:[function(require,module,exports){
+/**
+ * @fileoverview Disallows or enforces spaces inside of brackets.
+ * @author Ian Christian Myers
+ * @copyright 2014 Brandyn Bennett. All rights reserved.
+ * @copyright 2014 Michael Ficarra. No rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var options = {
+        spaced: context.options[0] === "always",
+        singleElementException: context.options[1] != null && !!context.options[1].singleValue,
+        objectsInArraysException: context.options[1] != null && !!context.options[1].objectsInArrays,
+        arraysInArraysException: context.options[1] != null && !!context.options[1].arraysInArrays,
+        propertyName: context.options[1] == null || context.options[1].propertyName == null || !!context.options[1].propertyName
+    };
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Determines whether two adjacent tokens are have whitespace between them.
+     * @param {Object} left - The left token object.
+     * @param {Object} right - The right token object.
+     * @returns {boolean} Whether or not there is space between the tokens.
+     */
+    function isSpaced(left, right) {
+        return left.range[1] < right.range[0];
+    }
+
+    /**
+     * Determines whether two adjacent tokens are on the same line.
+     * @param {Object} left - The left token object.
+     * @param {Object} right - The right token object.
+     * @returns {boolean} Whether or not the tokens are on the same line.
+     */
+    function isSameLine(left, right) {
+        return left.loc.start.line === right.loc.start.line;
+    }
+
+    /**
+    * Reports that there shouldn't be a space after the first token
+    * @param {ASTNode} node - The node to report in the event of an error.
+    * @param {Object[]} tokens - The tokens to be checked for spacing.
+    * @returns {void}
+    */
+    function reportNoBeginningSpace(node, tokens) {
+        context.report(node, tokens[0].loc.start,
+                    "There should be no space after '" + tokens[0].value + "'");
+    }
+
+    /**
+    * Reports that there shouldn't be a space before the last token
+    * @param {ASTNode} node - The node to report in the event of an error.
+    * @param {Object[]} tokens - The tokens to be checked for spacing.
+    * @returns {void}
+    */
+    function reportNoEndingSpace(node, tokens) {
+        context.report(node, tokens[tokens.length - 1].loc.start,
+                    "There should be no space before '" + tokens[tokens.length - 1].value + "'");
+    }
+
+    /**
+    * Reports that there should be a space after the first token
+    * @param {ASTNode} node - The node to report in the event of an error.
+    * @param {Object[]} tokens - The tokens to be checked for spacing.
+    * @returns {void}
+    */
+    function reportRequiredBeginningSpace(node, tokens) {
+        context.report(node, tokens[0].loc.start,
+                    "A space is required after '" + tokens[0].value + "'");
+    }
+
+    /**
+    * Reports that there should be a space before the last token
+    * @param {ASTNode} node - The node to report in the event of an error.
+    * @param {Object[]} tokens - The tokens to be checked for spacing.
+    * @returns {void}
+    */
+    function reportRequiredEndingSpace(node, tokens) {
+        context.report(node, tokens[tokens.length - 1].loc.start,
+                    "A space is required before '" + tokens[tokens.length - 1].value + "'");
+    }
+
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        MemberExpression: options.propertyName ? function checkMember(node) {
+            if (node.computed) {
+                var tokens = context.getTokens(node.property, 1, 1);
+                var tokenA = tokens[0], tokenB = tokens[1],
+                    tokenC = tokens[tokens.length - 2], tokenD = tokens[tokens.length - 1];
+                if (isSameLine(tokenA, tokenB) || isSameLine(tokenC, tokenD)) {
+                    if (options.spaced) {
+                        if (!isSpaced(tokenA, tokenB) && isSameLine(tokenA, tokenB)) {
+                            reportRequiredBeginningSpace(node, tokens);
+                        }
+                        if (!isSpaced(tokenC, tokenD) && isSameLine(tokenC, tokenD)) {
+                            reportRequiredEndingSpace(node, tokens);
+                        }
+                    } else {
+                        if (isSpaced(tokenA, tokenB)) {
+                            reportNoBeginningSpace(node, tokens);
+                        }
+                        if (isSpaced(tokenC, tokenD)) {
+                            reportNoEndingSpace(node, tokens);
+                        }
+                    }
+                }
+            }
+        } : function() {},
+
+        ArrayExpression: function(node) {
+            if (node.elements.length === 0) {
+                return;
+            }
+            var tokens = context.getTokens(node);
+            var tokenA = tokens[0], tokenB = tokens[1],
+                tokenC = tokens[tokens.length - 2], tokenD = tokens[tokens.length - 1];
+
+            var openingBracketMustBeSpaced =
+                options.objectsInArraysException && tokenB.value === "{" ||
+                options.arraysInArraysException && tokenB.value === "[" ||
+                options.singleElementException && node.elements.length === 1
+                ? !options.spaced : options.spaced;
+
+            var closingBracketMustBeSpaced =
+                options.objectsInArraysException && tokenC.value === "}" ||
+                options.arraysInArraysException && tokenC.value === "]" ||
+                options.singleElementException && node.elements.length === 1
+                ? !options.spaced : options.spaced;
+
+            if (isSameLine(tokenA, tokenB) || isSameLine(tokenC, tokenD)) {
+                if (openingBracketMustBeSpaced && !isSpaced(tokenA, tokenB)) {
+                    reportRequiredBeginningSpace(node, tokens);
+                } else if (!openingBracketMustBeSpaced && isSpaced(tokenA, tokenB)) {
+                    reportNoBeginningSpace(node, tokens);
+                }
+                if (closingBracketMustBeSpaced && !isSpaced(tokenC, tokenD)) {
+                    reportRequiredEndingSpace(node, tokens);
+                } else if (!closingBracketMustBeSpaced && isSpaced(tokenC, tokenD)) {
+                    reportNoEndingSpace(node, tokens);
+                }
+            }
+        },
+
+        ObjectExpression: function(node) {
+            if (node.properties.length === 0) {
+                return;
+            }
+            var tokens = context.getTokens(node);
+            var tokenA = tokens[0], tokenB = tokens[1],
+                tokenC = tokens[tokens.length - 2], tokenD = tokens[tokens.length - 1];
+            if (isSameLine(tokenA, tokenB) || isSameLine(tokenC, tokenD)) {
+                if (options.spaced) {
+                    if (!isSpaced(tokenA, tokenB)) {
+                        reportRequiredBeginningSpace(node, tokens);
+                    }
+                    if (!isSpaced(tokenC, tokenD)) {
+                        reportRequiredEndingSpace(node, tokens);
+                    }
+                } else {
+                    if (isSpaced(tokenA, tokenB)) {
+                        reportNoBeginningSpace(node, tokens);
+                    }
+                    if (isSpaced(tokenC, tokenD)) {
+                        reportNoEndingSpace(node, tokens);
+                    }
+                }
+            }
+        }
+
+    };
+
+};
+
+},{}],137:[function(require,module,exports){
+/**
+ * @fileoverview Disallows or enforces spaces inside of parentheses.
+ * @author Jonathan Rajavuori
+ * @copyright 2014 Jonathan Rajavuori. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var RE, MESSAGE;
+
+    if (context.options[0] === "always") {
+        RE = /\([^ \)]|[^ \(]\)/mg;
+        MESSAGE = "There must be a space inside this paren.";
+    } else {
+        RE = /\( | \)/mg;
+        MESSAGE = "There should be no spaces inside this paren.";
+    }
+
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    var skipRanges = [];
+
+    /**
+     * Adds the range of a node to the set to be skipped when checking parens
+     * @param {ASTNode} node The node to skip
+     * @returns {void}
+     * @private
+     */
+    function addSkipRange(node) {
+        skipRanges.push(node.range);
+    }
+
+    /**
+     * Sorts the skipRanges array. Must be called before shouldSkip
+     * @returns {void}
+     * @private
+     */
+    function sortSkipRanges() {
+        skipRanges.sort(function (a, b) {
+            return a[0] - b[0];
+        });
+    }
+
+    /**
+     * Checks if a certain position in the source should be skipped
+     * @param {Number} pos The 0-based index in the source
+     * @returns {boolean} whether the position should be skipped
+     * @private
+     */
+    function shouldSkip(pos) {
+        var i, len, range;
+        for (i = 0, len = skipRanges.length; i < len; i += 1) {
+            range = skipRanges[i];
+            if (pos < range[0]) {
+                break;
+            } else if (pos < range[1]) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "Program:exit": function checkParenSpaces(node) {
+
+            var match,
+                nextLine,
+                column,
+                line = 1,
+                source = context.getSource(),
+                pos = 0;
+
+            sortSkipRanges();
+
+            while ((match = RE.exec(source)) !== null) {
+                if (source.charAt(match.index) !== "(") {
+                    // Matched a closing paren pattern
+                    match.index += 1;
+                }
+
+                if (!shouldSkip(match.index)) {
+                    while ((nextLine = source.indexOf("\n", pos)) !== -1 && nextLine < match.index) {
+                        pos = nextLine + 1;
+                        line += 1;
+                    }
+                    column = match.index - pos;
+
+                    context.report(node, { line: line, column: column }, MESSAGE);
+                }
+            }
+
+        },
+
+
+        // These nodes can contain parentheses that this rule doesn't care about
+
+        LineComment: addSkipRange,
+
+        BlockComment: addSkipRange,
+
+        Literal: addSkipRange
+
+    };
+
+};
+
+},{}],138:[function(require,module,exports){
+/**
+ * @fileoverview Require spaces around infix operators
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var OPERATORS = [
+        "*", "/", "%", "+", "-", "<<", ">>", ">>>", "<", "<=", ">", ">=", "in",
+        "instanceof", "==", "!=", "===", "!==", "&", "^", "|", "&&", "||", "=",
+        "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=", "&=", "^=", "|=",
+        "?", ":", ","
+    ];
+
+    function isSpaced(left, right) {
+        var op, tokens = context.getTokens({range: [left.range[1], right.range[0]]}, 1, 1);
+        for (var i = 1, l = tokens.length - 1; i < l; ++i) {
+            op = tokens[i];
+            if (
+                op.type === "Punctuator" &&
+                OPERATORS.indexOf(op.value) >= 0 &&
+                (tokens[i - 1].range[1] >= op.range[0] || op.range[1] >= tokens[i + 1].range[0])
+            ) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function isRightSpaced(left, right) {
+        var op, tokens = context.getTokens({range: [left.range[1], right.range[0]]}, 1, 1);
+        for (var i = 1, l = tokens.length - 1; i < l; ++i) {
+            op = tokens[i];
+            if (
+                op.type === "Punctuator" &&
+                OPERATORS.indexOf(op.value) >= 0 &&
+                op.range[1] >= tokens[i + 1].range[0]
+            ) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function report(node) {
+        context.report(node, "Infix operators must be spaced.");
+    }
+
+    function checkBinary(node) {
+        if (!isSpaced(node.left, node.right)) {
+            report(node);
+        }
+    }
+
+    function checkSequence(node) {
+        for (var i = 0, l = node.expressions.length - 1; i < l; ++i) {
+            if (!isRightSpaced(node.expressions[i], node.expressions[i + 1])) {
+                report(node);
+                break;
+            }
+        }
+    }
+
+    function checkConditional(node) {
+        if (!isSpaced(node.test, node.consequent) || !isSpaced(node.consequent, node.alternate)) {
+            report(node);
+        }
+    }
+
+    function checkVar(node) {
+        if (node.init && !isSpaced(node.id, node.init)) {
+            report(node);
+        }
+    }
+
+    return {
+        "AssignmentExpression": checkBinary,
+        "BinaryExpression": checkBinary,
+        "LogicalExpression": checkBinary,
+        "ConditionalExpression": checkConditional,
+        "SequenceExpression": checkSequence,
+        "VariableDeclarator": checkVar
+    };
+
+};
+
+},{}],139:[function(require,module,exports){
+/**
+ * @fileoverview Require spaces following return, throw, and case
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    function check(node) {
+        var tokens = context.getFirstTokens(node, 2),
+            value = tokens[0].value;
+
+        if (tokens[0].range[1] >= tokens[1].range[0]) {
+            context.report(node, "Keyword \"" + value + "\" must be followed by whitespace.");
+        }
+    }
+
+    return {
+        "ReturnStatement": function(node) {
+            if (node.argument) {
+                check(node);
+            }
+        },
+        "SwitchCase": function(node) {
+            if (node.test) {
+                check(node);
+            }
+        },
+        "ThrowStatement": check
+    };
+
+};
+
+},{}],140:[function(require,module,exports){
+/**
+ * @fileoverview Require spaces following unary word operators
+ * @author Michael Ficarra
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    function check(node) {
+        var tokens;
+        tokens = context.getFirstTokens(node, 2);
+        if (tokens[0].range[1] >= tokens[1].range[0]) {
+            switch (tokens[0].value) {
+                case "delete":
+                case "new":
+                case "typeof":
+                case "void":
+                    context.report(node, "Unary word operator \"" + tokens[0].value + "\" must be followed by whitespace.");
+                    break;
+                // no default
+            }
+        }
+    }
+
+    return {
+        "NewExpression": check,
+        "UnaryExpression": check
+    };
+
+};
+
+},{}],141:[function(require,module,exports){
+/**
+ * @fileoverview Enforces or disallows a space beginning a single-line comment.
+ * @author Greg Cochard
+ * @copyright 2014 Greg Cochard. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    // Unless the first option is never, require a space
+    var requireSpace = context.options[0] !== "never";
+
+    // Default to match anything, so all will fail if there are no exceptions
+    var exceptionMatcher = new RegExp(" ");
+
+    // Grab the exceptions array and build a RegExp matcher for it
+    var hasExceptions = context.options.length === 2;
+    var unescapedExceptions = hasExceptions ? context.options[1].exceptions : [];
+    var exceptions;
+
+    if (unescapedExceptions.length) {
+        exceptions = unescapedExceptions.map(function(s) {
+            return s.replace(/([.*+?${}()|\^\[\]\/\\])/g, "\\$1");
+        });
+        exceptionMatcher = new RegExp("(^(" + exceptions.join(")+$)|(^(") + ")+$)");
+    }
+
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "LineComment": function checkCommentForSpace(node) {
+
+            if (node.loc.start.line === 1 && /^#!/.test(context.getSourceLines()[0])) {
+
+                /*
+                 * HACK: return if we are on the first line and
+                 * encounter a shebang at the beginning.
+                 * It seems the parser will return this as a
+                 * comment and filter out the # so we must fetch
+                 * the actual source line. Is this being caused
+                 * by esprima or eslint? Something else?
+                 */
+                return;
+            }
+
+            if (requireSpace) {
+
+                // Space expected and not found
+                if (node.value.indexOf(" ") !== 0) {
+
+                    /*
+                     * Do two tests; one for space starting the line,
+                     * and one for a comment comprised only of exceptions
+                     */
+                    if (hasExceptions && !exceptionMatcher.test(node.value)) {
+                        context.report(node, "Expected exception block or space after // in comment.");
+                    } else if (!hasExceptions) {
+                        context.report(node, "Expected space after // in comment.");
+                    }
+                }
+
+            } else {
+
+                if (node.value.indexOf(" ") === 0) {
+                    context.report(node, "Unexpected space after // in comment.");
+                }
+            }
+        }
+
+    };
+};
+
+},{}],142:[function(require,module,exports){
+/**
+ * @fileoverview Rule to ensure code is running in strict mode.
+ * @author Nicholas C. Zakas
+ * @copyright 2013-2014 Nicholas C. Zakas. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var scopes = [];
+
+    /**
+     * Determines if a given node is "use strict".
+     * @param {ASTNode} node The node to check.
+     * @returns {boolean} True if the node is a strict pragma, false if not.
+     * @void
+     */
+    function isStrictPragma(node) {
+        return (node && node.type === "ExpressionStatement" &&
+                node.expression.value === "use strict");
+    }
+
+    /**
+     * When you enter a scope, push the strict value from the previous scope
+     * onto the stack.
+     * @param {ASTNode} node The AST node being checked.
+     * @returns {void}
+     * @private
+     */
+    function enterScope(node) {
+
+        var isStrict = false,
+            isProgram = (node.type === "Program"),
+            isParentGlobal = scopes.length === 1,
+            isParentStrict = scopes.length ? scopes[scopes.length - 1] : false;
+
+        // look for the "use strict" pragma
+        if (isProgram) {
+            isStrict = isStrictPragma(node.body[0]) || isParentStrict;
+        } else {
+            isStrict = isStrictPragma(node.body.body[0]) || isParentStrict;
+        }
+
+        scopes.push(isStrict);
+
+        // never warn if the parent is strict or the function is strict
+        if (!isParentStrict && !isStrict && isParentGlobal) {
+            context.report(node, "Missing \"use strict\" statement.");
+        }
+    }
+
+    /**
+     * When you exit a scope, pop off the top scope and see if it's true or
+     * false.
+     * @returns {void}
+     * @private
+     */
+    function exitScope() {
+        scopes.pop();
+    }
+
+    return {
+
+        "Program": enterScope,
+        "FunctionDeclaration": enterScope,
+        "FunctionExpression": enterScope,
+
+        "Program:exit": exitScope,
+        "FunctionDeclaration:exit": exitScope,
+        "FunctionExpression:exit": exitScope
+    };
+
+};
+
+},{}],143:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag comparisons to the value NaN
+ * @author James Allardice
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+        "BinaryExpression": function(node) {
+
+            if (!/^[|&^]$/.test(node.operator) && node.left.name === "NaN" || node.right.name === "NaN") {
+                context.report(node, "Use the isNaN function to compare with NaN.");
+            }
+        }
+    };
+
+};
+
+},{}],144:[function(require,module,exports){
+/**
+ * @fileoverview Validates JSDoc comments are syntactically correct
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+var doctrine = require("doctrine");
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var options = context.options[0] || {},
+        prefer = options.prefer || {},
+
+        // these both default to true, so you have to explicitly make them false
+        requireReturn = options.requireReturn === false ? false : true,
+        requireParamDescription = options.requireParamDescription === false ? false : true;
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    // Using a stack to store if a function returns or not (handling nested functions)
+    var fns = [];
+
+    /**
+     * When parsing a new function, store it in our function stack.
+     * @returns {void}
+     * @private
+     */
+    function startFunction() {
+        fns.push({returnPresent: false});
+    }
+
+    /**
+     * Indicate that return has been found in the current function.
+     * @param {ASTNode} node The return node.
+     * @returns {void}
+     * @private
+     */
+    function addReturn(node) {
+        var functionState = fns[fns.length - 1];
+
+        if (functionState && node.argument !== null) {
+            functionState.returnPresent = true;
+        }
+    }
+
+    /**
+     * Validate the JSDoc node and output warnings if anything is wrong.
+     * @param {ASTNode} node The AST node to check.
+     * @returns {void}
+     * @private
+     */
+    function checkJSDoc(node) {
+        var jsdocNode = context.getJSDocComment(node),
+            functionData = fns.pop(),
+            hasReturns = false,
+            hasConstructor = false,
+            params = Object.create(null),
+            jsdoc;
+
+        // make sure only to validate JSDoc comments
+        if (jsdocNode) {
+
+            try {
+                jsdoc = doctrine.parse(jsdocNode.value, {
+                    strict: true,
+                    unwrap: true,
+                    sloppy: true
+                });
+            } catch (ex) {
+
+                if (/braces/i.test(ex.message)) {
+                    context.report(jsdocNode, "JSDoc type missing brace.");
+                } else {
+                    context.report(jsdocNode, "JSDoc syntax error.");
+                }
+
+                return;
+            }
+
+            jsdoc.tags.forEach(function(tag) {
+
+                switch (tag.title) {
+
+                    case "param":
+                        if (!tag.type) {
+                            context.report(jsdocNode, "Missing JSDoc parameter type for '{{name}}'.", { name: tag.name });
+                        }
+
+                        if (!tag.description && requireParamDescription) {
+                            context.report(jsdocNode, "Missing JSDoc parameter description for '{{name}}'.", { name: tag.name });
+                        }
+
+                        if (params[tag.name]) {
+                            context.report(jsdocNode, "Duplicate JSDoc parameter '{{name}}'.", { name: tag.name });
+                        } else if (tag.name.indexOf(".") === - 1) {
+                            params[tag.name] = 1;
+                        }
+                        break;
+
+                    case "return":
+                    case "returns":
+                        hasReturns = true;
+
+                        if (!requireReturn && !functionData.returnPresent && tag.type.name !== "void" && tag.type.name !== "undefined") {
+                            context.report(jsdocNode, "Unexpected @" + tag.title + " tag; function has no return statement.");
+                        } else {
+                            if (!tag.type) {
+                                context.report(jsdocNode, "Missing JSDoc return type.");
+                            }
+
+                            if (tag.type.name !== "void" && !tag.description) {
+                                context.report(jsdocNode, "Missing JSDoc return description.");
+                            }
+                        }
+
+                        break;
+
+                    case "constructor":
+                        hasConstructor = true;
+                        break;
+
+                    // no default
+                }
+
+                // check tag preferences
+                if (prefer.hasOwnProperty(tag.title)) {
+                    context.report(jsdocNode, "Use @{{name}} instead.", { name: prefer[tag.title] });
+                }
+
+            });
+
+            // check for functions missing @returns
+            if (!hasReturns && !hasConstructor) {
+                if (requireReturn || functionData.returnPresent) {
+                    context.report(jsdocNode, "Missing JSDoc @returns for function.");
+                }
+            }
+
+            // check the parameters
+            var jsdocParams = Object.keys(params);
+
+            node.params.forEach(function(param, i) {
+                var name = param.name;
+
+                if (jsdocParams[i] && (name !== jsdocParams[i])) {
+                    context.report(jsdocNode, "Expected JSDoc for '{{name}}' but found '{{jsdocName}}'.", {
+                        name: name,
+                        jsdocName: jsdocParams[i]
+                    });
+                } else if (!params[name]) {
+                    context.report(jsdocNode, "Missing JSDoc for parameter '{{name}}'.", {
+                        name: name
+                    });
+                }
+            });
+
+        }
+
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+        "FunctionExpression": startFunction,
+        "FunctionDeclaration": startFunction,
+        "FunctionExpression:exit": checkJSDoc,
+        "FunctionDeclaration:exit": checkJSDoc,
+        "ReturnStatement": addReturn
+    };
+
+};
+
+},{"doctrine":4}],145:[function(require,module,exports){
+/**
+ * @fileoverview Ensures that the results of typeof are compared against a valid string
+ * @author Ian Christian Myers
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    var VALID_TYPES = ["symbol", "undefined", "object", "boolean", "number", "string", "function"],
+        OPERATORS = ["==", "===", "!=", "!=="];
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "UnaryExpression": function (node) {
+            var parent, sibling;
+
+            if (node.operator === "typeof") {
+                parent = context.getAncestors().pop();
+
+                if (parent.type === "BinaryExpression" && OPERATORS.indexOf(parent.operator) !== -1) {
+                    sibling = parent.left === node ? parent.right : parent.left;
+
+                    if (sibling.type === "Literal" && VALID_TYPES.indexOf(sibling.value) === -1) {
+                        context.report(sibling, "Invalid typeof comparison value");
+                    }
+                }
+            }
+        }
+
+    };
+
+};
+
+},{}],146:[function(require,module,exports){
+/**
+ * @fileoverview Rule to enforce var declarations are only at the top of a function.
+ * @author Danny Fritz
+ * @author Gyandeep Singh
+ * @copyright 2014 Danny Fritz. All rights reserved.
+ * @copyright 2014 Gyandeep Singh. All rights reserved.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function (context) {
+    var errorMessage = "All \"var\" declarations must be at the top of the function scope.";
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @param {ASTNode} node - any node
+     * @returns {Boolean} whether the given node structurally represents a directive
+     */
+    function looksLikeDirective(node) {
+       return node.type === "ExpressionStatement" &&
+           node.expression.type === "Literal" && typeof node.expression.value === "string";
+    }
+
+    /**
+     * Checks whether this variable is on top of the block body
+     * @param {ASTNode} node - The node to check
+     * @param {ASTNode[]} statements - collection of ASTNodes for the parent node block
+     * @returns {Boolean} True if var is on top otherwise false
+     */
+    function isVarOnTop (node, statements) {
+        var i = 0, l = statements.length;
+
+        // skip over directives
+        for (; i < l; ++i) {
+            if (!looksLikeDirective(statements[i])) {
+                break;
+            }
+        }
+
+        for (; i < l; ++i) {
+            if (statements[i].type !== "VariableDeclaration") {
+                return false;
+            }
+            if (statements[i] === node) {
+                return true;
+            }
+        }
+    }
+
+    /**
+     * Checks whether variable is on top at the global level
+     * @param {ASTNode} node - The node to check
+     * @param {ASTNode} parent - Parent of the node
+     * @returns {void}
+     */
+    function globalVarCheck (node, parent) {
+        if (!isVarOnTop(node, parent.body)) {
+            context.report(node, errorMessage);
+        }
+    }
+
+    /**
+     * Checks whether variable is on top at functional block scope level
+     * @param {ASTNode} node - The node to check
+     * @param {ASTNode} parent - Parent of the node
+     * @param {ASTNode} grandParent - Parent of the node's parent
+     * @returns {void}
+     */
+    function blockScopeVarCheck (node, parent, grandParent) {
+        if (!((grandParent.type === "FunctionDeclaration"
+            || grandParent.type === "FunctionExpression")
+            && parent.type === "BlockStatement"
+            && isVarOnTop(node, parent.body))) {
+            context.report(node, errorMessage);
+        }
+    }
+
+    //--------------------------------------------------------------------------
+    // Public API
+    //--------------------------------------------------------------------------
+
+    return {
+        "VariableDeclaration": function (node) {
+            var ancestors = context.getAncestors();
+            var parent = ancestors.pop();
+            var grandParent = ancestors.pop();
+
+            if (node.kind === "var") {// check variable is `var` type and not `let` or `const`
+                if (parent.type === "Program") {// That means its a global variable
+                    globalVarCheck(node, parent);
+                } else {
+                    blockScopeVarCheck(node, parent, grandParent);
+                }
+            }
+        }
+    };
+
+};
+
+},{}],147:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when IIFE is not wrapped in parens
+ * @author Ilya Volodin
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+    var style = context.options[0] || "outside";
+
+    function wrapped(node) {
+        var previousToken = context.getTokenBefore(node),
+            nextToken = context.getTokenAfter(node);
+        return previousToken && previousToken.value === "(" &&
+            nextToken && nextToken.value === ")";
+    }
+
+    return {
+
+        "CallExpression": function(node) {
+            if (node.callee.type === "FunctionExpression") {
+                var callExpressionWrapped = wrapped(node),
+                    functionExpressionWrapped = wrapped(node.callee);
+
+                if (!callExpressionWrapped && !functionExpressionWrapped) {
+                    context.report(node, "Wrap an immediate function invocation in parentheses.");
+                } else if (style === "inside" && !functionExpressionWrapped) {
+                    context.report(node, "Wrap only the function expression in parens.");
+                } else if (style === "outside" && !callExpressionWrapped) {
+                    context.report(node, "Move the invocation into the parens that contain the function.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],148:[function(require,module,exports){
+/**
+ * @fileoverview Rule to flag when regex literals are not wrapped in parens
+ * @author Matt DuVall <http://www.mattduvall.com>
+ */
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+    "use strict";
+
+    return {
+
+        "Literal": function(node) {
+            var token = context.getFirstToken(node),
+                nodeType = token.type,
+                source,
+                grandparent,
+                ancestors;
+
+            if (nodeType === "RegularExpression") {
+                source = context.getTokenBefore(node);
+                ancestors = context.getAncestors();
+                grandparent = ancestors[ancestors.length - 1];
+
+                if (grandparent.type === "MemberExpression" && grandparent.object === node &&
+                    (!source || source.value !== "(")) {
+                    context.report(node, "Wrap the regexp literal in parens to disambiguate the slash.");
+                }
+            }
+        }
+    };
+
+};
+
+},{}],149:[function(require,module,exports){
+/**
+ * @fileoverview Rule to require or disallow yoda comparisons
+ * @author Nicholas C. Zakas
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+module.exports = function (context) {
+
+    // Default to "never" (!always) if no option
+
+    var always = (context.options[0] === "always");
+
+    //--------------------------------------------------------------------------
+    // Helpers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Determines whether an operator is a comparison operator.
+     * @param {String} operator The operator to check.
+     * @returns {Boolean} Whether or not it is a comparison operator.
+     */
+    function isComparisonOperator(operator) {
+        return (/^(==|===|!=|!==|<|>|<=|>=)$/).test(operator);
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    return {
+
+        "BinaryExpression": function (node) {
+
+            if (always) {
+
+                // Comparisons must always be yoda-style: if ("blue" === color)
+
+                if (node.right.type === "Literal" && isComparisonOperator(node.operator)) {
+                    context.report(node, "Expected literal to be on the left side of " + node.operator + ".");
+                }
+
+            } else {
+
+                // Comparisons must never be yoda-style (default)
+
+                if (node.left.type === "Literal" && isComparisonOperator(node.operator)) {
+                    context.report(node, "Expected literal to be on the right side of " + node.operator + ".");
+                }
+
+            }
+
+        }
+
+    };
+
+};
+
+},{}],150:[function(require,module,exports){
+/**
+ * @fileoverview Common utilities.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Public Interface
+//------------------------------------------------------------------------------
+/**
+ * Merges two objects together and assigns the result to the initial object. Can be used for shallow cloning.
+ * @param {Object} target of the cloning operation
+ * @param {Object} source object
+ * @returns {void}
+ */
+exports.mixin = function(target, source) {
+    Object.keys(source).forEach(function(key) {
+        target[key] = source[key];
+    });
+};
+
+/**
+ * Merges two config objects. This will not only add missing keys, but will also modify values to match.
+ * @param {Object} base config object
+ * @param {Object} custom config object. Overrides in this config object will take priority over base.
+ * @returns {Object} merged config object.
+ */
+exports.mergeConfigs = function mergeConfigs(base, custom) {
+
+    Object.keys(custom).forEach(function (key) {
+        var property = custom[key];
+
+        if (key === "plugins") {
+            if (!base[key]) {
+                base[key] = [];
+            }
+
+            property.forEach(function (plugin) {
+                // skip duplicates
+                if (base[key].indexOf(plugin) === -1) {
+                    base[key].push(plugin);
+                }
+            });
+            return;
+        }
+
+        if (Array.isArray(base[key]) && !Array.isArray(property) && typeof property === "number") {
+            // assume that we are just overriding first attribute
+            base[key][0] = custom[key];
+            return;
+        }
+
+        if (typeof property === "object" && !Array.isArray(property)) {
+            // base[key] might not exist, so be careful with recursion here
+            base[key] = mergeConfigs(base[key] || {}, custom[key]);
+        } else {
+            base[key] = custom[key];
+        }
+    });
+
+    return base;
+};
+
+},{}]},{},[9])(9)
+});
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/External/Esprima/LICENSE b/Source/WebInspectorUI/UserInterface/External/Esprima/LICENSE
new file mode 100644
index 000000000..17557eceb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/Esprima/LICENSE
@@ -0,0 +1,21 @@
+Copyright (c) jQuery Foundation, Inc. and Contributors, All Rights Reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+  * Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+  * Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/Source/WebInspectorUI/UserInterface/External/Esprima/esprima.js b/Source/WebInspectorUI/UserInterface/External/Esprima/esprima.js
new file mode 100644
index 000000000..22eefedbe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/External/Esprima/esprima.js
@@ -0,0 +1,5660 @@
+/*
+  Copyright (c) jQuery Foundation, Inc. and Contributors, All Rights Reserved.
+
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+
+  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+  ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+(function (root, factory) {
+    'use strict';
+
+    // Universal Module Definition (UMD) to support AMD, CommonJS/Node.js,
+    // Rhino, and plain browser loading.
+
+    /* istanbul ignore next */
+    if (typeof define === 'function' && define.amd) {
+        define(['exports'], factory);
+    } else if (typeof exports !== 'undefined') {
+        factory(exports);
+    } else {
+        factory((root.esprima = {}));
+    }
+}(this, function (exports) {
+    'use strict';
+
+    var Token,
+        TokenName,
+        FnExprTokens,
+        Syntax,
+        PlaceHolders,
+        Messages,
+        Regex,
+        source,
+        strict,
+        index,
+        lineNumber,
+        lineStart,
+        hasLineTerminator,
+        lastIndex,
+        lastLineNumber,
+        lastLineStart,
+        startIndex,
+        startLineNumber,
+        startLineStart,
+        scanning,
+        length,
+        lookahead,
+        state,
+        extra,
+        isBindingElement,
+        isAssignmentTarget,
+        firstCoverInitializedNameError;
+
+    Token = {
+        BooleanLiteral: 1,
+        EOF: 2,
+        Identifier: 3,
+        Keyword: 4,
+        NullLiteral: 5,
+        NumericLiteral: 6,
+        Punctuator: 7,
+        StringLiteral: 8,
+        RegularExpression: 9,
+        Template: 10
+    };
+
+    TokenName = {};
+    TokenName[Token.BooleanLiteral] = 'Boolean';
+    TokenName[Token.EOF] = '<end>';
+    TokenName[Token.Identifier] = 'Identifier';
+    TokenName[Token.Keyword] = 'Keyword';
+    TokenName[Token.NullLiteral] = 'Null';
+    TokenName[Token.NumericLiteral] = 'Numeric';
+    TokenName[Token.Punctuator] = 'Punctuator';
+    TokenName[Token.StringLiteral] = 'String';
+    TokenName[Token.RegularExpression] = 'RegularExpression';
+    TokenName[Token.Template] = 'Template';
+
+    // A function following one of those tokens is an expression.
+    FnExprTokens = ['(', '{', '[', 'in', 'typeof', 'instanceof', 'new',
+                    'return', 'case', 'delete', 'throw', 'void',
+                    // assignment operators
+                    '=', '+=', '-=', '*=', '/=', '%=', '<<=', '>>=', '>>>=',
+                    '&=', '|=', '^=', ',',
+                    // binary/unary operators
+                    '+', '-', '*', '/', '%', '++', '--', '<<', '>>', '>>>', '&',
+                    '|', '^', '!', '~', '&&', '||', '?', ':', '===', '==', '>=',
+                    '<=', '<', '>', '!=', '!=='];
+
+    Syntax = {
+        AssignmentExpression: 'AssignmentExpression',
+        AssignmentPattern: 'AssignmentPattern',
+        ArrayExpression: 'ArrayExpression',
+        ArrayPattern: 'ArrayPattern',
+        ArrowFunctionExpression: 'ArrowFunctionExpression',
+        BlockStatement: 'BlockStatement',
+        BinaryExpression: 'BinaryExpression',
+        BreakStatement: 'BreakStatement',
+        CallExpression: 'CallExpression',
+        CatchClause: 'CatchClause',
+        ClassBody: 'ClassBody',
+        ClassDeclaration: 'ClassDeclaration',
+        ClassExpression: 'ClassExpression',
+        ConditionalExpression: 'ConditionalExpression',
+        ContinueStatement: 'ContinueStatement',
+        DoWhileStatement: 'DoWhileStatement',
+        DebuggerStatement: 'DebuggerStatement',
+        EmptyStatement: 'EmptyStatement',
+        ExportAllDeclaration: 'ExportAllDeclaration',
+        ExportDefaultDeclaration: 'ExportDefaultDeclaration',
+        ExportNamedDeclaration: 'ExportNamedDeclaration',
+        ExportSpecifier: 'ExportSpecifier',
+        ExpressionStatement: 'ExpressionStatement',
+        ForStatement: 'ForStatement',
+        ForOfStatement: 'ForOfStatement',
+        ForInStatement: 'ForInStatement',
+        FunctionDeclaration: 'FunctionDeclaration',
+        FunctionExpression: 'FunctionExpression',
+        Identifier: 'Identifier',
+        IfStatement: 'IfStatement',
+        ImportDeclaration: 'ImportDeclaration',
+        ImportDefaultSpecifier: 'ImportDefaultSpecifier',
+        ImportNamespaceSpecifier: 'ImportNamespaceSpecifier',
+        ImportSpecifier: 'ImportSpecifier',
+        Literal: 'Literal',
+        LabeledStatement: 'LabeledStatement',
+        LogicalExpression: 'LogicalExpression',
+        MemberExpression: 'MemberExpression',
+        MetaProperty: 'MetaProperty',
+        MethodDefinition: 'MethodDefinition',
+        NewExpression: 'NewExpression',
+        ObjectExpression: 'ObjectExpression',
+        ObjectPattern: 'ObjectPattern',
+        Program: 'Program',
+        Property: 'Property',
+        RestElement: 'RestElement',
+        ReturnStatement: 'ReturnStatement',
+        SequenceExpression: 'SequenceExpression',
+        SpreadElement: 'SpreadElement',
+        Super: 'Super',
+        SwitchCase: 'SwitchCase',
+        SwitchStatement: 'SwitchStatement',
+        TaggedTemplateExpression: 'TaggedTemplateExpression',
+        TemplateElement: 'TemplateElement',
+        TemplateLiteral: 'TemplateLiteral',
+        ThisExpression: 'ThisExpression',
+        ThrowStatement: 'ThrowStatement',
+        TryStatement: 'TryStatement',
+        UnaryExpression: 'UnaryExpression',
+        UpdateExpression: 'UpdateExpression',
+        VariableDeclaration: 'VariableDeclaration',
+        VariableDeclarator: 'VariableDeclarator',
+        WhileStatement: 'WhileStatement',
+        WithStatement: 'WithStatement',
+        YieldExpression: 'YieldExpression'
+    };
+
+    PlaceHolders = {
+        ArrowParameterPlaceHolder: 'ArrowParameterPlaceHolder'
+    };
+
+    // Error messages should be identical to V8.
+    Messages = {
+        UnexpectedToken: 'Unexpected token %0',
+        UnexpectedNumber: 'Unexpected number',
+        UnexpectedString: 'Unexpected string',
+        UnexpectedIdentifier: 'Unexpected identifier',
+        UnexpectedReserved: 'Unexpected reserved word',
+        UnexpectedTemplate: 'Unexpected quasi %0',
+        UnexpectedEOS: 'Unexpected end of input',
+        NewlineAfterThrow: 'Illegal newline after throw',
+        InvalidRegExp: 'Invalid regular expression',
+        UnterminatedRegExp: 'Invalid regular expression: missing /',
+        InvalidLHSInAssignment: 'Invalid left-hand side in assignment',
+        InvalidLHSInForIn: 'Invalid left-hand side in for-in',
+        InvalidLHSInForLoop: 'Invalid left-hand side in for-loop',
+        MultipleDefaultsInSwitch: 'More than one default clause in switch statement',
+        NoCatchOrFinally: 'Missing catch or finally after try',
+        UnknownLabel: 'Undefined label \'%0\'',
+        Redeclaration: '%0 \'%1\' has already been declared',
+        IllegalContinue: 'Illegal continue statement',
+        IllegalBreak: 'Illegal break statement',
+        IllegalReturn: 'Illegal return statement',
+        StrictModeWith: 'Strict mode code may not include a with statement',
+        StrictCatchVariable: 'Catch variable may not be eval or arguments in strict mode',
+        StrictVarName: 'Variable name may not be eval or arguments in strict mode',
+        StrictParamName: 'Parameter name eval or arguments is not allowed in strict mode',
+        StrictParamDupe: 'Strict mode function may not have duplicate parameter names',
+        StrictFunctionName: 'Function name may not be eval or arguments in strict mode',
+        StrictOctalLiteral: 'Octal literals are not allowed in strict mode.',
+        StrictDelete: 'Delete of an unqualified identifier in strict mode.',
+        StrictLHSAssignment: 'Assignment to eval or arguments is not allowed in strict mode',
+        StrictLHSPostfix: 'Postfix increment/decrement may not have eval or arguments operand in strict mode',
+        StrictLHSPrefix: 'Prefix increment/decrement may not have eval or arguments operand in strict mode',
+        StrictReservedWord: 'Use of future reserved word in strict mode',
+        TemplateOctalLiteral: 'Octal literals are not allowed in template strings.',
+        ParameterAfterRestParameter: 'Rest parameter must be last formal parameter',
+        DefaultRestParameter: 'Unexpected token =',
+        ObjectPatternAsRestParameter: 'Unexpected token {',
+        DuplicateProtoProperty: 'Duplicate __proto__ fields are not allowed in object literals',
+        ConstructorSpecialMethod: 'Class constructor may not be an accessor',
+        DuplicateConstructor: 'A class may only have one constructor',
+        StaticPrototype: 'Classes may not have static property named prototype',
+        MissingFromClause: 'Unexpected token',
+        NoAsAfterImportNamespace: 'Unexpected token',
+        InvalidModuleSpecifier: 'Unexpected token',
+        IllegalImportDeclaration: 'Unexpected token',
+        IllegalExportDeclaration: 'Unexpected token',
+        DuplicateBinding: 'Duplicate binding %0'
+    };
+
+    // See also tools/generate-unicode-regex.js.
+    Regex = {
+        // ECMAScript 6/Unicode v7.0.0 NonAsciiIdentifierStart:
+        NonAsciiIdentifierStart: /[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B2\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309B-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA7AD\uA7B0\uA7B1\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64\uAB65\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF30-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDE00-\uDE11\uDE13-\uDE2B\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF5D-\uDF61]|\uD805[\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDE00-\uDE2F\uDE44\uDE80-\uDEAA]|\uD806[\uDCA0-\uDCDF\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF98]|\uD809[\uDC00-\uDC6E]|[\uD80C\uD840-\uD868\uD86A-\uD86C][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F]|\uD82C[\uDC00\uDC01]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D]|\uD87E[\uDC00-\uDE1D]/,
+
+        // ECMAScript 6/Unicode v7.0.0 NonAsciiIdentifierPart:
+        NonAsciiIdentifierPart: /[\xAA\xB5\xB7\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u08A0-\u08B2\u08E4-\u0963\u0966-\u096F\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C00-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58\u0C59\u0C60-\u0C63\u0C66-\u0C6F\u0C81-\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D01-\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D57\u0D60-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1369-\u1371\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191E\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19DA\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1AB0-\u1ABD\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1CD0-\u1CD2\u1CD4-\u1CF6\u1CF8\u1CF9\u1D00-\u1DF5\u1DFC-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u200C\u200D\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA69D\uA69F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA7AD\uA7B0\uA7B1\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C4\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uA9E0-\uA9FE\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64\uAB65\uABC0-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE2D\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDDFD\uDE80-\uDE9C\uDEA0-\uDED0\uDEE0\uDF00-\uDF1F\uDF30-\uDF4A\uDF50-\uDF7A\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00-\uDE03\uDE05\uDE06\uDE0C-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE38-\uDE3A\uDE3F\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE6\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48]|\uD804[\uDC00-\uDC46\uDC66-\uDC6F\uDC7F-\uDCBA\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD00-\uDD34\uDD36-\uDD3F\uDD50-\uDD73\uDD76\uDD80-\uDDC4\uDDD0-\uDDDA\uDE00-\uDE11\uDE13-\uDE37\uDEB0-\uDEEA\uDEF0-\uDEF9\uDF01-\uDF03\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3C-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF57\uDF5D-\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC80-\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDB5\uDDB8-\uDDC0\uDE00-\uDE40\uDE44\uDE50-\uDE59\uDE80-\uDEB7\uDEC0-\uDEC9]|\uD806[\uDCA0-\uDCE9\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF98]|\uD809[\uDC00-\uDC6E]|[\uD80C\uD840-\uD868\uD86A-\uD86C][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDED0-\uDEED\uDEF0-\uDEF4\uDF00-\uDF36\uDF40-\uDF43\uDF50-\uDF59\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50-\uDF7E\uDF8F-\uDF9F]|\uD82C[\uDC00\uDC01]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99\uDC9D\uDC9E]|\uD834[\uDD65-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD\uDE42-\uDE44]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD83A[\uDC00-\uDCC4\uDCD0-\uDCD6]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D]|\uD87E[\uDC00-\uDE1D]|\uDB40[\uDD00-\uDDEF]/
+    };
+
+    // Ensure the condition is true, otherwise throw an error.
+    // This is only to have a better contract semantic, i.e. another safety net
+    // to catch a logic error. The condition shall be fulfilled in normal case.
+    // Do NOT use this to enforce a certain condition on any user input.
+
+    function assert(condition, message) {
+        /* istanbul ignore if */
+        if (!condition) {
+            throw new Error('ASSERT: ' + message);
+        }
+    }
+
+    function isDecimalDigit(ch) {
+        return (ch >= 0x30 && ch <= 0x39);   // 0..9
+    }
+
+    function isHexDigit(ch) {
+        return '0123456789abcdefABCDEF'.indexOf(ch) >= 0;
+    }
+
+    function isOctalDigit(ch) {
+        return '01234567'.indexOf(ch) >= 0;
+    }
+
+    function octalToDecimal(ch) {
+        // \0 is not octal escape sequence
+        var octal = (ch !== '0'), code = '01234567'.indexOf(ch);
+
+        if (index < length && isOctalDigit(source[index])) {
+            octal = true;
+            code = code * 8 + '01234567'.indexOf(source[index++]);
+
+            // 3 digits are only allowed when string starts
+            // with 0, 1, 2, 3
+            if ('0123'.indexOf(ch) >= 0 &&
+                    index < length &&
+                    isOctalDigit(source[index])) {
+                code = code * 8 + '01234567'.indexOf(source[index++]);
+            }
+        }
+
+        return {
+            code: code,
+            octal: octal
+        };
+    }
+
+    // ECMA-262 11.2 White Space
+
+    function isWhiteSpace(ch) {
+        return (ch === 0x20) || (ch === 0x09) || (ch === 0x0B) || (ch === 0x0C) || (ch === 0xA0) ||
+            (ch >= 0x1680 && [0x1680, 0x180E, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF].indexOf(ch) >= 0);
+    }
+
+    // ECMA-262 11.3 Line Terminators
+
+    function isLineTerminator(ch) {
+        return (ch === 0x0A) || (ch === 0x0D) || (ch === 0x2028) || (ch === 0x2029);
+    }
+
+    // ECMA-262 11.6 Identifier Names and Identifiers
+
+    function fromCodePoint(cp) {
+        return (cp < 0x10000) ? String.fromCharCode(cp) :
+            String.fromCharCode(0xD800 + ((cp - 0x10000) >> 10)) +
+            String.fromCharCode(0xDC00 + ((cp - 0x10000) & 1023));
+    }
+
+    function isIdentifierStart(ch) {
+        return (ch === 0x24) || (ch === 0x5F) ||  // $ (dollar) and _ (underscore)
+            (ch >= 0x41 && ch <= 0x5A) ||         // A..Z
+            (ch >= 0x61 && ch <= 0x7A) ||         // a..z
+            (ch === 0x5C) ||                      // \ (backslash)
+            ((ch >= 0x80) && Regex.NonAsciiIdentifierStart.test(fromCodePoint(ch)));
+    }
+
+    function isIdentifierPart(ch) {
+        return (ch === 0x24) || (ch === 0x5F) ||  // $ (dollar) and _ (underscore)
+            (ch >= 0x41 && ch <= 0x5A) ||         // A..Z
+            (ch >= 0x61 && ch <= 0x7A) ||         // a..z
+            (ch >= 0x30 && ch <= 0x39) ||         // 0..9
+            (ch === 0x5C) ||                      // \ (backslash)
+            ((ch >= 0x80) && Regex.NonAsciiIdentifierPart.test(fromCodePoint(ch)));
+    }
+
+    // ECMA-262 11.6.2.2 Future Reserved Words
+
+    function isFutureReservedWord(id) {
+        switch (id) {
+        case 'enum':
+        case 'export':
+        case 'import':
+        case 'super':
+            return true;
+        default:
+            return false;
+        }
+    }
+
+    function isStrictModeReservedWord(id) {
+        switch (id) {
+        case 'implements':
+        case 'interface':
+        case 'package':
+        case 'private':
+        case 'protected':
+        case 'public':
+        case 'static':
+        case 'yield':
+        case 'let':
+            return true;
+        default:
+            return false;
+        }
+    }
+
+    function isRestrictedWord(id) {
+        return id === 'eval' || id === 'arguments';
+    }
+
+    // ECMA-262 11.6.2.1 Keywords
+
+    function isKeyword(id) {
+
+        // 'const' is specialized as Keyword in V8.
+        // 'yield' and 'let' are for compatibility with SpiderMonkey and ES.next.
+        // Some others are from future reserved words.
+
+        switch (id.length) {
+        case 2:
+            return (id === 'if') || (id === 'in') || (id === 'do');
+        case 3:
+            return (id === 'var') || (id === 'for') || (id === 'new') ||
+                (id === 'try') || (id === 'let');
+        case 4:
+            return (id === 'this') || (id === 'else') || (id === 'case') ||
+                (id === 'void') || (id === 'with') || (id === 'enum');
+        case 5:
+            return (id === 'while') || (id === 'break') || (id === 'catch') ||
+                (id === 'throw') || (id === 'const') || (id === 'yield') ||
+                (id === 'class') || (id === 'super');
+        case 6:
+            return (id === 'return') || (id === 'typeof') || (id === 'delete') ||
+                (id === 'switch') || (id === 'export') || (id === 'import');
+        case 7:
+            return (id === 'default') || (id === 'finally') || (id === 'extends');
+        case 8:
+            return (id === 'function') || (id === 'continue') || (id === 'debugger');
+        case 10:
+            return (id === 'instanceof');
+        default:
+            return false;
+        }
+    }
+
+    // ECMA-262 11.4 Comments
+
+    function addComment(type, value, start, end, loc) {
+        var comment;
+
+        assert(typeof start === 'number', 'Comment must have valid position');
+
+        state.lastCommentStart = start;
+
+        comment = {
+            type: type,
+            value: value
+        };
+        if (extra.range) {
+            comment.range = [start, end];
+        }
+        if (extra.loc) {
+            comment.loc = loc;
+        }
+        extra.comments.push(comment);
+        if (extra.attachComment) {
+            extra.leadingComments.push(comment);
+            extra.trailingComments.push(comment);
+        }
+    }
+
+    function skipSingleLineComment(offset) {
+        var start, loc, ch, comment;
+
+        start = index - offset;
+        loc = {
+            start: {
+                line: lineNumber,
+                column: index - lineStart - offset
+            }
+        };
+
+        while (index < length) {
+            ch = source.charCodeAt(index);
+            ++index;
+            if (isLineTerminator(ch)) {
+                hasLineTerminator = true;
+                if (extra.comments) {
+                    comment = source.slice(start + offset, index - 1);
+                    loc.end = {
+                        line: lineNumber,
+                        column: index - lineStart - 1
+                    };
+                    addComment('Line', comment, start, index - 1, loc);
+                }
+                if (ch === 13 && source.charCodeAt(index) === 10) {
+                    ++index;
+                }
+                ++lineNumber;
+                lineStart = index;
+                return;
+            }
+        }
+
+        if (extra.comments) {
+            comment = source.slice(start + offset, index);
+            loc.end = {
+                line: lineNumber,
+                column: index - lineStart
+            };
+            addComment('Line', comment, start, index, loc);
+        }
+    }
+
+    function skipMultiLineComment() {
+        var start, loc, ch, comment;
+
+        if (extra.comments) {
+            start = index - 2;
+            loc = {
+                start: {
+                    line: lineNumber,
+                    column: index - lineStart - 2
+                }
+            };
+        }
+
+        while (index < length) {
+            ch = source.charCodeAt(index);
+            if (isLineTerminator(ch)) {
+                if (ch === 0x0D && source.charCodeAt(index + 1) === 0x0A) {
+                    ++index;
+                }
+                hasLineTerminator = true;
+                ++lineNumber;
+                ++index;
+                lineStart = index;
+            } else if (ch === 0x2A) {
+                // Block comment ends with '*/'.
+                if (source.charCodeAt(index + 1) === 0x2F) {
+                    ++index;
+                    ++index;
+                    if (extra.comments) {
+                        comment = source.slice(start + 2, index - 2);
+                        loc.end = {
+                            line: lineNumber,
+                            column: index - lineStart
+                        };
+                        addComment('Block', comment, start, index, loc);
+                    }
+                    return;
+                }
+                ++index;
+            } else {
+                ++index;
+            }
+        }
+
+        // Ran off the end of the file - the whole thing is a comment
+        if (extra.comments) {
+            loc.end = {
+                line: lineNumber,
+                column: index - lineStart
+            };
+            comment = source.slice(start + 2, index);
+            addComment('Block', comment, start, index, loc);
+        }
+        tolerateUnexpectedToken();
+    }
+
+    function skipComment() {
+        var ch, start;
+        hasLineTerminator = false;
+
+        start = (index === 0);
+        while (index < length) {
+            ch = source.charCodeAt(index);
+
+            if (isWhiteSpace(ch)) {
+                ++index;
+            } else if (isLineTerminator(ch)) {
+                hasLineTerminator = true;
+                ++index;
+                if (ch === 0x0D && source.charCodeAt(index) === 0x0A) {
+                    ++index;
+                }
+                ++lineNumber;
+                lineStart = index;
+                start = true;
+            } else if (ch === 0x2F) { // U+002F is '/'
+                ch = source.charCodeAt(index + 1);
+                if (ch === 0x2F) {
+                    ++index;
+                    ++index;
+                    skipSingleLineComment(2);
+                    start = true;
+                } else if (ch === 0x2A) {  // U+002A is '*'
+                    ++index;
+                    ++index;
+                    skipMultiLineComment();
+                } else {
+                    break;
+                }
+            } else if (start && ch === 0x2D) { // U+002D is '-'
+                // U+003E is '>'
+                if ((source.charCodeAt(index + 1) === 0x2D) && (source.charCodeAt(index + 2) === 0x3E)) {
+                    // '-->' is a single-line comment
+                    index += 3;
+                    skipSingleLineComment(3);
+                } else {
+                    break;
+                }
+            } else if (ch === 0x3C) { // U+003C is '<'
+                if (source.slice(index + 1, index + 4) === '!--') {
+                    ++index; // `<`
+                    ++index; // `!`
+                    ++index; // `-`
+                    ++index; // `-`
+                    skipSingleLineComment(4);
+                } else {
+                    break;
+                }
+            } else {
+                break;
+            }
+        }
+    }
+
+    function scanHexEscape(prefix) {
+        var i, len, ch, code = 0;
+
+        len = (prefix === 'u') ? 4 : 2;
+        for (i = 0; i < len; ++i) {
+            if (index < length && isHexDigit(source[index])) {
+                ch = source[index++];
+                code = code * 16 + '0123456789abcdef'.indexOf(ch.toLowerCase());
+            } else {
+                return '';
+            }
+        }
+        return String.fromCharCode(code);
+    }
+
+    function scanUnicodeCodePointEscape() {
+        var ch, code;
+
+        ch = source[index];
+        code = 0;
+
+        // At least, one hex digit is required.
+        if (ch === '}') {
+            throwUnexpectedToken();
+        }
+
+        while (index < length) {
+            ch = source[index++];
+            if (!isHexDigit(ch)) {
+                break;
+            }
+            code = code * 16 + '0123456789abcdef'.indexOf(ch.toLowerCase());
+        }
+
+        if (code > 0x10FFFF || ch !== '}') {
+            throwUnexpectedToken();
+        }
+
+        return fromCodePoint(code);
+    }
+
+    function codePointAt(i) {
+        var cp, first, second;
+
+        cp = source.charCodeAt(i);
+        if (cp >= 0xD800 && cp <= 0xDBFF) {
+            second = source.charCodeAt(i + 1);
+            if (second >= 0xDC00 && second <= 0xDFFF) {
+                first = cp;
+                cp = (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
+            }
+        }
+
+        return cp;
+    }
+
+    function getComplexIdentifier() {
+        var cp, ch, id;
+
+        cp = codePointAt(index);
+        id = fromCodePoint(cp);
+        index += id.length;
+
+        // '\u' (U+005C, U+0075) denotes an escaped character.
+        if (cp === 0x5C) {
+            if (source.charCodeAt(index) !== 0x75) {
+                throwUnexpectedToken();
+            }
+            ++index;
+            if (source[index] === '{') {
+                ++index;
+                ch = scanUnicodeCodePointEscape();
+            } else {
+                ch = scanHexEscape('u');
+                cp = ch.charCodeAt(0);
+                if (!ch || ch === '\\' || !isIdentifierStart(cp)) {
+                    throwUnexpectedToken();
+                }
+            }
+            id = ch;
+        }
+
+        while (index < length) {
+            cp = codePointAt(index);
+            if (!isIdentifierPart(cp)) {
+                break;
+            }
+            ch = fromCodePoint(cp);
+            id += ch;
+            index += ch.length;
+
+            // '\u' (U+005C, U+0075) denotes an escaped character.
+            if (cp === 0x5C) {
+                id = id.substr(0, id.length - 1);
+                if (source.charCodeAt(index) !== 0x75) {
+                    throwUnexpectedToken();
+                }
+                ++index;
+                if (source[index] === '{') {
+                    ++index;
+                    ch = scanUnicodeCodePointEscape();
+                } else {
+                    ch = scanHexEscape('u');
+                    cp = ch.charCodeAt(0);
+                    if (!ch || ch === '\\' || !isIdentifierPart(cp)) {
+                        throwUnexpectedToken();
+                    }
+                }
+                id += ch;
+            }
+        }
+
+        return id;
+    }
+
+    function getIdentifier() {
+        var start, ch;
+
+        start = index++;
+        while (index < length) {
+            ch = source.charCodeAt(index);
+            if (ch === 0x5C) {
+                // Blackslash (U+005C) marks Unicode escape sequence.
+                index = start;
+                return getComplexIdentifier();
+            } else if (ch >= 0xD800 && ch < 0xDFFF) {
+                // Need to handle surrogate pairs.
+                index = start;
+                return getComplexIdentifier();
+            }
+            if (isIdentifierPart(ch)) {
+                ++index;
+            } else {
+                break;
+            }
+        }
+
+        return source.slice(start, index);
+    }
+
+    function scanIdentifier() {
+        var start, id, type;
+
+        start = index;
+
+        // Backslash (U+005C) starts an escaped character.
+        id = (source.charCodeAt(index) === 0x5C) ? getComplexIdentifier() : getIdentifier();
+
+        // There is no keyword or literal with only one character.
+        // Thus, it must be an identifier.
+        if (id.length === 1) {
+            type = Token.Identifier;
+        } else if (isKeyword(id)) {
+            type = Token.Keyword;
+        } else if (id === 'null') {
+            type = Token.NullLiteral;
+        } else if (id === 'true' || id === 'false') {
+            type = Token.BooleanLiteral;
+        } else {
+            type = Token.Identifier;
+        }
+
+        return {
+            type: type,
+            value: id,
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+
+    // ECMA-262 11.7 Punctuators
+
+    function scanPunctuator() {
+        var token, str;
+
+        token = {
+            type: Token.Punctuator,
+            value: '',
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: index,
+            end: index
+        };
+
+        // Check for most common single-character punctuators.
+        str = source[index];
+        switch (str) {
+
+        case '(':
+            if (extra.tokenize) {
+                extra.openParenToken = extra.tokens.length;
+            }
+            ++index;
+            break;
+
+        case '{':
+            if (extra.tokenize) {
+                extra.openCurlyToken = extra.tokens.length;
+            }
+            state.curlyStack.push('{');
+            ++index;
+            break;
+
+        case '.':
+            ++index;
+            if (source[index] === '.' && source[index + 1] === '.') {
+                // Spread operator: ...
+                index += 2;
+                str = '...';
+            }
+            break;
+
+        case '}':
+            ++index;
+            state.curlyStack.pop();
+            break;
+        case ')':
+        case ';':
+        case ',':
+        case '[':
+        case ']':
+        case ':':
+        case '?':
+        case '~':
+            ++index;
+            break;
+
+        default:
+            // 4-character punctuator.
+            str = source.substr(index, 4);
+            if (str === '>>>=') {
+                index += 4;
+            } else {
+
+                // 3-character punctuators.
+                str = str.substr(0, 3);
+                if (str === '===' || str === '!==' || str === '>>>' ||
+                    str === '<<=' || str === '>>=') {
+                    index += 3;
+                } else {
+
+                    // 2-character punctuators.
+                    str = str.substr(0, 2);
+                    if (str === '&&' || str === '||' || str === '==' || str === '!=' ||
+                        str === '+=' || str === '-=' || str === '*=' || str === '/=' ||
+                        str === '++' || str === '--' || str === '<<' || str === '>>' ||
+                        str === '&=' || str === '|=' || str === '^=' || str === '%=' ||
+                        str === '<=' || str === '>=' || str === '=>') {
+                        index += 2;
+                    } else {
+
+                        // 1-character punctuators.
+                        str = source[index];
+                        if ('<>=!+-*%&|^/'.indexOf(str) >= 0) {
+                            ++index;
+                        }
+                    }
+                }
+            }
+        }
+
+        if (index === token.start) {
+            throwUnexpectedToken();
+        }
+
+        token.end = index;
+        token.value = str;
+        return token;
+    }
+
+    // ECMA-262 11.8.3 Numeric Literals
+
+    function scanHexLiteral(start) {
+        var number = '';
+
+        while (index < length) {
+            if (!isHexDigit(source[index])) {
+                break;
+            }
+            number += source[index++];
+        }
+
+        if (number.length === 0) {
+            throwUnexpectedToken();
+        }
+
+        if (isIdentifierStart(source.charCodeAt(index))) {
+            throwUnexpectedToken();
+        }
+
+        return {
+            type: Token.NumericLiteral,
+            value: parseInt('0x' + number, 16),
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    function scanBinaryLiteral(start) {
+        var ch, number;
+
+        number = '';
+
+        while (index < length) {
+            ch = source[index];
+            if (ch !== '0' && ch !== '1') {
+                break;
+            }
+            number += source[index++];
+        }
+
+        if (number.length === 0) {
+            // only 0b or 0B
+            throwUnexpectedToken();
+        }
+
+        if (index < length) {
+            ch = source.charCodeAt(index);
+            /* istanbul ignore else */
+            if (isIdentifierStart(ch) || isDecimalDigit(ch)) {
+                throwUnexpectedToken();
+            }
+        }
+
+        return {
+            type: Token.NumericLiteral,
+            value: parseInt(number, 2),
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    function scanOctalLiteral(prefix, start) {
+        var number, octal;
+
+        if (isOctalDigit(prefix)) {
+            octal = true;
+            number = '0' + source[index++];
+        } else {
+            octal = false;
+            ++index;
+            number = '';
+        }
+
+        while (index < length) {
+            if (!isOctalDigit(source[index])) {
+                break;
+            }
+            number += source[index++];
+        }
+
+        if (!octal && number.length === 0) {
+            // only 0o or 0O
+            throwUnexpectedToken();
+        }
+
+        if (isIdentifierStart(source.charCodeAt(index)) || isDecimalDigit(source.charCodeAt(index))) {
+            throwUnexpectedToken();
+        }
+
+        return {
+            type: Token.NumericLiteral,
+            value: parseInt(number, 8),
+            octal: octal,
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    function isImplicitOctalLiteral() {
+        var i, ch;
+
+        // Implicit octal, unless there is a non-octal digit.
+        // (Annex B.1.1 on Numeric Literals)
+        for (i = index + 1; i < length; ++i) {
+            ch = source[i];
+            if (ch === '8' || ch === '9') {
+                return false;
+            }
+            if (!isOctalDigit(ch)) {
+                return true;
+            }
+        }
+
+        return true;
+    }
+
+    function scanNumericLiteral() {
+        var number, start, ch;
+
+        ch = source[index];
+        assert(isDecimalDigit(ch.charCodeAt(0)) || (ch === '.'),
+            'Numeric literal must start with a decimal digit or a decimal point');
+
+        start = index;
+        number = '';
+        if (ch !== '.') {
+            number = source[index++];
+            ch = source[index];
+
+            // Hex number starts with '0x'.
+            // Octal number starts with '0'.
+            // Octal number in ES6 starts with '0o'.
+            // Binary number in ES6 starts with '0b'.
+            if (number === '0') {
+                if (ch === 'x' || ch === 'X') {
+                    ++index;
+                    return scanHexLiteral(start);
+                }
+                if (ch === 'b' || ch === 'B') {
+                    ++index;
+                    return scanBinaryLiteral(start);
+                }
+                if (ch === 'o' || ch === 'O') {
+                    return scanOctalLiteral(ch, start);
+                }
+
+                if (isOctalDigit(ch)) {
+                    if (isImplicitOctalLiteral()) {
+                        return scanOctalLiteral(ch, start);
+                    }
+                }
+            }
+
+            while (isDecimalDigit(source.charCodeAt(index))) {
+                number += source[index++];
+            }
+            ch = source[index];
+        }
+
+        if (ch === '.') {
+            number += source[index++];
+            while (isDecimalDigit(source.charCodeAt(index))) {
+                number += source[index++];
+            }
+            ch = source[index];
+        }
+
+        if (ch === 'e' || ch === 'E') {
+            number += source[index++];
+
+            ch = source[index];
+            if (ch === '+' || ch === '-') {
+                number += source[index++];
+            }
+            if (isDecimalDigit(source.charCodeAt(index))) {
+                while (isDecimalDigit(source.charCodeAt(index))) {
+                    number += source[index++];
+                }
+            } else {
+                throwUnexpectedToken();
+            }
+        }
+
+        if (isIdentifierStart(source.charCodeAt(index))) {
+            throwUnexpectedToken();
+        }
+
+        return {
+            type: Token.NumericLiteral,
+            value: parseFloat(number),
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    // ECMA-262 11.8.4 String Literals
+
+    function scanStringLiteral() {
+        var str = '', quote, start, ch, unescaped, octToDec, octal = false;
+
+        quote = source[index];
+        assert((quote === '\'' || quote === '"'),
+            'String literal must starts with a quote');
+
+        start = index;
+        ++index;
+
+        while (index < length) {
+            ch = source[index++];
+
+            if (ch === quote) {
+                quote = '';
+                break;
+            } else if (ch === '\\') {
+                ch = source[index++];
+                if (!ch || !isLineTerminator(ch.charCodeAt(0))) {
+                    switch (ch) {
+                    case 'u':
+                    case 'x':
+                        if (source[index] === '{') {
+                            ++index;
+                            str += scanUnicodeCodePointEscape();
+                        } else {
+                            unescaped = scanHexEscape(ch);
+                            if (!unescaped) {
+                                throw throwUnexpectedToken();
+                            }
+                            str += unescaped;
+                        }
+                        break;
+                    case 'n':
+                        str += '\n';
+                        break;
+                    case 'r':
+                        str += '\r';
+                        break;
+                    case 't':
+                        str += '\t';
+                        break;
+                    case 'b':
+                        str += '\b';
+                        break;
+                    case 'f':
+                        str += '\f';
+                        break;
+                    case 'v':
+                        str += '\x0B';
+                        break;
+                    case '8':
+                    case '9':
+                        str += ch;
+                        tolerateUnexpectedToken();
+                        break;
+
+                    default:
+                        if (isOctalDigit(ch)) {
+                            octToDec = octalToDecimal(ch);
+
+                            octal = octToDec.octal || octal;
+                            str += String.fromCharCode(octToDec.code);
+                        } else {
+                            str += ch;
+                        }
+                        break;
+                    }
+                } else {
+                    ++lineNumber;
+                    if (ch === '\r' && source[index] === '\n') {
+                        ++index;
+                    }
+                    lineStart = index;
+                }
+            } else if (isLineTerminator(ch.charCodeAt(0))) {
+                break;
+            } else {
+                str += ch;
+            }
+        }
+
+        if (quote !== '') {
+            throwUnexpectedToken();
+        }
+
+        return {
+            type: Token.StringLiteral,
+            value: str,
+            octal: octal,
+            lineNumber: startLineNumber,
+            lineStart: startLineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    // ECMA-262 11.8.6 Template Literal Lexical Components
+
+    function scanTemplate() {
+        var cooked = '', ch, start, rawOffset, terminated, head, tail, restore, unescaped;
+
+        terminated = false;
+        tail = false;
+        start = index;
+        head = (source[index] === '`');
+        rawOffset = 2;
+
+        ++index;
+
+        while (index < length) {
+            ch = source[index++];
+            if (ch === '`') {
+                rawOffset = 1;
+                tail = true;
+                terminated = true;
+                break;
+            } else if (ch === '$') {
+                if (source[index] === '{') {
+                    state.curlyStack.push('${');
+                    ++index;
+                    terminated = true;
+                    break;
+                }
+                cooked += ch;
+            } else if (ch === '\\') {
+                ch = source[index++];
+                if (!isLineTerminator(ch.charCodeAt(0))) {
+                    switch (ch) {
+                    case 'n':
+                        cooked += '\n';
+                        break;
+                    case 'r':
+                        cooked += '\r';
+                        break;
+                    case 't':
+                        cooked += '\t';
+                        break;
+                    case 'u':
+                    case 'x':
+                        if (source[index] === '{') {
+                            ++index;
+                            cooked += scanUnicodeCodePointEscape();
+                        } else {
+                            restore = index;
+                            unescaped = scanHexEscape(ch);
+                            if (unescaped) {
+                                cooked += unescaped;
+                            } else {
+                                index = restore;
+                                cooked += ch;
+                            }
+                        }
+                        break;
+                    case 'b':
+                        cooked += '\b';
+                        break;
+                    case 'f':
+                        cooked += '\f';
+                        break;
+                    case 'v':
+                        cooked += '\v';
+                        break;
+
+                    default:
+                        if (ch === '0') {
+                            if (isDecimalDigit(source.charCodeAt(index))) {
+                                // Illegal: \01 \02 and so on
+                                throwError(Messages.TemplateOctalLiteral);
+                            }
+                            cooked += '\0';
+                        } else if (isOctalDigit(ch)) {
+                            // Illegal: \1 \2
+                            throwError(Messages.TemplateOctalLiteral);
+                        } else {
+                            cooked += ch;
+                        }
+                        break;
+                    }
+                } else {
+                    ++lineNumber;
+                    if (ch === '\r' && source[index] === '\n') {
+                        ++index;
+                    }
+                    lineStart = index;
+                }
+            } else if (isLineTerminator(ch.charCodeAt(0))) {
+                ++lineNumber;
+                if (ch === '\r' && source[index] === '\n') {
+                    ++index;
+                }
+                lineStart = index;
+                cooked += '\n';
+            } else {
+                cooked += ch;
+            }
+        }
+
+        if (!terminated) {
+            throwUnexpectedToken();
+        }
+
+        if (!head) {
+            state.curlyStack.pop();
+        }
+
+        return {
+            type: Token.Template,
+            value: {
+                cooked: cooked,
+                raw: source.slice(start + 1, index - rawOffset)
+            },
+            head: head,
+            tail: tail,
+            lineNumber: lineNumber,
+            lineStart: lineStart,
+            start: start,
+            end: index
+        };
+    }
+
+    // ECMA-262 11.8.5 Regular Expression Literals
+
+    function testRegExp(pattern, flags) {
+        // The BMP character to use as a replacement for astral symbols when
+        // translating an ES6 "u"-flagged pattern to an ES5-compatible
+        // approximation.
+        // Note: replacing with '\uFFFF' enables false positives in unlikely
+        // scenarios. For example, `[\u{1044f}-\u{10440}]` is an invalid
+        // pattern that would not be detected by this substitution.
+        var astralSubstitute = '\uFFFF',
+            tmp = pattern;
+
+        if (flags.indexOf('u') >= 0) {
+            tmp = tmp
+                // Replace every Unicode escape sequence with the equivalent
+                // BMP character or a constant ASCII code point in the case of
+                // astral symbols. (See the above note on `astralSubstitute`
+                // for more information.)
+                .replace(/\\u\{([0-9a-fA-F]+)\}|\\u([a-fA-F0-9]{4})/g, function ($0, $1, $2) {
+                    var codePoint = parseInt($1 || $2, 16);
+                    if (codePoint > 0x10FFFF) {
+                        throwUnexpectedToken(null, Messages.InvalidRegExp);
+                    }
+                    if (codePoint <= 0xFFFF) {
+                        return String.fromCharCode(codePoint);
+                    }
+                    return astralSubstitute;
+                })
+                // Replace each paired surrogate with a single ASCII symbol to
+                // avoid throwing on regular expressions that are only valid in
+                // combination with the "u" flag.
+                .replace(
+                    /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+                    astralSubstitute
+                );
+        }
+
+        // First, detect invalid regular expressions.
+        try {
+            RegExp(tmp);
+        } catch (e) {
+            throwUnexpectedToken(null, Messages.InvalidRegExp);
+        }
+
+        // Return a regular expression object for this pattern-flag pair, or
+        // `null` in case the current environment doesn't support the flags it
+        // uses.
+        try {
+            return new RegExp(pattern, flags);
+        } catch (exception) {
+            return null;
+        }
+    }
+
+    function scanRegExpBody() {
+        var ch, str, classMarker, terminated, body;
+
+        ch = source[index];
+        assert(ch === '/', 'Regular expression literal must start with a slash');
+        str = source[index++];
+
+        classMarker = false;
+        terminated = false;
+        while (index < length) {
+            ch = source[index++];
+            str += ch;
+            if (ch === '\\') {
+                ch = source[index++];
+                // ECMA-262 7.8.5
+                if (isLineTerminator(ch.charCodeAt(0))) {
+                    throwUnexpectedToken(null, Messages.UnterminatedRegExp);
+                }
+                str += ch;
+            } else if (isLineTerminator(ch.charCodeAt(0))) {
+                throwUnexpectedToken(null, Messages.UnterminatedRegExp);
+            } else if (classMarker) {
+                if (ch === ']') {
+                    classMarker = false;
+                }
+            } else {
+                if (ch === '/') {
+                    terminated = true;
+                    break;
+                } else if (ch === '[') {
+                    classMarker = true;
+                }
+            }
+        }
+
+        if (!terminated) {
+            throwUnexpectedToken(null, Messages.UnterminatedRegExp);
+        }
+
+        // Exclude leading and trailing slash.
+        body = str.substr(1, str.length - 2);
+        return {
+            value: body,
+            literal: str
+        };
+    }
+
+    function scanRegExpFlags() {
+        var ch, str, flags, restore;
+
+        str = '';
+        flags = '';
+        while (index < length) {
+            ch = source[index];
+            if (!isIdentifierPart(ch.charCodeAt(0))) {
+                break;
+            }
+
+            ++index;
+            if (ch === '\\' && index < length) {
+                ch = source[index];
+                if (ch === 'u') {
+                    ++index;
+                    restore = index;
+                    ch = scanHexEscape('u');
+                    if (ch) {
+                        flags += ch;
+                        for (str += '\\u'; restore < index; ++restore) {
+                            str += source[restore];
+                        }
+                    } else {
+                        index = restore;
+                        flags += 'u';
+                        str += '\\u';
+                    }
+                    tolerateUnexpectedToken();
+                } else {
+                    str += '\\';
+                    tolerateUnexpectedToken();
+                }
+            } else {
+                flags += ch;
+                str += ch;
+            }
+        }
+
+        return {
+            value: flags,
+            literal: str
+        };
+    }
+
+    function scanRegExp() {
+        var start, body, flags, value;
+        scanning = true;
+
+        lookahead = null;
+        skipComment();
+        start = index;
+
+        body = scanRegExpBody();
+        flags = scanRegExpFlags();
+        value = testRegExp(body.value, flags.value);
+        scanning = false;
+        if (extra.tokenize) {
+            return {
+                type: Token.RegularExpression,
+                value: value,
+                regex: {
+                    pattern: body.value,
+                    flags: flags.value
+                },
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: start,
+                end: index
+            };
+        }
+
+        return {
+            literal: body.literal + flags.literal,
+            value: value,
+            regex: {
+                pattern: body.value,
+                flags: flags.value
+            },
+            start: start,
+            end: index
+        };
+    }
+
+    function collectRegex() {
+        var pos, loc, regex, token;
+
+        skipComment();
+
+        pos = index;
+        loc = {
+            start: {
+                line: lineNumber,
+                column: index - lineStart
+            }
+        };
+
+        regex = scanRegExp();
+
+        loc.end = {
+            line: lineNumber,
+            column: index - lineStart
+        };
+
+        /* istanbul ignore next */
+        if (!extra.tokenize) {
+            // Pop the previous token, which is likely '/' or '/='
+            if (extra.tokens.length > 0) {
+                token = extra.tokens[extra.tokens.length - 1];
+                if (token.range[0] === pos && token.type === 'Punctuator') {
+                    if (token.value === '/' || token.value === '/=') {
+                        extra.tokens.pop();
+                    }
+                }
+            }
+
+            extra.tokens.push({
+                type: 'RegularExpression',
+                value: regex.literal,
+                regex: regex.regex,
+                range: [pos, index],
+                loc: loc
+            });
+        }
+
+        return regex;
+    }
+
+    function isIdentifierName(token) {
+        return token.type === Token.Identifier ||
+            token.type === Token.Keyword ||
+            token.type === Token.BooleanLiteral ||
+            token.type === Token.NullLiteral;
+    }
+
+    function advanceSlash() {
+        var prevToken,
+            checkToken;
+        // Using the following algorithm:
+        // https://github.com/mozilla/sweet.js/wiki/design
+        prevToken = extra.tokens[extra.tokens.length - 1];
+        if (!prevToken) {
+            // Nothing before that: it cannot be a division.
+            return collectRegex();
+        }
+        if (prevToken.type === 'Punctuator') {
+            if (prevToken.value === ']') {
+                return scanPunctuator();
+            }
+            if (prevToken.value === ')') {
+                checkToken = extra.tokens[extra.openParenToken - 1];
+                if (checkToken &&
+                        checkToken.type === 'Keyword' &&
+                        (checkToken.value === 'if' ||
+                         checkToken.value === 'while' ||
+                         checkToken.value === 'for' ||
+                         checkToken.value === 'with')) {
+                    return collectRegex();
+                }
+                return scanPunctuator();
+            }
+            if (prevToken.value === '}') {
+                // Dividing a function by anything makes little sense,
+                // but we have to check for that.
+                if (extra.tokens[extra.openCurlyToken - 3] &&
+                        extra.tokens[extra.openCurlyToken - 3].type === 'Keyword') {
+                    // Anonymous function.
+                    checkToken = extra.tokens[extra.openCurlyToken - 4];
+                    if (!checkToken) {
+                        return scanPunctuator();
+                    }
+                } else if (extra.tokens[extra.openCurlyToken - 4] &&
+                        extra.tokens[extra.openCurlyToken - 4].type === 'Keyword') {
+                    // Named function.
+                    checkToken = extra.tokens[extra.openCurlyToken - 5];
+                    if (!checkToken) {
+                        return collectRegex();
+                    }
+                } else {
+                    return scanPunctuator();
+                }
+                // checkToken determines whether the function is
+                // a declaration or an expression.
+                if (FnExprTokens.indexOf(checkToken.value) >= 0) {
+                    // It is an expression.
+                    return scanPunctuator();
+                }
+                // It is a declaration.
+                return collectRegex();
+            }
+            return collectRegex();
+        }
+        if (prevToken.type === 'Keyword' && prevToken.value !== 'this') {
+            return collectRegex();
+        }
+        return scanPunctuator();
+    }
+
+    function advance() {
+        var cp, token;
+
+        if (index >= length) {
+            return {
+                type: Token.EOF,
+                lineNumber: lineNumber,
+                lineStart: lineStart,
+                start: index,
+                end: index
+            };
+        }
+
+        cp = source.charCodeAt(index);
+
+        if (isIdentifierStart(cp)) {
+            token = scanIdentifier();
+            if (strict && isStrictModeReservedWord(token.value)) {
+                token.type = Token.Keyword;
+            }
+            return token;
+        }
+
+        // Very common: ( and ) and ;
+        if (cp === 0x28 || cp === 0x29 || cp === 0x3B) {
+            return scanPunctuator();
+        }
+
+        // String literal starts with single quote (U+0027) or double quote (U+0022).
+        if (cp === 0x27 || cp === 0x22) {
+            return scanStringLiteral();
+        }
+
+        // Dot (.) U+002E can also start a floating-point number, hence the need
+        // to check the next character.
+        if (cp === 0x2E) {
+            if (isDecimalDigit(source.charCodeAt(index + 1))) {
+                return scanNumericLiteral();
+            }
+            return scanPunctuator();
+        }
+
+        if (isDecimalDigit(cp)) {
+            return scanNumericLiteral();
+        }
+
+        // Slash (/) U+002F can also start a regex.
+        if (extra.tokenize && cp === 0x2F) {
+            return advanceSlash();
+        }
+
+        // Template literals start with ` (U+0060) for template head
+        // or } (U+007D) for template middle or template tail.
+        if (cp === 0x60 || (cp === 0x7D && state.curlyStack[state.curlyStack.length - 1] === '${')) {
+            return scanTemplate();
+        }
+
+        // Possible identifier start in a surrogate pair.
+        if (cp >= 0xD800 && cp < 0xDFFF) {
+            cp = codePointAt(index);
+            if (isIdentifierStart(cp)) {
+                return scanIdentifier();
+            }
+        }
+
+        return scanPunctuator();
+    }
+
+    function collectToken() {
+        var loc, token, value, entry;
+
+        loc = {
+            start: {
+                line: lineNumber,
+                column: index - lineStart
+            }
+        };
+
+        token = advance();
+        loc.end = {
+            line: lineNumber,
+            column: index - lineStart
+        };
+
+        if (token.type !== Token.EOF) {
+            value = source.slice(token.start, token.end);
+            entry = {
+                type: TokenName[token.type],
+                value: value,
+                range: [token.start, token.end],
+                loc: loc
+            };
+            if (token.regex) {
+                entry.regex = {
+                    pattern: token.regex.pattern,
+                    flags: token.regex.flags
+                };
+            }
+            extra.tokens.push(entry);
+        }
+
+        return token;
+    }
+
+    function lex() {
+        var token;
+        scanning = true;
+
+        lastIndex = index;
+        lastLineNumber = lineNumber;
+        lastLineStart = lineStart;
+
+        skipComment();
+
+        token = lookahead;
+
+        startIndex = index;
+        startLineNumber = lineNumber;
+        startLineStart = lineStart;
+
+        lookahead = (typeof extra.tokens !== 'undefined') ? collectToken() : advance();
+        scanning = false;
+        return token;
+    }
+
+    function peek() {
+        scanning = true;
+
+        skipComment();
+
+        lastIndex = index;
+        lastLineNumber = lineNumber;
+        lastLineStart = lineStart;
+
+        startIndex = index;
+        startLineNumber = lineNumber;
+        startLineStart = lineStart;
+
+        lookahead = (typeof extra.tokens !== 'undefined') ? collectToken() : advance();
+        scanning = false;
+    }
+
+    function Position() {
+        this.line = startLineNumber;
+        this.column = startIndex - startLineStart;
+    }
+
+    function SourceLocation() {
+        this.start = new Position();
+        this.end = null;
+    }
+
+    function WrappingSourceLocation(startToken) {
+        this.start = {
+            line: startToken.lineNumber,
+            column: startToken.start - startToken.lineStart
+        };
+        this.end = null;
+    }
+
+    function Node() {
+        if (extra.range) {
+            this.range = [startIndex, 0];
+        }
+        if (extra.loc) {
+            this.loc = new SourceLocation();
+        }
+    }
+
+    function WrappingNode(startToken) {
+        if (extra.range) {
+            this.range = [startToken.start, 0];
+        }
+        if (extra.loc) {
+            this.loc = new WrappingSourceLocation(startToken);
+        }
+    }
+
+    WrappingNode.prototype = Node.prototype = {
+
+        processComment: function () {
+            var lastChild,
+                leadingComments,
+                trailingComments,
+                bottomRight = extra.bottomRightStack,
+                i,
+                comment,
+                last = bottomRight[bottomRight.length - 1];
+
+            if (this.type === Syntax.Program) {
+                if (this.body.length > 0) {
+                    return;
+                }
+            }
+
+            if (extra.trailingComments.length > 0) {
+                trailingComments = [];
+                for (i = extra.trailingComments.length - 1; i >= 0; --i) {
+                    comment = extra.trailingComments[i];
+                    if (comment.range[0] >= this.range[1]) {
+                        trailingComments.unshift(comment);
+                        extra.trailingComments.splice(i, 1);
+                    }
+                }
+                extra.trailingComments = [];
+            } else {
+                if (last && last.trailingComments && last.trailingComments[0].range[0] >= this.range[1]) {
+                    trailingComments = last.trailingComments;
+                    delete last.trailingComments;
+                }
+            }
+
+            // Eating the stack.
+            while (last && last.range[0] >= this.range[0]) {
+                lastChild = bottomRight.pop();
+                last = bottomRight[bottomRight.length - 1];
+            }
+
+            if (lastChild) {
+                if (lastChild.leadingComments) {
+                    leadingComments = [];
+                    for (i = lastChild.leadingComments.length - 1; i >= 0; --i) {
+                        comment = lastChild.leadingComments[i];
+                        if (comment.range[1] <= this.range[0]) {
+                            leadingComments.unshift(comment);
+                            lastChild.leadingComments.splice(i, 1);
+                        }
+                    }
+
+                    if (!lastChild.leadingComments.length) {
+                        lastChild.leadingComments = undefined;
+                    }
+                }
+            } else if (extra.leadingComments.length > 0) {
+                leadingComments = [];
+                for (i = extra.leadingComments.length - 1; i >= 0; --i) {
+                    comment = extra.leadingComments[i];
+                    if (comment.range[1] <= this.range[0]) {
+                        leadingComments.unshift(comment);
+                        extra.leadingComments.splice(i, 1);
+                    }
+                }
+            }
+
+
+            if (leadingComments && leadingComments.length > 0) {
+                this.leadingComments = leadingComments;
+            }
+            if (trailingComments && trailingComments.length > 0) {
+                this.trailingComments = trailingComments;
+            }
+
+            bottomRight.push(this);
+        },
+
+        finish: function () {
+            if (extra.range) {
+                this.range[1] = lastIndex;
+            }
+            if (extra.loc) {
+                this.loc.end = {
+                    line: lastLineNumber,
+                    column: lastIndex - lastLineStart
+                };
+                if (extra.source) {
+                    this.loc.source = extra.source;
+                }
+            }
+
+            if (extra.attachComment) {
+                this.processComment();
+            }
+        },
+
+        finishArrayExpression: function (elements) {
+            this.type = Syntax.ArrayExpression;
+            this.elements = elements;
+            this.finish();
+            return this;
+        },
+
+        finishArrayPattern: function (elements) {
+            this.type = Syntax.ArrayPattern;
+            this.elements = elements;
+            this.finish();
+            return this;
+        },
+
+        finishArrowFunctionExpression: function (params, defaults, body, expression) {
+            this.type = Syntax.ArrowFunctionExpression;
+            this.id = null;
+            this.params = params;
+            this.defaults = defaults;
+            this.body = body;
+            this.generator = false;
+            this.expression = expression;
+            this.finish();
+            return this;
+        },
+
+        finishAssignmentExpression: function (operator, left, right) {
+            this.type = Syntax.AssignmentExpression;
+            this.operator = operator;
+            this.left = left;
+            this.right = right;
+            this.finish();
+            return this;
+        },
+
+        finishAssignmentPattern: function (left, right) {
+            this.type = Syntax.AssignmentPattern;
+            this.left = left;
+            this.right = right;
+            this.finish();
+            return this;
+        },
+
+        finishBinaryExpression: function (operator, left, right) {
+            this.type = (operator === '||' || operator === '&&') ? Syntax.LogicalExpression : Syntax.BinaryExpression;
+            this.operator = operator;
+            this.left = left;
+            this.right = right;
+            this.finish();
+            return this;
+        },
+
+        finishBlockStatement: function (body) {
+            this.type = Syntax.BlockStatement;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishBreakStatement: function (label) {
+            this.type = Syntax.BreakStatement;
+            this.label = label;
+            this.finish();
+            return this;
+        },
+
+        finishCallExpression: function (callee, args) {
+            this.type = Syntax.CallExpression;
+            this.callee = callee;
+            this.arguments = args;
+            this.finish();
+            return this;
+        },
+
+        finishCatchClause: function (param, body) {
+            this.type = Syntax.CatchClause;
+            this.param = param;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishClassBody: function (body) {
+            this.type = Syntax.ClassBody;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishClassDeclaration: function (id, superClass, body) {
+            this.type = Syntax.ClassDeclaration;
+            this.id = id;
+            this.superClass = superClass;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishClassExpression: function (id, superClass, body) {
+            this.type = Syntax.ClassExpression;
+            this.id = id;
+            this.superClass = superClass;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishConditionalExpression: function (test, consequent, alternate) {
+            this.type = Syntax.ConditionalExpression;
+            this.test = test;
+            this.consequent = consequent;
+            this.alternate = alternate;
+            this.finish();
+            return this;
+        },
+
+        finishContinueStatement: function (label) {
+            this.type = Syntax.ContinueStatement;
+            this.label = label;
+            this.finish();
+            return this;
+        },
+
+        finishDebuggerStatement: function () {
+            this.type = Syntax.DebuggerStatement;
+            this.finish();
+            return this;
+        },
+
+        finishDoWhileStatement: function (body, test) {
+            this.type = Syntax.DoWhileStatement;
+            this.body = body;
+            this.test = test;
+            this.finish();
+            return this;
+        },
+
+        finishEmptyStatement: function () {
+            this.type = Syntax.EmptyStatement;
+            this.finish();
+            return this;
+        },
+
+        finishExpressionStatement: function (expression) {
+            this.type = Syntax.ExpressionStatement;
+            this.expression = expression;
+            this.finish();
+            return this;
+        },
+
+        finishForStatement: function (init, test, update, body) {
+            this.type = Syntax.ForStatement;
+            this.init = init;
+            this.test = test;
+            this.update = update;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishForOfStatement: function (left, right, body) {
+            this.type = Syntax.ForOfStatement;
+            this.left = left;
+            this.right = right;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishForInStatement: function (left, right, body) {
+            this.type = Syntax.ForInStatement;
+            this.left = left;
+            this.right = right;
+            this.body = body;
+            this.each = false;
+            this.finish();
+            return this;
+        },
+
+        finishFunctionDeclaration: function (id, params, defaults, body, generator) {
+            this.type = Syntax.FunctionDeclaration;
+            this.id = id;
+            this.params = params;
+            this.defaults = defaults;
+            this.body = body;
+            this.generator = generator;
+            this.expression = false;
+            this.finish();
+            return this;
+        },
+
+        finishFunctionExpression: function (id, params, defaults, body, generator) {
+            this.type = Syntax.FunctionExpression;
+            this.id = id;
+            this.params = params;
+            this.defaults = defaults;
+            this.body = body;
+            this.generator = generator;
+            this.expression = false;
+            this.finish();
+            return this;
+        },
+
+        finishIdentifier: function (name) {
+            this.type = Syntax.Identifier;
+            this.name = name;
+            this.finish();
+            return this;
+        },
+
+        finishIfStatement: function (test, consequent, alternate) {
+            this.type = Syntax.IfStatement;
+            this.test = test;
+            this.consequent = consequent;
+            this.alternate = alternate;
+            this.finish();
+            return this;
+        },
+
+        finishLabeledStatement: function (label, body) {
+            this.type = Syntax.LabeledStatement;
+            this.label = label;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishLiteral: function (token) {
+            this.type = Syntax.Literal;
+            this.value = token.value;
+            this.raw = source.slice(token.start, token.end);
+            if (token.regex) {
+                this.regex = token.regex;
+            }
+            this.finish();
+            return this;
+        },
+
+        finishMemberExpression: function (accessor, object, property) {
+            this.type = Syntax.MemberExpression;
+            this.computed = accessor === '[';
+            this.object = object;
+            this.property = property;
+            this.finish();
+            return this;
+        },
+
+        finishMetaProperty: function (meta, property) {
+            this.type = Syntax.MetaProperty;
+            this.meta = meta;
+            this.property = property;
+            this.finish();
+            return this;
+        },
+
+        finishNewExpression: function (callee, args) {
+            this.type = Syntax.NewExpression;
+            this.callee = callee;
+            this.arguments = args;
+            this.finish();
+            return this;
+        },
+
+        finishObjectExpression: function (properties) {
+            this.type = Syntax.ObjectExpression;
+            this.properties = properties;
+            this.finish();
+            return this;
+        },
+
+        finishObjectPattern: function (properties) {
+            this.type = Syntax.ObjectPattern;
+            this.properties = properties;
+            this.finish();
+            return this;
+        },
+
+        finishPostfixExpression: function (operator, argument) {
+            this.type = Syntax.UpdateExpression;
+            this.operator = operator;
+            this.argument = argument;
+            this.prefix = false;
+            this.finish();
+            return this;
+        },
+
+        finishProgram: function (body, sourceType) {
+            this.type = Syntax.Program;
+            this.body = body;
+            this.sourceType = sourceType;
+            this.finish();
+            return this;
+        },
+
+        finishProperty: function (kind, key, computed, value, method, shorthand) {
+            this.type = Syntax.Property;
+            this.key = key;
+            this.computed = computed;
+            this.value = value;
+            this.kind = kind;
+            this.method = method;
+            this.shorthand = shorthand;
+            this.finish();
+            return this;
+        },
+
+        finishRestElement: function (argument) {
+            this.type = Syntax.RestElement;
+            this.argument = argument;
+            this.finish();
+            return this;
+        },
+
+        finishReturnStatement: function (argument) {
+            this.type = Syntax.ReturnStatement;
+            this.argument = argument;
+            this.finish();
+            return this;
+        },
+
+        finishSequenceExpression: function (expressions) {
+            this.type = Syntax.SequenceExpression;
+            this.expressions = expressions;
+            this.finish();
+            return this;
+        },
+
+        finishSpreadElement: function (argument) {
+            this.type = Syntax.SpreadElement;
+            this.argument = argument;
+            this.finish();
+            return this;
+        },
+
+        finishSwitchCase: function (test, consequent) {
+            this.type = Syntax.SwitchCase;
+            this.test = test;
+            this.consequent = consequent;
+            this.finish();
+            return this;
+        },
+
+        finishSuper: function () {
+            this.type = Syntax.Super;
+            this.finish();
+            return this;
+        },
+
+        finishSwitchStatement: function (discriminant, cases) {
+            this.type = Syntax.SwitchStatement;
+            this.discriminant = discriminant;
+            this.cases = cases;
+            this.finish();
+            return this;
+        },
+
+        finishTaggedTemplateExpression: function (tag, quasi) {
+            this.type = Syntax.TaggedTemplateExpression;
+            this.tag = tag;
+            this.quasi = quasi;
+            this.finish();
+            return this;
+        },
+
+        finishTemplateElement: function (value, tail) {
+            this.type = Syntax.TemplateElement;
+            this.value = value;
+            this.tail = tail;
+            this.finish();
+            return this;
+        },
+
+        finishTemplateLiteral: function (quasis, expressions) {
+            this.type = Syntax.TemplateLiteral;
+            this.quasis = quasis;
+            this.expressions = expressions;
+            this.finish();
+            return this;
+        },
+
+        finishThisExpression: function () {
+            this.type = Syntax.ThisExpression;
+            this.finish();
+            return this;
+        },
+
+        finishThrowStatement: function (argument) {
+            this.type = Syntax.ThrowStatement;
+            this.argument = argument;
+            this.finish();
+            return this;
+        },
+
+        finishTryStatement: function (block, handler, finalizer) {
+            this.type = Syntax.TryStatement;
+            this.block = block;
+            this.guardedHandlers = [];
+            this.handlers = handler ? [handler] : [];
+            this.handler = handler;
+            this.finalizer = finalizer;
+            this.finish();
+            return this;
+        },
+
+        finishUnaryExpression: function (operator, argument) {
+            this.type = (operator === '++' || operator === '--') ? Syntax.UpdateExpression : Syntax.UnaryExpression;
+            this.operator = operator;
+            this.argument = argument;
+            this.prefix = true;
+            this.finish();
+            return this;
+        },
+
+        finishVariableDeclaration: function (declarations) {
+            this.type = Syntax.VariableDeclaration;
+            this.declarations = declarations;
+            this.kind = 'var';
+            this.finish();
+            return this;
+        },
+
+        finishLexicalDeclaration: function (declarations, kind) {
+            this.type = Syntax.VariableDeclaration;
+            this.declarations = declarations;
+            this.kind = kind;
+            this.finish();
+            return this;
+        },
+
+        finishVariableDeclarator: function (id, init) {
+            this.type = Syntax.VariableDeclarator;
+            this.id = id;
+            this.init = init;
+            this.finish();
+            return this;
+        },
+
+        finishWhileStatement: function (test, body) {
+            this.type = Syntax.WhileStatement;
+            this.test = test;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishWithStatement: function (object, body) {
+            this.type = Syntax.WithStatement;
+            this.object = object;
+            this.body = body;
+            this.finish();
+            return this;
+        },
+
+        finishExportSpecifier: function (local, exported) {
+            this.type = Syntax.ExportSpecifier;
+            this.exported = exported || local;
+            this.local = local;
+            this.finish();
+            return this;
+        },
+
+        finishImportDefaultSpecifier: function (local) {
+            this.type = Syntax.ImportDefaultSpecifier;
+            this.local = local;
+            this.finish();
+            return this;
+        },
+
+        finishImportNamespaceSpecifier: function (local) {
+            this.type = Syntax.ImportNamespaceSpecifier;
+            this.local = local;
+            this.finish();
+            return this;
+        },
+
+        finishExportNamedDeclaration: function (declaration, specifiers, src) {
+            this.type = Syntax.ExportNamedDeclaration;
+            this.declaration = declaration;
+            this.specifiers = specifiers;
+            this.source = src;
+            this.finish();
+            return this;
+        },
+
+        finishExportDefaultDeclaration: function (declaration) {
+            this.type = Syntax.ExportDefaultDeclaration;
+            this.declaration = declaration;
+            this.finish();
+            return this;
+        },
+
+        finishExportAllDeclaration: function (src) {
+            this.type = Syntax.ExportAllDeclaration;
+            this.source = src;
+            this.finish();
+            return this;
+        },
+
+        finishImportSpecifier: function (local, imported) {
+            this.type = Syntax.ImportSpecifier;
+            this.local = local || imported;
+            this.imported = imported;
+            this.finish();
+            return this;
+        },
+
+        finishImportDeclaration: function (specifiers, src) {
+            this.type = Syntax.ImportDeclaration;
+            this.specifiers = specifiers;
+            this.source = src;
+            this.finish();
+            return this;
+        },
+
+        finishYieldExpression: function (argument, delegate) {
+            this.type = Syntax.YieldExpression;
+            this.argument = argument;
+            this.delegate = delegate;
+            this.finish();
+            return this;
+        }
+    };
+
+
+    function recordError(error) {
+        var e, existing;
+
+        for (e = 0; e < extra.errors.length; e++) {
+            existing = extra.errors[e];
+            // Prevent duplicated error.
+            /* istanbul ignore next */
+            if (existing.index === error.index && existing.message === error.message) {
+                return;
+            }
+        }
+
+        extra.errors.push(error);
+    }
+
+    function constructError(msg, column) {
+        var error = new Error(msg);
+        try {
+            throw error;
+        } catch (base) {
+            /* istanbul ignore else */
+            if (Object.create && Object.defineProperty) {
+                error = Object.create(base);
+                Object.defineProperty(error, 'column', { value: column });
+            }
+        } finally {
+            return error;
+        }
+    }
+
+    function createError(line, pos, description) {
+        var msg, column, error;
+
+        msg = 'Line ' + line + ': ' + description;
+        column = pos - (scanning ? lineStart : lastLineStart) + 1;
+        error = constructError(msg, column);
+        error.lineNumber = line;
+        error.description = description;
+        error.index = pos;
+        return error;
+    }
+
+    // Throw an exception
+
+    function throwError(messageFormat) {
+        var args, msg;
+
+        args = Array.prototype.slice.call(arguments, 1);
+        msg = messageFormat.replace(/%(\d)/g,
+            function (whole, idx) {
+                assert(idx < args.length, 'Message reference must be in range');
+                return args[idx];
+            }
+        );
+
+        throw createError(lastLineNumber, lastIndex, msg);
+    }
+
+    function tolerateError(messageFormat) {
+        var args, msg, error;
+
+        args = Array.prototype.slice.call(arguments, 1);
+        /* istanbul ignore next */
+        msg = messageFormat.replace(/%(\d)/g,
+            function (whole, idx) {
+                assert(idx < args.length, 'Message reference must be in range');
+                return args[idx];
+            }
+        );
+
+        error = createError(lineNumber, lastIndex, msg);
+        if (extra.errors) {
+            recordError(error);
+        } else {
+            throw error;
+        }
+    }
+
+    // Throw an exception because of the token.
+
+    function unexpectedTokenError(token, message) {
+        var value, msg = message || Messages.UnexpectedToken;
+
+        if (token) {
+            if (!message) {
+                msg = (token.type === Token.EOF) ? Messages.UnexpectedEOS :
+                    (token.type === Token.Identifier) ? Messages.UnexpectedIdentifier :
+                    (token.type === Token.NumericLiteral) ? Messages.UnexpectedNumber :
+                    (token.type === Token.StringLiteral) ? Messages.UnexpectedString :
+                    (token.type === Token.Template) ? Messages.UnexpectedTemplate :
+                    Messages.UnexpectedToken;
+
+                if (token.type === Token.Keyword) {
+                    if (isFutureReservedWord(token.value)) {
+                        msg = Messages.UnexpectedReserved;
+                    } else if (strict && isStrictModeReservedWord(token.value)) {
+                        msg = Messages.StrictReservedWord;
+                    }
+                }
+            }
+
+            value = (token.type === Token.Template) ? token.value.raw : token.value;
+        } else {
+            value = 'ILLEGAL';
+        }
+
+        msg = msg.replace('%0', value);
+
+        return (token && typeof token.lineNumber === 'number') ?
+            createError(token.lineNumber, token.start, msg) :
+            createError(scanning ? lineNumber : lastLineNumber, scanning ? index : lastIndex, msg);
+    }
+
+    function throwUnexpectedToken(token, message) {
+        throw unexpectedTokenError(token, message);
+    }
+
+    function tolerateUnexpectedToken(token, message) {
+        var error = unexpectedTokenError(token, message);
+        if (extra.errors) {
+            recordError(error);
+        } else {
+            throw error;
+        }
+    }
+
+    // Expect the next token to match the specified punctuator.
+    // If not, an exception will be thrown.
+
+    function expect(value) {
+        var token = lex();
+        if (token.type !== Token.Punctuator || token.value !== value) {
+            throwUnexpectedToken(token);
+        }
+    }
+
+    /**
+     * @name expectCommaSeparator
+     * @description Quietly expect a comma when in tolerant mode, otherwise delegates
+     * to <code>expect(value)</code>
+     * @since 2.0
+     */
+    function expectCommaSeparator() {
+        var token;
+
+        if (extra.errors) {
+            token = lookahead;
+            if (token.type === Token.Punctuator && token.value === ',') {
+                lex();
+            } else if (token.type === Token.Punctuator && token.value === ';') {
+                lex();
+                tolerateUnexpectedToken(token);
+            } else {
+                tolerateUnexpectedToken(token, Messages.UnexpectedToken);
+            }
+        } else {
+            expect(',');
+        }
+    }
+
+    // Expect the next token to match the specified keyword.
+    // If not, an exception will be thrown.
+
+    function expectKeyword(keyword) {
+        var token = lex();
+        if (token.type !== Token.Keyword || token.value !== keyword) {
+            throwUnexpectedToken(token);
+        }
+    }
+
+    // Return true if the next token matches the specified punctuator.
+
+    function match(value) {
+        return lookahead.type === Token.Punctuator && lookahead.value === value;
+    }
+
+    // Return true if the next token matches the specified keyword
+
+    function matchKeyword(keyword) {
+        return lookahead.type === Token.Keyword && lookahead.value === keyword;
+    }
+
+    // Return true if the next token matches the specified contextual keyword
+    // (where an identifier is sometimes a keyword depending on the context)
+
+    function matchContextualKeyword(keyword) {
+        return lookahead.type === Token.Identifier && lookahead.value === keyword;
+    }
+
+    // Return true if the next token is an assignment operator
+
+    function matchAssign() {
+        var op;
+
+        if (lookahead.type !== Token.Punctuator) {
+            return false;
+        }
+        op = lookahead.value;
+        return op === '=' ||
+            op === '*=' ||
+            op === '/=' ||
+            op === '%=' ||
+            op === '+=' ||
+            op === '-=' ||
+            op === '<<=' ||
+            op === '>>=' ||
+            op === '>>>=' ||
+            op === '&=' ||
+            op === '^=' ||
+            op === '|=';
+    }
+
+    function consumeSemicolon() {
+        // Catch the very common case first: immediately a semicolon (U+003B).
+        if (source.charCodeAt(startIndex) === 0x3B || match(';')) {
+            lex();
+            return;
+        }
+
+        if (hasLineTerminator) {
+            return;
+        }
+
+        // FIXME(ikarienator): this is seemingly an issue in the previous location info convention.
+        lastIndex = startIndex;
+        lastLineNumber = startLineNumber;
+        lastLineStart = startLineStart;
+
+        if (lookahead.type !== Token.EOF && !match('}')) {
+            throwUnexpectedToken(lookahead);
+        }
+    }
+
+    // Cover grammar support.
+    //
+    // When an assignment expression position starts with an left parenthesis, the determination of the type
+    // of the syntax is to be deferred arbitrarily long until the end of the parentheses pair (plus a lookahead)
+    // or the first comma. This situation also defers the determination of all the expressions nested in the pair.
+    //
+    // There are three productions that can be parsed in a parentheses pair that needs to be determined
+    // after the outermost pair is closed. They are:
+    //
+    //   1. AssignmentExpression
+    //   2. BindingElements
+    //   3. AssignmentTargets
+    //
+    // In order to avoid exponential backtracking, we use two flags to denote if the production can be
+    // binding element or assignment target.
+    //
+    // The three productions have the relationship:
+    //
+    //   BindingElements ⊆ AssignmentTargets ⊆ AssignmentExpression
+    //
+    // with a single exception that CoverInitializedName when used directly in an Expression, generates
+    // an early error. Therefore, we need the third state, firstCoverInitializedNameError, to track the
+    // first usage of CoverInitializedName and report it when we reached the end of the parentheses pair.
+    //
+    // isolateCoverGrammar function runs the given parser function with a new cover grammar context, and it does not
+    // effect the current flags. This means the production the parser parses is only used as an expression. Therefore
+    // the CoverInitializedName check is conducted.
+    //
+    // inheritCoverGrammar function runs the given parse function with a new cover grammar context, and it propagates
+    // the flags outside of the parser. This means the production the parser parses is used as a part of a potential
+    // pattern. The CoverInitializedName check is deferred.
+    function isolateCoverGrammar(parser) {
+        var oldIsBindingElement = isBindingElement,
+            oldIsAssignmentTarget = isAssignmentTarget,
+            oldFirstCoverInitializedNameError = firstCoverInitializedNameError,
+            result;
+        isBindingElement = true;
+        isAssignmentTarget = true;
+        firstCoverInitializedNameError = null;
+        result = parser();
+        if (firstCoverInitializedNameError !== null) {
+            throwUnexpectedToken(firstCoverInitializedNameError);
+        }
+        isBindingElement = oldIsBindingElement;
+        isAssignmentTarget = oldIsAssignmentTarget;
+        firstCoverInitializedNameError = oldFirstCoverInitializedNameError;
+        return result;
+    }
+
+    function inheritCoverGrammar(parser) {
+        var oldIsBindingElement = isBindingElement,
+            oldIsAssignmentTarget = isAssignmentTarget,
+            oldFirstCoverInitializedNameError = firstCoverInitializedNameError,
+            result;
+        isBindingElement = true;
+        isAssignmentTarget = true;
+        firstCoverInitializedNameError = null;
+        result = parser();
+        isBindingElement = isBindingElement && oldIsBindingElement;
+        isAssignmentTarget = isAssignmentTarget && oldIsAssignmentTarget;
+        firstCoverInitializedNameError = oldFirstCoverInitializedNameError || firstCoverInitializedNameError;
+        return result;
+    }
+
+    // ECMA-262 13.3.3 Destructuring Binding Patterns
+
+    function parseArrayPattern(params, kind) {
+        var node = new Node(), elements = [], rest, restNode;
+        expect('[');
+
+        while (!match(']')) {
+            if (match(',')) {
+                lex();
+                elements.push(null);
+            } else {
+                if (match('...')) {
+                    restNode = new Node();
+                    lex();
+                    params.push(lookahead);
+                    rest = parseVariableIdentifier(params, kind);
+                    elements.push(restNode.finishRestElement(rest));
+                    break;
+                } else {
+                    elements.push(parsePatternWithDefault(params, kind));
+                }
+                if (!match(']')) {
+                    expect(',');
+                }
+            }
+
+        }
+
+        expect(']');
+
+        return node.finishArrayPattern(elements);
+    }
+
+    function parsePropertyPattern(params, kind) {
+        var node = new Node(), key, keyToken, computed = match('['), init;
+        if (lookahead.type === Token.Identifier) {
+            keyToken = lookahead;
+            key = parseVariableIdentifier();
+            if (match('=')) {
+                params.push(keyToken);
+                lex();
+                init = parseAssignmentExpression();
+
+                return node.finishProperty(
+                    'init', key, false,
+                    new WrappingNode(keyToken).finishAssignmentPattern(key, init), false, false);
+            } else if (!match(':')) {
+                params.push(keyToken);
+                return node.finishProperty('init', key, false, key, false, true);
+            }
+        } else {
+            key = parseObjectPropertyKey(params, kind);
+        }
+        expect(':');
+        init = parsePatternWithDefault(params, kind);
+        return node.finishProperty('init', key, computed, init, false, false);
+    }
+
+    function parseObjectPattern(params, kind) {
+        var node = new Node(), properties = [];
+
+        expect('{');
+
+        while (!match('}')) {
+            properties.push(parsePropertyPattern(params, kind));
+            if (!match('}')) {
+                expect(',');
+            }
+        }
+
+        lex();
+
+        return node.finishObjectPattern(properties);
+    }
+
+    function parsePattern(params, kind) {
+        if (match('[')) {
+            return parseArrayPattern(params, kind);
+        } else if (match('{')) {
+            return parseObjectPattern(params, kind);
+        }
+        params.push(lookahead);
+        return parseVariableIdentifier(kind);
+    }
+
+    function parsePatternWithDefault(params, kind) {
+        var startToken = lookahead, pattern, previousAllowYield, right;
+        pattern = parsePattern(params, kind);
+        if (match('=')) {
+            lex();
+            previousAllowYield = state.allowYield;
+            state.allowYield = true;
+            right = isolateCoverGrammar(parseAssignmentExpression);
+            state.allowYield = previousAllowYield;
+            pattern = new WrappingNode(startToken).finishAssignmentPattern(pattern, right);
+        }
+        return pattern;
+    }
+
+    // ECMA-262 12.2.5 Array Initializer
+
+    function parseArrayInitializer() {
+        var elements = [], node = new Node(), restSpread;
+
+        expect('[');
+
+        while (!match(']')) {
+            if (match(',')) {
+                lex();
+                elements.push(null);
+            } else if (match('...')) {
+                restSpread = new Node();
+                lex();
+                restSpread.finishSpreadElement(inheritCoverGrammar(parseAssignmentExpression));
+
+                if (!match(']')) {
+                    isAssignmentTarget = isBindingElement = false;
+                    expect(',');
+                }
+                elements.push(restSpread);
+            } else {
+                elements.push(inheritCoverGrammar(parseAssignmentExpression));
+
+                if (!match(']')) {
+                    expect(',');
+                }
+            }
+        }
+
+        lex();
+
+        return node.finishArrayExpression(elements);
+    }
+
+    // ECMA-262 12.2.6 Object Initializer
+
+    function parsePropertyFunction(node, paramInfo, isGenerator) {
+        var previousStrict, body;
+
+        isAssignmentTarget = isBindingElement = false;
+
+        previousStrict = strict;
+        body = isolateCoverGrammar(parseFunctionSourceElements);
+
+        if (strict && paramInfo.firstRestricted) {
+            tolerateUnexpectedToken(paramInfo.firstRestricted, paramInfo.message);
+        }
+        if (strict && paramInfo.stricted) {
+            tolerateUnexpectedToken(paramInfo.stricted, paramInfo.message);
+        }
+
+        strict = previousStrict;
+        return node.finishFunctionExpression(null, paramInfo.params, paramInfo.defaults, body, isGenerator);
+    }
+
+    function parsePropertyMethodFunction() {
+        var params, method, node = new Node(),
+            previousAllowYield = state.allowYield;
+
+        state.allowYield = false;
+        params = parseParams();
+        state.allowYield = previousAllowYield;
+
+        state.allowYield = false;
+        method = parsePropertyFunction(node, params, false);
+        state.allowYield = previousAllowYield;
+
+        return method;
+    }
+
+    function parseObjectPropertyKey() {
+        var token, node = new Node(), expr;
+
+        token = lex();
+
+        // Note: This function is called only from parseObjectProperty(), where
+        // EOF and Punctuator tokens are already filtered out.
+
+        switch (token.type) {
+        case Token.StringLiteral:
+        case Token.NumericLiteral:
+            if (strict && token.octal) {
+                tolerateUnexpectedToken(token, Messages.StrictOctalLiteral);
+            }
+            return node.finishLiteral(token);
+        case Token.Identifier:
+        case Token.BooleanLiteral:
+        case Token.NullLiteral:
+        case Token.Keyword:
+            return node.finishIdentifier(token.value);
+        case Token.Punctuator:
+            if (token.value === '[') {
+                expr = isolateCoverGrammar(parseAssignmentExpression);
+                expect(']');
+                return expr;
+            }
+            break;
+        }
+        throwUnexpectedToken(token);
+    }
+
+    function lookaheadPropertyName() {
+        switch (lookahead.type) {
+        case Token.Identifier:
+        case Token.StringLiteral:
+        case Token.BooleanLiteral:
+        case Token.NullLiteral:
+        case Token.NumericLiteral:
+        case Token.Keyword:
+            return true;
+        case Token.Punctuator:
+            return lookahead.value === '[';
+        }
+        return false;
+    }
+
+    // This function is to try to parse a MethodDefinition as defined in 14.3. But in the case of object literals,
+    // it might be called at a position where there is in fact a short hand identifier pattern or a data property.
+    // This can only be determined after we consumed up to the left parentheses.
+    //
+    // In order to avoid back tracking, it returns `null` if the position is not a MethodDefinition and the caller
+    // is responsible to visit other options.
+    function tryParseMethodDefinition(token, key, computed, node) {
+        var value, options, methodNode, params,
+            previousAllowYield = state.allowYield;
+
+        if (token.type === Token.Identifier) {
+            // check for `get` and `set`;
+
+            if (token.value === 'get' && lookaheadPropertyName()) {
+                computed = match('[');
+                key = parseObjectPropertyKey();
+                methodNode = new Node();
+                expect('(');
+                expect(')');
+
+                state.allowYield = false;
+                value = parsePropertyFunction(methodNode, {
+                    params: [],
+                    defaults: [],
+                    stricted: null,
+                    firstRestricted: null,
+                    message: null
+                }, false);
+                state.allowYield = previousAllowYield;
+
+                return node.finishProperty('get', key, computed, value, false, false);
+            } else if (token.value === 'set' && lookaheadPropertyName()) {
+                computed = match('[');
+                key = parseObjectPropertyKey();
+                methodNode = new Node();
+                expect('(');
+
+                options = {
+                    params: [],
+                    defaultCount: 0,
+                    defaults: [],
+                    firstRestricted: null,
+                    paramSet: {}
+                };
+                if (match(')')) {
+                    tolerateUnexpectedToken(lookahead);
+                } else {
+                    state.allowYield = false;
+                    parseParam(options);
+                    state.allowYield = previousAllowYield;
+                    if (options.defaultCount === 0) {
+                        options.defaults = [];
+                    }
+                }
+                expect(')');
+
+                state.allowYield = false;
+                value = parsePropertyFunction(methodNode, options, false);
+                state.allowYield = previousAllowYield;
+
+                return node.finishProperty('set', key, computed, value, false, false);
+            }
+        } else if (token.type === Token.Punctuator && token.value === '*' && lookaheadPropertyName()) {
+            computed = match('[');
+            key = parseObjectPropertyKey();
+            methodNode = new Node();
+
+            state.allowYield = true;
+            params = parseParams();
+            state.allowYield = previousAllowYield;
+
+            state.allowYield = false;
+            value = parsePropertyFunction(methodNode, params, true);
+            state.allowYield = previousAllowYield;
+
+            return node.finishProperty('init', key, computed, value, true, false);
+        }
+
+        if (key && match('(')) {
+            value = parsePropertyMethodFunction();
+            return node.finishProperty('init', key, computed, value, true, false);
+        }
+
+        // Not a MethodDefinition.
+        return null;
+    }
+
+    function parseObjectProperty(hasProto) {
+        var token = lookahead, node = new Node(), computed, key, maybeMethod, proto, value;
+
+        computed = match('[');
+        if (match('*')) {
+            lex();
+        } else {
+            key = parseObjectPropertyKey();
+        }
+        maybeMethod = tryParseMethodDefinition(token, key, computed, node);
+        if (maybeMethod) {
+            return maybeMethod;
+        }
+
+        if (!key) {
+            throwUnexpectedToken(lookahead);
+        }
+
+        // Check for duplicated __proto__
+        if (!computed) {
+            proto = (key.type === Syntax.Identifier && key.name === '__proto__') ||
+                (key.type === Syntax.Literal && key.value === '__proto__');
+            if (hasProto.value && proto) {
+                tolerateError(Messages.DuplicateProtoProperty);
+            }
+            hasProto.value |= proto;
+        }
+
+        if (match(':')) {
+            lex();
+            value = inheritCoverGrammar(parseAssignmentExpression);
+            return node.finishProperty('init', key, computed, value, false, false);
+        }
+
+        if (token.type === Token.Identifier) {
+            if (match('=')) {
+                firstCoverInitializedNameError = lookahead;
+                lex();
+                value = isolateCoverGrammar(parseAssignmentExpression);
+                return node.finishProperty('init', key, computed,
+                    new WrappingNode(token).finishAssignmentPattern(key, value), false, true);
+            }
+            return node.finishProperty('init', key, computed, key, false, true);
+        }
+
+        throwUnexpectedToken(lookahead);
+    }
+
+    function parseObjectInitializer() {
+        var properties = [], hasProto = {value: false}, node = new Node();
+
+        expect('{');
+
+        while (!match('}')) {
+            properties.push(parseObjectProperty(hasProto));
+
+            if (!match('}')) {
+                expectCommaSeparator();
+            }
+        }
+
+        expect('}');
+
+        return node.finishObjectExpression(properties);
+    }
+
+    function reinterpretExpressionAsPattern(expr) {
+        var i;
+        switch (expr.type) {
+        case Syntax.Identifier:
+        case Syntax.MemberExpression:
+        case Syntax.RestElement:
+        case Syntax.AssignmentPattern:
+            break;
+        case Syntax.SpreadElement:
+            expr.type = Syntax.RestElement;
+            reinterpretExpressionAsPattern(expr.argument);
+            break;
+        case Syntax.ArrayExpression:
+            expr.type = Syntax.ArrayPattern;
+            for (i = 0; i < expr.elements.length; i++) {
+                if (expr.elements[i] !== null) {
+                    reinterpretExpressionAsPattern(expr.elements[i]);
+                }
+            }
+            break;
+        case Syntax.ObjectExpression:
+            expr.type = Syntax.ObjectPattern;
+            for (i = 0; i < expr.properties.length; i++) {
+                reinterpretExpressionAsPattern(expr.properties[i].value);
+            }
+            break;
+        case Syntax.AssignmentExpression:
+            expr.type = Syntax.AssignmentPattern;
+            reinterpretExpressionAsPattern(expr.left);
+            break;
+        default:
+            // Allow other node type for tolerant parsing.
+            break;
+        }
+    }
+
+    // ECMA-262 12.2.9 Template Literals
+
+    function parseTemplateElement(option) {
+        var node, token;
+
+        if (lookahead.type !== Token.Template || (option.head && !lookahead.head)) {
+            throwUnexpectedToken();
+        }
+
+        node = new Node();
+        token = lex();
+
+        return node.finishTemplateElement({ raw: token.value.raw, cooked: token.value.cooked }, token.tail);
+    }
+
+    function parseTemplateLiteral() {
+        var quasi, quasis, expressions, node = new Node();
+
+        quasi = parseTemplateElement({ head: true });
+        quasis = [quasi];
+        expressions = [];
+
+        while (!quasi.tail) {
+            expressions.push(parseExpression());
+            quasi = parseTemplateElement({ head: false });
+            quasis.push(quasi);
+        }
+
+        return node.finishTemplateLiteral(quasis, expressions);
+    }
+
+    // ECMA-262 12.2.10 The Grouping Operator
+
+    function parseGroupExpression() {
+        var expr, expressions, startToken, i, params = [];
+
+        expect('(');
+
+        if (match(')')) {
+            lex();
+            if (!match('=>')) {
+                expect('=>');
+            }
+            return {
+                type: PlaceHolders.ArrowParameterPlaceHolder,
+                params: [],
+                rawParams: []
+            };
+        }
+
+        startToken = lookahead;
+        if (match('...')) {
+            expr = parseRestElement(params);
+            expect(')');
+            if (!match('=>')) {
+                expect('=>');
+            }
+            return {
+                type: PlaceHolders.ArrowParameterPlaceHolder,
+                params: [expr]
+            };
+        }
+
+        isBindingElement = true;
+        expr = inheritCoverGrammar(parseAssignmentExpression);
+
+        if (match(',')) {
+            isAssignmentTarget = false;
+            expressions = [expr];
+
+            while (startIndex < length) {
+                if (!match(',')) {
+                    break;
+                }
+                lex();
+
+                if (match('...')) {
+                    if (!isBindingElement) {
+                        throwUnexpectedToken(lookahead);
+                    }
+                    expressions.push(parseRestElement(params));
+                    expect(')');
+                    if (!match('=>')) {
+                        expect('=>');
+                    }
+                    isBindingElement = false;
+                    for (i = 0; i < expressions.length; i++) {
+                        reinterpretExpressionAsPattern(expressions[i]);
+                    }
+                    return {
+                        type: PlaceHolders.ArrowParameterPlaceHolder,
+                        params: expressions
+                    };
+                }
+
+                expressions.push(inheritCoverGrammar(parseAssignmentExpression));
+            }
+
+            expr = new WrappingNode(startToken).finishSequenceExpression(expressions);
+        }
+
+
+        expect(')');
+
+        if (match('=>')) {
+            if (expr.type === Syntax.Identifier && expr.name === 'yield') {
+                return {
+                    type: PlaceHolders.ArrowParameterPlaceHolder,
+                    params: [expr]
+                };
+            }
+
+            if (!isBindingElement) {
+                throwUnexpectedToken(lookahead);
+            }
+
+            if (expr.type === Syntax.SequenceExpression) {
+                for (i = 0; i < expr.expressions.length; i++) {
+                    reinterpretExpressionAsPattern(expr.expressions[i]);
+                }
+            } else {
+                reinterpretExpressionAsPattern(expr);
+            }
+
+            expr = {
+                type: PlaceHolders.ArrowParameterPlaceHolder,
+                params: expr.type === Syntax.SequenceExpression ? expr.expressions : [expr]
+            };
+        }
+        isBindingElement = false;
+        return expr;
+    }
+
+
+    // ECMA-262 12.2 Primary Expressions
+
+    function parsePrimaryExpression() {
+        var type, token, expr, node;
+
+        if (match('(')) {
+            isBindingElement = false;
+            return inheritCoverGrammar(parseGroupExpression);
+        }
+
+        if (match('[')) {
+            return inheritCoverGrammar(parseArrayInitializer);
+        }
+
+        if (match('{')) {
+            return inheritCoverGrammar(parseObjectInitializer);
+        }
+
+        type = lookahead.type;
+        node = new Node();
+
+        if (type === Token.Identifier) {
+            if (state.sourceType === 'module' && lookahead.value === 'await') {
+                tolerateUnexpectedToken(lookahead);
+            }
+            expr = node.finishIdentifier(lex().value);
+        } else if (type === Token.StringLiteral || type === Token.NumericLiteral) {
+            isAssignmentTarget = isBindingElement = false;
+            if (strict && lookahead.octal) {
+                tolerateUnexpectedToken(lookahead, Messages.StrictOctalLiteral);
+            }
+            expr = node.finishLiteral(lex());
+        } else if (type === Token.Keyword) {
+            if (!strict && state.allowYield && matchKeyword('yield')) {
+                return parseNonComputedProperty();
+            }
+            isAssignmentTarget = isBindingElement = false;
+            if (matchKeyword('function')) {
+                return parseFunctionExpression();
+            }
+            if (matchKeyword('this')) {
+                lex();
+                return node.finishThisExpression();
+            }
+            if (matchKeyword('class')) {
+                return parseClassExpression();
+            }
+            throwUnexpectedToken(lex());
+        } else if (type === Token.BooleanLiteral) {
+            isAssignmentTarget = isBindingElement = false;
+            token = lex();
+            token.value = (token.value === 'true');
+            expr = node.finishLiteral(token);
+        } else if (type === Token.NullLiteral) {
+            isAssignmentTarget = isBindingElement = false;
+            token = lex();
+            token.value = null;
+            expr = node.finishLiteral(token);
+        } else if (match('/') || match('/=')) {
+            isAssignmentTarget = isBindingElement = false;
+            index = startIndex;
+
+            if (typeof extra.tokens !== 'undefined') {
+                token = collectRegex();
+            } else {
+                token = scanRegExp();
+            }
+            lex();
+            expr = node.finishLiteral(token);
+        } else if (type === Token.Template) {
+            expr = parseTemplateLiteral();
+        } else {
+            throwUnexpectedToken(lex());
+        }
+
+        return expr;
+    }
+
+    // ECMA-262 12.3 Left-Hand-Side Expressions
+
+    function parseArguments() {
+        var args = [], expr;
+
+        expect('(');
+
+        if (!match(')')) {
+            while (startIndex < length) {
+                if (match('...')) {
+                    expr = new Node();
+                    lex();
+                    expr.finishSpreadElement(isolateCoverGrammar(parseAssignmentExpression));
+                } else {
+                    expr = isolateCoverGrammar(parseAssignmentExpression);
+                }
+                args.push(expr);
+                if (match(')')) {
+                    break;
+                }
+                expectCommaSeparator();
+            }
+        }
+
+        expect(')');
+
+        return args;
+    }
+
+    function parseNonComputedProperty() {
+        var token, node = new Node();
+
+        token = lex();
+
+        if (!isIdentifierName(token)) {
+            throwUnexpectedToken(token);
+        }
+
+        return node.finishIdentifier(token.value);
+    }
+
+    function parseNonComputedMember() {
+        expect('.');
+
+        return parseNonComputedProperty();
+    }
+
+    function parseComputedMember() {
+        var expr;
+
+        expect('[');
+
+        expr = isolateCoverGrammar(parseExpression);
+
+        expect(']');
+
+        return expr;
+    }
+
+    // ECMA-262 12.3.3 The new Operator
+
+    function parseNewExpression() {
+        var callee, args, node = new Node();
+
+        expectKeyword('new');
+
+        if (match('.')) {
+            lex();
+            if (lookahead.type === Token.Identifier && lookahead.value === 'target') {
+                if (state.inFunctionBody) {
+                    lex();
+                    return node.finishMetaProperty('new', 'target');
+                }
+            }
+            throwUnexpectedToken(lookahead);
+        }
+
+        callee = isolateCoverGrammar(parseLeftHandSideExpression);
+        args = match('(') ? parseArguments() : [];
+
+        isAssignmentTarget = isBindingElement = false;
+
+        return node.finishNewExpression(callee, args);
+    }
+
+    // ECMA-262 12.3.4 Function Calls
+
+    function parseLeftHandSideExpressionAllowCall() {
+        var quasi, expr, args, property, startToken, previousAllowIn = state.allowIn;
+
+        startToken = lookahead;
+        state.allowIn = true;
+
+        if (matchKeyword('super') && state.inFunctionBody) {
+            expr = new Node();
+            lex();
+            expr = expr.finishSuper();
+            if (!match('(') && !match('.') && !match('[')) {
+                throwUnexpectedToken(lookahead);
+            }
+        } else {
+            expr = inheritCoverGrammar(matchKeyword('new') ? parseNewExpression : parsePrimaryExpression);
+        }
+
+        for (;;) {
+            if (match('.')) {
+                isBindingElement = false;
+                isAssignmentTarget = true;
+                property = parseNonComputedMember();
+                expr = new WrappingNode(startToken).finishMemberExpression('.', expr, property);
+            } else if (match('(')) {
+                isBindingElement = false;
+                isAssignmentTarget = false;
+                args = parseArguments();
+                expr = new WrappingNode(startToken).finishCallExpression(expr, args);
+            } else if (match('[')) {
+                isBindingElement = false;
+                isAssignmentTarget = true;
+                property = parseComputedMember();
+                expr = new WrappingNode(startToken).finishMemberExpression('[', expr, property);
+            } else if (lookahead.type === Token.Template && lookahead.head) {
+                quasi = parseTemplateLiteral();
+                expr = new WrappingNode(startToken).finishTaggedTemplateExpression(expr, quasi);
+            } else {
+                break;
+            }
+        }
+        state.allowIn = previousAllowIn;
+
+        return expr;
+    }
+
+    // ECMA-262 12.3 Left-Hand-Side Expressions
+
+    function parseLeftHandSideExpression() {
+        var quasi, expr, property, startToken;
+        assert(state.allowIn, 'callee of new expression always allow in keyword.');
+
+        startToken = lookahead;
+
+        if (matchKeyword('super') && state.inFunctionBody) {
+            expr = new Node();
+            lex();
+            expr = expr.finishSuper();
+            if (!match('[') && !match('.')) {
+                throwUnexpectedToken(lookahead);
+            }
+        } else {
+            expr = inheritCoverGrammar(matchKeyword('new') ? parseNewExpression : parsePrimaryExpression);
+        }
+
+        for (;;) {
+            if (match('[')) {
+                isBindingElement = false;
+                isAssignmentTarget = true;
+                property = parseComputedMember();
+                expr = new WrappingNode(startToken).finishMemberExpression('[', expr, property);
+            } else if (match('.')) {
+                isBindingElement = false;
+                isAssignmentTarget = true;
+                property = parseNonComputedMember();
+                expr = new WrappingNode(startToken).finishMemberExpression('.', expr, property);
+            } else if (lookahead.type === Token.Template && lookahead.head) {
+                quasi = parseTemplateLiteral();
+                expr = new WrappingNode(startToken).finishTaggedTemplateExpression(expr, quasi);
+            } else {
+                break;
+            }
+        }
+        return expr;
+    }
+
+    // ECMA-262 12.4 Postfix Expressions
+
+    function parsePostfixExpression() {
+        var expr, token, startToken = lookahead;
+
+        expr = inheritCoverGrammar(parseLeftHandSideExpressionAllowCall);
+
+        if (!hasLineTerminator && lookahead.type === Token.Punctuator) {
+            if (match('++') || match('--')) {
+                // ECMA-262 11.3.1, 11.3.2
+                if (strict && expr.type === Syntax.Identifier && isRestrictedWord(expr.name)) {
+                    tolerateError(Messages.StrictLHSPostfix);
+                }
+
+                if (!isAssignmentTarget) {
+                    tolerateError(Messages.InvalidLHSInAssignment);
+                }
+
+                isAssignmentTarget = isBindingElement = false;
+
+                token = lex();
+                expr = new WrappingNode(startToken).finishPostfixExpression(token.value, expr);
+            }
+        }
+
+        return expr;
+    }
+
+    // ECMA-262 12.5 Unary Operators
+
+    function parseUnaryExpression() {
+        var token, expr, startToken;
+
+        if (lookahead.type !== Token.Punctuator && lookahead.type !== Token.Keyword) {
+            expr = parsePostfixExpression();
+        } else if (match('++') || match('--')) {
+            startToken = lookahead;
+            token = lex();
+            expr = inheritCoverGrammar(parseUnaryExpression);
+            // ECMA-262 11.4.4, 11.4.5
+            if (strict && expr.type === Syntax.Identifier && isRestrictedWord(expr.name)) {
+                tolerateError(Messages.StrictLHSPrefix);
+            }
+
+            if (!isAssignmentTarget) {
+                tolerateError(Messages.InvalidLHSInAssignment);
+            }
+            expr = new WrappingNode(startToken).finishUnaryExpression(token.value, expr);
+            isAssignmentTarget = isBindingElement = false;
+        } else if (match('+') || match('-') || match('~') || match('!')) {
+            startToken = lookahead;
+            token = lex();
+            expr = inheritCoverGrammar(parseUnaryExpression);
+            expr = new WrappingNode(startToken).finishUnaryExpression(token.value, expr);
+            isAssignmentTarget = isBindingElement = false;
+        } else if (matchKeyword('delete') || matchKeyword('void') || matchKeyword('typeof')) {
+            startToken = lookahead;
+            token = lex();
+            expr = inheritCoverGrammar(parseUnaryExpression);
+            expr = new WrappingNode(startToken).finishUnaryExpression(token.value, expr);
+            if (strict && expr.operator === 'delete' && expr.argument.type === Syntax.Identifier) {
+                tolerateError(Messages.StrictDelete);
+            }
+            isAssignmentTarget = isBindingElement = false;
+        } else {
+            expr = parsePostfixExpression();
+        }
+
+        return expr;
+    }
+
+    function binaryPrecedence(token, allowIn) {
+        var prec = 0;
+
+        if (token.type !== Token.Punctuator && token.type !== Token.Keyword) {
+            return 0;
+        }
+
+        switch (token.value) {
+        case '||':
+            prec = 1;
+            break;
+
+        case '&&':
+            prec = 2;
+            break;
+
+        case '|':
+            prec = 3;
+            break;
+
+        case '^':
+            prec = 4;
+            break;
+
+        case '&':
+            prec = 5;
+            break;
+
+        case '==':
+        case '!=':
+        case '===':
+        case '!==':
+            prec = 6;
+            break;
+
+        case '<':
+        case '>':
+        case '<=':
+        case '>=':
+        case 'instanceof':
+            prec = 7;
+            break;
+
+        case 'in':
+            prec = allowIn ? 7 : 0;
+            break;
+
+        case '<<':
+        case '>>':
+        case '>>>':
+            prec = 8;
+            break;
+
+        case '+':
+        case '-':
+            prec = 9;
+            break;
+
+        case '*':
+        case '/':
+        case '%':
+            prec = 11;
+            break;
+
+        default:
+            break;
+        }
+
+        return prec;
+    }
+
+    // ECMA-262 12.6 Multiplicative Operators
+    // ECMA-262 12.7 Additive Operators
+    // ECMA-262 12.8 Bitwise Shift Operators
+    // ECMA-262 12.9 Relational Operators
+    // ECMA-262 12.10 Equality Operators
+    // ECMA-262 12.11 Binary Bitwise Operators
+    // ECMA-262 12.12 Binary Logical Operators
+
+    function parseBinaryExpression() {
+        var marker, markers, expr, token, prec, stack, right, operator, left, i;
+
+        marker = lookahead;
+        left = inheritCoverGrammar(parseUnaryExpression);
+
+        token = lookahead;
+        prec = binaryPrecedence(token, state.allowIn);
+        if (prec === 0) {
+            return left;
+        }
+        isAssignmentTarget = isBindingElement = false;
+        token.prec = prec;
+        lex();
+
+        markers = [marker, lookahead];
+        right = isolateCoverGrammar(parseUnaryExpression);
+
+        stack = [left, token, right];
+
+        while ((prec = binaryPrecedence(lookahead, state.allowIn)) > 0) {
+
+            // Reduce: make a binary expression from the three topmost entries.
+            while ((stack.length > 2) && (prec <= stack[stack.length - 2].prec)) {
+                right = stack.pop();
+                operator = stack.pop().value;
+                left = stack.pop();
+                markers.pop();
+                expr = new WrappingNode(markers[markers.length - 1]).finishBinaryExpression(operator, left, right);
+                stack.push(expr);
+            }
+
+            // Shift.
+            token = lex();
+            token.prec = prec;
+            stack.push(token);
+            markers.push(lookahead);
+            expr = isolateCoverGrammar(parseUnaryExpression);
+            stack.push(expr);
+        }
+
+        // Final reduce to clean-up the stack.
+        i = stack.length - 1;
+        expr = stack[i];
+        markers.pop();
+        while (i > 1) {
+            expr = new WrappingNode(markers.pop()).finishBinaryExpression(stack[i - 1].value, stack[i - 2], expr);
+            i -= 2;
+        }
+
+        return expr;
+    }
+
+
+    // ECMA-262 12.13 Conditional Operator
+
+    function parseConditionalExpression() {
+        var expr, previousAllowIn, consequent, alternate, startToken;
+
+        startToken = lookahead;
+
+        expr = inheritCoverGrammar(parseBinaryExpression);
+        if (match('?')) {
+            lex();
+            previousAllowIn = state.allowIn;
+            state.allowIn = true;
+            consequent = isolateCoverGrammar(parseAssignmentExpression);
+            state.allowIn = previousAllowIn;
+            expect(':');
+            alternate = isolateCoverGrammar(parseAssignmentExpression);
+
+            expr = new WrappingNode(startToken).finishConditionalExpression(expr, consequent, alternate);
+            isAssignmentTarget = isBindingElement = false;
+        }
+
+        return expr;
+    }
+
+    // ECMA-262 14.2 Arrow Function Definitions
+
+    function parseConciseBody() {
+        if (match('{')) {
+            return parseFunctionSourceElements();
+        }
+        return isolateCoverGrammar(parseAssignmentExpression);
+    }
+
+    function checkPatternParam(options, param) {
+        var i;
+        switch (param.type) {
+        case Syntax.Identifier:
+            validateParam(options, param, param.name);
+            break;
+        case Syntax.RestElement:
+            checkPatternParam(options, param.argument);
+            break;
+        case Syntax.AssignmentPattern:
+            checkPatternParam(options, param.left);
+            break;
+        case Syntax.ArrayPattern:
+            for (i = 0; i < param.elements.length; i++) {
+                if (param.elements[i] !== null) {
+                    checkPatternParam(options, param.elements[i]);
+                }
+            }
+            break;
+        case Syntax.YieldExpression:
+            break;
+        default:
+            assert(param.type === Syntax.ObjectPattern, 'Invalid type');
+            for (i = 0; i < param.properties.length; i++) {
+                checkPatternParam(options, param.properties[i].value);
+            }
+            break;
+        }
+    }
+    function reinterpretAsCoverFormalsList(expr) {
+        var i, len, param, params, defaults, defaultCount, options, token;
+
+        defaults = [];
+        defaultCount = 0;
+        params = [expr];
+
+        switch (expr.type) {
+        case Syntax.Identifier:
+            break;
+        case PlaceHolders.ArrowParameterPlaceHolder:
+            params = expr.params;
+            break;
+        default:
+            return null;
+        }
+
+        options = {
+            paramSet: {}
+        };
+
+        for (i = 0, len = params.length; i < len; i += 1) {
+            param = params[i];
+            switch (param.type) {
+            case Syntax.AssignmentPattern:
+                params[i] = param.left;
+                if (param.right.type === Syntax.YieldExpression) {
+                    if (param.right.argument) {
+                        throwUnexpectedToken(lookahead);
+                    }
+                    param.right.type = Syntax.Identifier;
+                    param.right.name = 'yield';
+                    delete param.right.argument;
+                    delete param.right.delegate;
+                }
+                defaults.push(param.right);
+                ++defaultCount;
+                checkPatternParam(options, param.left);
+                break;
+            default:
+                checkPatternParam(options, param);
+                params[i] = param;
+                defaults.push(null);
+                break;
+            }
+        }
+
+        if (strict || !state.allowYield) {
+            for (i = 0, len = params.length; i < len; i += 1) {
+                param = params[i];
+                if (param.type === Syntax.YieldExpression) {
+                    throwUnexpectedToken(lookahead);
+                }
+            }
+        }
+
+        if (options.message === Messages.StrictParamDupe) {
+            token = strict ? options.stricted : options.firstRestricted;
+            throwUnexpectedToken(token, options.message);
+        }
+
+        if (defaultCount === 0) {
+            defaults = [];
+        }
+
+        return {
+            params: params,
+            defaults: defaults,
+            stricted: options.stricted,
+            firstRestricted: options.firstRestricted,
+            message: options.message
+        };
+    }
+
+    function parseArrowFunctionExpression(options, node) {
+        var previousStrict, previousAllowYield, body;
+
+        if (hasLineTerminator) {
+            tolerateUnexpectedToken(lookahead);
+        }
+        expect('=>');
+
+        previousStrict = strict;
+        previousAllowYield = state.allowYield;
+        state.allowYield = true;
+
+        body = parseConciseBody();
+
+        if (strict && options.firstRestricted) {
+            throwUnexpectedToken(options.firstRestricted, options.message);
+        }
+        if (strict && options.stricted) {
+            tolerateUnexpectedToken(options.stricted, options.message);
+        }
+
+        strict = previousStrict;
+        state.allowYield = previousAllowYield;
+
+        return node.finishArrowFunctionExpression(options.params, options.defaults, body, body.type !== Syntax.BlockStatement);
+    }
+
+    // ECMA-262 14.4 Yield expression
+
+    function parseYieldExpression() {
+        var argument, expr, delegate, previousAllowYield;
+
+        argument = null;
+        expr = new Node();
+
+        expectKeyword('yield');
+
+        if (!hasLineTerminator) {
+            previousAllowYield = state.allowYield;
+            state.allowYield = false;
+            delegate = match('*');
+            if (delegate) {
+                lex();
+                argument = parseAssignmentExpression();
+            } else {
+                if (!match(';') && !match('}') && !match(')') && lookahead.type !== Token.EOF) {
+                    argument = parseAssignmentExpression();
+                }
+            }
+            state.allowYield = previousAllowYield;
+        }
+
+        return expr.finishYieldExpression(argument, delegate);
+    }
+
+    // ECMA-262 12.14 Assignment Operators
+
+    function parseAssignmentExpression() {
+        var token, expr, right, list, startToken;
+
+        startToken = lookahead;
+        token = lookahead;
+
+        if (!state.allowYield && matchKeyword('yield')) {
+            return parseYieldExpression();
+        }
+
+        expr = parseConditionalExpression();
+
+        if (expr.type === PlaceHolders.ArrowParameterPlaceHolder || match('=>')) {
+            isAssignmentTarget = isBindingElement = false;
+            list = reinterpretAsCoverFormalsList(expr);
+
+            if (list) {
+                firstCoverInitializedNameError = null;
+                return parseArrowFunctionExpression(list, new WrappingNode(startToken));
+            }
+
+            return expr;
+        }
+
+        if (matchAssign()) {
+            if (!isAssignmentTarget) {
+                tolerateError(Messages.InvalidLHSInAssignment);
+            }
+
+            // ECMA-262 12.1.1
+            if (strict && expr.type === Syntax.Identifier) {
+                if (isRestrictedWord(expr.name)) {
+                    tolerateUnexpectedToken(token, Messages.StrictLHSAssignment);
+                }
+                if (isStrictModeReservedWord(expr.name)) {
+                    tolerateUnexpectedToken(token, Messages.StrictReservedWord);
+                }
+            }
+
+            if (!match('=')) {
+                isAssignmentTarget = isBindingElement = false;
+            } else {
+                reinterpretExpressionAsPattern(expr);
+            }
+
+            token = lex();
+            right = isolateCoverGrammar(parseAssignmentExpression);
+            expr = new WrappingNode(startToken).finishAssignmentExpression(token.value, expr, right);
+            firstCoverInitializedNameError = null;
+        }
+
+        return expr;
+    }
+
+    // ECMA-262 12.15 Comma Operator
+
+    function parseExpression() {
+        var expr, startToken = lookahead, expressions;
+
+        expr = isolateCoverGrammar(parseAssignmentExpression);
+
+        if (match(',')) {
+            expressions = [expr];
+
+            while (startIndex < length) {
+                if (!match(',')) {
+                    break;
+                }
+                lex();
+                expressions.push(isolateCoverGrammar(parseAssignmentExpression));
+            }
+
+            expr = new WrappingNode(startToken).finishSequenceExpression(expressions);
+        }
+
+        return expr;
+    }
+
+    // ECMA-262 13.2 Block
+
+    function parseStatementListItem() {
+        if (lookahead.type === Token.Keyword) {
+            switch (lookahead.value) {
+            case 'export':
+                if (state.sourceType !== 'module') {
+                    tolerateUnexpectedToken(lookahead, Messages.IllegalExportDeclaration);
+                }
+                return parseExportDeclaration();
+            case 'import':
+                if (state.sourceType !== 'module') {
+                    tolerateUnexpectedToken(lookahead, Messages.IllegalImportDeclaration);
+                }
+                return parseImportDeclaration();
+            case 'const':
+            case 'let':
+                return parseLexicalDeclaration({inFor: false});
+            case 'function':
+                return parseFunctionDeclaration(new Node());
+            case 'class':
+                return parseClassDeclaration();
+            }
+        }
+
+        return parseStatement();
+    }
+
+    function parseStatementList() {
+        var list = [];
+        while (startIndex < length) {
+            if (match('}')) {
+                break;
+            }
+            list.push(parseStatementListItem());
+        }
+
+        return list;
+    }
+
+    function parseBlock() {
+        var block, node = new Node();
+
+        expect('{');
+
+        block = parseStatementList();
+
+        expect('}');
+
+        return node.finishBlockStatement(block);
+    }
+
+    // ECMA-262 13.3.2 Variable Statement
+
+    function parseVariableIdentifier(kind) {
+        var token, node = new Node();
+
+        token = lex();
+
+        if (token.type === Token.Keyword && token.value === 'yield') {
+            if (strict) {
+                tolerateUnexpectedToken(token, Messages.StrictReservedWord);
+            } if (!state.allowYield) {
+                throwUnexpectedToken(token);
+            }
+        } else if (token.type !== Token.Identifier) {
+            if (strict && token.type === Token.Keyword && isStrictModeReservedWord(token.value)) {
+                tolerateUnexpectedToken(token, Messages.StrictReservedWord);
+            } else {
+                if (strict || token.value !== 'let' || kind !== 'var') {
+                    throwUnexpectedToken(token);
+                }
+            }
+        } else if (state.sourceType === 'module' && token.type === Token.Identifier && token.value === 'await') {
+            tolerateUnexpectedToken(token);
+        }
+
+        return node.finishIdentifier(token.value);
+    }
+
+    function parseVariableDeclaration(options) {
+        var init = null, id, node = new Node(), params = [];
+
+        id = parsePattern(params, 'var');
+
+        // ECMA-262 12.2.1
+        if (strict && isRestrictedWord(id.name)) {
+            tolerateError(Messages.StrictVarName);
+        }
+
+        if (match('=')) {
+            lex();
+            init = isolateCoverGrammar(parseAssignmentExpression);
+        } else if (id.type !== Syntax.Identifier && !options.inFor) {
+            expect('=');
+        }
+
+        return node.finishVariableDeclarator(id, init);
+    }
+
+    function parseVariableDeclarationList(options) {
+        var list = [];
+
+        do {
+            list.push(parseVariableDeclaration({ inFor: options.inFor }));
+            if (!match(',')) {
+                break;
+            }
+            lex();
+        } while (startIndex < length);
+
+        return list;
+    }
+
+    function parseVariableStatement(node) {
+        var declarations;
+
+        expectKeyword('var');
+
+        declarations = parseVariableDeclarationList({ inFor: false });
+
+        consumeSemicolon();
+
+        return node.finishVariableDeclaration(declarations);
+    }
+
+    // ECMA-262 13.3.1 Let and Const Declarations
+
+    function parseLexicalBinding(kind, options) {
+        var init = null, id, node = new Node(), params = [];
+
+        id = parsePattern(params, kind);
+
+        // ECMA-262 12.2.1
+        if (strict && id.type === Syntax.Identifier && isRestrictedWord(id.name)) {
+            tolerateError(Messages.StrictVarName);
+        }
+
+        if (kind === 'const') {
+            if (!matchKeyword('in') && !matchContextualKeyword('of')) {
+                expect('=');
+                init = isolateCoverGrammar(parseAssignmentExpression);
+            }
+        } else if ((!options.inFor && id.type !== Syntax.Identifier) || match('=')) {
+            expect('=');
+            init = isolateCoverGrammar(parseAssignmentExpression);
+        }
+
+        return node.finishVariableDeclarator(id, init);
+    }
+
+    function parseBindingList(kind, options) {
+        var list = [];
+
+        do {
+            list.push(parseLexicalBinding(kind, options));
+            if (!match(',')) {
+                break;
+            }
+            lex();
+        } while (startIndex < length);
+
+        return list;
+    }
+
+    function parseLexicalDeclaration(options) {
+        var kind, declarations, node = new Node();
+
+        kind = lex().value;
+        assert(kind === 'let' || kind === 'const', 'Lexical declaration must be either let or const');
+
+        declarations = parseBindingList(kind, options);
+
+        consumeSemicolon();
+
+        return node.finishLexicalDeclaration(declarations, kind);
+    }
+
+    function parseRestElement(params) {
+        var param, node = new Node();
+
+        lex();
+
+        if (match('{')) {
+            throwError(Messages.ObjectPatternAsRestParameter);
+        }
+
+        params.push(lookahead);
+
+        param = parseVariableIdentifier();
+
+        if (match('=')) {
+            throwError(Messages.DefaultRestParameter);
+        }
+
+        if (!match(')')) {
+            throwError(Messages.ParameterAfterRestParameter);
+        }
+
+        return node.finishRestElement(param);
+    }
+
+    // ECMA-262 13.4 Empty Statement
+
+    function parseEmptyStatement(node) {
+        expect(';');
+        return node.finishEmptyStatement();
+    }
+
+    // ECMA-262 12.4 Expression Statement
+
+    function parseExpressionStatement(node) {
+        var expr = parseExpression();
+        consumeSemicolon();
+        return node.finishExpressionStatement(expr);
+    }
+
+    // ECMA-262 13.6 If statement
+
+    function parseIfStatement(node) {
+        var test, consequent, alternate;
+
+        expectKeyword('if');
+
+        expect('(');
+
+        test = parseExpression();
+
+        expect(')');
+
+        consequent = parseStatement();
+
+        if (matchKeyword('else')) {
+            lex();
+            alternate = parseStatement();
+        } else {
+            alternate = null;
+        }
+
+        return node.finishIfStatement(test, consequent, alternate);
+    }
+
+    // ECMA-262 13.7 Iteration Statements
+
+    function parseDoWhileStatement(node) {
+        var body, test, oldInIteration;
+
+        expectKeyword('do');
+
+        oldInIteration = state.inIteration;
+        state.inIteration = true;
+
+        body = parseStatement();
+
+        state.inIteration = oldInIteration;
+
+        expectKeyword('while');
+
+        expect('(');
+
+        test = parseExpression();
+
+        expect(')');
+
+        if (match(';')) {
+            lex();
+        }
+
+        return node.finishDoWhileStatement(body, test);
+    }
+
+    function parseWhileStatement(node) {
+        var test, body, oldInIteration;
+
+        expectKeyword('while');
+
+        expect('(');
+
+        test = parseExpression();
+
+        expect(')');
+
+        oldInIteration = state.inIteration;
+        state.inIteration = true;
+
+        body = parseStatement();
+
+        state.inIteration = oldInIteration;
+
+        return node.finishWhileStatement(test, body);
+    }
+
+    function parseForStatement(node) {
+        var init, forIn, initSeq, initStartToken, test, update, left, right, kind, declarations,
+            body, oldInIteration, previousAllowIn = state.allowIn;
+
+        init = test = update = null;
+        forIn = true;
+
+        expectKeyword('for');
+
+        expect('(');
+
+        if (match(';')) {
+            lex();
+        } else {
+            if (matchKeyword('var')) {
+                init = new Node();
+                lex();
+
+                state.allowIn = false;
+                declarations = parseVariableDeclarationList({ inFor: true });
+                state.allowIn = previousAllowIn;
+
+                if (declarations.length === 1 && matchKeyword('in')) {
+                    init = init.finishVariableDeclaration(declarations);
+                    lex();
+                    left = init;
+                    right = parseExpression();
+                    init = null;
+                } else if (declarations.length === 1 && declarations[0].init === null && matchContextualKeyword('of')) {
+                    init = init.finishVariableDeclaration(declarations);
+                    lex();
+                    left = init;
+                    right = parseAssignmentExpression();
+                    init = null;
+                    forIn = false;
+                } else {
+                    init = init.finishVariableDeclaration(declarations);
+                    expect(';');
+                }
+            } else if (matchKeyword('const') || matchKeyword('let')) {
+                init = new Node();
+                kind = lex().value;
+
+                state.allowIn = false;
+                declarations = parseBindingList(kind, {inFor: true});
+                state.allowIn = previousAllowIn;
+
+                if (declarations.length === 1 && declarations[0].init === null && matchKeyword('in')) {
+                    init = init.finishLexicalDeclaration(declarations, kind);
+                    lex();
+                    left = init;
+                    right = parseExpression();
+                    init = null;
+                } else if (declarations.length === 1 && declarations[0].init === null && matchContextualKeyword('of')) {
+                    init = init.finishLexicalDeclaration(declarations, kind);
+                    lex();
+                    left = init;
+                    right = parseAssignmentExpression();
+                    init = null;
+                    forIn = false;
+                } else {
+                    consumeSemicolon();
+                    init = init.finishLexicalDeclaration(declarations, kind);
+                }
+            } else {
+                initStartToken = lookahead;
+                state.allowIn = false;
+                init = inheritCoverGrammar(parseAssignmentExpression);
+                state.allowIn = previousAllowIn;
+
+                if (matchKeyword('in')) {
+                    if (!isAssignmentTarget) {
+                        tolerateError(Messages.InvalidLHSInForIn);
+                    }
+
+                    lex();
+                    reinterpretExpressionAsPattern(init);
+                    left = init;
+                    right = parseExpression();
+                    init = null;
+                } else if (matchContextualKeyword('of')) {
+                    if (!isAssignmentTarget) {
+                        tolerateError(Messages.InvalidLHSInForLoop);
+                    }
+
+                    lex();
+                    reinterpretExpressionAsPattern(init);
+                    left = init;
+                    right = parseAssignmentExpression();
+                    init = null;
+                    forIn = false;
+                } else {
+                    if (match(',')) {
+                        initSeq = [init];
+                        while (match(',')) {
+                            lex();
+                            initSeq.push(isolateCoverGrammar(parseAssignmentExpression));
+                        }
+                        init = new WrappingNode(initStartToken).finishSequenceExpression(initSeq);
+                    }
+                    expect(';');
+                }
+            }
+        }
+
+        if (typeof left === 'undefined') {
+
+            if (!match(';')) {
+                test = parseExpression();
+            }
+            expect(';');
+
+            if (!match(')')) {
+                update = parseExpression();
+            }
+        }
+
+        expect(')');
+
+        oldInIteration = state.inIteration;
+        state.inIteration = true;
+
+        body = isolateCoverGrammar(parseStatement);
+
+        state.inIteration = oldInIteration;
+
+        return (typeof left === 'undefined') ?
+                node.finishForStatement(init, test, update, body) :
+                forIn ? node.finishForInStatement(left, right, body) :
+                    node.finishForOfStatement(left, right, body);
+    }
+
+    // ECMA-262 13.8 The continue statement
+
+    function parseContinueStatement(node) {
+        var label = null, key;
+
+        expectKeyword('continue');
+
+        // Optimize the most common form: 'continue;'.
+        if (source.charCodeAt(startIndex) === 0x3B) {
+            lex();
+
+            if (!state.inIteration) {
+                throwError(Messages.IllegalContinue);
+            }
+
+            return node.finishContinueStatement(null);
+        }
+
+        if (hasLineTerminator) {
+            if (!state.inIteration) {
+                throwError(Messages.IllegalContinue);
+            }
+
+            return node.finishContinueStatement(null);
+        }
+
+        if (lookahead.type === Token.Identifier) {
+            label = parseVariableIdentifier();
+
+            key = '$' + label.name;
+            if (!Object.prototype.hasOwnProperty.call(state.labelSet, key)) {
+                throwError(Messages.UnknownLabel, label.name);
+            }
+        }
+
+        consumeSemicolon();
+
+        if (label === null && !state.inIteration) {
+            throwError(Messages.IllegalContinue);
+        }
+
+        return node.finishContinueStatement(label);
+    }
+
+    // ECMA-262 13.9 The break statement
+
+    function parseBreakStatement(node) {
+        var label = null, key;
+
+        expectKeyword('break');
+
+        // Catch the very common case first: immediately a semicolon (U+003B).
+        if (source.charCodeAt(lastIndex) === 0x3B) {
+            lex();
+
+            if (!(state.inIteration || state.inSwitch)) {
+                throwError(Messages.IllegalBreak);
+            }
+
+            return node.finishBreakStatement(null);
+        }
+
+        if (hasLineTerminator) {
+            if (!(state.inIteration || state.inSwitch)) {
+                throwError(Messages.IllegalBreak);
+            }
+
+            return node.finishBreakStatement(null);
+        }
+
+        if (lookahead.type === Token.Identifier) {
+            label = parseVariableIdentifier();
+
+            key = '$' + label.name;
+            if (!Object.prototype.hasOwnProperty.call(state.labelSet, key)) {
+                throwError(Messages.UnknownLabel, label.name);
+            }
+        }
+
+        consumeSemicolon();
+
+        if (label === null && !(state.inIteration || state.inSwitch)) {
+            throwError(Messages.IllegalBreak);
+        }
+
+        return node.finishBreakStatement(label);
+    }
+
+    // ECMA-262 13.10 The return statement
+
+    function parseReturnStatement(node) {
+        var argument = null;
+
+        expectKeyword('return');
+
+        if (!state.inFunctionBody) {
+            tolerateError(Messages.IllegalReturn);
+        }
+
+        // 'return' followed by a space and an identifier is very common.
+        if (source.charCodeAt(lastIndex) === 0x20) {
+            if (isIdentifierStart(source.charCodeAt(lastIndex + 1))) {
+                argument = parseExpression();
+                consumeSemicolon();
+                return node.finishReturnStatement(argument);
+            }
+        }
+
+        if (hasLineTerminator) {
+            // HACK
+            return node.finishReturnStatement(null);
+        }
+
+        if (!match(';')) {
+            if (!match('}') && lookahead.type !== Token.EOF) {
+                argument = parseExpression();
+            }
+        }
+
+        consumeSemicolon();
+
+        return node.finishReturnStatement(argument);
+    }
+
+    // ECMA-262 13.11 The with statement
+
+    function parseWithStatement(node) {
+        var object, body;
+
+        if (strict) {
+            tolerateError(Messages.StrictModeWith);
+        }
+
+        expectKeyword('with');
+
+        expect('(');
+
+        object = parseExpression();
+
+        expect(')');
+
+        body = parseStatement();
+
+        return node.finishWithStatement(object, body);
+    }
+
+    // ECMA-262 13.12 The switch statement
+
+    function parseSwitchCase() {
+        var test, consequent = [], statement, node = new Node();
+
+        if (matchKeyword('default')) {
+            lex();
+            test = null;
+        } else {
+            expectKeyword('case');
+            test = parseExpression();
+        }
+        expect(':');
+
+        while (startIndex < length) {
+            if (match('}') || matchKeyword('default') || matchKeyword('case')) {
+                break;
+            }
+            statement = parseStatementListItem();
+            consequent.push(statement);
+        }
+
+        return node.finishSwitchCase(test, consequent);
+    }
+
+    function parseSwitchStatement(node) {
+        var discriminant, cases, clause, oldInSwitch, defaultFound;
+
+        expectKeyword('switch');
+
+        expect('(');
+
+        discriminant = parseExpression();
+
+        expect(')');
+
+        expect('{');
+
+        cases = [];
+
+        if (match('}')) {
+            lex();
+            return node.finishSwitchStatement(discriminant, cases);
+        }
+
+        oldInSwitch = state.inSwitch;
+        state.inSwitch = true;
+        defaultFound = false;
+
+        while (startIndex < length) {
+            if (match('}')) {
+                break;
+            }
+            clause = parseSwitchCase();
+            if (clause.test === null) {
+                if (defaultFound) {
+                    throwError(Messages.MultipleDefaultsInSwitch);
+                }
+                defaultFound = true;
+            }
+            cases.push(clause);
+        }
+
+        state.inSwitch = oldInSwitch;
+
+        expect('}');
+
+        return node.finishSwitchStatement(discriminant, cases);
+    }
+
+    // ECMA-262 13.14 The throw statement
+
+    function parseThrowStatement(node) {
+        var argument;
+
+        expectKeyword('throw');
+
+        if (hasLineTerminator) {
+            throwError(Messages.NewlineAfterThrow);
+        }
+
+        argument = parseExpression();
+
+        consumeSemicolon();
+
+        return node.finishThrowStatement(argument);
+    }
+
+    // ECMA-262 13.15 The try statement
+
+    function parseCatchClause() {
+        var param, params = [], paramMap = {}, key, i, body, node = new Node();
+
+        expectKeyword('catch');
+
+        expect('(');
+        if (match(')')) {
+            throwUnexpectedToken(lookahead);
+        }
+
+        param = parsePattern(params);
+        for (i = 0; i < params.length; i++) {
+            key = '$' + params[i].value;
+            if (Object.prototype.hasOwnProperty.call(paramMap, key)) {
+                tolerateError(Messages.DuplicateBinding, params[i].value);
+            }
+            paramMap[key] = true;
+        }
+
+        // ECMA-262 12.14.1
+        if (strict && isRestrictedWord(param.name)) {
+            tolerateError(Messages.StrictCatchVariable);
+        }
+
+        expect(')');
+        body = parseBlock();
+        return node.finishCatchClause(param, body);
+    }
+
+    function parseTryStatement(node) {
+        var block, handler = null, finalizer = null;
+
+        expectKeyword('try');
+
+        block = parseBlock();
+
+        if (matchKeyword('catch')) {
+            handler = parseCatchClause();
+        }
+
+        if (matchKeyword('finally')) {
+            lex();
+            finalizer = parseBlock();
+        }
+
+        if (!handler && !finalizer) {
+            throwError(Messages.NoCatchOrFinally);
+        }
+
+        return node.finishTryStatement(block, handler, finalizer);
+    }
+
+    // ECMA-262 13.16 The debugger statement
+
+    function parseDebuggerStatement(node) {
+        expectKeyword('debugger');
+
+        consumeSemicolon();
+
+        return node.finishDebuggerStatement();
+    }
+
+    // 13 Statements
+
+    function parseStatement() {
+        var type = lookahead.type,
+            expr,
+            labeledBody,
+            key,
+            node;
+
+        if (type === Token.EOF) {
+            throwUnexpectedToken(lookahead);
+        }
+
+        if (type === Token.Punctuator && lookahead.value === '{') {
+            return parseBlock();
+        }
+        isAssignmentTarget = isBindingElement = true;
+        node = new Node();
+
+        if (type === Token.Punctuator) {
+            switch (lookahead.value) {
+            case ';':
+                return parseEmptyStatement(node);
+            case '(':
+                return parseExpressionStatement(node);
+            default:
+                break;
+            }
+        } else if (type === Token.Keyword) {
+            switch (lookahead.value) {
+            case 'break':
+                return parseBreakStatement(node);
+            case 'continue':
+                return parseContinueStatement(node);
+            case 'debugger':
+                return parseDebuggerStatement(node);
+            case 'do':
+                return parseDoWhileStatement(node);
+            case 'for':
+                return parseForStatement(node);
+            case 'function':
+                return parseFunctionDeclaration(node);
+            case 'if':
+                return parseIfStatement(node);
+            case 'return':
+                return parseReturnStatement(node);
+            case 'switch':
+                return parseSwitchStatement(node);
+            case 'throw':
+                return parseThrowStatement(node);
+            case 'try':
+                return parseTryStatement(node);
+            case 'var':
+                return parseVariableStatement(node);
+            case 'while':
+                return parseWhileStatement(node);
+            case 'with':
+                return parseWithStatement(node);
+            default:
+                break;
+            }
+        }
+
+        expr = parseExpression();
+
+        // ECMA-262 12.12 Labelled Statements
+        if ((expr.type === Syntax.Identifier) && match(':')) {
+            lex();
+
+            key = '$' + expr.name;
+            if (Object.prototype.hasOwnProperty.call(state.labelSet, key)) {
+                throwError(Messages.Redeclaration, 'Label', expr.name);
+            }
+
+            state.labelSet[key] = true;
+            labeledBody = parseStatement();
+            delete state.labelSet[key];
+            return node.finishLabeledStatement(expr, labeledBody);
+        }
+
+        consumeSemicolon();
+
+        return node.finishExpressionStatement(expr);
+    }
+
+    // ECMA-262 14.1 Function Definition
+
+    function parseFunctionSourceElements() {
+        var statement, body = [], token, directive, firstRestricted,
+            oldLabelSet, oldInIteration, oldInSwitch, oldInFunctionBody, oldParenthesisCount,
+            node = new Node();
+
+        expect('{');
+
+        while (startIndex < length) {
+            if (lookahead.type !== Token.StringLiteral) {
+                break;
+            }
+            token = lookahead;
+
+            statement = parseStatementListItem();
+            body.push(statement);
+            if (statement.expression.type !== Syntax.Literal) {
+                // this is not directive
+                break;
+            }
+            directive = source.slice(token.start + 1, token.end - 1);
+            if (directive === 'use strict') {
+                strict = true;
+                if (firstRestricted) {
+                    tolerateUnexpectedToken(firstRestricted, Messages.StrictOctalLiteral);
+                }
+            } else {
+                if (!firstRestricted && token.octal) {
+                    firstRestricted = token;
+                }
+            }
+        }
+
+        oldLabelSet = state.labelSet;
+        oldInIteration = state.inIteration;
+        oldInSwitch = state.inSwitch;
+        oldInFunctionBody = state.inFunctionBody;
+        oldParenthesisCount = state.parenthesizedCount;
+
+        state.labelSet = {};
+        state.inIteration = false;
+        state.inSwitch = false;
+        state.inFunctionBody = true;
+        state.parenthesizedCount = 0;
+
+        while (startIndex < length) {
+            if (match('}')) {
+                break;
+            }
+            body.push(parseStatementListItem());
+        }
+
+        expect('}');
+
+        state.labelSet = oldLabelSet;
+        state.inIteration = oldInIteration;
+        state.inSwitch = oldInSwitch;
+        state.inFunctionBody = oldInFunctionBody;
+        state.parenthesizedCount = oldParenthesisCount;
+
+        return node.finishBlockStatement(body);
+    }
+
+    function validateParam(options, param, name) {
+        var key = '$' + name;
+        if (strict) {
+            if (isRestrictedWord(name)) {
+                options.stricted = param;
+                options.message = Messages.StrictParamName;
+            }
+            if (Object.prototype.hasOwnProperty.call(options.paramSet, key)) {
+                options.stricted = param;
+                options.message = Messages.StrictParamDupe;
+            }
+        } else if (!options.firstRestricted) {
+            if (isRestrictedWord(name)) {
+                options.firstRestricted = param;
+                options.message = Messages.StrictParamName;
+            } else if (isStrictModeReservedWord(name)) {
+                options.firstRestricted = param;
+                options.message = Messages.StrictReservedWord;
+            } else if (Object.prototype.hasOwnProperty.call(options.paramSet, key)) {
+                options.stricted = param;
+                options.message = Messages.StrictParamDupe;
+            }
+        }
+        options.paramSet[key] = true;
+    }
+
+    function parseParam(options) {
+        var token, param, params = [], i, def;
+
+        token = lookahead;
+        if (token.value === '...') {
+            param = parseRestElement(params);
+            validateParam(options, param.argument, param.argument.name);
+            options.params.push(param);
+            options.defaults.push(null);
+            return false;
+        }
+
+        param = parsePatternWithDefault(params);
+        for (i = 0; i < params.length; i++) {
+            validateParam(options, params[i], params[i].value);
+        }
+
+        if (param.type === Syntax.AssignmentPattern) {
+            def = param.right;
+            param = param.left;
+            ++options.defaultCount;
+        }
+
+        options.params.push(param);
+        options.defaults.push(def);
+
+        return !match(')');
+    }
+
+    function parseParams(firstRestricted) {
+        var options;
+
+        options = {
+            params: [],
+            defaultCount: 0,
+            defaults: [],
+            firstRestricted: firstRestricted
+        };
+
+        expect('(');
+
+        if (!match(')')) {
+            options.paramSet = {};
+            while (startIndex < length) {
+                if (!parseParam(options)) {
+                    break;
+                }
+                expect(',');
+            }
+        }
+
+        expect(')');
+
+        if (options.defaultCount === 0) {
+            options.defaults = [];
+        }
+
+        return {
+            params: options.params,
+            defaults: options.defaults,
+            stricted: options.stricted,
+            firstRestricted: options.firstRestricted,
+            message: options.message
+        };
+    }
+
+    function parseFunctionDeclaration(node, identifierIsOptional) {
+        var id = null, params = [], defaults = [], body, token, stricted, tmp, firstRestricted, message, previousStrict,
+            isGenerator, previousAllowYield;
+
+        previousAllowYield = state.allowYield;
+
+        expectKeyword('function');
+
+        isGenerator = match('*');
+        if (isGenerator) {
+            lex();
+        }
+
+        if (!identifierIsOptional || !match('(')) {
+            token = lookahead;
+            id = parseVariableIdentifier();
+            if (strict) {
+                if (isRestrictedWord(token.value)) {
+                    tolerateUnexpectedToken(token, Messages.StrictFunctionName);
+                }
+            } else {
+                if (isRestrictedWord(token.value)) {
+                    firstRestricted = token;
+                    message = Messages.StrictFunctionName;
+                } else if (isStrictModeReservedWord(token.value)) {
+                    firstRestricted = token;
+                    message = Messages.StrictReservedWord;
+                }
+            }
+        }
+
+        state.allowYield = !isGenerator;
+        tmp = parseParams(firstRestricted);
+        params = tmp.params;
+        defaults = tmp.defaults;
+        stricted = tmp.stricted;
+        firstRestricted = tmp.firstRestricted;
+        if (tmp.message) {
+            message = tmp.message;
+        }
+
+
+        previousStrict = strict;
+        body = parseFunctionSourceElements();
+        if (strict && firstRestricted) {
+            throwUnexpectedToken(firstRestricted, message);
+        }
+        if (strict && stricted) {
+            tolerateUnexpectedToken(stricted, message);
+        }
+
+        strict = previousStrict;
+        state.allowYield = previousAllowYield;
+
+        return node.finishFunctionDeclaration(id, params, defaults, body, isGenerator);
+    }
+
+    function parseFunctionExpression() {
+        var token, id = null, stricted, firstRestricted, message, tmp,
+            params = [], defaults = [], body, previousStrict, node = new Node(),
+            isGenerator, previousAllowYield;
+
+        previousAllowYield = state.allowYield;
+
+        expectKeyword('function');
+
+        isGenerator = match('*');
+        if (isGenerator) {
+            lex();
+        }
+
+        state.allowYield = !isGenerator;
+        if (!match('(')) {
+            token = lookahead;
+            id = (!strict && !isGenerator && matchKeyword('yield')) ? parseNonComputedProperty() : parseVariableIdentifier();
+            if (strict) {
+                if (isRestrictedWord(token.value)) {
+                    tolerateUnexpectedToken(token, Messages.StrictFunctionName);
+                }
+            } else {
+                if (isRestrictedWord(token.value)) {
+                    firstRestricted = token;
+                    message = Messages.StrictFunctionName;
+                } else if (isStrictModeReservedWord(token.value)) {
+                    firstRestricted = token;
+                    message = Messages.StrictReservedWord;
+                }
+            }
+        }
+
+        tmp = parseParams(firstRestricted);
+        params = tmp.params;
+        defaults = tmp.defaults;
+        stricted = tmp.stricted;
+        firstRestricted = tmp.firstRestricted;
+        if (tmp.message) {
+            message = tmp.message;
+        }
+
+        previousStrict = strict;
+        body = parseFunctionSourceElements();
+        if (strict && firstRestricted) {
+            throwUnexpectedToken(firstRestricted, message);
+        }
+        if (strict && stricted) {
+            tolerateUnexpectedToken(stricted, message);
+        }
+        strict = previousStrict;
+        state.allowYield = previousAllowYield;
+
+        return node.finishFunctionExpression(id, params, defaults, body, isGenerator);
+    }
+
+    // ECMA-262 14.5 Class Definitions
+
+    function parseClassBody() {
+        var classBody, token, isStatic, hasConstructor = false, body, method, computed, key;
+
+        classBody = new Node();
+
+        expect('{');
+        body = [];
+        while (!match('}')) {
+            if (match(';')) {
+                lex();
+            } else {
+                method = new Node();
+                token = lookahead;
+                isStatic = false;
+                computed = match('[');
+                if (match('*')) {
+                    lex();
+                } else {
+                    key = parseObjectPropertyKey();
+                    if (key.name === 'static' && (lookaheadPropertyName() || match('*'))) {
+                        token = lookahead;
+                        isStatic = true;
+                        computed = match('[');
+                        if (match('*')) {
+                            lex();
+                        } else {
+                            key = parseObjectPropertyKey();
+                        }
+                    }
+                }
+                method = tryParseMethodDefinition(token, key, computed, method);
+                if (method) {
+                    method['static'] = isStatic; // jscs:ignore requireDotNotation
+                    if (method.kind === 'init') {
+                        method.kind = 'method';
+                    }
+                    if (!isStatic) {
+                        if (!method.computed && (method.key.name || method.key.value.toString()) === 'constructor') {
+                            if (method.kind !== 'method' || !method.method || method.value.generator) {
+                                throwUnexpectedToken(token, Messages.ConstructorSpecialMethod);
+                            }
+                            if (hasConstructor) {
+                                throwUnexpectedToken(token, Messages.DuplicateConstructor);
+                            } else {
+                                hasConstructor = true;
+                            }
+                            method.kind = 'constructor';
+                        }
+                    } else {
+                        if (!method.computed && (method.key.name || method.key.value.toString()) === 'prototype') {
+                            throwUnexpectedToken(token, Messages.StaticPrototype);
+                        }
+                    }
+                    method.type = Syntax.MethodDefinition;
+                    delete method.method;
+                    delete method.shorthand;
+                    body.push(method);
+                } else {
+                    throwUnexpectedToken(lookahead);
+                }
+            }
+        }
+        lex();
+        return classBody.finishClassBody(body);
+    }
+
+    function parseClassDeclaration(identifierIsOptional) {
+        var id = null, superClass = null, classNode = new Node(), classBody, previousStrict = strict;
+        strict = true;
+
+        expectKeyword('class');
+
+        if (!identifierIsOptional || lookahead.type === Token.Identifier) {
+            id = parseVariableIdentifier();
+        }
+
+        if (matchKeyword('extends')) {
+            lex();
+            superClass = isolateCoverGrammar(parseLeftHandSideExpressionAllowCall);
+        }
+        classBody = parseClassBody();
+        strict = previousStrict;
+
+        return classNode.finishClassDeclaration(id, superClass, classBody);
+    }
+
+    function parseClassExpression() {
+        var id = null, superClass = null, classNode = new Node(), classBody, previousStrict = strict;
+        strict = true;
+
+        expectKeyword('class');
+
+        if (lookahead.type === Token.Identifier) {
+            id = parseVariableIdentifier();
+        }
+
+        if (matchKeyword('extends')) {
+            lex();
+            superClass = isolateCoverGrammar(parseLeftHandSideExpressionAllowCall);
+        }
+        classBody = parseClassBody();
+        strict = previousStrict;
+
+        return classNode.finishClassExpression(id, superClass, classBody);
+    }
+
+    // ECMA-262 15.2 Modules
+
+    function parseModuleSpecifier() {
+        var node = new Node();
+
+        if (lookahead.type !== Token.StringLiteral) {
+            throwError(Messages.InvalidModuleSpecifier);
+        }
+        return node.finishLiteral(lex());
+    }
+
+    // ECMA-262 15.2.3 Exports
+
+    function parseExportSpecifier() {
+        var exported, local, node = new Node(), def;
+        if (matchKeyword('default')) {
+            // export {default} from 'something';
+            def = new Node();
+            lex();
+            local = def.finishIdentifier('default');
+        } else {
+            local = parseVariableIdentifier();
+        }
+        if (matchContextualKeyword('as')) {
+            lex();
+            exported = parseNonComputedProperty();
+        }
+        return node.finishExportSpecifier(local, exported);
+    }
+
+    function parseExportNamedDeclaration(node) {
+        var declaration = null,
+            isExportFromIdentifier,
+            src = null, specifiers = [];
+
+        // non-default export
+        if (lookahead.type === Token.Keyword) {
+            // covers:
+            // export var f = 1;
+            switch (lookahead.value) {
+                case 'let':
+                case 'const':
+                case 'var':
+                case 'class':
+                case 'function':
+                    declaration = parseStatementListItem();
+                    return node.finishExportNamedDeclaration(declaration, specifiers, null);
+            }
+        }
+
+        expect('{');
+        while (!match('}')) {
+            isExportFromIdentifier = isExportFromIdentifier || matchKeyword('default');
+            specifiers.push(parseExportSpecifier());
+            if (!match('}')) {
+                expect(',');
+                if (match('}')) {
+                    break;
+                }
+            }
+        }
+        expect('}');
+
+        if (matchContextualKeyword('from')) {
+            // covering:
+            // export {default} from 'foo';
+            // export {foo} from 'foo';
+            lex();
+            src = parseModuleSpecifier();
+            consumeSemicolon();
+        } else if (isExportFromIdentifier) {
+            // covering:
+            // export {default}; // missing fromClause
+            throwError(lookahead.value ?
+                    Messages.UnexpectedToken : Messages.MissingFromClause, lookahead.value);
+        } else {
+            // cover
+            // export {foo};
+            consumeSemicolon();
+        }
+        return node.finishExportNamedDeclaration(declaration, specifiers, src);
+    }
+
+    function parseExportDefaultDeclaration(node) {
+        var declaration = null,
+            expression = null;
+
+        // covers:
+        // export default ...
+        expectKeyword('default');
+
+        if (matchKeyword('function')) {
+            // covers:
+            // export default function foo () {}
+            // export default function () {}
+            declaration = parseFunctionDeclaration(new Node(), true);
+            return node.finishExportDefaultDeclaration(declaration);
+        }
+        if (matchKeyword('class')) {
+            declaration = parseClassDeclaration(true);
+            return node.finishExportDefaultDeclaration(declaration);
+        }
+
+        if (matchContextualKeyword('from')) {
+            throwError(Messages.UnexpectedToken, lookahead.value);
+        }
+
+        // covers:
+        // export default {};
+        // export default [];
+        // export default (1 + 2);
+        if (match('{')) {
+            expression = parseObjectInitializer();
+        } else if (match('[')) {
+            expression = parseArrayInitializer();
+        } else {
+            expression = parseAssignmentExpression();
+        }
+        consumeSemicolon();
+        return node.finishExportDefaultDeclaration(expression);
+    }
+
+    function parseExportAllDeclaration(node) {
+        var src;
+
+        // covers:
+        // export * from 'foo';
+        expect('*');
+        if (!matchContextualKeyword('from')) {
+            throwError(lookahead.value ?
+                    Messages.UnexpectedToken : Messages.MissingFromClause, lookahead.value);
+        }
+        lex();
+        src = parseModuleSpecifier();
+        consumeSemicolon();
+
+        return node.finishExportAllDeclaration(src);
+    }
+
+    function parseExportDeclaration() {
+        var node = new Node();
+        if (state.inFunctionBody) {
+            throwError(Messages.IllegalExportDeclaration);
+        }
+
+        expectKeyword('export');
+
+        if (matchKeyword('default')) {
+            return parseExportDefaultDeclaration(node);
+        }
+        if (match('*')) {
+            return parseExportAllDeclaration(node);
+        }
+        return parseExportNamedDeclaration(node);
+    }
+
+    // ECMA-262 15.2.2 Imports
+
+    function parseImportSpecifier() {
+        // import {<foo as bar>} ...;
+        var local, imported, node = new Node();
+
+        imported = parseNonComputedProperty();
+        if (matchContextualKeyword('as')) {
+            lex();
+            local = parseVariableIdentifier();
+        }
+
+        return node.finishImportSpecifier(local, imported);
+    }
+
+    function parseNamedImports() {
+        var specifiers = [];
+        // {foo, bar as bas}
+        expect('{');
+        while (!match('}')) {
+            specifiers.push(parseImportSpecifier());
+            if (!match('}')) {
+                expect(',');
+                if (match('}')) {
+                    break;
+                }
+            }
+        }
+        expect('}');
+        return specifiers;
+    }
+
+    function parseImportDefaultSpecifier() {
+        // import <foo> ...;
+        var local, node = new Node();
+
+        local = parseNonComputedProperty();
+
+        return node.finishImportDefaultSpecifier(local);
+    }
+
+    function parseImportNamespaceSpecifier() {
+        // import <* as foo> ...;
+        var local, node = new Node();
+
+        expect('*');
+        if (!matchContextualKeyword('as')) {
+            throwError(Messages.NoAsAfterImportNamespace);
+        }
+        lex();
+        local = parseNonComputedProperty();
+
+        return node.finishImportNamespaceSpecifier(local);
+    }
+
+    function parseImportDeclaration() {
+        var specifiers = [], src, node = new Node();
+
+        if (state.inFunctionBody) {
+            throwError(Messages.IllegalImportDeclaration);
+        }
+
+        expectKeyword('import');
+
+        if (lookahead.type === Token.StringLiteral) {
+            // import 'foo';
+            src = parseModuleSpecifier();
+        } else {
+
+            if (match('{')) {
+                // import {bar}
+                specifiers = specifiers.concat(parseNamedImports());
+            } else if (match('*')) {
+                // import * as foo
+                specifiers.push(parseImportNamespaceSpecifier());
+            } else if (isIdentifierName(lookahead) && !matchKeyword('default')) {
+                // import foo
+                specifiers.push(parseImportDefaultSpecifier());
+                if (match(',')) {
+                    lex();
+                    if (match('*')) {
+                        // import foo, * as foo
+                        specifiers.push(parseImportNamespaceSpecifier());
+                    } else if (match('{')) {
+                        // import foo, {bar}
+                        specifiers = specifiers.concat(parseNamedImports());
+                    } else {
+                        throwUnexpectedToken(lookahead);
+                    }
+                }
+            } else {
+                throwUnexpectedToken(lex());
+            }
+
+            if (!matchContextualKeyword('from')) {
+                throwError(lookahead.value ?
+                        Messages.UnexpectedToken : Messages.MissingFromClause, lookahead.value);
+            }
+            lex();
+            src = parseModuleSpecifier();
+        }
+
+        consumeSemicolon();
+        return node.finishImportDeclaration(specifiers, src);
+    }
+
+    // ECMA-262 15.1 Scripts
+
+    function parseScriptBody() {
+        var statement, body = [], token, directive, firstRestricted;
+
+        while (startIndex < length) {
+            token = lookahead;
+            if (token.type !== Token.StringLiteral) {
+                break;
+            }
+
+            statement = parseStatementListItem();
+            body.push(statement);
+            if (statement.expression.type !== Syntax.Literal) {
+                // this is not directive
+                break;
+            }
+            directive = source.slice(token.start + 1, token.end - 1);
+            if (directive === 'use strict') {
+                strict = true;
+                if (firstRestricted) {
+                    tolerateUnexpectedToken(firstRestricted, Messages.StrictOctalLiteral);
+                }
+            } else {
+                if (!firstRestricted && token.octal) {
+                    firstRestricted = token;
+                }
+            }
+        }
+
+        while (startIndex < length) {
+            statement = parseStatementListItem();
+            /* istanbul ignore if */
+            if (typeof statement === 'undefined') {
+                break;
+            }
+            body.push(statement);
+        }
+        return body;
+    }
+
+    function parseProgram() {
+        var body, node;
+
+        peek();
+        node = new Node();
+
+        body = parseScriptBody();
+        return node.finishProgram(body, state.sourceType);
+    }
+
+    function filterTokenLocation() {
+        var i, entry, token, tokens = [];
+
+        for (i = 0; i < extra.tokens.length; ++i) {
+            entry = extra.tokens[i];
+            token = {
+                type: entry.type,
+                value: entry.value
+            };
+            if (entry.regex) {
+                token.regex = {
+                    pattern: entry.regex.pattern,
+                    flags: entry.regex.flags
+                };
+            }
+            if (extra.range) {
+                token.range = entry.range;
+            }
+            if (extra.loc) {
+                token.loc = entry.loc;
+            }
+            tokens.push(token);
+        }
+
+        extra.tokens = tokens;
+    }
+
+    function tokenize(code, options) {
+        var toString,
+            tokens;
+
+        toString = String;
+        if (typeof code !== 'string' && !(code instanceof String)) {
+            code = toString(code);
+        }
+
+        source = code;
+        index = 0;
+        lineNumber = (source.length > 0) ? 1 : 0;
+        lineStart = 0;
+        startIndex = index;
+        startLineNumber = lineNumber;
+        startLineStart = lineStart;
+        length = source.length;
+        lookahead = null;
+        state = {
+            allowIn: true,
+            allowYield: true,
+            labelSet: {},
+            inFunctionBody: false,
+            inIteration: false,
+            inSwitch: false,
+            lastCommentStart: -1,
+            curlyStack: []
+        };
+
+        extra = {};
+
+        // Options matching.
+        options = options || {};
+
+        // Of course we collect tokens here.
+        options.tokens = true;
+        extra.tokens = [];
+        extra.tokenize = true;
+        // The following two fields are necessary to compute the Regex tokens.
+        extra.openParenToken = -1;
+        extra.openCurlyToken = -1;
+
+        extra.range = (typeof options.range === 'boolean') && options.range;
+        extra.loc = (typeof options.loc === 'boolean') && options.loc;
+
+        if (typeof options.comment === 'boolean' && options.comment) {
+            extra.comments = [];
+        }
+        if (typeof options.tolerant === 'boolean' && options.tolerant) {
+            extra.errors = [];
+        }
+
+        try {
+            peek();
+            if (lookahead.type === Token.EOF) {
+                return extra.tokens;
+            }
+
+            lex();
+            while (lookahead.type !== Token.EOF) {
+                try {
+                    lex();
+                } catch (lexError) {
+                    if (extra.errors) {
+                        recordError(lexError);
+                        // We have to break on the first error
+                        // to avoid infinite loops.
+                        break;
+                    } else {
+                        throw lexError;
+                    }
+                }
+            }
+
+            filterTokenLocation();
+            tokens = extra.tokens;
+            if (typeof extra.comments !== 'undefined') {
+                tokens.comments = extra.comments;
+            }
+            if (typeof extra.errors !== 'undefined') {
+                tokens.errors = extra.errors;
+            }
+        } catch (e) {
+            throw e;
+        } finally {
+            extra = {};
+        }
+        return tokens;
+    }
+
+    function parse(code, options) {
+        var program, toString;
+
+        toString = String;
+        if (typeof code !== 'string' && !(code instanceof String)) {
+            code = toString(code);
+        }
+
+        source = code;
+        index = 0;
+        lineNumber = (source.length > 0) ? 1 : 0;
+        lineStart = 0;
+        startIndex = index;
+        startLineNumber = lineNumber;
+        startLineStart = lineStart;
+        length = source.length;
+        lookahead = null;
+        state = {
+            allowIn: true,
+            allowYield: true,
+            labelSet: {},
+            inFunctionBody: false,
+            inIteration: false,
+            inSwitch: false,
+            lastCommentStart: -1,
+            curlyStack: [],
+            sourceType: 'script'
+        };
+        strict = false;
+
+        extra = {};
+        if (typeof options !== 'undefined') {
+            extra.range = (typeof options.range === 'boolean') && options.range;
+            extra.loc = (typeof options.loc === 'boolean') && options.loc;
+            extra.attachComment = (typeof options.attachComment === 'boolean') && options.attachComment;
+
+            if (extra.loc && options.source !== null && options.source !== undefined) {
+                extra.source = toString(options.source);
+            }
+
+            if (typeof options.tokens === 'boolean' && options.tokens) {
+                extra.tokens = [];
+            }
+            if (typeof options.comment === 'boolean' && options.comment) {
+                extra.comments = [];
+            }
+            if (typeof options.tolerant === 'boolean' && options.tolerant) {
+                extra.errors = [];
+            }
+            if (extra.attachComment) {
+                extra.range = true;
+                extra.comments = [];
+                extra.bottomRightStack = [];
+                extra.trailingComments = [];
+                extra.leadingComments = [];
+            }
+            if (options.sourceType === 'module') {
+                // very restrictive condition for now
+                state.sourceType = options.sourceType;
+                strict = true;
+            }
+        }
+
+        try {
+            program = parseProgram();
+            if (typeof extra.comments !== 'undefined') {
+                program.comments = extra.comments;
+            }
+            if (typeof extra.tokens !== 'undefined') {
+                filterTokenLocation();
+                program.tokens = extra.tokens;
+            }
+            if (typeof extra.errors !== 'undefined') {
+                program.errors = extra.errors;
+            }
+        } catch (e) {
+            throw e;
+        } finally {
+            extra = {};
+        }
+
+        return program;
+    }
+
+    // Sync with *.json manifests.
+    exports.version = '2.6.0';
+
+    exports.tokenize = tokenize;
+
+    exports.parse = parse;
+
+    // Deep copy.
+    /* istanbul ignore next */
+    exports.Syntax = (function () {
+        var name, types = {};
+
+        if (typeof Object.create === 'function') {
+            types = Object.create(null);
+        }
+
+        for (name in Syntax) {
+            if (Syntax.hasOwnProperty(name)) {
+                types[name] = Syntax[name];
+            }
+        }
+
+        if (typeof Object.freeze === 'function') {
+            Object.freeze(types);
+        }
+
+        return types;
+    }());
+
+}));
diff --git a/Source/WebInspectorUI/UserInterface/FilterBar.css b/Source/WebInspectorUI/UserInterface/FilterBar.css
deleted file mode 100644
index 1f6d6d774..000000000
--- a/Source/WebInspectorUI/UserInterface/FilterBar.css
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.filter-bar {
-    display: -webkit-flex;
-
-    height: 21px;
-
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.filter-bar > input[type="search"] {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-
-    margin: 1px 6px;
-
-    outline: none;
-
-    -webkit-appearance: none;
-
-    border: 1px solid rgba(0, 0, 0, 0.35);
-    border-radius: 10px;
-    background-color: rgba(255, 255, 255, 0.2);
-    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
-    background-clip: padding-box;
-
-    height: 19px;
-
-    transition: background-color 200ms ease-in-out;
-}
-
-.filter-bar > input[type="search"]::-webkit-input-placeholder {
-    color: rgba(0, 0, 0, 0.35);
-}
-
-.filter-bar > input[type="search"]:focus { background-color: white; }
-.filter-bar > input[type="search"]:not(:placeholder-shown) { background-color: white; } /* Needs to be a separate rule. See http://webkit.org/b/118162 */
-
-.filter-bar > input[type="search"]::-webkit-search-decoration {
-    width: 13px;
-    height: 13px;
-
-    margin-left: 1px;
-    margin-right: 3px;
-
-    vertical-align: bottom;
-
-    background-image: url(Images/FilterFieldGlyph.pdf);
-
-    -webkit-appearance: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/FilterBar.js b/Source/WebInspectorUI/UserInterface/FilterBar.js
deleted file mode 100644
index e254b70ef..000000000
--- a/Source/WebInspectorUI/UserInterface/FilterBar.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FilterBar = function(element) {
-    WebInspector.Object.call(this);
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.FilterBar.StyleClassName);
-
-    this._inputField = document.createElement("input");
-    this._inputField.type = "search";
-    this._inputField.spellcheck = false;
-    this._inputField.incremental = true;
-    this._inputField.addEventListener("search", this._inputFieldChanged.bind(this), false);
-    this._element.appendChild(this._inputField);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.FilterBar);
-
-WebInspector.FilterBar.StyleClassName = "filter-bar";
-
-WebInspector.FilterBar.Event = {
-    TextFilterDidChange: "filter-bar-text-filter-did-change"
-};
-
-WebInspector.FilterBar.prototype = {
-    constructor: WebInspector.FilterBar,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get placeholder()
-    {
-        return this._inputField.getAttribute("placeholder");
-    },
-
-    set placeholder(text)
-    {
-        this._inputField.setAttribute("placeholder", text);
-    },
-
-    get inputField()
-    {
-        return this._inputField;
-    },
-
-    get filters()
-    {
-        return {text: this._inputField.value};
-    },
-
-    set filters(filters)
-    {
-        filters = filters || {};
-
-        var oldTextValue = this._inputField.value;
-        this._inputField.value = filters.text || "";
-        if (oldTextValue !== this._inputField.value)
-            this._inputFieldChanged();
-    },
-
-    hasActiveFilters: function()
-    {
-        if (this._inputField.value)
-            return true;
-        return false;
-    },
-
-    // Private
-
-    _inputFieldChanged: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.FilterBar.Event.TextFilterDidChange);
-    }
-};
-
-WebInspector.FilterBar.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FindBanner.css b/Source/WebInspectorUI/UserInterface/FindBanner.css
deleted file mode 100644
index ab495d6b7..000000000
--- a/Source/WebInspectorUI/UserInterface/FindBanner.css
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.find-banner {
-    border-bottom: 1px solid rgb(153, 153, 153);
-
-    font-family: "Lucida Grande", sans-serif;
-    font-size: 11px;
-
-    position: absolute;
-    top: -22px;
-    left: 0;
-    right: 0;
-    height: 22px;
-
-    text-align: right;
-
-    white-space: nowrap;
-    overflow: hidden;
-
-    -webkit-transition-property: top;
-    -webkit-transition-duration: 200ms;
-    -webkit-transition-timing-function: ease-in;
-
-    z-index: 500;
-}
-
-.find-banner.showing {
-    top: 0;
-    -webkit-transition-timing-function: ease-out;
-}
-
-.find-banner.no-find-banner-transition,
-.supports-find-banner.no-find-banner-transition {
-    -webkit-transition-duration: 0 !important;
-}
-
-.supports-find-banner {
-    -webkit-transition-property: top;
-    -webkit-transition-duration: 200ms;
-    -webkit-transition-timing-function: ease-in;
-}
-
-.supports-find-banner.showing-find-banner {
-    top: 22px !important;
-    -webkit-transition-timing-function: ease-out;
-}
-
-.find-banner > :first-child {
-    margin-left: 8px !important;
-}
-
-.find-banner > :last-child {
-    margin-right: 8px !important;
-}
-
-.find-banner > input[type="search"] {
-    margin: 1px 4px;
-
-    width: 143px;
-    height: 19px;
-
-    vertical-align: top;
-
-    -webkit-appearance: none;
-
-    outline: none;
-
-    border: 1px solid rgb(146, 146, 146);
-    border-radius: 4px;
-    background-color: white;
-    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
-}
-
-.find-banner > button {
-    margin: 1px 4px;
-
-    padding-left: 6px;
-    padding-right: 6px;
-
-    -webkit-appearance: none;
-
-    border-radius: 4px;
-    border: 1px solid rgb(146, 146, 146);
-
-    background-color: white;
-    background-image: none;
-    box-shadow: none;
-
-    line-height: 11px;
-
-    height: 19px;
-
-    text-align: center;
-    vertical-align: top;
-
-    outline-offset: -2px;
-}
-
-.find-banner > button > .glyph {
-    display: inline-block;
-
-    width: 7px;
-    height: 7px;
-}
-
-.find-banner > button:disabled > .glyph {
-    opacity: 0.65;
-}
-
-.find-banner > button:active:not(:disabled) {
-    border: 1px solid rgb(141, 141, 141);
-    background-image: -webkit-linear-gradient(top, rgb(200, 200, 200), rgb(218, 218, 218));
-    box-shadow: rgba(255, 255, 255, 0.33) 0 1px 0, inset rgb(165, 165, 165) 0 1px 1px;
-}
-
-.find-banner > button:disabled {
-    border: 1px solid rgb(195, 195, 195);
-    background-image: none;
-}
-
-.find-banner > button.segmented.left {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-
-    margin-right: 0;
-
-    padding-left: 6px;
-    padding-right: 6px;
-}
-
-.find-banner > button.segmented.left > .glyph {
-    background-image: -webkit-canvas(find-banner-previous-arrow-normal);
-    background-size: 7px 7px;
-    background-repeat: no-repeat;
-}
-
-.find-banner > button.segmented.left:active:not(:disabled) > .glyph {
-    background-image: -webkit-canvas(find-banner-previous-arrow-normal-active);
-}
-
-.find-banner > button.segmented.right {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-
-    margin-left: -1px;
-
-    padding-left: 5px;
-    padding-right: 7px;
-}
-
-.find-banner > button.segmented.right > .glyph {
-    background-image: -webkit-canvas(find-banner-next-arrow-normal);
-    background-size: 7px 7px;
-    background-repeat: no-repeat;
-}
-
-.find-banner > button.segmented.right:active:not(:disabled) > .glyph {
-    background-image: -webkit-canvas(find-banner-next-arrow-normal-active);
-}
-
-.find-banner > button.segmented {
-    min-width: 22px;
-}
-
-.find-banner > button.segmented:active {
-    z-index: 100;
-    position: relative;
-}
-
-.find-banner > label {
-    margin: 0 6px;
-    line-height: 21px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/FindBanner.js b/Source/WebInspectorUI/UserInterface/FindBanner.js
deleted file mode 100644
index 8d1249fc3..000000000
--- a/Source/WebInspectorUI/UserInterface/FindBanner.js
+++ /dev/null
@@ -1,334 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FindBanner = function(delegate, element) {
-    WebInspector.Object.call(this);
-
-    this._delegate = delegate || null;
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.FindBanner.StyleClassName);
-
-    this._resultCountLabel = document.createElement("label");
-    this._element.appendChild(this._resultCountLabel);
-
-    this._previousResultButton = document.createElement("button");
-    this._previousResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
-    this._previousResultButton.classList.add(WebInspector.FindBanner.LeftSegmentButtonStyleClassName);
-    this._previousResultButton.disabled = true;
-    this._previousResultButton.addEventListener("click", this._previousResultButtonClicked.bind(this));
-    this._element.appendChild(this._previousResultButton);
-
-    var previousResultButtonGlyphElement = document.createElement("div");
-    previousResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
-    this._previousResultButton.appendChild(previousResultButtonGlyphElement);
-
-    this._nextResultButton = document.createElement("button");
-    this._nextResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
-    this._nextResultButton.classList.add(WebInspector.FindBanner.RightSegmentButtonStyleClassName);
-    this._nextResultButton.disabled = true;
-    this._nextResultButton.addEventListener("click", this._nextResultButtonClicked.bind(this));
-    this._element.appendChild(this._nextResultButton);
-
-    var nextResultButtonGlyphElement = document.createElement("div");
-    nextResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
-    this._nextResultButton.appendChild(nextResultButtonGlyphElement);
-
-    this._inputField = document.createElement("input");
-    this._inputField.type = "search";
-    this._inputField.spellcheck = false;
-    this._inputField.incremental = true;
-    this._inputField.setAttribute("results", 5);
-    this._inputField.setAttribute("autosave", "inspector-search");
-    this._inputField.addEventListener("keydown", this._inputFieldKeyDown.bind(this), false);
-    this._inputField.addEventListener("keyup", this._inputFieldKeyUp.bind(this), false);
-    this._inputField.addEventListener("search", this._inputFieldSearch.bind(this), false);
-    this._element.appendChild(this._inputField);
-
-    this._doneButton = document.createElement("button");
-    this._doneButton.textContent = WebInspector.UIString("Done");
-    this._doneButton.addEventListener("click", this._doneButtonClicked.bind(this));
-    this._element.appendChild(this._doneButton);
-
-    this._numberOfResults = null;
-    this._searchBackwards = false;
-    this._searchKeyPressed = false;
-    this._previousSearchValue = "";
-
-    this._hideKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this.hide.bind(this), this._element);
-    this._populateFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "E", this._populateSearchQueryFromSelection.bind(this));
-    this._populateFindKeyboardShortcut.implicitlyPreventsDefault = false;
-    this._findNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "G", this._nextResultButtonClicked.bind(this));
-    this._findPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.Command, "G", this._previousResultButtonClicked.bind(this));
-
-    this._generateButtonsGlyphsIfNeeded();
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.FindBanner);
-
-WebInspector.FindBanner.StyleClassName = "find-banner";
-WebInspector.FindBanner.SupportsFindBannerStyleClassName = "supports-find-banner";
-WebInspector.FindBanner.ShowingFindBannerStyleClassName = "showing-find-banner";
-WebInspector.FindBanner.NoTransitionStyleClassName = "no-find-banner-transition";
-WebInspector.FindBanner.ShowingStyleClassName = "showing";
-WebInspector.FindBanner.SegmentedButtonStyleClassName = "segmented";
-WebInspector.FindBanner.LeftSegmentButtonStyleClassName = "left";
-WebInspector.FindBanner.RightSegmentButtonStyleClassName = "right";
-WebInspector.FindBanner.SegmentGlyphStyleClassName = "glyph";
-
-WebInspector.FindBanner.Event = {
-    DidShow: "find-banner-did-show",
-    DidHide: "find-banner-did-hide"
-}
-
-WebInspector.FindBanner.prototype = {
-    constructor: WebInspector.FindBanner,
-
-    // Public
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    set delegate(newDelegate)
-    {
-        this._delegate = newDelegate || null;
-    },
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get inputField()
-    {
-        return this._inputField;
-    },
-
-    get searchQuery()
-    {
-        return this._inputField.value || "";
-    },
-
-    set searchQuery(query)
-    {
-        this._inputField.value = query || "";
-    },
-
-    get numberOfResults()
-    {
-        return this._numberOfResults;
-    },
-
-    set numberOfResults(numberOfResults)
-    {
-        if (numberOfResults === undefined || isNaN(numberOfResults))
-            numberOfResults = null;
-
-        this._numberOfResults = numberOfResults;
-
-        this._previousResultButton.disabled = this._nextResultButton.disabled = (numberOfResults <= 0);
-
-        if (numberOfResults === null)
-            this._resultCountLabel.textContent = "";
-        else if (numberOfResults <= 0)
-            this._resultCountLabel.textContent = WebInspector.UIString("Not found");
-        else if (numberOfResults === 1)
-            this._resultCountLabel.textContent = WebInspector.UIString("1 match");
-        else if (numberOfResults > 1)
-            this._resultCountLabel.textContent = WebInspector.UIString("%d matches").format(numberOfResults);
-    },
-
-    get targetElement()
-    {
-        return this._targetElement;
-    },
-
-    set targetElement(element)
-    {
-        if (this._targetElement) {
-            var oldTargetElement = this._targetElement;
-
-            this._targetElement.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
-            this._targetElement.classList.remove(WebInspector.FindBanner.SupportsFindBannerStyleClassName);
-            this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
-
-            this._element.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
-            this._element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
-
-            function delayedWork()
-            {
-                oldTargetElement.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
-                this._element.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
-            }
-
-            // Delay so we can remove the no transition style class after the other style changes are committed.
-            setTimeout(delayedWork.bind(this), 0);
-        }
-
-        this._targetElement = element || null;
-
-        if (this._targetElement)
-            this._targetElement.classList.add(WebInspector.FindBanner.SupportsFindBannerStyleClassName);
-    },
-
-    get showing()
-    {
-        return this._element.classList.contains(WebInspector.FindBanner.ShowingStyleClassName);
-    },
-
-    show: function()
-    {
-        console.assert(this._targetElement);
-        if (!this._targetElement)
-            return;
-
-        console.assert(this._targetElement.parentNode);
-        if (!this._targetElement.parentNode)
-            return;
-
-        if (this._element.parentNode !== this._targetElement.parentNode)
-            this._targetElement.parentNode.insertBefore(this._element, this._targetElement);
-
-        function delayedWork()
-        {
-            this._targetElement.classList.add(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
-            this._element.classList.add(WebInspector.FindBanner.ShowingStyleClassName);
-
-            this._inputField.select();
-        }
-
-        // Delay adding the classes in case the target element and/or the find banner were just added to
-        // the document. Adding the class right away will prevent the animation from working the firs time.
-        setTimeout(delayedWork.bind(this), 0);
-
-        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidShow);
-    },
-
-    hide: function()
-    {
-        console.assert(this._targetElement);
-        if (!this._targetElement)
-            return;
-
-        this._inputField.blur();
-
-        this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
-        this._element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
-
-        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidHide);
-    },
-
-    // Private
-
-    _inputFieldKeyDown: function(event)
-    {
-        if (event.keyIdentifier === "Shift")
-            this._searchBackwards = true;
-        else if (event.keyIdentifier === "Enter")
-            this._searchKeyPressed = true;
-    },
-
-    _inputFieldKeyUp: function(event)
-    {
-        if (event.keyIdentifier === "Shift")
-            this._searchBackwards = false;
-        else if (event.keyIdentifier === "Enter")
-            this._searchKeyPressed = false;
-    },
-
-    _inputFieldSearch: function(event)
-    {
-        if (this._inputField.value) {
-            if (this._previousSearchValue !== this.searchQuery) {
-                if (this._delegate && typeof this._delegate.findBannerPerformSearch === "function")
-                    this._delegate.findBannerPerformSearch(this, this.searchQuery);
-            } else if (this._searchKeyPressed && this._numberOfResults > 0) {
-                if (this._searchBackwards) {
-                    if (this._delegate && typeof this._delegate.findBannerRevealPreviousResult === "function")
-                        this._delegate.findBannerRevealPreviousResult(this);
-                } else {
-                    if (this._delegate && typeof this._delegate.findBannerRevealNextResult === "function")
-                        this._delegate.findBannerRevealNextResult(this);
-                }
-            }
-        } else {
-            this.numberOfResults = null;
-
-            if (this._delegate && typeof this._delegate.findBannerSearchCleared === "function")
-                this._delegate.findBannerSearchCleared(this);
-        }
-
-        this._previousSearchValue = this.searchQuery;
-    },
-
-    _populateSearchQueryFromSelection: function(event)
-    {
-        if (this._delegate && typeof this._delegate.findBannerSearchQueryForSelection === "function") {
-            var query = this._delegate.findBannerSearchQueryForSelection(this);
-            if (query) {
-                this.searchQuery = query;
-
-                if (this._delegate && typeof this._delegate.findBannerPerformSearch === "function")
-                    this._delegate.findBannerPerformSearch(this, this.searchQuery);
-            }
-        }
-    },
-
-    _previousResultButtonClicked: function(event)
-    {
-        if (this._delegate && typeof this._delegate.findBannerRevealPreviousResult === "function")
-            this._delegate.findBannerRevealPreviousResult(this);
-    },
-
-    _nextResultButtonClicked: function(event)
-    {
-        if (this._delegate && typeof this._delegate.findBannerRevealNextResult === "function")
-            this._delegate.findBannerRevealNextResult(this);
-    },
-
-    _doneButtonClicked: function(event)
-    {
-        this.hide();
-    },
-
-    _generateButtonsGlyphsIfNeeded: function()
-    {
-        if (WebInspector.FindBanner._generatedButtonsGlyphs)
-            return;
-
-        WebInspector.FindBanner._generatedButtonsGlyphs = true;
-
-        var specifications = {};
-        specifications["normal"] = {fillColor: [81, 81, 81]};
-        specifications["normal-active"] = {fillColor: [37, 37, 37]};
-
-        generateColoredImagesForCSS("Images/BackArrow.pdf", specifications, 7, 7, "find-banner-previous-arrow-");
-        generateColoredImagesForCSS("Images/ForwardArrow.pdf", specifications, 7, 7, "find-banner-next-arrow-");
-    }
-};
-
-WebInspector.FindBanner.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.css b/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.css
deleted file mode 100644
index 8613b6aea..000000000
--- a/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.navigation-bar .item.flexible-space,
-.toolbar .item.flexible-space {
-    -webkit-flex: 1;
-}
diff --git a/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.js b/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.js
deleted file mode 100644
index ae576ff6c..000000000
--- a/Source/WebInspectorUI/UserInterface/FlexibleSpaceNavigationItem.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FlexibleSpaceNavigationItem = function(identifier) {
-    WebInspector.NavigationItem.call(this, identifier);
-};
-
-WebInspector.FlexibleSpaceNavigationItem.StyleClassName = "flexible-space";
-
-WebInspector.FlexibleSpaceNavigationItem.prototype = {
-    constructor: WebInspector.FlexibleSpaceNavigationItem,
-
-    // Private
-
-    _additionalClassNames: [WebInspector.FlexibleSpaceNavigationItem.StyleClassName],
-};
-
-WebInspector.FlexibleSpaceNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FolderIcon.css b/Source/WebInspectorUI/UserInterface/FolderIcon.css
deleted file mode 100644
index 0c6a061c2..000000000
--- a/Source/WebInspectorUI/UserInterface/FolderIcon.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.folder-icon .icon {
-    content: -webkit-image-set(url(Images/FolderGeneric.png) 1x, url(Images/FolderGeneric@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/FolderTreeElement.js b/Source/WebInspectorUI/UserInterface/FolderTreeElement.js
deleted file mode 100644
index 3d460a1a1..000000000
--- a/Source/WebInspectorUI/UserInterface/FolderTreeElement.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FolderTreeElement = function(title, subtitle, representedObject)
-{
-    WebInspector.GeneralTreeElement.call(this, WebInspector.FolderTreeElement.FolderIconStyleClassName, title, subtitle, representedObject, true);
-
-    this.small = true;
-};
-
-WebInspector.FolderTreeElement.FolderIconStyleClassName = "folder-icon";
-
-WebInspector.FolderTreeElement.prototype = {
-    constructor: WebInspector.FolderTreeElement,
-
-    // No Methods or Properties
-};
-
-WebInspector.FolderTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FontResourceContentView.css b/Source/WebInspectorUI/UserInterface/FontResourceContentView.css
deleted file mode 100644
index d14382db0..000000000
--- a/Source/WebInspectorUI/UserInterface/FontResourceContentView.css
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.resource.font {
-    display: -webkit-flex;
-
-    -webkit-justify-content: center;
-
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    display: -webkit-flex;
-
-    -webkit-justify-content: center;
-}
-
-.content-view.resource.font .preview {
-    font-size: 72px;
-    font-family: serif;
-
-    white-space: nowrap;
-
- /* A border is used instead of padding or margin so when there is scrolling
-    overflow there will be space on all sides. It also avoids having to account
-    for the padding/margin in FontResourceContentView.siteToFit. */
-    border: 15px solid transparent;
-
-    margin: auto 0;
-}
-
-.content-view.resource.font .preview > .line {
-    border-left: 1px solid lightgrey;
-    border-right: 1px solid lightgrey;
-
-    margin-top: -1px; /* Causes adjacent .line elements to share one border instead of doubling up. */
-}
-
-.content-view.resource.font .preview > .line > .content {
-    display: inline-block;
-
-    width: 100%;
-
-    text-align: center;
-    text-rendering: optimizeLegibility;
-
-    -webkit-user-select: text;
-    cursor: text;
-}
-
-.content-view.resource.font .preview > .line > .metric {
-    display: inline-block;
-
-    width: 100%;
-    height: 1px;
-
-    margin-right: -100%; /* Causes this element to be zero width and draw behind the text. */
-}
-
-.content-view.resource.font .metric.top {
-    vertical-align: top;
-    background-color: lightgrey;
-}
-
-.content-view.resource.font .metric.baseline {
-    vertical-align: baseline;
-    background-color: lightblue;
-}
-
-.content-view.resource.font .metric.middle {
-    vertical-align: middle;
-    background-color: lightgreen;
-}
-
-.content-view.resource.font .metric.xheight {
-    vertical-align: 1ex;
-    background-color: pink;
-}
-
-.content-view.resource.font .metric.bottom {
-    vertical-align: bottom;
-    background-color: lightgrey;
-}
diff --git a/Source/WebInspectorUI/UserInterface/FontResourceContentView.js b/Source/WebInspectorUI/UserInterface/FontResourceContentView.js
deleted file mode 100644
index d415ac350..000000000
--- a/Source/WebInspectorUI/UserInterface/FontResourceContentView.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FontResourceContentView = function(resource)
-{
-    WebInspector.ResourceContentView.call(this, resource, WebInspector.FontResourceContentView.StyleClassName);
-
-    this._styleElement = null;
-    this._previewElement = null;
-};
-
-WebInspector.FontResourceContentView._uniqueFontIdentifier = 0;
-
-WebInspector.FontResourceContentView.StyleClassName = "font";
-WebInspector.FontResourceContentView.PreviewElementStyleClassName = "preview";
-WebInspector.FontResourceContentView.LineElementStyleClassName = "line";
-WebInspector.FontResourceContentView.ContentElementStyleClassName = "content";
-WebInspector.FontResourceContentView.MetricElementStyleClassName = "metric";
-WebInspector.FontResourceContentView.TopMetricElementStyleClassName = "top";
-WebInspector.FontResourceContentView.XHeightMetricElementStyleClassName = "xheight";
-WebInspector.FontResourceContentView.MiddleMetricElementStyleClassName = "middle";
-WebInspector.FontResourceContentView.BaselineMetricElementStyleClassName = "baseline";
-WebInspector.FontResourceContentView.BottomMetricElementStyleClassName = "bottom";
-WebInspector.FontResourceContentView.PreviewLines = ["ABCDEFGHIJKLM", "NOPQRSTUVWXYZ", "abcdefghijklm", "nopqrstuvwxyz", "1234567890"];
-
-WebInspector.FontResourceContentView.MaximumFontSize = 72;
-WebInspector.FontResourceContentView.MinimumFontSize = 12;
-
-WebInspector.FontResourceContentView.prototype = {
-    constructor: WebInspector.FontResourceContentView,
-
-    // Public
-
-    get previewElement()
-    {
-        return this._previewElement;
-    },
-
-    sizeToFit: function()
-    {
-        if (!this._previewElement)
-            return;
-
-        // Start at the maximum size and try progressively smaller font sizes until minimum is reached or the preview element is not as wide as the main element.
-        for (var fontSize = WebInspector.FontResourceContentView.MaximumFontSize; fontSize >= WebInspector.FontResourceContentView.MinimumFontSize; fontSize -= 5) {
-            this._previewElement.style.fontSize = fontSize + "px";
-            if (this._previewElement.offsetWidth <= this.element.offsetWidth)
-                break;
-        }
-    },
-
-    contentAvailable: function(content, base64Encoded)
-    {
-        this.element.removeChildren();
-
-        const uniqueFontName = "WebInspectorFontPreview" + (++WebInspector.FontResourceContentView._uniqueFontIdentifier);
-
-        var format = "";
-
-        // We need to specify a format when loading SVG fonts to make them work.
-        if (this.resource.mimeType === "image/svg+xml")
-            format = " format(\"svg\")";
-
-        if (this._styleElement && this._styleElement.parentNode)
-            this._styleElement.parentNode.removeChild(this._styleElement);
-
-        this._styleElement = document.createElement("style");
-        this._styleElement.textContent = "@font-face { font-family: \"" + uniqueFontName + "\"; src: url(" + this.resource.contentURL + ")" + format + "; }";
-
-        // The style element will be added when shown later if we are not visible now.
-        if (this.visible)
-            document.head.appendChild(this._styleElement);
-
-        this._previewElement = document.createElement("div");
-        this._previewElement.className = WebInspector.FontResourceContentView.PreviewElementStyleClassName;
-        this._previewElement.style.fontFamily = uniqueFontName;
-
-        function createMetricElement(className)
-        {
-            var metricElement = document.createElement("div");
-            metricElement.className = WebInspector.FontResourceContentView.MetricElementStyleClassName + " " + className;
-            return metricElement;
-        }
-
-        var lines = WebInspector.FontResourceContentView.PreviewLines;
-        for (var i = 0; i < lines.length; ++i) {
-            var lineElement = document.createElement("div");
-            lineElement.className = WebInspector.FontResourceContentView.LineElementStyleClassName;
-
-            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.TopMetricElementStyleClassName));
-            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.XHeightMetricElementStyleClassName));
-            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.MiddleMetricElementStyleClassName));
-            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.BaselineMetricElementStyleClassName));
-            lineElement.appendChild(createMetricElement(WebInspector.FontResourceContentView.BottomMetricElementStyleClassName));
-
-            var contentElement = document.createElement("div");
-            contentElement.className = WebInspector.FontResourceContentView.ContentElementStyleClassName;
-            contentElement.textContent = lines[i];
-            lineElement.appendChild(contentElement);
-
-            this._previewElement.appendChild(lineElement);
-        }
-
-        this.element.appendChild(this._previewElement);
-
-        this.sizeToFit();
-    },
-
-    updateLayout: function()
-    {
-        this.sizeToFit();
-    },
-
-    shown: function()
-    {
-        // Add the style element since it is removed when hidden.
-        if (this._styleElement)
-            document.head.appendChild(this._styleElement);
-    },
-
-    hidden: function()
-    {
-        // Remove the style element so it will not stick around when this content view is destroyed.
-        if (this._styleElement && this._styleElement.parentNode)
-            this._styleElement.parentNode.removeChild(this._styleElement);
-    }
-};
-
-WebInspector.FontResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Formatter.js b/Source/WebInspectorUI/UserInterface/Formatter.js
deleted file mode 100644
index 524e50d5a..000000000
--- a/Source/WebInspectorUI/UserInterface/Formatter.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-function Formatter(codeMirror, builder)
-{
-    console.assert(codeMirror);
-    console.assert(builder);
-
-    this._codeMirror = codeMirror;
-    this._builder = builder;
-
-    this._lastToken = null;
-    this._lastContent = "";
-};
-
-Formatter.prototype = {
-    constructor: Formatter,
-
-    // Public
-
-    format: function(from, to)
-    {
-        console.assert(this._builder.originalContent === null);
-        if (this._builder.originalContent !== null)
-            return;
-
-        var outerMode = this._codeMirror.getMode();
-        var content = this._codeMirror.getRange(from, to);
-        var state = CodeMirror.copyState(outerMode, this._codeMirror.getTokenAt(from).state);
-        this._builder.setOriginalContent(content);
-
-        var lineOffset = 0;
-        var lines = content.split("\n");
-        for (var i = 0; i < lines.length; ++i) {
-            var line = lines[i];
-            var startOfNewLine = true;
-            var firstTokenOnLine = true;
-            var stream = new CodeMirror.StringStream(line);
-            while (!stream.eol()) {
-                var innerMode = CodeMirror.innerMode(outerMode, state);
-                var token = outerMode.token(stream, state);
-                var isWhiteSpace = token === null && /^\s*$/.test(stream.current());
-                this._handleToken(innerMode.mode, token, state, stream, lineOffset + stream.start, isWhiteSpace, startOfNewLine, firstTokenOnLine);
-                stream.start = stream.pos;
-                startOfNewLine = false;
-                if (firstTokenOnLine && !isWhiteSpace)
-                    firstTokenOnLine = false;
-            }
-
-            if (firstTokenOnLine)
-                this._handleEmptyLine();
-
-            lineOffset += line.length + 1; // +1 for the "\n" removed in split.
-            this._handleLineEnding(lineOffset - 1); // -1 for the index of the "\n".
-        }
-
-        this._builder.finish();
-    },
-
-    // Private
-
-    _handleToken: function(mode, token, state, stream, originalPosition, isWhiteSpace, startOfNewLine, firstTokenOnLine)
-    {
-        // String content of the token.
-        var content = stream.current();
-
-        // Start of a new line. Insert a newline to be safe if code was not-ASI safe. These are collapsed.
-        if (startOfNewLine)
-            this._builder.appendNewline();
-
-        // Whitespace. Collapse to a single space.
-        if (isWhiteSpace) {
-            this._builder.appendSpace();
-            return;
-        }
-
-        // Avoid some hooks for content in comments.
-        var isComment = token && /\bcomment\b/.test(token);
-
-        if (mode.modifyStateForTokenPre)
-            mode.modifyStateForTokenPre(this._lastToken, this._lastContent, token, state, content, isComment);
-
-        // Should we remove the last newline?
-        if (this._builder.lastTokenWasNewline && mode.removeLastNewline(this._lastToken, this._lastContent, token, state, content, isComment, firstTokenOnLine))
-            this._builder.removeLastNewline();
-
-        // Add whitespace after the last token?
-        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceAfterLastToken(this._lastToken, this._lastContent, token, state, content, isComment))
-            this._builder.appendSpace();
-
-        // Add whitespace before this token?
-        if (!this._builder.lastTokenWasWhitespace && mode.shouldHaveSpaceBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
-            this._builder.appendSpace();
-
-        // Should we dedent before this token?
-        var dedents = mode.dedentsBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment);
-        while (dedents-- > 0)
-            this._builder.dedent();
-
-        // Should we add a newline before this token?
-        if (mode.newlineBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
-            this._builder.appendNewline();
-
-        // Should we indent before this token?
-        if (mode.indentBeforeToken(this._lastToken, this._lastContent, token, state, content, isComment))
-            this._builder.indent();
-
-        // Append token.
-        this._builder.appendToken(content, originalPosition);
-
-        // Let the pretty printer update any state it keeps track of.
-        if (mode.modifyStateForTokenPost)
-            mode.modifyStateForTokenPost(this._lastToken, this._lastContent, token, state, content, isComment);
-
-        // Should we indent or dedent after this token?
-        if (!isComment && mode.indentAfterToken(this._lastToken, this._lastContent, token, state, content, isComment))
-            this._builder.indent();
-
-        // Should we add newlines after this token?
-        var newlines = mode.newlinesAfterToken(this._lastToken, this._lastContent, token, state, content, isComment);
-        if (newlines)
-            this._builder.appendMultipleNewlines(newlines);
-
-        // Record this token as the last token.
-        this._lastToken = token;
-        this._lastContent = content;
-    },
-
-    _handleEmptyLine: function()
-    {
-        // Preserve original whitespace only lines by adding a newline.
-        // However, don't do this if the builder just added multiple newlines.
-        if (!(this._builder.lastTokenWasNewline && this._builder.lastNewlineAppendWasMultiple))
-            this._builder.appendNewline(true);
-    },
-
-    _handleLineEnding: function(originalNewLinePosition)
-    {
-        // Record the original line ending.
-        this._builder.addOriginalLineEnding(originalNewLinePosition);
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/FormatterContentBuilder.js b/Source/WebInspectorUI/UserInterface/FormatterContentBuilder.js
deleted file mode 100644
index 4596880cb..000000000
--- a/Source/WebInspectorUI/UserInterface/FormatterContentBuilder.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-function FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, originalOffset, formattedOffset, indentString)
-{
-    this._originalContent = null;
-    this._formattedContent = [];
-    this._formattedContentLength = 0;
-
-    this._startOfLine = true;
-    this.lastTokenWasNewline = false;
-    this.lastTokenWasWhitespace = false;
-    this.lastNewlineAppendWasMultiple = false;
-
-    this._indent = 0;
-    this._indentString = indentString;
-    this._indentCache = ["", this._indentString];
-
-    this._mapping = mapping;
-    this._originalLineEndings = originalLineEndings || [];
-    this._formattedLineEndings = formattedLineEndings || [];
-    this._originalOffset = originalOffset || 0;
-    this._formattedOffset = formattedOffset || 0;
-
-    this._lastOriginalPosition = 0;
-    this._lastFormattedPosition = 0;
-}
-
-FormatterContentBuilder.prototype = {
-    constructor: FormatterContentBuilder,
-
-    // Public
-
-    get originalContent()
-    {
-        return this._originalContent;
-    },
-
-    get formattedContent()
-    {
-        var formatted = this._formattedContent.join("");
-        console.assert(formatted.length === this._formattedContentLength);
-        return formatted;
-    },
-
-    get mapping()
-    {
-        return this._mapping;
-    },
-
-    get originalLineEndings()
-    {
-        return this._originalLineEndings;
-    },
-
-    get formattedLineEndings()
-    {
-        return this._formattedLineEndings;
-    },
-
-    setOriginalContent: function(originalContent)
-    {
-        console.assert(!this._originalContent);
-        this._originalContent = originalContent;
-    },
-
-    appendToken: function(string, originalPosition)
-    {
-        if (this._startOfLine)
-            this._appendIndent();
-
-        this._addMappingIfNeeded(originalPosition);
-
-        this._append(string);
-        this._startOfLine = false;
-        this.lastTokenWasNewline = false;
-        this.lastTokenWasWhitespace = false;
-    },
-
-    appendSpace: function()
-    {
-        if (!this._startOfLine) {
-            this._append(" ");
-            this.lastTokenWasNewline = false;
-            this.lastTokenWasWhitespace = true;
-        }
-    },
-
-    appendNewline: function(force)
-    {
-        if ((!this.lastTokenWasNewline && !this._startOfLine) || force) {
-            this._append("\n");
-            this._addFormattedLineEnding();
-            this._startOfLine = true;
-            this.lastTokenWasNewline = true;
-            this.lastTokenWasWhitespace = false;
-            this.lastNewlineAppendWasMultiple = false;
-        }
-    },
-
-    appendMultipleNewlines: function(newlines)
-    {
-        console.assert(newlines > 0);
-
-        var wasMultiple = newlines > 1;
-
-        while (newlines-- > 0)
-            this.appendNewline(true);
-
-        if (wasMultiple)
-            this.lastNewlineAppendWasMultiple = true;
-    },
-
-    removeLastNewline: function()
-    {
-        console.assert(this.lastTokenWasNewline);
-        console.assert(this._formattedContent.lastValue === "\n");
-        if (this.lastTokenWasNewline) {
-            this._popNewLine();
-            this._startOfLine = false;
-            this.lastTokenWasNewline = false;
-            this.lastTokenWasWhitespace = false;
-        }
-    },
-
-    indent: function()
-    {
-        ++this._indent;
-    },
-
-    dedent: function()
-    {
-        --this._indent;
-
-        console.assert(this._indent >= 0);
-        if (this._indent < 0)
-            this._indent = 0;
-    },
-
-    addOriginalLineEnding: function(originalPosition)
-    {
-        this._originalLineEndings.push(originalPosition);
-    },
-
-    finish: function()
-    {
-        this.appendNewline();
-    },
-
-    // Private
-
-    _popNewLine: function()
-    {
-        var removed = this._formattedContent.pop();
-        this._formattedContentLength -= removed.length;
-        this._formattedLineEndings.pop();
-    },
-
-    _append: function(str)
-    {
-        this._formattedContent.push(str);
-        this._formattedContentLength += str.length;
-    },
-
-    _appendIndent: function()
-    {
-        // Indent is already in the cache.
-        if (this._indent < this._indentCache.length) {
-            this._append(this._indentCache[this._indent]);
-            return;
-        }
-
-        // Indent was not in the cache, fill up the cache up with what was needed.
-        const maxCacheIndent = 20;
-        var max = Math.min(this._indent, maxCacheIndent);
-        for (var i = this._indentCache.length; i <= max; ++i)
-            this._indentCache[i] = this._indentCache[i-1] + this._indentString;
-
-        // Append indents as needed.
-        var indent = this._indent;
-        do {
-            if (indent >= maxCacheIndent)
-                this._append(this._indentCache[maxCacheIndent])
-            else
-                this._append(this._indentCache[indent]);
-            indent -= maxCacheIndent;
-        } while (indent > 0);
-    },
-
-    _addMappingIfNeeded: function(originalPosition)
-    {
-        if (originalPosition - this._lastOriginalPosition === this._formattedContentLength - this._lastFormattedPosition)
-            return;
-
-        this._mapping.original.push(this._originalOffset + originalPosition);
-        this._mapping.formatted.push(this._formattedOffset + this._formattedContentLength);
-
-        this._lastOriginalPosition = originalPosition;
-        this._lastFormattedPosition = this._formattedContentLength;
-    },
-
-    _addFormattedLineEnding: function()
-    {
-        console.assert(this._formattedContent.lastValue === "\n");
-        this._formattedLineEndings.push(this._formattedContentLength - 1);
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/FormatterSourceMap.js b/Source/WebInspectorUI/UserInterface/FormatterSourceMap.js
deleted file mode 100644
index b58d22a4d..000000000
--- a/Source/WebInspectorUI/UserInterface/FormatterSourceMap.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FormatterSourceMap = function(originalLineEndings, formattedLineEndings, mapping)
-{
-    WebInspector.Object.call(this);
-
-    this._originalLineEndings = originalLineEndings;
-    this._formattedLineEndings = formattedLineEndings;
-    this._mapping = mapping;
-};
-
-WebInspector.FormatterSourceMap.fromBuilder = function(builder)
-{
-    return new WebInspector.FormatterSourceMap(builder.originalLineEndings, builder.formattedLineEndings, builder.mapping);
-}
-
-WebInspector.FormatterSourceMap.prototype = {
-    constructor: WebInspector.FormatterSourceMap,
-
-    // Public
-
-    originalToFormatted: function(lineNumber, columnNumber)
-    {
-        var originalPosition = this._locationToPosition(this._originalLineEndings, lineNumber || 0, columnNumber || 0);
-        var formattedPosition = this._convertPosition(this._mapping.original, this._mapping.formatted, originalPosition);
-        return this._positionToLocation(this._formattedLineEndings, formattedPosition);
-    },
-
-    formattedToOriginal: function(lineNumber, columnNumber)
-    {
-        var formattedPosition = this._locationToPosition(this._formattedLineEndings, lineNumber || 0, columnNumber || 0);
-        var originalPosition = this._convertPosition(this._mapping.formatted, this._mapping.original, formattedPosition);
-        return this._positionToLocation(this._originalLineEndings, originalPosition);
-    },
-
-    // Private
-
-    _locationToPosition: function(lineEndings, lineNumber, columnNumber)
-    {
-        var lineOffset = lineNumber ? lineEndings[lineNumber - 1] + 1 : 0;
-        return lineOffset + columnNumber;
-    },
-
-    _positionToLocation: function(lineEndings, position)
-    {
-        var lineNumber = lineEndings.upperBound(position - 1);
-        if (!lineNumber)
-            var columnNumber = position;
-        else
-            var columnNumber = position - lineEndings[lineNumber - 1] - 1;
-        return {lineNumber:lineNumber, columnNumber:columnNumber};
-    },
-
-    _convertPosition: function(positions1, positions2, positionInPosition1)
-    {
-        var index = positions1.upperBound(positionInPosition1) - 1;
-        var convertedPosition = positions2[index] + positionInPosition1 - positions1[index];
-        if (index < positions2.length - 1 && convertedPosition > positions2[index + 1])
-            convertedPosition = positions2[index + 1];
-        return convertedPosition;
-    }
-};
-
-WebInspector.FormatterSourceMap.__proto__ = WebInspector.Object;
diff --git a/Source/WebInspectorUI/UserInterface/Frame.js b/Source/WebInspectorUI/UserInterface/Frame.js
deleted file mode 100644
index 598ffe108..000000000
--- a/Source/WebInspectorUI/UserInterface/Frame.js
+++ /dev/null
@@ -1,466 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Frame = function(id, name, securityOrigin, loaderIdentifier, mainResource)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(id);
-
-    this._id = id;
-
-    this._name = null;
-    this._securityOrigin = null;
-
-    this._resourceCollection = new WebInspector.ResourceCollection;
-    this._provisionalResourceCollection = new WebInspector.ResourceCollection;
-
-    this._childFrames = [];
-    this._childFrameIdentifierMap = {};
-
-    this._parentFrame = null;
-    this._isMainFrame = false;
-
-    this._executionContextList = new WebInspector.ExecutionContextList;
-
-    this.initialize(name, securityOrigin, loaderIdentifier, mainResource);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.Frame);
-
-WebInspector.Frame.Event = {
-    NameDidChange: "frame-name-did-change",
-    SecurityOriginDidChange: "frame-security-origin-did-change",
-    MainResourceDidChange: "frame-main-resource-did-change",
-    ProvisionalLoadStarted: "frame-provisional-load-started",
-    ProvisionalLoadCommitted: "frame-provisional-load-committed",
-    ProvisionalLoadCleared: "frame-provisional-load-cleared",
-    ResourceWasAdded: "frame-resource-was-added",
-    ResourceWasRemoved: "frame-resource-was-removed",
-    AllResourcesRemoved: "frame-all-resources-removed",
-    ChildFrameWasAdded: "frame-child-frame-was-added",
-    ChildFrameWasRemoved: "frame-child-frame-was-removed",
-    AllChildFramesRemoved: "frame-all-child-frames-removed",
-    PageExecutionContextChanged: "frame-page-execution-context-changed",
-    ExecutionContextsCleared: "frame-execution-contexts-cleared"
-};
-
-WebInspector.Frame.prototype = {
-    constructor: WebInspector.Frame,
-
-    // Public
-
-    initialize: function(name, securityOrigin, loaderIdentifier, mainResource)
-    {
-        console.assert(loaderIdentifier);
-        console.assert(mainResource);
-
-        var oldName = this._name;
-        var oldSecurityOrigin = this._securityOrigin;
-        var oldMainResource = this._mainResource;
-
-        this._name = name || null;
-        this._securityOrigin = securityOrigin || null;
-        this._loaderIdentifier = loaderIdentifier || null;
-
-        this._mainResource = mainResource;
-        this._mainResource._parentFrame = this;
-
-        if (oldMainResource && this._mainResource !== oldMainResource)
-            this._disassociateWithResource(oldMainResource);
-
-        this.removeAllResources();
-        this.removeAllChildFrames();
-        this.clearExecutionContexts();
-        this.clearProvisionalLoad();
-
-        if (this._mainResource !== oldMainResource)
-            this._dispatchMainResourceDidChangeEvent(oldMainResource);
-
-        if (this._securityOrigin !== oldSecurityOrigin)
-            this.dispatchEventToListeners(WebInspector.Frame.Event.SecurityOriginDidChange, {oldSecurityOrigin: oldSecurityOrigin});
-
-        if (this._name !== oldName)
-            this.dispatchEventToListeners(WebInspector.Frame.Event.NameDidChange, {oldName: oldName});
-    },
-
-    startProvisionalLoad: function(provisionalMainResource)
-    {
-        console.assert(provisionalMainResource);
-
-        this._provisionalMainResource = provisionalMainResource;
-        this._provisionalMainResource._parentFrame = this;
-
-        this._provisionalLoaderIdentifier = provisionalMainResource.loaderIdentifier;
-
-        this._provisionalResourceCollection.removeAllResources();
-
-        this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadStarted);
-    },
-
-    commitProvisionalLoad: function(securityOrigin)
-    {
-        console.assert(this._provisionalMainResource);
-        console.assert(this._provisionalLoaderIdentifier);
-        if (!this._provisionalLoaderIdentifier)
-            return;
-
-        var oldSecurityOrigin = this._securityOrigin;
-        var oldMainResource = this._mainResource;
-
-        this._securityOrigin = securityOrigin || null;
-        this._loaderIdentifier = this._provisionalLoaderIdentifier;
-        this._mainResource = this._provisionalMainResource;
-
-        if (oldMainResource && this._mainResource !== oldMainResource)
-            this._disassociateWithResource(oldMainResource);
-
-        this.removeAllResources();
-
-        this._resourceCollection = this._provisionalResourceCollection;
-        this._provisionalResourceCollection = new WebInspector.ResourceCollection;
-
-        this.clearExecutionContexts(true);
-        this.clearProvisionalLoad(true);
-        this.removeAllChildFrames();
-
-        this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadCommitted);
-
-        if (this._mainResource !== oldMainResource)
-            this._dispatchMainResourceDidChangeEvent(oldMainResource);
-
-        if (this._securityOrigin !== oldSecurityOrigin)
-            this.dispatchEventToListeners(WebInspector.Frame.Event.SecurityOriginDidChange, {oldSecurityOrigin: oldSecurityOrigin});
-    },
-
-    clearProvisionalLoad: function(skipProvisionalLoadClearedEvent)
-    {
-        if (!this._provisionalLoaderIdentifier)
-            return;
-
-        this._provisionalLoaderIdentifier = null;
-        this._provisionalMainResource = null;
-        this._provisionalResourceCollection.removeAllResources();
-
-        if (!skipProvisionalLoadClearedEvent)
-            this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadCleared);
-    },
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get loaderIdentifier()
-    {
-        return this._loaderIdentifier;
-    },
-
-    get provisionalLoaderIdentifier()
-    {
-        return this._provisionalLoaderIdentifier;
-    },
-
-    get name()
-    {
-        return this._name;
-    },
-
-    get securityOrigin()
-    {
-        return this._securityOrigin;
-    },
-
-    get url()
-    {
-        return this._mainResource._url;
-    },
-
-    get domTree()
-    {
-        if (!this._domTree)
-            this._domTree = new WebInspector.DOMTree(this);
-        return this._domTree;
-    },
-
-    get pageExecutionContext()
-    {
-        return this._executionContextList.pageExecutionContext;
-    },
-
-    get executionContextList()
-    {
-        return this._executionContextList;
-    },
-
-    clearExecutionContexts: function(committingProvisionalLoad)
-    {
-        if (this._executionContextList.contexts.length) {
-            this._executionContextList.clear();
-            this.dispatchEventToListeners(WebInspector.Frame.Event.ExecutionContextsCleared, {committingProvisionalLoad:!!committingProvisionalLoad});
-        }
-    },
-
-    addExecutionContext: function(context)
-    {
-        var changedPageContext = this._executionContextList.add(context);
-
-        if (changedPageContext)
-            this.dispatchEventToListeners(WebInspector.Frame.Event.PageExecutionContextChanged);
-    },
-
-    get mainResource()
-    {
-        return this._mainResource;
-    },
-
-    get provisionalMainResource()
-    {
-        return this._provisionalMainResource;
-    },
-
-    get parentFrame()
-    {
-        return this._parentFrame;
-    },
-
-    get childFrames()
-    {
-        return this._childFrames;
-    },
-
-    isMainFrame: function()
-    {
-        return this._isMainFrame;
-    },
-
-    markAsMainFrame: function()
-    {
-        this._isMainFrame = true;
-    },
-
-    unmarkAsMainFrame: function()
-    {
-        this._isMainFrame = false;
-    },
-
-    isDetached: function()
-    {
-        var frame = this;
-        while (frame) {
-            if (frame.isMainFrame())
-                return false;
-            frame = frame.parentFrame;
-        }
-
-        return true;
-    },
-
-    childFrameForIdentifier: function(frameId)
-    {
-        return this._childFrameIdentifierMap[frameId] || null;
-    },
-
-    addChildFrame: function(frame)
-    {
-        console.assert(frame instanceof WebInspector.Frame);
-        if (!(frame instanceof WebInspector.Frame))
-            return;
-
-        if (frame._parentFrame === this)
-            return;
-
-        if (frame._parentFrame)
-            frame._parentFrame.removeChildFrame(frame);
-
-        this._childFrames.push(frame);
-        this._childFrameIdentifierMap[frame._id] = frame;
-
-        frame._parentFrame = this;
-
-        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasAdded, {childFrame: frame});
-    },
-
-    removeChildFrame: function(frameOrFrameId)
-    {
-        console.assert(frameOrFrameId);
-
-        if (frameOrFrameId instanceof WebInspector.Frame)
-            var childFrameId = frameOrFrameId._id;
-        else
-            var childFrameId = frameOrFrameId;
-
-        // Fetch the frame by id even if we were passed a WebInspector.Frame.
-        // We do this incase the WebInspector.Frame is a new object that isn't in _childFrames,
-        // but the id is a valid child frame.
-        var childFrame = this.childFrameForIdentifier(childFrameId);
-        console.assert(childFrame instanceof WebInspector.Frame);
-        if (!(childFrame instanceof WebInspector.Frame))
-            return;
-
-        console.assert(childFrame.parentFrame === this);
-
-        this._childFrames.remove(childFrame);
-        delete this._childFrameIdentifierMap[childFrame._id];
-
-        childFrame._parentFrame = null;
-
-        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasRemoved, {childFrame: childFrame});
-    },
-
-    removeAllChildFrames: function()
-    {
-        if (!this._childFrames.length)
-            return;
-
-        for (var i = 0; i < this._childFrames.length; ++i)
-            this._childFrames[i]._parentFrame = null;
-
-        this._childFrames = [];
-        this._childFrameIdentifierMap = {};
-
-        this.dispatchEventToListeners(WebInspector.Frame.Event.AllChildFramesRemoved);
-    },
-
-    get resources()
-    {
-        return this._resourceCollection.resources;
-    },
-
-    resourceForURL: function(url, recursivelySearchChildFrames)
-    {
-        var resource = this._resourceCollection.resourceForURL(url);
-        if (resource)
-            return resource;
-
-        // Check the main resources of the child frames for the requested URL.
-        for (var i = 0; i < this._childFrames.length; ++i) {
-            resource = this._childFrames[i].mainResource;
-            if (resource.url === url)
-                return resource;
-        }
-
-        if (!recursivelySearchChildFrames)
-            return null;
-
-        // Recursively search resources of child frames.
-        for (var i = 0; i < this._childFrames.length; ++i) {
-            resource = this._childFrames[i].resourceForURL(url, true);
-            if (resource)
-                return resource;
-        }
-
-        return null;
-    },
-
-    resourcesWithType: function(type)
-    {
-        return this._resourceCollection.resourcesWithType(type);
-    },
-
-    addResource: function(resource)
-    {
-        console.assert(resource instanceof WebInspector.Resource);
-        if (!(resource instanceof WebInspector.Resource))
-            return;
-
-        if (resource.parentFrame === this)
-            return;
-
-        if (resource.parentFrame)
-            resource.parentFrame.removeResource(resource);
-
-        this._associateWithResource(resource);
-
-        if (this._isProvisionalResource(resource)) {
-            this._provisionalResourceCollection.addResource(resource);
-            // Provisional resources don't fire the ResourceWasAdded event.
-        } else {
-            this._resourceCollection.addResource(resource);
-            this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasAdded, {resource: resource});
-        }
-    },
-
-    removeResource: function(resourceOrURL)
-    {
-        // This does not remove provisional resources.
-
-        var resource = this._resourceCollection.removeResource(resourceOrURL);
-        if (!resource)
-            return;
-
-        this._disassociateWithResource(resource);
-
-        this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasRemoved, {resource: resource});
-    },
-
-    removeAllResources: function()
-    {
-        // This does not remove provisional resources, use clearProvisionalLoad for that.
-
-        var resources = this.resources;
-        if (!resources.length)
-            return;
-
-        for (var i = 0; i < resources.length; ++i)
-            this._disassociateWithResource(resources[i]);
-
-        this._resourceCollection.removeAllResources();
-
-        this.dispatchEventToListeners(WebInspector.Frame.Event.AllResourcesRemoved);
-    },
-
-    // Private
-
-    _isProvisionalResource: function(resource)
-    {
-        return (resource.loaderIdentifier && this._provisionalLoaderIdentifier && resource.loaderIdentifier === this._provisionalLoaderIdentifier);
-    },
-
-    _associateWithResource: function(resource)
-    {
-        console.assert(!resource._parentFrame);
-        if (resource._parentFrame)
-            return;
-
-        resource._parentFrame = this;
-    },
-
-    _disassociateWithResource: function(resource)
-    {
-        console.assert(resource.parentFrame === this);
-        if (resource.parentFrame !== this)
-            return;
-
-        resource._parentFrame = null;
-    },
-
-    _dispatchMainResourceDidChangeEvent: function(oldMainResource)
-    {
-        this.dispatchEventToListeners(WebInspector.Frame.Event.MainResourceDidChange, {oldMainResource: oldMainResource});
-    }
-};
-
-WebInspector.Frame.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FrameContentView.js b/Source/WebInspectorUI/UserInterface/FrameContentView.js
deleted file mode 100644
index d0bc286c4..000000000
--- a/Source/WebInspectorUI/UserInterface/FrameContentView.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FrameContentView = function(frame)
-{
-    WebInspector.ClusterContentView.call(this, frame);
-
-    this._frame = frame;
-
-    function createPathComponent(displayName, className, identifier)
-    {
-        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, identifier, false, true);
-        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
-        return pathComponent;
-    }
-
-    this._sourceCodePathComponent = createPathComponent.call(this, WebInspector.UIString("Source Code"), WebInspector.FrameContentView.SourceCodeIconStyleClassName, WebInspector.FrameContentView.SourceCodeIdentifier);
-    this._domTreePathComponent = createPathComponent.call(this, WebInspector.UIString("DOM Tree"), WebInspector.FrameContentView.DOMTreeIconStyleClassName, WebInspector.FrameContentView.DOMTreeIdentifier);
-
-    this._sourceCodePathComponent.nextSibling = this._domTreePathComponent;
-    this._domTreePathComponent.previousSibling = this._sourceCodePathComponent;
-
-    this.element.classList.add(WebInspector.FrameContentView.StyleClassName);
-
-    this._currentContentViewSetting = new WebInspector.Setting("frame-current-view-" + this._frame.url.hash, WebInspector.FrameContentView.DOMTreeIdentifier);
-};
-
-WebInspector.FrameContentView.StyleClassName = "frame";
-WebInspector.FrameContentView.SourceCodeIconStyleClassName = "source-code-icon";
-WebInspector.FrameContentView.SourceCodeIdentifier = "source-code";
-WebInspector.FrameContentView.DOMTreeIconStyleClassName = "dom-tree-icon";
-WebInspector.FrameContentView.DOMTreeIdentifier = "dom-tree";
-
-WebInspector.FrameContentView.prototype = {
-    constructor: WebInspector.FrameContentView,
-
-    // Public
-
-    get frame()
-    {
-        return this._frame;
-    },
-
-    get allowedNavigationSidebarPanels()
-    {
-        return ["resource", "debugger"];
-    },
-
-    get selectionPathComponents()
-    {
-        if (!this._contentViewContainer.currentContentView)
-            return [];
-
-        // Append the current view's path components to the path component representing the current view.
-        var components = [this._pathComponentForContentView(this._contentViewContainer.currentContentView)];
-        return components.concat(this._contentViewContainer.currentContentView.selectionPathComponents);
-    },
-
-    shown: function()
-    {
-        WebInspector.ClusterContentView.prototype.shown.call(this);
-
-        if (this._shownInitialContent)
-            return;
-
-        this._showContentViewForIdentifier(this._currentContentViewSetting.value);
-    },
-
-    closed: function()
-    {
-        WebInspector.ClusterContentView.prototype.closed.call(this);
-
-        this._shownInitialContent = false;
-    },
-
-    showResource: function()
-    {
-        this._shownInitialContent = true;
-
-        return this._showContentViewForIdentifier(WebInspector.FrameContentView.SourceCodeIdentifier);
-    },
-
-    showSourceCode: function(positionToReveal, textRangeToSelect, forceUnformatted)
-    {
-        var resourceContentView = this.showResource();
-        console.assert(resourceContentView instanceof WebInspector.ResourceClusterContentView);
-        if (!resourceContentView)
-            return null;
-
-        var responseContentView = resourceContentView.showResponse();
-        if (typeof responseContentView.revealPosition === "function")
-            responseContentView.revealPosition(positionToReveal, textRangeToSelect, forceUnformatted);
-
-        return resourceContentView;
-    },
-
-    showDOMTree: function(domNodeToSelect, preventFocusChange)
-    {
-        this._shownInitialContent = true;
-
-        var domTreeContentView = this._showContentViewForIdentifier(WebInspector.FrameContentView.DOMTreeIdentifier);
-        console.assert(domTreeContentView);
-        if (!domTreeContentView || !domNodeToSelect)
-            return null;
-
-        domTreeContentView.selectAndRevealDOMNode(domNodeToSelect, preventFocusChange);
-
-        return domTreeContentView;
-    },
-
-    // Private
-
-    _pathComponentForContentView: function(contentView)
-    {
-        console.assert(contentView);
-        if (!contentView)
-            return null;
-        if (contentView.representedObject instanceof WebInspector.Resource)
-            return this._sourceCodePathComponent;
-        if (contentView.representedObject instanceof WebInspector.DOMTree)
-            return this._domTreePathComponent;
-        console.error("Unknown contentView.");
-        return null;
-    },
-
-    _identifierForContentView: function(contentView)
-    {
-        console.assert(contentView);
-        if (!contentView)
-            return null;
-        if (contentView.representedObject instanceof WebInspector.Resource)
-            return WebInspector.FrameContentView.SourceCodeIdentifier;
-        if (contentView.representedObject instanceof WebInspector.DOMTree)
-            return WebInspector.FrameContentView.DOMTreeIdentifier;
-        console.error("Unknown contentView.");
-        return null;
-    },
-
-    _showContentViewForIdentifier: function(identifier)
-    {
-        var representedObjectToShow = null;
-
-        switch (identifier) {
-        case WebInspector.FrameContentView.SourceCodeIdentifier:
-            representedObjectToShow = this._frame.mainResource;
-            break;
-        case WebInspector.FrameContentView.DOMTreeIdentifier:
-            representedObjectToShow = this._frame.domTree;
-            break;
-        }
-
-        console.assert(representedObjectToShow);
-        if (!representedObjectToShow)
-            return;
-
-        this._currentContentViewSetting.value = identifier;
-
-        return this.contentViewContainer.showContentViewForRepresentedObject(representedObjectToShow);
-    },
-
-    _pathComponentSelected: function(event)
-    {
-        this._showContentViewForIdentifier(event.data.pathComponent.representedObject);
-    }
-};
-
-WebInspector.FrameContentView.prototype.__proto__ = WebInspector.ClusterContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FrameResourceManager.js b/Source/WebInspectorUI/UserInterface/FrameResourceManager.js
deleted file mode 100644
index 5434610f5..000000000
--- a/Source/WebInspectorUI/UserInterface/FrameResourceManager.js
+++ /dev/null
@@ -1,534 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FrameResourceManager = function()
-{
-    WebInspector.Object.call(this);
-
-    PageAgent.enable();
-    NetworkAgent.enable();
-
-    this.initialize();
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.FrameResourceManager);
-
-WebInspector.FrameResourceManager.Event = {
-    FrameWasAdded: "frame-resource-manager-frame-was-added",
-    FrameWasRemoved: "frame-resource-manager-frame-was-removed",
-    MainFrameDidChange: "frame-resource-manager-main-frame-did-change"
-};
-
-WebInspector.FrameResourceManager.prototype = {
-    constructor: WebInspector.FrameResourceManager,
-
-    // Public
-
-    initialize: function()
-    {
-        var oldMainFrame = this._mainFrame;
-
-        this._frameIdentifierMap = {};
-        this._mainFrame = null;
-        this._resourceRequestIdentifierMap = {};
-
-        if (this._mainFrame !== oldMainFrame)
-            this._mainFrameDidChange(oldMainFrame);
-
-        this._waitingForMainFrameResourceTreePayload = true;
-        PageAgent.getResourceTree(this._processMainFrameResourceTreePayload.bind(this));
-    },
-
-    get mainFrame()
-    {
-        return this._mainFrame;
-    },
-
-    get frames()
-    {
-        var frames = [];
-        for (var key in this._frameIdentifierMap)
-            frames.push(this._frameIdentifierMap[key]);
-
-        return frames;
-    },
-
-    frameForIdentifier: function(frameId)
-    {
-        return this._frameIdentifierMap[frameId] || null;
-    },
-
-    frameDidNavigate: function(framePayload)
-    {
-        // Called from WebInspector.PageObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        var frameWasLoadedInstantly = false;
-
-        var frame = this.frameForIdentifier(framePayload.id);
-        if (!frame) {
-            // If the frame wasn't known before now, then the main resource was loaded instantly (about:blank, etc.)
-            // Make a new resource (which will make the frame). Mark will mark it as loaded at the end too since we
-            // don't expect any more events about the load finishing for these frames.
-            var frameResource = this._addNewResourceToFrame(null, framePayload.id, framePayload.loaderId, framePayload.url, null, null, null, null, null, framePayload.name, framePayload.securityOrigin);
-            var frame = frameResource.parentFrame;
-            frameWasLoadedInstantly = true;
-
-            console.assert(frame);
-            if (!frame)
-                return;
-        }
-
-        if (framePayload.loaderId === frame.provisionalLoaderIdentifier) {
-            // There was a provisional load in progress, commit it.
-            frame.commitProvisionalLoad(framePayload.securityOrigin);
-        } else {
-            if (frame.mainResource.url !== framePayload.url || frame.loaderIdentifier !== framePayload.loaderId) {
-                // Navigations like back/forward do not have provisional loads, so create a new main resource here.
-                var mainResource = new WebInspector.Resource(framePayload.url, framePayload.mimeType, null, framePayload.loaderId);
-            } else {
-                // The main resource is already correct, so reuse it.
-                var mainResource = frame.mainResource;
-            }
-
-            frame.initialize(framePayload.name, framePayload.securityOrigin, framePayload.loaderId, mainResource);
-        }
-
-        var oldMainFrame = this._mainFrame;
-
-        if (framePayload.parentId) {
-            var parentFrame = this.frameForIdentifier(framePayload.parentId);
-            console.assert(parentFrame);
-
-            if (frame === this._mainFrame)
-                this._mainFrame = null
-
-            if (frame.parentFrame !== parentFrame)
-                parentFrame.addChildFrame(frame);
-        } else {
-            if (frame.parentFrame)
-                frame.parentFrame.removeChildFrame(frame);
-            this._mainFrame = frame;
-        }
-
-        if (this._mainFrame !== oldMainFrame)
-            this._mainFrameDidChange(oldMainFrame);
-
-        if (frameWasLoadedInstantly)
-            frame.mainResource.markAsFinished();
-    },
-
-    frameDidDetach: function(frameId)
-    {
-        // Called from WebInspector.PageObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        var frame = this.frameForIdentifier(frameId);
-        if (!frame)
-            return;
-
-        if (frame.parentFrame)
-            frame.parentFrame.removeChildFrame(frame);
-
-        delete this._frameIdentifierMap[frame.id];
-
-        var oldMainFrame = this._mainFrame;
-
-        if (frame === this._mainFrame)
-            this._mainFrame = null;
-
-        frame.clearExecutionContexts();
-
-        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.FrameWasRemoved, {frame: frame});
-
-        if (this._mainFrame !== oldMainFrame)
-            this._mainFrameDidChange(oldMainFrame);
-    },
-
-    resourceRequestWillBeSent: function(requestIdentifier, frameIdentifier, loaderIdentifier, request, type, redirectResponse, timestamp)
-    {
-        // Called from WebInspector.NetworkObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
-        if (resource) {
-            // This is an existing request which is being redirected, update the resource.
-            console.assert(redirectResponse);
-            resource.updateForRedirectResponse(request.url, request.headers, timestamp);
-            return;
-        }
-
-        // This is a new request, make a new resource and add it to the right frame.
-        resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, request.url, type, request.method, request.headers, request.postData, timestamp, null, null);
-
-        // Associate the resource with the requestIdentifier so it can be found in future loading events.
-        this._resourceRequestIdentifierMap[requestIdentifier] = resource;
-    },
-
-    markResourceRequestAsServedFromMemoryCache: function(requestIdentifier)
-    {
-        // Called from WebInspector.NetworkObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
-
-        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
-        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
-        // just doesn't have a requestIdentifier for us to look it up.
-        if (!resource)
-            return;
-
-        resource.markAsCached();
-    },
-
-    resourceRequestWasServedFromMemoryCache: function(requestIdentifier, frameIdentifier, loaderIdentifier, cachedResourcePayload, timestamp)
-    {
-        // Called from WebInspector.NetworkObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        console.assert(!(requestIdentifier in this._resourceRequestIdentifierMap));
-
-        var response = cachedResourcePayload.response;
-        var resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, cachedResourcePayload.url, cachedResourcePayload.type, null, null, timestamp, null, null);
-        resource.markAsCached();
-        resource.updateForResponse(cachedResourcePayload.url, response.mimeType, cachedResourcePayload.type, response.headers, response.status, response.statusText, timestamp);
-        resource.markAsFinished(timestamp);
-
-        if (cachedResourcePayload.sourceMapURL)
-            WebInspector.sourceMapManager.downloadSourceMap(cachedResourcePayload.sourceMapURL, resource.url, resource);
-
-        // No need to associate the resource with the requestIdentifier, since this is the only event
-        // sent for memory cache resource loads.
-    },
-
-    resourceRequestDidReceiveResponse: function(requestIdentifier, frameIdentifier, loaderIdentifier, type, response, timestamp)
-    {
-        // Called from WebInspector.NetworkObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
-
-        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
-        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
-        // just doesn't have a requestIdentifier for us to look it up, but we can try to look it up by its URL.
-        if (!resource) {
-            var frame = this.frameForIdentifier(frameIdentifier);
-            if (frame)
-                resource = frame.resourceForURL(response.url);
-
-            // If we find the resource this way we had marked it earlier as finished via PageAgent.getResourceTree.
-            // Associate the resource with the requestIdentifier so it can be found in future loading events.
-            // and roll it back to an unfinished state, we know now it is still loading.
-            if (resource) {
-                this._resourceRequestIdentifierMap[requestIdentifier] = resource;
-                resource.revertMarkAsFinished();
-            }
-        }
-
-        // If we haven't found an existing Resource by now, then it is a resource that was loading when the inspector
-        // opened and we just missed the resourceRequestWillBeSent for it. So make a new resource and add it.
-        if (!resource) {
-            resource = this._addNewResourceToFrame(requestIdentifier, frameIdentifier, loaderIdentifier, response.url, type, null, response.requestHeaders, timestamp, null, null);
-
-            // Associate the resource with the requestIdentifier so it can be found in future loading events.
-            this._resourceRequestIdentifierMap[requestIdentifier] = resource;
-        }
-
-        if (response.fromDiskCache)
-            resource.markAsCached();
-
-        resource.updateForResponse(response.url, response.mimeType, type, response.headers, response.status, response.statusText, timestamp);
-    },
-
-    resourceRequestDidReceiveData: function(requestIdentifier, dataLength, encodedDataLength, timestamp)
-    {
-        // Called from WebInspector.NetworkObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
-
-        // We might not have a resource if the inspector was opened during the page load (after resourceRequestWillBeSent is called).
-        // We don't want to assert in this case since we do likely have the resource, via PageAgent.getResourceTree. The Resource
-        // just doesn't have a requestIdentifier for us to look it up.
-        if (!resource)
-            return;
-
-        resource.increaseSize(dataLength, timestamp);
-
-        if (encodedDataLength !== -1)
-            resource.increaseTransferSize(encodedDataLength);
-    },
-
-    resourceRequestDidFinishLoading: function(requestIdentifier, timestamp, sourceMapURL)
-    {
-        // Called from WebInspector.NetworkObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        // By now we should always have the Resource. Either it was fetched when the inspector first opened with
-        // PageAgent.getResourceTree, or it was a currently loading resource that we learned about in resourceRequestDidReceiveResponse.
-        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
-        console.assert(resource);
-        if (!resource)
-            return;
-
-        resource.markAsFinished(timestamp);
-
-        if (sourceMapURL)
-            WebInspector.sourceMapManager.downloadSourceMap(sourceMapURL, resource.url, resource);
-
-        delete this._resourceRequestIdentifierMap[requestIdentifier];
-    },
-
-    resourceRequestDidFailLoading: function(requestIdentifier, canceled, timestamp)
-    {
-        // Called from WebInspector.NetworkObserver.
-
-        // Ignore this while waiting for the whole frame/resource tree.
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        // By now we should always have the Resource. Either it was fetched when the inspector first opened with
-        // PageAgent.getResourceTree, or it was a currently loading resource that we learned about in resourceRequestDidReceiveResponse.
-        var resource = this._resourceRequestIdentifierMap[requestIdentifier];
-        console.assert(resource);
-        if (!resource)
-            return;
-
-        resource.markAsFailed(canceled, timestamp);
-
-        if (resource === resource.parentFrame.provisionalMainResource)
-            resource.parentFrame.clearProvisionalLoad();
-
-        delete this._resourceRequestIdentifierMap[requestIdentifier];
-    },
-
-    executionContextCreated: function(contextPayload)
-    {
-        // Called from WebInspector.RuntimeObserver.
-
-        var frame = this.frameForIdentifier(contextPayload.frameId);
-        console.assert(frame);
-        if (!frame)
-            return;
-
-        var displayName = contextPayload.name || frame.mainResource.displayName;
-        var executionContext = new WebInspector.ExecutionContext(contextPayload.id, displayName, contextPayload.isPageContext, frame);
-        frame.addExecutionContext(executionContext);
-    },
-
-    resourceForURL: function(url)
-    {
-        if (!this._mainFrame)
-            return null;
-
-        if (this._mainFrame.mainResource.url === url)
-            return this._mainFrame.mainResource;
-
-        return this._mainFrame.resourceForURL(url, true);
-    },
-
-    // Private
-
-    _addNewResourceToFrame: function(requestIdentifier, frameIdentifier, loaderIdentifier, url, type, requestMethod, requestHeaders, requestData, timestamp, frameName, frameSecurityOrigin)
-    {
-        console.assert(!this._waitingForMainFrameResourceTreePayload);
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        var resource = null;
-
-        var frame = this.frameForIdentifier(frameIdentifier);
-        if (frame) {
-            // This is a new request for an existing frame, which might be the main resource or a new resource.
-            if (frame.mainResource.url === url && frame.loaderIdentifier === loaderIdentifier)
-                resource = frame.mainResource;
-            else if (frame.provisionalMainResource && frame.provisionalMainResource.url === url && frame.provisionalLoaderIdentifier === loaderIdentifier)
-                resource = frame.provisionalMainResource;
-            else {
-                resource = new WebInspector.Resource(url, null, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, timestamp);
-                this._addResourceToFrame(frame, resource);
-            }
-        } else {
-            // This is a new request for a new frame, which is always the main resource.
-            resource = new WebInspector.Resource(url, null, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, timestamp);
-            frame = new WebInspector.Frame(frameIdentifier, frameName, frameSecurityOrigin, loaderIdentifier, resource);
-            this._frameIdentifierMap[frame.id] = frame;
-
-            // If we don't have a main frame, assume this is it. This can change later in
-            // frameDidNavigate when the parent frame is known.
-            if (!this._mainFrame) {
-                this._mainFrame = frame;
-                this._mainFrameDidChange(null);
-            }
-
-            this._dispatchFrameWasAddedEvent(frame);
-        }
-
-        console.assert(resource);
-
-        return resource;
-    },
-
-    _addResourceToFrame: function(frame, resource)
-    {
-        console.assert(!this._waitingForMainFrameResourceTreePayload);
-        if (this._waitingForMainFrameResourceTreePayload)
-            return;
-
-        console.assert(frame);
-        console.assert(resource);
-
-        if (resource.loaderIdentifier !== frame.loaderIdentifier && !frame.provisionalLoaderIdentifier) {
-            // This is the start of a provisional load which happens before frameDidNavigate is called.
-            // This resource will be the new mainResource if frameDidNavigate is called.
-            frame.startProvisionalLoad(resource);
-            return;
-        }
-
-        // This is just another resource, either for the main loader or the provisional loader.
-        console.assert(resource.loaderIdentifier === frame.loaderIdentifier || resource.loaderIdentifier === frame.provisionalLoaderIdentifier);
-        frame.addResource(resource);
-    },
-
-    _processMainFrameResourceTreePayload: function(error, mainFramePayload)
-    {
-        console.assert(this._waitingForMainFrameResourceTreePayload);
-        delete this._waitingForMainFrameResourceTreePayload;
-
-        if (error) {
-            console.error(JSON.stringify(error));
-            return;
-        }
-
-        console.assert(mainFramePayload);
-        console.assert(mainFramePayload.frame);
-
-        this._resourceRequestIdentifierMap = {};
-        this._frameIdentifierMap = {};
-
-        var oldMainFrame = this._mainFrame;
-
-        this._mainFrame = this._addFrameTreeFromFrameResourceTreePayload(mainFramePayload, true);
-
-        if (this._mainFrame !== oldMainFrame)
-            this._mainFrameDidChange(oldMainFrame);
-    },
-
-    _createFrame: function(payload)
-    {
-        // If payload.url is missing or empty then this page is likely the special empty page. In that case
-        // we will just say it is "about:blank" so we have a URL, which is required for resources.
-        var mainResource = new WebInspector.Resource(payload.url || "about:blank", payload.mimeType, null, payload.loaderId);
-        var frame = new WebInspector.Frame(payload.id, payload.name, payload.securityOrigin, payload.loaderId, mainResource);
-
-        this._frameIdentifierMap[frame.id] = frame;
-
-        mainResource.markAsFinished();
-
-        return frame;
-    },
-
-    _createResource: function(payload, framePayload)
-    {
-        var resource = new WebInspector.Resource(payload.url, payload.mimeType, payload.type, framePayload.loaderId);
-
-        if (payload.sourceMapURL)
-            WebInspector.sourceMapManager.downloadSourceMap(payload.sourceMapURL, resource.url, resource);
-
-        return resource;
-    },
-
-    _addFrameTreeFromFrameResourceTreePayload: function(payload, isMainFrame)
-    {
-        var frame = this._createFrame(payload.frame);
-        if (isMainFrame)
-            frame.markAsMainFrame();
-
-        for (var i = 0; payload.childFrames && i < payload.childFrames.length; ++i)
-            frame.addChildFrame(this._addFrameTreeFromFrameResourceTreePayload(payload.childFrames[i], false));
-
-        for (var i = 0; payload.resources && i < payload.resources.length; ++i) {
-            var resourcePayload = payload.resources[i];
-
-            // The main resource is included as a resource. We can skip it since we already created
-            // a main resource when we created the Frame. The resource payload does not include anything
-            // didn't already get from the frame payload.
-            if (resourcePayload.type === "Document" && resourcePayload.url === payload.frame.url)
-                continue;
-
-            var resource = this._createResource(resourcePayload, payload);
-            frame.addResource(resource);
-
-            if (resourcePayload.failed || resourcePayload.canceled)
-                resource.markAsFailed(resourcePayload.canceled);
-            else
-                resource.markAsFinished();
-        }
-
-        this._dispatchFrameWasAddedEvent(frame);
-
-        return frame;
-    },
-
-    _dispatchFrameWasAddedEvent: function(frame)
-    {
-        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.FrameWasAdded, {frame: frame});
-    },
-
-    _mainFrameDidChange: function(oldMainFrame)
-    {
-        if (oldMainFrame)
-            oldMainFrame.unmarkAsMainFrame();
-        if (this._mainFrame)
-            this._mainFrame.markAsMainFrame();
-        this.dispatchEventToListeners(WebInspector.FrameResourceManager.Event.MainFrameDidChange, {oldMainFrame: oldMainFrame});
-    }
-};
-
-WebInspector.FrameResourceManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/FrameTreeElement.js b/Source/WebInspectorUI/UserInterface/FrameTreeElement.js
deleted file mode 100644
index 4e1998229..000000000
--- a/Source/WebInspectorUI/UserInterface/FrameTreeElement.js
+++ /dev/null
@@ -1,492 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.FrameTreeElement = function(frame, representedObject)
-{
-    console.assert(frame instanceof WebInspector.Frame);
-
-    WebInspector.ResourceTreeElement.call(this, frame.mainResource, representedObject || frame);
-
-    this._frame = frame;
-    this._newChildQueue = [];
-
-    this._updateExpandedSetting();
-
-    frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-    frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
-    frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._resourceWasRemoved, this);
-    frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
-    frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
-
-    this._updateParentStatus();
-    this.shouldRefreshChildren = true;
-};
-
-WebInspector.FrameTreeElement.MediumChildCountThreshold = 5;
-WebInspector.FrameTreeElement.LargeChildCountThreshold = 15;
-WebInspector.FrameTreeElement.NumberOfMediumCategoriesThreshold = 2;
-WebInspector.FrameTreeElement.NewChildQueueUpdateInterval = 500;
-
-WebInspector.FrameTreeElement.prototype = {
-    constructor: WebInspector.FrameTreeElement,
-
-    // Public
-
-    get frame()
-    {
-        return this._frame;
-    },
-
-    descendantResourceTreeElementTypeDidChange: function(resourceTreeElement, oldType)
-    {
-        // Called by descendant ResourceTreeElements.
-
-        // Add the tree element again, which will move it to the new location
-        // based on sorting and possible folder changes.
-        this._addTreeElement(resourceTreeElement);
-    },
-
-    descendantResourceTreeElementMainTitleDidChange: function(resourceTreeElement, oldMainTitle)
-    {
-        // Called by descendant ResourceTreeElements.
-
-        // Add the tree element again, which will move it to the new location
-        // based on sorting and possible folder changes.
-        this._addTreeElement(resourceTreeElement);
-    },
-
-    // Overrides from SourceCodeTreeElement.
-
-    updateSourceMapResources: function()
-    {
-        // Frames handle their own SourceMapResources.
-
-        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
-            return;
-
-        if (!this._frame)
-            return;
-
-        this._updateParentStatus();
-
-        if (this.resource && this.resource.sourceMaps.length)
-            this.shouldRefreshChildren = true;
-    },
-
-    onattach: function()
-    {
-        // Frames handle their own SourceMapResources.
-
-        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
-    },
-
-    // Overrides from TreeElement (Private).
-
-    onpopulate: function()
-    {
-        if (this.children.length && !this.shouldRefreshChildren)
-            return;
-
-        this.shouldRefreshChildren = false;
-
-        this.removeChildren();
-        this._clearNewChildQueue();
-
-        if (this._shouldGroupIntoFolders() && !this._groupedIntoFolders)
-            this._groupedIntoFolders = true;
-
-        for (var i = 0; i < this._frame.childFrames.length; ++i)
-            this._addTreeElementForRepresentedObject(this._frame.childFrames[i]);
-
-        for (var i = 0; i < this._frame.resources.length; ++i)
-            this._addTreeElementForRepresentedObject(this._frame.resources[i]);
-
-        var sourceMaps = this.resource && this.resource.sourceMaps;
-        for (var i = 0; i < sourceMaps.length; ++i) {
-            var sourceMap = sourceMaps[i];
-            for (var j = 0; j < sourceMap.resources.length; ++j)
-            this._addTreeElementForRepresentedObject(sourceMap.resources[j]);
-        }
-    },
-
-    onexpand: function()
-    {
-        this._expandedSetting.value = true;
-    },
-
-    oncollapse: function()
-    {
-        // Only store the setting if we have children, since setting hasChildren to false will cause a collapse,
-        // and we only care about user triggered collapses.
-        if (this.hasChildren)
-            this._expandedSetting.value = false;
-    },
-
-    removeChildren: function()
-    {
-        TreeElement.prototype.removeChildren.call(this);
-
-        if (this._framesFolderTreeElement)
-            this._framesFolderTreeElement.removeChildren();
-
-        for (var type in this._resourceFoldersTypeMap)
-            this._resourceFoldersTypeMap[type].removeChildren();
-
-        delete this._resourceFoldersTypeMap;
-        delete this._framesFolderTreeElement;
-    },
-
-    // Private
-
-    _updateExpandedSetting: function()
-    {
-        this._expandedSetting = new WebInspector.Setting("frame-expanded-" + this._frame.url.hash, this._frame.isMainFrame() ? true : false);
-        if (this._expandedSetting.value)
-            this.expand();
-        else
-            this.collapse();
-    },
-
-    _updateParentStatus: function()
-    {
-        this.hasChildren = (this._frame.resources.length || this._frame.childFrames.length || (this.resource && this.resource.sourceMaps.length));
-        if (!this.hasChildren)
-            this.removeChildren();
-    },
-
-    _mainResourceDidChange: function(event)
-    {
-        this._updateResource(this._frame.mainResource);
-        this._updateParentStatus();
-
-        this._groupedIntoFolders = false;
-
-        this._clearNewChildQueue();
-
-        this.removeChildren();
-
-        // Change the expanded setting since the frame URL has changed. Do this before setting shouldRefreshChildren, since
-        // shouldRefreshChildren will call onpopulate if expanded is true.
-        this._updateExpandedSetting();
-
-        this.shouldRefreshChildren = true;
-    },
-
-    _resourceWasAdded: function(event)
-    {
-        this._addRepresentedObjectToNewChildQueue(event.data.resource);
-    },
-
-    _resourceWasRemoved: function(event)
-    {
-        this._removeChildForRepresentedObject(event.data.resource);
-    },
-
-    _childFrameWasAdded: function(event)
-    {
-        this._addRepresentedObjectToNewChildQueue(event.data.childFrame);
-    },
-
-    _childFrameWasRemoved: function(event)
-    {
-        this._removeChildForRepresentedObject(event.data.childFrame);
-    },
-
-    _addRepresentedObjectToNewChildQueue: function(representedObject)
-    {
-        // This queue reduces flashing as resources load and change folders when their type becomes known.
-
-        this._newChildQueue.push(representedObject);
-        if (!this._newChildQueueTimeoutIdentifier)
-            this._newChildQueueTimeoutIdentifier = setTimeout(this._populateFromNewChildQueue.bind(this), WebInspector.FrameTreeElement.NewChildQueueUpdateInterval);
-    },
-
-    _removeRepresentedObjectFromNewChildQueue: function(representedObject)
-    {
-        this._newChildQueue.remove(representedObject);
-    },
-
-    _populateFromNewChildQueue: function()
-    {
-        for (var i = 0; i < this._newChildQueue.length; ++i)
-            this._addChildForRepresentedObject(this._newChildQueue[i]);
-
-        this._newChildQueue = [];
-        this._newChildQueueTimeoutIdentifier = null;
-    },
-
-    _clearNewChildQueue: function()
-    {
-        this._newChildQueue = [];
-        if (this._newChildQueueTimeoutIdentifier) {
-            clearTimeout(this._newChildQueueTimeoutIdentifier);
-            this._newChildQueueTimeoutIdentifier = null;
-        }
-    },
-
-    _addChildForRepresentedObject: function(representedObject)
-    {
-        console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
-        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
-            return;
-
-        this._updateParentStatus();
-
-        if (!this.treeOutline) {
-            // Just mark as needing to update to avoid doing work that might not be needed.
-            this.shouldRefreshChildren = true;
-            return;
-        }
-
-        if (this._shouldGroupIntoFolders() && !this._groupedIntoFolders) {
-            // Mark as needing a refresh to rebuild the tree into folders.
-            this._groupedIntoFolders = true;
-            this.shouldRefreshChildren = true;
-            return;
-        }
-
-        this._addTreeElementForRepresentedObject(representedObject);
-    },
-
-    _removeChildForRepresentedObject: function(representedObject)
-    {
-        console.assert(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame);
-        if (!(representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame))
-            return;
-
-        this._removeRepresentedObjectFromNewChildQueue(representedObject);
-
-        this._updateParentStatus();
-
-        if (!this.treeOutline) {
-            // Just mark as needing to update to avoid doing work that might not be needed.
-            this.shouldRefreshChildren = true;
-            return;
-        }
-
-        // Find the tree element for the frame by using getCachedTreeElement
-        // to only get the item if it has been created already.
-        var childTreeElement = this.treeOutline.getCachedTreeElement(representedObject);
-        if (!childTreeElement || !childTreeElement.parent)
-            return;
-
-        this._removeTreeElement(childTreeElement);
-    },
-
-    _addTreeElementForRepresentedObject: function(representedObject)
-    {
-        var childTreeElement = this.treeOutline.getCachedTreeElement(representedObject);
-        if (!childTreeElement) {
-            if (representedObject instanceof WebInspector.SourceMapResource)
-                childTreeElement = new WebInspector.SourceMapResourceTreeElement(representedObject);
-            else if (representedObject instanceof WebInspector.Resource)
-                childTreeElement = new WebInspector.ResourceTreeElement(representedObject);
-            else if (representedObject instanceof WebInspector.Frame)
-                childTreeElement = new WebInspector.FrameTreeElement(representedObject);
-        }
-
-        this._addTreeElement(childTreeElement);
-    },
-
-    _addTreeElement: function(childTreeElement)
-    {
-        console.assert(childTreeElement);
-        if (!childTreeElement)
-            return;
-
-        var wasSelected = childTreeElement.selected;
-
-        this._removeTreeElement(childTreeElement, true, true);
-
-        var parentTreeElement = this._parentTreeElementForRepresentedObject(childTreeElement.representedObject);
-        if (parentTreeElement !== this && !parentTreeElement.parent)
-            this._insertFolderTreeElement(parentTreeElement);
-
-        this._insertResourceTreeElement(parentTreeElement, childTreeElement);
-
-        if (wasSelected)
-            childTreeElement.revealAndSelect(true, false, true, true);
-    },
-
-    _compareTreeElementsByMainTitle: function(a, b)
-    {
-        return a.mainTitle.localeCompare(b.mainTitle);
-    },
-
-    _insertFolderTreeElement: function(folderTreeElement)
-    {
-        console.assert(this._groupedIntoFolders);
-        console.assert(!folderTreeElement.parent);
-        this.insertChild(folderTreeElement, insertionIndexForObjectInListSortedByFunction(folderTreeElement, this.children, this._compareTreeElementsByMainTitle));
-    },
-
-    _insertResourceTreeElement: function(parentTreeElement, childTreeElement)
-    {
-        console.assert(!childTreeElement.parent);
-        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareResourceTreeElements));
-    },
-
-    _removeTreeElement: function(childTreeElement, suppressOnDeselect, suppressSelectSibling)
-    {
-        var oldParent = childTreeElement.parent;
-        if (!oldParent)
-            return;
-
-        oldParent.removeChild(childTreeElement, suppressOnDeselect, suppressSelectSibling);
-
-        if (oldParent === this)
-            return;
-
-        console.assert(oldParent instanceof WebInspector.FolderTreeElement);
-        if (!(oldParent instanceof WebInspector.FolderTreeElement))
-            return;
-
-        // Remove the old parent folder if it is now empty.
-        if (!oldParent.children.length)
-            oldParent.parent.removeChild(oldParent);
-    },
-
-    _folderNameForResourceType: function(type)
-    {
-        return WebInspector.Resource.Type.displayName(type, true);
-    },
-
-    _parentTreeElementForRepresentedObject: function(representedObject)
-    {
-        if (!this._groupedIntoFolders)
-            return this;
-
-        function createFolderTreeElement(type, displayName)
-        {
-            var folderTreeElement = new WebInspector.FolderTreeElement(displayName);
-            folderTreeElement._expandedSetting = new WebInspector.Setting(type + "-folder-expanded-" + this._frame.url.hash, false);
-            if (folderTreeElement._expandedSetting.value)
-                folderTreeElement.expand();
-            folderTreeElement.onexpand = this._folderTreeElementExpandedStateChange.bind(this);
-            folderTreeElement.oncollapse = this._folderTreeElementExpandedStateChange.bind(this);
-            return folderTreeElement;
-        }
-
-        if (representedObject instanceof WebInspector.Frame) {
-            if (!this._framesFolderTreeElement)
-                this._framesFolderTreeElement = createFolderTreeElement.call(this, "frames", WebInspector.UIString("Frames"));
-            return this._framesFolderTreeElement;
-        }
-
-        if (representedObject instanceof WebInspector.Resource) {
-            var folderName = this._folderNameForResourceType(representedObject.type);
-            if (!folderName)
-                return this;
-
-            if (!this._resourceFoldersTypeMap)
-                this._resourceFoldersTypeMap = {};
-            if (!this._resourceFoldersTypeMap[representedObject.type])
-                this._resourceFoldersTypeMap[representedObject.type] = createFolderTreeElement.call(this, representedObject.type, folderName);
-            return this._resourceFoldersTypeMap[representedObject.type];
-        }
-
-        console.error("Unknown representedObject: ", representedObject);
-        return this;
-    },
-
-    _folderTreeElementExpandedStateChange: function(folderTreeElement)
-    {
-        console.assert(folderTreeElement._expandedSetting);
-        folderTreeElement._expandedSetting.value = folderTreeElement.expanded;
-    },
-
-    _shouldGroupIntoFolders: function()
-    {
-        // Already grouped into folders, keep it that way.
-        if (this._groupedIntoFolders)
-            return true;
-
-        // Resources and Frames are grouped into folders if one of two thresholds are met:
-        // 1) Once the number of medium categories passes NumberOfMediumCategoriesThreshold.
-        // 2) When there is a category that passes LargeChildCountThreshold and there are
-        //    any resources in another category.
-
-        // Folders are avoided when there is only one category or most categories are small.
-
-        var numberOfSmallCategories = 0;
-        var numberOfMediumCategories = 0;
-        var foundLargeCategory = false;
-
-        if (this._frame.childFrames.length >= WebInspector.FrameTreeElement.LargeChildCountThreshold)
-            foundLargeCategory = true;
-        else if (this._frame.childFrames.length >= WebInspector.FrameTreeElement.MediumChildCountThreshold)
-            ++numberOfMediumCategories;
-        else if (this._frame.childFrames.length)
-            ++numberOfSmallCategories;
-
-        // Iterate over all the available resource types. There are some other properties on
-        // WebInspector.Resource.Type that we need to skip, like private data and functions.
-        for (var type in WebInspector.Resource.Type) {
-            // Skip private data.
-            if (type.charAt(0) === "_")
-                continue;
-
-            // Only care about the values that are strings, not functions, etc.
-            var typeValue = WebInspector.Resource.Type[type];
-            if (typeof typeValue !== "string")
-                continue;
-
-            var resourceCount = this._frame.resourcesWithType(typeValue).length;
-            if (!resourceCount)
-                continue;
-
-            // If this type has any resources and there is a known large category, make folders.
-            if (resourceCount && foundLargeCategory)
-                return true;
-
-            // If there are lots of this resource type, then count it as a large category.
-            if (resourceCount >= WebInspector.FrameTreeElement.LargeChildCountThreshold) {
-                // If we already have other resources in other small or medium categories, make folders.
-                if (numberOfSmallCategories || numberOfMediumCategories)
-                    return true;
-
-                foundLargeCategory = true;
-                continue;
-            }
-
-            // Check if this is a medium category.
-            if (resourceCount >= WebInspector.FrameTreeElement.MediumChildCountThreshold) {
-                ++numberOfMediumCategories;
-
-                // If this is the medium category that puts us over the maximum allowed, make folders.
-                if (numberOfMediumCategories >= WebInspector.FrameTreeElement.NumberOfMediumCategoriesThreshold)
-                    return true;
-                continue;
-            }
-
-            // This is a small category.
-            ++numberOfSmallCategories;
-        }
-
-        return false;
-    }
-};
-
-WebInspector.FrameTreeElement.prototype.__proto__ = WebInspector.ResourceTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/GeneralTreeElement.js b/Source/WebInspectorUI/UserInterface/GeneralTreeElement.js
deleted file mode 100644
index 371891fd1..000000000
--- a/Source/WebInspectorUI/UserInterface/GeneralTreeElement.js
+++ /dev/null
@@ -1,395 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.GeneralTreeElement = function(classNames, title, subtitle, representedObject, hasChildren)
-{
-    TreeElement.call(this, "", representedObject, hasChildren);
-
-    this.classNames = classNames;
-
-    this._tooltipHandledSeparately = false;
-    this._mainTitle = title || "";
-    this._subtitle = subtitle || "";
-    this._status = "";
-}
-
-WebInspector.GeneralTreeElement.StyleClassName = "item";
-WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName = "disclosure-button";
-WebInspector.GeneralTreeElement.IconElementStyleClassName = "icon";
-WebInspector.GeneralTreeElement.StatusElementStyleClassName = "status";
-WebInspector.GeneralTreeElement.TitlesElementStyleClassName = "titles";
-WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = "title";
-WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = "subtitle";
-WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = "no-subtitle";
-WebInspector.GeneralTreeElement.SmallStyleClassName = "small";
-WebInspector.GeneralTreeElement.TwoLineStyleClassName = "two-line";
-
-WebInspector.GeneralTreeElement.Event = {
-    MainTitleDidChange: "general-tree-element-main-title-did-change"
-};
-
-WebInspector.GeneralTreeElement.prototype = {
-    constructor: WebInspector.GeneralTreeElement,
-
-    // Public
-
-    get element()
-    {
-        return this._listItemNode;
-    },
-
-    get disclosureButton()
-    {
-        this._createElementsIfNeeded();
-        return this._disclosureButton;
-    },
-
-    get iconElement()
-    {
-        this._createElementsIfNeeded();
-        return this._iconElement;
-    },
-
-    get titlesElement()
-    {
-        this._createElementsIfNeeded();
-        return this._titlesElement;
-    },
-
-    get mainTitleElement()
-    {
-        this._createElementsIfNeeded();
-        return this._mainTitleElement;
-    },
-
-    get subtitleElement()
-    {
-        this._createElementsIfNeeded();
-        this._createSubtitleElementIfNeeded();
-        return this._subtitleElement;
-    },
-
-    get classNames()
-    {
-        return this._classNames;
-    },
-
-    set classNames(x)
-    {
-        if (this._listItemNode && this._classNames) {
-            for (var i = 0; i < this._classNames.length; ++i)
-                this._listItemNode.classList.remove(this._classNames[i]);
-        }
-
-        if (typeof x === "string")
-            x = [x];
-
-        this._classNames = x || [];
-
-        if (this._listItemNode) {
-            for (var i = 0; i < this._classNames.length; ++i)
-                this._listItemNode.classList.add(this._classNames[i]);
-        }
-    },
-
-    addClassName: function(className)
-    {
-        if (this._classNames.contains(className))
-            return;
-
-        this._classNames.push(className);
-
-        if (this._listItemNode)
-            this._listItemNode.classList.add(className);
-    },
-
-    removeClassName: function(className)
-    {
-        if (!this._classNames.contains(className))
-            return;
-
-        this._classNames.remove(className);
-
-        if (this._listItemNode)
-            this._listItemNode.classList.remove(className);
-    },
-
-    get small()
-    {
-        return this._small;
-    },
-
-    set small(x)
-    {
-        this._small = x;
-
-        if (this._listItemNode) {
-            if (this._small)
-                this._listItemNode.classList.add(WebInspector.GeneralTreeElement.SmallStyleClassName);
-            else
-                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.SmallStyleClassName);
-        }
-    },
-
-    get twoLine()
-    {
-        return this._twoLine;
-    },
-
-    set twoLine(x)
-    {
-        this._twoLine = x;
-
-        if (this._listItemNode) {
-            if (this._twoLine)
-                this._listItemNode.classList.add(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
-            else
-                this._listItemNode.classList.remove(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
-        }
-    },
-
-    get mainTitle()
-    {
-        return this._mainTitle;
-    },
-
-    set mainTitle(x)
-    {
-        this._mainTitle = x || "";
-        this._updateTitleElements();
-        this.didChange();
-        this.dispatchEventToListeners(WebInspector.GeneralTreeElement.Event.MainTitleDidChange);
-    },
-
-    get subtitle()
-    {
-        return this._subtitle;
-    },
-
-    set subtitle(x)
-    {
-        this._subtitle = x || "";
-        this._updateTitleElements();
-        this.didChange();
-    },
-
-    get status()
-    {
-        return this._status;
-    },
-
-    set status(x)
-    {
-        this._status = x || "";
-        this._updateStatusElement();
-    },
-
-    get filterableData()
-    {
-        return {text: [this.mainTitle, this.subtitle]};
-    },
-
-    get tooltipHandledSeparately()
-    {
-        return this._tooltipHandledSeparately;
-    },
-
-    set tooltipHandledSeparately(x)
-    {
-        this._tooltipHandledSeparately = x || false;
-    },
-
-    // Overrides from TreeElement (Private)
-
-    isEventWithinDisclosureTriangle: function(event)
-    {
-        return event.target === this._disclosureButton;
-    },
-
-    onattach: function()
-    {
-        this._createElementsIfNeeded();
-        this._updateTitleElements();
-        this._updateStatusElement();
-
-        this._listItemNode.classList.add(WebInspector.GeneralTreeElement.StyleClassName);
-
-        if (this._classNames) {
-            for (var i = 0; i < this._classNames.length; ++i)
-                this._listItemNode.classList.add(this._classNames[i]);
-        }
-
-        if (this._small)
-            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.SmallStyleClassName);
-
-        if (this._twoLine)
-            this._listItemNode.classList.add(WebInspector.GeneralTreeElement.TwoLineStyleClassName);
-
-        this._listItemNode.appendChild(this._disclosureButton);
-        this._listItemNode.appendChild(this._iconElement);
-        this._listItemNode.appendChild(this._statusElement);
-        this._listItemNode.appendChild(this._titlesElement);
-
-        if (this.oncontextmenu && typeof this.oncontextmenu === "function") {
-            this._boundContextMenuEventHandler = this.oncontextmenu.bind(this);
-            this._listItemNode.addEventListener("contextmenu", this._boundContextMenuEventHandler, true);
-        }
-
-        if (!this._boundContextMenuEventHandler && this.treeOutline.oncontextmenu && typeof this.treeOutline.oncontextmenu === "function") {
-            this._boundContextMenuEventHandler = function(event) { this.treeOutline.oncontextmenu(event, this); }.bind(this);
-            this._listItemNode.addEventListener("contextmenu", this._boundContextMenuEventHandler, true);
-        }
-    },
-
-    ondetach: function()
-    {
-        if (this._boundContextMenuEventHandler) {
-            this._listItemNode.removeEventListener("contextmenu", this._boundContextMenuEventHandler, true);
-            delete this._boundContextMenuEventHandler;
-        }
-    },
-
-    onreveal: function()
-    {
-        if (this._listItemNode)
-            this._listItemNode.scrollIntoViewIfNeeded(false);
-    },
-
-    // Protected
-
-    callFirstAncestorFunction: function(functionName, arguments)
-    {
-        // Call the first ancestor that implements a function named functionName (if any).
-        var currentNode = this.parent;
-        while (currentNode) {
-            if (typeof currentNode[functionName] === "function") {
-                currentNode[functionName].apply(currentNode, arguments);
-                break;
-            }
-
-            currentNode = currentNode.parent;
-        }
-    },
-
-    // Private
-
-    _createElementsIfNeeded: function()
-    {
-        if (this._createdElements)
-            return;
-
-        this._disclosureButton = document.createElement("button");
-        this._disclosureButton.className = WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName;
-
-        // Don't allow the disclosure button to be keyboard focusable. The TreeOutline is focusable and has
-        // its own keybindings for toggling expand and collapse.
-        this._disclosureButton.tabIndex = -1;
-
-        this._iconElement = document.createElement("img");
-        this._iconElement.className = WebInspector.GeneralTreeElement.IconElementStyleClassName;
-
-        this._statusElement = document.createElement("div");
-        this._statusElement.className = WebInspector.GeneralTreeElement.StatusElementStyleClassName;
-
-        this._titlesElement = document.createElement("div");
-        this._titlesElement.className = WebInspector.GeneralTreeElement.TitlesElementStyleClassName;
-
-        this._mainTitleElement = document.createElement("span");
-        this._mainTitleElement.className = WebInspector.GeneralTreeElement.MainTitleElementStyleClassName;
-        this._titlesElement.appendChild(this._mainTitleElement);
-
-        this._createdElements = true;
-    },
-
-    _createSubtitleElementIfNeeded: function()
-    {
-        if (this._subtitleElement)
-            return;
-
-        this._subtitleElement = document.createElement("span");
-        this._subtitleElement.className = WebInspector.GeneralTreeElement.SubtitleElementStyleClassName;
-        this._titlesElement.appendChild(this._subtitleElement);
-    },
-
-    _updateTitleElements: function()
-    {
-        if (!this._createdElements)
-            return;
-
-        if (typeof this._mainTitle === "string") {
-            if (this._mainTitleElement.textContent !== this._mainTitle)
-                this._mainTitleElement.textContent = this._mainTitle;
-        } else if (this._mainTitle instanceof Node) {
-            this._mainTitleElement.removeChildren();
-            this._mainTitleElement.appendChild(this._mainTitle);
-        }
-
-        if (typeof this._subtitle === "string" && this._subtitle) {
-            this._createSubtitleElementIfNeeded();
-            if (this._subtitleElement.textContent !== this._subtitle)
-                this._subtitleElement.textContent = this._subtitle;
-            this._titlesElement.classList.remove(WebInspector.GeneralTreeElement.NoSubtitleStyleClassName);
-        } else if (this._subtitle instanceof Node) {
-            this._createSubtitleElementIfNeeded();
-            this._subtitleElement.removeChildren();
-            this._subtitleElement.appendChild(this._subtitle);
-        } else {
-            if (this._subtitleElement)
-                this._subtitleElement.textContent = "";
-            this._titlesElement.classList.add(WebInspector.GeneralTreeElement.NoSubtitleStyleClassName);
-        }
-
-        // Set a default tooltip if there isn't a custom one already assigned.
-        if (!this.tooltip && !this._tooltipHandledSeparately) {
-            console.assert(this._listItemNode);
-
-            // Get the textContent for the elements since they can contain other nodes,
-            // and the tool tip only cares about the text.
-            var mainTitleText = this._mainTitleElement.textContent;
-            var subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
-
-            if (mainTitleText && subtitleText)
-                this._listItemNode.title = mainTitleText + (this._small && !this._twoLine ? " \u2014 " : "\n") + subtitleText;
-            else if (mainTitleText)
-                this._listItemNode.title = mainTitleText;
-            else
-                this._listItemNode.title = subtitleText;
-        }
-    },
-
-    _updateStatusElement: function()
-    {
-        if (!this._createdElements)
-            return;
-
-        if (this._status instanceof Node) {
-            this._statusElement.removeChildren();
-            this._statusElement.appendChild(this._status);
-        } else
-            this._statusElement.textContent = this._status;
-    }
-}
-
-WebInspector.GeneralTreeElement.prototype.__proto__ = TreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/GeneralTreeElementPathComponent.js b/Source/WebInspectorUI/UserInterface/GeneralTreeElementPathComponent.js
deleted file mode 100644
index 0293492f6..000000000
--- a/Source/WebInspectorUI/UserInterface/GeneralTreeElementPathComponent.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.GeneralTreeElementPathComponent = function(generalTreeElement, representedObject) {
-    WebInspector.HierarchicalPathComponent.call(this, generalTreeElement.mainTitle, generalTreeElement.classNames, representedObject || generalTreeElement.representedObject);
-
-    this._generalTreeElement = generalTreeElement;
-    generalTreeElement.addEventListener(WebInspector.GeneralTreeElement.Event.MainTitleDidChange, this._mainTitleDidChange, this);
-};
-
-WebInspector.GeneralTreeElementPathComponent.prototype = {
-    constructor: WebInspector.GeneralTreeElementPathComponent,
-
-    // Public
-
-    get generalTreeElement()
-    {
-        return this._generalTreeElement;
-    },
-
-    get previousSibling()
-    {
-        if (!this._generalTreeElement.previousSibling)
-            return null;
-        return new WebInspector.GeneralTreeElementPathComponent(this._generalTreeElement.previousSibling);
-    },
-
-    get nextSibling()
-    {
-        if (!this._generalTreeElement.nextSibling)
-            return null;
-        return new WebInspector.GeneralTreeElementPathComponent(this._generalTreeElement.nextSibling);
-    },
-    
-    // Private
-    
-    _mainTitleDidChange: function(event)
-    {
-        this.displayName = this._generalTreeElement.mainTitle;
-    }
-};
-
-WebInspector.GeneralTreeElementPathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/GenericResourceContentView.js b/Source/WebInspectorUI/UserInterface/GenericResourceContentView.js
deleted file mode 100644
index 2ea873867..000000000
--- a/Source/WebInspectorUI/UserInterface/GenericResourceContentView.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.GenericResourceContentView = function(resource)
-{
-    WebInspector.ResourceContentView.call(this, resource, WebInspector.GenericResourceContentView.StyleClassName);
-};
-
-WebInspector.GenericResourceContentView.StyleClassName = "generic";
-
-WebInspector.GenericResourceContentView.prototype = {
-    constructor: WebInspector.GenericResourceContentView
-};
-
-WebInspector.GenericResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Geometry.js b/Source/WebInspectorUI/UserInterface/Geometry.js
deleted file mode 100644
index ababb2870..000000000
--- a/Source/WebInspectorUI/UserInterface/Geometry.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Point = function(x, y)
-{
-    this.x = x || 0;
-    this.y = y || 0;
-};
-
-WebInspector.Point.fromEvent = function(event)
-{
-    return new WebInspector.Point(event.pageX, event.pageY);
-};
-
-WebInspector.Point.fromEventInElement = function(event, element)
-{
-    var wkPoint = window.webkitConvertPointFromPageToNode(element, new WebKitPoint(event.pageX, event.pageY));
-    return new WebInspector.Point(wkPoint.x, wkPoint.y);
-};
-
-WebInspector.Point.prototype = {
-    constructor: WebInspector.Point,
-
-    toString : function()
-    {
-        return "WebInspector.Point[" + this.x + "," + this.y + "]";
-    },
-
-    copy: function()
-    {
-        return new WebInspector.Point(this.x, this.y);
-    },
-
-    equals: function(anotherPoint)
-    {
-        return (this.x === anotherPoint.x && this.y === anotherPoint.y);
-    }
-};
-
-WebInspector.Size = function(width, height)
-{
-    this.width = width || 0;
-    this.height = height || 0;
-};
-
-WebInspector.Size.prototype = {
-    constructor: WebInspector.Size,
-
-    toString: function()
-    {
-        return "WebInspector.Size[" + this.width + "," + this.height + "]";
-    },
-
-    copy: function()
-    {
-        return new WebInspector.Size(this.width, this.height);
-    },
-
-    equals: function(anotherSize)
-    {
-        return (this.width === anotherSize.width && this.height === anotherSize.height);
-    }
-};
-
-WebInspector.Size.ZERO_SIZE = new WebInspector.Size(0, 0);
-
-
-WebInspector.Rect = function(x, y, width, height)
-{
-    this.origin = new WebInspector.Point(x || 0, y || 0);
-    this.size = new WebInspector.Size(width || 0, height || 0);
-};
-
-WebInspector.Rect.rectFromClientRect = function(clientRect)
-{
-    return new WebInspector.Rect(clientRect.left, clientRect.top, clientRect.width, clientRect.height);
-};
-
-WebInspector.Rect.prototype = {
-    constructor: WebInspector.Rect,
-
-    toString: function()
-    {
-        return "WebInspector.Rect[" + [this.origin.x, this.origin.y, this.size.width, this.size.height].join(", ") + "]";
-    },
-
-    copy: function()
-    {
-        return new WebInspector.Rect(this.origin.x, this.origin.y, this.size.width, this.size.height);
-    },
-
-    equals: function(anotherRect)
-    {
-        return (this.origin.equals(anotherRect.origin) && this.size.equals(anotherRect.size));
-    },
-
-    inset: function(insets)
-    {
-        return new WebInspector.Rect(
-            this.origin.x + insets.left,
-            this.origin.y + insets.top,
-            this.size.width - insets.left - insets.right,
-            this.size.height - insets.top - insets.bottom
-        );
-    },
-
-    minX: function()
-    {
-        return this.origin.x;
-    },
-
-    minY: function()
-    {
-        return this.origin.y;
-    },
-
-    midX: function()
-    {
-        return this.origin.x + (this.size.width / 2);
-    },
-
-    midY: function()
-    {
-        return this.origin.y + (this.size.height / 2);
-    },
-
-    maxX: function()
-    {
-        return this.origin.x + this.size.width;
-    },
-
-    maxY: function()
-    {
-        return this.origin.y + this.size.height;
-    },
-
-    intersectionWithRect: function(rect)
-    {
-        var x1 = Math.max(this.minX(), rect.minX());
-        var x2 = Math.min(this.maxX(), rect.maxX());
-        if (x1 > x2)
-            return WebInspector.Rect.ZERO_RECT;
-        var intersection = new WebInspector.Rect;
-        intersection.origin.x = x1;
-        intersection.size.width = x2 - x1;
-        var y1 = Math.max(this.minY(), rect.minY());
-        var y2 = Math.min(this.maxY(), rect.maxY());
-        if (y1 > y2)
-            return WebInspector.Rect.ZERO_RECT;
-        intersection.origin.y = y1;
-        intersection.size.height = y2 - y1;
-        return intersection;
-    }
-};
-
-WebInspector.Rect.ZERO_RECT = new WebInspector.Rect(0, 0, 0, 0);
-
-
-WebInspector.EdgeInsets = function(top, right, bottom, left)
-{
-    console.assert(arguments.length === 1 || arguments.length === 4);
-
-    if (arguments.length === 1) {
-        this.top = top;
-        this.right = top;
-        this.bottom = top;
-        this.left = top;
-    } else if (arguments.length === 4) {
-        this.top = top;
-        this.right = right;
-        this.bottom = bottom;
-        this.left = left;
-    }
-};
-
-WebInspector.EdgeInsets.prototype = {
-    constructor: WebInspector.EdgeInsets,
-
-    equals: function(anotherInset)
-    {
-        return (this.top === anotherInset.top && this.right === anotherInset.right &&
-                this.bottom === anotherInset.bottom && this.left === anotherInset.left);
-    },
-
-    copy: function()
-    {
-        return new WebInspector.EdgeInsets(this.top, this.right, this.bottom, this.left);
-    }
-};
-
-WebInspector.RectEdge = {
-    MIN_X : 0,
-    MIN_Y : 1,
-    MAX_X : 2,
-    MAX_Y : 3
-};
-
-WebInspector.Quad = function(quad)
-{
-    this.points = [
-        new WebInspector.Point(quad[0], quad[1]), // top left
-        new WebInspector.Point(quad[2], quad[3]), // top right
-        new WebInspector.Point(quad[4], quad[5]), // bottom right
-        new WebInspector.Point(quad[6], quad[7])  // bottom left
-    ];
-
-    this.width = Math.round(Math.sqrt(Math.pow(quad[0] - quad[2], 2) + Math.pow(quad[1] - quad[3], 2)));
-    this.height = Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2)));
-};
-
-WebInspector.Quad.prototype = {
-    constructor: WebInspector.Quad,
-
-    toProtocol: function()
-    {
-        return [
-            this.points[0].x, this.points[0].y,
-            this.points[1].x, this.points[1].y,
-            this.points[2].x, this.points[2].y,
-            this.points[3].x, this.points[3].y
-        ];
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css
deleted file mode 100644
index 9f6439a1e..000000000
--- a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.css
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.hierarchical-path-component {
-    display: -webkit-flex;
-    position: relative;
-    height: 20px;
-    min-width: 32px;
-}
-
-.hierarchical-path-component.show-selector-arrows {
-    min-width: 44px;
-}
-
-.hierarchical-path-component.collapsed {
-    min-width: 24px;
-}
-
-.hierarchical-path-component.collapsed > .icon {
-    display: none;
-}
-
-.hierarchical-path-component.collapsed > .title {
-    margin-left: 3px;
-}
-
-.hierarchical-path-component.collapsed > select {
-    display: none;
-}
-
-.hierarchical-path-component > .icon {
-    vertical-align: top;
-    margin: 2px 3px 2px 4px;
-    width: 16px;
-    height: 16px;
-}
-
-.hierarchical-path-component > .selector-arrows {
-    vertical-align: top;
-    margin: 2px 3px 2px 4px;
-    width: 5px;
-    height: 16px;
-    opacity: 0.6;
-    content: url(Images/UpDownArrows.svg);
-}
-
-.hierarchical-path-component > .title {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-
-    vertical-align: top;
-
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    font-family: "Lucida Grande", sans-serif;
-    font-size: 11px;
-    line-height: 20px;
-    height: 20px;
-
-    min-width: 0;
-    max-width: 400px;
-}
-
-.hierarchical-path-component > .title > .content {
-    min-width: 0;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.hierarchical-path-component > select {
-    opacity: 0;
-
- /* Positioned so the text in the menu aligns with the text in .title. */
-    position: absolute;
-    top: -1px;
-    left: 10px;
-    right: 0;
-    bottom: 0;
-}
-
-.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-child > .separator {
-    visibility: hidden;
-}
-
-.hierarchical-path-component > .separator {
-    display: inline-block;
-    vertical-align: top;
-
-    background-image: url(Images/HierarchicalNavigationItemChevron.pdf);
-    background-repeat: no-repeat;
-    background-position-y: center;
-
-    opacity: 0.75;
-
-    width: 7px;
-    height: 20px;
-
-    margin-left: 2px;
-}
-
-.hierarchical-path-component.text-only {
-    padding-left: 5px;
-    padding-right: 1px;
-}
-
-.hierarchical-path-component.text-only > select {
- /* Positions so the text in the menu aligns with the text in .title for text only path components. */
-    left: -8px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js b/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js
deleted file mode 100644
index 33286840a..000000000
--- a/Source/WebInspectorUI/UserInterface/HierarchicalPathComponent.js
+++ /dev/null
@@ -1,339 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.HierarchicalPathComponent = function(displayName, styleClassNames, representedObject, textOnly, showSelectorArrows)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(displayName);
-    console.assert(styleClassNames);
-
-    this._representedObject = representedObject || null;
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.HierarchicalPathComponent.StyleClassName;
-
-    if (!(styleClassNames instanceof Array))
-        styleClassNames = [styleClassNames];
-
-    for (var i = 0; i < styleClassNames.length; ++i) {
-        if (!styleClassNames[i])
-            continue;
-        this._element.classList.add(styleClassNames[i]);
-    }
-
-    if (!textOnly) {
-        this._iconElement = document.createElement("img");
-        this._iconElement.className = WebInspector.HierarchicalPathComponent.IconElementStyleClassName;
-        this._element.appendChild(this._iconElement);
-    } else
-        this._element.classList.add(WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName);
-
-    this._titleElement = document.createElement("div");
-    this._titleElement.className = WebInspector.HierarchicalPathComponent.TitleElementStyleClassName;
-    this._element.appendChild(this._titleElement);
-
-    this._titleContentElement = document.createElement("div");
-    this._titleContentElement.className = WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName;
-    this._titleElement.appendChild(this._titleContentElement);
-
-    this._separatorElement = document.createElement("div");
-    this._separatorElement.className = WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName;
-    this._element.appendChild(this._separatorElement);
-
-    this._selectElement = document.createElement("select");
-    this._selectElement.addEventListener("mouseover", this._selectElementMouseOver.bind(this));
-    this._selectElement.addEventListener("mouseout", this._selectElementMouseOut.bind(this));
-    this._selectElement.addEventListener("mousedown", this._selectElementMouseDown.bind(this));
-    this._selectElement.addEventListener("mouseup", this._selectElementMouseUp.bind(this));
-    this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
-    this._element.appendChild(this._selectElement);
-
-    this._previousSibling = null;
-    this._nextSibling = null;
-
-    this._truncatedDisplayNameLength = 0;
-
-    this.selectorArrows = showSelectorArrows;
-    this.displayName = displayName;
-};
-
-WebInspector.HierarchicalPathComponent.StyleClassName = "hierarchical-path-component";
-WebInspector.HierarchicalPathComponent.HiddenStyleClassName = "hidden";
-WebInspector.HierarchicalPathComponent.CollapsedStyleClassName = "collapsed";
-WebInspector.HierarchicalPathComponent.IconElementStyleClassName = "icon";
-WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName = "text-only";
-WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName = "show-selector-arrows";
-WebInspector.HierarchicalPathComponent.TitleElementStyleClassName = "title";
-WebInspector.HierarchicalPathComponent.TitleContentElementStyleClassName = "content";
-WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName = "selector-arrows";
-WebInspector.HierarchicalPathComponent.SeparatorElementStyleClassName = "separator";
-
-WebInspector.HierarchicalPathComponent.MinimumWidth = 32;
-WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed = 24;
-WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle = 54;
-WebInspector.HierarchicalPathComponent.SelectorArrowsWidth = 12;
-
-WebInspector.HierarchicalPathComponent.Event = {
-    SiblingWasSelected: "hierarchical-path-component-sibling-was-selected",
-    Clicked: "hierarchical-path-component-clicked"
-};
-
-WebInspector.HierarchicalPathComponent.prototype = {
-    constructor: WebInspector.HierarchicalPathComponent,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get representedObject()
-    {
-        return this._representedObject;
-    },
-
-    get displayName()
-    {
-        return this._displayName;
-    },
-
-    set displayName(newDisplayName)
-    {
-        console.assert(newDisplayName);
-        if (newDisplayName === this._displayName)
-            return;
-
-        this._displayName = newDisplayName;
-
-        this._updateElementTitleAndText();
-    },
-
-    get truncatedDisplayNameLength()
-    {
-        return this._truncatedDisplayNameLength;
-    },
-
-    set truncatedDisplayNameLength(truncatedDisplayNameLength)
-    {
-        truncatedDisplayNameLength = truncatedDisplayNameLength || 0;
-
-        if (truncatedDisplayNameLength === this._truncatedDisplayNameLength)
-            return;
-
-        this._truncatedDisplayNameLength = truncatedDisplayNameLength;
-
-        this._updateElementTitleAndText();
-    },
-
-    get minimumWidth()
-    {
-        if (this.collapsed)
-            return WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed;
-        if (this.selectorArrows)
-            return WebInspector.HierarchicalPathComponent.MinimumWidth + WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
-        return WebInspector.HierarchicalPathComponent.MinimumWidth;
-    },
-
-    get forcedWidth()
-    {
-        var maxWidth = this._element.style.getProperty("width");
-        if (typeof maxWidth === "string")
-            return parseInt(maxWidth);
-        return null;
-    },
-
-    set forcedWidth(width)
-    {
-        if (typeof width === "number") {
-            var minimumWidthForOneCharacterTruncatedTitle = WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle;
-            if (this.selectorArrows)
-                minimumWidthForOneCharacterTruncatedTitle += WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
-
-            // If the width is less than the minimum width required to show a single character and ellipsis, then
-            // just collapse down to the bare minimum to show only the icon.
-            if (width < minimumWidthForOneCharacterTruncatedTitle)
-                width = 0;
-
-            // Ensure the width does not go less than 1px. If the width is 0 the layout gets funky. There is a min-width
-            // in the CSS too, so as long the width is less than min-width we get the desired effect of only showing the icon.
-            this._element.style.setProperty("width", Math.max(1, width) + "px");
-        } else
-            this._element.style.removeProperty("width");
-    },
-
-    get hidden()
-    {
-        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
-    },
-
-    set hidden(flag)
-    {
-        if (flag)
-            this._element.classList.add(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
-    },
-
-    get collapsed()
-    {
-        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
-    },
-
-    set collapsed(flag)
-    {
-        if (flag)
-            this._element.classList.add(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
-    },
-
-    get selectorArrows()
-    {
-        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
-    },
-
-    set selectorArrows(flag)
-    {
-        if (flag) {
-            this._selectorArrowsElement = document.createElement("img");
-            this._selectorArrowsElement.className = WebInspector.HierarchicalPathComponent.SelectorArrowsElementStyleClassName;
-            this._element.insertBefore(this._selectorArrowsElement, this._separatorElement);
-
-            this._element.classList.add(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
-        } else {
-            if (this._selectorArrowsElement) {
-                this._selectorArrowsElement.remove();
-                delete this._selectorArrowsElement;
-            }
-
-            this._element.classList.remove(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
-        }
-    },
-
-    get previousSibling()
-    {
-        return this._previousSibling;
-    },
-
-    set previousSibling(newSlibling)
-    {
-        this._previousSibling = newSlibling || null;
-    },
-
-    get nextSibling()
-    {
-        return this._nextSibling;
-    },
-
-    set nextSibling(newSlibling)
-    {
-        this._nextSibling = newSlibling || null;
-    },
-
-    // Private
-
-    _updateElementTitleAndText: function()
-    {
-        var truncatedDisplayName = this._displayName;
-        if (this._truncatedDisplayNameLength && truncatedDisplayName.length > this._truncatedDisplayNameLength)
-            truncatedDisplayName = truncatedDisplayName.substring(0, this._truncatedDisplayNameLength) + "\u2026";
-
-        this._element.title = this._displayName;
-        this._titleContentElement.textContent = truncatedDisplayName;
-    },
-
-    _updateSelectElement: function()
-    {
-        this._selectElement.removeChildren();
-
-        function createOption(component)
-        {
-            var optionElement = document.createElement("option");
-            const maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
-            optionElement.textContent = component.displayName.length <= maxPopupMenuLength ? component.displayName : component.displayName.substring(0, maxPopupMenuLength) + "\u2026";
-            optionElement._pathComponent = component;
-            return optionElement;
-        }
-
-        var previousSiblingCount = 0;
-        var sibling = this.previousSibling;
-        while (sibling) {
-            this._selectElement.insertBefore(createOption(sibling), this._selectElement.firstChild);
-            sibling = sibling.previousSibling;
-            ++previousSiblingCount;
-        }
-
-        this._selectElement.appendChild(createOption(this));
-
-        sibling = this.nextSibling;
-        while (sibling) {
-            this._selectElement.appendChild(createOption(sibling));
-            sibling = sibling.nextSibling;
-        }
-
-        // Since the change event only fires when the selection actually changes we are
-        // stuck with either not showing the current selection in the menu or accepting that
-        // the user can't select what is already selected again. Selecting the same item
-        // again can be desired (for selecting the main resource while looking at an image).
-        // So if there is only one option, don't make it be selected by default. This lets
-        // you select the top level item which usually has no siblings to go back.
-        // FIXME: Make this work when there are multiple options with a selectedIndex.
-        if (this._selectElement.options.length === 1)
-            this._selectElement.selectedIndex = -1;
-        else
-            this._selectElement.selectedIndex = previousSiblingCount;
-    },
-
-    _selectElementMouseOver: function(event)
-    {
-        if (typeof this.mouseOver === "function")
-            this.mouseOver();
-    },
-
-    _selectElementMouseOut: function(event)
-    {
-        if (typeof this.mouseOut === "function")
-            this.mouseOut();
-    },
-
-    _selectElementMouseDown: function(event)
-    {
-        this._updateSelectElement();
-    },
-
-    _selectElementMouseUp: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.Clicked);
-    },
-
-    _selectElementSelectionChanged: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, {pathComponent: this._selectElement[this._selectElement.selectedIndex]._pathComponent});
-    }
-};
-
-WebInspector.HierarchicalPathComponent.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/HierarchicalPathNavigationItem.js b/Source/WebInspectorUI/UserInterface/HierarchicalPathNavigationItem.js
deleted file mode 100644
index defac59b2..000000000
--- a/Source/WebInspectorUI/UserInterface/HierarchicalPathNavigationItem.js
+++ /dev/null
@@ -1,237 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.HierarchicalPathNavigationItem = function(identifier, components) {
-    WebInspector.NavigationItem.call(this, identifier);
-
-    this.components = components;
-};
-
-WebInspector.HierarchicalPathNavigationItem.StyleClassName = "hierarchical-path";
-WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName = "always-show-last-path-component-separator";
-
-WebInspector.HierarchicalPathNavigationItem.Event = {
-    PathComponentWasSelected: "hierarchical-path-navigation-item-path-component-was-selected"
-};
-
-WebInspector.HierarchicalPathNavigationItem.prototype = {
-    constructor: WebInspector.HierarchicalPathNavigationItem,
-
-    // Public
-
-    get components()
-    {
-        return this._components;
-    },
-
-    set components(newComponents)
-    {
-        if (!newComponents)
-            newComponents = [];
-
-        for (var i = 0; this._components && i < this._components.length; ++i)
-            this._components[i].removeEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
-
-        // Make a shallow copy of the newComponents array using slice.
-        this._components = newComponents.slice(0);
-
-        for (var i = 0; i < this._components.length; ++i)
-            this._components[i].addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
-
-        this.element.removeChildren();
-        delete this._collapsedComponent;
-
-        for (var i = 0; i < newComponents.length; ++i)
-            this.element.appendChild(newComponents[i].element);
-
-        // Update layout for the so other items can adjust to the extra space (or lack thereof) too.
-        if (this.parentNavigationBar)
-            this.parentNavigationBar.updateLayoutSoon();
-    },
-
-    get lastComponent()
-    {
-        return this._components.lastValue || null;
-    },
-
-    get alwaysShowLastPathComponentSeparator()
-    {
-        return this.element.classList.contains(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
-    },
-
-    set alwaysShowLastPathComponentSeparator(flag)
-    {
-        if (flag)
-            this.element.classList.add(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
-        else
-            this.element.classList.remove(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
-    },
-
-    updateLayout: function(expandOnly)
-    {
-        var navigationBar = this.parentNavigationBar;
-        if (!navigationBar)
-            return;
-
-        if (this._collapsedComponent) {
-            this.element.removeChild(this._collapsedComponent.element);
-            delete this._collapsedComponent;
-        }
-
-        // Expand our components to full width to test if the items can fit at full width.
-        for (var i = 0; i < this._components.length; ++i) {
-            this._components[i].hidden = false;
-            this._components[i].forcedWidth = null;
-        }
-
-        if (expandOnly)
-            return;
-
-        if (navigationBar.sizesToFit)
-            return;
-
-        // Iterate over all the other navigation items in the bar and calculate their width.
-        var totalOtherItemsWidth = 0;
-        for (var i = 0; i < navigationBar.navigationItems.length; ++i) {
-            // Skip ourself.
-            if (navigationBar.navigationItems[i] === this)
-                continue;
-
-            // Skip flexible space items since they can take up no space at the minimum width.
-            if (navigationBar.navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
-                continue;
-
-            totalOtherItemsWidth += navigationBar.navigationItems[i].element.offsetWidth;
-        }
-
-        // Calculate the width for all the components.
-        var thisItemWidth = 0;
-        var componentWidths = [];
-        for (var i = 0; i < this._components.length; ++i) {
-            var componentWidth = this._components[i].element.offsetWidth;
-            componentWidths.push(componentWidth);
-            thisItemWidth += componentWidth;
-        }
-
-        // If all our components fit with the other navigation items in the width of the bar,
-        // then we don't need to collapse any components.
-        var barWidth = navigationBar.element.offsetWidth;
-        if (totalOtherItemsWidth + thisItemWidth <= barWidth)
-            return;
-
-        // Calculate the width we need to remove from our components, then iterate over them
-        // and force their width to be smaller.
-        var widthToRemove = totalOtherItemsWidth + thisItemWidth - barWidth;
-        for (var i = 0; i < this._components.length; ++i) {
-            var componentWidth = componentWidths[i];
-
-            // Try to take the whole width we need to remove from each component.
-            var forcedWidth = componentWidth - widthToRemove;
-            this._components[i].forcedWidth = forcedWidth;
-
-            // Since components have a minimum width, we need to see how much was actually
-            // removed and subtract that from what remans to be removed.
-            componentWidths[i] = Math.max(this._components[i].minimumWidth, forcedWidth);
-            widthToRemove -= (componentWidth - componentWidths[i]);
-
-            // If there is nothing else to remove, then we can stop.
-            if (widthToRemove <= 0)
-                break;
-        }
-
-        // If there is nothing else to remove, then we can stop.
-        if (widthToRemove <= 0)
-            return;
-
-        // If there are 3 or fewer components, then we can stop. Collapsing the middle of 3 components
-        // does not save more than a few pixels over just the icon, so it isn't worth it unless there
-        // are 4 or more components.
-        if (this._components.length <= 3)
-            return;
-
-        // We want to collapse the middle components, so find the nearest middle index.
-        var middle = this._components.length >> 1;
-        var distance = -1;
-        var i = middle;
-
-        // Create a component that will represent the hidden components with a ellipse as the display name.
-        this._collapsedComponent = new WebInspector.HierarchicalPathComponent("\u2026", []);
-        this._collapsedComponent.collapsed = true;
-
-        // Insert it in the middle, it doesn't matter exactly where since the elements around it will be hidden soon.
-        this.element.insertBefore(this._collapsedComponent.element, this._components[middle].element);
-
-        // Add the width of the collapsed component to the width we need to remove.
-        widthToRemove += this._collapsedComponent.minimumWidth;
-
-        var hiddenDisplayNames = [];
-
-        // Loop through the components starting at the middle and fanning out in each direction.
-        while (i >= 0 && i <= this._components.length - 1) {
-            // Only hide components in the middle and never the ends.
-            if (i > 0 && i < this._components.length - 1) {
-                var component = this._components[i];
-                component.hidden = true;
-
-                // Remember the displayName so it can be put in the tool tip of the collapsed component.
-                if (distance > 0)
-                    hiddenDisplayNames.unshift(component.displayName);
-                else
-                    hiddenDisplayNames.push(component.displayName);
-
-                // Fully subtract the hidden component's width.
-                widthToRemove -= componentWidths[i];
-
-                // If there is nothing else to remove, then we can stop.
-                if (widthToRemove <= 0)
-                    break;
-            }
-
-            // Calculate the next index.
-            i = middle + distance;
-
-            // Increment the distance when it is in the positive direction.
-            if (distance > 0)
-                ++distance;
-
-            // Flip the direction of the distance.
-            distance *= -1;
-        }
-
-        // Set the tool tip of the collapsed component.
-        this._collapsedComponent.element.title = hiddenDisplayNames.join("\n");
-    },
-
-    // Private
-
-    _additionalClassNames: [WebInspector.HierarchicalPathNavigationItem.StyleClassName],
-
-    _siblingPathComponentWasSelected: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, event.data);
-    }
-};
-
-WebInspector.HierarchicalPathNavigationItem.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ImageResourceContentView.css b/Source/WebInspectorUI/UserInterface/ImageResourceContentView.css
deleted file mode 100644
index 27e535dac..000000000
--- a/Source/WebInspectorUI/UserInterface/ImageResourceContentView.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.resource.image {
-    background-color: rgb(231, 231, 231);
-
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    display: -webkit-flex;
-
-    -webkit-justify-content: center;
-}
-
-.content-view.resource.image img {
-    min-width: 0;
-    max-width: 100%;
-
-    -webkit-user-select: text;
-    -webkit-user-drag: auto;
-
- /* A border is used instead of padding or margin so when there is overflow
-    there will be space on all sides. */
-    border: 15px solid transparent;
-
-    margin: auto 0;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ImageResourceContentView.js b/Source/WebInspectorUI/UserInterface/ImageResourceContentView.js
deleted file mode 100644
index 442aff32c..000000000
--- a/Source/WebInspectorUI/UserInterface/ImageResourceContentView.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ImageResourceContentView = function(resource)
-{
-    WebInspector.ResourceContentView.call(this, resource, WebInspector.ImageResourceContentView.StyleClassName);
-
-    this._imageElement = null;
-};
-
-WebInspector.ImageResourceContentView.StyleClassName = "image";
-
-WebInspector.ImageResourceContentView.prototype = {
-    constructor: WebInspector.ImageResourceContentView,
-
-    // Public
-
-    get imageElement()
-    {
-        return this._imageElement;
-    },
-
-    contentAvailable: function(content, base64Encoded)
-    {
-        this.element.removeChildren();
-
-        this._imageElement = document.createElement("img");
-        this._imageElement.src = this.resource.contentURL;
-
-        this.element.appendChild(this._imageElement);
-    }
-};
-
-WebInspector.ImageResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ImageUtilities.js b/Source/WebInspectorUI/UserInterface/ImageUtilities.js
deleted file mode 100644
index c85fe32f6..000000000
--- a/Source/WebInspectorUI/UserInterface/ImageUtilities.js
+++ /dev/null
@@ -1,671 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-// Bump this version when making changes that affect the storage format.
-const _imageStorageFormatVersion = 1;
-
-try {
-    var _generatedImageCacheDatabase = openDatabase("com.apple.WebInspector", 1, "Web Inspector Storage Database", 5 * 1024 * 1024);
-} catch (e) {
-    // If we can't open the database it isn't the end of the world, we just will always generate
-    // the images and not cache them for better load times.
-    console.warn("Can't open database due to: " + e + ". Images will be generated instead of loaded from cache.");
-}
-
-var _initialPrefetchComplete = false;
-var _fetchedCachedImages = {};
-
-var _generatedImageUpdateFunctions = [];
-
-_prefetchCachedImagesAndUpdate();
-
-// Updates each image when the device pixel ratio changes to redraw at the new resolution.
-window.matchMedia("(-webkit-device-pixel-ratio: 1)").addListener(_devicePixelRatioChanged);
-
-// Delete old cached images from localStorage to free up space.
-// FIXME: Remove this once it has been in the builds for a while.
-try {
-    const processedFlagKey = "com.apple.WebInspector.deleted-generated-images";
-
-    if (!window.localStorage[processedFlagKey]) {
-        for (var key in window.localStorage) {
-            if (/^com\.apple\.WebInspector\.generated-(?:colored|embossed)-image-/.test(key))
-                delete window.localStorage[key];
-        }
-
-        window.localStorage[processedFlagKey] = true;
-    }
-} catch (e) {
-    // Ignore.
-}
-
-function _devicePixelRatioChanged()
-{
-    _prefetchCachedImagesAndUpdate();
-}
-
-function _registerGeneratedImageUpdateFunction(update)
-{
-    console.assert(typeof update === "function");
-
-    _generatedImageUpdateFunctions.push(update);
-
-    if (_initialPrefetchComplete)
-        update();
-}
-
-function _logSQLError(tx, error)
-{
-    console.error(error.code, error.message);
-}
-
-function _logSQLTransactionError(error)
-{
-    console.error(error.code, error.message);
-}
-
-function _prefetchCachedImagesAndUpdate()
-{
-    _fetchedCachedImages = {};
-
-    function complete()
-    {
-        _initialPrefetchComplete = true;
-
-        for (var i = 0; i < _generatedImageUpdateFunctions.length; ++i)
-            _generatedImageUpdateFunctions[i]();
-    }
-
-    if (!_generatedImageCacheDatabase) {
-        complete();
-        return;
-    }
-
-    _generatedImageCacheDatabase.transaction(function(tx) {
-        tx.executeSql("SELECT key, imageVersion, data FROM CachedImages WHERE pixelRatio = ? AND formatVersion = ?", [window.devicePixelRatio, _imageStorageFormatVersion], function(tx, result) {
-            for (var i = 0; i < result.rows.length; ++i) {
-                var row = result.rows.item(i);
-                _fetchedCachedImages[row.key] = {data: row.data, imageVersion: row.imageVersion};
-            }
-
-            complete();
-        }, function(tx, error) {
-            // The select failed. That could be because the schema changed or this is the first time.
-            // Drop the table and recreate it fresh.
-
-            tx.executeSql("DROP TABLE IF EXISTS CachedImages");
-            tx.executeSql("CREATE TABLE CachedImages (key TEXT, pixelRatio INTEGER, formatVersion NUMERIC, imageVersion NUMERIC, data BLOB, UNIQUE(key, pixelRatio))", [], null, _logSQLError);
-
-            complete();
-        });
-    }, _logSQLTransactionError);
-}
-
-function saveImageToStorage(storageKey, context, width, height, imageVersion)
-{
-    console.assert(storageKey);
-    console.assert(context);
-    console.assert(typeof width === "number");
-    console.assert(typeof height === "number");
-    console.assert(typeof imageVersion === "number");
-
-    if (!_generatedImageCacheDatabase)
-        return;
-
-    var imageData = context.getImageData(0, 0, width, height);
-    var imageDataPixels = new Uint32Array(imageData.data.buffer);
-
-    var imageDataString = "";
-    for (var i = 0; i < imageDataPixels.length; ++i)
-        imageDataString += (i ? ":" : "") + (imageDataPixels[i] ? imageDataPixels[i].toString(36) : "");
-
-    _generatedImageCacheDatabase.transaction(function(tx) {
-        tx.executeSql("INSERT OR REPLACE INTO CachedImages (key, pixelRatio, imageVersion, formatVersion, data) VALUES (?, ?, ?, ?, ?)", [storageKey, window.devicePixelRatio, imageVersion, _imageStorageFormatVersion, imageDataString], null, _logSQLError);
-    }, _logSQLTransactionError);
-}
-
-function restoreImageFromStorage(storageKey, context, width, height, imageVersion, generateCallback)
-{
-    console.assert(storageKey);
-    console.assert(context);
-    console.assert(typeof width === "number");
-    console.assert(typeof height === "number");
-    console.assert(typeof imageVersion === "number");
-    console.assert(typeof generateCallback === "function");
-
-    if (!_generatedImageCacheDatabase) {
-        generateCallback();
-        return;
-    }
-
-    var imageInfo = _fetchedCachedImages[storageKey];
-
-    if (imageInfo) {
-        // We only want to keep the data around for the first use. These images
-        // are typically only used in one place. This keeps performance good
-        // during page load and frees memory that typically won't be reused.
-        delete _fetchedCachedImages[storageKey];
-    }
-
-    if (imageInfo && (!imageInfo.data || imageInfo.imageVersion !== imageVersion)) {
-        generateCallback();
-        return;
-    }
-
-    if (imageInfo) {
-        // Restore the image from the memory cache.
-        restoreImageData(imageInfo.data);
-    } else {
-        // Try fetching the image data from the database.
-        _generatedImageCacheDatabase.readTransaction(function(tx) {
-            tx.executeSql("SELECT data FROM CachedImages WHERE key = ? AND pixelRatio = ? AND imageVersion = ? AND formatVersion = ?", [storageKey, window.devicePixelRatio, imageVersion, _imageStorageFormatVersion], function(tx, result) {
-                if (!result.rows.length) {
-                    generateCallback();
-                    return;
-                }
-
-                console.assert(result.rows.length === 1);
-
-                restoreImageData(result.rows.item(0).data);
-            }, function(tx, error) {
-                _logSQLError(tx, error);
-
-                generateCallback();
-            });
-        }, _logSQLTransactionError);
-    }
-
-    function restoreImageData(imageDataString)
-    {
-        var imageData = context.createImageData(width, height);
-        var imageDataPixels = new Uint32Array(imageData.data.buffer);
-
-        var imageDataArray = imageDataString.split(":");
-        if (imageDataArray.length !== imageDataPixels.length) {
-            generateCallback();
-            return;
-        }
-
-        for (var i = 0; i < imageDataArray.length; ++i) {
-            var pixelString = imageDataArray[i];
-            imageDataPixels[i] = pixelString ? parseInt(pixelString, 36) : 0;
-        }
-
-        context.putImageData(imageData, 0, 0);
-    }
-}
-
-function generateColoredImage(inputImage, red, green, blue, alpha, width, height)
-{
-    console.assert(inputImage);
-
-    if (alpha === undefined)
-        alpha = 1;
-
-    if (width === undefined)
-        width = inputImage.width;
-
-    if (height === undefined)
-        height = inputImage.height;
-
-    if (inputImage instanceof HTMLCanvasElement) {
-        // The input is already a canvas, so we can use its context directly.
-        var inputContext = inputImage.getContext("2d");
-    } else {
-        console.assert(inputImage instanceof HTMLImageElement || inputImage instanceof HTMLVideoElement);
-
-        // The input is an image/video element, so we need to draw it into
-        // a canvas to get the pixel data.
-        var inputCanvas = document.createElement("canvas");
-        inputCanvas.width = width;
-        inputCanvas.height = height;
-
-        var inputContext = inputCanvas.getContext("2d");
-        inputContext.drawImage(inputImage, 0, 0, width, height);
-    }
-
-    var imageData = inputContext.getImageData(0, 0, width, height);
-    var imageDataPixels = new Uint32Array(imageData.data.buffer);
-
-    var isLittleEndian = Uint32Array.isLittleEndian();
-
-    // Loop over the image data and set the color channels while preserving the alpha.
-    for (var i = 0; i < imageDataPixels.length; ++i) {
-        if (isLittleEndian) {
-            var existingAlpha = 0xff & (imageDataPixels[i] >> 24);
-            imageDataPixels[i] = red | green << 8 | blue << 16 | (existingAlpha * alpha) << 24;
-        } else {
-            var existingAlpha = 0xff & imageDataPixels[i];
-            imageDataPixels[i] = red << 24 | green << 16 | blue << 8 | existingAlpha * alpha;
-        }
-    }
-
-    // Make a canvas that will be returned as the result.
-    var resultCanvas = document.createElement("canvas");
-    resultCanvas.width = width;
-    resultCanvas.height = height;
-
-    var resultContext = resultCanvas.getContext("2d");
-
-    resultContext.putImageData(imageData, 0, 0);
-
-    return resultCanvas;
-}
-
-function generateColoredImagesForCSS(imagePath, specifications, width, height, canvasIdentifierPrefix)
-{
-    console.assert(imagePath);
-    console.assert(specifications);
-    console.assert(typeof width === "number");
-    console.assert(typeof height === "number");
-
-    var scaleFactor = window.devicePixelRatio;
-    var scaledWidth = width * scaleFactor;
-    var scaledHeight = height * scaleFactor;
-
-    canvasIdentifierPrefix = canvasIdentifierPrefix || "";
-
-    const storageKeyPrefix = "generated-colored-image-";
-
-    var imageElement = null;
-    var pendingImageLoadCallbacks = [];
-
-    _registerGeneratedImageUpdateFunction(update);
-
-    function imageLoaded()
-    {
-        console.assert(imageElement);
-        console.assert(imageElement.complete);
-        for (var i = 0; i < pendingImageLoadCallbacks.length; ++i)
-            pendingImageLoadCallbacks[i]();
-        pendingImageLoadCallbacks = null;
-    }
-
-    function ensureImageIsLoaded(callback)
-    {
-        if (imageElement && imageElement.complete) {
-            callback();
-            return;
-        }
-
-        console.assert(pendingImageLoadCallbacks);
-        pendingImageLoadCallbacks.push(callback);
-
-        if (imageElement)
-            return;
-
-        imageElement = document.createElement("img");
-        imageElement.addEventListener("load", imageLoaded);
-        imageElement.width = width;
-        imageElement.height = height;
-        imageElement.src = imagePath;
-    }
-
-    function restoreImages()
-    {
-        for (var canvasIdentifier in specifications) {
-            // Don't restore active images yet.
-            if (canvasIdentifier.indexOf("active") !== -1)
-                continue;
-
-            var specification = specifications[canvasIdentifier];
-            restoreImage(canvasIdentifier, specification);
-        }
-
-        function restoreActiveImages()
-        {
-            for (var canvasIdentifier in specifications) {
-                // Only restore active images here.
-                if (canvasIdentifier.indexOf("active") === -1)
-                    continue;
-
-                var specification = specifications[canvasIdentifier];
-                restoreImage(canvasIdentifier, specification);
-            }
-        }
-
-        // Delay restoring the active states until later to improve the initial page load time.
-        setTimeout(restoreActiveImages, 500);
-    }
-
-    function restoreImage(canvasIdentifier, specification)
-    {
-        const storageKey = storageKeyPrefix + canvasIdentifierPrefix + canvasIdentifier;
-        const context = document.getCSSCanvasContext("2d", canvasIdentifierPrefix + canvasIdentifier, scaledWidth, scaledHeight);
-        restoreImageFromStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || 0, function() {
-            ensureImageIsLoaded(generateImage.bind(null, canvasIdentifier, specification));
-        });
-    }
-
-    function update()
-    {
-        restoreImages();
-    }
-
-    function generateImage(canvasIdentifier, specification)
-    {
-        console.assert(specification.fillColor instanceof Array);
-        console.assert(specification.fillColor.length === 3 || specification.fillColor.length === 4);
-
-        const context = document.getCSSCanvasContext("2d", canvasIdentifierPrefix + canvasIdentifier, scaledWidth, scaledHeight);
-        context.save();
-        context.scale(scaleFactor, scaleFactor);
-
-        if (specification.shadowColor) {
-            context.shadowOffsetX = specification.shadowOffsetX || 0;
-            context.shadowOffsetY = specification.shadowOffsetY || 0;
-            context.shadowBlur = specification.shadowBlur || 0;
-
-            if (specification.shadowColor instanceof Array) {
-                if (specification.shadowColor.length === 3)
-                    context.shadowColor = "rgb(" + specification.shadowColor.join(", ") + ")";
-                else if (specification.shadowColor.length === 4)
-                    context.shadowColor = "rgba(" + specification.shadowColor.join(", ") + ")";
-            } else
-                context.shadowColor = specification.shadowColor;
-        }
-
-        var coloredImage = generateColoredImage(imageElement, specification.fillColor[0], specification.fillColor[1], specification.fillColor[2], specification.fillColor[3], scaledWidth, scaledHeight);
-        context.drawImage(coloredImage, 0, 0, width, height);
-
-        const storageKey = storageKeyPrefix + canvasIdentifierPrefix + canvasIdentifier;
-        saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, specification.imageVersion || 0);
-        context.restore();
-    }
-}
-
-function generateEmbossedImages(src, width, height, states, canvasIdentifierCallback, ignoreCache)
-{
-    console.assert(src);
-    console.assert(typeof width === "number");
-    console.assert(typeof height === "number");
-    console.assert(states);
-    console.assert(states.Normal);
-    console.assert(states.Active);
-    console.assert(typeof canvasIdentifierCallback === "function");
-
-    var scaleFactor = window.devicePixelRatio;
-    var scaledWidth = width * scaleFactor;
-    var scaledHeight = height * scaleFactor;
-
-    // Bump this version when making changes that affect the result image.
-    const imageVersion = 2;
-
-    const storageKeyPrefix = "generated-embossed-image-";
-
-    var image = null;
-    var pendingImageLoadCallbacks = [];
-
-    _registerGeneratedImageUpdateFunction(update);
-
-    function imageLoaded()
-    {
-        console.assert(image);
-        console.assert(image.complete);
-        for (var i = 0; i < pendingImageLoadCallbacks.length; ++i)
-            pendingImageLoadCallbacks[i]();
-        pendingImageLoadCallbacks = null;
-    }
-
-    function ensureImageIsLoaded(callback)
-    {
-        if (image && image.complete) {
-            callback();
-            return;
-        }
-
-        console.assert(pendingImageLoadCallbacks);
-        pendingImageLoadCallbacks.push(callback);
-
-        if (image)
-            return;
-
-        image = document.createElement("img");
-        image.addEventListener("load", imageLoaded);
-        image.width = width;
-        image.height = height;
-        image.src = src;
-    }
-
-    function restoreImages()
-    {
-        restoreImage(states.Normal);
-        if (states.Focus)
-            restoreImage(states.Focus);
-
-        function restoreActiveImages()
-        {
-            restoreImage(states.Active);
-            if (states.ActiveFocus)
-                restoreImage(states.ActiveFocus);
-        }
-
-        // Delay restoring the active states until later to improve the initial page load time.
-        setTimeout(restoreActiveImages, 500);
-    }
-
-    function restoreImage(state)
-    {
-        const storageKey = storageKeyPrefix + canvasIdentifierCallback(state);
-        const context = document.getCSSCanvasContext("2d", canvasIdentifierCallback(state), scaledWidth, scaledHeight);
-        restoreImageFromStorage(storageKey, context, scaledWidth, scaledHeight, imageVersion, function() {
-            ensureImageIsLoaded(generateImage.bind(null, state));
-        });
-    }
-
-    function update()
-    {
-        if (ignoreCache)
-            generateImages();
-        else
-            restoreImages();
-    }
-
-    function generateImages()
-    {
-        ensureImageIsLoaded(generateImage.bind(null, states.Normal));
-
-        if (states.Focus)
-            ensureImageIsLoaded(generateImage.bind(null, states.Focus));
-
-        function generateActiveImages()
-        {
-            ensureImageIsLoaded(generateImage.bind(null, states.Active));
-
-            if (states.ActiveFocus)
-                ensureImageIsLoaded(generateImage.bind(null, states.ActiveFocus));
-        }
-
-        // Delay generating the active states until later to improve the initial page load time.
-        setTimeout(generateActiveImages, 500);
-    }
-
-    function generateImage(state)
-    {
-        const depth = 1 * scaleFactor;
-        const shadowDepth = depth;
-        const shadowBlur = depth - 1;
-        const glowBlur = 2;
-
-        const context = document.getCSSCanvasContext("2d", canvasIdentifierCallback(state), scaledWidth, scaledHeight);
-        context.save();
-        context.scale(scaleFactor, scaleFactor);
-
-        context.clearRect(0, 0, width, height);
-
-        if (depth > 0) {
-            // Use scratch canvas so we can apply the draw the white drop shadow
-            // to the whole glyph at the end.
-
-            var scratchCanvas = document.createElement("canvas");
-            scratchCanvas.width = scaledWidth;
-            scratchCanvas.height = scaledHeight;
-
-            var scratchContext = scratchCanvas.getContext("2d");
-            scratchContext.scale(scaleFactor, scaleFactor);
-        } else
-            var scratchContext = context;
-
-        var gradient = scratchContext.createLinearGradient(0, 0, 0, height);
-        if (state === states.Active) {
-            gradient.addColorStop(0, "rgb(60, 60, 60)");
-            gradient.addColorStop(1, "rgb(100, 100, 100)");
-        } else if (state === states.Focus) {
-            gradient.addColorStop(0, "rgb(50, 135, 200)");
-            gradient.addColorStop(1, "rgb(60, 155, 225)");
-        } else if (state === states.ActiveFocus) {
-            gradient.addColorStop(0, "rgb(30, 115, 185)");
-            gradient.addColorStop(1, "rgb(40, 135, 200)");
-        } else {
-            gradient.addColorStop(0, "rgb(90, 90, 90)");
-            gradient.addColorStop(1, "rgb(145, 145, 145)");
-        }
-
-        scratchContext.fillStyle = gradient;
-        scratchContext.fillRect(0, 0, width, height);
-
-        if (depth > 0) {
-            // Invert the image to use as a reverse image mask for the inner shadows.
-            // Pass in the color to use for the opaque areas to prevent "black halos"
-            // later when applying the final image mask.
-
-            if (state === states.Active)
-                var invertedImage = _invertMaskImage(image, 60, 60, 60);
-            else if (state === states.Focus)
-                var invertedImage = _invertMaskImage(image, 45, 145, 210);
-            else if (state === states.ActiveFocus)
-                var invertedImage = _invertMaskImage(image, 35, 125, 195);
-            else
-                var invertedImage = _invertMaskImage(image, 90, 90, 90);
-
-            if (state === states.Focus) {
-                // Double draw the blurry inner shadow to get the right effect.
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(10, 95, 150)", invertedImage);
-
-                // Draw the inner shadow.
-                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 80, 170)", invertedImage);
-            } else if (state === states.ActiveFocus) {
-                // Double draw the blurry inner shadow to get the right effect.
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgb(0, 80, 100)", invertedImage);
-
-                // Draw the inner shadow.
-                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgb(0, 65, 150)", invertedImage);
-            } else {
-                // Double draw the blurry inner shadow to get the right effect.
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
-                _drawImageShadow(scratchContext, 0, 0, shadowDepth, "rgba(0, 0, 0, 1)", invertedImage);
-
-                // Draw the inner shadow.
-                _drawImageShadow(scratchContext, 0, shadowDepth, shadowBlur, "rgba(0, 0, 0, 0.6)", invertedImage);
-            }
-        }
-
-        // Apply the mask to keep just the inner shape of the glyph.
-        _applyImageMask(scratchContext, image);
-
-        // Draw the white drop shadow.
-        if (depth > 0)
-            _drawImageShadow(context, 0, shadowDepth, shadowBlur, "rgba(255, 255, 255, 0.6)", scratchCanvas);
-
-        // Draw a subtle glow for the focus states.
-        if (state === states.Focus || state === states.ActiveFocus)
-            _drawImageShadow(context, 0, 0, glowBlur, "rgba(20, 100, 220, 0.4)", scratchCanvas);
-
-        if (!ignoreCache) {
-            const storageKey = storageKeyPrefix + canvasIdentifierCallback(state);
-            saveImageToStorage(storageKey, context, scaledWidth, scaledHeight, imageVersion);
-        }
-
-        context.restore();
-    }
-
-    function _drawImageShadow(context, xOffset, yOffset, blur, color, image) {
-        context.save();
-
-        context.shadowOffsetX = xOffset || 0;
-        context.shadowOffsetY = yOffset || 0;
-        context.shadowBlur = blur || 0;
-        context.shadowColor = color || "black";
-
-        context.drawImage(image, 0, 0, width, height);
-
-        context.restore();
-    }
-
-    function _invertMaskImage(image, red, green, blue) {
-        var bufferCanvas = document.createElement("canvas");
-        bufferCanvas.width = scaledWidth;
-        bufferCanvas.height = scaledHeight;
-
-        var buffer = bufferCanvas.getContext("2d");
-        buffer.scale(scaleFactor, scaleFactor);
-        buffer.drawImage(image, 0, 0, width, height);
-
-        var imageData = buffer.getImageData(0, 0, scaledWidth, scaledHeight);
-        var imageDataPixels = new Uint32Array(imageData.data.buffer);
-
-        red = red || 0;
-        green = green || 0;
-        blue = blue || 0;
-
-        var isLittleEndian = Uint32Array.isLittleEndian();
-
-        for (var i = 0; i < imageDataPixels.length; ++i) {
-            if (isLittleEndian) {
-                var existingAlpha = 0xff & (imageDataPixels[i] >> 24);
-                imageDataPixels[i] = red | green << 8 | blue << 16 | (255 - existingAlpha) << 24;
-            } else {
-                var existingAlpha = 0xff & imageDataPixels[i];
-                imageDataPixels[i] = red << 24 | green << 16 | blue << 8 | 255 - existingAlpha;
-            }
-        }
-
-        buffer.putImageData(imageData, 0, 0);
-
-        return bufferCanvas;
-    }
-
-    function _applyImageMask(context, image) {
-        var maskCanvas = document.createElement("canvas");
-        maskCanvas.width = scaledWidth;
-        maskCanvas.height = scaledHeight;
-
-        var mask = maskCanvas.getContext("2d");
-        mask.scale(scaleFactor, scaleFactor);
-        mask.drawImage(image, 0, 0, width, height);
-
-        var imageData = context.getImageData(0, 0, scaledWidth, scaledHeight);
-        var imageDataPixels = imageData.data;
-
-        var maskImageDataPixels = mask.getImageData(0, 0, scaledWidth, scaledHeight).data;
-
-        for (var i = 3; i < imageDataPixels.length; i += 4)
-            imageDataPixels[i] = maskImageDataPixels[i] * (imageDataPixels[i] / 255);
-
-        context.putImageData(imageData, 0, 0);
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCache.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCache.png
deleted file mode 100644
index 439bdbc92..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ApplicationCache.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCache@2x.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCache@2x.png
deleted file mode 100644
index f1e2f9f2a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ApplicationCache@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest.png
deleted file mode 100644
index 38e431931..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest@2x.png b/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest@2x.png
deleted file mode 100644
index b152015bf..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ApplicationCacheManifest@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/BackArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/BackArrow.pdf
deleted file mode 100644
index e1315f1ee..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/BackArrow.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/BottomUpTree.pdf b/Source/WebInspectorUI/UserInterface/Images/BottomUpTree.pdf
deleted file mode 100644
index ad9d71722..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/BottomUpTree.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png b/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png
deleted file mode 100644
index df12dc2f7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Breakpoint.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png b/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png
deleted file mode 100644
index 7391a2aa8..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Breakpoint@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointButton.pdf b/Source/WebInspectorUI/UserInterface/Images/BreakpointButton.pdf
deleted file mode 100644
index 416cf727d..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/BreakpointButton.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png
deleted file mode 100644
index 7d45dd4cf..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png
deleted file mode 100644
index d0839c491..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactive@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactiveButton.pdf b/Source/WebInspectorUI/UserInterface/Images/BreakpointInactiveButton.pdf
deleted file mode 100644
index bcd1caafb..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/BreakpointInactiveButton.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Breakpoints.pdf b/Source/WebInspectorUI/UserInterface/Images/Breakpoints.pdf
deleted file mode 100644
index 4e1cb9ba7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Breakpoints.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingCSS.png b/Source/WebInspectorUI/UserInterface/Images/ClippingCSS.png
deleted file mode 100644
index c418cfcee..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ClippingCSS.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingCSS@2x.png b/Source/WebInspectorUI/UserInterface/Images/ClippingCSS@2x.png
deleted file mode 100644
index a65cdaeab..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ClippingCSS@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric.png b/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric.png
deleted file mode 100644
index 1ad860179..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric@2x.png
deleted file mode 100644
index 1a77d725e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ClippingGeneric@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingJS.png b/Source/WebInspectorUI/UserInterface/Images/ClippingJS.png
deleted file mode 100644
index 0a2b260e5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ClippingJS.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ClippingJS@2x.png b/Source/WebInspectorUI/UserInterface/Images/ClippingJS@2x.png
deleted file mode 100644
index 0ef3e08a7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ClippingJS@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Close.pdf b/Source/WebInspectorUI/UserInterface/Images/Close.pdf
deleted file mode 100644
index a54f3838d..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Close.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Colors.png b/Source/WebInspectorUI/UserInterface/Images/Colors.png
deleted file mode 100644
index 2fc3736da..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Colors.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Colors@2x.png b/Source/WebInspectorUI/UserInterface/Images/Colors@2x.png
deleted file mode 100644
index 7b33f43b1..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Colors@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Cookie.png b/Source/WebInspectorUI/UserInterface/Images/Cookie.png
deleted file mode 100644
index 20cd0d244..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Cookie.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Cookie@2x.png b/Source/WebInspectorUI/UserInterface/Images/Cookie@2x.png
deleted file mode 100644
index cc4255f45..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Cookie@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Crosshair.pdf b/Source/WebInspectorUI/UserInterface/Images/Crosshair.pdf
deleted file mode 100644
index 34b6e2007..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Crosshair.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMCharacterData.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMCharacterData.pdf
deleted file mode 100644
index 1e6749239..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMCharacterData.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMComment.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMComment.pdf
deleted file mode 100644
index 169d009c4..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMComment.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMDocument.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMDocument.pdf
deleted file mode 100644
index ceb0acbcb..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMDocument.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMDocumentType.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMDocumentType.pdf
deleted file mode 100644
index bd914a3f7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMDocumentType.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMElement.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMElement.pdf
deleted file mode 100644
index ff9a0a423..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMElement.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMNode.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMNode.pdf
deleted file mode 100644
index 9390a4f64..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMNode.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMTextNode.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMTextNode.pdf
deleted file mode 100644
index 16619d2af..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMTextNode.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DOMTree.pdf b/Source/WebInspectorUI/UserInterface/Images/DOMTree.pdf
deleted file mode 100644
index e435dcf5e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DOMTree.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Database.png b/Source/WebInspectorUI/UserInterface/Images/Database.png
deleted file mode 100644
index 1d58e3ca9..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Database.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Database@2x.png b/Source/WebInspectorUI/UserInterface/Images/Database@2x.png
deleted file mode 100644
index 3f86cf38e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Database@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DatabaseTable.png b/Source/WebInspectorUI/UserInterface/Images/DatabaseTable.png
deleted file mode 100644
index 4a5a60863..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DatabaseTable.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DatabaseTable@2x.png b/Source/WebInspectorUI/UserInterface/Images/DatabaseTable@2x.png
deleted file mode 100644
index df39b6814..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DatabaseTable@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallClosed.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallClosed.pdf
deleted file mode 100644
index 6439a1ff5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallClosed.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallOpen.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallOpen.pdf
deleted file mode 100644
index 781220d48..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleSmallOpen.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyClosed.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyClosed.pdf
deleted file mode 100644
index d3c4f9909..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyClosed.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyOpen.pdf b/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyOpen.pdf
deleted file mode 100644
index 2d4332a0b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DisclosureTriangleTinyOpen.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DockBottom.pdf b/Source/WebInspectorUI/UserInterface/Images/DockBottom.pdf
deleted file mode 100644
index 753c23a5b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DockBottom.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DockRight.pdf b/Source/WebInspectorUI/UserInterface/Images/DockRight.pdf
deleted file mode 100644
index e72a3fffb..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DockRight.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentCSS.png b/Source/WebInspectorUI/UserInterface/Images/DocumentCSS.png
deleted file mode 100644
index cfe06bd79..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentCSS.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentCSS@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentCSS@2x.png
deleted file mode 100644
index 70e176f31..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentCSS@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentFont.png b/Source/WebInspectorUI/UserInterface/Images/DocumentFont.png
deleted file mode 100644
index 086d86eb0..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentFont.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentFont@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentFont@2x.png
deleted file mode 100644
index 781d9afa5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentFont@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric.png b/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric.png
deleted file mode 100644
index 6170c57b1..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric@2x.png
deleted file mode 100644
index 82d4754ab..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentGeneric@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentImage.png b/Source/WebInspectorUI/UserInterface/Images/DocumentImage.png
deleted file mode 100644
index a6808d602..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentImage.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentImage@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentImage@2x.png
deleted file mode 100644
index 01817e6db..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentImage@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentJS.png b/Source/WebInspectorUI/UserInterface/Images/DocumentJS.png
deleted file mode 100644
index d1d2e1033..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentJS.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentJS@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentJS@2x.png
deleted file mode 100644
index 903ca9214..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentJS@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup.png b/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup.png
deleted file mode 100644
index b4ad0b687..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup@2x.png b/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup@2x.png
deleted file mode 100644
index 570ffd13d..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/DocumentMarkup@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Error.pdf b/Source/WebInspectorUI/UserInterface/Images/Error.pdf
deleted file mode 100644
index 5fed0efee..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Error.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ErrorSmall.pdf b/Source/WebInspectorUI/UserInterface/Images/ErrorSmall.pdf
deleted file mode 100644
index 8bf6444bf..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ErrorSmall.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Errors.svg b/Source/WebInspectorUI/UserInterface/Images/Errors.svg
deleted file mode 100644
index 4d3b7f875..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Errors.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M8,9.848c-0.666,0-1.206,0.54-1.206,1.205c0,0.666,0.54,1.205,1.206,1.205s1.204-0.539,1.204-1.205
-    C9.204,10.388,8.666,9.848,8,9.848z M8.875,4.489c0-0.483-0.392-0.875-0.875-0.875S7.125,4.005,7.125,4.489v3.5
-    c0,0.483,0.392,0.875,0.875,0.875s0.875-0.392,0.875-0.875V4.489z M13.984,10.516l-3.516,3.499l-4.962-0.012l-3.5-3.517L2.02,5.524
-    l3.517-3.5l4.962,0.012l3.499,3.517L13.984,10.516z"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/ErrorsEnabled.svg b/Source/WebInspectorUI/UserInterface/Images/ErrorsEnabled.svg
deleted file mode 100644
index 02400e5ad..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ErrorsEnabled.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M8,9.848c-0.666,0-1.206,0.54-1.206,1.205c0,0.666,0.54,1.205,1.206,1.205s1.204-0.539,1.204-1.205
-    C9.204,10.388,8.666,9.848,8,9.848z M8.875,4.489c0-0.483-0.392-0.875-0.875-0.875S7.125,4.005,7.125,4.489v3.5
-    c0,0.483,0.392,0.875,0.875,0.875s0.875-0.392,0.875-0.875V4.489z M13.984,10.516l-3.516,3.499l-4.962-0.012l-3.5-3.517L2.02,5.524
-    l3.517-3.5l4.962,0.012l3.499,3.517L13.984,10.516z" fill="#c93739"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/EventListener.pdf b/Source/WebInspectorUI/UserInterface/Images/EventListener.pdf
deleted file mode 100644
index 994a93741..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/EventListener.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Exception.pdf b/Source/WebInspectorUI/UserInterface/Images/Exception.pdf
deleted file mode 100644
index c49c18b0c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Exception.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/FilterFieldGlyph.pdf b/Source/WebInspectorUI/UserInterface/Images/FilterFieldGlyph.pdf
deleted file mode 100644
index e2c3638c4..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/FilterFieldGlyph.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/FolderGeneric.png b/Source/WebInspectorUI/UserInterface/Images/FolderGeneric.png
deleted file mode 100644
index 80d51b3ea..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/FolderGeneric.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/FolderGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/FolderGeneric@2x.png
deleted file mode 100644
index 0d91e206a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/FolderGeneric@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ForwardArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/ForwardArrow.pdf
deleted file mode 100644
index dd81bd237..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ForwardArrow.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Function.pdf b/Source/WebInspectorUI/UserInterface/Images/Function.pdf
deleted file mode 100644
index 0ccff4dd4..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Function.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/GoToArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/GoToArrow.pdf
deleted file mode 100644
index 0e83bacec..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/GoToArrow.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/HierarchicalNavigationItemChevron.pdf b/Source/WebInspectorUI/UserInterface/Images/HierarchicalNavigationItemChevron.pdf
deleted file mode 100644
index 39c4a09f0..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/HierarchicalNavigationItemChevron.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner1.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner1.pdf
deleted file mode 100644
index 2435b1ed3..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner1.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner10.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner10.pdf
deleted file mode 100644
index 22d530ff9..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner10.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner11.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner11.pdf
deleted file mode 100644
index d0e719059..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner11.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner12.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner12.pdf
deleted file mode 100644
index caba7ae0c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner12.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner2.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner2.pdf
deleted file mode 100644
index 0dedb98fa..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner2.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner3.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner3.pdf
deleted file mode 100644
index 621d2c74f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner3.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner4.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner4.pdf
deleted file mode 100644
index dedd6b2ca..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner4.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner5.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner5.pdf
deleted file mode 100644
index 616a79c8b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner5.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner6.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner6.pdf
deleted file mode 100644
index 038941f61..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner6.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner7.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner7.pdf
deleted file mode 100644
index 546a69244..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner7.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner8.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner8.pdf
deleted file mode 100644
index 9bae00117..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner8.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner9.pdf b/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner9.pdf
deleted file mode 100644
index 489dba09f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IndeterminateProgressSpinner9.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/InstructionPointer.png b/Source/WebInspectorUI/UserInterface/Images/InstructionPointer.png
deleted file mode 100644
index 2c9e448f9..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/InstructionPointer.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/InstructionPointer@2x.png b/Source/WebInspectorUI/UserInterface/Images/InstructionPointer@2x.png
deleted file mode 100644
index bedc35a87..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/InstructionPointer@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Issues.svg b/Source/WebInspectorUI/UserInterface/Images/Issues.svg
deleted file mode 100644
index c1b399e30..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Issues.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M8,10.335c-0.703,0-1.272,0.57-1.272,1.274c0,0.702,0.57,1.271,1.272,1.271c0.702,0,1.272-0.569,1.272-1.271
-    C9.272,10.905,8.702,10.335,8,10.335z M8.909,4.708C8.909,4.206,8.501,3.8,8,3.8S7.091,4.206,7.091,4.708v3.633
-    c0,0.501,0.408,0.909,0.909,0.909s0.909-0.408,0.909-0.909V4.708z M14.142,13.278c-0.349,0.507-1.068,0.68-1.541,0.68
-    c-0.298,0-8.912,0-9.201,0c-0.474,0-1.193-0.173-1.541-0.68c-0.329-0.477-0.148-1.309,0.105-1.76
-    c1.416-2.53,2.793-5.417,4.797-9.186C7.411,1.112,8.686,1.201,9.27,2.315c1.398,2.674,3.351,6.673,4.767,9.203
-    C14.289,11.97,14.47,12.802,14.142,13.278z"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/IssuesEnabled.svg b/Source/WebInspectorUI/UserInterface/Images/IssuesEnabled.svg
deleted file mode 100644
index e7d5589ad..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/IssuesEnabled.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M8,10.335c-0.703,0-1.272,0.57-1.272,1.274c0,0.702,0.57,1.271,1.272,1.271c0.702,0,1.272-0.569,1.272-1.271
-    C9.272,10.905,8.702,10.335,8,10.335z M8.909,4.708C8.909,4.206,8.501,3.8,8,3.8S7.091,4.206,7.091,4.708v3.633
-    c0,0.501,0.408,0.909,0.909,0.909s0.909-0.408,0.909-0.909V4.708z M14.142,13.278c-0.349,0.507-1.068,0.68-1.541,0.68
-    c-0.298,0-8.912,0-9.201,0c-0.474,0-1.193-0.173-1.541-0.68c-0.329-0.477-0.148-1.309,0.105-1.76
-    c1.416-2.53,2.793-5.417,4.797-9.186C7.411,1.112,8.686,1.201,9.27,2.315c1.398,2.674,3.351,6.673,4.767,9.203
-    C14.289,11.97,14.47,12.802,14.142,13.278z" fill="#e0a404"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/LayerBorders.pdf b/Source/WebInspectorUI/UserInterface/Images/LayerBorders.pdf
deleted file mode 100644
index 395adc429..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/LayerBorders.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/LessColumns.pdf b/Source/WebInspectorUI/UserInterface/Images/LessColumns.pdf
deleted file mode 100644
index 895f4f242..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/LessColumns.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/LocalStorage.png b/Source/WebInspectorUI/UserInterface/Images/LocalStorage.png
deleted file mode 100644
index 99ea01f4f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/LocalStorage.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/LocalStorage@2x.png b/Source/WebInspectorUI/UserInterface/Images/LocalStorage@2x.png
deleted file mode 100644
index e688a13cd..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/LocalStorage@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Locked.pdf b/Source/WebInspectorUI/UserInterface/Images/Locked.pdf
deleted file mode 100644
index 15c19572c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Locked.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Log.png b/Source/WebInspectorUI/UserInterface/Images/Log.png
deleted file mode 100644
index 646851e4b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Log.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Log@2x.png b/Source/WebInspectorUI/UserInterface/Images/Log@2x.png
deleted file mode 100644
index dcc96f506..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Log@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Logs.svg b/Source/WebInspectorUI/UserInterface/Images/Logs.svg
deleted file mode 100644
index 355c82a21..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Logs.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M10.999,2h-6c-1.649,0-3,1.35-3,3v5c0,1.65,1.351,3,3,3v3l3-3h3c1.649,0,3-1.35,3-3V5C13.999,3.35,12.648,2,10.999,2
-     M10.999,10h-6V9h6V10z M10.999,8h-6V7h6V8z M10.999,6h-6V5h6V6z"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/Memory.svg b/Source/WebInspectorUI/UserInterface/Images/Memory.svg
deleted file mode 100644
index 12eccbaac..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Memory.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M10,4H8.854C8.739,4.355,8.416,4.616,8.022,4.616C7.627,4.616,7.305,4.355,7.189,4H6v8H7.2
-    c0.129-0.33,0.446-0.565,0.823-0.565c0.375,0,0.692,0.235,0.822,0.565H10V4z M13.499,10.991v1.5H12V14H8.845
-    c-0.13-0.33-0.447-0.566-0.822-0.566C7.646,13.434,7.329,13.67,7.2,14H4v-1.509H2.502v-1.5H4v-1H2.502v-1.5H4v-1H2.502v-1.5H4v-1
-    H2.502v-1.5H4V2h3.189c0.116,0.356,0.438,0.617,0.833,0.617c0.394,0,0.717-0.261,0.832-0.617H12v1.491h1.499v1.5H12v1h1.499v1.5H12
-    v1h1.499v1.5H12v1H13.499z"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/MoreColumns.pdf b/Source/WebInspectorUI/UserInterface/Images/MoreColumns.pdf
deleted file mode 100644
index 6a548a819..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/MoreColumns.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Native.pdf b/Source/WebInspectorUI/UserInterface/Images/Native.pdf
deleted file mode 100644
index 9390a4f64..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Native.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemAngleBrackets.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemAngleBrackets.pdf
deleted file mode 100644
index ddea9c845..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemAngleBrackets.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemBrushAndRuler.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemBrushAndRuler.pdf
deleted file mode 100644
index 1b083c794..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemBrushAndRuler.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemBug.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemBug.pdf
deleted file mode 100644
index 77af260e9..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemBug.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemCurleyBraces.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemCurleyBraces.pdf
deleted file mode 100644
index c6f1d66e7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemCurleyBraces.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemFile.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemFile.pdf
deleted file mode 100644
index 3daad0007..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemFile.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemLayers.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemLayers.pdf
deleted file mode 100644
index c5009e61f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemLayers.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemLog.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemLog.pdf
deleted file mode 100644
index 68f70fa72..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemLog.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemMagnifyingGlass.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemMagnifyingGlass.pdf
deleted file mode 100644
index ce2509373..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemMagnifyingGlass.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemStopwatch.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemStopwatch.pdf
deleted file mode 100644
index de32738c1..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemStopwatch.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemStorage.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemStorage.pdf
deleted file mode 100644
index f8a910e33..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemStorage.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemTrash.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemTrash.pdf
deleted file mode 100644
index ec7547f66..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemTrash.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NavigationItemVariable.pdf b/Source/WebInspectorUI/UserInterface/Images/NavigationItemVariable.pdf
deleted file mode 100644
index 86ebf3f5c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NavigationItemVariable.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Network.png b/Source/WebInspectorUI/UserInterface/Images/Network.png
deleted file mode 100644
index 2e36c3d6e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Network.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Network@2x.png b/Source/WebInspectorUI/UserInterface/Images/Network@2x.png
deleted file mode 100644
index 3b143163e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Network@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue.png
deleted file mode 100644
index e22c773b8..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue@2x.png
deleted file mode 100644
index 69c143e72..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarBlue@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray.png
deleted file mode 100644
index 2f4779b7b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray@2x.png
deleted file mode 100644
index 1a038e2fc..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGray@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen.png
deleted file mode 100644
index 863555bcd..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen@2x.png
deleted file mode 100644
index be3a81b3c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarGreen@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutLeft.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutLeft.pdf
deleted file mode 100644
index eaf303260..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutLeft.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutRight.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutRight.pdf
deleted file mode 100644
index e25ac3509..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutRight.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf
deleted file mode 100644
index 61fee0d7c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteLeft.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf b/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf
deleted file mode 100644
index 478d788fa..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarLabelCalloutWhiteRight.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange.png
deleted file mode 100644
index 78f1400c8..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange@2x.png
deleted file mode 100644
index 01da46c0f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarOrange@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple.png
deleted file mode 100644
index 6c77277a7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple@2x.png
deleted file mode 100644
index ae193521e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarPurple@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed.png
deleted file mode 100644
index 43869c6fa..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed@2x.png
deleted file mode 100644
index 6217a7d8a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarRed@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat.png
deleted file mode 100644
index bb5afb90b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat@2x.png
deleted file mode 100644
index e2d89c827..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarWhiteFlat@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow.png
deleted file mode 100644
index 13dcd2c07..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow@2x.png
deleted file mode 100644
index 2ebbff59a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkBarYellow@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue.png
deleted file mode 100644
index 93365f8ed..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue@2x.png
deleted file mode 100644
index 7d1335404..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarBlue@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray.png
deleted file mode 100644
index 67196a60a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray@2x.png
deleted file mode 100644
index ee3119399..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGray@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen.png
deleted file mode 100644
index be1a09eeb..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen@2x.png
deleted file mode 100644
index 7ec08fcb7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarGreen@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange.png
deleted file mode 100644
index fe0340e52..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange@2x.png
deleted file mode 100644
index 795042f8e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarOrange@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple.png
deleted file mode 100644
index cc05f4713..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple@2x.png
deleted file mode 100644
index 3e8dbaac0..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarPurple@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed.png
deleted file mode 100644
index e016e77ad..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed@2x.png
deleted file mode 100644
index e1cce2f9a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarRed@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow.png
deleted file mode 100644
index 0d214132f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow@2x.png b/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow@2x.png
deleted file mode 100644
index fa683f995..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/NetworkHollowBarYellow@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Pause.pdf b/Source/WebInspectorUI/UserInterface/Images/Pause.pdf
deleted file mode 100644
index ae8c6769d..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Pause.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Percent.pdf b/Source/WebInspectorUI/UserInterface/Images/Percent.pdf
deleted file mode 100644
index b3a66bf31..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Percent.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Plus.pdf b/Source/WebInspectorUI/UserInterface/Images/Plus.pdf
deleted file mode 100644
index 1d82b14ed..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Plus.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Profile.png b/Source/WebInspectorUI/UserInterface/Images/Profile.png
deleted file mode 100644
index e28b953db..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Profile.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Profile@2x.png b/Source/WebInspectorUI/UserInterface/Images/Profile@2x.png
deleted file mode 100644
index ee5d2f46f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Profile@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/PseudoElement.pdf b/Source/WebInspectorUI/UserInterface/Images/PseudoElement.pdf
deleted file mode 100644
index 4604c26f2..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/PseudoElement.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Recording.png b/Source/WebInspectorUI/UserInterface/Images/Recording.png
deleted file mode 100644
index 27974866c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Recording.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Recording@2x.png b/Source/WebInspectorUI/UserInterface/Images/Recording@2x.png
deleted file mode 100644
index 7b8177d51..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Recording@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingHovered.png b/Source/WebInspectorUI/UserInterface/Images/RecordingHovered.png
deleted file mode 100644
index e20e0d8d6..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/RecordingHovered.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingHovered@2x.png b/Source/WebInspectorUI/UserInterface/Images/RecordingHovered@2x.png
deleted file mode 100644
index 7602abb68..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/RecordingHovered@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingStopped.png b/Source/WebInspectorUI/UserInterface/Images/RecordingStopped.png
deleted file mode 100644
index eb511164c..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/RecordingStopped.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/RecordingStopped@2x.png b/Source/WebInspectorUI/UserInterface/Images/RecordingStopped@2x.png
deleted file mode 100644
index 6227c30fc..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/RecordingStopped@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Reflection.pdf b/Source/WebInspectorUI/UserInterface/Images/Reflection.pdf
deleted file mode 100644
index 2078f41ef..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Reflection.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Reload.svg b/Source/WebInspectorUI/UserInterface/Images/Reload.svg
deleted file mode 100644
index e8da11099..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Reload.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
-    <style>
-        * {
-            fill: rgb(112, 126, 139);
-        }
-    </style>
-    <g>
-        <defs>
-            <rect id="SVGID_1_" x="2.5" y="0.3" width="11" height="13.2"/>
-        </defs>
-        <clipPath id="SVGID_2_">
-            <use xlink:href="#SVGID_1_" overflow="visible"/>
-        </clipPath>
-        <path clip-path="url(#SVGID_2_)" d="M8,11.3c-1.823,0-3.3-1.478-3.3-3.3c0-1.822,1.477-3.3,3.3-3.3V2.5C4.962,2.5,2.5,4.962,2.5,8
-        s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5h-2.2C11.3,9.822,9.822,11.3,8,11.3"/>
-    </g>
-    <g>
-        <defs>
-            <rect id="SVGID_3_" x="2.5" y="0.3" width="11" height="13.2"/>
-        </defs>
-        <clipPath id="SVGID_4_">
-            <use xlink:href="#SVGID_3_" overflow="visible"/>
-        </clipPath>
-        <polygon clip-path="url(#SVGID_4_)" points="13.5,3.6 8,6.9 8,0.3"/>
-    </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg b/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg
deleted file mode 100644
index 6b4af3235..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ReloadSelected.svg
+++ /dev/null
@@ -1,28 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
-    <style>
-        * {
-            fill: white;
-        }
-    </style>
-    <g>
-        <defs>
-            <rect id="SVGID_1_" x="2.5" y="0.3" width="11" height="13.2"/>
-        </defs>
-        <clipPath id="SVGID_2_">
-            <use xlink:href="#SVGID_1_" overflow="visible"/>
-        </clipPath>
-        <path clip-path="url(#SVGID_2_)" d="M8,11.3c-1.823,0-3.3-1.478-3.3-3.3c0-1.822,1.477-3.3,3.3-3.3V2.5C4.962,2.5,2.5,4.962,2.5,8
-        s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5h-2.2C11.3,9.822,9.822,11.3,8,11.3"/>
-    </g>
-    <g>
-        <defs>
-            <rect id="SVGID_3_" x="2.5" y="0.3" width="11" height="13.2"/>
-        </defs>
-        <clipPath id="SVGID_4_">
-            <use xlink:href="#SVGID_3_" overflow="visible"/>
-        </clipPath>
-        <polygon clip-path="url(#SVGID_4_)" points="13.5,3.6 8,6.9 8,0.3"/>
-    </g>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/Request.pdf b/Source/WebInspectorUI/UserInterface/Images/Request.pdf
deleted file mode 100644
index 60a7050f7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Request.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Resources.svg b/Source/WebInspectorUI/UserInterface/Images/Resources.svg
deleted file mode 100644
index 74480c4b3..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Resources.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M9.518,2H3v12h10V5L9.518,2z M11.002,12H5V4h3.517l2.485,2.455V12z M8,7h2L8,5C8,5,7.999,7,8,7"/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/Response.pdf b/Source/WebInspectorUI/UserInterface/Images/Response.pdf
deleted file mode 100644
index 268f67bfc..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Response.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ResultLine.pdf b/Source/WebInspectorUI/UserInterface/Images/ResultLine.pdf
deleted file mode 100644
index 918121474..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ResultLine.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Resume.pdf b/Source/WebInspectorUI/UserInterface/Images/Resume.pdf
deleted file mode 100644
index 080a69574..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Resume.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Script.png b/Source/WebInspectorUI/UserInterface/Images/Script.png
deleted file mode 100644
index f88e66707..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Script.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Script@2x.png b/Source/WebInspectorUI/UserInterface/Images/Script@2x.png
deleted file mode 100644
index 3a73ae53f..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Script@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/SessionStorage.png b/Source/WebInspectorUI/UserInterface/Images/SessionStorage.png
deleted file mode 100644
index eba13255a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/SessionStorage.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/SessionStorage@2x.png b/Source/WebInspectorUI/UserInterface/Images/SessionStorage@2x.png
deleted file mode 100644
index f9d6b9537..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/SessionStorage@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/ShadowDOM.pdf b/Source/WebInspectorUI/UserInterface/Images/ShadowDOM.pdf
deleted file mode 100644
index 5a1ab64bc..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/ShadowDOM.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/SortIndicatorDownArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/SortIndicatorDownArrow.pdf
deleted file mode 100644
index e44b34ed4..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/SortIndicatorDownArrow.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/SortIndicatorUpArrow.pdf b/Source/WebInspectorUI/UserInterface/Images/SortIndicatorUpArrow.pdf
deleted file mode 100644
index bc4f99976..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/SortIndicatorUpArrow.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/SourceCode.pdf b/Source/WebInspectorUI/UserInterface/Images/SourceCode.pdf
deleted file mode 100644
index 7ae7b4240..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/SourceCode.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/SplitToggleDown.pdf b/Source/WebInspectorUI/UserInterface/Images/SplitToggleDown.pdf
deleted file mode 100644
index 7eee1a757..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/SplitToggleDown.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/SplitToggleUp.pdf b/Source/WebInspectorUI/UserInterface/Images/SplitToggleUp.pdf
deleted file mode 100644
index 549c9677e..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/SplitToggleUp.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StepInto.pdf b/Source/WebInspectorUI/UserInterface/Images/StepInto.pdf
deleted file mode 100644
index a1725418b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StepInto.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StepOut.pdf b/Source/WebInspectorUI/UserInterface/Images/StepOut.pdf
deleted file mode 100644
index e09c766c3..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StepOut.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StepOver.pdf b/Source/WebInspectorUI/UserInterface/Images/StepOver.pdf
deleted file mode 100644
index cf84de581..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StepOver.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Stopwatch.png b/Source/WebInspectorUI/UserInterface/Images/Stopwatch.png
deleted file mode 100644
index 79ee025f6..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Stopwatch.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Stopwatch@2x.png b/Source/WebInspectorUI/UserInterface/Images/Stopwatch@2x.png
deleted file mode 100644
index 48b015d92..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Stopwatch@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleAuthor.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleAuthor.pdf
deleted file mode 100644
index 73ba1f130..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StyleRuleAuthor.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInherited.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInherited.pdf
deleted file mode 100644
index fae2a15e2..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInherited.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInheritedElement.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInheritedElement.pdf
deleted file mode 100644
index 244408d02..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInheritedElement.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInspector.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleInspector.pdf
deleted file mode 100644
index a6f72b8e7..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StyleRuleInspector.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleUser.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleUser.pdf
deleted file mode 100644
index a63702f4d..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StyleRuleUser.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/StyleRuleUserAgent.pdf b/Source/WebInspectorUI/UserInterface/Images/StyleRuleUserAgent.pdf
deleted file mode 100644
index 3c30224a0..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/StyleRuleUserAgent.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Time.svg b/Source/WebInspectorUI/UserInterface/Images/Time.svg
deleted file mode 100644
index 8c7a552ce..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Time.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M8,1.5C4.409,1.5,1.5,4.41,1.5,8s2.909,6.5,6.5,6.5c3.59,0,6.5-2.91,6.5-6.5S11.59,1.5,8,1.5 M8,12.5
-    c-2.486,0-4.5-2.015-4.5-4.5c0-2.485,2.014-4.5,4.5-4.5c2.485,0,4.5,2.015,4.5,4.5C12.499,10.485,10.484,12.5,8,12.5"/>
-    <polygon points="8.999,7.604 8.999,4 7,4 7,8.563 9.484,10.646 10.754,9.074 "/>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue.png
deleted file mode 100644
index b18be8228..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue@2x.png
deleted file mode 100644
index e7cc414cc..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/TimelineBarBlue@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange.png
deleted file mode 100644
index 2eb56884b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png
deleted file mode 100644
index e7ec8f538..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/TimelineBarOrange@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple.png
deleted file mode 100644
index d78e53b67..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple@2x.png b/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple@2x.png
deleted file mode 100644
index ffdf58933..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/TimelineBarPurple@2x.png
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Undock.pdf b/Source/WebInspectorUI/UserInterface/Images/Undock.pdf
deleted file mode 100644
index 67b7a1b75..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Undock.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg b/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg
deleted file mode 100644
index f70c9f6b5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/UpDownArrows.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg viewBox="0 0 5 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2.55,7.02976032 L4.03977126,9.61011984 L1.06022874,9.61011984 L2.55,7.02976032 Z M2.55,7.02976032" stroke="rgb(0,0,0)" transform="translate(2.55,8.75) rotate(-180) translate(-2.55,-8.75)"></path>
-    <path d="M2.55,1.5 L4.06554446,4.125 L1.03445554,4.125 L2.55,1.5 Z M2.55,1.5" stroke="rgb(0,0,0)"></path>
-</svg>
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.pdf
deleted file mode 100644
index 1b12355a1..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/UserInputPrompt.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPrevious.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPrevious.pdf
deleted file mode 100644
index 1e769cd6b..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPrevious.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.pdf
deleted file mode 100644
index 370d6dab5..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/UserInputPromptPreviousSelected.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputResult.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputResult.pdf
deleted file mode 100644
index e31e3fd4d..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/UserInputResult.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/UserInputResultSelected.pdf b/Source/WebInspectorUI/UserInterface/Images/UserInputResultSelected.pdf
deleted file mode 100644
index a9ce5069a..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/UserInputResultSelected.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Warning.pdf b/Source/WebInspectorUI/UserInterface/Images/Warning.pdf
deleted file mode 100644
index 17e370970..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Warning.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/WarningSmall.pdf b/Source/WebInspectorUI/UserInterface/Images/WarningSmall.pdf
deleted file mode 100644
index 2f649dc26..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/WarningSmall.pdf
+++ /dev/null
diff --git a/Source/WebInspectorUI/UserInterface/Images/Weight.svg b/Source/WebInspectorUI/UserInterface/Images/Weight.svg
deleted file mode 100644
index 775115653..000000000
--- a/Source/WebInspectorUI/UserInterface/Images/Weight.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright © 2013 Apple Inc. All rights reserved. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-    <path d="M14,14 L2,14 L4,5 L5.55000905,5 C5.51721456,4.83843954 5.5,4.67123011 5.5,4.5 C5.5,3.11928806 6.61928806,2 8,2 C9.38071194,2 10.5,3.11928806 10.5,4.5 C10.5,4.67123011 10.4827854,4.83843954 10.4499909,5 L12,5 Z M5.42102596,7.00000003 L4.50620499,12.0000001 L11.5142954,12.0000001 L10.6140088,7.00000003 Z M8,5.5 C8.55228478,5.5 9,5.05228478 9,4.5 C9,3.94771522 8.55228478,3.5 8,3.5 C7.44771522,3.5 7,3.94771522 7,4.5 C7,5.05228478 7.44771522,5.5 8,5.5 Z M8,5.5" fill="#000000"></path>
-</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/AUTHORS b/Source/WebInspectorUI/UserInterface/Images/gtk/AUTHORS
new file mode 100644
index 000000000..86877efe8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/AUTHORS
@@ -0,0 +1,47 @@
+* This artwork has been created or adapted by:
+        Andres Gomez <agomez@igalia.com>
+
+* With the exception of the individual files listed below, the artwork
+  included has been created as a derived work from the "gnome-icons"; "inkscape
+  symbolic" and "art-libre symbolic", and the "adwaita-icon-theme", whose authors are:
+        Barbara Muraus <barbara.muraus@gmail.com>
+        Jakub Steiner <jimmac@gmail.com>
+        GNOME Project http://www.gnome.org
+
+* Cookie.png
+* Cookie@2x.png
+        by Nyall Dawson <nyall.dawson@gmail.com>
+
+* Database.png
+* Database@2x.png
+        by Jakub Steinar <jsteiner@redhat.com>
+
+* Log.png
+* Log@2x.png
+        by Lapo Calamandrei <calamandrei@gmail.com>
+
+* NavigationItemBug.svg
+        by Andreas Nilsson <nisses.mail@home.se>
+
+* GradientStop.png
+* GradientStop@2x.png
+* GradientStopSelected.png
+* GradientStopSelected@2x.png
+* SliderThumb.png
+* SliderThumb@2x.png
+* SliderThumbPressed.png
+* SliderThumbPressed@2x.png
+        by GTK+ Project http://www.gtk.org
+
+* FloatLeft.svg
+* FloatRight.svg
+        by LibreOffice design team:
+        GNOME Project http://www.gnome.org
+        Norah A. Abanumay <nabanimy@kacst.edu.sa>
+        Ahmad Hussein Al-Harthi <aalharthi@kacst.edu.sa>
+        Issa Alkurtass <ialkurtass@kacst.edu.sa>
+        Matthias Freund (Papamatti) <matti_lx@mailbox.org>
+        Stefan Knorr <heinzlesspam@gmail.com>
+        Reda Lazri <the.red.shortcut@gmail.com>
+        Miroslav Mazel <stannumdude@gmail.com>
+        Alexander Wilms <f.alexander.wilms@gmail.com>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCache.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCache.png
new file mode 100644
index 000000000..1861964e3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCache.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCache@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCache@2x.png
new file mode 100644
index 000000000..521f1b364
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCache@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCacheManifest.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCacheManifest.png
new file mode 100644
index 000000000..bd8ed7dca
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCacheManifest.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCacheManifest@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCacheManifest@2x.png
new file mode 100644
index 000000000..03c8bfd4f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ApplicationCacheManifest@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BackForwardArrows.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BackForwardArrows.svg
new file mode 100644
index 000000000..396ba1265
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BackForwardArrows.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+    <style>
+        svg[id] {
+            display: none;
+        }
+
+        svg[id]:target {
+            display: initial;
+        }
+
+        svg[id $= "-normal"] {
+            fill: hsl(0, 0%, 33%);
+        }
+
+        svg[id $= "-active"] {
+            fill: hsl(0, 0%, 16.5%);
+        }
+    </style>
+
+    <defs>
+        <symbol id="back-arrow-symbol" viewBox="0 0 9 9"><path fill="inherit" d="m6.3438 0c-0.1429 0.034005-0.2751 0.11116-0.375 0.21875l-3.75 3.75-0.5 0.53125 0.5 0.53125 3.75 3.75c0.1398 0.1379 0.3348 0.2182 0.5312 0.2188h0.03125 0.0625 0.65625v-0.5625-0.09375c0.0359-0.2367-0.048-0.4885-0.2188-0.6563l-3.1874-3.1875 3.1874-3.2188c0.1389-0.139 0.2195-0.33465 0.2188-0.5312v-0.15625-0.59375h-0.5938-0.0937-0.0625-0.0938z"/></symbol>
+        <symbol id="forward-arrow-symbol" viewBox="0 0 9 9"><path fill="inherit" d="m2.6436 0c0.14283 0.034005 0.27509 0.11116 0.375 0.21875l3.75 3.75 0.5 0.53125-0.5 0.53125-3.75 3.75c-0.1399 0.1379-0.3349 0.2182-0.5313 0.2188h-0.03125-0.0625-0.65625v-0.5625-0.09375c-0.0358-0.2367 0.0481-0.4885 0.2188-0.6563l3.1875-3.1875-3.1875-3.2188c-0.1389-0.139-0.2194-0.33465-0.2188-0.5312v-0.15625-0.59375h0.59375 0.09375 0.0625 0.09375z"/></symbol>
+    </defs>
+
+    <svg id="back-arrow-mask"><use fill="currentColor" xlink:href="#back-arrow-symbol"/></svg>
+    <svg id="back-arrow-normal"><use xlink:href="#back-arrow-symbol"/></svg>
+    <svg id="back-arrow-active"><use xlink:href="#back-arrow-symbol"/></svg>
+
+    <svg id="forward-arrow-mask"><use fill="currentColor" xlink:href="#forward-arrow-symbol"/></svg>
+    <svg id="forward-arrow-normal"><use xlink:href="#forward-arrow-symbol"/></svg>
+    <svg id="forward-arrow-active"><use xlink:href="#forward-arrow-symbol"/></svg>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoint.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoint.png
new file mode 100644
index 000000000..48d36ff78
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoint.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoint@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoint@2x.png
new file mode 100644
index 000000000..2e05bc536
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoint@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionAdd.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionAdd.svg
new file mode 100644
index 000000000..eee08ce3e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionAdd.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path fill="#bebebe" d="m7 3v4h-4v2h4v4h2v-4h4v-2h-4v-4h-2z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionRemove.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionRemove.svg
new file mode 100644
index 000000000..bf1397ac2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointActionRemove.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="9.9996" height="2.0002" x="3.0002" y="6.9998" fill="#bebebe"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointButton.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointButton.svg
new file mode 100644
index 000000000..5088dc3a9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointButton.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 21 12">
+ <path d="m2.925 1c-0.4468 0-0.8501 0.1361-1.1562 0.4062-0.3062 0.2702-0.4688 0.6721-0.4688 1.125v7.9375c0 0.46074 0.12924 0.88567 0.4375 1.1562 0.3083 0.271 0.7346 0.375 1.1875 0.375h7.219 0.156l0.125-0.094 5.063-5.0935 0.281-0.2813-0.281-0.25-5.063-5.1562-0.125-0.125h-0.156z"/>
+ <path fill="#3465a4" stroke="#204a87" stroke-width=".78777" d="m10.146 0.39389 5.0713 5.1409-5.0713 5.0713h-7.2048c-0.78066 0-1.2473-0.3721-1.2473-1.1324v-7.9474c0-0.72715 0.49521-1.1324 1.2473-1.1324z"/>
+ <path fill="#729fcf" d="m14.706 5.5-4.7266-4.7266h-7.09c-0.78777 0-0.78777 0.78777-0.78777 0.78777h7.8777z" opacity=".48980"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactive.png b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactive.png
new file mode 100644
index 000000000..117b6fd3a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactive.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactive@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactive@2x.png
new file mode 100644
index 000000000..77807b0c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactive@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactiveButton.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactiveButton.svg
new file mode 100644
index 000000000..e24177c0a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/BreakpointInactiveButton.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 21 12">
+ <path d="m2.925 1c-0.4468 0-0.8501 0.1361-1.1562 0.4062-0.3062 0.2702-0.4688 0.6721-0.4688 1.125v7.9375c0 0.46074 0.1605 0.88567 0.46875 1.1562 0.3082 0.271 0.7033 0.375 1.1562 0.375h7.219 0.156l0.125-0.094 5.063-5.0935 0.281-0.2813-0.281-0.25-5.063-5.1562-0.125-0.125h-0.156z"/>
+ <path fill="#babdb6" stroke="#888a85" stroke-width=".78777" d="m10.146 0.39389 5.0713 5.1409-5.0713 5.0713h-7.2048c-0.78066 0-1.2473-0.3721-1.2473-1.1324v-7.9474c0-0.72715 0.49521-1.1324 1.2473-1.1324z"/>
+ <path fill="#fff" d="m14.706 5.5-4.7266-4.7266h-7.09c-0.78777 0-0.78777 0.78777-0.78777 0.78777h7.8777z" opacity=".48980"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoints.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoints.svg
new file mode 100644
index 000000000..bdadae5e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Breakpoints.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m10.025 3.125 4.875 4.875l-4.875 4.875h-7.3412c-0.4311-0.018-0.784-0.4-0.784-0.813v-8.125c0-0.4308 0.2808-0.812 0.8197-0.812z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING b/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING
new file mode 100644
index 000000000..7b9639ed0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING
@@ -0,0 +1,18 @@
+This work is licensed under the terms of the Creative Commons
+Attribution-Share Alike 3.0 United States License with the exception
+of the files:
+
+* GradientStop.png
+* GradientStop@2x.png
+* GradientStopSelected.png
+* GradientStopSelected@2x.png
+* SliderThumb.png
+* SliderThumb@2x.png
+* SliderThumbPressed.png
+* SliderThumbPressed@2x.png
+
+Which are licensed under the terms of the GNU LGPL v2.
+
+To view a copy of the CC-BY-SA license, visit
+http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative
+Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING_CCBYSA3 b/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING_CCBYSA3
new file mode 100644
index 000000000..baa12f6b5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING_CCBYSA3
@@ -0,0 +1,4 @@
+This work is licensed under the Creative Commons Attribution-Share Alike 3.0
+United States License. To view a copy of this license, visit
+http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative
+Commons, 171 Second Street, Suite 300, San Francisco, California 94105, USA.
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING_LGPL2 b/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING_LGPL2
new file mode 100644
index 000000000..5bc8fb2c8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/COPYING_LGPL2
@@ -0,0 +1,481 @@
+                  GNU LIBRARY GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1991 Free Software Foundation, Inc.
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+[This is the first released version of the library GPL.  It is
+ numbered 2 because it goes with version 2 of the ordinary GPL.]
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+Licenses are intended to guarantee your freedom to share and change
+free software--to make sure the software is free for all its users.
+
+  This license, the Library General Public License, applies to some
+specially designated Free Software Foundation software, and to any
+other libraries whose authors decide to use it.  You can use it for
+your libraries, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if
+you distribute copies of the library, or if you modify it.
+
+  For example, if you distribute copies of the library, whether gratis
+or for a fee, you must give the recipients all the rights that we gave
+you.  You must make sure that they, too, receive or can get the source
+code.  If you link a program with the library, you must provide
+complete object files to the recipients so that they can relink them
+with the library, after making changes to the library and recompiling
+it.  And you must show them these terms so they know their rights.
+
+  Our method of protecting your rights has two steps: (1) copyright
+the library, and (2) offer you this license which gives you legal
+permission to copy, distribute and/or modify the library.
+
+  Also, for each distributor's protection, we want to make certain
+that everyone understands that there is no warranty for this free
+library.  If the library is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original
+version, so that any problems introduced by others will not reflect on
+the original authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that companies distributing free
+software will individually obtain patent licenses, thus in effect
+transforming the program into proprietary software.  To prevent this,
+we have made it clear that any patent must be licensed for everyone's
+free use or not licensed at all.
+
+  Most GNU software, including some libraries, is covered by the ordinary
+GNU General Public License, which was designed for utility programs.  This
+license, the GNU Library General Public License, applies to certain
+designated libraries.  This license is quite different from the ordinary
+one; be sure to read it in full, and don't assume that anything in it is
+the same as in the ordinary license.
+
+  The reason we have a separate public license for some libraries is that
+they blur the distinction we usually make between modifying or adding to a
+program and simply using it.  Linking a program with a library, without
+changing the library, is in some sense simply using the library, and is
+analogous to running a utility program or application program.  However, in
+a textual and legal sense, the linked executable is a combined work, a
+derivative of the original library, and the ordinary General Public License
+treats it as such.
+
+  Because of this blurred distinction, using the ordinary General
+Public License for libraries did not effectively promote software
+sharing, because most developers did not use the libraries.  We
+concluded that weaker conditions might promote sharing better.
+
+  However, unrestricted linking of non-free programs would deprive the
+users of those programs of all benefit from the free status of the
+libraries themselves.  This Library General Public License is intended to
+permit developers of non-free programs to use free libraries, while
+preserving your freedom as a user of such programs to change the free
+libraries that are incorporated in them.  (We have not seen how to achieve
+this as regards changes in header files, but we have achieved it as regards
+changes in the actual functions of the Library.)  The hope is that this
+will lead to faster development of free libraries.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.  Pay close attention to the difference between a
+"work based on the library" and a "work that uses the library".  The
+former contains code derived from the library, while the latter only
+works together with the library.
+
+  Note that it is possible for a library to be covered by the ordinary
+General Public License rather than by this special one.
+
+                  GNU LIBRARY GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License Agreement applies to any software library which
+contains a notice placed by the copyright holder or other authorized
+party saying it may be distributed under the terms of this Library
+General Public License (also called "this License").  Each licensee is
+addressed as "you".
+
+  A "library" means a collection of software functions and/or data
+prepared so as to be conveniently linked with application programs
+(which use some of those functions and data) to form executables.
+
+  The "Library", below, refers to any such software library or work
+which has been distributed under these terms.  A "work based on the
+Library" means either the Library or any derivative work under
+copyright law: that is to say, a work containing the Library or a
+portion of it, either verbatim or with modifications and/or translated
+straightforwardly into another language.  (Hereinafter, translation is
+included without limitation in the term "modification".)
+
+  "Source code" for a work means the preferred form of the work for
+making modifications to it.  For a library, complete source code means
+all the source code for all modules it contains, plus any associated
+interface definition files, plus the scripts used to control compilation
+and installation of the library.
+
+  Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running a program using the Library is not restricted, and output from
+such a program is covered only if its contents constitute a work based
+on the Library (independent of the use of the Library in a tool for
+writing it).  Whether that is true depends on what the Library does
+and what the program that uses the Library does.
+  
+  1. You may copy and distribute verbatim copies of the Library's
+complete source code as you receive it, in any medium, provided that
+you conspicuously and appropriately publish on each copy an
+appropriate copyright notice and disclaimer of warranty; keep intact
+all the notices that refer to this License and to the absence of any
+warranty; and distribute a copy of this License along with the
+Library.
+
+  You may charge a fee for the physical act of transferring a copy,
+and you may at your option offer warranty protection in exchange for a
+fee.
+
+  2. You may modify your copy or copies of the Library or any portion
+of it, thus forming a work based on the Library, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) The modified work must itself be a software library.
+
+    b) You must cause the files modified to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    c) You must cause the whole of the work to be licensed at no
+    charge to all third parties under the terms of this License.
+
+    d) If a facility in the modified Library refers to a function or a
+    table of data to be supplied by an application program that uses
+    the facility, other than as an argument passed when the facility
+    is invoked, then you must make a good faith effort to ensure that,
+    in the event an application does not supply such function or
+    table, the facility still operates, and performs whatever part of
+    its purpose remains meaningful.
+
+    (For example, a function in a library to compute square roots has
+    a purpose that is entirely well-defined independent of the
+    application.  Therefore, Subsection 2d requires that any
+    application-supplied function or table used by this function must
+    be optional: if the application does not supply it, the square
+    root function must still compute square roots.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Library,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Library, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote
+it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Library.
+
+In addition, mere aggregation of another work not based on the Library
+with the Library (or with a work based on the Library) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may opt to apply the terms of the ordinary GNU General Public
+License instead of this License to a given copy of the Library.  To do
+this, you must alter all the notices that refer to this License, so
+that they refer to the ordinary GNU General Public License, version 2,
+instead of to this License.  (If a newer version than version 2 of the
+ordinary GNU General Public License has appeared, then you can specify
+that version instead if you wish.)  Do not make any other change in
+these notices.
+
+  Once this change is made in a given copy, it is irreversible for
+that copy, so the ordinary GNU General Public License applies to all
+subsequent copies and derivative works made from that copy.
+
+  This option is useful when you wish to copy part of the code of
+the Library into a program that is not a library.
+
+  4. You may copy and distribute the Library (or a portion or
+derivative of it, under Section 2) in object code or executable form
+under the terms of Sections 1 and 2 above provided that you accompany
+it with the complete corresponding machine-readable source code, which
+must be distributed under the terms of Sections 1 and 2 above on a
+medium customarily used for software interchange.
+
+  If distribution of object code is made by offering access to copy
+from a designated place, then offering equivalent access to copy the
+source code from the same place satisfies the requirement to
+distribute the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  5. A program that contains no derivative of any portion of the
+Library, but is designed to work with the Library by being compiled or
+linked with it, is called a "work that uses the Library".  Such a
+work, in isolation, is not a derivative work of the Library, and
+therefore falls outside the scope of this License.
+
+  However, linking a "work that uses the Library" with the Library
+creates an executable that is a derivative of the Library (because it
+contains portions of the Library), rather than a "work that uses the
+library".  The executable is therefore covered by this License.
+Section 6 states terms for distribution of such executables.
+
+  When a "work that uses the Library" uses material from a header file
+that is part of the Library, the object code for the work may be a
+derivative work of the Library even though the source code is not.
+Whether this is true is especially significant if the work can be
+linked without the Library, or if the work is itself a library.  The
+threshold for this to be true is not precisely defined by law.
+
+  If such an object file uses only numerical parameters, data
+structure layouts and accessors, and small macros and small inline
+functions (ten lines or less in length), then the use of the object
+file is unrestricted, regardless of whether it is legally a derivative
+work.  (Executables containing this object code plus portions of the
+Library will still fall under Section 6.)
+
+  Otherwise, if the work is a derivative of the Library, you may
+distribute the object code for the work under the terms of Section 6.
+Any executables containing that work also fall under Section 6,
+whether or not they are linked directly with the Library itself.
+
+  6. As an exception to the Sections above, you may also compile or
+link a "work that uses the Library" with the Library to produce a
+work containing portions of the Library, and distribute that work
+under terms of your choice, provided that the terms permit
+modification of the work for the customer's own use and reverse
+engineering for debugging such modifications.
+
+  You must give prominent notice with each copy of the work that the
+Library is used in it and that the Library and its use are covered by
+this License.  You must supply a copy of this License.  If the work
+during execution displays copyright notices, you must include the
+copyright notice for the Library among them, as well as a reference
+directing the user to the copy of this License.  Also, you must do one
+of these things:
+
+    a) Accompany the work with the complete corresponding
+    machine-readable source code for the Library including whatever
+    changes were used in the work (which must be distributed under
+    Sections 1 and 2 above); and, if the work is an executable linked
+    with the Library, with the complete machine-readable "work that
+    uses the Library", as object code and/or source code, so that the
+    user can modify the Library and then relink to produce a modified
+    executable containing the modified Library.  (It is understood
+    that the user who changes the contents of definitions files in the
+    Library will not necessarily be able to recompile the application
+    to use the modified definitions.)
+
+    b) Accompany the work with a written offer, valid for at
+    least three years, to give the same user the materials
+    specified in Subsection 6a, above, for a charge no more
+    than the cost of performing this distribution.
+
+    c) If distribution of the work is made by offering access to copy
+    from a designated place, offer equivalent access to copy the above
+    specified materials from the same place.
+
+    d) Verify that the user has already received a copy of these
+    materials or that you have already sent this user a copy.
+
+  For an executable, the required form of the "work that uses the
+Library" must include any data and utility programs needed for
+reproducing the executable from it.  However, as a special exception,
+the source code distributed need not include anything that is normally
+distributed (in either source or binary form) with the major
+components (compiler, kernel, and so on) of the operating system on
+which the executable runs, unless that component itself accompanies
+the executable.
+
+  It may happen that this requirement contradicts the license
+restrictions of other proprietary libraries that do not normally
+accompany the operating system.  Such a contradiction means you cannot
+use both them and the Library together in an executable that you
+distribute.
+
+  7. You may place library facilities that are a work based on the
+Library side-by-side in a single library together with other library
+facilities not covered by this License, and distribute such a combined
+library, provided that the separate distribution of the work based on
+the Library and of the other library facilities is otherwise
+permitted, and provided that you do these two things:
+
+    a) Accompany the combined library with a copy of the same work
+    based on the Library, uncombined with any other library
+    facilities.  This must be distributed under the terms of the
+    Sections above.
+
+    b) Give prominent notice with the combined library of the fact
+    that part of it is a work based on the Library, and explaining
+    where to find the accompanying uncombined form of the same work.
+
+  8. You may not copy, modify, sublicense, link with, or distribute
+the Library except as expressly provided under this License.  Any
+attempt otherwise to copy, modify, sublicense, link with, or
+distribute the Library is void, and will automatically terminate your
+rights under this License.  However, parties who have received copies,
+or rights, from you under this License will not have their licenses
+terminated so long as such parties remain in full compliance.
+
+  9. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Library or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Library (or any work based on the
+Library), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Library or works based on it.
+
+  10. Each time you redistribute the Library (or any work based on the
+Library), the recipient automatically receives a license from the
+original licensor to copy, distribute, link with or modify the Library
+subject to these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  11. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Library at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Library by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Library.
+
+If any portion of this section is held invalid or unenforceable under any
+particular circumstance, the balance of the section is intended to apply,
+and the section as a whole is intended to apply in other circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  12. If the distribution and/or use of the Library is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Library under this License may add
+an explicit geographical distribution limitation excluding those countries,
+so that distribution is permitted only in or among countries not thus
+excluded.  In such case, this License incorporates the limitation as if
+written in the body of this License.
+
+  13. The Free Software Foundation may publish revised and/or new
+versions of the Library General Public License from time to time.
+Such new versions will be similar in spirit to the present version,
+but may differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Library
+specifies a version number of this License which applies to it and
+"any later version", you have the option of following the terms and
+conditions either of that version or of any later version published by
+the Free Software Foundation.  If the Library does not specify a
+license version number, you may choose any version ever published by
+the Free Software Foundation.
+
+  14. If you wish to incorporate parts of the Library into other free
+programs whose distribution conditions are incompatible with these,
+write to the author to ask for permission.  For software which is
+copyrighted by the Free Software Foundation, write to the Free
+Software Foundation; we sometimes make exceptions for this.  Our
+decision will be guided by the two goals of preserving the free status
+of all derivatives of our free software and of promoting the sharing
+and reuse of software generally.
+
+                            NO WARRANTY
+
+  15. BECAUSE THE LIBRARY IS LICENSED FREE OF CHARGE, THERE IS NO
+WARRANTY FOR THE LIBRARY, TO THE EXTENT PERMITTED BY APPLICABLE LAW.
+EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR
+OTHER PARTIES PROVIDE THE LIBRARY "AS IS" WITHOUT WARRANTY OF ANY
+KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE
+LIBRARY IS WITH YOU.  SHOULD THE LIBRARY PROVE DEFECTIVE, YOU ASSUME
+THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN
+WRITING WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY
+AND/OR REDISTRIBUTE THE LIBRARY AS PERMITTED ABOVE, BE LIABLE TO YOU
+FOR DAMAGES, INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR
+CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR INABILITY TO USE THE
+LIBRARY (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA BEING
+RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A
+FAILURE OF THE LIBRARY TO OPERATE WITH ANY OTHER SOFTWARE), EVEN IF
+SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH
+DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+           How to Apply These Terms to Your New Libraries
+
+  If you develop a new library, and you want it to be of the greatest
+possible use to the public, we recommend making it free software that
+everyone can redistribute and change.  You can do so by permitting
+redistribution under these terms (or, alternatively, under the terms of the
+ordinary General Public License).
+
+  To apply these terms, attach the following notices to the library.  It is
+safest to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least the
+"copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the library's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This library is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Library General Public
+    License as published by the Free Software Foundation; either
+    version 2 of the License, or (at your option) any later version.
+
+    This library is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+    Library General Public License for more details.
+
+    You should have received a copy of the GNU Library General Public
+    License along with this library; if not, write to the Free Software
+    Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
+
+Also add information on how to contact you by electronic and paper mail.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the library, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the
+  library `Frob' (a library for tweaking knobs) written by James Random Hacker.
+
+  <signature of Ty Coon>, 1 April 1990
+  Ty Coon, President of Vice
+
+That's all there is to it!
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Checkers.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Checkers.svg
new file mode 100644
index 000000000..a4369d7af
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Checkers.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" fill="#cccccc" version="1.1" viewBox="0 0 6 6">
+ <rect width="3" height="3" y="3"/>
+ <rect width="3" height="3" x="3"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Circle.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Circle.svg
new file mode 100644
index 000000000..3dac0b6db
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Circle.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
+ <path d="m10.5 6.5a4 4 0 0 1 -8 0 4 4 0 1 1 8 0z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClearBoth.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ClearBoth.svg
new file mode 100644
index 000000000..fcdf12a60
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClearBoth.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m6.2724 2c-0.2947 0.0562-0.5276 0.3431-0.5223 0.643v10.714c0 0.337 0.3062 0.643 0.6428 0.643h3.2142c0.33658-0.000033 0.6428-0.30626 0.64283-0.64283v-10.714c0.005-0.2999-0.228-0.5868-0.5224-0.643zm0.76336 1.286h1.9285v9.4283h-1.9285z"/>
+ <path d="m1.2724 2c-0.29467 0.056228-0.52758 0.34306-0.5223 0.643v4.9293h1.2857v-4.2863h1.9285v9.4284h1.2857v-10.071c0.00528-0.29994-0.22762-0.58677-0.5223-0.643z"/>
+ <rect width=".64282" height=".64283" x="1.393" y="9.5002" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="10.143" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="10.786" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="11.429" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="12.072" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="2.0359" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="3.3215" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="2.6787" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="3.9644" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".76336" x="4.6072" y="12.594" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="6.9289" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="7.5717" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="8.2145" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="8.8574" fill-rule="evenodd"/>
+ <path d="m11.272 2c-0.29467 0.056228-0.52758 0.34306-0.5223 0.643v4.9293h1.2857v-4.2863h1.9285v9.4284h1.2857v-10.071c0.0053-0.29994-0.22762-0.58677-0.5223-0.643z"/>
+ <rect width=".64282" height=".64283" x="11.393" y="9.5002" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="10.143" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="10.786" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="11.429" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="12.072" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="12.036" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="13.322" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="12.679" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="13.964" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".76336" x="14.607" y="12.594" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="6.9289" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="7.5717" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="8.2145" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="8.8574" fill-rule="evenodd"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClearLeft.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ClearLeft.svg
new file mode 100644
index 000000000..54c72900b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClearLeft.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m6.2724 2c-0.2947 0.0562-0.5276 0.3431-0.5223 0.643v10.714c0 0.337 0.3062 0.643 0.6428 0.643h3.2142c0.33658-0.000033 0.6428-0.30626 0.64283-0.64283v-10.714c0.005-0.2999-0.228-0.5868-0.5224-0.643zm0.76336 1.286h1.9285v9.4283h-1.9285z"/>
+ <path d="m1.2724 2c-0.29467 0.056228-0.52758 0.34306-0.5223 0.643v4.9293h1.2857v-4.2863h1.9285v9.4284h1.2857v-10.071c0.00528-0.29994-0.22762-0.58677-0.5223-0.643z"/>
+ <rect width=".64282" height=".64283" x="1.393" y="9.5002" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="10.143" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="10.786" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="11.429" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="12.072" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="2.0359" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="3.3215" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="2.6787" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="3.9644" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".76336" x="4.6072" y="12.594" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="6.9289" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="7.5717" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="1.393" y="8.2145" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x=".75020" y="8.8574" fill-rule="evenodd"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClearRight.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ClearRight.svg
new file mode 100644
index 000000000..1c21c0dfc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClearRight.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m6.2724 2c-0.2947 0.0562-0.5276 0.3431-0.5223 0.643v10.714c0 0.337 0.3062 0.643 0.6428 0.643h3.2142c0.33658-0.000033 0.6428-0.30626 0.64283-0.64283v-10.714c0.005-0.2999-0.228-0.5868-0.5224-0.643zm0.76336 1.286h1.9285v9.4283h-1.9285z"/>
+ <path d="m11.272 2c-0.29467 0.056228-0.52758 0.34306-0.5223 0.643v4.9293h1.2857v-4.2863h1.9285v9.4284h1.2857v-10.071c0.0053-0.29994-0.22762-0.58677-0.5223-0.643z"/>
+ <rect width=".64282" height=".64283" x="11.393" y="9.5002" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="10.143" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="10.786" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="11.429" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="12.072" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="12.036" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="13.322" y="12.714" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="12.679" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="13.964" y="13.357" fill-rule="evenodd"/>
+ <rect width=".64282" height=".76336" x="14.607" y="12.594" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="6.9289" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="7.5717" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="11.393" y="8.2145" fill-rule="evenodd"/>
+ <rect width=".64282" height=".64283" x="10.75" y="8.8574" fill-rule="evenodd"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingCSS.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingCSS.png
new file mode 100644
index 000000000..a0426fe9c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingCSS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingCSS@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingCSS@2x.png
new file mode 100644
index 000000000..4ce2311df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingCSS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingGeneric.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingGeneric.png
new file mode 100644
index 000000000..c38ae3881
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingGeneric.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingGeneric@2x.png
new file mode 100644
index 000000000..667e43853
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingGeneric@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingJS.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingJS.png
new file mode 100644
index 000000000..8fe19b220
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingJS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingJS@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingJS@2x.png
new file mode 100644
index 000000000..b4df42861
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ClippingJS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Close.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Close.svg
new file mode 100644
index 000000000..b9c22f5f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Close.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 14">
+ <path d="m4 3h1c0.01037-0.00012 0.02079-0.00046 0.03125 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l2.2812 2.2813 2.312-2.2813c0.266-0.2305 0.447-0.3055 0.688-0.3125h1v1c0 0.28647-0.03434 0.55065-0.25 0.75l-2.2812 2.2812 2.25 2.25c0.188 0.1882 0.281 0.4535 0.281 0.7188v1h-1c-0.2653-0.00001-0.53059-0.0931-0.71875-0.28125l-2.281-2.2815-2.2812 2.2815c-0.1882 0.188-0.4535 0.281-0.7188 0.281h-1v-1c0-0.2653 0.0931-0.5306 0.2812-0.7188l2.2813-2.25-2.2813-2.2812c-0.2107-0.1946-0.3031-0.4692-0.2812-0.75v-1z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/CloseLarge.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseLarge.svg
new file mode 100644
index 000000000..938535068
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseLarge.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4 4h1c0.01037-0.00012 0.02079-0.00046 0.03125 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l2.2812 2.2813 2.312-2.2813c0.266-0.2305 0.447-0.3055 0.688-0.3125h1v1c0 0.28647-0.03434 0.55065-0.25 0.75l-2.2812 2.2812 2.25 2.25c0.188 0.188 0.281 0.454 0.281 0.719v1h-1c-0.2653-0.00001-0.53059-0.0931-0.71875-0.28125l-2.281-2.2815-2.2812 2.2815c-0.1882 0.188-0.4535 0.281-0.7188 0.281h-1v-1c-0.000003-0.26529 0.09306-0.53058 0.28125-0.71875l2.2813-2.2498-2.2813-2.2812c-0.2107-0.1946-0.3031-0.4692-0.2812-0.75v-1z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/CloseWhite.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseWhite.svg
new file mode 100644
index 000000000..0039c83ae
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/CloseWhite.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 14">
+ <path fill="#fff" d="m4 3h1c0.01037-0.00012 0.02079-0.00046 0.03125 0 0.25495 0.0112 0.50987 0.12858 0.6875 0.3125l2.2812 2.2813 2.312-2.2813c0.266-0.2305 0.447-0.3055 0.688-0.3125h1v1c0 0.28647-0.03434 0.55065-0.25 0.75l-2.2812 2.2812 2.25 2.25c0.188 0.1882 0.281 0.4535 0.281 0.7188v1h-1c-0.2653-0.00001-0.53059-0.0931-0.71875-0.28125l-2.281-2.2815-2.2812 2.2815c-0.1882 0.188-0.4535 0.281-0.7188 0.281h-1v-1c0-0.2653 0.0931-0.5306 0.2812-0.7188l2.2813-2.25-2.2813-2.2812c-0.2107-0.1946-0.3031-0.4692-0.2812-0.75v-1z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorIcon.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorIcon.png
new file mode 100644
index 000000000..f197c8e6b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorIcon.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorIcon@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorIcon@2x.png
new file mode 100644
index 000000000..ec85d1722
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorIcon@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Colors.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Colors.png
new file mode 100644
index 000000000..8a7634561
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Colors.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Colors@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Colors@2x.png
new file mode 100644
index 000000000..2c12841a0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Colors@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge.png
new file mode 100644
index 000000000..2c12841a0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge@2x.png
new file mode 100644
index 000000000..02713789a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ColorsLarge@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Console.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Console.svg
new file mode 100644
index 000000000..b17c71696
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Console.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m2.1875 0.5c-1.2055 0-2.1875 1.0167-2.1875 2.2188v10.562c0 1.202 0.98197 2.219 2.1875 2.219h11.625c1.206 0 2.188-1.017 2.188-2.219v-10.562c0-1.2023-0.982-2.219-2.188-2.219h-11.625zm0 2h11.625c0.123 0 0.188 0.0809 0.188 0.2188v10.562c0 0.138-0.065 0.219-0.188 0.219h-11.625c-0.1223 0-0.187-0.081-0.187-0.219v-10.562c0-0.1381 0.0647-0.219 0.1875-0.219z"/>
+ <path d="m4.3125 6.4062a0.60006 0.60006 0 0 0 -0.25 1.0313l1.5625 1.5625-1.5625 1.562a0.61872 0.61872 0 1 0 0.875 0.875l2-2a0.60006 0.60006 0 0 0 0 -0.875l-2-2a0.60006 0.60006 0 0 0 -0.625 -0.1558z"/>
+ <rect width="3" height="1" x="8" y="10.5"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ContentFlow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ContentFlow.svg
new file mode 100644
index 000000000..0f16fc104
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ContentFlow.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path fill="#bebebe" d="m2.8124 0.50055a1.0001 1.0001 0 0 0 -0.8125 1v13a1.0001 1.0001 0 0 0 1 1h10a1.0001 1.0001 0 0 0 1 -1v-9.4375a1.0001 1.0001 0 0 0 -0.28125 -0.71875l-3.563-3.563a1.0001 1.0001 0 0 0 -0.71875 -0.28125h-6.4375a1.0001 1.0001 0 0 0 -0.0937 0 1.0001 1.0001 0 0 0 -0.0937 0zm1.1875 2h5v3h3v8h-8v-11z"/>
+ <path fill="#bebebe" d="m9.4173 6.111c-0.86023 0-1.5563 0.72246-1.5563 1.5827s0.69608 1.5563 1.5563 1.5563c0.86024 0 1.5827-0.69608 1.5827-1.5563 0-0.86023-0.72246-1.5827-1.5827-1.5827zm0 1.0024c0.3198 0 0.58032 0.26053 0.58032 0.58032 0 0.3198-0.26052 0.55395-0.58032 0.55395s-0.55394-0.23415-0.55394-0.55395c0-0.31979 0.23414-0.58032 0.55394-0.58032z"/>
+ <rect width="2.1" height="5.5" x="5" y="3.5589" fill="#bebebe"/>
+ <rect width="6" height="2.4" x="5" y="10.1" fill="#bebebe"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Cookie.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Cookie.png
new file mode 100644
index 000000000..a3ece491e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Cookie.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Cookie@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Cookie@2x.png
new file mode 100644
index 000000000..47e17664a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Cookie@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Crosshair.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Crosshair.svg
new file mode 100644
index 000000000..5b19c6752
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Crosshair.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m7.9012 0.008034c-0.2434 0.046493-0.4366 0.28375-0.4322 0.53196v0.6317c-3.3628 0.2615-6.0392 2.9292-6.317 6.2837h-0.53196c-0.033035-0.00319-0.066707-0.00319-0.099742 0-0.27869 0.025321-0.52481 0.31938-0.49871 0.59845 0.02613 0.27908 0.31992 0.49246 0.59845 0.46546h0.53196c0.24742 3.3854 2.932 6.1202 6.317 6.3835v0.53196c-0.0043 0.281 0.2514 0.565 0.532 0.565s0.5359-0.284 0.5319-0.565v-0.53196c3.4071-0.253 6.1181-3.008 6.3501-6.4169h0.5652c0.28058 0.00426 0.53196-0.25089 0.53196-0.53196 0-0.28106-0.25138-0.53594-0.53196-0.53196h-0.5652c-0.293-3.3472-2.987-6.0009-6.3501-6.2505v-0.6317c0.0053-0.31511-0.3226-0.59107-0.6317-0.53197zm-0.46546 3.3247v0.53196c-0.00426 0.28058 0.25089 0.53196 0.53196 0.53196 0.28106 0 0.53594-0.25138 0.53196-0.53196v-0.53196c2.2324 0.2309 3.9734 1.9338 4.2224 4.156h-0.5652c-0.28058-0.00398-0.53196 0.25089-0.53196 0.53196 0 0.28106 0.25138 0.53621 0.53196 0.53196h0.5652c-0.24169 2.2348-1.9832 3.9881-4.2224 4.2224v-0.5652c0.00398-0.28058-0.25089-0.53196-0.53196-0.53196-0.28106 0-0.53621 0.25138-0.53196 0.53196v0.53196c-2.2127-0.262-3.9286-1.999-4.1559-4.2226h0.53196c0.28058 0.00426 0.53196-0.25089 0.53196-0.53196 0-0.28106-0.25138-0.53594-0.53196-0.53196h-0.49871c0.2686-2.1715 1.9445-3.8688 4.1226-4.1227z"/>
+ <path d="m9.0449 7.9748a1.0639 1.0639 0 0 1 -2.1278 0 1.0639 1.0639 0 1 1 2.1278 0z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/CubicBezier.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/CubicBezier.svg
new file mode 100644
index 000000000..8e97dd710
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/CubicBezier.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="4" height="4" x="-.0000016357" y="4"/>
+ <rect width="4" height="4" x="12" y="4"/>
+ <rect width="12" height="2" x="2" y="5"/>
+ <path d="m-70 206.5a1.5 1.5 0 1 1 -3 0 1.5 1.5 0 1 1 3 0z" transform="matrix(1.3333 0 0 1.3333 103.33 -269.33)"/>
+ <path d="m15 14c0-3.314-3.134-6-7-6s-7 2.686-7 6h2.0156c0.2879-2.254 2.4076-4 4.9844-4s4.6965 1.7461 4.9844 4z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMCharacterData.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMCharacterData.svg
new file mode 100644
index 000000000..63d0efda1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMCharacterData.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.7468 4.772c-2.707 0-4.5312 1.887-4.5312 4.3125 0 2.3868 1.7261 4.3438 4.4375 4.3438 0.77681 0 1.6598-0.16116 2.5313-0.53125l0.21875-0.09375a0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-0.46875-1.1562a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.58568 0.23206-1.1595 0.34375-1.625 0.34375-0.88382 0-1.5432-0.24749-2-0.6875-0.45679-0.44001-0.71875-1.0822-0.71875-1.875 0-1.408 0.89423-2.5312 2.5-2.5312 0.36888 0 0.90663 0.00178 1.75 0.3125l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.46875-1.125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.21875-0.0625c-0.871-0.3467-1.6578-0.4687-2.3112-0.4687z" display="block"/>
+ <path fill="url(#d)" d="m8.8594 3.6719c-2.707 0-4.5312 1.887-4.5312 4.3125 0 2.3868 1.7261 4.3438 4.4375 4.3438 0.77681 0 1.6598-0.16116 2.5313-0.53125l0.21875-0.09375a0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-0.46875-1.1562a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.58568 0.23206-1.1595 0.34375-1.625 0.34375-0.88382 0-1.5432-0.24749-2-0.6875-0.45679-0.44001-0.71875-1.0822-0.71875-1.875 0-1.408 0.89423-2.5312 2.5-2.5312 0.36888 0 0.90663 0.00178 1.75 0.3125l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.46875-1.125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.21875-0.0625c-0.873-0.3468-1.6593-0.4688-2.3126-0.4688z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMComment.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMComment.svg
new file mode 100644
index 000000000..bee5ab7b3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMComment.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcf6c2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#d3f4b2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#8ae234" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.7468 4.772c-2.707 0-4.5312 1.887-4.5312 4.3125 0 2.3868 1.7261 4.3438 4.4375 4.3438 0.77681 0 1.6598-0.16116 2.5312-0.53125l0.21875-0.09375a0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-0.46875-1.1562a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.58568 0.23206-1.1595 0.34375-1.625 0.34375-0.88382 0-1.5432-0.24749-2-0.6875-0.45679-0.44001-0.71875-1.0822-0.71875-1.875 0-1.408 0.89423-2.5312 2.5-2.5312 0.36888 0 0.90663 0.00178 1.75 0.3125l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.46875-1.125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.21875-0.0625c-0.871-0.3467-1.6578-0.4687-2.3112-0.4687z" display="block"/>
+ <path fill="url(#d)" d="m8.7986 3.7416c-2.707 0-4.5312 1.887-4.5312 4.3125 0 2.3868 1.7261 4.3438 4.4375 4.3438 0.77681 0 1.6598-0.16116 2.5312-0.53125l0.21875-0.09375a0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-0.46875-1.1562a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.58568 0.23206-1.1595 0.34375-1.625 0.34375-0.88382 0-1.5432-0.24749-2-0.6875-0.45679-0.44001-0.71875-1.0822-0.71875-1.875 0-1.408 0.89423-2.5312 2.5-2.5312 0.36888 0 0.90663 0.00178 1.75 0.3125l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.46875-1.125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.218-0.0628c-0.873-0.3467-1.6591-0.4688-2.3124-0.4688z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocument.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocument.svg
new file mode 100644
index 000000000..c9d356ae2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocument.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.2791 4.8511a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.03125v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125h2c0.65883 0 1.3832-0.01226 2.0938-0.1875 0.01009-0.0024 0.02121 0.0025 0.03125 0 1.1558-0.28345 1.963-0.96115 2.4375-1.75 0.47865-0.7957 0.65625-1.715 0.65625-2.5625 0-0.86908-0.24254-1.8618-0.9375-2.6562-0.69495-0.79446-1.8527-1.3438-3.5937-1.3438h-2.6875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0zm1.7813 1.7812h1.0625c0.85144 0 1.4595 0.20476 1.875 0.59375 0.41551 0.38899 0.65625 0.98412 0.65625 1.8125 0 0.70312-0.17815 1.1373-0.3125 1.375-0.29654 0.54626-0.72126 0.82297-1.1875 0.96875s-0.9715 0.15625-1.4062 0.15625h-0.6875v-4.9062z" display="block"/>
+ <path fill="url(#d)" d="m4.3308 3.8207a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.03125v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125h2c0.65883 0 1.3832-0.01226 2.0938-0.1875 0.01009-0.0024 0.02121 0.0025 0.03125 0 1.1558-0.28345 1.963-0.96115 2.4375-1.75 0.47865-0.7957 0.65625-1.715 0.65625-2.5625 0-0.86908-0.24254-1.8618-0.9375-2.6562-0.69496-0.79446-1.8527-1.3438-3.5937-1.3438h-2.6875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0zm1.7813 1.7812h1.0625c0.85144 0 1.4595 0.20476 1.875 0.59375 0.41551 0.38899 0.65625 0.98412 0.65625 1.8125 0 0.70312-0.17815 1.1373-0.3125 1.375-0.29654 0.54626-0.72126 0.82297-1.1875 0.96875s-0.9715 0.15625-1.4062 0.15625h-0.6875v-4.9062z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocumentType.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocumentType.svg
new file mode 100644
index 000000000..c9d356ae2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMDocumentType.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.2791 4.8511a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.03125v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125h2c0.65883 0 1.3832-0.01226 2.0938-0.1875 0.01009-0.0024 0.02121 0.0025 0.03125 0 1.1558-0.28345 1.963-0.96115 2.4375-1.75 0.47865-0.7957 0.65625-1.715 0.65625-2.5625 0-0.86908-0.24254-1.8618-0.9375-2.6562-0.69495-0.79446-1.8527-1.3438-3.5937-1.3438h-2.6875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0zm1.7813 1.7812h1.0625c0.85144 0 1.4595 0.20476 1.875 0.59375 0.41551 0.38899 0.65625 0.98412 0.65625 1.8125 0 0.70312-0.17815 1.1373-0.3125 1.375-0.29654 0.54626-0.72126 0.82297-1.1875 0.96875s-0.9715 0.15625-1.4062 0.15625h-0.6875v-4.9062z" display="block"/>
+ <path fill="url(#d)" d="m4.3308 3.8207a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.03125v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125h2c0.65883 0 1.3832-0.01226 2.0938-0.1875 0.01009-0.0024 0.02121 0.0025 0.03125 0 1.1558-0.28345 1.963-0.96115 2.4375-1.75 0.47865-0.7957 0.65625-1.715 0.65625-2.5625 0-0.86908-0.24254-1.8618-0.9375-2.6562-0.69496-0.79446-1.8527-1.3438-3.5937-1.3438h-2.6875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0zm1.7813 1.7812h1.0625c0.85144 0 1.4595 0.20476 1.875 0.59375 0.41551 0.38899 0.65625 0.98412 0.65625 1.8125 0 0.70312-0.17815 1.1373-0.3125 1.375-0.29654 0.54626-0.72126 0.82297-1.1875 0.96875s-0.9715 0.15625-1.4062 0.15625h-0.6875v-4.9062z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMElement.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMElement.svg
new file mode 100644
index 000000000..fba0a631e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMElement.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m5.1843 4.8494a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000651 0.02085 0.000651 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5938h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2812a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m5.2361 3.819a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000651 0.02085 0.000651 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5937h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2812a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMNode.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMNode.svg
new file mode 100644
index 000000000..6dd1a7c5f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMNode.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.3406 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7188a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4063a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0938l-3.4062-5.2188a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+ <path fill="url(#d)" d="m4.3923 3.8198c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7188a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4062a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0938l-3.4062-5.2188a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DOMTextNode.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMTextNode.svg
new file mode 100644
index 000000000..d2c5d55a8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DOMTextNode.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.4812 4.8501c-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.03888 0.02211-0.07164 0.054868-0.09375 0.09375-0.01327 0.019236-0.02385 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625v1.2813a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.09375 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h2.375v6.4687a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625v-6.4687h2.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625v-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0h-6.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+ <path fill="url(#d)" d="m4.5938 3.75c-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.03888 0.02211-0.07164 0.054868-0.09375 0.09375-0.01327 0.019236-0.02385 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625v1.2813a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.09375 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h2.375v6.4687a0.25002 0.25002 0 0 0 0.0312 0.094 0.25002 0.25002 0 0 0 0.0625 0.094 0.25002 0.25002 0 0 0 0.0625 0.031 0.25002 0.25002 0 0 0 0.0937 0.031h1.4062a0.25002 0.25002 0 0 0 0.0626 0 0.25002 0.25002 0 0 0 0.0625 -0.031 0.25002 0.25002 0 0 0 0.0937 -0.094 0.25002 0.25002 0 0 0 0.0313 -0.063 0.25002 0.25002 0 0 0 0 -0.062v-6.4687h2.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625v-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.032 -0.0625 0.25002 0.25002 0 0 0 -0.093 -0.0938 0.25002 0.25002 0 0 0 -0.063 -0.0312 0.25002 0.25002 0 0 0 -0.0625 0h-6.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Database.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Database.png
new file mode 100644
index 000000000..e42d0b9e6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Database.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Database@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Database@2x.png
new file mode 100644
index 000000000..e52df6cbc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Database@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DatabaseTable.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DatabaseTable.png
new file mode 100644
index 000000000..c86594c1e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DatabaseTable.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DatabaseTable@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DatabaseTable@2x.png
new file mode 100644
index 000000000..fe136b3f2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DatabaseTable@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Debug.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Debug.svg
new file mode 100644
index 000000000..8e70c74c8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Debug.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="#729fcf" d="m6.25 1.25 3.75 3.75-3.75 3.75h-5.6471c-0.33142-0.0138-0.6029-0.3074-0.6029-0.625v-6.25c-3.7e-8 -0.3317 0.21601-0.625 0.63056-0.625z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Debugger.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Debugger.svg
new file mode 100644
index 000000000..a9fda3602
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Debugger.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m13.929 0.14286-2.393 2.6071c-1.025-1.0575-2.3209-1.7143-3.7503-1.7143-1.3478 0-2.6105 0.58459-3.6071 1.5357l-2.1786-2.3214-0.8214 0.7857 2.25 2.3929c-0.6439 0.8686-1.1039 1.931-1.3572 3.1071-0.1067 0.4957-0.1569 1.0051-0.1785 1.5357h-1.8929v1.1429h1.8929c0.0907 1.1127 0.3795 2.1227 0.8214 3.0357l-1.8214 1.964 0.8214 0.786 1.5714-1.714c1.0873 1.5697 2.7125 2.5714 4.5 2.5714 1.8529 0 3.5198-1.0798 4.6071-2.75l1.8214 1.9643 0.82143-0.75-2.1071-2.2857c0.38387-0.85846 0.66652-1.7971 0.75-2.8214h2.3214v-1.1429h-2.3214c-0.022-0.5309-0.108-1.0403-0.215-1.536-0.143-0.6646-0.366-1.2799-0.643-1.8571-0.18-0.3766-0.342-0.742-0.571-1.0715l2.5-2.6785-0.821-0.78574zm-10.786 6.3928h4.0714v8c-2.4374-0.35-4.3214-2.928-4.3214-6.0717 0-0.67366 0.090183-1.3234 0.25-1.9286zm5.5714 0h3.6786c0.16037 0.60612 0.25 1.2537 0.25 1.9286 0 2.9762-1.6802 5.4132-3.9286 5.9643v-7.8929z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangles.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangles.svg
new file mode 100644
index 000000000..73ad2cb23
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DisclosureTriangles.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 13 13">
+    <style>
+        svg[id] {
+            display: none;
+        }
+
+        svg[id]:target {
+            display: initial;
+        }
+
+        path {
+            fill: inherit;
+        }
+
+        svg[id $= "-normal"] {
+            fill: hsl(0, 0%, 55%);
+        }
+
+        svg[id $= "-active"] {
+            fill: hsl(0, 0%, 50%);
+        }
+
+        svg[id $= "-selected"] {
+            fill: white;
+        }
+    </style>
+
+    <defs>
+        <path id="closed-triangle-path" d="m3.75 12 5.5-5.5-5.5-5.5z"/>
+        <path id="open-triangle-path" d="m1 3.75 5.5 5.5 5.5-5.5z"/>
+    </defs>
+
+    <svg id="closed-normal"><use xlink:href="#closed-triangle-path"/></svg>
+    <svg id="closed-active"><use xlink:href="#closed-triangle-path"/></svg>
+    <svg id="closed-selected"><use xlink:href="#closed-triangle-path"/></svg>
+
+    <svg id="open-normal"><use xlink:href="#open-triangle-path"/></svg>
+    <svg id="open-active"><use xlink:href="#open-triangle-path"/></svg>
+    <svg id="open-selected"><use xlink:href="#open-triangle-path"/></svg>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DockBottom.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DockBottom.svg
new file mode 100644
index 000000000..5abd0bafd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DockBottom.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 14">
+ <path d="m2.2812 1c-0.6878 0.0556-1.2842 0.5951-1.2812 1.1875v9.625c-0.00205 0.03747-0.00205 0.05628 0 0.09375v1.094h1.1875 0.21875 11.188 0.125 1.281v-0.969c0.0082-0.07477 0.0082-0.14398 0-0.21875v-9.625c0-0.6277-0.674-1.1869-1.406-1.187h-11.188c-0.0434-0.00176-0.0811-0.00176-0.1248 0zm5.5938 1.0312h0.625 0.03125c0.73923 0 1 0.065018 1 0.8125v1.3125l1.875-1.9062c0.13155-0.1296 0.31657-0.19888 0.5-0.21875 0.69486-0.1144 1.2028 0.95674 0.6875 1.4375l-1.875 1.875h1.2812c0.65064 0 0.8125 0.33402 0.8125 0.96875v0.6875h-0.75l-0.062-0.0001h-3.1875-0.0625c-0.0172 0.0005-0.0453 0.0005-0.0625 0h-0.0625-0.75v-0.65625c-0.0021-0.0345-0.0021-0.0593 0-0.0938-0.0108-0.0772-0.0108-0.1416 0-0.2188v-3.1875-0.0625-0.75zm-4.875 5.9688h10v3h-10v-3z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DockRight.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DockRight.svg
new file mode 100644
index 000000000..6ec5e98dc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DockRight.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 14">
+ <path d="m2.2812 1c-0.6878 0.0556-1.2842 0.5951-1.2812 1.1875v9.625c-0.00205 0.03747-0.00205 0.05628 0 0.09375v1.094h1.1875 0.21875 11.188 0.125 1.281v-0.969c0.0082-0.07477 0.0082-0.14398 0-0.21875v-9.625c0-0.6277-0.674-1.1869-1.406-1.187h-11.188c-0.0434-0.00176-0.0811-0.00176-0.1248 0zm1.7188 2h0.75 0.09375 3.1875 0.0625c0.017326-0.0005328 0.045174-0.0005328 0.0625 0h0.0626 0.7812v0.6562c0.0021 0.0347 0.0021 0.0592 0 0.0938 0.0108 0.0775 0.0108 0.1725 0 0.25v3.1562 0.0938 0.75h-0.6562-0.0313c-0.74378 0-1-0.093119-1-0.84375v-1.2812l-1.875 1.875c-0.1324 0.1301-0.3154 0.23-0.5 0.25-0.6991 0.1149-1.2373-0.9547-0.7187-1.4375l1.9062-1.9063h-1.2812c-0.6547 0-0.8438-0.3313-0.8438-0.9687v-0.6875zm6 0h3v8h-3v-8z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentCSS.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentCSS.png
new file mode 100644
index 000000000..ee44314e8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentCSS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentCSS@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentCSS@2x.png
new file mode 100644
index 000000000..9981bf420
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentCSS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentFont.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentFont.png
new file mode 100644
index 000000000..0f8c5319f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentFont.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentFont@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentFont@2x.png
new file mode 100644
index 000000000..3041a0ee6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentFont@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentGeneric.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentGeneric.png
new file mode 100644
index 000000000..3c285b014
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentGeneric.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentGeneric@2x.png
new file mode 100644
index 000000000..7cad8939d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentGeneric@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentImage.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentImage.png
new file mode 100644
index 000000000..78f7aa39b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentImage.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentImage@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentImage@2x.png
new file mode 100644
index 000000000..3ad564cf5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentImage@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentJS.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentJS.png
new file mode 100644
index 000000000..3b22863f9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentJS.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentJS@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentJS@2x.png
new file mode 100644
index 000000000..585f37deb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentJS@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentMarkup.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentMarkup.png
new file mode 100644
index 000000000..bc86028f8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentMarkup.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentMarkup@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentMarkup@2x.png
new file mode 100644
index 000000000..9ee391946
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DocumentMarkup@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/DownloadArrow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/DownloadArrow.svg
new file mode 100644
index 000000000..1a2d57518
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/DownloadArrow.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4.3438 9c-0.10481 0.041893-0.19456 0.12043-0.25 0.21875l-1 1.5c-0.1172 0.134-0.0938 0.211-0.0938 0.5-0.0013 0.021-0.0013 0.041 0 0.062v3.719h10v-3.688-0.062c0-0.37949 0.03493-0.39156-0.09375-0.53125l-1-1.5c-0.105-0.1611-0.31-0.2506-0.5-0.219-0.327 0.0631-0.506 0.5098-0.312 0.7812l0.812 1.2188h-7.8122l0.8124-1.2188c0.2295-0.3226-0.1109-0.8544-0.5-0.7812-0.0208-0.0013-0.0416-0.0013-0.0624 0zm2 3.4375c0.0208-0.001 0.0417-0.001 0.0625 0 0.29096-0.0556 0.59898 0.20383 0.59375 0.5v0.062h2v-0.062c-0.004-0.26416 0.23582-0.5 0.5-0.5s0.50373 0.23584 0.5 0.5v0.062c0 0.54535-0.45465 1-1 1h-2c-0.5454 0-1-0.455-1-1v-0.0625c-0.0108-0.21706 0.13723-0.43234 0.34375-0.5z"/>
+ <path d="m7 1v5.5625l-1.2812-1.2813c-0.1882-0.1881-0.4535-0.2812-0.7188-0.2812h-1v1c0.00001 0.2653 0.0931 0.53058 0.28125 0.71875l3 3 0.2813 0.2812h0.875l0.28125-0.28125 3-3c0.188-0.1882 0.281-0.4535 0.281-0.7188v-1h-1c-0.2653 0.00001-0.53059 0.0931-0.71875 0.28125l-1.281 1.2813v-5.5625z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Elements.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Elements.svg
new file mode 100644
index 000000000..0ef940fa4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Elements.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m6.0122 2v4.0122h1.6049v1.6049h-3.5745-0.40122v0.40122 1.9696h-1.6413v3.9757h4.0122v-3.9757h-1.5684v-1.5684h7.1854v1.5684h-1.6049v4.0122h3.976v-4.0122h-1.5684v-1.9696-0.40122h-0.40122-3.6109v-1.6049h1.6049v-4.0122h-4.0122z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Error.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Error.svg
new file mode 100644
index 000000000..aacbb622b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Error.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="#ef2929" d="m5 0c-2.7647 0-5 2.2353-5 5s2.2353 5 5 5 5-2.2353 5-5-2.2353-5-5-5zm-2.8571 4.2857h5.7143v1.4286h-5.7143z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Errors.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Errors.svg
new file mode 100644
index 000000000..6f4551e11
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Errors.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m8 2c-3.3176 0-6 2.6824-6 6 0 3.318 2.6824 6 6 6s6-2.6824 6-6-2.6824-6-6-6zm-3.4286 5.1429h6.8571v1.7143h-6.8571z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ErrorsEnabled.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ErrorsEnabled.svg
new file mode 100644
index 000000000..753682a6a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ErrorsEnabled.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path fill="#c00" d="m8 2c-3.3176 0-6 2.6824-6 6 0 3.318 2.6824 6 6 6s6-2.6824 6-6-2.6824-6-6-6zm-3.4286 5.1429h6.8571v1.7143h-6.8571z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/EventListener.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/EventListener.svg
new file mode 100644
index 000000000..eb9557056
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/EventListener.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#ce5c00" offset="0"/>
+   <stop stop-color="#fedba8" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fee2ba" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#ce5c00" offset="0"/>
+   <stop stop-color="#fedba8" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m5.1843 4.8494a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000652 0.02085 0.000652 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5937h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2812a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m5.2361 3.819a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000651 0.02085 0.000651 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5938h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2812a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Exception.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Exception.svg
new file mode 100644
index 000000000..03ddf692c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Exception.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#cbdbed" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m3.1218 5.647a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v6.4063a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h4.1562a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125v-1.0312a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-2.7812v-1.1875h2.4688a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125v-1.0625a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-2.4688v-1.0938h2.7812a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125v-1.0313a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-4.1562a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0zm4.8125 1.9375a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.0625l1.5 2.1562-1.4062 2.0312a0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h1.2188a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.71875-1.125 0.8125 1.1562a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h1.3125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625l-1.5312-2.0312 1.4688-2.125a0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0h-1.25a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375l-0.781 1.2499-0.8124-1.25a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-1.25a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m3.1736 4.6166a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v6.4062a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h4.1562a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125v-1.0312a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-2.7812v-1.1875h2.4688a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125v-1.0625a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-2.4688v-1.0938h2.7812a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125v-1.0313a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-4.1562a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0zm4.8125 1.9375a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.0625l1.5 2.1562-1.4062 2.0312a0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h1.2188a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.71875-1.125 0.8125 1.1562a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h1.3125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625l-1.5312-2.0312 1.4688-2.125a0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0h-1.25a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375l-0.78125 1.25-0.8125-1.25a0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-1.25a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Eye.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Eye.svg
new file mode 100644
index 000000000..7c17103c8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Eye.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 11">
+ <path d="m8 0.5c-3.6819 0-6.6562 5-6.6562 5s2.9744 5 6.6562 5c3.6819 0 6.6562-5 6.6562-5s-2.9744-5-6.6562-5zm0 1.6562c3.2217 0 5 3.3438 5 3.3438s-1.7783 3.3438-5 3.3438-5-3.3438-5-3.3438 1.7783-3.3438 5-3.3438z"/>
+ <path d="m8 3c-1.3807 0-2.5 1.1193-2.5 2.5s1.1193 2.5 2.5 2.5 2.5-1.1193 2.5-2.5-1.1193-2.5-2.5-2.5zm0 1.2812c0.6561 0 1.1875 0.5399 1.1875 1.2188s-0.5314 1.25-1.1875 1.25-1.1875-0.5711-1.1875-1.25 0.5314-1.2188 1.1875-1.2188z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FilterFieldGlyph.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/FilterFieldGlyph.svg
new file mode 100644
index 000000000..d25fd4534
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FilterFieldGlyph.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
+ <path fill="#bebebe" d="m1.5 1.3273v0.71875 0.0625c-0.001 0.13652 0.0388 0.2562 0.125 0.375l4 5.4687c0.062145 0.08767 0.14938 0.16242 0.25 0.21875v2.5016 1l1.25-1v-2.5016c0.1006-0.0563 0.1879-0.131 0.25-0.2187l4-5.4687c0.08625-0.1188 0.12631-0.23848 0.125-0.375v-0.0625-0.71875z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FloatLeft.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/FloatLeft.svg
new file mode 100644
index 000000000..49cb8e5b8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FloatLeft.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width=".66667" height="6.6667" x="7.3333" y="4.6665"/>
+ <rect width="6.6667" height=".66659" x="1.3333" y="4.6666"/>
+ <rect width="6.6667" height=".66659" x="1.3333" y="10.667"/>
+ <rect width=".66667" height="6.6667" x="1.3333" y="4.6665"/>
+ <rect width="5.3333" height="1.3333" x="9.3333" y="4.6665"/>
+ <rect width="5.3333" height="1.3333" x="9.3333" y="7.3332"/>
+ <rect width="5.3333" height="1.3333" x="9.3333" y="9.9998"/>
+ <rect width="13.333" height="1.3333" x="1.3333" y="1.9999"/>
+ <rect width="13.34" height="1.3333" x="1.3277" y="12.667"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FloatRight.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/FloatRight.svg
new file mode 100644
index 000000000..132f252b2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FloatRight.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="13.333" height="1.3333" x="1.3333" y="1.9998"/>
+ <rect width="5.3333" height="1.3333" x="1.3333" y="4.6665"/>
+ <rect width="5.3333" height="1.3333" x="1.3333" y="7.3332"/>
+ <rect width="5.3333" height="1.3333" x="1.3333" y="9.9998"/>
+ <rect width="13.34" height="1.3333" x="1.3277" y="12.667"/>
+ <rect width=".66667" height="6.6667" x="14" y="4.6665"/>
+ <rect width="6.6667" height=".66659" x="8" y="4.6666"/>
+ <rect width="6.6667" height=".66659" x="8" y="10.667"/>
+ <rect width=".66667" height="6.6667" x="8" y="4.6665"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FolderGeneric.png b/Source/WebInspectorUI/UserInterface/Images/gtk/FolderGeneric.png
new file mode 100644
index 000000000..24383dd30
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FolderGeneric.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FolderGeneric@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/FolderGeneric@2x.png
new file mode 100644
index 000000000..b69065cb4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FolderGeneric@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FontStyleItalic.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/FontStyleItalic.svg
new file mode 100644
index 000000000..509d52a2b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FontStyleItalic.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4.5 3v2h6c0.42816 0 0.59383 0.26733 0.46875 0.71875l-0.344 1.2812h-5.25c-1.8385 0-3.1251 1.3524-3.5 2.75-0.1874 0.699-0.1622 1.479 0.25 2.156 0.4122 0.678 1.248 1.094 2.1562 1.094h6 0.75l0.21875-0.71875 1.6562-6c0.435-1.5687-0.726-3.2812-2.406-3.2812h-6zm0.875 6h4.687l-0.562 2h-5.2188c-0.3978 0-0.4245-0.084-0.4687-0.156-0.0442-0.073-0.0808-0.293 0-0.594 0.1616-0.6024 0.7178-1.25 1.5625-1.25z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FontStyleNormal.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/FontStyleNormal.svg
new file mode 100644
index 000000000..72b556142
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FontStyleNormal.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4 3v2h6c0.42816 0 1 0.61414 1 1v1h-5c-0.9193 0-1.7356 0.384-2.25 0.9688-0.5144 0.5847-0.7564 1.3106-0.75 2.0312 0.0064 0.721 0.2689 1.453 0.7812 2.031 0.5124 0.579 1.3105 0.969 2.2188 0.969h6 1v-1-6c0-1.6343-1.32-3-3-3h-6zm2 6h5v2h-5c-0.3979 0-0.5669-0.11-0.7188-0.281-0.1518-0.172-0.2787-0.44-0.2812-0.719-0.0025-0.2794 0.1047-0.5535 0.25-0.7188 0.1453-0.1652 0.3276-0.2812 0.75-0.2812z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/FontVariantSmallCaps.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/FontVariantSmallCaps.svg
new file mode 100644
index 000000000..5bfa52628
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/FontVariantSmallCaps.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4.0883 3.5-3.2143 9h1.9286c0.95538-2.5714 0.01422 0 0.96959-2.5714h3.2037l0.96958 2.5714h1.9286l-3.2143-9zm1.2857 1.9286 1.2999 3.2143h-2.5714z"/>
+ <path d="m9.9413 5.5v7h3.0406c0.65735 0 1.2479-0.26693 1.6188-0.67812 0.37082-0.4112 0.53191-0.93246 0.525-1.4438-0.007-0.51129-0.20014-1.0172-0.56875-1.4219-0.14324-0.15727-0.32798-0.28606-0.525-0.39375 0.16764-0.3207 0.3536-0.63549 0.35-0.98437-0.0052-0.50368-0.16425-1.0199-0.525-1.4219-0.361-0.4019-0.94-0.6561-1.575-0.6561zm1.4 1.4h0.94062c0.28177 0 0.41831 0.077986 0.525 0.19687 0.10669 0.11889 0.17303 0.31227 0.175 0.50313 0.0018 0.19085-0.05171 0.36738-0.15312 0.48125-0.1014 0.11387-0.24544 0.19688-0.54688 0.19688h-0.94062zm0 2.7781h1.6406c0.29488 0 0.43357 0.09436 0.54688 0.21875 0.1133 0.12439 0.19425 0.30895 0.19688 0.50312 0.0027 0.19418-0.06869 0.36335-0.175 0.48125-0.107 0.118-0.248 0.219-0.569 0.219h-1.6406z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Frames.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Frames.png
new file mode 100644
index 000000000..1f390c65b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Frames.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Frames@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Frames@2x.png
new file mode 100644
index 000000000..4e2bf690e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Frames@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Function.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Function.svg
new file mode 100644
index 000000000..f15d7379e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Function.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcf6c2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#d3f4b2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#8ae234" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m9.0593 4.8342c-1.0619 0-1.8016 0.3977-2.25 0.875-0.44838 0.4773-0.61719 1.005-0.6875 1.3438l-0.0625 0.25h-0.71875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.09375l-0.1875 1.0938a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.125 0.15625 0.25002 0.25002 0 0 0 0.125 0.03125h0.59375l-0.84375 4.1563a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.09375 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h1.4062a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.84375-4.2813h1.875a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.21875-1.0938a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-1.7812l0.03125-0.15625c0.037755-0.19297 0.14732-0.34648 0.34375-0.46875 0.19642-0.12227 0.4762-0.21875 0.8125-0.21875 0.30479 0 0.6559 0.064823 0.78125 0.09375l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125l0.40625-1a0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125l-0.1875-0.0625c-0.673-0.2163-1.1307-0.2185-1.4367-0.2185z" display="block"/>
+ <path fill="url(#d)" d="m9.1111 3.8039c-1.0619 0-1.8016 0.3977-2.25 0.875-0.44838 0.4773-0.61719 1.005-0.6875 1.3438l-0.0625 0.25h-0.71875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.09375l-0.1875 1.0938a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.125 0.15625 0.25002 0.25002 0 0 0 0.125 0.03125h0.59375l-0.84375 4.1563a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.09375 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h1.4062a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.84375-4.2813h1.875a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.2191-1.0941a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-1.7812l0.03125-0.15625c0.037755-0.19297 0.14732-0.34648 0.34375-0.46875 0.19642-0.12227 0.4762-0.21875 0.8125-0.21875 0.30479 0 0.6559 0.064823 0.78125 0.09375l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125l0.40625-1a0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125l-0.1875-0.0625c-0.6732-0.2164-1.1309-0.2186-1.4369-0.2186z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Gear.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Gear.svg
new file mode 100644
index 000000000..28ae5e7a6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Gear.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 15 15">
+ <path d="m7.5 0.50005c-0.22065 0-0.44081 0.0113-0.65625 0.0312l-0.4063 2.0938c-0.3345 0.0733-0.6631 0.1759-0.9687 0.3125l-1.5313-1.4687c-0.3886 0.2301-0.7269 0.514-1.0625 0.8124l0.9062 1.9063c-0.2224 0.249-0.4242 0.5225-0.5937 0.8125l-2.0937-0.2812c-0.17777 0.4087-0.30877 0.8363-0.4063 1.2812l1.8438 1c-0.0171 0.16809-0.0312 0.3274-0.0312 0.5s0.0142 0.33191 0.0312 0.5l-1.8438 1c0.0975 0.4449 0.22853 0.8725 0.4063 1.281l2.0937-0.281c0.1695 0.29 0.37133 0.56351 0.59375 0.8125l-0.9062 1.907c0.33555 0.29842 0.67387 0.58239 1.0625 0.8125l1.5313-1.47c0.3057 0.13661 0.63429 0.23916 0.96875 0.3125l0.40625 2.0938c0.21544 0.02 0.4356 0.0312 0.65625 0.0312s0.44081-0.0113 0.65625-0.0312l0.4062-2.093c0.33446-0.0733 0.66305-0.17589 0.96875-0.3125l1.5312 1.4688c0.38863-0.23011 0.72695-0.51408 1.0625-0.8125l-0.905-1.906c0.222-0.248 0.424-0.522 0.593-0.812l2.0938 0.28125c0.178-0.4085 0.309-0.8361 0.406-1.281l-1.843-1c0.0171-0.16809 0.0312-0.3274 0.0312-0.5s-0.0142-0.33191-0.0312-0.5l1.843-1c-0.097-0.4449-0.228-0.8725-0.406-1.2812l-2.094 0.2812c-0.169-0.29-0.371-0.5635-0.593-0.8125l0.906-1.9063c-0.336-0.2984-0.674-0.5823-1.063-0.8124l-1.5308 1.4687c-0.3056-0.1366-0.6342-0.2392-0.9687-0.3125l-0.4063-2.0938c-0.2154-0.01995-0.4356-0.03115-0.6562-0.03115zm0 4c1.6568 0 3 1.3432 3 3s-1.3432 3-3 3-3-1.3432-3-3 1.3432-3 3-3z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/GoToArrow.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/GoToArrow.svg
new file mode 100644
index 000000000..63cdc32c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/GoToArrow.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 10 10">
+    <style>
+        svg[id] {
+            display: none;
+        }
+
+        svg[id]:target {
+            display: initial;
+        }
+
+        path {
+            fill: inherit;
+        }
+
+        #normal {
+            fill: hsla(0, 0%, 0%, 0.5);
+        }
+
+        #active {
+            fill: hsla(0, 0%, 0%, 0.7);
+        }
+
+        #selected {
+            fill: white;
+        }
+
+        #selected-active {
+            fill: hsla(0, 0%, 100%, 0.75);
+        }
+    </style>
+
+    <defs>
+        <path id="go-to-arrow-path" d="m3.7812 0c-1.5485 0-2.8124 1.264-2.8124 2.8125v0.40625h1.625v-0.40625c0-0.6773 0.5102-1.1875 1.1874-1.1875 0.6773 0 1.2188 0.5102 1.2188 1.1875v5.25h1.625v-5.25c0-1.5485-1.2952-2.8125-2.8438-2.8125 M9.0302 5.6424h-0.80604c-0.20706 0-0.42596 0.10465-0.57934 0.25189l-1.8389 1.8387-1.8387-1.8388c-0.1534-0.1472-0.3723-0.2518-0.5794-0.2518h-0.80604v0.80604c0 0.24943 0.072785 0.44519 0.2267 0.60453l2.9974 2.9471 2.9975-2.9471c0.1539-0.1593 0.2267-0.3551 0.2267-0.6045z"/>
+    </defs>
+
+    <svg id="normal"><use xlink:href="#go-to-arrow-path"/></svg>
+    <svg id="active"><use xlink:href="#go-to-arrow-path"/></svg>
+    <svg id="selected"><use xlink:href="#go-to-arrow-path"/></svg>
+    <svg id="selected-active"><use xlink:href="#go-to-arrow-path"/></svg>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStop.png b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStop.png
new file mode 100644
index 000000000..ceefc506a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStop.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStop@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStop@2x.png
new file mode 100644
index 000000000..6ecfc10bd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStop@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStopSelected.png b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStopSelected.png
new file mode 100644
index 000000000..394ab8f77
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStopSelected.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStopSelected@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStopSelected@2x.png
new file mode 100644
index 000000000..561a1313b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/GradientStopSelected@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/HierarchicalNavigationItemChevron.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/HierarchicalNavigationItemChevron.svg
new file mode 100644
index 000000000..62c88e4de
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/HierarchicalNavigationItemChevron.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 7 16">
+ <path fill="#bebebe" d="m1.073 0c0.1676 0.060453 0.3228 0.19761 0.44003 0.38889l4.4003 6.6667 0.5867 0.9444-0.5867 0.9444-4.4003 6.6666c-0.1641 0.245-0.3929 0.388-0.62336 0.389h-0.03667-0.073338-0.77005v-1-0.16667c-0.042084-0.42 0.056386-0.868 0.25669-1.166l3.7402-5.667-3.7402-5.7222c-0.16299-0.2473-0.25751-0.595-0.25671-0.9445v-0.27778-1.0556h0.69671 0.11001 0.073338 0.11001z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/HoverMenuButton.png b/Source/WebInspectorUI/UserInterface/Images/gtk/HoverMenuButton.png
new file mode 100644
index 000000000..74cbc595f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/HoverMenuButton.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/HoverMenuButton@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/HoverMenuButton@2x.png
new file mode 100644
index 000000000..11cd257fc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/HoverMenuButton@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner1.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner1.svg
new file mode 100644
index 000000000..61cfd8495
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner1.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.33324 0.189 -.17767 -.31305 41.83 72.851)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.19958 .74573 -.70061 .18773 143.94 -12.616)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m12.617 22.227a6.892 6.8942 60 1 1 9.9262 -4.2869" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m9.2164 14.586a6.8942 6.892 43.694 1 1 6.9021 8.3228"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner10.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner10.svg
new file mode 100644
index 000000000..ffe956ce8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner10.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.189 .33324 -.31305 .17767 72.7 -9.8781)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.74573 -.19958 .18773 .70061 -12.767 -111.99)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m22.076 19.335a6.8942 6.892 60 1 1 -4.287 -9.926" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m14.435 22.736a6.892 6.8942 43.694 1 1 8.3228 -6.9021"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner11.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner11.svg
new file mode 100644
index 000000000..30ee22f99
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner11.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.0029405 .38309 -.35994 -.0026572 78.04 22.01)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.74561 .20002 -.18773 .70061 55.08 -109.16)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m19.591 21.997a6.892 6.8942 0 1 1 1.251 -10.739" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m11.274 21.122a6.892 6.8942 73.694 1 1 10.659 -1.816"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner12.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner12.svg
new file mode 100644
index 000000000..d5bd31ced
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner12.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.19409 .33030 -.31039 -.18227 66.741 52.291)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.54571 .54603 -.51288 .51288 112.44 -72.782)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m16.129 23.056a6.892 6.8942 30 1 1 6.4529 -8.6757" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m9.3642 18.139a6.8942 6.892 13.694 1 1 10.139 3.7567"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner2.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner2.svg
new file mode 100644
index 000000000..9c8f3ea45
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner2.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.38309 -.0029405 .0026572 -.35994 9.9419 78.191)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.20002 .74561 -.70061 -.18773 141.11 55.231)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m9.9545 19.742a6.8942 6.892 0 1 1 10.74 1.251" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m10.83 11.425a6.8942 6.892 73.694 1 1 1.816 10.659"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner3.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner3.svg
new file mode 100644
index 000000000..5bbe20241
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner3.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.33030 -.19409 .18227 -.31039 -20.339 66.892)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.54603 .54571 -.51288 -.51288 104.73 112.59)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m8.8962 16.28a6.8942 6.892 30 1 1 8.6758 6.453" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m13.813 9.515a6.892 6.8942 13.694 1 1 -3.757 10.139"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner4.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner4.svg
new file mode 100644
index 000000000..8b5de8f2d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner4.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.189 -.33324 .31305 -.17767 -40.899 41.981)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.74573 .19958 -.18773 -.70061 44.568 144.09)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m9.7252 12.768a6.8942 6.892 60 1 1 4.2869 9.9262" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m17.366 9.3673a6.892 6.8942 43.694 1 1 -8.3229 6.9017"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner5.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner5.svg
new file mode 100644
index 000000000..0f8153a5b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner5.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.0029405 -.38309 .35994 .0026572 -46.239 10.093)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.74561 -.20002 .18773 -.70061 -23.279 141.26)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m12.21 10.105a6.892 6.8942 0 1 1 -1.251 10.74" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m20.527 10.981a6.892 6.8942 73.694 1 1 -10.659 1.816"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner6.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner6.svg
new file mode 100644
index 000000000..88169597d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner6.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.19409 -.33030 .31039 .18227 -34.94 -20.188)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.54571 -.54603 .51288 -.51288 -80.638 104.88)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m15.672 9.0471a6.892 6.8942 30 1 1 -6.4531 8.6759" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m22.437 13.964a6.8942 6.892 13.694 1 1 -10.139 -3.757"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner7.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner7.svg
new file mode 100644
index 000000000..e37f20300
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner7.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.33324 -0.189 .17767 .31305 -10.029 -40.748)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.19958 -.74573 .70061 -.18773 -112.14 44.719)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m19.184 9.876a6.892 6.8942 60 1 1 -9.9259 4.287" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m22.585 17.517a6.8942 6.892 43.694 1 1 -6.902 -8.3231"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner8.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner8.svg
new file mode 100644
index 000000000..14a4fc35f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner8.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.38309 .0029405 -.0026572 .35994 21.859 -46.088)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.20002 -.74561 .70061 .18773 -109.31 -23.128)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m21.847 12.361a6.8942 6.892 0 1 1 -10.74 -1.251" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m20.971 20.678a6.8942 6.892 73.694 1 1 -1.816 -10.659"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner9.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner9.svg
new file mode 100644
index 000000000..93c1ca01d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IndeterminateProgressSpinner9.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 32 32">
+ <defs>
+  <radialGradient id="a" cx="304.94" cy="22.665" r="10.046" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.5437 0 0 1.5437 -454.72 -16.47)">
+   <stop offset="0"/>
+   <stop offset=".33333"/>
+   <stop stop-color="#313131" offset="1"/>
+  </radialGradient>
+  <radialGradient id="c" cx=".053942" cy="189.15" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.33030 .19409 -.18227 .31039 52.14 -34.789)">
+   <stop stop-color="#bebebe" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".42857" offset=".75052"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+  <radialGradient id="b" cx="-.067823" cy="188.52" r="27.33" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.54603 -.54571 .51288 .51288 -72.933 -80.487)">
+   <stop stop-color="#fff" stop-opacity="0" offset="0"/>
+   <stop stop-color="#fff" stop-opacity=".15429" offset=".31861"/>
+   <stop stop-color="#fff" stop-opacity=".33714" offset=".54270"/>
+   <stop stop-color="#fff" offset="1"/>
+  </radialGradient>
+ </defs>
+ <path fill="url(#a)" stroke="#fff" stroke-width="3.355" d="m30.323 16a14.323 14.323 0 1 1 -28.645 0 14.323 14.323 0 1 1 28.645 0z" display="block"/>
+ <path fill="none" stroke="url(#b)" stroke-width="5.5916" d="m22.905 15.823a6.8942 6.892 30 1 1 -8.676 -6.4532" stroke-linecap="round"/>
+ <path fill="none" stroke="url(#c)" stroke-width="5.5916" d="m17.988 22.588a6.892 6.8942 13.694 1 1 3.7567 -10.139"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Info.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Info.svg
new file mode 100644
index 000000000..be8464b56
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Info.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="none" stroke="#3465a4" stroke-width="1.25" d="m5 0.625c-1.3807 0-2.5 1.1193-2.5 2.5 0 0.9245 0.50388 1.7159 1.25 2.1484v1.6016h2.5v-1.6016c0.74612-0.43255 1.25-1.2239 1.25-2.1484 0-1.3807-1.1193-2.5-2.5-2.5z"/>
+ <path fill="none" stroke="#3465a4" stroke-width=".625" d="m3.75 9.6875h2.5"/>
+ <path fill="none" stroke="#3465a4" stroke-width=".625" d="m3.125 8.4375h3.75"/>
+ <path fill="none" stroke="#729fcf" stroke-width=".625" d="m4.375 3.4375h1.25"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/InstructionPointer.png b/Source/WebInspectorUI/UserInterface/Images/gtk/InstructionPointer.png
new file mode 100644
index 000000000..b3ee3ef1e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/InstructionPointer.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/InstructionPointer@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/InstructionPointer@2x.png
new file mode 100644
index 000000000..b34f8b379
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/InstructionPointer@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Issues.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Issues.svg
new file mode 100644
index 000000000..d5b910516
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Issues.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m7.9481 2.0014c-0.42299-0.023021-0.83571 0.22784-1.1571 0.77978l-5.0308 9.3318c-0.4295 0.776 0.0388 1.887 0.8804 1.887h10.59c0.79022 0 1.5319-0.93323 0.98101-1.8866l-5.0817-9.2815c-0.3209-0.5201-0.7592-0.807-1.1822-0.8301zm0.050308 3.1694c0.43827-0.013845 0.84397 0.39182 0.83009 0.83009v3.1694c0.00563 0.42525-0.37963 0.80493-0.80493 0.80493s-0.81095-0.37968-0.80493-0.80493v-3.1694c-0.0064-0.3755 0.285-0.7345 0.654-0.8049 0.041132-0.011672 0.083271-0.020043 0.12577-0.025114zm0.025154 5.6094c0.44455 0 0.80493 0.36038 0.80493 0.80493s-0.36039 0.80494-0.80493 0.80494c-0.44455 0-0.80493-0.36039-0.80493-0.80494s0.36039-0.80493 0.80493-0.80493z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/IssuesEnabled.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/IssuesEnabled.svg
new file mode 100644
index 000000000..efbe389a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/IssuesEnabled.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path fill="#f57900" d="m7.9481 2.0014c-0.42299-0.023021-0.83571 0.22784-1.1571 0.77978l-5.0308 9.3318c-0.4295 0.776 0.0388 1.887 0.8804 1.887h10.59c0.79022 0 1.5319-0.93323 0.98101-1.8866l-5.0817-9.2815c-0.3209-0.5201-0.7592-0.807-1.1822-0.8301zm0.050308 3.1694c0.43827-0.013845 0.84397 0.39182 0.83009 0.83009v3.1694c0.00563 0.42525-0.37963 0.80493-0.80493 0.80493s-0.81095-0.37968-0.80493-0.80493v-3.1694c-0.0064-0.3755 0.285-0.7345 0.654-0.8049 0.041132-0.011672 0.083271-0.020043 0.12577-0.025114zm0.025154 5.6094c0.44455 0 0.80493 0.36038 0.80493 0.80493s-0.36039 0.80494-0.80493 0.80494c-0.44455 0-0.80493-0.36039-0.80493-0.80494s0.36039-0.80493 0.80493-0.80493z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/LayerBorders.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/LayerBorders.svg
new file mode 100644
index 000000000..dc83c7035
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/LayerBorders.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m1 14.5 3-3h11l-3 3z"/>
+ <path d="m1 9.5 3-3h11l-3 3z"/>
+ <path d="m1 4.5 3-3h11l-3 3z"/>
+ <path fill="#bebebe" d="m4.5569 2.0969-1.8062 1.8062h8.6925l1.8062-1.8062h-8.6925z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/LocalStorage.png b/Source/WebInspectorUI/UserInterface/Images/gtk/LocalStorage.png
new file mode 100644
index 000000000..13a3c2a60
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/LocalStorage.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/LocalStorage@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/LocalStorage@2x.png
new file mode 100644
index 000000000..205a59672
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/LocalStorage@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Locked.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Locked.svg
new file mode 100644
index 000000000..37e7fa21b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Locked.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 8 10">
+ <path fill="hsla(0, 0%, 0%, 0.5)" d="m3.3333 0.66667c-1.0965 0-2 0.90353-2 2v2h-0.66667c-0.3693 0-0.66663 0.2973-0.66663 0.6666v0.35417 3.6458h3.3333 1.3333 3.3334v-3.6458-0.3542c0-0.3693-0.2973-0.6666-0.6667-0.6666h-0.66667v-2c0-1.0965-0.90353-2-2-2h-1.3333zm0 1.3333h1.3333c0.38087 0 0.66667 0.2858 0.66667 0.66667v2h-2.6667v-2c0-0.38087 0.2858-0.66667 0.66667-0.66667z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Log.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Log.svg
new file mode 100644
index 000000000..1912d524f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Log.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="#bebebe" d="m1 1v8h0.4844c-0.2247-0.2625-0.1955-0.4959 0.0156-0.7656l1.2723-1.2605c-0.1697-0.2926-0.2723-0.6285-0.2723-0.9895 0-1.1068 0.90039-2.0156 2-2.0156s2 0.90884 2 2.0156-0.9004 2.0156-2 2.0156c-0.4046 0-0.7779-0.1178-1.0938-0.3281l-1.3906 1.3281h6c-0.063-0.063-0.1094-0.1539-0.1094-0.25 0-0.1922 0.1516-0.3438 0.3438-0.3438s0.3594 0.1516 0.3594 0.3438c0 0.0961-0.0464 0.187-0.1094 0.25h0.5v-8h-0.5c-0.063 0.063-0.1539 0.1094-0.25 0.1094s-0.1714-0.0464-0.2344-0.1094h-6.0312c-0.063 0.063-0.1383 0.1094-0.2344 0.1094s-0.187-0.0464-0.25-0.1094zm0.75 0.40625c0.19221 0 0.34375 0.15154 0.34375 0.34375s-0.15154 0.35938-0.34375 0.35938c-0.1922 0.0001-0.3594-0.1671-0.3594-0.3593s0.1672-0.3438 0.3594-0.3438zm6.5 0c0.19221 0 0.35938 0.15154 0.35938 0.34375 0 0.1922-0.1672 0.3594-0.3594 0.3594s-0.3438-0.1672-0.3438-0.3594 0.1516-0.3438 0.3438-0.3438zm-6.5 1c0.19221 0 0.34375 0.15154 0.34375 0.34375s-0.15154 0.35938-0.34375 0.35938c-0.1922 0.0001-0.3594-0.1671-0.3594-0.3593s0.1672-0.3438 0.3594-0.3438zm6.5 0c0.19221 0 0.35938 0.15154 0.35938 0.34375 0 0.1922-0.1672 0.3594-0.3594 0.3594s-0.3438-0.1672-0.3438-0.3594 0.1516-0.3438 0.3438-0.3438zm-6.5 1c0.19221 0 0.34375 0.15154 0.34375 0.34375s-0.15154 0.35938-0.34375 0.35938c-0.1922 0.0001-0.3594-0.1671-0.3594-0.3593s0.1672-0.3438 0.3594-0.3438zm6.5 0c0.19221 0 0.35938 0.15154 0.35938 0.34375 0 0.1922-0.1672 0.3594-0.3594 0.3594s-0.3438-0.1672-0.3438-0.3594 0.1516-0.3438 0.3438-0.3438zm-6.5 1c0.19221 0 0.34375 0.15154 0.34375 0.34375s-0.15154 0.35938-0.34375 0.35938c-0.1922 0.0001-0.3594-0.1671-0.3594-0.3593s0.1672-0.3438 0.3594-0.3438zm6.5 0c0.19221 0 0.35938 0.15154 0.35938 0.34375 0 0.1922-0.1672 0.3594-0.3594 0.3594s-0.3438-0.1672-0.3438-0.3594 0.1516-0.3438 0.3438-0.3438zm-3.7299 0.6016c-0.5561 0-0.99552 0.44808-0.99552 1.0078 0 0.55973 0.43942 1.0078 0.99552 1.0078s0.99552-0.44808 0.99552-1.0078c0-0.55973-0.43942-1.0078-0.99552-1.0078zm-2.7701 0.3984c0.19221 0 0.34375 0.15154 0.34375 0.34375s-0.15154 0.35938-0.34375 0.35938c-0.1922 0.0001-0.3594-0.1671-0.3594-0.3593s0.1672-0.3438 0.3594-0.3438zm6.5 0c0.19221 0 0.35938 0.15154 0.35938 0.34375 0 0.1922-0.1672 0.3594-0.3594 0.3594s-0.3438-0.1672-0.3438-0.3594 0.1516-0.3438 0.3438-0.3438zm-6.5 1c0.19221 0 0.34375 0.15154 0.34375 0.34375s-0.15154 0.35938-0.34375 0.35938c-0.1922 0.0001-0.3594-0.1671-0.3594-0.3593s0.1672-0.3438 0.3594-0.3438zm6.5 0c0.19221 0 0.35938 0.15154 0.35938 0.34375 0 0.1922-0.1672 0.3594-0.3594 0.3594s-0.3438-0.1672-0.3438-0.3594 0.1516-0.3438 0.3438-0.3438zm0 1c0.19221 0 0.35938 0.15154 0.35938 0.34375 0 0.1922-0.1672 0.3594-0.3594 0.3594s-0.3438-0.1672-0.3438-0.3594 0.1516-0.3438 0.3438-0.3438z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Logs.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Logs.svg
new file mode 100644
index 000000000..2da2e9ed9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Logs.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m2 2v12h0.72656c-0.33695-0.39381-0.29316-0.74388 0.0234-1.1484l1.9084-1.891c-0.2546-0.439-0.4084-0.943-0.4084-1.4844 0-1.6602 1.3506-3.0234 3-3.0234s3 1.3633 3 3.0234c0 1.6602-1.3506 3.0234-3 3.0234-0.6069 0-1.1669-0.17667-1.6406-0.49219l-2.086 1.992h8.9996c-0.09447-0.09447-0.16406-0.23084-0.16406-0.375 0-0.28832 0.22731-0.51562 0.51562-0.51562 0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.14416-0.0696 0.28053-0.16406 0.375h0.75v-12h-0.75c-0.09447 0.09447-0.23084 0.16406-0.375 0.16406s-0.25709-0.0696-0.35156-0.16406h-9.0464c-0.0945 0.0945-0.2074 0.1641-0.3516 0.1641s-0.2805-0.0696-0.375-0.1641zm1.125 0.60938c0.28832 0 0.51562 0.22731 0.51562 0.51562 0 0.28832-0.22731 0.53906-0.51562 0.53906-0.28832 0-0.53906-0.25075-0.53906-0.53906 0-0.28832 0.25075-0.51562 0.53906-0.51562zm9.75 0c0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.28832-0.25075 0.53906-0.53906 0.53906-0.28832 0-0.51562-0.25075-0.51562-0.53906 0-0.28832 0.22731-0.51562 0.51562-0.51562zm-9.75 1.5c0.28832 0 0.51562 0.22731 0.51562 0.51562 0 0.28832-0.22731 0.53906-0.51562 0.53906-0.28832 0-0.53906-0.25075-0.53906-0.53906 0-0.28832 0.25075-0.51562 0.53906-0.51562zm9.75 0c0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.28832-0.25075 0.53906-0.53906 0.53906-0.28832 0-0.51562-0.25075-0.51562-0.53906 0-0.28832 0.22731-0.51562 0.51562-0.51562zm-9.75 1.5c0.28832 0 0.51562 0.22731 0.51562 0.51562 0 0.28832-0.22731 0.53906-0.51562 0.53906-0.28832 0-0.53906-0.25075-0.53906-0.53906 0-0.28832 0.25075-0.51562 0.53906-0.51562zm9.75 0c0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.28832-0.25075 0.53906-0.53906 0.53906-0.28832 0-0.51562-0.25075-0.51562-0.53906 0-0.28832 0.22731-0.51562 0.51562-0.51562zm-9.75 1.5c0.28832 0 0.51562 0.22731 0.51562 0.51562 0 0.28832-0.22731 0.53906-0.51562 0.53906-0.28832 0-0.53906-0.25075-0.53906-0.53906 0-0.28832 0.25075-0.51562 0.53906-0.51562zm9.75 0c0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.28832-0.25075 0.53906-0.53906 0.53906-0.28832 0-0.51562-0.25075-0.51562-0.53906 0-0.28832 0.22731-0.51562 0.51562-0.51562zm-5.5948 0.90234c-0.83415 0-1.4933 0.67213-1.4933 1.5117 0 0.83959 0.65914 1.5117 1.4933 1.5117 0.83415 0 1.4933-0.67212 1.4933-1.5117 0-0.8396-0.65913-1.5117-1.4933-1.5117zm-4.1552 0.5977c0.28832 0 0.51562 0.22731 0.51562 0.51562 0 0.28832-0.22731 0.53906-0.51562 0.53906-0.28832 0-0.53906-0.25075-0.53906-0.53906 0-0.28832 0.25075-0.51562 0.53906-0.51562zm9.75 0c0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.28832-0.25075 0.53906-0.53906 0.53906-0.28832 0-0.51562-0.25075-0.51562-0.53906 0-0.28832 0.22731-0.51562 0.51562-0.51562zm-9.75 1.5c0.28832 0 0.51562 0.22731 0.51562 0.51562 0 0.28832-0.22731 0.53906-0.51562 0.53906-0.28832 0-0.53906-0.25075-0.53906-0.53906 0-0.28832 0.25075-0.51562 0.53906-0.51562zm9.75 0c0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.28832-0.25075 0.53906-0.53906 0.53906-0.28832 0-0.51562-0.25075-0.51562-0.53906 0-0.28832 0.22731-0.51562 0.51562-0.51562zm0 1.5c0.28832 0 0.53906 0.22731 0.53906 0.51562 0 0.28832-0.25075 0.53906-0.53906 0.53906-0.28832 0-0.51562-0.25075-0.51562-0.53906 0-0.28832 0.22731-0.51562 0.51562-0.51562z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Minus.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Minus.svg
new file mode 100644
index 000000000..9308ab561
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Minus.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
+ <path d="m1 5.5208v1.9584h11v-1.9584"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Native.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Native.svg
new file mode 100644
index 000000000..6dd1a7c5f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Native.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.3406 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7188a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4063a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0938l-3.4062-5.2188a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+ <path fill="url(#d)" d="m4.3923 3.8198c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7188a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4062a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0938l-3.4062-5.2188a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCurleyBraces.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCurleyBraces.svg
new file mode 100644
index 000000000..eddcf4fed
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemCurleyBraces.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m3.4301 5.4599c-0.1536 1.1724-0.7677 1.6887-1.4236 1.8004l-0.23726 0.027913v1.4236l0.23726 0.027913c0.23726 0.04187 0.46057 0.13957 0.65596 0.27913 0.86531 0.62805 0.75366 1.7585 0.85135 2.7076 0.26518 2.6099 2.1074 3.0565 2.7495 3.0984l0.23726 0.02791 0.33496-1.4236-0.30705-0.04187c-0.4606-0.056-0.8514-0.349-1.0747-0.684-0.7537-1.158 0.0558-3.3911-1.4934-4.703 1.5352-1.3119 0.7257-3.531 1.4934-4.7034 0.2233-0.3349 0.6141-0.642 1.0746-0.6978l0.3071-0.0419-0.335-1.4096-0.2373 0.014c-0.7397 0.0558-2.4982 0.5443-2.7494 3.196-0.0279 0.3769-0.0419 0.7537-0.0837 1.1026"/>
+ <path d="m12.486 4.3573c-0.251-2.6378-1.996-3.1402-2.7492-3.196l-0.2373-0.014-0.321 1.4096 0.307 0.0419c0.46057 0.055826 0.8374 0.36287 1.0607 0.69783 0.76761 1.1724-0.04187 3.3915 1.4934 4.7034-1.5492 1.3119-0.7397 3.545-1.4934 4.7034-0.2233 0.33496-0.60013 0.62805-1.0607 0.68387l-0.30705 0.04187 0.321 1.4236 0.23726-0.02791c0.642-0.04187 2.4843-0.48848 2.7495-3.0984 0.0977-0.94905-0.01396-2.0795 0.85135-2.7076 0.19539-0.13957 0.43266-0.23726 0.66992-0.27913l0.2233-0.027913v-1.4236l-0.2233-0.027913c-0.655-0.1129-1.27-0.6292-1.423-1.8016-0.042-0.3489-0.07-0.7257-0.098-1.1026"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTrash.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTrash.svg
new file mode 100644
index 000000000..b873ad767
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTrash.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m3.5 5v9h9v-9h2v9c0 2-2 2-2 2h-9c-2 0-2-2-2-2v-9zm4 1h1v6h-1zm2 0h1v6h-1zm-4 0h0.99999v6h-0.99999zm-1-6c-2 0-2 2-2 2h-2v2h15v-2h-2c0-2-2-2-2-2h-7zm0 1h7v1h-7v-1z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTypes.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTypes.svg
new file mode 100644
index 000000000..5c14085ff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NavigationItemTypes.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 14">
+ <rect width="12" height="12" x=".49998" y="1.0001" fill="none" stroke="#000" stroke-width=".99996" stroke-miterlimit="10" stroke-linejoin="bevel" rx="1.2112" ry="1.2111"/>
+ <path d="m3.0938 2.75c-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.03888 0.02211-0.07164 0.054868-0.09375 0.09375-0.01327 0.019236-0.02385 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625v1.2813a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.09375 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h2.375v6.4687a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625v-6.4687h2.4063a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625v-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.032 -0.0625 0.25002 0.25002 0 0 0 -0.0933 -0.0938 0.25002 0.25002 0 0 0 -0.0625 -0.0312 0.25002 0.25002 0 0 0 -0.0625 0h-6.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Network.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Network.png
new file mode 100644
index 000000000..67f505384
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Network.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Network.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Network.svg
new file mode 100644
index 000000000..0d65fe36a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Network.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path fill="#000" d="m4.5761 6.9615c-0.3214 0-0.6383 0.0939-0.8438 0.292l-3.7323 3.8625 3.7972 3.862c0.20533 0.19837 0.45753 0.29208 0.77891 0.29209h1.0385v-1.0385c-0.0000519-0.26678-0.13457-0.54909-0.32454-0.74645l-1.3306-1.3306h4.7708c0.54867 0.0073 1.0385-0.48982 1.0385-1.0385 0-0.54872-0.48987-1.0463-1.0385-1.0385h-4.8032l1.2657-1.3306c0.1897-0.1985 0.4218-0.4806 0.4218-0.7474v-1.0385z"/>
+ <path fill="#000" d="m11.424 9.0385c0.32136-0.0000415 0.63832-0.093988 0.84381-0.29209l3.732-3.862-3.797-3.8621c-0.205-0.19836-0.458-0.29207-0.779-0.29208h-1.0385v1.0385c0.000052 0.26678 0.13457 0.54909 0.32454 0.74645l1.3306 1.3306h-5.3874c-0.54867-0.00727-1.0385 0.48982-1.0385 1.0385 0 0.54872 0.48987 1.0463 1.0385 1.0385h5.4199l-1.2657 1.3306c-0.19 0.1977-0.423 0.4798-0.423 0.7466v1.0385z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Network@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Network@2x.png
new file mode 100644
index 000000000..074fa05eb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Network@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge.png b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge.png
new file mode 100644
index 000000000..074fa05eb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge@2x.png
new file mode 100644
index 000000000..8d0787e12
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NetworkLarge@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NewTab.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NewTab.svg
new file mode 100644
index 000000000..80a68a79e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NewTab.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m1.5833 0c-0.88357 0-1.5833 0.73199-1.5833 1.625v12.75c0 0.893 0.69973 1.625 1.5833 1.625h12.834c0.883 0 1.583-0.732 1.583-1.625v-12.75c0-0.89301-0.7-1.625-1.583-1.625h-12.834zm5.0833 4h2.6667v2.6667h2.6667v2.6667h-2.6667v2.6667h-2.6667v-2.6667h-2.6667v-2.6667h2.6667v-2.6667z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/NewTabPlus.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/NewTabPlus.svg
new file mode 100644
index 000000000..41f57a7a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/NewTabPlus.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 15 15">
+ <path d="m6.4767 2v4.5208h-4.4767v1.9584h4.4767v4.5208h2.0465v-4.5208h4.4767v-1.9584h-4.4767v-4.5208h-2.0465"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/PaintFlashing.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/PaintFlashing.svg
new file mode 100644
index 000000000..567dd14dc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/PaintFlashing.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m13.93 1.5c-0.12717 0.00228-0.29604 0.085471-0.47681 0.26489-3.3896 3.3642-3.9819 3.3962-7.1521 7.7614 0.85067 0.03196 1.5809 0.58374 1.9602 1.3774 3.7537-4.0456 4.1767-6.2083 5.8017-8.8212 0.163-0.3527 0.079-0.5866-0.133-0.5828zm-7.9464 8.768c-0.29267 0.0069-0.62917 0.08868-0.95362 0.29138-1.1199 0.7-0.8722 3.206-3.1787 3.206 0.2183 0.845 3.5316 1.044 4.9005 0.159 0.7136-0.462 1.2401-1.315 0.9536-2.358-0.1703-0.62-0.8438-1.319-1.7218-1.298z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Pause.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Pause.svg
new file mode 100644
index 000000000..401887b9d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Pause.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4 4v8h3v-8h-3z"/>
+ <path d="m9 4v8h3v-8h-3z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/PausedBreakpoint.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/PausedBreakpoint.svg
new file mode 100644
index 000000000..be4735c7d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/PausedBreakpoint.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.9353 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.0052 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.05577 2.6875-0.4375s1.4375-1.1251 1.4375-2.3438c0-1.1859-0.65393-1.9068-1.4062-2.25-0.75232-0.34325-1.5933-0.375-2.125-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.037039 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+ <path fill="url(#d)" d="m5.0479 3.75c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.00518 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.055769 2.6875-0.4375 0.8104-0.3818 1.4374-1.1251 1.4374-2.3438 0-1.1859-0.65393-1.9068-1.4062-2.25-0.7523-0.3432-1.5932-0.375-2.1249-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.037039 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Pencil.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Pencil.svg
new file mode 100644
index 000000000..cc0245bdc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Pencil.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="a" gradientTransform="matrix(-2.7366 .40434 -.18908 -1.4335 -715.46 -3905.3)">
+   <stop offset="0"/>
+  </linearGradient>
+ </defs>
+ <rect width="16" height="15.951" y=".049291" fill="none" rx="0" ry="0"/>
+ <path fill="url(#a)" fill-rule="evenodd" d="m12.656 0.52387-1.875 1.9938c1.3287 0.02582 2.6651 1.2078 2.7188 2.43l2-1.9938c-0.055-1.2615-1.474-2.4808-2.844-2.43z"/>
+ <path fill="url(#a)" fill-rule="evenodd" d="m2.1304 11.526 7.5202-8.0098c1.3694-0.0508 2.7944 1.1598 2.8494 2.4213l-7.49 7.7695-4.51 1.771z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Plus13.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Plus13.svg
new file mode 100644
index 000000000..198fc8b79
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Plus13.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
+ <path d="m5.4767 1v4.5208h-4.4767v1.9584h4.4767v4.5208h2.0465v-4.5208h4.4767v-1.9584h-4.4767v-4.5208h-2.0465"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Plus15.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Plus15.svg
new file mode 100644
index 000000000..43b364c5e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Plus15.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 15 15">
+ <path d="m6.2907 1v5.3428h-5.2907v2.3145h5.2907v5.3428h2.4186v-5.3428h5.2907v-2.3145h-5.2907v-5.3428h-2.4186"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Profile.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Profile.png
new file mode 100644
index 000000000..66f73d810
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Profile.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Profile@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Profile@2x.png
new file mode 100644
index 000000000..2dc3fb5f8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Profile@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Program.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Program.svg
new file mode 100644
index 000000000..0ab55b4c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Program.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.154 4.7563c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.08607 0.32533 0.18927 0.40625 0.28125s0.09673 0.15012 0.09375 0.28125c0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.4456-0.3912-1.0134-0.6241-1.5622-0.8124s-1.097-0.3332-1.4688-0.5c-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+ <path fill="url(#d)" d="m8.2058 3.726c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.086072 0.32533 0.18927 0.40625 0.28125 0.08092 0.091977 0.09673 0.15012 0.09375 0.28125 0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.446-0.3916-1.0136-0.6244-1.5624-0.8127-0.5488-0.1884-1.097-0.3333-1.4688-0.5-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/PseudoElement.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/PseudoElement.svg
new file mode 100644
index 000000000..be4735c7d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/PseudoElement.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.9353 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.0052 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.05577 2.6875-0.4375s1.4375-1.1251 1.4375-2.3438c0-1.1859-0.65393-1.9068-1.4062-2.25-0.75232-0.34325-1.5933-0.375-2.125-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.037039 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+ <path fill="url(#d)" d="m5.0479 3.75c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.00518 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.055769 2.6875-0.4375 0.8104-0.3818 1.4374-1.1251 1.4374-2.3438 0-1.1859-0.65393-1.9068-1.4062-2.25-0.7523-0.3432-1.5932-0.375-2.1249-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.037039 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Record.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Record.svg
new file mode 100644
index 000000000..62feced70
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Record.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
+ <path fill="#ef2929" d="m6.5 1.5175c-2.7496 0-4.9825 2.2329-4.9825 4.9825s2.2329 4.9825 4.9825 4.9825 4.9825-2.2329 4.9825-4.9825-2.2329-4.9825-4.9825-4.9825z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Reflection.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Reflection.svg
new file mode 100644
index 000000000..5082d6966
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Reflection.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#cbdbed" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.7937 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.000652 0.010403-0.000652 0.020847 0 0.03125-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h1.4062a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.12483 0.0059 0.2381 0.03125 0.375 0.03125 0.14931 0 0.32427 0.0053 0.5 0l1.75 2.9688a0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0h1.625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-1.9066-3.1249c0.40877-0.16309 0.82622-0.3517 1.125-0.6875 0.36559-0.41089 0.59375-0.96258 0.59375-1.6875 0-1.1859-0.65393-1.9068-1.4063-2.25-0.75232-0.34325-1.6246-0.375-2.1562-0.375h-2.5938c-0.0104-0.0006514-0.02085-0.0006514-0.03125 0zm1.6875 1.8125h0.8125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36572 0.14038-0.93321 0.1875-1.5312 0.1875-0.15438 0-0.31008-0.020841-0.46875-0.03125v-1.7813z" display="block"/>
+ <path fill="url(#d)" d="m4.8455 3.8198c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.000652 0.010403-0.000652 0.020847 0 0.03125-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h1.4062a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.12483 0.00594 0.2381 0.03125 0.375 0.03125 0.14931 0 0.32427 0.00525 0.5 0l1.75 2.9688a0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0h1.625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-1.9068-3.1252c0.40877-0.16309 0.82622-0.3517 1.125-0.6875 0.36559-0.41089 0.59375-0.96258 0.59375-1.6875 0-1.1859-0.65393-1.9068-1.4063-2.25-0.75232-0.34325-1.6246-0.375-2.1562-0.375h-2.5938c-0.0104-0.0006514-0.02085-0.0006514-0.03125 0zm1.6875 1.8125h0.8125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36572 0.14038-0.93321 0.1875-1.5312 0.1875-0.15438 0-0.31008-0.020841-0.46875-0.03125v-1.7813z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ReloadFull.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ReloadFull.svg
new file mode 100644
index 000000000..f8b8ea87e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ReloadFull.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
+ <path d="m11.902 0.48662c-0.04226 0.007714-0.08403 0.018155-0.12496 0.031239-0.44699 0.1001-0.792 0.54171-0.78097 0.99964v1.6869c-0.382-0.5778-0.849-1.0818-1.4054-1.4995-1.1552-0.86643-2.5311-1.2518-3.8736-1.187-0.1918 0.00895-0.3721 0.03524-0.5623 0.06243-1.5217 0.21734-2.9771 1.0227-3.9674 2.3429-1.9804 2.6405-1.4221 6.4228 1.2184 8.4028 2.6405 1.9805 6.4227 1.4222 8.4032-1.2183 0.12263-0.17163 0.18926-0.38261 0.18743-0.59354 0.004-0.051961 0.004-0.10423 0-0.15619v-0.84345h-0.81221-0.09372c-0.03122-0.00146-0.0625-0.00146-0.093716 0-0.3137-0.0011-0.6246 0.1544-0.8118 0.4065-1.3322 1.7759-3.8157 2.1129-5.5918 0.781-1.7761-1.3322-2.1131-3.8157-0.7809-5.5918 1.3321-1.7761 3.8156-2.1131 5.5917-0.781 0.4293 0.3221 0.7693 0.7327 1.0309 1.1871h-1.437c-0.5234 0.0000524-0.99959 0.47624-0.99964 0.99964-0.00799 0.072599-0.00799 0.14607 0 0.21867v0.78097h0.84345 0.15619 3.9986 0.99964v-0.99964-5.0261c-0.36447 0.003399-0.72892-0.001789-1.0934-0.003259z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ReloadToolbar.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ReloadToolbar.svg
new file mode 100644
index 000000000..0c234e14e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ReloadToolbar.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m12.908 1.9686c-0.04228 0.00772-0.08406 0.018162-0.125 0.031249-0.447 0.1002-0.792 0.542-0.781 1.0001v1.6875c-0.382-0.578-0.849-1.0823-1.406-1.5-1.1557-0.8668-2.532-1.2523-3.875-1.1875-0.19186 0.009-0.37222 0.035299-0.56249 0.062499-1.5222 0.2174-2.9781 1.023-3.9687 2.3437-1.9811 2.6414-1.4226 6.4249 1.2187 8.4059 2.6414 1.9812 6.4249 1.4226 8.4061-1.2187 0.12267-0.17168 0.18932-0.38274 0.1875-0.59374 0.004-0.05198 0.004-0.10427 0-0.15625v-0.84373h-0.81248-0.09375c-0.03123-0.00146-0.06252-0.00146-0.09375 0-0.31415-0.00145-0.62516 0.15405-0.81248 0.40624-1.333 1.777-3.8173 2.114-5.594 0.781-1.7767-1.3324-2.1138-3.8167-0.7812-5.5934s3.8169-2.1139 5.5936-0.7813c0.4295 0.3222 0.7696 0.733 1.0316 1.1875h-1.4375c-0.52357 0.0000524-0.99993 0.47641-0.99998 0.99998-0.00799 0.072624-0.00799 0.14612 0 0.21875v0.78123h0.84373 0.15625 3.9999 0.99998v-0.99998-5.0278c-0.3646 0.0034-0.72916-0.00179-1.0937-0.00326z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayPauseButton.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayPauseButton.svg
new file mode 100644
index 000000000..f23198d44
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayPauseButton.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 36 36">
+ <path d="m9 9v18h6.75v-18h-6.75z"/>
+ <path d="m20.25 9v18h6.75v-18h-6.75z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayPlayButton.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayPlayButton.svg
new file mode 100644
index 000000000..76720c450
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayPlayButton.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 36 36">
+ <path fill="#4e9a06" d="m9.0001 6.75v22.5h2.0391 0.21094c0.39356 0.0023 0.78251-0.0873 1.125-0.28125l15.75-9c0.699-0.387 1.055-1.178 1.055-1.969 0-0.79099-0.35562-1.582-1.0547-1.9688l-15.75-9c-0.342-0.1938-0.731-0.2839-1.125-0.281h-0.21094z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayRecordingButton.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayRecordingButton.svg
new file mode 100644
index 000000000..de5371b4c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ReplayRecordingButton.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 36 36">
+ <path fill="#ef2929" d="m18 6.7895c-6.187 0-11.21 5.0235-11.21 11.21-0.0005 6.187 5.023 11.211 11.21 11.211s11.211-5.024 11.211-11.211-5.024-11.21-11.211-11.21z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Request.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Request.svg
new file mode 100644
index 000000000..7cc1d5651
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Request.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#ce5c00" offset="0"/>
+   <stop stop-color="#fedba8" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fee2ba" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#ce5c00" offset="0"/>
+   <stop stop-color="#fedba8" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m7.029 4.6964c-0.51432 0.047292-1.0152 0.19509-1.5 0.4375-0.0104-0.0006514-0.02085-0.0006514-0.03125 0l-0.1875 0.125c-0.03544 0.013371-0.06778 0.034924-0.09375 0.0625-0.01327 0.019236-0.02382 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625 0.0074 0.022157 0.01798 0.043264 0.03125 0.0625l0.4375 1.0938c0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.02876 0.016495 0.06084 0.027188 0.09375 0.03125 0.02072 0.00261 0.04178 0.00261 0.0625 0 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125l0.21875-0.0625c0.0104 0.0006514 0.02085 0.0006514 0.03125 0 0.2531-0.10708 0.81054-0.25 1.1875-0.25 0.61612 0 0.93062 0.15784 1.0938 0.3125 0.16314 0.15466 0.1875 0.3218 0.1875 0.46875 0 0.28396-0.1033 0.4873-0.28125 0.6875s-0.43874 0.38297-0.71875 0.625c-0.5601 0.4839-1.1564 1.1824-1.1564 2.4995v0.25c-0.000651 0.0104-0.000651 0.02085 0 0.03125 0.0041 0.03291 0.01475 0.06499 0.03125 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.03465 0.03208 0.07855 0.05403 0.125 0.0625 0.0104 0.000652 0.02085 0.000652 0.03125 0h1.4062c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03545-0.01337 0.06778-0.03492 0.09375-0.0625 0.01131-0.0095 0.02178-0.01994 0.03125-0.03125 0.03208-0.03464 0.05403-0.07855 0.0625-0.125 0.000651-0.0104 0.000651-0.02085 0-0.03125v-0.25c0-0.42536 0.10634-0.69896 0.28125-0.9375s0.44641-0.42344 0.71875-0.65625c0.54468-0.46561 1.1562-1.1016 1.1562-2.375 0-0.78379-0.33057-1.4123-0.875-1.8125-0.54443-0.40022-1.2799-0.59375-2.1562-0.59375-0.16808 0-0.35981-0.015764-0.53125 0zm-0.34375 6.9687c-0.04343-0.000679-0.087 0.01021-0.125 0.03125-0.03888 0.02211-0.07164 0.05487-0.09375 0.09375-0.01327 0.01924-0.02385 0.04034-0.03125 0.0625-0.0026 0.02072-0.0026 0.04178 0 0.0625v1.3438c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.038 0.02104 0.08157 0.03193 0.125 0.03125h1.5c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03291-0.0041 0.06499-0.01475 0.09375-0.03125 0.02432-0.01691 0.04559-0.03818 0.0625-0.0625 0.01327-0.01924 0.02382-0.04034 0.03125-0.0625 0.0026-0.02072 0.0026-0.04178 0-0.0625 0.000651-0.0104 0.000651-0.02085 0-0.03125v-1.3438c0.000651-0.0104 0.000651-0.02085 0-0.03125-0.0041-0.03291-0.01475-0.06499-0.03125-0.09375-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.02876-0.01649-0.06084-0.02719-0.09375-0.03125-0.0104-0.000651-0.02085-0.000651-0.03125 0h-1.5z" display="block"/>
+ <path fill="url(#d)" d="m7.0808 3.666c-0.51432 0.047292-1.0152 0.19509-1.5 0.4375-0.0104-0.0006514-0.02085-0.0006514-0.03125 0l-0.1875 0.125c-0.03544 0.013371-0.06778 0.034924-0.09375 0.0625-0.01327 0.019236-0.02382 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625 0.0074 0.022157 0.01798 0.043264 0.03125 0.0625l0.4375 1.0938c0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.02876 0.016495 0.06084 0.027188 0.09375 0.03125 0.02072 0.00261 0.04178 0.00261 0.0625 0 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125l0.21875-0.0625c0.0104 0.0006514 0.02085 0.0006514 0.03125 0 0.2531-0.10708 0.81054-0.25 1.1875-0.25 0.61612 0 0.93062 0.15784 1.0938 0.3125 0.16314 0.15466 0.1875 0.3218 0.1875 0.46875 0 0.28396-0.1033 0.4873-0.28125 0.6875s-0.43874 0.38297-0.71875 0.625c-0.56002 0.48406-1.1562 1.1825-1.1562 2.5v0.25c-0.000651 0.0104-0.000651 0.02085 0 0.03125 0.0041 0.03291 0.01475 0.06499 0.03125 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.03465 0.03208 0.07855 0.05403 0.125 0.0625 0.0104 0.000651 0.02085 0.000651 0.03125 0h1.4062c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03545-0.01337 0.06778-0.03492 0.09375-0.0625 0.01131-0.0095 0.02178-0.01994 0.03125-0.03125 0.03208-0.03464 0.05403-0.07855 0.0625-0.125 0.000651-0.0104 0.000651-0.02085 0-0.03125v-0.25c0-0.42537 0.10634-0.69896 0.28125-0.9375s0.44641-0.42344 0.71875-0.65625c0.54468-0.46561 1.1562-1.1016 1.1562-2.375 0-0.78379-0.33057-1.4123-0.875-1.8125-0.54443-0.40022-1.2799-0.59375-2.1562-0.59375-0.16808 0-0.35981-0.015764-0.53125 0zm-0.34375 6.9688c-0.04343-0.000679-0.087 0.01021-0.125 0.03125-0.03888 0.02211-0.07164 0.05487-0.09375 0.09375-0.01327 0.01924-0.02385 0.04034-0.03125 0.0625-0.0026 0.02072-0.0026 0.04178 0 0.0625v1.3438c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.038 0.02104 0.08157 0.03193 0.125 0.03125h1.5c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03291-0.0041 0.06499-0.01475 0.09375-0.03125 0.02432-0.01691 0.04559-0.03818 0.0625-0.0625 0.01327-0.01924 0.02382-0.04034 0.03125-0.0625 0.0026-0.02072 0.0026-0.04178 0-0.0625 0.000651-0.0104 0.000651-0.02085 0-0.03125v-1.3438c0.000651-0.0104 0.000651-0.02085 0-0.03125-0.0041-0.03291-0.01475-0.06499-0.03125-0.09375-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.02876-0.01649-0.06084-0.02719-0.09375-0.03125-0.0104-0.000652-0.02085-0.000652-0.03125 0h-1.5z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Resources.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Resources.svg
new file mode 100644
index 000000000..32f69d75a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Resources.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m3.8503 2.0009a0.80002 0.80002 0 0 0 -0.65 0.7999v10.399a0.80002 0.80002 0 0 0 0.7999 0.8h7.9994a0.80002 0.80002 0 0 0 0.79994 -0.79994v-7.5494a0.80002 0.80002 0 0 0 -0.225 -0.5749l-2.8502-2.8498a0.80002 0.80002 0 0 0 -0.5749 -0.225h-5.1496a0.80002 0.80002 0 0 0 -0.074955 0 0.80002 0.80002 0 0 0 -0.074955 0zm0.94993 1.5999h3.9997v2.3998h2.3998v6.3995h-6.3995v-8.7994z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Response.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Response.svg
new file mode 100644
index 000000000..060b3b365
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Response.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#cbdbed" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m6.7634 4.8508a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.09375 0.25002 0.25002 0 0 0 0 0.03125v4.4062l-0.875-0.78125c-0.24477-0.21756-0.55772-0.31249-0.875-0.3125h-1a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.09375 0.25002 0.25002 0 0 0 0 0.0625v0.875c0.000013 0.30161 0.099 0.62617 0.34375 0.84375l3 2.6562 0.28125 0.25a0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.125 0.03125h0.875a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.28125-0.25 3-2.6562c0.24481-0.21759 0.37499-0.54217 0.375-0.84375v-0.875a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1c-0.31728 0.0000105-0.66148 0.094941-0.90625 0.3125l-0.84375 0.75v-4.375a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0h-2a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m6.8152 3.8205a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.09375 0.25002 0.25002 0 0 0 0 0.03125v4.4062l-0.875-0.78125c-0.24477-0.21756-0.55772-0.31249-0.875-0.3125h-1a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.09375 0.25002 0.25002 0 0 0 0 0.0625v0.875c0.000013 0.30161 0.099 0.62617 0.34375 0.84375l3 2.6563 0.28125 0.25a0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.125 0.03125h0.875a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.28125-0.25 3-2.6563c0.24481-0.21759 0.37499-0.54217 0.375-0.84375v-0.875a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1c-0.31728 0.0000105-0.66148 0.094941-0.90625 0.3125l-0.84375 0.75v-4.375a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0h-2a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ResultLine.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ResultLine.svg
new file mode 100644
index 000000000..81965cf37
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ResultLine.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="e" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.8249 5.5063a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125v1.3125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h5.875a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-5.875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0zm0 2.6875a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125v1.3125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h5.875a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-5.875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0zm0 2.6875a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125v1.3125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0h5.875a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-5.875a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m4.8767 4.476c-0.024316 0.016912-0.045588 0.038184-0.0625 0.0625-0.013269 0.019236-0.023823 0.040343-0.03125 0.0625-0.021038 0.038004-0.031929 0.081566-0.03125 0.125v1.3125c-0.00261 0.020724-0.00261 0.041776 0 0.0625 0.00847 0.046447 0.030425 0.090355 0.0625 0.125 0.00947 0.011311 0.019939 0.021782 0.03125 0.03125 0.019236 0.013269 0.040343 0.023823 0.0625 0.03125 0.020724 0.00261 0.041776 0.00261 0.0625 0 0.010403 0.0006514 0.020847 0.0006514 0.03125 0h5.875c0.03291-0.00406 0.06499-0.014754 0.09375-0.03125 0.02216-0.00743 0.04326-0.017981 0.0625-0.03125 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125 0.0165-0.028764 0.02719-0.060841 0.03125-0.09375 0.000651-0.010403 0.000651-0.020847 0-0.03125v-1.3125c0.0026-0.020724 0.0026-0.041776 0-0.0625-0.01695-0.050185-0.05032-0.094676-0.09375-0.125-0.01924-0.013269-0.04034-0.023822-0.0625-0.03125-0.02876-0.016495-0.06084-0.027188-0.09375-0.03125h-5.875c-0.020724-0.00261-0.041776-0.00261-0.0625 0-0.010403-0.0006514-0.020847-0.0006514-0.03125 0-0.010403-0.0006514-0.020847-0.0006514-0.03125 0zm0 5.375c-0.024316 0.016912-0.045588 0.038185-0.0625 0.0625-0.013269 0.019236-0.023823 0.040343-0.03125 0.0625-0.021039 0.038004-0.031929 0.081566-0.03125 0.125v1.3125c-0.00261 0.02072-0.00261 0.04178 0 0.0625 0.00847 0.04645 0.030425 0.09035 0.0625 0.125 0.00947 0.01131 0.019939 0.02178 0.03125 0.03125 0.019236 0.01327 0.040343 0.02382 0.0625 0.03125 0.020724 0.0026 0.041776 0.0026 0.0625 0 0.010403 0.000651 0.020847 0.000651 0.03125 0h5.875c0.03291-0.0041 0.06499-0.01475 0.09375-0.03125 0.02216-0.0074 0.04326-0.01798 0.0625-0.03125 0.01131-0.0095 0.02178-0.01994 0.03125-0.03125 0.01131-0.0095 0.02178-0.01994 0.03125-0.03125 0.0165-0.02876 0.02719-0.06084 0.03125-0.09375 0.000651-0.0104 0.000651-0.02085 0-0.03125v-1.3125c0.0026-0.02072 0.0026-0.04178 0-0.0625-0.01695-0.050186-0.05032-0.094677-0.09375-0.125-0.01924-0.013269-0.04034-0.023822-0.0625-0.03125-0.02876-0.016495-0.06084-0.027188-0.09375-0.03125h-5.875c-0.020724-0.00261-0.041776-0.00261-0.0625 0-0.010403-0.0006514-0.020847-0.0006514-0.03125 0-0.010403-0.0006514-0.020847-0.0006514-0.03125 0z" display="block"/>
+ <path fill="url(#e)" d="m4.8767 7.1635c-0.024316 0.016912-0.045588 0.038184-0.0625 0.0625-0.013269 0.019236-0.023822 0.040343-0.03125 0.0625-0.021038 0.038004-0.031929 0.081566-0.03125 0.125v1.3125c-0.00261 0.020724-0.00261 0.041776 0 0.0625 0.00847 0.046447 0.030425 0.090355 0.0625 0.125 0.00947 0.011311 0.019939 0.021782 0.03125 0.03125 0.019236 0.013269 0.040343 0.023822 0.0625 0.03125 0.020724 0.00261 0.041776 0.00261 0.0625 0 0.010403 0.0006514 0.020847 0.0006514 0.03125 0h5.875c0.03291-0.00406 0.06499-0.014755 0.09375-0.03125 0.02216-0.00743 0.04326-0.017981 0.0625-0.03125 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125 0.0165-0.028764 0.02719-0.060841 0.03125-0.09375 0.000651-0.010403 0.000651-0.020847 0-0.03125v-1.3125c0.0026-0.020724 0.0026-0.041776 0-0.0625-0.01695-0.050185-0.05032-0.094677-0.09375-0.125-0.01924-0.013269-0.04034-0.023823-0.0625-0.03125-0.02876-0.016496-0.06084-0.027188-0.09375-0.03125h-5.875c-0.020724-0.00261-0.041776-0.00261-0.0625 0-0.010403-0.0006514-0.020847-0.0006514-0.03125 0-0.010403-0.0006514-0.020847-0.0006514-0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Resume.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Resume.svg
new file mode 100644
index 000000000..82361848c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Resume.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m2.5312 4v8h2v-8z"/>
+ <path d="m7.5313 4c0.17738 0.008 0.35117 0.0592 0.5 0.15625l5 3c0.2824 0.17971 0.4375 0.51173 0.4375 0.84375s-0.1551 0.66404-0.4375 0.84375l-5 3c-0.1486 0.097-0.3223 0.148-0.4997 0.156h-0.15625-0.84375v-8h0.84375z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Script.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Script.png
new file mode 100644
index 000000000..ed4174c07
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Script.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Script@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Script@2x.png
new file mode 100644
index 000000000..c3145d351
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Script@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge.png
new file mode 100644
index 000000000..c3145d351
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge@2x.png
new file mode 100644
index 000000000..5fd604d9a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ScriptLarge@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SearchResults.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SearchResults.svg
new file mode 100644
index 000000000..c567fdfcc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SearchResults.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path fill="none" stroke="#000" stroke-width="1.5547" d="m311 386.5a3.5 3.5 0 1 1 -7 0 3.5 3.5 0 1 1 7 0z" stroke-linejoin="round" transform="matrix(1.2872 0 0 1.2857 -389.3 -490.43)" stroke-linecap="round"/>
+ <path fill="none" stroke="#000" stroke-width="2" d="m10.011 10 4.0046 4" stroke-linejoin="round" stroke-linecap="round"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SessionStorage.png b/Source/WebInspectorUI/UserInterface/Images/gtk/SessionStorage.png
new file mode 100644
index 000000000..d20a0a59c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SessionStorage.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SessionStorage@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/SessionStorage@2x.png
new file mode 100644
index 000000000..91306596e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SessionStorage@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ShadowDOM.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ShadowDOM.svg
new file mode 100644
index 000000000..f9f411614
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ShadowDOM.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m7.7147 5.2557-5.8503 2.8749v1.3307l5.8503 2.7745v-1.5693l-3.9671-1.9082 3.9671-1.9961v-1.5065"/>
+ <path d="m8.9972 5.2557v1.5065l3.9671 1.9961-3.9671 1.9082v1.5693l5.8503-2.7745v-1.3307l-5.8503-2.8749"/>
+ <path d="m7.0028 3.7642-5.8503 2.8749v1.3307l5.8503 2.7745v-1.5693l-3.9671-1.9082 3.9671-1.9961v-1.5065"/>
+ <path d="m8.2853 3.7642v1.5065l3.9671 1.9961-3.9671 1.9082v1.5693l5.8503-2.7745v-1.3307l-5.8503-2.8749"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumb.png b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumb.png
new file mode 100644
index 000000000..1cacb77a0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumb.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumb@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumb@2x.png
new file mode 100644
index 000000000..4706c9d78
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumb@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumbPressed.png b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumbPressed.png
new file mode 100644
index 000000000..1e489ee57
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumbPressed.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumbPressed@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumbPressed@2x.png
new file mode 100644
index 000000000..3cabd103d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SliderThumbPressed@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorArrows.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorArrows.svg
new file mode 100644
index 000000000..a2853d1d6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SortIndicatorArrows.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 9 8">
+    <style>
+        svg[id] {
+            display: none;
+        }
+
+        svg[id]:target {
+            display: initial;
+        }
+
+        path {
+            fill: inherit;
+        }
+
+        svg[id $= "-normal"] {
+            fill: hsl(0, 0%, 33%);
+        }
+    </style>
+
+    <defs>
+        <symbol id="up-arrow-symbol">
+            <path d="m9 5.443c-0.0264-0.1111-0.0865-0.214-0.1701-0.2917l-2.9167-2.9166-0.4132-0.3889-0.4132 0.3889-2.9167 2.9166c-0.1072 0.1088-0.1696 0.2605-0.1701 0.4132v0.024306 0.048611 0.51042h0.4375 0.072917c0.18408 0.0279 0.37989-0.03737 0.51042-0.17014l2.4792-2.4791 2.5035 2.4791c0.10818 0.10802 0.26032 0.17066 0.41319 0.17014h0.12153 0.46181v-0.46181-0.072917-0.048611-0.072917z"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 1.6615)"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 7.6615)"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 5.6615)"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 3.6615)"/>
+        </symbol>
+        <symbol id="down-arrow-symbol">
+            <path d="m9 2.557c-0.0264 0.1111-0.0865 0.214-0.1701 0.2917l-2.9167 2.9166-0.4132 0.3889-0.4132-0.3889-2.9167-2.9166c-0.1072-0.1088-0.1696-0.2605-0.1701-0.4132v-0.024306-0.048611-0.51042h0.4375 0.072917c0.18408-0.0279 0.37989 0.03737 0.51042 0.17014l2.4792 2.4791 2.5035-2.4791c0.1082-0.108 0.2603-0.1707 0.4132-0.1702h0.12153 0.46181v0.46181 0.072917 0.048611 0.072917z"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 1.6615)"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 7.6615)"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 5.6615)"/>
+            <path d="m-6.8475-4.3051a3.2542 3.2542 0 1 1 -6.5085 0 3.2542 3.2542 0 1 1 6.5085 0z" transform="matrix(.15365 0 0 .15365 2.5521 3.6615)"/>
+        </symbol>
+    </defs>
+
+    <svg id="up-arrow-normal"><use xlink:href="#up-arrow-symbol"/></svg>
+    <svg id="down-arrow-normal"><use xlink:href="#down-arrow-symbol"/></svg>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleUp.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleUp.svg
new file mode 100644
index 000000000..c45f0e872
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/SplitToggleUp.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m8.0001 1.7925-0.71877 0.6875-5.0001 5a1.0165 1.0165 0 0 0 -0.28126 0.84375 1.0165 1.0165 0 0 0 0 0.09375v0.78125h0.84377 0.15625a1.0165 1.0165 0 0 0 0.71877 -0.28125l4.2814-4.2813 4.2809 4.2812a1.0165 1.0165 0 0 0 0.84377 0.28125h0.09375 0.78127v-0.84375a1.0165 1.0165 0 0 0 0 -0.15625 1.0165 1.0165 0 0 0 -0.28126 -0.71875l-5.0001-5-0.71877-0.6875z"/>
+ <path d="m8.0001 6.7925-0.71877 0.6875-5.0001 5a1.0165 1.0165 0 0 0 -0.2812 0.844 1.0165 1.0165 0 0 0 0 0.09375v0.78125h0.84377 0.15625a1.0165 1.0165 0 0 0 0.71877 -0.28125l4.2813-4.2817 4.2809 4.2817a1.0165 1.0165 0 0 0 0.84377 0.28125h0.09375 0.78127v-0.84375a1.0165 1.0165 0 0 0 0 -0.15625 1.0165 1.0165 0 0 0 -0.28126 -0.71875l-5.0001-5-0.7188-0.6875z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StepInto.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StepInto.svg
new file mode 100644
index 000000000..f528e16a3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StepInto.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="2.9023" height="8" x="12.098" y="-12" transform="rotate(90)" rx="0" ry="0"/>
+ <path d="m7 1v5.5625l-1.2812-1.2813c-0.1882-0.1881-0.4535-0.2812-0.7188-0.2812h-1v1c0.00001 0.2653 0.0931 0.53058 0.28125 0.71875l3 3 0.2813 0.2812h0.875l0.28125-0.28125 3-3c0.188-0.1882 0.281-0.4535 0.281-0.7188v-1h-1c-0.2653 0.00001-0.53059 0.0931-0.71875 0.28125l-1.281 1.2813v-5.5625z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StepOut.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StepOut.svg
new file mode 100644
index 000000000..fecfdef5b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StepOut.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="2.9023" height="8" x="12.098" y="-12" transform="rotate(90)" rx="0" ry="0"/>
+ <path d="m7 10v-5.5625l-1.2812 1.2813c-0.1882 0.1881-0.4535 0.2812-0.7188 0.2812h-1v-1c0-0.2653 0.0931-0.5306 0.2812-0.7188l3-3 0.2813-0.2812h0.875l0.28125 0.28125 3 3c0.188 0.1882 0.281 0.4535 0.281 0.7188v1h-1c-0.265 0-0.531-0.0931-0.719-0.2812l-1.281-1.2813v5.5625z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StepOver.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StepOver.svg
new file mode 100644
index 000000000..c19e030fc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StepOver.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="2.9023" height="8" x="12.098" y="-12" transform="rotate(90)" rx="0" ry="0"/>
+ <path d="m0.66428 7.6325 1.4142 1.4142 4.794-4.794c0.59416-0.59416 1.5272-0.59416 2.1213 0l2.8947 2.8947h-1.812c-0.26372 0.0054-0.54756 0.10561-0.7292 0.28726l-0.70711 0.70711 0.70711 0.70711c0.21881 0.21881 0.4544 0.3267 0.7292 0.33146l5.2149-0.0442 0.04419-5.2149c-0.0048-0.2748-0.11264-0.51039-0.33146-0.7292l-0.7071-0.7071-0.70711 0.70711c-0.18165 0.18165-0.28187 0.46548-0.28726 0.7292v1.812l-2.8947-2.8947c-1.3585-1.3585-3.5913-1.3585-4.9497 0z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Stop.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Stop.svg
new file mode 100644
index 000000000..209800684
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Stop.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 13 13">
+ <path d="m2.5 2.5v8h8v-8h-8z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch.png
new file mode 100644
index 000000000..a9903e0c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch@2x.png b/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch@2x.png
new file mode 100644
index 000000000..d487d0d05
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Stopwatch@2x.png
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Storage.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Storage.svg
new file mode 100644
index 000000000..778f0b7ff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Storage.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m32 5.3321a2.3661 0.6679 0 1 1 -4.7322 0 2.3661 0.6679 0 1 1 4.7322 0z" transform="matrix(2.5358 0 0 4.4917 -67.146 -19.95)"/>
+ <path d="m2 6.6875v2.853c6.3088 3.2839 12 0 12 0v-2.853s-6.1788 3.1718-12 0z"/>
+ <path d="m2 10.688v2.853c6.3088 3.2839 12 0 12 0v-2.853s-6.1788 3.1718-12 0z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleAuthor.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleAuthor.svg
new file mode 100644
index 000000000..21eddfdfe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleAuthor.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#cbdbed" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m6.4497 4.8501c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2188-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.2187-0.8121a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2188-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.078-0.8229-0.402-1.3445-0.781-1.6564s-0.8014-0.4182-1.0623-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m6.5015 3.8198c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2187-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.2187-0.8124a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2187-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.078-0.8232-0.402-1.3448-0.781-1.6567-0.379-0.312-0.8016-0.4182-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInherited.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInherited.svg
new file mode 100644
index 000000000..c9ee85617
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInherited.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m6.4497 4.8501c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2187-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.21875-0.8125a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2187-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.07836-0.82274-0.40221-1.3443-0.78125-1.6562-0.37904-0.31194-0.80161-0.41818-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m6.5015 3.8198c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.000399 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2187-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.21875-0.8125a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2187-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.07836-0.82274-0.40221-1.3443-0.78125-1.6562-0.37904-0.31194-0.80161-0.41818-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInheritedElement.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInheritedElement.svg
new file mode 100644
index 000000000..11e7c570a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInheritedElement.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m5.1843 4.8494a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000651 0.02085 0.000651 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5938h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2813a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m5.2361 3.819a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000651 0.02085 0.000651 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5938h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2813a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInspector.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInspector.svg
new file mode 100644
index 000000000..fb3da3880
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleInspector.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcf6c2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#d3f4b2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#8ae234" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m6.4497 4.8501c-0.25563 0.019293-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.00904 0.0011 0.022329 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.020053 0.17292 0.038693 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.00639 0.000497 0.025108-0.000401 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2188-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.4195 0.54842-0.91617 0.59375-1.375 0.050423-0.51041 0.098381-0.96692 0.25-1.2188 0.094788-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.21875-0.8125a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.021371 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2188-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.000401 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.052111 0.15827-0.073031 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.046959-0.53876-0.2383-0.625-0.8125-0.0011-0.00923 0.0011-0.021928 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.07836-0.82274-0.40221-1.3443-0.78125-1.6562-0.37904-0.31194-0.80161-0.41817-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m6.5015 3.8198c-0.25563 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.00639 0.000497 0.025108-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2187-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.050423-0.51041 0.098381-0.96692 0.25-1.2188 0.094788-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.21875-0.8125a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2187-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.07836-0.82274-0.40221-1.3443-0.78125-1.6562-0.37904-0.31194-0.80161-0.41818-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUser.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUser.svg
new file mode 100644
index 000000000..143544901
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUser.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#c4a000" offset="0"/>
+   <stop stop-color="#fef4a8" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fef6ba" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#c4a000" offset="0"/>
+   <stop stop-color="#fef4a8" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m6.4497 4.8501c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2188-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.2187-0.8121a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2188-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.078-0.8229-0.402-1.3445-0.781-1.6564s-0.8014-0.4182-1.0623-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m6.5015 3.8198c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2187-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.2187-0.8124a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2187-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.078-0.8232-0.402-1.3448-0.781-1.6567-0.379-0.312-0.8016-0.4182-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUserAgent.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUserAgent.svg
new file mode 100644
index 000000000..705812e8f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/StyleRuleUserAgent.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m6.4497 4.8501c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2188-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.2187-0.8121a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2188-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.07836-0.82274-0.40221-1.3443-0.78125-1.6562-0.37904-0.31194-0.80161-0.41818-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m6.5623 3.75c-0.25562 0.01929-0.68218 0.12665-1.0625 0.4375s-0.7029 0.82923-0.78125 1.6562c-0.01595 0.21541-0.04213 0.44238-0.0625 0.625-0.001 0.009 0.0011 0.02233 0 0.03125-0.08624 0.5742-0.34913 0.76554-0.625 0.8125l-0.125 0.03125a0.25002 0.25002 0 0 0 -0.09375 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.125v0.8125a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.125 0.03125h0.03125c0.08878 0.02005 0.17292 0.03869 0.25 0.09375 0.1907 0.13841 0.2651 0.34781 0.3125 0.59375s0.06321 0.51581 0.09375 0.8125c0.08313 0.81821 0.426 1.3579 0.8125 1.6562 0.37615 0.2904 0.76763 0.35692 1 0.375 0.0064 0.000497 0.02511-0.0004 0.03125 0l0.125 0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l0.21875-0.84375a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-0.1875c-0.18184-0.02204-0.34449-0.17298-0.4375-0.3125-0.1576-0.24224-0.16703-0.69416-0.21875-1.2188-0.04542-0.46068-0.24764-0.95497-0.625-1.375 0.37302-0.41951 0.54842-0.91617 0.59375-1.375 0.05042-0.51041 0.09838-0.96692 0.25-1.2188 0.09479-0.14218 0.2606-0.29106 0.4375-0.3125l0.1875-0.03125a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-0.2187-0.8122a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0h-0.125zm2.625 0a0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.8125a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125l0.1875 0.03125c0.1763 0.02137 0.34004 0.16632 0.4375 0.3125 0.15152 0.25187 0.16834 0.70846 0.21875 1.2188 0.045371 0.45927 0.25111 0.95529 0.625 1.375-0.37736 0.42003-0.57958 0.91432-0.625 1.375-0.05172 0.52459-0.061149 0.97651-0.21875 1.2187-0.095677 0.14352-0.25626 0.29053-0.4375 0.3125h-0.1875a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.125l0.1875 0.84375a0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.0625 0l0.125-0.03125c0.00614-0.0004 0.02486 0.000497 0.03125 0 0.23237-0.01808 0.62385-0.0846 1-0.375 0.3865-0.29839 0.72937-0.83804 0.8125-1.6562 0.03054-0.29669 0.04635-0.56656 0.09375-0.8125s0.12182-0.45534 0.3125-0.59375c0.07296-0.05211 0.15827-0.07303 0.25-0.09375h0.03125l0.125-0.03125a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-0.8125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.125-0.03125c-0.27587-0.04696-0.53876-0.2383-0.625-0.8125-0.0011-0.0092 0.0011-0.02193 0-0.03125-0.02172-0.18821-0.04698-0.41542-0.0625-0.625-0.07836-0.82274-0.40221-1.3443-0.78125-1.6562-0.37904-0.31194-0.80161-0.41818-1.0625-0.4375h-0.125a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignCenter.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignCenter.svg
new file mode 100644
index 000000000..b65a33e5e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignCenter.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="7.9996" height="2.0002" x="4.0002" y="2.9998"/>
+ <rect width="9.9996" height="2.0002" x="3.0002" y="6.9998"/>
+ <rect width="3.9996" height="2.0002" x="6.0002" y="11"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignJustify.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignJustify.svg
new file mode 100644
index 000000000..9eeb16667
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignJustify.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="9.9996" height="2.0002" x="3.0002" y="2.9998"/>
+ <rect width="9.9996" height="2.0002" x="3.0002" y="6.9998"/>
+ <rect width="9.9996" height="2.0002" x="3.0002" y="11"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignLeft.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignLeft.svg
new file mode 100644
index 000000000..58a269d64
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignLeft.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="7.9996" height="2.0002" x="3.0002" y="2.9998"/>
+ <rect width="9.9996" height="2.0002" x="3.0002" y="6.9998"/>
+ <rect width="3.9996" height="2.0002" x="3.0002" y="11"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignRight.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignRight.svg
new file mode 100644
index 000000000..0db480ccd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextAlignRight.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="7.9996" height="2.0002" x="5.0002" y="2.9998"/>
+ <rect width="9.9996" height="2.0002" x="3.0002" y="6.9998"/>
+ <rect width="4" height="2.0002" x="8.9998" y="11"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationLineThrough.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationLineThrough.svg
new file mode 100644
index 000000000..fbb71d886
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationLineThrough.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m3.9999 3v2h6c0.42816 0 1 0.61414 1 1h2c0-1.6343-1.3198-3-3-3h-6zm-1 7c0.006 0.72062 0.26893 1.4527 0.78125 2.0312 0.5123 0.579 1.3104 0.969 2.2187 0.969h6 1v-1-2h-2v1h-5c-0.3979 0-0.5669-0.11-0.7187-0.281-0.1519-0.172-0.2788-0.44-0.2813-0.719h-2z"/>
+ <path d="m1 7v2h14v-2h-14z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationOverline.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationOverline.svg
new file mode 100644
index 000000000..015aff71f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationOverline.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4 4v2h6c0.42816 0 1 0.61414 1 1v1h-5c-0.9193 0-1.7356 0.384-2.25 0.9688-0.5144 0.5847-0.7564 1.3102-0.75 2.0312s0.2689 1.453 0.7812 2.031c0.5124 0.579 1.3105 0.969 2.2188 0.969h6 1v-1-6c0-1.6343-1.32-3-3-3h-6zm2 6h5v2h-5c-0.3979 0-0.5669-0.11-0.7188-0.281-0.1518-0.172-0.2787-0.44-0.2812-0.719s0.1047-0.554 0.25-0.719 0.3276-0.281 0.75-0.281z"/>
+ <path d="m2 1v2h12v-2h-12z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationUnderline.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationUnderline.svg
new file mode 100644
index 000000000..b896dd253
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextDecorationUnderline.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4 2v2h6c0.42816 0 1 0.61414 1 1v1h-5c-0.9193 0-1.7356 0.384-2.25 0.9688-0.5144 0.5847-0.7564 1.3106-0.75 2.0312s0.2689 1.453 0.7812 2.031c0.5124 0.579 1.3105 0.969 2.2188 0.969h6 1v-1-6c0-1.6343-1.32-3-3-3h-6zm2 6h5v2h-5c-0.3979 0-0.5669-0.1098-0.7188-0.2812-0.1518-0.1715-0.2787-0.4394-0.2812-0.7188s0.1047-0.5535 0.25-0.7188c0.1453-0.1652 0.3276-0.2812 0.75-0.2812z"/>
+ <path d="m2 13v2h12v-2h-12z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformCapitalize.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformCapitalize.svg
new file mode 100644
index 000000000..7403b75f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformCapitalize.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4.331 3.5-3.2143 9h1.9286c0.95538-2.5714 0.01422 0 0.96959-2.5714h3.2037l0.96958 2.5714h1.9286l-3.2143-9zm1.2857 1.9286 1.2999 3.2143h-2.5714z"/>
+ <path d="m10.184 5.5v6.2249 0.77509h0.77509 1.5502c0.72746 0 1.3816-0.29632 1.7924-0.75086 0.4108-0.45455 0.58898-1.0329 0.58132-1.5986-0.008-0.5652-0.221-1.1265-0.63-1.5739-0.408-0.4473-1.03-0.7508-1.744-0.7508h-0.77509v-2.3253h-1.5502zm1.5502 3.8754h0.77509c0.32692 0 0.48028 0.10499 0.60554 0.24221s0.2151 0.34332 0.21799 0.55709c0.0029 0.21378-0.07625 0.40283-0.19377 0.53287s-0.27418 0.24222-0.62976 0.24222h-0.77509v-1.5744z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformLowercase.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformLowercase.svg
new file mode 100644
index 000000000..78134de58
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformLowercase.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4.5121 6.2993v1.5502h1.4775c-0.042771 0 0.072664 0.10835 0.072664 0.048443v0.72664h-0.77509c-1.33 0-2.3546 0.88446-2.3737 1.9377-0.00955 0.52663 0.24764 1.0489 0.6782 1.4048 0.4306 0.356 1.0151 0.533 1.6955 0.533h1.5502 0.77509v-0.77509-3.827c0-0.90777-0.69518-1.5986-1.6228-1.5986h-1.4775zm0.77509 3.8754h0.77509v0.77509h-0.77509c-0.40259 0-0.60466-0.11294-0.70242-0.19377-0.097767-0.08083-0.12212-0.11377-0.12111-0.16955 0.00202-0.11155 0.071858-0.41176 0.82353-0.41176z"/>
+ <path d="m8.3876 5.5v6.2249 0.77509h0.77509 1.5502c0.72746 0 1.3816-0.2721 1.7924-0.72664 0.4108-0.45455 0.58898-1.0572 0.58132-1.6228-0.0077-0.56567-0.22141-1.127-0.62976-1.5744-0.40834-0.44736-1.0301-0.75086-1.7439-0.75086h-0.77509v-2.3253h-1.5502zm1.5502 3.8754h0.77509c0.32692 0 0.48028 0.10499 0.60554 0.24221 0.12526 0.13723 0.2151 0.34332 0.21799 0.55709 0.0029 0.21378-0.07625 0.42705-0.19377 0.55709s-0.27418 0.21799-0.62976 0.21799h-0.77509v-1.5744z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformUppercase.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformUppercase.svg
new file mode 100644
index 000000000..5f1759849
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TextTransformUppercase.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m3.3477 3.5-3.2143 9h1.9286c0.95538-2.5714 0.01422 0 0.96959-2.5714h3.2037l0.96958 2.5714h1.9286l-3.2143-9zm1.2857 1.9286 1.2999 3.2143h-2.5714z"/>
+ <path d="m9.2007 3.5v9h3.9094c0.84517 0 1.6045-0.34319 2.0812-0.87188 0.47676-0.52868 0.68389-1.1989 0.675-1.8562-0.009-0.65738-0.25732-1.3078-0.73125-1.8281-0.18416-0.2022-0.42169-0.36779-0.675-0.50625 0.21554-0.41233 0.45462-0.81705 0.45-1.2656-0.0067-0.64759-0.21118-1.3113-0.675-1.8281-0.464-0.517-1.208-0.8439-2.025-0.8439zm1.8 1.8h1.2094c0.36227 0 0.53783 0.10027 0.675 0.25312 0.13717 0.15286 0.22247 0.4015 0.225 0.64688 0.0023 0.24538-0.06648 0.47235-0.19688 0.61875-0.13038 0.1464-0.31556 0.25313-0.70312 0.25313h-1.2094zm0 3.5719h2.1094c0.37913 0 0.55745 0.12132 0.70312 0.28125 0.14568 0.15994 0.24975 0.39722 0.25312 0.64687 0.0035 0.24966-0.08832 0.46716-0.225 0.61875-0.136 0.151-0.319 0.281-0.731 0.281h-2.1094z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Time.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Time.svg
new file mode 100644
index 000000000..a436707e3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Time.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m8 2c-3.3101 0-6 2.6899-6 6 0 3.31 2.6899 6 6 6 3.31 0 6-2.69 6-6 0-3.3101-2.69-6-6-6zm0 1.5814c2.4439 0 4.4186 1.9747 4.4186 4.4186s-1.9747 4.4186-4.4186 4.4186-4.4186-1.9747-4.4186-4.4186 1.9747-4.4186 4.4186-4.4186z"/>
+ <path d="m10.329 5.195a0.40076 0.40076 0 0 0 -0.2 0.1252l-2.129 2.1288-1.3274-1.3274a0.40076 0.40076 0 1 0 -0.551 0.551l1.6029 1.6029a0.40076 0.40076 0 0 0 0.55098 0l2.4045-2.4043a0.40076 0.40076 0 0 0 -0.351 -0.6762z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Timeline.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Timeline.svg
new file mode 100644
index 000000000..5487919e3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Timeline.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m8 3.1749e-7c-4.4135 0-8 3.5865-8 8 3.3715e-7 4.414 3.5865 8 8 8 4.414 0 8-3.586 8-8 0-4.4135-3.586-8-8-8zm0 2.1085c3.2585 0 5.8915 2.633 5.8915 5.8915s-2.6329 5.8915-5.8915 5.8915c-3.2585 0-5.8915-2.6329-5.8915-5.8915 0-3.2585 2.633-5.8915 5.8915-5.8915z"/>
+ <path d="m11.106 4.26a0.53434 0.53434 0 0 0 -0.268 0.1669l-2.838 2.8384-1.7698-1.7698a0.53434 0.53434 0 1 0 -0.7347 0.7347l2.1372 2.1372a0.53434 0.53434 0 0 0 0.73465 0l3.2056-3.2058a0.53434 0.53434 0 0 0 -0.467 -0.9016z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAPI.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAPI.svg
new file mode 100644
index 000000000..9bd66cbb6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAPI.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.154 4.7563c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.08607 0.32533 0.18927 0.40625 0.28125s0.09673 0.15012 0.09375 0.28125c0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.4456-0.3912-1.0134-0.6241-1.5622-0.8124s-1.097-0.3332-1.4688-0.5c-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+ <path fill="url(#d)" d="m8.2058 3.726c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.086072 0.32533 0.18927 0.40625 0.28125 0.08092 0.091977 0.09673 0.15012 0.09375 0.28125 0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.446-0.3916-1.0136-0.6244-1.5624-0.8127-0.5488-0.1884-1.097-0.3333-1.4688-0.5-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAnimation.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAnimation.svg
new file mode 100644
index 000000000..62eaa3077
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordAnimation.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m7.1374 4.8508c-0.03291 0.00406-0.06499 0.014755-0.09375 0.03125-0.01131 0.00947-0.02178 0.019939-0.03125 0.03125-0.01327 0.019236-0.02382 0.040343-0.03125 0.0625-0.01131 0.00947-0.02178 0.019939-0.03125 0.03125l-3 8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.09375 0.25002 0.25002 0 0 0 0.125 0.03125h1.375a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.75-1.9375h2.5938l0.75 1.9375a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4688a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-3-8a0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 0h-1.375c-0.02072-0.00261-0.04178-0.00261-0.0625 0zm0.6875 2.6562 0.6875 1.9375h-1.3438l0.65625-1.9375z" display="block"/>
+ <path fill="url(#d)" d="m7.1892 3.8205c-0.03291 0.00406-0.06499 0.014755-0.09375 0.03125-0.01131 0.00947-0.02178 0.019939-0.03125 0.03125-0.01327 0.019236-0.02382 0.040343-0.03125 0.0625-0.01131 0.00947-0.02178 0.019939-0.03125 0.03125l-3 8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.09375 0.25002 0.25002 0 0 0 0.125 0.03125h1.375a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625l0.75-1.9375h2.5938l0.75 1.9375a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4688a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125l-3.0003-8.0002a0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 0h-1.375c-0.02072-0.00261-0.04178-0.00261-0.0625 0zm0.6875 2.6562 0.6875 1.9375h-1.3438l0.65625-1.9375z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordComposite.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordComposite.svg
new file mode 100644
index 000000000..bee5ab7b3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordComposite.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcf6c2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#d3f4b2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#8ae234" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.7468 4.772c-2.707 0-4.5312 1.887-4.5312 4.3125 0 2.3868 1.7261 4.3438 4.4375 4.3438 0.77681 0 1.6598-0.16116 2.5312-0.53125l0.21875-0.09375a0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-0.46875-1.1562a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.58568 0.23206-1.1595 0.34375-1.625 0.34375-0.88382 0-1.5432-0.24749-2-0.6875-0.45679-0.44001-0.71875-1.0822-0.71875-1.875 0-1.408 0.89423-2.5312 2.5-2.5312 0.36888 0 0.90663 0.00178 1.75 0.3125l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.46875-1.125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.21875-0.0625c-0.871-0.3467-1.6578-0.4687-2.3112-0.4687z" display="block"/>
+ <path fill="url(#d)" d="m8.7986 3.7416c-2.707 0-4.5312 1.887-4.5312 4.3125 0 2.3868 1.7261 4.3438 4.4375 4.3438 0.77681 0 1.6598-0.16116 2.5312-0.53125l0.21875-0.09375a0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-0.46875-1.1562a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.1875 0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.58568 0.23206-1.1595 0.34375-1.625 0.34375-0.88382 0-1.5432-0.24749-2-0.6875-0.45679-0.44001-0.71875-1.0822-0.71875-1.875 0-1.408 0.89423-2.5312 2.5-2.5312 0.36888 0 0.90663 0.00178 1.75 0.3125l0.21875 0.0625a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.46875-1.125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.218-0.0628c-0.873-0.3467-1.6591-0.4688-2.3124-0.4688z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordConsoleProfile.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordConsoleProfile.svg
new file mode 100644
index 000000000..7f3f85e7e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordConsoleProfile.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.9353 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.0052 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.05577 2.6875-0.4375s1.4375-1.1251 1.4375-2.3437c0-1.1859-0.65393-1.9068-1.4062-2.25-0.75232-0.34325-1.5933-0.375-2.125-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+ <path fill="url(#d)" d="m4.9871 3.8198c-0.03291 0.0041-0.06499 0.01475-0.09375 0.03125-0.02216 0.0074-0.04326 0.01798-0.0625 0.03125-0.01131 0.0095-0.02175 0.01994-0.03125 0.03125-0.02758 0.02598-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.0052 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.05577 2.6875-0.4375s1.4375-1.1251 1.4375-2.3438c0-1.1859-0.65393-1.9068-1.4063-2.25-0.75232-0.34325-1.5933-0.375-2.125-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordEvent.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordEvent.svg
new file mode 100644
index 000000000..fba0a631e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordEvent.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m5.1843 4.8494a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000651 0.02085 0.000651 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5938h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2812a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m5.2361 3.819a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.0625 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v8c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.02072 0.0026 0.04178 0.0026 0.0625 0 0.0104 0.000651 0.02085 0.000651 0.03125 0h5.2187a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125h-3.5625v-1.5937h3.1562a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125h-3.1562v-1.5h3.5625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-1.2812a0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-5.2187a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordLayout.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordLayout.svg
new file mode 100644
index 000000000..8c8329472
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordLayout.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m5.2146 4.8501c-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.01327 0.019236-0.02385 0.040343-0.03125 0.0625v8a0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h5.2188a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-3.5313v-6.4375a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-1.4375c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+ <path fill="url(#d)" d="m5.3271 3.75c-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.01327 0.019236-0.02385 0.040343-0.03125 0.0625v8a0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h5.2188a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-3.5313v-6.4375a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125h-1.4375c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordPaint.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordPaint.svg
new file mode 100644
index 000000000..36917c3cd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordPaint.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcf6c2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#d3f4b2" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.84 -43.769)">
+   <stop stop-color="#4e9a06" offset="0"/>
+   <stop stop-color="#8ae234" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.9353 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.0052 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.05577 2.6875-0.4375s1.4375-1.1251 1.4375-2.3438c0-1.1859-0.65393-1.9068-1.4062-2.25-0.75232-0.34325-1.5933-0.375-2.125-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.037039 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+ <path fill="url(#d)" d="m5.0479 3.75c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.00518 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.055769 2.6875-0.4375 0.8104-0.3818 1.4374-1.1251 1.4374-2.3438 0-1.1859-0.65393-1.9068-1.4062-2.25-0.7523-0.3432-1.5932-0.375-2.1249-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.037039 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordProbeSampled.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordProbeSampled.svg
new file mode 100644
index 000000000..7f3f85e7e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordProbeSampled.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.9353 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.02758 0.025975-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.0052 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.05577 2.6875-0.4375s1.4375-1.1251 1.4375-2.3437c0-1.1859-0.65393-1.9068-1.4062-2.25-0.75232-0.34325-1.5933-0.375-2.125-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+ <path fill="url(#d)" d="m4.9871 3.8198c-0.03291 0.0041-0.06499 0.01475-0.09375 0.03125-0.02216 0.0074-0.04326 0.01798-0.0625 0.03125-0.01131 0.0095-0.02175 0.01994-0.03125 0.03125-0.02758 0.02598-0.04913 0.058305-0.0625 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.11491 0.0052 0.21821 0.03125 0.34375 0.03125 0.87733 0 1.8771-0.05577 2.6875-0.4375s1.4375-1.1251 1.4375-2.3438c0-1.1859-0.65393-1.9068-1.4063-2.25-0.75232-0.34325-1.5933-0.375-2.125-0.375h-2.625zm1.6875 1.8125h0.78125c0.50267 0 0.97982 0.028766 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36571 0.14038-0.93321 0.1875-1.5312 0.1875-0.14412 0-0.29053-0.021575-0.4375-0.03125v-1.7812z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordRenderingFrame.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordRenderingFrame.svg
new file mode 100644
index 000000000..8e781cd50
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordRenderingFrame.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m5.2156 4.8511a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.09375 0.25002 0.25002 0 0 0 0 0.03125v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-2.7812h3.0312a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0h-3.0312v-1.8438h3.4688a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0h-5.1563a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+ <path fill="url(#d)" d="m5.2673 3.8207a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.09375 0.09375 0.25002 0.25002 0 0 0 -0.03125 0.09375 0.25002 0.25002 0 0 0 0 0.03125v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4375a0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.03125v-2.7812h3.0313a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.09375v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 0h-3.0313v-1.8438h3.4688a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-1.3125a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0h-5.1563a0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordScriptEvaluated.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordScriptEvaluated.svg
new file mode 100644
index 000000000..0ab55b4c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordScriptEvaluated.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.154 4.7563c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.08607 0.32533 0.18927 0.40625 0.28125s0.09673 0.15012 0.09375 0.28125c0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.4456-0.3912-1.0134-0.6241-1.5622-0.8124s-1.097-0.3332-1.4688-0.5c-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+ <path fill="url(#d)" d="m8.2058 3.726c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.086072 0.32533 0.18927 0.40625 0.28125 0.08092 0.091977 0.09673 0.15012 0.09375 0.28125 0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.446-0.3916-1.0136-0.6244-1.5624-0.8127-0.5488-0.1884-1.097-0.3333-1.4688-0.5-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordStyle.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordStyle.svg
new file mode 100644
index 000000000..d392e34d8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordStyle.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.1541 4.7563c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.08607 0.32533 0.18927 0.40625 0.28125 0.080923 0.09198 0.09673 0.15012 0.09375 0.28125 0 0.18652-0.090379 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.44593-0.39134-1.0137-0.62417-1.5625-0.8125-0.54881-0.18833-1.097-0.33324-1.4687-0.5-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+ <path fill="url(#d)" d="m8.2666 3.6562c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.086072 0.32533 0.18927 0.40625 0.28125 0.080923 0.091977 0.09673 0.15012 0.09375 0.28125 0 0.18652-0.090379 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7813 0-0.75379-0.30407-1.2962-0.75-1.6875-0.44593-0.39134-1.0137-0.62417-1.5625-0.8125-0.54881-0.18833-1.097-0.33324-1.4687-0.5-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordTimer.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordTimer.svg
new file mode 100644
index 000000000..54cdcbfbf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TimelineRecordTimer.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.4812 4.8501c-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.03888 0.02211-0.07164 0.054868-0.09375 0.09375-0.01327 0.019236-0.02385 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625v1.2812a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.09375 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h2.375v6.4688a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625v-6.4688h2.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625v-1.2812a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0h-6.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+ <path fill="url(#d)" d="m4.533 3.8198c-0.02216 0.00743-0.04326 0.017981-0.0625 0.03125-0.03888 0.02211-0.07164 0.054868-0.09375 0.09375-0.01327 0.019236-0.02385 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625v1.2812a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.09375 0.125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h2.375v6.4688a0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.0625 0.09375 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.09375 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625v-6.4688h2.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0.03125 -0.0625v-1.2812a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.09375 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0h-6.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ToggleLeftSidebar.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ToggleLeftSidebar.svg
new file mode 100644
index 000000000..1aa92d566
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ToggleLeftSidebar.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m13.5 1.5c1.0524 0 2 0.84508 2 1.9375v9.125c0 1.0924-0.94763 1.9375-2 1.9375h-11c-1.0524 0-2-0.84508-2-1.9375v-9.125c0-1.0919 0.9476-1.937 2-1.937zm-11 11h3v-8h-3"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/ToggleRightSidebar.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/ToggleRightSidebar.svg
new file mode 100644
index 000000000..fa1433100
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/ToggleRightSidebar.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m2.5 1.5c-1.0524 0-2 0.8451-2 1.9375v9.125c0 1.0924 0.94763 1.9375 2 1.9375h11c1.0524 0 2-0.84508 2-1.9375v-9.125c0-1.0919-0.948-1.937-2-1.937zm11 11h-3v-8h3"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeBoolean.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeBoolean.svg
new file mode 100644
index 000000000..2a1288dfd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeBoolean.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#e4d4e2" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#5c3566" offset="0"/>
+   <stop stop-color="#ddc9db" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.8933 4.8521c-0.11423 0-0.15625 0.077737-0.15625 0.1875v8.0938c0 0.13608 0.12063 0.21875 0.25 0.21875h2.5c1.5451 0 2.5098-0.33018 3.0937-0.8125 0.58395-0.48232 0.75-1.1169 0.75-1.625 0-0.80263-0.55943-1.6348-1.5312-2 0.57997-0.46987 0.90625-1.0439 0.90625-1.7188 0-0.41205-0.1117-1.0116-0.5625-1.5-0.4508-0.48837-1.2246-0.84375-2.4375-0.84375zm1.75 1.75h0.875c0.55971 0.01043 0.89623 0.12774 1.0625 0.25 0.17556 0.12909 0.25 0.27137 0.25 0.53125 0 0.26622-0.06532 0.40388-0.25 0.53125s-0.52487 0.21875-1.0625 0.21875h-0.875zm0.59375 3.2188c0.065135 0.00154 0.14025 0 0.1875 0 0.75806 0.011439 1.3016 0.12385 1.5938 0.28125 0.30884 0.16639 0.40625 0.36589 0.40625 0.65625 0 0.36264-0.13114 0.48727-0.46875 0.625s-0.90482 0.21875-1.625 0.21875h-0.6875v-1.75z" display="block"/>
+ <path fill="url(#d)" d="m4.8933 3.8217c-0.11423 0-0.15625 0.077737-0.15625 0.1875v8.0938c0 0.13608 0.12063 0.21875 0.25 0.21875h2.5c1.5451 0 2.5098-0.33018 3.0937-0.8125 0.58395-0.48232 0.75-1.1169 0.75-1.625 0-0.80263-0.55943-1.6348-1.5312-2 0.57997-0.46987 0.90625-1.0439 0.90625-1.7188 0-0.41205-0.1117-1.0116-0.5625-1.5-0.4508-0.48837-1.2246-0.84375-2.4375-0.84375zm1.75 1.75h0.875c0.55971 0.01043 0.89623 0.12774 1.0625 0.25 0.17556 0.12909 0.25 0.27137 0.25 0.53125 0 0.26622-0.06532 0.40388-0.25 0.53125s-0.52487 0.21875-1.0625 0.21875h-0.875zm0.59375 3.2188c0.065135 0.00154 0.14025 0 0.1875 0 0.75806 0.011439 1.3016 0.12385 1.5938 0.28125 0.30884 0.16639 0.40625 0.36589 0.40625 0.65625 0 0.36263-0.13114 0.48727-0.46875 0.625s-0.90482 0.21875-1.625 0.21875h-0.6875v-1.75z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeNull.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeNull.svg
new file mode 100644
index 000000000..f78976b0f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeNull.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.3406 4.8501c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7188a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4063a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0938l-3.4062-5.2188a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+ <path fill="url(#d)" d="m4.3923 3.8198c-0.03291 0.00406-0.06499 0.014754-0.09375 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.01131 0.00947-0.02175 0.019939-0.03125 0.03125-0.0165 0.028765-0.02715 0.060841-0.03125 0.09375-0.0026 0.020724-0.0026 0.041776 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7188a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4062a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0938l-3.4062-5.2188a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.00261-0.04178-0.00261-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeNumber.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeNumber.svg
new file mode 100644
index 000000000..5ecf98b91
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeNumber.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#cbdbed" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#204a87" offset="0"/>
+   <stop stop-color="#bdd2e9" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.3406 4.8516c-0.03291 0.0041-0.06499 0.01475-0.09375 0.03125-0.01131 0.0095-0.02175 0.01994-0.03125 0.03125-0.01131 0.0095-0.02175 0.01994-0.03125 0.03125-0.0165 0.02876-0.02715 0.06084-0.03125 0.09375-0.0026 0.02072-0.0026 0.04178 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7187a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4062a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0938l-3.4062-5.2188a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.0026-0.04178-0.0026-0.0625 0z" display="block"/>
+ <path fill="url(#d)" d="m4.3923 3.8212c-0.03291 0.0041-0.06499 0.01475-0.09375 0.03125-0.01131 0.0095-0.02175 0.01994-0.03125 0.03125-0.01131 0.0095-0.02175 0.01994-0.03125 0.03125-0.0165 0.02876-0.02715 0.06084-0.03125 0.09375-0.0026 0.02072-0.0026 0.04178 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.4062a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-5.0938l3.375 5.25a0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.0625 0h1.7187a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125v-8a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.4062a0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.0625 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 -0.03125 0.0625 0.25002 0.25002 0 0 0 0 0.0625v5.0937l-3.4063-5.2187a0.25002 0.25002 0 0 0 -0.0625 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0 0.25002 0.25002 0 0 0 -0.0625 -0.03125 0.25002 0.25002 0 0 0 -0.03125 0h-1.6875c-0.02072-0.0026-0.04178-0.0026-0.0625 0z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeObject.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeObject.svg
new file mode 100644
index 000000000..073c49711
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeObject.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#c4a000" offset="0"/>
+   <stop stop-color="#fef4a8" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fef6ba" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#c4a000" offset="0"/>
+   <stop stop-color="#fef4a8" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m7.8406 4.8481c-1.0313 0-2.0592 0.3724-2.8438 1.0938-0.78455 0.72136-1.3125 1.7985-1.3125 3.2188 0 2.5548 1.7963 4.2328 4.0625 4.3125 0.12663 0.0073 0.20674 0.0078 0.3125 0 2.2396-0.0781 4.0313-1.6975 4.0313-4.2187 0-2.5923-1.8447-4.4062-4.25-4.4062zm0.093751 1.8125c0.52438 0 1.0551 0.16546 1.4688 0.5625 0.41369 0.39704 0.71875 1.0121 0.71875 1.9375 0 0.93418-0.31504 1.5672-0.75 1.9687-0.42725 0.39438-0.97727 0.58735-1.5 0.59375-0.021472-0.000857-0.042558 0-0.0625 0-0.52756-0.0065-1.0657-0.18202-1.4688-0.5625-0.41058-0.38755-0.6875-0.99125-0.6875-1.875 0-1.6692 1.0047-2.625 2.2813-2.625z" display="block"/>
+ <path fill="url(#d)" d="m7.8923 3.8178c-1.0313 0-2.0592 0.3724-2.8438 1.0938-0.78455 0.72136-1.3125 1.7985-1.3125 3.2188 0 2.5548 1.7963 4.2328 4.0625 4.3125 0.12663 0.0073 0.20674 0.0078 0.3125 0 2.2396-0.0781 4.0313-1.6975 4.0313-4.2188 0-2.5923-1.8447-4.4062-4.25-4.4062zm0.093751 1.8125c0.52438 0 1.0551 0.16546 1.4688 0.5625 0.41369 0.39704 0.71875 1.0121 0.71875 1.9375 0 0.93418-0.31504 1.5672-0.75 1.9688-0.42725 0.39438-0.97727 0.58735-1.5 0.59375-0.021472-0.000857-0.042558 0-0.0625 0-0.52756-0.0065-1.0657-0.18202-1.4688-0.5625-0.41058-0.38756-0.6875-0.99125-0.6875-1.875 0-1.6692 1.0047-2.625 2.2813-2.625z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeRegex.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeRegex.svg
new file mode 100644
index 000000000..3d20f67a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeRegex.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m4.8241 4.7808c-0.03291 0.0041-0.06499 0.01475-0.09375 0.03125-0.02216 0.0074-0.04326 0.01798-0.0625 0.03125-0.02758 0.02597-0.04913 0.0583-0.0625 0.09375-0.000652 0.0104-0.000652 0.02085 0 0.03125-0.0026 0.02072-0.0026 0.04178 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h1.4062a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.12483 0.0059 0.2381 0.03125 0.375 0.03125 0.14931 0 0.32427 0.0053 0.5 0l1.75 2.9688a0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0h1.625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-1.9062-3.1252c0.40877-0.16309 0.82622-0.3517 1.125-0.6875 0.36559-0.41089 0.59375-0.96258 0.59375-1.6875 0-1.1859-0.65393-1.9068-1.4063-2.25-0.75232-0.34325-1.6246-0.375-2.1562-0.375h-2.5938c-0.0104-0.000652-0.02085-0.000652-0.03125 0zm1.6875 1.8125h0.8125c0.50267 0 0.97982 0.02877 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36572 0.14038-0.93321 0.1875-1.5312 0.1875-0.15438 0-0.31008-0.02084-0.46875-0.03125v-1.7812z" display="block"/>
+ <path fill="url(#d)" d="m4.8759 3.7505c-0.03291 0.0041-0.06499 0.01475-0.09375 0.03125-0.02216 0.0074-0.04326 0.01798-0.0625 0.03125-0.02758 0.02597-0.04913 0.0583-0.0625 0.09375-0.000652 0.0104-0.000652 0.02085 0 0.03125-0.0026 0.02072-0.0026 0.04178 0 0.0625v8a0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.09375 0.03125 0.25002 0.25002 0 0 0 0.03125 0h1.4062a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.09375 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125 0.25002 0.25002 0 0 0 0 -0.03125v-2.875c0.12483 0.00594 0.2381 0.03125 0.375 0.03125 0.14931 0 0.32427 0.00525 0.5 0l1.75 2.9688a0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.0625 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0h1.625a0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.03125 0 0.25002 0.25002 0 0 0 0.0625 -0.03125 0.25002 0.25002 0 0 0 0.0625 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125 0.25002 0.25002 0 0 0 0.03125 -0.09375 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.03125 -0.09375l-1.9064-3.1245c0.4088-0.1631 0.8264-0.3517 1.1254-0.6875 0.36559-0.41089 0.59375-0.96258 0.59375-1.6875 0-1.1859-0.65393-1.9068-1.4063-2.25-0.75232-0.34325-1.6246-0.375-2.1562-0.375h-2.5938c-0.0104-0.000651-0.02085-0.000651-0.03125 0zm1.6875 1.8125h0.8125c0.50267 0 0.97982 0.02877 1.2812 0.15625 0.30143 0.12748 0.4375 0.27798 0.4375 0.6875 0 0.23499-0.03704 0.38143-0.125 0.5s-0.22339 0.21106-0.40625 0.28125c-0.36572 0.14038-0.93321 0.1875-1.5312 0.1875-0.15438 0-0.31008-0.02084-0.46875-0.03125v-1.7812z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeString.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeString.svg
new file mode 100644
index 000000000..d392e34d8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeString.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fabebe" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#a40000" offset="0"/>
+   <stop stop-color="#f9adad" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.1541 4.7563c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.08607 0.32533 0.18927 0.40625 0.28125 0.080923 0.09198 0.09673 0.15012 0.09375 0.28125 0 0.18652-0.090379 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.44593-0.39134-1.0137-0.62417-1.5625-0.8125-0.54881-0.18833-1.097-0.33324-1.4687-0.5-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+ <path fill="url(#d)" d="m8.2666 3.6562c-0.9594 0-1.7722 0.24647-2.3438 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4687 0.5 0.18307 0.086072 0.32533 0.18927 0.40625 0.28125 0.080923 0.091977 0.09673 0.15012 0.09375 0.28125 0 0.18652-0.090379 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0938-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7813 0-0.75379-0.30407-1.2962-0.75-1.6875-0.44593-0.39134-1.0137-0.62417-1.5625-0.8125-0.54881-0.18833-1.097-0.33324-1.4687-0.5-0.18586-0.083381-0.32338-0.165-0.40625-0.25-0.08287-0.085001-0.125-0.17508-0.125-0.28125 0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9062 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2813a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.29122-0.093605-1.1271-0.46875-2.4375-0.46875z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeSymbol.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeSymbol.svg
new file mode 100644
index 000000000..e129bc829
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeSymbol.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#069a6b" offset="0"/>
+   <stop stop-color="#34e2ab" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#c2f6e5" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#069a6b" offset="0"/>
+   <stop stop-color="#b2f4df" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m8.1237 4.8417c-0.9594 0-1.7722 0.24647-2.3437 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4688 0.5 0.18307 0.08607 0.32533 0.18927 0.40625 0.28125s0.09673 0.15012 0.09375 0.28125c0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0937-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.44593-0.39134-1.0137-0.62417-1.5625-0.8125-0.54881-0.18833-1.097-0.33324-1.4688-0.5-0.18586-0.08338-0.32338-0.165-0.40625-0.25s-0.125-0.17508-0.125-0.28125c0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9063 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2812a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.292-0.0921-1.1279-0.4673-2.4383-0.4673z" display="block"/>
+ <path fill="url(#d)" d="m8.2362 3.7416c-0.9594 0-1.7722 0.24647-2.3437 0.6875-0.57159 0.44103-0.875 1.0875-0.875 1.8125 0 0.76738 0.30008 1.3618 0.75 1.75 0.44992 0.38821 1.0123 0.59908 1.5625 0.78125 0.55019 0.18217 1.1026 0.32786 1.4688 0.5 0.18307 0.08607 0.32533 0.18927 0.40625 0.28125s0.09673 0.15012 0.09375 0.28125c0 0.18652-0.09038 0.35419-0.34375 0.5s-0.67085 0.25-1.1562 0.25c-0.38979 0-1.0737-0.12598-2.0937-0.5l-0.1875-0.0625a0.25002 0.25002 0 0 0 -0.09375 -0.03125 0.25002 0.25002 0 0 0 -0.0625 0 0.25002 0.25002 0 0 0 -0.15625 0.125 0.25002 0.25002 0 0 0 -0.03125 0.03125l-0.46875 1.3125a0.25002 0.25002 0 0 0 -0.03125 0.03125 0.25002 0.25002 0 0 0 0 0.0625 0.25002 0.25002 0 0 0 0.03125 0.09375 0.25002 0.25002 0 0 0 0.03125 0.0625 0.25002 0.25002 0 0 0 0.03125 0.03125 0.25002 0.25002 0 0 0 0.0625 0.03125 0.25002 0.25002 0 0 0 0.03125 0l0.1875 0.09375v-0.03125c0.77838 0.30206 1.5983 0.59375 2.6562 0.59375 1.2747 0 2.1718-0.32057 2.75-0.8125 0.57818-0.49193 0.8125-1.1637 0.8125-1.7812 0-0.75379-0.30407-1.2962-0.75-1.6875-0.44593-0.39134-1.0137-0.62417-1.5625-0.8125-0.54881-0.18833-1.097-0.33324-1.4688-0.5-0.18586-0.08338-0.32338-0.165-0.40625-0.25s-0.125-0.17508-0.125-0.28125c0-0.20152 0.09694-0.33345 0.3125-0.46875s0.58083-0.25 1.0312-0.25c0.6839 0 1.2751 0.18955 1.9063 0.4375a0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.0625 0 0.25002 0.25002 0 0 0 0.09375 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.0625 0.25002 0.25002 0 0 0 0.03125 -0.03125l0.4375-1.2812a0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 0 -0.0625 0.25002 0.25002 0 0 0 -0.0625 -0.09375 0.25002 0.25002 0 0 0 -0.0625 -0.03125l-0.15625-0.0625a0.25002 0.25002 0 0 0 -0.03125 0c-0.291-0.0922-1.1273-0.4674-2.4378-0.4674z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/TypeUndefined.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeUndefined.svg
new file mode 100644
index 000000000..a5f21f3e6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/TypeUndefined.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <defs>
+  <linearGradient id="d" x1="491.22" x2="491.22" y1="506.65" y2="732.05" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.093294 0 0 .093294 -35.871 -43.769)">
+   <stop stop-color="#888a85" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+  <radialGradient id="b" cx="301" cy="51.5" r="19.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97063 1.9684e-8 0 .28611 -291.16 -14.63)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#fff" stop-opacity="0" offset="1"/>
+  </radialGradient>
+  <radialGradient id="a" cx="24.446" cy="35.878" r="20.531" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.85696 3.2529e-7 -1.253e-7 .33010 -12.949 .77181)">
+   <stop stop-color="#fff" offset="0"/>
+   <stop stop-color="#dcdcdc" offset="1"/>
+  </radialGradient>
+  <linearGradient id="c" x1="321.57" x2="311.65" y1="145.52" y2="118.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.55569 0 0 .55568 -169.27 -70.906)">
+   <stop stop-color="#9b9b9b" offset="0"/>
+   <stop stop-color="#d3d7cf" offset="1"/>
+  </linearGradient>
+ </defs>
+ <rect width="15.004" height="15.003" x=".49815" y=".49833" fill="url(#a)" fill-rule="evenodd" stroke="url(#c)" stroke-miterlimit="10" rx="1.5143" ry="1.5143" stroke-linejoin="bevel"/>
+ <rect width="12.997" height="13" x="1.5014" y="1.5016" fill="none" stroke="#fff" stroke-miterlimit="10" ry=".50810" stroke-linejoin="bevel" rx=".50812"/>
+ <rect width="14" height="14" x="1.0017" y="1.0016" fill="url(#b)" fill-rule="evenodd" rx="1.9062" ry="1.9062"/>
+ <path fill="#fff" d="m7.029 4.8559c-0.51432 0.047292-1.0152 0.19509-1.5 0.4375-0.0104-0.0006514-0.02085-0.0006514-0.03125 0l-0.1875 0.125c-0.03544 0.013371-0.06778 0.034924-0.09375 0.0625-0.01327 0.019236-0.02382 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625 0.0074 0.022157 0.01798 0.043264 0.03125 0.0625l0.4375 1.0938c0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.02876 0.016495 0.06084 0.027188 0.09375 0.03125 0.02072 0.00261 0.04178 0.00261 0.0625 0 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125l0.21875-0.0625c0.0104 0.0006514 0.02085 0.0006514 0.03125 0 0.2531-0.10708 0.81054-0.25 1.1875-0.25 0.61612 0 0.93062 0.15784 1.0938 0.3125 0.16314 0.15466 0.1875 0.3218 0.1875 0.46875 0 0.28396-0.1033 0.4873-0.28125 0.6875s-0.43874 0.38297-0.71875 0.625c-0.5601 0.4839-1.1564 1.1824-1.1564 2.5v0.25c-0.000651 0.0104-0.000651 0.02085 0 0.03125 0.0041 0.03291 0.01475 0.06499 0.03125 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.03465 0.03208 0.07855 0.05403 0.125 0.0625 0.0104 0.000652 0.02085 0.000652 0.03125 0h1.4062c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03545-0.01337 0.06778-0.03492 0.09375-0.0625 0.01131-0.0095 0.02178-0.01994 0.03125-0.03125 0.03208-0.03464 0.05403-0.07855 0.0625-0.125 0.000651-0.0104 0.000651-0.02085 0-0.03125v-0.25c0-0.42536 0.10634-0.69896 0.28125-0.9375s0.44641-0.42344 0.71875-0.65625c0.54468-0.46561 1.1563-1.1016 1.1563-2.375 0-0.78379-0.33057-1.4123-0.875-1.8125-0.54443-0.40022-1.2799-0.59375-2.1562-0.59375-0.16808 0-0.35981-0.015764-0.53125 0zm-0.34375 6.9687c-0.04343-0.000679-0.087 0.01021-0.125 0.03125-0.03888 0.02211-0.07164 0.05487-0.09375 0.09375-0.01327 0.01924-0.02385 0.04034-0.03125 0.0625-0.0026 0.02072-0.0026 0.04178 0 0.0625v1.3438c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.038 0.02104 0.08157 0.03193 0.125 0.03125h1.5c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03291-0.0041 0.06499-0.01475 0.09375-0.03125 0.02432-0.01691 0.04559-0.03818 0.0625-0.0625 0.01327-0.01924 0.02382-0.04034 0.03125-0.0625 0.0026-0.02072 0.0026-0.04178 0-0.0625 0.000651-0.0104 0.000651-0.02085 0-0.03125v-1.3438c0.000651-0.0104 0.000651-0.02085 0-0.03125-0.0041-0.03291-0.01475-0.06499-0.03125-0.09375-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.02876-0.01649-0.06084-0.02719-0.09375-0.03125-0.0104-0.000651-0.02085-0.000651-0.03125 0h-1.5z" display="block"/>
+ <path fill="url(#d)" d="m7.0808 3.8256c-0.51432 0.047292-1.0152 0.19509-1.5 0.4375-0.0104-0.0006514-0.02085-0.0006514-0.03125 0l-0.1875 0.125c-0.03544 0.013371-0.06778 0.034924-0.09375 0.0625-0.01327 0.019236-0.02382 0.040343-0.03125 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625-0.0026 0.020724-0.0026 0.041776 0 0.0625 0.0074 0.022157 0.01798 0.043264 0.03125 0.0625l0.4375 1.0938c0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.0095 0.011311 0.01994 0.021782 0.03125 0.03125 0.02876 0.016495 0.06084 0.027188 0.09375 0.03125 0.02072 0.00261 0.04178 0.00261 0.0625 0 0.01131-0.00947 0.02178-0.019939 0.03125-0.03125l0.21875-0.0625c0.0104 0.0006514 0.02085 0.0006514 0.03125 0 0.2531-0.10708 0.81054-0.25 1.1875-0.25 0.61612 0 0.93062 0.15784 1.0938 0.3125 0.16314 0.15466 0.1875 0.3218 0.1875 0.46875 0 0.28396-0.1033 0.4873-0.28125 0.6875s-0.43874 0.38297-0.71875 0.625c-0.5601 0.4839-1.1564 1.1824-1.1564 2.5003v0.25c-0.000651 0.0104-0.000651 0.02085 0 0.03125 0.0041 0.03291 0.01475 0.06499 0.03125 0.09375 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.0095 0.01131 0.01994 0.02178 0.03125 0.03125 0.03465 0.03208 0.07855 0.05403 0.125 0.0625 0.0104 0.000651 0.02085 0.000651 0.03125 0h1.4062c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03545-0.01337 0.06778-0.03492 0.09375-0.0625 0.01131-0.0095 0.02178-0.01994 0.03125-0.03125 0.03208-0.03464 0.05403-0.07855 0.0625-0.125 0.000651-0.0104 0.000651-0.02085 0-0.03125v-0.25c0-0.42537 0.10634-0.69896 0.28125-0.9375s0.44641-0.42344 0.71875-0.65625c0.54468-0.46561 1.1563-1.1016 1.1563-2.375 0-0.78379-0.33057-1.4123-0.875-1.8125-0.54443-0.40022-1.2799-0.59375-2.1562-0.59375-0.16808 0-0.35981-0.015764-0.53125 0zm-0.3437 6.9684c-0.04343-0.000679-0.087 0.01021-0.125 0.03125-0.03888 0.02211-0.07164 0.05487-0.09375 0.09375-0.01327 0.01924-0.02385 0.04034-0.03125 0.0625-0.0026 0.02072-0.0026 0.04178 0 0.0625v1.3438c-0.0026 0.02072-0.0026 0.04178 0 0.0625 0.0074 0.02216 0.01798 0.04326 0.03125 0.0625 0.02211 0.03888 0.05487 0.07164 0.09375 0.09375 0.038 0.02104 0.08157 0.03193 0.125 0.03125h1.5c0.02072 0.0026 0.04178 0.0026 0.0625 0 0.03291-0.0041 0.06499-0.01475 0.09375-0.03125 0.02432-0.01691 0.04559-0.03818 0.0625-0.0625 0.01327-0.01924 0.02382-0.04034 0.03125-0.0625 0.0026-0.02072 0.0026-0.04178 0-0.0625 0.000651-0.0104 0.000651-0.02085 0-0.03125v-1.3438c0.000651-0.0104 0.000651-0.02085 0-0.03125-0.0041-0.03291-0.01475-0.06499-0.03125-0.09375-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.0095-0.01131-0.01994-0.02178-0.03125-0.03125-0.02876-0.01649-0.06084-0.02719-0.09375-0.03125-0.0104-0.000652-0.02085-0.000652-0.03125 0h-1.5z" display="block"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Undock.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Undock.svg
new file mode 100644
index 000000000..3803b81ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Undock.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 14">
+ <path d="m1.9062 1.4375c-0.491 0.0397-0.90833 0.4208-0.9062 0.8437v6.875c-0.0015 0.0268-0.0015 0.0358 0 0.0626v0.7812h0.8438 0.1562 2.2812v-4.7188c-0.0045-0.9042 0.7349-1.4956 1.5626-1.5624h0.03125 0.03125c0.039713-0.0016 0.053172-0.00107 0.09375 0 0.00812 0.0002133 0.023307-0.0003199 0.03125 0h4.9688v-1.4375c0-0.4485-0.477-0.8438-1-0.8438h-8c-0.03119-0.00126-0.06256-0.00126-0.09375 0zm4 3c-0.491 0.0397-0.9083 0.4208-0.9062 0.8437v6.875c-0.0015 0.027-0.0015 0.036 0 0.063v0.781h0.8438 0.1562 8 0.094 0.906v-0.688c0.0059-0.05338 0.0059-0.10287 0-0.15625v-6.875c0-0.4482-0.477-0.8435-1-0.8435h-8c-0.031193-0.00126-0.062557-0.00126-0.09375 0zm0.53125 2.4375h7.125v4.6875h-7.125v-4.6875z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/UpDownArrows.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/UpDownArrows.svg
new file mode 100644
index 000000000..150822713
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UpDownArrows.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 5 12">
+ <path d="m4.75 4.4276c-0.017-0.0714-0.0556-0.1375-0.1094-0.1875l-1.875-1.875-0.26562-0.25-0.26562 0.25-1.875 1.875c-0.06894 0.07-0.10908 0.1675-0.1094 0.2657v0.015625 0.03125 0.32812h0.28125 0.046875c0.11834 0.017935 0.24422-0.024025 0.32812-0.10938l1.5938-1.5938 1.6094 1.5938c0.069545 0.069441 0.16735 0.10971 0.26562 0.10938h0.078125 0.29688v-0.29688-0.046875-0.03125-0.046875z"/>
+ <path d="m4.75 7.5724c-0.017 0.0714-0.0556 0.1375-0.1094 0.1875l-1.875 1.875-0.26562 0.25-0.26562-0.25-1.875-1.875c-0.06894-0.07-0.10908-0.1675-0.1094-0.2657v-0.015625-0.03125-0.32812h0.28125 0.04687c0.11834-0.0179 0.24422 0.0241 0.32812 0.1094l1.5938 1.5938 1.6094-1.5938c0.0695-0.0694 0.1673-0.1097 0.2656-0.1094h0.07813 0.29688v0.29688 0.046875 0.03125 0.046875z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPrompt.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPrompt.svg
new file mode 100644
index 000000000..c0130cec4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPrompt.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="none" stroke="#729fcf" stroke-width="1.875" d="m3.4375 8.125 3.125-3.125-3.125-3.125" stroke-linejoin="round" stroke-linecap="round"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPromptPrevious.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPromptPrevious.svg
new file mode 100644
index 000000000..114302de7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputPromptPrevious.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="none" stroke="#bebebe" stroke-width="1.875" d="m3.4375 8.125 3.125-3.125-3.125-3.125" stroke-linejoin="round" stroke-linecap="round"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputResult.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputResult.svg
new file mode 100644
index 000000000..543650618
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/UserInputResult.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="none" stroke="#d3d7cf" stroke-width="1.875" d="m5.0625 8.125-3.125-3.125 3.125-3.125" stroke-linejoin="round" stroke-linecap="round"/>
+ <path fill="#d3d7cf" d="m8.0366 5a1 1 0 1 1 -2 0 1 1 0 1 1 2 0z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStyleNone.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStyleNone.svg
new file mode 100644
index 000000000..b47fbe802
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStyleNone.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m12 4h-1.333l-6.667 6.667v1.333h1.3333l6.6667-6.6667z"/>
+ <path d="m4 4h1.3333l6.6667 6.667v1.333h-1.333l-6.667-6.6667z"/>
+ <path d="m2 1c-0.5535 0-1 0.4465-1 1v12c0 0.55349 0.44651 1 1 1h12c0.55349 0 1-0.44651 1-1v-12c0-0.5535-0.447-1-1-1h-12zm1 1h10c0.55349 0 1 0.44651 1 1v10c0 0.55349-0.44651 1-1 1h-10c-0.5535 0-1-0.447-1-1v-10c0-0.5535 0.4465-1 1-1z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStylePropertyLinked.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStylePropertyLinked.svg
new file mode 100644
index 000000000..37129039c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStylePropertyLinked.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="2" height="6" x="-9" y="-6" transform="matrix(0,-1,-1,0,0,0)" rx="1" ry="0"/>
+ <rect width="2" height="6" x="-9" y="-16" transform="matrix(0,-1,-1,0,0,0)" rx=".9375" ry="0"/>
+ <path d="m4 3c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h8c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-8zm1 2h6c0.554 0 1 0.446 1 1v4c0 0.554-0.446 1-1 1h-6c-0.554 0-1-0.446-1-1v-4c0-0.554 0.446-1 1-1z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStylePropertyUnlinked.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStylePropertyUnlinked.svg
new file mode 100644
index 000000000..6767e5e18
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/VisualStylePropertyUnlinked.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <rect width="2" height="5" x="-9" y="-5" transform="matrix(0,-1,-1,0,0,0)" rx="1" ry="0"/>
+ <rect width="2" height="5" x="-9" y="-16" transform="matrix(0,-1,-1,0,0,0)" rx=".9375" ry="0"/>
+ <path d="m4 3c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h3v-2h-2c-0.554 0-1-0.446-1-1v-4c0-0.554 0.446-1 1-1h2v-2h-3z"/>
+ <path d="m9 3v2h2c0.554 0 1 0.446 1 1v4c0 0.554-0.446 1-1 1h-2v2h3c1.108 0 2-0.892 2-2v-6c0-1.108-0.892-2-2-2h-3z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Warning.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Warning.svg
new file mode 100644
index 000000000..d19d2b721
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Warning.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 10 10">
+ <path fill="#fcaf3e" d="m4.9599 0.36192c-0.3271-0.0178-0.6462 0.17616-0.8947 0.60292l-3.8898 7.2157c-0.33202 0.59959 0.030011 1.4587 0.68072 1.4587h8.1881c0.611 0 1.1844-0.72158 0.75852-1.4587l-3.9287-7.1768c-0.2482-0.40212-0.5871-0.62397-0.9141-0.64178zm0.0389 2.4506c0.3388-0.0107 0.6525 0.303 0.6418 0.6418v2.4506c0.00436 0.32881-0.29353 0.62238-0.62238 0.62238-0.32884 0-0.62702-0.29357-0.62238-0.62238v-2.4506c-0.00498-0.2904 0.22038-0.56794 0.50568-0.62238 0.031803-0.00902 0.064385-0.015497 0.097246-0.019418zm0.019449 4.3372c0.34373 0 0.62238 0.27865 0.62238 0.62238s-0.27865 0.62238-0.62238 0.62238-0.62238-0.27865-0.62238-0.62238 0.27865-0.62238 0.62238-0.62238z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/Images/gtk/Weight.svg b/Source/WebInspectorUI/UserInterface/Images/gtk/Weight.svg
new file mode 100644
index 000000000..5230ac480
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Images/gtk/Weight.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 16">
+ <path d="m4.4375 2c-0.5204 0-0.9375 0.4171-0.9375 0.9375v0.125c0 0.5204 0.4171 0.9375 0.9375 0.9375h0.5625v1h-0.6562c-0.4742 0-0.8438 0.3696-0.8438 0.8438v8.1562h9v-8.1562c0-0.4742-0.37-0.8438-0.844-0.8438h-0.656v-1h0.562c0.521 0 0.938-0.4171 0.938-0.9375v-0.125c0-0.5204-0.417-0.9375-0.938-0.9375h-7.125zm0.90625 5.5625c0.02072-0.00261 0.04178-0.00261 0.0625 0h0.5937c0.0329 0.0041 0.065 0.0147 0.0938 0.0313 0.0221 0.0074 0.0432 0.0179 0.0624 0.0312 0.0564 0.045 0.0916 0.1154 0.0938 0.1875v0.96875l0.90625-1.125c0.038-0.0492 0.095-0.0833 0.1563-0.0937 0.0104-0.0006514 0.02085-0.0006514 0.03125 0h0.6875c0.0329 0.0041 0.0649 0.0148 0.0937 0.0313 0.0222 0.0074 0.0433 0.0179 0.0625 0.0312 0.04921 0.03799 0.08339 0.094948 0.09375 0.15625 0.0059 0.030879 0.0059 0.062871 0 0.09375-0.0133 0.0354-0.0349 0.0678-0.0624 0.0938l-1.1876 1.4687 1.2813 1.5625c0.01327 0.01924 0.02385 0.04034 0.03125 0.0625 0.02104 0.038 0.031929 0.08157 0.03125 0.125-0.0041 0.032-0.0148 0.064-0.0312 0.093-0.0222 0.039-0.0549 0.072-0.0938 0.094-0.01924 0.01327-0.04034 0.02385-0.0625 0.03125-0.02072 0.0026-0.04178 0.0026-0.0625 0h-0.71875c-0.0329-0.004-0.0649-0.014-0.0937-0.031-0.0222-0.007-0.0433-0.018-0.0625-0.031-0.0113-0.01-0.0218-0.02-0.0312-0.032l-0.9688-1.218v1.0625c-0.0022 0.072-0.0374 0.143-0.0938 0.188-0.0192 0.013-0.0403 0.024-0.0624 0.031-0.0288 0.017-0.0609 0.027-0.0938 0.031h-0.59375c-0.02072 0.0026-0.04178 0.0026-0.0625 0-0.09079-0.02092-0.16658-0.09671-0.1875-0.1875-0.0026-0.02072-0.0026-0.04178 0-0.0625v-3.3438c0.005-0.0942 0.0686-0.1831 0.1563-0.2184 0.0095-0.0114 0.0199-0.0218 0.0313-0.0313zm4.0937 0.9687c0.2374 0 0.39451 0.086642 0.5625 0.15625 0.0095-0.011311 0.01994-0.02178 0.03125-0.03125 0.0095-0.011311 0.01994-0.02178 0.03125-0.03125 0.02876-0.016496 0.06084-0.02719 0.09375-0.03125 0.0104-0.0006514 0.02085-0.0006514 0.03125 0h0.40625c0.04343-0.000679 0.087 0.010212 0.125 0.03125 0.01131 0.00947 0.02175 0.019939 0.03125 0.03125 0.04343 0.030323 0.0768 0.074815 0.09375 0.125 0.0026 0.020724 0.0026 0.041776 0 0.0625v2.375c0 0.3107-0.07692 0.6703-0.3125 0.96875s-0.62478 0.5-1.1875 0.5c-0.24977 0-0.57703-0.06006-0.90625-0.1875l-0.094-0.031c-0.0114-0.01-0.0218-0.02-0.0313-0.031-0.0607-0.032-0.1072-0.09-0.125-0.157-0.00068-0.04343 0.01021-0.087 0.03125-0.125l0.1562-0.437c0.0074-0.022 0.018-0.044 0.0312-0.063 0.0095-0.011 0.02-0.022 0.0313-0.031 0.0506-0.045 0.12-0.068 0.1875-0.063 0.02072-0.0026 0.04178-0.0026 0.0625 0l0.09375 0.0625c0.13955 0.04652 0.33541 0.09375 0.5 0.09375 0.27536 0 0.35369-0.05106 0.40625-0.125 0.01963-0.02762 0.01759-0.1358 0.03125-0.1875-0.068835 0.01053-0.11241 0.0625-0.1875 0.0625-0.42852 0-0.80814-0.14278-1.0625-0.40625-0.2543-0.263-0.3749-0.641-0.3749-1.062 0-0.5275 0.1921-0.9249 0.4687-1.1562 0.2766-0.2314 0.6012-0.3126 0.875-0.3126zm0.1563 0.9688c-0.1549 0-0.2537 0.0358-0.3126 0.0938-0.0588 0.0579-0.0937 0.1768-0.0937 0.4372 0 0.22455 0.05965 0.31499 0.125 0.375 0.0653 0.06 0.1607 0.094 0.3125 0.094 0.06061 0 0.10828-0.01424 0.15625-0.03125v-0.9375c-0.06-0.0116-0.1334-0.0315-0.1874-0.0315z"/>
+</svg>
diff --git a/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.css b/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.css
deleted file mode 100644
index 357f6d099..000000000
--- a/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/* These keyframes try to reproduce the 12 discrete steps seen in a standard system progress indicator. */
-@-webkit-keyframes discrete-spinner {
-    0% {
-        background-image: url(Images/IndeterminateProgressSpinner1.pdf);
-    }
-
-    8.333% {
-        background-image: url(Images/IndeterminateProgressSpinner2.pdf);
-    }
-
-    16.666% {
-        background-image: url(Images/IndeterminateProgressSpinner3.pdf);
-    }
-
-    25.000% {
-        background-image: url(Images/IndeterminateProgressSpinner4.pdf);
-    }
-
-    33.333% {
-        background-image: url(Images/IndeterminateProgressSpinner5.pdf);
-    }
-
-    41.666% {
-        background-image: url(Images/IndeterminateProgressSpinner6.pdf);
-    }
-
-    50.000% {
-        background-image: url(Images/IndeterminateProgressSpinner7.pdf);
-    }
-
-    58.333% {
-        background-image: url(Images/IndeterminateProgressSpinner8.pdf);
-    }
-
-    66.666% {
-        background-image: url(Images/IndeterminateProgressSpinner9.pdf);
-    }
-
-    75.000% {
-        background-image: url(Images/IndeterminateProgressSpinner10.pdf);
-    }
-
-    83.333% {
-        background-image: url(Images/IndeterminateProgressSpinner11.pdf);
-    }
-
-    91.666% {
-        background-image: url(Images/IndeterminateProgressSpinner12.pdf);
-    }
-
-    100% {
-        background-image: url(Images/IndeterminateProgressSpinner1.pdf);
-    }
-}
-
-.indeterminate-progress-spinner {
-    background-image: url(Images/IndeterminateProgressSpinner1.pdf);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-
-    width: 16px;
-    height: 16px;
-
-    -webkit-animation-name: discrete-spinner;
-    -webkit-animation-duration: 1s;
-    -webkit-animation-iteration-count: infinite;
-    -webkit-animation-timing-function: step-start;
-}
diff --git a/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.js b/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.js
deleted file mode 100644
index 00bcaf887..000000000
--- a/Source/WebInspectorUI/UserInterface/IndeterminateProgressSpinner.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.IndeterminateProgressSpinner = function()
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.IndeterminateProgressSpinner.StyleClassName;
-}
-
-WebInspector.IndeterminateProgressSpinner.StyleClassName = "indeterminate-progress-spinner";
-
-WebInspector.IndeterminateProgressSpinner.prototype = {
-    constructor: WebInspector.IndeterminateProgressSpinner,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    }
-}
-
-WebInspector.IndeterminateProgressSpinner.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/InspectorBackend.js b/Source/WebInspectorUI/UserInterface/InspectorBackend.js
deleted file mode 100644
index 4c0f89d5c..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorBackend.js
+++ /dev/null
@@ -1,283 +0,0 @@
-/*
- * Copyright (C) 2011 Google Inc. All rights reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- */
-function InspectorBackendClass()
-{
-    this._lastCallbackId = 1;
-    this._pendingResponsesCount = 0;
-    this._callbacks = {};
-    this._domainDispatchers = {};
-    this._eventArgs = {};
-    this._replyArgs = {};
-
-    this.dumpInspectorTimeStats = false;
-    this.dumpInspectorProtocolMessages = false;
-    this._initialized = false;
-}
-
-InspectorBackendClass.prototype = {
-    _wrap: function(callback, method)
-    {
-        var callbackId = this._lastCallbackId++;
-        if (!callback)
-            callback = function() {};
-
-        this._callbacks[callbackId] = callback;
-        callback.methodName = method;
-        if (this.dumpInspectorTimeStats)
-            callback.sendRequestTime = Date.now();
-        
-        return callbackId;
-    },
-
-    _getAgent: function(domain)
-    {
-        var agentName = domain + "Agent";
-        if (!window[agentName])
-            window[agentName] = {};
-        return window[agentName];
-    },
-
-    registerCommand: function(method, signature, replyArgs)
-    {
-        var domainAndMethod = method.split(".");
-        var agent = this._getAgent(domainAndMethod[0]);
-
-        agent[domainAndMethod[1]] = this._sendMessageToBackend.bind(this, method, signature);
-        agent[domainAndMethod[1]]["invoke"] = this._invoke.bind(this, method, signature);
-        this._replyArgs[method] = replyArgs;
-
-        this._initialized = true;
-    },
-
-    registerEnum: function(type, values)
-    {
-        var domainAndMethod = type.split(".");
-        var agent = this._getAgent(domainAndMethod[0]);
-
-        agent[domainAndMethod[1]] = values;
-
-        this._initialized = true;
-    },
-
-    registerEvent: function(eventName, params)
-    {
-        this._eventArgs[eventName] = params;
-
-        this._initialized = true;
-    },
-
-    _invoke: function(method, signature, args, callback)
-    {
-        this._wrapCallbackAndSendMessageObject(method, args, callback);
-    },
-
-    _sendMessageToBackend: function(method, signature, vararg)
-    {
-        var args = Array.prototype.slice.call(arguments, 2);
-        var callback = typeof args.lastValue === "function" ? args.pop() : null;
-
-        var params = {};
-        var hasParams = false;
-        for (var i = 0; i < signature.length; ++i) {
-            var param = signature[i];
-            var paramName = param["name"];
-            var typeName = param["type"];
-            var optionalFlag = param["optional"];
-
-            if (!args.length && !optionalFlag) {
-                console.error("Protocol Error: Invalid number of arguments for method '" + method + "' call. It must have the following arguments '" + JSON.stringify(signature) + "'.");
-                return;
-            }
-
-            var value = args.shift();
-            if (optionalFlag && typeof value === "undefined") {
-                continue;
-            }
-
-            if (typeof value !== typeName) {
-                console.error("Protocol Error: Invalid type of argument '" + paramName + "' for method '" + method + "' call. It must be '" + typeName + "' but it is '" + typeof value + "'.");
-                return;
-            }
-
-            params[paramName] = value;
-            hasParams = true;
-        }
-
-        if (args.length === 1 && !callback) {
-            if (typeof args[0] !== "undefined") {
-                console.error("Protocol Error: Optional callback argument for method '" + method + "' call must be a function but its type is '" + typeof args[0] + "'.");
-                return;
-            }
-        }
-
-        this._wrapCallbackAndSendMessageObject(method, hasParams ? params : null, callback);
-    },
-
-    _wrapCallbackAndSendMessageObject: function(method, params, callback)
-    {
-        var messageObject = {};
-        messageObject.method = method;
-        if (params)
-            messageObject.params = params;
-        messageObject.id = this._wrap(callback, method);
-
-        if (this.dumpInspectorProtocolMessages)
-            console.log("frontend: " + JSON.stringify(messageObject));
-
-        ++this._pendingResponsesCount;
-        this.sendMessageObjectToBackend(messageObject);
-    },
-
-    sendMessageObjectToBackend: function(messageObject)
-    {
-        var message = JSON.stringify(messageObject);
-        InspectorFrontendHost.sendMessageToBackend(message);
-    },
-
-    registerDomainDispatcher: function(domain, dispatcher)
-    {
-        this._domainDispatchers[domain] = dispatcher;
-    },
-
-    dispatch: function(message)
-    {
-        if (this.dumpInspectorProtocolMessages)
-            console.log("backend: " + ((typeof message === "string") ? message : JSON.stringify(message)));
-
-        var messageObject = (typeof message === "string") ? JSON.parse(message) : message;
-
-        if ("id" in messageObject) { // just a response for some request
-            if (messageObject.error) {
-                if (messageObject.error.code !== -32000)
-                    this.reportProtocolError(messageObject);
-            }
-
-            var callback = this._callbacks[messageObject.id];
-            if (callback) {
-                var argumentsArray = [];
-                if (messageObject.result) {
-                    if (callback.expectsResultObject) {
-                        // The callback expects results as an object with properties, this is useful
-                        // for backwards compatibility with renamed or different parameters.
-                        argumentsArray.push(messageObject.result);
-                    } else {
-                        var paramNames = this._replyArgs[callback.methodName];
-                        if (paramNames) {
-                            for (var i = 0; i < paramNames.length; ++i)
-                                argumentsArray.push(messageObject.result[paramNames[i]]);
-                        }
-                    }
-                }
-
-                var processingStartTime;
-                if (this.dumpInspectorTimeStats && callback.methodName)
-                    processingStartTime = Date.now();
-
-                argumentsArray.unshift(messageObject.error ? messageObject.error.message : null);
-                callback.apply(null, argumentsArray);
-                --this._pendingResponsesCount;
-                delete this._callbacks[messageObject.id];
-
-                if (this.dumpInspectorTimeStats && callback.methodName)
-                    console.log("time-stats: " + callback.methodName + " = " + (processingStartTime - callback.sendRequestTime) + " + " + (Date.now() - processingStartTime));
-            }
-
-            if (this._scripts && !this._pendingResponsesCount)
-                this.runAfterPendingDispatches();
-
-            return;
-        } else {
-            var method = messageObject.method.split(".");
-            var domainName = method[0];
-            var functionName = method[1];
-            if (!(domainName in this._domainDispatchers)) {
-                console.error("Protocol Error: the message is for non-existing domain '" + domainName + "'");
-                return;
-            }
-            var dispatcher = this._domainDispatchers[domainName];
-            if (!(functionName in dispatcher)) {
-                console.error("Protocol Error: Attempted to dispatch an unimplemented method '" + messageObject.method + "'");
-                return;
-            }
-
-            if (!this._eventArgs[messageObject.method]) {
-                console.error("Protocol Error: Attempted to dispatch an unspecified method '" + messageObject.method + "'");
-                return;
-            }
-
-            var params = [];
-            if (messageObject.params) {
-                var paramNames = this._eventArgs[messageObject.method];
-                for (var i = 0; i < paramNames.length; ++i)
-                    params.push(messageObject.params[paramNames[i]]);
-            }
-
-            var processingStartTime;
-            if (this.dumpInspectorTimeStats)
-                processingStartTime = Date.now();
-
-            dispatcher[functionName].apply(dispatcher, params);
-
-            if (this.dumpInspectorTimeStats)
-                console.log("time-stats: " + messageObject.method + " = " + (Date.now() - processingStartTime));
-        }
-    },
-
-    reportProtocolError: function(messageObject)
-    {
-        console.error("Request with id = " + messageObject.id + " failed. " + JSON.stringify(messageObject.error));
-    },
-
-    /**
-     * @param {string=} script
-     */
-    runAfterPendingDispatches: function(script)
-    {
-        if (!this._scripts)
-            this._scripts = [];
-
-        if (script)
-            this._scripts.push(script);
-
-        if (!this._pendingResponsesCount) {
-            var scripts = this._scripts;
-            this._scripts = []
-            for (var id = 0; id < scripts.length; ++id)
-                 scripts[id].call(this);
-        }
-    }
-}
-
-InspectorBackend = new InspectorBackendClass();
diff --git a/Source/WebInspectorUI/UserInterface/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/InspectorBackendCommands.js
deleted file mode 100644
index 4625cc789..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorBackendCommands.js
+++ /dev/null
@@ -1,403 +0,0 @@
-// File is generated by WebCore/WebCore/inspector/CodeGeneratorInspector.py
-
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-
-// Inspector.
-InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
-InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["testCallId", "script"]);
-InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
-InspectorBackend.registerEvent("Inspector.detached", ["reason"]);
-InspectorBackend.registerEvent("Inspector.targetCrashed", []);
-InspectorBackend.registerCommand("Inspector.enable", [], []);
-InspectorBackend.registerCommand("Inspector.disable", [], []);
-
-// Memory.
-InspectorBackend.registerMemoryDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Memory");
-InspectorBackend.registerEvent("Memory.addNativeSnapshotChunk", ["chunk"]);
-InspectorBackend.registerCommand("Memory.getDOMCounters", [], ["documents", "nodes", "jsEventListeners"]);
-
-// Page.
-InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
-InspectorBackend.registerEnum("Page.ResourceType", {Document: "Document", Stylesheet: "Stylesheet", Image: "Image", Font: "Font", Script: "Script", XHR: "XHR", WebSocket: "WebSocket", Other: "Other"});
-InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
-InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
-InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
-InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
-InspectorBackend.registerEvent("Page.frameStartedLoading", ["frameId"]);
-InspectorBackend.registerEvent("Page.frameStoppedLoading", ["frameId"]);
-InspectorBackend.registerEvent("Page.frameScheduledNavigation", ["frameId", "delay"]);
-InspectorBackend.registerEvent("Page.frameClearedScheduledNavigation", ["frameId"]);
-InspectorBackend.registerEvent("Page.javascriptDialogOpening", ["message"]);
-InspectorBackend.registerEvent("Page.javascriptDialogClosed", []);
-InspectorBackend.registerEvent("Page.scriptsEnabled", ["isEnabled"]);
-InspectorBackend.registerCommand("Page.enable", [], []);
-InspectorBackend.registerCommand("Page.disable", [], []);
-InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
-InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}, {"name": "scriptPreprocessor", "type": "string", "optional": true}], []);
-InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.getCookies", [], ["cookies", "cookiesString"]);
-InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
-InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
-InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.canOverrideDeviceMetrics", [], ["result"]);
-InspectorBackend.registerCommand("Page.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "fontScaleFactor", "type": "number", "optional": false}, {"name": "fitWindow", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.setShowPaintRects", [{"name": "result", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.canShowDebugBorders", [], ["show"]);
-InspectorBackend.registerCommand("Page.setShowDebugBorders", [{"name": "show", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.canShowFPSCounter", [], ["show"]);
-InspectorBackend.registerCommand("Page.setShowFPSCounter", [{"name": "show", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.canContinuouslyPaint", [], ["value"]);
-InspectorBackend.registerCommand("Page.setContinuousPaintingEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
-InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.setGeolocationOverride", [{"name": "latitude", "type": "number", "optional": true}, {"name": "longitude", "type": "number", "optional": true}, {"name": "accuracy", "type": "number", "optional": true}], []);
-InspectorBackend.registerCommand("Page.clearGeolocationOverride", [], []);
-InspectorBackend.registerCommand("Page.canOverrideGeolocation", [], ["result"]);
-InspectorBackend.registerCommand("Page.setDeviceOrientationOverride", [{"name": "alpha", "type": "number", "optional": false}, {"name": "beta", "type": "number", "optional": false}, {"name": "gamma", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Page.clearDeviceOrientationOverride", [], []);
-InspectorBackend.registerCommand("Page.canOverrideDeviceOrientation", [], ["result"]);
-InspectorBackend.registerCommand("Page.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.setEmulatedMedia", [{"name": "media", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.getCompositingBordersVisible", [], ["result"]);
-InspectorBackend.registerCommand("Page.setCompositingBordersVisible", [{"name": "visible", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.captureScreenshot", [], ["data"]);
-InspectorBackend.registerCommand("Page.handleJavaScriptDialog", [{"name": "accept", "type": "boolean", "optional": false}, {"name": "promptText", "type": "string", "optional": true}], []);
-
-// Runtime.
-InspectorBackend.registerRuntimeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Runtime");
-InspectorBackend.registerEnum("Runtime.RemoteObjectType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
-InspectorBackend.registerEnum("Runtime.RemoteObjectSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
-InspectorBackend.registerEnum("Runtime.PropertyPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
-InspectorBackend.registerEnum("Runtime.PropertyPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
-InspectorBackend.registerEnum("Runtime.SyntaxErrorType", {None: "none", Irrecoverable: "irrecoverable", UnterminatedLiteral: "unterminated-literal", Recoverable: "recoverable"});
-InspectorBackend.registerEvent("Runtime.executionContextCreated", ["context"]);
-InspectorBackend.registerCommand("Runtime.parse", [{"name": "source", "type": "string", "optional": false}], ["result", "message", "range"]);
-InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "contextId", "type": "number", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}], ["result", "internalProperties"]);
-InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Runtime.run", [], []);
-InspectorBackend.registerCommand("Runtime.enable", [], []);
-InspectorBackend.registerCommand("Runtime.disable", [], []);
-
-// Console.
-InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
-InspectorBackend.registerEnum("Console.ConsoleMessageSource", {XML: "xml", Javascript: "javascript", Network: "network", ConsoleAPI: "console-api", Storage: "storage", Appcache: "appcache", Rendering: "rendering", Css: "css", Security: "security", Other: "other"});
-InspectorBackend.registerEnum("Console.ConsoleMessageLevel", {Log: "log", Warning: "warning", Error: "error", Debug: "debug"});
-InspectorBackend.registerEnum("Console.ConsoleMessageType", {Log: "log", Dir: "dir", DirXML: "dirxml", Table: "table", Trace: "trace", Clear: "clear", StartGroup: "startGroup", StartGroupCollapsed: "startGroupCollapsed", EndGroup: "endGroup", Assert: "assert", Timing: "timing", Profile: "profile", ProfileEnd: "profileEnd"});
-InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
-InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
-InspectorBackend.registerEvent("Console.messagesCleared", []);
-InspectorBackend.registerCommand("Console.enable", [], []);
-InspectorBackend.registerCommand("Console.disable", [], []);
-InspectorBackend.registerCommand("Console.clearMessages", [], []);
-InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Console.addInspectedHeapObject", [{"name": "heapObjectId", "type": "number", "optional": false}], []);
-
-// Network.
-InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
-InspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Other: "other"});
-InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse", "type"]);
-InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
-InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
-InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
-InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp", "sourceMapURL"]);
-InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
-InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
-InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
-InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
-InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
-InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
-InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
-InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
-InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
-InspectorBackend.registerCommand("Network.enable", [], []);
-InspectorBackend.registerCommand("Network.disable", [], []);
-InspectorBackend.registerCommand("Network.setUserAgentOverride", [{"name": "userAgent", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
-InspectorBackend.registerCommand("Network.replayXHR", [{"name": "requestId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Network.canClearBrowserCache", [], ["result"]);
-InspectorBackend.registerCommand("Network.clearBrowserCache", [], []);
-InspectorBackend.registerCommand("Network.canClearBrowserCookies", [], ["result"]);
-InspectorBackend.registerCommand("Network.clearBrowserCookies", [], []);
-InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
-
-// Database.
-InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
-InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
-InspectorBackend.registerCommand("Database.enable", [], []);
-InspectorBackend.registerCommand("Database.disable", [], []);
-InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
-InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["columnNames", "values", "sqlError"]);
-
-// IndexedDB.
-InspectorBackend.registerIndexedDBDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "IndexedDB");
-InspectorBackend.registerEnum("IndexedDB.KeyType", {Number: "number", String: "string", Date: "date", Array: "array"});
-InspectorBackend.registerEnum("IndexedDB.KeyPathType", {Null: "null", String: "string", Array: "array"});
-InspectorBackend.registerCommand("IndexedDB.enable", [], []);
-InspectorBackend.registerCommand("IndexedDB.disable", [], []);
-InspectorBackend.registerCommand("IndexedDB.requestDatabaseNames", [{"name": "securityOrigin", "type": "string", "optional": false}], ["databaseNames"]);
-InspectorBackend.registerCommand("IndexedDB.requestDatabase", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}], ["databaseWithObjectStores"]);
-InspectorBackend.registerCommand("IndexedDB.requestData", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}, {"name": "indexName", "type": "string", "optional": false}, {"name": "skipCount", "type": "number", "optional": false}, {"name": "pageSize", "type": "number", "optional": false}, {"name": "keyRange", "type": "object", "optional": true}], ["objectStoreDataEntries", "hasMore"]);
-InspectorBackend.registerCommand("IndexedDB.clearObjectStore", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}], []);
-
-// DOMStorage.
-InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
-InspectorBackend.registerEvent("DOMStorage.domStorageItemsCleared", ["storageId"]);
-InspectorBackend.registerEvent("DOMStorage.domStorageItemRemoved", ["storageId", "key"]);
-InspectorBackend.registerEvent("DOMStorage.domStorageItemAdded", ["storageId", "key", "newValue"]);
-InspectorBackend.registerEvent("DOMStorage.domStorageItemUpdated", ["storageId", "key", "oldValue", "newValue"]);
-InspectorBackend.registerCommand("DOMStorage.enable", [], []);
-InspectorBackend.registerCommand("DOMStorage.disable", [], []);
-InspectorBackend.registerCommand("DOMStorage.getDOMStorageItems", [{"name": "storageId", "type": "object", "optional": false}], ["entries"]);
-InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}], []);
-
-// ApplicationCache.
-InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
-InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
-InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
-InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
-InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
-InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
-InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
-
-// FileSystem.
-InspectorBackend.registerFileSystemDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "FileSystem");
-InspectorBackend.registerCommand("FileSystem.enable", [], []);
-InspectorBackend.registerCommand("FileSystem.disable", [], []);
-InspectorBackend.registerCommand("FileSystem.requestFileSystemRoot", [{"name": "origin", "type": "string", "optional": false}, {"name": "type", "type": "string", "optional": false}], ["errorCode", "root"]);
-InspectorBackend.registerCommand("FileSystem.requestDirectoryContent", [{"name": "url", "type": "string", "optional": false}], ["errorCode", "entries"]);
-InspectorBackend.registerCommand("FileSystem.requestMetadata", [{"name": "url", "type": "string", "optional": false}], ["errorCode", "metadata"]);
-InspectorBackend.registerCommand("FileSystem.requestFileContent", [{"name": "url", "type": "string", "optional": false}, {"name": "readAsText", "type": "boolean", "optional": false}, {"name": "start", "type": "number", "optional": true}, {"name": "end", "type": "number", "optional": true}, {"name": "charset", "type": "string", "optional": true}], ["errorCode", "content", "charset"]);
-InspectorBackend.registerCommand("FileSystem.deleteEntry", [{"name": "url", "type": "string", "optional": false}], ["errorCode"]);
-
-// DOM.
-InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
-InspectorBackend.registerEvent("DOM.documentUpdated", []);
-InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
-InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
-InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
-InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
-InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
-InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
-InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
-InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
-InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
-InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
-InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
-InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "depth", "type": "number", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
-InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["listeners"]);
-InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
-InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}], ["searchId", "resultCount"]);
-InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
-InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.highlightQuad", [{"name": "quad", "type": "object", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "nodeId", "type": "number", "optional": true}, {"name": "objectId", "type": "string", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
-InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.pushNodeByBackendIdToFrontend", [{"name": "backendNodeId", "type": "number", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.releaseBackendNodeIds", [{"name": "nodeGroup", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
-InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
-InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.undo", [], []);
-InspectorBackend.registerCommand("DOM.redo", [], []);
-InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
-InspectorBackend.registerCommand("DOM.focus", [{"name": "nodeId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.setFileInputFiles", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "files", "type": "object", "optional": false}], []);
-
-// CSS.
-InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
-InspectorBackend.registerEnum("CSS.StyleSheetOrigin", {User: "user", UserAgent: "user-agent", Inspector: "inspector", Regular: "regular"});
-InspectorBackend.registerEnum("CSS.CSSPropertyStatus", {Active: "active", Inactive: "inactive", Disabled: "disabled", Style: "style"});
-InspectorBackend.registerEnum("CSS.CSSMediaSource", {MediaRule: "mediaRule", ImportRule: "importRule", LinkedSheet: "linkedSheet", InlineSheet: "inlineSheet"});
-InspectorBackend.registerEnum("CSS.RegionRegionOverset", {Overset: "overset", Fit: "fit", Empty: "empty"});
-InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
-InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
-InspectorBackend.registerEvent("CSS.namedFlowCreated", ["namedFlow"]);
-InspectorBackend.registerEvent("CSS.namedFlowRemoved", ["documentNodeId", "flowName"]);
-InspectorBackend.registerEvent("CSS.regionLayoutUpdated", ["namedFlow"]);
-InspectorBackend.registerCommand("CSS.enable", [], []);
-InspectorBackend.registerCommand("CSS.disable", [], []);
-InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
-InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
-InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["computedStyle"]);
-InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
-InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
-InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
-InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("CSS.setStyleText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "text", "type": "string", "optional": false}], ["style"]);
-InspectorBackend.registerCommand("CSS.setPropertyText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "overwrite", "type": "boolean", "optional": false}], ["style"]);
-InspectorBackend.registerCommand("CSS.toggleProperty", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "disable", "type": "boolean", "optional": false}], ["style"]);
-InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
-InspectorBackend.registerCommand("CSS.addRule", [{"name": "contextNodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
-InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
-InspectorBackend.registerCommand("CSS.forcePseudoState", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("CSS.startSelectorProfiler", [], []);
-InspectorBackend.registerCommand("CSS.stopSelectorProfiler", [], ["profile"]);
-InspectorBackend.registerCommand("CSS.getNamedFlowCollection", [{"name": "documentNodeId", "type": "number", "optional": false}], ["namedFlows"]);
-
-// Timeline.
-InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
-InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
-InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}, {"name": "includeDomCounters", "type": "boolean", "optional": true}, {"name": "includeNativeMemoryStatistics", "type": "boolean", "optional": true}], []);
-InspectorBackend.registerCommand("Timeline.stop", [], []);
-InspectorBackend.registerCommand("Timeline.supportsFrameInstrumentation", [], ["result"]);
-InspectorBackend.registerCommand("Timeline.canMonitorMainThread", [], ["result"]);
-
-// Debugger.
-InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
-InspectorBackend.registerEnum("Debugger.ScopeType", {Global: "global", Local: "local", With: "with", Closure: "closure", Catch: "catch"});
-InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
-InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL", "hasSourceURL"]);
-InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
-InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
-InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
-InspectorBackend.registerEvent("Debugger.resumed", []);
-InspectorBackend.registerCommand("Debugger.causesRecompilation", [], ["result"]);
-InspectorBackend.registerCommand("Debugger.supportsSeparateScriptCompilationAndExecution", [], ["result"]);
-InspectorBackend.registerCommand("Debugger.enable", [], []);
-InspectorBackend.registerCommand("Debugger.disable", [], []);
-InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "locations"]);
-InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "actualLocation"]);
-InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.stepOver", [], []);
-InspectorBackend.registerCommand("Debugger.stepInto", [], []);
-InspectorBackend.registerCommand("Debugger.stepOut", [], []);
-InspectorBackend.registerCommand("Debugger.pause", [], []);
-InspectorBackend.registerCommand("Debugger.resume", [], []);
-InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Debugger.canSetScriptSource", [], ["result"]);
-InspectorBackend.registerCommand("Debugger.setScriptSource", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "scriptSource", "type": "string", "optional": false}, {"name": "preview", "type": "boolean", "optional": true}], ["callFrames", "result"]);
-InspectorBackend.registerCommand("Debugger.restartFrame", [{"name": "callFrameId", "type": "string", "optional": false}], ["callFrames", "result"]);
-InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
-InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
-InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-InspectorBackend.registerCommand("Debugger.compileScript", [{"name": "expression", "type": "string", "optional": false}, {"name": "sourceURL", "type": "string", "optional": false}], ["scriptId", "syntaxErrorMessage"]);
-InspectorBackend.registerCommand("Debugger.runScript", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "contextId", "type": "number", "optional": true}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
-InspectorBackend.registerCommand("Debugger.setVariableValue", [{"name": "scopeNumber", "type": "number", "optional": false}, {"name": "variableName", "type": "string", "optional": false}, {"name": "newValue", "type": "object", "optional": false}, {"name": "callFrameId", "type": "string", "optional": true}, {"name": "functionObjectId", "type": "string", "optional": true}], []);
-
-// DOMDebugger.
-InspectorBackend.registerEnum("DOMDebugger.DOMBreakpointType", {SubtreeModified: "subtree-modified", AttributeModified: "attribute-modified", NodeRemoved: "node-removed"});
-InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
-
-// Profiler.
-InspectorBackend.registerProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Profiler");
-InspectorBackend.registerEnum("Profiler.ProfileHeaderTypeId", {CPU: "CPU", CSS: "CSS", HEAP: "HEAP"});
-InspectorBackend.registerEvent("Profiler.addProfileHeader", ["header"]);
-InspectorBackend.registerEvent("Profiler.addHeapSnapshotChunk", ["uid", "chunk"]);
-InspectorBackend.registerEvent("Profiler.finishHeapSnapshot", ["uid"]);
-InspectorBackend.registerEvent("Profiler.setRecordingProfile", ["isProfiling"]);
-InspectorBackend.registerEvent("Profiler.resetProfiles", []);
-InspectorBackend.registerEvent("Profiler.reportHeapSnapshotProgress", ["done", "total"]);
-InspectorBackend.registerCommand("Profiler.causesRecompilation", [], ["result"]);
-InspectorBackend.registerCommand("Profiler.isSampling", [], ["result"]);
-InspectorBackend.registerCommand("Profiler.hasHeapProfiler", [], ["result"]);
-InspectorBackend.registerCommand("Profiler.enable", [], []);
-InspectorBackend.registerCommand("Profiler.disable", [], []);
-InspectorBackend.registerCommand("Profiler.start", [], []);
-InspectorBackend.registerCommand("Profiler.stop", [], []);
-InspectorBackend.registerCommand("Profiler.getProfileHeaders", [], ["headers"]);
-InspectorBackend.registerCommand("Profiler.getCPUProfile", [{"name": "uid", "type": "number", "optional": false}], ["profile"]);
-InspectorBackend.registerCommand("Profiler.getHeapSnapshot", [{"name": "uid", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Profiler.removeProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Profiler.clearProfiles", [], []);
-InspectorBackend.registerCommand("Profiler.takeHeapSnapshot", [{"name": "reportProgress", "type": "boolean", "optional": true}], []);
-InspectorBackend.registerCommand("Profiler.collectGarbage", [], []);
-InspectorBackend.registerCommand("Profiler.getObjectByHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Profiler.getHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}], ["heapSnapshotObjectId"]);
-
-// HeapProfiler.
-InspectorBackend.registerHeapProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "HeapProfiler");
-InspectorBackend.registerEvent("HeapProfiler.addProfileHeader", ["header"]);
-InspectorBackend.registerEvent("HeapProfiler.addHeapSnapshotChunk", ["uid", "chunk"]);
-InspectorBackend.registerEvent("HeapProfiler.finishHeapSnapshot", ["uid"]);
-InspectorBackend.registerEvent("HeapProfiler.resetProfiles", []);
-InspectorBackend.registerEvent("HeapProfiler.reportHeapSnapshotProgress", ["done", "total"]);
-InspectorBackend.registerCommand("HeapProfiler.hasHeapProfiler", [], ["result"]);
-InspectorBackend.registerCommand("HeapProfiler.getProfileHeaders", [], ["headers"]);
-InspectorBackend.registerCommand("HeapProfiler.getHeapSnapshot", [{"name": "uid", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("HeapProfiler.removeProfile", [{"name": "uid", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("HeapProfiler.clearProfiles", [], []);
-InspectorBackend.registerCommand("HeapProfiler.takeHeapSnapshot", [{"name": "reportProgress", "type": "boolean", "optional": true}], []);
-InspectorBackend.registerCommand("HeapProfiler.collectGarbage", [], []);
-InspectorBackend.registerCommand("HeapProfiler.getObjectByHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("HeapProfiler.getHeapObjectId", [{"name": "objectId", "type": "string", "optional": false}], ["heapSnapshotObjectId"]);
-
-// Worker.
-InspectorBackend.registerWorkerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Worker");
-InspectorBackend.registerEvent("Worker.workerCreated", ["workerId", "url", "inspectorConnected"]);
-InspectorBackend.registerEvent("Worker.workerTerminated", ["workerId"]);
-InspectorBackend.registerEvent("Worker.dispatchMessageFromWorker", ["workerId", "message"]);
-InspectorBackend.registerEvent("Worker.disconnectedFromWorker", []);
-InspectorBackend.registerCommand("Worker.enable", [], []);
-InspectorBackend.registerCommand("Worker.disable", [], []);
-InspectorBackend.registerCommand("Worker.sendMessageToWorker", [{"name": "workerId", "type": "number", "optional": false}, {"name": "message", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("Worker.canInspectWorkers", [], ["result"]);
-InspectorBackend.registerCommand("Worker.connectToWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Worker.disconnectFromWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Worker.setAutoconnectToWorkers", [{"name": "value", "type": "boolean", "optional": false}], []);
-
-// Canvas.
-InspectorBackend.registerCanvasDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Canvas");
-InspectorBackend.registerEvent("Canvas.contextCreated", ["frameId"]);
-InspectorBackend.registerEvent("Canvas.traceLogsRemoved", ["frameId", "traceLogId"]);
-InspectorBackend.registerCommand("Canvas.enable", [], []);
-InspectorBackend.registerCommand("Canvas.disable", [], []);
-InspectorBackend.registerCommand("Canvas.dropTraceLog", [{"name": "traceLogId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Canvas.hasUninstrumentedCanvases", [], ["result"]);
-InspectorBackend.registerCommand("Canvas.captureFrame", [{"name": "frameId", "type": "string", "optional": true}], ["traceLogId"]);
-InspectorBackend.registerCommand("Canvas.startCapturing", [{"name": "frameId", "type": "string", "optional": true}], ["traceLogId"]);
-InspectorBackend.registerCommand("Canvas.stopCapturing", [{"name": "traceLogId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Canvas.getTraceLog", [{"name": "traceLogId", "type": "string", "optional": false}, {"name": "startOffset", "type": "number", "optional": true}, {"name": "maxLength", "type": "number", "optional": true}], ["traceLog"]);
-InspectorBackend.registerCommand("Canvas.replayTraceLog", [{"name": "traceLogId", "type": "string", "optional": false}, {"name": "stepNo", "type": "number", "optional": false}], ["resourceState"]);
-InspectorBackend.registerCommand("Canvas.getResourceInfo", [{"name": "resourceId", "type": "string", "optional": false}], ["resourceInfo"]);
-InspectorBackend.registerCommand("Canvas.getResourceState", [{"name": "traceLogId", "type": "string", "optional": false}, {"name": "resourceId", "type": "string", "optional": false}], ["resourceState"]);
-
-// Input.
-InspectorBackend.registerInputDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Input");
-InspectorBackend.registerCommand("Input.dispatchKeyEvent", [{"name": "type", "type": "string", "optional": false}, {"name": "modifiers", "type": "number", "optional": true}, {"name": "timestamp", "type": "number", "optional": true}, {"name": "text", "type": "string", "optional": true}, {"name": "unmodifiedText", "type": "string", "optional": true}, {"name": "keyIdentifier", "type": "string", "optional": true}, {"name": "windowsVirtualKeyCode", "type": "number", "optional": true}, {"name": "nativeVirtualKeyCode", "type": "number", "optional": true}, {"name": "macCharCode", "type": "number", "optional": true}, {"name": "autoRepeat", "type": "boolean", "optional": true}, {"name": "isKeypad", "type": "boolean", "optional": true}, {"name": "isSystemKey", "type": "boolean", "optional": true}], []);
-InspectorBackend.registerCommand("Input.dispatchMouseEvent", [{"name": "type", "type": "string", "optional": false}, {"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "modifiers", "type": "number", "optional": true}, {"name": "timestamp", "type": "number", "optional": true}, {"name": "button", "type": "string", "optional": true}, {"name": "clickCount", "type": "number", "optional": true}], []);
-
-// LayerTree.
-InspectorBackend.registerLayerTreeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "LayerTree");
-InspectorBackend.registerEvent("LayerTree.layerTreeDidChange", []);
-InspectorBackend.registerCommand("LayerTree.enable", [], []);
-InspectorBackend.registerCommand("LayerTree.disable", [], []);
-InspectorBackend.registerCommand("LayerTree.layersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["layers"]);
-InspectorBackend.registerCommand("LayerTree.reasonsForCompositingLayer", [{"name": "layerId", "type": "string", "optional": false}], ["compositingReasons"]);
diff --git a/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.js b/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.js
deleted file mode 100644
index a540595d5..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorFrontendAPI.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-InspectorFrontendAPI = {
-    _loaded: false,
-
-    _pendingCommands: [],
-
-    savedURL: function(url)
-    {
-        // FIXME: Not implemented.
-    },
-
-    appendedToURL: function(url)
-    {
-        // FIXME: Not implemented.
-    },
-
-    isDebuggingEnabled: function()
-    {
-        // FIXME: Not implemented.
-        return false;
-    },
-
-    setDebuggingEnabled: function(enabled)
-    {
-        // FIXME: Not implemented.
-    },
-
-    isTimelineProfilingEnabled: function()
-    {
-        return WebInspector.timelineManager.recording;
-    },
-
-    setTimelineProfilingEnabled: function(enabled)
-    {
-        if (enabled) {
-            WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.instrumentSidebarPanel;
-            WebInspector.instrumentSidebarPanel.showTimeline();
-            WebInspector.timelineManager.startRecording();
-        } else {
-            WebInspector.timelineManager.stopRecording();
-        }
-    },
-
-    isProfilingJavaScript: function()
-    {
-        return WebInspector.profileManager.isProfilingJavaScript();
-    },
-
-    startProfilingJavaScript: function()
-    {
-        WebInspector.profileManager.startProfilingJavaScript();
-    },
-
-    stopProfilingJavaScript: function()
-    {
-        WebInspector.instrumentSidebarPanel.show();
-        WebInspector.profileManager.stopProfilingJavaScript();
-    },
-
-    setDockSide: function(side)
-    {
-        WebInspector.updateDockedState(side);
-    },
-
-    showConsole: function()
-    {
-        WebInspector.showConsoleView();
-
-        WebInspector.quickConsole.prompt.focus();
-
-        // If the page is still loading, focus the quick console again after tabindex autofocus.
-        if (document.readyState !== "complete")
-            document.addEventListener("readystatechange", this);
-    },
-
-    handleEvent: function(event)
-    {
-        console.assert(event.type === "readystatechange");
-
-        if (document.readyState === "complete") {
-            WebInspector.quickConsole.prompt.focus();
-            document.removeEventListener("readystatechange", this);
-        }
-    },
-
-    showResources: function()
-    {
-        WebInspector.ignoreLastContentCookie = true;
-        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
-        WebInspector.navigationSidebar.collapsed = false;
-    },
-
-    showMainResourceForFrame: function(frameIdentifier)
-    {
-        WebInspector.ignoreLastContentCookie = true;
-        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
-        WebInspector.resourceSidebarPanel.showSourceCodeForFrame(frameIdentifier, true);
-    },
-
-    setDockingUnavailable: function(unavailable)
-    {
-        // Not used.
-    },
-
-    contextMenuItemSelected: function(id)
-    {
-        WebInspector.contextMenuItemSelected(id);
-    },
-
-    contextMenuCleared: function()
-    {
-        WebInspector.contextMenuCleared();
-    },
-
-    dispatchMessageAsync: function(messageObject)
-    {
-        WebInspector.dispatchMessageFromBackend(messageObject);
-    },
-
-    dispatchMessage: function(messageObject)
-    {
-        InspectorBackend.dispatch(messageObject);
-    },
-
-    dispatch: function(signature)
-    {
-        if (!InspectorFrontendAPI._loaded) {
-            InspectorFrontendAPI._pendingCommands.push(signature);
-            return null;
-        }
-
-        var methodName = signature.shift();
-        return InspectorFrontendAPI[methodName].apply(InspectorFrontendAPI, signature);
-    },
-
-    loadCompleted: function()
-    {
-        InspectorFrontendAPI._loaded = true;
-
-        for (var i = 0; i < InspectorFrontendAPI._pendingCommands.length; ++i)
-            InspectorFrontendAPI.dispatch(InspectorFrontendAPI._pendingCommands[i]);
-
-        InspectorFrontendAPI._pendingCommands = [];
-    }
-};
diff --git a/Source/WebInspectorUI/UserInterface/InspectorFrontendHostStub.js b/Source/WebInspectorUI/UserInterface/InspectorFrontendHostStub.js
deleted file mode 100644
index 19b3fa2bb..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorFrontendHostStub.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- * Copyright (C) 2009 Google Inc. All rights reserved.
- * Copyright (C) 2013 Seokju Kwon (seokju.kwon@gmail.com)
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-if (!window.InspectorFrontendHost) {
-
-    WebInspector.InspectorFrontendHostStub = function()
-    {
-        this._attachedWindowHeight = 0;
-    }
-
-    WebInspector.InspectorFrontendHostStub.prototype = {
-
-        bringToFront: function()
-        {
-            this._windowVisible = true;
-        },
-
-        closeWindow: function()
-        {
-            this._windowVisible = false;
-        },
-
-        requestSetDockSide: function(side)
-        {
-            InspectorFrontendAPI.setDockSide(side);
-        },
-
-        setAttachedWindowHeight: function(height)
-        {
-        },
-
-        setAttachedWindowWidth: function(width)
-        {
-        },
-
-        setToolbarHeight: function(width)
-        {
-        },
-
-        moveWindowBy: function(x, y)
-        {
-        },
-
-        loaded: function()
-        {
-        },
-
-        localizedStringsURL: function()
-        {
-            return undefined;
-        },
-
-        inspectedURLChanged: function(title)
-        {
-            document.title = title;
-        },
-
-        copyText: function(text)
-        {
-            this._textToCopy = text;
-            if (!document.execCommand("copy"))
-                console.error("Clipboard access is denied");
-        },
-
-        openInNewTab: function(url)
-        {
-            window.open(url, "_blank");
-        },
-
-        save: function(url, content, forceSaveAs)
-        {
-        },
-
-        sendMessageToBackend: function(message)
-        {
-            if (WebInspector.socket)
-                WebInspector.socket.send(message);
-        },
-
-        loadResourceSynchronously: function(url)
-        {
-            var xhr = new XMLHttpRequest();
-            xhr.open("GET", url, false);
-            xhr.send(null);
-
-            if (xhr.status === 200)
-                return xhr.responseText;
-            return null;
-        }
-    }
-
-    InspectorFrontendHost = new WebInspector.InspectorFrontendHostStub();
-}
-
diff --git a/Source/WebInspectorUI/UserInterface/InspectorObserver.js b/Source/WebInspectorUI/UserInterface/InspectorObserver.js
deleted file mode 100644
index 59a4115bd..000000000
--- a/Source/WebInspectorUI/UserInterface/InspectorObserver.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.InspectorObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.InspectorObserver.prototype = {
-    constructor: WebInspector.InspectorObserver,
-
-    // Events defined by the "Inspector" domain (see WebCore/inspector/Inspector.json).
-
-    evaluateForTestInFrontend: function(testCallId, script)
-    {
-        // FIXME: Not implemented.
-    },
-
-    inspect: function(payload, hints)
-    {
-        var remoteObject = WebInspector.RemoteObject.fromPayload(payload);
-        if (remoteObject.subtype === "node") {
-            WebInspector.domTreeManager.inspectNodeObject(remoteObject);
-            WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
-            return;
-        }
-
-        if (hints.databaseId)
-            WebInspector.storageManager.inspectDatabase(hints.databaseId);
-        else if (hints.domStorageId)
-            WebInspector.storageManager.inspectDOMStorage(hints.domStorageId);
-
-        WebInspector.navigationSidebar.selectedSidebarPanel = WebInspector.resourceSidebarPanel;
-
-        remoteObject.release();
-    },
-
-    detached: function(reason)
-    {
-        // FIXME: Not implemented.
-    }
-};
-
-WebInspector.InspectorObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/InstrumentIcons.css b/Source/WebInspectorUI/UserInterface/InstrumentIcons.css
deleted file mode 100644
index 6ccde5b2c..000000000
--- a/Source/WebInspectorUI/UserInterface/InstrumentIcons.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.network-icon .icon {
-    content: -webkit-image-set(url(Images/Network.png) 1x, url(Images/Network@2x.png) 2x);
-}
-
-.colors-icon .icon {
-    content: -webkit-image-set(url(Images/Colors.png) 1x, url(Images/Colors@2x.png) 2x);
-}
-
-.script-icon .icon {
-    content: -webkit-image-set(url(Images/Script.png) 1x, url(Images/Script@2x.png) 2x);
-}
-
-.stopwatch-icon .icon {
-    content: -webkit-image-set(url(Images/Stopwatch.png) 1x, url(Images/Stopwatch@2x.png) 2x);
-}
-
-.profile-icon .icon {
-    content: -webkit-image-set(url(Images/Profile.png) 1x, url(Images/Profile@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css
deleted file mode 100644
index a6b7b2373..000000000
--- a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar > .panel.instrument > .title-bar {
-    position: absolute;
-    left: 0;
-    right: 0;
-
-    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
-    border-bottom: 1px solid rgb(179, 179, 179);
-
-    height: 22px;
-    padding: 4px 6px;
-
-    font-size: 11px;
-    font-family: "Lucida Grande", sans-serif;
-
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.sidebar > .panel.instrument > .title-bar.timelines {
-    top: 0;
-}
-
-.sidebar > .panel.instrument > .title-bar > .record-glyph {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 21px;
-    height: 21px;
-    padding: 0;
-    border: none;
-    outline: none;
-    color: transparent;
-    overflow: hidden;
-    
-    -webkit-appearance: none;
-
-    background-color: transparent;
-    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x);
-    background-repeat: no-repeat;
-    background-size: 21px 21px;
-}
-
-.sidebar > .panel.instrument > .title-bar > .record-glyph.recording {
-    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x);
-}
-
-.sidebar > .panel.instrument > .title-bar > .record-glyph:hover {
-    background-image: -webkit-image-set(url(Images/RecordingHovered.png) 1x, url(Images/RecordingHovered@2x.png) 2x);
-}
-
-.sidebar > .panel.instrument > .title-bar > .record-glyph.recording:hover {
-    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x);
-}
-
-.sidebar > .panel.instrument > .title-bar > .record-glyph.forced {
-    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x) !important;
-}
-
-.sidebar > .panel.instrument > .title-bar > .record-glyph.recording.forced {
-    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x) !important;
-}
-
-.sidebar > .panel.instrument > .title-bar > .record-status {
-    position: absolute;
-    top: 0;
-    right: 21px;
-    line-height: 20px;
-    color: rgb(76, 76, 76);
-}
-
-.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines {
-    position: absolute;
-    top: 22px;
-    left: 0;
-    right: 0;
-    height: 78px;
-}
-
-.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item:not(:first-child):not(.selected) {
-    border-top-color: rgba(0, 0, 0, 0.1);
-}
-
-.sidebar > .panel.instrument > .navigation-sidebar-panel-content-tree-outline.timelines .item.selected + .item {
-    border-top-color: rgba(0, 0, 0, 0.4);
-}
-
-.sidebar > .panel.instrument > .title-bar.profiles {
-    top: 100px;
-    border-top: 1px solid rgb(179, 179, 179);
-    height: 23px;
-}
-
-.sidebar > .panel.instrument > .content,
-.sidebar > .panel.instrument > .empty-content-placeholder {
-    top: 123px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js b/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js
deleted file mode 100644
index 641e8bb6c..000000000
--- a/Source/WebInspectorUI/UserInterface/InstrumentSidebarPanel.js
+++ /dev/null
@@ -1,500 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.InstrumentSidebarPanel = function()
-{
-    WebInspector.NavigationSidebarPanel.call(this, "instrument", WebInspector.UIString("Timelines"), "Images/NavigationItemStopwatch.pdf", "2");
-
-    this.filterBar.placeholder = WebInspector.UIString("Filter Profile List");
-
-    var timelinesTitleBarElement = document.createElement("div");
-    timelinesTitleBarElement.textContent = WebInspector.UIString("Timelines");
-    timelinesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.TitleBarStyleClass);
-    timelinesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.TimelinesTitleBarStyleClass);
-    this.element.appendChild(timelinesTitleBarElement);
-
-    this._recordGlyphElement = document.createElement("div");
-    this._recordGlyphElement.className = WebInspector.InstrumentSidebarPanel.RecordGlyphStyleClass;
-    this._recordGlyphElement.addEventListener("mouseover", this._recordGlyphMousedOver.bind(this));
-    this._recordGlyphElement.addEventListener("mouseout", this._recordGlyphMousedOut.bind(this));
-    this._recordGlyphElement.addEventListener("click", this._recordGlyphClicked.bind(this));
-    timelinesTitleBarElement.appendChild(this._recordGlyphElement);
-
-    this._recordStatusElement = document.createElement("div");
-    this._recordStatusElement.className = WebInspector.InstrumentSidebarPanel.RecordStatusStyleClass;
-    timelinesTitleBarElement.appendChild(this._recordStatusElement);
-
-    var timelinesTreeOutlineElement = document.createElement("ol");
-    timelinesTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);
-    timelinesTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName);
-    timelinesTreeOutlineElement.classList.add(WebInspector.InstrumentSidebarPanel.TimelinesTreeOutlineStyleClass);
-    this.element.appendChild(timelinesTreeOutlineElement);
-
-    this._timelinesTreeOutline = new TreeOutline(timelinesTreeOutlineElement);
-    this._timelinesTreeOutline.allowsRepeatSelection = true;
-
-    this._timelinesObject = new WebInspector.TimelinesObject;
-
-    this._timelinesTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.StopwatchIconStyleClass, WebInspector.UIString("Timelines"), null, this._timelinesObject);
-
-    var networkTimelineTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass, WebInspector.UIString("Network Requests"), null, WebInspector.TimelineRecord.Type.Network);
-    networkTimelineTreeElement.small = true;
-    networkTimelineTreeElement.twoLine = true;
-    this._timelinesTreeOutline.appendChild(networkTimelineTreeElement);
-
-    // Select by default, but don't allow focus or onselect to prevent showing the content view.
-    networkTimelineTreeElement.select(true, false, true);
-
-    var layoutTimelineTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass, WebInspector.UIString("Layout & Rendering"), null, WebInspector.TimelineRecord.Type.Layout);
-    layoutTimelineTreeElement.small = true;
-    layoutTimelineTreeElement.twoLine = true;
-    this._timelinesTreeOutline.appendChild(layoutTimelineTreeElement);
-
-    var scriptTimelineTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass, WebInspector.UIString("JavaScript & Events"), null, WebInspector.TimelineRecord.Type.Script);
-    scriptTimelineTreeElement.small = true;
-    scriptTimelineTreeElement.twoLine = true;
-    this._timelinesTreeOutline.appendChild(scriptTimelineTreeElement);
-
-    this._timelineTreeElementMap = {};
-    this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Network] = networkTimelineTreeElement;
-    this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Layout] = layoutTimelineTreeElement;
-    this._timelineTreeElementMap[WebInspector.TimelineRecord.Type.Script] = scriptTimelineTreeElement;
-
-    var profilesTitleBarElement = document.createElement("div");
-    profilesTitleBarElement.textContent = WebInspector.UIString("Profiles");
-    profilesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.TitleBarStyleClass);
-    profilesTitleBarElement.classList.add(WebInspector.InstrumentSidebarPanel.ProfilesTitleBarStyleClass);
-    this.element.appendChild(profilesTitleBarElement);
-    
-    this._recordProfileGlyphElement = document.createElement("select");
-    this._recordProfileGlyphElement.className = WebInspector.InstrumentSidebarPanel.RecordGlyphStyleClass;
-    this._recordProfileGlyphElement.addEventListener("mouseover", this._recordProfileGlyphMousedOver.bind(this));
-    this._recordProfileGlyphElement.addEventListener("mouseout", this._recordProfileGlyphMousedOut.bind(this));
-    this._recordProfileGlyphElement.addEventListener("mousedown", this._recordProfileGlyphMousedDown.bind(this));
-    this._recordProfileGlyphElement.addEventListener("click", this._recordProfileGlyphClicked.bind(this));
-    this._recordProfileGlyphElement.addEventListener("change", this._profileTypeWasSelected.bind(this));
-
-    var startJavaScriptProfileOption = document.createElement("option");
-    startJavaScriptProfileOption.textContent = WebInspector.UIString("Start JavaScript Profile");
-    startJavaScriptProfileOption.value = WebInspector.InstrumentSidebarPanel.StartJavaScriptProfileValue;
-    startJavaScriptProfileOption.selected = false;
-    
-    var startCSSSelectorProfileOption = document.createElement("option");
-    startCSSSelectorProfileOption.textContent = WebInspector.UIString("Start CSS Selector Profile");
-    startCSSSelectorProfileOption.value = WebInspector.InstrumentSidebarPanel.StartCSSSelectorProfileValue;
-    startCSSSelectorProfileOption.selected = false;
-    
-    this._recordProfileGlyphElement.add(startJavaScriptProfileOption);
-    this._recordProfileGlyphElement.add(startCSSSelectorProfileOption);
-
-    profilesTitleBarElement.appendChild(this._recordProfileGlyphElement);
-
-    this._recordProfileGlyphElement.selectedIndex = -1;
-    
-    this._recordProfileStatusElement = document.createElement("div");
-    this._recordProfileStatusElement.className = WebInspector.InstrumentSidebarPanel.RecordStatusStyleClass;
-    profilesTitleBarElement.appendChild(this._recordProfileStatusElement);
-
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStarted, this._recordingStarted, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStopped, this._recordingStopped, this);
-
-    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfileWasAdded, this._profileWasAdded, this);
-    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfileWasUpdated, this._profileWasUpdated, this);
-    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.Cleared, this._profilesCleared, this);
-    
-    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingStarted, this._profilingStarted, this);
-    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingEnded, this._profilingEnded, this);
-    WebInspector.profileManager.addEventListener(WebInspector.ProfileManager.Event.ProfilingInterrupted, this._profilingInterrupted, this);
-
-    this.updateEmptyContentPlaceholder(WebInspector.UIString("No Recorded Profiles"));
-    
-    // Maps from profile titles -> tree elements.
-    this._profileTreeElementMap = {};
-
-    this._timelinesTreeOutline.onselect = this._timelinesTreeElementSelected.bind(this);
-    this.contentTreeOutline.onselect = this._profileSelected.bind(this);
-};
-
-WebInspector.InstrumentSidebarPanel.TitleBarStyleClass = "title-bar";
-WebInspector.InstrumentSidebarPanel.TimelinesTitleBarStyleClass = "timelines";
-WebInspector.InstrumentSidebarPanel.TimelinesTreeOutlineStyleClass = "timelines";
-WebInspector.InstrumentSidebarPanel.RecordGlyphStyleClass = "record-glyph";
-WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass = "recording";
-WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass = "forced";
-WebInspector.InstrumentSidebarPanel.RecordStatusStyleClass = "record-status";
-WebInspector.InstrumentSidebarPanel.ProfilesTitleBarStyleClass = "profiles";
-WebInspector.InstrumentSidebarPanel.StopwatchIconStyleClass = "stopwatch-icon";
-WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass = "network-icon";
-WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass = "colors-icon";
-WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass = "script-icon";
-WebInspector.InstrumentSidebarPanel.ProfileIconStyleClass = "profile-icon";
-WebInspector.InstrumentSidebarPanel.StartJavaScriptProfileValue = "start-javascript-profile";
-WebInspector.InstrumentSidebarPanel.StartCSSSelectorProfileValue = "start-css-selector-profile";
-
-WebInspector.InstrumentSidebarPanel.prototype = {
-    constructor: WebInspector.InstrumentSidebarPanel,
-
-    // Public
-
-    treeElementForRepresentedObject: function(representedObject)
-    {
-        if (representedObject instanceof WebInspector.TimelinesObject)
-            return this._timelinesTreeElement;
-        return this.contentTreeOutline.getCachedTreeElement(representedObject);
-    },
-
-    showTimeline: function()
-    {
-        WebInspector.contentBrowser.showContentViewForRepresentedObject(this._timelinesObject);
-    },
-
-    showTimelineForRecordType: function(type)
-    {
-        var treeElementToSelect = this._timelineTreeElementMap[type];
-        if (!treeElementToSelect)
-            return;
-
-        treeElementToSelect.select(true, true);
-    },
-
-    cookieForContentView: function(contentView)
-    {
-        if (contentView instanceof WebInspector.TimelinesContentView)
-            return {timeline: true};
-        return null;
-    },
-
-    showContentViewForCookie: function(contentViewCookie)
-    {
-        if (!contentViewCookie)
-            return;
-
-        if (contentViewCookie.timeline)
-            this.showTimeline();
-    },
-
-    showProfile: function(type, title)
-    {
-        var profileTreeElements = this.contentTreeOutline.children;
-        for (var i = 0; i < profileTreeElements.length; ++i) {
-            var treeElement = profileTreeElements[i];
-            var profile = treeElement.representedObject;
-            if (profile.type === type && profile.title === title) {
-                treeElement.revealAndSelect();
-                return;
-            }
-        }
-    },
-
-    shown: function()
-    {
-        // Reselect the selected tree element to cause the content view to be shown as well. <rdar://problem/10854727>
-        var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
-        if (selectedTreeElement)
-            selectedTreeElement.select(true, true);
-
-        WebInspector.NavigationSidebarPanel.prototype.shown.call(this);
-    },
-
-    // Private
-
-    _timelinesTreeElementSelected: function(treeElement, selectedByUser)
-    {
-        if (this._timelineTreeElementMap[treeElement.representedObject] !== treeElement)
-            return;
-
-        // Deselect any tree element in the main content tree outline to prevent two selections in the sidebar.
-        var selectedTreeElement = this.contentTreeOutline.selectedTreeElement;
-        if (selectedTreeElement)
-            selectedTreeElement.deselect();
-
-        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(this._timelinesObject);
-        contentView.showTimelineForRecordType(treeElement.representedObject);
-        WebInspector.contentBrowser.showContentView(contentView);
-    },
-
-    _profilingStarted: function(event)
-    {
-        this._recordProfileStatusElement.textContent = WebInspector.UIString("Profiling");
-        this._recordProfileGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
-    },
-
-    _profilingEnded: function(event)
-    {
-        // Immediately create a view for this profile so that it is archived across page loads.
-        if (event && event.data.profile) {
-            WebInspector.contentBrowser.contentViewForRepresentedObject(event.data.profile);
-            var treeElement = this.treeElementForRepresentedObject(event.data.profile);
-            if (treeElement) {
-                treeElement.status = null;
-                if (!event.data.fromConsole)
-                    treeElement.select();
-            }
-        }
-
-        this._recordProfileStatusElement.textContent = "";
-        this._recordProfileGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
-    },
-
-    _profilingInterrupted: function(event)
-    {
-        this._profilingEnded();
-
-        var profile = event.data.profile;
-        console.assert(profile instanceof WebInspector.ProfileObject);
-
-        var treeElement = this.treeElementForRepresentedObject(profile);
-        console.assert(treeElement);
-        if (!treeElement)
-            return;
-
-        treeElement.treeOutline.removeChild(treeElement);
-    },
-
-    _recordProfileGlyphMousedOver: function(event)
-    {
-        this._recordProfileGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.profileManager.isProfilingJavaScript() || WebInspector.profileManager.isProfilingCSSSelectors())
-            this._recordProfileStatusElement.textContent = WebInspector.UIString("Stop Profiling");
-        else
-            this._recordProfileStatusElement.textContent = WebInspector.UIString("Start Profiling");
-    },
-
-    _recordProfileGlyphMousedOut: function(event)
-    {
-        this._recordProfileGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.profileManager.isProfilingJavaScript())
-            this._recordProfileStatusElement.textContent = WebInspector.UIString("Profiling");
-        else
-            this._recordProfileStatusElement.textContent = "";
-    },
-    
-    _recordProfileGlyphMousedDown: function(event)
-    {
-        // Don't show any option as selected in the profile selector.
-        this._recordProfileGlyphElement.selectedIndex = -1;
-        
-        // We don't want to show the select if the user is currently profiling. In that case,
-        // the user should just be able to click the record button to stop profiling.
-        if (WebInspector.profileManager.isProfilingJavaScript() || WebInspector.profileManager.isProfilingCSSSelectors())
-            event.preventDefault();
-        else {
-            // When a select is opened, a click event will be fired when the select is closed,
-            // whether or not anything was selected. We want to ignore that click, because it
-            // would instantly stop profiling.
-            this._shouldIgnoreRecordProfileGlyphClick = true;
-        }
-    },
-
-    _recordProfileGlyphClicked: function(event)
-    {
-        // Add forced class to prevent the glyph from showing a confusing status after click.
-        this._recordProfileGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (this._shouldIgnoreRecordProfileGlyphClick) {
-            delete this._shouldIgnoreRecordProfileGlyphClick;
-            return;
-        }
-
-        if (WebInspector.profileManager.isProfilingJavaScript())
-            WebInspector.profileManager.stopProfilingJavaScript();
-        if (WebInspector.profileManager.isProfilingCSSSelectors())
-            WebInspector.profileManager.stopProfilingCSSSelectors();
-    },
-
-    _profileTypeWasSelected: function(event)
-    {
-        var selectedIndex = this._recordProfileGlyphElement.selectedIndex;
-        if (selectedIndex === -1)
-            return;
-        
-        var selectedValue = this._recordProfileGlyphElement.options[selectedIndex].value;
-        if (selectedValue === WebInspector.InstrumentSidebarPanel.StartJavaScriptProfileValue)
-            WebInspector.profileManager.startProfilingJavaScript();
-        else {
-            console.assert(selectedValue === WebInspector.InstrumentSidebarPanel.StartCSSSelectorProfileValue);
-            WebInspector.profileManager.startProfilingCSSSelectors();
-        }
-        
-    },
-
-    _recordingStarted: function(event)
-    {
-        this._recordStatusElement.textContent = WebInspector.UIString("Recording");
-        this._recordGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
-    },
-
-    _recordingStopped: function(event)
-    {
-        this._recordStatusElement.textContent = "";
-        this._recordGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingStyleClass);
-    },
-
-    _recordGlyphMousedOver: function(event)
-    {
-        this._recordGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.timelineManager.recording)
-            this._recordStatusElement.textContent = WebInspector.UIString("Stop Recording");
-        else
-            this._recordStatusElement.textContent = WebInspector.UIString("Start Recording");
-    },
-
-    _recordGlyphMousedOut: function(event)
-    {
-        this._recordGlyphElement.classList.remove(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.timelineManager.recording)
-            this._recordStatusElement.textContent = WebInspector.UIString("Recording");
-        else
-            this._recordStatusElement.textContent = "";
-    },
-
-    _recordGlyphClicked: function(event)
-    {
-        // Add forced class to prevent the glyph from showing a confusing status after click.
-        this._recordGlyphElement.classList.add(WebInspector.InstrumentSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
-        if (WebInspector.timelineManager.recording)
-            WebInspector.timelineManager.stopRecording();
-        else
-            WebInspector.timelineManager.startRecording();
-    },
-    
-    _titleForProfile: function(profile)
-    {
-        console.assert(profile instanceof WebInspector.ProfileObject);
-
-        var title = profile.title;
-        if (title.startsWith(WebInspector.ProfileManager.UserInitiatedProfileName)) {
-            var jsProfilesCount = 0;
-            var profiles = this.contentTreeOutline.children;
-            for (var i = 0; i < profiles.length; ++i) {
-                if (profiles[i].representedObject instanceof WebInspector.JavaScriptProfileObject)
-                    jsProfilesCount++;
-            }
-            if (profile.recording)
-                jsProfilesCount++;
-            title = WebInspector.UIString("JavaScript Profile %d").format(jsProfilesCount);
-        }
-        
-        return title;
-    },
-    
-    _profileWasAdded: function(event)
-    {
-        var profile = event.data.profile;
-        var title = profile.title;
-
-        console.assert(profile instanceof WebInspector.ProfileObject);
-
-        var profileTreeElement = new WebInspector.GeneralTreeElement(WebInspector.InstrumentSidebarPanel.ProfileIconStyleClass, this._titleForProfile(profile), null, profile, false);
-        profileTreeElement.small = true;
-        if (profile.recording)
-            profileTreeElement.status = new WebInspector.IndeterminateProgressSpinner().element;
-
-        if (!this._profileTreeElementMap[title]) {
-            // We don't want to track the placement of the "Recording..." title. All of the profiles collected from
-            // the Develop menu will be uniquely named, so we don't have to worry about creating folders for them.
-            if (!profile.recording)
-                this._profileTreeElementMap[title] = profileTreeElement;
-
-            this.contentTreeOutline.insertChild(profileTreeElement, 0);
-            return;
-        }
-        
-        if (this._profileTreeElementMap[title] instanceof WebInspector.FolderTreeElement) {
-            profileTreeElement.mainTitle = WebInspector.UIString("Run %d").format(this._profileTreeElementMap[title].children.length + 1);
-            this._profileTreeElementMap[title].appendChild(profileTreeElement);
-            return;
-        }
-
-        if (this._profileTreeElementMap[title] instanceof WebInspector.GeneralTreeElement) {
-            var profileFolderElement = new WebInspector.FolderTreeElement(title, null, null);
-            var oldProfileTreeElement = this._profileTreeElementMap[title];
-            
-            var profileIndex = this.contentTreeOutline.children.indexOf(oldProfileTreeElement);
-            this.contentTreeOutline.removeChild(oldProfileTreeElement);
-            
-            this.contentTreeOutline.insertChild(profileFolderElement, profileIndex);
-            
-            // Add the old tree element with the same title as the profile that was added, and the
-            // profile that was added to the folder we are creating to track all profiles with the
-            // given title. Add the old one as Run 1, and the new one as Run 2. Any additional profiles
-            // with the same title will be added as Run n.
-            oldProfileTreeElement.mainTitle = WebInspector.UIString("Run %d").format(1);
-            profileTreeElement.mainTitle = WebInspector.UIString("Run %d").format(2);
-            
-            profileFolderElement.appendChild(oldProfileTreeElement);
-            profileFolderElement.appendChild(profileTreeElement);
-
-            this._profileTreeElementMap[title] = profileFolderElement;
-            return;
-        }
-    },
-
-    _profileWasUpdated: function(event)
-    {
-        var profile = event.data.profile;
-        console.assert(profile instanceof WebInspector.ProfileObject);
-
-        var treeElement = this.treeElementForRepresentedObject(profile);
-        console.assert(treeElement);
-        if (!treeElement)
-            return;
-
-        // Update the title of the tree element.
-        treeElement.mainTitle = this._titleForProfile(profile);
-    },
-
-    _profilesCleared: function(event)
-    {
-        this.contentTreeOutline.removeChildren();
-        this._profileTreeElementMap = {};
-        
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.JavaScriptProfileView);
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.CSSSelectorProfileView);
-        
-        this.updateEmptyContentPlaceholder(WebInspector.UIString("No Recorded Profiles"));
-    },
-
-    _profileSelected: function(treeElement, selectedByUser)
-    {
-        console.assert(treeElement.representedObject instanceof WebInspector.ProfileObject);
-        if (!(treeElement.representedObject instanceof WebInspector.ProfileObject))
-            return;
-
-        // Deselect any tree element in the timelines tree outline to prevent two selections in the sidebar.
-        var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
-        if (selectedTreeElement)
-            selectedTreeElement.deselect();
-
-        WebInspector.contentBrowser.showContentViewForRepresentedObject(treeElement.representedObject);
-    }
-};
-
-WebInspector.InstrumentSidebarPanel.prototype.__proto__ = WebInspector.NavigationSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/IssueManager.js b/Source/WebInspectorUI/UserInterface/IssueManager.js
deleted file mode 100644
index f70e5aceb..000000000
--- a/Source/WebInspectorUI/UserInterface/IssueManager.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.IssueManager = function()
-{
-    WebInspector.Object.call(this);
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.ActiveLogCleared, this._activeLogCleared, this);
-
-    this.initialize();
-}
-
-WebInspector.IssueManager.Event = {
-    IssueWasAdded: "issue-manager-issue-was-added",
-    Cleared: "issue-manager-cleared"
-};
-
-WebInspector.IssueManager.prototype = {
-    constructor: WebInspector.IssueManager,
-
-    // Public
-
-    initialize: function()
-    {
-        this._issues = [];
-
-        this.dispatchEventToListeners(WebInspector.IssueManager.Event.Cleared);
-    },
-
-    issueWasAdded: function(source, level, text, url, lineNumber, parameters)
-    {
-        var modifiedLineNumber;
-        if (lineNumber) {
-            console.assert(typeof lineNumber === "number");
-            modifiedLineNumber = lineNumber - 1;
-        }
-
-        var issue = new WebInspector.IssueMessage(source, level, text, url, modifiedLineNumber, parameters);
-        this._issues.push(issue);
-
-        this.dispatchEventToListeners(WebInspector.IssueManager.Event.IssueWasAdded, {issue: issue});
-    },
-
-    issuesForSourceCode: function(sourceCode)
-    {
-        var issues = [];
-
-        for (var i = 0; i < this._issues.length; ++i) {
-            // FIXME: Support issues based on Script identifiers too.
-            var issue = this._issues[i];
-            if (issue.url === sourceCode.url)
-                issues.push(issue);
-        }
-
-        return issues;
-    },
-
-    // Private
-
-    _activeLogCleared: function(event)
-    {
-        this.initialize();
-    },
-
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (!event.target.isMainFrame())
-            return;
-
-        this.initialize();
-    }
-};
-
-WebInspector.IssueManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/IssueMessage.js b/Source/WebInspectorUI/UserInterface/IssueMessage.js
deleted file mode 100644
index 6894175f5..000000000
--- a/Source/WebInspectorUI/UserInterface/IssueMessage.js
+++ /dev/null
@@ -1,242 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.IssueMessage = function(source, level, text, url, lineNumber, parameters)
-{
-    WebInspector.Object.call(this);
-
-    this._level = level;
-    this._text = text;
-
-    // FIXME <http://webkit.org/b/76404>: Remove the string equality checks for undefined
-    // once we don't get that value anymore from WebCore.
-
-    // FIXME: If the URL is undefined, get the URL from the stacktrace.
-    if (url && url !== "undefined")
-        this._url = url;
-
-    if (typeof lineNumber === "number" && lineNumber >= 0)
-        this._lineNumber = lineNumber;
-
-    if (parameters && parameters !== "undefined") {
-        this._parameters = [];
-        for (var i = 0; i < parameters.length; ++i) {
-            if (parameters[i] instanceof WebInspector.RemoteObject) {
-                this._parameters.push(parameters[i]);
-                continue;
-            }
-
-            if (typeof parameters[i] === "object")
-                this._parameters.push(WebInspector.RemoteObject.fromPayload(parameters[i]));
-            else
-                this._parameters.push(WebInspector.RemoteObject.fromPrimitiveValue(parameters[i]));
-        }
-    }
-
-    this._formatTextIfNecessary();
-
-    switch (source) {
-    case "javascript":
-        // FIXME: It would be nice if we had this information (the specific type of JavaScript error)
-        // as part of the data passed from WebCore, instead of having to determine it ourselves.
-        var prefixRegex = /^([^:]+): (?:DOM Exception \d+: )?/;
-        var match = prefixRegex.exec(this._text);
-        if (match && match[1] in WebInspector.IssueMessage.Type._prefixTypeMap) {
-            this._type = WebInspector.IssueMessage.Type._prefixTypeMap[match[1]];
-            this._text = this._text.substring(match[0].length);
-        } else
-            this._type = WebInspector.IssueMessage.Type.OtherIssue;
-        break;
-
-    case "html":
-    case "css":
-    case "wml":
-    case "xml":
-        this._type = WebInspector.IssueMessage.Type.PageIssue;
-        break;
-
-    case "network":
-        this._type = WebInspector.IssueMessage.Type.NetworkIssue;
-        break;
-
-    case "console-api":
-    case "other":
-        this._type = WebInspector.IssueMessage.Type.OtherIssue;
-        break;
-
-    default:
-        console.error("Unknown issue source:", source);
-        this._type = WebInspector.IssueMessage.Type.OtherIssue;
-    }
-}
-
-WebInspector.IssueMessage.Level = {
-    Error: "error",
-    Warning: "warning"
-};
-
-WebInspector.IssueMessage.Type = {
-    SemanticIssue: "issue-message-type-semantic-issue",
-    RangeIssue: "issue-message-type-range-issue",
-    ReferenceIssue: "issue-message-type-reference-issue",
-    TypeIssue: "issue-message-type-type-issue",
-    PageIssue: "issue-message-type-page-issue",
-    NetworkIssue: "issue-message-type-network-issue",
-    SecurityIssue: "issue-message-type-security-issue",
-    OtherIssue: "issue-message-type-other-issue"
-};
-
-WebInspector.IssueMessage.Type._prefixTypeMap = {
-    "SyntaxError": WebInspector.IssueMessage.Type.SemanticIssue,
-    "URIError": WebInspector.IssueMessage.Type.SemanticIssue,
-    "EvalError": WebInspector.IssueMessage.Type.SemanticIssue,
-    "INVALID_CHARACTER_ERR": WebInspector.IssueMessage.Type.SemanticIssue,
-    "SYNTAX_ERR": WebInspector.IssueMessage.Type.SemanticIssue,
-
-    "RangeError": WebInspector.IssueMessage.Type.RangeIssue,
-    "INDEX_SIZE_ERR": WebInspector.IssueMessage.Type.RangeIssue,
-    "DOMSTRING_SIZE_ERR": WebInspector.IssueMessage.Type.RangeIssue,
-
-    "ReferenceError": WebInspector.IssueMessage.Type.ReferenceIssue,
-    "HIERARCHY_REQUEST_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
-    "INVALID_STATE_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
-    "NOT_FOUND_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
-    "WRONG_DOCUMENT_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
-
-    "TypeError": WebInspector.IssueMessage.Type.TypeIssue,
-    "INVALID_NODE_TYPE_ERR": WebInspector.IssueMessage.Type.TypeIssue,
-    "TYPE_MISMATCH_ERR": WebInspector.IssueMessage.Type.TypeIssue,
-
-    "SECURITY_ERR": WebInspector.IssueMessage.Type.SecurityIssue,
-
-    "NETWORK_ERR": WebInspector.IssueMessage.Type.NetworkIssue,
-
-    "ABORT_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "DATA_CLONE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "INUSE_ATTRIBUTE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "INVALID_ACCESS_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "INVALID_MODIFICATION_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "NAMESPACE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "NOT_SUPPORTED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "NO_DATA_ALLOWED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "NO_MODIFICATION_ALLOWED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "QUOTA_EXCEEDED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "TIMEOUT_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "URL_MISMATCH_ERR": WebInspector.IssueMessage.Type.OtherIssue,
-    "VALIDATION_ERR": WebInspector.IssueMessage.Type.OtherIssue
-};
-
-WebInspector.IssueMessage.Type.displayName = function(type)
-{
-    switch(type) {
-    case WebInspector.IssueMessage.Type.SemanticIssue:
-        return WebInspector.UIString("Semantic Issue");
-    case WebInspector.IssueMessage.Type.RangeIssue:
-        return WebInspector.UIString("Range Issue");
-    case WebInspector.IssueMessage.Type.ReferenceIssue:
-        return WebInspector.UIString("Reference Issue");
-    case WebInspector.IssueMessage.Type.TypeIssue:
-        return WebInspector.UIString("Type Issue");
-    case WebInspector.IssueMessage.Type.PageIssue:
-        return WebInspector.UIString("Page Issue");
-    case WebInspector.IssueMessage.Type.NetworkIssue:
-        return WebInspector.UIString("Network Issue");
-    case WebInspector.IssueMessage.Type.SecurityIssue:
-        return WebInspector.UIString("Security Issue");
-    case WebInspector.IssueMessage.Type.OtherIssue:
-        return WebInspector.UIString("Other Issue");
-    default:
-        console.error("Unknown issue message type:", type);
-        return WebInspector.UIString("Other Issue");
-    }
-};
-
-WebInspector.IssueMessage.prototype = {
-    constructor: WebInspector.IssueMessage,
-
-    get type()
-    {
-        return this._type;
-    },
-
-    get level()
-    {
-        return this._level;
-    },
-
-    get text()
-    {
-        return this._text;
-    },
-
-    get url()
-    {
-        return this._url;
-    },
-
-    get lineNumber()
-    {
-        return this._lineNumber;
-    },
-
-    // Private
-
-    _formatTextIfNecessary: function()
-    {
-        if (!this._parameters)
-            return;
-        
-        if (WebInspector.RemoteObject.type(this._parameters[0]) !== "string")
-            return;
-
-        function valueFormatter(obj)
-        {
-            return obj.description;
-        }
-        
-        var formatters = {};
-        formatters.o = valueFormatter;
-        formatters.s = valueFormatter;
-        formatters.f = valueFormatter;
-        formatters.i = valueFormatter;
-        formatters.d = valueFormatter;
-        
-        function append(a, b)
-        {
-            a += b;
-            return a;
-        }
-
-        var result = String.format(this._parameters[0].description, this._parameters.slice(1), formatters, "", append);
-        var resultText = result.formattedResult;
-        
-        for (var i = 0; i < result.unusedSubstitutions.length; ++i)
-            resultText += " " + result.unusedSubstitutions[i].description;
-        
-        this._text = resultText;
-    }
-};
-
-WebInspector.IssueMessage.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptLogViewController.js b/Source/WebInspectorUI/UserInterface/JavaScriptLogViewController.js
deleted file mode 100644
index edc4cf2dc..000000000
--- a/Source/WebInspectorUI/UserInterface/JavaScriptLogViewController.js
+++ /dev/null
@@ -1,515 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.JavaScriptLogViewController = function(element, scrollElement, textPrompt, delegate, historySettingIdentifier)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(textPrompt instanceof WebInspector.ConsolePrompt);
-    console.assert(historySettingIdentifier);
-
-    this._element = element;
-    this._scrollElement = scrollElement;
-
-    this._promptHistorySetting = new WebInspector.Setting(historySettingIdentifier, null);
-
-    this._prompt = textPrompt;
-    this._prompt.delegate = this;
-    this._prompt.history = this._promptHistorySetting.value;
-
-    this.delegate = delegate;
-
-    this._cleared = true;
-    this._previousMessage = null;
-    this._repeatCountWasInterrupted = false;
-
-    this._topConsoleGroups = [];
-
-    this.messagesClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "K", this._handleClearShortcut.bind(this));
-    this.messagesAlternateClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "L", this._handleClearShortcut.bind(this), this._element);
-
-    this._messagesFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "F", this._handleFindShortcut.bind(this), this._element);
-    this._messagesFindNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "G", this._handleFindNextShortcut.bind(this), this._element);
-    this._messagesFindPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "G", this._handleFindPreviousShortcut.bind(this), this._element);
-
-    this._promptAlternateClearKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "L", this._handleClearShortcut.bind(this), this._prompt.element);
-    this._promptFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "F", this._handleFindShortcut.bind(this), this._prompt.element);
-    this._promptFindNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "G", this._handleFindNextShortcut.bind(this), this._prompt.element);
-    this._promptFindPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "G", this._handleFindPreviousShortcut.bind(this), this._prompt.element);
-
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._clearLastProperties, this);
-
-    this.startNewSession();
-};
-
-WebInspector.JavaScriptLogViewController.CachedPropertiesDuration = 30000;
-
-WebInspector.JavaScriptLogViewController.prototype = {
-    constructor: WebInspector.JavaScriptLogViewController,
-
-    // Public
-
-    get prompt()
-    {
-        return this._prompt;
-    },
-
-    get topConsoleGroup()
-    {
-        return this._topConsoleGroup;
-    },
-
-    get currentConsoleGroup()
-    {
-        return this._currentConsoleGroup;
-    },
-
-    clear: function()
-    {
-        this._cleared = true;
-
-        this.startNewSession(true);
-
-        this.prompt.focus();
-
-        if (this.delegate && typeof this.delegate.didClearMessages === "function")
-            this.delegate.didClearMessages();
-    },
-
-    startNewSession: function(clearPreviousSessions)
-    {
-        if (this._topConsoleGroups.length && clearPreviousSessions) {
-            for (var i = 0; i < this._topConsoleGroups.length; ++i)
-                this._element.removeChild(this._topConsoleGroups[i].element);
-
-            this._topConsoleGroups = [];
-            this._topConsoleGroup = null;
-            this._currentConsoleGroup = null;
-        }
-
-        // Reuse the top group if it has no messages.
-        if (this._topConsoleGroup && !this._topConsoleGroup.hasMessages()) {
-            // Make sure the session is visible.
-            this._topConsoleGroup.element.scrollIntoView();
-            return;
-        }
-
-        var hasPreviousSession = !!this._topConsoleGroup;
-        var consoleGroup = new WebInspector.ConsoleGroup(null, hasPreviousSession);
-
-        this._previousMessage = null;
-        this._repeatCountWasInterrupted = false;
-
-        this._topConsoleGroups.push(consoleGroup);
-        this._topConsoleGroup = consoleGroup;
-        this._currentConsoleGroup = consoleGroup;
-
-        this._element.appendChild(consoleGroup.element);
-
-        // Make sure the new session is visible.
-        consoleGroup.element.scrollIntoView();
-    },
-
-    appendConsoleMessage: function(consoleMessage)
-    {
-        // Clone the message since there might be multiple clients using the message,
-        // and since the message has a DOM element it can't be two places at once.
-        var messageClone = consoleMessage.clone();
-
-        this._appendConsoleMessage(messageClone);
-
-        return messageClone;
-    },
-
-    updatePreviousMessageRepeatCount: function(count)
-    {
-        console.assert(this._previousMessage);
-        if (!this._previousMessage)
-            return;
-
-        if (!this._repeatCountWasInterrupted) {
-            this._previousMessage.repeatCount = count - (this._previousMessage.ignoredCount || 0);
-            this._previousMessage.updateRepeatCount();
-        } else {
-            var newMessage = this._previousMessage.clone();
-
-            // If this message is repeated after being cloned, messageRepeatCountUpdated will be called with a
-            // count that includes the count of this message before cloning. We should ignore instances of this
-            // log that occurred before we cloned, so set a property on the message with the number of previous
-            // instances of this log that we should ignore.
-            newMessage.ignoredCount = newMessage.repeatCount + (this._previousMessage.ignoredCount || 0);
-            newMessage.repeatCount = 1;
-
-            this._appendConsoleMessage(newMessage);
-        }
-    },
-
-    isScrolledToBottom: function()
-    {
-        // Lie about being scrolled to the bottom if we have a pending request to scroll to the bottom soon.
-        return this._scrollToBottomTimeout || this._scrollElement.isScrolledToBottom();
-    },
-
-    scrollToBottom: function()
-    {
-        if (this._scrollToBottomTimeout)
-            return;
-
-        function delayedWork()
-        {
-            this._scrollToBottomTimeout = null;
-            this._scrollElement.scrollTop = this._scrollElement.scrollHeight;
-        }
-
-        // Don't scroll immediately so we are not causing excessive layouts when there
-        // are many messages being added at once.
-        this._scrollToBottomTimeout = setTimeout(delayedWork.bind(this), 0);
-    },
-
-    // Protected
-
-    consolePromptHistoryDidChange: function(prompt)
-    {
-        this._promptHistorySetting.value = this.prompt.history;
-    },
-
-    consolePromptShouldCommitText: function(prompt, text, cursorIsAtLastPosition, handler)
-    {
-        // Always commit the text if we are not at the last position.
-        if (!cursorIsAtLastPosition) {
-            handler(true);
-            return;
-        }
-
-        // COMPATIBILITY (iOS 6): RuntimeAgent.parse did not exist in iOS 6. Always commit.
-        if (!RuntimeAgent.parse) {
-            handler(true);
-            return;
-        }
-
-        function parseFinished(error, result, message, range)
-        {
-            handler(result !== RuntimeAgent.SyntaxErrorType.Recoverable);
-        }
-
-        RuntimeAgent.parse(text, parseFinished.bind(this));
-    },
-
-    consolePromptTextCommitted: function(prompt, text)
-    {
-        console.assert(text);
-
-        var commandMessage = new WebInspector.ConsoleCommand(text);
-        this._appendConsoleMessage(commandMessage, true);
-
-        function printResult(result, wasThrown)
-        {
-            if (!result || this._cleared)
-                return;
-
-            this._appendConsoleMessage(new WebInspector.ConsoleCommandResult(result, wasThrown, commandMessage), true);
-        }
-
-        this._evaluateInInspectedWindow(text, "console", true, true, false, printResult.bind(this));
-    },
-
-    consolePromptCompletionsNeeded: function(prompt, defaultCompletions, base, prefix, suffix, forced)
-    {
-        // Don't allow non-forced empty prefix completions unless the base is that start of property access.
-        if (!forced && !prefix && !/[.[]$/.test(base)) {
-            prompt.updateCompletions(null);
-            return;
-        }
-
-        // If the base ends with an open parentheses or open curly bracket then treat it like there is
-        // no base so we get global object completions.
-        if (/[({]$/.test(base))
-            base = "";
-
-        var lastBaseIndex = base.length - 1;
-        var dotNotation = base[lastBaseIndex] === ".";
-        var bracketNotation = base[lastBaseIndex] === "[";
-
-        if (dotNotation || bracketNotation) {
-            base = base.substring(0, lastBaseIndex);
-
-            // Don't suggest anything for an empty base that is using dot notation.
-            // Bracket notation with an empty base will be treated as an array.
-            if (!base && dotNotation) {
-                prompt.updateCompletions(defaultCompletions);
-                return;
-            }
-
-            // Don't allow non-forced empty prefix completions if the user is entering a number, since it might be a float.
-            // But allow number completions if the base already has a decimal, so "10.0." will suggest Number properties.
-            if (!forced && !prefix && dotNotation && base.indexOf(".") === -1 && parseInt(base, 10) == base) {
-                prompt.updateCompletions(null);
-                return;
-            }
-
-            // An empty base with bracket notation is not property access, it is an array.
-            // Clear the bracketNotation flag so completions are not quoted.
-            if (!base && bracketNotation)
-                bracketNotation = false;
-        }
-
-        // If the base is the same as the last time, we can reuse the property names we have already gathered.
-        // Doing this eliminates delay caused by the async nature of the code below and it only calls getters
-        // and functions once instead of repetitively. Sure, there can be difference each time the base is evaluated,
-        // but this optimization gives us more of a win. We clear the cache after 30 seconds or when stepping in the
-        // debugger to make sure we don't use stale properties in most cases.
-        if (this._lastBase === base && this._lastPropertyNames) {
-            receivedPropertyNames.call(this, this._lastPropertyNames);
-            return;
-        }
-
-        this._lastBase = base;
-        this._lastPropertyNames = null;
-
-        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
-        if (!base && activeCallFrame)
-            activeCallFrame.collectScopeChainVariableNames(receivedPropertyNames.bind(this));
-        else
-            this._evaluateInInspectedWindow(base, "completion", true, true, false, evaluated.bind(this));
-
-        function updateLastPropertyNames(propertyNames)
-        {
-            if (this._clearLastPropertiesTimeout)
-                clearTimeout(this._clearLastPropertiesTimeout);
-            this._clearLastPropertiesTimeout = setTimeout(this._clearLastProperties.bind(this), WebInspector.JavaScriptLogViewController.CachedPropertiesDuration);
-
-            this._lastPropertyNames = propertyNames || {};
-        }
-
-        function evaluated(result, wasThrown)
-        {
-            if (wasThrown || !result || result.type === "undefined" || (result.type === "object" && result.subtype === "null")) {
-                RuntimeAgent.releaseObjectGroup("completion");
-
-                updateLastPropertyNames.call(this, {});
-                prompt.updateCompletions(defaultCompletions);
-
-                return;
-            }
-
-            function getCompletions(primitiveType)
-            {
-                var object;
-                if (primitiveType === "string")
-                    object = new String("");
-                else if (primitiveType === "number")
-                    object = new Number(0);
-                else if (primitiveType === "boolean")
-                    object = new Boolean(false);
-                else
-                    object = this;
-
-                var resultSet = {};
-                for (var o = object; o; o = o.__proto__) {
-                    try {
-                        var names = Object.getOwnPropertyNames(o);
-                        for (var i = 0; i < names.length; ++i)
-                            resultSet[names[i]] = true;
-                    } catch (e) {
-                        // Ignore
-                    }
-                }
-
-                return resultSet;
-            }
-
-            if (result.type === "object" || result.type === "function")
-                result.callFunctionJSON(getCompletions, undefined, receivedPropertyNames.bind(this));
-            else if (result.type === "string" || result.type === "number" || result.type === "boolean")
-                this._evaluateInInspectedWindow("(" + getCompletions + ")(\"" + result.type + "\")", "completion", false, true, true, receivedPropertyNamesFromEvaluate.bind(this));
-            else
-                console.error("Unknown result type: " + result.type);
-        }
-
-        function receivedPropertyNamesFromEvaluate(object, wasThrown, result)
-        {
-            receivedPropertyNames.call(this, result && !wasThrown ? result.value : null);
-        }
-
-        function receivedPropertyNames(propertyNames)
-        {
-            propertyNames = propertyNames || {};
-
-            updateLastPropertyNames.call(this, propertyNames);
-
-            RuntimeAgent.releaseObjectGroup("completion");
-
-            if (!base) {
-                const commandLineAPI = ["$", "$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear", "getEventListeners", "$0", "$1", "$2", "$3", "$4", "$_"];
-                for (var i = 0; i < commandLineAPI.length; ++i)
-                    propertyNames[commandLineAPI[i]] = true;
-            }
-
-            propertyNames = Object.keys(propertyNames);
-
-            var implicitSuffix = "";
-            if (bracketNotation) {
-                var quoteUsed = prefix[0] === "'" ? "'" : "\"";
-                if (suffix !== "]" && suffix !== quoteUsed)
-                    implicitSuffix = "]";
-            }
-
-            var completions = defaultCompletions;
-            var knownCompletions = completions.keySet();
-
-            for (var i = 0; i < propertyNames.length; ++i) {
-                var property = propertyNames[i];
-
-                if (dotNotation && !/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(property))
-                    continue;
-
-                if (bracketNotation) {
-                    if (parseInt(property) != property)
-                        property = quoteUsed + property.escapeCharacters(quoteUsed + "\\") + (suffix !== quoteUsed ? quoteUsed : "");
-                }
-
-                if (!property.startsWith(prefix) || property in knownCompletions)
-                    continue;
-
-                completions.push(property);
-                knownCompletions[property] = true;
-            }
-
-            function compare(a, b)
-            {
-                // Try to sort in numerical order first.
-                var numericCompareResult = a - b;
-                if (!isNaN(numericCompareResult))
-                    return numericCompareResult;
-
-                // Not numbers, sort as strings.
-                return a.localeCompare(b);
-            }
-
-            completions.sort(compare);
-
-            prompt.updateCompletions(completions, implicitSuffix);
-        }
-    },
-
-    // Private
-
-    _clearLastProperties: function()
-    {
-        if (this._clearLastPropertiesTimeout) {
-            clearTimeout(this._clearLastPropertiesTimeout);
-            delete this._clearLastPropertiesTimeout;
-        }
-
-        // Clear the cache of property names so any changes while stepping or sitting idle get picked up if the same
-        // expression is evaluated again.
-        this._lastPropertyNames = null;
-    },
-
-    _evaluateInInspectedWindow: function(expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, callback)
-    {
-        if (!expression) {
-            // There is no expression, so the completion should happen against global properties.
-            expression = "this";
-        }
-
-        function evalCallback(error, result, wasThrown)
-        {
-            if (error) {
-                console.error(error);
-                callback(null, false);
-                return;
-            }
-
-            if (returnByValue)
-                callback(null, wasThrown, wasThrown ? null : result);
-            else
-                callback(WebInspector.RemoteObject.fromPayload(result), wasThrown);
-        }
-
-        if (WebInspector.debuggerManager.activeCallFrame) {
-            DebuggerAgent.evaluateOnCallFrame(WebInspector.debuggerManager.activeCallFrame.id, expression, objectGroup, includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole, returnByValue, evalCallback);
-            return;
-        }
-
-        // COMPATIBILITY (iOS 6): Execution context identifiers (contextId) did not exist
-        // in iOS 6. Fallback to including the frame identifier (frameId).
-        var contextId = WebInspector.quickConsole.executionContextIdentifier;
-        RuntimeAgent.evaluate.invoke({expression: expression, objectGroup: objectGroup, includeCommandLineAPI: includeCommandLineAPI, doNotPauseOnExceptionsAndMuteConsole: doNotPauseOnExceptionsAndMuteConsole, contextId: contextId, frameId: contextId, returnByValue: returnByValue}, evalCallback);
-    },
-
-    _handleClearShortcut: function()
-    {
-        this.clear();
-    },
-
-    _handleFindShortcut: function()
-    {
-        this.delegate.focusSearchBar();
-    },
-
-    _handleFindNextShortcut: function()
-    {
-        this.delegate.highlightNextSearchMatch();
-    },
-
-    _handleFindPreviousShortcut: function()
-    {
-        this.delegate.highlightPreviousSearchMatch();
-    },
-
-    _appendConsoleMessage: function(msg, repeatCountWasInterrupted)
-    {
-        var wasScrolledToBottom = this.isScrolledToBottom();
-
-        this._cleared = false;
-        this._repeatCountWasInterrupted = repeatCountWasInterrupted || false;
-
-        if (!repeatCountWasInterrupted)
-            this._previousMessage = msg;
-
-        if (msg.type === WebInspector.ConsoleMessage.MessageType.EndGroup) {
-            var parentGroup = this._currentConsoleGroup.parentGroup;
-            if (parentGroup)
-                this._currentConsoleGroup = parentGroup;
-        } else {
-            if (msg.type === WebInspector.ConsoleMessage.MessageType.StartGroup || msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed) {
-                var group = new WebInspector.ConsoleGroup(this._currentConsoleGroup);
-                this._currentConsoleGroup.messagesElement.appendChild(group.element);
-                this._currentConsoleGroup = group;
-            }
-
-            this._currentConsoleGroup.addMessage(msg);
-        }
-
-        if (msg.type === WebInspector.ConsoleMessage.MessageType.Result || wasScrolledToBottom)
-            this.scrollToBottom();
-
-        if (this.delegate && typeof this.delegate.didAppendConsoleMessage === "function")
-            this.delegate.didAppendConsoleMessage(msg);
-    }
-};
-
-WebInspector.JavaScriptLogViewController.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileObject.js b/Source/WebInspectorUI/UserInterface/JavaScriptProfileObject.js
deleted file mode 100644
index 75755bc60..000000000
--- a/Source/WebInspectorUI/UserInterface/JavaScriptProfileObject.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.JavaScriptProfileObject = function(title, id, recording)
-{
-    WebInspector.ProfileObject.call(this, WebInspector.JavaScriptProfileType.TypeId, title, id, recording);
-};
-
-WebInspector.JavaScriptProfileObject.prototype = {
-    constructor: WebInspector.JavaScriptProfileObject
-};
-
-WebInspector.JavaScriptProfileObject.prototype.__proto__ = WebInspector.ProfileObject.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileType.js b/Source/WebInspectorUI/UserInterface/JavaScriptProfileType.js
deleted file mode 100644
index 13c68b61b..000000000
--- a/Source/WebInspectorUI/UserInterface/JavaScriptProfileType.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.JavaScriptProfileType = function()
-{
-    WebInspector.ProfileType.call(this, WebInspector.JavaScriptProfileType.TypeId, WebInspector.UIString("Collect JavaScript Profile"));
-    this._recording = false;
-    WebInspector.JavaScriptProfileType.instance = this;
-}
-
-WebInspector.JavaScriptProfileType.TypeId = "CPU";
-
-WebInspector.JavaScriptProfileType.prototype = {
-    get buttonTooltip()
-    {
-        return this._recording ? WebInspector.UIString("Stop JavaScript profiling.") : WebInspector.UIString("Start JavaScript profiling.");
-    },
-
-    buttonClicked: function()
-    {
-        if (this._recording) {
-            this.stopRecordingProfile();
-            WebInspector.networkManager.enableResourceTracking();
-        } else {
-            WebInspector.networkManager.disableResourceTracking();
-            this.startRecordingProfile();
-        }
-    },
-
-    get treeItemTitle()
-    {
-        return WebInspector.UIString("JAVASCRIPT PROFILES");
-    },
-
-    get description()
-    {
-        return WebInspector.UIString("JavaScript profiles show where the execution time is spent in your page's JavaScript functions.");
-    },
-
-    isRecordingProfile: function()
-    {
-        return this._recording;
-    },
-
-    startRecordingProfile: function()
-    {
-        this._recording = true;
-        ProfilerAgent.start();
-    },
-
-    stopRecordingProfile: function()
-    {
-        this._recording = false;
-        ProfilerAgent.stop();
-    },
-
-    setRecordingProfile: function(isProfiling)
-    {
-        this._recording = isProfiling;
-    },
-
-    createSidebarTreeElementForProfile: function(profile)
-    {
-        return new WebInspector.ProfileSidebarTreeElement(profile, WebInspector.UIString("Profile %d"), "profile-sidebar-tree-item");
-    },
-
-    createView: function(profile)
-    {
-        return new WebInspector.JavaScriptProfileView(profile);
-    }
-}
-
-WebInspector.JavaScriptProfileType.prototype.__proto__ = WebInspector.ProfileType.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.css b/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.css
deleted file mode 100644
index 94889c556..000000000
--- a/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.css
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.profile-view > .data-grid {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    outline: none;
-    border: none;
-}
-
-.profile-view .data-grid th.average-column {
-    text-align: center;
-}
-
-.profile-view .data-grid td.average-column {
-    text-align: right;
-}
-
-.profile-view .data-grid th.self-column {
-    text-align: center;
-}
-
-.profile-view .data-grid td.self-column {
-    text-align: right;
-}
-
-.profile-view .data-grid th.total-column {
-    text-align: center;
-}
-
-.profile-view .data-grid td.total-column {
-    text-align: right;
-}
-
-.profile-view .data-grid .calls-column {
-    text-align: center;
-}
-
-.profile-node-file {
-    float: right;
-    color: gray;
-    margin-top: -1px;
-}
-
-.data-grid tr.selected .profile-node-file {
-    color: rgb(33%, 33%, 33%);
-}
-
-.data-grid:focus tr.selected .profile-node-file {
-    color: white;
-}
diff --git a/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.js b/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.js
deleted file mode 100644
index de1860fd9..000000000
--- a/Source/WebInspectorUI/UserInterface/JavaScriptProfileView.js
+++ /dev/null
@@ -1,468 +0,0 @@
-/*
- * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.JavaScriptProfileView = function(profile)
-{
-    console.assert(profile instanceof WebInspector.JavaScriptProfileObject);
-
-    WebInspector.ProfileView.call(this, profile, "javascript-profiler-show-time-as-percent");
-
-    this._showTreeBottomUpSetting = new WebInspector.Setting("javascript-profiler-show-tree-bottom-up", true);
-
-    this._showTreeBottomUpNavigationItem = new WebInspector.ActivateButtonNavigationItem("show-tree-bottom-up-navigation-item", WebInspector.UIString("Invert call tree"), WebInspector.UIString("Normal call tree"), "Images/BottomUpTree.pdf", 16, 16);
-    this._showTreeBottomUpNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleBottomUpView, this);
-    this._showTreeBottomUpNavigationItem.activated = this._showTreeBottomUpSetting.value;
-
-    this._viewType = new WebInspector.Setting("javascript-profiler-view", WebInspector.JavaScriptProfileView._TypeHeavy);
-}
-
-WebInspector.JavaScriptProfileView._TypeTree = "Tree";
-WebInspector.JavaScriptProfileView._TypeHeavy = "Heavy";
-
-WebInspector.JavaScriptProfileView.prototype = {
-    constructor: WebInspector.JavaScriptProfileView,
-
-    updateLayout: function()
-    {
-        if (this.dataGrid)
-            this.dataGrid.updateLayout();
-    },
-
-    get recordingTitle()
-    {
-        return WebInspector.UIString("Recording JavaScript Profile\u2026");
-    },
-
-    displayProfile: function()
-    {
-        var columns = { "self": { title: WebInspector.UIString("Self"), width: "72px", sort: "descending", sortable: true },
-                        "total": { title: WebInspector.UIString("Total"), width: "72px", sortable: true },
-                        "average": { title: WebInspector.UIString("Average"), width: "72px", sortable: true },
-                        "calls": { title: WebInspector.UIString("Calls"), width: "54px", sortable: true },
-                        "function": { title: WebInspector.UIString("Function"), disclosure: true, sortable: true } };
-
-        this.dataGrid = new WebInspector.DataGrid(columns);
-        this.dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortData, this);
-
-        this.element.appendChild(this.dataGrid.element);
-        this.dataGrid.updateLayout();
-
-        function profileCallback(error, profile)
-        {
-            if (error)
-                return;
-
-            if (!profile.head) {
-                // Profiling was tentatively terminated with the "Clear all profiles." button.
-                return;
-            }
-            this.profile.head = profile.head;
-            this._assignParentsInProfile();
-            this._changeView();
-        }
-
-        // COMPATIBILITY (iOS 6): getCPUProfile use to be called getProfile.
-        if (ProfilerAgent.getProfile)
-            ProfilerAgent.getProfile(this.profile.type, this.profile.id, profileCallback.bind(this));
-        else
-            ProfilerAgent.getCPUProfile(this.profile.id, profileCallback.bind(this));
-    },
-
-    get navigationItems()
-    {
-        return [this._showTreeBottomUpNavigationItem, this.showTimeAsPercentNavigationItem];
-    },
-
-    get bottomUpProfileDataGridTree()
-    {
-        if (!this._bottomUpProfileDataGridTree)
-            this._bottomUpProfileDataGridTree = new WebInspector.BottomUpProfileDataGridTree(this, this.profile.head);
-        return this._bottomUpProfileDataGridTree;
-    },
-
-    get topDownProfileDataGridTree()
-    {
-        if (!this._topDownProfileDataGridTree)
-            this._topDownProfileDataGridTree = new WebInspector.TopDownProfileDataGridTree(this, this.profile.head);
-        return this._topDownProfileDataGridTree;
-    },
-
-    willHide: function()
-    {
-        this._currentSearchResultIndex = -1;
-    },
-
-    refresh: function()
-    {
-        var selectedProfileNode = this.dataGrid.selectedNode ? this.dataGrid.selectedNode.profileNode : null;
-
-        this.dataGrid.removeChildren();
-
-        var children = this.profileDataGridTree.children;
-        var count = children.length;
-
-        for (var index = 0; index < count; ++index)
-            this.dataGrid.appendChild(children[index]);
-
-        if (selectedProfileNode)
-            selectedProfileNode.selected = true;
-    },
-
-    refreshVisibleData: function()
-    {
-        var child = this.dataGrid.children[0];
-        while (child) {
-            child.refresh();
-            child = child.traverseNextNode(false, null, true);
-        }
-    },
-
-    searchCanceled: function()
-    {
-        if (this._searchResults) {
-            for (var i = 0; i < this._searchResults.length; ++i) {
-                var profileNode = this._searchResults[i].profileNode;
-
-                delete profileNode._searchMatchedSelfColumn;
-                delete profileNode._searchMatchedTotalColumn;
-                delete profileNode._searchMatchedCallsColumn;
-                delete profileNode._searchMatchedFunctionColumn;
-
-                profileNode.refresh();
-            }
-        }
-
-        delete this._searchFinishedCallback;
-        this._currentSearchResultIndex = -1;
-        this._searchResults = [];
-    },
-
-    performSearch: function(query, finishedCallback)
-    {
-        // Call searchCanceled since it will reset everything we need before doing a new search.
-        this.searchCanceled();
-
-        query = query.trim();
-
-        if (!query.length)
-            return;
-
-        this._searchFinishedCallback = finishedCallback;
-
-        var greaterThan = query.charAt(0) === ">";
-        var lessThan = query.charAt(0) === "<";
-        var equalTo = (query.charAt(0) === "=" || ((greaterThan || lessThan) && query.charAt(1) === "="));
-        var percentUnits = (query.lastIndexOf("%") === (query.length - 1));
-        var millisecondsUnits = (query.length > 2 && query.lastIndexOf("ms") === (query.length - 2));
-        var secondsUnits = (!millisecondsUnits && query.lastIndexOf("s") === (query.length - 1));
-
-        var queryNumber = parseFloat(query);
-        if (greaterThan || lessThan || equalTo) {
-            if (equalTo && (greaterThan || lessThan))
-                queryNumber = parseFloat(query.substring(2));
-            else
-                queryNumber = parseFloat(query.substring(1));
-        }
-
-        var queryNumberMilliseconds = (secondsUnits ? (queryNumber * 1000) : queryNumber);
-
-        // Make equalTo implicitly true if it wasn't specified there is no other operator.
-        if (!isNaN(queryNumber) && !(greaterThan || lessThan))
-            equalTo = true;
-
-        function matchesQuery(/*ProfileDataGridNode*/ profileDataGridNode)
-        {
-            delete profileDataGridNode._searchMatchedSelfColumn;
-            delete profileDataGridNode._searchMatchedTotalColumn;
-            delete profileDataGridNode._searchMatchedAverageColumn;
-            delete profileDataGridNode._searchMatchedCallsColumn;
-            delete profileDataGridNode._searchMatchedFunctionColumn;
-
-            if (percentUnits) {
-                if (lessThan) {
-                    if (profileDataGridNode.selfPercent < queryNumber)
-                        profileDataGridNode._searchMatchedSelfColumn = true;
-                    if (profileDataGridNode.totalPercent < queryNumber)
-                        profileDataGridNode._searchMatchedTotalColumn = true;
-                    if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedAverageColumn = true;
-                } else if (greaterThan) {
-                    if (profileDataGridNode.selfPercent > queryNumber)
-                        profileDataGridNode._searchMatchedSelfColumn = true;
-                    if (profileDataGridNode.totalPercent > queryNumber)
-                        profileDataGridNode._searchMatchedTotalColumn = true;
-                    if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedAverageColumn = true;
-                }
-
-                if (equalTo) {
-                    if (profileDataGridNode.selfPercent == queryNumber)
-                        profileDataGridNode._searchMatchedSelfColumn = true;
-                    if (profileDataGridNode.totalPercent == queryNumber)
-                        profileDataGridNode._searchMatchedTotalColumn = true;
-                    if (profileDataGridNode.averagePercent < queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedAverageColumn = true;
-                }
-            } else if (millisecondsUnits || secondsUnits) {
-                if (lessThan) {
-                    if (profileDataGridNode.selfTime < queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedSelfColumn = true;
-                    if (profileDataGridNode.totalTime < queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedTotalColumn = true;
-                    if (profileDataGridNode.averageTime < queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedAverageColumn = true;
-                } else if (greaterThan) {
-                    if (profileDataGridNode.selfTime > queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedSelfColumn = true;
-                    if (profileDataGridNode.totalTime > queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedTotalColumn = true;
-                    if (profileDataGridNode.averageTime > queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedAverageColumn = true;
-                }
-
-                if (equalTo) {
-                    if (profileDataGridNode.selfTime == queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedSelfColumn = true;
-                    if (profileDataGridNode.totalTime == queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedTotalColumn = true;
-                    if (profileDataGridNode.averageTime == queryNumberMilliseconds)
-                        profileDataGridNode._searchMatchedAverageColumn = true;
-                }
-            } else {
-                if (equalTo && profileDataGridNode.numberOfCalls == queryNumber)
-                    profileDataGridNode._searchMatchedCallsColumn = true;
-                if (greaterThan && profileDataGridNode.numberOfCalls > queryNumber)
-                    profileDataGridNode._searchMatchedCallsColumn = true;
-                if (lessThan && profileDataGridNode.numberOfCalls < queryNumber)
-                    profileDataGridNode._searchMatchedCallsColumn = true;
-            }
-
-            if (profileDataGridNode.functionName.hasSubstring(query, true) || profileDataGridNode.url.hasSubstring(query, true))
-                profileDataGridNode._searchMatchedFunctionColumn = true;
-
-            if (profileDataGridNode._searchMatchedSelfColumn ||
-                profileDataGridNode._searchMatchedTotalColumn ||
-                profileDataGridNode._searchMatchedAverageColumn ||
-                profileDataGridNode._searchMatchedCallsColumn ||
-                profileDataGridNode._searchMatchedFunctionColumn)
-            {
-                profileDataGridNode.refresh();
-                return true;
-            }
-
-            return false;
-        }
-
-        var current = this.profileDataGridTree.children[0];
-
-        while (current) {
-            if (matchesQuery(current)) {
-                this._searchResults.push({ profileNode: current });
-            }
-
-            current = current.traverseNextNode(false, null, false);
-        }
-
-        finishedCallback(this, this._searchResults.length);
-    },
-
-    jumpToFirstSearchResult: function()
-    {
-        if (!this._searchResults || !this._searchResults.length)
-            return;
-        this._currentSearchResultIndex = 0;
-        this._jumpToSearchResult(this._currentSearchResultIndex);
-    },
-
-    jumpToLastSearchResult: function()
-    {
-        if (!this._searchResults || !this._searchResults.length)
-            return;
-        this._currentSearchResultIndex = (this._searchResults.length - 1);
-        this._jumpToSearchResult(this._currentSearchResultIndex);
-    },
-
-    jumpToNextSearchResult: function()
-    {
-        if (!this._searchResults || !this._searchResults.length)
-            return;
-        if (++this._currentSearchResultIndex >= this._searchResults.length)
-            this._currentSearchResultIndex = 0;
-        this._jumpToSearchResult(this._currentSearchResultIndex);
-    },
-
-    jumpToPreviousSearchResult: function()
-    {
-        if (!this._searchResults || !this._searchResults.length)
-            return;
-        if (--this._currentSearchResultIndex < 0)
-            this._currentSearchResultIndex = (this._searchResults.length - 1);
-        this._jumpToSearchResult(this._currentSearchResultIndex);
-    },
-
-    showingFirstSearchResult: function()
-    {
-        return (this._currentSearchResultIndex === 0);
-    },
-
-    showingLastSearchResult: function()
-    {
-        return (this._searchResults && this._currentSearchResultIndex === (this._searchResults.length - 1));
-    },
-
-    _jumpToSearchResult: function(index)
-    {
-        var searchResult = this._searchResults[index];
-        if (!searchResult)
-            return;
-
-        var profileNode = searchResult.profileNode;
-        profileNode.revealAndSelect();
-    },
-
-    _toggleBottomUpView: function(event)
-    {
-        this._showTreeBottomUpSetting.value = !this._showTreeBottomUpSetting.value;
-        this._showTreeBottomUpNavigationItem.activated = this._showTreeBottomUpSetting.value;
-        this._changeView();
-    },
-
-    _changeView: function()
-    {
-        if (!this.profile)
-            return;
-    
-        if (!this._showTreeBottomUpSetting.value) {
-            this.profileDataGridTree = this.topDownProfileDataGridTree;
-            this._sortProfile();
-            this._viewType.value = WebInspector.JavaScriptProfileView._TypeTree;
-        } else {
-            this.profileDataGridTree = this.bottomUpProfileDataGridTree;
-            this._sortProfile();
-            this._viewType.value = WebInspector.JavaScriptProfileView._TypeHeavy;
-        }
-
-        if (!this.currentQuery || !this._searchFinishedCallback || !this._searchResults)
-            return;
-
-        // The current search needs to be performed again. First negate out previous match
-        // count by calling the search finished callback with a negative number of matches.
-        // Then perform the search again the with same query and callback.
-        this._searchFinishedCallback(this, -this._searchResults.length);
-        this.performSearch(this.currentQuery, this._searchFinishedCallback);
-    },
-
-    toggleTimeDisplay: function(event)
-    {
-        WebInspector.ProfileView.prototype.toggleTimeDisplay.call(this, event);
-        this.showTimeAsPercent.value = !this.showTimeAsPercent.value;
-        this.refreshVisibleData();
-    },
-
-    _focusClicked: function(event)
-    {
-        if (!this.dataGrid.selectedNode)
-            return;
-
-        this.profileDataGridTree.focus(this.dataGrid.selectedNode);
-        this.refresh();
-        this.refreshVisibleData();
-    },
-
-    _excludeClicked: function(event)
-    {
-        var selectedNode = this.dataGrid.selectedNode
-
-        if (!selectedNode)
-            return;
-
-        selectedNode.deselect();
-
-        this.profileDataGridTree.exclude(selectedNode);
-        this.refresh();
-        this.refreshVisibleData();
-    },
-
-    _resetClicked: function(event)
-    {
-        this.profileDataGridTree.restore();
-        this.refresh();
-        this.refreshVisibleData();
-    },
-
-    _dataGridNodeSelected: function(node)
-    {
-        // FIXME: Update UI we have to focus on a data grid node or exclude it from the profile.
-    },
-
-    _dataGridNodeDeselected: function(node)
-    {
-        // FIXME: Update UI we have to focus on a data grid node or exclude it from the profile.
-    },
-
-    _sortData: function(event)
-    {
-        this._sortProfile(this.profile);
-    },
-
-    _sortProfile: function()
-    {
-        var sortAscending = this.dataGrid.sortOrder === "ascending";
-        var sortColumnIdentifier = this.dataGrid.sortColumnIdentifier;
-        var sortProperty = {
-                "average": "averageTime",
-                "self": "selfTime",
-                "total": "totalTime",
-                "calls": "numberOfCalls",
-                "function": "functionName"
-            }[sortColumnIdentifier];
-
-        this.profileDataGridTree.sort(WebInspector.ProfileDataGridTree.propertyComparator(sortProperty, sortAscending));
-
-        this.refresh();
-    },
-
-    _assignParentsInProfile: function()
-    {
-        var head = this.profile.head;
-        head.parent = null;
-        head.head = null;
-        var nodesToTraverse = [ { parent: head, children: head.children } ];
-        while (nodesToTraverse.length > 0) {
-            var pair = nodesToTraverse.shift();
-            var parent = pair.parent;
-            var children = pair.children;
-            var length = children.length;
-            for (var i = 0; i < length; ++i) {
-                children[i].head = head;
-                children[i].parent = parent;
-                if (children[i].children.length > 0)
-                    nodesToTraverse.push({ parent: children[i], children: children[i].children });
-            }
-        }
-    }
-}
-
-WebInspector.JavaScriptProfileView.prototype.__proto__ = WebInspector.ProfileView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js b/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js
deleted file mode 100644
index b82a14afc..000000000
--- a/Source/WebInspectorUI/UserInterface/KeyboardShortcut.js
+++ /dev/null
@@ -1,249 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.KeyboardShortcut = function(modifiers, key, callback, targetElement)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(key);
-    console.assert(!callback || typeof callback === "function");
-    console.assert(!targetElement || targetElement instanceof Element);
-
-    if (typeof key === "string") {
-        key = key[0].toUpperCase();
-        key = new WebInspector.Key(key.charCodeAt(0), key);
-    }
-
-    if (callback && !targetElement)
-        targetElement = document;
-
-    this._modifiers = modifiers || WebInspector.KeyboardShortcut.Modifier.None;
-    this._key = key;
-    this._targetElement = targetElement;
-    this._callback = callback;
-    this._disabled = false;
-    this._implicitlyPreventsDefault = true;
-
-    if (targetElement) {
-        var targetKeyboardShortcuts = targetElement._keyboardShortcuts;
-        if (!targetKeyboardShortcuts)
-            targetKeyboardShortcuts = targetElement._keyboardShortcuts = [];
-
-        targetKeyboardShortcuts.push(this);
-
-        if (!WebInspector.KeyboardShortcut._registeredKeyDownListener) {
-            WebInspector.KeyboardShortcut._registeredKeyDownListener = true;
-            window.addEventListener("keydown", WebInspector.KeyboardShortcut._handleKeyDown);
-        }
-    }
-};
-
-WebInspector.KeyboardShortcut._handleKeyDown = function(event)
-{
-    if (event.defaultPrevented)
-        return;
-
-    for (var targetElement = event.target; targetElement; targetElement = targetElement.parentNode) {
-        if (!targetElement._keyboardShortcuts)
-            continue;
-
-        for (var i = 0; i < targetElement._keyboardShortcuts.length; ++i) {
-            var keyboardShortcut = targetElement._keyboardShortcuts[i];
-            if (!keyboardShortcut.matchesEvent(event))
-                continue;
-
-            keyboardShortcut.callback(event, keyboardShortcut);
-
-            if (keyboardShortcut.implicitlyPreventsDefault)
-                event.preventDefault();
-
-            return;
-        }
-    }
-};
-
-WebInspector.KeyboardShortcut.Modifier = {
-    None: 0,
-    Shift: 1,
-    Control: 2,
-    Option: 4,
-    Command: 8
-};
-
-WebInspector.Key = function(keyCode, displayName)
-{
-    this._keyCode = keyCode;
-    this._displayName = displayName;
-};
-
-WebInspector.Key.prototype = {
-    get keyCode()
-    {
-        return this._keyCode;
-    },
-
-    get displayName()
-    {
-        return this._displayName;
-    },
-
-    toString: function()
-    {
-        return this._displayName;
-    }
-};
-
-WebInspector.KeyboardShortcut.Key = {
-    Backspace: new WebInspector.Key(8, "\u232b"),
-    Tab: new WebInspector.Key(9, "\u21e5"),
-    Enter: new WebInspector.Key(13, "\u21a9"),
-    Escape: new WebInspector.Key(27, "\u238b"),
-    Space: new WebInspector.Key(32, "Space"),
-    PageUp: new WebInspector.Key(33, "\u21de"),
-    PageDown: new WebInspector.Key(34, "\u21df"),
-    End: new WebInspector.Key(35, "\u2198"),
-    Home: new WebInspector.Key(36, "\u2196"),
-    Left: new WebInspector.Key(37, "\u2190"),
-    Up: new WebInspector.Key(38, "\u2191"),
-    Right: new WebInspector.Key(39, "\u2192"),
-    Down: new WebInspector.Key(40, "\u2193"),
-    Delete: new WebInspector.Key(46, "\u2326"),
-    Zero: new WebInspector.Key(48, "0"),
-    F1: new WebInspector.Key(112, "F1"),
-    F2: new WebInspector.Key(113, "F2"),
-    F3: new WebInspector.Key(114, "F3"),
-    F4: new WebInspector.Key(115, "F4"),
-    F5: new WebInspector.Key(116, "F5"),
-    F6: new WebInspector.Key(117, "F6"),
-    F7: new WebInspector.Key(118, "F7"),
-    F8: new WebInspector.Key(119, "F8"),
-    F9: new WebInspector.Key(120, "F9"),
-    F10: new WebInspector.Key(121, "F10"),
-    F11: new WebInspector.Key(122, "F11"),
-    F12: new WebInspector.Key(123, "F12"),
-    Semicolon: new WebInspector.Key(186, ";"),
-    Plus: new WebInspector.Key(187, "+"),
-    Comma: new WebInspector.Key(188, ","),
-    Minus: new WebInspector.Key(189, "-"),
-    Period: new WebInspector.Key(190, "."),
-    Slash: new WebInspector.Key(191, "/"),
-    Apostrophe: new WebInspector.Key(192, "`"),
-    SingleQuote: new WebInspector.Key(222, "\'")
-};
-
-WebInspector.KeyboardShortcut.prototype = {
-    constructor: WebInspector.KeyboardShortcut,
-
-    // Public
-
-    get modifiers()
-    {
-        return this._modifiers;
-    },
-
-    get key()
-    {
-        return this._key;
-    },
-
-    get displayName()
-    {
-        var result = "";
-
-        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Control)
-            result += "\u2303";
-        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Option)
-            result += "\u2325";
-        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Shift)
-            result += "\u21e7";
-        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Command)
-            result += "\u2318";
-
-        result += this._key.toString();
-
-        return result;
-    },
-
-    get callback()
-    {
-        return this._callback;
-    },
-
-    get disabled()
-    {
-        return this._disabled;
-    },
-
-    set disabled(disabled)
-    {
-        this._disabled = disabled || false;
-    },
-
-    get implicitlyPreventsDefault()
-    {
-        return this._implicitlyPreventsDefault;
-    },
-
-    set implicitlyPreventsDefault(implicitly)
-    {
-        this._implicitlyPreventsDefault = implicitly;
-    },
-
-    unbind: function()
-    {
-        this._disabled = true;
-
-        if (!this._targetElement)
-            return;
-
-        var targetKeyboardShortcuts = this._targetElement._keyboardShortcuts;
-        if (!targetKeyboardShortcuts)
-            return;
-
-        targetKeyboardShortcuts.remove(this);
-    },
-
-    matchesEvent: function(event)
-    {
-        if (this._disabled)
-            return false;
-
-        if (this._key.keyCode !== event.keyCode)
-            return false;
-
-        var eventModifiers = WebInspector.KeyboardShortcut.Modifier.None;
-        if (event.shiftKey)
-            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Shift;
-        if (event.ctrlKey)
-            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Control;
-        if (event.altKey)
-            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Option;
-        if (event.metaKey)
-            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Command;
-        return this._modifiers === eventModifiers;
-    }
-};
-
-WebInspector.KeyboardShortcut.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js b/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js
deleted file mode 100644
index 1b25f5ab5..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeDataGrid.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayerTreeDataGrid = function() {
-    WebInspector.DataGrid.call(this, {
-        name: { title: WebInspector.UIString("Node"), sortable: false },
-        paintCount: { title: WebInspector.UIString("Paints"), sortable: true, aligned: "right", width: "50px" },
-        memory: { title: WebInspector.UIString("Memory"), sortable: true, sort: "descending", aligned: "right", width: "70px" }
-    });
-};
-
-WebInspector.LayerTreeDataGrid.prototype = {
-    constructor: WebInspector.LayerTreeDataGrid,
-    
-    insertChild: function(child)
-    {
-        WebInspector.DataGrid.prototype.insertChild.call(this, child);
-
-        this._updateChildren();
-    },
-    
-    removeChild: function(child)
-    {
-        WebInspector.DataGrid.prototype.removeChild.call(this, child);
-
-        this._updateChildren();
-    },
-    
-    setChildren: function(children)
-    {
-        this._suspendLayout = true;
-
-        var removedChildren = this.children.filter(function(child) {
-            return !children.contains(child);
-        });
-
-        while (removedChildren.length)
-            this.removeChild(removedChildren.pop());
-
-        children.forEach(function(child) {
-            if (child.parent !== this)
-                this.appendChild(child);
-        }.bind(this));
-
-        this._suspendLayout = false;
-        
-        this.children = children;
-        this._updateChildren();
-    },
-    
-    _updateChildren: function()
-    {
-        if (this._suspendLayout)
-            return;
-
-        // Iterate through nodes by DOM order first so we can establish
-        // the DOM index.
-        var elements = this.dataTableBody.rows;
-        for (var i = 0, count = elements.length - 1; i < count; ++i)
-            elements[i]._dataGridNode._domIndex = i;
-
-        // Now iterate through children to set up their sibling relationship
-        // and update the element style to offset the position of the node
-        // to match its position in the children list vs. DOM order.
-        var children = this.children;
-        for (var i = 0, count = children.length; i < count; ++i) {
-            var child = children[i];
-            child.previousSibling = i > 0 ? children[i - 1] : null;
-            child.nextSibling = i + 1 < count ? children[i + 1] : null;
-            
-            var ty = (i - child._domIndex) * 100;
-            child.element.style.webkitTransform = "translateY(" + ty + "%)";
-        }
-
-        this.hasChildren = this.children.length > 0;
-    },
-    
-    _recalculateSiblings: function(myIndex)
-    {
-        // Overriding default implementation to do nothing at all
-        // since we're setting sibling relationship in _updateChildren.
-    }
-};
-
-WebInspector.LayerTreeDataGrid.prototype.__proto__ = WebInspector.DataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeDataGridNode.js b/Source/WebInspectorUI/UserInterface/LayerTreeDataGridNode.js
deleted file mode 100644
index 82538ecf7..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeDataGridNode.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayerTreeDataGridNode = function(layer)
-{
-    WebInspector.DataGridNode.call(this);
-
-    this._outlets = {};
-
-    this.layer = layer;
-};
-
-WebInspector.LayerTreeDataGridNode.prototype = {
-    constructor: WebInspector.DataGridNode,
-
-    // DataGridNode Overrides.
-
-    createCells: function()
-    {
-        WebInspector.DataGridNode.prototype.createCells.call(this);
-
-        this._cellsWereCreated = true;
-    },
-
-    createCellContent: function(columnIdentifier, cell)
-    {
-        var cell = columnIdentifier === "name" ? this._makeNameCell() : this._makeOutlet(columnIdentifier, document.createTextNode());
-        this._updateCell(columnIdentifier);
-        return cell;
-    },
-
-    // Public
-
-    get layer()
-    {
-        return this._layer;
-    },
-
-    set layer(layer)
-    {
-        this._layer = layer;
-
-        var domNode = WebInspector.domTreeManager.nodeForId(layer.nodeId);
-
-        this.data = {
-            name: domNode ? WebInspector.displayNameForNode(domNode) : WebInspector.UIString("Unknown node"),
-            paintCount: layer.paintCount || "\u2014",
-            memory: Number.bytesToString(layer.memory || 0)
-        };
-    },
-
-    get data()
-    {
-        return this._data;
-    },
-
-    set data(data)
-    {
-        Object.keys(data).forEach(function(columnIdentifier) {
-            if (this._data[columnIdentifier] === data[columnIdentifier])
-                return;
-
-            this._data[columnIdentifier] = data[columnIdentifier];
-            if (this._cellsWereCreated)
-                this._updateCell(columnIdentifier);
-        }, this);
-    },
-
-    // Private
-
-    _makeOutlet: function(name, element)
-    {
-        return this._outlets[name] = element;
-    },
-
-    _makeNameCell: function()
-    {
-        var fragment = document.createDocumentFragment();
-
-        fragment.appendChild(document.createElement("img")).className = "icon";
-
-        var label = this._makeOutlet("label", fragment.appendChild(document.createElement("div")));
-        label.className = "label";
-    
-        var nameLabel = this._makeOutlet("nameLabel", label.appendChild(document.createElement("span")));
-        nameLabel.className = "name";
-
-        var pseudoLabel = this._makeOutlet("pseudoLabel", document.createElement("span"));
-        pseudoLabel.className = "pseudo-element";
-
-        var reflectionLabel = this._makeOutlet("reflectionLabel", document.createElement("span"));
-        reflectionLabel.className = "reflection";
-        reflectionLabel.textContent = " \u2014 " + WebInspector.UIString("Reflection");
-
-        var goToButton = this._makeOutlet("goToButton", fragment.appendChild(WebInspector.createGoToArrowButton()));
-        goToButton.addEventListener("click", this._goToArrowWasClicked.bind(this), false);
-        
-        return fragment;
-    },
-
-    _updateCell: function(columnIdentifier)
-    {
-        var data = this._data[columnIdentifier];
-        if (columnIdentifier === "name")
-            this._updateNameCellData(data);
-        else
-            this._outlets[columnIdentifier].textContent = data;
-    },
-
-    _updateNameCellData: function(data)
-    {
-        var layer = this._layer;
-        var label = this._outlets.label;
-
-        this._outlets.nameLabel.textContent = data;
-
-        if (layer.pseudoElement)
-            label.appendChild(this._outlets.pseudoLabel).textContent = "::" + layer.pseudoElement;
-        else if (this._outlets.pseudoLabel.parentNode)
-            label.removeChild(this._outlets.pseudoLabel);
-
-        if (layer.isReflection)
-            label.appendChild(this._outlets.reflectionLabel);
-        else if (this._outlets.reflectionLabel.parentNode)
-            label.removeChild(this._outlets.reflectionLabel);
-
-        if (WebInspector.domTreeManager.nodeForId(layer.nodeId))
-            label.parentNode.appendChild(this._outlets.goToButton);
-        else if (this._outlets.goToButton.parentNode)
-            label.parentNode.removeChild(this._outlets.goToButton);
-
-        var element = this.element;
-        if (layer.isReflection)
-            element.classList.add("reflection");
-        else if (layer.pseudoElement)
-            element.classList.add("pseudo-element");
-    },
-
-    _goToArrowWasClicked: function()
-    {
-        var domNode = WebInspector.domTreeManager.nodeForId(this._layer.nodeId);
-        WebInspector.resourceSidebarPanel.showMainFrameDOMTree(domNode, true);
-    }
-};
-
-WebInspector.LayerTreeDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeManager.js b/Source/WebInspectorUI/UserInterface/LayerTreeManager.js
deleted file mode 100644
index ac22f4e7f..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeManager.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayerTreeManager = function() {
-    WebInspector.Object.call(this);
-
-    this._supported = !!window.LayerTreeAgent;
-
-    if (this._supported)
-        LayerTreeAgent.enable();
-};
-
-WebInspector.LayerTreeManager.Event = {
-    LayerTreeDidChange: "layer-tree-did-change"
-};
-
-WebInspector.LayerTreeManager.prototype = {
-    constructor: WebInspector.LayerTreeManager,
-
-    // Public
-
-    get supported()
-    {
-        return this._supported;
-    },
-
-    layerTreeMutations: function(previousLayers, newLayers)
-    {
-        console.assert(this.supported);
-
-        if (isEmptyObject(previousLayers)) {
-            return {
-                preserved: [],
-                additions: newLayers,
-                removals: []
-            };
-        }
-
-        function nodeIdForLayer(layer)
-        {
-            return layer.isGeneratedContent ? layer.pseudoElementId : layer.nodeId;
-        }
-
-        var layerIdsInPreviousLayers = [];
-        var nodeIdsInPreviousLayers = [];
-        var nodeIdsForReflectionsInPreviousLayers = [];
-
-        previousLayers.forEach(function(layer) {
-            layerIdsInPreviousLayers.push(layer.layerId);
-
-            var nodeId = nodeIdForLayer(layer);
-            if (!nodeId)
-                return;
-
-            if (layer.isReflection)
-                nodeIdsForReflectionsInPreviousLayers.push(nodeId);
-            else
-                nodeIdsInPreviousLayers.push(nodeId);
-        });
-
-        var preserved = [];
-        var additions = [];
-
-        var layerIdsInNewLayers = [];
-        var nodeIdsInNewLayers = [];
-        var nodeIdsForReflectionsInNewLayers = [];
-
-        newLayers.forEach(function(layer) {
-            layerIdsInNewLayers.push(layer.layerId);
-
-            var existed = layerIdsInPreviousLayers.contains(layer.layerId);
-
-            var nodeId = nodeIdForLayer(layer);
-            if (!nodeId)
-                return;
-
-            if (layer.isReflection) {
-                nodeIdsForReflectionsInNewLayers.push(nodeId);
-                existed = existed || nodeIdsForReflectionsInPreviousLayers.contains(nodeId);
-            } else {
-                nodeIdsInNewLayers.push(nodeId);
-                existed = existed || nodeIdsInPreviousLayers.contains(nodeId);
-            }
-
-            if (existed)
-                preserved.push(layer);
-            else
-                additions.push(layer);
-        });
-
-        var removals = previousLayers.filter(function(layer) {
-            var nodeId = nodeIdForLayer(layer);
-
-            if (layer.isReflection)
-                return !nodeIdsForReflectionsInNewLayers.contains(nodeId);
-            else
-                return !nodeIdsInNewLayers.contains(nodeId) && !layerIdsInNewLayers.contains(layer.layerId);
-        });
-
-        return {
-            preserved: preserved,
-            additions: additions,
-            removals: removals
-        };
-    },
-
-    layersForNode: function(node, callback)
-    {
-        console.assert(this.supported);
-
-        LayerTreeAgent.layersForNode(node.id, function(error, layers) {
-            if (error || isEmptyObject(layers)) {
-                callback(null, []);
-                return;
-            }
-
-            var firstLayer = layers[0];
-            var layerForNode = firstLayer.nodeId === node.id && !firstLayer.isGeneratedContent ? layers.shift() : null;
-            callback(layerForNode, layers);
-        }.bind(this));
-    },
-
-    reasonsForCompositingLayer: function(layer, callback)
-    {
-        console.assert(this.supported);
-
-        LayerTreeAgent.reasonsForCompositingLayer(layer.layerId, function(error, reasons) {
-            callback(error ? 0 : reasons);
-        });
-    },
-
-    layerTreeDidChange: function()
-    {
-        this.dispatchEventToListeners(WebInspector.LayerTreeManager.Event.LayerTreeDidChange);
-    }
-};
-
-WebInspector.LayerTreeManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeObserver.js b/Source/WebInspectorUI/UserInterface/LayerTreeObserver.js
deleted file mode 100644
index 58fa4adc2..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeObserver.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayerTreeObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.LayerTreeObserver.prototype = {
-    constructor: WebInspector.LayerTreeObserver,
-
-    // Events defined by the "LayerTree" domain (see WebCore/inspector/Inspector.json).
-
-    layerTreeDidChange: function()
-    {
-        if (WebInspector.layerTreeManager.supported)
-            WebInspector.layerTreeManager.layerTreeDidChange();
-    }
-};
-
-WebInspector.LayerTreeObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css b/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css
deleted file mode 100644
index ad8db32d8..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.css
+++ /dev/null
@@ -1,222 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-
-/* We use an internal container to act as a vertical stack. */
-
-.layer-tree.panel .box-container {
-    height: 100%;
-    /* Let it stack its content as vertical boxes. */
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
-}
-
-/* Hide the collapsed arrow from sections. */
-
-.layer-tree.panel .details-section > .header::before {
-    /* Don't show the collpased arrow. */
-    display: none;
-}
-
-.layer-tree.panel .details-section > .header {
-    /* Add a little padding since there's no arrow to show. */
-    padding-left: 4px;
-    /* Turn off mouse events so we can't click to toggle section. */
-    pointer-events: none;
-}
-
-.layer-tree.panel .details-section > .header > label {
-    /* Always show the options box. */
-    display: block !important;
-    /* Turn on events just for the <label> and <input>. */
-    pointer-events: all;
-}
-
-/* Customizing the DataGrid. */
-
-.layer-tree.panel .details-section.layer-children {
-    position: relative;
-    /* Use all available vertical space. */
-    -webkit-flex: 1;
-    /* Let children stack vertically. */
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
-}
-
-.layer-tree.panel .details-section.layer-children > .content {
-    position: relative;
-    display: block;
-    /* Use all available vertical space. */
-    -webkit-flex: 1;
-}
-
-.layer-tree.panel .details-section.layer-children .group {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-.layer-tree.panel .data-grid {
-    position: relative;
-    top: 0px;
-    width: 100%;
-    height: 100%;
-    /* Turn off the default borders, we want to snap to edges. */
-    border: none;
-}
-
-.layer-tree.panel .data-grid table.data {
-    background-size: 100% 44px;
-}
-
-.layer-tree.panel .data-container {
-    position: absolute;
-    /* Leave room for the data grid header. */
-    top: 16px;
-    /* Use all remaining vertical space in the container. */
-    bottom: 0;
-    /* Let the inline table content scroll, independently of the header. */
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.layer-tree.panel .data-container tr {
-    height: 22px;
-}
-
-.layer-tree.panel .data-container td > div {
-    display: -webkit-flex;
-    width: 100%;
-    height: 100%;
-    -webkit-align-items: center;
-    -webkit-justify-content: flex-end;
-}
-
-/* Customizing the DataGrid "node" cell. */
-
-.layer-tree.panel .data-container .name-column {
-    padding-right: 0;
-}
-
-.layer-tree.panel .data-container .name-column .icon {
-    vertical-align: top;
-    width: 16px;
-    height: 16px;
-    content: url(Images/DOMElement.pdf);
-}
-
-.layer-tree.panel .data-container tr.reflection .name-column .icon {
-    content: url(Images/Reflection.pdf);
-}
-
-.layer-tree.panel .data-container tr.pseudo-element .name-column .icon {
-    content: url(Images/PseudoElement.pdf);
-}
-
-.layer-tree.panel .data-container .name-column .label {
-    -webkit-flex: 1;
-    padding: 0 4px;
-
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.layer-tree.panel .data-container tr:hover .name-column .label {
-    padding-right: 0;
-}
-
-.layer-tree.panel .data-container .name-column .pseudo-element,
-.layer-tree.panel .data-container .name-column .reflection {
-    color: rgb(128, 128, 128);
-}
-
-.layer-tree.panel .data-container tr.selected .name-column .pseudo-element,
-.layer-tree.panel .data-container tr.selected .name-column .reflection {
-    color: rgba(255, 255, 255, 0.75);
-}
-
-.layer-tree.panel .data-container .go-to-arrow {
-    display: none;
-}
-
-.layer-tree.panel .data-container tr:hover .go-to-arrow {
-    display: block;
-}
-
-/* Bottom bar */
-
-.layer-tree.panel .bottom-bar {
-    position: relative;
-    height: 22px;
-    /* Let it stack its content as horizontal boxes. */
-    display: -webkit-flex;
-}
-
-.layer-tree.panel .bottom-bar > div {
-    padding: 4px;
-    box-sizing: border-box;
-
-    font-family: 'Lucida Grande', sans-serif;
-    font-size: 11px;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-
-    /* Ensure any overflowing text is trimmed. */
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    /* Let all boxes have the same width. */
-    display: -webkit-flex;
-    -webkit-flex: 1;
-}
-
-.layer-tree.panel .layers-memory-label {
-    -webkit-justify-content: flex-end;
-}
-
-/* popover */
-
-.layer-tree-popover {
-    font-family: 'Lucida Grande', sans-serif;
-    font-size: 11px;
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-
-    padding: 5px;
-}
-
-.layer-tree-popover p {
-    margin: 0;
-}
-
-.layer-tree-popover ul {
-    list-style-type: none;
-    margin: 10px 0 0 0;
-    padding-left: 10px;
-}
-
-.layer-tree-popover li {
-    line-height: 1.3em;
-}
diff --git a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js b/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
deleted file mode 100644
index 2189d1acd..000000000
--- a/Source/WebInspectorUI/UserInterface/LayerTreeSidebarPanel.js
+++ /dev/null
@@ -1,437 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayerTreeSidebarPanel = function() {
-    WebInspector.DOMDetailsSidebarPanel.call(this, "layer-tree", WebInspector.UIString("Layers"), WebInspector.UIString("Layer"), "Images/NavigationItemLayers.pdf", "3");
-
-    this._dataGridNodesByLayerId = {};
-
-    this.element.classList.add(WebInspector.LayerTreeSidebarPanel.StyleClassName);
-
-    WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
-
-    window.addEventListener("resize", this._windowResized.bind(this));
-
-    // Add a container that will host all sections as a vertical stack.
-    this._container = this.element.appendChild(document.createElement("div"));
-    this._container.className = "box-container";
-
-    this._buildLayerInfoSection();
-    this._buildDataGridSection();
-    this._buildBottomBar();
-};
-
-WebInspector.LayerTreeSidebarPanel.StyleClassName = "layer-tree";
-
-WebInspector.LayerTreeSidebarPanel.prototype = {
-    constructor: WebInspector.LayerTreeSidebarPanel,
-
-    // DetailsSidebarPanel Overrides.
-
-    shown: function()
-    {
-        WebInspector.layerTreeManager.addEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
-
-        console.assert(this.parentSidebar);
-
-        this.needsRefresh();
-
-        WebInspector.DOMDetailsSidebarPanel.prototype.shown.call(this);
-    },
-
-    hidden: function()
-    {
-        WebInspector.layerTreeManager.removeEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
-
-        WebInspector.DOMDetailsSidebarPanel.prototype.hidden.call(this);
-    },
-
-    refresh: function()
-    {
-        if (!this.domNode)
-            return;
-
-        WebInspector.layerTreeManager.layersForNode(this.domNode, function(layerForNode, childLayers) {
-            this._unfilteredChildLayers = childLayers;
-            this._updateDisplayWithLayers(layerForNode, childLayers);
-        }.bind(this));
-    },
-
-    // DOMDetailsSidebarPanel Overrides
-
-    supportsDOMNode: function(nodeToInspect)
-    {
-        return WebInspector.layerTreeManager.supported && nodeToInspect.nodeType() === Node.ELEMENT_NODE;
-    },
-
-    // Private
-
-    _layerTreeDidChange: function(event)
-    {
-        this.needsRefresh();
-    },
-
-    _showShadowDOMSettingChanged: function(event)
-    {
-        if (this.selected)
-            this._updateDisplayWithLayers(this._layerForNode, this._unfilteredChildLayers);
-    },
-
-    _windowResized: function(event)
-    {
-        if (this._popover && this._popover.visible)
-            this._updatePopoverForSelectedNode();
-    },
-
-    _buildLayerInfoSection: function()
-    {
-        var rows = this._layerInfoRows = {};
-        var rowsArray = [];
-
-        rowsArray.push(rows["Width"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width")));
-        rowsArray.push(rows["Height"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height")));
-        rowsArray.push(rows["Paints"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Paints")));
-        rowsArray.push(rows["Memory"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Memory")));
-
-        this._layerInfoGroup = new WebInspector.DetailsSectionGroup(rowsArray);
-
-        var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Layer Available"));
-        emptyRow.showEmptyMessage();
-        this._noLayerInformationGroup = new WebInspector.DetailsSectionGroup([emptyRow]);
-
-        this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
-
-        this._container.appendChild(this._layerInfoSection.element);
-    },
-
-    _buildDataGridSection: function()
-    {
-        this._dataGrid = new WebInspector.LayerTreeDataGrid;
-
-        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
-        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
-
-        var element = this._dataGrid.element;
-        element.addEventListener("focus", this._dataGridGainedFocus.bind(this), false);
-        element.addEventListener("blur", this._dataGridLostFocus.bind(this), false);
-        element.addEventListener("click", this._dataGridWasClicked.bind(this), false);
-
-        this._childLayersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Child Layers"));
-        var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
-        var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
-
-        // Display it in the container with a class name so we can easily style it differently to other sections,
-        // this specific section is meant to scale to fill the space available vertically.
-        var element = this._container.appendChild(section.element);
-        element.classList.add(section.identifier);
-    },
-
-    _buildBottomBar: function()
-    {
-        var bottomBar = this._container.appendChild(document.createElement("div"));
-        bottomBar.className = "bottom-bar";
-
-        this._layersCountLabel = bottomBar.appendChild(document.createElement("div"));
-        this._layersCountLabel.className = "layers-count-label";
-
-        this._layersMemoryLabel = bottomBar.appendChild(document.createElement("div"));
-        this._layersMemoryLabel.className = "layers-memory-label";
-    },
-    
-    _sortDataGrid: function()
-    {
-        var dataGrid = this._dataGrid;
-
-        var nodes = dataGrid.children.slice();
-        var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
-        var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
-
-        function comparator(a, b)
-        {
-            var item1 = a.layer[sortColumnIdentifier] || 0;
-            var item2 = b.layer[sortColumnIdentifier] || 0;
-            return sortDirection * (item1 - item2);
-        };
-
-        nodes.sort(comparator);
-
-        dataGrid.setChildren(nodes);
-    },
-
-    _selectedDataGridNodeChanged: function()
-    {
-        if (this._dataGrid.selectedNode) {
-            this._highlightSelectedNode();
-            this._showPopoverForSelectedNode();
-        } else {
-            WebInspector.domTreeManager.hideDOMNodeHighlight();
-            this._hidePopover();
-        }
-    },
-
-    _dataGridGainedFocus: function(event)
-    {
-        this._highlightSelectedNode();
-        this._showPopoverForSelectedNode();
-    },
-
-    _dataGridLostFocus: function(event)
-    {
-        WebInspector.domTreeManager.hideDOMNodeHighlight();
-        this._hidePopover();
-    },
-
-    _dataGridWasClicked: function(event)
-    {
-        if (this._dataGrid.selectedNode && event.target.parentNode.classList.contains("filler"))
-            this._dataGrid.selectedNode.deselect();
-    },
-
-    _highlightSelectedNode: function()
-    {
-        var dataGridNode = this._dataGrid.selectedNode;
-        if (!dataGridNode)
-            return;
-
-        var layer = dataGridNode.layer;
-        if (layer.isGeneratedContent || layer.isReflection || layer.isAnonymous)
-            WebInspector.domTreeManager.highlightRect(layer.bounds, true);
-        else
-            WebInspector.domTreeManager.highlightDOMNode(layer.nodeId);
-    },
-
-    _updateDisplayWithLayers: function(layerForNode, childLayers)
-    {
-        if (!WebInspector.showShadowDOMSetting.value) {
-            childLayers = childLayers.filter(function(layer) {
-                return !layer.isInShadowTree;
-            });
-        }
-
-        this._updateLayerInfoSection(layerForNode);
-        this._updateDataGrid(layerForNode, childLayers);
-        this._updateMetrics(layerForNode, childLayers);
-
-        this._layerForNode = layerForNode;
-        this._childLayers = childLayers;
-    },
-
-    _updateLayerInfoSection: function(layer)
-    {
-        const emDash = "\u2014";
-
-        this._layerInfoSection.groups = layer ? [this._layerInfoGroup] : [this._noLayerInformationGroup];
-
-        if (!layer)
-            return;
-
-        this._layerInfoRows["Memory"].value = Number.bytesToString(layer.memory);
-        this._layerInfoRows["Width"].value = layer.compositedBounds.width + "px";
-        this._layerInfoRows["Height"].value = layer.compositedBounds.height + "px";
-        this._layerInfoRows["Paints"].value = layer.paintCount + "";
-    },
-
-    _updateDataGrid: function(layerForNode, childLayers)
-    {
-        var dataGrid = this._dataGrid;
-
-        var mutations = WebInspector.layerTreeManager.layerTreeMutations(this._childLayers, childLayers);
-
-        mutations.removals.forEach(function(layer) {
-            var node = this._dataGridNodesByLayerId[layer.layerId];
-            if (node) {
-                dataGrid.removeChild(node);
-                delete this._dataGridNodesByLayerId[layer.layerId];
-            }
-        }.bind(this));
-
-        mutations.additions.forEach(function(layer) {
-            var node = this._dataGridNodeForLayer(layer);
-            if (node)
-                dataGrid.appendChild(node);
-        }.bind(this));
-
-        mutations.preserved.forEach(function(layer) {
-            var node = this._dataGridNodesByLayerId[layer.layerId];
-            if (node)
-                node.layer = layer;
-        }.bind(this));
-
-        this._sortDataGrid();
-
-        this._childLayersRow.dataGrid = !isEmptyObject(childLayers) ? this._dataGrid : null;
-    },
-    
-    _dataGridNodeForLayer: function(layer)
-    {
-        var node = new WebInspector.LayerTreeDataGridNode(layer);
-
-        this._dataGridNodesByLayerId[layer.layerId] = node;
-
-        return node;
-    },
-    
-    _updateMetrics: function(layerForNode, childLayers)
-    {
-        var layerCount = 0;
-        var totalMemory = 0;
-
-        if (layerForNode) {
-            layerCount++;
-            totalMemory += layerForNode.memory || 0;
-        }
-
-        childLayers.forEach(function(layer) {
-            layerCount++;
-            totalMemory += layer.memory || 0;
-        });
-
-        this._layersCountLabel.textContent = WebInspector.UIString("Layer count: %d").format(layerCount);
-        this._layersMemoryLabel.textContent = WebInspector.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
-    },
-
-    _showPopoverForSelectedNode: function()
-    {
-        var dataGridNode = this._dataGrid.selectedNode;
-        if (!dataGridNode)
-            return;
-
-        this._contentForPopover(dataGridNode.layer, function(content) {
-            if (dataGridNode === this._dataGrid.selectedNode)
-                this._updatePopoverForSelectedNode(content);
-        }.bind(this));
-    },
-
-    _updatePopoverForSelectedNode: function(content)
-    {
-        var dataGridNode = this._dataGrid.selectedNode;
-        if (!dataGridNode)
-            return;
-
-        var popover = this._popover;
-        if (!popover)
-            popover = this._popover = new WebInspector.Popover;
-
-        var targetFrame = WebInspector.Rect.rectFromClientRect(dataGridNode.element.getBoundingClientRect());
-        const padding = 2;
-        targetFrame.origin.x -= padding;
-        targetFrame.origin.y -= padding;
-        targetFrame.size.width += padding * 2;
-        targetFrame.size.height += padding * 2;
-
-        if (content)
-            popover.content = content;
-
-        popover.present(targetFrame, [WebInspector.RectEdge.MIN_X]);
-    },
-
-    _hidePopover: function()
-    {
-        if (this._popover)
-            this._popover.dismiss();
-    },
-
-    _contentForPopover: function(layer, callback)
-    {
-        var content = document.createElement("div");
-        content.className = "layer-tree-popover";
-        
-        content.appendChild(document.createElement("p")).textContent = WebInspector.UIString("Reasons for compositing:");
-
-        var list = content.appendChild(document.createElement("ul"));
-
-        WebInspector.layerTreeManager.reasonsForCompositingLayer(layer, function(compositingReasons) {
-            if (isEmptyObject(compositingReasons)) {
-                callback(content);
-                return;
-            }
-
-            this._populateListOfCompositingReasons(list, compositingReasons);
-
-            callback(content);
-        }.bind(this));
-
-        return content;
-    },
-
-    _populateListOfCompositingReasons: function(list, compositingReasons)
-    {
-        function addReason(reason)
-        {
-            list.appendChild(document.createElement("li")).textContent = reason;
-        }
-
-        if (compositingReasons.transform3D)
-            addReason(WebInspector.UIString("Element has a 3D transform"));
-        if (compositingReasons.video)
-            addReason(WebInspector.UIString("Element is <video>"));
-        if (compositingReasons.canvas)
-            addReason(WebInspector.UIString("Element is <canvas>"));
-        if (compositingReasons.plugin)
-            addReason(WebInspector.UIString("Element is a plug-in"));
-        if (compositingReasons.iFrame)
-            addReason(WebInspector.UIString("Element is <iframe>"));
-        if (compositingReasons.backfaceVisibilityHidden)
-            addReason(WebInspector.UIString("Element has “backface-visibility: hidden” style"));
-        if (compositingReasons.clipsCompositingDescendants)
-            addReason(WebInspector.UIString("Element clips compositing descendants"));
-        if (compositingReasons.animation)
-            addReason(WebInspector.UIString("Element is animated"));
-        if (compositingReasons.filters)
-            addReason(WebInspector.UIString("Element has CSS filters applied"));
-        if (compositingReasons.positionFixed)
-            addReason(WebInspector.UIString("Element has “position: fixed” style"));
-        if (compositingReasons.positionSticky)
-            addReason(WebInspector.UIString("Element has “position: sticky” style"));
-        if (compositingReasons.overflowScrollingTouch)
-            addReason(WebInspector.UIString("Element has “-webkit-overflow-scrolling: touch” style"));
-        if (compositingReasons.stacking)
-            addReason(WebInspector.UIString("Element establishes a stacking context"));
-        if (compositingReasons.overlap)
-            addReason(WebInspector.UIString("Element overlaps other compositing element"));
-        if (compositingReasons.negativeZIndexChildren)
-            addReason(WebInspector.UIString("Element has children with a negative z-index"));
-        if (compositingReasons.transformWithCompositedDescendants)
-            addReason(WebInspector.UIString("Element has a 2D transform and composited descendants"));
-        if (compositingReasons.opacityWithCompositedDescendants)
-            addReason(WebInspector.UIString("Element has opacity applied and composited descendants"));
-        if (compositingReasons.maskWithCompositedDescendants)
-            addReason(WebInspector.UIString("Element is masked and composited descendants"));
-        if (compositingReasons.reflectionWithCompositedDescendants)
-            addReason(WebInspector.UIString("Element has a reflection and composited descendants"));
-        if (compositingReasons.filterWithCompositedDescendants)
-            addReason(WebInspector.UIString("Element has CSS filters applied and composited descendants"));
-        if (compositingReasons.blendingWithCompositedDescendants)
-            addReason(WebInspector.UIString("Element has CSS blending applied and composited descendants"));
-        if (compositingReasons.perspective)
-            addReason(WebInspector.UIString("Element has perspective applied"));
-        if (compositingReasons.preserve3D)
-            addReason(WebInspector.UIString("Element has “transform-style: preserve-3d” style"));
-        if (compositingReasons.root)
-            addReason(WebInspector.UIString("Element is the root element"));
-    }
-};
-
-WebInspector.LayerTreeSidebarPanel.prototype.__proto__ = WebInspector.DOMDetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js
deleted file mode 100644
index f8343e7ff..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGrid.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayoutTimelineDataGrid = function(columns)
-{
-    WebInspector.TimelineDataGrid.call(this, columns);
-
-    this._showingHighlight = false;
-
-    this.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._layoutDataGridSelectedNodeChanged, this);
-}
-
-WebInspector.LayoutTimelineDataGrid.prototype = {
-    constructor: WebInspector.LayoutTimelineDataGrid,
-
-    // Protected
-
-    reset: function()
-    {
-        WebInspector.TimelineDataGrid.prototype.reset.call(this);
-
-        this._hideHighlightIfNeeded();
-    },
-
-    callFramePopoverAnchorElement: function()
-    {
-        return this.selectedNode.elementWithColumnIdentifier("initiatorCallFrame");
-    },
-
-    hidden: function()
-    {
-        WebInspector.TimelineDataGrid.prototype.hidden.call(this);
-
-        this._hideHighlightIfNeeded();
-    },
-
-    // Private
-
-    _layoutDataGridSelectedNodeChanged: function(event)
-    {
-        if (!this.selectedNode) {
-            this._hideHighlightIfNeeded();
-            return;
-        }
-
-        var record = this.selectedNode.record;
-        const contentColor = {r: 111, g: 168, b: 220, a: 0.66};
-        const outlineColor = {r: 255, g: 229, b: 153, a: 0.66};
-
-        var quad = record.quad;
-        if (quad && DOMAgent.highlightQuad) {
-            DOMAgent.highlightQuad(quad.toProtocol(), contentColor, outlineColor);
-            this._showingHighlight = true;
-            return;
-        }
-
-        // COMPATIBILITY (iOS 6): iOS 6 included Rect information instead of Quad information. Fallback to highlighting the rect.
-        var rect = record.rect;
-        if (rect) {
-            DOMAgent.highlightRect(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height, contentColor, outlineColor);
-            this._showingHighlight = true;
-            return;
-        }
-    },
-
-    _hideHighlightIfNeeded: function()
-    {
-        if (this._showingHighlight) {
-            DOMAgent.hideHighlight();
-            this._showingHighlight = false;
-        }
-    }
-}
-
-WebInspector.LayoutTimelineDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js
deleted file mode 100644
index 89f841aa2..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineDataGridNode.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayoutTimelineDataGridNode = function(layoutTimelineRecord, baseStartTime)
-{
-    WebInspector.DataGridNode.call(this, {});
-
-    this._record = layoutTimelineRecord;
-    this._baseStartTime = baseStartTime || 0;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.LayoutTimelineDataGridNode);
-
-WebInspector.LayoutTimelineDataGridNode.IconStyleClassName = "icon";
-WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName = "subtitle";
-
-WebInspector.LayoutTimelineDataGridNode.prototype = {
-    constructor: WebInspector.LayoutTimelineDataGridNode,
-
-    // Public
-
-    get record()
-    {
-        return this._record;
-    },
-
-    get data()
-    {
-        return this._record;
-    },
-
-    createCellContent: function(columnIdentifier, cell)
-    {
-        const emptyValuePlaceholderString = "\u2014";
-        var value = this.data[columnIdentifier];
-
-        switch (columnIdentifier) {
-        case "eventType":
-            return WebInspector.LayoutTimelineRecord.EventType.displayName(value);
-
-        case "initiatorCallFrame":
-            var callFrame = value;
-            if (!callFrame)
-                return emptyValuePlaceholderString;
-
-            var isAnonymousFunction = false;
-            var functionName = callFrame.functionName;
-            if (!functionName) {
-                functionName = WebInspector.UIString("(anonymous function)");
-                isAnonymousFunction = true;
-            }
-
-            cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
-
-            var fragment = document.createDocumentFragment();
-
-            if (callFrame.sourceCodeLocation && callFrame.sourceCodeLocation.sourceCode) {
-
-                // Give the whole cell a tooltip and keep it up to date.
-                callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(cell);
-
-                var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(callFrame.sourceCodeLocation, false, true);
-                fragment.appendChild(goToArrowButtonLink);
-
-                var icon = document.createElement("div");
-                icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
-                fragment.appendChild(icon);
-
-                if (isAnonymousFunction) {
-                    // For anonymous functions we show the resource or script icon and name.
-                    if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Resource) {
-                        cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
-                        cell.classList.add(callFrame.sourceCodeLocation.sourceCode.type);
-                    } else if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Script) {
-                        if (callFrame.sourceCodeLocation.sourceCode.url) {
-                            cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
-                            cell.classList.add(WebInspector.Resource.Type.Script);
-                        } else
-                            cell.classList.add(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
-                    } else {
-                        console.error("Unknown SourceCode subclass.");
-                    }
-
-                    var titleElement = document.createElement("span");
-                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(titleElement, "textContent");
-
-                    fragment.appendChild(titleElement);
-                } else {
-                    // Show the function name and icon.
-                    cell.classList.add(WebInspector.CallFrameTreeElement.FunctionIconStyleClassName);
-
-                    fragment.appendChild(document.createTextNode(functionName));
-
-                    var subtitleElement = document.createElement("span");
-                    subtitleElement.className = WebInspector.LayoutTimelineDataGridNode.SubtitleStyleClassName;
-                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, "textContent");
-
-                    fragment.appendChild(subtitleElement);
-                }
-
-                return fragment;
-            }
-
-            var icon = document.createElement("div");
-            icon.className = WebInspector.LayoutTimelineDataGridNode.IconStyleClassName;
-            fragment.appendChild(icon);
-
-            fragment.appendChild(document.createTextNode(functionName));
-
-            return fragment;
-
-        case "width":
-        case "height":
-            return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx").format(value);
-
-        case "area":
-            return isNaN(value) ? emptyValuePlaceholderString : WebInspector.UIString("%fpx²").format(value);
-
-        case "startTime":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime);
-
-        case "duration":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
-        }
-
-        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
-    }
-}
-
-WebInspector.LayoutTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js b/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js
deleted file mode 100644
index 63bcf35b5..000000000
--- a/Source/WebInspectorUI/UserInterface/LayoutTimelineRecord.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LayoutTimelineRecord = function(eventType, startTime, endTime, callFrames, x, y, width, height, quad)
-{
-    WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Layout, startTime, endTime);
-
-    console.assert(eventType);
-
-    if (eventType in WebInspector.LayoutTimelineRecord.EventType)
-        eventType = WebInspector.LayoutTimelineRecord.EventType[eventType];
-
-    this._eventType = eventType;
-    this._callFrames = callFrames || [];
-    this._x = typeof x === "number" ? x : NaN;
-    this._y = typeof y === "number" ? y : NaN;
-    this._width = typeof width === "number" ? width : NaN;
-    this._height = typeof height === "number" ? height : NaN;
-    this._quad = quad instanceof WebInspector.Quad ? quad : null;
-};
-
-WebInspector.LayoutTimelineRecord.EventType = {
-    InvalidateStyles: "layout-timeline-record-invalidate-styles",
-    RecalculateStyles: "layout-timeline-record-recalculate-styles",
-    InvalidateLayout: "layout-timeline-record-invalidate-layout",
-    Layout: "layout-timeline-record-layout",
-    Paint: "layout-timeline-record-paint"
-};
-
-WebInspector.LayoutTimelineRecord.EventType.displayName = function(eventType)
-{
-    switch(eventType) {
-    case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
-        return WebInspector.UIString("Invalidate Styles");
-    case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
-        return WebInspector.UIString("Recalculate Styles");
-    case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
-        return WebInspector.UIString("Invalidate Layout");
-    case WebInspector.LayoutTimelineRecord.EventType.Layout:
-        return WebInspector.UIString("Layout");
-    case WebInspector.LayoutTimelineRecord.EventType.Paint:
-        return WebInspector.UIString("Paint");
-    }
-};
-
-WebInspector.LayoutTimelineRecord.prototype = {
-    constructor: WebInspector.LayoutTimelineRecord,
-
-    // Public
-
-    get eventType()
-    {
-        return this._eventType;
-    },
-
-    get callFrames()
-    {
-        return this._callFrames;
-    },
-
-    get initiatorCallFrame()
-    {
-        if (!this._callFrames || !this._callFrames.length)
-            return null;
-
-        // Return the first non-native code call frame as the initiator.
-        for (var i = 0; i < this._callFrames.length; ++i) {
-            if (this._callFrames[i].nativeCode)
-                continue;
-            return this._callFrames[i];
-        }
-
-        return null;
-    },
-
-    get x()
-    {
-        return this._x;
-    },
-
-    get y()
-    {
-        return this._y;
-    },
-
-    get width()
-    {
-        return this._width;
-    },
-
-    get height()
-    {
-        return this._height;
-    },
-
-    get area()
-    {
-        return this._width * this._height;
-    },
-
-    get rect()
-    {
-        if (!isNaN(this._x) && !isNaN(this._y))
-            return new WebInspector.Rect(this._x, this._y, this._width, this._height);
-        return null;
-    },
-
-    get quad()
-    {
-        return this._quad;
-    }
-};
-
-WebInspector.LayoutTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Legacy/6.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Legacy/6.0/InspectorBackendCommands.js
deleted file mode 100644
index ca5812b4c..000000000
--- a/Source/WebInspectorUI/UserInterface/Legacy/6.0/InspectorBackendCommands.js
+++ /dev/null
@@ -1,285 +0,0 @@
-// File is generated by WebCore/WebCore/inspector/CodeGeneratorInspector.py
-
-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-
-// Inspector.
-InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
-InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["testCallId", "script"]);
-InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
-InspectorBackend.registerEvent("Inspector.didCreateWorker", ["id", "url", "isShared"]);
-InspectorBackend.registerEvent("Inspector.didDestroyWorker", ["id"]);
-InspectorBackend.registerCommand("Inspector.enable", [], []);
-InspectorBackend.registerCommand("Inspector.disable", [], []);
-
-// Memory.
-InspectorBackend.registerMemoryDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Memory");
-InspectorBackend.registerCommand("Memory.getDOMNodeCount", [], ["domGroups", "strings"]);
-
-// Page.
-InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
-InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
-InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
-InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
-InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
-InspectorBackend.registerCommand("Page.enable", [], []);
-InspectorBackend.registerCommand("Page.disable", [], []);
-InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
-InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}], []);
-InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.getCookies", [], ["cookies", "cookiesString"]);
-InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "domain", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
-InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
-InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Page.canOverrideDeviceMetrics", [], ["result"]);
-InspectorBackend.registerCommand("Page.setDeviceMetricsOverride", [{"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "fontScaleFactor", "type": "number", "optional": false}, {"name": "fitWindow", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.setShowPaintRects", [{"name": "result", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
-InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
-
-// Runtime.
-InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "frameId", "type": "string", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Runtime.run", [], []);
-
-// Console.
-InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
-InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
-InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
-InspectorBackend.registerEvent("Console.messagesCleared", []);
-InspectorBackend.registerCommand("Console.enable", [], []);
-InspectorBackend.registerCommand("Console.disable", [], []);
-InspectorBackend.registerCommand("Console.clearMessages", [], []);
-InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Console.addInspectedHeapObject", [{"name": "heapObjectId", "type": "number", "optional": false}], []);
-
-// Network.
-InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
-InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse"]);
-InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
-InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
-InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
-InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp"]);
-InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
-InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
-InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
-InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
-InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
-InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
-InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
-InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
-InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
-InspectorBackend.registerCommand("Network.enable", [], []);
-InspectorBackend.registerCommand("Network.disable", [], []);
-InspectorBackend.registerCommand("Network.setUserAgentOverride", [{"name": "userAgent", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
-InspectorBackend.registerCommand("Network.canClearBrowserCache", [], ["result"]);
-InspectorBackend.registerCommand("Network.clearBrowserCache", [], []);
-InspectorBackend.registerCommand("Network.canClearBrowserCookies", [], ["result"]);
-InspectorBackend.registerCommand("Network.clearBrowserCookies", [], []);
-InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
-
-// Database.
-InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
-InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
-InspectorBackend.registerEvent("Database.sqlTransactionSucceeded", ["transactionId", "columnNames", "values"]);
-InspectorBackend.registerEvent("Database.sqlTransactionFailed", ["transactionId", "sqlError"]);
-InspectorBackend.registerCommand("Database.enable", [], []);
-InspectorBackend.registerCommand("Database.disable", [], []);
-InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
-InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["success", "transactionId"]);
-
-// IndexedDB.
-InspectorBackend.registerIndexedDBDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "IndexedDB");
-InspectorBackend.registerEvent("IndexedDB.databaseNamesLoaded", ["requestId", "securityOriginWithDatabaseNames"]);
-InspectorBackend.registerEvent("IndexedDB.databaseLoaded", ["requestId", "databaseWithObjectStores"]);
-InspectorBackend.registerEvent("IndexedDB.objectStoreDataLoaded", ["requestId", "objectStoreDataEntries", "hasMore"]);
-InspectorBackend.registerEvent("IndexedDB.indexDataLoaded", ["requestId", "indexDataEntries", "hasMore"]);
-InspectorBackend.registerCommand("IndexedDB.enable", [], []);
-InspectorBackend.registerCommand("IndexedDB.disable", [], []);
-InspectorBackend.registerCommand("IndexedDB.requestDatabaseNamesForFrame", [{"name": "requestId", "type": "number", "optional": false}, {"name": "frameId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("IndexedDB.requestDatabase", [{"name": "requestId", "type": "number", "optional": false}, {"name": "frameId", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("IndexedDB.requestData", [{"name": "requestId", "type": "number", "optional": false}, {"name": "frameId", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}, {"name": "indexName", "type": "string", "optional": false}, {"name": "skipCount", "type": "number", "optional": false}, {"name": "pageSize", "type": "number", "optional": false}, {"name": "keyRange", "type": "object", "optional": true}], []);
-
-// DOMStorage.
-InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
-InspectorBackend.registerEvent("DOMStorage.addDOMStorage", ["storage"]);
-InspectorBackend.registerEvent("DOMStorage.updateDOMStorage", ["storageId"]);
-InspectorBackend.registerCommand("DOMStorage.enable", [], []);
-InspectorBackend.registerCommand("DOMStorage.disable", [], []);
-InspectorBackend.registerCommand("DOMStorage.getDOMStorageEntries", [{"name": "storageId", "type": "string", "optional": false}], ["entries"]);
-InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "string", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], ["success"]);
-InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "string", "optional": false}, {"name": "key", "type": "string", "optional": false}], ["success"]);
-
-// ApplicationCache.
-InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
-InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
-InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
-InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
-InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
-InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
-InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
-
-// FileSystem.
-InspectorBackend.registerFileSystemDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "FileSystem");
-InspectorBackend.registerCommand("FileSystem.enable", [], []);
-InspectorBackend.registerCommand("FileSystem.disable", [], []);
-
-// DOM.
-InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
-InspectorBackend.registerEvent("DOM.documentUpdated", []);
-InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
-InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
-InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
-InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
-InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
-InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
-InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
-InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
-InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
-InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
-InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
-InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
-InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["listeners"]);
-InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
-InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}], ["searchId", "resultCount"]);
-InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
-InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
-InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
-InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
-InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
-InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
-InspectorBackend.registerCommand("DOM.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("DOM.undo", [], []);
-InspectorBackend.registerCommand("DOM.redo", [], []);
-InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
-
-// CSS.
-InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
-InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
-InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
-InspectorBackend.registerCommand("CSS.enable", [], []);
-InspectorBackend.registerCommand("CSS.disable", [], []);
-InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": true}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
-InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
-InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": true}], ["computedStyle"]);
-InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
-InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
-InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
-InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("CSS.setPropertyText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "overwrite", "type": "boolean", "optional": false}], ["style"]);
-InspectorBackend.registerCommand("CSS.toggleProperty", [{"name": "styleId", "type": "object", "optional": false}, {"name": "propertyIndex", "type": "number", "optional": false}, {"name": "disable", "type": "boolean", "optional": false}], ["style"]);
-InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
-InspectorBackend.registerCommand("CSS.addRule", [{"name": "contextNodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
-InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
-InspectorBackend.registerCommand("CSS.startSelectorProfiler", [], []);
-InspectorBackend.registerCommand("CSS.stopSelectorProfiler", [], ["profile"]);
-
-// Timeline.
-InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
-InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
-InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
-InspectorBackend.registerCommand("Timeline.stop", [], []);
-InspectorBackend.registerCommand("Timeline.setIncludeMemoryDetails", [{"name": "enabled", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Timeline.supportsFrameInstrumentation", [], ["result"]);
-
-// Debugger.
-InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
-InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
-InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL"]);
-InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
-InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
-InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
-InspectorBackend.registerEvent("Debugger.resumed", []);
-InspectorBackend.registerCommand("Debugger.causesRecompilation", [], ["result"]);
-InspectorBackend.registerCommand("Debugger.supportsNativeBreakpoints", [], ["result"]);
-InspectorBackend.registerCommand("Debugger.enable", [], []);
-InspectorBackend.registerCommand("Debugger.disable", [], []);
-InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "locations"]);
-InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "actualLocation"]);
-InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.stepOver", [], []);
-InspectorBackend.registerCommand("Debugger.stepInto", [], []);
-InspectorBackend.registerCommand("Debugger.stepOut", [], []);
-InspectorBackend.registerCommand("Debugger.pause", [], []);
-InspectorBackend.registerCommand("Debugger.resume", [], []);
-InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
-InspectorBackend.registerCommand("Debugger.canSetScriptSource", [], ["result"]);
-InspectorBackend.registerCommand("Debugger.setScriptSource", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "scriptSource", "type": "string", "optional": false}, {"name": "preview", "type": "boolean", "optional": true}], ["callFrames", "result"]);
-InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
-InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
-InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
-
-// DOMDebugger.
-InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
-InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
-
-// Profiler.
-InspectorBackend.registerProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Profiler");
-InspectorBackend.registerEvent("Profiler.addProfileHeader", ["header"]);
-InspectorBackend.registerEvent("Profiler.addHeapSnapshotChunk", ["uid", "chunk"]);
-InspectorBackend.registerEvent("Profiler.finishHeapSnapshot", ["uid"]);
-InspectorBackend.registerEvent("Profiler.setRecordingProfile", ["isProfiling"]);
-InspectorBackend.registerEvent("Profiler.resetProfiles", []);
-InspectorBackend.registerEvent("Profiler.reportHeapSnapshotProgress", ["done", "total"]);
-InspectorBackend.registerCommand("Profiler.causesRecompilation", [], ["result"]);
-InspectorBackend.registerCommand("Profiler.isSampling", [], ["result"]);
-InspectorBackend.registerCommand("Profiler.hasHeapProfiler", [], ["result"]);
-InspectorBackend.registerCommand("Profiler.enable", [], []);
-InspectorBackend.registerCommand("Profiler.disable", [], []);
-InspectorBackend.registerCommand("Profiler.start", [], []);
-InspectorBackend.registerCommand("Profiler.stop", [], []);
-InspectorBackend.registerCommand("Profiler.getProfileHeaders", [], ["headers"]);
-InspectorBackend.registerCommand("Profiler.getProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], ["profile"]);
-InspectorBackend.registerCommand("Profiler.removeProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Profiler.clearProfiles", [], []);
-InspectorBackend.registerCommand("Profiler.takeHeapSnapshot", [], []);
-InspectorBackend.registerCommand("Profiler.collectGarbage", [], []);
-InspectorBackend.registerCommand("Profiler.getObjectByHeapObjectId", [{"name": "objectId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["result"]);
-
-// Worker.
-InspectorBackend.registerWorkerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Worker");
-InspectorBackend.registerEvent("Worker.workerCreated", ["workerId", "url", "inspectorConnected"]);
-InspectorBackend.registerEvent("Worker.workerTerminated", ["workerId"]);
-InspectorBackend.registerEvent("Worker.dispatchMessageFromWorker", ["workerId", "message"]);
-InspectorBackend.registerEvent("Worker.disconnectedFromWorker", []);
-InspectorBackend.registerCommand("Worker.setWorkerInspectionEnabled", [{"name": "value", "type": "boolean", "optional": false}], []);
-InspectorBackend.registerCommand("Worker.sendMessageToWorker", [{"name": "workerId", "type": "number", "optional": false}, {"name": "message", "type": "object", "optional": false}], []);
-InspectorBackend.registerCommand("Worker.connectToWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Worker.disconnectFromWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
-InspectorBackend.registerCommand("Worker.setAutoconnectToWorkers", [{"name": "value", "type": "boolean", "optional": false}], []);
diff --git a/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js
deleted file mode 100644
index 501b39899..000000000
--- a/Source/WebInspectorUI/UserInterface/LoadInspectorBackendCommands.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-(function() {
-    var backendCommandsURL = "InspectorBackendCommands.js";
-    if (InspectorFrontendHost.inspectorBackendCommandsURL) {
-        var suggestedBackendCommandsURL = InspectorFrontendHost.inspectorBackendCommandsURL();
-        if (suggestedBackendCommandsURL)
-            backendCommandsURL = suggestedBackendCommandsURL;
-    }
-
-    document.write("<script src=\"" + backendCommandsURL + "\"></script>");
-})();
diff --git a/Source/WebInspectorUI/UserInterface/LoadLocalizedStrings.js b/Source/WebInspectorUI/UserInterface/LoadLocalizedStrings.js
deleted file mode 100644
index bfb47c4c4..000000000
--- a/Source/WebInspectorUI/UserInterface/LoadLocalizedStrings.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-(function() {
-    var localizedStringsURL = InspectorFrontendHost.localizedStringsURL();
-    console.assert(localizedStringsURL);
-    if (localizedStringsURL)
-        document.write("<script src=\"" + localizedStringsURL + "\"></script>");
-})();
diff --git a/Source/WebInspectorUI/UserInterface/LogContentView.css b/Source/WebInspectorUI/UserInterface/LogContentView.css
deleted file mode 100644
index e3da4b78a..000000000
--- a/Source/WebInspectorUI/UserInterface/LogContentView.css
+++ /dev/null
@@ -1,500 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.log {
-    overflow-y: overlay;
-    overflow-x: hidden;
-}
-
-.console-messages {
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
-
-    word-wrap: break-word;
-
-    font-family: Menlo, monospace;
-    font-size: 11px;
-
-    min-height: 100%;
-}
-
-.console-messages > :first-child {
-    margin-top: auto;
-}
-
-.console-item {
-    border-top: 1px solid rgb(240, 240, 240);
-}
-
-.console-group.new-session .console-group-messages .console-item:first-child {
-    border-top: none;
-}
-
-.console-item.selected {
-    background-color: rgb(212, 212, 212);
-}
-
-.console-messages:focus .console-item.selected {
-    background-color: rgb(56, 121, 217);
-}
-
-.console-messages:focus .console-item.selected * {
-    color: white !important;
-}
-
-.console-user-command-result.console-log-level::before {
-    background-image: url(Images/UserInputResult.pdf);
-}
-
-.console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
-    background-image: url(Images/UserInputResultSelected.pdf);
-}
-
-.console-message, .console-user-command {
-    position: relative;
-    padding: 2px 12px 2px 18px;
-    min-height: 16px;
-}
-
-.console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before {
-    position: absolute;
-    display: block;
-    content: "";
-    left: 4px;
-    top: 8px;
-    width: 10px;
-    height: 10px;
-    margin-top: -5px;
-}
-
-.console-message .bubble {
-    display: inline-block;
-    height: 14px;
-    background-color: rgb(128, 151, 189);
-    vertical-align: middle;
-    white-space: nowrap;
-    padding: 1px 4px;
-    margin-top: -2px;
-    margin-right: 4px;
-    margin-left: -18px;
-    text-align: left;
-    font-size: 11px;
-    line-height: normal;
-    font-family: Helvetica, Arial, sans-serif;
-    font-weight: bold;
-    text-shadow: none;
-    color: white;
-    border-radius: 7px;
-
-    float: left;
-    margin-top: 0px;
-    margin-left: 2px;
-}
-
-.console-message-text {
-    white-space: pre-wrap;
-}
-
-.console-message-text > span {
-    -webkit-user-select: text;
-}
-
-.console-group-title {
-    font-weight: bold;
-}
-
-.console-group-title::before {
-    background-image: -webkit-canvas(disclosure-triangle-small-open-normal);
-    background-size: 13px 13px;
-    top: 6px;
-    width: 13px;
-    height: 13px;
-    left: 3px;
-}
-
-.console-messages:focus .console-item.selected .console-group-title::before {
-    background-image: -webkit-canvas(disclosure-triangle-small-open-selected);
-}
-
-.console-group.collapsed .console-group-title::before {
-    background-image: -webkit-canvas(disclosure-triangle-small-closed-normal);
-}
-
-.console-messages:focus .console-group.collapsed .console-item.selected .console-group-title::before {
-    background-image: -webkit-canvas(disclosure-triangle-small-closed-selected);
-}
-
-.console-group.collapsed > .console-group-messages {
-    display: none;
-}
-
-.console-group {
-    position: relative;
-}
-
-.console-group.new-session {
-    border-top: 3px dashed rgb(240, 240, 240);
-}
-
-.console-error-level .console-message-text, .console-error-level .section .header .title {
-    color: red !important;
-}
-
-.console-messages:focus .console-item.selected .console-message-text,
-.console-messages:focus .console-item.selected .section .header .title {
-    color: white !important;
-}
-
-.console-debug-level .console-message-text {
-    color: blue;
-}
-
-.console-debug-level::before {
-    background-color: blue;
-}
-
-.console-error-level::before {
-    background-image: url(Images/ErrorSmall.pdf);
-    background-size: 10px 10px;
-}
-
-.console-warning-level::before {
-    background-image: url(Images/WarningSmall.pdf);
-    background-size: 10px 10px;
-}
-
-.console-user-command .console-message {
-    margin-left: -24px;
-    padding-right: 0;
-}
-
-.console-user-command::before {
-    background-image: url(Images/UserInputPromptPrevious.pdf);
-}
-
-.console-messages:focus .console-item.selected .console-user-command::before {
-    background-image: url(Images/UserInputPromptPreviousSelected.pdf);
-}
-
-.console-user-command > .console-message-text {
-    color: rgb(0, 128, 255);
-}
-
-.console-messages a {
-    color: rgb(33%, 33%, 33%);
-    cursor: pointer;
-}
-
-.console-messages a:hover {
-    color: rgb(15%, 15%, 15%);
-}
-
-.console-message-url {
-    float: right;
-    margin-left: 4px;
-    font-weight: normal;
-}
-
-.console-group-messages .section {
-    margin: 0 0 0 12px !important;
-}
-
-.console-group-messages .section .header {
-    padding: 0 8px 0 0;
-    background-image: none;
-    border: none;
-    min-height: 0;
-}
-
-.console-group-messages .section .header::before {
-    top: 2px;
-    left: 1px;
-}
-
-.console-messages:focus .console-item.selected .section .header::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
-}
-
-.console-messages:focus .console-item.selected .section.expanded .header::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
-}
-
-.console-messages:focus .console-item.selected .properties-tree li.parent::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
-}
-
-.console-messages:focus .console-item.selected .properties-tree li.parent.expanded::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
-}
-
-.console-group-messages .section .header .title {
-    color: black;
-    font-weight: normal;
-    line-height: normal;
-}
-
-.console-group-messages .section .properties li .info {
-    padding-top: 0;
-    padding-bottom: 0;
-    color: rgb(60%, 60%, 60%);
-}
-
-.console-group-messages .outline-disclosure {
-    outline: none;
-    padding-left: 0;
-}
-
-.console-group-messages .outline-disclosure > ol {
-    padding: 0 0 0 12px !important;
-}
-
-.console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
-    font-size: inherit;
-    line-height: 12px;
-}
-
-.console-group-messages .outline-disclosure.single-node li {
-    padding-left: 2px;
-}
-
-.console-group-messages .outline-disclosure li .selection {
-    margin-left: -6px;
-    margin-right: -6px;
-}
-
-.console-group-messages .add-attribute {
-    display: none;
-}
-
-.console-formatted-object, .console-formatted-node {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    color: black;
-}
-
-.console-formatted-object .section, .console-formatted-node .section {
-    position: static;
-}
-
-.console-formatted-object .properties, .console-formatted-node .properties {
-    padding-left: 0 !important;
-}
-
-.console-formatted-number {
-    color: rgb(28, 0, 207);
-}
-
-.console-formatted-string, .console-formatted-regexp {
-    color: rgb(196, 26, 22);
-    white-space: pre;
-}
-
-.console-formatted-null, .console-formatted-undefined {
-    color: rgb(128, 128, 128);
-}
-
-.error-message {
-    color: red;
-}
-
-.auto-complete-text, .editing .auto-complete-text {
-    color: rgb(128, 128, 128) !important;
-    -webkit-user-modify: read-only;
-}
-
-.outline-disclosure li.hovered:not(.selected) .selection {
-    display: block;
-    left: 3px;
-    right: 3px;
-    background-color: rgba(56, 121, 217, 0.1);
-    border-radius: 5px;
-}
-
-.outline-disclosure li.highlighted .highlight {
-    background-color: rgb(255, 230, 179);
-    border-radius: 4px;
-    padding-bottom: 2px;
-    margin-bottom: -2px;
-}
-
-.outline-disclosure li.selected.highlighted .highlight {
-    background-color: transparent;
-    padding-bottom: 0;
-    margin-bottom: 0;
-}
-
-.outline-disclosure li .selection {
-    display: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 15px;
-    z-index: -1;
-}
-
-.outline-disclosure li.selected .selection {
-    display: block;
-    background-color: rgb(212, 212, 212);
-}
-
-.outline-disclosure li.elements-drag-over .selection {
-    display: block;
-    margin-top: -2px;
-    border-top: 2px solid rgb(56, 121, 217);
-}
-
-.outline-disclosure ol:focus li.selected .selection {
-    background-color: rgb(56, 121, 217);
-}
-
-.outline-disclosure ol.search-match-not-found li.selected .selection {
-    border: 1px solid rgb(56, 121, 217);
-    background-color: white;
-}
-
-.outline-disclosure {
-    font-size: 11px;
-}
-
-.outline-disclosure > ol {
-    position: relative;
-    padding: 2px 6px !important;
-    margin: 0;
-    color: black;
-    cursor: default;
-    min-width: 100%;
-}
-
-.outline-disclosure, .outline-disclosure ol {
-    list-style-type: none;
-    -webkit-padding-start: 12px;
-    margin: 0;
-}
-
-.outline-disclosure li {
-    padding: 0 0 0 14px;
-    margin-top: 1px;
-    margin-bottom: 1px;
-    margin-left: -2px;
-    word-wrap: break-word;
-}
-
-.outline-disclosure ol:focus li.selected {
-    color: white;
-}
-
-.outline-disclosure ol.search-match-found li.selected {
-    color: white;
-}
-
-.outline-disclosure ol:focus li.selected * {
-    color: inherit;
-}
-
-.outline-disclosure ol.search-match-found li.selected * {
-    color: inherit;
-}
-
-.outline-disclosure li.parent {
-    margin-left: -12px
-}
-
-.outline-disclosure li .webkit-html-tag.close {
-    margin-left: -12px;
-}
-
-.outline-disclosure li.parent::before {
-    float: left;
-
-    content: "";
-
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
-    background-size: 8px 8px;
-    background-repeat: no-repeat;
-
-    width: 8px;
-    height: 8px;
-
-    margin-top: 2px;
-    padding-right: 2px;
-}
-
-.console-messages:focus .console-item.selected .outline-disclosure li.parent::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected);
-}
-
-.outline-disclosure li.parent.expanded::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
-}
-
-.console-messages:focus .console-item.selected .outline-disclosure li.parent.expanded::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected);
-}
-
-.outline-disclosure ol.children {
-    display: none;
-}
-
-.outline-disclosure ol.children.expanded {
-    display: block;
-}
-
-.webkit-html-fragment.shadow {
-    opacity: 0.6;
-}
-
-.console-item.filtered-out {
-    display: none;
-}
-
-.log-search-bar > input {
-    width: 150px;
-}
-
-.search-in-progress .console-item.filtered-out-by-search {
-    display: none;
-}
-
-.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
-    color: black;
-    background-color: rgba(235, 215, 38, 0.2);
-    border-bottom: 1px solid rgb(237, 202, 71);
-}
-
-.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
-    background-color: rgba(235, 215, 38, 0.75);
-}
-
-/* @media reader currently blocked by: http://webkit.org/b/118096 */
-@media reader {
-    .console-user-command::before, 
-    .console-messages:focus .console-item.selected .console-user-command::before,
-    .console-user-command-result.console-log-level::before,
-    .console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
-        /* accessible label alternative for icon indicating console input/output/warning/error, etc. */
-        content: attr(data-labelprefix);
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/LogContentView.js b/Source/WebInspectorUI/UserInterface/LogContentView.js
deleted file mode 100644
index d559446ef..000000000
--- a/Source/WebInspectorUI/UserInterface/LogContentView.js
+++ /dev/null
@@ -1,938 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LogContentView = function(representedObject)
-{
-    WebInspector.ContentView.call(this, representedObject);
-
-    this._nestingLevel = 0;
-    this._selectedMessages = [];
-
-    this.element.classList.add(WebInspector.LogContentView.StyleClassName);
-
-    this.messagesElement = document.createElement("div");
-    this.messagesElement.className = "console-messages";
-    this.messagesElement.tabIndex = 0;
-    this.messagesElement.setAttribute("role", "log");
-    this.messagesElement.addEventListener("mousedown", this._mousedown.bind(this));
-    this.messagesElement.addEventListener("focus", this._didFocus.bind(this));
-    this.messagesElement.addEventListener("blur", this._didBlur.bind(this));
-    this.messagesElement.addEventListener("keydown", this._keyDown.bind(this));
-    this.messagesElement.addEventListener("click", this._click.bind(this), true);
-    this.element.appendChild(this.messagesElement);
-
-    this.prompt = WebInspector.quickConsole.prompt;
-
-    this._keyboardShortcutCommandA = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "A");
-    this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
-
-    this._logViewController = new WebInspector.JavaScriptLogViewController(this.messagesElement, this.element, this.prompt, this, "console-prompt-history");
-
-    this._searchBar = new WebInspector.SearchBar("log-search-bar", WebInspector.UIString("Filter Console Log"), this);
-    this._searchBar.addEventListener(WebInspector.SearchBar.Event.TextChanged, this._searchTextDidChange, this);
-
-    var scopeBarItems = [
-        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All"), true),
-        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Errors, WebInspector.UIString("Errors")),
-        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Warnings, WebInspector.UIString("Warnings")),
-        new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Logs, WebInspector.UIString("Logs"))
-    ];
-
-    this._scopeBar = new WebInspector.ScopeBar("log-scope-bar", scopeBarItems, scopeBarItems[0]);
-    this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
-
-    this._clearLogNavigationItem = new WebInspector.ButtonNavigationItem("clear-log", WebInspector.UIString("Clear log (%s or %s)").format(this._logViewController.messagesClearKeyboardShortcut.displayName, this._logViewController.messagesAlternateClearKeyboardShortcut.displayName), "Images/NavigationItemTrash.pdf", 16, 16);
-    this._clearLogNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearLog, this);
-
-    var toolTip = WebInspector.UIString("Show split console");
-    var altToolTip = WebInspector.UIString("Show full-height console");
-
-    this._toggleSplitNavigationItem = new WebInspector.ToggleButtonNavigationItem("split-toggle", toolTip, altToolTip, "Images/SplitToggleDown.pdf", "Images/SplitToggleUp.pdf", 16, 16);
-    this._toggleSplitNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleSplit, this);
-    this._toggleSplitNavigationItem.toggled = WebInspector.isShowingSplitConsole();
-
-    this.messagesElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
-
-    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._sessionsCleared, this);
-    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.SessionStarted, this._sessionStarted, this);
-    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.MessageAdded, this._messageAdded, this);
-    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, this._previousMessageRepeatCountUpdated, this);
-    WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.ActiveLogCleared, this._activeLogCleared, this);
-}
-
-WebInspector.LogContentView.Scopes = {
-    All: "log-all",
-    Errors: "log-errors",
-    Warnings: "log-warnings",
-    Logs: "log-logs"
-};
-
-WebInspector.LogContentView.StyleClassName = "log";
-WebInspector.LogContentView.ItemWrapperStyleClassName = "console-item";
-WebInspector.LogContentView.FilteredOutStyleClassName = "filtered-out";
-WebInspector.LogContentView.SelectedStyleClassName = "selected";
-WebInspector.LogContentView.SearchInProgressStyleClassName = "search-in-progress";
-WebInspector.LogContentView.FilteredOutBySearchStyleClassName = "filtered-out-by-search";
-WebInspector.LogContentView.HighlightedStyleClassName = "highlighted";
-
-WebInspector.LogContentView.prototype = {
-    constructor: WebInspector.LogContentView,
-
-    // Public
-
-    get navigationItems()
-    {
-        return [this._searchBar, this._scopeBar, this._clearLogNavigationItem, this._toggleSplitNavigationItem];
-    },
-
-    get scopeBar()
-    {
-        return this._scopeBar;
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.ContentView.prototype.updateLayout.call(this);
-
-        this._scrollElementHeight = this.messagesElement.getBoundingClientRect().height;
-    },
-
-    shown: function()
-    {
-        this._toggleSplitNavigationItem.toggled = WebInspector.isShowingSplitConsole();
-
-        this.prompt.focus();
-    },
-
-    get scrollableElements()
-    {
-        return [this.element];
-    },
-
-    get shouldKeepElementsScrolledToBottom()
-    {
-        return true;
-    },
-
-    get searchInProgress()
-    {
-        return this.messagesElement.classList.contains(WebInspector.LogContentView.SearchInProgressStyleClassName);
-    },
-
-    didClearMessages: function()
-    {
-        if (this._ignoreDidClearMessages)
-            return;
-        WebInspector.logManager.requestClearMessages();
-    },
-
-    didAppendConsoleMessage: function(message)
-    {
-        WebInspector.quickConsole.updateLayout();
-
-        // Nest the message.
-        if (message.type !== WebInspector.ConsoleMessage.MessageType.EndGroup) {
-            var x = 16 * this._nestingLevel;
-            var messageElement = message.toMessageElement();
-            messageElement.style.left = x + "px";
-            messageElement.style.width = "calc(100% - " + x + "px)";
-        }
-
-        // Update the nesting level.
-        switch (message.type) {
-        case WebInspector.ConsoleMessage.MessageType.StartGroup:
-        case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
-            ++this._nestingLevel;
-            break;
-        case WebInspector.ConsoleMessage.MessageType.EndGroup:
-            --this._nestingLevel;
-            break;
-        }
-
-        this._clearFocusableChildren();
-
-        // Some results don't populate until further backend dispatches occur (like the DOM tree).
-        // We want to remove focusable children after those pending dispatches too.
-        InspectorBackend.runAfterPendingDispatches(this._clearFocusableChildren.bind(this));
-
-        // We only auto show the console if the message is a result.
-        // This is when the user evaluated something directly in the prompt.
-        if (message.type !== WebInspector.ConsoleMessage.MessageType.Result)
-            return;
-
-        if (!WebInspector.isShowingConsoleView())
-            WebInspector.showSplitConsole();
-
-        this._logViewController.scrollToBottom();
-    },
-
-    promptDidChangeHeight: function()
-    {
-        WebInspector.quickConsole.updateLayout();
-    },
-
-    get supportsSave()
-    {
-        return true;
-    },
-
-    get saveData()
-    {
-        return {url: "web-inspector:///Console.txt", content: this._formatMessagesAsData(false), forceSaveAs: true};
-    },
-
-    handleCopyEvent: function(event)
-    {
-        if (!this._selectedMessages.length)
-            return;
-
-        event.clipboardData.setData("text/plain", this._formatMessagesAsData(true));
-        event.stopPropagation();
-        event.preventDefault();
-    },
-
-    focusSearchBar: function()
-    {
-        this._searchBar.focus();
-    },
-
-    highlightPreviousSearchMatch: function()
-    {
-        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
-            return;
-
-        var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) : this._searchMatches.length;
-        this._highlightSearchMatchAtIndex(index - 1);
-    },
-    
-    highlightNextSearchMatch: function()
-    {
-        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
-            return;
-
-        var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) + 1 : 0;
-        this._highlightSearchMatchAtIndex(index);
-    },
-
-    searchBarWantsToLoseFocus: function(searchBar)
-    {
-        if (this._selectedMessages.length)
-            this.messagesElement.focus();
-        else
-            this.prompt.focus();
-    },
-
-    searchBarDidActivate: function(searchBar)
-    {
-        if (!isEmptyObject(this._searchMatches))
-            this._highlightSearchMatchAtIndex(0);
-        this.prompt.focus();
-    },
-
-    // Private
-
-    _formatMessagesAsData: function(onlySelected)
-    {
-        var messages = this._allMessages();
-
-        if (onlySelected) {
-            messages = this._allMessages().filter(function(message) {
-                return message.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
-            });
-        }
-
-        var data = "";
-
-        var isPrefixOptional = messages.length <= 1 && onlySelected;
-        messages.forEach(function (messageElement, index) {
-            var messageObject = messageElement.message;
-            if (!messageObject)
-                messageObject = messageElement.command;
-            if (!messageObject)
-                return;
-
-            if (index > 0)
-                data += "\n"
-            data += messageObject.toClipboardString(isPrefixOptional);
-        });
-
-        return data;
-    },
-
-    _sessionsCleared: function(event)
-    {
-        this._ignoreDidClearMessages = true;
-        this._logViewController.clear();
-        this._ignoreDidClearMessages = false;
-    },
-
-    _sessionStarted: function(event)
-    {
-        this._logViewController.startNewSession();
-    },
-
-    _messageAdded: function(event)
-    {
-        var message = this._logViewController.appendConsoleMessage(event.data.message);
-        if (message.type !== WebInspector.ConsoleMessage.MessageType.EndGroup)
-            this._filterMessages([message.toMessageElement()]);
-    },
-
-    _previousMessageRepeatCountUpdated: function(event)
-    {
-        this._logViewController.updatePreviousMessageRepeatCount(event.data.count);
-    },
-
-    _handleContextMenuEvent: function(event)
-    {
-        if (!window.getSelection().isCollapsed) {
-            // If there is a selection, we want to show our normal context menu
-            // (with Copy, etc.), and not Clear Log.
-            return;
-        }
-
-        // We don't want to show the custom menu for links in the console.
-        if (event.target.enclosingNodeOrSelfWithNodeName("a"))
-            return;
-
-        var contextMenu = new WebInspector.ContextMenu(event);
-        contextMenu.appendItem(WebInspector.UIString("Clear Log"), this._clearLog.bind(this));
-        contextMenu.show();
-    },
-
-    _mousedown: function(event)
-    {
-        if (event.button !== 0 || event.ctrlKey)
-            return;
-
-        if (event.defaultPrevented) {
-            // Default was prevented on the event, so this means something deeper (like a disclosure triangle)
-            // handled the mouse down. In this case we want to clear the selection and don't make a new selection.
-            this._clearMessagesSelection();
-            return;
-        }
-
-        if (!this._focused) {
-            this.messagesElement.focus();
-            if (this._selectedMessages.length)
-                return;
-        }
-
-        this._mouseDownWrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
-        this._mouseDownShiftKey = event.shiftKey;
-        this._mouseDownCommandKey = event.metaKey;
-        this._mouseMoveIsRowSelection = false;
-
-        window.addEventListener("mousemove", this);
-        window.addEventListener("mouseup", this);
-    },
-
-    _targetInMessageCanBeSelected: function(target, message)
-    {
-        if (target.enclosingNodeOrSelfWithNodeName("a"))
-            return false;
-        return true;
-    },
-
-    _mousemove: function(event)
-    {
-        var selection = window.getSelection();
-        var wrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
-
-        if (!wrapper) {
-            // No wrapper under the mouse, so look at the selection to try and find one.
-            if (!selection.isCollapsed) {
-                wrapper = selection.focusNode.parentNode.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
-                selection.removeAllRanges();
-            }
-
-            if (!wrapper)
-                return;
-        }
-
-        if (!selection.isCollapsed)
-            this._clearMessagesSelection();
-
-        if (wrapper === this._mouseDownWrapper && !this._mouseMoveIsRowSelection)
-            return;
-
-        selection.removeAllRanges();
-
-        if (!this._mouseMoveIsRowSelection)
-            this._updateMessagesSelection(this._mouseDownWrapper.messageElement, this._mouseDownCommandKey, this._mouseDownShiftKey);
-        this._updateMessagesSelection(wrapper.messageElement, false, true);
-
-        this._mouseMoveIsRowSelection = true;
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _mouseup: function(event)
-    {
-        window.removeEventListener("mousemove", this);
-        window.removeEventListener("mouseup", this);
-
-        var selection = window.getSelection();
-        var wrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
-
-        if (wrapper && (selection.isCollapsed || event.shiftKey)) {
-            selection.removeAllRanges();
-
-            var message = wrapper.messageElement;
-            if (this._targetInMessageCanBeSelected(event.target, message)) {
-                var sameWrapper = wrapper === this._mouseDownWrapper;
-                this._mouseInteractionShouldPreventClickPropagation = !this._isMessageSelected(message);
-                this._updateMessagesSelection(message, sameWrapper ? this._mouseDownCommandKey : false, sameWrapper ? this._mouseDownShiftKey : true);
-            }
-        } else if (!selection.isCollapsed) {
-            // There is a text selection, clear the row selection.
-            this._clearMessagesSelection();
-        } else if (!this._mouseDownWrapper) {
-            // The mouse didn't hit a console item, so clear the row selection.
-            this._clearMessagesSelection();
-
-            // Focus the prompt. Focusing the prompt needs to happen after the click to work.
-            setTimeout(function () { this.prompt.focus() }.bind(this), 0);
-        }
-
-        delete this._mouseMoveIsRowSelection;
-        delete this._mouseDownWrapper;
-        delete this._mouseDownShiftKey;
-        delete this._mouseDownCommandKey;
-    },
-
-    _click: function(event)
-    {
-        if (!this._mouseInteractionShouldPreventClickPropagation)
-            return;
-
-        event.stopPropagation();
-        delete this._mouseInteractionShouldPreventClickPropagation;
-    },
-
-    handleEvent: function(event)
-    {
-        switch (event.type) {
-        case "mousemove":
-            this._mousemove(event);
-            break;
-        case "mouseup":
-            this._mouseup(event);
-            break;
-        }
-    },
-
-    _updateMessagesSelection: function(message, multipleSelection, rangeSelection)
-    {
-        var alreadySelectedMessage = this._selectedMessages.contains(message);
-        if (alreadySelectedMessage && this._selectedMessages.length && multipleSelection) {
-            message.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
-            this._selectedMessages.remove(message);
-            return;
-        }
-
-        if (!multipleSelection && !rangeSelection)
-            this._clearMessagesSelection();
-
-        if (rangeSelection) {
-            var messages = this._visibleMessages();
-
-            var refIndex = this._referenceMessageForRangeSelection ? messages.indexOf(this._referenceMessageForRangeSelection) : 0;
-            var targetIndex = messages.indexOf(message);
-
-            var newRange = [Math.min(refIndex, targetIndex), Math.max(refIndex, targetIndex)];
-
-            if (this._selectionRange && this._selectionRange[0] === newRange[0] && this._selectionRange[1] === newRange[1])
-                return;
-
-            var startIndex = this._selectionRange ? Math.min(this._selectionRange[0], newRange[0]) : newRange[0];
-            var endIndex = this._selectionRange ? Math.max(this._selectionRange[1], newRange[1]) : newRange[1];
-
-            for (var i = startIndex; i <= endIndex; ++i) {
-                var messageInRange = messages[i];
-                if (i >= newRange[0] && i <= newRange[1] && !messageInRange.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
-                    messageInRange.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
-                    this._selectedMessages.push(messageInRange);
-                } else if (i < newRange[0] || i > newRange[1] && messageInRange.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
-                    messageInRange.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
-                    this._selectedMessages.remove(messageInRange);
-                }
-            }
-
-            this._selectionRange = newRange;
-        } else {
-            message.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
-            this._selectedMessages.push(message);
-        }
-
-        if (!rangeSelection)
-            this._referenceMessageForRangeSelection = message;
-
-        if (!alreadySelectedMessage)
-            this._ensureMessageIsVisible(this._selectedMessages.lastValue);
-    },
-
-    _ensureMessageIsVisible: function(message)
-    {
-        if (!message)
-            return;
-
-        var y = this._positionForMessage(message).y;
-        if (y < 0) {
-            this.element.scrollTop += y;
-            return;
-        }
-
-        var nextMessage = this._nextMessage(message);
-        if (nextMessage) {
-            y = this._positionForMessage(nextMessage).y;
-            if (y > this._scrollElementHeight)
-                this.element.scrollTop += y - this._scrollElementHeight;
-        } else {
-            y += message.getBoundingClientRect().height;
-            if (y > this._scrollElementHeight)
-                this.element.scrollTop += y - this._scrollElementHeight;
-        }
-    },
-
-    _positionForMessage: function(message)
-    {
-        var pagePoint = window.webkitConvertPointFromNodeToPage(message, new WebKitPoint(0, 0));
-        return window.webkitConvertPointFromPageToNode(this.element, pagePoint);
-    },
-
-    _isMessageVisible: function(message)
-    {
-        var node = message.parentNode;
-
-        if (node.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName))
-            return false;
-
-        if (this.searchInProgress && node.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName))
-            return false;
-
-        if (message.classList.contains("console-group-title"))
-            node = node.parentNode.parentNode;
-
-        while (node && node !== this.messagesElement) {
-            if (node.classList.contains("collapsed"))
-                return false;
-            node = node.parentNode;
-        }
-
-        return true;
-    },
-
-    _isMessageSelected: function(message)
-    {
-        return message.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
-    },
-
-    _clearMessagesSelection: function()
-    {
-        this._selectedMessages.forEach(function(message) {
-            message.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
-        });
-        this._selectedMessages = [];
-        delete this._referenceMessageForRangeSelection;
-    },
-
-    _selectAllMessages: function()
-    {
-        this._clearMessagesSelection();
-
-        var messages = this._visibleMessages();
-        for (var i = 0; i < messages.length; ++i) {
-            var message = messages[i];
-            message.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
-            this._selectedMessages.push(message);
-        }
-    },
-
-    _allMessages: function()
-    {
-        return Array.prototype.slice.call(this.messagesElement.querySelectorAll(".console-message, .console-user-command"));
-    },
-
-    _unfilteredMessages: function()
-    {
-        return this._allMessages().filter(function(message) {
-            return !message.parentNode.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName);
-        });
-    },
-
-    _visibleMessages: function()
-    {
-        var unfilteredMessages = this._unfilteredMessages();
-
-        if (!this.searchInProgress)
-            return unfilteredMessages;
-
-        return unfilteredMessages.filter(function(message) {
-            return !message.parentNode.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
-        });
-    },
-
-    _activeLogCleared: function(event)
-    {
-        this._ignoreDidClearMessages = true;
-        this._logViewController.clear();
-        this._ignoreDidClearMessages = false;
-    },
-
-    _toggleSplit: function()
-    {
-        if (WebInspector.isShowingSplitConsole())
-            WebInspector.showFullHeightConsole();
-        else
-            WebInspector.showSplitConsole();
-    },
-
-    _clearLog: function()
-    {
-        this._logViewController.clear();
-    },
-
-    _scopeBarSelectionDidChange: function(event)
-    {
-        this._filterMessages(this._allMessages());
-    },
-
-    _filterMessages: function(messages)
-    {
-        var showsAll = this._scopeBar.item(WebInspector.LogContentView.Scopes.All).selected;
-        var showsErrors = this._scopeBar.item(WebInspector.LogContentView.Scopes.Errors).selected;
-        var showsWarnings = this._scopeBar.item(WebInspector.LogContentView.Scopes.Warnings).selected;
-        var showsLogs = this._scopeBar.item(WebInspector.LogContentView.Scopes.Logs).selected;
-
-        messages.forEach(function(message) {
-            var visible = showsAll || message.command instanceof WebInspector.ConsoleCommand || message.message instanceof WebInspector.ConsoleCommandResult;
-            if (!visible) {
-                switch(message.message.level) {
-                    case WebInspector.ConsoleMessage.MessageLevel.Warning:
-                        visible = showsWarnings;
-                        break;
-                    case WebInspector.ConsoleMessage.MessageLevel.Error:
-                        visible = showsErrors;
-                        break;
-                    case WebInspector.ConsoleMessage.MessageLevel.Log:
-                        visible = showsLogs;
-                        break;
-                }
-            }
-
-            var classList = message.parentNode.classList;
-            if (visible)
-                classList.remove(WebInspector.LogContentView.FilteredOutStyleClassName);
-            else {
-                this._selectedMessages.remove(message);
-                classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
-                classList.add(WebInspector.LogContentView.FilteredOutStyleClassName);
-            }
-        }.bind(this));
-
-        this._performSearch();
-    },
-
-    _didFocus: function(event)
-    {
-        this._focused = true;
-    },
-
-    _didBlur: function(event)
-    {
-        this._focused = false;
-    },
-
-    _keyDown: function(event)
-    {
-        if (this._keyboardShortcutCommandA.matchesEvent(event))
-            this._commandAWasPressed(event);
-        else if (this._keyboardShortcutEsc.matchesEvent(event))
-            this._escapeWasPressed(event);
-        else if (event.keyIdentifier === "Up")
-            this._upArrowWasPressed(event);
-        else if (event.keyIdentifier === "Down")
-            this._downArrowWasPressed(event);
-        else if (event.keyIdentifier === "Left")
-            this._leftArrowWasPressed(event);
-        else if (event.keyIdentifier === "Right")
-            this._rightArrowWasPressed(event);
-    },
-
-    _commandAWasPressed: function(event)
-    {
-        this._selectAllMessages();
-        event.preventDefault();
-    },
-
-    _escapeWasPressed: function(event)
-    {
-        if (this._selectedMessages.length)
-            this._clearMessagesSelection();
-        else
-            this.prompt.focus();
-
-        event.preventDefault();
-    },
-
-    _upArrowWasPressed: function(event)
-    {
-        var messages = this._visibleMessages();
-
-        if (!this._selectedMessages.length) {
-            if (messages.length)
-                this._updateMessagesSelection(messages.lastValue, false, false);
-            return;
-        }
-
-        var lastMessage = this._selectedMessages.lastValue;
-        var previousMessage = this._previousMessage(lastMessage);
-        if (previousMessage)
-            this._updateMessagesSelection(previousMessage, false, event.shiftKey);
-        else if (!event.shiftKey) {
-            this._clearMessagesSelection();
-            this._updateMessagesSelection(messages[0], false, false);
-        }
-
-        event.preventDefault();
-    },
-
-    _downArrowWasPressed: function(event)
-    {
-        var messages = this._visibleMessages();
-
-        if (!this._selectedMessages.length) {
-            if (messages.length)
-                this._updateMessagesSelection(messages[0], false, false);
-            return;
-        }
-
-        var lastMessage = this._selectedMessages.lastValue;
-        var nextMessage = this._nextMessage(lastMessage);
-        if (nextMessage)
-            this._updateMessagesSelection(nextMessage, false, event.shiftKey);
-        else if (!event.shiftKey) {
-            this._clearMessagesSelection();
-            this._updateMessagesSelection(messages.lastValue, false, false);
-        }
-
-        event.preventDefault();
-    },
-
-    _leftArrowWasPressed: function(event)
-    {
-        if (this._selectedMessages.length !== 1)
-            return;
-
-        var currentMessage = this._selectedMessages[0];
-        if (currentMessage.classList.contains("console-group-title"))
-            currentMessage.parentNode.parentNode.classList.add("collapsed");
-        else {
-            var outlineTitle = currentMessage.querySelector("ol.outline-disclosure > li.parent");
-            if (outlineTitle) {
-                if (event.altKey)
-                    outlineTitle.treeElement.collapseRecursively();
-                else
-                    outlineTitle.treeElement.collapse();
-            } else {
-                var outlineSection = currentMessage.querySelector(".console-formatted-object > .section");
-                if (outlineSection)
-                    outlineSection._section.collapse();
-            }
-        }
-    },
-
-    _rightArrowWasPressed: function(event)
-    {
-        if (this._selectedMessages.length !== 1)
-            return;
-
-        var currentMessage = this._selectedMessages[0];
-        if (currentMessage.classList.contains("console-group-title"))
-            currentMessage.parentNode.parentNode.classList.remove("collapsed");
-        else {
-            var outlineTitle = currentMessage.querySelector("ol.outline-disclosure > li.parent");
-            if (outlineTitle) {
-                outlineTitle.treeElement.onexpand = function() {
-                    setTimeout(function () {
-                        this._ensureMessageIsVisible(currentMessage);
-                        this._clearFocusableChildren();
-                        delete outlineTitle.treeElement.onexpand;
-                    }.bind(this));
-                }.bind(this);
-
-                if (event.altKey)
-                    outlineTitle.treeElement.expandRecursively();
-                else
-                    outlineTitle.treeElement.expand();
-            } else {
-                var outlineSection = currentMessage.querySelector(".console-formatted-object > .section");
-                if (outlineSection) {
-                    outlineSection._section.addEventListener(WebInspector.Section.Event.VisibleContentDidChange, this._propertiesSectionDidUpdateContent, this);
-                    outlineSection._section.expand();
-                }
-            }
-        }
-    },
-
-    _propertiesSectionDidUpdateContent: function(event)
-    {
-        var section = event.target;
-        section.removeEventListener(WebInspector.Section.Event.VisibleContentDidChange, this._propertiesSectionDidUpdateContent, this);
-
-        var message = section.element.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName).messageElement;
-        if (!this._isMessageSelected(message))
-            return;
-
-        setTimeout(function () {
-            this._ensureMessageIsVisible(message);
-            this._clearFocusableChildren();
-        }.bind(this));
-    },
-
-    _previousMessage: function(message)
-    {
-        var messages = this._visibleMessages();
-        for (var i = messages.indexOf(message) - 1; i >= 0; --i) {
-            if (this._isMessageVisible(messages[i]))
-                return messages[i];
-        }
-    },
-
-    _nextMessage: function(message)
-    {
-        var messages = this._visibleMessages();
-        for (var i = messages.indexOf(message) + 1; i < messages.length; ++i) {
-            if (this._isMessageVisible(messages[i]))
-                return messages[i];
-        }
-    },
-
-    _clearFocusableChildren: function()
-    {
-        var focusableElements = this.messagesElement.querySelectorAll("[tabindex]");
-        for (var i = 0, count = focusableElements.length; i < count; ++i)
-            focusableElements[i].removeAttribute("tabindex");
-    },
-
-    _searchTextDidChange: function(event)
-    {
-        this._performSearch();
-    },
-    
-    _performSearch: function()
-    {
-        if (!isEmptyObject(this._searchHighlightDOMChanges))
-            WebInspector.revertDomChanges(this._searchHighlightDOMChanges);
-
-        var searchTerms = this._searchBar.text;
-
-        if (searchTerms === "") {
-            delete this._selectedSearchMatch;
-            this._matchingSearchElements = [];
-            this.messagesElement.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
-            return;
-        };
-
-        this.messagesElement.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
-
-        this._searchHighlightDOMChanges = [];
-        this._searchMatches = [];
-        this._selectedSearchMathIsValid = false;
-
-        var searchRegex = new RegExp(searchTerms.escapeForRegExp(), "gi");
-        this._unfilteredMessages().forEach(function(message) {
-            var matchRanges = [];
-            var text = message.textContent;
-            var match = searchRegex.exec(text);
-            while (match) {
-                matchRanges.push({ offset: match.index, length: match[0].length });
-                match = searchRegex.exec(text);
-            }
-
-            if (!isEmptyObject(matchRanges))
-                this._highlightRanges(message, matchRanges);
-
-            var classList = message.parentNode.classList;
-            if (!isEmptyObject(matchRanges) || message.command instanceof WebInspector.ConsoleCommand || message.message instanceof WebInspector.ConsoleCommandResult)
-                classList.remove(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
-            else
-                classList.add(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
-        }, this);
-
-        if (!this._selectedSearchMathIsValid && this._selectedSearchMatch) {
-            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
-            delete this._selectedSearchMatch;
-        }
-    },
-    
-    _highlightRanges: function(message, matchRanges)
-    {
-        var highlightedElements = WebInspector.highlightRangesWithStyleClass(message, matchRanges, WebInspector.LogContentView.HighlightedStyleClassName, this._searchHighlightDOMChanges);
-
-        console.assert(highlightedElements.length === matchRanges.length);
-        
-        matchRanges.forEach(function (range, index) {
-            this._searchMatches.push({
-                message: message,
-                range: range,
-                highlight: highlightedElements[index]
-            });
-
-            if (this._selectedSearchMatch && !this._selectedSearchMathIsValid && this._selectedSearchMatch.message === message) {
-                this._selectedSearchMathIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range)
-                if (this._selectedSearchMathIsValid) {
-                    delete this._selectedSearchMatch;
-                    this._highlightSearchMatchAtIndex(this._searchMatches.length - 1);
-                }
-            }
-        }, this);
-    },
-    
-    _rangesOverlap: function(range1, range2)
-    {
-        return range1.offset <= range2.offset + range2.length && range2.offset <= range1.offset + range1.length;
-    },
-
-    _highlightSearchMatchAtIndex: function(index)
-    {
-        if (index >= this._searchMatches.length)
-            index = 0;
-        else if (index < 0)
-            index = this._searchMatches.length - 1;
-
-        if (this._selectedSearchMatch)
-            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
-
-        this._selectedSearchMatch = this._searchMatches[index];
-        this._selectedSearchMatch.highlight.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
-
-        this._ensureMessageIsVisible(this._selectedSearchMatch.message);
-    }
-}
-
-WebInspector.LogContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LogIcon.css b/Source/WebInspectorUI/UserInterface/LogIcon.css
deleted file mode 100644
index 30658caf5..000000000
--- a/Source/WebInspectorUI/UserInterface/LogIcon.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.log-icon .icon {
-    content: -webkit-image-set(url(Images/Log.png) 1x, url(Images/Log@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/LogManager.js b/Source/WebInspectorUI/UserInterface/LogManager.js
deleted file mode 100644
index f044339c7..000000000
--- a/Source/WebInspectorUI/UserInterface/LogManager.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LogManager = function()
-{
-    WebInspector.Object.call(this);
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-}
-
-WebInspector.LogManager.Event = {
-    SessionStarted: "log-manager-session-was-started",
-    Cleared: "log-manager-cleared",
-    MessageAdded: "log-manager-message-added",
-    ActiveLogCleared: "log-manager-current-log-cleared",
-    PreviousMessageRepeatCountUpdated: "log-manager-previous-message-repeat-count-updated"
-};
-
-WebInspector.LogManager.prototype = {
-    constructor: WebInspector.LogManager,
-
-    // Public
-
-    messageWasAdded: function(source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, requestId)
-    {
-        // Called from WebInspector.ConsoleObserver.
-
-        // FIXME: Pass a request. We need a way to get it from the request ID.
-        var consoleMessage = WebInspector.ConsoleMessage.create(source, level, text, type, url, line, column, repeatCount, parameters, stackTrace, null);
-
-        this.dispatchEventToListeners(WebInspector.LogManager.Event.MessageAdded, {message: consoleMessage});
-
-        console.assert(!consoleMessage._element || !consoleMessage._element.parentNode, "This console message shouldn't be added to a view. To add it you need to use clone().");
-    },
-
-    messagesCleared: function()
-    {
-        // Called from WebInspector.ConsoleObserver.
-
-        // We don't want to clear messages on reloads. We can't determine that easily right now.
-        // FIXME: <rdar://problem/13767079> Console.messagesCleared should include a reason
-        this._shouldClearMessages = true;
-        setTimeout(function() {
-            if (this._shouldClearMessages)
-                this.dispatchEventToListeners(WebInspector.LogManager.Event.ActiveLogCleared);
-            delete this._shouldClearMessages;
-        }.bind(this), 0);
-    },
-
-    messageRepeatCountUpdated: function(count)
-    {
-        // Called from WebInspector.ConsoleObserver.
-
-        this.dispatchEventToListeners(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, {count: count});
-    },
-
-    requestClearMessages: function()
-    {
-        ConsoleAgent.clearMessages();
-    },
-
-    // Private
-
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (!event.target.isMainFrame())
-            return;
-
-        var oldMainResource = event.data.oldMainResource;
-        var newMainResource = event.target.mainResource;
-        if (oldMainResource.url !== newMainResource.url)
-            this.dispatchEventToListeners(WebInspector.LogManager.Event.Cleared);
-        else
-            this.dispatchEventToListeners(WebInspector.LogManager.Event.SessionStarted);
-
-        delete this._shouldClearMessages;
-    }
-};
-
-WebInspector.LogManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LogObject.js b/Source/WebInspectorUI/UserInterface/LogObject.js
deleted file mode 100644
index 5d2da4dd8..000000000
--- a/Source/WebInspectorUI/UserInterface/LogObject.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LogObject = function()
-{
-    WebInspector.Object.call(this);
-
-    this._startDate = new Date();
-};
-
-WebInspector.LogObject.prototype = {
-    constructor: WebInspector.LogObject,
-
-    // Public
-
-    get startDate()
-    {
-        return this._startDate;
-    }
-};
-
-WebInspector.LogManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/LogTreeElement.js b/Source/WebInspectorUI/UserInterface/LogTreeElement.js
deleted file mode 100644
index a73d0db8b..000000000
--- a/Source/WebInspectorUI/UserInterface/LogTreeElement.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.LogTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.LogObject);
-
-    WebInspector.GeneralTreeElement.call(this, WebInspector.LogTreeElement.StyleClassName, WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
-
-    this._logObject = representedObject;
-
-    this.small = true;
-};
-
-WebInspector.LogTreeElement.StyleClassName = "log-icon";
-
-WebInspector.LogTreeElement.prototype = {
-    constructor: WebInspector.LogTreeElement,
-
-    // Public
-
-    get logObject()
-    {
-        return this._logObject;
-    }
-};
-
-WebInspector.LogTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Main.css b/Source/WebInspectorUI/UserInterface/Main.css
deleted file mode 100644
index 8c67baf40..000000000
--- a/Source/WebInspectorUI/UserInterface/Main.css
+++ /dev/null
@@ -1,257 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-* {
-    box-sizing: border-box;
-}
-
-body {
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    padding: 0;
-    margin: 0;
-
-    overflow: hidden;
-
-    -webkit-user-select: none;
-    -webkit-user-drag: none;
-
-    cursor: default;
-
-    -webkit-font-smoothing: subpixel-antialiased;
-
-    tab-size: 4; /* FIXME: This should be controlled by a setting. <rdar://problem/10593948> */
-}
-
-body.docked {
-    background-color: white;
-}
-
-body.docked.bottom {
-    border-top: 1px solid rgb(85, 85, 85);
-}
-
-body.docked.right {
-    border-left: 1px solid rgb(85, 85, 85);
-}
-
-#docked-resizer {
-    display: none;
-
-    z-index: 100;
-}
-
-body.docked #docked-resizer {
-    display: block;
-}
-
-body.docked.bottom #docked-resizer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-
-    cursor: row-resize;
-}
-
-body.docked.right #docked-resizer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 3px;
-
-    cursor: col-resize;
-}
-
-body.docked.bottom #toolbar {
-    cursor: row-resize;
-}
-
-body.docked.bottom #toolbar .item:not(.flexible-space) {
-    cursor: default;
-}
-
-#main {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-
-    background-color: white;
-
-    /* The position and z-index are needed to make negative z-index work in the DOM tree. */
-    position: relative;
-    z-index: 0;
-}
-
-#navigation-sidebar {
-    width: 300px;
-}
-
-body.docked.right #navigation-sidebar.collapsed > .resizer {
-    pointer-events: none;
-}
-
-#content {
-    display: -webkit-flex;
-    -webkit-flex-direction: column;
-    -webkit-flex: 1;
-}
-
-#content-browser {
-    -webkit-flex: 1;
-}
-
-#split-content-browser {
-    border-top: 1px solid rgb(153, 153, 153);
-}
-
-#split-content-browser > .navigation-bar {
-    cursor: row-resize;
-
-    background-image: -webkit-linear-gradient(top, rgb(248, 248, 248), rgb(226, 226, 226));
-}
-
-#split-content-browser > .navigation-bar .item:not(.flexible-space) {
-    cursor: default;
-}
-
-#details-sidebar {
-    width: 300px;
-}
-
-.message-text-view {
-    display: -webkit-flex;
-    z-index: 1000;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    padding-left: 20%;
-    padding-right: 20%;
-
-    -webkit-justify-content: center;
-    -webkit-align-items: center;
-    
-    line-height: 20px;
-    white-space: pre-wrap;
-    text-align: center;
-
-    font-size: 18px;
-    font-weight: bold;
-    font-family: Lucida Grande, sans-serif;
-
-    color: rgb(75%, 75%, 75%);
-    background-color: white;
-}
-
-.message-text-view.error {
-    color: rgb(224, 16, 16);
-}
-
-.message-text-view.error::before {
-    display: inline-block;
-
-    width: 20px;
-    height: 20px;
-    margin-right: 4px;
-    vertical-align: bottom;
-
-    background-image: url(Images/Error.pdf);
-    background-size: 100% 100%;
-    content: "";
-}
-
-.go-to-link {
-    color: rgb(85, 85, 85) !important;
-    text-decoration: underline !important;
-    cursor: pointer;
-}
-
-.go-to-link:not(.dont-float) {
-    float: right;
-    margin-left: 5px;
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.go-to-arrow {
-    -webkit-appearance: none;
-
-    padding: 0;
-    margin: 0;
-    border: none;
-
-    background-color: transparent;
-    background-image: -webkit-canvas(go-to-arrow-normal);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 10px 10px;
-
-    width: 16px;
-    height: 16px;
-
- /* Workaround: for text boxes overlapping float:right. Give go-to arrows a z-index to ensure they are clickable.
-    <rdar://problem/11536832> Cannot access content view from Instruments navigator if name of file is truncated */
-    position: relative;
-    z-index: 1;
-}
-
-.go-to-arrow:active {
-    background-image: -webkit-canvas(go-to-arrow-normal-active);
-}
-
-:focus .selected .go-to-arrow {
-    background-image: -webkit-canvas(go-to-arrow-selected);
-}
-
-:focus .selected .go-to-arrow:active {
-    background-image: -webkit-canvas(go-to-arrow-selected-active);
-}
-
-.display-location {
-    font-style: italic !important;
-}
-
-.hidden {
-    display: none !important;
-}
-
-.node-link {
-    text-decoration: underline;
-    cursor: pointer;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
index 313deebd1..f080f7f55 100644
--- a/Source/WebInspectorUI/UserInterface/Main.html
+++ b/Source/WebInspectorUI/UserInterface/Main.html
@@ -1,5 +1,5 @@
 <!--
- * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
@@ -26,361 +26,643 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src *; connect-src *; media-src *; font-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * file: blob: resource: qrc:; connect-src * ws:; media-src * blob:; font-src * blob:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'">
 
     <link rel="stylesheet" href="External/CodeMirror/codemirror.css">
 
-    <link rel="stylesheet" href="Main.css">
-    <link rel="stylesheet" href="NavigationBar.css">
-    <link rel="stylesheet" href="FlexibleSpaceNavigationItem.css">
-    <link rel="stylesheet" href="DividerNavigationItem.css">
-    <link rel="stylesheet" href="ButtonNavigationItem.css">
-    <link rel="stylesheet" href="RadioButtonNavigationItem.css">
-    <link rel="stylesheet" href="HierarchicalPathComponent.css">
-    <link rel="stylesheet" href="FilterBar.css">
-    <link rel="stylesheet" href="ScopeBar.css">
-    <link rel="stylesheet" href="SearchBar.css">
-    <link rel="stylesheet" href="Sidebar.css">
-    <link rel="stylesheet" href="ContentBrowser.css">
-    <link rel="stylesheet" href="NavigationSidebarPanel.css">
-    <link rel="stylesheet" href="ResourceIcons.css">
-    <link rel="stylesheet" href="FolderIcon.css">
-    <link rel="stylesheet" href="ContentViewContainer.css">
-    <link rel="stylesheet" href="ClusterContentView.css">
-    <link rel="stylesheet" href="ContentView.css">
-    <link rel="stylesheet" href="ImageResourceContentView.css">
-    <link rel="stylesheet" href="FontResourceContentView.css">
-    <link rel="stylesheet" href="Popover.css">
-    <link rel="stylesheet" href="TextEditor.css">
-    <link rel="stylesheet" href="SyntaxHighlightingDefaultTheme.css">
-    <link rel="stylesheet" href="TextResourceContentView.css">
-    <link rel="stylesheet" href="DOMStorageContentView.css">
-    <link rel="stylesheet" href="CookieStorageContentView.css">
-    <link rel="stylesheet" href="DatabaseTableContentView.css">
-    <link rel="stylesheet" href="DatabaseContentView.css">
-    <link rel="stylesheet" href="TextContentView.css">
-    <link rel="stylesheet" href="CookieIcon.css">
-    <link rel="stylesheet" href="DatabaseIcon.css">
-    <link rel="stylesheet" href="DatabaseTableIcon.css">
-    <link rel="stylesheet" href="DOMStorageIcons.css">
-    <link rel="stylesheet" href="DOMTreeOutline.css">
-    <link rel="stylesheet" href="PathComponentIcons.css">
-    <link rel="stylesheet" href="DataGrid.css">
-    <link rel="stylesheet" href="Editing.css">
-    <link rel="stylesheet" href="DOMTreeContentView.css">
-    <link rel="stylesheet" href="SearchIcons.css">
-    <link rel="stylesheet" href="LogContentView.css">
-    <link rel="stylesheet" href="Section.css">
-    <link rel="stylesheet" href="DetailsSidebarPanel.css">
-    <link rel="stylesheet" href="DetailsSection.css">
-    <link rel="stylesheet" href="LogIcon.css">
-    <link rel="stylesheet" href="BoxModelDetailsSectionRow.css">
-    <link rel="stylesheet" href="IndeterminateProgressSpinner.css">
-    <link rel="stylesheet" href="ApplicationCacheFrameContentView.css">
-    <link rel="stylesheet" href="ApplicationCacheIcons.css">
-    <link rel="stylesheet" href="ResourceTreeElement.css">
-    <link rel="stylesheet" href="InstrumentSidebarPanel.css">
-    <link rel="stylesheet" href="InstrumentIcons.css">
-    <link rel="stylesheet" href="TimelinesContentView.css">
-    <link rel="stylesheet" href="TimelineDecorations.css">
-    <link rel="stylesheet" href="NetworkDataGrid.css">
-    <link rel="stylesheet" href="TimelineDataGrid.css">
-    <link rel="stylesheet" href="TimelineOverview.css">
-    <link rel="stylesheet" href="ProfileView.css">
-    <link rel="stylesheet" href="JavaScriptProfileView.css">
-    <link rel="stylesheet" href="NetworkTimeline.css">
-    <link rel="stylesheet" href="CSSStyleDetailsSidebarPanel.css">
-    <link rel="stylesheet" href="LayerTreeSidebarPanel.css">
-    <link rel="stylesheet" href="EventListenerSectionGroup.css">
-    <link rel="stylesheet" href="Breakpoint.css">
-    <link rel="stylesheet" href="BreakpointIcons.css">
-    <link rel="stylesheet" href="BreakpointTreeElement.css">
-    <link rel="stylesheet" href="QuickConsole.css">
-    <link rel="stylesheet" href="CallFrameIcons.css">
-    <link rel="stylesheet" href="SourceCodeTextEditor.css">
-    <link rel="stylesheet" href="ScriptContentView.css">
-    <link rel="stylesheet" href="FindBanner.css">
-    <link rel="stylesheet" href="Toolbar.css">
-    <link rel="stylesheet" href="ButtonToolbarItem.css">
-    <link rel="stylesheet" href="ControlToolbarItem.css">
-    <link rel="stylesheet" href="ResourceSidebarPanel.css">
-    <link rel="stylesheet" href="DebuggerSidebarPanel.css">
-    <link rel="stylesheet" href="DashboardView.css">
-    <link rel="stylesheet" href="CSSStyleDeclarationTextEditor.css">
-    <link rel="stylesheet" href="CSSStyleDeclarationSection.css">
-    <link rel="stylesheet" href="RulesStyleDetailsPanel.css">
-    <link rel="stylesheet" href="StyleRuleIcons.css">
-    <link rel="stylesheet" href="CodeMirrorCompletionController.css">
-    <link rel="stylesheet" href="CodeMirrorTokenTrackingController.css">
-    <link rel="stylesheet" href="CompletionSuggestionsView.css">
-    <link rel="stylesheet" href="CodeMirrorOverrides.css">
-    <link rel="stylesheet" href="ConsolePrompt.css">
-    <link rel="stylesheet" href="CSSColorPicker.css">
-    <link rel="stylesheet" href="CodeMirrorDragToAlterNumberController.css">
+    <link rel="stylesheet" href="Views/ApplicationCacheFrameContentView.css">
+    <link rel="stylesheet" href="Views/ApplicationCacheIcons.css">
+    <link rel="stylesheet" href="Views/BezierEditor.css">
+    <link rel="stylesheet" href="Views/BoxModelDetailsSectionRow.css">
+    <link rel="stylesheet" href="Views/BreakpointActionView.css">
+    <link rel="stylesheet" href="Views/BreakpointPopoverController.css">
+    <link rel="stylesheet" href="Views/BreakpointTreeElement.css">
+    <link rel="stylesheet" href="Views/ButtonNavigationItem.css">
+    <link rel="stylesheet" href="Views/ButtonToolbarItem.css">
+    <link rel="stylesheet" href="Views/CSSStyleDeclarationSection.css">
+    <link rel="stylesheet" href="Views/CSSStyleDeclarationTextEditor.css">
+    <link rel="stylesheet" href="Views/CSSStyleDetailsSidebarPanel.css">
+    <link rel="stylesheet" href="Views/CallFrameIcons.css">
+    <link rel="stylesheet" href="Views/CallFrameView.css">
+    <link rel="stylesheet" href="Views/ChartDetailsSectionRow.css">
+    <link rel="stylesheet" href="Views/CircleChart.css">
+    <link rel="stylesheet" href="Views/ClusterContentView.css">
+    <link rel="stylesheet" href="Views/CodeMirrorOverrides.css">
+    <link rel="stylesheet" href="Views/ColorPicker.css">
+    <link rel="stylesheet" href="Views/ColorWheel.css">
+    <link rel="stylesheet" href="Views/CompletionSuggestionsView.css">
+    <link rel="stylesheet" href="Views/ComputedStyleDetailsPanel.css">
+    <link rel="stylesheet" href="Views/ConsoleMessageView.css">
+    <link rel="stylesheet" href="Views/ConsolePrompt.css">
+    <link rel="stylesheet" href="Views/ContentBrowser.css">
+    <link rel="stylesheet" href="Views/ContentBrowserTabContentView.css">
+    <link rel="stylesheet" href="Views/ContentFlowIcon.css">
+    <link rel="stylesheet" href="Views/ContentView.css">
+    <link rel="stylesheet" href="Views/ContentViewContainer.css">
+    <link rel="stylesheet" href="Views/ControlToolbarItem.css">
+    <link rel="stylesheet" href="Views/CookieIcon.css">
+    <link rel="stylesheet" href="Views/CookieStorageContentView.css">
+    <link rel="stylesheet" href="Views/DOMStorageContentView.css">
+    <link rel="stylesheet" href="Views/DOMStorageIcons.css">
+    <link rel="stylesheet" href="Views/DOMTreeContentView.css">
+    <link rel="stylesheet" href="Views/DOMTreeDataGrid.css">
+    <link rel="stylesheet" href="Views/DOMTreeOutline.css">
+    <link rel="stylesheet" href="Views/DashboardContainerView.css">
+    <link rel="stylesheet" href="Views/DataGrid.css">
+    <link rel="stylesheet" href="Views/DatabaseContentView.css">
+    <link rel="stylesheet" href="Views/DatabaseIcon.css">
+    <link rel="stylesheet" href="Views/DatabaseTableContentView.css">
+    <link rel="stylesheet" href="Views/DatabaseTableIcon.css">
+    <link rel="stylesheet" href="Views/DebuggerDashboardView.css">
+    <link rel="stylesheet" href="Views/DebuggerSidebarPanel.css">
+    <link rel="stylesheet" href="Views/DefaultDashboardView.css">
+    <link rel="stylesheet" href="Views/DetailsSection.css">
+    <link rel="stylesheet" href="Views/DividerNavigationItem.css">
+    <link rel="stylesheet" href="Views/Editing.css">
+    <link rel="stylesheet" href="Views/EventListenerSectionGroup.css">
+    <link rel="stylesheet" href="Views/ErrorObjectView.css">
+    <link rel="stylesheet" href="Views/FilterBar.css">
+    <link rel="stylesheet" href="Views/FindBanner.css">
+    <link rel="stylesheet" href="Views/FlexibleSpaceNavigationItem.css">
+    <link rel="stylesheet" href="Views/FolderIcon.css">
+    <link rel="stylesheet" href="Views/FontResourceContentView.css">
+    <link rel="stylesheet" href="Views/FormattedValue.css">
+    <link rel="stylesheet" href="Views/GoToLineDialog.css">
+    <link rel="stylesheet" href="Views/GradientEditor.css">
+    <link rel="stylesheet" href="Views/GradientSlider.css">
+    <link rel="stylesheet" href="Views/HierarchicalPathComponent.css">
+    <link rel="stylesheet" href="Views/HoverMenu.css">
+    <link rel="stylesheet" href="Views/ImageResourceContentView.css">
+    <link rel="stylesheet" href="Views/IndeterminateProgressSpinner.css">
+    <link rel="stylesheet" href="Views/IndexedDatabaseObjectStoreContentView.css">
+    <link rel="stylesheet" href="Views/InlineSwatch.css">
+    <link rel="stylesheet" href="Views/IssueTreeElement.css">
+    <link rel="stylesheet" href="Views/LayerTreeDetailsSidebarPanel.css">
+    <link rel="stylesheet" href="Views/LayoutTimelineOverviewGraph.css">
+    <link rel="stylesheet" href="Views/LayoutTimelineView.css">
+    <link rel="stylesheet" href="Views/LogContentView.css">
+    <link rel="stylesheet" href="Views/LogIcon.css">
+    <link rel="stylesheet" href="Views/MemoryCategoryView.css">
+    <link rel="stylesheet" href="Views/MemoryTimelineOverviewGraph.css">
+    <link rel="stylesheet" href="Views/MemoryTimelineView.css">
+    <link rel="stylesheet" href="Views/Main.css">
+    <link rel="stylesheet" href="Views/NavigationBar.css">
+    <link rel="stylesheet" href="Views/NavigationSidebarPanel.css">
+    <link rel="stylesheet" href="Views/NetworkGridContentView.css">
+    <link rel="stylesheet" href="Views/NetworkSidebarPanel.css">
+    <link rel="stylesheet" href="Views/NetworkTimelineOverviewGraph.css">
+    <link rel="stylesheet" href="Views/NetworkTimelineView.css">
+    <link rel="stylesheet" href="Views/NewTabContentView.css">
+    <link rel="stylesheet" href="Views/ObjectPreviewView.css">
+    <link rel="stylesheet" href="Views/ObjectTreeArrayIndexTreeElement.css">
+    <link rel="stylesheet" href="Views/ObjectTreeMapEntryTreeElement.css">
+    <link rel="stylesheet" href="Views/ObjectTreePropertyTreeElement.css">
+    <link rel="stylesheet" href="Views/ObjectTreeView.css">
+    <link rel="stylesheet" href="Views/OverviewTimelineView.css">
+    <link rel="stylesheet" href="Views/PathComponentIcons.css">
+    <link rel="stylesheet" href="Views/Popover.css">
+    <link rel="stylesheet" href="Views/ProbeDetailsSidebarPanel.css">
+    <link rel="stylesheet" href="Views/ProbeSetDataGrid.css">
+    <link rel="stylesheet" href="Views/QuickConsole.css">
+    <link rel="stylesheet" href="Views/RadioButtonNavigationItem.css">
+    <link rel="stylesheet" href="Views/RenderingFrameTimelineOverviewGraph.css">
+    <link rel="stylesheet" href="Views/RenderingFrameTimelineView.css">
+    <link rel="stylesheet" href="Views/ReplayDashboardView.css">
+    <link rel="stylesheet" href="Views/Resizer.css">
+    <link rel="stylesheet" href="Views/ResourceIcons.css">
+    <link rel="stylesheet" href="Views/ResourceSidebarPanel.css">
+    <link rel="stylesheet" href="Views/ResourceTreeElement.css">
+    <link rel="stylesheet" href="Views/RulesStyleDetailsPanel.css">
+    <link rel="stylesheet" href="Views/ScopeBar.css">
+    <link rel="stylesheet" href="Views/ScopeChainDetailsSidebarPanel.css">
+    <link rel="stylesheet" href="Views/ScopeRadioButtonNavigationItem.css">
+    <link rel="stylesheet" href="Views/ScriptContentView.css">
+    <link rel="stylesheet" href="Views/ScriptTimelineOverviewGraph.css">
+    <link rel="stylesheet" href="Views/ScriptTimelineView.css">
+    <link rel="stylesheet" href="Views/SearchBar.css">
+    <link rel="stylesheet" href="Views/SearchIcons.css">
+    <link rel="stylesheet" href="Views/SearchSidebarPanel.css">
+    <link rel="stylesheet" href="Views/Sidebar.css">
+    <link rel="stylesheet" href="Views/SidebarPanel.css">
+    <link rel="stylesheet" href="Views/Slider.css">
+    <link rel="stylesheet" href="Views/SourceCodeTextEditor.css">
+    <link rel="stylesheet" href="Views/StackTraceView.css">
+    <link rel="stylesheet" href="Views/StorageSidebarPanel.css">
+    <link rel="stylesheet" href="Views/StyleRuleIcons.css">
+    <link rel="stylesheet" href="Views/SyntaxHighlightingDefaultTheme.css">
+    <link rel="stylesheet" href="Views/TabBar.css">
+    <link rel="stylesheet" href="Views/TabBrowser.css">
+    <link rel="stylesheet" href="Views/TextContentView.css">
+    <link rel="stylesheet" href="Views/TextEditor.css">
+    <link rel="stylesheet" href="Views/TextResourceContentView.css">
+    <link rel="stylesheet" href="Views/TimelineDataGrid.css">
+    <link rel="stylesheet" href="Views/TimelineIcons.css">
+    <link rel="stylesheet" href="Views/TimelineOverview.css">
+    <link rel="stylesheet" href="Views/TimelineRecordBar.css">
+    <link rel="stylesheet" href="Views/TimelineRecordFrame.css">
+    <link rel="stylesheet" href="Views/TimelineRecordingContentView.css">
+    <link rel="stylesheet" href="Views/TimelineRuler.css">
+    <link rel="stylesheet" href="Views/TimelineSidebarPanel.css">
+    <link rel="stylesheet" href="Views/TimelineView.css">
+    <link rel="stylesheet" href="Views/Toolbar.css">
+    <link rel="stylesheet" href="Views/TreeElementStatusButton.css">
+    <link rel="stylesheet" href="Views/TreeOutline.css">
+    <link rel="stylesheet" href="Views/TypeTokenView.css">
+    <link rel="stylesheet" href="Views/TypeTreeElement.css">
+    <link rel="stylesheet" href="Views/TypeTreeView.css">
+    <link rel="stylesheet" href="Views/Variables.css">
+    <link rel="stylesheet" href="Views/VisualStyleBackgroundPicker.css">
+    <link rel="stylesheet" href="Views/VisualStyleColorPicker.css">
+    <link rel="stylesheet" href="Views/VisualStyleCommaSeparatedKeywordEditor.css">
+    <link rel="stylesheet" href="Views/VisualStyleDetailsPanel.css">
+    <link rel="stylesheet" href="Views/VisualStyleKeywordCheckbox.css">
+    <link rel="stylesheet" href="Views/VisualStyleKeywordIconList.css">
+    <link rel="stylesheet" href="Views/VisualStyleNumberInputBox.css">
+    <link rel="stylesheet" href="Views/VisualStylePropertyEditor.css">
+    <link rel="stylesheet" href="Views/VisualStylePropertyEditorLink.css">
+    <link rel="stylesheet" href="Views/VisualStyleRelativeNumberSlider.css">
+    <link rel="stylesheet" href="Views/VisualStyleSelectorSection.css">
+    <link rel="stylesheet" href="Views/VisualStyleSelectorTreeItem.css">
+    <link rel="stylesheet" href="Views/VisualStyleTabbedPropertiesRow.css">
+    <link rel="stylesheet" href="Views/VisualStyleTimingEditor.css">
+    <link rel="stylesheet" href="Views/VisualStyleUnitSlider.css">
+
+    <link rel="stylesheet" href="Controllers/CodeMirrorCompletionController.css">
+    <link rel="stylesheet" href="Controllers/CodeMirrorDragToAdjustNumberController.css">
+    <link rel="stylesheet" href="Controllers/CodeMirrorTokenTrackingController.css">
+
+    <link rel="stylesheet" href="Debug/UncaughtExceptionReporter.css">
+
+    <script src="Debug/UncaughtExceptionReporter.js"></script>
 
     <script src="External/CodeMirror/codemirror.js"></script>
-    <script src="External/CodeMirror/comment.js"></script>
-    <script src="External/CodeMirror/matchbrackets.js"></script>
+
+    <script src="External/CodeMirror/clojure.js"></script>
     <script src="External/CodeMirror/closebrackets.js"></script>
-    <script src="External/CodeMirror/runmode.js"></script>
-    <script src="External/CodeMirror/searchcursor.js"></script>
-    <script src="External/CodeMirror/placeholder.js"></script>
-    <script src="External/CodeMirror/overlay.js"></script>
-    <script src="External/CodeMirror/xml.js"></script>
-    <script src="External/CodeMirror/htmlmixed.js"></script>
+    <script src="External/CodeMirror/coffeescript.js"></script>
+    <script src="External/CodeMirror/comment.js"></script>
     <script src="External/CodeMirror/css.js"></script>
+    <script src="External/CodeMirror/htmlmixed.js"></script>
     <script src="External/CodeMirror/javascript.js"></script>
-    <script src="External/CodeMirror/clojure.js"></script>
-    <script src="External/CodeMirror/coffeescript.js"></script>
     <script src="External/CodeMirror/livescript.js"></script>
+    <script src="External/CodeMirror/matchbrackets.js"></script>
+    <script src="External/CodeMirror/overlay.js"></script>
+    <script src="External/CodeMirror/placeholder.js"></script>
+    <script src="External/CodeMirror/runmode.js"></script>
     <script src="External/CodeMirror/sass.js"></script>
-    <script src="External/CodeMirror/less.js"></script>
+    <script src="External/CodeMirror/searchcursor.js"></script>
     <script src="External/CodeMirror/sql.js"></script>
+    <script src="External/CodeMirror/xml.js"></script>
+
+    <script src="External/Esprima/esprima.js"></script>
+
+    <script src="Base/WebInspector.js"></script>
+    <script src="Protocol/InspectorFrontendHostStub.js"></script>
+    <script src="Base/Platform.js"></script>
+    <script src="Base/LinkedList.js"></script>
+    <script src="Base/ListMultimap.js"></script>
+    <script src="Base/Object.js"></script>
+
+    <script src="Base/DOMUtilities.js"></script>
+    <script src="Base/EventListener.js"></script>
+    <script src="Base/EventListenerSet.js"></script>
+    <script src="Base/ImageUtilities.js"></script>
+    <script src="Base/LoadLocalizedStrings.js"></script>
+    <script src="Base/MIMETypeUtilities.js"></script>
+    <script src="Base/URLUtilities.js"></script>
+    <script src="Base/Utilities.js"></script>
+    <script src="Base/Setting.js"></script>
+
+    <script src="Protocol/ProtocolTracer.js"></script>
+    <script src="Protocol/LoggingProtocolTracer.js"></script>
+
+    <script src="Protocol/ApplicationCacheObserver.js"></script>
+    <script src="Protocol/CSSObserver.js"></script>
+    <script src="Protocol/ConsoleObserver.js"></script>
+    <script src="Protocol/DOMObserver.js"></script>
+    <script src="Protocol/DOMStorageObserver.js"></script>
+    <script src="Protocol/DatabaseObserver.js"></script>
+    <script src="Protocol/DebuggerObserver.js"></script>
+    <script src="Protocol/HeapObserver.js"></script>
+    <script src="Protocol/InspectorBackend.js"></script>
+    <script src="Protocol/InspectorFrontendAPI.js"></script>
+    <script src="Protocol/InspectorObserver.js"></script>
+    <script src="Protocol/LayerTreeObserver.js"></script>
+    <script src="Protocol/LoadInspectorBackendCommands.js"></script>
+    <script src="Protocol/MemoryObserver.js"></script>
+    <script src="Protocol/MessageDispatcher.js"></script>
+    <script src="Protocol/NetworkObserver.js"></script>
+    <script src="Protocol/PageObserver.js"></script>
+    <script src="Protocol/RemoteObject.js"></script>
+    <script src="Protocol/ReplayObserver.js"></script>
+    <script src="Protocol/RuntimeObserver.js"></script>
+    <script src="Protocol/ScriptProfilerObserver.js"></script>
+    <script src="Protocol/TimelineObserver.js"></script>
+
+    <script src="Models/BreakpointAction.js"></script>
+    <script src="Models/ConsoleMessage.js"></script>
+    <script src="Models/Instrument.js"></script>
+    <script src="Models/SourceCode.js"></script>
+    <script src="Models/SourceCodeLocation.js"></script>
+    <script src="Models/Timeline.js"></script>
+    <script src="Models/TimelineRecord.js"></script>
+
+    <script src="Models/AnalyzerMessage.js"></script>
+    <script src="Models/ApplicationCacheFrame.js"></script>
+    <script src="Models/ApplicationCacheManifest.js"></script>
+    <script src="Models/BackForwardEntry.js"></script>
+    <script src="Models/Branch.js"></script>
+    <script src="Models/Breakpoint.js"></script>
+    <script src="Models/CallingContextTree.js"></script>
+    <script src="Models/CSSCompletions.js"></script>
+    <script src="Models/CSSKeywordCompletions.js"></script>
+    <script src="Models/CSSMedia.js"></script>
+    <script src="Models/CSSProperty.js"></script>
+    <script src="Models/CSSRule.js"></script>
+    <script src="Models/CSSSelector.js"></script>
+    <script src="Models/CSSStyleDeclaration.js"></script>
+    <script src="Models/CSSStyleSheet.js"></script>
+    <script src="Models/CallFrame.js"></script>
+    <script src="Models/CollectionEntry.js"></script>
+    <script src="Models/CollectionEntryPreview.js"></script>
+    <script src="Models/Color.js"></script>
+    <script src="Models/ConsoleCommandResultMessage.js"></script>
+    <script src="Models/ContentFlow.js"></script>
+    <script src="Models/CookieStorageObject.js"></script>
+    <script src="Models/DOMNode.js"></script>
+    <script src="Models/DOMNodeStyles.js"></script>
+    <script src="Models/DOMSearchMatchObject.js"></script>
+    <script src="Models/DOMStorageObject.js"></script>
+    <script src="Models/DOMTree.js"></script>
+    <script src="Models/DatabaseObject.js"></script>
+    <script src="Models/DatabaseTableObject.js"></script>
+    <script src="Models/DebuggerDashboard.js"></script>
+    <script src="Models/DefaultDashboard.js"></script>
+    <script src="Models/ExecutionContext.js"></script>
+    <script src="Models/ExecutionContextList.js"></script>
+    <script src="Models/Frame.js"></script>
+    <script src="Models/FPSInstrument.js"></script>
+    <script src="Models/GarbageCollection.js"></script>
+    <script src="Models/Geometry.js"></script>
+    <script src="Models/Gradient.js"></script>
+    <script src="Models/IndexedDatabase.js"></script>
+    <script src="Models/IndexedDatabaseObjectStore.js"></script>
+    <script src="Models/IndexedDatabaseObjectStoreIndex.js"></script>
+    <script src="Models/IssueMessage.js"></script>
+    <script src="Models/KeyboardShortcut.js"></script>
+    <script src="Models/LayoutInstrument.js"></script>
+    <script src="Models/LayoutTimelineRecord.js"></script>
+    <script src="Models/LazySourceCodeLocation.js"></script>
+    <script src="Models/LineWidget.js"></script>
+    <script src="Models/LogObject.js"></script>
+    <script src="Models/MemoryCategory.js"></script>
+    <script src="Models/MemoryInstrument.js"></script>
+    <script src="Models/MemoryTimelineRecord.js"></script>
+    <script src="Models/NativeFunctionParameters.js"></script>
+    <script src="Models/NetworkInstrument.js"></script>
+    <script src="Models/NetworkTimeline.js"></script>
+    <script src="Models/ObjectPreview.js"></script>
+    <script src="Models/Probe.js"></script>
+    <script src="Models/ProbeSet.js"></script>
+    <script src="Models/ProbeSetDataFrame.js"></script>
+    <script src="Models/ProbeSetDataTable.js"></script>
+    <script src="Models/Profile.js"></script>
+    <script src="Models/ProfileNode.js"></script>
+    <script src="Models/ProfileNodeCall.js"></script>
+    <script src="Models/PropertyDescriptor.js"></script>
+    <script src="Models/PropertyPath.js"></script>
+    <script src="Models/PropertyPreview.js"></script>    
+    <script src="Models/RenderingFrameTimelineRecord.js"></script>
+    <script src="Models/ReplayDashboard.js"></script>
+    <script src="Models/ReplaySession.js"></script>
+    <script src="Models/ReplaySessionSegment.js"></script>
+    <script src="Models/Resource.js"></script>
+    <script src="Models/ResourceCollection.js"></script>
+    <script src="Models/ResourceTimelineRecord.js"></script>
+    <script src="Models/Revision.js"></script>
+    <script src="Models/ScopeChainNode.js"></script>
+    <script src="Models/Script.js"></script>
+    <script src="Models/ScriptInstrument.js"></script>
+    <script src="Models/ScriptSyntaxTree.js"></script>
+    <script src="Models/ScriptTimelineRecord.js"></script>
+    <script src="Models/SourceCodePosition.js"></script>
+    <script src="Models/SourceCodeRevision.js"></script>
+    <script src="Models/SourceCodeSearchMatchObject.js"></script>
+    <script src="Models/SourceCodeTextRange.js"></script>
+    <script src="Models/SourceCodeTimeline.js"></script>
+    <script src="Models/SourceMap.js"></script>
+    <script src="Models/SourceMapResource.js"></script>
+    <script src="Models/StackTrace.js"></script>
+    <script src="Models/StructureDescription.js"></script>
+    <script src="Models/TextMarker.js"></script>
+    <script src="Models/TextRange.js"></script>
+    <script src="Models/TimelineMarker.js"></script>
+    <script src="Models/TimelineRecording.js"></script>
+    <script src="Models/TypeDescription.js"></script>
+    <script src="Models/TypeSet.js"></script>
+    <script src="Models/WrappedPromise.js"></script>
+
+    <script src="Views/View.js"></script>
+
+    <script src="Views/ConsoleCommandView.js"></script>
+    <script src="Views/ConsoleMessageView.js"></script>
+    <script src="Views/ContentView.js"></script>
+    <script src="Views/DataGrid.js"></script>
+    <script src="Views/DetailsSectionRow.js"></script>
+    <script src="Views/HierarchicalPathComponent.js"></script>
+    <script src="Views/NavigationItem.js"></script>
+    <script src="Views/SidebarPanel.js"></script>
+    <script src="Views/StyleDetailsPanel.js"></script>
+    <script src="Views/TabBar.js"></script>
+    <script src="Views/TabBarItem.js"></script>
+    <script src="Views/TabBrowser.js"></script>
+    <script src="Views/TextEditor.js"></script>
+    <script src="Views/TimelineOverviewGraph.js"></script>
+    <script src="Views/TimelineView.js"></script>
+    <script src="Views/TreeOutline.js"></script>
+
+    <script src="Views/ButtonNavigationItem.js"></script>
+    <script src="Views/DatabaseUserQueryViewBase.js"></script>
+    <script src="Views/DatabaseUserQueryErrorView.js"></script>
+    <script src="Views/DatabaseUserQuerySuccessView.js"></script>
+    <script src="Views/DOMTreeContentView.js"></script>
+    <script src="Views/DetailsSidebarPanel.js"></script>
+    <script src="Views/GeneralTreeElement.js"></script>
+    <script src="Views/NavigationSidebarPanel.js"></script>
+    <script src="Views/ResourceContentView.js"></script>
+    <script src="Views/TabContentView.js"></script>
+    <script src="Views/TimelineDataGrid.js"></script>
+    <script src="Views/TimelineDataGridNode.js"></script>
+
+    <script src="Views/ContentBrowserTabContentView.js"></script>
+    <script src="Views/DOMDetailsSidebarPanel.js"></script>
+    <script src="Views/FolderTreeElement.js"></script>
+    <script src="Views/FolderizedTreeElement.js"></script>
+    <script src="Views/NetworkTabContentView.js"></script>
+    <script src="Views/NewTabContentView.js"></script>
+    <script src="Views/ObjectTreeBaseTreeElement.js"></script>
+    <script src="Views/SourceCodeTreeElement.js"></script>
+    <script src="Views/StorageTreeElement.js"></script>
+    <script src="Views/TimelineOverview.js"></script>
+    <script src="Views/TimelineRecordTreeElement.js"></script>
+
+    <script src="Views/ConsoleTabContentView.js"></script>
+    <script src="Views/DebuggerTabContentView.js"></script>
+    <script src="Views/DebuggerTreeElement.js"></script>
+    <script src="Views/ElementsTabContentView.js"></script>
+    <script src="Views/ResourceTreeElement.js"></script>
+    <script src="Views/ResourcesTabContentView.js"></script>
+    <script src="Views/SearchTabContentView.js"></script>
+    <script src="Views/SettingsTabContentView.js"></script>
+    <script src="Views/StorageTabContentView.js"></script>
+    <script src="Views/TimelineTabContentView.js"></script>
+
+    <script src="Views/DetailsSection.js"></script>
+    <script src="Views/DetailsSectionDataGridRow.js"></script>
+    <script src="Views/DetailsSectionGroup.js"></script>
+    <script src="Views/DetailsSectionPropertiesRow.js"></script>
+    <script src="Views/DetailsSectionSimpleRow.js"></script>
+    <script src="Views/DetailsSectionTextRow.js"></script>
+
+    <script src="Views/ActivateButtonNavigationItem.js"></script>
+    <script src="Views/ActivateButtonToolbarItem.js"></script>
+    <script src="Views/ApplicationCacheDetailsSidebarPanel.js"></script>
+    <script src="Views/ApplicationCacheFrameContentView.js"></script>
+    <script src="Views/ApplicationCacheFrameTreeElement.js"></script>
+    <script src="Views/ApplicationCacheManifestTreeElement.js"></script>
+    <script src="Views/BezierEditor.js"></script>
+    <script src="Views/BoxModelDetailsSectionRow.js"></script>
+    <script src="Views/BreakpointActionView.js"></script>
+    <script src="Views/BreakpointTreeElement.js"></script>
+    <script src="Views/ButtonToolbarItem.js"></script>
+    <script src="Views/CSSStyleDeclarationSection.js"></script>
+    <script src="Views/CSSStyleDeclarationTextEditor.js"></script>
+    <script src="Views/CSSStyleDetailsSidebarPanel.js"></script>
+    <script src="Views/CallFrameTreeElement.js"></script>
+    <script src="Views/CallFrameView.js"></script>
+    <script src="Views/ChartDetailsSectionRow.js"></script>
+    <script src="Views/CircleChart.js"></script>
+    <script src="Views/ClusterContentView.js"></script>
+    <script src="Views/CodeMirrorAdditions.js"></script>
+    <script src="Views/CodeMirrorEditor.js"></script>
+    <script src="Views/CodeMirrorFormatters.js"></script>
+    <script src="Views/CodeMirrorTextMarkers.js"></script>
+    <script src="Views/ColorPicker.js"></script>
+    <script src="Views/ColorWheel.js"></script>
+    <script src="Views/CompletionSuggestionsView.js"></script>
+    <script src="Views/ComputedStyleDetailsPanel.js"></script>
+    <script src="Views/ConsoleGroup.js"></script>
+    <script src="Views/ConsolePrompt.js"></script>
+    <script src="Views/ConsoleSession.js"></script>
+    <script src="Views/ContentBrowser.js"></script>
+    <script src="Views/ContentFlowDOMTreeContentView.js"></script>
+    <script src="Views/ContentFlowTreeElement.js"></script>
+    <script src="Views/ContentViewContainer.js"></script>
+    <script src="Views/ContextMenu.js"></script>
+    <script src="Views/ControlToolbarItem.js"></script>
+    <script src="Views/CookieStorageContentView.js"></script>
+    <script src="Views/CookieStorageTreeElement.js"></script>
+    <script src="Views/DOMNodeDetailsSidebarPanel.js"></script>
+    <script src="Views/DOMStorageContentView.js"></script>
+    <script src="Views/DOMStorageTreeElement.js"></script>
+    <script src="Views/DOMTreeDataGrid.js"></script>
+    <script src="Views/DOMTreeDataGridNode.js"></script>
+    <script src="Views/DOMTreeElement.js"></script>
+    <script src="Views/DOMTreeElementPathComponent.js"></script>
+    <script src="Views/DOMTreeOutline.js"></script>
+    <script src="Views/DOMTreeUpdater.js"></script>
+    <script src="Views/DashboardContainerView.js"></script>
+    <script src="Views/DashboardView.js"></script>
+    <script src="Views/DatabaseContentView.js"></script>
+    <script src="Views/DatabaseHostTreeElement.js"></script>
+    <script src="Views/DatabaseTableContentView.js"></script>
+    <script src="Views/DatabaseTableTreeElement.js"></script>
+    <script src="Views/DatabaseTreeElement.js"></script>
+    <script src="Views/DebuggerDashboardView.js"></script>
+    <script src="Views/DebuggerSidebarPanel.js"></script>
+    <script src="Views/DefaultDashboardView.js"></script>
+    <script src="Views/DividerNavigationItem.js"></script>
+    <script src="Views/EditingSupport.js"></script>
+    <script src="Views/ErrorObjectView.js"></script>
+    <script src="Views/EventListenerSection.js"></script>
+    <script src="Views/EventListenerSectionGroup.js"></script>
+    <script src="Views/FilterBar.js"></script>
+    <script src="Views/FilterBarButton.js"></script>
+    <script src="Views/FindBanner.js"></script>
+    <script src="Views/FlexibleSpaceNavigationItem.js"></script>
+    <script src="Views/FontResourceContentView.js"></script>
+    <script src="Views/FormattedValue.js"></script>
+    <script src="Views/FrameDOMTreeContentView.js"></script>
+    <script src="Views/FrameTreeElement.js"></script>
+    <script src="Views/GeneralTreeElementPathComponent.js"></script>
+    <script src="Views/GenericResourceContentView.js"></script>
+    <script src="Views/GoToLineDialog.js"></script>
+    <script src="Views/GradientEditor.js"></script>
+    <script src="Views/GradientSlider.js"></script>
+    <script src="Views/HierarchicalPathNavigationItem.js"></script>
+    <script src="Views/HoverMenu.js"></script>
+    <script src="Views/ImageResourceContentView.js"></script>
+    <script src="Views/IndeterminateProgressSpinner.js"></script>
+    <script src="Views/IndexedDatabaseEntryDataGridNode.js"></script>
+    <script src="Views/IndexedDatabaseHostTreeElement.js"></script>
+    <script src="Views/IndexedDatabaseObjectStoreContentView.js"></script>
+    <script src="Views/IndexedDatabaseObjectStoreIndexTreeElement.js"></script>
+    <script src="Views/IndexedDatabaseObjectStoreTreeElement.js"></script>
+    <script src="Views/IndexedDatabaseTreeElement.js"></script>
+    <script src="Views/InlineSwatch.js"></script>
+    <script src="Views/IssueTreeElement.js"></script>
+    <script src="Views/LayerTreeDataGridNode.js"></script>
+    <script src="Views/LayerTreeDetailsSidebarPanel.js"></script>
+    <script src="Views/LayoutTimelineDataGrid.js"></script>
+    <script src="Views/LayoutTimelineDataGridNode.js"></script>
+    <script src="Views/LayoutTimelineOverviewGraph.js"></script>
+    <script src="Views/LayoutTimelineView.js"></script>
+    <script src="Views/LineChart.js"></script>
+    <script src="Views/LogContentView.js"></script>
+    <script src="Views/LogTreeElement.js"></script>
+    <script src="Views/MemoryCategoryView.js"></script>
+    <script src="Views/MemoryTimelineOverviewGraph.js"></script>
+    <script src="Views/MemoryTimelineView.js"></script>
+    <script src="Views/MultipleScopeBarItem.js"></script>
+    <script src="Views/NavigationBar.js"></script>
+    <script src="Views/NetworkGridContentView.js"></script>
+    <script src="Views/NetworkSidebarPanel.js"></script>
+    <script src="Views/NetworkTimelineOverviewGraph.js"></script>
+    <script src="Views/NetworkTimelineView.js"></script>
+    <script src="Views/ObjectPreviewView.js"></script>
+    <script src="Views/ObjectTreeArrayIndexTreeElement.js"></script>
+    <script src="Views/ObjectTreeMapEntryTreeElement.js"></script>
+    <script src="Views/ObjectTreePropertyTreeElement.js"></script>
+    <script src="Views/ObjectTreeSetIndexTreeElement.js"></script>
+    <script src="Views/ObjectTreeView.js"></script>
+    <script src="Views/OverviewTimelineView.js"></script>
+    <script src="Views/Popover.js"></script>
+    <script src="Views/ProbeDetailsSidebarPanel.js"></script>
+    <script src="Views/ProbeSetDataGrid.js"></script>
+    <script src="Views/ProbeSetDataGridNode.js"></script>
+    <script src="Views/ProbeSetDetailsSection.js"></script>
+    <script src="Views/ProfileNodeDataGridNode.js"></script>
+    <script src="Views/ProfileNodeTreeElement.js"></script>
+    <script src="Views/QuickConsole.js"></script>
+    <script src="Views/QuickConsoleNavigationBar.js"></script>
+    <script src="Views/RadioButtonNavigationItem.js"></script>
+    <script src="Views/RenderingFrameTimelineDataGridNode.js"></script>
+    <script src="Views/RenderingFrameTimelineOverviewGraph.js"></script>
+    <script src="Views/RenderingFrameTimelineView.js"></script>
+    <script src="Views/ReplayDashboardView.js"></script>
+    <script src="Views/Resizer.js"></script>
+    <script src="Views/ResourceClusterContentView.js"></script>
+    <script src="Views/ResourceDetailsSidebarPanel.js"></script>
+    <script src="Views/ResourceSidebarPanel.js"></script>
+    <script src="Views/ResourceTimelineDataGridNode.js"></script>
+    <script src="Views/ResourceTimelineDataGridNodePathComponent.js"></script>
+    <script src="Views/RulesStyleDetailsPanel.js"></script>
+    <script src="Views/ScopeBar.js"></script>
+    <script src="Views/ScopeBarItem.js"></script>
+    <script src="Views/ScopeChainDetailsSidebarPanel.js"></script>
+    <script src="Views/ScopeRadioButtonNavigationItem.js"></script>
+    <script src="Views/ScriptContentView.js"></script>
+    <script src="Views/ScriptTimelineDataGrid.js"></script>
+    <script src="Views/ScriptTimelineDataGridNode.js"></script>
+    <script src="Views/ScriptTimelineOverviewGraph.js"></script>
+    <script src="Views/ScriptTimelineView.js"></script>
+    <script src="Views/ScriptTreeElement.js"></script>
+    <script src="Views/SearchBar.js"></script>
+    <script src="Views/SearchResultTreeElement.js"></script>
+    <script src="Views/SearchSidebarPanel.js"></script>
+    <script src="Views/Sidebar.js"></script>
+    <script src="Views/Slider.js"></script>
+    <script src="Views/SourceCodeTextEditor.js"></script>
+    <script src="Views/SourceCodeTimelineTimelineDataGridNode.js"></script>
+    <script src="Views/SourceCodeTimelineTreeElement.js"></script>
+    <script src="Views/SourceMapResourceTreeElement.js"></script>
+    <script src="Views/StackTraceView.js"></script>
+    <script src="Views/StackedLineChart.js"></script>
+    <script src="Views/StorageSidebarPanel.js"></script>
+    <script src="Views/SyntaxHighlightingSupport.js"></script>
+    <script src="Views/TextContentView.js"></script>
+    <script src="Views/TextResourceContentView.js"></script>
+    <script src="Views/TimelineRecordBar.js"></script>
+    <script src="Views/TimelineRecordFrame.js"></script>
+    <script src="Views/TimelineRecordingContentView.js"></script>
+    <script src="Views/TimelineRuler.js"></script>
+    <script src="Views/TimelineSidebarPanel.js"></script>
+    <script src="Views/ToggleButtonNavigationItem.js"></script>
+    <script src="Views/ToggleControlToolbarItem.js"></script>
+    <script src="Views/Toolbar.js"></script>
+    <script src="Views/TreeElementStatusButton.js"></script>
+    <script src="Views/TreeOutlineDataGridSynchronizer.js"></script>
+    <script src="Views/TypeTokenView.js"></script>
+    <script src="Views/TypeTreeElement.js"></script>
+    <script src="Views/TypeTreeView.js"></script>
+
+    <script src="Views/VisualStyleDetailsPanel.js"></script>
+    <script src="Views/VisualStylePropertyEditor.js"></script>
+    <script src="Views/VisualStyleBackgroundPicker.js"></script>
+    <script src="Views/VisualStyleBasicInput.js"></script>
+    <script src="Views/VisualStyleColorPicker.js"></script>
+    <script src="Views/VisualStyleCommaSeparatedKeywordEditor.js"></script>
+    <script src="Views/VisualStyleFontFamilyListEditor.js"></script>
+    <script src="Views/VisualStyleFontFamilyTreeElement.js"></script>
+    <script src="Views/VisualStyleKeywordCheckbox.js"></script>
+    <script src="Views/VisualStyleKeywordIconList.js"></script>
+    <script src="Views/VisualStyleKeywordPicker.js"></script>
+    <script src="Views/VisualStyleNumberInputBox.js"></script>
+    <script src="Views/VisualStylePropertyCombiner.js"></script>
+    <script src="Views/VisualStylePropertyEditorLink.js"></script>
+    <script src="Views/VisualStylePropertyNameInput.js"></script>
+    <script src="Views/VisualStyleRelativeNumberSlider.js"></script>
+    <script src="Views/VisualStyleSelectorSection.js"></script>
+    <script src="Views/VisualStyleSelectorTreeItem.js"></script>
+    <script src="Views/VisualStyleTabbedPropertiesRow.js"></script>
+    <script src="Views/VisualStyleTimingEditor.js"></script>
+    <script src="Views/VisualStyleURLInput.js"></script>
+    <script src="Views/VisualStyleUnitSlider.js"></script>
+
+    <script src="Controllers/Annotator.js"></script>
+    <script src="Controllers/CodeMirrorEditingController.js"></script>
+
+    <script src="Controllers/AnalyzerManager.js"></script>
+    <script src="Controllers/ApplicationCacheManager.js"></script>
+    <script src="Controllers/BasicBlockAnnotator.js"></script>
+    <script src="Controllers/BranchManager.js"></script>
+    <script src="Controllers/BreakpointPopoverController.js"></script>
+    <script src="Controllers/CSSStyleManager.js"></script>
+    <script src="Controllers/CodeMirrorColorEditingController.js"></script>
+    <script src="Controllers/CodeMirrorCompletionController.js"></script>
+    <script src="Controllers/CodeMirrorBezierEditingController.js"></script>
+    <script src="Controllers/CodeMirrorDragToAdjustNumberController.js"></script>
+    <script src="Controllers/CodeMirrorGradientEditingController.js"></script>
+    <script src="Controllers/CodeMirrorTokenTrackingController.js"></script>
+    <script src="Controllers/CodeMirrorTextKillController.js"></script>
+    <script src="Controllers/DOMTreeManager.js"></script>
+    <script src="Controllers/DashboardManager.js"></script>
+    <script src="Controllers/DebuggerManager.js"></script>
+    <script src="Controllers/DragToAdjustController.js"></script>
+    <script src="Controllers/Formatter.js"></script>
+    <script src="Controllers/FormatterContentBuilder.js"></script>
+    <script src="Controllers/FormatterSourceMap.js"></script>
+    <script src="Controllers/FrameResourceManager.js"></script>
+    <script src="Controllers/HeapManager.js"></script>
+    <script src="Controllers/IssueManager.js"></script>
+    <script src="Controllers/JavaScriptLogViewController.js"></script>
+    <script src="Controllers/JavaScriptRuntimeCompletionProvider.js"></script>
+    <script src="Controllers/LayerTreeManager.js"></script>
+    <script src="Controllers/LogManager.js"></script>
+    <script src="Controllers/ProbeManager.js"></script>
+    <script src="Controllers/ReplayManager.js"></script>
+    <script src="Controllers/RuntimeManager.js"></script>
+    <script src="Controllers/SourceMapManager.js"></script>
+    <script src="Controllers/StorageManager.js"></script>
+    <script src="Controllers/TimelineManager.js"></script>
+    <script src="Controllers/TypeTokenAnnotator.js"></script>
+    <script src="Controllers/VisualStyleCompletionsController.js"></script>
+
+    <script src="Base/Main.js"></script>
 
-    <script src="Utilities.js"></script>
-    <script src="WebInspector.js"></script>
-    <script src="Object.js"></script>
-    <script src="CodeMirrorDragToAlterNumberController.js"></script>
-    <script src="CodeMirrorAdditions.js"></script>
-    <script src="Setting.js"></script>
-    <script src="InspectorBackend.js"></script>
-    <script src="InspectorFrontendHostStub.js"></script>
-    <script src="LoadInspectorBackendCommands.js"></script>
-    <script src="InspectorFrontendAPI.js"></script>
-    <script src="ContextMenu.js"></script>
-    <script src="RemoteObject.js"></script>
-    <script src="InspectorObserver.js"></script>
-    <script src="PageObserver.js"></script>
-    <script src="ConsoleObserver.js"></script>
-    <script src="NetworkObserver.js"></script>
-    <script src="CSSObserver.js"></script>
-    <script src="DOMObserver.js"></script>
-    <script src="DebuggerObserver.js"></script>
-    <script src="DatabaseObserver.js"></script>
-    <script src="ProfilerObserver.js"></script>
-    <script src="LayerTreeObserver.js"></script>
-    <script src="RuntimeObserver.js"></script>
-    <script src="ImageUtilities.js"></script>
-    <script src="DataGrid.js"></script>
-    <script src="ProfileDataGridTree.js"></script>
-    <script src="BottomUpProfileDataGridTree.js"></script>
-    <script src="TopDownProfileDataGridTree.js"></script>
-    <script src="CookieStorageObject.js"></script>
-    <script src="DatabaseObject.js"></script>
-    <script src="DatabaseTableObject.js"></script>
-    <script src="DOMStorageObject.js"></script>
-    <script src="DOMStorageObserver.js"></script>
-    <script src="StorageManager.js"></script>
-    <script src="ApplicationCacheFrame.js"></script>
-    <script src="ApplicationCacheManifest.js"></script>
-    <script src="ApplicationCacheManager.js"></script>
-    <script src="ApplicationCacheObserver.js"></script>
-    <script src="TimelineObserver.js"></script>
-    <script src="TimelineManager.js"></script>
-    <script src="TimelineRecord.js"></script>
-    <script src="TimelineEventMarker.js"></script>
-    <script src="ResourceTimelineRecord.js"></script>
-    <script src="FrameResourceManager.js"></script>
-    <script src="IssueManager.js"></script>
-    <script src="Frame.js"></script>
-    <script src="SourceCode.js"></script>
-    <script src="Resource.js"></script>
-    <script src="ResourceCollection.js"></script>
-    <script src="BinarySearch.js"></script>
-    <script src="EditingSupport.js"></script>
-    <script src="KeyboardShortcut.js"></script>
-    <script src="NavigationBar.js"></script>
-    <script src="NavigationItem.js"></script>
-    <script src="FlexibleSpaceNavigationItem.js"></script>
-    <script src="DividerNavigationItem.js"></script>
-    <script src="ButtonNavigationItem.js"></script>
-    <script src="RadioButtonNavigationItem.js"></script>
-    <script src="ToggleButtonNavigationItem.js"></script>
-    <script src="ActivateButtonNavigationItem.js"></script>
-    <script src="HierarchicalPathNavigationItem.js"></script>
-    <script src="HierarchicalPathComponent.js"></script>
-    <script src="GeneralTreeElementPathComponent.js"></script>
-    <script src="ScopeBarItem.js"></script>
-    <script src="ScopeBar.js"></script>
-    <script src="SearchBar.js"></script>
-    <script src="FilterBar.js"></script>
-    <script src="Sidebar.js"></script>
-    <script src="SidebarPanel.js"></script>
-    <script src="TreeOutline.js"></script>
-    <script src="NavigationSidebarPanel.js"></script>
-    <script src="DetailsSidebarPanel.js"></script>
-    <script src="GeneralTreeElement.js"></script>
-    <script src="SourceCodeTreeElement.js"></script>
-    <script src="FolderTreeElement.js"></script>
-    <script src="ResourceSidebarPanel.js"></script>
-    <script src="ResourceDetailsSidebarPanel.js"></script>
-    <script src="ResourceTreeElement.js"></script>
-    <script src="SourceMapResourceTreeElement.js"></script>
-    <script src="StorageTreeElement.js"></script>
-    <script src="CookieStorageTreeElement.js"></script>
-    <script src="DatabaseHostTreeElement.js"></script>
-    <script src="DatabaseTreeElement.js"></script>
-    <script src="DatabaseTableTreeElement.js"></script>
-    <script src="DOMStorageTreeElement.js"></script>
-    <script src="ApplicationCacheFrameTreeElement.js"></script>
-    <script src="ApplicationCacheManifestTreeElement.js"></script>
-    <script src="IssueMessage.js"></script>
-    <script src="FrameTreeElement.js"></script>
-    <script src="CSSCompletions.js"></script>
-    <script src="CSSKeywordCompletions.js"></script>
-    <script src="SyntaxHighlightingSupport.js"></script>
-    <script src="Geometry.js"></script>
-    <script src="Popover.js"></script>
-    <script src="TextEditor.js"></script>
-    <script src="EventHandler.js"></script>
-    <script src="SourceCodeTextEditor.js"></script>
-    <script src="ContentViewContainer.js"></script>
-    <script src="ContentView.js"></script>
-    <script src="ClusterContentView.js"></script>
-    <script src="QuickConsoleNavigationBar.js"></script>
-    <script src="QuickConsole.js"></script>
-    <script src="ContentBrowser.js"></script>
-    <script src="FrameContentView.js"></script>
-    <script src="ResourceClusterContentView.js"></script>
-    <script src="ResourceContentView.js"></script>
-    <script src="GenericResourceContentView.js"></script>
-    <script src="TextResourceContentView.js"></script>
-    <script src="ImageResourceContentView.js"></script>
-    <script src="FontResourceContentView.js"></script>
-    <script src="DOMStorageContentView.js"></script>
-    <script src="CookieStorageContentView.js"></script>
-    <script src="DatabaseTableContentView.js"></script>
-    <script src="DatabaseContentView.js"></script>
-    <script src="ApplicationCacheFrameContentView.js"></script>
-    <script src="TextContentView.js"></script>
-    <script src="ApplicationCacheDetailsSidebarPanel.js"></script>
-    <script src="DOMTreeManager.js"></script>
-    <script src="DOMNode.js"></script>
-    <script src="DOMUtilities.js"></script>
-    <script src="DOMTree.js"></script>
-    <script src="DOMTreeOutline.js"></script>
-    <script src="DOMTreeUpdater.js"></script>
-    <script src="DOMTreeElement.js"></script>
-    <script src="DOMTreeElementPathComponent.js"></script>
-    <script src="DOMTreeContentView.js"></script>
-    <script src="LayerTreeManager.js"></script>
-    <script src="DOMSearchMatchObject.js"></script>
-    <script src="ResourceSearchMatchObject.js"></script>
-    <script src="SearchResultTreeElement.js"></script>
-    <script src="TextRange.js"></script>
-    <script src="ConsoleMessage.js"></script>
-    <script src="ConsoleMessageImpl.js"></script>
-    <script src="ConsoleGroup.js"></script>
-    <script src="ConsoleCommand.js"></script>
-    <script src="ConsoleCommandResult.js"></script>
-    <script src="JavaScriptLogViewController.js"></script>
-    <script src="LogContentView.js"></script>
-    <script src="Section.js"></script>
-    <script src="PropertiesSection.js"></script>
-    <script src="ObjectPropertiesSection.js"></script>
-    <script src="LogManager.js"></script>
-    <script src="LogObject.js"></script>
-    <script src="DetailsSection.js"></script>
-    <script src="DetailsSectionGroup.js"></script>
-    <script src="DetailsSectionRow.js"></script>
-    <script src="DetailsSectionSimpleRow.js"></script>
-    <script src="DetailsSectionDataGridRow.js"></script>
-    <script src="DetailsSectionPropertiesRow.js"></script>
-    <script src="DOMDetailsSidebarPanel.js"></script>
-    <script src="EventListenerSectionGroup.js"></script>
-    <script src="EventListenerSection.js"></script>
-    <script src="DOMNodeDetailsSidebarPanel.js"></script>
-    <script src="LayerTreeDataGridNode.js"></script>
-    <script src="LayerTreeDataGrid.js"></script>
-    <script src="LayerTreeSidebarPanel.js"></script>
-    <script src="LogTreeElement.js"></script>
-    <script src="CSSStyleManager.js"></script>
-    <script src="CSSStyleSheet.js"></script>
-    <script src="CSSMedia.js"></script>
-    <script src="CSSRule.js"></script>
-    <script src="CSSStyleDeclaration.js"></script>
-    <script src="CSSProperty.js"></script>
-    <script src="DOMNodeStyles.js"></script>
-    <script src="Color.js"></script>
-    <script src="CSSStyleDetailsSidebarPanel.js"></script>
-    <script src="BoxModelDetailsSectionRow.js"></script>
-    <script src="StyleDetailsPanel.js"></script>
-    <script src="ComputedStyleDetailsPanel.js"></script>
-    <script src="RulesStyleDetailsPanel.js"></script>
-    <script src="MetricsStyleDetailsPanel.js"></script>
-    <script src="CSSColorPicker.js"></script>
-    <script src="CSSStyleDeclarationTextEditor.js"></script>
-    <script src="CSSStyleDeclarationSection.js"></script>
-    <script src="IndeterminateProgressSpinner.js"></script>
-    <script src="InstrumentSidebarPanel.js"></script>
-    <script src="NetworkGraphCalculator.js"></script>
-    <script src="TimelineDecorations.js"></script>
-    <script src="TimelinesObject.js"></script>
-    <script src="TimelineDataGrid.js"></script>
-    <script src="NetworkDataGrid.js"></script>
-    <script src="LayoutTimelineDataGrid.js"></script>
-    <script src="ScriptTimelineDataGrid.js"></script>
-    <script src="TimelinesContentView.js"></script>
-    <script src="ResourceTimelineDataGridNode.js"></script>
-    <script src="ResourceTimelineDataGridNodePathComponent.js"></script>
-    <script src="LayoutTimelineRecord.js"></script>
-    <script src="LayoutTimelineDataGridNode.js"></script>
-    <script src="ScriptTimelineRecord.js"></script>
-    <script src="ScriptTimelineDataGridNode.js"></script>
-    <script src="TimelineOverview.js"></script>
-    <script src="ProfileManager.js"></script>
-    <script src="ProfileType.js"></script>
-    <script src="ProfileView.js"></script>
-    <script src="JavaScriptProfileType.js"></script>
-    <script src="JavaScriptProfileView.js"></script>
-    <script src="CSSSelectorProfileType.js"></script>
-    <script src="CSSSelectorProfileView.js"></script>
-    <script src="ProfileObject.js"></script>
-    <script src="JavaScriptProfileObject.js"></script>
-    <script src="CSSSelectorProfileObject.js"></script>
-    <script src="DebuggerSidebarPanel.js"></script>
-    <script src="BreakpointTreeElement.js"></script>
-    <script src="Breakpoint.js"></script>
-    <script src="DebuggerManager.js"></script>
-    <script src="SourceMapManager.js"></script>
-    <script src="Script.js"></script>
-    <script src="SourceMap.js"></script>
-    <script src="SourceMapResource.js"></script>
-    <script src="SourceCodePosition.js"></script>
-    <script src="SourceCodeLocation.js"></script>
-    <script src="SourceCodeTextRange.js"></script>
-    <script src="CallFrame.js"></script>
-    <script src="ScopeChainNode.js"></script>
-    <script src="CallFrameTreeElement.js"></script>
-    <script src="ScopeChainDetailsSidebarPanel.js"></script>
-    <script src="ScopeVariableTreeElement.js"></script>
-    <script src="ScriptContentView.js"></script>
-    <script src="ScriptTreeElement.js"></script>
-    <script src="FindBanner.js"></script>
-    <script src="Toolbar.js"></script>
-    <script src="ButtonToolbarItem.js"></script>
-    <script src="ActivateButtonToolbarItem.js"></script>
-    <script src="ControlToolbarItem.js"></script>
-    <script src="ToggleControlToolbarItem.js"></script>
-    <script src="Branch.js"></script>
-    <script src="Revision.js"></script>
-    <script src="SourceCodeRevision.js"></script>
-    <script src="BranchManager.js"></script>
-    <script src="DashboardView.js"></script>
-    <script src="DashboardManager.js"></script>
-    <script src="FormatterContentBuilder.js"></script>
-    <script src="CodeMirrorFormatters.js"></script>
-    <script src="Formatter.js"></script>
-    <script src="FormatterSourceMap.js"></script>
-    <script src="CodeMirrorCompletionController.js"></script>
-    <script src="CodeMirrorTokenTrackingController.js"></script>
-    <script src="CompletionSuggestionsView.js"></script>
-    <script src="ExecutionContext.js"></script>
-    <script src="ExecutionContextList.js"></script>
-    <script src="ConsolePrompt.js"></script>
-    <script src="MIMETypeUtilities.js"></script>
-    <script src="LoadLocalizedStrings.js"></script>
-    <script src="Main.js"></script>
+    <script src="Debug/Bootstrap.js"></script>
+    <script src="Debug/CapturingProtocolTracer.js"></script>
+    <script src="Debug/ProtocolTrace.js"></script>
 
     <script>
         WebInspector.loaded();
@@ -389,10 +671,11 @@
 <body>
 <div id="docked-resizer"></div>
 <div id="toolbar"></div>
+<div id="tab-bar"></div>
 <div id="main">
     <div id="navigation-sidebar"></div>
     <div id="content">
-        <div id="content-browser"></div>
+        <div id="tab-browser"></div>
         <div id="split-content-browser" class="hidden"></div>
         <div id="quick-console"></div>
     </div>
diff --git a/Source/WebInspectorUI/UserInterface/Main.js b/Source/WebInspectorUI/UserInterface/Main.js
deleted file mode 100644
index e43bc3864..000000000
--- a/Source/WebInspectorUI/UserInterface/Main.js
+++ /dev/null
@@ -1,1712 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Notification = {
-    GlobalModifierKeysDidChange: "global-modifiers-did-change"
-};
-
-WebInspector.loaded = function()
-{
-    // Tell the InspectorFrontendHost we loaded first to establish communication with InspectorBackend.
-    InspectorFrontendHost.loaded();
-
-    // Initialize WebSocket to communication
-    this._initializeWebSocketIfNeeded();
-
-    // Register observers for events from the InspectorBackend.
-    InspectorBackend.registerInspectorDispatcher(new WebInspector.InspectorObserver);
-    InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
-    InspectorBackend.registerConsoleDispatcher(new WebInspector.ConsoleObserver);
-    InspectorBackend.registerNetworkDispatcher(new WebInspector.NetworkObserver);
-    InspectorBackend.registerDOMDispatcher(new WebInspector.DOMObserver);
-    InspectorBackend.registerDebuggerDispatcher(new WebInspector.DebuggerObserver);
-    InspectorBackend.registerDatabaseDispatcher(new WebInspector.DatabaseObserver);
-    InspectorBackend.registerDOMStorageDispatcher(new WebInspector.DOMStorageObserver);
-    InspectorBackend.registerApplicationCacheDispatcher(new WebInspector.ApplicationCacheObserver);
-    InspectorBackend.registerTimelineDispatcher(new WebInspector.TimelineObserver);
-    InspectorBackend.registerProfilerDispatcher(new WebInspector.ProfilerObserver);
-    InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
-    if (InspectorBackend.registerLayerTreeDispatcher)
-        InspectorBackend.registerLayerTreeDispatcher(new WebInspector.LayerTreeObserver);
-    if (InspectorBackend.registerRuntimeDispatcher)
-        InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
-
-    // Enable agents.
-    InspectorAgent.enable();
-
-    // Perform one-time tasks.
-    WebInspector.CSSCompletions.requestCSSNameCompletions();
-    this._generateDisclosureTriangleImages();
-
-    // Create the singleton managers next, before the user interface elements, so the user interface can register
-    // as event listeners on these managers.
-    this.branchManager = new WebInspector.BranchManager;
-    this.frameResourceManager = new WebInspector.FrameResourceManager;
-    this.storageManager = new WebInspector.StorageManager;
-    this.domTreeManager = new WebInspector.DOMTreeManager;
-    this.cssStyleManager = new WebInspector.CSSStyleManager;
-    this.logManager = new WebInspector.LogManager;
-    this.issueManager = new WebInspector.IssueManager;
-    this.applicationCacheManager = new WebInspector.ApplicationCacheManager;
-    this.timelineManager = new WebInspector.TimelineManager;
-    this.profileManager = new WebInspector.ProfileManager;
-    this.debuggerManager = new WebInspector.DebuggerManager;
-    this.sourceMapManager = new WebInspector.SourceMapManager;
-    this.layerTreeManager = new WebInspector.LayerTreeManager;
-    this.dashboardManager = new WebInspector.DashboardManager;
-
-    // Enable the Console Agent after creating the singleton managers.
-    ConsoleAgent.enable();
-
-    // Enable the RuntimeAgent to receive notification of execution contexts.
-    if (RuntimeAgent.enable)
-        RuntimeAgent.enable();
-
-    // Register for events.
-    this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
-    this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.InspectModeStateChanged, this._inspectModeStateChanged, this);
-    this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
-    this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-
-    document.addEventListener("DOMContentLoaded", this.contentLoaded.bind(this));
-
-    document.addEventListener("beforecopy", this._beforecopy.bind(this));
-    document.addEventListener("copy", this._copy.bind(this));
-
-    document.addEventListener("click", this._mouseWasClicked.bind(this));
-    document.addEventListener("dragover", this._dragOver.bind(this));
-    document.addEventListener("focus", WebInspector._focusChanged.bind(this), true);
-
-    window.addEventListener("focus", this._windowFocused.bind(this));
-    window.addEventListener("blur", this._windowBlurred.bind(this));
-    window.addEventListener("resize", this._windowResized.bind(this));
-    window.addEventListener("keydown", this._windowKeyDown.bind(this));
-    window.addEventListener("keyup", this._windowKeyUp.bind(this));
-
-    // Create settings.
-    this._lastSelectedNavigationSidebarPanelSetting = new WebInspector.Setting("last-selected-navigation-sidebar-panel", "resource");
-    this._navigationSidebarCollapsedSetting = new WebInspector.Setting("navigation-sidebar-collapsed", false);
-    this._navigationSidebarWidthSetting = new WebInspector.Setting("navigation-sidebar-width", null);
-
-    this._lastSelectedDetailsSidebarPanelSetting = new WebInspector.Setting("last-selected-details-sidebar-panel", null);
-    this._detailsSidebarCollapsedSetting = new WebInspector.Setting("details-sidebar-collapsed", true);
-    this._detailsSidebarWidthSetting = new WebInspector.Setting("details-sidebar-width", null);
-
-    this._lastContentViewResponsibleSidebarPanelSetting = new WebInspector.Setting("last-content-view-responsible-sidebar-panel", "resource");
-    this._lastContentCookieSetting = new WebInspector.Setting("last-content-view-cookie", {});
-
-    this._toolbarDockedRightDisplayModeSetting = new WebInspector.Setting("toolbar-docked-right-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
-    this._toolbarDockedRightSizeModeSetting = new WebInspector.Setting("toolbar-docked-right-size-mode",WebInspector.Toolbar.SizeMode.Normal);
-
-    this._toolbarDockedBottomDisplayModeSetting = new WebInspector.Setting("toolbar-docked-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
-    this._toolbarDockedBottomSizeModeSetting = new WebInspector.Setting("toolbar-docked-size-mode",WebInspector.Toolbar.SizeMode.Small);
-
-    this._toolbarUndockedDisplayModeSetting = new WebInspector.Setting("toolbar-undocked-display-mode", WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
-    this._toolbarUndockedSizeModeSetting = new WebInspector.Setting("toolbar-undocked-size-mode",WebInspector.Toolbar.SizeMode.Normal);
-
-    this._showingSplitConsoleSetting = new WebInspector.Setting("showing-split-console", false);
-    this._splitConsoleHeightSetting = new WebInspector.Setting("split-console-height", 150);
-
-    this._dockButtonToggledSetting = new WebInspector.Setting("dock-button-toggled", false);
-
-    this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", false);
-}
-
-WebInspector.contentLoaded = function()
-{
-    // Check for a nightly build by looking for a plus in the version number and a small number of stylesheets (indicating combined resources).
-    var versionMatch = / AppleWebKit\/([^ ]+)/.exec(navigator.userAgent);
-    if (versionMatch && versionMatch[1].indexOf("+") !== -1 && document.styleSheets.length < 10)
-        document.body.classList.add("nightly-build");
-
-    // Create the user interface elements.
-    this.toolbar = new WebInspector.Toolbar(document.getElementById("toolbar"));
-    this.toolbar.addEventListener(WebInspector.Toolbar.Event.DisplayModeDidChange, this._toolbarDisplayModeDidChange, this);
-    this.toolbar.addEventListener(WebInspector.Toolbar.Event.SizeModeDidChange, this._toolbarSizeModeDidChange, this);
-    
-    var contentElement = document.getElementById("content");
-    contentElement.setAttribute("role", "main");
-    contentElement.setAttribute("aria-label", WebInspector.UIString("Content"));
-
-    this.contentBrowser = new WebInspector.ContentBrowser(document.getElementById("content-browser"), this);
-    this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this._contentBrowserRepresentedObjectsDidChange, this);
-    this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
-
-    this.splitContentBrowser = new WebInspector.ContentBrowser(document.getElementById("split-content-browser"), this, true);
-    this.splitContentBrowser.navigationBar.element.addEventListener("mousedown", this._consoleResizerMouseDown.bind(this));
-
-    this.quickConsole = new WebInspector.QuickConsole(document.getElementById("quick-console"));
-    this.quickConsole.addEventListener(WebInspector.QuickConsole.Event.DidResize, this._quickConsoleDidResize, this);
-
-    this._consoleRepresentedObject = new WebInspector.LogObject;
-    this._consoleTreeElement = new WebInspector.LogTreeElement(this._consoleRepresentedObject);
-    this.consoleContentView = WebInspector.contentBrowser.contentViewForRepresentedObject(this._consoleRepresentedObject);
-
-    // FIXME: The sidebars should be flipped in RTL languages.
-    this.leftSidebar = this.navigationSidebar = new WebInspector.Sidebar(document.getElementById("navigation-sidebar"), WebInspector.Sidebar.Sides.Left);
-    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
-    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
-    this.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._navigationSidebarPanelSelected, this);
-
-    this.rightSidebar = this.detailsSidebar = new WebInspector.Sidebar(document.getElementById("details-sidebar"), WebInspector.Sidebar.Sides.Right, null, null, WebInspector.UIString("Details"));
-    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
-    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.WidthDidChange, this._sidebarWidthDidChange, this);
-    this.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._detailsSidebarPanelSelected, this);
-
-    this._reloadPageKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "R", this._reloadPage.bind(this));
-    this._reloadPageIgnoringCacheKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "R", this._reloadPageIgnoringCache.bind(this));
-
-    this._inspectModeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "C", this._toggleInspectMode.bind(this));
-
-    this._undoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "Z", this._undoKeyboardShortcut.bind(this));
-    this._redoKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "Z", this._redoKeyboardShortcut.bind(this));
-    this._undoKeyboardShortcut.implicitlyPreventsDefault = this._redoKeyboardShortcut.implicitlyPreventsDefault = false;
-
-    this.undockButtonNavigationItem = new WebInspector.ToggleControlToolbarItem("undock", WebInspector.UIString("Detach into separate window"), "", "Images/Undock.pdf", "", 16, 14);
-    this.undockButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._undock, this);
-
-    this.closeButtonNavigationItem = new WebInspector.ControlToolbarItem("dock-close", WebInspector.UIString("Close"), "Images/Close.pdf", 16, 14);
-    this.closeButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.close, this);
-
-    this.toolbar.addToolbarItem(this.closeButtonNavigationItem, WebInspector.Toolbar.Section.Control);
-    this.toolbar.addToolbarItem(this.undockButtonNavigationItem, WebInspector.Toolbar.Section.Control);
-
-    this.resourceSidebarPanel = new WebInspector.ResourceSidebarPanel;
-    this.instrumentSidebarPanel = new WebInspector.InstrumentSidebarPanel;
-    this.debuggerSidebarPanel = new WebInspector.DebuggerSidebarPanel;
-
-    this.navigationSidebar.addSidebarPanel(this.resourceSidebarPanel);
-    this.navigationSidebar.addSidebarPanel(this.instrumentSidebarPanel);
-    this.navigationSidebar.addSidebarPanel(this.debuggerSidebarPanel);
-
-    this.toolbar.addToolbarItem(this.resourceSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
-    this.toolbar.addToolbarItem(this.instrumentSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
-    this.toolbar.addToolbarItem(this.debuggerSidebarPanel.toolbarItem, WebInspector.Toolbar.Section.Left);
-
-    // The toolbar button for the console.
-    const consoleKeyboardShortcut = "\u2325\u2318C"; // Option-Command-C
-    var toolTip = WebInspector.UIString("Show console (%s)").format(consoleKeyboardShortcut);
-    var activatedToolTip = WebInspector.UIString("Hide console");
-    this._consoleToolbarButton = new WebInspector.ActivateButtonToolbarItem("console", toolTip, activatedToolTip, WebInspector.UIString("Console"), "Images/NavigationItemLog.pdf");
-    this._consoleToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggleConsoleView, this);
-    this.toolbar.addToolbarItem(this._consoleToolbarButton, WebInspector.Toolbar.Section.Center);
-
-    this.toolbar.addToolbarItem(this.dashboardManager.toolbarItem, WebInspector.Toolbar.Section.Center);
-
-    // The toolbar button for node inspection.
-    var toolTip = WebInspector.UIString("Enable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
-    var activatedToolTip = WebInspector.UIString("Disable point to inspect mode (%s)").format(WebInspector._inspectModeKeyboardShortcut.displayName);
-    this._inspectModeToolbarButton = new WebInspector.ActivateButtonToolbarItem("inspect", toolTip, activatedToolTip, WebInspector.UIString("Inspect"), "Images/Crosshair.pdf");
-    this._inspectModeToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleInspectMode, this);
-    this.toolbar.addToolbarItem(this._inspectModeToolbarButton, WebInspector.Toolbar.Section.Center);
-
-    this.resourceDetailsSidebarPanel = new WebInspector.ResourceDetailsSidebarPanel;
-    this.domNodeDetailsSidebarPanel = new WebInspector.DOMNodeDetailsSidebarPanel;
-    this.cssStyleDetailsSidebarPanel = new WebInspector.CSSStyleDetailsSidebarPanel;
-    this.applicationCacheDetailsSidebarPanel = new WebInspector.ApplicationCacheDetailsSidebarPanel;
-    this.scopeChainDetailsSidebarPanel = new WebInspector.ScopeChainDetailsSidebarPanel;
-
-    this.detailsSidebarPanels = [this.resourceDetailsSidebarPanel, this.applicationCacheDetailsSidebarPanel, this.scopeChainDetailsSidebarPanel,
-        this.domNodeDetailsSidebarPanel, this.cssStyleDetailsSidebarPanel];
-
-    if (window.LayerTreeAgent) {
-        this.layerTreeSidebarPanel = new WebInspector.LayerTreeSidebarPanel;
-        this.detailsSidebarPanels.splice(this.detailsSidebarPanels.length - 1, 0, this.layerTreeSidebarPanel);
-    }
-
-    this.modifierKeys = {altKey: false, metaKey: false, shiftKey: false};
-
-    // Add the items in reverse order since the last items appear and disappear the least. So they
-    // will not cause the other buttons to visually shift around, keeping things more stable.
-    for (var i = this.detailsSidebarPanels.length - 1; i >= 0; --i) {
-        var toolbarItem = this.detailsSidebarPanels[i].toolbarItem;
-        toolbarItem.hidden = true;
-        this.toolbar.addToolbarItem(toolbarItem, WebInspector.Toolbar.Section.Right);
-    }
-
-    this.toolbar.element.addEventListener("mousedown", this._toolbarMouseDown.bind(this));
-    document.getElementById("docked-resizer").addEventListener("mousedown", this._dockedResizerMouseDown.bind(this));
-
-    this._updateToolbarHeight();
-
-    this.navigationSidebar.selectedSidebarPanel = this._lastSelectedNavigationSidebarPanelSetting.value;
-
-    if (this._navigationSidebarWidthSetting.value)
-        this.navigationSidebar.width = this._navigationSidebarWidthSetting.value;
-
-    if (this._detailsSidebarWidthSetting.value)
-        this.detailsSidebar.width = this._detailsSidebarWidthSetting.value;
-
-    // Update the docked state based on the query string passed when the Web Inspector was loaded.
-    this.updateDockedState(parseLocationQueryParameters().dockSide || "undocked");
-
-    // Tell the frontend API we are loaded so any pending frontend commands can be dispatched.
-    InspectorFrontendAPI.loadCompleted();
-
-    // Set collapsed after loading the pending frontend commands are dispatched so only the final
-    // selected sidebar panel gets shown and has a say in what content view gets shown.
-    this.navigationSidebar.collapsed = this._navigationSidebarCollapsedSetting.value;
-
-    // If InspectorFrontendAPI didn't show a content view, then try to show the last content view.
-    if (!this.contentBrowser.currentContentView && !this.ignoreLastContentCookie) {
-        if (this._lastContentCookieSetting.value === "console") {
-            // The console does not have a sidebar, so handle its special cookie here.
-            this.showFullHeightConsole();
-        } else {
-            var responsibleSidebarPanel = this.navigationSidebar.findSidebarPanel(this._lastContentViewResponsibleSidebarPanelSetting.value);
-            if (responsibleSidebarPanel)
-                responsibleSidebarPanel.showContentViewForCookie(this._lastContentCookieSetting.value);
-        }
-    }
-
-    this._updateSplitConsoleHeight(this._splitConsoleHeightSetting.value);
-
-    if (this._showingSplitConsoleSetting.value)
-        this.showSplitConsole();
-}
-
-WebInspector.messagesToDispatch = [];
-
-WebInspector.dispatchNextQueuedMessageFromBackend = function()
-{
-    for (var i = 0; i < this.messagesToDispatch.length; ++i)
-        InspectorBackend.dispatch(this.messagesToDispatch[i]);
-
-    this.messagesToDispatch = [];
-
-    this._dispatchTimeout = null;
-}
-
-WebInspector.dispatchMessageFromBackend = function(message)
-{
-    // Enforce asynchronous interaction between the backend and the frontend by queueing messages.
-    // The messages are dequeued on a zero delay timeout.
-
-    this.messagesToDispatch.push(message);
-
-    if (this._dispatchTimeout)
-        return;
-
-    this._dispatchTimeout = setTimeout(this.dispatchNextQueuedMessageFromBackend.bind(this), 0);
-}
-
-WebInspector.sidebarPanelForCurrentContentView = function()
-{
-    var currentContentView = this.contentBrowser.currentContentView;
-    if (!currentContentView)
-        return null;
-    return this.sidebarPanelForRepresentedObject(currentContentView.representedObject);
-}
-
-WebInspector.sidebarPanelForRepresentedObject = function(representedObject)
-{
-    if (representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource ||
-        representedObject instanceof WebInspector.Script)
-        return this.resourceSidebarPanel;
-
-    if (representedObject instanceof WebInspector.DOMStorageObject || representedObject instanceof WebInspector.CookieStorageObject ||
-        representedObject instanceof WebInspector.DatabaseTableObject || representedObject instanceof WebInspector.DatabaseObject ||
-        representedObject instanceof WebInspector.ApplicationCacheFrame)
-        return this.resourceSidebarPanel;
-
-    // The console does not have a sidebar.
-    if (representedObject instanceof WebInspector.LogObject)
-        return null;
-
-    if (representedObject instanceof WebInspector.TimelinesObject || representedObject instanceof WebInspector.ProfileObject)
-        return this.instrumentSidebarPanel;
-
-    console.error("Unknown representedObject: ", representedObject);
-    return null;
-}
-
-WebInspector.contentBrowserTreeElementForRepresentedObject = function(contentBrowser, representedObject)
-{
-    // The console does not have a sidebar, so return a tree element here so something is shown.
-    if (representedObject instanceof WebInspector.LogObject)
-        return this._consoleTreeElement;
-
-    var sidebarPanel = this.sidebarPanelForRepresentedObject(representedObject);
-    if (sidebarPanel)
-        return sidebarPanel.treeElementForRepresentedObject(representedObject);
-    return null;
-}
-
-WebInspector.displayNameForURL = function(url, urlComponents)
-{
-    if (!urlComponents)
-        urlComponents = parseURL(url);
-
-    var displayName;
-    try {
-        displayName = decodeURIComponent(urlComponents.lastPathComponent || "");
-    } catch (e) {
-        displayName = urlComponents.lastPathComponent;
-    }
-
-    return displayName || WebInspector.displayNameForHost(urlComponents.host) || url;
-}
-
-WebInspector.displayNameForHost = function(host)
-{
-    // FIXME <rdar://problem/11237413>: This should decode punycode hostnames.
-    return host;
-}
-
-WebInspector.updateWindowTitle = function()
-{
-    var mainFrame = this.frameResourceManager.mainFrame;
-    console.assert(mainFrame);
-
-    var urlComponents = mainFrame.mainResource.urlComponents;
-
-    var lastPathComponent;
-    try {
-        lastPathComponent = decodeURIComponent(urlComponents.lastPathComponent || "");
-    } catch (e) {
-        lastPathComponent = urlComponents.lastPathComponent;
-    }
-
-    // Build a title based on the URL components.
-    if (urlComponents.host && lastPathComponent)
-        var title = this.displayNameForHost(urlComponents.host) + " \u2014 " + lastPathComponent;
-    else if (urlComponents.host)
-        var title = this.displayNameForHost(urlComponents.host);
-    else if (lastPathComponent)
-        var title = lastPathComponent;
-    else
-        var title = mainFrame.url;
-
-    // The name "inspectedURLChanged" sounds like the whole URL is required, however this is only
-    // used for updating the window title and it can be any string.
-    InspectorFrontendHost.inspectedURLChanged(title);
-}
-
-WebInspector.updateDockedState = function(side)
-{
-    if (this._dockSide === side)
-        return;
-
-    this._dockSide = side;
-
-    this.docked = side !== "undocked";
-
-    this._ignoreToolbarModeDidChangeEvents = true;
-
-    if (side === "bottom") {
-        document.body.classList.add("docked");
-        document.body.classList.add("bottom");
-
-        document.body.classList.remove("window-inactive");
-        document.body.classList.remove("right");
-
-        this.toolbar.displayMode = this._toolbarDockedBottomDisplayModeSetting.value;
-        this.toolbar.sizeMode = this._toolbarDockedBottomSizeModeSetting.value;
-    } else if (side === "right") {
-        document.body.classList.add("docked");
-        document.body.classList.add("right");
-
-        document.body.classList.remove("window-inactive");
-        document.body.classList.remove("bottom");
-
-        this.toolbar.displayMode = this._toolbarDockedRightDisplayModeSetting.value;
-        this.toolbar.sizeMode = this._toolbarDockedRightSizeModeSetting.value;
-    } else {
-        document.body.classList.remove("docked");
-        document.body.classList.remove("right");
-        document.body.classList.remove("bottom");
-
-        this.toolbar.displayMode = this._toolbarUndockedDisplayModeSetting.value;
-        this.toolbar.sizeMode = this._toolbarUndockedSizeModeSetting.value;
-    }
-
-    this._ignoreToolbarModeDidChangeEvents = false;
-
-    this._updateDockNavigationItems();
-    this._updateToolbarHeight();
-}
-
-WebInspector.handlePossibleLinkClick = function(event, frame, alwaysOpenExternally)
-{
-    var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
-    if (!anchorElement || !anchorElement.href)
-        return false;
-
-    if (WebInspector.isBeingEdited(anchorElement)) {
-        // Don't follow the link when it is being edited.
-        return false;
-    }
-
-    // Prevent the link from navigating, since we don't do any navigation by following links normally.
-    event.preventDefault();
-    event.stopPropagation();
-
-    this.openURL(anchorElement.href, frame, false, anchorElement.lineNumber);
-
-    return true;
-}
-
-WebInspector.openURL = function(url, frame, alwaysOpenExternally, lineNumber)
-{
-    console.assert(url);
-    if (!url)
-        return;
-
-    // If alwaysOpenExternally is not defined, base it off the command/meta key for the current event.
-    if (alwaysOpenExternally === undefined || alwaysOpenExternally === null)
-        alwaysOpenExternally = window.event ? window.event.metaKey : false;
-
-    if (alwaysOpenExternally) {
-        InspectorFrontendHost.openInNewTab(url);
-        return;
-    }
-    
-    var parsedURL = parseURL(url);
-    if (parsedURL.scheme === WebInspector.ProfileType.ProfileScheme) {
-        var profileType = parsedURL.host.toUpperCase();
-        var profileTitle = parsedURL.path;
-        
-        // The path of of the profile URL starts with a slash, remove it, so 
-        // we can get the actual title.
-        console.assert(profileTitle[0] === '/');
-        profileTitle = profileTitle.substring(1);
-
-        this.instrumentSidebarPanel.showProfile(profileType, profileTitle);
-        return;
-    }
-
-    var searchChildFrames = false;
-    if (!frame) {
-        frame = this.frameResourceManager.mainFrame;
-        searchChildFrames = true;
-    }
-
-    console.assert(frame);
-
-    // WebInspector.Frame.resourceForURL does not check the main resource, only sub-resources. So check both.
-    var resource = frame.url === url ? frame.mainResource : frame.resourceForURL(url, searchChildFrames);
-    if (resource) {
-        this.resourceSidebarPanel.showSourceCode(resource, lineNumber);
-        return;
-    }
-
-    InspectorFrontendHost.openInNewTab(url);
-}
-
-WebInspector.close = function()
-{
-    if (this._isClosing)
-        return;
-
-    this._isClosing = true;
-
-    InspectorFrontendHost.closeWindow();
-}
-
-WebInspector.isConsoleFocused = function()
-{
-    return this.quickConsole.prompt.focused;
-}
-
-WebInspector.isShowingSplitConsole = function()
-{
-    return !this.splitContentBrowser.element.classList.contains("hidden");
-}
-
-WebInspector.currentViewSupportsSplitContentBrowser = function()
-{
-    var currentContentView = this.contentBrowser.currentContentView;
-    return !currentContentView || currentContentView.supportsSplitContentBrowser;
-}
-
-WebInspector.toggleSplitConsole = function()
-{
-    if (!this.currentViewSupportsSplitContentBrowser()) {
-        this.toggleConsoleView();
-        return;
-    }
-
-    if (this.isShowingSplitConsole())
-        this.hideSplitConsole();
-    else
-        this.showSplitConsole();
-}
-
-WebInspector.showSplitConsole = function()
-{
-    if (!this.currentViewSupportsSplitContentBrowser()) {
-        this.showFullHeightConsole();
-        return;
-    }
-
-    this.splitContentBrowser.element.classList.remove("hidden");
-
-    this._showingSplitConsoleSetting.value = true;
-
-    if (this.splitContentBrowser.currentContentView !== this.consoleContentView) {
-        // Be sure to close any existing log view in the main content browser before showing it in the
-        // split content browser. We can only show a content view in one browser at a time.
-        this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.LogContentView);
-        this.splitContentBrowser.showContentView(this.consoleContentView);
-    } else {
-        // This causes the view to know it was shown and focus the prompt.
-        this.splitContentBrowser.contentViewContainer.shown();
-    }
-
-    if (this._wasShowingNavigationSidebarBeforeFullHeightConsole)
-        this.navigationSidebar.collapsed = false;
-
-    this.quickConsole.consoleLogVisibilityChanged(true);
-}
-
-WebInspector.hideSplitConsole = function()
-{
-    this.splitContentBrowser.element.classList.add("hidden");
-
-    this._showingSplitConsoleSetting.value = false;
-
-    // This causes the view to know it was hidden.
-    this.splitContentBrowser.contentViewContainer.hidden();
-
-    this.quickConsole.consoleLogVisibilityChanged(false);
-}
-
-WebInspector.showFullHeightConsole = function(scope)
-{
-    this.splitContentBrowser.element.classList.add("hidden");
-
-    this._showingSplitConsoleSetting.value = false;
-
-    scope = scope || WebInspector.LogContentView.Scopes.All;
-
-    // If the requested scope is already selected and the console is showing, then switch back to All.
-    if (this.isShowingConsoleView() && this.consoleContentView.scopeBar.item(scope).selected)
-        scope = WebInspector.LogContentView.Scopes.All;
-
-    this.consoleContentView.scopeBar.item(scope).selected = true;
-
-    if (this.contentBrowser.currentContentView !== this.consoleContentView) {
-        this._wasShowingNavigationSidebarBeforeFullHeightConsole = !this.navigationSidebar.collapsed;
-
-        // Collapse the sidebar before showing the console view, so the check for the collapsed state in
-        // _revealAndSelectRepresentedObjectInNavigationSidebar returns early and does not deselect any
-        // tree elements in the current sidebar.
-        this.navigationSidebar.collapsed = true;
-
-        // Be sure to close any existing log view in the split content browser before showing it in the
-        // main content browser. We can only show a content view in one browser at a time.
-        this.splitContentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.LogContentView);
-        this.contentBrowser.showContentView(this.consoleContentView);
-    }
-
-    console.assert(this.isShowingConsoleView());
-    console.assert(this._consoleToolbarButton.activated);
-
-    this.quickConsole.consoleLogVisibilityChanged(true);
-}
-
-WebInspector.isShowingConsoleView = function()
-{
-    return this.contentBrowser.currentContentView instanceof WebInspector.LogContentView;
-}
-
-WebInspector.showConsoleView = function(scope)
-{
-    this.showFullHeightConsole(scope);
-}
-
-WebInspector.toggleConsoleView = function()
-{
-    if (this.isShowingConsoleView()) {
-        if (this.contentBrowser.canGoBack())
-            this.contentBrowser.goBack();
-        else
-            this.resourceSidebarPanel.showMainFrameSourceCode();
-
-        if (this._wasShowingNavigationSidebarBeforeFullHeightConsole)
-            this.navigationSidebar.collapsed = false;
-    } else
-        this.showFullHeightConsole();
-}
-
-WebInspector.UIString = function(string, vararg)
-{
-    if (window.localizedStrings && string in window.localizedStrings)
-        return window.localizedStrings[string];
-
-    if (!this._missingLocalizedStrings)
-        this._missingLocalizedStrings = {};
-
-    if (!(string in this._missingLocalizedStrings)) {
-        console.error("Localized string \"" + string + "\" was not found.");
-        this._missingLocalizedStrings[string] = true;
-    }
-
-    return "LOCALIZED STRING NOT FOUND";
-}
-
-WebInspector.restoreFocusFromElement = function(element)
-{
-    if (element && element.isSelfOrAncestor(this.currentFocusElement))
-        this.previousFocusElement.focus();
-}
-
-WebInspector._focusChanged = function(event)
-{
-    // Make a caret selection inside the focused element if there isn't a range selection and there isn't already
-    // a caret selection inside. This is needed (at least) to remove caret from console when focus is moved.
-    // The selection change should not apply to text fields and text areas either.
-
-    if (WebInspector.isEventTargetAnEditableField(event))
-        return;
-
-    var selection = window.getSelection();
-    if (!selection.isCollapsed)
-        return;
-
-    var element = event.target;
-
-    if (element !== this.currentFocusElement) {
-        this.previousFocusElement = this.currentFocusElement;
-        this.currentFocusElement = element;
-    }
-
-    if (element.isInsertionCaretInside())
-        return;
-
-    var selectionRange = element.ownerDocument.createRange();
-    selectionRange.setStart(element, 0);
-    selectionRange.setEnd(element, 0);
-
-    selection.removeAllRanges();
-    selection.addRange(selectionRange);
-}
-
-WebInspector._mouseWasClicked = function(event)
-{
-    this.handlePossibleLinkClick(event);
-}
-
-WebInspector._dragOver = function(event)
-{
-    // Do nothing if another event listener handled the event already.
-    if (event.defaultPrevented)
-        return;
-
-    // Allow dropping into editable areas.
-    if (WebInspector.isEventTargetAnEditableField(event))
-        return;
-
-    // Prevent the drop from being accepted.
-    event.dataTransfer.dropEffect = "none";
-    event.preventDefault();
-}
-
-WebInspector._debuggerDidPause = function(event)
-{
-    this.debuggerSidebarPanel.show();
-
-    // Since the Scope Chain details sidebar panel might not be in the sidebar yet,
-    // set a flag to select and show it when it does become available.
-    this._selectAndShowScopeChainDetailsSidebarPanelWhenAvailable = true;
-
-    InspectorFrontendHost.bringToFront();
-}
-
-WebInspector._mainFrameDidChange = function(event)
-{
-    this.updateWindowTitle();
-}
-
-WebInspector._mainResourceDidChange = function(event)
-{
-    if (!event.target.isMainFrame())
-        return;
-    this.updateWindowTitle();
-}
-
-WebInspector._windowFocused = function(event)
-{
-    if (event.target.document.nodeType !== Node.DOCUMENT_NODE || this.docked)
-        return;
-
-    // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
-    document.body.classList.remove("window-inactive");
-}
-
-WebInspector._windowBlurred = function(event)
-{
-    if (event.target.document.nodeType !== Node.DOCUMENT_NODE || this.docked)
-        return;
-
-    // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
-    document.body.classList.add("window-inactive");
-}
-
-WebInspector._windowResized = function(event)
-{
-    this.toolbar.updateLayout();
-
-    this._contentBrowserSizeDidChange(event);
-}
-
-WebInspector._updateModifierKeys = function(event)
-{
-    var didChange = this.modifierKeys.altKey !== event.altKey || this.modifierKeys.metaKey !== event.metaKey || this.modifierKeys.shiftKey !== event.shiftKey;
-
-    this.modifierKeys = {altKey: event.altKey, metaKey: event.metaKey, shiftKey: event.shiftKey};
-
-    if (didChange)
-        this.notifications.dispatchEventToListeners(WebInspector.Notification.GlobalModifierKeysDidChange, event);
-}
-
-WebInspector._windowKeyDown = function(event)
-{
-    this._updateModifierKeys(event);
-
-    var opposite = !this._dockButtonToggledSetting.value;
-    this.undockButtonNavigationItem.toggled = (event.altKey && !event.metaKey && !event.shiftKey) ? opposite : !opposite;
-}
-
-WebInspector._windowKeyUp = function(event)
-{
-    this._updateModifierKeys(event);
-
-    var opposite = !this._dockButtonToggledSetting.value;
-    this.undockButtonNavigationItem.toggled = (event.altKey && !event.metaKey && !event.shiftKey) ? opposite : !opposite;
-}
-
-WebInspector._undock = function(event)
-{
-    this._dockButtonToggledSetting.value = this.undockButtonNavigationItem.toggled;
-
-    if (this.undockButtonNavigationItem.toggled)
-        InspectorFrontendHost.requestSetDockSide(this._dockSide === "bottom" ? "right" : "bottom");
-    else
-        InspectorFrontendHost.requestSetDockSide("undocked");
-}
-
-WebInspector._updateDockNavigationItems = function()
-{
-    // The close and undock buttons are only available when docked.
-    var docked = this.docked;
-    this.closeButtonNavigationItem.hidden = !docked;
-    this.undockButtonNavigationItem.hidden = !docked;
-
-    if (docked) {
-        this.undockButtonNavigationItem.alternateImage = this._dockSide === "bottom" ? "Images/DockRight.pdf" : "Images/DockBottom.pdf";
-        this.undockButtonNavigationItem.alternateToolTip = this._dockSide === "bottom" ? WebInspector.UIString("Dock to right of window") : WebInspector.UIString("Dock to bottom of window");
-    }
-
-    this.undockButtonNavigationItem.toggled = this._dockButtonToggledSetting.value;
-}
-
-WebInspector._sidebarCollapsedStateDidChange = function(event)
-{
-    if (event.target === this.navigationSidebar) {
-        this._navigationSidebarCollapsedSetting.value = this.navigationSidebar.collapsed;
-        this._updateNavigationSidebarForCurrentContentView();
-    } else if (event.target === this.detailsSidebar) {
-        if (!this._ignoreDetailsSidebarPanelCollapsedEvent)
-            this._detailsSidebarCollapsedSetting.value = this.detailsSidebar.collapsed;
-    }
-}
-
-WebInspector._detailsSidebarPanelSelected = function(event)
-{
-    if (!this.detailsSidebar.selectedSidebarPanel || this._ignoreDetailsSidebarPanelSelectedEvent)
-        return;
-
-    this._lastSelectedDetailsSidebarPanelSetting.value = this.detailsSidebar.selectedSidebarPanel.identifier;
-}
-
-WebInspector._revealAndSelectRepresentedObjectInNavigationSidebar = function(representedObject)
-{
-    if (this.navigationSidebar.collapsed)
-        return;
-
-    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
-
-    // If the tree outline is processing a selection currently then we can assume the selection does not
-    // need to be changed. This is needed to allow breakpoints tree elements to be selected without jumping
-    // back to selecting the resource tree element.
-    if (selectedSidebarPanel.contentTreeOutline.processingSelectionChange)
-        return;
-
-    var treeElement = selectedSidebarPanel.treeElementForRepresentedObject(representedObject);
-    if (treeElement)
-        treeElement.revealAndSelect(true, false, true, true);
-    else if (selectedSidebarPanel.contentTreeOutline.selectedTreeElement)
-        selectedSidebarPanel.contentTreeOutline.selectedTreeElement.deselect(true);
-}
-
-WebInspector._updateNavigationSidebarForCurrentContentView = function()
-{
-    if (this.navigationSidebar.collapsed)
-        return;
-
-    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
-    if (!selectedSidebarPanel)
-        return;
-
-    var currentContentView = this.contentBrowser.currentContentView;
-    if (!currentContentView)
-        return;
-
-    // Ensure the navigation sidebar panel is allowed by the current content view, if not ask the sidebar panel
-    // to show the content view for the current selection.
-    var allowedNavigationSidebarPanels = currentContentView.allowedNavigationSidebarPanels;
-    if (!allowedNavigationSidebarPanels.contains(selectedSidebarPanel.identifier)) {
-        selectedSidebarPanel.showContentViewForCurrentSelection();
-
-        // Fetch the current content view again, since it likely changed.
-        currentContentView = this.contentBrowser.currentContentView;
-    }
-
-    if (!allowedNavigationSidebarPanels.length || allowedNavigationSidebarPanels.contains(selectedSidebarPanel.identifier))
-        currentContentView.__lastNavigationSidebarPanelIdentifer = selectedSidebarPanel.identifier;
-
-    this._revealAndSelectRepresentedObjectInNavigationSidebar(currentContentView.representedObject);
-}
-
-WebInspector._navigationSidebarPanelSelected = function(event)
-{
-    var selectedSidebarPanel = this.navigationSidebar.selectedSidebarPanel;
-    if (!selectedSidebarPanel)
-        return;
-
-    this._lastSelectedNavigationSidebarPanelSetting.value = selectedSidebarPanel.identifier;
-
-    this._updateNavigationSidebarForCurrentContentView();
-}
-
-WebInspector._domNodeWasInspected = function(event)
-{
-    WebInspector.domTreeManager.highlightDOMNodeForTwoSeconds(event.data.node.id);
-
-    // Select the Style details sidebar panel if one of the DOM details sidebar panels isn't already selected.
-    if (!(this.detailsSidebar.selectedSidebarPanel instanceof WebInspector.DOMDetailsSidebarPanel))
-        this.detailsSidebar.selectedSidebarPanel = this.cssStyleDetailsSidebarPanel;
-
-    InspectorFrontendHost.bringToFront();
-}
-
-WebInspector._contentBrowserSizeDidChange = function(event)
-{
-    this.contentBrowser.updateLayout();
-    this.splitContentBrowser.updateLayout();
-    this.quickConsole.updateLayout();
-}
-
-WebInspector._quickConsoleDidResize = function(event)
-{
-    this.contentBrowser.updateLayout();
-}
-
-WebInspector._sidebarWidthDidChange = function(event)
-{
-    if (!event.target.collapsed) {
-        if (event.target === this.navigationSidebar)
-            this._navigationSidebarWidthSetting.value = this.navigationSidebar.width;
-        else if (event.target === this.detailsSidebar)
-            this._detailsSidebarWidthSetting.value = this.detailsSidebar.width;
-    }
-
-    this._contentBrowserSizeDidChange(event);
-}
-
-WebInspector._updateToolbarHeight = function()
-{
-    InspectorFrontendHost.setToolbarHeight(this.toolbar.element.offsetHeight);
-}
-
-WebInspector._toolbarDisplayModeDidChange = function(event)
-{
-    if (this._ignoreToolbarModeDidChangeEvents)
-        return;
-
-    if (this._dockSide === "bottom")
-        this._toolbarDockedBottomDisplayModeSetting.value = this.toolbar.displayMode;
-    else if (this._dockSide === "right")
-        this._toolbarDockedRightDisplayModeSetting.value = this.toolbar.displayMode;
-    else
-        this._toolbarUndockedDisplayModeSetting.value = this.toolbar.displayMode;
-
-    this._updateToolbarHeight();
-}
-
-WebInspector._toolbarSizeModeDidChange = function(event)
-{
-    if (this._ignoreToolbarModeDidChangeEvents)
-        return;
-
-    if (this._dockSide === "bottom")
-        this._toolbarDockedBottomSizeModeSetting.value = this.toolbar.sizeMode;
-    else if (this._dockSide === "right")
-        this._toolbarDockedRightSizeModeSetting.value = this.toolbar.sizeMode;
-    else
-        this._toolbarUndockedSizeModeSetting.value = this.toolbar.sizeMode;
-
-    this._updateToolbarHeight();
-}
-
-WebInspector._updateCurrentContentViewCookie = function()
-{
-    var currentContentView = this.contentBrowser.currentContentView;
-    if (!currentContentView)
-        return;
-
-    // The console does not have a sidebar, so create a cookie here.
-    if (currentContentView.representedObject instanceof WebInspector.LogObject) {
-        this._lastContentViewResponsibleSidebarPanelSetting.value = null;
-        this._lastContentCookieSetting.value = "console";
-        return;
-    }
-
-    var responsibleSidebarPanel = this.sidebarPanelForRepresentedObject(currentContentView.representedObject);
-    if (!responsibleSidebarPanel)
-        return;
-
-    var cookie = responsibleSidebarPanel.cookieForContentView(currentContentView);
-
-    this._lastContentViewResponsibleSidebarPanelSetting.value = responsibleSidebarPanel.identifier;
-    this._lastContentCookieSetting.value = cookie;
-}
-
-WebInspector._contentBrowserCurrentContentViewDidChange = function(event)
-{
-    var consoleViewShowing = this.isShowingConsoleView();
-    this._consoleToolbarButton.activated = consoleViewShowing;
-
-    if (!this.isShowingSplitConsole())
-        this.quickConsole.consoleLogVisibilityChanged(consoleViewShowing);
-
-    if (!this.currentViewSupportsSplitContentBrowser())
-        this.hideSplitConsole();
-
-    var currentContentView = this.contentBrowser.currentContentView;
-    if (!currentContentView)
-        return;
-
-    // Ensure the navigation sidebar panel is allowed by the current content view, if not change the navigation sidebar panel
-    // to the last navigation sidebar panel used with the content view or the first one allowed.
-    var selectedSidebarPanelIdentifier = this.navigationSidebar.selectedSidebarPanel.identifier;
-
-    var allowedNavigationSidebarPanels = currentContentView.allowedNavigationSidebarPanels;
-    if (allowedNavigationSidebarPanels.length && !allowedNavigationSidebarPanels.contains(selectedSidebarPanelIdentifier)) {
-        console.assert(!currentContentView.__lastNavigationSidebarPanelIdentifer || allowedNavigationSidebarPanels.contains(currentContentView.__lastNavigationSidebarPanelIdentifer));
-        this.navigationSidebar.selectedSidebarPanel = currentContentView.__lastNavigationSidebarPanelIdentifer || allowedNavigationSidebarPanels[0];
-    }
-
-    if (!allowedNavigationSidebarPanels.length || allowedNavigationSidebarPanels.contains(selectedSidebarPanelIdentifier))
-        currentContentView.__lastNavigationSidebarPanelIdentifer = selectedSidebarPanelIdentifier;
-
-    this._revealAndSelectRepresentedObjectInNavigationSidebar(currentContentView.representedObject);
-}
-
-WebInspector._contentBrowserRepresentedObjectsDidChange = function(event)
-{
-    var currentRepresentedObjects = this.contentBrowser.currentRepresentedObjects;
-    var currentSidebarPanels = this.detailsSidebar.sidebarPanels;
-    var wasSidebarEmpty = !currentSidebarPanels.length;
-
-    // Ignore any changes to the selected sidebar panel during this function so only user initiated
-    // changes are recorded in _lastSelectedDetailsSidebarPanelSetting.
-    this._ignoreDetailsSidebarPanelSelectedEvent = true;
-
-    for (var i = 0; i < this.detailsSidebarPanels.length; ++i) {
-        var sidebarPanel = this.detailsSidebarPanels[i];
-        if (sidebarPanel.inspect(currentRepresentedObjects)) {
-            var currentSidebarPanelIndex = currentSidebarPanels.indexOf(sidebarPanel);
-            if (currentSidebarPanelIndex !== -1) {
-                // Already showing the panel.
-                continue;
-            }
-
-            // The sidebar panel was not previously showing, so add the panel and show the toolbar item.
-            this.detailsSidebar.addSidebarPanel(sidebarPanel);
-            sidebarPanel.toolbarItem.hidden = false;
-
-            if (this._selectAndShowScopeChainDetailsSidebarPanelWhenAvailable && sidebarPanel === this.scopeChainDetailsSidebarPanel) {
-                // Select the scope chain sidebar panel since it needs to be shown after pausing in the debugger.
-                delete this._selectAndShowScopeChainDetailsSidebarPanelWhenAvailable;
-                this.detailsSidebar.selectedSidebarPanel = this.scopeChainDetailsSidebarPanel;
-
-                this._ignoreDetailsSidebarPanelCollapsedEvent = true;
-                this.detailsSidebar.collapsed = false;
-                delete this._ignoreDetailsSidebarPanelCollapsedEvent;
-            } else if (this._lastSelectedDetailsSidebarPanelSetting.value === sidebarPanel.identifier) {
-                // Restore the sidebar panel selection if this sidebar panel was the last one selected by the user.
-                this.detailsSidebar.selectedSidebarPanel = sidebarPanel;
-            }
-        } else {
-            // The sidebar panel can't inspect the current represented objects, so remove the panel and hide the toolbar item.
-            this.detailsSidebar.removeSidebarPanel(sidebarPanel);
-            sidebarPanel.toolbarItem.hidden = true;
-        }
-    }
-
-    if (!this.detailsSidebar.selectedSidebarPanel && currentSidebarPanels.length)
-        this.detailsSidebar.selectedSidebarPanel = currentSidebarPanels[0];
-
-    this._ignoreDetailsSidebarPanelCollapsedEvent = true;
-
-    if (!this.detailsSidebar.sidebarPanels.length)
-        this.detailsSidebar.collapsed = true;
-    else if (wasSidebarEmpty)
-        this.detailsSidebar.collapsed = this._detailsSidebarCollapsedSetting.value;
-
-    delete this._ignoreDetailsSidebarPanelCollapsedEvent;
-
-    // Stop ignoring the sidebar panel selected event.
-    delete this._ignoreDetailsSidebarPanelSelectedEvent;
-
-    this._updateCurrentContentViewCookie(event);
-}
-
-WebInspector._initializeWebSocketIfNeeded = function()
-{
-    var ws;
-    var queryParams = parseLocationQueryParameters();
-
-    if ("ws" in queryParams)
-        ws = "ws://" + queryParams.ws;
-    else if ("page" in queryParams) {
-        var page = queryParams.page;
-        var host = "host" in queryParams ? queryParams.host : window.location.host;
-        ws = "ws://" + host + "/devtools/page/" + page;
-    }
-
-    if (!ws)
-        return;
-
-    var socket = new WebSocket(ws);
-    socket.addEventListener("open", createSocket);
-
-    function createSocket()
-    {
-        WebInspector.socket = socket;
-        WebInspector.socket.addEventListener("message", function(message) { InspectorBackend.dispatch(message.data); });
-        WebInspector.socket.addEventListener("error", function(error) { console.error(error); });
-    }
-}
-
-WebInspector._updateSplitConsoleHeight = function(height)
-{
-    const minimumHeight = 64;
-    const maximumHeight = window.innerHeight * 0.55;
-
-    height = Math.max(minimumHeight, Math.min(height, maximumHeight));
-
-    this.splitContentBrowser.element.style.height = height + "px";
-}
-
-WebInspector._consoleResizerMouseDown = function(event)
-{
-    if (event.button !== 0 || event.ctrlKey)
-        return;
-
-    // Only start dragging if the target is one of the elements that we expect.
-    if (!event.target.classList.contains("navigation-bar") && !event.target.classList.contains("flexible-space"))
-        return;
-
-    var resizerElement = event.target;
-    var mouseOffset = resizerElement.offsetHeight - (event.pageY - resizerElement.totalOffsetTop);
-
-    function dockedResizerDrag(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        var height = window.innerHeight - event.pageY - mouseOffset;
-
-        this._splitConsoleHeightSetting.value = height;
-
-        this._updateSplitConsoleHeight(height);
-    }
-
-    function dockedResizerDragEnd(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        this.elementDragEnd(event);
-    }
-
-    this.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, "row-resize");
-}
-
-WebInspector._toolbarMouseDown = function(event)
-{
-    if (event.ctrlKey)
-        return;
-
-    if (this._dockSide === "right")
-        return;
-
-    if (this.docked)
-        this._dockedResizerMouseDown(event);
-    else
-        this._moveWindowMouseDown(event);
-}
-
-WebInspector._dockedResizerMouseDown = function(event)
-{
-    if (event.button !== 0 || event.ctrlKey)
-        return;
-
-    if (!this.docked)
-        return;
-
-    // Only start dragging if the target is one of the elements that we expect.
-    if (event.target.id !== "docked-resizer" && !event.target.classList.contains("toolbar") &&
-        !event.target.classList.contains("flexible-space") && !event.target.classList.contains("item-section"))
-        return;
-
-    var windowProperty = this._dockSide === "bottom" ? "innerHeight" : "innerWidth";
-    var eventProperty = this._dockSide === "bottom" ? "screenY" : "screenX";
-
-    var resizerElement = event.target;
-    var lastScreenPosition = event[eventProperty];
-
-    function dockedResizerDrag(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        var position = event[eventProperty];
-        var dimension = window[windowProperty] - (position - lastScreenPosition);
-
-        if (this._dockSide === "bottom")
-            InspectorFrontendHost.setAttachedWindowHeight(dimension);
-        else
-            InspectorFrontendHost.setAttachedWindowWidth(dimension);
-
-        lastScreenPosition = position;
-    }
-
-    function dockedResizerDragEnd(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        WebInspector.elementDragEnd(event);
-    }
-
-    WebInspector.elementDragStart(resizerElement, dockedResizerDrag.bind(this), dockedResizerDragEnd.bind(this), event, this._dockSide === "bottom" ? "row-resize" : "col-resize");
-}
-
-WebInspector._moveWindowMouseDown = function(event)
-{
-    console.assert(!this.docked);
-
-    if (event.button !== 0 || event.ctrlKey)
-        return;
-
-    // Only start dragging if the target is one of the elements that we expect.
-    if (!event.target.classList.contains("toolbar") && !event.target.classList.contains("flexible-space") &&
-        !event.target.classList.contains("item-section"))
-        return;
-
-    var lastScreenX = event.screenX;
-    var lastScreenY = event.screenY;
-
-    function toolbarDrag(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        var x = event.screenX - lastScreenX;
-        var y = event.screenY - lastScreenY;
-
-        InspectorFrontendHost.moveWindowBy(x, y);
-
-        lastScreenX = event.screenX;
-        lastScreenY = event.screenY;
-    }
-
-    function toolbarDragEnd(event)
-    {
-        if (event.button !== 0)
-            return;
-
-        WebInspector.elementDragEnd(event);
-    }
-
-    WebInspector.elementDragStart(event.target, toolbarDrag, toolbarDragEnd, event, "default");
-}
-
-WebInspector._inspectModeStateChanged = function(event)
-{
-    this._inspectModeToolbarButton.activated = WebInspector.domTreeManager.inspectModeEnabled;
-}
-
-WebInspector._toggleInspectMode = function(event)
-{
-    WebInspector.domTreeManager.inspectModeEnabled = !WebInspector.domTreeManager.inspectModeEnabled;
-}
-
-WebInspector._reloadPage = function(event)
-{
-    PageAgent.reload();
-}
-
-WebInspector._reloadPageIgnoringCache = function(event)
-{
-    PageAgent.reload(true);
-}
-
-WebInspector._toggleInspectMode = function(event)
-{
-    this.domTreeManager.inspectModeEnabled = !this.domTreeManager.inspectModeEnabled;
-}
-
-WebInspector._focusedContentView = function()
-{
-    if (this.contentBrowser.element.isSelfOrAncestor(this.currentFocusElement))
-        return this.contentBrowser.currentContentView;
-    if (this.splitContentBrowser.element.isSelfOrAncestor(this.currentFocusElement))
-        return  this.splitContentBrowser.currentContentView;
-    return null;
-}
-
-WebInspector._beforecopy = function(event)
-{
-    var selection = window.getSelection();
-
-    // If there is no selection, see if the focused element or focused ContentView can handle the copy event.
-    if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
-        var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
-        if (focusedCopyHandler && typeof focusedCopyHandler.handleBeforeCopyEvent === "function") {
-            focusedCopyHandler.handleBeforeCopyEvent(event);
-            if (event.defaultPrevented)
-                return;
-        }
-
-        var focusedContentView = this._focusedContentView();
-        if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
-            event.preventDefault();
-            return;
-        }
-
-        return;
-    }
-
-    if (selection.isCollapsed)
-        return;
-
-    // Say we can handle it (by preventing default) to remove word break characters.
-    event.preventDefault();
-}
-
-WebInspector._copy = function(event)
-{
-    var selection = window.getSelection();
-
-    // If there is no selection, pass the copy event on to the focused element or focused ContentView.
-    if (selection.isCollapsed && !WebInspector.isEventTargetAnEditableField(event)) {
-        var focusedCopyHandler = this.currentFocusElement && this.currentFocusElement.copyHandler;
-        if (focusedCopyHandler && typeof focusedCopyHandler.handleCopyEvent === "function") {
-            focusedCopyHandler.handleCopyEvent(event);
-            if (event.defaultPrevented)
-                return;
-        }
-
-        var focusedContentView = this._focusedContentView();
-        if (focusedContentView && typeof focusedContentView.handleCopyEvent === "function") {
-            focusedContentView.handleCopyEvent(event);
-            return;
-        }
-
-        return;
-    }
-
-    if (selection.isCollapsed)
-        return;
-
-    // Remove word break characters from the selection before putting it on the pasteboard.
-    var selectionString = selection.toString().removeWordBreakCharacters();
-    event.clipboardData.setData("text/plain", selectionString);
-    event.preventDefault();
-}
-
-WebInspector._generateDisclosureTriangleImages = function()
-{
-    var specifications = {};
-    specifications["normal"] = {fillColor: [0, 0, 0, 0.5]};
-    specifications["normal-active"] = {fillColor: [0, 0, 0, 0.7]};
-    specifications["selected"] = {fillColor: [255, 255, 255, 0.8]};
-    specifications["selected-active"] = {fillColor: [255, 255, 255, 1]};
-
-    generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.pdf", specifications, 13, 13, "disclosure-triangle-small-open-");
-    generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.pdf", specifications, 13, 13, "disclosure-triangle-small-closed-");
-
-    generateColoredImagesForCSS("Images/DisclosureTriangleTinyOpen.pdf", specifications, 8, 8, "disclosure-triangle-tiny-open-");
-    generateColoredImagesForCSS("Images/DisclosureTriangleTinyClosed.pdf", specifications, 8, 8, "disclosure-triangle-tiny-closed-");
-}
-
-WebInspector.elementDragStart = function(element, dividerDrag, elementDragEnd, event, cursor, eventTarget)
-{
-    if (WebInspector._elementDraggingEventListener || WebInspector._elementEndDraggingEventListener)
-        WebInspector.elementDragEnd(event);
-    
-    if (element) {
-        // Install glass pane
-        if (WebInspector._elementDraggingGlassPane)
-            WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
-        
-        var glassPane = document.createElement("div");
-        glassPane.style.cssText = "position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1";
-        glassPane.id = "glass-pane-for-drag";
-        element.ownerDocument.body.appendChild(glassPane);
-        WebInspector._elementDraggingGlassPane = glassPane;
-    }
-    
-    WebInspector._elementDraggingEventListener = dividerDrag;
-    WebInspector._elementEndDraggingEventListener = elementDragEnd;
-    
-    var targetDocument = event.target.ownerDocument;
-
-    WebInspector._elementDraggingEventTarget = eventTarget || targetDocument;
-    WebInspector._elementDraggingEventTarget.addEventListener("mousemove", dividerDrag, true);
-    WebInspector._elementDraggingEventTarget.addEventListener("mouseup", elementDragEnd, true);
-    
-    targetDocument.body.style.cursor = cursor;
-    
-    event.preventDefault();
-}
-
-WebInspector.elementDragEnd = function(event)
-{
-    WebInspector._elementDraggingEventTarget.removeEventListener("mousemove", WebInspector._elementDraggingEventListener, true);
-    WebInspector._elementDraggingEventTarget.removeEventListener("mouseup", WebInspector._elementEndDraggingEventListener, true);
-    
-    event.target.ownerDocument.body.style.removeProperty("cursor");
-    
-    if (WebInspector._elementDraggingGlassPane)
-        WebInspector._elementDraggingGlassPane.parentElement.removeChild(WebInspector._elementDraggingGlassPane);
-    
-    delete WebInspector._elementDraggingGlassPane;
-    delete WebInspector._elementDraggingEventTarget;
-    delete WebInspector._elementDraggingEventListener;
-    delete WebInspector._elementEndDraggingEventListener;
-    
-    event.preventDefault();
-}
-
-WebInspector.createMessageTextView = function(message, isError)
-{
-    var messageElement = document.createElement("div");
-    messageElement.className = "message-text-view";
-    if (isError)
-        messageElement.classList.add("error");
-
-    messageElement.textContent = message;
-    
-    return messageElement;
-}
-
-WebInspector.createGoToArrowButton = function()
-{
-    if (!WebInspector._generatedGoToArrowButtonImages) {
-        WebInspector._generatedGoToArrowButtonImages = true;
-
-        var specifications = {};
-        specifications["go-to-arrow-normal"] = {fillColor: [0, 0, 0, 0.5]};
-        specifications["go-to-arrow-normal-active"] = {fillColor: [0, 0, 0, 0.7]};
-        specifications["go-to-arrow-selected"] = {fillColor: [255, 255, 255, 0.8]};
-        specifications["go-to-arrow-selected-active"] = {fillColor: [255, 255, 255, 1]};
-
-        generateColoredImagesForCSS("Images/GoToArrow.pdf", specifications, 10, 10);
-    }
-
-    function stopPropagation(event)
-    {
-        event.stopPropagation()
-    }
-
-    var button = document.createElement("button");
-    button.addEventListener("mousedown", stopPropagation, true);
-    button.className = "go-to-arrow";
-    button.tabIndex = -1;
-    return button;
-}
-
-WebInspector.createSourceCodeLocationLink = function(sourceCodeLocation, dontFloat, useGoToArrowButton)
-{
-    console.assert(sourceCodeLocation);
-    if (!sourceCodeLocation)
-        return null;
-
-    function showSourceCodeLocation(event)
-    {
-        event.stopPropagation();
-        event.preventDefault();
-
-        if (event.metaKey)
-            this.resourceSidebarPanel.showOriginalUnformattedSourceCodeLocation(sourceCodeLocation);
-        else
-            this.resourceSidebarPanel.showSourceCodeLocation(sourceCodeLocation);
-    }
-
-    var linkElement = document.createElement("a");
-    linkElement.className = "go-to-link";
-    linkElement.addEventListener("click", showSourceCodeLocation.bind(this));
-    sourceCodeLocation.populateLiveDisplayLocationTooltip(linkElement);
-
-    if (useGoToArrowButton)
-        linkElement.appendChild(WebInspector.createGoToArrowButton());
-    else
-        sourceCodeLocation.populateLiveDisplayLocationString(linkElement, "textContent");
-
-    if (dontFloat)
-        linkElement.classList.add("dont-float");
-
-    return linkElement;
-}
-
-WebInspector.linkifyLocation = function(url, lineNumber, columnNumber, className)
-{
-    var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
-    if (!sourceCode) {
-        sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
-        if (sourceCode)
-            sourceCode = sourceCode.resource || sourceCode;
-    }
-
-    if (!sourceCode) {
-        var anchor = document.createElement("a");
-        anchor.href  = url;
-        anchor.lineNumber = lineNumber;
-        if (className)
-            anchor.className = className;
-        anchor.appendChild(document.createTextNode(WebInspector.displayNameForURL(url) + ":" + lineNumber));
-        return anchor;
-    }
-
-    var sourceCodeLocation = sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
-    var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, true);
-    if (className)
-        linkElement.classList.add(className);
-    return linkElement;
-}
-
-WebInspector.linkifyURLAsNode = function(url, linkText, classes, tooltipText)
-{
-    if (!linkText)
-        linkText = url;
-
-    classes = (classes ? classes + " " : "");
-
-    var a = document.createElement("a");
-    a.href = url;
-    a.className = classes;
-
-    if (typeof tooltipText === "undefined")
-        a.title = url;
-    else if (typeof tooltipText !== "string" || tooltipText.length)
-        a.title = tooltipText;
-
-    a.textContent = linkText;
-    a.style.maxWidth = "100%";
-
-    return a;
-}
-
-WebInspector.linkifyStringAsFragmentWithCustomLinkifier = function(string, linkifier)
-{
-    var container = document.createDocumentFragment();
-    var linkStringRegEx = /(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\/\/|www\.)[\w$\-_+*'=\|\/\\(){}[\]%@&#~,:;.!?]{2,}[\w$\-_+*=\|\/\\({%@&#~]/;
-    var lineColumnRegEx = /:(\d+)(:(\d+))?$/;
-
-    while (string) {
-        var linkString = linkStringRegEx.exec(string);
-        if (!linkString)
-            break;
-
-        linkString = linkString[0];
-        var linkIndex = string.indexOf(linkString);
-        var nonLink = string.substring(0, linkIndex);
-        container.appendChild(document.createTextNode(nonLink));
-
-        var title = linkString;
-        var realURL = (linkString.startsWith("www.") ? "http://" + linkString : linkString);
-        var lineColumnMatch = lineColumnRegEx.exec(realURL);
-        if (lineColumnMatch)
-            realURL = realURL.substring(0, realURL.length - lineColumnMatch[0].length);
-
-        var linkNode = linkifier(title, realURL, lineColumnMatch ? lineColumnMatch[1] : undefined);
-        container.appendChild(linkNode);
-        string = string.substring(linkIndex + linkString.length, string.length);
-    }
-
-    if (string)
-        container.appendChild(document.createTextNode(string));
-
-    return container;
-}
-
-WebInspector.linkifyStringAsFragment = function(string)
-{
-    function linkifier(title, url, lineNumber)
-    {
-        var urlNode = WebInspector.linkifyURLAsNode(url, title, undefined);
-        if (typeof(lineNumber) !== "undefined")
-            urlNode.lineNumber = lineNumber;
-
-        return urlNode; 
-    }
-    
-    return WebInspector.linkifyStringAsFragmentWithCustomLinkifier(string, linkifier);
-}
-
-WebInspector._undoKeyboardShortcut = function(event)
-{
-    if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
-        this.undo();
-        event.preventDefault();
-    }
-}
-
-WebInspector._redoKeyboardShortcut = function(event)
-{
-    if (!this.isEditingAnyField() && !this.isEventTargetAnEditableField(event)) {
-        this.redo();
-        event.preventDefault();
-    }
-}
-
-WebInspector.undo = function()
-{
-    DOMAgent.undo();
-}
-
-WebInspector.redo = function()
-{
-    DOMAgent.redo();
-}
-
-/**
- * @param {Element} element
- * @param {Array.<Object>} resultRanges
- * @param {string} styleClass
- * @param {Array.<Object>=} changes
- */
-WebInspector.highlightRangesWithStyleClass = function(element, resultRanges, styleClass, changes)
-{
-    changes = changes || [];
-    var highlightNodes = [];
-    var lineText = element.textContent;
-    var ownerDocument = element.ownerDocument;
-    var textNodeSnapshot = ownerDocument.evaluate(".//text()", element, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
-
-    var snapshotLength = textNodeSnapshot.snapshotLength;
-    if (snapshotLength === 0)
-        return highlightNodes;
-
-    var nodeRanges = [];
-    var rangeEndOffset = 0;
-    for (var i = 0; i < snapshotLength; ++i) {
-        var range = {};
-        range.offset = rangeEndOffset;
-        range.length = textNodeSnapshot.snapshotItem(i).textContent.length;
-        rangeEndOffset = range.offset + range.length;
-        nodeRanges.push(range);
-    }
-
-    var startIndex = 0;
-    for (var i = 0; i < resultRanges.length; ++i) {
-        var startOffset = resultRanges[i].offset;
-        var endOffset = startOffset + resultRanges[i].length;
-
-        while (startIndex < snapshotLength && nodeRanges[startIndex].offset + nodeRanges[startIndex].length <= startOffset)
-            startIndex++;
-        var endIndex = startIndex;
-        while (endIndex < snapshotLength && nodeRanges[endIndex].offset + nodeRanges[endIndex].length < endOffset)
-            endIndex++;
-        if (endIndex === snapshotLength)
-            break;
-
-        var highlightNode = ownerDocument.createElement("span");
-        highlightNode.className = styleClass;
-        highlightNode.textContent = lineText.substring(startOffset, endOffset);
-
-        var lastTextNode = textNodeSnapshot.snapshotItem(endIndex);
-        var lastText = lastTextNode.textContent;
-        lastTextNode.textContent = lastText.substring(endOffset - nodeRanges[endIndex].offset);
-        changes.push({ node: lastTextNode, type: "changed", oldText: lastText, newText: lastTextNode.textContent });
-
-        if (startIndex === endIndex) {
-            lastTextNode.parentElement.insertBefore(highlightNode, lastTextNode);
-            changes.push({ node: highlightNode, type: "added", nextSibling: lastTextNode, parent: lastTextNode.parentElement });
-            highlightNodes.push(highlightNode);
-
-            var prefixNode = ownerDocument.createTextNode(lastText.substring(0, startOffset - nodeRanges[startIndex].offset));
-            lastTextNode.parentElement.insertBefore(prefixNode, highlightNode);
-            changes.push({ node: prefixNode, type: "added", nextSibling: highlightNode, parent: lastTextNode.parentElement });
-        } else {
-            var firstTextNode = textNodeSnapshot.snapshotItem(startIndex);
-            var firstText = firstTextNode.textContent;
-            var anchorElement = firstTextNode.nextSibling;
-
-            firstTextNode.parentElement.insertBefore(highlightNode, anchorElement);
-            changes.push({ node: highlightNode, type: "added", nextSibling: anchorElement, parent: firstTextNode.parentElement });
-            highlightNodes.push(highlightNode);
-
-            firstTextNode.textContent = firstText.substring(0, startOffset - nodeRanges[startIndex].offset);
-            changes.push({ node: firstTextNode, type: "changed", oldText: firstText, newText: firstTextNode.textContent });
-
-            for (var j = startIndex + 1; j < endIndex; j++) {
-                var textNode = textNodeSnapshot.snapshotItem(j);
-                var text = textNode.textContent;
-                textNode.textContent = "";
-                changes.push({ node: textNode, type: "changed", oldText: text, newText: textNode.textContent });
-            }
-        }
-        startIndex = endIndex;
-        nodeRanges[startIndex].offset = endOffset;
-        nodeRanges[startIndex].length = lastTextNode.textContent.length;
-
-    }
-    return highlightNodes;
-}
-
-WebInspector.revertDomChanges = function(domChanges)
-{
-    for (var i = domChanges.length - 1; i >= 0; --i) {
-        var entry = domChanges[i];
-        switch (entry.type) {
-        case "added":
-            if (entry.node.parentElement)
-                entry.node.parentElement.removeChild(entry.node);
-            break;
-        case "changed":
-            entry.node.textContent = entry.oldText;
-            break;
-        }
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/MetricsStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/MetricsStyleDetailsPanel.js
deleted file mode 100644
index d28a83219..000000000
--- a/Source/WebInspectorUI/UserInterface/MetricsStyleDetailsPanel.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.MetricsStyleDetailsPanel = function()
-{
-    WebInspector.StyleDetailsPanel.call(this, WebInspector.MetricsStyleDetailsPanel.StyleClassName, "metrics", WebInspector.UIString("Metrics"));
-
-    this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
-
-    var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
-    var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
-
-    this.element.appendChild(boxModelSection.element);
-};
-
-WebInspector.MetricsStyleDetailsPanel.StyleClassName = "metrics";
-
-WebInspector.MetricsStyleDetailsPanel.prototype = {
-    constructor: WebInspector.MetricsStyleDetailsPanel,
-
-    // Public
-
-    refresh: function()
-    {
-        this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
-    }
-};
-
-WebInspector.MetricsStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Models/AnalyzerMessage.js b/Source/WebInspectorUI/UserInterface/Models/AnalyzerMessage.js
new file mode 100644
index 000000000..5d0b951ba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/AnalyzerMessage.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.AnalyzerMessage = class AnalyzerMessage extends WebInspector.Object
+{
+    constructor(sourceCodeLocation, text, ruleIdentifier)
+    {
+        super();
+
+        console.assert(sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
+        console.assert(typeof text === "string");
+
+        this._sourceCodeLocation = sourceCodeLocation;
+        this._text = text;
+        this._ruleIdentifier = ruleIdentifier;
+    }
+
+    // Public
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    get sourceCode()
+    {
+        return this._sourceCodeLocation.sourceCode;
+    }
+
+    get text()
+    {
+        return this._text;
+    }
+
+    get ruleIdentifier()
+    {
+        return this._ruleIdentifier;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheFrame.js b/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheFrame.js
new file mode 100644
index 000000000..befc18a0e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheFrame.js
@@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheFrame = class ApplicationCacheFrame extends WebInspector.Object
+{
+    constructor(frame, manifest, status)
+    {
+        super();
+
+        console.assert(frame instanceof WebInspector.Frame);
+        console.assert(manifest instanceof WebInspector.ApplicationCacheManifest);
+
+        this._frame = frame;
+        this._manifest = manifest;
+        this._status = status;
+    }
+
+    // Public
+
+    get frame()
+    {
+        return this._frame;
+    }
+
+    get manifest()
+    {
+        return this._manifest;
+    }
+
+    get status()
+    {
+        return this._status;
+    }
+
+    set status(status)
+    {
+        this._status = status;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.ApplicationCacheFrame.FrameURLCookieKey] = this.frame.url;
+        cookie[WebInspector.ApplicationCacheFrame.ManifestURLCookieKey] = this.manifest.manifestURL;
+    }
+};
+
+WebInspector.ApplicationCacheFrame.TypeIdentifier = "application-cache-frame";
+WebInspector.ApplicationCacheFrame.FrameURLCookieKey = "application-cache-frame-url";
+WebInspector.ApplicationCacheFrame.ManifestURLCookieKey = "application-cache-frame-manifest-url";
diff --git a/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheManifest.js b/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheManifest.js
new file mode 100644
index 000000000..e160bb53e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ApplicationCacheManifest.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheManifest = class ApplicationCacheManifest extends WebInspector.Object
+{
+    constructor(manifestURL)
+    {
+        super();
+
+        this._manifestURL = manifestURL;
+    }
+
+    get manifestURL()
+    {
+        return this._manifestURL;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/BackForwardEntry.js b/Source/WebInspectorUI/UserInterface/Models/BackForwardEntry.js
new file mode 100644
index 000000000..3dc6bb38c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/BackForwardEntry.js
@@ -0,0 +1,142 @@
+/*
+ *  Copyright (C) 2013 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BackForwardEntry = class BackForwardEntry extends WebInspector.Object
+{
+    constructor(contentView, cookie)
+    {
+        super();
+
+        this._contentView = contentView;
+
+        // ContentViews may be shared across multiple ContentViewContainers.
+        // A BackForwardEntry containing a tombstone doesn't actually have
+        // the real ContentView, and so should not close it.
+        this._tombstone = false;
+
+        // Cookies are compared with Object.shallowEqual, so should not store objects or arrays.
+        this._cookie = cookie || {};
+        this._scrollPositions = [];
+
+        contentView.saveToCookie(this._cookie);
+    }
+
+    // Public
+
+    get contentView()
+    {
+        return this._contentView;
+    }
+
+    get cookie()
+    {
+        // Cookies are immutable; they represent a specific navigation action.
+        return Object.shallowCopy(this._cookie);
+    }
+
+    get tombstone()
+    {
+        return this._tombstone;
+    }
+
+    set tombstone(tombstone)
+    {
+        this._tombstone = tombstone;
+    }
+
+    prepareToShow(shouldCallShown)
+    {
+        console.assert(!this._tombstone, "Should not be calling shown on a tombstone");
+
+        this._restoreFromCookie();
+
+        this.contentView.visible = true;
+        if (shouldCallShown)
+            this.contentView.shown();
+        this.contentView.needsLayout();
+    }
+
+    prepareToHide()
+    {
+        console.assert(!this._tombstone, "Should not be calling hidden on a tombstone");
+
+        this.contentView.visible = false;
+        this.contentView.hidden();
+
+        this._saveScrollPositions();
+    }
+
+    // Private
+
+    _restoreFromCookie()
+    {
+        this._restoreScrollPositions();
+        this.contentView.restoreFromCookie(this.cookie);
+    }
+
+    _restoreScrollPositions()
+    {
+        // If no scroll positions are saved, do nothing.
+        if (!this._scrollPositions.length)
+            return;
+
+        var scrollableElements = this.contentView.scrollableElements || [];
+        console.assert(this._scrollPositions.length === scrollableElements.length);
+
+        for (var i = 0; i < scrollableElements.length; ++i) {
+            var position = this._scrollPositions[i];
+            var element = scrollableElements[i];
+            if (!element)
+                continue;
+
+            // Restore the top scroll position by either scrolling to the bottom or to the saved position.
+            element.scrollTop = position.isScrolledToBottom ? element.scrollHeight : position.scrollTop;
+
+            // Don't restore the left scroll position when scrolled to the bottom. This way the when content changes
+            // the user won't be left in a weird horizontal position.
+            element.scrollLeft = position.isScrolledToBottom ? 0 : position.scrollLeft;
+        }
+    }
+
+    _saveScrollPositions()
+    {
+        var scrollableElements = this.contentView.scrollableElements || [];
+        var scrollPositions = [];
+        for (var i = 0; i < scrollableElements.length; ++i) {
+            var element = scrollableElements[i];
+            if (!element)
+                continue;
+
+            let position = {scrollTop: element.scrollTop, scrollLeft: element.scrollLeft};
+            if (this.contentView.shouldKeepElementsScrolledToBottom)
+                position.isScrolledToBottom = element.isScrolledToBottom();
+
+            scrollPositions.push(position);
+        }
+
+        this._scrollPositions = scrollPositions;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Branch.js b/Source/WebInspectorUI/UserInterface/Models/Branch.js
new file mode 100644
index 000000000..829764baa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Branch.js
@@ -0,0 +1,146 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Branch = class Branch extends WebInspector.Object
+{
+    constructor(displayName, revisions, locked)
+    {
+        super();
+
+        console.assert(displayName);
+
+        this._displayName = displayName;
+        this._revisions = revisions instanceof Array ? revisions.slice() : [];
+        this._locked = locked || false;
+    }
+
+    // Public
+
+    get displayName()
+    {
+        return this._displayName;
+    }
+
+    set displayName(displayName)
+    {
+        console.assert(displayName);
+        if (!displayName)
+            return;
+
+        this._displayName = displayName;
+    }
+
+    get revisions()
+    {
+        return this._revisions;
+    }
+
+    get locked()
+    {
+        return this._locked;
+    }
+
+    revisionForRepresentedObject(representedObject, doNotCreateIfNeeded)
+    {
+        for (var i = 0; i < this._revisions.length; ++i) {
+            var revision = this._revisions[i];
+            if (revision instanceof WebInspector.SourceCodeRevision && revision.sourceCode === representedObject)
+                return revision;
+        }
+
+        if (doNotCreateIfNeeded)
+            return null;
+
+        if (representedObject instanceof WebInspector.SourceCode) {
+            var revision = representedObject.originalRevision.copy();
+            representedObject.currentRevision = revision;
+            this.addRevision(revision);
+            return revision;
+        }
+
+        return null;
+    }
+
+    addRevision(revision)
+    {
+        console.assert(revision instanceof WebInspector.Revision);
+
+        if (this._locked)
+            return;
+
+        if (this._revisions.includes(revision))
+            return;
+
+        this._revisions.push(revision);
+    }
+
+    removeRevision(revision)
+    {
+        console.assert(revision instanceof WebInspector.Revision);
+
+        if (this._locked)
+            return;
+
+        this._revisions.remove(revision);
+    }
+
+    reset()
+    {
+        if (this._locked)
+            return;
+
+        this._revisions = [];
+    }
+
+    fork(displayName)
+    {
+        var copiedRevisions = this._revisions.map(function(revision) { return revision.copy(); });
+        return new WebInspector.Branch(displayName, copiedRevisions);
+    }
+
+    apply()
+    {
+        for (var i = 0; i < this._revisions.length; ++i)
+            this._revisions[i].apply();
+    }
+
+    revert()
+    {
+        for (var i = this._revisions.length - 1; i >= 0; --i)
+            this._revisions[i].revert();
+    }
+
+    lock()
+    {
+        console.assert(!this._locked);
+        this._locked = true;
+    }
+
+    unlock()
+    {
+        console.assert(this._locked);
+        this._locked = false;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Breakpoint.js b/Source/WebInspectorUI/UserInterface/Models/Breakpoint.js
new file mode 100644
index 000000000..21b2c9619
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Breakpoint.js
@@ -0,0 +1,356 @@
+/*
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Breakpoint = class Breakpoint extends WebInspector.Object
+{
+    constructor(sourceCodeLocationOrInfo, disabled, condition)
+    {
+        super();
+
+        if (sourceCodeLocationOrInfo instanceof WebInspector.SourceCodeLocation) {
+            var sourceCode = sourceCodeLocationOrInfo.sourceCode;
+            var url = sourceCode ? sourceCode.url : null;
+            var scriptIdentifier = sourceCode instanceof WebInspector.Script ? sourceCode.id : null;
+            var location = sourceCodeLocationOrInfo;
+        } else if (sourceCodeLocationOrInfo && typeof sourceCodeLocationOrInfo === "object") {
+            var url = sourceCodeLocationOrInfo.url;
+            var lineNumber = sourceCodeLocationOrInfo.lineNumber || 0;
+            var columnNumber = sourceCodeLocationOrInfo.columnNumber || 0;
+            var location = new WebInspector.SourceCodeLocation(null, lineNumber, columnNumber);
+            var ignoreCount = sourceCodeLocationOrInfo.ignoreCount || 0;
+            var autoContinue = sourceCodeLocationOrInfo.autoContinue || false;
+            var actions = sourceCodeLocationOrInfo.actions || [];
+            for (var i = 0; i < actions.length; ++i)
+                actions[i] = new WebInspector.BreakpointAction(this, actions[i]);
+            disabled = sourceCodeLocationOrInfo.disabled;
+            condition = sourceCodeLocationOrInfo.condition;
+        } else
+            console.error("Unexpected type passed to WebInspector.Breakpoint", sourceCodeLocationOrInfo);
+
+        this._id = null;
+        this._url = url || null;
+        this._scriptIdentifier = scriptIdentifier || null;
+        this._disabled = disabled || false;
+        this._condition = condition || "";
+        this._ignoreCount = ignoreCount || 0;
+        this._autoContinue = autoContinue || false;
+        this._actions = actions || [];
+        this._resolved = false;
+
+        this._sourceCodeLocation = location;
+        this._sourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationLocationChanged, this);
+        this._sourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, this._sourceCodeLocationDisplayLocationChanged, this);
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    set id(id)
+    {
+        this._id = id || null;
+    }
+
+    get url()
+    {
+        return this._url;
+    }
+
+    get scriptIdentifier()
+    {
+        return this._scriptIdentifier;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    get resolved()
+    {
+        return this._resolved;
+    }
+
+    set resolved(resolved)
+    {
+        if (this._resolved === resolved)
+            return;
+
+        function isSpecialBreakpoint()
+        {
+            return this._sourceCodeLocation.isEqual(new WebInspector.SourceCodeLocation(null, Infinity, Infinity));
+        }
+
+        console.assert(!resolved || this._sourceCodeLocation.sourceCode || isSpecialBreakpoint.call(this), "Breakpoints must have a SourceCode to be resolved.", this);
+
+        this._resolved = resolved || false;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ResolvedStateDidChange);
+    }
+
+    get disabled()
+    {
+        return this._disabled;
+    }
+
+    set disabled(disabled)
+    {
+        if (this._disabled === disabled)
+            return;
+
+        this._disabled = disabled || false;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.DisabledStateDidChange);
+    }
+
+    get condition()
+    {
+        return this._condition;
+    }
+
+    set condition(condition)
+    {
+        if (this._condition === condition)
+            return;
+
+        this._condition = condition;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ConditionDidChange);
+    }
+
+    get ignoreCount()
+    {
+        return this._ignoreCount;
+    }
+
+    set ignoreCount(ignoreCount)
+    {
+        console.assert(ignoreCount >= 0, "Ignore count cannot be negative.");
+        if (ignoreCount < 0)
+            return;
+
+        if (this._ignoreCount === ignoreCount)
+            return;
+
+        this._ignoreCount = ignoreCount;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.IgnoreCountDidChange);
+    }
+
+    get autoContinue()
+    {
+        return this._autoContinue;
+    }
+
+    set autoContinue(cont)
+    {
+        if (this._autoContinue === cont)
+            return;
+
+        this._autoContinue = cont;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.AutoContinueDidChange);
+    }
+
+    get actions()
+    {
+        return this._actions;
+    }
+
+    get options()
+    {
+        return {
+            condition: this._condition,
+            ignoreCount: this._ignoreCount,
+            actions: this._serializableActions(),
+            autoContinue: this._autoContinue
+        };
+    }
+
+    get info()
+    {
+        // The id, scriptIdentifier and resolved state are tied to the current session, so don't include them for serialization.
+        return {
+            url: this._url,
+            lineNumber: this._sourceCodeLocation.lineNumber,
+            columnNumber: this._sourceCodeLocation.columnNumber,
+            disabled: this._disabled,
+            condition: this._condition,
+            ignoreCount: this._ignoreCount,
+            actions: this._serializableActions(),
+            autoContinue: this._autoContinue
+        };
+    }
+
+    get probeActions()
+    {
+        return this._actions.filter(function(action) {
+            return action.type === WebInspector.BreakpointAction.Type.Probe;
+        });
+    }
+
+    cycleToNextMode()
+    {
+        if (this.disabled) {
+            // When cycling, clear auto-continue when going from disabled to enabled.
+            this.autoContinue = false;
+            this.disabled = false;
+            return;
+        }
+
+        if (this.autoContinue) {
+            this.disabled = true;
+            return;
+        }
+
+        if (this.actions.length) {
+            this.autoContinue = true;
+            return;
+        }
+
+        this.disabled = true;
+    }
+
+    createAction(type, precedingAction, data)
+    {
+        var newAction = new WebInspector.BreakpointAction(this, type, data || null);
+
+        if (!precedingAction)
+            this._actions.push(newAction);
+        else {
+            var index = this._actions.indexOf(precedingAction);
+            console.assert(index !== -1);
+            if (index === -1)
+                this._actions.push(newAction);
+            else
+                this._actions.splice(index + 1, 0, newAction);
+        }
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange);
+
+        return newAction;
+    }
+
+    recreateAction(type, actionToReplace)
+    {
+        var newAction = new WebInspector.BreakpointAction(this, type, null);
+
+        var index = this._actions.indexOf(actionToReplace);
+        console.assert(index !== -1);
+        if (index === -1)
+            return null;
+
+        this._actions[index] = newAction;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange);
+
+        return newAction;
+    }
+
+    removeAction(action)
+    {
+        var index = this._actions.indexOf(action);
+        console.assert(index !== -1);
+        if (index === -1)
+            return;
+
+        this._actions.splice(index, 1);
+
+        if (!this._actions.length)
+            this.autoContinue = false;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange);
+    }
+
+    clearActions(type)
+    {
+        if (!type)
+            this._actions = [];
+        else
+            this._actions = this._actions.filter(function(action) { return action.type !== type; });
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange);
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.Breakpoint.URLCookieKey] = this.url;
+        cookie[WebInspector.Breakpoint.LineNumberCookieKey] = this.sourceCodeLocation.lineNumber;
+        cookie[WebInspector.Breakpoint.ColumnNumberCookieKey] = this.sourceCodeLocation.columnNumber;
+    }
+
+    // Protected (Called by BreakpointAction)
+
+    breakpointActionDidChange(action)
+    {
+        var index = this._actions.indexOf(action);
+        console.assert(index !== -1);
+        if (index === -1)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.ActionsDidChange);
+    }
+
+    // Private
+
+    _serializableActions()
+    {
+        var actions = [];
+        for (var i = 0; i < this._actions.length; ++i)
+            actions.push(this._actions[i].info);
+        return actions;
+    }
+
+    _sourceCodeLocationLocationChanged(event)
+    {
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.LocationDidChange, event.data);
+    }
+
+    _sourceCodeLocationDisplayLocationChanged(event)
+    {
+        this.dispatchEventToListeners(WebInspector.Breakpoint.Event.DisplayLocationDidChange, event.data);
+    }
+};
+
+WebInspector.Breakpoint.DefaultBreakpointActionType = WebInspector.BreakpointAction.Type.Log;
+
+WebInspector.Breakpoint.TypeIdentifier = "breakpoint";
+WebInspector.Breakpoint.URLCookieKey = "breakpoint-url";
+WebInspector.Breakpoint.LineNumberCookieKey = "breakpoint-line-number";
+WebInspector.Breakpoint.ColumnNumberCookieKey = "breakpoint-column-number";
+
+WebInspector.Breakpoint.Event = {
+    DisabledStateDidChange: "breakpoint-disabled-state-did-change",
+    ResolvedStateDidChange: "breakpoint-resolved-state-did-change",
+    ConditionDidChange: "breakpoint-condition-did-change",
+    IgnoreCountDidChange: "breakpoint-ignore-count-did-change",
+    ActionsDidChange: "breakpoint-actions-did-change",
+    AutoContinueDidChange: "breakpoint-auto-continue-did-change",
+    LocationDidChange: "breakpoint-location-did-change",
+    DisplayLocationDidChange: "breakpoint-display-location-did-change",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/BreakpointAction.js b/Source/WebInspectorUI/UserInterface/Models/BreakpointAction.js
new file mode 100644
index 000000000..b94f792f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/BreakpointAction.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BreakpointAction = class BreakpointAction extends WebInspector.Object
+{
+    constructor(breakpoint, typeOrInfo, data)
+    {
+        super();
+
+        console.assert(breakpoint);
+        console.assert(typeOrInfo);
+
+        this._breakpoint = breakpoint;
+
+        if (typeof typeOrInfo === "string") {
+            this._type = typeOrInfo;
+            this._data = data || null;
+        } else if (typeof typeOrInfo === "object") {
+            this._type = typeOrInfo.type;
+            this._data = typeOrInfo.data || null;
+        } else
+            console.error("Unexpected type passed to WebInspector.BreakpointAction");
+
+        console.assert(typeof this._type === "string");
+        this._id = WebInspector.debuggerManager.nextBreakpointActionIdentifier;
+    }
+
+    // Public
+
+    get breakpoint()
+    {
+        return this._breakpoint;
+    }
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get data()
+    {
+        return this._data;
+    }
+
+    set data(data)
+    {
+        if (this._data === data)
+            return;
+
+        this._data = data;
+
+        this._breakpoint.breakpointActionDidChange(this);
+    }
+
+    get info()
+    {
+        var obj = {type: this._type, id: this._id};
+        if (this._data)
+            obj.data = this._data;
+        return obj;
+    }
+};
+
+WebInspector.BreakpointAction.Type = {
+    Log: "log",
+    Evaluate: "evaluate",
+    Sound: "sound",
+    Probe: "probe"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js b/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js
new file mode 100644
index 000000000..2755eb5cb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js
@@ -0,0 +1,314 @@
+/*
+ * Copyright (C) 2010 Nikita Vasilyev. All rights reserved.
+ * Copyright (C) 2010 Joseph Pecoraro. All rights reserved.
+ * Copyright (C) 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSCompletions = class CSSCompletions
+{
+    constructor(properties, acceptEmptyPrefix)
+    {
+        this._values = [];
+        this._longhands = {};
+        this._shorthands = {};
+
+        // The `properties` parameter can be either a list of objects with 'name' / 'longhand'
+        // properties when initialized from the protocol for CSSCompletions.cssNameCompletions.
+        // Or it may just a list of strings when quickly initialized for other completion purposes.
+        if (properties.length && typeof properties[0] === "string")
+            this._values = this._values.concat(properties);
+        else {
+            for (var property of properties) {
+                var propertyName = property.name;
+                console.assert(propertyName);
+
+                this._values.push(propertyName);
+
+                var longhands = property.longhands;
+                if (longhands) {
+                    this._longhands[propertyName] = longhands;
+
+                    for (var j = 0; j < longhands.length; ++j) {
+                        var longhandName = longhands[j];
+
+                        var shorthands = this._shorthands[longhandName];
+                        if (!shorthands) {
+                            shorthands = [];
+                            this._shorthands[longhandName] = shorthands;
+                        }
+
+                        shorthands.push(propertyName);
+                    }
+                }
+            }
+        }
+
+        this._values.sort();
+
+        this._acceptEmptyPrefix = acceptEmptyPrefix;
+    }
+
+    // Static
+
+    static requestCSSCompletions()
+    {
+        if (WebInspector.CSSCompletions.cssNameCompletions)
+            return;
+
+        function propertyNamesCallback(error, names)
+        {
+            if (error)
+                return;
+
+            WebInspector.CSSCompletions.cssNameCompletions = new WebInspector.CSSCompletions(names, false);
+
+            WebInspector.CSSKeywordCompletions.addCustomCompletions(names);
+
+            // CodeMirror is not included by tests so we shouldn't assume it always exists.
+            // If it isn't available we skip MIME type associations.
+            if (!window.CodeMirror)
+                return;
+
+            var propertyNamesForCodeMirror = {};
+            var valueKeywordsForCodeMirror = {"inherit": true, "initial": true, "unset": true, "revert": true};
+            var colorKeywordsForCodeMirror = {};
+
+            function nameForCodeMirror(name)
+            {
+                // CodeMirror parses the vendor prefix separate from the property or keyword name,
+                // so we need to strip vendor prefixes from our names. Also strip function parenthesis.
+                return name.replace(/^-[^-]+-/, "").replace(/\(\)$/, "");
+            }
+
+            function collectPropertyNameForCodeMirror(propertyName)
+            {
+                // Properties can also be value keywords, like when used in a transition.
+                // So we add them to both lists.
+                var codeMirrorPropertyName = nameForCodeMirror(propertyName);
+                propertyNamesForCodeMirror[codeMirrorPropertyName] = true;
+                valueKeywordsForCodeMirror[codeMirrorPropertyName] = true;
+            }
+
+            for (var property of names)
+                collectPropertyNameForCodeMirror(property.name);
+
+            for (var propertyName in WebInspector.CSSKeywordCompletions._propertyKeywordMap) {
+                var keywords = WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName];
+                for (var i = 0; i < keywords.length; ++i) {
+                    // Skip numbers, like the ones defined for font-weight.
+                    if (!isNaN(Number(keywords[i])))
+                        continue;
+                    valueKeywordsForCodeMirror[nameForCodeMirror(keywords[i])] = true;
+                }
+            }
+
+            WebInspector.CSSKeywordCompletions._colors.forEach(function(colorName) {
+                colorKeywordsForCodeMirror[nameForCodeMirror(colorName)] = true;
+            });
+
+            function updateCodeMirrorCSSMode(mimeType)
+            {
+                var modeSpec = CodeMirror.resolveMode(mimeType);
+
+                console.assert(modeSpec.propertyKeywords);
+                console.assert(modeSpec.valueKeywords);
+                console.assert(modeSpec.colorKeywords);
+
+                modeSpec.propertyKeywords = propertyNamesForCodeMirror;
+                modeSpec.valueKeywords = valueKeywordsForCodeMirror;
+                modeSpec.colorKeywords = colorKeywordsForCodeMirror;
+
+                CodeMirror.defineMIME(mimeType, modeSpec);
+            }
+
+            updateCodeMirrorCSSMode("text/css");
+            updateCodeMirrorCSSMode("text/x-scss");
+        }
+
+        function fontFamilyNamesCallback(error, fontFamilyNames)
+        {
+            if (error)
+                return;
+
+            WebInspector.CSSKeywordCompletions.addPropertyCompletionValues("font-family", fontFamilyNames);
+            WebInspector.CSSKeywordCompletions.addPropertyCompletionValues("font", fontFamilyNames);
+        }
+
+        if (window.CSSAgent) {
+            CSSAgent.getSupportedCSSProperties(propertyNamesCallback);
+
+            // COMPATIBILITY (iOS 9): CSS.getSupportedSystemFontFamilyNames did not exist.
+            if (CSSAgent.getSupportedSystemFontFamilyNames)
+                CSSAgent.getSupportedSystemFontFamilyNames(fontFamilyNamesCallback);
+        }
+    }
+
+    // Public
+
+    get values()
+    {
+        return this._values;
+    }
+
+    startsWith(prefix)
+    {
+        var firstIndex = this._firstIndexOfPrefix(prefix);
+        if (firstIndex === -1)
+            return [];
+
+        var results = [];
+        while (firstIndex < this._values.length && this._values[firstIndex].startsWith(prefix))
+            results.push(this._values[firstIndex++]);
+        return results;
+    }
+
+    firstStartsWith(prefix)
+    {
+        var foundIndex = this._firstIndexOfPrefix(prefix);
+        return (foundIndex === -1 ? "" : this._values[foundIndex]);
+    }
+
+    _firstIndexOfPrefix(prefix)
+    {
+        if (!this._values.length)
+            return -1;
+        if (!prefix)
+            return this._acceptEmptyPrefix ? 0 : -1;
+
+        var maxIndex = this._values.length - 1;
+        var minIndex = 0;
+        var foundIndex;
+
+        do {
+            var middleIndex = (maxIndex + minIndex) >> 1;
+            if (this._values[middleIndex].startsWith(prefix)) {
+                foundIndex = middleIndex;
+                break;
+            }
+            if (this._values[middleIndex] < prefix)
+                minIndex = middleIndex + 1;
+            else
+                maxIndex = middleIndex - 1;
+        } while (minIndex <= maxIndex);
+
+        if (foundIndex === undefined)
+            return -1;
+
+        while (foundIndex && this._values[foundIndex - 1].startsWith(prefix))
+            foundIndex--;
+
+        return foundIndex;
+    }
+
+    keySet()
+    {
+        if (!this._keySet)
+            this._keySet = this._values.keySet();
+        return this._keySet;
+    }
+
+    next(str, prefix)
+    {
+        return this._closest(str, prefix, 1);
+    }
+
+    previous(str, prefix)
+    {
+        return this._closest(str, prefix, -1);
+    }
+
+    _closest(str, prefix, shift)
+    {
+        if (!str)
+            return "";
+
+        var index = this._values.indexOf(str);
+        if (index === -1)
+            return "";
+
+        if (!prefix) {
+            index = (index + this._values.length + shift) % this._values.length;
+            return this._values[index];
+        }
+
+        var propertiesWithPrefix = this.startsWith(prefix);
+        var j = propertiesWithPrefix.indexOf(str);
+        j = (j + propertiesWithPrefix.length + shift) % propertiesWithPrefix.length;
+        return propertiesWithPrefix[j];
+    }
+
+    isShorthandPropertyName(shorthand)
+    {
+        return shorthand in this._longhands;
+    }
+
+    isLonghandPropertyName(longhand)
+    {
+        return longhand in this._shorthands;
+    }
+
+    longhandsForShorthand(shorthand)
+    {
+        return this._longhands[shorthand] || [];
+    }
+
+    shorthandsForLonghand(longhand)
+    {
+        return this._shorthands[longhand] || [];
+    }
+
+    isValidPropertyName(name)
+    {
+        return this._values.includes(name);
+    }
+
+    propertyRequiresWebkitPrefix(name)
+    {
+        return this._values.includes("-webkit-" + name) && !this._values.includes(name);
+    }
+
+    getClosestPropertyName(name)
+    {
+        var bestMatches = [{distance: Infinity, name: null}];
+
+        for (var property of this._values) {
+            var distance = name.levenshteinDistance(property);
+
+            if (distance < bestMatches[0].distance)
+                bestMatches = [{distance, name: property}];
+            else if (distance === bestMatches[0].distance)
+                bestMatches.push({distance, name: property});
+        }
+
+        return bestMatches.length < 3 ? bestMatches[0].name : false;
+    }
+};
+
+WebInspector.CSSCompletions.cssNameCompletions = null;
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js b/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js
new file mode 100644
index 000000000..765d3fa0a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js
@@ -0,0 +1,1013 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSKeywordCompletions = {};
+
+WebInspector.CSSKeywordCompletions.forProperty = function(propertyName)
+{
+    let acceptedKeywords = ["initial", "unset", "revert"];
+    let isNotPrefixed = propertyName.charAt(0) !== "-";
+
+    if (propertyName in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName]);
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._propertyKeywordMap)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._propertyKeywordMap["-webkit-" + propertyName]);
+
+    if (propertyName in WebInspector.CSSKeywordCompletions._colorAwareProperties)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions._colorAwareProperties)
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
+    else if (propertyName.endsWith("color"))
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSKeywordCompletions._colors);
+
+    // Only suggest "inherit" on inheritable properties even though it is valid on all properties.
+    if (propertyName in WebInspector.CSSKeywordCompletions.InheritedProperties)
+        acceptedKeywords.push("inherit");
+    else if (isNotPrefixed && ("-webkit-" + propertyName) in WebInspector.CSSKeywordCompletions.InheritedProperties)
+        acceptedKeywords.push("inherit");
+
+    if (acceptedKeywords.includes(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder) && WebInspector.CSSCompletions.cssNameCompletions) {
+        acceptedKeywords.remove(WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder);
+        acceptedKeywords = acceptedKeywords.concat(WebInspector.CSSCompletions.cssNameCompletions.values);
+    }
+
+    return new WebInspector.CSSCompletions(acceptedKeywords, true);
+};
+
+WebInspector.CSSKeywordCompletions.addCustomCompletions = function(properties)
+{
+    for (var property of properties) {
+        if (property.values)
+            WebInspector.CSSKeywordCompletions.addPropertyCompletionValues(property.name, property.values);
+    }
+};
+
+WebInspector.CSSKeywordCompletions.addPropertyCompletionValues = function(propertyName, newValues)
+{
+    var existingValues = WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName];
+    if (!existingValues) {
+        WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName] = newValues;
+        return;
+    }
+
+    var union = new Set;
+    for (var value of existingValues)
+        union.add(value);
+    for (var value of newValues)
+        union.add(value);
+
+    WebInspector.CSSKeywordCompletions._propertyKeywordMap[propertyName] = [...union.values()];
+};
+
+WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder = "__all-properties__";
+
+WebInspector.CSSKeywordCompletions.InheritedProperties = [
+    "azimuth", "border-collapse", "border-spacing", "caption-side", "clip-rule", "color", "color-interpolation",
+    "color-interpolation-filters", "color-rendering", "cursor", "direction", "elevation", "empty-cells", "fill",
+    "fill-opacity", "fill-rule", "font", "font-family", "font-size", "font-style", "font-variant", "font-weight",
+    "glyph-orientation-horizontal", "glyph-orientation-vertical", "hanging-punctuation", "image-rendering", "kerning", "letter-spacing",
+    "line-height", "list-style", "list-style-image", "list-style-position", "list-style-type", "marker", "marker-end",
+    "marker-mid", "marker-start", "orphans", "pitch", "pitch-range", "pointer-events", "quotes", "resize", "richness",
+    "shape-rendering", "speak", "speak-header", "speak-numeral", "speak-punctuation", "speech-rate", "stress", "stroke",
+    "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity",
+    "stroke-width", "tab-size", "text-align", "text-anchor", "text-decoration", "text-indent", "text-rendering",
+    "text-shadow", "text-transform", "visibility", "voice-family", "volume", "white-space", "widows", "word-break",
+    "word-spacing", "word-wrap", "writing-mode", "-webkit-aspect-ratio", "-webkit-border-horizontal-spacing",
+    "-webkit-border-vertical-spacing", "-webkit-box-direction", "-webkit-color-correction", "font-feature-settings",
+    "-webkit-font-kerning", "-webkit-font-smoothing", "-webkit-font-variant-ligatures",
+    "-webkit-hyphenate-character", "-webkit-hyphenate-limit-after", "-webkit-hyphenate-limit-before",
+    "-webkit-hyphenate-limit-lines", "-webkit-hyphens", "-webkit-line-align", "-webkit-line-box-contain",
+    "-webkit-line-break", "-webkit-line-grid", "-webkit-line-snap", "-webkit-locale", "-webkit-nbsp-mode",
+    "-webkit-print-color-adjust", "-webkit-rtl-ordering", "-webkit-text-combine", "-webkit-text-decorations-in-effect",
+    "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-emphasis-position", "-webkit-text-emphasis-style",
+    "-webkit-text-fill-color", "-webkit-text-orientation", "-webkit-text-security", "-webkit-text-size-adjust",
+    "-webkit-text-stroke", "-webkit-text-stroke-color", "-webkit-text-stroke-width", "-webkit-user-modify",
+    "-webkit-user-select", "-webkit-writing-mode", "-webkit-cursor-visibility", "image-orientation", "image-resolution",
+    "overflow-wrap", "-webkit-text-align-last", "-webkit-text-justify", "-webkit-ruby-position", "-webkit-text-decoration-line",
+    "font-synthesis",
+
+    // iOS Properties
+    "-webkit-overflow-scrolling", "-webkit-touch-callout", "-webkit-tap-highlight-color"
+].keySet();
+
+WebInspector.CSSKeywordCompletions._colors = [
+    "aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "orange", "purple", "red",
+    "silver", "teal", "white", "yellow", "transparent", "currentcolor", "grey", "aliceblue", "antiquewhite",
+    "aquamarine", "azure", "beige", "bisque", "blanchedalmond", "blueviolet", "brown", "burlywood", "cadetblue",
+    "chartreuse", "chocolate", "coral", "cornflowerblue", "cornsilk", "crimson", "cyan", "darkblue", "darkcyan",
+    "darkgoldenrod", "darkgray", "darkgreen", "darkgrey", "darkkhaki", "darkmagenta", "darkolivegreen", "darkorange",
+    "darkorchid", "darkred", "darksalmon", "darkseagreen", "darkslateblue", "darkslategray", "darkslategrey",
+    "darkturquoise", "darkviolet", "deeppink", "deepskyblue", "dimgray", "dimgrey", "dodgerblue", "firebrick",
+    "floralwhite", "forestgreen", "gainsboro", "ghostwhite", "gold", "goldenrod", "greenyellow", "honeydew", "hotpink",
+    "indianred", "indigo", "ivory", "khaki", "lavender", "lavenderblush", "lawngreen", "lemonchiffon", "lightblue",
+    "lightcoral", "lightcyan", "lightgoldenrodyellow", "lightgray", "lightgreen", "lightgrey", "lightpink",
+    "lightsalmon", "lightseagreen", "lightskyblue", "lightslategray", "lightslategrey", "lightsteelblue", "lightyellow",
+    "limegreen", "linen", "magenta", "mediumaquamarine", "mediumblue", "mediumorchid", "mediumpurple", "mediumseagreen",
+    "mediumslateblue", "mediumspringgreen", "mediumturquoise", "mediumvioletred", "midnightblue", "mintcream",
+    "mistyrose", "moccasin", "navajowhite", "oldlace", "olivedrab", "orangered", "orchid", "palegoldenrod", "palegreen",
+    "paleturquoise", "palevioletred", "papayawhip", "peachpuff", "peru", "pink", "plum", "powderblue", "rebeccapurple", "rosybrown",
+    "royalblue", "saddlebrown", "salmon", "sandybrown", "seagreen", "seashell", "sienna", "skyblue", "slateblue",
+    "slategray", "slategrey", "snow", "springgreen", "steelblue", "tan", "thistle", "tomato", "turquoise", "violet",
+    "wheat", "whitesmoke", "yellowgreen", "rgb()", "rgba()", "hsl()", "hsla()"
+];
+
+WebInspector.CSSKeywordCompletions._colorAwareProperties = [
+    "background", "background-color", "background-image", "border", "border-color", "border-top", "border-right", "border-bottom",
+    "border-left", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color", "box-shadow", "color",
+    "fill", "outline", "outline-color", "stroke", "text-line-through", "text-line-through-color", "text-overline", "text-overline-color",
+    "text-shadow", "text-underline", "text-underline-color", "-webkit-box-shadow", "-webkit-column-rule", "-webkit-column-rule-color",
+    "-webkit-text-emphasis", "-webkit-text-emphasis-color", "-webkit-text-fill-color", "-webkit-text-stroke", "-webkit-text-stroke-color",
+    "-webkit-text-decoration-color",
+
+    // iOS Properties
+    "-webkit-tap-highlight-color"
+].keySet();
+
+WebInspector.CSSKeywordCompletions._propertyKeywordMap = {
+    "table-layout": [
+        "auto", "fixed"
+    ],
+    "visibility": [
+        "hidden", "visible", "collapse"
+    ],
+    "text-underline": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "content": [
+        "list-item", "close-quote", "no-close-quote", "no-open-quote", "open-quote", "attr()", "counter()", "counters()", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "list-style-image": [
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "clear": [
+        "none", "left", "right", "both"
+    ],
+    "stroke-linejoin": [
+        "round", "miter", "bevel"
+    ],
+    "baseline-shift": [
+        "baseline", "sub", "super"
+    ],
+    "border-bottom-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "margin-top-collapse": [
+        "collapse", "separate", "discard"
+    ],
+    "-webkit-box-orient": [
+        "horizontal", "vertical", "inline-axis", "block-axis"
+    ],
+    "font-stretch": [
+        "normal", "wider", "narrower", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed",
+        "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"
+    ],
+    "-webkit-color-correction": [
+        "default", "srgb"
+    ],
+    "border-left-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-writing-mode": [
+        "lr", "rl", "tb", "lr-tb", "rl-tb", "tb-rl", "horizontal-tb", "vertical-rl", "vertical-lr", "horizontal-bt"
+    ],
+    "text-line-through-mode": [
+        "continuous", "skip-white-space"
+    ],
+    "text-overline-mode": [
+        "continuous", "skip-white-space"
+    ],
+    "text-underline-mode": [
+        "continuous", "skip-white-space"
+    ],
+    "text-line-through-style": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "text-overline-style": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "text-underline-style": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave"
+    ],
+    "border-collapse": [
+        "collapse", "separate"
+    ],
+    "border-top-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "outline-color": [
+        "invert", "-webkit-focus-ring-color"
+    ],
+    "outline-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double", "auto"
+    ],
+    "cursor": [
+        "none", "copy", "auto", "crosshair", "default", "pointer", "move", "vertical-text", "cell", "context-menu",
+        "alias", "progress", "no-drop", "not-allowed", "zoom-in", "zoom-out", "e-resize", "ne-resize",
+        "nw-resize", "n-resize", "se-resize", "sw-resize", "s-resize", "w-resize", "ew-resize", "ns-resize",
+        "nesw-resize", "nwse-resize", "col-resize", "row-resize", "text", "wait", "help", "all-scroll", "-webkit-grab",
+        "-webkit-zoom-in", "-webkit-zoom-out",
+        "-webkit-grabbing", "url()", "-webkit-image-set()"
+    ],
+    "border-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "size": [
+        "a3", "a4", "a5", "b4", "b5", "landscape", "ledger", "legal", "letter", "portrait"
+    ],
+    "background": [
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()",
+        "repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round",
+        "scroll", "fixed", "local",
+        "auto", "contain", "cover",
+        "top", "right", "left", "bottom", "center",
+        "border-box", "padding-box", "content-box"
+    ],
+    "background-image": [
+        "none", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "background-size": [
+        "auto", "contain", "cover"
+    ],
+    "background-attachment": [
+        "scroll", "fixed", "local"
+    ],
+    "background-repeat": [
+        "repeat", "repeat-x", "repeat-y", "no-repeat", "space", "round"
+    ],
+    "background-blend-mode": [
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"
+    ],
+    "background-position": [
+        "top", "right", "left", "bottom", "center"
+    ],
+    "background-origin": [
+        "border-box", "padding-box", "content-box"
+    ],
+    "background-clip": [
+        "border-box", "padding-box", "content-box"
+    ],
+    "direction": [
+        "ltr", "rtl"
+    ],
+    "enable-background": [
+        "accumulate", "new"
+    ],
+    "float": [
+        "none", "left", "right"
+    ],
+    "hanging-punctuation": [
+        "none", "first", "last", "allow-end", "force-end"
+    ],
+    "overflow-x": [
+        "hidden", "auto", "visible", "overlay", "scroll", "marquee"
+    ],
+    "overflow-y": [
+        "hidden", "auto", "visible", "overlay", "scroll", "marquee", "-webkit-paged-x", "-webkit-paged-y"
+    ],
+    "overflow": [
+        "hidden", "auto", "visible", "overlay", "scroll", "marquee", "-webkit-paged-x", "-webkit-paged-y"
+    ],
+    "margin-bottom-collapse": [
+        "collapse",  "separate", "discard"
+    ],
+    "-webkit-box-reflect": [
+        "none", "left", "right", "above", "below"
+    ],
+    "text-rendering": [
+        "auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision"
+    ],
+    "text-align": [
+        "-webkit-auto", "left", "right", "center", "justify", "-webkit-left", "-webkit-right", "-webkit-center", "-webkit-match-parent", "start", "end"
+    ],
+    "list-style-position": [
+        "outside", "inside"
+    ],
+    "margin-bottom": [
+        "auto"
+    ],
+    "color-interpolation": [
+        "linearrgb"
+    ],
+    "word-wrap": [
+        "normal", "break-word"
+    ],
+    "font-weight": [
+        "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
+    ],
+    "font-synthesis": [
+        "none", "weight", "style"
+    ],
+    "margin-before-collapse": [
+        "collapse", "separate", "discard"
+    ],
+    "text-overline-width": [
+        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "text-transform": [
+        "none", "capitalize", "uppercase", "lowercase"
+    ],
+    "border-right-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "border-left-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "font-style": [
+        "italic", "oblique", "normal"
+    ],
+    "speak": [
+        "none", "normal", "spell-out", "digits", "literal-punctuation", "no-punctuation"
+    ],
+    "text-line-through": [
+        "none", "dotted", "dashed", "solid", "double", "dot-dash", "dot-dot-dash", "wave", "continuous", "skip-white-space"
+    ],
+    "color-rendering": [
+        "auto", "optimizeSpeed", "optimizeQuality"
+    ],
+    "list-style-type": [
+        "none", "disc", "circle", "square", "decimal", "decimal-leading-zero", "arabic-indic", "binary", "bengali",
+        "cambodian", "khmer", "devanagari", "gujarati", "gurmukhi", "kannada", "lower-hexadecimal", "lao", "malayalam",
+        "mongolian", "myanmar", "octal", "oriya", "persian", "urdu", "telugu", "tibetan", "thai", "upper-hexadecimal",
+        "lower-roman", "upper-roman", "lower-greek", "lower-alpha", "lower-latin", "upper-alpha", "upper-latin", "afar",
+        "ethiopic-halehame-aa-et", "ethiopic-halehame-aa-er", "amharic", "ethiopic-halehame-am-et", "amharic-abegede",
+        "ethiopic-abegede-am-et", "cjk-earthly-branch", "cjk-heavenly-stem", "ethiopic", "ethiopic-halehame-gez",
+        "ethiopic-abegede", "ethiopic-abegede-gez", "hangul-consonant", "hangul", "lower-norwegian", "oromo",
+        "ethiopic-halehame-om-et", "sidama", "ethiopic-halehame-sid-et", "somali", "ethiopic-halehame-so-et", "tigre",
+        "ethiopic-halehame-tig", "tigrinya-er", "ethiopic-halehame-ti-er", "tigrinya-er-abegede",
+        "ethiopic-abegede-ti-er", "tigrinya-et", "ethiopic-halehame-ti-et", "tigrinya-et-abegede",
+        "ethiopic-abegede-ti-et", "upper-greek", "upper-norwegian", "asterisks", "footnotes", "hebrew", "armenian",
+        "lower-armenian", "upper-armenian", "georgian", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha",
+        "katakana-iroha"
+    ],
+    "-webkit-text-combine": [
+        "none", "horizontal"
+    ],
+    "outline": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "font": [
+        "caption", "icon", "menu", "message-box", "small-caption", "-webkit-mini-control", "-webkit-small-control",
+        "-webkit-control", "status-bar", "italic", "oblique", "small-caps", "normal", "bold", "bolder", "lighter",
+        "100", "200", "300", "400", "500", "600", "700", "800", "900", "xx-small", "x-small", "small", "medium",
+        "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger", "serif", "sans-serif", "cursive",
+        "fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-apple-system", "-apple-system-monospaced-numbers",
+        "-apple-system-headline", "-apple-system-body", "-apple-system-subheadline", "-apple-system-footnote",
+        "-apple-system-caption1", "-apple-system-caption2", "-apple-system-short-headline", "-apple-system-short-body",
+        "-apple-system-short-subheadline", "-apple-system-short-footnote", "-apple-system-short-caption1",
+        "-apple-system-tall-body", "-apple-system-title1", "-apple-system-title2", "-apple-system-title3"
+    ],
+    "dominant-baseline": [
+        "middle", "auto", "central", "text-before-edge", "text-after-edge", "ideographic", "alphabetic", "hanging",
+        "mathematical", "use-script", "no-change", "reset-size"
+    ],
+    "display": [
+        "none", "inline", "block", "list-item", "compact", "inline-block", "table", "inline-table",
+        "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-column-group",
+        "table-column", "table-cell", "table-caption", "-webkit-box", "-webkit-inline-box", "-wap-marquee",
+        "flex", "inline-flex", "-webkit-grid", "-webkit-inline-grid"
+    ],
+    "image-rendering": [
+        "auto", "optimizeSpeed", "optimizeQuality", "-webkit-crisp-edges", "-webkit-optimize-contrast", "crisp-edges", "pixelated"
+    ],
+    "alignment-baseline": [
+        "baseline", "middle", "auto", "before-edge", "after-edge", "central", "text-before-edge", "text-after-edge",
+        "ideographic", "alphabetic", "hanging", "mathematical"
+    ],
+    "outline-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "text-line-through-width": [
+        "normal", "medium", "auto", "thick", "thin"
+    ],
+    "box-align": [
+        "baseline", "center", "stretch", "start", "end"
+    ],
+    "box-shadow": [
+        "none"
+    ],
+    "text-shadow": [
+        "none"
+    ],
+    "-webkit-box-shadow": [
+        "none"
+    ],
+    "border-right-width": [
+        "medium", "thick", "thin"
+    ],
+    "border-top-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "line-height": [
+        "normal"
+    ],
+    "counter-increment": [
+        "none"
+    ],
+    "counter-reset": [
+        "none"
+    ],
+    "text-overflow": [
+        "clip", "ellipsis"
+    ],
+    "-webkit-box-direction": [
+        "normal", "reverse"
+    ],
+    "margin-after-collapse": [
+        "collapse", "separate", "discard"
+    ],
+    "break-after": [
+         "left", "right", "recto", "verso", "auto", "avoid", "page", "column", "region", "avoid-page", "avoid-column", "avoid-region"
+    ],
+    "break-before": [
+          "left", "right", "recto", "verso", "auto", "avoid", "page", "column", "region", "avoid-page", "avoid-column", "avoid-region"
+    ],
+    "break-inside": [
+          "auto", "avoid", "avoid-page", "avoid-column", "avoid-region"
+    ],
+    "page-break-after": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "page-break-before": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "page-break-inside": [
+        "auto", "avoid"
+    ],
+    "-webkit-column-break-after": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "-webkit-column-break-before": [
+        "left", "right", "auto", "always", "avoid"
+    ],
+    "-webkit-column-break-inside": [
+        "auto", "avoid"
+    ],
+    "-webkit-hyphens": [
+        "none", "auto", "manual"
+    ],
+    "border-image": [
+        "repeat", "stretch", "url()", "linear-gradient()", "radial-gradient()", "repeating-linear-gradient()", "repeating-radial-gradient()", "-webkit-canvas()", "-webkit-cross-fade()", "-webkit-image-set()"
+    ],
+    "border-image-repeat": [
+        "repeat", "stretch", "space", "round"
+    ],
+    "-webkit-mask-box-image-repeat": [
+        "repeat", "stretch", "space", "round"
+    ],
+    "position": [
+        "absolute", "fixed", "relative", "static", "-webkit-sticky"
+    ],
+    "font-family": [
+        "serif", "sans-serif", "cursive", "fantasy", "monospace", "-webkit-body", "-webkit-pictograph",
+        "-apple-system", "-apple-system-monospaced-numbers", "-apple-system-headline", "-apple-system-body",
+        "-apple-system-subheadline", "-apple-system-footnote", "-apple-system-caption1", "-apple-system-caption2",
+        "-apple-system-short-headline", "-apple-system-short-body", "-apple-system-short-subheadline",
+        "-apple-system-short-footnote", "-apple-system-short-caption1", "-apple-system-tall-body",
+        "-apple-system-title1", "-apple-system-title2", "-apple-system-title3"
+    ],
+    "text-overflow-mode": [
+        "clip", "ellipsis"
+    ],
+    "border-bottom-style": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "unicode-bidi": [
+        "normal", "bidi-override", "embed", "-webkit-plaintext", "-webkit-isolate", "-webkit-isolate-override"
+    ],
+    "clip-rule": [
+        "nonzero", "evenodd"
+    ],
+    "margin-left": [
+        "auto"
+    ],
+    "margin-top": [
+        "auto"
+    ],
+    "zoom": [
+        "normal", "document", "reset"
+    ],
+    "z-index": [
+        "auto"
+    ],
+    "width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+    ],
+    "height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+    ],
+    "max-width": [
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+    ],
+    "min-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+    ],
+    "max-height": [
+        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+    ],
+    "min-height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-logical-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-logical-height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-max-logical-width": [
+        "none", "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-min-logical-width": [
+        "intrinsic", "min-intrinsic", "-webkit-min-content", "-webkit-max-content", "-webkit-fill-available", "-webkit-fit-content", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-max-logical-height": [
+        "none", "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-min-logical-height": [
+        "intrinsic", "min-intrinsic", "calc()", "-webkit-calc()"
+    ],
+    "empty-cells": [
+        "hide", "show"
+    ],
+    "pointer-events": [
+        "none", "all", "auto", "visible", "visiblepainted", "visiblefill", "visiblestroke", "painted", "fill", "stroke"
+    ],
+    "letter-spacing": [
+        "normal", "calc()", "-webkit-calc()"
+    ],
+    "word-spacing": [
+        "normal", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-font-kerning": [
+        "auto", "normal", "none"
+    ],
+    "-webkit-font-smoothing": [
+        "none", "auto", "antialiased", "subpixel-antialiased"
+    ],
+    "border": [
+        "none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
+    ],
+    "font-size": [
+        "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger"
+    ],
+    "font-variant": [
+        "small-caps", "normal"
+    ],
+    "vertical-align": [
+        "baseline", "middle", "sub", "super", "text-top", "text-bottom", "top", "bottom", "-webkit-baseline-middle"
+    ],
+    "white-space": [
+        "normal", "nowrap", "pre", "pre-line", "pre-wrap"
+    ],
+    "word-break": [
+        "normal", "break-all", "break-word"
+    ],
+    "text-underline-width": [
+        "normal", "medium", "auto", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "text-indent": [
+        "-webkit-each-line", "-webkit-hanging"
+    ],
+    "-webkit-box-lines": [
+        "single", "multiple"
+    ],
+    "clip": [
+        "auto", "rect()"
+    ],
+    "clip-path": [
+        "none", "url()", "circle()", "ellipse()", "inset()", "polygon()", "margin-box", "border-box", "padding-box", "content-box"
+    ],
+    "-webkit-shape-outside": [
+        "none", "url()", "circle()", "ellipse()", "inset()", "polygon()", "margin-box", "border-box", "padding-box", "content-box"
+    ],
+    "orphans": [
+        "auto"
+    ],
+    "widows": [
+        "auto"
+    ],
+    "margin": [
+        "auto"
+    ],
+    "page": [
+        "auto"
+    ],
+    "perspective": [
+        "none"
+    ],
+    "perspective-origin": [
+        "none", "left", "right", "bottom", "top", "center"
+    ],
+    "-webkit-marquee-increment": [
+        "small", "large", "medium"
+    ],
+    "-webkit-marquee-direction": [
+        "left", "right", "auto", "reverse", "forwards", "backwards", "ahead", "up", "down"
+    ],
+    "-webkit-marquee-style": [
+        "none", "scroll", "slide", "alternate"
+    ],
+    "-webkit-marquee-repetition": [
+        "infinite"
+    ],
+    "-webkit-marquee-speed": [
+        "normal", "slow", "fast"
+    ],
+    "margin-right": [
+        "auto"
+    ],
+    "marquee-speed": [
+        "normal", "slow", "fast"
+    ],
+    "-webkit-text-emphasis": [
+        "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
+    ],
+    "-webkit-text-emphasis-style": [
+        "circle", "filled", "open", "dot", "double-circle", "triangle", "sesame"
+    ],
+    "-webkit-text-emphasis-position": [
+        "over", "under", "left", "right"
+    ],
+    "transform": [
+        "none",
+        "scale()", "scaleX()", "scaleY()", "scale3d()", "rotate()", "rotateX()", "rotateY()", "rotateZ()", "rotate3d()", "skew()", "skewX()", "skewY()",
+        "translate()", "translateX()", "translateY()", "translateZ()", "translate3d()", "matrix()", "matrix3d()", "perspective()"
+    ],
+    "transform-style": [
+        "flat", "preserve-3d"
+    ],
+    "-webkit-cursor-visibility": [
+        "auto", "auto-hide"
+    ],
+    "text-decoration": [
+        "none", "underline", "overline", "line-through", "blink"
+    ],
+    "-webkit-text-decorations-in-effect": [
+        "none", "underline", "overline", "line-through", "blink"
+    ],
+    "-webkit-text-decoration-line": [
+        "none", "underline", "overline", "line-through", "blink"
+    ],
+    "-webkit-text-decoration-style": [
+        "solid", "double", "dotted", "dashed", "wavy"
+    ],
+    "-webkit-text-decoration-skip": [
+        "auto", "none", "objects", "ink"
+    ],
+    "-webkit-text-underline-position": [
+        "auto", "alphabetic", "under"
+    ],
+    "image-resolution": [
+        "from-image", "snap"
+    ],
+    "-webkit-blend-mode": [
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "plus-darker", "plus-lighter", "hue", "saturation", "color", "luminosity",
+    ],
+    "mix-blend-mode": [
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "plus-darker", "plus-lighter", "hue", "saturation", "color", "luminosity",
+    ],
+    "mix": [
+        "auto",
+        "normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "plus-darker", "plus-lighter", "hue", "saturation", "color", "luminosity",
+        "clear", "copy", "destination", "source-over", "destination-over", "source-in", "destination-in", "source-out", "destination-out", "source-atop", "destination-atop", "xor"
+    ],
+    "geometry": [
+        "detached", "attached", "grid()"
+    ],
+    "overflow-wrap": [
+        "normal", "break-word"
+    ],
+    "transition": [
+        "none", "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()", "all", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
+    ],
+    "transition-timing-function": [
+        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
+    ],
+    "transition-property": [
+        "all", "none", WebInspector.CSSKeywordCompletions.AllPropertyNamesPlaceholder
+    ],
+    "-webkit-column-progression": [
+        "normal", "reverse"
+    ],
+    "-webkit-box-decoration-break": [
+        "slice", "clone"
+    ],
+    "align-content": [
+        "auto",
+        "baseline", "last-baseline",
+        "space-between", "space-around", "space-evenly", "stretch",
+        "center", "start", "end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "justify-content": [
+        "auto",
+        "baseline", "last-baseline", "space-between", "space-around", "space-evenly", "stretch",
+        "center", "start", "end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "align-items": [
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "align-self": [
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "justify-items": [
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "justify-self": [
+        "auto", "stretch",
+        "baseline", "last-baseline",
+        "center", "start", "end", "self-start", "self-end", "flex-start", "flex-end", "left", "right",
+        "true", "safe"
+    ],
+    "flex-direction": [
+        "row", "row-reverse", "column", "column-reverse"
+    ],
+    "flex-wrap": [
+        "nowrap", "wrap", "wrap-reverse"
+    ],
+    "flex-flow": [
+        "row", "row-reverse", "column", "column-reverse",
+        "nowrap", "wrap", "wrap-reverse"
+    ],
+    "flex": [
+        "none"
+    ],
+    "flex-basis": [
+        "auto"
+    ],
+    "-webkit-grid-after": [
+        "auto"
+    ],
+    "-webkit-grid-before": [
+        "auto"
+    ],
+    "-webkit-grid-end": [
+        "auto"
+    ],
+    "-webkit-grid-start": [
+        "auto"
+    ],
+    "-webkit-grid-auto-flow": [
+        "row", "column", "dense"
+    ],
+    "-webkit-grid-column": [
+        "auto"
+    ],
+    "-webkit-grid-row": [
+        "auto"
+    ],
+    "-webkit-grid-columns": [
+        "auto", "-webkit-max-content", "-webkit-min-content"
+    ],
+    "-webkit-grid-rows": [
+        "auto", "-webkit-max-content", "-webkit-min-content"
+    ],
+    "-webkit-ruby-position": [
+        "after", "before", "inter-character"
+    ],
+    "-webkit-text-align-last": [
+        "auto", "start", "end", "left", "right", "center", "justify"
+    ],
+    "-webkit-text-justify": [
+        "auto", "none", "inter-word", "inter-ideograph", "inter-cluster", "distribute", "kashida"
+    ],
+    "max-zoom": [
+        "auto"
+    ],
+    "min-zoom": [
+        "auto"
+    ],
+    "orientation": [
+        "auto", "portait", "landscape"
+    ],
+    "user-zoom": [
+        "zoom", "fixed"
+    ],
+    "-webkit-app-region": [
+        "drag", "no-drag"
+    ],
+    "-webkit-line-break": [
+        "auto", "loose", "normal", "strict", "after-white-space"
+    ],
+    "-webkit-background-composite": [
+        "clear", "copy", "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "xor", "plus-darker", "plus-lighter"
+    ],
+    "-webkit-mask-composite": [
+        "clear", "copy", "source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "xor", "plus-darker", "plus-lighter"
+    ],
+    "-webkit-animation-direction": [
+        "normal", "alternate", "reverse", "alternate-reverse"
+    ],
+    "-webkit-animation-fill-mode": [
+        "none", "forwards", "backwards", "both"
+    ],
+    "-webkit-animation-iteration-count": [
+        "infinite"
+    ],
+    "-webkit-animation-play-state": [
+        "paused", "running"
+    ],
+    "-webkit-animation-timing-function": [
+        "ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end", "steps()", "cubic-bezier()"
+    ],
+    "-webkit-column-span": [
+        "all", "none", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-region-break-after": [
+        "auto", "always", "avoid", "left", "right"
+    ],
+    "-webkit-region-break-before": [
+        "auto", "always", "avoid", "left", "right"
+    ],
+    "-webkit-region-break-inside": [
+        "auto", "avoid"
+    ],
+    "-webkit-region-overflow": [
+        "auto", "break"
+    ],
+    "-webkit-backface-visibility": [
+        "visible", "hidden"
+    ],
+    "resize": [
+        "none", "both", "horizontal", "vertical", "auto"
+    ],
+    "caption-side": [
+        "top", "bottom", "left", "right"
+    ],
+    "box-sizing": [
+        "border-box", "content-box"
+    ],
+    "-webkit-alt": [
+        "attr()"
+    ],
+    "-webkit-border-fit": [
+        "border", "lines"
+    ],
+    "-webkit-line-align": [
+        "none", "edges"
+    ],
+    "-webkit-line-snap": [
+        "none", "baseline", "contain"
+    ],
+    "-webkit-nbsp-mode": [
+        "normal", "space"
+    ],
+    "-webkit-print-color-adjust": [
+        "exact", "economy"
+    ],
+    "-webkit-rtl-ordering": [
+        "logical", "visual"
+    ],
+    "-webkit-text-security": [
+        "disc", "circle", "square", "none"
+    ],
+    "-webkit-user-drag": [
+        "auto", "none", "element"
+    ],
+    "-webkit-user-modify": [
+        "read-only", "read-write", "read-write-plaintext-only"
+    ],
+    "-webkit-text-stroke-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-border-start-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-border-end-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-border-before-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-border-after-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-column-rule-width": [
+        "medium", "thick", "thin", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-aspect-ratio": [
+        "auto", "from-dimensions", "from-intrinsic", "/"
+    ],
+    "filter": [
+        "none", "grayscale()", "sepia()", "saturate()", "hue-rotate()", "invert()", "opacity()", "brightness()", "contrast()", "blur()", "drop-shadow()", "custom()"
+    ],
+    "-webkit-backdrop-filter": [
+        "none", "grayscale()", "sepia()", "saturate()", "hue-rotate()", "invert()", "opacity()", "brightness()", "contrast()", "blur()", "drop-shadow()", "custom()"
+    ],
+    "-webkit-column-count": [
+        "auto", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-column-gap": [
+        "normal", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-column-axis": [
+        "horizontal", "vertical", "auto"
+    ],
+    "-webkit-column-width": [
+        "auto", "calc()", "-webkit-calc()"
+    ],
+    "-webkit-column-fill": [
+        "auto", "balance"
+    ],
+    "-webkit-hyphenate-character": [
+        "none"
+    ],
+    "-webkit-hyphenate-limit-after": [
+        "auto"
+    ],
+    "-webkit-hyphenate-limit-before": [
+        "auto"
+    ],
+    "-webkit-hyphenate-limit-lines": [
+        "no-limit"
+    ],
+    "-webkit-line-grid": [
+        "none"
+    ],
+    "-webkit-locale": [
+        "auto"
+    ],
+    "-webkit-text-orientation": [
+        "sideways", "sideways-right", "vertical-right", "upright"
+    ],
+    "-webkit-line-box-contain": [
+        "block", "inline", "font", "glyphs", "replaced", "inline-box", "none"
+    ],
+    "font-feature-settings": [
+        "normal"
+    ],
+    "-webkit-font-variant-ligatures": [
+        "normal", "common-ligatures", "no-common-ligatures", "discretionary-ligatures", "no-discretionary-ligatures", "historical-ligatures", "no-historical-ligatures"
+    ],
+    /*
+    "-webkit-appearance": [
+        "none", "checkbox", "radio", "push-button", "square-button", "button", "button-bevel", "default-button", "inner-spin-button", "listbox", "listitem", "media-enter-fullscreen-button", "media-exit-fullscreen-button", "media-fullscreen-volume-slider", "media-fullscreen-volume-slider-thumb", "media-mute-button", "media-play-button", "media-overlay-play-button", "media-seek-back-button", "media-seek-forward-button", "media-rewind-button", "media-return-to-realtime-button", "media-toggle-closed-captions-button", "media-slider", "media-sliderthumb", "media-volume-slider-container", "media-volume-slider", "media-volume-sliderthumb", "media-volume-slider-mute-button", "media-controls-background", "media-controls-fullscreen-background", "media-current-time-display", "media-time-remaining-display", "menulist", "menulist-button", "menulist-text", "menulist-textfield", "meter", "progress-bar", "progress-bar-value", "slider-horizontal", "slider-vertical", "sliderthumb-horizontal", "sliderthumb-vertical", "caret", "searchfield", "searchfield-decoration", "searchfield-results-decoration", "searchfield-results-button", "searchfield-cancel-button", "snapshotted-plugin-overlay", "textfield", "relevancy-level-indicator", "continuous-capacity-level-indicator", "discrete-capacity-level-indicator", "rating-level-indicator", "textarea", "attachment", "caps-lock-indicator"
+    ],
+    */
+    "-webkit-animation-trigger": [
+        "auto", "container-scroll()"
+    ],
+    "-webkit-scroll-snap-type": [
+        "none", "mandatory", "proximity"
+    ],
+    "-webkit-scroll-snap-points-x": [
+        "elements", "repeat()"
+    ],
+    "-webkit-scroll-snap-points-y": [
+        "elements", "repeat()"
+    ],
+    "-webkit-scroll-snap-destination": [
+        "none", "left", "right", "bottom", "top", "center"
+    ],
+    "-webkit-scroll-snap-coordinate": [
+        "none", "left", "right", "bottom", "top", "center"
+    ],
+
+    // iOS Properties
+    "-webkit-text-size-adjust": [
+        "none", "auto"
+    ],
+    "-webkit-touch-callout": [
+        "default", "none"
+    ],
+    "-webkit-overflow-scrolling": [
+        "auto", "touch"
+    ]
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSMedia.js b/Source/WebInspectorUI/UserInterface/Models/CSSMedia.js
new file mode 100644
index 000000000..ac2dee821
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSMedia.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSMedia = class CSSMedia extends WebInspector.Object
+{
+    constructor(type, text, sourceCodeLocation)
+    {
+        super();
+
+        console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
+
+        this._type = type || null;
+        this._text = text || "";
+        this._sourceCodeLocation = sourceCodeLocation || null;
+    }
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get text()
+    {
+        return this._text;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+};
+
+WebInspector.CSSMedia.Type = {
+    MediaRule: "css-media-type-media-rule",
+    ImportRule: "css-media-type-import-rule",
+    LinkedStyleSheet: "css-media-type-linked-stylesheet",
+    InlineStyleSheet: "css-media-type-inline-stylesheet"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js b/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
new file mode 100644
index 000000000..d92b3c43e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js
@@ -0,0 +1,294 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSProperty = class CSSProperty extends WebInspector.Object
+{
+    constructor(index, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange)
+    {
+        super();
+
+        this._ownerStyle = null;
+        this._index = index;
+
+        this.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, true);
+    }
+
+    // Static
+
+    static isInheritedPropertyName(name)
+    {
+        console.assert(typeof name === "string");
+        if (name in WebInspector.CSSKeywordCompletions.InheritedProperties)
+            return true;
+        // Check if the name is a CSS variable.
+        return name.startsWith("--");
+    }
+
+    // Public
+
+    get ownerStyle()
+    {
+        return this._ownerStyle;
+    }
+
+    set ownerStyle(ownerStyle)
+    {
+        this._ownerStyle = ownerStyle || null;
+    }
+
+    get index()
+    {
+        return this._index;
+    }
+
+    set index(index)
+    {
+        this._index = index;
+    }
+
+    update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange, dontFireEvents)
+    {
+        text = text || "";
+        name = name || "";
+        value = value || "";
+        priority = priority || "";
+        enabled = enabled || false;
+        overridden = overridden || false;
+        implicit = implicit || false;
+        anonymous = anonymous || false;
+        valid = valid || false;
+
+        var changed = false;
+
+        if (!dontFireEvents) {
+            changed = this._name !== name || this._value !== value || this._priority !== priority ||
+                this._enabled !== enabled || this._implicit !== implicit || this._anonymous !== anonymous || this._valid !== valid;
+        }
+
+        // Use the setter for overridden if we want to fire events since the
+        // OverriddenStatusChanged event coalesces changes before it fires.
+        if (!dontFireEvents)
+            this.overridden = overridden;
+        else
+            this._overridden = overridden;
+
+        this._text = text;
+        this._name = name;
+        this._value = value;
+        this._priority = priority;
+        this._enabled = enabled;
+        this._implicit = implicit;
+        this._anonymous = anonymous;
+        this._inherited = WebInspector.CSSProperty.isInheritedPropertyName(name);
+        this._valid = valid;
+        this._styleSheetTextRange = styleSheetTextRange || null;
+
+        this._relatedShorthandProperty = null;
+        this._relatedLonghandProperties = [];
+
+        // Clear computed properties.
+        delete this._styleDeclarationTextRange;
+        delete this._canonicalName;
+        delete this._hasOtherVendorNameOrKeyword;
+
+        if (changed)
+            this.dispatchEventToListeners(WebInspector.CSSProperty.Event.Changed);
+    }
+
+    get synthesizedText()
+    {
+        var name = this.name;
+        if (!name)
+            return "";
+
+        var priority = this.priority;
+        return name + ": " + this.value.trim() + (priority ? " !" + priority : "") + ";";
+    }
+
+    get text()
+    {
+        return this._text || this.synthesizedText;
+    }
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get canonicalName()
+    {
+        if (this._canonicalName)
+            return this._canonicalName;
+
+        this._canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(this.name);
+
+        return this._canonicalName;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    get important()
+    {
+        return this.priority === "important";
+    }
+
+    get priority()
+    {
+        return this._priority;
+    }
+
+    get enabled()
+    {
+        return this._enabled && this._ownerStyle && (!isNaN(this._index) || this._ownerStyle.type === WebInspector.CSSStyleDeclaration.Type.Computed);
+    }
+
+    get overridden()
+    {
+        return this._overridden;
+    }
+
+    set overridden(overridden)
+    {
+        overridden = overridden || false;
+
+        if (this._overridden === overridden)
+            return;
+
+        var previousOverridden = this._overridden;
+
+        this._overridden = overridden;
+
+        if (this._overriddenStatusChangedTimeout)
+            return;
+
+        function delayed()
+        {
+            delete this._overriddenStatusChangedTimeout;
+
+            if (this._overridden === previousOverridden)
+                return;
+
+            this.dispatchEventToListeners(WebInspector.CSSProperty.Event.OverriddenStatusChanged);
+        }
+
+        this._overriddenStatusChangedTimeout = setTimeout(delayed.bind(this), 0);
+    }
+
+    get implicit()
+    {
+        return this._implicit;
+    }
+
+    get anonymous()
+    {
+        return this._anonymous;
+    }
+
+    get inherited()
+    {
+        return this._inherited;
+    }
+
+    get valid()
+    {
+        return this._valid;
+    }
+
+    get styleSheetTextRange()
+    {
+        return this._styleSheetTextRange;
+    }
+
+    get styleDeclarationTextRange()
+    {
+        if ("_styleDeclarationTextRange" in this)
+            return this._styleDeclarationTextRange;
+
+        if (!this._ownerStyle || !this._styleSheetTextRange)
+            return null;
+
+        var styleTextRange = this._ownerStyle.styleSheetTextRange;
+        if (!styleTextRange)
+            return null;
+
+        var startLine = this._styleSheetTextRange.startLine - styleTextRange.startLine;
+        var endLine = this._styleSheetTextRange.endLine - styleTextRange.startLine;
+
+        var startColumn = this._styleSheetTextRange.startColumn;
+        if (!startLine)
+            startColumn -= styleTextRange.startColumn;
+
+        var endColumn = this._styleSheetTextRange.endColumn;
+        if (!endLine)
+            endColumn -= styleTextRange.startColumn;
+
+        this._styleDeclarationTextRange = new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+
+        return this._styleDeclarationTextRange;
+    }
+
+    get relatedShorthandProperty()
+    {
+        return this._relatedShorthandProperty;
+    }
+
+    set relatedShorthandProperty(property)
+    {
+        this._relatedShorthandProperty = property || null;
+    }
+
+    get relatedLonghandProperties()
+    {
+        return this._relatedLonghandProperties;
+    }
+
+    addRelatedLonghandProperty(property)
+    {
+        this._relatedLonghandProperties.push(property);
+    }
+
+    clearRelatedLonghandProperties(property)
+    {
+        this._relatedLonghandProperties = [];
+    }
+
+    hasOtherVendorNameOrKeyword()
+    {
+        if ("_hasOtherVendorNameOrKeyword" in this)
+            return this._hasOtherVendorNameOrKeyword;
+
+        this._hasOtherVendorNameOrKeyword = WebInspector.cssStyleManager.propertyNameHasOtherVendorPrefix(this.name) || WebInspector.cssStyleManager.propertyValueHasOtherVendorKeyword(this.value);
+
+        return this._hasOtherVendorNameOrKeyword;
+    }
+};
+
+WebInspector.CSSProperty.Event = {
+    Changed: "css-property-changed",
+    OverriddenStatusChanged: "css-property-overridden-status-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSRule.js b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
new file mode 100644
index 000000000..4a5d9e4a2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSRule.js
@@ -0,0 +1,249 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSRule = class CSSRule extends WebInspector.Object
+{
+    constructor(nodeStyles, ownerStyleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList)
+    {
+        super();
+
+        console.assert(nodeStyles);
+        this._nodeStyles = nodeStyles;
+
+        this._ownerStyleSheet = ownerStyleSheet || null;
+        this._id = id || null;
+        this._type = type || null;
+
+        this.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, true);
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get ownerStyleSheet()
+    {
+        return this._ownerStyleSheet;
+    }
+
+    get editable()
+    {
+        return !!this._id && (this._type === WebInspector.CSSStyleSheet.Type.Author || this._type === WebInspector.CSSStyleSheet.Type.Inspector);
+    }
+
+    update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList, dontFireEvents)
+    {
+        sourceCodeLocation = sourceCodeLocation || null;
+        selectorText = selectorText || "";
+        selectors = selectors || [];
+        matchedSelectorIndices = matchedSelectorIndices || [];
+        style = style || null;
+        mediaList = mediaList || [];
+
+        var changed = false;
+        if (!dontFireEvents) {
+            changed = this._selectorText !== selectorText || !Object.shallowEqual(this._selectors, selectors) ||
+                !Object.shallowEqual(this._matchedSelectorIndices, matchedSelectorIndices) || this._style !== style ||
+                !!this._sourceCodeLocation !== !!sourceCodeLocation || this._mediaList.length !== mediaList.length;
+            // FIXME: Look for differences in the media list arrays.
+        }
+
+        if (this._style)
+            this._style.ownerRule = null;
+
+        this._sourceCodeLocation = sourceCodeLocation;
+        this._selectorText = selectorText;
+        this._selectors = selectors;
+        this._matchedSelectorIndices = matchedSelectorIndices;
+        this._mostSpecificSelector = null;
+        this._style = style;
+        this._mediaList = mediaList;
+
+        this._matchedSelectors = null;
+        this._matchedSelectorText = null;
+
+        if (this._style)
+            this._style.ownerRule = this;
+
+        if (changed)
+            this.dispatchEventToListeners(WebInspector.CSSRule.Event.Changed);
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    get selectorText()
+    {
+        return this._selectorText;
+    }
+
+    set selectorText(selectorText)
+    {
+        console.assert(this.editable);
+        if (!this.editable)
+            return;
+
+        if (this._selectorText === selectorText) {
+            this._selectorResolved(true);
+            return;
+        }
+
+        this._nodeStyles.changeRuleSelector(this, selectorText).then(this._selectorResolved.bind(this), this._selectorRejected.bind(this));
+    }
+
+    get selectors()
+    {
+        return this._selectors;
+    }
+
+    get matchedSelectorIndices()
+    {
+        return this._matchedSelectorIndices;
+    }
+
+    get matchedSelectors()
+    {
+        if (this._matchedSelectors)
+            return this._matchedSelectors;
+
+        this._matchedSelectors = this._selectors.filter(function(element, index) {
+            return this._matchedSelectorIndices.includes(index);
+        }, this);
+
+        return this._matchedSelectors;
+    }
+
+    get matchedSelectorText()
+    {
+        if ("_matchedSelectorText" in this)
+            return this._matchedSelectorText;
+
+        this._matchedSelectorText = this.matchedSelectors.map(function(x) { return x.text; }).join(", ");
+
+        return this._matchedSelectorText;
+    }
+
+    get style()
+    {
+        return this._style;
+    }
+
+    get mediaList()
+    {
+        return this._mediaList;
+    }
+
+    get mediaText()
+    {
+        if (!this._mediaList.length)
+            return;
+
+        let mediaText = "";
+        for (let media of this._mediaList)
+            mediaText += media.text;
+
+        return mediaText;
+    }
+
+    isEqualTo(rule)
+    {
+        if (!rule)
+            return false;
+
+        return Object.shallowEqual(this._id, rule.id);
+    }
+
+    get mostSpecificSelector()
+    {
+        if (!this._mostSpecificSelector)
+            this._mostSpecificSelector = this._determineMostSpecificSelector();
+
+        return this._mostSpecificSelector;
+    }
+
+    selectorIsGreater(otherSelector)
+    {
+        var mostSpecificSelector = this.mostSpecificSelector;
+
+        if (!mostSpecificSelector)
+            return false;
+
+        return mostSpecificSelector.isGreaterThan(otherSelector);
+    }
+
+    // Protected
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    }
+
+    // Private
+
+    _determineMostSpecificSelector()
+    {
+        if (!this._selectors || !this._selectors.length)
+            return null;
+
+        var selectors = this.matchedSelectors;
+
+        if (!selectors.length)
+            selectors = this._selectors;
+
+        var specificSelector = selectors[0];
+
+        for (var selector of selectors) {
+            if (selector.isGreaterThan(specificSelector))
+                specificSelector = selector;
+        }
+
+        return specificSelector;
+    }
+
+    _selectorRejected(error)
+    {
+        this.dispatchEventToListeners(WebInspector.CSSRule.Event.SelectorChanged, {valid: !error});
+    }
+
+    _selectorResolved(rulePayload)
+    {
+        this.dispatchEventToListeners(WebInspector.CSSRule.Event.SelectorChanged, {valid: !!rulePayload});
+    }
+};
+
+WebInspector.CSSRule.Event = {
+    Changed: "css-rule-changed",
+    SelectorChanged: "css-rule-invalid-selector"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSSelector.js b/Source/WebInspectorUI/UserInterface/Models/CSSSelector.js
new file mode 100644
index 000000000..7d01a26f4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSSelector.js
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSSelector = class CSSSelector extends WebInspector.Object
+{
+    constructor(text, specificity, dynamic)
+    {
+        super();
+
+        console.assert(text);
+
+        this._text = text;
+        this._specificity = specificity || null;
+        this._dynamic = dynamic || false;
+    }
+
+    // Public
+
+    get text()
+    {
+        return this._text;
+    }
+
+    get specificity()
+    {
+        return this._specificity;
+    }
+
+    get dynamic()
+    {
+        return this._dynamic;
+    }
+
+    isGreaterThan(selector)
+    {
+        if (!selector || !selector.specificity)
+            return true;
+
+        for (var i = 0; i < this._specificity.length; ++i) {
+            if (this._specificity[i] === selector.specificity[i])
+                continue;
+
+            return this._specificity[i] > selector.specificity[i];
+        }
+
+        return false;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js b/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
new file mode 100644
index 000000000..f29b5ff66
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSStyleDeclaration.js
@@ -0,0 +1,363 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDeclaration = class CSSStyleDeclaration extends WebInspector.Object
+{
+    constructor(nodeStyles, ownerStyleSheet, id, type, node, inherited, text, properties, styleSheetTextRange)
+    {
+        super();
+
+        console.assert(nodeStyles);
+        this._nodeStyles = nodeStyles;
+
+        this._ownerRule = null;
+
+        this._ownerStyleSheet = ownerStyleSheet || null;
+        this._id = id || null;
+        this._type = type || null;
+        this._node = node || null;
+        this._inherited = inherited || false;
+
+        this._pendingProperties = [];
+        this._propertyNameMap = {};
+
+        this._initialText = text;
+        this._hasModifiedInitialText = false;
+
+        this.update(text, properties, styleSheetTextRange, true);
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get ownerStyleSheet()
+    {
+        return this._ownerStyleSheet;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get inherited()
+    {
+        return this._inherited;
+    }
+
+    get node()
+    {
+        return this._node;
+    }
+
+    get editable()
+    {
+        if (!this._id)
+            return false;
+
+        if (this._type === WebInspector.CSSStyleDeclaration.Type.Rule)
+            return this._ownerRule && this._ownerRule.editable;
+
+        if (this._type === WebInspector.CSSStyleDeclaration.Type.Inline)
+            return !this._node.isInShadowTree();
+
+        return false;
+    }
+
+    update(text, properties, styleSheetTextRange, dontFireEvents)
+    {
+        text = text || "";
+        properties = properties || [];
+
+        var oldProperties = this._properties || [];
+        var oldText = this._text;
+
+        this._text = text;
+        this._properties = properties;
+        this._styleSheetTextRange = styleSheetTextRange;
+        this._propertyNameMap = {};
+
+        delete this._visibleProperties;
+
+        var editable = this.editable;
+
+        for (var i = 0; i < this._properties.length; ++i) {
+            var property = this._properties[i];
+            property.ownerStyle = this;
+
+            // Store the property in a map if we arn't editable. This
+            // allows for quick lookup for computed style. Editable
+            // styles don't use the map since they need to account for
+            // overridden properties.
+            if (!editable)
+                this._propertyNameMap[property.name] = property;
+            else {
+                // Remove from pendingProperties (if it was pending).
+                this._pendingProperties.remove(property);
+            }
+        }
+
+        var removedProperties = [];
+        for (var i = 0; i < oldProperties.length; ++i) {
+            var oldProperty = oldProperties[i];
+
+            if (!this._properties.includes(oldProperty)) {
+                // Clear the index, since it is no longer valid.
+                oldProperty.index = NaN;
+
+                removedProperties.push(oldProperty);
+
+                // Keep around old properties in pending in case they
+                // are needed again during editing.
+                if (editable)
+                    this._pendingProperties.push(oldProperty);
+            }
+        }
+
+        if (dontFireEvents)
+            return;
+
+        var addedProperties = [];
+        for (var i = 0; i < this._properties.length; ++i) {
+            if (!oldProperties.includes(this._properties[i]))
+                addedProperties.push(this._properties[i]);
+        }
+
+        // Don't fire the event if there is text and it hasn't changed.
+        if (oldText && this._text && oldText === this._text) {
+            // We shouldn't have any added or removed properties in this case.
+            console.assert(!addedProperties.length && !removedProperties.length);
+            if (!addedProperties.length && !removedProperties.length)
+                return;
+        }
+
+        function delayed()
+        {
+            this.dispatchEventToListeners(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, {addedProperties, removedProperties});
+        }
+
+        // Delay firing the PropertiesChanged event so DOMNodeStyles has a chance to mark overridden and associated properties.
+        setTimeout(delayed.bind(this), 0);
+    }
+
+    get ownerRule()
+    {
+        return this._ownerRule;
+    }
+
+    set ownerRule(rule)
+    {
+        this._ownerRule = rule || null;
+    }
+
+    get text()
+    {
+        return this._text;
+    }
+
+    set text(text)
+    {
+        if (this._text === text)
+            return;
+
+        let trimmedText = text.trim();
+        if (this._text === trimmedText)
+            return;
+
+        if (!trimmedText.length || this._type === WebInspector.CSSStyleDeclaration.Type.Inline)
+            text = trimmedText;
+
+        let modified = text !== this._initialText;
+        if (modified !== this._hasModifiedInitialText) {
+            this._hasModifiedInitialText = modified;
+            this.dispatchEventToListeners(WebInspector.CSSStyleDeclaration.Event.InitialTextModified);
+        }
+
+        this._nodeStyles.changeStyleText(this, text);
+    }
+
+    resetText()
+    {
+        this.text = this._initialText;
+    }
+
+    get modified()
+    {
+        return this._hasModifiedInitialText;
+    }
+
+    get properties()
+    {
+        return this._properties;
+    }
+
+    get visibleProperties()
+    {
+        if (this._visibleProperties)
+            return this._visibleProperties;
+
+        this._visibleProperties = this._properties.filter(function(property) {
+            return !!property.styleDeclarationTextRange;
+        });
+
+        return this._visibleProperties;
+    }
+
+    get pendingProperties()
+    {
+        return this._pendingProperties;
+    }
+
+    get styleSheetTextRange()
+    {
+        return this._styleSheetTextRange;
+    }
+
+    get mediaList()
+    {
+        if (this._ownerRule)
+            return this._ownerRule.mediaList;
+        return [];
+    }
+
+    get selectorText()
+    {
+        if (this._ownerRule)
+            return this._ownerRule.selectorText;
+        return this._node.appropriateSelectorFor(true);
+    }
+
+    propertyForName(name, dontCreateIfMissing)
+    {
+        console.assert(name);
+        if (!name)
+            return null;
+
+        if (!this.editable)
+            return this._propertyNameMap[name] || null;
+
+        // Editable styles don't use the map since they need to
+        // account for overridden properties.
+
+        function findMatch(properties)
+        {
+            for (var i = 0; i < properties.length; ++i) {
+                var property = properties[i];
+                if (property.canonicalName !== name && property.name !== name)
+                    continue;
+                if (bestMatchProperty && !bestMatchProperty.overridden && property.overridden)
+                    continue;
+                bestMatchProperty = property;
+            }
+        }
+
+        var bestMatchProperty = null;
+
+        findMatch(this._properties);
+
+        if (bestMatchProperty)
+            return bestMatchProperty;
+
+        if (dontCreateIfMissing || !this.editable)
+            return null;
+
+        findMatch(this._pendingProperties, true);
+
+        if (bestMatchProperty)
+            return bestMatchProperty;
+
+        var newProperty = new WebInspector.CSSProperty(NaN, null, name);
+        newProperty.ownerStyle = this;
+
+        this._pendingProperties.push(newProperty);
+
+        return newProperty;
+    }
+
+    generateCSSRuleString()
+    {
+        // FIXME: <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+        const indentation = "    ";
+        let styleText = "";
+        let mediaList = this.mediaList;
+        let mediaQueriesCount = mediaList.length;
+        for (let i = mediaQueriesCount - 1; i >= 0; --i)
+            styleText += indentation.repeat(mediaQueriesCount - i - 1) + "@media " + mediaList[i].text + " {\n";
+
+        styleText += indentation.repeat(mediaQueriesCount) + this.selectorText + " {\n";
+
+        for (let property of this._properties) {
+            if (property.anonymous)
+                continue;
+
+            styleText += indentation.repeat(mediaQueriesCount + 1) + property.text.trim();
+
+            if (!styleText.endsWith(";"))
+                styleText += ";";
+
+            styleText += "\n";
+        }
+
+        for (let i = mediaQueriesCount; i > 0; --i)
+            styleText += indentation.repeat(i) + "}\n";
+
+        styleText += "}";
+
+        return styleText;
+    }
+
+    isInspectorRule()
+    {
+        return this._ownerRule && this._ownerRule.type === WebInspector.CSSStyleSheet.Type.Inspector;
+    }
+
+    hasProperties()
+    {
+        return !!this._properties.length;
+    }
+
+    // Protected
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    }
+};
+
+WebInspector.CSSStyleDeclaration.Event = {
+    PropertiesChanged: "css-style-declaration-properties-changed",
+    InitialTextModified: "css-style-declaration-initial-text-modified"
+};
+
+WebInspector.CSSStyleDeclaration.Type = {
+    Rule: "css-style-declaration-type-rule",
+    Inline: "css-style-declaration-type-inline",
+    Attribute: "css-style-declaration-type-attribute",
+    Computed: "css-style-declaration-type-computed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CSSStyleSheet.js b/Source/WebInspectorUI/UserInterface/Models/CSSStyleSheet.js
new file mode 100644
index 000000000..4a64fe43b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CSSStyleSheet.js
@@ -0,0 +1,226 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleSheet = class CSSStyleSheet extends WebInspector.SourceCode
+{
+    constructor(id)
+    {
+        super();
+
+        console.assert(id);
+
+        this._id = id || null;
+        this._url = null;
+        this._parentFrame = null;
+        this._origin = null;
+        this._startLineNumber = 0;
+        this._startColumnNumber = 0;
+
+        this._inlineStyleAttribute = false;
+        this._inlineStyleTag = false;
+
+        this._hasInfo = false;
+    }
+
+    // Static
+
+    static resetUniqueDisplayNameNumbers()
+    {
+        WebInspector.CSSStyleSheet._nextUniqueDisplayNameNumber = 1;
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get parentFrame()
+    {
+        return this._parentFrame;
+    }
+
+    get origin()
+    {
+        return this._origin;
+    }
+
+    get url()
+    {
+        return this._url;
+    }
+
+    get urlComponents()
+    {
+        if (!this._urlComponents)
+            this._urlComponents = parseURL(this._url);
+        return this._urlComponents;
+    }
+
+    get mimeType()
+    {
+        return "text/css";
+    }
+
+    get displayName()
+    {
+        if (this._url)
+            return WebInspector.displayNameForURL(this._url, this.urlComponents);
+
+        // Assign a unique number to the StyleSheet object so it will stay the same.
+        if (!this._uniqueDisplayNameNumber)
+            this._uniqueDisplayNameNumber = this.constructor._nextUniqueDisplayNameNumber++;
+
+        return WebInspector.UIString("Anonymous StyleSheet %d").format(this._uniqueDisplayNameNumber);
+    }
+
+    get startLineNumber()
+    {
+        return this._startLineNumber;
+    }
+
+    get startColumnNumber()
+    {
+        return this._startColumnNumber;
+    }
+
+    hasInfo()
+    {
+        return this._hasInfo;
+    }
+
+    isInspectorStyleSheet()
+    {
+        return this._origin === WebInspector.CSSStyleSheet.Type.Inspector;
+    }
+
+    isInlineStyleTag()
+    {
+        return this._inlineStyleTag;
+    }
+
+    isInlineStyleAttributeStyleSheet()
+    {
+        return this._inlineStyleAttribute;
+    }
+
+    markAsInlineStyleAttributeStyleSheet()
+    {
+        this._inlineStyleAttribute = true;
+    }
+
+    offsetSourceCodeLocation(sourceCodeLocation)
+    {
+        if (!sourceCodeLocation)
+            return null;
+
+        if (!this._hasInfo)
+            return sourceCodeLocation;
+
+        let sourceCode = sourceCodeLocation.sourceCode;
+        let lineNumber = this._startLineNumber + sourceCodeLocation.lineNumber;
+        let columnNumber = this._startColumnNumber + sourceCodeLocation.columnNumber;
+        return sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
+    }
+
+    // Protected
+
+    updateInfo(url, parentFrame, origin, inlineStyle, startLineNumber, startColumnNumber)
+    {
+        this._hasInfo = true;
+
+        this._url = url || null;
+        this._urlComponents = undefined;
+
+        this._parentFrame = parentFrame || null;
+        this._origin = origin;
+
+        this._inlineStyleTag = inlineStyle;
+        this._startLineNumber = startLineNumber;
+        this._startColumnNumber = startColumnNumber;
+    }
+
+    get revisionForRequestedContent()
+    {
+        return this.currentRevision;
+    }
+
+    handleCurrentRevisionContentChange()
+    {
+        if (!this._id)
+            return;
+
+        function contentDidChange(error)
+        {
+            if (error)
+                return;
+
+            DOMAgent.markUndoableState();
+
+            this.dispatchEventToListeners(WebInspector.CSSStyleSheet.Event.ContentDidChange);
+        }
+
+        this._ignoreNextContentDidChangeNotification = true;
+
+        CSSAgent.setStyleSheetText(this._id, this.currentRevision.content, contentDidChange.bind(this));
+    }
+
+    requestContentFromBackend()
+    {
+        if (!this._id) {
+            // There is no identifier to request content with. Reject the promise to cause the
+            // pending callbacks to get null content.
+            return Promise.reject(new Error("There is no identifier to request content with."));
+        }
+
+        return CSSAgent.getStyleSheetText(this._id);
+    }
+
+    noteContentDidChange()
+    {
+        if (this._ignoreNextContentDidChangeNotification) {
+            this._ignoreNextContentDidChangeNotification = false;
+            return false;
+        }
+
+        this.markContentAsStale();
+        this.dispatchEventToListeners(WebInspector.CSSStyleSheet.Event.ContentDidChange);
+        return true;
+    }
+};
+
+WebInspector.CSSStyleSheet._nextUniqueDisplayNameNumber = 1;
+
+WebInspector.CSSStyleSheet.Event = {
+    ContentDidChange: "stylesheet-content-did-change"
+};
+
+WebInspector.CSSStyleSheet.Type = {
+    Author: "css-stylesheet-type-author",
+    User: "css-stylesheet-type-user",
+    UserAgent: "css-stylesheet-type-user-agent",
+    Inspector: "css-stylesheet-type-inspector"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CallFrame.js b/Source/WebInspectorUI/UserInterface/Models/CallFrame.js
new file mode 100644
index 000000000..8f3080b5e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CallFrame.js
@@ -0,0 +1,166 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CallFrame = class CallFrame extends WebInspector.Object
+{
+    constructor(id, sourceCodeLocation, functionName, thisObject, scopeChain, nativeCode, programCode)
+    {
+        super();
+
+        console.assert(!sourceCodeLocation || sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
+        console.assert(!thisObject || thisObject instanceof WebInspector.RemoteObject);
+        console.assert(!scopeChain || scopeChain instanceof Array);
+
+        this._id = id || null;
+        this._sourceCodeLocation = sourceCodeLocation || null;
+        this._functionName = functionName || null;
+        this._thisObject = thisObject || null;
+        this._scopeChain = scopeChain || [];
+        this._nativeCode = nativeCode || false;
+        this._programCode = programCode || false;
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    get functionName()
+    {
+        return this._functionName;
+    }
+
+    get nativeCode()
+    {
+        return this._nativeCode;
+    }
+
+    get programCode()
+    {
+        return this._programCode;
+    }
+
+    get thisObject()
+    {
+        return this._thisObject;
+    }
+
+    get scopeChain()
+    {
+        return this._scopeChain;
+    }
+
+    saveIdentityToCookie()
+    {
+        // Do nothing. The call frame is torn down when the inspector closes, and
+        // we shouldn't restore call frame content views across debugger pauses.
+    }
+
+    collectScopeChainVariableNames(callback)
+    {
+        var result = {this: true, __proto__: null};
+
+        var pendingRequests = this._scopeChain.length;
+
+        function propertiesCollected(properties)
+        {
+            for (var i = 0; properties && i < properties.length; ++i)
+                result[properties[i].name] = true;
+
+            if (--pendingRequests)
+                return;
+
+            callback(result);
+        }
+
+        for (var i = 0; i < this._scopeChain.length; ++i)
+            this._scopeChain[i].objects[0].deprecatedGetAllProperties(propertiesCollected);
+    }
+
+    // Static
+
+    static functionNameFromPayload(payload)
+    {
+        let functionName = payload.functionName;
+        if (functionName === "global code")
+            return WebInspector.UIString("Global Code");
+        if (functionName === "eval code")
+            return WebInspector.UIString("Eval Code");
+        if (functionName === "module code")
+            return WebInspector.UIString("Module Code");
+        return functionName;
+    }
+
+    static programCodeFromPayload(payload)
+    {
+        return payload.functionName.endsWith(" code");
+    }
+
+    static fromDebuggerPayload(payload, scopeChain, sourceCodeLocation)
+    {
+        let id = payload.callFrameId;
+        let thisObject = WebInspector.RemoteObject.fromPayload(payload.this);
+        let functionName = WebInspector.CallFrame.functionNameFromPayload(payload);
+        let nativeCode = false;
+        let programCode = WebInspector.CallFrame.programCodeFromPayload(payload);
+
+        return new WebInspector.CallFrame(id, sourceCodeLocation, functionName, thisObject, scopeChain, nativeCode, programCode);
+    }
+
+    static fromPayload(payload)
+    {
+        console.assert(payload);
+
+        let url = payload.url;
+        let nativeCode = false;
+        let sourceCodeLocation = null;
+        let functionName = WebInspector.CallFrame.functionNameFromPayload(payload);
+        let programCode = WebInspector.CallFrame.programCodeFromPayload(payload);
+
+        if (!url || url === "[native code]") {
+            nativeCode = true;
+            url = null;
+        } else {
+            let sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
+            if (!sourceCode)
+                sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
+
+            if (sourceCode) {
+                // The lineNumber is 1-based, but we expect 0-based.
+                let lineNumber = payload.lineNumber - 1;
+                sourceCodeLocation = sourceCode.createLazySourceCodeLocation(lineNumber, payload.columnNumber);
+            }
+        }
+
+        return new WebInspector.CallFrame(null, sourceCodeLocation, functionName, null, null, nativeCode, programCode);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CallingContextTree.js b/Source/WebInspectorUI/UserInterface/Models/CallingContextTree.js
new file mode 100644
index 000000000..7416a0950
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CallingContextTree.js
@@ -0,0 +1,293 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CallingContextTree = class CallingContextTree extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._root = new WebInspector.CCTNode(-1, -1, -1, "<root>", null);
+        this._totalNumberOfSamples = 0;
+    }
+
+    // Public
+
+    get totalNumberOfSamples() { return this._totalNumberOfSamples; }
+    
+    updateTreeWithStackTrace({timestamp, stackFrames})
+    {
+        this._totalNumberOfSamples++;
+        let node = this._root;
+        node.addTimestampAndExpressionLocation(timestamp, null);
+        for (let i = stackFrames.length; i--; ) {
+            let stackFrame = stackFrames[i];
+            node = node.findOrMakeChild(stackFrame);
+            node.addTimestampAndExpressionLocation(timestamp, stackFrame.expressionLocation || null);
+        }
+    }
+
+    toCPUProfilePayload(startTime, endTime)
+    {
+        let cpuProfile = {};
+        let roots = [];
+        let numSamplesInTimeRange = this._root.filteredTimestamps(startTime, endTime).length;
+
+        this._root.forEachChild((child) => {
+            if (child.hasStackTraceInTimeRange(startTime, endTime))
+                roots.push(child.toCPUProfileNode(numSamplesInTimeRange, startTime, endTime)); 
+        });
+
+        cpuProfile.rootNodes = roots;
+        return cpuProfile;
+    }
+
+    forEachNode(callback)
+    {
+        this._root.forEachNode(callback);
+    }
+
+    // Testing.
+
+    static __test_makeTreeFromProtocolMessageObject(messageObject)
+    {
+        let tree = new WebInspector.CallingContextTree;
+        let stackTraces = messageObject.params.samples.stackTraces;
+        for (let i = 0; i < stackTraces.length; i++)
+            tree.updateTreeWithStackTrace(stackTraces[i]);
+        return tree;
+    }
+
+    __test_matchesStackTrace(stackTrace)
+    {
+        // StackTrace should have top frame first in the array and bottom frame last.
+        // We don't look for a match that traces down the tree from the root; instead,
+        // we match by looking at all the leafs, and matching while walking up the tree
+        // towards the root. If we successfully make the walk, we've got a match that
+        // suffices for a particular test. A successful match doesn't mean we actually
+        // walk all the way up to the root; it just means we didn't fail while walking
+        // in the direction of the root.
+        let leaves = this.__test_buildLeafLinkedLists();
+
+        outer:
+        for (let node of leaves) {
+            for (let stackNode of stackTrace) {
+                for (let propertyName of Object.getOwnPropertyNames(stackNode)) {
+                    if (stackNode[propertyName] !== node[propertyName])
+                        continue outer;
+                }
+                node = node.parent;
+            }
+            return true;
+        }
+        return false;
+    }
+
+    __test_buildLeafLinkedLists()
+    {
+        let result = [];
+        let parent = null;
+        this._root.__test_buildLeafLinkedLists(parent, result);
+        return result;
+    }
+};
+
+WebInspector.CCTNode = class CCTNode extends WebInspector.Object
+{
+    constructor(sourceID, line, column, name, url)
+    {
+        super();
+
+        this._children = {};
+        this._sourceID = sourceID;
+        this._line = line;
+        this._column = column;
+        this._name = name;
+        this._url = url;
+        this._uid = WebInspector.CCTNode.__uid++;
+
+        this._timestamps = [];
+        this._expressionLocations = {}; // Keys are "line:column" strings. Values are arrays of timestamps in sorted order.
+    }
+
+    // Static and Private
+
+    static _hash(stackFrame)
+    {
+        return stackFrame.name + ":" + stackFrame.sourceID + ":" + stackFrame.line + ":" + stackFrame.column;
+    }
+
+    // Public
+
+    get sourceID() { return this._sourceID; }
+    get line() { return this._line; }
+    get column() { return this._column; }
+    get name() { return this._name; }
+    get uid() { return this._uid; }
+    get url() { return this._url; }
+
+    hasStackTraceInTimeRange(startTime, endTime)
+    {
+        console.assert(startTime <= endTime);
+        if (startTime > endTime)
+            return false;
+
+        let timestamps = this._timestamps;
+        let length = timestamps.length;
+        if (!length)
+            return false;
+
+        let index = timestamps.lowerBound(startTime);
+        if (index === length)
+            return false;
+        console.assert(startTime <= timestamps[index]);
+
+        let hasTimestampInRange = timestamps[index] <= endTime;
+        return hasTimestampInRange;
+    }
+
+    filteredTimestamps(startTime, endTime)
+    {
+        let index = this._timestamps.lowerBound(startTime); // The left-most (smallest) item that is >= startTime.
+        let result = [];
+        for (; index < this._timestamps.length; index++) {
+            let timestamp = this._timestamps[index];
+            console.assert(startTime <= timestamp);
+            if (!(timestamp <= endTime))
+                break;
+            result.push(timestamp);
+        }
+        return result;
+    }
+
+    hasChildren()
+    {
+        return !!Object.getOwnPropertyNames(this._children).length;
+    }
+
+    findOrMakeChild(stackFrame)
+    {
+        let hash = WebInspector.CCTNode._hash(stackFrame);
+        let node = this._children[hash];
+        if (node)
+            return node;
+        node = new WebInspector.CCTNode(stackFrame.sourceID, stackFrame.line, stackFrame.column, stackFrame.name, stackFrame.url);
+        this._children[hash] = node;
+        return node;
+    }
+
+    addTimestampAndExpressionLocation(timestamp, expressionLocation)
+    {
+        console.assert(!this._timestamps.length || this._timestamps.lastValue <= timestamp, "Expected timestamps to be added in sorted, increasing, order.");
+        this._timestamps.push(timestamp);
+
+        if (!expressionLocation)
+            return;
+
+        let {line, column} = expressionLocation;    
+        let hashCons = line + ":" + column;
+        let timestamps = this._expressionLocations[hashCons];
+        if (!timestamps) {
+            timestamps = [];
+            this._expressionLocations[hashCons] = timestamps;
+        }
+        console.assert(!timestamps.length || timestamps.lastValue <= timestamp, "Expected timestamps to be added in sorted, increasing, order.");
+        timestamps.push(timestamp);
+    }
+
+    forEachChild(callback)
+    {
+        for (let propertyName of Object.getOwnPropertyNames(this._children))
+            callback(this._children[propertyName]);
+    }
+
+    forEachNode(callback)
+    {
+        callback(this);
+        this.forEachChild(function(child) {
+            child.forEachNode(callback);
+        });
+    }
+
+    toCPUProfileNode(numSamples, startTime, endTime)
+    {
+        let children = [];
+        this.forEachChild((child) => {
+            if (child.hasStackTraceInTimeRange(startTime, endTime))
+                children.push(child.toCPUProfileNode(numSamples, startTime, endTime));
+        });
+        let cpuProfileNode = {
+            id: this._uid,
+            functionName: this._name,
+            url: this._url,
+            lineNumber: this._line,
+            columnNumber: this._column,
+            children: children
+        };
+
+        let timestamps = [];
+        let frameStartTime = Number.MAX_VALUE;
+        let frameEndTime = Number.MIN_VALUE;
+        for (let i = 0; i < this._timestamps.length; i++) {
+            let timestamp = this._timestamps[i];
+            if (startTime <= timestamp && timestamp <= endTime) {
+                timestamps.push(timestamp);
+                frameStartTime = Math.min(frameStartTime, timestamp);
+                frameEndTime = Math.max(frameEndTime, timestamp);
+            }
+        }
+
+        cpuProfileNode.callInfo = {
+            callCount: timestamps.length, // Totally not callCount, but oh well, this makes life easier because of field names.
+            startTime: frameStartTime,
+            endTime: frameEndTime,
+            totalTime: (timestamps.length / numSamples) * (endTime - startTime)
+        };
+
+        return cpuProfileNode;
+    }
+
+    // Testing.
+
+    __test_buildLeafLinkedLists(parent, result)
+    {
+        let linkedListNode = {
+            name: this._name,
+            url: this._url,
+            parent: parent
+        };
+        if (this.hasChildren()) {
+            this.forEachChild((child) => {
+                child.__test_buildLeafLinkedLists(linkedListNode, result);
+            });
+        } else {
+            // We're a leaf.
+            result.push(linkedListNode);
+        }
+    }
+};
+
+WebInspector.CCTNode.__uid = 0;
+
diff --git a/Source/WebInspectorUI/UserInterface/Models/CollectionEntry.js b/Source/WebInspectorUI/UserInterface/Models/CollectionEntry.js
new file mode 100644
index 000000000..799dad014
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CollectionEntry.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CollectionEntry = class CollectionEntry extends WebInspector.Object
+{
+    constructor(key, value)
+    {
+        super();
+
+        console.assert(value instanceof WebInspector.RemoteObject);
+        console.assert(!key || key instanceof WebInspector.RemoteObject);
+
+        this._key = key;
+        this._value = value;
+    }
+
+    // Static
+
+    // Runtime.CollectionEntry.
+    static fromPayload(payload)
+    {
+        if (payload.key)
+            payload.key = WebInspector.RemoteObject.fromPayload(payload.key);
+        if (payload.value)
+            payload.value = WebInspector.RemoteObject.fromPayload(payload.value);
+
+        return new WebInspector.CollectionEntry(payload.key, payload.value);
+    }
+
+    // Public
+
+    get key()
+    {
+        return this._key;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CollectionEntryPreview.js b/Source/WebInspectorUI/UserInterface/Models/CollectionEntryPreview.js
new file mode 100644
index 000000000..8e113c9fb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CollectionEntryPreview.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CollectionEntryPreview = class CollectionEntryPreview extends WebInspector.Object
+{
+    constructor(keyPreview, valuePreview)
+    {
+        super();
+
+        console.assert(valuePreview instanceof WebInspector.ObjectPreview);
+        console.assert(!keyPreview || keyPreview instanceof WebInspector.ObjectPreview);
+
+        this._key = keyPreview;
+        this._value = valuePreview;
+    }
+
+    // Static
+
+    // Runtime.EntryPreview.
+    static fromPayload(payload)
+    {
+        if (payload.key)
+            payload.key = WebInspector.ObjectPreview.fromPayload(payload.key);
+        if (payload.value)
+            payload.value = WebInspector.ObjectPreview.fromPayload(payload.value);
+
+        return new WebInspector.CollectionEntryPreview(payload.key, payload.value);
+    }
+
+    // Public
+
+    get keyPreview()
+    {
+        return this._key;
+    }
+
+    get valuePreview()
+    {
+        return this._value;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Color.js b/Source/WebInspectorUI/UserInterface/Models/Color.js
new file mode 100644
index 000000000..3755a4006
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Color.js
@@ -0,0 +1,752 @@
+/*
+ * Copyright (C) 2009, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Color = class Color
+{
+    constructor(format, components)
+    {
+        this.format = format;
+
+        if (format === WebInspector.Color.Format.HSL || format === WebInspector.Color.Format.HSLA)
+            this._hsla = components;
+        else
+            this._rgba = components;
+
+        this.valid = !components.some(isNaN);
+    }
+
+    // Static
+
+    static fromString(colorString)
+    {
+        let value = colorString.toLowerCase().replace(/%|\s+/g, "");
+        let transparentKeywords = ["transparent", "rgba(0,0,0,0)", "hsla(0,0,0,0)"];
+        if (transparentKeywords.includes(value)) {
+            let color = new WebInspector.Color(WebInspector.Color.Format.Keyword, [0, 0, 0, 0]);
+            color.keyword = "transparent";
+            color.original = colorString;
+            return color;
+        }
+
+        // Simple - #hex, rgb(), keyword, hsl()
+        let simple = /^(?:#([0-9a-f]{3,8})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
+        let match = colorString.match(simple);
+        if (match) {
+            if (match[1]) { // hex
+                let hex = match[1].toUpperCase();
+                let len = hex.length;
+                if (len === 3) {
+                    return new WebInspector.Color(WebInspector.Color.Format.ShortHEX, [
+                        parseInt(hex.charAt(0) + hex.charAt(0), 16),
+                        parseInt(hex.charAt(1) + hex.charAt(1), 16),
+                        parseInt(hex.charAt(2) + hex.charAt(2), 16),
+                        1
+                    ]);
+                } else if (len === 6) {
+                    return new WebInspector.Color(WebInspector.Color.Format.HEX, [
+                        parseInt(hex.substring(0, 2), 16),
+                        parseInt(hex.substring(2, 4), 16),
+                        parseInt(hex.substring(4, 6), 16),
+                        1
+                    ]);
+                } else if (len === 4) {
+                    return new WebInspector.Color(WebInspector.Color.Format.ShortHEXAlpha, [
+                        parseInt(hex.charAt(0) + hex.charAt(0), 16),
+                        parseInt(hex.charAt(1) + hex.charAt(1), 16),
+                        parseInt(hex.charAt(2) + hex.charAt(2), 16),
+                        parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255
+                    ]);
+                } else if (len === 8) {
+                    return new WebInspector.Color(WebInspector.Color.Format.HEXAlpha, [
+                        parseInt(hex.substring(0, 2), 16),
+                        parseInt(hex.substring(2, 4), 16),
+                        parseInt(hex.substring(4, 6), 16),
+                        parseInt(hex.substring(6, 8), 16) / 255
+                    ]);
+                } else
+                    return null;
+            } else if (match[2]) { // rgb
+                let rgb = match[2].split(/\s*,\s*/);
+                if (rgb.length !== 3)
+                    return null;
+                return new WebInspector.Color(WebInspector.Color.Format.RGB, [
+                    parseInt(rgb[0]),
+                    parseInt(rgb[1]),
+                    parseInt(rgb[2]),
+                    1
+                ]);
+            } else if (match[3]) { // keyword
+                let keyword = match[3].toLowerCase();
+                if (!WebInspector.Color.Keywords[keyword])
+                    return null;
+                let color = new WebInspector.Color(WebInspector.Color.Format.Keyword, WebInspector.Color.Keywords[keyword].concat(1));
+                color.keyword = keyword;
+                color.original = colorString;
+                return color;
+            } else if (match[4]) { // hsl
+                let hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
+                if (hsl.length !== 3)
+                    return null;
+                return new WebInspector.Color(WebInspector.Color.Format.HSL, [
+                    parseInt(hsl[0]),
+                    parseInt(hsl[1]),
+                    parseInt(hsl[2]),
+                    1
+                ]);
+            }
+        }
+
+        // Advanced - rgba(), hsla()
+        let advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/i;
+        match = colorString.match(advanced);
+        if (match) {
+            if (match[1]) { // rgba
+                let rgba = match[1].split(/\s*,\s*/);
+                if (rgba.length !== 4)
+                    return null;
+                return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
+                    parseInt(rgba[0]),
+                    parseInt(rgba[1]),
+                    parseInt(rgba[2]),
+                    Number.constrain(parseFloat(rgba[3]), 0, 1)
+                ]);
+            } else if (match[2]) { // hsla
+                let hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
+                if (hsla.length !== 4)
+                    return null;
+                return new WebInspector.Color(WebInspector.Color.Format.HSLA, [
+                    parseInt(hsla[0]),
+                    parseInt(hsla[1]),
+                    parseInt(hsla[2]),
+                    Number.constrain(parseFloat(hsla[3]), 0, 1)
+                ]);
+            }
+        }
+
+        return null;
+    }
+
+    static rgb2hsv(r, g, b)
+    {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+
+        let min = Math.min(Math.min(r, g), b);
+        let max = Math.max(Math.max(r, g), b);
+        let delta = max - min;
+
+        let h;
+        let s;
+        let v = max;
+
+        if (delta === 0)
+            h = 0;
+        else if (max === r)
+            h = (60 * ((g - b) / delta)) % 360;
+        else if (max === g)
+            h = 60 * ((b - r) / delta) + 120;
+        else if (max === b)
+            h = 60 * ((r - g) / delta) + 240;
+
+        if (h < 0)
+            h += 360;
+
+        // Saturation
+        if (max === 0)
+            s = 0;
+        else
+            s = 1 - (min / max);
+
+        return [h, s, v];
+    }
+
+    static hsv2rgb(h, s, v)
+    {
+        if (s === 0)
+            return [v, v, v];
+
+        h /= 60;
+        let i = Math.floor(h);
+        let data = [
+            v * (1 - s),
+            v * (1 - s * (h - i)),
+            v * (1 - s * (1 - (h - i)))
+        ];
+        let rgb;
+
+        switch (i) {
+        case 0:
+            rgb = [v, data[2], data[0]];
+            break;
+        case 1:
+            rgb = [data[1], v, data[0]];
+            break;
+        case 2:
+            rgb = [data[0], v, data[2]];
+            break;
+        case 3:
+            rgb = [data[0], data[1], v];
+            break;
+        case 4:
+            rgb = [data[2], data[0], v];
+            break;
+        default:
+            rgb = [v, data[0], data[1]];
+            break;
+        }
+
+        return rgb;
+    }
+
+
+    // Public
+
+    nextFormat(format)
+    {
+        format = format || this.format;
+
+        switch (format) {
+        case WebInspector.Color.Format.Original:
+            return this.simple ? WebInspector.Color.Format.RGB : WebInspector.Color.Format.RGBA;
+
+        case WebInspector.Color.Format.RGB:
+        case WebInspector.Color.Format.RGBA:
+            return this.simple ? WebInspector.Color.Format.HSL : WebInspector.Color.Format.HSLA;
+
+        case WebInspector.Color.Format.HSL:
+        case WebInspector.Color.Format.HSLA:
+            if (this.keyword)
+                return WebInspector.Color.Format.Keyword;
+            if (this.simple)
+                return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
+            return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
+
+        case WebInspector.Color.Format.ShortHEX:
+            return WebInspector.Color.Format.HEX;
+
+        case WebInspector.Color.Format.ShortHEXAlpha:
+            return WebInspector.Color.Format.HEXAlpha;
+
+        case WebInspector.Color.Format.HEX:
+        case WebInspector.Color.Format.HEXAlpha:
+            return WebInspector.Color.Format.Original;
+
+        case WebInspector.Color.Format.Keyword:
+            if (this.simple)
+                return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
+            return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
+
+        default:
+            console.error("Unknown color format.");
+            return null;
+        }
+    }
+
+    get alpha()
+    {
+        return this._rgba ? this._rgba[3] : this._hsla[3];
+    }
+
+    get simple()
+    {
+        return this.alpha === 1;
+    }
+
+    get rgb()
+    {
+        let rgb = this.rgba.slice();
+        rgb.pop();
+        return rgb;
+    }
+
+    get hsl()
+    {
+        let hsl = this.hsla.slice();
+        hsl.pop();
+        return hsl;
+    }
+
+    get rgba()
+    {
+        if (!this._rgba)
+            this._rgba = this._hslaToRGBA(this._hsla);
+        return this._rgba;
+    }
+
+    get hsla()
+    {
+        if (!this._hsla)
+            this._hsla = this._rgbaToHSLA(this.rgba);
+        return this._hsla;
+    }
+
+    copy()
+    {
+        switch (this.format) {
+        case WebInspector.Color.Format.RGB:
+        case WebInspector.Color.Format.HEX:
+        case WebInspector.Color.Format.ShortHEX:
+        case WebInspector.Color.Format.HEXAlpha:
+        case WebInspector.Color.Format.ShortHEXAlpha:
+        case WebInspector.Color.Format.Keyword:
+        case WebInspector.Color.Format.RGBA:
+            return new WebInspector.Color(this.format, this.rgba);
+        case WebInspector.Color.Format.HSL:
+        case WebInspector.Color.Format.HSLA:
+            return new WebInspector.Color(this.format, this.hsla);
+        }
+    }
+
+    toString(format)
+    {
+        if (!format)
+            format = this.format;
+
+        switch (format) {
+        case WebInspector.Color.Format.Original:
+            return this._toOriginalString();
+        case WebInspector.Color.Format.RGB:
+            return this._toRGBString();
+        case WebInspector.Color.Format.RGBA:
+            return this._toRGBAString();
+        case WebInspector.Color.Format.HSL:
+            return this._toHSLString();
+        case WebInspector.Color.Format.HSLA:
+            return this._toHSLAString();
+        case WebInspector.Color.Format.HEX:
+            return this._toHEXString();
+        case WebInspector.Color.Format.ShortHEX:
+            return this._toShortHEXString();
+        case WebInspector.Color.Format.HEXAlpha:
+            return this._toHEXAlphaString();
+        case WebInspector.Color.Format.ShortHEXAlpha:
+            return this._toShortHEXAlphaString();
+        case WebInspector.Color.Format.Keyword:
+            return this._toKeywordString();
+        }
+
+        throw "invalid color format";
+    }
+
+    isKeyword()
+    {
+        if (this.keyword)
+            return true;
+
+        if (!this.simple)
+            return Object.shallowEqual(this._rgba, [0, 0, 0, 0]) || Object.shallowEqual(this._hsla, [0, 0, 0, 0]);
+
+        let rgb = (this._rgba && this._rgba.slice(0, 3)) || this._hslToRGB(this._hsla);
+        return Object.keys(WebInspector.Color.Keywords).some(key => Object.shallowEqual(WebInspector.Color.Keywords[key], rgb));
+    }
+
+    canBeSerializedAsShortHEX()
+    {
+        let rgba = this.rgba || this._hslaToRGBA(this._hsla);
+
+        let r = this._componentToHexValue(rgba[0]);
+        if (r[0] !== r[1])
+            return false;
+
+        let g = this._componentToHexValue(rgba[1]);
+        if (g[0] !== g[1])
+            return false;
+
+        let b = this._componentToHexValue(rgba[2]);
+        if (b[0] !== b[1])
+            return false;
+
+        if (!this.simple) {
+            let a = this._componentToHexValue(Math.round(rgba[3] * 255));
+            if (a[0] !== a[1])
+                return false;
+        }
+
+        return true;
+    }
+
+    // Private
+
+    _toOriginalString()
+    {
+        return this.original || this._toKeywordString();
+    }
+
+    _toKeywordString()
+    {
+        if (this.keyword)
+            return this.keyword;
+
+        let rgba = this.rgba;
+        if (!this.simple) {
+            if (rgba[0] === 0 && rgba[1] === 0 && rgba[2] === 0 && rgba[3] === 0)
+                return "transparent";
+            return this._toRGBAString();
+        }
+
+        let keywords = WebInspector.Color.Keywords;
+        for (let keyword in keywords) {
+            if (!keywords.hasOwnProperty(keyword))
+                continue;
+
+            let keywordRGB = keywords[keyword];
+            if (keywordRGB[0] === rgba[0] && keywordRGB[1] === rgba[1] && keywordRGB[2] === rgba[2])
+                return keyword;
+        }
+
+        return this._toRGBString();
+    }
+
+    _toShortHEXString()
+    {
+        if (!this.simple)
+            return this._toRGBAString();
+
+        let rgba = this.rgba;
+        let r = this._componentToHexValue(rgba[0]);
+        let g = this._componentToHexValue(rgba[1]);
+        let b = this._componentToHexValue(rgba[2]);
+
+        if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1])
+            return "#" + r[0] + g[0] + b[0];
+        else
+            return "#" + r + g + b;
+    }
+
+    _toHEXString()
+    {
+        if (!this.simple)
+            return this._toRGBAString();
+
+        let rgba = this.rgba;
+        let r = this._componentToHexValue(rgba[0]);
+        let g = this._componentToHexValue(rgba[1]);
+        let b = this._componentToHexValue(rgba[2]);
+
+        return "#" + r + g + b;
+    }
+
+    _toShortHEXAlphaString()
+    {
+        let rgba = this.rgba;
+        let r = this._componentToHexValue(rgba[0]);
+        let g = this._componentToHexValue(rgba[1]);
+        let b = this._componentToHexValue(rgba[2]);
+        let a = this._componentToHexValue(Math.round(rgba[3] * 255));
+
+        if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1] && a[0] === a[1])
+            return "#" + r[0] + g[0] + b[0] + a[0];
+        else
+            return "#" + r + g + b + a;
+    }
+
+    _toHEXAlphaString()
+    {
+        let rgba = this.rgba;
+        let r = this._componentToHexValue(rgba[0]);
+        let g = this._componentToHexValue(rgba[1]);
+        let b = this._componentToHexValue(rgba[2]);
+        let a = this._componentToHexValue(Math.round(rgba[3] * 255));
+
+        return "#" + r + g + b + a;
+    }
+
+    _toRGBString()
+    {
+        if (!this.simple)
+            return this._toRGBAString();
+
+        let rgba = this.rgba.slice(0, -1);
+        return "rgb(" + rgba.join(", ") + ")";
+    }
+
+    _toRGBAString()
+    {
+        return "rgba(" + this.rgba.join(", ") + ")";
+    }
+
+    _toHSLString()
+    {
+        if (!this.simple)
+            return this._toHSLAString();
+
+        let hsla = this.hsla;
+        return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
+    }
+
+    _toHSLAString()
+    {
+        let hsla = this.hsla;
+        return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
+    }
+
+    _componentToNumber(value)
+    {
+        return Number.constrain(value, 0, 255);
+    }
+
+    _componentToHexValue(value)
+    {
+        let hex = this._componentToNumber(value).toString(16);
+        if (hex.length === 1)
+            hex = "0" + hex;
+        return hex;
+    }
+
+    _rgbToHSL(rgb)
+    {
+        let r = this._componentToNumber(rgb[0]) / 255;
+        let g = this._componentToNumber(rgb[1]) / 255;
+        let b = this._componentToNumber(rgb[2]) / 255;
+        let max = Math.max(r, g, b);
+        let min = Math.min(r, g, b);
+        let diff = max - min;
+        let add = max + min;
+
+        let h;
+        let s;
+        let l = 0.5 * add;
+
+        if (min === max)
+            h = 0;
+        else if (r === max)
+            h = ((60 * (g - b) / diff) + 360) % 360;
+        else if (g === max)
+            h = (60 * (b - r) / diff) + 120;
+        else
+            h = (60 * (r - g) / diff) + 240;
+
+        if (l === 0)
+            s = 0;
+        else if (l === 1)
+            s = 1;
+        else if (l <= 0.5)
+            s = diff / add;
+        else
+            s = diff / (2 - add);
+
+        return [
+            Math.round(h),
+            Math.round(s * 100),
+            Math.round(l * 100)
+        ];
+    }
+
+    _hslToRGB(hsl)
+    {
+        let h = parseFloat(hsl[0]) / 360;
+        let s = parseFloat(hsl[1]) / 100;
+        let l = parseFloat(hsl[2]) / 100;
+
+        h *= 6;
+        let sArray = [
+            l += s *= l < .5 ? l : 1 - l,
+            l - h % 1 * s * 2,
+            l -= s *= 2,
+            l,
+            l + h % 1 * s,
+            l + s
+        ];
+        return [
+            Math.round(sArray[ ~~h      % 6 ] * 255),
+            Math.round(sArray[ (h | 16) % 6 ] * 255),
+            Math.round(sArray[ (h | 8)  % 6 ] * 255)
+        ];
+    }
+
+    _rgbaToHSLA(rgba)
+    {
+        let hsl = this._rgbToHSL(rgba);
+        hsl.push(rgba[3]);
+        return hsl;
+    }
+
+    _hslaToRGBA(hsla)
+    {
+        let rgba = this._hslToRGB(hsla);
+        rgba.push(hsla[3]);
+        return rgba;
+    }
+};
+
+WebInspector.Color.Format = {
+    Original: "color-format-original",
+    Keyword: "color-format-keyword",
+    HEX: "color-format-hex",
+    ShortHEX: "color-format-short-hex",
+    HEXAlpha: "color-format-hex-alpha",
+    ShortHEXAlpha: "color-format-short-hex-alpha",
+    RGB: "color-format-rgb",
+    RGBA: "color-format-rgba",
+    HSL: "color-format-hsl",
+    HSLA: "color-format-hsla"
+};
+
+WebInspector.Color.Keywords = {
+    "aliceblue": [240, 248, 255],
+    "antiquewhite": [250, 235, 215],
+    "aquamarine": [127, 255, 212],
+    "azure": [240, 255, 255],
+    "beige": [245, 245, 220],
+    "bisque": [255, 228, 196],
+    "black": [0, 0, 0],
+    "blanchedalmond": [255, 235, 205],
+    "blue": [0, 0, 255],
+    "blueviolet": [138, 43, 226],
+    "brown": [165, 42, 42],
+    "burlywood": [222, 184, 135],
+    "cadetblue": [95, 158, 160],
+    "chartreuse": [127, 255, 0],
+    "chocolate": [210, 105, 30],
+    "coral": [255, 127, 80],
+    "cornflowerblue": [100, 149, 237],
+    "cornsilk": [255, 248, 220],
+    "crimson": [237, 164, 61],
+    "cyan": [0, 255, 255],
+    "darkblue": [0, 0, 139],
+    "darkcyan": [0, 139, 139],
+    "darkgoldenrod": [184, 134, 11],
+    "darkgray": [169, 169, 169],
+    "darkgreen": [0, 100, 0],
+    "darkkhaki": [189, 183, 107],
+    "darkmagenta": [139, 0, 139],
+    "darkolivegreen": [85, 107, 47],
+    "darkorange": [255, 140, 0],
+    "darkorchid": [153, 50, 204],
+    "darkred": [139, 0, 0],
+    "darksalmon": [233, 150, 122],
+    "darkseagreen": [143, 188, 143],
+    "darkslateblue": [72, 61, 139],
+    "darkslategray": [47, 79, 79],
+    "darkturquoise": [0, 206, 209],
+    "darkviolet": [148, 0, 211],
+    "deeppink": [255, 20, 147],
+    "deepskyblue": [0, 191, 255],
+    "dimgray": [105, 105, 105],
+    "dodgerblue": [30, 144, 255],
+    "firebrick": [178, 34, 34],
+    "floralwhite": [255, 250, 240],
+    "forestgreen": [34, 139, 34],
+    "gainsboro": [220, 220, 220],
+    "ghostwhite": [248, 248, 255],
+    "gold": [255, 215, 0],
+    "goldenrod": [218, 165, 32],
+    "gray": [128, 128, 128],
+    "green": [0, 128, 0],
+    "greenyellow": [173, 255, 47],
+    "honeydew": [240, 255, 240],
+    "hotpink": [255, 105, 180],
+    "indianred": [205, 92, 92],
+    "indigo": [75, 0, 130],
+    "ivory": [255, 255, 240],
+    "khaki": [240, 230, 140],
+    "lavender": [230, 230, 250],
+    "lavenderblush": [255, 240, 245],
+    "lawngreen": [124, 252, 0],
+    "lemonchiffon": [255, 250, 205],
+    "lightblue": [173, 216, 230],
+    "lightcoral": [240, 128, 128],
+    "lightcyan": [224, 255, 255],
+    "lightgoldenrodyellow": [250, 250, 210],
+    "lightgreen": [144, 238, 144],
+    "lightgrey": [211, 211, 211],
+    "lightpink": [255, 182, 193],
+    "lightsalmon": [255, 160, 122],
+    "lightseagreen": [32, 178, 170],
+    "lightskyblue": [135, 206, 250],
+    "lightslategray": [119, 136, 153],
+    "lightsteelblue": [176, 196, 222],
+    "lightyellow": [255, 255, 224],
+    "lime": [0, 255, 0],
+    "limegreen": [50, 205, 50],
+    "linen": [250, 240, 230],
+    "magenta": [255, 0, 255],
+    "maroon": [128, 0, 0],
+    "mediumaquamarine": [102, 205, 170],
+    "mediumblue": [0, 0, 205],
+    "mediumorchid": [186, 85, 211],
+    "mediumpurple": [147, 112, 219],
+    "mediumseagreen": [60, 179, 113],
+    "mediumslateblue": [123, 104, 238],
+    "mediumspringgreen": [0, 250, 154],
+    "mediumturquoise": [72, 209, 204],
+    "mediumvioletred": [199, 21, 133],
+    "midnightblue": [25, 25, 112],
+    "mintcream": [245, 255, 250],
+    "mistyrose": [255, 228, 225],
+    "moccasin": [255, 228, 181],
+    "navajowhite": [255, 222, 173],
+    "navy": [0, 0, 128],
+    "oldlace": [253, 245, 230],
+    "olive": [128, 128, 0],
+    "olivedrab": [107, 142, 35],
+    "orange": [255, 165, 0],
+    "orangered": [255, 69, 0],
+    "orchid": [218, 112, 214],
+    "palegoldenrod": [238, 232, 170],
+    "palegreen": [152, 251, 152],
+    "paleturquoise": [175, 238, 238],
+    "palevioletred": [219, 112, 147],
+    "papayawhip": [255, 239, 213],
+    "peachpuff": [255, 218, 185],
+    "peru": [205, 133, 63],
+    "pink": [255, 192, 203],
+    "plum": [221, 160, 221],
+    "powderblue": [176, 224, 230],
+    "purple": [128, 0, 128],
+    "rebeccapurple": [102, 51, 153],
+    "red": [255, 0, 0],
+    "rosybrown": [188, 143, 143],
+    "royalblue": [65, 105, 225],
+    "saddlebrown": [139, 69, 19],
+    "salmon": [250, 128, 114],
+    "sandybrown": [244, 164, 96],
+    "seagreen": [46, 139, 87],
+    "seashell": [255, 245, 238],
+    "sienna": [160, 82, 45],
+    "silver": [192, 192, 192],
+    "skyblue": [135, 206, 235],
+    "slateblue": [106, 90, 205],
+    "slategray": [112, 128, 144],
+    "snow": [255, 250, 250],
+    "springgreen": [0, 255, 127],
+    "steelblue": [70, 130, 180],
+    "tan": [210, 180, 140],
+    "teal": [0, 128, 128],
+    "thistle": [216, 191, 216],
+    "tomato": [255, 99, 71],
+    "turquoise": [64, 224, 208],
+    "violet": [238, 130, 238],
+    "wheat": [245, 222, 179],
+    "white": [255, 255, 255],
+    "whitesmoke": [245, 245, 245],
+    "yellow": [255, 255, 0],
+    "yellowgreen": [154, 205, 50]
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ConsoleCommandResultMessage.js b/Source/WebInspectorUI/UserInterface/Models/ConsoleCommandResultMessage.js
new file mode 100644
index 000000000..f736de549
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ConsoleCommandResultMessage.js
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleCommandResultMessage = class ConsoleCommandResult extends WebInspector.ConsoleMessage
+{
+    constructor(result, wasThrown, savedResultIndex, synthetic)
+    {
+        let source = WebInspector.ConsoleMessage.MessageSource.JS;
+        let level = (wasThrown ? WebInspector.ConsoleMessage.MessageLevel.Error : WebInspector.ConsoleMessage.MessageLevel.Log);
+        let type = WebInspector.ConsoleMessage.MessageType.Result;
+
+        super(source, level, "", type, undefined, undefined, undefined, 0, [result], undefined, undefined);
+
+        this._savedResultIndex = savedResultIndex;
+        this._synthetic = synthetic || false;
+
+        if (this._savedResultIndex && this._savedResultIndex > WebInspector.ConsoleCommandResultMessage.maximumSavedResultIndex)
+            WebInspector.ConsoleCommandResultMessage.maximumSavedResultIndex = this._savedResultIndex;
+    }
+
+    // Static
+
+    static clearMaximumSavedResultIndex()
+    {
+        WebInspector.ConsoleCommandResultMessage.maximumSavedResultIndex = 0;
+    }
+
+    // Public
+
+    get savedResultIndex()
+    {
+        return this._savedResultIndex;
+    }
+
+    get synthetic()
+    {
+        return this._synthetic;
+    }
+};
+
+WebInspector.ConsoleCommandResultMessage.maximumSavedResultIndex = 0;
diff --git a/Source/WebInspectorUI/UserInterface/Models/ConsoleMessage.js b/Source/WebInspectorUI/UserInterface/Models/ConsoleMessage.js
new file mode 100644
index 000000000..32b274425
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ConsoleMessage.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleMessage = class ConsoleMessage extends WebInspector.Object
+{
+    constructor(source, level, message, type, url, line, column, repeatCount, parameters, stackTrace, request)
+    {
+        super();
+
+        console.assert(typeof source === "string");
+        console.assert(typeof level === "string");
+        console.assert(typeof message === "string");
+        console.assert(!parameters || parameters.every(function(x) { return x instanceof WebInspector.RemoteObject; }));
+
+        this._source = source;
+        this._level = level;
+        this._messageText = message;
+        this._type = type || WebInspector.ConsoleMessage.MessageType.Log;
+        this._url = url || null;
+        this._line = line || 0;
+        this._column = column || 0;
+
+        this._repeatCount = repeatCount || 0;
+        this._parameters = parameters;
+
+        this._stackTrace = WebInspector.StackTrace.fromPayload(stackTrace || []);
+
+        this._request = request;
+    }
+
+    // Public
+
+    get source()
+    {
+        return this._source;
+    }
+
+    get level()
+    {
+        return this._level;
+    }
+
+    get messageText()
+    {
+        return this._messageText;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get url()
+    {
+        return this._url;
+    }
+
+    get line()
+    {
+        return this._line;
+    }
+
+    get column()
+    {
+        return this._column;
+    }
+
+    get repeatCount()
+    {
+        return this._repeatCount;
+    }
+
+    get parameters()
+    {
+        return this._parameters;
+    }
+
+    get stackTrace()
+    {
+        return this._stackTrace;
+    }
+
+    get request()
+    {
+        return this._request;
+    }
+};
+
+WebInspector.ConsoleMessage.MessageSource = {
+    HTML: "html",
+    XML: "xml",
+    JS: "javascript",
+    Network: "network",
+    ConsoleAPI: "console-api",
+    Storage: "storage",
+    Appcache: "appcache",
+    Rendering: "rendering",
+    CSS: "css",
+    Security: "security",
+    Other: "other",
+};
+
+WebInspector.ConsoleMessage.MessageType = {
+    Log: "log",
+    Dir: "dir",
+    DirXML: "dirxml",
+    Table: "table",
+    Trace: "trace",
+    StartGroup: "startGroup",
+    StartGroupCollapsed: "startGroupCollapsed",
+    EndGroup: "endGroup",
+    Assert: "assert",
+    Timing: "timing",
+    Profile: "profile",
+    ProfileEnd: "profileEnd",
+    Result: "result", // Frontend Only.
+};
+
+WebInspector.ConsoleMessage.MessageLevel = {
+    Log: "log",
+    Info: "info",
+    Warning: "warning",
+    Error: "error",
+    Debug: "debug",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ContentFlow.js b/Source/WebInspectorUI/UserInterface/Models/ContentFlow.js
new file mode 100644
index 000000000..cc063d3df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ContentFlow.js
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1. Redistributions of source code must retain the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer.
+ * 2. Redistributions in binary form must reproduce the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials
+ *    provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+ * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+ * TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+ * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ * SUCH DAMAGE.
+ */
+
+WebInspector.ContentFlow = class ContentFlow extends WebInspector.Object
+{
+    constructor(documentNodeIdentifier, name, overset, contentNodes)
+    {
+        super();
+
+        this._documentNodeIdentifier = documentNodeIdentifier;
+        this._name = name;
+        this._overset = overset;
+        this._contentNodes = contentNodes;
+    }
+
+    // Public
+
+    get id()
+    {
+        // Use the flow node id, to avoid collisions when we change main document id.
+        return this._documentNodeIdentifier + ":" + this._name;
+    }
+
+    get documentNodeIdentifier()
+    {
+        return this._documentNodeIdentifier;
+    }
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get overset()
+    {
+        return this._overset;
+    }
+
+    set overset(overset)
+    {
+        if (this._overset === overset)
+            return;
+        this._overset = overset;
+        this.dispatchEventToListeners(WebInspector.ContentFlow.Event.FlowOversetWasChanged);
+    }
+
+    get contentNodes()
+    {
+        return this._contentNodes;
+    }
+
+    insertContentNodeBefore(contentNode, referenceNode)
+    {
+        var index = this._contentNodes.indexOf(referenceNode);
+        console.assert(index !== -1);
+        this._contentNodes.splice(index, 0, contentNode);
+        this.dispatchEventToListeners(WebInspector.ContentFlow.Event.ContentNodeWasAdded, {node: contentNode, before: referenceNode});
+    }
+
+    appendContentNode(contentNode)
+    {
+        this._contentNodes.push(contentNode);
+        this.dispatchEventToListeners(WebInspector.ContentFlow.Event.ContentNodeWasAdded, {node: contentNode});
+    }
+
+    removeContentNode(contentNode)
+    {
+        var index = this._contentNodes.indexOf(contentNode);
+        console.assert(index !== -1);
+        this._contentNodes.splice(index, 1);
+        this.dispatchEventToListeners(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, {node: contentNode});
+    }
+};
+
+WebInspector.ContentFlow.Event = {
+    OversetWasChanged: "content-flow-overset-was-changed",
+    ContentNodeWasAdded: "content-flow-content-node-was-added",
+    ContentNodeWasRemoved: "content-flow-content-node-was-removed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/CookieStorageObject.js b/Source/WebInspectorUI/UserInterface/Models/CookieStorageObject.js
new file mode 100644
index 000000000..4db3eb521
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/CookieStorageObject.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CookieStorageObject = class CookieStorageObject
+{
+    constructor(host)
+    {
+        this._host = host;
+    }
+
+    // Static
+
+    static cookieMatchesResourceURL(cookie, resourceURL)
+    {
+        var parsedURL = parseURL(resourceURL);
+        if (!parsedURL || !WebInspector.CookieStorageObject.cookieDomainMatchesResourceDomain(cookie.domain, parsedURL.host))
+            return false;
+
+        return (parsedURL.path.startsWith(cookie.path)
+            && (!cookie.port || parsedURL.port === cookie.port)
+            && (!cookie.secure || parsedURL.scheme === "https"));
+    }
+
+    static cookieDomainMatchesResourceDomain(cookieDomain, resourceDomain)
+    {
+        if (cookieDomain.charAt(0) !== ".")
+            return resourceDomain === cookieDomain;
+        return !!resourceDomain.match(new RegExp("^(?:[^\\.]+\\.)*" + cookieDomain.substring(1).escapeForRegExp() + "$"), "i");
+    }
+
+    // Public
+
+    get host()
+    {
+        return this._host;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        // FIXME <https://webkit.org/b/151413>: This class should actually store cookie data for this host.
+        cookie[WebInspector.CookieStorageObject.CookieHostCookieKey] = this.host;
+    }
+};
+
+WebInspector.CookieStorageObject.TypeIdentifier = "cookie-storage";
+WebInspector.CookieStorageObject.CookieHostCookieKey = "cookie-storage-host";
diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMNode.js b/Source/WebInspectorUI/UserInterface/Models/DOMNode.js
new file mode 100644
index 000000000..0b2e47001
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMNode.js
@@ -0,0 +1,670 @@
+/*
+ * Copyright (C) 2009, 2010 Google Inc. All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMNode = class DOMNode extends WebInspector.Object
+{
+    constructor(domTreeManager, doc, isInShadowTree, payload)
+    {
+        super();
+
+        this._domTreeManager = domTreeManager;
+        this._isInShadowTree = isInShadowTree;
+
+        this.id = payload.nodeId;
+        this._domTreeManager._idToDOMNode[this.id] = this;
+
+        this._nodeType = payload.nodeType;
+        this._nodeName = payload.nodeName;
+        this._localName = payload.localName;
+        this._nodeValue = payload.nodeValue;
+        this._pseudoType = payload.pseudoType;
+        this._computedRole = payload.role;
+
+        if (this._nodeType === Node.DOCUMENT_NODE)
+            this.ownerDocument = this;
+        else
+            this.ownerDocument = doc;
+
+        this._attributes = [];
+        this._attributesMap = {};
+        if (payload.attributes)
+            this._setAttributesPayload(payload.attributes);
+
+        this._childNodeCount = payload.childNodeCount;
+        this._children = null;
+        this._filteredChildren = null;
+        this._filteredChildrenNeedsUpdating = true;
+
+        this._nextSibling = null;
+        this._previousSibling = null;
+        this.parentNode = null;
+
+        this._enabledPseudoClasses = [];
+
+        this._shadowRoots = [];
+        if (payload.shadowRoots) {
+            for (var i = 0; i < payload.shadowRoots.length; ++i) {
+                var root = payload.shadowRoots[i];
+                var node = new WebInspector.DOMNode(this._domTreeManager, this.ownerDocument, true, root);
+                this._shadowRoots.push(node);
+            }
+        }
+
+        if (payload.templateContent) {
+            this._templateContent = new WebInspector.DOMNode(this._domTreeManager, this.ownerDocument, true, payload.templateContent);
+            this._templateContent.parentNode = this;
+        }
+
+        if (payload.children)
+            this._setChildrenPayload(payload.children);
+
+        this._pseudoElements = new Map;
+        if (payload.pseudoElements) {
+            for (var i = 0; i < payload.pseudoElements.length; ++i) {
+                var node = new WebInspector.DOMNode(this._domTreeManager, this.ownerDocument, this._isInShadowTree, payload.pseudoElements[i]);
+                node.parentNode = this;
+                this._pseudoElements.set(node.pseudoType(), node);
+            }
+        }
+
+        if (payload.contentDocument) {
+            this._contentDocument = new WebInspector.DOMNode(this._domTreeManager, null, false, payload.contentDocument);
+            this._children = [this._contentDocument];
+            this._renumber();
+        }
+
+        if (payload.frameId)
+            this._frameIdentifier = payload.frameId;
+
+        if (this._nodeType === Node.ELEMENT_NODE) {
+            // HTML and BODY from internal iframes should not overwrite top-level ones.
+            if (this.ownerDocument && !this.ownerDocument.documentElement && this._nodeName === "HTML")
+                this.ownerDocument.documentElement = this;
+            if (this.ownerDocument && !this.ownerDocument.body && this._nodeName === "BODY")
+                this.ownerDocument.body = this;
+            if (payload.documentURL)
+                this.documentURL = payload.documentURL;
+        } else if (this._nodeType === Node.DOCUMENT_TYPE_NODE) {
+            this.publicId = payload.publicId;
+            this.systemId = payload.systemId;
+            this.internalSubset = payload.internalSubset;
+        } else if (this._nodeType === Node.DOCUMENT_NODE) {
+            this.documentURL = payload.documentURL;
+            this.xmlVersion = payload.xmlVersion;
+        } else if (this._nodeType === Node.ATTRIBUTE_NODE) {
+            this.name = payload.name;
+            this.value = payload.value;
+        }
+    }
+
+    // Public
+
+    get frameIdentifier()
+    {
+        return this._frameIdentifier || this.ownerDocument.frameIdentifier;
+    }
+
+    get frame()
+    {
+        if (!this._frame)
+            this._frame = WebInspector.frameResourceManager.frameForIdentifier(this.frameIdentifier);
+        return this._frame;
+    }
+
+    get children()
+    {
+        if (!this._children)
+            return null;
+
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._children;
+
+        if (this._filteredChildrenNeedsUpdating) {
+            this._filteredChildrenNeedsUpdating = false;
+            this._filteredChildren = this._children.filter(function(node) {
+                return !node._isInShadowTree;
+            });
+        }
+
+        return this._filteredChildren;
+    }
+
+    get firstChild()
+    {
+        var children = this.children;
+
+        if (children && children.length > 0)
+            return children[0];
+
+        return null;
+    }
+
+    get lastChild()
+    {
+        var children = this.children;
+
+        if (children && children.length > 0)
+            return children.lastValue;
+
+        return null;
+    }
+
+    get nextSibling()
+    {
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._nextSibling;
+
+        var node = this._nextSibling;
+        while (node) {
+            if (!node._isInShadowTree)
+                return node;
+            node = node._nextSibling;
+        }
+        return null;
+    }
+
+    get previousSibling()
+    {
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._previousSibling;
+
+        var node = this._previousSibling;
+        while (node) {
+            if (!node._isInShadowTree)
+                return node;
+            node = node._previousSibling;
+        }
+        return null;
+    }
+
+    get childNodeCount()
+    {
+        var children = this.children;
+        if (children)
+            return children.length;
+
+        if (WebInspector.showShadowDOMSetting.value)
+            return this._childNodeCount + this._shadowRoots.length;
+
+        return this._childNodeCount;
+    }
+
+    set childNodeCount(count)
+    {
+        this._childNodeCount = count;
+    }
+
+    computedRole()
+    {
+        return this._computedRole;
+    }
+
+    hasAttributes()
+    {
+        return this._attributes.length > 0;
+    }
+
+    hasChildNodes()
+    {
+        return this.childNodeCount > 0;
+    }
+
+    hasShadowRoots()
+    {
+        return !!this._shadowRoots.length;
+    }
+
+    isInShadowTree()
+    {
+        return this._isInShadowTree;
+    }
+
+    isPseudoElement()
+    {
+        return this._pseudoType !== undefined;
+    }
+
+    nodeType()
+    {
+        return this._nodeType;
+    }
+
+    nodeName()
+    {
+        return this._nodeName;
+    }
+
+    nodeNameInCorrectCase()
+    {
+        return this.isXMLNode() ? this.nodeName() : this.nodeName().toLowerCase();
+    }
+
+    setNodeName(name, callback)
+    {
+        DOMAgent.setNodeName(this.id, name, this._makeUndoableCallback(callback));
+    }
+
+    localName()
+    {
+        return this._localName;
+    }
+
+    templateContent()
+    {
+        return this._templateContent || null;
+    }
+
+    pseudoType()
+    {
+        return this._pseudoType;
+    }
+
+    hasPseudoElements()
+    {
+        return this._pseudoElements.size > 0;
+    }
+
+    pseudoElements()
+    {
+        return this._pseudoElements;
+    }
+
+    beforePseudoElement()
+    {
+        return this._pseudoElements.get(WebInspector.DOMNode.PseudoElementType.Before) || null;
+    }
+
+    afterPseudoElement()
+    {
+        return this._pseudoElements.get(WebInspector.DOMNode.PseudoElementType.After) || null;
+    }
+
+    nodeValue()
+    {
+        return this._nodeValue;
+    }
+
+    setNodeValue(value, callback)
+    {
+        DOMAgent.setNodeValue(this.id, value, this._makeUndoableCallback(callback));
+    }
+
+    getAttribute(name)
+    {
+        var attr = this._attributesMap[name];
+        return attr ? attr.value : undefined;
+    }
+
+    setAttribute(name, text, callback)
+    {
+        DOMAgent.setAttributesAsText(this.id, text, name, this._makeUndoableCallback(callback));
+    }
+
+    setAttributeValue(name, value, callback)
+    {
+        DOMAgent.setAttributeValue(this.id, name, value, this._makeUndoableCallback(callback));
+    }
+
+    attributes()
+    {
+        return this._attributes;
+    }
+
+    removeAttribute(name, callback)
+    {
+        function mycallback(error, success)
+        {
+            if (!error) {
+                delete this._attributesMap[name];
+                for (var i = 0;  i < this._attributes.length; ++i) {
+                    if (this._attributes[i].name === name) {
+                        this._attributes.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+
+            this._makeUndoableCallback(callback)(error);
+        }
+        DOMAgent.removeAttribute(this.id, name, mycallback.bind(this));
+    }
+
+    getChildNodes(callback)
+    {
+        if (this.children) {
+            if (callback)
+                callback(this.children);
+            return;
+        }
+
+        function mycallback(error) {
+            if (!error && callback)
+                callback(this.children);
+        }
+
+        DOMAgent.requestChildNodes(this.id, mycallback.bind(this));
+    }
+
+    getSubtree(depth, callback)
+    {
+        function mycallback(error)
+        {
+            if (callback)
+                callback(error ? null : this.children);
+        }
+
+        DOMAgent.requestChildNodes(this.id, depth, mycallback.bind(this));
+    }
+
+    getOuterHTML(callback)
+    {
+        DOMAgent.getOuterHTML(this.id, callback);
+    }
+
+    setOuterHTML(html, callback)
+    {
+        DOMAgent.setOuterHTML(this.id, html, this._makeUndoableCallback(callback));
+    }
+
+    removeNode(callback)
+    {
+        DOMAgent.removeNode(this.id, this._makeUndoableCallback(callback));
+    }
+
+    copyNode()
+    {
+        function copy(error, text)
+        {
+            if (!error)
+                InspectorFrontendHost.copyText(text);
+        }
+        DOMAgent.getOuterHTML(this.id, copy);
+    }
+
+    eventListeners(callback)
+    {
+        DOMAgent.getEventListenersForNode(this.id, callback);
+    }
+
+    accessibilityProperties(callback)
+    {
+        function accessibilityPropertiesCallback(error, accessibilityProperties)
+        {
+            if (!error && callback && accessibilityProperties) {
+                callback({
+                    activeDescendantNodeId: accessibilityProperties.activeDescendantNodeId,
+                    busy: accessibilityProperties.busy,
+                    checked: accessibilityProperties.checked,
+                    childNodeIds: accessibilityProperties.childNodeIds,
+                    controlledNodeIds: accessibilityProperties.controlledNodeIds,
+                    current: accessibilityProperties.current,
+                    disabled: accessibilityProperties.disabled,
+                    exists: accessibilityProperties.exists,
+                    expanded: accessibilityProperties.expanded,
+                    flowedNodeIds: accessibilityProperties.flowedNodeIds,
+                    focused: accessibilityProperties.focused,
+                    ignored: accessibilityProperties.ignored,
+                    ignoredByDefault: accessibilityProperties.ignoredByDefault,
+                    invalid: accessibilityProperties.invalid,
+                    hidden: accessibilityProperties.hidden,
+                    label: accessibilityProperties.label,
+                    liveRegionAtomic: accessibilityProperties.liveRegionAtomic,
+                    liveRegionRelevant: accessibilityProperties.liveRegionRelevant,
+                    liveRegionStatus: accessibilityProperties.liveRegionStatus,
+                    mouseEventNodeId: accessibilityProperties.mouseEventNodeId,
+                    nodeId: accessibilityProperties.nodeId,
+                    ownedNodeIds: accessibilityProperties.ownedNodeIds,
+                    parentNodeId: accessibilityProperties.parentNodeId,
+                    pressed: accessibilityProperties.pressed,
+                    readonly: accessibilityProperties.readonly,
+                    required: accessibilityProperties.required,
+                    role: accessibilityProperties.role,
+                    selected: accessibilityProperties.selected,
+                    selectedChildNodeIds: accessibilityProperties.selectedChildNodeIds
+                });
+            }
+        }
+        DOMAgent.getAccessibilityPropertiesForNode(this.id, accessibilityPropertiesCallback.bind(this));
+    }
+
+    path()
+    {
+        var path = [];
+        var node = this;
+        while (node && "index" in node && node._nodeName.length) {
+            path.push([node.index, node._nodeName]);
+            node = node.parentNode;
+        }
+        path.reverse();
+        return path.join(",");
+    }
+
+    appropriateSelectorFor(justSelector)
+    {
+        if (this.isPseudoElement())
+            return this.parentNode.appropriateSelectorFor() + "::" + this._pseudoType;
+
+        var lowerCaseName = this.localName() || this.nodeName().toLowerCase();
+
+        var id = this.getAttribute("id");
+        if (id) {
+            if (/[\s'"]/.test(id)) {
+                id = id.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"");
+                selector = lowerCaseName + "[id=\"" + id + "\"]";
+            } else
+                selector = "#" + id;
+            return (justSelector ? selector : lowerCaseName + selector);
+        }
+
+        var className = this.getAttribute("class");
+        if (className) {
+            var selector = "." + className.trim().replace(/\s+/g, ".");
+            return (justSelector ? selector : lowerCaseName + selector);
+        }
+
+        if (lowerCaseName === "input" && this.getAttribute("type"))
+            return lowerCaseName + "[type=\"" + this.getAttribute("type") + "\"]";
+
+        return lowerCaseName;
+    }
+
+    isAncestor(node)
+    {
+        if (!node)
+            return false;
+
+        var currentNode = node.parentNode;
+        while (currentNode) {
+            if (this === currentNode)
+                return true;
+            currentNode = currentNode.parentNode;
+        }
+        return false;
+    }
+
+    isDescendant(descendant)
+    {
+        return descendant !== null && descendant.isAncestor(this);
+    }
+
+    _setAttributesPayload(attrs)
+    {
+        this._attributes = [];
+        this._attributesMap = {};
+        for (var i = 0; i < attrs.length; i += 2)
+            this._addAttribute(attrs[i], attrs[i + 1]);
+    }
+
+    _insertChild(prev, payload)
+    {
+        var node = new WebInspector.DOMNode(this._domTreeManager, this.ownerDocument, this._isInShadowTree, payload);
+        if (!prev) {
+            if (!this._children) {
+                // First node
+                this._children = this._shadowRoots.concat([node]);
+            } else
+                this._children.unshift(node);
+        } else
+            this._children.splice(this._children.indexOf(prev) + 1, 0, node);
+        this._renumber();
+        return node;
+    }
+
+    _removeChild(node)
+    {
+        // FIXME: Handle removal if this is a shadow root.
+        if (node.isPseudoElement()) {
+            this._pseudoElements.delete(node.pseudoType());
+            node.parentNode = null;
+        } else {
+            this._children.splice(this._children.indexOf(node), 1);
+            node.parentNode = null;
+            this._renumber();
+        }
+    }
+
+    _setChildrenPayload(payloads)
+    {
+        // We set children in the constructor.
+        if (this._contentDocument)
+            return;
+
+        this._children = this._shadowRoots.slice();
+        for (var i = 0; i < payloads.length; ++i) {
+            var node = new WebInspector.DOMNode(this._domTreeManager, this.ownerDocument, this._isInShadowTree, payloads[i]);
+            this._children.push(node);
+        }
+        this._renumber();
+    }
+
+    _renumber()
+    {
+        this._filteredChildrenNeedsUpdating = true;
+
+        var childNodeCount = this._children.length;
+        if (childNodeCount === 0)
+            return;
+
+        for (var i = 0; i < childNodeCount; ++i) {
+            var child = this._children[i];
+            child.index = i;
+            child._nextSibling = i + 1 < childNodeCount ? this._children[i + 1] : null;
+            child._previousSibling = i - 1 >= 0 ? this._children[i - 1] : null;
+            child.parentNode = this;
+        }
+    }
+
+    _addAttribute(name, value)
+    {
+        var attr = {name, value, _node: this};
+        this._attributesMap[name] = attr;
+        this._attributes.push(attr);
+    }
+
+    _setAttribute(name, value)
+    {
+        var attr = this._attributesMap[name];
+        if (attr)
+            attr.value = value;
+        else
+            this._addAttribute(name, value);
+    }
+
+    _removeAttribute(name)
+    {
+        var attr = this._attributesMap[name];
+        if (attr) {
+            this._attributes.remove(attr);
+            delete this._attributesMap[name];
+        }
+    }
+
+    moveTo(targetNode, anchorNode, callback)
+    {
+        DOMAgent.moveTo(this.id, targetNode.id, anchorNode ? anchorNode.id : undefined, this._makeUndoableCallback(callback));
+    }
+
+    isXMLNode()
+    {
+        return !!this.ownerDocument && !!this.ownerDocument.xmlVersion;
+    }
+
+    get enabledPseudoClasses()
+    {
+        return this._enabledPseudoClasses;
+    }
+
+    setPseudoClassEnabled(pseudoClass, enabled)
+    {
+        var pseudoClasses = this._enabledPseudoClasses;
+        if (enabled) {
+            if (pseudoClasses.includes(pseudoClass))
+                return;
+            pseudoClasses.push(pseudoClass);
+        } else {
+            if (!pseudoClasses.includes(pseudoClass))
+                return;
+            pseudoClasses.remove(pseudoClass);
+        }
+
+        function changed(error)
+        {
+            if (!error)
+                this.dispatchEventToListeners(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged);
+        }
+
+        CSSAgent.forcePseudoState(this.id, pseudoClasses, changed.bind(this));
+    }
+
+    _makeUndoableCallback(callback)
+    {
+        return function(error)
+        {
+            if (!error)
+                DOMAgent.markUndoableState();
+
+            if (callback)
+                callback.apply(null, arguments);
+        };
+    }
+};
+
+WebInspector.DOMNode.Event = {
+    EnabledPseudoClassesChanged: "dom-node-enabled-pseudo-classes-did-change",
+    AttributeModified: "dom-node-attribute-modified",
+    AttributeRemoved: "dom-node-attribute-removed"
+};
+
+WebInspector.DOMNode.PseudoElementType = {
+    Before: "before",
+    After: "after",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js b/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
new file mode 100644
index 000000000..23ebd5f81
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
@@ -0,0 +1,961 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMNodeStyles = class DOMNodeStyles extends WebInspector.Object
+{
+    constructor(node)
+    {
+        super();
+
+        console.assert(node);
+        this._node = node || null;
+
+        this._rulesMap = {};
+        this._styleDeclarationsMap = {};
+
+        this._matchedRules = [];
+        this._inheritedRules = [];
+        this._pseudoElements = {};
+        this._inlineStyle = null;
+        this._attributesStyle = null;
+        this._computedStyle = null;
+        this._orderedStyles = [];
+
+        this._propertyNameToEffectivePropertyMap = {};
+
+        this.refresh();
+    }
+
+    // Public
+
+    get node()
+    {
+        return this._node;
+    }
+
+    get needsRefresh()
+    {
+        return this._refreshPending || this._needsRefresh;
+    }
+
+    refreshIfNeeded()
+    {
+        if (!this._needsRefresh)
+            return;
+        this.refresh();
+    }
+
+    refresh()
+    {
+        if (this._refreshPending)
+            return;
+
+        this._needsRefresh = false;
+        this._refreshPending = true;
+
+        function parseRuleMatchArrayPayload(matchArray, node, inherited)
+        {
+            var result = [];
+
+            // Iterate in reverse order to match the cascade order.
+            var ruleOccurrences = {};
+            for (var i = matchArray.length - 1; i >= 0; --i) {
+                var rule = this._parseRulePayload(matchArray[i].rule, matchArray[i].matchingSelectors, node, inherited, ruleOccurrences);
+                if (!rule)
+                    continue;
+                result.push(rule);
+            }
+
+            return result;
+        }
+
+        function fetchedMatchedStyles(error, matchedRulesPayload, pseudoElementRulesPayload, inheritedRulesPayload)
+        {
+            matchedRulesPayload = matchedRulesPayload || [];
+            pseudoElementRulesPayload = pseudoElementRulesPayload || [];
+            inheritedRulesPayload = inheritedRulesPayload || [];
+
+            // Move the current maps to previous.
+            this._previousRulesMap = this._rulesMap;
+            this._previousStyleDeclarationsMap = this._styleDeclarationsMap;
+
+            // Clear the current maps.
+            this._rulesMap = {};
+            this._styleDeclarationsMap = {};
+
+            this._matchedRules = parseRuleMatchArrayPayload.call(this, matchedRulesPayload, this._node);
+
+            this._pseudoElements = {};
+            for (var pseudoElementRulePayload of pseudoElementRulesPayload) {
+                var pseudoElementRules = parseRuleMatchArrayPayload.call(this, pseudoElementRulePayload.matches, this._node);
+                this._pseudoElements[pseudoElementRulePayload.pseudoId] = {matchedRules: pseudoElementRules};
+            }
+
+            this._inheritedRules = [];
+
+            var i = 0;
+            var currentNode = this._node.parentNode;
+            while (currentNode && i < inheritedRulesPayload.length) {
+                var inheritedRulePayload = inheritedRulesPayload[i];
+
+                var inheritedRuleInfo = {node: currentNode};
+                inheritedRuleInfo.inlineStyle = inheritedRulePayload.inlineStyle ? this._parseStyleDeclarationPayload(inheritedRulePayload.inlineStyle, currentNode, true, WebInspector.CSSStyleDeclaration.Type.Inline) : null;
+                inheritedRuleInfo.matchedRules = inheritedRulePayload.matchedCSSRules ? parseRuleMatchArrayPayload.call(this, inheritedRulePayload.matchedCSSRules, currentNode, true) : [];
+
+                if (inheritedRuleInfo.inlineStyle || inheritedRuleInfo.matchedRules.length)
+                    this._inheritedRules.push(inheritedRuleInfo);
+
+                currentNode = currentNode.parentNode;
+                ++i;
+            }
+        }
+
+        function fetchedInlineStyles(error, inlineStylePayload, attributesStylePayload)
+        {
+            this._inlineStyle = inlineStylePayload ? this._parseStyleDeclarationPayload(inlineStylePayload, this._node, false, WebInspector.CSSStyleDeclaration.Type.Inline) : null;
+            this._attributesStyle = attributesStylePayload ? this._parseStyleDeclarationPayload(attributesStylePayload, this._node, false, WebInspector.CSSStyleDeclaration.Type.Attribute) : null;
+
+            this._updateStyleCascade();
+        }
+
+        function fetchedComputedStyle(error, computedPropertiesPayload)
+        {
+            var properties = [];
+            for (var i = 0; computedPropertiesPayload && i < computedPropertiesPayload.length; ++i) {
+                var propertyPayload = computedPropertiesPayload[i];
+
+                var canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(propertyPayload.name);
+                propertyPayload.implicit = !this._propertyNameToEffectivePropertyMap[canonicalName];
+
+                var property = this._parseStylePropertyPayload(propertyPayload, NaN, this._computedStyle);
+                properties.push(property);
+            }
+
+            if (this._computedStyle)
+                this._computedStyle.update(null, properties);
+            else
+                this._computedStyle = new WebInspector.CSSStyleDeclaration(this, null, null, WebInspector.CSSStyleDeclaration.Type.Computed, this._node, false, null, properties);
+
+            this._refreshPending = false;
+
+            let significantChange = false;
+            for (let key in this._styleDeclarationsMap) {
+                // Check if the same key exists in the previous map and has the same style objects.
+                if (key in this._previousStyleDeclarationsMap) {
+                    if (Object.shallowEqual(this._styleDeclarationsMap[key], this._previousStyleDeclarationsMap[key]))
+                        continue;
+
+                    // Some styles have selectors such that they will match with the DOM node twice (for example "::before, ::after").
+                    // In this case a second style for a second matching may be generated and added which will cause the shallowEqual
+                    // to not return true, so in this case we just want to ensure that all the current styles existed previously.
+                    let styleFound = false;
+                    for (let style of this._styleDeclarationsMap[key]) {
+                        if (this._previousStyleDeclarationsMap[key].includes(style)) {
+                            styleFound = true;
+                            break;
+                        }
+                    }
+
+                    if (styleFound)
+                        continue;
+                }
+
+                if (!this._includeUserAgentRulesOnNextRefresh) {
+                    // We can assume all the styles with the same key are from the same stylesheet and rule, so we only check the first.
+                    let firstStyle = this._styleDeclarationsMap[key][0];
+                    if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent) {
+                        // User Agent styles get different identifiers after some edits. This would cause us to fire a significant refreshed
+                        // event more than it is helpful. And since the user agent stylesheet is static it shouldn't match differently
+                        // between refreshes for the same node. This issue is tracked by: https://webkit.org/b/110055
+                        continue;
+                    }
+                }
+
+                // This key is new or has different style objects than before. This is a significant change.
+                significantChange = true;
+                break;
+            }
+
+            if (!significantChange) {
+                for (var key in this._previousStyleDeclarationsMap) {
+                    // Check if the same key exists in current map. If it does exist it was already checked for equality above.
+                    if (key in this._styleDeclarationsMap)
+                        continue;
+
+                    if (!this._includeUserAgentRulesOnNextRefresh) {
+                        // See above for why we skip user agent style rules.
+                        var firstStyle = this._previousStyleDeclarationsMap[key][0];
+                        if (firstStyle && firstStyle.ownerRule && firstStyle.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent)
+                            continue;
+                    }
+
+                    // This key no longer exists. This is a significant change.
+                    significantChange = true;
+                    break;
+                }
+            }
+
+            delete this._includeUserAgentRulesOnNextRefresh;
+
+            // Delete the previous maps now that any reused rules and style have been moved over.
+            delete this._previousRulesMap;
+            delete this._previousStyleDeclarationsMap;
+
+            this.dispatchEventToListeners(WebInspector.DOMNodeStyles.Event.Refreshed, {significantChange});
+        }
+
+        // FIXME: Convert to pushing StyleSheet information to the frontend. <rdar://problem/13213680>
+        WebInspector.cssStyleManager.fetchStyleSheetsIfNeeded();
+
+        CSSAgent.getMatchedStylesForNode.invoke({nodeId: this._node.id, includePseudo: true, includeInherited: true}, fetchedMatchedStyles.bind(this));
+        CSSAgent.getInlineStylesForNode.invoke({nodeId: this._node.id}, fetchedInlineStyles.bind(this));
+        CSSAgent.getComputedStyleForNode.invoke({nodeId: this._node.id}, fetchedComputedStyle.bind(this));
+    }
+
+    addRule(selector, text)
+    {
+        selector = selector || this._node.appropriateSelectorFor(true);
+
+        function completed()
+        {
+            DOMAgent.markUndoableState();
+            this.refresh();
+        }
+
+        function styleChanged(error, stylePayload)
+        {
+            if (error)
+                return;
+
+            completed.call(this);
+        }
+
+        function addedRule(error, rulePayload)
+        {
+            if (error)
+                return;
+
+            if (!text || !text.length) {
+                completed.call(this);
+                return;
+            }
+
+            CSSAgent.setStyleText(rulePayload.style.styleId, text, styleChanged.bind(this));
+        }
+
+        // COMPATIBILITY (iOS 9): Before CSS.createStyleSheet, CSS.addRule could be called with a contextNode.
+        if (!CSSAgent.createStyleSheet) {
+            CSSAgent.addRule.invoke({contextNodeId: this._node.id , selector}, addedRule.bind(this));
+            return;
+        }
+
+        function inspectorStyleSheetAvailable(styleSheet)
+        {
+            CSSAgent.addRule(styleSheet.id, selector, addedRule.bind(this));
+        }
+
+        WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
+    }
+
+    rulesForSelector(selector)
+    {
+        selector = selector || this._node.appropriateSelectorFor(true);
+
+        function ruleHasSelector(rule) {
+            return !rule.mediaList.length && rule.selectorText === selector;
+        }
+
+        let rules = this._matchedRules.filter(ruleHasSelector);
+
+        for (let id in this._pseudoElements)
+            rules = rules.concat(this._pseudoElements[id].matchedRules.filter(ruleHasSelector));
+
+        return rules;
+    }
+
+    get matchedRules()
+    {
+        return this._matchedRules;
+    }
+
+    get inheritedRules()
+    {
+        return this._inheritedRules;
+    }
+
+    get inlineStyle()
+    {
+        return this._inlineStyle;
+    }
+
+    get attributesStyle()
+    {
+        return this._attributesStyle;
+    }
+
+    get pseudoElements()
+    {
+        return this._pseudoElements;
+    }
+
+    get computedStyle()
+    {
+        return this._computedStyle;
+    }
+
+    get orderedStyles()
+    {
+        return this._orderedStyles;
+    }
+
+    effectivePropertyForName(name)
+    {
+        let property = this._propertyNameToEffectivePropertyMap[name];
+        if (property)
+            return property;
+
+        let canonicalName = WebInspector.cssStyleManager.canonicalNameForPropertyName(name);
+        return this._propertyNameToEffectivePropertyMap[canonicalName] || null;
+    }
+
+    // Protected
+
+    mediaQueryResultDidChange()
+    {
+        this._markAsNeedsRefresh();
+    }
+
+    pseudoClassesDidChange(node)
+    {
+        this._includeUserAgentRulesOnNextRefresh = true;
+        this._markAsNeedsRefresh();
+    }
+
+    attributeDidChange(node, attributeName)
+    {
+        this._markAsNeedsRefresh();
+    }
+
+    changeRule(rule, selector, text)
+    {
+        if (!rule)
+            return;
+
+        selector = selector || "";
+
+        function changeCompleted()
+        {
+            DOMAgent.markUndoableState();
+            this.refresh();
+        }
+
+        function styleChanged(error, stylePayload)
+        {
+            if (error)
+                return;
+
+            changeCompleted.call(this);
+        }
+
+        function changeText(styleId)
+        {
+            if (!text || !text.length) {
+                changeCompleted.call(this);
+                return;
+            }
+
+            CSSAgent.setStyleText(styleId, text, styleChanged.bind(this));
+        }
+
+        function ruleSelectorChanged(error, rulePayload)
+        {
+            if (error)
+                return;
+
+            changeText.call(this, rulePayload.style.styleId);
+        }
+
+        this._needsRefresh = true;
+        this._ignoreNextContentDidChangeForStyleSheet = rule.ownerStyleSheet;
+
+        CSSAgent.setRuleSelector(rule.id, selector, ruleSelectorChanged.bind(this));
+    }
+
+    changeRuleSelector(rule, selector)
+    {
+        selector = selector || "";
+        var result = new WebInspector.WrappedPromise;
+
+        function ruleSelectorChanged(error, rulePayload)
+        {
+            if (error) {
+                result.reject(error);
+                return;
+            }
+
+            DOMAgent.markUndoableState();
+
+            // Do a full refresh incase the rule no longer matches the node or the
+            // matched selector indices changed.
+            this.refresh();
+
+            result.resolve(rulePayload);
+        }
+
+        this._needsRefresh = true;
+        this._ignoreNextContentDidChangeForStyleSheet = rule.ownerStyleSheet;
+
+        CSSAgent.setRuleSelector(rule.id, selector, ruleSelectorChanged.bind(this));
+        return result.promise;
+    }
+
+    changeStyleText(style, text)
+    {
+        if (!style.ownerStyleSheet || !style.styleSheetTextRange)
+            return;
+
+        text = text || "";
+
+        function styleChanged(error, stylePayload)
+        {
+            if (error)
+                return;
+            this.refresh();
+        }
+
+        CSSAgent.setStyleText(style.id, text, styleChanged.bind(this));
+    }
+
+    // Private
+
+    _createSourceCodeLocation(sourceURL, sourceLine, sourceColumn)
+    {
+        if (!sourceURL)
+            return null;
+
+        var sourceCode;
+
+        // Try to use the node to find the frame which has the correct resource first.
+        if (this._node.ownerDocument) {
+            var mainResource = WebInspector.frameResourceManager.resourceForURL(this._node.ownerDocument.documentURL);
+            if (mainResource) {
+                var parentFrame = mainResource.parentFrame;
+                sourceCode = parentFrame.resourceForURL(sourceURL);
+            }
+        }
+
+        // If that didn't find the resource, then search all frames.
+        if (!sourceCode)
+            sourceCode = WebInspector.frameResourceManager.resourceForURL(sourceURL);
+
+        if (!sourceCode)
+            return null;
+
+        return sourceCode.createSourceCodeLocation(sourceLine || 0, sourceColumn || 0);
+    }
+
+    _parseSourceRangePayload(payload)
+    {
+        if (!payload)
+            return null;
+
+        return new WebInspector.TextRange(payload.startLine, payload.startColumn, payload.endLine, payload.endColumn);
+    }
+
+    _parseStylePropertyPayload(payload, index, styleDeclaration, styleText)
+    {
+        var text = payload.text || "";
+        var name = payload.name;
+        var value = (payload.value || "").replace(/\s*!important\s*$/, "");
+        var priority = payload.priority || "";
+
+        var enabled = true;
+        var overridden = false;
+        var implicit = payload.implicit || false;
+        var anonymous = false;
+        var valid = "parsedOk" in payload ? payload.parsedOk : true;
+
+        switch (payload.status || "style") {
+        case "active":
+            enabled = true;
+            break;
+        case "inactive":
+            overridden = true;
+            enabled = true;
+            break;
+        case "disabled":
+            enabled = false;
+            break;
+        case "style":
+            // FIXME: Is this still needed? This includes UserAgent styles and HTML attribute styles.
+            anonymous = true;
+            break;
+        }
+
+        var styleSheetTextRange = this._parseSourceRangePayload(payload.range);
+
+        if (styleDeclaration) {
+            // Use propertyForName when the index is NaN since propertyForName is fast in that case.
+            var property = isNaN(index) ? styleDeclaration.propertyForName(name, true) : styleDeclaration.properties[index];
+
+            // Reuse a property if the index and name matches. Otherwise it is a different property
+            // and should be created from scratch. This works in the simple cases where only existing
+            // properties change in place and no properties are inserted or deleted at the beginning.
+            // FIXME: This could be smarter by ignoring index and just go by name. However, that gets
+            // tricky for rules that have more than one property with the same name.
+            if (property && property.name === name && (property.index === index || (isNaN(property.index) && isNaN(index)))) {
+                property.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
+                return property;
+            }
+
+            // Reuse a pending property with the same name. These properties are pending being committed,
+            // so if we find a match that likely means it got committed and we should use it.
+            var pendingProperties = styleDeclaration.pendingProperties;
+            for (var i = 0; i < pendingProperties.length; ++i) {
+                var pendingProperty = pendingProperties[i];
+                if (pendingProperty.name === name && isNaN(pendingProperty.index)) {
+                    pendingProperty.index = index;
+                    pendingProperty.update(text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
+                    return pendingProperty;
+                }
+            }
+        }
+
+        return new WebInspector.CSSProperty(index, text, name, value, priority, enabled, overridden, implicit, anonymous, valid, styleSheetTextRange);
+    }
+
+    _parseStyleDeclarationPayload(payload, node, inherited, type, rule, updateAllStyles)
+    {
+        if (!payload)
+            return null;
+
+        rule = rule || null;
+        inherited = inherited || false;
+
+        var id = payload.styleId;
+        var mapKey = id ? id.styleSheetId + ":" + id.ordinal : null;
+
+        if (type === WebInspector.CSSStyleDeclaration.Type.Attribute)
+            mapKey = node.id + ":attribute";
+
+        var styleDeclaration = rule ? rule.style : null;
+        var styleDeclarations = [];
+
+        // Look for existing styles in the previous map if there is one, otherwise use the current map.
+        var previousStyleDeclarationsMap = this._previousStyleDeclarationsMap || this._styleDeclarationsMap;
+        if (mapKey && mapKey in previousStyleDeclarationsMap) {
+            styleDeclarations = previousStyleDeclarationsMap[mapKey];
+
+            // If we need to update all styles, then stop here and call _parseStyleDeclarationPayload for each style.
+            // We need to parse multiple times so we reuse the right properties from each style.
+            if (updateAllStyles && styleDeclarations.length) {
+                for (var i = 0; i < styleDeclarations.length; ++i) {
+                    var styleDeclaration = styleDeclarations[i];
+                    this._parseStyleDeclarationPayload(payload, styleDeclaration.node, styleDeclaration.inherited, styleDeclaration.type, styleDeclaration.ownerRule);
+                }
+
+                return null;
+            }
+
+            if (!styleDeclaration) {
+                var filteredStyleDeclarations = styleDeclarations.filter(function(styleDeclaration) {
+                    // This case only applies for styles that are not part of a rule.
+                    if (styleDeclaration.ownerRule) {
+                        console.assert(!rule);
+                        return false;
+                    }
+
+                    if (styleDeclaration.node !== node)
+                        return false;
+
+                    if (styleDeclaration.inherited !== inherited)
+                        return false;
+
+                    return true;
+                });
+
+                console.assert(filteredStyleDeclarations.length <= 1);
+                styleDeclaration = filteredStyleDeclarations[0] || null;
+            }
+        }
+
+        if (previousStyleDeclarationsMap !== this._styleDeclarationsMap) {
+            // If the previous and current maps differ then make sure the found styleDeclaration is added to the current map.
+            styleDeclarations = mapKey && mapKey in this._styleDeclarationsMap ? this._styleDeclarationsMap[mapKey] : [];
+
+            if (styleDeclaration && !styleDeclarations.includes(styleDeclaration)) {
+                styleDeclarations.push(styleDeclaration);
+                this._styleDeclarationsMap[mapKey] = styleDeclarations;
+            }
+        }
+
+        var shorthands = {};
+        for (var i = 0; payload.shorthandEntries && i < payload.shorthandEntries.length; ++i) {
+            var shorthand = payload.shorthandEntries[i];
+            shorthands[shorthand.name] = shorthand.value;
+        }
+
+        var text = payload.cssText;
+
+        var inheritedPropertyCount = 0;
+
+        var properties = [];
+        for (var i = 0; payload.cssProperties && i < payload.cssProperties.length; ++i) {
+            var propertyPayload = payload.cssProperties[i];
+
+            if (inherited && WebInspector.CSSProperty.isInheritedPropertyName(propertyPayload.name))
+                ++inheritedPropertyCount;
+
+            var property = this._parseStylePropertyPayload(propertyPayload, i, styleDeclaration, text);
+            properties.push(property);
+        }
+
+        var styleSheetTextRange = this._parseSourceRangePayload(payload.range);
+
+        if (styleDeclaration) {
+            styleDeclaration.update(text, properties, styleSheetTextRange);
+            return styleDeclaration;
+        }
+
+        var styleSheet = id ? WebInspector.cssStyleManager.styleSheetForIdentifier(id.styleSheetId) : null;
+        if (styleSheet) {
+            if (type === WebInspector.CSSStyleDeclaration.Type.Inline)
+                styleSheet.markAsInlineStyleAttributeStyleSheet();
+            styleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
+        }
+
+        if (inherited && !inheritedPropertyCount)
+            return null;
+
+        styleDeclaration = new WebInspector.CSSStyleDeclaration(this, styleSheet, id, type, node, inherited, text, properties, styleSheetTextRange);
+
+        if (mapKey) {
+            styleDeclarations.push(styleDeclaration);
+            this._styleDeclarationsMap[mapKey] = styleDeclarations;
+        }
+
+        return styleDeclaration;
+    }
+
+    _parseSelectorListPayload(selectorList)
+    {
+        var selectors = selectorList.selectors;
+        if (!selectors.length)
+            return [];
+
+        // COMPATIBILITY (iOS 8): The selectorList payload was an array of selector text strings.
+        // Now they are CSSSelector objects with multiple properties.
+        if (typeof selectors[0] === "string") {
+            return selectors.map(function(selectorText) {
+                return new WebInspector.CSSSelector(selectorText);
+            });
+        }
+
+        return selectors.map(function(selectorPayload) {
+            return new WebInspector.CSSSelector(selectorPayload.text, selectorPayload.specificity, selectorPayload.dynamic);
+        });
+    }
+
+    _parseRulePayload(payload, matchedSelectorIndices, node, inherited, ruleOccurrences)
+    {
+        if (!payload)
+            return null;
+
+        // User and User Agent rules don't have 'ruleId' in the payload. However, their style's have 'styleId' and
+        // 'styleId' is the same identifier the backend uses for Author rule identifiers, so do the same here.
+        // They are excluded by the backend because they are not editable, however our front-end does not determine
+        // editability solely based on the existence of the id like the open source front-end does.
+        var id = payload.ruleId || payload.style.styleId;
+
+        var mapKey = id ? id.styleSheetId + ":" + id.ordinal + ":" + (inherited ? "I" : "N") + ":" + node.id : null;
+
+        // Rules can match multiple times if they have multiple selectors or because of inheritance. We keep a count
+        // of occurrences so we have unique rules per occurrence, that way properties will be correctly marked as overridden.
+        var occurrence = 0;
+        if (mapKey) {
+            if (mapKey in ruleOccurrences)
+                occurrence = ++ruleOccurrences[mapKey];
+            else
+                ruleOccurrences[mapKey] = occurrence;
+
+            // Append the occurrence number to the map key for lookup in the rules map.
+            mapKey += ":" + occurrence;
+        }
+
+        var rule = null;
+
+        // Look for existing rules in the previous map if there is one, otherwise use the current map.
+        var previousRulesMap = this._previousRulesMap || this._rulesMap;
+        if (mapKey && mapKey in previousRulesMap) {
+            rule = previousRulesMap[mapKey];
+
+            if (previousRulesMap !== this._rulesMap) {
+                // If the previous and current maps differ then make sure the found rule is added to the current map.
+                this._rulesMap[mapKey] = rule;
+            }
+        }
+
+        var style = this._parseStyleDeclarationPayload(payload.style, node, inherited, WebInspector.CSSStyleDeclaration.Type.Rule, rule);
+        if (!style)
+            return null;
+
+        var styleSheet = id ? WebInspector.cssStyleManager.styleSheetForIdentifier(id.styleSheetId) : null;
+
+        var selectorText = payload.selectorList.text;
+        var selectors = this._parseSelectorListPayload(payload.selectorList);
+        var type = WebInspector.CSSStyleManager.protocolStyleSheetOriginToEnum(payload.origin);
+
+        var sourceCodeLocation = null;
+        var sourceRange = payload.selectorList.range;
+        if (sourceRange)
+            sourceCodeLocation = this._createSourceCodeLocation(payload.sourceURL, sourceRange.startLine, sourceRange.startColumn);
+        else {
+            // FIXME: Is it possible for a CSSRule to have a sourceLine without its selectorList having a sourceRange? Fall back just in case.
+            sourceCodeLocation = this._createSourceCodeLocation(payload.sourceURL, payload.sourceLine);
+        }
+
+        if (styleSheet)
+            sourceCodeLocation = styleSheet.offsetSourceCodeLocation(sourceCodeLocation);
+
+        var mediaList = [];
+        for (var i = 0; payload.media && i < payload.media.length; ++i) {
+            var mediaItem = payload.media[i];
+            var mediaType = WebInspector.CSSStyleManager.protocolMediaSourceToEnum(mediaItem.source);
+            var mediaText = mediaItem.text;
+            var mediaSourceCodeLocation = this._createSourceCodeLocation(mediaItem.sourceURL, mediaItem.sourceLine);
+            if (styleSheet)
+                mediaSourceCodeLocation = styleSheet.offsetSourceCodeLocation(mediaSourceCodeLocation);
+
+            mediaList.push(new WebInspector.CSSMedia(mediaType, mediaText, mediaSourceCodeLocation));
+        }
+
+        if (rule) {
+            rule.update(sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
+            return rule;
+        }
+
+        if (styleSheet)
+            styleSheet.addEventListener(WebInspector.CSSStyleSheet.Event.ContentDidChange, this._styleSheetContentDidChange, this);
+
+        rule = new WebInspector.CSSRule(this, styleSheet, id, type, sourceCodeLocation, selectorText, selectors, matchedSelectorIndices, style, mediaList);
+
+        if (mapKey)
+            this._rulesMap[mapKey] = rule;
+
+        return rule;
+    }
+
+    _markAsNeedsRefresh()
+    {
+        this._needsRefresh = true;
+        this.dispatchEventToListeners(WebInspector.DOMNodeStyles.Event.NeedsRefresh);
+    }
+
+    _styleSheetContentDidChange(event)
+    {
+        var styleSheet = event.target;
+        console.assert(styleSheet);
+        if (!styleSheet)
+            return;
+
+        // Ignore the stylesheet we know we just changed and handled above.
+        if (styleSheet === this._ignoreNextContentDidChangeForStyleSheet) {
+            delete this._ignoreNextContentDidChangeForStyleSheet;
+            return;
+        }
+
+        this._markAsNeedsRefresh();
+    }
+
+    _updateStyleCascade()
+    {
+        var cascadeOrderedStyleDeclarations = this._collectStylesInCascadeOrder(this._matchedRules, this._inlineStyle, this._attributesStyle);
+
+        for (var i = 0; i < this._inheritedRules.length; ++i) {
+            var inheritedStyleInfo = this._inheritedRules[i];
+            var inheritedCascadeOrder = this._collectStylesInCascadeOrder(inheritedStyleInfo.matchedRules, inheritedStyleInfo.inlineStyle, null);
+            cascadeOrderedStyleDeclarations = cascadeOrderedStyleDeclarations.concat(inheritedCascadeOrder);
+        }
+
+        this._orderedStyles = cascadeOrderedStyleDeclarations;
+
+        this._propertyNameToEffectivePropertyMap = {};
+
+        this._markOverriddenProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
+        this._associateRelatedProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
+
+        for (var pseudoIdentifier in this._pseudoElements) {
+            var pseudoElementInfo = this._pseudoElements[pseudoIdentifier];
+            pseudoElementInfo.orderedStyles = this._collectStylesInCascadeOrder(pseudoElementInfo.matchedRules, null, null);
+            this._markOverriddenProperties(pseudoElementInfo.orderedStyles);
+            this._associateRelatedProperties(pseudoElementInfo.orderedStyles);
+        }
+    }
+
+    _collectStylesInCascadeOrder(matchedRules, inlineStyle, attributesStyle)
+    {
+        var result = [];
+
+        // Inline style has the greatest specificity. So it goes first in the cascade order.
+        if (inlineStyle)
+            result.push(inlineStyle);
+
+        var userAndUserAgentStyles = [];
+
+        for (var i = 0; i < matchedRules.length; ++i) {
+            var rule = matchedRules[i];
+
+            // Only append to the result array here for author and inspector rules since attribute
+            // styles come between author rules and user/user agent rules.
+            switch (rule.type) {
+            case WebInspector.CSSStyleSheet.Type.Inspector:
+            case WebInspector.CSSStyleSheet.Type.Author:
+                result.push(rule.style);
+                break;
+
+            case WebInspector.CSSStyleSheet.Type.User:
+            case WebInspector.CSSStyleSheet.Type.UserAgent:
+                userAndUserAgentStyles.push(rule.style);
+                break;
+            }
+        }
+
+        // Style properties from HTML attributes are next.
+        if (attributesStyle)
+            result.push(attributesStyle);
+
+        // Finally add the user and user stylesheet's matched style rules we collected earlier.
+        result = result.concat(userAndUserAgentStyles);
+
+        return result;
+    }
+
+    _markOverriddenProperties(styles, propertyNameToEffectiveProperty)
+    {
+        propertyNameToEffectiveProperty = propertyNameToEffectiveProperty || {};
+
+        for (var i = 0; i < styles.length; ++i) {
+            var style = styles[i];
+            var properties = style.properties;
+
+            for (var j = 0; j < properties.length; ++j) {
+                var property = properties[j];
+                if (!property.enabled || !property.valid) {
+                    property.overridden = false;
+                    continue;
+                }
+
+                if (style.inherited && !property.inherited) {
+                    property.overridden = false;
+                    continue;
+                }
+
+                var canonicalName = property.canonicalName;
+                if (canonicalName in propertyNameToEffectiveProperty) {
+                    var effectiveProperty = propertyNameToEffectiveProperty[canonicalName];
+
+                    if (effectiveProperty.ownerStyle === property.ownerStyle) {
+                        if (effectiveProperty.important && !property.important) {
+                            property.overridden = true;
+                            continue;
+                        }
+                    } else if (effectiveProperty.important || !property.important || effectiveProperty.ownerStyle.node !== property.ownerStyle.node) {
+                        property.overridden = true;
+                        continue;
+                    }
+
+                    if (!property.anonymous)
+                        effectiveProperty.overridden = true;
+                }
+
+                property.overridden = false;
+
+                propertyNameToEffectiveProperty[canonicalName] = property;
+            }
+        }
+    }
+
+    _associateRelatedProperties(styles, propertyNameToEffectiveProperty)
+    {
+        for (var i = 0; i < styles.length; ++i) {
+            var properties = styles[i].properties;
+
+            var knownShorthands = {};
+
+            for (var j = 0; j < properties.length; ++j) {
+                var property = properties[j];
+
+                if (!property.valid)
+                    continue;
+
+                if (!WebInspector.CSSCompletions.cssNameCompletions.isShorthandPropertyName(property.name))
+                    continue;
+
+                if (knownShorthands[property.canonicalName] && !knownShorthands[property.canonicalName].overridden) {
+                    console.assert(property.overridden);
+                    continue;
+                }
+
+                knownShorthands[property.canonicalName] = property;
+            }
+
+            for (var j = 0; j < properties.length; ++j) {
+                var property = properties[j];
+
+                if (!property.valid)
+                    continue;
+
+                var shorthandProperty = null;
+
+                if (!isEmptyObject(knownShorthands)) {
+                    var possibleShorthands = WebInspector.CSSCompletions.cssNameCompletions.shorthandsForLonghand(property.canonicalName);
+                    for (var k = 0; k < possibleShorthands.length; ++k) {
+                        if (possibleShorthands[k] in knownShorthands) {
+                            shorthandProperty = knownShorthands[possibleShorthands[k]];
+                            break;
+                        }
+                    }
+                }
+
+                if (!shorthandProperty || shorthandProperty.overridden !== property.overridden) {
+                    property.relatedShorthandProperty = null;
+                    property.clearRelatedLonghandProperties();
+                    continue;
+                }
+
+                shorthandProperty.addRelatedLonghandProperty(property);
+                property.relatedShorthandProperty = shorthandProperty;
+
+                if (propertyNameToEffectiveProperty && propertyNameToEffectiveProperty[shorthandProperty.canonicalName] === shorthandProperty)
+                    propertyNameToEffectiveProperty[property.canonicalName] = property;
+            }
+        }
+    }
+};
+
+WebInspector.DOMNodeStyles.Event = {
+    NeedsRefresh: "dom-node-styles-needs-refresh",
+    Refreshed: "dom-node-styles-refreshed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMSearchMatchObject.js b/Source/WebInspectorUI/UserInterface/Models/DOMSearchMatchObject.js
new file mode 100644
index 000000000..96e2bdc30
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMSearchMatchObject.js
@@ -0,0 +1,175 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMSearchMatchObject = class DOMSearchMatchObject extends WebInspector.Object
+{
+    constructor(resource, domNode, title, searchTerm, textRange)
+    {
+        super();
+
+        console.assert(resource instanceof WebInspector.Resource);
+        console.assert(domNode instanceof WebInspector.DOMNode);
+
+        this._resource = resource;
+        this._domNode = domNode;
+        this._title = title;
+        this._searchTerm = searchTerm;
+        this._sourceCodeTextRange = resource.createSourceCodeTextRange(textRange);
+    }
+
+    // Static
+
+    static titleForDOMNode(domNode)
+    {
+        switch (domNode.nodeType()) {
+        case Node.ELEMENT_NODE:
+            var title = "<" + domNode.nodeNameInCorrectCase();
+            for (var attribute of domNode.attributes()) {
+                title += " " + attribute.name;
+                if (attribute.value.length)
+                    title += "=\"" + attribute.value + "\"";
+            }
+            return title + ">";
+
+        case Node.TEXT_NODE:
+            return "\"" + domNode.nodeValue() + "\"";
+
+        case Node.COMMENT_NODE:
+            return "<!--" + domNode.nodeValue() + "-->";
+
+        case Node.DOCUMENT_TYPE_NODE:
+            var title = "<!DOCTYPE " + domNode.nodeName();
+            if (domNode.publicId) {
+                title += " PUBLIC \"" + domNode.publicId + "\"";
+                if (domNode.systemId)
+                    title += " \"" + domNode.systemId + "\"";
+            } else if (domNode.systemId)
+                title += " SYSTEM \"" + domNode.systemId + "\"";
+
+            if (domNode.internalSubset)
+                title += " [" + domNode.internalSubset + "]";
+
+            return title + ">";
+
+        case Node.CDATA_SECTION_NODE:
+            return "<![CDATA[" + domNode + "]]>";
+
+        case Node.PROCESSING_INSTRUCTION_NODE:
+            var data = domNode.nodeValue();
+            var dataString = data.length ? " " + data : "";
+            var title = "<?" + domNode.nodeNameInCorrectCase() + dataString + "?>";
+            return title;
+
+        default:
+            console.error("Unknown DOM node type: ", domNode.nodeType());
+            return domNode.nodeNameInCorrectCase();
+        }
+    }
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    get domNode()
+    {
+        return this._domNode;
+    }
+
+    get title()
+    {
+        return this._title;
+    }
+
+    get className()
+    {
+        if (!this._className)
+            this._className = this._generateClassName();
+
+        return this._className;
+    }
+
+    get searchTerm()
+    {
+        return this._searchTerm;
+    }
+
+    get sourceCodeTextRange()
+    {
+        return this._sourceCodeTextRange;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.DOMSearchMatchObject.URLCookieKey] = this._resource.url.hash;
+        cookie[WebInspector.DOMSearchMatchObject.TitleKey] = this._title;
+        var textRange = this._sourceCodeTextRange.textRange;
+        cookie[WebInspector.DOMSearchMatchObject.TextRangeKey] = [textRange.startLine, textRange.startColumn, textRange.endLine, textRange.endColumn].join();
+    }
+
+    // Private
+
+    _generateClassName()
+    {
+        switch (this._domNode.nodeType()) {
+        case Node.ELEMENT_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchElementIconStyleClassName;
+
+        case Node.TEXT_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchTextNodeIconStyleClassName;
+
+        case Node.COMMENT_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchCommentIconStyleClassName;
+
+        case Node.DOCUMENT_TYPE_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName;
+
+        case Node.CDATA_SECTION_NODE:
+            return WebInspector.DOMSearchMatchObject.DOMMatchCharacterDataIconStyleClassName;
+
+        case Node.PROCESSING_INSTRUCTION_NODE:
+            // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE
+            return WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName;
+
+        default:
+            console.error("Unknown DOM node type: ", this._domNode.nodeType());
+            return WebInspector.DOMSearchMatchObject.DOMMatchNodeIconStyleClassName;
+        }
+    }
+};
+
+WebInspector.DOMSearchMatchObject.DOMMatchElementIconStyleClassName = "dom-match-element-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchTextNodeIconStyleClassName = "dom-match-text-node-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchCommentIconStyleClassName = "dom-match-comment-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName = "dom-match-document-type-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchCharacterDataIconStyleClassName = "dom-match-character-data-icon";
+WebInspector.DOMSearchMatchObject.DOMMatchNodeIconStyleClassName = "dom-match-node-icon";
+
+WebInspector.DOMSearchMatchObject.TypeIdentifier = "dom-search-match-object";
+WebInspector.DOMSearchMatchObject.URLCookieKey = "resource-url";
+WebInspector.DOMSearchMatchObject.TitleKey = "title";
+WebInspector.DOMSearchMatchObject.TextRangeKey = "text-range";
diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js b/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js
new file mode 100644
index 000000000..9da0a4cc2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMStorageObject.js
@@ -0,0 +1,130 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageObject = class DOMStorageObject extends WebInspector.Object
+{
+    constructor(id, host, isLocalStorage)
+    {
+        super();
+
+        this._id = id;
+        this._host = host;
+        this._isLocalStorage = isLocalStorage;
+        this._entries = new Map;
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get host()
+    {
+        return this._host;
+    }
+
+    get entries()
+    {
+        return this._entries;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.DOMStorageObject.HostCookieKey] = this.host;
+        cookie[WebInspector.DOMStorageObject.LocalStorageCookieKey] = this.isLocalStorage();
+    }
+
+    isLocalStorage()
+    {
+        return this._isLocalStorage;
+    }
+
+    getEntries(callback)
+    {
+        function innerCallback(error, entries)
+        {
+            if (error)
+                return;
+
+            for (let [key, value] of entries) {
+                if (!key || !value)
+                    continue;
+
+                this._entries.set(key, value);
+            }
+
+            callback(error, entries);
+        }
+
+        DOMStorageAgent.getDOMStorageItems(this._id, innerCallback.bind(this));
+    }
+
+    removeItem(key)
+    {
+        DOMStorageAgent.removeDOMStorageItem(this._id, key);
+    }
+
+    setItem(key, value)
+    {
+        DOMStorageAgent.setDOMStorageItem(this._id, key, value);
+    }
+
+    itemsCleared()
+    {
+        this._entries.clear();
+        this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemsCleared);
+    }
+
+    itemRemoved(key)
+    {
+        this._entries.delete(key);
+        this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemRemoved, {key});
+    }
+
+    itemAdded(key, value)
+    {
+        this._entries.set(key, value);
+        this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemAdded, {key, value});
+    }
+
+    itemUpdated(key, oldValue, value)
+    {
+        this._entries.set(key, value);
+        this.dispatchEventToListeners(WebInspector.DOMStorageObject.Event.ItemUpdated, {key, oldValue, value});
+    }
+};
+
+WebInspector.DOMStorageObject.TypeIdentifier = "dom-storage";
+WebInspector.DOMStorageObject.HostCookieKey = "dom-storage-object-host";
+WebInspector.DOMStorageObject.LocalStorageCookieKey = "dom-storage-object-local-storage";
+
+WebInspector.DOMStorageObject.Event = {
+    ItemsCleared: "dom-storage-object-items-cleared",
+    ItemAdded: "dom-storage-object-item-added",
+    ItemRemoved: "dom-storage-object-item-removed",
+    ItemUpdated: "dom-storage-object-updated",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/DOMTree.js b/Source/WebInspectorUI/UserInterface/Models/DOMTree.js
new file mode 100644
index 000000000..26c766c0e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DOMTree.js
@@ -0,0 +1,333 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTree = class DOMTree extends WebInspector.Object
+{
+    constructor(frame)
+    {
+        super();
+
+        this._frame = frame;
+
+        this._rootDOMNode = null;
+        this._requestIdentifier = 0;
+        this._flowMap = {};
+
+        this._frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextChanged, this);
+
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._documentUpdated, this);
+
+        // Only add extra event listeners when not the main frame. Since DocumentUpdated is enough for the main frame.
+        if (!this._frame.isMainFrame()) {
+            WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
+            this._frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceDidChange, this);
+        }
+
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowListWasUpdated, this._contentFlowListWasUpdated, this);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowWasAdded, this._contentFlowWasAdded, this);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ContentFlowWasRemoved, this._contentFlowWasRemoved, this);
+    }
+
+    // Public
+
+    get frame()
+    {
+        return this._frame;
+    }
+
+    get flowMap()
+    {
+        return this._flowMap;
+    }
+
+    get flowsCount()
+    {
+        return Object.keys(this._flowMap).length;
+    }
+
+    disconnect()
+    {
+        WebInspector.domTreeManager.removeEventListener(null, null, this);
+        this._frame.removeEventListener(null, null, this);
+    }
+
+    invalidate()
+    {
+        // Set to null so it is fetched again next time requestRootDOMNode is called.
+        this._rootDOMNode = null;
+
+        // Clear the pending callbacks. It is the responsibility of the client to listen for
+        // the RootDOMNodeInvalidated event and request the root DOM node again.
+        this._pendingRootDOMNodeRequests = null;
+
+        if (this._invalidateTimeoutIdentifier)
+            return;
+
+        function performInvalidate()
+        {
+            this._invalidateTimeoutIdentifier = undefined;
+
+            this.dispatchEventToListeners(WebInspector.DOMTree.Event.RootDOMNodeInvalidated);
+        }
+
+        // Delay the invalidation on a timeout to coalesce multiple calls to invalidate.
+        this._invalidateTimeoutIdentifier = setTimeout(performInvalidate.bind(this), 0);
+    }
+
+    requestRootDOMNode(callback)
+    {
+        console.assert(typeof callback === "function");
+        if (typeof callback !== "function")
+            return;
+
+        if (this._rootDOMNode) {
+            callback(this._rootDOMNode);
+            return;
+        }
+
+        if (!this._frame.isMainFrame() && !this._frame.pageExecutionContext) {
+            this._rootDOMNodeRequestWaitingForExecutionContext = true;
+            if (!this._pendingRootDOMNodeRequests)
+                this._pendingRootDOMNodeRequests = [];
+            this._pendingRootDOMNodeRequests.push(callback);
+            return;
+        }
+
+        if (this._pendingRootDOMNodeRequests) {
+            this._pendingRootDOMNodeRequests.push(callback);
+            return;
+        }
+
+        this._pendingRootDOMNodeRequests = [callback];
+        this._requestRootDOMNode();
+    }
+
+    requestContentFlowList()
+    {
+        this.requestRootDOMNode(function(rootNode) {
+            // Let the backend know we are interested about the named flow events for this document.
+            WebInspector.domTreeManager.getNamedFlowCollection(rootNode.id);
+        });
+    }
+
+    // Private
+
+    _requestRootDOMNode()
+    {
+        console.assert(this._frame.isMainFrame() || this._frame.pageExecutionContext);
+        console.assert(this._pendingRootDOMNodeRequests.length);
+
+        // Bump the request identifier. This prevents pending callbacks for previous requests from completing.
+        var requestIdentifier = ++this._requestIdentifier;
+
+        function rootObjectAvailable(error, result)
+        {
+            // Check to see if we have been invalidated (if the callbacks were cleared).
+            if (!this._pendingRootDOMNodeRequests || requestIdentifier !== this._requestIdentifier)
+                return;
+
+            if (error) {
+                console.error(JSON.stringify(error));
+
+                this._rootDOMNode = null;
+                dispatchCallbacks.call(this);
+                return;
+            }
+
+            // Convert the RemoteObject to a DOMNode by asking the backend to push it to us.
+            var remoteObject = WebInspector.RemoteObject.fromPayload(result);
+            remoteObject.pushNodeToFrontend(rootDOMNodeAvailable.bind(this, remoteObject));
+        }
+
+        function rootDOMNodeAvailable(remoteObject, nodeId)
+        {
+            remoteObject.release();
+
+            // Check to see if we have been invalidated (if the callbacks were cleared).
+            if (!this._pendingRootDOMNodeRequests || requestIdentifier !== this._requestIdentifier)
+                return;
+
+            if (!nodeId) {
+                this._rootDOMNode = null;
+                dispatchCallbacks.call(this);
+                return;
+            }
+
+            this._rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
+
+            console.assert(this._rootDOMNode);
+            if (!this._rootDOMNode) {
+                dispatchCallbacks.call(this);
+                return;
+            }
+
+            // Request the child nodes since the root node is often not shown in the UI,
+            // and the child nodes will be needed immediately.
+            this._rootDOMNode.getChildNodes(dispatchCallbacks.bind(this));
+        }
+
+        function mainDocumentAvailable(document)
+        {
+            this._rootDOMNode = document;
+
+            dispatchCallbacks.call(this);
+        }
+
+        function dispatchCallbacks()
+        {
+            // Check to see if we have been invalidated (if the callbacks were cleared).
+            if (!this._pendingRootDOMNodeRequests || requestIdentifier !== this._requestIdentifier)
+                return;
+
+            for (var i = 0; i < this._pendingRootDOMNodeRequests.length; ++i)
+                this._pendingRootDOMNodeRequests[i](this._rootDOMNode);
+            this._pendingRootDOMNodeRequests = null;
+        }
+
+        // For the main frame we can use the more straight forward requestDocument function. For
+        // child frames we need to do a more roundabout approach since the protocol does not include
+        // a specific way to request a document given a frame identifier. The child frame approach
+        // involves evaluating the JavaScript "document" and resolving that into a DOMNode.
+        if (this._frame.isMainFrame())
+            WebInspector.domTreeManager.requestDocument(mainDocumentAvailable.bind(this));
+        else {
+            var contextId = this._frame.pageExecutionContext.id;
+            RuntimeAgent.evaluate.invoke({expression: appendWebInspectorSourceURL("document"), objectGroup: "", includeCommandLineAPI: false, doNotPauseOnExceptionsAndMuteConsole: true, contextId, returnByValue: false, generatePreview: false}, rootObjectAvailable.bind(this));
+        }
+    }
+
+    _nodeRemoved(event)
+    {
+        console.assert(!this._frame.isMainFrame());
+
+        if (event.data.node !== this._rootDOMNode)
+            return;
+
+        this.invalidate();
+    }
+
+    _documentUpdated(event)
+    {
+        this.invalidate();
+    }
+
+    _frameMainResourceDidChange(event)
+    {
+        console.assert(!this._frame.isMainFrame());
+
+        this.invalidate();
+    }
+
+    _framePageExecutionContextChanged(event)
+    {
+        if (this._rootDOMNodeRequestWaitingForExecutionContext) {
+            console.assert(this._frame.pageExecutionContext);
+            console.assert(this._pendingRootDOMNodeRequests && this._pendingRootDOMNodeRequests.length);
+
+            this._rootDOMNodeRequestWaitingForExecutionContext = false;
+
+            this._requestRootDOMNode();
+        }
+    }
+
+    _isContentFlowInCurrentDocument(flow)
+    {
+        return this._rootDOMNode && this._rootDOMNode.id === flow.documentNodeIdentifier;
+    }
+
+    _contentFlowListWasUpdated(event)
+    {
+        if (!this._rootDOMNode || this._rootDOMNode.id !== event.data.documentNodeIdentifier)
+            return;
+
+        // Assume that all the flows have been removed.
+        var deletedFlows = {};
+        for (var flowId in this._flowMap)
+            deletedFlows[flowId] = this._flowMap[flowId];
+
+        var newFlows = [];
+
+        var flows = event.data.flows;
+        for (var i = 0; i < flows.length; ++i) {
+            var flow = flows[i];
+            // All the flows received from WebKit are part of the same document.
+            console.assert(this._isContentFlowInCurrentDocument(flow));
+
+            var flowId = flow.id;
+            if (this._flowMap.hasOwnProperty(flowId)) {
+                // Remove the flow name from the deleted list.
+                console.assert(deletedFlows.hasOwnProperty(flowId));
+                delete deletedFlows[flowId];
+            } else {
+                this._flowMap[flowId] = flow;
+                newFlows.push(flow);
+            }
+        }
+
+        for (var flowId in deletedFlows) {
+            delete this._flowMap[flowId];
+        }
+
+        // Send update events to listeners.
+
+        for (var flowId in deletedFlows)
+            this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasRemoved, {flow: deletedFlows[flowId]});
+
+        for (var i = 0; i < newFlows.length; ++i)
+            this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow: newFlows[i]});
+    }
+
+    _contentFlowWasAdded(event)
+    {
+        var flow = event.data.flow;
+        if (!this._isContentFlowInCurrentDocument(flow))
+            return;
+
+        var flowId = flow.id;
+        console.assert(!this._flowMap.hasOwnProperty(flowId));
+        this._flowMap[flowId] = flow;
+
+        this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasAdded, {flow});
+    }
+
+    _contentFlowWasRemoved(event)
+    {
+        var flow = event.data.flow;
+        if (!this._isContentFlowInCurrentDocument(flow))
+            return;
+
+        var flowId = flow.id;
+        console.assert(this._flowMap.hasOwnProperty(flowId));
+        delete this._flowMap[flowId];
+
+        this.dispatchEventToListeners(WebInspector.DOMTree.Event.ContentFlowWasRemoved, {flow});
+    }
+};
+
+WebInspector.DOMTree.Event = {
+    RootDOMNodeInvalidated: "dom-tree-root-dom-node-invalidated",
+    ContentFlowWasAdded: "dom-tree-content-flow-was-added",
+    ContentFlowWasRemoved: "dom-tree-content-flow-was-removed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/DatabaseObject.js b/Source/WebInspectorUI/UserInterface/Models/DatabaseObject.js
new file mode 100644
index 000000000..2fb6014a0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DatabaseObject.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseObject = class DatabaseObject extends WebInspector.Object
+{
+    constructor(id, host, name, version)
+    {
+        super();
+
+        this._id = id;
+        this._host = host ? host : WebInspector.UIString("Local File");
+        this._name = name;
+        this._version = version;
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get host()
+    {
+        return this._host;
+    }
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get version()
+    {
+        return this._version;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.DatabaseObject.HostCookieKey] = this.host;
+        cookie[WebInspector.DatabaseObject.NameCookieKey] = this.name;
+    }
+
+    getTableNames(callback)
+    {
+        function sortingCallback(error, names)
+        {
+            if (!error)
+                callback(names.sort());
+        }
+
+        DatabaseAgent.getDatabaseTableNames(this._id, sortingCallback);
+    }
+
+    executeSQL(query, successCallback, errorCallback)
+    {
+        function queryCallback(error, columnNames, values, sqlError)
+        {
+            if (error) {
+                errorCallback(WebInspector.UIString("An unexpected error occurred."));
+                return;
+            }
+
+            if (sqlError) {
+                switch (sqlError.code) {
+                case SQLException.VERSION_ERR:
+                    errorCallback(WebInspector.UIString("Database no longer has expected version."));
+                    break;
+                case SQLException.TOO_LARGE_ERR:
+                    errorCallback(WebInspector.UIString("Data returned from the database is too large."));
+                    break;
+                default:
+                    errorCallback(WebInspector.UIString("An unexpected error occurred."));
+                    break;
+                }
+                return;
+            }
+
+            successCallback(columnNames, values);
+        }
+
+        DatabaseAgent.executeSQL(this._id, query, queryCallback);
+    }
+};
+
+WebInspector.DatabaseObject.TypeIdentifier = "database";
+WebInspector.DatabaseObject.HostCookieKey = "database-object-host";
+WebInspector.DatabaseObject.NameCookieKey = "database-object-name";
diff --git a/Source/WebInspectorUI/UserInterface/Models/DatabaseTableObject.js b/Source/WebInspectorUI/UserInterface/Models/DatabaseTableObject.js
new file mode 100644
index 000000000..0c4e3e67d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DatabaseTableObject.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTableObject = class DatabaseTableObject extends WebInspector.Object
+{
+    constructor(name, database)
+    {
+        super();
+
+        console.assert(database instanceof WebInspector.DatabaseObject);
+
+        this._name = name;
+        this._database = database;
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get database()
+    {
+        return this._database;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.DatabaseTableObject.NameCookieKey] = this.name;
+    }
+};
+
+WebInspector.DatabaseTableObject.TypeIdentifier = "database-table";
+WebInspector.DatabaseTableObject.NameCookieKey = "database-table-object-name";
diff --git a/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js b/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js
new file mode 100644
index 000000000..0c4258c91
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerDashboard = class DebuggerDashboard extends WebInspector.Object
+{
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/DefaultDashboard.js b/Source/WebInspectorUI/UserInterface/Models/DefaultDashboard.js
new file mode 100644
index 000000000..283f5ff83
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DefaultDashboard.js
@@ -0,0 +1,268 @@
+/*
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DefaultDashboard = class DefaultDashboard extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._waitingForFirstMainResourceToStartTrackingSize = true;
+
+        // Necessary event required to track page load time and resource sizes.
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
+
+        // Necessary events required to track load of resources.
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
+
+        // Necessary events required to track console messages.
+        var logManager = WebInspector.logManager;
+        logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._consoleWasCleared, this);
+        logManager.addEventListener(WebInspector.LogManager.Event.MessageAdded, this._consoleMessageAdded, this);
+        logManager.addEventListener(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, this._consoleMessageWasRepeated, this);
+
+        this._resourcesCount = 0;
+        this._resourcesSize = 0;
+        this._time = 0;
+        this._logs = 0;
+        this._errors = 0;
+        this._issues = 0;
+    }
+
+    // Public
+
+    get resourcesCount()
+    {
+        return this._resourcesCount;
+    }
+
+    set resourcesCount(value)
+    {
+        this._resourcesCount = value;
+        this._dataDidChange();
+    }
+
+    get resourcesSize()
+    {
+        return this._resourcesSize;
+    }
+
+    set resourcesSize(value)
+    {
+        this._resourcesSize = value;
+        this._dataDidChange();
+    }
+
+    get time()
+    {
+        return this._time;
+    }
+
+    set time(value)
+    {
+        this._time = value;
+        this._dataDidChange();
+    }
+
+    get logs()
+    {
+        return this._logs;
+    }
+
+    set logs(value)
+    {
+        this._logs = value;
+        this._dataDidChange();
+    }
+
+    get errors()
+    {
+        return this._errors;
+    }
+
+    set errors(value)
+    {
+        this._errors = value;
+        this._dataDidChange();
+    }
+
+    get issues()
+    {
+        return this._issues;
+    }
+
+    set issues(value)
+    {
+        this._issues = value;
+        this._dataDidChange();
+    }
+
+    // Private
+
+    _dataDidChange()
+    {
+        this.dispatchEventToListeners(WebInspector.DefaultDashboard.Event.DataDidChange);
+    }
+
+    _mainResourceDidChange(event)
+    {
+        console.assert(event.target instanceof WebInspector.Frame);
+
+        if (!event.target.isMainFrame())
+            return;
+
+        this._time = 0;
+        this._resourcesCount = 1;
+        this._resourcesSize = WebInspector.frameResourceManager.mainFrame.mainResource.size || 0;
+
+        // We should only track resource sizes on fresh loads.
+        if (this._waitingForFirstMainResourceToStartTrackingSize) {
+            this._waitingForFirstMainResourceToStartTrackingSize = false;
+            WebInspector.Resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._resourceSizeDidChange, this);
+        }
+
+        this._dataDidChange();
+        this._startUpdatingTime();
+    }
+
+    _capturingStopped(event)
+    {
+        // If recording stops, we should stop the timer if it hasn't stopped already.
+        this._stopUpdatingTime();
+    }
+
+    _resourceWasAdded(event)
+    {
+        ++this.resourcesCount;
+    }
+
+    _frameWasAdded(event)
+    {
+        ++this.resourcesCount;
+    }
+
+    _resourceSizeDidChange(event)
+    {
+        if (event.target.urlComponents.scheme === "data")
+            return;
+        this.resourcesSize += event.target.size - event.data.previousSize;
+    }
+
+    _startUpdatingTime()
+    {
+        this._stopUpdatingTime();
+
+        this.time = 0;
+
+        this._timelineBaseTime = Date.now();
+        this._timeIntervalDelay = 50;
+        this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
+    }
+
+    _stopUpdatingTime()
+    {
+        if (!this._timeIntervalIdentifier)
+            return;
+
+        clearInterval(this._timeIntervalIdentifier);
+        this._timeIntervalIdentifier = undefined;
+    }
+
+    _updateTime()
+    {
+        var duration = Date.now() - this._timelineBaseTime;
+
+        var timeIntervalDelay = this._timeIntervalDelay;
+        if (duration >= 1000) // 1 second
+            timeIntervalDelay = 100;
+        else if (duration >= 60000) // 60 seconds
+            timeIntervalDelay = 1000;
+        else if (duration >= 3600000) // 1 minute
+            timeIntervalDelay = 10000;
+
+        if (timeIntervalDelay !== this._timeIntervalDelay) {
+            this._timeIntervalDelay = timeIntervalDelay;
+
+            clearInterval(this._timeIntervalIdentifier);
+            this._timeIntervalIdentifier = setInterval(this._updateTime.bind(this), this._timeIntervalDelay);
+        }
+
+        var mainFrame = WebInspector.frameResourceManager.mainFrame;
+        var mainFrameStartTime = mainFrame.mainResource.firstTimestamp;
+        var mainFrameLoadEventTime = mainFrame.loadEventTimestamp;
+
+        if (isNaN(mainFrameStartTime) || isNaN(mainFrameLoadEventTime)) {
+            this.time = duration / 1000;
+            return;
+        }
+
+        this.time = mainFrameLoadEventTime - mainFrameStartTime;
+
+        this._stopUpdatingTime();
+    }
+
+    _consoleMessageAdded(event)
+    {
+        var message = event.data.message;
+        this._lastConsoleMessageType = message.level;
+        this._incrementConsoleMessageType(message.level, message.repeatCount);
+    }
+
+    _consoleMessageWasRepeated(event)
+    {
+        this._incrementConsoleMessageType(this._lastConsoleMessageType, 1);
+    }
+
+    _incrementConsoleMessageType(type, increment)
+    {
+        switch (type) {
+        case WebInspector.ConsoleMessage.MessageLevel.Log:
+        case WebInspector.ConsoleMessage.MessageLevel.Info:
+        case WebInspector.ConsoleMessage.MessageLevel.Debug:
+            this.logs += increment;
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Warning:
+            this.issues += increment;
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Error:
+            this.errors += increment;
+            break;
+        }
+    }
+
+    _consoleWasCleared(event)
+    {
+        this._logs = 0;
+        this._issues = 0;
+        this._errors = 0;
+        this._dataDidChange();
+    }
+};
+
+WebInspector.DefaultDashboard.Event = {
+    DataDidChange: "default-dashboard-data-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ExecutionContext.js b/Source/WebInspectorUI/UserInterface/Models/ExecutionContext.js
new file mode 100644
index 000000000..80f2023c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ExecutionContext.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ExecutionContext = class ExecutionContext extends WebInspector.Object
+{
+    constructor(id, name, isPageContext, frame)
+    {
+        super();
+
+        console.assert(typeof id === "number" || id === WebInspector.QuickConsole.MainFrameContextExecutionIdentifier);
+        console.assert(typeof name === "string");
+
+        this._id = id;
+        this._name = name;
+        this._isPageContext = isPageContext || false;
+        this._frame = frame || null;
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get isPageContext()
+    {
+        return this._isPageContext;
+    }
+
+    get frame()
+    {
+        return this._frame;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ExecutionContextList.js b/Source/WebInspectorUI/UserInterface/Models/ExecutionContextList.js
new file mode 100644
index 000000000..e094fc742
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ExecutionContextList.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ExecutionContextList = class ExecutionContextList extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._contexts = [];
+        this._pageExecutionContext = null;
+    }
+
+    // Public
+
+    get pageExecutionContext()
+    {
+        return this._pageExecutionContext;
+    }
+
+    get contexts()
+    {
+        return this._contexts;
+    }
+
+    add(context)
+    {
+        // FIXME: The backend sends duplicate page context execution contexts with the same id. Why?
+        if (context.isPageContext && this._pageExecutionContext) {
+            console.assert(context.id === this._pageExecutionContext.id);
+            return false;
+        }
+
+        this._contexts.push(context);
+
+        if (context.isPageContext) {
+            console.assert(!this._pageExecutionContext);
+            this._pageExecutionContext = context;
+            return true;
+        }
+
+        return false;
+    }
+
+    clear()
+    {
+        this._contexts = [];
+        this._pageExecutionContext = null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/FPSInstrument.js b/Source/WebInspectorUI/UserInterface/Models/FPSInstrument.js
new file mode 100644
index 000000000..a5e4452a7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/FPSInstrument.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FPSInstrument = class FPSInstrument extends WebInspector.Instrument
+{
+    constructor()
+    {
+        super();
+
+        console.assert(WebInspector.FPSInstrument.supported());
+    }
+
+    // Static
+
+    static supported()
+    {
+        // COMPATIBILITY (iOS 8): TimelineAgent.EventType.RenderingFrame did not exist.
+        return window.TimelineAgent && TimelineAgent.EventType.RenderingFrame;
+    }
+
+    // Protected
+
+    get timelineRecordType()
+    {
+        return WebInspector.TimelineRecord.Type.RenderingFrame;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Frame.js b/Source/WebInspectorUI/UserInterface/Models/Frame.js
new file mode 100644
index 000000000..321a216fc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Frame.js
@@ -0,0 +1,507 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Frame = class Frame extends WebInspector.Object
+{
+    constructor(id, name, securityOrigin, loaderIdentifier, mainResource)
+    {
+        super();
+
+        console.assert(id);
+
+        this._id = id;
+
+        this._name = null;
+        this._securityOrigin = null;
+
+        this._resourceCollection = new WebInspector.ResourceCollection;
+        this._provisionalResourceCollection = new WebInspector.ResourceCollection;
+
+        this._childFrames = [];
+        this._childFrameIdentifierMap = {};
+
+        this._parentFrame = null;
+        this._isMainFrame = false;
+
+        this._domContentReadyEventTimestamp = NaN;
+        this._loadEventTimestamp = NaN;
+
+        this._executionContextList = new WebInspector.ExecutionContextList;
+
+        this.initialize(name, securityOrigin, loaderIdentifier, mainResource);
+    }
+
+    // Public
+
+    initialize(name, securityOrigin, loaderIdentifier, mainResource)
+    {
+        console.assert(loaderIdentifier);
+        console.assert(mainResource);
+
+        var oldName = this._name;
+        var oldSecurityOrigin = this._securityOrigin;
+        var oldMainResource = this._mainResource;
+
+        this._name = name || null;
+        this._securityOrigin = securityOrigin || null;
+        this._loaderIdentifier = loaderIdentifier || null;
+
+        this._mainResource = mainResource;
+        this._mainResource._parentFrame = this;
+
+        if (oldMainResource && this._mainResource !== oldMainResource)
+            this._disassociateWithResource(oldMainResource);
+
+        this.removeAllResources();
+        this.removeAllChildFrames();
+        this.clearExecutionContexts();
+        this.clearProvisionalLoad();
+
+        if (this._mainResource !== oldMainResource)
+            this._dispatchMainResourceDidChangeEvent(oldMainResource);
+
+        if (this._securityOrigin !== oldSecurityOrigin)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.SecurityOriginDidChange, {oldSecurityOrigin});
+
+        if (this._name !== oldName)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.NameDidChange, {oldName});
+    }
+
+    startProvisionalLoad(provisionalMainResource)
+    {
+        console.assert(provisionalMainResource);
+
+        this._provisionalMainResource = provisionalMainResource;
+        this._provisionalMainResource._parentFrame = this;
+
+        this._provisionalLoaderIdentifier = provisionalMainResource.loaderIdentifier;
+
+        this._provisionalResourceCollection.removeAllResources();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadStarted);
+    }
+
+    commitProvisionalLoad(securityOrigin)
+    {
+        console.assert(this._provisionalMainResource);
+        console.assert(this._provisionalLoaderIdentifier);
+        if (!this._provisionalLoaderIdentifier)
+            return;
+
+        var oldSecurityOrigin = this._securityOrigin;
+        var oldMainResource = this._mainResource;
+
+        this._securityOrigin = securityOrigin || null;
+        this._loaderIdentifier = this._provisionalLoaderIdentifier;
+        this._mainResource = this._provisionalMainResource;
+
+        this._domContentReadyEventTimestamp = NaN;
+        this._loadEventTimestamp = NaN;
+
+        if (oldMainResource && this._mainResource !== oldMainResource)
+            this._disassociateWithResource(oldMainResource);
+
+        this.removeAllResources();
+
+        this._resourceCollection = this._provisionalResourceCollection;
+        this._provisionalResourceCollection = new WebInspector.ResourceCollection;
+
+        this.clearExecutionContexts(true);
+        this.clearProvisionalLoad(true);
+        this.removeAllChildFrames();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadCommitted);
+
+        if (this._mainResource !== oldMainResource)
+            this._dispatchMainResourceDidChangeEvent(oldMainResource);
+
+        if (this._securityOrigin !== oldSecurityOrigin)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.SecurityOriginDidChange, {oldSecurityOrigin});
+    }
+
+    clearProvisionalLoad(skipProvisionalLoadClearedEvent)
+    {
+        if (!this._provisionalLoaderIdentifier)
+            return;
+
+        this._provisionalLoaderIdentifier = null;
+        this._provisionalMainResource = null;
+        this._provisionalResourceCollection.removeAllResources();
+
+        if (!skipProvisionalLoadClearedEvent)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalLoadCleared);
+    }
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get loaderIdentifier()
+    {
+        return this._loaderIdentifier;
+    }
+
+    get provisionalLoaderIdentifier()
+    {
+        return this._provisionalLoaderIdentifier;
+    }
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get securityOrigin()
+    {
+        return this._securityOrigin;
+    }
+
+    get url()
+    {
+        return this._mainResource._url;
+    }
+
+    get domTree()
+    {
+        if (!this._domTree)
+            this._domTree = new WebInspector.DOMTree(this);
+        return this._domTree;
+    }
+
+    get pageExecutionContext()
+    {
+        return this._executionContextList.pageExecutionContext;
+    }
+
+    get executionContextList()
+    {
+        return this._executionContextList;
+    }
+
+    clearExecutionContexts(committingProvisionalLoad)
+    {
+        if (this._executionContextList.contexts.length) {
+            this._executionContextList.clear();
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ExecutionContextsCleared, {committingProvisionalLoad:!!committingProvisionalLoad});
+        }
+    }
+
+    addExecutionContext(context)
+    {
+        var changedPageContext = this._executionContextList.add(context);
+
+        if (changedPageContext)
+            this.dispatchEventToListeners(WebInspector.Frame.Event.PageExecutionContextChanged);
+    }
+
+    get mainResource()
+    {
+        return this._mainResource;
+    }
+
+    get provisionalMainResource()
+    {
+        return this._provisionalMainResource;
+    }
+
+    get parentFrame()
+    {
+        return this._parentFrame;
+    }
+
+    get childFrames()
+    {
+        return this._childFrames;
+    }
+
+    get domContentReadyEventTimestamp()
+    {
+        return this._domContentReadyEventTimestamp;
+    }
+
+    get loadEventTimestamp()
+    {
+        return this._loadEventTimestamp;
+    }
+
+    isMainFrame()
+    {
+        return this._isMainFrame;
+    }
+
+    markAsMainFrame()
+    {
+        this._isMainFrame = true;
+    }
+
+    unmarkAsMainFrame()
+    {
+        this._isMainFrame = false;
+    }
+
+    markDOMContentReadyEvent(timestamp)
+    {
+        this._domContentReadyEventTimestamp = timestamp || NaN;
+    }
+
+    markLoadEvent(timestamp)
+    {
+        this._loadEventTimestamp = timestamp || NaN;
+    }
+
+    isDetached()
+    {
+        var frame = this;
+        while (frame) {
+            if (frame.isMainFrame())
+                return false;
+            frame = frame.parentFrame;
+        }
+
+        return true;
+    }
+
+    childFrameForIdentifier(frameId)
+    {
+        return this._childFrameIdentifierMap[frameId] || null;
+    }
+
+    addChildFrame(frame)
+    {
+        console.assert(frame instanceof WebInspector.Frame);
+        if (!(frame instanceof WebInspector.Frame))
+            return;
+
+        if (frame._parentFrame === this)
+            return;
+
+        if (frame._parentFrame)
+            frame._parentFrame.removeChildFrame(frame);
+
+        this._childFrames.push(frame);
+        this._childFrameIdentifierMap[frame._id] = frame;
+
+        frame._parentFrame = this;
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasAdded, {childFrame: frame});
+    }
+
+    removeChildFrame(frameOrFrameId)
+    {
+        console.assert(frameOrFrameId);
+
+        if (frameOrFrameId instanceof WebInspector.Frame)
+            var childFrameId = frameOrFrameId._id;
+        else
+            var childFrameId = frameOrFrameId;
+
+        // Fetch the frame by id even if we were passed a WebInspector.Frame.
+        // We do this incase the WebInspector.Frame is a new object that isn't in _childFrames,
+        // but the id is a valid child frame.
+        var childFrame = this.childFrameForIdentifier(childFrameId);
+        console.assert(childFrame instanceof WebInspector.Frame);
+        if (!(childFrame instanceof WebInspector.Frame))
+            return;
+
+        console.assert(childFrame.parentFrame === this);
+
+        this._childFrames.remove(childFrame);
+        delete this._childFrameIdentifierMap[childFrame._id];
+
+        childFrame._detachFromParentFrame();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ChildFrameWasRemoved, {childFrame});
+    }
+
+    removeAllChildFrames()
+    {
+        this._detachFromParentFrame();
+
+        for (let childFrame of this._childFrames)
+            childFrame.removeAllChildFrames();
+
+        this._childFrames = [];
+        this._childFrameIdentifierMap = {};
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.AllChildFramesRemoved);
+    }
+
+    get resources()
+    {
+        return this._resourceCollection.resources;
+    }
+
+    resourceForURL(url, recursivelySearchChildFrames)
+    {
+        var resource = this._resourceCollection.resourceForURL(url);
+        if (resource)
+            return resource;
+
+        // Check the main resources of the child frames for the requested URL.
+        for (var i = 0; i < this._childFrames.length; ++i) {
+            resource = this._childFrames[i].mainResource;
+            if (resource.url === url)
+                return resource;
+        }
+
+        if (!recursivelySearchChildFrames)
+            return null;
+
+        // Recursively search resources of child frames.
+        for (var i = 0; i < this._childFrames.length; ++i) {
+            resource = this._childFrames[i].resourceForURL(url, true);
+            if (resource)
+                return resource;
+        }
+
+        return null;
+    }
+
+    resourcesWithType(type)
+    {
+        return this._resourceCollection.resourcesWithType(type);
+    }
+
+    addResource(resource)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        if (resource.parentFrame === this)
+            return;
+
+        if (resource.parentFrame)
+            resource.parentFrame.removeResource(resource);
+
+        this._associateWithResource(resource);
+
+        if (this._isProvisionalResource(resource)) {
+            this._provisionalResourceCollection.addResource(resource);
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ProvisionalResourceWasAdded, {resource});
+        } else {
+            this._resourceCollection.addResource(resource);
+            this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasAdded, {resource});
+        }
+    }
+
+    removeResource(resourceOrURL)
+    {
+        // This does not remove provisional resources.
+
+        var resource = this._resourceCollection.removeResource(resourceOrURL);
+        if (!resource)
+            return;
+
+        this._disassociateWithResource(resource);
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.ResourceWasRemoved, {resource});
+    }
+
+    removeAllResources()
+    {
+        // This does not remove provisional resources, use clearProvisionalLoad for that.
+
+        var resources = this.resources;
+        if (!resources.length)
+            return;
+
+        for (var i = 0; i < resources.length; ++i)
+            this._disassociateWithResource(resources[i]);
+
+        this._resourceCollection.removeAllResources();
+
+        this.dispatchEventToListeners(WebInspector.Frame.Event.AllResourcesRemoved);
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.Frame.MainResourceURLCookieKey] = this.mainResource.url.hash;
+        cookie[WebInspector.Frame.IsMainFrameCookieKey] = this._isMainFrame;
+    }
+
+    // Private
+
+    _detachFromParentFrame()
+    {
+        if (this._domTree) {
+            this._domTree.disconnect();
+            this._domTree = null;
+        }
+
+        this._parentFrame = null;
+    }
+
+    _isProvisionalResource(resource)
+    {
+        return (resource.loaderIdentifier && this._provisionalLoaderIdentifier && resource.loaderIdentifier === this._provisionalLoaderIdentifier);
+    }
+
+    _associateWithResource(resource)
+    {
+        console.assert(!resource._parentFrame);
+        if (resource._parentFrame)
+            return;
+
+        resource._parentFrame = this;
+    }
+
+    _disassociateWithResource(resource)
+    {
+        console.assert(resource.parentFrame === this);
+        if (resource.parentFrame !== this)
+            return;
+
+        resource._parentFrame = null;
+    }
+
+    _dispatchMainResourceDidChangeEvent(oldMainResource)
+    {
+        this.dispatchEventToListeners(WebInspector.Frame.Event.MainResourceDidChange, {oldMainResource});
+    }
+};
+
+WebInspector.Frame.Event = {
+    NameDidChange: "frame-name-did-change",
+    SecurityOriginDidChange: "frame-security-origin-did-change",
+    MainResourceDidChange: "frame-main-resource-did-change",
+    ProvisionalLoadStarted: "frame-provisional-load-started",
+    ProvisionalLoadCommitted: "frame-provisional-load-committed",
+    ProvisionalLoadCleared: "frame-provisional-load-cleared",
+    ProvisionalResourceWasAdded: "frame-provisional-resource-was-added",
+    ResourceWasAdded: "frame-resource-was-added",
+    ResourceWasRemoved: "frame-resource-was-removed",
+    AllResourcesRemoved: "frame-all-resources-removed",
+    ChildFrameWasAdded: "frame-child-frame-was-added",
+    ChildFrameWasRemoved: "frame-child-frame-was-removed",
+    AllChildFramesRemoved: "frame-all-child-frames-removed",
+    PageExecutionContextChanged: "frame-page-execution-context-changed",
+    ExecutionContextsCleared: "frame-execution-contexts-cleared"
+};
+
+WebInspector.Frame.TypeIdentifier = "Frame";
+WebInspector.Frame.MainResourceURLCookieKey = "frame-main-resource-url";
+WebInspector.Frame.IsMainFrameCookieKey = "frame-is-main-frame";
diff --git a/Source/WebInspectorUI/UserInterface/Models/GarbageCollection.js b/Source/WebInspectorUI/UserInterface/Models/GarbageCollection.js
new file mode 100644
index 000000000..9d063b14e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/GarbageCollection.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GarbageCollection = class GarbageCollection extends WebInspector.Object
+{
+    constructor(type, startTime, endTime)
+    {
+        super();
+
+        console.assert(endTime > startTime);
+
+        this._type = type;
+        this._startTime = startTime;
+        this._endTime = endTime;
+    }
+
+    // Static
+
+    static fromPayload(payload)
+    {
+        let type = WebInspector.GarbageCollection.Type.Full;
+        if (payload.type === HeapAgent.GarbageCollectionType.Partial)
+            type = WebInspector.GarbageCollection.Type.Partial;
+
+        return new WebInspector.GarbageCollection(type, payload.startTime, payload.endTime);
+    }
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    get endTime()
+    {
+        return this._endTime;
+    }
+
+    get duration()
+    {
+        return this._endTime - this._startTime;
+    }
+};
+
+WebInspector.GarbageCollection.Type = {
+    Partial: Symbol("Partial"),
+    Full: Symbol("Full")
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Geometry.js b/Source/WebInspectorUI/UserInterface/Models/Geometry.js
new file mode 100644
index 000000000..5910c66d3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Geometry.js
@@ -0,0 +1,478 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Point = class Point
+{
+    constructor(x, y)
+    {
+        this.x = x || 0;
+        this.y = y || 0;
+    }
+
+    // Static
+
+    static fromEvent(event)
+    {
+        return new WebInspector.Point(event.pageX, event.pageY);
+    }
+
+    static fromEventInElement(event, element)
+    {
+        var wkPoint = window.webkitConvertPointFromPageToNode(element, new WebKitPoint(event.pageX, event.pageY));
+        return new WebInspector.Point(wkPoint.x, wkPoint.y);
+    }
+
+    // Public
+
+    toString()
+    {
+        return "WebInspector.Point[" + this.x + "," + this.y + "]";
+    }
+
+    copy()
+    {
+        return new WebInspector.Point(this.x, this.y);
+    }
+
+    equals(anotherPoint)
+    {
+        return (this.x === anotherPoint.x && this.y === anotherPoint.y);
+    }
+
+    distance(anotherPoint)
+    {
+        var dx = anotherPoint.x - this.x;
+        var dy = anotherPoint.y - this.y;
+        return Math.sqrt(dx * dx, dy * dy);
+    }
+};
+
+WebInspector.Size = class Size
+{
+    constructor(width, height)
+    {
+        this.width = width || 0;
+        this.height = height || 0;
+    }
+
+    // Public
+
+    toString()
+    {
+        return "WebInspector.Size[" + this.width + "," + this.height + "]";
+    }
+
+    copy()
+    {
+        return new WebInspector.Size(this.width, this.height);
+    }
+
+    equals(anotherSize)
+    {
+        return (this.width === anotherSize.width && this.height === anotherSize.height);
+    }
+};
+
+WebInspector.Size.ZERO_SIZE = new WebInspector.Size(0, 0);
+
+
+WebInspector.Rect = class Rect
+{
+    constructor(x, y, width, height)
+    {
+        this.origin = new WebInspector.Point(x || 0, y || 0);
+        this.size = new WebInspector.Size(width || 0, height || 0);
+    }
+
+    // Static
+
+    static rectFromClientRect(clientRect)
+    {
+        return new WebInspector.Rect(clientRect.left, clientRect.top, clientRect.width, clientRect.height);
+    }
+
+    static unionOfRects(rects)
+    {
+        var union = rects[0];
+        for (var i = 1; i < rects.length; ++i)
+            union = union.unionWithRect(rects[i]);
+        return union;
+    }
+
+    // Public
+
+    toString()
+    {
+        return "WebInspector.Rect[" + [this.origin.x, this.origin.y, this.size.width, this.size.height].join(", ") + "]";
+    }
+
+    copy()
+    {
+        return new WebInspector.Rect(this.origin.x, this.origin.y, this.size.width, this.size.height);
+    }
+
+    equals(anotherRect)
+    {
+        return (this.origin.equals(anotherRect.origin) && this.size.equals(anotherRect.size));
+    }
+
+    inset(insets)
+    {
+        return new WebInspector.Rect(
+            this.origin.x + insets.left,
+            this.origin.y + insets.top,
+            this.size.width - insets.left - insets.right,
+            this.size.height - insets.top - insets.bottom
+        );
+    }
+
+    pad(padding)
+    {
+        return new WebInspector.Rect(
+            this.origin.x - padding,
+            this.origin.y - padding,
+            this.size.width + padding * 2,
+            this.size.height + padding * 2
+        );
+    }
+
+    minX()
+    {
+        return this.origin.x;
+    }
+
+    minY()
+    {
+        return this.origin.y;
+    }
+
+    midX()
+    {
+        return this.origin.x + (this.size.width / 2);
+    }
+
+    midY()
+    {
+        return this.origin.y + (this.size.height / 2);
+    }
+
+    maxX()
+    {
+        return this.origin.x + this.size.width;
+    }
+
+    maxY()
+    {
+        return this.origin.y + this.size.height;
+    }
+
+    intersectionWithRect(rect)
+    {
+        var x1 = Math.max(this.minX(), rect.minX());
+        var x2 = Math.min(this.maxX(), rect.maxX());
+        if (x1 > x2)
+            return WebInspector.Rect.ZERO_RECT;
+        var intersection = new WebInspector.Rect;
+        intersection.origin.x = x1;
+        intersection.size.width = x2 - x1;
+        var y1 = Math.max(this.minY(), rect.minY());
+        var y2 = Math.min(this.maxY(), rect.maxY());
+        if (y1 > y2)
+            return WebInspector.Rect.ZERO_RECT;
+        intersection.origin.y = y1;
+        intersection.size.height = y2 - y1;
+        return intersection;
+    }
+
+    unionWithRect(rect)
+    {
+        var x = Math.min(this.minX(), rect.minX());
+        var y = Math.min(this.minY(), rect.minY());
+        var width = Math.max(this.maxX(), rect.maxX()) - x;
+        var height = Math.max(this.maxY(), rect.maxY()) - y;
+        return new WebInspector.Rect(x, y, width, height);
+    }
+
+    round()
+    {
+        return new WebInspector.Rect(
+            Math.floor(this.origin.x),
+            Math.floor(this.origin.y),
+            Math.ceil(this.size.width),
+            Math.ceil(this.size.height)
+        );
+    }
+};
+
+WebInspector.Rect.ZERO_RECT = new WebInspector.Rect(0, 0, 0, 0);
+
+
+WebInspector.EdgeInsets = class EdgeInsets
+{
+    constructor(top, right, bottom, left)
+    {
+        console.assert(arguments.length === 1 || arguments.length === 4);
+
+        if (arguments.length === 1) {
+            this.top = top;
+            this.right = top;
+            this.bottom = top;
+            this.left = top;
+        } else if (arguments.length === 4) {
+            this.top = top;
+            this.right = right;
+            this.bottom = bottom;
+            this.left = left;
+        }
+    }
+
+    // Public
+
+    equals(anotherInset)
+    {
+        return (this.top === anotherInset.top && this.right === anotherInset.right &&
+                this.bottom === anotherInset.bottom && this.left === anotherInset.left);
+    }
+
+    copy()
+    {
+        return new WebInspector.EdgeInsets(this.top, this.right, this.bottom, this.left);
+    }
+};
+
+WebInspector.RectEdge = {
+    MIN_X : 0,
+    MIN_Y : 1,
+    MAX_X : 2,
+    MAX_Y : 3
+};
+
+WebInspector.Quad = class Quad
+{
+    constructor(quad)
+    {
+        this.points = [
+            new WebInspector.Point(quad[0], quad[1]), // top left
+            new WebInspector.Point(quad[2], quad[3]), // top right
+            new WebInspector.Point(quad[4], quad[5]), // bottom right
+            new WebInspector.Point(quad[6], quad[7])  // bottom left
+        ];
+
+        this.width = Math.round(Math.sqrt(Math.pow(quad[0] - quad[2], 2) + Math.pow(quad[1] - quad[3], 2)));
+        this.height = Math.round(Math.sqrt(Math.pow(quad[0] - quad[6], 2) + Math.pow(quad[1] - quad[7], 2)));
+    }
+
+    // Public
+
+    toProtocol()
+    {
+        return [
+            this.points[0].x, this.points[0].y,
+            this.points[1].x, this.points[1].y,
+            this.points[2].x, this.points[2].y,
+            this.points[3].x, this.points[3].y
+        ];
+    }
+};
+
+WebInspector.Polygon = class Polygon
+{
+    constructor(points)
+    {
+        this.points = points;
+    }
+
+    // Public
+
+    bounds()
+    {
+        var minX = Number.MAX_VALUE;
+        var minY = Number.MAX_VALUE;
+        var maxX = -Number.MAX_VALUE;
+        var maxY = -Number.MAX_VALUE;
+        for (var point of this.points) {
+            minX = Math.min(minX, point.x);
+            maxX = Math.max(maxX, point.x);
+            minY = Math.min(minY, point.y);
+            maxY = Math.max(maxY, point.y);
+        }
+        return new WebInspector.Rect(minX, minY, maxX - minX, maxY - minY);
+    }
+}
+
+WebInspector.CubicBezier = class CubicBezier
+{
+    constructor(x1, y1, x2, y2)
+    {
+        this._inPoint = new WebInspector.Point(x1, y1);
+        this._outPoint = new WebInspector.Point(x2, y2);
+
+        // Calculate the polynomial coefficients, implicit first and last control points are (0,0) and (1,1).
+        this._curveInfo = {
+            x: {c: 3.0 * x1},
+            y: {c: 3.0 * y1}
+        }
+
+        this._curveInfo.x.b = 3.0 * (x2 - x1) - this._curveInfo.x.c;
+        this._curveInfo.x.a = 1.0 - this._curveInfo.x.c - this._curveInfo.x.b;
+
+        this._curveInfo.y.b = 3.0 * (y2 - y1) - this._curveInfo.y.c;
+        this._curveInfo.y.a = 1.0 - this._curveInfo.y.c - this._curveInfo.y.b;
+    }
+
+    // Static
+
+    static fromCoordinates(coordinates)
+    {
+        if (!coordinates || coordinates.length < 4)
+            return null;
+
+        coordinates = coordinates.map(Number);
+        if (coordinates.includes(NaN))
+            return null;
+
+        return new WebInspector.CubicBezier(coordinates[0], coordinates[1], coordinates[2], coordinates[3]);
+    }
+
+    static fromString(text)
+    {
+        if (!text || !text.length)
+            return null;
+
+        var trimmedText = text.toLowerCase().replace(/\s/g, "");
+        if (!trimmedText.length)
+            return null;
+
+        if (Object.keys(WebInspector.CubicBezier.keywordValues).includes(trimmedText))
+            return WebInspector.CubicBezier.fromCoordinates(WebInspector.CubicBezier.keywordValues[trimmedText]);
+
+        var matches = trimmedText.match(/^cubic-bezier\(([-\d.]+),([-\d.]+),([-\d.]+),([-\d.]+)\)$/);
+        if (!matches)
+            return null;
+
+        matches.splice(0, 1);
+        return WebInspector.CubicBezier.fromCoordinates(matches);
+    }
+
+    // Public
+
+    get inPoint()
+    {
+        return this._inPoint;
+    }
+
+    get outPoint()
+    {
+        return this._outPoint;
+    }
+
+    copy()
+    {
+        return new WebInspector.CubicBezier(this._inPoint.x, this._inPoint.y, this._outPoint.x, this._outPoint.y);
+    }
+
+    toString()
+    {
+        var values = [this._inPoint.x, this._inPoint.y, this._outPoint.x, this._outPoint.y];
+        for (var key in WebInspector.CubicBezier.keywordValues) {
+            if (Object.shallowEqual(WebInspector.CubicBezier.keywordValues[key], values))
+                return key;
+        }
+
+        return "cubic-bezier(" + values.join(", ") + ")";
+    }
+
+    solve(x, epsilon)
+    {
+        return this._sampleCurveY(this._solveCurveX(x, epsilon));
+    }
+
+    // Private
+
+    _sampleCurveX(t)
+    {
+        // `ax t^3 + bx t^2 + cx t' expanded using Horner's rule.
+        return ((this._curveInfo.x.a * t + this._curveInfo.x.b) * t + this._curveInfo.x.c) * t;
+    }
+
+    _sampleCurveY(t)
+    {
+        return ((this._curveInfo.y.a * t + this._curveInfo.y.b) * t + this._curveInfo.y.c) * t;
+    }
+
+    _sampleCurveDerivativeX(t)
+    {
+        return (3.0 * this._curveInfo.x.a * t + 2.0 * this._curveInfo.x.b) * t + this._curveInfo.x.c;
+    }
+
+    // Given an x value, find a parametric value it came from.
+    _solveCurveX(x, epsilon)
+    {
+        var t0, t1, t2, x2, d2, i;
+
+        // First try a few iterations of Newton's method -- normally very fast.
+        for (t2 = x, i = 0; i < 8; i++) {
+            x2 = this._sampleCurveX(t2) - x;
+            if (Math.abs(x2) < epsilon)
+                return t2;
+            d2 = this._sampleCurveDerivativeX(t2);
+            if (Math.abs(d2) < 1e-6)
+                break;
+            t2 = t2 - x2 / d2;
+        }
+
+        // Fall back to the bisection method for reliability.
+        t0 = 0.0;
+        t1 = 1.0;
+        t2 = x;
+
+        if (t2 < t0)
+            return t0;
+        if (t2 > t1)
+            return t1;
+
+        while (t0 < t1) {
+            x2 = this._sampleCurveX(t2);
+            if (Math.abs(x2 - x) < epsilon)
+                return t2;
+            if (x > x2)
+                t0 = t2;
+            else
+                t1 = t2;
+            t2 = (t1 - t0) * 0.5 + t0;
+        }
+
+        // Failure.
+        return t2;
+    }
+}
+
+WebInspector.CubicBezier.keywordValues = {
+    "ease":         [0.25, 0.1, 0.25, 1],
+    "ease-in":      [0.42, 0, 1, 1],
+    "ease-out":     [0, 0, 0.58, 1],
+    "ease-in-out":  [0.42, 0, 0.58, 1],
+    "linear":       [0, 0, 1, 1]
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Gradient.js b/Source/WebInspectorUI/UserInterface/Models/Gradient.js
new file mode 100644
index 000000000..ae23cb578
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Gradient.js
@@ -0,0 +1,302 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Gradient = class Gradient
+{
+    constructor(type, stops)
+    {
+        this.type = type;
+        this.stops = stops;
+    }
+
+    // Static
+
+    static fromString(cssString)
+    {
+        var type;
+        var openingParenthesisIndex = cssString.indexOf("(");
+        var typeString = cssString.substring(0, openingParenthesisIndex);
+        if (typeString.indexOf(WebInspector.Gradient.Types.Linear) !== -1)
+            type = WebInspector.Gradient.Types.Linear;
+        else if (typeString.indexOf(WebInspector.Gradient.Types.Radial) !== -1)
+            type = WebInspector.Gradient.Types.Radial;
+        else
+            return null;
+
+        var components = [];
+        var currentParams = [];
+        var currentParam = "";
+        var openParentheses = 0;
+        var ch = openingParenthesisIndex + 1;
+        var c = null;
+        while (c = cssString[ch]) {
+            if (c === "(")
+                openParentheses++;
+            if (c === ")")
+                openParentheses--;
+
+            var isComma = c === ",";
+            var isSpace = /\s/.test(c);
+
+            if (openParentheses === 0) {
+                if (isSpace) {
+                    if (currentParam !== "")
+                        currentParams.push(currentParam);
+                    currentParam = "";
+                } else if (isComma) {
+                    currentParams.push(currentParam);
+                    components.push(currentParams);
+                    currentParams = [];
+                    currentParam = "";
+                }
+            }
+
+            if (openParentheses === -1) {
+                currentParams.push(currentParam);
+                components.push(currentParams);
+                break;
+            }
+
+            if (openParentheses > 0 || (!isComma && !isSpace))
+                currentParam += c;
+
+            ch++;
+        }
+
+        var gradient;
+        if (type === WebInspector.Gradient.Types.Linear)
+            gradient = WebInspector.LinearGradient.fromComponents(components);
+        else
+            gradient = WebInspector.RadialGradient.fromComponents(components);
+
+        if (gradient)
+            gradient.repeats = typeString.startsWith("repeating");
+
+        return gradient;
+    }
+
+    static stopsWithComponents(components)
+    {
+        // FIXME: handle lengths.
+        var stops = components.map(function(component) {
+            while (component.length) {
+                var color = WebInspector.Color.fromString(component.shift());
+                if (!color)
+                    continue;
+
+                var stop = {color};
+                if (component.length && component[0].substr(-1) === "%")
+                    stop.offset = parseFloat(component.shift()) / 100;
+                return stop;
+            }
+        });
+
+        if (!stops.length)
+            return null;
+
+        for (var i = 0, count = stops.length; i < count; ++i) {
+            var stop = stops[i];
+
+            // If one of the stops failed to parse, then this is not a valid
+            // set of components for a gradient. So the whole thing is invalid.
+            if (!stop)
+                return null;
+
+            if (!stop.offset)
+                stop.offset = i / (count - 1);
+        }
+
+        return stops;
+    }
+
+    // Public
+
+    stringFromStops(stops)
+    {
+        var count = stops.length - 1;
+        return stops.map(function(stop, index) {
+            var str = stop.color;
+            if (stop.offset !== index / count)
+                str += " " + Math.round(stop.offset * 10000) / 100 + "%";
+            return str;
+        }).join(", ");
+    }
+
+    // Public
+
+    copy()
+    {
+        // Implemented by subclasses.
+    }
+
+    toString()
+    {
+        // Implemented by subclasses.
+    }
+};
+
+WebInspector.Gradient.Types = {
+    Linear: "linear-gradient",
+    Radial: "radial-gradient"
+};
+
+WebInspector.LinearGradient = class LinearGradient extends WebInspector.Gradient
+{
+    constructor(angle, stops)
+    {
+        super(WebInspector.Gradient.Types.Linear, stops);
+        this.angle = angle;
+    }
+
+    // Static
+
+    static fromComponents(components)
+    {
+        var angle = 180;
+
+        if (components[0].length === 1 && components[0][0].substr(-3) === "deg") {
+            angle = (parseFloat(components[0][0]) % 360 + 360) % 360;
+            components.shift();
+        } else if (components[0][0] === "to") {
+            components[0].shift();
+            switch (components[0].sort().join(" ")) {
+            case "top":
+                angle = 0;
+                break;
+            case "right top":
+                angle = 45;
+                break;
+            case "right":
+                angle = 90;
+                break;
+            case "bottom right":
+                angle = 135;
+                break;
+            case "bottom":
+                angle = 180;
+                break;
+            case "bottom left":
+                angle = 225;
+                break;
+            case "left":
+                angle = 270;
+                break;
+            case "left top":
+                angle = 315;
+                break;
+            default:
+                return null;
+            }
+            components.shift();
+        } else if (components[0].length !== 1 && !WebInspector.Color.fromString(components[0][0])) {
+            // If the first component is not a color, then we're dealing with a
+            // legacy linear gradient format that we don't support.
+            return null;
+        }
+
+        var stops = WebInspector.Gradient.stopsWithComponents(components);
+        if (!stops)
+            return null;
+
+        return new WebInspector.LinearGradient(angle, stops);
+    }
+
+    // Public
+
+    copy()
+    {
+        return new WebInspector.LinearGradient(this.angle, this.stops.concat());
+    }
+
+    toString()
+    {
+        var str = "";
+
+        if (this.angle === 0)
+            str += "to top";
+        else if (this.angle === 45)
+            str += "to top right";
+        else if (this.angle === 90)
+            str += "to right";
+        else if (this.angle === 135)
+            str += "to bottom right";
+        else if (this.angle === 225)
+            str += "to bottom left";
+        else if (this.angle === 270)
+            str += "to left";
+        else if (this.angle === 315)
+            str += "to top left";
+        else if (this.angle !== 180)
+            str += this.angle + "deg";
+
+        if (str !== "")
+            str += ", ";
+
+        str += this.stringFromStops(this.stops);
+
+        return (this.repeats ? "repeating-" : "") + this.type + "(" + str + ")";
+    }
+};
+
+WebInspector.RadialGradient = class RadialGradient extends WebInspector.Gradient
+{
+    constructor(sizing, stops)
+    {
+        super(WebInspector.Gradient.Types.Radial, stops);
+        this.sizing = sizing;
+    }
+
+    // Static
+
+    static fromComponents(components)
+    {
+        var sizing = !WebInspector.Color.fromString(components[0].join(" ")) ? components.shift().join(" ") : "";
+
+        var stops = WebInspector.Gradient.stopsWithComponents(components);
+        if (!stops)
+            return null;
+
+        return new WebInspector.RadialGradient(sizing, stops);
+    }
+
+    // Public
+
+    copy()
+    {
+        return new WebInspector.RadialGradient(this.sizing, this.stops.concat());
+    }
+
+    toString()
+    {
+        var str = this.sizing;
+
+        if (str !== "")
+            str += ", ";
+
+        str += this.stringFromStops(this.stops);
+
+        return (this.repeats ? "repeating-" : "") + this.type + "(" + str + ")";
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/IndexedDatabase.js b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabase.js
new file mode 100644
index 000000000..224da0177
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabase.js
@@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabase = class IndexedDatabase extends WebInspector.Object
+{
+    constructor(name, securityOrigin, version, objectStores)
+    {
+        super();
+
+        this._name = name;
+        this._securityOrigin = securityOrigin;
+        this._host = parseSecurityOrigin(securityOrigin).host;
+        this._version = version;
+        this._objectStores = objectStores || [];
+
+        for (var objectStore of this._objectStores)
+            objectStore.establishRelationship(this);
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get securityOrigin()
+    {
+        return this._securityOrigin;
+    }
+
+    get host()
+    {
+        return this._host;
+    }
+
+    get version()
+    {
+        return this._version;
+    }
+
+    get objectStores()
+    {
+        return this._objectStores;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.IndexedDatabase.NameCookieKey] = this._name;
+        cookie[WebInspector.IndexedDatabase.HostCookieKey] = this._host;
+    }
+};
+
+WebInspector.IndexedDatabase.TypeIdentifier = "indexed-database";
+WebInspector.IndexedDatabase.NameCookieKey = "indexed-database-name";
+WebInspector.IndexedDatabase.HostCookieKey = "indexed-database-host";
diff --git a/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStore.js b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStore.js
new file mode 100644
index 000000000..b162d3ca7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStore.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseObjectStore = class IndexedDatabaseObjectStore extends WebInspector.Object
+{
+    constructor(name, keyPath, autoIncrement, indexes)
+    {
+        super();
+
+        this._name = name;
+        this._keyPath = keyPath;
+        this._autoIncrement = autoIncrement || false;
+        this._indexes = indexes || [];
+        this._parentDatabase = null;
+
+        for (var index of this._indexes)
+            index.establishRelationship(this);
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get keyPath()
+    {
+        return this._keyPath;
+    }
+
+    get autoIncrement()
+    {
+        return this._autoIncrement;
+    }
+
+    get parentDatabase()
+    {
+        return this._parentDatabase;
+    }
+
+    get indexes()
+    {
+        return this._indexes;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.IndexedDatabaseObjectStore.NameCookieKey] = this._name;
+        cookie[WebInspector.IndexedDatabaseObjectStore.KeyPathCookieKey] = this._keyPath;
+    }
+
+    // Protected
+
+    establishRelationship(parentDatabase)
+    {
+        this._parentDatabase = parentDatabase || null;
+    }
+};
+
+WebInspector.IndexedDatabaseObjectStore.TypeIdentifier = "indexed-database-object-store";
+WebInspector.IndexedDatabaseObjectStore.NameCookieKey = "indexed-database-object-store-name";
+WebInspector.IndexedDatabaseObjectStore.KeyPathCookieKey = "indexed-database-object-store-key-path";
diff --git a/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStoreIndex.js b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStoreIndex.js
new file mode 100644
index 000000000..f53bdb9b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IndexedDatabaseObjectStoreIndex.js
@@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseObjectStoreIndex = class IndexedDatabaseObjectStoreIndex extends WebInspector.Object
+{
+    constructor(name, keyPath, unique, multiEntry)
+    {
+        super();
+
+        this._name = name;
+        this._keyPath = keyPath;
+        this._unique = unique || false;
+        this._multiEntry = multiEntry || false;
+        this._parentObjectStore = null;
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get keyPath()
+    {
+        return this._keyPath;
+    }
+
+    get unique()
+    {
+        return this._unique;
+    }
+
+    get multiEntry()
+    {
+        return this._multiEntry;
+    }
+
+    get parentObjectStore()
+    {
+        return this._parentObjectStore;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.IndexedDatabaseObjectStoreIndex.NameCookieKey] = this._name;
+        cookie[WebInspector.IndexedDatabaseObjectStoreIndex.KeyPathCookieKey] = this._keyPath;
+    }
+
+    // Protected
+
+    establishRelationship(parentObjectStore)
+    {
+        this._parentObjectStore = parentObjectStore || null;
+    }
+};
+
+WebInspector.IndexedDatabaseObjectStoreIndex.TypeIdentifier = "indexed-database-object-store-index";
+WebInspector.IndexedDatabaseObjectStoreIndex.NameCookieKey = "indexed-database-object-store-index-name";
+WebInspector.IndexedDatabaseObjectStoreIndex.KeyPathCookieKey = "indexed-database-object-store-index-key-path";
diff --git a/Source/WebInspectorUI/UserInterface/Models/Instrument.js b/Source/WebInspectorUI/UserInterface/Models/Instrument.js
new file mode 100644
index 000000000..b7385a62f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Instrument.js
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Instrument = class Instrument extends WebInspector.Object
+{
+    // Static
+
+    static startLegacyTimelineAgent()
+    {
+        console.assert(window.TimelineAgent, "Attempted to start legacy timeline agent without TimelineAgent.");
+
+        if (WebInspector.Instrument._legacyTimelineAgentStarted)
+            return;
+
+        WebInspector.Instrument._legacyTimelineAgentStarted = true;
+
+        let result = TimelineAgent.start();
+
+        // COMPATIBILITY (iOS 7): recordingStarted event did not exist yet. Start explicitly.
+        if (!TimelineAgent.hasEvent("recordingStarted")) {
+            result.then(function() {
+                WebInspector.timelineManager.capturingStarted();
+            });
+        }
+    }
+
+    static stopLegacyTimelineAgent()
+    {
+        if (!WebInspector.Instrument._legacyTimelineAgentStarted)
+            return;
+
+        WebInspector.Instrument._legacyTimelineAgentStarted = false;
+
+        TimelineAgent.stop();
+    }
+
+    // Protected
+
+    get timelineRecordType()
+    {
+        return null; // Implemented by subclasses.
+    }
+
+    startInstrumentation()
+    {
+        WebInspector.Instrument.startLegacyTimelineAgent();
+    }
+
+    stopInstrumentation()
+    {
+        WebInspector.Instrument.stopLegacyTimelineAgent();
+    }
+};
+
+WebInspector.Instrument._legacyTimelineAgentStarted = false;
diff --git a/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js b/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js
new file mode 100644
index 000000000..82151e99f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/IssueMessage.js
@@ -0,0 +1,305 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IssueMessage = class IssueMessage extends WebInspector.Object
+{
+    constructor(source, level, text, url, lineNumber, columnNumber, parameters)
+    {
+        super();
+
+        this._level = level;
+        this._text = text;
+        this._source = source;
+
+        // FIXME <http://webkit.org/b/76404>: Remove the string equality checks for undefined
+        // once we don't get that value anymore from WebCore.
+
+        // FIXME: If the URL is undefined, get the URL from the stacktrace.
+        if (url && url !== "undefined")
+            this._url = url;
+
+        if (typeof lineNumber === "number" && lineNumber >= 0 && this._url)
+            this._sourceCodeLocation = new WebInspector.SourceCodeLocation(WebInspector.frameResourceManager.resourceForURL(url), lineNumber, columnNumber);
+
+        // FIXME: <https://webkit.org/b/142553> Web Inspector: Merge IssueMessage/ConsoleMessage - both attempt to modify the Console Messages parameter independently
+
+        if (parameters && parameters !== "undefined") {
+            this._parameters = [];
+            for (var i = 0; i < parameters.length; ++i) {
+                if (parameters[i] instanceof WebInspector.RemoteObject) {
+                    this._parameters.push(parameters[i]);
+                    continue;
+                }
+
+                if (typeof parameters[i] === "object")
+                    this._parameters.push(WebInspector.RemoteObject.fromPayload(parameters[i]));
+                else
+                    this._parameters.push(WebInspector.RemoteObject.fromPrimitiveValue(parameters[i]));
+            }
+        }
+
+        this._formatTextIfNecessary();
+
+        switch (source) {
+        case "javascript":
+            // FIXME: It would be nice if we had this information (the specific type of JavaScript error)
+            // as part of the data passed from WebCore, instead of having to determine it ourselves.
+            var prefixRegex = /^([^:]+): (?:DOM Exception \d+: )?/;
+            var match = prefixRegex.exec(this._text);
+            if (match && match[1] in WebInspector.IssueMessage.Type._prefixTypeMap) {
+                this._type = WebInspector.IssueMessage.Type._prefixTypeMap[match[1]];
+                this._text = this._text.substring(match[0].length);
+            } else
+                this._type = WebInspector.IssueMessage.Type.OtherIssue;
+            break;
+
+        case "css":
+        case "xml":
+            this._type = WebInspector.IssueMessage.Type.PageIssue;
+            break;
+
+        case "network":
+            this._type = WebInspector.IssueMessage.Type.NetworkIssue;
+            break;
+
+        case "security":
+            this._type = WebInspector.IssueMessage.Type.SecurityIssue;
+            break;
+
+        case "console-api":
+        case "storage":
+        case "appcache":
+        case "rendering":
+        case "other":
+            this._type = WebInspector.IssueMessage.Type.OtherIssue;
+            break;
+
+        default:
+            console.error("Unknown issue source:", source);
+            this._type = WebInspector.IssueMessage.Type.OtherIssue;
+        }
+
+        if (this._sourceCodeLocation)
+            this._sourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, this._sourceCodeLocationDisplayLocationChanged, this);
+    }
+
+    // Static
+
+    static displayName(type)
+    {
+        switch(type) {
+        case WebInspector.IssueMessage.Type.SemanticIssue:
+            return WebInspector.UIString("Semantic Issue");
+        case WebInspector.IssueMessage.Type.RangeIssue:
+            return WebInspector.UIString("Range Issue");
+        case WebInspector.IssueMessage.Type.ReferenceIssue:
+            return WebInspector.UIString("Reference Issue");
+        case WebInspector.IssueMessage.Type.TypeIssue:
+            return WebInspector.UIString("Type Issue");
+        case WebInspector.IssueMessage.Type.PageIssue:
+            return WebInspector.UIString("Page Issue");
+        case WebInspector.IssueMessage.Type.NetworkIssue:
+            return WebInspector.UIString("Network Issue");
+        case WebInspector.IssueMessage.Type.SecurityIssue:
+            return WebInspector.UIString("Security Issue");
+        case WebInspector.IssueMessage.Type.OtherIssue:
+            return WebInspector.UIString("Other Issue");
+        default:
+            console.error("Unknown issue message type:", type);
+            return WebInspector.UIString("Other Issue");
+        }
+    }
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get level()
+    {
+        return this._level;
+    }
+
+    get text()
+    {
+        return this._text;
+    }
+
+    get source()
+    {
+        return this._source;
+    }
+
+    get url()
+    {
+        return this._url;
+    }
+
+    get lineNumber()
+    {
+        if (this._sourceCodeLocation)
+            return this._sourceCodeLocation.lineNumber;
+    }
+
+    get columnNumber()
+    {
+        if (this._sourceCodeLocation)
+            return this._sourceCodeLocation.columnNumber;
+    }
+
+    get displayLineNumber()
+    {
+        if (this._sourceCodeLocation)
+            return this._sourceCodeLocation.displayLineNumber;
+    }
+
+    get displayColumnNumber()
+    {
+        if (this._sourceCodeLocation)
+            return this._sourceCodeLocation.displayColumnNumber;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.IssueMessage.URLCookieKey] = this.url;
+        cookie[WebInspector.IssueMessage.LineNumberCookieKey] = this.sourceCodeLocation.lineNumber;
+        cookie[WebInspector.IssueMessage.ColumnNumberCookieKey] = this.sourceCodeLocation.columnNumber;
+    }
+
+    // Private
+
+    _formatTextIfNecessary()
+    {
+        if (!this._parameters)
+            return;
+
+        if (WebInspector.RemoteObject.type(this._parameters[0]) !== "string")
+            return;
+
+        function valueFormatter(obj)
+        {
+            return obj.description;
+        }
+
+        var formatters = {};
+        formatters.o = valueFormatter;
+        formatters.s = valueFormatter;
+        formatters.f = valueFormatter;
+        formatters.i = valueFormatter;
+        formatters.d = valueFormatter;
+
+        function append(a, b)
+        {
+            a += b;
+            return a;
+        }
+
+        var result = String.format(this._parameters[0].description, this._parameters.slice(1), formatters, "", append);
+        var resultText = result.formattedResult;
+
+        for (var i = 0; i < result.unusedSubstitutions.length; ++i)
+            resultText += " " + result.unusedSubstitutions[i].description;
+
+        this._text = resultText;
+    }
+
+    _sourceCodeLocationDisplayLocationChanged(event)
+    {
+        this.dispatchEventToListeners(WebInspector.IssueMessage.Event.DisplayLocationDidChange, event.data);
+    }
+};
+
+WebInspector.IssueMessage.Level = {
+    Error: "error",
+    Warning: "warning"
+};
+
+WebInspector.IssueMessage.Type = {
+    SemanticIssue: "issue-message-type-semantic-issue",
+    RangeIssue: "issue-message-type-range-issue",
+    ReferenceIssue: "issue-message-type-reference-issue",
+    TypeIssue: "issue-message-type-type-issue",
+    PageIssue: "issue-message-type-page-issue",
+    NetworkIssue: "issue-message-type-network-issue",
+    SecurityIssue: "issue-message-type-security-issue",
+    OtherIssue: "issue-message-type-other-issue"
+};
+
+WebInspector.IssueMessage.TypeIdentifier = "issue-message";
+WebInspector.IssueMessage.URLCookieKey = "issue-message-url";
+WebInspector.IssueMessage.LineNumberCookieKey = "issue-message-line-number";
+WebInspector.IssueMessage.ColumnNumberCookieKey = "issue-message-column-number";
+
+WebInspector.IssueMessage.Event = {
+    LocationDidChange: "issue-message-location-did-change",
+    DisplayLocationDidChange: "issue-message-display-location-did-change"
+};
+
+WebInspector.IssueMessage.Type._prefixTypeMap = {
+    "SyntaxError": WebInspector.IssueMessage.Type.SemanticIssue,
+    "URIError": WebInspector.IssueMessage.Type.SemanticIssue,
+    "EvalError": WebInspector.IssueMessage.Type.SemanticIssue,
+    "INVALID_CHARACTER_ERR": WebInspector.IssueMessage.Type.SemanticIssue,
+    "SYNTAX_ERR": WebInspector.IssueMessage.Type.SemanticIssue,
+
+    "RangeError": WebInspector.IssueMessage.Type.RangeIssue,
+    "INDEX_SIZE_ERR": WebInspector.IssueMessage.Type.RangeIssue,
+    "DOMSTRING_SIZE_ERR": WebInspector.IssueMessage.Type.RangeIssue,
+
+    "ReferenceError": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "HIERARCHY_REQUEST_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "INVALID_STATE_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "NOT_FOUND_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+    "WRONG_DOCUMENT_ERR": WebInspector.IssueMessage.Type.ReferenceIssue,
+
+    "TypeError": WebInspector.IssueMessage.Type.TypeIssue,
+    "INVALID_NODE_TYPE_ERR": WebInspector.IssueMessage.Type.TypeIssue,
+    "TYPE_MISMATCH_ERR": WebInspector.IssueMessage.Type.TypeIssue,
+
+    "SECURITY_ERR": WebInspector.IssueMessage.Type.SecurityIssue,
+
+    "NETWORK_ERR": WebInspector.IssueMessage.Type.NetworkIssue,
+
+    "ABORT_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "DATA_CLONE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "INUSE_ATTRIBUTE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "INVALID_ACCESS_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "INVALID_MODIFICATION_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NAMESPACE_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NOT_SUPPORTED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NO_DATA_ALLOWED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "NO_MODIFICATION_ALLOWED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "QUOTA_EXCEEDED_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "TIMEOUT_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "URL_MISMATCH_ERR": WebInspector.IssueMessage.Type.OtherIssue,
+    "VALIDATION_ERR": WebInspector.IssueMessage.Type.OtherIssue
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/KeyboardShortcut.js b/Source/WebInspectorUI/UserInterface/Models/KeyboardShortcut.js
new file mode 100644
index 000000000..43e8a7423
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/KeyboardShortcut.js
@@ -0,0 +1,269 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.KeyboardShortcut = class KeyboardShortcut extends WebInspector.Object
+{
+    constructor(modifiers, key, callback, targetElement)
+    {
+        super();
+
+        console.assert(key);
+        console.assert(!callback || typeof callback === "function");
+        console.assert(!targetElement || targetElement instanceof Element);
+
+        if (typeof key === "string") {
+            key = key[0].toUpperCase();
+            key = new WebInspector.Key(key.charCodeAt(0), key);
+        }
+
+        if (callback && !targetElement)
+            targetElement = document;
+
+        this._modifiers = modifiers || WebInspector.KeyboardShortcut.Modifier.None;
+        this._key = key;
+        this._targetElement = targetElement;
+        this._callback = callback;
+        this._disabled = false;
+        this._implicitlyPreventsDefault = true;
+
+        if (targetElement) {
+            var targetKeyboardShortcuts = targetElement._keyboardShortcuts;
+            if (!targetKeyboardShortcuts)
+                targetKeyboardShortcuts = targetElement._keyboardShortcuts = [];
+
+            targetKeyboardShortcuts.push(this);
+
+            if (!WebInspector.KeyboardShortcut._registeredKeyDownListener) {
+                WebInspector.KeyboardShortcut._registeredKeyDownListener = true;
+                window.addEventListener("keydown", WebInspector.KeyboardShortcut._handleKeyDown);
+            }
+        }
+    }
+
+    // Static
+
+    static _handleKeyDown(event)
+    {
+        if (event.defaultPrevented)
+            return;
+
+        for (var targetElement = event.target; targetElement; targetElement = targetElement.parentNode) {
+            if (!targetElement._keyboardShortcuts)
+                continue;
+
+            for (var i = 0; i < targetElement._keyboardShortcuts.length; ++i) {
+                var keyboardShortcut = targetElement._keyboardShortcuts[i];
+                if (!keyboardShortcut.matchesEvent(event))
+                    continue;
+
+                if (!keyboardShortcut.callback)
+                    continue;
+
+                keyboardShortcut.callback(event, keyboardShortcut);
+
+                if (keyboardShortcut.implicitlyPreventsDefault)
+                    event.preventDefault();
+
+                return;
+            }
+        }
+    }
+
+    // Public
+
+    get modifiers()
+    {
+        return this._modifiers;
+    }
+
+    get key()
+    {
+        return this._key;
+    }
+
+    get displayName()
+    {
+        var result = "";
+
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Control)
+            result += "\u2303";
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Option)
+            result += WebInspector.Platform.name === "mac" ? "\u2325" : "\u2387";
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Shift)
+            result += "\u21e7";
+        if (this._modifiers & WebInspector.KeyboardShortcut.Modifier.Command)
+            result += "\u2318";
+
+        result += this._key.toString();
+
+        return result;
+    }
+
+    get callback()
+    {
+        return this._callback;
+    }
+
+    set callback(callback)
+    {
+        console.assert(!callback || typeof callback === "function");
+
+        this._callback = callback || null;
+    }
+
+    get disabled()
+    {
+        return this._disabled;
+    }
+
+    set disabled(disabled)
+    {
+        this._disabled = disabled || false;
+    }
+
+    get implicitlyPreventsDefault()
+    {
+        return this._implicitlyPreventsDefault;
+    }
+
+    set implicitlyPreventsDefault(implicitly)
+    {
+        this._implicitlyPreventsDefault = implicitly;
+    }
+
+    unbind()
+    {
+        this._disabled = true;
+
+        if (!this._targetElement)
+            return;
+
+        var targetKeyboardShortcuts = this._targetElement._keyboardShortcuts;
+        if (!targetKeyboardShortcuts)
+            return;
+
+        targetKeyboardShortcuts.remove(this);
+    }
+
+    matchesEvent(event)
+    {
+        if (this._disabled)
+            return false;
+
+        if (this._key.keyCode !== event.keyCode)
+            return false;
+
+        var eventModifiers = WebInspector.KeyboardShortcut.Modifier.None;
+        if (event.shiftKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Shift;
+        if (event.ctrlKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Control;
+        if (event.altKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Option;
+        if (event.metaKey)
+            eventModifiers |= WebInspector.KeyboardShortcut.Modifier.Command;
+        return this._modifiers === eventModifiers;
+    }
+};
+
+WebInspector.Key = class Key
+{
+    constructor(keyCode, displayName)
+    {
+        this._keyCode = keyCode;
+        this._displayName = displayName;
+    }
+
+    // Public
+
+    get keyCode()
+    {
+        return this._keyCode;
+    }
+
+    get displayName()
+    {
+        return this._displayName;
+    }
+
+    toString()
+    {
+        return this._displayName;
+    }
+};
+
+WebInspector.KeyboardShortcut.Modifier = {
+    None: 0,
+    Shift: 1,
+    Control: 2,
+    Option: 4,
+    Command: 8,
+
+    get CommandOrControl()
+    {
+        return WebInspector.Platform.name === "mac" ? this.Command : this.Control;
+    }
+};
+
+WebInspector.KeyboardShortcut.Key = {
+    Backspace: new WebInspector.Key(8, "\u232b"),
+    Tab: new WebInspector.Key(9, "\u21e5"),
+    Enter: new WebInspector.Key(13, "\u21a9"),
+    Escape: new WebInspector.Key(27, "\u238b"),
+    Space: new WebInspector.Key(32, "Space"),
+    PageUp: new WebInspector.Key(33, "\u21de"),
+    PageDown: new WebInspector.Key(34, "\u21df"),
+    End: new WebInspector.Key(35, "\u2198"),
+    Home: new WebInspector.Key(36, "\u2196"),
+    Left: new WebInspector.Key(37, "\u2190"),
+    Up: new WebInspector.Key(38, "\u2191"),
+    Right: new WebInspector.Key(39, "\u2192"),
+    Down: new WebInspector.Key(40, "\u2193"),
+    Delete: new WebInspector.Key(46, "\u2326"),
+    Zero: new WebInspector.Key(48, "0"),
+    F1: new WebInspector.Key(112, "F1"),
+    F2: new WebInspector.Key(113, "F2"),
+    F3: new WebInspector.Key(114, "F3"),
+    F4: new WebInspector.Key(115, "F4"),
+    F5: new WebInspector.Key(116, "F5"),
+    F6: new WebInspector.Key(117, "F6"),
+    F7: new WebInspector.Key(118, "F7"),
+    F8: new WebInspector.Key(119, "F8"),
+    F9: new WebInspector.Key(120, "F9"),
+    F10: new WebInspector.Key(121, "F10"),
+    F11: new WebInspector.Key(122, "F11"),
+    F12: new WebInspector.Key(123, "F12"),
+    Semicolon: new WebInspector.Key(186, ";"),
+    Plus: new WebInspector.Key(187, "+"),
+    Comma: new WebInspector.Key(188, ","),
+    Minus: new WebInspector.Key(189, "-"),
+    Period: new WebInspector.Key(190, "."),
+    Slash: new WebInspector.Key(191, "/"),
+    Apostrophe: new WebInspector.Key(192, "`"),
+    LeftCurlyBrace: new WebInspector.Key(219, "{"),
+    Backslash: new WebInspector.Key(220, "\\"),
+    RightCurlyBrace: new WebInspector.Key(221, "}"),
+    SingleQuote: new WebInspector.Key(222, "\'")
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/LayoutInstrument.js b/Source/WebInspectorUI/UserInterface/Models/LayoutInstrument.js
new file mode 100644
index 000000000..2d33ac3d4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/LayoutInstrument.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutInstrument = class LayoutInstrument extends WebInspector.Instrument
+{
+    // Protected
+
+    get timelineRecordType()
+    {
+        return WebInspector.TimelineRecord.Type.Layout;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/LayoutTimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/LayoutTimelineRecord.js
new file mode 100644
index 000000000..db82a1016
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/LayoutTimelineRecord.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineRecord = class LayoutTimelineRecord extends WebInspector.TimelineRecord
+{
+    constructor(eventType, startTime, endTime, callFrames, sourceCodeLocation, quad)
+    {
+        super(WebInspector.TimelineRecord.Type.Layout, startTime, endTime, callFrames, sourceCodeLocation);
+
+        console.assert(eventType);
+        console.assert(!quad || quad instanceof WebInspector.Quad);
+
+        if (eventType in WebInspector.LayoutTimelineRecord.EventType)
+            eventType = WebInspector.LayoutTimelineRecord.EventType[eventType];
+
+        this._eventType = eventType;
+        this._quad = quad || null;
+    }
+
+    // Static
+
+    static displayNameForEventType(eventType)
+    {
+        switch(eventType) {
+        case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
+            return WebInspector.UIString("Styles Invalidated");
+        case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
+            return WebInspector.UIString("Styles Recalculated");
+        case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
+            return WebInspector.UIString("Layout Invalidated");
+        case WebInspector.LayoutTimelineRecord.EventType.ForcedLayout:
+            return WebInspector.UIString("Forced Layout");
+        case WebInspector.LayoutTimelineRecord.EventType.Layout:
+            return WebInspector.UIString("Layout");
+        case WebInspector.LayoutTimelineRecord.EventType.Paint:
+            return WebInspector.UIString("Paint");
+        case WebInspector.LayoutTimelineRecord.EventType.Composite:
+            return WebInspector.UIString("Composite");
+        }
+    }
+
+    // Public
+
+    get eventType()
+    {
+        return this._eventType;
+    }
+
+    get width()
+    {
+        return this._quad ? this._quad.width : NaN;
+    }
+
+    get height()
+    {
+        return this._quad ? this._quad.height : NaN;
+    }
+
+    get area()
+    {
+        return this.width * this.height;
+    }
+
+    get quad()
+    {
+        return this._quad;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        super.saveIdentityToCookie(cookie);
+
+        cookie[WebInspector.LayoutTimelineRecord.EventTypeCookieKey] = this._eventType;
+    }
+};
+
+WebInspector.LayoutTimelineRecord.EventType = {
+    InvalidateStyles: "layout-timeline-record-invalidate-styles",
+    RecalculateStyles: "layout-timeline-record-recalculate-styles",
+    InvalidateLayout: "layout-timeline-record-invalidate-layout",
+    ForcedLayout: "layout-timeline-record-forced-layout",
+    Layout: "layout-timeline-record-layout",
+    Paint: "layout-timeline-record-paint",
+    Composite: "layout-timeline-record-composite"
+};
+
+WebInspector.LayoutTimelineRecord.TypeIdentifier = "layout-timeline-record";
+WebInspector.LayoutTimelineRecord.EventTypeCookieKey = "layout-timeline-record-event-type";
diff --git a/Source/WebInspectorUI/UserInterface/Models/LazySourceCodeLocation.js b/Source/WebInspectorUI/UserInterface/Models/LazySourceCodeLocation.js
new file mode 100644
index 000000000..6f1a90ad7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/LazySourceCodeLocation.js
@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// FIXME: Investigate folding this into SourceCodeLocation proper so it can always be as lazy as possible.
+
+// Lazily compute the full SourceCodeLocation information only when such information is needed.
+//  - raw information doesn't require initialization, we have that information
+//  - formatted information does require initialization, done by overriding public APIs.
+//  - display information does require initialization, done by overriding private funnel API resolveMappedLocation.
+
+WebInspector.LazySourceCodeLocation = class LazySourceCodeLocation extends WebInspector.SourceCodeLocation
+{
+    constructor(sourceCode, lineNumber, columnNumber)
+    {
+        super(null, lineNumber, columnNumber);
+
+        console.assert(sourceCode);
+
+        this._initialized = false;
+        this._lazySourceCode = sourceCode;
+    }
+
+    // Public
+
+    isEqual(other)
+    {
+        if (!other)
+            return false;
+        return this._lazySourceCode === other._sourceCode && this._lineNumber === other._lineNumber && this._columnNumber === other._columnNumber;
+    }
+
+    get sourceCode()
+    {
+        return this._lazySourceCode;
+    }
+
+    set sourceCode(sourceCode)
+    {
+        // Getter and setter must be provided together.
+        this.setSourceCode(sourceCode);
+    }
+
+    get formattedLineNumber()
+    {
+        this._lazyInitialization();
+        return this._formattedLineNumber;
+    }
+
+    get formattedColumnNumber()
+    {
+        this._lazyInitialization();
+        return this._formattedColumnNumber;
+    }
+
+    formattedPosition()
+    {
+        this._lazyInitialization();
+        return new WebInspector.SourceCodePosition(this._formattedLineNumber, this._formattedColumnNumber);
+    }
+
+    hasFormattedLocation()
+    {
+        this._lazyInitialization();
+        return super.hasFormattedLocation();
+    }
+
+    hasDifferentDisplayLocation()
+    {
+        this._lazyInitialization();
+        return super.hasDifferentDisplayLocation();
+    }
+
+    // Protected
+
+    resolveMappedLocation()
+    {
+        this._lazyInitialization();
+        super.resolveMappedLocation();
+    }
+
+    // Private
+
+    _lazyInitialization()
+    {
+        if (!this._initialized) {
+            this._initialized = true;
+            this.sourceCode = this._lazySourceCode;
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/LineWidget.js b/Source/WebInspectorUI/UserInterface/Models/LineWidget.js
new file mode 100644
index 000000000..06ffa1b64
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/LineWidget.js
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LineWidget = class LineWidget extends WebInspector.Object
+{
+    constructor(codeMirrorLineWidget, widgetElement)
+    {
+        super();
+
+        console.assert(widgetElement instanceof Element);
+
+        this._codeMirrorLineWidget = codeMirrorLineWidget;
+        this._widgetElement = widgetElement;
+    }
+
+    // Public
+
+    get codeMirrorLineWidget()
+    {
+        return this._codeMirrorLineWidget;
+    }
+
+    get widgetElement()
+    {
+        return this._widgetElement;
+    }
+
+    clear()
+    {
+        this._codeMirrorLineWidget.clear();
+    }
+
+    update()
+    {
+        // FIXME: Later version of CodeMirror has update.
+        if (this._codeMirrorLineWidget.update)
+            this._codeMirrorLineWidget.update();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/LogObject.js b/Source/WebInspectorUI/UserInterface/Models/LogObject.js
new file mode 100644
index 000000000..b9551226b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/LogObject.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LogObject = class LogObject extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._startDate = new Date;
+    }
+
+    // Public
+
+    get startDate()
+    {
+        return this._startDate;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/MemoryCategory.js b/Source/WebInspectorUI/UserInterface/Models/MemoryCategory.js
new file mode 100644
index 000000000..76cbba717
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/MemoryCategory.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MemoryCategory = class MemoryCategory extends WebInspector.Object
+{
+    constructor(type, size)
+    {
+        super();
+
+        console.assert(typeof type === "string");
+        console.assert(typeof size === "number");
+        console.assert(size >= 0);
+
+        this.type = type;
+        this.size = size;
+    }
+};
+
+WebInspector.MemoryCategory.Type = {
+    JavaScript: "javascript",
+    Images: "images",
+    Layers: "layers",
+    Page: "page",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/MemoryInstrument.js b/Source/WebInspectorUI/UserInterface/Models/MemoryInstrument.js
new file mode 100644
index 000000000..e4e781446
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/MemoryInstrument.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MemoryInstrument = class MemoryInstrument extends WebInspector.Instrument
+{
+    constructor()
+    {
+        super();
+
+        console.assert(WebInspector.MemoryInstrument.supported());
+    }
+
+    // Static
+
+    static supported()
+    {
+        // COMPATIBILITY (iOS 9): MemoryAgent did not exist.
+        return window.MemoryAgent;
+    }
+
+    // Protected
+
+    get timelineRecordType()
+    {
+        return WebInspector.TimelineRecord.Type.Memory;
+    }
+
+    startInstrumentation()
+    {
+        MemoryAgent.startTracking();
+    }
+
+    stopInstrumentation()
+    {
+        MemoryAgent.stopTracking();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/MemoryTimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/MemoryTimelineRecord.js
new file mode 100644
index 000000000..5b482d823
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/MemoryTimelineRecord.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MemoryTimelineRecord = class MemoryTimelineRecord extends WebInspector.TimelineRecord
+{
+    constructor(timestamp, categories)
+    {
+        super(WebInspector.TimelineRecord.Type.Memory, timestamp, timestamp);
+
+        console.assert(typeof timestamp === "number");
+        console.assert(categories instanceof Array);
+
+        this._timestamp = timestamp;
+        this._categories = WebInspector.MemoryTimelineRecord.memoryCategoriesFromProtocol(categories);
+
+        this._totalSize = 0;
+        for (let {size} of categories)
+            this._totalSize += size;
+    }
+
+    // Static
+
+    static memoryCategoriesFromProtocol(categories)
+    {
+        let javascriptSize = 0;
+        let imagesSize = 0;
+        let layersSize = 0;
+        let pageSize = 0;
+
+        for (let {type, size} of categories) {
+            switch (type) {
+            case MemoryAgent.CategoryDataType.Javascript:
+            case MemoryAgent.CategoryDataType.JIT:
+                javascriptSize += size;
+                break;
+            case MemoryAgent.CategoryDataType.Images:
+                imagesSize += size;
+                break;
+            case MemoryAgent.CategoryDataType.Layers:
+                layersSize += size;
+                break;
+            case MemoryAgent.CategoryDataType.Page:
+            case MemoryAgent.CategoryDataType.Other:
+                pageSize += size;
+                break;
+            default:
+                console.warn("Unhandled Memory.CategoryDataType: " + type);
+                break;
+            }
+        }
+
+        return [
+            {type: WebInspector.MemoryCategory.Type.JavaScript, size: javascriptSize},
+            {type: WebInspector.MemoryCategory.Type.Images, size: imagesSize},
+            {type: WebInspector.MemoryCategory.Type.Layers, size: layersSize},
+            {type: WebInspector.MemoryCategory.Type.Page, size: pageSize},
+        ];
+    }
+
+    // Public
+
+    get timestamp() { return this._timestamp; }
+    get categories() { return this._categories; }
+    get totalSize() { return this._totalSize; }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js b/Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js
new file mode 100644
index 000000000..417cc3b32
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js
@@ -0,0 +1,2172 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// FIXME: Provide Parameter lists for the constructors themselves? (new RegExp(...)).
+// FIXME: Provide Parameter lists for global functions (eval, decodeURI, ...).
+
+WebInspector.NativeConstructorFunctionParameters = {
+    Object: {
+        assign: "target, ...sources",
+        create: "prototype, [propertiesObject]",
+        defineProperties: "object, properties",
+        defineProperty: "object, propertyName, descriptor",
+        freeze: "object",
+        getOwnPropertyDescriptor: "object, propertyName",
+        getOwnPropertyNames: "object",
+        getOwnPropertySymbols: "object",
+        getPrototypeOf: "object",
+        is: "value1, value2",
+        isExtensible: "object",
+        isFrozen: "object",
+        isSealed: "object",
+        keys: "object",
+        preventExtensions: "object",
+        seal: "object",
+        setPrototypeOf: "object, prototype",
+        __proto__: null,
+    },
+
+    Array: {
+        from: "arrayLike, [mapFunction], [thisArg]",
+        isArray: "object",
+        of: "[...values]",
+        __proto__: null,
+    },
+
+    ArrayBuffer: {
+        isView: "object",
+        transfer: "oldBuffer, [newByteLength=length]",
+        __proto__: null,
+    },
+
+    Number: {
+        isFinite: "value",
+        isInteger: "value",
+        isNaN: "value",
+        isSafeInteger: "value",
+        parseFloat: "string",
+        parseInt: "string, [radix]",
+        __proto__: null,
+    },
+
+    Math: {
+        abs: "x",
+        acos: "x",
+        acosh: "x",
+        asin: "x",
+        asinh: "x",
+        atan2: "y, x",
+        atan: "x",
+        atanh: "x",
+        cbrt: "x",
+        ceil: "x",
+        clz32: "x",
+        cos: "x",
+        cosh: "x",
+        exp: "x",
+        expm1: "x",
+        floor: "x",
+        fround: "x",
+        hypot: "[...x]",
+        imul: "x",
+        log: "x",
+        log1p: "x",
+        log2: "x",
+        log10: "x",
+        max: "[...x]",
+        min: "[...x]",
+        pow: "x, y",
+        round: "x",
+        sign: "x",
+        sin: "x",
+        sinh: "x",
+        sqrt: "x",
+        tan: "x",
+        tanh: "x",
+        trunc: "x",
+        __proto__: null,
+    },
+
+    JSON: {
+        parse: "text, [reviver]",
+        stringify: "value, [replacer], [space]",
+        __proto__: null,
+    },
+
+    Date: {
+        parse: "dateString",
+        UTC: "year, [month], [day], [hour], [minute], [second], [ms]",
+        __proto__: null,
+    },
+
+    Promise: {
+        all: "iterable",
+        race: "iterable",
+        reject: "reason",
+        resolve: "value",
+        __proto__: null,
+    },
+
+    String: {
+        fromCharCode: "...codeUnits",
+        fromCodePoint: "...codePoints",
+        raw: "template, ...substitutions",
+        __proto__: null,
+    },
+
+    Symbol: {
+        for: "key",
+        keyFor: "symbol",
+        __proto__: null,
+    },
+
+    // Autogenerated DOM Interface static methods.
+
+    IDBKeyRangeConstructor: {
+        bound: "lower, upper, [lowerOpen], [upperOpen]",
+        lowerBound: "lower, [open]",
+        only: "value",
+        upperBound: "upper, [open]",
+        __proto__: null,
+    },
+
+    MediaSourceConstructor: {
+        isTypeSupported: "type",
+        __proto__: null,
+    },
+
+    MediaStreamTrackConstructor: {
+        getSources: "callback",
+        __proto__: null,
+    },
+
+    NotificationConstructor: {
+        requestPermission: "[callback]",
+        __proto__: null,
+    },
+
+    URLConstructor: {
+        createObjectURL: "blob",
+        revokeObjectURL: "url",
+        __proto__: null,
+    },
+
+    WebKitMediaKeysConstructor: {
+        isTypeSupported: "keySystem, [type]",
+        __proto__: null,
+    },
+};
+
+WebInspector.NativePrototypeFunctionParameters = {
+
+    // Built-in JavaScript objects.
+    // FIXME: TypedArrays (Int8Array, etc),
+
+    Object: {
+        __defineGetter__: "propertyName, getterFunction",
+        __defineSetter__: "propertyName, setterFunction",
+        __lookupGetter__: "propertyName",
+        __lookupSetter__: "propertyName",
+        hasOwnProperty: "propertyName",
+        isPrototypeOf: "property",
+        propertyIsEnumerable: "propertyName",
+        __proto__: null,
+    },
+
+    Array: {
+        concat: "value, ...",
+        copyWithin: "targetIndex, startIndex, [endIndex=length]",
+        every: "callback, [thisArg]",
+        fill: "value, [startIndex=0], [endIndex=length]",
+        filter: "callback, [thisArg]",
+        find: "callback, [thisArg]",
+        findIndex: "callback, [thisArg]",
+        forEach: "callback, [thisArg]",
+        includes: "searchValue, [startIndex=0]",
+        indexOf: "searchValue, [startIndex=0]",
+        join: "[separator=\",\"]",
+        lastIndexOf: "searchValue, [startIndex=length]",
+        map: "callback, [thisArg]",
+        push: "value, ...",
+        reduce: "callback, [initialValue]",
+        reduceRight: "callback, [initialValue]",
+        slice: "[startIndex=0], [endIndex=length]",
+        some: "callback, [thisArg]",
+        sort: "[compareFunction]",
+        splice: "startIndex, [deleteCount=0], ...itemsToAdd",
+        __proto__: null,
+    },
+
+    ArrayBuffer: {
+        slice: "startIndex, [endIndex=byteLength]",
+        __proto__: null,
+    },
+
+    DataView: {
+        setInt8: "byteOffset, value",
+        setInt16: "byteOffset, value, [littleEndian=false]",
+        setInt23: "byteOffset, value, [littleEndian=false]",
+        setUint8: "byteOffset, value",
+        setUint16: "byteOffset, value, [littleEndian=false]",
+        setUint32: "byteOffset, value, [littleEndian=false]",
+        setFloat32: "byteOffset, value, [littleEndian=false]",
+        setFloat64: "byteOffset, value, [littleEndian=false]",
+        getInt8: "byteOffset",
+        getInt16: "byteOffset, [littleEndian=false]",
+        getInt23: "byteOffset, [littleEndian=false]",
+        getUint8: "byteOffset",
+        getUint16: "byteOffset, [littleEndian=false]",
+        getUint32: "byteOffset, [littleEndian=false]",
+        getFloat32: "byteOffset, [littleEndian=false]",
+        getFloat64: "byteOffset, [littleEndian=false]",
+        __proto__: null,
+    },
+
+    Date: {
+        setDate: "day",
+        setFullYear: "year, [month=getMonth()], [day=getDate()]",
+        setHours: "hours, [minutes=getMinutes()], [seconds=getSeconds()], [ms=getMilliseconds()]",
+        setMilliseconds: "ms",
+        setMinutes: "minutes, [seconds=getSeconds()], [ms=getMilliseconds()]",
+        setMonth: "month, [day=getDate()]",
+        setSeconds: "seconds, [ms=getMilliseconds()]",
+        setTime: "time",
+        setUTCDate: "day",
+        setUTCFullYear: "year, [month=getUTCMonth()], [day=getUTCDate()]",
+        setUTCHours: "hours, [minutes=getUTCMinutes()], [seconds=getUTCSeconds()], [ms=getUTCMilliseconds()]",
+        setUTCMilliseconds: "ms",
+        setUTCMinutes: "minutes, [seconds=getUTCSeconds()], [ms=getUTCMilliseconds()]",
+        setUTCMonth: "month, [day=getUTCDate()]",
+        setUTCSeconds: "seconds, [ms=getUTCMilliseconds()]",
+        setUTCTime: "time",
+        setYear: "year",
+        __proto__: null,
+    },
+
+    Function: {
+        apply: "thisObject, [argumentsArray]",
+        bind: "thisObject, ...arguments",
+        call: "thisObject, ...arguments",
+        __proto__: null,
+    },
+
+    Map: {
+        delete: "key",
+        forEach: "callback, [thisArg]",
+        get: "key",
+        has: "key",
+        set: "key, value",
+        __proto__: null,
+    },
+
+    Number: {
+        toExponential: "[digits]",
+        toFixed: "[digits]",
+        toPrecision: "[significantDigits]",
+        toString: "[radix=10]",
+        __proto__: null,
+    },
+
+    RegExp: {
+        compile: "pattern, flags",
+        exec: "string",
+        test: "string",
+        __proto__: null,
+    },
+
+    Set: {
+        delete: "value",
+        forEach: "callback, [thisArg]",
+        has: "value",
+        add: "value",
+        __proto__: null,
+    },
+
+    String: {
+        charAt: "index",
+        charCodeAt: "index",
+        codePoints: "index",
+        concat: "string, ...",
+        includes: "searchValue, [startIndex=0]",
+        indexOf: "searchValue, [startIndex=0]",
+        lastIndexOf: "searchValue, [startIndex=length]",
+        localeCompare: "string",
+        match: "regex",
+        repeat: "count",
+        replace: "regex|string, replaceString|replaceHandler, [flags]",
+        search: "regex",
+        slice: "startIndex, [endIndex=length]",
+        split: "[separator], [limit]",
+        substr: "startIndex, [numberOfCharacters]",
+        substring: "startIndex, [endIndex=length]",
+        __proto__: null,
+    },
+
+    WeakMap: {
+        delete: "key",
+        get: "key",
+        has: "key",
+        set: "key, value",
+        __proto__: null,
+    },
+
+    WeakSet: {
+        delete: "value",
+        has: "value",
+        add: "value",
+        __proto__: null,
+    },
+
+    Promise: {
+        catch: "rejectionHandler",
+        then: "resolvedHandler, rejectionHandler",
+        __proto__: null,
+    },
+
+    Generator: {
+        next: "value",
+        return: "value",
+        throw: "exception",
+        __proto__: null,
+    },
+
+    Console: {
+        assert: "condition, [message], [...values]",
+        count: "[label]",
+        debug: "message, [...values]",
+        dir: "object",
+        dirxml: "object",
+        error: "message, [...values]",
+        group: "[name]",
+        groupCollapsed: "[name]",
+        groupEnd: "[name]",
+        info: "message, [...values]",
+        log: "message, [...values]",
+        profile: "name",
+        profileEnd: "name",
+        table: "data, [columns]",
+        time: "name",
+        timeEnd: "name",
+        timeStamp: "[label]",
+        trace: "message, [...values]",
+        warn: "message, [...values]",
+        __proto__: null,
+    },
+
+    // Curated DOM Interfaces.
+
+    Element: {
+        closest: "selectors",
+        getAttribute: "attributeName",
+        getAttributeNS: "namespace, attributeName",
+        getAttributeNode: "attributeName",
+        getAttributeNodeNS: "namespace, attributeName",
+        hasAttribute: "attributeName",
+        hasAttributeNS: "namespace, attributeName",
+        matches: "selector",
+        removeAttribute: "attributeName",
+        removeAttributeNS: "namespace, attributeName",
+        removeAttributeNode: "attributeName",
+        scrollByLines: "[lines]",
+        scrollByPages: "[pages]",
+        scrollIntoView: "[alignWithTop]",
+        scrollIntoViewIfNeeded: "[centerIfNeeded]",
+        setAttribute: "name, value",
+        setAttributeNS: "namespace, name, value",
+        setAttributeNode: "attributeNode",
+        setAttributeNodeNS: "namespace, attributeNode",
+        webkitMatchesSelector: "selectors",
+        __proto__: null,
+    },
+
+    Node: {
+        appendChild: "child",
+        cloneNode: "[deep]",
+        compareDocumentPosition: "[node]",
+        contains: "[node]",
+        insertBefore: "insertElement, referenceElement",
+        isDefaultNamespace: "[namespace]",
+        isEqualNode: "[node]",
+        lookupNamespaceURI: "prefix",
+        removeChild: "node",
+        replaceChild: "newChild, oldChild",
+        __proto__: null,
+    },
+
+    Window: {
+        alert: "[message]",
+        atob: "encodedData",
+        btoa: "stringToEncode",
+        cancelAnimationFrame: "id",
+        clearInterval: "intervalId",
+        clearTimeout: "timeoutId",
+        confirm: "[message]",
+        find: "string, [caseSensitive], [backwards], [wrapAround]",
+        getComputedStyle: "[element], [pseudoElement]",
+        getMatchedCSSRules: "[element], [pseudoElement]",
+        matchMedia: "mediaQueryString",
+        moveBy: "[deltaX], [deltaY]",
+        moveTo: "[screenX], [screenY]",
+        open: "url, windowName, [featuresString]",
+        openDatabase: "name, version, displayName, estimatedSize, [creationCallback]",
+        postMessage: "message, targetOrigin, [...transferables]",
+        prompt: "[message], [value]",
+        requestAnimationFrame: "callback",
+        resizeBy: "[deltaX], [deltaY]",
+        resizeTo: "[width], [height]",
+        scrollBy: "[deltaX], [deltaY]",
+        scrollTo: "[x], [y]",
+        setInterval: "func, [delay], [...params]",
+        setTimeout: "func, [delay], [...params]",
+        showModalDialog: "url, [arguments], [options]",
+        __proto__: null,
+    },
+
+    Document: {
+        adoptNode: "[node]",
+        caretRangeFromPoint: "[x], [y]",
+        createAttribute: "attributeName",
+        createAttributeNS: "namespace, qualifiedName",
+        createCDATASection: "data",
+        createComment: "data",
+        createElement: "tagName",
+        createElementNS: "namespace, qualifiedName",
+        createEntityReference: "name",
+        createEvent: "type",
+        createExpression: "xpath, resolver",
+        createNSResolver: "node",
+        createNodeIterator: "root, whatToShow, filter",
+        createProcessingInstruction: "target, data",
+        createTextNode: "data",
+        createTreeWalker: "root, whatToShow, filter, entityReferenceExpansion",
+        elementFromPoint: "x, y",
+        evaluate: "xpath, contextNode, namespaceResolver, resultType, result",
+        execCommand: "command, userInterface, value",
+        getCSSCanvasContext: "contextId, name, width, height",
+        getElementById: "id",
+        getElementsByName: "name",
+        getOverrideStyle: "[element], [pseudoElement]",
+        importNode: "node, deep",
+        queryCommandEnabled: "command",
+        queryCommandIndeterm: "command",
+        queryCommandState: "command",
+        queryCommandSupported: "command",
+        queryCommandValue: "command",
+        __proto__: null,
+    },
+
+    // Autogenerated DOM Interfaces.
+
+    ANGLEInstancedArrays: {
+        drawArraysInstancedANGLE: "mode, first, count, primcount",
+        drawElementsInstancedANGLE: "mode, count, type, offset, primcount",
+        vertexAttribDivisorANGLE: "index, divisor",
+        __proto__: null,
+    },
+
+    AnalyserNode: {
+        getByteFrequencyData: "array",
+        getByteTimeDomainData: "array",
+        getFloatFrequencyData: "array",
+        __proto__: null,
+    },
+
+    AudioBuffer: {
+        getChannelData: "channelIndex",
+        __proto__: null,
+    },
+
+    AudioBufferCallback: {
+        handleEvent: "audioBuffer",
+        __proto__: null,
+    },
+
+    AudioBufferSourceNode: {
+        noteGrainOn: "when, grainOffset, grainDuration",
+        noteOff: "when",
+        noteOn: "when",
+        start: "[when], [grainOffset], [grainDuration]",
+        stop: "[when]",
+        __proto__: null,
+    },
+
+    AudioListener: {
+        setOrientation: "x, y, z, xUp, yUp, zUp",
+        setPosition: "x, y, z",
+        setVelocity: "x, y, z",
+        __proto__: null,
+    },
+
+    AudioNode: {
+        connect: "destination, [output], [input]",
+        disconnect: "[output]",
+        __proto__: null,
+    },
+
+    AudioParam: {
+        cancelScheduledValues: "startTime",
+        exponentialRampToValueAtTime: "value, time",
+        linearRampToValueAtTime: "value, time",
+        setTargetAtTime: "target, time, timeConstant",
+        setTargetValueAtTime: "targetValue, time, timeConstant",
+        setValueAtTime: "value, time",
+        setValueCurveAtTime: "values, time, duration",
+        __proto__: null,
+    },
+
+    AudioTrackList: {
+        getTrackById: "id",
+        item: "index",
+        __proto__: null,
+    },
+
+    BiquadFilterNode: {
+        getFrequencyResponse: "frequencyHz, magResponse, phaseResponse",
+        __proto__: null,
+    },
+
+    Blob: {
+        slice: "[start], [end], [contentType]",
+        __proto__: null,
+    },
+
+    CSS: {
+        supports: "property, value",
+        __proto__: null,
+    },
+
+    CSSKeyframesRule: {
+        appendRule: "[rule]",
+        deleteRule: "[key]",
+        findRule: "[key]",
+        insertRule: "[rule]",
+        __proto__: null,
+    },
+
+    CSSMediaRule: {
+        deleteRule: "[index]",
+        insertRule: "[rule], [index]",
+        __proto__: null,
+    },
+
+    CSSPrimitiveValue: {
+        getFloatValue: "[unitType]",
+        setFloatValue: "[unitType], [floatValue]",
+        setStringValue: "[stringType], [stringValue]",
+        __proto__: null,
+    },
+
+    CSSRuleList: {
+        item: "[index]",
+        __proto__: null,
+    },
+
+    CSSStyleDeclaration: {
+        getPropertyCSSValue: "[propertyName]",
+        getPropertyPriority: "[propertyName]",
+        getPropertyShorthand: "[propertyName]",
+        getPropertyValue: "[propertyName]",
+        isPropertyImplicit: "[propertyName]",
+        item: "[index]",
+        removeProperty: "[propertyName]",
+        setProperty: "[propertyName], [value], [priority]",
+        __proto__: null,
+    },
+
+    CSSStyleSheet: {
+        addRule: "[selector], [style], [index]",
+        deleteRule: "[index]",
+        insertRule: "[rule], [index]",
+        removeRule: "[index]",
+        __proto__: null,
+    },
+
+    CSSSupportsRule: {
+        deleteRule: "[index]",
+        insertRule: "[rule], [index]",
+        __proto__: null,
+    },
+
+    CSSValueList: {
+        item: "[index]",
+        __proto__: null,
+    },
+
+    CanvasGradient: {
+        addColorStop: "[offset], [color]",
+        __proto__: null,
+    },
+
+    CanvasRenderingContext2D: {
+        arc: "x, y, radius, startAngle, endAngle, [anticlockwise]",
+        arcTo: "x1, y1, x2, y2, radius",
+        bezierCurveTo: "cp1x, cp1y, cp2x, cp2y, x, y",
+        clearRect: "x, y, width, height",
+        clip: "path, [winding]",
+        createImageData: "imagedata",
+        createLinearGradient: "x0, y0, x1, y1",
+        createPattern: "canvas, repetitionType",
+        createRadialGradient: "x0, y0, r0, x1, y1, r1",
+        drawFocusIfNeeded: "element",
+        drawImage: "image, x, y",
+        drawImageFromRect: "image, [sx], [sy], [sw], [sh], [dx], [dy], [dw], [dh], [compositeOperation]",
+        ellipse: "x, y, radiusX, radiusY, rotation, startAngle, endAngle, [anticlockwise]",
+        fill: "path, [winding]",
+        fillRect: "x, y, width, height",
+        fillText: "text, x, y, [maxWidth]",
+        getImageData: "sx, sy, sw, sh",
+        isPointInPath: "path, x, y, [winding]",
+        isPointInStroke: "path, x, y",
+        lineTo: "x, y",
+        measureText: "text",
+        moveTo: "x, y",
+        putImageData: "imagedata, dx, dy",
+        quadraticCurveTo: "cpx, cpy, x, y",
+        rect: "x, y, width, height",
+        rotate: "angle",
+        scale: "sx, sy",
+        setAlpha: "[alpha]",
+        setCompositeOperation: "[compositeOperation]",
+        setFillColor: "color, [alpha]",
+        setLineCap: "[cap]",
+        setLineDash: "dash",
+        setLineJoin: "[join]",
+        setLineWidth: "[width]",
+        setMiterLimit: "[limit]",
+        setShadow: "width, height, blur, [color], [alpha]",
+        setStrokeColor: "color, [alpha]",
+        setTransform: "m11, m12, m21, m22, dx, dy",
+        stroke: "path",
+        strokeRect: "x, y, width, height",
+        strokeText: "text, x, y, [maxWidth]",
+        transform: "m11, m12, m21, m22, dx, dy",
+        translate: "tx, ty",
+        webkitGetImageDataHD: "sx, sy, sw, sh",
+        webkitPutImageDataHD: "imagedata, dx, dy",
+        __proto__: null,
+    },
+
+    CharacterData: {
+        appendData: "[data]",
+        deleteData: "[offset], [length]",
+        insertData: "[offset], [data]",
+        replaceData: "[offset], [length], [data]",
+        substringData: "[offset], [length]",
+        __proto__: null,
+    },
+
+    ClientRectList: {
+        item: "[index]",
+        __proto__: null,
+    },
+
+    CommandLineAPIHost: {
+        copyText: "text",
+        databaseId: "database",
+        getEventListeners: "node",
+        inspect: "objectId, hints",
+        storageId: "storage",
+        __proto__: null,
+    },
+
+    CompositionEvent: {
+        initCompositionEvent: "[typeArg], [canBubbleArg], [cancelableArg], [viewArg], [dataArg]",
+        __proto__: null,
+    },
+
+    Crypto: {
+        getRandomValues: "array",
+        __proto__: null,
+    },
+
+    CustomEvent: {
+        initCustomEvent: "[typeArg], [canBubbleArg], [cancelableArg], [detailArg]",
+        __proto__: null,
+    },
+
+    DOMApplicationCache: {
+        /* EventTarget */
+        __proto__: null,
+    },
+
+    DOMImplementation: {
+        createCSSStyleSheet: "[title], [media]",
+        createDocument: "[namespaceURI], [qualifiedName], [doctype]",
+        createDocumentType: "[qualifiedName], [publicId], [systemId]",
+        createHTMLDocument: "[title]",
+        hasFeature: "[feature], [version]",
+        __proto__: null,
+    },
+
+    DOMParser: {
+        parseFromString: "[str], [contentType]",
+        __proto__: null,
+    },
+
+    DOMStringList: {
+        contains: "[string]",
+        item: "[index]",
+        __proto__: null,
+    },
+
+    DOMTokenList: {
+        add: "tokens...",
+        contains: "token",
+        item: "index",
+        remove: "tokens...",
+        toggle: "token, [force]",
+        __proto__: null,
+    },
+
+    DataTransfer: {
+        clearData: "[type]",
+        getData: "type",
+        setData: "type, data",
+        setDragImage: "image, x, y",
+        __proto__: null,
+    },
+
+    DataTransferItem: {
+        getAsString: "[callback]",
+        __proto__: null,
+    },
+
+    DataTransferItemList: {
+        add: "file",
+        item: "[index]",
+        __proto__: null,
+    },
+
+    Database: {
+        changeVersion: "oldVersion, newVersion, [callback], [errorCallback], [successCallback]",
+        readTransaction: "callback, [errorCallback], [successCallback]",
+        transaction: "callback, [errorCallback], [successCallback]",
+        __proto__: null,
+    },
+
+    DatabaseCallback: {
+        handleEvent: "database",
+        __proto__: null,
+    },
+
+    DedicatedWorkerGlobalScope: {
+        postMessage: "message, [messagePorts]",
+        __proto__: null,
+    },
+
+    DeviceMotionEvent: {
+        initDeviceMotionEvent: "[type], [bubbles], [cancelable], [acceleration], [accelerationIncludingGravity], [rotationRate], [interval]",
+        __proto__: null,
+    },
+
+    DeviceOrientationEvent: {
+        initDeviceOrientationEvent: "[type], [bubbles], [cancelable], [alpha], [beta], [gamma], [absolute]",
+        __proto__: null,
+    },
+
+    DocumentFragment: {
+        getElementById: "id",
+        querySelector: "selectors",
+        querySelectorAll: "selectors",
+        __proto__: null,
+    },
+
+    Event: {
+        initEvent: "[type], [canBubble], [cancelable]",
+        __proto__: null,
+    },
+
+    FileList: {
+        item: "index",
+        __proto__: null,
+    },
+
+    FileReader: {
+        readAsArrayBuffer: "blob",
+        readAsBinaryString: "blob",
+        readAsDataURL: "blob",
+        readAsText: "blob, [encoding]",
+        __proto__: null,
+    },
+
+    FileReaderSync: {
+        readAsArrayBuffer: "blob",
+        readAsBinaryString: "blob",
+        readAsDataURL: "blob",
+        readAsText: "blob, [encoding]",
+        __proto__: null,
+    },
+
+    FontLoader: {
+        checkFont: "font, [text]",
+        loadFont: "params",
+        notifyWhenFontsReady: "callback",
+        __proto__: null,
+    },
+
+    FormData: {
+        append: "[name], [value], [filename]",
+        __proto__: null,
+    },
+
+    Geolocation: {
+        clearWatch: "watchID",
+        getCurrentPosition: "successCallback, [errorCallback], [options]",
+        watchPosition: "successCallback, [errorCallback], [options]",
+        __proto__: null,
+    },
+
+    HTMLAllCollection: {
+        item: "[index]",
+        namedItem: "name",
+        tags: "name",
+        __proto__: null,
+    },
+
+    HTMLButtonElement: {
+        setCustomValidity: "error",
+        __proto__: null,
+    },
+
+    HTMLCanvasElement: {
+        getContext: "[contextId]",
+        probablySupportsContext: "[contextId]",
+        toDataURL: "[type]",
+        __proto__: null,
+    },
+
+    HTMLCollection: {
+        item: "[index]",
+        namedItem: "[name]",
+        __proto__: null,
+    },
+
+    HTMLDocument: {
+        write: "[html]",
+        writeln: "[html]",
+        __proto__: null,
+    },
+
+    HTMLElement: {
+        insertAdjacentElement: "[position], [element]",
+        insertAdjacentHTML: "[position], [html]",
+        insertAdjacentText: "[position], [text]",
+        __proto__: null,
+    },
+
+    HTMLFieldSetElement: {
+        setCustomValidity: "error",
+        __proto__: null,
+    },
+
+    HTMLFormControlsCollection: {
+        namedItem: "[name]",
+        __proto__: null,
+    },
+
+    HTMLInputElement: {
+        setCustomValidity: "error",
+        setRangeText: "replacement",
+        setSelectionRange: "[start], [end], [direction]",
+        stepDown: "[n]",
+        stepUp: "[n]",
+        __proto__: null,
+    },
+
+    HTMLKeygenElement: {
+        setCustomValidity: "error",
+        __proto__: null,
+    },
+
+    HTMLMediaElement: {
+        addTextTrack: "kind, [label], [language]",
+        canPlayType: "[type], [keySystem]",
+        fastSeek: "time",
+        webkitAddKey: "keySystem, key, [initData], [sessionId]",
+        webkitCancelKeyRequest: "keySystem, [sessionId]",
+        webkitGenerateKeyRequest: "keySystem, [initData]",
+        webkitSetMediaKeys: "mediaKeys",
+        __proto__: null,
+    },
+
+    HTMLObjectElement: {
+        setCustomValidity: "error",
+        __proto__: null,
+    },
+
+    HTMLOptionsCollection: {
+        add: "element, [before]",
+        namedItem: "[name]",
+        remove: "[index]",
+        __proto__: null,
+    },
+
+    HTMLOutputElement: {
+        setCustomValidity: "error",
+        __proto__: null,
+    },
+
+    HTMLSelectElement: {
+        add: "element, [before]",
+        item: "index",
+        namedItem: "[name]",
+        setCustomValidity: "error",
+        __proto__: null,
+    },
+
+    HTMLTableElement: {
+        deleteRow: "[index]",
+        insertRow: "[index]",
+        __proto__: null,
+    },
+
+    HTMLTableRowElement: {
+        deleteCell: "[index]",
+        insertCell: "[index]",
+        __proto__: null,
+    },
+
+    HTMLTableSectionElement: {
+        deleteRow: "[index]",
+        insertRow: "[index]",
+        __proto__: null,
+    },
+
+    HTMLTextAreaElement: {
+        setCustomValidity: "error",
+        setRangeText: "replacement",
+        setSelectionRange: "[start], [end], [direction]",
+        __proto__: null,
+    },
+
+    HTMLVideoElement: {
+        webkitSetPresentationMode: "mode",
+        webkitSupportsPresentationMode: "mode",
+        __proto__: null,
+    },
+
+    HashChangeEvent: {
+        initHashChangeEvent: "[type], [canBubble], [cancelable], [oldURL], [newURL]",
+        __proto__: null,
+    },
+
+    History: {
+        go: "[distance]",
+        pushState: "data, title, [url]",
+        replaceState: "data, title, [url]",
+        __proto__: null,
+    },
+
+    IDBCursor: {
+        advance: "count",
+        continue: "[key]",
+        update: "value",
+        __proto__: null,
+    },
+
+    IDBDatabase: {
+        createObjectStore: "name, [options]",
+        deleteObjectStore: "name",
+        transaction: "storeName, [mode]",
+        __proto__: null,
+    },
+
+    IDBFactory: {
+        cmp: "first, second",
+        deleteDatabase: "name",
+        open: "name, [version]",
+        __proto__: null,
+    },
+
+    IDBIndex: {
+        count: "[range]",
+        get: "key",
+        getKey: "key",
+        openCursor: "[range], [direction]",
+        openKeyCursor: "[range], [direction]",
+        __proto__: null,
+    },
+
+    IDBObjectStore: {
+        add: "value, [key]",
+        count: "[range]",
+        createIndex: "name, keyPath, [options]",
+        delete: "keyRange",
+        deleteIndex: "name",
+        get: "key",
+        index: "name",
+        openCursor: "[range], [direction]",
+        put: "value, [key]",
+        __proto__: null,
+    },
+
+    IDBTransaction: {
+        objectStore: "name",
+        __proto__: null,
+    },
+
+    KeyboardEvent: {
+        initKeyboardEvent: "[type], [canBubble], [cancelable], [view], [keyIdentifier], [location], [ctrlKey], [altKey], [shiftKey], [metaKey], [altGraphKey]",
+        __proto__: null,
+    },
+
+    Location: {
+        assign: "[url]",
+        reload: "[force=false]",
+        replace: "[url]",
+        __proto__: null,
+    },
+
+    MediaController: {
+        /* EventTarget */
+        __proto__: null,
+    },
+
+    MediaControlsHost: {
+        displayNameForTrack: "track",
+        mediaUIImageData: "partID",
+        setSelectedTextTrack: "track",
+        sortedTrackListForMenu: "trackList",
+        __proto__: null,
+    },
+
+    MediaList: {
+        appendMedium: "[newMedium]",
+        deleteMedium: "[oldMedium]",
+        item: "[index]",
+        __proto__: null,
+    },
+
+    MediaQueryList: {
+        addListener: "[listener]",
+        removeListener: "[listener]",
+        __proto__: null,
+    },
+
+    MediaQueryListListener: {
+        queryChanged: "[list]",
+        __proto__: null,
+    },
+
+    MediaSource: {
+        addSourceBuffer: "type",
+        endOfStream: "[error]",
+        removeSourceBuffer: "buffer",
+        __proto__: null,
+    },
+
+    MediaStreamTrack: {
+        applyConstraints: "constraints",
+        __proto__: null,
+    },
+
+    MediaStreamTrackSourcesCallback: {
+        handleEvent: "sources",
+        __proto__: null,
+    },
+
+    MessageEvent: {
+        initMessageEvent: "[typeArg], [canBubbleArg], [cancelableArg], [dataArg], [originArg], [lastEventIdArg], [sourceArg], [messagePorts]",
+        webkitInitMessageEvent: "[typeArg], [canBubbleArg], [cancelableArg], [dataArg], [originArg], [lastEventIdArg], [sourceArg], [transferables]",
+        __proto__: null,
+    },
+
+    MessagePort: {
+        /* EventTarget */
+        __proto__: null,
+    },
+
+    MimeTypeArray: {
+        item: "[index]",
+        namedItem: "[name]",
+        __proto__: null,
+    },
+
+    MouseEvent: {
+        initMouseEvent: "[type], [canBubble], [cancelable], [view], [detail], [screenX], [screenY], [clientX], [clientY], [ctrlKey], [altKey], [shiftKey], [metaKey], [button], [relatedTarget]",
+        __proto__: null,
+    },
+
+    MutationEvent: {
+        initMutationEvent: "[type], [canBubble], [cancelable], [relatedNode], [prevValue], [newValue], [attrName], [attrChange]",
+        __proto__: null,
+    },
+
+    MutationObserver: {
+        observe: "target, options",
+        __proto__: null,
+    },
+
+    NamedNodeMap: {
+        getNamedItem: "[name]",
+        getNamedItemNS: "[namespaceURI], [localName]",
+        item: "[index]",
+        removeNamedItem: "[name]",
+        removeNamedItemNS: "[namespaceURI], [localName]",
+        setNamedItem: "[node]",
+        setNamedItemNS: "[node]",
+        __proto__: null,
+    },
+
+    Navigator: {
+        webkitGetUserMedia: "options, successCallback, errorCallback",
+        __proto__: null,
+    },
+
+    NavigatorUserMediaErrorCallback: {
+        handleEvent: "error",
+        __proto__: null,
+    },
+
+    NavigatorUserMediaSuccessCallback: {
+        handleEvent: "stream",
+        __proto__: null,
+    },
+
+    NodeFilter: {
+        acceptNode: "[n]",
+        __proto__: null,
+    },
+
+    NodeList: {
+        item: "index",
+        __proto__: null,
+    },
+
+    Notification: {
+        /* EventTarget */
+        __proto__: null,
+    },
+
+    NotificationCenter: {
+        createNotification: "iconUrl, title, body",
+        requestPermission: "[callback]",
+        __proto__: null,
+    },
+
+    NotificationPermissionCallback: {
+        handleEvent: "permission",
+        __proto__: null,
+    },
+
+    OESVertexArrayObject: {
+        bindVertexArrayOES: "[arrayObject]",
+        deleteVertexArrayOES: "[arrayObject]",
+        isVertexArrayOES: "[arrayObject]",
+        __proto__: null,
+    },
+
+    OscillatorNode: {
+        noteOff: "when",
+        noteOn: "when",
+        setPeriodicWave: "wave",
+        start: "[when]",
+        stop: "[when]",
+        __proto__: null,
+    },
+
+    Path2D: {
+        addPath: "path, [transform]",
+        arc: "[x], [y], [radius], [startAngle], [endAngle], [anticlockwise]",
+        arcTo: "[x1], [y1], [x2], [y2], [radius]",
+        bezierCurveTo: "[cp1x], [cp1y], [cp2x], [cp2y], [x], [y]",
+        ellipse: "x, y, radiusX, radiusY, rotation, startAngle, endAngle, [anticlockwise]",
+        lineTo: "[x], [y]",
+        moveTo: "[x], [y]",
+        quadraticCurveTo: "[cpx], [cpy], [x], [y]",
+        rect: "[x], [y], [width], [height]",
+        __proto__: null,
+    },
+
+    Plugin: {
+        item: "[index]",
+        namedItem: "[name]",
+        __proto__: null,
+    },
+
+    PluginArray: {
+        item: "[index]",
+        namedItem: "[name]",
+        refresh: "[reload]",
+        __proto__: null,
+    },
+
+    PositionCallback: {
+        handleEvent: "position",
+        __proto__: null,
+    },
+
+    PositionErrorCallback: {
+        handleEvent: "error",
+        __proto__: null,
+    },
+
+    QuickTimePluginReplacement: {
+        postEvent: "eventName",
+        __proto__: null,
+    },
+
+    RTCDTMFSender: {
+        insertDTMF: "tones, [duration], [interToneGap]",
+        __proto__: null,
+    },
+
+    RTCDataChannel: {
+        send: "data",
+        __proto__: null,
+    },
+
+    RTCPeerConnectionErrorCallback: {
+        handleEvent: "error",
+        __proto__: null,
+    },
+
+    RTCSessionDescriptionCallback: {
+        handleEvent: "sdp",
+        __proto__: null,
+    },
+
+    RTCStatsCallback: {
+        handleEvent: "response",
+        __proto__: null,
+    },
+
+    RTCStatsReport: {
+        stat: "name",
+        __proto__: null,
+    },
+
+    RTCStatsResponse: {
+        namedItem: "[name]",
+        __proto__: null,
+    },
+
+    Range: {
+        collapse: "[toStart]",
+        compareBoundaryPoints: "[how], [sourceRange]",
+        compareNode: "[refNode]",
+        comparePoint: "[refNode], [offset]",
+        createContextualFragment: "[html]",
+        expand: "[unit]",
+        insertNode: "[newNode]",
+        intersectsNode: "[refNode]",
+        isPointInRange: "[refNode], [offset]",
+        selectNode: "[refNode]",
+        selectNodeContents: "[refNode]",
+        setEnd: "[refNode], [offset]",
+        setEndAfter: "[refNode]",
+        setEndBefore: "[refNode]",
+        setStart: "[refNode], [offset]",
+        setStartAfter: "[refNode]",
+        setStartBefore: "[refNode]",
+        surroundContents: "[newParent]",
+        __proto__: null,
+    },
+
+    ReadableStream: {
+        cancel: "reason",
+        pipeThrough: "dest, options",
+        pipeTo: "streams, options",
+        __proto__: null,
+    },
+
+    WritableStream: {
+        abort: "reason",
+        close: "",
+        write: "chunk",
+        __proto__: null,
+    },
+
+    RequestAnimationFrameCallback: {
+        handleEvent: "highResTime",
+        __proto__: null,
+    },
+
+    SQLResultSetRowList: {
+        item: "index",
+        __proto__: null,
+    },
+
+    SQLStatementCallback: {
+        handleEvent: "transaction, resultSet",
+        __proto__: null,
+    },
+
+    SQLStatementErrorCallback: {
+        handleEvent: "transaction, error",
+        __proto__: null,
+    },
+
+    SQLTransaction: {
+        executeSql: "sqlStatement, arguments, [callback], [errorCallback]",
+        __proto__: null,
+    },
+
+    SQLTransactionCallback: {
+        handleEvent: "transaction",
+        __proto__: null,
+    },
+
+    SQLTransactionErrorCallback: {
+        handleEvent: "error",
+        __proto__: null,
+    },
+
+    SVGAngle: {
+        convertToSpecifiedUnits: "unitType",
+        newValueSpecifiedUnits: "unitType, valueInSpecifiedUnits",
+        __proto__: null,
+    },
+
+    SVGAnimationElement: {
+        beginElementAt: "[offset]",
+        endElementAt: "[offset]",
+        hasExtension: "[extension]",
+        __proto__: null,
+    },
+
+    SVGColor: {
+        setColor: "colorType, rgbColor, iccColor",
+        setRGBColor: "rgbColor",
+        setRGBColorICCColor: "rgbColor, iccColor",
+        __proto__: null,
+    },
+
+    SVGCursorElement: {
+        hasExtension: "[extension]",
+        __proto__: null,
+    },
+
+    SVGDocument: {
+        createEvent: "[eventType]",
+        __proto__: null,
+    },
+
+    SVGElement: {
+        getPresentationAttribute: "[name]",
+        __proto__: null,
+    },
+
+    SVGFEDropShadowElement: {
+        setStdDeviation: "[stdDeviationX], [stdDeviationY]",
+        __proto__: null,
+    },
+
+    SVGFEGaussianBlurElement: {
+        setStdDeviation: "[stdDeviationX], [stdDeviationY]",
+        __proto__: null,
+    },
+
+    SVGFEMorphologyElement: {
+        setRadius: "[radiusX], [radiusY]",
+        __proto__: null,
+    },
+
+    SVGFilterElement: {
+        setFilterRes: "[filterResX], [filterResY]",
+        __proto__: null,
+    },
+
+    SVGGraphicsElement: {
+        getTransformToElement: "[element]",
+        hasExtension: "[extension]",
+        __proto__: null,
+    },
+
+    SVGLength: {
+        convertToSpecifiedUnits: "unitType",
+        newValueSpecifiedUnits: "unitType, valueInSpecifiedUnits",
+        __proto__: null,
+    },
+
+    SVGLengthList: {
+        appendItem: "item",
+        getItem: "index",
+        initialize: "item",
+        insertItemBefore: "item, index",
+        removeItem: "index",
+        replaceItem: "item, index",
+        __proto__: null,
+    },
+
+    SVGMarkerElement: {
+        setOrientToAngle: "[angle]",
+        __proto__: null,
+    },
+
+    SVGMaskElement: {
+        hasExtension: "[extension]",
+        __proto__: null,
+    },
+
+    SVGMatrix: {
+        multiply: "secondMatrix",
+        rotate: "angle",
+        rotateFromVector: "x, y",
+        scale: "scaleFactor",
+        scaleNonUniform: "scaleFactorX, scaleFactorY",
+        skewX: "angle",
+        skewY: "angle",
+        translate: "x, y",
+        __proto__: null,
+    },
+
+    SVGNumberList: {
+        appendItem: "item",
+        getItem: "index",
+        initialize: "item",
+        insertItemBefore: "item, index",
+        removeItem: "index",
+        replaceItem: "item, index",
+        __proto__: null,
+    },
+
+    SVGPaint: {
+        setPaint: "paintType, uri, rgbColor, iccColor",
+        setUri: "uri",
+        __proto__: null,
+    },
+
+    SVGPathElement: {
+        createSVGPathSegArcAbs: "[x], [y], [r1], [r2], [angle], [largeArcFlag], [sweepFlag]",
+        createSVGPathSegArcRel: "[x], [y], [r1], [r2], [angle], [largeArcFlag], [sweepFlag]",
+        createSVGPathSegCurvetoCubicAbs: "[x], [y], [x1], [y1], [x2], [y2]",
+        createSVGPathSegCurvetoCubicRel: "[x], [y], [x1], [y1], [x2], [y2]",
+        createSVGPathSegCurvetoCubicSmoothAbs: "[x], [y], [x2], [y2]",
+        createSVGPathSegCurvetoCubicSmoothRel: "[x], [y], [x2], [y2]",
+        createSVGPathSegCurvetoQuadraticAbs: "[x], [y], [x1], [y1]",
+        createSVGPathSegCurvetoQuadraticRel: "[x], [y], [x1], [y1]",
+        createSVGPathSegCurvetoQuadraticSmoothAbs: "[x], [y]",
+        createSVGPathSegCurvetoQuadraticSmoothRel: "[x], [y]",
+        createSVGPathSegLinetoAbs: "[x], [y]",
+        createSVGPathSegLinetoHorizontalAbs: "[x]",
+        createSVGPathSegLinetoHorizontalRel: "[x]",
+        createSVGPathSegLinetoRel: "[x], [y]",
+        createSVGPathSegLinetoVerticalAbs: "[y]",
+        createSVGPathSegLinetoVerticalRel: "[y]",
+        createSVGPathSegMovetoAbs: "[x], [y]",
+        createSVGPathSegMovetoRel: "[x], [y]",
+        getPathSegAtLength: "[distance]",
+        getPointAtLength: "[distance]",
+        __proto__: null,
+    },
+
+    SVGPathSegList: {
+        appendItem: "newItem",
+        getItem: "index",
+        initialize: "newItem",
+        insertItemBefore: "newItem, index",
+        removeItem: "index",
+        replaceItem: "newItem, index",
+        __proto__: null,
+    },
+
+    SVGPatternElement: {
+        hasExtension: "[extension]",
+        __proto__: null,
+    },
+
+    SVGPoint: {
+        matrixTransform: "matrix",
+        __proto__: null,
+    },
+
+    SVGPointList: {
+        appendItem: "item",
+        getItem: "index",
+        initialize: "item",
+        insertItemBefore: "item, index",
+        removeItem: "index",
+        replaceItem: "item, index",
+        __proto__: null,
+    },
+
+    SVGSVGElement: {
+        checkEnclosure: "[element], [rect]",
+        checkIntersection: "[element], [rect]",
+        createSVGTransformFromMatrix: "[matrix]",
+        getElementById: "[elementId]",
+        getEnclosureList: "[rect], [referenceElement]",
+        getIntersectionList: "[rect], [referenceElement]",
+        setCurrentTime: "[seconds]",
+        suspendRedraw: "[maxWaitMilliseconds]",
+        unsuspendRedraw: "[suspendHandleId]",
+        __proto__: null,
+    },
+
+    SVGStringList: {
+        appendItem: "item",
+        getItem: "index",
+        initialize: "item",
+        insertItemBefore: "item, index",
+        removeItem: "index",
+        replaceItem: "item, index",
+        __proto__: null,
+    },
+
+    SVGTextContentElement: {
+        getCharNumAtPosition: "[point]",
+        getEndPositionOfChar: "[offset]",
+        getExtentOfChar: "[offset]",
+        getRotationOfChar: "[offset]",
+        getStartPositionOfChar: "[offset]",
+        getSubStringLength: "[offset], [length]",
+        selectSubString: "[offset], [length]",
+        __proto__: null,
+    },
+
+    SVGTransform: {
+        setMatrix: "matrix",
+        setRotate: "angle, cx, cy",
+        setScale: "sx, sy",
+        setSkewX: "angle",
+        setSkewY: "angle",
+        setTranslate: "tx, ty",
+        __proto__: null,
+    },
+
+    SVGTransformList: {
+        appendItem: "item",
+        createSVGTransformFromMatrix: "matrix",
+        getItem: "index",
+        initialize: "item",
+        insertItemBefore: "item, index",
+        removeItem: "index",
+        replaceItem: "item, index",
+        __proto__: null,
+    },
+
+    SecurityPolicy: {
+        allowsConnectionTo: "url",
+        allowsFontFrom: "url",
+        allowsFormAction: "url",
+        allowsFrameFrom: "url",
+        allowsImageFrom: "url",
+        allowsMediaFrom: "url",
+        allowsObjectFrom: "url",
+        allowsPluginType: "type",
+        allowsScriptFrom: "url",
+        allowsStyleFrom: "url",
+        __proto__: null,
+    },
+
+    Selection: {
+        addRange: "[range]",
+        collapse: "[node], [index]",
+        containsNode: "[node], [allowPartial]",
+        extend: "[node], [offset]",
+        getRangeAt: "[index]",
+        modify: "[alter], [direction], [granularity]",
+        selectAllChildren: "[node]",
+        setBaseAndExtent: "[baseNode], [baseOffset], [extentNode], [extentOffset]",
+        setPosition: "[node], [offset]",
+        __proto__: null,
+    },
+
+    SourceBuffer: {
+        appendBuffer: "data",
+        remove: "start, end",
+        __proto__: null,
+    },
+
+    SourceBufferList: {
+        item: "index",
+        __proto__: null,
+    },
+
+    SpeechSynthesis: {
+        speak: "utterance",
+        __proto__: null,
+    },
+
+    SpeechSynthesisUtterance: {
+        /* EventTarget */
+        __proto__: null,
+    },
+
+    Storage: {
+        getItem: "key",
+        key: "index",
+        removeItem: "key",
+        setItem: "key, data",
+        __proto__: null,
+    },
+
+    StorageErrorCallback: {
+        handleEvent: "error",
+        __proto__: null,
+    },
+
+    StorageEvent: {
+        initStorageEvent: "[typeArg], [canBubbleArg], [cancelableArg], [keyArg], [oldValueArg], [newValueArg], [urlArg], [storageAreaArg]",
+        __proto__: null,
+    },
+
+    StorageInfo: {
+        queryUsageAndQuota: "storageType, [usageCallback], [errorCallback]",
+        requestQuota: "storageType, newQuotaInBytes, [quotaCallback], [errorCallback]",
+        __proto__: null,
+    },
+
+    StorageQuota: {
+        queryUsageAndQuota: "usageCallback, [errorCallback]",
+        requestQuota: "newQuotaInBytes, [quotaCallback], [errorCallback]",
+        __proto__: null,
+    },
+
+    StorageQuotaCallback: {
+        handleEvent: "grantedQuotaInBytes",
+        __proto__: null,
+    },
+
+    StorageUsageCallback: {
+        handleEvent: "currentUsageInBytes, currentQuotaInBytes",
+        __proto__: null,
+    },
+
+    StringCallback: {
+        handleEvent: "data",
+        __proto__: null,
+    },
+
+    StyleMedia: {
+        matchMedium: "[mediaquery]",
+        __proto__: null,
+    },
+
+    StyleSheetList: {
+        item: "[index]",
+        __proto__: null,
+    },
+
+    Text: {
+        replaceWholeText: "[content]",
+        splitText: "offset",
+        __proto__: null,
+    },
+
+    TextEvent: {
+        initTextEvent: "[typeArg], [canBubbleArg], [cancelableArg], [viewArg], [dataArg]",
+        __proto__: null,
+    },
+
+    TextTrack: {
+        addCue: "cue",
+        addRegion: "region",
+        removeCue: "cue",
+        removeRegion: "region",
+        __proto__: null,
+    },
+
+    TextTrackCue: {
+        /* EventTarget */
+        __proto__: null,
+    },
+
+    TextTrackCueList: {
+        getCueById: "id",
+        item: "index",
+        __proto__: null,
+    },
+
+    TextTrackList: {
+        getTrackById: "id",
+        item: "index",
+        __proto__: null,
+    },
+
+    TimeRanges: {
+        end: "index",
+        start: "index",
+        __proto__: null,
+    },
+
+    TouchEvent: {
+        initTouchEvent: "[touches], [targetTouches], [changedTouches], [type], [view], [screenX], [screenY], [clientX], [clientY], [ctrlKey], [altKey], [shiftKey], [metaKey]",
+        __proto__: null,
+    },
+
+    TouchList: {
+        item: "index",
+        __proto__: null,
+    },
+
+    UIEvent: {
+        initUIEvent: "[type], [canBubble], [cancelable], [view], [detail]",
+        __proto__: null,
+    },
+
+    UserMessageHandler: {
+        postMessage: "message",
+        __proto__: null,
+    },
+
+    VTTRegionList: {
+        getRegionById: "id",
+        item: "index",
+        __proto__: null,
+    },
+
+    VideoTrackList: {
+        getTrackById: "id",
+        item: "index",
+        __proto__: null,
+    },
+
+    WebGL2RenderingContext: {
+        beginQuery: "target, query",
+        beginTransformFeedback: "primitiveMode",
+        bindBufferBase: "target, index, buffer",
+        bindBufferRange: "target, index, buffer, offset, size",
+        bindSampler: "unit, sampler",
+        bindTransformFeedback: "target, id",
+        bindVertexArray: "vertexArray",
+        blitFramebuffer: "srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter",
+        clearBufferfi: "buffer, drawbuffer, depth, stencil",
+        clearBufferfv: "buffer, drawbuffer, value",
+        clearBufferiv: "buffer, drawbuffer, value",
+        clearBufferuiv: "buffer, drawbuffer, value",
+        clientWaitSync: "sync, flags, timeout",
+        compressedTexImage3D: "target, level, internalformat, width, height, depth, border, imageSize, data",
+        compressedTexSubImage3D: "target, level, xoffset, yoffset, zoffset, width, height, depth, format, imageSize, data",
+        copyBufferSubData: "readTarget, writeTarget, readOffset, writeOffset, size",
+        copyTexSubImage3D: "target, level, xoffset, yoffset, zoffset, x, y, width, height",
+        deleteQuery: "query",
+        deleteSampler: "sampler",
+        deleteSync: "sync",
+        deleteTransformFeedback: "id",
+        deleteVertexArray: "vertexArray",
+        drawArraysInstanced: "mode, first, count, instanceCount",
+        drawBuffers: "buffers",
+        drawElementsInstanced: "mode, count, type, offset, instanceCount",
+        drawRangeElements: "mode, start, end, count, type, offset",
+        endQuery: "target",
+        fenceSync: "condition, flags",
+        framebufferTextureLayer: "target, attachment, texture, level, layer",
+        getActiveUniformBlockName: "program, uniformBlockIndex",
+        getActiveUniformBlockParameter: "program, uniformBlockIndex, pname",
+        getActiveUniforms: "program, uniformIndices, pname",
+        getBufferSubData: "target, offset, returnedData",
+        getFragDataLocation: "program, name",
+        getIndexedParameter: "target, index",
+        getInternalformatParameter: "target, internalformat, pname",
+        getQuery: "target, pname",
+        getQueryParameter: "query, pname",
+        getSamplerParameter: "sampler, pname",
+        getSyncParameter: "sync, pname",
+        getTransformFeedbackVarying: "program, index",
+        getUniformBlockIndex: "program, uniformBlockName",
+        getUniformIndices: "program, uniformNames",
+        invalidateFramebuffer: "target, attachments",
+        invalidateSubFramebuffer: "target, attachments, x, y, width, height",
+        isQuery: "query",
+        isSampler: "sampler",
+        isSync: "sync",
+        isTransformFeedback: "id",
+        isVertexArray: "vertexArray",
+        readBuffer: "src",
+        renderbufferStorageMultisample: "target, samples, internalformat, width, height",
+        samplerParameterf: "sampler, pname, param",
+        samplerParameteri: "sampler, pname, param",
+        texImage3D: "target, level, internalformat, width, height, depth, border, format, type, pixels",
+        texStorage2D: "target, levels, internalformat, width, height",
+        texStorage3D: "target, levels, internalformat, width, height, depth",
+        texSubImage3D: "target, level, xoffset, yoffset, zoffset, width, height, depth, format, type, pixels",
+        transformFeedbackVaryings: "program, varyings, bufferMode",
+        uniform1ui: "location, v0",
+        uniform1uiv: "location, value",
+        uniform2ui: "location, v0, v1",
+        uniform2uiv: "location, value",
+        uniform3ui: "location, v0, v1, v2",
+        uniform3uiv: "location, value",
+        uniform4ui: "location, v0, v1, v2, v3",
+        uniform4uiv: "location, value",
+        uniformBlockBinding: "program, uniformBlockIndex, uniformBlockBinding",
+        uniformMatrix2x3fv: "location, transpose, value",
+        uniformMatrix2x4fv: "location, transpose, value",
+        uniformMatrix3x2fv: "location, transpose, value",
+        uniformMatrix3x4fv: "location, transpose, value",
+        uniformMatrix4x2fv: "location, transpose, value",
+        uniformMatrix4x3fv: "location, transpose, value",
+        vertexAttribDivisor: "index, divisor",
+        vertexAttribI4i: "index, x, y, z, w",
+        vertexAttribI4iv: "index, v",
+        vertexAttribI4ui: "index, x, y, z, w",
+        vertexAttribI4uiv: "index, v",
+        vertexAttribIPointer: "index, size, type, stride, offset",
+        waitSync: "sync, flags, timeout",
+        __proto__: null,
+    },
+
+    WebGLDebugShaders: {
+        getTranslatedShaderSource: "shader",
+        __proto__: null,
+    },
+
+    WebGLDrawBuffers: {
+        drawBuffersWEBGL: "buffers",
+        __proto__: null,
+    },
+
+    WebGLRenderingContextBase: {
+        activeTexture: "texture",
+        attachShader: "program, shader",
+        bindAttribLocation: "program, index, name",
+        bindBuffer: "target, buffer",
+        bindFramebuffer: "target, framebuffer",
+        bindRenderbuffer: "target, renderbuffer",
+        bindTexture: "target, texture",
+        blendColor: "red, green, blue, alpha",
+        blendEquation: "mode",
+        blendEquationSeparate: "modeRGB, modeAlpha",
+        blendFunc: "sfactor, dfactor",
+        blendFuncSeparate: "srcRGB, dstRGB, srcAlpha, dstAlpha",
+        bufferData: "target, data, usage",
+        bufferSubData: "target, offset, data",
+        checkFramebufferStatus: "target",
+        clear: "mask",
+        clearColor: "red, green, blue, alpha",
+        clearDepth: "depth",
+        clearStencil: "s",
+        colorMask: "red, green, blue, alpha",
+        compileShader: "shader",
+        compressedTexImage2D: "target, level, internalformat, width, height, border, data",
+        compressedTexSubImage2D: "target, level, xoffset, yoffset, width, height, format, data",
+        copyTexImage2D: "target, level, internalformat, x, y, width, height, border",
+        copyTexSubImage2D: "target, level, xoffset, yoffset, x, y, width, height",
+        createShader: "type",
+        cullFace: "mode",
+        deleteBuffer: "buffer",
+        deleteFramebuffer: "framebuffer",
+        deleteProgram: "program",
+        deleteRenderbuffer: "renderbuffer",
+        deleteShader: "shader",
+        deleteTexture: "texture",
+        depthFunc: "func",
+        depthMask: "flag",
+        depthRange: "zNear, zFar",
+        detachShader: "program, shader",
+        disable: "cap",
+        disableVertexAttribArray: "index",
+        drawArrays: "mode, first, count",
+        drawElements: "mode, count, type, offset",
+        enable: "cap",
+        enableVertexAttribArray: "index",
+        framebufferRenderbuffer: "target, attachment, renderbuffertarget, renderbuffer",
+        framebufferTexture2D: "target, attachment, textarget, texture, level",
+        frontFace: "mode",
+        generateMipmap: "target",
+        getActiveAttrib: "program, index",
+        getActiveUniform: "program, index",
+        getAttachedShaders: "program",
+        getAttribLocation: "program, name",
+        getBufferParameter: "target, pname",
+        getExtension: "name",
+        getFramebufferAttachmentParameter: "target, attachment, pname",
+        getParameter: "pname",
+        getProgramInfoLog: "program",
+        getProgramParameter: "program, pname",
+        getRenderbufferParameter: "target, pname",
+        getShaderInfoLog: "shader",
+        getShaderParameter: "shader, pname",
+        getShaderPrecisionFormat: "shadertype, precisiontype",
+        getShaderSource: "shader",
+        getTexParameter: "target, pname",
+        getUniform: "program, location",
+        getUniformLocation: "program, name",
+        getVertexAttrib: "index, pname",
+        getVertexAttribOffset: "index, pname",
+        hint: "target, mode",
+        isBuffer: "buffer",
+        isEnabled: "cap",
+        isFramebuffer: "framebuffer",
+        isProgram: "program",
+        isRenderbuffer: "renderbuffer",
+        isShader: "shader",
+        isTexture: "texture",
+        lineWidth: "width",
+        linkProgram: "program",
+        pixelStorei: "pname, param",
+        polygonOffset: "factor, units",
+        readPixels: "x, y, width, height, format, type, pixels",
+        renderbufferStorage: "target, internalformat, width, height",
+        sampleCoverage: "value, invert",
+        scissor: "x, y, width, height",
+        shaderSource: "shader, string",
+        stencilFunc: "func, ref, mask",
+        stencilFuncSeparate: "face, func, ref, mask",
+        stencilMask: "mask",
+        stencilMaskSeparate: "face, mask",
+        stencilOp: "fail, zfail, zpass",
+        stencilOpSeparate: "face, fail, zfail, zpass",
+        texImage2D: "target, level, internalformat, width, height, border, format, type, pixels",
+        texParameterf: "target, pname, param",
+        texParameteri: "target, pname, param",
+        texSubImage2D: "target, level, xoffset, yoffset, width, height, format, type, pixels",
+        uniform1f: "location, x",
+        uniform1fv: "location, v",
+        uniform1i: "location, x",
+        uniform1iv: "location, v",
+        uniform2f: "location, x, y",
+        uniform2fv: "location, v",
+        uniform2i: "location, x, y",
+        uniform2iv: "location, v",
+        uniform3f: "location, x, y, z",
+        uniform3fv: "location, v",
+        uniform3i: "location, x, y, z",
+        uniform3iv: "location, v",
+        uniform4f: "location, x, y, z, w",
+        uniform4fv: "location, v",
+        uniform4i: "location, x, y, z, w",
+        uniform4iv: "location, v",
+        uniformMatrix2fv: "location, transpose, array",
+        uniformMatrix3fv: "location, transpose, array",
+        uniformMatrix4fv: "location, transpose, array",
+        useProgram: "program",
+        validateProgram: "program",
+        vertexAttrib1f: "indx, x",
+        vertexAttrib1fv: "indx, values",
+        vertexAttrib2f: "indx, x, y",
+        vertexAttrib2fv: "indx, values",
+        vertexAttrib3f: "indx, x, y, z",
+        vertexAttrib3fv: "indx, values",
+        vertexAttrib4f: "indx, x, y, z, w",
+        vertexAttrib4fv: "indx, values",
+        vertexAttribPointer: "indx, size, type, normalized, stride, offset",
+        viewport: "x, y, width, height",
+        __proto__: null,
+    },
+
+    WebKitCSSMatrix: {
+        multiply: "[secondMatrix]",
+        rotate: "[rotX], [rotY], [rotZ]",
+        rotateAxisAngle: "[x], [y], [z], [angle]",
+        scale: "[scaleX], [scaleY], [scaleZ]",
+        setMatrixValue: "[string]",
+        skewX: "[angle]",
+        skewY: "[angle]",
+        translate: "[x], [y], [z]",
+        __proto__: null,
+    },
+
+    WebKitMediaKeySession: {
+        update: "key",
+        __proto__: null,
+    },
+
+    WebKitMediaKeys: {
+        createSession: "[type], [initData]",
+        __proto__: null,
+    },
+
+    WebKitNamedFlow: {
+        getRegionsByContent: "contentNode",
+        __proto__: null,
+    },
+
+    WebKitNamedFlowCollection: {
+        item: "index",
+        namedItem: "name",
+        __proto__: null,
+    },
+
+    WebKitSubtleCrypto: {
+        decrypt: "algorithm, key, data",
+        digest: "algorithm, data",
+        encrypt: "algorithm, key, data",
+        exportKey: "format, key",
+        generateKey: "algorithm, [extractable], [keyUsages]",
+        importKey: "format, keyData, algorithm, [extractable], [keyUsages]",
+        sign: "algorithm, key, data",
+        unwrapKey: "format, wrappedKey, unwrappingKey, unwrapAlgorithm, unwrappedKeyAlgorithm, [extractable], [keyUsages]",
+        verify: "algorithm, key, signature, data",
+        wrapKey: "format, key, wrappingKey, wrapAlgorithm",
+        __proto__: null,
+    },
+
+    WebSocket: {
+        close: "[code], [reason]",
+        send: "data",
+        __proto__: null,
+    },
+
+    WheelEvent: {
+        initWebKitWheelEvent: "[wheelDeltaX], [wheelDeltaY], [view], [screenX], [screenY], [clientX], [clientY], [ctrlKey], [altKey], [shiftKey], [metaKey]",
+        __proto__: null,
+    },
+
+    Worker: {
+        postMessage: "message, [messagePorts]",
+        __proto__: null,
+    },
+
+    WorkerGlobalScope: {
+        clearInterval: "[handle]",
+        clearTimeout: "[handle]",
+        setInterval: "handler, [timeout]",
+        setTimeout: "handler, [timeout]",
+        __proto__: null,
+    },
+
+    XMLHttpRequest: {
+        getResponseHeader: "header",
+        open: "method, url, [async], [user], [password]",
+        overrideMimeType: "override",
+        setRequestHeader: "header, value",
+        __proto__: null,
+    },
+
+    XMLHttpRequestUpload: {
+        /* EventTarget */
+        __proto__: null,
+    },
+
+    XMLSerializer: {
+        serializeToString: "[node]",
+        __proto__: null,
+    },
+
+    XPathEvaluator: {
+        createExpression: "[expression], [resolver]",
+        createNSResolver: "[nodeResolver]",
+        evaluate: "[expression], [contextNode], [resolver], [type], [inResult]",
+        __proto__: null,
+    },
+
+    XPathExpression: {
+        evaluate: "[contextNode], [type], [inResult]",
+        __proto__: null,
+    },
+
+    XPathNSResolver: {
+        lookupNamespaceURI: "[prefix]",
+        __proto__: null,
+    },
+
+    XPathResult: {
+        snapshotItem: "[index]",
+        __proto__: null,
+    },
+
+    XSLTProcessor: {
+        getParameter: "namespaceURI, localName",
+        importStylesheet: "[stylesheet]",
+        removeParameter: "namespaceURI, localName",
+        setParameter: "namespaceURI, localName, value",
+        transformToDocument: "[source]",
+        transformToFragment: "[source], [docVal]",
+        __proto__: null,
+    },
+
+    webkitAudioContext: {
+        createBuffer: "numberOfChannels, numberOfFrames, sampleRate",
+        createChannelMerger: "[numberOfInputs]",
+        createChannelSplitter: "[numberOfOutputs]",
+        createDelay: "[maxDelayTime]",
+        createDelayNode: "[maxDelayTime]",
+        createJavaScriptNode: "bufferSize, [numberOfInputChannels], [numberOfOutputChannels]",
+        createMediaElementSource: "mediaElement",
+        createPeriodicWave: "real, imag",
+        createScriptProcessor: "bufferSize, [numberOfInputChannels], [numberOfOutputChannels]",
+        decodeAudioData: "audioData, successCallback, [errorCallback]",
+        __proto__: null,
+    },
+
+    webkitAudioPannerNode: {
+        setOrientation: "x, y, z",
+        setPosition: "x, y, z",
+        setVelocity: "x, y, z",
+        __proto__: null,
+    },
+
+    webkitMediaStream: {
+        addTrack: "track",
+        getTrackById: "trackId",
+        removeTrack: "track",
+        __proto__: null,
+    },
+
+    webkitRTCPeerConnection: {
+        addIceCandidate: "candidate, successCallback, failureCallback",
+        addStream: "stream",
+        createAnswer: "successCallback, failureCallback, [answerOptions]",
+        createDTMFSender: "track",
+        createDataChannel: "label, [options]",
+        createOffer: "successCallback, failureCallback, [offerOptions]",
+        getStats: "successCallback, failureCallback, [selector]",
+        getStreamById: "streamId",
+        removeStream: "stream",
+        setLocalDescription: "description, successCallback, failureCallback",
+        setRemoteDescription: "description, successCallback, failureCallback",
+        updateIce: "configuration",
+        __proto__: null,
+    },
+};
+
+(function() {
+    var EventTarget = {
+        addEventListener: "type, listener, [useCapture=false]",
+        removeEventListener: "type, listener, [useCapture=false]",
+        dispatchEvent: "event",
+    };
+
+    var eventTargetTypes = [
+        "Node", "Window",
+        "AudioNode", "AudioTrackList", "DOMApplicationCache", "FileReader", "FontLoader",
+        "MediaController", "MediaStreamTrack", "MessagePort", "Notification", "RTCDTMFSender",
+        "SpeechSynthesisUtterance", "TextTrack", "TextTrackCue", "TextTrackList",
+        "VideoTrackList", "WebKitMediaKeySession", "WebKitNamedFlow", "WebSocket",
+        "WorkerGlobalScope", "XMLHttpRequest", "webkitMediaStream", "webkitRTCPeerConnection"
+    ];
+
+    for (var type of eventTargetTypes)
+        Object.assign(WebInspector.NativePrototypeFunctionParameters[type], EventTarget);
+
+    var ElementQueries = {
+        getElementsByClassName: "classNames",
+        getElementsByTagName: "tagName",
+        getElementsByTagNameNS: "namespace, localName",
+        querySelector: "selectors",
+        querySelectorAll: "selectors",
+    };
+    Object.assign(WebInspector.NativePrototypeFunctionParameters.Element, ElementQueries);
+    Object.assign(WebInspector.NativePrototypeFunctionParameters.Document, ElementQueries);
+
+    var ChildNode = {
+        after: "[node|string]...",
+        before: "[node|string]...",
+        replaceWith: "[node|string]...",
+    };
+    Object.assign(WebInspector.NativePrototypeFunctionParameters.Element, ChildNode)
+    Object.assign(WebInspector.NativePrototypeFunctionParameters.CharacterData, ChildNode);
+
+    var ParentNode = {
+        append: "[node|string]...",
+        prepend: "[node|string]...",
+    };
+    Object.assign(WebInspector.NativePrototypeFunctionParameters.Element, ParentNode);
+    Object.assign(WebInspector.NativePrototypeFunctionParameters.Document, ParentNode);
+    Object.assign(WebInspector.NativePrototypeFunctionParameters.DocumentFragment, ParentNode);
+})();
diff --git a/Source/WebInspectorUI/UserInterface/Models/NetworkInstrument.js b/Source/WebInspectorUI/UserInterface/Models/NetworkInstrument.js
new file mode 100644
index 000000000..b946db583
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/NetworkInstrument.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkInstrument = class NetworkInstrument extends WebInspector.Instrument
+{
+    // Protected
+
+    get timelineRecordType()
+    {
+        return WebInspector.TimelineRecord.Type.Network;
+    }
+
+    startInstrumentation()
+    {
+        // Nothing to do, network instrumentation is always happening.
+    }
+
+    stopInstrumentation()
+    {
+        // Nothing to do, network instrumentation is always happening.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/NetworkTimeline.js b/Source/WebInspectorUI/UserInterface/Models/NetworkTimeline.js
new file mode 100644
index 000000000..450ff2c5f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/NetworkTimeline.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkTimeline = class NetworkTimeline extends WebInspector.Timeline
+{
+    // Public
+
+    recordForResource(resource)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+
+        return this._resourceRecordMap.get(resource) || null;
+    }
+
+    reset(suppressEvents)
+    {
+        this._resourceRecordMap = new Map;
+
+        super.reset(suppressEvents);
+    }
+
+    addRecord(record)
+    {
+        console.assert(record instanceof WebInspector.ResourceTimelineRecord);
+
+        // Don't allow duplicate records for a resource.
+        if (this._resourceRecordMap.has(record.resource))
+            return;
+
+        this._resourceRecordMap.set(record.resource, record);
+
+        super.addRecord(record);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ObjectPreview.js b/Source/WebInspectorUI/UserInterface/Models/ObjectPreview.js
new file mode 100644
index 000000000..5f6eb6e3d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ObjectPreview.js
@@ -0,0 +1,117 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectPreview = class ObjectPreview extends WebInspector.Object
+{
+    constructor(type, subtype, description, lossless, overflow, properties, entries, size)
+    {
+        super();
+
+        console.assert(type);
+        console.assert(typeof lossless === "boolean");
+        console.assert(!properties || !properties.length || properties[0] instanceof WebInspector.PropertyPreview);
+        console.assert(!entries || !entries.length || entries[0] instanceof WebInspector.CollectionEntryPreview);
+
+        this._type = type;
+        this._subtype = subtype;
+        this._description = description || "";
+        this._lossless = lossless;
+        this._overflow = overflow || false;
+        this._size = size;
+
+        this._properties = properties || null;
+        this._entries = entries || null;
+    }
+
+    // Static
+
+    // Runtime.ObjectPreview.
+    static fromPayload(payload)
+    {
+        if (payload.properties)
+            payload.properties = payload.properties.map(WebInspector.PropertyPreview.fromPayload);
+        if (payload.entries)
+            payload.entries = payload.entries.map(WebInspector.CollectionEntryPreview.fromPayload);
+
+        if (payload.subtype === "array") {
+            // COMPATIBILITY (iOS 8): Runtime.ObjectPreview did not have size property,
+            // instead it was tacked onto the end of the description, like "Array[#]".
+            var match = payload.description.match(/\[(\d+)\]$/);
+            if (match) {
+                payload.size = parseInt(match[1]);
+                payload.description = payload.description.replace(/\[\d+\]$/, "");
+            }
+        }
+
+        return new WebInspector.ObjectPreview(payload.type, payload.subtype, payload.description, payload.lossless, payload.overflow, payload.properties, payload.entries, payload.size);
+    }
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get subtype()
+    {
+        return this._subtype;
+    }
+
+    get description()
+    {
+        return this._description;
+    }
+
+    get lossless()
+    {
+        return this._lossless;
+    }
+
+    get overflow()
+    {
+        return this._overflow;
+    }
+
+    get propertyPreviews()
+    {
+        return this._properties;
+    }
+
+    get collectionEntryPreviews()
+    {
+        return this._entries;
+    }
+
+    get size()
+    {
+        return this._size;
+    }
+
+    hasSize()
+    {
+        return this._size !== undefined && (this._subtype === "array" || this._subtype === "set" || this._subtype === "map" || this._subtype === "weakmap" || this._subtype === "weakset");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Probe.js b/Source/WebInspectorUI/UserInterface/Models/Probe.js
new file mode 100644
index 000000000..45bd5d688
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Probe.js
@@ -0,0 +1,106 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeSample = class ProbeSample extends WebInspector.Object
+{
+    constructor(sampleId, batchId, elapsedTime, payload)
+    {
+        super();
+
+        this.sampleId = sampleId;
+        this.batchId = batchId;
+        this.timestamp = elapsedTime;
+        this.object = WebInspector.RemoteObject.fromPayload(payload);
+    }
+};
+
+WebInspector.Probe = class Probe extends WebInspector.Object
+{
+    constructor(id, breakpoint, expression)
+    {
+        super();
+
+        console.assert(id);
+        console.assert(breakpoint instanceof WebInspector.Breakpoint);
+
+        this._id = id;
+        this._breakpoint = breakpoint;
+        this._expression = expression;
+        this._samples = [];
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get breakpoint()
+    {
+        return this._breakpoint;
+    }
+
+    get expression()
+    {
+        return this._expression;
+    }
+
+    set expression(value)
+    {
+        if (this._expression === value)
+            return;
+
+        var data = {oldValue: this._expression, newValue: value};
+        this._expression = value;
+        this.clearSamples();
+        this.dispatchEventToListeners(WebInspector.Probe.Event.ExpressionChanged, data);
+    }
+
+    get samples()
+    {
+        return this._samples.slice();
+    }
+
+    clearSamples()
+    {
+        this._samples = [];
+        this.dispatchEventToListeners(WebInspector.Probe.Event.SamplesCleared);
+    }
+
+    addSample(sample)
+    {
+        console.assert(sample instanceof WebInspector.ProbeSample, "Wrong object type passed as probe sample: ", sample);
+        this._samples.push(sample);
+        this.dispatchEventToListeners(WebInspector.Probe.Event.SampleAdded, sample);
+    }
+};
+
+WebInspector.Probe.Event = {
+    ExpressionChanged: "probe-object-expression-changed",
+    SampleAdded: "probe-object-sample-added",
+    SamplesCleared: "probe-object-samples-cleared"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ProbeSet.js b/Source/WebInspectorUI/UserInterface/Models/ProbeSet.js
new file mode 100644
index 000000000..ded0915d3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ProbeSet.js
@@ -0,0 +1,159 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// A ProbeSet clusters Probes from the same Breakpoint and their samples.
+
+WebInspector.ProbeSet = class ProbeSet extends WebInspector.Object
+{
+    constructor(breakpoint)
+    {
+        super();
+
+        console.assert(breakpoint instanceof WebInspector.Breakpoint, "Unknown breakpoint argument: ", breakpoint);
+
+        this._breakpoint = breakpoint;
+        this._probes = [];
+        this._probesByIdentifier = new Map;
+
+        this._createDataTable();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceChanged, this);
+        WebInspector.Probe.addEventListener(WebInspector.Probe.Event.SampleAdded, this._sampleCollected, this);
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._breakpointResolvedStateDidChange, this);
+    }
+
+    // Public
+
+    get breakpoint()
+    {
+         return this._breakpoint;
+    }
+
+    get probes()
+    {
+        return this._probes.slice();
+    }
+
+    get dataTable()
+    {
+        return this._dataTable;
+    }
+
+    clear()
+    {
+        this._breakpoint.clearActions(WebInspector.BreakpointAction.Type.Probe);
+    }
+
+    clearSamples()
+    {
+        for (var probe of this._probes)
+            probe.clearSamples();
+
+        var oldTable = this._dataTable;
+        this._createDataTable();
+        this.dispatchEventToListeners(WebInspector.ProbeSet.Event.SamplesCleared, {oldTable});
+    }
+
+    createProbe(expression)
+    {
+        this.breakpoint.createAction(WebInspector.BreakpointAction.Type.Probe, null, expression);
+    }
+
+    addProbe(probe)
+    {
+        console.assert(probe instanceof WebInspector.Probe, "Tried to add non-probe ", probe, " to probe group", this);
+        console.assert(probe.breakpoint === this.breakpoint, "Probe and ProbeSet must have same breakpoint.", probe, this);
+
+        this._probes.push(probe);
+        this._probesByIdentifier.set(probe.id, probe);
+
+        this.dataTable.addProbe(probe);
+        this.dispatchEventToListeners(WebInspector.ProbeSet.Event.ProbeAdded, probe);
+    }
+
+    removeProbe(probe)
+    {
+        console.assert(probe instanceof WebInspector.Probe, "Tried to remove non-probe ", probe, " to probe group", this);
+        console.assert(this._probes.indexOf(probe) !== -1, "Tried to remove probe", probe, " not in group ", this);
+        console.assert(this._probesByIdentifier.has(probe.id), "Tried to remove probe", probe, " not in group ", this);
+
+        this._probes.splice(this._probes.indexOf(probe), 1);
+        this._probesByIdentifier.delete(probe.id);
+        this.dataTable.removeProbe(probe);
+        this.dispatchEventToListeners(WebInspector.ProbeSet.Event.ProbeRemoved, probe);
+    }
+
+    willRemove()
+    {
+        console.assert(!this._probes.length, "ProbeSet.willRemove called, but probes still associated with group: ", this._probes);
+
+        WebInspector.Frame.removeEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceChanged, this);
+        WebInspector.Probe.removeEventListener(WebInspector.Probe.Event.SampleAdded, this._sampleCollected, this);
+        WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._breakpointResolvedStateDidChange, this);
+    }
+
+    // Private
+
+    _mainResourceChanged()
+    {
+        this.dataTable.mainResourceChanged();
+    }
+
+    _createDataTable()
+    {
+        if (this.dataTable)
+            this.dataTable.willRemove();
+
+        this._dataTable = new WebInspector.ProbeSetDataTable(this);
+    }
+
+    _sampleCollected(event)
+    {
+        var sample = event.data;
+        console.assert(sample instanceof WebInspector.ProbeSample, "Tried to add non-sample to probe group: ", sample);
+
+        var probe = event.target;
+        if (!this._probesByIdentifier.has(probe.id))
+            return;
+
+        console.assert(this.dataTable);
+        this.dataTable.addSampleForProbe(probe, sample);
+        this.dispatchEventToListeners(WebInspector.ProbeSet.Event.SampleAdded, {probe, sample});
+    }
+
+    _breakpointResolvedStateDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ProbeSet.Event.ResolvedStateDidChange);
+    }
+};
+
+WebInspector.ProbeSet.Event = {
+    ProbeAdded: "probe-set-probe-added",
+    ProbeRemoved: "probe-set-probe-removed",
+    ResolvedStateDidChange: "probe-set-resolved-state-did-change",
+    SampleAdded: "probe-set-sample-added",
+    SamplesCleared: "probe-set-samples-cleared",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ProbeSetDataFrame.js b/Source/WebInspectorUI/UserInterface/Models/ProbeSetDataFrame.js
new file mode 100644
index 000000000..35c13fe6a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ProbeSetDataFrame.js
@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeSetDataFrame = class ProbeSetDataFrame extends WebInspector.Object
+{
+    constructor(index)
+    {
+        super();
+
+        this._count = 0;
+        this._index = index;
+        this._separator = false;
+    }
+
+    // Static
+
+    static compare(a, b)
+    {
+        console.assert(a instanceof WebInspector.ProbeSetDataFrame, a);
+        console.assert(b instanceof WebInspector.ProbeSetDataFrame, b);
+
+        return a.index - b.index;
+    }
+
+    // Public
+
+    get key()
+    {
+        return String(this._index);
+    }
+
+    get count()
+    {
+        return this._count;
+    }
+
+    get index()
+    {
+        return this._index;
+    }
+
+    get isSeparator()
+    {
+        return this._separator;
+    }
+
+    // The last data frame before a main frame navigation is marked as a "separator" frame.
+    set isSeparator(value)
+    {
+        this._separator = !!value;
+    }
+
+    addSampleForProbe(probe, sample)
+    {
+        this[probe.id] = sample;
+        this._count++;
+    }
+
+    missingKeys(probeSet)
+    {
+        return probeSet.probes.filter(function(probe) {
+            return !this.hasOwnProperty(probe.id);
+        }, this);
+    }
+
+    isComplete(probeSet)
+    {
+        return !this.missingKeys(probeSet).length;
+    }
+
+    fillMissingValues(probeSet)
+    {
+        for (var key of this.missingKeys(probeSet))
+            this[key] = WebInspector.ProbeSetDataFrame.MissingValue;
+    }
+};
+
+WebInspector.ProbeSetDataFrame.MissingValue = "?";
diff --git a/Source/WebInspectorUI/UserInterface/Models/ProbeSetDataTable.js b/Source/WebInspectorUI/UserInterface/Models/ProbeSetDataTable.js
new file mode 100644
index 000000000..4dcee25f8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ProbeSetDataTable.js
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeSetDataTable = class ProbeSetDataTable extends WebInspector.Object
+{
+    constructor(probeSet)
+    {
+        super();
+
+        this._probeSet = probeSet;
+        this._frames = [];
+        this._previousBatchIdentifier = WebInspector.ProbeSetDataTable.SentinelValue;
+    }
+
+    // Public
+
+    get frames()
+    {
+        return this._frames.slice();
+    }
+
+    get separators()
+    {
+        return this._frames.filter(function(frame) { return frame.isSeparator; });
+    }
+
+    willRemove()
+    {
+        this.dispatchEventToListeners(WebInspector.ProbeSetDataTable.Event.WillRemove);
+        this._frames = [];
+        delete this._probeSet;
+    }
+
+    mainResourceChanged()
+    {
+        this.addSeparator();
+    }
+
+    addSampleForProbe(probe, sample)
+    {
+        // Eagerly save the frame if the batch identifier differs, or we know the frame is full.
+        // Create a new frame when the batch identifier differs.
+        if (sample.batchId !== this._previousBatchIdentifier) {
+            if (this._openFrame) {
+                this._openFrame.fillMissingValues(this._probeSet);
+                this.addFrame(this._openFrame);
+            }
+            this._openFrame = this.createFrame();
+            this._previousBatchIdentifier = sample.batchId;
+        }
+
+        console.assert(this._openFrame, "Should always have an open frame before adding sample.", this, probe, sample);
+        this._openFrame.addSampleForProbe(probe, sample);
+        if (this._openFrame.count === this._probeSet.probes.length) {
+            this.addFrame(this._openFrame);
+            this._openFrame = null;
+        }
+    }
+
+    addProbe(probe)
+    {
+        for (var frame of this.frames)
+            if (!frame[probe.id])
+                frame[probe.id] = WebInspector.ProbeSetDataTable.UnknownValue;
+    }
+
+    removeProbe(probe)
+    {
+        for (var frame of this.frames)
+            delete frame[probe.id];
+    }
+
+    // Protected - can be overridden by subclasses.
+
+    createFrame()
+    {
+        return new WebInspector.ProbeSetDataFrame(this._frames.length);
+    }
+
+    addFrame(frame)
+    {
+        this._frames.push(frame);
+        this.dispatchEventToListeners(WebInspector.ProbeSetDataTable.Event.FrameInserted, frame);
+    }
+
+    addSeparator()
+    {
+        // Separators must be associated with a frame.
+        if (!this._frames.length)
+            return;
+
+        var previousFrame = this._frames.lastValue;
+        // Don't send out duplicate events for adjacent separators.
+        if (previousFrame.isSeparator)
+            return;
+
+        previousFrame.isSeparator = true;
+        this.dispatchEventToListeners(WebInspector.ProbeSetDataTable.Event.SeparatorInserted, previousFrame);
+    }
+};
+
+WebInspector.ProbeSetDataTable.Event = {
+    FrameInserted: "probe-set-data-table-frame-inserted",
+    SeparatorInserted: "probe-set-data-table-separator-inserted",
+    WillRemove: "probe-set-data-table-will-remove"
+};
+
+WebInspector.ProbeSetDataTable.SentinelValue = -1;
+WebInspector.ProbeSetDataTable.UnknownValue = "?";
diff --git a/Source/WebInspectorUI/UserInterface/Models/Profile.js b/Source/WebInspectorUI/UserInterface/Models/Profile.js
new file mode 100644
index 000000000..b927c9903
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Profile.js
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Profile = class Profile extends WebInspector.Object
+{
+    constructor(topDownRootNodes)
+    {
+        super();
+
+        topDownRootNodes = topDownRootNodes || [];
+
+        console.assert(topDownRootNodes instanceof Array);
+        console.assert(topDownRootNodes.reduce(function(previousValue, node) { return previousValue && node instanceof WebInspector.ProfileNode; }, true));
+
+        this._topDownRootNodes = topDownRootNodes;
+    }
+
+    // Public
+
+    get topDownRootNodes()
+    {
+        return this._topDownRootNodes;
+    }
+
+    get bottomUpRootNodes()
+    {
+        // FIXME: Implement.
+        return [];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ProfileNode.js b/Source/WebInspectorUI/UserInterface/Models/ProfileNode.js
new file mode 100644
index 000000000..4f1c3d062
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ProfileNode.js
@@ -0,0 +1,274 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileNode = class ProfileNode extends WebInspector.Object
+{
+    constructor(id, type, functionName, sourceCodeLocation, callInfo, calls, childNodes)
+    {
+        super();
+
+        childNodes = childNodes || [];
+
+        console.assert(id);
+        console.assert(!calls || calls instanceof Array);
+        console.assert(!calls || calls.length >= 1);
+        console.assert(!calls || calls.every(function(call) { return call instanceof WebInspector.ProfileNodeCall; }));
+        console.assert(childNodes instanceof Array);
+        console.assert(childNodes.every(function(node) { return node instanceof WebInspector.ProfileNode; }));
+
+        this._id = id;
+        this._type = type || WebInspector.ProfileNode.Type.Function;
+        this._functionName = functionName || null;
+        this._sourceCodeLocation = sourceCodeLocation || null;
+        this._calls = calls || null;
+        this._callInfo = callInfo || null;
+        this._childNodes = childNodes;
+        this._parentNode = null;
+        this._previousSibling = null;
+        this._nextSibling = null;
+        this._computedTotalTimes = false;
+
+        if (this._callInfo) {            
+            this._startTime = this._callInfo.startTime;
+            this._endTime = this._callInfo.endTime;
+            this._totalTime = this._callInfo.totalTime;
+            this._callCount = this._callInfo.callCount;
+        }
+
+        for (var i = 0; i < this._childNodes.length; ++i)
+            this._childNodes[i].establishRelationships(this, this._childNodes[i - 1], this._childNodes[i + 1]);
+
+        if (this._calls) {
+            for (var i = 0; i < this._calls.length; ++i)
+                this._calls[i].establishRelationships(this, this._calls[i - 1], this._calls[i + 1]);
+        }
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get functionName()
+    {
+        return this._functionName;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    get startTime()
+    {
+        if (this._startTime === undefined)
+            this._startTime =  Math.max(0, this._calls[0].startTime);
+        return this._startTime;
+    }
+
+    get endTime()
+    {
+        if (this._endTime === undefined)
+            this._endTime = Math.min(this._calls.lastValue.endTime, Infinity);
+        return this._endTime;
+    }
+
+    get selfTime()
+    {
+        this._computeTotalTimesIfNeeded();
+        return this._selfTime;
+    }
+
+    get totalTime()
+    {
+        this._computeTotalTimesIfNeeded();
+        return this._totalTime;
+    }
+
+    get callInfo()
+    {
+        return this._callInfo;
+    }
+
+    get calls()
+    {
+        return this._calls;
+    }
+
+    get previousSibling()
+    {
+        return this._previousSibling;
+    }
+
+    get nextSibling()
+    {
+        return this._nextSibling;
+    }
+
+    get parentNode()
+    {
+        return this._parentNode;
+    }
+
+    get childNodes()
+    {
+        return this._childNodes;
+    }
+
+    computeCallInfoForTimeRange(rangeStartTime, rangeEndTime)
+    {
+        console.assert(typeof rangeStartTime === "number");
+        console.assert(typeof rangeEndTime === "number");
+
+        // With aggregate call info we can't accurately partition self/total/average time
+        // in partial ranges because we don't know exactly when each call started. So we
+        // always return the entire range.
+        if (this._callInfo) {
+            if (this._selfTime === undefined) {
+                var childNodesTotalTime = 0;
+                for (var childNode of this._childNodes)
+                    childNodesTotalTime += childNode.totalTime;
+                this._selfTime = this._totalTime - childNodesTotalTime;
+            }
+
+            return {
+                callCount: this._callCount,
+                startTime: this._startTime,
+                endTime: this._endTime,
+                selfTime: this._selfTime,
+                totalTime: this._totalTime,
+                averageTime: (this._selfTime / this._callCount),
+            };
+        }
+
+        // COMPATIBILITY (iOS 8): Profiles included per-call information and can be finely partitioned.
+        // Compute that below by iterating over all the calls / children for the time range.
+
+        var recordCallCount = true;
+        var callCount = 0;
+
+        function totalTimeInRange(previousValue, call)
+        {
+            if (rangeStartTime > call.endTime || rangeEndTime < call.startTime)
+                return previousValue;
+
+            if (recordCallCount)
+                ++callCount;
+
+            return previousValue + Math.min(call.endTime, rangeEndTime) - Math.max(rangeStartTime, call.startTime);
+        }
+
+        var startTime = Math.max(rangeStartTime, this._calls[0].startTime);
+        var endTime = Math.min(this._calls.lastValue.endTime, rangeEndTime);
+        var totalTime = this._calls.reduce(totalTimeInRange, 0);
+
+        recordCallCount = false;
+
+        var childNodesTotalTime = 0;
+        for (var childNode of this._childNodes)
+            childNodesTotalTime += childNode.calls.reduce(totalTimeInRange, 0);
+
+        var selfTime = totalTime - childNodesTotalTime;
+        var averageTime = selfTime / callCount;
+
+        return {startTime, endTime, totalTime, selfTime, callCount, averageTime};
+    }
+
+    traverseNextProfileNode(stayWithin)
+    {
+        var profileNode = this._childNodes[0];
+        if (profileNode)
+            return profileNode;
+
+        if (this === stayWithin)
+            return null;
+
+        profileNode = this._nextSibling;
+        if (profileNode)
+            return profileNode;
+
+        profileNode = this;
+        while (profileNode && !profileNode.nextSibling && profileNode.parentNode !== stayWithin)
+            profileNode = profileNode.parentNode;
+
+        if (!profileNode)
+            return null;
+
+        return profileNode.nextSibling;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.ProfileNode.TypeCookieKey] = this._type || null;
+        cookie[WebInspector.ProfileNode.FunctionNameCookieKey] = this._functionName || null;
+        cookie[WebInspector.ProfileNode.SourceCodeURLCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url ? this._sourceCodeLocation.sourceCode.url.hash : null : null;
+        cookie[WebInspector.ProfileNode.SourceCodeLocationLineCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.lineNumber : null;
+        cookie[WebInspector.ProfileNode.SourceCodeLocationColumnCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.columnNumber : null;
+    }
+
+    // Protected
+
+    establishRelationships(parentNode, previousSibling, nextSibling)
+    {
+        this._parentNode = parentNode || null;
+        this._previousSibling = previousSibling || null;
+        this._nextSibling = nextSibling || null;
+    }
+
+    // Private
+
+    _computeTotalTimesIfNeeded()
+    {
+        if (this._computedTotalTimes)
+            return;
+
+        this._computedTotalTimes = true;
+
+        var info = this.computeCallInfoForTimeRange(0, Infinity);
+        this._startTime = info.startTime;
+        this._endTime = info.endTime;
+        this._selfTime = info.selfTime;
+        this._totalTime = info.totalTime;
+    }
+};
+
+WebInspector.ProfileNode.Type = {
+    Function: "profile-node-type-function",
+    Program: "profile-node-type-program"
+};
+
+WebInspector.ProfileNode.TypeIdentifier = "profile-node";
+WebInspector.ProfileNode.TypeCookieKey = "profile-node-type";
+WebInspector.ProfileNode.FunctionNameCookieKey = "profile-node-function-name";
+WebInspector.ProfileNode.SourceCodeURLCookieKey = "profile-node-source-code-url";
+WebInspector.ProfileNode.SourceCodeLocationLineCookieKey = "profile-node-source-code-location-line";
+WebInspector.ProfileNode.SourceCodeLocationColumnCookieKey = "profile-node-source-code-location-column";
diff --git a/Source/WebInspectorUI/UserInterface/Models/ProfileNodeCall.js b/Source/WebInspectorUI/UserInterface/Models/ProfileNodeCall.js
new file mode 100644
index 000000000..7f74c6598
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ProfileNodeCall.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileNodeCall = class ProfileNodeCall extends WebInspector.Object
+{
+    constructor(startTime, totalTime)
+    {
+        super();
+
+        console.assert(startTime);
+
+        this._startTime = startTime;
+        this._totalTime = totalTime || 0;
+        this._parentNode = null;
+        this._previousSibling = null;
+        this._nextSibling = null;
+    }
+
+    // Public
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    get totalTime()
+    {
+        return this._totalTime;
+    }
+
+    get endTime()
+    {
+        return this._startTime + this._totalTime;
+    }
+
+    // Protected
+
+    establishRelationships(parentNode, previousSibling, nextSibling)
+    {
+        this._parentNode = parentNode || null;
+        this._previousSibling = previousSibling || null;
+        this._nextSibling = nextSibling || null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/PropertyDescriptor.js b/Source/WebInspectorUI/UserInterface/Models/PropertyDescriptor.js
new file mode 100644
index 000000000..cb69ce82f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/PropertyDescriptor.js
@@ -0,0 +1,166 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.PropertyDescriptor = class PropertyDescriptor extends WebInspector.Object
+{
+    constructor(descriptor, symbol, isOwnProperty, wasThrown, nativeGetter, isInternalProperty)
+    {
+        super();
+
+        console.assert(descriptor);
+        console.assert(descriptor.name);
+        console.assert(!descriptor.value || descriptor.value instanceof WebInspector.RemoteObject);
+        console.assert(!descriptor.get || descriptor.get instanceof WebInspector.RemoteObject);
+        console.assert(!descriptor.set || descriptor.set instanceof WebInspector.RemoteObject);
+        console.assert(!symbol || symbol instanceof WebInspector.RemoteObject);
+
+        this._name = descriptor.name;
+        this._value = descriptor.value;
+        this._hasValue = "value" in descriptor;
+        this._get = descriptor.get;
+        this._set = descriptor.set;
+        this._symbol = symbol;
+
+        this._writable = descriptor.writable || false;
+        this._configurable = descriptor.configurable || false;
+        this._enumerable = descriptor.enumerable || false;
+
+        this._own = isOwnProperty || false;
+        this._wasThrown = wasThrown || false;
+        this._nativeGetterValue = nativeGetter || false;
+        this._internal = isInternalProperty || false;
+    }
+
+    // Static
+
+    // Runtime.PropertyDescriptor or Runtime.InternalPropertyDescriptor (second argument).
+    static fromPayload(payload, internal)
+    {
+        if (payload.value)
+            payload.value = WebInspector.RemoteObject.fromPayload(payload.value);
+        if (payload.get)
+            payload.get = WebInspector.RemoteObject.fromPayload(payload.get);
+        if (payload.set)
+            payload.set = WebInspector.RemoteObject.fromPayload(payload.set);
+
+        if (payload.symbol)
+            payload.symbol = WebInspector.RemoteObject.fromPayload(payload.symbol);
+
+        if (internal) {
+            console.assert(payload.value);
+            payload.writable = payload.configurable = payload.enumerable = false;
+            payload.isOwn = true;
+        }
+
+        return new WebInspector.PropertyDescriptor(payload, payload.symbol, payload.isOwn, payload.wasThrown, payload.nativeGetter, internal);
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    get get()
+    {
+        return this._get;
+    }
+
+    get set()
+    {
+        return this._set;
+    }
+
+    get writable()
+    {
+        return this._writable;
+    }
+
+    get configurable()
+    {
+        return this._configurable;
+    }
+
+    get enumerable()
+    {
+        return this._enumerable;
+    }
+
+    get symbol()
+    {
+        return this._symbol;
+    }
+
+    get isOwnProperty()
+    {
+        return this._own;
+    }
+
+    get wasThrown()
+    {
+        return this._wasThrown;
+    }
+
+    get nativeGetter()
+    {
+        return this._nativeGetterValue;
+    }
+
+    get isInternalProperty()
+    {
+        return this._internal;
+    }
+
+    hasValue()
+    {
+        return this._hasValue;
+    }
+
+    hasGetter()
+    {
+        return this._get && this._get.type === "function";
+    }
+
+    hasSetter()
+    {
+        return this._set && this._set.type === "function";
+    }
+
+    isIndexProperty()
+    {
+        return !isNaN(Number(this._name));
+    }
+
+    isSymbolProperty()
+    {
+        return !!this._symbol;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/PropertyPath.js b/Source/WebInspectorUI/UserInterface/Models/PropertyPath.js
new file mode 100644
index 000000000..f9ddaae53
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/PropertyPath.js
@@ -0,0 +1,283 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.PropertyPath = class PropertyPath extends WebInspector.Object
+{
+    constructor(object, pathComponent, parent, isPrototype)
+    {
+        super();
+
+        console.assert(object instanceof WebInspector.RemoteObject || object === null);
+        console.assert(!pathComponent || typeof pathComponent === "string");
+        console.assert(!parent || parent instanceof WebInspector.PropertyPath);
+        console.assert(!parent || pathComponent.length);
+
+        // We allow property pathes with null objects as end-caps only.
+        // Disallow appending to a PropertyPath with null objects.
+        if (parent && !parent.object)
+            throw new Error("Attempted to append to a PropertyPath with null object.");
+
+        this._object = object;
+        this._pathComponent = typeof pathComponent === "string" ? pathComponent : null;
+        this._parent = parent || null;
+        this._isPrototype = isPrototype || false;
+    }
+
+    // Static
+
+    static emptyPropertyPathForScope(object)
+    {
+        return new WebInspector.PropertyPath(object, WebInspector.PropertyPath.SpecialPathComponent.EmptyPathComponentForScope);
+    }
+
+    // Public
+
+    get object()
+    {
+        return this._object;
+    }
+
+    get parent()
+    {
+        return this._parent;
+    }
+
+    get isPrototype()
+    {
+        return this._isPrototype;
+    }
+
+    get rootObject()
+    {
+        return this._parent ? this._parent.rootObject : this._object;
+    }
+
+    get lastNonPrototypeObject()
+    {
+        if (!this._parent)
+            return this._object;
+
+        var p = this._parent;
+        while (p) {
+            if (!p.isPrototype)
+                break;
+            if (!p.parent)
+                break;
+            p = p.parent;
+        }
+
+        return p.object;
+    }
+
+    get pathComponent()
+    {
+        return this._pathComponent;
+    }
+
+    get fullPath()
+    {
+        var components = [];
+        for (var p = this; p && p.pathComponent; p = p.parent)
+            components.push(p.pathComponent);
+        components.reverse();
+        return components.join("");
+    }
+
+    get reducedPath()
+    {
+        // The display path for a value should not include __proto__.
+        // The path for "foo.__proto__.bar.__proto__.x" is better shown as "foo.bar.x".
+        // FIXME: We should keep __proto__ if this property was overridden.
+        var components = [];
+
+        var p = this;
+
+        // Include trailing __proto__s.
+        for (; p && p.isPrototype; p = p.parent)
+            components.push(p.pathComponent);
+
+        // Skip other __proto__s.
+        for (; p && p.pathComponent; p = p.parent) {
+            if (p.isPrototype)
+                continue;
+            components.push(p.pathComponent);
+        }
+
+        components.reverse();
+        return components.join("");
+    }
+
+    displayPath(type)
+    {
+        return type === WebInspector.PropertyPath.Type.Value ? this.reducedPath : this.fullPath;
+    }
+
+    isRoot()
+    {
+        return !this._parent;
+    }
+
+    isScope()
+    {
+        return this._pathComponent === WebInspector.PropertyPath.SpecialPathComponent.EmptyPathComponentForScope;
+    }
+
+    isPathComponentImpossible()
+    {
+        return this._pathComponent && this._pathComponent.startsWith("@");
+    }
+
+    isFullPathImpossible()
+    {
+        if (this.isPathComponentImpossible())
+            return true;
+
+        if (this._parent)
+            return this._parent.isFullPathImpossible();
+
+        return false;
+    }
+
+    appendPropertyName(object, propertyName)
+    {
+        var isPrototype = propertyName === "__proto__";
+
+        if (this.isScope())
+            return new WebInspector.PropertyPath(object, propertyName, this, isPrototype);
+
+        var component = this._canPropertyNameBeDotAccess(propertyName) ? "." + propertyName : "[" + doubleQuotedString(propertyName) + "]";
+        return new WebInspector.PropertyPath(object, component, this, isPrototype);
+    }
+
+    appendPropertySymbol(object, symbolName)
+    {
+        var component = WebInspector.PropertyPath.SpecialPathComponent.SymbolPropertyName + (symbolName.length ? "(" + symbolName + ")" : "");
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendInternalPropertyName(object, propertyName)
+    {
+        var component = WebInspector.PropertyPath.SpecialPathComponent.InternalPropertyName + "[" + propertyName + "]";
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendGetterPropertyName(object, propertyName)
+    {
+        var component = ".__lookupGetter__(" + doubleQuotedString(propertyName) + ")";
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendSetterPropertyName(object, propertyName)
+    {
+        var component = ".__lookupSetter__(" + doubleQuotedString(propertyName) + ")";
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendArrayIndex(object, indexString)
+    {
+        var component = "[" + indexString + "]";
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendMapKey(object)
+    {
+        var component = WebInspector.PropertyPath.SpecialPathComponent.MapKey;
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendMapValue(object, keyObject)
+    {
+        console.assert(!keyObject || keyObject instanceof WebInspector.RemoteObject);
+
+        if (keyObject && keyObject.hasValue()) {
+            if (keyObject.type === "string") {
+                var component = ".get(" + doubleQuotedString(keyObject.description) + ")";
+                return new WebInspector.PropertyPath(object, component, this);
+            }
+
+            var component = ".get(" + keyObject.description + ")";
+            return new WebInspector.PropertyPath(object, component, this);
+        }
+
+        var component = WebInspector.PropertyPath.SpecialPathComponent.MapValue;
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendSetIndex(object)
+    {
+        var component = WebInspector.PropertyPath.SpecialPathComponent.SetIndex;
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendSymbolProperty(object)
+    {
+        var component = WebInspector.PropertyPath.SpecialPathComponent.SymbolPropertyName;
+        return new WebInspector.PropertyPath(object, component, this);
+    }
+
+    appendPropertyDescriptor(object, descriptor, type)
+    {
+        console.assert(descriptor instanceof WebInspector.PropertyDescriptor);
+
+        if (descriptor.isInternalProperty)
+            return this.appendInternalPropertyName(object, descriptor.name);
+        if (descriptor.symbol)
+            return this.appendSymbolProperty(object);
+
+        if (type === WebInspector.PropertyPath.Type.Getter)
+            return this.appendGetterPropertyName(object, descriptor.name);
+        if (type === WebInspector.PropertyPath.Type.Setter)
+            return this.appendSetterPropertyName(object, descriptor.name);
+
+        console.assert(type === WebInspector.PropertyPath.Type.Value);
+
+        if (this._object.subtype === "array" && !isNaN(parseInt(descriptor.name)))
+            return this.appendArrayIndex(object, descriptor.name);
+
+        return this.appendPropertyName(object, descriptor.name);
+    }
+
+    // Private
+
+    _canPropertyNameBeDotAccess(propertyName)
+    {
+        return /^(?![0-9])\w+$/.test(propertyName);
+    }
+};
+
+WebInspector.PropertyPath.SpecialPathComponent = {
+    InternalPropertyName: "@internal",
+    SymbolPropertyName: "@symbol",
+    MapKey: "@mapkey",
+    MapValue: "@mapvalue",
+    SetIndex: "@setindex",
+    EmptyPathComponentForScope: "",
+};
+
+WebInspector.PropertyPath.Type = {
+    Value: "value",
+    Getter: "getter",
+    Setter: "setter",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/PropertyPreview.js b/Source/WebInspectorUI/UserInterface/Models/PropertyPreview.js
new file mode 100644
index 000000000..29bffa7e0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/PropertyPreview.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.PropertyPreview = class PropertyPreview extends WebInspector.Object
+{
+    constructor(name, type, subtype, value, valuePreview, isInternalProperty)
+    {
+        super();
+
+        console.assert(name);
+        console.assert(type);
+        console.assert(!value || typeof value === "string");
+        console.assert(!valuePreview || valuePreview instanceof WebInspector.ObjectPreview);
+
+        this._name = name;
+        this._type = type;
+        this._subtype = subtype;
+        this._value = value;
+        this._valuePreview = valuePreview;
+        this._internal = isInternalProperty;
+    }
+
+    // Static
+
+    // Runtime.PropertyPreview.
+    static fromPayload(payload)
+    {
+        if (payload.valuePreview)
+            payload.valuePreview = WebInspector.ObjectPreview.fromPayload(payload.valuePreview);
+
+        return new WebInspector.PropertyPreview(payload.name, payload.type, payload.subtype, payload.value, payload.valuePreview, payload.internal);
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get subtype()
+    {
+        return this._subtype;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    get valuePreview()
+    {
+        return this._valuePreview;
+    }
+
+    get internal()
+    {
+        return this._internal;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js
new file mode 100644
index 000000000..efa67687a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/RenderingFrameTimelineRecord.js
@@ -0,0 +1,148 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RenderingFrameTimelineRecord = class RenderingFrameTimelineRecord extends WebInspector.TimelineRecord
+{
+    constructor(startTime, endTime)
+    {
+        super(WebInspector.TimelineRecord.Type.RenderingFrame, startTime, endTime);
+
+        this._durationByTaskType = new Map;
+        this._frameIndex = -1;
+    }
+
+    // Static
+
+    static resetFrameIndex()
+    {
+        WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
+    }
+
+    static displayNameForTaskType(taskType)
+    {
+        switch(taskType) {
+        case WebInspector.RenderingFrameTimelineRecord.TaskType.Script:
+            return WebInspector.UIString("Script");
+        case WebInspector.RenderingFrameTimelineRecord.TaskType.Layout:
+            return WebInspector.UIString("Layout");
+        case WebInspector.RenderingFrameTimelineRecord.TaskType.Paint:
+            return WebInspector.UIString("Paint");
+        case WebInspector.RenderingFrameTimelineRecord.TaskType.Other:
+            return WebInspector.UIString("Other");
+        }
+    }
+
+    static taskTypeForTimelineRecord(record)
+    {
+        switch(record.type) {
+        case WebInspector.TimelineRecord.Type.Script:
+            return WebInspector.RenderingFrameTimelineRecord.TaskType.Script;
+        case WebInspector.TimelineRecord.Type.Layout:
+            if (record.eventType  === WebInspector.LayoutTimelineRecord.EventType.Paint || record.eventType === WebInspector.LayoutTimelineRecord.EventType.Composite)
+                return WebInspector.RenderingFrameTimelineRecord.TaskType.Paint;
+            return WebInspector.RenderingFrameTimelineRecord.TaskType.Layout;
+        default:
+            console.error("Unsupported timeline record type: " + record.type);
+            return null;
+        }
+    }
+
+    // Public
+
+    get frameIndex()
+    {
+        return this._frameIndex;
+    }
+
+    get frameNumber()
+    {
+        return this._frameIndex + 1;
+    }
+
+    setupFrameIndex()
+    {
+        console.assert(this._frameIndex === -1, "Frame index should only be set once.");
+        if (this._frameIndex >= 0)
+            return;
+        this._frameIndex = WebInspector.RenderingFrameTimelineRecord._nextFrameIndex++;
+    }
+
+    durationForTask(taskType)
+    {
+        if (this._durationByTaskType.has(taskType))
+            return this._durationByTaskType.get(taskType);
+
+        var duration;
+        if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Other)
+            duration = this._calculateDurationRemainder();
+        else {
+            duration = this.children.reduce(function(previousValue, currentValue) {
+                if (taskType !== WebInspector.RenderingFrameTimelineRecord.taskTypeForTimelineRecord(currentValue))
+                    return previousValue;
+
+                var currentDuration = currentValue.duration;
+                if (currentValue.usesActiveStartTime)
+                    currentDuration -= currentValue.inactiveDuration;
+                return previousValue + currentDuration;
+            }, 0);
+
+            if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Script) {
+                // Layout events synchronously triggered from JavaScript must be subtracted from the total
+                // script time, to prevent the time from being counted twice.
+                duration -= this.children.reduce(function(previousValue, currentValue) {
+                    if (currentValue.type === WebInspector.TimelineRecord.Type.Layout && (currentValue.sourceCodeLocation || currentValue.callFrames))
+                        return previousValue + currentValue.duration;
+                    return previousValue;
+                }, 0);
+            }
+        }
+
+        this._durationByTaskType.set(taskType, duration);
+        return duration;
+    }
+
+    // Private
+
+    _calculateDurationRemainder()
+    {
+        return Object.keys(WebInspector.RenderingFrameTimelineRecord.TaskType).reduce(function(previousValue, key) {
+            var taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+            if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Other)
+                return previousValue;
+            return previousValue - this.durationForTask(taskType);
+        }.bind(this), this.duration);
+    }
+};
+
+WebInspector.RenderingFrameTimelineRecord.TaskType = {
+    Script: "rendering-frame-timeline-record-script",
+    Layout: "rendering-frame-timeline-record-layout",
+    Paint: "rendering-frame-timeline-record-paint",
+    Other: "rendering-frame-timeline-record-other"
+};
+
+WebInspector.RenderingFrameTimelineRecord.TypeIdentifier = "rendering-frame-timeline-record";
+
+WebInspector.RenderingFrameTimelineRecord._nextFrameIndex = 0;
diff --git a/Source/WebInspectorUI/UserInterface/Models/ReplayDashboard.js b/Source/WebInspectorUI/UserInterface/Models/ReplayDashboard.js
new file mode 100644
index 000000000..64629df32
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ReplayDashboard.js
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ReplayDashboard = class ReplayDashboard extends WebInspector.Object
+{
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ReplaySession.js b/Source/WebInspectorUI/UserInterface/Models/ReplaySession.js
new file mode 100644
index 000000000..e1966cd88
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ReplaySession.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+
+WebInspector.ReplaySession = class ReplaySession extends WebInspector.Object
+{
+    constructor(identifier)
+    {
+        super();
+
+        this.identifier = identifier;
+        this._segments = [];
+        this._timestamp = null;
+    }
+
+    // Static
+
+    static fromPayload(identifier, payload)
+    {
+        var session = new WebInspector.ReplaySession(identifier);
+        session._updateFromPayload(payload);
+        return session;
+    }
+
+    // Public
+
+    get segments()
+    {
+        return this._segments.slice();
+    }
+
+    segmentsChanged()
+    {
+        // The replay manager won't update the session's list of segments nor create a new session.
+        ReplayAgent.getSessionData(this.identifier)
+            .then(this._updateFromPayload.bind(this));
+    }
+
+    // Private
+
+    _updateFromPayload(payload)
+    {
+        var session = payload.session;
+        console.assert(session.id === this.identifier);
+
+        var segmentIds = session.segments;
+        var oldSegments = this._segments;
+        var pendingSegments = [];
+        for (var segmentId of segmentIds)
+            pendingSegments.push(WebInspector.replayManager.getSegment(segmentId));
+
+        var session = this;
+        Promise.all(pendingSegments).then(
+            function(segmentsArray) {
+                session._segments = segmentsArray;
+                session.dispatchEventToListeners(WebInspector.ReplaySession.Event.SegmentsChanged, {oldSegments});
+            },
+            function(error) {
+                console.error("Problem resolving segments: ", error);
+            }
+        );
+    }
+};
+
+WebInspector.ReplaySession.Event = {
+    SegmentsChanged: "replay-session-segments-changed",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ReplaySessionSegment.js b/Source/WebInspectorUI/UserInterface/Models/ReplaySessionSegment.js
new file mode 100644
index 000000000..569020eda
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ReplaySessionSegment.js
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+
+WebInspector.IncompleteSessionSegment = class IncompleteSessionSegment extends WebInspector.Object
+{
+    constructor(identifier)
+    {
+        super();
+
+        this.identifier = identifier;
+        this._timestamp = Date.now();
+    }
+
+    // Public
+
+    get isComplete()
+    {
+        return false;
+    }
+};
+
+WebInspector.ReplaySessionSegment = class ReplaySessionSegment extends WebInspector.Object
+{
+    constructor(identifier, payload)
+    {
+        super();
+
+        var segment = payload.segment;
+        console.assert(identifier === segment.id);
+
+        this.identifier = identifier;
+        this._timestamp = segment.timestamp;
+
+        this._queues = segment.queues;
+    }
+
+    // Public
+
+    get isComplete()
+    {
+        return true;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Resource.js b/Source/WebInspectorUI/UserInterface/Models/Resource.js
new file mode 100644
index 000000000..56d848e07
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Resource.js
@@ -0,0 +1,753 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Resource = class Resource extends WebInspector.SourceCode
+{
+    constructor(url, mimeType, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, requestSentTimestamp, initiatorSourceCodeLocation, originalRequestWillBeSentTimestamp)
+    {
+        super();
+
+        console.assert(url);
+
+        if (type in WebInspector.Resource.Type)
+            type = WebInspector.Resource.Type[type];
+
+        this._url = url;
+        this._urlComponents = null;
+        this._mimeType = mimeType;
+        this._mimeTypeComponents = null;
+        this._type = type || WebInspector.Resource.typeFromMIMEType(mimeType);
+        this._loaderIdentifier = loaderIdentifier || null;
+        this._requestIdentifier = requestIdentifier || null;
+        this._requestMethod = requestMethod || null;
+        this._requestData = requestData || null;
+        this._requestHeaders = requestHeaders || {};
+        this._responseHeaders = {};
+        this._parentFrame = null;
+        this._initiatorSourceCodeLocation = initiatorSourceCodeLocation || null;
+        this._initiatedResources = [];
+        this._originalRequestWillBeSentTimestamp = originalRequestWillBeSentTimestamp || null;
+        this._requestSentTimestamp = requestSentTimestamp || NaN;
+        this._responseReceivedTimestamp = NaN;
+        this._lastRedirectReceivedTimestamp = NaN;
+        this._lastDataReceivedTimestamp = NaN;
+        this._finishedOrFailedTimestamp = NaN;
+        this._finishThenRequestContentPromise = null;
+        this._size = NaN;
+        this._transferSize = NaN;
+        this._cached = false;
+
+        if (this._initiatorSourceCodeLocation && this._initiatorSourceCodeLocation.sourceCode instanceof WebInspector.Resource)
+            this._initiatorSourceCodeLocation.sourceCode.addInitiatedResource(this);
+    }
+
+    // Static
+
+    static typeFromMIMEType(mimeType)
+    {
+        if (!mimeType)
+            return WebInspector.Resource.Type.Other;
+
+        mimeType = parseMIMEType(mimeType).type;
+
+        if (mimeType in WebInspector.Resource._mimeTypeMap)
+            return WebInspector.Resource._mimeTypeMap[mimeType];
+
+        if (mimeType.startsWith("image/"))
+            return WebInspector.Resource.Type.Image;
+
+        if (mimeType.startsWith("font/"))
+            return WebInspector.Resource.Type.Font;
+
+        return WebInspector.Resource.Type.Other;
+    }
+
+    static displayNameForType(type, plural)
+    {
+        switch(type) {
+        case WebInspector.Resource.Type.Document:
+            if (plural)
+                return WebInspector.UIString("Documents");
+            return WebInspector.UIString("Document");
+        case WebInspector.Resource.Type.Stylesheet:
+            if (plural)
+                return WebInspector.UIString("Stylesheets");
+            return WebInspector.UIString("Stylesheet");
+        case WebInspector.Resource.Type.Image:
+            if (plural)
+                return WebInspector.UIString("Images");
+            return WebInspector.UIString("Image");
+        case WebInspector.Resource.Type.Font:
+            if (plural)
+                return WebInspector.UIString("Fonts");
+            return WebInspector.UIString("Font");
+        case WebInspector.Resource.Type.Script:
+            if (plural)
+                return WebInspector.UIString("Scripts");
+            return WebInspector.UIString("Script");
+        case WebInspector.Resource.Type.XHR:
+            if (plural)
+                return WebInspector.UIString("XHRs");
+            return WebInspector.UIString("XHR");
+        case WebInspector.Resource.Type.WebSocket:
+            if (plural)
+                return WebInspector.UIString("Sockets");
+            return WebInspector.UIString("Socket");
+        case WebInspector.Resource.Type.Other:
+            return WebInspector.UIString("Other");
+        default:
+            console.error("Unknown resource type: ", type);
+            return null;
+        }
+    }
+
+    // Public
+
+    get url()
+    {
+        return this._url;
+    }
+
+    get urlComponents()
+    {
+        if (!this._urlComponents)
+            this._urlComponents = parseURL(this._url);
+        return this._urlComponents;
+    }
+
+    get displayName()
+    {
+        return WebInspector.displayNameForURL(this._url, this.urlComponents);
+    }
+
+    get displayURL()
+    {
+        const isMultiLine = true;
+        const dataURIMaxSize = 64;
+        return WebInspector.truncateURL(this._url, isMultiLine, dataURIMaxSize);
+    }
+
+    get initiatorSourceCodeLocation()
+    {
+        return this._initiatorSourceCodeLocation;
+    }
+
+    get initiatedResources()
+    {
+        return this._initiatedResources;
+    }
+
+    get originalRequestWillBeSentTimestamp()
+    {
+        return this._originalRequestWillBeSentTimestamp;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get mimeType()
+    {
+        return this._mimeType;
+    }
+
+    get mimeTypeComponents()
+    {
+        if (!this._mimeTypeComponents)
+            this._mimeTypeComponents = parseMIMEType(this._mimeType);
+        return this._mimeTypeComponents;
+    }
+
+    get syntheticMIMEType()
+    {
+        // Resources are often transferred with a MIME-type that doesn't match the purpose the
+        // resource was loaded for, which is what WebInspector.Resource.Type represents.
+        // This getter generates a MIME-type, if needed, that matches the resource type.
+
+        // If the type matches the Resource.Type of the MIME-type, then return the actual MIME-type.
+        if (this._type === WebInspector.Resource.typeFromMIMEType(this._mimeType))
+            return this._mimeType;
+
+        // Return the default MIME-types for the Resource.Type, since the current MIME-type
+        // does not match what is expected for the Resource.Type.
+        switch (this._type) {
+        case WebInspector.Resource.Type.Document:
+            return "text/html";
+        case WebInspector.Resource.Type.Stylesheet:
+            return "text/css";
+        case WebInspector.Resource.Type.Script:
+            return "text/javascript";
+        }
+
+        // Return the actual MIME-type since we don't have a better synthesized one to return.
+        return this._mimeType;
+    }
+
+    createObjectURL()
+    {
+        // If content is not available, fallback to using original URL.
+        // The client may try to revoke it, but nothing will happen.
+        if (!this.content)
+            return this._url;
+
+        var content = this.content;
+        console.assert(content instanceof Blob, content);
+
+        return URL.createObjectURL(content);
+    }
+
+    isMainResource()
+    {
+        return this._parentFrame ? this._parentFrame.mainResource === this : false;
+    }
+
+    addInitiatedResource(resource)
+    {
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        this._initiatedResources.push(resource);
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.InitiatedResourcesDidChange);
+    }
+
+    get parentFrame()
+    {
+        return this._parentFrame;
+    }
+
+    get loaderIdentifier()
+    {
+        return this._loaderIdentifier;
+    }
+
+    get requestIdentifier()
+    {
+        return this._requestIdentifier;
+    }
+
+    get finished()
+    {
+        return this._finished;
+    }
+
+    get failed()
+    {
+        return this._failed;
+    }
+
+    get canceled()
+    {
+        return this._canceled;
+    }
+
+    get requestMethod()
+    {
+        return this._requestMethod;
+    }
+
+    get requestData()
+    {
+        return this._requestData;
+    }
+
+    get requestDataContentType()
+    {
+        return this._requestHeaders.valueForCaseInsensitiveKey("Content-Type") || null;
+    }
+
+    get requestHeaders()
+    {
+        return this._requestHeaders;
+    }
+
+    get responseHeaders()
+    {
+        return this._responseHeaders;
+    }
+
+    get requestSentTimestamp()
+    {
+        return this._requestSentTimestamp;
+    }
+
+    get lastRedirectReceivedTimestamp()
+    {
+        return this._lastRedirectReceivedTimestamp;
+    }
+
+    get responseReceivedTimestamp()
+    {
+        return this._responseReceivedTimestamp;
+    }
+
+    get lastDataReceivedTimestamp()
+    {
+        return this._lastDataReceivedTimestamp;
+    }
+
+    get finishedOrFailedTimestamp()
+    {
+        return this._finishedOrFailedTimestamp;
+    }
+
+    get firstTimestamp()
+    {
+        return this.requestSentTimestamp || this.lastRedirectReceivedTimestamp || this.responseReceivedTimestamp || this.lastDataReceivedTimestamp || this.finishedOrFailedTimestamp;
+    }
+
+    get lastTimestamp()
+    {
+        return this.finishedOrFailedTimestamp || this.lastDataReceivedTimestamp || this.responseReceivedTimestamp || this.lastRedirectReceivedTimestamp || this.requestSentTimestamp;
+    }
+
+    get duration()
+    {
+        return this._finishedOrFailedTimestamp - this._requestSentTimestamp;
+    }
+
+    get latency()
+    {
+        return this._responseReceivedTimestamp - this._requestSentTimestamp;
+    }
+
+    get receiveDuration()
+    {
+        return this._finishedOrFailedTimestamp - this._responseReceivedTimestamp;
+    }
+
+    get cached()
+    {
+        return this._cached;
+    }
+
+    get statusCode()
+    {
+        return this._statusCode;
+    }
+
+    get statusText()
+    {
+        return this._statusText;
+    }
+
+    get size()
+    {
+        return this._size;
+    }
+
+    get encodedSize()
+    {
+        if (!isNaN(this._transferSize))
+            return this._transferSize;
+
+        // If we did not receive actual transfer size from network
+        // stack, we prefer using Content-Length over resourceSize as
+        // resourceSize may differ from actual transfer size if platform's
+        // network stack performed decoding (e.g. gzip decompression).
+        // The Content-Length, though, is expected to come from raw
+        // response headers and will reflect actual transfer length.
+        // This won't work for chunked content encoding, so fall back to
+        // resourceSize when we don't have Content-Length. This still won't
+        // work for chunks with non-trivial encodings. We need a way to
+        // get actual transfer size from the network stack.
+
+        return Number(this._responseHeaders.valueForCaseInsensitiveKey("Content-Length") || this._size);
+    }
+
+    get transferSize()
+    {
+        if (this.statusCode === 304) // Not modified
+            return this._responseHeadersSize;
+
+        if (this._cached)
+            return 0;
+
+        return this._responseHeadersSize + this.encodedSize;
+    }
+
+    get compressed()
+    {
+        var contentEncoding = this._responseHeaders.valueForCaseInsensitiveKey("Content-Encoding");
+        return contentEncoding && /\b(?:gzip|deflate)\b/.test(contentEncoding);
+    }
+
+    get scripts()
+    {
+        return this._scripts || [];
+    }
+
+    scriptForLocation(sourceCodeLocation)
+    {
+        console.assert(!(this instanceof WebInspector.SourceMapResource));
+        console.assert(sourceCodeLocation.sourceCode === this, "SourceCodeLocation must be in this Resource");
+        if (sourceCodeLocation.sourceCode !== this)
+            return null;
+
+        var lineNumber = sourceCodeLocation.lineNumber;
+        var columnNumber = sourceCodeLocation.columnNumber;
+        for (var i = 0; i < this._scripts.length; ++i) {
+            var script = this._scripts[i];
+            if (script.range.startLine <= lineNumber && script.range.endLine >= lineNumber) {
+                if (script.range.startLine === lineNumber && columnNumber < script.range.startColumn)
+                    continue;
+                if (script.range.endLine === lineNumber && columnNumber > script.range.endColumn)
+                    continue;
+                return script;
+            }
+        }
+
+        return null;
+    }
+
+    updateForRedirectResponse(url, requestHeaders, elapsedTime)
+    {
+        console.assert(!this._finished);
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+
+        var oldURL = this._url;
+
+        this._url = url;
+        this._requestHeaders = requestHeaders || {};
+        this._lastRedirectReceivedTimestamp = elapsedTime || NaN;
+
+        if (oldURL !== url) {
+            // Delete the URL components so the URL is re-parsed the next time it is requested.
+            this._urlComponents = null;
+
+            this.dispatchEventToListeners(WebInspector.Resource.Event.URLDidChange, {oldURL});
+        }
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.RequestHeadersDidChange);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+    }
+
+    updateForResponse(url, mimeType, type, responseHeaders, statusCode, statusText, elapsedTime)
+    {
+        console.assert(!this._finished);
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+
+        var oldURL = this._url;
+        var oldMIMEType = this._mimeType;
+        var oldType = this._type;
+
+        if (type in WebInspector.Resource.Type)
+            type = WebInspector.Resource.Type[type];
+
+        this._url = url;
+        this._mimeType = mimeType;
+        this._type = type || WebInspector.Resource.typeFromMIMEType(mimeType);
+        this._statusCode = statusCode;
+        this._statusText = statusText;
+        this._responseHeaders = responseHeaders || {};
+        this._responseReceivedTimestamp = elapsedTime || NaN;
+
+        this._responseHeadersSize = String(this._statusCode).length + this._statusText.length + 12; // Extra length is for "HTTP/1.1 ", " ", and "\r\n".
+        for (var name in this._responseHeaders)
+            this._responseHeadersSize += name.length + this._responseHeaders[name].length + 4; // Extra length is for ": ", and "\r\n".
+
+        if (statusCode === 304 && !this._cached)
+            this.markAsCached();
+
+        if (oldURL !== url) {
+            // Delete the URL components so the URL is re-parsed the next time it is requested.
+            this._urlComponents = null;
+
+            this.dispatchEventToListeners(WebInspector.Resource.Event.URLDidChange, {oldURL});
+        }
+
+        if (oldMIMEType !== mimeType) {
+            // Delete the MIME-type components so the MIME-type is re-parsed the next time it is requested.
+            this._mimeTypeComponents = null;
+
+            this.dispatchEventToListeners(WebInspector.Resource.Event.MIMETypeDidChange, {oldMIMEType});
+        }
+
+        if (oldType !== type)
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType});
+
+        console.assert(isNaN(this._size));
+        console.assert(isNaN(this._transferSize));
+
+        // The transferSize becomes 0 when status is 304 or Content-Length is available, so
+        // notify listeners of that change.
+        if (statusCode === 304 || this._responseHeaders.valueForCaseInsensitiveKey("Content-Length"))
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.ResponseReceived);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+    }
+
+    canRequestContent()
+    {
+        return this._finished;
+    }
+
+    requestContentFromBackend()
+    {
+        // If we have the requestIdentifier we can get the actual response for this specific resource.
+        // Otherwise the content will be cached resource data, which might not exist anymore.
+        if (this._requestIdentifier)
+            return NetworkAgent.getResponseBody(this._requestIdentifier);
+
+        // There is no request identifier or frame to request content from.
+        if (this._parentFrame)
+            return PageAgent.getResourceContent(this._parentFrame.id, this._url);
+
+        return Promise.reject(new Error("Content request failed."));
+    }
+
+    increaseSize(dataLength, elapsedTime)
+    {
+        console.assert(dataLength >= 0);
+
+        if (isNaN(this._size))
+            this._size = 0;
+
+        var previousSize = this._size;
+
+        this._size += dataLength;
+
+        this._lastDataReceivedTimestamp = elapsedTime || NaN;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.SizeDidChange, {previousSize});
+
+        // The transferSize is based off of size when status is not 304 or Content-Length is missing.
+        if (isNaN(this._transferSize) && this._statusCode !== 304 && !this._responseHeaders.valueForCaseInsensitiveKey("Content-Length"))
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+    }
+
+    increaseTransferSize(encodedDataLength)
+    {
+        console.assert(encodedDataLength >= 0);
+
+        if (isNaN(this._transferSize))
+            this._transferSize = 0;
+        this._transferSize += encodedDataLength;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+    }
+
+    markAsCached()
+    {
+        this._cached = true;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.CacheStatusDidChange);
+
+        // The transferSize is starts returning 0 when cached is true, unless status is 304.
+        if (this._statusCode !== 304)
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
+    }
+
+    markAsFinished(elapsedTime)
+    {
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+
+        this._finished = true;
+        this._finishedOrFailedTimestamp = elapsedTime || NaN;
+
+        if (this._finishThenRequestContentPromise)
+            this._finishThenRequestContentPromise = null;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.LoadingDidFinish);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+    }
+
+    markAsFailed(canceled, elapsedTime)
+    {
+        console.assert(!this._finished);
+
+        this._failed = true;
+        this._canceled = canceled;
+        this._finishedOrFailedTimestamp = elapsedTime || NaN;
+
+        this.dispatchEventToListeners(WebInspector.Resource.Event.LoadingDidFail);
+        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
+    }
+
+    revertMarkAsFinished()
+    {
+        console.assert(!this._failed);
+        console.assert(!this._canceled);
+        console.assert(this._finished);
+
+        this._finished = false;
+        this._finishedOrFailedTimestamp = NaN;
+    }
+
+    getImageSize(callback)
+    {
+        // Throw an error in the case this resource is not an image.
+        if (this.type !== WebInspector.Resource.Type.Image)
+            throw "Resource is not an image.";
+
+        // See if we've already computed and cached the image size,
+        // in which case we can provide them directly.
+        if (this._imageSize) {
+            callback(this._imageSize);
+            return;
+        }
+
+        var objectURL = null;
+
+        // Event handler for the image "load" event.
+        function imageDidLoad()
+        {
+            URL.revokeObjectURL(objectURL);
+
+            // Cache the image metrics.
+            this._imageSize = {
+                width: image.width,
+                height: image.height
+            };
+
+            callback(this._imageSize);
+        }
+
+        // Create an <img> element that we'll use to load the image resource
+        // so that we can query its intrinsic size.
+        var image = new Image;
+        image.addEventListener("load", imageDidLoad.bind(this), false);
+
+        // Set the image source using an object URL once we've obtained its data.
+        this.requestContent().then(function(content) {
+            objectURL = image.src = content.sourceCode.createObjectURL();
+        });
+    }
+
+    requestContent()
+    {
+        if (this._finished)
+            return super.requestContent();
+
+        if (this._failed)
+            return Promise.resolve({error: WebInspector.UIString("An error occurred trying to load the resource.")});
+
+        if (!this._finishThenRequestContentPromise) {
+            this._finishThenRequestContentPromise = new Promise(function (resolve, reject) {
+                this.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, resolve);
+                this.addEventListener(WebInspector.Resource.Event.LoadingDidFail, reject);
+            }.bind(this)).then(WebInspector.SourceCode.prototype.requestContent.bind(this));
+        }
+
+        return this._finishThenRequestContentPromise;
+    }
+
+    associateWithScript(script)
+    {
+        if (!this._scripts)
+            this._scripts = [];
+
+        this._scripts.push(script);
+
+        if (this._type === WebInspector.Resource.Type.Other) {
+            var oldType = this._type;
+            this._type = WebInspector.Resource.Type.Script;
+            this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType});
+        }
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.Resource.URLCookieKey] = this.url.hash;
+        cookie[WebInspector.Resource.MainResourceCookieKey] = this.isMainResource();
+    }
+};
+
+WebInspector.Resource.TypeIdentifier = "resource";
+WebInspector.Resource.URLCookieKey = "resource-url";
+WebInspector.Resource.MainResourceCookieKey = "resource-is-main-resource";
+
+WebInspector.Resource.Event = {
+    URLDidChange: "resource-url-did-change",
+    MIMETypeDidChange: "resource-mime-type-did-change",
+    TypeDidChange: "resource-type-did-change",
+    RequestHeadersDidChange: "resource-request-headers-did-change",
+    ResponseReceived: "resource-response-received",
+    LoadingDidFinish: "resource-loading-did-finish",
+    LoadingDidFail: "resource-loading-did-fail",
+    TimestampsDidChange: "resource-timestamps-did-change",
+    SizeDidChange: "resource-size-did-change",
+    TransferSizeDidChange: "resource-transfer-size-did-change",
+    CacheStatusDidChange: "resource-cached-did-change",
+    InitiatedResourcesDidChange: "resource-initiated-resources-did-change",
+};
+
+// Keep these in sync with the "ResourceType" enum defined by the "Page" domain.
+WebInspector.Resource.Type = {
+    Document: "resource-type-document",
+    Stylesheet: "resource-type-stylesheet",
+    Image: "resource-type-image",
+    Font: "resource-type-font",
+    Script: "resource-type-script",
+    XHR: "resource-type-xhr",
+    WebSocket: "resource-type-websocket",
+    Other: "resource-type-other"
+};
+
+// This MIME Type map is private, use WebInspector.Resource.typeFromMIMEType().
+WebInspector.Resource._mimeTypeMap = {
+    "text/html": WebInspector.Resource.Type.Document,
+    "text/xml": WebInspector.Resource.Type.Document,
+    "text/plain": WebInspector.Resource.Type.Document,
+    "application/xhtml+xml": WebInspector.Resource.Type.Document,
+    "image/svg+xml": WebInspector.Resource.Type.Document,
+
+    "text/css": WebInspector.Resource.Type.Stylesheet,
+    "text/xsl": WebInspector.Resource.Type.Stylesheet,
+    "text/x-less": WebInspector.Resource.Type.Stylesheet,
+    "text/x-sass": WebInspector.Resource.Type.Stylesheet,
+    "text/x-scss": WebInspector.Resource.Type.Stylesheet,
+
+    "application/pdf": WebInspector.Resource.Type.Image,
+
+    "application/x-font-type1": WebInspector.Resource.Type.Font,
+    "application/x-font-ttf": WebInspector.Resource.Type.Font,
+    "application/x-font-woff": WebInspector.Resource.Type.Font,
+    "application/x-truetype-font": WebInspector.Resource.Type.Font,
+
+    "text/javascript": WebInspector.Resource.Type.Script,
+    "text/ecmascript": WebInspector.Resource.Type.Script,
+    "application/javascript": WebInspector.Resource.Type.Script,
+    "application/ecmascript": WebInspector.Resource.Type.Script,
+    "application/x-javascript": WebInspector.Resource.Type.Script,
+    "application/json": WebInspector.Resource.Type.Script,
+    "application/x-json": WebInspector.Resource.Type.Script,
+    "text/x-javascript": WebInspector.Resource.Type.Script,
+    "text/x-json": WebInspector.Resource.Type.Script,
+    "text/javascript1.1": WebInspector.Resource.Type.Script,
+    "text/javascript1.2": WebInspector.Resource.Type.Script,
+    "text/javascript1.3": WebInspector.Resource.Type.Script,
+    "text/jscript": WebInspector.Resource.Type.Script,
+    "text/livescript": WebInspector.Resource.Type.Script,
+    "text/x-livescript": WebInspector.Resource.Type.Script,
+    "text/typescript": WebInspector.Resource.Type.Script,
+    "text/x-clojure": WebInspector.Resource.Type.Script,
+    "text/x-coffeescript": WebInspector.Resource.Type.Script
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ResourceCollection.js b/Source/WebInspectorUI/UserInterface/Models/ResourceCollection.js
new file mode 100644
index 000000000..735ab3a45
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ResourceCollection.js
@@ -0,0 +1,163 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceCollection = class ResourceCollection extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._resources = [];
+        this._resourceURLMap = new Map;
+        this._resourcesTypeMap = new Map;
+    }
+
+    // Public
+
+    get resources()
+    {
+        return this._resources;
+    }
+
+    resourceForURL(url)
+    {
+        return this._resourceURLMap.get(url) || null;
+    }
+
+    resourcesWithType(type)
+    {
+        return this._resourcesTypeMap.get(type) || [];
+    }
+
+    addResource(resource)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        this._associateWithResource(resource);
+    }
+
+    removeResource(resourceOrURL)
+    {
+        console.assert(resourceOrURL);
+
+        if (resourceOrURL instanceof WebInspector.Resource)
+            var url = resourceOrURL.url;
+        else
+            var url = resourceOrURL;
+
+        // Fetch the resource by URL even if we were passed a WebInspector.Resource.
+        // We do this incase the WebInspector.Resource is a new object that isn't in _resources,
+        // but the URL is a valid resource.
+        var resource = this.resourceForURL(url);
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return null;
+
+        this._disassociateWithResource(resource);
+
+        return resource;
+    }
+
+    removeAllResources()
+    {
+        if (!this._resources.length)
+            return;
+
+        for (var i = 0; i < this._resources.length; ++i)
+            this._disassociateWithResource(this._resources[i], true);
+
+        this._resources = [];
+        this._resourceURLMap.clear();
+        this._resourcesTypeMap.clear();
+    }
+
+    // Private
+
+    _associateWithResource(resource)
+    {
+        this._resources.push(resource);
+        this._resourceURLMap.set(resource.url, resource);
+
+        if (!this._resourcesTypeMap.has(resource.type))
+            this._resourcesTypeMap.set(resource.type, [resource]);
+        else
+            this._resourcesTypeMap.get(resource.type).push(resource);
+
+        resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
+        resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+    }
+
+    _disassociateWithResource(resource, skipRemoval)
+    {
+        if (skipRemoval) {
+            this._resources.remove(resource);
+            if (this._resourcesTypeMap.has(resource.type))
+                this._resourcesTypeMap.get(resource.type).remove(resource);
+            this._resourceURLMap.delete(resource.url);
+        }
+
+        resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
+        resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+    }
+
+    _resourceURLDidChange(event)
+    {
+        var resource = event.target;
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        var oldURL = event.data.oldURL;
+        console.assert(oldURL);
+        if (!oldURL)
+            return;
+
+        this._resourceURLMap.set(resource.url, resource);
+        this._resourceURLMap.delete(oldURL);
+    }
+
+    _resourceTypeDidChange(event)
+    {
+        var resource = event.target;
+        console.assert(resource instanceof WebInspector.Resource);
+        if (!(resource instanceof WebInspector.Resource))
+            return;
+
+        var oldType = event.data.oldType;
+        console.assert(oldType);
+        if (!oldType)
+            return;
+
+        if (!this._resourcesTypeMap.has(resource.type))
+            this._resourcesTypeMap.set(resource.type, [resource]);
+        else
+            this._resourcesTypeMap.get(resource.type).push(resource);
+
+        if (this._resourcesTypeMap.has(oldType))
+            this._resourcesTypeMap.get(oldType).remove(resource);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ResourceTimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/ResourceTimelineRecord.js
new file mode 100644
index 000000000..3eb163296
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ResourceTimelineRecord.js
@@ -0,0 +1,74 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimelineRecord = class ResourceTimelineRecord extends WebInspector.TimelineRecord
+{
+    constructor(resource)
+    {
+        super(WebInspector.TimelineRecord.Type.Network);
+
+        this._resource = resource;
+        this._resource.addEventListener(WebInspector.Resource.Event.TimestampsDidChange, this._dispatchUpdatedEvent, this);
+    }
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    get updatesDynamically()
+    {
+        return true;
+    }
+
+    get usesActiveStartTime()
+    {
+        return true;
+    }
+
+    get startTime()
+    {
+        return this._resource.requestSentTimestamp;
+    }
+
+    get activeStartTime()
+    {
+        return this._resource.responseReceivedTimestamp;
+    }
+
+    get endTime()
+    {
+        return this._resource.finishedOrFailedTimestamp;
+    }
+
+    // Private
+
+    _dispatchUpdatedEvent()
+    {
+        this.dispatchEventToListeners(WebInspector.TimelineRecord.Event.Updated);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Revision.js b/Source/WebInspectorUI/UserInterface/Models/Revision.js
new file mode 100644
index 000000000..83c51a7a3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Revision.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Revision = class Revision extends WebInspector.Object
+{
+    // Public
+
+    apply()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+    }
+
+    revert()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+    }
+
+    copy()
+    {
+        // Override by subclasses.
+        return this;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ScopeChainNode.js b/Source/WebInspectorUI/UserInterface/Models/ScopeChainNode.js
new file mode 100644
index 000000000..613a8d11a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ScopeChainNode.js
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeChainNode = class ScopeChainNode extends WebInspector.Object
+{
+    constructor(type, objects)
+    {
+        super();
+
+        console.assert(typeof type === "string");
+        console.assert(objects.every(function(x) { return x instanceof WebInspector.RemoteObject; }));
+
+        if (type in WebInspector.ScopeChainNode.Type)
+            type = WebInspector.ScopeChainNode.Type[type];
+
+        this._type = type || null;
+        this._objects = objects || [];
+    }
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get objects()
+    {
+        return this._objects;
+    }
+};
+
+WebInspector.ScopeChainNode.Type = {
+    Local: "scope-chain-type-local",
+    Global: "scope-chain-type-global",
+    GlobalLexicalEnvironment: "scope-chain-type-global-lexical-environment",
+    With: "scope-chain-type-with",
+    Closure: "scope-chain-type-closure",
+    Catch: "scope-chain-type-catch",
+    FunctionName: "scope-chain-type-function-name",
+    Block: "scope-chain-type-block",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Script.js b/Source/WebInspectorUI/UserInterface/Models/Script.js
new file mode 100644
index 000000000..b6c84d3a0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Script.js
@@ -0,0 +1,220 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Script = class Script extends WebInspector.SourceCode
+{
+    constructor(id, range, url, injected, sourceMapURL)
+    {
+        super();
+
+        console.assert(id);
+        console.assert(range instanceof WebInspector.TextRange);
+
+        this._id = id || null;
+        this._range = range || null;
+        this._url = url || null;
+        this._injected = injected || false;
+
+        this._resource = this._resolveResource();
+        if (this._resource)
+            this._resource.associateWithScript(this);
+
+        if (sourceMapURL)
+            WebInspector.sourceMapManager.downloadSourceMap(sourceMapURL, this._url, this);
+
+        this._scriptSyntaxTree = null;
+    }
+
+    // Static
+
+    static resetUniqueDisplayNameNumbers()
+    {
+        WebInspector.Script._nextUniqueDisplayNameNumber = 1;
+    }
+
+    // Public
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get range()
+    {
+        return this._range;
+    }
+
+    get url()
+    {
+        return this._url;
+    }
+
+    get urlComponents()
+    {
+        if (!this._urlComponents)
+            this._urlComponents = parseURL(this._url);
+        return this._urlComponents;
+    }
+
+    get mimeType()
+    {
+        return this._resource.mimeType;
+    }
+
+    get displayName()
+    {
+        if (this._url)
+            return WebInspector.displayNameForURL(this._url, this.urlComponents);
+
+        // Assign a unique number to the script object so it will stay the same.
+        if (!this._uniqueDisplayNameNumber)
+            this._uniqueDisplayNameNumber = this.constructor._nextUniqueDisplayNameNumber++;
+
+        return WebInspector.UIString("Anonymous Script %d").format(this._uniqueDisplayNameNumber);
+    }
+
+    get injected()
+    {
+        return this._injected;
+    }
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    get scriptSyntaxTree()
+    {
+        return this._scriptSyntaxTree;
+    }
+
+    requestContentFromBackend()
+    {
+        if (!this._id) {
+            // There is no identifier to request content with. Return false to cause the
+            // pending callbacks to get null content.
+            return Promise.reject(new Error("There is no identifier to request content with."));
+        }
+
+        return DebuggerAgent.getScriptSource(this._id);
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.Script.URLCookieKey] = this.url;
+        cookie[WebInspector.Script.DisplayNameCookieKey] = this.displayName;
+    }
+
+    requestScriptSyntaxTree(callback)
+    {
+        if (this._scriptSyntaxTree) {
+            setTimeout(function() { callback(this._scriptSyntaxTree); }.bind(this), 0);
+            return;
+        }
+
+        var makeSyntaxTreeAndCallCallback = function(content)
+        {
+            this._makeSyntaxTree(content);
+            callback(this._scriptSyntaxTree);
+        }.bind(this);
+
+        var content = this.content;
+        if (!content && this._resource && this._resource.type === WebInspector.Resource.Type.Script && this._resource.finished)
+            content = this._resource.content;
+        if (content) {
+            setTimeout(makeSyntaxTreeAndCallCallback, 0, content);
+            return;
+        }
+
+        this.requestContent().then(function(parameters) {
+            makeSyntaxTreeAndCallCallback(parameters.sourceCode.content);
+        }).catch(function(error) {
+            makeSyntaxTreeAndCallCallback(null);
+        });
+    }
+
+    // Private
+
+    _resolveResource()
+    {
+        // FIXME: We should be able to associate a Script with a Resource through identifiers,
+        // we shouldn't need to lookup by URL, which is not safe with frames, where there might
+        // be multiple resources with the same URL.
+        // <rdar://problem/13373951> Scripts should be able to associate directly with a Resource
+
+        // No URL, no resource.
+        if (!this._url)
+            return null;
+
+        try {
+            // Try with the Script's full URL.
+            var resource = WebInspector.frameResourceManager.resourceForURL(this.url);
+            if (resource)
+                return resource;
+
+            // Try with the Script's full decoded URL.
+            var decodedURL = decodeURI(this._url);
+            if (decodedURL !== this._url) {
+                resource = WebInspector.frameResourceManager.resourceForURL(decodedURL);
+                if (resource)
+                    return resource;
+            }
+
+            // Next try removing any fragment in the original URL.
+            var urlWithoutFragment = removeURLFragment(this._url);
+            if (urlWithoutFragment !== this._url) {
+                resource = WebInspector.frameResourceManager.resourceForURL(urlWithoutFragment);
+                if (resource)
+                    return resource;
+            }
+
+            // Finally try removing any fragment in the decoded URL.
+            var decodedURLWithoutFragment = removeURLFragment(decodedURL);
+            if (decodedURLWithoutFragment !== decodedURL) {
+                resource = WebInspector.frameResourceManager.resourceForURL(decodedURLWithoutFragment);
+                if (resource)
+                    return resource;
+            }
+        } catch (e) {
+            // Ignore possible URIErrors.
+        }
+
+        return null;
+    }
+
+    _makeSyntaxTree(sourceText)
+    {
+        if (this._scriptSyntaxTree || !sourceText)
+            return;
+
+        this._scriptSyntaxTree = new WebInspector.ScriptSyntaxTree(sourceText, this);
+    }
+};
+
+WebInspector.Script.TypeIdentifier = "script";
+WebInspector.Script.URLCookieKey = "script-url";
+WebInspector.Script.DisplayNameCookieKey = "script-display-name";
+
+WebInspector.Script._nextUniqueDisplayNameNumber = 1;
diff --git a/Source/WebInspectorUI/UserInterface/Models/ScriptInstrument.js b/Source/WebInspectorUI/UserInterface/Models/ScriptInstrument.js
new file mode 100644
index 000000000..60aced5c7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ScriptInstrument.js
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptInstrument = class ScriptInstrument extends WebInspector.Instrument
+{
+    // Protected
+
+    get timelineRecordType()
+    {
+        return WebInspector.TimelineRecord.Type.Script;
+    }
+
+    startInstrumentation()
+    {
+        // COMPATIBILITY (iOS 9): Legacy backends did not have ScriptProfilerAgent. They use TimelineAgent.
+        if (!window.ScriptProfilerAgent) {
+            super.startInstrumentation();
+            return;
+        }
+
+        // FIXME: Make this some UI visible option.
+        const includeSamples = true;
+
+        ScriptProfilerAgent.startTracking(includeSamples);
+    }
+
+    stopInstrumentation()
+    {
+        // COMPATIBILITY (iOS 9): Legacy backends did not have ScriptProfilerAgent. They use TimelineAgent.
+        if (!window.ScriptProfilerAgent) {
+            super.stopInstrumentation();
+            return;
+        }
+
+        ScriptProfilerAgent.stopTracking();
+    }
+
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ScriptSyntaxTree.js b/Source/WebInspectorUI/UserInterface/Models/ScriptSyntaxTree.js
new file mode 100644
index 000000000..ca5f630c4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ScriptSyntaxTree.js
@@ -0,0 +1,1017 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptSyntaxTree = class ScriptSyntaxTree extends WebInspector.Object
+{
+    constructor(sourceText, script)
+    {
+        super();
+
+        console.assert(script && script instanceof WebInspector.Script, script);
+
+        this._script = script;
+
+        try {
+            var esprimaSyntaxTree = esprima.parse(sourceText, {range: true});
+            this._syntaxTree = this._createInternalSyntaxTree(esprimaSyntaxTree);
+            this._parsedSuccessfully = true;
+        } catch (error) {
+            this._parsedSuccessfully = false;
+            this._syntaxTree = null;
+            console.error("Couldn't parse JavaScript File: " + script.url, error);
+        }
+    }
+
+    // Public
+
+    get parsedSuccessfully()
+    {
+        return this._parsedSuccessfully;
+    }
+
+    forEachNode(callback)
+    {
+        console.assert(this._parsedSuccessfully);
+        if (!this._parsedSuccessfully)
+            return;
+
+        this._recurse(this._syntaxTree, callback, this._defaultParserState());
+    }
+
+    filter(predicate, startNode)
+    {
+        console.assert(startNode && this._parsedSuccessfully);
+        if (!this._parsedSuccessfully)
+            return [];
+
+        var nodes = [];
+        function filter(node, state)
+        {
+            if (predicate(node))
+                nodes.push(node);
+            else
+                state.skipChildNodes = true;
+        }
+
+        this._recurse(startNode, filter, this._defaultParserState());
+
+        return nodes;
+    }
+
+    filterByRange(startOffset, endOffset)
+    {
+        console.assert(this._parsedSuccessfully);
+        if (!this._parsedSuccessfully)
+            return [];
+
+        var allNodes = [];
+        var start = 0;
+        var end = 1;
+        function filterForNodesInRange(node, state)
+        {
+            // program start        range            program end
+            // [                 [         ]               ]
+            //            [ ]  [   [        ] ]  [ ]
+
+            // If a node's range ends before the range we're interested in starts, we don't need to search any of its
+            // enclosing ranges, because, by definition, those enclosing ranges are contained within this node's range.
+            if (node.range[end] < startOffset)
+                state.skipChildNodes = true;
+
+            // We are only interested in nodes whose start position is within our range.
+            if (startOffset <= node.range[start] && node.range[start] <= endOffset)
+                allNodes.push(node);
+
+            // Once we see nodes that start beyond our range, we can quit traversing the AST. We can do this safely
+            // because we know the AST is traversed using depth first search, so it will traverse into enclosing ranges
+            // before it traverses into adjacent ranges.
+            if (node.range[start] > endOffset)
+                state.shouldStopEarly = true;
+        }
+
+        this.forEachNode(filterForNodesInRange);
+
+        return allNodes;
+    }
+
+    containsNonEmptyReturnStatement(startNode)
+    {
+        console.assert(startNode && this._parsedSuccessfully);
+        if (!this._parsedSuccessfully)
+            return false;
+
+        if (startNode.attachments._hasNonEmptyReturnStatement !== undefined)
+            return startNode.attachments._hasNonEmptyReturnStatement;
+
+        function removeFunctionsFilter(node)
+        {
+            return node.type !== WebInspector.ScriptSyntaxTree.NodeType.FunctionExpression
+                && node.type !== WebInspector.ScriptSyntaxTree.NodeType.FunctionDeclaration
+                && node.type !== WebInspector.ScriptSyntaxTree.NodeType.ArrowFunctionExpression;
+        }
+
+        var nodes = this.filter(removeFunctionsFilter, startNode);
+        var hasNonEmptyReturnStatement = false;
+        var returnStatementType = WebInspector.ScriptSyntaxTree.NodeType.ReturnStatement;
+        for (var node of nodes) {
+            if (node.type === returnStatementType && node.argument) {
+                hasNonEmptyReturnStatement = true;
+                break;
+            }
+        }
+
+        startNode.attachments._hasNonEmptyReturnStatement = hasNonEmptyReturnStatement;
+
+        return hasNonEmptyReturnStatement;
+    }
+
+    static functionReturnDivot(node)
+    {
+        console.assert(node.type === WebInspector.ScriptSyntaxTree.NodeType.FunctionDeclaration || node.type === WebInspector.ScriptSyntaxTree.NodeType.FunctionExpression || node.type === WebInspector.ScriptSyntaxTree.NodeType.MethodDefinition || node.type === WebInspector.ScriptSyntaxTree.NodeType.ArrowFunctionExpression); 
+
+        // COMPATIBILITY (iOS 9): Legacy Backends view the return type as being the opening "{" of the function body. 
+        // After iOS 9, this is to move to the start of the function statement/expression. See below:
+        // FIXME: Need a better way to determine backend versions. Using DOM.pseudoElement because that was added after iOS 9.
+        if (!DOMAgent.hasEvent("pseudoElementAdded"))
+            return node.body.range[0];
+
+        // "f" in "function". "s" in "set". "g" in "get". First letter in any method name for classes and object literals. 
+        // The "[" for computed methods in classes and object literals.
+        return node.typeProfilingReturnDivot;
+    }
+
+    updateTypes(nodesToUpdate, callback)
+    {
+        console.assert(RuntimeAgent.getRuntimeTypesForVariablesAtOffsets);
+        console.assert(Array.isArray(nodesToUpdate) && this._parsedSuccessfully);
+
+        if (!this._parsedSuccessfully)
+            return;
+
+        var allRequests = [];
+        var allRequestNodes = [];
+        var sourceID = this._script.id;
+
+        for (var node of nodesToUpdate) {
+            switch (node.type) {
+            case WebInspector.ScriptSyntaxTree.NodeType.FunctionDeclaration:
+            case WebInspector.ScriptSyntaxTree.NodeType.FunctionExpression:
+            case WebInspector.ScriptSyntaxTree.NodeType.ArrowFunctionExpression:
+                for (var param of node.params) {
+                    for (var identifier of this._gatherIdentifiersInDeclaration(param)) {
+                        allRequests.push({
+                            typeInformationDescriptor: WebInspector.ScriptSyntaxTree.TypeProfilerSearchDescriptor.NormalExpression,
+                            sourceID,
+                            divot: identifier.range[0]
+                        });
+                        allRequestNodes.push(identifier);
+                    }
+                }
+
+                allRequests.push({
+                    typeInformationDescriptor: WebInspector.ScriptSyntaxTree.TypeProfilerSearchDescriptor.FunctionReturn,
+                    sourceID,
+                    divot: WebInspector.ScriptSyntaxTree.functionReturnDivot(node)
+                });
+                allRequestNodes.push(node);
+                break;
+            case WebInspector.ScriptSyntaxTree.NodeType.VariableDeclarator:
+                for (var identifier of this._gatherIdentifiersInDeclaration(node.id)) {
+                    allRequests.push({
+                        typeInformationDescriptor: WebInspector.ScriptSyntaxTree.TypeProfilerSearchDescriptor.NormalExpression,
+                        sourceID,
+                        divot: identifier.range[0]
+                    });
+                    allRequestNodes.push(identifier);
+                }
+                break;
+            }
+        }
+
+        console.assert(allRequests.length === allRequestNodes.length);
+
+        function handleTypes(error, typeInformationArray)
+        {
+            if (error)
+                return;
+
+            console.assert(typeInformationArray.length === allRequests.length);
+
+            for (var i = 0; i < typeInformationArray.length; i++) {
+                var node = allRequestNodes[i];
+                var typeInformation = WebInspector.TypeDescription.fromPayload(typeInformationArray[i]);
+                if (allRequests[i].typeInformationDescriptor === WebInspector.ScriptSyntaxTree.TypeProfilerSearchDescriptor.FunctionReturn)
+                    node.attachments.returnTypes = typeInformation;
+                else
+                    node.attachments.types = typeInformation;
+            }
+
+            callback(allRequestNodes);
+        }
+
+        RuntimeAgent.getRuntimeTypesForVariablesAtOffsets(allRequests, handleTypes);
+    }
+
+    // Private
+
+    _gatherIdentifiersInDeclaration(node)
+    {
+        function gatherIdentifiers(node)
+        {
+            switch (node.type) {
+                case WebInspector.ScriptSyntaxTree.NodeType.Identifier:
+                    return [node];
+                case WebInspector.ScriptSyntaxTree.NodeType.Property:
+                    return gatherIdentifiers(node.value);
+                case WebInspector.ScriptSyntaxTree.NodeType.ObjectPattern:
+                    var identifiers = [];
+                    for (var property of node.properties) {
+                        for (var identifier of gatherIdentifiers(property))
+                            identifiers.push(identifier);
+                    }
+                    return identifiers;
+                case WebInspector.ScriptSyntaxTree.NodeType.ArrayPattern:
+                    var identifiers = [];
+                    for (var element of node.elements) {
+                        for (var identifier of gatherIdentifiers(element))
+                            identifiers.push(identifier);
+                    }
+                    return identifiers;
+                case WebInspector.ScriptSyntaxTree.NodeType.AssignmentPattern:
+                    return gatherIdentifiers(node.left);
+                default:
+                    console.assert(false, "Unexpected node type in variable declarator: " + node.type);
+                    return [];
+            }
+        }
+
+        console.assert(node.type === WebInspector.ScriptSyntaxTree.NodeType.Identifier || node.type === WebInspector.ScriptSyntaxTree.NodeType.ObjectPattern || node.type === WebInspector.ScriptSyntaxTree.NodeType.ArrayPattern);
+
+        return gatherIdentifiers(node);
+    }
+
+    _defaultParserState()
+    {
+        return {
+            shouldStopEarly: false,
+            skipChildNodes: false
+        };
+    }
+
+    _recurse(node, callback, state)
+    {
+        if (!node)
+            return;
+
+        if (state.shouldStopEarly || state.skipChildNodes)
+            return;
+
+        switch (node.type) {
+        case WebInspector.ScriptSyntaxTree.NodeType.AssignmentExpression:
+            callback(node, state);
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ArrayExpression:
+        case WebInspector.ScriptSyntaxTree.NodeType.ArrayPattern:
+            callback(node, state);
+            this._recurseArray(node.elements, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.AssignmentPattern:
+            callback(node, state);
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.BlockStatement:
+            callback(node, state);
+            this._recurseArray(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.BinaryExpression:
+            callback(node, state);
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.BreakStatement:
+            callback(node, state);
+            this._recurse(node.label, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.CatchClause:
+            callback(node, state);
+            this._recurse(node.param, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.CallExpression:
+            callback(node, state);
+            this._recurse(node.callee, callback, state);
+            this._recurseArray(node.arguments, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ClassBody:
+            callback(node, state);
+            this._recurseArray(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ClassDeclaration:
+        case WebInspector.ScriptSyntaxTree.NodeType.ClassExpression:
+            callback(node, state);
+            this._recurse(node.id, callback, state);
+            this._recurse(node.superClass, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ContinueStatement:
+            callback(node, state);
+            this._recurse(node.label, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.DoWhileStatement:
+            callback(node, state);
+            this._recurse(node.body, callback, state);
+            this._recurse(node.test, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ExpressionStatement:
+            callback(node, state);
+            this._recurse(node.expression, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ForStatement:
+            callback(node, state);
+            this._recurse(node.init, callback, state);
+            this._recurse(node.test, callback, state);
+            this._recurse(node.update, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ForInStatement:
+        case WebInspector.ScriptSyntaxTree.NodeType.ForOfStatement:
+            callback(node, state);
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.FunctionDeclaration:
+        case WebInspector.ScriptSyntaxTree.NodeType.FunctionExpression:
+        case WebInspector.ScriptSyntaxTree.NodeType.ArrowFunctionExpression:
+            callback(node, state);
+            this._recurse(node.id, callback, state);
+            this._recurseArray(node.params, callback, state);
+            this._recurseArray(node.defaults, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.IfStatement:
+            callback(node, state);
+            this._recurse(node.test, callback, state);
+            this._recurse(node.consequent, callback, state);
+            this._recurse(node.alternate, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.LabeledStatement:
+            callback(node, state);
+            this._recurse(node.label, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.LogicalExpression:
+            callback(node, state);
+            this._recurse(node.left, callback, state);
+            this._recurse(node.right, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.MemberExpression:
+            callback(node, state);
+            this._recurse(node.object, callback, state);
+            this._recurse(node.property, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.MethodDefinition:
+            callback(node, state);
+            this._recurse(node.key, callback, state);
+            this._recurse(node.value, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.NewExpression:
+            callback(node, state);
+            this._recurse(node.callee, callback, state);
+            this._recurseArray(node.arguments, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ObjectExpression:
+        case WebInspector.ScriptSyntaxTree.NodeType.ObjectPattern:
+            callback(node, state);
+            this._recurseArray(node.properties, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.Program:
+            callback(node, state);
+            this._recurseArray(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.Property:
+            callback(node, state);
+            this._recurse(node.key, callback, state);
+            this._recurse(node.value, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ReturnStatement:
+            callback(node, state);
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SequenceExpression:
+            callback(node, state);
+            this._recurseArray(node.expressions, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SpreadElement:
+            callback(node, state);
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SwitchStatement:
+            callback(node, state);
+            this._recurse(node.discriminant, callback, state);
+            this._recurseArray(node.cases, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.SwitchCase:
+            callback(node, state);
+            this._recurse(node.test, callback, state);
+            this._recurseArray(node.consequent, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ConditionalExpression:
+            callback(node, state);
+            this._recurse(node.test, callback, state);
+            this._recurse(node.consequent, callback, state);
+            this._recurse(node.alternate, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.TaggedTemplateExpression:
+            callback(node, state);
+            this._recurse(node.tag, callback, state);
+            this._recurse(node.quasi, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.TemplateLiteral:
+            callback(node, state);
+            this._recurseArray(node.quasis, callback, state);
+            this._recurseArray(node.expressions, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.ThrowStatement:
+            callback(node, state);
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.TryStatement:
+            callback(node, state);
+            this._recurse(node.block, callback, state);
+            this._recurse(node.handler, callback, state);
+            this._recurse(node.finalizer, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.UnaryExpression:
+            callback(node, state);
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.UpdateExpression:
+            callback(node, state);
+            this._recurse(node.argument, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.VariableDeclaration:
+            callback(node, state);
+            this._recurseArray(node.declarations, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.VariableDeclarator:
+            callback(node, state);
+            this._recurse(node.id, callback, state);
+            this._recurse(node.init, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.WhileStatement:
+            callback(node, state);
+            this._recurse(node.test, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.WithStatement:
+            callback(node, state);
+            this._recurse(node.object, callback, state);
+            this._recurse(node.body, callback, state);
+            break;
+        case WebInspector.ScriptSyntaxTree.NodeType.YieldExpression:
+            callback(node, state);
+            this._recurse(node.argument, callback, state);
+            break;
+        // All the leaf nodes go here.
+        case WebInspector.ScriptSyntaxTree.NodeType.DebuggerStatement:
+        case WebInspector.ScriptSyntaxTree.NodeType.EmptyStatement:
+        case WebInspector.ScriptSyntaxTree.NodeType.Identifier:
+        case WebInspector.ScriptSyntaxTree.NodeType.Literal:
+        case WebInspector.ScriptSyntaxTree.NodeType.MetaProperty:
+        case WebInspector.ScriptSyntaxTree.NodeType.Super:
+        case WebInspector.ScriptSyntaxTree.NodeType.ThisExpression:
+        case WebInspector.ScriptSyntaxTree.NodeType.TemplateElement:
+            callback(node, state);
+            break;
+        }
+
+        state.skipChildNodes = false;
+    }
+
+    _recurseArray(array, callback, state)
+    {
+        for (var node of array)
+            this._recurse(node, callback, state);
+    }
+
+    // This function translates from esprima's Abstract Syntax Tree to ours.
+    // Mostly, this is just the identity function. We've added an extra typeProfilingReturnDivot property for functions/methods.
+    // Our AST complies with the Mozilla parser API:
+    // https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API
+    _createInternalSyntaxTree(node)
+    {
+        if (!node)
+            return null;
+
+        var result = null;
+        switch (node.type) {
+        case "ArrayExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ArrayExpression,
+                elements: node.elements.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "ArrayPattern":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ArrayPattern,
+                elements: node.elements.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "ArrowFunctionExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ArrowFunctionExpression,
+                id: this._createInternalSyntaxTree(node.id),
+                params: node.params.map(this._createInternalSyntaxTree, this),
+                defaults: node.defaults.map(this._createInternalSyntaxTree, this),
+                body: this._createInternalSyntaxTree(node.body),
+                generator: node.generator,
+                expression: node.expression, // Boolean indicating if the body a single expression or a block statement.
+                typeProfilingReturnDivot: node.range[0]
+            };
+            break;
+        case "AssignmentExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.AssignmentExpression,
+                operator: node.operator,
+                left: this._createInternalSyntaxTree(node.left),
+                right: this._createInternalSyntaxTree(node.right)
+            };
+            break;
+        case "AssignmentPattern":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.AssignmentPattern,
+                left: this._createInternalSyntaxTree(node.left),
+                right: this._createInternalSyntaxTree(node.right),
+            };
+            break;
+        case "BlockStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.BlockStatement,
+                body: node.body.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "BinaryExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.BinaryExpression,
+                operator: node.operator,
+                left: this._createInternalSyntaxTree(node.left),
+                right: this._createInternalSyntaxTree(node.right)
+            };
+            break;
+        case "BreakStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.BreakStatement,
+                label: this._createInternalSyntaxTree(node.label)
+            };
+            break;
+        case "CallExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.CallExpression,
+                callee: this._createInternalSyntaxTree(node.callee),
+                arguments: node.arguments.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "CatchClause":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.CatchClause,
+                param: this._createInternalSyntaxTree(node.param),
+                body: this._createInternalSyntaxTree(node.body)
+            };
+            break;
+        case "ClassBody":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ClassBody,
+                body: node.body.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "ClassDeclaration":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ClassDeclaration,
+                id: this._createInternalSyntaxTree(node.id),
+                superClass: this._createInternalSyntaxTree(node.superClass),
+                body: this._createInternalSyntaxTree(node.body),
+            };
+            break;
+        case "ClassExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ClassExpression,
+                id: this._createInternalSyntaxTree(node.id),
+                superClass: this._createInternalSyntaxTree(node.superClass),
+                body: this._createInternalSyntaxTree(node.body),
+            };
+            break;
+        case "ConditionalExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ConditionalExpression,
+                test: this._createInternalSyntaxTree(node.test),
+                consequent: this._createInternalSyntaxTree(node.consequent),
+                alternate: this._createInternalSyntaxTree(node.alternate)
+            };
+            break;
+        case "ContinueStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ContinueStatement,
+                label: this._createInternalSyntaxTree(node.label)
+            };
+            break;
+        case "DoWhileStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.DoWhileStatement,
+                body: this._createInternalSyntaxTree(node.body),
+                test: this._createInternalSyntaxTree(node.test)
+            };
+            break;
+        case "DebuggerStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.DebuggerStatement
+            };
+            break;
+        case "EmptyStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.EmptyStatement
+            };
+            break;
+        case "ExpressionStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ExpressionStatement,
+                expression: this._createInternalSyntaxTree(node.expression)
+            };
+            break;
+        case "ForStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ForStatement,
+                init: this._createInternalSyntaxTree(node.init),
+                test: this._createInternalSyntaxTree(node.test),
+                update: this._createInternalSyntaxTree(node.update),
+                body: this._createInternalSyntaxTree(node.body)
+            };
+            break;
+        case "ForInStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ForInStatement,
+                left: this._createInternalSyntaxTree(node.left),
+                right: this._createInternalSyntaxTree(node.right),
+                body: this._createInternalSyntaxTree(node.body)
+            };
+            break;
+        case "ForOfStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ForOfStatement,
+                left: this._createInternalSyntaxTree(node.left),
+                right: this._createInternalSyntaxTree(node.right),
+                body: this._createInternalSyntaxTree(node.body)
+            };
+            break;
+        case "FunctionDeclaration":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.FunctionDeclaration,
+                id: this._createInternalSyntaxTree(node.id),
+                params: node.params.map(this._createInternalSyntaxTree, this),
+                defaults: node.defaults.map(this._createInternalSyntaxTree, this),
+                body: this._createInternalSyntaxTree(node.body),
+                generator: node.generator,
+                typeProfilingReturnDivot: node.range[0]
+            };
+            break;
+        case "FunctionExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.FunctionExpression,
+                id: this._createInternalSyntaxTree(node.id),
+                params: node.params.map(this._createInternalSyntaxTree, this),
+                defaults: node.defaults.map(this._createInternalSyntaxTree, this),
+                body: this._createInternalSyntaxTree(node.body),
+                generator: node.generator,
+                typeProfilingReturnDivot: node.range[0] // This may be overridden in the Property AST node.
+            };
+            break;
+        case "Identifier":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.Identifier,
+                name: node.name
+            };
+            break;
+        case "IfStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.IfStatement,
+                test: this._createInternalSyntaxTree(node.test),
+                consequent: this._createInternalSyntaxTree(node.consequent),
+                alternate: this._createInternalSyntaxTree(node.alternate)
+            };
+            break;
+        case "Literal":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.Literal,
+                value: node.value,
+                raw: node.raw
+            };
+            break;
+        case "LabeledStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.LabeledStatement,
+                label: this._createInternalSyntaxTree(node.label),
+                body: this._createInternalSyntaxTree(node.body)
+            };
+            break;
+        case "LogicalExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.LogicalExpression,
+                left: this._createInternalSyntaxTree(node.left),
+                right: this._createInternalSyntaxTree(node.right),
+                operator: node.operator
+            };
+            break;
+        case "MemberExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.MemberExpression,
+                object: this._createInternalSyntaxTree(node.object),
+                property: this._createInternalSyntaxTree(node.property),
+                computed: node.computed
+            };
+            break;
+        case "MetaProperty":
+            // i.e: new.target produces {meta: "new", property: "target"}
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.MetaProperty,
+                meta: node.meta,
+                property: node.property
+            };
+            break;
+        case "MethodDefinition":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.MethodDefinition,
+                key: this._createInternalSyntaxTree(node.key),
+                value: this._createInternalSyntaxTree(node.value),
+                computed: node.computed,
+                kind: node.kind,
+                static: node.static
+            };
+            result.value.typeProfilingReturnDivot = node.range[0]; // "g" in "get" or "s" in "set" or "[" in "['computed']" or "m" in "methodName".
+            break;
+        case "NewExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.NewExpression,
+                callee: this._createInternalSyntaxTree(node.callee),
+                arguments: node.arguments.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "ObjectExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ObjectExpression,
+                properties: node.properties.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "ObjectPattern":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ObjectPattern,
+                properties: node.properties.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "Program":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.Program,
+                sourceType: node.sourceType,
+                body: node.body.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "Property":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.Property,
+                key: this._createInternalSyntaxTree(node.key),
+                value: this._createInternalSyntaxTree(node.value),
+                kind: node.kind,
+                method: node.method,
+                computed: node.computed
+            };
+            if (result.kind === "get" || result.kind === "set" || result.method)
+                result.value.typeProfilingReturnDivot = node.range[0];  // "g" in "get" or "s" in "set" or "[" in "['computed']" method or "m" in "methodName".
+            break;
+        case "ReturnStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ReturnStatement,
+                argument: this._createInternalSyntaxTree(node.argument)
+            };
+            break;
+        case "SequenceExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.SequenceExpression,
+                expressions: node.expressions.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "SpreadElement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.SpreadElement,
+                argument: this._createInternalSyntaxTree(node.argument),
+            };
+            break;
+        case "Super":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.Super
+            };
+            break;
+        case "SwitchStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.SwitchStatement,
+                discriminant: this._createInternalSyntaxTree(node.discriminant),
+                cases: node.cases.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "SwitchCase":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.SwitchCase,
+                test: this._createInternalSyntaxTree(node.test),
+                consequent: node.consequent.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "TaggedTemplateExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.TaggedTemplateExpression,
+                tag: this._createInternalSyntaxTree(node.tag),
+                quasi: this._createInternalSyntaxTree(node.quasi)
+            };
+            break;
+        case "TemplateElement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.TemplateElement,
+                value: node.value,
+                tail: node.tail
+            };
+            break;
+        case "TemplateLiteral":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.TemplateLiteral,
+                quasis: node.quasis.map(this._createInternalSyntaxTree, this),
+                expressions: node.expressions.map(this._createInternalSyntaxTree, this)
+            };
+            break;
+        case "ThisExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ThisExpression
+            };
+            break;
+        case "ThrowStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.ThrowStatement,
+                argument: this._createInternalSyntaxTree(node.argument)
+            };
+            break;
+        case "TryStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.TryStatement,
+                block: this._createInternalSyntaxTree(node.block),
+                handler: this._createInternalSyntaxTree(node.handler),
+                finalizer: this._createInternalSyntaxTree(node.finalizer)
+            };
+            break;
+        case "UnaryExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.UnaryExpression,
+                operator: node.operator,
+                argument: this._createInternalSyntaxTree(node.argument)
+            };
+            break;
+        case "UpdateExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.UpdateExpression,
+                operator: node.operator,
+                prefix: node.prefix,
+                argument: this._createInternalSyntaxTree(node.argument)
+            };
+            break;
+        case "VariableDeclaration":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.VariableDeclaration,
+                declarations: node.declarations.map(this._createInternalSyntaxTree, this),
+                kind: node.kind
+            };
+            break;
+        case "VariableDeclarator":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.VariableDeclarator,
+                id: this._createInternalSyntaxTree(node.id),
+                init: this._createInternalSyntaxTree(node.init)
+            };
+            break;
+        case "WhileStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.WhileStatement,
+                test: this._createInternalSyntaxTree(node.test),
+                body: this._createInternalSyntaxTree(node.body)
+            };
+            break;
+        case "WithStatement":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.WithStatement,
+                object: this._createInternalSyntaxTree(node.object),
+                body: this._createInternalSyntaxTree(node.body)
+            };
+            break;
+        case "YieldExpression":
+            result = {
+                type: WebInspector.ScriptSyntaxTree.NodeType.YieldExpression,
+                argument: this._createInternalSyntaxTree(node.argument),
+                delegate: node.delegate
+            };
+            break;
+        default:
+            console.error("Unsupported Syntax Tree Node: " + node.type, node);
+            return null;
+        }
+
+        result.range = node.range;
+        // This is an object for which you can add fields to an AST node without worrying about polluting the syntax-related fields of the node.
+        result.attachments = {};
+
+        return result;
+    }
+};
+
+// This should be kept in sync with an enum in JavaSciptCore/runtime/TypeProfiler.h
+WebInspector.ScriptSyntaxTree.TypeProfilerSearchDescriptor = {
+    NormalExpression: 1,
+    FunctionReturn: 2
+};
+
+WebInspector.ScriptSyntaxTree.NodeType = {
+    ArrayExpression: Symbol("array-expression"),
+    ArrayPattern: Symbol("array-pattern"),
+    ArrowFunctionExpression: Symbol("arrow-function-expression"),
+    AssignmentExpression: Symbol("assignment-expression"),
+    AssignmentPattern: Symbol("assignment-pattern"),
+    BinaryExpression: Symbol("binary-expression"),
+    BlockStatement: Symbol("block-statement"),
+    BreakStatement: Symbol("break-statement"),
+    CallExpression: Symbol("call-expression"),
+    CatchClause: Symbol("catch-clause"),
+    ClassBody: Symbol("class-body"),
+    ClassDeclaration: Symbol("class-declaration"),
+    ClassExpression: Symbol("class-expression"),
+    ConditionalExpression: Symbol("conditional-expression"),
+    ContinueStatement: Symbol("continue-statement"),
+    DebuggerStatement: Symbol("debugger-statement"),
+    DoWhileStatement: Symbol("do-while-statement"),
+    EmptyStatement: Symbol("empty-statement"),
+    ExpressionStatement: Symbol("expression-statement"),
+    ForInStatement: Symbol("for-in-statement"),
+    ForOfStatement: Symbol("for-of-statement"),
+    ForStatement: Symbol("for-statement"),
+    FunctionDeclaration: Symbol("function-declaration"),
+    FunctionExpression: Symbol("function-expression"),
+    Identifier: Symbol("identifier"),
+    IfStatement: Symbol("if-statement"),
+    LabeledStatement: Symbol("labeled-statement"),
+    Literal: Symbol("literal"),
+    LogicalExpression: Symbol("logical-expression"),
+    MemberExpression: Symbol("member-expression"),
+    MetaProperty: Symbol("meta-property"),
+    MethodDefinition: Symbol("method-definition"),
+    NewExpression: Symbol("new-expression"),
+    ObjectExpression: Symbol("object-expression"),
+    ObjectPattern: Symbol("object-pattern"),
+    Program: Symbol("program"),
+    Property: Symbol("property"),
+    ReturnStatement: Symbol("return-statement"),
+    SequenceExpression: Symbol("sequence-expression"),
+    SpreadElement: Symbol("spread-element"),
+    Super: Symbol("super"),
+    SwitchCase: Symbol("switch-case"),
+    SwitchStatement: Symbol("switch-statement"),
+    TaggedTemplateExpression: Symbol("tagged-template-expression"),
+    TemplateElement: Symbol("template-element"),
+    TemplateLiteral: Symbol("template-literal"),
+    ThisExpression: Symbol("this-expression"),
+    ThrowStatement: Symbol("throw-statement"),
+    TryStatement: Symbol("try-statement"),
+    UnaryExpression: Symbol("unary-expression"),
+    UpdateExpression: Symbol("update-expression"),
+    VariableDeclaration: Symbol("variable-declaration"),
+    VariableDeclarator: Symbol("variable-declarator"),
+    WhileStatement: Symbol("while-statement"),
+    WithStatement: Symbol("with-statement"),
+    YieldExpression: Symbol("yield-expression"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/ScriptTimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/ScriptTimelineRecord.js
new file mode 100644
index 000000000..81ea7a7aa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/ScriptTimelineRecord.js
@@ -0,0 +1,418 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineRecord = class ScriptTimelineRecord extends WebInspector.TimelineRecord
+{
+    constructor(eventType, startTime, endTime, callFrames, sourceCodeLocation, details, profilePayload)
+    {
+        super(WebInspector.TimelineRecord.Type.Script, startTime, endTime, callFrames, sourceCodeLocation);
+
+        console.assert(eventType);
+
+        if (eventType in WebInspector.ScriptTimelineRecord.EventType)
+            eventType = WebInspector.ScriptTimelineRecord.EventType[eventType];
+
+        this._eventType = eventType;
+        this._details = details || "";
+        this._profilePayload = profilePayload || null;
+        this._profile = null;
+
+        // COMPATIBILITY(iOS 9): Before the ScriptProfilerAgent we did not have sample data. Return NaN to match old behavior.
+        if (!window.ScriptProfilerAgent)
+            this._callCountOrSamples = NaN;
+        else {
+            // NOTE: _callCountOrSamples is being treated as the number of samples.
+            this._callCountOrSamples = 0;
+        }
+    }
+
+    // Public
+
+    get eventType()
+    {
+        return this._eventType;
+    }
+
+    get details()
+    {
+        return this._details;
+    }
+
+    get profile()
+    {
+        this._initializeProfileFromPayload();
+        return this._profile;
+    }
+
+    get callCountOrSamples()
+    {
+        return this._callCountOrSamples;
+    }
+
+    isGarbageCollection()
+    {
+        return this._eventType === WebInspector.ScriptTimelineRecord.EventType.GarbageCollected;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        super.saveIdentityToCookie(cookie);
+
+        cookie[WebInspector.ScriptTimelineRecord.EventTypeCookieKey] = this._eventType;
+        cookie[WebInspector.ScriptTimelineRecord.DetailsCookieKey] = this._details;
+    }
+
+    get profilePayload()
+    {
+        return this._profilePayload;
+    }
+
+    set profilePayload(payload)
+    {
+        this._profilePayload = payload;
+    }
+
+    // Private
+
+    _initializeProfileFromPayload(payload)
+    {
+        if (this._profile || !this._profilePayload)
+            return;
+
+        var payload = this._profilePayload;
+        this._profilePayload = undefined;
+
+        console.assert(payload.rootNodes instanceof Array);
+
+        function profileNodeFromPayload(nodePayload)
+        {
+            console.assert("id" in nodePayload);
+
+            if (nodePayload.url) {
+                var sourceCode = WebInspector.frameResourceManager.resourceForURL(nodePayload.url);
+                if (!sourceCode)
+                    sourceCode = WebInspector.debuggerManager.scriptsForURL(nodePayload.url)[0];
+
+                // The lineNumber is 1-based, but we expect 0-based.
+                var lineNumber = nodePayload.lineNumber - 1;
+
+                var sourceCodeLocation = sourceCode ? sourceCode.createLazySourceCodeLocation(lineNumber, nodePayload.columnNumber) : null;
+            }
+
+            var isProgramCode = nodePayload.functionName === "(program)";
+            var isAnonymousFunction = nodePayload.functionName === "(anonymous function)";
+
+            var type = isProgramCode ? WebInspector.ProfileNode.Type.Program : WebInspector.ProfileNode.Type.Function;
+            var functionName = !isProgramCode && !isAnonymousFunction && nodePayload.functionName !== "(unknown)" ? nodePayload.functionName : null;
+
+            // COMPATIBILITY (iOS 8): Timeline.CPUProfileNodes used to include an array of complete
+            // call information instead of the aggregated "callInfo" data.
+            var calls = null;
+            if ("calls" in nodePayload) {
+                console.assert(nodePayload.calls instanceof Array);
+                calls = nodePayload.calls.map(profileNodeCallFromPayload);
+            }
+
+            return new WebInspector.ProfileNode(nodePayload.id, type, functionName, sourceCodeLocation, nodePayload.callInfo, calls, nodePayload.children);
+        }
+
+        function profileNodeCallFromPayload(nodeCallPayload)
+        {
+            console.assert("startTime" in nodeCallPayload);
+            console.assert("totalTime" in nodeCallPayload);
+
+            var startTime = WebInspector.timelineManager.computeElapsedTime(nodeCallPayload.startTime);
+
+            return new WebInspector.ProfileNodeCall(startTime, nodeCallPayload.totalTime);
+        }
+
+        var rootNodes = payload.rootNodes;
+
+        // Iterate over the node tree using a stack. Doing this recursively can easily cause a stack overflow.
+        // We traverse the profile in post-order and convert the payloads in place until we get back to the root.
+        var stack = [{parent: {children: rootNodes}, index: 0, root: true}];
+        while (stack.length) {
+            var entry = stack.lastValue;
+
+            if (entry.index < entry.parent.children.length) {
+                var childNodePayload = entry.parent.children[entry.index];
+                if (childNodePayload.children && childNodePayload.children.length)
+                    stack.push({parent: childNodePayload, index: 0});
+
+                ++entry.index;
+            } else {
+                if (!entry.root)
+                    entry.parent.children = entry.parent.children.map(profileNodeFromPayload);
+                else
+                    rootNodes = rootNodes.map(profileNodeFromPayload);
+
+                stack.pop();
+            }
+        }
+
+        // COMPATIBILITY (iOS 9): We only do this when we have ScriptProfilerAgent because before that we didn't have a Sampling Profiler.
+        if (window.ScriptProfilerAgent) {
+            for (let i = 0; i < rootNodes.length; i++)
+                this._callCountOrSamples += rootNodes[i].callInfo.callCount;
+        }
+
+        this._profile = new WebInspector.Profile(rootNodes);
+    }
+};
+
+WebInspector.ScriptTimelineRecord.EventType = {
+    ScriptEvaluated: "script-timeline-record-script-evaluated",
+    APIScriptEvaluated: "script-timeline-record-api-script-evaluated",
+    MicrotaskDispatched: "script-timeline-record-microtask-dispatched",
+    EventDispatched: "script-timeline-record-event-dispatched",
+    ProbeSampleRecorded: "script-timeline-record-probe-sample-recorded",
+    TimerFired: "script-timeline-record-timer-fired",
+    TimerInstalled: "script-timeline-record-timer-installed",
+    TimerRemoved: "script-timeline-record-timer-removed",
+    AnimationFrameFired: "script-timeline-record-animation-frame-fired",
+    AnimationFrameRequested: "script-timeline-record-animation-frame-requested",
+    AnimationFrameCanceled: "script-timeline-record-animation-frame-canceled",
+    ConsoleProfileRecorded: "script-timeline-record-console-profile-recorded",
+    GarbageCollected: "script-timeline-record-garbage-collected",
+};
+
+WebInspector.ScriptTimelineRecord.EventType.displayName = function(eventType, details, includeDetailsInMainTitle)
+{
+    if (details && !WebInspector.ScriptTimelineRecord._eventDisplayNames) {
+        // These display names are not localized because they closely represent
+        // the real API name, just with word spaces and Title Case.
+
+        var nameMap = new Map;
+        nameMap.set("DOMActivate", "DOM Activate");
+        nameMap.set("DOMCharacterDataModified", "DOM Character Data Modified");
+        nameMap.set("DOMContentLoaded", "DOM Content Loaded");
+        nameMap.set("DOMFocusIn", "DOM Focus In");
+        nameMap.set("DOMFocusOut", "DOM Focus Out");
+        nameMap.set("DOMNodeInserted", "DOM Node Inserted");
+        nameMap.set("DOMNodeInsertedIntoDocument", "DOM Node Inserted Into Document");
+        nameMap.set("DOMNodeRemoved", "DOM Node Removed");
+        nameMap.set("DOMNodeRemovedFromDocument", "DOM Node Removed From Document");
+        nameMap.set("DOMSubtreeModified", "DOM Sub-Tree Modified");
+        nameMap.set("addsourcebuffer", "Add Source Buffer");
+        nameMap.set("addstream", "Add Stream");
+        nameMap.set("addtrack", "Add Track");
+        nameMap.set("animationend", "Animation End");
+        nameMap.set("animationiteration", "Animation Iteration");
+        nameMap.set("animationstart", "Animation Start");
+        nameMap.set("audioend", "Audio End");
+        nameMap.set("audioprocess", "Audio Process");
+        nameMap.set("audiostart", "Audio Start");
+        nameMap.set("beforecopy", "Before Copy");
+        nameMap.set("beforecut", "Before Cut");
+        nameMap.set("beforeload", "Before Load");
+        nameMap.set("beforepaste", "Before Paste");
+        nameMap.set("beforeunload", "Before Unload");
+        nameMap.set("canplay", "Can Play");
+        nameMap.set("canplaythrough", "Can Play Through");
+        nameMap.set("chargingchange", "Charging Change");
+        nameMap.set("chargingtimechange", "Charging Time Change");
+        nameMap.set("compositionend", "Composition End");
+        nameMap.set("compositionstart", "Composition Start");
+        nameMap.set("compositionupdate", "Composition Update");
+        nameMap.set("contextmenu", "Context Menu");
+        nameMap.set("cuechange", "Cue Change");
+        nameMap.set("datachannel", "Data Channel");
+        nameMap.set("dblclick", "Double Click");
+        nameMap.set("devicemotion", "Device Motion");
+        nameMap.set("deviceorientation", "Device Orientation");
+        nameMap.set("dischargingtimechange", "Discharging Time Change");
+        nameMap.set("dragend", "Drag End");
+        nameMap.set("dragenter", "Drag Enter");
+        nameMap.set("dragleave", "Drag Leave");
+        nameMap.set("dragover", "Drag Over");
+        nameMap.set("dragstart", "Drag Start");
+        nameMap.set("durationchange", "Duration Change");
+        nameMap.set("focusin", "Focus In");
+        nameMap.set("focusout", "Focus Out");
+        nameMap.set("gesturechange", "Gesture Change");
+        nameMap.set("gestureend", "Gesture End");
+        nameMap.set("gesturescrollend", "Gesture Scroll End");
+        nameMap.set("gesturescrollstart", "Gesture Scroll Start");
+        nameMap.set("gesturescrollupdate", "Gesture Scroll Update");
+        nameMap.set("gesturestart", "Gesture Start");
+        nameMap.set("gesturetap", "Gesture Tap");
+        nameMap.set("gesturetapdown", "Gesture Tap Down");
+        nameMap.set("hashchange", "Hash Change");
+        nameMap.set("icecandidate", "ICE Candidate");
+        nameMap.set("iceconnectionstatechange", "ICE Connection State Change");
+        nameMap.set("keydown", "Key Down");
+        nameMap.set("keypress", "Key Press");
+        nameMap.set("keyup", "Key Up");
+        nameMap.set("levelchange", "Level Change");
+        nameMap.set("loadeddata", "Loaded Data");
+        nameMap.set("loadedmetadata", "Loaded Metadata");
+        nameMap.set("loadend", "Load End");
+        nameMap.set("loadingdone", "Loading Done");
+        nameMap.set("loadstart", "Load Start");
+        nameMap.set("mousedown", "Mouse Down");
+        nameMap.set("mouseenter", "Mouse Enter");
+        nameMap.set("mouseleave", "Mouse Leave");
+        nameMap.set("mousemove", "Mouse Move");
+        nameMap.set("mouseout", "Mouse Out");
+        nameMap.set("mouseover", "Mouse Over");
+        nameMap.set("mouseup", "Mouse Up");
+        nameMap.set("mousewheel", "Mouse Wheel");
+        nameMap.set("negotiationneeded", "Negotiation Needed");
+        nameMap.set("nomatch", "No Match");
+        nameMap.set("noupdate", "No Update");
+        nameMap.set("orientationchange", "Orientation Change");
+        nameMap.set("overflowchanged", "Overflow Changed");
+        nameMap.set("pagehide", "Page Hide");
+        nameMap.set("pageshow", "Page Show");
+        nameMap.set("popstate", "Pop State");
+        nameMap.set("ratechange", "Rate Change");
+        nameMap.set("readystatechange", "Ready State Change");
+        nameMap.set("removesourcebuffer", "Remove Source Buffer");
+        nameMap.set("removestream", "Remove Stream");
+        nameMap.set("removetrack", "Remove Track");
+        nameMap.set("resize", "Resize");
+        nameMap.set("securitypolicyviolation", "Security Policy Violation");
+        nameMap.set("selectionchange", "Selection Change");
+        nameMap.set("selectstart", "Select Start");
+        nameMap.set("signalingstatechange", "Signaling State Change");
+        nameMap.set("soundend", "Sound End");
+        nameMap.set("soundstart", "Sound Start");
+        nameMap.set("sourceclose", "Source Close");
+        nameMap.set("sourceended", "Source Ended");
+        nameMap.set("sourceopen", "Source Open");
+        nameMap.set("speechend", "Speech End");
+        nameMap.set("speechstart", "Speech Start");
+        nameMap.set("textInput", "Text Input");
+        nameMap.set("timeupdate", "Time Update");
+        nameMap.set("tonechange", "Tone Change");
+        nameMap.set("touchcancel", "Touch Cancel");
+        nameMap.set("touchend", "Touch End");
+        nameMap.set("touchmove", "Touch Move");
+        nameMap.set("touchstart", "Touch Start");
+        nameMap.set("transitionend", "Transition End");
+        nameMap.set("updateend", "Update End");
+        nameMap.set("updateready", "Update Ready");
+        nameMap.set("updatestart", "Update Start");
+        nameMap.set("upgradeneeded", "Upgrade Needed");
+        nameMap.set("versionchange", "Version Change");
+        nameMap.set("visibilitychange", "Visibility Change");
+        nameMap.set("volumechange", "Volume Change");
+        nameMap.set("webglcontextcreationerror", "WebGL Context Creation Error");
+        nameMap.set("webglcontextlost", "WebGL Context Lost");
+        nameMap.set("webglcontextrestored", "WebGL Context Restored");
+        nameMap.set("webkitAnimationEnd", "Animation End");
+        nameMap.set("webkitAnimationIteration", "Animation Iteration");
+        nameMap.set("webkitAnimationStart", "Animation Start");
+        nameMap.set("webkitBeforeTextInserted", "Before Text Inserted");
+        nameMap.set("webkitEditableContentChanged", "Editable Content Changed");
+        nameMap.set("webkitTransitionEnd", "Transition End");
+        nameMap.set("webkitaddsourcebuffer", "Add Source Buffer");
+        nameMap.set("webkitbeginfullscreen", "Begin Fullscreen");
+        nameMap.set("webkitcurrentplaybacktargetiswirelesschanged", "Current Playback Target Is Wireless Changed");
+        nameMap.set("webkitdeviceproximity", "Device Proximity");
+        nameMap.set("webkitendfullscreen", "End Fullscreen");
+        nameMap.set("webkitfullscreenchange", "Fullscreen Change");
+        nameMap.set("webkitfullscreenerror", "Fullscreen Error");
+        nameMap.set("webkitkeyadded", "Key Added");
+        nameMap.set("webkitkeyerror", "Key Error");
+        nameMap.set("webkitkeymessage", "Key Message");
+        nameMap.set("webkitneedkey", "Need Key");
+        nameMap.set("webkitnetworkinfochange", "Network Info Change");
+        nameMap.set("webkitplaybacktargetavailabilitychanged", "Playback Target Availability Changed");
+        nameMap.set("webkitpointerlockchange", "Pointer Lock Change");
+        nameMap.set("webkitpointerlockerror", "Pointer Lock Error");
+        nameMap.set("webkitregionlayoutupdate", "Region Layout Update");    // COMPATIBILITY (iOS 7): regionLayoutUpdated was removed and replaced by regionOversetChanged.
+        nameMap.set("webkitregionoversetchange", "Region Overset Change");
+        nameMap.set("webkitremovesourcebuffer", "Remove Source Buffer");
+        nameMap.set("webkitresourcetimingbufferfull", "Resource Timing Buffer Full");
+        nameMap.set("webkitsourceclose", "Source Close");
+        nameMap.set("webkitsourceended", "Source Ended");
+        nameMap.set("webkitsourceopen", "Source Open");
+        nameMap.set("webkitspeechchange", "Speech Change");
+        nameMap.set("writeend", "Write End");
+        nameMap.set("writestart", "Write Start");
+
+        WebInspector.ScriptTimelineRecord._eventDisplayNames = nameMap;
+    }
+
+    switch(eventType) {
+    case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
+    case WebInspector.ScriptTimelineRecord.EventType.APIScriptEvaluated:
+        return WebInspector.UIString("Script Evaluated");
+    case WebInspector.ScriptTimelineRecord.EventType.MicrotaskDispatched:
+        return WebInspector.UIString("Microtask Dispatched");
+    case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
+        if (details && (details instanceof String || typeof details === "string")) {
+            var eventDisplayName = WebInspector.ScriptTimelineRecord._eventDisplayNames.get(details) || details.capitalize();
+            return WebInspector.UIString("%s Event Dispatched").format(eventDisplayName);
+        }
+        return WebInspector.UIString("Event Dispatched");
+    case WebInspector.ScriptTimelineRecord.EventType.ProbeSampleRecorded:
+        return WebInspector.UIString("Probe Sample Recorded");
+    case WebInspector.ScriptTimelineRecord.EventType.ConsoleProfileRecorded:
+        if (details && (details instanceof String || typeof details === "string"))
+            return WebInspector.UIString("“%s” Profile Recorded").format(details);
+        return WebInspector.UIString("Console Profile Recorded");
+    case WebInspector.ScriptTimelineRecord.EventType.GarbageCollected:
+        console.assert(details);
+        if (details && (details instanceof WebInspector.GarbageCollection) && includeDetailsInMainTitle) {
+            switch (details.type) {
+            case WebInspector.GarbageCollection.Type.Partial:
+                return WebInspector.UIString("Partial Garbage Collection");
+            case WebInspector.GarbageCollection.Type.Full:
+                return WebInspector.UIString("Full Garbage Collection");
+            }
+        }
+        return WebInspector.UIString("Garbage Collection");
+    case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
+        if (details && includeDetailsInMainTitle)
+            return WebInspector.UIString("Timer %s Fired").format(details);
+        return WebInspector.UIString("Timer Fired");
+    case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
+        if (details && includeDetailsInMainTitle)
+            return WebInspector.UIString("Timer %s Installed").format(details.timerId);
+        return WebInspector.UIString("Timer Installed");
+    case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
+        if (details && includeDetailsInMainTitle)
+            return WebInspector.UIString("Timer %s Removed").format(details);
+        return WebInspector.UIString("Timer Removed");
+    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
+        if (details && includeDetailsInMainTitle)
+            return WebInspector.UIString("Animation Frame %s Fired").format(details);
+        return WebInspector.UIString("Animation Frame Fired");
+    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
+        if (details && includeDetailsInMainTitle)
+            return WebInspector.UIString("Animation Frame %s Requested").format(details);
+        return WebInspector.UIString("Animation Frame Requested");
+    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
+        if (details && includeDetailsInMainTitle)
+            return WebInspector.UIString("Animation Frame %s Canceled").format(details);
+        return WebInspector.UIString("Animation Frame Canceled");
+    }
+};
+
+WebInspector.ScriptTimelineRecord.TypeIdentifier = "script-timeline-record";
+WebInspector.ScriptTimelineRecord.EventTypeCookieKey = "script-timeline-record-event-type";
+WebInspector.ScriptTimelineRecord.DetailsCookieKey = "script-timeline-record-details";
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceCode.js b/Source/WebInspectorUI/UserInterface/Models/SourceCode.js
new file mode 100644
index 000000000..e62423817
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCode.js
@@ -0,0 +1,212 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCode = class SourceCode extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._originalRevision = new WebInspector.SourceCodeRevision(this, null, false);
+        this._currentRevision = this._originalRevision;
+
+        this._sourceMaps = null;
+        this._formatterSourceMap = null;
+        this._requestContentPromise = null;
+    }
+
+    // Public
+
+    get displayName()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+        return "";
+    }
+
+    get originalRevision()
+    {
+        return this._originalRevision;
+    }
+
+    get currentRevision()
+    {
+        return this._currentRevision;
+    }
+
+    set currentRevision(revision)
+    {
+        console.assert(revision instanceof WebInspector.SourceCodeRevision);
+        if (!(revision instanceof WebInspector.SourceCodeRevision))
+            return;
+
+        console.assert(revision.sourceCode === this);
+        if (revision.sourceCode !== this)
+            return;
+
+        this._currentRevision = revision;
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.ContentDidChange);
+    }
+
+    get content()
+    {
+        return this._currentRevision.content;
+    }
+
+    get sourceMaps()
+    {
+        return this._sourceMaps || [];
+    }
+
+    addSourceMap(sourceMap)
+    {
+        console.assert(sourceMap instanceof WebInspector.SourceMap);
+
+        if (!this._sourceMaps)
+            this._sourceMaps = [];
+
+        this._sourceMaps.push(sourceMap);
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.SourceMapAdded);
+    }
+
+    get formatterSourceMap()
+    {
+        return this._formatterSourceMap;
+    }
+
+    set formatterSourceMap(formatterSourceMap)
+    {
+        console.assert(this._formatterSourceMap === null || formatterSourceMap === null);
+        console.assert(formatterSourceMap === null || formatterSourceMap instanceof WebInspector.FormatterSourceMap);
+
+        this._formatterSourceMap = formatterSourceMap;
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.FormatterDidChange);
+    }
+
+    requestContent()
+    {
+        this._requestContentPromise = this._requestContentPromise || this.requestContentFromBackend().then(this._processContent.bind(this));
+
+        return this._requestContentPromise;
+    }
+
+    createSourceCodeLocation(lineNumber, columnNumber)
+    {
+        return new WebInspector.SourceCodeLocation(this, lineNumber, columnNumber);
+    }
+
+    createLazySourceCodeLocation(lineNumber, columnNumber)
+    {
+        return new WebInspector.LazySourceCodeLocation(this, lineNumber, columnNumber);
+    }
+
+    createSourceCodeTextRange(textRange)
+    {
+        return new WebInspector.SourceCodeTextRange(this, textRange);
+    }
+
+    // Protected
+
+    revisionContentDidChange(revision)
+    {
+        if (this._ignoreRevisionContentDidChangeEvent)
+            return;
+
+        if (revision !== this._currentRevision)
+            return;
+
+        this.handleCurrentRevisionContentChange();
+
+        this.dispatchEventToListeners(WebInspector.SourceCode.Event.ContentDidChange);
+    }
+
+    handleCurrentRevisionContentChange()
+    {
+        // Implemented by subclasses if needed.
+    }
+
+    get revisionForRequestedContent()
+    {
+        // Implemented by subclasses if needed.
+        return this._originalRevision;
+    }
+
+    markContentAsStale()
+    {
+        this._requestContentPromise = null;
+        this._contentReceived = false;
+    }
+
+    requestContentFromBackend()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+        return Promise.reject(new Error("Needs to be implemented by a subclass."));
+    }
+
+    get mimeType()
+    {
+        // Implemented by subclasses.
+        console.error("Needs to be implemented by a subclass.");
+    }
+
+    // Private
+
+    _processContent(parameters)
+    {
+        // Different backend APIs return one of `content, `body`, `text`, or `scriptSource`.
+        var content = parameters.content || parameters.body || parameters.text || parameters.scriptSource;
+        var error = parameters.error;
+        if (parameters.base64Encoded)
+            content = decodeBase64ToBlob(content, this.mimeType);
+
+        var revision = this.revisionForRequestedContent;
+
+        this._ignoreRevisionContentDidChangeEvent = true;
+        revision.content = content || null;
+        this._ignoreRevisionContentDidChangeEvent = false;
+
+        // FIXME: Returning the content in this promise is misleading. It may not be current content
+        // now, and it may become out-dated later on. We should drop content from this promise
+        // and require clients to ask for the current contents from the sourceCode in the result.
+
+        return Promise.resolve({
+            error,
+            sourceCode: this,
+            content,
+        });
+    }
+};
+
+WebInspector.SourceCode.Event = {
+    ContentDidChange: "source-code-content-did-change",
+    SourceMapAdded: "source-code-source-map-added",
+    FormatterDidChange: "source-code-formatter-did-change",
+    LoadingDidFinish: "source-code-loading-did-finish",
+    LoadingDidFail: "source-code-loading-did-fail"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceCodeLocation.js b/Source/WebInspectorUI/UserInterface/Models/SourceCodeLocation.js
new file mode 100644
index 000000000..ebc038690
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeLocation.js
@@ -0,0 +1,462 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeLocation = class SourceCodeLocation extends WebInspector.Object
+{
+    constructor(sourceCode, lineNumber, columnNumber)
+    {
+        super();
+
+        console.assert(sourceCode === null || sourceCode instanceof WebInspector.SourceCode);
+        console.assert(!(sourceCode instanceof WebInspector.SourceMapResource));
+        console.assert(typeof lineNumber === "number" && !isNaN(lineNumber) && lineNumber >= 0);
+        console.assert(typeof columnNumber === "number" && !isNaN(columnNumber) && columnNumber >= 0);
+
+        this._sourceCode = sourceCode || null;
+        this._lineNumber = lineNumber;
+        this._columnNumber = columnNumber;
+        this._resolveFormattedLocation();
+
+        if (this._sourceCode) {
+            this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+            this._sourceCode.addEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
+        }
+
+        this._resetMappedLocation();
+    }
+
+    // Public
+
+    isEqual(other)
+    {
+        if (!other)
+            return false;
+        return this._sourceCode === other._sourceCode && this._lineNumber === other._lineNumber && this._columnNumber === other._columnNumber;
+    }
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    }
+
+    set sourceCode(sourceCode)
+    {
+        this.setSourceCode(sourceCode);
+    }
+
+    // Raw line and column in the original source code.
+
+    get lineNumber()
+    {
+        return this._lineNumber;
+    }
+
+    get columnNumber()
+    {
+        return this._columnNumber;
+    }
+
+    position()
+    {
+        return new WebInspector.SourceCodePosition(this.lineNumber, this.columnNumber);
+    }
+
+    // Formatted line and column if the original source code is pretty printed.
+    // This is the same as the raw location if there is no formatter.
+
+    get formattedLineNumber()
+    {
+        return this._formattedLineNumber;
+    }
+
+    get formattedColumnNumber()
+    {
+        return this._formattedColumnNumber;
+    }
+
+    formattedPosition()
+    {
+        return new WebInspector.SourceCodePosition(this.formattedLineNumber, this.formattedColumnNumber);
+    }
+
+    // Display line and column:
+    //   - Mapped line and column if the original source code has a source map.
+    //   - Otherwise this is the formatted / raw line and column.
+
+    get displaySourceCode()
+    {
+        this.resolveMappedLocation();
+        return this._mappedResource || this._sourceCode;
+    }
+
+    get displayLineNumber()
+    {
+        this.resolveMappedLocation();
+        return isNaN(this._mappedLineNumber) ? this._formattedLineNumber : this._mappedLineNumber;
+    }
+
+    get displayColumnNumber()
+    {
+        this.resolveMappedLocation();
+        return isNaN(this._mappedColumnNumber) ? this._formattedColumnNumber : this._mappedColumnNumber;
+    }
+
+    displayPosition()
+    {
+        return new WebInspector.SourceCodePosition(this.displayLineNumber, this.displayColumnNumber);
+    }
+
+    // User presentable location strings: "file:lineNumber:columnNumber".
+
+    originalLocationString(columnStyle, nameStyle, prefix)
+    {
+        return this._locationString(this.sourceCode, this.lineNumber, this.columnNumber, columnStyle, nameStyle, prefix);
+    }
+
+    formattedLocationString(columnStyle, nameStyle, prefix)
+    {
+        return this._locationString(this.sourceCode, this.formattedLineNumber, this.formattedColumn, columnStyle, nameStyle, prefix);
+    }
+
+    displayLocationString(columnStyle, nameStyle, prefix)
+    {
+        return this._locationString(this.displaySourceCode, this.displayLineNumber, this.displayColumnNumber, columnStyle, nameStyle, prefix);
+    }
+
+    tooltipString()
+    {
+        if (!this.hasDifferentDisplayLocation())
+            return this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, WebInspector.SourceCodeLocation.NameStyle.Full);
+
+        var tooltip = WebInspector.UIString("Located at %s").format(this.displayLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, WebInspector.SourceCodeLocation.NameStyle.Full));
+        tooltip += "\n" + WebInspector.UIString("Originally %s").format(this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, WebInspector.SourceCodeLocation.NameStyle.Full));
+        return tooltip;
+    }
+
+    hasMappedLocation()
+    {
+        this.resolveMappedLocation();
+        return this._mappedResource !== null;
+    }
+
+    hasFormattedLocation()
+    {
+        return this._formattedLineNumber !== this._lineNumber || this._formattedColumnNumber !== this._columnNumber;
+    }
+
+    hasDifferentDisplayLocation()
+    {
+       return this.hasMappedLocation() || this.hasFormattedLocation();
+    }
+
+    update(sourceCode, lineNumber, columnNumber)
+    {
+        console.assert(sourceCode === this._sourceCode || (this._mappedResource && sourceCode === this._mappedResource));
+        console.assert(typeof lineNumber === "number" && !isNaN(lineNumber) && lineNumber >= 0);
+        console.assert(typeof columnNumber === "number" && !isNaN(columnNumber) && columnNumber >= 0);
+
+        if (sourceCode === this._sourceCode && lineNumber === this._lineNumber && columnNumber === this._columnNumber)
+            return;
+        if (this._mappedResource && sourceCode === this._mappedResource && lineNumber === this._mappedLineNumber && columnNumber === this._mappedColumnNumber)
+            return;
+
+        var newSourceCodeLocation = sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
+        console.assert(newSourceCodeLocation.sourceCode === this._sourceCode);
+
+        this._makeChangeAndDispatchChangeEventIfNeeded(function() {
+            this._lineNumber = newSourceCodeLocation._lineNumber;
+            this._columnNumber = newSourceCodeLocation._columnNumber;
+            if (newSourceCodeLocation._mappedLocationIsResolved) {
+                this._mappedLocationIsResolved = true;
+                this._mappedResource = newSourceCodeLocation._mappedResource;
+                this._mappedLineNumber = newSourceCodeLocation._mappedLineNumber;
+                this._mappedColumnNumber = newSourceCodeLocation._mappedColumnNumber;
+            }
+        });
+    }
+
+    populateLiveDisplayLocationTooltip(element, prefix)
+    {
+        prefix = prefix || "";
+
+        element.title = prefix + this.tooltipString();
+
+        this.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, function(event) {
+            if (this.sourceCode)
+                element.title = prefix + this.tooltipString();
+        }, this);
+    }
+
+    populateLiveDisplayLocationString(element, propertyName, columnStyle, nameStyle, prefix)
+    {
+        var currentDisplay;
+
+        function updateDisplayString(showAlternativeLocation, forceUpdate)
+        {
+            if (!forceUpdate && currentDisplay === showAlternativeLocation)
+                return;
+
+            currentDisplay = showAlternativeLocation;
+
+            if (!showAlternativeLocation) {
+                element[propertyName] = this.displayLocationString(columnStyle, nameStyle, prefix);
+                element.classList.toggle(WebInspector.SourceCodeLocation.DisplayLocationClassName, this.hasDifferentDisplayLocation());
+            } else if (this.hasDifferentDisplayLocation()) {
+                element[propertyName] = this.originalLocationString(columnStyle, nameStyle, prefix);
+                element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
+            }
+        }
+
+        function mouseOverOrMove(event)
+        {
+            updateDisplayString.call(this, event.metaKey && !event.altKey && !event.shiftKey);
+        }
+
+        updateDisplayString.call(this, false);
+
+        this.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, function(event) {
+            if (this.sourceCode)
+                updateDisplayString.call(this, currentDisplay, true);
+        }, this);
+
+        var boundMouseOverOrMove = mouseOverOrMove.bind(this);
+        element.addEventListener("mouseover", boundMouseOverOrMove);
+        element.addEventListener("mousemove", boundMouseOverOrMove);
+
+        element.addEventListener("mouseout", function(event) {
+            updateDisplayString.call(this, false);
+        }.bind(this));
+    }
+
+    // Protected
+
+    setSourceCode(sourceCode)
+    {
+        console.assert((this._sourceCode === null && sourceCode instanceof WebInspector.SourceCode) || (this._sourceCode instanceof WebInspector.SourceCode && sourceCode === null));
+
+        if (sourceCode === this._sourceCode)
+            return;
+
+        this._makeChangeAndDispatchChangeEventIfNeeded(function() {
+            if (this._sourceCode) {
+                this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+                this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
+            }
+
+            this._sourceCode = sourceCode;
+
+            if (this._sourceCode) {
+                this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+                this._sourceCode.addEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
+            }
+        });
+    }
+
+    resolveMappedLocation()
+    {
+        if (this._mappedLocationIsResolved)
+            return;
+
+        console.assert(this._mappedResource === null);
+        console.assert(isNaN(this._mappedLineNumber));
+        console.assert(isNaN(this._mappedColumnNumber));
+
+        this._mappedLocationIsResolved = true;
+
+        if (!this._sourceCode)
+            return;
+
+        var sourceMaps = this._sourceCode.sourceMaps;
+        if (!sourceMaps.length)
+            return;
+
+        for (var i = 0; i < sourceMaps.length; ++i) {
+            var sourceMap = sourceMaps[i];
+            var entry = sourceMap.findEntry(this._lineNumber, this._columnNumber);
+            if (!entry || entry.length === 2)
+                continue;
+            console.assert(entry.length === 5);
+            var url = entry[2];
+            var sourceMapResource = sourceMap.resourceForURL(url);
+            if (!sourceMapResource)
+                return;
+            this._mappedResource = sourceMapResource;
+            this._mappedLineNumber = entry[3];
+            this._mappedColumnNumber = entry[4];
+            return;
+        }
+    }
+
+    // Private
+
+    _locationString(sourceCode, lineNumber, columnNumber, columnStyle, nameStyle, prefix)
+    {
+        console.assert(sourceCode);
+        if (!sourceCode)
+            return "";
+
+        columnStyle = columnStyle || WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge;
+        nameStyle = nameStyle || WebInspector.SourceCodeLocation.NameStyle.Short;
+        prefix = prefix || "";
+
+        var lineString = lineNumber + 1; // The user visible line number is 1-based.
+        if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.Shown && columnNumber > 0)
+            lineString += ":" + (columnNumber + 1); // The user visible column number is 1-based.
+        else if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge && columnNumber > WebInspector.SourceCodeLocation.LargeColumnNumber)
+            lineString += ":" + (columnNumber + 1); // The user visible column number is 1-based.
+
+        switch (nameStyle) {
+        case WebInspector.SourceCodeLocation.NameStyle.None:
+            return prefix + lineString;
+
+        case WebInspector.SourceCodeLocation.NameStyle.Short:
+        case WebInspector.SourceCodeLocation.NameStyle.Full:
+            const displayURL = sourceCode.displayURL;
+            const lineSuffix = displayURL ? ":" + lineString : WebInspector.UIString(" (line %s)").format(lineString);
+            return prefix + (nameStyle === WebInspector.SourceCodeLocation.NameStyle.Full && displayURL ? displayURL : sourceCode.displayName) + lineSuffix;
+
+        default:
+            console.error("Unknown nameStyle: " + nameStyle);
+            return prefix + lineString;
+        }
+    }
+
+    _resetMappedLocation()
+    {
+        this._mappedLocationIsResolved = false;
+        this._mappedResource = null;
+        this._mappedLineNumber = NaN;
+        this._mappedColumnNumber = NaN;
+    }
+
+    _setMappedLocation(mappedResource, mappedLineNumber, mappedColumnNumber)
+    {
+        // Called by SourceMapResource when it creates a SourceCodeLocation and already knows the resolved location.
+        this._mappedLocationIsResolved = true;
+        this._mappedResource = mappedResource;
+        this._mappedLineNumber = mappedLineNumber;
+        this._mappedColumnNumber = mappedColumnNumber;
+    }
+
+    _resolveFormattedLocation()
+    {
+        if (this._sourceCode && this._sourceCode.formatterSourceMap) {
+            var formattedLocation = this._sourceCode.formatterSourceMap.originalToFormatted(this._lineNumber, this._columnNumber);
+            this._formattedLineNumber = formattedLocation.lineNumber;
+            this._formattedColumnNumber = formattedLocation.columnNumber;
+        } else {
+            this._formattedLineNumber = this._lineNumber;
+            this._formattedColumnNumber = this._columnNumber;
+        }
+    }
+
+    _makeChangeAndDispatchChangeEventIfNeeded(changeFunction)
+    {
+        var oldSourceCode = this._sourceCode;
+        var oldLineNumber = this._lineNumber;
+        var oldColumnNumber = this._columnNumber;
+
+        var oldFormattedLineNumber = this._formattedLineNumber;
+        var oldFormattedColumnNumber = this._formattedColumnNumber;
+
+        var oldDisplaySourceCode = this.displaySourceCode;
+        var oldDisplayLineNumber = this.displayLineNumber;
+        var oldDisplayColumnNumber = this.displayColumnNumber;
+
+        this._resetMappedLocation();
+
+        if (changeFunction)
+            changeFunction.call(this);
+
+        this.resolveMappedLocation();
+        this._resolveFormattedLocation();
+
+        // If the display source code is non-null then the addresses are not NaN and can be compared.
+        var displayLocationChanged = false;
+        var newDisplaySourceCode = this.displaySourceCode;
+        if (oldDisplaySourceCode !== newDisplaySourceCode)
+            displayLocationChanged = true;
+        else if (newDisplaySourceCode && (oldDisplayLineNumber !== this.displayLineNumber || oldDisplayColumnNumber !== this.displayColumnNumber))
+            displayLocationChanged = true;
+
+        var anyLocationChanged = false;
+        if (displayLocationChanged)
+            anyLocationChanged = true;
+        else if (oldSourceCode !== this._sourceCode)
+            anyLocationChanged = true;
+        else if (this._sourceCode && (oldLineNumber !== this._lineNumber || oldColumnNumber !== this._columnNumber))
+            anyLocationChanged = true;
+        else if (this._sourceCode && (oldFormattedLineNumber !== this._formattedLineNumber || oldFormattedColumnNumber !== this._formattedColumnNumber))
+            anyLocationChanged = true;
+
+        if (displayLocationChanged || anyLocationChanged) {
+            var oldData = {
+                oldSourceCode,
+                oldLineNumber,
+                oldColumnNumber,
+                oldFormattedLineNumber,
+                oldFormattedColumnNumber,
+                oldDisplaySourceCode,
+                oldDisplayLineNumber,
+                oldDisplayColumnNumber
+            };
+            if (displayLocationChanged)
+                this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, oldData);
+            if (anyLocationChanged)
+                this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.LocationChanged, oldData);
+        }
+    }
+
+    _sourceCodeSourceMapAdded()
+    {
+        this._makeChangeAndDispatchChangeEventIfNeeded(null);
+    }
+
+    _sourceCodeFormatterDidChange()
+    {
+        this._makeChangeAndDispatchChangeEventIfNeeded(null);
+    }
+};
+
+WebInspector.SourceCodeLocation.DisplayLocationClassName = "display-location";
+
+WebInspector.SourceCodeLocation.LargeColumnNumber = 80;
+
+WebInspector.SourceCodeLocation.NameStyle = {
+    None: "none", // File name not included.
+    Short: "short", // Only the file name.
+    Full: "full" // Full URL is used.
+};
+
+WebInspector.SourceCodeLocation.ColumnStyle = {
+    Hidden: "hidden",             // column numbers are not included.
+    OnlyIfLarge: "only-if-large", // column numbers greater than 80 are shown.
+    Shown: "shown"                // non-zero column numbers are shown.
+};
+
+WebInspector.SourceCodeLocation.Event = {
+    LocationChanged: "source-code-location-location-changed",
+    DisplayLocationChanged: "source-code-location-display-location-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceCodePosition.js b/Source/WebInspectorUI/UserInterface/Models/SourceCodePosition.js
new file mode 100644
index 000000000..ffba6be32
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodePosition.js
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodePosition = class SourceCodePosition extends WebInspector.Object
+{
+    constructor(lineNumber, columNumber)
+    {
+        super();
+
+        this._lineNumber = lineNumber || 0;
+        this._columnNumber = columNumber || 0;
+    }
+
+    // Public
+
+    get lineNumber()
+    {
+        return this._lineNumber;
+    }
+
+    get columnNumber()
+    {
+        return this._columnNumber;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceCodeRevision.js b/Source/WebInspectorUI/UserInterface/Models/SourceCodeRevision.js
new file mode 100644
index 000000000..b955493ad
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeRevision.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeRevision = class SourceCodeRevision extends WebInspector.Revision
+{
+    constructor(sourceCode, content)
+    {
+        super();
+
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+        this._sourceCode = sourceCode;
+        this._content = content || "";
+    }
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    }
+
+    get content()
+    {
+        return this._content;
+    }
+
+    set content(content)
+    {
+        content = content || "";
+
+        if (this._content === content)
+            return;
+
+        this._content = content;
+
+        this._sourceCode.revisionContentDidChange(this);
+    }
+
+    apply()
+    {
+        this._sourceCode.currentRevision = this;
+    }
+
+    revert()
+    {
+        this._sourceCode.currentRevision = this._sourceCode.originalRevision;
+    }
+
+    copy()
+    {
+        return new WebInspector.SourceCodeRevision(this._sourceCode, this._content);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js b/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js
new file mode 100644
index 000000000..2c4fa8001
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeSearchMatchObject.js
@@ -0,0 +1,81 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeSearchMatchObject = class SourceCodeSearchMatchObject extends WebInspector.Object
+{
+    constructor(sourceCode, lineText, searchTerm, textRange)
+    {
+        super();
+
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+        this._sourceCode = sourceCode;
+        this._lineText = lineText;
+        this._searchTerm = searchTerm;
+        this._sourceCodeTextRange = sourceCode.createSourceCodeTextRange(textRange);
+    }
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    }
+
+    get title()
+    {
+        return this._lineText;
+    }
+
+    get className()
+    {
+        return WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName;
+    }
+
+    get searchTerm()
+    {
+        return this._searchTerm;
+    }
+
+    get sourceCodeTextRange()
+    {
+        return this._sourceCodeTextRange;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        if (this._sourceCode.url)
+            cookie[WebInspector.SourceCodeSearchMatchObject.URLCookieKey] = this._sourceCode.url.hash;
+
+        var textRange = this._sourceCodeTextRange.textRange;
+        cookie[WebInspector.SourceCodeSearchMatchObject.TextRangeKey] = [textRange.startLine, textRange.startColumn, textRange.endLine, textRange.endColumn].join();
+    }
+};
+
+WebInspector.SourceCodeSearchMatchObject.SourceCodeMatchIconStyleClassName = "source-code-match-icon";
+
+WebInspector.SourceCodeSearchMatchObject.TypeIdentifier = "source-code-search-match-object";
+WebInspector.SourceCodeSearchMatchObject.URLCookieKey = "source-code-url";
+WebInspector.SourceCodeSearchMatchObject.TextRangeKey = "text-range";
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceCodeTextRange.js b/Source/WebInspectorUI/UserInterface/Models/SourceCodeTextRange.js
new file mode 100644
index 000000000..216743249
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeTextRange.js
@@ -0,0 +1,123 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTextRange = class SourceCodeTextRange extends WebInspector.Object
+{
+    constructor(sourceCode) /* textRange || startLocation, endLocation */
+    {
+        super();
+
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
+        console.assert(arguments.length === 2 || arguments.length === 3);
+
+        this._sourceCode = sourceCode;
+
+        if (arguments.length === 2) {
+            var textRange = arguments[1];
+            console.assert(textRange instanceof WebInspector.TextRange);
+            this._startLocation = sourceCode.createSourceCodeLocation(textRange.startLine, textRange.startColumn);
+            this._endLocation = sourceCode.createSourceCodeLocation(textRange.endLine, textRange.endColumn);
+        } else {
+            console.assert(arguments[1] instanceof WebInspector.SourceCodeLocation);
+            console.assert(arguments[2] instanceof WebInspector.SourceCodeLocation);
+            this._startLocation = arguments[1];
+            this._endLocation = arguments[2];
+        }
+
+        this._startLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationChanged, this);
+        this._endLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationChanged, this);
+    }
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    }
+
+    // Raw text range in the original source code.
+
+    get textRange()
+    {
+        var startLine = this._startLocation.lineNumber;
+        var startColumn = this._startLocation.columnNumber;
+        var endLine = this._endLocation.lineNumber;
+        var endColumn = this._endLocation.columnNumber;
+        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+    }
+
+    // Formatted text range in the original source code if it is pretty printed.
+    // This is the same as the raw text range if the source code has no formatter.
+
+    get formattedTextRange()
+    {
+        var startLine = this._startLocation.formattedLineNumber;
+        var startColumn = this._startLocation.formattedColumnNumber;
+        var endLine = this._endLocation.formattedLineNumber;
+        var endColumn = this._endLocation.formattedColumnNumber;
+        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+    }
+
+    // Display values:
+    //   - Mapped resource and text range locations if the original source code has a
+    //     source map and both start and end locations are in the same mapped resource.
+    //   - Otherwise this is the formatted / raw text range.
+
+    get displaySourceCode()
+    {
+        if (!this._startAndEndLocationsInSameMappedResource())
+            return this._sourceCode;
+
+        return this._startLocation.displaySourceCode;
+    }
+
+    get displayTextRange()
+    {
+        if (!this._startAndEndLocationsInSameMappedResource())
+            return this.formattedTextRange;
+
+        var startLine = this._startLocation.displayLineNumber;
+        var startColumn = this._startLocation.displayColumnNumber;
+        var endLine = this._endLocation.displayLineNumber;
+        var endColumn = this._endLocation.displayColumnNumber;
+        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
+    }
+
+    // Private
+
+    _startAndEndLocationsInSameMappedResource()
+    {
+        return this._startLocation.hasMappedLocation() && this._endLocation.hasMappedLocation() && this._startLocation.displaySourceCode === this._endLocation.displaySourceCode;
+    }
+
+    _sourceCodeLocationChanged(event)
+    {
+        this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.RangeChanged);
+    }
+};
+
+WebInspector.SourceCodeTextRange.Event = {
+    RangeChanged: "source-code-text-range-range-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceCodeTimeline.js b/Source/WebInspectorUI/UserInterface/Models/SourceCodeTimeline.js
new file mode 100644
index 000000000..5c7c64eb0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceCodeTimeline.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTimeline = class SourceCodeTimeline extends WebInspector.Timeline
+{
+    constructor(sourceCode, sourceCodeLocation, recordType, recordEventType)
+    {
+        super();
+
+        console.assert(sourceCode);
+        console.assert(!sourceCodeLocation || sourceCodeLocation.sourceCode === sourceCode);
+        console.assert(recordType);
+
+        this._sourceCode = sourceCode;
+        this._sourceCodeLocation = sourceCodeLocation || null;
+        this._recordType = recordType;
+        this._recordEventType = recordEventType || null;
+    }
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    get recordType()
+    {
+        return this._recordType;
+    }
+
+    get recordEventType()
+    {
+        return this._recordEventType;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.SourceCodeTimeline.SourceCodeURLCookieKey] = this._sourceCode.url ? this._sourceCode.url.hash : null;
+        cookie[WebInspector.SourceCodeTimeline.SourceCodeLocationLineCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.lineNumber : null;
+        cookie[WebInspector.SourceCodeTimeline.SourceCodeLocationColumnCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.columnNumber : null;
+        cookie[WebInspector.SourceCodeTimeline.RecordTypeCookieKey] = this._recordType || null;
+        cookie[WebInspector.SourceCodeTimeline.RecordEventTypeCookieKey] = this._recordEventType || null;
+    }
+};
+
+WebInspector.SourceCodeTimeline.TypeIdentifier = "source-code-timeline";
+WebInspector.SourceCodeTimeline.SourceCodeURLCookieKey = "source-code-timeline-source-code-url";
+WebInspector.SourceCodeTimeline.SourceCodeLocationLineCookieKey = "source-code-timeline-source-code-location-line";
+WebInspector.SourceCodeTimeline.SourceCodeLocationColumnCookieKey = "source-code-timeline-source-code-location-column";
+WebInspector.SourceCodeTimeline.SourceCodeURLCookieKey = "source-code-timeline-source-code-url";
+WebInspector.SourceCodeTimeline.RecordTypeCookieKey = "source-code-timeline-record-type";
+WebInspector.SourceCodeTimeline.RecordEventTypeCookieKey = "source-code-timeline-record-event-type";
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceMap.js b/Source/WebInspectorUI/UserInterface/Models/SourceMap.js
new file mode 100644
index 000000000..d7a8bc99f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceMap.js
@@ -0,0 +1,286 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceMap = class SourceMap extends WebInspector.Object
+{
+    constructor(sourceMappingURL, payload, originalSourceCode)
+    {
+        super();
+
+        if (!WebInspector.SourceMap._base64Map) {
+            var base64Digits = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+            WebInspector.SourceMap._base64Map = {};
+            for (var i = 0; i < base64Digits.length; ++i)
+                WebInspector.SourceMap._base64Map[base64Digits.charAt(i)] = i;
+        }
+
+        this._originalSourceCode = originalSourceCode || null;
+        this._sourceMapResources = {};
+        this._sourceMapResourcesList = [];
+
+        this._sourceMappingURL = sourceMappingURL;
+        this._reverseMappingsBySourceURL = {};
+        this._mappings = [];
+        this._sources = {};
+        this._sourceRoot = null;
+        this._sourceContentByURL = {};
+        this._parseMappingPayload(payload);
+    }
+
+    // Public
+
+    get originalSourceCode()
+    {
+        return this._originalSourceCode;
+    }
+
+    get sourceMappingBasePathURLComponents()
+    {
+        if (this._sourceMappingURLBasePathComponents)
+            return this._sourceMappingURLBasePathComponents;
+
+        if (this._sourceRoot) {
+            var baseURLPath = absoluteURL(this._sourceRoot, this._sourceMappingURL);
+            console.assert(baseURLPath);
+            if (baseURLPath) {
+                var urlComponents = parseURL(baseURLPath);
+                if (!/\/$/.test(urlComponents.path))
+                    urlComponents.path += "/";
+                this._sourceMappingURLBasePathComponents = urlComponents;
+                return this._sourceMappingURLBasePathComponents;
+            }
+        }
+
+        var urlComponents = parseURL(this._sourceMappingURL);
+
+        // Fallback for JavaScript debuggable named scripts that may not have a complete URL.
+        if (!urlComponents.path)
+            urlComponents.path = this._sourceMappingURL;
+
+        urlComponents.path = urlComponents.path.substr(0, urlComponents.path.lastIndexOf(urlComponents.lastPathComponent));
+        urlComponents.lastPathComponent = null;
+        this._sourceMappingURLBasePathComponents = urlComponents;
+        return this._sourceMappingURLBasePathComponents;
+    }
+
+    get resources()
+    {
+        return this._sourceMapResourcesList;
+    }
+
+    addResource(resource)
+    {
+        console.assert(!(resource.url in this._sourceMapResources));
+        this._sourceMapResources[resource.url] = resource;
+        this._sourceMapResourcesList.push(resource);
+    }
+
+    resourceForURL(url)
+    {
+        return this._sourceMapResources[url];
+    }
+
+    sources()
+    {
+        return Object.keys(this._sources);
+    }
+
+    sourceContent(sourceURL)
+    {
+        return this._sourceContentByURL[sourceURL];
+    }
+
+    _parseMappingPayload(mappingPayload)
+    {
+        if (mappingPayload.sections)
+            this._parseSections(mappingPayload.sections);
+        else
+            this._parseMap(mappingPayload, 0, 0);
+    }
+
+    _parseSections(sections)
+    {
+        for (var i = 0; i < sections.length; ++i) {
+            var section = sections[i];
+            this._parseMap(section.map, section.offset.line, section.offset.column);
+        }
+    }
+
+    findEntry(lineNumber, columnNumber)
+    {
+        var first = 0;
+        var count = this._mappings.length;
+        while (count > 1) {
+            var step = count >> 1;
+            var middle = first + step;
+            var mapping = this._mappings[middle];
+            if (lineNumber < mapping[0] || (lineNumber === mapping[0] && columnNumber < mapping[1]))
+                count = step;
+            else {
+                first = middle;
+                count -= step;
+            }
+        }
+        var entry = this._mappings[first];
+        if (!first && entry && (lineNumber < entry[0] || (lineNumber === entry[0] && columnNumber < entry[1])))
+            return null;
+        return entry;
+    }
+
+    findEntryReversed(sourceURL, lineNumber)
+    {
+        var mappings = this._reverseMappingsBySourceURL[sourceURL];
+        for ( ; lineNumber < mappings.length; ++lineNumber) {
+            var mapping = mappings[lineNumber];
+            if (mapping)
+                return mapping;
+        }
+        return this._mappings[0];
+    }
+
+    _parseMap(map, lineNumber, columnNumber)
+    {
+        var sourceIndex = 0;
+        var sourceLineNumber = 0;
+        var sourceColumnNumber = 0;
+        var nameIndex = 0;
+
+        var sources = [];
+        var originalToCanonicalURLMap = {};
+        for (var i = 0; i < map.sources.length; ++i) {
+            var originalSourceURL = map.sources[i];
+            var href = originalSourceURL;
+            if (map.sourceRoot && href.charAt(0) !== "/")
+                href = map.sourceRoot.replace(/\/+$/, "") + "/" + href;
+            var url = absoluteURL(href, this._sourceMappingURL) || href;
+            originalToCanonicalURLMap[originalSourceURL] = url;
+            sources.push(url);
+            this._sources[url] = true;
+
+            if (map.sourcesContent && map.sourcesContent[i])
+                this._sourceContentByURL[url] = map.sourcesContent[i];
+        }
+
+        this._sourceRoot = map.sourceRoot || null;
+
+        var stringCharIterator = new WebInspector.SourceMap.StringCharIterator(map.mappings);
+        var sourceURL = sources[sourceIndex];
+
+        while (true) {
+            if (stringCharIterator.peek() === ",")
+                stringCharIterator.next();
+            else {
+                while (stringCharIterator.peek() === ";") {
+                    lineNumber += 1;
+                    columnNumber = 0;
+                    stringCharIterator.next();
+                }
+                if (!stringCharIterator.hasNext())
+                    break;
+            }
+
+            columnNumber += this._decodeVLQ(stringCharIterator);
+            if (this._isSeparator(stringCharIterator.peek())) {
+                this._mappings.push([lineNumber, columnNumber]);
+                continue;
+            }
+
+            var sourceIndexDelta = this._decodeVLQ(stringCharIterator);
+            if (sourceIndexDelta) {
+                sourceIndex += sourceIndexDelta;
+                sourceURL = sources[sourceIndex];
+            }
+            sourceLineNumber += this._decodeVLQ(stringCharIterator);
+            sourceColumnNumber += this._decodeVLQ(stringCharIterator);
+            if (!this._isSeparator(stringCharIterator.peek()))
+                nameIndex += this._decodeVLQ(stringCharIterator);
+
+            this._mappings.push([lineNumber, columnNumber, sourceURL, sourceLineNumber, sourceColumnNumber]);
+        }
+
+        for (var i = 0; i < this._mappings.length; ++i) {
+            var mapping = this._mappings[i];
+            var url = mapping[2];
+            if (!url)
+                continue;
+            if (!this._reverseMappingsBySourceURL[url])
+                this._reverseMappingsBySourceURL[url] = [];
+            var reverseMappings = this._reverseMappingsBySourceURL[url];
+            var sourceLine = mapping[3];
+            if (!reverseMappings[sourceLine])
+                reverseMappings[sourceLine] = [mapping[0], mapping[1]];
+        }
+    }
+
+    _isSeparator(char)
+    {
+        return char === "," || char === ";";
+    }
+
+    _decodeVLQ(stringCharIterator)
+    {
+        // Read unsigned value.
+        var result = 0;
+        var shift = 0;
+        do {
+            var digit = WebInspector.SourceMap._base64Map[stringCharIterator.next()];
+            result += (digit & WebInspector.SourceMap.VLQ_BASE_MASK) << shift;
+            shift += WebInspector.SourceMap.VLQ_BASE_SHIFT;
+        } while (digit & WebInspector.SourceMap.VLQ_CONTINUATION_MASK);
+
+        // Fix the sign.
+        var negative = result & 1;
+        result >>= 1;
+        return negative ? -result : result;
+    }
+};
+
+WebInspector.SourceMap.VLQ_BASE_SHIFT = 5;
+WebInspector.SourceMap.VLQ_BASE_MASK = (1 << 5) - 1;
+WebInspector.SourceMap.VLQ_CONTINUATION_MASK = 1 << 5;
+
+WebInspector.SourceMap.StringCharIterator = class StringCharIterator
+{
+    constructor(string)
+    {
+        this._string = string;
+        this._position = 0;
+    }
+
+    next()
+    {
+        return this._string.charAt(this._position++);
+    }
+
+    peek()
+    {
+        return this._string.charAt(this._position);
+    }
+
+    hasNext()
+    {
+        return this._position < this._string.length;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/SourceMapResource.js b/Source/WebInspectorUI/UserInterface/Models/SourceMapResource.js
new file mode 100644
index 000000000..e7a17cbdc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/SourceMapResource.js
@@ -0,0 +1,178 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceMapResource = class SourceMapResource extends WebInspector.Resource
+{
+    constructor(url, sourceMap)
+    {
+        super(url, null);
+
+        console.assert(url);
+        console.assert(sourceMap);
+
+        this._sourceMap = sourceMap;
+
+        var inheritedMIMEType = this._sourceMap.originalSourceCode instanceof WebInspector.Resource ? this._sourceMap.originalSourceCode.syntheticMIMEType : null;
+
+        var fileExtension = WebInspector.fileExtensionForURL(url);
+        var fileExtensionMIMEType = WebInspector.mimeTypeForFileExtension(fileExtension, true);
+
+        // FIXME: This is a layering violation. It should use a helper function on the
+        // Resource base-class to set _mimeType and _type.
+        this._mimeType = fileExtensionMIMEType || inheritedMIMEType || "text/javascript";
+        this._type = WebInspector.Resource.typeFromMIMEType(this._mimeType);
+
+        // Mark the resource as loaded so it does not show a spinner in the sidebar.
+        // We will really load the resource the first time content is requested.
+        this.markAsFinished();
+    }
+
+    // Public
+
+    get sourceMap()
+    {
+        return this._sourceMap;
+    }
+
+    get sourceMapDisplaySubpath()
+    {
+        var sourceMappingBasePathURLComponents = this._sourceMap.sourceMappingBasePathURLComponents;
+        var resourceURLComponents = this.urlComponents;
+
+        // Fallback for JavaScript debuggable named scripts that may not have a complete URL.
+        if (!resourceURLComponents.path)
+            resourceURLComponents.path = this.url;
+
+        // Different schemes / hosts. Return the host + path of this resource.
+        if (resourceURLComponents.scheme !== sourceMappingBasePathURLComponents.scheme || resourceURLComponents.host !== sourceMappingBasePathURLComponents.host)
+            return resourceURLComponents.host + (resourceURLComponents.port ? (":" + resourceURLComponents.port) : "") + resourceURLComponents.path;
+
+        // Same host, but not a subpath of the base. This implies a ".." in the relative path.
+        if (!resourceURLComponents.path.startsWith(sourceMappingBasePathURLComponents.path))
+            return relativePath(resourceURLComponents.path, sourceMappingBasePathURLComponents.path);
+
+        // Same host. Just a subpath of the base.
+        return resourceURLComponents.path.substring(sourceMappingBasePathURLComponents.path.length, resourceURLComponents.length);
+    }
+
+    requestContentFromBackend(callback)
+    {
+        // Revert the markAsFinished that was done in the constructor.
+        this.revertMarkAsFinished();
+
+        var inlineContent = this._sourceMap.sourceContent(this.url);
+        if (inlineContent) {
+            // Force inline content to be asynchronous to match the expected load pattern.
+            // FIXME: We don't know the MIME-type for inline content. Guess by analyzing the content?
+            // Returns a promise.
+            return sourceMapResourceLoaded.call(this, {content: inlineContent, mimeType: this.mimeType, statusCode: 200});
+        }
+
+        function sourceMapResourceNotAvailable(error, content, mimeType, statusCode)
+        {
+            this.markAsFailed();
+            return Promise.resolve({
+                error: WebInspector.UIString("An error occurred trying to load the resource."),
+                content,
+                mimeType,
+                statusCode
+            });
+        }
+
+        function sourceMapResourceLoadError(error)
+        {
+            // There was an error calling NetworkAgent.loadResource.
+            console.error(error || "There was an unknown error calling NetworkAgent.loadResource.");
+            this.markAsFailed();
+            return Promise.resolve({error: WebInspector.UIString("An error occurred trying to load the resource.")});
+        }
+
+        function sourceMapResourceLoaded(parameters)
+        {
+            var {error, content, mimeType, statusCode} = parameters;
+
+            var base64encoded = false;
+
+            if (statusCode >= 400 || error)
+                return sourceMapResourceNotAvailable(error, content, mimeType, statusCode);
+
+            // FIXME: Add support for picking the best MIME-type. Right now the file extension is the best bet.
+            // The constructor set MIME-type based on the file extension and we ignore mimeType here.
+
+            this.markAsFinished();
+
+            return Promise.resolve({
+                content,
+                mimeType,
+                base64encoded,
+                statusCode
+            });
+        }
+
+        // COMPATIBILITY (iOS 7): Network.loadResource did not exist.
+        // Also, JavaScript Debuggable with SourceMaps that do not have inlined content may reach this.
+        if (!window.NetworkAgent || !NetworkAgent.loadResource)
+            return sourceMapResourceLoadError.call(this);
+
+        var frameIdentifier = null;
+        if (this._sourceMap.originalSourceCode instanceof WebInspector.Resource && this._sourceMap.originalSourceCode.parentFrame)
+            frameIdentifier = this._sourceMap.originalSourceCode.parentFrame.id;
+
+        if (!frameIdentifier)
+            frameIdentifier = WebInspector.frameResourceManager.mainFrame.id;
+
+        return NetworkAgent.loadResource(frameIdentifier, this.url).then(sourceMapResourceLoaded.bind(this)).catch(sourceMapResourceLoadError.bind(this));
+    }
+
+    createSourceCodeLocation(lineNumber, columnNumber)
+    {
+        // SourceCodeLocations are always constructed with raw resources and raw locations. Lookup the raw location.
+        var entry = this._sourceMap.findEntryReversed(this.url, lineNumber);
+        var rawLineNumber = entry[0];
+        var rawColumnNumber = entry[1];
+
+        // If the raw location is an inline script we need to include that offset.
+        var originalSourceCode = this._sourceMap.originalSourceCode;
+        if (originalSourceCode instanceof WebInspector.Script) {
+            if (rawLineNumber === 0)
+                rawColumnNumber += originalSourceCode.range.startColumn;
+            rawLineNumber += originalSourceCode.range.startLine;
+        }
+
+        // Create the SourceCodeLocation and since we already know the the mapped location set it directly.
+        var location = originalSourceCode.createSourceCodeLocation(rawLineNumber, rawColumnNumber);
+        location._setMappedLocation(this, lineNumber, columnNumber);
+        return location;
+    }
+
+    createSourceCodeTextRange(textRange)
+    {
+        // SourceCodeTextRanges are always constructed with raw resources and raw locations.
+        // However, we can provide the most accurate mapped locations in construction.
+        var startSourceCodeLocation = this.createSourceCodeLocation(textRange.startLine, textRange.startColumn);
+        var endSourceCodeLocation = this.createSourceCodeLocation(textRange.endLine, textRange.endColumn);
+        return new WebInspector.SourceCodeTextRange(this._sourceMap.originalSourceCode, startSourceCodeLocation, endSourceCodeLocation);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/StackTrace.js b/Source/WebInspectorUI/UserInterface/Models/StackTrace.js
new file mode 100644
index 000000000..47caeb08a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/StackTrace.js
@@ -0,0 +1,138 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StackTrace = class StackTrace extends WebInspector.Object
+{
+    constructor(callFrames)
+    {
+        super();
+
+        console.assert(callFrames && callFrames.every(function(callFrame) { return callFrame instanceof WebInspector.CallFrame; }));
+
+        this._callFrames = callFrames;
+    }
+
+    // Static
+
+    static fromPayload(payload)
+    {
+        var callFrames = payload.map(WebInspector.CallFrame.fromPayload);
+        return new WebInspector.StackTrace(callFrames);
+    }
+
+    static fromString(stack)
+    {
+        var payload = WebInspector.StackTrace._parseStackTrace(stack);
+        return WebInspector.StackTrace.fromPayload(payload);
+    }
+
+    // May produce false negatives; must not produce any false positives.
+    // It may return false on a valid stack trace, but it will never return true on an invalid stack trace.
+    static isLikelyStackTrace(stack)
+    {
+        // This function runs for every logged string. It penalizes the performance.
+        // As most logged strings are not stack traces, exit as early as possible.
+        const smallestPossibleStackTraceLength = "http://a.bc/:9:1".length;
+        if (stack.length < smallestPossibleStackTraceLength.length * 2)
+            return false;
+
+        const approximateStackLengthOf50Items = 5000;
+        if (stack.length > approximateStackLengthOf50Items)
+            return false;
+
+        if (/^[^a-z$_]/i.test(stack[0]))
+            return false;
+
+        const reasonablyLongLineLength = 500;
+        const reasonablyLongNativeMethodLength = 120;
+        const stackTraceLine = `(.{1,${reasonablyLongLineLength}}:\\d+:\\d+|eval code|.{1,${reasonablyLongNativeMethodLength}}@\\[native code\\])`;
+        const stackTrace = new RegExp(`^${stackTraceLine}(\\n${stackTraceLine})*$`, "g");
+
+        return stackTrace.test(stack);
+    }
+
+    static _parseStackTrace(stack)
+    {
+        var lines = stack.split(/\n/g);
+        var result = [];
+
+        for (var line of lines) {
+            var functionName = "";
+            var url = "";
+            var lineNumber = 0;
+            var columnNumber = 0;
+            var atIndex = line.indexOf("@");
+
+            if (atIndex !== -1) {
+                functionName = line.slice(0, atIndex);
+                ({url, lineNumber, columnNumber} = WebInspector.StackTrace._parseLocation(line.slice(atIndex + 1)));
+            } else if (line.includes("/"))
+                ({url, lineNumber, columnNumber} = WebInspector.StackTrace._parseLocation(line));
+            else
+                functionName = line;
+
+            result.push({functionName, url, lineNumber, columnNumber});
+        }
+
+        return result;
+    }
+
+    static _parseLocation(locationString)
+    {
+        var result = {url: "", lineNumber: 0, columnNumber: 0};
+        var locationRegEx = /(.+?)(?::(\d+)(?::(\d+))?)?$/;
+        var matched = locationString.match(locationRegEx);
+
+        if (!matched)
+            return result;
+
+        result.url = matched[1];
+
+        if (matched[2])
+            result.lineNumber = parseInt(matched[2]);
+
+        if (matched[3])
+            result.columnNumber = parseInt(matched[3]);
+
+        return result;
+    }
+
+    // Public
+
+    get callFrames()
+    {
+        return this._callFrames;
+    }
+
+    get firstNonNativeCallFrame()
+    {
+        for (var frame of this._callFrames) {
+            if (!frame.nativeCode)
+                return frame;
+        }
+
+        return null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/StructureDescription.js b/Source/WebInspectorUI/UserInterface/Models/StructureDescription.js
new file mode 100644
index 000000000..9cdfca3d1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/StructureDescription.js
@@ -0,0 +1,81 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StructureDescription = class StructureDescription extends WebInspector.Object
+{
+    constructor(fields, optionalFields, constructorName, prototypeStructure, imprecise)
+    {
+        super();
+
+        console.assert(!fields || fields.every(function(x) { return typeof x === "string"; }));
+        console.assert(!optionalFields || optionalFields.every(function(x) { return typeof x === "string"; }));
+        console.assert(!constructorName || typeof constructorName === "string");
+        console.assert(!prototypeStructure || prototypeStructure instanceof WebInspector.StructureDescription);
+
+        this._fields = fields || null;
+        this._optionalFields = optionalFields || null;
+        this._constructorName = constructorName || "";
+        this._prototypeStructure = prototypeStructure || null;
+        this._imprecise = imprecise || false;
+    }
+
+    // Static
+
+    // Runtime.StructureDescription.
+    static fromPayload(payload)
+    {
+        if (payload.prototypeStructure)
+            payload.prototypeStructure = WebInspector.StructureDescription.fromPayload(payload.prototypeStructure);
+
+        return new WebInspector.StructureDescription(payload.fields, payload.optionalFields, payload.constructorName, payload.prototypeStructure, payload.imprecise);
+    }
+
+    // Public
+
+    get fields()
+    {
+        return this._fields;
+    }
+
+    get optionalFields()
+    {
+        return this._optionalFields;
+    }
+
+    get constructorName()
+    {
+        return this._constructorName;
+    }
+
+    get prototypeStructure()
+    {
+        return this._prototypeStructure;
+    }
+
+    get imprecise()
+    {
+        return this._imprecise;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/TextMarker.js b/Source/WebInspectorUI/UserInterface/Models/TextMarker.js
new file mode 100644
index 000000000..3220a2481
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TextMarker.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextMarker = class TextMarker extends WebInspector.Object
+{
+    constructor(codeMirrorTextMarker, type)
+    {
+        super();
+
+        this._codeMirrorTextMarker = codeMirrorTextMarker;
+        codeMirrorTextMarker.__webInspectorTextMarker = this;
+
+        this._type = type || WebInspector.TextMarker.Type.Plain;
+    }
+
+    // Static
+
+    static textMarkerForCodeMirrorTextMarker(codeMirrorTextMarker)
+    {
+        return codeMirrorTextMarker.__webInspectorTextMarker || new WebInspector.TextMarker(codeMirrorTextMarker);
+    }
+
+    // Public
+
+    get codeMirrorTextMarker()
+    {
+        return this._codeMirrorTextMarker;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get range()
+    {
+        var range = this._codeMirrorTextMarker.find();
+        if (!range)
+            return null;
+        return new WebInspector.TextRange(range.from.line, range.from.ch, range.to.line, range.to.ch);
+    }
+
+    get rects()
+    {
+        var range = this._codeMirrorTextMarker.find();
+        if (!range)
+            return WebInspector.Rect.ZERO_RECT;
+        return this._codeMirrorTextMarker.doc.cm.rectsForRange({
+            start: range.from,
+            end: range.to
+        });
+    }
+
+    clear()
+    {
+        this._codeMirrorTextMarker.clear();
+    }
+};
+
+WebInspector.TextMarker.Type = {
+    Color: "text-marker-type-color",
+    Gradient: "text-marker-type-gradient",
+    Plain: "text-marker-type-plain",
+    CubicBezier: "text-marker-type-cubic-bezier"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/TextRange.js b/Source/WebInspectorUI/UserInterface/Models/TextRange.js
new file mode 100644
index 000000000..978404ba9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TextRange.js
@@ -0,0 +1,122 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextRange = class TextRange extends WebInspector.Object
+{
+    constructor(startLineOrStartOffset, startColumnOrEndOffset, endLine, endColumn)
+    {
+        super();
+
+        if (arguments.length === 4) {
+            console.assert(startLineOrStartOffset <= endLine);
+            console.assert(startLineOrStartOffset !== endLine || startColumnOrEndOffset <= endColumn);
+
+            this._startLine = typeof startLineOrStartOffset === "number" ? startLineOrStartOffset : NaN;
+            this._startColumn = typeof startColumnOrEndOffset === "number" ? startColumnOrEndOffset : NaN;
+            this._endLine = typeof endLine === "number" ? endLine : NaN;
+            this._endColumn = typeof endColumn === "number" ? endColumn : NaN;
+
+            this._startOffset = NaN;
+            this._endOffset = NaN;
+        } else if (arguments.length === 2) {
+            console.assert(startLineOrStartOffset <= startColumnOrEndOffset);
+
+            this._startOffset = typeof startLineOrStartOffset === "number" ? startLineOrStartOffset : NaN;
+            this._endOffset = typeof startColumnOrEndOffset === "number" ? startColumnOrEndOffset : NaN;
+
+            this._startLine = NaN;
+            this._startColumn = NaN;
+            this._endLine = NaN;
+            this._endColumn = NaN;
+        }
+    }
+
+    // Public
+
+    get startLine()
+    {
+        return this._startLine;
+    }
+
+    get startColumn()
+    {
+        return this._startColumn;
+    }
+
+    get endLine()
+    {
+        return this._endLine;
+    }
+
+    get endColumn()
+    {
+        return this._endColumn;
+    }
+
+    get startOffset()
+    {
+        return this._startOffset;
+    }
+
+    get endOffset()
+    {
+        return this._endOffset;
+    }
+
+    startPosition()
+    {
+        return new WebInspector.SourceCodePosition(this._startLine, this._startColumn);
+    }
+
+    endPosition()
+    {
+        return new WebInspector.SourceCodePosition(this._endLine, this._endColumn);
+    }
+
+    resolveOffsets(text)
+    {
+        console.assert(typeof text === "string");
+        if (typeof text !== "string")
+            return;
+
+        console.assert(!isNaN(this._startLine));
+        console.assert(!isNaN(this._startColumn));
+        console.assert(!isNaN(this._endLine));
+        console.assert(!isNaN(this._endColumn));
+        if (isNaN(this._startLine) || isNaN(this._startColumn) || isNaN(this._endLine) || isNaN(this._endColumn))
+            return;
+
+        var lastNewLineOffset = 0;
+        for (var i = 0; i < this._startLine; ++i)
+            lastNewLineOffset = text.indexOf("\n", lastNewLineOffset) + 1;
+
+        this._startOffset = lastNewLineOffset + this._startColumn;
+
+        for (var i = this._startLine; i < this._endLine; ++i)
+            lastNewLineOffset = text.indexOf("\n", lastNewLineOffset) + 1;
+
+        this._endOffset = lastNewLineOffset + this._endColumn;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/Timeline.js b/Source/WebInspectorUI/UserInterface/Models/Timeline.js
new file mode 100644
index 000000000..9339b45cf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/Timeline.js
@@ -0,0 +1,136 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Timeline = class Timeline extends WebInspector.Object
+{
+    constructor(type)
+    {
+        super();
+
+        this._type = type;
+
+        this.reset(true);
+    }
+
+    // Static
+
+    static create(type)
+    {
+        if (type === WebInspector.TimelineRecord.Type.Network)
+            return new WebInspector.NetworkTimeline(type);
+
+        return new WebInspector.Timeline(type);
+    }
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    get endTime()
+    {
+        return this._endTime;
+    }
+
+    get records()
+    {
+        return this._records;
+    }
+
+    reset(suppressEvents)
+    {
+        this._records = [];
+        this._startTime = NaN;
+        this._endTime = NaN;
+
+        if (!suppressEvents) {
+            this.dispatchEventToListeners(WebInspector.Timeline.Event.TimesUpdated);
+            this.dispatchEventToListeners(WebInspector.Timeline.Event.Reset);
+        }
+    }
+
+    addRecord(record)
+    {
+        if (record.updatesDynamically)
+            record.addEventListener(WebInspector.TimelineRecord.Event.Updated, this._recordUpdated, this);
+
+        this._records.push(record);
+
+        this._updateTimesIfNeeded(record);
+
+        this.dispatchEventToListeners(WebInspector.Timeline.Event.RecordAdded, {record});
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.Timeline.TimelineTypeCookieKey] = this._type;
+    }
+
+    refresh()
+    {
+        this.dispatchEventToListeners(WebInspector.Timeline.Event.Refreshed);
+    }
+
+    // Private
+
+    _updateTimesIfNeeded(record)
+    {
+        var changed = false;
+
+        if (isNaN(this._startTime) || record.startTime < this._startTime) {
+            this._startTime = record.startTime;
+            changed = true;
+        }
+
+        if (isNaN(this._endTime) || this._endTime < record.endTime) {
+            this._endTime = record.endTime;
+            changed = true;
+        }
+
+        if (changed)
+            this.dispatchEventToListeners(WebInspector.Timeline.Event.TimesUpdated);
+    }
+
+    _recordUpdated(event)
+    {
+        this._updateTimesIfNeeded(event.target);
+    }
+};
+
+WebInspector.Timeline.Event = {
+    Reset: "timeline-reset",
+    RecordAdded: "timeline-record-added",
+    TimesUpdated: "timeline-times-updated",
+    Refreshed: "timeline-refreshed",
+};
+
+WebInspector.Timeline.TimelineTypeCookieKey = "timeline-type";
diff --git a/Source/WebInspectorUI/UserInterface/Models/TimelineMarker.js b/Source/WebInspectorUI/UserInterface/Models/TimelineMarker.js
new file mode 100644
index 000000000..dee038cb0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TimelineMarker.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineMarker = class TimelineMarker extends WebInspector.Object
+{
+    constructor(time, type, details)
+    {
+        super();
+
+        console.assert(type);
+
+        this._time = time || 0;
+        this._type = type;
+        this._details = details || null;
+    }
+
+    // Public
+
+    get time()
+    {
+        return this._time;
+    }
+
+    set time(x)
+    {
+        console.assert(typeof x === "number", "Time should be a number.");
+
+        x = x || 0;
+
+        if (this._time === x)
+            return;
+
+        this._time = x;
+
+        this.dispatchEventToListeners(WebInspector.TimelineMarker.Event.TimeChanged);
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get details()
+    {
+        return this._details;
+    }
+};
+
+WebInspector.TimelineMarker.Event = {
+    TimeChanged: "timeline-marker-time-changed"
+};
+
+WebInspector.TimelineMarker.Type = {
+    CurrentTime: "current-time",
+    LoadEvent: "load-event",
+    DOMContentEvent: "dom-content-event",
+    TimeStamp: "timestamp"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js b/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
new file mode 100644
index 000000000..18ea1992c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TimelineRecord.js
@@ -0,0 +1,168 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecord = class TimelineRecord extends WebInspector.Object
+{
+    constructor(type, startTime, endTime, callFrames, sourceCodeLocation)
+    {
+        super();
+
+        console.assert(type);
+
+        if (type in WebInspector.TimelineRecord.Type)
+            type = WebInspector.TimelineRecord.Type[type];
+
+        this._type = type;
+        this._startTime = startTime || NaN;
+        this._endTime = endTime || NaN;
+        this._callFrames = callFrames || null;
+        this._sourceCodeLocation = sourceCodeLocation || null;
+        this._children = [];
+    }
+
+    // Public
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get startTime()
+    {
+        // Implemented by subclasses if needed.
+        return this._startTime;
+    }
+
+    get activeStartTime()
+    {
+        // Implemented by subclasses if needed.
+        return this._startTime;
+    }
+
+    get endTime()
+    {
+        // Implemented by subclasses if needed.
+        return this._endTime;
+    }
+
+    get duration()
+    {
+        // Use the getters instead of the properties so this works for subclasses that override the getters.
+        return this.endTime - this.startTime;
+    }
+
+    get inactiveDuration()
+    {
+        // Use the getters instead of the properties so this works for subclasses that override the getters.
+        return this.activeStartTime - this.startTime;
+    }
+
+    get activeDuration()
+    {
+        // Use the getters instead of the properties so this works for subclasses that override the getters.
+        return this.endTime - this.activeStartTime;
+    }
+
+    get updatesDynamically()
+    {
+        // Implemented by subclasses if needed.
+        return false;
+    }
+
+    get usesActiveStartTime()
+    {
+        // Implemented by subclasses if needed.
+        return false;
+    }
+
+    get callFrames()
+    {
+        return this._callFrames;
+    }
+
+    get initiatorCallFrame()
+    {
+        if (!this._callFrames || !this._callFrames.length)
+            return null;
+
+        // Return the first non-native code call frame as the initiator.
+        for (var i = 0; i < this._callFrames.length; ++i) {
+            if (this._callFrames[i].nativeCode)
+                continue;
+            return this._callFrames[i];
+        }
+
+        return null;
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    get parent()
+    {
+        return this._parent;
+    }
+
+    set parent(x)
+    {
+        if (this._parent === x)
+            return;
+
+        this._parent = x;
+    }
+
+    get children()
+    {
+        return this._children;
+    }
+
+    saveIdentityToCookie(cookie)
+    {
+        cookie[WebInspector.TimelineRecord.SourceCodeURLCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url ? this._sourceCodeLocation.sourceCode.url.hash : null : null;
+        cookie[WebInspector.TimelineRecord.SourceCodeLocationLineCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.lineNumber : null;
+        cookie[WebInspector.TimelineRecord.SourceCodeLocationColumnCookieKey] = this._sourceCodeLocation ? this._sourceCodeLocation.columnNumber : null;
+        cookie[WebInspector.TimelineRecord.TypeCookieKey] = this._type || null;
+    }
+};
+
+WebInspector.TimelineRecord.Event = {
+    Updated: "timeline-record-updated"
+};
+
+WebInspector.TimelineRecord.Type = {
+    Network: "timeline-record-type-network",
+    Layout: "timeline-record-type-layout",
+    Script: "timeline-record-type-script",
+    RenderingFrame: "timeline-record-type-rendering-frame",
+    Memory: "timeline-record-type-memory",
+};
+
+WebInspector.TimelineRecord.TypeIdentifier = "timeline-record";
+WebInspector.TimelineRecord.SourceCodeURLCookieKey = "timeline-record-source-code-url";
+WebInspector.TimelineRecord.SourceCodeLocationLineCookieKey = "timeline-record-source-code-location-line";
+WebInspector.TimelineRecord.SourceCodeLocationColumnCookieKey = "timeline-record-source-code-location-column";
+WebInspector.TimelineRecord.TypeCookieKey = "timeline-record-type";
diff --git a/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js b/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js
new file mode 100644
index 000000000..8ab2a2d9c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TimelineRecording.js
@@ -0,0 +1,356 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecording = class TimelineRecording extends WebInspector.Object
+{
+    constructor(identifier, displayName, instruments)
+    {
+        super();
+
+        this._identifier = identifier;
+        this._timelines = new Map;
+        this._displayName = displayName;
+        this._capturing = false;
+        this._readonly = false;
+        this._instruments = instruments || [];
+
+        let timelines = [
+            WebInspector.TimelineRecord.Type.Network,
+            WebInspector.TimelineRecord.Type.Layout,
+            WebInspector.TimelineRecord.Type.Script,
+            WebInspector.TimelineRecord.Type.RenderingFrame,
+            WebInspector.TimelineRecord.Type.Memory,
+        ];
+
+        for (let type of timelines) {
+            let timeline = WebInspector.Timeline.create(type);
+            this._timelines.set(type, timeline);
+            timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._timelineTimesUpdated, this);
+        }
+
+        // For legacy backends, we compute the elapsed time of records relative to this timestamp.
+        this._legacyFirstRecordedTimestamp = NaN;
+
+        this.reset(true);
+    }
+
+    // Static
+
+    static sourceCodeTimelinesSupported()
+    {
+        return WebInspector.debuggableType === WebInspector.DebuggableType.Web;
+    }
+
+    // Public
+
+    get displayName()
+    {
+        return this._displayName;
+    }
+
+    get identifier()
+    {
+        return this._identifier;
+    }
+
+    get timelines()
+    {
+        return this._timelines;
+    }
+
+    get instruments()
+    {
+        return this._instruments;
+    }
+
+    get readonly()
+    {
+        return this._readonly;
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    get endTime()
+    {
+        return this._endTime;
+    }
+
+    start()
+    {
+        console.assert(!this._capturing, "Attempted to start an already started session.");
+        console.assert(!this._readonly, "Attempted to start a readonly session.");
+
+        this._capturing = true;
+
+        for (let instrument of this._instruments)
+            instrument.startInstrumentation();
+    }
+
+    stop()
+    {
+        console.assert(this._capturing, "Attempted to stop an already stopped session.");
+        console.assert(!this._readonly, "Attempted to stop a readonly session.");
+
+        this._capturing = false;
+
+        for (let instrument of this._instruments)
+            instrument.stopInstrumentation();
+    }
+
+    saveIdentityToCookie()
+    {
+        // Do nothing. Timeline recordings are not persisted when the inspector is
+        // re-opened, so do not attempt to restore by identifier or display name.
+    }
+
+    isEmpty()
+    {
+        for (var timeline of this._timelines.values()) {
+            if (timeline.records.length)
+                return false;
+        }
+
+        return true;
+    }
+
+    unloaded()
+    {
+        console.assert(!this.isEmpty(), "Shouldn't unload an empty recording; it should be reused instead.");
+
+        this._readonly = true;
+
+        this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.Unloaded);
+    }
+
+    reset(suppressEvents)
+    {
+        console.assert(!this._readonly, "Can't reset a read-only recording.");
+
+        this._sourceCodeTimelinesMap = new Map;
+        this._eventMarkers = [];
+        this._startTime = NaN;
+        this._endTime = NaN;
+
+        for (var timeline of this._timelines.values())
+            timeline.reset(suppressEvents);
+
+        WebInspector.RenderingFrameTimelineRecord.resetFrameIndex();
+
+        if (!suppressEvents) {
+            this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.Reset);
+            this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.TimesUpdated);
+        }
+    }
+
+    sourceCodeTimelinesForSourceCode(sourceCode)
+    {
+        var timelines = this._sourceCodeTimelinesMap.get(sourceCode);
+        if (!timelines)
+            return [];
+        return [...timelines.values()];
+    }
+
+    timelineForInstrument(instrument)
+    {
+        return this._timelines.get(instrument.timelineRecordType);
+    }
+
+    timelineForRecordType(recordType)
+    {
+        return this._timelines.get(recordType);
+    }
+
+    addInstrument(instrument)
+    {
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+        console.assert(!this._instruments.contains(instrument), this._instruments, instrument);
+
+        this._instruments.push(instrument);
+
+        this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.InstrumentAdded, {instrument});
+    }
+
+    removeInstrument(instrument)
+    {
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+        console.assert(this._instruments.contains(instrument), this._instruments, instrument);
+
+        this._instruments.remove(instrument);
+
+        this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.InstrumentRemoved, {instrument});
+    }
+
+    addEventMarker(marker)
+    {
+        if (!this._capturing)
+            return;
+
+        this._eventMarkers.push(marker);
+
+        this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.MarkerAdded, {marker});
+    }
+
+    addRecord(record)
+    {
+        var timeline = this._timelines.get(record.type);
+        console.assert(timeline, record, this._timelines);
+        if (!timeline)
+            return;
+
+        // Add the record to the global timeline by type.
+        timeline.addRecord(record);
+
+        // Some records don't have source code timelines.
+        if (record.type === WebInspector.TimelineRecord.Type.Network
+            || record.type === WebInspector.TimelineRecord.Type.RenderingFrame
+            || record.type === WebInspector.TimelineRecord.Type.Memory)
+            return;
+
+        if (!WebInspector.TimelineRecording.sourceCodeTimelinesSupported())
+            return;
+
+        // Add the record to the source code timelines.
+        var activeMainResource = WebInspector.frameResourceManager.mainFrame.provisionalMainResource || WebInspector.frameResourceManager.mainFrame.mainResource;
+        var sourceCode = record.sourceCodeLocation ? record.sourceCodeLocation.sourceCode : activeMainResource;
+
+        var sourceCodeTimelines = this._sourceCodeTimelinesMap.get(sourceCode);
+        if (!sourceCodeTimelines) {
+            sourceCodeTimelines = new Map;
+            this._sourceCodeTimelinesMap.set(sourceCode, sourceCodeTimelines);
+        }
+
+        var newTimeline = false;
+        var key = this._keyForRecord(record);
+        var sourceCodeTimeline = sourceCodeTimelines.get(key);
+        if (!sourceCodeTimeline) {
+            sourceCodeTimeline = new WebInspector.SourceCodeTimeline(sourceCode, record.sourceCodeLocation, record.type, record.eventType);
+            sourceCodeTimelines.set(key, sourceCodeTimeline);
+            newTimeline = true;
+        }
+
+        sourceCodeTimeline.addRecord(record);
+
+        if (newTimeline)
+            this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.SourceCodeTimelineAdded, {sourceCodeTimeline});
+    }
+
+    computeElapsedTime(timestamp)
+    {
+        if (!timestamp || isNaN(timestamp))
+            return NaN;
+
+        // COMPATIBILITY (iOS 8): old backends send timestamps (seconds or milliseconds since the epoch),
+        // rather than seconds elapsed since timeline capturing started. We approximate the latter by
+        // subtracting the start timestamp, as old versions did not use monotonic times.
+        if (WebInspector.TimelineRecording.isLegacy === undefined)
+            WebInspector.TimelineRecording.isLegacy = timestamp > WebInspector.TimelineRecording.TimestampThresholdForLegacyRecordConversion;
+
+        if (!WebInspector.TimelineRecording.isLegacy)
+            return timestamp;
+
+        // If the record's start time is large, but not really large, then it is seconds since epoch
+        // not millseconds since epoch, so convert it to milliseconds.
+        if (timestamp < WebInspector.TimelineRecording.TimestampThresholdForLegacyAssumedMilliseconds)
+            timestamp *= 1000;
+
+        if (isNaN(this._legacyFirstRecordedTimestamp))
+            this._legacyFirstRecordedTimestamp = timestamp;
+
+        // Return seconds since the first recorded value.
+        return (timestamp - this._legacyFirstRecordedTimestamp) / 1000.0;
+    }
+
+    setLegacyBaseTimestamp(timestamp)
+    {
+        console.assert(isNaN(this._legacyFirstRecordedTimestamp));
+
+        if (timestamp < WebInspector.TimelineRecording.TimestampThresholdForLegacyAssumedMilliseconds)
+            timestamp *= 1000;
+
+        this._legacyFirstRecordedTimestamp = timestamp;
+    }
+
+    initializeTimeBoundsIfNecessary(timestamp)
+    {
+        if (isNaN(this._startTime)) {
+            console.assert(isNaN(this._endTime));
+
+            this._startTime = timestamp;
+            this._endTime = timestamp;
+
+            this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.TimesUpdated);
+        }
+    }
+
+    // Private
+
+    _keyForRecord(record)
+    {
+        var key = record.type;
+        if (record instanceof WebInspector.ScriptTimelineRecord || record instanceof WebInspector.LayoutTimelineRecord)
+            key += ":" + record.eventType;
+        if (record instanceof WebInspector.ScriptTimelineRecord && record.eventType === WebInspector.ScriptTimelineRecord.EventType.EventDispatched)
+            key += ":" + record.details;
+        if (record.sourceCodeLocation)
+            key += ":" + record.sourceCodeLocation.lineNumber + ":" + record.sourceCodeLocation.columnNumber;
+        return key;
+    }
+
+    _timelineTimesUpdated(event)
+    {
+        var timeline = event.target;
+        var changed = false;
+
+        if (isNaN(this._startTime) || timeline.startTime < this._startTime) {
+            this._startTime = timeline.startTime;
+            changed = true;
+        }
+
+        if (isNaN(this._endTime) || this._endTime < timeline.endTime) {
+            this._endTime = timeline.endTime;
+            changed = true;
+        }
+
+        if (changed)
+            this.dispatchEventToListeners(WebInspector.TimelineRecording.Event.TimesUpdated);
+    }
+};
+
+WebInspector.TimelineRecording.Event = {
+    Reset: "timeline-recording-reset",
+    Unloaded: "timeline-recording-unloaded",
+    SourceCodeTimelineAdded: "timeline-recording-source-code-timeline-added",
+    InstrumentAdded: "timeline-recording-instrument-added",
+    InstrumentRemoved: "timeline-recording-instrument-removed",
+    TimesUpdated: "timeline-recording-times-updated",
+    MarkerAdded: "timeline-recording-marker-added",
+};
+
+WebInspector.TimelineRecording.isLegacy = undefined;
+WebInspector.TimelineRecording.TimestampThresholdForLegacyRecordConversion = 10000000; // Some value not near zero.
+WebInspector.TimelineRecording.TimestampThresholdForLegacyAssumedMilliseconds = 1420099200000; // Date.parse("Jan 1, 2015"). Milliseconds since epoch.
diff --git a/Source/WebInspectorUI/UserInterface/Models/TypeDescription.js b/Source/WebInspectorUI/UserInterface/Models/TypeDescription.js
new file mode 100644
index 000000000..f8fc6cdd1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TypeDescription.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TypeDescription = class TypeDescription extends WebInspector.Object
+{
+    constructor(leastCommonAncestor, typeSet, structures, valid, truncated)
+    {
+        super();
+
+        console.assert(!leastCommonAncestor || typeof leastCommonAncestor === "string");
+        console.assert(!typeSet || typeSet instanceof WebInspector.TypeSet);
+        console.assert(!structures || structures.every(function(x) { return x instanceof WebInspector.StructureDescription; }));
+
+        this._leastCommonAncestor = leastCommonAncestor || null;
+        this._typeSet = typeSet || null;
+        this._structures = structures || null;
+        this._valid = valid || false;
+        this._truncated = truncated || false;
+    }
+
+    // Static
+
+    // Runtime.TypeDescription.
+    static fromPayload(payload)
+    {
+        var typeSet = undefined;
+        if (payload.typeSet)
+            typeSet = WebInspector.TypeSet.fromPayload(payload.typeSet);
+
+        var structures = undefined;
+        if (payload.structures)
+            structures = payload.structures.map(WebInspector.StructureDescription.fromPayload);
+
+        return new WebInspector.TypeDescription(payload.leastCommonAncestor, typeSet, structures, payload.isValid, payload.isTruncated);
+    }
+
+    // Public
+
+    get leastCommonAncestor()
+    {
+        return this._leastCommonAncestor;
+    }
+
+    get typeSet()
+    {
+        return this._typeSet;
+    }
+
+    get structures()
+    {
+        return this._structures;
+    }
+
+    get valid()
+    {
+        return this._valid;
+    }
+
+    get truncated()
+    {
+        return this._truncated;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Models/TypeSet.js b/Source/WebInspectorUI/UserInterface/Models/TypeSet.js
new file mode 100644
index 000000000..173338221
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/TypeSet.js
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) Saam Barati.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TypeSet = class TypeSet extends WebInspector.Object
+{
+    constructor(typeSet)
+    {
+        super();
+
+        console.assert(typeSet);
+
+        var bitString = 0x0;
+        if (typeSet.isFunction)
+            bitString |= WebInspector.TypeSet.TypeBit.Function;
+        if (typeSet.isUndefined)
+            bitString |= WebInspector.TypeSet.TypeBit.Undefined;
+        if (typeSet.isNull)
+            bitString |= WebInspector.TypeSet.TypeBit.Null;
+        if (typeSet.isBoolean)
+            bitString |= WebInspector.TypeSet.TypeBit.Boolean;
+        if (typeSet.isInteger)
+            bitString |= WebInspector.TypeSet.TypeBit.Integer;
+        if (typeSet.isNumber)
+            bitString |= WebInspector.TypeSet.TypeBit.Number;
+        if (typeSet.isString)
+            bitString |= WebInspector.TypeSet.TypeBit.String;
+        if (typeSet.isObject)
+            bitString |= WebInspector.TypeSet.TypeBit.Object;
+        if (typeSet.isSymbol)
+            bitString |= WebInspector.TypeSet.TypeBit.Symbol;
+        console.assert(bitString);
+
+        this._typeSet = typeSet;
+        this._bitString = bitString;
+        this._primitiveTypeNames = null;
+    }
+
+    // Static
+
+    static fromPayload(payload)
+    {
+        return new WebInspector.TypeSet(payload);
+    }
+
+    // Public
+
+    isContainedIn(test)
+    {
+        // This function checks if types in bitString are contained in the types described by the 'test' bitstring. (i.e we haven't seen more types than 'test').
+        // We have seen fewer or equal number of types as 'test' if ANDing bitString with test doesn't zero out any of our bits.
+
+        // For example:
+
+        // 0b0110 (bitString)
+        // 0b1111 (test)
+        // ------ (AND)
+        // 0b0110 == bitString
+
+        // 0b0110 (bitString)
+        // 0b0010 (test)
+        // ------ (AND)
+        // 0b0010 != bitString
+
+        return this._bitString && (this._bitString & test) === this._bitString;
+    }
+
+    get primitiveTypeNames()
+    {
+        if (this._primitiveTypeNames)
+            return this._primitiveTypeNames;
+
+        this._primitiveTypeNames = [];
+        var typeSet = this._typeSet;
+        if (typeSet.isUndefined)
+            this._primitiveTypeNames.push("Undefined");
+        if (typeSet.isNull)
+            this._primitiveTypeNames.push("Null");
+        if (typeSet.isBoolean)
+            this._primitiveTypeNames.push("Boolean");
+        if (typeSet.isString)
+            this._primitiveTypeNames.push("String");
+        if (typeSet.isSymbol)
+            this._primitiveTypeNames.push("Symbol");
+
+        // It's implied that type Integer is contained in type Number. Don't put 
+        // both 'Integer' and 'Number' into the set because this could imply that 
+        // Number means to Double instead of Double|Integer.
+        if (typeSet.isNumber)
+            this._primitiveTypeNames.push("Number");
+        else if (typeSet.isInteger)
+            this._primitiveTypeNames.push("Integer");
+
+        return this._primitiveTypeNames;
+    }
+};
+
+WebInspector.TypeSet.TypeBit = {
+    "Function"    :  0x1,
+    "Undefined"   :  0x2,
+    "Null"        :  0x4,
+    "Boolean"     :  0x8,
+    "Integer"     :  0x10,
+    "Number"      :  0x20,
+    "String"      :  0x40,
+    "Object"      :  0x80,
+    "Symbol"      :  0x100
+};
+
+WebInspector.TypeSet.NullOrUndefinedTypeBits = WebInspector.TypeSet.TypeBit.Null | WebInspector.TypeSet.TypeBit.Undefined;
diff --git a/Source/WebInspectorUI/UserInterface/Models/WrappedPromise.js b/Source/WebInspectorUI/UserInterface/Models/WrappedPromise.js
new file mode 100644
index 000000000..7eb2fcc2b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/WrappedPromise.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.WrappedPromise = class WrappedPromise
+{
+    constructor(work)
+    {
+        this._promise = new Promise(function(resolve, reject) {
+            this._resolve = resolve;
+            this._reject = reject;
+
+            if (work && typeof work === "function")
+                work();
+        }.bind(this));
+    }
+
+    // Public
+
+    get promise()
+    {
+        return this._promise;
+    }
+
+    resolve(value)
+    {
+        this._resolve(value);
+    }
+
+    reject(value)
+    {
+        this._reject(value);
+    }
+}
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/NavigationBar.css b/Source/WebInspectorUI/UserInterface/NavigationBar.css
deleted file mode 100644
index 082de70a6..000000000
--- a/Source/WebInspectorUI/UserInterface/NavigationBar.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.navigation-bar {
-    display: -webkit-flex;
-    -webkit-justify-content: center;
-    -webkit-flex-wrap: wrap;
-
-    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
-    border-bottom: 1px solid rgb(179, 179, 179);
-
-    height: 22px;
-
-    white-space: nowrap;
-    overflow: hidden;
-
-    outline: none;
-}
-
-.navigation-bar .item {
-    display: -webkit-flex;
-    -webkit-align-items: center;
-    -webkit-flex-wrap: wrap;
-
-    height: 21px;
-    outline: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/NavigationBar.js b/Source/WebInspectorUI/UserInterface/NavigationBar.js
deleted file mode 100644
index c13c9a83d..000000000
--- a/Source/WebInspectorUI/UserInterface/NavigationBar.js
+++ /dev/null
@@ -1,451 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.NavigationBar = function(element, navigationItems, role, label) {
-    WebInspector.Object.call(this);
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(this.constructor.StyleClassName || WebInspector.NavigationBar.StyleClassName);
-    this._element.tabIndex = 0;
-    
-    if (role)
-        this._element.setAttribute("role", role);
-    if (label)
-        this._element.setAttribute("aria-label", label);
-
-    this._element.addEventListener("focus", this._focus.bind(this), false);
-    this._element.addEventListener("blur", this._blur.bind(this), false);
-    this._element.addEventListener("keydown", this._keyDown.bind(this), false);
-    this._element.addEventListener("mousedown", this._mouseDown.bind(this), false);
-
-    document.addEventListener("load", this.updateLayout.bind(this), false);
-
-    this._styleElement = document.createElement("style");
-
-    this._navigationItems = [];
-
-    if (navigationItems) {
-        for (var i = 0; i < navigationItems.length; ++i)
-            this.addNavigationItem(navigationItems[i]);
-    }
-
-    document.head.appendChild(this._styleElement);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.NavigationBar);
-
-WebInspector.NavigationBar.StyleClassName = "navigation-bar";
-WebInspector.NavigationBar.CollapsedStyleClassName = "collapsed";
-
-WebInspector.NavigationBar.Event = {
-    NavigationItemSelected: "navigation-bar-navigation-item-selected"
-};
-
-WebInspector.NavigationBar.prototype = {
-    constructor: WebInspector.NavigationBar,
-
-    // Public
-
-    addNavigationItem: function(navigationItem, parentElement)
-    {
-        return this.insertNavigationItem(navigationItem, this._navigationItems.length, parentElement);
-    },
-
-    insertNavigationItem: function(navigationItem, index, parentElement)
-    {
-        console.assert(navigationItem instanceof WebInspector.NavigationItem);
-        if (!(navigationItem instanceof WebInspector.NavigationItem))
-            return;
-
-        if (navigationItem.parentNavigationBar)
-            navigationItem.parentNavigationBar.removeNavigationItem(navigationItem);
-
-        navigationItem._parentNavigationBar = this;
-
-        console.assert(index >= 0 && index <= this._navigationItems.length);
-        index = Math.max(0, Math.min(index, this._navigationItems.length));
-
-        this._navigationItems.splice(index, 0, navigationItem);
-
-        if (!parentElement)
-            parentElement = this._element;
-
-        var nextSibling = this._navigationItems[index + 1];
-        var nextSiblingElement = nextSibling ? nextSibling.element : null;
-        if (nextSiblingElement && nextSiblingElement.parentNode !== parentElement)
-            nextSiblingElement = null;
-
-        parentElement.insertBefore(navigationItem.element, nextSiblingElement);
-
-        this._minimumWidthNeedsRecalculation = true;
-        this._needsStyleUpdated = true;
-
-        this.updateLayoutSoon();
-
-        return navigationItem;
-    },
-
-    removeNavigationItem: function(navigationItemOrIdentifierOrIndex, index)
-    {
-        var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
-        if (!navigationItem)
-            return;
-
-        navigationItem._parentNavigationBar = null;
-
-        if (this._selectedNavigationItem === navigationItem)
-            this.selectedNavigationItem = null;
-
-        this._navigationItems.remove(navigationItem);
-        navigationItem.element.remove();
-
-        this._minimumWidthNeedsRecalculation = true;
-        this._needsStyleUpdated = true;
-
-        this.updateLayoutSoon();
-
-        return navigationItem;
-    },
-
-    updateLayoutSoon: function()
-    {
-        if (this._updateLayoutTimeout)
-            return;
-
-        this._needsLayout = true;
-
-        function update()
-        {
-            delete this._updateLayoutTimeout;
-
-            if (this._needsLayout || this._needsStyleUpdated)
-                this.updateLayout();
-        }
-
-        this._updateLayoutTimeout = setTimeout(update.bind(this), 0);
-    },
-
-    updateLayout: function()
-    {
-        if (this._updateLayoutTimeout) {
-            clearTimeout(this._updateLayoutTimeout);
-            delete this._updateLayoutTimeout;
-        }
-
-        if (this._needsStyleUpdated)
-            this._updateStyle();
-
-        this._needsLayout = false;
-
-        if (typeof this.customUpdateLayout === "function") {
-            this.customUpdateLayout();
-            return;
-        }
-
-        // Remove the collapsed style class to test if the items can fit at full width.
-        this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
-
-        // Tell each navigation item to update to full width if needed.
-        for (var i = 0; i < this._navigationItems.length; ++i)
-            this._navigationItems[i].updateLayout(true);
-
-        var totalItemWidth = 0;
-        for (var i = 0; i < this._navigationItems.length; ++i) {
-            // Skip flexible space items since they can take up no space at the minimum width.
-            if (this._navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
-                continue;
-
-            totalItemWidth += this._navigationItems[i].element.offsetWidth;
-        }
-
-        var barWidth = this._element.offsetWidth;
-
-        // Add the collapsed class back if the items are wider than the bar.
-        if (totalItemWidth > barWidth)
-            this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
-
-        // Give each navigation item the opportunity to collapse further.
-        for (var i = 0; i < this._navigationItems.length; ++i)
-            this._navigationItems[i].updateLayout();
-    },
-
-    get selectedNavigationItem()
-    {
-        return this._selectedNavigationItem || null;
-    },
-
-    set selectedNavigationItem(navigationItemOrIdentifierOrIndex)
-    {
-        var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
-
-        // Only radio navigation items can be selected.
-        if (!(navigationItem instanceof WebInspector.RadioButtonNavigationItem))
-            navigationItem = null;
-
-        if (this._selectedNavigationItem === navigationItem)
-            return;
-
-        if (this._selectedNavigationItem)
-            this._selectedNavigationItem.selected = false;
-
-        this._selectedNavigationItem = navigationItem || null;
-
-        if (this._selectedNavigationItem)
-            this._selectedNavigationItem.selected = true;
-
-        // When the mouse is down don't dispatch the selected event, it will be dispatched on mouse up.
-        // This prevents sending the event while the user is scrubbing the bar.
-        if (!this._mouseIsDown)
-            this.dispatchEventToListeners(WebInspector.NavigationBar.Event.NavigationItemSelected);
-    },
-
-    get navigationItems()
-    {
-        return this._navigationItems;
-    },
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get minimumWidth()
-    {
-        if (typeof this._minimumWidth === "undefined" || this._minimumWidthNeedsRecalculation) {
-            this._minimumWidth = this._calculateMinimumWidth();
-            delete this._minimumWidthNeedsRecalculation;
-        }
-
-        return this._minimumWidth;
-    },
-
-    get sizesToFit()
-    {
-        // Can be overriden by subclasses.
-        return false;
-    },
-
-    // Private
-
-    _findNavigationItem: function(navigationItemOrIdentifierOrIndex)
-    {
-        var navigationItem = null;
-
-        if (navigationItemOrIdentifierOrIndex instanceof WebInspector.NavigationItem) {
-            if (this._navigationItems.contains(navigationItemOrIdentifierOrIndex))
-                navigationItem = navigationItemOrIdentifierOrIndex;
-        } else if (typeof navigationItemOrIdentifierOrIndex === "number") {
-            navigationItem = this._navigationItems[navigationItemOrIdentifierOrIndex];
-        } else if (typeof navigationItemOrIdentifierOrIndex === "string") {
-            for (var i = 0; i < this._navigationItems.length; ++i) {
-                if (this._navigationItems[i].identifier === navigationItemOrIdentifierOrIndex) {
-                    navigationItem = this._navigationItems[i];
-                    break;
-                }
-            }
-        }
-
-        return navigationItem;
-    },
-
-    _mouseDown: function(event)
-    {
-        // Only handle left mouse clicks.
-        if (event.button !== 0)
-            return;
-
-        // Remove the tabIndex so clicking the navigation bar does not give it focus.
-        // Only keep the tabIndex if already focused from keyboard navigation. This matches Xcode.
-        if (!this._focused)
-            this._element.removeAttribute("tabindex");
-
-        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
-        if (!itemElement || !itemElement.navigationItem)
-            return;
-
-        this._previousSelectedNavigationItem = this.selectedNavigationItem;
-        this.selectedNavigationItem = itemElement.navigationItem;
-
-        this._mouseIsDown = true;
-
-        this._mouseMovedEventListener = this._mouseMoved.bind(this);
-        this._mouseUpEventListener = this._mouseUp.bind(this);
-
-        // Register these listeners on the document so we can track the mouse if it leaves the resizer.
-        document.addEventListener("mousemove", this._mouseMovedEventListener, false);
-        document.addEventListener("mouseup", this._mouseUpEventListener, false);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _mouseMoved: function(event)
-    {
-        console.assert(event.button === 0);
-        console.assert(this._mouseIsDown);
-        if (!this._mouseIsDown)
-            return;
-
-        event.preventDefault();
-        event.stopPropagation();
-
-        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
-        if (!itemElement || !itemElement.navigationItem) {
-            // Find the element that is at the X position of the mouse, even when the mouse is no longer
-            // vertically in the navigation bar.
-            var element = document.elementFromPoint(event.pageX, this._element.totalOffsetTop);
-            if (!element)
-                return;
-
-            itemElement = element.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
-            if (!itemElement || !itemElement.navigationItem)
-                return;
-        }
-
-        if (this.selectedNavigationItem)
-            this.selectedNavigationItem.active = false;
-
-        this.selectedNavigationItem = itemElement.navigationItem;
-
-        this.selectedNavigationItem.active = true;
-    },
-
-    _mouseUp: function(event)
-    {
-        console.assert(event.button === 0);
-        console.assert(this._mouseIsDown);
-        if (!this._mouseIsDown)
-            return;
-
-        if (this.selectedNavigationItem)
-            this.selectedNavigationItem.active = false;
-
-        this._mouseIsDown = false;
-
-        document.removeEventListener("mousemove", this._mouseMovedEventListener, false);
-        document.removeEventListener("mouseup", this._mouseUpEventListener, false);
-
-        delete this._mouseMovedEventListener;
-        delete this._mouseUpEventListener;
-
-        // Restore the tabIndex so the navigation bar can be in the keyboard tab loop.
-        this._element.tabIndex = 0;
-
-        // Dispatch the selected event here since the selectedNavigationItem setter surpresses it
-        // while the mouse is down to prevent sending it while scrubbing the bar.
-        if (this._previousSelectedNavigationItem !== this.selectedNavigationItem)
-            this.dispatchEventToListeners(WebInspector.NavigationBar.Event.NavigationItemSelected);
-
-        delete this._previousSelectedNavigationItem;
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _keyDown: function(event)
-    {
-        if (!this._focused)
-            return;
-
-        if (event.keyIdentifier !== "Left" && event.keyIdentifier !== "Right")
-            return;
-
-        event.preventDefault();
-        event.stopPropagation();
-
-        var selectedNavigationItemIndex = this._navigationItems.indexOf(this._selectedNavigationItem);
-
-        if (event.keyIdentifier === "Left") {
-            if (selectedNavigationItemIndex === -1)
-                selectedNavigationItemIndex = this._navigationItems.length;
-
-            do {
-                selectedNavigationItemIndex = Math.max(0, selectedNavigationItemIndex - 1);
-            } while (selectedNavigationItemIndex && !(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem));
-        } else if (event.keyIdentifier === "Right") {
-            do {
-                selectedNavigationItemIndex = Math.min(selectedNavigationItemIndex + 1, this._navigationItems.length - 1);
-            } while (selectedNavigationItemIndex < this._navigationItems.length - 1 && !(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem));
-        }
-
-        if (!(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem))
-            return;
-
-        this.selectedNavigationItem = this._navigationItems[selectedNavigationItemIndex];
-    },
-
-    _focus: function(event)
-    {
-        this._focused = true;
-    },
-
-    _blur: function(event)
-    {
-        this._focused = false;
-    },
-
-    _updateStyle: function()
-    {
-        this._needsStyleUpdated = false;
-
-        var parentSelector = "." + (this.constructor.StyleClassName || WebInspector.NavigationBar.StyleClassName);
-
-        var styleText = "";
-        for (var i = 0; i < this._navigationItems.length; ++i) {
-            if (!this._navigationItems[i].generateStyleText)
-                continue;
-            if (styleText)
-                styleText += "\n";
-            styleText += this._navigationItems[i].generateStyleText(parentSelector);
-        }
-
-        this._styleElement.textContent = styleText;
-    },
-
-    _calculateMinimumWidth: function()
-    {
-        var wasCollapsed = this._element.classList.contains(WebInspector.NavigationBar.CollapsedStyleClassName)
-
-        // Add the collapsed style class to calculate the width of the items when they are collapsed.
-        if (!wasCollapsed)
-            this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
-
-        var totalItemWidth = 0;
-        for (var i = 0; i < this._navigationItems.length; ++i) {
-            // Skip flexible space items since they can take up no space at the minimum width.
-            if (this._navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
-                continue;
-            totalItemWidth += this._navigationItems[i].element.offsetWidth;
-        }
-
-        // Remove the collapsed style class if we were not collapsed before.
-        if (!wasCollapsed)
-            this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
-
-        return totalItemWidth;
-    }
-};
-
-WebInspector.NavigationBar.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NavigationItem.js b/Source/WebInspectorUI/UserInterface/NavigationItem.js
deleted file mode 100644
index fef3e3a3f..000000000
--- a/Source/WebInspectorUI/UserInterface/NavigationItem.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.NavigationItem = function(identifier, role, label) {
-    WebInspector.Object.call(this);
-
-    this._identifier = identifier || null;
-
-    this._element = document.createElement("div");
-    
-    if (role) 
-        this._element.setAttribute("role", role);
-    if (label)
-        this._element.setAttribute("aria-label", label);
-
-    var classNames = this._classNames;
-    for (var i = 0; i < classNames.length; ++i)
-        this._element.classList.add(classNames[i]);
-
-    this._element.navigationItem = this;
-};
-
-WebInspector.NavigationItem.StyleClassName = "item";
-WebInspector.NavigationItem.HiddenStyleClassName = "hidden";
-
-
-WebInspector.NavigationItem.prototype = {
-    constructor: WebInspector.NavigationItem,
-
-    // Public
-
-    get identifier()
-    {
-        return this._identifier;
-    },
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get parentNavigationBar()
-    {
-        return this._parentNavigationBar;
-    },
-
-    updateLayout: function(expandOnly)
-    {
-        // Implemented by subclasses.
-    },
-
-    get hidden()
-    {
-        return this._element.classList.contains(WebInspector.NavigationItem.HiddenStyleClassName);
-    },
-
-    set hidden(flag)
-    {
-        if (flag)
-            this._element.classList.add(WebInspector.NavigationItem.HiddenStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.NavigationItem.HiddenStyleClassName);
-
-        if (this._parentNavigationBar)
-            this._parentNavigationBar.updateLayoutSoon();
-    },
-
-    // Private
-
-    get _classNames()
-    {
-        var classNames = [WebInspector.NavigationItem.StyleClassName];
-        if (this._identifier)
-            classNames.push(this._identifier);
-        if (this._additionalClassNames instanceof Array)
-            classNames = classNames.concat(this._additionalClassNames);
-        return classNames;
-    }
-}
-
-WebInspector.NavigationItem.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css
deleted file mode 100644
index e4efbe9d5..000000000
--- a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.css
+++ /dev/null
@@ -1,352 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar > .panel.navigation > .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 21px;
-
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-.sidebar > .panel.navigation > .filter-bar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.sidebar > .panel.navigation > .overflow-shadow {
-    position: absolute;
-    bottom: 21px;
-    left: 0;
-    right: 0;
-    height: 5px;
-
-    pointer-events: none;
-
-    background-image: -webkit-radial-gradient(center, ellipse closest-side, rgba(0, 0, 0, 0.2) 25%, transparent),
-        -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0125), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.0125));
-    background-size: 125% 15px, 100% 1px;
-    background-position: top center, bottom center;
-    background-repeat: no-repeat;
-
-    opacity: 0;
-}
-
-.sidebar > .panel.navigation > .overflow-shadow.top {
-    top: 21px;
-    bottom: initial;
-    background-position: bottom center, top center;
-}
-
-.sidebar > .panel.navigation > .empty-content-placeholder {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 21px;
-
-    display: -webkit-flex;
-
-    -webkit-justify-content: center;
-    -webkit-align-items: center;
-}
-
-.sidebar > .panel.navigation > .empty-content-placeholder > .message {
-    display: inline-block;
-    white-space: nowrap;
-
-    font-family: "Lucida Grande", sans-serif;
-    font-size: 13px;
-
-    color: white;
-    background-color: rgba(0, 0, 0, 0.15);
-    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;
-    box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 0, rgba(255, 255, 255, 0.4) 0 1px 0;
-
-    border-radius: 6px;
-    padding: 5px 15px 6px;
-}
-
-.navigation-sidebar-panel-content-tree-outline,
-.navigation-sidebar-panel-content-tree-outline .children {
-    position: relative;
-
-    padding: 0;
-    margin: 0;
-
-    outline: none;
-
-    list-style: none;
-
-    font-family: "Lucida Grande", "Helvetica", sans-serif;
-    font-size: 11px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .children {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline .children.expanded {
-    display: block;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item {
-    position: relative;
-
-    height: 36px;
-    line-height: 34px;
-
- /* The item depth padding style rules are generated by NavigationSidebarPanel.js.
-    Any changes to this padding needs to be changed there too. */
-
-    padding: 0 5px;
-
-    border-top: 1px solid transparent;
-
-    white-space: nowrap;
-}
-
-.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons > .children {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline > .children.hide-disclosure-buttons > .children {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) .icon {
-    margin-left: 16px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .disclosure-button {
-    display: none;
-
-    float: left;
-
-    width: 16px;
-    height: 100%;
-
-    border: 0;
-
-    background-color: transparent;
-    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-normal);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 13px 13px;
-
-    -webkit-appearance: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline.hide-disclosure-buttons .item .disclosure-button {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.parent .disclosure-button {
-    display: block;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.selected .disclosure-button {
-    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-closed-selected) !important;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.expanded .disclosure-button {
-    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-normal);
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.selected.expanded .disclosure-button {
-    background-image: -webkit-canvas(navigation-sidebar-panel-disclosure-triangle-open-selected) !important;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .icon {
-    float: left;
-
-    width: 32px;
-    height: 32px;
-
-    margin-top: 1px;
-    margin-right: 3px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .status {
-    float: right;
-
-    height: 16px;
-
-    margin-top: 9px;
-    margin-left: 4px;
-
-    line-height: 1em;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .status:empty {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.selected {
-    color: white;
-
-    border-top: 1px solid rgb(162, 177, 201);
-
-    background-image: -webkit-linear-gradient(top, rgb(175, 190, 213), rgb(130, 151, 182));
-    background-origin: padding;
-    background-clip: padding;
-}
-
-.navigation-sidebar-panel-content-tree-outline:focus .item.selected {
-    border-top: 1px solid rgb(148, 174, 193);
-    background-image: -webkit-linear-gradient(top, rgb(154, 180, 203), rgb(112, 139, 176));
-}
-
-body.window-inactive .navigation-sidebar-panel-content-tree-outline .item.selected {
-    border-top: 1px solid rgb(168, 168, 168);
-    background-image: -webkit-linear-gradient(top, rgb(194, 194, 194), rgb(158, 158, 158));
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .titles {
-    position: relative;
-    top: 5px;
-
-    line-height: 11px;
-
-    padding-bottom: 1px;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .highlighted {
-    background-color: rgba(235, 215, 38, 0.2);
-    border-bottom: 1px solid rgb(237, 202, 71);
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle {
-    top: 10px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .title::after {
-    content: "\A"; /* Newline */
-    white-space: pre;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .subtitle {
-    font-size: 9px;
-    color: rgba(0, 0, 0, 0.7);
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.selected .subtitle {
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.navigation-sidebar-panel-content-tree-outline .item .titles.no-subtitle .subtitle,
-.navigation-sidebar-panel-content-tree-outline .item .subtitle:empty {
-    display: none;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item,
-.navigation-sidebar-panel-content-tree-outline .children.small .item,
-.navigation-sidebar-panel-content-tree-outline .item.small {
-    height: 20px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line {
-    height: 26px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .icon,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .icon,
-.navigation-sidebar-panel-content-tree-outline .item.small .icon {
-    width: 16px;
-    height: 16px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .status,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .status,
-.navigation-sidebar-panel-content-tree-outline .item.small .status {
-    margin-top: 1px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .status .indeterminate-progress-spinner,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .status .indeterminate-progress-spinner,
-.navigation-sidebar-panel-content-tree-outline .item.small .status .indeterminate-progress-spinner {
-    margin-top: 1px;
-    width: 14px;
-    height: 14px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .titles,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .titles,
-.navigation-sidebar-panel-content-tree-outline .item.small .titles {
-    top: 2px;
-    line-height: normal;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item .status,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .status,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .status {
-    margin-top: 4px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item .titles,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .titles,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles {
-    top: 0;
-    line-height: 11px;
-}
-
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .titles.no-subtitle {
-    top: 6px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small .item .subtitle,
-.navigation-sidebar-panel-content-tree-outline .children.small .item .subtitle,
-.navigation-sidebar-panel-content-tree-outline .item.small .subtitle {
-    font-size: inherit;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small.two-line .item .icon,
-.navigation-sidebar-panel-content-tree-outline .children.small.two-line .item .icon,
-.navigation-sidebar-panel-content-tree-outline .item.small.two-line .icon {
-    margin-top: 4px;
-}
-
-.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .title::after,
-.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .title::after,
-.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .title::after {
-    content: "";
-}
-
-.navigation-sidebar-panel-content-tree-outline.small:not(.two-line) .item .subtitle::before,
-.navigation-sidebar-panel-content-tree-outline .children.small:not(.two-line) .item .subtitle::before,
-.navigation-sidebar-panel-content-tree-outline .item.small:not(.two-line) .subtitle::before {
-    content: " — ";
-}
diff --git a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js
deleted file mode 100644
index 498afc146..000000000
--- a/Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js
+++ /dev/null
@@ -1,507 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, keyboardShortcutKey, autoPruneOldTopLevelResourceTreeElements, autoHideToolbarItemWhenEmpty, wantsTopOverflowShadow, element, role, label) {
-    if (keyboardShortcutKey)
-        this._keyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, keyboardShortcutKey, this.toggle.bind(this));
-
-    if (this._keyboardShortcut) {
-        var showToolTip = WebInspector.UIString("Show the %s navigation sidebar (%s)").format(displayName, this._keyboardShortcut.displayName);
-        var hideToolTip = WebInspector.UIString("Hide the %s navigation sidebar (%s)").format(displayName, this._keyboardShortcut.displayName);
-    } else {
-        var showToolTip = WebInspector.UIString("Show the %s navigation sidebar").format(displayName);
-        var hideToolTip = WebInspector.UIString("Hide the %s navigation sidebar").format(displayName);
-    }
-
-    WebInspector.SidebarPanel.call(this, identifier, displayName, showToolTip, hideToolTip, image, element, role, label || displayName);
-
-    this.element.classList.add(WebInspector.NavigationSidebarPanel.StyleClassName);
-
-    this._autoHideToolbarItemWhenEmpty = autoHideToolbarItemWhenEmpty || false;
-
-    if (autoHideToolbarItemWhenEmpty)
-        this.toolbarItem.hidden = true;
-
-    this._contentElement = document.createElement("div");
-    this._contentElement.className = WebInspector.NavigationSidebarPanel.ContentElementStyleClassName;
-    this._contentElement.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
-    this.element.appendChild(this._contentElement);
-
-    this._contentTreeOutline = this.createContentTreeOutline(true);
-
-    this._filterBar = new WebInspector.FilterBar();
-    this._filterBar.addEventListener(WebInspector.FilterBar.Event.TextFilterDidChange, this._updateFilter, this);
-    this.element.appendChild(this._filterBar.element);
-
-    this._bottomOverflowShadowElement = document.createElement("div");
-    this._bottomOverflowShadowElement.className = WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName;
-    this.element.appendChild(this._bottomOverflowShadowElement);
-
-    if (wantsTopOverflowShadow) {
-        this._topOverflowShadowElement = document.createElement("div");
-        this._topOverflowShadowElement.classList.add(WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName);
-        this._topOverflowShadowElement.classList.add(WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName);
-        this.element.appendChild(this._topOverflowShadowElement);
-    }
-
-    window.addEventListener("resize", this._updateContentOverflowShadowVisibility.bind(this));
-
-    this._filtersSetting = new WebInspector.Setting(identifier + "-navigation-sidebar-filters", {});
-    this._filterBar.filters = this._filtersSetting.value;
-
-    this._emptyContentPlaceholderElement = document.createElement("div");
-    this._emptyContentPlaceholderElement.className = WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName;
-
-    this._emptyContentPlaceholderMessageElement = document.createElement("div");
-    this._emptyContentPlaceholderMessageElement.className = WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName;
-    this._emptyContentPlaceholderElement.appendChild(this._emptyContentPlaceholderMessageElement);
-
-    this._generateStyleRulesIfNeeded();
-    this._generateDisclosureTrianglesIfNeeded();
-
-    if (autoPruneOldTopLevelResourceTreeElements) {
-        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._checkForOldResources, this);
-        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._checkForOldResources, this);
-        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._checkForOldResources, this);
-    }
-};
-
-WebInspector.NavigationSidebarPanel.StyleClassName = "navigation";
-WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
-WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = "top";
-WebInspector.NavigationSidebarPanel.ContentElementStyleClassName = "content";
-WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName = "hidden";
-WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName = "hidden";
-WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
-WebInspector.NavigationSidebarPanel.HideDisclosureButtonsStyleClassName = "hide-disclosure-buttons";
-WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = "empty-content-placeholder";
-WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = "message";
-WebInspector.NavigationSidebarPanel.DisclosureTriangleOpenCanvasIdentifier = "navigation-sidebar-panel-disclosure-triangle-open";
-WebInspector.NavigationSidebarPanel.DisclosureTriangleClosedCanvasIdentifier = "navigation-sidebar-panel-disclosure-triangle-closed";
-WebInspector.NavigationSidebarPanel.DisclosureTriangleNormalCanvasIdentifierSuffix = "-normal";
-WebInspector.NavigationSidebarPanel.DisclosureTriangleSelectedCanvasIdentifierSuffix = "-selected";
-
-WebInspector.NavigationSidebarPanel.prototype = {
-    constructor: WebInspector.NavigationSidebarPanel,
-
-    // Public
-
-    get contentElement()
-    {
-        return this._contentElement;
-    },
-
-    get contentTreeOutlineElement()
-    {
-        return this._contentTreeOutline.element;
-    },
-
-    get contentTreeOutline()
-    {
-        return this._contentTreeOutline;
-    },
-
-    set contentTreeOutline(newTreeOutline)
-    {
-        console.assert(newTreeOutline);
-        if (!newTreeOutline)
-            return;
-
-        if (this._contentTreeOutline)
-            this._contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
-
-        this._contentTreeOutline = newTreeOutline;
-        this._contentTreeOutline.element.classList.remove(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
-
-        this._updateFilter();
-    },
-
-    get contentTreeOutlineToAutoPrune()
-    {
-        return this._contentTreeOutline;
-    },
-
-    get filterBar()
-    {
-        return this._filterBar;
-    },
-
-    createContentTreeOutline: function(dontHideByDefault)
-    {
-        var contentTreeOutlineElement = document.createElement("ol");
-        contentTreeOutlineElement.className = WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName;
-        if (!dontHideByDefault)
-            contentTreeOutlineElement.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementHiddenStyleClassName);
-        this._contentElement.appendChild(contentTreeOutlineElement);
-
-        var contentTreeOutline = new TreeOutline(contentTreeOutlineElement);
-        contentTreeOutline.onadd = this._treeElementAddedOrChanged.bind(this);
-        contentTreeOutline.onchange = this._treeElementAddedOrChanged.bind(this);
-        contentTreeOutline.onexpand = this._treeElementExpandedOrCollapsed.bind(this);
-        contentTreeOutline.oncollapse = this._treeElementExpandedOrCollapsed.bind(this);
-        contentTreeOutline.allowsRepeatSelection = true;
-
-        return contentTreeOutline;
-    },
-
-    treeElementForRepresentedObject: function(representedObject)
-    {
-        return this._contentTreeOutline.getCachedTreeElement(representedObject);
-    },
-
-    cookieForContentView: function(contentView)
-    {
-        // Implemented by subclasses.
-        return null;
-    },
-
-    showContentViewForCookie: function(contentViewCookie)
-    {
-        // Implemented by subclasses.
-    },
-
-    showContentViewForCurrentSelection: function()
-    {
-        // Reselect the selected tree element to cause the content view to be shown as well. <rdar://problem/10854727>
-        var selectedTreeElement = this._contentTreeOutline.selectedTreeElement;
-        if (selectedTreeElement)
-            selectedTreeElement.select();
-    },
-
-    showEmptyContentPlaceholder: function(message, hideToolbarItem)
-    {
-        console.assert(message);
-
-        this._contentElement.classList.add(WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName);
-        this._emptyContentPlaceholderMessageElement.textContent = message;
-        this.element.appendChild(this._emptyContentPlaceholderElement);
-
-        this._hideToolbarItemWhenEmpty = hideToolbarItem || false;
-        this._updateToolbarItemVisibility();
-        this._updateContentOverflowShadowVisibility();
-    },
-
-    hideEmptyContentPlaceholder: function()
-    {
-        this._contentElement.classList.remove(WebInspector.NavigationSidebarPanel.ContentElementHiddenStyleClassName);
-        if (this._emptyContentPlaceholderElement.parentNode)
-            this._emptyContentPlaceholderElement.parentNode.removeChild(this._emptyContentPlaceholderElement);
-
-        this._hideToolbarItemWhenEmpty = false;
-        this._updateToolbarItemVisibility();
-        this._updateContentOverflowShadowVisibility();
-    },
-
-    updateEmptyContentPlaceholder: function(message)
-    {
-        this._updateToolbarItemVisibility();
-
-        if (!this._contentTreeOutline.children.length) {
-            // No tree elements, so no results.
-            this.showEmptyContentPlaceholder(message);
-        } else if (!this._emptyFilterResults) {
-            // There are tree elements, and not all of them are hidden by the filter.
-            this.hideEmptyContentPlaceholder();
-        }
-    },
-
-    applyFiltersToTreeElement: function(treeElement)
-    {
-        if (!this._filterBar.hasActiveFilters()) {
-            // No filters, so make everything visible.
-            treeElement.hidden = false;
-
-            // If this tree element was expanded during filtering, collapse it again.
-            if (treeElement.expanded && treeElement.__wasExpandedDuringFiltering) {
-                delete treeElement.__wasExpandedDuringFiltering;
-                treeElement.collapse();
-            }
-
-            return;
-        }
-
-        // Get the filterable data from the tree element.
-        var filterableData = treeElement.filterableData;
-        if (!filterableData)
-            return;
-
-        var self = this;
-        function matchTextFilter(input)
-        {
-            if (!self._textFilterRegex)
-                return true;
-
-            // Convert to a single item array if needed.
-            if (!(input instanceof Array))
-                input = [input];
-
-            // Loop over all the inputs and try to match them.
-            for (var i = 0; i < input.length; ++i) {
-                if (!input[i])
-                    continue;
-                if (self._textFilterRegex.test(input[i]))
-                    return true;
-            }
-
-            // No inputs matched.
-            return false;
-        }
-
-        function makeVisible()
-        {
-            // Make this element visible.
-            treeElement.hidden = false;
-
-            // Make the ancestors visible and expand them.
-            var currentAncestor = treeElement.parent;
-            while (currentAncestor && !currentAncestor.root) {
-                currentAncestor.hidden = false;
-
-                if (!currentAncestor.expanded) {
-                    currentAncestor.__wasExpandedDuringFiltering = true;
-                    currentAncestor.expand();
-                }
-
-                currentAncestor = currentAncestor.parent;
-            }
-        }
-
-        if (matchTextFilter(filterableData.text)) {
-            // Make this element visible since it matches.
-            makeVisible();
-            return;
-        }
-
-        // Make this element invisible since it does not match.
-        treeElement.hidden = true;
-    },
-
-    show: function()
-    {
-        if (!this.parentSidebar)
-            return;
-
-        WebInspector.SidebarPanel.prototype.show.call(this);
-
-        this.contentTreeOutlineElement.focus();
-    },
-
-    shown: function()
-    {
-        WebInspector.SidebarPanel.prototype.shown.call(this);
-
-        this._updateContentOverflowShadowVisibility();
-
-        // Force the navigation item to be visible. This makes sure it is
-        // always visible when the panel is shown.
-        this.toolbarItem.hidden = false;
-    },
-
-    hidden: function()
-    {
-        WebInspector.SidebarPanel.prototype.hidden.call(this);
-
-        this._updateToolbarItemVisibility();
-    },
-
-    // Private
-
-    _updateContentOverflowShadowVisibility: function()
-    {
-        var scrollHeight = this._contentElement.scrollHeight;
-        var offsetHeight = this._contentElement.offsetHeight;
-
-        if (scrollHeight < offsetHeight) {
-            if (this._topOverflowShadowElement)
-                this._topOverflowShadowElement.style.opacity = 0;
-            this._bottomOverflowShadowElement.style.opacity = 0;
-            return;
-        }
-
-        const edgeThreshold = 10;
-        var scrollTop = this._contentElement.scrollTop;
-
-        var topCoverage = Math.min(scrollTop, edgeThreshold);
-        var bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold))
-
-        if (this._topOverflowShadowElement)
-            this._topOverflowShadowElement.style.opacity = (topCoverage / edgeThreshold).toFixed(1);
-        this._bottomOverflowShadowElement.style.opacity = (1 - (bottomCoverage / edgeThreshold)).toFixed(1);
-    },
-
-    _updateToolbarItemVisibility: function()
-    {
-        // Hide the navigation item if requested or auto-hiding and we are not visible and we are empty.
-        var shouldHide = ((this._hideToolbarItemWhenEmpty || this._autoHideToolbarItemWhenEmpty) && !this.selected && !this._contentTreeOutline.children.length);
-        this.toolbarItem.hidden = shouldHide;
-    },
-
-    _checkForEmptyFilterResults: function()
-    {
-        // No tree elements, so don't touch the empty content placeholder.
-        if (!this._contentTreeOutline.children.length)
-            return;
-
-        // Iterate over all the top level tree elements. If any are visible, return early.
-        var currentTreeElement = this._contentTreeOutline.children[0];
-        while (currentTreeElement) {
-            if (!currentTreeElement.hidden) {
-                // Not hidden, so hide any empty content message.
-                this.hideEmptyContentPlaceholder();
-                this._emptyFilterResults = false;
-                return;
-            }
-
-            currentTreeElement = currentTreeElement.nextSibling;
-        }
-
-        // All top level tree elements are hidden, so filtering hid everything. Show a message.
-        this.showEmptyContentPlaceholder(WebInspector.UIString("No Filter Results"));
-        this._emptyFilterResults = true;
-    },
-
-    _updateFilter: function()
-    {
-        var filters = this._filterBar.filters;
-        this._textFilterRegex = simpleGlobStringToRegExp(filters.text, "i");
-        this._filtersSetting.value = filters;
-
-        // Update the whole tree.
-        var currentTreeElement = this._contentTreeOutline.children[0];
-        while (currentTreeElement && !currentTreeElement.root) {
-            this.applyFiltersToTreeElement(currentTreeElement);
-            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
-        }
-
-        this._checkForEmptyFilterResults();
-        this._updateContentOverflowShadowVisibility();
-    },
-
-    _treeElementAddedOrChanged: function(treeElement)
-    {
-        // Apply the filters to the tree element and its descendants.
-        var currentTreeElement = treeElement;
-        while (currentTreeElement && !currentTreeElement.root) {
-            this.applyFiltersToTreeElement(currentTreeElement);
-            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, treeElement, false);
-        }
-
-        this._checkForEmptyFilterResults();
-        this._updateContentOverflowShadowVisibility();
-    },
-
-    _treeElementExpandedOrCollapsed: function(treeElement)
-    {
-        this._updateContentOverflowShadowVisibility();
-    },
-
-    _generateStyleRulesIfNeeded: function()
-    {
-        if (WebInspector.NavigationSidebarPanel._styleElement)
-            return;
-
-        WebInspector.NavigationSidebarPanel._styleElement = document.createElement("style");
-
-        const maximumSidebarTreeDepth = 15;
-        const baseLeftPadding = 5; // Matches the padding in NavigationSidebarPanel.css for the item class. Keep in sync.
-        const depthPadding = 16;
-
-        var styleText = "";
-        var childrenSubstring = " > ";
-        for (var i = 1; i <= maximumSidebarTreeDepth; ++i) {
-            childrenSubstring += ".children > ";
-            styleText += "." + WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName + childrenSubstring + ".item { ";
-            styleText += "padding-left: " + (baseLeftPadding + (depthPadding * i)) + "px; }\n";
-        }
-
-        WebInspector.NavigationSidebarPanel._styleElement.textContent = styleText;
-
-        document.head.appendChild(WebInspector.NavigationSidebarPanel._styleElement);
-    },
-
-    _generateDisclosureTrianglesIfNeeded: function()
-    {
-        if (WebInspector.NavigationSidebarPanel._generatedDisclosureTriangles)
-            return;
-
-        // Set this early instead of in _generateDisclosureTriangle because we don't want multiple panels that are
-        // created at the same time to duplicate the work (even though it would be harmless.)
-        WebInspector.NavigationSidebarPanel._generatedDisclosureTriangles = true;
-
-        var specifications = {};
-        specifications[WebInspector.NavigationSidebarPanel.DisclosureTriangleNormalCanvasIdentifierSuffix] = {
-            fillColor: [112, 126, 139],
-            shadowColor: [255, 255, 255, 0.8],
-            shadowOffsetX: 0,
-            shadowOffsetY: 1,
-            shadowBlur: 0
-        };
-
-        specifications[WebInspector.NavigationSidebarPanel.DisclosureTriangleSelectedCanvasIdentifierSuffix] = {
-            fillColor: [255, 255, 255],
-            shadowColor: [61, 91, 110, 0.8],
-            shadowOffsetX: 0,
-            shadowOffsetY: 1,
-            shadowBlur: 2
-        };
-
-        generateColoredImagesForCSS("Images/DisclosureTriangleSmallOpen.pdf", specifications, 13, 13, WebInspector.NavigationSidebarPanel.DisclosureTriangleOpenCanvasIdentifier);
-        generateColoredImagesForCSS("Images/DisclosureTriangleSmallClosed.pdf", specifications, 13, 13, WebInspector.NavigationSidebarPanel.DisclosureTriangleClosedCanvasIdentifier);
-    },
-
-    _checkForOldResources: function(event)
-    {
-        if (this._checkForOldResourcesTimeoutIdentifier)
-            return;
-
-        function delayedWork()
-        {
-            delete this._checkForOldResourcesTimeoutIdentifier;
-
-            var contentTreeOutline = this.contentTreeOutlineToAutoPrune;
-
-            // Check all the ResourceTreeElements at the top level to make sure their Resource still has a parentFrame in the frame hierarchy.
-            // If the parentFrame is no longer in the frame hierarchy we know it was removed due to a navigation or some other page change and
-            // we should remove the issues for that resource.
-            for (var i = contentTreeOutline.children.length - 1; i >= 0; --i) {
-                var treeElement = contentTreeOutline.children[i];
-                if (!(treeElement instanceof WebInspector.ResourceTreeElement))
-                    continue;
-
-                var resource = treeElement.resource;
-                if (!resource.parentFrame || resource.parentFrame.isDetached())
-                    contentTreeOutline.removeChildAtIndex(i, true, true);
-            }
-
-            if (typeof this._updateEmptyContentPlaceholder === "function")
-                this._updateEmptyContentPlaceholder();
-        }
-
-        // Check on a delay to coalesce multiple calls to _checkForOldResources.
-        this._checkForOldResourcesTimeoutIdentifier = setTimeout(delayedWork.bind(this), 0);
-    }
-};
-
-WebInspector.NavigationSidebarPanel.prototype.__proto__ = WebInspector.SidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkDataGrid.css b/Source/WebInspectorUI/UserInterface/NetworkDataGrid.css
deleted file mode 100644
index 8c62271eb..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkDataGrid.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.network-timeline-decorations {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0; /* Changed by JavaScript */
-    right: 0;
-}
-
-.network-timeline-decorations > .header {
-    border-top: 0;
-}
-
-.network-timeline-decorations > .header > .divider:first-child,
-.network-timeline-decorations > .header > .divider:last-child,
-.network-timeline-decorations > .header > .divider {
-    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2), transparent 85%);
-}
-
-.network-timeline-decorations:not(.sort-active) > .header > .divider:last-child {
-    background-image: none;
-}
-
-.network-timeline-decorations > .header > .divider > .label {
-    top: 6px;
-}
-
-.network-timeline-decorations > .event-markers > .event-marker {
-    z-index: 100; /* Display under the timeline pills. */
-}
-
-.network-datagrid tr > td.timeline-column {
-    position: relative;
-    z-index: 200; /* Display timeline pills over event-markers. */
-}
-
-.network-timeline-decorations > .event-markers > .event-marker-tooltip {
-    z-index: 300; /* Display the tooltip div over everything so tooltips work. */
-}
diff --git a/Source/WebInspectorUI/UserInterface/NetworkDataGrid.js b/Source/WebInspectorUI/UserInterface/NetworkDataGrid.js
deleted file mode 100644
index 65e168dd5..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkDataGrid.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.NetworkDataGrid = function(columns)
-{
-    WebInspector.TimelineDataGrid.call(this, columns);
-    this.element.classList.add(WebInspector.NetworkDataGrid.NetworkDataGridStyleClassName);
-
-    this.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._dataGridSortChanged, this);
-    this.addEventListener(WebInspector.DataGrid.Event.DidLayout, this._dataGridDidLayout, this);
-
-    this._timelineDecorations = new WebInspector.TimelineDecorations;
-    this._timelineDecorations.element.classList.add(WebInspector.NetworkDataGrid.NetworkTimelineDecorationsStyleClassName);
-    this._timelineDecorations.hideHeaderDividers();
-    this.element.appendChild(this._timelineDecorations.element);
-
-    // Network calculators all deal with WebInspector.Resources.
-    this._timeCalculator = new WebInspector.NetworkTransferTimeCalculator;
-
-    this._detailsColumnGroupCollapsedSetting = new WebInspector.Setting("network-data-grid-" + WebInspector.NetworkDataGrid.DetailsColumnGroup + "-collapsed", false);
-    if (this._detailsColumnGroupCollapsedSetting.value)
-        this.collapseColumnGroup(WebInspector.NetworkDataGrid.DetailsColumnGroup);
-}
-
-WebInspector.NetworkDataGrid.NetworkDataGridStyleClassName = "network-datagrid";
-WebInspector.NetworkDataGrid.NetworkTimelineDecorationsStyleClassName = "network-timeline-decorations";
-WebInspector.NetworkDataGrid.NetworkTimelineCollapsedColumnsStyleClassName = "collapsed-details";
-
-WebInspector.NetworkDataGrid.DetailsColumnGroup = "details";
-
-WebInspector.NetworkDataGrid.prototype = {
-    constructor: WebInspector.NetworkDataGrid,
-
-    // Public
-
-    get currentCalculator()
-    {
-        return this._timeCalculator;
-    },
-
-    updateCalculatorBoundariesWithRecord: function(record)
-    {
-        return this.currentCalculator.updateBoundaries(record.resource);
-    },
-
-    updateCalculatorBoundariesWithDataGridNode: function(node)
-    {
-        return this.currentCalculator.updateBoundaries(node.record.resource);
-    },
-
-    updateCalculatorBoundariesWithEventMarker: function(eventMarker)
-    {
-        return this.currentCalculator.updateBoundariesForEventMarker(eventMarker);
-    },
-
-    reset: function()
-    {
-        WebInspector.TimelineDataGrid.prototype.reset.call(this);
-
-        this.currentCalculator.reset();
-
-        this._timelineDecorations.clear();
-        this._updateDecorations();
-    },
-
-    update: function()
-    {
-        this._updateDecorations();
-    },
-
-    // Protected
-
-    willToggleColumnGroup: function(columnGroup, willCollapse)
-    {
-        console.assert(columnGroup === "details");
-
-        if (willCollapse) {
-            console.assert(!this._savedExpandedNetworkColumnWidths);
-            this._savedExpandedNetworkColumnWidths = this.columnWidthsMap();
-        }
-    },
-
-    didToggleColumnGroup: function(columnGroup, didCollapse)
-    {
-        console.assert(columnGroup === "details");
-        console.assert(this._savedExpandedNetworkColumnWidths);
-
-        if (didCollapse) {
-            var newWidths = {};
-            newWidths.name = this._savedExpandedNetworkColumnWidths.name;
-            newWidths.timeline = (100 - newWidths.name);
-
-            this.element.classList.add(WebInspector.NetworkDataGrid.NetworkTimelineCollapsedColumnsStyleClassName);
-            this._timelineDecorations.showHeaderDividers();
-        } else {
-            var newWidths = this._savedExpandedNetworkColumnWidths;
-            delete this._savedExpandedNetworkColumnWidths;
-
-            this.element.classList.remove(WebInspector.NetworkDataGrid.NetworkTimelineCollapsedColumnsStyleClassName);
-            this._timelineDecorations.hideHeaderDividers();
-        }
-
-        this.applyColumnWidthsMap(newWidths);
-
-        this._detailsColumnGroupCollapsedSetting.value = didCollapse;
-    },
-
-    addTimelineEventMarker: function(eventMarker)
-    {
-        this._timelineDecorations.addTimelineEventMarker(eventMarker);
-    },
-
-    // Private
-
-    _dataGridSortChanged: function()
-    {
-        this._updateDecorations(true);
-    },
-
-    _dataGridDidLayout: function()
-    {
-        if (this.selectedNode)
-            this.selectedNode.updateLayout();
-
-        this._updateDecorations();
-    },
-
-    _localizedTimelineHeaderWidth: function()
-    {
-        if (WebInspector.NetworkDataGrid._localizedTimelineWidth !== undefined)
-            return WebInspector.NetworkDataGrid._localizedTimelineWidth;
-
-        var div = document.createElement("div");
-        div.style.position = "absolute";
-        div.style.top = 0;
-        div.style.left = 0;
-        div.style.fontSize = "11px";
-        div.style.fontFamily = "\"Lucida Grande\", sans-serif";
-        div.style.visibility = "hidden";
-        div.textContent = WebInspector.UIString("Timeline");
-
-        document.body.appendChild(div);
-        WebInspector.NetworkDataGrid._localizedTimelineWidth = div.offsetWidth + 20 /* padding */;
-        document.body.removeChild(div);
-
-        return WebInspector.NetworkDataGrid._localizedTimelineWidth;
-    },
-
-    _updateDecorations: function(force)
-    {
-        this._updateDecorationsPosition();
-        this._updateHeaderTimes(force);
-        this._updateEventMarkers();
-    },
-
-    _updateDecorationsPosition: function()
-    {
-        var lastVisibleResizer = null;
-        for (var i = this.resizers.length - 1; i >= 0; --i) {
-            if (this.resizers[i].style.display !== "none") {
-                lastVisibleResizer = this.resizers[i];
-                break;
-            }
-        }
-
-        if (!lastVisibleResizer)
-            return;
-
-        this._timelineDecorations.element.style.left = lastVisibleResizer.style.left;
-    },
-
-    _updateHeaderTimes: function(force)
-    {
-        var calculator = this.currentCalculator;
-        var boundarySpan = calculator.boundarySpan;
-        var isTimelineColumnSorted = this.isColumnSortColumn("timeline");
-
-        if (isTimelineColumnSorted)
-            this._timelineDecorations.element.classList.add("sort-active");
-        else
-            this._timelineDecorations.element.classList.remove("sort-active");
-
-        var leftPadding = this._localizedTimelineHeaderWidth();
-        var rightPadding = isTimelineColumnSorted ? 50 /* Collapse Button and Sort Indicator */ : 27 /* Collapse Button */;
-        this._timelineDecorations.updateHeaderTimes(boundarySpan, leftPadding, rightPadding, force);
-    },
-
-    _updateEventMarkers: function()
-    {
-        var calculator = this.currentCalculator;
-        this._timelineDecorations.updateEventMarkers(calculator.minimumBoundary, calculator.maximumBoundary);
-    },
-}
-
-WebInspector.NetworkDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkGraphCalculator.js b/Source/WebInspectorUI/UserInterface/NetworkGraphCalculator.js
deleted file mode 100644
index f66bc37ef..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkGraphCalculator.js
+++ /dev/null
@@ -1,230 +0,0 @@
-/*
- * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
- * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
- * Copyright (C) 2011 Google Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.NetworkTimeCalculator = function(startAtZero)
-{
-    this.startAtZero = startAtZero;
-    this.reset();
-}
-
-WebInspector.NetworkTimeCalculator.prototype = {
-    get boundarySpan()
-    {
-        return this.maximumBoundary - this.minimumBoundary;
-    },
-
-    reset: function()
-    {
-        this.minimumBoundary = NaN;
-        this.maximumBoundary = NaN;
-    },
-
-    computeBarGraphPercentages: function(resource)
-    {
-        if (!isNaN(resource.requestSentTimestamp))
-            var start = ((resource.requestSentTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
-        else
-            var start = 0;
-
-        if (!isNaN(resource.responseReceivedTimestamp))
-            var middle = ((resource.responseReceivedTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
-        else if (!isNaN(resource.lastTimestamp))
-            var middle = ((resource.lastTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
-        else
-            var middle = (this.startAtZero ? start : 100);
-
-        if (!isNaN(resource.lastTimestamp))
-            var end = ((resource.lastTimestamp - this.minimumBoundary) / this.boundarySpan) * 100;
-        else
-            var end = (this.startAtZero ? middle : 100);
-
-        if (this.startAtZero) {
-            end -= start;
-            middle -= start;
-            start = 0;
-        }
-
-        return {start: start, middle: middle, end: end};
-    },
-
-    computeBarGraphLabels: function(resource)
-    {
-        var rightLabel = "";
-        if (!isNaN(resource.responseReceivedTimestamp) && !isNaN(resource.lastTimestamp))
-            rightLabel = this.formatValue(resource.lastTimestamp - resource.responseReceivedTimestamp);
-
-        var hasLatency = resource.latency > 0;
-        if (hasLatency)
-            var leftLabel = this.formatValue(resource.latency);
-        else
-            var leftLabel = rightLabel;
-
-        if (hasLatency && rightLabel) {
-            var total = this.formatValue(resource.duration);
-            var tooltip = WebInspector.UIString("%s latency, %s download (%s total)").format(leftLabel, rightLabel, total);
-        } else if (hasLatency)
-            var tooltip = WebInspector.UIString("%s latency").format(leftLabel);
-        else if (rightLabel)
-            var tooltip = WebInspector.UIString("%s download").format(rightLabel);
-
-        if (resource.cached)
-            tooltip = WebInspector.UIString("%s (from cache)").format(tooltip);
-        return {left: leftLabel, right: rightLabel, tooltip: tooltip};
-    },
-
-    updateBoundaries: function(resource)
-    {
-        var didChange = false;
-
-        if (this.startAtZero)
-            var lowerBound = 0;
-        else
-            var lowerBound = this._lowerBound(resource);
-
-        if (!isNaN(lowerBound) && (isNaN(this.minimumBoundary) || lowerBound < this.minimumBoundary)) {
-            this.minimumBoundary = lowerBound;
-            didChange = true;
-        }
-
-        var upperBound = this._upperBound(resource);
-        if (!isNaN(upperBound) && (isNaN(this.maximumBoundary) || upperBound > this.maximumBoundary)) {
-            this.maximumBoundary = upperBound;
-            didChange = true;
-        }
-
-        return didChange;
-    },
-
-    updateBoundariesForEventMarker: function(eventMarker)
-    {
-        var didChange = false;
-        var timestamp = eventMarker.timestamp;
-
-        if (!this.startAtZero) {
-            if (isNaN(this.minimumBoundary) || timestamp < this.minimumBoundary) {
-                this.minimumBoundary = timestamp;
-                didChange = true;
-            }
-        }
-
-        // Don't extend the bounds if the timestamp is more than 10% past the current maximum boundary. This prevents dead space.
-        const allowedPercentPastEndForTimestamp = 0.10;
-        // If the timestamp is within 3% of the maximum boundary, extend the boundary anyways to give room for the marker.
-        const allowedPercentNearEndForTimestampToExtendEnd = 0.03;
-        // If the timestamp will cause a new maximum boundary, give 3% extra padding, to ensure we show the marker.
-        const extendPercentPastEnd = 0.03;
-
-        if (isNaN(this.maximumBoundary))
-            this.maximumBoundary = timestamp;
-        else {
-            var boundary = this.maximumBoundary - this.minimumBoundary;
-            console.assert(!isNaN(boundary));
-
-            if (timestamp > this.maximumBoundary) {
-                var percentPastEnd = (timestamp - this.maximumBoundary) / boundary;
-                if (!boundary || percentPastEnd < allowedPercentPastEndForTimestamp) {
-                    var newBoundary = timestamp - this.minimumBoundary;
-                    this.maximumBoundary = timestamp + (newBoundary * extendPercentPastEnd);
-                    didChange = true;
-                }
-            } else {
-                var percentNearEnd = (this.maximumBoundary - timestamp) / boundary;
-                if (percentNearEnd < allowedPercentNearEndForTimestampToExtendEnd) {
-                    this.maximumBoundary = this.maximumBoundary + (boundary * extendPercentPastEnd);
-                    didChange = true;
-                }
-            }
-        }
-
-        return didChange;
-    },
-
-    formatValue: function(value)
-    {
-        return Number.secondsToString(value);
-    },
-
-    _lowerBound: function(resource)
-    {
-        // Implemented by subclasses if not startAtZero.
-        return 0;
-    },
-
-    _upperBound: function(resource)
-    {
-        // Implemented by subclasses.
-        return 0;
-    }
-}
-
-WebInspector.NetworkTimeCalculator.prototype.__proto__ = WebInspector.Object.prototype;
-
-
-/**
- * @constructor
- * @extends {WebInspector.NetworkTimeCalculator}
- */
-WebInspector.NetworkTransferTimeCalculator = function()
-{
-    WebInspector.NetworkTimeCalculator.call(this, false);
-}
-
-WebInspector.NetworkTransferTimeCalculator.prototype = {
-    _lowerBound: function(resource)
-    {
-        return resource.firstTimestamp || NaN;
-    },
-
-    _upperBound: function(resource)
-    {
-        return resource.lastTimestamp || NaN;
-    }
-}
-
-WebInspector.NetworkTransferTimeCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
-
-
-/**
- * @constructor
- * @extends {WebInspector.NetworkTimeCalculator}
- */
-WebInspector.NetworkTransferDurationCalculator = function()
-{
-    WebInspector.NetworkTimeCalculator.call(this, true);
-}
-
-WebInspector.NetworkTransferDurationCalculator.prototype = {
-    _upperBound: function(resource)
-    {
-        return resource.duration || 0;
-    }
-}
-
-WebInspector.NetworkTransferDurationCalculator.prototype.__proto__ = WebInspector.NetworkTimeCalculator.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkObserver.js b/Source/WebInspectorUI/UserInterface/NetworkObserver.js
deleted file mode 100644
index 7cc0e4e0e..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkObserver.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.NetworkObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.NetworkObserver.prototype = {
-    constructor: WebInspector.NetworkObserver,
-
-    // Events defined by the "Network" domain (see WebCore/inspector/Inspector.json).
-
-    requestWillBeSent: function(requestId, frameId, loaderId, documentURL, request, timestamp, initiator, redirectResponse, type)
-    {
-        WebInspector.frameResourceManager.resourceRequestWillBeSent(requestId, frameId, loaderId, request, type, redirectResponse, timestamp);
-    },
-
-    requestServedFromCache: function(requestId)
-    {
-        WebInspector.frameResourceManager.markResourceRequestAsServedFromMemoryCache(requestId);
-    },
-
-    responseReceived: function(requestId, frameId, loaderId, timestamp, type, response)
-    {
-        WebInspector.frameResourceManager.resourceRequestDidReceiveResponse(requestId, frameId, loaderId, type, response, timestamp);
-    },
-
-    dataReceived: function(requestId, timestamp, dataLength, encodedDataLength)
-    {
-        WebInspector.frameResourceManager.resourceRequestDidReceiveData(requestId, dataLength, encodedDataLength, timestamp);
-    },
-
-    loadingFinished: function(requestId, timestamp, sourceMapURL)
-    {
-        WebInspector.frameResourceManager.resourceRequestDidFinishLoading(requestId, timestamp, sourceMapURL);
-    },
-
-    loadingFailed: function(requestId, timestamp, errorText, canceled)
-    {
-        WebInspector.frameResourceManager.resourceRequestDidFailLoading(requestId, canceled, timestamp);
-    },
-
-    requestServedFromMemoryCache: function(requestId, frameId, loaderId, documentURL, timestamp, initiator, resource)
-    {
-        WebInspector.frameResourceManager.resourceRequestWasServedFromMemoryCache(requestId, frameId, loaderId, resource, timestamp);
-    },
-
-    webSocketWillSendHandshakeRequest: function(requestId, timestamp, request)
-    {
-        // FIXME: Not implemented.
-    },
-
-    webSocketHandshakeResponseReceived: function(requestId, timestamp, response)
-    {
-        // FIXME: Not implemented.
-    },
-
-    webSocketCreated: function(requestId, url)
-    {
-        // FIXME: Not implemented.
-    },
-
-    webSocketClosed: function(requestId, timestamp)
-    {
-        // FIXME: Not implemented.
-    }
-};
-
-WebInspector.NetworkObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/NetworkTimeline.css b/Source/WebInspectorUI/UserInterface/NetworkTimeline.css
deleted file mode 100644
index 5aaad1d66..000000000
--- a/Source/WebInspectorUI/UserInterface/NetworkTimeline.css
+++ /dev/null
@@ -1,225 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.network-graph-side {
-    position: relative;
-    height: 14px;
-    padding: 0 5px;
-    white-space: nowrap;
-    margin-top: 1px;
-    border-top: 1px solid transparent;
-    overflow: hidden;
-}
-
-.network-graph-bar-area {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 8px;
-    left: 9px;
-}
-
-.network-graph-label {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto -7px;
-    height: 13px;
-    line-height: 13px;
-    font-size: 9px;
-    color: rgba(0, 0, 0, 0.75);
-    text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
-    z-index: 150;
-    overflow: hidden;
-    text-align: center;
-    font-weight: bold;
-    opacity: 0;
-}
-
-.network-graph-side:hover .network-graph-label {
-    -webkit-transition: opacity 250ms ease-in-out;
-    opacity: 1;
-}
-
-.network-graph-label:empty {
-    display: none;
-}
-
-.network-graph-label.waiting {
-    margin-right: 5px;
-}
-
-.network-graph-label.before {
-    color: rgba(0, 0, 0, 0.7);
-    text-shadow: none;
-    text-align: right;
-    margin-right: 0px;
-}
-
-.network-graph-label.before::after {
-    display: inline-block;
-    margin-top: -2px;
-    padding-left: 2px;
-    vertical-align: 6px;
-    height: 5px;
-    width: 13px;
-    content: url(Images/NetworkBarLabelCalloutLeft.pdf);
-}
-
-.network-graph-label.after {
-    color: rgba(0, 0, 0, 0.7);
-    text-shadow: none;
-    text-align: left;
-    margin-left: -2px;
-}
-
-.network-graph-label.after::before {
-    display: inline-block;
-    margin-top: -2px;
-    padding-left: 2px;
-    vertical-align: 6px;
-    padding-right: 2px;
-    height: 5px;
-    width: 13px;
-    content: url(Images/NetworkBarLabelCalloutRight.pdf);
-}
-
-.network-graph-bar {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin: auto -6px;
-    height: 0;
-    min-width: 13px;
-    opacity: 0.65;
-
-    border-image-source: -webkit-image-set(url(Images/NetworkBarGray.png) 1x, url(Images/NetworkBarGray@2x.png) 2x);
-    border-image-slice: 6 6 7 6 fill;
-    border-width: 6px 6px 7px 6px;
-}
-
-.network-graph-bar.waiting {
-    opacity: 0.35;
-}
-
-/* Resource categories */
-
-.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarGray.png) 1x, url(Images/NetworkHollowBarGray@2x.png) 2x);
-}
-
-.network-resource-type-document .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarBlue.png) 1x, url(Images/NetworkBarBlue@2x.png) 2x);
-}
-
-.network-resource-type-document.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarBlue.png) 1x, url(Images/NetworkHollowBarBlue@2x.png) 2x);
-}
-
-.network-resource-type-stylesheet .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarGreen.png) 1x, url(Images/NetworkBarGreen@2x.png) 2x);
-}
-
-.network-resource-type-stylesheet.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarGreen.png) 1x, url(Images/NetworkHollowBarGreen@2x.png) 2x);
-}
-
-.network-resource-type-image .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarPurple.png) 1x, url(Images/NetworkBarPurple@2x.png) 2x);
-}
-
-.network-resource-type-image.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarPurple.png) 1x, url(Images/NetworkHollowBarPurple@2x.png) 2x);
-}
-
-.network-resource-type-font .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarRed.png) 1x, url(Images/NetworkBarRed@2x.png) 2x);
-}
-
-.network-resource-type-font.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarRed.png) 1x, url(Images/NetworkHollowBarRed@2x.png) 2x);
-}
-
-.network-resource-type-script .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarOrange.png) 1x, url(Images/NetworkBarOrange@2x.png) 2x);
-}
-
-.network-resource-type-script.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarOrange.png) 1x, url(Images/NetworkHollowBarOrange@2x.png) 2x);
-}
-
-.network-resource-type-xhr .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarYellow.png) 1x, url(Images/NetworkBarYellow@2x.png) 2x);
-}
-
-.network-resource-type-xhr.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarYellow.png) 1x, url(Images/NetworkHollowBarYellow@2x.png) 2x);
-}
-
-.network-resource-type-other .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarGray.png) 1x, url(Images/NetworkBarGray@2x.png) 2x);
-}
-
-.network-resource-type-other.resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkHollowBarGray.png) 1x, url(Images/NetworkHollowBarGray@2x.png) 2x);
-}
-
-/* Network graph style for a selected and focused data grid row */
-
-.data-grid:focus tr.selected .network-graph-bar {
-    opacity: 1;
-    margin: auto -7px;
-
-    border-image-slice: 6 7 7 7 fill;
-    border-width: 6px 7px 7px 7px;
-    border-image-source: -webkit-image-set(url(Images/NetworkBarWhiteFlat.png) 1x, url(Images/NetworkBarWhiteFlat@2x.png) 2x);
-}
-
-.data-grid:focus tr.selected .resource-cached .network-graph-bar {
-    border-image-source: -webkit-image-set(url(Images/NetworkBarWhiteFlat.png) 1x, url(Images/NetworkBarWhiteFlat@2x.png) 2x);
-}
-
-.data-grid:focus tr.selected .network-graph-bar.waiting {
-    opacity: 0.65;
-}
-
-.data-grid:focus tr.selected .network-graph-label {
-    color: rgb(56, 121, 217);
-    text-shadow: none;
-    opacity: 1;
-}
-
-.data-grid:focus tr.selected .network-graph-label.before,
-.data-grid:focus tr.selected .network-graph-label.after {
-    color: white;
-}
-
-.data-grid:focus tr.selected .network-graph-label.before::after {
-    content: url(Images/NetworkBarLabelCalloutWhiteLeft.pdf);
-}
-
-.data-grid:focus tr.selected .network-graph-label.after::before {
-    content: url(Images/NetworkBarLabelCalloutWhiteRight.pdf);
-}
diff --git a/Source/WebInspectorUI/UserInterface/Object.js b/Source/WebInspectorUI/UserInterface/Object.js
deleted file mode 100644
index a68da9663..000000000
--- a/Source/WebInspectorUI/UserInterface/Object.js
+++ /dev/null
@@ -1,235 +0,0 @@
-/*
- * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- */
-WebInspector.Object = function() {
-}
-
-/**
- * @param {function} constructor
- */
-WebInspector.Object.addConstructorFunctions = function(subclassConstructor)
-{
-    // Copies the relevant functions the subclass constructor.
-    for (var property in WebInspector.Object) {
-        var value = WebInspector.Object[property];
-        if (typeof value !== "function")
-            continue;
-        if (value === arguments.callee)
-            continue;
-        subclassConstructor[property] = value;
-    }
-}
-
-/**
- * @param {string} eventType
- * @param {function(WebInspector.Event)} listener
- * @param {Object=} thisObject
- */
-WebInspector.Object.addEventListener = function(eventType, listener, thisObject)
-{
-    thisObject = thisObject || null;
-
-    console.assert(eventType);
-    if (!eventType)
-        return;
-
-    console.assert(listener);
-    if (!listener)
-        return;
-
-    if (!this._listeners)
-        this._listeners = {};
-
-    var listeners = this._listeners[eventType];
-    if (!listeners)
-        listeners = this._listeners[eventType] = [];
-
-    // Prevent registering multiple times.
-    for (var i = 0; i < listeners.length; ++i) {
-        if (listeners[i].listener === listener && listeners[i].thisObject === thisObject)
-            return;
-    }
-
-    listeners.push({thisObject: thisObject, listener: listener});
-};
-
-/**
- * @param {string} eventType
- * @param {function(WebInspector.Event)} listener
- * @param {Object=} thisObject
- */
-WebInspector.Object.removeEventListener = function(eventType, listener, thisObject)
-{
-    eventType = eventType || null;
-    listener = listener || null;
-    thisObject = thisObject || null;
-
-    if (!this._listeners)
-        return;
-
-    if (!eventType) {
-        for (eventType in this._listeners)
-            this.removeEventListener(eventType, listener, thisObject);
-        return;
-    }
-
-    var listeners = this._listeners[eventType];
-    if (!listeners)
-        return;
-
-    for (var i = listeners.length - 1; i >= 0; --i) {
-        if (listener && listeners[i].listener === listener && listeners[i].thisObject === thisObject)
-            listeners.splice(i, 1);
-        else if (!listener && thisObject && listeners[i].thisObject === thisObject)
-            listeners.splice(i, 1);
-    }
-
-    if (!listeners.length)
-        delete this._listeners[eventType];
-
-    if (!Object.keys(this._listeners).length)
-        delete this._listeners;
-};
-
-WebInspector.Object.removeAllListeners = function()
-{
-    delete this._listeners;
-};
-
-/**
- * @param {string} eventType
- * @return {boolean}
- */
-WebInspector.Object.hasEventListeners = function(eventType)
-{
-    if (!this._listeners || !this._listeners[eventType])
-        return false;
-    return true;
-};
-
-WebInspector.Object.prototype = {
-    constructor: WebInspector.Object,
-
-    /**
-     * @param {string} eventType
-     * @param {function(WebInspector.Event)} listener
-     * @param {Object=} thisObject
-     */
-    addEventListener: WebInspector.Object.addEventListener,
-
-    /**
-     * @param {string} eventType
-     * @param {function(WebInspector.Event)} listener
-     * @param {Object=} thisObject
-     */
-    removeEventListener: WebInspector.Object.removeEventListener,
-
-    removeAllListeners: WebInspector.Object.removeAllListeners,
-
-    /**
-     * @param {string} eventType
-     * @return {boolean}
-     */
-    hasEventListeners: WebInspector.Object.hasEventListeners,
-
-    /**
-     * @param {string} eventType
-     * @param {*=} eventData
-     * @return {boolean}
-     */
-    dispatchEventToListeners: function(eventType, eventData)
-    {
-        var event = new WebInspector.Event(this, eventType, eventData);
-
-        function dispatch(object)
-        {
-            if (!object || !object._listeners || !object._listeners[eventType] || event._stoppedPropagation)
-                return;
-
-            // Make a copy with slice so mutations during the loop doesn't affect us.
-            var listenersForThisEvent = object._listeners[eventType].slice(0);
-
-            // Iterate over the listeners and call them. Stop if stopPropagation is called.
-            for (var i = 0; i < listenersForThisEvent.length; ++i) {
-                listenersForThisEvent[i].listener.call(listenersForThisEvent[i].thisObject, event);
-                if (event._stoppedPropagation)
-                    break;
-            }
-        }
-
-        // Dispatch to listeners of this specific object.
-        dispatch(this);
-
-        // Allow propagation again so listeners on the constructor always have a crack at the event.
-        event._stoppedPropagation = false;
-
-        // Dispatch to listeners on all constructors up the prototype chain, including the immediate constructor.
-        var constructor = this.constructor;
-        while (constructor) {
-            dispatch(constructor);
-
-            if (!constructor.prototype.__proto__)
-                break;
-
-            constructor = constructor.prototype.__proto__.constructor;
-        }
-
-        return event.defaultPrevented;
-    }
-}
-
-/**
- * @constructor
- * @param {WebInspector.Object} target
- * @param {string} type
- * @param {*=} data
- */
-WebInspector.Event = function(target, type, data)
-{
-    this.target = target;
-    this.type = type;
-    this.data = data;
-    this.defaultPrevented = false;
-    this._stoppedPropagation = false;
-}
-
-WebInspector.Event.prototype = {
-    constructor: WebInspector.Event,
-
-    stopPropagation: function()
-    {
-        this._stoppedPropagation = true;
-    },
-
-    preventDefault: function()
-    {
-        this.defaultPrevented = true;
-    }
-}
-
-WebInspector.notifications = new WebInspector.Object;
diff --git a/Source/WebInspectorUI/UserInterface/ObjectPropertiesSection.js b/Source/WebInspectorUI/UserInterface/ObjectPropertiesSection.js
deleted file mode 100644
index 323380182..000000000
--- a/Source/WebInspectorUI/UserInterface/ObjectPropertiesSection.js
+++ /dev/null
@@ -1,347 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ObjectPropertiesSection = function(object, title, subtitle, emptyPlaceholder, ignoreHasOwnProperty, extraProperties, treeElementConstructor)
-{
-    this.emptyPlaceholder = (emptyPlaceholder || WebInspector.UIString("No Properties"));
-    this.object = object;
-    this.ignoreHasOwnProperty = ignoreHasOwnProperty;
-    this.extraProperties = extraProperties;
-    this.treeElementConstructor = treeElementConstructor || WebInspector.ObjectPropertyTreeElement;
-    this.editable = true;
-
-    WebInspector.PropertiesSection.call(this, title, subtitle);
-}
-
-WebInspector.ObjectPropertiesSection.prototype = {
-    onpopulate: function()
-    {
-        this.update();
-    },
-
-    update: function()
-    {
-        var self = this;
-        function callback(properties)
-        {
-            if (!properties)
-                return;
-            self.updateProperties(properties);
-        }
-        if (this.ignoreHasOwnProperty)
-            this.object.getAllProperties(callback);
-        else
-            this.object.getOwnProperties(callback);
-    },
-
-    updateProperties: function(properties, rootTreeElementConstructor, rootPropertyComparer)
-    {
-        if (!rootTreeElementConstructor)
-            rootTreeElementConstructor = this.treeElementConstructor;
-
-        if (!rootPropertyComparer)
-            rootPropertyComparer = WebInspector.ObjectPropertiesSection.CompareProperties;
-
-        if (this.extraProperties)
-            for (var i = 0; i < this.extraProperties.length; ++i)
-                properties.push(this.extraProperties[i]);
-
-        properties.sort(rootPropertyComparer);
-
-        this.propertiesTreeOutline.removeChildren();
-
-        for (var i = 0; i < properties.length; ++i) {
-            properties[i].parentObject = this.object;
-            this.propertiesTreeOutline.appendChild(new rootTreeElementConstructor(properties[i]));
-        }
-
-        if (!this.propertiesTreeOutline.children.length) {
-            var title = document.createElement("div");
-            title.className = "info";
-            title.textContent = this.emptyPlaceholder;
-            var infoElement = new TreeElement(title, null, false);
-            this.propertiesTreeOutline.appendChild(infoElement);
-        }
-        this.propertiesForTest = properties;
-        
-        this.dispatchEventToListeners(WebInspector.Section.Event.VisibleContentDidChange);
-    }
-}
-
-WebInspector.ObjectPropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
-
-WebInspector.ObjectPropertiesSection.CompareProperties = function(propertyA, propertyB)
-{
-    var a = propertyA.name;
-    var b = propertyB.name;
-    if (a === "__proto__")
-        return 1;
-    if (b === "__proto__")
-        return -1;
-
-    // if used elsewhere make sure to
-    //  - convert a and b to strings (not needed here, properties are all strings)
-    //  - check if a == b (not needed here, no two properties can be the same)
-
-    var diff = 0;
-    var chunk = /^\d+|^\D+/;
-    var chunka, chunkb, anum, bnum;
-    while (diff === 0) {
-        if (!a && b)
-            return -1;
-        if (!b && a)
-            return 1;
-        chunka = a.match(chunk)[0];
-        chunkb = b.match(chunk)[0];
-        anum = !isNaN(chunka);
-        bnum = !isNaN(chunkb);
-        if (anum && !bnum)
-            return -1;
-        if (bnum && !anum)
-            return 1;
-        if (anum && bnum) {
-            diff = chunka - chunkb;
-            if (diff === 0 && chunka.length !== chunkb.length) {
-                if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
-                    return chunka.length - chunkb.length;
-                else
-                    return chunkb.length - chunka.length;
-            }
-        } else if (chunka !== chunkb)
-            return (chunka < chunkb) ? -1 : 1;
-        a = a.substring(chunka.length);
-        b = b.substring(chunkb.length);
-    }
-    return diff;
-}
-
-/**
- * @constructor
- * @extends {TreeElement}
- */
-WebInspector.ObjectPropertyTreeElement = function(property)
-{
-    this.property = property;
-
-    // Pass an empty title, the title gets made later in onattach.
-    TreeElement.call(this, "", null, false);
-    this.toggleOnClick = true;
-    this.selectable = false;
-}
-
-WebInspector.ObjectPropertyTreeElement.prototype = {
-    onpopulate: function()
-    {
-        if (this.children.length && !this.shouldRefreshChildren)
-            return;
-
-        var callback = function(properties) {
-            this.removeChildren();
-            if (!properties)
-                return;
-
-            properties.sort(WebInspector.ObjectPropertiesSection.CompareProperties);
-            for (var i = 0; i < properties.length; ++i) {
-                this.appendChild(new this.treeOutline.section.treeElementConstructor(properties[i]));
-            }
-        };
-        this.property.value.getOwnProperties(callback.bind(this));
-    },
-
-    ondblclick: function(event)
-    {
-        if (this.property.writable)
-            this.startEditing();
-    },
-
-    onattach: function()
-    {
-        this.update();
-    },
-
-    update: function()
-    {
-        this.nameElement = document.createElement("span");
-        this.nameElement.className = "name";
-        this.nameElement.textContent = this.property.name;
-        if (!this.property.enumerable && (!this.parent.root || !this.treeOutline.section.dontHighlightNonEnumerablePropertiesAtTopLevel))
-            this.nameElement.classList.add("dimmed");
-
-        var separatorElement = document.createElement("span");
-        separatorElement.className = "separator";
-        separatorElement.textContent = ": ";
-
-        this.valueElement = document.createElement("span");
-        this.valueElement.className = "value";
-
-        var description = this.property.value.description;
-        // Render \n as a nice unicode cr symbol.
-        if (this.property.wasThrown)
-            this.valueElement.textContent = "[Exception: " + description + "]";
-        else if (this.property.value.type === "string" && typeof description === "string") {
-            this.valueElement.textContent = "\"" + description.replace(/\n/g, "\u21B5") + "\"";
-            this.valueElement._originalTextContent = "\"" + description + "\"";
-        } else if (this.property.value.type === "function" && typeof description === "string") {
-            this.valueElement.textContent = /.*/.exec(description)[0].replace(/ +$/g, "");
-            this.valueElement._originalTextContent = description;
-        } else
-            this.valueElement.textContent = description;
-
-        if (this.property.value.type === "function")
-            this.valueElement.addEventListener("contextmenu", this._functionContextMenuEventFired.bind(this), false);
-
-        if (this.property.wasThrown)
-            this.valueElement.classList.add("error");
-        if (this.property.value.subtype)
-            this.valueElement.classList.add("console-formatted-" + this.property.value.subtype);
-        else if (this.property.value.type)
-            this.valueElement.classList.add("console-formatted-" + this.property.value.type);
-        if (this.property.value.subtype === "node")
-            this.valueElement.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
-
-        this.listItemElement.removeChildren();
-
-        this.listItemElement.appendChild(this.nameElement);
-        this.listItemElement.appendChild(separatorElement);
-        this.listItemElement.appendChild(this.valueElement);
-        this.hasChildren = this.property.value.hasChildren && !this.property.wasThrown;
-    },
-
-    _contextMenuEventFired: function(event)
-    {
-        function selectNode(nodeId)
-        {
-            if (nodeId)
-                WebInspector.domTreeManager.inspectElement(nodeId);
-        }
-
-        function revealElement()
-        {
-            this.property.value.pushNodeToFrontend(selectNode);
-        }
-
-        var contextMenu = new WebInspector.ContextMenu(event);
-        contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement.bind(this));
-        contextMenu.show();
-    },
-
-    _functionContextMenuEventFired: function(event)
-    {
-        function didGetLocation(error, response)
-        {
-            if (error) {
-                console.error(error);
-                return;
-            }
-            WebInspector.panels.scripts.showFunctionDefinition(response);
-        }
-
-        function revealFunction()
-        {
-            DebuggerAgent.getFunctionLocation(this.property.value.objectId, didGetLocation.bind(this));
-        }
-
-        var contextMenu = new WebInspector.ContextMenu(event);
-        contextMenu.appendItem(WebInspector.UIString("Show function definition"), revealFunction.bind(this));
-        contextMenu.show();
-    },
-
-    updateSiblings: function()
-    {
-        if (this.parent.root)
-            this.treeOutline.section.update();
-        else
-            this.parent.shouldRefreshChildren = true;
-    },
-
-    startEditing: function()
-    {
-        if (WebInspector.isBeingEdited(this.valueElement) || !this.treeOutline.section.editable)
-            return;
-
-        var context = { expanded: this.expanded };
-
-        // Lie about our children to prevent expanding on double click and to collapse subproperties.
-        this.hasChildren = false;
-
-        this.listItemElement.classList.add("editing-sub-part");
-
-        // Edit original source.
-        if (typeof this.valueElement._originalTextContent === "string")
-            this.valueElement.textContent = this.valueElement._originalTextContent;
-
-        var config = new WebInspector.EditingConfig(this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
-        WebInspector.startEditing(this.valueElement, config);
-    },
-
-    editingEnded: function(context)
-    {
-        this.listItemElement.scrollLeft = 0;
-        this.listItemElement.classList.remove("editing-sub-part");
-        if (context.expanded)
-            this.expand();
-    },
-
-    editingCancelled: function(element, context)
-    {
-        this.update();
-        this.editingEnded(context);
-    },
-
-    editingCommitted: function(element, userInput, previousContent, context)
-    {
-        if (userInput === previousContent)
-            return this.editingCancelled(element, context); // nothing changed, so cancel
-
-        this.applyExpression(userInput, true);
-
-        this.editingEnded(context);
-    },
-
-    applyExpression: function(expression, updateInterface)
-    {
-        expression = expression.trim();
-        var expressionLength = expression.length;
-        function callback(error)
-        {
-            if (!updateInterface)
-                return;
-
-            if (error)
-                this.update();
-
-            if (!expressionLength) {
-                // The property was deleted, so remove this tree element.
-                this.parent.removeChild(this);
-            } else {
-                // Call updateSiblings since their value might be based on the value that just changed.
-                this.updateSiblings();
-            }
-        };
-        this.property.parentObject.setPropertyValue(this.property.name, expression.trim(), callback.bind(this));
-    }
-}
-
-WebInspector.ObjectPropertyTreeElement.prototype.__proto__ = TreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/PageObserver.js b/Source/WebInspectorUI/UserInterface/PageObserver.js
deleted file mode 100644
index 95aa5e8dd..000000000
--- a/Source/WebInspectorUI/UserInterface/PageObserver.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.PageObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.PageObserver.prototype = {
-    constructor: WebInspector.PageObserver,
-
-    // Events defined by the "Page" domain (see WebCore/inspector/Inspector.json).
-
-    domContentEventFired: function(timestamp)
-    {
-        // Covered by Timeline "MarkDOMContent" record.
-    },
-
-    loadEventFired: function(timestamp)
-    {
-        WebInspector.timelineManager.pageDidLoad(timestamp);
-    },
-
-    frameNavigated: function(frame, loaderId)
-    {
-        WebInspector.frameResourceManager.frameDidNavigate(frame, loaderId);
-    },
-
-    frameDetached: function(frameId)
-    {
-        WebInspector.frameResourceManager.frameDidDetach(frameId);
-    },
-    
-    frameStartedLoading: function(frameId)
-    {
-        // Not handled yet.
-    },
-
-    frameStoppedLoading: function(frameId)
-    {
-        // Not handled yet.
-    },
-
-    frameScheduledNavigation: function(frameId, delay)
-    {
-        // Not handled yet.
-    },
-
-    frameClearedScheduledNavigation: function(frameId)
-    {
-        // Not handled yet.
-    },
-
-    javascriptDialogOpening: function(message)
-    {
-        // Not handled yet.
-    },
-
-    javascriptDialogClosed: function()
-    {
-        // Not handled yet.
-    },
-
-    scriptsEnabled: function(enabled)
-    {
-        // Not handled yet.
-    }
-};
-
-WebInspector.PageObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/PathComponentIcons.css b/Source/WebInspectorUI/UserInterface/PathComponentIcons.css
deleted file mode 100644
index b11a3da5b..000000000
--- a/Source/WebInspectorUI/UserInterface/PathComponentIcons.css
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.source-code-icon .icon {
-    content: url(Images/SourceCode.pdf);
-}
-
-.dom-tree-icon .icon {
-    content: url(Images/DOMTree.pdf);
-}
-
-.request-icon .icon {
-    content: url(Images/Request.pdf);
-}
-
-.response-icon .icon {
-    content: url(Images/Response.pdf);
-}
-
-.dom-element-icon .icon {
-    content: url(Images/DOMElement.pdf);
-}
-
-.dom-text-node-icon .icon {
-    content: url(Images/DOMTextNode.pdf);
-}
-
-.dom-comment-icon .icon {
-    content: url(Images/DOMComment.pdf);
-}
-
-.dom-document-type-icon .icon {
-    content: url(Images/DOMDocumentType.pdf);
-}
-
-.dom-document-icon .icon {
-    content: url(Images/DOMDocument.pdf);
-}
-
-.dom-character-data-icon .icon {
-    content: url(Images/DOMCharacterData.pdf);
-}
-
-.dom-node-icon .icon {
-    content: url(Images/DOMNode.pdf);
-}
diff --git a/Source/WebInspectorUI/UserInterface/Popover.css b/Source/WebInspectorUI/UserInterface/Popover.css
deleted file mode 100644
index c3483c14c..000000000
--- a/Source/WebInspectorUI/UserInterface/Popover.css
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.popover {
-    position: absolute;
-    min-width: 20px;
-    min-height: 20px;
-    box-sizing: border-box;
-    pointer-events: none;
-}
-
-.popover.arrow-up {
-    padding: 16px 5px 5px 5px;
-}
-
-.popover.arrow-right {
-    padding: 5px 16px 5px 5px;
-}
-
-.popover.arrow-down {
-    padding: 5px 5px 16px 5px;
-}
-
-.popover.arrow-left {
-    padding: 5px 5px 5px 16px;
-}
-
-.popover.fade-out {
-    -webkit-transition: opacity 350ms;
-    pointer-events: none;
-    opacity: 0;
-}
-
-.popover > .container {
-    position: absolute;
-    left: 5px;
-    top: 5px;
-    right: 5px;
-    bottom: 5px;
-
-    padding: 5px;
-
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    pointer-events: auto;
-}
-
-.popover > .container.center {
-    display: -webkit-flex;
-    -webkit-justify-content: center;
-    -webkit-align-items: center;
-}
-
-.popover.arrow-up > .container {
-    top: 16px;
-}
-
-.popover.arrow-right > .container {
-    right: 16px;
-}
-
-.popover.arrow-down > .container {
-    bottom: 16px;
-}
-
-.popover.arrow-left > .container {
-    left: 16px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Popover.js b/Source/WebInspectorUI/UserInterface/Popover.js
deleted file mode 100644
index cf435c258..000000000
--- a/Source/WebInspectorUI/UserInterface/Popover.js
+++ /dev/null
@@ -1,459 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Popover = function(delegate) {
-    WebInspector.Object.call(this);
-
-    this.delegate = delegate;
-    this._edge = null;
-    this._frame = new WebInspector.Rect;
-    this._content = null;
-    this._targetFrame = new WebInspector.Rect;
-    this._preferredEdges = null;
-
-    this._contentNeedsUpdate = false;
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.Popover.StyleClassName;
-    this._canvasId = "popover-" + (WebInspector.Popover.canvasId++);
-    this._element.style.backgroundImage = "-webkit-canvas(" + this._canvasId + ")";
-    this._element.addEventListener("webkitTransitionEnd", this, true);
-    
-    this._container = this._element.appendChild(document.createElement("div"));
-    this._container.className = "container";
-};
-
-WebInspector.Popover.StyleClassName = "popover";
-WebInspector.Popover.FadeOutClassName = "fade-out";
-WebInspector.Popover.canvasId = 0;
-WebInspector.Popover.CornerRadius = 5;
-WebInspector.Popover.MinWidth = 40;
-WebInspector.Popover.MinHeight = 40;
-WebInspector.Popover.ShadowPadding = 5;
-WebInspector.Popover.ContentPadding = 5;
-WebInspector.Popover.AnchorSize = new WebInspector.Size(22, 11);
-WebInspector.Popover.ShadowEdgeInsets = new WebInspector.EdgeInsets(WebInspector.Popover.ShadowPadding);
-
-WebInspector.Popover.prototype = {
-    constructor: WebInspector.Popover,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get frame()
-    {
-        return this._frame;
-    },
-
-    get visible()
-    {
-        return this._element.parentNode === document.body && !this._element.classList.contains(WebInspector.Popover.FadeOutClassName);
-    },
-
-    set frame(frame)
-    {
-        this._element.style.left = frame.origin.x + "px";
-        this._element.style.top = frame.origin.y + "px";
-        this._element.style.width = frame.size.width + "px";
-        this._element.style.height = frame.size.height + "px";
-        this._element.style.backgroundSize = frame.size.width + "px " + frame.size.height + "px";
-        this._frame = frame;
-    },
-
-    set content(content)
-    {
-        if (content === this._content)
-            return;
-
-        this._content = content;
-
-        this._contentNeedsUpdate = true;
-
-        if (this.visible)
-            this._update();
-    },
-
-    /**
-     * @param {WebInspector.Rect} targetFrame
-     * @param {WebInspector.RectEdge}[] preferredEdges
-     */
-    present: function(targetFrame, preferredEdges)
-    {
-        this._targetFrame = targetFrame;
-        this._preferredEdges = preferredEdges;
-
-        if (!this._content)
-            return;
-
-        window.addEventListener("mousedown", this, true);
-        window.addEventListener("scroll", this, true);
-
-        this._update();
-    },
-    
-    dismiss: function()
-    {
-        if (this._element.parentNode !== document.body)
-            return;
-
-        window.removeEventListener("mousedown", this, true);
-        window.removeEventListener("scroll", this, true);
-
-        this._element.classList.add(WebInspector.Popover.FadeOutClassName);
-
-        if (this.delegate && typeof this.delegate.willDismissPopover === "function")
-            this.delegate.willDismissPopover(this);
-    },
-
-    handleEvent: function(event)
-    {
-        switch (event.type) {
-        case "mousedown":
-        case "scroll":
-            if (!this._element.contains(event.target))
-                this.dismiss();
-            break;
-        case "webkitTransitionEnd":
-            document.body.removeChild(this._element);
-            this._element.classList.remove(WebInspector.Popover.FadeOutClassName);
-            this._container.textContent = "";
-            if (this.delegate && typeof this.delegate.didDismissPopover === "function")
-                this.delegate.didDismissPopover(this);
-            break;
-        }
-    },
-
-    // Private
-
-    _update: function(replaceContent)
-    {
-        var targetFrame = this._targetFrame;
-        var preferredEdges = this._preferredEdges;
-
-        // Ensure our element is on display so that its metrics can be resolved
-        // or interrupt any pending transition to remove it from display.
-        if (this._element.parentNode !== document.body)
-            document.body.appendChild(this._element);
-        else
-            this._element.classList.remove(WebInspector.Popover.FadeOutClassName);
-
-        if (this._contentNeedsUpdate) {
-            // Reset CSS properties on element so that the element may be sized to fit its content.
-            this._element.style.removeProperty("left");
-            this._element.style.removeProperty("top");
-            this._element.style.removeProperty("width");
-            this._element.style.removeProperty("height");
-            if (this._edge !== null)
-                this._element.classList.remove(this._cssClassNameForEdge());
-
-            // Add the content in place of the wrapper to get the raw metrics.
-            this._element.replaceChild(this._content, this._container);
-
-            // Get the ideal size for the popover to fit its content.
-            var popoverBounds = this._element.getBoundingClientRect();
-            this._preferredSize = new WebInspector.Size(Math.ceil(popoverBounds.width), Math.ceil(popoverBounds.height));
-        }
-
-        // The frame of the window with a little inset to make sure we have room for shadows.
-        var containerFrame = new WebInspector.Rect(0, 0, window.innerWidth, window.innerHeight);
-        containerFrame = containerFrame.inset(WebInspector.Popover.ShadowEdgeInsets);
-
-        // Work out the metrics for all edges.
-        var metrics = new Array(preferredEdges.length);
-        for (var edgeName in WebInspector.RectEdge) {
-            var edge = WebInspector.RectEdge[edgeName];
-            var item = {
-                edge: edge,
-                metrics: this._bestMetricsForEdge(this._preferredSize, targetFrame, containerFrame, edge)
-            };
-            var preferredIndex = preferredEdges.indexOf(edge);
-            if (preferredIndex !== -1)
-                metrics[preferredIndex] = item;
-            else
-                metrics.push(item);
-        }
-
-        function area(size)
-        {
-            return size.width * size.height;
-        }
-
-        // Find if any of those fit better than the frame for the preferred edge.
-        var bestEdge = metrics[0].edge;
-        var bestMetrics = metrics[0].metrics;
-        for (var i = 1; i < metrics.length; i++) {
-            var itemMetrics = metrics[i].metrics;
-            if (area(itemMetrics.contentSize) > area(bestMetrics.contentSize)) {
-                bestEdge = metrics[i].edge;
-                bestMetrics = itemMetrics;
-            }
-        }
-
-        var anchorPoint;
-        var bestFrame = bestMetrics.frame;
-
-        var needsToDrawBackground = !this._frame.size.equals(bestFrame.size) || this._edge !== bestEdge;
-
-        this.frame = bestFrame;
-        this._edge = bestEdge;
-
-        if (this.frame === WebInspector.Rect.ZERO_RECT) {
-            // The target for the popover is offscreen.
-            this.dismiss();
-        } else {
-            switch (bestEdge) {
-            case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
-                anchorPoint = new WebInspector.Point(bestFrame.size.width - WebInspector.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
-                break;
-            case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
-                anchorPoint = new WebInspector.Point(WebInspector.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
-                break;
-            case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
-                anchorPoint = new WebInspector.Point(targetFrame.midX() - bestFrame.minX(), bestFrame.size.height - WebInspector.Popover.ShadowPadding);
-                break;
-            case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
-                anchorPoint = new WebInspector.Point(targetFrame.midX() - bestFrame.minX(), WebInspector.Popover.ShadowPadding);
-                break;
-            }
-
-            this._element.classList.add(this._cssClassNameForEdge());
-
-            if (needsToDrawBackground)
-                this._drawBackground(bestEdge, anchorPoint);
-
-            // Make sure content is centered in case either of the dimension is smaller than the minimal bounds.
-            if (this._preferredSize.width < WebInspector.Popover.MinWidth || this._preferredSize.height < WebInspector.Popover.MinHeight)
-                this._container.classList.add("center");
-            else
-                this._container.classList.remove("center");
-        }
-
-        // Wrap the content in the container so that it's located correctly.
-        if (this._contentNeedsUpdate) {
-            this._container.textContent = "";
-            this._element.replaceChild(this._container, this._content);
-            this._container.appendChild(this._content);
-        }
-
-        this._contentNeedsUpdate = false;
-    },
-
-    _cssClassNameForEdge: function()
-    {
-        switch (this._edge) {
-        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
-            return "arrow-right";
-        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
-            return "arrow-left";
-        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
-            return "arrow-down";
-        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
-            return "arrow-up";
-        }
-        console.error("Unknown edge.");
-        return "arrow-up";
-    },
-
-    _drawBackground: function(edge, anchorPoint)
-    {
-        var scaleFactor = window.devicePixelRatio;
-
-        var width = this._frame.size.width;
-        var height = this._frame.size.height;
-        var scaledWidth = width * scaleFactor;
-        var scaledHeight = height * scaleFactor;
-
-        // Create a scratch canvas so we can draw the popover that will later be drawn into
-        // the final context with a shadow.
-        var scratchCanvas = document.createElement("canvas");
-        scratchCanvas.width = scaledWidth;
-        scratchCanvas.height = scaledHeight;
-
-        var ctx = scratchCanvas.getContext("2d");
-        ctx.scale(scaleFactor, scaleFactor);
-
-        // Bounds of the path don't take into account the arrow, but really only the tight bounding box
-        // of the content contained within the frame.
-        var bounds;
-        var arrowHeight = WebInspector.Popover.AnchorSize.height;
-        switch (edge) {
-        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
-            bounds = new WebInspector.Rect(0, 0, width - arrowHeight, height);
-            break;
-        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
-            bounds = new WebInspector.Rect(arrowHeight, 0, width - arrowHeight, height);
-            break;
-        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
-            bounds = new WebInspector.Rect(0, 0, width, height - arrowHeight);
-            break;
-        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
-            bounds = new WebInspector.Rect(0, arrowHeight, width, height - arrowHeight);
-            break;
-        }
-
-        bounds = bounds.inset(WebInspector.Popover.ShadowEdgeInsets);
-
-        // Clip the frame.
-        ctx.fillStyle = "black";
-        this._drawFrame(ctx, bounds, edge, anchorPoint);
-        ctx.clip();
-
-        // Gradient fill, top-to-bottom.
-        var fillGradient = ctx.createLinearGradient(0, 0, 0, height);
-        fillGradient.addColorStop(0, "rgba(255, 255, 255, 0.95)");
-        fillGradient.addColorStop(1, "rgba(235, 235, 235, 0.95)");
-        ctx.fillStyle = fillGradient;
-        ctx.fillRect(0, 0, width, height);
-
-        // Stroke.
-        ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";
-        ctx.lineWidth = 2;
-        this._drawFrame(ctx, bounds, edge, anchorPoint);
-        ctx.stroke();
-
-        // Draw the popover into the final context with a drop shadow.
-        var finalContext = document.getCSSCanvasContext("2d", this._canvasId, scaledWidth, scaledHeight);
-
-        finalContext.clearRect(0, 0, scaledWidth, scaledHeight);
-
-        finalContext.shadowOffsetX = 1;
-        finalContext.shadowOffsetY = 1;
-        finalContext.shadowBlur = 5;
-        finalContext.shadowColor = "rgba(0, 0, 0, 0.5)";
-
-        finalContext.drawImage(scratchCanvas, 0, 0, scaledWidth, scaledHeight);
-    },
-    
-    _bestMetricsForEdge: function(preferredSize, targetFrame, containerFrame, edge)
-    {
-        var x, y;
-        var width = preferredSize.width + (WebInspector.Popover.ShadowPadding * 2) + (WebInspector.Popover.ContentPadding * 2);
-        var height = preferredSize.height + (WebInspector.Popover.ShadowPadding * 2) + (WebInspector.Popover.ContentPadding * 2);
-        var arrowLength = WebInspector.Popover.AnchorSize.height;
-
-        switch (edge) {
-        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
-            width += arrowLength;
-            x = targetFrame.origin.x - width + WebInspector.Popover.ShadowPadding;
-            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
-            break;
-        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
-            width += arrowLength;
-            x = targetFrame.origin.x + targetFrame.size.width - WebInspector.Popover.ShadowPadding;
-            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
-            break;
-        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
-            height += arrowLength;
-            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
-            y = targetFrame.origin.y - height + WebInspector.Popover.ShadowPadding;
-            break;
-        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
-            height += arrowLength;
-            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
-            y = targetFrame.origin.y + targetFrame.size.height - WebInspector.Popover.ShadowPadding;
-            break;
-        }
-
-        var preferredFrame = new WebInspector.Rect(x, y, width, height);
-        var bestFrame = preferredFrame.intersectionWithRect(containerFrame);
-
-        width = bestFrame.size.width - (WebInspector.Popover.ShadowPadding * 2);
-        height = bestFrame.size.height - (WebInspector.Popover.ShadowPadding * 2);
-
-        switch (edge) {
-        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
-        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
-            width -= arrowLength;
-            break;
-        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
-        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
-            height -= arrowLength;
-            break;
-        }
-
-        return {
-            frame: bestFrame,
-            contentSize: new WebInspector.Size(width, height)
-        };
-    },
-
-    _drawFrame: function(ctx, bounds, anchorEdge, anchorPoint)
-    {
-        var r = WebInspector.Popover.CornerRadius;
-        var arrowHalfLength = WebInspector.Popover.AnchorSize.width / 2;
-
-        ctx.beginPath();
-        switch (anchorEdge) {
-        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
-            ctx.moveTo(bounds.maxX(), bounds.minY() + r);
-            ctx.lineTo(bounds.maxX(), anchorPoint.y - arrowHalfLength);
-            ctx.lineTo(anchorPoint.x, anchorPoint.y);
-            ctx.lineTo(bounds.maxX(), anchorPoint.y + arrowHalfLength);
-            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
-            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
-            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
-            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
-            break;
-        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
-            ctx.moveTo(bounds.minX(), bounds.maxY() - r);
-            ctx.lineTo(bounds.minX(), anchorPoint.y + arrowHalfLength);
-            ctx.lineTo(anchorPoint.x, anchorPoint.y);
-            ctx.lineTo(bounds.minX(), anchorPoint.y - arrowHalfLength);
-            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
-            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
-            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
-            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
-            break;
-        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
-            ctx.moveTo(bounds.maxX() - r, bounds.maxY());
-            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.maxY());
-            ctx.lineTo(anchorPoint.x, anchorPoint.y);
-            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.maxY());
-            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
-            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
-            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
-            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
-            break;
-        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
-            ctx.moveTo(bounds.minX() + r, bounds.minY());
-            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.minY());
-            ctx.lineTo(anchorPoint.x, anchorPoint.y);
-            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.minY());
-            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
-            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
-            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
-            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
-            break;
-        }
-        ctx.closePath();
-    }
-    
-};
-
-WebInspector.Popover.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfileDataGridTree.js b/Source/WebInspectorUI/UserInterface/ProfileDataGridTree.js
deleted file mode 100644
index 98f71c11f..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfileDataGridTree.js
+++ /dev/null
@@ -1,400 +0,0 @@
-/*
- * Copyright (C) 2009 280 North Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ProfileDataGridNode = function(profileView, profileNode, owningTree, hasChildren)
-{
-    this.profileView = profileView;
-    this.profileNode = profileNode;
-
-    WebInspector.DataGridNode.call(this, null, hasChildren);
-
-    this.addEventListener("populate", this._populate, this);
-
-    this.tree = owningTree;
-
-    this.childrenByCallUID = {};
-    this.lastComparator = null;
-
-    this.callUID = profileNode.callUID;
-    this.selfTime = profileNode.selfTime;
-    this.totalTime = profileNode.totalTime;
-    this.functionName = profileNode.functionName;
-    this.numberOfCalls = profileNode.numberOfCalls;
-    this.url = profileNode.url;
-}
-
-WebInspector.ProfileDataGridNode.prototype = {
-    get data()
-    {
-        function formatMilliseconds(time)
-        {
-            return Number.secondsToString(time / 1000, true);
-        }
-
-        var data = {};
-
-        data["function"] = this.functionName;
-        data["calls"] = this.numberOfCalls;
-
-        if (this.profileView.showTimeAsPercent.value) {
-            data["self"] = WebInspector.UIString("%.2f %%").format(this.selfPercent);
-            data["total"] = WebInspector.UIString("%.2f %%").format(this.totalPercent);
-            data["average"] = WebInspector.UIString("%.2f %%").format(this.averagePercent);
-        } else {
-            data["self"] = formatMilliseconds(this.selfTime);
-            data["total"] = formatMilliseconds(this.totalTime);
-            data["average"] = formatMilliseconds(this.averageTime);
-        }
-
-        return data;
-    },
-
-    createCell: function(columnIdentifier)
-    {
-        var cell = WebInspector.DataGridNode.prototype.createCell.call(this, columnIdentifier);
-
-        if (columnIdentifier === "self" && this._searchMatchedSelfColumn)
-            cell.classList.add("highlight");
-        else if (columnIdentifier === "total" && this._searchMatchedTotalColumn)
-            cell.classList.add("highlight");
-        else if (columnIdentifier === "average" && this._searchMatchedAverageColumn)
-            cell.classList.add("highlight");
-        else if (columnIdentifier === "calls" && this._searchMatchedCallsColumn)
-            cell.classList.add("highlight");
-
-        if (columnIdentifier !== "function")
-            return cell;
-
-        if (this.profileNode._searchMatchedFunctionColumn)
-            cell.classList.add("highlight");
-
-        if (this.profileNode.url) {
-            // FIXME(62725): profileNode should reference a debugger location.
-            var lineNumber = this.profileNode.lineNumber ? this.profileNode.lineNumber - 1 : 0;
-            var urlElement = this._linkifyLocation(this.profileNode.url, lineNumber, "profile-node-file");
-            urlElement.style.maxWidth = "75%";
-            cell.insertBefore(urlElement, cell.firstChild);
-        }
-
-        return cell;
-    },
-
-    select: function(supressSelectedEvent)
-    {
-        WebInspector.DataGridNode.prototype.select.call(this, supressSelectedEvent);
-        this.profileView._dataGridNodeSelected(this);
-    },
-
-    deselect: function(supressDeselectedEvent)
-    {
-        WebInspector.DataGridNode.prototype.deselect.call(this, supressDeselectedEvent);
-        this.profileView._dataGridNodeDeselected(this);
-    },
-
-    sort: function(/*Function*/ comparator, /*Boolean*/ force)
-    {
-        var gridNodeGroups = [[this]];
-
-        for (var gridNodeGroupIndex = 0; gridNodeGroupIndex < gridNodeGroups.length; ++gridNodeGroupIndex) {
-            var gridNodes = gridNodeGroups[gridNodeGroupIndex];
-            var count = gridNodes.length;
-
-            for (var index = 0; index < count; ++index) {
-                var gridNode = gridNodes[index];
-
-                // If the grid node is collapsed, then don't sort children (save operation for later).
-                // If the grid node has the same sorting as previously, then there is no point in sorting it again.
-                if (!force && (!gridNode.expanded || gridNode.lastComparator === comparator)) {
-                    if (gridNode.children.length)
-                        gridNode.shouldRefreshChildren = true;
-                    continue;
-                }
-
-                gridNode.lastComparator = comparator;
-
-                var children = gridNode.children;
-                var childCount = children.length;
-
-                if (childCount) {
-                    children.sort(comparator);
-
-                    for (var childIndex = 0; childIndex < childCount; ++childIndex)
-                        children[childIndex]._recalculateSiblings(childIndex);
-
-                    gridNodeGroups.push(children);
-                }
-            }
-        }
-    },
-
-    insertChild: function(/*ProfileDataGridNode*/ profileDataGridNode, index)
-    {
-        WebInspector.DataGridNode.prototype.insertChild.call(this, profileDataGridNode, index);
-
-        this.childrenByCallUID[profileDataGridNode.callUID] = profileDataGridNode;
-    },
-
-    removeChild: function(/*ProfileDataGridNode*/ profileDataGridNode)
-    {
-        WebInspector.DataGridNode.prototype.removeChild.call(this, profileDataGridNode);
-
-        delete this.childrenByCallUID[profileDataGridNode.callUID];
-    },
-
-    removeChildren: function(/*ProfileDataGridNode*/ profileDataGridNode)
-    {
-        WebInspector.DataGridNode.prototype.removeChildren.call(this);
-
-        this.childrenByCallUID = {};
-    },
-
-    findChild: function(/*Node*/ node)
-    {
-        if (!node)
-            return null;
-        return this.childrenByCallUID[node.callUID];
-    },
-
-    get averageTime()
-    {
-        return this.selfTime / Math.max(1, this.numberOfCalls);
-    },
-
-    get averagePercent()
-    {
-        return this.averageTime / this.tree.totalTime * 100.0;
-    },
-
-    get selfPercent()
-    {
-        return this.selfTime / this.tree.totalTime * 100.0;
-    },
-
-    get totalPercent()
-    {
-        return this.totalTime / this.tree.totalTime * 100.0;
-    },
-
-    get _parent()
-    {
-        return this.parent !== this.dataGrid ? this.parent : this.tree;
-    },
-
-    _populate: function(event)
-    {
-        this._sharedPopulate();
-
-        if (this._parent) {
-            var currentComparator = this._parent.lastComparator;
-
-            if (currentComparator)
-                this.sort(currentComparator, true);
-        }
-
-        if (this.removeEventListener)
-            this.removeEventListener("populate", this._populate, this);
-    },
-
-    // When focusing and collapsing we modify lots of nodes in the tree.
-    // This allows us to restore them all to their original state when we revert.
-    _save: function()
-    {
-        if (this._savedChildren)
-            return;
-
-        this._savedSelfTime = this.selfTime;
-        this._savedTotalTime = this.totalTime;
-        this._savedNumberOfCalls = this.numberOfCalls;
-
-        this._savedChildren = this.children.slice();
-    },
-
-    // When focusing and collapsing we modify lots of nodes in the tree.
-    // This allows us to restore them all to their original state when we revert.
-    _restore: function()
-    {
-        if (!this._savedChildren)
-            return;
-
-        this.selfTime = this._savedSelfTime;
-        this.totalTime = this._savedTotalTime;
-        this.numberOfCalls = this._savedNumberOfCalls;
-
-        this.removeChildren();
-
-        var children = this._savedChildren;
-        var count = children.length;
-
-        for (var index = 0; index < count; ++index) {
-            children[index]._restore();
-            this.appendChild(children[index]);
-        }
-    },
-
-    _merge: function(child, shouldAbsorb)
-    {
-        this.selfTime += child.selfTime;
-
-        if (!shouldAbsorb) {
-            this.totalTime += child.totalTime;
-            this.numberOfCalls += child.numberOfCalls;
-        }
-
-        var children = this.children.slice();
-
-        this.removeChildren();
-
-        var count = children.length;
-
-        for (var index = 0; index < count; ++index) {
-            if (!shouldAbsorb || children[index] !== child)
-                this.appendChild(children[index]);
-        }
-
-        children = child.children.slice();
-        count = children.length;
-
-        for (var index = 0; index < count; ++index) {
-            var orphanedChild = children[index],
-                existingChild = this.childrenByCallUID[orphanedChild.callUID];
-
-            if (existingChild)
-                existingChild._merge(orphanedChild, false);
-            else
-                this.appendChild(orphanedChild);
-        }
-    },
-    
-    _linkifyLocation: function(url, lineNumber, className)
-    {
-        // FIXME: CPUProfileNode's need columnNumbers.
-        return WebInspector.linkifyLocation(url, lineNumber, 0, className);
-    }
-}
-
-WebInspector.ProfileDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
-
-WebInspector.ProfileDataGridTree = function(profileView, profileNode)
-{
-    this.tree = this;
-    this.children = [];
-
-    this.profileView = profileView;
-
-    this.totalTime = profileNode.totalTime;
-    this.lastComparator = null;
-
-    this.childrenByCallUID = {};
-}
-
-WebInspector.ProfileDataGridTree.prototype = {
-    get expanded()
-    {
-        return true;
-    },
-
-    appendChild: function(child)
-    {
-        this.insertChild(child, this.children.length);
-    },
-
-    insertChild: function(child, index)
-    {
-        this.children.splice(index, 0, child);
-        this.childrenByCallUID[child.callUID] = child;
-    },
-
-    removeChildren: function()
-    {
-        this.children = [];
-        this.childrenByCallUID = {};
-    },
-
-    findChild: WebInspector.ProfileDataGridNode.prototype.findChild,
-    sort: WebInspector.ProfileDataGridNode.prototype.sort,
-
-    _save: function()
-    {
-        if (this._savedChildren)
-            return;
-
-        this._savedTotalTime = this.totalTime;
-        this._savedChildren = this.children.slice();
-    },
-
-    restore: function()
-    {
-        if (!this._savedChildren)
-            return;
-
-        this.children = this._savedChildren;
-        this.totalTime = this._savedTotalTime;
-
-        var children = this.children;
-        var count = children.length;
-
-        for (var index = 0; index < count; ++index)
-            children[index]._restore();
-
-        this._savedChildren = null;
-    }
-}
-
-WebInspector.ProfileDataGridTree.propertyComparators = [{}, {}];
-
-WebInspector.ProfileDataGridTree.propertyComparator = function(/*String*/ property, /*Boolean*/ isAscending)
-{
-    var comparator = this.propertyComparators[(isAscending ? 1 : 0)][property];
-
-    if (!comparator) {
-        if (isAscending) {
-            comparator = function(lhs, rhs)
-            {
-                if (lhs[property] < rhs[property])
-                    return -1;
-
-                if (lhs[property] > rhs[property])
-                    return 1;
-
-                return 0;
-            }
-        } else {
-            comparator = function(lhs, rhs)
-            {
-                if (lhs[property] > rhs[property])
-                    return -1;
-
-                if (lhs[property] < rhs[property])
-                    return 1;
-
-                return 0;
-            }
-        }
-
-        this.propertyComparators[(isAscending ? 1 : 0)][property] = comparator;
-    }
-
-    return comparator;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ProfileManager.js b/Source/WebInspectorUI/UserInterface/ProfileManager.js
deleted file mode 100644
index d5c52b15f..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfileManager.js
+++ /dev/null
@@ -1,228 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ProfileManager = function()
-{
-    WebInspector.Object.call(this);
-
-    this._javaScriptProfileType = new WebInspector.JavaScriptProfileType;
-    this._cssSelectorProfileType = new WebInspector.CSSSelectorProfileType;
-
-    ProfilerAgent.enable();
-    ProfilerAgent.getProfileHeaders();
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-
-    this.initialize();
-};
-
-WebInspector.ProfileManager.Event = {
-    ProfileWasAdded: "profile-manager-profile-was-added",
-    ProfileWasUpdated: "profile-manager-profile-was-updated",
-    ProfilingStarted: "profile-manager-profiling-started",
-    ProfilingEnded: "profile-manager-profiling-ended",
-    ProfilingInterrupted: "profile-manager-profiling-interrupted",
-    Cleared: "profile-manager-cleared"
-};
-
-WebInspector.ProfileManager.UserInitiatedProfileName = "org.webkit.profiles.user-initiated";
-
-WebInspector.ProfileManager.prototype = {
-    constructor: WebInspector.ProfileManager,
-
-    // Public
-
-    initialize: function()
-    {
-        this._checkForInterruptions();
-
-        this._recordingJavaScriptProfile = null;
-        this._recordingCSSSelectorProfile = null;
-
-        this._isProfiling = false;
-
-        this._cssSelectorProfileType.reset();
-
-        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.Cleared);
-    },
-
-    isProfilingJavaScript: function()
-    {
-        return this._javaScriptProfileType.isRecordingProfile();
-    },
-
-    startProfilingJavaScript: function()
-    {
-        this._javaScriptProfileType.startRecordingProfile();
-    },
-
-    stopProfilingJavaScript: function()
-    {
-        this._javaScriptProfileType.stopRecordingProfile();
-    },
-
-    isProfilingCSSSelectors: function()
-    {
-        return this._cssSelectorProfileType.isRecordingProfile();
-    },
-
-    startProfilingCSSSelectors: function()
-    {
-        this._cssSelectorProfileType.startRecordingProfile();
-        
-        var id = this._cssSelectorProfileType.nextProfileId();
-        this._recordingCSSSelectorProfile = new WebInspector.CSSSelectorProfileObject(WebInspector.UIString("CSS Selector Profile %d").format(id), id, true);
-        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasAdded, {profile: this._recordingCSSSelectorProfile});
-        
-        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingStarted);
-    },
-    
-    stopProfilingCSSSelectors: function()
-    {
-        function cssProfilingStopped(error, profile)
-        {
-            if (error)
-                return;
-
-            console.assert(this._recordingCSSSelectorProfile);
-
-            this._recordingCSSSelectorProfile.data = profile.data;
-            this._recordingCSSSelectorProfile.totalTime = profile.totalTime;
-            this._recordingCSSSelectorProfile.recording = false;
-            
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasUpdated, {profile: this._recordingCSSSelectorProfile});
-
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingEnded, {profile: this._recordingCSSSelectorProfile});
-
-            this._recordingCSSSelectorProfile = null;
-        }
-
-        this._cssSelectorProfileType.stopRecordingProfile(cssProfilingStopped.bind(this));
-    },
-
-    profileWasStartedFromConsole: function(title)
-    {
-        this.setRecordingJavaScriptProfile(true, true);
-
-        if (title.indexOf(WebInspector.ProfileManager.UserInitiatedProfileName) === -1) {
-            this._recordingJavaScriptProfile.title = title;
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasUpdated, {profile: this._recordingJavaScriptProfile});
-        }
-    },
-
-    profileWasEndedFromConsole: function()
-    {
-        this.setRecordingJavaScriptProfile(false, true);
-    },
-
-    addJavaScriptProfile: function(profile)
-    {
-        console.assert(this._recordingJavaScriptProfile);
-        if (!this._recordingJavaScriptProfile)
-            return;
-
-        this._recordingJavaScriptProfile.type = profile.typeId;
-        this._recordingJavaScriptProfile.title = profile.title;
-        this._recordingJavaScriptProfile.id = profile.uid;
-        this._recordingJavaScriptProfile.recording = false;
-
-        this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasUpdated, {profile: this._recordingJavaScriptProfile});
-
-        // We want to reset _recordingJavaScriptProfile so that we can identify
-        // interruptions, but we also want to keep track of the last profile
-        // we've recorded so that we can provide it as data to the ProfilingEnded event
-        // we'll dispatch in setRecordingJavaScriptProfile().
-        this._lastJavaScriptProfileAdded = this._recordingJavaScriptProfile;
-        this._recordingJavaScriptProfile = null;
-    },
-
-    setRecordingJavaScriptProfile: function(isProfiling, fromConsole)
-    {
-        if (this._isProfiling === isProfiling)
-            return;
-
-        this._isProfiling = isProfiling;
-
-        // We've interrupted the current JS profile due to a page reload. Return
-        // now and _attemptToResumeProfiling will pick things up after the reload.
-        if (!isProfiling && !!this._recordingJavaScriptProfile)
-            return;
-
-        if (isProfiling && !this._recordingJavaScriptProfile)
-            this._recordingJavaScriptProfile = new WebInspector.JavaScriptProfileObject(WebInspector.ProfileManager.UserInitiatedProfileName, -1, true);
-
-        if (isProfiling) {
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfileWasAdded, {profile: this._recordingJavaScriptProfile});
-            if (!fromConsole)
-                this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingStarted);
-        } else {
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingEnded, {
-                profile: this._lastJavaScriptProfileAdded,
-                fromConsole: fromConsole
-            });
-            this._lastJavaScriptProfileAdded = null;
-        }
-    },
-
-    // Private
-    
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (!event.target.isMainFrame())
-            return;
-
-        var oldMainResource = event.data.oldMainResource;
-        var newMainResource = event.target.mainResource;
-        if (oldMainResource.url !== newMainResource.url)
-            this.initialize();
-        else
-            this._attemptToResumeProfiling();
-    },
-
-    _checkForInterruptions: function()
-    {
-        if (this._recordingJavaScriptProfile) {
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingInterrupted, {profile: this._recordingJavaScriptProfile});
-            this._javaScriptProfileType.setRecordingProfile(false);
-        } else if (this._recordingCSSSelectorProfile) {
-            this.dispatchEventToListeners(WebInspector.ProfileManager.Event.ProfilingInterrupted, {profile: this._recordingCSSSelectorProfile});
-            this._cssSelectorProfileType.setRecordingProfile(false);
-        }
-    },
-
-    _attemptToResumeProfiling: function()
-    {
-        this._checkForInterruptions();
-
-        if (this._recordingJavaScriptProfile)
-            this.startProfilingJavaScript();
-        else if (this._recordingCSSSelectorProfile)
-            this.startProfilingCSSSelectors();
-    }
-};
-
-WebInspector.ProfileManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfileObject.js b/Source/WebInspectorUI/UserInterface/ProfileObject.js
deleted file mode 100644
index 672d818a5..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfileObject.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ProfileObject = function(type, title, id, isRecording)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(type);
-    console.assert(title);
-    console.assert(id);
-
-    this._type = type;
-    this._title = title;
-    this._id = id;
-    this._isRecording = isRecording || false;
-};
-
-WebInspector.ProfileObject.Event = {
-    FinshedRecording: "profile-object-finished-recording"
-};
-
-WebInspector.ProfileObject.prototype = {
-    constructor: WebInspector.ProfileObject,
-    
-    get type()
-    {
-        return this._type;
-    },
-
-    set type(type)
-    {
-        this._type = type;
-    },
-    
-    get title()
-    {
-        return this._title;
-    },
-
-    set title(title)
-    {
-        this._title = title;
-    },
-
-    get id()
-    {
-        return this._id;
-    },
-
-    set id(id)
-    {
-        this._id = id;
-    },
-
-    get recording()
-    {
-        return this._isRecording;
-    },
-
-    set recording(flag)
-    {
-        if (this._isRecording === flag)
-            return;
-
-        this._isRecording = flag;
-        if (!flag)
-            this.dispatchEventToListeners(WebInspector.ProfileObject.Event.FinshedRecording);
-    }
-};
-
-WebInspector.ProfileObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfileType.js b/Source/WebInspectorUI/UserInterface/ProfileType.js
deleted file mode 100644
index ff2d6796a..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfileType.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ProfileType = function(id, name)
-{
-    this._id = id;
-    this._name = name;
-}
-
-WebInspector.ProfileType.URLRegExp = /webkit-profile:\/\/(.+)\/(.+)#([0-9]+)/;
-WebInspector.ProfileType.ProfileScheme = "webkit-profile";
-
-WebInspector.ProfileType.prototype = {
-    get buttonTooltip()
-    {
-        return "";
-    },
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get treeItemTitle()
-    {
-        return this._name;
-    },
-
-    get name()
-    {
-        return this._name;
-    },
-
-    buttonClicked: function()
-    {
-    },
-
-    viewForProfile: function(profile)
-    {
-        if (!profile._profileView)
-            profile._profileView = this.createView(profile);
-        return profile._profileView;
-    },
-
-    reset: function()
-    {
-    },
-
-    get description()
-    {
-        return "";
-    },
-
-    // Must be implemented by subclasses.
-    createView: function(profile)
-    {
-        throw new Error("Needs implemented.");
-    },
-
-    // Must be implemented by subclasses.
-    createSidebarTreeElementForProfile: function(profile)
-    {
-        throw new Error("Needs implemented.");
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/ProfileView.css b/Source/WebInspectorUI/UserInterface/ProfileView.css
deleted file mode 100644
index 64d7ae5cb..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfileView.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.recording-profile-view {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    display: -webkit-flex;
-    -webkit-flex-flow: row nowrap;
-    -webkit-justify-content: center;
-    -webkit-align-content: center;
-    -webkit-align-items: center;
-    
-    background-color: rgb(232, 232, 232);
-}
-
-.recording-profile-view > .indeterminate-progress-spinner {
-    position: static;
-    margin: 0;
-}
-
-.recording-profile-view > span {
-    font-family: 'Lucida Grande', Helvetica, sans-serif;
-    font-size: 14px;
-
-    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
-    color: rgb(60, 60, 60);
-
-    padding-left: 10px;
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ProfileView.js b/Source/WebInspectorUI/UserInterface/ProfileView.js
deleted file mode 100644
index 25e04e623..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfileView.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ProfileView = function(profile, settingId)
-{
-    WebInspector.ContentView.call(this, profile);
-
-    this._profile = profile;
-
-    this.element.classList.add("profile-view");
-
-    this.showTimeAsPercent = new WebInspector.Setting(settingId, true);
-    this.showTimeAsPercentNavigationItem = new WebInspector.ActivateButtonNavigationItem("selector-profiler-show-time-as-percent-navigation-item", WebInspector.UIString("Show times as percentages"), WebInspector.UIString("Show times as absolute times"), "Images/Percent.pdf", 16, 16);
-    this.showTimeAsPercentNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggleTimeDisplay, this);
-    this.showTimeAsPercentNavigationItem.activated = this.showTimeAsPercent.value;
-
-    if (profile.recording) {
-        this._showRecordingMessage();
-        profile.addEventListener(WebInspector.ProfileObject.Event.FinshedRecording, this._profileFinishedRecording, this);
-    } else
-        this.displayProfile();
-};
-
-WebInspector.ProfileView.prototype = {
-    constructor: WebInspector.ProfileView,
-
-    // Public
-
-    get navigationItems()
-    {
-        return [this.showTimeAsPercentNavigationItem];
-    },
-
-    get allowedNavigationSidebarPanels()
-    {
-        return ["instrument"];
-    },
-
-    get profile()
-    {
-        return this._profile;
-    },
-
-    set profile(profile)
-    {
-        this._profile = profile;
-    },
-    
-    toggleTimeDisplay: function(event)
-    {
-        this.showTimeAsPercentNavigationItem.activated = !this.showTimeAsPercentNavigationItem.activated;
-    },
-
-    displayProfile: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    get recordingTitle()
-    {
-        return WebInspector.UIString("Recording\u2026");
-    },
-    
-    // Private
-    
-    _profileFinishedRecording: function()
-    {
-        this._hideRecordingMessage();
-        this.displayProfile();
-    },
-    
-    _showRecordingMessage: function()
-    {
-        this._recordingMessageContainer = this.element.appendChild(document.createElement("div"));
-        this._recordingMessageContainer.className = "recording-profile-view";
-        this._recordingMessageContainer.appendChild(new WebInspector.IndeterminateProgressSpinner().element);
-        this._recordingMessageContainer.appendChild(document.createElement("span")).textContent = this.recordingTitle;
-    },
-    
-    _hideRecordingMessage: function()
-    {
-        if (this._recordingMessageContainer)
-            this._recordingMessageContainer.remove();
-    }
-};
-
-WebInspector.ProfileView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ProfilerObserver.js b/Source/WebInspectorUI/UserInterface/ProfilerObserver.js
deleted file mode 100644
index 0e0fea060..000000000
--- a/Source/WebInspectorUI/UserInterface/ProfilerObserver.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ProfilerObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.ProfilerObserver.prototype = {
-    constructor: WebInspector.ProfilerObserver,
-
-    // Events defined by the "Profiler" domain (see WebCore/inspector/Inspector.json).
-
-    resetProfiles: function()
-    {
-        // FIXME: Implement this.
-    },
-
-    addProfileHeader: function(profile)
-    {
-        WebInspector.profileManager.addJavaScriptProfile(profile);
-    },
-
-    addHeapSnapshotChunk: function(uid, chunk)
-    {
-        // FIXME: Implement this (we need heap snapshots).
-    },
-
-    finishHeapSnapshot: function(uid)
-    {
-        // FIXME: Implement this (we need heap snapshots).
-    },
-
-    setRecordingProfile: function(isProfiling)
-    {
-        WebInspector.profileManager.setRecordingJavaScriptProfile(isProfiling);
-    },
-
-    reportHeapSnapshotProgress: function(done, total)
-    {
-        // FIXME: Implement this (we need heap snapshots).
-    }
-
-};
-
-WebInspector.ProfilerObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/PropertiesSection.js b/Source/WebInspectorUI/UserInterface/PropertiesSection.js
deleted file mode 100644
index c3e89f52b..000000000
--- a/Source/WebInspectorUI/UserInterface/PropertiesSection.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.PropertiesSection = function(title, subtitle)
-{
-    this.propertiesElement = document.createElement("ol");
-    this.propertiesElement.className = "properties properties-tree";
-    this.propertiesElement.tabIndex = 0;
-    this.propertiesTreeOutline = new TreeOutline(this.propertiesElement);
-    this.propertiesTreeOutline.section = this;
-
-    WebInspector.Section.call(this, title, subtitle);
-
-    this.element.appendChild(this.propertiesElement);
-}
-
-WebInspector.PropertiesSection.prototype.__proto__ = WebInspector.Section.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/ApplicationCacheObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/ApplicationCacheObserver.js
new file mode 100644
index 000000000..d803853c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/ApplicationCacheObserver.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheObserver = class ApplicationCacheObserver
+{
+    // Events defined by the "ApplicationCache" domain.
+
+    applicationCacheStatusUpdated(frameId, manifestURL, status)
+    {
+        WebInspector.applicationCacheManager.applicationCacheStatusUpdated(frameId, manifestURL, status);
+    }
+
+    networkStateUpdated(isNowOnline)
+    {
+        WebInspector.applicationCacheManager.networkStateUpdated(isNowOnline);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/CSSObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/CSSObserver.js
new file mode 100644
index 000000000..f8e0570dd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/CSSObserver.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSObserver = class CSSObserver
+{
+    // Events defined by the "CSS" domain.
+
+    mediaQueryResultChanged()
+    {
+        WebInspector.cssStyleManager.mediaQueryResultChanged();
+    }
+
+    styleSheetChanged(styleSheetId)
+    {
+        WebInspector.cssStyleManager.styleSheetChanged(styleSheetId);
+    }
+
+    styleSheetAdded(styleSheetInfo)
+    {
+        WebInspector.cssStyleManager.styleSheetAdded(styleSheetInfo);
+    }
+
+    styleSheetRemoved(id)
+    {
+        WebInspector.cssStyleManager.styleSheetRemoved(id);
+    }
+
+    namedFlowCreated(namedFlow)
+    {
+        WebInspector.domTreeManager.namedFlowCreated(namedFlow);
+    }
+
+    namedFlowRemoved(documentNodeId, flowName)
+    {
+        WebInspector.domTreeManager.namedFlowRemoved(documentNodeId, flowName);
+    }
+
+    // COMPATIBILITY (iOS 7): regionLayoutUpdated was removed and replaced by regionOversetChanged.
+    regionLayoutUpdated(namedFlow)
+    {
+        this.regionOversetChanged(namedFlow);
+    }
+
+    regionOversetChanged(namedFlow)
+    {
+        WebInspector.domTreeManager.regionOversetChanged(namedFlow);
+    }
+
+    registeredNamedFlowContentElement(documentNodeId, flowName, contentNodeId, nextContentElementNodeId)
+    {
+        WebInspector.domTreeManager.registeredNamedFlowContentElement(documentNodeId, flowName, contentNodeId, nextContentElementNodeId);
+    }
+
+    unregisteredNamedFlowContentElement(documentNodeId, flowName, contentNodeId)
+    {
+        WebInspector.domTreeManager.unregisteredNamedFlowContentElement(documentNodeId, flowName, contentNodeId);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/ConsoleObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/ConsoleObserver.js
new file mode 100644
index 000000000..cfc2fc054
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/ConsoleObserver.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleObserver = class ConsoleObserver
+{
+    // Events defined by the "Console" domain.
+
+    messageAdded(message)
+    {
+        if (message.type === "assert" && !message.text)
+            message.text = WebInspector.UIString("Assertion");
+
+        if (message.level === "warning" || message.level === "error") {
+            // FIXME: <https://webkit.org/b/142553> Web Inspector: Merge IssueMessage/ConsoleMessage - both attempt to modify the Console Messages parameter independently
+            WebInspector.issueManager.issueWasAdded(message.source, message.level, message.text, message.url, message.line, message.column || 0);
+        }
+
+        if (message.source === "console-api" && message.type === "clear")
+            return;
+
+        WebInspector.logManager.messageWasAdded(message.source, message.level, message.text, message.type, message.url, message.line, message.column || 0, message.repeatCount, message.parameters, message.stackTrace, message.networkRequestId);
+    }
+
+    messageRepeatCountUpdated(count)
+    {
+        WebInspector.logManager.messageRepeatCountUpdated(count);
+    }
+
+    messagesCleared()
+    {
+        WebInspector.logManager.messagesCleared();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/DOMObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/DOMObserver.js
new file mode 100644
index 000000000..70b9bc566
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/DOMObserver.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMObserver = class DOMObserver
+{
+    // Events defined by the "DOM" domain.
+
+    documentUpdated()
+    {
+        WebInspector.domTreeManager._documentUpdated();
+    }
+
+    setChildNodes(parentId, payloads)
+    {
+        WebInspector.domTreeManager._setChildNodes(parentId, payloads);
+    }
+
+    attributeModified(nodeId, name, value)
+    {
+        WebInspector.domTreeManager._attributeModified(nodeId, name, value);
+    }
+
+    attributeRemoved(nodeId, name)
+    {
+        WebInspector.domTreeManager._attributeRemoved(nodeId, name);
+    }
+
+    inlineStyleInvalidated(nodeIds)
+    {
+        WebInspector.domTreeManager._inlineStyleInvalidated(nodeIds);
+    }
+
+    characterDataModified(nodeId, characterData)
+    {
+        WebInspector.domTreeManager._characterDataModified(nodeId, characterData);
+    }
+
+    childNodeCountUpdated(nodeId, childNodeCount)
+    {
+        WebInspector.domTreeManager._childNodeCountUpdated(nodeId, childNodeCount);
+    }
+
+    childNodeInserted(parentNodeId, previousNodeId, payload)
+    {
+        WebInspector.domTreeManager._childNodeInserted(parentNodeId, previousNodeId, payload);
+    }
+
+    childNodeRemoved(parentNodeId, nodeId)
+    {
+        WebInspector.domTreeManager._childNodeRemoved(parentNodeId, nodeId);
+    }
+
+    shadowRootPushed(parentNodeId, nodeId)
+    {
+        WebInspector.domTreeManager._childNodeInserted(parentNodeId, 0, nodeId);
+    }
+
+    shadowRootPopped(parentNodeId, nodeId)
+    {
+        WebInspector.domTreeManager._childNodeRemoved(parentNodeId, nodeId);
+    }
+
+    pseudoElementAdded(parentNodeId, pseudoElement)
+    {
+        WebInspector.domTreeManager._pseudoElementAdded(parentNodeId, pseudoElement);
+    }
+
+    pseudoElementRemoved(parentNodeId, pseudoElementId)
+    {
+        WebInspector.domTreeManager._pseudoElementRemoved(parentNodeId, pseudoElementId);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/DOMStorageObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/DOMStorageObserver.js
new file mode 100644
index 000000000..57da70f7f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/DOMStorageObserver.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2013 Samsung Electronics. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageObserver = class DOMStorageObserver
+{
+    // Events defined by the "DOMStorage" domain.
+
+    domStorageItemsCleared(storageId)
+    {
+        WebInspector.storageManager.itemsCleared(storageId);
+    }
+
+    domStorageItemRemoved(storageId, key)
+    {
+        WebInspector.storageManager.itemRemoved(storageId, key);
+    }
+
+    domStorageItemAdded(storageId, key, value)
+    {
+        WebInspector.storageManager.itemAdded(storageId, key, value);
+    }
+
+    domStorageItemUpdated(storageId, key, oldValue, value)
+    {
+        WebInspector.storageManager.itemUpdated(storageId, key, oldValue, value);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/DatabaseObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/DatabaseObserver.js
new file mode 100644
index 000000000..2efd6e9e2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/DatabaseObserver.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseObserver = class DatabaseObserver
+{
+    // Events defined by the "Database" domain.
+
+    addDatabase(database)
+    {
+        WebInspector.storageManager.databaseWasAdded(database.id, database.domain, database.name, database.version);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/DebuggerObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/DebuggerObserver.js
new file mode 100644
index 000000000..a05c4a0d9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/DebuggerObserver.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerObserver = class DebuggerObserver
+{
+    // Events defined by the "Debugger" domain.
+
+    globalObjectCleared()
+    {
+        WebInspector.debuggerManager.reset();
+    }
+
+    scriptParsed(scriptId, url, startLine, startColumn, endLine, endColumn, isContentScript, sourceMapURL, hasSourceURL)
+    {
+        WebInspector.debuggerManager.scriptDidParse(scriptId, url, isContentScript, startLine, startColumn, endLine, endColumn, sourceMapURL);
+    }
+
+    scriptFailedToParse(url, scriptSource, startLine, errorLine, errorMessage)
+    {
+        // FIXME: Not implemented.
+    }
+
+    breakpointResolved(breakpointId, location)
+    {
+        WebInspector.debuggerManager.breakpointResolved(breakpointId, location);
+    }
+
+    paused(callFrames, reason, data)
+    {
+        WebInspector.debuggerManager.debuggerDidPause(callFrames, reason, data);
+    }
+
+    resumed()
+    {
+        WebInspector.debuggerManager.debuggerDidResume();
+    }
+
+    playBreakpointActionSound(breakpointActionIdentifier)
+    {
+        WebInspector.debuggerManager.playBreakpointActionSound(breakpointActionIdentifier);
+    }
+
+    didSampleProbe(sample)
+    {
+        WebInspector.probeManager.didSampleProbe(sample);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/HeapObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/HeapObserver.js
new file mode 100644
index 000000000..f04b30042
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/HeapObserver.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.HeapObserver = class HeapObserver
+{
+    // Events defined by the "Heap" domain.
+
+    garbageCollected(collection)
+    {
+        WebInspector.heapManager.garbageCollected(collection);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/InspectorBackend.js b/Source/WebInspectorUI/UserInterface/Protocol/InspectorBackend.js
new file mode 100644
index 000000000..32b1dc572
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/InspectorBackend.js
@@ -0,0 +1,582 @@
+/*
+ * Copyright (C) 2011 Google Inc. All rights reserved.
+ * Copyright (C) 2013, 2015, 2016 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 University of Washington.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+InspectorBackendClass = class InspectorBackendClass
+{
+    constructor()
+    {
+        this._lastSequenceId = 1;
+        this._pendingResponses = new Map;
+        this._agents = {};
+        this._deferredScripts = [];
+
+        this._customTracer = null;
+        this._defaultTracer = new WebInspector.LoggingProtocolTracer;
+        this._activeTracers = [this._defaultTracer];
+
+        this._dumpInspectorTimeStats = false;
+
+        let setting = WebInspector.autoLogProtocolMessagesSetting = new WebInspector.Setting("auto-collect-protocol-messages", false);
+        setting.addEventListener(WebInspector.Setting.Event.Changed, this._startOrStopAutomaticTracing.bind(this))
+        this._startOrStopAutomaticTracing();
+    }
+
+    // Public
+
+    // It's still possible to set this flag on InspectorBackend to just
+    // dump protocol traffic as it happens. For more complex uses of
+    // protocol data, install a subclass of WebInspector.ProtocolTracer.
+    set dumpInspectorProtocolMessages(value)
+    {
+        // Implicitly cause automatic logging to start if it's allowed.
+        let setting = WebInspector.autoLogProtocolMessagesSetting;
+        setting.value = value;
+
+        this._defaultTracer.dumpMessagesToConsole = value;
+    }
+
+    get dumpInspectorProtocolMessages()
+    {
+        return WebInspector.autoLogProtocolMessagesSetting.value;
+    }
+
+    set dumpInspectorTimeStats(value)
+    {
+        if (!this.dumpInspectorProtocolMessages)
+            this.dumpInspectorProtocolMessages = true;
+
+        this._defaultTracer.dumpTimingDataToConsole = value;
+    }
+
+    get dumpInspectorTimeStats()
+    {
+        return this._dumpInspectorTimeStats;
+    }
+
+    set customTracer(tracer)
+    {
+        console.assert(!tracer || tracer instanceof WebInspector.ProtocolTracer, tracer);
+        console.assert(!tracer || tracer !== this._defaultTracer, tracer);
+
+        // Bail early if no state change is to be made.
+        if (!tracer && !this._customTracer)
+            return;
+
+        if (tracer === this._customTracer)
+            return;
+
+        if (tracer === this._defaultTracer)
+            return;
+
+        if (this._customTracer)
+            this._customTracer.logFinished();
+
+        this._customTracer = tracer;
+        this._activeTracers = [this._defaultTracer];
+
+        if (this._customTracer) {
+            this._customTracer.logStarted();
+            this._activeTracers.push(this._customTracer);
+        }
+    }
+
+    get activeTracers()
+    {
+        return this._activeTracers;
+    }
+
+    registerCommand(qualifiedName, callSignature, replySignature)
+    {
+        var [domainName, commandName] = qualifiedName.split(".");
+        var agent = this._agentForDomain(domainName);
+        agent.addCommand(InspectorBackend.Command.create(this, qualifiedName, callSignature, replySignature));
+    }
+
+    registerEnum(qualifiedName, enumValues)
+    {
+        var [domainName, enumName] = qualifiedName.split(".");
+        var agent = this._agentForDomain(domainName);
+        agent.addEnum(enumName, enumValues);
+    }
+
+    registerEvent(qualifiedName, signature)
+    {
+        var [domainName, eventName] = qualifiedName.split(".");
+        var agent = this._agentForDomain(domainName);
+        agent.addEvent(new InspectorBackend.Event(eventName, signature));
+    }
+
+    registerDomainDispatcher(domainName, dispatcher)
+    {
+        var agent = this._agentForDomain(domainName);
+        agent.dispatcher = dispatcher;
+    }
+
+    dispatch(message)
+    {
+        let messageObject = (typeof message === "string") ? JSON.parse(message) : message;
+
+        if ("id" in messageObject)
+            this._dispatchResponse(messageObject);
+        else
+            this._dispatchEvent(messageObject);
+    }
+
+    runAfterPendingDispatches(script)
+    {
+        console.assert(script);
+        console.assert(typeof script === "function");
+
+        if (!this._pendingResponses.size)
+            script.call(this);
+        else
+            this._deferredScripts.push(script);
+    }
+
+    activateDomain(domainName, activationDebuggableType)
+    {
+        if (!activationDebuggableType || InspectorFrontendHost.debuggableType() === activationDebuggableType) {
+            var agent = this._agents[domainName];
+            agent.activate();
+            return agent;
+        }
+
+        return null;
+    }
+
+    // Private
+
+    _startOrStopAutomaticTracing()
+    {
+        this._defaultTracer.dumpMessagesToConsole = this.dumpInspectorProtocolMessages;
+        this._defaultTracer.dumpTimingDataToConsole = this.dumpTimingDataToConsole;
+    }
+
+    _agentForDomain(domainName)
+    {
+        if (this._agents[domainName])
+            return this._agents[domainName];
+
+        var agent = new InspectorBackend.Agent(domainName);
+        this._agents[domainName] = agent;
+        return agent;
+    }
+
+    _sendCommandToBackendWithCallback(command, parameters, callback)
+    {
+        let sequenceId = this._lastSequenceId++;
+
+        let messageObject = {
+            "id": sequenceId,
+            "method": command.qualifiedName,
+        };
+
+        if (Object.keys(parameters).length)
+            messageObject["params"] = parameters;
+
+        let responseData = {command, callback};
+
+        if (this.activeTracer)
+            responseData.sendRequestTimestamp = timestamp();
+
+        this._pendingResponses.set(sequenceId, responseData);
+        this._sendMessageToBackend(messageObject);
+    }
+
+    _sendCommandToBackendExpectingPromise(command, parameters)
+    {
+        let sequenceId = this._lastSequenceId++;
+
+        let messageObject = {
+            "id": sequenceId,
+            "method": command.qualifiedName,
+        };
+
+        if (Object.keys(parameters).length)
+            messageObject["params"] = parameters;
+
+        let responseData = {command};
+
+        if (this.activeTracer)
+            responseData.sendRequestTimestamp = timestamp();
+
+        let responsePromise = new Promise(function(resolve, reject) {
+            responseData.promise = {resolve, reject};
+        });
+
+        this._pendingResponses.set(sequenceId, responseData);
+        this._sendMessageToBackend(messageObject);
+
+        return responsePromise;
+    }
+
+    _sendMessageToBackend(messageObject)
+    {
+        for (let tracer of this.activeTracers)
+            tracer.logFrontendRequest(messageObject);
+
+        InspectorFrontendHost.sendMessageToBackend(JSON.stringify(messageObject));
+    }
+
+    _dispatchResponse(messageObject)
+    {
+        console.assert(this._pendingResponses.size >= 0);
+
+        if (messageObject["error"]) {
+            if (messageObject["error"].code !== -32000)
+                this._reportProtocolError(messageObject);
+        }
+
+        let sequenceId = messageObject["id"];
+        console.assert(this._pendingResponses.has(sequenceId), sequenceId, this._pendingResponses);
+
+        let responseData = this._pendingResponses.take(sequenceId) || {};
+        let {command, callback, promise} = responseData;
+
+        let processingStartTimestamp = timestamp();
+        for (let tracer of this.activeTracers)
+            tracer.logWillHandleResponse(messageObject);
+
+        if (typeof callback === "function")
+            this._dispatchResponseToCallback(command, messageObject, callback);
+        else if (typeof promise === "object")
+            this._dispatchResponseToPromise(command, messageObject, promise);
+        else
+            console.error("Received a command response without a corresponding callback or promise.", messageObject, command);
+
+        let processingTime = (timestamp() - processingStartTimestamp).toFixed(3);
+        let roundTripTime = (processingStartTimestamp - responseData.sendRequestTimestamp).toFixed(3);
+
+        for (let tracer of this.activeTracers)
+            tracer.logDidHandleResponse(messageObject, {rtt: roundTripTime, dispatch: processingTime});
+
+        if (this._deferredScripts.length && !this._pendingResponses.size)
+            this._flushPendingScripts();
+    }
+
+    _dispatchResponseToCallback(command, messageObject, callback)
+    {
+        let callbackArguments = [];
+        callbackArguments.push(messageObject["error"] ? messageObject["error"].message : null);
+
+        if (messageObject["result"]) {
+            for (var parameterName of command.replySignature)
+                callbackArguments.push(messageObject["result"][parameterName]);
+        }
+
+        try {
+            callback.apply(null, callbackArguments);
+        } catch (e) {
+            console.error("Uncaught exception in inspector page while dispatching callback for command " + command.qualifiedName, e);
+        }
+    }
+
+    _dispatchResponseToPromise(command, messageObject, promise)
+    {
+        let {resolve, reject} = promise;
+        if (messageObject["error"])
+            reject(new Error(messageObject["error"].message));
+        else
+            resolve(messageObject["result"]);
+    }
+
+    _dispatchEvent(messageObject)
+    {
+        let qualifiedName = messageObject["method"];
+        let [domainName, eventName] = qualifiedName.split(".");
+        if (!(domainName in this._agents)) {
+            console.error("Protocol Error: Attempted to dispatch method '" + eventName + "' for non-existing domain '" + domainName + "'");
+            return;
+        }
+
+        let agent = this._agentForDomain(domainName);
+        if (!agent.active) {
+            console.error("Protocol Error: Attempted to dispatch method for domain '" + domainName + "' which exists but is not active.");
+            return;
+        }
+
+        let event = agent.getEvent(eventName);
+        if (!event) {
+            console.error("Protocol Error: Attempted to dispatch an unspecified method '" + qualifiedName + "'");
+            return;
+        }
+
+        let eventArguments = [];
+        if (messageObject["params"])
+            eventArguments = event.parameterNames.map((name) => messageObject["params"][name]);
+
+        let processingStartTimestamp = timestamp();
+        for (let tracer of this.activeTracers)
+            tracer.logWillHandleEvent(messageObject);
+
+        try {
+            agent.dispatchEvent(eventName, eventArguments);
+        } catch (e) {
+            console.error("Uncaught exception in inspector page while handling event " + qualifiedName, e);
+            for (let tracer of this.activeTracers)
+                tracer.logFrontendException(messageObject, e);
+        }
+
+        let processingDuration = (timestamp() - processingStartTimestamp).toFixed(3);
+        for (let tracer of this.activeTracers)
+            tracer.logDidHandleEvent(messageObject, {dispatch: processingDuration});
+    }
+
+    _reportProtocolError(messageObject)
+    {
+        console.error("Request with id = " + messageObject["id"] + " failed. " + JSON.stringify(messageObject["error"]));
+    }
+
+    _flushPendingScripts()
+    {
+        console.assert(this._pendingResponses.size === 0);
+
+        let scriptsToRun = this._deferredScripts;
+        this._deferredScripts = [];
+        for (let script of scriptsToRun)
+            script.call(this);
+    }
+};
+
+InspectorBackend = new InspectorBackendClass;
+
+InspectorBackend.Agent = class InspectorBackendAgent
+{
+    constructor(domainName)
+    {
+        this._domainName = domainName;
+
+        // Agents are always created, but are only useable after they are activated.
+        this._active = false;
+
+        // Commands are stored directly on the Agent instance using their unqualified
+        // method name as the property. Thus, callers can write: FooAgent.methodName().
+        // Enums are stored similarly based on the unqualified type name.
+        this._events = {};
+    }
+
+    // Public
+
+    get domainName()
+    {
+        return this._domainName;
+    }
+
+    get active()
+    {
+        return this._active;
+    }
+
+    set dispatcher(value)
+    {
+        this._dispatcher = value;
+    }
+
+    addEnum(enumName, enumValues)
+    {
+        this[enumName] = enumValues;
+    }
+
+    addCommand(command)
+    {
+        this[command.commandName] = command;
+    }
+
+    addEvent(event)
+    {
+        this._events[event.eventName] = event;
+    }
+
+    getEvent(eventName)
+    {
+        return this._events[eventName];
+    }
+
+    hasEvent(eventName)
+    {
+        return eventName in this._events;
+    }
+
+    activate()
+    {
+        this._active = true;
+        window[this._domainName + "Agent"] = this;
+    }
+
+    dispatchEvent(eventName, eventArguments)
+    {
+        if (!(eventName in this._dispatcher)) {
+            console.error("Protocol Error: Attempted to dispatch an unimplemented method '" + this._domainName + "." + eventName + "'");
+            return false;
+        }
+
+        this._dispatcher[eventName].apply(this._dispatcher, eventArguments);
+        return true;
+    }
+};
+
+// InspectorBackend.Command can't use ES6 classes because of its trampoline nature.
+// But we can use strict mode to get stricter handling of the code inside its functions.
+InspectorBackend.Command = function(backend, qualifiedName, callSignature, replySignature)
+{
+    'use strict';
+
+    this._backend = backend;
+    this._instance = this;
+
+    var [domainName, commandName] = qualifiedName.split(".");
+    this._qualifiedName = qualifiedName;
+    this._commandName = commandName;
+    this._callSignature = callSignature || [];
+    this._replySignature = replySignature || [];
+};
+
+InspectorBackend.Command.create = function(backend, commandName, callSignature, replySignature)
+{
+    'use strict';
+
+    var instance = new InspectorBackend.Command(backend, commandName, callSignature, replySignature);
+
+    function callable() {
+        return instance._invokeWithArguments.apply(instance, arguments);
+    }
+
+    callable._instance = instance;
+    Object.setPrototypeOf(callable, InspectorBackend.Command.prototype);
+
+    return callable;
+};
+
+// As part of the workaround to make commands callable, these functions use |this._instance|.
+// |this| could refer to the callable trampoline, or the InspectorBackend.Command instance.
+InspectorBackend.Command.prototype = {
+    __proto__: Function.prototype,
+
+    // Public
+
+    get qualifiedName()
+    {
+        return this._instance._qualifiedName;
+    },
+
+    get commandName()
+    {
+        return this._instance._commandName;
+    },
+
+    get callSignature()
+    {
+        return this._instance._callSignature;
+    },
+
+    get replySignature()
+    {
+        return this._instance._replySignature;
+    },
+
+    invoke: function(commandArguments, callback)
+    {
+        'use strict';
+
+        let instance = this._instance;
+
+        if (typeof callback === "function")
+            instance._backend._sendCommandToBackendWithCallback(instance, commandArguments, callback);
+        else
+            return instance._backend._sendCommandToBackendExpectingPromise(instance, commandArguments);
+    },
+
+    supports: function(parameterName)
+    {
+        'use strict';
+
+        var instance = this._instance;
+        return instance.callSignature.some(function(parameter) {
+            return parameter["name"] === parameterName;
+        });
+    },
+
+    // Private
+
+    _invokeWithArguments: function()
+    {
+        'use strict';
+
+        let instance = this._instance;
+        let commandArguments = Array.from(arguments);
+        let callback = typeof commandArguments.lastValue === "function" ? commandArguments.pop() : null;
+
+        function deliverFailure(message) {
+            console.error(`Protocol Error: ${message}`);
+            if (callback)
+                setTimeout(callback.bind(null, message), 0);
+            else
+                return Promise.reject(new Error(message));
+        }
+
+        let parameters = {};
+        for (let parameter of instance.callSignature) {
+            let parameterName = parameter["name"];
+            let typeName = parameter["type"];
+            let optionalFlag = parameter["optional"];
+
+            if (!commandArguments.length && !optionalFlag)
+                return deliverFailure(`Invalid number of arguments for command '${instance.qualifiedName}'.`);
+
+            let value = commandArguments.shift();
+            if (optionalFlag && value === undefined)
+                continue;
+
+            if (typeof value !== typeName)
+                return deliverFailure(`Invalid type of argument '${parameterName}' for command '${instance.qualifiedName}' call. It must be '${typeName}' but it is '${typeof value}'.`);
+
+            parameters[parameterName] = value;
+        }
+
+        if (!callback && commandArguments.length === 1 && commandArguments[0] !== undefined)
+            return deliverFailure(`Protocol Error: Optional callback argument for command '${instance.qualifiedName}' call must be a function but its type is '${typeof args[0]}'.`);
+
+        if (callback)
+            instance._backend._sendCommandToBackendWithCallback(instance, parameters, callback);
+        else
+            return instance._backend._sendCommandToBackendExpectingPromise(instance, parameters);
+    }
+};
+
+InspectorBackend.Event = class Event
+{
+    constructor(eventName, parameterNames)
+    {
+        this.eventName = eventName;
+        this.parameterNames = parameterNames;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js b/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js
new file mode 100644
index 000000000..0c6ea6140
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendAPI.js
@@ -0,0 +1,146 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+InspectorFrontendAPI = {
+    _loaded: false,
+    _pendingCommands: [],
+
+    savedURL: function(url)
+    {
+        // Not used yet.
+    },
+
+    appendedToURL: function(url)
+    {
+        // Not used yet.
+    },
+
+    isTimelineProfilingEnabled: function()
+    {
+        return WebInspector.timelineManager.isCapturing();
+    },
+
+    setTimelineProfilingEnabled: function(enabled)
+    {
+        if (WebInspector.timelineManager.isCapturing() === enabled)
+            return;
+
+        if (enabled) {
+            WebInspector.showTimelineTab();
+            WebInspector.timelineManager.startCapturing();
+        } else {
+            WebInspector.timelineManager.stopCapturing();
+        }
+    },
+
+    setDockingUnavailable: function(unavailable)
+    {
+        WebInspector.updateDockingAvailability(!unavailable);
+    },
+
+    setDockSide: function(side)
+    {
+        WebInspector.updateDockedState(side);
+    },
+
+    showConsole: function()
+    {
+        WebInspector.showConsoleTab();
+
+        WebInspector.quickConsole.prompt.focus();
+
+        // If the page is still loading, focus the quick console again after tabindex autofocus.
+        if (document.readyState !== "complete")
+            document.addEventListener("readystatechange", this);
+        if (document.visibilityState !== "visible")
+            document.addEventListener("visibilitychange", this);  
+    },
+
+    handleEvent: function(event)
+    {
+        console.assert(event.type === "readystatechange" || event.type === "visibilitychange");
+
+        if (document.readyState === "complete" && document.visibilityState === "visible") {
+            WebInspector.quickConsole.prompt.focus();
+            document.removeEventListener("readystatechange", this);
+            document.removeEventListener("visibilitychange", this);
+        }
+    },
+
+    showResources: function()
+    {
+        WebInspector.showResourcesTab();
+    },
+
+    showMainResourceForFrame: function(frameIdentifier)
+    {
+        WebInspector.showSourceCodeForFrame(frameIdentifier);
+    },
+
+    contextMenuItemSelected: function(id)
+    {
+        WebInspector.ContextMenu.contextMenuItemSelected(id);
+    },
+
+    contextMenuCleared: function()
+    {
+        WebInspector.ContextMenu.contextMenuCleared();
+    },
+
+    dispatchMessageAsync: function(messageObject)
+    {
+        WebInspector.dispatchMessageFromBackend(messageObject);
+    },
+
+    dispatchMessage: function(messageObject)
+    {
+        InspectorBackend.dispatch(messageObject);
+    },
+
+    dispatch: function(signature)
+    {
+        if (!InspectorFrontendAPI._loaded) {
+            InspectorFrontendAPI._pendingCommands.push(signature);
+            return null;
+        }
+
+        var methodName = signature.shift();
+        console.assert(InspectorFrontendAPI[methodName], "Unexpected InspectorFrontendAPI method name: " + methodName);
+        if (!InspectorFrontendAPI[methodName])
+            return;
+
+        return InspectorFrontendAPI[methodName].apply(InspectorFrontendAPI, signature);
+    },
+
+    loadCompleted: function()
+    {
+        InspectorFrontendAPI._loaded = true;
+
+        for (var i = 0; i < InspectorFrontendAPI._pendingCommands.length; ++i)
+            InspectorFrontendAPI.dispatch(InspectorFrontendAPI._pendingCommands[i]);
+
+        delete InspectorFrontendAPI._pendingCommands;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendHostStub.js b/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendHostStub.js
new file mode 100644
index 000000000..3f90c8c2a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/InspectorFrontendHostStub.js
@@ -0,0 +1,183 @@
+/*
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ * Copyright (C) 2013 Seokju Kwon (seokju.kwon@gmail.com)
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+if (!window.Symbol) {
+    window.Symbol = function(string)
+    {
+        return string;
+    }
+}
+
+if (!window.InspectorFrontendHost) {
+    WebInspector.InspectorFrontendHostStub = function()
+    {
+    };
+
+    WebInspector.InspectorFrontendHostStub.prototype = {
+        // Public
+
+        initializeWebSocket: function(url)
+        {
+            var socket = new WebSocket(url);
+            socket.addEventListener("open", socketReady.bind(this));
+
+            function socketReady()
+            {
+                this._socket = socket;
+
+                this._socket.addEventListener("message", function(message) { InspectorBackend.dispatch(message.data); });
+                this._socket.addEventListener("error", function(error) { console.error(error); });
+
+                this._sendPendingMessagesToBackendIfNeeded();
+            }
+        },
+
+        bringToFront: function()
+        {
+            this._windowVisible = true;
+        },
+
+        closeWindow: function()
+        {
+            this._windowVisible = false;
+        },
+
+        requestSetDockSide: function(side)
+        {
+            InspectorFrontendAPI.setDockSide(side);
+        },
+
+        setAttachedWindowHeight: function(height)
+        {
+        },
+
+        setAttachedWindowWidth: function(width)
+        {
+        },
+
+        startWindowDrag: function()
+        {
+        },
+
+        moveWindowBy: function(x, y)
+        {
+        },
+
+        loaded: function()
+        {
+        },
+
+        localizedStringsURL: function()
+        {
+            return undefined;
+        },
+
+        debuggableType: function()
+        {
+            return "web";
+        },
+
+        inspectionLevel: function()
+        {
+            return 1;
+        },
+
+        inspectedURLChanged: function(title)
+        {
+            document.title = title;
+        },
+
+        copyText: function(text)
+        {
+            this._textToCopy = text;
+            if (!document.execCommand("copy"))
+                console.error("Clipboard access is denied");
+        },
+
+        killText: function(text, shouldStartNewSequence)
+        {
+        },
+
+        openInNewTab: function(url)
+        {
+            window.open(url, "_blank");
+        },
+
+        save: function(url, content, base64Encoded, forceSaveAs)
+        {
+        },
+
+        sendMessageToBackend: function(message)
+        {
+            if (!this._socket) {
+                if (!this._pendingMessages)
+                    this._pendingMessages = [];
+                this._pendingMessages.push(message);
+                return;
+            }
+
+            this._sendPendingMessagesToBackendIfNeeded();
+
+            this._socket.send(message);
+        },
+
+        platform: function()
+        {
+            return (navigator.platform.match(/mac|win|linux/i) || ["other"])[0].toLowerCase();
+        },
+
+        beep: function()
+        {
+        },
+
+        showContextMenu: function(event, menuObject)
+        {
+        },
+
+        // Private
+
+        _sendPendingMessagesToBackendIfNeeded: function()
+        {
+            if (!this._pendingMessages)
+                return;
+
+            for (var i = 0; i < this._pendingMessages.length; ++i)
+                this._socket.send(this._pendingMessages[i]);
+
+            delete this._pendingMessages;
+        }
+    };
+
+    InspectorFrontendHost = new WebInspector.InspectorFrontendHostStub;
+
+    WebInspector.dontLocalizeUserInterface = true;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/InspectorObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/InspectorObserver.js
new file mode 100644
index 000000000..ce6900569
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/InspectorObserver.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.InspectorObserver = class InspectorObserver
+{
+    // Events defined by the "Inspector" domain.
+
+    evaluateForTestInFrontend(script)
+    {
+        if (!InspectorFrontendHost.isUnderTest())
+            return;
+
+        InspectorBackend.runAfterPendingDispatches(function() {
+            window.eval(script);
+        });
+    }
+
+    inspect(payload, hints)
+    {
+        var remoteObject = WebInspector.RemoteObject.fromPayload(payload);
+        if (remoteObject.subtype === "node") {
+            WebInspector.domTreeManager.inspectNodeObject(remoteObject);
+            return;
+        }
+
+        if (hints.databaseId)
+            WebInspector.storageManager.inspectDatabase(hints.databaseId);
+        else if (hints.domStorageId)
+            WebInspector.storageManager.inspectDOMStorage(hints.domStorageId);
+
+        remoteObject.release();
+    }
+
+    detached(reason)
+    {
+        // FIXME: Not implemented.
+    }
+
+    activateExtraDomains(domains)
+    {
+        WebInspector.activateExtraDomains(domains);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/LayerTreeObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/LayerTreeObserver.js
new file mode 100644
index 000000000..0ac671bdd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/LayerTreeObserver.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OdF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeObserver = class LayerTreeObserver
+{
+    // Events defined by the "LayerTree" domain.
+
+    layerTreeDidChange()
+    {
+        if (WebInspector.layerTreeManager.supported)
+            WebInspector.layerTreeManager.layerTreeDidChange();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js
new file mode 100644
index 000000000..a3c2e3eb3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/7.0/InspectorBackendCommands.js
@@ -0,0 +1,319 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// DO NOT EDIT THIS FILE. It is automatically generated from Inspector-iOS-7.0.json
+// by the script: Source/JavaScriptCore/inspector/scripts/generate-inspector-protocol-bindings.py
+
+// Inspector.
+InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
+InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["testCallId", "script"]);
+InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
+InspectorBackend.registerEvent("Inspector.detached", ["reason"]);
+InspectorBackend.registerEvent("Inspector.targetCrashed", []);
+InspectorBackend.registerCommand("Inspector.enable", [], []);
+InspectorBackend.registerCommand("Inspector.disable", [], []);
+InspectorBackend.activateDomain("Inspector");
+
+// Page.
+InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
+InspectorBackend.registerEnum("Page.ResourceType", {Document: "Document", Stylesheet: "Stylesheet", Image: "Image", Font: "Font", Script: "Script", XHR: "XHR", WebSocket: "WebSocket", Other: "Other"});
+InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
+InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStartedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStoppedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameScheduledNavigation", ["frameId", "delay"]);
+InspectorBackend.registerEvent("Page.frameClearedScheduledNavigation", ["frameId"]);
+InspectorBackend.registerEvent("Page.javascriptDialogOpening", ["message"]);
+InspectorBackend.registerEvent("Page.javascriptDialogClosed", []);
+InspectorBackend.registerEvent("Page.scriptsEnabled", ["isEnabled"]);
+InspectorBackend.registerCommand("Page.enable", [], []);
+InspectorBackend.registerCommand("Page.disable", [], []);
+InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
+InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}, {"name": "scriptPreprocessor", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCookies", [], ["cookies", "cookiesString"]);
+InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
+InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
+InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
+InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setEmulatedMedia", [{"name": "media", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCompositingBordersVisible", [], ["result"]);
+InspectorBackend.registerCommand("Page.setCompositingBordersVisible", [{"name": "visible", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.handleJavaScriptDialog", [{"name": "accept", "type": "boolean", "optional": false}, {"name": "promptText", "type": "string", "optional": true}], []);
+InspectorBackend.activateDomain("Page");
+
+// Runtime.
+InspectorBackend.registerRuntimeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Runtime");
+InspectorBackend.registerEnum("Runtime.RemoteObjectType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
+InspectorBackend.registerEnum("Runtime.RemoteObjectSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
+InspectorBackend.registerEnum("Runtime.SyntaxErrorType", {None: "none", Irrecoverable: "irrecoverable", UnterminatedLiteral: "unterminated-literal", Recoverable: "recoverable"});
+InspectorBackend.registerEvent("Runtime.executionContextCreated", ["context"]);
+InspectorBackend.registerCommand("Runtime.parse", [{"name": "source", "type": "string", "optional": false}], ["result", "message", "range"]);
+InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "contextId", "type": "number", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}], ["result", "internalProperties"]);
+InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.enable", [], []);
+InspectorBackend.registerCommand("Runtime.disable", [], []);
+InspectorBackend.activateDomain("Runtime");
+
+// Console.
+InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
+InspectorBackend.registerEnum("Console.ConsoleMessageSource", {XML: "xml", Javascript: "javascript", Network: "network", ConsoleAPI: "console-api", Storage: "storage", Appcache: "appcache", Rendering: "rendering", CSS: "css", Security: "security", Other: "other"});
+InspectorBackend.registerEnum("Console.ConsoleMessageLevel", {Log: "log", Warning: "warning", Error: "error", Debug: "debug"});
+InspectorBackend.registerEnum("Console.ConsoleMessageType", {Log: "log", Dir: "dir", DirXML: "dirxml", Table: "table", Trace: "trace", Clear: "clear", StartGroup: "startGroup", StartGroupCollapsed: "startGroupCollapsed", EndGroup: "endGroup", Assert: "assert", Timing: "timing", Profile: "profile", ProfileEnd: "profileEnd"});
+InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
+InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
+InspectorBackend.registerEvent("Console.messagesCleared", []);
+InspectorBackend.registerCommand("Console.enable", [], []);
+InspectorBackend.registerCommand("Console.disable", [], []);
+InspectorBackend.registerCommand("Console.clearMessages", [], []);
+InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("Console");
+
+// Network.
+InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
+InspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Other: "other"});
+InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse", "type"]);
+InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
+InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
+InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
+InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp", "sourceMapURL"]);
+InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
+InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
+InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
+InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
+InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
+InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
+InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerCommand("Network.enable", [], []);
+InspectorBackend.registerCommand("Network.disable", [], []);
+InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
+InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.activateDomain("Network");
+
+// Database.
+InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
+InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
+InspectorBackend.registerCommand("Database.enable", [], []);
+InspectorBackend.registerCommand("Database.disable", [], []);
+InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
+InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["columnNames", "values", "sqlError"]);
+InspectorBackend.activateDomain("Database");
+
+// DOMStorage.
+InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
+InspectorBackend.registerEvent("DOMStorage.domStorageItemsCleared", ["storageId"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemRemoved", ["storageId", "key"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemAdded", ["storageId", "key", "newValue"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemUpdated", ["storageId", "key", "oldValue", "newValue"]);
+InspectorBackend.registerCommand("DOMStorage.enable", [], []);
+InspectorBackend.registerCommand("DOMStorage.disable", [], []);
+InspectorBackend.registerCommand("DOMStorage.getDOMStorageItems", [{"name": "storageId", "type": "object", "optional": false}], ["entries"]);
+InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMStorage");
+
+// ApplicationCache.
+InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
+InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
+InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
+InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
+InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
+InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
+InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
+InspectorBackend.activateDomain("ApplicationCache");
+
+// DOM.
+InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
+InspectorBackend.registerEvent("DOM.documentUpdated", []);
+InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
+InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
+InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
+InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
+InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
+InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
+InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
+InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
+InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
+InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
+InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
+InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "depth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["listeners"]);
+InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
+InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}], ["searchId", "resultCount"]);
+InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightQuad", [{"name": "quad", "type": "object", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "nodeId", "type": "number", "optional": true}, {"name": "objectId", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
+InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.pushNodeByBackendIdToFrontend", [{"name": "backendNodeId", "type": "number", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.releaseBackendNodeIds", [{"name": "nodeGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
+InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
+InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.undo", [], []);
+InspectorBackend.registerCommand("DOM.redo", [], []);
+InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
+InspectorBackend.registerCommand("DOM.focus", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("DOM");
+
+// CSS.
+InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
+InspectorBackend.registerEnum("CSS.StyleSheetOrigin", {User: "user", UserAgent: "user-agent", Inspector: "inspector", Regular: "regular"});
+InspectorBackend.registerEnum("CSS.CSSPropertyStatus", {Active: "active", Inactive: "inactive", Disabled: "disabled", Style: "style"});
+InspectorBackend.registerEnum("CSS.CSSMediaSource", {MediaRule: "mediaRule", ImportRule: "importRule", LinkedSheet: "linkedSheet", InlineSheet: "inlineSheet"});
+InspectorBackend.registerEnum("CSS.RegionRegionOverset", {Overset: "overset", Fit: "fit", Empty: "empty"});
+InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
+InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
+InspectorBackend.registerEvent("CSS.namedFlowCreated", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.namedFlowRemoved", ["documentNodeId", "flowName"]);
+InspectorBackend.registerEvent("CSS.regionLayoutUpdated", ["namedFlow"]);
+InspectorBackend.registerCommand("CSS.enable", [], []);
+InspectorBackend.registerCommand("CSS.disable", [], []);
+InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
+InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
+InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["computedStyle"]);
+InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
+InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
+InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
+InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.setStyleText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "text", "type": "string", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.addRule", [{"name": "contextNodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
+InspectorBackend.registerCommand("CSS.forcePseudoState", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.startSelectorProfiler", [], []);
+InspectorBackend.registerCommand("CSS.stopSelectorProfiler", [], ["profile"]);
+InspectorBackend.registerCommand("CSS.getNamedFlowCollection", [{"name": "documentNodeId", "type": "number", "optional": false}], ["namedFlows"]);
+InspectorBackend.activateDomain("CSS");
+
+// Timeline.
+InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
+InspectorBackend.registerEnum("Timeline.EventType", {EventDispatch: "EventDispatch", ScheduleStyleRecalculation: "ScheduleStyleRecalculation", RecalculateStyles: "RecalculateStyles", InvalidateLayout: "InvalidateLayout", Layout: "Layout", Paint: "Paint", ResizeImage: "ResizeImage", ParseHTML: "ParseHTML", TimerInstall: "TimerInstall", TimerRemove: "TimerRemove", TimerFire: "TimerFire", EvaluateScript: "EvaluateScript", MarkLoad: "MarkLoad", MarkDOMContent: "MarkDOMContent", TimeStamp: "TimeStamp", Time: "Time", TimeEnd: "TimeEnd", ScheduleResourceRequest: "ScheduleResourceRequest", ResourceSendRequest: "ResourceSendRequest", ResourceReceiveResponse: "ResourceReceiveResponse", ResourceReceivedData: "ResourceReceivedData", ResourceFinish: "ResourceFinish", XHRReadyStateChange: "XHRReadyStateChange", XHRLoad: "XHRLoad", FunctionCall: "FunctionCall", RequestAnimationFrame: "RequestAnimationFrame", CancelAnimationFrame: "CancelAnimationFrame", FireAnimationFrame: "FireAnimationFrame", WebSocketCreate: "WebSocketCreate", WebSocketSendHandshakeRequest: "WebSocketSendHandshakeRequest", WebSocketReceiveHandshakeResponse: "WebSocketReceiveHandshakeResponse", WebSocketDestroy: "WebSocketDestroy"});
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.activateDomain("Timeline");
+
+// Debugger.
+InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
+InspectorBackend.registerEnum("Debugger.ScopeType", {Global: "global", Local: "local", With: "with", Closure: "closure", Catch: "catch"});
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL", "hasSourceURL"]);
+InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
+InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
+InspectorBackend.registerEnum("Debugger.PausedReason", {XHR: "XHR", DOM: "DOM", EventListener: "EventListener", Exception: "exception", Assert: "assert", CSPViolation: "CSPViolation", Other: "other"});
+InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
+InspectorBackend.registerEvent("Debugger.resumed", []);
+InspectorBackend.registerCommand("Debugger.enable", [], []);
+InspectorBackend.registerCommand("Debugger.disable", [], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "locations"]);
+InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "condition", "type": "string", "optional": true}], ["breakpointId", "actualLocation"]);
+InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.stepOver", [], []);
+InspectorBackend.registerCommand("Debugger.stepInto", [], []);
+InspectorBackend.registerCommand("Debugger.stepOut", [], []);
+InspectorBackend.registerCommand("Debugger.pause", [], []);
+InspectorBackend.registerCommand("Debugger.resume", [], []);
+InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Debugger.restartFrame", [{"name": "callFrameId", "type": "string", "optional": false}], ["callFrames", "result"]);
+InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
+InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
+InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Debugger.setVariableValue", [{"name": "scopeNumber", "type": "number", "optional": false}, {"name": "variableName", "type": "string", "optional": false}, {"name": "newValue", "type": "object", "optional": false}, {"name": "callFrameId", "type": "string", "optional": true}, {"name": "functionObjectId", "type": "string", "optional": true}], []);
+InspectorBackend.activateDomain("Debugger");
+
+// DOMDebugger.
+InspectorBackend.registerEnum("DOMDebugger.DOMBreakpointType", {SubtreeModified: "subtree-modified", AttributeModified: "attribute-modified", NodeRemoved: "node-removed"});
+InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMDebugger");
+
+// Profiler.
+InspectorBackend.registerProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Profiler");
+InspectorBackend.registerEnum("Profiler.ProfileHeaderTypeId", {CPU: "CPU", CSS: "CSS"});
+InspectorBackend.registerEvent("Profiler.addProfileHeader", ["header"]);
+InspectorBackend.registerEvent("Profiler.setRecordingProfile", ["isProfiling"]);
+InspectorBackend.registerEvent("Profiler.resetProfiles", []);
+InspectorBackend.registerCommand("Profiler.enable", [], []);
+InspectorBackend.registerCommand("Profiler.disable", [], []);
+InspectorBackend.registerCommand("Profiler.start", [], []);
+InspectorBackend.registerCommand("Profiler.stop", [], []);
+InspectorBackend.registerCommand("Profiler.getProfileHeaders", [], ["headers"]);
+InspectorBackend.registerCommand("Profiler.getCPUProfile", [{"name": "uid", "type": "number", "optional": false}], ["profile"]);
+InspectorBackend.registerCommand("Profiler.removeProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Profiler.clearProfiles", [], []);
+InspectorBackend.activateDomain("Profiler");
+
+// LayerTree.
+InspectorBackend.registerLayerTreeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "LayerTree");
+InspectorBackend.registerEvent("LayerTree.layerTreeDidChange", []);
+InspectorBackend.registerCommand("LayerTree.enable", [], []);
+InspectorBackend.registerCommand("LayerTree.disable", [], []);
+InspectorBackend.registerCommand("LayerTree.layersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["layers"]);
+InspectorBackend.registerCommand("LayerTree.reasonsForCompositingLayer", [{"name": "layerId", "type": "string", "optional": false}], ["compositingReasons"]);
+InspectorBackend.activateDomain("LayerTree");
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js
new file mode 100644
index 000000000..4774ec9bb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/8.0/InspectorBackendCommands.js
@@ -0,0 +1,344 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// DO NOT EDIT THIS FILE. It is automatically generated from Inspector-iOS-8.0.json
+// by the script: Source/JavaScriptCore/inspector/scripts/generate-inspector-protocol-bindings.py
+
+// Console.
+InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
+InspectorBackend.registerEnum("Console.ConsoleMessageSource", {XML: "xml", Javascript: "javascript", Network: "network", ConsoleAPI: "console-api", Storage: "storage", Appcache: "appcache", Rendering: "rendering", CSS: "css", Security: "security", Other: "other"});
+InspectorBackend.registerEnum("Console.ConsoleMessageLevel", {Log: "log", Warning: "warning", Error: "error", Debug: "debug"});
+InspectorBackend.registerEnum("Console.ConsoleMessageType", {Log: "log", Dir: "dir", DirXML: "dirxml", Table: "table", Trace: "trace", Clear: "clear", StartGroup: "startGroup", StartGroupCollapsed: "startGroupCollapsed", EndGroup: "endGroup", Assert: "assert", Timing: "timing", Profile: "profile", ProfileEnd: "profileEnd"});
+InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
+InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
+InspectorBackend.registerEvent("Console.messagesCleared", []);
+InspectorBackend.registerCommand("Console.enable", [], []);
+InspectorBackend.registerCommand("Console.disable", [], []);
+InspectorBackend.registerCommand("Console.clearMessages", [], []);
+InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("Console");
+
+// Debugger.
+InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
+InspectorBackend.registerEnum("Debugger.BreakpointActionType", {Log: "log", Evaluate: "evaluate", Sound: "sound", Probe: "probe"});
+InspectorBackend.registerEnum("Debugger.ScopeType", {Global: "global", Local: "local", With: "with", Closure: "closure", Catch: "catch"});
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL", "hasSourceURL"]);
+InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
+InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
+InspectorBackend.registerEnum("Debugger.PausedReason", {XHR: "XHR", DOM: "DOM", EventListener: "EventListener", Exception: "exception", Assert: "assert", CSPViolation: "CSPViolation", Other: "other"});
+InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
+InspectorBackend.registerEvent("Debugger.resumed", []);
+InspectorBackend.registerEvent("Debugger.didSampleProbe", ["sample"]);
+InspectorBackend.registerEvent("Debugger.playBreakpointActionSound", ["breakpointActionId"]);
+InspectorBackend.registerCommand("Debugger.enable", [], []);
+InspectorBackend.registerCommand("Debugger.disable", [], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "options", "type": "object", "optional": true}], ["breakpointId", "locations"]);
+InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "options", "type": "object", "optional": true}], ["breakpointId", "actualLocation"]);
+InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.stepOver", [], []);
+InspectorBackend.registerCommand("Debugger.stepInto", [], []);
+InspectorBackend.registerCommand("Debugger.stepOut", [], []);
+InspectorBackend.registerCommand("Debugger.pause", [], []);
+InspectorBackend.registerCommand("Debugger.resume", [], []);
+InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
+InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
+InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
+InspectorBackend.activateDomain("Debugger");
+
+// Inspector.
+InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
+InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["script"]);
+InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
+InspectorBackend.registerEvent("Inspector.detached", ["reason"]);
+InspectorBackend.registerEvent("Inspector.targetCrashed", []);
+InspectorBackend.registerCommand("Inspector.enable", [], []);
+InspectorBackend.registerCommand("Inspector.disable", [], []);
+InspectorBackend.activateDomain("Inspector");
+
+// Profiler.
+InspectorBackend.registerProfilerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Profiler");
+InspectorBackend.registerEnum("Profiler.ProfileHeaderTypeId", {CPU: "CPU"});
+InspectorBackend.registerEvent("Profiler.addProfileHeader", ["header"]);
+InspectorBackend.registerEvent("Profiler.setRecordingProfile", ["isProfiling"]);
+InspectorBackend.registerEvent("Profiler.resetProfiles", []);
+InspectorBackend.registerCommand("Profiler.enable", [], []);
+InspectorBackend.registerCommand("Profiler.disable", [], []);
+InspectorBackend.registerCommand("Profiler.start", [], []);
+InspectorBackend.registerCommand("Profiler.stop", [], []);
+InspectorBackend.registerCommand("Profiler.getProfileHeaders", [], ["headers"]);
+InspectorBackend.registerCommand("Profiler.getCPUProfile", [{"name": "uid", "type": "number", "optional": false}], ["profile"]);
+InspectorBackend.registerCommand("Profiler.removeProfile", [{"name": "type", "type": "string", "optional": false}, {"name": "uid", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Profiler.clearProfiles", [], []);
+InspectorBackend.activateDomain("Profiler");
+
+// Runtime.
+InspectorBackend.registerRuntimeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Runtime");
+InspectorBackend.registerEnum("Runtime.RemoteObjectType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
+InspectorBackend.registerEnum("Runtime.RemoteObjectSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date"});
+InspectorBackend.registerEnum("Runtime.SyntaxErrorType", {None: "none", Irrecoverable: "irrecoverable", UnterminatedLiteral: "unterminated-literal", Recoverable: "recoverable"});
+InspectorBackend.registerEvent("Runtime.executionContextCreated", ["context"]);
+InspectorBackend.registerCommand("Runtime.parse", [{"name": "source", "type": "string", "optional": false}], ["result", "message", "range"]);
+InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "contextId", "type": "number", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}], ["result", "internalProperties"]);
+InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.enable", [], []);
+InspectorBackend.registerCommand("Runtime.disable", [], []);
+InspectorBackend.activateDomain("Runtime");
+
+// ApplicationCache.
+InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
+InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
+InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
+InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
+InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
+InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
+InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
+InspectorBackend.activateDomain("ApplicationCache", "web");
+
+// CSS.
+InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
+InspectorBackend.registerEnum("CSS.StyleSheetOrigin", {User: "user", UserAgent: "user-agent", Inspector: "inspector", Regular: "regular"});
+InspectorBackend.registerEnum("CSS.CSSPropertyStatus", {Active: "active", Inactive: "inactive", Disabled: "disabled", Style: "style"});
+InspectorBackend.registerEnum("CSS.CSSMediaSource", {MediaRule: "mediaRule", ImportRule: "importRule", LinkedSheet: "linkedSheet", InlineSheet: "inlineSheet"});
+InspectorBackend.registerEnum("CSS.RegionRegionOverset", {Overset: "overset", Fit: "fit", Empty: "empty"});
+InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
+InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
+InspectorBackend.registerEvent("CSS.namedFlowCreated", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.namedFlowRemoved", ["documentNodeId", "flowName"]);
+InspectorBackend.registerEvent("CSS.regionOversetChanged", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.registeredNamedFlowContentElement", ["documentNodeId", "flowName", "contentNodeId", "nextContentNodeId"]);
+InspectorBackend.registerEvent("CSS.unregisteredNamedFlowContentElement", ["documentNodeId", "flowName", "contentNodeId"]);
+InspectorBackend.registerCommand("CSS.enable", [], []);
+InspectorBackend.registerCommand("CSS.disable", [], []);
+InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
+InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
+InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["computedStyle"]);
+InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
+InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
+InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
+InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.setStyleText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "text", "type": "string", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.addRule", [{"name": "contextNodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
+InspectorBackend.registerCommand("CSS.forcePseudoState", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.getNamedFlowCollection", [{"name": "documentNodeId", "type": "number", "optional": false}], ["namedFlows"]);
+InspectorBackend.activateDomain("CSS", "web");
+
+// DOM.
+InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
+InspectorBackend.registerEnum("DOM.LiveRegionRelevant", {Additions: "additions", Removals: "removals", Text: "text"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesChecked", {True: "true", False: "false", Mixed: "mixed"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesInvalid", {True: "true", False: "false", Grammar: "grammar", Spelling: "spelling"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesLiveRegionStatus", {Assertive: "assertive", Polite: "polite", Off: "off"});
+InspectorBackend.registerEvent("DOM.documentUpdated", []);
+InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
+InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
+InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
+InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
+InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
+InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
+InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
+InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
+InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
+InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
+InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
+InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "depth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["listeners"]);
+InspectorBackend.registerCommand("DOM.getAccessibilityPropertiesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["properties"]);
+InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
+InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}, {"name": "nodeIds", "type": "object", "optional": true}], ["searchId", "resultCount"]);
+InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightQuad", [{"name": "quad", "type": "object", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "nodeId", "type": "number", "optional": true}, {"name": "objectId", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
+InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.pushNodeByBackendIdToFrontend", [{"name": "backendNodeId", "type": "number", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.releaseBackendNodeIds", [{"name": "nodeGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
+InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
+InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.undo", [], []);
+InspectorBackend.registerCommand("DOM.redo", [], []);
+InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
+InspectorBackend.registerCommand("DOM.focus", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("DOM", "web");
+
+// DOMDebugger.
+InspectorBackend.registerEnum("DOMDebugger.DOMBreakpointType", {SubtreeModified: "subtree-modified", AttributeModified: "attribute-modified", NodeRemoved: "node-removed"});
+InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMDebugger", "web");
+
+// DOMStorage.
+InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
+InspectorBackend.registerEvent("DOMStorage.domStorageItemsCleared", ["storageId"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemRemoved", ["storageId", "key"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemAdded", ["storageId", "key", "newValue"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemUpdated", ["storageId", "key", "oldValue", "newValue"]);
+InspectorBackend.registerCommand("DOMStorage.enable", [], []);
+InspectorBackend.registerCommand("DOMStorage.disable", [], []);
+InspectorBackend.registerCommand("DOMStorage.getDOMStorageItems", [{"name": "storageId", "type": "object", "optional": false}], ["entries"]);
+InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMStorage", "web");
+
+// Database.
+InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
+InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
+InspectorBackend.registerCommand("Database.enable", [], []);
+InspectorBackend.registerCommand("Database.disable", [], []);
+InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
+InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["columnNames", "values", "sqlError"]);
+InspectorBackend.activateDomain("Database", "web");
+
+// IndexedDB.
+InspectorBackend.registerIndexedDBDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "IndexedDB");
+InspectorBackend.registerEnum("IndexedDB.KeyType", {Number: "number", String: "string", Date: "date", Array: "array"});
+InspectorBackend.registerEnum("IndexedDB.KeyPathType", {Null: "null", String: "string", Array: "array"});
+InspectorBackend.registerCommand("IndexedDB.enable", [], []);
+InspectorBackend.registerCommand("IndexedDB.disable", [], []);
+InspectorBackend.registerCommand("IndexedDB.requestDatabaseNames", [{"name": "securityOrigin", "type": "string", "optional": false}], ["databaseNames"]);
+InspectorBackend.registerCommand("IndexedDB.requestDatabase", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}], ["databaseWithObjectStores"]);
+InspectorBackend.registerCommand("IndexedDB.requestData", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}, {"name": "indexName", "type": "string", "optional": false}, {"name": "skipCount", "type": "number", "optional": false}, {"name": "pageSize", "type": "number", "optional": false}, {"name": "keyRange", "type": "object", "optional": true}], ["objectStoreDataEntries", "hasMore"]);
+InspectorBackend.registerCommand("IndexedDB.clearObjectStore", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("IndexedDB", "web");
+
+// LayerTree.
+InspectorBackend.registerLayerTreeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "LayerTree");
+InspectorBackend.registerEvent("LayerTree.layerTreeDidChange", []);
+InspectorBackend.registerCommand("LayerTree.enable", [], []);
+InspectorBackend.registerCommand("LayerTree.disable", [], []);
+InspectorBackend.registerCommand("LayerTree.layersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["layers"]);
+InspectorBackend.registerCommand("LayerTree.reasonsForCompositingLayer", [{"name": "layerId", "type": "string", "optional": false}], ["compositingReasons"]);
+InspectorBackend.activateDomain("LayerTree", "web");
+
+// Network.
+InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
+InspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Other: "other"});
+InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse", "type"]);
+InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
+InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
+InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
+InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp", "sourceMapURL"]);
+InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
+InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
+InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
+InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
+InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
+InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
+InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerCommand("Network.enable", [], []);
+InspectorBackend.registerCommand("Network.disable", [], []);
+InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
+InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Network.loadResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "mimeType", "status"]);
+InspectorBackend.activateDomain("Network", "web");
+
+// Page.
+InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
+InspectorBackend.registerEnum("Page.ResourceType", {Document: "Document", Stylesheet: "Stylesheet", Image: "Image", Font: "Font", Script: "Script", XHR: "XHR", WebSocket: "WebSocket", Other: "Other"});
+InspectorBackend.registerEnum("Page.CoordinateSystem", {Viewport: "Viewport", Page: "Page"});
+InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
+InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStartedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStoppedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameScheduledNavigation", ["frameId", "delay"]);
+InspectorBackend.registerEvent("Page.frameClearedScheduledNavigation", ["frameId"]);
+InspectorBackend.registerEvent("Page.javascriptDialogOpening", ["message"]);
+InspectorBackend.registerEvent("Page.javascriptDialogClosed", []);
+InspectorBackend.registerEvent("Page.scriptsEnabled", ["isEnabled"]);
+InspectorBackend.registerCommand("Page.enable", [], []);
+InspectorBackend.registerCommand("Page.disable", [], []);
+InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
+InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCookies", [], ["cookies"]);
+InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
+InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
+InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
+InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setEmulatedMedia", [{"name": "media", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCompositingBordersVisible", [], ["result"]);
+InspectorBackend.registerCommand("Page.setCompositingBordersVisible", [{"name": "visible", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.snapshotNode", [{"name": "nodeId", "type": "number", "optional": false}], ["dataURL"]);
+InspectorBackend.registerCommand("Page.snapshotRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "coordinateSystem", "type": "string", "optional": false}], ["dataURL"]);
+InspectorBackend.registerCommand("Page.handleJavaScriptDialog", [{"name": "accept", "type": "boolean", "optional": false}, {"name": "promptText", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.archive", [], ["data"]);
+InspectorBackend.activateDomain("Page", "web");
+
+// Timeline.
+InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
+InspectorBackend.registerEnum("Timeline.EventType", {EventDispatch: "EventDispatch", ScheduleStyleRecalculation: "ScheduleStyleRecalculation", RecalculateStyles: "RecalculateStyles", InvalidateLayout: "InvalidateLayout", Layout: "Layout", Paint: "Paint", ResizeImage: "ResizeImage", ParseHTML: "ParseHTML", TimerInstall: "TimerInstall", TimerRemove: "TimerRemove", TimerFire: "TimerFire", EvaluateScript: "EvaluateScript", MarkLoad: "MarkLoad", MarkDOMContent: "MarkDOMContent", TimeStamp: "TimeStamp", Time: "Time", TimeEnd: "TimeEnd", ScheduleResourceRequest: "ScheduleResourceRequest", ResourceSendRequest: "ResourceSendRequest", ResourceReceiveResponse: "ResourceReceiveResponse", ResourceReceivedData: "ResourceReceivedData", ResourceFinish: "ResourceFinish", XHRReadyStateChange: "XHRReadyStateChange", XHRLoad: "XHRLoad", FunctionCall: "FunctionCall", ProbeSample: "ProbeSample", ConsoleProfile: "ConsoleProfile", RequestAnimationFrame: "RequestAnimationFrame", CancelAnimationFrame: "CancelAnimationFrame", FireAnimationFrame: "FireAnimationFrame", WebSocketCreate: "WebSocketCreate", WebSocketSendHandshakeRequest: "WebSocketSendHandshakeRequest", WebSocketReceiveHandshakeResponse: "WebSocketReceiveHandshakeResponse", WebSocketDestroy: "WebSocketDestroy"});
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerEvent("Timeline.recordingStarted", []);
+InspectorBackend.registerEvent("Timeline.recordingStopped", []);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.activateDomain("Timeline", "web");
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js
new file mode 100644
index 000000000..303a31112
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.0/InspectorBackendCommands.js
@@ -0,0 +1,341 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// DO NOT EDIT THIS FILE. It is automatically generated from Inspector-iOS-9.0.json
+// by the script: Source/JavaScriptCore/inspector/scripts/generate-inspector-protocol-bindings.py
+
+// ApplicationCache.
+InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
+InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
+InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
+InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
+InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
+InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
+InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
+InspectorBackend.activateDomain("ApplicationCache", "web");
+
+// CSS.
+InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
+InspectorBackend.registerEnum("CSS.StyleSheetOrigin", {User: "user", UserAgent: "user-agent", Inspector: "inspector", Regular: "regular"});
+InspectorBackend.registerEnum("CSS.CSSPropertyStatus", {Active: "active", Inactive: "inactive", Disabled: "disabled", Style: "style"});
+InspectorBackend.registerEnum("CSS.CSSMediaSource", {MediaRule: "mediaRule", ImportRule: "importRule", LinkedSheet: "linkedSheet", InlineSheet: "inlineSheet"});
+InspectorBackend.registerEnum("CSS.RegionRegionOverset", {Overset: "overset", Fit: "fit", Empty: "empty"});
+InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
+InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
+InspectorBackend.registerEvent("CSS.namedFlowCreated", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.namedFlowRemoved", ["documentNodeId", "flowName"]);
+InspectorBackend.registerEvent("CSS.regionOversetChanged", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.registeredNamedFlowContentElement", ["documentNodeId", "flowName", "contentNodeId", "nextContentNodeId"]);
+InspectorBackend.registerEvent("CSS.unregisteredNamedFlowContentElement", ["documentNodeId", "flowName", "contentNodeId"]);
+InspectorBackend.registerCommand("CSS.enable", [], []);
+InspectorBackend.registerCommand("CSS.disable", [], []);
+InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
+InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
+InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["computedStyle"]);
+InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
+InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
+InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
+InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.setStyleText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "text", "type": "string", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.addRule", [{"name": "contextNodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
+InspectorBackend.registerCommand("CSS.forcePseudoState", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.getNamedFlowCollection", [{"name": "documentNodeId", "type": "number", "optional": false}], ["namedFlows"]);
+InspectorBackend.activateDomain("CSS", "web");
+
+// Console.
+InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
+InspectorBackend.registerEnum("Console.ConsoleMessageSource", {XML: "xml", Javascript: "javascript", Network: "network", ConsoleAPI: "console-api", Storage: "storage", Appcache: "appcache", Rendering: "rendering", CSS: "css", Security: "security", ContentBlocker: "content-blocker", Other: "other"});
+InspectorBackend.registerEnum("Console.ConsoleMessageLevel", {Log: "log", Info: "info", Warning: "warning", Error: "error", Debug: "debug"});
+InspectorBackend.registerEnum("Console.ConsoleMessageType", {Log: "log", Dir: "dir", DirXML: "dirxml", Table: "table", Trace: "trace", Clear: "clear", StartGroup: "startGroup", StartGroupCollapsed: "startGroupCollapsed", EndGroup: "endGroup", Assert: "assert", Timing: "timing", Profile: "profile", ProfileEnd: "profileEnd"});
+InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
+InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
+InspectorBackend.registerEvent("Console.messagesCleared", []);
+InspectorBackend.registerCommand("Console.enable", [], []);
+InspectorBackend.registerCommand("Console.disable", [], []);
+InspectorBackend.registerCommand("Console.clearMessages", [], []);
+InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("Console");
+
+// DOM.
+InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
+InspectorBackend.registerEnum("DOM.LiveRegionRelevant", {Additions: "additions", Removals: "removals", Text: "text"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesChecked", {True: "true", False: "false", Mixed: "mixed"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesInvalid", {True: "true", False: "false", Grammar: "grammar", Spelling: "spelling"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesLiveRegionStatus", {Assertive: "assertive", Polite: "polite", Off: "off"});
+InspectorBackend.registerEvent("DOM.documentUpdated", []);
+InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
+InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
+InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
+InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
+InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
+InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
+InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
+InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
+InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
+InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
+InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
+InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "depth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["listeners"]);
+InspectorBackend.registerCommand("DOM.getAccessibilityPropertiesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["properties"]);
+InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
+InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}, {"name": "nodeIds", "type": "object", "optional": true}], ["searchId", "resultCount"]);
+InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightQuad", [{"name": "quad", "type": "object", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightSelector", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "selectorString", "type": "string", "optional": false}, {"name": "frameId", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "nodeId", "type": "number", "optional": true}, {"name": "objectId", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
+InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.pushNodeByBackendIdToFrontend", [{"name": "backendNodeId", "type": "number", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.releaseBackendNodeIds", [{"name": "nodeGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
+InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
+InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.undo", [], []);
+InspectorBackend.registerCommand("DOM.redo", [], []);
+InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
+InspectorBackend.registerCommand("DOM.focus", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("DOM", "web");
+
+// DOMDebugger.
+InspectorBackend.registerEnum("DOMDebugger.DOMBreakpointType", {SubtreeModified: "subtree-modified", AttributeModified: "attribute-modified", NodeRemoved: "node-removed"});
+InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMDebugger", "web");
+
+// DOMStorage.
+InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
+InspectorBackend.registerEvent("DOMStorage.domStorageItemsCleared", ["storageId"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemRemoved", ["storageId", "key"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemAdded", ["storageId", "key", "newValue"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemUpdated", ["storageId", "key", "oldValue", "newValue"]);
+InspectorBackend.registerCommand("DOMStorage.enable", [], []);
+InspectorBackend.registerCommand("DOMStorage.disable", [], []);
+InspectorBackend.registerCommand("DOMStorage.getDOMStorageItems", [{"name": "storageId", "type": "object", "optional": false}], ["entries"]);
+InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMStorage", "web");
+
+// Database.
+InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
+InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
+InspectorBackend.registerCommand("Database.enable", [], []);
+InspectorBackend.registerCommand("Database.disable", [], []);
+InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
+InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["columnNames", "values", "sqlError"]);
+InspectorBackend.activateDomain("Database", "web");
+
+// Debugger.
+InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
+InspectorBackend.registerEnum("Debugger.BreakpointActionType", {Log: "log", Evaluate: "evaluate", Sound: "sound", Probe: "probe"});
+InspectorBackend.registerEnum("Debugger.ScopeType", {Global: "global", Local: "local", With: "with", Closure: "closure", Catch: "catch", FunctionName: "functionName"});
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL", "hasSourceURL"]);
+InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
+InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
+InspectorBackend.registerEnum("Debugger.PausedReason", {XHR: "XHR", DOM: "DOM", EventListener: "EventListener", Exception: "exception", Assert: "assert", CSPViolation: "CSPViolation", DebuggerStatement: "DebuggerStatement", Breakpoint: "Breakpoint", PauseOnNextStatement: "PauseOnNextStatement", Other: "other"});
+InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
+InspectorBackend.registerEvent("Debugger.resumed", []);
+InspectorBackend.registerEvent("Debugger.didSampleProbe", ["sample"]);
+InspectorBackend.registerEvent("Debugger.playBreakpointActionSound", ["breakpointActionId"]);
+InspectorBackend.registerCommand("Debugger.enable", [], []);
+InspectorBackend.registerCommand("Debugger.disable", [], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "options", "type": "object", "optional": true}], ["breakpointId", "locations"]);
+InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "options", "type": "object", "optional": true}], ["breakpointId", "actualLocation"]);
+InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.stepOver", [], []);
+InspectorBackend.registerCommand("Debugger.stepInto", [], []);
+InspectorBackend.registerCommand("Debugger.stepOut", [], []);
+InspectorBackend.registerCommand("Debugger.pause", [], []);
+InspectorBackend.registerCommand("Debugger.resume", [], []);
+InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
+InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
+InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
+InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
+InspectorBackend.activateDomain("Debugger");
+
+// IndexedDB.
+InspectorBackend.registerIndexedDBDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "IndexedDB");
+InspectorBackend.registerEnum("IndexedDB.KeyType", {Number: "number", String: "string", Date: "date", Array: "array"});
+InspectorBackend.registerEnum("IndexedDB.KeyPathType", {Null: "null", String: "string", Array: "array"});
+InspectorBackend.registerCommand("IndexedDB.enable", [], []);
+InspectorBackend.registerCommand("IndexedDB.disable", [], []);
+InspectorBackend.registerCommand("IndexedDB.requestDatabaseNames", [{"name": "securityOrigin", "type": "string", "optional": false}], ["databaseNames"]);
+InspectorBackend.registerCommand("IndexedDB.requestDatabase", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}], ["databaseWithObjectStores"]);
+InspectorBackend.registerCommand("IndexedDB.requestData", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}, {"name": "indexName", "type": "string", "optional": false}, {"name": "skipCount", "type": "number", "optional": false}, {"name": "pageSize", "type": "number", "optional": false}, {"name": "keyRange", "type": "object", "optional": true}], ["objectStoreDataEntries", "hasMore"]);
+InspectorBackend.registerCommand("IndexedDB.clearObjectStore", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("IndexedDB", "web");
+
+// Inspector.
+InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
+InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["script"]);
+InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
+InspectorBackend.registerEvent("Inspector.detached", ["reason"]);
+InspectorBackend.registerEvent("Inspector.activateExtraDomains", ["domains"]);
+InspectorBackend.registerEvent("Inspector.targetCrashed", []);
+InspectorBackend.registerCommand("Inspector.enable", [], []);
+InspectorBackend.registerCommand("Inspector.disable", [], []);
+InspectorBackend.registerCommand("Inspector.initialized", [], []);
+InspectorBackend.activateDomain("Inspector");
+
+// LayerTree.
+InspectorBackend.registerLayerTreeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "LayerTree");
+InspectorBackend.registerEvent("LayerTree.layerTreeDidChange", []);
+InspectorBackend.registerCommand("LayerTree.enable", [], []);
+InspectorBackend.registerCommand("LayerTree.disable", [], []);
+InspectorBackend.registerCommand("LayerTree.layersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["layers"]);
+InspectorBackend.registerCommand("LayerTree.reasonsForCompositingLayer", [{"name": "layerId", "type": "string", "optional": false}], ["compositingReasons"]);
+InspectorBackend.activateDomain("LayerTree", "web");
+
+// Network.
+InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
+InspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Other: "other"});
+InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse", "type"]);
+InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
+InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
+InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
+InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp", "sourceMapURL"]);
+InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
+InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
+InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
+InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
+InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
+InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
+InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerCommand("Network.enable", [], []);
+InspectorBackend.registerCommand("Network.disable", [], []);
+InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
+InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Network.loadResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "mimeType", "status"]);
+InspectorBackend.activateDomain("Network", "web");
+
+// Page.
+InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
+InspectorBackend.registerEnum("Page.ResourceType", {Document: "Document", Stylesheet: "Stylesheet", Image: "Image", Font: "Font", Script: "Script", XHR: "XHR", WebSocket: "WebSocket", Other: "Other"});
+InspectorBackend.registerEnum("Page.CoordinateSystem", {Viewport: "Viewport", Page: "Page"});
+InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
+InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStartedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStoppedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameScheduledNavigation", ["frameId", "delay"]);
+InspectorBackend.registerEvent("Page.frameClearedScheduledNavigation", ["frameId"]);
+InspectorBackend.registerEvent("Page.javascriptDialogOpening", ["message"]);
+InspectorBackend.registerEvent("Page.javascriptDialogClosed", []);
+InspectorBackend.registerEvent("Page.scriptsEnabled", ["isEnabled"]);
+InspectorBackend.registerCommand("Page.enable", [], []);
+InspectorBackend.registerCommand("Page.disable", [], []);
+InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
+InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCookies", [], ["cookies"]);
+InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
+InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
+InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setShowPaintRects", [{"name": "result", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
+InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setEmulatedMedia", [{"name": "media", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCompositingBordersVisible", [], ["result"]);
+InspectorBackend.registerCommand("Page.setCompositingBordersVisible", [{"name": "visible", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.snapshotNode", [{"name": "nodeId", "type": "number", "optional": false}], ["dataURL"]);
+InspectorBackend.registerCommand("Page.snapshotRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "coordinateSystem", "type": "string", "optional": false}], ["dataURL"]);
+InspectorBackend.registerCommand("Page.handleJavaScriptDialog", [{"name": "accept", "type": "boolean", "optional": false}, {"name": "promptText", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.archive", [], ["data"]);
+InspectorBackend.activateDomain("Page", "web");
+
+// Runtime.
+InspectorBackend.registerRuntimeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Runtime");
+InspectorBackend.registerEnum("Runtime.RemoteObjectType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean", Symbol: "symbol"});
+InspectorBackend.registerEnum("Runtime.RemoteObjectSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date", Error: "error", Map: "map", Set: "set", Weakmap: "weakmap", Weakset: "weakset", Iterator: "iterator", Class: "class"});
+InspectorBackend.registerEnum("Runtime.ObjectPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean", Symbol: "symbol"});
+InspectorBackend.registerEnum("Runtime.ObjectPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date", Error: "error", Map: "map", Set: "set", Weakmap: "weakmap", Weakset: "weakset", Iterator: "iterator", Class: "class"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean", Symbol: "symbol", Accessor: "accessor"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date", Error: "error", Map: "map", Set: "set", Weakmap: "weakmap", Weakset: "weakset", Iterator: "iterator", Class: "class"});
+InspectorBackend.registerEnum("Runtime.SyntaxErrorType", {None: "none", Irrecoverable: "irrecoverable", UnterminatedLiteral: "unterminated-literal", Recoverable: "recoverable"});
+InspectorBackend.registerEvent("Runtime.executionContextCreated", ["context"]);
+InspectorBackend.registerCommand("Runtime.parse", [{"name": "source", "type": "string", "optional": false}], ["result", "message", "range"]);
+InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "contextId", "type": "number", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
+InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "internalProperties"]);
+InspectorBackend.registerCommand("Runtime.getDisplayableProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["properties", "internalProperties"]);
+InspectorBackend.registerCommand("Runtime.getCollectionEntries", [{"name": "objectId", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "startIndex", "type": "number", "optional": true}, {"name": "numberToFetch", "type": "number", "optional": true}], ["entries"]);
+InspectorBackend.registerCommand("Runtime.saveResult", [{"name": "value", "type": "object", "optional": false}, {"name": "contextId", "type": "number", "optional": true}], ["savedResultIndex"]);
+InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.enable", [], []);
+InspectorBackend.registerCommand("Runtime.disable", [], []);
+InspectorBackend.registerCommand("Runtime.getRuntimeTypesForVariablesAtOffsets", [{"name": "locations", "type": "object", "optional": false}], ["types"]);
+InspectorBackend.registerCommand("Runtime.enableTypeProfiler", [], []);
+InspectorBackend.registerCommand("Runtime.disableTypeProfiler", [], []);
+InspectorBackend.registerCommand("Runtime.getBasicBlocks", [{"name": "sourceID", "type": "string", "optional": false}], ["basicBlocks"]);
+InspectorBackend.activateDomain("Runtime");
+
+// Timeline.
+InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
+InspectorBackend.registerEnum("Timeline.EventType", {EventDispatch: "EventDispatch", ScheduleStyleRecalculation: "ScheduleStyleRecalculation", RecalculateStyles: "RecalculateStyles", InvalidateLayout: "InvalidateLayout", Layout: "Layout", Paint: "Paint", Composite: "Composite", RenderingFrame: "RenderingFrame", ParseHTML: "ParseHTML", TimerInstall: "TimerInstall", TimerRemove: "TimerRemove", TimerFire: "TimerFire", EvaluateScript: "EvaluateScript", MarkLoad: "MarkLoad", MarkDOMContent: "MarkDOMContent", TimeStamp: "TimeStamp", Time: "Time", TimeEnd: "TimeEnd", XHRReadyStateChange: "XHRReadyStateChange", XHRLoad: "XHRLoad", FunctionCall: "FunctionCall", ProbeSample: "ProbeSample", ConsoleProfile: "ConsoleProfile", RequestAnimationFrame: "RequestAnimationFrame", CancelAnimationFrame: "CancelAnimationFrame", FireAnimationFrame: "FireAnimationFrame", WebSocketCreate: "WebSocketCreate", WebSocketSendHandshakeRequest: "WebSocketSendHandshakeRequest", WebSocketReceiveHandshakeResponse: "WebSocketReceiveHandshakeResponse", WebSocketDestroy: "WebSocketDestroy"});
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerEvent("Timeline.recordingStarted", []);
+InspectorBackend.registerEvent("Timeline.recordingStopped", []);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.activateDomain("Timeline", "web");
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js
new file mode 100644
index 000000000..2a128d278
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/Legacy/9.3/InspectorBackendCommands.js
@@ -0,0 +1,368 @@
+/*
+ * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// DO NOT EDIT THIS FILE. It is automatically generated from Inspector-iOS-9.3.json
+// by the script: Source/JavaScriptCore/inspector/scripts/generate-inspector-protocol-bindings.py
+
+// ApplicationCache.
+InspectorBackend.registerApplicationCacheDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "ApplicationCache");
+InspectorBackend.registerEvent("ApplicationCache.applicationCacheStatusUpdated", ["frameId", "manifestURL", "status"]);
+InspectorBackend.registerEvent("ApplicationCache.networkStateUpdated", ["isNowOnline"]);
+InspectorBackend.registerCommand("ApplicationCache.getFramesWithManifests", [], ["frameIds"]);
+InspectorBackend.registerCommand("ApplicationCache.enable", [], []);
+InspectorBackend.registerCommand("ApplicationCache.getManifestForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["manifestURL"]);
+InspectorBackend.registerCommand("ApplicationCache.getApplicationCacheForFrame", [{"name": "frameId", "type": "string", "optional": false}], ["applicationCache"]);
+InspectorBackend.activateDomain("ApplicationCache", "web");
+
+// CSS.
+InspectorBackend.registerCSSDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "CSS");
+InspectorBackend.registerEnum("CSS.StyleSheetOrigin", {User: "user", UserAgent: "user-agent", Inspector: "inspector", Regular: "regular"});
+InspectorBackend.registerEnum("CSS.CSSPropertyStatus", {Active: "active", Inactive: "inactive", Disabled: "disabled", Style: "style"});
+InspectorBackend.registerEnum("CSS.CSSMediaSource", {MediaRule: "mediaRule", ImportRule: "importRule", LinkedSheet: "linkedSheet", InlineSheet: "inlineSheet"});
+InspectorBackend.registerEnum("CSS.RegionRegionOverset", {Overset: "overset", Fit: "fit", Empty: "empty"});
+InspectorBackend.registerEvent("CSS.mediaQueryResultChanged", []);
+InspectorBackend.registerEvent("CSS.styleSheetChanged", ["styleSheetId"]);
+InspectorBackend.registerEvent("CSS.styleSheetAdded", ["header"]);
+InspectorBackend.registerEvent("CSS.styleSheetRemoved", ["styleSheetId"]);
+InspectorBackend.registerEvent("CSS.namedFlowCreated", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.namedFlowRemoved", ["documentNodeId", "flowName"]);
+InspectorBackend.registerEvent("CSS.regionOversetChanged", ["namedFlow"]);
+InspectorBackend.registerEvent("CSS.registeredNamedFlowContentElement", ["documentNodeId", "flowName", "contentNodeId", "nextContentNodeId"]);
+InspectorBackend.registerEvent("CSS.unregisteredNamedFlowContentElement", ["documentNodeId", "flowName", "contentNodeId"]);
+InspectorBackend.registerCommand("CSS.enable", [], []);
+InspectorBackend.registerCommand("CSS.disable", [], []);
+InspectorBackend.registerCommand("CSS.getMatchedStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "includePseudo", "type": "boolean", "optional": true}, {"name": "includeInherited", "type": "boolean", "optional": true}], ["matchedCSSRules", "pseudoElements", "inherited"]);
+InspectorBackend.registerCommand("CSS.getInlineStylesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["inlineStyle", "attributesStyle"]);
+InspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["computedStyle"]);
+InspectorBackend.registerCommand("CSS.getAllStyleSheets", [], ["headers"]);
+InspectorBackend.registerCommand("CSS.getStyleSheet", [{"name": "styleSheetId", "type": "string", "optional": false}], ["styleSheet"]);
+InspectorBackend.registerCommand("CSS.getStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}], ["text"]);
+InspectorBackend.registerCommand("CSS.setStyleSheetText", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "text", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.setStyleText", [{"name": "styleId", "type": "object", "optional": false}, {"name": "text", "type": "string", "optional": false}], ["style"]);
+InspectorBackend.registerCommand("CSS.setRuleSelector", [{"name": "ruleId", "type": "object", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.createStyleSheet", [{"name": "frameId", "type": "string", "optional": false}], ["styleSheetId"]);
+InspectorBackend.registerCommand("CSS.addRule", [{"name": "styleSheetId", "type": "string", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["rule"]);
+InspectorBackend.registerCommand("CSS.getSupportedCSSProperties", [], ["cssProperties"]);
+InspectorBackend.registerCommand("CSS.getSupportedSystemFontFamilyNames", [], ["fontFamilyNames"]);
+InspectorBackend.registerCommand("CSS.forcePseudoState", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "forcedPseudoClasses", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("CSS.getNamedFlowCollection", [{"name": "documentNodeId", "type": "number", "optional": false}], ["namedFlows"]);
+InspectorBackend.activateDomain("CSS", "web");
+
+// Console.
+InspectorBackend.registerConsoleDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Console");
+InspectorBackend.registerEnum("Console.ConsoleMessageSource", {XML: "xml", Javascript: "javascript", Network: "network", ConsoleAPI: "console-api", Storage: "storage", Appcache: "appcache", Rendering: "rendering", CSS: "css", Security: "security", ContentBlocker: "content-blocker", Other: "other"});
+InspectorBackend.registerEnum("Console.ConsoleMessageLevel", {Log: "log", Info: "info", Warning: "warning", Error: "error", Debug: "debug"});
+InspectorBackend.registerEnum("Console.ConsoleMessageType", {Log: "log", Dir: "dir", DirXML: "dirxml", Table: "table", Trace: "trace", Clear: "clear", StartGroup: "startGroup", StartGroupCollapsed: "startGroupCollapsed", EndGroup: "endGroup", Assert: "assert", Timing: "timing", Profile: "profile", ProfileEnd: "profileEnd"});
+InspectorBackend.registerEvent("Console.messageAdded", ["message"]);
+InspectorBackend.registerEvent("Console.messageRepeatCountUpdated", ["count"]);
+InspectorBackend.registerEvent("Console.messagesCleared", []);
+InspectorBackend.registerCommand("Console.enable", [], []);
+InspectorBackend.registerCommand("Console.disable", [], []);
+InspectorBackend.registerCommand("Console.clearMessages", [], []);
+InspectorBackend.registerCommand("Console.setMonitoringXHREnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Console.addInspectedNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("Console");
+
+// DOM.
+InspectorBackend.registerDOMDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOM");
+InspectorBackend.registerEnum("DOM.PseudoType", {Before: "before", After: "after"});
+InspectorBackend.registerEnum("DOM.LiveRegionRelevant", {Additions: "additions", Removals: "removals", Text: "text"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesChecked", {True: "true", False: "false", Mixed: "mixed"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesInvalid", {True: "true", False: "false", Grammar: "grammar", Spelling: "spelling"});
+InspectorBackend.registerEnum("DOM.AccessibilityPropertiesLiveRegionStatus", {Assertive: "assertive", Polite: "polite", Off: "off"});
+InspectorBackend.registerEvent("DOM.documentUpdated", []);
+InspectorBackend.registerEvent("DOM.setChildNodes", ["parentId", "nodes"]);
+InspectorBackend.registerEvent("DOM.attributeModified", ["nodeId", "name", "value"]);
+InspectorBackend.registerEvent("DOM.attributeRemoved", ["nodeId", "name"]);
+InspectorBackend.registerEvent("DOM.inlineStyleInvalidated", ["nodeIds"]);
+InspectorBackend.registerEvent("DOM.characterDataModified", ["nodeId", "characterData"]);
+InspectorBackend.registerEvent("DOM.childNodeCountUpdated", ["nodeId", "childNodeCount"]);
+InspectorBackend.registerEvent("DOM.childNodeInserted", ["parentNodeId", "previousNodeId", "node"]);
+InspectorBackend.registerEvent("DOM.childNodeRemoved", ["parentNodeId", "nodeId"]);
+InspectorBackend.registerEvent("DOM.shadowRootPushed", ["hostId", "root"]);
+InspectorBackend.registerEvent("DOM.shadowRootPopped", ["hostId", "rootId"]);
+InspectorBackend.registerEvent("DOM.pseudoElementAdded", ["parentId", "pseudoElement"]);
+InspectorBackend.registerEvent("DOM.pseudoElementRemoved", ["parentId", "pseudoElementId"]);
+InspectorBackend.registerCommand("DOM.getDocument", [], ["root"]);
+InspectorBackend.registerCommand("DOM.requestChildNodes", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "depth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.querySelector", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.querySelectorAll", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "selector", "type": "string", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.setNodeName", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setNodeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.removeNode", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributeValue", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.setAttributesAsText", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "text", "type": "string", "optional": false}, {"name": "name", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.removeAttribute", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "name", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.getEventListenersForNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["listeners"]);
+InspectorBackend.registerCommand("DOM.getAccessibilityPropertiesForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["properties"]);
+InspectorBackend.registerCommand("DOM.getOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}], ["outerHTML"]);
+InspectorBackend.registerCommand("DOM.setOuterHTML", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "outerHTML", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.performSearch", [{"name": "query", "type": "string", "optional": false}, {"name": "nodeIds", "type": "object", "optional": true}], ["searchId", "resultCount"]);
+InspectorBackend.registerCommand("DOM.getSearchResults", [{"name": "searchId", "type": "string", "optional": false}, {"name": "fromIndex", "type": "number", "optional": false}, {"name": "toIndex", "type": "number", "optional": false}], ["nodeIds"]);
+InspectorBackend.registerCommand("DOM.discardSearchResults", [{"name": "searchId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.requestNode", [{"name": "objectId", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.setInspectModeEnabled", [{"name": "enabled", "type": "boolean", "optional": false}, {"name": "highlightConfig", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightQuad", [{"name": "quad", "type": "object", "optional": false}, {"name": "color", "type": "object", "optional": true}, {"name": "outlineColor", "type": "object", "optional": true}, {"name": "usePageCoordinates", "type": "boolean", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightSelector", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "selectorString", "type": "string", "optional": false}, {"name": "frameId", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.highlightNode", [{"name": "highlightConfig", "type": "object", "optional": false}, {"name": "nodeId", "type": "number", "optional": true}, {"name": "objectId", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.hideHighlight", [], []);
+InspectorBackend.registerCommand("DOM.highlightFrame", [{"name": "frameId", "type": "string", "optional": false}, {"name": "contentColor", "type": "object", "optional": true}, {"name": "contentOutlineColor", "type": "object", "optional": true}], []);
+InspectorBackend.registerCommand("DOM.pushNodeByPathToFrontend", [{"name": "path", "type": "string", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.pushNodeByBackendIdToFrontend", [{"name": "backendNodeId", "type": "number", "optional": false}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.releaseBackendNodeIds", [{"name": "nodeGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOM.resolveNode", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}], ["object"]);
+InspectorBackend.registerCommand("DOM.getAttributes", [{"name": "nodeId", "type": "number", "optional": false}], ["attributes"]);
+InspectorBackend.registerCommand("DOM.moveTo", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "targetNodeId", "type": "number", "optional": false}, {"name": "insertBeforeNodeId", "type": "number", "optional": true}], ["nodeId"]);
+InspectorBackend.registerCommand("DOM.undo", [], []);
+InspectorBackend.registerCommand("DOM.redo", [], []);
+InspectorBackend.registerCommand("DOM.markUndoableState", [], []);
+InspectorBackend.registerCommand("DOM.focus", [{"name": "nodeId", "type": "number", "optional": false}], []);
+InspectorBackend.activateDomain("DOM", "web");
+
+// DOMDebugger.
+InspectorBackend.registerEnum("DOMDebugger.DOMBreakpointType", {SubtreeModified: "subtree-modified", AttributeModified: "attribute-modified", NodeRemoved: "node-removed"});
+InspectorBackend.registerCommand("DOMDebugger.setDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeDOMBreakpoint", [{"name": "nodeId", "type": "number", "optional": false}, {"name": "type", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeEventListenerBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeInstrumentationBreakpoint", [{"name": "eventName", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.setXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMDebugger.removeXHRBreakpoint", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMDebugger", "web");
+
+// DOMStorage.
+InspectorBackend.registerDOMStorageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "DOMStorage");
+InspectorBackend.registerEvent("DOMStorage.domStorageItemsCleared", ["storageId"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemRemoved", ["storageId", "key"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemAdded", ["storageId", "key", "newValue"]);
+InspectorBackend.registerEvent("DOMStorage.domStorageItemUpdated", ["storageId", "key", "oldValue", "newValue"]);
+InspectorBackend.registerCommand("DOMStorage.enable", [], []);
+InspectorBackend.registerCommand("DOMStorage.disable", [], []);
+InspectorBackend.registerCommand("DOMStorage.getDOMStorageItems", [{"name": "storageId", "type": "object", "optional": false}], ["entries"]);
+InspectorBackend.registerCommand("DOMStorage.setDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}, {"name": "value", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("DOMStorage.removeDOMStorageItem", [{"name": "storageId", "type": "object", "optional": false}, {"name": "key", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("DOMStorage", "web");
+
+// Database.
+InspectorBackend.registerDatabaseDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Database");
+InspectorBackend.registerEvent("Database.addDatabase", ["database"]);
+InspectorBackend.registerCommand("Database.enable", [], []);
+InspectorBackend.registerCommand("Database.disable", [], []);
+InspectorBackend.registerCommand("Database.getDatabaseTableNames", [{"name": "databaseId", "type": "string", "optional": false}], ["tableNames"]);
+InspectorBackend.registerCommand("Database.executeSQL", [{"name": "databaseId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}], ["columnNames", "values", "sqlError"]);
+InspectorBackend.activateDomain("Database", "web");
+
+// Debugger.
+InspectorBackend.registerDebuggerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Debugger");
+InspectorBackend.registerEnum("Debugger.BreakpointActionType", {Log: "log", Evaluate: "evaluate", Sound: "sound", Probe: "probe"});
+InspectorBackend.registerEnum("Debugger.ScopeType", {Global: "global", Local: "local", With: "with", Closure: "closure", Catch: "catch", FunctionName: "functionName"});
+InspectorBackend.registerEvent("Debugger.globalObjectCleared", []);
+InspectorBackend.registerEvent("Debugger.scriptParsed", ["scriptId", "url", "startLine", "startColumn", "endLine", "endColumn", "isContentScript", "sourceMapURL", "hasSourceURL"]);
+InspectorBackend.registerEvent("Debugger.scriptFailedToParse", ["url", "scriptSource", "startLine", "errorLine", "errorMessage"]);
+InspectorBackend.registerEvent("Debugger.breakpointResolved", ["breakpointId", "location"]);
+InspectorBackend.registerEnum("Debugger.PausedReason", {XHR: "XHR", DOM: "DOM", EventListener: "EventListener", Exception: "exception", Assert: "assert", CSPViolation: "CSPViolation", DebuggerStatement: "DebuggerStatement", Breakpoint: "Breakpoint", PauseOnNextStatement: "PauseOnNextStatement", Other: "other"});
+InspectorBackend.registerEvent("Debugger.paused", ["callFrames", "reason", "data"]);
+InspectorBackend.registerEvent("Debugger.resumed", []);
+InspectorBackend.registerEvent("Debugger.didSampleProbe", ["sample"]);
+InspectorBackend.registerEvent("Debugger.playBreakpointActionSound", ["breakpointActionId"]);
+InspectorBackend.registerCommand("Debugger.enable", [], []);
+InspectorBackend.registerCommand("Debugger.disable", [], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointsActive", [{"name": "active", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.setBreakpointByUrl", [{"name": "lineNumber", "type": "number", "optional": false}, {"name": "url", "type": "string", "optional": true}, {"name": "urlRegex", "type": "string", "optional": true}, {"name": "columnNumber", "type": "number", "optional": true}, {"name": "options", "type": "object", "optional": true}], ["breakpointId", "locations"]);
+InspectorBackend.registerCommand("Debugger.setBreakpoint", [{"name": "location", "type": "object", "optional": false}, {"name": "options", "type": "object", "optional": true}], ["breakpointId", "actualLocation"]);
+InspectorBackend.registerCommand("Debugger.removeBreakpoint", [{"name": "breakpointId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.continueToLocation", [{"name": "location", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.stepOver", [], []);
+InspectorBackend.registerCommand("Debugger.stepInto", [], []);
+InspectorBackend.registerCommand("Debugger.stepOut", [], []);
+InspectorBackend.registerCommand("Debugger.pause", [], []);
+InspectorBackend.registerCommand("Debugger.resume", [], []);
+InspectorBackend.registerCommand("Debugger.searchInContent", [{"name": "scriptId", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Debugger.getScriptSource", [{"name": "scriptId", "type": "string", "optional": false}], ["scriptSource"]);
+InspectorBackend.registerCommand("Debugger.getFunctionDetails", [{"name": "functionId", "type": "string", "optional": false}], ["details"]);
+InspectorBackend.registerCommand("Debugger.setPauseOnExceptions", [{"name": "state", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Debugger.evaluateOnCallFrame", [{"name": "callFrameId", "type": "string", "optional": false}, {"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
+InspectorBackend.registerCommand("Debugger.setOverlayMessage", [{"name": "message", "type": "string", "optional": true}], []);
+InspectorBackend.activateDomain("Debugger");
+
+// IndexedDB.
+InspectorBackend.registerIndexedDBDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "IndexedDB");
+InspectorBackend.registerEnum("IndexedDB.KeyType", {Number: "number", String: "string", Date: "date", Array: "array"});
+InspectorBackend.registerEnum("IndexedDB.KeyPathType", {Null: "null", String: "string", Array: "array"});
+InspectorBackend.registerCommand("IndexedDB.enable", [], []);
+InspectorBackend.registerCommand("IndexedDB.disable", [], []);
+InspectorBackend.registerCommand("IndexedDB.requestDatabaseNames", [{"name": "securityOrigin", "type": "string", "optional": false}], ["databaseNames"]);
+InspectorBackend.registerCommand("IndexedDB.requestDatabase", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}], ["databaseWithObjectStores"]);
+InspectorBackend.registerCommand("IndexedDB.requestData", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}, {"name": "indexName", "type": "string", "optional": false}, {"name": "skipCount", "type": "number", "optional": false}, {"name": "pageSize", "type": "number", "optional": false}, {"name": "keyRange", "type": "object", "optional": true}], ["objectStoreDataEntries", "hasMore"]);
+InspectorBackend.registerCommand("IndexedDB.clearObjectStore", [{"name": "securityOrigin", "type": "string", "optional": false}, {"name": "databaseName", "type": "string", "optional": false}, {"name": "objectStoreName", "type": "string", "optional": false}], []);
+InspectorBackend.activateDomain("IndexedDB", "web");
+
+// Inspector.
+InspectorBackend.registerInspectorDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Inspector");
+InspectorBackend.registerEvent("Inspector.evaluateForTestInFrontend", ["script"]);
+InspectorBackend.registerEvent("Inspector.inspect", ["object", "hints"]);
+InspectorBackend.registerEvent("Inspector.detached", ["reason"]);
+InspectorBackend.registerEvent("Inspector.activateExtraDomains", ["domains"]);
+InspectorBackend.registerEvent("Inspector.targetCrashed", []);
+InspectorBackend.registerCommand("Inspector.enable", [], []);
+InspectorBackend.registerCommand("Inspector.disable", [], []);
+InspectorBackend.registerCommand("Inspector.initialized", [], []);
+InspectorBackend.activateDomain("Inspector");
+
+// LayerTree.
+InspectorBackend.registerLayerTreeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "LayerTree");
+InspectorBackend.registerEvent("LayerTree.layerTreeDidChange", []);
+InspectorBackend.registerCommand("LayerTree.enable", [], []);
+InspectorBackend.registerCommand("LayerTree.disable", [], []);
+InspectorBackend.registerCommand("LayerTree.layersForNode", [{"name": "nodeId", "type": "number", "optional": false}], ["layers"]);
+InspectorBackend.registerCommand("LayerTree.reasonsForCompositingLayer", [{"name": "layerId", "type": "string", "optional": false}], ["compositingReasons"]);
+InspectorBackend.activateDomain("LayerTree", "web");
+
+// Network.
+InspectorBackend.registerNetworkDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Network");
+InspectorBackend.registerEnum("Network.InitiatorType", {Parser: "parser", Script: "script", Other: "other"});
+InspectorBackend.registerEvent("Network.requestWillBeSent", ["requestId", "frameId", "loaderId", "documentURL", "request", "timestamp", "initiator", "redirectResponse", "type"]);
+InspectorBackend.registerEvent("Network.requestServedFromCache", ["requestId"]);
+InspectorBackend.registerEvent("Network.responseReceived", ["requestId", "frameId", "loaderId", "timestamp", "type", "response"]);
+InspectorBackend.registerEvent("Network.dataReceived", ["requestId", "timestamp", "dataLength", "encodedDataLength"]);
+InspectorBackend.registerEvent("Network.loadingFinished", ["requestId", "timestamp", "sourceMapURL"]);
+InspectorBackend.registerEvent("Network.loadingFailed", ["requestId", "timestamp", "errorText", "canceled"]);
+InspectorBackend.registerEvent("Network.requestServedFromMemoryCache", ["requestId", "frameId", "loaderId", "documentURL", "timestamp", "initiator", "resource"]);
+InspectorBackend.registerEvent("Network.webSocketWillSendHandshakeRequest", ["requestId", "timestamp", "request"]);
+InspectorBackend.registerEvent("Network.webSocketHandshakeResponseReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketCreated", ["requestId", "url"]);
+InspectorBackend.registerEvent("Network.webSocketClosed", ["requestId", "timestamp"]);
+InspectorBackend.registerEvent("Network.webSocketFrameReceived", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerEvent("Network.webSocketFrameError", ["requestId", "timestamp", "errorMessage"]);
+InspectorBackend.registerEvent("Network.webSocketFrameSent", ["requestId", "timestamp", "response"]);
+InspectorBackend.registerCommand("Network.enable", [], []);
+InspectorBackend.registerCommand("Network.disable", [], []);
+InspectorBackend.registerCommand("Network.setExtraHTTPHeaders", [{"name": "headers", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Network.getResponseBody", [{"name": "requestId", "type": "string", "optional": false}], ["body", "base64Encoded"]);
+InspectorBackend.registerCommand("Network.canClearBrowserCache", [], ["result"]);
+InspectorBackend.registerCommand("Network.clearBrowserCache", [], []);
+InspectorBackend.registerCommand("Network.canClearBrowserCookies", [], ["result"]);
+InspectorBackend.registerCommand("Network.clearBrowserCookies", [], []);
+InspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Network.loadResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "mimeType", "status"]);
+InspectorBackend.activateDomain("Network", "web");
+
+// Page.
+InspectorBackend.registerPageDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Page");
+InspectorBackend.registerEnum("Page.ResourceType", {Document: "Document", Stylesheet: "Stylesheet", Image: "Image", Font: "Font", Script: "Script", XHR: "XHR", WebSocket: "WebSocket", Other: "Other"});
+InspectorBackend.registerEnum("Page.CoordinateSystem", {Viewport: "Viewport", Page: "Page"});
+InspectorBackend.registerEvent("Page.domContentEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.loadEventFired", ["timestamp"]);
+InspectorBackend.registerEvent("Page.frameNavigated", ["frame"]);
+InspectorBackend.registerEvent("Page.frameDetached", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStartedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameStoppedLoading", ["frameId"]);
+InspectorBackend.registerEvent("Page.frameScheduledNavigation", ["frameId", "delay"]);
+InspectorBackend.registerEvent("Page.frameClearedScheduledNavigation", ["frameId"]);
+InspectorBackend.registerEvent("Page.javascriptDialogOpening", ["message"]);
+InspectorBackend.registerEvent("Page.javascriptDialogClosed", []);
+InspectorBackend.registerEvent("Page.scriptsEnabled", ["isEnabled"]);
+InspectorBackend.registerCommand("Page.enable", [], []);
+InspectorBackend.registerCommand("Page.disable", [], []);
+InspectorBackend.registerCommand("Page.addScriptToEvaluateOnLoad", [{"name": "scriptSource", "type": "string", "optional": false}], ["identifier"]);
+InspectorBackend.registerCommand("Page.removeScriptToEvaluateOnLoad", [{"name": "identifier", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.reload", [{"name": "ignoreCache", "type": "boolean", "optional": true}, {"name": "scriptToEvaluateOnLoad", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.navigate", [{"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCookies", [], ["cookies"]);
+InspectorBackend.registerCommand("Page.deleteCookie", [{"name": "cookieName", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getResourceTree", [], ["frameTree"]);
+InspectorBackend.registerCommand("Page.getResourceContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}], ["content", "base64Encoded"]);
+InspectorBackend.registerCommand("Page.searchInResource", [{"name": "frameId", "type": "string", "optional": false}, {"name": "url", "type": "string", "optional": false}, {"name": "query", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.searchInResources", [{"name": "text", "type": "string", "optional": false}, {"name": "caseSensitive", "type": "boolean", "optional": true}, {"name": "isRegex", "type": "boolean", "optional": true}], ["result"]);
+InspectorBackend.registerCommand("Page.setDocumentContent", [{"name": "frameId", "type": "string", "optional": false}, {"name": "html", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setShowPaintRects", [{"name": "result", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getScriptExecutionStatus", [], ["result"]);
+InspectorBackend.registerCommand("Page.setScriptExecutionDisabled", [{"name": "value", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setTouchEmulationEnabled", [{"name": "enabled", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.setEmulatedMedia", [{"name": "media", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Page.getCompositingBordersVisible", [], ["result"]);
+InspectorBackend.registerCommand("Page.setCompositingBordersVisible", [{"name": "visible", "type": "boolean", "optional": false}], []);
+InspectorBackend.registerCommand("Page.snapshotNode", [{"name": "nodeId", "type": "number", "optional": false}], ["dataURL"]);
+InspectorBackend.registerCommand("Page.snapshotRect", [{"name": "x", "type": "number", "optional": false}, {"name": "y", "type": "number", "optional": false}, {"name": "width", "type": "number", "optional": false}, {"name": "height", "type": "number", "optional": false}, {"name": "coordinateSystem", "type": "string", "optional": false}], ["dataURL"]);
+InspectorBackend.registerCommand("Page.handleJavaScriptDialog", [{"name": "accept", "type": "boolean", "optional": false}, {"name": "promptText", "type": "string", "optional": true}], []);
+InspectorBackend.registerCommand("Page.archive", [], ["data"]);
+InspectorBackend.activateDomain("Page", "web");
+
+// Runtime.
+InspectorBackend.registerRuntimeDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Runtime");
+InspectorBackend.registerEnum("Runtime.RemoteObjectType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean", Symbol: "symbol"});
+InspectorBackend.registerEnum("Runtime.RemoteObjectSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date", Error: "error", Map: "map", Set: "set", Weakmap: "weakmap", Weakset: "weakset", Iterator: "iterator", Class: "class"});
+InspectorBackend.registerEnum("Runtime.ObjectPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean", Symbol: "symbol"});
+InspectorBackend.registerEnum("Runtime.ObjectPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date", Error: "error", Map: "map", Set: "set", Weakmap: "weakmap", Weakset: "weakset", Iterator: "iterator", Class: "class"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewType", {Object: "object", Function: "function", Undefined: "undefined", String: "string", Number: "number", Boolean: "boolean", Symbol: "symbol", Accessor: "accessor"});
+InspectorBackend.registerEnum("Runtime.PropertyPreviewSubtype", {Array: "array", Null: "null", Node: "node", Regexp: "regexp", Date: "date", Error: "error", Map: "map", Set: "set", Weakmap: "weakmap", Weakset: "weakset", Iterator: "iterator", Class: "class"});
+InspectorBackend.registerEnum("Runtime.SyntaxErrorType", {None: "none", Irrecoverable: "irrecoverable", UnterminatedLiteral: "unterminated-literal", Recoverable: "recoverable"});
+InspectorBackend.registerEvent("Runtime.executionContextCreated", ["context"]);
+InspectorBackend.registerCommand("Runtime.parse", [{"name": "source", "type": "string", "optional": false}], ["result", "message", "range"]);
+InspectorBackend.registerCommand("Runtime.evaluate", [{"name": "expression", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "includeCommandLineAPI", "type": "boolean", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "contextId", "type": "number", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}, {"name": "saveResult", "type": "boolean", "optional": true}], ["result", "wasThrown", "savedResultIndex"]);
+InspectorBackend.registerCommand("Runtime.callFunctionOn", [{"name": "objectId", "type": "string", "optional": false}, {"name": "functionDeclaration", "type": "string", "optional": false}, {"name": "arguments", "type": "object", "optional": true}, {"name": "doNotPauseOnExceptionsAndMuteConsole", "type": "boolean", "optional": true}, {"name": "returnByValue", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "wasThrown"]);
+InspectorBackend.registerCommand("Runtime.getProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "ownProperties", "type": "boolean", "optional": true}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["result", "internalProperties"]);
+InspectorBackend.registerCommand("Runtime.getDisplayableProperties", [{"name": "objectId", "type": "string", "optional": false}, {"name": "generatePreview", "type": "boolean", "optional": true}], ["properties", "internalProperties"]);
+InspectorBackend.registerCommand("Runtime.getCollectionEntries", [{"name": "objectId", "type": "string", "optional": false}, {"name": "objectGroup", "type": "string", "optional": true}, {"name": "startIndex", "type": "number", "optional": true}, {"name": "numberToFetch", "type": "number", "optional": true}], ["entries"]);
+InspectorBackend.registerCommand("Runtime.saveResult", [{"name": "value", "type": "object", "optional": false}, {"name": "contextId", "type": "number", "optional": true}], ["savedResultIndex"]);
+InspectorBackend.registerCommand("Runtime.releaseObject", [{"name": "objectId", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.releaseObjectGroup", [{"name": "objectGroup", "type": "string", "optional": false}], []);
+InspectorBackend.registerCommand("Runtime.run", [], []);
+InspectorBackend.registerCommand("Runtime.enable", [], []);
+InspectorBackend.registerCommand("Runtime.disable", [], []);
+InspectorBackend.registerCommand("Runtime.getRuntimeTypesForVariablesAtOffsets", [{"name": "locations", "type": "object", "optional": false}], ["types"]);
+InspectorBackend.registerCommand("Runtime.enableTypeProfiler", [], []);
+InspectorBackend.registerCommand("Runtime.disableTypeProfiler", [], []);
+InspectorBackend.registerCommand("Runtime.getBasicBlocks", [{"name": "sourceID", "type": "string", "optional": false}], ["basicBlocks"]);
+InspectorBackend.activateDomain("Runtime");
+
+// Timeline.
+InspectorBackend.registerTimelineDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Timeline");
+InspectorBackend.registerEnum("Timeline.EventType", {EventDispatch: "EventDispatch", ScheduleStyleRecalculation: "ScheduleStyleRecalculation", RecalculateStyles: "RecalculateStyles", InvalidateLayout: "InvalidateLayout", Layout: "Layout", Paint: "Paint", Composite: "Composite", RenderingFrame: "RenderingFrame", ScrollLayer: "ScrollLayer", ParseHTML: "ParseHTML", TimerInstall: "TimerInstall", TimerRemove: "TimerRemove", TimerFire: "TimerFire", EvaluateScript: "EvaluateScript", MarkLoad: "MarkLoad", MarkDOMContent: "MarkDOMContent", TimeStamp: "TimeStamp", Time: "Time", TimeEnd: "TimeEnd", XHRReadyStateChange: "XHRReadyStateChange", XHRLoad: "XHRLoad", FunctionCall: "FunctionCall", ProbeSample: "ProbeSample", ConsoleProfile: "ConsoleProfile", GCEvent: "GCEvent", RequestAnimationFrame: "RequestAnimationFrame", CancelAnimationFrame: "CancelAnimationFrame", FireAnimationFrame: "FireAnimationFrame", WebSocketCreate: "WebSocketCreate", WebSocketSendHandshakeRequest: "WebSocketSendHandshakeRequest", WebSocketReceiveHandshakeResponse: "WebSocketReceiveHandshakeResponse", WebSocketDestroy: "WebSocketDestroy"});
+InspectorBackend.registerEvent("Timeline.eventRecorded", ["record"]);
+InspectorBackend.registerEvent("Timeline.recordingStarted", ["startTime"]);
+InspectorBackend.registerEvent("Timeline.recordingStopped", ["endTime"]);
+InspectorBackend.registerCommand("Timeline.start", [{"name": "maxCallStackDepth", "type": "number", "optional": true}], []);
+InspectorBackend.registerCommand("Timeline.stop", [], []);
+InspectorBackend.activateDomain("Timeline", "web");
+
+// Worker.
+InspectorBackend.registerWorkerDispatcher = InspectorBackend.registerDomainDispatcher.bind(InspectorBackend, "Worker");
+InspectorBackend.registerEvent("Worker.workerCreated", ["workerId", "url", "inspectorConnected"]);
+InspectorBackend.registerEvent("Worker.workerTerminated", ["workerId"]);
+InspectorBackend.registerEvent("Worker.dispatchMessageFromWorker", ["workerId", "message"]);
+InspectorBackend.registerEvent("Worker.disconnectedFromWorker", []);
+InspectorBackend.registerCommand("Worker.enable", [], []);
+InspectorBackend.registerCommand("Worker.disable", [], []);
+InspectorBackend.registerCommand("Worker.sendMessageToWorker", [{"name": "workerId", "type": "number", "optional": false}, {"name": "message", "type": "object", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.canInspectWorkers", [], ["result"]);
+InspectorBackend.registerCommand("Worker.connectToWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.disconnectFromWorker", [{"name": "workerId", "type": "number", "optional": false}], []);
+InspectorBackend.registerCommand("Worker.setAutoconnectToWorkers", [{"name": "value", "type": "boolean", "optional": false}], []);
+InspectorBackend.activateDomain("Worker", "web");
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/LoadInspectorBackendCommands.js b/Source/WebInspectorUI/UserInterface/Protocol/LoadInspectorBackendCommands.js
new file mode 100644
index 000000000..6e174127f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/LoadInspectorBackendCommands.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function() {
+    var backendURLs;
+    if (InspectorFrontendHost.inspectorBackendCommandsURLs) {
+        var suggestedBackendCommandsURLs = InspectorFrontendHost.inspectorBackendCommandsURLs();
+        if (suggestedBackendCommandsURLs)
+            backendURLs = suggestedBackendCommandsURLs;
+    }
+
+    if (!backendURLs)
+        backendURLs = ["Protocol/InspectorBackendCommands.js"];
+
+    console.assert(backendURLs.length);
+    for (var backendCommandsURL of backendURLs)
+        document.write("<script src=\"" + backendCommandsURL + "\"></script>");
+})();
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/LoggingProtocolTracer.js b/Source/WebInspectorUI/UserInterface/Protocol/LoggingProtocolTracer.js
new file mode 100644
index 000000000..2d13dcc64
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/LoggingProtocolTracer.js
@@ -0,0 +1,114 @@
+/*
+ * Copyright (C) 2015, 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LoggingProtocolTracer = class LoggingProtocolTracer extends WebInspector.ProtocolTracer
+{
+    constructor()
+    {
+        super();
+
+        this._dumpMessagesToConsole = false;
+        this._dumpTimingDataToConsole = false;
+        this._logToConsole = window.InspectorTest ? InspectorFrontendHost.unbufferedLog.bind(InspectorFrontendHost) : console.log.bind(console);
+    }
+
+    // Public
+
+    set dumpMessagesToConsole(value)
+    {
+        this._dumpMessagesToConsole = !!value;
+    }
+
+    get dumpMessagesToConsole()
+    {
+        return this._dumpMessagesToConsole;
+    }
+
+    set dumpTimingDataToConsole(value)
+    {
+        this._dumpTimingDataToConsole = !!value;
+    }
+
+    get dumpTimingDataToConsole()
+    {
+        return this._dumpTimingDataToConsole;
+    }
+
+    logFrontendException(message, exception)
+    {
+        this._processEntry({type: "exception", message, exception});
+    }
+
+    logProtocolError(message, error)
+    {
+        this._processEntry({type: "error", message, error});
+    }
+
+    logFrontendRequest(message)
+    {
+        this._processEntry({type: "request", message});
+    }
+
+    logWillHandleResponse(message)
+    {
+        let entry = {type: "response", message};
+        this._processEntry(entry);
+    }
+
+    logDidHandleResponse(message, timings = null)
+    {
+        let entry = {type: "response", message};
+        if (timings)
+            entry.timings = Object.shallowCopy(timings);
+
+        this._processEntry(entry);
+    }
+
+    logWillHandleEvent(message)
+    {
+        let entry = {type: "event", message};
+        this._processEntry(entry);
+    }
+
+    logDidHandleEvent(message, timings = null)
+    {
+        let entry = {type: "event", message};
+        if (timings)
+            entry.timings = Object.shallowCopy(timings);
+
+        this._processEntry(entry);
+    }
+
+    _processEntry(entry)
+    {
+        if (this._dumpTimingDataToConsole && entry.timings) {
+            if (entry.timings.rtt && entry.timings.dispatch)
+                this._logToConsole(`time-stats: Handling: ${entry.timings.dispatch || NaN}ms; RTT: ${entry.timings.rtt}ms`);
+            else if (entry.timings.dispatch)
+                this._logToConsole(`time-stats: Handling: ${entry.timings.dispatch || NaN}ms`);
+        } else if (this._dumpMessagesToConsole && !entry.timings)
+            this._logToConsole(`${entry.type}: ${JSON.stringify(entry.message)}`);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/MemoryObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/MemoryObserver.js
new file mode 100644
index 000000000..7a54a015f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/MemoryObserver.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MemoryObserver = class MemoryObserver
+{
+    // Events defined by the "Memory" domain.
+
+    trackingStart(timestamp)
+    {
+        WebInspector.timelineManager.memoryTrackingStart(timestamp);
+    }
+
+    trackingUpdate(event)
+    {
+        WebInspector.timelineManager.memoryTrackingUpdate(event);
+    }
+
+    trackingComplete()
+    {
+        WebInspector.timelineManager.memoryTrackingComplete();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/MessageDispatcher.js b/Source/WebInspectorUI/UserInterface/Protocol/MessageDispatcher.js
new file mode 100644
index 000000000..807f7cfd3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/MessageDispatcher.js
@@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 University of Washington
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector._messagesToDispatch = [];
+
+WebInspector.dispatchNextQueuedMessageFromBackend = function()
+{
+    const startCount = WebInspector._messagesToDispatch.length;
+    const startTimestamp = timestamp();
+    const timeLimitPerRunLoop = 10; // milliseconds
+
+    let i = 0;
+    for (; i < WebInspector._messagesToDispatch.length; ++i) {
+        // Defer remaining messages if we have taken too long. In practice, single
+        // messages like Page.getResourceContent blow through the time budget.
+        if (timestamp() - startTimestamp > timeLimitPerRunLoop)
+            break;
+
+        InspectorBackend.dispatch(WebInspector._messagesToDispatch[i]);
+    }
+
+    if (i === WebInspector._messagesToDispatch.length) {
+        WebInspector._messagesToDispatch = [];
+        WebInspector._dispatchTimeout = null;
+    } else {
+        WebInspector._messagesToDispatch = WebInspector._messagesToDispatch.slice(i);
+        WebInspector._dispatchTimeout = setTimeout(WebInspector.dispatchNextQueuedMessageFromBackend, 0);
+    }
+
+    if (InspectorBackend.dumpInspectorTimeStats) {
+        let messageDuration = (timestamp() - startTimestamp).toFixed(3);
+        let dispatchedCount = startCount - WebInspector._messagesToDispatch.length;
+        let remainingCount = WebInspector._messagesToDispatch.length;
+        console.log(`time-stats: --- RunLoop duration: ${messageDuration}ms; dispatched: ${dispatchedCount}; remaining: ${remainingCount}`);
+    }
+};
+
+WebInspector.dispatchMessageFromBackend = function(message)
+{
+    // Enforce asynchronous interaction between the backend and the frontend by queueing messages.
+    // The messages are dequeued on a zero delay timeout.
+
+    this._messagesToDispatch.push(message);
+
+    // If something has gone wrong and the uncaught exception sheet is showing,
+    // then don't try to dispatch more messages. Dispatching causes spurious uncaught
+    // exceptions and cause the sheet to overflow with hundreds of logged exceptions.
+    if (window.__uncaughtExceptions && window.__uncaughtExceptions.length)
+        return;
+
+    if (this._dispatchTimeout)
+        return;
+
+    this._dispatchTimeout = setTimeout(this.dispatchNextQueuedMessageFromBackend, 0);
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/NetworkObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/NetworkObserver.js
new file mode 100644
index 000000000..8adcb6ed5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/NetworkObserver.js
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkObserver = class NetworkObserver
+{
+    // Events defined by the "Network" domain.
+
+    requestWillBeSent(requestId, frameId, loaderId, documentURL, request, timestamp, initiator, redirectResponse, type)
+    {
+        WebInspector.frameResourceManager.resourceRequestWillBeSent(requestId, frameId, loaderId, request, type, redirectResponse, timestamp, initiator);
+    }
+
+    requestServedFromCache(requestId)
+    {
+        WebInspector.frameResourceManager.markResourceRequestAsServedFromMemoryCache(requestId);
+    }
+
+    responseReceived(requestId, frameId, loaderId, timestamp, type, response)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidReceiveResponse(requestId, frameId, loaderId, type, response, timestamp);
+    }
+
+    dataReceived(requestId, timestamp, dataLength, encodedDataLength)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidReceiveData(requestId, dataLength, encodedDataLength, timestamp);
+    }
+
+    loadingFinished(requestId, timestamp, sourceMapURL)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidFinishLoading(requestId, timestamp, sourceMapURL);
+    }
+
+    loadingFailed(requestId, timestamp, errorText, canceled)
+    {
+        WebInspector.frameResourceManager.resourceRequestDidFailLoading(requestId, canceled, timestamp);
+    }
+
+    requestServedFromMemoryCache(requestId, frameId, loaderId, documentURL, timestamp, initiator, resource)
+    {
+        WebInspector.frameResourceManager.resourceRequestWasServedFromMemoryCache(requestId, frameId, loaderId, resource, timestamp, initiator);
+    }
+
+    webSocketWillSendHandshakeRequest(requestId, timestamp, request)
+    {
+        // FIXME: Not implemented.
+    }
+
+    webSocketHandshakeResponseReceived(requestId, timestamp, response)
+    {
+        // FIXME: Not implemented.
+    }
+
+    webSocketCreated(requestId, url)
+    {
+        // FIXME: Not implemented.
+    }
+
+    webSocketClosed(requestId, timestamp)
+    {
+        // FIXME: Not implemented.
+    }
+
+    webSocketFrameReceived(requestId, timestamp, response)
+    {
+        // FIXME: Not implemented.
+    }
+
+    webSocketFrameError(requestId, timestamp, errorMessage)
+    {
+        // FIXME: Not implemented.
+    }
+
+    webSocketFrameSent(requestId, timestamp, response)
+    {
+        // FIXME: Not implemented.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/PageObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/PageObserver.js
new file mode 100644
index 000000000..981972dca
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/PageObserver.js
@@ -0,0 +1,84 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.PageObserver = class PageObserver
+{
+    // Events defined by the "Page" domain.
+
+    domContentEventFired(timestamp)
+    {
+        WebInspector.timelineManager.pageDOMContentLoadedEventFired(timestamp);
+    }
+
+    loadEventFired(timestamp)
+    {
+        WebInspector.timelineManager.pageLoadEventFired(timestamp);
+    }
+
+    frameNavigated(frame, loaderId)
+    {
+        WebInspector.frameResourceManager.frameDidNavigate(frame, loaderId);
+    }
+
+    frameDetached(frameId)
+    {
+        WebInspector.frameResourceManager.frameDidDetach(frameId);
+    }
+
+    frameStartedLoading(frameId)
+    {
+        // Not handled yet.
+    }
+
+    frameStoppedLoading(frameId)
+    {
+        // Not handled yet.
+    }
+
+    frameScheduledNavigation(frameId, delay)
+    {
+        // Not handled yet.
+    }
+
+    frameClearedScheduledNavigation(frameId)
+    {
+        // Not handled yet.
+    }
+
+    javascriptDialogOpening(message)
+    {
+        // Not handled yet.
+    }
+
+    javascriptDialogClosed()
+    {
+        // Not handled yet.
+    }
+
+    scriptsEnabled(enabled)
+    {
+        // Not handled yet.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/ProtocolTracer.js b/Source/WebInspectorUI/UserInterface/Protocol/ProtocolTracer.js
new file mode 100644
index 000000000..c186bd278
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/ProtocolTracer.js
@@ -0,0 +1,74 @@
+/*
+ * Copyright (C) 2015, 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProtocolTracer = class ProtocolTracer extends WebInspector.Object
+{
+    // Public
+
+    logStarted()
+    {
+        // To be overridden by subclasses.
+    }
+
+    logFrontendException(message, exception)
+    {
+        // To be overridden by subclasses.
+    }
+
+    logProtocolError(message, error)
+    {
+        // To be overridden by subclasses.
+    }
+
+    logFrontendRequest(message)
+    {
+        // To be overridden by subclasses.
+    }
+
+    logWillHandleResponse(message)
+    {
+        // To be overridden by subclasses.
+    }
+
+    logDidHandleResponse(message, timings = null)
+    {
+        // To be overridden by subclasses.
+    }
+
+    logWillHandleEvent(message)
+    {
+        // To be overridden by subclasses.
+    }
+
+    logDidHandleEvent(message, timings = null)
+    {
+        // To be overridden by subclasses.
+    }
+
+    logFinished()
+    {
+        // To be overridden by subclasses.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js b/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js
new file mode 100644
index 000000000..905b96f3b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/RemoteObject.js
@@ -0,0 +1,663 @@
+/*
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RemoteObject = class RemoteObject
+{
+    constructor(objectId, type, subtype, value, description, size, classPrototype, className, preview)
+    {
+        console.assert(type);
+        console.assert(!preview || preview instanceof WebInspector.ObjectPreview);
+
+        this._type = type;
+        this._subtype = subtype;
+
+        if (objectId) {
+            // Object, Function, or Symbol.
+            console.assert(!subtype || typeof subtype === "string");
+            console.assert(!description || typeof description === "string");
+            console.assert(!value);
+
+            this._objectId = objectId;
+            this._description = description || "";
+            this._hasChildren = type !== "symbol";
+            this._size = size;
+            this._classPrototype = classPrototype;
+            this._preview = preview;
+
+            if (subtype === "class") {
+                this._functionDescription = this._description;
+                this._description = "class " + className;
+            }
+        } else {
+            // Primitive or null.
+            console.assert(type !== "object" || value === null);
+            console.assert(!preview);
+
+            this._description = description || (value + "");
+            this._hasChildren = false;
+            this._value = value;
+        }
+    }
+
+    // Static
+
+    static createFakeRemoteObject()
+    {
+        return new WebInspector.RemoteObject(WebInspector.RemoteObject.FakeRemoteObjectId, "object");
+    }
+
+    static fromPrimitiveValue(value)
+    {
+        return new WebInspector.RemoteObject(undefined, typeof value, undefined, value, undefined, undefined, undefined, undefined);
+    }
+
+    static fromPayload(payload)
+    {
+        console.assert(typeof payload === "object", "Remote object payload should only be an object");
+
+        if (payload.subtype === "array") {
+            // COMPATIBILITY (iOS 8): Runtime.RemoteObject did not have size property,
+            // instead it was tacked onto the end of the description, like "Array[#]".
+            var match = payload.description.match(/\[(\d+)\]$/);
+            if (match) {
+                payload.size = parseInt(match[1]);
+                payload.description = payload.description.replace(/\[\d+\]$/, "");
+            }
+        }
+
+        if (payload.classPrototype)
+            payload.classPrototype = WebInspector.RemoteObject.fromPayload(payload.classPrototype);
+
+        if (payload.preview) {
+            // COMPATIBILITY (iOS 8): iOS 7 and 8 did not have type/subtype/description on
+            // Runtime.ObjectPreview. Copy them over from the RemoteObject.
+            if (!payload.preview.type) {
+                payload.preview.type = payload.type;
+                payload.preview.subtype = payload.subtype;
+                payload.preview.description = payload.description;
+                payload.preview.size = payload.size;
+            }
+
+            payload.preview = WebInspector.ObjectPreview.fromPayload(payload.preview);
+        }
+
+        return new WebInspector.RemoteObject(payload.objectId, payload.type, payload.subtype, payload.value, payload.description, payload.size, payload.classPrototype, payload.className, payload.preview);
+    }
+
+    static createCallArgument(valueOrObject)
+    {
+        if (valueOrObject instanceof WebInspector.RemoteObject) {
+            if (valueOrObject.objectId)
+                return {objectId: valueOrObject.objectId};
+            return {value: valueOrObject.value};
+        }
+
+        return {value: valueOrObject};
+    }
+
+    static resolveNode(node, objectGroup, callback)
+    {
+        DOMAgent.resolveNode(node.id, objectGroup, function(error, object) {
+            if (!callback)
+                return;
+
+            if (error || !object)
+                callback(null);
+            else
+                callback(WebInspector.RemoteObject.fromPayload(object));
+        });
+    }
+
+    static type(remoteObject)
+    {
+        if (remoteObject === null)
+            return "null";
+
+        var type = typeof remoteObject;
+        if (type !== "object" && type !== "function")
+            return type;
+
+        return remoteObject.type;
+    }
+
+    // Public
+
+    get objectId()
+    {
+        return this._objectId;
+    }
+
+    get type()
+    {
+        return this._type;
+    }
+
+    get subtype()
+    {
+        return this._subtype;
+    }
+
+    get description()
+    {
+        return this._description;
+    }
+
+    get functionDescription()
+    {
+        console.assert(this.type === "function");
+
+        return this._functionDescription || this._description;
+    }
+
+    get hasChildren()
+    {
+        return this._hasChildren;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    get size()
+    {
+        return this._size || 0;
+    }
+
+    get classPrototype()
+    {
+        return this._classPrototype;
+    }
+
+    get preview()
+    {
+        return this._preview;
+    }
+
+    hasSize()
+    {
+        return this.isArray() || this.isCollectionType();
+    }
+
+    hasValue()
+    {
+        return "_value" in this;
+    }
+
+    getOwnPropertyDescriptors(callback)
+    {
+        this._getPropertyDescriptors(true, callback);
+    }
+
+    getAllPropertyDescriptors(callback)
+    {
+        this._getPropertyDescriptors(false, callback);
+    }
+
+    getDisplayablePropertyDescriptors(callback)
+    {
+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
+            callback([]);
+            return;
+        }
+
+        // COMPATIBILITY (iOS 8): RuntimeAgent.getDisplayableProperties did not exist.
+        // Here we do our best to reimplement it by getting all properties and reducing them down.
+        if (!RuntimeAgent.getDisplayableProperties) {
+            RuntimeAgent.getProperties(this._objectId, function(error, allProperties) {
+                var ownOrGetterPropertiesList = [];
+                if (allProperties) {
+                    for (var property of allProperties) {
+                        if (property.isOwn || property.name === "__proto__") {
+                            // Own property or getter property in prototype chain.
+                            ownOrGetterPropertiesList.push(property);
+                        } else if (property.value && property.name !== property.name.toUpperCase()) {
+                            var type = property.value.type;
+                            if (type && type !== "function" && property.name !== "constructor") {
+                                // Possible native binding getter property converted to a value. Also, no CONSTANT name style and not "constructor".
+                                // There is no way of knowing if this is native or not, so just go with it.
+                                ownOrGetterPropertiesList.push(property);
+                            }
+                        }
+                    }
+                }
+
+                this._getPropertyDescriptorsResolver(callback, error, ownOrGetterPropertiesList);
+            }.bind(this));
+            return;
+        }
+
+        RuntimeAgent.getDisplayableProperties(this._objectId, true, this._getPropertyDescriptorsResolver.bind(this, callback));
+    }
+
+    // FIXME: Phase out these deprecated functions. They return DeprecatedRemoteObjectProperty instead of PropertyDescriptors.
+    deprecatedGetOwnProperties(callback)
+    {
+        this._deprecatedGetProperties(true, callback);
+    }
+
+    deprecatedGetAllProperties(callback)
+    {
+        this._deprecatedGetProperties(false, callback);
+    }
+
+    deprecatedGetDisplayableProperties(callback)
+    {
+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
+            callback([]);
+            return;
+        }
+
+        // COMPATIBILITY (iOS 8): RuntimeAgent.getProperties did not support ownerAndGetterProperties.
+        // Here we do our best to reimplement it by getting all properties and reducing them down.
+        if (!RuntimeAgent.getDisplayableProperties) {
+            RuntimeAgent.getProperties(this._objectId, function(error, allProperties) {
+                var ownOrGetterPropertiesList = [];
+                if (allProperties) {
+                    for (var property of allProperties) {
+                        if (property.isOwn || property.get || property.name === "__proto__") {
+                            // Own property or getter property in prototype chain.
+                            ownOrGetterPropertiesList.push(property);
+                        } else if (property.value && property.name !== property.name.toUpperCase()) {
+                            var type = property.value.type;
+                            if (type && type !== "function" && property.name !== "constructor") {
+                                // Possible native binding getter property converted to a value. Also, no CONSTANT name style and not "constructor".
+                                ownOrGetterPropertiesList.push(property);
+                            }
+                        }
+                    }
+                }
+
+                this._deprecatedGetPropertiesResolver(callback, error, ownOrGetterPropertiesList);
+            }.bind(this));
+            return;
+        }
+
+        RuntimeAgent.getDisplayableProperties(this._objectId, this._deprecatedGetPropertiesResolver.bind(this, callback));
+    }
+
+    setPropertyValue(name, value, callback)
+    {
+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
+            callback("Can't set a property of non-object.");
+            return;
+        }
+
+        // FIXME: It doesn't look like setPropertyValue is used yet. This will need to be tested when it is again (editable ObjectTrees).
+        RuntimeAgent.evaluate.invoke({expression:appendWebInspectorSourceURL(value), doNotPauseOnExceptionsAndMuteConsole:true}, evaluatedCallback.bind(this));
+
+        function evaluatedCallback(error, result, wasThrown)
+        {
+            if (error || wasThrown) {
+                callback(error || result.description);
+                return;
+            }
+
+            function setPropertyValue(propertyName, propertyValue)
+            {
+                this[propertyName] = propertyValue;
+            }
+
+            delete result.description; // Optimize on traffic.
+
+            RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(setPropertyValue.toString()), [{value:name}, result], true, undefined, propertySetCallback.bind(this));
+
+            if (result._objectId)
+                RuntimeAgent.releaseObject(result._objectId);
+        }
+
+        function propertySetCallback(error, result, wasThrown)
+        {
+            if (error || wasThrown) {
+                callback(error || result.description);
+                return;
+            }
+
+            callback();
+        }
+    }
+
+    isUndefined()
+    {
+        return this._type === "undefined";
+    }
+
+    isNode()
+    {
+        return this._subtype === "node";
+    }
+
+    isArray()
+    {
+        return this._subtype === "array";
+    }
+
+    isClass()
+    {
+        return this._subtype === "class";
+    }
+
+    isCollectionType()
+    {
+        return this._subtype === "map" || this._subtype === "set" || this._subtype === "weakmap" || this._subtype === "weakset";
+    }
+
+    isWeakCollection()
+    {
+        return this._subtype === "weakmap" || this._subtype === "weakset";
+    }
+
+    getCollectionEntries(start, numberToFetch, callback)
+    {
+        start = typeof start === "number" ? start : 0;
+        numberToFetch = typeof numberToFetch === "number" ? numberToFetch : 100;
+
+        console.assert(start >= 0);
+        console.assert(numberToFetch >= 0);
+        console.assert(this.isCollectionType());
+
+        // WeakMaps and WeakSets are not ordered. We should never send a non-zero start.
+        console.assert((this._subtype === "weakmap" && start === 0) || this._subtype !== "weakmap");
+        console.assert((this._subtype === "weakset" && start === 0) || this._subtype !== "weakset");
+
+        var objectGroup = this.isWeakCollection() ? this._weakCollectionObjectGroup() : "";
+
+        RuntimeAgent.getCollectionEntries(this._objectId, objectGroup, start, numberToFetch, function(error, entries) {
+            entries = entries.map(WebInspector.CollectionEntry.fromPayload);
+            callback(entries);
+        });
+    }
+
+    releaseWeakCollectionEntries()
+    {
+        console.assert(this.isWeakCollection());
+
+        RuntimeAgent.releaseObjectGroup(this._weakCollectionObjectGroup());
+    }
+
+    pushNodeToFrontend(callback)
+    {
+        if (this._objectId)
+            WebInspector.domTreeManager.pushNodeToFrontend(this._objectId, callback);
+        else
+            callback(0);
+    }
+
+    callFunction(functionDeclaration, args, generatePreview, callback)
+    {
+        function mycallback(error, result, wasThrown)
+        {
+            result = result ? WebInspector.RemoteObject.fromPayload(result) : null;
+
+            if (callback && typeof callback === "function")
+                callback(error, result, wasThrown);
+        }
+
+        if (args)
+            args = args.map(WebInspector.RemoteObject.createCallArgument);
+
+        RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(functionDeclaration.toString()), args, true, undefined, !!generatePreview, mycallback);
+    }
+
+    callFunctionJSON(functionDeclaration, args, callback)
+    {
+        function mycallback(error, result, wasThrown)
+        {
+            callback((error || wasThrown) ? null : result.value);
+        }
+
+        RuntimeAgent.callFunctionOn(this._objectId, appendWebInspectorSourceURL(functionDeclaration.toString()), args, true, true, mycallback);
+    }
+    
+    invokeGetter(getterRemoteObject, callback)
+    {
+        console.assert(getterRemoteObject instanceof WebInspector.RemoteObject);
+
+        function backendInvokeGetter(getter)
+        {
+            return getter ? getter.call(this) : undefined;
+        }
+
+        this.callFunction(backendInvokeGetter, [getterRemoteObject], true, callback);
+    }
+
+    getOwnPropertyDescriptor(propertyName, callback)
+    {
+        function backendGetOwnPropertyDescriptor(propertyName)
+        {
+            return this[propertyName];
+        }
+
+        function wrappedCallback(error, result, wasThrown)
+        {
+            if (error || wasThrown || !(result instanceof WebInspector.RemoteObject)) {
+                callback(null);
+                return;
+            }
+
+            var fakeDescriptor = {name: propertyName, value: result, writable: true, configurable: true, enumerable: false};
+            var fakePropertyDescriptor = new WebInspector.PropertyDescriptor(fakeDescriptor, null, true, false, false, false);
+            callback(fakePropertyDescriptor);
+        }
+
+        // FIXME: Implement a real RuntimeAgent.getOwnPropertyDescriptor?
+        this.callFunction(backendGetOwnPropertyDescriptor, [propertyName], false, wrappedCallback);
+    }
+
+    release()
+    {
+        if (this._objectId && !this._isFakeObject())
+            RuntimeAgent.releaseObject(this._objectId);
+    }
+
+    arrayLength()
+    {
+        if (this._subtype !== "array")
+            return 0;
+
+        var matches = this._description.match(/\[([0-9]+)\]/);
+        if (!matches)
+            return 0;
+
+        return parseInt(matches[1], 10);
+    }
+
+    asCallArgument()
+    {
+        return WebInspector.RemoteObject.createCallArgument(this);
+    }
+
+    findFunctionSourceCodeLocation()
+    {
+        var result = new WebInspector.WrappedPromise;
+
+        if (!this._isFunction() || !this._objectId) {
+            result.resolve(WebInspector.RemoteObject.SourceCodeLocationPromise.MissingObjectId);
+            return result.promise;
+        }
+
+        DebuggerAgent.getFunctionDetails(this._objectId, function(error, response) {
+            if (error) {
+                result.reject(error);
+                return;
+            }
+
+            var location = response.location;
+            var sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId);
+
+            if (!sourceCode || (!WebInspector.isDebugUIEnabled() && isWebInspectorDebugScript(sourceCode.url))) {
+                result.resolve(WebInspector.RemoteObject.SourceCodeLocationPromise.NoSourceFound);
+                return;
+            }
+
+            var sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
+            result.resolve(sourceCodeLocation);
+        });
+
+        return result.promise;
+    }
+
+    // Private
+
+    _isFakeObject()
+    {
+        return this._objectId === WebInspector.RemoteObject.FakeRemoteObjectId;
+    }
+
+    _isSymbol()
+    {
+        return this._type === "symbol";
+    }
+
+    _isFunction()
+    {
+        return this._type === "function";
+    }
+
+    _weakCollectionObjectGroup()
+    {
+        return JSON.stringify(this._objectId) + "-" + this._subtype;
+    }
+
+    _getPropertyDescriptors(ownProperties, callback)
+    {
+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
+            callback([]);
+            return;
+        }
+
+        RuntimeAgent.getProperties(this._objectId, ownProperties, true, this._getPropertyDescriptorsResolver.bind(this, callback));
+    }
+
+    getOwnPropertyDescriptorsAsObject(callback)
+    {
+        this.getOwnPropertyDescriptors(function(properties) {
+            var propertiesResult = {};
+            var internalPropertiesResult = {};
+            for (var propertyDescriptor of properties) {
+                var object = propertyDescriptor.isInternalProperty ? internalPropertiesResult : propertiesResult;
+                object[propertyDescriptor.name] = propertyDescriptor;
+            }
+            callback(propertiesResult, internalPropertiesResult);
+        });
+    }
+
+    _getPropertyDescriptorsResolver(callback, error, properties, internalProperties)
+    {
+        if (error) {
+            callback(null);
+            return;
+        }
+
+        var descriptors = properties.map(function(payload) {
+            return WebInspector.PropertyDescriptor.fromPayload(payload);
+        });
+
+        if (internalProperties) {
+            descriptors = descriptors.concat(internalProperties.map(function(payload) {
+                return WebInspector.PropertyDescriptor.fromPayload(payload, true);
+            }));
+        }
+
+        callback(descriptors);
+    }
+
+    // FIXME: Phase out these deprecated functions. They return DeprecatedRemoteObjectProperty instead of PropertyDescriptors.
+    _deprecatedGetProperties(ownProperties, callback)
+    {
+        if (!this._objectId || this._isSymbol() || this._isFakeObject()) {
+            callback([]);
+            return;
+        }
+
+        RuntimeAgent.getProperties(this._objectId, ownProperties, this._deprecatedGetPropertiesResolver.bind(this, callback));
+    }
+
+    _deprecatedGetPropertiesResolver(callback, error, properties, internalProperties)
+    {
+        if (error) {
+            callback(null);
+            return;
+        }
+
+        if (internalProperties) {
+            properties = properties.concat(internalProperties.map(function(descriptor) {
+                descriptor.writable = false;
+                descriptor.configurable = false;
+                descriptor.enumerable = false;
+                descriptor.isOwn = true;
+                return descriptor;
+            }));
+        }
+
+        var result = [];
+        for (var i = 0; properties && i < properties.length; ++i) {
+            var property = properties[i];
+            if (property.get || property.set) {
+                if (property.get)
+                    result.push(new WebInspector.DeprecatedRemoteObjectProperty("get " + property.name, WebInspector.RemoteObject.fromPayload(property.get), property));
+                if (property.set)
+                    result.push(new WebInspector.DeprecatedRemoteObjectProperty("set " + property.name, WebInspector.RemoteObject.fromPayload(property.set), property));
+            } else
+                result.push(new WebInspector.DeprecatedRemoteObjectProperty(property.name, WebInspector.RemoteObject.fromPayload(property.value), property));
+        }
+
+        callback(result);
+    }
+};
+
+WebInspector.RemoteObject.FakeRemoteObjectId = "fake-remote-object";
+
+WebInspector.RemoteObject.SourceCodeLocationPromise = {
+    NoSourceFound: "remote-object-source-code-location-promise-no-source-found",
+    MissingObjectId: "remote-object-source-code-location-promise-missing-object-id"
+}
+
+// FIXME: Phase out this deprecated class.
+WebInspector.DeprecatedRemoteObjectProperty = class DeprecatedRemoteObjectProperty
+{
+    constructor(name, value, descriptor)
+    {
+        this.name = name;
+        this.value = value;
+        this.enumerable = descriptor ? !!descriptor.enumerable : true;
+        this.writable = descriptor ? !!descriptor.writable : true;
+        if (descriptor && descriptor.wasThrown)
+            this.wasThrown = true;
+    }
+
+    // Static
+
+    fromPrimitiveValue(name, value)
+    {
+        return new WebInspector.DeprecatedRemoteObjectProperty(name, WebInspector.RemoteObject.fromPrimitiveValue(value));
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/ReplayObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/ReplayObserver.js
new file mode 100644
index 000000000..e0a86719a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/ReplayObserver.js
@@ -0,0 +1,120 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// FIXME: This ReplayPosition class shouldn't be here, no matter how simple it is.
+WebInspector.ReplayPosition = class ReplayPosition
+{
+    constructor(segmentOffset, inputOffset)
+    {
+        this.segmentOffset = segmentOffset;
+        this.inputOffset = inputOffset;
+    }
+};
+
+WebInspector.ReplayObserver = class ReplayObserver
+{
+    // Events defined by the "Replay" domain.
+
+    captureStarted()
+    {
+        WebInspector.replayManager.captureStarted();
+    }
+
+    captureStopped()
+    {
+        WebInspector.replayManager.captureStopped();
+    }
+
+    playbackStarted()
+    {
+        WebInspector.replayManager.playbackStarted();
+    }
+
+    playbackHitPosition(replayPosition, timestamp)
+    {
+        WebInspector.replayManager.playbackHitPosition(new WebInspector.ReplayPosition(replayPosition.segmentOffset, replayPosition.inputOffset), timestamp);
+    }
+
+    playbackPaused(replayPosition)
+    {
+        WebInspector.replayManager.playbackPaused(new WebInspector.ReplayPosition(replayPosition.segmentOffset, replayPosition.inputOffset));
+    }
+
+    playbackFinished()
+    {
+        WebInspector.replayManager.playbackFinished();
+    }
+
+    inputSuppressionChanged(willSuppress)
+    {
+        // Not handled yet.
+    }
+
+    sessionCreated(sessionId)
+    {
+        WebInspector.replayManager.sessionCreated(sessionId);
+    }
+
+    sessionModified(sessionId)
+    {
+        WebInspector.replayManager.sessionModified(sessionId);
+    }
+
+    sessionRemoved(sessionId)
+    {
+        WebInspector.replayManager.sessionRemoved(sessionId);
+    }
+
+    sessionLoaded(sessionId)
+    {
+        WebInspector.replayManager.sessionLoaded(sessionId);
+    }
+
+    segmentCreated(segmentId)
+    {
+        WebInspector.replayManager.segmentCreated(segmentId);
+    }
+
+    segmentRemoved(segmentId)
+    {
+        WebInspector.replayManager.segmentRemoved(segmentId);
+    }
+
+    segmentCompleted(segmentId)
+    {
+        WebInspector.replayManager.segmentCompleted(segmentId);
+    }
+
+    segmentLoaded(segmentId)
+    {
+        WebInspector.replayManager.segmentLoaded(segmentId);
+    }
+
+    segmentUnloaded()
+    {
+        WebInspector.replayManager.segmentUnloaded();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/RuntimeObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/RuntimeObserver.js
new file mode 100644
index 000000000..e09baa480
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/RuntimeObserver.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RuntimeObserver = class RuntimeObserver
+{
+    // Events defined by the "Runtime" domain.
+
+    executionContextCreated(contextPayload)
+    {
+        WebInspector.frameResourceManager.executionContextCreated(contextPayload);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/ScriptProfilerObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/ScriptProfilerObserver.js
new file mode 100644
index 000000000..e12976ab8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/ScriptProfilerObserver.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptProfilerObserver = class ScriptProfilerObserver
+{
+    // Events defined by the "ScriptProfiler" domain.
+
+    trackingStart(timestamp)
+    {
+        WebInspector.timelineManager.scriptProfilerTrackingStarted(timestamp);
+    }
+
+    trackingUpdate(event)
+    {
+        WebInspector.timelineManager.scriptProfilerTrackingUpdated(event);
+    }
+
+    trackingComplete(samples)
+    {
+        WebInspector.timelineManager.scriptProfilerTrackingCompleted(samples);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Protocol/TimelineObserver.js b/Source/WebInspectorUI/UserInterface/Protocol/TimelineObserver.js
new file mode 100644
index 000000000..2e8f7f03f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Protocol/TimelineObserver.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineObserver = class TimelineObserver
+{
+    // Events defined by the "Timeline" domain.
+
+    eventRecorded(record)
+    {
+        WebInspector.timelineManager.eventRecorded(record);
+    }
+
+    recordingStarted(startTime)
+    {
+        WebInspector.timelineManager.capturingStarted(startTime);
+    }
+
+    recordingStopped(endTime)
+    {
+        WebInspector.timelineManager.capturingStopped(endTime);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/QuickConsole.css b/Source/WebInspectorUI/UserInterface/QuickConsole.css
deleted file mode 100644
index 77f1a51c2..000000000
--- a/Source/WebInspectorUI/UserInterface/QuickConsole.css
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.quick-console {
-    position: relative;
-
-    display: -webkit-flex;
-    -webkit-align-items: flex-end;
-
-    background-color: white;
-    border-top: 1px solid rgb(190, 190, 190);
-
-    outline: none;
-    overflow: hidden;
-
-    font-family: Menlo, monospace;
-    font-size: 11px;
-}
-
-.quick-console.showing-log {
-    border-top-color: rgb(240, 240, 240);
-}
-
-.quick-console > .console-prompt {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-
-    -webkit-align-items: flex-start;
-
-    max-height: 150px;
-
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.quick-console > .console-prompt::before {
-    position: relative;
-    z-index: 1;
-
-    top: 5px;
-    left: 4px;
-
-    margin-right: 1px;
-
-    content: url(Images/UserInputPrompt.pdf);
-}
-
-.quick-console > .console-prompt > .CodeMirror {
-    margin: 4px 0 3px;
-}
-
-.quick-console > .navigation-bar {
-    background: transparent;
-    border: none;
-
-    height: 21px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/QuickConsole.js b/Source/WebInspectorUI/UserInterface/QuickConsole.js
deleted file mode 100644
index aba23af74..000000000
--- a/Source/WebInspectorUI/UserInterface/QuickConsole.js
+++ /dev/null
@@ -1,352 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.QuickConsole = function(element)
-{
-    WebInspector.Object.call(this);
-
-    this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
-
-    var mainFrameExecutionContext = new WebInspector.ExecutionContext(WebInspector.QuickConsole.MainFrameContextExecutionIdentifier, WebInspector.UIString("Main Frame"), true, null);
-    this._mainFrameExecutionContextPathComponent = this._createExecutionContextPathComponent(mainFrameExecutionContext.name, mainFrameExecutionContext.identifier);
-    this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
-
-    this._otherExecutionContextPathComponents = [];
-    this._frameIdentifierToExecutionContextPathComponentMap = {};
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.QuickConsole.StyleClassName);
-
-    this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
-    this.prompt.element.classList.add(WebInspector.QuickConsole.TextPromptStyleClassName);
-    this._element.appendChild(this.prompt.element);
-
-    this.prompt.shown();
-
-    this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
-    this._element.appendChild(this._navigationBar.element);
-
-    this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
-    this._executionContextSelectorItem.showSelectorArrows = true;
-    this._navigationBar.addNavigationItem(this._executionContextSelectorItem);
-
-    this._executionContextSelectorDivider = new WebInspector.DividerNavigationItem;
-    this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
-
-    this._rebuildExecutionContextPathComponents();
-
-    // COMPATIBILITY (iOS 6): Execution contexts did not exist, evaluation worked with frame ids.
-    if (WebInspector.ExecutionContext.supported()) {
-        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
-        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
-    } else {
-        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameAdded, this);
-        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasRemoved, this._frameRemoved, this);
-        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._frameMainResourceChanged, this);
-    }
-
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
-};
-
-WebInspector.QuickConsole.StyleClassName = "quick-console";
-WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
-WebInspector.QuickConsole.NavigationBarContainerStyleClassName = "navigation-bar-container";
-WebInspector.QuickConsole.NavigationBarSpacerStyleClassName = "navigation-bar-spacer";
-WebInspector.QuickConsole.TextPromptStyleClassName = "text-prompt";
-
-WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
-WebInspector.QuickConsole.ToolbarPromptPadding = 4;
-WebInspector.QuickConsole.ToolbarTopBorder = 1;
-
-WebInspector.QuickConsole.MainFrameContextExecutionIdentifier = undefined;
-
-WebInspector.QuickConsole.Event = {
-    DidResize: "quick-console-did-resize"
-};
-
-WebInspector.QuickConsole.prototype = {
-    constructor: WebInspector.QuickConsole,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get navigationBar()
-    {
-        return this._navigationBar;
-    },
-
-    get executionContextIdentifier()
-    {
-        return this._selectedExecutionContextPathComponent._executionContextIdentifier;
-    },
-
-    updateLayout: function()
-    {
-        // A hard maximum size of 33% of the window.
-        const maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
-        this.prompt.element.style.maxHeight = maximumAllowedHeight + "px";
-    },
-
-    consoleLogVisibilityChanged: function(visible)
-    {
-        if (visible)
-            this.element.classList.add(WebInspector.QuickConsole.ShowingLogClassName);
-        else
-            this.element.classList.remove(WebInspector.QuickConsole.ShowingLogClassName);
-
-        this.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
-    },
-
-    // Private
-
-    _executionContextPathComponentsToDisplay: function()
-    {
-        // If we are in the debugger the console will use the active call frame, don't show the selector.
-        if (WebInspector.debuggerManager.activeCallFrame)
-            return [];
-
-        // If there is only the Main Frame, don't show the selector.
-        if (!this._otherExecutionContextPathComponents.length)
-            return [];
-
-        return [this._selectedExecutionContextPathComponent];
-    },
-
-    _rebuildExecutionContextPathComponents: function()
-    {
-        var components = this._executionContextPathComponentsToDisplay();
-        var isEmpty = !components.length;
-
-        this._executionContextSelectorItem.components = components;
-
-        this._executionContextSelectorItem.hidden = isEmpty;
-        this._executionContextSelectorDivider.hidden = isEmpty;
-    },
-
-    _framePageExecutionContextsChanged: function(event)
-    {
-        var frame = event.target;
-
-        var shouldAutomaticallySelect = this._restoreSelectedExecutionContextForFrame === frame;
-
-        var newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, shouldAutomaticallySelect);
-
-        if (shouldAutomaticallySelect) {
-            delete this._restoreSelectedExecutionContextForFrame;
-            this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
-            this._rebuildExecutionContextPathComponents();
-        }
-    },
-
-    _frameExecutionContextsCleared: function(event)
-    {
-        var frame = event.target;
-
-        // If this frame is navigating and it is selected in the UI we want to reselect its new item after navigation.
-        if (event.data.committingProvisionalLoad && !this._restoreSelectedExecutionContextForFrame) {
-            var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
-            if (this._selectedExecutionContextPathComponent === executionContextPathComponent) {
-                this._restoreSelectedExecutionContextForFrame = frame;
-                // As a fail safe, if the frame never gets an execution context, clear the restore value.
-                setTimeout(function() { delete this._restoreSelectedExecutionContextForFrame; }.bind(this), 10);
-            }
-        }
-
-        this._removeExecutionContextPathComponentForFrame(frame);
-    },
-
-    _frameAdded: function(event)
-    {
-        var frame = event.data.frame;
-        this._insertExecutionContextPathComponentForFrame(frame);
-    },
-
-    _frameRemoved: function(event)
-    {
-        var frame = event.data.frame;
-        this._removeExecutionContextPathComponentForFrame(frame);
-    },
-
-    _frameMainResourceChanged: function(event)
-    {
-        var frame = event.target;
-        this._updateExecutionContextPathComponentForFrame(frame);
-    },
-
-    _createExecutionContextPathComponent: function(name, identifier)
-    {
-        var pathComponent = new WebInspector.HierarchicalPathComponent(name, "execution-context", identifier, true, true);
-        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
-        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
-        pathComponent.truncatedDisplayNameLength = 50;
-        pathComponent._executionContextIdentifier = identifier;
-        return pathComponent;
-    },
-
-    _createExecutionContextPathComponentFromFrame: function(frame)
-    {
-        var name = frame.name ? frame.name + " \u2014 " + frame.mainResource.displayName : frame.mainResource.displayName;
-        var identifier = WebInspector.ExecutionContext.supported() ? frame.pageExecutionContext.id : frame.id;
-
-        var pathComponent = this._createExecutionContextPathComponent(name, identifier);
-        pathComponent._frame = frame;
-
-        return pathComponent;
-    },
-
-    _compareExecutionContextPathComponents: function(a, b)
-    {
-        // "Main Frame" always on top.
-        if (!a._frame)
-            return -1;
-        if (!b._frame)
-            return 1;
-
-        // Frames with a name above frames without a name.
-        if (a._frame.name && !b._frame.name)
-            return -1;
-        if (!a._frame.name && b._frame.name)
-            return 1;
-
-        return a.displayName.localeCompare(b.displayName);
-    },
-
-    _insertExecutionContextPathComponentForFrame: function(frame, skipRebuild)
-    {
-        if (frame.isMainFrame())
-            return;
-
-        console.assert(!this._frameIdentifierToExecutionContextPathComponentMap[frame.id]);
-        if (this._frameIdentifierToExecutionContextPathComponentMap[frame.id])
-            return;
-
-        var executionContextPathComponent = this._createExecutionContextPathComponentFromFrame(frame);
-
-        var index = insertionIndexForObjectInListSortedByFunction(executionContextPathComponent, this._otherExecutionContextPathComponents, this._compareExecutionContextPathComponents);
-
-        var prev = index > 0 ? this._otherExecutionContextPathComponents[index - 1] : this._mainFrameExecutionContextPathComponent;
-        var next = this._otherExecutionContextPathComponents[index] || null;
-        if (prev) {
-            prev.nextSibling = executionContextPathComponent;
-            executionContextPathComponent.previousSibling = prev;
-        }
-        if (next) {
-            next.previousSibling = executionContextPathComponent;
-            executionContextPathComponent.nextSibling = next;
-        }
-
-        this._otherExecutionContextPathComponents.splice(index, 0, executionContextPathComponent);
-        this._frameIdentifierToExecutionContextPathComponentMap[frame.id] = executionContextPathComponent;
-
-        if (!skipRebuild)
-            this._rebuildExecutionContextPathComponents();
-
-        return executionContextPathComponent;
-    },
-
-    _removeExecutionContextPathComponentForFrame: function(frame, skipRebuild)
-    {
-        if (frame.isMainFrame())
-            return;
-
-        var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
-        console.assert(executionContextPathComponent);
-        if (!executionContextPathComponent)
-            return;
-
-        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
-        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
-
-        var prev = executionContextPathComponent.previousSibling;
-        var next = executionContextPathComponent.nextSibling;
-        if (prev)
-            prev.nextSibling = next;
-        if (next)
-            next.previousSibling = prev;
-
-        if (this._selectedExecutionContextPathComponent === executionContextPathComponent)
-            this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
-
-        this._otherExecutionContextPathComponents.remove(executionContextPathComponent, true);
-        delete this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
-
-        if (!skipRebuild)
-            this._rebuildExecutionContextPathComponents();
-    },
-
-    _updateExecutionContextPathComponentForFrame: function(frame)
-    {
-        if (frame.isMainFrame())
-            return;
-
-        var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
-        if (!executionContextPathComponent)
-            return;
-
-        var wasSelected = this._selectedExecutionContextPathComponent === executionContextPathComponent;
-
-        this._removeExecutionContextPathComponentForFrame(frame, true);
-        var newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, true);
-
-        if (wasSelected)
-            this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
-
-        this._rebuildExecutionContextPathComponents();
-    },
-
-    _pathComponentSelected: function(event)
-    {
-        if (event.data.pathComponent === this._selectedExecutionContextPathComponent)
-            return;
-
-        this._selectedExecutionContextPathComponent = event.data.pathComponent;
-
-        this._rebuildExecutionContextPathComponents();
-    },
-
-    _pathComponentClicked: function(event)
-    {
-        this.prompt.focus();
-    },
-
-    _debuggerActiveCallFrameDidChange: function(event)
-    {
-        this._rebuildExecutionContextPathComponents();
-    },
-
-    _toggleOrFocus: function(event)
-    {
-        if (this.prompt.focused)
-            WebInspector.toggleSplitConsole();
-        else if (!WebInspector.isEditingAnyField() && !WebInspector.isEventTargetAnEditableField(event))
-            this.prompt.focus();
-    }
-};
-
-WebInspector.QuickConsole.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/QuickConsoleNavigationBar.js b/Source/WebInspectorUI/UserInterface/QuickConsoleNavigationBar.js
deleted file mode 100644
index 29108e7a9..000000000
--- a/Source/WebInspectorUI/UserInterface/QuickConsoleNavigationBar.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.QuickConsoleNavigationBar = function(element, navigationItems)
-{
-    WebInspector.NavigationBar.call(this, element, navigationItems);
-};
-
-WebInspector.QuickConsoleNavigationBar.prototype = {
-    constructor: WebInspector.QuickConsoleNavigationBar,
-
-    get sizesToFit()
-    {
-        return true;
-    },
-
-    addNavigationItem: function(navigationItem)
-    {
-        // Add new navigation items to the left.
-        return this.insertNavigationItem(navigationItem, 0);
-    }
-};
-
-WebInspector.QuickConsoleNavigationBar.prototype.__proto__ = WebInspector.NavigationBar.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.css
deleted file mode 100644
index 6660361a5..000000000
--- a/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.css
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.navigation-bar .item.radio.button:not(.text-only) {
-    width: 32px;
-}
-
-.navigation-bar.collapsed .item.radio.button:not(.text-only) {
-    width: 24px;
-}
-
-.navigation-bar .item.radio.button.text-only.selected {
-    background-repeat: no-repeat;
-    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.09) 12%, rgba(0, 0, 0, 0.06) 12%, transparent), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45), transparent),
-        -webkit-linear-gradient(top, rgba(0, 0, 0, 0.45), transparent);
-    background-size: 100% 100%, 1px 100%, 1px 100%;
-    background-position: left top, left top, right top;
-
-    font-weight: bold;
-}
diff --git a/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js
deleted file mode 100644
index ac82d99e1..000000000
--- a/Source/WebInspectorUI/UserInterface/RadioButtonNavigationItem.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.RadioButtonNavigationItem = function(identifier, toolTip, image, imageWidth, imageHeight) {
-    WebInspector.ButtonNavigationItem.call(this, identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
-};
-
-WebInspector.RadioButtonNavigationItem.StyleClassName = "radio";
-WebInspector.RadioButtonNavigationItem.ActiveStyleClassName = "active";
-WebInspector.RadioButtonNavigationItem.SelectedStyleClassName = "selected";
-
-WebInspector.RadioButtonNavigationItem.prototype = {
-    constructor: WebInspector.RadioButtonNavigationItem,
-
-    // Public
-
-    get selected()
-    {
-        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
-    },
-
-    set selected(flag)
-    {
-        if (flag) {
-            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
-            this.element.setAttribute("aria-selected", "true");
-        } else {
-            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
-            this.element.setAttribute("aria-selected", "false");
-        }
-    },
-
-    get active()
-    {
-        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
-    },
-
-    set active(flag)
-    {
-        if (flag)
-            this.element.classList.add(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
-        else
-            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
-    },
-
-    generateStyleText: function(parentSelector)
-    {
-        var classNames = this._classNames.join(".");
-
-        // Default state.
-        var styleText = parentSelector + " ." + classNames + " > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier() + "); background-size: " +  this._imageWidth + "px " + this._imageHeight + "px; }\n";
-
-        // Selected state.
-        styleText += parentSelector + " ." + classNames + ".selected:not(.disabled) > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.Focus) + "); }\n";
-
-        // Selected and pressed state.
-        styleText += parentSelector + " ." + classNames + ".selected:not(.disabled):active > .glyph { background-image: -webkit-canvas(" + this._canvasIdentifier(WebInspector.ButtonNavigationItem.States.ActiveFocus) + "); }\n";
-
-        return styleText;
-    },
-
-    updateLayout: function(expandOnly)
-    {
-        if (expandOnly)
-            return;
-
-        var isSelected = this.selected;
-
-        if (!isSelected) {
-            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
-            this.element.setAttribute("aria-selected", "true");
-        }
-
-        var selectedWidth = this.element.offsetWidth;
-        if (selectedWidth)
-            this.element.style.minWidth = selectedWidth + "px";
-
-        if (!isSelected) {
-            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
-            this.element.setAttribute("aria-selected", "false");
-        }
-    },
-
-    // Private
-
-    _additionalClassNames: [WebInspector.RadioButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName],
-};
-
-WebInspector.RadioButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RemoteObject.js b/Source/WebInspectorUI/UserInterface/RemoteObject.js
deleted file mode 100644
index 9a9a1d304..000000000
--- a/Source/WebInspectorUI/UserInterface/RemoteObject.js
+++ /dev/null
@@ -1,492 +0,0 @@
-/*
- * Copyright (C) 2009 Google Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- * @param {string|undefined} objectId
- * @param {string} type
- * @param {string|undefined} subtype
- * @param {*} value
- * @param {string=} description
- */
-WebInspector.RemoteObject = function(objectId, type, subtype, value, description)
-{
-    this._type = type;
-    this._subtype = subtype;
-    if (objectId) {
-        // handle
-        this._objectId = objectId;
-        this._description = description;
-        this._hasChildren = true;
-    } else {
-        // Primitive or null object.
-        console.assert(type !== "object" || value === null);
-        this._description = description || (value + "");
-        this._hasChildren = false;
-        this.value = value;
-    }
-}
-
-/**
- * @param {number|string|boolean} value
- * @return {WebInspector.RemoteObject}
- */
-WebInspector.RemoteObject.fromPrimitiveValue = function(value)
-{
-    return new WebInspector.RemoteObject(undefined, typeof value, undefined, value);
-}
-
-/**
- * @param {Object} value
- * @return {WebInspector.RemoteObject}
- */
-WebInspector.RemoteObject.fromLocalObject = function(value)
-{
-    return new WebInspector.LocalJSONObject(value);
-}
-
-/**
- * @param {WebInspector.DOMNode} node
- * @param {string} objectGroup
- * @param {function(?WebInspector.RemoteObject)} callback
- */
-WebInspector.RemoteObject.resolveNode = function(node, objectGroup, callback)
-{
-    /**
-     * @param {?Protocol.Error} error
-     * @param {RuntimeAgent.RemoteObject} object
-     */
-    function mycallback(error, object)
-    {
-        if (!callback)
-            return;
-
-        if (error || !object)
-            callback(null);
-        else
-            callback(WebInspector.RemoteObject.fromPayload(object));
-    }
-    DOMAgent.resolveNode(node.id, objectGroup, mycallback);
-}
-
-/**
- * @param {RuntimeAgent.RemoteObject} payload
- * @return {WebInspector.RemoteObject}
- */
-WebInspector.RemoteObject.fromPayload = function(payload)
-{
-    console.assert(typeof payload === "object", "Remote object payload should only be an object");
-
-    return new WebInspector.RemoteObject(payload.objectId, payload.type, payload.subtype, payload.value, payload.description);
-}
-
-/**
- * @param {WebInspector.RemoteObject} remoteObject
- * @return {string}
- */
-WebInspector.RemoteObject.type = function(remoteObject)
-{
-    if (remoteObject === null)
-        return "null";
-
-    var type = typeof remoteObject;
-    if (type !== "object" && type !== "function")
-        return type;
-
-    return remoteObject.type;
-}
-
-WebInspector.RemoteObject.prototype = {
-    /** @return {RuntimeAgent.RemoteObjectId} */
-    get objectId()
-    {
-        return this._objectId;
-    },
-
-    /** @return {string} */
-    get type()
-    {
-        return this._type;
-    },
-
-    /** @return {string|undefined} */
-    get subtype()
-    {
-        return this._subtype;
-    },
-
-    /** @return {string|undefined} */
-    get description()
-    {
-        return this._description;
-    },
-
-    /** @return {boolean} */
-    get hasChildren()
-    {
-        return this._hasChildren;
-    },
-
-    /**
-     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
-     */
-    getOwnProperties: function(callback)
-    {
-        this._getProperties(true, callback);
-    },
-
-    /**
-     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
-     */
-    getAllProperties: function(callback)
-    {
-        this._getProperties(false, callback);
-    },
-
-    /**
-     * @param {boolean} ownProperties
-     * @param {function(Array.<RuntimeAgent.RemoteObject>)} callback
-     */
-    _getProperties: function(ownProperties, callback)
-    {
-        if (!this._objectId) {
-            callback([]);
-            return;
-        }
-
-        /**
-         * @param {?Protocol.Error} error
-         * @param {Array.<WebInspector.RemoteObjectProperty>} properties
-         */
-        function remoteObjectBinder(error, properties)
-        {
-            if (error) {
-                callback(null);
-                return;
-            }
-            var result = [];
-            for (var i = 0; properties && i < properties.length; ++i) {
-                var property = properties[i];
-                if (property.get || property.set) {
-                    if (property.get)
-                        result.push(new WebInspector.RemoteObjectProperty("get " + property.name, WebInspector.RemoteObject.fromPayload(property.get), property));
-                    if (property.set)
-                        result.push(new WebInspector.RemoteObjectProperty("set " + property.name, WebInspector.RemoteObject.fromPayload(property.set), property));
-                } else
-                    result.push(new WebInspector.RemoteObjectProperty(property.name, WebInspector.RemoteObject.fromPayload(property.value), property));
-            }
-            callback(result);
-        }
-        RuntimeAgent.getProperties(this._objectId, ownProperties, remoteObjectBinder);
-    },
-
-    /**
-     * @param {string} name
-     * @param {string} value
-     * @param {function(string=)} callback
-     */
-    setPropertyValue: function(name, value, callback)
-    {
-        if (!this._objectId) {
-            callback("Can't set a property of non-object.");
-            return;
-        }
-
-        RuntimeAgent.evaluate.invoke({expression:value, doNotPauseOnExceptionsAndMuteConsole:true}, evaluatedCallback.bind(this));
-
-        /**
-         * @param {?Protocol.Error} error
-         * @param {RuntimeAgent.RemoteObject} result
-         * @param {boolean=} wasThrown
-         */
-        function evaluatedCallback(error, result, wasThrown)
-        {
-            if (error || wasThrown) {
-                callback(error || result.description);
-                return;
-            }
-
-            function setPropertyValue(propertyName, propertyValue)
-            {
-                this[propertyName] = propertyValue;
-            }
-
-            delete result.description; // Optimize on traffic.
-            RuntimeAgent.callFunctionOn(this._objectId, setPropertyValue.toString(), [{ value:name }, result], true, undefined, propertySetCallback.bind(this));
-            if (result._objectId)
-                RuntimeAgent.releaseObject(result._objectId);
-        }
-
-        /**
-         * @param {?Protocol.Error} error
-         * @param {RuntimeAgent.RemoteObject} result
-         * @param {boolean=} wasThrown
-         */
-        function propertySetCallback(error, result, wasThrown)
-        {
-            if (error || wasThrown) {
-                callback(error || result.description);
-                return;
-            }
-            callback();
-        }
-    },
-
-    /**
-     * @param {function(DOMAgent.NodeId)} callback
-     */
-    pushNodeToFrontend: function(callback)
-    {
-        if (this._objectId)
-            WebInspector.domTreeManager.pushNodeToFrontend(this._objectId, callback);
-        else
-            callback(0);
-    },
-
-    /**
-     * @param {string} functionDeclaration
-     * @param {function(?WebInspector.RemoteObject)} callback
-     */
-    callFunction: function(functionDeclaration, args, callback)
-    {
-        function mycallback(error, result, wasThrown)
-        {
-            callback((error || wasThrown) ? null : WebInspector.RemoteObject.fromPayload(result));
-        }
-
-        RuntimeAgent.callFunctionOn(this._objectId, functionDeclaration.toString(), args, true, undefined, mycallback);
-    },
-
-    /**
-     * @param {string} functionDeclaration
-     * @param {function(*)} callback
-     */
-    callFunctionJSON: function(functionDeclaration, args, callback)
-    {
-        function mycallback(error, result, wasThrown)
-        {
-            callback((error || wasThrown) ? null : result.value);
-        }
-
-        RuntimeAgent.callFunctionOn(this._objectId, functionDeclaration.toString(), args, true, true, mycallback);
-    },
-
-    release: function()
-    {
-        RuntimeAgent.releaseObject(this._objectId);
-    },
-
-    /**
-     * @return {number}
-     */
-    arrayLength: function()
-    {
-        if (this.subtype !== "array")
-            return 0;
-
-        var matches = this._description.match(/\[([0-9]+)\]/);
-        if (!matches)
-            return 0;
-        return parseInt(matches[1], 10);
-    }
-}
-
-/**
- * @constructor
- * @param {string} name
- * @param {WebInspector.RemoteObject} value 
- * @param {Object=} descriptor
- */
-WebInspector.RemoteObjectProperty = function(name, value, descriptor)
-{
-    this.name = name;
-    this.value = value;
-    this.enumerable = descriptor ? !!descriptor.enumerable : true;
-    this.writable = descriptor ? !!descriptor.writable : true;
-    if (descriptor && descriptor.wasThrown)
-        this.wasThrown = true;
-}
-
-/**
- * @param {string} name
- * @param {string} value
- * @return {WebInspector.RemoteObjectProperty}
- */
-WebInspector.RemoteObjectProperty.fromPrimitiveValue = function(name, value)
-{
-    return new WebInspector.RemoteObjectProperty(name, WebInspector.RemoteObject.fromPrimitiveValue(value));
-}
-
-// The below is a wrapper around a local object that provides an interface comaptible
-// with RemoteObject, to be used by the UI code (primarily ObjectPropertiesSection).
-// Note that only JSON-compliant objects are currently supported, as there's no provision
-// for traversing prototypes, extracting class names via constuctor, handling properties
-// or functions.
-
-/**
- * @constructor
- * @extends {WebInspector.RemoteObject}
- * @param {Object} value
- */
-WebInspector.LocalJSONObject = function(value)
-{
-    this._value = value;
-}
-
-WebInspector.LocalJSONObject.prototype = {
-    /**
-     * @return {string}
-     */
-    get description()
-    {
-        if (this._cachedDescription)
-            return this._cachedDescription;
-
-        if (this.type === "object") {
-            switch (this.subtype) {
-            case "array":
-                function formatArrayItem(property)
-                {
-                    return property.value.description;
-                }
-                this._cachedDescription = this._concatenate("[", "]", formatArrayItem);
-                break;
-            case "null":
-                this._cachedDescription = "null";
-                break;
-            default:
-                function formatObjectItem(property)
-                {
-                    return property.name + ":" + property.value.description;
-                }
-                this._cachedDescription = this._concatenate("{", "}", formatObjectItem);
-            }
-        } else
-            this._cachedDescription = String(this._value);
-
-        return this._cachedDescription;
-    },
-
-    /**
-     * @param {string} prefix
-     * @param {string} suffix
-     * @return {string}
-     */
-    _concatenate: function(prefix, suffix, formatProperty)
-    {
-        const previewChars = 100;
-
-        var buffer = prefix;
-        var children = this._children();
-        for (var i = 0; i < children.length; ++i) {
-            var itemDescription = formatProperty(children[i]);
-            if (buffer.length + itemDescription.length > previewChars) {
-                buffer += ",\u2026";
-                break;
-            }
-            if (i)
-                buffer += ", ";
-            buffer += itemDescription;
-        }
-        buffer += suffix;
-        return buffer;
-    },
-
-    /**
-     * @return {string}
-     */
-    get type()
-    {
-        return typeof this._value;
-    },
-
-    /**
-     * @return {string|undefined}
-     */
-    get subtype()
-    {
-        if (this._value === null)
-            return "null";
-
-        if (this._value instanceof Array)
-            return "array";
-
-        return undefined;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    get hasChildren()
-    {
-        return typeof this._value === "object" && this._value !== null && !isEmptyObject(this._value);
-    },
-
-    /**
-     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
-     */
-    getOwnProperties: function(callback)
-    {
-        callback(this._children());
-    },
-
-    /**
-     * @param {function(Array.<WebInspector.RemoteObjectProperty>)} callback
-     */
-    getAllProperties: function(callback)
-    {
-        callback(this._children());
-    },
-
-    /**
-     * @return {Array.<WebInspector.RemoteObjectProperty>}
-     */
-    _children: function()
-    {
-        if (!this.hasChildren)
-            return [];
-
-        function buildProperty(propName)
-        {
-            return new WebInspector.RemoteObjectProperty(propName, new WebInspector.LocalJSONObject(this._value[propName]));
-        }
-        if (!this._cachedChildren)
-            this._cachedChildren = Object.keys(this._value || {}).map(buildProperty.bind(this));
-        return this._cachedChildren;
-    },
-
-    /**
-     * @return {boolean}
-     */
-    isError: function()
-    {
-        return false;
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/Resource.js b/Source/WebInspectorUI/UserInterface/Resource.js
deleted file mode 100644
index 603e362ab..000000000
--- a/Source/WebInspectorUI/UserInterface/Resource.js
+++ /dev/null
@@ -1,655 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Resource = function(url, mimeType, type, loaderIdentifier, requestIdentifier, requestMethod, requestHeaders, requestData, requestSentTimestamp)
-{
-    WebInspector.SourceCode.call(this);
-
-    console.assert(url);
-
-    if (type in WebInspector.Resource.Type)
-        type = WebInspector.Resource.Type[type];
-
-    this._url = url;
-    this._mimeType = mimeType;
-    this._type = type || WebInspector.Resource.Type.fromMIMEType(mimeType);
-    this._loaderIdentifier = loaderIdentifier || null;
-    this._requestIdentifier = requestIdentifier || null;
-    this._requestMethod = requestMethod || null;
-    this._requestData = requestData || null;
-    this._requestHeaders = requestHeaders || {};
-    this._responseHeaders = {};
-    this._parentFrame = null;
-    this._requestSentTimestamp = requestSentTimestamp || NaN;
-    this._responseReceivedTimestamp = NaN;
-    this._lastRedirectReceivedTimestamp = NaN;
-    this._lastDataReceivedTimestamp = NaN;
-    this._finishedOrFailedTimestamp = NaN;
-    this._size = NaN;
-    this._transferSize = NaN;
-    this._cached = false;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.Resource);
-
-WebInspector.Resource.Event = {
-    URLDidChange: "resource-url-did-change",
-    MIMETypeDidChange: "resource-mime-type-did-change",
-    TypeDidChange: "resource-type-did-change",
-    RequestHeadersDidChange: "resource-request-headers-did-change",
-    ResponseReceived: "resource-response-received",
-    LoadingDidFinish: "resource-loading-did-finish",
-    LoadingDidFail: "resource-loading-did-fail",
-    TimestampsDidChange: "resource-timestamps-did-change",
-    SizeDidChange: "resource-size-did-change",
-    TransferSizeDidChange: "resource-transfer-size-did-change",
-    CacheStatusDidChange: "resource-cached-did-change"
-};
-
-// Keep these in sync with the "ResourceType" enum defined by the "Page" domain (see WebCore/inspector/Inspector.json).
-WebInspector.Resource.Type = {
-    Document: "resource-type-document",
-    Stylesheet: "resource-type-stylesheet",
-    Image: "resource-type-image",
-    Font: "resource-type-font",
-    Script: "resource-type-script",
-    XHR: "resource-type-xhr",
-    WebSocket: "resource-type-websocket",
-    Other: "resource-type-other"
-};
-
-// This MIME Type map is private, use WebInspector.Resource.Type.fromMIMEType().
-WebInspector.Resource.Type._mimeTypeMap = {
-    "text/html": WebInspector.Resource.Type.Document,
-    "text/xml": WebInspector.Resource.Type.Document,
-    "text/plain": WebInspector.Resource.Type.Document,
-    "application/xhtml+xml": WebInspector.Resource.Type.Document,
-    "image/svg+xml": WebInspector.Resource.Type.Document,
-
-    "text/css": WebInspector.Resource.Type.Stylesheet,
-    "text/xsl": WebInspector.Resource.Type.Stylesheet,
-    "text/x-less": WebInspector.Resource.Type.Stylesheet,
-    "text/x-sass": WebInspector.Resource.Type.Stylesheet,
-    "text/x-scss": WebInspector.Resource.Type.Stylesheet,
-
-    "application/pdf": WebInspector.Resource.Type.Image,
-
-    "application/x-font-type1": WebInspector.Resource.Type.Font,
-    "application/x-font-ttf": WebInspector.Resource.Type.Font,
-    "application/x-font-woff": WebInspector.Resource.Type.Font,
-    "application/x-truetype-font": WebInspector.Resource.Type.Font,
-
-    "text/javascript": WebInspector.Resource.Type.Script,
-    "text/ecmascript": WebInspector.Resource.Type.Script,
-    "application/javascript": WebInspector.Resource.Type.Script,
-    "application/ecmascript": WebInspector.Resource.Type.Script,
-    "application/x-javascript": WebInspector.Resource.Type.Script,
-    "application/json": WebInspector.Resource.Type.Script,
-    "application/x-json": WebInspector.Resource.Type.Script,
-    "text/x-javascript": WebInspector.Resource.Type.Script,
-    "text/x-json": WebInspector.Resource.Type.Script,
-    "text/javascript1.1": WebInspector.Resource.Type.Script,
-    "text/javascript1.2": WebInspector.Resource.Type.Script,
-    "text/javascript1.3": WebInspector.Resource.Type.Script,
-    "text/jscript": WebInspector.Resource.Type.Script,
-    "text/livescript": WebInspector.Resource.Type.Script,
-    "text/x-livescript": WebInspector.Resource.Type.Script,
-    "text/typescript": WebInspector.Resource.Type.Script,
-    "text/x-clojure": WebInspector.Resource.Type.Script,
-    "text/x-coffeescript": WebInspector.Resource.Type.Script
-};
-
-WebInspector.Resource.Type.fromMIMEType = function(mimeType)
-{
-    if (!mimeType)
-        return WebInspector.Resource.Type.Other;
-
-    if (mimeType in WebInspector.Resource.Type._mimeTypeMap)
-        return WebInspector.Resource.Type._mimeTypeMap[mimeType];
-
-    if (mimeType.startsWith("image/"))
-        return WebInspector.Resource.Type.Image;
-
-    if (mimeType.startsWith("font/"))
-        return WebInspector.Resource.Type.Font;
-
-    return WebInspector.Resource.Type.Other;
-};
-
-WebInspector.Resource.Type.displayName = function(type, plural)
-{
-    switch(type) {
-    case WebInspector.Resource.Type.Document:
-        if (plural)
-            return WebInspector.UIString("Documents");
-        return WebInspector.UIString("Document");
-    case WebInspector.Resource.Type.Stylesheet:
-        if (plural)
-            return WebInspector.UIString("Stylesheets");
-        return WebInspector.UIString("Stylesheet");
-    case WebInspector.Resource.Type.Image:
-        if (plural)
-            return WebInspector.UIString("Images");
-        return WebInspector.UIString("Image");
-    case WebInspector.Resource.Type.Font:
-        if (plural)
-            return WebInspector.UIString("Fonts");
-        return WebInspector.UIString("Font");
-    case WebInspector.Resource.Type.Script:
-        if (plural)
-            return WebInspector.UIString("Scripts");
-        return WebInspector.UIString("Script");
-    case WebInspector.Resource.Type.XHR:
-        if (plural)
-            return WebInspector.UIString("XHRs");
-        return WebInspector.UIString("XHR");
-    case WebInspector.Resource.Type.WebSocket:
-        if (plural)
-            return WebInspector.UIString("Sockets");
-        return WebInspector.UIString("Socket");
-    case WebInspector.Resource.Type.Other:
-        return WebInspector.UIString("Other");
-    default:
-        console.error("Unknown resource type: ", type);
-        return null;
-    }
-};
-
-WebInspector.Resource.prototype = {
-    constructor: WebInspector.Resource,
-
-    // Public
-
-    get url()
-    {
-        return this._url;
-    },
-
-    get urlComponents()
-    {
-        if (!this._urlComponents)
-            this._urlComponents = parseURL(this._url);
-        return this._urlComponents;
-    },
-
-    get displayName()
-    {
-        return WebInspector.displayNameForURL(this._url, this.urlComponents);
-    },
-
-    get type()
-    {
-        return this._type;
-    },
-
-    get mimeType()
-    {
-        return this._mimeType;
-    },
-
-    get syntheticMIMEType()
-    {
-        // Resources are often transferred with a MIME-type that doesn't match the purpose the
-        // resource was loaded for, which is what WebInspector.Resource.Type represents.
-        // This getter generates a MIME-type, if needed, that matches the resource type.
-
-        // If the type matches the Resource.Type of the MIME-type, then return the actual MIME-type.
-        if (this._type === WebInspector.Resource.Type.fromMIMEType(this._mimeType))
-            return this._mimeType;
-
-        // Return the default MIME-types for the Resource.Type, since the current MIME-type
-        // does not match what is expected for the Resource.Type.
-        switch (this._type) {
-        case WebInspector.Resource.Type.Document:
-            return "text/html";
-        case WebInspector.Resource.Type.Stylesheet:
-            return "text/css";
-        case WebInspector.Resource.Type.Script:
-            return "text/javascript";
-        }
-
-        // Return the actual MIME-type since we don't have a better synthesized one to return.
-        return this._mimeType;
-    },
-
-    get contentURL()
-    {
-        const maximumDataURLSize = 1024 * 1024; // 1 MiB
-
-        // If content is not available or won't fit a data URL, fallback to using original URL.
-        var content = this.content;
-        if (content === null || content.length > maximumDataURLSize)
-            return this._url;
-
-        return "data:" + this._mimeType + (this.contentIsBase64Encoded ? ";base64," + content : "," + encodeURIComponent(content));
-    },
-
-    isMainResource: function()
-    {
-        return this._parentFrame ? this._parentFrame.mainResource === this : false;
-    },
-
-    get parentFrame()
-    {
-        return this._parentFrame;
-    },
-
-    get loaderIdentifier()
-    {
-        return this._loaderIdentifier;
-    },
-
-    get requestIdentifier()
-    {
-        return this._requestIdentifier;
-    },
-
-    get finished()
-    {
-        return this._finished;
-    },
-
-    get failed()
-    {
-        return this._failed;
-    },
-
-    get canceled()
-    {
-        return this._canceled;
-    },
-
-    get requestMethod()
-    {
-        return this._requestMethod;
-    },
-
-    get requestData()
-    {
-        return this._requestData;
-    },
-
-    get requestDataContentType()
-    {
-        return this._requestHeaders.valueForCaseInsensitiveKey("Content-Type") || null;
-    },
-
-    get requestHeaders()
-    {
-        return this._requestHeaders;
-    },
-
-    get responseHeaders()
-    {
-        return this._responseHeaders;
-    },
-
-    get requestSentTimestamp()
-    {
-        return this._requestSentTimestamp;
-    },
-
-    get lastRedirectReceivedTimestamp()
-    {
-        return this._lastRedirectReceivedTimestamp;
-    },
-
-    get responseReceivedTimestamp()
-    {
-        return this._responseReceivedTimestamp;
-    },
-
-    get lastDataReceivedTimestamp()
-    {
-        return this._lastDataReceivedTimestamp;
-    },
-
-    get finishedOrFailedTimestamp()
-    {
-        return this._finishedOrFailedTimestamp;
-    },
-
-    get firstTimestamp()
-    {
-        return this.requestSentTimestamp || this.lastRedirectReceivedTimestamp || this.responseReceivedTimestamp || this.lastDataReceivedTimestamp || this.finishedOrFailedTimestamp;
-    },
-
-    get lastTimestamp()
-    {
-        return this.finishedOrFailedTimestamp || this.lastDataReceivedTimestamp || this.responseReceivedTimestamp || this.lastRedirectReceivedTimestamp || this.requestSentTimestamp;
-    },
-
-    get duration()
-    {
-        return this._finishedOrFailedTimestamp - this._requestSentTimestamp;
-    },
-
-    get latency()
-    {
-        return this._responseReceivedTimestamp - this._requestSentTimestamp;
-    },
-
-    get receiveDuration()
-    {
-        return this._finishedOrFailedTimestamp - this._responseReceivedTimestamp;
-    },
-
-    get cached()
-    {
-        return this._cached;
-    },
-
-    get statusCode()
-    {
-        return this._statusCode;
-    },
-
-    get statusText()
-    {
-        return this._statusText;
-    },
-
-    get size()
-    {
-        return this._size;
-    },
-
-    get encodedSize()
-    {
-        if (!isNaN(this._transferSize))
-            return this._transferSize;
-
-        // If we did not receive actual transfer size from network
-        // stack, we prefer using Content-Length over resourceSize as
-        // resourceSize may differ from actual transfer size if platform's
-        // network stack performed decoding (e.g. gzip decompression).
-        // The Content-Length, though, is expected to come from raw
-        // response headers and will reflect actual transfer length.
-        // This won't work for chunked content encoding, so fall back to
-        // resourceSize when we don't have Content-Length. This still won't
-        // work for chunks with non-trivial encodings. We need a way to
-        // get actual transfer size from the network stack.
-
-        return Number(this._responseHeaders.valueForCaseInsensitiveKey("Content-Length") || this._size);
-    },
-
-    get transferSize()
-    {
-        if (this.statusCode === 304) // Not modified
-            return this._responseHeadersSize;
-
-        if (this._cached)
-            return 0;
-
-        return this._responseHeadersSize + this.encodedSize;
-    },
-
-    get compressed()
-    {
-        var contentEncoding = this._responseHeaders.valueForCaseInsensitiveKey("Content-Encoding");
-        return contentEncoding && /\b(?:gzip|deflate)\b/.test(contentEncoding);
-    },
-
-    get scripts()
-    {
-        return this._scripts || [];
-    },
-
-    updateForRedirectResponse: function(url, requestHeaders, timestamp)
-    {
-        console.assert(!this._finished);
-        console.assert(!this._failed);
-        console.assert(!this._canceled);
-
-        var oldURL = this._url;
-
-        this._url = url;
-        this._requestHeaders = requestHeaders || {};
-        this._lastRedirectReceivedTimestamp = timestamp || NaN;
-
-        if (oldURL !== url) {
-            // Delete the URL components so the URL is re-parsed the next time it is requested.
-            delete this._urlComponents;
-
-            this.dispatchEventToListeners(WebInspector.Resource.Event.URLDidChange, {oldURL: oldURL});
-        }
-
-        this.dispatchEventToListeners(WebInspector.Resource.Event.RequestHeadersDidChange);
-        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
-    },
-
-    updateForResponse: function(url, mimeType, type, responseHeaders, statusCode, statusText, timestamp)
-    {
-        console.assert(!this._finished);
-        console.assert(!this._failed);
-        console.assert(!this._canceled);
-
-        var oldURL = this._url;
-        var oldMIMEType = this._mimeType;
-        var oldType = this._type;
-
-        if (type in WebInspector.Resource.Type)
-            type = WebInspector.Resource.Type[type];
-
-        this._url = url;
-        this._mimeType = mimeType;
-        this._type = type || WebInspector.Resource.Type.fromMIMEType(mimeType);
-        this._statusCode = statusCode;
-        this._statusText = statusText;
-        this._responseHeaders = responseHeaders || {};
-        this._responseReceivedTimestamp = timestamp || NaN;
-
-        this._responseHeadersSize = String(this._statusCode).length + this._statusText.length + 12; // Extra length is for "HTTP/1.1 ", " ", and "\r\n".
-        for (var name in this._responseHeaders)
-            this._responseHeadersSize += name.length + this._responseHeaders[name].length + 4; // Extra length is for ": ", and "\r\n".
-
-        if (statusCode === 304 && !this._cached)
-            this.markAsCached();
-
-        if (oldURL !== url) {
-            // Delete the URL components so the URL is re-parsed the next time it is requested.
-            delete this._urlComponents;
-
-            this.dispatchEventToListeners(WebInspector.Resource.Event.URLDidChange, {oldURL: oldURL});
-        }
-
-        if (oldMIMEType !== mimeType)
-            this.dispatchEventToListeners(WebInspector.Resource.Event.MIMETypeDidChange, {oldMIMEType: oldMIMEType});
-
-        if (oldType !== type)
-            this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType: oldType});
-
-        console.assert(isNaN(this._size));
-        console.assert(isNaN(this._transferSize));
-
-        // The transferSize becomes 0 when status is 304 or Content-Length is available, so
-        // notify listeners of that change.
-        if (statusCode === 304 || this._responseHeaders.valueForCaseInsensitiveKey("Content-Length"))
-            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
-
-        this.dispatchEventToListeners(WebInspector.Resource.Event.ResponseReceived);
-        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
-    },
-
-    canRequestContentFromBackend: function()
-    {
-        return this._finished;
-    },
-
-    requestContentFromBackend: function(callback)
-    {
-        // If we have the requestIdentifier we can get the actual response for this specific resource.
-        // Otherwise the content will be cached resource data, which might not exist anymore.
-        if (this._requestIdentifier) {
-            NetworkAgent.getResponseBody(this._requestIdentifier, callback);
-            return true;
-        }
-
-        if (this._parentFrame) {
-            PageAgent.getResourceContent(this._parentFrame.id, this._url, callback);
-            return true;
-        }
-
-        // There is no request identifier or frame to request content from. Return false to cause the
-        // pending callbacks to get null content.
-        return false;
-    },
-
-    increaseSize: function(dataLength, timestamp)
-    {
-        console.assert(dataLength >= 0);
-
-        if (isNaN(this._size))
-            this._size = 0;
-
-        var previousSize = this._size;
-
-        this._size += dataLength;
-
-        this._lastDataReceivedTimestamp = timestamp || NaN;
-
-        this.dispatchEventToListeners(WebInspector.Resource.Event.SizeDidChange, {previousSize: previousSize});
-
-        // The transferSize is based off of size when status is not 304 or Content-Length is missing.
-        if (isNaN(this._transferSize) && this._statusCode !== 304 && !this._responseHeaders.valueForCaseInsensitiveKey("Content-Length"))
-            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
-    },
-
-    increaseTransferSize: function(encodedDataLength)
-    {
-        console.assert(encodedDataLength >= 0);
-
-        if (isNaN(this._transferSize))
-            this._transferSize = 0;
-        this._transferSize += encodedDataLength;
-
-        this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
-    },
-
-    markAsCached: function()
-    {
-        this._cached = true;
-
-        this.dispatchEventToListeners(WebInspector.Resource.Event.CacheStatusDidChange);
-
-        // The transferSize is starts returning 0 when cached is true, unless status is 304.
-        if (this._statusCode !== 304)
-            this.dispatchEventToListeners(WebInspector.Resource.Event.TransferSizeDidChange);
-    },
-
-    markAsFinished: function(timestamp)
-    {
-        console.assert(!this._failed);
-        console.assert(!this._canceled);
-
-        this._finished = true;
-        this._finishedOrFailedTimestamp = timestamp || NaN;
-
-        this.dispatchEventToListeners(WebInspector.Resource.Event.LoadingDidFinish);
-        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
-
-        if (this.canRequestContentFromBackend())
-            this.requestContentFromBackendIfNeeded();
-    },
-
-    markAsFailed: function(canceled, timestamp)
-    {
-        console.assert(!this._finished);
-
-        this._failed = true;
-        this._canceled = canceled;
-        this._finishedOrFailedTimestamp = timestamp || NaN;
-
-        this.dispatchEventToListeners(WebInspector.Resource.Event.LoadingDidFail);
-        this.dispatchEventToListeners(WebInspector.Resource.Event.TimestampsDidChange);
-
-        // Force the content requests to be serviced. They will get null as the content.
-        this.servicePendingContentRequests(true);
-    },
-
-    revertMarkAsFinished: function(timestamp)
-    {
-        console.assert(!this._failed);
-        console.assert(!this._canceled);
-        console.assert(this._finished);
-
-        this._finished = false;
-        this._finishedOrFailedTimestamp = NaN;
-    },
-
-    getImageSize: function(callback)
-    {
-        // Throw an error in the case this resource is not an image.
-        if (this.type !== WebInspector.Resource.Type.Image)
-            throw "Resource is not an image.";
-
-        // See if we've already computed and cached the image size,
-        // in which case we can provide them directly.
-        if (this._imageSize) {
-            callback(this._imageSize);
-            return;
-        }
-
-        // Event handler for the image "load" event.
-        function imageDidLoad()
-        {
-            // Cache the image metrics.
-            this._imageSize = {
-                width: image.width,
-                height: image.height
-            };
-            
-            callback(this._imageSize);
-        };
-
-        // Create an <img> element that we'll use to load the image resource
-        // so that we can query its intrinsic size.
-        var image = new Image;
-        image.addEventListener("load", imageDidLoad.bind(this), false);
-
-        // Set the image source once we've obtained the base64-encoded URL for it.
-        this.requestContent(function() {
-            image.src = this.contentURL;
-        }.bind(this));
-    },
-
-    associateWithScript: function(script)
-    {
-        if (!this._scripts)
-            this._scripts = []
-
-        this._scripts.push(script);
-
-        // COMPATIBILITY (iOS 6): Resources did not know their type until a response
-        // was received. We can set the Resource type to be Script here.
-        if (this._type === WebInspector.Resource.Type.Other) {
-            var oldType = this._type;
-            this._type = WebInspector.Resource.Type.Script;
-            this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType: oldType});
-        }
-    }
-};
-
-WebInspector.Resource.prototype.__proto__ = WebInspector.SourceCode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js b/Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js
deleted file mode 100644
index 17e22f5a9..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceClusterContentView.js
+++ /dev/null
@@ -1,263 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceClusterContentView = function(resource)
-{
-    WebInspector.ClusterContentView.call(this, resource);
-
-    this._resource = resource;
-    this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
-    this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._resourceLoadingDidFinish, this);
-
-    function createPathComponent(displayName, className, identifier)
-    {
-        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, identifier, false, true);
-        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
-        return pathComponent;
-    }
-
-    this._requestPathComponent = createPathComponent.call(this, WebInspector.UIString("Request"), WebInspector.ResourceClusterContentView.RequestIconStyleClassName, WebInspector.ResourceClusterContentView.RequestIdentifier);
-    this._responsePathComponent = createPathComponent.call(this, WebInspector.UIString("Response"), WebInspector.ResourceClusterContentView.ResponseIconStyleClassName, WebInspector.ResourceClusterContentView.ResponseIdentifier);
-
-    this._requestPathComponent.nextSibling = this._responsePathComponent;
-    this._responsePathComponent.previousSibling = this._requestPathComponent;
-
-    this._currentContentViewSetting = new WebInspector.Setting("resource-current-view-" + this._resource.url.hash, WebInspector.ResourceClusterContentView.ResponseIdentifier);
-};
-
-WebInspector.ResourceClusterContentView.RequestIconStyleClassName = "request-icon";
-WebInspector.ResourceClusterContentView.ResponseIconStyleClassName = "response-icon";
-WebInspector.ResourceClusterContentView.RequestIdentifier = "request";
-WebInspector.ResourceClusterContentView.ResponseIdentifier = "response";
-
-WebInspector.ResourceClusterContentView.prototype = {
-    constructor: WebInspector.ResourceClusterContentView,
-
-    // Public
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    get allowedNavigationSidebarPanels()
-    {
-        return ["resource", "debugger"];
-    },
-
-    get responseContentView()
-    {
-        if (this._responseContentView)
-            return this._responseContentView;
-
-        switch (this._resource.type) {
-        case WebInspector.Resource.Type.Document:
-        case WebInspector.Resource.Type.Script:
-        case WebInspector.Resource.Type.Stylesheet:
-        case WebInspector.Resource.Type.XHR:
-            this._responseContentView = new WebInspector.TextResourceContentView(this._resource);
-            break;
-
-        case WebInspector.Resource.Type.Image:
-            this._responseContentView = new WebInspector.ImageResourceContentView(this._resource);
-            break;
-
-        case WebInspector.Resource.Type.Font:
-            this._responseContentView = new WebInspector.FontResourceContentView(this._resource);
-            break;
-
-        default:
-            this._responseContentView = new WebInspector.GenericResourceContentView(this._resource);
-            break;
-        }
-
-        return this._responseContentView;
-    },
-
-    get requestContentView()
-    {
-        if (!this._canShowRequestContentView())
-            return null;
-
-        if (this._requestContentView)
-            return this._requestContentView;
-
-        this._requestContentView = new WebInspector.TextContentView(this._resource.requestData || "", this._resource.requestDataContentType);
-
-        return this._requestContentView;
-    },
-
-    get selectionPathComponents()
-    {
-        var currentContentView = this._contentViewContainer.currentContentView;
-        if (!currentContentView)
-            return [];
-
-        if (!this._canShowRequestContentView())
-            return currentContentView.selectionPathComponents;
-
-        // Append the current view's path components to the path component representing the current view.
-        var components = [this._pathComponentForContentView(currentContentView)];
-        return components.concat(currentContentView.selectionPathComponents);
-    },
-
-    shown: function()
-    {
-        WebInspector.ClusterContentView.prototype.shown.call(this);
-
-        if (this._shownInitialContent)
-            return;
-
-        this._showContentViewForIdentifier(this._currentContentViewSetting.value);
-    },
-
-    closed: function()
-    {
-        WebInspector.ClusterContentView.prototype.closed.call(this);
-
-        this._shownInitialContent = false;
-    },
-
-    showRequest: function()
-    {
-        this._shownInitialContent = true;
-
-        return this._showContentViewForIdentifier(WebInspector.ResourceClusterContentView.RequestIdentifier);
-    },
-
-    showResponse: function(positionToReveal, textRangeToSelect, forceUnformatted)
-    {
-        this._shownInitialContent = true;
-
-        if (!this._resource.finished) {
-            this._positionToReveal = positionToReveal;
-            this._textRangeToSelect = textRangeToSelect;
-            this._forceUnformatted = forceUnformatted;
-        }
-
-        var responseContentView = this._showContentViewForIdentifier(WebInspector.ResourceClusterContentView.ResponseIdentifier);
-        if (typeof responseContentView.revealPosition === "function")
-            responseContentView.revealPosition(positionToReveal, textRangeToSelect, forceUnformatted);
-        return responseContentView;
-    },
-
-    // Private
-
-    _canShowRequestContentView: function()
-    {
-        var requestData = this._resource.requestData;
-        if (!requestData)
-            return false;
-
-        var requestDataContentType = this._resource.requestDataContentType;
-        if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i))
-            return false;
-
-        return true;
-    },
-
-    _pathComponentForContentView: function(contentView)
-    {
-        console.assert(contentView);
-        if (!contentView)
-            return null;
-        if (contentView === this._requestContentView)
-            return this._requestPathComponent;
-        if (contentView === this._responseContentView)
-            return this._responsePathComponent;
-        console.error("Unknown contentView.");
-        return null;
-    },
-
-    _identifierForContentView: function(contentView)
-    {
-        console.assert(contentView);
-        if (!contentView)
-            return null;
-        if (contentView === this._requestContentView)
-            return WebInspector.ResourceClusterContentView.RequestIdentifier;
-        if (contentView === this._responseContentView)
-            return WebInspector.ResourceClusterContentView.ResponseIdentifier;
-        console.error("Unknown contentView.");
-        return null;
-    },
-
-    _showContentViewForIdentifier: function(identifier)
-    {
-        var contentViewToShow = null;
-
-        switch (identifier) {
-        case WebInspector.ResourceClusterContentView.RequestIdentifier:
-            contentViewToShow = this._canShowRequestContentView() ? this.requestContentView : null;
-            break;
-        case WebInspector.ResourceClusterContentView.ResponseIdentifier:
-            contentViewToShow = this.responseContentView;
-            break;
-        }
-
-        if (!contentViewToShow)
-            contentViewToShow = this.responseContentView;
-
-        console.assert(contentViewToShow);
-
-        this._currentContentViewSetting.value = this._identifierForContentView(contentViewToShow);
-
-        return this.contentViewContainer.showContentView(contentViewToShow);
-    },
-
-    _pathComponentSelected: function(event)
-    {
-        this._showContentViewForIdentifier(event.data.pathComponent.representedObject);
-    },
-
-    _resourceTypeDidChange: function(event)
-    {
-        // Since resource views are based on the type, we need to make a new content view and tell the container to replace this
-        // content view with the new one. Make a new ResourceContentView which will use the new resource type to make the correct
-        // concrete ResourceContentView subclass.
-
-        var currentResponseContentView = this._responseContentView;
-        if (!currentResponseContentView)
-            return;
-
-        delete this._responseContentView;
-
-        this.contentViewContainer.replaceContentView(currentResponseContentView, this.responseContentView);
-    },
-
-    _resourceLoadingDidFinish: function(event)
-    {
-        if ("_positionToReveal" in this) {
-            if (this._contentViewContainer.currentContentView === this._responseContentView)
-                this._responseContentView.revealPosition(this._positionToReveal, this._textRangeToSelect, this._forceUnformatted);
-
-            delete this._positionToReveal;
-            delete this._textRangeToSelect;
-            delete this._forceUnformatted;
-        }
-    }
-};
-
-WebInspector.ResourceClusterContentView.prototype.__proto__ = WebInspector.ClusterContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceCollection.js b/Source/WebInspectorUI/UserInterface/ResourceCollection.js
deleted file mode 100644
index e68334a8e..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceCollection.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceCollection = function()
-{
-    WebInspector.Object.call(this);
-
-    this._resources = [];
-    this._resourceURLMap = {};
-    this._resourcesTypeMap = {};
-};
-
-WebInspector.ResourceCollection.prototype = {
-    constructor: WebInspector.ResourceCollection,
-
-    // Public
-
-    get resources()
-    {
-        return this._resources;
-    },
-
-    resourceForURL: function(url)
-    {
-        return this._resourceURLMap[url] || null;
-    },
-
-    resourcesWithType: function(type)
-    {
-        return this._resourcesTypeMap[type] || [];
-    },
-
-    addResource: function(resource)
-    {
-        console.assert(resource instanceof WebInspector.Resource);
-        if (!(resource instanceof WebInspector.Resource))
-            return;
-
-        this._associateWithResource(resource);
-    },
-
-    removeResource: function(resourceOrURL)
-    {
-        console.assert(resourceOrURL);
-
-        if (resourceOrURL instanceof WebInspector.Resource)
-            var url = resourceOrURL.url;
-        else
-            var url = resourceOrURL;
-
-        // Fetch the resource by URL even if we were passed a WebInspector.Resource.
-        // We do this incase the WebInspector.Resource is a new object that isn't in _resources,
-        // but the URL is a valid resource.
-        var resource = this.resourceForURL(url);
-        console.assert(resource instanceof WebInspector.Resource);
-        if (!(resource instanceof WebInspector.Resource))
-            return null;
-
-        this._disassociateWithResource(resource);
-
-        return resource;
-    },
-
-    removeAllResources: function()
-    {
-        if (!this._resources.length)
-            return;
-
-        for (var i = 0; i < this._resources.length; ++i)
-            this._disassociateWithResource(this._resources[i], true);
-
-        this._resources = [];
-        this._resourceURLMap = {};
-        this._resourcesTypeMap = {};
-    },
-
-    // Private
-
-    _associateWithResource: function(resource)
-    {
-        this._resources.push(resource);
-        this._resourceURLMap[resource.url] = resource;
-
-        if (!this._resourcesTypeMap[resource.type])
-            this._resourcesTypeMap[resource.type] = [];
-        this._resourcesTypeMap[resource.type].push(resource);
-
-        resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
-        resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
-    },
-
-    _disassociateWithResource: function(resource, skipRemoval)
-    {
-        if (skipRemoval) {
-            this._resources.remove(resource);
-            if (this._resourcesTypeMap[resource.type])
-                this._resourcesTypeMap[resource.type].remove(resource);
-            delete this._resourceURLMap[resource.url];
-        }
-
-        resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._resourceURLDidChange, this);
-        resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
-    },
-
-    _resourceURLDidChange: function(event)
-    {
-        var resource = event.target;
-        console.assert(resource instanceof WebInspector.Resource);
-        if (!(resource instanceof WebInspector.Resource))
-            return;
-
-        var oldURL = event.data.oldURL;
-        console.assert(oldURL);
-        if (!oldURL)
-            return;
-
-        this._resourceURLMap[resource.url] = resource;
-        delete this._resourceURLMap[oldURL];
-    },
-
-    _resourceTypeDidChange: function(event)
-    {
-        var resource = event.target;
-        console.assert(resource instanceof WebInspector.Resource);
-        if (!(resource instanceof WebInspector.Resource))
-            return;
-
-        var oldType = event.data.oldType;
-        console.assert(oldType);
-        if (!oldType)
-            return;
-
-        if (!this._resourcesTypeMap[resource.type])
-            this._resourcesTypeMap[resource.type] = [];
-        this._resourcesTypeMap[resource.type].push(resource);
-
-        if (this._resourcesTypeMap[oldType])
-            this._resourcesTypeMap[oldType].remove(resource);
-    }
-};
-
-WebInspector.ResourceCollection.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceContentView.js b/Source/WebInspectorUI/UserInterface/ResourceContentView.js
deleted file mode 100644
index d14405012..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceContentView.js
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceContentView = function(resource, styleClassName)
-{
-    console.assert(resource);
-    console.assert(styleClassName);
-
-    WebInspector.ContentView.call(this, resource);
-
-    this._resource = resource;
-
-    this.element.classList.add(WebInspector.ResourceContentView.StyleClassName);
-    this.element.classList.add(styleClassName);
-
-    // Append a spinner while waiting for contentAvailable. The subclasses are responsible for removing
-    // the spinner before showing the resource content.
-    var spinner = new WebInspector.IndeterminateProgressSpinner;
-    this.element.appendChild(spinner.element);
-
-    this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
-
-    // Request content last so the spinner will always be removed in case the content is immediately available.
-    resource.requestContent(this._contentAvailable.bind(this));
-
-    if (!this.managesOwnIssues) {
-        WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
-
-        var issues = WebInspector.issueManager.issuesForSourceCode(resource);
-        for (var i = 0; i < issues.length; ++i)
-            this.addIssue(issues[i]);
-    }
-};
-
-WebInspector.ResourceContentView.StyleClassName = "resource";
-
-WebInspector.ResourceContentView.prototype = {
-    constructor: WebInspector.ResourceContentView,
-
-    // Public
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    contentAvailable: function(content, base64Encoded)
-    {
-        // Implemented by subclasses.
-    },
-
-    addIssue: function(issue)
-    {
-        // This generically shows only the last issue, subclasses can override for better handling.
-        this.element.removeChildren();
-        this.element.appendChild(WebInspector.createMessageTextView(issue.text, issue.level === WebInspector.IssueMessage.Level.Error));
-    },
-
-    closed: function()
-    {
-        this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
-
-        if (!this.managesOwnIssues)
-            WebInspector.issueManager.removeEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
-    },
-
-    // Private
-
-    _contentAvailable: function(resource, content, base64Encoded)
-    {
-        // Check for failed loads.
-        if (this.resource.failed) {
-            // Don't show an error message if there is already an error message showing (like one added by addIssue.)
-            if (this.element.querySelector(".message-text-view.error"))
-                return;
-
-            this.element.removeChildren();
-            this.element.appendChild(WebInspector.createMessageTextView(WebInspector.UIString("An error occurred trying to load the resource."), true));
-            return;
-        }
-
-        // Content is ready to show, call the public method now.
-        this.contentAvailable(content, base64Encoded);
-    },
-
-    _issueWasAdded: function(event)
-    {
-        console.assert(!this.managesOwnIssues);
-
-        var issue = event.data.issue;
-
-        // FIXME: Check more than just the issue URL (the document could have multiple resources with the same URL).
-        if (issue.url !== this.resource.url)
-            return;
-
-        this.addIssue(issue);
-    },
-
-    _mouseWasClicked: function(event)
-    {
-        WebInspector.handlePossibleLinkClick(event, this.resource.parentFrame);
-    }
-};
-
-WebInspector.ResourceContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ResourceDetailsSidebarPanel.js
deleted file mode 100644
index f42c2665d..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceDetailsSidebarPanel.js
+++ /dev/null
@@ -1,483 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceDetailsSidebarPanel = function() {
-    WebInspector.DetailsSidebarPanel.call(this, "resource-details", WebInspector.UIString("Resource"), WebInspector.UIString("Resource"), "Images/NavigationItemFile.pdf", "1");
-
-    this.element.classList.add(WebInspector.ResourceDetailsSidebarPanel.StyleClassName);
-
-    this._resource = null;
-
-    this._typeMIMETypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("MIME Type"));
-    this._typeResourceTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Resource Type"));
-
-    this._typeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Type"));
-    this._typeSection.groups = [new WebInspector.DetailsSectionGroup([this._typeMIMETypeRow, this._typeResourceTypeRow])];
-
-    this._locationFullURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Full URL"));
-    this._locationSchemeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Scheme"));
-    this._locationHostRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Host"));
-    this._locationPortRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Port"));
-    this._locationPathRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Path"));
-    this._locationQueryStringRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Query String"));
-    this._locationFragmentRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Fragment"));
-    this._locationFilenameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Filename"));
-
-    var firstGroup = [this._locationFullURLRow];
-    var secondGroup = [this._locationSchemeRow, this._locationHostRow, this._locationPortRow, this._locationPathRow,
-        this._locationQueryStringRow, this._locationFragmentRow, this._locationFilenameRow];
-
-    this._fullURLGroup = new WebInspector.DetailsSectionGroup(firstGroup);
-    this._locationURLComponentsGroup = new WebInspector.DetailsSectionGroup(secondGroup);
-
-    this._locationSection = new WebInspector.DetailsSection("resource-location", WebInspector.UIString("Location"), [this._fullURLGroup, this._locationURLComponentsGroup]);
-
-    this._queryParametersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Query Parameters"));
-    this._queryParametersSection = new WebInspector.DetailsSection("resource-query-parameters", WebInspector.UIString("Query Parameters"));
-    this._queryParametersSection.groups = [new WebInspector.DetailsSectionGroup([this._queryParametersRow])];
-
-    this._requestDataSection = new WebInspector.DetailsSection("resource-request-data", WebInspector.UIString("Request Data"));
-
-    this._requestMethodRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Method"));
-    this._cachedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Cached"));
-
-    this._statusTextRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Status"));
-    this._statusCodeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Code"));
-
-    this._encodedSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Encoded"));
-    this._decodedSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Decoded"));
-    this._transferSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Transfered"));
-
-    this._compressedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Compressed"));
-    this._compressionRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Compression"));
-
-    var requestGroup = new WebInspector.DetailsSectionGroup([this._requestMethodRow, this._cachedRow]);
-    var statusGroup = new WebInspector.DetailsSectionGroup([this._statusTextRow, this._statusCodeRow]);
-    var sizeGroup = new WebInspector.DetailsSectionGroup([this._encodedSizeRow, this._decodedSizeRow, this._transferSizeRow]);
-    var compressionGroup = new WebInspector.DetailsSectionGroup([this._compressedRow, this._compressionRow]);
-
-    this._requestAndResponseSection = new WebInspector.DetailsSection("resource-request-response", WebInspector.UIString("Request & Response"), [requestGroup, statusGroup, sizeGroup, compressionGroup]);
-
-    this._requestHeadersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Request Headers"));
-    this._requestHeadersSection = new WebInspector.DetailsSection("resource-request-headers", WebInspector.UIString("Request Headers"));
-    this._requestHeadersSection.groups = [new WebInspector.DetailsSectionGroup([this._requestHeadersRow])];
-
-    this._responseHeadersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Response Headers"));
-    this._responseHeadersSection = new WebInspector.DetailsSection("resource-response-headers", WebInspector.UIString("Response Headers"));
-    this._responseHeadersSection.groups = [new WebInspector.DetailsSectionGroup([this._responseHeadersRow])];
-
-    // Rows for the "Image Size" section.
-    this._imageWidthRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width"));
-    this._imageHeightRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height"));
-
-    // "Image Size" section where we display intrinsic metrics for image resources.
-    this._imageSizeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Image Size"));
-    this._imageSizeSection.groups = [new WebInspector.DetailsSectionGroup([this._imageWidthRow, this._imageHeightRow])];
-
-    this.element.appendChild(this._typeSection.element);
-    this.element.appendChild(this._locationSection.element);
-    this.element.appendChild(this._requestAndResponseSection.element);
-    this.element.appendChild(this._requestHeadersSection.element);
-    this.element.appendChild(this._responseHeadersSection.element);
-};
-
-WebInspector.ResourceDetailsSidebarPanel.StyleClassName = "resource";
-
-WebInspector.ResourceDetailsSidebarPanel.prototype = {
-    constructor: WebInspector.ResourceDetailsSidebarPanel,
-
-    // Public
-
-    inspect: function(objects)
-    {
-        // Convert to a single item array if needed.
-        if (!(objects instanceof Array))
-            objects = [objects];
-
-        var resourceToInspect = null;
-
-        // Iterate over the objects to find a WebInspector.Resource to inspect.
-        for (var i = 0; i < objects.length; ++i) {
-            if (objects[i] instanceof WebInspector.Resource) {
-                resourceToInspect = objects[i];
-                break;
-            }
-
-            if (objects[i] instanceof WebInspector.Frame) {
-                resourceToInspect = objects[i].mainResource;
-                break;
-            }
-        }
-
-        this.resource = resourceToInspect;
-
-        return !!this._resource;
-    },
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    set resource(resource)
-    {
-        if (resource === this._resource)
-            return;
-
-        if (this._resource) {
-            this._resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._refreshURL, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.MIMETypeDidChange, this._refreshMIMEType, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._refreshResourceType, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.RequestHeadersDidChange, this._refreshRequestHeaders, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.ResponseReceived, this._refreshRequestAndResponse, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.CacheStatusDidChange, this._refreshRequestAndResponse, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.SizeDidChange, this._refreshDecodedSize, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._refreshTransferSize, this);
-        }
-
-        this._resource = resource;
-
-        if (this._resource) {
-            this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._refreshURL, this);
-            this._resource.addEventListener(WebInspector.Resource.Event.MIMETypeDidChange, this._refreshMIMEType, this);
-            this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._refreshResourceType, this);
-            this._resource.addEventListener(WebInspector.Resource.Event.RequestHeadersDidChange, this._refreshRequestHeaders, this);
-            this._resource.addEventListener(WebInspector.Resource.Event.ResponseReceived, this._refreshRequestAndResponse, this);
-            this._resource.addEventListener(WebInspector.Resource.Event.CacheStatusDidChange, this._refreshRequestAndResponse, this);
-            this._resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._refreshDecodedSize, this);
-            this._resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._refreshTransferSize, this);
-        }
-
-        this.needsRefresh();
-    },
-
-    refresh: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._refreshURL();
-        this._refreshMIMEType();
-        this._refreshResourceType();
-        this._refreshRequestAndResponse();
-        this._refreshDecodedSize();
-        this._refreshTransferSize();
-        this._refreshRequestHeaders();
-        this._refreshImageSizeSection();
-        this._refreshRequestDataSection();
-    },
-
-    // Private
-
-    _refreshURL: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._locationFullURLRow.value = this._resource.url.insertWordBreakCharacters();
-
-        var urlComponents = this._resource.urlComponents;
-        if (urlComponents.scheme) {
-            this._locationSection.groups = [this._fullURLGroup, this._locationURLComponentsGroup];
-
-            this._locationSchemeRow.value = urlComponents.scheme ? urlComponents.scheme : null;
-            this._locationHostRow.value = urlComponents.host ? urlComponents.host : null;
-            this._locationPortRow.value = urlComponents.port ? urlComponents.port : null;
-            this._locationPathRow.value = urlComponents.path ? urlComponents.path.insertWordBreakCharacters() : null;
-            this._locationQueryStringRow.value = urlComponents.queryString ? urlComponents.queryString.insertWordBreakCharacters() : null;
-            this._locationFragmentRow.value = urlComponents.fragment ? urlComponents.fragment.insertWordBreakCharacters() : null;
-            this._locationFilenameRow.value = urlComponents.lastPathComponent ? urlComponents.lastPathComponent.insertWordBreakCharacters() : null;
-        } else
-            this._locationSection.groups = [this._fullURLGroup];
-
-        if (urlComponents.queryString) {
-            // Ensure the "Query Parameters" section is displayed, right after the "Request & Response" section.
-            this.element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
-
-            this._queryParametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(urlComponents.queryString, true));
-        } else {
-            // Hide the "Query Parameters" section if we don't have a query string.
-            var queryParametersSectionElement = this._queryParametersSection.element;
-            if (queryParametersSectionElement.parentNode)
-                queryParametersSectionElement.parentNode.removeChild(queryParametersSectionElement);
-        }
-    },
-
-    _refreshResourceType: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._typeResourceTypeRow.value = WebInspector.Resource.Type.displayName(this._resource.type);
-    },
-
-    _refreshMIMEType: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._typeMIMETypeRow.value = this._resource.mimeType;
-    },
-
-    _refreshRequestAndResponse: function()
-    {
-        var resource = this._resource;
-        if (!resource)
-            return;
-
-        // If we don't have a value, we set an em-dash to keep the row from hiding.
-        // This keeps the UI from shifting around as data comes in.
-        const emDash = "\u2014";
-
-        this._requestMethodRow.value = resource.requestMethod || emDash;
-
-        this._cachedRow.value = resource.cached ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
-
-        this._statusCodeRow.value = resource.statusCode || emDash;
-        this._statusTextRow.value = resource.statusText || emDash;
-
-        this._refreshResponseHeaders();
-        this._refreshCompressed();
-    },
-
-    _valueForSize: function(size)
-    {
-        // If we don't have a value, we set an em-dash to keep the row from hiding.
-        // This keeps the UI from shifting around as data comes in.
-        const emDash = "\u2014";
-        return size > 0 ? Number.bytesToString(size) : emDash;
-    },
-
-    _refreshCompressed: function()
-    {
-        this._compressedRow.value = this._resource.compressed ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
-        this._compressionRow.value = this._resource.compressed ? WebInspector.UIString("%.2f\u00d7").format(this._resource.size / this._resource.encodedSize) : null;
-    },
-
-    _refreshDecodedSize: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._encodedSizeRow.value = this._valueForSize(this._resource.encodedSize);
-        this._decodedSizeRow.value = this._valueForSize(this._resource.size);
-
-        this._refreshCompressed();
-    },
-
-    _refreshTransferSize: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._encodedSizeRow.value = this._valueForSize(this._resource.encodedSize);
-        this._transferSizeRow.value = this._valueForSize(this._resource.transferSize);
-
-        this._refreshCompressed();
-    },
-
-    _refreshRequestHeaders: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._requestHeadersRow.dataGrid = this._createNameValueDataGrid(this._resource.requestHeaders);
-    },
-
-    _refreshResponseHeaders: function()
-    {
-        if (!this._resource)
-            return;
-
-        this._responseHeadersRow.dataGrid = this._createNameValueDataGrid(this._resource.responseHeaders);
-    },
-
-    _createNameValueDataGrid: function(data)
-    {
-        if (!data || data instanceof Array ? !data.length : isEmptyObject(data))
-            return null;
-
-        var dataGrid = new WebInspector.DataGrid({
-            name: {title: WebInspector.UIString("Name"), width: "30%", sortable: true},
-            value: {title: WebInspector.UIString("Value"), sortable: true}
-        });
-
-        function addDataGridNode(nodeValue)
-        {
-            console.assert(typeof nodeValue.name === "string");
-            console.assert(typeof nodeValue.value === "string");
-
-            var node = new WebInspector.DataGridNode({name: nodeValue.name, value: nodeValue.value}, false);
-            node.selectable = true;
-            dataGrid.appendChild(node);
-        }
-
-        if (data instanceof Array) {
-            for (var i = 0; i < data.length; ++i)
-                addDataGridNode(data[i]);
-        } else {
-            for (var name in data)
-                addDataGridNode({name: name, value: data[name] || ""});
-        }
-
-        dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, sortDataGrid, this);
-
-        function sortDataGrid()
-        {
-            var nodes = dataGrid.children.slice();
-            var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
-            var sortDirection = dataGrid.sortOrder === "ascending" ? 1 : -1;
-
-            function comparator(a, b)
-            {
-                var item1 = a.data[sortColumnIdentifier];
-                var item2 = b.data[sortColumnIdentifier];
-                return sortDirection * item1.localeCompare(item2);
-            }
-
-            nodes.sort(comparator);
-
-            dataGrid.removeChildren();
-            for (var i = 0; i < nodes.length; i++)
-                dataGrid.appendChild(nodes[i]);
-        }
-
-        return dataGrid;
-    },
-
-    _refreshImageSizeSection: function()
-    {
-        var resource = this._resource;
-
-        if (!resource)
-            return;
-        
-        // Hide the section if we're not dealing with an image or if the load failed.
-        if (resource.type !== WebInspector.Resource.Type.Image || resource.failed) {
-            var imageSectionElement = this._imageSizeSection.element;
-            if (imageSectionElement.parentNode)
-                this.element.removeChild(imageSectionElement);
-            return;
-        }
-        
-        // Ensure the section is displayed, right before the "Location" section.
-        this.element.insertBefore(this._imageSizeSection.element, this._locationSection.element);
-        
-        // Get the metrics for this resource and fill in the metrics rows with that information.
-        resource.getImageSize(function(size) {
-            this._imageWidthRow.value = WebInspector.UIString("%fpx").format(size.width);
-            this._imageHeightRow.value = WebInspector.UIString("%fpx").format(size.height);
-        }.bind(this));
-    },
-
-    _goToRequestDataClicked: function()
-    {
-        WebInspector.resourceSidebarPanel.showResourceRequest(this._resource);
-    },
-
-    _refreshRequestDataSection: function()
-    {
-        var resource = this._resource;
-
-        if (!resource)
-            return;
-
-        // Hide the section if we're not dealing with a request with data.
-        var requestData = resource.requestData;
-        if (!requestData) {
-            this._requestDataSection.element.remove();
-            return;
-        }
-
-        // Ensure the section is displayed, right before the "Request Headers" section.
-        this.element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
-
-        var requestDataContentType = resource.requestDataContentType || "";
-        if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i)) {
-            // Simple form data that should be parsable like a query string.
-            var parametersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Parameters"));
-            parametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(requestData, true));
-
-            this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup([parametersRow])];
-            return;
-        }
-
-        // Not simple form data, so we can really only show the size and type here.
-        // FIXME: Add a go-to arrow here to show the data in the content browser.
-
-        var typeParts = requestDataContentType.split(/\s*;\s*/);
-        console.assert(typeParts.length >= 1);
-
-        var mimeType = typeParts[0];
-        var boundary = null;
-        var encoding = null;
-
-        for (var i = 1; i < typeParts.length; ++i) {
-            var subparts = typeParts[i].split(/\s*=\s*/);
-            if (subparts.length !== 2)
-                continue;
-
-            if (subparts[0].toLowerCase() === "boundary")
-                boundary = subparts[1];
-            else if (subparts[0].toLowerCase() === "charset")
-                encoding = subparts[1].replace("^\"|\"$", ""); // Trim quotes.
-        }
-
-        var rows = [];
-
-        var mimeTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("MIME Type"));
-        mimeTypeRow.value = mimeType;
-        rows.push(mimeTypeRow);
-
-        if (boundary) {
-            var boundryRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Boundary"));
-            boundryRow.value = boundary;
-            rows.push(boundryRow);
-        }
-
-        if (encoding) {
-            var encodingRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Encoding"));
-            encodingRow.value = encoding;
-            rows.push(encodingRow);
-        }
-
-        var sizeValue = Number.bytesToString(requestData.length);
-
-        var dataValue = document.createDocumentFragment();
-
-        dataValue.appendChild(document.createTextNode(sizeValue));
-
-        var goToButton = dataValue.appendChild(WebInspector.createGoToArrowButton());
-        goToButton.addEventListener("click", this._goToRequestDataClicked.bind(this));
-
-        var dataRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Data"));
-        dataRow.value = dataValue;
-        rows.push(dataRow);
-
-        this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup(rows)];
-    }
-};
-
-WebInspector.ResourceDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceIcons.css b/Source/WebInspectorUI/UserInterface/ResourceIcons.css
deleted file mode 100644
index 584dc6162..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceIcons.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.resource-icon .icon {
-    content: -webkit-image-set(url(Images/DocumentGeneric.png) 1x, url(Images/DocumentGeneric@2x.png) 2x);
-}
-
-.resource-icon.resource-type-document .icon {
-    content: -webkit-image-set(url(Images/DocumentMarkup.png) 1x, url(Images/DocumentMarkup@2x.png) 2x);
-}
-
-.resource-icon.resource-type-image .icon {
-    content: -webkit-image-set(url(Images/DocumentImage.png) 1x, url(Images/DocumentImage@2x.png) 2x);
-}
-
-.resource-icon.resource-type-font .icon {
-    content: -webkit-image-set(url(Images/DocumentFont.png) 1x, url(Images/DocumentFont@2x.png) 2x);
-}
-
-.resource-icon.resource-type-stylesheet .icon {
-    content: -webkit-image-set(url(Images/DocumentCSS.png) 1x, url(Images/DocumentCSS@2x.png) 2x);
-}
-
-.resource-icon.resource-type-script .icon {
-    content: -webkit-image-set(url(Images/DocumentJS.png) 1x, url(Images/DocumentJS@2x.png) 2x);
-}
-
-.anonymous-script-icon .icon {
-    content: -webkit-image-set(url(Images/ClippingJS.png) 1x, url(Images/ClippingJS@2x.png) 2x);
-}
-
-.source-map-resource.resource-icon .icon {
-    content: -webkit-image-set(url(Images/ClippingGeneric.png) 1x, url(Images/ClippingGeneric@2x.png) 2x);
-}
-
-.source-map-resource.resource-icon.resource-type-stylesheet .icon {
-    content: -webkit-image-set(url(Images/ClippingCSS.png) 1x, url(Images/ClippingCSS@2x.png) 2x);
-}
-
-.source-map-resource.resource-icon.resource-type-script .icon {
-    content: -webkit-image-set(url(Images/ClippingJS.png) 1x, url(Images/ClippingJS@2x.png) 2x);
-}
diff --git a/Source/WebInspectorUI/UserInterface/ResourceSearchMatchObject.js b/Source/WebInspectorUI/UserInterface/ResourceSearchMatchObject.js
deleted file mode 100644
index e58dbd582..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceSearchMatchObject.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceSearchMatchObject = function(resource, lineText, searchTerm, textRange)
-{
-    console.assert(resource instanceof WebInspector.Resource);
-
-    WebInspector.Object.call(this);
-
-    this._resource = resource;
-    this._lineText = lineText;
-    this._searchTerm = searchTerm;
-    this._sourceCodeTextRange = resource.createSourceCodeTextRange(textRange);
-};
-
-WebInspector.ResourceSearchMatchObject.ResourceMatchIconStyleClassName = "resource-match-icon";
-
-WebInspector.ResourceSearchMatchObject.prototype = {
-    constructor: WebInspector.ResourceSearchMatchObject,
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    get title()
-    {
-        return this._lineText;
-    },
-
-    get className()
-    {
-        return WebInspector.ResourceSearchMatchObject.ResourceMatchIconStyleClassName;
-    },
-
-    get searchTerm()
-    {
-        return this._searchTerm;
-    },
-
-    get sourceCodeTextRange()
-    {
-        return this._sourceCodeTextRange;
-    }
-};
-
-WebInspector.ResourceSearchMatchObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.css b/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.css
deleted file mode 100644
index 948071dcd..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar > .panel.resource > .content,
-.sidebar > .panel.resource > .empty-content-placeholder {
-    top: 21px;
-}
-
-.sidebar > .panel.resource > .search-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-
-    display: -webkit-flex;
-
-    box-shadow: inset rgba(255, 255, 255, 0.2) 0 1px 0;
-
-    height: 21px;
-
-    white-space: nowrap;
-    overflow: hidden;
-}
-
-.sidebar > .panel.resource > .search-bar > input[type="search"] {
-    display: -webkit-flex;
-    -webkit-flex: 1;
-
-    margin: 1px 6px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js
deleted file mode 100644
index b07e9d3be..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceSidebarPanel.js
+++ /dev/null
@@ -1,981 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceSidebarPanel = function() {
-    WebInspector.NavigationSidebarPanel.call(this, "resource", WebInspector.UIString("Resources"), "Images/NavigationItemStorage.pdf", "1", true, false, true);
-
-    var searchElement = document.createElement("div");
-    searchElement.classList.add("search-bar");
-    this.element.appendChild(searchElement);
-
-    this._inputElement = document.createElement("input");
-    this._inputElement.type = "search";
-    this._inputElement.spellcheck = false;
-    this._inputElement.addEventListener("search", this._searchFieldChanged.bind(this));
-    this._inputElement.addEventListener("input", this._searchFieldInput.bind(this));
-    this._inputElement.setAttribute("results", 5);
-    this._inputElement.setAttribute("autosave", "inspector-search");
-    this._inputElement.setAttribute("placeholder", WebInspector.UIString("Search Resource Content"));
-    searchElement.appendChild(this._inputElement);
-
-    this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
-
-    this._waitingForInitialMainFrame = true;
-    this._lastSearchedPageSetting = new WebInspector.Setting("last-searched-page", null);
-
-    this._searchQuerySetting = new WebInspector.Setting("search-sidebar-query", "");
-    this._inputElement.value = this._searchQuerySetting.value;
-
-    this._searchKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command | WebInspector.KeyboardShortcut.Modifier.Shift, "F", this._focusSearchField.bind(this));
-
-    this._localStorageRootTreeElement = null;
-    this._sessionStorageRootTreeElement = null;
-
-    this._databaseRootTreeElement = null;
-    this._databaseHostTreeElementMap = {};
-
-    this._cookieStorageRootTreeElement = null;
-
-    this._applicationCacheRootTreeElement = null;
-    this._applicationCacheURLTreeElementMap = {};
-
-    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.CookieStorageObjectWasAdded, this._cookieStorageObjectWasAdded, this);
-    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasAdded, this._domStorageObjectWasAdded, this);
-    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, this._domStorageObjectWasInspected, this);
-    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasAdded, this._databaseWasAdded, this);
-    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasInspected, this._databaseWasInspected, this);
-    WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.Cleared, this._storageCleared, this);
-
-    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestAdded, this._frameManifestAdded, this);
-    WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestRemoved, this._frameManifestRemoved, this);
-
-    WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
-    WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.FrameWasAdded, this._frameWasAdded, this);
-
-    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
-
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptWasAdded, this);
-    WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptsCleared, this._scriptsCleared, this);
-
-    this._resourcesContentTreeOutline = this.contentTreeOutline;
-    this._searchContentTreeOutline = this.createContentTreeOutline();
-
-    this._resourcesContentTreeOutline.onselect = this._treeElementSelected.bind(this);
-    this._searchContentTreeOutline.onselect = this._treeElementSelected.bind(this);
-
-    this._resourcesContentTreeOutline.includeSourceMapResourceChildren = true;
-};
-
-WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType = "resource";
-WebInspector.ResourceSidebarPanel.CookieStorageContentViewCookieType = "cookie-storage";
-WebInspector.ResourceSidebarPanel.DatabaseContentViewCookieType = "database";
-WebInspector.ResourceSidebarPanel.DatabaseTableContentViewCookieType = "database-table";
-WebInspector.ResourceSidebarPanel.DOMStorageContentViewCookieType = "dom-storage";
-WebInspector.ResourceSidebarPanel.ApplicationCacheContentViewCookieType = "application-cache";
-
-WebInspector.ResourceSidebarPanel.prototype = {
-    constructor: WebInspector.ResourceSidebarPanel,
-
-    // Public
-
-    get contentTreeOutlineToAutoPrune()
-    {
-        return this._searchContentTreeOutline;
-    },
-
-    cookieForContentView: function(contentView)
-    {
-        console.assert(contentView instanceof WebInspector.FrameContentView || contentView instanceof WebInspector.ResourceClusterContentView || contentView instanceof WebInspector.ScriptContentView || contentView instanceof WebInspector.CookieStorageContentView || contentView instanceof WebInspector.DOMStorageContentView || contentView instanceof WebInspector.DatabaseTableContentView || contentView instanceof WebInspector.DatabaseContentView || contentView instanceof WebInspector.ApplicationCacheFrameContentView);
-
-        var representedObject = contentView.representedObject;
-
-        // The main frame does not need a URL, an empty cookie is enough.
-        if (representedObject instanceof WebInspector.Frame && representedObject.isMainFrame())
-            return {type: WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType};
-
-        // If it has a URL, return a cookie with the frame/resource/script URL represented by the content view.
-        if (representedObject.url) {
-            console.assert(representedObject instanceof WebInspector.Frame || representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Script);
-            return {type: WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType, url: contentView.representedObject.url};
-        }
-
-        var cookie = {};
-
-        if (representedObject instanceof WebInspector.CookieStorageObject) {
-            cookie.type = WebInspector.ResourceSidebarPanel.CookieStorageContentViewCookieType;
-            cookie.host = representedObject.host;
-        } else if (representedObject instanceof WebInspector.DatabaseObject) {
-            cookie.type = WebInspector.ResourceSidebarPanel.DatabaseContentViewCookieType;
-            cookie.host = representedObject.host;
-            cookie.name = representedObject.name;
-        } else if (representedObject instanceof WebInspector.DatabaseTableObject) {
-            cookie.type = WebInspector.ResourceSidebarPanel.DatabaseTableContentViewCookieType;
-            cookie.host = representedObject.database.host;
-            cookie.database = representedObject.database.name;
-            cookie.name = representedObject.name;
-        } else if (representedObject instanceof WebInspector.DOMStorageObject) {
-            cookie.type = WebInspector.ResourceSidebarPanel.DOMStorageContentViewCookieType;
-            cookie.isLocalStorage = representedObject.isLocalStorage();
-            cookie.host = representedObject.host;
-        } else if (representedObject instanceof WebInspector.ApplicationCacheFrame) {
-            cookie.type = WebInspector.ResourceSidebarPanel.ApplicationCacheContentViewCookieType;
-            cookie.frame = representedObject.frame.url;
-            cookie.manifest = representedObject.manifest.manifestURL;
-        } else if (representedObject instanceof WebInspector.Script) {
-            // If the Script does not have a URL, then there is not much more we can do to make a cookie.
-            // The URL case is handled above, do nothing here to prevent triggering the "Unknown" error below.
-            console.assert(!representedObject.url);
-        } else {
-            console.error("Unknown represented object.");
-        }
-
-        return cookie;
-    },
-
-    showContentViewForCookie: function(contentViewCookie)
-    {
-        if (!contentViewCookie || !contentViewCookie.type)
-            return;
-
-        this._contentViewCookieToShowWhenAvailable = contentViewCookie;
-
-        if (contentViewCookie.type === WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType) {
-            // We can't show anything until we have the main frame in the sidebar. Otherwise the path components in the navigation bar would be missing.
-            if (!this._mainFrameTreeElement) {
-                this._contentViewCookieToShowWhenAvailable = contentViewCookie;
-                return;
-            }
-
-            var representedObject = contentViewCookie.url ? WebInspector.frameResourceManager.resourceForURL(contentViewCookie.url) : WebInspector.frameResourceManager.mainFrame;
-            if (!representedObject)
-                representedObject = WebInspector.frameResourceManager.mainFrame;
-
-            if (!representedObject)
-                return;
-
-            if (representedObject instanceof WebInspector.Resource && representedObject.isMainResource())
-                representedObject = representedObject.parentFrame;
-
-            this.treeElementForRepresentedObject(representedObject).revealAndSelect(true, true);
-
-            return;
-        }
-
-        // It must be a storage cookie.
-
-        function finalizeCookieChecking()
-        {
-            // Walk all the tree elements and match them based on type alone. So if you were looking at cookies
-            // on one site, and later open the inspector on another site, the new site's cookies will show.
-            var currentTreeElement = this.contentTreeOutline.children[0];
-            while (currentTreeElement && !currentTreeElement.root) {
-                if (this._checkStorageTreeElementAgainstPendingContentViewCookie(currentTreeElement, true))
-                    break;
-                currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
-            }
-
-            delete this._contentViewCookieToShowWhenAvailable;
-            delete this._finalizeCookieCheckingTimeout;
-        }
-
-        if (this._finalizeCookieCheckingTimeout)
-            clearTimeout(this._finalizeCookieCheckingTimeout);
-
-        // When the specific storage item wasn't found we want to relax the check to show the first item with the
-        // same type. There is no good time to naturally declare the cookie wasn't found, so we do that on a timeout.
-        this._finalizeCookieCheckingTimeout = setTimeout(finalizeCookieChecking.bind(this), 500);
-    },
-
-    showMainFrameDOMTree: function(nodeToSelect, preventFocusChange)
-    {
-        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(WebInspector.frameResourceManager.mainFrame);
-        contentView.showDOMTree(nodeToSelect, preventFocusChange);
-        WebInspector.contentBrowser.showContentView(contentView);
-    },
-
-    showMainFrameSourceCode: function()
-    {
-        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(WebInspector.frameResourceManager.mainFrame);
-        contentView.showSourceCode();
-        WebInspector.contentBrowser.showContentView(contentView);
-    },
-
-    showSourceCodeForFrame: function(frameIdentifier, revealAndSelectTreeElement)
-    {
-        delete this._frameIdentifierToShowSourceCodeWhenAvailable;
-
-        // We can't show anything until we have the main frame in the sidebar.
-        // Otherwise the path components in the navigation bar would be missing.
-        var frame = WebInspector.frameResourceManager.frameForIdentifier(frameIdentifier);
-        if (!frame || !this._mainFrameTreeElement) {
-            this._frameIdentifierToShowSourceCodeWhenAvailable = frameIdentifier;
-            return;
-        }
-
-        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(frame);
-        console.assert(contentView);
-        if (!contentView)
-            return;
-
-        contentView.showSourceCode();
-        WebInspector.contentBrowser.showContentView(contentView);
-
-        if (revealAndSelectTreeElement)
-            this.treeElementForRepresentedObject(frame).revealAndSelect(true, true, true, true);
-    },
-
-    showSourceCode: function(sourceCode, positionToReveal, textRangeToSelect, forceUnformatted)
-    {
-        var representedObject = sourceCode;
-
-        if (representedObject instanceof WebInspector.Script) {
-            // A script represented by a resource should always show the resource.
-            representedObject = representedObject.resource || representedObject;
-        }
-
-        // A main resource is always represented by its parent frame.
-        if (representedObject instanceof WebInspector.Resource && representedObject.isMainResource())
-            representedObject = representedObject.parentFrame;
-
-        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(representedObject);
-
-        if (contentView instanceof WebInspector.FrameContentView)
-            contentView.showSourceCode(positionToReveal, textRangeToSelect, forceUnformatted);
-        else if (contentView instanceof WebInspector.ResourceClusterContentView)
-            contentView.showResponse(positionToReveal, textRangeToSelect, forceUnformatted);
-        else if (contentView instanceof WebInspector.ScriptContentView)
-            contentView.revealPosition(positionToReveal, textRangeToSelect, forceUnformatted);
-
-        WebInspector.contentBrowser.showContentView(contentView);
-    },
-
-    showSourceCodeLocation: function(sourceCodeLocation)
-    {
-        this.showSourceCode(sourceCodeLocation.displaySourceCode, sourceCodeLocation.displayPosition());
-    },
-
-    showOriginalUnformattedSourceCodeLocation: function(sourceCodeLocation)
-    {
-        this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.position(), undefined, true);
-    },
-
-    showOriginalOrFormattedSourceCodeLocation: function(sourceCodeLocation)
-    {
-        this.showSourceCode(sourceCodeLocation.sourceCode, sourceCodeLocation.formattedPosition());
-    },
-
-    showSourceCodeTextRange: function(sourceCodeTextRange)
-    {
-        var textRangeToSelect = sourceCodeTextRange.displayTextRange;
-        this.showSourceCode(sourceCodeTextRange.displaySourceCode, textRangeToSelect.startPosition(), textRangeToSelect);
-    },
-
-    showOriginalOrFormattedSourceCodeTextRange: function(sourceCodeTextRange)
-    {
-        var textRangeToSelect = sourceCodeTextRange.formattedTextRange;
-        this.showSourceCode(sourceCodeTextRange.sourceCode, textRangeToSelect.startPosition(), textRangeToSelect);
-    },
-
-    showResource: function(resource)
-    {
-        WebInspector.contentBrowser.showContentViewForRepresentedObject(resource.isMainResource() ? resource.parentFrame : resource);
-    },
-
-    showResourceRequest: function(resource)
-    {
-        var contentView = WebInspector.contentBrowser.contentViewForRepresentedObject(resource.isMainResource() ? resource.parentFrame : resource);
-
-        if (contentView instanceof WebInspector.FrameContentView)
-            var resourceContentView = contentView.showResource();
-        else if (contentView instanceof WebInspector.ResourceClusterContentView)
-            var resourceContentView = contentView;
-
-        console.assert(resourceContentView instanceof WebInspector.ResourceClusterContentView);
-        if (!(resourceContentView instanceof WebInspector.ResourceClusterContentView))
-            return;
-
-        resourceContentView.showRequest();
-
-        WebInspector.contentBrowser.showContentView(contentView);
-    },
-
-    treeElementForRepresentedObject: function(representedObject)
-    {
-        // A custom implementation is needed for this since the frames are populated lazily.
-
-        function isAncestor(ancestor, resourceOrFrame)
-        {
-            // SourceMapResources are descendants of another SourceCode object.
-            if (resourceOrFrame instanceof WebInspector.SourceMapResource) {
-                if (resourceOrFrame.sourceMap.originalSourceCode === ancestor)
-                    return true;
-
-                // Not a direct ancestor, so check the ancestors of the parent SourceCode object.
-                resourceOrFrame = resourceOrFrame.sourceMap.originalSourceCode;
-            }
-
-            var currentFrame = resourceOrFrame.parentFrame;
-            while (currentFrame) {
-                if (currentFrame === ancestor)
-                    return true;
-                currentFrame = currentFrame.parentFrame;
-            }
-
-            return false;
-        }
-
-        function getParent(resourceOrFrame)
-        {
-            // SourceMapResources are descendants of another SourceCode object.
-            if (resourceOrFrame instanceof WebInspector.SourceMapResource)
-                return resourceOrFrame.sourceMap.originalSourceCode;
-            return resourceOrFrame.parentFrame;
-        }
-
-        var treeElement = this._resourcesContentTreeOutline.findTreeElement(representedObject, isAncestor, getParent);
-        if (treeElement)
-            return treeElement;
-
-        // Only special case Script objects.
-        if (!(representedObject instanceof WebInspector.Script)) {
-            console.error("Didn't find a TreeElement for a representedObject associated with the ResourceSidebarPanel.");
-            return null;
-        }
-
-        // If the Script has a URL we should have found it earlier.
-        if (representedObject.url) {
-            console.error("Didn't find a ScriptTreeElement for a Script with a URL.");
-            return null;
-        }
-
-        // Since the Script does not have a URL we consider it an 'anonymous' script. These scripts happen from calls to
-        // window.eval() or browser features like Auto Fill and Reader. They are not normally added to the sidebar, but since
-        // we have a ScriptContentView asking for the tree element we will make a ScriptTreeElement on demand and add it.
-
-        if (!this._anonymousScriptsFolderTreeElement)
-            this._anonymousScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Anonymous Scripts"));
-
-        if (!this._anonymousScriptsFolderTreeElement.parent) {
-            var index = insertionIndexForObjectInListSortedByFunction(this._anonymousScriptsFolderTreeElement, this._resourcesContentTreeOutline.children, this._compareTreeElements);
-            this._resourcesContentTreeOutline.insertChild(this._anonymousScriptsFolderTreeElement, index);
-        }
-
-        var scriptTreeElement = new WebInspector.ScriptTreeElement(representedObject);
-        this._anonymousScriptsFolderTreeElement.appendChild(scriptTreeElement);
-
-        return scriptTreeElement;
-    },
-
-    performSearch: function(searchTerm)
-    {
-        // Before performing a new search, clear the old search.
-        this._searchContentTreeOutline.removeChildren();
-
-        this._inputElement.value = searchTerm;
-        this._searchQuerySetting.value = searchTerm;
-        this._lastSearchedPageSetting.value = searchTerm && WebInspector.frameResourceManager.mainFrame ? WebInspector.frameResourceManager.mainFrame.url.hash : null;
-
-        this.hideEmptyContentPlaceholder();
-
-        searchTerm = searchTerm.trim();
-        if (!searchTerm.length) {
-            this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
-            this.contentTreeOutline = this._resourcesContentTreeOutline;
-            return;
-        }
-
-        this.filterBar.placeholder = WebInspector.UIString("Filter Search Results");
-        this.contentTreeOutline = this._searchContentTreeOutline;
-
-        var updateEmptyContentPlaceholderTimeout = null;
-
-        function updateEmptyContentPlaceholderSoon()
-        {
-            if (updateEmptyContentPlaceholderTimeout)
-                return;
-            updateEmptyContentPlaceholderTimeout = setTimeout(updateEmptyContentPlaceholder.bind(this), 100);
-        }
-
-        function updateEmptyContentPlaceholder()
-        {
-            if (updateEmptyContentPlaceholderTimeout) {
-                clearTimeout(updateEmptyContentPlaceholderTimeout);
-                updateEmptyContentPlaceholderTimeout = null;
-            }
-
-            this.updateEmptyContentPlaceholder(WebInspector.UIString("No Search Results"));
-        }
-
-        function resourcesCallback(error, result)
-        {
-            updateEmptyContentPlaceholderSoon.call(this);
-
-            if (error)
-                return;
-
-            for (var i = 0; i < result.length; ++i) {
-                var searchResult = result[i];
-                if (!searchResult.url || !searchResult.frameId)
-                    continue;
-
-                function resourceCallback(url, error, resourceMatches)
-                {
-                    updateEmptyContentPlaceholderSoon.call(this);
-
-                    if (error || !resourceMatches || !resourceMatches.length)
-                        return;
-
-                    var frame = WebInspector.frameResourceManager.frameForIdentifier(searchResult.frameId);
-                    if (!frame)
-                        return;
-
-                    var resource = frame.url === url ? frame.mainResource : frame.resourceForURL(url);
-                    if (!resource)
-                        return;
-
-                    var resourceTreeElement = this._searchTreeElementForResource(resource);
-
-                    for (var i = 0; i < resourceMatches.length; ++i) {
-                        var match = resourceMatches[i];
-
-                        var lineMatch;
-                        var searchRegex = new RegExp(searchTerm.escapeForRegExp(), "gi");
-                        while ((searchRegex.lastIndex < match.lineContent.length) && (lineMatch = searchRegex.exec(match.lineContent))) {
-                            var matchObject = new WebInspector.ResourceSearchMatchObject(resource, match.lineContent, searchTerm, new WebInspector.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, searchRegex.lastIndex));
-                            var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
-                            resourceTreeElement.appendChild(matchTreeElement);
-                        }
-                    }
-
-                    updateEmptyContentPlaceholder.call(this);
-                }
-
-                PageAgent.searchInResource(searchResult.frameId, searchResult.url, searchTerm, false, false, resourceCallback.bind(this, searchResult.url));
-            }
-        }
-
-        function domCallback(error, searchId, resultsCount)
-        {
-            updateEmptyContentPlaceholderSoon.call(this);
-
-            if (error || !resultsCount)
-                return;
-
-            this._domSearchIdentifier = searchId;
-
-            function domSearchResults(error, nodeIds)
-            {
-                updateEmptyContentPlaceholderSoon.call(this);
-
-                if (error)
-                    return;
-
-                for (var i = 0; i < nodeIds.length; ++i) {
-                    // If someone started a new search, then return early and stop showing seach results from the old query.
-                    if (this._domSearchIdentifier !== searchId)
-                        return;
-
-                    var domNode = WebInspector.domTreeManager.nodeForId(nodeIds[i]);
-                    if (!domNode || !domNode.ownerDocument)
-                        continue;
-
-                    // We do not display the document node when the search query is "/". We don't have anything to display in the content view for it.
-                    if (domNode.nodeType() === Node.DOCUMENT_NODE)
-                        continue;
-
-                    // FIXME: Use this should use a frame to do resourceForURL, but DOMAgent does not provide a frameId.
-                    var resource = WebInspector.frameResourceManager.resourceForURL(domNode.ownerDocument.documentURL);
-                    if (!resource)
-                        continue;
-
-                    var resourceTreeElement = this._searchTreeElementForResource(resource);
-
-                    var domNodeTitle = WebInspector.DOMSearchMatchObject.titleForDOMNode(domNode);
-                    var searchRegex = new RegExp(searchTerm.escapeForRegExp(), "gi");
-
-                    // Textual matches.
-                    var lineMatch;
-                    var didFindTextualMatch = false;
-                    while ((searchRegex.lastIndex < domNodeTitle.length) && (lineMatch = searchRegex.exec(domNodeTitle))) {
-                        var matchObject = new WebInspector.DOMSearchMatchObject(resource, domNode, domNodeTitle, searchTerm, new WebInspector.TextRange(0, lineMatch.index, 0, searchRegex.lastIndex));
-                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
-                        resourceTreeElement.appendChild(matchTreeElement);
-                        didFindTextualMatch = true;
-                    }
-
-                    // Non-textual matches are CSS Selector or XPath matches. In such cases, display the node entirely highlighted.
-                    if (!didFindTextualMatch) {
-                        var matchObject = new WebInspector.DOMSearchMatchObject(resource, domNode, domNodeTitle, domNodeTitle, new WebInspector.TextRange(0, 0, 0, domNodeTitle.length));
-                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
-                        resourceTreeElement.appendChild(matchTreeElement);
-                    }
-
-                    updateEmptyContentPlaceholder.call(this);
-                }
-            }
-
-            DOMAgent.getSearchResults(searchId, 0, resultsCount, domSearchResults.bind(this));
-        }
-
-        WebInspector.domTreeManager.requestDocument();
-
-        // FIXME: Should we be searching for regexes or just plain text?
-        PageAgent.searchInResources(searchTerm, false, false, resourcesCallback.bind(this));
-
-        if ("_domSearchIdentifier" in this) {
-            DOMAgent.discardSearchResults(this._domSearchIdentifier);
-            delete this._domSearchIdentifier;
-        }
-
-        DOMAgent.performSearch(searchTerm, domCallback.bind(this));
-    },
-
-    // Private
-
-    _searchFieldChanged: function(event)
-    {
-        this.performSearch(event.target.value);
-    },
-
-    _searchFieldInput: function(event)
-    {
-        // If the search field is cleared, immediately clear the search results tree outline.
-        if (!event.target.value.length && this.contentTreeOutline === this._searchContentTreeOutline)
-            this.performSearch("");
-    },
-
-    _searchTreeElementForResource: function(resource)
-    {
-        // FIXME: This should take a frame ID (if one is available) - so we can differentiate between multiple resources
-        // with the same URL.
-
-        var resourceTreeElement = this._searchContentTreeOutline.getCachedTreeElement(resource);
-        if (!resourceTreeElement) {
-            resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
-            resourceTreeElement.hasChildren = true;
-            resourceTreeElement.expand();
-
-            this._searchContentTreeOutline.appendChild(resourceTreeElement);
-        }
-
-        return resourceTreeElement;
-    },
-
-    _focusSearchField: function(keyboardShortcut, event)
-    {
-        this.show();
-
-        this._inputElement.select();
-    },
-
-    _mainFrameDidChange: function(event)
-    {
-        if (this._mainFrameTreeElement) {
-            this._mainFrameTreeElement.frame.removeEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainFrameMainResourceDidChange, this);
-            this._resourcesContentTreeOutline.removeChild(this._mainFrameTreeElement);
-            this._mainFrameTreeElement = null;
-        }
-
-        var newFrame = WebInspector.frameResourceManager.mainFrame;
-        if (newFrame) {
-            newFrame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainFrameMainResourceDidChange, this);
-            this._mainFrameTreeElement = new WebInspector.FrameTreeElement(newFrame);
-            this._resourcesContentTreeOutline.insertChild(this._mainFrameTreeElement, 0);
-
-            // Select by default. Allow onselect if we aren't showing a content view.
-            if (!this._resourcesContentTreeOutline.selectedTreeElement)
-                this._mainFrameTreeElement.revealAndSelect(true, false, !!WebInspector.contentBrowser.currentContentView);
-
-            if (this._frameIdentifierToShowSourceCodeWhenAvailable)
-                this.showSourceCodeForFrame(this._frameIdentifierToShowSourceCodeWhenAvailable, true);
-            else if (this._contentViewCookieToShowWhenAvailable) {
-                this.showContentViewForCookie(this._contentViewCookieToShowWhenAvailable);
-
-                // The cookie is only useful until the main frame loads.
-                delete this._contentViewCookieToShowWhenAvailable;
-            }
-        }
-
-        // We only care about the first time the main frame changes.
-        if (!this._waitingForInitialMainFrame)
-            return;
-
-        // Only if there is a main frame.
-        if (!newFrame)
-            return;
-
-        delete this._waitingForInitialMainFrame;
-
-        // Only if the last page searched is the same as the current page.
-        if (this._lastSearchedPageSetting.value !== newFrame.url.hash)
-            return;
-
-        // Search for whatever is in the input field. This was populated with the last used search term.
-        this.performSearch(this._inputElement.value);
-    },
-
-    _mainFrameMainResourceDidChange: function(event)
-    {
-        var currentContentView = WebInspector.contentBrowser.currentContentView;
-        var wasShowingResourceContentView = currentContentView instanceof WebInspector.ResourceContentView
-            || currentContentView instanceof WebInspector.FrameContentView || currentContentView instanceof WebInspector.ScriptContentView;
-
-        // Close all resource and frame content views since the main frame has navigated and all resources are cleared.
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.ResourceClusterContentView);
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.FrameContentView);
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.ScriptContentView);
-
-        function delayedWork()
-        {
-            // Show the main frame since there is no content view showing or we were showing a resource before.
-            // FIXME: We could try to select the same resource that was selected before in the case of a reload.
-            if (!WebInspector.contentBrowser.currentContentView || wasShowingResourceContentView)
-                this._mainFrameTreeElement.revealAndSelect(true, false);
-        }
-
-        // Delay this work because other listeners of this event might not have fired yet. So selecting the main frame
-        // before those listeners do their work might cause the content of the old page to show instead of the new page.
-        setTimeout(delayedWork.bind(this), 0);
-    },
-
-    _frameWasAdded: function(event)
-    {
-        if (!this._frameIdentifierToShowSourceCodeWhenAvailable)
-            return;
-
-        var frame = event.data.frame;
-        if (frame.id !== this._frameIdentifierToShowSourceCodeWhenAvailable)
-            return;
-
-        this.showSourceCodeForFrame(frame.id, true);
-    },
-
-    _scriptWasAdded: function(event)
-    {
-        var script = event.data.script;
-
-        // We don't add scripts without URLs here. Those scripts can quickly clutter the interface and
-        // are usually more transient. They will get added if/when they need to be shown in a content view.
-        if (!script.url)
-            return;
-
-        // If the script URL matches a resource we can assume it is part of that resource and does not need added.
-        if (script.resource)
-            return;
-
-        if (script.injected) {
-            if (!this._extensionScriptsFolderTreeElement)
-                this._extensionScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extension Scripts"));
-            var parentFolderTreeElement = this._extensionScriptsFolderTreeElement;
-        } else {
-            if (!this._extraScriptsFolderTreeElement)
-                this._extraScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extra Scripts"));
-            var parentFolderTreeElement = this._extraScriptsFolderTreeElement;
-        }
-
-        if (!parentFolderTreeElement.parent) {
-            var index = insertionIndexForObjectInListSortedByFunction(parentFolderTreeElement, this._resourcesContentTreeOutline.children, this._compareTreeElements);
-            this._resourcesContentTreeOutline.insertChild(parentFolderTreeElement, index);
-        }
-
-        var scriptTreeElement = new WebInspector.ScriptTreeElement(script);
-        parentFolderTreeElement.appendChild(scriptTreeElement);
-    },
-
-    _scriptsCleared: function(event)
-    {
-        if (this._extensionScriptsFolderTreeElement) {
-            if (this._extensionScriptsFolderTreeElement.parent)
-                this._extensionScriptsFolderTreeElement.parent.removeChild(this._extensionScriptsFolderTreeElement);
-            this._extensionScriptsFolderTreeElement = null;
-        }
-
-        if (this._extraScriptsFolderTreeElement) {
-            if (this._extraScriptsFolderTreeElement.parent)
-                this._extraScriptsFolderTreeElement.parent.removeChild(this._extraScriptsFolderTreeElement);
-            this._extraScriptsFolderTreeElement = null;
-        }
-
-        if (this._anonymousScriptsFolderTreeElement) {
-            if (this._anonymousScriptsFolderTreeElement.parent)
-                this._anonymousScriptsFolderTreeElement.parent.removeChild(this._anonymousScriptsFolderTreeElement);
-            this._anonymousScriptsFolderTreeElement = null;
-        }
-    },
-
-    _treeElementSelected: function(treeElement, selectedByUser)
-    {
-        if (treeElement instanceof WebInspector.FolderTreeElement)
-            return;
-
-        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement ||
-            treeElement instanceof WebInspector.StorageTreeElement || treeElement instanceof WebInspector.DatabaseTableTreeElement ||
-            treeElement instanceof WebInspector.DatabaseTreeElement || treeElement instanceof WebInspector.ApplicationCacheFrameTreeElement) {
-            WebInspector.contentBrowser.showContentViewForRepresentedObject(treeElement.representedObject);
-            return;
-        }
-
-        console.assert(treeElement instanceof WebInspector.SearchResultTreeElement);
-        if (!(treeElement instanceof WebInspector.SearchResultTreeElement))
-            return;
-
-        if (treeElement.representedObject instanceof WebInspector.DOMSearchMatchObject)
-            this.showMainFrameDOMTree(treeElement.representedObject.domNode, true);
-        else if (treeElement.representedObject instanceof WebInspector.ResourceSearchMatchObject)
-            this.showOriginalOrFormattedSourceCodeTextRange(treeElement.representedObject.sourceCodeTextRange);
-    },
-
-    _domNodeWasInspected: function(event)
-    {
-        this.showMainFrameDOMTree(event.data.node);
-    },
-
-    _checkStorageTreeElementAgainstPendingContentViewCookie: function(treeElement, matchOnTypeAlone)
-    {
-        var contentViewCookie = this._contentViewCookieToShowWhenAvailable;
-        if (!contentViewCookie || !contentViewCookie.type)
-            return false;
-
-        if (contentViewCookie.type === WebInspector.ResourceSidebarPanel.ResourceContentViewCookieType)
-            return;
-
-        var representedObject = treeElement.representedObject;
-
-        switch (contentViewCookie.type) {
-        case WebInspector.ResourceSidebarPanel.CookieStorageContentViewCookieType:
-            if (!(representedObject instanceof WebInspector.CookieStorageObject))
-                return;
-            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
-                return false;
-            break;
-
-        case WebInspector.ResourceSidebarPanel.DatabaseContentViewCookieType:
-            if (!(representedObject instanceof WebInspector.DatabaseObject))
-                return false;
-            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
-                return false;
-            if (!matchOnTypeAlone && representedObject.name !== contentViewCookie.name)
-                return false;
-            break;
-
-        case WebInspector.ResourceSidebarPanel.DatabaseTableContentViewCookieType:
-            // FIXME: This isn't easy to implement like the others since DatabaseTreeElement
-            // populates the tables instead of ResourceSidebarPanel. Just select the database.
-            if (!(representedObject instanceof WebInspector.DatabaseObject))
-                return false;
-            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
-                return false;
-            if (!matchOnTypeAlone && representedObject.name !== contentViewCookie.database)
-                return false;
-            return;
-
-        case WebInspector.ResourceSidebarPanel.DOMStorageContentViewCookieType:
-            if (!(representedObject instanceof WebInspector.DOMStorageObject))
-                return false;
-            if (!matchOnTypeAlone && representedObject.host !== contentViewCookie.host)
-                return false;
-            if (!matchOnTypeAlone && representedObject.isLocalStorage() !== contentViewCookie.isLocalStorage)
-                return false;
-            break;
-
-        case WebInspector.ResourceSidebarPanel.ApplicationCacheContentViewCookieType:
-            if (!(representedObject instanceof WebInspector.ApplicationCacheFrame))
-                return;
-            if (!matchOnTypeAlone && representedObject.frame.url !== contentViewCookie.frame)
-                return;
-            if (!matchOnTypeAlone && representedObject.manifest.manifestURL !== contentViewCookie.manifest)
-                return false;
-            break;
-
-        default:
-            console.assert("Unknown content view cookie type.");
-            return false;
-        }
-
-        // If we got here, then the tree element was a match to the content view cookie.
-        // Selecting the tree element will cause the content view to show.
-        treeElement.revealAndSelect(true, true);
-
-        return true;
-    },
-
-    _domStorageObjectWasAdded: function(event)
-    {
-        var domStorage = event.data.domStorage;
-        var storageElement = new WebInspector.DOMStorageTreeElement(domStorage);
-
-        if (domStorage.isLocalStorage())
-            this._localStorageRootTreeElement = this._addStorageChild(storageElement, this._localStorageRootTreeElement, WebInspector.UIString("Local Storage"));
-        else
-            this._sessionStorageRootTreeElement = this._addStorageChild(storageElement, this._sessionStorageRootTreeElement, WebInspector.UIString("Session Storage"));
-
-        this._checkStorageTreeElementAgainstPendingContentViewCookie(storageElement);
-    },
-
-    _domStorageObjectWasInspected: function(event)
-    {
-        var domStorage = event.data.domStorage;
-        var treeElement = this.treeElementForRepresentedObject(domStorage);
-        treeElement.revealAndSelect(true);
-    },
-
-    _databaseWasAdded: function(event)
-    {
-        var database = event.data.database;
-
-        console.assert(database instanceof WebInspector.DatabaseObject);
-
-        if (!this._databaseHostTreeElementMap[database.host]) {
-            this._databaseHostTreeElementMap[database.host] = new WebInspector.DatabaseHostTreeElement(database.host);
-            this._databaseRootTreeElement = this._addStorageChild(this._databaseHostTreeElementMap[database.host], this._databaseRootTreeElement, WebInspector.UIString("Databases"));
-        }
-
-        var databaseElement = new WebInspector.DatabaseTreeElement(database);
-        this._databaseHostTreeElementMap[database.host].appendChild(databaseElement);
-
-        this._checkStorageTreeElementAgainstPendingContentViewCookie(databaseElement);
-    },
-
-    _databaseWasInspected: function(event)
-    {
-        var database = event.data.database;
-        var treeElement = this.treeElementForRepresentedObject(database);
-        treeElement.revealAndSelect(true);
-    },
-
-    _cookieStorageObjectWasAdded: function(event)
-    {
-        console.assert(event.data.cookieStorage instanceof WebInspector.CookieStorageObject);
-
-        var cookieElement = new WebInspector.CookieStorageTreeElement(event.data.cookieStorage);
-        this._cookieStorageRootTreeElement = this._addStorageChild(cookieElement, this._cookieStorageRootTreeElement, WebInspector.UIString("Cookies"));
-
-        this._checkStorageTreeElementAgainstPendingContentViewCookie(cookieElement);
-    },
-
-    _frameManifestAdded: function(event)
-    {
-        var frameManifest = event.data.frameManifest;
-        console.assert(frameManifest instanceof WebInspector.ApplicationCacheFrame);
-
-        var manifest = frameManifest.manifest;
-        var manifestURL = manifest.manifestURL;
-        if (!this._applicationCacheURLTreeElementMap[manifestURL]) {
-            this._applicationCacheURLTreeElementMap[manifestURL] = new WebInspector.ApplicationCacheManifestTreeElement(manifest);
-            this._applicationCacheRootTreeElement = this._addStorageChild(this._applicationCacheURLTreeElementMap[manifestURL], this._applicationCacheRootTreeElement, WebInspector.UIString("Application Cache"));
-        }
-
-        var frameCacheElement = new WebInspector.ApplicationCacheFrameTreeElement(frameManifest);
-        this._applicationCacheURLTreeElementMap[manifestURL].appendChild(frameCacheElement);
-
-        this._checkStorageTreeElementAgainstPendingContentViewCookie(frameCacheElement);
-    },
-
-    _frameManifestRemoved: function(event)
-    {
-         // FIXME: Implement this.
-    },
-
-    _compareTreeElements: function(a, b)
-    {
-        // Always sort the main frame element first.
-        if (a instanceof WebInspector.FrameTreeElement)
-            return -1;
-        if (b instanceof WebInspector.FrameTreeElement)
-            return 1;
-
-        console.assert(a.mainTitle);
-        console.assert(b.mainTitle);
-
-        return (a.mainTitle || "").localeCompare(b.mainTitle || "");
-    },
-
-    _addStorageChild: function(childElement, parentElement, folderName)
-    {
-        if (!parentElement) {
-            childElement.flattened = true;
-
-            this._resourcesContentTreeOutline.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, this._resourcesContentTreeOutline.children, this._compareTreeElements));
-
-            return childElement;
-        }
-
-        if (parentElement instanceof WebInspector.StorageTreeElement) {
-            console.assert(parentElement.flattened);
-
-            var previousOnlyChild = parentElement;
-            previousOnlyChild.flattened = false;
-            this._resourcesContentTreeOutline.removeChild(previousOnlyChild);
-
-            var folderElement = new WebInspector.FolderTreeElement(folderName, null, null);
-            this._resourcesContentTreeOutline.insertChild(folderElement, insertionIndexForObjectInListSortedByFunction(folderElement, this._resourcesContentTreeOutline.children, this._compareTreeElements));
-
-            folderElement.appendChild(previousOnlyChild);
-            folderElement.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, folderElement.children, this._compareTreeElements));
-
-            return folderElement;
-        }
-
-        console.assert(parentElement instanceof WebInspector.FolderTreeElement);
-        parentElement.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, parentElement.children, this._compareTreeElements));
-
-        return parentElement;
-    },
-
-    _storageCleared: function(event)
-    {
-        // Close all DOM and cookie storage content views since the main frame has navigated and all storages are cleared.
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.CookieStorageContentView);
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DOMStorageContentView);
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DatabaseTableContentView);
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DatabaseContentView);
-        WebInspector.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.ApplicationCacheFrameContentView);
-
-        if (this._localStorageRootTreeElement && this._localStorageRootTreeElement.parent)
-            this._localStorageRootTreeElement.parent.removeChild(this._localStorageRootTreeElement);
-
-        if (this._sessionStorageRootTreeElement && this._sessionStorageRootTreeElement.parent)
-            this._sessionStorageRootTreeElement.parent.removeChild(this._sessionStorageRootTreeElement);
-
-        if (this._databaseRootTreeElement && this._databaseRootTreeElement.parent)
-            this._databaseRootTreeElement.parent.removeChild(this._databaseRootTreeElement);
-
-        if (this._cookieStorageRootTreeElement && this._cookieStorageRootTreeElement.parent)
-            this._cookieStorageRootTreeElement.parent.removeChild(this._cookieStorageRootTreeElement);
-
-        if (this._applicationCacheRootTreeElement && this._applicationCacheRootTreeElement.parent)
-            this._applicationCacheRootTreeElement.parent.removeChild(this._applicationCacheRootTreeElement);
-
-        this._localStorageRootTreeElement = null;
-        this._sessionStorageRootTreeElement = null;
-        this._databaseRootTreeElement = null;
-        this._databaseHostTreeElementMap = {};
-        this._cookieStorageRootTreeElement = null;
-        this._applicationCacheRootTreeElement = null;
-        this._applicationCacheURLTreeElementMap = {};
-    }
-};
-
-WebInspector.ResourceSidebarPanel.prototype.__proto__ = WebInspector.NavigationSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js
deleted file mode 100644
index ad8d1b045..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNode.js
+++ /dev/null
@@ -1,309 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceTimelineDataGridNode = function(resourceTimelineRecord)
-{
-    WebInspector.DataGridNode.call(this, {});
-
-    this._record = resourceTimelineRecord;
-
-    this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, this._needsRefresh, this);
-    this._record.resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
-    this._record.resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._needsRefresh, this);
-    this._record.resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
-    this._record.resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
-    this._record.resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._needsRefresh, this);
-    this._record.resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._needsRefresh, this);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.ResourceTimelineDataGridNode);
-
-WebInspector.ResourceTimelineDataGridNode.IconStyleClassName = "icon";
-WebInspector.ResourceTimelineDataGridNode.ErrorStyleClassName = "error";
-
-WebInspector.ResourceTimelineDataGridNode.Event = {
-    NeedsRefresh: "resource-timeline-data-grid-node-needs-refresh"
-};
-
-WebInspector.ResourceTimelineDataGridNode.prototype = {
-    constructor: WebInspector.ResourceTimelineDataGridNode,
-
-    // Public
-
-    get record()
-    {
-        return this._record;
-    },
-
-    get data()
-    {
-        if (this._cachedData)
-            return this._cachedData;
-
-        var resource = this._record.resource;
-
-        var data = {};
-        data.name = WebInspector.displayNameForURL(resource.url, resource.urlComponents);
-        data.domain = WebInspector.displayNameForHost(resource.urlComponents.host);
-        data.type = resource.type;
-        data.statusCode = resource.statusCode;
-        data.cached = resource.cached;
-        data.size = resource.size;
-        data.transferSize = resource.transferSize;
-        data.duration = resource.receiveDuration;
-        data.latency = resource.latency;
-        data.timeline = resource.responseReceivedTimestamp || resource.requestSentTimestamp;
-
-        this._cachedData = data;
-        return data;
-    },
-
-    createCellContent: function(columnIdentifier, cell)
-    {
-        var resource = this._record.resource;
-
-        if (resource.failed || resource.canceled || resource.statusCode >= 400)
-            cell.classList.add(WebInspector.ResourceTimelineDataGridNode.ErrorStyleClassName);
-
-        const emptyValuePlaceholderString = "\u2014";
-        var value = this.data[columnIdentifier];
-
-        switch (columnIdentifier) {
-        case "name":
-            cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
-            cell.classList.add(resource.type);
-
-            var fragment = document.createDocumentFragment();
-
-            var gotToButton = WebInspector.createGoToArrowButton();
-            gotToButton.addEventListener("click", this._goToResource.bind(this));
-            fragment.appendChild(gotToButton);
-
-            var icon = document.createElement("div");
-            icon.className = WebInspector.ResourceTimelineDataGridNode.IconStyleClassName;
-            fragment.appendChild(icon);
-
-            var text = document.createTextNode(value);
-            fragment.appendChild(text);
-
-            cell.title = resource.url;
-
-            return fragment;
-
-        case "type":
-            return WebInspector.Resource.Type.displayName(value);
-
-        case "statusCode":
-            cell.title = resource.statusText || "";
-            return value || emptyValuePlaceholderString;
-
-        case "cached":
-            return value ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
-
-        case "domain":
-            return value || emptyValuePlaceholderString;
-
-        case "size":
-        case "transferSize":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.bytesToString(value);
-
-        case "latency":
-        case "duration":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
-
-        case "timeline":
-            return this._createGraphElement();
-        }
-
-        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
-    },
-
-    refresh: function()
-    {
-        delete this._cachedData;
-
-        WebInspector.DataGridNode.prototype.refresh.call(this);
-    },
-
-    updateLayout: function()
-    {
-        this._refreshLabelPositions();
-    },
-
-    select: function(supressSelectedEvent)
-    {
-        if (this.element.classList.contains(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName))
-            this.element.classList.remove(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
-
-        WebInspector.DataGridNode.prototype.select.call(this, supressSelectedEvent);
-
-        this._refreshLabelPositions();
-    },
-
-    // Private
-
-    _needsRefresh: function()
-    {
-        this.dispatchEventToListeners(WebInspector.ResourceTimelineDataGridNode.Event.NeedsRefresh);
-    },
-
-    _goToResource: function(event)
-    {
-        WebInspector.resourceSidebarPanel.showSourceCode(this._record.resource);
-    },
-
-    _createGraphElement: function(cell)
-    {
-        if (!this._graphElement) {
-            this._graphElement = document.createElement("div");
-            this._graphElement.className = "network-graph-side";
-
-            this._barAreaElement = document.createElement("div");
-            this._barAreaElement.className = "network-graph-bar-area";
-            this._barAreaElement.resource = this._record.resource;
-            this._graphElement.appendChild(this._barAreaElement);
-
-            this._barLeftElement = document.createElement("div");
-            this._barLeftElement.className = "network-graph-bar waiting";
-            this._barAreaElement.appendChild(this._barLeftElement);
-
-            this._barRightElement = document.createElement("div");
-            this._barRightElement.className = "network-graph-bar";
-            this._barAreaElement.appendChild(this._barRightElement);
-
-            this._labelLeftElement = document.createElement("div");
-            this._labelLeftElement.className = "network-graph-label waiting";
-            this._barAreaElement.appendChild(this._labelLeftElement);
-
-            this._labelRightElement = document.createElement("div");
-            this._labelRightElement.className = "network-graph-label";
-            this._barAreaElement.appendChild(this._labelRightElement);
-
-            this._graphElement.addEventListener("mouseover", this._refreshLabelPositions.bind(this));
-        }
-
-        this._refreshGraph();
-
-        return this._graphElement;
-    },
-
-    _refreshGraph: function(c)
-    {
-        var resource = this._record.resource;
-        if (resource.cached)
-            this._graphElement.classList.add("resource-cached");
-
-        var calculator = this.dataGrid.currentCalculator;
-        var percentages = calculator.computeBarGraphPercentages(resource);
-        this._percentages = percentages;
-
-        if (!this._graphElement.classList.contains("network-" + resource.type)) {
-            this._graphElement.removeMatchingStyleClasses("network-resource-type-\\w+");
-            this._graphElement.classList.add("network-" + resource.type);
-        }
-
-        this._barLeftElement.style.setProperty("left", percentages.start + "%");
-        this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
-
-        this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
-        this._barRightElement.style.setProperty("left", percentages.middle + "%");
-
-        var labels = calculator.computeBarGraphLabels(resource);
-        this._labelLeftElement.textContent = labels.left;
-        this._labelRightElement.textContent = labels.right;
-
-        var tooltip = (labels.tooltip || "");
-        this._barLeftElement.title = tooltip;
-        this._labelLeftElement.title = tooltip;
-        this._labelRightElement.title = tooltip;
-        this._barRightElement.title = tooltip;
-    },
-
-    _refreshLabelPositions: function()
-    {
-        if (!this._percentages)
-            return;
-
-        this._labelLeftElement.style.removeProperty("left");
-        this._labelLeftElement.style.removeProperty("right");
-        this._labelLeftElement.classList.remove("before");
-        this._labelLeftElement.classList.remove("hidden");
-
-        this._labelRightElement.style.removeProperty("left");
-        this._labelRightElement.style.removeProperty("right");
-        this._labelRightElement.classList.remove("after");
-        this._labelRightElement.classList.remove("hidden");
-
-        const labelPadding = 10;
-        const leftLabelWidth = this._labelLeftElement.offsetWidth + labelPadding;
-        const rightLabelWidth = this._labelRightElement.offsetWidth + labelPadding;
-
-        const barRightElementOffsetWidth = this._barRightElement.offsetWidth;
-        const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth;
-
-        const leftBarWidth = barLeftElementOffsetWidth - barRightElementOffsetWidth;
-        const rightBarWidth = barRightElementOffsetWidth;
-
-        const leftCallout = (leftLabelWidth > leftBarWidth);
-        const rightCallout = (rightLabelWidth > rightBarWidth);
-
-        // Hide the left or right callout if there is not enough space.
-        const graphElementOffsetWidth = this._graphElement.offsetWidth;
-        if (leftCallout && (graphElementOffsetWidth * (this._percentages.start / 100)) < leftLabelWidth)
-            var leftHidden = true;
-        if (rightCallout && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < rightLabelWidth)
-            var rightHidden = true;
-
-        // The left/right label data are the same, so a before/after label can be replaced by a single on-bar label.
-        if (barLeftElementOffsetWidth == barRightElementOffsetWidth) {
-            if (leftCallout && !rightCallout)
-                leftHidden = true;
-            else if (rightCallout && !leftCallout)
-                rightHidden = true;
-        }
-
-        if (leftCallout) {
-            if (leftHidden)
-                this._labelLeftElement.classList.add("hidden");
-            this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%");
-            this._labelLeftElement.classList.add("before");
-        } else {
-            this._labelLeftElement.style.setProperty("left", this._percentages.start + "%");
-            this._labelLeftElement.style.setProperty("right", (100 - this._percentages.middle) + "%");
-        }
-
-        if (rightCallout) {
-            if (rightHidden)
-                this._labelRightElement.classList.add("hidden");
-            this._labelRightElement.style.setProperty("left", this._percentages.end + "%");
-            this._labelRightElement.classList.add("after");
-        } else {
-            this._labelRightElement.style.setProperty("left", this._percentages.middle + "%");
-            this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%");
-        }
-    }
-}
-
-WebInspector.ResourceTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNodePathComponent.js b/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNodePathComponent.js
deleted file mode 100644
index a4322b9a2..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTimelineDataGridNodePathComponent.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceTimelineDataGridNodePathComponent = function(resourceTimelineDataGridNode) {
-    var resource = resourceTimelineDataGridNode.record.resource;
-    var classNames = [WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type];
-
-    WebInspector.HierarchicalPathComponent.call(this, resourceTimelineDataGridNode.data.name, classNames, resource);
-
-    this._resourceTimelineDataGridNode = resourceTimelineDataGridNode;
-};
-
-WebInspector.ResourceTimelineDataGridNodePathComponent.prototype = {
-    constructor: WebInspector.ResourceTimelineDataGridNodePathComponent,
-
-    // Public
-
-    get resourceTimelineDataGridNode()
-    {
-        return this._resourceTimelineDataGridNode;
-    },
-
-    get previousSibling()
-    {
-        if (!this._resourceTimelineDataGridNode.previousSibling)
-            return null;
-        return new WebInspector.ResourceTimelineDataGridNodePathComponent(this._resourceTimelineDataGridNode.previousSibling);
-    },
-
-    get nextSibling()
-    {
-        if (!this._resourceTimelineDataGridNode.nextSibling)
-            return null;
-        return new WebInspector.ResourceTimelineDataGridNodePathComponent(this._resourceTimelineDataGridNode.nextSibling);
-    }
-};
-
-WebInspector.ResourceTimelineDataGridNodePathComponent.prototype.__proto__ = WebInspector.HierarchicalPathComponent.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTimelineRecord.js b/Source/WebInspectorUI/UserInterface/ResourceTimelineRecord.js
deleted file mode 100644
index 35bfe59d2..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTimelineRecord.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceTimelineRecord = function(resource)
-{
-    WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Network);
-
-    this._resource = resource;
-    this._resource.addEventListener(WebInspector.Resource.Event.TimestampsDidChange, this._dispatchUpdatedEvent, this);
-};
-
-WebInspector.ResourceTimelineRecord.prototype = {
-    constructor: WebInspector.ResourceTimelineRecord,
-
-    // Public
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    get startTime()
-    {
-        return this._resource.firstTimestamp;
-    },
-
-    get endTime()
-    {
-        return this._resource.lastTimestamp;
-    },
-
-    get waitingDuration()
-    {
-        return this._resource.latency;
-    },
-
-    get activeDuration()
-    {
-        return this._resource.receiveDuration;
-    },
-
-    // Private
-
-    _dispatchUpdatedEvent: function()
-    {
-        this.dispatchEventToListeners(WebInspector.TimelineRecord.Event.Updated);
-    }
-};
-
-WebInspector.ResourceTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css b/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css
deleted file mode 100644
index 67e9eb876..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.css
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.item.resource.failed {
-    color: rgb(224, 16, 16) !important;
-}
-
-.item.resource.failed .subtitle {
-    color: rgba(224, 16, 16, 0.7) !important;
-}
-
-.item.resource > .status > .reload-button {
-    width: 16px;
-    height: 16px;
-    content: url(Images/Reload.svg);
-}
-
-.item.resource.selected > .status > .reload-button {
-    content: url(Images/ReloadSelected.svg);
-}
diff --git a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js
deleted file mode 100644
index dcd5b0eb7..000000000
--- a/Source/WebInspectorUI/UserInterface/ResourceTreeElement.js
+++ /dev/null
@@ -1,214 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ResourceTreeElement = function(resource, representedObject)
-{
-    console.assert(resource instanceof WebInspector.Resource);
-
-    WebInspector.SourceCodeTreeElement.call(this, resource, [WebInspector.ResourceTreeElement.StyleClassName, WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type], "", "", representedObject || resource, false);
-
-    this._updateResource(resource);
-};
-
-WebInspector.ResourceTreeElement.StyleClassName = "resource";
-WebInspector.ResourceTreeElement.ResourceIconStyleClassName = "resource-icon";
-WebInspector.ResourceTreeElement.FailedStyleClassName = "failed";
-
-WebInspector.ResourceTreeElement.compareResourceTreeElements = function(a, b)
-{
-    // Compare by type first to keep resources grouped by type when not sorted into folders.
-    var comparisonResult = a.resource.type.localeCompare(b.resource.type);
-    if (comparisonResult !== 0)
-        return comparisonResult;
-
-    // Compare async resource types by their first timestamp so they are in chronological order.
-    if (a.resource.type === WebInspector.Resource.Type.XHR || a.resource.type === WebInspector.Resource.Type.WebSocket)
-        return a.resource.firstTimestamp - b.resource.firstTimestamp || 0;
-
-    // Compare by subtitle when the types are the same. The subtitle is used to show the
-    // domain of the resource. This causes resources to group by domain. If the resource
-    // is on the same domain as the frame it will have an empty subtitle. This is good
-    // because empty string sorts first, so those will appear before external resources.
-    comparisonResult = a.subtitle.localeCompare(b.subtitle);
-    if (comparisonResult !== 0)
-        return comparisonResult;
-
-    // Compare by title when the subtitles are the same.
-    return a.mainTitle.localeCompare(b.mainTitle);
-}
-
-WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements = function(a, b)
-{
-    var aIsFolder = a instanceof WebInspector.FolderTreeElement;
-    var bIsFolder = b instanceof WebInspector.FolderTreeElement;
-
-    if (aIsFolder && !bIsFolder)
-        return -1;
-    if (!aIsFolder && bIsFolder)
-        return 1;
-    if (aIsFolder && bIsFolder)
-        return a.mainTitle.localeCompare(b.mainTitle);
-
-    return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
-}
-
-WebInspector.ResourceTreeElement.prototype = {
-    constructor: WebInspector.ResourceTreeElement,
-
-    // Public
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    get filterableData()
-    {
-        return {text: this._resource.url};
-    },
-
-    get reloadButton()
-    {
-        if (!this._reloadButton) {
-            this._reloadButton = document.createElement("img");
-            this._reloadButton.className = "reload-button";
-            this._reloadButton.title = WebInspector.UIString("Reload page (%s)\nReload ignoring cache (%s)").format(WebInspector._reloadPageKeyboardShortcut.displayName, WebInspector._reloadPageIgnoringCacheKeyboardShortcut.displayName);
-            this._reloadButton.addEventListener("click", this._reloadPageClicked.bind(this));
-        }
-        return this._reloadButton;
-    },
-
-    ondblclick: function()
-    {
-        InspectorFrontendHost.openInNewTab(this._resource.url);
-    },
-
-    // Protected (Used by FrameTreeElement)
-
-    _updateResource: function(resource)
-    {
-        console.assert(resource instanceof WebInspector.Resource);
-
-        // This method is for subclasses like FrameTreeElement who don't use a resource as the representedObject.
-        // This method should only be called once if the representedObject is a resource, since changing the resource
-        // without changing the representedObject is bad. If you need to change the resource, make a new ResourceTreeElement.
-        console.assert(!this._resource || !(this.representedObject instanceof WebInspector.Resource));
-
-        if (this._resource) {
-            this._resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._urlDidChange, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._typeDidChange, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._updateStatus, this);
-            this._resource.removeEventListener(WebInspector.Resource.Event.LoadingDidFail, this._updateStatus, this);
-        }
-
-        this._updateSourceCode(resource);
-
-        this._resource = resource;
-
-        resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._urlDidChange, this);
-        resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._typeDidChange, this);
-        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._updateStatus, this);
-        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._updateStatus, this);
-
-        this._updateTitles();
-        this._updateStatus();
-        this._updateToolTip();
-    },
-
-    // Protected
-
-    _updateTitles: function()
-    {
-        var frame = this._resource.parentFrame;
-        var isMainResource = this._resource.isMainResource();
-        if (isMainResource && frame) {
-            // When the resource is a main resource, get the host from the current frame's parent frame instead of the current frame.
-            var parentResourceHost = frame.parentFrame ? frame.parentFrame.mainResource.urlComponents.host : null;
-        } else if (frame) {
-            // When the resource is a normal sub-resource, get the host from the current frame's main resource.
-            var parentResourceHost = frame.mainResource.urlComponents.host;
-        }
-
-        var urlComponents = this._resource.urlComponents;
-
-        var oldMainTitle = this.mainTitle;
-        this.mainTitle = WebInspector.displayNameForURL(this._resource.url, urlComponents);
-
-        // Show the host as the subtitle if it is different from the main resource or if this is the main frame's main resource.
-        var subtitle = parentResourceHost !== urlComponents.host || frame.isMainFrame() && isMainResource ? WebInspector.displayNameForHost(urlComponents.host) : null;
-        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
-
-        if (oldMainTitle !== this.mainTitle)
-            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
-    },
-
-    // Private
-
-    _updateStatus: function()
-    {
-        if (this._resource.failed)
-            this.addClassName(WebInspector.ResourceTreeElement.FailedStyleClassName);
-        else
-            this.removeClassName(WebInspector.ResourceTreeElement.FailedStyleClassName);
-
-        if (this._resource.finished || this._resource.failed) {
-            // Remove the spinner and replace with a reload button in case it's the main frame's main resource.
-            var frame = this._resource.parentFrame;
-            this.status = this._resource.isMainResource() && frame && frame.isMainFrame() ? this.reloadButton : null;
-        } else {
-            var spinner = new WebInspector.IndeterminateProgressSpinner;
-            this.status = spinner.element;
-        }
-    },
-
-    _updateToolTip: function()
-    {
-        this.tooltip = this._resource.url;
-    },
-
-    _reloadPageClicked: function(event)
-    {
-        event.stopPropagation();
-
-        // Ignore cache when the shift key is pressed.
-        PageAgent.reload(event.shiftKey);
-    },
-
-    _urlDidChange: function(event)
-    {
-        this._updateTitles();
-        this._updateToolTip();
-    },
-
-    _typeDidChange: function(event)
-    {
-        this.removeClassName(event.data.oldType);
-        this.addClassName(this._resource.type);
-
-        this.callFirstAncestorFunction("descendantResourceTreeElementTypeDidChange", [this, event.data.oldType]);
-    }
-};
-
-WebInspector.ResourceTreeElement.prototype.__proto__ = WebInspector.SourceCodeTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Revision.js b/Source/WebInspectorUI/UserInterface/Revision.js
deleted file mode 100644
index 4cf2c4b46..000000000
--- a/Source/WebInspectorUI/UserInterface/Revision.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Revision = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.Revision.prototype = {
-    constructor: WebInspector.Revision,
-
-    // Public
-
-    apply: function()
-    {
-        // Implemented by subclasses.
-        console.error("Needs to be implemented by a subclass.");
-    },
-
-    revert: function()
-    {
-        // Implemented by subclasses.
-        console.error("Needs to be implemented by a subclass.");
-    },
-
-    copy: function()
-    {
-        // Override by subclasses.
-        return this;
-    }
-};
-
-WebInspector.Revision.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.css
deleted file mode 100644
index 3d71afe6a..000000000
--- a/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar > .panel.details.css-style .rules .label {
-    font-size: 11px;
-    font-family: "Lucida Grande", sans-serif;
-
-    color: rgb(60%, 60%, 60%);
-    text-shadow: white 0 1px 0;
-
-    padding: 0 10px;
-}
-
-.sidebar > .panel.details.css-style .rules .label .go-to-link {
-    color: inherit !important;
-}
-
-.sidebar > .panel.details.css-style .rules .label + .style-declaration-section {
-    margin-top: 5px;
-}
-
-.sidebar > .panel.details.css-style .rules .new-rule {
-    font-size: 12px;
-    font-family: "Lucida Grande", sans-serif;
-    font-weight: bold;
-
-    color: black;
-    text-shadow: white 0 1px 0;
-
-    padding: 5px 10px;
-
-    margin-bottom: 8px;
-    margin-top: -5px;
-
-    opacity: 0.5;
-}
-
-.sidebar > .panel.details.css-style .rules .new-rule img {
-    content: url(Images/Plus.pdf);
-
-    width: 13px;
-    height: 13px;
-
-    vertical-align: -2px;
-
-    margin-right: 6px;
-}
-
-.sidebar > .panel.details.css-style .rules .new-rule:hover {
-    opacity: 0.6;
-}
-
-.sidebar > .panel.details.css-style .rules .new-rule:active {
-    opacity: 0.7;
-}
diff --git a/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.js
deleted file mode 100644
index 0fd114e5a..000000000
--- a/Source/WebInspectorUI/UserInterface/RulesStyleDetailsPanel.js
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.RulesStyleDetailsPanel = function()
-{
-    WebInspector.StyleDetailsPanel.call(this, WebInspector.RulesStyleDetailsPanel.StyleClassName, "rules", WebInspector.UIString("Rules"));
-
-    this._sections = [];
-};
-
-WebInspector.RulesStyleDetailsPanel.StyleClassName = "rules";
-WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName = "label";
-WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName = "new-rule";
-
-WebInspector.RulesStyleDetailsPanel.prototype = {
-    constructor: WebInspector.RulesStyleDetailsPanel,
-
-    // Public
-
-    refresh: function(significantChange)
-    {
-        // We only need to do a rebuild on significant changes. Other changes are handled
-        // by the sections and text editors themselves.
-        if (!significantChange)
-            return;
-
-        var newSections = [];
-        var newDOMFragment = document.createDocumentFragment();
-
-        var previousMediaList = [];
-        var previousSection = null;
-        var previousFocusedSection = null;
-
-        function mediaListsEqual(a, b)
-        {
-            a = a || [];
-            b = b || [];
-
-            if (a.length !== b.length)
-                return false;
-
-            for (var i = 0; i < a.length; ++i) {
-                var aMedia = a[i];
-                var bMedia = b[i];
-
-                if (aMedia.type !== bMedia.type)
-                    return false;
-
-                if (aMedia.text !== bMedia.text)
-                    return false;
-
-                if (!aMedia.sourceCodeLocation && bMedia.sourceCodeLocation)
-                    return false;
-
-                if (aMedia.sourceCodeLocation && !aMedia.sourceCodeLocation.isEqual(bMedia.sourceCodeLocation))
-                    return false;
-            }
-
-            return true;
-        }
-
-        function filteredMediaList(mediaList)
-        {
-            if (!mediaList)
-                return [];
-
-            // Exclude the basic "screen" query since it's very common and just clutters things.
-            return mediaList.filter(function(media) {
-                return media.text !== "screen";
-            });
-        }
-
-        function appendStyleSection(style)
-        {
-            var section = style.__rulesSection;
-            if (section && section.focused && !previousFocusedSection)
-                previousFocusedSection = section;
-
-            if (!section) {
-                section = new WebInspector.CSSStyleDeclarationSection(style);
-                style.__rulesSection = section;
-            } else
-                section.refresh();
-
-            if (this._focusNextNewInspectorRule && style.ownerRule && style.ownerRule.type === WebInspector.CSSRule.Type.Inspector) {
-                previousFocusedSection = section;
-                delete this._focusNextNewInspectorRule;
-            }
-
-            // Reset lastInGroup in case the order/grouping changed.
-            section.lastInGroup = false;
-
-            newDOMFragment.appendChild(section.element);
-            newSections.push(section);
-
-            previousSection = section;
-        }
-
-        function addNewRuleButton()
-        {
-            if (previousSection)
-                previousSection.lastInGroup = true;
-
-            var newRuleButton = document.createElement("div");
-            newRuleButton.className = WebInspector.RulesStyleDetailsPanel.NewRuleElementStyleClassName;
-            newRuleButton.addEventListener("click", this._newRuleClicked.bind(this));
-
-            newRuleButton.appendChild(document.createElement("img"));
-            newRuleButton.appendChild(document.createTextNode(WebInspector.UIString("New Rule")));
-
-            newDOMFragment.appendChild(newRuleButton);
-
-            addedNewRuleButton = true;
-        }
-
-        var pseudoElements = this.nodeStyles.pseudoElements;
-        for (var pseudoIdentifier in pseudoElements) {
-            var pseudoElement = pseudoElements[pseudoIdentifier];
-            for (var i = 0; i < pseudoElement.orderedStyles.length; ++i) {
-                var style = pseudoElement.orderedStyles[i];
-                appendStyleSection.call(this, style);
-            }
-
-            if (previousSection)
-                previousSection.lastInGroup = true;
-        }
-
-        var addedNewRuleButton = false;
-
-        var orderedStyles = this.nodeStyles.orderedStyles;
-        for (var i = 0; i < orderedStyles.length; ++i) {
-            var style = orderedStyles[i];
-
-            if (style.type === WebInspector.CSSStyleDeclaration.Type.Rule && !addedNewRuleButton)
-                addNewRuleButton.call(this);
-
-            if (previousSection && previousSection.style.node !== style.node) {
-                previousSection.lastInGroup = true;
-
-                var prefixElement = document.createElement("strong");
-                prefixElement.textContent = WebInspector.UIString("Inherited From: ");
-
-                var inheritedLabel = document.createElement("div");
-                inheritedLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
-                inheritedLabel.appendChild(prefixElement);
-                inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
-                newDOMFragment.appendChild(inheritedLabel);
-            }
-
-            // Only include the media list if it is different from the previous media list shown.
-            var currentMediaList = filteredMediaList(style.ownerRule && style.ownerRule.mediaList);
-            if (!mediaListsEqual(previousMediaList, currentMediaList)) {
-                previousMediaList = currentMediaList;
-
-                // Break the section group even if the media list is empty. That way the user knows
-                // the previous displayed media list does not apply to the next section.
-                if (previousSection)
-                    previousSection.lastInGroup = true;
-
-                for (var j = 0; j < currentMediaList.length; ++j) {
-                    var media = currentMediaList[j];
-
-                    var prefixElement = document.createElement("strong");
-                    prefixElement.textContent = WebInspector.UIString("Media: ");
-
-                    var mediaLabel = document.createElement("div");
-                    mediaLabel.className = WebInspector.RulesStyleDetailsPanel.LabelElementStyleClassName;
-                    mediaLabel.appendChild(prefixElement);
-                    mediaLabel.appendChild(document.createTextNode(media.text));
-
-                    if (media.sourceCodeLocation) {
-                        mediaLabel.appendChild(document.createTextNode(" \u2014 "));
-                        mediaLabel.appendChild(WebInspector.createSourceCodeLocationLink(media.sourceCodeLocation, true));
-                    }
-
-                    newDOMFragment.appendChild(mediaLabel);
-                }
-            }
-
-            appendStyleSection.call(this, style);
-        }
-
-        if (!addedNewRuleButton)
-            addNewRuleButton.call(this);
-
-        if (previousSection)
-            previousSection.lastInGroup = true;
-
-        this.element.removeChildren();
-        this.element.appendChild(newDOMFragment);
-
-        this._sections = newSections;
-
-        for (var i = 0; i < this._sections.length; ++i)
-            this._sections[i].updateLayout();
-
-        if (previousFocusedSection) {
-            previousFocusedSection.focus();
-
-            function scrollToFocusedSection()
-            {
-                previousFocusedSection.element.scrollIntoViewIfNeeded(true);
-            }
-
-            // Do the scroll on a timeout since StyleDetailsPanel restores scroll position
-            // after the refresh, and we might not need to scroll after the restore.
-            setTimeout(scrollToFocusedSection, 0);
-        }
-    },
-
-    // Protected
-
-    shown: function()
-    {
-        WebInspector.StyleDetailsPanel.prototype.shown.call(this);
-
-        // Associate the style and section objects so they can be reused.
-        // Also update the layout in case we changed widths while hidden.
-        for (var i = 0; i < this._sections.length; ++i) {
-            var section = this._sections[i];
-            section.style.__rulesSection = section;
-            section.updateLayout();
-        }
-    },
-
-    hidden: function()
-    {
-        WebInspector.StyleDetailsPanel.prototype.hidden.call(this);
-
-        // Disconnect the style and section objects so they have a chance
-        // to release their objects when this panel is not visible.
-        for (var i = 0; i < this._sections.length; ++i)
-            delete this._sections[i].style.__rulesSection;
-    },
-
-    widthDidChange: function()
-    {
-        for (var i = 0; i < this._sections.length; ++i)
-            this._sections[i].updateLayout();
-    },
-
-    // Private
-
-    _newRuleClicked: function(event)
-    {
-        this._focusNextNewInspectorRule = true;
-        this.nodeStyles.addRule();
-    }
-};
-
-WebInspector.RulesStyleDetailsPanel.prototype.__proto__ = WebInspector.StyleDetailsPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/RuntimeObserver.js b/Source/WebInspectorUI/UserInterface/RuntimeObserver.js
deleted file mode 100644
index 2bbc7acf0..000000000
--- a/Source/WebInspectorUI/UserInterface/RuntimeObserver.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.RuntimeObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.RuntimeObserver.prototype = {
-    constructor: WebInspector.RuntimeObserver,
-
-    // Events defined by the "Runtime" domain (see WebCore/inspector/Inspector.json).
-
-    executionContextCreated: function(contextPayload)
-    {
-        WebInspector.frameResourceManager.executionContextCreated(contextPayload);
-    }
-};
-
-WebInspector.RuntimeObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeBar.css b/Source/WebInspectorUI/UserInterface/ScopeBar.css
deleted file mode 100644
index 08ad58b84..000000000
--- a/Source/WebInspectorUI/UserInterface/ScopeBar.css
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.scope-bar {
-    font-family: Lucida Grande, sans-serif;
-    padding: 0 3px;
-    overflow: hidden;
-}
-
-.scope-bar > li {
-    display: inline-block;
-    margin: 0 2px;
-    padding: 0 8px 3px;
-    font-size: 11px;
-    font-weight: bold;
-    line-height: 12px;
-    color: rgb(46, 46, 46);
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 9px;
-    text-align: center;
-
-    transition: 200ms ease-in-out;
-    transition-property: background-color, border-color;
-}
-
-.scope-bar > li.selected,
-.scope-bar > li:active {
-    transition-duration: 75ms;
-}
-
-.scope-bar > li:hover {
-    border-color: rgba(0, 0, 0, 0.15);
-}
-
-.scope-bar > li.selected {
-    background-color: rgba(0, 0, 0, 0.06);
-    border-color: rgba(0, 0, 0, 0.30);
-}
-
-.scope-bar > li:active {
-    background-color: rgba(0, 0, 0, 0.16);
-    border-color: rgba(0, 0, 0, 0.40);
-}
diff --git a/Source/WebInspectorUI/UserInterface/ScopeBar.js b/Source/WebInspectorUI/UserInterface/ScopeBar.js
deleted file mode 100644
index c17355197..000000000
--- a/Source/WebInspectorUI/UserInterface/ScopeBar.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScopeBar = function(identifier, items, defaultItem) {
-    WebInspector.NavigationItem.call(this, identifier);
-
-    this._element.classList.add(WebInspector.ScopeBar.StyleClassName);
-
-    this._items = items;
-    this._defaultItem = defaultItem;
-
-    this._itemsById = [];
-    this._populate();
-};
-
-WebInspector.ScopeBar.StyleClassName = "scope-bar";
-WebInspector.ScopeBar.Event = {
-    SelectionChanged: "scopebar-selection-did-change"
-};
-
-WebInspector.ScopeBar.prototype = {
-    constructor: WebInspector.ScopeBar,
-
-    // Public
-
-    get defaultItem()
-    {
-        return this._defaultItem;
-    },
-
-    item: function(id)
-    {
-        return this._itemsById[id];
-    },
-
-    get selectedItems()
-    {
-        return this._items.filter(function(item) {
-            return item.selected;
-        });
-    },
-
-    updateLayout: function(expandOnly)
-    {
-        if (expandOnly)
-            return;
-
-        for (var i = 0; i < this._items.length; ++i) {
-            var item = this._items[i];
-            var isSelected = item.selected;
-
-            if (!isSelected)
-                item.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
-
-            var selectedWidth = item.element.offsetWidth;
-            if (selectedWidth)
-                item.element.style.minWidth = selectedWidth + "px";
-
-            if (!isSelected)
-                item.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
-        }
-    },
-
-    // Private
-    
-    _populate: function()
-    {
-        var item;
-        for (var i = 0; i < this._items.length; ++i) {
-            item = this._items[i];
-            this._itemsById[item.id] = item;
-            this._element.appendChild(item.element);
-
-            item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
-        }
-
-        if (!this.selectedItems.length && this._defaultItem)
-            this._defaultItem.selected = true;
-    },
-    
-    _itemSelectionDidChange: function(event)
-    {
-        var sender = event.target;
-        var item;
-
-        // An exclusive item was selected, unselect everything else.
-        if (sender.isExclusive && sender.selected) {
-            for (var i = 0; i < this._items.length; ++i) {
-                item = this._items[i];
-                if (item !== sender)
-                    item.selected = false;
-            }
-        } else {
-            var replacesCurrentSelection = !event.data.withModifier;
-            for (var i = 0; i < this._items.length; ++i) {
-                item = this._items[i];
-                if (item.isExclusive && item !== sender && sender.selected)
-                    item.selected = false;
-                else if (sender.selected && replacesCurrentSelection && sender !== item)
-                    item.selected = false;
-            }
-        }
-
-        // If nothing is selected anymore, select the default item.
-        if (!this.selectedItems.length && this._defaultItem)
-            this._defaultItem.selected = true;
-
-        this.dispatchEventToListeners(WebInspector.ScopeBar.Event.SelectionChanged);
-    }
-};
-
-WebInspector.ScopeBar.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeBarItem.js b/Source/WebInspectorUI/UserInterface/ScopeBarItem.js
deleted file mode 100644
index 6ad2863b0..000000000
--- a/Source/WebInspectorUI/UserInterface/ScopeBarItem.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScopeBarItem = function(id, label, isExclusive) {
-    WebInspector.Object.call(this);
-
-    this.id = id;
-    this.label = label;
-    this.isExclusive = isExclusive;
-    
-    this._selectedSetting = new WebInspector.Setting("scopebaritem-" + id, false);
-
-    this._markElementSelected(this._selectedSetting.value);
-};
-
-WebInspector.ScopeBarItem.SelectedStyleClassName = "selected";
-WebInspector.ScopeBarItem.Event = {
-    SelectionChanged: "scope-bar-item-selection-did-change"
-};
-
-WebInspector.ScopeBarItem.prototype = {
-    constructor: WebInspector.ScopeBarItem,
-
-    // Public
-
-    get element()
-    {
-        if (!this._element) {
-            this._element = document.createElement("li");
-            this._element.textContent = this.label;
-            this._element.addEventListener("click", this._clicked.bind(this), false);
-        }
-        return this._element;
-    },
-    
-    get selected()
-    {
-        return this._selectedSetting.value;
-    },
-
-    set selected(selected)
-    {
-        this.setSelected(selected, false);
-    },
-    
-    setSelected: function(selected, withModifier)
-    {
-        if (this._selectedSetting.value === selected)
-            return;
-
-        this._markElementSelected(selected);
-
-        this._selectedSetting.value = selected;
-
-        this.dispatchEventToListeners(WebInspector.ScopeBarItem.Event.SelectionChanged, {withModifier: withModifier});
-    },
-
-    // Private
-
-    _markElementSelected: function(selected)
-    {
-        if (selected)
-            this.element.classList.add(WebInspector.ScopeBarItem.SelectedStyleClassName);
-        else
-            this.element.classList.remove(WebInspector.ScopeBarItem.SelectedStyleClassName);
-    },
-
-    _clicked: function(event)
-    {
-        var withModifier = (event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
-        this.setSelected(!this.selected, withModifier);
-    }
-};
-
-WebInspector.ScopeBarItem.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeChainDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/ScopeChainDetailsSidebarPanel.js
deleted file mode 100644
index 03fd9fa90..000000000
--- a/Source/WebInspectorUI/UserInterface/ScopeChainDetailsSidebarPanel.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScopeChainDetailsSidebarPanel = function() {
-    WebInspector.DetailsSidebarPanel.call(this, "scope-chain", WebInspector.UIString("Scope Chain"), WebInspector.UIString("Scope Chain"), "Images/NavigationItemVariable.pdf", "5");
-
-    this._callFrame = null;
-};
-
-WebInspector.ScopeChainDetailsSidebarPanel.prototype = {
-    constructor: WebInspector.ScopeChainDetailsSidebarPanel,
-
-    // Public
-
-    inspect: function(objects)
-    {
-        // Convert to a single item array if needed.
-        if (!(objects instanceof Array))
-            objects = [objects];
-
-        var callFrameToInspect = null;
-
-        // Iterate over the objects to find a WebInspector.CallFrame to inspect.
-        for (var i = 0; i < objects.length; ++i) {
-            if (!(objects[i] instanceof WebInspector.CallFrame))
-                continue;
-            callFrameToInspect = objects[i];
-            break;
-        }
-
-        this.callFrame = callFrameToInspect;
-
-        return !!this.callFrame;
-    },
-
-    get callFrame()
-    {
-        return this._callFrame;
-    },
-
-    set callFrame(callFrame)
-    {
-        if (callFrame === this._callFrame)
-            return;
-
-        this._callFrame = callFrame;
-
-        this.needsRefresh();
-    },
-
-    refresh: function()
-    {
-        var callFrame = this.callFrame;
-        if (!callFrame)
-            return;
-
-        var detailsSections = [];
-        var foundLocalScope = false;
-
-        var sectionCountByType = {};
-        for (var type in WebInspector.ScopeChainNode.Type)
-            sectionCountByType[WebInspector.ScopeChainNode.Type[type]] = 0;
-
-        var scopeChain = callFrame.scopeChain;
-        for (var i = 0; i < scopeChain.length; ++i) {
-            var scope = scopeChain[i];
-
-            var title = null;
-            var extraProperties = null;
-            var collapsedByDefault = false;
-            var dontHighlightNonEnumerableProperties = true;
-
-            ++sectionCountByType[scope.type];
-
-            switch (scope.type) {
-                case WebInspector.ScopeChainNode.Type.Local:
-                    foundLocalScope = true;
-                    collapsedByDefault = false;
-                    dontHighlightNonEnumerableProperties = true;
-
-                    title = WebInspector.UIString("Local Variables");
-
-                    if (callFrame.thisObject)
-                        extraProperties = [new WebInspector.RemoteObjectProperty("this", callFrame.thisObject)];
-                    break;
-
-                case WebInspector.ScopeChainNode.Type.Closure:
-                    title = WebInspector.UIString("Closure Variables");
-                    dontHighlightNonEnumerableProperties = true;
-                    collapsedByDefault = false;
-                    break;
-
-                case WebInspector.ScopeChainNode.Type.Catch:
-                    title = WebInspector.UIString("Catch Variables");
-                    dontHighlightNonEnumerableProperties = true;
-                    collapsedByDefault = false;
-                    break;
-
-                case WebInspector.ScopeChainNode.Type.With:
-                    title = WebInspector.UIString("With Object Properties");
-                    collapsedByDefault = foundLocalScope;
-                    dontHighlightNonEnumerableProperties = false;
-                    break;
-
-                case WebInspector.ScopeChainNode.Type.Global:
-                    title = WebInspector.UIString("Global Variables");
-                    dontHighlightNonEnumerableProperties = false;
-                    collapsedByDefault = true;
-                    break;
-            }
-
-            var detailsSectionIdentifier = scope.type + "-" + sectionCountByType[scope.type];
-
-            var section = new WebInspector.ObjectPropertiesSection(scope.object, null, null, null, true, extraProperties, WebInspector.ScopeVariableTreeElement);
-            section.dontHighlightNonEnumerablePropertiesAtTopLevel = dontHighlightNonEnumerableProperties;
-            section.__propertyIdentifierPrefix = detailsSectionIdentifier;
-
-            var detailsSection = new WebInspector.DetailsSection(detailsSectionIdentifier, title, null, null, collapsedByDefault);
-            detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(section)];
-            detailsSections.push(detailsSection);
-        }
-
-        function delayedWork()
-        {
-            // Clear the timeout so we don't update the interface twice.
-            clearTimeout(timeout);
-
-            // Bail if the call frame changed while we were waiting for the async response.
-            if (this.callFrame !== callFrame)
-                return;
-
-            this.element.removeChildren();
-            for (var i = 0; i < detailsSections.length; ++i)
-                this.element.appendChild(detailsSections[i].element);
-        }
-
-        // We need a timeout in place in case there are long running, pending backend dispatches. This can happen
-        // if the debugger is paused in code that was executed from the console. The console will be waiting for
-        // the result of the execution and without a timeout we would never update the scope variables.
-        var timeout = setTimeout(delayedWork.bind(this), 50);
-
-        // Since ObjectPropertiesSection populates asynchronously, we want to wait to replace the existing content
-        // until after all the pending asynchronous requests are completed. This prevents severe flashing while stepping.
-        InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
-    }
-};
-
-WebInspector.ScopeChainDetailsSidebarPanel.prototype.__proto__ = WebInspector.DetailsSidebarPanel.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeChainNode.js b/Source/WebInspectorUI/UserInterface/ScopeChainNode.js
deleted file mode 100644
index 0ba8bc753..000000000
--- a/Source/WebInspectorUI/UserInterface/ScopeChainNode.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScopeChainNode = function(type, object)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(typeof type === "string");
-    console.assert(object instanceof WebInspector.RemoteObject);
-
-    if (type in WebInspector.ScopeChainNode.Type)
-        type = WebInspector.ScopeChainNode.Type[type];
-
-    this._type = type || null;
-    this._object = object || null;
-};
-
-WebInspector.ScopeChainNode.Type = {
-    Local: "scope-chain-type-local",
-    Global: "scope-chain-type-global",
-    With: "scope-chain-type-with",
-    Closure: "scope-chain-type-closure",
-    Catch: "scope-chain-type-catch"
-};
-
-WebInspector.ScopeChainNode.prototype = {
-    constructor: WebInspector.ScopeChainNode,
-
-    // Public
-
-    get type()
-    {
-        return this._type;
-    },
-
-    get object()
-    {
-        return this._object;
-    }
-};
-
-WebInspector.ScopeChainNode.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScopeVariableTreeElement.js b/Source/WebInspectorUI/UserInterface/ScopeVariableTreeElement.js
deleted file mode 100644
index 0ee232099..000000000
--- a/Source/WebInspectorUI/UserInterface/ScopeVariableTreeElement.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright (C) 2008, 2013 Apple Inc. All Rights Reserved.
- * Copyright (C) 2011 Google Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScopeVariableTreeElement = function(property)
-{
-    WebInspector.ObjectPropertyTreeElement.call(this, property);
-};
-
-WebInspector.ScopeVariableTreeElement._expandedProperties = {};
-
-WebInspector.ScopeVariableTreeElement.prototype = {
-    constructor: WebInspector.ScopeVariableTreeElement,
-
-    // Public
-
-    onattach: function()
-    {
-        WebInspector.ObjectPropertyTreeElement.prototype.onattach.call(this);
-
-        if (this.hasChildren && this.constructor._expandedProperties.hasOwnProperty(this.propertyIdentifier))
-            this.expand();
-    },
-
-    onexpand: function()
-    {
-        this.constructor._expandedProperties[this.propertyIdentifier] = true;
-    },
-
-    oncollapse: function()
-    {
-        delete this.constructor._expandedProperties[this.propertyIdentifier];
-    },
-
-    get propertyIdentifier()
-    {
-        if ("_propertyIdentifier" in this)
-            return this._propertyIdentifier;
-
-        var section = this.treeOutline.section;
-        this._propertyIdentifier = (section.__propertyIdentifierPrefix ? section.__propertyIdentifierPrefix + "-" : "") + this.propertyPath;
-        return this._propertyIdentifier;
-    },
-
-    get propertyPath()
-    {
-        if ("_propertyPath" in this)
-            return this._propertyPath;
-
-        var current = this;
-        var result;
-
-        do {
-            if (current.property) {
-                if (result)
-                    result = current.property.name + "." + result;
-                else
-                    result = current.property.name;
-            }
-
-            current = current.parent;
-        } while (current && !current.root);
-
-        this._propertyPath = result;
-        return result;
-    }
-};
-
-WebInspector.ScopeVariableTreeElement.prototype.__proto__ = WebInspector.ObjectPropertyTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Script.js b/Source/WebInspectorUI/UserInterface/Script.js
deleted file mode 100644
index 63f401d4c..000000000
--- a/Source/WebInspectorUI/UserInterface/Script.js
+++ /dev/null
@@ -1,170 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Script = function(id, range, url, injected, sourceMapURL)
-{
-    WebInspector.SourceCode.call(this);
-
-    console.assert(id);
-    console.assert(range instanceof WebInspector.TextRange);
-
-    this._id = id || null;
-    this._range = range || null;
-    this._url = url || null;
-    this._injected = injected || false;
-
-    this._resource = this._resolveResource();
-    if (this._resource)
-        this._resource.associateWithScript(this);
-
-    if (sourceMapURL)
-        WebInspector.sourceMapManager.downloadSourceMap(sourceMapURL, this._url, this);
-};
-
-WebInspector.Script.resetUniqueDisplayNameNumbers = function()
-{
-    WebInspector.Script._nextUniqueDisplayNameNumber = 1;
-}
-
-WebInspector.Script._nextUniqueDisplayNameNumber = 1;
-
-WebInspector.Script.prototype = {
-    constructor: WebInspector.Script,
-
-    // Public
-
-    get id()
-    {
-        return this._id;
-    },
-
-    get range()
-    {
-        return this._range;
-    },
-
-    get url()
-    {
-        return this._url;
-    },
-
-    get urlComponents()
-    {
-        if (!this._urlComponents)
-            this._urlComponents = parseURL(this._url);
-        return this._urlComponents;
-    },
-
-    get displayName()
-    {
-        if (this._url)
-            return WebInspector.displayNameForURL(this._url, this.urlComponents);
-
-        // Assign a unique number to the script object so it will stay the same.
-        if (!this._uniqueDisplayNameNumber)
-            this._uniqueDisplayNameNumber = this.constructor._nextUniqueDisplayNameNumber++;
-
-        return WebInspector.UIString("Anonymous Script %d").format(this._uniqueDisplayNameNumber);
-    },
-
-    get injected()
-    {
-        return this._injected;
-    },
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    canRequestContentFromBackend: function()
-    {
-        // We can request content if we have an id.
-        return !!this._id;
-    },
-
-    requestContentFromBackend: function(callback)
-    {
-        if (!this._id) {
-            // There is no identifier to request content with. Return false to cause the
-            // pending callbacks to get null content.
-            return false;
-        }
-
-        DebuggerAgent.getScriptSource(this._id, callback);
-        return true;
-    },
-
-    // Private
-
-    _resolveResource: function()
-    {
-        // FIXME: We should be able to associate a Script with a Resource through identifiers,
-        // we shouldn't need to lookup by URL, which is not safe with frames, where there might
-        // be multiple resources with the same URL.
-        // <rdar://problem/13373951> Scripts should be able to associate directly with a Resource
-
-        // No URL, no resource.
-        if (!this._url)
-            return null;
-
-        try {
-            // Try with the Script's full URL.
-            var resource = WebInspector.frameResourceManager.resourceForURL(this.url);
-            if (resource)
-                return resource;
-
-            // Try with the Script's full decoded URL.
-            var decodedURL = decodeURI(this._url);
-            if (decodedURL !== this._url) {
-                resource = WebInspector.frameResourceManager.resourceForURL(decodedURL);
-                if (resource)
-                    return resource;
-            }
-
-            // Next try removing any fragment in the original URL.
-            var urlWithoutFragment = removeURLFragment(this._url);
-            if (urlWithoutFragment !== this._url) {
-                resource = WebInspector.frameResourceManager.resourceForURL(urlWithoutFragment);
-                if (resource)
-                    return resource;
-            }
-
-            // Finally try removing any fragment in the decoded URL.
-            var decodedURLWithoutFragment = removeURLFragment(decodedURL);
-            if (decodedURLWithoutFragment !== decodedURL) {
-                resource = WebInspector.frameResourceManager.resourceForURL(decodedURLWithoutFragment);
-                if (resource)
-                    return resource;
-            }
-        } catch (e) {
-            // Ignore possible URIErrors.
-        }
-
-        return null;
-    }
-};
-
-WebInspector.Script.prototype.__proto__ = WebInspector.SourceCode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptContentView.js b/Source/WebInspectorUI/UserInterface/ScriptContentView.js
deleted file mode 100644
index bddc61181..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptContentView.js
+++ /dev/null
@@ -1,213 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScriptContentView = function(script)
-{
-    WebInspector.ContentView.call(this, script);
-
-    this.element.classList.add(WebInspector.ScriptContentView.StyleClassName);
-
-    // Append a spinner while waiting for _contentWillPopulate.
-    var spinner = new WebInspector.IndeterminateProgressSpinner;
-    this.element.appendChild(spinner.element);
-
-    this._script = script;
-
-    // This view is only for standalone Scripts with no corresponding Resource. All other Scripts
-    // should be handled by TextResourceContentView via the Resource.
-    console.assert(!script.resource);
-    console.assert(script.range.startLine === 0);
-    console.assert(script.range.startColumn === 0);
-
-    this._textEditor = new WebInspector.SourceCodeTextEditor(script);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange, this._executionLineNumberDidChange, this);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
-    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate, this._contentWillPopulate, this);
-    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate, this._contentDidPopulate, this);
-
-    var toolTip = WebInspector.UIString("Pretty print");
-    var activatedToolTip = WebInspector.UIString("Original formatting");
-    this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.pdf", 16, 16);
-    this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
-    this._prettyPrintButtonNavigationItem.enabled = false; // Enabled when the text editor is populated with content.
-};
-
-WebInspector.ScriptContentView.StyleClassName = "script";
-
-WebInspector.ScriptContentView.prototype = {
-    constructor: WebInspector.ScriptContentView,
-
-    // Public
-
-    get navigationItems()
-    {
-        return [this._prettyPrintButtonNavigationItem];
-    },
-
-    get script()
-    {
-        return this._script;
-    },
-
-    get textEditor()
-    {
-        return this._textEditor;
-    },
-
-    get supplementalRepresentedObjects()
-    {
-        if (isNaN(this._textEditor.executionLineNumber))
-            return [];
-
-        // If the SourceCodeTextEditor has an executionLineNumber, we can assume
-        // it is always the active call frame.
-        return [WebInspector.debuggerManager.activeCallFrame];
-    },
-
-    revealPosition: function(position, textRangeToSelect, forceUnformatted)
-    {
-        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
-    },
-
-    shown: function()
-    {
-        this._textEditor.shown();
-    },
-
-    hidden: function()
-    {
-        this._textEditor.hidden();
-    },
-
-    closed: function()
-    {
-        this._textEditor.close();
-    },
-
-    get supportsSave()
-    {
-        return true;
-    },
-
-    get saveData()
-    {
-        var url = this._script.url || "web-inspector:///" + encodeURI(this._script.displayName) + ".js";
-        return {url: url, content: this._textEditor.string};
-    },
-
-    get supportsSearch()
-    {
-        return true;
-    },
-
-    get numberOfSearchResults()
-    {
-        return this._textEditor.numberOfSearchResults;
-    },
-
-    get hasPerformedSearch()
-    {
-        return this._textEditor.currentSearchQuery !== null;
-    },
-
-    set automaticallyRevealFirstSearchResult(reveal)
-    {
-        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
-    },
-
-    performSearch: function(query)
-    {
-        this._textEditor.performSearch(query);
-    },
-
-    searchCleared: function()
-    {
-        this._textEditor.searchCleared();
-    },
-
-    searchQueryWithSelection: function()
-    {
-        return this._textEditor.searchQueryWithSelection();
-    },
-
-    revealPreviousSearchResult: function(changeFocus)
-    {
-        this._textEditor.revealPreviousSearchResult(changeFocus);
-    },
-
-    revealNextSearchResult: function(changeFocus)
-    {
-        this._textEditor.revealNextSearchResult(changeFocus);
-    },
-
-    updateLayout: function()
-    {
-        this._textEditor.updateLayout();
-    },
-
-    // Private
-
-    _contentWillPopulate: function(event)
-    {
-        if (this._textEditor.element.parentNode === this.element)
-            return;
-
-        // Allow editing any local file since edits can be saved and reloaded right from the Inspector.
-        if (this._script.urlComponents.scheme === "file")
-            this._textEditor.readOnly = false;
-
-        this.element.removeChildren();
-        this.element.appendChild(this._textEditor.element);
-    },
-
-    _contentDidPopulate: function(event)
-    {
-        this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
-    },
-
-    _togglePrettyPrint: function(event)
-    {
-        var activated = !this._prettyPrintButtonNavigationItem.activated;
-        this._textEditor.formatted = activated;
-    },
-
-    _textEditorFormattingDidChange: function(event)
-    {
-        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
-    },
-
-    _executionLineNumberDidChange: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
-    },
-
-    _numberOfSearchResultsDidChange: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
-    }
-};
-
-WebInspector.ScriptContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js
deleted file mode 100644
index cb3c6ac2e..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGrid.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScriptTimelineDataGrid = function(columns)
-{
-    WebInspector.TimelineDataGrid.call(this, columns);
-}
-
-WebInspector.ScriptTimelineDataGrid.prototype = {
-    constructor: WebInspector.ScriptTimelineDataGrid,
-
-    // Protected
-
-    callFramePopoverAnchorElement: function()
-    {
-        return this.selectedNode.elementWithColumnIdentifier("resource");
-    }
-}
-
-WebInspector.ScriptTimelineDataGrid.prototype.__proto__ = WebInspector.TimelineDataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js
deleted file mode 100644
index 55948ff7b..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineDataGridNode.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScriptTimelineDataGridNode = function(scriptTimelineRecord, baseStartTime)
-{
-    WebInspector.DataGridNode.call(this, {});
-
-    this._record = scriptTimelineRecord;
-    this._baseStartTime = baseStartTime || 0;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.ScriptTimelineDataGridNode);
-
-WebInspector.ScriptTimelineDataGridNode.IconStyleClassName = "icon";
-
-WebInspector.ScriptTimelineDataGridNode.prototype = {
-    constructor: WebInspector.ScriptTimelineDataGridNode,
-
-    // Public
-
-    get record()
-    {
-        return this._record;
-    },
-
-    get data()
-    {
-        return this._record;
-    },
-
-    createCellContent: function(columnIdentifier, cell)
-    {
-        const emptyValuePlaceholderString = "\u2014";
-        var value = this.data[columnIdentifier];
-
-        switch (columnIdentifier) {
-        case "eventType":
-            return WebInspector.ScriptTimelineRecord.EventType.displayName(value);
-
-        case "details":
-            return value ? value : emptyValuePlaceholderString;
-
-        case "resource":
-            if (!value)
-                return emptyValuePlaceholderString;
-
-            console.assert(this.data.sourceCodeLocation);
-
-            cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
-            cell.classList.add(value.type);
-
-            // Give the whole cell a tooltip and keep it up to date.
-            var sourceCodeLocation = this.data.sourceCodeLocation;
-            sourceCodeLocation.populateLiveDisplayLocationTooltip(cell);
-
-            var fragment = document.createDocumentFragment();
-
-            var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, false, true);
-            fragment.appendChild(goToArrowButtonLink);
-
-            var icon = document.createElement("div");
-            icon.className = WebInspector.ScriptTimelineDataGridNode.IconStyleClassName;
-            fragment.appendChild(icon);
-
-            var titleElement = document.createElement("span");
-            sourceCodeLocation.populateLiveDisplayLocationString(titleElement, "textContent");
-            fragment.appendChild(titleElement);
-
-            return fragment;
-
-        case "startTime":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value - this._baseStartTime);
-
-        case "duration":
-            return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
-        }
-
-        return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
-    }
-}
-
-WebInspector.ScriptTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js b/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js
deleted file mode 100644
index fedee4379..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTimelineRecord.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScriptTimelineRecord = function(eventType, startTime, endTime, details, resource, lineNumber, callFrames)
-{
-    WebInspector.TimelineRecord.call(this, WebInspector.TimelineRecord.Type.Script, startTime, endTime);
-
-    console.assert(eventType);
-
-    if (eventType in WebInspector.ScriptTimelineRecord.EventType)
-        eventType = WebInspector.ScriptTimelineRecord.EventType[eventType];
-
-    this._eventType = eventType;
-    this._details = details || "";
-    this._resource = resource || null;
-    this._lineNumber = lineNumber || NaN;
-    this._callFrames = callFrames || null;
-};
-
-WebInspector.ScriptTimelineRecord.EventType = {
-    ScriptEvaluated: "script-timeline-record-script-evaluated",
-    EventDispatched: "script-timeline-record-event-dispatch",
-    TimerFired: "script-timeline-record-timer-fired",
-    TimerInstalled: "script-timeline-record-timer-installed",
-    TimerRemoved: "script-timeline-record-timer-removed",
-    AnimationFrameFired: "script-timeline-record-animation-frame-fired"
-};
-
-WebInspector.ScriptTimelineRecord.EventType.displayName = function(eventType)
-{
-    switch(eventType) {
-    case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
-        return WebInspector.UIString("Script Evaluated");
-    case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
-        return WebInspector.UIString("Event Dispatched");
-    case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
-        return WebInspector.UIString("Timer Fired");
-    case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
-        return WebInspector.UIString("Timer Installed");
-    case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
-        return WebInspector.UIString("Timer Removed");
-    case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
-        return WebInspector.UIString("Animation Frame Fired");
-    }
-};
-
-WebInspector.ScriptTimelineRecord.prototype = {
-    constructor: WebInspector.ScriptTimelineRecord,
-
-    // Public
-
-    get eventType()
-    {
-        return this._eventType;
-    },
-
-    get details()
-    {
-        return this._details;
-    },
-
-    get resource()
-    {
-        return this._resource;
-    },
-
-    get lineNumber()
-    {
-        return this._lineNumber;
-    },
-
-    get callFrames()
-    {
-        return this._callFrames;
-    },
-
-    get sourceCodeLocation()
-    {
-        if ("_sourceCodeLocation" in this)
-            return this._sourceCodeLocation;
-
-        if (!this._resource) {
-            this._sourceCodeLocation = null;
-            return this._sourceCodeLocation;
-        }
-
-        // FIXME: Script Timeline Events with a location should always contain a call stack
-        // or a complete (url:line:column) triplet.
-
-        if (this._callFrames) {
-            for (var i = 0; i < this._callFrames.length; ++i) {
-                var callFrame = this._callFrames[i];
-                if (callFrame.nativeCode)
-                    continue;
-
-                if (!callFrame.sourceCodeLocation)
-                    break;
-
-                this._sourceCodeLocation = callFrame.sourceCodeLocation;
-                return this._sourceCodeLocation;
-            }
-        }
-
-        var lineNumber = isNaN(this._lineNumber) ? 0 : this._lineNumber;
-        this._sourceCodeLocation = this._resource.createSourceCodeLocation(lineNumber, 0);
-        return this._sourceCodeLocation;
-    }
-};
-
-WebInspector.ScriptTimelineRecord.prototype.__proto__ = WebInspector.TimelineRecord.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ScriptTreeElement.js b/Source/WebInspectorUI/UserInterface/ScriptTreeElement.js
deleted file mode 100644
index 7023bb188..000000000
--- a/Source/WebInspectorUI/UserInterface/ScriptTreeElement.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ScriptTreeElement = function(script)
-{
-    console.assert(script instanceof WebInspector.Script);
-    
-    WebInspector.SourceCodeTreeElement.call(this, script, WebInspector.ScriptTreeElement.StyleClassName, null, null, script, false);
-
-    this.mainTitle = script.displayName;
-
-    if (script.url) {
-        // Show the host as the subtitle if it is different from the main title.
-        var subtitle = WebInspector.displayNameForHost(script.urlComponents.host);
-        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
-
-        this.tooltip = script.url;
-
-        this.addClassName(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
-        this.addClassName(WebInspector.Resource.Type.Script);
-    } else
-        this.addClassName(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
-
-    this._script = script;
-};
-
-WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName = "anonymous-script-icon";
-WebInspector.ScriptTreeElement.StyleClassName = "script";
-
-WebInspector.ScriptTreeElement.prototype = {
-    constructor: WebInspector.ScriptTreeElement,
-
-    // Public
-
-    get script()
-    {
-        return this._script;
-    }
-};
-
-WebInspector.ScriptTreeElement.prototype.__proto__ = WebInspector.SourceCodeTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SearchBar.css b/Source/WebInspectorUI/UserInterface/SearchBar.css
deleted file mode 100644
index 7275e4c55..000000000
--- a/Source/WebInspectorUI/UserInterface/SearchBar.css
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.search-bar > input[type="search"] {
-    margin: 1px 6px;
-
-    outline: none;
-
-    -webkit-appearance: none;
-
-    border: 1px solid rgba(0, 0, 0, 0.35);
-    border-radius: 10px;
-    background-color: rgba(255, 255, 255, 0.2);
-    box-shadow: inset rgba(0, 0, 0, 0.1) 0 1px 0;
-    background-clip: padding-box;
-
-    height: 19px;
-
-    transition: background-color 200ms ease-in-out;
-}
-
-.search-bar > input[type="search"]::-webkit-input-placeholder {
-    color: rgba(0, 0, 0, 0.35);
-}
-
-.search-bar > input[type="search"]:focus { background-color: white; }
-.search-bar > input[type="search"]:not(:placeholder-shown) { background-color: white; } /* Needs to be a separate rule. See http://webkit.org/b/118162 */
diff --git a/Source/WebInspectorUI/UserInterface/SearchBar.js b/Source/WebInspectorUI/UserInterface/SearchBar.js
deleted file mode 100644
index 0f91f4283..000000000
--- a/Source/WebInspectorUI/UserInterface/SearchBar.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SearchBar = function(identifier, placeholder, delegate) {
-    WebInspector.NavigationItem.call(this, identifier);
-
-    this.delegate = delegate;
-
-    this._element.classList.add(WebInspector.SearchBar.StyleClassName);
-
-    this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
-    this._keyboardShortcutEnter = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter);
-
-    this._searchInput = this._element.appendChild(document.createElement("input"));
-    this._searchInput.type = "search";
-    this._searchInput.spellcheck = false;
-    this._searchInput.incremental = true;
-    this._searchInput.setAttribute("results", 5);
-    this._searchInput.setAttribute("autosave", identifier + "-autosave");
-    this._searchInput.setAttribute("placeholder", placeholder);
-    this._searchInput.addEventListener("search", this._handleSearchEvent.bind(this), false);
-    this._searchInput.addEventListener("keydown", this._handleKeydownEvent.bind(this), false);
-};
-
-WebInspector.SearchBar.StyleClassName = "search-bar";
-WebInspector.SearchBar.Event = {
-    TextChanged: "searchbar-text-did-change"
-};
-
-WebInspector.SearchBar.prototype = {
-    constructor: WebInspector.SearchBar,
-
-    // Public
-
-    get text()
-    {
-        return this._searchInput.value;
-    },
-
-    set text(newText)
-    {
-        this._searchInput.value = newText;
-    },
-
-    focus: function()
-    {
-        this._searchInput.focus();
-        this._searchInput.select();
-    },
-
-    // Private
-
-    _handleSearchEvent: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.SearchBar.Event.TextChanged);
-    },
-    
-    _handleKeydownEvent: function(event)
-    {
-        if (this._keyboardShortcutEsc.matchesEvent(event)) {
-            if (this.delegate && typeof this.delegate.searchBarWantsToLoseFocus === "function") {
-                this.delegate.searchBarWantsToLoseFocus(this);
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        } else if (this._keyboardShortcutEnter.matchesEvent(event)) {
-            if (this.delegate && typeof this.delegate.searchBarDidActivate === "function") {
-                this.delegate.searchBarDidActivate(this);
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        }
-    }
-};
-
-WebInspector.SearchBar.prototype.__proto__ = WebInspector.NavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SearchIcons.css b/Source/WebInspectorUI/UserInterface/SearchIcons.css
deleted file mode 100644
index c362c6d12..000000000
--- a/Source/WebInspectorUI/UserInterface/SearchIcons.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.dom-match-element-icon .icon {
-    content: url(Images/DOMElement.pdf);
-}
-
-.dom-match-text-node-icon .icon {
-    content: url(Images/DOMTextNode.pdf);
-}
-
-.dom-match-comment-icon .icon {
-    content: url(Images/DOMComment.pdf);
-}
-
-.dom-match-document-type-icon .icon {
-    content: url(Images/DOMDocumentType.pdf);
-}
-
-.dom-match-character-data-icon .icon {
-    content: url(Images/DOMCharacterData.pdf);
-}
-
-.dom-match-node-icon .icon {
-    content: url(Images/DOMNode.pdf);
-}
-
-.resource-match-icon .icon {
-    content: url(Images/ResultLine.pdf);
-}
diff --git a/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js b/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js
deleted file mode 100644
index ec245d502..000000000
--- a/Source/WebInspectorUI/UserInterface/SearchResultTreeElement.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SearchResultTreeElement = function(representedObject)
-{
-    console.assert(representedObject instanceof WebInspector.DOMSearchMatchObject || representedObject instanceof WebInspector.ResourceSearchMatchObject);
-
-    var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
-
-    WebInspector.GeneralTreeElement.call(this, representedObject.className, title, null, representedObject, false);
-    this.small = true;
-};
-
-WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
-WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;
-WebInspector.SearchResultTreeElement.HighlightedStyleClassName = "highlighted";
-
-WebInspector.SearchResultTreeElement.prototype = {
-    constructor: WebInspector.SearchResultTreeElement,
-
-    // Public
-
-    get filterableData()
-    {
-        return {text: this.representedObject.title};
-    }
-};
-
-WebInspector.SearchResultTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
-
-WebInspector.SearchResultTreeElement.truncateAndHighlightTitle = function(title, searchTerm, sourceCodeTextRange)
-{
-    // Use the original location, since those line/column offsets match the line text in title.
-    var textRange = sourceCodeTextRange.textRange;
-    
-    var searchTermIndex = textRange.startColumn;
-
-    // We should only have one line text ranges, so make sure that is the case.
-    console.assert(textRange.startLine === textRange.endLine);
-
-    // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
-    // at the end of the string.
-    var modifiedTitle = null;
-    if (searchTermIndex > WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
-        modifiedTitle = "\u2026" + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
-        searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
-    } else
-        modifiedTitle = title;
-
-    // Truncate the tail of the title so the tooltip isn't so large.
-    modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
-
-    console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
-
-    var highlightedTitle = document.createDocumentFragment();
-
-    highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(0, searchTermIndex)));
-
-    var highlightSpan = document.createElement("span");
-    highlightSpan.className = WebInspector.SearchResultTreeElement.HighlightedStyleClassName
-    highlightSpan.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length)));
-    highlightedTitle.appendChild(highlightSpan);
-
-    highlightedTitle.appendChild(document.createTextNode(modifiedTitle.substring(searchTermIndex + searchTerm.length)));
-
-    return highlightedTitle;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Section.css b/Source/WebInspectorUI/UserInterface/Section.css
deleted file mode 100644
index 299fc0550..000000000
--- a/Source/WebInspectorUI/UserInterface/Section.css
+++ /dev/null
@@ -1,195 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.section {
-    position: relative;
-}
-
-.section .header {
-    color: black;
-    padding: 0 8px 0 18px;
-    min-height: 18px;
-    white-space: nowrap;
-    background-origin: padding;
-    background-clip: padding;
-}
-
-.section .header::before {
-    position: absolute;
-    top: 5px;
-    left: 7px;
-
-    width: 8px;
-    height: 8px;
-
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
-    background-size: 8px 8px;
-    background-repeat: no-repeat;
-
-    content: "";
-}
-
-.section.expanded .header::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
-}
-
-.section .header .title, .event-bar .header .title {
-    font-weight: normal;
-    word-wrap: break-word;
-    white-space: normal;
-    line-height: 18px;
-}
-
-.section .header .title.blank-title {
-    font-style: italic;
-}
-
-.section .header label, .event-bar .header label {
-    display: none;
-}
-
-.section.expanded .header label, .event-bar.expanded .header label {
-    display: inline;
-}
-
-.section .header .subtitle, .event-bar .header .subtitle {
-    float: right;
-    margin-left: 5px;
-    max-width: 55%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.section .header .subtitle a {
-    color: inherit;
-}
-
-.section .properties, .event-bar .event-properties {
-    display: none;
-}
-
-.section.expanded .properties, .event-bar.expanded .event-properties {
-    display: block;
-    padding-left: 16px;
-}
-
-.section.expanded.no-header .properties {
-    padding-left: 0;
-}
-
-.section.no-affect .properties li {
-    opacity: 0.5;
-}
-
-.section.no-affect .properties li.editing {
-    opacity: 1.0;
-}
-
-.properties-tree {
-    margin: 0;
-    padding: 0 6px 2px;
-    list-style: none;
-    min-height: 18px;
-    outline: none;
-}
-
-.properties-tree li {
-    margin-left: 12px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    -webkit-user-select: text;
-    cursor: default;
-}
-
-.properties-tree li.parent {
-    margin-left: 1px;
-}
-
-.properties-tree li.parent::before {
-    float: left;
-
-    content: "";
-
-    background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
-    background-size: 8px 8px;
-    background-repeat: no-repeat;
-
-    width: 8px;
-    height: 8px;
-
-    margin-top: 3px;
-    padding-right: 2px;
-}
-
-.properties-tree li.parent.expanded::before {
-    background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
-}
-
-.properties-tree li .info {
-    padding-top: 4px;
-    padding-bottom: 3px;
-}
-
-.properties-tree ol {
-    display: none;
-    margin: 0;
-    -webkit-padding-start: 12px;
-    list-style: none;
-}
-
-.properties-tree ol.expanded {
-    display: block;
-}
-
-.section .properties li.editing-sub-part {
-    padding: 3px 6px 8px 18px;
-    margin: -3px -6px -8px -6px;
-    text-overflow: clip;
-}
-
-.section .properties .name, .event-properties .name {
-    color: rgb(136, 19, 145);
-}
-
-.section .properties .dimmed {
-    opacity: 0.6;
-}
-
-.section .properties .value.error {
-    color: red;
-}
-
-.section .properties .number, .event-properties .number {
-    color: blue;
-}
-
-.section .properties .keyword, .event-properties .keyword {
-    color: rgb(136, 19, 79);
-}
-
-.section .properties .color, .event-properties .color {
-    color: rgb(118, 15, 21);
-}
diff --git a/Source/WebInspectorUI/UserInterface/Section.js b/Source/WebInspectorUI/UserInterface/Section.js
deleted file mode 100644
index 5305b0b06..000000000
--- a/Source/WebInspectorUI/UserInterface/Section.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Section = function(title, subtitle)
-{
-    WebInspector.Object.call(this);
-
-    this.element = document.createElement("div");
-    this.element.className = "section";
-    this.element._section = this;
-
-    if (typeof title === "string" || title instanceof Node || typeof subtitle === "string") {
-        this.headerElement = document.createElement("div");
-        this.headerElement.className = "header";
-
-        this.titleElement = document.createElement("div");
-        this.titleElement.className = "title";
-
-        this.subtitleElement = document.createElement("div");
-        this.subtitleElement.className = "subtitle";
-
-        this.headerElement.appendChild(this.subtitleElement);
-        this.headerElement.appendChild(this.titleElement);
-
-        this.headerElement.addEventListener("click", this.handleClick.bind(this), false);
-        this.element.appendChild(this.headerElement);
-
-        this.title = title;
-        this.subtitle = subtitle;
-    } else
-        this.element.classList.add("no-header");
-
-    this._expanded = false;
-
-    if (!this.headerElement)
-        this.expand();
-};
-
-WebInspector.Section.Event = {
-    VisibleContentDidChange: "section-visible-content-did-change"
-};
-
-WebInspector.Section.prototype = {
-    get title()
-    {
-        return this._title;
-    },
-
-    set title(x)
-    {
-        if (this._title === x)
-            return;
-        this._title = x;
-
-        if (x instanceof Node) {
-            this.titleElement.removeChildren();
-            this.titleElement.appendChild(x);
-        } else
-          this.titleElement.textContent = x;
-    },
-
-    get subtitle()
-    {
-        return this._subtitle;
-    },
-
-    set subtitle(x)
-    {
-        if (this._subtitle === x)
-            return;
-        this._subtitle = x;
-        this.subtitleElement.textContent = x;
-    },
-
-    get subtitleAsTextForTest()
-    {
-        var result = this.subtitleElement.textContent;
-        var child = this.subtitleElement.querySelector("[data-uncopyable]");
-        if (child) {
-            var linkData = child.getAttribute("data-uncopyable");
-            if (linkData)
-                result += linkData;
-        }
-        return result;
-    },
-
-    get expanded()
-    {
-        return this._expanded;
-    },
-
-    set expanded(x)
-    {
-        if (x)
-            this.expand();
-        else
-            this.collapse();
-    },
-
-    get populated()
-    {
-        return this._populated;
-    },
-
-    set populated(x)
-    {
-        this._populated = x;
-        if (!x && this._expanded) {
-            this.onpopulate();
-            this._populated = true;
-        }
-    },
-
-    onpopulate: function()
-    {
-        // Overriden by subclasses.
-    },
-
-    get firstSibling()
-    {
-        var parent = this.element.parentElement;
-        if (!parent)
-            return null;
-
-        var childElement = parent.firstChild;
-        while (childElement) {
-            if (childElement._section)
-                return childElement._section;
-            childElement = childElement.nextSibling;
-        }
-
-        return null;
-    },
-
-    get lastSibling()
-    {
-        var parent = this.element.parentElement;
-        if (!parent)
-            return null;
-
-        var childElement = parent.lastChild;
-        while (childElement) {
-            if (childElement._section)
-                return childElement._section;
-            childElement = childElement.previousSibling;
-        }
-
-        return null;
-    },
-
-    get nextSibling()
-    {
-        var curElement = this.element;
-        do {
-            curElement = curElement.nextSibling;
-        } while (curElement && !curElement._section);
-
-        return curElement ? curElement._section : null;
-    },
-
-    get previousSibling()
-    {
-        var curElement = this.element;
-        do {
-            curElement = curElement.previousSibling;
-        } while (curElement && !curElement._section);
-
-        return curElement ? curElement._section : null;
-    },
-
-    expand: function()
-    {
-        if (this._expanded)
-            return;
-        this._expanded = true;
-        this.element.classList.add("expanded");
-
-        if (!this._populated) {
-            this.onpopulate();
-            this._populated = true;
-        } else
-            this.dispatchEventToListeners(WebInspector.Section.Event.VisibleContentDidChange);
-    },
-
-    collapse: function()
-    {
-        if (!this._expanded)
-            return;
-        this._expanded = false;
-        this.element.classList.remove("expanded");
-    },
-
-    toggleExpanded: function()
-    {
-        this.expanded = !this.expanded;
-    },
-
-    handleClick: function(e)
-    {
-        this.toggleExpanded();
-        e.stopPropagation();
-    }
-};
-
-WebInspector.Section.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Setting.js b/Source/WebInspectorUI/UserInterface/Setting.js
deleted file mode 100644
index 79a80116b..000000000
--- a/Source/WebInspectorUI/UserInterface/Setting.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * Copyright (C) 2009 Google Inc. All rights reserved.
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are
- * met:
- *
- *     * Redistributions of source code must retain the above copyright
- * notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above
- * copyright notice, this list of conditions and the following disclaimer
- * in the documentation and/or other materials provided with the
- * distribution.
- *     * Neither the name of Google Inc. nor the names of its
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Setting = function(name, defaultValue)
-{
-    this._name = name;
-    this._localStorageKey = WebInspector.Setting.LocalStorageKeyPrefix + name;
-    this._defaultValue = defaultValue;
-}
-
-WebInspector.Object.addConstructorFunctions(WebInspector.Setting);
-
-WebInspector.Setting.Event = {
-    Changed: "setting-changed"
-};
-
-WebInspector.Setting.LocalStorageKeyPrefix = "com.apple.WebInspector.";
-
-WebInspector.Setting.prototype = {
-    constructor: WebInspector.Setting,
-
-    // Public
-
-    get name()
-    {
-        return this._name;
-    },
-
-    get value()
-    {
-        if ("_value" in this)
-            return this._value;
-
-        // Make a copy of the default value so changes to object values don't modify the default value.
-        this._value = JSON.parse(JSON.stringify(this._defaultValue));
-
-        if (window.localStorage && this._localStorageKey in window.localStorage) {
-            try {
-                this._value = JSON.parse(window.localStorage[this._localStorageKey]);
-            } catch(e) {
-                delete window.localStorage[this._localStorageKey];
-            }
-        }
-
-        return this._value;
-    },
-
-    set value(value)
-    {
-        this._value = value;
-
-        if (window.localStorage) {
-            try {
-                // Use Object.shallowEqual to properly compare objects.
-                if (Object.shallowEqual(this._value, this._defaultValue))
-                    delete window.localStorage[this._localStorageKey];
-                else
-                    window.localStorage[this._localStorageKey] = JSON.stringify(this._value);
-            } catch(e) {
-                console.error("Error saving setting with name: " + this._name);
-            }
-        }
-
-        this.dispatchEventToListeners(WebInspector.Setting.Event.Changed, this._value, {name: this._name});
-    }
-}
-
-WebInspector.Setting.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Sidebar.css b/Source/WebInspectorUI/UserInterface/Sidebar.css
deleted file mode 100644
index 3a1f7526a..000000000
--- a/Source/WebInspectorUI/UserInterface/Sidebar.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.sidebar {
-    position: relative;
-
-    background-color: rgb(227, 231, 235);
-}
-
-.sidebar.collapsed {
-    width: 0 !important;
-    border: none !important;
-}
-
-body.window-inactive .sidebar {
-    background-color: rgb(231, 231, 231);
-}
-
-.sidebar > .panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    display: none;
-
-    overflow: hidden;
-
-    z-index: 0; /* Workaround so that scroll bars appear above position:sticky section headers. */
-}
-
-.sidebar > .panel.selected {
-    display: block;
-}
-
-.sidebar > .resizer {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 5px;
-
-    z-index: 100;
-
-    cursor: col-resize;
-}
-
-.sidebar.right > .resizer {
-    left: -3px;
-}
-
-.sidebar.left > .resizer {
-    right: -3px;
-}
-
-.sidebar.collapsed.right > .resizer {
-    left: -5px;
-}
-
-.sidebar.collapsed.left > .resizer {
-    right: -5px;
-}
-
-.sidebar.left {
-    border-right: 1px solid rgb(153, 153, 153);
-}
-
-.sidebar.right {
-    background-color: rgb(231, 231, 231);
-    border-left: 1px solid rgb(153, 153, 153);
-}
diff --git a/Source/WebInspectorUI/UserInterface/Sidebar.js b/Source/WebInspectorUI/UserInterface/Sidebar.js
deleted file mode 100644
index 9b0872c2f..000000000
--- a/Source/WebInspectorUI/UserInterface/Sidebar.js
+++ /dev/null
@@ -1,319 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Sidebar = function(element, side, sidebarPanels, role, label) {
-    WebInspector.Object.call(this);
-
-    console.assert(!side || side === WebInspector.Sidebar.Sides.Left || side === WebInspector.Sidebar.Sides.Right);
-    this._side = side || WebInspector.Sidebar.Sides.Left;
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.Sidebar.StyleClassName);
-    this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
-    this._element.classList.add(this._side);
-
-    this._element.setAttribute("role", role || "group");
-    if (label)
-        this._element.setAttribute("aria-label", label);
-
-    this._resizeElement = document.createElement("div");
-    this._resizeElement.classList.add(WebInspector.Sidebar.ResizeElementStyleClassName);
-    this._resizeElement.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
-    this._resizeElement.addEventListener("dblclick", this._resizerDoubleClicked.bind(this), false);
-    this._element.insertBefore(this._resizeElement, this._element.firstChild);
-
-    this._sidebarPanels = [];
-
-    if (sidebarPanels) {
-        for (var i = 0; i < sidebarPanels.length; ++i)
-            this.addSidebarPanel(sidebarPanels[i]);
-    }
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.Sidebar);
-
-WebInspector.Sidebar.StyleClassName = "sidebar";
-WebInspector.Sidebar.CollapsedStyleClassName = "collapsed";
-WebInspector.Sidebar.ResizeElementStyleClassName = "resizer";
-WebInspector.Sidebar.AbsoluteMinimumWidth = 200;
-
-WebInspector.Sidebar.Sides = {};
-WebInspector.Sidebar.Sides.Right = "right";
-WebInspector.Sidebar.Sides.Left = "left";
-
-WebInspector.Sidebar.Event = {
-    SidebarPanelSelected: "sidebar-sidebar-panel-selected",
-    CollapsedStateDidChange: "sidebar-sidebar-collapsed-state-did-change",
-    WidthDidChange: "sidebar-width-did-change",
-};
-
-WebInspector.Sidebar.prototype = {
-    constructor: WebInspector.Sidebar,
-
-    // Public
-
-    addSidebarPanel: function(sidebarPanel)
-    {
-        console.assert(sidebarPanel instanceof WebInspector.SidebarPanel);
-        if (!(sidebarPanel instanceof WebInspector.SidebarPanel))
-            return;
-
-        console.assert(!sidebarPanel.parentSidebar);
-        if (sidebarPanel.parentSidebar)
-            return;
-
-        sidebarPanel._parentSidebar = this;
-
-        this._sidebarPanels.push(sidebarPanel);
-        this._element.appendChild(sidebarPanel.element);
-
-        sidebarPanel.added();
-
-        return sidebarPanel;
-    },
-
-    removeSidebarPanel: function(sidebarPanelOrIdentifierOrIndex, index)
-    {
-        var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
-        if (!sidebarPanel)
-            return;
-
-        sidebarPanel.willRemove();
-
-        sidebarPanel._parentSidebar = null;
-
-        if (this._selectedSidebarPanel === sidebarPanel) {
-            var index = this._sidebarPanels.indexOf(sidebarPanel);
-            this.selectedSidebarPanel = this._sidebarPanels[index - 1] || this._sidebarPanels[index + 1];
-        }
-
-        this._sidebarPanels.remove(sidebarPanel);
-        this._element.removeChild(sidebarPanel.element);
-
-        sidebarPanel.removed();
-
-        return sidebarPanel;
-    },
-
-    get selectedSidebarPanel()
-    {
-        return this._selectedSidebarPanel || null;
-    },
-
-    set selectedSidebarPanel(sidebarPanelOrIdentifierOrIndex)
-    {
-        var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
-        if (this._selectedSidebarPanel === sidebarPanel)
-            return;
-
-        if (this._selectedSidebarPanel) {
-            var wasVisible = this._selectedSidebarPanel.visible;
-
-            this._selectedSidebarPanel.selected = false;
-
-            if (wasVisible) {
-                this._selectedSidebarPanel.hidden();
-                this._selectedSidebarPanel.visibilityDidChange();
-            }
-        }
-
-        this._selectedSidebarPanel = sidebarPanel || null;
-
-        if (this._selectedSidebarPanel) {
-            this._selectedSidebarPanel.selected = true;
-
-            if (this._selectedSidebarPanel.visible) {
-                this._selectedSidebarPanel.shown();
-                this._selectedSidebarPanel.visibilityDidChange();
-            }
-        }
-
-        this.dispatchEventToListeners(WebInspector.Sidebar.Event.SidebarPanelSelected);
-    },
-
-    get minimumWidth()
-    {
-        return WebInspector.Sidebar.AbsoluteMinimumWidth;
-    },
-
-    get maximumWidth()
-    {
-        // FIXME: This is kind of arbitrary and ideally would be a more complex calculation based on the
-        // available space for the sibling elements.
-        return Math.round(window.innerWidth / 3);
-    },
-
-    get width()
-    {
-        return this._element.offsetWidth;
-    },
-
-    set width(newWidth)
-    {
-        if (newWidth === this.width)
-            return;
-
-        newWidth = Math.max(this.minimumWidth, Math.min(newWidth, this.maximumWidth));
-
-        this._element.style.width = newWidth + "px";
-
-        if (!this.collapsed && this._selectedSidebarPanel)
-            this._selectedSidebarPanel.widthDidChange();
-
-        this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
-    },
-
-    get collapsed()
-    {
-        return this._element.classList.contains(WebInspector.Sidebar.CollapsedStyleClassName);
-    },
-
-    set collapsed(flag)
-    {
-        if (flag === this.collapsed)
-            return;
-
-        if (flag)
-            this._element.classList.add(WebInspector.Sidebar.CollapsedStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.Sidebar.CollapsedStyleClassName);
-
-        if (this._selectedSidebarPanel) {
-            if (this._selectedSidebarPanel.visible)
-                this._selectedSidebarPanel.shown();
-            else
-                this._selectedSidebarPanel.hidden();
-
-            this._selectedSidebarPanel.visibilityDidChange();
-
-            this._selectedSidebarPanel.widthDidChange();
-        }
-
-        this.dispatchEventToListeners(WebInspector.Sidebar.Event.CollapsedStateDidChange);
-        this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
-    },
-
-    get sidebarPanels()
-    {
-        return this._sidebarPanels;
-    },
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get side()
-    {
-        return this._side;
-    },
-
-    findSidebarPanel: function(sidebarPanelOrIdentifierOrIndex)
-    {
-        var sidebarPanel = null;
-
-        if (sidebarPanelOrIdentifierOrIndex instanceof WebInspector.SidebarPanel) {
-            if (this._sidebarPanels.contains(sidebarPanelOrIdentifierOrIndex))
-                sidebarPanel = sidebarPanelOrIdentifierOrIndex;
-        } else if (typeof sidebarPanelOrIdentifierOrIndex === "number") {
-            sidebarPanel = this._sidebarPanels[sidebarPanelOrIdentifierOrIndex];
-        } else if (typeof sidebarPanelOrIdentifierOrIndex === "string") {
-            for (var i = 0; i < this._sidebarPanels.length; ++i) {
-                if (this._sidebarPanels[i].identifier === sidebarPanelOrIdentifierOrIndex) {
-                    sidebarPanel = this._sidebarPanels[i];
-                    break;
-                }
-            }
-        }
-
-        return sidebarPanel;
-    },
-
-    // Private
-
-    _navigationItemSelected: function(event)
-    {
-        this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
-    },
-
-    _resizerDoubleClicked: function(event)
-    {
-        this.collapsed = !this.collapsed;
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _resizerMouseDown: function(event)
-    {
-        if (event.button !== 0 || event.ctrlKey)
-            return;
-
-        document.body.style.cursor = "col-resize";
-
-        this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
-        this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
-
-        // Register these listeners on the document so we can track the mouse if it leaves the resizer.
-        document.addEventListener("mousemove", this._resizerMouseMovedEventListener, false);
-        document.addEventListener("mouseup", this._resizerMouseUpEventListener, false);
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _resizerMouseMoved: function(event)
-    {
-        if (this._side === WebInspector.Sidebar.Sides.Left)
-            var newWidth = event.pageX - this._element.totalOffsetLeft;
-        else
-            var newWidth = this._element.totalOffsetLeft + this._element.offsetWidth - event.pageX;
-
-        this.width = newWidth;
-        this.collapsed = (newWidth < (this.minimumWidth / 2));
-
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _resizerMouseUp: function(event)
-    {
-        if (event.button !== 0 || event.ctrlKey)
-            return;
-
-        document.body.style.removeProperty("cursor");
-
-        document.removeEventListener("mousemove", this._resizerMouseMovedEventListener, false);
-        document.removeEventListener("mouseup", this._resizerMouseUpEventListener, false);
-
-        delete this._resizerMouseMovedEventListener;
-        delete this._resizerMouseUpEventListener;
-
-        event.preventDefault();
-        event.stopPropagation();
-    }
-};
-
-WebInspector.Sidebar.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SidebarPanel.js b/Source/WebInspectorUI/UserInterface/SidebarPanel.js
deleted file mode 100644
index e6da757a2..000000000
--- a/Source/WebInspectorUI/UserInterface/SidebarPanel.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SidebarPanel = function(identifier, displayName, showToolTip, hideToolTip, image, element, role, label) {
-    WebInspector.Object.call(this);
-
-    this._identifier = identifier;
-
-    this._toolbarItem = new WebInspector.ActivateButtonToolbarItem(identifier, showToolTip, hideToolTip, displayName, image);
-    this._toolbarItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggle, this);
-    this._toolbarItem.enabled = false;
-
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.SidebarPanel.StyleClassName);
-    this._element.classList.add(identifier);
-
-    this._element.setAttribute("role", role || "group");
-    this._element.setAttribute("aria-label", label || displayName);
-
-};
-
-WebInspector.SidebarPanel.StyleClassName = "panel";
-WebInspector.SidebarPanel.SelectedStyleClassName = "selected";
-
-WebInspector.SidebarPanel.prototype = {
-    constructor: WebInspector.SidebarPanel,
-
-    // Public
-
-    get identifier()
-    {
-        return this._identifier;
-    },
-
-    get toolbarItem()
-    {
-        return this._toolbarItem;
-    },
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get visible()
-    {
-        return this.selected && this._parentSidebar && !this._parentSidebar.collapsed;
-    },
-
-    get selected()
-    {
-        return this._element.classList.contains(WebInspector.SidebarPanel.SelectedStyleClassName);
-    },
-
-    set selected(flag)
-    {
-        if (flag)
-            this._element.classList.add(WebInspector.SidebarPanel.SelectedStyleClassName);
-        else
-            this._element.classList.remove(WebInspector.SidebarPanel.SelectedStyleClassName);
-    },
-
-    get parentSidebar()
-    {
-        return this._parentSidebar;
-    },
-
-    show: function()
-    {
-        if (!this._parentSidebar)
-            return;
-
-        this._parentSidebar.collapsed = false;
-        this._parentSidebar.selectedSidebarPanel = this;
-    },
-
-    hide: function()
-    {
-        if (!this._parentSidebar)
-            return;
-
-        this._parentSidebar.collapsed = true;
-        this._parentSidebar.selectedSidebarPanel = null;
-    },
-
-    toggle: function()
-    {
-        if (this.visible)
-            this.hide();
-        else
-            this.show();
-    },
-
-    added: function()
-    {
-        console.assert(this._parentSidebar);
-        this._toolbarItem.enabled = true;
-        this._toolbarItem.activated = this.visible;
-    },
-
-    removed: function()
-    {
-        console.assert(!this._parentSidebar);
-        this._toolbarItem.enabled = false;
-        this._toolbarItem.activated = false;
-    },
-
-    willRemove: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    shown: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    hidden: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    widthDidChange: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    visibilityDidChange: function()
-    {
-        this._toolbarItem.activated = this.visible;
-    }
-};
-
-WebInspector.SidebarPanel.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCode.js b/Source/WebInspectorUI/UserInterface/SourceCode.js
deleted file mode 100644
index fe267d29a..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCode.js
+++ /dev/null
@@ -1,262 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceCode = function()
-{
-    WebInspector.Object.call(this);
-
-    this._pendingContentRequestCallbacks = [];
-
-    this._originalRevision = new WebInspector.SourceCodeRevision(this, null, false);
-    this._currentRevision = this._originalRevision;
-
-    this._sourceMaps = null;
-    this._formatterSourceMap = null;
-};
-
-WebInspector.SourceCode.Event = {
-    ContentDidChange: "source-code-content-did-change",
-    SourceMapAdded: "source-code-source-map-added",
-    FormatterDidChange: "source-code-formatter-did-change"
-};
-
-WebInspector.SourceCode.prototype = {
-    constructor: WebInspector.SourceCode,
-
-    // Public
-
-    get displayName()
-    {
-        // Implemented by subclasses.
-        console.error("Needs to be implemented by a subclass.");
-        return "";
-    },
-
-    get originalRevision()
-    {
-        return this._originalRevision;
-    },
-
-    get currentRevision()
-    {
-        return this._currentRevision;
-    },
-
-    set currentRevision(revision)
-    {
-        console.assert(revision instanceof WebInspector.SourceCodeRevision);
-        if (!(revision instanceof WebInspector.SourceCodeRevision))
-            return;
-
-        console.assert(revision.sourceCode === this);
-        if (revision.sourceCode !== this)
-            return;
-
-        this._currentRevision = revision;
-
-        this.dispatchEventToListeners(WebInspector.SourceCode.Event.ContentDidChange);
-    },
-
-    get content()
-    {
-        return this._currentRevision.content;
-    },
-
-    get contentIsBase64Encoded()
-    {
-        return this._currentRevision.contentIsBase64Encoded;
-    },
-
-    get sourceMaps()
-    {
-        return this._sourceMaps || [];
-    },
-
-    addSourceMap: function(sourceMap)
-    {
-        console.assert(sourceMap instanceof WebInspector.SourceMap);
-
-        if (!this._sourceMaps)
-            this._sourceMaps = [];
-
-        this._sourceMaps.push(sourceMap);
-
-        this.dispatchEventToListeners(WebInspector.SourceCode.Event.SourceMapAdded);
-    },
-
-    get formatterSourceMap()
-    {
-        return this._formatterSourceMap;
-    },
-
-    set formatterSourceMap(formatterSourceMap)
-    {
-        console.assert(this._formatterSourceMap === null || formatterSourceMap === null);
-        console.assert(formatterSourceMap === null || formatterSourceMap instanceof WebInspector.FormatterSourceMap);
-
-        this._formatterSourceMap = formatterSourceMap;
-
-        this.dispatchEventToListeners(WebInspector.SourceCode.Event.FormatterDidChange);
-    },
-
-    requestContent: function(callback)
-    {
-        console.assert(typeof callback === "function");
-        if (typeof callback !== "function")
-            return;
-
-        this._pendingContentRequestCallbacks.push(callback);
-
-        if (this._contentReceived) {
-            // Call _servicePendingContentRequests on a timeout to force callbacks to be asynchronous.
-            if (!this._servicePendingContentRequestsTimeoutIdentifier)
-                this._servicePendingContentRequestsTimeoutIdentifier = setTimeout(this.servicePendingContentRequests.bind(this), 0);
-        } else if (this.canRequestContentFromBackend())
-            this.requestContentFromBackendIfNeeded();
-    },
-
-    createSourceCodeLocation: function(lineNumber, columnNumber)
-    {
-        return new WebInspector.SourceCodeLocation(this, lineNumber, columnNumber);
-    },
-
-    createSourceCodeTextRange: function(textRange)
-    {
-        return new WebInspector.SourceCodeTextRange(this, textRange);
-    },
-
-    // Protected
-
-    revisionContentDidChange: function(revision)
-    {
-        if (this._ignoreRevisionContentDidChangeEvent)
-            return;
-
-        if (revision !== this._currentRevision)
-            return;
-
-        this.handleCurrentRevisionContentChange();
-
-        this.dispatchEventToListeners(WebInspector.SourceCode.Event.ContentDidChange);
-    },
-
-    handleCurrentRevisionContentChange: function()
-    {
-        // Implemented by subclasses if needed.
-    },
-
-    get revisionForRequestedContent()
-    {
-        // Implemented by subclasses if needed.
-        return this._originalRevision;
-    },
-
-    markContentAsStale: function()
-    {
-        this._contentReceived = false;
-    },
-
-    canRequestContentFromBackend: function()
-    {
-        // Implemented by subclasses.
-        console.error("Needs to be implemented by a subclass.");
-        return false;
-    },
-
-    requestContentFromBackend: function(callback)
-    {
-        // Implemented by subclasses.
-        console.error("Needs to be implemented by a subclass.");
-    },
-
-    requestContentFromBackendIfNeeded: function()
-    {
-        console.assert(this.canRequestContentFromBackend());
-        if (!this.canRequestContentFromBackend())
-            return;
-
-        if (!this._pendingContentRequestCallbacks.length)
-            return;
-
-        if (this._contentRequestResponsePending)
-            return;
-
-        this._contentRequestResponsePending = true;
-
-        if (this.requestContentFromBackend(this._processContent.bind(this)))
-            return;
-
-        // Since requestContentFromBackend returned false, just call _processContent,
-        // which will cause the pending callbacks to get null content.
-        this._processContent();
-    },
-
-    servicePendingContentRequests: function(force)
-    {
-        if (this._servicePendingContentRequestsTimeoutIdentifier) {
-            clearTimeout(this._servicePendingContentRequestsTimeoutIdentifier);
-            delete this._servicePendingContentRequestsTimeoutIdentifier;
-        }
-
-        // Force the content requests to be sent. To do this correctly we also force
-        // _contentReceived to be true so future calls to requestContent go through.
-        if (force)
-            this._contentReceived = true;
-
-        console.assert(this._contentReceived);
-        if (!this._contentReceived)
-            return;
-
-        // Move the callbacks into a local and clear _pendingContentRequestCallbacks so
-        // callbacks that might call requestContent again will not modify the array.
-        var callbacks = this._pendingContentRequestCallbacks;
-        this._pendingContentRequestCallbacks = [];
-
-        for (var i = 0; i < callbacks.length; ++i)
-            callbacks[i](this, this.content, this.contentIsBase64Encoded);
-    },
-
-    // Private
-
-    _processContent: function(error, content, base64Encoded)
-    {
-        if (error)
-            console.error(error);
-
-        this._contentRequestResponsePending = false;
-        this._contentReceived = true;
-
-        var revision = this.revisionForRequestedContent;
-
-        this._ignoreRevisionContentDidChangeEvent = true;
-        revision.content = content || null;
-        revision.contentIsBase64Encoded = base64Encoded || false;
-        delete this._ignoreRevisionContentDidChangeEvent;
-
-        this.servicePendingContentRequests();
-    }
-};
-
-WebInspector.SourceCode.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeLocation.js b/Source/WebInspectorUI/UserInterface/SourceCodeLocation.js
deleted file mode 100644
index 35042b95e..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeLocation.js
+++ /dev/null
@@ -1,444 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceCodeLocation = function(sourceCode, lineNumber, columnNumber)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(sourceCode === null || sourceCode instanceof WebInspector.SourceCode);
-    console.assert(!(sourceCode instanceof WebInspector.SourceMapResource));
-    console.assert(typeof lineNumber === "number" && !isNaN(lineNumber) && lineNumber >= 0);
-    console.assert(typeof columnNumber === "number" && !isNaN(columnNumber) && columnNumber >= 0);
-
-    this._sourceCode = sourceCode || null;
-    this._lineNumber = lineNumber;
-    this._columnNumber = columnNumber;
-    this._resolveFormattedLocation();
-
-    if (this._sourceCode) {
-        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
-    }
-
-    this._resetMappedLocation();
-};
-
-WebInspector.SourceCodeLocation.DisplayLocationClassName = "display-location";
-
-WebInspector.SourceCodeLocation.LargeColumnNumber = 80;
-WebInspector.SourceCodeLocation.ColumnStyle = {
-    Hidden: "hidden",             // column numbers are not included.
-    OnlyIfLarge: "only-if-large", // column numbers greater than 80 are shown.
-    Shown: "shown"                // non-zero column numbers are shown.
-}
-
-WebInspector.SourceCodeLocation.Event = {
-    LocationChanged: "source-code-location-location-changed",
-    DisplayLocationChanged: "source-code-location-display-location-changed"
-};
-
-WebInspector.SourceCodeLocation.prototype = {
-    constructor: WebInspector.SourceCodeLocation,
-
-    // Public
-
-    isEqual: function(other)
-    {
-        if (!other)
-            return false;
-        return this._sourceCode === other._sourceCode && this._lineNumber === other._lineNumber && this._columnNumber === other._columnNumber;
-    },
-
-    get sourceCode()
-    {
-        return this._sourceCode;
-    },
-
-    set sourceCode(sourceCode)
-    {
-        console.assert((this._sourceCode === null && sourceCode instanceof WebInspector.SourceCode) || (this._sourceCode instanceof WebInspector.SourceCode && sourceCode === null));
-
-        if (sourceCode === this._sourceCode)
-            return;
-
-        this._makeChangeAndDispatchChangeEventIfNeeded(function() {
-            if (this._sourceCode) {
-                this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-                this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
-            }
-
-            this._sourceCode = sourceCode;
-
-            if (this._sourceCode) {
-                this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-                this._sourceCode.addEventListener(WebInspector.SourceCode.Event.FormatterDidChange, this._sourceCodeFormatterDidChange, this);
-            }
-        });
-    },
-
-    // Raw line and column in the original source code.
-
-    get lineNumber()
-    {
-        return this._lineNumber;
-    },
-
-    get columnNumber()
-    {
-        return this._columnNumber;
-    },
-
-    position: function()
-    {
-        return new WebInspector.SourceCodePosition(this.lineNumber, this.columnNumber);
-    },
-
-    // Formatted line and column if the original source code is pretty printed.
-    // This is the same as the raw location if there is no formatter.
-
-    get formattedLineNumber()
-    {
-        return this._formattedLineNumber;
-    },
-
-    get formattedColumnNumber()
-    {
-        return this._formattedColumnNumber;
-    },
-
-    formattedPosition: function()
-    {
-        return new WebInspector.SourceCodePosition(this.formattedLineNumber, this.formattedColumnNumber);
-    },
-
-    // Display line and column:
-    //   - Mapped line and column if the original source code has a source map.
-    //   - Otherwise this is the formatted / raw line and column.
-
-    get displaySourceCode()
-    {
-        this._resolveMappedLocation();
-        return this._mappedResource || this._sourceCode;
-    },
-
-    get displayLineNumber()
-    {
-        this._resolveMappedLocation();
-        return isNaN(this._mappedLineNumber) ? this._formattedLineNumber : this._mappedLineNumber;
-    },
-
-    get displayColumnNumber()
-    {
-        this._resolveMappedLocation();
-        return isNaN(this._mappedColumnNumber) ? this._formattedColumnNumber : this._mappedColumnNumber;
-    },
-
-    displayPosition: function()
-    {
-        return new WebInspector.SourceCodePosition(this.displayLineNumber, this.displayColumnNumber);
-    },
-
-    // User presentable location strings: "file:lineNumber:columnNumber".
-
-    originalLocationString: function(columnStyle, fullURL)
-    {
-        return this._locationString(this.sourceCode, this.lineNumber, this.columnNumber, columnStyle, fullURL);
-    },
-
-    formattedLocationString: function(columnStyle, fullURL)
-    {
-        return this._locationString(this.sourceCode, this.formattedLineNumber, this.formattedColumn, columnStyle, fullURL);
-    },
-
-    displayLocationString: function(columnStyle, fullURL)
-    {
-        return this._locationString(this.displaySourceCode, this.displayLineNumber, this.displayColumnNumber, columnStyle, fullURL);
-    },
-
-    tooltipString: function()
-    {
-        if (!this.hasDifferentDisplayLocation())
-            return this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true);
-
-        var tooltip = WebInspector.UIString("Located at %s").format(this.displayLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true));
-        tooltip += "\n" + WebInspector.UIString("Originally %s").format(this.originalLocationString(WebInspector.SourceCodeLocation.ColumnStyle.Shown, true));
-        return tooltip;
-    },
-
-    hasMappedLocation: function()
-    {
-        this._resolveMappedLocation();
-        return this._mappedResource !== null;
-    },
-
-    hasFormattedLocation: function()
-    {
-        return this._formattedLineNumber !== this._lineNumber || this._formattedColumnNumber !== this._columnNumber;
-    },
-
-    hasDifferentDisplayLocation: function()
-    {
-       return this.hasMappedLocation() || this.hasFormattedLocation(); 
-    },
-
-    update: function(sourceCode, lineNumber, columnNumber)
-    {
-        console.assert(sourceCode === this._sourceCode || (this._mappedResource && sourceCode === this._mappedResource));
-        console.assert(typeof lineNumber === "number" && !isNaN(lineNumber) && lineNumber >= 0);
-        console.assert(typeof columnNumber === "number" && !isNaN(columnNumber) && columnNumber >= 0);
-
-        if (sourceCode === this._sourceCode && lineNumber === this._lineNumber && columnNumber === this._columnNumber)
-            return;
-        else if (this._mappedResource && sourceCode === this._mappedResource && lineNumber === this._mappedLineNumber && columnNumber === this._mappedColumnNumber)
-            return;
-
-        var newSourceCodeLocation = sourceCode.createSourceCodeLocation(lineNumber, columnNumber);
-        console.assert(newSourceCodeLocation.sourceCode === this._sourceCode);
-
-        this._makeChangeAndDispatchChangeEventIfNeeded(function() {
-            this._lineNumber = newSourceCodeLocation._lineNumber;
-            this._columnNumber = newSourceCodeLocation._columnNumber;
-            if (newSourceCodeLocation._mappedLocationIsResolved) {
-                this._mappedLocationIsResolved = true;
-                this._mappedResource = newSourceCodeLocation._mappedResource;
-                this._mappedLineNumber = newSourceCodeLocation._mappedLineNumber;
-                this._mappedColumnNumber = newSourceCodeLocation._mappedColumnNumber;
-            }
-        });
-    },
-
-    populateLiveDisplayLocationTooltip: function(element, prefix)
-    {
-        prefix = prefix || "";
-
-        element.title = prefix + this.tooltipString();
-
-        this.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, function(event) {
-            element.title = prefix + this.tooltipString();
-        }, this);
-    },
-
-    populateLiveDisplayLocationString: function(element, propertyName)
-    {
-        var currentDisplay = undefined;
-
-        function updateDisplayString(showAlternativeLocation, forceUpdate)
-        {
-            if (!forceUpdate && currentDisplay === showAlternativeLocation)
-                return;
-
-            currentDisplay = showAlternativeLocation;
-
-            if (!showAlternativeLocation) {
-                element[propertyName] = this.displayLocationString();
-
-                if (this.hasDifferentDisplayLocation())
-                    element.classList.add(WebInspector.SourceCodeLocation.DisplayLocationClassName);
-                else
-                    element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
-            } else {
-                if (this.hasDifferentDisplayLocation()) {
-                    element[propertyName] = this.originalLocationString();
-                    element.classList.remove(WebInspector.SourceCodeLocation.DisplayLocationClassName);
-                }
-            }
-        }
-
-        function mouseOverOrMove(event)
-        {
-            updateDisplayString.call(this, event.metaKey && !event.altKey && !event.shiftKey);
-        }
-
-        updateDisplayString.call(this, false);
-
-        this.addEventListener(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, function(event) {
-            updateDisplayString.call(this, currentDisplay, true);
-        }, this);
-
-        var boundMouseOverOrMove = mouseOverOrMove.bind(this);
-        element.addEventListener("mouseover", boundMouseOverOrMove);
-        element.addEventListener("mousemove", boundMouseOverOrMove);
-
-        element.addEventListener("mouseout", function(event) {
-            updateDisplayString.call(this, false);
-        }.bind(this));
-    },
-
-    // Private
-
-    _locationString: function(sourceCode, lineNumber, columnNumber, columnStyle, fullURL)
-    {
-        console.assert(sourceCode);
-        if (!sourceCode)
-            return "";
-
-        columnStyle = columnStyle || WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge;
-
-        var string = fullURL && sourceCode.url ? sourceCode.url : sourceCode.displayName;
-        if (sourceCode.url) {
-            string += ":" + (lineNumber + 1); // The user visible line number is 1-based.
-            if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.Shown && columnNumber > 0)
-                string += ":" + (columnNumber + 1); // The user visible column number is 1-based.
-            else if (columnStyle === WebInspector.SourceCodeLocation.ColumnStyle.OnlyIfLarge && columnNumber > WebInspector.SourceCodeLocation.LargeColumnNumber)
-                string += ":" + (columnNumber + 1); // The user visible column number is 1-based.
-        } else
-            string += WebInspector.UIString(" (line %d)").format(lineNumber + 1); // The user visible line number is 1-based.
-
-        return string;
-    },
-
-    _resetMappedLocation: function()
-    {
-        this._mappedLocationIsResolved = false;
-        this._mappedResource = null;
-        this._mappedLineNumber = NaN;
-        this._mappedColumnNumber = NaN;
-    },
-
-    _setMappedLocation: function(mappedResource, mappedLineNumber, mappedColumnNumber)
-    {
-        // Called by SourceMapResource when it creates a SourceCodeLocation and already knows the resolved location.
-        this._mappedLocationIsResolved = true;
-        this._mappedResource = mappedResource;
-        this._mappedLineNumber = mappedLineNumber;
-        this._mappedColumnNumber = mappedColumnNumber;
-    },
-
-    _resolveMappedLocation: function()
-    {
-        if (this._mappedLocationIsResolved)
-            return;
-
-        console.assert(this._mappedResource === null);
-        console.assert(isNaN(this._mappedLineNumber));
-        console.assert(isNaN(this._mappedColumnNumber));
-
-        this._mappedLocationIsResolved = true;
-
-        if (!this._sourceCode)
-            return;
-
-        var sourceMaps = this._sourceCode.sourceMaps;
-        if (!sourceMaps.length)
-            return;
-
-        for (var i = 0; i < sourceMaps.length; ++i) {
-            var sourceMap = sourceMaps[i];
-            var entry = sourceMap.findEntry(this._lineNumber, this._columnNumber);
-            if (!entry || entry.length === 2)
-                continue;
-            console.assert(entry.length === 5);
-            var url = entry[2];
-            var sourceMapResource = sourceMap.resourceForURL(url);
-            if (!sourceMapResource)
-                return;
-            this._mappedResource = sourceMapResource;
-            this._mappedLineNumber = entry[3];
-            this._mappedColumnNumber = entry[4];
-            return;
-        }
-    },
-
-    _resolveFormattedLocation: function()
-    {
-        if (this._sourceCode && this._sourceCode.formatterSourceMap) {
-            var formattedLocation = this._sourceCode.formatterSourceMap.originalToFormatted(this._lineNumber, this._columnNumber);
-            this._formattedLineNumber = formattedLocation.lineNumber;
-            this._formattedColumnNumber = formattedLocation.columnNumber;
-        } else {
-            this._formattedLineNumber = this._lineNumber;
-            this._formattedColumnNumber = this._columnNumber;
-        }
-    },
-
-    _makeChangeAndDispatchChangeEventIfNeeded: function(changeFunction)
-    {
-        var oldSourceCode = this._sourceCode;
-        var oldLineNumber = this._lineNumber;
-        var oldColumnNumber = this._columnNumber;
-
-        var oldFormattedLineNumber = this._formattedLineNumber;
-        var oldFormattedColumnNumber = this._formattedColumnNumber;
-
-        var oldDisplaySourceCode = this.displaySourceCode;
-        var oldDisplayLineNumber = this.displayLineNumber;
-        var oldDisplayColumnNumber = this.displayColumnNumber;
-
-        this._resetMappedLocation();
-
-        if (changeFunction)
-            changeFunction.call(this);
-
-        this._resolveMappedLocation();
-        this._resolveFormattedLocation();
-
-        // If the display source code is non-null then the addresses are not NaN and can be compared.
-        var displayLocationChanged = false;
-        var newDisplaySourceCode = this.displaySourceCode;
-        if (oldDisplaySourceCode !== newDisplaySourceCode)
-            displayLocationChanged = true;
-        else if (newDisplaySourceCode && (oldDisplayLineNumber !== this.displayLineNumber || oldDisplayColumnNumber !== this.displayColumnNumber))
-            displayLocationChanged = true;
-
-        var anyLocationChanged = false;
-        if (displayLocationChanged)
-            anyLocationChanged = true;
-        else if (oldSourceCode !== this._sourceCode)
-            anyLocationChanged = true;
-        else if (this._sourceCode && (oldLineNumber !== this._lineNumber || oldColumnNumber !== this._columnNumber))
-            anyLocationChanged = true;
-        else if (this._sourceCode && (oldFormattedLineNumber !== this._formattedLineNumber || oldFormattedColumnNumber !== this._formattedColumnNumber))
-            anyLocationChanged = true;
-
-        if (displayLocationChanged || anyLocationChanged) {
-            var oldData = {
-                oldSourceCode: oldSourceCode,
-                oldLineNumber: oldLineNumber,
-                oldColumnNumber: oldColumnNumber,
-                oldFormattedLineNumber: oldFormattedLineNumber,
-                oldFormattedColumnNumber: oldFormattedColumnNumber,
-                oldDisplaySourceCode: oldDisplaySourceCode,
-                oldDisplayLineNumber: oldDisplayLineNumber,
-                oldDisplayColumnNumber: oldDisplayColumnNumber
-            };
-            if (displayLocationChanged)
-                this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.DisplayLocationChanged, oldData);
-            if (anyLocationChanged)
-                this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.LocationChanged, oldData);
-        }
-    },
-
-    _sourceCodeSourceMapAdded: function()
-    {
-        this._makeChangeAndDispatchChangeEventIfNeeded(null);
-    },
-
-    _sourceCodeFormatterDidChange: function()
-    {
-        this._makeChangeAndDispatchChangeEventIfNeeded(null);
-    }
-};
-
-WebInspector.SourceCodeLocation.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodePosition.js b/Source/WebInspectorUI/UserInterface/SourceCodePosition.js
deleted file mode 100644
index ac673775c..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodePosition.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceCodePosition = function(lineNumber, columNumber)
-{
-    WebInspector.Object.call(this);
-
-    this._lineNumber = lineNumber || 0;
-    this._columnNumber = columNumber || 0;
-}
-
-WebInspector.SourceCodePosition.prototype = {
-    constructor: WebInspector.SourceCodePosition,
-
-    // Public
-
-    get lineNumber()
-    {
-        return this._lineNumber;
-    },
-
-    get columnNumber()
-    {
-        return this._columnNumber;
-    }
-};
-
-WebInspector.SourceCodePosition.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeRevision.js b/Source/WebInspectorUI/UserInterface/SourceCodeRevision.js
deleted file mode 100644
index ceb7a3b97..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeRevision.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceCodeRevision = function(sourceCode, content, contentIsBase64Encoded)
-{
-    WebInspector.Revision.call(this);
-
-    console.assert(sourceCode instanceof WebInspector.SourceCode);
-
-    this._sourceCode = sourceCode;
-    this._content = content || "";
-    this._contentIsBase64Encoded = contentIsBase64Encoded || false;
-};
-
-WebInspector.SourceCodeRevision.prototype = {
-    constructor: WebInspector.SourceCodeRevision,
-
-    // Public
-
-    get sourceCode()
-    {
-        return this._sourceCode;
-    },
-
-    get content()
-    {
-        return this._content;
-    },
-
-    set content(content)
-    {
-        content = content || "";
-
-        if (this._content === content)
-            return;
-
-        this._content = content;
-
-        this._sourceCode.revisionContentDidChange(this);
-    },
-
-    get contentIsBase64Encoded()
-    {
-        return this._contentIsBase64Encoded;
-    },
-
-    set contentIsBase64Encoded(encoded)
-    {
-        this._contentIsBase64Encoded = encoded || false;
-    },
-
-    apply: function()
-    {
-        this._sourceCode.currentRevision = this;
-    },
-
-    revert: function()
-    {
-        this._sourceCode.currentRevision = this._sourceCode.originalRevision;
-    },
-
-    copy: function()
-    {
-        return new WebInspector.SourceCodeRevision(this._sourceCode, this._content, this._contentIsBase64Encoded);
-    }
-};
-
-WebInspector.SourceCodeRevision.prototype.__proto__ = WebInspector.Revision.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.css b/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.css
deleted file mode 100644
index c08d26cba..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.source-code.text-editor > .CodeMirror .error {
-    background-color: rgb(255, 220, 208);
-}
-
-.source-code.text-editor > .CodeMirror .warning {
-    background-color: rgb(253, 249, 226);
-}
-
-.popover .debugger-popover-content {
-    font-family: monospace;
-    white-space: pre;
-}
-
-.popover .expandable {
-    min-width: 300px;
-    min-height: 250px;
-}
-
-.popover .debugger-popover-content .title {
-    font-weight: bold;
-    padding-left: 10px;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.popover .debugger-popover-content .body {
-    border-top: 1px solid rgb(194, 194, 147);
-    overflow: auto;
-    margin-top: 5px;
-    padding-top: 5px;
-}
-
-.popover .debugger-popover-content.function .body {
-    padding-left: 10px;
-    padding-right: 10px;
-}
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js b/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js
deleted file mode 100644
index d3bd9e189..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTextEditor.js
+++ /dev/null
@@ -1,1130 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceCodeTextEditor = function(sourceCode)
-{
-    console.assert(sourceCode instanceof WebInspector.SourceCode);
-
-    this._sourceCode = sourceCode;
-    this._breakpointMap = {};
-    this._issuesLineNumberMap = {};
-    this._contentPopulated = false;
-    this._invalidLineNumbers = {0: true};
-
-    WebInspector.TextEditor.call(this, null, null, this);
-
-    // FIXME: Currently this just jumps between resources and related source map resources. It doesn't "jump to symbol" yet.
-    this._jumpToSymbolTrackingModeEnabled = false;
-    this._disableJumpToSymbolTrackingModeSettings();
-
-    this.element.classList.add(WebInspector.SourceCodeTextEditor.StyleClassName);
-
-    if (this._supportsDebugging) {
-        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this);
-        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this);
-        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this);
-
-        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
-        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
-        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._activeCallFrameDidChange, this);
-
-        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
-        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
-        if (WebInspector.debuggerManager.activeCallFrame)
-            this._debuggerDidPause();
-
-        this._activeCallFrameDidChange();
-    }
-
-    WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
-
-    if (this._sourceCode instanceof WebInspector.SourceMapResource || this._sourceCode.sourceMaps.length > 0)
-        WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
-    else
-        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-
-    sourceCode.requestContent(this._contentAvailable.bind(this));
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.SourceCodeTextEditor);
-
-WebInspector.SourceCodeTextEditor.StyleClassName = "source-code";
-WebInspector.SourceCodeTextEditor.LineErrorStyleClassName = "error";
-WebInspector.SourceCodeTextEditor.LineWarningStyleClassName = "warning";
-WebInspector.SourceCodeTextEditor.PopoverDebuggerContentStyleClassName = "debugger-popover-content";
-WebInspector.SourceCodeTextEditor.HoveredExpressionHighlightStyleClassName = "hovered-expression-highlight";
-WebInspector.SourceCodeTextEditor.DurationToMouseOverTokenToMakeHoveredToken = 500;
-WebInspector.SourceCodeTextEditor.DurationToMouseOutOfHoveredTokenToRelease = 1000;
-
-WebInspector.SourceCodeTextEditor.AutoFormatMinimumLineLength = 500;
-
-WebInspector.SourceCodeTextEditor.Event = {
-    ContentWillPopulate: "source-code-text-editor-content-will-populate",
-    ContentDidPopulate: "source-code-text-editor-content-did-populate"
-};
-
-WebInspector.SourceCodeTextEditor.prototype = {
-    constructor: WebInspector.SourceCodeTextEditor,
-
-    // Public
-
-    get sourceCode()
-    {
-        return this._sourceCode;
-    },
-
-    hidden: function()
-    {
-        WebInspector.TextEditor.prototype.hidden.call(this);
-
-        this.tokenTrackingController.removeHighlightedRange();
-
-        this._dismissPopover();
-    },
-
-    close: function()
-    {
-        if (this._supportsDebugging) {
-            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateBreakpointStatus, this);
-            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateBreakpointStatus, this);
-            WebInspector.Breakpoint.removeEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this);
-
-            WebInspector.debuggerManager.removeEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
-            WebInspector.debuggerManager.removeEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
-            WebInspector.debuggerManager.removeEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._activeCallFrameDidChange, this);
-
-            if (this._activeCallFrameSourceCodeLocation) {
-                this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
-                delete this._activeCallFrameSourceCodeLocation;
-            }
-        }
-
-        WebInspector.issueManager.removeEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
-
-        WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
-        this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-    },
-
-    canBeFormatted: function()
-    {
-        // Currently we assume that source map resources are formatted how the author wants it.
-        // We could allow source map resources to be formatted, we would then need to make
-        // SourceCodeLocation watch listen for mappedResource's formatting changes, and keep
-        // a formatted location alongside the regular mapped location.
-        if (this._sourceCode instanceof WebInspector.SourceMapResource)
-            return false;
-
-        return WebInspector.TextEditor.prototype.canBeFormatted.call(this);
-    },
-
-    customPerformSearch: function(query)
-    {
-        function searchResultCallback(error, matches)
-        {
-            // Bail if the query changed since we started.
-            if (this.currentSearchQuery !== query)
-                return;
-
-            if (error || !matches || !matches.length) {
-                // Report zero matches.
-                this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
-                return;
-            }
-
-            var queryRegex = new RegExp(query.escapeForRegExp(), "gi");
-            var searchResults = [];
-
-            for (var i = 0; i < matches.length; ++i) {
-                var matchLineNumber = matches[i].lineNumber;
-                var line = this.line(matchLineNumber);
-
-                // Reset the last index to reuse the regex on a new line.
-                queryRegex.lastIndex = 0;
-
-                // Search the line and mark the ranges.
-                var lineMatch = null;
-                while (queryRegex.lastIndex + query.length <= line.length && (lineMatch = queryRegex.exec(line))) {
-                    var resultTextRange = new WebInspector.TextRange(matchLineNumber, lineMatch.index, matchLineNumber, queryRegex.lastIndex);
-                    searchResults.push(resultTextRange);
-                }
-            }
-
-            this.addSearchResults(searchResults);
-
-            this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
-        }
-
-        if (this._sourceCode instanceof WebInspector.SourceMapResource)
-            return false;
-
-        if (this._sourceCode instanceof WebInspector.Resource)
-            PageAgent.searchInResource(this._sourceCode.parentFrame.id, this._sourceCode.url, query, false, false, searchResultCallback.bind(this));
-        else if (this._sourceCode instanceof WebInspector.Script)
-            DebuggerAgent.searchInContent(this._sourceCode.id, query, false, false, searchResultCallback.bind(this));
-        return true;
-    },
-
-    // Private
-
-    _unformattedLineInfoForEditorLineInfo: function(lineInfo)
-    {
-        if (this.formatterSourceMap)
-            return this.formatterSourceMap.formattedToOriginal(lineInfo.lineNumber, lineInfo.columnNumber);
-        return lineInfo;
-    },
-
-    _sourceCodeLocationForEditorPosition: function(position)
-    {
-        var lineInfo = {lineNumber: position.line, columnNumber: position.ch};
-        var unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(lineInfo);
-        return this.sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
-    },
-
-    _editorLineInfoForSourceCodeLocation: function(sourceCodeLocation)
-    {
-        if (this._sourceCode instanceof WebInspector.SourceMapResource)
-            return {lineNumber: sourceCodeLocation.displayLineNumber, columnNumber: sourceCodeLocation.displayColumnNumber};
-        return {lineNumber: sourceCodeLocation.formattedLineNumber, columnNumber: sourceCodeLocation.formattedColumnNumber};
-    },
-
-    _breakpointForEditorLineInfo: function(lineInfo)
-    {
-        if (!this._breakpointMap[lineInfo.lineNumber])
-            return null;
-        return this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber];
-    },
-
-    _addBreakpointWithEditorLineInfo: function(breakpoint, lineInfo)
-    {
-        if (!this._breakpointMap[lineInfo.lineNumber])
-            this._breakpointMap[lineInfo.lineNumber] = {}
-
-        this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber] = breakpoint;
-    },
-
-    _removeBreakpointWithEditorLineInfo: function(breakpoint, lineInfo)
-    {
-        console.assert(breakpoint === this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber]);
-
-        delete this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber];
-
-        if (isEmptyObject(this._breakpointMap[lineInfo.lineNumber]))
-            delete this._breakpointMap[lineInfo.lineNumber];
-    },
-
-    _contentWillPopulate: function(content)
-    {
-        this.dispatchEventToListeners(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate);
-
-        // We only do the rest of this work before the first populate.
-        if (this._contentPopulated)
-            return;
-
-        if (this._supportsDebugging) {
-            this._breakpointMap = {};
-
-            var breakpoints = WebInspector.debuggerManager.breakpointsForSourceCode(this._sourceCode);
-            for (var i = 0; i < breakpoints.length; ++i) {
-                var breakpoint = breakpoints[i];
-                console.assert(this._matchesBreakpoint(breakpoint));
-                var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
-                this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
-                this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
-            }
-        }
-
-        if (this._sourceCode instanceof WebInspector.Resource)
-            this.mimeType = this._sourceCode.syntheticMIMEType;
-        else if (this._sourceCode instanceof WebInspector.Script)
-            this.mimeType = "text/javascript";
-
-        // Automatically format the content if it looks minified and it can be formatted.
-        console.assert(!this.formatted);
-        if (this.canBeFormatted()) {
-            var lastNewlineIndex = 0;
-            while (true) {
-                var nextNewlineIndex = content.indexOf("\n", lastNewlineIndex);
-                if (nextNewlineIndex === -1) {
-                    if (content.length - lastNewlineIndex > WebInspector.SourceCodeTextEditor.AutoFormatMinimumLineLength)
-                        this.autoFormat = true;
-                    break;
-                }
-
-                if (nextNewlineIndex - lastNewlineIndex > WebInspector.SourceCodeTextEditor.AutoFormatMinimumLineLength) {
-                    this.autoFormat = true;
-                    break;
-                }
-
-                lastNewlineIndex = nextNewlineIndex + 1;
-            }
-        }
-    },
-
-    _contentDidPopulate: function()
-    {
-        this._contentPopulated = true;
-
-        this.dispatchEventToListeners(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate);
-
-        // We add the issues each time content is populated. This is needed because lines might not exist
-        // if we tried added them before when the full content wasn't avaiable. (When populating with
-        // partial script content this can be called multiple times.)
-
-        this._issuesLineNumberMap = {};
-
-        var issues = WebInspector.issueManager.issuesForSourceCode(this._sourceCode);
-        for (var i = 0; i < issues.length; ++i) {
-            var issue = issues[i];
-            console.assert(this._matchesIssue(issue));
-            this._addIssue(issue);
-        }
-
-        this._updateJumpToSymbolTrackingMode();
-    },
-
-    _populateWithContent: function(content)
-    {
-        content = content || "";
-
-        this._contentWillPopulate(content);
-        this.string = content;
-        this._contentDidPopulate();
-    },
-
-    _contentAvailable: function(sourceCode, content, base64Encoded)
-    {
-        console.assert(sourceCode === this._sourceCode);
-        console.assert(!base64Encoded);
-
-        // Abort if the full content populated while waiting for this async callback.
-        if (this._fullContentPopulated)
-            return;
-
-        this._fullContentPopulated = true;
-        this._invalidLineNumbers = {};
-
-        this._populateWithContent(content);
-    },
-
-    _updateBreakpointStatus: function(event)
-    {
-        console.assert(this._supportsDebugging);
-
-        if (!this._contentPopulated)
-            return;
-
-        var breakpoint = event.target;
-        if (!this._matchesBreakpoint(breakpoint))
-            return;
-
-        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
-        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
-    },
-
-    _updateBreakpointLocation: function(event)
-    {
-        console.assert(this._supportsDebugging);
-
-        if (!this._contentPopulated)
-            return;
-
-        var breakpoint = event.target;
-        if (!this._matchesBreakpoint(breakpoint))
-            return;
-
-        if (this._ignoreAllBreakpointLocationUpdates)
-            return;
-
-        if (breakpoint === this._ignoreLocationUpdateBreakpoint)
-            return;
-
-        var sourceCodeLocation = breakpoint.sourceCodeLocation;
-
-        if (this._sourceCode instanceof WebInspector.SourceMapResource) {
-            // Update our breakpoint location if the display location changed.
-            if (sourceCodeLocation.displaySourceCode !== this._sourceCode)
-                return;
-            var oldLineInfo = {lineNumber: event.data.oldDisplayLineNumber, columnNumber: event.data.oldDisplayColumnNumber};
-            var newLineInfo = {lineNumber: sourceCodeLocation.displayLineNumber, columnNumber: sourceCodeLocation.displayColumnNumber};
-        } else {
-            // Update our breakpoint location if the original location changed.
-            if (sourceCodeLocation.sourceCode !== this._sourceCode)
-                return;
-            var oldLineInfo = {lineNumber: event.data.oldFormattedLineNumber, columnNumber: event.data.oldFormattedColumnNumber};
-            var newLineInfo = {lineNumber: sourceCodeLocation.formattedLineNumber, columnNumber: sourceCodeLocation.formattedColumnNumber};
-        }
-
-        var existingBreakpoint = this._breakpointForEditorLineInfo(oldLineInfo);
-        if (!existingBreakpoint)
-            return;
-
-        console.assert(breakpoint === existingBreakpoint);
-
-        this.setBreakpointInfoForLineAndColumn(oldLineInfo.lineNumber, oldLineInfo.columnNumber, null);
-        this.setBreakpointInfoForLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
-
-        this._removeBreakpointWithEditorLineInfo(breakpoint, oldLineInfo);
-        this._addBreakpointWithEditorLineInfo(breakpoint, newLineInfo);
-    },
-
-    _breakpointAdded: function(event)
-    {
-        console.assert(this._supportsDebugging);
-
-        if (!this._contentPopulated)
-            return;
-
-        var breakpoint = event.data.breakpoint;
-        if (!this._matchesBreakpoint(breakpoint))
-            return;
-
-        if (breakpoint === this._ignoreBreakpointAddedBreakpoint)
-            return;
-
-        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
-        this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
-        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
-    },
-
-    _breakpointRemoved: function(event)
-    {
-        console.assert(this._supportsDebugging);
-
-        if (!this._contentPopulated)
-            return;
-
-        var breakpoint = event.data.breakpoint;
-        if (!this._matchesBreakpoint(breakpoint))
-            return;
-
-        if (breakpoint === this._ignoreBreakpointRemovedBreakpoint)
-            return;
-
-        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
-        this._removeBreakpointWithEditorLineInfo(breakpoint, lineInfo);
-        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, null);
-    },
-
-    _activeCallFrameDidChange: function()
-    {
-        console.assert(this._supportsDebugging);
-
-        if (this._activeCallFrameSourceCodeLocation) {
-            this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
-            delete this._activeCallFrameSourceCodeLocation;
-        }
-
-        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
-        if (!activeCallFrame || !this._matchesSourceCodeLocation(activeCallFrame.sourceCodeLocation)) {
-            this.executionLineNumber = NaN;
-            this.executionColumnNumber = NaN;
-            return;
-        }
-
-        this._dismissPopover();
-
-        this._activeCallFrameSourceCodeLocation = activeCallFrame.sourceCodeLocation;
-        this._activeCallFrameSourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
-
-        // Don't return early if the line number didn't change. The execution state still
-        // could have changed (e.g. continuing in a loop with a breakpoint inside).
-
-        var lineInfo = this._editorLineInfoForSourceCodeLocation(activeCallFrame.sourceCodeLocation);
-        this.executionLineNumber = lineInfo.lineNumber;
-        this.executionColumnNumber = lineInfo.columnNumber;
-
-        // If we have full content or this source code isn't a Resource we can return early.
-        // Script source code populates from the request started in the constructor.
-        if (this._fullContentPopulated || !(this._sourceCode instanceof WebInspector.Resource) || this._requestingScriptContent)
-            return;
-
-        // Since we are paused in the debugger we need to show some content, and since the Resource
-        // content hasn't populated yet we need to populate with content from the Scripts by URL.
-        // Document resources will attempt to populate the scripts as inline (in <script> tags.)
-        // Other resources are assumed to be full scripts (JavaScript resources).
-        if (this._sourceCode.type === WebInspector.Resource.Type.Document)
-            this._populateWithInlineScriptContent();
-        else
-            this._populateWithScriptContent();
-    },
-
-    _activeCallFrameSourceCodeLocationChanged: function(event)
-    {
-        console.assert(!isNaN(this.executionLineNumber));
-        if (isNaN(this.executionLineNumber))
-            return;
-
-        console.assert(WebInspector.debuggerManager.activeCallFrame);
-        console.assert(this._activeCallFrameSourceCodeLocation === WebInspector.debuggerManager.activeCallFrame.sourceCodeLocation);
-
-        var lineInfo = this._editorLineInfoForSourceCodeLocation(this._activeCallFrameSourceCodeLocation);
-        this.executionLineNumber = lineInfo.lineNumber;
-        this.executionColumnNumber = lineInfo.columnNumber;
-    },
-
-    _populateWithInlineScriptContent: function()
-    {
-        console.assert(this._sourceCode instanceof WebInspector.Resource);
-        console.assert(!this._fullContentPopulated);
-        console.assert(!this._requestingScriptContent);
-
-        var scripts = this._sourceCode.scripts;
-        console.assert(scripts.length);
-        if (!scripts.length)
-            return;
-
-        var pendingRequestCount = scripts.length;
-
-        // If the number of scripts hasn't change since the last populate, then there is nothing to do.
-        if (this._inlineScriptContentPopulated === pendingRequestCount)
-            return;
-
-        this._inlineScriptContentPopulated = pendingRequestCount;
-
-        function scriptContentAvailable(error, content)
-        {
-            // Return early if we are still waiting for content from other scripts.
-            if (--pendingRequestCount)
-                return;
-
-            delete this._requestingScriptContent;
-
-            // Abort if the full content populated while waiting for these async callbacks.
-            if (this._fullContentPopulated)
-                return;
-
-            const scriptOpenTag = "<script>";
-            const scriptCloseTag = "</script>";
-
-            var content = "";
-            var lineNumber = 0;
-            var columnNumber = 0;
-
-            this._invalidLineNumbers = {};
-
-            for (var i = 0; i < scripts.length; ++i) {
-                // Fill the line gap with newline characters.
-                for (var newLinesCount = scripts[i].range.startLine - lineNumber; newLinesCount > 0; --newLinesCount) {
-                    if (!columnNumber)
-                        this._invalidLineNumbers[scripts[i].range.startLine - newLinesCount] = true;
-                    columnNumber = 0;
-                    content += "\n";
-                }
-
-                // Fill the column gap with space characters.
-                for (var spacesCount = scripts[i].range.startColumn - columnNumber - scriptOpenTag.length; spacesCount > 0; --spacesCount)
-                    content += " ";
-
-                // Add script tags and content.
-                content += scriptOpenTag;
-                content += scripts[i].content;
-                content += scriptCloseTag;
-
-                lineNumber = scripts[i].range.endLine;
-                columnNumber = scripts[i].range.endColumn + scriptCloseTag.length;
-            }
-
-            this._populateWithContent(content);
-        }
-
-        this._requestingScriptContent = true;
-
-        var boundScriptContentAvailable = scriptContentAvailable.bind(this);
-        for (var i = 0; i < scripts.length; ++i)
-            scripts[i].requestContent(boundScriptContentAvailable);
-    },
-
-    _populateWithScriptContent: function()
-    {
-        console.assert(this._sourceCode instanceof WebInspector.Resource);
-        console.assert(!this._fullContentPopulated);
-        console.assert(!this._requestingScriptContent);
-
-        // We can assume this resource only has one script that starts at line/column 0.
-        var scripts = this._sourceCode.scripts;
-        console.assert(scripts.length === 1);
-        if (!scripts.length)
-            return;
-
-        console.assert(scripts[0].range.startLine === 0);
-        console.assert(scripts[0].range.startColumn === 0);
-
-        function scriptContentAvailable(error, content)
-        {
-            delete this._requestingScriptContent;
-
-            // Abort if the full content populated while waiting for this async callback.
-            if (this._fullContentPopulated)
-                return;
-
-            // This is the full content.
-            this._fullContentPopulated = true;
-
-            this._populateWithContent(content);
-        }
-
-        this._requestingScriptContent = true;
-
-        scripts[0].requestContent(scriptContentAvailable.bind(this));
-    },
-
-    _matchesSourceCodeLocation: function(sourceCodeLocation)
-    {
-        if (this._sourceCode instanceof WebInspector.SourceMapResource)
-            return sourceCodeLocation.displaySourceCode === this._sourceCode;
-        if (this._sourceCode instanceof WebInspector.Resource)
-            return sourceCodeLocation.sourceCode.url === this._sourceCode.url;
-        if (this._sourceCode instanceof WebInspector.Script)
-            return sourceCodeLocation.sourceCode === this._sourceCode;
-        return false;
-    },
-
-    _matchesBreakpoint: function(breakpoint)
-    {
-        console.assert(this._supportsDebugging);
-        if (this._sourceCode instanceof WebInspector.SourceMapResource)
-            return breakpoint.sourceCodeLocation.displaySourceCode === this._sourceCode;
-        if (this._sourceCode instanceof WebInspector.Resource)
-            return breakpoint.url === this._sourceCode.url;
-        if (this._sourceCode instanceof WebInspector.Script)
-            return breakpoint.url === this._sourceCode.url || breakpoint.scriptIdentifier === this._sourceCode.id;
-        return false;
-    },
-
-    _matchesIssue: function(issue)
-    {
-        if (this._sourceCode instanceof WebInspector.Resource)
-            return issue.url === this._sourceCode.url;
-        // FIXME: Support issues for Scripts based on id, not only by URL.
-        if (this._sourceCode instanceof WebInspector.Script)
-            return issue.url === this._sourceCode.url;
-        return false;
-    },
-
-    _issueWasAdded: function(event)
-    {
-        var issue = event.data.issue;
-        if (!this._matchesIssue(issue))
-            return;
-
-        this._addIssue(issue);
-    },
-
-    _addIssue: function(issue)
-    {
-        var lineNumberIssues = this._issuesLineNumberMap[issue.lineNumber];
-        if (!lineNumberIssues)
-            lineNumberIssues = this._issuesLineNumberMap[issue.lineNumber] = [];
-
-        lineNumberIssues.push(issue);
-
-        if (issue.level === WebInspector.IssueMessage.Level.Error)
-            this.addStyleClassToLine(issue.lineNumber, WebInspector.SourceCodeTextEditor.LineErrorStyleClassName);
-        else if (issue.level === WebInspector.IssueMessage.Level.Warning)
-            this.addStyleClassToLine(issue.lineNumber, WebInspector.SourceCodeTextEditor.LineWarningStyleClassName);
-        else
-            console.error("Unknown issue level");
-
-        // FIXME <rdar://problem/10854857>: Show the issue message on the line as a bubble.
-    },
-
-    _breakpointInfoForBreakpoint: function(breakpoint)
-    {
-        return {resolved: breakpoint.resolved, disabled: breakpoint.disabled};
-    },
-
-    get _supportsDebugging()
-    {
-        if (this._sourceCode instanceof WebInspector.Resource)
-            return this._sourceCode.type === WebInspector.Resource.Type.Document || this._sourceCode.type === WebInspector.Resource.Type.Script;
-        if (this._sourceCode instanceof WebInspector.Script)
-            return true;
-        return false;
-    },
-
-    // TextEditor Delegate
-
-    textEditorBaseURL: function(textEditor)
-    {
-        return this._sourceCode.url;
-    },
-
-    textEditorShouldHideLineNumber: function(textEditor, lineNumber)
-    {
-        return lineNumber in this._invalidLineNumbers;
-    },
-
-    textEditorBreakpointAdded: function(textEditor, lineNumber, columnNumber)
-    {
-        if (!this._supportsDebugging)
-            return null;
-
-        var editorLineInfo = {lineNumber:lineNumber, columnNumber:columnNumber};
-        var unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(editorLineInfo);
-        var sourceCodeLocation = this._sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
-        var breakpoint = new WebInspector.Breakpoint(sourceCodeLocation);
-
-        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
-        this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
-
-        this._ignoreBreakpointAddedBreakpoint = breakpoint;
-        WebInspector.debuggerManager.addBreakpoint(breakpoint);
-        delete this._ignoreBreakpointAddedBreakpoint;
-
-        // Return the more accurate location and breakpoint info.
-        return {
-            breakpointInfo: this._breakpointInfoForBreakpoint(breakpoint),
-            lineNumber: lineInfo.lineNumber,
-            columnNumber: lineInfo.columnNumber
-        };
-    },
-
-    textEditorBreakpointRemoved: function(textEditor, lineNumber, columnNumber)
-    {
-        console.assert(this._supportsDebugging);
-        if (!this._supportsDebugging)
-            return;
-
-        var lineInfo = {lineNumber: lineNumber, columnNumber: columnNumber};
-        var breakpoint = this._breakpointForEditorLineInfo(lineInfo);
-        console.assert(breakpoint);
-        if (!breakpoint)
-            return;
-
-        this._removeBreakpointWithEditorLineInfo(breakpoint, lineInfo);
-
-        this._ignoreBreakpointRemovedBreakpoint = breakpoint;
-        WebInspector.debuggerManager.removeBreakpoint(breakpoint);
-        delete this._ignoreBreakpointAddedBreakpoint;
-    },
-
-    textEditorBreakpointMoved: function(textEditor, oldLineNumber, oldColumnNumber, newLineNumber, newColumnNumber)
-    {
-        console.assert(this._supportsDebugging);
-        if (!this._supportsDebugging)
-            return;
-
-        var oldLineInfo = {lineNumber: oldLineNumber, columnNumber: oldColumnNumber};
-        var breakpoint = this._breakpointForEditorLineInfo(oldLineInfo);
-        console.assert(breakpoint);
-        if (!breakpoint)
-            return;
-
-        this._removeBreakpointWithEditorLineInfo(breakpoint, oldLineInfo);
-
-        var newLineInfo = {lineNumber: newLineNumber, columnNumber: newColumnNumber};
-        var unformattedNewLineInfo = this._unformattedLineInfoForEditorLineInfo(newLineInfo);
-        this._ignoreLocationUpdateBreakpoint = breakpoint;
-        breakpoint.sourceCodeLocation.update(this._sourceCode, unformattedNewLineInfo.lineNumber, unformattedNewLineInfo.columnNumber);
-        delete this._ignoreLocationUpdateBreakpoint;
-
-        var accurateNewLineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
-        this._addBreakpointWithEditorLineInfo(breakpoint, accurateNewLineInfo);
-
-        if (accurateNewLineInfo.lineNumber !== newLineInfo.lineNumber || accurateNewLineInfo.columnNumber !== newLineInfo.columnNumber)
-            this.updateBreakpointLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, accurateNewLineInfo.lineNumber, accurateNewLineInfo.columnNumber);
-    },
-
-    textEditorBreakpointToggled: function(textEditor, lineNumber, columnNumber, disabled)
-    {
-        console.assert(this._supportsDebugging);
-        if (!this._supportsDebugging)
-            return;
-
-        var breakpoint = this._breakpointForEditorLineInfo({lineNumber: lineNumber, columnNumber: columnNumber});
-        console.assert(breakpoint);
-        if (!breakpoint)
-            return;
-
-        breakpoint.disabled = disabled;
-    },
-
-    textEditorUpdatedFormatting: function(textEditor)
-    {
-        this._ignoreAllBreakpointLocationUpdates = true;
-        this._sourceCode.formatterSourceMap = this.formatterSourceMap;
-        delete this._ignoreAllBreakpointLocationUpdates;
-
-        // Always put the source map on both the Script and Resource if both exist. For example,
-        // if this SourceCode is a Resource, then there might also be a Script. In the debugger,
-        // the backend identifies call frames with Script line and column information, and the
-        // Script needs the formatter source map to produce the proper display line and column.
-        if (this._sourceCode instanceof WebInspector.Resource && !(this._sourceCode instanceof WebInspector.SourceMapResource)) {
-            var scripts = this._sourceCode.scripts;
-            for (var i = 0; i < scripts.length; ++i)
-                scripts[i].formatterSourceMap = this.formatterSourceMap;
-        } else if (this._sourceCode instanceof WebInspector.Script) {
-            if (this._sourceCode.resource)
-                this._sourceCode.resource.formatterSourceMap = this.formatterSourceMap;
-        }
-
-        // Some breakpoints may have moved, some might not have. Just go through
-        // and remove and reinsert all the breakpoints.
-
-        var oldBreakpointMap = this._breakpointMap;
-        this._breakpointMap = {};
-
-        for (var lineNumber in oldBreakpointMap) {
-            for (var columnNumber in oldBreakpointMap[lineNumber]) {
-                var breakpoint = oldBreakpointMap[lineNumber][columnNumber];
-                var newLineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
-                this._addBreakpointWithEditorLineInfo(breakpoint, newLineInfo);
-                this.setBreakpointInfoForLineAndColumn(lineNumber, columnNumber, null);
-                this.setBreakpointInfoForLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
-            }
-        }
-    },
-
-    _shouldTrackTokenHovering: function()
-    {
-        return this._jumpToSymbolTrackingModeEnabled || WebInspector.debuggerManager.activeCallFrame;
-    },
-
-    _startTrackingTokenHoveringIfNeeded: function()
-    {
-        if (this._shouldTrackTokenHovering() && !this.tokenTrackingController.tracking)
-            this.tokenTrackingController.startTracking();
-    },
-
-    _stopTrackingTokenHoveringIfNeeded: function()
-    {
-        if (!this._shouldTrackTokenHovering() && this.tokenTrackingController.tracking)
-            this.tokenTrackingController.stopTracking();
-    },
-
-    _debuggerDidPause: function(event)
-    {
-        this._startTrackingTokenHoveringIfNeeded();
-    },
-
-    _debuggerDidResume: function(event)
-    {
-        this._stopTrackingTokenHoveringIfNeeded();
-
-        this._dismissPopover();
-    },
-
-    _sourceCodeSourceMapAdded: function(event)
-    {
-        WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
-        this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
-
-        this._updateJumpToSymbolTrackingMode();
-    },
-
-    _updateJumpToSymbolTrackingMode: function()
-    {
-        var oldJumpToSymbolTrackingModeEnabled = this._jumpToSymbolTrackingModeEnabled;
-
-        if (!(this._sourceCode instanceof WebInspector.SourceMapResource) && this._sourceCode.sourceMaps.length === 0)
-            this._jumpToSymbolTrackingModeEnabled = false;
-        else
-            this._jumpToSymbolTrackingModeEnabled = WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.shiftKey;
-
-        if (oldJumpToSymbolTrackingModeEnabled !== this._jumpToSymbolTrackingModeEnabled) {
-            if (this._jumpToSymbolTrackingModeEnabled) {
-                this._enableJumpToSymbolTrackingModeSettings();
-                this._startTrackingTokenHoveringIfNeeded();
-            } else {
-                this._stopTrackingTokenHoveringIfNeeded();
-                this._disableJumpToSymbolTrackingModeSettings();
-                if (!this.tokenTrackingController.tracking)
-                    this.tokenTrackingController.removeHighlightedRange();
-            }
-        }
-    },
-
-    _enableJumpToSymbolTrackingModeSettings: function()
-    {
-        this.tokenTrackingController.classNameForHighlightedRange = WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName;
-        this.tokenTrackingController.mouseOverDelayDuration = 0;
-        this.tokenTrackingController.mouseOutReleaseDelayDuration = 0;
-
-        this.tokenTrackingController.mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
-    },
-
-    _disableJumpToSymbolTrackingModeSettings: function()
-    {
-        this.tokenTrackingController.classNameForHighlightedRange = WebInspector.SourceCodeTextEditor.HoveredExpressionHighlightStyleClassName;
-        this.tokenTrackingController.mouseOverDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOverTokenToMakeHoveredToken;
-        this.tokenTrackingController.mouseOutReleaseDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOutOfHoveredTokenToRelease;
-
-        this.tokenTrackingController.mode = WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression;
-    },
-
-    // CodeMirrorTokenTrackingController Delegate
-
-    tokenTrackingControllerCanReleaseHighlightedRange: function(tokenTrackingController, element)
-    {
-        if (!this._popover)
-            return true;
-
-        if (!window.getSelection().isCollapsed && this._popover.element.contains(window.getSelection().anchorNode))
-            return false;
-
-        return true;
-    },
-
-    tokenTrackingControllerHighlightedRangeReleased: function(tokenTrackingController)
-    {
-        if (!this._mouseIsOverPopover)
-            this._dismissPopover();
-    },
-
-    tokenTrackingControllerHighlightedRangeWasClicked: function(tokenTrackingController)
-    {
-        if (this._jumpToSymbolTrackingModeEnabled) {
-            // Links are handled by TextEditor.
-            if (/\blink\b/.test(this.tokenTrackingController.candidate.hoveredToken.type))
-                return;
-
-            var sourceCodeLocation = this._sourceCodeLocationForEditorPosition(this.tokenTrackingController.candidate.hoveredTokenRange.start);
-            if (this.sourceCode instanceof WebInspector.SourceMapResource)
-                WebInspector.resourceSidebarPanel.showOriginalOrFormattedSourceCodeLocation(sourceCodeLocation);
-            else
-                WebInspector.resourceSidebarPanel.showSourceCodeLocation(sourceCodeLocation);
-        }
-    },
-
-    tokenTrackingControllerNewHighlightCandidate: function(tokenTrackingController, candidate)
-    {
-        if (this._jumpToSymbolTrackingModeEnabled) {
-            this.tokenTrackingController.highlightRange(candidate.hoveredTokenRange);
-            return;
-        }
-
-        if (!WebInspector.debuggerManager.activeCallFrame)
-            return;
-
-        console.assert(candidate.expression);
-
-        function populate(error, result, wasThrown)
-        {
-            if (error || wasThrown)
-                return;
-
-            if (candidate !== this.tokenTrackingController.candidate)
-                return;
-
-            var data = WebInspector.RemoteObject.fromPayload(result);
-            switch (data.type) {
-            case "function":
-                this._showPopoverForFunction(data);
-                break;
-            case "object":
-                this._showPopoverForObject(data);
-                break;
-            case "string":
-                this._showPopoverForString(data);
-                break;
-            case "number":
-                this._showPopoverForNumber(data);
-                break;
-            case "boolean":
-                this._showPopoverForBoolean(data);
-                break;
-            case "undefined":
-                this._showPopoverForUndefined(data);
-                break;
-            }
-        }
-
-        DebuggerAgent.evaluateOnCallFrame.invoke({callFrameId: WebInspector.debuggerManager.activeCallFrame.id, expression: candidate.expression, objectGroup: "popover", doNotPauseOnExceptionsAndMuteConsole: true}, populate.bind(this));
-    },
-
-    _showPopover: function(content)
-    {
-        console.assert(this.tokenTrackingController.candidate);
-
-        var candidate = this.tokenTrackingController.candidate;
-        if (!candidate)
-            return;
-
-        var bounds = this.tokenTrackingController.boundsForRange(candidate.hoveredTokenRange);
-        if (!bounds)
-            return;
-
-        content.classList.add(WebInspector.SourceCodeTextEditor.PopoverDebuggerContentStyleClassName);
-
-        const padding = 5;
-        bounds.origin.x -= padding;
-        bounds.origin.y -= padding;
-        bounds.size.width += padding * 2;
-        bounds.size.height += padding * 2;
-
-        this._popover = this._popover || new WebInspector.Popover(this);
-        this._popover.content = content;
-        this._popover.present(bounds, [WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MAX_X]);
-
-        this._trackPopoverEvents();
-
-        this.tokenTrackingController.highlightRange(candidate.expressionRange);
-    },
-
-    _showPopoverForFunction: function(data)
-    {
-        var candidate = this.tokenTrackingController.candidate;
-
-        function didGetDetails(error, response)
-        {
-            if (error) {
-                console.error(error);
-                this._dismissPopover();
-                return;
-            }
-
-            // Nothing to do if the token has changed since the time we
-            // asked for the function details from the backend.
-            if (candidate !== this.tokenTrackingController.candidate)
-                return;
-
-            var wrapper = document.createElement("div");
-            wrapper.className = "body console-formatted-function";
-            wrapper.textContent = data.description;
-
-            var content = document.createElement("div");
-            content.className = "function";
-
-            var title = content.appendChild(document.createElement("div"));
-            title.className = "title";
-            title.textContent = response.name || response.inferredName || response.displayName || WebInspector.UIString("(anonymous function)");
-
-            content.appendChild(wrapper);
-
-            this._showPopover(content);
-        }
-        DebuggerAgent.getFunctionDetails(data.objectId, didGetDetails.bind(this));
-    },
-
-    _showPopoverForObject: function(data)
-    {
-        if (data.subtype === "null") {
-            this._showPopoverForNull(data);
-            return;
-        }
-
-        var content = document.createElement("div");
-        content.className = "object expandable";
-
-        var titleElement = document.createElement("div");
-        titleElement.className = "title";
-        titleElement.textContent = data.description;
-        content.appendChild(titleElement);
-
-        var section = new WebInspector.ObjectPropertiesSection(data);
-        section.expanded = true;
-        section.element.classList.add("body");
-        content.appendChild(section.element);
-
-        this._showPopover(content);
-    },
-
-    _showPopoverForString: function(data)
-    {
-        var content = document.createElement("div");
-        content.className = "string console-formatted-string";
-        content.textContent = "\"" + data.description + "\"";
-
-        this._showPopover(content);
-    },
-
-    _showPopoverForNumber: function(data)
-    {
-        var content = document.createElement("span");
-        content.className = "number console-formatted-number";
-        content.textContent = data.description;
-
-        this._showPopover(content);
-    },
-
-    _showPopoverForBoolean: function(data)
-    {
-        var content = document.createElement("span");
-        content.className = "boolean console-formatted-boolean";
-        content.textContent = data.description;
-
-        this._showPopover(content);
-    },
-
-    _showPopoverForNull: function(data)
-    {
-        var content = document.createElement("span");
-        content.className = "boolean console-formatted-null";
-        content.textContent = data.description;
-
-        this._showPopover(content);
-    },
-
-    _showPopoverForUndefined: function(data)
-    {
-        var content = document.createElement("span");
-        content.className = "boolean console-formatted-undefined";
-        content.textContent = data.description;
-
-        this._showPopover(content);
-    },
-
-    willDismissPopover: function(popover)
-    {
-        this.tokenTrackingController.removeHighlightedRange();
-
-        RuntimeAgent.releaseObjectGroup("popover");
-    },
-
-    _dismissPopover: function()
-    {
-        if (!this._popover)
-            return;
-
-        this._popover.dismiss();
-
-        if (this._popoverEventHandler)
-            this._popoverEventHandler.stopTrackingEvents();
-    },
-
-    _trackPopoverEvents: function()
-    {
-        if (!this._popoverEventHandler) {
-            this._popoverEventHandler = new WebInspector.EventHandler(this, {
-                "mouseover": this._popoverMouseover,
-                "mouseout": this._popoverMouseout,
-            });
-        }
-
-        this._popoverEventHandler.trackEvents(this._popover.element);
-    },
-
-    _popoverMouseover: function(event)
-    {
-        this._mouseIsOverPopover = true;
-    },
-
-    _popoverMouseout: function(event)
-    {
-        this._mouseIsOverPopover = this._popover.element.contains(event.relatedTarget);
-    }
-};
-
-WebInspector.SourceCodeTextEditor.prototype.__proto__ = WebInspector.TextEditor.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTextRange.js b/Source/WebInspectorUI/UserInterface/SourceCodeTextRange.js
deleted file mode 100644
index 59bb5030d..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTextRange.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceCodeTextRange = function(sourceCode) /* textRange || startLocation, endLocation */
-{
-    WebInspector.Object.call(this);
-
-    console.assert(sourceCode instanceof WebInspector.SourceCode);
-    console.assert(arguments.length === 2 || arguments.length === 3);
-
-    this._sourceCode = sourceCode;
-
-    if (arguments.length === 2) {
-        var textRange = arguments[1];
-        console.assert(textRange instanceof WebInspector.TextRange);
-        this._startLocation = sourceCode.createSourceCodeLocation(textRange.startLine, textRange.startColumn);
-        this._endLocation = sourceCode.createSourceCodeLocation(textRange.endLine, textRange.endColumn);
-    } else {
-        console.assert(arguments[1] instanceof WebInspector.SourceCodeLocation);
-        console.assert(arguments[2] instanceof WebInspector.SourceCodeLocation);
-        this._startLocation = arguments[1];
-        this._endLocation = arguments[2];
-    }
-
-    this._startLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationChanged, this);
-    this._endLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._sourceCodeLocationChanged, this);
-};
-
-WebInspector.SourceCodeTextRange.Event = {
-    RangeChanged: "source-code-text-range-range-changed"
-};
-
-WebInspector.SourceCodeTextRange.prototype = {
-    constructor: WebInspector.SourceCodeTextRange,
-
-    // Public
-
-    get sourceCode()
-    {
-        return this._sourceCode;
-    },
-
-    // Raw text range in the original source code.
-
-    get textRange()
-    {
-        var startLine = this._startLocation.lineNumber;
-        var startColumn = this._startLocation.columnNumber;
-        var endLine = this._endLocation.lineNumber;
-        var endColumn = this._endLocation.columnNumber;
-        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
-    },
-
-    // Formatted text range in the original source code if it is pretty printed.
-    // This is the same as the raw text range if the source code has no formatter.
-
-    get formattedTextRange()
-    {
-        var startLine = this._startLocation.formattedLineNumber;
-        var startColumn = this._startLocation.formattedColumnNumber;
-        var endLine = this._endLocation.formattedLineNumber;
-        var endColumn = this._endLocation.formattedColumnNumber;
-        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
-    },
-
-    // Display values:
-    //   - Mapped resource and text range locations if the original source code has a
-    //     source map and both start and end locations are in the same mapped resource.
-    //   - Otherwise this is the formatted / raw text range.
-
-    get displaySourceCode()
-    {
-        if (!this._startAndEndLocationsInSameMappedResource())
-            return this._sourceCode;
-
-        return this._startLocation.displaySourceCode;
-    },
-
-    get displayTextRange()
-    {
-        if (!this._startAndEndLocationsInSameMappedResource())
-            return this.formattedTextRange;
-
-        var startLine = this._startLocation.displayLineNumber;
-        var startColumn = this._startLocation.displayColumnNumber;
-        var endLine = this._endLocation.displayLineNumber;
-        var endColumn = this._endLocation.displayColumnNumber;
-        return new WebInspector.TextRange(startLine, startColumn, endLine, endColumn);
-    },
-
-    // Private
-
-    _startAndEndLocationsInSameMappedResource: function()
-    {
-        return this._startLocation.hasMappedLocation() && this._endLocation.hasMappedLocation() && this._startLocation.displaySourceCode === this._endLocation.displaySourceCode;
-    },
-
-    _sourceCodeLocationChanged: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.SourceCodeLocation.Event.RangeChanged);
-    }
-};
-
-WebInspector.SourceCodeTextRange.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceCodeTreeElement.js b/Source/WebInspectorUI/UserInterface/SourceCodeTreeElement.js
deleted file mode 100644
index d885eb28d..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceCodeTreeElement.js
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceCodeTreeElement = function(sourceCode, classNames, title, subtitle, representedObject, hasChildren)
-{
-    console.assert(sourceCode instanceof WebInspector.SourceCode);
-
-    WebInspector.GeneralTreeElement.call(this, classNames, title, subtitle, representedObject || sourceCode, hasChildren);
-
-    this.small = true;
-
-    this._updateSourceCode(sourceCode);
-};
-
-WebInspector.SourceCodeTreeElement.prototype = {
-    constructor: WebInspector.SourceCodeTreeElement,
-
-    // Public
-
-    updateSourceMapResources: function()
-    {
-        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
-            return;
-
-        this.hasChildren = !!this._sourceCode.sourceMaps.length;
-        this.shouldRefreshChildren = this.hasChildren;
-
-        if (!this.hasChildren)
-            this.removeChildren();
-    },
-
-    // Overrides from TreeElement
-
-    onattach: function()
-    {
-        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
-
-        this.updateSourceMapResources();
-    },
-
-    onpopulate: function()
-    {
-        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
-            return;
-
-        if (!this.hasChildren || !this.shouldRefreshChildren)
-            return;
-
-        this.shouldRefreshChildren = false;
-
-        this.removeChildren();
-
-        function combineFolderChain(topFolder, bottomFolder)
-        {
-            console.assert(topFolder.children.length === 1);
-
-            var components = [];
-
-            for (var currentFolder = bottomFolder; currentFolder !== topFolder; currentFolder = currentFolder.parent)
-                components.push(currentFolder.mainTitle);
-            components.push(topFolder.mainTitle);
-
-            var folderName = components.reverse().join("/");
-            var newFolder = new WebInspector.FolderTreeElement(folderName);
-
-            var folderIndex = topFolder.parent.children.indexOf(topFolder);
-            topFolder.parent.insertChild(newFolder, folderIndex);
-            topFolder.parent.removeChild(topFolder);
-
-            var children = bottomFolder.children;
-            bottomFolder.removeChildren();
-            for (var i = 0; i < children.length; ++i)
-                newFolder.appendChild(children[i]);
-        }
-
-        function findAndCombineFolderChains(treeElement, previousSingleTreeElement)
-        {
-            if (!(treeElement instanceof WebInspector.FolderTreeElement)) {
-                if (previousSingleTreeElement && previousSingleTreeElement !== treeElement.parent)
-                    combineFolderChain(previousSingleTreeElement, treeElement.parent);
-                return;
-            }
-
-            if (previousSingleTreeElement && treeElement.children.length !== 1) {
-                combineFolderChain(previousSingleTreeElement, treeElement);
-                previousSingleTreeElement = null;
-            }
-
-            if (!previousSingleTreeElement && treeElement.children.length === 1)
-                previousSingleTreeElement = treeElement;
-
-            for (var i = 0; i < treeElement.children.length; ++i)
-                findAndCombineFolderChains(treeElement.children[i], previousSingleTreeElement);
-        }
-
-        var sourceMaps = this._sourceCode.sourceMaps;
-        for (var i = 0; i < sourceMaps.length; ++i) {
-            var sourceMap = sourceMaps[i];
-            for (var j = 0; j < sourceMap.resources.length; ++j) {
-                var sourceMapResource = sourceMap.resources[j];
-                var relativeSubpath = sourceMapResource.sourceMapDisplaySubpath;
-                var folderTreeElement = this.createFoldersAsNeededForSubpath(relativeSubpath);
-                var sourceMapTreeElement = new WebInspector.SourceMapResourceTreeElement(sourceMapResource);
-                folderTreeElement.insertChild(sourceMapTreeElement, insertionIndexForObjectInListSortedByFunction(sourceMapTreeElement, folderTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements));
-            }
-        }
-
-        for (var i = 0; i < this.children.length; ++i)
-            findAndCombineFolderChains(this.children[i], null);
-    },
-
-    // Protected
-
-    createFoldersAsNeededForSubpath: function(subpath)
-    {
-        if (!subpath)
-            return this;
-
-        var components = subpath.split("/");
-        if (components.length === 1)
-            return this;
-
-        if (!this._subpathFolderTreeElementMap)
-            this._subpathFolderTreeElementMap = {};
-
-        var currentPath = "";
-        var currentFolderTreeElement = this;
-
-        for (var i = 0 ; i < components.length - 1; ++i) {
-            var componentName = components[i];
-            currentPath += (i ? "/" : "") + componentName;
-
-            var cachedFolder = this._subpathFolderTreeElementMap[currentPath];
-            if (cachedFolder) {
-                currentFolderTreeElement = cachedFolder;
-                continue;
-            }
-
-            var newFolder = new WebInspector.FolderTreeElement(componentName);
-            newFolder.__path = currentPath;
-            this._subpathFolderTreeElementMap[currentPath] = newFolder;
-
-            var index = insertionIndexForObjectInListSortedByFunction(newFolder, currentFolderTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements);
-            currentFolderTreeElement.insertChild(newFolder, index);
-            currentFolderTreeElement = newFolder;
-        }
-
-        return currentFolderTreeElement;
-    },
-
-    descendantResourceTreeElementTypeDidChange: function(childTreeElement, oldType)
-    {
-        // Called by descendant SourceMapResourceTreeElements.
-
-        console.assert(this.hasChildren);
-
-        var wasSelected = childTreeElement.selected;
-
-        var parentTreeElement = childTreeElement.parent;
-        parentTreeElement.removeChild(childTreeElement, true, true);
-        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements));
-
-        if (wasSelected)
-            childTreeElement.revealAndSelect(true, false, true, true);
-    },
-
-    // Protected (ResourceTreeElement calls this when its Resource changes dynamically for Frames)
-
-    _updateSourceCode: function(sourceCode)
-    {
-        console.assert(sourceCode instanceof WebInspector.SourceCode);
-
-        if (this._sourceCode === sourceCode)
-            return;
-
-        if (this._sourceCode)
-            this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this.updateSourceMapResources, this);
-
-        this._sourceCode = sourceCode;
-        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this.updateSourceMapResources, this);
-
-        this.updateSourceMapResources();
-    }
-};
-
-WebInspector.SourceCodeTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceMap.js b/Source/WebInspectorUI/UserInterface/SourceMap.js
deleted file mode 100644
index b910baadd..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceMap.js
+++ /dev/null
@@ -1,333 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * Implements Source Map V3 model. See http://code.google.com/p/closure-compiler/wiki/SourceMaps
- * for format description.
- * @constructor
- * @param {string} sourceMappingURL
- * @param {SourceMapV3} payload
- * @param {WebInspector.Resource|WebInspector.Script} originalSourceCode
- */
-WebInspector.SourceMap = function(sourceMappingURL, payload, originalSourceCode)
-{
-    if (!WebInspector.SourceMap.prototype._base64Map) {
-        const base64Digits = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-        WebInspector.SourceMap.prototype._base64Map = {};
-        for (var i = 0; i < base64Digits.length; ++i)
-            WebInspector.SourceMap.prototype._base64Map[base64Digits.charAt(i)] = i;
-    }
-
-    this._originalSourceCode = originalSourceCode || null;
-    this._sourceMapResources = {};
-    this._sourceMapResourcesList = [];
-
-    this._sourceMappingURL = sourceMappingURL;
-    this._reverseMappingsBySourceURL = {};
-    this._mappings = [];
-    this._sources = {};
-    this._sourceRoot = null;
-    this._sourceContentByURL = {};
-    this._parseMappingPayload(payload);
-}
-
-WebInspector.SourceMap.prototype = {
-
-    get originalSourceCode()
-    {
-        return this._originalSourceCode;
-    },
-
-    get sourceMappingBasePathURLComponents()
-    {
-        if (this._sourceMappingURLBasePathComponents)
-            return this._sourceMappingURLBasePathComponents;
-
-        if (this._sourceRoot) {
-            var baseURLPath = absoluteURL(this._sourceRoot, this._sourceMappingURL);
-            console.assert(baseURLPath);
-            if (baseURLPath) {
-                var urlComponents = parseURL(baseURLPath);
-                if (!/\/$/.test(urlComponents.path))
-                    urlComponents.path += "/";
-                this._sourceMappingURLBasePathComponents = urlComponents;
-                return this._sourceMappingURLBasePathComponents;
-            }
-        }
-
-        var urlComponents = parseURL(this._sourceMappingURL);
-        urlComponents.path = urlComponents.path.substr(0, urlComponents.path.lastIndexOf(urlComponents.lastPathComponent));
-        urlComponents.lastPathComponent = null;
-        this._sourceMappingURLBasePathComponents = urlComponents;
-        return this._sourceMappingURLBasePathComponents;
-    },
-
-    get resources()
-    {
-        return this._sourceMapResourcesList;
-    },
-
-    addResource: function(resource)
-    {
-        console.assert(!(resource.url in this._sourceMapResources));
-        this._sourceMapResources[resource.url] = resource;
-        this._sourceMapResourcesList.push(resource);
-    },
-
-    resourceForURL: function(url)
-    {
-        return this._sourceMapResources[url];
-    },
-
-    /**
-     * @return {Array.<string>}
-     */
-    sources: function()
-    {
-        return Object.keys(this._sources);
-    },
-
-    /**
-     * @param {string} sourceURL
-     * @return {string|undefined}
-     */
-    sourceContent: function(sourceURL)
-    {
-        return this._sourceContentByURL[sourceURL];
-    },
-
-    /**
-     * @param {SourceMapV3} mappingPayload
-     */
-    _parseMappingPayload: function(mappingPayload)
-    {
-        if (mappingPayload.sections)
-            this._parseSections(mappingPayload.sections);
-        else
-            this._parseMap(mappingPayload, 0, 0);
-    },
-
-    /**
-     * @param {Array.<SourceMapV3.Section>} sections
-     */
-    _parseSections: function(sections)
-    {
-        for (var i = 0; i < sections.length; ++i) {
-            var section = sections[i];
-            this._parseMap(section.map, section.offset.line, section.offset.column);
-        }
-    },
-
-    /**
-     * @param {number} lineNumber in compiled resource
-     * @param {number} columnNumber in compiled resource
-     * @return {?Array}
-     */
-    findEntry: function(lineNumber, columnNumber)
-    {
-        var first = 0;
-        var count = this._mappings.length;
-        while (count > 1) {
-            var step = count >> 1;
-            var middle = first + step;
-            var mapping = this._mappings[middle];
-            if (lineNumber < mapping[0] || (lineNumber === mapping[0] && columnNumber < mapping[1]))
-                count = step;
-            else {
-                first = middle;
-                count -= step;
-            }
-        }
-        var entry = this._mappings[first];
-        if (!first && entry && (lineNumber < entry[0] || (lineNumber === entry[0] && columnNumber < entry[1])))
-            return null;
-        return entry;
-    },
-
-    /**
-     * @param {string} sourceURL of the originating resource
-     * @param {number} lineNumber in the originating resource
-     * @return {Array}
-     */
-    findEntryReversed: function(sourceURL, lineNumber)
-    {
-        var mappings = this._reverseMappingsBySourceURL[sourceURL];
-        for ( ; lineNumber < mappings.length; ++lineNumber) {
-            var mapping = mappings[lineNumber];
-            if (mapping)
-                return mapping;
-        }
-        return this._mappings[0];
-    },
-
-    /**
-     * @param {SourceMapV3} map
-     * @param {number} lineNumber
-     * @param {number} columnNumber
-     */
-    _parseMap: function(map, lineNumber, columnNumber)
-    {
-        var sourceIndex = 0;
-        var sourceLineNumber = 0;
-        var sourceColumnNumber = 0;
-        var nameIndex = 0;
-
-        var sources = [];
-        var originalToCanonicalURLMap = {};
-        for (var i = 0; i < map.sources.length; ++i) {
-            var originalSourceURL = map.sources[i];
-            var href = originalSourceURL;
-            if (map.sourceRoot && href.charAt(0) !== "/")
-                href = map.sourceRoot.replace(/\/+$/, "") + "/" + href;
-            var url = absoluteURL(href, this._sourceMappingURL) || href;
-            originalToCanonicalURLMap[originalSourceURL] = url;
-            sources.push(url);
-            this._sources[url] = true;
-
-            if (map.sourcesContent && map.sourcesContent[i])
-                this._sourceContentByURL[url] = map.sourcesContent[i];
-        }
-
-        this._sourceRoot = map.sourceRoot || null;
-
-        var stringCharIterator = new WebInspector.SourceMap.StringCharIterator(map.mappings);
-        var sourceURL = sources[sourceIndex];
-
-        while (true) {
-            if (stringCharIterator.peek() === ",")
-                stringCharIterator.next();
-            else {
-                while (stringCharIterator.peek() === ";") {
-                    lineNumber += 1;
-                    columnNumber = 0;
-                    stringCharIterator.next();
-                }
-                if (!stringCharIterator.hasNext())
-                    break;
-            }
-
-            columnNumber += this._decodeVLQ(stringCharIterator);
-            if (this._isSeparator(stringCharIterator.peek())) {
-                this._mappings.push([lineNumber, columnNumber]);
-                continue;
-            }
-
-            var sourceIndexDelta = this._decodeVLQ(stringCharIterator);
-            if (sourceIndexDelta) {
-                sourceIndex += sourceIndexDelta;
-                sourceURL = sources[sourceIndex];
-            }
-            sourceLineNumber += this._decodeVLQ(stringCharIterator);
-            sourceColumnNumber += this._decodeVLQ(stringCharIterator);
-            if (!this._isSeparator(stringCharIterator.peek()))
-                nameIndex += this._decodeVLQ(stringCharIterator);
-
-            this._mappings.push([lineNumber, columnNumber, sourceURL, sourceLineNumber, sourceColumnNumber]);
-        }
-
-        for (var i = 0; i < this._mappings.length; ++i) {
-            var mapping = this._mappings[i];
-            var url = mapping[2];
-            if (!url)
-                continue;
-            if (!this._reverseMappingsBySourceURL[url])
-                this._reverseMappingsBySourceURL[url] = [];
-            var reverseMappings = this._reverseMappingsBySourceURL[url];
-            var sourceLine = mapping[3];
-            if (!reverseMappings[sourceLine])
-                reverseMappings[sourceLine] = [mapping[0], mapping[1]];
-        }
-    },
-
-    /**
-     * @param {string} char
-     * @return {boolean}
-     */
-    _isSeparator: function(char)
-    {
-        return char === "," || char === ";";
-    },
-
-    /**
-     * @param {WebInspector.SourceMap.StringCharIterator} stringCharIterator
-     * @return {number}
-     */
-    _decodeVLQ: function(stringCharIterator)
-    {
-        // Read unsigned value.
-        var result = 0;
-        var shift = 0;
-        do {
-            var digit = this._base64Map[stringCharIterator.next()];
-            result += (digit & this._VLQ_BASE_MASK) << shift;
-            shift += this._VLQ_BASE_SHIFT;
-        } while (digit & this._VLQ_CONTINUATION_MASK);
-
-        // Fix the sign.
-        var negative = result & 1;
-        result >>= 1;
-        return negative ? -result : result;
-    },
-
-    _VLQ_BASE_SHIFT: 5,
-    _VLQ_BASE_MASK: (1 << 5) - 1,
-    _VLQ_CONTINUATION_MASK: 1 << 5
-}
-
-/**
- * @constructor
- * @param {string} string
- */
-WebInspector.SourceMap.StringCharIterator = function(string)
-{
-    this._string = string;
-    this._position = 0;
-}
-
-WebInspector.SourceMap.StringCharIterator.prototype = {
-    /**
-     * @return {string}
-     */
-    next: function()
-    {
-        return this._string.charAt(this._position++);
-    },
-
-    /**
-     * @return {string}
-     */
-    peek: function()
-    {
-        return this._string.charAt(this._position);
-    },
-
-    /**
-     * @return {boolean}
-     */
-    hasNext: function()
-    {
-        return this._position < this._string.length;
-    }
-}
diff --git a/Source/WebInspectorUI/UserInterface/SourceMapManager.js b/Source/WebInspectorUI/UserInterface/SourceMapManager.js
deleted file mode 100644
index ba36c040a..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceMapManager.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceMapManager = function()
-{
-    WebInspector.Object.call(this);
-
-    this._sourceMapURLMap = {};
-    this._downloadingSourceMaps = {};
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-};
-
-WebInspector.SourceMapManager.prototype = {
-    constructor: WebInspector.SourceMapManager,
-
-    // Public
-
-    sourceMapForURL: function(sourceMapURL)
-    {
-        return this._sourceMapURLMap[sourceMapURL];
-    },
-
-    downloadSourceMap: function(sourceMapURL, baseURL, originalSourceCode)
-    {
-        sourceMapURL = absoluteURL(sourceMapURL, baseURL);
-        if (!sourceMapURL)
-            return;
-
-        console.assert(originalSourceCode.url);
-        if (!originalSourceCode.url)
-            return;
-
-        // FIXME: <rdar://problem/13265694> Source Maps: Better handle when multiple resources reference the same SourceMap
-
-        if (sourceMapURL in this._sourceMapURLMap)
-            return;
-
-        if (sourceMapURL in this._downloadingSourceMaps)
-            return;
-
-        this._loadAndParseSourceMap(sourceMapURL, baseURL, originalSourceCode);
-    },
-
-    // Private
-
-    _loadAndParseSourceMap: function(sourceMapURL, baseURL, originalSourceCode)
-    {
-        this._downloadingSourceMaps[sourceMapURL] = true;
-
-        // FIXME: <rdar://problem/13238886> Source Maps: Frontend needs asynchronous resource loading of content + mime type
-        var response = InspectorFrontendHost.loadResourceSynchronously(sourceMapURL);
-        if (response === undefined) {
-            this._loadAndParseFailed(sourceMapURL);
-            return;
-        }
-
-        if (response.slice(0, 3) === ")]}") {
-            var firstNewlineIndex = response.indexOf("\n");
-            if (firstNewlineIndex === -1) {
-                this._loadAndParseFailed(sourceMapURL);
-                return;
-            }
-            response = response.substring(firstNewlineIndex);
-        }
-
-        try {
-            var payload = JSON.parse(response);
-            var baseURL = sourceMapURL.startsWith("data:") ? originalSourceCode.url : sourceMapURL;
-            var sourceMap = new WebInspector.SourceMap(baseURL, payload, originalSourceCode);
-            this._loadAndParseSucceeded(sourceMapURL, sourceMap);
-        } catch(e) {
-            console.error(e.message);
-            this._loadAndParseFailed(sourceMapURL);
-        }
-    },
-
-    _loadAndParseFailed: function(sourceMapURL)
-    {
-        delete this._downloadingSourceMaps[sourceMapURL];
-    },
-
-    _loadAndParseSucceeded: function(sourceMapURL, sourceMap)
-    {
-        if (!(sourceMapURL in this._downloadingSourceMaps))
-            return;
-
-        delete this._downloadingSourceMaps[sourceMapURL];
-
-        this._sourceMapURLMap[sourceMapURL] = sourceMap;
-
-        var sources = sourceMap.sources();
-        for (var i = 0; i < sources.length; ++i) {
-            var sourceMapResource = new WebInspector.SourceMapResource(sources[i], sourceMap);
-            sourceMap.addResource(sourceMapResource);
-        }
-
-        // Associate the SourceMap with the originalSourceCode.
-        sourceMap.originalSourceCode.addSourceMap(sourceMap);
-
-        // If the originalSourceCode was not a Resource, be sure to also associate with the Resource if one exists.
-        // FIXME: We should try to use the right frame instead of a global lookup by URL.
-        if (!(sourceMap.originalSourceCode instanceof WebInspector.Resource)) {
-            console.assert(sourceMap.originalSourceCode instanceof WebInspector.Script);
-            var resource = sourceMap.originalSourceCode.resource;
-            if (resource)
-                resource.addSourceMap(sourceMap);
-        }
-    },
-
-    _mainResourceDidChange: function(event)
-    {
-        if (!event.target.isMainFrame())
-            return;
-
-        this._sourceMapURLMap = {};
-        this._downloadingSourceMaps = {};
-    }
-};
-
-WebInspector.SourceMapManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceMapResource.js b/Source/WebInspectorUI/UserInterface/SourceMapResource.js
deleted file mode 100644
index aa7ddcb3d..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceMapResource.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceMapResource = function(url, sourceMap)
-{
-    WebInspector.Resource.call(this, url, null);
-
-    console.assert(url);
-    console.assert(sourceMap);
-
-    this._sourceMap = sourceMap;
-};
-
-WebInspector.SourceMapResource.prototype = {
-    constructor: WebInspector.SourceMapResource,
-
-    // Public
-
-    get sourceMap()
-    {
-        return this._sourceMap;
-    },
-
-    get sourceMapDisplaySubpath()
-    {
-        var sourceMappingBasePathURLComponents = this._sourceMap.sourceMappingBasePathURLComponents;
-        var resourceURLComponents = this.urlComponents;
-
-        // Different schemes / hosts. Return the host + path of this resource.
-        if (resourceURLComponents.scheme !== sourceMappingBasePathURLComponents.scheme || resourceURLComponents.host !== sourceMappingBasePathURLComponents.host)
-            return resourceURLComponents.host + (resourceURLComponents.port ? (":" + resourceURLComponents.port) : "") + resourceURLComponents.path;
-
-        // Same host, but not a subpath of the base. This implies a ".." in the relative path.
-        if (!resourceURLComponents.path.startsWith(sourceMappingBasePathURLComponents.path))
-            return relativePath(resourceURLComponents.path, sourceMappingBasePathURLComponents.path);
-
-        // Same host. Just a subpath of the base.
-        return resourceURLComponents.path.substring(sourceMappingBasePathURLComponents.path.length, resourceURLComponents.length);
-    },
-
-    canRequestContentFromBackend: function()
-    {
-        return !this.finished;
-    },
-
-    requestContentFromBackend: function(callback)
-    {
-        function requestAsyncCallback(body, base64encoded, mimeType)
-        {
-            if (body === null) {
-                this.markAsFailed();
-                callback("Failed to load resource", body, base64encoded);
-                return;
-            }
-
-            var oldType = this._type;
-            var oldMIMEType = this._mimeType;
-
-            this._mimeType = mimeType;
-            this._type = WebInspector.Resource.Type.fromMIMEType(this._mimeType);
-
-            if (oldMIMEType !== mimeType)
-                this.dispatchEventToListeners(WebInspector.Resource.Event.MIMETypeDidChange, {oldMIMEType: oldMIMEType});
-
-            if (oldType !== this._type)
-                this.dispatchEventToListeners(WebInspector.Resource.Event.TypeDidChange, {oldType: oldType});
-
-            this.markAsFinished();
-
-            callback(null, body, base64encoded);
-        }
-
-        this._requestResourceAsynchronously(requestAsyncCallback.bind(this));
-        return true;
-    },
-
-    createSourceCodeLocation: function(lineNumber, columnNumber)
-    {
-        // SourceCodeLocations are always constructed with raw resources and raw locations. Lookup the raw location.
-        var entry = this._sourceMap.findEntryReversed(this.url, lineNumber);
-        var rawLineNumber = entry[0];
-        var rawColumnNumber = entry[1];
-
-        // If the raw location is an inline script we need to include that offset.
-        var originalSourceCode = this._sourceMap.originalSourceCode;
-        if (originalSourceCode instanceof WebInspector.Script) {
-            if (rawLineNumber === 0)
-                rawColumnNumber += originalSourceCode.range.startColumn;
-            rawLineNumber += originalSourceCode.range.startLine;
-        }
-
-        // Create the SourceCodeLocation and since we already know the the mapped location set it directly.
-        var location = originalSourceCode.createSourceCodeLocation(rawLineNumber, rawColumnNumber);
-        location._setMappedLocation(this, lineNumber, columnNumber);
-        return location;
-    },
-
-    createSourceCodeTextRange: function(textRange)
-    {
-        // SourceCodeTextRanges are always constructed with raw resources and raw locations.
-        // However, we can provide the most accurate mapped locations in construction.
-        var startSourceCodeLocation = this.createSourceCodeLocation(textRange.startLine, textRange.startColumn);
-        var endSourceCodeLocation = this.createSourceCodeLocation(textRange.endLine, textRange.endColumn);
-        return new WebInspector.SourceCodeTextRange(this._sourceMap.originalSourceCode, startSourceCodeLocation, endSourceCodeLocation);
-    },
-
-    // Private
-
-    _requestResourceAsynchronously: function(callback)
-    {
-        // FIXME: <rdar://problem/13238886> Source Maps: Frontend needs asynchronous resource loading of content + mime type
-
-        function async()
-        {
-            var body = this._sourceMap.sourceContent(this.url) || InspectorFrontendHost.loadResourceSynchronously(this.url);
-            if (body === undefined)
-                body = null;
-            var fileExtension = WebInspector.fileExtensionForURL(this.url);
-            var mimeType = WebInspector.mimeTypeForFileExtension(fileExtension, true) || "text/javascript";
-            callback(body, false, mimeType);
-        }
-
-        setTimeout(async.bind(this), 0);
-    }
-};
-
-WebInspector.SourceMapResource.prototype.__proto__ = WebInspector.Resource.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/SourceMapResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/SourceMapResourceTreeElement.js
deleted file mode 100644
index 9d9d90574..000000000
--- a/Source/WebInspectorUI/UserInterface/SourceMapResourceTreeElement.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SourceMapResourceTreeElement = function(sourceMapResource, representedObject)
-{
-    console.assert(sourceMapResource instanceof WebInspector.SourceMapResource);
-
-    WebInspector.ResourceTreeElement.call(this, sourceMapResource);
-
-    console.assert(this.resource === sourceMapResource);
-
-    this.addClassName(WebInspector.SourceMapResourceTreeElement.StyleClassName);
-};
-
-WebInspector.SourceMapResourceTreeElement.StyleClassName = "source-map-resource";
-
-WebInspector.SourceMapResourceTreeElement.prototype = {
-    constructor: WebInspector.SourceMapResourceTreeElement,
-
-    // Protected
-
-    onattach: function()
-    {
-        WebInspector.ResourceTreeElement.prototype.onattach.call(this);
-
-        // SourceMap resources must be loaded by the frontend, and only
-        // then do they get their type information. So force a load as
-        // soon as they are attached to the sidebar.
-        this.resource.requestContent(function() {});
-    },
-
-    _updateTitles: function()
-    {
-        var oldMainTitle = this.mainTitle;
-        this.mainTitle = this.resource.displayName;
-
-        // Show the host as the subtitle if it is different from the originalSourceCode's host.
-        var sourceMapHost = this.resource.urlComponents.host;
-        var originalHost = this.resource.sourceMap.originalSourceCode.urlComponents.host;
-        var subtitle = sourceMapHost !== originalHost ? WebInspector.displayNameForHost(sourceMapHost) : null;
-        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
-
-        if (oldMainTitle !== this.mainTitle)
-            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
-    }
-};
-
-WebInspector.SourceMapResourceTreeElement.prototype.__proto__ = WebInspector.ResourceTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StorageManager.js b/Source/WebInspectorUI/UserInterface/StorageManager.js
deleted file mode 100644
index 737ff71b8..000000000
--- a/Source/WebInspectorUI/UserInterface/StorageManager.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.StorageManager = function()
-{
-    WebInspector.Object.call(this);
-
-    DOMStorageAgent.enable();
-    DatabaseAgent.enable();
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-
-    // COMPATIBILITY (iOS 6): DOMStorage was discovered via a DOMStorageObserver event. Now DOM Storage
-    // is added whenever a new securityOrigin is discovered. Check for DOMStorageAgent.getDOMStorageItems,
-    // which was renamed at the same time the change to start using securityOrigin was made.
-    if (DOMStorageAgent.getDOMStorageItems)
-        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.SecurityOriginDidChange, this._securityOriginDidChange, this);
-
-    this.initialize();
-};
-
-WebInspector.StorageManager.Event = {
-    CookieStorageObjectWasAdded: "storage-manager-cookie-storage-object-was-added",
-    DOMStorageObjectWasAdded: "storage-manager-dom-storage-object-was-added",
-    DOMStorageObjectWasInspected: "storage-dom-object-was-inspected",
-    DatabaseWasAdded: "storage-manager-database-was-added",
-    DatabaseWasInspected: "storage-object-was-inspected",
-    Cleared: "storage-manager-cleared"
-};
-
-WebInspector.StorageManager.prototype = {
-    constructor: WebInspector.StorageManager,
-
-    // Public
-
-    initialize: function()
-    {
-        this._domStorageObjects = [];
-        this._databaseObjects = [];
-        this._cookieStorageObjects = {};
-    },
-
-    domStorageWasAdded: function(id, host, isLocalStorage)
-    {
-        var domStorage = new WebInspector.DOMStorageObject(id, host, isLocalStorage);
-
-        this._domStorageObjects.push(domStorage);
-        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DOMStorageObjectWasAdded, {domStorage: domStorage});
-    },
-    
-    databaseWasAdded: function(id, host, name, version)
-    {
-        var database = new WebInspector.DatabaseObject(id, host, name, version);
-        
-        this._databaseObjects.push(database);
-        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DatabaseWasAdded, {database: database});
-    },
-
-    domStorageWasUpdated: function(id)
-    {
-        var domStorage = this._domStorageForId(id);
-        if (!domStorage)
-            return;
-
-        var domStorageView = WebInspector.contentBrowser.contentViewContainer.contentViewForRepresentedObject(domStorage, true);
-        if (!domStorageView)
-            return;
-
-        console.assert(domStorageView instanceof WebInspector.DOMStorageContentView);
-        domStorageView.update();
-    },
-
-    inspectDatabase: function(id)
-    {
-        var database = this._databaseForId(id);
-        console.assert(database);
-        if (!database)
-            return;
-        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DatabaseWasInspected, {database: database});
-    },
-
-    inspectDOMStorage: function(id)
-    {
-        var domStorage = this._domStorageForId(id);
-        console.assert(domStorage);
-        if (!domStorage)
-            return;
-        this.dispatchEventToListeners(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, {domStorage: domStorage});
-    },
-
-    // Private
-
-    _mainResourceDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        if (event.target.isMainFrame()) {
-            // If we are dealing with the main frame, we want to clear our list of objects, because we are navigating to a new page.
-            this.initialize();
-            this.dispatchEventToListeners(WebInspector.StorageManager.Event.Cleared);
-
-            this._addDOMStorageIfNeeded(event.target);
-        }
-
-        // Add the host of the frame that changed the main resource to the list of hosts there could be cookies for.
-        var host = parseURL(event.target.url).host;
-        if (!host)
-            return;
-
-        if (this._cookieStorageObjects[host])
-            return;
-
-        this._cookieStorageObjects[host] = new WebInspector.CookieStorageObject(host);
-        this.dispatchEventToListeners(WebInspector.StorageManager.Event.CookieStorageObjectWasAdded, {cookieStorage: this._cookieStorageObjects[host]});
-    },
-
-    _addDOMStorageIfNeeded: function(frame)
-    {
-        // Don't show storage if we don't have a security origin (about:blank).
-        if (!frame.securityOrigin || frame.securityOrigin === "://")
-            return;
-
-        // FIXME: Consider passing the other parts of the origin along to domStorageWasAdded.
-
-        var localStorageIdentifier = {securityOrigin: frame.securityOrigin, isLocalStorage: true};
-        if (!this._domStorageForId(localStorageIdentifier))
-            this.domStorageWasAdded(localStorageIdentifier, frame.mainResource.urlComponents.host, true);
-
-        var sessionStorageIdentifier = {securityOrigin: frame.securityOrigin, isLocalStorage: false};
-        if (!this._domStorageForId(sessionStorageIdentifier))
-            this.domStorageWasAdded(sessionStorageIdentifier, frame.mainResource.urlComponents.host, false);
-    },
-
-    _securityOriginDidChange: function(event)
-    {
-        console.assert(event.target instanceof WebInspector.Frame);
-
-        this._addDOMStorageIfNeeded(event.target);
-    },
-
-    _databaseForId: function(id)
-    {
-        for (var i = 0; i < this._databaseObjects.length; ++i) {
-            if (this._databaseObjects[i].id === id)
-                return this._databaseObjects[i];
-        }
-
-        return null;
-    },
-
-    _domStorageForId: function(id)
-    {
-        for (var i = 0; i < this._domStorageObjects.length; ++i) {
-            // The id is an object, so we need to compare the properties using Object.shallowEqual.
-            // COMPATIBILITY (iOS 6): The id was a string. Object.shallowEqual works for both.
-            if (Object.shallowEqual(this._domStorageObjects[i].id, id))
-                return this._domStorageObjects[i];
-        }
-
-        return null;
-    }
-};
-
-WebInspector.StorageManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StorageTreeElement.js b/Source/WebInspectorUI/UserInterface/StorageTreeElement.js
deleted file mode 100644
index dc72e8b3f..000000000
--- a/Source/WebInspectorUI/UserInterface/StorageTreeElement.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.StorageTreeElement = function(classNames, title, representedObject)
-{
-    WebInspector.GeneralTreeElement.call(this, classNames, title, null, representedObject, false);
-
-    this.small = true;
-    this.flattened = false;
-};
-
-WebInspector.StorageTreeElement.prototype = {
-    constructor: WebInspector.StorageTreeElement,
-
-    // Public
-
-    get flattened()
-    {
-        return this._flattened;
-    },
-
-    set flattened(flattened)
-    {
-        if (this._flattened === flattened)
-            return;
-
-        this._flattened = flattened;
-        if (!this._flattened) {
-            this.mainTitle = this.name;
-            this.subtitle = this.secondaryName;
-            this._updateChildrenTitles();
-            return;
-        }
-
-        this.mainTitle = this.categoryName;
-        this.subtitle = this.name;
-        this._updateChildrenTitles();
-    },
-
-    // Private
-
-    _updateChildrenTitles: function()
-    {
-        for (var i = 0; i < this.children.length; ++i) {
-            if (typeof this.children[i].updateTitles === "function")
-                this.children[i].updateTitles();
-        }
-    }
-};
-
-WebInspector.StorageTreeElement.prototype.__proto__ = WebInspector.GeneralTreeElement.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/StyleDetailsPanel.js
deleted file mode 100644
index 41f63570c..000000000
--- a/Source/WebInspectorUI/UserInterface/StyleDetailsPanel.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.StyleDetailsPanel = function(className, identifier, label)
-{
-    this._element = document.createElement("div");
-    this._element.className = className;
-
-    // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
-    this.element.classList.add(WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName);
-
-    this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, label);
-
-    this._nodeStyles = null;
-    this._visible = false;
-};
-
-WebInspector.StyleDetailsPanel.OffsetSectionsStyleClassName = "offset-sections";
-
-WebInspector.StyleDetailsPanel.prototype = {
-    constructor: WebInspector.StyleDetailsPanel,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get navigationItem()
-    {
-        return this._navigationItem;
-    },
-
-    get nodeStyles()
-    {
-        return this._nodeStyles;
-    },
-
-    shown: function()
-    {
-        if (this._visible)
-            return;
-
-        this._visible = true;
-
-        this._refreshNodeStyles();
-    },
-
-    hidden: function()
-    {
-        this._visible = false;
-    },
-
-    widthDidChange: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    markAsNeedsRefresh: function(domNode)
-    {
-        console.assert(domNode);
-        if (!domNode)
-            return;
-
-        if (!this._nodeStyles || this._nodeStyles.node !== domNode) {
-            if (this._nodeStyles) {
-                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
-                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
-            }
-
-            this._nodeStyles = WebInspector.cssStyleManager.stylesForNode(domNode);
-
-            console.assert(this._nodeStyles);
-            if (!this._nodeStyles)
-                return;
-
-            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this._nodeStylesRefreshed, this);
-            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
-
-            this._forceSignificantChange = true;
-        }
-
-        if (this._visible)
-            this._refreshNodeStyles();
-    },
-
-    refresh: function(significantChange)
-    {
-        // Implemented by subclasses.
-    },
-
-    // Private
-
-    get _initialScrollOffset()
-    {
-        if (!WebInspector.cssStyleManager.canForcePseudoClasses())
-            return 0;
-        return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
-    },
-
-    _refreshNodeStyles: function()
-    {
-        if (!this._nodeStyles)
-            return;
-        this._nodeStyles.refresh();
-    },
-
-    _refreshPreservingScrollPosition: function(significantChange)
-    {
-        significantChange = this._forceSignificantChange || significantChange || false;
-        delete this._forceSignificantChange;
-
-        var previousScrollTop = this._initialScrollOffset;
-
-        // Only remember the scroll position if the previous node is the same as this one.
-        if (this.element.parentNode && this._previousRefreshNodeIdentifier === this._nodeStyles.node.id)
-            previousScrollTop = this.element.parentNode.scrollTop;
-
-        this.refresh(significantChange);
-
-        this._previousRefreshNodeIdentifier = this._nodeStyles.node.id;
-
-        if (this.element.parentNode)
-            this.element.parentNode.scrollTop = previousScrollTop;
-    },
-
-    _nodeStylesRefreshed: function(event)
-    {
-        if (this._visible)
-            this._refreshPreservingScrollPosition(event.data.significantChange);
-    },
-
-    _nodeStylesNeedsRefreshed: function(event)
-    {
-        if (this._visible)
-            this._refreshNodeStyles();
-    }
-};
-
-WebInspector.StyleDetailsPanel.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/StyleRuleIcons.css b/Source/WebInspectorUI/UserInterface/StyleRuleIcons.css
deleted file mode 100644
index e75859066..000000000
--- a/Source/WebInspectorUI/UserInterface/StyleRuleIcons.css
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.author-style-rule-icon .icon {
-    content: url(Images/StyleRuleAuthor.pdf);
-}
-
-.user-style-rule-icon .icon {
-    content: url(Images/StyleRuleUser.pdf);
-}
-
-.user-agent-style-rule-icon .icon {
-    content: url(Images/StyleRuleUserAgent.pdf);
-}
-
-.inspector-style-rule-icon .icon {
-    content: url(Images/StyleRuleInspector.pdf);
-}
-
-.inherited-style-rule-icon .icon {
-    content: url(Images/StyleRuleInherited.pdf);
-}
-
-.inherited-element-style-rule-icon .icon {
-    content: url(Images/StyleRuleInheritedElement.pdf);
-}
diff --git a/Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css b/Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css
deleted file mode 100644
index a6ac8c06a..000000000
--- a/Source/WebInspectorUI/UserInterface/SyntaxHighlightingDefaultTheme.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/* These styles match Xcode 4's Default theme. */
-
-.cm-s-default,
-.syntax-highlighted {
-    color: black;
-
-    font-family: Menlo, monospace;
-    font-size: 11px;
-}
-
-.cm-s-default .cm-comment,
-.syntax-highlighted .css-comment,
-.syntax-highlighted .javascript-comment,
-.syntax-highlighted .html-comment {
-    color: rgb(0, 116, 0);
-}
-
-.cm-s-default .cm-tag,
-.cm-s-default .cm-atom,
-.cm-s-default .cm-keyword,
-.cm-s-default .cm-m-css.cm-meta,
-.cm-s-default .cm-m-css.cm-property,
-.cm-s-default .cm-m-css.cm-string-2,
-.cm-s-default .cm-m-javascript.cm-builtin,
-.syntax-highlighted .css-keyword,
-.syntax-highlighted .css-property,
-.syntax-highlighted .css-at-rule,
-.syntax-highlighted .css-important,
-.syntax-highlighted .javascript-keyword,
-.syntax-highlighted .html-tag {
-    color: rgb(170, 13, 145);
-}
-
-.cm-s-default .cm-number,
-.cm-s-default .cm-m-css.cm-atom,
-.syntax-highlighted .css-number,
-.syntax-highlighted .javascript-number {
-    color: rgb(28, 0, 207);
-}
-
-.cm-s-default .cm-def,
-.cm-s-default .cm-bracket,
-.cm-s-default .cm-operator,
-.cm-s-default .cm-qualifier,
-.cm-s-default .cm-variable,
-.cm-s-default .cm-variable-2,
-.cm-s-default .cm-variable-3,
-.cm-s-default .cm-m-css.cm-tag,
-.cm-s-default .cm-m-css.cm-builtin,
-.syntax-highlighted .css-selector,
-.syntax-highlighted .javascript-ident {
-    color: inherit;
-}
-
-.cm-s-default .cm-string,
-.syntax-highlighted .css-string,
-.syntax-highlighted .javascript-string,
-.syntax-highlighted .javascript-regexp,
-.syntax-highlighted .html-attribute-value {
-    color: rgb(196, 26, 22);
-}
-
-.cm-s-default .cm-m-xml.cm-meta,
-.syntax-highlighted .html-doctype {
-    color: rgb(192, 192, 192);
-}
-
-.cm-s-default .cm-m-xml.cm-attribute,
-.syntax-highlighted .html-attribute-name {
-    color: rgb(131, 108, 40);
-}
-
-.syntax-highlighted a {
-    color: rgb(14, 14, 255);
-}
-
-.cm-s-default .cm-link,
-.syntax-highlighted a {
-    text-decoration: none;
-    cursor: pointer;
-}
-
-.cm-s-default .cm-link:hover,
-.syntax-highlighted a:hover {
-    text-decoration: underline;
-}
-
-.supports-find-banner.showing-find-banner.syntax-highlighted .search-result,
-.supports-find-banner.showing-find-banner .syntax-highlighted .search-result {
-    background-color: rgba(235, 215, 38, 0.2);
-    border-bottom: 1px solid rgb(237, 202, 71);
-}
diff --git a/Source/WebInspectorUI/UserInterface/SyntaxHighlightingSupport.js b/Source/WebInspectorUI/UserInterface/SyntaxHighlightingSupport.js
deleted file mode 100644
index b440d32fe..000000000
--- a/Source/WebInspectorUI/UserInterface/SyntaxHighlightingSupport.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.SyntaxHighlightedStyleClassName = "syntax-highlighted";
-
-WebInspector.syntaxHighlightStringAsDocumentFragment = function(string, mimeType, baseURL)
-{
-    var resultFragment = document.createDocumentFragment();
-
-    function appendText(text, style)
-    {
-        if (!style) {
-            resultFragment.appendChild(document.createTextNode(text));
-            return;
-        }
-
-        var span = document.createElement("span");
-        span.className = "cm-" + style;
-        span.textContent = text;
-
-        resultFragment.appendChild(span);
-    }
-
-    CodeMirror.runMode(string, mimeType, appendText);
-
-    return resultFragment;
-};
diff --git a/Source/WebInspectorUI/UserInterface/Test.html b/Source/WebInspectorUI/UserInterface/Test.html
new file mode 100644
index 000000000..3808bbf63
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test.html
@@ -0,0 +1,186 @@
+<!--
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!--
+    These resources should match the order and groups used in Main.html.
+    -->
+    <script src="External/CodeMirror/codemirror.js"></script>
+    <script src="External/CodeMirror/css.js"></script>
+    <script src="External/CodeMirror/htmlmixed.js"></script>
+    <script src="External/CodeMirror/javascript.js"></script>
+    <script src="External/Esprima/esprima.js"></script>
+
+    <script src="Base/WebInspector.js"></script>
+    <script src="Base/LinkedList.js"></script>
+    <script src="Base/ListMultimap.js"></script>
+    <script src="Base/Object.js"></script>
+
+    <script src="Test/TestHarness.js"></script>
+    <script src="Test/FrontendTestHarness.js"></script>
+    <script src="Test/TestSuite.js"></script>
+
+    <script src="Test/Test.js"></script>
+
+    <script src="Base/DOMUtilities.js"></script>
+    <script src="Base/EventListener.js"></script>
+    <script src="Base/EventListenerSet.js"></script>
+    <script src="Base/URLUtilities.js"></script>
+    <script src="Base/Utilities.js"></script>
+    <script src="Base/Setting.js"></script>
+
+    <script src="Protocol/ProtocolTracer.js"></script>
+    <script src="Protocol/LoggingProtocolTracer.js"></script>
+
+    <script src="Protocol/InspectorBackend.js"></script>
+    <script src="Protocol/InspectorFrontendAPI.js"></script>
+    <script src="Protocol/InspectorFrontendHostStub.js"></script>
+    <script src="Protocol/LoadInspectorBackendCommands.js"></script>
+    <script src="Protocol/MessageDispatcher.js"></script>
+
+    <script src="Protocol/InspectorObserver.js"></script>
+    <script src="Protocol/CSSObserver.js"></script>
+    <script src="Protocol/ConsoleObserver.js"></script>
+    <script src="Protocol/DOMObserver.js"></script>
+    <script src="Protocol/DOMStorageObserver.js"></script>
+    <script src="Protocol/DebuggerObserver.js"></script>
+    <script src="Protocol/HeapObserver.js"></script>
+    <script src="Protocol/NetworkObserver.js"></script>
+    <script src="Protocol/PageObserver.js"></script>
+    <script src="Protocol/RemoteObject.js"></script>
+    <script src="Protocol/ReplayObserver.js"></script>
+    <script src="Protocol/RuntimeObserver.js"></script>
+    <script src="Protocol/TimelineObserver.js"></script>
+
+    <script src="Models/BreakpointAction.js"></script>
+    <script src="Models/ConsoleMessage.js"></script>
+    <script src="Models/Instrument.js"></script>
+    <script src="Models/SourceCode.js"></script>
+    <script src="Models/SourceCodeLocation.js"></script>
+    <script src="Models/Timeline.js"></script>
+    <script src="Models/TimelineRecord.js"></script>
+
+    <script src="Models/Breakpoint.js"></script>
+    <script src="Models/CSSCompletions.js"></script>
+    <script src="Models/CSSKeywordCompletions.js"></script>
+    <script src="Models/CSSMedia.js"></script>
+    <script src="Models/CSSProperty.js"></script>
+    <script src="Models/CSSRule.js"></script>
+    <script src="Models/CSSSelector.js"></script>
+    <script src="Models/CSSStyleDeclaration.js"></script>
+    <script src="Models/CSSStyleSheet.js"></script>
+    <script src="Models/CallFrame.js"></script>
+    <script src="Models/CollectionEntry.js"></script>
+    <script src="Models/Color.js"></script>
+    <script src="Models/CookieStorageObject.js"></script>
+    <script src="Models/ConsoleCommandResultMessage.js"></script>
+    <script src="Models/ContentFlow.js"></script>
+    <script src="Models/DOMNode.js"></script>
+    <script src="Models/DOMNodeStyles.js"></script>
+    <script src="Models/DOMStorageObject.js"></script>
+    <script src="Models/DOMTree.js"></script>
+    <script src="Models/CollectionEntryPreview.js"></script>
+    <script src="Models/ExecutionContext.js"></script>
+    <script src="Models/ExecutionContextList.js"></script>
+    <script src="Models/Frame.js"></script>
+    <script src="Models/FPSInstrument.js"></script>
+    <script src="Models/GarbageCollection.js"></script>
+    <script src="Models/Geometry.js"></script>
+    <script src="Models/IndexedDatabase.js"></script>
+    <script src="Models/IndexedDatabaseObjectStore.js"></script>
+    <script src="Models/IndexedDatabaseObjectStoreIndex.js"></script>
+    <script src="Models/IssueMessage.js"></script>
+    <script src="Models/LayoutInstrument.js"></script>
+    <script src="Models/LayoutTimelineRecord.js"></script>
+    <script src="Models/LazySourceCodeLocation.js"></script>
+    <script src="Models/NetworkInstrument.js"></script>
+    <script src="Models/NetworkTimeline.js"></script>
+    <script src="Models/ObjectPreview.js"></script>
+    <script src="Models/Probe.js"></script>
+    <script src="Models/ProbeSet.js"></script>
+    <script src="Models/ProbeSetDataFrame.js"></script>
+    <script src="Models/ProbeSetDataTable.js"></script>
+    <script src="Models/Profile.js"></script>
+    <script src="Models/ProfileNode.js"></script>
+    <script src="Models/ProfileNodeCall.js"></script>
+    <script src="Models/PropertyDescriptor.js"></script>
+    <script src="Models/PropertyPreview.js"></script>
+    <script src="Models/RenderingFrameTimelineRecord.js"></script>
+    <script src="Models/ReplaySession.js"></script>
+    <script src="Models/ReplaySessionSegment.js"></script>
+    <script src="Models/Resource.js"></script>
+    <script src="Models/ResourceCollection.js"></script>
+    <script src="Models/ResourceTimelineRecord.js"></script>
+    <script src="Models/Revision.js"></script>
+    <script src="Models/ScopeChainNode.js"></script>
+    <script src="Models/Script.js"></script>
+    <script src="Models/ScriptInstrument.js"></script>
+    <script src="Models/ScriptSyntaxTree.js"></script>
+    <script src="Models/ScriptTimelineRecord.js"></script>
+    <script src="Models/SourceCodeLocation.js"></script>
+    <script src="Models/SourceCodeRevision.js"></script>
+    <script src="Models/SourceCodeTimeline.js"></script>
+    <script src="Models/SourceMapResource.js"></script>
+    <script src="Models/StackTrace.js"></script>
+    <script src="Models/TextRange.js"></script>
+    <script src="Models/TimelineMarker.js"></script>
+    <script src="Models/TimelineRecording.js"></script>
+
+    <script src="Controllers/CSSStyleManager.js"></script>
+    <script src="Controllers/DOMTreeManager.js"></script>
+    <script src="Controllers/DebuggerManager.js"></script>
+    <script src="Controllers/FrameResourceManager.js"></script>
+    <script src="Controllers/HeapManager.js"></script>
+    <script src="Controllers/IssueManager.js"></script>
+    <script src="Controllers/LogManager.js"></script>
+    <script src="Controllers/ProbeManager.js"></script>
+    <script src="Controllers/ReplayManager.js"></script>
+    <script src="Controllers/RuntimeManager.js"></script>
+    <script src="Controllers/StorageManager.js"></script>
+    <script src="Controllers/TimelineManager.js"></script>
+
+    <script src="Controllers/Formatter.js"></script>
+    <script src="Controllers/FormatterContentBuilder.js"></script>
+    <script src="Views/CodeMirrorAdditions.js"></script>
+    <script src="Views/CodeMirrorFormatters.js"></script>
+
+    <script type="text/javascript">
+        WebInspector.loaded();
+
+        // Debug logging is synchronous on the test page.
+        InspectorTest.forceDebugLogging = false;
+
+        // Tee all TestHarness commands to stderr from within the Inspector.
+        InspectorTest.dumpActivityToSystemConsole = false;
+
+        // Best used in combination with dumpActivityToSystemConsole.
+        InspectorBackend.dumpInspectorProtocolMessages = false;
+    </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/Source/WebInspectorUI/UserInterface/Test/FrontendTestHarness.js b/Source/WebInspectorUI/UserInterface/Test/FrontendTestHarness.js
new file mode 100644
index 000000000..3a1dee123
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/FrontendTestHarness.js
@@ -0,0 +1,186 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+FrontendTestHarness = class FrontendTestHarness extends TestHarness
+{
+    constructor()
+    {
+        super();
+
+        this._results = [];
+        this._shouldResendResults = true;
+    }
+
+    // TestHarness Overrides
+
+    completeTest()
+    {
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog("completeTest()");
+
+        // Wait for results to be resent before requesting completeTest(). Otherwise, messages will be
+        // queued after pending dispatches run to zero and the test page will quit before processing them.
+        if (this._testPageIsReloading) {
+            this._completeTestAfterReload = true;
+            return;
+        }
+
+        InspectorBackend.runAfterPendingDispatches(this.evaluateInPage.bind(this, "TestPage.completeTest()"));
+    }
+
+    addResult(message)
+    {
+        let stringifiedMessage = TestHarness.messageAsString(message);
+
+        // Save the stringified message, since message may be a DOM element that won't survive reload.
+        this._results.push(stringifiedMessage);
+
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog(stringifiedMessage);
+
+        if (!this._testPageIsReloading)
+            this.evaluateInPage(`TestPage.addResult(unescape("${escape(stringifiedMessage)}"))`);
+    }
+
+    debugLog(message)
+    {
+        let stringifiedMessage = TestHarness.messageAsString(message);
+
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog(stringifiedMessage);
+
+        this.evaluateInPage(`TestPage.debugLog(unescape("${escape(stringifiedMessage)}"));`);
+    }
+
+    evaluateInPage(expression, callback)
+    {
+        // If we load this page outside of the inspector, or hit an early error when loading
+        // the test frontend, then defer evaluating the commands (indefinitely in the former case).
+        if (this._originalConsole && !window.RuntimeAgent) {
+            this._originalConsole["error"]("Tried to evaluate in test page, but connection not yet established:", expression);
+            return;
+        }
+
+        RuntimeAgent.evaluate.invoke({expression, objectGroup: "test", includeCommandLineAPI: false}, callback);
+    }
+
+    // Frontend test-specific methods.
+
+    expectNoError(error)
+    {
+        if (error) {
+            InspectorTest.log("PROTOCOL ERROR: " + error);
+            InspectorTest.completeTest();
+            throw "PROTOCOL ERROR";
+        }
+    }
+
+    testPageDidLoad()
+    {
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog("testPageDidLoad()");
+
+        this._testPageIsReloading = false;
+        this._resendResults();
+
+        this.dispatchEventToListeners(FrontendTestHarness.Event.TestPageDidLoad);
+
+        if (this._completeTestAfterReload)
+            this.completeTest();
+    }
+
+    reloadPage(shouldIgnoreCache)
+    {
+        console.assert(!this._testPageIsReloading);
+        console.assert(!this._testPageReloadedOnce);
+
+        this._testPageIsReloading = true;
+
+        return PageAgent.reload(!!shouldIgnoreCache)
+            .then(() => {
+                this._shouldResendResults = true;
+                this._testPageReloadedOnce = true;
+
+                return Promise.resolve(null);
+            });
+    }
+
+    redirectConsoleToTestOutput()
+    {
+        // We can't use arrow functions here because of 'arguments'. It might
+        // be okay once rest parameters work.
+        let self = this;
+        function createProxyConsoleHandler(type) {
+            return function() {
+                self.addResult(`${type}: ` + Array.from(arguments).join(" ")); 
+            };
+        }
+
+        let redirectedMethods = {};
+        for (let key in window.console) 
+            redirectedMethods[key] = window.console[key].bind(window.console);
+
+        for (let type of ["log", "error", "info"])
+            redirectedMethods[type] = createProxyConsoleHandler(type.toUpperCase());
+
+        this._originalConsole = window.console;
+        window.console = redirectedMethods;
+    }
+
+    reportUncaughtException(message, url, lineNumber, columnNumber)
+    {
+        let result = `Uncaught exception in inspector page: ${message} [${url}:${lineNumber}:${columnNumber}]`;
+
+        // If the connection to the test page is not set up, then just dump to console and give up.
+        // Errors encountered this early can be debugged by loading Test.html in a normal browser page.
+        if (this._originalConsole && (!InspectorFrontendHost || !InspectorBackend)) {
+            this._originalConsole["error"](result);
+            return false;
+        }
+
+        this.addResult(result);
+        this.completeTest();
+        // Stop default handler so we can empty InspectorBackend's message queue.
+        return true;
+    }
+
+    // Private
+
+    _resendResults()
+    {
+        console.assert(this._shouldResendResults);
+        this._shouldResendResults = false;
+
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog("_resendResults()");
+
+        for (let result of this._results)
+            this.evaluateInPage(`TestPage.addResult(unescape("${escape(result)}"))`);
+    }
+};
+
+FrontendTestHarness.Event = {
+    TestPageDidLoad: "frontend-test-test-page-did-load"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Test/InspectorProtocol.js b/Source/WebInspectorUI/UserInterface/Test/InspectorProtocol.js
new file mode 100644
index 000000000..108d77fd6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/InspectorProtocol.js
@@ -0,0 +1,180 @@
+/*
+ * Copyright (C) 2012 Samsung Electronics. All rights reserved.
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+InspectorProtocol = {};
+InspectorProtocol._dispatchTable = [];
+InspectorProtocol._placeholderRequestIds = [];
+InspectorProtocol._requestId = -1;
+InspectorProtocol.eventHandler = {};
+
+InspectorProtocol.sendCommand = function(methodOrObject, params, handler)
+{
+    // Allow new-style arguments object, as in awaitCommand.
+    let method = methodOrObject;
+    if (typeof methodOrObject === "object")
+        ({method, params, handler} = methodOrObject);
+
+    this._dispatchTable[++this._requestId] = handler;
+    let messageObject = {method, params, id: this._requestId};
+    this._sendMessage(messageObject);
+
+    return this._requestId;
+}
+
+InspectorProtocol.awaitCommand = function(args)
+{
+    let {method, params} = args;
+    let messageObject = {method, params, id: ++this._requestId};
+
+    return this.awaitMessage(messageObject);
+}
+
+InspectorProtocol.awaitMessage = function(messageObject)
+{
+    // Send a raw message to the backend. Mostly used to test the backend's error handling.
+    return new Promise((resolve, reject) => {
+        let requestId = messageObject.id;
+
+        // If the caller did not provide an id, then make one up so that the response
+        // can be used to settle a promise.
+        if (typeof requestId !== "number") {
+            requestId = ++this._requestId;
+            this._placeholderRequestIds.push(requestId);
+        }
+
+        this._dispatchTable[requestId] = {resolve, reject};
+        this._sendMessage(messageObject);
+    });
+}
+
+InspectorProtocol.awaitEvent = function(args)
+{
+    let event = args.event;
+    if (typeof event !== "string")
+        throw new Error("Event must be a string.");
+
+    return new Promise((resolve, reject) => {
+        InspectorProtocol.eventHandler[event] = function(message) {
+            InspectorProtocol.eventHandler[event] = undefined;
+            resolve(message);
+        }
+    });
+}
+
+InspectorProtocol._sendMessage = function(messageObject)
+{
+    let messageString = typeof messageObject !== "string" ? JSON.stringify(messageObject) : messageObject;
+
+    if (ProtocolTest.dumpInspectorProtocolMessages)
+        InspectorFrontendHost.unbufferedLog(`frontend: ${messageString}`);
+
+    InspectorFrontendHost.sendMessageToBackend(messageString);
+}
+
+InspectorProtocol.addEventListener = function(eventTypeOrObject, listener)
+{
+    let event = eventTypeOrObject;
+    if (typeof eventTypeOrObject === "object")
+        ({event, listener} = eventTypeOrObject);
+
+    if (typeof event !== "string")
+        throw new Error("Event name must be a string.");
+
+    if (typeof listener !== "function")
+        throw new Error("Event listener must be callable.");
+
+    // Convert to an array of listeners.
+    let listeners = InspectorProtocol.eventHandler[event];
+    if (!listeners)
+        listeners = InspectorProtocol.eventHandler[event] = [];
+    else if (typeof listeners === "function")
+        listeners = InspectorProtocol.eventHandler[event] = [listeners];
+
+    // Prevent registering multiple times.
+    if (listeners.includes(listener))
+        throw new Error("Cannot register the same listener more than once.");
+
+    listeners.push(listener);
+}
+
+InspectorProtocol.checkForError = function(responseObject)
+{
+    if (responseObject.error) {
+        ProtocolTest.log("PROTOCOL ERROR: " + JSON.stringify(responseObject.error));
+        ProtocolTest.completeTest();
+        throw "PROTOCOL ERROR";
+    }
+}
+
+InspectorProtocol.dispatchMessageFromBackend = function(messageObject)
+{
+    // This matches the debug dumping in InspectorBackend, which is bypassed
+    // by InspectorProtocol. Return messages should be dumped by InspectorBackend.
+    if (ProtocolTest.dumpInspectorProtocolMessages)
+        InspectorFrontendHost.unbufferedLog("backend: " + JSON.stringify(messageObject));
+
+    // If the message has an id, then it is a reply to a command.
+    let messageId = messageObject.id;
+
+    // If the id is 'null', then it may be an error response.
+    if (messageId === null)
+        messageId = InspectorProtocol._placeholderRequestIds.shift();
+
+    // If we could figure out a requestId, then dispatch the message.
+    if (typeof messageId === "number") {
+        let handler = InspectorProtocol._dispatchTable[messageId];
+        if (!handler)
+            return;
+
+        if (typeof handler === "function")
+            handler(messageObject);
+        else if (typeof handler === "object") {
+            let {resolve, reject} = handler;
+            if ("error" in messageObject)
+                reject(messageObject.error);
+            else
+                resolve(messageObject.result);
+        }
+    } else {
+        // Otherwise, it is an event.
+        let eventName = messageObject["method"];
+        let handler = InspectorProtocol.eventHandler[eventName];
+        if (!handler)
+            return;
+
+        if (typeof handler === "function")
+            handler(messageObject);
+        else if (handler instanceof Array) {
+            handler.map((listener) => { listener.call(null, messageObject); });
+        } else if (typeof handler === "object") {
+            let {resolve, reject} = handler;
+            if ("error" in messageObject)
+                reject(messageObject.error);
+            else
+                resolve(messageObject.result);
+        }
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Test/ProtocolTestHarness.js b/Source/WebInspectorUI/UserInterface/Test/ProtocolTestHarness.js
new file mode 100644
index 000000000..9cf7f2988
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/ProtocolTestHarness.js
@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+ProtocolTestHarness = class ProtocolTestHarness extends TestHarness
+{
+    // TestHarness Overrides
+
+    completeTest()
+    {
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog("completeTest()");
+
+        this.evaluateInPage("TestPage.closeTest();");
+    }
+
+    addResult(message)
+    {
+        let stringifiedMessage = TestHarness.messageAsString(message);
+
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog(stringifiedMessage);
+
+        // Unfortunately, every string argument must be escaped because tests are not consistent
+        // with respect to escaping with single or double quotes. Some exceptions use single quotes.
+        this.evaluateInPage(`TestPage.log(unescape("${escape(stringifiedMessage)}"));`);
+    }
+
+    debugLog(message)
+    {
+        let stringifiedMessage = TestHarness.messageAsString(message);
+
+        if (this.dumpActivityToSystemConsole)
+            InspectorFrontendHost.unbufferedLog(stringifiedMessage);
+
+        this.evaluateInPage(`TestPage.debugLog(unescape("${escape(stringifiedMessage)}"));`);
+    }
+
+    evaluateInPage(expression, callback)
+    {
+        let args = {
+            method: "Runtime.evaluate",
+            params: {expression}
+        }
+
+        if (typeof callback === "function")
+            InspectorProtocol.sendCommand(args, callback);
+        else
+            return InspectorProtocol.awaitCommand(args);
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Test/Test.js b/Source/WebInspectorUI/UserInterface/Test/Test.js
new file mode 100644
index 000000000..e8ee4f0e2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/Test.js
@@ -0,0 +1,100 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggableType = {
+    Web: "web",
+    JavaScript: "javascript"
+};
+
+WebInspector.loaded = function()
+{
+    this.debuggableType = WebInspector.DebuggableType.Web;
+    this.hasExtraDomains = false;
+
+    // Register observers for events from the InspectorBackend.
+    // The initialization order should match the same in Main.js.
+    InspectorBackend.registerInspectorDispatcher(new WebInspector.InspectorObserver);
+    InspectorBackend.registerPageDispatcher(new WebInspector.PageObserver);
+    InspectorBackend.registerConsoleDispatcher(new WebInspector.ConsoleObserver);
+    InspectorBackend.registerDOMDispatcher(new WebInspector.DOMObserver);
+    InspectorBackend.registerNetworkDispatcher(new WebInspector.NetworkObserver);
+    InspectorBackend.registerDebuggerDispatcher(new WebInspector.DebuggerObserver);
+    InspectorBackend.registerHeapDispatcher(new WebInspector.HeapObserver);
+    InspectorBackend.registerTimelineDispatcher(new WebInspector.TimelineObserver);
+    InspectorBackend.registerCSSDispatcher(new WebInspector.CSSObserver);
+    InspectorBackend.registerRuntimeDispatcher(new WebInspector.RuntimeObserver);
+    if (InspectorBackend.registerReplayDispatcher)
+        InspectorBackend.registerReplayDispatcher(new WebInspector.ReplayObserver);
+
+    // Instantiate controllers used by tests.
+    this.frameResourceManager = new WebInspector.FrameResourceManager;
+    this.domTreeManager = new WebInspector.DOMTreeManager;
+    this.cssStyleManager = new WebInspector.CSSStyleManager;
+    this.logManager = new WebInspector.LogManager;
+    this.issueManager = new WebInspector.IssueManager;
+    this.runtimeManager = new WebInspector.RuntimeManager;
+    this.heapManager = new WebInspector.HeapManager;
+    this.timelineManager = new WebInspector.TimelineManager;
+    this.debuggerManager = new WebInspector.DebuggerManager;
+    this.probeManager = new WebInspector.ProbeManager;
+    this.replayManager = new WebInspector.ReplayManager;
+
+    // Global controllers.
+    this.quickConsole = {executionContextIdentifier: undefined};
+
+    document.addEventListener("DOMContentLoaded", this.contentLoaded);
+
+    // Enable agents.
+    InspectorAgent.enable();
+    ConsoleAgent.enable();
+
+    // Perform one-time tasks.
+    WebInspector.CSSCompletions.requestCSSCompletions();
+
+    // Global settings.
+    this.showShadowDOMSetting = new WebInspector.Setting("show-shadow-dom", true);
+}
+
+WebInspector.contentLoaded = function()
+{
+    // Signal that the frontend is now ready to receive messages.
+    InspectorFrontendAPI.loadCompleted();
+
+    // Tell the InspectorFrontendHost we loaded, which causes the window to display
+    // and pending InspectorFrontendAPI commands to be sent.
+    InspectorFrontendHost.loaded();
+}
+
+WebInspector.isDebugUIEnabled = () => false;
+
+WebInspector.UIString = (string) => string;
+
+// Add stubs that are called by the frontend API.
+WebInspector.updateDockedState = () => {};
+WebInspector.updateDockingAvailability = () => {};
+
+window.InspectorTest = new FrontendTestHarness();
+
+InspectorTest.redirectConsoleToTestOutput();
diff --git a/Source/WebInspectorUI/UserInterface/Test/TestHarness.js b/Source/WebInspectorUI/UserInterface/Test/TestHarness.js
new file mode 100644
index 000000000..398d8cfc9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/TestHarness.js
@@ -0,0 +1,118 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+TestHarness = class TestHarness extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._logCount = 0;
+    }
+
+    completeTest()
+    {
+        throw new Error("Must be implemented by subclasses.");
+    }
+
+    addResult()
+    {
+        throw new Error("Must be implemented by subclasses.");
+    }
+
+    debugLog()
+    {
+        throw new Error("Must be implemented by subclasses.");
+    }
+
+    evaluateInPage(string, callback)
+    {
+        throw new Error("Must be implemented by subclasses.");
+    }
+
+    createAsyncSuite(name)
+    {
+        return new AsyncTestSuite(this, name);
+    }
+
+    createSyncSuite(name)
+    {
+        return new SyncTestSuite(this, name);
+    }
+
+    get logCount()
+    {
+        return this._logCount;
+    }
+
+    log(message)
+    {
+        ++this._logCount;
+
+        if (this.forceDebugLogging)
+            this.debugLog(message);
+        else
+            this.addResult(message);
+    }
+
+    assert(condition, message)
+    {
+        if (condition)
+            return;
+
+        let stringifiedMessage = TestHarness.messageAsString(message);
+        this.log("ASSERT: " + stringifiedMessage);
+    }
+
+    expectThat(condition, message)
+    {
+        if (condition)
+            this.pass(message);
+        else
+            this.fail(message);
+    }
+
+    pass(message)
+    {
+        let stringifiedMessage = TestHarness.messageAsString(message);
+        this.log("PASS: " + stringifiedMessage);
+    }
+
+    fail(message)
+    {
+        let stringifiedMessage = TestHarness.messageAsString(message);
+        this.log("FAIL: " + stringifiedMessage);
+    }
+
+    // Protected
+
+    static messageAsString(message)
+    {
+        if (message instanceof Element)
+            return message.textContent;
+        
+        return (typeof message !== "string") ? JSON.stringify(message) : message;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Test/TestStub.js b/Source/WebInspectorUI/UserInterface/Test/TestStub.js
new file mode 100644
index 000000000..cda7c7ac6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/TestStub.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2012 Samsung Electronics. All rights reserved.
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+InspectorFrontendAPI = {};
+InspectorFrontendAPI.dispatchMessageAsync = InspectorProtocol.dispatchMessageFromBackend;
+
+window.ProtocolTest = new ProtocolTestHarness();
+
+window.addEventListener("message", (event) => {
+    try {
+        eval(event.data);
+    } catch (e) {
+        alert(e.stack);
+        ProtocolTest.completeTest();
+        throw e;
+    }
+});
diff --git a/Source/WebInspectorUI/UserInterface/Test/TestSuite.js b/Source/WebInspectorUI/UserInterface/Test/TestSuite.js
new file mode 100644
index 000000000..01d854e02
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Test/TestSuite.js
@@ -0,0 +1,243 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+TestSuite = class TestSuite extends WebInspector.Object
+{
+    constructor(harness, name) {
+        if (!(harness instanceof TestHarness))
+            throw new Error("Must pass the test's harness as the first argument.");
+
+        if (typeof name !== "string" || !name.trim().length)
+            throw new Error("Tried to create TestSuite without string suite name.");
+
+        super();
+
+        this.name = name;
+        this._harness = harness;
+
+        this.testcases = [];
+        this.runCount = 0;
+        this.failCount = 0;
+    }
+
+    // Use this if the test file only has one suite, and no handling
+    // of the value returned by runTestCases() is needed.
+    runTestCasesAndFinish()
+    {
+        throw new Error("Must be implemented by subclasses.");
+    }
+
+    runTestCases()
+    {
+        throw new Error("Must be implemented by subclasses.");
+    }
+
+    get passCount()
+    {
+        return this.runCount - this.failCount;
+    }
+
+    get skipCount()
+    {
+        if (this.failCount)
+            return this.testcases.length - this.runCount;
+        else
+            return 0;
+    }
+
+    addTestCase(testcase)
+    {
+        if (!testcase || !(testcase instanceof Object))
+            throw new Error("Tried to add non-object test case.");
+
+        if (typeof testcase.name !== "string" || !testcase.name.trim().length)
+            throw new Error("Tried to add test case without a name.");
+
+        if (typeof testcase.test !== "function")
+            throw new Error("Tried to add test case without `test` function.");
+
+        if (testcase.setup && typeof testcase.setup !== "function")
+            throw new Error("Tried to add test case with invalid `setup` parameter (must be a function).")
+
+        if (testcase.teardown && typeof testcase.teardown !== "function")
+            throw new Error("Tried to add test case with invalid `teardown` parameter (must be a function).")
+
+        this.testcases.push(testcase);
+    }
+
+    static messageFromThrownObject(e)
+    {
+        let message = e;
+        if (e instanceof Error)
+            message = e.message;
+
+        if (typeof message !== "string")
+            message = JSON.stringify(message);
+
+        return message;
+    }
+};
+
+AsyncTestSuite = class AsyncTestSuite extends TestSuite
+{
+    runTestCasesAndFinish()
+    {
+        let finish = () => { this._harness.completeTest(); };
+
+        this.runTestCases()
+            .then(finish)
+            .catch(finish);
+    }
+
+    runTestCases()
+    {
+        if (!this.testcases.length)
+            throw new Error("Tried to call runTestCases() for suite with no test cases");
+        if (this._startedRunning)
+            throw new Error("Tried to call runTestCases() more than once.");
+
+        this._startedRunning = true;
+
+        this._harness.log("");
+        this._harness.log(`== Running test suite: ${this.name}`);
+
+        // Avoid adding newlines if nothing was logged.
+        let priorLogCount = this._harness.logCount;
+        let result = this.testcases.reduce((chain, testcase, i) => {
+            if (testcase.setup) {
+                chain = chain.then(() => {
+                    this._harness.log("-- Running test setup.");
+                    return new Promise(testcase.setup);
+                });
+            }
+
+            chain = chain.then(() => {
+                if (i > 0 && priorLogCount + 1 < this._harness.logCount)
+                    this._harness.log("");
+
+                priorLogCount = this._harness.logCount;
+                this._harness.log(`-- Running test case: ${testcase.name}`);
+                this.runCount++;
+                return new Promise(testcase.test);
+            });
+
+            if (testcase.teardown) {
+                chain = chain.then(() => {
+                    this._harness.log("-- Running test teardown.");
+                    return new Promise(testcase.teardown);
+                });
+            }
+            return chain;
+        }, Promise.resolve());
+
+        return result.catch((e) => {
+            this.failCount++;
+            let message = TestSuite.messageFromThrownObject(e);
+            this._harness.log(`!! EXCEPTION: ${message}`);
+
+            throw e; // Reject this promise by re-throwing the error.
+        });
+    }
+};
+
+SyncTestSuite = class SyncTestSuite extends TestSuite
+{
+    runTestCasesAndFinish()
+    {
+        this.runTestCases();
+        this._harness.completeTest();
+    }
+
+    runTestCases()
+    {
+        if (!this.testcases.length)
+            throw new Error("Tried to call runTestCases() for suite with no test cases");
+        if (this._startedRunning)
+            throw new Error("Tried to call runTestCases() more than once.");
+
+        this._startedRunning = true;
+
+        this._harness.log("");
+        this._harness.log(`== Running test suite: ${this.name}`);
+
+        let priorLogCount = this._harness.logCount;
+        for (let i = 0; i < this.testcases.length; i++) {
+            let testcase = this.testcases[i];
+            if (i > 0 && priorLogCount + 1 < this._harness.logCount)
+                this._harness.log("");
+
+            priorLogCount = this._harness.logCount;
+
+            // Run the setup action, if one was provided.
+            if (testcase.setup) {
+                this._harness.log("-- Running test setup.");
+                try {
+                    let result = testcase.setup.call(null);
+                    if (result === false) {
+                        this._harness.log("!! EXCEPTION");
+                        return false;
+                    }
+                } catch (e) {
+                    let message = TestSuite.messageFromThrownObject(e);
+                    this._harness.log(`!! EXCEPTION: ${message}`);
+                    return false;
+                }
+            }
+
+            this._harness.log("-- Running test case: " + testcase.name);
+            this.runCount++;
+            try {
+                let result = testcase.test.call(null);
+                if (result === false) {
+                    this.failCount++;
+                    return false;
+                }
+            } catch (e) {
+                this.failCount++;
+                let message = TestSuite.messageFromThrownObject(e);
+                this._harness.log(`!! EXCEPTION: ${message}`);
+                return false;
+            }
+
+            // Run the teardown action, if one was provided.
+            if (testcase.teardown) {
+                this._harness.log("-- Running test teardown.");
+                try {
+                    let result = testcase.teardown.call(null);
+                    if (result === false) {
+                        this._harness.log("!! EXCEPTION:");
+                        return false;
+                    }
+                } catch (e) {
+                    let message = TestSuite.messageFromThrownObject(e);
+                    this._harness.log(`!! EXCEPTION: ${message}`);
+                    return false;
+                }
+            }
+        }
+
+        return true;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/TestStub.html b/Source/WebInspectorUI/UserInterface/TestStub.html
new file mode 100644
index 000000000..a73881f74
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/TestStub.html
@@ -0,0 +1,58 @@
+<!--
+Copyright (C) 2015 Apple Inc. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1.  Redistributions of source code must retain the above copyright
+    notice, this list of conditions and the following disclaimer.
+2.  Redistributions in binary form must reproduce the above copyright
+    notice, this list of conditions and the following disclaimer in the
+    documentation and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <!--
+    These resources should match the order and groups used in Main.html and Test.html.
+    -->
+    <script src="Base/WebInspector.js"></script>
+    <script src="Base/LinkedList.js"></script>
+    <script src="Base/ListMultimap.js"></script>
+    <script src="Base/Object.js"></script>
+    <script src="Base/Utilities.js"></script>
+
+    <script src="Models/CallingContextTree.js"></script>
+
+    <script src="Test/TestSuite.js"></script>
+    <script src="Test/TestHarness.js"></script>
+    <script src="Test/ProtocolTestHarness.js"></script>
+
+    <script src="Test/InspectorProtocol.js"></script>
+
+    <script src="Test/TestStub.js"></script>
+    <script>
+        // Debug logging is synchronous on the test page.
+        ProtocolTest.forceDebugLogging = false;
+
+        // Tee all TestHarness commands to stderr from within the Inspector.
+        ProtocolTest.dumpActivityToSystemConsole = false;
+
+        // Best used in combination with dumpActivityToSystemConsole.
+        ProtocolTest.dumpInspectorProtocolMessages = false;
+    </script>
+</head>
+</html>
diff --git a/Source/WebInspectorUI/UserInterface/TextContentView.js b/Source/WebInspectorUI/UserInterface/TextContentView.js
deleted file mode 100644
index 8ef6ef348..000000000
--- a/Source/WebInspectorUI/UserInterface/TextContentView.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TextContentView = function(string, mimeType)
-{
-    WebInspector.ContentView.call(this, string);
-
-    this.element.classList.add(WebInspector.TextContentView.StyleClassName);
-
-    this._textEditor = new WebInspector.TextEditor;
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
-
-    this.element.appendChild(this._textEditor.element);
-
-    this._textEditor.readOnly = true;
-    this._textEditor.mimeType = mimeType;
-    this._textEditor.string = string;
-
-    var toolTip = WebInspector.UIString("Pretty print");
-    var activatedToolTip = WebInspector.UIString("Original formatting");
-    this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.pdf", 16, 16);
-    this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
-    this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
-};
-
-WebInspector.TextContentView.StyleClassName = "text";
-
-WebInspector.TextContentView.prototype = {
-    constructor: WebInspector.TextContentView,
-
-    // Public
-
-    get textEditor()
-    {
-        return this._textEditor;
-    },
-
-    get navigationItems()
-    {
-        return [this._prettyPrintButtonNavigationItem];
-    },
-
-    revealPosition: function(position, textRangeToSelect, forceUnformatted)
-    {
-        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
-    },
-
-    shown: function()
-    {
-        WebInspector.ResourceContentView.prototype.shown.call(this);
-
-        this._textEditor.shown();
-    },
-
-    hidden: function()
-    {
-        WebInspector.ResourceContentView.prototype.hidden.call(this);
-
-        this._textEditor.hidden();
-    },
-
-    closed: function()
-    {
-        WebInspector.ContentView.prototype.closed.call(this);
-
-        this._textEditor.close();
-    },
-
-    get supportsSave()
-    {
-        return true;
-    },
-
-    get saveData()
-    {
-        var url = "web-inspector:///" + encodeURI(WebInspector.UIString("Untitled")) + ".txt";
-        return {url: url, content: this._textEditor.string, forceSaveAs: true};
-    },
-
-    get supportsSearch()
-    {
-        return true;
-    },
-
-    get numberOfSearchResults()
-    {
-        return this._textEditor.numberOfSearchResults;
-    },
-
-    get hasPerformedSearch()
-    {
-        return this._textEditor.currentSearchQuery !== null;
-    },
-
-    set automaticallyRevealFirstSearchResult(reveal)
-    {
-        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
-    },
-
-    performSearch: function(query)
-    {
-        this._textEditor.performSearch(query);
-    },
-
-    searchCleared: function()
-    {
-        this._textEditor.searchCleared();
-    },
-
-    searchQueryWithSelection: function()
-    {
-        return this._textEditor.searchQueryWithSelection();
-    },
-
-    revealPreviousSearchResult: function(changeFocus)
-    {
-        this._textEditor.revealPreviousSearchResult(changeFocus);
-    },
-
-    revealNextSearchResult: function(changeFocus)
-    {
-        this._textEditor.revealNextSearchResult(changeFocus);
-    },
-
-    updateLayout: function()
-    {
-        this._textEditor.updateLayout();
-    },
-
-    // Private
-
-    _togglePrettyPrint: function(event)
-    {
-        var activated = !this._prettyPrintButtonNavigationItem.activated;
-        this._textEditor.formatted = activated;
-    },
-
-    _textEditorFormattingDidChange: function(event)
-    {
-        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
-    },
-
-    _numberOfSearchResultsDidChange: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
-    }
-};
-
-WebInspector.TextContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TextEditor.css b/Source/WebInspectorUI/UserInterface/TextEditor.css
deleted file mode 100644
index c9dfbb439..000000000
--- a/Source/WebInspectorUI/UserInterface/TextEditor.css
+++ /dev/null
@@ -1,164 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.text-editor {
-    position: relative;
-
-    overflow: hidden;
-}
-
-.text-editor > .CodeMirror {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: auto;
-}
-
-.text-editor > .CodeMirror .has-breakpoint:not(.breakpoint-disabled) .CodeMirror-linenumber {
-    color: white;
-}
-
-.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber {
-    color: transparent;
-}
-
-.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: -7px;
-
-    content: "";
-
-    z-index: -2;
-
-    border-image-source: -webkit-image-set(url(Images/BreakpointInactive.png) 1x, url(Images/BreakpointInactive@2x.png) 2x);
-    border-image-slice: 3 7 3 3 fill;
-    border-width: 3px 7px 3px 3px;
-}
-
-.text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before {
-    border-image-source: -webkit-image-set(url(Images/Breakpoint.png) 1x, url(Images/Breakpoint@2x.png) 2x);
-}
-
-.text-editor > .CodeMirror .breakpoint-disabled .CodeMirror-linenumber::before {
-    opacity: 0.35;
-}
-
-.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber::before {
-    content: "•••";
-    color: white;
-    line-height: 6px;
-    text-align: center;
-    text-indent: -1px;
-}
-
-.text-editor > .CodeMirror .execution-line .CodeMirror-linenumber::after {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: -9px;
-    width: 9px;
-
-    content: "";
-
-    z-index: -1;
-
-    background-image: -webkit-image-set(url(Images/InstructionPointer.png) 1x, url(Images/InstructionPointer@2x.png) 2x);
-    background-size: 9px 100%;
-    background-repeat: no-repeat;
-}
-
-.text-editor > .CodeMirror .execution-line {
-    background-color: rgb(217, 234, 208) !important;
-}
-
-.text-editor .bouncy-highlight {
-    position: absolute;
-    z-index: 100;
-
-    box-shadow: inset rgb(250, 232, 140) 0 -1px 0, rgba(211, 197, 96, 1) 0 1px 1px, rgba(0, 0, 0, 0.33) 0 1px 2px 1px;
-    text-shadow: white 0 0 2px;
-
-    background: -webkit-linear-gradient(top, rgb(250, 237, 108), rgb(242, 220, 100));
-    border-radius: 7px;
-
-    padding: 2px 4px;
-    margin-top: -2px;
-    margin-left: -4px;
-
-    -webkit-user-select: none;
-    pointer-events: none;
-
-    -webkit-animation-name: text-editor-bouncy;
-    -webkit-animation-duration: 750ms;
-    -webkit-animation-timing-function: ease-in-out;
-
-    opacity: 0;
-}
-
-@-webkit-keyframes text-editor-bouncy {
-    0% {
-        -webkit-transform: scale(1);
-        opacity: 1;
-    }
-
-    12.5% {
-        -webkit-transform: scale(1.25);
-    }
-
-    25% {
-        -webkit-transform: scale(1);
-    }
-
-    62.5% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-.text-editor > .CodeMirror .highlighted {
-    -webkit-animation: "text-editor-highlight-fadeout" 2s;
-}
-
-@-webkit-keyframes text-editor-highlight-fadeout {
-    from { background-color: highlight; }
-}
-
-.text-editor > .CodeMirror .hovered-expression-highlight {
-    -webkit-animation: "text-editor-hovered-expression-highlight-fadeout" 2s;
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-@-webkit-keyframes text-editor-hovered-expression-highlight-fadeout {
-    from { background-color: highlight; }
-    to { background-color: rgba(0, 0, 0, 0.1); }
-}
diff --git a/Source/WebInspectorUI/UserInterface/TextEditor.js b/Source/WebInspectorUI/UserInterface/TextEditor.js
deleted file mode 100644
index c83a9a05d..000000000
--- a/Source/WebInspectorUI/UserInterface/TextEditor.js
+++ /dev/null
@@ -1,1236 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TextEditor = function(element, mimeType, delegate)
-{
-    WebInspector.Object.call(this);
-
-    var text = (element ? element.textContent : "");
-    this._element = element || document.createElement("div");
-    this._element.classList.add(WebInspector.TextEditor.StyleClassName);
-    this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
-
-    this._readOnly = true;
-
-    this._codeMirror = CodeMirror(this.element, {
-        readOnly: this._readOnly,
-        indentWithTabs: true,
-        indentUnit: 4,
-        lineNumbers: true,
-        lineWrapping: true,
-        matchBrackets: true,
-        autoCloseBrackets: true
-    });
-
-    this._codeMirror.on("change", this._contentChanged.bind(this));
-    this._codeMirror.on("gutterClick", this._gutterMouseDown.bind(this));
-    this._codeMirror.getScrollerElement().addEventListener("click", this._openClickedLinks.bind(this), true);
-
-    this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
-    this._tokenTrackingController = new WebInspector.CodeMirrorTokenTrackingController(this._codeMirror, this);
-
-    this._initialStringNotSet = true;
-
-    this.mimeType = mimeType;
-
-    this._breakpoints = {};
-    this._executionLineNumber = NaN;
-    this._executionColumnNumber = NaN;
-
-    this._searchQuery = null;
-    this._searchResults = [];
-    this._currentSearchResultIndex = -1;
-
-    this._formatted = false
-    this._formatterSourceMap = null;
-
-    this._delegate = delegate || null;
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.TextEditor);
-
-WebInspector.TextEditor.StyleClassName = "text-editor";
-WebInspector.TextEditor.HighlightedStyleClassName = "highlighted";
-WebInspector.TextEditor.SearchResultStyleClassName = "search-result";
-WebInspector.TextEditor.HasBreakpointStyleClassName = "has-breakpoint";
-WebInspector.TextEditor.BreakpointResolvedStyleClassName = "breakpoint-resolved";
-WebInspector.TextEditor.BreakpointDisabledStyleClassName = "breakpoint-disabled";
-WebInspector.TextEditor.MultipleBreakpointsStyleClassName = "multiple-breakpoints";
-WebInspector.TextEditor.ExecutionLineStyleClassName = "execution-line";
-WebInspector.TextEditor.BouncyHighlightStyleClassName = "bouncy-highlight";
-WebInspector.TextEditor.NumberOfFindsPerSearchBatch = 10;
-WebInspector.TextEditor.HighlightAnimationDuration = 2000;
-
-WebInspector.TextEditor.Event = {
-    ExecutionLineNumberDidChange: "text-editor-execution-line-number-did-change",
-    NumberOfSearchResultsDidChange: "text-editor-number-of-search-results-did-change",
-    ContentDidChange: "text-editor-content-did-change",
-    FormattingDidChange: "text-editor-formatting-did-change"
-};
-
-WebInspector.TextEditor.prototype = {
-    constructor: WebInspector.TextEditor,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get string()
-    {
-        return this._codeMirror.getValue();
-    },
-
-    set string(newString)
-    {
-        function update()
-        {
-            this._codeMirror.setValue(newString);
-
-            if (this._initialStringNotSet) {
-                this._codeMirror.clearHistory();
-                this._codeMirror.markClean();
-                delete this._initialStringNotSet;
-            }
-
-            // Automatically format the content.
-            if (this._autoFormat) {
-                console.assert(!this.formatted);
-                this.formatted = true;
-                delete this._autoFormat;
-            }
-
-            // Update the execution line now that we might have content for that line.
-            this._updateExecutionLine();
-
-            // Set the breakpoint styles now that we might have content for those lines.
-            for (var lineNumber in this._breakpoints)
-                this._setBreakpointStylesOnLine(lineNumber);
-
-            // Try revealing the pending line now that we might have content with enough lines.
-            this._revealPendingPositionIfPossible();
-        }
-
-        this._ignoreCodeMirrorContentDidChangeEvent = true;
-        this._codeMirror.operation(update.bind(this));
-        delete this._ignoreCodeMirrorContentDidChangeEvent;
-    },
-
-    get readOnly()
-    {
-        return this._codeMirror.getOption("readOnly") || false;
-    },
-
-    set readOnly(readOnly)
-    {
-        this._readOnly = readOnly;
-        this._updateCodeMirrorReadOnly();
-    },
-
-    get formatted()
-    {
-        return this._formatted;
-    },
-
-    set formatted(formatted)
-    {
-        if (this._formatted === formatted)
-            return;
-
-        console.assert(!formatted || this.canBeFormatted());
-        if (formatted && !this.canBeFormatted())
-            return;
-
-        this._ignoreCodeMirrorContentDidChangeEvent = true;
-        this._prettyPrint(formatted);
-        delete this._ignoreCodeMirrorContentDidChangeEvent;
-
-        this._formatted = formatted;
-        this._updateCodeMirrorReadOnly();
-
-        this.dispatchEventToListeners(WebInspector.TextEditor.Event.FormattingDidChange);
-    },
-
-    set autoFormat(auto)
-    {
-        this._autoFormat = auto;
-    },
-
-    hasFormatter: function()
-    {
-        const supportedModes = {
-            "javascript": true,
-            "css-base": true,
-        };
-
-        var mode = this._codeMirror.getMode();
-        return mode.name in supportedModes;
-    },
-
-    canBeFormatted: function()
-    {
-        // Can be overriden by subclasses.
-        return this.hasFormatter();
-    },
-
-    get selectedTextRange()
-    {
-        var start = this._codeMirror.getCursor(true);
-        var end = this._codeMirror.getCursor(false);
-        return this._textRangeFromCodeMirrorPosition(start, end);
-    },
-
-    set selectedTextRange(textRange)
-    {
-        var position = this._codeMirrorPositionFromTextRange(textRange);
-        this._codeMirror.setSelection(position.start, position.end);
-    },
-
-    get mimeType()
-    {
-        return this._mimeType;
-    },
-
-    set mimeType(newMIMEType)
-    {
-        this._mimeType = newMIMEType;
-        this._codeMirror.setOption("mode", newMIMEType);
-    },
-
-    get executionLineNumber()
-    {
-        return this._executionLineNumber;
-    },
-
-    set executionLineNumber(lineNumber)
-    {
-        // Only return early if there isn't a line handle and that isn't changing.
-        if (!this._executionLineHandle && isNaN(lineNumber))
-            return;
-
-        this._executionLineNumber = lineNumber;
-        this._updateExecutionLine();
-
-        // Still dispatch the event even if the number didn't change. The execution state still
-        // could have changed (e.g. continuing in a loop with a breakpoint inside).
-        this.dispatchEventToListeners(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange);
-    },
-
-    get executionColumnNumber()
-    {
-        return this._executionColumnNumber;
-    },
-
-    set executionColumnNumber(columnNumber)
-    {
-        this._executionColumnNumber = columnNumber;
-    },
-
-    get formatterSourceMap()
-    {
-        return this._formatterSourceMap;
-    },
-
-    get tokenTrackingController()
-    {
-        return this._tokenTrackingController;
-    },
-
-    get delegate()
-    {
-        return this._delegate;
-    },
-
-    set delegate(newDelegate)
-    {
-        this._delegate = newDelegate || null;
-    },
-
-    get numberOfSearchResults()
-    {
-        return this._searchResults.length;
-    },
-
-    get currentSearchQuery()
-    {
-        return this._searchQuery;
-    },
-
-    set automaticallyRevealFirstSearchResult(reveal)
-    {
-        this._automaticallyRevealFirstSearchResult = reveal;
-
-        // If we haven't shown a search result yet, reveal one now.
-        if (this._automaticallyRevealFirstSearchResult && this._searchResults.length > 0) {
-            if (this._currentSearchResultIndex === -1)
-                this._revealFirstSearchResultAfterCursor();
-        }
-    },
-
-    performSearch: function(query)
-    {
-        if (this._searchQuery === query)
-            return;
-
-        this.searchCleared();
-
-        this._searchQuery = query;
-
-        // Allow subclasses to handle the searching if they have a better way.
-        // If we are formatted, just use CodeMirror's search.
-        if (typeof this.customPerformSearch === "function" && !this.formatted) {
-            if (this.customPerformSearch(query))
-                return;
-        }
-
-        // Go down the slow patch for all other text content.
-        var searchCursor = this._codeMirror.getSearchCursor(query, {line: 0, ch: 0}, true);
-        var boundBatchSearch = batchSearch.bind(this);
-        var numberOfSearchResultsDidChangeTimeout = null;
-
-        function reportNumberOfSearchResultsDidChange()
-        {
-            if (numberOfSearchResultsDidChangeTimeout) {
-                clearTimeout(numberOfSearchResultsDidChangeTimeout);
-                numberOfSearchResultsDidChangeTimeout = null;
-            }
-
-            this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
-        }
-
-        function batchSearch()
-        {
-            // Bail if the query changed since we started.
-            if (this._searchQuery !== query)
-                return;
-
-            var newSearchResults = [];
-            var foundResult = false;
-            for (var i = 0; i < WebInspector.TextEditor.NumberOfFindsPerSearchBatch && (foundResult = searchCursor.findNext()); ++i) {
-                var textRange = this._textRangeFromCodeMirrorPosition(searchCursor.from(), searchCursor.to());
-                newSearchResults.push(textRange);
-            }
-
-            this.addSearchResults(newSearchResults);
-
-            // Don't report immediately, coalesce updates so they come in no faster than half a second.
-            if (!numberOfSearchResultsDidChangeTimeout)
-                numberOfSearchResultsDidChangeTimeout = setTimeout(reportNumberOfSearchResultsDidChange.bind(this), 500);
-
-            if (foundResult) {
-                // More lines to search, set a timeout so we don't block the UI long.
-                setTimeout(boundBatchSearch, 50);
-            } else {
-                // Report immediately now that we are finished, canceling any pending update.
-                reportNumberOfSearchResultsDidChange.call(this);
-            }
-        }
-
-        // Start the search.
-        boundBatchSearch();
-    },
-
-    addSearchResults: function(textRanges)
-    {
-        console.assert(textRanges);
-        if (!textRanges || !textRanges.length)
-            return;
-
-        function markRanges()
-        {
-            for (var i = 0; i < textRanges.length; ++i) {
-                var position = this._codeMirrorPositionFromTextRange(textRanges[i]);
-                var mark = this._codeMirror.markText(position.start, position.end, {className: WebInspector.TextEditor.SearchResultStyleClassName});
-                this._searchResults.push(mark);
-            }
-
-            // If we haven't shown a search result yet, reveal one now.
-            if (this._automaticallyRevealFirstSearchResult) {
-                if (this._currentSearchResultIndex === -1)
-                    this._revealFirstSearchResultAfterCursor();
-            }
-        }
-
-        this._codeMirror.operation(markRanges.bind(this));
-    },
-
-    searchCleared: function()
-    {
-        function clearResults() {
-            for (var i = 0; i < this._searchResults.length; ++i)
-                this._searchResults[i].clear();
-        }
-
-        this._codeMirror.operation(clearResults.bind(this));
-
-        this._searchQuery = null;
-        this._searchResults = [];
-        this._currentSearchResultIndex = -1;
-    },
-
-    searchQueryWithSelection: function()
-    {
-        if (!this._codeMirror.somethingSelected())
-            return null;
-
-        return this._codeMirror.getSelection();
-    },
-
-    revealPreviousSearchResult: function(changeFocus)
-    {
-        if (!this._searchResults.length)
-            return;
-
-        if (this._currentSearchResultIndex === -1 || this._cursorDoesNotMatchLastRevealedSearchResult()) {
-            this._revealFirstSearchResultBeforeCursor(changeFocus);
-            return;
-        }
-
-        if (this._currentSearchResultIndex > 0)
-            --this._currentSearchResultIndex;
-        else
-            this._currentSearchResultIndex = this._searchResults.length - 1;
-
-        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, -1);
-    },
-
-    revealNextSearchResult: function(changeFocus)
-    {
-        if (!this._searchResults.length)
-            return;
-
-        if (this._currentSearchResultIndex === -1 || this._cursorDoesNotMatchLastRevealedSearchResult()) {
-            this._revealFirstSearchResultAfterCursor(changeFocus);
-            return;
-        }
-
-        if (this._currentSearchResultIndex + 1 < this._searchResults.length)
-            ++this._currentSearchResultIndex;
-        else
-            this._currentSearchResultIndex = 0;
-
-        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, 1);
-    },
-
-    line: function(lineNumber)
-    {
-        return this._codeMirror.getLine(lineNumber);
-    },
-
-    revealPosition: function(position, textRangeToSelect, forceUnformatted)
-    {
-        console.assert(position === undefined || position instanceof WebInspector.SourceCodePosition, "revealPosition called without a SourceCodePosition");
-        if (!(position instanceof WebInspector.SourceCodePosition))
-            return;
-
-        var lineHandle = this._codeMirror.getLineHandle(position.lineNumber);
-        if (!lineHandle || !this._visible || this._initialStringNotSet) {
-            // If we can't get a line handle or are not visible then we wait to do the reveal.
-            this._positionToReveal = position;
-            this._textRangeToSelect = textRangeToSelect;
-            this._forceUnformatted = forceUnformatted;
-            return;
-        }
-
-        // Delete now that the reveal is happening.
-        delete this._positionToReveal;
-        delete this._textRangeToSelect;
-        delete this._forceUnformatted;
-
-        // If we need to unformat, reveal the line after a wait.
-        // Otherwise the line highlight doesn't work properly.
-        if (this._formatted && forceUnformatted) {
-            this.formatted = false;
-            setTimeout(this.revealPosition.bind(this), 0, position, textRangeToSelect);
-            return;
-        }
-
-        if (!textRangeToSelect)
-            textRangeToSelect = new WebInspector.TextRange(position.lineNumber, position.columnNumber, position.lineNumber, position.columnNumber);
-
-        function removeStyleClass()
-        {
-            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
-        }
-
-        function revealAndHighlightLine()
-        {
-            // If the line is not visible, reveal it as the center line in the editor.
-            var position = this._codeMirrorPositionFromTextRange(textRangeToSelect);
-            if (!this._isPositionVisible(position.start))
-                this._scrollIntoViewCentered(position.start);
-
-            this.selectedTextRange = textRangeToSelect;
-
-            this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
-
-            // Use a timeout instead of a webkitAnimationEnd event listener because the line element might
-            // be removed if the user scrolls during the animation. In that case webkitAnimationEnd isn't
-            // fired, and the line would highlight again the next time it scrolls into view.
-            setTimeout(removeStyleClass.bind(this), WebInspector.TextEditor.HighlightAnimationDuration);
-        }
-
-        this._codeMirror.operation(revealAndHighlightLine.bind(this));
-    },
-
-    updateLayout: function(force)
-    {
-        this._codeMirror.refresh();
-    },
-
-    shown: function()
-    {
-        this._visible = true;
-
-        // Refresh since our size might have changed.
-        this._codeMirror.refresh();
-
-        // Try revealing the pending line now that we are visible.
-        // This needs to be done as a separate operation from the refresh
-        // so that the scrollInfo coordinates are correct.
-        this._revealPendingPositionIfPossible();
-    },
-
-    hidden: function()
-    {
-        this._visible = false;
-    },
-
-    setBreakpointInfoForLineAndColumn: function(lineNumber, columnNumber, breakpointInfo)
-    {
-        if (this._ignoreSetBreakpointInfoCalls)
-            return;
-
-        if (breakpointInfo)
-            this._addBreakpointToLineAndColumnWithInfo(lineNumber, columnNumber, breakpointInfo);
-        else
-            this._removeBreakpointFromLineAndColumn(lineNumber, columnNumber);
-    },
-
-    updateBreakpointLineAndColumn: function(oldLineNumber, oldColumnNumber, newLineNumber, newColumnNumber)
-    {
-        console.assert(this._breakpoints[oldLineNumber]);
-        if (!this._breakpoints[oldLineNumber])
-            return;
-
-        console.assert(this._breakpoints[oldLineNumber][oldColumnNumber]);
-        if (!this._breakpoints[oldLineNumber][oldColumnNumber])
-            return;
-
-        var breakpointInfo = this._breakpoints[oldLineNumber][oldColumnNumber];
-        this._removeBreakpointFromLineAndColumn(oldLineNumber, oldColumnNumber);
-        this._addBreakpointToLineAndColumnWithInfo(newLineNumber, newColumnNumber, breakpointInfo);
-    },
-
-    addStyleClassToLine: function(lineNumber, styleClassName)
-    {
-        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
-        console.assert(lineHandle);
-        if (!lineHandle)
-            return;
-
-        return this._codeMirror.addLineClass(lineHandle, "wrap", styleClassName);
-    },
-
-    removeStyleClassFromLine: function(lineNumber, styleClassName)
-    {
-        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
-        console.assert(lineHandle);
-        if (!lineHandle)
-            return;
-
-        return this._codeMirror.removeLineClass(lineHandle, "wrap", styleClassName);
-    },
-
-    toggleStyleClassForLine: function(lineNumber, styleClassName)
-    {
-        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
-        console.assert(lineHandle);
-        if (!lineHandle)
-            return;
-
-        return this._codeMirror.toggleLineClass(lineHandle, "wrap", styleClassName);
-    },
-
-    // Private
-
-    _updateCodeMirrorReadOnly: function()
-    {
-        this._codeMirror.setOption("readOnly", this._readOnly || this._formatted);
-    },
-
-    _contentChanged: function(codeMirror, change)
-    {
-        if (this._ignoreCodeMirrorContentDidChangeEvent)
-            return;
-        this.dispatchEventToListeners(WebInspector.TextEditor.Event.ContentDidChange);
-    },
-
-    _textRangeFromCodeMirrorPosition: function(start, end)
-    {
-        console.assert(start);
-        console.assert(end);
-
-        return new WebInspector.TextRange(start.line, start.ch, end.line, end.ch);
-    },
-
-    _codeMirrorPositionFromTextRange: function(textRange)
-    {
-        console.assert(textRange);
-
-        var start = {line: textRange.startLine, ch: textRange.startColumn};
-        var end = {line: textRange.endLine, ch: textRange.endColumn};
-        return {start: start, end: end};
-    },
-
-    _revealPendingPositionIfPossible: function()
-    {
-        // Nothing to do if we don't have a pending position.
-        if (!this._positionToReveal)
-            return;
-
-        // Don't try to reveal unless we are visible.
-        if (!this._visible)
-            return;
-
-        this.revealPosition(this._positionToReveal, this._textRangeToSelect, this._forceUnformatted);
-    },
-
-    _revealSearchResult: function(result, changeFocus, directionInCaseOfRevalidation)
-    {
-        var position = result.find();
-
-        // Check for a valid position, it might have been removed from editing by the user.
-        // If the position is invalide, revalidate all positions reveal as needed.
-        if (!position) {
-            this._revalidateSearchResults(directionInCaseOfRevalidation);
-            return;
-        }
-
-        // If the line is not visible, reveal it as the center line in the editor.
-        if (!this._isPositionVisible(position.from))
-            this._scrollIntoViewCentered(position.from);
-
-        // Update the text selection to select the search result.
-        this.selectedTextRange = this._textRangeFromCodeMirrorPosition(position.from, position.to);
-
-        // Remove the automatically reveal state now that we have revealed a search result.
-        this._automaticallyRevealFirstSearchResult = false;
-
-        // Focus the editor if requested.
-        if (changeFocus)
-            this._codeMirror.focus();
-
-        // Remove the bouncy highlight if it is still around. The animation will not
-        // start unless we remove it and add it back to the document.
-        if (this._bouncyHighlightElement)
-            this._bouncyHighlightElement.remove();
-
-        // Create the bouncy highlight.
-        this._bouncyHighlightElement = document.createElement("div");
-        this._bouncyHighlightElement.className = WebInspector.TextEditor.BouncyHighlightStyleClassName;
-
-        // Collect info for the bouncy highlight.
-        var textContent = this._codeMirror.getSelection();
-        var coordinates = this._codeMirror.cursorCoords(true, "page");
-
-        // Adjust the coordinates to be based in the text editor's space.
-        var textEditorRect = this._element.getBoundingClientRect();
-        coordinates.top -= textEditorRect.top;
-        coordinates.left -= textEditorRect.left;
-
-        // Position and show the bouncy highlight.
-        this._bouncyHighlightElement.textContent = textContent;
-        this._bouncyHighlightElement.style.top = coordinates.top + "px";
-        this._bouncyHighlightElement.style.left = coordinates.left + "px";
-        this._element.appendChild(this._bouncyHighlightElement);
-
-        function animationEnded()
-        {
-            if (!this._bouncyHighlightElement)
-                return;
-
-            this._bouncyHighlightElement.remove();
-            delete this._bouncyHighlightElement;
-        }
-
-        // Listen for the end of the animation so we can remove the element.
-        this._bouncyHighlightElement.addEventListener("webkitAnimationEnd", animationEnded.bind(this));
-    },
-
-    _binarySearchInsertionIndexInSearchResults: function(object, comparator)
-    {
-        // It is possible that markers in the search results array may have been deleted.
-        // In those cases the comparator will return "null" and we immediately stop
-        // the binary search and return null. The search results list needs to be updated.
-        var array = this._searchResults;
-
-        var first = 0;
-        var last = array.length - 1;
-
-        while (first <= last) {
-            var mid = (first + last) >> 1;
-            var c = comparator(object, array[mid]);
-            if (c === null)
-                return null;
-            if (c > 0)
-                first = mid + 1;
-            else if (c < 0)
-                last = mid - 1;
-            else
-                return mid;
-        }
-
-        return first - 1;
-    },
-
-    _revealFirstSearchResultBeforeCursor: function(changeFocus)
-    {
-        console.assert(this._searchResults.length);
-
-        var currentCursorPosition = this._codeMirror.getCursor("start");
-        if (currentCursorPosition.line === 0 && currentCursorPosition.ch === 0) {
-            this._currentSearchResultIndex = this._searchResults.length - 1;
-            this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, -1);
-            return;
-        }
-
-        var index = this._binarySearchInsertionIndexInSearchResults(currentCursorPosition, function(current, searchResult) {
-            var searchResultMarker = searchResult.find();
-            if (!searchResultMarker)
-                return null;
-            return WebInspector.compareCodeMirrorPositions(current, searchResultMarker.from);
-        });
-
-        if (index === null) {
-            this._revalidateSearchResults(-1);
-            return;
-        }
-
-        this._currentSearchResultIndex = index;
-        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus);
-    },
-
-    _revealFirstSearchResultAfterCursor: function(changeFocus)
-    {
-        console.assert(this._searchResults.length);
-
-        var currentCursorPosition = this._codeMirror.getCursor("start");
-        if (currentCursorPosition.line === 0 && currentCursorPosition.ch === 0) {
-            this._currentSearchResultIndex = 0;
-            this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, 1);
-            return;
-        }
-
-        var index = this._binarySearchInsertionIndexInSearchResults(currentCursorPosition, function(current, searchResult) {
-            var searchResultMarker = searchResult.find();
-            if (!searchResultMarker)
-                return null;
-            return WebInspector.compareCodeMirrorPositions(current, searchResultMarker.from);
-        });
-
-        if (index === null) {
-            this._revalidateSearchResults(1);
-            return;
-        }
-
-        if (index + 1 < this._searchResults.length)
-            ++index;
-        else
-            index = 0;
-
-        this._currentSearchResultIndex = index;
-        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus);
-    },
-
-    _cursorDoesNotMatchLastRevealedSearchResult: function()
-    {
-        console.assert(this._currentSearchResultIndex !== -1);
-        console.assert(this._searchResults.length);
-
-        var lastRevealedSearchResultMarker = this._searchResults[this._currentSearchResultIndex].find();
-        if (!lastRevealedSearchResultMarker)
-            return true;
-
-        var currentCursorPosition = this._codeMirror.getCursor("start");
-        var lastRevealedSearchResultPosition = lastRevealedSearchResultMarker.from;
-
-        return WebInspector.compareCodeMirrorPositions(currentCursorPosition, lastRevealedSearchResultPosition) !== 0;
-    },
-
-    _revalidateSearchResults: function(direction)
-    {
-        console.assert(direction !== undefined);
-
-        this._currentSearchResultIndex = -1;
-
-        var updatedSearchResults = [];
-        for (var i = 0; i < this._searchResults.length; ++i) {
-            if (this._searchResults[i].find())
-                updatedSearchResults.push(this._searchResults[i]);
-        }
-
-        console.assert(updatedSearchResults.length !== this._searchResults.length);
-
-        this._searchResults = updatedSearchResults;
-        this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
-
-        if (this._searchResults.length) {
-            if (direction > 0)
-                this._revealFirstSearchResultAfterCursor();
-            else
-                this._revealFirstSearchResultBeforeCursor();
-        }
-    },
-
-    _updateExecutionLine: function()
-    {
-        function update()
-        {
-            if (this._executionLineHandle)
-                this._codeMirror.removeLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
-
-            this._executionLineHandle = !isNaN(this._executionLineNumber) ? this._codeMirror.getLineHandle(this._executionLineNumber) : null;
-
-            if (this._executionLineHandle)
-                this._codeMirror.addLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
-        }
-
-        this._codeMirror.operation(update.bind(this));
-    },
-
-    _setBreakpointStylesOnLine: function(lineNumber)
-    {
-        var columnBreakpoints = this._breakpoints[lineNumber];
-        console.assert(columnBreakpoints);
-        if (!columnBreakpoints)
-            return;
-
-        var allDisabled = true;
-        var allResolved = true;
-        var multiple = Object.keys(columnBreakpoints).length > 1;
-        for (var columnNumber in columnBreakpoints) {
-            var breakpointInfo = columnBreakpoints[columnNumber];
-            if (!breakpointInfo.disabled)
-                allDisabled = false;
-            if (!breakpointInfo.resolved)
-                allResolved = false;
-        }
-
-        function updateStyles()
-        {
-            // We might not have a line if the content isn't fully populated yet.
-            // This will be called again when the content is available.
-            var lineHandle = this._codeMirror.getLineHandle(lineNumber);
-            if (!lineHandle)
-                return;
-
-            this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName);
-
-            if (allResolved)
-                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
-            else
-                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
-
-            if (allDisabled)
-                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
-            else
-                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
-
-            if (multiple)
-                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
-            else
-                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
-        }
-
-        this._codeMirror.operation(updateStyles.bind(this));
-    },
-
-    _addBreakpointToLineAndColumnWithInfo: function(lineNumber, columnNumber, breakpointInfo)
-    {
-        if (!this._breakpoints[lineNumber])
-            this._breakpoints[lineNumber] = {};
-        this._breakpoints[lineNumber][columnNumber] = breakpointInfo;
-
-        this._setBreakpointStylesOnLine(lineNumber);
-    },
-
-    _removeBreakpointFromLineAndColumn: function(lineNumber, columnNumber)
-    {
-        console.assert(columnNumber in this._breakpoints[lineNumber]);
-        delete this._breakpoints[lineNumber][columnNumber];
-
-        // There are still breakpoints on the line. Update the breakpoint style.
-        if (!isEmptyObject(this._breakpoints[lineNumber])) {
-            this._setBreakpointStylesOnLine(lineNumber);
-            return;
-        }
-
-        delete this._breakpoints[lineNumber];
-
-        function updateStyles()
-        {
-            var lineHandle = this._codeMirror.getLineHandle(lineNumber);
-            if (!lineHandle)
-                return;
-
-            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName);
-            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
-            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
-            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
-        }
-
-        this._codeMirror.operation(updateStyles.bind(this));
-    },
-
-    _allColumnBreakpointInfoForLine: function(lineNumber)
-    {
-        return this._breakpoints[lineNumber];
-    },
-
-    _setColumnBreakpointInfoForLine: function(lineNumber, columnBreakpointInfo)
-    {
-        console.assert(columnBreakpointInfo);
-        this._breakpoints[lineNumber] = columnBreakpointInfo;
-        this._setBreakpointStylesOnLine(lineNumber);
-    },
-
-    _gutterMouseDown: function(codeMirror, lineNumber, gutterElement, event)
-    {
-        if (event.button !== 0 || event.ctrlKey)
-            return;
-
-        if (!this._codeMirror.hasLineClass(lineNumber, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName)) {
-            console.assert(!(lineNumber in this._breakpoints));
-
-            // No breakpoint, add a new one.
-            if (this._delegate && typeof this._delegate.textEditorBreakpointAdded === "function") {
-                var data = this._delegate.textEditorBreakpointAdded(this, lineNumber, 0);
-                if (data) {
-                    var breakpointInfo = data.breakpointInfo;
-                    if (breakpointInfo)
-                        this._addBreakpointToLineAndColumnWithInfo(data.lineNumber, data.columnNumber, breakpointInfo);
-                }
-            }
-
-            return;
-        }
-
-        console.assert(lineNumber in this._breakpoints);
-
-        if (this._codeMirror.hasLineClass(lineNumber, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName)) {
-            console.assert(!isEmptyObject(this._breakpoints[lineNumber]));
-            return;
-        }
-
-        // Single existing breakpoint, start tracking it for dragging.
-        console.assert(Object.keys(this._breakpoints[lineNumber]).length === 1);
-        var columnNumber = Object.keys(this._breakpoints[lineNumber])[0];
-        this._draggingBreakpointInfo = this._breakpoints[lineNumber][columnNumber];
-        this._lineNumberWithMousedDownBreakpoint = lineNumber;
-        this._lineNumberWithDraggedBreakpoint = lineNumber;
-        this._columnNumberWithMousedDownBreakpoint = columnNumber;
-        this._columnNumberWithDraggedBreakpoint = columnNumber;
-
-        this._documentMouseMovedEventListener = this._documentMouseMoved.bind(this);
-        this._documentMouseUpEventListener = this._documentMouseUp.bind(this);
-
-        // Register these listeners on the document so we can track the mouse if it leaves the gutter.
-        document.addEventListener("mousemove", this._documentMouseMovedEventListener, true);
-        document.addEventListener("mouseup", this._documentMouseUpEventListener, true);
-    },
-
-    _documentMouseMoved: function(event)
-    {
-        console.assert("_lineNumberWithMousedDownBreakpoint" in this);
-        if (!("_lineNumberWithMousedDownBreakpoint" in this))
-            return;
-
-        event.preventDefault();
-
-        var lineNumber;
-        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
-
-        // CodeMirror's coordsChar returns a position even if it is outside the bounds. Nullify the position
-        // if the event is outside the bounds of the gutter so we will remove the breakpoint.
-        var gutterBounds = this._codeMirror.getGutterElement().getBoundingClientRect();
-        if (event.pageX < gutterBounds.left || event.pageX > gutterBounds.right || event.pageY < gutterBounds.top || event.pageY > gutterBounds.bottom)
-            position = null;
-
-        // If we have a position and it has a line then use it.
-        if (position && "line" in position)
-            lineNumber = position.line;
-
-        // The _lineNumberWithDraggedBreakpoint property can be undefined if the user drags
-        // outside of the gutter. The lineNumber variable can be undefined for the same reason.
-
-        if (lineNumber === this._lineNumberWithDraggedBreakpoint)
-            return;
-
-        // Record that the mouse dragged some so when mouse up fires we know to do the
-        // work of removing and moving the breakpoint.
-        this._mouseDragged = true;
-
-        if ("_lineNumberWithDraggedBreakpoint" in this) {
-            // We have a line that is currently showing the dragged breakpoint. Remove that breakpoint
-            // and restore the previous one (if any.)
-            if (this._previousColumnBreakpointInfo)
-                this._setColumnBreakpointInfoForLine(this._lineNumberWithDraggedBreakpoint, this._previousColumnBreakpointInfo);
-            else
-                this._removeBreakpointFromLineAndColumn(this._lineNumberWithDraggedBreakpoint, this._columnNumberWithDraggedBreakpoint);
-
-            delete this._previousColumnBreakpointInfo;
-            delete this._lineNumberWithDraggedBreakpoint;
-            delete this._columnNumberWithDraggedBreakpoint;
-        }
-
-        if (lineNumber !== undefined) {
-            // We have a new line that will now show the dragged breakpoint.
-            var newColumnBreakpoints = {};
-            var columnNumber = (lineNumber === this._lineNumberWithMousedDownBreakpoint ? this._columnNumberWithDraggedBreakpoint : 0)
-            newColumnBreakpoints[columnNumber] = this._draggingBreakpointInfo;
-            this._previousColumnBreakpointInfo = this._allColumnBreakpointInfoForLine(lineNumber);
-            this._setColumnBreakpointInfoForLine(lineNumber, newColumnBreakpoints);
-            this._lineNumberWithDraggedBreakpoint = lineNumber;
-            this._columnNumberWithDraggedBreakpoint = columnNumber;
-        }
-    },
-
-    _documentMouseUp: function(event)
-    {
-        console.assert("_lineNumberWithMousedDownBreakpoint" in this);
-        if (!("_lineNumberWithMousedDownBreakpoint" in this))
-            return;
-
-        event.preventDefault();
-
-        document.removeEventListener("mousemove", this._documentMouseMovedEventListener, true);
-        document.removeEventListener("mouseup", this._documentMouseUpEventListener, true);
-
-        const delegateImplementsBreakpointToggled = this._delegate && typeof this._delegate.textEditorBreakpointToggled === "function";
-        const delegateImplementsBreakpointRemoved = this._delegate && typeof this._delegate.textEditorBreakpointRemoved === "function";
-        const delegateImplementsBreakpointMoved = this._delegate && typeof this._delegate.textEditorBreakpointMoved === "function";
-
-        if (this._mouseDragged) {
-            if (!("_lineNumberWithDraggedBreakpoint" in this)) {
-                // The breakpoint was dragged off the gutter, remove it.
-                if (delegateImplementsBreakpointRemoved) {
-                    this._ignoreSetBreakpointInfoCalls = true;
-                    this._delegate.textEditorBreakpointRemoved(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint);
-                    delete this._ignoreSetBreakpointInfoCalls;
-                }
-            } else if (this._lineNumberWithMousedDownBreakpoint !== this._lineNumberWithDraggedBreakpoint) {
-                // The dragged breakpoint was moved to a new line.
-
-                // If there is are breakpoints already at the drop line, tell the delegate to remove them.
-                // We have already updated the breakpoint info internally, so when the delegate removes the breakpoints
-                // and tells us to clear the breakpoint info, we can ignore those calls.
-                if (this._previousColumnBreakpointInfo && delegateImplementsBreakpointRemoved) {
-                    this._ignoreSetBreakpointInfoCalls = true;
-                    for (var columnNumber in this._previousColumnBreakpointInfo)
-                        this._delegate.textEditorBreakpointRemoved(this, this._lineNumberWithDraggedBreakpoint, columnNumber);
-                    delete this._ignoreSetBreakpointInfoCalls;
-                }
-
-                // Tell the delegate to move the breakpoint from one line to another.
-                if (delegateImplementsBreakpointMoved) {
-                    this._ignoreSetBreakpointInfoCalls = true;
-                    this._delegate.textEditorBreakpointMoved(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint, this._lineNumberWithDraggedBreakpoint, this._columnNumberWithDraggedBreakpoint);
-                    delete this._ignoreSetBreakpointInfoCalls;
-                }
-            }
-        } else {
-            // Toggle the disabled state of the breakpoint.
-            console.assert(this._lineNumberWithMousedDownBreakpoint in this._breakpoints);
-            console.assert(this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint]);
-            if (this._lineNumberWithMousedDownBreakpoint in this._breakpoints && this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint] && delegateImplementsBreakpointToggled) {
-                var disabled = this._codeMirror.toggleLineClass(this._lineNumberWithMousedDownBreakpoint, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
-                this._breakpoints[this._lineNumberWithMousedDownBreakpoint][this._columnNumberWithMousedDownBreakpoint].disabled = disabled;
-                this._delegate.textEditorBreakpointToggled(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint, disabled);
-            }
-        }
-
-        delete this._documentMouseMovedEventListener;
-        delete this._documentMouseUpEventListener;
-        delete this._lineNumberWithMousedDownBreakpoint;
-        delete this._lineNumberWithDraggedBreakpoint;
-        delete this._columnNumberWithMousedDownBreakpoint;
-        delete this._columnNumberWithDraggedBreakpoint;
-        delete this._previousColumnBreakpointInfo;
-        delete this._mouseDragged;
-    },
-
-    _openClickedLinks: function(event)
-    {
-        // Get the position in the text and the token at that position.
-        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
-        var tokenInfo = this._codeMirror.getTokenAt(position);
-        if (!tokenInfo || !tokenInfo.type || !tokenInfo.string)
-            return;
-
-        // If the token is not a link, then ignore it.
-        if (!/\blink\b/.test(tokenInfo.type))
-            return;
-
-        // The token string is the URL we should open. It might be a relative URL.
-        var url = tokenInfo.string;
-
-        // Get the base URL.
-        var baseURL = "";
-        if (this._delegate && typeof this._delegate.textEditorBaseURL === "function")
-            baseURL = this._delegate.textEditorBaseURL(this);
-
-        // Open the link after resolving the absolute URL from the base URL.
-        WebInspector.openURL(absoluteURL(url, baseURL));
-
-        // Stop processing the event.
-        event.preventDefault();
-        event.stopPropagation();
-    },
-
-    _isPositionVisible: function(position)
-    {
-        var scrollInfo = this._codeMirror.getScrollInfo();
-        var visibleRangeStart = scrollInfo.top;
-        var visibleRangeEnd = visibleRangeStart + scrollInfo.clientHeight;
-        var coords = this._codeMirror.charCoords(position, "local");
-
-        return coords.top >= visibleRangeStart && coords.bottom <= visibleRangeEnd;
-    },
-
-    _scrollIntoViewCentered: function(position)
-    {
-        var scrollInfo = this._codeMirror.getScrollInfo();
-        var lineHeight = Math.ceil(this._codeMirror.defaultTextHeight());
-        var margin = Math.floor((scrollInfo.clientHeight - lineHeight) / 2);
-        this._codeMirror.scrollIntoView(position, margin);
-    },
-
-    _prettyPrint: function(pretty)
-    {
-        function prettyPrintAndUpdateEditor()
-        {
-            const start = {line: 0, ch: 0};
-            const end = {line: this._codeMirror.lineCount() - 1};
-
-            var oldSelectionAnchor = this._codeMirror.getCursor("anchor");
-            var oldSelectionHead = this._codeMirror.getCursor("head");
-            var newSelectionAnchor, newSelectionHead;
-            var newExecutionLocation = null;
-
-            if (pretty) {
-                // <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
-                const indentString = "    ";
-                var originalLineEndings = [];
-                var formattedLineEndings = [];
-                var mapping = {original: [0], formatted: [0]};
-                var builder = new FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, 0, 0, indentString);
-                var formatter = new Formatter(this._codeMirror, builder);
-                formatter.format(start, end);
-
-                this._formatterSourceMap = WebInspector.FormatterSourceMap.fromBuilder(builder);
-
-                this._codeMirror.setValue(builder.formattedContent);
-
-                if (this._positionToReveal) {
-                    var newRevealPosition = this._formatterSourceMap.originalToFormatted(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
-                    this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
-                }
-
-                if (this._textRangeToSelect) {
-                    var mappedRevealSelectionStart = this._formatterSourceMap.originalToFormatted(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
-                    var mappedRevealSelectionEnd = this._formatterSourceMap.originalToFormatted(this._textRangeToSelect.endLine, this._textRangeToSelect.endColumn);
-                    this._textRangeToSelect = new WebInspector.TextRange(mappedRevealSelectionStart.lineNumber, mappedRevealSelectionStart.columnNumber, mappedRevealSelectionEnd.lineNumber, mappedRevealSelectionEnd.columnNumber);
-                }
-
-                if (!isNaN(this._executionLineNumber)) {
-                    console.assert(this._executionLineHandle);
-                    console.assert(!isNaN(this._executionColumnNumber));
-                    newExecutionLocation = this._formatterSourceMap.originalToFormatted(this._executionLineNumber, this._executionColumnNumber);
-                }
-
-                var mappedAnchorLocation = this._formatterSourceMap.originalToFormatted(oldSelectionAnchor.line, oldSelectionAnchor.ch);
-                var mappedHeadLocation = this._formatterSourceMap.originalToFormatted(oldSelectionHead.line, oldSelectionHead.ch);
-                newSelectionAnchor = {line:mappedAnchorLocation.lineNumber, ch:mappedAnchorLocation.columnNumber};
-                newSelectionHead = {line:mappedHeadLocation.lineNumber, ch:mappedHeadLocation.columnNumber};
-            } else {
-                this._codeMirror.undo();
-
-                if (this._positionToReveal) {
-                    var newRevealPosition = this._formatterSourceMap.formattedToOriginal(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
-                    this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
-                }
-
-                if (this._textRangeToSelect) {
-                    var mappedRevealSelectionStart = this._formatterSourceMap.formattedToOriginal(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
-                    var mappedRevealSelectionEnd = this._formatterSourceMap.formattedToOriginal(this._textRangeToSelect.endLine, this._textRangeToSelect.endColumn);
-                    this._textRangeToSelect = new WebInspector.TextRange(mappedRevealSelectionStart.lineNumber, mappedRevealSelectionStart.columnNumber, mappedRevealSelectionEnd.lineNumber, mappedRevealSelectionEnd.columnNumber);
-                }
-
-                if (!isNaN(this._executionLineNumber)) {
-                    console.assert(this._executionLineHandle);
-                    console.assert(!isNaN(this._executionColumnNumber));
-                    newExecutionLocation = this._formatterSourceMap.formattedToOriginal(this._executionLineNumber, this._executionColumnNumber);
-                }
-
-                var mappedAnchorLocation = this._formatterSourceMap.formattedToOriginal(oldSelectionAnchor.line, oldSelectionAnchor.ch);
-                var mappedHeadLocation = this._formatterSourceMap.formattedToOriginal(oldSelectionHead.line, oldSelectionHead.ch);
-                newSelectionAnchor = {line:mappedAnchorLocation.lineNumber, ch:mappedAnchorLocation.columnNumber};
-                newSelectionHead = {line:mappedHeadLocation.lineNumber, ch:mappedHeadLocation.columnNumber};
-
-                this._formatterSourceMap = null;
-            }
-
-            this._scrollIntoViewCentered(newSelectionAnchor);
-            this._codeMirror.setSelection(newSelectionAnchor, newSelectionHead);
-
-            if (newExecutionLocation) {
-                delete this._executionLineHandle;
-                this.executionColumnNumber = newExecutionLocation.columnNumber;
-                this.executionLineNumber = newExecutionLocation.lineNumber;
-            }
-
-            // FIXME: <rdar://problem/13129955> FindBanner: New searches should not lose search position (start from current selection/caret)
-            if (this.currentSearchQuery) {
-                var searchQuery = this.currentSearchQuery;
-                this.searchCleared();
-                // Set timeout so that this happens after the current CodeMirror operation.
-                // The editor has to update for the value and selection changes.
-                setTimeout(function(query) {
-                    this.performSearch(searchQuery);
-                }.bind(this), 0);
-            }
-
-            if (this._delegate && typeof this._delegate.textEditorUpdatedFormatting === "function")
-                this._delegate.textEditorUpdatedFormatting(this);
-        }
-
-        this._codeMirror.operation(prettyPrintAndUpdateEditor.bind(this));
-    }
-};
-
-WebInspector.TextEditor.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TextRange.js b/Source/WebInspectorUI/UserInterface/TextRange.js
deleted file mode 100644
index f01156943..000000000
--- a/Source/WebInspectorUI/UserInterface/TextRange.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TextRange = function(startLineOrStartOffset, startColumnOrEndOffset, endLine, endColumn)
-{
-    WebInspector.Object.call(this);
-
-    if (arguments.length === 4) {
-        console.assert(startLineOrStartOffset <= endLine);
-        console.assert(startLineOrStartOffset !== endLine || startColumnOrEndOffset <= endColumn);
-
-        this._startLine = typeof startLineOrStartOffset === "number" ? startLineOrStartOffset : NaN;
-        this._startColumn = typeof startColumnOrEndOffset === "number" ? startColumnOrEndOffset : NaN;
-        this._endLine = typeof endLine === "number" ? endLine : NaN;
-        this._endColumn = typeof endColumn === "number" ? endColumn : NaN;
-
-        this._startOffset = NaN;
-        this._endOffset = NaN;
-    } else if (arguments.length === 2) {
-        console.assert(startLineOrStartOffset <= startColumnOrEndOffset);
-
-        this._startOffset = typeof startLineOrStartOffset === "number" ? startLineOrStartOffset : NaN;
-        this._endOffset = typeof startColumnOrEndOffset === "number" ? startColumnOrEndOffset : NaN;
-
-        this._startLine = NaN;
-        this._startColumn = NaN;
-        this._endLine = NaN;
-        this._endColumn = NaN;
-    }
-}
-
-WebInspector.TextRange.prototype = {
-    constructor: WebInspector.TextRange,
-
-    // Public
-
-    get startLine()
-    {
-        return this._startLine;
-    },
-
-    get startColumn()
-    {
-        return this._startColumn;
-    },
-
-    get endLine()
-    {
-        return this._endLine;
-    },
-
-    get endColumn()
-    {
-        return this._endColumn;
-    },
-
-    get startOffset()
-    {
-        return this._startOffset;
-    },
-
-    get endOffset()
-    {
-        return this._endOffset;
-    },
-
-    startPosition: function()
-    {
-        return new WebInspector.SourceCodePosition(this._startLine, this._startColumn);
-    },
-
-    endPosition: function()
-    {
-        return new WebInspector.SourceCodePosition(this._endLine, this._endColumn);
-    },
-
-    resolveLinesAndColumns: function(text)
-    {
-        console.assert(typeof text === "string");
-        if (typeof text !== "string")
-            return;
-
-        console.assert(!isNaN(this._startOffset));
-        console.assert(!isNaN(this._endOffset));
-        if (isNaN(this._startOffset) || isNaN(this._endOffset))
-            return;
-
-        function countNewLineCharacters(text)
-        {
-            var matches = text.match(/\n/g);
-            return matches ? matches.length : 0;
-        }
-
-        var startSubstring = text.substring(0, this._startOffset);
-        var rangeSubstring = text.substring(this._startOffset, this._endOffset);
-
-        var startNewLineCount = countNewLineCharacters(startSubstring);
-        var rangeNewLineCount = countNewLineCharacters(rangeSubstring);
-
-        this._startLine = startNewLineCount;
-        this._endLine = startNewLineCount + rangeNewLineCount;
-
-        var lastNewLineOffset = startNewLineCount ? startSubstring.lastIndexOf("\n") + 1 : 0;
-        this._startColumn = startSubstring.length - lastNewLineOffset;
-
-        lastNewLineOffset = rangeNewLineCount ? rangeSubstring.lastIndexOf("\n") + 1 : 0;
-        this._endColumn = rangeSubstring.length - lastNewLineOffset;
-
-        if (this._startLine === this._endLine)
-            this._endColumn += this._startColumn;
-    },
-
-    resolveOffsets: function(text)
-    {
-        console.assert(typeof text === "string");
-        if (typeof text !== "string")
-            return;
-
-        console.assert(!isNaN(this._startLine));
-        console.assert(!isNaN(this._startColumn));
-        console.assert(!isNaN(this._endLine));
-        console.assert(!isNaN(this._endColumn));
-        if (isNaN(this._startLine) || isNaN(this._startColumn) || isNaN(this._endLine) || isNaN(this._endColumn))
-            return;
-
-        var lastNewLineOffset = 0;
-        for (var i = 0; i < this._startLine; ++i)
-            lastNewLineOffset = text.indexOf("\n", lastNewLineOffset) + 1;
-
-        this._startOffset = lastNewLineOffset + this._startColumn;
-
-        for (var i = this._startLine; i < this._endLine; ++i)
-            lastNewLineOffset = text.indexOf("\n", lastNewLineOffset) + 1;
-
-        this._endOffset = lastNewLineOffset + this._endColumn;
-    }
-};
-
-WebInspector.TextRange.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TextResourceContentView.js b/Source/WebInspectorUI/UserInterface/TextResourceContentView.js
deleted file mode 100644
index e3a9f9f16..000000000
--- a/Source/WebInspectorUI/UserInterface/TextResourceContentView.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TextResourceContentView = function(resource)
-{
-    WebInspector.ResourceContentView.call(this, resource, WebInspector.TextResourceContentView.StyleClassName);
-
-    resource.addEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._sourceCodeContentDidChange, this);
-
-    this._textEditor = new WebInspector.SourceCodeTextEditor(resource);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange, this._executionLineNumberDidChange, this);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.ContentDidChange, this._textEditorContentDidChange, this);
-    this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
-    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate, this._contentWillPopulate, this);
-    this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate, this._contentDidPopulate, this);
-
-    var toolTip = WebInspector.UIString("Pretty print");
-    var activatedToolTip = WebInspector.UIString("Original formatting");
-    this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.pdf", 16, 16);
-    this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
-    this._prettyPrintButtonNavigationItem.enabled = false; // Enabled when the text editor is populated with content.
-};
-
-WebInspector.TextResourceContentView.StyleClassName = "text";
-
-WebInspector.TextResourceContentView.prototype = {
-    constructor: WebInspector.TextResourceContentView,
-
-    // Public
-
-    get navigationItems()
-    {
-        return [this._prettyPrintButtonNavigationItem];
-    },
-
-    get managesOwnIssues()
-    {
-        // SourceCodeTextEditor manages the issues, we don't need ResourceContentView doing it.
-        return true;
-    },
-
-    get textEditor()
-    {
-        return this._textEditor;
-    },
-
-    get supplementalRepresentedObjects()
-    {
-        if (isNaN(this._textEditor.executionLineNumber))
-            return [];
-
-        // If the SourceCodeTextEditor has an executionLineNumber, we can assume
-        // it is always the active call frame.
-        return [WebInspector.debuggerManager.activeCallFrame];
-    },
-
-    revealPosition: function(position, textRangeToSelect, forceUnformatted)
-    {
-        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
-    },
-
-    shown: function()
-    {
-        WebInspector.ResourceContentView.prototype.shown.call(this);
-
-        this._textEditor.shown();
-    },
-
-    hidden: function()
-    {
-        WebInspector.ResourceContentView.prototype.hidden.call(this);
-
-        this._textEditor.hidden();
-    },
-
-    closed: function()
-    {
-        WebInspector.ResourceContentView.prototype.closed.call(this);
-
-        this.resource.removeEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._sourceCodeContentDidChange, this);
-
-        this._textEditor.close();
-    },
-
-    get supportsSave()
-    {
-        return true;
-    },
-
-    get saveData()
-    {
-        return {url: this.resource.url, content: this._textEditor.string};
-    },
-
-    get supportsSearch()
-    {
-        return true;
-    },
-
-    get numberOfSearchResults()
-    {
-        return this._textEditor.numberOfSearchResults;
-    },
-
-    get hasPerformedSearch()
-    {
-        return this._textEditor.currentSearchQuery !== null;
-    },
-
-    set automaticallyRevealFirstSearchResult(reveal)
-    {
-        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
-    },
-
-    performSearch: function(query)
-    {
-        this._textEditor.performSearch(query);
-    },
-
-    searchCleared: function()
-    {
-        this._textEditor.searchCleared();
-    },
-
-    searchQueryWithSelection: function()
-    {
-        return this._textEditor.searchQueryWithSelection();
-    },
-
-    revealPreviousSearchResult: function(changeFocus)
-    {
-        this._textEditor.revealPreviousSearchResult(changeFocus);
-    },
-
-    revealNextSearchResult: function(changeFocus)
-    {
-        this._textEditor.revealNextSearchResult(changeFocus);
-    },
-
-    updateLayout: function()
-    {
-        this._textEditor.updateLayout();
-    },
-
-    // Private
-
-    _contentWillPopulate: function(event)
-    {
-        if (this._textEditor.element.parentNode === this.element)
-            return;
-
-        // Check the MIME-type for CSS since Resource.Type.Stylesheet also includes XSL, which we can't edit yet.
-        if (this.resource.type === WebInspector.Resource.Type.Stylesheet && this.resource.syntheticMIMEType === "text/css")
-            this._textEditor.readOnly = false;
-
-        // Allow editing any local file since edits can be saved and reloaded right from the Inspector.
-        if (this.resource.urlComponents.scheme === "file")
-            this._textEditor.readOnly = false;
-
-        this.element.removeChildren();
-        this.element.appendChild(this._textEditor.element);
-    },
-
-    _contentDidPopulate: function(event)
-    {
-        this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
-    },
-
-    _togglePrettyPrint: function(event)
-    {
-        var activated = !this._prettyPrintButtonNavigationItem.activated;
-        this._textEditor.formatted = activated;
-    },
-
-    _textEditorFormattingDidChange: function(event)
-    {
-        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
-    },
-
-    _sourceCodeContentDidChange: function(event)
-    {
-        if (this._ignoreSourceCodeContentDidChangeEvent)
-            return;
-
-        this._textEditor.string = this.resource.currentRevision.content;
-    },
-
-    _textEditorContentDidChange: function(event)
-    {
-        this._ignoreSourceCodeContentDidChangeEvent = true;
-        WebInspector.branchManager.currentBranch.revisionForRepresentedObject(this.resource).content = this._textEditor.string;
-        delete this._ignoreSourceCodeContentDidChangeEvent;
-    },
-
-    _executionLineNumberDidChange: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
-    },
-
-    _numberOfSearchResultsDidChange: function(event)
-    {
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
-    }
-};
-
-WebInspector.TextResourceContentView.prototype.__proto__ = WebInspector.ResourceContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css
deleted file mode 100644
index 784719067..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.css
+++ /dev/null
@@ -1,126 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.timeline-data-grid-tree-outline {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    outline: none;
-    list-style: none;
-    font-family: "Lucida Grande", "Helvetica", sans-serif;
-    font-size: 11px;
-}
-
-.timeline-data-grid-tree-outline .item {
-    position: relative;
-    height: 36px;
-    line-height: 34px;
-    padding: 0 5px;
-    border-top: 1px solid transparent;
-    white-space: nowrap;
-}
-
-.timeline-data-grid-tree-outline > .children,
-.timeline-data-grid-tree-outline .disclosure-button,
-.timeline-data-grid-tree-outline .item .status {
-    display: none;
-}
-
-.timeline-data-grid-tree-outline .item .icon {
-    float: left;
-    width: 32px;
-    height: 32px;
-    margin-top: 1px;
-    margin-right: 3px;
-}
-
-.timeline-data-grid-tree-outline .item:hover {
-    color: white;
-    border-radius: 4px;
-    box-shadow: inset rgb(87, 152, 206) 0 1px 0;
-    background: -webkit-linear-gradient(top, rgb(110, 167, 216), rgb(36, 114, 181));
-    background-origin: padding-box;
-    background-clip: padding-box;
-    text-shadow: rgb(51, 88, 123) 0 1px 0;
-    -webkit-text-stroke: 0.4px;
-}
-
-.timeline-data-grid-tree-outline .item .titles {
-    position: relative;
-    top: 5px;
-    line-height: 11px;
-    padding-bottom: 1px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.timeline-data-grid-tree-outline .item .title::after {
-    content: "\A"; /* Newline */
-    white-space: pre;
-}
-
-.timeline-data-grid-tree-outline .item .subtitle {
-    font-size: 9px;
-    color: rgba(0, 0, 0, 0.7);
-}
-
-.timeline-data-grid-tree-outline .item:hover .subtitle {
-    color: white;
-}
-
-.timeline-data-grid-tree-outline .item .subtitle:empty {
-    display: none;
-}
-
-.timeline-data-grid-tree-outline .item.small {
-    height: 20px;
-}
-
-.timeline-data-grid-tree-outline .item.small .icon {
-    width: 16px;
-    height: 16px;
-}
-
-.timeline-data-grid-tree-outline .item.small .status {
-    margin-top: 1px;
-}
-
-.timeline-data-grid-tree-outline .item.small .titles {
-    top: 2px;
-    line-height: normal;
-}
-
-.timeline-data-grid-tree-outline .item.small .subtitle {
-    font-size: inherit;
-}
-
-.timeline-data-grid-tree-outline .item.small:not(.two-line) .title::after {
-    content: "";
-}
-
-.timeline-data-grid-tree-outline .item.small:not(.two-line) .subtitle::before {
-    content: " — ";
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js
deleted file mode 100644
index 16eee6cb7..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineDataGrid.js
+++ /dev/null
@@ -1,267 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineDataGrid = function(columns, editCallback, deleteCallback)
-{
-    WebInspector.DataGrid.call(this, columns, editCallback, deleteCallback);
-
-    this.filterableColumns = [];
-
-    // Check if any of the cells can be filtered.
-    for (var identifier in columns) {
-        var scopeBar = columns[identifier].scopeBar;
-        if (!scopeBar)
-            continue;
-        this.filterableColumns.push(identifier);
-        scopeBar.columnIdenfifier = identifier;
-        scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectedItemsDidChange, this);
-    }
-
-    if (this.filterableColumns.length > 1) {
-        console.error("Creating a TimelineDataGrid with more than one filterable column is not yet supported.");
-        return;
-    }
-
-    var items = [new WebInspector.FlexibleSpaceNavigationItem, this.columns[this.filterableColumns[0]].scopeBar];
-    this._navigationBar = new WebInspector.NavigationBar(null, items);
-    var container = this.element.appendChild(document.createElement("div"));
-    container.className = "navigation-bar-container";
-    container.appendChild(this._navigationBar.element);
-
-    this.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridSelectedNodeChanged, this);
-    window.addEventListener("resize", this._windowResized.bind(this));
-}
-
-WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout = 250;
-WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout = 500;
-
-WebInspector.TimelineDataGrid.Event = {
-    FiltersDidChange: "timelinedatagrid-filters-did-change"
-};
-
-WebInspector.TimelineDataGrid.prototype = {
-    constructor: WebInspector.TimelineDataGrid,
-
-    // Public
-
-    get currentCalculator()
-    {
-        // Implemented by subclasses if they have a graph.
-        return null;
-    },
-
-    updateCalculatorBoundariesWithRecord: function(record)
-    {
-        // Implemented by subclasses if they have a graph.
-    },
-
-    updateCalculatorBoundariesWithDataGridNode: function(node)
-    {
-        // Implemented by subclasses if they have a graph.
-    },
-
-    updateCalculatorBoundariesWithEventMarker: function(eventMarker)
-    {
-        // Implemented by subclasses if they have a graph.
-    },
-
-    reset: function()
-    {
-        // May be overridden by subclasses. If so, they should call the superclass.
-
-        this._hidePopover();
-    },
-
-    shown: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    hidden: function()
-    {
-        // May be overridden by subclasses. If so, they should call the superclass.
-
-        this._hidePopover();
-    },
-
-    update: function()
-    {
-        // Implemented by subclasses.
-    },
-
-    addTimelineEventMarker: function(eventMarker)
-    {
-        // Implemented by subclasses.
-    },
-
-    callFramePopoverAnchorElement: function()
-    {
-        // Implemented by subclasses.
-        return null;
-    },
-
-    updateLayout: function()
-    {
-        WebInspector.DataGrid.prototype.updateLayout.call(this);
-
-        this._navigationBar.updateLayout();
-    },
-
-    // Private
-
-    _scopeBarSelectedItemsDidChange: function(event)
-    {
-        var columnIdentifier = event.target.columnIdenfifier;
-        this.dispatchEventToListeners(WebInspector.TimelineDataGrid.Event.FiltersDidChange, {columnIdentifier: columnIdentifier});
-    },
-
-    _dataGridSelectedNodeChanged: function(event)
-    {
-        if (!this.selectedNode) {
-            this._hidePopover();
-            return;
-        }
-
-        var record = this.selectedNode.record;
-        if (!record || !record.callFrames || !record.callFrames.length) {
-            this._hidePopover();
-            return;
-        }
-
-        this._showPopoverForSelectedNodeSoon();
-    },
-
-    _windowResized: function(event)
-    {
-        if (this._popover && this._popover.visible)
-            this._updatePopoverForSelectedNode(false);
-    },
-
-    _showPopoverForSelectedNodeSoon: function()
-    {
-        if (this._showPopoverTimeout)
-            return;
-
-        function delayedWork()
-        {
-            if (!this._popover)
-                this._popover = new WebInspector.Popover;
-
-            this._updatePopoverForSelectedNode(true);
-        }
-
-        this._showPopoverTimeout = setTimeout(delayedWork.bind(this), WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout);
-    },
-
-    _hidePopover: function()
-    {
-        if (this._showPopoverTimeout) {
-            clearTimeout(this._showPopoverTimeout);
-            delete this._showPopoverTimeout;
-        }
-
-        if (this._popover)
-            this._popover.dismiss();
-
-        function delayedWork()
-        {
-            if (this._popoverCallStackTreeOutline)
-                this._popoverCallStackTreeOutline.removeChildren();
-        }
-
-        if (this._hidePopoverContentClearTimeout)
-            clearTimeout(this._hidePopoverContentClearTimeout);
-        this._hidePopoverContentClearTimeout = setTimeout(delayedWork.bind(this), WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout);
-    },
-
-    _updatePopoverForSelectedNode: function(updateContent)
-    {
-        if (!this._popover || !this.selectedNode)
-            return;
-
-        var targetPopoverElement = this.callFramePopoverAnchorElement();
-        console.assert(targetPopoverElement, "TimelineDataGrid subclass should always return a valid element from callFramePopoverAnchorElement.");
-        if (!targetPopoverElement)
-            return;
-
-        var targetFrame = WebInspector.Rect.rectFromClientRect(targetPopoverElement.getBoundingClientRect());
-
-        // The element might be hidden if it does not have a width and height.
-        if (!targetFrame.size.width && !targetFrame.size.height)
-            return;
-
-        if (this._hidePopoverContentClearTimeout) {
-            clearTimeout(this._hidePopoverContentClearTimeout);
-            delete this._hidePopoverContentClearTimeout;
-        }
-
-        const padding = 2;
-        targetFrame.origin.x -= padding;
-        targetFrame.origin.y -= padding;
-        targetFrame.size.width += padding * 2;
-        targetFrame.size.height += padding * 2;
-
-        if (updateContent)
-            this._popover.content = this._createPopoverContent();
-
-        this._popover.present(targetFrame, [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
-    },
-
-    _createPopoverContent: function()
-    {
-        if (!this._popoverCallStackTreeOutline) {
-            var contentElement = document.createElement("ol");
-            contentElement.classList.add("timeline-data-grid-tree-outline");
-            this._popoverCallStackTreeOutline = new TreeOutline(contentElement);
-            this._popoverCallStackTreeOutline.onselect = this._popoverCallStackTreeElementSelected.bind(this);
-        } else
-            this._popoverCallStackTreeOutline.removeChildren();
-
-        var callFrames = this.selectedNode.record.callFrames;
-        for (var i = 0 ; i < callFrames.length; ++i) {
-            var callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrames[i]);
-            this._popoverCallStackTreeOutline.appendChild(callFrameTreeElement);
-        }
-
-        var content = document.createElement("div");
-        content.className = "timeline-data-grid-popover";
-        content.appendChild(this._popoverCallStackTreeOutline.element);
-        return content;
-    },
-
-    _popoverCallStackTreeElementSelected: function(treeElement, selectedByUser)
-    {
-        this._popover.dismiss();
-
-        console.assert(treeElement instanceof WebInspector.CallFrameTreeElement, "TreeElements in TimelineDataGrid popover should always be CallFrameTreeElements");
-        var callFrame = treeElement.callFrame;
-        if (!callFrame.sourceCodeLocation)
-            return;
-
-        WebInspector.resourceSidebarPanel.showSourceCodeLocation(callFrame.sourceCodeLocation);
-    }
-}
-
-WebInspector.TimelineDataGrid.prototype.__proto__ = WebInspector.DataGrid.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDecorations.css b/Source/WebInspectorUI/UserInterface/TimelineDecorations.css
deleted file mode 100644
index 01c465c05..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineDecorations.css
+++ /dev/null
@@ -1,106 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.timeline-decorations {
-    position: relative;
-    pointer-events: none;
-}
-
-.timeline-decorations > .header {
-    border-top: 1px solid rgb(200, 200, 200);
-
-    height: 22px;
-
-    position: relative;
-}
-
-.timeline-decorations > .header > .divider {
-    position: absolute;
-    width: 1px;
-    top: 0;
-    bottom: 0;
-    background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 1), rgba(200, 200, 200, 0) 85%);
-}
-
-.timeline-decorations > .header > .divider:first-child,
-.timeline-decorations > .header > .divider:last-child {
-    background-image: none;
-}
-
-.timeline-decorations > .header > .divider > .label {
-    position: absolute;
-    top: 3px;
-    right: 4px;
-    font-size: 9px;
-    font-family: "Lucida Grande", sans-serif;
-    color: rgb(128, 128, 128);
-    white-space: nowrap;
-}
-
-.timeline-decorations > .header > .divider:first-child > .label {
-    display: none;
-}
-
-.timeline-decorations > .event-markers {
-    position: absolute;
-    top: 22px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.timeline-decorations > .event-markers > .event-marker-tooltip {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-
-    width: 9px;
-
-    pointer-events: auto;
-}
-
-.timeline-decorations > .event-markers > .event-marker {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-
-    margin-left: 4px;
-
-    border-left-width: 1px;
-    border-left-style: dashed;
-    border-left-color: rgba(128, 128, 128, 0.5);
-}
-
-.timeline-decorations > .event-markers > .event-marker.load-event {
-    border-left-color: rgba(255, 0, 0, 0.5);
-}
-
-.timeline-decorations > .event-markers > .event-marker.dom-content-event {
-    border-left-color: rgba(0, 0, 255, 0.5);
-}
-
-.timeline-decorations > .event-markers > .event-marker.timestamp {
-    border-left-color: rgba(0, 110, 0, 0.5);
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineDecorations.js b/Source/WebInspectorUI/UserInterface/TimelineDecorations.js
deleted file mode 100644
index 3a0439e8f..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineDecorations.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineDecorations = function()
-{
-    WebInspector.Object.call(this);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.TimelineDecorations.StyleClassName;
-
-    this._headerElement = document.createElement("div");
-    this._headerElement.className = WebInspector.TimelineDecorations.HeaderElementStyleClassName;
-    this._element.appendChild(this._headerElement);
-
-    this._markersElement = document.createElement("div");
-    this._markersElement.className = WebInspector.TimelineDecorations.EventMarkersElementStyleClassName
-    this._element.appendChild(this._markersElement);
-
-    this.clear();
-}
-
-WebInspector.TimelineDecorations.StyleClassName = "timeline-decorations";
-WebInspector.TimelineDecorations.HeaderElementStyleClassName = "header";
-WebInspector.TimelineDecorations.DividerElementStyleClassName = "divider";
-WebInspector.TimelineDecorations.DividerLabelElementStyleClassName = "label";
-
-WebInspector.TimelineDecorations.EventMarkersElementStyleClassName = "event-markers";
-WebInspector.TimelineDecorations.EventMarkerTooltipElementStyleClassName = "event-marker-tooltip";
-WebInspector.TimelineDecorations.BaseEventMarkerElementStyleClassName = "event-marker";
-
-WebInspector.TimelineDecorations.prototype = {
-    constructor: WebInspector.TimelineDecorations,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get headerElement()
-    {
-        return this._headerElement
-    },
-
-    clear: function()
-    {
-        this._eventMarkers = [];
-        this._markersElement.removeChildren();
-    },
-
-    updateHeaderTimes: function(boundarySpan, leftPadding, rightPadding, force)
-    {
-        if (!this.isShowingHeaderDividers())
-            return;
-
-        if (isNaN(boundarySpan))
-            return;
-
-        leftPadding = leftPadding || 0;
-        rightPadding = rightPadding || 0;
-
-        var clientWidth = this._headerElement.clientWidth;
-        var leftVisibleEdge = leftPadding;
-        var rightVisibleEdge = clientWidth - rightPadding;
-        var visibleWidth = rightVisibleEdge - leftVisibleEdge;
-        if (visibleWidth <= 0)
-            return;
-
-        var dividerCount = Math.round(visibleWidth / 64);
-        var slice = boundarySpan / dividerCount;
-        if (!force && this._currentDividerSlice === slice)
-            return;
-
-        this._currentDividerSlice = slice;
-
-        var dividerElement = this._headerElement.firstChild;
-        for (var i = 0; i <= dividerCount; ++i) {
-            if (!dividerElement) {
-                dividerElement = document.createElement("div");
-                dividerElement.className = WebInspector.TimelineDecorations.DividerElementStyleClassName;
-                this._headerElement.appendChild(dividerElement);
-
-                var labelElement = document.createElement("div");
-                labelElement.className = WebInspector.TimelineDecorations.DividerLabelElementStyleClassName;
-                dividerElement._labelElement = labelElement;
-                dividerElement.appendChild(labelElement);
-            }
-
-            var left = visibleWidth * (i / dividerCount);
-            var totalLeft = left + leftVisibleEdge;
-            var fractionLeft = totalLeft / clientWidth;
-            var percentLeft = 100 * fractionLeft;
-            var time = fractionLeft * boundarySpan;
-
-            var currentPercentLeft = parseFloat(dividerElement.style.left);
-            if (isNaN(currentPercentLeft) || Math.abs(currentPercentLeft - percentLeft) >= 0.1)
-                dividerElement.style.left = percentLeft + "%";
-
-            dividerElement._labelElement.textContent = isNaN(slice) ? "" : Number.secondsToString(time);
-            dividerElement = dividerElement.nextSibling;
-        }
-
-        // Remove extra dividers.
-        while (dividerElement) {
-            var nextDividerElement = dividerElement.nextSibling;
-            this._headerElement.removeChild(dividerElement);
-            dividerElement = nextDividerElement;
-        }
-    },
-
-    updateEventMarkers: function(minimumBoundary, maximumBoundary)
-    {
-        this._markersElement.removeChildren();
-
-        if (!this._eventMarkers.length)
-            return;
-
-        var boundarySpan = maximumBoundary - minimumBoundary;
-        if (isNaN(boundarySpan))
-            return;
-
-        function toolTipForEventMarker(eventMarker, time)
-        {
-            switch (eventMarker.type) {
-            case WebInspector.TimelineEventMarker.Type.LoadEvent:
-                return WebInspector.UIString("Load event fired at %s").format(Number.secondsToString(time));
-            case WebInspector.TimelineEventMarker.Type.DOMContentEvent:
-                return WebInspector.UIString("DOMContent event fired at %s").format(Number.secondsToString(time));
-            case WebInspector.TimelineEventMarker.Type.TimeStamp:
-                return WebInspector.UIString("Timestamp marker at %s").format(Number.secondsToString(time));
-            default:
-                console.assert(false);
-                return "";
-            }
-        }
-
-        for (var i = 0; i < this._eventMarkers.length; ++i) {
-            var eventMarker = this._eventMarkers[i];
-            if (eventMarker.timestamp < minimumBoundary || eventMarker.timestamp > maximumBoundary)
-                continue;
-
-            var time = eventMarker.timestamp - minimumBoundary;
-            var percentLeft = (100 * time) / boundarySpan;
-
-            var tooltipElement = document.createElement("div");
-            tooltipElement.className = WebInspector.TimelineDecorations.EventMarkerTooltipElementStyleClassName;
-            tooltipElement.title = toolTipForEventMarker(eventMarker, time);
-            tooltipElement.style.left = percentLeft + "%";
-
-            var markerElement = document.createElement("div");
-            markerElement.className = WebInspector.TimelineDecorations.BaseEventMarkerElementStyleClassName;
-            markerElement.classList.add(eventMarker.type);
-            markerElement.style.left = percentLeft + "%";
-
-            this._markersElement.appendChild(markerElement);
-            this._markersElement.appendChild(tooltipElement);
-        }
-    },
-
-    isShowingHeaderDividers: function()
-    {
-        return !this._headerElement.classList.contains("hidden");
-    },
-
-    showHeaderDividers: function()
-    {
-        this._headerElement.classList.remove("hidden");
-    },
-
-    hideHeaderDividers: function()
-    {
-        this._headerElement.classList.add("hidden");
-    },
-
-    addTimelineEventMarker: function(eventMarker)
-    {
-        this._eventMarkers.push(eventMarker);
-    },
-}
-
-WebInspector.TimelineDecorations.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineEventMarker.js b/Source/WebInspectorUI/UserInterface/TimelineEventMarker.js
deleted file mode 100644
index 16baaef6c..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineEventMarker.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineEventMarker = function(timestamp, type)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(timestamp);
-    console.assert(type);
-
-    this._timestamp = timestamp;
-    this._type = type;
-};
-
-WebInspector.TimelineEventMarker.Type = {
-    LoadEvent: "load-event",
-    DOMContentEvent: "dom-content-event",
-    TimeStamp: "timestamp"
-}
-
-WebInspector.TimelineEventMarker.prototype = {
-    constructor: WebInspector.TimelineEventMarker,
-
-    // Public
-
-    get timestamp()
-    {
-        return this._timestamp;
-    },
-
-    get type()
-    {
-        return this._type;
-    }
-};
-
-WebInspector.TimelineEventMarker.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineManager.js b/Source/WebInspectorUI/UserInterface/TimelineManager.js
deleted file mode 100644
index 21f1d3e1b..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineManager.js
+++ /dev/null
@@ -1,434 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineManager = function()
-{
-    WebInspector.Object.call(this);
-
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ProvisionalLoadStarted, this._startAutoRecording, this);
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
-    WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
-
-    this._recording = false;
-    this._records = [];
-    this._typeRecords = {};
-    this._loadEventTime = NaN;
-    this._eventMarkers = [];
-};
-
-WebInspector.TimelineManager.Event = {
-    RecordsCleared: "timeline-manager-records-cleared",
-    RecordingStarted: "timeline-manager-recording-started",
-    RecordingStopped: "timeline-manager-recording-stopped",
-    RecordAdded: "timeline-manager-record-added",
-    RecordedEventMarker: "timeline-manager-recorded-event-marker",
-};
-
-WebInspector.TimelineManager.MaximumAutoRecordDuration = 90000; // 90 seconds
-WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent = 10000; // 10 seconds
-WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly = 2000; // 2 seconds
-
-WebInspector.TimelineManager.prototype = {
-    constructor: WebInspector.TimelineManager,
-
-    // Public
-
-    get recording()
-    {
-        return this._recording;
-    },
-
-    get mainFrameLoadEventTime()
-    {
-        return this._loadEventTime;
-    },
-
-    get timelineEventMarkers()
-    {
-        return this._eventMarkers;
-    },
-
-    get records()
-    {
-        return this._records;
-    },
-
-    recordsWithType: function(type)
-    {
-        return this._typeRecords[type] || [];
-    },
-
-    startRecording: function()
-    {
-        if (this._recording)
-            return;
-
-        this._clear();
-
-        this._recording = true;
-
-        TimelineAgent.start();
-
-        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingStarted);
-    },
-
-    stopRecording: function()
-    {
-        if (!this._recording)
-            return;
-
-        if (this._stopRecordingTimeout) {
-            clearTimeout(this._stopRecordingTimeout);
-            delete this._stopRecordingTimeout;
-        }
-
-        if (this._deadTimeTimeout) {
-            clearTimeout(this._deadTimeTimeout);
-            delete this._deadTimeTimeout;
-        }
-
-        TimelineAgent.stop();
-
-        this._recording = false;
-        this._autoRecordingMainResource = null;
-
-        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordingStopped);
-    },
-
-    eventRecorded: function(originalRecord)
-    {
-        // Called from WebInspector.TimelineObserver.
-
-        if (!this._recording)
-            return;
-
-        function processRecord(record, parentRecord)
-        {
-            // Convert the timestamps to seconds to match the resource timestamps.
-            var startTime = record.startTime / 1000;
-            var endTime = record.endTime / 1000;
-
-            var callFrames = this._callFramesFromPayload(record.stackTrace);
-
-            switch (record.type) {
-            case "MarkLoad":
-                var mainFrame = WebInspector.frameResourceManager.mainFrame;
-                console.assert(mainFrame);
-
-                if (!mainFrame || record.frameId !== mainFrame.id)
-                    break;
-
-                this._loadEventTime = startTime;
-
-                var eventMarker = new WebInspector.TimelineEventMarker(startTime, WebInspector.TimelineEventMarker.Type.LoadEvent);
-                this._eventMarkers.push(eventMarker);
-                this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordedEventMarker, {eventMarker: eventMarker});
-                this._stopAutoRecordingSoon();
-                break;
-            case "MarkDOMContent":
-                var mainFrame = WebInspector.frameResourceManager.mainFrame;
-                console.assert(mainFrame);
-
-                if (!mainFrame || record.frameId !== mainFrame.id)
-                    break;
-
-                var eventMarker = new WebInspector.TimelineEventMarker(startTime, WebInspector.TimelineEventMarker.Type.DOMContentEvent);
-                this._eventMarkers.push(eventMarker);
-                this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordedEventMarker, {eventMarker: eventMarker});
-                break;
-            case "ScheduleStyleRecalculation":
-                console.assert(isNaN(endTime));
-                // Pass the startTime as the endTime since this record type has no duration.
-                this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles, startTime, startTime, callFrames));
-                break;
-            case "RecalculateStyles":
-                this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles, startTime, endTime, callFrames));
-                break;
-            case "InvalidateLayout":
-                console.assert(isNaN(endTime));
-                // Pass the startTime as the endTime since this record type has no duration.
-                this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout, startTime, startTime, callFrames));
-                break;
-            case "Layout":
-                // COMPATIBILITY (iOS 6): Layout records did not contain area properties. This is not exposed via a quad "root".
-                var quad = record.data.root ? new WebInspector.Quad(record.data.root) : null;
-                if (quad)
-                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Layout, startTime, endTime, callFrames, quad.points[0].x, quad.points[0].y, quad.width, quad.height, quad));
-                else
-                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Layout, startTime, endTime, callFrames));
-                break;
-            case "Paint":
-                // COMPATIBILITY (iOS 6): Paint records data contained x, y, width, height properties. This became a quad "clip".
-                var quad = record.data.clip ? new WebInspector.Quad(record.data.clip) : null;
-                if (quad)
-                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Paint, startTime, endTime, callFrames, null, null, quad.width, quad.height, quad));
-                else
-                    this._addRecord(new WebInspector.LayoutTimelineRecord(WebInspector.LayoutTimelineRecord.EventType.Paint, startTime, endTime, callFrames, record.data.x, record.data.y, record.data.width, record.data.height));
-                break;
-            case "EvaluateScript":
-                var resource = WebInspector.frameResourceManager.resourceForURL(record.data.url);
-
-                // The lineNumber is 1-based, but we expect 0-based.
-                var lineNumber = record.data.lineNumber - 1;
-
-                switch (parent ? parent.type : null) {
-                case "TimerFire":
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, parent.data.timerId, resource, lineNumber, callFrames));
-                    break;
-                default:
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated, startTime, endTime, null, resource, lineNumber, callFrames));
-                    break;
-                }
-
-                break;
-            case "TimeStamp":
-                var eventMarker = new WebInspector.TimelineEventMarker(startTime, WebInspector.TimelineEventMarker.Type.TimeStamp);
-                this._eventMarkers.push(eventMarker);
-                this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordedEventMarker, {eventMarker: eventMarker});
-                break;
-            case "FunctionCall":
-                // FunctionCall always happens as a child of another record, and since the FunctionCall record
-                // has useful info we just make the timeline record here (combining the data from both records).
-                if (!parent)
-                    break;
-
-                var resource = WebInspector.frameResourceManager.resourceForURL(record.data.scriptName);
-
-                // The scriptLine is 1-based, but we expect 0-based.
-                var lineNumber = record.data.scriptLine - 1;
-
-                switch (parent.type) {
-                case "TimerFire":
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerFired, startTime, endTime, parent.data.timerId, resource, lineNumber, callFrames));
-                    break;
-                case "EventDispatch":
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, parent.data.type, resource, lineNumber, callFrames));
-                    break;
-                case "XHRLoad":
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, "load", resource, lineNumber, callFrames));
-                    break;
-                case "XHRReadyStateChange":
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.EventDispatched, startTime, endTime, "readystatechange", resource, lineNumber, callFrames));
-                    break;
-                case "FireAnimationFrame":
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired, startTime, endTime, parent.data.id, resource, lineNumber, callFrames));
-                    break;
-                }
-
-                break;
-            case "TimerInstall":
-            case "TimerRemove":
-                // COMPATIBILITY (iOS 6): TimerInstall and TimerRemove did not have a stack trace.
-                var callFrame = null;
-                if (callFrames) {
-                    for (var i = 0; i < callFrames.length; ++i) {
-                        if (callFrames[i].nativeCode)
-                            continue;
-                        callFrame = callFrames[i];
-                        break;
-                    }
-                }
-
-                var sourceCodeLocation = callFrame && callFrame.sourceCodeLocation;
-                var resource = sourceCodeLocation ? sourceCodeLocation.sourceCode : null;
-                var lineNumber = sourceCodeLocation ? sourceCodeLocation.lineNumber : null;
-
-                if (record.type === "TimerInstall")
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerInstalled, startTime, endTime, record.data.timerId, resource, lineNumber, callFrames));
-                else
-                    this._addRecord(new WebInspector.ScriptTimelineRecord(WebInspector.ScriptTimelineRecord.EventType.TimerRemoved, startTime, endTime, record.data.timerId, resource, lineNumber, callFrames));
-
-                break;
-            }
-
-            return null;
-        }
-
-        // Iterate over the records tree using a stack. Doing this recursively has
-        // been known to cause a call stack overflow. https://webkit.org/b/79106
-        var stack = [{array: [originalRecord], parent: null, index: 0}];
-        while (stack.length) {
-            var entry = stack.lastValue;
-            var records = entry.array;
-            var parent = entry.parent;
-
-            if (entry.index < records.length) {
-                var record = records[entry.index];
-
-                processRecord.call(this, record, parent);
-
-                if (record.children)
-                    stack.push({array: record.children, parent: record, index: 0});
-                ++entry.index;
-            } else
-                stack.pop();
-        }
-    },
-
-    pageDidLoad: function(timestamp)
-    {
-        if (isNaN(this._loadEventTime))
-            this._loadEventTime = timestamp;
-    },
-
-    // Private
-
-    _clear: function()
-    {
-        this._records = [];
-        this._typeRecords = {};
-        this._loadEventTime = NaN;
-        this._eventMarkers = [];
-
-        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordsCleared);
-    },
-
-    _callFramesFromPayload: function(payload)
-    {
-        if (!payload)
-            return null;
-
-        function createCallFrame(payload)
-        {
-            var url = payload.url;
-            var nativeCode = false;
-
-            if (url === "[native code]") {
-                nativeCode = true;
-                url = null;
-            }
-
-            var sourceCode = WebInspector.frameResourceManager.resourceForURL(url);
-            if (!sourceCode)
-                sourceCode = WebInspector.debuggerManager.scriptsForURL(url)[0];
-
-            // The lineNumber is 1-based, but we expect 0-based.
-            var lineNumber = payload.lineNumber - 1;
-
-            var sourceCodeLocation = sourceCode ? sourceCode.createSourceCodeLocation(lineNumber, payload.columnNumber) : null;
-            var functionName = payload.functionName !== "global code" ? payload.functionName : null;
-
-            return new WebInspector.CallFrame(null, sourceCodeLocation, functionName, null, null, nativeCode);
-        }
-
-        return payload.map(createCallFrame);
-    },
-
-    _addRecord: function(record)
-    {
-        this._records.push(record);
-
-        if (!this._typeRecords[record.type])
-            this._typeRecords[record.type] = [];
-        this._typeRecords[record.type].push(record);
-
-        this.dispatchEventToListeners(WebInspector.TimelineManager.Event.RecordAdded, {record: record});
-
-        // Only worry about dead time after the load event.
-        if (!isNaN(this._loadEventTime))
-            this._resetAutoRecordingDeadTimeTimeout();
-    },
-
-    _startAutoRecording: function(event)
-    {
-        if (!event.target.isMainFrame() || (this._recording && !this._autoRecordingMainResource))
-            return false;
-
-        var mainResource = event.target.provisionalMainResource || event.target.mainResource;
-        if (mainResource === this._autoRecordingMainResource)
-            return false;
-
-        this.stopRecording();
-
-        this._autoRecordingMainResource = mainResource;
-
-        this.startRecording();
-
-        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
-
-        if (this._stopRecordingTimeout)
-            clearTimeout(this._stopRecordingTimeout);
-        this._stopRecordingTimeout = setTimeout(this.stopRecording.bind(this), WebInspector.TimelineManager.MaximumAutoRecordDuration);
-
-        return true;
-    },
-
-    _stopAutoRecordingSoon: function()
-    {
-        // Only auto stop when auto recording.
-        if (!this._recording || !this._autoRecordingMainResource)
-            return;
-
-        if (this._stopRecordingTimeout)
-            clearTimeout(this._stopRecordingTimeout);
-        this._stopRecordingTimeout = setTimeout(this.stopRecording.bind(this), WebInspector.TimelineManager.MaximumAutoRecordDurationAfterLoadEvent);
-    },
-
-    _resetAutoRecordingDeadTimeTimeout: function()
-    {
-        // Only monitor dead time when auto recording.
-        if (!this._recording || !this._autoRecordingMainResource)
-            return;
-
-        if (this._deadTimeTimeout)
-            clearTimeout(this._deadTimeTimeout);
-        this._deadTimeTimeout = setTimeout(this.stopRecording.bind(this), WebInspector.TimelineManager.DeadTimeRequiredToStopAutoRecordingEarly);
-    },
-
-    _mainResourceDidChange: function(event)
-    {
-        // Ignore resource events when there isn't a main frame yet. Those events are triggered by
-        // loading the cached resources when the inspector opens, and they do not have timing information.
-        if (!WebInspector.frameResourceManager.mainFrame)
-            return;
-
-        if (this._startAutoRecording(event))
-            return;
-
-        if (!this._recording)
-            return;
-
-        var mainResource = event.target.mainResource;
-        if (mainResource === this._autoRecordingMainResource)
-            return;
-
-        this._addRecord(new WebInspector.ResourceTimelineRecord(mainResource));
-    },
-
-    _resourceWasAdded: function(event)
-    {
-        // Ignore resource events when there isn't a main frame yet. Those events are triggered by
-        // loading the cached resources when the inspector opens, and they do not have timing information.
-        if (!WebInspector.frameResourceManager.mainFrame)
-            return;
-
-        if (!this._recording)
-            return;
-
-        this._addRecord(new WebInspector.ResourceTimelineRecord(event.data.resource));
-    }
-};
-
-WebInspector.TimelineManager.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineObserver.js b/Source/WebInspectorUI/UserInterface/TimelineObserver.js
deleted file mode 100644
index e91e32375..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineObserver.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineObserver = function()
-{
-    WebInspector.Object.call(this);
-};
-
-WebInspector.TimelineObserver.prototype = {
-    constructor: WebInspector.TimelineObserver,
-
-    // Events defined by the "Timeline" domain (see WebCore/inspector/Inspector.json).
-
-    eventRecorded: function(record)
-    {
-        WebInspector.timelineManager.eventRecorded(record);
-    }
-};
-
-WebInspector.TimelineObserver.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/TimelineOverview.css
deleted file mode 100644
index be237e3cd..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineOverview.css
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.timeline-overview > .timeline {
-    height: 26px;
-}
-
-.timeline-overview > .timeline:not(:first-child) {
-    border-top: 1px solid rgb(235, 235, 235);
-}
-
-.timeline-overview > .timeline > .bar-container {
-    position: relative;
-    height: 100%;
-    margin-left: 3px;
-    margin-right: 3px;
-}
-
-.timeline-overview > .timeline .bar {
-    position: absolute;
-    top: 6px;
-    margin-left: -2px;
-    margin-right: -2px;
-    border-width: 4px 4px 5px;
-    border-image-slice: 4 4 5 4 fill;
-    height: 13px;
-    min-width: 5px;
-    opacity: 0.8;
-}
-
-.timeline-overview > .timeline .bar.waiting {
-    opacity: 0.4;
-}
-
-.timeline-overview > .timeline.timeline-record-type-network .bar {
-    border-image-source: -webkit-image-set(url(Images/TimelineBarBlue.png) 1x, url(Images/TimelineBarBlue@2x.png) 2x);
-}
-
-.timeline-overview > .timeline.timeline-record-type-layout .bar {
-    border-image-source: -webkit-image-set(url(Images/TimelineBarPurple.png) 1x, url(Images/TimelineBarPurple@2x.png) 2x);
-}
-
-.timeline-overview > .timeline.timeline-record-type-script .bar {
-    border-image-source: -webkit-image-set(url(Images/TimelineBarOrange.png) 1x, url(Images/TimelineBarOrange@2x.png) 2x);
-}
-
-.timeline-overview .timeline-decorations > .event-markers {
-    height: 78px;
-    bottom: 22px;
-    top: auto;
-}
-
-.timeline-overview .timeline-decorations > .event-markers > .event-marker-tooltip {
-    z-index: 300;
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelineOverview.js b/Source/WebInspectorUI/UserInterface/TimelineOverview.js
deleted file mode 100644
index a17eb83e7..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineOverview.js
+++ /dev/null
@@ -1,251 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineOverview = function(dataSource, recordTypes)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(dataSource);
-    console.assert(recordTypes instanceof Array);
-
-    this._element = document.createElement("div");
-    this._element.className = WebInspector.TimelineOverview.StyleClassName;
-
-    this._recordTypes = recordTypes;
-
-    this._timelineDecorations = new WebInspector.TimelineDecorations;
-
-    this._timelineElements = [];
-    for (var i = 0; i < this._recordTypes.length; ++i) {
-        var timelineElement = document.createElement("div");
-        timelineElement.classList.add(WebInspector.TimelineOverview.TimelineElementStyleClassName);
-        timelineElement.classList.add(this._recordTypes[i]);
-        this._element.appendChild(timelineElement);
-
-        var barContainerElement = document.createElement("div");
-        barContainerElement.className = WebInspector.TimelineOverview.BarContainerElementStyleClassName;
-        timelineElement.appendChild(barContainerElement);
-        timelineElement._barContainerElement = barContainerElement;
-
-        this._timelineElements.push(timelineElement);
-    }
-
-    this._element.appendChild(this._timelineDecorations.element);
-
-    this._dataSource = dataSource;
-};
-
-WebInspector.TimelineOverview.StyleClassName = "timeline-overview";
-WebInspector.TimelineOverview.TimelineElementStyleClassName = "timeline";
-WebInspector.TimelineOverview.BarContainerElementStyleClassName = "bar-container";
-WebInspector.TimelineOverview.BarElementStyleClassName = "bar";
-WebInspector.TimelineOverview.WaitingBarElementStyleClassName = "waiting";
-
-WebInspector.TimelineOverview.prototype = {
-    constructor: WebInspector.TimelineOverview,
-
-    // Public
-
-    get element()
-    {
-        return this._element;
-    },
-
-    get recordTypes()
-    {
-        return this._recordTypes;
-    },
-
-    clear: function()
-    {
-        this._minimumBoundary = NaN;
-        this._maximumBoundary = NaN;
-        this._boundarySpan = NaN;
-
-        this._timelineDecorations.clear();
-        this._timelineDecorations.updateHeaderTimes(this._boundarySpan);
-
-        for (var i = 0; i < this._timelineElements.length; ++i)
-            this._timelineElements[i]._barContainerElement.removeChildren();
-    },
-
-    update: function()
-    {
-        var minimumBoundary = NaN;
-        var maximumBoundary = NaN;
-
-        var records = [];
-        for (var i = 0; i < this._recordTypes.length; ++i)
-            records.push(this._dataSource.timelineOverviewRecordsWithType(this._recordTypes[i]));
-
-        for (var i = 0; i < records.length; ++i) {
-            var currentRecords = records[i];
-            if (!currentRecords.length)
-                continue;
-
-            // The first record can be assumed to be the oldest start time.
-            var firstRecord = currentRecords[0];
-            if (isNaN(minimumBoundary) || firstRecord.startTime < minimumBoundary)
-                minimumBoundary = firstRecord.startTime;
-
-            if (this._recordTypes[i] === WebInspector.TimelineRecord.Type.Network) {
-                // For the Network timeline we need to look at all the records since
-                // long loading resources can be anywhere, not just at the end. The other
-                // timelines are static, so the last record is always the newest.
-                for (var j = currentRecords.length - 1; j >= 0; --j) {
-                    var record = currentRecords[j];
-                    if (isNaN(maximumBoundary) || record.endTime > maximumBoundary)
-                        maximumBoundary = record.endTime;
-                }
-            } else {
-                // The newest record will always be at the end.
-                var lastRecord = currentRecords.lastValue;
-                if (isNaN(maximumBoundary) || lastRecord.endTime > maximumBoundary)
-                    maximumBoundary = lastRecord.endTime;
-            }
-        }
-
-        this._minimumBoundary = minimumBoundary;
-        this._maximumBoundary = maximumBoundary;
-        this._boundarySpan = maximumBoundary - minimumBoundary;
-
-        this._timelineDecorations.updateHeaderTimes(this._boundarySpan);
-        this._timelineDecorations.updateEventMarkers(this._minimumBoundary, this._maximumBoundary);
-
-        for (var i = 0; i < records.length; ++i)
-            this._updateTimelineBars(this._timelineElements[i], this._recordTypes[i], records[i]);
-    },
-
-    updateLayout: function()
-    {
-        this._timelineDecorations.updateHeaderTimes(this._boundarySpan);
-    },
-
-    addTimelineEventMarker: function(eventMarker)
-    {
-        this._timelineDecorations.addTimelineEventMarker(eventMarker);
-    },
-
-    // Private
-
-    _updateTimelineBars: function(timelineElement, type, records)
-    {
-        function computeActivePercentages(record)
-        {
-            // Compute percentages for endTime and the start of activeDuration.
-
-            var activeStartTime = record.endTime - record.activeDuration;
-            if (isNaN(activeStartTime))
-                activeStartTime = record.endTime;
-
-            if (isNaN(activeStartTime))
-                var start = 0;
-            else
-                var start = ((activeStartTime - this._minimumBoundary) / this._boundarySpan) * 100;
-
-            if (isNaN(record.endTime))
-                var end = 100;
-            else
-                var end = ((record.endTime - this._minimumBoundary) / this._boundarySpan) * 100;
-
-            return {start: start, end: end};
-        }
-
-        function computePercentages(record)
-        {
-            // Compute percentages for startTime and endTime.
-
-            if (isNaN(record.startTime))
-                var start = 0;
-            else
-                var start = ((record.startTime - this._minimumBoundary) / this._boundarySpan) * 100;
-
-            if (isNaN(record.endTime))
-                var end = 100;
-            else
-                var end = ((record.endTime - this._minimumBoundary) / this._boundarySpan) * 100;
-
-            return {start: start, end: end};
-        }
-
-        function addBar(startPercentage, endPercentage, extraBarStyleClass)
-        {
-            var barElement = document.createElement("div");
-            barElement.className = WebInspector.TimelineOverview.BarElementStyleClassName;
-            if (extraBarStyleClass)
-                barElement.classList.add(extraBarStyleClass);
-
-            if (startPercentage === 0 || startPercentage !== endPercentage)
-                barElement.style.left = startPercentage + "%";
-            barElement.style.right = (100 - endPercentage) + "%";
-
-            timelineElement._barContainerElement.appendChild(barElement);
-        }
-
-        function createBars(percentageCalculator, extraBarStyleClass)
-        {
-            // Iterate over the records and find the percentage distribution on the graph.
-            // The percentages are recorded in a sparse array from 0-100.
-
-            var timelineSlots = new Array(101);
-            for (var i = 0; i < records.length; ++i) {
-                var percentages = percentageCalculator.call(this, records[i]);
-                var end = Math.round(percentages.end);
-                for (var j = Math.round(percentages.start); j <= end; ++j)
-                    timelineSlots[j] = true;
-            }
-
-            var barStart = NaN;
-            for (var i = 0; i < timelineSlots.length; ++i) {
-                if (timelineSlots[i]) {
-                    if (isNaN(barStart))
-                        barStart = i;
-                } else {
-                    if (!isNaN(barStart)) {
-                        addBar.call(this, barStart, i, extraBarStyleClass);
-                        barStart = NaN;
-                    }
-                }
-            }
-
-            if (!isNaN(barStart)) {
-                addBar.call(this, barStart, 100, extraBarStyleClass);
-                barStart = NaN;
-            }
-        }
-
-        timelineElement._barContainerElement.removeChildren();
-
-        // The Network timeline shows two bars. The first is the total time (waiting for the resource until it finishes).
-        // The second bar is the active download time (first first response to finish.)
-        if (type === WebInspector.TimelineRecord.Type.Network) {
-            createBars.call(this, computePercentages, WebInspector.TimelineOverview.WaitingBarElementStyleClassName);
-            createBars.call(this, computeActivePercentages);
-        } else
-            createBars.call(this, computePercentages);
-    }
-};
-
-WebInspector.TimelineOverview.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelineRecord.js b/Source/WebInspectorUI/UserInterface/TimelineRecord.js
deleted file mode 100644
index 06388eee4..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelineRecord.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelineRecord = function(type, startTime, endTime)
-{
-    WebInspector.Object.call(this);
-
-    console.assert(type);
-
-    if (type in WebInspector.TimelineRecord.Type)
-        type = WebInspector.TimelineRecord.Type[type];
-
-    this._type = type;
-    this._startTime = startTime || NaN;
-    this._endTime = endTime || NaN;
-};
-
-WebInspector.TimelineRecord.Event = {
-    Updated: "timeline-record-updated"
-};
-
-WebInspector.TimelineRecord.Type = {
-    Network: "timeline-record-type-network",
-    Layout: "timeline-record-type-layout",
-    Script: "timeline-record-type-script"
-};
-
-WebInspector.TimelineRecord.prototype = {
-    constructor: WebInspector.TimelineRecord,
-
-    // Public
-
-    get type()
-    {
-        return this._type;
-    },
-
-    get startTime()
-    {
-        return this._startTime;
-    },
-
-    get endTime()
-    {
-        return this._endTime;
-    },
-
-    get duration()
-    {
-        // Use the getters instead of the properties so this works for subclasses that override the getters.
-        return this.endTime - this.startTime;
-    },
-
-    get waitingDuration()
-    {
-        // Implemented by subclasses if needed.
-        return NaN;
-    },
-
-    get activeDuration()
-    {
-        // Implemented by subclasses if needed.
-        return this.duration;
-    }
-};
-
-WebInspector.TimelineRecord.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelinesContentView.css b/Source/WebInspectorUI/UserInterface/TimelinesContentView.css
deleted file mode 100644
index 93720719d..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelinesContentView.css
+++ /dev/null
@@ -1,247 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.content-view.timelines > .timeline-overview {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100px;
-}
-
-.content-view.timelines > .data-grid {
-    position: absolute;
-    top: 100px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    outline: 0;
-    border: none;
-    border-top: 1px solid rgb(179, 179, 179);
-}
-
-.content-view.timelines > .data-grid th {
-    height: 21px;
-
-    font-size: 11px;
-    font-family: "Lucida Grande", sans-serif;
-
-    background-image: -webkit-linear-gradient(top, rgb(248, 248, 248), rgb(226, 226, 226));
-
-    background-size: 100% 100% !important;
-    background-position: center !important;
-    background-repeat: no-repeat !important;
-
-    box-shadow: inset rgba(255, 255, 255, 0.1) 0 1px 0;
-    border-bottom: 1px solid rgb(179, 179, 179) !important;
-}
-
-.content-view.timelines > .data-grid th:not(:last-child) {
-    border-right: 1px solid rgb(179, 179, 179);
-}
-
-.content-view.timelines > .data-grid th.sortable:not(.mouse-over-collapser):active {
-    background-image: -webkit-linear-gradient(top, rgb(219, 219, 219), rgb(188, 188, 188)) !important;
-}
-
-.content-view.timelines > .data-grid th.sort-ascending,
-.content-view.timelines > .data-grid th.sort-descending {
-    background-image: -webkit-linear-gradient(top, rgb(230, 230, 230), rgb(200, 200, 200)) !important;
-}
-
-.content-view.timelines > .data-grid .data-container {
-    top: 22px;
-}
-
-.content-view.timelines > .data-grid table.data {
-    background-size: auto 42px;
-    background-image: -webkit-linear-gradient(top, white, white 50%, rgb(95%, 95%, 95%) 50%, rgb(95%, 95%, 95%));
-    font-size: 11px;
-}
-
-.content-view.timelines > .data-grid th,
-.content-view.timelines > .data-grid td {
-    padding-left: 6px;
-    padding-right: 6px;
-}
-
-.content-view.timelines > .data-grid td:last-child {
-    padding-right: 12px;
-}
-
-.content-view.timelines > .data-grid td {
-    padding-top: 2px;
-    padding-bottom: 2px;
-    line-height: 17px;
-}
-
-.content-view.timelines > .data-grid td:not(:last-child) {
-    border-right: 1px solid rgb(179, 179, 179);
-}
-
-.content-view.timelines > .data-grid .column-group-details {
-    background-color: rgba(0, 0, 0, 0.07);
-}
-
-.content-view.timelines > .data-grid.collapsed-details td.column-group-details:not(:last-child) {
-    border-right: none; /* Prevent a sporadic double-thick border appearance in collapsed 0-width columns. */
-}
-
-.content-view.timelines > .data-grid td .subtitle {
-    color: rgba(0, 0, 0, 0.7);
-}
-
-.content-view.timelines > .data-grid td .subtitle::before {
-    content: " — ";
-}
-
-.content-view.timelines > .data-grid:focus tr.selected td .subtitle {
-    color: rgba(255, 255, 255, 0.9);
-}
-
-.content-view.timelines > .data-grid td .icon {
-    display: inline-block;
-    vertical-align: top;
-
-    width: 16px;
-    height: 16px;
-
-    margin-right: 2px;
-}
-
-.content-view.timelines > .data-grid td.timeline-column {
-    padding-left: 1px;
-    padding-right: 1px;
-}
-
-.content-view.timelines > .data-grid td .go-to-arrow {
-    float: right;
-
-    visibility: hidden;
-
-    margin-left: 2px;
-}
-
-.content-view.timelines > .data-grid tr.selected .go-to-arrow,
-.content-view.timelines > .data-grid tr:hover .go-to-arrow {
-    visibility: visible;
-}
-
-.content-view.timelines > .data-grid td.error {
-    color: rgb(224, 16, 16);
-}
-
-.content-view.timelines > .data-grid tr.selected td.error {
-    color: inherit;
-}
-
-.content-view.timelines > .data-grid tr.offscreen {
-    height: 21px;
-}
-
-.content-view.timelines > .data-grid tr.offscreen td {
-    display: none;
-}
-
-/* Column collapser */
-
-.content-view.timelines > .data-grid th.collapser {
-    position: relative;
-}
-
-.content-view.timelines > .data-grid th.collapser > .divider {
-    position: absolute;
-    width: 2px;
-    top: 0;
-    right: 25px;
-    bottom: 0;
-
-    background-image: -webkit-linear-gradient(rgba(128, 128, 128, 0), rgb(128, 128, 128), rgba(128, 128, 128, 0)),
-        -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
-    background-size: 1px 17px, 1px 17px;
-    background-repeat: no-repeat;
-    background-position: 0 center, 1px center;
-}
-
-.content-view.timelines > .data-grid th.collapser > .collapser-button {
-    position: absolute;
-    top: 0;
-    right: 5px;
-    bottom: 0;
-    height: 15px;
-    width: 15px;
-    margin-bottom: auto;
-    margin-top: auto;
-
-    background-image: -webkit-canvas(timeline-datagrid-collapse-button-less-normal);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 15px 13px;
-}
-
-.content-view.timelines > .data-grid th.collapser > .collapser-button:active {
-    background-image: -webkit-canvas(timeline-datagrid-collapse-button-less-active);
-}
-
-.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button {
-    background-image: -webkit-canvas(timeline-datagrid-collapse-button-more-normal);
-}
-
-.content-view.timelines > .data-grid th.collapser.collapsed > .collapser-button:active {
-    background-image: -webkit-canvas(timeline-datagrid-collapse-button-more-active);
-}
-
-.content-view.timelines > .data-grid th.sort-ascending.collapser > div:first-child,
-.content-view.timelines > .data-grid th.sort-descending.collapser > div:first-child {
-    margin-right: 27px;
-}
-
-.content-view.timelines > .data-grid > .navigation-bar-container {
-    position: absolute;
-    top: -33px;
-    left: 0;
-    right: 0;
-    height: 33px;
-
-    pointer-events: none;
-    visibility: hidden;
-}
-
-.content-view.timelines > .data-grid:hover > .navigation-bar-container {
-    pointer-events: all;
-    visibility: visible;
-}
-
-.content-view.timelines > .data-grid > .navigation-bar-container > .navigation-bar {
-    position: absolute;
-    top: 10px;
-    left: 0;
-    right: 0;
-    height: 23px;
-    border: none;
-    border-top: 1px solid rgb(200, 200, 200);
-    border-bottom: 1px solid rgb(179, 179, 179);
-    background-color: white;
-}
diff --git a/Source/WebInspectorUI/UserInterface/TimelinesContentView.js b/Source/WebInspectorUI/UserInterface/TimelinesContentView.js
deleted file mode 100644
index 1c8c5d679..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelinesContentView.js
+++ /dev/null
@@ -1,756 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelinesContentView = function(representedObject)
-{
-    WebInspector.ContentView.call(this, representedObject);
-
-    this.element.classList.add(WebInspector.TimelinesContentView.StyleClassName);
-
-    this._timelineOverview = new WebInspector.TimelineOverview(this, [WebInspector.TimelineRecord.Type.Network, WebInspector.TimelineRecord.Type.Layout, WebInspector.TimelineRecord.Type.Script]);
-    this.element.appendChild(this._timelineOverview.element);
-
-    function createPathComponent(displayName, className, representedObject)
-    {
-        var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, representedObject);
-        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
-        return pathComponent;
-    }
-
-    var networkPathComponent = createPathComponent.call(this, WebInspector.UIString("Network Requests"), WebInspector.InstrumentSidebarPanel.NetworkIconStyleClass, WebInspector.TimelineRecord.Type.Network);
-    var layoutPathComponent = createPathComponent.call(this, WebInspector.UIString("Layout & Rendering"), WebInspector.InstrumentSidebarPanel.ColorsIconStyleClass, WebInspector.TimelineRecord.Type.Layout);
-    var scriptPathComponent = createPathComponent.call(this, WebInspector.UIString("JavaScript & Events"), WebInspector.InstrumentSidebarPanel.ScriptIconStyleClass, WebInspector.TimelineRecord.Type.Script);
-
-    networkPathComponent.nextSibling = layoutPathComponent;
-    layoutPathComponent.previousSibling = networkPathComponent;
-    layoutPathComponent.nextSibling = scriptPathComponent;
-    scriptPathComponent.previousSibling = layoutPathComponent;
-
-    this._currentRecordType = null;
-    this._currentRecordTypeSetting = new WebInspector.Setting("timeline-view-current-record-type", WebInspector.TimelineRecord.Type.Network);
-    this._currentDataGrid = null;
-
-    var networkDataGridColumns = {name: {}, domain: {}, type: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, latency: {}, duration: {}, timeline: {}};
-
-    networkDataGridColumns.name.title = WebInspector.UIString("Name");
-    networkDataGridColumns.name.width = "15%";
-
-    networkDataGridColumns.domain.title = WebInspector.UIString("Domain");
-    networkDataGridColumns.domain.width = "10%";
-    networkDataGridColumns.domain.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    networkDataGridColumns.type.title = WebInspector.UIString("Type");
-    networkDataGridColumns.type.width = "8%";
-    networkDataGridColumns.type.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-    networkDataGridColumns.type.scopeBar = this._makeColumnScopeBar("network", WebInspector.Resource.Type);
-
-    networkDataGridColumns.statusCode.title = WebInspector.UIString("Status");
-    networkDataGridColumns.statusCode.width = "6%";
-    networkDataGridColumns.statusCode.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    networkDataGridColumns.cached.title = WebInspector.UIString("Cached");
-    networkDataGridColumns.cached.width = "7%";
-    networkDataGridColumns.cached.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    networkDataGridColumns.size.title = WebInspector.UIString("Size");
-    networkDataGridColumns.size.width = "8%";
-    networkDataGridColumns.size.aligned = "right";
-    networkDataGridColumns.size.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    networkDataGridColumns.transferSize.title = WebInspector.UIString("Transferred");
-    networkDataGridColumns.transferSize.width = "8%";
-    networkDataGridColumns.transferSize.aligned = "right";
-    networkDataGridColumns.transferSize.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    networkDataGridColumns.latency.title = WebInspector.UIString("Latency");
-    networkDataGridColumns.latency.width = "9%";
-    networkDataGridColumns.latency.aligned = "right";
-    networkDataGridColumns.latency.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    networkDataGridColumns.duration.title = WebInspector.UIString("Duration");
-    networkDataGridColumns.duration.width = "9%";
-    networkDataGridColumns.duration.aligned = "right";
-    networkDataGridColumns.duration.group = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    networkDataGridColumns.timeline.title = WebInspector.UIString("Timeline");
-    networkDataGridColumns.timeline.width = "20%";
-    networkDataGridColumns.timeline.sort = "ascending";
-    networkDataGridColumns.timeline.collapsesGroup = WebInspector.NetworkDataGrid.DetailsColumnGroup;
-
-    var layoutDataGridColumns = {eventType: {}, initiatorCallFrame: {}, width: {}, height: {}, area: {}, startTime: {}, duration: {}};
-
-    layoutDataGridColumns.eventType.title = WebInspector.UIString("Type");
-    layoutDataGridColumns.eventType.width = "15%";
-    layoutDataGridColumns.eventType.scopeBar = this._makeColumnScopeBar("layout", WebInspector.LayoutTimelineRecord.EventType);
-
-    layoutDataGridColumns.initiatorCallFrame.title = WebInspector.UIString("Initiator");
-    layoutDataGridColumns.initiatorCallFrame.width = "25%";
-
-    layoutDataGridColumns.width.title = WebInspector.UIString("Width");
-    layoutDataGridColumns.width.width = "8%";
-
-    layoutDataGridColumns.height.title = WebInspector.UIString("Height");
-    layoutDataGridColumns.height.width = "8%";
-
-    layoutDataGridColumns.area.title = WebInspector.UIString("Area");
-    layoutDataGridColumns.area.width = "12%";
-
-    layoutDataGridColumns.startTime.title = WebInspector.UIString("Start Time");
-    layoutDataGridColumns.startTime.width = "8%";
-    layoutDataGridColumns.startTime.aligned = "right";
-    layoutDataGridColumns.startTime.sort = "ascending";
-
-    layoutDataGridColumns.duration.title = WebInspector.UIString("Duration");
-    layoutDataGridColumns.duration.width = "8%";
-    layoutDataGridColumns.duration.aligned = "right";
-
-    var scriptDataGridColumns = {eventType: {}, details: {}, resource: {}, startTime: {}, duration: {}};
-
-    scriptDataGridColumns.eventType.title = WebInspector.UIString("Type");
-    scriptDataGridColumns.eventType.width = "15%";
-    scriptDataGridColumns.eventType.scopeBar = this._makeColumnScopeBar("script", WebInspector.ScriptTimelineRecord.EventType);
-
-    scriptDataGridColumns.details.title = WebInspector.UIString("Details");
-    scriptDataGridColumns.details.width = "15%";
-
-    scriptDataGridColumns.resource.title = WebInspector.UIString("Location");
-    scriptDataGridColumns.resource.width = "15%";
-
-    scriptDataGridColumns.startTime.title = WebInspector.UIString("Start Time");
-    scriptDataGridColumns.startTime.width = "10%";
-    scriptDataGridColumns.startTime.aligned = "right";
-    scriptDataGridColumns.startTime.sort = "ascending";
-
-    scriptDataGridColumns.duration.title = WebInspector.UIString("Duration");
-    scriptDataGridColumns.duration.width = "10%";
-    scriptDataGridColumns.duration.aligned = "right";
-
-    for (var column in networkDataGridColumns)
-        networkDataGridColumns[column].sortable = true;
-
-    for (var column in layoutDataGridColumns)
-        layoutDataGridColumns[column].sortable = true;
-
-    for (var column in scriptDataGridColumns)
-        scriptDataGridColumns[column].sortable = true;
-
-    var networkDataGrid = new WebInspector.NetworkDataGrid(networkDataGridColumns);
-    var layoutDataGrid = new WebInspector.LayoutTimelineDataGrid(layoutDataGridColumns);
-    var scriptDataGrid = new WebInspector.ScriptTimelineDataGrid(scriptDataGridColumns);
-
-    networkDataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedNodeChanged, this);
-
-    this._pathComponentMap = {};
-    this._pathComponentMap[WebInspector.TimelineRecord.Type.Network] = networkPathComponent;
-    this._pathComponentMap[WebInspector.TimelineRecord.Type.Layout] = layoutPathComponent;
-    this._pathComponentMap[WebInspector.TimelineRecord.Type.Script] = scriptPathComponent;
-
-    this._dataGridMap = {};
-    this._dataGridMap[WebInspector.TimelineRecord.Type.Network] = networkDataGrid;
-    this._dataGridMap[WebInspector.TimelineRecord.Type.Layout] = layoutDataGrid;
-    this._dataGridMap[WebInspector.TimelineRecord.Type.Script] = scriptDataGrid;
-
-    for (var type in this._dataGridMap) {
-        var dataGrid = this._dataGridMap[type];
-        dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortCurrentDataGrid, this);
-        dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
-        dataGrid.scrollContainer.addEventListener("scroll", this._updateOffscreenRows.bind(this));
-    }
-
-    this._pendingRecords = {};
-
-    for (var typeName in WebInspector.TimelineRecord.Type) {
-        var type = WebInspector.TimelineRecord.Type[typeName];
-        this._pendingRecords[type] = WebInspector.timelineManager.recordsWithType(type);
-    }
-
-    this._pendingRefreshGridNodes = {};
-    this._pendingEventMarkers = {};
-
-    WebInspector.ResourceTimelineDataGridNode.addEventListener(WebInspector.ResourceTimelineDataGridNode.Event.NeedsRefresh, this._scheduleGridNodeForRefresh, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordsCleared, this._recordsCleared, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordAdded, this._recordAdded, this);
-    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordedEventMarker, this._recordedEventMarker, this);
-
-    WebInspector.TimelinesContentView.generateEmbossedCollapseImages();
-};
-
-WebInspector.TimelinesContentView.StyleClassName = "timelines";
-WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName = "offscreen";
-WebInspector.TimelinesContentView.UpdateInterval = 500; // 0.5 seconds
-
-WebInspector.TimelinesContentView.CollapseButton = {};
-WebInspector.TimelinesContentView.CollapseButton.More = "more";
-WebInspector.TimelinesContentView.CollapseButton.Less = "less";
-
-WebInspector.TimelinesContentView.CollapseButton.States = {};
-WebInspector.TimelinesContentView.CollapseButton.States.Normal = "normal";
-WebInspector.TimelinesContentView.CollapseButton.States.Active = "active";
-
-WebInspector.TimelinesContentView.generateEmbossedCollapseImages = function()
-{
-    if (WebInspector.TimelinesContentView._generatedImages)
-        return;
-    WebInspector.TimelinesContentView._generatedImages = true;
-
-    generateEmbossedImages("Images/MoreColumns.pdf", 15, 13, WebInspector.TimelinesContentView.CollapseButton.States, canvasIdentifier.bind(this, WebInspector.TimelinesContentView.CollapseButton.More));
-    generateEmbossedImages("Images/LessColumns.pdf", 15, 13, WebInspector.TimelinesContentView.CollapseButton.States, canvasIdentifier.bind(this, WebInspector.TimelinesContentView.CollapseButton.Less));
-
-    function canvasIdentifier(type, state) {
-        return "timeline-datagrid-collapse-button-" + type + "-" + state;
-    }
-}
-
-WebInspector.TimelinesContentView.prototype = {
-    constructor: WebInspector.TimelinesContentView,
-
-    // Public
-
-    get allowedNavigationSidebarPanels()
-    {
-        return ["instrument"];
-    },
-
-    showTimelineForRecordType: function(type)
-    {
-        if (this._currentRecordType === type)
-            return;
-
-        this._currentRecordType = type;
-        this._currentRecordTypeSetting.value = type;
-
-        if (this._currentDataGrid) {
-            // Save scroll positon before removing from the document.
-            if (this._currentDataGrid.isScrolledToLastRow()) {
-                this._currentDataGrid._savedIsScrolledToLastRow = true;
-                delete this._currentDataGrid._savedScrollTop;
-            } else {
-                this._currentDataGrid._savedScrollTop = this._currentDataGrid.scrollContainer.scrollTop;
-                delete this._currentDataGrid._savedIsScrolledToLastRow;
-            }
-
-            this.element.removeChild(this._currentDataGrid.element);
-            this._currentDataGrid.hidden();
-        }
-
-        this._currentDataGrid = this._dataGridMap[type];
-        console.assert(this._currentDataGrid);
-
-        this.element.appendChild(this._currentDataGrid.element);
-        this._currentDataGrid.updateLayout();
-        this._currentDataGrid.shown();
-
-        // Restore scroll positon now that we are back in the document.
-        if (this._currentDataGrid._savedIsScrolledToLastRow)
-            this._currentDataGrid.scrollToLastRow()
-        else if (this._currentDataGrid._savedScrollTop)
-            this._currentDataGrid.scrollContainer.scrollTop = this._currentDataGrid._savedScrollTop;
-
-        this._updatePendingRecords();
-
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-        WebInspector.instrumentSidebarPanel.showTimelineForRecordType(type);
-    },
-
-    get supportsSplitContentBrowser()
-    {
-        // The layout of the overview and split content browser don't work well.
-        return false;
-    },
-
-    get selectionPathComponents()
-    {
-        var pathComponents = [this._pathComponentMap[this._currentRecordType]] || [];
-
-        if (this._currentDataGrid) {
-            var selectedNode = this._currentDataGrid.selectedNode;
-            if (selectedNode instanceof WebInspector.ResourceTimelineDataGridNode) {
-                var pathComponent = new WebInspector.ResourceTimelineDataGridNodePathComponent(selectedNode);
-                pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._dataGridNodePathComponentSelected, this);
-                pathComponents.push(pathComponent);
-            }
-        }
-
-        return pathComponents;
-    },
-
-    updateLayout: function()
-    {
-        if (this._currentDataGrid)
-            this._currentDataGrid.updateLayout();
-        this._timelineOverview.updateLayout();
-        this._updateOffscreenRows();
-    },
-
-    get scrollableElements()
-    {
-        if (!this._currentDataGrid)
-            return null;
-        return [this._currentDataGrid.scrollContainer];
-    },
-
-    get shouldKeepElementsScrolledToBottom()
-    {
-        return true;
-    },
-
-    shown: function()
-    {
-        if (this._currentRecordType) {
-            this._updatePendingRecords();
-            return;
-        }
-
-        if (this._currentDataGrid)
-            this._currentDataGrid.shown();
-
-        this.showTimelineForRecordType(this._currentRecordTypeSetting.value);
-    },
-
-    hidden: function()
-    {
-        if (this._currentDataGrid)
-            this._currentDataGrid.hidden();
-    },
-
-    timelineOverviewRecordsWithType: function(type)
-    {
-        return this._filterRecordsWithType(WebInspector.timelineManager.recordsWithType(type), type);
-    },
-
-    // Private
-
-    _pathComponentSelected: function(event)
-    {
-        this.showTimelineForRecordType(event.data.pathComponent.representedObject);
-    },
-
-    _dataGridNodePathComponentSelected: function(event)
-    {
-        console.assert(event.data.pathComponent instanceof WebInspector.ResourceTimelineDataGridNodePathComponent);
-        if (!(event.data.pathComponent instanceof WebInspector.ResourceTimelineDataGridNodePathComponent))
-            return;
-
-        event.data.pathComponent.resourceTimelineDataGridNode.revealAndSelect();
-        event.data.pathComponent.resourceTimelineDataGridNode.dataGrid.element.focus();
-    },
-
-    _selectedNodeChanged: function(event)
-    {
-        if (this._ignoreSelectionEvent)
-            return;
-
-        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
-    },
-
-    _recordsCleared: function(event)
-    {
-        this._pendingRecords = {};
-        this._pendingRefreshGridNodes = {};
-        this._pendingEventMarkers = {};
-
-        for (var type in this._dataGridMap) {
-            var dataGrid = this._dataGridMap[type];
-            delete dataGrid._savedIsScrolledToLastRow;
-            delete dataGrid._savedScrollTop;
-            dataGrid.removeChildren();
-            dataGrid.reset();
-        }
-
-        this._timelineOverview.clear();
-    },
-
-    _recordAdded: function(event)
-    {
-        this._addRecordToDataGrid(event.data.record);
-    },
-
-    _recordedEventMarker: function(event)
-    {
-        var eventMarker = event.data.eventMarker;
-        this._timelineOverview.addTimelineEventMarker(eventMarker);
-
-        for (var type in this._dataGridMap) {
-            if (!this._pendingEventMarkers[type])
-                this._pendingEventMarkers[type] = [];
-            this._pendingEventMarkers[type].push(eventMarker);
-
-            this._dataGridMap[type].addTimelineEventMarker(eventMarker);
-        }
-
-        this._updatePendingRecordsSoon();
-    },
-
-    _addRecordToDataGrid: function(record)
-    {
-        if (!this._pendingRecords[record.type])
-            this._pendingRecords[record.type] = [];
-        this._pendingRecords[record.type].push(record);
-
-        this._updatePendingRecordsSoon();
-    },
-
-    _updatePendingRecordsSoon: function()
-    {
-        if (!this.visible || this._updatePendingRecordsTimeout)
-            return;
-
-        this._updatePendingRecordsTimeout = setTimeout(this._updatePendingRecords.bind(this), WebInspector.TimelinesContentView.UpdateInterval);
-    },
-
-    _updatePendingRecords: function()
-    {
-        if (this._updatePendingRecordsTimeout) {
-            clearTimeout(this._updatePendingRecordsTimeout);
-            delete this._updatePendingRecordsTimeout;
-        }
-
-        this._timelineOverview.update();
-
-        console.assert(this._dataGridMap[this._currentRecordType] === this._currentDataGrid);
-        if (this._dataGridMap[this._currentRecordType] !== this._currentDataGrid)
-            return;
-
-        var isScrolledToLastRow = this._currentDataGrid.isScrolledToLastRow();
-
-        // If the data grid has a timeline calculator, pass through all the pending records first
-        // to update the timeline bounds. If the bounds change we need to refresh all nodes
-        // in the data grid, otherwise we can just proceed and update the pending records.
-        var wasBoundsChange = this._updateCalculatorBoundsForPendingRecordsAndEventMarkers();
-        this._updatePendingRecordsWithNewBounds(wasBoundsChange);
-
-        this._updateOffscreenRows();
-
-        this._currentDataGrid.update();
-        if (isScrolledToLastRow)
-            this._currentDataGrid.scrollToLastRow();
-    },
-    
-    _updateCalculatorBoundsForPendingRecordsAndEventMarkers: function()
-    {
-        var currentDataGrid = this._currentDataGrid;
-        if (!currentDataGrid.currentCalculator)
-            return false;
-
-        var wasBoundsChange = false;
-
-        var pendingRecords = this._pendingRecords[this._currentRecordType];
-        if (pendingRecords) {
-            for (var i = 0; i < pendingRecords.length; ++i) {
-                if (currentDataGrid.updateCalculatorBoundariesWithRecord(pendingRecords[i]))
-                    wasBoundsChange = true;
-            }
-        }
-
-        var pendingRefreshGridNodes = this._pendingRefreshGridNodes[this._currentRecordType];
-        if (pendingRefreshGridNodes) {
-            for (var i = 0; i < pendingRefreshGridNodes.length; ++i) {
-                if (currentDataGrid.updateCalculatorBoundariesWithDataGridNode(pendingRefreshGridNodes[i]))
-                    wasBoundsChange = true;
-            }
-        }
-
-        var pendingEventMarkers = this._pendingEventMarkers[this._currentRecordType];
-        if (pendingEventMarkers) {
-            delete this._pendingEventMarkers[this._currentRecordType];
-
-            for (var i = 0; i < pendingEventMarkers.length; ++i) {
-                if (currentDataGrid.updateCalculatorBoundariesWithEventMarker(pendingEventMarkers[i]))
-                    wasBoundsChange = true;
-            }
-        }
-
-        return wasBoundsChange;
-    },
-
-    _updatePendingRecordsWithNewBounds: function(refreshAllNodes)
-    {
-        var sortComparator = this._sortComparator.bind(this);
-
-        var pendingRecords = this._pendingRecords[this._currentRecordType];
-        if (pendingRecords) {
-            delete this._pendingRecords[this._currentRecordType];
-            pendingRecords = this._filterRecordsWithType(pendingRecords, this._currentRecordType);
-
-            for (var i = 0; i < pendingRecords.length; ++i) {
-                var dataGridNode = this._createDataGridNodeForRecord(pendingRecords[i]);
-                if (this._currentDataGrid.sortColumnIdentifier) {
-                    var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this._currentDataGrid.children, sortComparator);
-                    this._currentDataGrid.insertChild(dataGridNode, insertionIndex);
-                } else
-                    this._currentDataGrid.appendChild(dataGridNode);
-            }
-        }
-
-        var pendingRefreshGridNodes = refreshAllNodes ? this._currentDataGrid.children.slice() : this._pendingRefreshGridNodes[this._currentRecordType];
-        if (pendingRefreshGridNodes) {
-            delete this._pendingRefreshGridNodes[this._currentRecordType];
-
-            var selectedNode = this._currentDataGrid.selectedNode;
-
-            for (var i = 0; i < pendingRefreshGridNodes.length; ++i) {
-                var dataGridNode = pendingRefreshGridNodes[i];
-                delete dataGridNode._pendingRefresh;
-                dataGridNode.refresh();
-
-                if (!this._currentDataGrid.sortColumnIdentifier)
-                    continue;
-
-                if (dataGridNode === selectedNode)
-                    this._ignoreSelectionEvent = true;
-
-                // Remove the data grid node so we can find the right sorted location to reinsert it. We need to
-                // remove it first so insertionIndexForObjectInListSortedByFunction does not return the current index.
-                this._currentDataGrid.removeChild(dataGridNode);
-
-                var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this._currentDataGrid.children, sortComparator);
-                this._currentDataGrid.insertChild(dataGridNode, insertionIndex);
-
-                if (dataGridNode === selectedNode) {
-                    selectedNode.revealAndSelect();
-                    delete this._ignoreSelectionEvent;
-                }
-            }
-        }
-    },
-
-    _updateOffscreenRows: function()
-    {
-        var dataTableBody = this._currentDataGrid.dataTableBody;
-        var rows = dataTableBody.children;
-        var recordsCount = rows.length;
-        if (recordsCount < 2)
-            return;  // Filler row only.
-
-        const overflowPadding = 100;
-        var visibleTop = this._currentDataGrid.scrollContainer.scrollTop - overflowPadding;
-        var visibleBottom = visibleTop + this._currentDataGrid.scrollContainer.offsetHeight + overflowPadding;
-
-        var rowHeight = 0;
-
-        // Filler is at recordsCount - 1.
-        for (var i = 0; i < recordsCount - 1; ++i) {
-            var row = rows[i];
-            if (!rowHeight)
-                rowHeight = row.offsetHeight;
-
-            var rowIsVisible = (i * rowHeight) < visibleBottom && ((i + 1) * rowHeight) > visibleTop;
-            if (rowIsVisible !== row.rowIsVisible) {
-                if (rowIsVisible)
-                    row.classList.remove(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
-                else
-                    row.classList.add(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
-                row.rowIsVisible = rowIsVisible;
-            }
-        }
-    },
-
-    _sortCurrentDataGrid: function()
-    {
-        console.assert(this._currentDataGrid);
-        if (!this._currentDataGrid)
-            return;
-
-        var sortColumnIdentifier = this._currentDataGrid.sortColumnIdentifier;
-        if (!sortColumnIdentifier)
-            return;
-
-        var selectedNode = this._currentDataGrid.selectedNode;
-        this._ignoreSelectionEvent = true;
-
-        var nodes = this._currentDataGrid.children.slice();
-        nodes.sort(this._sortComparator.bind(this));
-
-        this._currentDataGrid.removeChildren();
-        for (var i = 0; i < nodes.length; ++i)
-            this._currentDataGrid.appendChild(nodes[i]);
-
-        if (selectedNode)
-            selectedNode.revealAndSelect();
-
-        delete this._ignoreSelectionEvent;
-
-        this._updateOffscreenRows();
-    },
-
-    _sortComparator: function(node1, node2)
-    {
-        var sortColumnIdentifier = this._currentDataGrid.sortColumnIdentifier;
-        if (!sortColumnIdentifier)
-            return 0;
-
-        var sortDirection = this._currentDataGrid.sortOrder === "ascending" ? 1 : -1;
-
-        var value1 = node1.data[sortColumnIdentifier];
-        var value2 = node2.data[sortColumnIdentifier];
-
-        if (typeof value1 === "number" && typeof value2 === "number") {
-            if (isNaN(value1) && isNaN(value2))
-                return 0;
-            if (isNaN(value1))
-                return sortDirection * -1;
-            if (isNaN(value2))
-                return sortDirection * 1;
-            return (value1 - value2) * sortDirection;
-        }
-
-        if (typeof value1 === "string" && typeof value2 === "string")
-            return value1.localeCompare(value2) * sortDirection;
-
-        if (value1 instanceof WebInspector.CallFrame || value2 instanceof WebInspector.CallFrame) {
-            // Sort by function name if available, then fall back to the source code object.
-            value1 = value1 && value1.functionName ? value1.functionName : (value1 && value1.sourceCodeLocation ? value1.sourceCodeLocation.sourceCode : "");
-            value2 = value2 && value2.functionName ? value2.functionName : (value2 && value2.sourceCodeLocation ? value2.sourceCodeLocation.sourceCode : "");
-        }
-
-        if (value1 instanceof WebInspector.SourceCode || value2 instanceof WebInspector.SourceCode) {
-            value1 = value1 ? value1.displayName || "" : "";
-            value2 = value2 ? value2.displayName || "" : "";
-        }
-
-        // For everything else (mostly booleans).
-        return (value1 < value2 ? -1 : (value1 > value2 ? 1 : 0)) * sortDirection;
-    },
-
-    _createDataGridNodeForRecord: function(record)
-    {
-        var baseStartTime = WebInspector.timelineManager.records[0].startTime;
-
-        switch (record.type) {
-        case WebInspector.TimelineRecord.Type.Network:
-            return new WebInspector.ResourceTimelineDataGridNode(record);
-        case WebInspector.TimelineRecord.Type.Layout:
-            return new WebInspector.LayoutTimelineDataGridNode(record, baseStartTime);
-        case WebInspector.TimelineRecord.Type.Script:
-            return new WebInspector.ScriptTimelineDataGridNode(record, baseStartTime);
-        }
-
-        console.error("Unknown record type: " + record.type);
-        return null;
-    },
-
-    _scheduleGridNodeForRefresh: function(event)
-    {
-        var gridNode = event.target;
-        var record = gridNode.record;
-
-        if (gridNode._pendingRefresh)
-            return;
-        gridNode._pendingRefresh = true;
-
-        if (!this._pendingRefreshGridNodes[record.type])
-            this._pendingRefreshGridNodes[record.type] = [];
-        this._pendingRefreshGridNodes[record.type].push(gridNode);
-
-        this._updatePendingRecordsSoon();
-    },
-
-    _makeColumnScopeBar: function(prefix, dictionary)
-    {
-        prefix = "timeline-" + prefix + "-data-grid-";
-
-        var keys = Object.keys(dictionary).filter(function(key) {
-            return typeof dictionary[key] === "string" || dictionary[key] instanceof String;
-        });
-
-        var scopeBarItems = keys.map(function(key) {
-            var value = dictionary[key];
-            var id = prefix + value;
-            var label = dictionary.displayName(value, true);
-            var item = new WebInspector.ScopeBarItem(id, label);
-            item.value = value;
-            return item;
-        });
-
-        scopeBarItems.unshift(new WebInspector.ScopeBarItem(prefix + "type-all", WebInspector.UIString("All"), true));
-        
-        return new WebInspector.ScopeBar(prefix + "scope-bar", scopeBarItems, scopeBarItems[0]);
-    },
-
-    _dataGridFiltersDidChange: function(event)
-    {
-        var dataGrid = event.target;
-        if (this._currentDataGrid === dataGrid)
-            this._refreshAllRecordsForCurrentDataGrid();
-
-        this._timelineOverview.update();
-    },
-
-    _refreshAllRecordsForCurrentDataGrid: function()
-    {
-        var dataGrid = this._currentDataGrid;
-        var recordType = this._currentRecordType;
-        var records = this.timelineOverviewRecordsWithType(recordType);
-
-        var nodes = records.map(function(record) {
-            return this._createDataGridNodeForRecord(record);
-        }, this);
-        
-        dataGrid.removeChildren();
-        nodes.sort(this._sortComparator.bind(this)).forEach(function(node) {
-            dataGrid.appendChild(node);
-        });
-
-        delete this._pendingRefreshGridNodes[recordType];
-        
-        this._updateOffscreenRows();
-    },
-
-    _filterRecordsWithType: function(records, type)
-    {
-        var dataGrid = this._dataGridMap[type];
-        var identifiers = dataGrid.filterableColumns;
-
-        function filterableValueForRecordAndIdentifier(record, identifier)
-        {
-            switch (type) {
-            case WebInspector.TimelineRecord.Type.Network:
-                return record.resource[identifier];
-            case WebInspector.TimelineRecord.Type.Layout:
-                return record[identifier];
-            case WebInspector.TimelineRecord.Type.Script:
-                return record[identifier];
-            }
-        }
-
-        return records.filter(function(record) {
-            for (var i = 0; i < identifiers.length; i++) {
-                var identifier = identifiers[i];
-                var scopeBar = dataGrid.columns[identifier].scopeBar;
-                if (!scopeBar || scopeBar.defaultItem.selected)
-                    continue;
-                var value = filterableValueForRecordAndIdentifier(record, identifier);
-                var matchesFilter = scopeBar.selectedItems.some(function(scopeBarItem) {
-                    return (scopeBarItem.value === value);
-                });
-                if (!matchesFilter)
-                    return false;
-            }
-            return true;
-        });
-    }
-};
-
-WebInspector.TimelinesContentView.prototype.__proto__ = WebInspector.ContentView.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TimelinesObject.js b/Source/WebInspectorUI/UserInterface/TimelinesObject.js
deleted file mode 100644
index 1ea0931f3..000000000
--- a/Source/WebInspectorUI/UserInterface/TimelinesObject.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TimelinesObject = function()
-{
-};
-
-WebInspector.TimelinesObject.prototype = {
-    constructor: WebInspector.TimelinesObject
-};
-
-WebInspector.TimelinesObject.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ToggleButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/ToggleButtonNavigationItem.js
deleted file mode 100644
index fd44a6e7a..000000000
--- a/Source/WebInspectorUI/UserInterface/ToggleButtonNavigationItem.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ToggleButtonNavigationItem = function(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, suppressEmboss) {
-    WebInspector.ButtonNavigationItem.call(this, identifier, defaultToolTip, defaultImage, imageWidth, imageHeight, suppressEmboss);
-
-    this._toggled = false;
-    this._defaultImage = defaultImage;
-    this._alternateImage = alternateImage;
-    this._defaultToolTip = defaultToolTip;
-    this._alternateToolTip = alternateToolTip || defaultToolTip;
-};
-
-WebInspector.ToggleButtonNavigationItem.StyleClassName = "toggle";
-
-WebInspector.ToggleButtonNavigationItem.prototype = {
-    constructor: WebInspector.ToggleButtonNavigationItem,
-
-    // Public
-
-    get defaultToolTip()
-    {
-        return this._defaultToolTip;
-    },
-
-    get alternateToolTip()
-    {
-        return this._alternateToolTip;
-    },
-
-    set alternateToolTip(toolTip)
-    {
-        this._alternateToolTip = toolTip;
-
-        if (this._toggled)
-            this.toolTip = this._alternateToolTip;
-    },
-
-    get defaultImage()
-    {
-        return this._defaultImage;
-    },
-
-    get alternateImage()
-    {
-        return this._alternateImage;
-    },
-
-    set alternateImage(image)
-    {
-        this._alternateImage = image;
-
-        if (this._toggled)
-            this.image = this._alternateImage;
-    },
-
-    get toggled()
-    {
-        return this._toggled;
-    },
-
-    set toggled(flag)
-    {
-        flag = flag || false;
-
-        if (this._toggled === flag)
-            return;
-
-        this._toggled = flag;
-
-        if (this._toggled) {
-            this.toolTip = this._alternateToolTip;
-            this.image = this._alternateImage;
-        } else {
-            this.toolTip = this._defaultToolTip;
-            this.image = this._defaultImage;
-        }
-    },
-
-    // Private
-
-    _additionalClassNames: [WebInspector.ToggleButtonNavigationItem.StyleClassName, WebInspector.ButtonNavigationItem.StyleClassName],
-
-    // The image isn't cacheable because it dynamically changes and the same canvas identifier is reused.
-    // FIXME: We could try overriding _canvasIdentifier() to return different identifiers. If we did that
-    // we would also need to override generateStyleText() to use the different identifiers.
-    _imageCacheable: false
-};
-
-WebInspector.ToggleButtonNavigationItem.prototype.__proto__ = WebInspector.ButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/ToggleControlToolbarItem.js b/Source/WebInspectorUI/UserInterface/ToggleControlToolbarItem.js
deleted file mode 100644
index b9a3bdb8f..000000000
--- a/Source/WebInspectorUI/UserInterface/ToggleControlToolbarItem.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.ToggleControlToolbarItem = function(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight) {
-    WebInspector.ToggleButtonNavigationItem.call(this, identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, false);
-};
-
-WebInspector.ToggleControlToolbarItem.StyleClassName = "toggle";
-
-WebInspector.ToggleControlToolbarItem.prototype = {
-    constructor: WebInspector.ToggleControlToolbarItem,
-
-    // Private
-
-    _additionalClassNames: [WebInspector.ToggleControlToolbarItem.StyleClassName, WebInspector.ControlToolbarItem.StyleClassName]
-};
-
-WebInspector.ToggleControlToolbarItem.prototype.__proto__ = WebInspector.ToggleButtonNavigationItem.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Toolbar.css b/Source/WebInspectorUI/UserInterface/Toolbar.css
deleted file mode 100644
index f3f65674d..000000000
--- a/Source/WebInspectorUI/UserInterface/Toolbar.css
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-.toolbar {
-    display: -webkit-flex;
-
-    white-space: nowrap;
-    overflow: hidden;
-
-    border-bottom: 1px solid rgb(85, 85, 85);
-
-    outline: none;
-}
-
-.toolbar.icon-and-label-vertical {
-    height: 56px;
-}
-
-.toolbar.icon-and-label-vertical.small-size {
-    height: 48px;
-}
-
-.toolbar.icon-and-label-horizontal,
-.toolbar.icon-only {
-    height: 40px;
-}
-
-.toolbar.icon-and-label-horizontal.small-size,
-.toolbar.icon-only.small-size,
-.toolbar.label-only {
-    height: 32px;
-}
-
-body.docked .toolbar {
-    background-image: -webkit-linear-gradient(top, rgb(216, 216, 216), rgb(190, 190, 190));
-    box-shadow: inset rgba(255, 255, 255, 0.1) 0 1px 0, inset rgba(0, 0, 0, 0.02) 0 -1px 0;
-}
-
-body:not(.docked) .toolbar .item.button > .label {
- /* We need to disable sub-pixel antialiasing in the toolbar when not docked because the
-    toolbar is transparent and so is the WebView. */
-    -webkit-font-smoothing: antialiased;
-
- /* Compensate for the text not being sub-pixel antialiased by adding a small stroke. */
-    -webkit-text-stroke: 0.2px;
-}
-
-body.window-inactive .toolbar {
-    border-bottom: 1px solid rgb(128, 128, 128);
-}
-
-.toolbar .control-section {
-    display: -webkit-flex;
-
-    -webkit-flex-direction: column;
-    -webkit-align-items: center;
-    -webkit-justify-content: center;
-
-    padding-left: 6px;
-    padding-right: 6px;
-
-    min-width: -webkit-min-content;
-}
-
-.toolbar.icon-and-label-horizontal.small-size .control-section,
-.toolbar.icon-only.small-size .control-section,
-.toolbar.label-only .control-section {
-    -webkit-flex-direction: row;
-}
-
-.toolbar .item-section {
-    display: -webkit-flex;
-    min-width: -webkit-min-content;
-}
-
-.toolbar .item-section:not(.center) {
-    -webkit-flex: 1;
-}
-
-.toolbar .item-section.left {
-    -webkit-justify-content: flex-start;
-    margin-right: 12px;
-}
-
-.toolbar .item-section.center {
-    -webkit-flex: 2;
-    -webkit-justify-content: center;
-}
-
-.toolbar .item-section.right {
-    -webkit-justify-content: flex-end;
-    margin-left: 12px;
-    margin-right: 12px;
-}
-
-.toolbar .item {
-    display: -webkit-flex;
-    outline: none;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Toolbar.js b/Source/WebInspectorUI/UserInterface/Toolbar.js
deleted file mode 100644
index 963da3762..000000000
--- a/Source/WebInspectorUI/UserInterface/Toolbar.js
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.Toolbar = function(element, navigationItems) {
-    WebInspector.NavigationBar.call(this, element, navigationItems, "toolbar");
-
-    this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
-    this.sizeMode = WebInspector.Toolbar.SizeMode.Normal;
-
-    this._controlSectionElement = document.createElement("div");
-    this._controlSectionElement.className = WebInspector.Toolbar.ControlSectionStyleClassName;
-    this._element.appendChild(this._controlSectionElement);
-
-    this._leftSectionElement = document.createElement("div");
-    this._leftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.LeftItemSectionStyleClassName;
-    this._element.appendChild(this._leftSectionElement);
-
-    this._centerSectionElement = document.createElement("div");
-    this._centerSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterItemSectionStyleClassName;
-    this._element.appendChild(this._centerSectionElement);
-
-    this._rightSectionElement = document.createElement("div");
-    this._rightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.RightItemSectionStyleClassName;
-    this._element.appendChild(this._rightSectionElement);
-
-    this._element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
-};
-
-WebInspector.Object.addConstructorFunctions(WebInspector.Toolbar);
-
-WebInspector.Toolbar.StyleClassName = "toolbar";
-WebInspector.Toolbar.ControlSectionStyleClassName = "control-section";
-WebInspector.Toolbar.ItemSectionStyleClassName = "item-section";
-WebInspector.Toolbar.LeftItemSectionStyleClassName = "left";
-WebInspector.Toolbar.CenterItemSectionStyleClassName = "center";
-WebInspector.Toolbar.RightItemSectionStyleClassName = "right";
-WebInspector.Toolbar.TotalSectionMargins = 12 * 3;
-
-WebInspector.Toolbar.Event = {
-    DisplayModeDidChange: "toolbar-display-mode-did-change",
-    SizeModeDidChange: "toolbar-size-mode-did-change"
-};
-
-WebInspector.Toolbar.Section = {
-    Control: "control",
-    Left: "left",
-    Center: "center",
-    Right: "right"
-};
-
-WebInspector.Toolbar.DisplayMode = {
-    IconAndLabelVertical: "icon-and-label-vertical",
-    IconAndLabelHorizontal: "icon-and-label-horizontal",
-    IconOnly: "icon-only",
-    LabelOnly: "label-only"
-};
-
-WebInspector.Toolbar.SizeMode = {
-    Normal: "normal-size",
-    Small: "small-size"
-};
-
-WebInspector.Toolbar.prototype = {
-    constructor: WebInspector.Toolbar,
-
-    // Public
-
-    get displayMode()
-    {
-        return this._displayMode;
-    },
-
-    set displayMode(mode)
-    {
-        if (mode === this._displayMode)
-            return;
-
-        if (this._displayMode)
-            this._element.classList.remove(this._displayMode);
-
-        // Revert the forced icon-only mode if it was applied.
-        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal)
-            this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
-
-        this._displayMode = mode;
-
-        this._element.classList.add(mode);
-
-        this.updateLayout();
-
-        this.dispatchEventToListeners(WebInspector.Toolbar.Event.DisplayModeDidChange);
-    },
-
-    get sizeMode()
-    {
-        return this._sizeMode;
-    },
-
-    set sizeMode(mode)
-    {
-        if (mode === this._sizeMode)
-            return;
-
-        if (this._sizeMode)
-            this._element.classList.remove(this._sizeMode);
-
-        this._sizeMode = mode;
-
-        this._element.classList.add(mode);
-
-        this.updateLayout();
-
-        this.dispatchEventToListeners(WebInspector.Toolbar.Event.SizeModeDidChange);
-    },
-
-    customUpdateLayout: function()
-    {
-        // Bail early if our sections are not created yet. This means we are being called during construction.
-        if (!this._leftSectionElement || !this._centerSectionElement || !this._rightSectionElement)
-            return;
-
-        // Remove the collapsed style class to test if the items can fit at full width.
-        this._element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
-
-        // Revert the forced icon-only mode if it was applied.
-        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal) {
-            this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
-            this._element.classList.add(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
-        }
-
-        function isOverflowingToolbar()
-        {
-            var controlSectionWidth = this._controlSectionElement.offsetWidth;
-            var leftSectionWidth = this._leftSectionElement.offsetWidth;
-            var rightSectionWidth = this._rightSectionElement.offsetWidth;
-            var centerSectionWidth = this._centerSectionElement.offsetWidth;
-
-            // Add one to the actual toolbar width to allow some slop. This wasn't needed when sub-pixel layout was on,
-            // but that was disabled in: http://webkit.org/b/149209
-            var toolbarWidth = this.element.offsetWidth + 1;
-
-            return controlSectionWidth + leftSectionWidth + centerSectionWidth + rightSectionWidth + WebInspector.Toolbar.TotalSectionMargins > toolbarWidth;
-        }
-
-        // Only the horizontal display mode supports collapsing labels.
-        // If any sections are overflowing the toolbar then force the display mode to be icon only.
-        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal && isOverflowingToolbar.call(this)) {
-            this._element.classList.remove(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
-            this._element.classList.add(WebInspector.Toolbar.DisplayMode.IconOnly);
-        }
-
-        if (!isOverflowingToolbar.call(this))
-            return;
-
-        this._element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
-    },
-
-    addToolbarItem: function(toolbarItem, sectionIdentifier)
-    {
-        var sectionElement;
-
-        switch (sectionIdentifier) {
-        case WebInspector.Toolbar.Section.Control:
-            sectionElement = this._controlSectionElement;
-            break;
-
-        case WebInspector.Toolbar.Section.Left:
-            sectionElement = this._leftSectionElement;
-            break;
-
-        default:
-        case WebInspector.Toolbar.Section.Center:
-            sectionElement = this._centerSectionElement;
-            break;
-
-        case WebInspector.Toolbar.Section.Right:
-            sectionElement = this._rightSectionElement;
-            break;
-        }
-
-        console.assert(sectionElement);
-
-        this.addNavigationItem(toolbarItem, sectionElement);
-    },
-
-    // Private
-
-    _handleContextMenuEvent: function(event)
-    {
-        var contextMenu = new WebInspector.ContextMenu(event);
-
-        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Vertical)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelVertical), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
-        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Horizontal)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
-        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.IconOnly);
-        contextMenu.appendCheckboxItem(WebInspector.UIString("Text Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.LabelOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.LabelOnly);
-
-        if (this._displayMode !== WebInspector.Toolbar.DisplayMode.LabelOnly) {
-            contextMenu.appendSeparator();
-            contextMenu.appendCheckboxItem(WebInspector.UIString("Small Icons"), this._toggleSmallIcons.bind(this), this._sizeMode === WebInspector.Toolbar.SizeMode.Small);
-        }
-
-        contextMenu.show();
-    },
-
-    _changeDisplayMode: function(displayMode)
-    {
-        this.displayMode = displayMode;
-    },
-
-    _toggleSmallIcons: function()
-    {
-        this.sizeMode = this._sizeMode === WebInspector.Toolbar.SizeMode.Normal ? WebInspector.Toolbar.SizeMode.Small : WebInspector.Toolbar.SizeMode.Normal;
-    }
-};
-
-WebInspector.Toolbar.prototype.__proto__ = WebInspector.NavigationBar.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TopDownProfileDataGridTree.js b/Source/WebInspectorUI/UserInterface/TopDownProfileDataGridTree.js
deleted file mode 100644
index bfcc25eee..000000000
--- a/Source/WebInspectorUI/UserInterface/TopDownProfileDataGridTree.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/*
- * Copyright (C) 2009 280 North Inc. All Rights Reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
- * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
- * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
- * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
- * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
- * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-WebInspector.TopDownProfileDataGridNode = function(/*ProfileView*/ profileView, /*ProfileNode*/ profileNode, /*TopDownProfileDataGridTree*/ owningTree)
-{
-    var hasChildren = (profileNode.children && profileNode.children.length);
-
-    WebInspector.ProfileDataGridNode.call(this, profileView, profileNode, owningTree, hasChildren);
-
-    this._remainingChildren = profileNode.children;
-}
-
-WebInspector.TopDownProfileDataGridNode.prototype = {
-    _sharedPopulate: function()
-    {
-        var children = this._remainingChildren;
-        var childrenLength = children.length;
-
-        for (var i = 0; i < childrenLength; ++i)
-            this.appendChild(new WebInspector.TopDownProfileDataGridNode(this.profileView, children[i], this.tree));
-
-        this._remainingChildren = null;
-    },
-
-    _exclude: function(aCallUID)
-    {
-        if (this._remainingChildren)
-            this._populate();
-
-        this._save();
-
-        var children = this.children;
-        var index = this.children.length;
-
-        while (index--)
-            children[index]._exclude(aCallUID);
-
-        var child = this.childrenByCallUID[aCallUID];
-
-        if (child)
-            this._merge(child, true);
-    }
-}
-
-WebInspector.TopDownProfileDataGridNode.prototype.__proto__ = WebInspector.ProfileDataGridNode.prototype;
-
-WebInspector.TopDownProfileDataGridTree = function(/*ProfileView*/ profileView, /*ProfileNode*/ profileNode)
-{
-    WebInspector.ProfileDataGridTree.call(this, profileView, profileNode);
-
-    this._remainingChildren = profileNode.children;
-
-    WebInspector.TopDownProfileDataGridNode.prototype._populate.call(this);
-}
-
-WebInspector.TopDownProfileDataGridTree.prototype = {
-    focus: function(/*ProfileDataGridNode*/ profileDataGrideNode)
-    {
-        if (!profileDataGrideNode)
-            return;
-
-        this._save();
-        profileDataGrideNode.savePosition();
-
-        this.children = [profileDataGrideNode];
-        this.totalTime = profileDataGrideNode.totalTime;
-    },
-
-    exclude: function(/*ProfileDataGridNode*/ profileDataGrideNode)
-    {
-        if (!profileDataGrideNode)
-            return;
-
-        this._save();
-
-        var excludedCallUID = profileDataGrideNode.callUID;
-
-        WebInspector.TopDownProfileDataGridNode.prototype._exclude.call(this, excludedCallUID);
-
-        if (this.lastComparator)
-            this.sort(this.lastComparator, true);
-    },
-
-    restore: function()
-    {
-        if (!this._savedChildren)
-            return;
-
-        this.children[0].restorePosition();
-
-        WebInspector.ProfileDataGridTree.prototype.restore.call(this);
-    },
-
-    _merge: WebInspector.TopDownProfileDataGridNode.prototype._merge,
-
-    _sharedPopulate: WebInspector.TopDownProfileDataGridNode.prototype._sharedPopulate
-}
-
-WebInspector.TopDownProfileDataGridTree.prototype.__proto__ = WebInspector.ProfileDataGridTree.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/TreeOutline.js b/Source/WebInspectorUI/UserInterface/TreeOutline.js
deleted file mode 100644
index 048cd5b03..000000000
--- a/Source/WebInspectorUI/UserInterface/TreeOutline.js
+++ /dev/null
@@ -1,1087 +0,0 @@
-/*
- * Copyright (C) 2007, 2013 Apple Inc.  All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- *
- * 1.  Redistributions of source code must retain the above copyright
- *     notice, this list of conditions and the following disclaimer.
- * 2.  Redistributions in binary form must reproduce the above copyright
- *     notice, this list of conditions and the following disclaimer in the
- *     documentation and/or other materials provided with the distribution.
- * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
- *     its contributors may be used to endorse or promote products derived
- *     from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/**
- * @constructor
- */
-function TreeOutline(listNode)
-{
-    WebInspector.Object.call(this);
-
-    this.element = listNode;
-
-    /**
-     * @type {Array.<TreeElement>}
-     */
-    this.children = [];
-    this.selectedTreeElement = null;
-    this._childrenListNode = listNode;
-    this._childrenListNode.removeChildren();
-    this._knownTreeElements = [];
-    this._treeElementsExpandedState = [];
-    this.expandTreeElementsWhenArrowing = false;
-    this.allowsRepeatSelection = false;
-    this.root = true;
-    this.hasChildren = false;
-    this.expanded = true;
-    this.selected = false;
-    this.treeOutline = this;
-
-    this._childrenListNode.tabIndex = 0;
-    this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
-}
-
-TreeOutline._knownTreeElementNextIdentifier = 1;
-
-TreeOutline.prototype.appendChild = function(child)
-{
-    if (!child)
-        throw("child can't be undefined or null");
-
-    var lastChild = this.children[this.children.length - 1];
-    if (lastChild) {
-        lastChild.nextSibling = child;
-        child.previousSibling = lastChild;
-    } else {
-        child.previousSibling = null;
-        child.nextSibling = null;
-    }
-
-    var isFirstChild = !this.children.length;
-
-    this.children.push(child);
-    this.hasChildren = true;
-    child.parent = this;
-    child.treeOutline = this.treeOutline;
-    child.treeOutline._rememberTreeElement(child);
-
-    var current = child.children[0];
-    while (current) {
-        current.treeOutline = this.treeOutline;
-        current.treeOutline._rememberTreeElement(current);
-        current = current.traverseNextTreeElement(false, child, true);
-    }
-
-    if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
-        child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
-
-    if (!this._childrenListNode) {
-        this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
-        this._childrenListNode.parentTreeElement = this;
-        this._childrenListNode.classList.add("children");
-        if (this.hidden)
-            this._childrenListNode.classList.add("hidden");
-    }
-
-    child._attach();
-
-    if (this.treeOutline.onadd)
-        this.treeOutline.onadd(child);
-
-    if (isFirstChild && this.expanded)
-        this.expand();
-}
-
-TreeOutline.prototype.insertChild = function(child, index)
-{
-    if (!child)
-        throw("child can't be undefined or null");
-
-    var previousChild = (index > 0 ? this.children[index - 1] : null);
-    if (previousChild) {
-        previousChild.nextSibling = child;
-        child.previousSibling = previousChild;
-    } else {
-        child.previousSibling = null;
-    }
-
-    var nextChild = this.children[index];
-    if (nextChild) {
-        nextChild.previousSibling = child;
-        child.nextSibling = nextChild;
-    } else {
-        child.nextSibling = null;
-    }
-
-    var isFirstChild = !this.children.length;
-
-    this.children.splice(index, 0, child);
-    this.hasChildren = true;
-    child.parent = this;
-    child.treeOutline = this.treeOutline;
-    child.treeOutline._rememberTreeElement(child);
-
-    var current = child.children[0];
-    while (current) {
-        current.treeOutline = this.treeOutline;
-        current.treeOutline._rememberTreeElement(current);
-        current = current.traverseNextTreeElement(false, child, true);
-    }
-
-    if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
-        child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
-
-    if (!this._childrenListNode) {
-        this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
-        this._childrenListNode.parentTreeElement = this;
-        this._childrenListNode.classList.add("children");
-        if (this.hidden)
-            this._childrenListNode.classList.add("hidden");
-    }
-
-    child._attach();
-
-    if (this.treeOutline.onadd)
-        this.treeOutline.onadd(child);
-
-    if (isFirstChild && this.expanded)
-        this.expand();
-}
-
-TreeOutline.prototype.removeChildAtIndex = function(childIndex, suppressOnDeselect, suppressSelectSibling)
-{
-    if (childIndex < 0 || childIndex >= this.children.length)
-        throw("childIndex out of range");
-
-    var child = this.children[childIndex];
-    this.children.splice(childIndex, 1);
-
-    var parent = child.parent;
-    if (child.deselect(suppressOnDeselect)) {
-        if (child.previousSibling && !suppressSelectSibling)
-            child.previousSibling.select(true, false);
-        else if (child.nextSibling && !suppressSelectSibling)
-            child.nextSibling.select(true, false);
-        else if (!suppressSelectSibling)
-            parent.select(true, false);
-    }
-
-    if (child.previousSibling)
-        child.previousSibling.nextSibling = child.nextSibling;
-    if (child.nextSibling)
-        child.nextSibling.previousSibling = child.previousSibling;
-
-    if (child.treeOutline) {
-        child.treeOutline._forgetTreeElement(child);
-        child.treeOutline._forgetChildrenRecursive(child);
-    }
-
-    child._detach();
-    child.treeOutline = null;
-    child.parent = null;
-    child.nextSibling = null;
-    child.previousSibling = null;
-}
-
-TreeOutline.prototype.removeChild = function(child, suppressOnDeselect, suppressSelectSibling)
-{
-    if (!child)
-        throw("child can't be undefined or null");
-
-    var childIndex = this.children.indexOf(child);
-    if (childIndex === -1)
-        throw("child not found in this node's children");
-
-    this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
-}
-
-TreeOutline.prototype.removeChildren = function(suppressOnDeselect)
-{
-    for (var i = 0; i < this.children.length; ++i) {
-        var child = this.children[i];
-        child.deselect(suppressOnDeselect);
-
-        if (child.treeOutline) {
-            child.treeOutline._forgetTreeElement(child);
-            child.treeOutline._forgetChildrenRecursive(child);
-        }
-
-        child._detach();
-        child.treeOutline = null;
-        child.parent = null;
-        child.nextSibling = null;
-        child.previousSibling = null;
-    }
-
-    this.children = [];
-}
-
-TreeOutline.prototype.removeChildrenRecursive = function(suppressOnDeselect)
-{
-    var childrenToRemove = this.children;
-
-    var child = this.children[0];
-    while (child) {
-        if (child.children.length)
-            childrenToRemove = childrenToRemove.concat(child.children);
-        child = child.traverseNextTreeElement(false, this, true);
-    }
-
-    for (var i = 0; i < childrenToRemove.length; ++i) {
-        child = childrenToRemove[i];
-        child.deselect(suppressOnDeselect);
-        if (child.treeOutline)
-            child.treeOutline._forgetTreeElement(child);
-        child._detach();
-        child.children = [];
-        child.treeOutline = null;
-        child.parent = null;
-        child.nextSibling = null;
-        child.previousSibling = null;
-    }
-
-    this.children = [];
-}
-
-TreeOutline.prototype._rememberTreeElement = function(element)
-{
-    if (!this._knownTreeElements[element.identifier])
-        this._knownTreeElements[element.identifier] = [];
-
-    // check if the element is already known
-    var elements = this._knownTreeElements[element.identifier];
-    if (elements.indexOf(element) !== -1)
-        return;
-
-    // add the element
-    elements.push(element);
-}
-
-TreeOutline.prototype._forgetTreeElement = function(element)
-{
-    if (this._knownTreeElements[element.identifier])
-        this._knownTreeElements[element.identifier].remove(element, true);
-}
-
-TreeOutline.prototype._forgetChildrenRecursive = function(parentElement)
-{
-    var child = parentElement.children[0];
-    while (child) {
-        this._forgetTreeElement(child);
-        child = child.traverseNextTreeElement(false, parentElement, true);
-    }
-}
-
-TreeOutline.prototype.getCachedTreeElement = function(representedObject)
-{
-    if (!representedObject)
-        return null;
-
-    if ("__treeElementIdentifier" in representedObject) {
-        // If this representedObject has a tree element identifier, and it is a known TreeElement
-        // in our tree we can just return that tree element.
-        var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
-        if (elements) {
-            for (var i = 0; i < elements.length; ++i)
-                if (elements[i].representedObject === representedObject)
-                    return elements[i];
-        }
-    }
-    return null;
-}
-
-TreeOutline.prototype.findTreeElement = function(representedObject, isAncestor, getParent)
-{
-    if (!representedObject)
-        return null;
-
-    var cachedElement = this.getCachedTreeElement(representedObject);
-    if (cachedElement)
-        return cachedElement;
-
-    // The representedObject isn't known, so we start at the top of the tree and work down to find the first
-    // tree element that represents representedObject or one of its ancestors.
-    var item;
-    var found = false;
-    for (var i = 0; i < this.children.length; ++i) {
-        item = this.children[i];
-        if (item.representedObject === representedObject || isAncestor(item.representedObject, representedObject)) {
-            found = true;
-            break;
-        }
-    }
-
-    if (!found)
-        return null;
-
-    // Make sure the item that we found is connected to the root of the tree.
-    // Build up a list of representedObject's ancestors that aren't already in our tree.
-    var ancestors = [];
-    var currentObject = representedObject;
-    while (currentObject) {
-        ancestors.unshift(currentObject);
-        if (currentObject === item.representedObject)
-            break;
-        currentObject = getParent(currentObject);
-    }
-
-    // For each of those ancestors we populate them to fill in the tree.
-    for (var i = 0; i < ancestors.length; ++i) {
-        // Make sure we don't call findTreeElement with the same representedObject
-        // again, to prevent infinite recursion.
-        if (ancestors[i] === representedObject)
-            continue;
-        // FIXME: we could do something faster than findTreeElement since we will know the next
-        // ancestor exists in the tree.
-        item = this.findTreeElement(ancestors[i], isAncestor, getParent);
-        if (item)
-            item.onpopulate();
-    }
-
-    return this.getCachedTreeElement(representedObject);
-}
-
-TreeOutline.prototype._treeElementDidChange = function(treeElement)
-{
-    if (treeElement.treeOutline !== this)
-        return;
-
-    if (this.onchange)
-        this.onchange(treeElement);
-}
-
-TreeOutline.prototype.treeElementFromPoint = function(x, y)
-{
-    var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
-    if (!node)
-        return null;
-
-    var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
-    if (listNode)
-        return listNode.parentTreeElement || listNode.treeElement;
-    return null;
-}
-
-TreeOutline.prototype._treeKeyDown = function(event)
-{
-    if (event.target !== this._childrenListNode)
-        return;
-
-    if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
-        return;
-
-    var handled = false;
-    var nextSelectedElement;
-    if (event.keyIdentifier === "Up" && !event.altKey) {
-        nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
-        while (nextSelectedElement && !nextSelectedElement.selectable)
-            nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(!this.expandTreeElementsWhenArrowing);
-        handled = nextSelectedElement ? true : false;
-    } else if (event.keyIdentifier === "Down" && !event.altKey) {
-        nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
-        while (nextSelectedElement && !nextSelectedElement.selectable)
-            nextSelectedElement = nextSelectedElement.traverseNextTreeElement(!this.expandTreeElementsWhenArrowing);
-        handled = nextSelectedElement ? true : false;
-    } else if (event.keyIdentifier === "Left") {
-        if (this.selectedTreeElement.expanded) {
-            if (event.altKey)
-                this.selectedTreeElement.collapseRecursively();
-            else
-                this.selectedTreeElement.collapse();
-            handled = true;
-        } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
-            handled = true;
-            if (this.selectedTreeElement.parent.selectable) {
-                nextSelectedElement = this.selectedTreeElement.parent;
-                while (nextSelectedElement && !nextSelectedElement.selectable)
-                    nextSelectedElement = nextSelectedElement.parent;
-                handled = nextSelectedElement ? true : false;
-            } else if (this.selectedTreeElement.parent)
-                this.selectedTreeElement.parent.collapse();
-        }
-    } else if (event.keyIdentifier === "Right") {
-        if (!this.selectedTreeElement.revealed()) {
-            this.selectedTreeElement.reveal();
-            handled = true;
-        } else if (this.selectedTreeElement.hasChildren) {
-            handled = true;
-            if (this.selectedTreeElement.expanded) {
-                nextSelectedElement = this.selectedTreeElement.children[0];
-                while (nextSelectedElement && !nextSelectedElement.selectable)
-                    nextSelectedElement = nextSelectedElement.nextSibling;
-                handled = nextSelectedElement ? true : false;
-            } else {
-                if (event.altKey)
-                    this.selectedTreeElement.expandRecursively();
-                else
-                    this.selectedTreeElement.expand();
-            }
-        }
-    } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
-        if (this.selectedTreeElement.ondelete)
-            handled = this.selectedTreeElement.ondelete();
-        if (!handled && this.treeOutline.ondelete)
-            handled = this.treeOutline.ondelete(this.selectedTreeElement);
-    } else if (isEnterKey(event)) {
-        if (this.selectedTreeElement.onenter)
-            handled = this.selectedTreeElement.onenter();
-        if (!handled && this.treeOutline.onenter)
-            handled = this.treeOutline.onenter(this.selectedTreeElement);
-    } else if (event.keyIdentifier === "U+0020" /* Space */) {
-        if (this.selectedTreeElement.onspace)
-            handled = this.selectedTreeElement.onspace();
-        if (!handled && this.treeOutline.onspace)
-            handled = this.treeOutline.onspace(this.selectedTreeElement);
-    }
-
-    if (nextSelectedElement) {
-        nextSelectedElement.reveal();
-        nextSelectedElement.select(false, true);
-    }
-
-    if (handled) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-}
-
-TreeOutline.prototype.expand = function()
-{
-    // this is the root, do nothing
-}
-
-TreeOutline.prototype.collapse = function()
-{
-    // this is the root, do nothing
-}
-
-TreeOutline.prototype.revealed = function()
-{
-    return true;
-}
-
-TreeOutline.prototype.reveal = function()
-{
-    // this is the root, do nothing
-}
-
-TreeOutline.prototype.select = function()
-{
-    // this is the root, do nothing
-}
-
-/**
- * @param {boolean=} omitFocus
- */
-TreeOutline.prototype.revealAndSelect = function(omitFocus)
-{
-    // this is the root, do nothing
-}
-
-TreeOutline.prototype.__proto__ = WebInspector.Object.prototype;
-
-/**
- * @constructor
- * @param {Object=} representedObject
- * @param {boolean=} hasChildren
- */
-function TreeElement(title, representedObject, hasChildren)
-{
-    WebInspector.Object.call(this);
-
-    this._title = title;
-    this.representedObject = (representedObject || {});
-
-    if (this.representedObject.__treeElementIdentifier)
-        this.identifier = this.representedObject.__treeElementIdentifier;
-    else {
-        this.identifier = TreeOutline._knownTreeElementNextIdentifier++;
-        this.representedObject.__treeElementIdentifier = this.identifier;
-    }
-
-    this._hidden = false;
-    this._selectable = true;
-    this.expanded = false;
-    this.selected = false;
-    this.hasChildren = hasChildren;
-    this.children = [];
-    this.treeOutline = null;
-    this.parent = null;
-    this.previousSibling = null;
-    this.nextSibling = null;
-    this._listItemNode = null;
-}
-
-TreeElement.prototype = {
-    constructor: TreeElement,
-
-    arrowToggleWidth: 10,
-
-    get selectable() {
-        if (this._hidden)
-            return false;
-        return this._selectable;
-    },
-
-    set selectable(x) {
-        this._selectable = x;
-    },
-
-    get listItemElement() {
-        return this._listItemNode;
-    },
-
-    get childrenListElement() {
-        return this._childrenListNode;
-    },
-
-    get title() {
-        return this._title;
-    },
-
-    set title(x) {
-        this._title = x;
-        this._setListItemNodeContent();
-        this.didChange();
-    },
-
-    get titleHTML() {
-        return this._titleHTML;
-    },
-
-    set titleHTML(x) {
-        this._titleHTML = x;
-        this._setListItemNodeContent();
-        this.didChange();
-    },
-
-    get tooltip() {
-        return this._tooltip;
-    },
-
-    set tooltip(x) {
-        this._tooltip = x;
-        if (this._listItemNode)
-            this._listItemNode.title = x ? x : "";
-        this.didChange();
-    },
-
-    get hasChildren() {
-        return this._hasChildren;
-    },
-
-    set hasChildren(x) {
-        if (this._hasChildren === x)
-            return;
-
-        this._hasChildren = x;
-
-        if (!this._listItemNode)
-            return;
-
-        if (x)
-            this._listItemNode.classList.add("parent");
-        else {
-            this._listItemNode.classList.remove("parent");
-            this.collapse();
-        }
-
-        this.didChange();
-    },
-
-    get hidden() {
-        return this._hidden;
-    },
-
-    set hidden(x) {
-        if (this._hidden === x)
-            return;
-
-        this._hidden = x;
-
-        if (x) {
-            if (this._listItemNode)
-                this._listItemNode.classList.add("hidden");
-            if (this._childrenListNode)
-                this._childrenListNode.classList.add("hidden");
-        } else {
-            if (this._listItemNode)
-                this._listItemNode.classList.remove("hidden");
-            if (this._childrenListNode)
-                this._childrenListNode.classList.remove("hidden");
-        }
-    },
-
-    get shouldRefreshChildren() {
-        return this._shouldRefreshChildren;
-    },
-
-    set shouldRefreshChildren(x) {
-        this._shouldRefreshChildren = x;
-        if (x && this.expanded)
-            this.expand();
-    },
-
-    _fireDidChange: function()
-    {
-        delete this._didChangeTimeoutIdentifier;
-
-        if (this.treeOutline)
-            this.treeOutline._treeElementDidChange(this);
-    },
-
-    didChange: function()
-    {
-        if (!this.treeOutline)
-            return;
-
-        // Prevent telling the TreeOutline multiple times in a row by delaying it with a timeout.
-        if (!this._didChangeTimeoutIdentifier)
-            this._didChangeTimeoutIdentifier = setTimeout(this._fireDidChange.bind(this), 0);
-    },
-
-    _setListItemNodeContent: function()
-    {
-        if (!this._listItemNode)
-            return;
-
-        if (!this._titleHTML && !this._title)
-            this._listItemNode.removeChildren();
-        else if (typeof this._titleHTML === "string")
-            this._listItemNode.innerHTML = this._titleHTML;
-        else if (typeof this._title === "string")
-            this._listItemNode.textContent = this._title;
-        else {
-            this._listItemNode.removeChildren();
-            if (this._title.parentNode)
-                this._title.parentNode.removeChild(this._title);
-            this._listItemNode.appendChild(this._title);
-        }
-    }
-}
-
-TreeElement.prototype.appendChild = TreeOutline.prototype.appendChild;
-TreeElement.prototype.insertChild = TreeOutline.prototype.insertChild;
-TreeElement.prototype.removeChild = TreeOutline.prototype.removeChild;
-TreeElement.prototype.removeChildAtIndex = TreeOutline.prototype.removeChildAtIndex;
-TreeElement.prototype.removeChildren = TreeOutline.prototype.removeChildren;
-TreeElement.prototype.removeChildrenRecursive = TreeOutline.prototype.removeChildrenRecursive;
-
-TreeElement.prototype._attach = function()
-{
-    if (!this._listItemNode || this.parent._shouldRefreshChildren) {
-        if (this._listItemNode && this._listItemNode.parentNode)
-            this._listItemNode.parentNode.removeChild(this._listItemNode);
-
-        this._listItemNode = this.treeOutline._childrenListNode.ownerDocument.createElement("li");
-        this._listItemNode.treeElement = this;
-        this._setListItemNodeContent();
-        this._listItemNode.title = this._tooltip ? this._tooltip : "";
-
-        if (this.hidden)
-            this._listItemNode.classList.add("hidden");
-        if (this.hasChildren)
-            this._listItemNode.classList.add("parent");
-        if (this.expanded)
-            this._listItemNode.classList.add("expanded");
-        if (this.selected)
-            this._listItemNode.classList.add("selected");
-
-        this._listItemNode.addEventListener("mousedown", TreeElement.treeElementMouseDown, false);
-        this._listItemNode.addEventListener("click", TreeElement.treeElementToggled, false);
-        this._listItemNode.addEventListener("dblclick", TreeElement.treeElementDoubleClicked, false);
-
-        if (this.onattach)
-            this.onattach(this);
-    }
-
-    var nextSibling = null;
-    if (this.nextSibling && this.nextSibling._listItemNode && this.nextSibling._listItemNode.parentNode === this.parent._childrenListNode)
-        nextSibling = this.nextSibling._listItemNode;
-    this.parent._childrenListNode.insertBefore(this._listItemNode, nextSibling);
-    if (this._childrenListNode)
-        this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
-    if (this.selected)
-        this.select();
-    if (this.expanded)
-        this.expand();
-}
-
-TreeElement.prototype._detach = function()
-{
-    if (this.ondetach)
-        this.ondetach(this);
-    if (this._listItemNode && this._listItemNode.parentNode)
-        this._listItemNode.parentNode.removeChild(this._listItemNode);
-    if (this._childrenListNode && this._childrenListNode.parentNode)
-        this._childrenListNode.parentNode.removeChild(this._childrenListNode);
-}
-
-TreeElement.treeElementMouseDown = function(event)
-{
-    var element = event.currentTarget;
-    if (!element || !element.treeElement || !element.treeElement.selectable)
-        return;
-
-    if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
-        event.preventDefault();
-        return;
-    }
-
-    element.treeElement.selectOnMouseDown(event);
-}
-
-TreeElement.treeElementToggled = function(event)
-{
-    var element = event.currentTarget;
-    if (!element || !element.treeElement)
-        return;
-
-    var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable;
-    var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
-    if (!toggleOnClick && !isInTriangle)
-        return;
-
-    if (element.treeElement.expanded) {
-        if (event.altKey)
-            element.treeElement.collapseRecursively();
-        else
-            element.treeElement.collapse();
-    } else {
-        if (event.altKey)
-            element.treeElement.expandRecursively();
-        else
-            element.treeElement.expand();
-    }
-    event.stopPropagation();
-}
-
-TreeElement.treeElementDoubleClicked = function(event)
-{
-    var element = event.currentTarget;
-    if (!element || !element.treeElement)
-        return;
-
-    if (element.treeElement.isEventWithinDisclosureTriangle(event))
-        return;
-
-    if (element.treeElement.ondblclick)
-        element.treeElement.ondblclick.call(element.treeElement, event);
-    else if (element.treeElement.hasChildren && !element.treeElement.expanded)
-        element.treeElement.expand();
-}
-
-TreeElement.prototype.collapse = function()
-{
-    if (this._listItemNode)
-        this._listItemNode.classList.remove("expanded");
-    if (this._childrenListNode)
-        this._childrenListNode.classList.remove("expanded");
-
-    this.expanded = false;
-    if (this.treeOutline)
-        this.treeOutline._treeElementsExpandedState[this.identifier] = false;
-
-    if (this.oncollapse)
-        this.oncollapse(this);
-
-    if (this.treeOutline && this.treeOutline.oncollapse)
-        this.treeOutline.oncollapse(this);
-}
-
-TreeElement.prototype.collapseRecursively = function()
-{
-    var item = this;
-    while (item) {
-        if (item.expanded)
-            item.collapse();
-        item = item.traverseNextTreeElement(false, this, true);
-    }
-}
-
-TreeElement.prototype.expand = function()
-{
-    if (this.expanded && !this._shouldRefreshChildren && this._childrenListNode)
-        return;
-
-    // Set this before onpopulate. Since onpopulate can add elements and call onadd, this makes
-    // sure the expanded flag is true before calling those functions. This prevents the possibility
-    // of an infinite loop if onpopulate or onadd were to call expand.
-
-    this.expanded = true;
-    if (this.treeOutline)
-        this.treeOutline._treeElementsExpandedState[this.identifier] = true;
-
-    // If there are no children, return. We will be expanded once we have children.
-    if (!this.hasChildren)
-        return;
-
-    if (this.treeOutline && (!this._childrenListNode || this._shouldRefreshChildren)) {
-        if (this._childrenListNode && this._childrenListNode.parentNode)
-            this._childrenListNode.parentNode.removeChild(this._childrenListNode);
-
-        this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
-        this._childrenListNode.parentTreeElement = this;
-        this._childrenListNode.classList.add("children");
-
-        if (this.hidden)
-            this._childrenListNode.classList.add("hidden");
-
-        this.onpopulate();
-
-        for (var i = 0; i < this.children.length; ++i)
-            this.children[i]._attach();
-
-        delete this._shouldRefreshChildren;
-    }
-
-    if (this._listItemNode) {
-        this._listItemNode.classList.add("expanded");
-        if (this._childrenListNode && this._childrenListNode.parentNode != this._listItemNode.parentNode)
-            this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
-    }
-
-    if (this._childrenListNode)
-        this._childrenListNode.classList.add("expanded");
-
-    if (this.onexpand)
-        this.onexpand(this);
-
-    if (this.treeOutline && this.treeOutline.onexpand)
-        this.treeOutline.onexpand(this);
-}
-
-TreeElement.prototype.expandRecursively = function(maxDepth)
-{
-    var item = this;
-    var info = {};
-    var depth = 0;
-
-    // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
-    // in some case can be infinite, since JavaScript objects can hold circular references.
-    // So default to a recursion cap of 3 levels, since that gives fairly good results.
-    if (typeof maxDepth === "undefined" || typeof maxDepth === "null")
-        maxDepth = 3;
-
-    while (item) {
-        if (depth < maxDepth)
-            item.expand();
-        item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
-        depth += info.depthChange;
-    }
-}
-
-TreeElement.prototype.hasAncestor = function(ancestor) {
-    if (!ancestor)
-        return false;
-
-    var currentNode = this.parent;
-    while (currentNode) {
-        if (ancestor === currentNode)
-            return true;
-        currentNode = currentNode.parent;
-    }
-
-    return false;
-}
-
-TreeElement.prototype.reveal = function()
-{
-    var currentAncestor = this.parent;
-    while (currentAncestor && !currentAncestor.root) {
-        if (!currentAncestor.expanded)
-            currentAncestor.expand();
-        currentAncestor = currentAncestor.parent;
-    }
-
-    if (this.onreveal)
-        this.onreveal(this);
-}
-
-TreeElement.prototype.revealed = function()
-{
-    var currentAncestor = this.parent;
-    while (currentAncestor && !currentAncestor.root) {
-        if (!currentAncestor.expanded)
-            return false;
-        currentAncestor = currentAncestor.parent;
-    }
-
-    return true;
-}
-
-TreeElement.prototype.selectOnMouseDown = function(event)
-{
-    this.select(false, true);
-}
-
-/**
- * @param {boolean=} omitFocus
- * @param {boolean=} selectedByUser
- */
-TreeElement.prototype.select = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
-{
-    if (!this.treeOutline || !this.selectable)
-        return;
-
-    if (this.selected && !this.treeOutline.allowsRepeatSelection)
-        return;
-
-    if (!omitFocus)
-        this.treeOutline._childrenListNode.focus();
-
-    // Focusing on another node may detach "this" from tree.
-    if (!this.treeOutline)
-        return;
-
-    this.treeOutline.processingSelectionChange = true;
-
-    if (!this.selected) {
-        if (this.treeOutline.selectedTreeElement)
-            this.treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
-
-        this.selected = true;
-        this.treeOutline.selectedTreeElement = this;
-
-        if (this._listItemNode)
-            this._listItemNode.classList.add("selected");
-    }
-
-    if (this.onselect && !suppressOnSelect)
-        this.onselect(this, selectedByUser);
-
-    if (this.treeOutline.onselect && !suppressOnSelect)
-        this.treeOutline.onselect(this, selectedByUser);
-
-    delete this.treeOutline.processingSelectionChange;
-}
-
-/**
- * @param {boolean=} omitFocus
- */
-TreeElement.prototype.revealAndSelect = function(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
-{
-    this.reveal();
-    this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
-}
-
-/**
- * @param {boolean=} suppressOnDeselect
- */
-TreeElement.prototype.deselect = function(suppressOnDeselect)
-{
-    if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
-        return false;
-
-    this.selected = false;
-    this.treeOutline.selectedTreeElement = null;
-
-    if (this._listItemNode)
-        this._listItemNode.classList.remove("selected");
-
-    if (this.ondeselect && !suppressOnDeselect)
-        this.ondeselect(this);
-
-    if (this.treeOutline.ondeselect && !suppressOnDeselect)
-        this.treeOutline.ondeselect(this);
-
-    return true;
-}
-
-TreeElement.prototype.onpopulate = function()
-{
-    // Overriden by subclasses.
-}
-
-/**
- * @param {boolean} skipUnrevealed
- * @param {(TreeOutline|TreeElement)=} stayWithin
- * @param {boolean=} dontPopulate
- * @param {Object=} info
- * @return {TreeElement}
- */
-TreeElement.prototype.traverseNextTreeElement = function(skipUnrevealed, stayWithin, dontPopulate, info)
-{
-    if (!dontPopulate && this.hasChildren)
-        this.onpopulate.call(this); // FIXME: This shouldn't need to use call, but this is working around a JSC bug. https://webkit.org/b/74811
-
-    if (info)
-        info.depthChange = 0;
-
-    var element = skipUnrevealed ? (this.revealed() ? this.children[0] : null) : this.children[0];
-    if (element && (!skipUnrevealed || (skipUnrevealed && this.expanded))) {
-        if (info)
-            info.depthChange = 1;
-        return element;
-    }
-
-    if (this === stayWithin)
-        return null;
-
-    element = skipUnrevealed ? (this.revealed() ? this.nextSibling : null) : this.nextSibling;
-    if (element)
-        return element;
-
-    element = this;
-    while (element && !element.root && !(skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling) && element.parent !== stayWithin) {
-        if (info)
-            info.depthChange -= 1;
-        element = element.parent;
-    }
-
-    if (!element)
-        return null;
-
-    return (skipUnrevealed ? (element.revealed() ? element.nextSibling : null) : element.nextSibling);
-}
-
-/**
- * @param {boolean} skipUnrevealed
- * @param {boolean=} dontPopulate
- * @return {TreeElement}
- */
-TreeElement.prototype.traversePreviousTreeElement = function(skipUnrevealed, dontPopulate)
-{
-    var element = skipUnrevealed ? (this.revealed() ? this.previousSibling : null) : this.previousSibling;
-    if (!dontPopulate && element && element.hasChildren)
-        element.onpopulate();
-
-    while (element && (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1])) {
-        if (!dontPopulate && element.hasChildren)
-            element.onpopulate();
-        element = (skipUnrevealed ? (element.revealed() && element.expanded ? element.children[element.children.length - 1] : null) : element.children[element.children.length - 1]);
-    }
-
-    if (element)
-        return element;
-
-    if (!this.parent || this.parent.root)
-        return null;
-
-    return this.parent;
-}
-
-TreeElement.prototype.isEventWithinDisclosureTriangle = function(event)
-{
-    // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446) 
-    var computedLeftPadding = window.getComputedStyle(this._listItemNode).getPropertyCSSValue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX);
-    var left = this._listItemNode.totalOffsetLeft + computedLeftPadding;
-    return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
-}
-
-TreeElement.prototype.__proto__ = WebInspector.Object.prototype;
diff --git a/Source/WebInspectorUI/UserInterface/Utilities.js b/Source/WebInspectorUI/UserInterface/Utilities.js
deleted file mode 100644
index 322e260f5..000000000
--- a/Source/WebInspectorUI/UserInterface/Utilities.js
+++ /dev/null
@@ -1,1192 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-if (!("bind" in Function.prototype)) {
-    Object.defineProperty(Function.prototype, "bind",
-    {
-        value: function(thisObject)
-        {
-            var func = this;
-            var args = Array.prototype.slice.call(arguments, 1);
-            return function bound()
-            {
-                return func.apply(thisObject, args.concat(Array.prototype.slice.call(arguments, 0)));
-            };
-        }
-    });
-}
-
-Object.defineProperty(Object, "shallowCopy",
-{
-    value: function(object)
-    {
-        // Make a new object and copy all the key/values. The values are not copied.
-        var copy = {};
-        var keys = Object.keys(object);
-        for (var i = 0; i < keys.length; ++i)
-            copy[keys[i]] = object[keys[i]];
-        return copy;
-    }
-});
-
-Object.defineProperty(Object, "shallowEqual",
-{
-    value: function(a, b)
-    {
-        // Checks if two objects have the same top-level properties.
-
-        // Check for strict equality in case they are the same object.
-        if (a === b)
-            return true;
-
-        // Only objects can proceed. null is an object, but Object.keys throws for null.
-        if (typeof a !== "object" || typeof b !== "object" || a === null || b === null)
-            return false;
-
-        var aKeys = Object.keys(a);
-        var bKeys = Object.keys(b);
-
-        // Check that each object has the same number of keys.
-        if (aKeys.length !== bKeys.length)
-            return false;
-
-        // Check if all the keys and their values are equal.
-        for (var i = 0; i < aKeys.length; ++i) {
-            // Check that b has the same key as a.
-            if (!(aKeys[i] in b))
-                return false;
-
-            // Check that the values are strict equal since this is only
-            // a shallow check, not a recursive one.
-            if (a[aKeys[i]] !== b[aKeys[i]])
-                return false;
-        }
-
-        return true;
-    }
-});
-
-Object.defineProperty(Object.prototype, "valueForCaseInsensitiveKey",
-{
-    value: function(key)
-    {
-        if (this.hasOwnProperty(key))
-            return this[key];
-
-        var lowerCaseKey = key.toLowerCase();
-        for (var currentKey in this) {
-            if (currentKey.toLowerCase() === lowerCaseKey)
-                return this[currentKey];
-        }
-
-        return undefined;
-    }
-});
-
-Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithClass",
-{
-    value: function(className)
-    {
-        for (var node = this; node && node !== this.ownerDocument; node = node.parentNode)
-            if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains(className))
-                return node;
-        return null;
-    }
-});
-
-Object.defineProperty(Node.prototype, "enclosingNodeWithClass",
-{
-    value: function(className)
-    {
-        if (!this.parentNode)
-            return null;
-        return this.parentNode.enclosingNodeOrSelfWithClass(className);
-    }
-});
-
-Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeNameInArray",
-{
-    value: function(nameArray)
-    {
-        var lowerCaseNameArray = nameArray.map(function(name) { return name.toLowerCase() });
-        for (var node = this; node && node !== this.ownerDocument; node = node.parentNode) {
-            for (var i = 0; i < nameArray.length; ++i) {
-                if (node.nodeName.toLowerCase() === lowerCaseNameArray[i])
-                    return node;
-            }
-        }
-
-        return null;
-    }
-});
-
-Object.defineProperty(Node.prototype, "enclosingNodeOrSelfWithNodeName",
-{
-    value: function(nodeName)
-    {
-        return this.enclosingNodeOrSelfWithNodeNameInArray([nodeName]);
-    }
-});
-
-Object.defineProperty(Node.prototype, "isAncestor",
-{
-    value: function(node)
-    {
-        if (!node)
-            return false;
-
-        var currentNode = node.parentNode;
-        while (currentNode) {
-            if (this === currentNode)
-                return true;
-            currentNode = currentNode.parentNode;
-        }
-
-        return false;
-    }
-});
-
-Object.defineProperty(Node.prototype, "isDescendant",
-{
-    value: function(descendant)
-    {
-        return !!descendant && descendant.isAncestor(this);
-    }
-});
-
-
-Object.defineProperty(Node.prototype, "isSelfOrAncestor",
-{
-    value: function(node)
-    {
-        return !!node && (node === this || this.isAncestor(node));
-    }
-});
-
-
-Object.defineProperty(Node.prototype, "isSelfOrDescendant",
-{
-    value: function(node)
-    {
-        return !!node && (node === this || this.isDescendant(node));
-    }
-});
-
-Object.defineProperty(Node.prototype, "traverseNextNode",
-{
-    value: function(stayWithin)
-    {
-        var node = this.firstChild;
-        if (node)
-            return node;
-
-        if (stayWithin && this === stayWithin)
-            return null;
-
-        node = this.nextSibling;
-        if (node)
-            return node;
-
-        node = this;
-        while (node && !node.nextSibling && (!stayWithin || !node.parentNode || node.parentNode !== stayWithin))
-            node = node.parentNode;
-        if (!node)
-            return null;
-
-        return node.nextSibling;
-    }
-});
-
-Object.defineProperty(Node.prototype, "traversePreviousNode",
-{
-    value: function(stayWithin)
-    {
-       if (stayWithin && this === stayWithin)
-            return null;
-        var node = this.previousSibling;
-        while (node && node.lastChild)
-            node = node.lastChild;
-        if (node)
-            return node;
-        return this.parentNode;
-    }
-});
-
-
-Object.defineProperty(Node.prototype, "traverseNextTextNode",
-{
-    value: function(stayWithin)
-    {
-        var node = this.traverseNextNode(stayWithin);
-        if (!node)
-            return;
-
-        while (node && node.nodeType !== Node.TEXT_NODE)
-            node = node.traverseNextNode(stayWithin);
-
-        return node;
-    }
-});
-
-Object.defineProperty(Node.prototype, "rangeBoundaryForOffset",
-{
-    value: function(offset)
-    {
-        var textNode = this.traverseNextTextNode(this);
-        while (textNode && offset > textNode.data.length) {
-            offset -= textNode.data.length;
-            textNode = textNode.traverseNextTextNode(this);
-        }
-
-        if (!textNode)
-            return {container: this, offset: 0};
-        return {container: textNode, offset: offset};
-    }
-});
-
-Object.defineProperty(Node.prototype, "rangeOfWord",
-{
-    value: function(offset, stopCharacters, stayWithinNode, direction)
-    {
-        var startNode;
-        var startOffset = 0;
-        var endNode;
-        var endOffset = 0;
-
-        if (!stayWithinNode)
-            stayWithinNode = this;
-
-        if (!direction || direction === "backward" || direction === "both") {
-            var node = this;
-            while (node) {
-                if (node === stayWithinNode) {
-                    if (!startNode)
-                        startNode = stayWithinNode;
-                    break;
-                }
-
-                if (node.nodeType === Node.TEXT_NODE) {
-                    var start = (node === this ? (offset - 1) : (node.nodeValue.length - 1));
-                    for (var i = start; i >= 0; --i) {
-                        if (stopCharacters.indexOf(node.nodeValue[i]) !== -1) {
-                            startNode = node;
-                            startOffset = i + 1;
-                            break;
-                        }
-                    }
-                }
-
-                if (startNode)
-                    break;
-
-                node = node.traversePreviousNode(stayWithinNode);
-            }
-
-            if (!startNode) {
-                startNode = stayWithinNode;
-                startOffset = 0;
-            }
-        } else {
-            startNode = this;
-            startOffset = offset;
-        }
-
-        if (!direction || direction === "forward" || direction === "both") {
-            node = this;
-            while (node) {
-                if (node === stayWithinNode) {
-                    if (!endNode)
-                        endNode = stayWithinNode;
-                    break;
-                }
-
-                if (node.nodeType === Node.TEXT_NODE) {
-                    var start = (node === this ? offset : 0);
-                    for (var i = start; i < node.nodeValue.length; ++i) {
-                        if (stopCharacters.indexOf(node.nodeValue[i]) !== -1) {
-                            endNode = node;
-                            endOffset = i;
-                            break;
-                        }
-                    }
-                }
-
-                if (endNode)
-                    break;
-
-                node = node.traverseNextNode(stayWithinNode);
-            }
-
-            if (!endNode) {
-                endNode = stayWithinNode;
-                endOffset = stayWithinNode.nodeType === Node.TEXT_NODE ? stayWithinNode.nodeValue.length : stayWithinNode.childNodes.length;
-            }
-        } else {
-            endNode = this;
-            endOffset = offset;
-        }
-
-        var result = this.ownerDocument.createRange();
-        result.setStart(startNode, startOffset);
-        result.setEnd(endNode, endOffset);
-
-        return result;
-
-    }
-});
-
-if (!("remove" in Element.prototype)) {
-    Object.defineProperty(Element.prototype, "remove",
-    {
-        value: function()
-        {
-            if (this.parentNode)
-                this.parentNode.removeChild(this);
-        }
-    });
-}
-
-Object.defineProperty(Element.prototype, "totalOffsetLeft",
-{
-    get: function()
-    {
-        return this.getBoundingClientRect().left;
-    }
-});
-
-Object.defineProperty(Element.prototype, "totalOffsetTop",
-{
-    get: function()
-    {
-        return this.getBoundingClientRect().top;
-    }
-});
-
-Object.defineProperty(Element.prototype, "removeChildren",
-{
-    value: function()
-    {
-        // This has been tested to be the fastest removal method.
-        if (this.firstChild)
-            this.textContent = "";
-    }
-});
-
-Object.defineProperty(Element.prototype, "isInsertionCaretInside",
-{
-    value: function()
-    {
-        var selection = window.getSelection();
-        if (!selection.rangeCount || !selection.isCollapsed)
-            return false;
-        var selectionRange = selection.getRangeAt(0);
-        return selectionRange.startContainer === this || selectionRange.startContainer.isDescendant(this);
-    }
-});
-
-Object.defineProperty(Element.prototype, "removeMatchingStyleClasses",
-{
-    value: function(classNameRegex)
-    {
-        var regex = new RegExp("(^|\\s+)" + classNameRegex + "($|\\s+)");
-        if (regex.test(this.className))
-            this.className = this.className.replace(regex, " ");
-    }
-});
-
-Object.defineProperty(Element.prototype, "createChild",
-{
-    value: function(elementName, className)
-    {
-        var element = this.ownerDocument.createElement(elementName);
-        if (className)
-            element.className = className;
-        this.appendChild(element);
-        return element;
-    }
-});
-
-function AnchorBox(x, y, width, height)
-{
-    this.x = x || 0;
-    this.y = y || 0;
-    this.width = width || 0;
-    this.height = height || 0;
-}
-
-Object.defineProperty(Element.prototype, "boxInWindow",
-{
-    value: function()
-    {
-        var anchorBox = new AnchorBox;
-
-        var clientRect = this.getBoundingClientRect();
-        console.assert(clientRect);
-
-        anchorBox.x = clientRect.left;
-        anchorBox.y = clientRect.top;
-        anchorBox.width = clientRect.width;
-        anchorBox.height = clientRect.height;
-
-        return anchorBox;
-    }
-});
-
-Object.defineProperty(Element.prototype, "positionAt",
-{
-    value: function(x, y)
-    {
-        this.style.left = x + "px";
-        this.style.top = y + "px";
-    }
-});
-
-Object.defineProperty(Element.prototype, "pruneEmptyTextNodes",
-{
-    value: function()
-    {
-        var sibling = this.firstChild;
-        while (sibling) {
-            var nextSibling = sibling.nextSibling;
-            if (sibling.nodeType === this.TEXT_NODE && sibling.nodeValue === "")
-                this.removeChild(sibling);
-            sibling = nextSibling;
-        }
-    }
-});
-
-Object.defineProperty(Element.prototype, "isScrolledToBottom",
-{
-    value: function()
-    {
-        // This code works only for 0-width border
-        return this.scrollTop + this.clientHeight === this.scrollHeight;
-    }
-});
-
-Object.defineProperty(DocumentFragment.prototype, "createChild",
-{
-    value: Element.prototype.createChild
-});
-
-Object.defineProperty(Array.prototype, "contains",
-{
-    value: function(value)
-    {
-        return this.indexOf(value) !== -1;
-    }
-});
-
-Object.defineProperty(Array.prototype, "lastValue",
-{
-    get: function()
-    {
-        if (!this.length)
-            return undefined;
-        return this[this.length - 1];
-    }
-});
-
-Object.defineProperty(Array.prototype, "remove",
-{
-    value: function(value, onlyFirst)
-    {
-        for (var i = this.length - 1; i >= 0; --i) {
-            if (this[i] === value) {
-                this.splice(i, 1);
-                if (onlyFirst)
-                    return;
-            }
-        }
-    }
-});
-
-Object.defineProperty(Array.prototype, "keySet",
-{
-    value: function()
-    {
-        var keys = {};
-        for (var i = 0; i < this.length; ++i)
-            keys[this[i]] = true;
-        return keys;
-    }
-});
-
-Object.defineProperty(Array.prototype, "upperBound",
-{
-    value: function(value)
-    {
-        var first = 0;
-        var count = this.length;
-        while (count > 0) {
-          var step = count >> 1;
-          var middle = first + step;
-          if (value >= this[middle]) {
-              first = middle + 1;
-              count -= step + 1;
-          } else
-              count = step;
-        }
-        return first;
-    }
-});
-
-Object.defineProperty(Array, "convert",
-{
-    value: function(list, startIndex, endIndex)
-    {
-        return Array.prototype.slice.call(list, startIndex, endIndex);
-    }
-});
-
-Object.defineProperty(String.prototype, "trimMiddle",
-{
-    value: function(maxLength)
-    {
-        if (this.length <= maxLength)
-            return this;
-        var leftHalf = maxLength >> 1;
-        var rightHalf = maxLength - leftHalf - 1;
-        return this.substr(0, leftHalf) + "\u2026" + this.substr(this.length - rightHalf, rightHalf);
-    }
-});
-
-Object.defineProperty(String.prototype, "trimEnd",
-{
-    value: function(maxLength)
-    {
-        if (this.length <= maxLength)
-            return this;
-        return this.substr(0, maxLength - 1) + "\u2026";
-    }
-});
-
-Object.defineProperty(String.prototype, "collapseWhitespace",
-{
-    value: function()
-    {
-        return this.replace(/[\s\xA0]+/g, " ");
-    }
-});
-
-Object.defineProperty(String.prototype, "escapeCharacters",
-{
-    value: function(chars)
-    {
-        var foundChar = false;
-        for (var i = 0; i < chars.length; ++i) {
-            if (this.indexOf(chars.charAt(i)) !== -1) {
-                foundChar = true;
-                break;
-            }
-        }
-
-        if (!foundChar)
-            return this;
-
-        var result = "";
-        for (var i = 0; i < this.length; ++i) {
-            if (chars.indexOf(this.charAt(i)) !== -1)
-                result += "\\";
-            result += this.charAt(i);
-        }
-
-        return result;
-    }
-});
-
-Object.defineProperty(String.prototype, "escapeForRegExp",
-{
-    value: function()
-    {
-        return this.escapeCharacters("^[]{}()\\.$*+?|");
-    }
-});
-
-Object.defineProperty(String.prototype, "capitalize",
-{
-    value: function()
-    {
-        return this.charAt(0).toUpperCase() + this.slice(1);
-    }
-});
-
-Object.defineProperty(String, "tokenizeFormatString",
-{
-    value: function(format)
-    {
-        var tokens = [];
-        var substitutionIndex = 0;
-
-        function addStringToken(str)
-        {
-            tokens.push({ type: "string", value: str });
-        }
-
-        function addSpecifierToken(specifier, precision, substitutionIndex)
-        {
-            tokens.push({ type: "specifier", specifier: specifier, precision: precision, substitutionIndex: substitutionIndex });
-        }
-
-        var index = 0;
-        for (var precentIndex = format.indexOf("%", index); precentIndex !== -1; precentIndex = format.indexOf("%", index)) {
-            addStringToken(format.substring(index, precentIndex));
-            index = precentIndex + 1;
-
-            if (format[index] === "%") {
-                addStringToken("%");
-                ++index;
-                continue;
-            }
-
-            if (!isNaN(format[index])) {
-                // The first character is a number, it might be a substitution index.
-                var number = parseInt(format.substring(index), 10);
-                while (!isNaN(format[index]))
-                    ++index;
-
-                // If the number is greater than zero and ends with a "$",
-                // then this is a substitution index.
-                if (number > 0 && format[index] === "$") {
-                    substitutionIndex = (number - 1);
-                    ++index;
-                }
-            }
-
-            var precision = -1;
-            if (format[index] === ".") {
-                // This is a precision specifier. If no digit follows the ".",
-                // then the precision should be zero.
-                ++index;
-
-                precision = parseInt(format.substring(index), 10);
-                if (isNaN(precision))
-                    precision = 0;
-
-                while (!isNaN(format[index]))
-                    ++index;
-            }
-
-            addSpecifierToken(format[index], precision, substitutionIndex);
-
-            ++substitutionIndex;
-            ++index;
-        }
-
-        addStringToken(format.substring(index));
-
-        return tokens;
-    }
-});
-
-Object.defineProperty(String.prototype, "startsWith", 
-{
-    value: function(string)
-    {
-        return this.lastIndexOf(string, 0) === 0;
-    }
-});
-
-Object.defineProperty(String.prototype, "hash",
-{
-    get: function()
-    {
-        // Matches the wtf/StringHasher.h (SuperFastHash) algorithm.
-
-        // Arbitrary start value to avoid mapping all 0's to all 0's.
-        const stringHashingStartValue = 0x9e3779b9;
-
-        var result = stringHashingStartValue;
-        var pendingCharacter = null;
-        for (var i = 0; i < this.length; ++i) {
-            var currentCharacter = this[i].charCodeAt(0);
-            if (pendingCharacter === null) {
-                pendingCharacter = currentCharacter
-                continue;
-            }
-
-            result += pendingCharacter;
-            result = (result << 16) ^ ((currentCharacter << 11) ^ result);
-            result += result >> 11;
-
-            pendingCharacter = null;
-        }
-
-        // Handle the last character in odd length strings.
-        if (pendingCharacter !== null) {
-            result += pendingCharacter;
-            result ^= result << 11;
-            result += result >> 17;
-        }
-
-        // Force "avalanching" of final 31 bits.
-        result ^= result << 3;
-        result += result >> 5;
-        result ^= result << 2;
-        result += result >> 15;
-        result ^= result << 10;
-
-        // Prevent 0 and negative results.
-        return (0xffffffff + result + 1).toString(36);
-    }
-});
-
-Object.defineProperty(String, "standardFormatters",
-{
-    value: {
-        d: function(substitution)
-        {
-            return !isNaN(substitution) ? substitution : 0;
-        },
-
-        f: function(substitution, token)
-        {
-            if (substitution && token.precision > -1)
-                substitution = substitution.toFixed(token.precision);
-            return !isNaN(substitution) ? substitution : (token.precision > -1 ? Number(0).toFixed(token.precision) : 0);
-        },
-
-        s: function(substitution)
-        {
-            return substitution;
-        }
-    }
-});
-
-Object.defineProperty(String, "format",
-{
-    value: function(format, substitutions, formatters, initialValue, append)
-    {
-        if (!format || !substitutions || !substitutions.length)
-            return { formattedResult: append(initialValue, format), unusedSubstitutions: substitutions };
-
-        function prettyFunctionName()
-        {
-            return "String.format(\"" + format + "\", \"" + substitutions.join("\", \"") + "\")";
-        }
-
-        function warn(msg)
-        {
-            console.warn(prettyFunctionName() + ": " + msg);
-        }
-
-        function error(msg)
-        {
-            console.error(prettyFunctionName() + ": " + msg);
-        }
-
-        var result = initialValue;
-        var tokens = String.tokenizeFormatString(format);
-        var usedSubstitutionIndexes = {};
-
-        for (var i = 0; i < tokens.length; ++i) {
-            var token = tokens[i];
-
-            if (token.type === "string") {
-                result = append(result, token.value);
-                continue;
-            }
-
-            if (token.type !== "specifier") {
-                error("Unknown token type \"" + token.type + "\" found.");
-                continue;
-            }
-
-            if (token.substitutionIndex >= substitutions.length) {
-                // If there are not enough substitutions for the current substitutionIndex
-                // just output the format specifier literally and move on.
-                error("not enough substitution arguments. Had " + substitutions.length + " but needed " + (token.substitutionIndex + 1) + ", so substitution was skipped.");
-                result = append(result, "%" + (token.precision > -1 ? token.precision : "") + token.specifier);
-                continue;
-            }
-
-            usedSubstitutionIndexes[token.substitutionIndex] = true;
-
-            if (!(token.specifier in formatters)) {
-                // Encountered an unsupported format character, treat as a string.
-                warn("unsupported format character \u201C" + token.specifier + "\u201D. Treating as a string.");
-                result = append(result, substitutions[token.substitutionIndex]);
-                continue;
-            }
-
-            result = append(result, formatters[token.specifier](substitutions[token.substitutionIndex], token));
-        }
-
-        var unusedSubstitutions = [];
-        for (var i = 0; i < substitutions.length; ++i) {
-            if (i in usedSubstitutionIndexes)
-                continue;
-            unusedSubstitutions.push(substitutions[i]);
-        }
-
-        return {formattedResult: result, unusedSubstitutions: unusedSubstitutions};
-    }
-});
-
-Object.defineProperty(String.prototype, "format",
-{
-    value: function()
-    {
-        return String.format(this, arguments, String.standardFormatters, "", function(a, b) { return a + b; }).formattedResult;
-    }
-});
-
-Object.defineProperty(String.prototype, "insertWordBreakCharacters",
-{
-    value: function()
-    {
-        // Add zero width spaces after characters that are good to break after.
-        // Otherwise a string with no spaces will not break and overflow its container.
-        // This is mainly used on URL strings, so the characters are tailored for URLs.
-        return this.replace(/([\/;:\)\]\}&?])/g, "$1\u200b");
-    }
-});
-
-Object.defineProperty(String.prototype, "removeWordBreakCharacters",
-{
-    value: function()
-    {
-        // Undoes what insertWordBreakCharacters did.
-        return this.replace(/\u200b/g, "");
-    }
-});
-
-Object.defineProperty(Number, "constrain",
-{
-    value: function(num, min, max)
-    {
-        if (num < min)
-            num = min;
-        else if (num > max)
-            num = max;
-        return num;
-    }
-});
-
-Object.defineProperty(Number, "secondsToString",
-{
-    value: function(seconds, higherResolution)
-    {
-        var ms = seconds * 1000;
-
-        if (higherResolution && ms < 100)
-            return WebInspector.UIString("%.2fms").format(ms);
-        else if (ms < 100)
-            return WebInspector.UIString("%.1fms").format(ms);
-
-        if (higherResolution && ms < 1000)
-            return WebInspector.UIString("%.1fms").format(ms);
-        else if (ms < 1000)
-            return WebInspector.UIString("%.0fms").format(ms);
-
-        if (seconds < 60)
-            return WebInspector.UIString("%.2fs").format(seconds);
-
-        var minutes = seconds / 60;
-        if (minutes < 60)
-            return WebInspector.UIString("%.1fmin").format(minutes);
-
-        var hours = minutes / 60;
-        if (hours < 24)
-            return WebInspector.UIString("%.1fhrs").format(hours);
-
-        var days = hours / 24;
-        return WebInspector.UIString("%.1f days").format(days);
-    }
-});
-
-Object.defineProperty(Number, "bytesToString",
-{
-    value: function(bytes, higherResolution)
-    {
-        if (higherResolution === undefined)
-            higherResolution = true;
-
-        if (bytes < 1024)
-            return WebInspector.UIString("%.0f B").format(bytes);
-
-        var kilobytes = bytes / 1024;
-        if (higherResolution && kilobytes < 1024)
-            return WebInspector.UIString("%.2f KB").format(kilobytes);
-        else if (kilobytes < 1024)
-            return WebInspector.UIString("%.0f KB").format(kilobytes);
-
-        var megabytes = kilobytes / 1024;
-        if (higherResolution)
-            return WebInspector.UIString("%.2f MB").format(megabytes);
-        else
-            return WebInspector.UIString("%.0f MB").format(megabytes);
-    }
-});
-
-Object.defineProperty(Uint32Array, "isLittleEndian",
-{
-    value: function()
-    {
-        if ("_isLittleEndian" in this)
-            return this._isLittleEndian;
-
-        var buffer = new ArrayBuffer(4);
-        var longData = new Uint32Array(buffer);
-        var data = new Uint8Array(buffer);
-
-        longData[0] = 0x0a0b0c0d;
-
-        this._isLittleEndian = data[0] === 0x0d && data[1] === 0x0c && data[2] === 0x0b && data[3] === 0x0a;
-
-        return this._isLittleEndian;
-    }
-});
-
-function isEmptyObject(object)
-{
-    for (var property in object)
-        return false;
-    return true;
-}
-
-function isEnterKey(event)
-{
-    // Check if this is an IME event.
-    return event.keyCode !== 229 && event.keyIdentifier === "Enter";
-}
-
-function removeURLFragment(url)
-{
-    var hashIndex = url.indexOf("#");
-    if (hashIndex >= 0)
-        return url.substring(0, hashIndex);
-    return url;
-}
-
-function relativePath(path, basePath)
-{
-    console.assert(path.charAt(0) === "/");
-    console.assert(basePath.charAt(0) === "/");
-    
-    var pathComponents = path.split("/");
-    var baseComponents = basePath.replace(/\/$/, "").split("/");
-    var finalComponents = [];
-
-    var index = 1;
-    for (; index < pathComponents.length && index < baseComponents.length; ++index) {
-        if (pathComponents[index] !== baseComponents[index])
-            break;
-    }
-
-    for (var i = index; i < baseComponents.length; ++i)
-        finalComponents.push("..");
-
-    for (var i = index; i < pathComponents.length; ++i)
-        finalComponents.push(pathComponents[i]);
-
-    return finalComponents.join("/");
-}
-
-function resolveDotsInPath(path)
-{
-    if (!path)
-        return path;
-
-    if (path.indexOf("./") === -1)
-        return path;
-
-    console.assert(path.charAt(0) === "/");
-
-    var result = [];
-
-    var components = path.split("/");
-    for (var i = 0; i < components.length; ++i) {
-        var component = components[i];
-
-        // Skip over "./".
-        if (component === ".")
-            continue;
-
-        // Rewind one component for "../".
-        if (component === "..") {
-            if (result.length === 1)
-                continue;
-            result.pop();
-            continue;
-        }
-
-        result.push(component);
-    }
-
-    return result.join("/");
-}
-
-function parseURL(url)
-{
-    url = url ? url.trim() : "";
-
-    var match = url.match(/^([^:]+):\/\/([^\/:]*)(?::([\d]+))?(?:(\/[^#]*)(?:#(.*))?)?$/i);
-    if (!match)
-        return {scheme: null, host: null, port: null, path: null, queryString: null, fragment: null, lastPathComponent: null};
-
-    var scheme = match[1].toLowerCase();
-    var host = match[2].toLowerCase();
-    var port = Number(match[3]) || null;
-    var wholePath = match[4] || null;
-    var fragment = match[5] || null;
-    var path = wholePath;
-    var queryString = null;
-
-    // Split the path and the query string.
-    if (wholePath) {
-        var indexOfQuery = wholePath.indexOf("?");
-        if (indexOfQuery !== -1) {
-            path = wholePath.substring(0, indexOfQuery);
-            queryString = wholePath.substring(indexOfQuery + 1);
-        }
-        path = resolveDotsInPath(path);
-    }
-
-    // Find last path component.
-    var lastPathComponent = null;
-    if (path && path !== "/") {
-        // Skip the trailing slash if there is one.
-        var endOffset = path[path.length - 1] === "/" ? 1 : 0;
-        var lastSlashIndex = path.lastIndexOf("/", path.length - 1 - endOffset);
-        if (lastSlashIndex !== -1)
-            lastPathComponent = path.substring(lastSlashIndex + 1, path.length - endOffset);
-    }
-
-    return {scheme: scheme, host: host, port: port, path: path, queryString: queryString, fragment: fragment, lastPathComponent: lastPathComponent};
-}
-
-function absoluteURL(partialURL, baseURL)
-{
-    partialURL = partialURL ? partialURL.trim() : "";
-
-    // Return data and javascript URLs as-is.
-    if (partialURL.startsWith("data:") || partialURL.startsWith("javascript:") || partialURL.startsWith("mailto:"))
-        return partialURL;
-
-    // If the URL has a scheme it is already a full URL, so return it.
-    if (parseURL(partialURL).scheme)
-        return partialURL;
-
-    // If there is no partial URL, just return the base URL.
-    if (!partialURL)
-        return baseURL || null;
-
-    var baseURLComponents = parseURL(baseURL);
-
-    // The base URL needs to be an absolute URL. Return null if it isn't.
-    if (!baseURLComponents.scheme)
-        return null;
-
-    // A URL that starts with "//" is a full URL without the scheme. Use the base URL scheme.
-    if (partialURL[0] === "/" && partialURL[1] === "/")
-        return baseURLComponents.scheme + ":" + partialURL;
-
-    // The path can be null for URLs that have just a scheme and host (like "http://apple.com"). So make the path be "/".
-    if (!baseURLComponents.path)
-        baseURLComponents.path = "/";
-
-    // Generate the base URL prefix that is used in the rest of the cases.
-    var baseURLPrefix = baseURLComponents.scheme + "://" + baseURLComponents.host + (baseURLComponents.port ? (":" + baseURLComponents.port) : "");
-
-    // A URL that starts with "?" is just a query string that gets applied to the base URL (replacing the base URL query string and fragment).
-    if (partialURL[0] === "?")
-        return baseURLPrefix + baseURLComponents.path + partialURL;
-
-    // A URL that starts with "/" is an absolute path that gets applied to the base URL (replacing the base URL path, query string and fragment).
-    if (partialURL[0] === "/")
-        return baseURLPrefix + resolveDotsInPath(partialURL);
-
-    // Generate the base path that is used in the final case by removing everything after the last "/" from the base URL's path.
-    var basePath = baseURLComponents.path.substring(0, baseURLComponents.path.lastIndexOf("/")) + "/";
-    return baseURLPrefix + resolveDotsInPath(basePath + partialURL);
-}
-
-function simpleGlobStringToRegExp(globString, regExpFlags)
-{
-    // Only supports "*" globs.
-
-    if (!globString)
-        return null;
-
-    // Escape everything from String.prototype.escapeForRegExp except "*".
-    var regexString = globString.escapeCharacters("^[]{}()\\.$+?|");
-
-    // Unescape all doubly escaped backslashes in front of escaped asterisks.
-    // So "\\*" will become "\*" again, undoing escapeCharacters escaping of "\".
-    // This makes "\*" match a literal "*" instead of using the "*" for globbing.
-    regexString = regexString.replace(/\\\\\*/g, "\\*");
-
-    // The following regex doesn't match an asterisk that has a backslash in front.
-    // It also catches consecutive asterisks so they collapse down when replaced.
-    var unescapedAsteriskRegex = /(^|[^\\])\*+/g;
-    if (unescapedAsteriskRegex.test(globString)) {
-        // Replace all unescaped asterisks with ".*".
-        regexString = regexString.replace(unescapedAsteriskRegex, "$1.*");
-
-        // Match edge boundaries when there is an asterisk to better meet the expectations
-        // of the user. When someone types "*.js" they don't expect "foo.json" to match. They
-        // would only expect that if they type "*.js*". We use \b (instead of ^ and $) to allow
-        // matches inside paths or URLs, so "ba*.js" will match "foo/bar.js" but not "boo/bbar.js".
-        // When there isn't an asterisk the regexString is just a substring search.
-        regexString = "\\b" + regexString + "\\b";
-    }
-
-    return new RegExp(regexString, regExpFlags);
-}
-
-function parseLocationQueryParameters(arrayResult)
-{
-    // The first character is always the "?".
-    return parseQueryString(window.location.search.substring(1), arrayResult);
-}
-
-function parseQueryString(queryString, arrayResult)
-{
-    if (!queryString)
-        return arrayResult ? [] : {};
-
-    function decode(string)
-    {
-        try {
-            // Replace "+" with " " then decode precent encoded values.
-            return decodeURIComponent(string.replace(/\+/g, " "));
-        } catch (e) {
-            return string;
-        }
-    }
-
-    var parameters = arrayResult ? [] : {};
-    var parameterStrings = queryString.split("&");
-    for (var i = 0; i < parameterStrings.length; ++i) {
-        var pair = parameterStrings[i].split("=").map(decode);
-        if (arrayResult)
-            parameters.push({name: pair[0], value: pair[1]});
-        else
-            parameters[pair[0]] = pair[1];
-    }
-
-    return parameters;
-}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js
new file mode 100644
index 000000000..731c3594a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ActivateButtonNavigationItem.js
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ActivateButtonNavigationItem = class ActivateButtonNavigationItem extends WebInspector.ButtonNavigationItem
+{
+    constructor(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, role)
+    {
+        super(identifier, defaultToolTip, image, imageWidth, imageHeight, role);
+
+        this._defaultToolTip = defaultToolTip;
+        this._activatedToolTip = activatedToolTip || defaultToolTip;
+        this._role = role;
+    }
+
+    // Public
+
+    get defaultToolTip()
+    {
+        return this._defaultToolTip;
+    }
+
+    get activatedToolTip()
+    {
+        return this._activatedToolTip;
+    }
+
+    get activated()
+    {
+        return this.element.classList.contains(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName);
+    }
+
+    set activated(flag)
+    {
+        this.element.classList.toggle(WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName, flag);
+
+        if (flag) {
+            this.toolTip = this._activatedToolTip;
+            if (this._role === "tab")
+                this.element.setAttribute("aria-selected", "true");
+        } else {
+            this.toolTip = this._defaultToolTip;
+            if (this._role === "tab")
+                this.element.removeAttribute("aria-selected");
+        }
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["activate", "button"];
+    }
+};
+
+WebInspector.ActivateButtonNavigationItem.ActivatedStyleClassName = "activated";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js b/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js
new file mode 100644
index 000000000..2d8a747fd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ActivateButtonToolbarItem.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ActivateButtonToolbarItem = class ActivateButtonToolbarItem extends WebInspector.ActivateButtonNavigationItem
+{
+    constructor(identifier, defaultToolTip, activatedToolTip, label, image, role)
+    {
+        super(identifier, defaultToolTip, activatedToolTip, image, 16, 16, role);
+
+        if (typeof label === "string") {
+            this._labelElement = document.createElement("div");
+            this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
+            this._element.appendChild(this._labelElement);
+
+            this.label = label;
+        }
+    }
+
+    // Public
+
+    get label()
+    {
+        return this._labelElement.textContent;
+    }
+
+    set label(newLabel)
+    {
+        console.assert(newLabel);
+        if (!newLabel || !this._labelElement)
+            return;
+
+        this._labelElement.textContent = newLabel;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js
new file mode 100644
index 000000000..304d2039f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheDetailsSidebarPanel.js
@@ -0,0 +1,148 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheDetailsSidebarPanel = class ApplicationCacheDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
+{
+    constructor()
+    {
+        super("application-cache-details", WebInspector.UIString("Storage"), WebInspector.UIString("Storage"));
+
+        this.element.classList.add("application-cache");
+
+        this._applicationCacheFrame = null;
+
+        this._locationManifestURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Manifest URL"));
+        this._locationFrameURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Frame URL"));
+
+        this._locationGroup = new WebInspector.DetailsSectionGroup([this._locationManifestURLRow, this._locationFrameURLRow]);
+
+        this._locationSection = new WebInspector.DetailsSection("application-cache-location", WebInspector.UIString("Location"), [this._locationGroup]);
+
+        this._onlineRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Online"));
+        this._statusRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Status"));
+
+        this._statusGroup = new WebInspector.DetailsSectionGroup([this._onlineRow, this._statusRow]);
+
+        this._statusSection = new WebInspector.DetailsSection("application-cache-status", WebInspector.UIString("Status"), [this._statusGroup]);
+
+        this.contentView.element.appendChild(this._locationSection.element);
+        this.contentView.element.appendChild(this._statusSection.element);
+
+        WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.NetworkStateUpdated, this._networkStateUpdated, this);
+        WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._frameManifestStatusChanged, this);
+    }
+
+    // Public
+
+    inspect(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var applicationCacheFrameToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.ApplicationCacheFrame to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (objects[i] instanceof WebInspector.ApplicationCacheFrame) {
+                applicationCacheFrameToInspect = objects[i];
+                break;
+            }
+        }
+
+        this.applicationCacheFrame = applicationCacheFrameToInspect;
+
+        return !!this.applicationCacheFrame;
+    }
+
+    get applicationCacheFrame()
+    {
+        return this._applicationCacheFrame;
+    }
+
+    set applicationCacheFrame(applicationCacheFrame)
+    {
+        if (this._applicationCacheFrame === applicationCacheFrame)
+            return;
+
+        this._applicationCacheFrame = applicationCacheFrame;
+
+        this.needsRefresh();
+    }
+
+    refresh()
+    {
+        if (!this.applicationCacheFrame)
+            return;
+
+        this._locationFrameURLRow.value = this.applicationCacheFrame.frame.url;
+        this._locationManifestURLRow.value = this.applicationCacheFrame.manifest.manifestURL;
+
+        this._refreshOnlineRow();
+        this._refreshStatusRow();
+    }
+
+    // Private
+
+    _networkStateUpdated(event)
+    {
+        if (!this.applicationCacheFrame)
+            return;
+
+        this._refreshOnlineRow();
+    }
+
+    _frameManifestStatusChanged(event)
+    {
+        if (!this.applicationCacheFrame)
+            return;
+
+        console.assert(event.data.frameManifest instanceof WebInspector.ApplicationCacheFrame);
+        if (event.data.frameManifest !== this.applicationCacheFrame)
+            return;
+
+        this._refreshStatusRow();
+    }
+
+    _refreshOnlineRow()
+    {
+        this._onlineRow.value = WebInspector.applicationCacheManager.online ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+    }
+
+    _refreshStatusRow()
+    {
+        this._statusRow.value = WebInspector.ApplicationCacheDetailsSidebarPanel.Status[this.applicationCacheFrame.status];
+    }
+};
+
+// This needs to be kept in sync with ApplicationCacheManager.js.
+WebInspector.ApplicationCacheDetailsSidebarPanel.Status = {
+    0: "Uncached",
+    1: "Idle",
+    2: "Checking",
+    3: "Downloading",
+    4: "UpdateReady",
+    5: "Obsolete"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.css b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.css
new file mode 100644
index 000000000..d231c1d1a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.application-cache-frame > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js
new file mode 100644
index 000000000..e560014f8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameContentView.js
@@ -0,0 +1,224 @@
+/*
+ * Copyright (C) 2010, 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheFrameContentView = class ApplicationCacheFrameContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
+
+        super(representedObject);
+
+        this.element.classList.add("application-cache-frame", "table");
+
+        this._frame = representedObject.frame;
+
+        this._emptyView = WebInspector.createMessageTextView(WebInspector.UIString("No Application Cache information available"), false);
+        this._emptyView.classList.add("hidden");
+        this.element.appendChild(this._emptyView);
+
+        this._markDirty();
+
+        var status = representedObject.status;
+        this.updateStatus(status);
+
+        WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestStatusChanged, this._updateStatus, this);
+    }
+
+    shown()
+    {
+        this._maybeUpdate();
+    }
+
+    closed()
+    {
+        WebInspector.applicationCacheManager.removeEventListener(null, null, this);
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.ApplicationCache;
+        cookie.frame = this.representedObject.frame.url;
+        cookie.manifest = this.representedObject.manifest.manifestURL;
+    }
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    }
+
+    _maybeUpdate()
+    {
+        if (!this.visible || !this._viewDirty)
+            return;
+
+        this._update();
+        this._viewDirty = false;
+    }
+
+    _markDirty()
+    {
+        this._viewDirty = true;
+    }
+
+    _updateStatus(event)
+    {
+        var frameManifest = event.data.frameManifest;
+        if (frameManifest !== this.representedObject)
+            return;
+
+        console.assert(frameManifest instanceof WebInspector.ApplicationCacheFrame);
+
+        this.updateStatus(frameManifest.status);
+    }
+
+    updateStatus(status)
+    {
+        var oldStatus = this._status;
+        this._status = status;
+
+        if (this.visible && this._status === WebInspector.ApplicationCacheManager.Status.Idle && (oldStatus === WebInspector.ApplicationCacheManager.Status.UpdateReady || !this._resources))
+            this._markDirty();
+
+        this._maybeUpdate();
+    }
+
+    _update()
+    {
+        WebInspector.applicationCacheManager.requestApplicationCache(this._frame, this._updateCallback.bind(this));
+    }
+
+    _updateCallback(applicationCache)
+    {
+        if (!applicationCache || !applicationCache.manifestURL) {
+            delete this._manifest;
+            delete this._creationTime;
+            delete this._updateTime;
+            delete this._size;
+            delete this._resources;
+
+            this._emptyView.classList.remove("hidden");
+
+            if (this._dataGrid)
+                this._dataGrid.element.classList.add("hidden");
+            return;
+        }
+
+        // FIXME: are these variables needed anywhere else?
+        this._manifest = applicationCache.manifestURL;
+        this._creationTime = applicationCache.creationTime;
+        this._updateTime = applicationCache.updateTime;
+        this._size = applicationCache.size;
+        this._resources = applicationCache.resources;
+
+        if (!this._dataGrid)
+            this._createDataGrid();
+
+        this._populateDataGrid();
+        this._dataGrid.autoSizeColumns(20, 80);
+        this._dataGrid.element.classList.remove("hidden");
+
+        this._emptyView.classList.add("hidden");
+    }
+
+    _createDataGrid()
+    {
+        var columns = {url: {}, type: {}, size: {}};
+
+        columns.url.title = WebInspector.UIString("Resource");
+        columns.url.sortable = true;
+
+        columns.type.title = WebInspector.UIString("Type");
+        columns.type.sortable = true;
+
+        columns.size.title = WebInspector.UIString("Size");
+        columns.size.aligned = "right";
+        columns.size.sortable = true;
+
+        this._dataGrid = new WebInspector.DataGrid(columns);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("application-cache-frame-content-view-sort", "url");
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("application-cache-frame-content-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);
+
+        this.addSubview(this._dataGrid);
+        this._dataGrid.updateLayout();
+    }
+
+    _sortDataGrid()
+    {
+        function numberCompare(columnIdentifier, nodeA, nodeB)
+        {
+            return nodeA.data[columnIdentifier] - nodeB.data[columnIdentifier];
+        }
+        function localeCompare(columnIdentifier, nodeA, nodeB)
+        {
+             return (nodeA.data[columnIdentifier] + "").localeCompare(nodeB.data[columnIdentifier] + "");
+        }
+
+        var comparator;
+        switch (this._dataGrid.sortColumnIdentifier) {
+            case "type": comparator = localeCompare.bind(this, "type"); break;
+            case "size": comparator = numberCompare.bind(this, "size"); break;
+            case "url":
+            default:  comparator = localeCompare.bind(this, "url"); break;
+        }
+
+        this._dataGrid.sortNodes(comparator);
+    }
+
+    _populateDataGrid()
+    {
+        this._dataGrid.removeChildren();
+
+        for (var resource of this._resources) {
+            var data = {
+                url: resource.url,
+                type: resource.type,
+                size: Number.bytesToString(resource.size)
+            };
+            var node = new WebInspector.DataGridNode(data);
+            this._dataGrid.appendChild(node);
+        }
+    }
+
+    _deleteButtonClicked(event)
+    {
+        if (!this._dataGrid || !this._dataGrid.selectedNode)
+            return;
+
+        // FIXME: Delete Button semantics are not yet defined. (Delete a single, or all?)
+        this._deleteCallback(this._dataGrid.selectedNode);
+    }
+
+    _deleteCallback(node)
+    {
+        // FIXME: Should we delete a single (selected) resource or all resources?
+        // InspectorBackend.deleteCachedResource(...)
+        // this._update();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js
new file mode 100644
index 000000000..653679978
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheFrameTreeElement.js
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheFrameTreeElement = class ApplicationCacheFrameTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.ApplicationCacheFrame);
+
+        super("application-cache-frame", "", "", representedObject, false);
+
+        this.updateTitles();
+    }
+
+    updateTitles()
+    {
+        var url = this.representedObject.frame.url;
+        var parsedURL = parseURL(url);
+
+        this.mainTitle = WebInspector.displayNameForURL(url, parsedURL);
+
+        // Show the host as the subtitle only if it doesn't match the subtitle of the manifest tree element,
+        // and it doesn't match the mainTitle.
+        var subtitle = WebInspector.displayNameForHost(parsedURL.host);
+
+        var manifestTreeElement = null;
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (currentAncestor instanceof WebInspector.ApplicationCacheManifestTreeElement) {
+                manifestTreeElement = currentAncestor;
+                break;
+            }
+
+            currentAncestor = currentAncestor.parent;
+        }
+
+        var subtitleIsDuplicate = subtitle === this._mainTitle || manifestTreeElement ? subtitle === manifestTreeElement.subtitle : false;
+        this.subtitle = subtitleIsDuplicate ? null : subtitle;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheIcons.css b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheIcons.css
new file mode 100644
index 000000000..bc2c8c3af
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheIcons.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.application-cache-manifest .icon {
+    content: -webkit-image-set(url(../Images/ApplicationCacheManifest.png) 1x, url(../Images/ApplicationCacheManifest@2x.png) 2x);
+}
+
+.application-cache-frame .icon {
+    content: -webkit-image-set(url(../Images/ApplicationCache.png) 1x, url(../Images/ApplicationCache@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js
new file mode 100644
index 000000000..8056576f8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ApplicationCacheManifestTreeElement.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ApplicationCacheManifestTreeElement = class ApplicationCacheManifestTreeElement extends WebInspector.StorageTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.ApplicationCacheManifest);
+
+        super("application-cache-manifest", "", representedObject);
+    }
+
+    // Public
+
+    get name()
+    {
+        if (!this._name)
+            this._generateTitles();
+
+        return this._name;
+    }
+
+    get secondaryName()
+    {
+        if (!this._secondaryName)
+            this._generateTitles();
+
+        return this._secondaryName;
+    }
+
+    get categoryName()
+    {
+        return WebInspector.UIString("Application Cache");
+    }
+
+    _generateTitles()
+    {
+        var parsedURL = parseURL(this.representedObject.manifestURL);
+
+        // Prefer the last path component, with a fallback for the host as the main title.
+        this._name = WebInspector.displayNameForURL(this.representedObject.manifestURL, parsedURL);
+
+        // Show the host as the subtitle.
+        var secondaryName = WebInspector.displayNameForHost(parsedURL.host);
+        this._secondaryName = this._name !== secondaryName ? secondaryName : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
new file mode 100644
index 000000000..06365c8b6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.css
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.bezier-editor {
+    width: 200px;
+    height: 225px;
+}
+
+.bezier-editor > .bezier-preview {
+    width: calc(100% - 10px);
+    height: 25px;
+    margin: 5px 5px 0;
+    border-bottom: 1px solid lightgrey;
+}
+
+.bezier-editor > .bezier-preview > div {
+    width: 20px;
+    height: 20px;
+    background-color: hsl(212, 92%, 54%);
+    border-radius: 50%;
+}
+
+.bezier-editor > .bezier-preview-timing {
+    position: absolute;
+    top: 34px;
+    margin-left: 11px;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid black;
+}
+
+.bezier-editor > .bezier-preview-timing.animate {
+    animation: bezierPreview 2s linear 250ms forwards;
+}
+
+@keyframes bezierPreview {
+    from { transform: translate(0, 0); }
+    to { transform: translate(170px, 0); }
+}
+
+.bezier-editor > .bezier-container {
+    margin: 0 8px;
+}
+
+.bezier-editor > .bezier-container .linear-curve {
+    fill: none;
+    stroke:lightgrey;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+.bezier-editor > .bezier-container .bezier-curve {
+    fill: none;
+    stroke: black;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+.bezier-editor > .bezier-container .control-line {
+    fill: none;
+    stroke: hsl(210, 100%, 49%);
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+
+.bezier-editor > .bezier-container .control-handle {
+    r: 5px;
+    fill: hsl(210, 100%, 49%);
+}
+
+.bezier-editor > .bezier-container .control-handle.selected {
+    r: 7px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
new file mode 100644
index 000000000..be34d2d1c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BezierEditor.js
@@ -0,0 +1,265 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BezierEditor = class BezierEditor extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.classList.add("bezier-editor");
+
+        var editorWidth = 184;
+        var editorHeight = 200;
+        this._padding = 25;
+        this._controlHandleRadius = 7;
+        this._bezierWidth = editorWidth - (this._controlHandleRadius * 2);
+        this._bezierHeight = editorHeight - (this._controlHandleRadius * 2) - (this._padding * 2);
+        this._bezierPreviewAnimationStyleText = "bezierPreview 2s 250ms forwards ";
+
+        var bezierPreviewContainer = document.createElement("div");
+        bezierPreviewContainer.id = "bezierPreview";
+        bezierPreviewContainer.classList.add("bezier-preview");
+        bezierPreviewContainer.title = WebInspector.UIString("Click to restart the animation");
+        bezierPreviewContainer.addEventListener("mousedown", this._resetPreviewAnimation.bind(this));
+
+        this._bezierPreview = document.createElement("div");
+        bezierPreviewContainer.appendChild(this._bezierPreview);
+
+        this._element.appendChild(bezierPreviewContainer);
+
+        this._bezierContainer = createSVGElement("svg");
+        this._bezierContainer.id = "bezierContainer";
+        this._bezierContainer.setAttribute("width", editorWidth);
+        this._bezierContainer.setAttribute("height", editorHeight);
+        this._bezierContainer.classList.add("bezier-container");
+
+        var svgGroup = createSVGElement("g");
+        svgGroup.setAttribute("transform", "translate(0, " + this._padding + ")");
+
+        var linearCurve = createSVGElement("line");
+        linearCurve.classList.add("linear-curve");
+        linearCurve.setAttribute("x1", this._controlHandleRadius);
+        linearCurve.setAttribute("y1", this._bezierHeight + this._controlHandleRadius);
+        linearCurve.setAttribute("x2", this._bezierWidth + this._controlHandleRadius);
+        linearCurve.setAttribute("y2", this._controlHandleRadius);
+        svgGroup.appendChild(linearCurve);
+
+        this._bezierCurve = createSVGElement("path");
+        this._bezierCurve.classList.add("bezier-curve");
+        svgGroup.appendChild(this._bezierCurve);
+
+        function createControl(x1, y1)
+        {
+            x1 += this._controlHandleRadius;
+            y1 += this._controlHandleRadius;
+
+            var line = createSVGElement("line");
+            line.classList.add("control-line");
+            line.setAttribute("x1", x1);
+            line.setAttribute("y1", y1);
+            line.setAttribute("x2", x1);
+            line.setAttribute("y2", y1);
+            svgGroup.appendChild(line);
+
+            var handle = createSVGElement("circle");
+            handle.classList.add("control-handle");
+            svgGroup.appendChild(handle);
+
+            return {point: null, line, handle};
+        }
+
+        this._inControl = createControl.call(this, 0, this._bezierHeight);
+        this._outControl = createControl.call(this, this._bezierWidth, 0);
+
+        this._bezierContainer.appendChild(svgGroup);
+        this._element.appendChild(this._bezierContainer);
+
+        this._bezierPreviewTiming = document.createElement("div");
+        this._bezierPreviewTiming.classList.add("bezier-preview-timing");
+        this._element.appendChild(this._bezierPreviewTiming);
+
+        this._selectedControl = null;
+        this._bezierContainer.addEventListener("mousedown", this);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    set bezier(bezier)
+    {
+        if (!bezier)
+            return;
+
+        var isCubicBezier = bezier instanceof WebInspector.CubicBezier;
+        console.assert(isCubicBezier);
+        if (!isCubicBezier)
+            return;
+
+        this._bezier = bezier;
+        this._inControl.point = new WebInspector.Point(this._bezier.inPoint.x * this._bezierWidth, (1 - this._bezier.inPoint.y) * this._bezierHeight);
+        this._outControl.point = new WebInspector.Point(this._bezier.outPoint.x * this._bezierWidth, (1 - this._bezier.outPoint.y) * this._bezierHeight);
+
+        this._updateBezier();
+        this._triggerPreviewAnimation();
+    }
+
+    get bezier()
+    {
+        return this._bezier;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+            this._handleMousedown(event);
+            break;
+        case "mousemove":
+            this._handleMousemove(event);
+            break;
+        case "mouseup":
+            this._handleMouseup(event);
+            break;
+        }
+    }
+
+    // Private
+
+    _handleMousedown(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        window.addEventListener("mousemove", this, true);
+        window.addEventListener("mouseup", this, true);
+
+        this._bezierPreview.style.animation = null;
+        this._bezierPreviewTiming.classList.remove("animate");
+
+        this._updateControlPointsForMouseEvent(event, true);
+    }
+
+    _handleMousemove(event)
+    {
+        this._updateControlPointsForMouseEvent(event);
+    }
+
+    _handleMouseup(event)
+    {
+        this._selectedControl.handle.classList.remove("selected");
+        this._selectedControl = null;
+        this._triggerPreviewAnimation();
+
+        window.removeEventListener("mousemove", this, true);
+        window.removeEventListener("mouseup", this, true);
+    }
+
+    _updateControlPointsForMouseEvent(event, calculateSelectedControlPoint)
+    {
+        var point = WebInspector.Point.fromEventInElement(event, this._bezierContainer);
+        point.x = Number.constrain(point.x - this._controlHandleRadius, 0, this._bezierWidth);
+        point.y -= this._controlHandleRadius + this._padding;
+
+        if (calculateSelectedControlPoint) {
+            if (this._inControl.point.distance(point) < this._outControl.point.distance(point))
+                this._selectedControl = this._inControl;
+            else
+                this._selectedControl = this._outControl;
+        }
+
+        this._selectedControl.point = point;
+        this._selectedControl.handle.classList.add("selected");
+        this._updateValue();
+    }
+
+    _updateValue()
+    {
+        function round(num)
+        {
+            return Math.round(num * 100) / 100;
+        }
+
+        var inValueX = round(this._inControl.point.x / this._bezierWidth);
+        var inValueY = round(1 - (this._inControl.point.y / this._bezierHeight));
+
+        var outValueX = round(this._outControl.point.x / this._bezierWidth);
+        var outValueY = round(1 - (this._outControl.point.y / this._bezierHeight));
+
+        this._bezier = new WebInspector.CubicBezier(inValueX, inValueY, outValueX, outValueY);
+        this._updateBezier();
+
+        this.dispatchEventToListeners(WebInspector.BezierEditor.Event.BezierChanged, {bezier: this._bezier});
+    }
+
+    _updateBezier()
+    {
+        var r = this._controlHandleRadius;
+        var inControlX = this._inControl.point.x + r;
+        var inControlY = this._inControl.point.y + r;
+        var outControlX = this._outControl.point.x + r;
+        var outControlY = this._outControl.point.y + r;
+        var path = `M ${r} ${this._bezierHeight + r} C ${inControlX} ${inControlY} ${outControlX} ${outControlY} ${this._bezierWidth + r} ${r}`;
+        this._bezierCurve.setAttribute("d", path);
+        this._updateControl(this._inControl);
+        this._updateControl(this._outControl);
+    }
+
+    _updateControl(control)
+    {
+        control.handle.setAttribute("cx", control.point.x + this._controlHandleRadius);
+        control.handle.setAttribute("cy", control.point.y + this._controlHandleRadius);
+
+        control.line.setAttribute("x2", control.point.x + this._controlHandleRadius);
+        control.line.setAttribute("y2", control.point.y + this._controlHandleRadius);
+    }
+
+    _triggerPreviewAnimation()
+    {
+        this._bezierPreview.style.animation = this._bezierPreviewAnimationStyleText + this._bezier.toString();
+        this._bezierPreviewTiming.classList.add("animate");
+    }
+
+    _resetPreviewAnimation()
+    {
+        var parent = this._bezierPreview.parentNode;
+        parent.removeChild(this._bezierPreview);
+        parent.appendChild(this._bezierPreview);
+
+        this._element.removeChild(this._bezierPreviewTiming);
+        this._element.appendChild(this._bezierPreviewTiming);
+    }
+};
+
+WebInspector.BezierEditor.Event = {
+    BezierChanged: "bezier-editor-bezier-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css b/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css
new file mode 100644
index 000000000..44ca9580f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.css
@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section .row.box-model {
+    padding: 6px;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.details-section .row.box-model .label {
+    position: absolute;
+    color: black;
+    margin-left: 3px;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+.details-section .row.box-model :matches(.position, .margin, .border, .padding, .content) {
+    border: 1px solid grey;
+    background-color: white;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 3px;
+    margin: 3px;
+}
+
+.details-section .row.box-model .position {
+    border-style: dotted;
+}
+
+.details-section .row.box-model .margin {
+    border-style: dashed;
+    border-color: black;
+}
+
+.details-section .row.box-model:not(.hovered) .margin,
+.details-section .row.box-model .margin.active {
+    background-color: hsla(30, 88%, 69%, 0.66);
+}
+
+.details-section .row.box-model .border {
+    border-color: black;
+}
+
+.details-section .row.box-model:not(.hovered) .border,
+.details-section .row.box-model .border.active {
+    background-color: hsla(44, 100%, 80%, 0.66);
+}
+
+.details-section .row.box-model .padding {
+    border-style: dashed;
+}
+
+.details-section .row.box-model:not(.hovered) .padding,
+.details-section .row.box-model .padding.active {
+    background-color: hsla(101, 37%, 62%, 0.55);
+}
+
+.details-section .row.box-model .content {
+    position: static;
+    min-width: 80px;
+    overflow: visible;
+}
+
+.details-section .row.box-model:not(.hovered) .content,
+.details-section .row.box-model .content.active {
+    background-color: hsla(208, 60%, 64%, 0.66);
+}
+
+.details-section .row.box-model .editing {
+    position: relative;
+    z-index: 2;
+}
+
+.details-section .row.box-model :matches(.content span, .top, .right, .bottom, .left) {
+    display: inline-block;
+}
+
+.details-section .row.box-model :matches(.right, .left) {
+    vertical-align: middle;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js b/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js
new file mode 100644
index 000000000..fc167f5a2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BoxModelDetailsSectionRow.js
@@ -0,0 +1,441 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BoxModelDetailsSectionRow = class BoxModelDetailsSectionRow extends WebInspector.DetailsSectionRow
+{
+    constructor()
+    {
+        super(WebInspector.UIString("No Box Model Information"));
+
+        this.element.classList.add("box-model");
+
+        this._nodeStyles = null;
+    }
+
+    // Public
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    }
+
+    set nodeStyles(nodeStyles)
+    {
+        this._nodeStyles = nodeStyles;
+
+        this._refresh();
+    }
+
+    // Private
+
+    _refresh()
+    {
+        if (this._ignoreNextRefresh) {
+            delete this._ignoreNextRefresh;
+            return;
+        }
+
+        this._updateMetrics();
+    }
+
+    _getPropertyValueAsPx(style, propertyName)
+    {
+        return Number(style.propertyForName(propertyName).value.replace(/px$/, "") || 0);
+    }
+
+    _getBox(computedStyle, componentName)
+    {
+        var suffix = componentName === "border" ? "-width" : "";
+        var left = this._getPropertyValueAsPx(computedStyle, componentName + "-left" + suffix);
+        var top = this._getPropertyValueAsPx(computedStyle, componentName + "-top" + suffix);
+        var right = this._getPropertyValueAsPx(computedStyle, componentName + "-right" + suffix);
+        var bottom = this._getPropertyValueAsPx(computedStyle, componentName + "-bottom" + suffix);
+        return {left, top, right, bottom};
+    }
+
+    _highlightDOMNode(showHighlight, mode, event)
+    {
+        event.stopPropagation();
+
+        var nodeId = showHighlight ? this.nodeStyles.node.id : 0;
+        if (nodeId) {
+            if (this._highlightMode === mode)
+                return;
+            this._highlightMode = mode;
+            WebInspector.domTreeManager.highlightDOMNode(nodeId, mode);
+        } else {
+            delete this._highlightMode;
+            WebInspector.domTreeManager.hideDOMNodeHighlight();
+        }
+
+        for (var i = 0; this._boxElements && i < this._boxElements.length; ++i) {
+            var element = this._boxElements[i];
+            if (nodeId && (mode === "all" || element._name === mode))
+                element.classList.add("active");
+            else
+                element.classList.remove("active");
+        }
+
+        this.element.classList.toggle("hovered", showHighlight);
+    }
+
+    _updateMetrics()
+    {
+        // Updating with computed style.
+        var metricsElement = document.createElement("div");
+
+        var self = this;
+        var style = this._nodeStyles.computedStyle;
+
+        function createElement(type, value, name, propertyName, style)
+        {
+            // Check if the value is a float and whether it should be rounded.
+            var floatValue = parseFloat(value);
+            var shouldRoundValue = (!isNaN(floatValue) && floatValue % 1 !== 0);
+
+            var element = document.createElement(type);
+            element.textContent = shouldRoundValue ? ("~" + Math.round(floatValue * 100) / 100) : value;
+            if (shouldRoundValue)
+                element.title = value;
+            element.addEventListener("dblclick", this._startEditing.bind(this, element, name, propertyName, style), false);
+            return element;
+        }
+
+        function createBoxPartElement(style, name, side, suffix)
+        {
+            var propertyName = (name !== "position" ? name + "-" : "") + side + suffix;
+            var value = style.propertyForName(propertyName).value;
+            if (value === "" || (name !== "position" && value === "0px"))
+                value = "\u2012";
+            else if (name === "position" && value === "auto")
+                value = "\u2012";
+            value = value.replace(/px$/, "");
+
+            var element = createElement.call(this, "div", value, name, propertyName, style);
+            element.className = side;
+            return element;
+        }
+
+        function createContentAreaWidthElement(style)
+        {
+            var width = style.propertyForName("width").value.replace(/px$/, "");
+            if (style.propertyForName("box-sizing").value === "border-box") {
+                var borderBox = self._getBox(style, "border");
+                var paddingBox = self._getBox(style, "padding");
+
+                width = width - borderBox.left - borderBox.right - paddingBox.left - paddingBox.right;
+            }
+
+            return createElement.call(this, "span", width, "width", "width", style);
+        }
+
+        function createContentAreaHeightElement(style)
+        {
+            var height = style.propertyForName("height").value.replace(/px$/, "");
+            if (style.propertyForName("box-sizing").value === "border-box") {
+                var borderBox = self._getBox(style, "border");
+                var paddingBox = self._getBox(style, "padding");
+
+                height = height - borderBox.top - borderBox.bottom - paddingBox.top - paddingBox.bottom;
+            }
+
+            return createElement.call(this, "span", height, "height", "height", style);
+        }
+
+        // Display types for which margin is ignored.
+        var noMarginDisplayType = {
+            "table-cell": true,
+            "table-column": true,
+            "table-column-group": true,
+            "table-footer-group": true,
+            "table-header-group": true,
+            "table-row": true,
+            "table-row-group": true
+        };
+
+        // Display types for which padding is ignored.
+        var noPaddingDisplayType = {
+            "table-column": true,
+            "table-column-group": true,
+            "table-footer-group": true,
+            "table-header-group": true,
+            "table-row": true,
+            "table-row-group": true
+        };
+
+        // Position types for which top, left, bottom and right are ignored.
+        var noPositionType = {
+            "static": true
+        };
+
+        this._boxElements = [];
+        var boxes = ["content", "padding", "border", "margin", "position"];
+
+        if (!style.hasProperties()) {
+            this.showEmptyMessage();
+            return;
+        }
+
+        var previousBox = null;
+        for (var i = 0; i < boxes.length; ++i) {
+            var name = boxes[i];
+
+            if (name === "margin" && noMarginDisplayType[style.propertyForName("display").value])
+                continue;
+            if (name === "padding" && noPaddingDisplayType[style.propertyForName("display").value])
+                continue;
+            if (name === "position" && noPositionType[style.propertyForName("position").value])
+                continue;
+
+            var boxElement = document.createElement("div");
+            boxElement.className = name;
+            boxElement._name = name;
+            boxElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, true, name === "position" ? "all" : name), false);
+            this._boxElements.push(boxElement);
+
+            if (name === "content") {
+                var widthElement = createContentAreaWidthElement.call(this, style);
+                var heightElement = createContentAreaHeightElement.call(this, style);
+                boxElement.append(widthElement, " \u00D7 ", heightElement);
+            } else {
+                var suffix = (name === "border" ? "-width" : "");
+
+                var labelElement = document.createElement("div");
+                labelElement.className = "label";
+                labelElement.textContent = boxes[i];
+                boxElement.appendChild(labelElement);
+
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "top", suffix));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "left", suffix));
+
+                if (previousBox)
+                    boxElement.appendChild(previousBox);
+
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "right", suffix));
+                boxElement.appendChild(document.createElement("br"));
+                boxElement.appendChild(createBoxPartElement.call(this, style, name, "bottom", suffix));
+            }
+
+            previousBox = boxElement;
+        }
+
+        metricsElement.appendChild(previousBox);
+        metricsElement.addEventListener("mouseover", this._highlightDOMNode.bind(this, false, ""), false);
+
+        this.hideEmptyMessage();
+        this.element.appendChild(metricsElement);
+    }
+
+    _startEditing(targetElement, box, styleProperty, computedStyle)
+    {
+        if (WebInspector.isBeingEdited(targetElement))
+            return;
+
+        // If the target element has a title use it as the editing value
+        // since the current text is likely truncated/rounded.
+        if (targetElement.title)
+            targetElement.textContent = targetElement.title;
+
+        var context = {box, styleProperty};
+        var boundKeyDown = this._handleKeyDown.bind(this, context, styleProperty);
+        context.keyDownHandler = boundKeyDown;
+        targetElement.addEventListener("keydown", boundKeyDown, false);
+
+        this._isEditingMetrics = true;
+
+        var config = new WebInspector.EditingConfig(this._editingCommitted.bind(this), this._editingCancelled.bind(this), context);
+        WebInspector.startEditing(targetElement, config);
+
+        window.getSelection().setBaseAndExtent(targetElement, 0, targetElement, 1);
+    }
+
+    _alteredFloatNumber(number, event)
+    {
+        var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
+
+        // Jump by 10 when shift is down or jump by 0.1 when Alt/Option is down.
+        // Also jump by 10 for page up and down, or by 100 if shift is held with a page key.
+        var changeAmount = 1;
+        if (event.shiftKey && !arrowKeyPressed)
+            changeAmount = 100;
+        else if (event.shiftKey || !arrowKeyPressed)
+            changeAmount = 10;
+        else if (event.altKey)
+            changeAmount = 0.1;
+
+        if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
+            changeAmount *= -1;
+
+        // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
+        // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
+        var result = Number((number + changeAmount).toFixed(6));
+        if (!String(result).match(WebInspector.EditingSupport.NumberRegex))
+            return null;
+
+        return result;
+    }
+
+    _handleKeyDown(context, styleProperty, event)
+    {
+        if (!/^(?:Page)?(?:Up|Down)$/.test(event.keyIdentifier))
+            return;
+
+        var element = event.currentTarget;
+
+        var selection = window.getSelection();
+        if (!selection.rangeCount)
+            return;
+
+        var selectionRange = selection.getRangeAt(0);
+        if (!selectionRange.commonAncestorContainer.isSelfOrDescendant(element))
+            return;
+
+        var originalValue = element.textContent;
+        var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, WebInspector.EditingSupport.StyleValueDelimiters, element);
+        var wordString = wordRange.toString();
+
+        var matches = WebInspector.EditingSupport.NumberRegex.exec(wordString);
+        var replacementString;
+        if (matches && matches.length) {
+            var prefix = matches[1];
+            var suffix = matches[3];
+            var number = this._alteredFloatNumber(parseFloat(matches[2]), event);
+            if (number === null) {
+                // Need to check for null explicitly.
+                return;
+            }
+
+            if (styleProperty !== "margin" && number < 0)
+                number = 0;
+
+            replacementString = prefix + number + suffix;
+        }
+
+        if (!replacementString)
+            return;
+
+        var replacementTextNode = document.createTextNode(replacementString);
+
+        wordRange.deleteContents();
+        wordRange.insertNode(replacementTextNode);
+
+        var finalSelectionRange = document.createRange();
+        finalSelectionRange.setStart(replacementTextNode, 0);
+        finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
+
+        selection.removeAllRanges();
+        selection.addRange(finalSelectionRange);
+
+        event.handled = true;
+        event.preventDefault();
+
+        this._ignoreNextRefresh = true;
+
+        this._applyUserInput(element, replacementString, originalValue, context, false);
+    }
+
+    _editingEnded(element, context)
+    {
+        delete this.originalPropertyData;
+        delete this.previousPropertyDataCandidate;
+        element.removeEventListener("keydown", context.keyDownHandler, false);
+        delete this._isEditingMetrics;
+    }
+
+    _editingCancelled(element, context)
+    {
+        this._editingEnded(element, context);
+        this._refresh();
+    }
+
+    _applyUserInput(element, userInput, previousContent, context, commitEditor)
+    {
+        if (commitEditor && userInput === previousContent) {
+            // Nothing changed, so cancel.
+            this._editingCancelled(element, context);
+            return;
+        }
+
+        if (context.box !== "position" && (!userInput || userInput === "\u2012"))
+            userInput = "0px";
+        else if (context.box === "position" && (!userInput || userInput === "\u2012"))
+            userInput = "auto";
+
+        userInput = userInput.toLowerCase();
+        // Append a "px" unit if the user input was just a number.
+        if (/^-?(?:\d+(?:\.\d+)?|\.\d+)$/.test(userInput))
+            userInput += "px";
+
+        var styleProperty = context.styleProperty;
+        var computedStyle = this._nodeStyles.computedStyle;
+
+        if (computedStyle.propertyForName("box-sizing").value === "border-box" && (styleProperty === "width" || styleProperty === "height")) {
+            if (!userInput.match(/px$/)) {
+                console.error("For elements with box-sizing: border-box, only absolute content area dimensions can be applied");
+                return;
+            }
+
+            var borderBox = this._getBox(computedStyle, "border");
+            var paddingBox = this._getBox(computedStyle, "padding");
+            var userValuePx = Number(userInput.replace(/px$/, ""));
+            if (isNaN(userValuePx))
+                return;
+            if (styleProperty === "width")
+                userValuePx += borderBox.left + borderBox.right + paddingBox.left + paddingBox.right;
+            else
+                userValuePx += borderBox.top + borderBox.bottom + paddingBox.top + paddingBox.bottom;
+
+            userInput = userValuePx + "px";
+        }
+
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function toggleInlineStyleProperty(property, value)
+            {
+                this.style.setProperty(property, value, "!important");
+            }
+
+            function didToggle()
+            {
+                this._nodeStyles.refresh();
+            }
+
+            object.callFunction(toggleInlineStyleProperty, [styleProperty, userInput], false, didToggle.bind(this));
+            object.release();
+        }
+
+        WebInspector.RemoteObject.resolveNode(this._nodeStyles.node, "", resolvedNode.bind(this));
+    }
+
+    _editingCommitted(element, userInput, previousContent, context)
+    {
+        this._editingEnded(element, context);
+        this._applyUserInput(element, userInput, previousContent, context, true);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
new file mode 100644
index 000000000..f9f75b134
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
@@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.breakpoint-action-block-header {
+    margin-bottom: 3px;
+}
+
+.breakpoint-action-append-button,
+.breakpoint-action-remove-button {
+    border: 1px solid hsl(0, 0%, 66%);
+    border-radius: 10px;
+    background-size: 16px 16px;
+    background-origin: border-box;
+    width: 16px;
+    height: 16px;
+    float: right;
+    margin-left: 2px;
+    margin-top: 2px;
+}
+
+.breakpoint-action-append-button:active,
+.breakpoint-action-remove-button:active {
+    filter: brightness(50%);
+}
+
+.breakpoint-action-append-button {
+    background-image: url(../Images/BreakpointActionAdd.svg), linear-gradient(to bottom, hsl(0, 0%, 98%), hsl(0, 0%, 78%));
+}
+
+.breakpoint-action-remove-button {
+    background-image: url(../Images/BreakpointActionRemove.svg), linear-gradient(to bottom, hsl(0, 0%, 98%), hsl(0, 0%, 78%));
+}
+
+.breakpoint-action-block-body {
+    margin: 1px 2px 6px 2px;
+    padding: 8px;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid hsl(0, 0%, 74%);
+    background-color: hsla(0, 0%, 87%, 0.95);
+    box-shadow: inset 0 0 2px hsl(0, 0%, 78%);
+}
+
+.breakpoint-action-block-body > input {
+    width: 100%;
+}
+
+.breakpoint-action-eval-editor {
+    margin: 2px 0;
+    padding: 2px 0 1px 0;
+    -webkit-appearance: textfield;
+    border: 1px solid hsl(0, 0%, 78%);
+    background: white;
+}
+
+.breakpoint-action-eval-editor > .CodeMirror {
+    width: 336px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content.wide width */
+    height: auto;
+}
+
+.breakpoint-action-eval-editor > .CodeMirror-scroll {
+    width: 336px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content.wide width */
+    overflow: hidden;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js
new file mode 100644
index 000000000..7b0f18d4b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js
@@ -0,0 +1,209 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BreakpointActionView = class BreakpointActionView extends WebInspector.Object
+{
+    constructor(action, delegate, omitFocus)
+    {
+        super();
+
+        console.assert(action);
+        console.assert(delegate);
+        console.assert(DebuggerAgent.BreakpointActionType);
+
+        this._action = action;
+        this._delegate = delegate;
+
+        this._element = document.createElement("div");
+        this._element.className = "breakpoint-action-block";
+
+        var header = this._element.appendChild(document.createElement("div"));
+        header.className = "breakpoint-action-block-header";
+
+        var picker = header.appendChild(document.createElement("select"));
+        picker.addEventListener("change", this._pickerChanged.bind(this));
+
+        for (var key in WebInspector.BreakpointAction.Type) {
+            var type = WebInspector.BreakpointAction.Type[key];
+            var option = document.createElement("option");
+            option.textContent = WebInspector.BreakpointActionView.displayStringForType(type);
+            option.selected = this._action.type === type;
+            option.value = type;
+            picker.add(option);
+        }
+
+        var appendActionButton = header.appendChild(document.createElement("button"));
+        appendActionButton.className = "breakpoint-action-append-button";
+        appendActionButton.addEventListener("click", this._appendActionButtonClicked.bind(this));
+        appendActionButton.title = WebInspector.UIString("Add new breakpoint action after this action");
+
+        var removeActionButton = header.appendChild(document.createElement("button"));
+        removeActionButton.className = "breakpoint-action-remove-button";
+        removeActionButton.addEventListener("click", this._removeAction.bind(this));
+        removeActionButton.title = WebInspector.UIString("Remove this breakpoint action");
+
+        this._bodyElement = this._element.appendChild(document.createElement("div"));
+        this._bodyElement.className = "breakpoint-action-block-body";
+
+        this._updateBody(omitFocus);
+    }
+
+    // Static
+
+    static displayStringForType(type)
+    {
+        switch (type) {
+        case WebInspector.BreakpointAction.Type.Log:
+            return WebInspector.UIString("Log Message");
+        case WebInspector.BreakpointAction.Type.Evaluate:
+            return WebInspector.UIString("Evaluate JavaScript");
+        case WebInspector.BreakpointAction.Type.Sound:
+            return WebInspector.UIString("Play Sound");
+        case WebInspector.BreakpointAction.Type.Probe:
+            return WebInspector.UIString("Probe Expression");
+        default:
+            console.assert(false);
+            return "";
+        }
+    }
+
+    // Public
+
+    get action()
+    {
+        return this._action;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    // Private
+
+    _pickerChanged(event)
+    {
+        var newType = event.target.value;
+        this._action = this._action.breakpoint.recreateAction(newType, this._action);
+        this._updateBody();
+        this._delegate.breakpointActionViewResized(this);
+    }
+
+    _appendActionButtonClicked(event)
+    {
+        var newAction = this._action.breakpoint.createAction(this._action.type, this._action);
+        this._delegate.breakpointActionViewAppendActionView(this, newAction);
+    }
+
+    _removeAction()
+    {
+        this._action.breakpoint.removeAction(this._action);
+        this._delegate.breakpointActionViewRemoveActionView(this);
+    }
+
+    _updateBody(omitFocus)
+    {
+        this._bodyElement.removeChildren();
+
+        switch (this._action.type) {
+        case WebInspector.BreakpointAction.Type.Log:
+            this._bodyElement.hidden = false;
+
+            var input = this._bodyElement.appendChild(document.createElement("input"));
+            input.placeholder = WebInspector.UIString("Message");
+            input.addEventListener("change", this._logInputChanged.bind(this));
+            input.value = this._action.data || "";
+            input.spellcheck = false;
+            if (!omitFocus)
+                setTimeout(function() { input.focus(); }, 0);
+
+            break;
+
+        case WebInspector.BreakpointAction.Type.Evaluate:
+        case WebInspector.BreakpointAction.Type.Probe:
+            this._bodyElement.hidden = false;
+
+            var editorElement = this._bodyElement.appendChild(document.createElement("div"));
+            editorElement.classList.add("breakpoint-action-eval-editor");
+            editorElement.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+
+            this._codeMirror = WebInspector.CodeMirrorEditor.create(editorElement, {
+                lineWrapping: true,
+                mode: "text/javascript",
+                indentWithTabs: true,
+                indentUnit: 4,
+                matchBrackets: true,
+                value: this._action.data || "",
+            });
+
+            this._codeMirror.on("viewportChange", this._codeMirrorViewportChanged.bind(this));
+            this._codeMirror.on("blur", this._codeMirrorBlurred.bind(this));
+
+            this._codeMirrorViewport = {from: null, to: null};
+
+            var completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror);
+            completionController.addExtendedCompletionProvider("javascript", WebInspector.javaScriptRuntimeCompletionProvider);
+
+            // CodeMirror needs a refresh after the popover displays, to layout, otherwise it doesn't appear.
+            setTimeout(function() {
+                this._codeMirror.refresh();
+                if (!omitFocus)
+                    this._codeMirror.focus();
+            }.bind(this), 0);
+
+            break;
+
+        case WebInspector.BreakpointAction.Type.Sound:
+            this._bodyElement.hidden = true;
+            break;
+
+        default:
+            console.assert(false);
+            this._bodyElement.hidden = true;
+            break;
+        }
+    }
+
+    _logInputChanged(event)
+    {
+        this._action.data = event.target.value;
+    }
+
+    _codeMirrorBlurred(event)
+    {
+        // Throw away the expression if it's just whitespace.
+        this._action.data = (this._codeMirror.getValue() || "").trim();
+    }
+
+    _codeMirrorViewportChanged(event, from, to)
+    {
+        if (this._codeMirrorViewport.from === from && this._codeMirrorViewport.to === to)
+            return;
+
+        this._codeMirrorViewport.from = from;
+        this._codeMirrorViewport.to = to;
+        this._delegate.breakpointActionViewResized(this);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
new file mode 100644
index 000000000..cfb25bf06
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointPopoverController.css
@@ -0,0 +1,81 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.popover .edit-breakpoint-popover-content {
+    width: 420px;
+    padding: 5px 15px;
+}
+
+.popover .edit-breakpoint-popover-content.wide {
+    width: 460px;
+}
+
+.popover .edit-breakpoint-popover-content > label.toggle {
+    color: black;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.popover .edit-breakpoint-popover-content > table {
+    width: 100%;
+}
+
+.popover .edit-breakpoint-popover-content > table > tr > th {
+    color: hsl(0, 0%, 34%);
+    font-weight: bold;
+    text-align: right;
+    width: 1px; /* Shrink to fit. */
+    vertical-align: top;
+    line-height: 23px;
+    white-space: nowrap;
+}
+
+.popover .edit-breakpoint-popover-content > table > tr > td {
+    padding-left: 5px;
+}
+
+.edit-breakpoint-popover-condition {
+    width: 100%;
+    padding: 4px 0 2px 0;
+    -webkit-appearance: textfield;
+    border: 1px solid hsl(0, 0%, 78%);
+    background: white;
+}
+
+.edit-breakpoint-popover-condition > .CodeMirror {
+    width: 320px; /* NOTE: Fixed value, manually tuned to .edit-breakpoint-popover-content width. */
+    height: auto;
+}
+
+#edit-breakpoint-popover-ignore {
+    width: 40px;
+    margin-right: 4px;
+}
+
+#edit-breakpoint-popoover-auto-continue {
+    margin-left: 0;
+    margin-right: 4px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
new file mode 100644
index 000000000..64a9cade0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.css
@@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item.breakpoint .status > .status-image {
+    width: 21px;
+    height: 12px;
+    content: url(../Images/BreakpointInactiveButton.svg);
+    margin-top: 3px;
+}
+
+.item.breakpoint .status > .status-image.resolved {
+    content: url(../Images/BreakpointButton.svg);
+}
+
+.item.breakpoint .status > .status-image.auto-continue {
+    opacity: 0.6;
+}
+
+.item.breakpoint .status > .status-image.disabled {
+    opacity: 0.35;
+}
+
+.item.breakpoint .subtitle.formatted-location {
+    font-style: italic;
+}
+
+.breakpoint-exception-icon .icon {
+    content: url(../Images/Exception.svg);
+}
+
+.breakpoint-paused-icon .icon {
+    content: url(../Images/PausedBreakpoint.svg);
+}
+
+/* When animating a layer on top of a tree element's icon, move the main
+icon to the icon element's background so animations are layered on top. */
+.breakpoint-generic-line-icon .icon {
+    background-image: url(../Images/ResultLine.svg);
+    content: '';
+}
+
+.breakpoint-generic-line-icon .icon > span {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: 50%;
+    transform: scale(0);
+    transition: none;
+    background-color: hsl(216, 30%, 42%);
+}
+
+.data-updated.breakpoint-generic-line-icon .icon > span {
+    border-radius: 0;
+    transform: scale(0.85);
+    transition: all .4s ease-out;
+    background-color: hsla(216, 30%, 42%, 0.1);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
new file mode 100644
index 000000000..603353510
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js
@@ -0,0 +1,270 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.BreakpointTreeElement = class BreakpointTreeElement extends WebInspector.DebuggerTreeElement
+{
+    constructor(breakpoint, className, title)
+    {
+        console.assert(breakpoint instanceof WebInspector.Breakpoint);
+
+        if (!className)
+            className = WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName;
+
+        super(["breakpoint", className], title, null, breakpoint, false);
+
+        this._breakpoint = breakpoint;
+        this._probeSet = null;
+
+        this._listenerSet = new WebInspector.EventListenerSet(this, "BreakpointTreeElement listeners");
+        if (!title)
+            this._listenerSet.register(breakpoint, WebInspector.Breakpoint.Event.LocationDidChange, this._breakpointLocationDidChange);
+        this._listenerSet.register(breakpoint, WebInspector.Breakpoint.Event.DisabledStateDidChange, this._updateStatus);
+        this._listenerSet.register(breakpoint, WebInspector.Breakpoint.Event.AutoContinueDidChange, this._updateStatus);
+        this._listenerSet.register(breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateStatus);
+        this._listenerSet.register(WebInspector.debuggerManager, WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._updateStatus);
+
+        this._listenerSet.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded);
+        this._listenerSet.register(WebInspector.probeManager, WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved);
+
+        this._statusImageElement = document.createElement("img");
+        this._statusImageElement.className = WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName;
+        this._listenerSet.register(this._statusImageElement, "mousedown", this._statusImageElementMouseDown);
+        this._listenerSet.register(this._statusImageElement, "click", this._statusImageElementClicked);
+
+        if (!title)
+            this._updateTitles();
+        this._updateStatus();
+
+        this.status = this._statusImageElement;
+
+        this._iconAnimationLayerElement = document.createElement("span");
+        this.iconElement.appendChild(this._iconAnimationLayerElement);
+    }
+
+    // Public
+
+    get breakpoint()
+    {
+        return this._breakpoint;
+    }
+
+    get filterableData()
+    {
+        return {text: [this.breakpoint.url]};
+    }
+
+    ondelete()
+    {
+        if (!WebInspector.debuggerManager.isBreakpointRemovable(this._breakpoint))
+            return false;
+
+        WebInspector.debuggerManager.removeBreakpoint(this._breakpoint);
+        return true;
+    }
+
+    onenter()
+    {
+        this._breakpoint.cycleToNextMode();
+        return true;
+    }
+
+    onspace()
+    {
+        this._breakpoint.cycleToNextMode();
+        return true;
+    }
+
+    oncontextmenu(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        WebInspector.breakpointPopoverController.appendContextMenuItems(contextMenu, this._breakpoint, this._statusImageElement);
+    }
+
+    onattach()
+    {
+        super.onattach();
+
+        this._listenerSet.install();
+
+        for (var probeSet of WebInspector.probeManager.probeSets)
+            if (probeSet.breakpoint === this._breakpoint)
+                this._addProbeSet(probeSet);
+    }
+
+    ondetach()
+    {
+        super.ondetach();
+
+        this._listenerSet.uninstall();
+
+        if (this._probeSet)
+            this._removeProbeSet(this._probeSet);
+    }
+
+    removeStatusImage()
+    {
+        this._statusImageElement.remove();
+        this._statusImageElement = null;
+    }
+
+    // Private
+
+    _updateTitles()
+    {
+        var sourceCodeLocation = this._breakpoint.sourceCodeLocation;
+
+        var displayLineNumber = sourceCodeLocation.displayLineNumber;
+        var displayColumnNumber = sourceCodeLocation.displayColumnNumber;
+        if (displayColumnNumber > 0)
+            this.mainTitle = WebInspector.UIString("Line %d:%d").format(displayLineNumber + 1, displayColumnNumber + 1); // The user visible line and column numbers are 1-based.
+        else
+            this.mainTitle = WebInspector.UIString("Line %d").format(displayLineNumber + 1); // The user visible line number is 1-based.
+
+        if (sourceCodeLocation.hasMappedLocation()) {
+            this.subtitle = sourceCodeLocation.formattedLocationString();
+
+            if (sourceCodeLocation.hasFormattedLocation())
+                this.subtitleElement.classList.add(WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName);
+            else
+                this.subtitleElement.classList.remove(WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName);
+
+            this.tooltip = this.mainTitle + " \u2014 " + WebInspector.UIString("originally %s").format(sourceCodeLocation.originalLocationString());
+        }
+    }
+
+    _updateStatus()
+    {
+        if (!this._statusImageElement)
+            return;
+
+        if (this._breakpoint.disabled)
+            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName);
+        else
+            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName);
+
+        if (this._breakpoint.autoContinue)
+            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
+        else
+            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName);
+
+        if (this._breakpoint.resolved && WebInspector.debuggerManager.breakpointsEnabled)
+            this._statusImageElement.classList.add(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
+        else
+            this._statusImageElement.classList.remove(WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName);
+    }
+
+    _addProbeSet(probeSet)
+    {
+        console.assert(probeSet instanceof WebInspector.ProbeSet);
+        console.assert(probeSet.breakpoint === this._breakpoint);
+        console.assert(probeSet !== this._probeSet);
+
+        this._probeSet = probeSet;
+        probeSet.addEventListener(WebInspector.ProbeSet.Event.SamplesCleared, this._samplesCleared, this);
+        probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+    }
+
+    _removeProbeSet(probeSet)
+    {
+        console.assert(probeSet instanceof WebInspector.ProbeSet);
+        console.assert(probeSet === this._probeSet);
+
+        probeSet.removeEventListener(WebInspector.ProbeSet.Event.SamplesCleared, this._samplesCleared, this);
+        probeSet.dataTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+        this._probeSet = null;
+    }
+
+    _probeSetAdded(event)
+    {
+        var probeSet = event.data.probeSet;
+        if (probeSet.breakpoint === this._breakpoint)
+            this._addProbeSet(probeSet);
+    }
+
+    _probeSetRemoved(event)
+    {
+        var probeSet = event.data.probeSet;
+        if (probeSet.breakpoint === this._breakpoint)
+            this._removeProbeSet(probeSet);
+    }
+
+    _samplesCleared(event)
+    {
+        console.assert(this._probeSet);
+
+        var oldTable = event.data.oldTable;
+        oldTable.removeEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+        this._probeSet.dataTable.addEventListener(WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataUpdated, this);
+    }
+
+    _dataUpdated()
+    {
+        if (this.element.classList.contains(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName)) {
+            clearTimeout(this._removeIconAnimationTimeoutIdentifier);
+            this.element.classList.remove(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
+            // We want to restart the animation, which can only be done by removing the class,
+            // performing layout, and re-adding the class. Try adding class back on next run loop.
+            window.requestAnimationFrame(this._dataUpdated.bind(this));
+            return;
+        }
+
+        this.element.classList.add(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
+        this._removeIconAnimationTimeoutIdentifier = setTimeout(function() {
+            this.element.classList.remove(WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName);
+        }.bind(this), WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration);
+    }
+
+    _breakpointLocationDidChange(event)
+    {
+        console.assert(event.target === this._breakpoint);
+
+        // The Breakpoint has a new display SourceCode. The sidebar will remove us, and ondetach() will clear listeners.
+        if (event.data.oldDisplaySourceCode === this._breakpoint.displaySourceCode)
+            return;
+
+        this._updateTitles();
+    }
+
+    _statusImageElementMouseDown(event)
+    {
+        // To prevent the tree element from selecting.
+        event.stopPropagation();
+    }
+
+    _statusImageElementClicked(event)
+    {
+        this._breakpoint.cycleToNextMode();
+    }
+};
+
+WebInspector.BreakpointTreeElement.GenericLineIconStyleClassName = "breakpoint-generic-line-icon";
+WebInspector.BreakpointTreeElement.StatusImageElementStyleClassName = "status-image";
+WebInspector.BreakpointTreeElement.StatusImageResolvedStyleClassName = "resolved";
+WebInspector.BreakpointTreeElement.StatusImageAutoContinueStyleClassName = "auto-continue";
+WebInspector.BreakpointTreeElement.StatusImageDisabledStyleClassName = "disabled";
+WebInspector.BreakpointTreeElement.FormattedLocationStyleClassName = "formatted-location";
+WebInspector.BreakpointTreeElement.ProbeDataUpdatedStyleClassName = "data-updated";
+
+WebInspector.BreakpointTreeElement.ProbeDataUpdatedAnimationDuration = 400; // milliseconds
diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
new file mode 100644
index 000000000..23b6813a3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar .item.button {
+    width: 26px;
+    justify-content: center;
+}
+
+.navigation-bar .item.button.text-only {
+    width: auto;
+    padding: 1px 8px 3px;
+    margin: 0 2px;
+
+    line-height: 11px;
+    color: hsl(0, 0%, 18%);
+    border: 1px solid transparent;
+    border-radius: 3px;
+    text-align: center;
+    height: auto;
+}
+
+.navigation-bar .item.button > .glyph {
+    color: hsl(0, 0%, 30%);
+}
+
+.navigation-bar .item.button:not(.disabled):active > .glyph {
+    color: hsl(0, 0%, 15%);
+}
+
+.navigation-bar .item.button:not(.disabled):matches(:focus, .activate.activated, .radio.selected) > .glyph {
+    color: hsl(212, 92%, 54%);
+}
+
+.navigation-bar .item.button:not(.disabled):active:matches(:focus, .activate.activated, .radio.selected) > .glyph {
+    color: hsl(218, 85%, 52%);
+}
+
+body.window-inactive .navigation-bar .item.button > .glyph {
+    opacity: 0.65;
+}
+
+.navigation-bar .item.button.disabled > .glyph {
+    opacity: 0.55 !important;
+}
+
+body.window-inactive .navigation-bar .item.button.disabled > .glyph {
+    opacity: 0.35 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
new file mode 100644
index 000000000..fdd063692
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
@@ -0,0 +1,140 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ButtonNavigationItem = class ButtonNavigationItem extends WebInspector.NavigationItem
+{
+    constructor(identifier, toolTipOrLabel, image, imageWidth, imageHeight, role, label)
+    {
+        super(identifier);
+
+        console.assert(identifier);
+        console.assert(toolTipOrLabel);
+
+        this.toolTip = toolTipOrLabel;
+
+        this._element.addEventListener("click", this._mouseClicked.bind(this));
+
+        this._element.setAttribute("role", role || "button");
+
+        if (label)
+            this._element.setAttribute("aria-label", label);
+
+        this._imageWidth = imageWidth || 16;
+        this._imageHeight = imageHeight || 16;
+
+        if (image)
+            this.image = image;
+        else
+            this.label = toolTipOrLabel;
+    }
+
+    // Public
+
+    get toolTip()
+    {
+        return this._element.title;
+    }
+
+    set toolTip(newToolTip)
+    {
+        console.assert(newToolTip);
+        if (!newToolTip)
+            return;
+
+        this._element.title = newToolTip;
+    }
+
+    get label()
+    {
+        return this._element.textContent;
+    }
+
+    set label(newLabel)
+    {
+        this._element.classList.add(WebInspector.ButtonNavigationItem.TextOnlyClassName);
+        this._element.textContent = newLabel || "";
+        if (this.parentNavigationBar)
+            this.parentNavigationBar.needsLayout();
+    }
+
+    get image()
+    {
+        return this._image;
+    }
+
+    set image(newImage)
+    {
+        if (!newImage) {
+            this._element.removeChildren();
+            return;
+        }
+
+        this._element.removeChildren();
+        this._element.classList.remove(WebInspector.ButtonNavigationItem.TextOnlyClassName);
+
+        this._image = newImage;
+
+        this._glyphElement = useSVGSymbol(this._image, "glyph");
+        this._glyphElement.style.width = this._imageWidth + "px";
+        this._glyphElement.style.height = this._imageHeight + "px";
+        this._element.appendChild(this._glyphElement);
+    }
+
+    get enabled()
+    {
+        return !this._element.classList.contains(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
+    }
+
+    set enabled(flag)
+    {
+        if (flag)
+            this._element.classList.remove(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
+        else
+            this._element.classList.add(WebInspector.ButtonNavigationItem.DisabledStyleClassName);
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["button"];
+    }
+
+    // Private
+
+    _mouseClicked(event)
+    {
+        if (!this.enabled)
+            return;
+        this.dispatchEventToListeners(WebInspector.ButtonNavigationItem.Event.Clicked);
+    }
+}
+
+WebInspector.ButtonNavigationItem.DisabledStyleClassName = "disabled";
+WebInspector.ButtonNavigationItem.TextOnlyClassName = "text-only";
+
+WebInspector.ButtonNavigationItem.Event = {
+    Clicked: "button-navigation-item-clicked"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css b/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
new file mode 100644
index 000000000..ef1469dba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.css
@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar .item.button {
+    align-items: center;
+    justify-content: center;
+
+    margin: 4px;
+    padding: 0 10px;
+}
+
+.toolbar.icon-and-label-vertical .item.button {
+    flex-direction: column;
+}
+
+.toolbar.icon-and-label-horizontal .item.button {
+    flex-direction: row;
+}
+
+.toolbar .item.button > .glyph {
+    width: 32px;
+    height: 32px;
+
+    color: hsl(0, 0%, 45%);
+}
+
+.toolbar .item.button:not(.disabled):active > .glyph {
+    color: hsl(0, 0%, 30%);
+}
+
+.toolbar .item.button:not(.disabled):matches(:focus, .activate.activated) > .glyph {
+    color: hsl(212, 92%, 54%);
+}
+
+.toolbar .item.button:not(.disabled):active:matches(:focus, .activate.activated) > .glyph {
+    color: hsl(218, 85%, 52%);
+}
+
+.toolbar.small-size .item.button > .glyph {
+    width: 16px;
+    height: 16px;
+}
+
+.toolbar.label-only .item.button > .glyph {
+    display: none;
+}
+
+.toolbar .item.button > .label {
+    text-align: center;
+    color: hsl(0, 0%, 31%);
+}
+
+.toolbar.label-only .item.activate.button.activated > .label {
+    color: hsl(206, 69%, 45%);
+}
+
+.toolbar.icon-and-label-horizontal .item.button > .label {
+    margin-left: 4px;
+}
+
+.toolbar.icon-only .item.button > .label {
+    display: none;
+}
+
+body.window-inactive .toolbar .item.button {
+    opacity: 0.65;
+}
+
+.toolbar .item.button.disabled {
+    opacity: 0.55 !important;
+}
+
+body.window-inactive .toolbar .item.button.disabled {
+    opacity: 0.35 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js b/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js
new file mode 100644
index 000000000..b2c7a2b7c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonToolbarItem.js
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ButtonToolbarItem = class ButtonToolbarItem extends WebInspector.ButtonNavigationItem
+{
+    constructor(identifier, toolTip, label, image, role)
+    {
+        super(identifier, toolTip, image, 16, 16, role);
+
+        if (typeof label === "string") {
+            this._labelElement = document.createElement("div");
+            this._labelElement.className = WebInspector.ButtonToolbarItem.LabelStyleClassName;
+            this._element.appendChild(this._labelElement);
+
+            this.label = label;
+        }
+    }
+
+    // Public
+
+    get label()
+    {
+        return this._labelElement.textContent;
+    }
+
+    set label(newLabel)
+    {
+        console.assert(newLabel);
+        if (!newLabel || !this._labelElement)
+            return;
+
+        this._labelElement.textContent = newLabel;
+    }
+};
+
+WebInspector.ButtonToolbarItem.LabelStyleClassName = "label";
diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
new file mode 100644
index 000000000..9ecb95ddc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
@@ -0,0 +1,175 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.style-declaration-section {
+    display: flex;
+    flex-direction: column;
+
+    padding: 3px;
+}
+
+.style-declaration-section.locked {
+    background-color: hsl(0, 0%, 97%);
+}
+
+.style-declaration-section:not(.locked) {
+    background-color: white;
+    border-top-color: hsla(0, 0%, 0%, 0.2);
+}
+
+.style-declaration-section.last-in-group {
+    margin-bottom: 10px;
+
+    border-bottom: 1px solid hsla(0, 0%, 0%, 0.3);
+}
+
+.style-declaration-section + .style-declaration-section {
+    border-top: 1px solid hsla(0, 0%, 0%, 0.15);
+}
+
+.style-declaration-section:last-child {
+    margin-bottom: 0 !important;
+}
+
+.style-declaration-section > .header {
+    position: relative;
+
+    padding: 4px 5px 3px 25px;
+
+    font-size: 11px;
+    line-height: 12px;
+}
+
+.style-declaration-section > .header > .icon {
+    position: absolute;
+
+    top: 2px;
+    left: 4px;
+
+    width: 16px;
+    height: 16px;
+}
+
+.style-declaration-section > .header > .icon.toggle-able:hover {
+    filter: brightness(0.9);
+}
+
+.style-declaration-section > .header > .icon.toggle-able:active {
+    filter: brightness(0.8);
+}
+
+.style-declaration-section:not(.invalid-selector).rule-disabled > .header > .icon {
+    opacity: 0.5;
+}
+
+.style-declaration-section > .header > .selector {
+    font-family: Menlo, monospace;
+    color: hsl(0, 0%, 50%);
+
+    outline: none;
+
+    cursor: text;
+
+    word-wrap: break-word;
+
+    -webkit-user-select: text;
+    -webkit-user-modify: read-write-plaintext-only;
+}
+
+.style-declaration-section > .header > .selector:empty {
+    /* This prevents the cursor from disappearing when empty. */
+    display: inline-block;
+    min-width: 1px;
+}
+
+.style-declaration-section > .header > .selector:empty::before {
+    /* This prevents the cursor from positioning badly when empty. */
+    content: "";
+}
+
+.style-declaration-section > .header > .selector:focus {
+    color: black;
+}
+
+.style-declaration-section:matches(.locked, .selector-locked) > .header > .selector {
+    -webkit-user-modify: read-only;
+}
+
+.style-declaration-section.locked > .header::before {
+    float: right;
+
+    content: "";
+
+    width: 8px;
+    height: 10px;
+
+    background-image: url(../Images/Locked.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 8px 10px;
+
+    margin-left: 5px;
+}
+
+.style-declaration-section > .header > .selector > .matched {
+    color: black;
+}
+
+.style-declaration-section > .header > .origin {
+    line-height: 10px;
+
+    color: hsl(0, 0%, 50%);
+
+    word-wrap: break-word;
+    white-space: nowrap;
+}
+
+.style-declaration-section > .header > .origin a {
+    white-space: normal;
+}
+
+.style-declaration-section > .header > .origin > .go-to-link {
+    color: inherit !important;
+}
+
+.style-declaration-section.invalid-selector > .header > .icon {
+    top: 4px;
+    left: 6px;
+    width: 12px;
+    height: 12px;
+    content: url(../Images/Error.svg);
+}
+
+.style-declaration-section.invalid-selector > .header > .selector,
+.style-declaration-section.invalid-selector > .header > .selector> * {
+    color: red;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .style-declaration-section,
+    .sidebar > .panel.details.css-style > .content > .pseudo-classes {
+        border-width: 0.5px !important;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js
new file mode 100644
index 000000000..3978f5a1b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js
@@ -0,0 +1,693 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDeclarationSection = class CSSStyleDeclarationSection extends WebInspector.Object
+{
+    constructor(delegate, style)
+    {
+        console.assert(style instanceof WebInspector.CSSStyleDeclaration, style);
+
+        super();
+
+        this._delegate = delegate || null;
+
+        this._style = style || null;
+        this._selectorElements = [];
+        this._ruleDisabled = false;
+        this._hasInvalidSelector = false;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("style-declaration-section");
+
+        new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this), this._element);
+
+        this._headerElement = document.createElement("div");
+        this._headerElement.classList.add("header");
+
+        this._iconElement = document.createElement("img");
+        this._iconElement.classList.add("icon");
+        this._headerElement.appendChild(this._iconElement);
+
+        this._selectorElement = document.createElement("span");
+        this._selectorElement.classList.add("selector");
+        this._selectorElement.setAttribute("spellcheck", "false");
+        this._selectorElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
+        this._selectorElement.addEventListener("mouseout", this._handleMouseOut.bind(this));
+        this._selectorElement.addEventListener("keydown", this._handleKeyDown.bind(this));
+        this._selectorElement.addEventListener("keyup", this._handleKeyUp.bind(this));
+        this._selectorElement.addEventListener("paste", this._handleSelectorPaste.bind(this));
+        this._headerElement.appendChild(this._selectorElement);
+
+        this._originElement = document.createElement("span");
+        this._originElement.classList.add("origin");
+        this._headerElement.appendChild(this._originElement);
+
+        this._propertiesElement = document.createElement("div");
+        this._propertiesElement.classList.add("properties");
+
+        this._editorActive = false;
+        this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this, style);
+        this._propertiesTextEditor.addEventListener(WebInspector.CSSStyleDeclarationTextEditor.Event.ContentChanged, this._editorContentChanged.bind(this));
+        this._propertiesTextEditor.addEventListener(WebInspector.CSSStyleDeclarationTextEditor.Event.Blurred, this._editorBlurred.bind(this));
+        this._propertiesElement.appendChild(this._propertiesTextEditor.element);
+
+        this._element.appendChild(this._headerElement);
+        this._element.appendChild(this._propertiesElement);
+
+        var iconClassName;
+        switch (style.type) {
+        case WebInspector.CSSStyleDeclaration.Type.Rule:
+            console.assert(style.ownerRule);
+
+            if (style.inherited)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Author)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.User)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Inspector)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName;
+            break;
+
+        case WebInspector.CSSStyleDeclaration.Type.Inline:
+        case WebInspector.CSSStyleDeclaration.Type.Attribute:
+            if (style.inherited)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName;
+            else
+                iconClassName = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
+            break;
+        }
+
+        if (style.editable) {
+            this._iconElement.classList.add("toggle-able");
+            this._iconElement.title = WebInspector.UIString("Comment All Properties");
+            this._iconElement.addEventListener("click", this._handleIconElementClicked.bind(this));
+        }
+
+        console.assert(iconClassName);
+        this._element.classList.add(iconClassName);
+
+        if (!style.editable)
+            this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LockedStyleClassName);
+        else if (style.ownerRule) {
+            this._style.ownerRule.addEventListener(WebInspector.CSSRule.Event.SelectorChanged, this._updateSelectorIcon.bind(this));
+            this._commitSelectorKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter, this._commitSelector.bind(this), this._selectorElement);
+            this._selectorElement.addEventListener("blur", this._commitSelector.bind(this));
+        } else
+            this._element.classList.add(WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName);
+
+        this.refresh();
+
+        this._headerElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get style()
+    {
+        return this._style;
+    }
+
+    get lastInGroup()
+    {
+        return this._element.classList.contains(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
+    }
+
+    set lastInGroup(last)
+    {
+        if (last)
+            this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
+    }
+
+    get focused()
+    {
+        return this._propertiesTextEditor.focused;
+    }
+
+    focus()
+    {
+        this._propertiesTextEditor.focus();
+    }
+
+    refresh()
+    {
+        this._selectorElement.removeChildren();
+        this._originElement.removeChildren();
+        this._selectorElements = [];
+
+        this._originElement.append(" \u2014 ");
+
+        function appendSelector(selector, matched)
+        {
+            console.assert(selector instanceof WebInspector.CSSSelector);
+
+            var selectorElement = document.createElement("span");
+            selectorElement.textContent = selector.text;
+
+            if (matched)
+                selectorElement.classList.add(WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName);
+
+            var specificity = selector.specificity;
+            if (specificity) {
+                var tooltip = WebInspector.UIString("Specificity: (%d, %d, %d)").format(specificity[0], specificity[1], specificity[2]);
+                if (selector.dynamic) {
+                    tooltip += "\n";
+                    if (this._style.inherited)
+                        tooltip += WebInspector.UIString("Dynamically calculated for the parent element");
+                    else
+                        tooltip += WebInspector.UIString("Dynamically calculated for the selected element");
+                }
+                selectorElement.title = tooltip;
+            } else if (selector.dynamic) {
+                var tooltip = WebInspector.UIString("Specificity: No value for selected element");
+                tooltip += "\n";
+                tooltip += WebInspector.UIString("Dynamically calculated for the selected element and did not match");
+                selectorElement.title = tooltip;
+            }
+
+            this._selectorElement.appendChild(selectorElement);
+            this._selectorElements.push(selectorElement);
+        }
+
+        function appendSelectorTextKnownToMatch(selectorText)
+        {
+            var selectorElement = document.createElement("span");
+            selectorElement.textContent = selectorText;
+            selectorElement.classList.add(WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName);
+            this._selectorElement.appendChild(selectorElement);
+        }
+
+        switch (this._style.type) {
+        case WebInspector.CSSStyleDeclaration.Type.Rule:
+            console.assert(this._style.ownerRule);
+
+            var selectors = this._style.ownerRule.selectors;
+            var matchedSelectorIndices = this._style.ownerRule.matchedSelectorIndices;
+            var alwaysMatch = !matchedSelectorIndices.length;
+            if (selectors.length) {
+                for (var i = 0; i < selectors.length; ++i) {
+                    appendSelector.call(this, selectors[i], alwaysMatch || matchedSelectorIndices.includes(i));
+                    if (i < selectors.length - 1)
+                        this._selectorElement.append(", ");
+                }
+            } else
+                appendSelectorTextKnownToMatch.call(this, this._style.ownerRule.selectorText);
+
+            if (this._style.ownerRule.sourceCodeLocation) {
+                var sourceCodeLink = WebInspector.createSourceCodeLocationLink(this._style.ownerRule.sourceCodeLocation, true);
+                this._originElement.appendChild(sourceCodeLink);
+            } else {
+                var originString;
+                switch (this._style.ownerRule.type) {
+                case WebInspector.CSSStyleSheet.Type.Author:
+                    originString = WebInspector.UIString("Author Stylesheet");
+                    break;
+
+                case WebInspector.CSSStyleSheet.Type.User:
+                    originString = WebInspector.UIString("User Stylesheet");
+                    break;
+
+                case WebInspector.CSSStyleSheet.Type.UserAgent:
+                    originString = WebInspector.UIString("User Agent Stylesheet");
+                    break;
+
+                case WebInspector.CSSStyleSheet.Type.Inspector:
+                    originString = WebInspector.UIString("Web Inspector");
+                    break;
+                }
+
+                console.assert(originString);
+                if (originString)
+                    this._originElement.append(originString);
+            }
+
+            break;
+
+        case WebInspector.CSSStyleDeclaration.Type.Inline:
+            appendSelectorTextKnownToMatch.call(this, WebInspector.displayNameForNode(this._style.node));
+            this._originElement.append(WebInspector.UIString("Style Attribute"));
+            break;
+
+        case WebInspector.CSSStyleDeclaration.Type.Attribute:
+            appendSelectorTextKnownToMatch.call(this, WebInspector.displayNameForNode(this._style.node));
+            this._originElement.append(WebInspector.UIString("HTML Attributes"));
+            break;
+        }
+
+        this._updateSelectorIcon();
+    }
+
+    highlightProperty(property)
+    {
+        if (this._propertiesTextEditor.highlightProperty(property)) {
+            this._element.scrollIntoView();
+            return true;
+        }
+
+        return false;
+    }
+
+    findMatchingPropertiesAndSelectors(needle)
+    {
+        this._element.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
+
+        var hasMatchingSelector = false;
+
+        for (var selectorElement of this._selectorElements) {
+            selectorElement.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
+
+            if (needle && selectorElement.textContent.includes(needle)) {
+                selectorElement.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
+                hasMatchingSelector = true;
+            }
+        }
+
+        if (!needle) {
+            this._propertiesTextEditor.resetFilteredProperties();
+            return false;
+        }
+
+        var hasMatchingProperty = this._propertiesTextEditor.findMatchingProperties(needle);
+
+        if (!hasMatchingProperty && !hasMatchingSelector) {
+            this._element.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
+            return false;
+        }
+
+        return true;
+    }
+
+    updateLayout()
+    {
+        this._propertiesTextEditor.updateLayout();
+    }
+
+    clearSelection()
+    {
+        this._propertiesTextEditor.clearSelection();
+    }
+
+    cssStyleDeclarationTextEditorFocused()
+    {
+        if (typeof this._delegate.cssStyleDeclarationSectionEditorFocused === "function")
+            this._delegate.cssStyleDeclarationSectionEditorFocused(this);
+    }
+
+    cssStyleDeclarationTextEditorBlurActiveEditor()
+    {
+        if (typeof this._delegate.cssStyleDeclarationSectionBlurActiveEditor === "function")
+            this._delegate.cssStyleDeclarationSectionBlurActiveEditor(this);
+    }
+
+    cssStyleDeclarationTextEditorSwitchRule(reverse)
+    {
+        if (!this._delegate)
+            return;
+
+        if (reverse && typeof this._delegate.cssStyleDeclarationSectionEditorPreviousRule === "function")
+            this._delegate.cssStyleDeclarationSectionEditorPreviousRule(this);
+        else if (!reverse && typeof this._delegate.cssStyleDeclarationSectionEditorNextRule === "function")
+            this._delegate.cssStyleDeclarationSectionEditorNextRule(this);
+    }
+
+    focusRuleSelector(reverse)
+    {
+        if (this.selectorLocked) {
+            this.focus();
+            return;
+        }
+
+        if (this.locked) {
+            this.cssStyleDeclarationTextEditorSwitchRule(reverse);
+            return;
+        }
+
+        var selection = window.getSelection();
+        selection.removeAllRanges();
+
+        this._element.scrollIntoViewIfNeeded();
+
+        var range = document.createRange();
+        range.selectNodeContents(this._selectorElement);
+        selection.addRange(range);
+    }
+
+    selectLastProperty()
+    {
+        this._propertiesTextEditor.selectLastProperty();
+    }
+
+    get selectorLocked()
+    {
+        return !this.locked && !this._style.ownerRule;
+    }
+
+    get locked()
+    {
+        return !this._style.editable;
+    }
+
+    get editorActive()
+    {
+        return this._editorActive;
+    }
+
+    // Private
+
+    get _currentSelectorText()
+    {
+        var selectorText = this._selectorElement.textContent;
+        if (!selectorText || !selectorText.length) {
+            if (!this._style.ownerRule)
+                return;
+
+            selectorText = this._style.ownerRule.selectorText;
+        }
+
+        return selectorText.trim();
+    }
+
+    _handleSelectorPaste(event)
+    {
+        if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline || !this._style.ownerRule)
+            return;
+
+        if (!event || !event.clipboardData)
+            return;
+
+        var data = event.clipboardData.getData("text/plain");
+        if (!data)
+            return;
+
+        function parseTextForRule(text)
+        {
+            var containsBraces = /[\{\}]/;
+            if (!containsBraces.test(text))
+                return null;
+
+            var match = text.match(/([^{]+){(.*)}/);
+            if (!match)
+                return null;
+
+            // If the match "body" contains braces, parse that body as if it were a rule.
+            // This will usually happen if the user includes a media query in the copied text.
+            return containsBraces.test(match[2]) ? parseTextForRule(match[2]) : match;
+        }
+
+        var match = parseTextForRule(data);
+        if (!match)
+            return;
+
+        var selector = match[1].trim();
+        this._selectorElement.textContent = selector;
+        this._style.nodeStyles.changeRule(this._style.ownerRule, selector, match[2]);
+        event.preventDefault();
+    }
+
+    _handleContextMenuEvent(event)
+    {
+        if (window.getSelection().toString().length)
+            return;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        contextMenu.appendItem(WebInspector.UIString("Copy Rule"), () => {
+            InspectorFrontendHost.copyText(this._style.generateCSSRuleString());
+        });
+
+        if (this._style.inherited)
+            return;
+
+        contextMenu.appendItem(WebInspector.UIString("Duplicate Selector"), () => {
+            if (this._delegate && typeof this._delegate.focusEmptySectionWithStyle === "function") {
+                let existingRules = this._style.nodeStyles.rulesForSelector(this._currentSelectorText);
+                for (let rule of existingRules) {
+                    if (this._delegate.focusEmptySectionWithStyle(rule.style))
+                        return;
+                }
+            }
+
+            if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector === "function")
+                this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(this._currentSelectorText);
+
+            this._style.nodeStyles.addRule(this._currentSelectorText);
+        });
+
+        // Only used one colon temporarily since single-colon pseudo elements are valid CSS.
+        if (WebInspector.CSSStyleManager.PseudoElementNames.some((className) => this._style.selectorText.includes(":" + className)))
+            return;
+
+        if (WebInspector.CSSStyleManager.ForceablePseudoClasses.every((className) => !this._style.selectorText.includes(":" + className))) {
+            contextMenu.appendSeparator();
+
+            for (let pseudoClass of WebInspector.CSSStyleManager.ForceablePseudoClasses) {
+                if (pseudoClass === "visited" && this._style.node.nodeName() !== "A")
+                    continue;
+
+                let pseudoClassSelector = ":" + pseudoClass;
+
+                contextMenu.appendItem(WebInspector.UIString("Add %s Rule").format(pseudoClassSelector), () => {
+                    this._style.node.setPseudoClassEnabled(pseudoClass, true);
+
+                    let selector;
+                    if (this._style.ownerRule)
+                        selector = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoClassSelector).join(", ");
+                    else
+                        selector = this._currentSelectorText + pseudoClassSelector;
+
+                    if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector === "function")
+                        this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(selector);
+
+                    this._style.nodeStyles.addRule(selector);
+                });
+            }
+        }
+
+        contextMenu.appendSeparator();
+
+        for (let pseudoElement of WebInspector.CSSStyleManager.PseudoElementNames) {
+            let pseudoElementSelector = "::" + pseudoElement;
+            const styleText = "content: \"\";";
+
+            let existingSection = null;
+            if (this._delegate && typeof this._delegate.sectionForStyle === "function") {
+                let existingRules = this._style.nodeStyles.rulesForSelector(this._currentSelectorText + pseudoElementSelector);
+                if (existingRules.length) {
+                    // There shouldn't really ever be more than one pseudo-element rule
+                    // that is not in a media query. As such, just focus the first rule
+                    // on the assumption that it is the only one necessary.
+                    existingSection = this._delegate.sectionForStyle(existingRules[0].style);
+                }
+            }
+
+            let title = existingSection ? WebInspector.UIString("Focus %s Rule") : WebInspector.UIString("Create %s Rule");
+            contextMenu.appendItem(title.format(pseudoElementSelector), () => {
+                if (existingSection) {
+                    existingSection.focus();
+                    return;
+                }
+
+                let selector;
+                if (this._style.ownerRule)
+                    selector = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoElementSelector).join(", ");
+                else
+                    selector = this._currentSelectorText + pseudoElementSelector;
+
+                if (this._delegate && typeof this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector === "function")
+                    this._delegate.cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(selector);
+
+                this._style.nodeStyles.addRule(selector, styleText);
+            });
+        }
+    }
+
+    _handleIconElementClicked()
+    {
+        if (this._hasInvalidSelector) {
+            // This will revert the selector text to the original valid value.
+            this.refresh();
+            return;
+        }
+
+        this._ruleDisabled = this._ruleDisabled ? !this._propertiesTextEditor.uncommentAllProperties() : this._propertiesTextEditor.commentAllProperties();
+        this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties");
+        this._element.classList.toggle("rule-disabled", this._ruleDisabled);
+    }
+
+    _highlightNodesWithSelector()
+    {
+        if (!this._style.ownerRule) {
+            WebInspector.domTreeManager.highlightDOMNode(this._style.node.id);
+            return;
+        }
+
+        WebInspector.domTreeManager.highlightSelector(this._currentSelectorText, this._style.node.ownerDocument.frameIdentifier);
+    }
+
+    _hideDOMNodeHighlight()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    }
+
+    _handleMouseOver(event)
+    {
+        this._highlightNodesWithSelector();
+    }
+
+    _handleMouseOut(event)
+    {
+        this._hideDOMNodeHighlight();
+    }
+
+    _save(event)
+    {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (this._style.type !== WebInspector.CSSStyleDeclaration.Type.Rule) {
+            // FIXME: Can't save CSS inside <style></style> <https://webkit.org/b/150357>
+            InspectorFrontendHost.beep();
+            return;
+        }
+
+        console.assert(this._style.ownerRule instanceof WebInspector.CSSRule);
+        console.assert(this._style.ownerRule.sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
+
+        let sourceCode = this._style.ownerRule.sourceCodeLocation.sourceCode;
+        if (sourceCode.type !== WebInspector.Resource.Type.Stylesheet) {
+            // FIXME: Can't save CSS inside style="" <https://webkit.org/b/150357>
+            InspectorFrontendHost.beep();
+            return;
+        }
+
+        var url;
+        if (sourceCode.urlComponents.scheme === "data") {
+            let mainResource = WebInspector.frameResourceManager.mainFrame.mainResource;
+            let pathDirectory = mainResource.url.slice(0, -mainResource.urlComponents.lastPathComponent.length);
+            url = pathDirectory + "base64.css";
+        } else
+            url = sourceCode.url;
+
+        const saveAs = event.shiftKey;
+        WebInspector.saveDataToFile({url: url, content: sourceCode.content}, saveAs);
+    }
+
+    _handleKeyDown(event)
+    {
+        if (event.keyCode !== 9) {
+            this._highlightNodesWithSelector();
+            return;
+        }
+
+        if (event.shiftKey && this._delegate && typeof this._delegate.cssStyleDeclarationSectionEditorPreviousRule === "function") {
+            event.preventDefault();
+            this._delegate.cssStyleDeclarationSectionEditorPreviousRule(this, true);
+            return;
+        }
+
+        if (!event.metaKey) {
+            event.preventDefault();
+            this.focus();
+            this._propertiesTextEditor.selectFirstProperty();
+            return;
+        }
+    }
+
+    _handleKeyUp(event)
+    {
+        this._highlightNodesWithSelector();
+    }
+
+    _commitSelector(mutations)
+    {
+        console.assert(this._style.ownerRule);
+        if (!this._style.ownerRule)
+            return;
+
+        var newSelectorText = this._selectorElement.textContent.trim();
+        if (!newSelectorText) {
+            // Revert to the current selector (by doing a refresh) since the new selector is empty.
+            this.refresh();
+            return;
+        }
+
+        this._style.ownerRule.selectorText = newSelectorText;
+    }
+
+    _updateSelectorIcon(event)
+    {
+        if (!this._style.ownerRule || !this._style.editable)
+            return;
+
+        this._hasInvalidSelector = event && event.data && !event.data.valid;
+        this._element.classList.toggle("invalid-selector", !!this._hasInvalidSelector);
+        if (!this._hasInvalidSelector) {
+            this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties");
+            this._selectorElement.title = null;
+            return;
+        }
+
+        this._iconElement.title = WebInspector.UIString("The selector “%s” is invalid.\nClick to revert to the previous selector.").format(this._selectorElement.textContent.trim());
+        this._selectorElement.title = WebInspector.UIString("Using the previous selector “%s”.").format(this._style.ownerRule.selectorText);
+        for (let i = 0; i < this._selectorElement.children.length; ++i)
+            this._selectorElement.children[i].title = null;
+    }
+
+    _editorContentChanged(event)
+    {
+        this._editorActive = true;
+    }
+
+    _editorBlurred(event)
+    {
+        this._editorActive = false;
+        this.dispatchEventToListeners(WebInspector.CSSStyleDeclarationSection.Event.Blurred);
+    }
+};
+
+WebInspector.CSSStyleDeclarationSection.Event = {
+    Blurred: "css-style-declaration-sections-blurred"
+};
+
+WebInspector.CSSStyleDeclarationSection.LockedStyleClassName = "locked";
+WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName = "selector-locked";
+WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName = "last-in-group";
+WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName = "matched";
+
+WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName = "author-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName = "user-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName = "user-agent-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName = "inspector-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName = "inherited-style-rule-icon";
+WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName = "inherited-element-style-rule-icon";
diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css
new file mode 100644
index 000000000..a38bb808e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.css-style-text-editor {
+    background-color: white;
+    padding: 2px 0 1px;
+}
+
+.css-style-text-editor > .CodeMirror {
+    height: auto;
+}
+
+.css-style-text-editor > .CodeMirror-scroll {
+    overflow: hidden;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-placeholder {
+    text-indent: 0;
+}
+
+.css-style-text-editor > .CodeMirror pre {
+    /* Compensate for the checkboxes so properties line up with readonly styles that do not have checkboxes. */
+    padding: 0 5px 0 25px;
+    text-indent: -21px;
+}
+
+.css-style-text-editor > .CodeMirror pre * {
+    text-indent: 0;
+}
+
+.css-style-text-editor.read-only,
+.css-style-text-editor.read-only > .CodeMirror {
+    background-color: transparent;
+}
+
+.css-style-text-editor.read-only > .CodeMirror pre {
+    text-indent: 0;
+}
+
+.css-style-text-editor.read-only > .CodeMirror .CodeMirror-cursor {
+    display: none;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines pre > span span:not(.css-style-declaration-property, .CodeMirror-widget, .cm-comment, .cm-tab),
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property:matches(.disabled, .invalid, .other-vendor, .not-inherited, .overridden) {
+    text-decoration: line-through;
+    -webkit-text-stroke-width: 0.000000000000001px; /* A hack to get a different line-through color. */
+    -webkit-text-stroke-color: hsla(0, 0%, 0%, 0.6);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines pre > span span:not(.css-style-declaration-property, .CodeMirror-widget, .cm-comment, .cm-tab),
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.invalid {
+    -webkit-text-stroke-color: hsla(0, 100%, 50%, 0.6);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .invalid-warning-marker {
+    position: relative;
+    top: 1px; 
+    width: 9px;
+    height: 9px;
+    margin: 0 2px 0 0;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    background-image: url(../Images/Warning.svg);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .invalid-warning-marker.clickable:hover {
+    filter: brightness(0.9);
+}
+
+.computed .css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.implicit,
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .css-style-declaration-property.not-inherited {
+    opacity: 0.5;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property:matches(.disabled, .other-vendor, .not-inherited, .overridden) {
+    -webkit-text-stroke-color: hsla(0, 0%, 0%, 0.3);
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line span:not(.css-style-declaration-property, .CodeMirror-widget, .cm-comment, .cm-tab),
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .editing-line .css-style-declaration-property.invalid {
+    text-decoration: none;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox] {
+    width: 10px;
+    height: 10px;
+    vertical-align: top;
+    margin: 0 8px 0 3px;
+    visibility: hidden;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines .checkbox-placeholder {
+    display: inline-block;
+    width: 21px;
+}
+
+.css-style-text-editor > .CodeMirror .CodeMirror-lines input[type=checkbox]:not(:checked),
+.css-style-text-editor > .CodeMirror.CodeMirror-focused .CodeMirror-lines input[type=checkbox],
+.css-style-text-editor:hover > .CodeMirror .CodeMirror-lines input[type=checkbox] {
+    visibility: visible;
+}
+
+.css-style-text-editor > .CodeMirror .cm-link {
+    /* Style url(...) links as if they are strings. */
+    color: var(--syntax-highlight-string-color);
+    text-decoration: inherit;
+    cursor: inherit;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js
new file mode 100644
index 000000000..9fa639095
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js
@@ -0,0 +1,1694 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Tobias Reiss <tobi+webkit@basecode.de>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDeclarationTextEditor = class CSSStyleDeclarationTextEditor extends WebInspector.Object
+{
+    constructor(delegate, style, element)
+    {
+        super();
+
+        this._element = element || document.createElement("div");
+        this._element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.StyleClassName);
+        this._element.classList.add(WebInspector.SyntaxHighlightedStyleClassName);
+        this._element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+        this._element.addEventListener("mouseup", this._handleMouseUp.bind(this));
+
+        this._mouseDownCursorPosition = null;
+
+        this._showsImplicitProperties = true;
+        this._alwaysShowPropertyNames = {};
+        this._filterResultPropertyNames = null;
+        this._sortProperties = false;
+
+        this._prefixWhitespace = "\n";
+        this._suffixWhitespace = "\n";
+        this._linePrefixWhitespace = "";
+
+        this._delegate = delegate || null;
+
+        this._codeMirror = WebInspector.CodeMirrorEditor.create(this.element, {
+            readOnly: true,
+            lineWrapping: true,
+            mode: "css-rule",
+            electricChars: false,
+            indentWithTabs: false,
+            indentUnit: 4,
+            smartIndent: false,
+            matchBrackets: true,
+            autoCloseBrackets: true
+        });
+
+        this._codeMirror.addKeyMap({
+            "Enter": this._handleEnterKey.bind(this),
+            "Shift-Enter": this._insertNewlineAfterCurrentLine.bind(this),
+            "Shift-Tab": this._handleShiftTabKey.bind(this),
+            "Tab": this._handleTabKey.bind(this)
+        });
+
+        this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
+        this._tokenTrackingController = new WebInspector.CodeMirrorTokenTrackingController(this._codeMirror, this);
+
+        this._completionController.noEndingSemicolon = true;
+
+        this._jumpToSymbolTrackingModeEnabled = false;
+        this._tokenTrackingController.classNameForHighlightedRange = WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName;
+        this._tokenTrackingController.mouseOverDelayDuration = 0;
+        this._tokenTrackingController.mouseOutReleaseDelayDuration = 0;
+        this._tokenTrackingController.mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
+
+        // Make sure CompletionController adds event listeners first.
+        // Otherwise we end up in race conditions during complete or delete-complete phases.
+        this._codeMirror.on("change", this._contentChanged.bind(this));
+        this._codeMirror.on("blur", this._editorBlured.bind(this));
+        this._codeMirror.on("beforeChange", this._handleBeforeChange.bind(this));
+
+        if (typeof this._delegate.cssStyleDeclarationTextEditorFocused === "function")
+            this._codeMirror.on("focus", this._editorFocused.bind(this));
+
+        this.style = style;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    set delegate(delegate)
+    {
+        this._delegate = delegate || null;
+    }
+
+    get style()
+    {
+        return this._style;
+    }
+
+    set style(style)
+    {
+        if (this._style === style)
+            return;
+
+        if (this._style) {
+            this._style.removeEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._propertiesChanged, this);
+            if (this._style.ownerRule && this._style.ownerRule.sourceCodeLocation)
+                WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
+        }
+
+        this._style = style || null;
+
+        if (this._style) {
+            this._style.addEventListener(WebInspector.CSSStyleDeclaration.Event.PropertiesChanged, this._propertiesChanged, this);
+            if (this._style.ownerRule && this._style.ownerRule.sourceCodeLocation)
+                WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateJumpToSymbolTrackingMode, this);
+        }
+
+        this._updateJumpToSymbolTrackingMode();
+
+        this._resetContent();
+    }
+
+    get focused()
+    {
+        return this._codeMirror.getWrapperElement().classList.contains("CodeMirror-focused");
+    }
+
+    get alwaysShowPropertyNames()
+    {
+        return Object.keys(this._alwaysShowPropertyNames);
+    }
+
+    set alwaysShowPropertyNames(alwaysShowPropertyNames)
+    {
+        this._alwaysShowPropertyNames = (alwaysShowPropertyNames || []).keySet();
+
+        this._resetContent();
+    }
+
+    get showsImplicitProperties()
+    {
+        return this._showsImplicitProperties;
+    }
+
+    set showsImplicitProperties(showsImplicitProperties)
+    {
+        if (this._showsImplicitProperties === showsImplicitProperties)
+            return;
+
+        this._showsImplicitProperties = showsImplicitProperties;
+
+        this._resetContent();
+    }
+
+    get sortProperties()
+    {
+        return this._sortProperties;
+    }
+
+    set sortProperties(sortProperties)
+    {
+        if (this._sortProperties === sortProperties)
+            return;
+
+        this._sortProperties = sortProperties;
+
+        this._resetContent();
+    }
+
+    focus()
+    {
+        this._codeMirror.focus();
+    }
+
+    refresh()
+    {
+        this._resetContent();
+    }
+
+    updateLayout(force)
+    {
+        this._codeMirror.refresh();
+    }
+
+    highlightProperty(property)
+    {
+        function propertiesMatch(cssProperty)
+        {
+            if (cssProperty.enabled && !cssProperty.overridden) {
+                if (cssProperty.canonicalName === property.canonicalName || hasMatchingLonghandProperty(cssProperty))
+                    return true;
+            }
+
+            return false;
+        }
+
+        function hasMatchingLonghandProperty(cssProperty)
+        {
+            var cssProperties = cssProperty.relatedLonghandProperties;
+
+            if (!cssProperties.length)
+                return false;
+
+            for (var property of cssProperties) {
+                if (propertiesMatch(property))
+                    return true;
+            }
+
+            return false;
+        }
+
+        for (var cssProperty of this.style.properties) {
+            if (propertiesMatch(cssProperty)) {
+                var selection = cssProperty.__propertyTextMarker.find();
+                this._codeMirror.setSelection(selection.from, selection.to);
+                this.focus();
+
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    clearSelection()
+    {
+        this._codeMirror.setCursor({line: 0, ch: 0});
+    }
+
+    findMatchingProperties(needle)
+    {
+        if (!needle) {
+            this.resetFilteredProperties();
+            return false;
+        }
+
+        var propertiesList = this._style.visibleProperties.length ? this._style.visibleProperties : this._style.properties;
+        var matchingProperties = [];
+
+        for (var property of propertiesList)
+            matchingProperties.push(property.text.includes(needle));
+
+        if (!matchingProperties.includes(true)) {
+            this.resetFilteredProperties();
+            return false;
+        }
+
+        for (var i = 0; i < matchingProperties.length; ++i) {
+            var property = propertiesList[i];
+
+            if (matchingProperties[i])
+                property.__filterResultClassName = WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
+            else
+                property.__filterResultClassName = WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName;
+
+            this._updateTextMarkerForPropertyIfNeeded(property);
+        }
+
+        return true;
+    }
+
+    resetFilteredProperties()
+    {
+        var propertiesList = this._style.visibleProperties.length ? this._style.visibleProperties : this._style.properties;
+
+        for (var property of propertiesList) {
+            if (property.__filterResultClassName) {
+                property.__filterResultClassName = null;
+                this._updateTextMarkerForPropertyIfNeeded(property)
+            }
+        }
+    }
+
+    removeNonMatchingProperties(needle)
+    {
+        this._filterResultPropertyNames = null;
+
+        if (!needle) {
+            this._resetContent();
+            return false;
+        }
+
+        var matchingPropertyNames = [];
+
+        for (var property of this._style.properties) {
+            var indexesOfNeedle = property.text.getMatchingIndexes(needle);
+
+            if (indexesOfNeedle.length) {
+                matchingPropertyNames.push(property.name);
+                property.__filterResultClassName = WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName;
+                property.__filterResultNeedlePosition = {start: indexesOfNeedle, length: needle.length};
+            }
+        }
+
+        this._filterResultPropertyNames = matchingPropertyNames.length ? matchingPropertyNames.keySet() : {};
+
+        this._resetContent();
+
+        return matchingPropertyNames.length > 0;
+    }
+
+    uncommentAllProperties()
+    {
+        function uncommentProperties(properties)
+        {
+            if (!properties.length)
+                return false;
+
+            for (var property of properties) {
+                if (property._commentRange) {
+                    this._uncommentRange(property._commentRange);
+                    property._commentRange = null;
+                }
+            }
+
+            return true;
+        }
+
+        return uncommentProperties.call(this, this._style.pendingProperties) || uncommentProperties.call(this, this._style.properties);
+    }
+
+    commentAllProperties()
+    {
+        if (!this._style.hasProperties())
+            return false;
+
+        for (var property of this._style.properties) {
+            if (property.__propertyTextMarker)
+                this._commentProperty(property);
+        }
+
+        return true;
+    }
+
+    selectFirstProperty()
+    {
+        var line = this._codeMirror.getLine(0);
+        var trimmedLine = line.trimRight();
+
+        if (!line || !trimmedLine.trimLeft().length)
+            this.clearSelection();
+
+        var index = line.indexOf(":");
+        var cursor = {line: 0, ch: 0};
+
+        this._codeMirror.setSelection(cursor, {line: 0, ch: index < 0 || this._textAtCursorIsComment(this._codeMirror, cursor) ? trimmedLine.length : index});
+    }
+
+    selectLastProperty()
+    {
+        var line = this._codeMirror.lineCount() - 1;
+        var lineText = this._codeMirror.getLine(line);
+        var trimmedLine = lineText.trimRight();
+
+        var lastAnchor;
+        var lastHead;
+
+        if (this._textAtCursorIsComment(this._codeMirror, {line, ch: line.length})) {
+            lastAnchor = 0;
+            lastHead = line.length;
+        } else {
+            var colon = /(?::\s*)/.exec(lineText);
+            lastAnchor = colon ? colon.index + colon[0].length : 0;
+            lastHead = trimmedLine.length - trimmedLine.endsWith(";");
+        }
+
+        this._codeMirror.setSelection({line, ch: lastAnchor}, {line, ch: lastHead});
+    }
+
+    // Protected
+
+    didDismissPopover(popover)
+    {
+        if (popover === this._cubicBezierEditorPopover)
+            this._cubicBezierEditorPopover = null;
+    }
+
+    completionControllerCompletionsHidden(completionController)
+    {
+        var styleText = this._style.text;
+        var currentText = this._formattedContent();
+
+        // If the style text and the current editor text differ then we need to commit.
+        // Otherwise we can just update the properties that got skipped because a completion
+        // was pending the last time _propertiesChanged was called.
+        if (styleText !== currentText)
+            this._commitChanges();
+        else
+            this._propertiesChanged();
+    }
+
+    // Private
+
+    _textAtCursorIsComment(codeMirror, cursor)
+    {
+        var token = codeMirror.getTokenTypeAt(cursor);
+        return token && token.includes("comment");
+    }
+
+    _highlightNextNameOrValue(codeMirror, cursor, text)
+    {
+        var nextAnchor;
+        var nextHead;
+
+        if (this._textAtCursorIsComment(codeMirror, cursor)) {
+            nextAnchor = 0;
+            nextHead = text.length;
+        } else {
+            var colonIndex = text.indexOf(":");
+            var substringIndex = colonIndex >= 0 && cursor.ch >= colonIndex ? colonIndex : 0;
+
+            var regExp = /(?:[^:;\s]\s*)+/g;
+            regExp.lastIndex = substringIndex;
+            var match = regExp.exec(text);
+
+            nextAnchor = match.index;
+            nextHead = nextAnchor + match[0].length;
+        }
+
+        codeMirror.setSelection({line: cursor.line, ch: nextAnchor}, {line: cursor.line, ch: nextHead});
+    }
+
+    _handleMouseDown(event)
+    {
+        if (this._codeMirror.options.readOnly)
+            return;
+
+        let cursor = this._codeMirror.coordsChar({left: event.x, top: event.y});
+        let line = this._codeMirror.getLine(cursor.line);
+        let trimmedLine = line.trimRight();
+        if (!trimmedLine.trimLeft().length || cursor.ch !== trimmedLine.length)
+            return;
+
+        this._mouseDownCursorPosition = cursor;
+    }
+
+    _handleMouseUp(event)
+    {
+        if (this._codeMirror.options.readOnly || !this._mouseDownCursorPosition)
+            return;
+
+        let cursor = this._codeMirror.coordsChar({left: event.x, top: event.y});
+        if (this._mouseDownCursorPosition.line === cursor.line && this._mouseDownCursorPosition.ch === cursor.ch) {
+            let nextLine = this._codeMirror.getLine(cursor.line + 1);
+            if (cursor.line < this._codeMirror.lineCount() - 1 && (!nextLine || !nextLine.trim().length)) {
+                this._codeMirror.setCursor({line: cursor.line + 1, ch: 0});
+            } else {
+                let line = this._codeMirror.getLine(cursor.line);
+                let replacement = "\n";
+                if (!line.trimRight().endsWith(";") && !this._textAtCursorIsComment(this._codeMirror, cursor))
+                    replacement = ";" + replacement;
+
+                this._codeMirror.replaceRange(replacement, cursor);
+            }
+        }
+
+        this._mouseDownCursorPosition = null;
+    }
+
+    _handleBeforeChange(codeMirror, change)
+    {
+        if (change.origin !== "+delete" || this._completionController.isShowingCompletions())
+            return CodeMirror.Pass;
+
+        if (!change.to.line && !change.to.ch) {
+            if (codeMirror.lineCount() === 1)
+                return CodeMirror.Pass;
+
+            var line = codeMirror.getLine(change.to.line);
+            if (line && line.trim().length)
+                return CodeMirror.Pass;
+
+            codeMirror.execCommand("deleteLine");
+            return;
+        }
+
+        var marks = codeMirror.findMarksAt(change.to);
+        if (!marks.length)
+            return CodeMirror.Pass;
+
+        for (var mark of marks)
+            mark.clear();
+    }
+
+    _handleEnterKey(codeMirror)
+    {
+        var cursor = codeMirror.getCursor();
+        var line = codeMirror.getLine(cursor.line);
+        var trimmedLine = line.trimRight();
+        var hasEndingSemicolon = trimmedLine.endsWith(";");
+
+        if (!trimmedLine.trimLeft().length)
+            return CodeMirror.Pass;
+
+        if (hasEndingSemicolon && cursor.ch === trimmedLine.length - 1)
+            ++cursor.ch;
+
+        if (cursor.ch === trimmedLine.length) {
+            var replacement = "\n";
+
+            if (!hasEndingSemicolon && !this._textAtCursorIsComment(this._codeMirror, cursor))
+                replacement = ";" + replacement;
+
+            this._codeMirror.replaceRange(replacement, cursor);
+            return;
+        }
+
+        return CodeMirror.Pass;
+    }
+
+    _insertNewlineAfterCurrentLine(codeMirror)
+    {
+        var cursor = codeMirror.getCursor();
+        var line = codeMirror.getLine(cursor.line);
+        var trimmedLine = line.trimRight();
+
+        cursor.ch = trimmedLine.length;
+
+        if (cursor.ch) {
+            var replacement = "\n";
+
+            if (!trimmedLine.endsWith(";") && !this._textAtCursorIsComment(this._codeMirror, cursor))
+                replacement = ";" + replacement;
+
+            this._codeMirror.replaceRange(replacement, cursor);
+            return;
+        }
+
+        return CodeMirror.Pass;
+    }
+
+    _handleShiftTabKey(codeMirror)
+    {
+        function switchRule()
+        {
+            if (this._delegate && typeof this._delegate.cssStyleDeclarationTextEditorSwitchRule === "function") {
+                this._delegate.cssStyleDeclarationTextEditorSwitchRule(true);
+                return;
+            }
+
+            return CodeMirror.Pass;
+        }
+
+        let cursor = codeMirror.getCursor();
+        let line = codeMirror.getLine(cursor.line);
+        let previousLine = codeMirror.getLine(cursor.line - 1);
+
+        if (!line && !previousLine && !cursor.line)
+            return switchRule.call(this);
+
+        let trimmedPreviousLine = previousLine ? previousLine.trimRight() : "";
+        let previousAnchor = 0;
+        let previousHead = line.length;
+        let isComment = this._textAtCursorIsComment(codeMirror, cursor);
+
+        if (cursor.ch === line.indexOf(":") || line.indexOf(":") < 0 || isComment) {
+            if (previousLine) {
+                --cursor.line;
+                previousHead = trimmedPreviousLine.length;
+
+                if (!this._textAtCursorIsComment(codeMirror, cursor)) {
+                    let colon = /(?::\s*)/.exec(previousLine);
+                    previousAnchor = colon ? colon.index + colon[0].length : 0;
+                    if (trimmedPreviousLine.includes(";"))
+                        previousHead = trimmedPreviousLine.lastIndexOf(";");
+                }
+                
+                codeMirror.setSelection({line: cursor.line, ch: previousAnchor}, {line: cursor.line, ch: previousHead});
+                return;
+            }
+
+            if (cursor.line) {
+                codeMirror.setCursor(cursor.line - 1, 0);
+                return;
+            }
+
+            return switchRule.call(this);
+        }
+
+        if (!isComment) {
+            let match = /(?:[^:;\s]\s*)+/.exec(line);
+            previousAnchor = match.index;
+            previousHead = previousAnchor + match[0].length;
+        }
+
+        codeMirror.setSelection({line: cursor.line, ch: previousAnchor}, {line: cursor.line, ch: previousHead});
+    }
+
+    _handleTabKey(codeMirror)
+    {
+        function switchRule() {
+            if (this._delegate && typeof this._delegate.cssStyleDeclarationTextEditorSwitchRule === "function") {
+                this._delegate.cssStyleDeclarationTextEditorSwitchRule();
+                return;
+            }
+
+            return CodeMirror.Pass;
+        }
+
+        let cursor = codeMirror.getCursor();
+        let line = codeMirror.getLine(cursor.line);
+        let trimmedLine = line.trimRight();
+        let lastLine = cursor.line === codeMirror.lineCount() - 1;
+        let nextLine = codeMirror.getLine(cursor.line + 1);
+        let trimmedNextLine = nextLine ? nextLine.trimRight() : "";
+
+        if (!trimmedLine.trimLeft().length) {
+            if (lastLine)
+                return switchRule.call(this);
+
+            if (!trimmedNextLine.trimLeft().length) {
+                codeMirror.setCursor(cursor.line + 1, 0);
+                return;
+            }
+
+            ++cursor.line;
+            this._highlightNextNameOrValue(codeMirror, cursor, nextLine);
+            return;
+        }
+
+        if (trimmedLine.endsWith(":")) {
+            codeMirror.setCursor(cursor.line, line.length);
+            this._completionController._completeAtCurrentPosition(true);
+            return;
+        }
+
+        let hasEndingSemicolon = trimmedLine.endsWith(";");
+        let pastLastSemicolon = line.includes(";") && cursor.ch >= line.lastIndexOf(";");
+
+        if (cursor.ch >= line.trimRight().length - hasEndingSemicolon || pastLastSemicolon) {
+            this._completionController.completeAtCurrentPositionIfNeeded().then(function(result) {
+                if (result !== WebInspector.CodeMirrorCompletionController.UpdatePromise.NoCompletionsFound)
+                    return;
+
+                let replacement = "";
+
+                if (!hasEndingSemicolon && !pastLastSemicolon && !this._textAtCursorIsComment(codeMirror, cursor))
+                    replacement += ";";
+
+                if (lastLine)
+                    replacement += "\n";
+
+                if (replacement.length)
+                    codeMirror.replaceRange(replacement, {line: cursor.line, ch: trimmedLine.length});
+
+                if (!nextLine) {
+                    codeMirror.setCursor(cursor.line + 1, 0);
+                    return;
+                }
+
+                this._highlightNextNameOrValue(codeMirror, {line: cursor.line + 1, ch: 0}, nextLine);
+            }.bind(this));
+
+            return;
+        }
+
+        this._highlightNextNameOrValue(codeMirror, cursor, line);
+    }
+
+    _clearRemoveEditingLineClassesTimeout()
+    {
+        if (!this._removeEditingLineClassesTimeout)
+            return;
+
+        clearTimeout(this._removeEditingLineClassesTimeout);
+        delete this._removeEditingLineClassesTimeout;
+    }
+
+    _removeEditingLineClasses()
+    {
+        this._clearRemoveEditingLineClassesTimeout();
+
+        function removeEditingLineClasses()
+        {
+            var lineCount = this._codeMirror.lineCount();
+            for (var i = 0; i < lineCount; ++i)
+                this._codeMirror.removeLineClass(i, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
+        }
+
+        this._codeMirror.operation(removeEditingLineClasses.bind(this));
+    }
+
+    _removeEditingLineClassesSoon()
+    {
+        if (this._removeEditingLineClassesTimeout)
+            return;
+        this._removeEditingLineClassesTimeout = setTimeout(this._removeEditingLineClasses.bind(this), WebInspector.CSSStyleDeclarationTextEditor.RemoveEditingLineClassesDelay);
+    }
+
+    _formattedContent()
+    {
+        // Start with the prefix whitespace we stripped.
+        var content = this._prefixWhitespace;
+
+        // Get each line and add the line prefix whitespace and newlines.
+        var lineCount = this._codeMirror.lineCount();
+        for (var i = 0; i < lineCount; ++i) {
+            var lineContent = this._codeMirror.getLine(i);
+            content += this._linePrefixWhitespace + lineContent;
+            if (i !== lineCount - 1)
+                content += "\n";
+        }
+
+        // Add the suffix whitespace we stripped.
+        content += this._suffixWhitespace;
+
+        // This regular expression replacement removes extra newlines
+        // in between properties while preserving leading whitespace
+        return content.replace(/\s*\n\s*\n(\s*)/g, "\n$1");
+    }
+
+    _commitChanges()
+    {
+        if (this._commitChangesTimeout) {
+            clearTimeout(this._commitChangesTimeout);
+            delete this._commitChangesTimeout;
+        }
+
+        this._style.text = this._formattedContent();
+    }
+
+    _editorBlured(codeMirror)
+    {
+        // Clicking a suggestion causes the editor to blur. We don't want to reset content in this case.
+        if (this._completionController.isHandlingClickEvent())
+            return;
+
+        // Reset the content on blur since we stop accepting external changes while the the editor is focused.
+        // This causes us to pick up any change that was suppressed while the editor was focused.
+        this._resetContent();
+        this.dispatchEventToListeners(WebInspector.CSSStyleDeclarationTextEditor.Event.Blurred);
+    }
+
+    _editorFocused(codeMirror)
+    {
+        if (typeof this._delegate.cssStyleDeclarationTextEditorFocused === "function")
+            this._delegate.cssStyleDeclarationTextEditorFocused();
+    }
+
+    _contentChanged(codeMirror, change)
+    {
+        // Return early if the style isn't editable. This still can be called when readOnly is set because
+        // clicking on a color swatch modifies the text.
+        if (!this._style || !this._style.editable || this._ignoreCodeMirrorContentDidChangeEvent)
+            return;
+
+        this._markLinesWithCheckboxPlaceholder();
+
+        this._clearRemoveEditingLineClassesTimeout();
+        this._codeMirror.addLineClass(change.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
+
+        // When the change is a completion change, create color swatches now since the changes
+        // will not go through _propertiesChanged until completionControllerCompletionsHidden happens.
+        // This way any auto completed colors get swatches right away.
+        if (this._completionController.isCompletionChange(change))
+            this._createInlineSwatches(false, change.from.line);
+
+        // Use a short delay for user input to coalesce more changes before committing. Other actions like
+        // undo, redo and paste are atomic and work better with a zero delay. CodeMirror identifies changes that
+        // get coalesced in the undo stack with a "+" prefix on the origin. Use that to set the delay for our coalescing.
+        var delay = change.origin && change.origin.charAt(0) === "+" ? WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay : 0;
+
+        // Reset the timeout so rapid changes coalesce after a short delay.
+        if (this._commitChangesTimeout)
+            clearTimeout(this._commitChangesTimeout);
+        this._commitChangesTimeout = setTimeout(this._commitChanges.bind(this), delay);
+
+        this.dispatchEventToListeners(WebInspector.CSSStyleDeclarationTextEditor.Event.ContentChanged);
+    }
+
+    _updateTextMarkers(nonatomic)
+    {
+        function update()
+        {
+            this._clearTextMarkers(true);
+
+            this._iterateOverProperties(true, function(property) {
+                var styleTextRange = property.styleDeclarationTextRange;
+                console.assert(styleTextRange);
+                if (!styleTextRange)
+                    return;
+
+                var from = {line: styleTextRange.startLine, ch: styleTextRange.startColumn};
+                var to = {line: styleTextRange.endLine, ch: styleTextRange.endColumn};
+
+                // Adjust the line position for the missing prefix line.
+                if (this._prefixWhitespace) {
+                    --from.line;
+                    --to.line;
+                }
+
+                // Adjust the column for the stripped line prefix whitespace.
+                from.ch -= this._linePrefixWhitespace.length;
+                to.ch -= this._linePrefixWhitespace.length;
+
+                this._createTextMarkerForPropertyIfNeeded(from, to, property);
+            });
+
+            if (!this._codeMirror.getOption("readOnly")) {
+                // Look for comments that look like properties and add checkboxes in front of them.
+                this._codeMirror.eachLine(function(lineHandler) {
+                    this._createCommentedCheckboxMarker(lineHandler);
+                }.bind(this));
+            }
+
+            // Look for swatchable values and make inline swatches.
+            this._createInlineSwatches(true);
+
+            this._markLinesWithCheckboxPlaceholder();
+        }
+
+        if (nonatomic)
+            update.call(this);
+        else
+            this._codeMirror.operation(update.bind(this));
+    }
+
+    _createCommentedCheckboxMarker(lineHandle)
+    {
+        var lineNumber = lineHandle.lineNo();
+
+        // Since lineNumber can be 0, it is also necessary to check if it is a number before returning.
+        if (!lineNumber && isNaN(lineNumber))
+            return;
+
+        // Matches a comment like: /* -webkit-foo: bar; */
+        var commentedPropertyRegex = /\/\*\s*[-\w]+\s*:\s*[^;]+;?\s*\*\//g;
+
+        var match = commentedPropertyRegex.exec(lineHandle.text);
+        if (!match)
+            return;
+
+        while (match) {
+            var checkboxElement = document.createElement("input");
+            checkboxElement.type = "checkbox";
+            checkboxElement.checked = false;
+            checkboxElement.addEventListener("change", this._propertyCommentCheckboxChanged.bind(this));
+
+            var from = {line: lineNumber, ch: match.index};
+            var to = {line: lineNumber, ch: match.index + match[0].length};
+
+            var checkboxMarker = this._codeMirror.setUniqueBookmark(from, checkboxElement);
+            checkboxMarker.__propertyCheckbox = true;
+
+            var commentTextMarker = this._codeMirror.markText(from, to);
+
+            checkboxElement.__commentTextMarker = commentTextMarker;
+
+            match = commentedPropertyRegex.exec(lineHandle.text);
+        }
+    }
+
+    _createInlineSwatches(nonatomic, lineNumber)
+    {
+        function createSwatch(swatch, marker, valueObject, valueString)
+        {
+            swatch.addEventListener(WebInspector.InlineSwatch.Event.BeforeClicked, this._inlineSwatchBeforeClicked, this);
+            swatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._inlineSwatchValueChanged, this);
+
+            let codeMirrorTextMarker = marker.codeMirrorTextMarker;
+            let codeMirrorTextMarkerRange = codeMirrorTextMarker.find();
+            this._codeMirror.setUniqueBookmark(codeMirrorTextMarkerRange.from, swatch.element);
+
+            swatch.__textMarker = codeMirrorTextMarker;
+            swatch.__textMarkerRange = codeMirrorTextMarkerRange;
+        }
+
+        function update()
+        {
+            let range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
+
+            // Look for color strings and add swatches in front of them.
+            createCodeMirrorColorTextMarkers(this._codeMirror, range, (marker, color, colorString) => {
+                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Color, color, this._codeMirror.getOption("readOnly"));
+                createSwatch.call(this, swatch, marker, color, colorString);
+            });
+
+            // Look for gradient strings and add swatches in front of them.
+            createCodeMirrorGradientTextMarkers(this._codeMirror, range, (marker, gradient, gradientString) => {
+                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Gradient, gradient, this._codeMirror.getOption("readOnly"));
+                createSwatch.call(this, swatch, marker, gradient, gradientString);
+            });
+
+            // Look for cubic-bezier strings and add swatches in front of them.
+            createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range, (marker, bezier, bezierString) => {
+                let swatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Bezier, bezier, this._codeMirror.getOption("readOnly"));
+                createSwatch.call(this, swatch, marker, bezier, bezierString);
+            });
+        }
+
+        if (nonatomic)
+            update.call(this);
+        else
+            this._codeMirror.operation(update.bind(this));
+    }
+
+    _updateTextMarkerForPropertyIfNeeded(property)
+    {
+        var textMarker = property.__propertyTextMarker;
+        console.assert(textMarker);
+        if (!textMarker)
+            return;
+
+        var range = textMarker.find();
+        console.assert(range);
+        if (!range)
+            return;
+
+        this._createTextMarkerForPropertyIfNeeded(range.from, range.to, property);
+    }
+
+    _createTextMarkerForPropertyIfNeeded(from, to, property)
+    {
+        if (!this._codeMirror.getOption("readOnly")) {
+            // Create a new checkbox element and marker.
+
+            console.assert(property.enabled);
+
+            var checkboxElement = document.createElement("input");
+            checkboxElement.type = "checkbox";
+            checkboxElement.checked = true;
+            checkboxElement.addEventListener("change", this._propertyCheckboxChanged.bind(this));
+            checkboxElement.__cssProperty = property;
+
+            var checkboxMarker = this._codeMirror.setUniqueBookmark(from, checkboxElement);
+            checkboxMarker.__propertyCheckbox = true;
+        } else if (this._delegate.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows
+                && !property.implicit && typeof this._delegate.cssStyleDeclarationTextEditorShowProperty === "function") {
+
+            let arrowElement = WebInspector.createGoToArrowButton();
+            arrowElement.title = WebInspector.UIString("Option-click to show source");
+
+            let delegate = this._delegate;
+            arrowElement.addEventListener("click", function(event) {
+                delegate.cssStyleDeclarationTextEditorShowProperty(property, event.altKey);
+            });
+
+            this._codeMirror.setUniqueBookmark(to, arrowElement);
+        }
+
+        function duplicatePropertyExistsBelow(cssProperty)
+        {
+            var propertyFound = false;
+
+            for (var property of this._style.properties) {
+                if (property === cssProperty)
+                    propertyFound = true;
+                else if (property.name === cssProperty.name && propertyFound)
+                    return true;
+            }
+
+            return false;
+        }
+
+        var propertyNameIsValid = false;
+        if (WebInspector.CSSCompletions.cssNameCompletions)
+            propertyNameIsValid = WebInspector.CSSCompletions.cssNameCompletions.isValidPropertyName(property.name);
+
+        var classNames = ["css-style-declaration-property"];
+
+        if (property.overridden)
+            classNames.push("overridden");
+
+        if (property.implicit)
+            classNames.push("implicit");
+
+        if (this._style.inherited && !property.inherited)
+            classNames.push("not-inherited");
+
+        if (!property.valid && property.hasOtherVendorNameOrKeyword())
+            classNames.push("other-vendor");
+        else if (!property.valid && (!propertyNameIsValid || duplicatePropertyExistsBelow.call(this, property)))
+            classNames.push("invalid");
+
+        if (!property.enabled)
+            classNames.push("disabled");
+
+        if (property.__filterResultClassName && !property.__filterResultNeedlePosition)
+            classNames.push(property.__filterResultClassName);
+
+        var classNamesString = classNames.join(" ");
+
+        // If there is already a text marker and it's in the same document, then try to avoid recreating it.
+        // FIXME: If there are multiple CSSStyleDeclarationTextEditors for the same style then this will cause
+        // both editors to fight and always recreate their text markers. This isn't really common.
+        if (property.__propertyTextMarker && property.__propertyTextMarker.doc.cm === this._codeMirror && property.__propertyTextMarker.find()) {
+            // If the class name is the same then we don't need to make a new marker.
+            if (property.__propertyTextMarker.className === classNamesString)
+                return;
+
+            property.__propertyTextMarker.clear();
+        }
+
+        var propertyTextMarker = this._codeMirror.markText(from, to, {className: classNamesString});
+
+        propertyTextMarker.__cssProperty = property;
+        property.__propertyTextMarker = propertyTextMarker;
+
+        property.addEventListener(WebInspector.CSSProperty.Event.OverriddenStatusChanged, this._propertyOverriddenStatusChanged, this);
+
+        this._removeCheckboxPlaceholder(from.line);
+
+        if (property.__filterResultClassName && property.__filterResultNeedlePosition) {
+            for (var needlePosition of property.__filterResultNeedlePosition.start) {
+                var start = {line: from.line, ch: needlePosition};
+                var end = {line: to.line, ch: start.ch + property.__filterResultNeedlePosition.length};
+
+                this._codeMirror.markText(start, end, {className: property.__filterResultClassName});
+            }
+        }
+
+        if (this._codeMirror.getOption("readOnly") || property.hasOtherVendorNameOrKeyword() || property.text.trim().endsWith(":"))
+            return;
+
+        var propertyHasUnnecessaryPrefix = property.name.startsWith("-webkit-") && WebInspector.CSSCompletions.cssNameCompletions.isValidPropertyName(property.canonicalName);
+
+        function generateInvalidMarker(options)
+        {
+            var invalidMarker = document.createElement("button");
+            invalidMarker.className = "invalid-warning-marker";
+            invalidMarker.title = options.title;
+
+            if (typeof options.correction === "string") {
+                // Allow for blank strings
+                invalidMarker.classList.add("clickable");
+                invalidMarker.addEventListener("click", function() {
+                    this._codeMirror.replaceRange(options.correction, from, to);
+
+                    if (options.autocomplete) {
+                        this._codeMirror.setCursor(to);
+                        this.focus();
+                        this._completionController._completeAtCurrentPosition(true);
+                    }
+                }.bind(this));
+            }
+
+            this._codeMirror.setBookmark(options.position, invalidMarker);
+        }
+
+        function instancesOfProperty(propertyName)
+        {
+            var count = 0;
+
+            for (var property of this._style.properties) {
+                if (property.name === propertyName)
+                    ++count;
+            }
+
+            return count;
+        }
+
+        // Number of times this property name is listed in the rule.
+        var instances = instancesOfProperty.call(this, property.name);
+        var invalidMarkerInfo;
+
+        if (propertyHasUnnecessaryPrefix && !instancesOfProperty.call(this, property.canonicalName)) {
+            // This property has a prefix and is valid without the prefix and the rule containing this property does not have the unprefixed version of the property.
+            generateInvalidMarker.call(this, {
+                position: from,
+                title: WebInspector.UIString("The “webkit” prefix is not necessary.\nClick to insert a duplicate without the prefix."),
+                correction: property.text + "\n" + property.text.replace("-webkit-", ""),
+                autocomplete: false
+            });
+        } else if (instances > 1) {
+            invalidMarkerInfo = {
+                position: from,
+                title: WebInspector.UIString("Duplicate property “%s”.\nClick to delete this property.").format(property.name),
+                correction: "",
+                autocomplete: false
+            };
+        }
+
+        if (property.valid) {
+            if (invalidMarkerInfo)
+                generateInvalidMarker.call(this, invalidMarkerInfo);
+
+            return;
+        }
+
+        if (propertyNameIsValid) {
+            // The property's name is valid but its value is not (either it is not supported for this property or there is no value).
+            var semicolon = /:\s*/.exec(property.text);
+            var start = {line: from.line, ch: semicolon.index + semicolon[0].length};
+            var end = {line: to.line, ch: start.ch + property.value.length};
+
+            this._codeMirror.markText(start, end, {className: "invalid"});
+
+            if (/^(?:\d+)$/.test(property.value)) {
+                invalidMarkerInfo = {
+                    position: start,
+                    title: WebInspector.UIString("The value “%s” needs units.\nClick to add “px” to the value.").format(property.value),
+                    correction: property.name + ": " + property.value + "px;",
+                    autocomplete: false
+                };
+            } else {
+                var valueReplacement = property.value.length ? WebInspector.UIString("The value “%s” is not supported for this property.\nClick to delete and open autocomplete.").format(property.value) : WebInspector.UIString("This property needs a value.\nClick to open autocomplete.");
+
+                invalidMarkerInfo = {
+                    position: start,
+                    title: valueReplacement,
+                    correction: property.name + ": ",
+                    autocomplete: true
+                };
+            }
+        } else if (!instancesOfProperty.call(this, "-webkit-" + property.name) && WebInspector.CSSCompletions.cssNameCompletions.propertyRequiresWebkitPrefix(property.name)) {
+            // The property is valid and exists in the rule while its prefixed version does not.
+            invalidMarkerInfo = {
+                position: from,
+                title: WebInspector.UIString("The “webkit” prefix is needed for this property.\nClick to insert a duplicate with the prefix."),
+                correction: "-webkit-" + property.text + "\n" + property.text,
+                autocomplete: false
+            };
+        } else if (!propertyHasUnnecessaryPrefix && !WebInspector.CSSCompletions.cssNameCompletions.isValidPropertyName("-webkit-" + property.name)) {
+            // The property either has no prefix and is invalid with a prefix or is invalid without a prefix.
+            var closestPropertyName = WebInspector.CSSCompletions.cssNameCompletions.getClosestPropertyName(property.name);
+
+            if (closestPropertyName) {
+                // The property name has less than 3 other properties that have the same Levenshtein distance.
+                invalidMarkerInfo = {
+                    position: from,
+                    title: WebInspector.UIString("Did you mean “%s”?\nClick to replace.").format(closestPropertyName),
+                    correction: property.text.replace(property.name, closestPropertyName),
+                    autocomplete: true
+                };
+            } else if (property.name.startsWith("-webkit-") && (closestPropertyName = WebInspector.CSSCompletions.cssNameCompletions.getClosestPropertyName(property.canonicalName))) {
+                // The unprefixed property name has less than 3 other properties that have the same Levenshtein distance.
+                invalidMarkerInfo = {
+                    position: from,
+                    title: WebInspector.UIString("Did you mean “%s”?\nClick to replace.").format("-webkit-" + closestPropertyName),
+                    correction: property.text.replace(property.canonicalName, closestPropertyName),
+                    autocomplete: true
+                };
+            } else {
+                // The property name is so vague or nonsensical that there are more than 3 other properties that have the same Levenshtein value.
+                invalidMarkerInfo = {
+                    position: from,
+                    title: WebInspector.UIString("The property “%s” is not supported.").format(property.name),
+                    correction: false,
+                    autocomplete: false
+                };
+            }
+        }
+
+        if (!invalidMarkerInfo)
+            return;
+
+        generateInvalidMarker.call(this, invalidMarkerInfo);
+    }
+
+    _clearTextMarkers(nonatomic, all)
+    {
+        function clear()
+        {
+            var markers = this._codeMirror.getAllMarks();
+            for (var i = 0; i < markers.length; ++i) {
+                var textMarker = markers[i];
+
+                if (!all && textMarker.__checkboxPlaceholder) {
+                    var position = textMarker.find();
+
+                    // Only keep checkbox placeholders if they are in the first column.
+                    if (position && !position.ch)
+                        continue;
+                }
+
+                if (textMarker.__cssProperty) {
+                    textMarker.__cssProperty.removeEventListener(null, null, this);
+
+                    delete textMarker.__cssProperty.__propertyTextMarker;
+                    delete textMarker.__cssProperty;
+                }
+
+                textMarker.clear();
+            }
+        }
+
+        if (nonatomic)
+            clear.call(this);
+        else
+            this._codeMirror.operation(clear.bind(this));
+    }
+
+    _iterateOverProperties(onlyVisibleProperties, callback)
+    {
+        var properties = onlyVisibleProperties ? this._style.visibleProperties : this._style.properties;
+
+        if (this._filterResultPropertyNames) {
+            properties = properties.filter(function(property) {
+                return (!property.implicit || this._showsImplicitProperties) && property.name in this._filterResultPropertyNames;
+            }, this);
+
+            if (this._sortProperties)
+                properties.sort(function(a, b) { return a.name.localeCompare(b.name); });
+        } else if (!onlyVisibleProperties) {
+            // Filter based on options only when all properties are used.
+            properties = properties.filter(function(property) {
+                return !property.implicit || this._showsImplicitProperties || property.canonicalName in this._alwaysShowPropertyNames;
+            }, this);
+
+            if (this._sortProperties)
+                properties.sort(function(a, b) { return a.name.localeCompare(b.name); });
+        }
+
+        for (var i = 0; i < properties.length; ++i) {
+            if (callback.call(this, properties[i], i === properties.length - 1))
+                break;
+        }
+    }
+
+    _propertyCheckboxChanged(event)
+    {
+        var property = event.target.__cssProperty;
+        console.assert(property);
+        if (!property)
+            return;
+
+        this._commentProperty(property);
+    }
+
+    _commentProperty(property)
+    {
+        var textMarker = property.__propertyTextMarker;
+        console.assert(textMarker);
+        if (!textMarker)
+            return;
+
+        // Check if the property has been removed already, like from double-clicking
+        // the checkbox and calling this event listener multiple times.
+        var range = textMarker.find();
+        if (!range)
+            return;
+
+        property._commentRange = range;
+        property._commentRange.to.ch += 6; // Number of characters added by comments.
+
+        var text = this._codeMirror.getRange(range.from, range.to);
+
+        function update()
+        {
+            // Replace the text with a commented version.
+            this._codeMirror.replaceRange("/* " + text + " */", range.from, range.to);
+
+            // Update the line for any inline swatches that got removed.
+            this._createInlineSwatches(true, range.from.line);
+        }
+
+        this._codeMirror.operation(update.bind(this));
+    }
+
+    _propertyCommentCheckboxChanged(event)
+    {
+        var commentTextMarker = event.target.__commentTextMarker;
+        console.assert(commentTextMarker);
+        if (!commentTextMarker)
+            return;
+
+        // Check if the comment has been removed already, like from double-clicking
+        // the checkbox and calling event listener multiple times.
+        var range = commentTextMarker.find();
+        if (!range)
+            return;
+
+        this._uncommentRange(range);
+    }
+
+    _uncommentRange(range)
+    {
+        var text = this._codeMirror.getRange(range.from, range.to);
+
+        // Remove the comment prefix and suffix.
+        text = text.replace(/^\/\*\s*/, "").replace(/\s*\*\/$/, "");
+
+        // Add a semicolon if there isn't one already.
+        if (text.length && text.charAt(text.length - 1) !== ";")
+            text += ";";
+
+        function update()
+        {
+            this._codeMirror.addLineClass(range.from.line, "wrap", WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName);
+            this._codeMirror.replaceRange(text, range.from, range.to);
+
+            // Update the line for any inline swatches that got removed.
+            this._createInlineSwatches(true, range.from.line);
+        }
+
+        this._codeMirror.operation(update.bind(this));
+    }
+
+    _inlineSwatchBeforeClicked(event)
+    {
+        if (this._delegate && typeof this._delegate.cssStyleDeclarationTextEditorBlurActiveEditor === "function")
+            this._delegate.cssStyleDeclarationTextEditorBlurActiveEditor();
+    }
+
+    _inlineSwatchValueChanged(event)
+    {
+        let swatch = event && event.target;
+        console.assert(swatch);
+        if (!swatch)
+            return;
+
+        let value = event.data && event.data.value && event.data.value.toString();
+        console.assert(value);
+        if (!value)
+            return;
+
+        let textMarker = swatch.__textMarker;
+        let range = swatch.__textMarkerRange;
+        console.assert(range);
+        if (!range)
+            return;
+
+        function update()
+        {
+            // The original text marker might have been cleared by a style update,
+            // in this case we need to find the new text marker so we know the
+            // right range for the new style text.
+            if (!textMarker || !textMarker.find()) {
+                textMarker = null;
+
+                let marks = this._codeMirror.findMarksAt(range.from);
+                if (!marks.length)
+                    return;
+
+                for (let mark of marks) {
+                    let type = WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type;
+                    if (type !== WebInspector.TextMarker.Type.Color && type !== WebInspector.TextMarker.Type.Gradient && type !== WebInspector.TextMarker.Type.CubicBezier)
+                        continue;
+                    textMarker = mark;
+                    break;
+                }
+            }
+
+            if (!textMarker)
+                return;
+
+            // Sometimes we still might find a stale text marker with findMarksAt.
+            range = textMarker.find();
+            if (!range)
+                return;
+
+            textMarker.clear();
+
+            this._codeMirror.replaceRange(value, range.from, range.to);
+
+            // The value's text could have changed, so we need to update the "range"
+            // variable to anticipate a different "range.to" property.
+            range.to.ch = range.from.ch + value.length;
+
+            textMarker = this._codeMirror.markText(range.from, range.to);
+
+            swatch.__textMarker = textMarker;
+        }
+
+        this._codeMirror.operation(update.bind(this));
+    }
+
+    _propertyOverriddenStatusChanged(event)
+    {
+        this._updateTextMarkerForPropertyIfNeeded(event.target);
+    }
+
+    _propertiesChanged(event)
+    {
+        // Don't try to update the document while completions are showing. Doing so will clear
+        // the completion hint and prevent further interaction with the completion.
+        if (this._completionController.isShowingCompletions())
+            return;
+
+        // Reset the content if the text is different and we are not focused.
+        if (!this.focused && (!this._style.text || this._style.text !== this._formattedContent())) {
+            this._resetContent();
+            return;
+        }
+
+        this._removeEditingLineClassesSoon();
+
+        this._updateTextMarkers();
+    }
+
+    _markLinesWithCheckboxPlaceholder()
+    {
+        if (this._codeMirror.getOption("readOnly"))
+            return;
+
+        var linesWithPropertyCheckboxes = {};
+        var linesWithCheckboxPlaceholders = {};
+
+        var markers = this._codeMirror.getAllMarks();
+        for (var i = 0; i < markers.length; ++i) {
+            var textMarker = markers[i];
+            if (textMarker.__propertyCheckbox) {
+                var position = textMarker.find();
+                if (position)
+                    linesWithPropertyCheckboxes[position.line] = true;
+            } else if (textMarker.__checkboxPlaceholder) {
+                var position = textMarker.find();
+                if (position)
+                    linesWithCheckboxPlaceholders[position.line] = true;
+            }
+        }
+
+        var lineCount = this._codeMirror.lineCount();
+
+        for (var i = 0; i < lineCount; ++i) {
+            if (i in linesWithPropertyCheckboxes || i in linesWithCheckboxPlaceholders)
+                continue;
+
+            var position = {line: i, ch: 0};
+
+            var placeholderElement = document.createElement("div");
+            placeholderElement.className = WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName;
+
+            var placeholderMark = this._codeMirror.setUniqueBookmark(position, placeholderElement);
+            placeholderMark.__checkboxPlaceholder = true;
+        }
+    }
+
+    _removeCheckboxPlaceholder(lineNumber)
+    {
+        var marks = this._codeMirror.findMarksAt({line: lineNumber, ch: 0});
+        for (var i = 0; i < marks.length; ++i) {
+            var mark = marks[i];
+            if (!mark.__checkboxPlaceholder)
+                continue;
+
+            mark.clear();
+            return;
+        }
+    }
+
+    _formattedContentFromEditor()
+    {
+        var mapping = {original: [0], formatted: [0]};
+        // FIXME: <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+        var indentString = "    ";
+        var builder = new WebInspector.FormatterContentBuilder(mapping, [], [], 0, 0, indentString);
+        var formatter = new WebInspector.Formatter(this._codeMirror, builder);
+        var start = {line: 0, ch: 0};
+        var end = {line: this._codeMirror.lineCount() - 1};
+        formatter.format(start, end);
+
+        return builder.formattedContent.trim();
+    }
+
+    _resetContent()
+    {
+        if (this._commitChangesTimeout) {
+            clearTimeout(this._commitChangesTimeout);
+            this._commitChangesTimeout = null;
+        }
+
+        this._removeEditingLineClasses();
+
+        // Only allow editing if we have a style, it is editable and we have text range in the stylesheet.
+        const readOnly = !this._style || !this._style.editable || !this._style.styleSheetTextRange;
+        this._codeMirror.setOption("readOnly", readOnly);
+
+        if (readOnly) {
+            this.element.classList.add(WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName);
+            this._codeMirror.setOption("placeholder", WebInspector.UIString("No Properties"));
+        } else {
+            this.element.classList.remove(WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName);
+            this._codeMirror.setOption("placeholder", WebInspector.UIString("No Properties \u2014 Click to Edit"));
+        }
+
+        if (!this._style) {
+            this._ignoreCodeMirrorContentDidChangeEvent = true;
+
+            this._clearTextMarkers(false, true);
+            this._codeMirror.setValue("");
+            this._codeMirror.clearHistory();
+            this._codeMirror.markClean();
+
+            this._ignoreCodeMirrorContentDidChangeEvent = false;
+            return;
+        }
+
+        function update()
+        {
+            // Remember the cursor position/selection.
+            let isEditorReadOnly = this._codeMirror.getOption("readOnly");
+            let styleText = this._style.text;
+            let trimmedStyleText = styleText.trim();
+
+            // We only need to format non-empty styles, but prepare checkbox placeholders
+            // in any case because that will indent the cursor when the User starts typing.
+            if (!trimmedStyleText && !isEditorReadOnly) {
+                this._markLinesWithCheckboxPlaceholder();
+                return;
+            }
+
+            // Generate formatted content for readonly editors by iterating properties.
+            if (isEditorReadOnly) {
+                this._codeMirror.setValue("");
+                let lineNumber = 0;
+                this._iterateOverProperties(false, function(property) {
+                    let from = {line: lineNumber, ch: 0};
+                    let to = {line: lineNumber};
+                    // Readonly properties are pretty printed by `synthesizedText` and not the Formatter.
+                    this._codeMirror.replaceRange((lineNumber ? "\n" : "") + property.synthesizedText, from);
+                    this._createTextMarkerForPropertyIfNeeded(from, to, property);
+                    lineNumber++;
+                });
+                return;
+            }
+
+            let selectionAnchor = this._codeMirror.getCursor("anchor");
+            let selectionHead = this._codeMirror.getCursor("head");
+            let whitespaceRegex = /\s+/g;
+
+            // FIXME: <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+            this._linePrefixWhitespace = "    ";
+            let styleTextPrefixWhitespace = styleText.match(/^\s*/);
+
+            // If there is a match and the style text contains a newline, attempt to pull out the prefix whitespace
+            // in front of the first line of CSS to use for every line.  If  there is no newline, we want to avoid
+            // adding multiple spaces to a single line CSS rule and instead format it on multiple lines.
+            if (styleTextPrefixWhitespace && trimmedStyleText.includes("\n")) {
+                let linePrefixWhitespaceMatch = styleTextPrefixWhitespace[0].match(/[^\S\n]+$/);
+                if (linePrefixWhitespaceMatch)
+                    this._linePrefixWhitespace = linePrefixWhitespaceMatch[0];
+            }
+
+            // Set non-optimized, valid and invalid styles in preparation for the Formatter.
+            this._codeMirror.setValue(trimmedStyleText);
+
+            // Now the Formatter pretty prints the styles.
+            this._codeMirror.setValue(this._formattedContentFromEditor());
+
+            // We need to workaround the fact that...
+            // 1) `this._style.properties` only holds valid CSSProperty instances but not
+            // comments and invalid properties like `color;`.
+            // 2) `_createTextMarkerForPropertyIfNeeded` relies on CSSProperty instances.
+            let cssPropertiesMap = new Map();
+            this._iterateOverProperties(false, function(cssProperty) {
+                cssProperty.__refreshedAfterBlur = false;
+
+                let propertyTextSansWhitespace = cssProperty.text.replace(whitespaceRegex, "");
+                let existingProperties = cssPropertiesMap.get(propertyTextSansWhitespace) || [];
+                existingProperties.push(cssProperty);
+
+                cssPropertiesMap.set(propertyTextSansWhitespace, existingProperties);
+            });
+
+            // Go through the Editor line by line and create TextMarker when a
+            // CSSProperty instance for that property exists. If not, then don't create a TextMarker.
+            this._codeMirror.eachLine(function(lineHandler) {
+                let lineNumber = lineHandler.lineNo();
+                let lineContentSansWhitespace = lineHandler.text.replace(whitespaceRegex, "");
+                let properties = cssPropertiesMap.get(lineContentSansWhitespace);
+                if (!properties) {
+                    this._createCommentedCheckboxMarker(lineHandler);
+                    return;
+                }
+
+                for (let property of properties) {
+                    if (property.__refreshedAfterBlur)
+                        continue;
+
+                    let from = {line: lineNumber, ch: 0};
+                    let to = {line: lineNumber};
+                    this._createTextMarkerForPropertyIfNeeded(from, to, property);
+                    property.__refreshedAfterBlur = true;
+                    break;
+                }
+            }.bind(this));
+
+            // Look for swatchable values and make inline swatches.
+            this._createInlineSwatches(true);
+
+            // Restore the cursor position/selection.
+            this._codeMirror.setSelection(selectionAnchor, selectionHead);
+
+            // Reset undo history since undo past the reset is wrong when the content was empty before
+            // or the content was representing a previous style object.
+            this._codeMirror.clearHistory();
+
+            // Mark the editor as clean (unedited state).
+            this._codeMirror.markClean();
+
+            this._markLinesWithCheckboxPlaceholder();
+        }
+
+        // This needs to be done first and as a separate operation to avoid an exception in CodeMirror.
+        this._clearTextMarkers(false, true);
+
+        this._ignoreCodeMirrorContentDidChangeEvent = true;
+        this._codeMirror.operation(update.bind(this));
+        this._ignoreCodeMirrorContentDidChangeEvent = false;
+    }
+
+    _updateJumpToSymbolTrackingMode()
+    {
+        var oldJumpToSymbolTrackingModeEnabled = this._jumpToSymbolTrackingModeEnabled;
+
+        if (!this._style || !this._style.ownerRule || !this._style.ownerRule.sourceCodeLocation)
+            this._jumpToSymbolTrackingModeEnabled = false;
+        else
+            this._jumpToSymbolTrackingModeEnabled = WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.shiftKey;
+
+        if (oldJumpToSymbolTrackingModeEnabled !== this._jumpToSymbolTrackingModeEnabled) {
+            if (this._jumpToSymbolTrackingModeEnabled) {
+                this._tokenTrackingController.highlightLastHoveredRange();
+                this._tokenTrackingController.enabled = !this._codeMirror.getOption("readOnly");
+            } else {
+                this._tokenTrackingController.removeHighlightedRange();
+                this._tokenTrackingController.enabled = false;
+            }
+        }
+    }
+
+    tokenTrackingControllerHighlightedRangeWasClicked(tokenTrackingController)
+    {
+        let sourceCodeLocation = this._style.ownerRule.sourceCodeLocation;
+        console.assert(sourceCodeLocation);
+        if (!sourceCodeLocation)
+            return;
+
+        let candidate = tokenTrackingController.candidate;
+        console.assert(candidate);
+        if (!candidate)
+            return;
+
+        let token = candidate.hoveredToken;
+
+        // Special case command clicking url(...) links.
+        if (token && /\blink\b/.test(token.type)) {
+            let url = token.string;
+            let baseURL = sourceCodeLocation.sourceCode.url;
+            WebInspector.openURL(absoluteURL(url, baseURL));
+            return;
+        }
+
+        function showRangeInSourceCode(sourceCode, range)
+        {
+            if (!sourceCode || !range)
+                return false;
+
+            WebInspector.showSourceCodeLocation(sourceCode.createSourceCodeLocation(range.startLine, range.startColumn));
+            return true;
+        }
+
+        // Special case option clicking CSS variables.
+        if (token && /\bvariable-2\b/.test(token.type)) {
+            let property = this._style.nodeStyles.effectivePropertyForName(token.string);
+            if (property && showRangeInSourceCode(property.ownerStyle.ownerRule.sourceCodeLocation.sourceCode, property.styleSheetTextRange))
+                return;
+        }
+
+        // Jump to the rule if we can't find a property.
+        // Find a better source code location from the property that was clicked.
+        let marks = this._codeMirror.findMarksAt(candidate.hoveredTokenRange.start);
+        for (let mark of marks) {
+            let property = mark.__cssProperty;
+            if (property && showRangeInSourceCode(sourceCodeLocation.sourceCode, property.styleSheetTextRange))
+                return;
+        }
+    }
+
+    tokenTrackingControllerNewHighlightCandidate(tokenTrackingController, candidate)
+    {
+        this._tokenTrackingController.highlightRange(candidate.hoveredTokenRange);
+    }
+};
+
+WebInspector.CSSStyleDeclarationTextEditor.Event = {
+    ContentChanged: "css-style-declaration-text-editor-content-changed",
+    Blurred: "css-style-declaration-text-editor-blurred"
+};
+
+WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
+WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = "read-only";
+WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = "checkbox-placeholder";
+WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = "editing-line";
+WebInspector.CSSStyleDeclarationTextEditor.CommitCoalesceDelay = 250;
+WebInspector.CSSStyleDeclarationTextEditor.RemoveEditingLineClassesDelay = 2000;
diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
new file mode 100644
index 000000000..005bdd360
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.css
@@ -0,0 +1,198 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details.css-style > .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.sidebar > .panel.details.css-style > .content.has-filter-bar {
+    bottom: 28px;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes {
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border-color);
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group {
+    display: inline-flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    flex: 1;
+}
+
+.sidebar > .panel.details.css-style > .content > .pseudo-classes > .group > label {
+    color: hsl(0, 0%, 37%);
+    text-shadow: white 0 1px 0;
+
+    margin: 0 5px;
+    min-width: 55px;
+
+    display: inline-block;
+    white-space: nowrap;
+}
+
+.sidebar > .panel.details.css-style > .content ~ :matches(.options-container, .class-list-container) {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    background-color: white;
+    border-top: 1px solid var(--border-color);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container {
+    bottom: 0;
+    height: var(--console-prompt-min-height);
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule, .has-filter-bar) ~ :matches(.options-container, .class-list-container) {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .new-rule {
+    width: 15px;
+    min-width: 15px;
+    height: 15px;
+    margin-left: 6px;
+    content: url(../Images/Plus15.svg);
+    opacity: 0.7;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .filter-bar {
+    width: -webkit-fill-available;
+    background-color: transparent;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle {
+    margin: 0 5px 1px 0;
+    padding: 2px 4px 3px;
+    background: none;
+    border: none;
+    border-radius: 3px;
+    -webkit-appearance: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle.selected {
+    color: white;
+    background-color: hsl(212, 92%, 54%);
+}
+
+.sidebar > .panel.details.css-style > .content ~ .options-container > .toggle-class-toggle:not(.selected):hover {
+    color: white;
+    background-color: hsla(212, 92%, 54%, 0.5);
+}
+
+.sidebar > .panel.details.css-style > .content:not(.supports-new-rule) ~ .options-container > .new-rule,
+.sidebar > .panel.details.css-style > .content:not(.has-filter-bar) ~ .options-container > .filter-bar {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container {
+    flex-wrap: wrap;
+    bottom: var(--console-prompt-min-height);
+    max-height: 65px;
+    padding: 3px 2px;
+    overflow-y: scroll;
+}
+
+/* FIXME: <https://webkit.org/b/152674> Elements with the "hidden" attribute still show up if "display: flex;" */
+.sidebar > .panel.details.css-style > .content ~ .class-list-container[hidden] {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class {
+    display: flex;
+    align-items: center;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > input[type="checkbox"] {
+    pointer-events: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .add-class-icon {
+    width: 12px;
+    height: 12px;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class > .class-name-input {
+    width: 100px;
+    height: 18px;
+    margin: 0 0 0 2px;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class.active > .add-class-icon,
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > .new-class:not(.active) > .class-name-input {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content ~ .class-list-container > *:matches(.new-class, .class-toggle) {
+    margin: 1px 3px;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-matching {
+    display: inline;
+    background-color: hsla(53, 83%, 53%, 0.5);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+    opacity: 1;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section {
+    margin-bottom: 0;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section.last-in-group.filter-section-non-matching + .style-declaration-section.filter-section-has-label {
+    margin-top: 0;
+    border-top: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section:not(.filter-section-has-label) {
+    margin-top: 0;
+    border-top: none;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .style-declaration-section > .header > .selector > .filter-matching {
+    color: black;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-section-non-matching {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress .filter-property-non-matching {
+    opacity: 0.5;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
new file mode 100644
index 000000000..15c2d2e05
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js
@@ -0,0 +1,468 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CSSStyleDetailsSidebarPanel = class CSSStyleDetailsSidebarPanel extends WebInspector.DOMDetailsSidebarPanel
+{
+    constructor()
+    {
+        super("css-style", WebInspector.UIString("Styles"), WebInspector.UIString("Style"), null, true);
+
+        this._selectedPanel = null;
+
+        this._forcedPseudoClassCheckboxes = {};
+
+        if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
+            this._forcedPseudoClassContainer = document.createElement("div");
+            this._forcedPseudoClassContainer.className = "pseudo-classes";
+
+            let groupElement = null;
+
+            WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
+                // We don't localize the label since it is a CSS pseudo-class from the CSS standard.
+                let label = pseudoClass.capitalize();
+
+                let labelElement = document.createElement("label");
+
+                let checkboxElement = document.createElement("input");
+                checkboxElement.addEventListener("change", this._forcedPseudoClassCheckboxChanged.bind(this, pseudoClass));
+                checkboxElement.type = "checkbox";
+
+                this._forcedPseudoClassCheckboxes[pseudoClass] = checkboxElement;
+
+                labelElement.appendChild(checkboxElement);
+                labelElement.append(label);
+
+                if (!groupElement || groupElement.children.length === 2) {
+                    groupElement = document.createElement("div");
+                    groupElement.className = "group";
+                    this._forcedPseudoClassContainer.appendChild(groupElement);
+                }
+
+                groupElement.appendChild(labelElement);
+            }, this);
+
+            this.contentView.element.appendChild(this._forcedPseudoClassContainer);
+        }
+
+        this._computedStyleDetailsPanel = new WebInspector.ComputedStyleDetailsPanel(this);
+        this._rulesStyleDetailsPanel = new WebInspector.RulesStyleDetailsPanel(this);
+        this._visualStyleDetailsPanel = new WebInspector.VisualStyleDetailsPanel(this);
+
+        this._computedStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+        this._rulesStyleDetailsPanel.addEventListener(WebInspector.StyleDetailsPanel.Event.Refreshed, this._filterDidChange, this);
+
+        this._panels = [this._computedStyleDetailsPanel, this._rulesStyleDetailsPanel, this._visualStyleDetailsPanel];
+        this._panelNavigationInfo = [this._computedStyleDetailsPanel.navigationInfo, this._rulesStyleDetailsPanel.navigationInfo, this._visualStyleDetailsPanel.navigationInfo];
+
+        this._lastSelectedSectionSetting = new WebInspector.Setting("last-selected-style-details-panel", this._rulesStyleDetailsPanel.navigationInfo.identifier);
+
+        let selectedPanel = this._panelMatchingIdentifier(this._lastSelectedSectionSetting.value);
+        if (!selectedPanel)
+            selectedPanel = this._rulesStyleDetailsPanel;
+
+        this._switchPanels(selectedPanel);
+
+        this._navigationItem = new WebInspector.ScopeRadioButtonNavigationItem(this._identifier, this._displayName, this._panelNavigationInfo, selectedPanel.navigationInfo);
+        this._navigationItem.addEventListener(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged, this._handleSelectedItemChanged, this);
+
+        let optionsContainer = this.element.createChild("div", "options-container");
+
+        let newRuleButton = optionsContainer.createChild("img", "new-rule");
+        newRuleButton.title = WebInspector.UIString("New Rule");
+        newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
+
+        this._filterBar = new WebInspector.FilterBar;
+        this._filterBar.placeholder = WebInspector.UIString("Filter Styles");
+        this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
+        optionsContainer.appendChild(this._filterBar.element);
+
+        this._classToggleButton = optionsContainer.createChild("button", "toggle-class-toggle");
+        this._classToggleButton.textContent = WebInspector.UIString("Classes");
+        this._classToggleButton.title = WebInspector.UIString("Toggle Classes");
+        this._classToggleButton.addEventListener("click", this._classToggleButtonClicked.bind(this));
+
+        this._classListContainer = this.element.createChild("div", "class-list-container");
+        this._classListContainer.hidden = true;
+
+        this._addClassContainer = this._classListContainer.createChild("div", "new-class");
+        this._addClassContainer.title = WebInspector.UIString("Add a Class");
+        this._addClassContainer.addEventListener("click", this._addClassContainerClicked.bind(this));
+
+        let addClassCheckbox = this._addClassContainer.createChild("input");
+        addClassCheckbox.type = "checkbox";
+        addClassCheckbox.checked = true;
+
+        let addClassIcon = useSVGSymbol("Images/Plus13.svg", "add-class-icon");
+        this._addClassContainer.appendChild(addClassIcon);
+
+        this._addClassInput = this._addClassContainer.createChild("input", "class-name-input");
+        this._addClassInput.setAttribute("placeholder", WebInspector.UIString("Enter Class Name"));
+        this._addClassInput.addEventListener("keypress", this._addClassInputKeyPressed.bind(this));
+        this._addClassInput.addEventListener("blur", this._addClassInputBlur.bind(this));
+
+        WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetAdded, this.refresh, this);
+        WebInspector.cssStyleManager.addEventListener(WebInspector.CSSStyleManager.Event.StyleSheetRemoved, this.refresh, this);
+    }
+
+    // Public
+
+    supportsDOMNode(nodeToInspect)
+    {
+        return nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+    }
+
+    refresh()
+    {
+        let domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        this.contentView.element.scrollTop = this._initialScrollOffset;
+
+        for (let panel of this._panels) {
+            panel.element._savedScrollTop = undefined;
+            panel.markAsNeedsRefresh(domNode);
+        }
+
+        this._updatePseudoClassCheckboxes();
+
+        if (!this._classListContainer.hidden)
+            this._populateClassToggles();
+    }
+
+    visibilityDidChange()
+    {
+        super.visibilityDidChange();
+
+        if (!this._selectedPanel)
+            return;
+
+        if (!this.visible) {
+            this._selectedPanel.hidden();
+            return;
+        }
+
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        this._selectedPanel.shown();
+        this._selectedPanel.markAsNeedsRefresh(this.domNode);
+    }
+
+    widthDidChange()
+    {
+        super.widthDidChange();
+
+        this._updateNoForcedPseudoClassesScrollOffset();
+
+        if (this._selectedPanel)
+            this._selectedPanel.widthDidChange();
+    }
+
+    computedStyleDetailsPanelShowProperty(property)
+    {
+        this._rulesStyleDetailsPanel.scrollToSectionAndHighlightProperty(property);
+        this._switchPanels(this._rulesStyleDetailsPanel);
+
+        this._navigationItem.selectedItemIdentifier = this._lastSelectedSectionSetting.value;
+    }
+
+    // Protected
+
+    addEventListeners()
+    {
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+        if (!effectiveDOMNode)
+            return;
+
+        effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassCheckboxes, this);
+        effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeModified, this._handleNodeAttributeModified, this);
+        effectiveDOMNode.addEventListener(WebInspector.DOMNode.Event.AttributeRemoved, this._handleNodeAttributeRemoved, this);
+    }
+
+    removeEventListeners()
+    {
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+        if (!effectiveDOMNode)
+            return;
+
+        effectiveDOMNode.removeEventListener(null, null, this);
+    }
+
+    // Private
+
+    get _initialScrollOffset()
+    {
+        if (!WebInspector.cssStyleManager.canForcePseudoClasses())
+            return 0;
+        return this.domNode && this.domNode.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
+    }
+
+    _updateNoForcedPseudoClassesScrollOffset()
+    {
+        if (this._forcedPseudoClassContainer)
+            WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = this._forcedPseudoClassContainer.offsetHeight;
+    }
+
+    _panelMatchingIdentifier(identifier)
+    {
+        let selectedPanel = null;
+        for (let panel of this._panels) {
+            if (panel.navigationInfo.identifier !== identifier)
+                continue;
+
+            selectedPanel = panel;
+            break;
+        }
+
+        return selectedPanel;
+    }
+
+    _handleSelectedItemChanged()
+    {
+        let selectedIdentifier = this._navigationItem.selectedItemIdentifier;
+        let selectedPanel = this._panelMatchingIdentifier(selectedIdentifier);
+        this._switchPanels(selectedPanel);
+    }
+
+    _switchPanels(selectedPanel)
+    {
+        console.assert(selectedPanel);
+
+        if (this._selectedPanel) {
+            this._selectedPanel.hidden();
+            this._selectedPanel.element._savedScrollTop = this.contentView.element.scrollTop;
+            this.contentView.removeSubview(this._selectedPanel);
+        }
+
+        this._selectedPanel = selectedPanel;
+        if (!this._selectedPanel)
+            return;
+
+        this.contentView.addSubview(this._selectedPanel);
+
+        if (typeof this._selectedPanel.element._savedScrollTop === "number")
+            this.contentView.element.scrollTop = this._selectedPanel.element._savedScrollTop;
+        else
+            this.contentView.element.scrollTop = this._initialScrollOffset;
+
+        let hasFilter = typeof this._selectedPanel.filterDidChange === "function";
+        this.contentView.element.classList.toggle("has-filter-bar", hasFilter);
+        if (this._filterBar)
+            this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, hasFilter && this._filterBar.hasActiveFilters());
+
+        this.contentView.element.classList.toggle("supports-new-rule", typeof this._selectedPanel.newRuleButtonClicked === "function");
+        this._selectedPanel.shown();
+
+        this._lastSelectedSectionSetting.value = selectedPanel.navigationInfo.identifier;
+    }
+
+    _forcedPseudoClassCheckboxChanged(pseudoClass, event)
+    {
+        if (!this.domNode)
+            return;
+
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+
+        effectiveDOMNode.setPseudoClassEnabled(pseudoClass, event.target.checked);
+    }
+
+    _updatePseudoClassCheckboxes()
+    {
+        if (!this.domNode)
+            return;
+
+        let effectiveDOMNode = this.domNode.isPseudoElement() ? this.domNode.parentNode : this.domNode;
+
+        let enabledPseudoClasses = effectiveDOMNode.enabledPseudoClasses;
+
+        for (let pseudoClass in this._forcedPseudoClassCheckboxes) {
+            let checkboxElement = this._forcedPseudoClassCheckboxes[pseudoClass];
+            checkboxElement.checked = enabledPseudoClasses.includes(pseudoClass);
+        }
+    }
+
+    _handleNodeAttributeModified(event)
+    {
+        if (event && event.data && event.data.name === "class")
+            this._populateClassToggles();
+    }
+
+    _handleNodeAttributeRemoved(event)
+    {
+        if (event && event.data && event.data.name === "class")
+            this._populateClassToggles();
+    }
+
+
+    _newRuleButtonClicked()
+    {
+        if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonClicked === "function")
+            this._selectedPanel.newRuleButtonClicked();
+    }
+
+    _classToggleButtonClicked(event)
+    {
+        this._classToggleButton.classList.toggle("selected");
+        this._classListContainer.hidden = !this._classListContainer.hidden;
+        if (this._classListContainer.hidden)
+            return;
+
+        this._populateClassToggles();
+    }
+
+    _addClassContainerClicked(event)
+    {
+        this._addClassContainer.classList.add("active");
+        this._addClassInput.focus();
+    }
+
+    _addClassInputKeyPressed(event)
+    {
+        if (event.keyCode !== WebInspector.KeyboardShortcut.Key.Enter.keyCode)
+            return;
+
+        this._addClassInput.blur();
+    }
+
+    _addClassInputBlur(event)
+    {
+        this._toggleClass.call(this, this._addClassInput.value, true);
+        this._addClassContainer.classList.remove("active");
+        this._addClassInput.value = null;
+    }
+
+    _populateClassToggles()
+    {
+        // Ensure that _addClassContainer is the first child of _classListContainer.
+        while (this._classListContainer.children.length > 1)
+            this._classListContainer.children[1].remove();
+
+        let classes = this.domNode.getAttribute("class");
+        let classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
+        if (!classToggledMap)
+            classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol] = new Map;
+
+        if (classes && classes.length) {
+            for (let className of classes.split(/\s+/))
+                classToggledMap.set(className, true);
+        }
+
+        for (let [className, toggled] of classToggledMap) {
+            if ((toggled && !classes.includes(className)) || (!toggled && classes.includes(className))) {
+                toggled = !toggled;
+                classToggledMap.set(className, toggled);
+            }
+
+            this._createToggleForClassName(className);
+        }
+    }
+
+    _createToggleForClassName(className)
+    {
+        if (!className || !className.length)
+            return;
+
+        let classToggledMap = this.domNode[WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol];
+        if (!classToggledMap)
+            return;
+
+        if (!classToggledMap.has(className))
+            classToggledMap.set(className, true);
+
+        let toggled = classToggledMap.get(className);
+
+        let classNameContainer = document.createElement("div");
+        classNameContainer.classList.add("class-toggle");
+
+        let classNameToggle = classNameContainer.createChild("input");
+        classNameToggle.type = "checkbox";
+        classNameToggle.checked = toggled;
+
+        let classNameTitle = classNameContainer.createChild("span");
+        classNameTitle.textContent = className;
+
+        function classNameToggleChanged(event) {
+            this._toggleClass.call(this, className, classNameToggle.checked);
+            classToggledMap.set(className, classNameToggle.checked);
+        }
+
+        classNameToggle.addEventListener("click", classNameToggleChanged.bind(this));
+        classNameTitle.addEventListener("click", (event) => {
+            classNameToggle.checked = !classNameToggle.checked;
+            classNameToggleChanged.call(this);
+        });
+
+        this._classListContainer.appendChild(classNameContainer);
+    }
+
+    _toggleClass(className, flag)
+    {
+        if (!className || !className.length)
+            return;
+
+        let effectiveNode = this.domNode;
+        if (effectiveNode && effectiveNode.isPseudoElement())
+            effectiveNode = effectiveNode.parentNode;
+
+        console.assert(effectiveNode);
+        if (!effectiveNode)
+            return;
+
+        if (effectiveNode.nodeType() !== Node.ELEMENT_NODE)
+            return;
+
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function toggleClass(className, flag)
+            {
+                this.classList.toggle(className, flag);
+            }
+
+            object.callFunction(toggleClass, [className, flag]);
+            object.release();
+        }
+
+        WebInspector.RemoteObject.resolveNode(effectiveNode, "", resolvedNode);
+    }
+
+    _filterDidChange()
+    {
+        this.contentView.element.classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName, this._filterBar.hasActiveFilters());
+
+        this._selectedPanel.filterDidChange(this._filterBar);
+    }
+};
+
+WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset = 30; // Default height of the forced pseudo classes container. Updated in widthDidChange.
+WebInspector.CSSStyleDetailsSidebarPanel.FilterInProgressClassName = "filter-in-progress";
+WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName = "filter-section-has-label";
+WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName = "filter-matching";
+WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName = "filter-section-non-matching";
+WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInPropertyClassName = "filter-property-non-matching";
+
+WebInspector.CSSStyleDetailsSidebarPanel.ToggledClassesSymbol = Symbol("css-style-details-sidebar-panel-toggled-classes-symbol");
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameIcons.css b/Source/WebInspectorUI/UserInterface/Views/CallFrameIcons.css
new file mode 100644
index 000000000..012e28187
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameIcons.css
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.program-icon .icon {
+    content: url(../Images/Program.svg);
+}
+
+.function-icon .icon {
+    content: url(../Images/Function.svg);
+}
+
+.event-listener-icon .icon {
+    content: url(../Images/EventListener.svg);
+}
+
+.native-icon .icon {
+    content: url(../Images/Native.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
new file mode 100644
index 000000000..5da914b06
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameTreeElement.js
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CallFrameTreeElement = class CallFrameTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(callFrame)
+    {
+        console.assert(callFrame instanceof WebInspector.CallFrame);
+
+        var className = WebInspector.CallFrameView.iconClassNameForCallFrame(callFrame);
+        var title = callFrame.functionName || WebInspector.UIString("(anonymous function)");
+
+        super(className, title, null, callFrame, false);
+
+        if (!callFrame.nativeCode && callFrame.sourceCodeLocation) {
+            var displayScriptURL = callFrame.sourceCodeLocation.displaySourceCode.url;
+            if (displayScriptURL) {
+                this.subtitle = document.createElement("span");
+                callFrame.sourceCodeLocation.populateLiveDisplayLocationString(this.subtitle, "textContent");
+                // Set the tooltip on the entire tree element in onattach, once the element is created.
+                this.tooltipHandledSeparately = true;
+            }
+        }
+
+        this._callFrame = callFrame;
+    }
+
+    // Public
+
+    get callFrame()
+    {
+        return this._callFrame;
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        console.assert(this.element);
+
+        if (this.tooltipHandledSeparately) {
+            var tooltipPrefix = this.mainTitle + "\n";
+            this._callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
new file mode 100644
index 000000000..4aa15d766
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.css
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.call-frame {
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.call-frame .icon {
+    display: inline-block;
+    vertical-align: top;
+    width: 16px;
+    height: 16px;
+    margin-right: 3px;
+}
+
+.call-frame .titles {
+    display: inline-block;
+}
+
+.call-frame .subtitle,
+.call-frame .subtitle .source-link {
+    color: hsla(0, 0%, 0%, 0.6);
+    text-decoration: none;
+}
+
+.call-frame:hover .subtitle .source-link,
+.call-frame:focus .subtitle .source-link {
+    color: hsl(210, 0%, 0%);
+}
+
+.call-frame .subtitle:empty {
+    display: none;
+}
+
+.call-frame .subtitle {
+    font-size: inherit;
+}
+
+.call-frame .colon {
+    background-color: red;
+}
+
+.call-frame .separator {
+    white-space: nowrap;
+    color: hsla(0, 0%, 0%, 0.2);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CallFrameView.js b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.js
new file mode 100644
index 000000000..26cc7da02
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CallFrameView.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CallFrameView = class CallFrameView extends WebInspector.Object
+{
+    constructor(callFrame, showFunctionName)
+    {
+        console.assert(callFrame instanceof WebInspector.CallFrame);
+
+        var callFrameElement = document.createElement("div");
+        callFrameElement.classList.add("call-frame", WebInspector.CallFrameView.iconClassNameForCallFrame(callFrame));
+
+        var subtitleElement = document.createElement("span");
+        subtitleElement.classList.add("subtitle");
+
+        var sourceCodeLocation = callFrame.sourceCodeLocation;
+        if (sourceCodeLocation) {
+            WebInspector.linkifyElement(callFrameElement, sourceCodeLocation);
+
+            var linkElement = document.createElement("a");
+            linkElement.classList.add("source-link");
+            linkElement.href = sourceCodeLocation.sourceCode.url;
+
+            if (showFunctionName) {
+                var separatorElement = document.createElement("span");
+                separatorElement.classList.add("separator");
+                separatorElement.textContent = " — ";
+                subtitleElement.append(separatorElement);
+            }
+
+            subtitleElement.append(linkElement);
+
+            sourceCodeLocation.populateLiveDisplayLocationTooltip(linkElement);
+            sourceCodeLocation.populateLiveDisplayLocationString(linkElement, "textContent");
+        }
+
+        var titleElement = document.createElement("span");
+        titleElement.classList.add("title");
+
+        if (showFunctionName) {
+            var imgElement = document.createElement("img");
+            imgElement.classList.add("icon");
+
+            titleElement.append(imgElement, callFrame.functionName || WebInspector.UIString("(anonymous function)"));
+        }
+
+        callFrameElement.append(titleElement, subtitleElement);
+
+        return callFrameElement;
+    }
+
+    static iconClassNameForCallFrame(callFrame)
+    {
+        if (callFrame.programCode)
+            return WebInspector.CallFrameView.ProgramIconStyleClassName;
+
+        // This is more than likely an event listener function with an "on" prefix and it is
+        // as long or longer than the shortest event listener name -- "oncut".
+        if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
+            return WebInspector.CallFrameView.EventListenerIconStyleClassName;
+
+        if (callFrame.nativeCode)
+            return WebInspector.CallFrameView.NativeIconStyleClassName;
+
+        return WebInspector.CallFrameView.FunctionIconStyleClassName;
+    }
+};
+
+WebInspector.CallFrameView.ProgramIconStyleClassName = "program-icon";
+WebInspector.CallFrameView.FunctionIconStyleClassName = "function-icon";
+WebInspector.CallFrameView.EventListenerIconStyleClassName = "event-listener-icon";
+WebInspector.CallFrameView.NativeIconStyleClassName = "native-icon";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css b/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css
new file mode 100644
index 000000000..87a3acf0f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section > .content > .group > .row.chart > .title {
+    color: hsl(0, 0%, 22%);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+
+    font-size: 11px;
+
+    padding: 4px 5px 0px 9px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content {
+    display: flex;
+    justify-content: center;
+    padding: 8px 5px 0px 12px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > svg > path.hidden {
+    display: none;
+}
+.details-section > .content > .group > .row.chart > .chart-content > svg > path.chart-segment {
+    stroke-width: 1;
+    stroke: rgba(255, 255, 255, 0.7);
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > svg > path.empty-chart {
+    fill: rgba(0, 0, 0, 0.02);
+    stroke-width: 1;
+    stroke: rgba(0, 0, 0, 0.1);
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend {
+    display: table;
+    margin-left: 12px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item {
+    display: table-row;
+    height: 16px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label {
+    color: hsl(0, 0%, 20%);
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .value {
+    padding-left: 8px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > * {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > .color-key,
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox] {
+    width: 10px;
+    height: 10px;
+    vertical-align: top;
+    margin: 0 8px 0 3px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > .color-key {
+    display: inline-block;
+    margin-top: 1px;
+    border: solid 1px hsla(0, 0%, 0%, 0.15);
+    border-radius: 2px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]:not(:checked),
+body.window-docked-inactive .details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox],
+body.window-inactive .details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox] {
+    filter: none !important;
+}
+
+.details-section > .content > .group > .row.chart > .defs-only {
+    display: none;
+}
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js b/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js
new file mode 100644
index 000000000..1a6bfef44
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js
@@ -0,0 +1,392 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ChartDetailsSectionRow = class ChartDetailsSectionRow extends WebInspector.DetailsSectionRow
+{
+    constructor(delegate, chartSize, innerRadiusRatio)
+    {
+        super(WebInspector.UIString("No Chart Available"));
+
+        innerRadiusRatio = innerRadiusRatio || 0;
+        console.assert(chartSize > 0, chartSize);
+        console.assert(innerRadiusRatio >= 0 && innerRadiusRatio < 1, innerRadiusRatio);
+
+        this.element.classList.add("chart");
+
+        this._titleElement = document.createElement("div");
+        this._titleElement.className = "title";
+        this.element.appendChild(this._titleElement);
+
+        let chartContentElement = document.createElement("div");
+        chartContentElement.className = "chart-content";
+        this.element.appendChild(chartContentElement);
+
+        this._chartElement = createSVGElement("svg");
+        chartContentElement.appendChild(this._chartElement);
+
+        this._legendElement = document.createElement("div");
+        this._legendElement.className = "legend";
+        chartContentElement.appendChild(this._legendElement);
+
+        this._delegate = delegate;
+        this._items = new Map;
+        this._title = "";
+        this._chartSize = chartSize;
+        this._radius = (this._chartSize / 2) - 1;   // Subtract one to accomodate chart stroke width.
+        this._innerRadius = innerRadiusRatio ? Math.floor(this._radius * innerRadiusRatio) : 0;
+        this._total = 0;
+
+        this._svgFiltersElement = document.createElement("svg");
+        this._svgFiltersElement.classList.add("defs-only");
+        this.element.append(this._svgFiltersElement);
+
+        this._checkboxStyleElement = document.createElement("style");
+        this._checkboxStyleElement.id = "checkbox-styles";
+        document.getElementsByTagName("head")[0].append(this._checkboxStyleElement);
+
+        function createEmptyChartPathData(c, r1, r2)
+        {
+            const a1 = 0;
+            const a2 = Math.PI * 1.9999;
+            let x1 = c + Math.cos(a1) * r1,
+                y1 = c + Math.sin(a1) * r1,
+                x2 = c + Math.cos(a2) * r1,
+                y2 = c + Math.sin(a2) * r1,
+                x3 = c + Math.cos(a2) * r2,
+                y3 = c + Math.sin(a2) * r2,
+                x4 = c + Math.cos(a1) * r2,
+                y4 = c + Math.sin(a1) * r2;
+            return [
+                "M", x1, y1,                    // Starting position.
+                "A", r1, r1, 0, 1, 1, x2, y2,   // Draw outer arc.
+                "Z",                            // Close path.
+                "M", x3, y3,                    // Starting position.
+                "A", r2, r2, 0, 1, 0, x4, y4,   // Draw inner arc.
+                "Z"                             // Close path.
+            ].join(" ");
+        }
+
+        this._emptyChartPath = createSVGElement("path");
+        this._emptyChartPath.setAttribute("d", createEmptyChartPathData(this._chartSize / 2, this._radius, this._innerRadius));
+        this._emptyChartPath.classList.add("empty-chart");
+        this._chartElement.appendChild(this._emptyChartPath);
+    }
+
+    // Public
+
+    get chartSize()
+    {
+        return this._chartSize;
+    }
+
+    set title(title)
+    {
+        if (this._title === title)
+            return;
+
+        this._title = title;
+        this._titleElement.textContent = title;
+    }
+
+    get total()
+    {
+        return this._total;
+    }
+
+    addItem(id, label, value, color, checkbox, checked)
+    {
+        console.assert(!this._items.has(id), "Already added item with id: " + id);
+        if (this._items.has(id))
+            return;
+
+        console.assert(value >= 0, "Value cannot be negative.");
+        if (value < 0)
+            return;
+
+        this._items.set(id, {label, value, color, checkbox, checked});
+        this._total += value;
+
+        this._needsLayout();
+    }
+
+    setItemValue(id, value)
+    {
+        let item = this._items.get(id);
+        console.assert(item, "Cannot set value for invalid item id: " + id);
+        if (!item)
+            return;
+
+        console.assert(value >= 0, "Value cannot be negative.");
+        if (value < 0)
+            return;
+
+        if (item.value === value)
+            return;
+
+        this._total += value - item.value;
+        item.value = value;
+
+        this._needsLayout();
+    }
+
+    clearItems()
+    {
+        for (let item of this._items.values()) {
+            let path = item[WebInspector.ChartDetailsSectionRow.ChartSegmentPathSymbol];
+            if (path)
+                path.remove();
+        }
+
+        this._total = 0;
+        this._items.clear();
+
+        this._needsLayout();
+    }
+
+    // Private
+
+    _addCheckboxColorFilter(id, r, g, b)
+    {
+        for (let i = 0; i < this._svgFiltersElement.childNodes.length; ++i) {
+            if (this._svgFiltersElement.childNodes[i].id === id)
+                return;
+        }
+
+        r /= 255;
+        b /= 255;
+        g /= 255;
+
+        // Create an svg:filter element that approximates "background-blend-mode: color", for grayscale input.
+        let filterElement = createSVGElement("filter");
+        filterElement.id = id;
+        filterElement.setAttribute("color-interpolation-filters", "sRGB");
+
+        let values = [1 - r, 0, 0, 0, r,
+                      1 - g, 0, 0, 0, g,
+                      1 - b, 0, 0, 0, b,
+                      0,     0, 0, 1, 0];
+
+        let colorMatrixPrimitive = createSVGElement("feColorMatrix");
+        colorMatrixPrimitive.setAttribute("type", "matrix");
+        colorMatrixPrimitive.setAttribute("values", values.join(" "));
+
+        function createGammaPrimitive(tagName, value)
+        {
+            let gammaPrimitive = createSVGElement(tagName);
+            gammaPrimitive.setAttribute("type", "gamma");
+            gammaPrimitive.setAttribute("exponent", value);
+            return gammaPrimitive;
+        }
+
+        let componentTransferPrimitive = createSVGElement("feComponentTransfer");
+        componentTransferPrimitive.append(createGammaPrimitive("feFuncR", 1.4), createGammaPrimitive("feFuncG", 1.4), createGammaPrimitive("feFuncB", 1.4));
+        filterElement.append(colorMatrixPrimitive, componentTransferPrimitive);
+
+        this._svgFiltersElement.append(filterElement);
+
+        let styleSheet = this._checkboxStyleElement.sheet;
+        styleSheet.insertRule(".details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]." + id + " { filter: grayscale(1) url(#" + id + ") }", 0);
+    }
+
+    _updateLegend()
+    {
+        if (!this._items.size) {
+            this._legendElement.removeChildren();
+            return;
+        }
+
+        function formatItemValue(item)
+        {
+            if (this._delegate && typeof this._delegate.formatChartValue === "function")
+                return this._delegate.formatChartValue(item.value);
+            return item.value;
+        }
+
+        for (let [id, item] of this._items) {
+            if (item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol]) {
+                let valueElement = item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol];
+                valueElement.textContent = formatItemValue.call(this, item);
+                continue;
+            }
+
+            let labelElement = document.createElement("label");
+            let keyElement;
+            if (item.checkbox) {
+                let className = id.toLowerCase();
+                let rgb = item.color.substring(4, item.color.length - 1).replace(/ /g, "").split(",");
+                if (rgb[0] === rgb[1] && rgb[1] === rgb[2])
+                    rgb[0] = rgb[1] = rgb[2] = Math.min(160, rgb[0]);
+
+                keyElement = document.createElement("input");
+                keyElement.type = "checkbox";
+                keyElement.classList.add(className);
+                keyElement.checked = item.checked;
+                keyElement[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol] = id;
+
+                keyElement.addEventListener("change", this._legendItemCheckboxValueChanged.bind(this));
+
+                this._addCheckboxColorFilter(className, rgb[0], rgb[1], rgb[2]);
+            } else {
+                keyElement = document.createElement("div");
+                keyElement.classList.add("color-key");
+                keyElement.style.backgroundColor = item.color;
+            }
+
+            labelElement.append(keyElement, item.label);
+
+            let valueElement = document.createElement("div");
+            valueElement.classList.add("value");
+            valueElement.textContent = formatItemValue.call(this, item);
+
+            item[WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol] = valueElement;
+
+            let legendItemElement = document.createElement("div");
+            legendItemElement.classList.add("legend-item");
+            legendItemElement.append(labelElement, valueElement);
+
+            this._legendElement.append(legendItemElement);
+        }
+    }
+
+    _legendItemCheckboxValueChanged(event)
+    {
+        let checkbox = event.target;
+        let id = checkbox[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol];
+        this.dispatchEventToListeners(WebInspector.ChartDetailsSectionRow.Event.LegendItemChecked, {id, checked: checkbox.checked});
+    }
+
+    _needsLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this._updateLayout.bind(this));
+    }
+
+    _updateLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
+            this._scheduledLayoutUpdateIdentifier = undefined;
+        }
+
+        this._updateLegend();
+
+        this._chartElement.setAttribute("width", this._chartSize);
+        this._chartElement.setAttribute("height", this._chartSize);
+        this._chartElement.setAttribute("viewbox", "0 0 " + this._chartSize + " " + this._chartSize);
+
+        function createSegmentPathData(c, a1, a2, r1, r2)
+        {
+            const largeArcFlag = ((a2 - a1) % (Math.PI * 2)) > Math.PI ? 1 : 0;
+            let x1 = c + Math.cos(a1) * r1,
+                y1 = c + Math.sin(a1) * r1,
+                x2 = c + Math.cos(a2) * r1,
+                y2 = c + Math.sin(a2) * r1,
+                x3 = c + Math.cos(a2) * r2,
+                y3 = c + Math.sin(a2) * r2,
+                x4 = c + Math.cos(a1) * r2,
+                y4 = c + Math.sin(a1) * r2;
+            return [
+                "M", x1, y1,                                // Starting position.
+                "A", r1, r1, 0, largeArcFlag, 1, x2, y2,    // Draw outer arc.
+                "L", x3, y3,                                // Connect outer and innner arcs.
+                "A", r2, r2, 0, largeArcFlag, 0, x4, y4,    // Draw inner arc.
+                "Z"                                         // Close path.
+            ].join(" ");
+        }
+
+        // Balance item values so that all non-zero chart segments are visible.
+        const minimumDisplayValue = this._total * 0.015;
+
+        let items = [];
+        for (let item of this._items.values()) {
+            item.displayValue = item.value ? Math.max(minimumDisplayValue, item.value) : 0;
+            if (item.displayValue)
+                items.push(item);
+        }
+
+        if (items.length > 1) {
+            items.sort(function(a, b) { return a.value - b.value; });
+
+            let largeItemCount = items.length;
+            let totalAdjustedValue = 0;
+            for (let item of items) {
+                if (item.value < minimumDisplayValue) {
+                    totalAdjustedValue += minimumDisplayValue - item.value;
+                    largeItemCount--;
+                    continue;
+                }
+
+                if (!totalAdjustedValue || !largeItemCount)
+                    break;
+
+                const donatedValue = totalAdjustedValue / largeItemCount;
+                if (item.displayValue - donatedValue >= minimumDisplayValue) {
+                    item.displayValue -= donatedValue;
+                    totalAdjustedValue -= donatedValue;
+                }
+
+                largeItemCount--;
+            }
+        }
+
+        const center = this._chartSize / 2;
+        let startAngle = -Math.PI / 2;
+        let endAngle = 0;
+        for (let [id, item] of this._items) {
+            let path = item[WebInspector.ChartDetailsSectionRow.ChartSegmentPathSymbol];
+            if (!path) {
+                path = createSVGElement("path");
+                path.classList.add("chart-segment");
+                path.setAttribute("fill", item.color);
+                this._chartElement.appendChild(path);
+
+                item[WebInspector.ChartDetailsSectionRow.ChartSegmentPathSymbol] = path;
+            }
+
+            if (!item.value) {
+                path.classList.add("hidden");
+                continue;
+            }
+
+            const angle = (item.displayValue / this._total) * Math.PI * 2;
+            endAngle = startAngle + angle;
+
+            path.setAttribute("d", createSegmentPathData(center, startAngle, endAngle, this._radius, this._innerRadius));
+            path.classList.remove("hidden");
+
+            startAngle = endAngle;
+        }
+    }
+};
+
+WebInspector.ChartDetailsSectionRow.DataItemIdSymbol = Symbol("chart-details-section-row-data-item-id");
+WebInspector.ChartDetailsSectionRow.ChartSegmentPathSymbol = Symbol("chart-details-section-row-chart-segment-path");
+WebInspector.ChartDetailsSectionRow.LegendItemValueElementSymbol = Symbol("chart-details-section-row-legend-item-value-element");
+
+WebInspector.ChartDetailsSectionRow.Event = {
+    LegendItemChecked: "chart-details-section-row-legend-item-checked"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/CircleChart.css b/Source/WebInspectorUI/UserInterface/Views/CircleChart.css
new file mode 100644
index 000000000..4e656a243
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CircleChart.css
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.circle-chart {
+    position: relative;
+}
+
+.circle-chart > svg > path.background {
+    fill: hsla(0, 0%, 0%, 0.02);
+    stroke: hsla(0, 0%, 0%, 0.1);
+    stroke-width: 1;
+}
+
+.circle-chart > .center {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CircleChart.js b/Source/WebInspectorUI/UserInterface/Views/CircleChart.js
new file mode 100644
index 000000000..729497fa9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CircleChart.js
@@ -0,0 +1,216 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// CircleChart creates a donut/pie chart of colored sections.
+//
+// Initialize the chart with a size and inner radius to get a blank chart.
+// To populate with data, first initialize the segments. The class names you
+// provide for the segments will allow you to style them. You can then update
+// the chart with new values (in the same order as the segments) at any time.
+//
+// SVG:
+//
+// - There is a single background path for the background.
+// - There is a path for each segment.
+// - If you want to put something inside the middle of the chart you can use `centerElement`.
+//
+//  <div class="circle-chart">
+//      <svg width="120" height="120" viewbox="0 0 120 120">
+//          <path class="background" d="..."/>
+//          <path class="segment segment-class-name-1" d="..."/>
+//          <path class="segment segment-class-name-2" d="..."/>
+//          ...
+//      </svg>
+//      <div class="center"></div>
+//  </div>
+
+WebInspector.CircleChart = class CircleChart
+{
+    constructor({size, innerRadiusRatio})
+    {
+        this._data = [];
+        this._size = size;
+        this._radius = (size / 2) - 1;
+        this._innerRadius = innerRadiusRatio ? Math.floor(this._radius * innerRadiusRatio) : 0;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("circle-chart");
+
+        this._chartElement = this._element.appendChild(createSVGElement("svg"));
+        this._chartElement.setAttribute("width", size);
+        this._chartElement.setAttribute("height", size);
+        this._chartElement.setAttribute("viewbox", `0 0 ${size} ${size}`);
+
+        this._pathElements = [];
+        this._values = [];
+        this._total = 0;
+
+        let backgroundPath = this._chartElement.appendChild(createSVGElement("path"));
+        backgroundPath.setAttribute("d", this._createCompleteCirclePathData(this.size / 2, this._radius, this._innerRadius));
+        backgroundPath.classList.add("background");
+    }
+
+    // Public
+
+    get element() { return this._element; }
+    get points() { return this._points; }
+    get size() { return this._size; }
+
+    get centerElement()
+    {
+        if (!this._centerElement) {
+            this._centerElement = this._element.appendChild(document.createElement("div"));
+            this._centerElement.classList.add("center");
+            this._centerElement.style.width = this._centerElement.style.height = this._radius + "px";
+            this._centerElement.style.top = this._centerElement.style.left = (this._radius - this._innerRadius) + "px";
+        }
+
+        return this._centerElement;
+    }
+
+    get segments()
+    {
+        return this._segments;
+    }
+
+    set segments(segmentClassNames)
+    {
+        for (let pathElement of this._pathElements)
+            pathElement.remove();
+
+        this._pathElements = [];
+
+        for (let className of segmentClassNames) {
+            let pathElement = this._chartElement.appendChild(createSVGElement("path"));
+            pathElement.classList.add("segment", className);
+            this._pathElements.push(pathElement);
+        }
+    }
+
+    get values()
+    {
+        return this._values;
+    }
+
+    set values(values)
+    {
+        console.assert(values.length === this._pathElements.length, "Should have the same number of values as segments");
+
+        this._values = values;
+        this._total = 0;
+
+        for (let value of values)
+            this._total += value;
+    }
+
+    clear()
+    {
+        this.values = new Array(this._values.length).fill(0);
+    }
+
+    needsLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
+    }
+
+    updateLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
+            this._scheduledLayoutUpdateIdentifier = undefined;
+        }
+
+        if (!this._values.length)
+            return;
+
+        const center = this._size / 2;
+        let startAngle = -Math.PI / 2;
+        let endAngle = 0;
+
+        for (let i = 0; i < this._values.length; ++i) {
+            let value = this._values[i];
+            let pathElement = this._pathElements[i];
+
+            if (value === 0)
+                pathElement.removeAttribute("d");
+            else if (value === this._total)
+                pathElement.setAttribute("d", this._createCompleteCirclePathData(center, this._radius, this._innerRadius));
+            else {
+                let angle = (value / this._total) * Math.PI * 2;
+                endAngle = startAngle + angle;
+
+                pathElement.setAttribute("d", this._createSegmentPathData(center, startAngle, endAngle, this._radius, this._innerRadius));
+                startAngle = endAngle;
+            }
+        }
+    }
+
+    // Private
+
+    _createCompleteCirclePathData(c, r1, r2)
+    {
+        const a1 = 0;
+        const a2 = Math.PI * 1.9999;
+        let x1 = c + Math.cos(a1) * r1,
+            y1 = c + Math.sin(a1) * r1,
+            x2 = c + Math.cos(a2) * r1,
+            y2 = c + Math.sin(a2) * r1,
+            x3 = c + Math.cos(a2) * r2,
+            y3 = c + Math.sin(a2) * r2,
+            x4 = c + Math.cos(a1) * r2,
+            y4 = c + Math.sin(a1) * r2;
+        return [
+            "M", x1, y1,                    // Starting position.
+            "A", r1, r1, 0, 1, 1, x2, y2,   // Draw outer arc.
+            "Z",                            // Close path.
+            "M", x3, y3,                    // Starting position.
+            "A", r2, r2, 0, 1, 0, x4, y4,   // Draw inner arc.
+            "Z"                             // Close path.
+        ].join(" ");
+    }
+
+    _createSegmentPathData(c, a1, a2, r1, r2)
+    {
+        const largeArcFlag = ((a2 - a1) % (Math.PI * 2)) > Math.PI ? 1 : 0;
+        let x1 = c + Math.cos(a1) * r1,
+            y1 = c + Math.sin(a1) * r1,
+            x2 = c + Math.cos(a2) * r1,
+            y2 = c + Math.sin(a2) * r1,
+            x3 = c + Math.cos(a2) * r2,
+            y3 = c + Math.sin(a2) * r2,
+            x4 = c + Math.cos(a1) * r2,
+            y4 = c + Math.sin(a1) * r2;
+        return [
+            "M", x1, y1,                                // Starting position.
+            "A", r1, r1, 0, largeArcFlag, 1, x2, y2,    // Draw outer arc.
+            "L", x3, y3,                                // Connect outer and innner arcs.
+            "A", r2, r2, 0, largeArcFlag, 0, x4, y4,    // Draw inner arc.
+            "Z"                                         // Close path.
+        ].join(" ");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/ClusterContentView.css b/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.css
index f0df69078..f0df69078 100644
--- a/Source/WebInspectorUI/UserInterface/ClusterContentView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js b/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js
new file mode 100644
index 000000000..34b8bfb5b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ClusterContentView.js
@@ -0,0 +1,243 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ClusterContentView = class ClusterContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        super(representedObject);
+
+        this.element.classList.add("cluster");
+
+        this._contentViewContainer = new WebInspector.ContentViewContainer;
+        this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+        this.addSubview(this._contentViewContainer);
+
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView ? currentContentView.navigationItems : [];
+    }
+
+    get contentViewContainer()
+    {
+        return this._contentViewContainer;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        if (this._contentViewContainer.currentContentView)
+            return this._contentViewContainer.currentContentView.supportsSplitContentBrowser;
+        return true;
+    }
+
+    shown()
+    {
+        this._contentViewContainer.shown();
+    }
+
+    hidden()
+    {
+        this._contentViewContainer.hidden();
+    }
+
+    closed()
+    {
+        this._contentViewContainer.closeAllContentViews();
+
+        WebInspector.ContentView.removeEventListener(null, null, this);
+    }
+
+    canGoBack()
+    {
+        return this._contentViewContainer.canGoBack();
+    }
+
+    canGoForward()
+    {
+        return this._contentViewContainer.canGoForward();
+    }
+
+    goBack()
+    {
+        this._contentViewContainer.goBack();
+    }
+
+    goForward()
+    {
+        this._contentViewContainer.goForward();
+    }
+
+    get selectionPathComponents()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+        return this._contentViewContainer.currentContentView.selectionPathComponents;
+    }
+
+    get supplementalRepresentedObjects()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+        return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
+    }
+
+    get handleCopyEvent()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
+    }
+
+    get supportsSave()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && currentContentView.supportsSave;
+    }
+
+    get saveData()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && currentContentView.saveData || null;
+    }
+
+    get supportsSearch()
+    {
+        // Always return true so we can intercept the search query to resend it when switching content views.
+        return true;
+    }
+
+    get numberOfSearchResults()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return null;
+        return currentContentView.numberOfSearchResults;
+    }
+
+    get hasPerformedSearch()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return false;
+        return currentContentView.hasPerformedSearch;
+    }
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.automaticallyRevealFirstSearchResult = reveal;
+    }
+
+    performSearch(query)
+    {
+        this._searchQuery = query;
+
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.performSearch(query);
+    }
+
+    searchCleared()
+    {
+        this._searchQuery = null;
+
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.searchCleared();
+    }
+
+    searchQueryWithSelection()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return null;
+        return currentContentView.searchQueryWithSelection();
+    }
+
+    revealPreviousSearchResult(changeFocus)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.revealPreviousSearchResult(changeFocus);
+    }
+
+    revealNextSearchResult(changeFocus)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+        currentContentView.revealNextSearchResult(changeFocus);
+    }
+
+    // Private
+
+    _currentContentViewDidChange(event)
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (currentContentView && currentContentView.supportsSearch) {
+            if (this._searchQuery)
+                currentContentView.performSearch(this._searchQuery);
+            else
+                currentContentView.searchCleared();
+        }
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    }
+
+    _contentViewSelectionPathComponentDidChange(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _contentViewSupplementalRepresentedObjectsDidChange(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    }
+
+    _contentViewNumberOfSearchResultsDidChange(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js
new file mode 100644
index 000000000..a61898b6f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorAdditions.js
@@ -0,0 +1,659 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+(function () {
+    // By default CodeMirror defines syntax highlighting styles based on token
+    // only and shared styles between modes. This limiting and does not match
+    // what we have done in the Web Inspector. So this modifies the XML, CSS
+    // and JavaScript modes to supply two styles for each token. One for the
+    // token and one with the mode name.
+
+    function tokenizeLinkString(stream, state)
+    {
+        console.assert(state._linkQuoteCharacter !== undefined);
+
+        // Eat the string until the same quote is found that started the string.
+        // If this is unquoted, then eat until whitespace or common parse errors.
+        if (state._linkQuoteCharacter)
+            stream.eatWhile(new RegExp("[^" + state._linkQuoteCharacter + "]"));
+        else
+            stream.eatWhile(/[^\s\u00a0=<>\"\']/);
+
+        // If the stream isn't at the end of line then we found the end quote.
+        // In the case, change _linkTokenize to parse the end of the link next.
+        // Otherwise _linkTokenize will stay as-is to parse more of the link.
+        if (!stream.eol())
+            state._linkTokenize = tokenizeEndOfLinkString;
+
+        return "link";
+    }
+
+    function tokenizeEndOfLinkString(stream, state)
+    {
+        console.assert(state._linkQuoteCharacter !== undefined);
+        console.assert(state._linkBaseStyle);
+
+        // Eat the quote character to style it with the base style.
+        if (state._linkQuoteCharacter)
+            stream.eat(state._linkQuoteCharacter);
+
+        var style = state._linkBaseStyle;
+
+        // Clean up the state.
+        delete state._linkTokenize;
+        delete state._linkQuoteCharacter;
+        delete state._linkBaseStyle;
+        delete state._srcSetTokenizeState;
+
+        return style;
+    }
+
+    function tokenizeSrcSetString(stream, state)
+    {
+        console.assert(state._linkQuoteCharacter !== undefined);
+
+        if (state._srcSetTokenizeState === "link") {
+            // Eat the string until a space, comma, or ending quote.
+            // If this is unquoted, then eat until whitespace or common parse errors.
+            if (state._linkQuoteCharacter)
+                stream.eatWhile(new RegExp("[^\\s," + state._linkQuoteCharacter + "]"));
+            else
+                stream.eatWhile(/[^\s,\u00a0=<>\"\']/);
+        } else {
+            // Eat the string until a comma, or ending quote.
+            // If this is unquoted, then eat until whitespace or common parse errors.
+            stream.eatSpace();
+            if (state._linkQuoteCharacter)
+                stream.eatWhile(new RegExp("[^," + state._linkQuoteCharacter + "]"));
+            else
+                stream.eatWhile(/[^\s\u00a0=<>\"\']/);
+            stream.eatWhile(/[\s,]/);
+        }
+
+        // If the stream isn't at the end of line and we found the end quote
+        // change _linkTokenize to parse the end of the link next. Otherwise
+        // _linkTokenize will stay as-is to parse more of the srcset.
+        if (stream.eol() || (!state._linkQuoteCharacter || stream.peek() === state._linkQuoteCharacter))
+            state._linkTokenize = tokenizeEndOfLinkString;
+
+        // Link portion.
+        if (state._srcSetTokenizeState === "link") {
+            state._srcSetTokenizeState = "descriptor";
+            return "link";
+        }
+
+        // Descriptor portion.
+        state._srcSetTokenizeState = "link";
+        return state._linkBaseStyle;
+    }
+
+    function extendedXMLToken(stream, state)
+    {
+        if (state._linkTokenize) {
+            // Call the link tokenizer instead.
+            var style = state._linkTokenize(stream, state);
+            return style && (style + " m-" + this.name);
+        }
+
+        // Remember the start position so we can rewind if needed.
+        var startPosition = stream.pos;
+        var style = this._token(stream, state);
+        if (style === "attribute") {
+            // Look for "href" or "src" attributes. If found then we should
+            // expect a string later that should get the "link" style instead.
+            var text = stream.current().toLowerCase();
+            if (text === "src" || /\bhref\b/.test(text))
+                state._expectLink = true;
+            else if (text === "srcset")
+                state._expectSrcSet = true;
+            else {
+                delete state._expectLink;
+                delete state._expectSrcSet;
+            }
+        } else if (state._expectLink && style === "string") {
+            var current = stream.current();
+
+            // Unless current token is empty quotes, consume quote character
+            // and tokenize link next.
+            if (current !== "\"\"" && current !== "''") {
+                delete state._expectLink;
+
+                // This is a link, so setup the state to process it next.
+                state._linkTokenize = tokenizeLinkString;
+                state._linkBaseStyle = style;
+
+                // The attribute may or may not be quoted.
+                var quote = current[0];
+
+                state._linkQuoteCharacter = quote === "'" || quote === "\"" ? quote : null;
+
+                // Rewind the stream to the start of this token.
+                stream.pos = startPosition;
+
+                // Eat the open quote of the string so the string style
+                // will be used for the quote character.
+                if (state._linkQuoteCharacter)
+                    stream.eat(state._linkQuoteCharacter);
+            }
+        } else if (state._expectSrcSet && style === "string") {
+            var current = stream.current();
+
+            // Unless current token is empty quotes, consume quote character
+            // and tokenize link next.
+            if (current !== "\"\"" && current !== "''") {
+                delete state._expectSrcSet;
+
+                // This is a link, so setup the state to process it next.
+                state._srcSetTokenizeState = "link";
+                state._linkTokenize = tokenizeSrcSetString;
+                state._linkBaseStyle = style;
+
+                // The attribute may or may not be quoted.
+                var quote = current[0];
+
+                state._linkQuoteCharacter = quote === "'" || quote === "\"" ? quote : null;
+
+                // Rewind the stream to the start of this token.
+                stream.pos = startPosition;
+
+                // Eat the open quote of the string so the string style
+                // will be used for the quote character.
+                if (state._linkQuoteCharacter)
+                    stream.eat(state._linkQuoteCharacter);
+            }
+        } else if (style) {
+            // We don't expect other tokens between attribute and string since
+            // spaces and the equal character are not tokenized. So if we get
+            // another token before a string then we stop expecting a link.
+            delete state._expectLink;
+            delete state._expectSrcSet;
+        }
+
+        return style && (style + " m-" + this.name);
+    }
+
+    function tokenizeCSSURLString(stream, state)
+    {
+        console.assert(state._urlQuoteCharacter);
+
+        // If we are an unquoted url string, return whitespace blocks as a whitespace token (null).
+        if (state._unquotedURLString && stream.eatSpace())
+            return null;
+
+        var ch = null;
+        var escaped = false;
+        var reachedEndOfURL = false;
+        var lastNonWhitespace = stream.pos;
+        var quote = state._urlQuoteCharacter;
+
+        // Parse characters until the end of the stream/line or a proper end quote character.
+        while ((ch = stream.next()) != null) {
+            if (ch === quote && !escaped) {
+                reachedEndOfURL = true;
+                break;
+            }
+            escaped = !escaped && ch === "\\";
+            if (!/[\s\u00a0]/.test(ch))
+                lastNonWhitespace = stream.pos;
+        }
+
+        // If we are an unquoted url string, do not include trailing whitespace, rewind to the last real character.
+        if (state._unquotedURLString)
+            stream.pos = lastNonWhitespace;
+
+        // If we have reached the proper the end of the url string, switch to the end tokenizer to reset the state.
+        if (reachedEndOfURL) {
+            if (!state._unquotedURLString)
+                stream.backUp(1);
+            this._urlTokenize = tokenizeEndOfCSSURLString;
+        }
+
+        return "link";
+    }
+
+    function tokenizeEndOfCSSURLString(stream, state)
+    {
+        console.assert(state._urlQuoteCharacter);
+        console.assert(state._urlBaseStyle);
+
+        // Eat the quote character to style it with the base style.
+        if (!state._unquotedURLString)
+            stream.eat(state._urlQuoteCharacter);
+
+        var style = state._urlBaseStyle;
+
+        delete state._urlTokenize;
+        delete state._urlQuoteCharacter;
+        delete state._urlBaseStyle;
+
+        return style;
+    }
+
+    function extendedCSSToken(stream, state)
+    {
+        var hexColorRegex = /#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{3,4})\b/g;
+
+        if (state._urlTokenize) {
+            // Call the link tokenizer instead.
+            var style = state._urlTokenize(stream, state);
+            return style && (style + " m-" + (this.alternateName || this.name));
+        }
+
+        // Remember the start position so we can rewind if needed.
+        var startPosition = stream.pos;
+        var style = this._token(stream, state);
+
+        if (style) {
+            if (style === "atom") {
+                if (stream.current() === "url") {
+                    // If the current text is "url" then we should expect the next string token to be a link.
+                    state._expectLink = true;
+                } else if (hexColorRegex.test(stream.current()))
+                    style = style + " hex-color";
+            } else if (state._expectLink) {
+                delete state._expectLink;
+
+                if (style === "string") {
+                    // This is a link, so setup the state to process it next.
+                    state._urlTokenize = tokenizeCSSURLString;
+                    state._urlBaseStyle = style;
+
+                    // The url may or may not be quoted.
+                    var quote = stream.current()[0];
+                    state._urlQuoteCharacter = quote === "'" || quote === "\"" ? quote : ")";
+                    state._unquotedURLString = state._urlQuoteCharacter === ")";
+
+                    // Rewind the stream to the start of this token.
+                    stream.pos = startPosition;
+
+                    // Eat the open quote of the string so the string style
+                    // will be used for the quote character.
+                    if (!state._unquotedURLString)
+                        stream.eat(state._urlQuoteCharacter);
+                }
+            }
+        }
+
+        return style && (style + " m-" + (this.alternateName || this.name));
+    }
+
+    function extendedToken(stream, state)
+    {
+        // CodeMirror moves the original token function to _token when we extended it.
+        // So call it to get the style that we will add an additional class name to.
+        var style = this._token(stream, state);
+        return style && (style + " m-" + (this.alternateName || this.name));
+    }
+
+    function extendedCSSRuleStartState(base)
+    {
+        // CodeMirror moves the original token function to _startState when we extended it.
+        // So call it to get the original start state that we will modify.
+        var state = this._startState(base);
+
+        // Start off the state stack like it has already parsed a rule. This causes everything
+        // after to be parsed as properties in a rule.
+        state.state = "block";
+        state.context.type = "block";
+
+        return state;
+    }
+
+    function scrollCursorIntoView(codeMirror, event)
+    {
+        // We don't want to use the default implementation since it can cause massive jumping
+        // when the editor is contained inside overflow elements.
+        event.preventDefault();
+
+        function delayedWork()
+        {
+            // Don't try to scroll unless the editor is focused.
+            if (!codeMirror.getWrapperElement().classList.contains("CodeMirror-focused"))
+                return;
+
+            // The cursor element can contain multiple cursors. The first one is the blinky cursor,
+            // which is the one we want to scroll into view. It can be missing, so check first.
+            var cursorElement = codeMirror.getScrollerElement().getElementsByClassName("CodeMirror-cursor")[0];
+            if (cursorElement)
+                cursorElement.scrollIntoViewIfNeeded(false);
+        }
+
+        // We need to delay this because CodeMirror can fire scrollCursorIntoView as a view is being blurred
+        // and another is being focused. The blurred editor still has the focused state when this event fires.
+        // We don't want to scroll the blurred editor into view, only the focused editor.
+        setTimeout(delayedWork, 0);
+    }
+
+    CodeMirror.extendMode("css", {token: extendedCSSToken});
+    CodeMirror.extendMode("xml", {token: extendedXMLToken});
+    CodeMirror.extendMode("javascript", {token: extendedToken});
+
+    CodeMirror.defineMode("css-rule", CodeMirror.modes.css);
+    CodeMirror.extendMode("css-rule", {token: extendedCSSToken, startState: extendedCSSRuleStartState, alternateName: "css"});
+
+    CodeMirror.defineInitHook(function(codeMirror) {
+        codeMirror.on("scrollCursorIntoView", scrollCursorIntoView);
+    });
+
+    CodeMirror.defineExtension("hasLineClass", function(line, where, className) {
+        // This matches the arguments to addLineClass and removeLineClass.
+        var classProperty = (where === "text" ? "textClass" : (where === "background" ? "bgClass" : "wrapClass"));
+        var lineInfo = this.lineInfo(line);
+        if (!lineInfo)
+            return false;
+
+        if (!lineInfo[classProperty])
+            return false;
+
+        // Test for the simple case.
+        if (lineInfo[classProperty] === className)
+            return true;
+
+        // Do a quick check for the substring. This is faster than a regex, which requires escaping the input first.
+        var index = lineInfo[classProperty].indexOf(className);
+        if (index === -1)
+            return false;
+
+        // Check that it is surrounded by spaces. Add padding spaces first to work with beginning and end of string cases.
+        var paddedClass = " " + lineInfo[classProperty] + " ";
+        return paddedClass.indexOf(" " + className + " ", index) !== -1;
+    });
+
+    CodeMirror.defineExtension("setUniqueBookmark", function(position, options) {
+        var marks = this.findMarksAt(position);
+        for (var i = 0; i < marks.length; ++i) {
+            if (marks[i].__uniqueBookmark) {
+                marks[i].clear();
+                break;
+            }
+        }
+
+        var uniqueBookmark = this.setBookmark(position, options);
+        uniqueBookmark.__uniqueBookmark = true;
+        return uniqueBookmark;
+    });
+
+    CodeMirror.defineExtension("toggleLineClass", function(line, where, className) {
+        if (this.hasLineClass(line, where, className)) {
+            this.removeLineClass(line, where, className);
+            return false;
+        }
+
+        this.addLineClass(line, where, className);
+        return true;
+    });
+
+    CodeMirror.defineExtension("alterNumberInRange", function(amount, startPosition, endPosition, updateSelection) {
+        // We don't try if the range is multiline, pass to another key handler.
+        if (startPosition.line !== endPosition.line)
+            return false;
+
+        if (updateSelection) {
+            // Remember the cursor position/selection.
+            var selectionStart = this.getCursor("start");
+            var selectionEnd = this.getCursor("end");
+        }
+
+        var line = this.getLine(startPosition.line);
+
+        var foundPeriod = false;
+
+        var start = NaN;
+        var end = NaN;
+
+        for (var i = startPosition.ch; i >= 0; --i) {
+            var character = line.charAt(i);
+
+            if (character === ".") {
+                if (foundPeriod)
+                    break;
+                foundPeriod = true;
+            } else if (character !== "-" && character !== "+" && isNaN(parseInt(character))) {
+                // Found the end already, just scan backwards.
+                if (i === startPosition.ch) {
+                    end = i;
+                    continue;
+                }
+
+                break;
+            }
+
+            start = i;
+        }
+
+        if (isNaN(end)) {
+            for (var i = startPosition.ch + 1; i < line.length; ++i) {
+                var character = line.charAt(i);
+
+                if (character === ".") {
+                    if (foundPeriod) {
+                        end = i;
+                        break;
+                    }
+
+                    foundPeriod = true;
+                } else if (isNaN(parseInt(character))) {
+                    end = i;
+                    break;
+                }
+
+                end = i + 1;
+            }
+        }
+
+        // No number range found, pass to another key handler.
+        if (isNaN(start) || isNaN(end))
+            return false;
+
+        var number = parseFloat(line.substring(start, end));
+
+        // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
+        // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
+        var alteredNumber = Number((number + amount).toFixed(6));
+        var alteredNumberString = alteredNumber.toString();
+
+        var from = {line: startPosition.line, ch: start};
+        var to = {line: startPosition.line, ch: end};
+
+        this.replaceRange(alteredNumberString, from, to);
+
+        if (updateSelection) {
+            var previousLength = to.ch - from.ch;
+            var newLength = alteredNumberString.length;
+
+            // Fix up the selection so it follows the increase or decrease in the replacement length.
+            // selectionStart/End may the same object if there is no selection. If that is the case
+            // make only one modification to prevent a double adjustment, and keep it a single object
+            // to avoid CodeMirror inadvertently creating an actual selection range.
+            let diff = (newLength - previousLength);
+            if (selectionStart === selectionEnd)
+                selectionStart.ch += diff;
+            else {
+                if (selectionStart.ch > from.ch)
+                    selectionStart.ch += diff;
+                if (selectionEnd.ch > from.ch)
+                    selectionEnd.ch += diff;
+            }
+
+            this.setSelection(selectionStart, selectionEnd);
+        }
+
+        return true;
+    });
+
+    function alterNumber(amount, codeMirror)
+    {
+        function findNumberToken(position)
+        {
+            // CodeMirror includes the unit in the number token, so searching for
+            // number tokens is the best way to get both the number and unit.
+            var token = codeMirror.getTokenAt(position);
+            if (token && token.type && /\bnumber\b/.test(token.type))
+                return token;
+            return null;
+        }
+
+        var position = codeMirror.getCursor("head");
+        var token = findNumberToken(position);
+
+        if (!token) {
+            // If the cursor is at the outside beginning of the token, the previous
+            // findNumberToken wont find it. So check the next column for a number too.
+            position.ch += 1;
+            token = findNumberToken(position);
+        }
+
+        if (!token)
+            return CodeMirror.Pass;
+
+        var foundNumber = codeMirror.alterNumberInRange(amount, {ch: token.start, line: position.line}, {ch: token.end, line: position.line}, true);
+        if (!foundNumber)
+            return CodeMirror.Pass;
+    }
+
+    CodeMirror.defineExtension("rectsForRange", function(range) {
+        var lineRects = [];
+
+        for (var line = range.start.line; line <= range.end.line; ++line) {
+            var lineContent = this.getLine(line);
+
+            var startChar = line === range.start.line ? range.start.ch : (lineContent.length - lineContent.trimLeft().length);
+            var endChar = line === range.end.line ? range.end.ch : lineContent.length;
+            var firstCharCoords = this.cursorCoords({ch: startChar, line});
+            var endCharCoords = this.cursorCoords({ch: endChar, line});
+
+            // Handle line wrapping.
+            if (firstCharCoords.bottom !== endCharCoords.bottom) {
+                var maxY = -Number.MAX_VALUE;
+                for (var ch = startChar; ch <= endChar; ++ch) {
+                    var coords = this.cursorCoords({ch, line});
+                    if (coords.bottom > maxY) {
+                        if (ch > startChar) {
+                            var maxX = Math.ceil(this.cursorCoords({ch: ch - 1, line}).right);
+                            lineRects.push(new WebInspector.Rect(minX, minY, maxX - minX, maxY - minY));
+                        }
+                        var minX = Math.floor(coords.left);
+                        var minY = Math.floor(coords.top);
+                        maxY = Math.ceil(coords.bottom);
+                    }
+                }
+                maxX = Math.ceil(coords.right);
+                lineRects.push(new WebInspector.Rect(minX, minY, maxX - minX, maxY - minY));
+            } else {
+                var minX = Math.floor(firstCharCoords.left);
+                var minY = Math.floor(firstCharCoords.top);
+                var maxX = Math.ceil(endCharCoords.right);
+                var maxY = Math.ceil(endCharCoords.bottom);
+                lineRects.push(new WebInspector.Rect(minX, minY, maxX - minX, maxY - minY));
+            }
+        }
+        return lineRects;
+    });
+
+    function ignoreKey(codeMirror)
+    {
+        // Do nothing to ignore the key.
+    }
+
+    CodeMirror.keyMap["default"] = {
+        "Alt-Up": alterNumber.bind(null, 1),
+        "Ctrl-Alt-Up": alterNumber.bind(null, 0.1),
+        "Shift-Alt-Up": alterNumber.bind(null, 10),
+        "Alt-PageUp": alterNumber.bind(null, 10),
+        "Shift-Alt-PageUp": alterNumber.bind(null, 100),
+        "Alt-Down": alterNumber.bind(null, -1),
+        "Ctrl-Alt-Down": alterNumber.bind(null, -0.1),
+        "Shift-Alt-Down": alterNumber.bind(null, -10),
+        "Alt-PageDown": alterNumber.bind(null, -10),
+        "Shift-Alt-PageDown": alterNumber.bind(null, -100),
+        "Cmd-/": "toggleComment",
+        "Shift-Tab": ignoreKey,
+        fallthrough: "macDefault"
+    };
+
+    // Register some extra MIME-types for CodeMirror. These are in addition to the
+    // ones CodeMirror already registers, like text/html, text/javascript, etc.
+    var extraXMLTypes = ["text/xml", "text/xsl"];
+    extraXMLTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, "xml");
+    });
+
+    var extraHTMLTypes = ["application/xhtml+xml", "image/svg+xml"];
+    extraHTMLTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, "htmlmixed");
+    });
+
+    var extraJavaScriptTypes = ["text/ecmascript", "application/javascript", "application/ecmascript", "application/x-javascript",
+        "text/x-javascript", "text/javascript1.1", "text/javascript1.2", "text/javascript1.3", "text/jscript", "text/livescript"];
+    extraJavaScriptTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, "javascript");
+    });
+
+    var extraJSONTypes = ["application/x-json", "text/x-json"];
+    extraJSONTypes.forEach(function(type) {
+        CodeMirror.defineMIME(type, {name: "javascript", json: true});
+    });
+
+})();
+
+WebInspector.compareCodeMirrorPositions = function(a, b)
+{
+    var lineCompare = a.line - b.line;
+    if (lineCompare !== 0)
+        return lineCompare;
+
+    var aColumn = "ch" in a ? a.ch : Number.MAX_VALUE;
+    var bColumn = "ch" in b ? b.ch : Number.MAX_VALUE;
+    return aColumn - bColumn;
+};
+
+WebInspector.walkTokens = function(cm, mode, initialPosition, callback)
+{
+    let state = CodeMirror.copyState(mode, cm.getTokenAt(initialPosition).state);
+    if (state.localState)
+        state = state.localState;
+
+    let lineCount = cm.lineCount();
+    let abort = false;
+    for (lineNumber = initialPosition.line; !abort && lineNumber < lineCount; ++lineNumber) {
+        let line = cm.getLine(lineNumber);
+        let stream = new CodeMirror.StringStream(line);
+        if (lineNumber === initialPosition.line)
+            stream.start = stream.pos = initialPosition.ch;
+
+        while (!stream.eol()) {
+            let innerMode = CodeMirror.innerMode(mode, state);
+            let tokenType = mode.token(stream, state);
+            if (!callback(tokenType, stream.current())) {
+                abort = true;
+                break;
+            }
+            stream.start = stream.pos;
+        }
+    }
+
+    if (!abort)
+        callback(null);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorEditor.js b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorEditor.js
new file mode 100644
index 000000000..40ba9c0f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorEditor.js
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CodeMirrorEditor = class CodeMirrorEditor
+{
+    static create(place, options)
+    {
+        if (options.lineSeparator === undefined)
+            options.lineSeparator = "\n";
+
+        let codeMirror = new CodeMirror(place, options);
+
+        // Set up default controllers that should be present for
+        // all CodeMirror editor instances.
+        new WebInspector.CodeMirrorTextKillController(codeMirror);
+
+        return codeMirror;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js
new file mode 100644
index 000000000..a3e48f77d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorFormatters.js
@@ -0,0 +1,538 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Tobias Reiss <tobi+webkit@basecode.de>
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// In the inspector token types have been modified to include extra mode information
+// after the actual token type. So we can't do token === "foo". So instead we do
+// /\bfoo\b/.test(token).
+
+CodeMirror.extendMode("javascript", {
+    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === "(") // Most keywords like "if (" but not "function(" or "typeof(".
+                return lastToken && /\bkeyword\b/.test(lastToken) && (lastContent !== "function" && lastContent !== "typeof" && lastContent !== "instanceof");
+            if (content === ":") // Ternary.
+                return (state.lexical.type === "stat" || state.lexical.type === ")" || state.lexical.type === "]");
+            return false;
+        }
+
+        if (isComment)
+            return true;
+
+        if (/\boperator\b/.test(token)) {
+            if (!lastToken && (content === "+" || content === "-" || content === "~") && (lastContent !== ")" && lastContent !== "]")) // Possible Unary +/-.
+                return false;
+            if (content === "!") // Unary ! should not be confused with "!=".
+                return false;
+            return "+-/*%&&||!===+=-=>=<=?".indexOf(content) >= 0; // Operators.
+        }
+
+        if (/\bkeyword\b/.test(token)) { // Most keywords require spaces before them, unless a '}' can come before it.
+            if (content === "else" || content === "catch" || content === "finally")
+                return lastContent === "}";
+            return false;
+        }
+
+        return false;
+    },
+
+    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (lastToken && /\bkeyword\b/.test(lastToken)) {  // Most keywords require spaces after them, unless a '{' or ';' can come after it.
+            if (lastContent === "else")
+                return true;
+            if (lastContent === "catch")
+                return true;
+            if (lastContent === "return")
+                return content !== ";";
+            if (lastContent === "throw")
+                return true;
+            if (lastContent === "try")
+                return true;
+            if (lastContent === "finally")
+                return true;
+            if (lastContent === "do")
+                return true;
+            return false;
+        }
+
+        if (lastToken && /\bcomment\b/.test(lastToken)) // Embedded /* comment */.
+            return true;
+        if (lastContent === ")") // "){".
+            return content === "{";
+        if (lastContent === ";") // In for loop.
+            return state.lexical.type === ")";
+        if (lastContent === "!") // Unary ! should not be confused with "!=".
+            return false;
+
+        // If this unary operator did not have a leading expression it is probably unary.
+        if ((lastContent === "+" || lastContent === "-" || lastContent === "~") && !state._jsPrettyPrint.unaryOperatorHadLeadingExpr)
+            return false;
+
+        return ",+-/*%&&||:!===+=-=>=<=?".indexOf(lastContent) >= 0; // Operators.
+    },
+
+    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === ",") // In object literals, like in {a:1,b:2}, but not in param lists or vardef lists.
+                return state.lexical.type === "}" ? 1 : 0;
+            if (content === ";") // Everywhere except in for loop conditions.
+                return state.lexical.type !== ")" ? 1 : 0;
+            if (content === ":" && state.lexical.type === "}" && state.lexical.prev && state.lexical.prev.type === "form") // Switch case/default.
+                return 1;
+            return content.length === 1 && "{}".indexOf(content) >= 0 ? 1 : 0; // After braces.
+        }
+
+        if (isComment)
+            return 1;
+
+        return 0;
+    },
+
+    removeLastWhitespace: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return false;
+    },
+
+    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
+    {
+        if (!token) {
+            if (content === "}") // "{}".
+                return lastContent === "{";
+            if (content === ";") // "x = {};" or ";;".
+                return "};".indexOf(lastContent) >= 0;
+            if (content === ":") // Ternary.
+                return lastContent === "}" && (state.lexical.type === "stat" || state.lexical.type === ")" || state.lexical.type === "]");
+            if (",().".indexOf(content) >= 0) // "})", "}.bind", "function() { ... }()", or "}, false)".
+                return lastContent === "}";
+            return false;
+        }
+
+        if (isComment) { // Comment after semicolon.
+            if (!firstTokenOnLine && lastContent === ";")
+                return true;
+            return false;
+        }
+
+        if (/\bkeyword\b/.test(token)) {
+            if (content === "else" || content === "catch" || content === "finally") // "} else", "} catch", "} finally"
+                return lastContent === "}";
+            return false;
+        }
+
+        return false;
+    },
+
+    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (content === "{")
+            return true;
+
+        if (content === "case" || content === "default")
+            return state.lexical.type === "}" && state.lexical.prev && state.lexical.prev.type === "form"; // Switch case/default.
+
+        return false;
+    },
+
+    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            return true;
+
+        return content === "}" && lastContent !== "{"; // "{}"
+    },
+
+    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            return true;
+
+        return false;
+    },
+
+    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        var dedent = 0;
+
+        if (state._jsPrettyPrint.shouldDedent)
+            dedent += state._jsPrettyPrint.dedentSize;
+
+        if (!token && content === "}")
+            dedent += 1;
+        else if (token && /\bkeyword\b/.test(token) && (content === "case" || content === "default"))
+            dedent += 1;
+
+        return dedent;
+    },
+
+    modifyStateForTokenPre: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!state._jsPrettyPrint) {
+            state._jsPrettyPrint = {
+                indentCount: 0,       // How far have we indented because of single statement blocks.
+                shouldIndent: false,  // Signal we should indent on entering a single statement block.
+                shouldDedent: false,  // Signal we should dedent on leaving a single statement block.
+                dedentSize: 0,        // How far we should dedent when leaving a single statement block.
+                lastIfIndentCount: 0, // Keep track of the indent the last time we saw an if without braces.
+                openBraceStartMarkers: [],  // Keep track of non-single statement blocks.
+                openBraceTrackingCount: -1, // Keep track of "{" and "}" in non-single statement blocks.
+                unaryOperatorHadLeadingExpr: false, // Try to detect if a unary operator had a leading expression and therefore may be binary.
+            };
+        }
+
+        // - Entering:
+        //   - Preconditions:
+        //     - last lexical was a "form" we haven't encountered before
+        //     - last content was ")", "else", or "do"
+        //     - current lexical is not ")" (in an expression or condition)
+        //   - Cases:
+        //     1. "{"
+        //       - indent +0
+        //       - save this indent size so when we encounter the "}" we know how far to dedent
+        //     2. "else if"
+        //       - indent +0 and do not signal to add a newline and indent
+        //       - mark the last if location so when we encounter an "else" we know how far to dedent
+        //       - mark the lexical state so we know we are inside a single statement block
+        //     3. Token without brace.
+        //       - indent +1 and signal to add a newline and indent
+        //       - mark the last if location so when we encounter an "else" we know how far to dedent
+        //       - mark the lexical state so we know we are inside a single statement block
+        if (!isComment && state.lexical.prev && state.lexical.prev.type === "form" && !state.lexical.prev._jsPrettyPrintMarker && (lastContent === ")" || lastContent === "else" || lastContent === "do") && (state.lexical.type !== ")")) {
+            if (content === "{") {
+                // Save the state at the opening brace so we can return to it when we see "}".
+                var savedState = {indentCount: state._jsPrettyPrint.indentCount, openBraceTrackingCount: state._jsPrettyPrint.openBraceTrackingCount};
+                state._jsPrettyPrint.openBraceStartMarkers.push(savedState);
+                state._jsPrettyPrint.openBraceTrackingCount = 1;
+            } else if (state.lexical.type !== "}") {
+                // Increase the indent count. Signal for a newline and indent if needed.
+                if (!(lastContent === "else" && content === "if")) {
+                    state._jsPrettyPrint.indentCount++;
+                    state._jsPrettyPrint.shouldIndent = true;
+                }
+                state.lexical.prev._jsPrettyPrintMarker = true;
+                if (state._jsPrettyPrint.enteringIf)
+                    state._jsPrettyPrint.lastIfIndentCount = state._jsPrettyPrint.indentCount - 1;
+            }
+        }
+
+        // - Leaving:
+        //   - Preconditions:
+        //     - we must be indented
+        //     - ignore ";", wait for the next token instead.
+        //   - Cases:
+        //     1. "else"
+        //       - dedent to the last "if"
+        //     2. "}" and all braces we saw are balanced
+        //       - dedent to the last "{"
+        //     3. Token without a marker on the stack
+        //       - dedent all the way
+        else if (state._jsPrettyPrint.indentCount) {
+            console.assert(!state._jsPrettyPrint.shouldDedent);
+            console.assert(!state._jsPrettyPrint.dedentSize);
+
+            // Track "{" and "}" to know when the "}" is really closing a block.
+            if (!isComment) {
+                if (content === "{")
+                    state._jsPrettyPrint.openBraceTrackingCount++;
+                else if (content === "}")
+                    state._jsPrettyPrint.openBraceTrackingCount--;
+            }
+
+            if (content === ";") {
+                // Ignore.
+            } else if (content === "else") {
+                // Dedent to the last "if".
+                if (lastContent !== "}") {
+                    state._jsPrettyPrint.shouldDedent = true;
+                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - state._jsPrettyPrint.lastIfIndentCount;
+                    state._jsPrettyPrint.lastIfIndentCount = 0;
+                }
+            } else if (content === "}" && !state._jsPrettyPrint.openBraceTrackingCount && state._jsPrettyPrint.openBraceStartMarkers.length) {
+                // Dedent to the last "{".
+                var savedState = state._jsPrettyPrint.openBraceStartMarkers.pop();
+                state._jsPrettyPrint.shouldDedent = true;
+                state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount - savedState.indentCount;
+                state._jsPrettyPrint.openBraceTrackingCount = savedState.openBraceTrackingCount;
+            } else {
+                // Dedent all the way.
+                var shouldDedent = true;
+                var lexical = state.lexical.prev;
+                while (lexical) {
+                    if (lexical._jsPrettyPrintMarker) {
+                        shouldDedent = false;
+                        break;
+                    }
+                    lexical = lexical.prev;
+                }
+                if (shouldDedent) {
+                    state._jsPrettyPrint.shouldDedent = true;
+                    state._jsPrettyPrint.dedentSize = state._jsPrettyPrint.indentCount;
+                }
+            }
+        }
+
+        // Signal for when we will be entering an if.
+        if (token && state.lexical.type === "form" && state.lexical.prev && state.lexical.prev !== "form" && /\bkeyword\b/.test(token))
+            state._jsPrettyPrint.enteringIf = (content === "if");
+    },
+
+    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (state._jsPrettyPrint.shouldIndent)
+            state._jsPrettyPrint.shouldIndent = false;
+
+        if (state._jsPrettyPrint.shouldDedent) {
+            state._jsPrettyPrint.indentCount -= state._jsPrettyPrint.dedentSize;
+            state._jsPrettyPrint.dedentSize = 0;
+            state._jsPrettyPrint.shouldDedent = false;
+        }
+
+        if ((content === "+" || content === "-" || content === "~") && (lastContent === ")" || lastContent === "]" || /\b(?:variable|number)\b/.test(lastToken)))
+            state._jsPrettyPrint.unaryOperatorHadLeadingExpr = true;
+        else
+            state._jsPrettyPrint.unaryOperatorHadLeadingExpr = false;
+    }
+});
+
+CodeMirror.extendMode("css", {
+    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === "{")
+                return true;
+            return ">+~-*/".indexOf(content) >= 0; // calc() expression or child/sibling selectors
+        }
+
+        if (isComment)
+            return true;
+
+        if (/\bkeyword\b/.test(token)) {
+            if (content.charAt(0) === "!") // "!important".
+                return true;
+            return false;
+        }
+
+        return false;
+    },
+
+    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!lastToken) {
+            if (lastContent === ",")
+                return true;
+            if (lastContent === ":") // Space in "prop: value" but not in a selectors "a:link" or "div::after" or media queries "(max-device-width:480px)".
+                return state.state === "prop";
+            if (lastContent === ")" && (content !== ")" && content !== ",")) {
+                if (/\bnumber\b/.test(token)) // linear-gradient(rgb(...)0%,rgb(...)100%)
+                    return true;
+                if (state.state === "prop") // -webkit-transform:rotate(...)translate(...);
+                    return true;
+                if (state.state === "media" || state.state === "atBlock_parens") // Space in "not(foo)and" but not at the end of "not(not(foo))"
+                    return true;
+                return false; // color: rgb(...);
+            }
+            return ">+~-*/".indexOf(lastContent) >= 0; // calc() expression or child/sibling selectors
+        }
+
+        if (/\bcomment\b/.test(lastToken))
+            return true;
+
+        if (/\bkeyword\b/.test(lastToken)) // media-query keywords
+            return state.state === "media" || (state.state === "atBlock_parens" && content !== ")");
+
+        return false;
+    },
+
+    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!token) {
+            if (content === ";")
+                return 1;
+            if (content === ",") { // "a,b,c,...,z{}" rule list at top level or in @media top level and only if the line length will be large.
+                if ((state.state === "top" || state.state === "media") && state._cssPrettyPrint.lineLength > 60) {
+                    state._cssPrettyPrint.lineLength = 0;
+                    return 1;
+                }
+                return 0;
+            }
+            if (content === "{")
+                return 1;
+            if (content === "}") // 2 newlines between rule declarations.
+                return 2;
+            return 0;
+        }
+
+        if (isComment)
+            return 1;
+
+        return 0;
+    },
+
+    removeLastWhitespace: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return false;
+    },
+
+    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
+    {
+        if (isComment) { // Comment after semicolon.
+            if (!firstTokenOnLine && lastContent === ";")
+                return true;
+            return false;
+        }
+
+        return content === "}" && (lastContent === "{" || lastContent === "}"); // "{}" and "}\n}" when closing @media.
+    },
+
+    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "{";
+    },
+
+    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "}" && (lastContent !== "{" && lastContent !== "}"); // "{}" and "}\n}" when closing @media.
+    },
+
+    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return false;
+    },
+
+    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return content === "}" ? 1 : 0;
+    },
+
+    modifyStateForTokenPost: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        if (!state._cssPrettyPrint)
+            state._cssPrettyPrint = {lineLength: 0};
+
+        // In order insert newlines in selector lists we need keep track of the length of the current line.
+        // This isn't exact line length, only the builder knows that, but it is good enough to get an idea.
+        // If we are at a top level, keep track of the current line length, otherwise we reset to 0.
+        if (!isComment && (state.state === "top" || state.state === "media" || state.state === "pseudo"))
+            state._cssPrettyPrint.lineLength += content.length;
+        else
+            state._cssPrettyPrint.lineLength = 0;
+    }
+});
+
+CodeMirror.extendMode("css-rule", {
+    shouldHaveSpaceBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        // Add whitespace before ":_value"
+        if (lastContent === ":" && !lastToken)
+            return true;
+
+        // Add whitespace between "1px_solid_green"
+        var tokenRegExp = /\b(?:keyword|atom|number)\b/;
+        if (tokenRegExp.test(lastToken) && tokenRegExp.test(token))
+            return true;
+
+        return false;
+    },
+
+    shouldHaveSpaceAfterLastToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return lastContent === "," && !lastToken;
+    },
+
+    newlinesAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return 0;
+    },
+
+    removeLastWhitespace: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        // Remove whitespace before a comment which moves the comment to the beginning of the line.
+        if (isComment)
+            return true;
+
+        // A semicolon indicates the end of line. So remove whitespace before next line.
+        if (!lastToken)
+            return lastContent === ";";
+
+        // Remove whitespace before semicolon. Like `prop: value ;`.
+        // Remove whitespace before colon. Like `prop : value;`.
+        if (!token)
+            return content === ";" || content === ":";
+
+        // A comment is supposed to be in its own line. So remove whitespace before next line.
+        if (/\bcomment\b/.test(lastToken))
+            return true;
+
+        return false;
+    },
+
+    removeLastNewline: function(lastToken, lastContent, token, state, content, isComment, firstTokenOnLine)
+    {
+        // Each property should be formatted to one line each with no extra newlines.
+        return true;
+    },
+
+    indentAfterToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return false;
+    },
+
+    newlineBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        // Add new line before comments.
+        if (isComment)
+            return true;
+
+        // Add new line before a prefixed property like `-webkit-animation`.
+        if (state.state === "block")
+            return /\bmeta\b/.test(token);
+
+        // Add new line after comment
+        if (/\bcomment\b/.test(lastToken))
+            return true;
+
+        // Add new line before a regular property like `display`.
+        if (/\bproperty\b/.test(token))
+            return !(/\bmeta\b/.test(lastToken));
+
+        // Add new line before a CSS variable like `--foo`.
+        if (state.state === "maybeprop" && /\bvariable-2\b/.test(token))
+            return true;
+
+        return false;
+    },
+
+    indentBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return false;
+    },
+
+    dedentsBeforeToken: function(lastToken, lastContent, token, state, content, isComment)
+    {
+        return 0;
+    }
+});
diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
new file mode 100644
index 000000000..d05ed35a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorOverrides.css
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.CodeMirror {
+    z-index: 0;
+}
+
+.CodeMirror,
+.CodeMirror * {
+    box-sizing: content-box;
+}
+
+.CodeMirror .CodeMirror-lines {
+ /* One pixel bottom padding needed to show the bottom border for matching brackets and search matches. */
+    padding: 0 0 1px 0;
+}
+
+.CodeMirror pre {
+    padding: 0 3px 0 7px;
+}
+
+.CodeMirror .CodeMirror-selected {
+    background-color: hsl(0, 0%, 83%);
+}
+
+.CodeMirror.CodeMirror-focused .CodeMirror-selected {
+    background-color: highlight;
+}
+
+.CodeMirror .CodeMirror-cursor {
+    pointer-events: none;
+}
+
+.CodeMirror .CodeMirror-lines .CodeMirror-matchingbracket {
+    color: inherit;
+    background-color: hsla(226, 77%, 65%, 0.2);
+    border-bottom: 1px dotted hsl(240, 84%, 50%);
+}
+
+.CodeMirror .CodeMirror-lines .CodeMirror-nonmatchingbracket {
+    color: inherit;
+    background-color: hsla(2, 84%, 50%, 0.2);
+    border-bottom: 1px dotted hsl(2, 84%, 50%);
+}
+
+.CodeMirror .CodeMirror-gutters {
+    background-color: hsl(0, 0%, 96%);
+    border-right: 1px solid hsl(0, 0%, 90%);
+}
+
+.CodeMirror .CodeMirror-linenumber {
+    padding: 0 2px;
+    min-width: 22px;
+
+    color: hsl(0, 0%, 57%);
+
+    font: 8px/13px -apple-system-monospaced-numbers, Menlo, Monaco, monospace;
+    text-align: right;
+}
+
+.CodeMirror-linewidget {
+    -webkit-user-select: text;
+}
+
+.CodeMirror .CodeMirror-placeholder {
+    font-family: -apple-system, sans-serif;
+    color: hsl(0, 0%, 65%);
+    text-indent: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js
new file mode 100644
index 000000000..c31c866e4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CodeMirrorTextMarkers.js
@@ -0,0 +1,197 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+function createCodeMirrorTextMarkers(type, pattern, matchFunction, codeMirror, range, callback)
+{
+    var createdMarkers = [];
+    var start = range instanceof WebInspector.TextRange ? range.startLine : 0;
+    var end = range instanceof WebInspector.TextRange ? range.endLine + 1 : codeMirror.lineCount();
+    for (var lineNumber = start; lineNumber < end; ++lineNumber) {
+        var lineContent = codeMirror.getLine(lineNumber);
+        var match = pattern.exec(lineContent);
+        while (match) {
+            if (typeof matchFunction === "function" && !matchFunction(lineContent, match)) {
+                match = pattern.exec(lineContent);
+                continue;
+            }
+
+            var from = {line: lineNumber, ch: match.index};
+            var to = {line: lineNumber, ch: match.index + match[0].length};
+
+            var foundMarker = false;
+            var markers = codeMirror.findMarksAt(to);
+            for (var j = 0; j < markers.length; ++j) {
+                if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(markers[j]).type === WebInspector.TextMarker.Type[type]) {
+                    foundMarker = true;
+                    break;
+                }
+            }
+
+            if (foundMarker) {
+                match = pattern.exec(lineContent);
+                continue;
+            }
+
+            // We're not interested if the value is not inside a keyword.
+            var tokenType = codeMirror.getTokenTypeAt(from);
+            if (tokenType && !tokenType.includes("keyword")) {
+                match = pattern.exec(lineContent);
+                continue;
+            }
+
+            var valueString = match[0];
+            var value = WebInspector[type].fromString(valueString);
+            if (!value) {
+                match = pattern.exec(lineContent);
+                continue;
+            }
+
+            var marker = codeMirror.markText(from, to);
+            marker = new WebInspector.TextMarker(marker, WebInspector.TextMarker.Type[type]);
+            createdMarkers.push(marker);
+
+            if (typeof callback === "function")
+                callback(marker, value, valueString);
+
+            match = pattern.exec(lineContent);
+        }
+    }
+
+    return createdMarkers;
+}
+
+function createCodeMirrorColorTextMarkers(codeMirror, range, callback)
+{
+    // Matches rgba(0, 0, 0, 0.5), rgb(0, 0, 0), hsl(), hsla(), #fff, #ffff, #ffffff, #ffffffff, white
+    let colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b\w+\b(?![-.]))/g;
+    function matchFunction(lineContent, match) {
+        if (!lineContent || !lineContent.length)
+            return false;
+
+        // In order determine if the matched color is inside a gradient, first
+        // look before the text to find the first unmatched open parenthesis.
+        // This parenthesis, if it exists, will be immediately after the CSS
+        // funciton whose name can be checked to see if it matches a gradient.
+        let openParenthesis = 0;
+        let index = match.index;
+        let c = null;
+        while (c = lineContent[index]) {
+            if (c === "(")
+                ++openParenthesis;
+            if (c === ")")
+                --openParenthesis;
+
+            if (openParenthesis > 0)
+                break;
+
+            --index;
+            if (index < 0)
+                break;
+        }
+
+        if (/(repeating-)?(linear|radial)-gradient$/.test(lineContent.substring(0, index)))
+            return false;
+
+        // Act as a negative look-behind and disallow the color from being prefixing with certain characters.
+        return !(match.index > 0 && /[-.\"\']/.test(lineContent[match.index - 1]));
+    }
+
+    return createCodeMirrorTextMarkers("Color", colorRegex, matchFunction, codeMirror, range, callback);
+}
+
+function createCodeMirrorGradientTextMarkers(codeMirror, range, callback)
+{
+    var createdMarkers = [];
+
+    var start = range instanceof WebInspector.TextRange ? range.startLine : 0;
+    var end = range instanceof WebInspector.TextRange ? range.endLine + 1 : codeMirror.lineCount();
+
+    var gradientRegex = /(repeating-)?(linear|radial)-gradient\s*\(\s*/g;
+
+    for (var lineNumber = start; lineNumber < end; ++lineNumber) {
+        var lineContent = codeMirror.getLine(lineNumber);
+        var match = gradientRegex.exec(lineContent);
+        while (match) {
+            var startLine = lineNumber;
+            var startChar = match.index;
+            var endChar = match.index + match[0].length;
+
+            var openParentheses = 0;
+            var c = null;
+            while (c = lineContent[endChar]) {
+                if (c === "(")
+                    openParentheses++;
+                if (c === ")")
+                    openParentheses--;
+
+                if (openParentheses === -1) {
+                    endChar++;
+                    break;
+                }
+
+                endChar++;
+                if (endChar >= lineContent.length) {
+                    lineNumber++;
+                    endChar = 0;
+                    lineContent = codeMirror.getLine(lineNumber);
+                    if (!lineContent)
+                        break;
+                }
+            }
+
+            if (openParentheses !== -1) {
+                match = gradientRegex.exec(lineContent);
+                continue;
+            }
+
+            var from = {line: startLine, ch: startChar};
+            var to = {line: lineNumber, ch: endChar};
+
+            var gradientString = codeMirror.getRange(from, to);
+            var gradient = WebInspector.Gradient.fromString(gradientString);
+            if (!gradient) {
+                match = gradientRegex.exec(lineContent);
+                continue;
+            }
+
+            var marker = new WebInspector.TextMarker(codeMirror.markText(from, to), WebInspector.TextMarker.Type.Gradient);
+
+            createdMarkers.push(marker);
+
+            if (typeof callback === "function")
+                callback(marker, gradient, gradientString);
+
+            match = gradientRegex.exec(lineContent);
+        }
+    }
+
+    return createdMarkers;
+}
+
+function createCodeMirrorCubicBezierTextMarkers(codeMirror, range, callback)
+{
+    var cubicBezierRegex = /(cubic-bezier\([^)]+\)|\b\w+\b(?:-\b\w+\b){0,2})/g;
+    return createCodeMirrorTextMarkers("CubicBezier", cubicBezierRegex, null, codeMirror, range, callback);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
new file mode 100644
index 000000000..2eb19e467
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.color-picker {
+    position: relative;
+    width: 256px;
+    height: 210px;
+    padding: 5px;
+}
+
+.color-picker > * {
+    position: absolute;
+}
+
+.color-picker > .slider {
+    top: 7px;
+    width: 196px;
+    transform: rotate(-90deg) translateX(-100%);
+    transform-origin: 0 0;
+}
+
+.color-picker > .slider > img {
+    left: -4px;
+    top: 0;
+}
+
+.color-picker > .brightness {
+    left: 215px;
+}
+
+.color-picker > .opacity {
+    left: 238px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
new file mode 100644
index 000000000..07a335e83
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
@@ -0,0 +1,155 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ColorPicker = class ColorPicker extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._colorWheel = new WebInspector.ColorWheel;
+        this._colorWheel.delegate = this;
+        this._colorWheel.dimension = 200;
+
+        this._brightnessSlider = new WebInspector.Slider;
+        this._brightnessSlider.delegate = this;
+        this._brightnessSlider.element.classList.add("brightness");
+
+        this._opacitySlider = new WebInspector.Slider;
+        this._opacitySlider.delegate = this;
+        this._opacitySlider.element.classList.add("opacity");
+
+        this._element = document.createElement("div");
+        this._element.className = "color-picker";
+
+        this._element.appendChild(this._colorWheel.element);
+        this._element.appendChild(this._brightnessSlider.element);
+        this._element.appendChild(this._opacitySlider.element);
+
+        this._opacity = 0;
+        this._opacityPattern = "url(Images/Checkers.svg)";
+
+        this._color = "white";
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    set brightness(brightness)
+    {
+        if (brightness === this._brightness)
+            return;
+
+        this._colorWheel.brightness = brightness;
+
+        this._updateColor();
+        this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
+    }
+
+    set opacity(opacity)
+    {
+        if (opacity === this._opacity)
+            return;
+
+        this._opacity = opacity;
+        this._updateColor();
+    }
+
+    get colorWheel()
+    {
+        return this._colorWheel;
+    }
+
+    get color()
+    {
+        return this._color;
+    }
+
+    set color(color)
+    {
+        this._dontUpdateColor = true;
+
+        this._colorFormat = color.format;
+
+        this._colorWheel.tintedColor = color;
+        this._brightnessSlider.value = this._colorWheel.brightness;
+
+        this._opacitySlider.value = color.alpha;
+        this._updateSliders(this._colorWheel.rawColor, color);
+
+        delete this._dontUpdateColor;
+    }
+
+    colorWheelColorDidChange(colorWheel)
+    {
+        this._updateColor();
+        this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
+    }
+
+    sliderValueDidChange(slider, value)
+    {
+        if (slider === this._opacitySlider)
+            this.opacity = value;
+        else if (slider === this._brightnessSlider)
+            this.brightness = value;
+    }
+
+    // Private
+
+    _updateColor()
+    {
+        if (this._dontUpdateColor)
+            return;
+
+        var opacity = Math.round(this._opacity * 100) / 100;
+
+        var components;
+        if (this._colorFormat === WebInspector.Color.Format.HSL || this._colorFormat === WebInspector.Color.Format.HSLA)
+            components = this._colorWheel.tintedColor.hsl.concat(opacity);
+        else
+            components = this._colorWheel.tintedColor.rgb.concat(opacity);
+
+        this._color = new WebInspector.Color(this._colorFormat, components);
+        this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
+    }
+
+    _updateSliders(rawColor, tintedColor)
+    {
+        var rgb = this._colorWheel.tintedColor.rgb;
+        var opaque = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgb.concat(1)).toString();
+        var transparent = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgb.concat(0)).toString();
+
+        this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern;
+        this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
+    }
+};
+
+WebInspector.ColorPicker.Event = {
+    ColorChanged: "css-color-picker-color-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css
new file mode 100644
index 000000000..541663d0b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.color-wheel {
+    position: relative;
+}
+
+.color-wheel > .crosshair {
+    position: absolute;
+    top: -4px;
+    left: -3px;
+    width: 5px;
+    height: 5px;
+    border: 1px solid black;
+    border-radius: 3px;
+    pointer-events: none;
+    background-color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
new file mode 100644
index 000000000..90f9070f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js
@@ -0,0 +1,283 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ColorWheel = class ColorWheel extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._rawCanvas = document.createElement("canvas");
+        this._tintedCanvas = document.createElement("canvas");
+        this._finalCanvas = document.createElement("canvas");
+
+        this._crosshair = document.createElement("div");
+        this._crosshair.className = "crosshair";
+
+        this._element = document.createElement("div");
+        this._element.className = "color-wheel";
+
+        this._element.appendChild(this._finalCanvas);
+        this._element.appendChild(this._crosshair);
+
+        this._finalCanvas.addEventListener("mousedown", this);
+    }
+
+    // Public
+
+    set dimension(dimension)
+    {
+        this._finalCanvas.width = this._tintedCanvas.width = this._rawCanvas.width = dimension * window.devicePixelRatio;
+        this._finalCanvas.height = this._tintedCanvas.height = this._rawCanvas.height = dimension * window.devicePixelRatio;
+
+        this._finalCanvas.style.width = this._finalCanvas.style.height = dimension + "px";
+
+        this._dimension = dimension;
+        // We shrink the radius a bit for better anti-aliasing.
+        this._radius = dimension / 2 - 2;
+
+        this._setCrosshairPosition(new WebInspector.Point(dimension / 2, dimension / 2));
+
+        this._drawRawCanvas();
+        this._draw();
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get brightness()
+    {
+        return this._brightness;
+    }
+
+    set brightness(brightness)
+    {
+        this._brightness = brightness;
+        this._draw();
+    }
+
+    get tintedColor()
+    {
+        if (this._crosshairPosition)
+            return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, this._brightness);
+
+        return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
+    }
+
+    set tintedColor(tintedColor)
+    {
+        var data = this._tintedColorToPointAndBrightness(tintedColor);
+        this._setCrosshairPosition(data.point);
+        this.brightness = data.brightness;
+    }
+
+    get rawColor()
+    {
+        if (this._crosshairPosition)
+            return this._colorAtPointWithBrightness(this._crosshairPosition.x * window.devicePixelRatio, this._crosshairPosition.y * window.devicePixelRatio, 1);
+
+        return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+            this._handleMousedown(event);
+            break;
+        case "mousemove":
+            this._handleMousemove(event);
+            break;
+        case "mouseup":
+            this._handleMouseup(event);
+            break;
+        }
+    }
+
+    // Private
+
+    _handleMousedown(event)
+    {
+        window.addEventListener("mousemove", this, true);
+        window.addEventListener("mouseup", this, true);
+
+        this._updateColorForMouseEvent(event);
+    }
+
+    _handleMousemove(event)
+    {
+        this._updateColorForMouseEvent(event);
+    }
+
+    _handleMouseup(event)
+    {
+        window.removeEventListener("mousemove", this, true);
+        window.removeEventListener("mouseup", this, true);
+    }
+
+    _pointInCircleForEvent(event)
+    {
+        function distance(a, b)
+        {
+            return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));
+        }
+
+        function angleFromCenterToPoint(center, point)
+        {
+            return Math.atan2(point.y - center.y, point.x - center.x);
+        }
+
+        function pointOnCircumference(c, r, a)
+        {
+            return new WebInspector.Point(c.x + r * Math.cos(a), c.y + r * Math.sin(a));
+        }
+
+        var dimension = this._dimension;
+        var point = window.webkitConvertPointFromPageToNode(this._finalCanvas, new WebKitPoint(event.pageX, event.pageY));
+        var center = new WebInspector.Point(dimension / 2, dimension / 2);
+        if (distance(point, center) > this._radius) {
+            var angle = angleFromCenterToPoint(center, point);
+            point = pointOnCircumference(center, this._radius, angle);
+        }
+        return point;
+    }
+
+    _updateColorForMouseEvent(event)
+    {
+        var point = this._pointInCircleForEvent(event);
+
+        this._setCrosshairPosition(point);
+
+        if (this.delegate && typeof this.delegate.colorWheelColorDidChange === "function")
+            this.delegate.colorWheelColorDidChange(this);
+    }
+
+    _setCrosshairPosition(point)
+    {
+        this._crosshairPosition = point;
+        this._crosshair.style.webkitTransform = "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)";
+    }
+
+    _tintedColorToPointAndBrightness(color)
+    {
+        var rgb = color.rgb;
+        var hsv = WebInspector.Color.rgb2hsv(rgb[0], rgb[1], rgb[2]);
+        var cosHue = Math.cos(hsv[0] * Math.PI / 180);
+        var sinHue = Math.sin(hsv[0] * Math.PI / 180);
+        var center = this._dimension / 2;
+        var x = center + (center * cosHue * hsv[1]);
+        var y = center - (center * sinHue * hsv[1]);
+        return {
+            point: new WebInspector.Point(x, y),
+            brightness: hsv[2]
+        };
+    }
+
+    _drawRawCanvas() {
+        var ctx = this._rawCanvas.getContext("2d");
+
+        var dimension = this._dimension * window.devicePixelRatio;
+        var center = dimension / 2;
+
+        ctx.fillStyle = "white";
+        ctx.fillRect(0, 0, dimension, dimension);
+
+        var imageData = ctx.getImageData(0, 0, dimension, dimension);
+        var data = imageData.data;
+        for (var j = 0; j < dimension; ++j) {
+            for (var i = 0; i < dimension; ++i) {
+                var color = this._colorAtPointWithBrightness(i, j, 1);
+                if (!color)
+                    continue;
+                var pos = (j * dimension + i) * 4;
+                data[pos] = color.rgb[0];
+                data[pos + 1] = color.rgb[1];
+                data[pos + 2] = color.rgb[2];
+            }
+        }
+        ctx.putImageData(imageData, 0, 0);
+    }
+
+    _colorAtPointWithBrightness(x, y, brightness)
+    {
+        var center = this._dimension / 2 * window.devicePixelRatio;
+        var xDis = x - center;
+        var yDis = y - center;
+        var distance = Math.sqrt(xDis * xDis + yDis * yDis);
+
+        if (distance - center > 0.001)
+            return new WebInspector.Color(WebInspector.Color.Format.RGBA, [0, 0, 0, 0]);
+
+        var h = Math.atan2(y - center, center - x) * 180 / Math.PI;
+        h = (h + 180) % 360;
+        var v = brightness;
+        var s = Math.max(0, distance) / center;
+
+        var rgb = WebInspector.Color.hsv2rgb(h, s, v);
+        return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
+            Math.round(rgb[0] * 255),
+            Math.round(rgb[1] * 255),
+            Math.round(rgb[2] * 255),
+            1
+        ]);
+    }
+
+    _drawTintedCanvas()
+    {
+        var ctx = this._tintedCanvas.getContext("2d");
+        var dimension = this._dimension * window.devicePixelRatio;
+
+        ctx.save();
+        ctx.drawImage(this._rawCanvas, 0, 0, dimension, dimension);
+        if (this._brightness !== 1) {
+            ctx.globalAlpha = 1 - this._brightness;
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, dimension, dimension);
+        }
+        ctx.restore();
+    }
+
+    _draw()
+    {
+        this._drawTintedCanvas();
+
+        var ctx = this._finalCanvas.getContext("2d");
+        var dimension = this._dimension * window.devicePixelRatio;
+        var radius = this._radius * window.devicePixelRatio;
+
+        ctx.save();
+        ctx.clearRect(0, 0, dimension, dimension);
+        ctx.beginPath();
+        ctx.arc(dimension / 2, dimension / 2, radius + 1, 0, Math.PI * 2, true);
+        ctx.closePath();
+        ctx.clip();
+        ctx.drawImage(this._tintedCanvas, 0, 0, dimension, dimension);
+        ctx.restore();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
new file mode 100644
index 000000000..b17af9964
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.css
@@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.completion-suggestions {
+    position: absolute;
+    display: block;
+
+    background-color: hsla(0, 0%, 100%, 0.9);
+    border-radius: 5px;
+
+    z-index: var(--z-index-tooltip);
+
+    margin-top: -1px;
+    margin-left: -10px;
+
+    box-shadow: hsla(0, 0%, 0%, 0.25) 0 5px 10px, hsla(0, 0%, 0%, 0.15) 0 0 0 1px;
+}
+
+.completion-suggestions > .completion-suggestions-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    border-radius: 5px;
+}
+
+.completion-suggestions-container > .item {
+    padding: 1px 10px;
+    margin: 0;
+
+    font-size: 11px;
+    font-family: Menlo, monospace;
+
+    line-height: 16px;
+    height: 16px;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    color: black;
+}
+
+.completion-suggestions-container:not(:active) > .item.selected,
+.completion-suggestions-container > .item:active {
+    box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
+    background: linear-gradient(to bottom, hsl(207, 57%, 63%), hsl(207, 66%, 42%));
+
+    color: white;
+    text-shadow: hsl(209, 41%, 34%) 0 1px 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js
new file mode 100644
index 000000000..7732dbaff
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js
@@ -0,0 +1,226 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CompletionSuggestionsView = class CompletionSuggestionsView extends WebInspector.Object
+{
+    constructor(delegate)
+    {
+        super();
+
+        this._delegate = delegate || null;
+
+        this._selectedIndex = NaN;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("completion-suggestions", WebInspector.Popover.IgnoreAutoDismissClassName);
+
+        this._containerElement = document.createElement("div");
+        this._containerElement.classList.add("completion-suggestions-container");
+        this._containerElement.addEventListener("mousedown", this._mouseDown.bind(this));
+        this._containerElement.addEventListener("mouseup", this._mouseUp.bind(this));
+        this._containerElement.addEventListener("click", this._itemClicked.bind(this));
+        this._element.appendChild(this._containerElement);
+    }
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    get visible()
+    {
+        return !!this._element.parentNode;
+    }
+
+    get selectedIndex()
+    {
+        return this._selectedIndex;
+    }
+
+    set selectedIndex(index)
+    {
+        var selectedItemElement = this._selectedItemElement;
+        if (selectedItemElement)
+            selectedItemElement.classList.remove(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
+
+        this._selectedIndex = index;
+
+        selectedItemElement = this._selectedItemElement;
+        if (!selectedItemElement)
+            return;
+
+        selectedItemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
+        selectedItemElement.scrollIntoViewIfNeeded(false);
+    }
+
+    selectNext()
+    {
+        var count = this._containerElement.children.length;
+
+        if (isNaN(this._selectedIndex) || this._selectedIndex === count - 1)
+            this.selectedIndex = 0;
+        else
+            ++this.selectedIndex;
+
+        var selectedItemElement = this._selectedItemElement;
+        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
+            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
+    }
+
+    selectPrevious()
+    {
+        if (isNaN(this._selectedIndex) || this._selectedIndex === 0)
+            this.selectedIndex = this._containerElement.children.length - 1;
+        else
+            --this.selectedIndex;
+
+        var selectedItemElement = this._selectedItemElement;
+        if (selectedItemElement && this._delegate && typeof this._delegate.completionSuggestionsSelectedCompletion === "function")
+            this._delegate.completionSuggestionsSelectedCompletion(this, selectedItemElement.textContent);
+    }
+
+    isHandlingClickEvent()
+    {
+        return this._mouseIsDown;
+    }
+
+    show(anchorBounds)
+    {
+        // Measure the container so we can know the intrinsic size of the items.
+        this._containerElement.style.position = "absolute";
+        document.body.appendChild(this._containerElement);
+
+        var containerWidth = this._containerElement.offsetWidth;
+        var containerHeight = this._containerElement.offsetHeight;
+
+        this._containerElement.removeAttribute("style");
+        this._element.appendChild(this._containerElement);
+
+        // Lay out the suggest-box relative to the anchorBounds.
+        var margin = 10;
+        var horizontalPadding = 22;
+        var absoluteMaximumHeight = 160;
+
+        var x = anchorBounds.origin.x;
+        var y = anchorBounds.origin.y + anchorBounds.size.height;
+
+        var maximumWidth = window.innerWidth - anchorBounds.origin.x - margin;
+        var width = Math.min(containerWidth, maximumWidth - horizontalPadding) + horizontalPadding;
+        var paddedWidth = containerWidth + horizontalPadding;
+
+        if (width < paddedWidth) {
+            // Shift the suggest box to the left to accommodate the content without trimming to the BODY edge.
+            maximumWidth = window.innerWidth - margin;
+            width = Math.min(containerWidth, maximumWidth - horizontalPadding) + horizontalPadding;
+            x = document.body.offsetWidth - width;
+        }
+
+        var aboveHeight = anchorBounds.origin.y;
+        var underHeight = window.innerHeight - anchorBounds.origin.y - anchorBounds.size.height;
+        var maximumHeight = Math.min(absoluteMaximumHeight, Math.max(underHeight, aboveHeight) - margin);
+        var height = Math.min(containerHeight, maximumHeight);
+
+        // Position the suggestions below the anchor. If there is no room, position the suggestions above.
+        if (underHeight - height < 0)
+            y = aboveHeight - height;
+
+        this._element.style.left = x + "px";
+        this._element.style.top = y + "px";
+        this._element.style.width = width + "px";
+        this._element.style.height = height + "px";
+
+        document.body.appendChild(this._element);
+    }
+
+    hide()
+    {
+        this._element.remove();
+    }
+
+    update(completions, selectedIndex)
+    {
+        this._containerElement.removeChildren();
+
+        if (typeof selectedIndex === "number")
+            this._selectedIndex = selectedIndex;
+
+        for (var i = 0; i < completions.length; ++i) {
+            var itemElement = document.createElement("div");
+            itemElement.className = WebInspector.CompletionSuggestionsView.ItemElementStyleClassName;
+            itemElement.textContent = completions[i];
+            if (i === this._selectedIndex)
+                itemElement.classList.add(WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName);
+            this._containerElement.appendChild(itemElement);
+
+            if (this._delegate && typeof this._delegate.completionSuggestionsViewCustomizeCompletionElement === "function")
+                this._delegate.completionSuggestionsViewCustomizeCompletionElement(this, itemElement, completions[i]);
+        }
+    }
+
+    // Private
+
+    get _selectedItemElement()
+    {
+        if (isNaN(this._selectedIndex))
+            return null;
+
+        var element = this._containerElement.children[this._selectedIndex] || null;
+        console.assert(element);
+        return element;
+    }
+
+    _mouseDown(event)
+    {
+        if (event.button !== 0)
+            return;
+        this._mouseIsDown = true;
+    }
+
+    _mouseUp(event)
+    {
+        if (event.button !== 0)
+            return;
+        this._mouseIsDown = false;
+    }
+
+    _itemClicked(event)
+    {
+        if (event.button !== 0)
+            return;
+
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.CompletionSuggestionsView.ItemElementStyleClassName);
+        console.assert(itemElement);
+        if (!itemElement)
+            return;
+
+        if (this._delegate && typeof this._delegate.completionSuggestionsClickedCompletion === "function")
+            this._delegate.completionSuggestionsClickedCompletion(this, itemElement.textContent);
+    }
+};
+
+WebInspector.CompletionSuggestionsView.ItemElementStyleClassName = "item";
+WebInspector.CompletionSuggestionsView.SelectedItemStyleClassName = "selected";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
new file mode 100644
index 000000000..92ef39261
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.css
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.computed-style-properties.details-section {
+    background-color: white;
+}
+
+.details-section > .content > .group > .row.simple.content-flow-link > .value > span > .icon {
+    width: 12px;
+    height: 12px;
+    content: url(../Images/ContentFlow.svg);
+    margin-right: 4px;
+    -webkit-user-select: none;
+}
+
+.details-section > .content > .group > .row.simple.content-flow-link span
+{
+    vertical-align: top;
+}
+
+.details-section > .content > .group > .row .CodeMirror-code pre .go-to-arrow {
+    display: none;
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    vertical-align: text-bottom;
+}
+
+.details-section > .content > .group > .row .CodeMirror-code pre:hover .go-to-arrow {
+    display: initial;
+}
+
+.details-section.style-box-model:not(.collapsed) > :matches(.header, .content) {
+    background-color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
new file mode 100644
index 000000000..12ca3d639
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleDetailsPanel.js
@@ -0,0 +1,280 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ComputedStyleDetailsPanel = class ComputedStyleDetailsPanel extends WebInspector.StyleDetailsPanel
+{
+    constructor(delegate)
+    {
+        super(delegate, WebInspector.ComputedStyleDetailsPanel.StyleClassName, "computed", WebInspector.UIString("Styles \u2014 Computed"));
+
+        this._computedStyleShowAllSetting = new WebInspector.Setting("computed-style-show-all", false);
+
+        var computedStyleShowAllLabel = document.createElement("label");
+        computedStyleShowAllLabel.textContent = WebInspector.UIString("Show All");
+
+        this._computedStyleShowAllCheckbox = document.createElement("input");
+        this._computedStyleShowAllCheckbox.type = "checkbox";
+        this._computedStyleShowAllCheckbox.checked = this._computedStyleShowAllSetting.value;
+        this._computedStyleShowAllCheckbox.addEventListener("change", this._computedStyleShowAllCheckboxValueChanged.bind(this));
+        computedStyleShowAllLabel.appendChild(this._computedStyleShowAllCheckbox);
+
+        this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this);
+        this._propertiesTextEditor.showsImplicitProperties = this._computedStyleShowAllSetting.value;
+        this._propertiesTextEditor.alwaysShowPropertyNames = ["display", "width", "height"];
+        this._propertiesTextEditor.sortProperties = true;
+
+        var propertiesRow = new WebInspector.DetailsSectionRow;
+        var propertiesGroup = new WebInspector.DetailsSectionGroup([propertiesRow]);
+        var propertiesSection = new WebInspector.DetailsSection("computed-style-properties", WebInspector.UIString("Properties"), [propertiesGroup], computedStyleShowAllLabel);
+        propertiesSection.addEventListener(WebInspector.DetailsSection.Event.CollapsedStateChanged, this._handleCollapsedStateChanged, this);
+
+        propertiesRow.element.appendChild(this._propertiesTextEditor.element);
+
+        // Region flow name is used to display the "flow-from" property of the Region Containers.
+        this._regionFlowFragment = document.createElement("span");
+        this._regionFlowFragment.appendChild(document.createElement("img")).className = "icon";
+        this._regionFlowNameLabelValue = this._regionFlowFragment.appendChild(document.createElement("span"));
+
+        var goToRegionFlowButton = this._regionFlowFragment.appendChild(WebInspector.createGoToArrowButton());
+        goToRegionFlowButton.addEventListener("click", this._goToRegionFlowArrowWasClicked.bind(this));
+
+        this._regionFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Region Flow"));
+        this._regionFlowNameRow.element.classList.add("content-flow-link");
+
+        // Content flow name is used to display the "flow-into" property of the Content nodes.
+        this._contentFlowFragment = document.createElement("span");
+        this._contentFlowFragment.appendChild(document.createElement("img")).className = "icon";
+        this._contentFlowNameLabelValue = this._contentFlowFragment.appendChild(document.createElement("span"));
+
+        var goToContentFlowButton = this._contentFlowFragment.appendChild(WebInspector.createGoToArrowButton());
+        goToContentFlowButton.addEventListener("click", this._goToContentFlowArrowWasClicked.bind(this));
+
+        this._contentFlowNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Content Flow"));
+        this._contentFlowNameRow.element.classList.add("content-flow-link");
+
+        var flowNamesGroup = new WebInspector.DetailsSectionGroup([this._regionFlowNameRow, this._contentFlowNameRow]);
+        this._flowNamesSection = new WebInspector.DetailsSection("content-flow", WebInspector.UIString("Flows"), [flowNamesGroup]);
+
+        this._containerRegionsDataGrid = new WebInspector.DOMTreeDataGrid;
+        this._containerRegionsDataGrid.element.classList.add("no-header");
+
+        var containerRegionsRow = new WebInspector.DetailsSectionDataGridRow(this._containerRegionsDataGrid);
+        var containerRegionsGroup = new WebInspector.DetailsSectionGroup([containerRegionsRow]);
+        this._containerRegionsFlowSection = new WebInspector.DetailsSection("container-regions", WebInspector.UIString("Container Regions"), [containerRegionsGroup]);
+
+        this.element.appendChild(propertiesSection.element);
+        this.element.appendChild(this._flowNamesSection.element);
+        this.element.appendChild(this._containerRegionsFlowSection.element);
+
+        this._resetFlowDetails();
+
+        this._boxModelDiagramRow = new WebInspector.BoxModelDetailsSectionRow;
+
+        var boxModelGroup = new WebInspector.DetailsSectionGroup([this._boxModelDiagramRow]);
+        var boxModelSection = new WebInspector.DetailsSection("style-box-model", WebInspector.UIString("Box Model"), [boxModelGroup]);
+
+        this.element.appendChild(boxModelSection.element);
+        
+        this.cssStyleDeclarationTextEditorShouldAddPropertyGoToArrows = true;
+    }
+
+    // Public
+
+    get regionFlow()
+    {
+        return this._regionFlow;
+    }
+
+    set regionFlow(regionFlow)
+    {
+        this._regionFlow = regionFlow;
+        this._regionFlowNameLabelValue.textContent = regionFlow ? regionFlow.name : "";
+        this._regionFlowNameRow.value = regionFlow ? this._regionFlowFragment : null;
+        this._updateFlowNamesSectionVisibility();
+    }
+
+    get contentFlow()
+    {
+        return this._contentFlow;
+    }
+
+    set contentFlow(contentFlow)
+    {
+        this._contentFlow = contentFlow;
+        this._contentFlowNameLabelValue.textContent = contentFlow ? contentFlow.name : "";
+        this._contentFlowNameRow.value = contentFlow ? this._contentFlowFragment : null;
+        this._updateFlowNamesSectionVisibility();
+    }
+
+    get containerRegions()
+    {
+        return this._containerRegions;
+    }
+
+    set containerRegions(regions)
+    {
+        this._containerRegions = regions;
+
+        if (!regions || !regions.length) {
+            this._containerRegionsFlowSection.element.classList.add("hidden");
+            return;
+        }
+
+        this._containerRegionsDataGrid.removeChildren();
+        for (var regionNode of regions)
+            this._containerRegionsDataGrid.appendChild(new WebInspector.DOMTreeDataGridNode(regionNode));
+
+        this._containerRegionsFlowSection.element.classList.remove("hidden");
+    }
+
+    cssStyleDeclarationTextEditorShowProperty(property, showSource)
+    {
+        function delegateShowProperty() {
+            if (typeof this._delegate.computedStyleDetailsPanelShowProperty === "function")
+                this._delegate.computedStyleDetailsPanelShowProperty(property);
+        }
+
+        if (!showSource) {
+            delegateShowProperty.call(this);
+            return;
+        }
+
+        let effectiveProperty = this._nodeStyles.effectivePropertyForName(property.name);
+        if (!effectiveProperty || !effectiveProperty.styleSheetTextRange) {
+            if (!effectiveProperty.relatedShorthandProperty) {
+                delegateShowProperty.call(this);
+                return;
+            }
+            effectiveProperty = effectiveProperty.relatedShorthandProperty;
+        }
+
+        let ownerRule = effectiveProperty.ownerStyle.ownerRule;
+        if (!ownerRule) {
+            delegateShowProperty.call(this);
+            return;
+        }
+
+        let sourceCode = ownerRule.sourceCodeLocation.sourceCode;
+        let {startLine, startColumn} = effectiveProperty.styleSheetTextRange;
+        let sourceCodeLocation = sourceCode.createSourceCodeLocation(startLine, startColumn);
+        WebInspector.showSourceCodeLocation(sourceCodeLocation);
+    }
+
+    refresh(significantChange)
+    {
+        // We only need to do a rebuild on significant changes. Other changes are handled
+        // by the sections and text editors themselves.
+        if (!significantChange) {
+            super.refresh();
+            return;
+        }
+
+        this._propertiesTextEditor.style = this.nodeStyles.computedStyle;
+        this._refreshFlowDetails(this.nodeStyles.node);
+        this._boxModelDiagramRow.nodeStyles = this.nodeStyles;
+
+        super.refresh();
+    }
+
+    filterDidChange(filterBar)
+    {
+        this._propertiesTextEditor.removeNonMatchingProperties(filterBar.filters.text);
+    }
+
+    // Protected
+
+    shown()
+    {
+        super.shown();
+
+        this._propertiesTextEditor.updateLayout();
+    }
+
+    widthDidChange()
+    {
+        this._propertiesTextEditor.updateLayout();
+    }
+
+    // Private
+
+    _computedStyleShowAllCheckboxValueChanged(event)
+    {
+        var checked = this._computedStyleShowAllCheckbox.checked;
+        this._computedStyleShowAllSetting.value = checked;
+        this._propertiesTextEditor.showsImplicitProperties = checked;
+    }
+
+    _handleCollapsedStateChanged(event)
+    {
+        if (event && event.data && !event.data.collapsed)
+            this._propertiesTextEditor.refresh();
+    }
+
+    _updateFlowNamesSectionVisibility()
+    {
+        this._flowNamesSection.element.classList.toggle("hidden", !this._contentFlow && !this._regionFlow);
+    }
+
+    _resetFlowDetails ()
+    {
+        this.regionFlow = null;
+        this.contentFlow = null;
+        this.containerRegions = null;
+    }
+
+    _refreshFlowDetails(domNode)
+    {
+        this._resetFlowDetails();
+        if (!domNode)
+            return;
+
+        function contentFlowInfoReady(error, flowData)
+        {
+            // Element is not part of any flow.
+            if (error || !flowData) {
+                this._resetFlowDetails();
+                return;
+            }
+
+            this.regionFlow = flowData.regionFlow;
+            this.contentFlow = flowData.contentFlow;
+            this.containerRegions = flowData.regions;
+        }
+
+        WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, contentFlowInfoReady.bind(this));
+    }
+
+    _goToRegionFlowArrowWasClicked()
+    {
+        WebInspector.showContentFlowDOMTree(this._regionFlow);
+    }
+
+    _goToContentFlowArrowWasClicked()
+    {
+        WebInspector.showContentFlowDOMTree(this._contentFlow, this.nodeStyles.node);
+    }
+};
+
+WebInspector.ComputedStyleDetailsPanel.StyleClassName = "computed";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js
new file mode 100644
index 000000000..8f8430c9b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleCommandView.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleCommandView = class ConsoleCommandView extends WebInspector.Object
+{
+    constructor(commandText, className)
+    {
+        super();
+
+        this._commandText = commandText;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("console-user-command");
+        this._element.setAttribute("data-labelprefix", WebInspector.UIString("Input: "));
+
+        if (className)
+            this._element.classList.add(className);
+
+        this._formattedCommandElement = this._element.appendChild(document.createElement("span"));
+        this._formattedCommandElement.classList.add("console-message-text");
+        this._formattedCommandElement.textContent = this._commandText;
+
+        // FIXME: <https://webkit.org/b/143545> Web Inspector: LogContentView should use higher level objects
+        this._element.__commandView = this;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get commandText()
+    {
+        return this._commandText;
+    }
+
+    toClipboardString(isPrefixOptional)
+    {
+        return (isPrefixOptional ? "" : "> ") + this._commandText.removeWordBreakCharacters();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js
new file mode 100644
index 000000000..8e6210064
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js
@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleGroup = class ConsoleGroup extends WebInspector.Object
+{
+    constructor(parentGroup)
+    {
+        super();
+
+        this._parentGroup = parentGroup;
+    }
+
+    // Public
+
+    get parentGroup()
+    {
+        return this._parentGroup;
+    }
+
+    render(messageView)
+    {
+        var groupElement = document.createElement("div");
+        groupElement.className = "console-group";
+        groupElement.group = this;
+        this.element = groupElement;
+
+        var titleElement = messageView.element;
+        titleElement.classList.add(WebInspector.LogContentView.ItemWrapperStyleClassName);
+        titleElement.addEventListener("click", this._titleClicked.bind(this));
+        titleElement.addEventListener("mousedown", this._titleMouseDown.bind(this));
+
+        if (groupElement && messageView.message.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
+            groupElement.classList.add("collapsed");
+
+        groupElement.appendChild(titleElement);
+
+        var messagesElement = document.createElement("div");
+        this._messagesElement = messagesElement;
+        messagesElement.className = "console-group-messages";
+        groupElement.appendChild(messagesElement);
+
+        return groupElement;
+    }
+
+    addMessageView(messageView)
+    {
+        var element = messageView.element;
+        element.classList.add(WebInspector.LogContentView.ItemWrapperStyleClassName);
+        this.append(element);
+    }
+
+    append(messageOrGroupElement)
+    {
+        this._messagesElement.appendChild(messageOrGroupElement);
+    }
+
+    // Private
+
+    _titleMouseDown(event)
+    {
+        event.preventDefault();
+    }
+
+    _titleClicked(event)
+    {
+        var groupTitleElement = event.target.enclosingNodeOrSelfWithClass("console-group-title");
+        if (groupTitleElement) {
+            var groupElement = groupTitleElement.enclosingNodeOrSelfWithClass("console-group");
+            if (groupElement)
+                if (groupElement.classList.contains("collapsed"))
+                    groupElement.classList.remove("collapsed");
+                else
+                    groupElement.classList.add("collapsed");
+            groupTitleElement.scrollIntoViewIfNeeded(true);
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
new file mode 100644
index 000000000..d7aeea5ef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.css
@@ -0,0 +1,277 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.console-message, .console-user-command {
+    position: relative;
+    padding: 4px 12px 2px 20px;
+    min-height: 21px;
+}
+
+.console-user-command.special-user-log > .console-message-text {
+    padding: 0 6px 1px;
+    border-radius: 3px;
+    border: 1px solid transparent;
+    background-color: hsl(212, 92%, 54%);
+    color: white;
+    font: 10px -apple-system, sans-serif;
+    -webkit-user-select: none;
+}
+
+.console-message .repeat-count {
+    display: inline-block;
+    float: left;
+
+    padding: 1px 4px;
+    margin: 0 4px 0 0;
+
+    height: 15px;
+    background-color: hsl(217, 31%, 62%);
+    vertical-align: middle;
+    white-space: nowrap;
+
+    font-size: 11px;
+    text-align: left;
+    line-height: normal;
+    font-weight: bold;
+    color: white;
+    border-radius: 7px;
+}
+
+.console-message-text {
+    white-space: pre-wrap;
+}
+
+.console-message-text > span {
+    -webkit-user-select: text;
+}
+
+.console-message.expandable .console-top-level-message::before {
+    display: inline-block;
+
+    vertical-align: baseline;
+    margin-bottom: -2px;
+    margin-right: 2px;
+
+    width: 13px;
+    height: 13px;
+
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-size: 13px 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    content: "";
+}
+
+.console-message.expandable.expanded .console-top-level-message::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.console-message.expandable.expanded :matches(.console-message-preview, .console-message-preview-divider):not(.inline-lossless) {
+    display: none;
+}
+
+.console-message-preview-divider {
+    color: var(--console-secondary-text-color);
+}
+
+.console-message-enclosed {
+    font-family: Menlo, monospace;
+    font-size: 11px;
+    color: var(--console-secondary-text-color);
+}
+
+.console-message .console-message-extra-parameters-container,
+.console-message .console-message-stack-trace-container {
+    margin: 0;
+    padding: 2px 0 0 0;
+    list-style: none;
+    outline: none;
+    display: none;
+}
+
+.console-message .console-message-stack-trace-container {
+    margin-left: 20px;
+}
+
+.console-message.expandable.expanded .console-message-extra-parameters-container,
+.console-message.expandable.expanded .console-message-stack-trace-container {
+    display: block;
+}
+
+.console-message .console-message-extra-parameters-container > li,
+.console-message .console-message-stack-trace-container > li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-user-select: text;
+    cursor: default;
+    padding: 2px 0 2px 15px;
+}
+
+.console-message .console-message-extra-parameters-container > li::before {
+    display: inline-block;
+    width: 15px;
+    margin-left: -15px;
+    text-align: center;
+
+    height: 13px;
+    content: "•";
+
+    font-family: -apple-system, sans-serif;
+    font-size: 11px;
+    color: var(--console-secondary-text-color);
+
+    vertical-align: top;
+}
+
+.console-error-level {
+    background-color: hsl(0, 100%, 96%);
+    border-color: hsl(0, 100%, 92%);
+}
+
+.console-error-level .console-message-text {
+    color: hsl(0, 75%, 45%);
+}
+
+.console-debug-level .console-message-text {
+    color: blue;
+}
+
+.console-warning-level {
+    background-color: hsl(50, 100%, 94%);
+    border-color: hsl(40, 100%, 90%);
+}
+
+.console-warning-level .console-message-text {
+    color: hsl(30, 90%, 35%);
+}
+
+.console-user-command .console-message {
+    margin-left: -24px;
+    padding-right: 0;
+}
+
+.console-log-level::before {
+    content: url(../Images/Log.svg);
+}
+
+.console-info-level::before {
+    content: url(../Images/Info.svg);
+}
+
+.console-debug-level::before {
+    content: url(../Images/Debug.svg);
+}
+
+.console-error-level::before {
+    content: url(../Images/Error.svg);
+}
+
+.console-warning-level::before {
+    content: url(../Images/Warning.svg);
+}
+
+.console-user-command::before {
+    content: url(../Images/UserInputPromptPrevious.svg);
+}
+
+:matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level).console-message {
+ /* Move non-monospace log/warning/error text up a bit. */
+    padding: 3px 12px 3px 20px;
+}
+
+:matches(.console-warning-level, .console-error-level, .console-log-level, .console-info-level, .console-debug-level)::before {
+ /* Re-center log/warning/error icons. */
+    padding-top: 1px;
+}
+
+.console-user-command > .console-message-text {
+    color: hsl(209, 100%, 50%);
+    -webkit-user-select: text;
+}
+
+.console-saved-variable {
+    font-style: normal;
+    color: var(--console-secondary-text-color);
+}
+
+.console-user-command,
+.console-user-command-result {
+    font-family: Menlo, monospace;
+    font-size: 11px;
+}
+
+.console-user-command-result.console-log-level::before {
+    content: url(../Images/UserInputResult.svg);
+    margin-left: 1px;
+}
+
+.console-message .console-message-location {
+    float: right;
+    font-family: -apple-system, sans-serif;
+    font-size: 12px;
+    font-weight: normal;
+    -webkit-user-select: text;
+}
+
+.console-message-extra-parameter .stack-trace {
+    display: inline-block;
+}
+
+.console-message-location.call-frame {
+    display: inline-block;
+    -webkit-user-select: text;
+    max-height: 16px;
+
+    max-width: 50vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.console-message-location.call-frame > .title {
+    max-width: 20vw;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+}
+
+.console-message-location.call-frame > .subtitle > .source-link {
+    max-width: 30vw;
+}
+
+.console-message .go-to-link {
+    color: hsla(0, 0%, 0%, 0.6);
+    text-decoration: none;
+}
+
+.console-message .go-to-link:hover,
+.console-message .go-to-link:focus {
+    color: hsl(210, 100%, 40%);
+}
+
+.console-message .console-message-url::before {
+    content: ' ';
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
new file mode 100644
index 000000000..6f5736992
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageView.js
@@ -0,0 +1,856 @@
+/*
+ * Copyright (C) 2011 Google Inc.  All rights reserved.
+ * Copyright (C) 2007, 2008, 2013-2015 Apple Inc.  All rights reserved.
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleMessageView = class ConsoleMessageView extends WebInspector.Object
+{
+    constructor(message)
+    {
+        super();
+
+        console.assert(message instanceof WebInspector.ConsoleMessage);
+
+        this._message = message;
+
+        this._expandable = false;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("console-message");
+
+        // FIXME: <https://webkit.org/b/143545> Web Inspector: LogContentView should use higher level objects
+        this._element.__message = this._message;
+        this._element.__messageView = this;
+
+        if (this._message.type === WebInspector.ConsoleMessage.MessageType.Result) {
+            this._element.classList.add("console-user-command-result");
+            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Output: "));
+        } else if (this._message.type === WebInspector.ConsoleMessage.MessageType.StartGroup || this._message.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
+            this._element.classList.add("console-group-title");
+
+        switch (this._message.level) {
+        case WebInspector.ConsoleMessage.MessageLevel.Log:
+            this._element.classList.add("console-log-level");
+            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Log: "));
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Info:
+            this._element.classList.add("console-info-level");
+            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Info: "));
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Debug:
+            this._element.classList.add("console-debug-level");
+            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Debug: "));
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Warning:
+            this._element.classList.add("console-warning-level");
+            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Warning: "));
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Error:
+            this._element.classList.add("console-error-level");
+            this._element.setAttribute("data-labelprefix", WebInspector.UIString("Error: "));
+            break;
+        }
+
+        // These are the parameters unused by the messages's optional format string.
+        // Any extra parameters will be displayed as children of this message.
+        this._extraParameters = this._message.parameters;
+
+        // FIXME: The location link should include stack trace information.
+        this._appendLocationLink();
+
+        this._messageTextElement = this._element.appendChild(document.createElement("span"));
+        this._messageTextElement.classList.add("console-top-level-message");
+        this._messageTextElement.classList.add("console-message-text");
+        this._appendMessageTextAndArguments(this._messageTextElement);
+        this._appendSavedResultIndex();
+
+        this._appendExtraParameters();
+        this._appendStackTrace();
+
+        this.repeatCount = this._message.repeatCount;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get message()
+    {
+        return this._message;
+    }
+
+    get repeatCount()
+    {
+        return this._repeatCount;
+    }
+
+    set repeatCount(count)
+    {
+        console.assert(typeof count === "number");
+
+        if (this._repeatCount === count)
+            return;
+
+        this._repeatCount = count;
+
+        if (count <= 1) {
+            if (this._repeatCountElement) {
+                this._repeatCountElement.remove();
+                this._repeatCountElement = null;
+            }
+            return;
+        }
+
+        if (!this._repeatCountElement) {
+            this._repeatCountElement = document.createElement("span");
+            this._repeatCountElement.classList.add("repeat-count");
+            this._element.insertBefore(this._repeatCountElement, this._element.firstChild);
+        }
+
+        this._repeatCountElement.textContent = count;
+    }
+
+    get expandable()
+    {
+        // There are extra arguments or a call stack that can be shown.
+        if (this._expandable)
+            return true;
+
+        // There is an object tree that could be expanded.
+        if (this._objectTree)
+            return true;
+
+        return false;
+    }
+
+    expand()
+    {
+        if (this._expandable)
+            this._element.classList.add("expanded");
+
+        // Auto-expand an inner object tree if there is a single object.
+        // For Trace messages we are auto-expanding for the call stack, don't also auto-expand an object as well.
+        if (this._objectTree && this._message.type !== WebInspector.ConsoleMessage.MessageType.Trace) {
+            if (!this._extraParameters || this._extraParameters.length <= 1)
+                this._objectTree.expand();
+        }
+    }
+
+    collapse()
+    {
+        if (this._expandable)
+            this._element.classList.remove("expanded");
+
+        // Collapse the object tree just in cases where it was autoexpanded.
+        if (this._objectTree) {
+            if (!this._extraParameters || this._extraParameters.length <= 1)
+                this._objectTree.collapse();
+        }
+    }
+
+    toggle()
+    {
+        if (this._element.classList.contains("expanded"))
+            this.collapse();
+        else
+            this.expand();
+    }
+
+    toClipboardString(isPrefixOptional)
+    {
+        let clipboardString = this._messageTextElement.innerText.removeWordBreakCharacters();
+        if (this._message.savedResultIndex)
+            clipboardString = clipboardString.replace(/\s*=\s*(\$\d+)$/, "");
+
+        let hasStackTrace = this._shouldShowStackTrace();
+        if (!hasStackTrace) {
+            let repeatString = this.repeatCount > 1 ? "x" + this.repeatCount : "";
+            let urlLine = "";
+            if (this._message.url) {
+                let components = [WebInspector.displayNameForURL(this._message.url), "line " + this._message.line];
+                if (repeatString)
+                    components.push(repeatString);
+                urlLine = " (" + components.join(", ") + ")";
+            } else if (repeatString)
+                urlLine = " (" + repeatString + ")";
+
+            if (urlLine) {
+                let lines = clipboardString.split("\n");
+                lines[0] += urlLine;
+                clipboardString = lines.join("\n");
+            }
+        }
+
+        if (this._extraElementsList)
+            clipboardString += "\n" + this._extraElementsList.innerText.removeWordBreakCharacters().trim();
+
+        if (hasStackTrace) {
+            this._message.stackTrace.callFrames.forEach(function(frame) {
+                clipboardString += "\n\t" + (frame.functionName || WebInspector.UIString("(anonymous function)"));
+                if (frame.sourceCodeLocation)
+                    clipboardString += " (" + frame.sourceCodeLocation.originalLocationString() + ")";
+            });
+        }
+
+        if (!isPrefixOptional || this._enforcesClipboardPrefixString())
+            return this._clipboardPrefixString() + clipboardString;
+        return clipboardString;
+    }
+
+    // Private
+
+    _appendMessageTextAndArguments(element)
+    {
+        if (this._message.source === WebInspector.ConsoleMessage.MessageSource.ConsoleAPI) {
+            switch (this._message.type) {
+            case WebInspector.ConsoleMessage.MessageType.Trace:
+                var args = [WebInspector.UIString("Trace")];
+                if (this._message.parameters) {
+                    if (this._message.parameters[0].type === "string")
+                        args = [WebInspector.UIString("Trace: %s")].concat(this._message.parameters);
+                    else
+                        args = args.concat(this._message.parameters);
+                }
+                this._appendFormattedArguments(element, args);
+                break;
+
+            case WebInspector.ConsoleMessage.MessageType.Assert:
+                var args = [WebInspector.UIString("Assertion Failed")];
+                if (this._message.parameters) {
+                    if (this._message.parameters[0].type === "string")
+                        args = [WebInspector.UIString("Assertion Failed: %s")].concat(this._message.parameters);
+                    else
+                        args = args.concat(this._message.parameters);
+                }
+                this._appendFormattedArguments(element, args);
+                break;
+
+            case WebInspector.ConsoleMessage.MessageType.Dir:
+                var obj = this._message.parameters ? this._message.parameters[0] : undefined;
+                this._appendFormattedArguments(element, ["%O", obj]);
+                break;
+
+            case WebInspector.ConsoleMessage.MessageType.Table:
+                var args = this._message.parameters;
+                element.appendChild(this._formatParameterAsTable(args));
+                this._extraParameters = null;
+                break;
+
+            case WebInspector.ConsoleMessage.MessageType.StartGroup:
+            case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
+                var args = this._message.parameters || [this._message.messageText || WebInspector.UIString("Group")];
+                this._formatWithSubstitutionString(args, element);
+                this._extraParameters = null;
+                break;
+
+            default:
+                var args = this._message.parameters || [this._message.messageText];
+                this._appendFormattedArguments(element, args);
+                break;
+            }
+            return;
+        }
+
+        // FIXME: Better handle WebInspector.ConsoleMessage.MessageSource.Network once it has request info.
+
+        var args = this._message.parameters || [this._message.messageText];
+        this._appendFormattedArguments(element, args);
+    }
+
+    _appendSavedResultIndex(element)
+    {
+        if (!this._message.savedResultIndex)
+            return;
+
+        console.assert(this._message instanceof WebInspector.ConsoleCommandResultMessage);
+        console.assert(this._message.type === WebInspector.ConsoleMessage.MessageType.Result);
+
+        var savedVariableElement = document.createElement("span");
+        savedVariableElement.classList.add("console-saved-variable");
+        savedVariableElement.textContent = " = $" + this._message.savedResultIndex;
+
+        if (this._objectTree)
+            this._objectTree.appendTitleSuffix(savedVariableElement);
+        else
+            this._messageTextElement.appendChild(savedVariableElement);
+    }
+
+    _appendLocationLink()
+    {
+        if (this._message.source === WebInspector.ConsoleMessage.MessageSource.Network) {
+            if (this._message.url) {
+                var anchor = WebInspector.linkifyURLAsNode(this._message.url, this._message.url, "console-message-url");
+                anchor.classList.add("console-message-location");
+                this._element.appendChild(anchor);                
+            }
+            return;
+        }
+
+        var firstNonNativeCallFrame = this._message.stackTrace.firstNonNativeCallFrame;
+
+        var callFrame;
+        if (firstNonNativeCallFrame) {
+            // JavaScript errors and console.* methods.
+            callFrame = firstNonNativeCallFrame;
+        } else if (this._message.url && !this._shouldHideURL(this._message.url)) {
+            // CSS warnings have no stack traces.
+            callFrame = WebInspector.CallFrame.fromPayload({
+                functionName: "",
+                url: this._message.url,
+                lineNumber: this._message.line,
+                columnNumber: this._message.column
+            });
+        }
+
+        if (callFrame) {
+            const showFunctionName = !!callFrame.functionName;
+            var locationElement = new WebInspector.CallFrameView(callFrame, showFunctionName);
+            locationElement.classList.add("console-message-location");
+            this._element.appendChild(locationElement);
+
+            return;
+        }
+
+        if (this._message.parameters && this._message.parameters.length === 1) {
+            var parameter = this._createRemoteObjectIfNeeded(this._message.parameters[0]);
+
+            parameter.findFunctionSourceCodeLocation().then(function(result) {
+                if (result === WebInspector.RemoteObject.SourceCodeLocationPromise.NoSourceFound || result === WebInspector.RemoteObject.SourceCodeLocationPromise.MissingObjectId)
+                    return;
+
+                var link = this._linkifyLocation(result.sourceCode.url, result.lineNumber, result.columnNumber);
+                link.classList.add("console-message-location");
+
+                if (this._element.hasChildNodes())
+                    this._element.insertBefore(link, this._element.firstChild);
+                else
+                    this._element.appendChild(link);
+            }.bind(this));
+        }
+    }
+
+    _appendExtraParameters()
+    {
+        if (!this._extraParameters || !this._extraParameters.length)
+            return;
+
+        this._makeExpandable();
+
+        // Auto-expand if there are multiple objects.
+        if (this._extraParameters.length > 1)
+            this.expand();
+
+        this._extraElementsList = this._element.appendChild(document.createElement("ol"));
+        this._extraElementsList.classList.add("console-message-extra-parameters-container");
+
+        for (var parameter of this._extraParameters) {
+            var listItemElement = this._extraElementsList.appendChild(document.createElement("li"));
+            const forceObjectFormat = parameter.type === "object" && (parameter.subtype !== "null" && parameter.subtype !== "regexp" && parameter.subtype !== "node" && parameter.subtype !== "error");
+            listItemElement.classList.add("console-message-extra-parameter");
+            listItemElement.appendChild(this._formatParameter(parameter, forceObjectFormat));
+        }
+    }
+
+    _appendStackTrace()
+    {
+        if (!this._shouldShowStackTrace())
+            return;
+
+        this._makeExpandable();
+
+        // Auto-expand for console.trace.
+        if (this._message.type === WebInspector.ConsoleMessage.MessageType.Trace)
+            this.expand();
+
+        this._stackTraceElement = this._element.appendChild(document.createElement("div"));
+        this._stackTraceElement.classList.add("console-message-text", "console-message-stack-trace-container");
+
+        var callFramesElement = new WebInspector.StackTraceView(this._message.stackTrace).element;
+        this._stackTraceElement.appendChild(callFramesElement);
+    }
+
+    _createRemoteObjectIfNeeded(parameter)
+    {
+        // FIXME: Only pass RemoteObjects here so we can avoid this work.
+        if (parameter instanceof WebInspector.RemoteObject)
+            return parameter;
+
+        if (typeof parameter === "object")
+            return WebInspector.RemoteObject.fromPayload(parameter);
+
+        return WebInspector.RemoteObject.fromPrimitiveValue(parameter);
+    }
+
+    _appendFormattedArguments(element, parameters)
+    {
+        if (!parameters.length)
+            return;
+
+        for (var i = 0; i < parameters.length; ++i)
+            parameters[i] = this._createRemoteObjectIfNeeded(parameters[i]);
+
+        var builderElement = element.appendChild(document.createElement("span"));
+        var shouldFormatWithStringSubstitution = WebInspector.RemoteObject.type(parameters[0]) === "string" && this._message.type !== WebInspector.ConsoleMessage.MessageType.Result;
+
+        // Single object (e.g. console result or logging a non-string object).
+        if (parameters.length === 1 && !shouldFormatWithStringSubstitution) {
+            this._extraParameters = null;
+            builderElement.appendChild(this._formatParameter(parameters[0], false));
+            return;
+        }
+
+        console.assert(this._message.type !== WebInspector.ConsoleMessage.MessageType.Result);
+
+        if (shouldFormatWithStringSubstitution && this._isStackTrace(parameters[0]))
+            shouldFormatWithStringSubstitution = false;
+
+        // Format string / message / default message.
+        if (shouldFormatWithStringSubstitution) {
+            var result = this._formatWithSubstitutionString(parameters, builderElement);
+            parameters = result.unusedSubstitutions;
+            this._extraParameters = parameters;
+        } else {
+            var defaultMessage = WebInspector.UIString("No message");
+            builderElement.append(defaultMessage);
+        }
+
+        // Trailing parameters.
+        if (parameters.length) {
+            let enclosedElement = document.createElement("span");
+
+            if (parameters.length === 1 && !this._isStackTrace(parameters[0])) {
+                let parameter = parameters[0];
+
+                // Single object. Show a preview.
+                builderElement.append(enclosedElement);
+                enclosedElement.classList.add("console-message-preview-divider");
+                enclosedElement.textContent = " \u2013 ";
+
+                var previewContainer = builderElement.appendChild(document.createElement("span"));
+                previewContainer.classList.add("console-message-preview");
+
+                var preview = WebInspector.FormattedValue.createObjectPreviewOrFormattedValueForRemoteObject(parameter, WebInspector.ObjectPreviewView.Mode.Brief);
+                var isPreviewView = preview instanceof WebInspector.ObjectPreviewView;
+
+                if (isPreviewView)
+                    preview.setOriginatingObjectInfo(parameter, null);
+
+                var previewElement = isPreviewView ? preview.element : preview;
+                previewContainer.appendChild(previewElement);
+
+                // If this preview is effectively lossless, we can avoid making this console message expandable.
+                if ((isPreviewView && preview.lossless) || (!isPreviewView && this._shouldConsiderObjectLossless(parameter))) {
+                    this._extraParameters = null;
+                    enclosedElement.classList.add("inline-lossless");
+                    previewContainer.classList.add("inline-lossless");
+                }
+            } else {
+                // Multiple objects. Show an indicator.
+                builderElement.append(" ", enclosedElement);
+                enclosedElement.classList.add("console-message-enclosed");
+                enclosedElement.textContent = "(" + parameters.length + ")";
+            }
+        }
+    }
+
+    _isStackTrace(parameter)
+    {
+        console.assert(parameter instanceof WebInspector.RemoteObject);
+
+        if (WebInspector.RemoteObject.type(parameter) !== "string")
+            return false;
+
+        return WebInspector.StackTrace.isLikelyStackTrace(parameter.description);
+    }
+
+    _shouldConsiderObjectLossless(object)
+    {
+        if (object.type === "string") {
+            const description = object.description;
+            const maxLength = WebInspector.FormattedValue.MAX_PREVIEW_STRING_LENGTH;
+            const longOrMultiLineString = description.length > maxLength || description.slice(0, maxLength).includes("\n");
+            return !longOrMultiLineString;
+        }
+
+        return object.type !== "object" || object.subtype === "null" || object.subtype === "regexp";
+    }
+
+    _formatParameter(parameter, forceObjectFormat)
+    {
+        var type;
+        if (forceObjectFormat)
+            type = "object";
+        else if (parameter instanceof WebInspector.RemoteObject)
+            type = parameter.subtype || parameter.type;
+        else {
+            console.assert(false, "no longer reachable");
+            type = typeof parameter;
+        }
+
+        var formatters = {
+            "object": this._formatParameterAsObject,
+            "error": this._formatParameterAsError,
+            "map": this._formatParameterAsObject,
+            "set": this._formatParameterAsObject,
+            "weakmap": this._formatParameterAsObject,
+            "weakset": this._formatParameterAsObject,
+            "iterator": this._formatParameterAsObject,
+            "class": this._formatParameterAsObject,
+            "array": this._formatParameterAsArray,
+            "node": this._formatParameterAsNode,
+            "string": this._formatParameterAsString,
+        };
+
+        var formatter = formatters[type] || this._formatParameterAsValue;
+
+        const fragment = document.createDocumentFragment();
+        formatter.call(this, parameter, fragment, forceObjectFormat);
+        return fragment;
+    }
+
+    _formatParameterAsValue(value, fragment)
+    {
+        fragment.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(value));
+    }
+
+    _formatParameterAsString(object, fragment)
+    {
+        if (this._isStackTrace(object)) {
+            let stackTrace = WebInspector.StackTrace.fromString(object.description);
+            if (stackTrace.callFrames.length) {
+                let stackView = new WebInspector.StackTraceView(stackTrace);
+                fragment.appendChild(stackView.element);
+                return;
+            }
+        }
+
+        fragment.appendChild(WebInspector.FormattedValue.createLinkifiedElementString(object.description));
+    }
+
+    _formatParameterAsNode(object, fragment)
+    {
+        fragment.appendChild(WebInspector.FormattedValue.createElementForNode(object));
+    }
+
+    _formatParameterAsObject(object, fragment, forceExpansion)
+    {
+        // FIXME: Should have a better ObjectTreeView mode for classes (static methods and methods).
+        this._objectTree = new WebInspector.ObjectTreeView(object, null, this._rootPropertyPathForObject(object), forceExpansion);
+        fragment.appendChild(this._objectTree.element);
+    }
+
+    _formatParameterAsError(object, fragment)
+    {
+        this._objectTree = new WebInspector.ErrorObjectView(object);
+        fragment.appendChild(this._objectTree.element);
+    }
+
+    _formatParameterAsArray(array, fragment)
+    {
+        this._objectTree = new WebInspector.ObjectTreeView(array, WebInspector.ObjectTreeView.Mode.Properties, this._rootPropertyPathForObject(array));
+        fragment.appendChild(this._objectTree.element);
+    }
+
+    _rootPropertyPathForObject(object)
+    {
+        if (!this._message.savedResultIndex)
+            return null;
+
+        return new WebInspector.PropertyPath(object, "$" + this._message.savedResultIndex);
+    }
+
+    _formatWithSubstitutionString(parameters, formattedResult)
+    {
+        function parameterFormatter(force, obj)
+        {
+            return this._formatParameter(obj, force);
+        }
+
+        function stringFormatter(obj)
+        {
+            return obj.description;
+        }
+
+        function floatFormatter(obj)
+        {
+            if (typeof obj.value !== "number")
+                return parseFloat(obj.description);
+            return obj.value;
+        }
+
+        function integerFormatter(obj)
+        {
+            if (typeof obj.value !== "number")
+                return parseInt(obj.description);
+            return Math.floor(obj.value);
+        }
+
+        var currentStyle = null;
+        function styleFormatter(obj)
+        {
+            currentStyle = {};
+            var buffer = document.createElement("span");
+            buffer.setAttribute("style", obj.description);
+            for (var i = 0; i < buffer.style.length; i++) {
+                var property = buffer.style[i];
+                if (isWhitelistedProperty(property))
+                    currentStyle[property] = buffer.style[property];
+            }
+        }
+
+        function isWhitelistedProperty(property)
+        {
+            for (var prefix of ["background", "border", "color", "font", "line", "margin", "padding", "text"]) {
+                if (property.startsWith(prefix) || property.startsWith("-webkit-" + prefix))
+                    return true;
+            }
+            return false;
+        }
+
+        // Firebug uses %o for formatting objects.
+        var formatters = {};
+        formatters.o = parameterFormatter.bind(this, false);
+        formatters.s = stringFormatter;
+        formatters.f = floatFormatter;
+
+        // Firebug allows both %i and %d for formatting integers.
+        formatters.i = integerFormatter;
+        formatters.d = integerFormatter;
+
+        // Firebug uses %c for styling the message.
+        formatters.c = styleFormatter;
+
+        // Support %O to force object formatting, instead of the type-based %o formatting.
+        formatters.O = parameterFormatter.bind(this, true);
+
+        function append(a, b)
+        {
+            if (b instanceof Node)
+                a.appendChild(b);
+            else if (b !== undefined) {
+                var toAppend = WebInspector.linkifyStringAsFragment(b.toString());
+                if (currentStyle) {
+                    var wrapper = document.createElement("span");
+                    for (var key in currentStyle)
+                        wrapper.style[key] = currentStyle[key];
+                    wrapper.appendChild(toAppend);
+                    toAppend = wrapper;
+                }
+
+                a.appendChild(toAppend);
+            }
+            return a;
+        }
+
+        // String.format does treat formattedResult like a Builder, result is an object.
+        return String.format(parameters[0].description, parameters.slice(1), formatters, formattedResult, append);
+    }
+
+    _shouldShowStackTrace()
+    {
+        if (!this._message.stackTrace.callFrames.length)
+            return false;
+
+        return this._message.source === WebInspector.ConsoleMessage.MessageSource.Network
+            || this._message.level === WebInspector.ConsoleMessage.MessageLevel.Error
+            || this._message.type === WebInspector.ConsoleMessage.MessageType.Trace;
+    }
+
+    _shouldHideURL(url)
+    {
+        return url === "undefined" || url === "[native code]";
+    }
+
+    _linkifyLocation(url, lineNumber, columnNumber)
+    {
+        return WebInspector.linkifyLocation(url, lineNumber, columnNumber, "console-message-url");
+    }
+
+    _userProvidedColumnNames(columnNamesArgument)
+    {
+        if (!columnNamesArgument)
+            return null;
+
+        console.assert(columnNamesArgument instanceof WebInspector.RemoteObject);
+
+        // Single primitive argument.
+        if (columnNamesArgument.type === "string" || columnNamesArgument.type === "number")
+            return [String(columnNamesArgument.value)];
+
+        // Ignore everything that is not an array with property previews.
+        if (columnNamesArgument.type !== "object" || columnNamesArgument.subtype !== "array" || !columnNamesArgument.preview || !columnNamesArgument.preview.propertyPreviews)
+            return null;
+
+        // Array. Look into the preview and get string values.
+        var extractedColumnNames = [];
+        for (var propertyPreview of columnNamesArgument.preview.propertyPreviews) {
+            if (propertyPreview.type === "string" || propertyPreview.type === "number")
+                extractedColumnNames.push(String(propertyPreview.value));
+        }
+
+        return extractedColumnNames.length ? extractedColumnNames : null;
+    }
+
+    _formatParameterAsTable(parameters)
+    {
+        var element = document.createElement("span");
+        var table = parameters[0];
+        if (!table || !table.preview)
+            return element;
+
+        var rows = [];
+        var columnNames = [];
+        var flatValues = [];
+        var preview = table.preview;
+        var userProvidedColumnNames = false;
+
+        // User provided columnNames.
+        var extractedColumnNames = this._userProvidedColumnNames(parameters[1]);
+        if (extractedColumnNames) {
+            userProvidedColumnNames = true;
+            columnNames = extractedColumnNames;
+        }
+
+        // Check first for valuePreviews in the properties meaning this was an array of objects.
+        if (preview.propertyPreviews) {
+            for (var i = 0; i < preview.propertyPreviews.length; ++i) {
+                var rowProperty = preview.propertyPreviews[i];
+                var rowPreview = rowProperty.valuePreview;
+                if (!rowPreview)
+                    continue;
+
+                var rowValue = {};
+                var maxColumnsToRender = 10;
+                for (var j = 0; j < rowPreview.propertyPreviews.length; ++j) {
+                    var cellProperty = rowPreview.propertyPreviews[j];
+                    var columnRendered = columnNames.includes(cellProperty.name);
+                    if (!columnRendered) {
+                        if (userProvidedColumnNames || columnNames.length === maxColumnsToRender)
+                            continue;
+                        columnRendered = true;
+                        columnNames.push(cellProperty.name);
+                    }
+
+                    rowValue[cellProperty.name] = WebInspector.FormattedValue.createElementForPropertyPreview(cellProperty);
+                }
+                rows.push([rowProperty.name, rowValue]);
+            }
+        }
+
+        // If there were valuePreviews, convert to a flat list.
+        if (rows.length) {
+            columnNames.unshift(WebInspector.UIString("(Index)"));
+            for (var i = 0; i < rows.length; ++i) {
+                var rowName = rows[i][0];
+                var rowValue = rows[i][1];
+                flatValues.push(rowName);
+                for (var j = 1; j < columnNames.length; ++j) {
+                    var columnName = columnNames[j];
+                    if (!(columnName in rowValue))
+                        flatValues.push(emDash);
+                    else
+                        flatValues.push(rowValue[columnName]);
+                }
+            }
+        }
+
+        // If there were no value Previews, then check for an array of values.
+        if (!flatValues.length && preview.propertyPreviews) {
+            for (var i = 0; i < preview.propertyPreviews.length; ++i) {
+                var rowProperty = preview.propertyPreviews[i];
+                if (!("value" in rowProperty))
+                    continue;
+
+                if (!columnNames.length) {
+                    columnNames.push(WebInspector.UIString("Index"));
+                    columnNames.push(WebInspector.UIString("Value"));
+                }
+
+                flatValues.push(rowProperty.name);
+                flatValues.push(WebInspector.FormattedValue.createElementForPropertyPreview(rowProperty));
+            }
+        }
+
+        // If no table data show nothing.
+        if (!flatValues.length)
+            return element;
+
+        // FIXME: Should we output something extra if the preview is lossless?
+
+        var dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, flatValues);
+        dataGrid.element.classList.add("inline");
+        element.appendChild(dataGrid.element);
+
+        return element;
+    }
+
+    _levelString()
+    {
+        switch (this._message.level) {
+        case WebInspector.ConsoleMessage.MessageLevel.Log:
+            return "Log";
+        case WebInspector.ConsoleMessage.MessageLevel.Info:
+            return "Info";
+        case WebInspector.ConsoleMessage.MessageLevel.Warning:
+            return "Warning";
+        case WebInspector.ConsoleMessage.MessageLevel.Debug:
+            return "Debug";
+        case WebInspector.ConsoleMessage.MessageLevel.Error:
+            return "Error";
+        }
+    }
+
+    _enforcesClipboardPrefixString()
+    {
+        return this._message.type !== WebInspector.ConsoleMessage.MessageType.Result;
+    }
+
+    _clipboardPrefixString()
+    {
+        if (this._message.type === WebInspector.ConsoleMessage.MessageType.Result)
+            return "< ";
+
+        return "[" + this._levelString() + "] ";
+    }
+
+    _makeExpandable()
+    {
+        if (this._expandable)
+            return;
+
+        this._expandable = true;
+
+        this._element.classList.add("expandable");
+
+        this._boundClickHandler = this.toggle.bind(this);
+        this._messageTextElement.addEventListener("click", this._boundClickHandler);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/ConsolePrompt.css b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
index 7466d0a34..7466d0a34 100644
--- a/Source/WebInspectorUI/UserInterface/ConsolePrompt.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js
new file mode 100644
index 000000000..2010f9b03
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsolePrompt.js
@@ -0,0 +1,330 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsolePrompt = class ConsolePrompt extends WebInspector.View
+{
+    constructor(delegate, mimeType)
+    {
+        super();
+
+        mimeType = parseMIMEType(mimeType).type;
+
+        this.element.classList.add("console-prompt", WebInspector.SyntaxHighlightedStyleClassName);
+
+        this._delegate = delegate || null;
+
+        this._codeMirror = WebInspector.CodeMirrorEditor.create(this.element, {
+            lineWrapping: true,
+            mode: mimeType,
+            indentWithTabs: true,
+            indentUnit: 4,
+            matchBrackets: true
+        });
+
+        var keyMap = {
+            "Up": this._handlePreviousKey.bind(this),
+            "Down": this._handleNextKey.bind(this),
+            "Ctrl-P": this._handlePreviousKey.bind(this),
+            "Ctrl-N": this._handleNextKey.bind(this),
+            "Enter": this._handleEnterKey.bind(this),
+            "Cmd-Enter": this._handleCommandEnterKey.bind(this),
+            "Tab": this._handleTabKey.bind(this),
+            "Esc": this._handleEscapeKey.bind(this)
+        };
+
+        this._codeMirror.addKeyMap(keyMap);
+
+        this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
+        this._completionController.addExtendedCompletionProvider("javascript", WebInspector.javaScriptRuntimeCompletionProvider);
+
+        this._history = [{}];
+        this._historyIndex = 0;
+    }
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    set delegate(delegate)
+    {
+        this._delegate = delegate || null;
+    }
+
+    set escapeKeyHandlerWhenEmpty(handler)
+    {
+        this._escapeKeyHandlerWhenEmpty = handler;
+    }
+
+    get text()
+    {
+        return this._codeMirror.getValue();
+    }
+
+    set text(text)
+    {
+        this._codeMirror.setValue(text || "");
+        this._codeMirror.clearHistory();
+        this._codeMirror.markClean();
+    }
+
+    get history()
+    {
+        this._history[this._historyIndex] = this._historyEntryForCurrentText();
+        return this._history;
+    }
+
+    set history(history)
+    {
+        this._history = history instanceof Array ? history.slice(0, WebInspector.ConsolePrompt.MaximumHistorySize) : [{}];
+        this._historyIndex = 0;
+        this._restoreHistoryEntry(0);
+    }
+
+    get focused()
+    {
+        return this._codeMirror.getWrapperElement().classList.contains("CodeMirror-focused");
+    }
+
+    focus()
+    {
+        this._codeMirror.focus();
+    }
+
+    shown()
+    {
+        this._codeMirror.refresh();
+    }
+
+    updateCompletions(completions, implicitSuffix)
+    {
+        this._completionController.updateCompletions(completions, implicitSuffix);
+    }
+
+    pushHistoryItem(text)
+    {
+        this._commitHistoryEntry({text});
+    }
+
+    // Protected
+
+    completionControllerCompletionsNeeded(completionController, prefix, defaultCompletions, base, suffix, forced)
+    {
+        if (this.delegate && typeof this.delegate.consolePromptCompletionsNeeded === "function")
+            this.delegate.consolePromptCompletionsNeeded(this, defaultCompletions, base, prefix, suffix, forced);
+        else
+            this._completionController.updateCompletions(defaultCompletions);
+    }
+
+    completionControllerShouldAllowEscapeCompletion(completionController)
+    {
+        // Only allow escape to complete if there is text in the prompt. Otherwise allow it to pass through
+        // so escape to toggle the quick console still works.
+        return !!this.text;
+    }
+
+    layout()
+    {
+        this._codeMirror.refresh();
+    }
+
+    // Private
+
+    _handleTabKey(codeMirror)
+    {
+        var cursor = codeMirror.getCursor();
+        var line = codeMirror.getLine(cursor.line);
+
+        if (!line.trim().length)
+            return CodeMirror.Pass;
+
+        var firstNonSpace = line.search(/[^\s]/);
+
+        if (cursor.ch <= firstNonSpace)
+            return CodeMirror.Pass;
+
+        this._completionController.completeAtCurrentPositionIfNeeded().then(function(result) {
+            if (result === WebInspector.CodeMirrorCompletionController.UpdatePromise.NoCompletionsFound)
+                InspectorFrontendHost.beep();
+        });
+    }
+
+    _handleEscapeKey(codeMirror)
+    {
+        if (this.text)
+            return CodeMirror.Pass;
+
+        if (!this._escapeKeyHandlerWhenEmpty)
+            return CodeMirror.Pass;
+
+        this._escapeKeyHandlerWhenEmpty();
+    }
+
+    _handlePreviousKey(codeMirror)
+    {
+        if (this._codeMirror.somethingSelected())
+            return CodeMirror.Pass;
+
+        // Pass unless we are on the first line.
+        if (this._codeMirror.getCursor().line)
+            return CodeMirror.Pass;
+
+        var historyEntry = this._history[this._historyIndex + 1];
+        if (!historyEntry)
+            return CodeMirror.Pass;
+
+        this._rememberCurrentTextInHistory();
+
+        ++this._historyIndex;
+
+        this._restoreHistoryEntry(this._historyIndex);
+    }
+
+    _handleNextKey(codeMirror)
+    {
+        if (this._codeMirror.somethingSelected())
+            return CodeMirror.Pass;
+
+        // Pass unless we are on the last line.
+        if (this._codeMirror.getCursor().line !== this._codeMirror.lastLine())
+            return CodeMirror.Pass;
+
+        var historyEntry = this._history[this._historyIndex - 1];
+        if (!historyEntry)
+            return CodeMirror.Pass;
+
+        this._rememberCurrentTextInHistory();
+
+        --this._historyIndex;
+
+        this._restoreHistoryEntry(this._historyIndex);
+    }
+
+    _handleEnterKey(codeMirror, forceCommit, keepCurrentText)
+    {
+        var currentText = this.text;
+
+        // Always do nothing when there is just whitespace.
+        if (!currentText.trim())
+            return;
+
+        var cursor = this._codeMirror.getCursor();
+        var lastLine = this._codeMirror.lastLine();
+        var lastLineLength = this._codeMirror.getLine(lastLine).length;
+        var cursorIsAtLastPosition = positionsEqual(cursor, {line: lastLine, ch: lastLineLength});
+
+        function positionsEqual(a, b)
+        {
+            console.assert(a);
+            console.assert(b);
+            return a.line === b.line && a.ch === b.ch;
+        }
+
+        function commitTextOrInsertNewLine(commit)
+        {
+            if (!commit) {
+                // Only insert a new line if the previous cursor and the current cursor are in the same position.
+                if (positionsEqual(cursor, this._codeMirror.getCursor()))
+                    CodeMirror.commands.newlineAndIndent(this._codeMirror);
+                return;
+            }
+
+            this._commitHistoryEntry(this._historyEntryForCurrentText());
+
+            if (!keepCurrentText) {
+                this._codeMirror.setValue("");
+                this._codeMirror.clearHistory();
+            }
+
+            if (this.delegate && typeof this.delegate.consolePromptHistoryDidChange === "function")
+                this.delegate.consolePromptHistoryDidChange(this);
+
+            if (this.delegate && typeof this.delegate.consolePromptTextCommitted === "function")
+                this.delegate.consolePromptTextCommitted(this, currentText);
+        }
+
+        if (!forceCommit && this.delegate && typeof this.delegate.consolePromptShouldCommitText === "function") {
+            this.delegate.consolePromptShouldCommitText(this, currentText, cursorIsAtLastPosition, commitTextOrInsertNewLine.bind(this));
+            return;
+        }
+
+        commitTextOrInsertNewLine.call(this, true);
+    }
+
+    _commitHistoryEntry(historyEntry)
+    {
+        // Replace the previous entry if it does not have text or if the text is the same.
+        if (this._history[1] && (!this._history[1].text || this._history[1].text === historyEntry.text)) {
+            this._history[1] = historyEntry;
+            this._history[0] = {};
+        } else {
+            // Replace the first history entry and push a new empty one.
+            this._history[0] = historyEntry;
+            this._history.unshift({});
+
+            // Trim the history length if needed.
+            if (this._history.length > WebInspector.ConsolePrompt.MaximumHistorySize)
+                this._history = this._history.slice(0, WebInspector.ConsolePrompt.MaximumHistorySize);
+        }
+
+        this._historyIndex = 0;
+    }
+
+    _handleCommandEnterKey(codeMirror)
+    {
+        this._handleEnterKey(codeMirror, true, true);
+    }
+
+    _restoreHistoryEntry(index)
+    {
+        var historyEntry = this._history[index];
+
+        this._codeMirror.setValue(historyEntry.text || "");
+
+        if (historyEntry.undoHistory)
+            this._codeMirror.setHistory(historyEntry.undoHistory);
+        else
+            this._codeMirror.clearHistory();
+
+        this._codeMirror.setCursor(historyEntry.cursor || {line: 0});
+    }
+
+    _historyEntryForCurrentText()
+    {
+        return {text: this.text, undoHistory: this._codeMirror.getHistory(), cursor: this._codeMirror.getCursor()};
+    }
+
+    _rememberCurrentTextInHistory()
+    {
+        this._history[this._historyIndex] = this._historyEntryForCurrentText();
+
+        if (this.delegate && typeof this.delegate.consolePromptHistoryDidChange === "function")
+            this.delegate.consolePromptHistoryDidChange(this);
+    }
+};
+
+WebInspector.ConsolePrompt.MaximumHistorySize = 30;
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleSession.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleSession.js
new file mode 100644
index 000000000..2ed00c981
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleSession.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2015 Apple Inc.  All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleSession = class ConsoleSession extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        var element = document.createElement("div");
+        element.className = "console-session";
+        this.element = element;
+        this._messagesElement = element;
+    }
+
+    // Public
+
+    addMessageView(messageView)
+    {
+        var messageElement = messageView.element;
+        messageElement.classList.add(WebInspector.LogContentView.ItemWrapperStyleClassName);
+        this._messagesElement.appendChild(messageElement);
+    }
+
+    append(messageOrGroupElement)
+    {
+        this._messagesElement.appendChild(messageOrGroupElement);
+    }
+
+    hasMessages()
+    {
+        return !!this._messagesElement.childNodes.length;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js
new file mode 100644
index 000000000..d9cd029f8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ConsoleTabContentView.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ConsoleTabContentView = class ConsoleTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.ConsoleTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+
+        super(identifier || "console", "console", tabBarItem, null, null, true);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Console.svg",
+            title: WebInspector.UIString("Console"),
+        };
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.ConsoleTabContentView.Type;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        WebInspector.consoleContentView.prompt.focus();
+
+        if (this.contentBrowser.currentContentView === WebInspector.consoleContentView)
+            return;
+
+        // Be sure to close the view in the split content browser before showing it in the
+        // tab content browser. We can only show a content view in one browser at a time.
+        if (WebInspector.consoleContentView.parentContainer)
+            WebInspector.consoleContentView.parentContainer.closeContentView(WebInspector.consoleContentView);
+
+        this.contentBrowser.showContentView(WebInspector.consoleContentView);
+
+        console.assert(this.contentBrowser.currentContentView === WebInspector.consoleContentView);
+    }
+
+    showRepresentedObject(representedObject, cookie)
+    {
+        // Do nothing. The shown function will handle things. Calling
+        // ContentBrowserTabContentView.shown will cause a new LogContentView
+        // to be created instead of reusing WebInspector.consoleContentView.
+        console.assert(representedObject instanceof WebInspector.LogObject);
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.LogObject;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        return false;
+    }
+};
+
+WebInspector.ConsoleTabContentView.Type = "console";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.css b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.css
new file mode 100644
index 000000000..67429acc4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-browser {
+    display: flex;
+    flex-direction: column;
+}
+
+.content-browser > .content-view-container {
+    display: flex;
+    flex: 1;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
new file mode 100644
index 000000000..0125b445a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowser.js
@@ -0,0 +1,499 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentBrowser = class ContentBrowser extends WebInspector.View
+{
+    constructor(element, delegate, disableBackForward)
+    {
+        super(element);
+
+        this.element.classList.add("content-browser");
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.addSubview(this._navigationBar);
+
+        this._contentViewContainer = new WebInspector.ContentViewContainer;
+        this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+        this.addSubview(this._contentViewContainer);
+
+        this._findBanner = new WebInspector.FindBanner(this);
+        this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidShow, this._findBannerDidShow, this);
+        this._findBanner.addEventListener(WebInspector.FindBanner.Event.DidHide, this._findBannerDidHide, this);
+
+        if (!disableBackForward) {
+            this._backKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Left, this._backButtonClicked.bind(this), this.element);
+            this._forwardKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Right, this._forwardButtonClicked.bind(this), this.element);
+
+            this._backButtonNavigationItem = new WebInspector.ButtonNavigationItem("back", WebInspector.UIString("Back (%s)").format(this._backKeyboardShortcut.displayName), "Images/BackForwardArrows.svg#back-arrow-mask", 8, 13);
+            this._backButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._backButtonClicked, this);
+            this._backButtonNavigationItem.enabled = false;
+            this._navigationBar.addNavigationItem(this._backButtonNavigationItem);
+
+            this._forwardButtonNavigationItem = new WebInspector.ButtonNavigationItem("forward", WebInspector.UIString("Forward (%s)").format(this._forwardKeyboardShortcut.displayName), "Images/BackForwardArrows.svg#forward-arrow-mask", 8, 13);
+            this._forwardButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._forwardButtonClicked, this);
+            this._forwardButtonNavigationItem.enabled = false;
+            this._navigationBar.addNavigationItem(this._forwardButtonNavigationItem);
+
+            this._navigationBar.addNavigationItem(new WebInspector.DividerNavigationItem);
+        }
+
+        this._hierarchicalPathNavigationItem = new WebInspector.HierarchicalPathNavigationItem;
+        this._hierarchicalPathNavigationItem.addEventListener(WebInspector.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, this._hierarchicalPathComponentWasSelected, this);
+        this._navigationBar.addNavigationItem(this._hierarchicalPathNavigationItem);
+
+        this._contentViewSelectionPathNavigationItem = new WebInspector.HierarchicalPathNavigationItem;
+
+        this._dividingFlexibleSpaceNavigationItem = new WebInspector.FlexibleSpaceNavigationItem;
+        this._navigationBar.addNavigationItem(this._dividingFlexibleSpaceNavigationItem);
+
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange, this._contentViewNumberOfSearchResultsDidChange, this);
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._contentViewNavigationItemsDidChange, this);
+
+        this._delegate = delegate || null;
+
+        this._currentContentViewNavigationItems = [];
+    }
+
+    // Public
+
+    get navigationBar()
+    {
+        return this._navigationBar;
+    }
+
+    get contentViewContainer()
+    {
+        return this._contentViewContainer;
+    }
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    set delegate(newDelegate)
+    {
+        this._delegate = newDelegate || null;
+    }
+
+    get currentContentView()
+    {
+        return this._contentViewContainer.currentContentView;
+    }
+
+    get currentRepresentedObjects()
+    {
+        var representedObjects = [];
+
+        var lastComponent = this._hierarchicalPathNavigationItem.lastComponent;
+        if (lastComponent && lastComponent.representedObject)
+            representedObjects.push(lastComponent.representedObject);
+
+        lastComponent = this._contentViewSelectionPathNavigationItem.lastComponent;
+        if (lastComponent && lastComponent.representedObject)
+            representedObjects.push(lastComponent.representedObject);
+
+        var currentContentView = this.currentContentView;
+        if (currentContentView) {
+            var supplementalRepresentedObjects = currentContentView.supplementalRepresentedObjects;
+            if (supplementalRepresentedObjects && supplementalRepresentedObjects.length)
+                representedObjects = representedObjects.concat(supplementalRepresentedObjects);
+        }
+
+        return representedObjects;
+    }
+
+    showContentViewForRepresentedObject(representedObject, cookie, extraArguments)
+    {
+        var contentView = this.contentViewForRepresentedObject(representedObject, false, extraArguments);
+        return this._contentViewContainer.showContentView(contentView, cookie);
+    }
+
+    showContentView(contentView, cookie)
+    {
+        return this._contentViewContainer.showContentView(contentView, cookie);
+    }
+
+    contentViewForRepresentedObject(representedObject, onlyExisting, extraArguments)
+    {
+        return this._contentViewContainer.contentViewForRepresentedObject(representedObject, onlyExisting, extraArguments);
+    }
+
+    updateHierarchicalPathForCurrentContentView()
+    {
+        var currentContentView = this.currentContentView;
+        this._updateHierarchicalPathNavigationItem(currentContentView ? currentContentView.representedObject : null);
+    }
+
+    canGoBack()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoBack())
+            return true;
+        return this._contentViewContainer.canGoBack();
+    }
+
+    canGoForward()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoForward())
+            return true;
+        return this._contentViewContainer.canGoForward();
+    }
+
+    goBack()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoBack()) {
+            currentContentView.goBack();
+            this._updateBackForwardButtons();
+            return;
+        }
+
+        this._contentViewContainer.goBack();
+
+        // The _updateBackForwardButtons function is called by _currentContentViewDidChange,
+        // so it does not need to be called here.
+    }
+
+    goForward()
+    {
+        var currentContentView = this.currentContentView;
+        if (currentContentView && currentContentView.canGoForward()) {
+            currentContentView.goForward();
+            this._updateBackForwardButtons();
+            return;
+        }
+
+        this._contentViewContainer.goForward();
+
+        // The _updateBackForwardButtons function is called by _currentContentViewDidChange,
+        // so it does not need to be called here.
+    }
+
+    handleFindEvent(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        // LogContentView has custom search handling.
+        if (typeof currentContentView.handleFindEvent === "function") {
+            currentContentView.handleFindEvent(event);
+            return;
+        }
+
+        this._findBanner.show();
+    }
+
+    findBannerPerformSearch(findBanner, query)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.performSearch(query);
+    }
+
+    findBannerSearchCleared(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.searchCleared();
+    }
+
+    findBannerSearchQueryForSelection(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return null;
+
+        return currentContentView.searchQueryWithSelection();
+    }
+
+    findBannerRevealPreviousResult(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.revealPreviousSearchResult(!findBanner.showing);
+    }
+
+    findBannerRevealNextResult(findBanner)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.revealNextSearchResult(!findBanner.showing);
+    }
+
+    shown()
+    {
+        this._contentViewContainer.shown();
+
+        this._findBanner.enableKeyboardShortcuts();
+    }
+
+    hidden()
+    {
+        this._contentViewContainer.hidden();
+
+        this._findBanner.disableKeyboardShortcuts();
+    }
+
+    // Private
+
+    _backButtonClicked(event)
+    {
+        this.goBack();
+    }
+
+    _forwardButtonClicked(event)
+    {
+        this.goForward();
+    }
+
+    _findBannerDidShow(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.automaticallyRevealFirstSearchResult = true;
+    }
+
+    _findBannerDidHide(event)
+    {
+        var currentContentView = this.currentContentView;
+        if (!currentContentView || !currentContentView.supportsSearch)
+            return;
+
+        currentContentView.automaticallyRevealFirstSearchResult = false;
+    }
+
+    _contentViewNumberOfSearchResultsDidChange(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._findBanner.numberOfResults = this.currentContentView.numberOfSearchResults;
+    }
+
+    _updateHierarchicalPathNavigationItem(representedObject)
+    {
+        if (!this.delegate || typeof this.delegate.contentBrowserTreeElementForRepresentedObject !== "function")
+            return;
+
+        var treeElement = representedObject ? this.delegate.contentBrowserTreeElementForRepresentedObject(this, representedObject) : null;
+        var pathComponents = [];
+
+        while (treeElement && !treeElement.root) {
+            var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
+            pathComponents.unshift(pathComponent);
+            treeElement = treeElement.parent;
+        }
+
+        this._hierarchicalPathNavigationItem.components = pathComponents;
+    }
+
+    _updateContentViewSelectionPathNavigationItem(contentView)
+    {
+        var selectionPathComponents = contentView ? contentView.selectionPathComponents || [] : [];
+        this._contentViewSelectionPathNavigationItem.components = selectionPathComponents;
+
+        if (!selectionPathComponents.length) {
+            this._hierarchicalPathNavigationItem.alwaysShowLastPathComponentSeparator = false;
+            this._navigationBar.removeNavigationItem(this._contentViewSelectionPathNavigationItem);
+            return;
+        }
+
+        // Insert the _contentViewSelectionPathNavigationItem after the _hierarchicalPathNavigationItem, if needed.
+        if (!this._navigationBar.navigationItems.includes(this._contentViewSelectionPathNavigationItem)) {
+            var hierarchicalPathItemIndex = this._navigationBar.navigationItems.indexOf(this._hierarchicalPathNavigationItem);
+            console.assert(hierarchicalPathItemIndex !== -1);
+            this._navigationBar.insertNavigationItem(this._contentViewSelectionPathNavigationItem, hierarchicalPathItemIndex + 1);
+            this._hierarchicalPathNavigationItem.alwaysShowLastPathComponentSeparator = true;
+        }
+    }
+
+    _updateBackForwardButtons()
+    {
+        if (!this._backButtonNavigationItem || !this._forwardButtonNavigationItem)
+            return;
+
+        this._backButtonNavigationItem.enabled = this.canGoBack();
+        this._forwardButtonNavigationItem.enabled = this.canGoForward();
+    }
+
+    _updateContentViewNavigationItems()
+    {
+        var navigationBar = this.navigationBar;
+
+        // First, we remove the navigation items added by the previous content view.
+        this._currentContentViewNavigationItems.forEach(function(navigationItem) {
+            navigationBar.removeNavigationItem(navigationItem);
+        });
+
+        var currentContentView = this.currentContentView;
+        if (!currentContentView) {
+            this._currentContentViewNavigationItems = [];
+            return;
+        }
+
+        var insertionIndex = navigationBar.navigationItems.indexOf(this._dividingFlexibleSpaceNavigationItem) + 1;
+        console.assert(insertionIndex >= 0);
+
+        // Keep track of items we'll be adding to the navigation bar.
+        var newNavigationItems = [];
+
+        // Go through each of the items of the new content view and add a divider before them.
+        currentContentView.navigationItems.forEach(function(navigationItem, index) {
+            // Add dividers before items unless it's the first item and not a button.
+            if (index !== 0 || navigationItem instanceof WebInspector.ButtonNavigationItem) {
+                var divider = new WebInspector.DividerNavigationItem;
+                navigationBar.insertNavigationItem(divider, insertionIndex++);
+                newNavigationItems.push(divider);
+            }
+            navigationBar.insertNavigationItem(navigationItem, insertionIndex++);
+            newNavigationItems.push(navigationItem);
+        });
+
+        // Remember the navigation items we inserted so we can remove them
+        // for the next content view.
+        this._currentContentViewNavigationItems = newNavigationItems;
+    }
+
+    _updateFindBanner(currentContentView)
+    {
+        if (!currentContentView) {
+            this._findBanner.targetElement = null;
+            this._findBanner.numberOfResults = null;
+            return;
+        }
+
+        this._findBanner.targetElement = currentContentView.element;
+        this._findBanner.numberOfResults = currentContentView.hasPerformedSearch ? currentContentView.numberOfSearchResults : null;
+
+        if (currentContentView.supportsSearch && this._findBanner.searchQuery) {
+            currentContentView.automaticallyRevealFirstSearchResult = this._findBanner.showing;
+            currentContentView.performSearch(this._findBanner.searchQuery);
+        }
+    }
+
+    _dispatchCurrentRepresentedObjectsDidChangeEventSoon()
+    {
+        if (this._currentRepresentedObjectsDidChangeTimeout)
+            return;
+        this._currentRepresentedObjectsDidChangeTimeout = setTimeout(this._dispatchCurrentRepresentedObjectsDidChangeEvent.bind(this), 0);
+    }
+
+    _dispatchCurrentRepresentedObjectsDidChangeEvent()
+    {
+        if (this._currentRepresentedObjectsDidChangeTimeout) {
+            clearTimeout(this._currentRepresentedObjectsDidChangeTimeout);
+            delete this._currentRepresentedObjectsDidChangeTimeout;
+        }
+
+        this.dispatchEventToListeners(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange);
+    }
+
+    _contentViewSelectionPathComponentDidChange(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._updateContentViewSelectionPathNavigationItem(event.target);
+        this._updateBackForwardButtons();
+
+        this._updateContentViewNavigationItems();
+
+        this._navigationBar.needsLayout();
+
+        this._dispatchCurrentRepresentedObjectsDidChangeEventSoon();
+    }
+
+    _contentViewSupplementalRepresentedObjectsDidChange(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._dispatchCurrentRepresentedObjectsDidChangeEventSoon();
+    }
+
+    _currentContentViewDidChange(event)
+    {
+        var currentContentView = this.currentContentView;
+
+        this._updateHierarchicalPathNavigationItem(currentContentView ? currentContentView.representedObject : null);
+        this._updateContentViewSelectionPathNavigationItem(currentContentView);
+        this._updateBackForwardButtons();
+
+        this._updateContentViewNavigationItems();
+        this._updateFindBanner(currentContentView);
+
+        this._navigationBar.needsLayout();
+
+        this.dispatchEventToListeners(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange);
+
+        this._dispatchCurrentRepresentedObjectsDidChangeEvent();
+    }
+
+    _contentViewNavigationItemsDidChange(event)
+    {
+        if (event.target !== this.currentContentView)
+            return;
+
+        this._updateContentViewNavigationItems();
+        this._navigationBar.needsLayout();
+    }
+
+    _hierarchicalPathComponentWasSelected(event)
+    {
+        console.assert(event.data.pathComponent instanceof WebInspector.GeneralTreeElementPathComponent);
+
+        var treeElement = event.data.pathComponent.generalTreeElement;
+        var originalTreeElement = treeElement;
+
+        // Some tree elements (like folders) are not viewable. Find the first descendant that is viewable.
+        while (treeElement && !WebInspector.ContentView.isViewable(treeElement.representedObject))
+            treeElement = treeElement.traverseNextTreeElement(false, originalTreeElement, false);
+
+        if (!treeElement)
+            return;
+
+        treeElement.revealAndSelect();
+    }
+};
+
+WebInspector.ContentBrowser.Event = {
+    CurrentRepresentedObjectsDidChange: "content-browser-current-represented-objects-did-change",
+    CurrentContentViewDidChange: "content-browser-current-content-view-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.css
new file mode 100644
index 000000000..ae9c6b3c0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-browser.tab.content-view > .content-browser {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js
new file mode 100644
index 000000000..5997cb07e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentBrowserTabContentView.js
@@ -0,0 +1,261 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentBrowserTabContentView = class ContentBrowserTabContentView extends WebInspector.TabContentView
+{
+    constructor(identifier, styleClassNames, tabBarItem, navigationSidebarPanelClass, detailsSidebarPanels, disableBackForward)
+    {
+        if (typeof styleClassNames === "string")
+            styleClassNames = [styleClassNames];
+
+        styleClassNames.push("content-browser");
+
+        var contentBrowser = new WebInspector.ContentBrowser(null, null, disableBackForward);
+        var navigationSidebarPanel = navigationSidebarPanelClass ? new navigationSidebarPanelClass(contentBrowser) : null;
+
+        super(identifier, styleClassNames, tabBarItem, navigationSidebarPanel, detailsSidebarPanels);
+
+        this._contentBrowser = contentBrowser;
+        this._contentBrowser.delegate = this;
+
+        this._lastSelectedDetailsSidebarPanelSetting = new WebInspector.Setting(identifier + "-last-selected-details-sidebar-panel", null);
+
+        this._contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentRepresentedObjectsDidChange, this.showDetailsSidebarPanels, this);
+        this._contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
+
+        // If any content views were shown during sidebar construction, contentBrowserTreeElementForRepresentedObject() would have returned null.
+        // Explicitly update the path for the navigation bar to prevent it from showing up as blank.
+        this._contentBrowser.updateHierarchicalPathForCurrentContentView();
+
+        if (navigationSidebarPanel) {
+            var showToolTip = WebInspector.UIString("Show the navigation sidebar (%s)").format(WebInspector.navigationSidebarKeyboardShortcut.displayName);
+            var hideToolTip = WebInspector.UIString("Hide the navigation sidebar (%s)").format(WebInspector.navigationSidebarKeyboardShortcut.displayName);
+
+            this._showNavigationSidebarItem = new WebInspector.ActivateButtonNavigationItem("toggle-navigation-sidebar", showToolTip, hideToolTip, "Images/ToggleLeftSidebar.svg", 16, 16);
+            this._showNavigationSidebarItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, WebInspector.toggleNavigationSidebar, WebInspector);
+            this._showNavigationSidebarItem.activated = !WebInspector.navigationSidebar.collapsed;
+
+            this._contentBrowser.navigationBar.insertNavigationItem(this._showNavigationSidebarItem, 0);
+            this._contentBrowser.navigationBar.insertNavigationItem(new WebInspector.DividerNavigationItem, 1);
+
+            navigationSidebarPanel.contentBrowser = this._contentBrowser;
+
+            WebInspector.navigationSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._navigationSidebarCollapsedStateDidChange, this);
+        }
+
+        if (detailsSidebarPanels && detailsSidebarPanels.length) {
+            var showToolTip = WebInspector.UIString("Show the details sidebar (%s)").format(WebInspector.detailsSidebarKeyboardShortcut.displayName);
+            var hideToolTip = WebInspector.UIString("Hide the details sidebar (%s)").format(WebInspector.detailsSidebarKeyboardShortcut.displayName);
+
+            this._showDetailsSidebarItem = new WebInspector.ActivateButtonNavigationItem("toggle-details-sidebar", showToolTip, hideToolTip, "Images/ToggleRightSidebar.svg", 16, 16);
+            this._showDetailsSidebarItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, WebInspector.toggleDetailsSidebar, WebInspector);
+            this._showDetailsSidebarItem.activated = !WebInspector.detailsSidebar.collapsed;
+            this._showDetailsSidebarItem.enabled = false;
+
+            this._contentBrowser.navigationBar.addNavigationItem(new WebInspector.DividerNavigationItem);
+            this._contentBrowser.navigationBar.addNavigationItem(this._showDetailsSidebarItem);
+
+            WebInspector.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._detailsSidebarCollapsedStateDidChange, this);
+            WebInspector.detailsSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._detailsSidebarPanelSelected, this);
+        }
+
+        this.addSubview(this._contentBrowser);
+    }
+
+    // Public
+
+    get contentBrowser()
+    {
+        return this._contentBrowser;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._contentBrowser.shown();
+
+        if (this.navigationSidebarPanel && !this._contentBrowser.currentContentView)
+            this.navigationSidebarPanel.showDefaultContentView();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._contentBrowser.hidden();
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.navigationSidebar.removeEventListener(null, null, this);
+        WebInspector.detailsSidebar.removeEventListener(null, null, this);
+
+        if (this.navigationSidebarPanel && typeof this.navigationSidebarPanel.closed === "function")
+            this.navigationSidebarPanel.closed();
+
+        this._contentBrowser.contentViewContainer.closeAllContentViews();
+    }
+
+    get managesDetailsSidebarPanels()
+    {
+        return true;
+    }
+
+    showDetailsSidebarPanels()
+    {
+        if (!this.visible)
+            return;
+
+        var currentRepresentedObjects = this._contentBrowser.currentRepresentedObjects;
+        var currentSidebarPanels = WebInspector.detailsSidebar.sidebarPanels;
+        var wasSidebarEmpty = !currentSidebarPanels.length;
+
+        // Ignore any changes to the selected sidebar panel during this function so only user initiated
+        // changes are recorded in _lastSelectedDetailsSidebarPanelSetting.
+        this._ignoreDetailsSidebarPanelSelectedEvent = true;
+        this._ignoreDetailsSidebarPanelCollapsedEvent = true;
+
+        for (var i = 0; i < this.detailsSidebarPanels.length; ++i) {
+            var sidebarPanel = this.detailsSidebarPanels[i];
+            if (sidebarPanel.inspect(currentRepresentedObjects)) {
+                if (currentSidebarPanels.includes(sidebarPanel)) {
+                    // Already showing the panel.
+                    continue;
+                }
+
+                // The sidebar panel was not previously showing, so add the panel.
+                WebInspector.detailsSidebar.addSidebarPanel(sidebarPanel);
+
+                if (this._lastSelectedDetailsSidebarPanelSetting.value === sidebarPanel.identifier) {
+                    // Restore the sidebar panel selection if this sidebar panel was the last one selected by the user.
+                    WebInspector.detailsSidebar.selectedSidebarPanel = sidebarPanel;
+                }
+            } else {
+                // The sidebar panel can't inspect the current represented objects, so remove the panel and hide the toolbar item.
+                WebInspector.detailsSidebar.removeSidebarPanel(sidebarPanel);
+            }
+        }
+
+        if (!WebInspector.detailsSidebar.selectedSidebarPanel && currentSidebarPanels.length)
+            WebInspector.detailsSidebar.selectedSidebarPanel = currentSidebarPanels[0];
+
+        if (!WebInspector.detailsSidebar.sidebarPanels.length)
+            WebInspector.detailsSidebar.collapsed = true;
+        else if (wasSidebarEmpty)
+            WebInspector.detailsSidebar.collapsed = this.detailsSidebarCollapsedSetting.value;
+
+        this._ignoreDetailsSidebarPanelCollapsedEvent = false;
+        this._ignoreDetailsSidebarPanelSelectedEvent = false;
+
+        if (!this.detailsSidebarPanels.length)
+            return;
+
+        this._showDetailsSidebarItem.enabled = WebInspector.detailsSidebar.sidebarPanels.length;
+    }
+
+    showRepresentedObject(representedObject, cookie)
+    {
+        if (this.navigationSidebarPanel)
+            this.navigationSidebarPanel.cancelRestoringState();
+        this.contentBrowser.showContentViewForRepresentedObject(representedObject, cookie);
+    }
+
+    // ContentBrowser Delegate
+
+    contentBrowserTreeElementForRepresentedObject(contentBrowser, representedObject)
+    {
+        if (this.navigationSidebarPanel)
+            return this.navigationSidebarPanel.treeElementForRepresentedObject(representedObject);
+        return null;
+    }
+
+    // Private
+
+    _navigationSidebarCollapsedStateDidChange(event)
+    {
+        this._showNavigationSidebarItem.activated = !WebInspector.navigationSidebar.collapsed;
+    }
+
+    _detailsSidebarCollapsedStateDidChange(event)
+    {
+        if (!this.visible)
+            return;
+
+        this._showDetailsSidebarItem.activated = !WebInspector.detailsSidebar.collapsed;
+        this._showDetailsSidebarItem.enabled = WebInspector.detailsSidebar.sidebarPanels.length;
+
+        if (this._ignoreDetailsSidebarPanelCollapsedEvent)
+            return;
+
+        this.detailsSidebarCollapsedSetting.value = WebInspector.detailsSidebar.collapsed;
+    }
+
+    _detailsSidebarPanelSelected(event)
+    {
+        if (!this.visible)
+            return;
+
+        this._showDetailsSidebarItem.activated = !WebInspector.detailsSidebar.collapsed;
+        this._showDetailsSidebarItem.enabled = WebInspector.detailsSidebar.sidebarPanels.length;
+
+        if (!WebInspector.detailsSidebar.selectedSidebarPanel || this._ignoreDetailsSidebarPanelSelectedEvent)
+            return;
+
+        this._lastSelectedDetailsSidebarPanelSetting.value = WebInspector.detailsSidebar.selectedSidebarPanel.identifier;
+    }
+
+    _contentBrowserCurrentContentViewDidChange(event)
+    {
+        var currentContentView = this._contentBrowser.currentContentView;
+        if (!currentContentView)
+            return;
+
+        this._revealAndSelectRepresentedObjectInNavigationSidebar(currentContentView.representedObject);
+    }
+
+    _revealAndSelectRepresentedObjectInNavigationSidebar(representedObject)
+    {
+        if (!this.navigationSidebarPanel)
+            return;
+
+        // If a tree outline is processing a selection currently then we can assume the selection does not
+        // need to be changed. This is needed to allow breakpoint and call frame tree elements to be selected
+        // without jumping back to selecting the resource tree element.
+        for (var contentTreeOutline of this.navigationSidebarPanel.visibleContentTreeOutlines) {
+            if (contentTreeOutline.processingSelectionChange)
+                return;
+        }
+
+        var treeElement = this.navigationSidebarPanel.treeElementForRepresentedObject(representedObject);
+
+        if (treeElement)
+            treeElement.revealAndSelect(true, false, true, true);
+        else if (this.navigationSidebarPanel.contentTreeOutline.selectedTreeElement)
+            this.navigationSidebarPanel.contentTreeOutline.selectedTreeElement.deselect(true);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentFlowDOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/Views/ContentFlowDOMTreeContentView.js
new file mode 100644
index 000000000..01cab4a9c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentFlowDOMTreeContentView.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1. Redistributions of source code must retain the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer.
+ * 2. Redistributions in binary form must reproduce the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials
+ *    provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+ * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+ * TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+ * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ * SUCH DAMAGE.
+ */
+
+WebInspector.ContentFlowDOMTreeContentView = class ContentFlowDOMTreeContentView extends WebInspector.DOMTreeContentView
+{
+    constructor(contentFlow)
+    {
+        console.assert(contentFlow instanceof WebInspector.ContentFlow, contentFlow);
+
+        super(contentFlow);
+
+        contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasAdded, this._contentNodeWasAdded, this);
+        contentFlow.addEventListener(WebInspector.ContentFlow.Event.ContentNodeWasRemoved, this._contentNodeWasRemoved, this);
+
+        this._createContentTrees();
+    }
+
+    // Public
+
+    closed()
+    {
+        this.representedObject.removeEventListener(null, null, this);
+
+        super.closed();
+    }
+
+    getSearchContextNodes(callback)
+    {
+        callback(this.domTreeOutline.children.map(function(treeOutline) {
+            return treeOutline.representedObject.id;
+        }));
+    }
+
+    // Private
+
+    _createContentTrees()
+    {
+        var contentNodes = this.representedObject.contentNodes;
+        for (var contentNode of contentNodes)
+            this.domTreeOutline.appendChild(new WebInspector.DOMTreeElement(contentNode));
+
+        var documentURL = contentNodes.length ? contentNodes[0].ownerDocument.documentURL : null;
+        this._restoreSelectedNodeAfterUpdate(documentURL, contentNodes[0]);
+    }
+
+    _contentNodeWasAdded(event)
+    {
+        var treeElement = new WebInspector.DOMTreeElement(event.data.node);
+        if (!event.data.before) {
+            this.domTreeOutline.appendChild(treeElement);
+            return;
+        }
+
+        var beforeElement = this.domTreeOutline.findTreeElement(event.data.before);
+        console.assert(beforeElement);
+
+        var index = this.domTreeOutline.children.indexOf(beforeElement);
+        console.assert(index !== -1);
+
+        this.domTreeOutline.insertChild(treeElement, index);
+    }
+
+    _contentNodeWasRemoved(event)
+    {
+        var treeElement = this.domTreeOutline.findTreeElement(event.data.node);
+        console.assert(treeElement);
+        this.domTreeOutline.removeChild(treeElement);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentFlowIcon.css b/Source/WebInspectorUI/UserInterface/Views/ContentFlowIcon.css
new file mode 100644
index 000000000..402e2b3e9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentFlowIcon.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1. Redistributions of source code must retain the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer.
+ * 2. Redistributions in binary form must reproduce the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials
+ *    provided with the distribution.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+ * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+ * TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+ * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ * SUCH DAMAGE.
+ */
+
+.content-flow-icon .icon {
+    content: url(../Images/ContentFlow.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js
new file mode 100644
index 000000000..4fe2cc5e3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentFlowTreeElement.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1. Redistributions of source code must retain the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer.
+ * 2. Redistributions in binary form must reproduce the above
+ *    copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials
+ *    provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDER "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
+ * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY,
+ * OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
+ * TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
+ * THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF
+ * SUCH DAMAGE.
+ */
+
+WebInspector.ContentFlowTreeElement = class ContentFlowTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.ContentFlow);
+
+        super("content-flow-icon", representedObject.name, null, representedObject, false);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/ContentView.css b/Source/WebInspectorUI/UserInterface/Views/ContentView.css
index aafa2adbe..aafa2adbe 100644
--- a/Source/WebInspectorUI/UserInterface/ContentView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentView.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentView.js b/Source/WebInspectorUI/UserInterface/Views/ContentView.js
new file mode 100644
index 000000000..0224f9c6e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentView.js
@@ -0,0 +1,397 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentView = class ContentView extends WebInspector.View
+{
+    constructor(representedObject, extraArguments)
+    {
+        // Concrete object instantiation.
+        console.assert(!representedObject || WebInspector.ContentView.isViewable(representedObject), representedObject);
+
+        super();
+
+        this._representedObject = representedObject;
+
+        this.element.classList.add("content-view");
+
+        this._parentContainer = null;
+    }
+
+    // Static
+
+    static createFromRepresentedObject(representedObject, extraArguments)
+    {
+        console.assert(representedObject);
+
+        if (representedObject instanceof WebInspector.Frame)
+            return new WebInspector.ResourceClusterContentView(representedObject.mainResource, extraArguments);
+
+        if (representedObject instanceof WebInspector.Resource)
+            return new WebInspector.ResourceClusterContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.Script)
+            return new WebInspector.ScriptContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.TimelineRecording)
+            return new WebInspector.TimelineRecordingContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.Timeline) {
+            var timelineType = representedObject.type;
+            if (timelineType === WebInspector.TimelineRecord.Type.Network)
+                return new WebInspector.NetworkTimelineView(representedObject, extraArguments);
+
+            if (timelineType === WebInspector.TimelineRecord.Type.Layout)
+                return new WebInspector.LayoutTimelineView(representedObject, extraArguments);
+
+            if (timelineType === WebInspector.TimelineRecord.Type.Script)
+                return new WebInspector.ScriptTimelineView(representedObject, extraArguments);
+
+            if (timelineType === WebInspector.TimelineRecord.Type.RenderingFrame)
+                return new WebInspector.RenderingFrameTimelineView(representedObject, extraArguments);
+
+            if (timelineType === WebInspector.TimelineRecord.Type.Memory)
+                return new WebInspector.MemoryTimelineView(representedObject, extraArguments);
+        }
+
+        if (representedObject instanceof WebInspector.Breakpoint) {
+            if (representedObject.sourceCodeLocation)
+                return WebInspector.ContentView.createFromRepresentedObject(representedObject.sourceCodeLocation.displaySourceCode, extraArguments);
+        }
+
+        if (representedObject instanceof WebInspector.DOMStorageObject)
+            return new WebInspector.DOMStorageContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.CookieStorageObject)
+            return new WebInspector.CookieStorageContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.DatabaseTableObject)
+            return new WebInspector.DatabaseTableContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.DatabaseObject)
+            return new WebInspector.DatabaseContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.IndexedDatabaseObjectStore)
+            return new WebInspector.IndexedDatabaseObjectStoreContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.IndexedDatabaseObjectStoreIndex)
+            return new WebInspector.IndexedDatabaseObjectStoreContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.ApplicationCacheFrame)
+            return new WebInspector.ApplicationCacheFrameContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.DOMTree)
+            return new WebInspector.FrameDOMTreeContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.DOMSearchMatchObject) {
+            var resultView = new WebInspector.FrameDOMTreeContentView(WebInspector.frameResourceManager.mainFrame.domTree, extraArguments);
+            resultView.restoreFromCookie({nodeToSelect: representedObject.domNode});
+            return resultView;
+        }
+
+        if (representedObject instanceof WebInspector.SourceCodeSearchMatchObject) {
+            var resultView;
+            if (representedObject.sourceCode instanceof WebInspector.Resource)
+                resultView = new WebInspector.ResourceClusterContentView(representedObject.sourceCode, extraArguments);
+            else if (representedObject.sourceCode instanceof WebInspector.Script)
+                resultView = new WebInspector.ScriptContentView(representedObject.sourceCode, extraArguments);
+            else
+                console.error("Unknown SourceCode", representedObject.sourceCode);
+
+            var textRangeToSelect = representedObject.sourceCodeTextRange.formattedTextRange;
+            var startPosition = textRangeToSelect.startPosition();
+            resultView.restoreFromCookie({lineNumber: startPosition.lineNumber, columnNumber: startPosition.columnNumber});
+
+            return resultView;
+        }
+
+        if (representedObject instanceof WebInspector.LogObject)
+            return new WebInspector.LogContentView(representedObject, extraArguments);
+
+        if (representedObject instanceof WebInspector.ContentFlow)
+            return new WebInspector.ContentFlowDOMTreeContentView(representedObject, extraArguments);
+
+        if (typeof representedObject === "string" || representedObject instanceof String)
+            return new WebInspector.TextContentView(representedObject, extraArguments);
+
+        console.assert(!WebInspector.ContentView.isViewable(representedObject));
+
+        throw new Error("Can't make a ContentView for an unknown representedObject.");
+    }
+
+    static contentViewForRepresentedObject(representedObject, onlyExisting, extraArguments)
+    {
+        console.assert(representedObject);
+
+        let resolvedRepresentedObject = WebInspector.ContentView.resolvedRepresentedObjectForRepresentedObject(representedObject);
+        let existingContentView = resolvedRepresentedObject[WebInspector.ContentView.ContentViewForRepresentedObjectSymbol];
+        console.assert(!existingContentView || existingContentView instanceof WebInspector.ContentView);
+        if (existingContentView)
+            return existingContentView;
+
+        if (onlyExisting)
+            return null;
+
+        let newContentView = WebInspector.ContentView.createFromRepresentedObject(representedObject, extraArguments);
+        console.assert(newContentView instanceof WebInspector.ContentView);
+        if (!newContentView)
+            return null;
+
+        console.assert(newContentView.representedObject === resolvedRepresentedObject, "createFromRepresentedObject and resolvedRepresentedObjectForRepresentedObject are out of sync for type", representedObject.constructor.name);
+        newContentView.representedObject[WebInspector.ContentView.ContentViewForRepresentedObjectSymbol] = newContentView;
+        return newContentView;
+    }
+
+    static closedContentViewForRepresentedObject(representedObject)
+    {
+        let resolvedRepresentedObject = WebInspector.ContentView.resolvedRepresentedObjectForRepresentedObject(representedObject);
+        resolvedRepresentedObject[WebInspector.ContentView.ContentViewForRepresentedObjectSymbol] = null;
+    }
+
+    static resolvedRepresentedObjectForRepresentedObject(representedObject)
+    {
+        if (representedObject instanceof WebInspector.Frame)
+            return representedObject.mainResource;
+
+        if (representedObject instanceof WebInspector.Breakpoint) {
+            if (representedObject.sourceCodeLocation)
+                return representedObject.sourceCodeLocation.displaySourceCode;
+        }
+
+        if (representedObject instanceof WebInspector.DOMSearchMatchObject)
+            return WebInspector.frameResourceManager.mainFrame.domTree;
+
+        if (representedObject instanceof WebInspector.SourceCodeSearchMatchObject)
+            return representedObject.sourceCode;
+
+        return representedObject;
+    }
+
+    static isViewable(representedObject)
+    {
+        if (representedObject instanceof WebInspector.Frame)
+            return true;
+        if (representedObject instanceof WebInspector.Resource)
+            return true;
+        if (representedObject instanceof WebInspector.Script)
+            return true;
+        if (representedObject instanceof WebInspector.TimelineRecording)
+            return true;
+        if (representedObject instanceof WebInspector.Timeline)
+            return true;
+        if (representedObject instanceof WebInspector.Breakpoint)
+            return representedObject.sourceCodeLocation;
+        if (representedObject instanceof WebInspector.DOMStorageObject)
+            return true;
+        if (representedObject instanceof WebInspector.CookieStorageObject)
+            return true;
+        if (representedObject instanceof WebInspector.DatabaseTableObject)
+            return true;
+        if (representedObject instanceof WebInspector.DatabaseObject)
+            return true;
+        if (representedObject instanceof WebInspector.IndexedDatabaseObjectStore)
+            return true;
+        if (representedObject instanceof WebInspector.IndexedDatabaseObjectStoreIndex)
+            return true;
+        if (representedObject instanceof WebInspector.ApplicationCacheFrame)
+            return true;
+        if (representedObject instanceof WebInspector.DOMTree)
+            return true;
+        if (representedObject instanceof WebInspector.DOMSearchMatchObject)
+            return true;
+        if (representedObject instanceof WebInspector.SourceCodeSearchMatchObject)
+            return true;
+        if (representedObject instanceof WebInspector.LogObject)
+            return true;
+        if (representedObject instanceof WebInspector.ContentFlow)
+            return true;
+        if (typeof representedObject === "string" || representedObject instanceof String)
+            return true;
+        return false;
+    }
+
+    // Public
+
+    get representedObject()
+    {
+        return this._representedObject;
+    }
+
+    get navigationItems()
+    {
+        // Navigation items that will be displayed by the ContentBrowser instance,
+        // meant to be subclassed. Implemented by subclasses.
+        return [];
+    }
+
+    get parentContainer()
+    {
+        return this._parentContainer;
+    }
+
+    get visible()
+    {
+        return this._visible;
+    }
+
+    set visible(flag)
+    {
+        this._visible = flag;
+    }
+
+    get scrollableElements()
+    {
+        // Implemented by subclasses.
+        return [];
+    }
+
+    get shouldKeepElementsScrolledToBottom()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    get selectionPathComponents()
+    {
+        // Implemented by subclasses.
+        return [];
+    }
+
+    get supplementalRepresentedObjects()
+    {
+        // Implemented by subclasses.
+        return [];
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        // Implemented by subclasses.
+        return true;
+    }
+
+    shown()
+    {
+        // Implemented by subclasses.
+    }
+
+    hidden()
+    {
+        // Implemented by subclasses.
+    }
+
+    closed()
+    {
+        // Implemented by subclasses.
+    }
+
+    saveToCookie(cookie)
+    {
+        // Implemented by subclasses.
+    }
+
+    restoreFromCookie(cookie)
+    {
+        // Implemented by subclasses.
+    }
+
+    canGoBack()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    canGoForward()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    goBack()
+    {
+        // Implemented by subclasses.
+    }
+
+    goForward()
+    {
+        // Implemented by subclasses.
+    }
+
+    get supportsSearch()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    get numberOfSearchResults()
+    {
+        // Implemented by subclasses.
+        return null;
+    }
+
+    get hasPerformedSearch()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        // Implemented by subclasses.
+    }
+
+    performSearch(query)
+    {
+        // Implemented by subclasses.
+    }
+
+    searchCleared()
+    {
+        // Implemented by subclasses.
+    }
+
+    searchQueryWithSelection()
+    {
+        // Implemented by subclasses.
+        return null;
+    }
+
+    revealPreviousSearchResult(changeFocus)
+    {
+        // Implemented by subclasses.
+    }
+
+    revealNextSearchResult(changeFocus)
+    {
+        // Implemented by subclasses.
+    }
+};
+
+WebInspector.ContentView.Event = {
+    SelectionPathComponentsDidChange: "content-view-selection-path-components-did-change",
+    SupplementalRepresentedObjectsDidChange: "content-view-supplemental-represented-objects-did-change",
+    NumberOfSearchResultsDidChange: "content-view-number-of-search-results-did-change",
+    NavigationItemsDidChange: "content-view-navigation-items-did-change"
+};
+
+WebInspector.ContentView.ContentViewForRepresentedObjectSymbol = Symbol("content-view-for-represented-object");
diff --git a/Source/WebInspectorUI/UserInterface/ContentViewContainer.css b/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.css
index 3beab1a8c..3beab1a8c 100644
--- a/Source/WebInspectorUI/UserInterface/ContentViewContainer.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.js b/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.js
new file mode 100644
index 000000000..8204656e7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContentViewContainer.js
@@ -0,0 +1,515 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContentViewContainer = class ContentViewContainer extends WebInspector.View
+{
+    constructor()
+    {
+        super();
+
+        this.element.classList.add("content-view-container");
+
+        this._backForwardList = [];
+        this._currentIndex = -1;
+    }
+
+    // Public
+
+    get currentIndex()
+    {
+        return this._currentIndex;
+    }
+
+    get backForwardList()
+    {
+        return this._backForwardList;
+    }
+
+    get currentContentView()
+    {
+        if (this._currentIndex < 0 || this._currentIndex > this._backForwardList.length - 1)
+            return null;
+        return this._backForwardList[this._currentIndex].contentView;
+    }
+
+    get currentBackForwardEntry()
+    {
+        if (this._currentIndex < 0 || this._currentIndex > this._backForwardList.length - 1)
+            return null;
+        return this._backForwardList[this._currentIndex];
+    }
+
+    contentViewForRepresentedObject(representedObject, onlyExisting, extraArguments)
+    {
+        return WebInspector.ContentView.contentViewForRepresentedObject(representedObject, onlyExisting, extraArguments);
+    }
+
+    showContentViewForRepresentedObject(representedObject, extraArguments)
+    {
+        var contentView = this.contentViewForRepresentedObject(representedObject, false, extraArguments);
+        if (!contentView)
+            return null;
+
+        this.showContentView(contentView);
+
+        return contentView;
+    }
+
+    showContentView(contentView, cookie)
+    {
+        console.assert(contentView instanceof WebInspector.ContentView);
+        if (!(contentView instanceof WebInspector.ContentView))
+            return null;
+
+        // ContentViews can be shared between containers. If this content view is
+        // not owned by us, it may need to be transferred to this container.
+        if (contentView.parentContainer !== this)
+            this._takeOwnershipOfContentView(contentView);
+
+        var currentEntry = this.currentBackForwardEntry;
+        var provisionalEntry = new WebInspector.BackForwardEntry(contentView, cookie);
+        // Don't do anything if we would have added an identical back/forward list entry.
+        if (currentEntry && currentEntry.contentView === contentView && Object.shallowEqual(provisionalEntry.cookie, currentEntry.cookie)) {
+            const shouldCallShown = false;
+            currentEntry.prepareToShow(shouldCallShown);
+            return currentEntry.contentView;
+        }
+
+        // Showing a content view will truncate the back/forward list after the current index and insert the content view
+        // at the end of the list. Finally, the current index will be updated to point to the end of the back/forward list.
+
+        // Increment the current index to where we will insert the content view.
+        var newIndex = this._currentIndex + 1;
+
+        // Insert the content view at the new index. This will remove any content views greater than or equal to the index.
+        var removedEntries = this._backForwardList.splice(newIndex, this._backForwardList.length - newIndex, provisionalEntry);
+
+        console.assert(newIndex === this._backForwardList.length - 1);
+        console.assert(this._backForwardList[newIndex] === provisionalEntry);
+
+        // Disassociate with the removed content views.
+        for (var i = 0; i < removedEntries.length; ++i) {
+            // Skip disassociation if this content view is still in the back/forward list.
+            var shouldDissociateContentView = !this._backForwardList.some(function(existingEntry) {
+                return existingEntry.contentView === removedEntries[i].contentView;
+            });
+
+            if (shouldDissociateContentView)
+                this._disassociateFromContentView(removedEntries[i].contentView, removedEntries[i].tombstone);
+        }
+
+        // Associate with the new content view.
+        contentView._parentContainer = this;
+
+        this.showBackForwardEntryForIndex(newIndex);
+
+        return contentView;
+    }
+
+    showBackForwardEntryForIndex(index)
+    {
+        console.assert(index >= 0 && index <= this._backForwardList.length - 1);
+        if (index < 0 || index > this._backForwardList.length - 1)
+            return;
+
+        if (this._currentIndex === index)
+            return;
+
+        var previousEntry = this.currentBackForwardEntry;
+        this._currentIndex = index;
+        var currentEntry = this.currentBackForwardEntry;
+        console.assert(currentEntry);
+
+        var isNewContentView = !previousEntry || !currentEntry.contentView.visible;
+        if (isNewContentView) {
+            // Hide the currently visible content view.
+            if (previousEntry)
+                this._hideEntry(previousEntry);
+            this._showEntry(currentEntry, true);
+        } else
+            this._showEntry(currentEntry, false);
+
+        this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+    }
+
+    replaceContentView(oldContentView, newContentView)
+    {
+        console.assert(oldContentView instanceof WebInspector.ContentView);
+        if (!(oldContentView instanceof WebInspector.ContentView))
+            return;
+
+        console.assert(newContentView instanceof WebInspector.ContentView);
+        if (!(newContentView instanceof WebInspector.ContentView))
+            return;
+
+        console.assert(oldContentView.parentContainer === this);
+        if (oldContentView.parentContainer !== this)
+            return;
+
+        console.assert(!newContentView.parentContainer || newContentView.parentContainer === this);
+        if (newContentView.parentContainer && newContentView.parentContainer !== this)
+            return;
+
+        var currentlyShowing = (this.currentContentView === oldContentView);
+        if (currentlyShowing)
+            this._hideEntry(this.currentBackForwardEntry);
+
+        // Disassociate with the old content view.
+        this._disassociateFromContentView(oldContentView, false);
+
+        // Associate with the new content view.
+        newContentView._parentContainer = this;
+
+        // Replace all occurrences of oldContentView with newContentView in the back/forward list.
+        for (var i = 0; i < this._backForwardList.length; ++i) {
+            if (this._backForwardList[i].contentView === oldContentView) {
+                console.assert(!this._backForwardList[i].tombstone);
+                let currentCookie = this._backForwardList[i].cookie;
+                this._backForwardList[i] = new WebInspector.BackForwardEntry(newContentView, currentCookie);
+            }
+        }
+
+        // Re-show the current entry, because its content view instance was replaced.
+        if (currentlyShowing) {
+            this._showEntry(this.currentBackForwardEntry, true);
+            this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+        }
+    }
+
+    closeAllContentViewsOfPrototype(constructor)
+    {
+        if (!this._backForwardList.length) {
+            console.assert(this._currentIndex === -1);
+            return;
+        }
+
+        // Do a check to see if all the content views are instances of this prototype.
+        // If they all are we can use the quicker closeAllContentViews method.
+        var allSamePrototype = true;
+        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
+            if (!(this._backForwardList[i].contentView instanceof constructor)) {
+                allSamePrototype = false;
+                break;
+            }
+        }
+
+        if (allSamePrototype) {
+            this.closeAllContentViews();
+            return;
+        }
+
+        var visibleContentView = this.currentContentView;
+
+        var backForwardListDidChange = false;
+        // Hide and disassociate with all the content views that are instances of the constructor.
+        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
+            var entry = this._backForwardList[i];
+            if (!(entry.contentView instanceof constructor))
+                continue;
+
+            if (entry.contentView === visibleContentView)
+                this._hideEntry(entry);
+
+            if (this._currentIndex >= i) {
+                // Decrement the currentIndex since we will remove an item in the back/forward array
+                // that it the current index or comes before it.
+                --this._currentIndex;
+            }
+
+            this._disassociateFromContentView(entry.contentView, entry.tombstone);
+
+            // Remove the item from the back/forward list.
+            this._backForwardList.splice(i, 1);
+            backForwardListDidChange = true;
+        }
+
+        var currentEntry = this.currentBackForwardEntry;
+        console.assert(currentEntry || (!currentEntry && this._currentIndex === -1));
+
+        if (currentEntry && currentEntry.contentView !== visibleContentView || backForwardListDidChange) {
+            this._showEntry(currentEntry, true);
+            this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+        }
+    }
+
+    closeContentView(contentViewToClose)
+    {
+        if (!this._backForwardList.length) {
+            console.assert(this._currentIndex === -1);
+            return;
+        }
+
+        // Do a check to see if all the content views are instances of this prototype.
+        // If they all are we can use the quicker closeAllContentViews method.
+        var allSameContentView = true;
+        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
+            if (this._backForwardList[i].contentView !== contentViewToClose) {
+                allSameContentView = false;
+                break;
+            }
+        }
+
+        if (allSameContentView) {
+            this.closeAllContentViews();
+            return;
+        }
+
+        var visibleContentView = this.currentContentView;
+
+        var backForwardListDidChange = false;
+        // Hide and disassociate with all the content views that are the same as contentViewToClose.
+        for (var i = this._backForwardList.length - 1; i >= 0; --i) {
+            var entry = this._backForwardList[i];
+            if (entry.contentView !== contentViewToClose)
+                continue;
+
+            if (entry.contentView === visibleContentView)
+                this._hideEntry(entry);
+
+            if (this._currentIndex >= i) {
+                // Decrement the currentIndex since we will remove an item in the back/forward array
+                // that it the current index or comes before it.
+                --this._currentIndex;
+            }
+
+            this._disassociateFromContentView(entry.contentView, entry.tombstone);
+
+            // Remove the item from the back/forward list.
+            this._backForwardList.splice(i, 1);
+            backForwardListDidChange = true;
+        }
+
+        var currentEntry = this.currentBackForwardEntry;
+        console.assert(currentEntry || (!currentEntry && this._currentIndex === -1));
+
+        if (currentEntry && currentEntry.contentView !== visibleContentView || backForwardListDidChange) {
+            this._showEntry(currentEntry, true);
+            this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+        }
+    }
+
+    closeAllContentViews()
+    {
+        if (!this._backForwardList.length) {
+            console.assert(this._currentIndex === -1);
+            return;
+        }
+
+        var visibleContentView = this.currentContentView;
+
+        // Hide and disassociate with all the content views.
+        for (var i = 0; i < this._backForwardList.length; ++i) {
+            var entry = this._backForwardList[i];
+            if (entry.contentView === visibleContentView)
+                this._hideEntry(entry);
+            this._disassociateFromContentView(entry.contentView, entry.tombstone);
+        }
+
+        this._backForwardList = [];
+        this._currentIndex = -1;
+
+        this.dispatchEventToListeners(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange);
+    }
+
+    canGoBack()
+    {
+        return this._currentIndex > 0;
+    }
+
+    canGoForward()
+    {
+        return this._currentIndex < this._backForwardList.length - 1;
+    }
+
+    goBack()
+    {
+        if (!this.canGoBack())
+            return;
+        this.showBackForwardEntryForIndex(this._currentIndex - 1);
+    }
+
+    goForward()
+    {
+        if (!this.canGoForward())
+            return;
+        this.showBackForwardEntryForIndex(this._currentIndex + 1);
+    }
+
+    shown()
+    {
+        var currentEntry = this.currentBackForwardEntry;
+        if (!currentEntry)
+            return;
+
+        this._showEntry(currentEntry, true);
+    }
+
+    hidden()
+    {
+        var currentEntry = this.currentBackForwardEntry;
+        if (!currentEntry)
+            return;
+
+        this._hideEntry(currentEntry);
+    }
+
+    // Private
+
+    _takeOwnershipOfContentView(contentView)
+    {
+        console.assert(contentView.parentContainer !== this, "We already have ownership of the ContentView");
+        if (contentView.parentContainer === this)
+            return;
+
+        if (contentView.parentContainer)
+            contentView.parentContainer._placeTombstonesForContentView(contentView);
+
+        contentView._parentContainer = this;
+
+        this._clearTombstonesForContentView(contentView);
+    }
+
+    _placeTombstonesForContentView(contentView)
+    {
+        console.assert(contentView.parentContainer === this);
+
+        // Ensure another ContentViewContainer doesn't close this ContentView while we still have it.
+        let tombstoneContentViewContainers = this._tombstoneContentViewContainersForContentView(contentView);
+        console.assert(!tombstoneContentViewContainers.includes(this));
+
+        let visibleContentView = this.currentContentView;
+
+        for (let entry of this._backForwardList) {
+            if (entry.contentView !== contentView)
+                continue;
+
+            if (entry.contentView === visibleContentView) {
+                this._hideEntry(entry);
+                visibleContentView = null;
+            }
+
+            console.assert(!entry.tombstone);
+            entry.tombstone = true;
+
+            tombstoneContentViewContainers.push(this);
+        }
+    }
+
+    _clearTombstonesForContentView(contentView)
+    {
+        console.assert(contentView.parentContainer === this);
+
+        let tombstoneContentViewContainers = this._tombstoneContentViewContainersForContentView(contentView);
+        const onlyFirst = false;
+        tombstoneContentViewContainers.remove(this, onlyFirst);
+
+        for (let entry of this._backForwardList) {
+            if (entry.contentView !== contentView)
+                continue;
+
+            console.assert(entry.tombstone);
+            entry.tombstone = false;
+        }
+    }
+
+    _disassociateFromContentView(contentView, isTombstone)
+    {
+        // Just remove one of our tombstone back references.
+        // There may be other back/forward entries that need a reference.
+        if (isTombstone) {
+            let tombstoneContentViewContainers = this._tombstoneContentViewContainersForContentView(contentView);
+            const onlyFirst = true;
+            tombstoneContentViewContainers.remove(this, onlyFirst);
+            return;
+        }
+
+        console.assert(!contentView.visible);
+
+        if (!contentView._parentContainer)
+            return;
+
+        contentView._parentContainer = null;
+
+        // If another ContentViewContainer has tombstones for this, just transfer
+        // ownership to that ContentViewContainer and avoid closing the ContentView.
+        // We don't care who we transfer this to, so just use the first.
+        let tombstoneContentViewContainers = this._tombstoneContentViewContainersForContentView(contentView);
+        if (tombstoneContentViewContainers && tombstoneContentViewContainers.length) {
+            tombstoneContentViewContainers[0]._takeOwnershipOfContentView(contentView);
+            return;
+        }
+
+        contentView.closed();
+
+        if (contentView.representedObject)
+            WebInspector.ContentView.closedContentViewForRepresentedObject(contentView.representedObject);
+    }
+
+    _showEntry(entry, shouldCallShown)
+    {
+        console.assert(entry instanceof WebInspector.BackForwardEntry);
+
+        // We may be showing a tombstone from a BackForward list or when re-showing a container
+        // that had previously had the content view transferred away from it.
+        // Take over the ContentView.
+        if (entry.tombstone) {
+            this._takeOwnershipOfContentView(entry.contentView);
+            console.assert(!entry.tombstone);
+        }
+
+        if (!this.subviews.includes(entry.contentView))
+            this.addSubview(entry.contentView)
+
+        entry.prepareToShow(shouldCallShown);
+    }
+
+    _hideEntry(entry)
+    {
+        console.assert(entry instanceof WebInspector.BackForwardEntry);
+
+        // If this was a tombstone, the content view should already have been
+        // hidden when we placed the tombstone.
+        if (entry.tombstone)
+            return;
+
+        entry.prepareToHide();
+        if (this.subviews.includes(entry.contentView))
+            this.removeSubview(entry.contentView)
+    }
+
+    _tombstoneContentViewContainersForContentView(contentView)
+    {
+        let tombstoneContentViewContainers = contentView[WebInspector.ContentViewContainer.TombstoneContentViewContainersSymbol];
+        if (!tombstoneContentViewContainers)
+            tombstoneContentViewContainers = contentView[WebInspector.ContentViewContainer.TombstoneContentViewContainersSymbol] = [];
+        return tombstoneContentViewContainers;
+    }
+};
+
+WebInspector.ContentViewContainer.Event = {
+    CurrentContentViewDidChange: "content-view-container-current-content-view-did-change"
+};
+
+WebInspector.ContentViewContainer.TombstoneContentViewContainersSymbol = Symbol("content-view-container-tombstone-content-view-containers");
diff --git a/Source/WebInspectorUI/UserInterface/Views/ContextMenu.js b/Source/WebInspectorUI/UserInterface/Views/ContextMenu.js
new file mode 100644
index 000000000..6a7dff095
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ContextMenu.js
@@ -0,0 +1,237 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2009 Google Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ContextMenuItem = class ContextMenuItem extends WebInspector.Object
+{
+    constructor(topLevelMenu, type, label, disabled, checked)
+    {
+        super();
+
+        this._type = type;
+        this._label = label;
+        this._disabled = disabled;
+        this._checked = checked;
+        this._contextMenu = topLevelMenu || this;
+
+        if (type === "item" || type === "checkbox")
+            this._id = topLevelMenu.nextId();
+    }
+
+    // Public
+
+    id()
+    {
+        return this._id;
+    }
+
+    type()
+    {
+        return this._type;
+    }
+
+    isEnabled()
+    {
+        return !this._disabled;
+    }
+
+    setEnabled(enabled)
+    {
+        this._disabled = !enabled;
+    }
+
+    // Private
+
+    _buildDescriptor()
+    {
+        switch (this._type) {
+        case "item":
+            return {type: "item", id: this._id, label: this._label, enabled: !this._disabled};
+        case "separator":
+            return {type: "separator"};
+        case "checkbox":
+            return {type: "checkbox", id: this._id, label: this._label, checked: !!this._checked, enabled: !this._disabled};
+        }
+    }
+};
+
+WebInspector.ContextSubMenuItem = class ContextSubMenuItem extends WebInspector.ContextMenuItem
+{
+    constructor(topLevelMenu, label, disabled)
+    {
+        super(topLevelMenu, "subMenu", label, disabled);
+
+        this._items = [];
+    }
+
+    // Public
+
+    appendItem(label, handler, disabled)
+    {
+        let item = new WebInspector.ContextMenuItem(this._contextMenu, "item", label, disabled);
+        this._pushItem(item);
+        this._contextMenu._setHandler(item.id(), handler);
+        return item;
+    }
+
+    appendSubMenuItem(label, disabled)
+    {
+        let item = new WebInspector.ContextSubMenuItem(this._contextMenu, label, disabled);
+        this._pushItem(item);
+        return item;
+    }
+
+    appendCheckboxItem(label, handler, checked, disabled)
+    {
+        let item = new WebInspector.ContextMenuItem(this._contextMenu, "checkbox", label, disabled, checked);
+        this._pushItem(item);
+        this._contextMenu._setHandler(item.id(), handler);
+        return item;
+    }
+
+    appendSeparator()
+    {
+        if (this._items.length)
+            this._pendingSeparator = true;
+    }
+
+    _pushItem(item)
+    {
+        if (this._pendingSeparator) {
+            this._items.push(new WebInspector.ContextMenuItem(this._contextMenu, "separator"));
+            this._pendingSeparator = null;
+        }
+        this._items.push(item);
+    }
+
+    isEmpty()
+    {
+        return !this._items.length;
+    }
+
+    _buildDescriptor()
+    {
+        let subItems = this._items.map((item) => item._buildDescriptor());
+        return {type: "subMenu", label: this._label, enabled: !this._disabled, subItems};
+    }
+};
+
+WebInspector.ContextMenu = class ContextMenu extends WebInspector.ContextSubMenuItem
+{
+    constructor(event)
+    {
+        super(null, "");
+
+        this._event = event;
+        this._handlers = {};
+        this._id = 0;
+    }
+
+    // Static
+
+    static createFromEvent(event, onlyExisting = false)
+    {
+        if (!event[WebInspector.ContextMenu.ProposedMenuSymbol] && !onlyExisting)
+            event[WebInspector.ContextMenu.ProposedMenuSymbol] = new WebInspector.ContextMenu(event);
+
+        return event[WebInspector.ContextMenu.ProposedMenuSymbol] || null;
+    }
+
+    static contextMenuItemSelected(id)
+    {
+        if (WebInspector.ContextMenu._lastContextMenu)
+            WebInspector.ContextMenu._lastContextMenu._itemSelected(id);
+    }
+
+    static contextMenuCleared()
+    {
+        // FIXME: Unfortunately, contextMenuCleared is invoked between show and item selected
+        // so we can't delete last menu object from WebInspector. Fix the contract.
+    }
+
+    // Public
+
+    nextId()
+    {
+        return this._id++;
+    }
+
+    show()
+    {
+        console.assert(this._event instanceof MouseEvent);
+
+        let menuObject = this._buildDescriptor();
+        if (menuObject.length) {
+            WebInspector.ContextMenu._lastContextMenu = this;
+
+            if (this._event.type !== "contextmenu" && typeof InspectorFrontendHost.dispatchEventAsContextMenuEvent === "function") {
+                this._menuObject = menuObject;
+                this._event.target.addEventListener("contextmenu", this, true);
+                InspectorFrontendHost.dispatchEventAsContextMenuEvent(this._event);
+            } else
+                InspectorFrontendHost.showContextMenu(this._event, menuObject);
+        }
+
+        if (this._event)
+            this._event.stopImmediatePropagation();
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        this._event.target.removeEventListener("contextmenu", this, true);
+        InspectorFrontendHost.showContextMenu(event, this._menuObject);
+        this._menuObject = null;
+
+        event.stopImmediatePropagation();
+    }
+
+    // Private
+
+    _setHandler(id, handler)
+    {
+        if (handler)
+            this._handlers[id] = handler;
+    }
+
+    _buildDescriptor()
+    {
+        return this._items.map((item) => item._buildDescriptor());
+    }
+
+    _itemSelected(id)
+    {
+        if (this._handlers[id])
+            this._handlers[id].call(this);
+    }
+};
+
+WebInspector.ContextMenu.ProposedMenuSymbol = Symbol("context-menu-proposed-menu");
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Views/ControlToolbarItem.css b/Source/WebInspectorUI/UserInterface/Views/ControlToolbarItem.css
new file mode 100644
index 000000000..fb7de01f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ControlToolbarItem.css
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013, 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar .item.control {
+    align-items: center;
+    justify-content: center;
+
+    padding: 3px 2px;
+
+    opacity: 0.5;
+}
+
+.toolbar.small-size .item.control {
+    padding: 2px;
+}
+
+.toolbar:matches(.icon-and-label-horizontal, .icon-only) .item.control {
+    padding: 0 2px;
+}
+
+.toolbar .item.control:hover {
+    opacity: 0.75;
+}
+
+.toolbar .item.control:active {
+    opacity: 1;
+}
+
+.toolbar .item.control > .glyph {
+    width: 16px;
+    height: 16px;
+
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+body.window-inactive .toolbar .item.control {
+    opacity: 0.35;
+}
+
+.toolbar .item.control.disabled {
+    opacity: 0.35 !important;
+}
+
+body.window-inactive .toolbar .item.control.disabled {
+    opacity: 0.2 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ControlToolbarItem.js b/Source/WebInspectorUI/UserInterface/Views/ControlToolbarItem.js
new file mode 100644
index 000000000..565d9d3b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ControlToolbarItem.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ControlToolbarItem = class ControlToolbarItem extends WebInspector.ButtonNavigationItem
+{
+    constructor(identifier, toolTip, image, imageWidth, imageHeight)
+    {
+        super(identifier, toolTip, image, imageWidth, imageHeight, false);
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["control"];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/CookieIcon.css b/Source/WebInspectorUI/UserInterface/Views/CookieIcon.css
new file mode 100644
index 000000000..d0eaa3b17
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CookieIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.cookie-icon .icon {
+    content: -webkit-image-set(url(../Images/Cookie.png) 1x, url(../Images/Cookie@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.css b/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.css
new file mode 100644
index 000000000..4f04e4258
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.cookie-storage > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js b/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js
new file mode 100644
index 000000000..02e0efdcd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CookieStorageContentView.js
@@ -0,0 +1,234 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CookieStorageContentView = class CookieStorageContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        super(representedObject);
+
+        this.element.classList.add("cookie-storage");
+
+        this._refreshButtonNavigationItem = new WebInspector.ButtonNavigationItem("cookie-storage-refresh", WebInspector.UIString("Refresh"), "Images/ReloadFull.svg", 13, 13);
+        this._refreshButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._refreshButtonClicked, this);
+
+        this.update();
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._refreshButtonNavigationItem];
+    }
+
+    update()
+    {
+        PageAgent.getCookies().then((payload) => {
+            this._cookies = this._filterCookies(payload.cookies);
+            this._rebuildTable();
+        }).catch((error) => {
+            console.error("Could not fetch cookies: ", error);
+        });
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.CookieStorage;
+        cookie.host = this.representedObject.host;
+    }
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    }
+
+    // Private
+
+    _rebuildTable()
+    {
+        // FIXME <https://webkit.org/b/151400>: If there are no cookies, add placeholder explanatory text.
+        if (!this._dataGrid) {
+            var columns = {name: {}, value: {}, domain: {}, path: {}, expires: {}, size: {}, http: {}, secure: {}};
+
+            columns.name.title = WebInspector.UIString("Name");
+            columns.name.sortable = true;
+            columns.name.width = "24%";
+
+            columns.value.title = WebInspector.UIString("Value");
+            columns.value.sortable = true;
+            columns.value.width = "34%";
+
+            columns.domain.title = WebInspector.UIString("Domain");
+            columns.domain.sortable = true;
+            columns.domain.width = "7%";
+
+            columns.path.title = WebInspector.UIString("Path");
+            columns.path.sortable = true;
+            columns.path.width = "7%";
+
+            columns.expires.title = WebInspector.UIString("Expires");
+            columns.expires.sortable = true;
+            columns.expires.width = "7%";
+
+            columns.size.title = WebInspector.UIString("Size");
+            columns.size.aligned = "right";
+            columns.size.sortable = true;
+            columns.size.width = "7%";
+
+            columns.http.title = WebInspector.UIString("HTTP");
+            columns.http.aligned = "centered";
+            columns.http.sortable = true;
+            columns.http.width = "7%";
+
+            columns.secure.title = WebInspector.UIString("Secure");
+            columns.secure.aligned = "centered";
+            columns.secure.sortable = true;
+            columns.secure.width = "7%";
+
+            this._dataGrid = new WebInspector.DataGrid(columns, null, this._deleteCallback.bind(this));
+            this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+
+            this.addSubview(this._dataGrid);
+            this._dataGrid.updateLayout();
+        }
+
+        console.assert(this._dataGrid);
+        this._dataGrid.removeChildren();
+
+        for (var cookie of this._cookies) {
+            const checkmark = "\u2713";
+            var data = {
+                "name": cookie.name,
+                "value": cookie.value,
+                "domain": cookie.domain || "",
+                "path": cookie.path || "",
+                "expires": "",
+                "size": Number.bytesToString(cookie.size),
+                "http": cookie.httpOnly ? checkmark : "",
+                "secure": cookie.secure ? checkmark : "",
+            };
+
+            if (cookie.type !== WebInspector.CookieType.Request)
+                data["expires"] = cookie.session ? WebInspector.UIString("Session") : new Date(cookie.expires).toLocaleString();
+
+            var node = new WebInspector.DataGridNode(data);
+            node.cookie = cookie;
+
+            this._dataGrid.appendChild(node);
+        }
+
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("cookie-storage-content-view-sort", "name");
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("cookie-storage-content-view-sort-order", WebInspector.DataGrid.SortOrder.Indeterminate);
+    }
+
+    _filterCookies(cookies)
+    {
+        let resourceMatchesStorageDomain = (resource) => {
+            let urlComponents = resource.urlComponents;
+            return urlComponents && urlComponents.host && urlComponents.host === this.representedObject.host;
+        }
+
+        let allResources = [];
+        for (let frame of WebInspector.frameResourceManager.frames) {
+            // The main resource isn't in the list of resources, so add it as a candidate.
+            allResources.push(frame.mainResource);
+            allResources = allResources.concat(frame.resources);
+        }
+
+        let resourcesForDomain = allResources.filter(resourceMatchesStorageDomain);
+
+        let cookiesForDomain = cookies.filter((cookie) => {
+            return resourcesForDomain.some((resource) => {
+                return WebInspector.CookieStorageObject.cookieMatchesResourceURL(cookie, resource.url);
+            });
+        });
+        return cookiesForDomain;
+    }
+
+    _sortDataGrid()
+    {
+        function localeCompare(field, nodeA, nodeB)
+        {
+            return (nodeA.data[field] + "").localeCompare(nodeB.data[field] + "");
+        }
+
+        function numberCompare(field, nodeA, nodeB)
+        {
+            return nodeA.cookie[field] - nodeB.cookie[field];
+        }
+
+        function expiresCompare(nodeA, nodeB)
+        {
+            if (nodeA.cookie.session !== nodeB.cookie.session)
+                return nodeA.cookie.session ? -1 : 1;
+
+            if (nodeA.cookie.session)
+                return 0;
+
+            return nodeA.cookie.expires - nodeB.cookie.expires;
+        }
+
+        var comparator;
+        switch (this._dataGrid.sortColumnIdentifier) {
+            case "value": comparator = localeCompare.bind(this, "value"); break;
+            case "domain": comparator = localeCompare.bind(this, "domain"); break;
+            case "path": comparator = localeCompare.bind(this, "path"); break;
+            case "expires": comparator = expiresCompare; break;
+            case "size": comparator = numberCompare.bind(this, "size"); break;
+            case "http": comparator = localeCompare.bind(this, "http"); break;
+            case "secure": comparator = localeCompare.bind(this, "secure"); break;
+            case "name":
+            default: comparator = localeCompare.bind(this, "name"); break;
+        }
+
+        console.assert(comparator);
+        this._dataGrid.sortNodes(comparator);
+    }
+
+    _deleteCallback(node)
+    {
+        if (!node || !node.cookie)
+            return;
+
+        var cookie = node.cookie;
+        var cookieURL = (cookie.secure ? "https://" : "http://") + cookie.domain + cookie.path;
+        PageAgent.deleteCookie(cookie.name, cookieURL);
+
+        this.update();
+    }
+
+    _refreshButtonClicked(event)
+    {
+        this.update();
+    }
+};
+
+WebInspector.CookieType = {
+    Request: 0,
+    Response: 1
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js
new file mode 100644
index 000000000..4cc4f00bd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/CookieStorageTreeElement.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.CookieStorageTreeElement = class CookieStorageTreeElement extends WebInspector.StorageTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.CookieStorageObject);
+
+        super("cookie-icon", WebInspector.displayNameForHost(representedObject.host), representedObject);
+    }
+
+    // Public
+
+    get name()
+    {
+        return this.representedObject.host;
+    }
+
+    get categoryName()
+    {
+        return WebInspector.UIString("Cookies");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js
new file mode 100644
index 000000000..9f1077591
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMDetailsSidebarPanel.js
@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMDetailsSidebarPanel = class DOMDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
+{
+    constructor(identifier, displayName, singularDisplayName, element, dontCreateNavigationItem)
+    {
+        super(identifier, displayName, singularDisplayName, element, dontCreateNavigationItem);
+
+        this.element.addEventListener("click", this._mouseWasClicked.bind(this), true);
+
+        this._domNode = null;
+    }
+
+    // Public
+
+    inspect(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var nodeToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.DOMNode to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (objects[i] instanceof WebInspector.DOMNode) {
+                nodeToInspect = objects[i];
+                break;
+            }
+        }
+
+        if (nodeToInspect && !this.supportsDOMNode(nodeToInspect))
+            nodeToInspect = null;
+
+        this.domNode = nodeToInspect;
+
+        return !!this._domNode;
+    }
+
+    get domNode()
+    {
+        return this._domNode;
+    }
+
+    set domNode(domNode)
+    {
+        if (domNode === this._domNode)
+            return;
+
+        if (this._domNode)
+            this.removeEventListeners();
+
+        this._domNode = domNode;
+
+        if (this._domNode)
+            this.addEventListeners();
+
+        this.needsRefresh();
+    }
+
+    supportsDOMNode(nodeToInspect)
+    {
+        // Implemented by subclasses.
+        return true;
+    }
+
+    addEventListeners()
+    {
+        // Implemented by subclasses.
+    }
+
+    removeEventListeners()
+    {
+        // Implemented by subclasses.
+    }
+
+    // Private
+
+    _mouseWasClicked(event)
+    {
+        if (this._domNode && this._domNode.ownerDocument) {
+            var mainResource = WebInspector.frameResourceManager.resourceForURL(this._domNode.ownerDocument.documentURL);
+            if (mainResource)
+                var parentFrame = mainResource.parentFrame;
+        }
+
+        WebInspector.handlePossibleLinkClick(event, parentFrame);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
new file mode 100644
index 000000000..1ff9da51b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMNodeDetailsSidebarPanel.js
@@ -0,0 +1,640 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMNodeDetailsSidebarPanel = class DOMNodeDetailsSidebarPanel extends WebInspector.DOMDetailsSidebarPanel
+{
+    constructor()
+    {
+        super("dom-node-details", WebInspector.UIString("Node"), WebInspector.UIString("Node"));
+
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesChanged, this);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._attributesChanged, this);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CharacterDataModified, this._characterDataModified, this);
+
+        this.element.classList.add("dom-node");
+
+        this._identityNodeTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"));
+        this._identityNodeNameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Name"));
+        this._identityNodeValueRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Value"));
+
+        var identityGroup = new WebInspector.DetailsSectionGroup([this._identityNodeTypeRow, this._identityNodeNameRow, this._identityNodeValueRow]);
+        var identitySection = new WebInspector.DetailsSection("dom-node-identity", WebInspector.UIString("Identity"), [identityGroup]);
+
+        this._attributesDataGridRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Attributes"));
+
+        var attributesGroup = new WebInspector.DetailsSectionGroup([this._attributesDataGridRow]);
+        var attributesSection = new WebInspector.DetailsSection("dom-node-attributes", WebInspector.UIString("Attributes"), [attributesGroup]);
+
+        this._propertiesRow = new WebInspector.DetailsSectionRow;
+
+        var propertiesGroup = new WebInspector.DetailsSectionGroup([this._propertiesRow]);
+        var propertiesSection = new WebInspector.DetailsSection("dom-node-properties", WebInspector.UIString("Properties"), [propertiesGroup]);
+
+        this._eventListenersSectionGroup = new WebInspector.DetailsSectionGroup;
+        var eventListenersSection = new WebInspector.DetailsSection("dom-node-event-listeners", WebInspector.UIString("Event Listeners"), [this._eventListenersSectionGroup]);
+
+        this.contentView.element.appendChild(identitySection.element);
+        this.contentView.element.appendChild(attributesSection.element);
+        this.contentView.element.appendChild(propertiesSection.element);
+        this.contentView.element.appendChild(eventListenersSection.element);
+
+        if (this._accessibilitySupported()) {
+            this._accessibilityEmptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Accessibility Information"));
+            this._accessibilityNodeActiveDescendantRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Shared Focus"));
+            this._accessibilityNodeBusyRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Busy"));
+            this._accessibilityNodeCheckedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Checked"));
+            this._accessibilityNodeChildrenRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Children"));
+            this._accessibilityNodeControlsRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Controls"));
+            this._accessibilityNodeCurrentRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Current"));
+            this._accessibilityNodeDisabledRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Disabled"));
+            this._accessibilityNodeExpandedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Expanded"));
+            this._accessibilityNodeFlowsRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Flows"));
+            this._accessibilityNodeFocusedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Focused"));
+            this._accessibilityNodeIgnoredRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Ignored"));
+            this._accessibilityNodeInvalidRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Invalid"));
+            this._accessibilityNodeLiveRegionStatusRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Live"));
+            this._accessibilityNodeMouseEventRow = new WebInspector.DetailsSectionSimpleRow("");
+            this._accessibilityNodeLabelRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Label"));
+            this._accessibilityNodeOwnsRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Owns"));
+            this._accessibilityNodeParentRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Parent"));
+            this._accessibilityNodePressedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Pressed"));
+            this._accessibilityNodeReadonlyRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Readonly"));
+            this._accessibilityNodeRequiredRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Required"));
+            this._accessibilityNodeRoleRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Role"));
+            this._accessibilityNodeSelectedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Selected"));
+            this._accessibilityNodeSelectedChildrenRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Selected Items"));
+
+            this._accessibilityGroup = new WebInspector.DetailsSectionGroup([this._accessibilityEmptyRow]);
+            var accessibilitySection = new WebInspector.DetailsSection("dom-node-accessibility", WebInspector.UIString("Accessibility"), [this._accessibilityGroup]);
+
+            this.contentView.element.appendChild(accessibilitySection.element);
+        }
+    }
+
+    // Public
+
+    refresh()
+    {
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        this._identityNodeTypeRow.value = this._nodeTypeDisplayName();
+        this._identityNodeNameRow.value = domNode.nodeNameInCorrectCase();
+        this._identityNodeValueRow.value = domNode.nodeValue();
+
+        this._refreshAttributes();
+        this._refreshProperties();
+        this._refreshEventListeners();
+        this._refreshAccessibility();
+    }
+
+    // Private
+
+    _accessibilitySupported()
+    {
+        return window.DOMAgent && DOMAgent.getAccessibilityPropertiesForNode;
+    }
+
+    _refreshAttributes()
+    {
+        this._attributesDataGridRow.dataGrid = this._createAttributesDataGrid();
+    }
+
+    _refreshProperties()
+    {
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        RuntimeAgent.releaseObjectGroup(WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName);
+        WebInspector.RemoteObject.resolveNode(domNode, WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName, nodeResolved.bind(this));
+
+        function nodeResolved(object)
+        {
+            if (!object)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            function collectPrototypes()
+            {
+                // This builds an object with numeric properties. This is easier than dealing with arrays
+                // with the way RemoteObject works. Start at 1 since we use parseInt later and parseInt
+                // returns 0 for non-numeric strings make it ambiguous.
+                var prototype = this;
+                var result = [];
+                var counter = 1;
+
+                while (prototype) {
+                    result[counter++] = prototype;
+                    prototype = prototype.__proto__;
+                }
+
+                return result;
+            }
+
+            object.callFunction(collectPrototypes, undefined, false, nodePrototypesReady.bind(this));
+            object.release();
+        }
+
+        function nodePrototypesReady(error, object, wasThrown)
+        {
+            if (error || wasThrown || !object)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            object.deprecatedGetOwnProperties(fillSection.bind(this));
+        }
+
+        function fillSection(prototypes)
+        {
+            if (!prototypes)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            var element = this._propertiesRow.element;
+            element.removeChildren();
+
+            // Get array of prototype user-friendly names.
+            for (var i = 0; i < prototypes.length; ++i) {
+                // The only values we care about are numeric, as assigned in collectPrototypes.
+                if (!parseInt(prototypes[i].name, 10))
+                    continue;
+
+                var prototype = prototypes[i].value;
+                var title = prototype.description;
+                if (title.match(/Prototype$/))
+                    title = title.replace(/Prototype$/, WebInspector.UIString(" (Prototype)"));
+                else if (title === "Object")
+                    title = title + WebInspector.UIString(" (Prototype)");
+
+                // FIXME: <https://webkit.org/b/142833> Web Inspector: Node Details Sidebar Properties Section has "undefined" for all prototype properties
+
+                var objectTree = new WebInspector.ObjectTreeView(prototype, WebInspector.ObjectTreeView.Mode.Properties);
+                objectTree.showOnlyProperties();
+
+                var detailsSection = new WebInspector.DetailsSection(prototype.description.hash + "-prototype-properties", title, null, null, true);
+                detailsSection.groups[0].rows = [new WebInspector.DetailsSectionPropertiesRow(objectTree)];
+
+                element.appendChild(detailsSection.element);
+            }
+        }
+    }
+
+    _refreshEventListeners()
+    {
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        domNode.eventListeners(eventListenersCallback.bind(this));
+
+        function eventListenersCallback(error, eventListeners)
+        {
+            if (error)
+                return;
+
+            // Bail if the DOM node changed while we were waiting for the async response.
+            if (this.domNode !== domNode)
+                return;
+
+            var eventListenerTypes = [];
+            var eventListenerSections = {};
+            for (var i = 0; i < eventListeners.length; ++i) {
+                var eventListener = eventListeners[i];
+                eventListener.node = WebInspector.domTreeManager.nodeForId(eventListener.nodeId);
+
+                var type = eventListener.type;
+                var section = eventListenerSections[type];
+                if (!section) {
+                    section = new WebInspector.EventListenerSection(type, domNode.id);
+                    eventListenerSections[type] = section;
+                    eventListenerTypes.push(type);
+                }
+
+                section.addListener(eventListener);
+            }
+
+            if (!eventListenerTypes.length) {
+                var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Event Listeners"));
+                emptyRow.showEmptyMessage();
+                this._eventListenersSectionGroup.rows = [emptyRow];
+                return;
+            }
+
+            eventListenerTypes.sort();
+
+            var rows = [];
+            for (var i = 0; i < eventListenerTypes.length; ++i)
+                rows.push(eventListenerSections[eventListenerTypes[i]]);
+            this._eventListenersSectionGroup.rows = rows;
+        }
+    }
+
+    _refreshAccessibility()
+    {
+        if (!this._accessibilitySupported())
+            return;
+
+        var domNode = this.domNode;
+        if (!domNode)
+            return;
+
+        var properties = {};
+
+        function booleanValueToLocalizedStringIfTrue(property) {
+            if (properties[property])
+                return WebInspector.UIString("Yes");
+            return "";
+        }
+
+        function booleanValueToLocalizedStringIfPropertyDefined(property) {
+            if (properties[property] !== undefined) {
+                if (properties[property])
+                    return WebInspector.UIString("Yes");
+                else
+                    return WebInspector.UIString("No");
+            }
+            return "";
+        }
+
+        function linkForNodeId(nodeId) {
+            var link = null;
+            if (nodeId !== undefined && typeof nodeId === "number") {
+                var node = WebInspector.domTreeManager.nodeForId(nodeId);
+                if (node)
+                    link = WebInspector.linkifyAccessibilityNodeReference(node);
+            }
+            return link;
+        }
+
+        function linkListForNodeIds(nodeIds) {
+            if (!nodeIds) 
+                return null;
+
+            const itemsToShow = 5;
+            let hasLinks = false;
+            let listItemCount = 0;
+            let container = document.createElement("div");
+            container.classList.add("list-container")
+            let linkList = container.createChild("ul", "node-link-list");            
+            let initiallyHiddenItems = [];
+            for (let nodeId of nodeIds) {
+                let node = WebInspector.domTreeManager.nodeForId(nodeId);
+                if (!node)
+                    continue;
+                let link = WebInspector.linkifyAccessibilityNodeReference(node);
+                hasLinks = true;
+                let li = linkList.createChild("li");
+                li.appendChild(link);
+                if (listItemCount >= itemsToShow) {  
+                    li.hidden = true;
+                    initiallyHiddenItems.push(li);
+                } 
+                listItemCount++;
+            }
+            container.appendChild(linkList);
+            if (listItemCount > itemsToShow) {
+                let moreNodesButton = container.createChild("button", "expand-list-button");
+                moreNodesButton.textContent = WebInspector.UIString("%d More\u2026").format(listItemCount - itemsToShow);
+                moreNodesButton.addEventListener("click", () => {
+                    initiallyHiddenItems.forEach((element) => element.hidden = false);
+                    moreNodesButton.remove();
+                });
+            }
+            if (hasLinks) 
+                return container;
+
+            return null;
+        }
+
+        function accessibilityPropertiesCallback(accessibilityProperties) {
+            if (this.domNode !== domNode)
+                return;
+
+            // Make sure the current set of properties is available in the closure scope for the helper functions.
+            properties = accessibilityProperties;
+
+            if (accessibilityProperties && accessibilityProperties.exists) {
+
+                var activeDescendantLink = linkForNodeId(accessibilityProperties.activeDescendantNodeId);
+                var busy = booleanValueToLocalizedStringIfPropertyDefined("busy");
+
+                var checked = "";
+                if (accessibilityProperties.checked !== undefined) {
+                    if (accessibilityProperties.checked === DOMAgent.AccessibilityPropertiesChecked.True)
+                        checked = WebInspector.UIString("Yes");
+                    else if (accessibilityProperties.checked === DOMAgent.AccessibilityPropertiesChecked.Mixed)
+                        checked = WebInspector.UIString("Mixed");
+                    else // DOMAgent.AccessibilityPropertiesChecked.False
+                        checked = WebInspector.UIString("No");
+                }
+
+                // Accessibility tree children are not a 1:1 mapping with DOM tree children.
+                var childNodeLinkList = linkListForNodeIds(accessibilityProperties.childNodeIds);
+                
+                var controlledNodeLinkList = linkListForNodeIds(accessibilityProperties.controlledNodeIds);
+                
+                var current = "";
+                switch (accessibilityProperties.current) {
+                case DOMAgent.AccessibilityPropertiesCurrent.True:
+                    current = WebInspector.UIString("True");
+                    break;
+                case DOMAgent.AccessibilityPropertiesCurrent.Page:
+                    current = WebInspector.UIString("Page");
+                    break;
+                case DOMAgent.AccessibilityPropertiesCurrent.Location:
+                    current = WebInspector.UIString("Location");
+                    break;
+                case DOMAgent.AccessibilityPropertiesCurrent.Step:
+                    current = WebInspector.UIString("Step");
+                    break;
+                case DOMAgent.AccessibilityPropertiesCurrent.Date:
+                    current = WebInspector.UIString("Date");
+                    break;
+                case DOMAgent.AccessibilityPropertiesCurrent.Time:
+                    current = WebInspector.UIString("Time");
+                    break;
+                default:
+                    current = "";
+                }
+                
+                var disabled = booleanValueToLocalizedStringIfTrue("disabled");
+                var expanded = booleanValueToLocalizedStringIfPropertyDefined("expanded");
+                var flowedNodeLinkList = linkListForNodeIds(accessibilityProperties.flowedNodeIds);
+                var focused = booleanValueToLocalizedStringIfPropertyDefined("focused");
+                
+                var ignored = "";
+                if (accessibilityProperties.ignored) {
+                    ignored = WebInspector.UIString("Yes");
+                    if (accessibilityProperties.hidden)
+                        ignored = WebInspector.UIString("%s (hidden)").format(ignored);
+                    else if (accessibilityProperties.ignoredByDefault)
+                        ignored = WebInspector.UIString("%s (default)").format(ignored);
+                }
+
+                var invalid = "";
+                if (accessibilityProperties.invalid === DOMAgent.AccessibilityPropertiesInvalid.True)
+                    invalid = WebInspector.UIString("Yes");
+                else if (accessibilityProperties.invalid === DOMAgent.AccessibilityPropertiesInvalid.Grammar)
+                    invalid = WebInspector.UIString("Grammar");
+                else if (accessibilityProperties.invalid === DOMAgent.AccessibilityPropertiesInvalid.Spelling)
+                    invalid = WebInspector.UIString("Spelling");
+
+                var label = accessibilityProperties.label;
+
+                var liveRegionStatus = "";
+                var liveRegionStatusNode = null;
+                var liveRegionStatusToken = accessibilityProperties.liveRegionStatus;
+                switch(liveRegionStatusToken) {
+                case DOMAgent.AccessibilityPropertiesLiveRegionStatus.Assertive:
+                    liveRegionStatus = WebInspector.UIString("Assertive");
+                    break;
+                case DOMAgent.AccessibilityPropertiesLiveRegionStatus.Polite:
+                    liveRegionStatus = WebInspector.UIString("Polite");
+                    break;
+                default:
+                    liveRegionStatus = "";
+                }
+                if (liveRegionStatus) {
+                    var liveRegionRelevant = accessibilityProperties.liveRegionRelevant;
+                    // Append @aria-relevant values. E.g. "Live: Assertive (Additions, Text)".
+                    if (liveRegionRelevant && liveRegionRelevant.length) {
+                        // @aria-relevant="all" is exposed as ["additions","removals","text"], in order.
+                        // This order is controlled in WebCore and expected in WebInspectorUI.
+                        if (liveRegionRelevant.length === 3 
+                            && liveRegionRelevant[0] === DOMAgent.LiveRegionRelevant.Additions
+                            && liveRegionRelevant[1] === DOMAgent.LiveRegionRelevant.Removals
+                            && liveRegionRelevant[2] === DOMAgent.LiveRegionRelevant.Text)
+                            liveRegionRelevant = [WebInspector.UIString("All Changes")];
+                        else {
+                            // Reassign localized strings in place: ["additions","text"] becomes ["Additions","Text"].
+                            liveRegionRelevant = liveRegionRelevant.map(function(value) {
+                                switch (value) {
+                                case DOMAgent.LiveRegionRelevant.Additions:
+                                    return WebInspector.UIString("Additions");
+                                case DOMAgent.LiveRegionRelevant.Removals:
+                                    return WebInspector.UIString("Removals");
+                                case DOMAgent.LiveRegionRelevant.Text:
+                                    return WebInspector.UIString("Text");
+                                default: // If WebCore sends a new unhandled value, display as a String.
+                                    return "\"" + value + "\"";
+                                }
+                            });
+                        }
+                        liveRegionStatus += " (" + liveRegionRelevant.join(", ") + ")";
+                    }
+                    // Clarify @aria-atomic if necessary.
+                    if (accessibilityProperties.liveRegionAtomic) {
+                        liveRegionStatusNode = document.createElement("div");
+                        liveRegionStatusNode.className = "value-with-clarification";
+                        liveRegionStatusNode.setAttribute("role", "text");
+                        liveRegionStatusNode.append(liveRegionStatus);
+                        var clarificationNode = document.createElement("div");
+                        clarificationNode.className = "clarification";
+                        clarificationNode.append(WebInspector.UIString("Region announced in its entirety."));
+                        liveRegionStatusNode.appendChild(clarificationNode);
+                    }
+                }
+
+                var mouseEventNodeId = accessibilityProperties.mouseEventNodeId;
+                var mouseEventTextValue = "";
+                var mouseEventNodeLink = null;
+                if (mouseEventNodeId) {
+                    if (mouseEventNodeId === accessibilityProperties.nodeId)
+                        mouseEventTextValue = WebInspector.UIString("Yes");
+                    else
+                        mouseEventNodeLink = linkForNodeId(mouseEventNodeId);
+                }
+
+                var ownedNodeLinkList = linkListForNodeIds(accessibilityProperties.ownedNodeIds);
+
+                // Accessibility tree parent is not a 1:1 mapping with the DOM tree parent.
+                var parentNodeLink = linkForNodeId(accessibilityProperties.parentNodeId);
+
+                var pressed = booleanValueToLocalizedStringIfPropertyDefined("pressed");
+                var readonly = booleanValueToLocalizedStringIfTrue("readonly");
+                var required = booleanValueToLocalizedStringIfPropertyDefined("required");
+
+                var role = accessibilityProperties.role;
+                if (role === "" || role === "unknown")
+                    role = WebInspector.UIString("No exact ARIA role match.");
+                else if (role) {
+                    if (!domNode.getAttribute("role"))
+                        role = WebInspector.UIString("%s (default)").format(role);
+                    else if (domNode.getAttribute("role") !== role)
+                        role = WebInspector.UIString("%s (computed)").format(role);
+                }
+
+                var selected = booleanValueToLocalizedStringIfTrue("selected");
+                var selectedChildNodeLinkList = linkListForNodeIds(accessibilityProperties.selectedChildNodeIds);
+
+                // Assign all the properties to their respective views.
+                this._accessibilityNodeActiveDescendantRow.value = activeDescendantLink || "";
+                this._accessibilityNodeBusyRow.value = busy;
+                this._accessibilityNodeCheckedRow.value = checked;
+                this._accessibilityNodeChildrenRow.value = childNodeLinkList || "";
+                this._accessibilityNodeControlsRow.value = controlledNodeLinkList || "";
+                this._accessibilityNodeCurrentRow.value = current;
+                this._accessibilityNodeDisabledRow.value = disabled;
+                this._accessibilityNodeExpandedRow.value = expanded;
+                this._accessibilityNodeFlowsRow.value = flowedNodeLinkList || "";
+                this._accessibilityNodeFocusedRow.value = focused;
+                this._accessibilityNodeIgnoredRow.value = ignored;
+                this._accessibilityNodeInvalidRow.value = invalid;
+                this._accessibilityNodeLabelRow.value = label;
+                this._accessibilityNodeLiveRegionStatusRow.value = liveRegionStatusNode || liveRegionStatus;
+                
+                // Row label changes based on whether the value is a delegate node link.
+                this._accessibilityNodeMouseEventRow.label = mouseEventNodeLink ? WebInspector.UIString("Click Listener") : WebInspector.UIString("Clickable");
+                this._accessibilityNodeMouseEventRow.value = mouseEventNodeLink || mouseEventTextValue;
+
+                this._accessibilityNodeOwnsRow.value = ownedNodeLinkList || "";
+                this._accessibilityNodeParentRow.value = parentNodeLink || "";
+                this._accessibilityNodePressedRow.value = pressed;
+                this._accessibilityNodeReadonlyRow.value = readonly;
+                this._accessibilityNodeRequiredRow.value = required;
+                this._accessibilityNodeRoleRow.value = role;
+                this._accessibilityNodeSelectedRow.value = selected;
+
+                this._accessibilityNodeSelectedChildrenRow.label = WebInspector.UIString("Selected Items");
+                this._accessibilityNodeSelectedChildrenRow.value = selectedChildNodeLinkList || "";
+                if (selectedChildNodeLinkList && accessibilityProperties.selectedChildNodeIds.length === 1)
+                    this._accessibilityNodeSelectedChildrenRow.label = WebInspector.UIString("Selected Item");                
+
+                // Display order, not alphabetical as above.
+                this._accessibilityGroup.rows = [
+                    // Global properties for all elements.
+                    this._accessibilityNodeIgnoredRow,
+                    this._accessibilityNodeRoleRow,
+                    this._accessibilityNodeLabelRow,
+                    this._accessibilityNodeParentRow,
+                    this._accessibilityNodeActiveDescendantRow,
+                    this._accessibilityNodeSelectedChildrenRow,
+                    this._accessibilityNodeChildrenRow,
+                    this._accessibilityNodeOwnsRow,
+                    this._accessibilityNodeControlsRow,
+                    this._accessibilityNodeFlowsRow,
+                    this._accessibilityNodeMouseEventRow,
+                    this._accessibilityNodeFocusedRow,
+                    this._accessibilityNodeBusyRow,
+                    this._accessibilityNodeLiveRegionStatusRow,
+                    this._accessibilityNodeCurrentRow,
+
+                    // Properties exposed for all input-type elements.
+                    this._accessibilityNodeDisabledRow,
+                    this._accessibilityNodeInvalidRow,
+                    this._accessibilityNodeRequiredRow,
+
+                    // Role-specific properties.
+                    this._accessibilityNodeCheckedRow,
+                    this._accessibilityNodeExpandedRow,
+                    this._accessibilityNodePressedRow,
+                    this._accessibilityNodeReadonlyRow,
+                    this._accessibilityNodeSelectedRow
+                ];
+
+                this._accessibilityEmptyRow.hideEmptyMessage();
+
+            } else {
+                this._accessibilityGroup.rows = [this._accessibilityEmptyRow];
+                this._accessibilityEmptyRow.showEmptyMessage();
+            }
+        }
+
+        domNode.accessibilityProperties(accessibilityPropertiesCallback.bind(this));
+    }
+
+    _attributesChanged(event)
+    {
+        if (event.data.node !== this.domNode)
+            return;
+        this._refreshAttributes();
+        this._refreshAccessibility();
+    }
+
+    _characterDataModified(event)
+    {
+        if (event.data.node !== this.domNode)
+            return;
+        this._identityNodeValueRow.value = this.domNode.nodeValue();
+    }
+
+    _nodeTypeDisplayName()
+    {
+        switch (this.domNode.nodeType()) {
+        case Node.ELEMENT_NODE:
+            return WebInspector.UIString("Element");
+        case Node.TEXT_NODE:
+            return WebInspector.UIString("Text Node");
+        case Node.COMMENT_NODE:
+            return WebInspector.UIString("Comment");
+        case Node.DOCUMENT_NODE:
+            return WebInspector.UIString("Document");
+        case Node.DOCUMENT_TYPE_NODE:
+            return WebInspector.UIString("Document Type");
+        case Node.DOCUMENT_FRAGMENT_NODE:
+            return WebInspector.UIString("Document Fragment");
+        case Node.CDATA_SECTION_NODE:
+            return WebInspector.UIString("Character Data");
+        case Node.PROCESSING_INSTRUCTION_NODE:
+            return WebInspector.UIString("Processing Instruction");
+        default:
+            console.error("Unknown DOM node type: ", this.domNode.nodeType());
+            return this.domNode.nodeType();
+        }
+    }
+
+    _createAttributesDataGrid()
+    {
+        var domNode = this.domNode;
+        if (!domNode || !domNode.hasAttributes())
+            return null;
+
+        var columns = {name: {title: WebInspector.UIString("Name"), width: "30%"}, value: {title: WebInspector.UIString("Value")}};
+        var dataGrid = new WebInspector.DataGrid(columns);
+
+        var attributes = domNode.attributes();
+        for (var i = 0; i < attributes.length; ++i) {
+            var attribute = attributes[i];
+
+            var node = new WebInspector.DataGridNode({name: attribute.name, value: attribute.value || ""}, false);
+            dataGrid.appendChild(node);
+        }
+
+        return dataGrid;
+    }
+};
+
+WebInspector.DOMNodeDetailsSidebarPanel.PropertiesObjectGroupName = "dom-node-details-sidebar-properties-object-group";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.css b/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.css
new file mode 100644
index 000000000..b21dfd88f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.dom-storage > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.content-view.dom-storage > .data-grid tr:matches(.duplicate-key, .missing-key) td.key-column,
+.content-view.dom-storage > .data-grid tr.missing-value td.value-column {
+    background-color: hsl(0, 100%, 96%);
+}
+
+.content-view.dom-storage > .data-grid:focus tr.selected:matches(.duplicate-key, .missing-key) td.key-column,
+.content-view.dom-storage > .data-grid:focus tr.selected.missing-value td.value-column {
+    background-color: hsl(0, 42%, 76%);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js b/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js
new file mode 100644
index 000000000..f8e2451b9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMStorageContentView.js
@@ -0,0 +1,267 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013 Samsung Electronics. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageContentView = class DOMStorageContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        super(representedObject);
+
+        this.element.classList.add("dom-storage");
+
+        representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemsCleared, this.itemsCleared, this);
+        representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemAdded, this.itemAdded, this);
+        representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemRemoved, this.itemRemoved, this);
+        representedObject.addEventListener(WebInspector.DOMStorageObject.Event.ItemUpdated, this.itemUpdated, this);
+
+        let columns = {};
+        columns.key = {title: WebInspector.UIString("Key"), sortable: true};
+        columns.value = {title: WebInspector.UIString("Value"), sortable: true};
+
+        this._dataGrid = new WebInspector.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this));
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("dom-storage-content-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("dom-storage-content-view-sort", "key");
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+
+        this.addSubview(this._dataGrid);
+
+        this._populate();
+    }
+
+    // Public
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.DOMStorage;
+        cookie.isLocalStorage = this.representedObject.isLocalStorage();
+        cookie.host = this.representedObject.host;
+    }
+
+    itemsCleared(event)
+    {
+        this._dataGrid.removeChildren();
+        this._dataGrid.addPlaceholderNode();
+    }
+
+    itemRemoved(event)
+    {
+        for (let node of this._dataGrid.children) {
+            if (node.data.key === event.data.key)
+                return this._dataGrid.removeChild(node);
+        }
+    }
+
+    itemAdded(event)
+    {
+        let {key, value} = event.data;
+        value = this._truncateValue(value);
+
+        // Enforce key uniqueness.
+        for (let node of this._dataGrid.children) {
+            if (node.data.key === key)
+                return;
+        }
+
+        this._dataGrid.appendChild(new WebInspector.DataGridNode({key, value}, false));
+        this._sortDataGrid();
+    }
+
+    itemUpdated(event)
+    {
+        let {key, value} = event.data;
+        value = this._truncateValue(value);
+
+        let keyFound = false;
+        for (let childNode of this._dataGrid.children) {
+            if (childNode.data.key === key) {
+                // Remove any rows that are now duplicates.
+                if (keyFound) {
+                    this._dataGrid.removeChild(childNode);
+                    continue;
+                }
+
+                keyFound = true;
+                childNode.data.value = value;
+                childNode.refresh();
+            }
+        }
+        this._sortDataGrid();
+    }
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    }
+
+    // Private
+
+    _truncateValue(value)
+    {
+        return value.truncate(200);
+    }
+
+    _populate()
+    {
+        this.representedObject.getEntries(function(error, entries) {
+            if (error)
+                return;
+
+            for (let [key, value] of entries) {
+                if (!key || !value)
+                    continue;
+
+                value = this._truncateValue(value);
+                let node = new WebInspector.DataGridNode({key, value}, false);
+                this._dataGrid.appendChild(node);
+            }
+
+            this._sortDataGrid();
+            this._dataGrid.addPlaceholderNode();
+            this._dataGrid.updateLayout();
+        }.bind(this));
+    }
+
+    _sortDataGrid()
+    {
+        let sortColumnIdentifier = this._dataGrid.sortColumnIdentifier || "key";
+
+        function comparator(a, b)
+        {
+            return a.data[sortColumnIdentifier].localeCompare(b.data[sortColumnIdentifier]);
+        }
+
+        this._dataGrid.sortNodesImmediately(comparator);
+    }
+
+    _deleteCallback(node)
+    {
+        if (!node || node.isPlaceholderNode)
+            return;
+
+        this._dataGrid.removeChild(node);
+        this.representedObject.removeItem(node.data["key"]);
+    }
+
+    _editingCallback(editingNode, columnIdentifier, oldText, newText, moveDirection)
+    {
+        var key = editingNode.data["key"].trim().removeWordBreakCharacters();
+        var value = editingNode.data["value"].trim().removeWordBreakCharacters();
+        var previousValue = oldText.trim().removeWordBreakCharacters();
+        var enteredValue = newText.trim().removeWordBreakCharacters();
+        var hasUncommittedEdits = editingNode.__hasUncommittedEdits;
+        var hasChange = previousValue !== enteredValue;
+        var isEditingKey = columnIdentifier === "key";
+        var isEditingValue = !isEditingKey;
+        var domStorage = this.representedObject;
+
+        // Nothing changed, just bail.
+        if (!hasChange && !hasUncommittedEdits)
+            return;
+
+        // Something changed, save the original key/value and enter uncommitted state.
+        if (hasChange && !editingNode.__hasUncommittedEdits) {
+            editingNode.__hasUncommittedEdits = true;
+            editingNode.__originalKey = isEditingKey ? previousValue : key;
+            editingNode.__originalValue = isEditingValue ? previousValue : value;
+        }
+
+        function cleanup()
+        {
+            editingNode.element.classList.remove(WebInspector.DOMStorageContentView.MissingKeyStyleClassName);
+            editingNode.element.classList.remove(WebInspector.DOMStorageContentView.MissingValueStyleClassName);
+            editingNode.element.classList.remove(WebInspector.DOMStorageContentView.DuplicateKeyStyleClassName);
+            editingNode.__hasUncommittedEdits = undefined;
+            editingNode.__originalKey = undefined;
+            editingNode.__originalValue = undefined;
+        }
+
+        function restoreOriginalValues()
+        {
+            editingNode.data.key = editingNode.__originalKey;
+            editingNode.data.value = editingNode.__originalValue;
+            editingNode.refresh();
+            cleanup();
+        }
+
+        // If the key/value field was cleared, add "missing" style.
+        if (isEditingKey) {
+            if (key.length)
+                editingNode.element.classList.remove(WebInspector.DOMStorageContentView.MissingKeyStyleClassName);
+            else
+                editingNode.element.classList.add(WebInspector.DOMStorageContentView.MissingKeyStyleClassName);
+        } else if (isEditingValue) {
+            if (value.length)
+                editingNode.element.classList.remove(WebInspector.DOMStorageContentView.MissingValueStyleClassName);
+            else
+                editingNode.element.classList.add(WebInspector.DOMStorageContentView.MissingValueStyleClassName);
+        }
+
+        // Check for key duplicates. If this is a new row, or an existing row that changed key.
+        var keyChanged = key !== editingNode.__originalKey;
+        if (keyChanged) {
+            if (domStorage.entries.has(key))
+                editingNode.element.classList.add(WebInspector.DOMStorageContentView.DuplicateKeyStyleClassName);
+            else
+                editingNode.element.classList.remove(WebInspector.DOMStorageContentView.DuplicateKeyStyleClassName);
+        }
+
+        // See if we are done editing this row or not.
+        var columnIndex = this._dataGrid.orderedColumns.indexOf(columnIdentifier);
+        var mayMoveToNextRow = moveDirection === "forward" && columnIndex === this._dataGrid.orderedColumns.length - 1;
+        var mayMoveToPreviousRow = moveDirection === "backward" && columnIndex === 0;
+        var doneEditing = mayMoveToNextRow || mayMoveToPreviousRow || !moveDirection;
+
+        // Expecting more edits on this row.
+        if (!doneEditing)
+            return;
+
+        // Key and value were cleared, remove the row.
+        if (!key.length && !value.length && !editingNode.isPlaceholderNode) {
+            this._dataGrid.removeChild(editingNode);
+            domStorage.removeItem(editingNode.__originalKey);
+            return;                
+        }
+
+        // Done editing but leaving the row in an invalid state. Leave in uncommitted state.
+        var isDuplicate = editingNode.element.classList.contains(WebInspector.DOMStorageContentView.DuplicateKeyStyleClassName);
+        if (!key.length || !value.length || isDuplicate)
+            return;
+
+        // Commit.
+        if (keyChanged && !editingNode.isPlaceholderNode)
+            domStorage.removeItem(editingNode.__originalKey);
+        if (editingNode.isPlaceholderNode)
+            this._dataGrid.addPlaceholderNode();
+        cleanup();
+        domStorage.setItem(key, value);
+    }
+};
+
+WebInspector.DOMStorageContentView.DuplicateKeyStyleClassName = "duplicate-key";
+WebInspector.DOMStorageContentView.MissingKeyStyleClassName = "missing-key";
+WebInspector.DOMStorageContentView.MissingValueStyleClassName = "missing-value";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMStorageIcons.css b/Source/WebInspectorUI/UserInterface/Views/DOMStorageIcons.css
new file mode 100644
index 000000000..0d15809ab
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMStorageIcons.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.local-storage-icon .icon {
+    content: -webkit-image-set(url(../Images/LocalStorage.png) 1x, url(../Images/LocalStorage@2x.png) 2x);
+}
+
+.session-storage-icon .icon {
+    content: -webkit-image-set(url(../Images/SessionStorage.png) 1x, url(../Images/SessionStorage@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js
new file mode 100644
index 000000000..bb2fe36e8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMStorageTreeElement.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMStorageTreeElement = class DOMStorageTreeElement extends WebInspector.StorageTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DOMStorageObject);
+
+        if (representedObject.isLocalStorage())
+            var className = WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName;
+        else
+            var className = WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName;
+
+        super(className, WebInspector.displayNameForHost(representedObject.host), representedObject);
+    }
+
+    // Public
+
+    get name()
+    {
+        return WebInspector.displayNameForHost(this.representedObject.host);
+    }
+
+    get categoryName()
+    {
+        if (this.representedObject.isLocalStorage())
+            return WebInspector.UIString("Local Storage");
+        return WebInspector.UIString("Session Storage");
+    }
+};
+
+WebInspector.DOMStorageTreeElement.LocalStorageIconStyleClassName = "local-storage-icon";
+WebInspector.DOMStorageTreeElement.SessionStorageIconStyleClassName = "session-storage-icon";
diff --git a/Source/WebInspectorUI/UserInterface/DOMTreeContentView.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css
index b00e8b196..b00e8b196 100644
--- a/Source/WebInspectorUI/UserInterface/DOMTreeContentView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
new file mode 100644
index 000000000..add37b243
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
@@ -0,0 +1,520 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeContentView = class DOMTreeContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject);
+
+        super(representedObject);
+
+        this._compositingBordersButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("layer-borders", WebInspector.UIString("Show compositing borders"), WebInspector.UIString("Hide compositing borders"), "Images/LayerBorders.svg", 13, 13);
+        this._compositingBordersButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleCompositingBorders, this);
+        this._compositingBordersButtonNavigationItem.enabled = !!PageAgent.getCompositingBordersVisible;
+
+        WebInspector.showPaintRectsSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showPaintRectsSettingChanged, this);
+        this._paintFlashingButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("paint-flashing", WebInspector.UIString("Enable paint flashing"), WebInspector.UIString("Disable paint flashing"), "Images/PaintFlashing.svg", 16, 16);
+        this._paintFlashingButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePaintFlashing, this);
+        this._paintFlashingButtonNavigationItem.enabled = !!PageAgent.setShowPaintRects;
+        this._paintFlashingButtonNavigationItem.activated = PageAgent.setShowPaintRects && WebInspector.showPaintRectsSetting.value;
+
+        WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+        this._showsShadowDOMButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("shows-shadow-DOM", WebInspector.UIString("Show shadow DOM nodes"), WebInspector.UIString("Hide shadow DOM nodes"), "Images/ShadowDOM.svg", 13, 13);
+        this._showsShadowDOMButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleShowsShadowDOMSetting, this);
+        this._showShadowDOMSettingChanged();
+
+        this.element.classList.add("dom-tree");
+        this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
+
+        this._domTreeOutline = new WebInspector.DOMTreeOutline(true, true, true);
+        this._domTreeOutline.addEventListener(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged, this._selectedNodeDidChange, this);
+        this._domTreeOutline.wireToDomAgent();
+        this._domTreeOutline.editable = true;
+        this.element.appendChild(this._domTreeOutline.element);
+
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._domNodeChanged, this);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._domNodeChanged, this);
+        WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CharacterDataModified, this._domNodeChanged, this);
+
+        this._lastSelectedNodePathSetting = new WebInspector.Setting("last-selected-node-path", null);
+
+        this._numberOfSearchResults = null;
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._showsShadowDOMButtonNavigationItem, this._compositingBordersButtonNavigationItem, this._paintFlashingButtonNavigationItem];
+    }
+
+    get domTreeOutline()
+    {
+        return this._domTreeOutline;
+    }
+
+    get scrollableElements()
+    {
+        return [this.element];
+    }
+
+    shown()
+    {
+        this._domTreeOutline.setVisible(true, WebInspector.isConsoleFocused());
+        this._updateCompositingBordersButtonToMatchPageSettings();
+    }
+
+    hidden()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._domTreeOutline.setVisible(false);
+    }
+
+    closed()
+    {
+        WebInspector.showPaintRectsSetting.removeEventListener(null, null, this);
+        WebInspector.showShadowDOMSetting.removeEventListener(null, null, this);
+        WebInspector.domTreeManager.removeEventListener(null, null, this);
+
+        this._domTreeOutline.close();
+    }
+
+    get selectionPathComponents()
+    {
+        var treeElement = this._domTreeOutline.selectedTreeElement;
+        var pathComponents = [];
+
+        while (treeElement && !treeElement.root) {
+            // The close tag is contained within the element it closes. So skip it since we don't want to
+            // show the same node twice in the hierarchy.
+            if (treeElement.isCloseTag()) {
+                treeElement = treeElement.parent;
+                continue;
+            }
+
+            var pathComponent = new WebInspector.DOMTreeElementPathComponent(treeElement, treeElement.representedObject);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            treeElement = treeElement.parent;
+        }
+
+        return pathComponents;
+    }
+
+    restoreFromCookie(cookie)
+    {
+        if (!cookie || !cookie.nodeToSelect)
+            return;
+
+        this.selectAndRevealDOMNode(cookie.nodeToSelect);
+
+        // Because nodeToSelect is ephemeral, we don't want to keep
+        // it around in the back-forward history entries.
+        cookie.nodeToSelect = undefined;
+    }
+
+    selectAndRevealDOMNode(domNode, preventFocusChange)
+    {
+        this._domTreeOutline.selectDOMNode(domNode, !preventFocusChange);
+    }
+
+    handleCopyEvent(event)
+    {
+        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
+        if (!selectedDOMNode)
+            return;
+
+        event.clipboardData.clearData();
+        event.preventDefault();
+
+        selectedDOMNode.copyNode();
+    }
+
+    get supportsSave()
+    {
+        return WebInspector.canArchiveMainFrame();
+    }
+
+    get saveData()
+    {
+        function saveHandler(forceSaveAs)
+        {
+            WebInspector.archiveMainFrame();
+        }
+
+        return { customSaveHandler: saveHandler };
+    }
+
+    get supportsSearch()
+    {
+        return true;
+    }
+
+    get numberOfSearchResults()
+    {
+        return this._numberOfSearchResults;
+    }
+
+    get hasPerformedSearch()
+    {
+        return this._numberOfSearchResults !== null;
+    }
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._automaticallyRevealFirstSearchResult = reveal;
+
+        // If we haven't shown a search result yet, reveal one now.
+        if (this._automaticallyRevealFirstSearchResult && this._numberOfSearchResults > 0) {
+            if (this._currentSearchResultIndex === -1)
+                this.revealNextSearchResult();
+        }
+    }
+
+    performSearch(query)
+    {
+        if (this._searchQuery === query)
+            return;
+
+        if (this._searchIdentifier) {
+            DOMAgent.discardSearchResults(this._searchIdentifier);
+            this._hideSearchHighlights();
+        }
+
+        this._searchQuery = query;
+        this._searchIdentifier = null;
+        this._numberOfSearchResults = null;
+        this._currentSearchResultIndex = -1;
+
+        function searchResultsReady(error, searchIdentifier, resultsCount)
+        {
+            if (error)
+                return;
+
+            this._searchIdentifier = searchIdentifier;
+            this._numberOfSearchResults = resultsCount;
+
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+
+            this._showSearchHighlights();
+
+            if (this._automaticallyRevealFirstSearchResult)
+                this.revealNextSearchResult();
+        }
+
+        function contextNodesReady(nodeIds)
+        {
+            DOMAgent.performSearch(query, nodeIds, searchResultsReady.bind(this));
+        }
+
+        this.getSearchContextNodes(contextNodesReady.bind(this));
+    }
+
+    getSearchContextNodes(callback)
+    {
+        // Overwrite this to limit the search to just a subtree.
+        // Passing undefined will make DOMAgent.performSearch search through all the documents.
+        callback(undefined);
+    }
+
+    searchCleared()
+    {
+        if (this._searchIdentifier) {
+            DOMAgent.discardSearchResults(this._searchIdentifier);
+            this._hideSearchHighlights();
+        }
+
+        this._searchQuery = null;
+        this._searchIdentifier = null;
+        this._numberOfSearchResults = null;
+        this._currentSearchResultIndex = -1;
+    }
+
+    revealPreviousSearchResult(changeFocus)
+    {
+        if (!this._numberOfSearchResults)
+            return;
+
+        if (this._currentSearchResultIndex > 0)
+            --this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = this._numberOfSearchResults - 1;
+
+        this._revealSearchResult(this._currentSearchResultIndex, changeFocus);
+    }
+
+    revealNextSearchResult(changeFocus)
+    {
+        if (!this._numberOfSearchResults)
+            return;
+
+        if (this._currentSearchResultIndex + 1 < this._numberOfSearchResults)
+            ++this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = 0;
+
+        this._revealSearchResult(this._currentSearchResultIndex, changeFocus);
+    }
+
+    // Protected
+
+    layout()
+    {
+        this._domTreeOutline.updateSelection();
+    }
+
+    // Private
+
+    _revealSearchResult(index, changeFocus)
+    {
+        console.assert(this._searchIdentifier);
+
+        var searchIdentifier = this._searchIdentifier;
+
+        function revealResult(error, nodeIdentifiers)
+        {
+            if (error)
+                return;
+
+            // Bail if the searchIdentifier changed since we started.
+            if (this._searchIdentifier !== searchIdentifier)
+                return;
+
+            console.assert(nodeIdentifiers.length === 1);
+
+            var domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifiers[0]);
+            console.assert(domNode);
+            if (!domNode)
+                return;
+
+            this._domTreeOutline.selectDOMNode(domNode, changeFocus);
+
+            var selectedTreeElement = this._domTreeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                selectedTreeElement.emphasizeSearchHighlight();
+        }
+
+        DOMAgent.getSearchResults(this._searchIdentifier, index, index + 1, revealResult.bind(this));
+    }
+
+    _restoreSelectedNodeAfterUpdate(documentURL, defaultNode)
+    {
+        if (!WebInspector.domTreeManager.restoreSelectedNodeIsAllowed)
+            return;
+
+        function selectNode(lastSelectedNode)
+        {
+            var nodeToFocus = lastSelectedNode;
+            if (!nodeToFocus)
+                nodeToFocus = defaultNode;
+
+            if (!nodeToFocus)
+                return;
+
+            this._dontSetLastSelectedNodePath = true;
+            this.selectAndRevealDOMNode(nodeToFocus, WebInspector.isConsoleFocused());
+            this._dontSetLastSelectedNodePath = false;
+
+            // If this wasn't the last selected node, then expand it.
+            if (!lastSelectedNode && this._domTreeOutline.selectedTreeElement)
+                this._domTreeOutline.selectedTreeElement.expand();
+        }
+
+        function selectLastSelectedNode(nodeId)
+        {
+            if (!WebInspector.domTreeManager.restoreSelectedNodeIsAllowed)
+                return;
+
+            selectNode.call(this, WebInspector.domTreeManager.nodeForId(nodeId));
+        }
+
+        if (documentURL && this._lastSelectedNodePathSetting.value && this._lastSelectedNodePathSetting.value.path && this._lastSelectedNodePathSetting.value.url === documentURL.hash)
+            WebInspector.domTreeManager.pushNodeByPathToFrontend(this._lastSelectedNodePathSetting.value.path, selectLastSelectedNode.bind(this));
+        else
+            selectNode.call(this);
+    }
+
+    _selectedNodeDidChange(event)
+    {
+        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
+        if (selectedDOMNode && !this._dontSetLastSelectedNodePath)
+            this._lastSelectedNodePathSetting.value = {url: selectedDOMNode.ownerDocument.documentURL.hash, path: selectedDOMNode.path()};
+
+        if (selectedDOMNode)
+            ConsoleAgent.addInspectedNode(selectedDOMNode.id);
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _pathComponentSelected(event)
+    {
+        console.assert(event.data.pathComponent instanceof WebInspector.DOMTreeElementPathComponent);
+        console.assert(event.data.pathComponent.domTreeElement instanceof WebInspector.DOMTreeElement);
+
+        this._domTreeOutline.selectDOMNode(event.data.pathComponent.domTreeElement.representedObject, true);
+    }
+
+    _domNodeChanged(event)
+    {
+        var selectedDOMNode = this._domTreeOutline.selectedDOMNode();
+        if (selectedDOMNode !== event.data.node)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _mouseWasClicked(event)
+    {
+        var anchorElement = event.target.enclosingNodeOrSelfWithNodeName("a");
+        if (!anchorElement || !anchorElement.href)
+            return;
+
+        // Prevent the link from navigating, since we don't do any navigation by following links normally.
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (WebInspector.isBeingEdited(anchorElement)) {
+            // Don't follow the link when it is being edited.
+            return;
+        }
+
+        // Cancel any pending link navigation.
+        if (this._followLinkTimeoutIdentifier) {
+            clearTimeout(this._followLinkTimeoutIdentifier);
+            delete this._followLinkTimeoutIdentifier;
+        }
+
+        // If this is a double-click (or multiple-click), return early.
+        if (event.detail > 1)
+            return;
+
+        function followLink()
+        {
+            // Since followLink is delayed, the call to WebInspector.openURL can't look at window.event
+            // to see if the command key is down like it normally would. So we need to do that check
+            // before calling WebInspector.openURL.
+            var alwaysOpenExternally = event ? event.metaKey : false;
+            WebInspector.openURL(anchorElement.href, this._frame, alwaysOpenExternally, anchorElement.lineNumber);
+        }
+
+        // Start a timeout since this is a single click, if the timeout is canceled before it fires,
+        // then a double-click happened or another link was clicked.
+        // FIXME: The duration might be longer or shorter than the user's configured double click speed.
+        this._followLinkTimeoutIdentifier = setTimeout(followLink.bind(this), 333);
+    }
+
+    _toggleCompositingBorders(event)
+    {
+        console.assert(PageAgent.setCompositingBordersVisible);
+
+        var activated = !this._compositingBordersButtonNavigationItem.activated;
+        this._compositingBordersButtonNavigationItem.activated = activated;
+        PageAgent.setCompositingBordersVisible(activated);
+    }
+
+    _togglePaintFlashing(event)
+    {
+        WebInspector.showPaintRectsSetting.value = !WebInspector.showPaintRectsSetting.value;
+    }
+
+    _updateCompositingBordersButtonToMatchPageSettings()
+    {
+        var button = this._compositingBordersButtonNavigationItem;
+
+        // We need to sync with the page settings since these can be controlled
+        // in a different way than just using the navigation bar button.
+        PageAgent.getCompositingBordersVisible(function(error, compositingBordersVisible) {
+            button.activated = error ? false : compositingBordersVisible;
+            button.enabled = error !== "unsupported";
+        });
+    }
+
+    _showPaintRectsSettingChanged(event)
+    {
+        console.assert(PageAgent.setShowPaintRects);
+
+        this._paintFlashingButtonNavigationItem.activated = WebInspector.showPaintRectsSetting.value;
+
+        PageAgent.setShowPaintRects(this._paintFlashingButtonNavigationItem.activated);
+    }
+
+    _showShadowDOMSettingChanged(event)
+    {
+        this._showsShadowDOMButtonNavigationItem.activated = WebInspector.showShadowDOMSetting.value;
+    }
+
+    _toggleShowsShadowDOMSetting(event)
+    {
+        WebInspector.showShadowDOMSetting.value = !WebInspector.showShadowDOMSetting.value;
+    }
+
+    _showSearchHighlights()
+    {
+        console.assert(this._searchIdentifier);
+
+        this._searchResultNodes = [];
+
+        var searchIdentifier = this._searchIdentifier;
+
+        DOMAgent.getSearchResults(this._searchIdentifier, 0, this._numberOfSearchResults, function(error, nodeIdentifiers) {
+            if (error)
+                return;
+
+            if (this._searchIdentifier !== searchIdentifier)
+                return;
+
+            console.assert(nodeIdentifiers.length === this._numberOfSearchResults);
+
+            for (var i = 0; i < nodeIdentifiers.length; ++i) {
+                var domNode = WebInspector.domTreeManager.nodeForId(nodeIdentifiers[i]);
+                console.assert(domNode);
+                if (!domNode)
+                    continue;
+
+                this._searchResultNodes.push(domNode);
+
+                var treeElement = this._domTreeOutline.findTreeElement(domNode);
+                console.assert(treeElement);
+                if (treeElement)
+                    treeElement.highlightSearchResults(this._searchQuery);
+            }
+        }.bind(this));
+    }
+
+    _hideSearchHighlights()
+    {
+        if (!this._searchResultNodes)
+            return;
+
+        for (var domNode of this._searchResultNodes) {
+            var treeElement = this._domTreeOutline.findTreeElement(domNode);
+            if (treeElement)
+                treeElement.hideSearchHighlights();
+        }
+
+        delete this._searchResultNodes;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGrid.css
new file mode 100644
index 000000000..f8fbee3ca
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGrid.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.dom-tree-data-grid .data-grid {
+    border-right: none;
+    border-left: none;
+    border-bottom: none;
+}
+
+.dom-tree-data-grid .name-column .icon {
+    /* FIXME: There can be multiple types of DOM nodes that we might need to support in the future. */
+    content: url(../Images/DOMElement.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGrid.js
new file mode 100644
index 000000000..c4533a9a5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGrid.js
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeDataGrid = class DOMTreeDataGrid extends WebInspector.DataGrid
+{
+    constructor()
+    {
+        super({
+            name: {title: WebInspector.UIString("Node"), sortable: false}
+        });
+
+        this._previousHoveredElement = null;
+
+        this.element.classList.add("inline", "dom-tree-data-grid");
+
+        this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
+        this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
+    }
+
+    // Private
+
+    _onmousemove(event)
+    {
+        var gridNode = this.dataGridNodeFromNode(event.target);
+        if (!gridNode || this._previousHoveredElement === gridNode.domNode)
+            return;
+        this._previousHoveredElement = gridNode.domNode;
+        WebInspector.domTreeManager.highlightDOMNode(gridNode.domNode.id);
+    }
+
+    _onmouseout(event) {
+        if (!this._previousHoveredElement)
+            return;
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._previousHoveredElement = null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js
new file mode 100644
index 000000000..1434028ee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2013 Adobe Systems Inc. All rights reserved.
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeDataGridNode = class DOMTreeDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(domNode)
+    {
+        super();
+
+        this._nameLabel = null;
+        this._domNode = domNode;
+        this._updateNodeName();
+    }
+
+    get domNode()
+    {
+        return this._domNode;
+    }
+
+    // DataGridNode Overrides.
+
+    createCellContent(columnIdentifier, cell)
+    {
+        if (columnIdentifier !== "name")
+            return super.createCellContent(columnIdentifier, cell);
+
+        var cell = this._makeNameCell();
+        this._updateNameCellData();
+        return cell;
+    }
+
+    // Private
+
+    _updateNodeName()
+    {
+        this.data = {name: WebInspector.displayNameForNode(this._domNode)};
+    }
+
+    _makeNameCell()
+    {
+        var fragment = document.createDocumentFragment();
+
+        fragment.appendChild(document.createElement("img")).classList.add("icon");
+
+        this._nameLabel = document.createElement("div");
+        this._nameLabel.classList.add("label");
+        fragment.appendChild(this._nameLabel);
+
+        var goToButton = fragment.appendChild(WebInspector.createGoToArrowButton());
+        goToButton.addEventListener("click", this._goToArrowWasClicked.bind(this), false);
+
+        return fragment;
+    }
+
+    _updateNameCellData()
+    {
+        this._nameLabel.textContent = this.data.name;
+    }
+
+    _goToArrowWasClicked()
+    {
+        WebInspector.showMainFrameDOMTree(this._domNode);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
new file mode 100644
index 000000000..eff4193a1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
@@ -0,0 +1,1578 @@
+/*
+ * Copyright (C) 2007, 2008, 2013, 2015 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElement
+{
+    constructor(node, elementCloseTag)
+    {
+        super("", node);
+
+        this._elementCloseTag = elementCloseTag;
+        this.hasChildren = !elementCloseTag && this._hasVisibleChildren();
+
+        if (this.representedObject.nodeType() === Node.ELEMENT_NODE && !elementCloseTag)
+            this._canAddAttributes = true;
+        this._searchQuery = null;
+        this._expandedChildrenLimit = WebInspector.DOMTreeElement.InitialChildrenLimit;
+
+        this._nodeStateChanges = [];
+        this._boundNodeChangedAnimationEnd = this._nodeChangedAnimationEnd.bind(this);
+
+        node.addEventListener(WebInspector.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this);
+    }
+
+    isCloseTag()
+    {
+        return this._elementCloseTag;
+    }
+
+    highlightSearchResults(searchQuery)
+    {
+        if (this._searchQuery !== searchQuery) {
+            this._updateSearchHighlight(false);
+            this._highlightResult = undefined; // A new search query.
+        }
+
+        this._searchQuery = searchQuery;
+        this._searchHighlightsVisible = true;
+        this.updateTitle(true);
+    }
+
+    hideSearchHighlights()
+    {
+        this._searchHighlightsVisible = false;
+        this._updateSearchHighlight(false);
+    }
+
+    emphasizeSearchHighlight()
+    {
+        var highlightElement = this.title.querySelector("." + WebInspector.DOMTreeElement.SearchHighlightStyleClassName);
+        console.assert(highlightElement);
+        if (!highlightElement)
+            return;
+
+        if (this._bouncyHighlightElement)
+            this._bouncyHighlightElement.remove();
+
+        this._bouncyHighlightElement = document.createElement("div");
+        this._bouncyHighlightElement.className = WebInspector.DOMTreeElement.BouncyHighlightStyleClassName;
+        this._bouncyHighlightElement.textContent = highlightElement.textContent;
+
+        // Position and show the bouncy highlight adjusting the coordinates to be inside the TreeOutline's space.
+        var highlightElementRect = highlightElement.getBoundingClientRect();
+        var treeOutlineRect = this.treeOutline.element.getBoundingClientRect();
+        this._bouncyHighlightElement.style.top = (highlightElementRect.top - treeOutlineRect.top) + "px";
+        this._bouncyHighlightElement.style.left = (highlightElementRect.left - treeOutlineRect.left) + "px";
+        this.title.appendChild(this._bouncyHighlightElement);
+
+        function animationEnded()
+        {
+            if (!this._bouncyHighlightElement)
+                return;
+
+            this._bouncyHighlightElement.remove();
+            this._bouncyHighlightElement = null;
+        }
+
+        this._bouncyHighlightElement.addEventListener("animationend", animationEnded.bind(this));
+    }
+
+    _updateSearchHighlight(show)
+    {
+        if (!this._highlightResult)
+            return;
+
+        function updateEntryShow(entry)
+        {
+            switch (entry.type) {
+                case "added":
+                    entry.parent.insertBefore(entry.node, entry.nextSibling);
+                    break;
+                case "changed":
+                    entry.node.textContent = entry.newText;
+                    break;
+            }
+        }
+
+        function updateEntryHide(entry)
+        {
+            switch (entry.type) {
+                case "added":
+                    entry.node.remove();
+                    break;
+                case "changed":
+                    entry.node.textContent = entry.oldText;
+                    break;
+            }
+        }
+
+        var updater = show ? updateEntryShow : updateEntryHide;
+
+        for (var i = 0, size = this._highlightResult.length; i < size; ++i)
+            updater(this._highlightResult[i]);
+    }
+
+    get hovered()
+    {
+        return this._hovered;
+    }
+
+    set hovered(x)
+    {
+        if (this._hovered === x)
+            return;
+
+        this._hovered = x;
+
+        if (this.listItemElement) {
+            if (x) {
+                this.updateSelection();
+                this.listItemElement.classList.add("hovered");
+            } else {
+                this.listItemElement.classList.remove("hovered");
+            }
+        }
+    }
+
+    get editable()
+    {
+        var node = this.representedObject;
+        if (node.isInShadowTree())
+            return false;
+        if (node.isPseudoElement())
+            return false;
+
+        return this.treeOutline.editable;
+    }
+
+    get expandedChildrenLimit()
+    {
+        return this._expandedChildrenLimit;
+    }
+
+    set expandedChildrenLimit(x)
+    {
+        if (this._expandedChildrenLimit === x)
+            return;
+
+        this._expandedChildrenLimit = x;
+        if (this.treeOutline && !this._updateChildrenInProgress)
+            this._updateChildren(true);
+    }
+
+    get expandedChildCount()
+    {
+        var count = this.children.length;
+        if (count && this.children[count - 1]._elementCloseTag)
+            count--;
+        if (count && this.children[count - 1].expandAllButton)
+            count--;
+        return count;
+    }
+
+    nodeStateChanged(change)
+    {
+        if (!change)
+            return;
+
+        this._nodeStateChanges.push(change);
+    }
+
+    showChildNode(node)
+    {
+        console.assert(!this._elementCloseTag);
+        if (this._elementCloseTag)
+            return null;
+
+        var index = this._visibleChildren().indexOf(node);
+        if (index === -1)
+            return null;
+
+        if (index >= this.expandedChildrenLimit) {
+            this._expandedChildrenLimit = index + 1;
+            this._updateChildren(true);
+        }
+
+        return this.children[index];
+    }
+
+    _createTooltipForNode()
+    {
+        var node = this.representedObject;
+        if (!node.nodeName() || node.nodeName().toLowerCase() !== "img")
+            return;
+
+        function setTooltip(error, result, wasThrown)
+        {
+            if (error || wasThrown || !result || result.type !== "string")
+                return;
+
+            try {
+                var properties = JSON.parse(result.description);
+                var offsetWidth = properties[0];
+                var offsetHeight = properties[1];
+                var naturalWidth = properties[2];
+                var naturalHeight = properties[3];
+                if (offsetHeight === naturalHeight && offsetWidth === naturalWidth)
+                    this.tooltip = WebInspector.UIString("%d \xd7 %d pixels").format(offsetWidth, offsetHeight);
+                else
+                    this.tooltip = WebInspector.UIString("%d \xd7 %d pixels (Natural: %d \xd7 %d pixels)").format(offsetWidth, offsetHeight, naturalWidth, naturalHeight);
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function dimensions()
+            {
+                return "[" + this.offsetWidth + "," + this.offsetHeight + "," + this.naturalWidth + "," + this.naturalHeight + "]";
+            }
+
+            object.callFunction(dimensions, undefined, false, setTooltip.bind(this));
+            object.release();
+        }
+        WebInspector.RemoteObject.resolveNode(node, "", resolvedNode.bind(this));
+    }
+
+    updateSelection()
+    {
+        var listItemElement = this.listItemElement;
+        if (!listItemElement)
+            return;
+
+        if (document.body.offsetWidth <= 0) {
+            // The stylesheet hasn't loaded yet or the window is closed,
+            // so we can't calculate what is need. Return early.
+            return;
+        }
+
+        if (!this.selectionElement) {
+            this.selectionElement = document.createElement("div");
+            this.selectionElement.className = "selection selected";
+            listItemElement.insertBefore(this.selectionElement, listItemElement.firstChild);
+        }
+
+        this.selectionElement.style.height = listItemElement.offsetHeight + "px";
+    }
+
+    onattach()
+    {
+        if (this._hovered) {
+            this.updateSelection();
+            this.listItemElement.classList.add("hovered");
+        }
+
+        this.updateTitle();
+
+        if (this.editable) {
+            this.listItemElement.draggable = true;
+            this.listItemElement.addEventListener("dragstart", this);
+        }
+    }
+
+    onpopulate()
+    {
+        if (this.children.length || !this._hasVisibleChildren() || this._elementCloseTag)
+            return;
+
+        this.updateChildren();
+    }
+
+    expandRecursively()
+    {
+        this.representedObject.getSubtree(-1, super.expandRecursively.bind(this, Number.MAX_VALUE));
+    }
+
+    updateChildren(fullRefresh)
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this.representedObject.getChildNodes(this._updateChildren.bind(this, fullRefresh));
+    }
+
+    insertChildElement(child, index, closingTag)
+    {
+        var newElement = new WebInspector.DOMTreeElement(child, closingTag);
+        newElement.selectable = this.treeOutline._selectEnabled;
+        this.insertChild(newElement, index);
+        return newElement;
+    }
+
+    moveChild(child, targetIndex)
+    {
+        // No move needed if the child is already in the right place.
+        if (this.children[targetIndex] === child)
+            return;
+
+        var originalSelectedChild = this.treeOutline.selectedTreeElement;
+
+        this.removeChild(child);
+        this.insertChild(child, targetIndex);
+
+        if (originalSelectedChild !== this.treeOutline.selectedTreeElement)
+            originalSelectedChild.select();
+    }
+
+    _updateChildren(fullRefresh)
+    {
+        if (this._updateChildrenInProgress || !this.treeOutline._visible)
+            return;
+
+        this._updateChildrenInProgress = true;
+
+        var node = this.representedObject;
+        var selectedNode = this.treeOutline.selectedDOMNode();
+        var originalScrollTop = 0;
+
+        var hasVisibleChildren = this._hasVisibleChildren();
+
+        if (fullRefresh || !hasVisibleChildren) {
+            var treeOutlineContainerElement = this.treeOutline.element.parentNode;
+            originalScrollTop = treeOutlineContainerElement.scrollTop;
+            var selectedTreeElement = this.treeOutline.selectedTreeElement;
+            if (selectedTreeElement && selectedTreeElement.hasAncestor(this))
+                this.select();
+            this.removeChildren();
+
+            // No longer have children.
+            if (!hasVisibleChildren) {
+                this.hasChildren = false;
+                this.updateTitle();
+                this._updateChildrenInProgress = false;
+                return;
+            }
+        }
+
+        // We now have children.
+        if (!this.hasChildren) {
+            this.hasChildren = true;
+            this.updateTitle();
+        }
+
+        // Remove any tree elements that no longer have this node (or this node's contentDocument) as their parent.
+        // Keep a list of existing tree elements for nodes that we can use later.
+        var existingChildTreeElements = new Map;
+        for (var i = (this.children.length - 1); i >= 0; --i) {
+            var currentChildTreeElement = this.children[i];
+            var currentNode = currentChildTreeElement.representedObject;
+            var currentParentNode = currentNode.parentNode;
+            if (currentParentNode === node) {
+                existingChildTreeElements.set(currentNode, currentChildTreeElement);
+                continue;
+            }
+
+            var selectedTreeElement = this.treeOutline.selectedTreeElement;
+            if (selectedTreeElement && (selectedTreeElement === currentChildTreeElement || selectedTreeElement.hasAncestor(currentChildTreeElement)))
+                this.select();
+
+            this.removeChildAtIndex(i);
+        }
+
+        // Move / create TreeElements for our visible children.
+        var childIndex = 0;
+        var elementToSelect = null;
+        var visibleChildren = this._visibleChildren();
+        for (var i = 0; i < visibleChildren.length && i < this.expandedChildrenLimit; ++i) {
+            var childNode = visibleChildren[i];
+
+            // Already have a tree element for this child, just move it.
+            var existingChildTreeElement = existingChildTreeElements.get(childNode);
+            if (existingChildTreeElement) {
+                this.moveChild(existingChildTreeElement, i);
+                continue;
+            }
+
+            // No existing tree element for this child. Insert a new element.
+            var newChildTreeElement = this.insertChildElement(childNode, i);
+
+            // Update state.
+            if (childNode === selectedNode)
+                elementToSelect = newChildTreeElement;
+            if (this.expandedChildCount > this.expandedChildrenLimit)
+                this.expandedChildrenLimit++;
+        }
+
+        // Update expand all children button.
+        this.adjustCollapsedRange();
+
+        // Insert closing tag tree element.
+        var lastChild = this.children.lastValue;
+        if (node.nodeType() === Node.ELEMENT_NODE && (!lastChild || !lastChild._elementCloseTag))
+            this.insertChildElement(this.representedObject, this.children.length, true);
+
+        // We want to restore the original selection and tree scroll position after a full refresh, if possible.
+        if (fullRefresh && elementToSelect) {
+            elementToSelect.select();
+            if (treeOutlineContainerElement && originalScrollTop <= treeOutlineContainerElement.scrollHeight)
+                treeOutlineContainerElement.scrollTop = originalScrollTop;
+        }
+
+        this._updateChildrenInProgress = false;
+    }
+
+    adjustCollapsedRange()
+    {
+        // Ensure precondition: only the tree elements for node children are found in the tree
+        // (not the Expand All button or the closing tag).
+        if (this.expandAllButtonElement && this.expandAllButtonElement.__treeElement.parent)
+            this.removeChild(this.expandAllButtonElement.__treeElement);
+
+        var node = this.representedObject;
+        if (!this._hasVisibleChildren())
+            return;
+
+        var visibleChildren = this._visibleChildren();
+        var totalChildrenCount = visibleChildren.length;
+
+        // In case some nodes from the expanded range were removed, pull some nodes from the collapsed range into the expanded range at the bottom.
+        for (var i = this.expandedChildCount, limit = Math.min(this.expandedChildrenLimit, totalChildrenCount); i < limit; ++i)
+            this.insertChildElement(totalChildrenCount[i], i);
+
+        var expandedChildCount = this.expandedChildCount;
+        if (totalChildrenCount > this.expandedChildCount) {
+            var targetButtonIndex = expandedChildCount;
+            if (!this.expandAllButtonElement) {
+                var button = document.createElement("button");
+                button.className = "show-all-nodes";
+                button.value = "";
+
+                var item = new WebInspector.TreeElement(button, null, false);
+                item.selectable = false;
+                item.expandAllButton = true;
+
+                this.insertChild(item, targetButtonIndex);
+                this.expandAllButtonElement = button;
+                this.expandAllButtonElement.__treeElement = item;
+                this.expandAllButtonElement.addEventListener("click", this.handleLoadAllChildren.bind(this), false);
+            } else if (!this.expandAllButtonElement.__treeElement.parent)
+                this.insertChild(this.expandAllButtonElement.__treeElement, targetButtonIndex);
+
+            this.expandAllButtonElement.textContent = WebInspector.UIString("Show All Nodes (%d More)").format(totalChildrenCount - expandedChildCount);
+        } else if (this.expandAllButtonElement)
+            this.expandAllButtonElement = null;
+    }
+
+    handleLoadAllChildren()
+    {
+        var visibleChildren = this._visibleChildren();
+        var totalChildrenCount = visibleChildren.length;
+        this.expandedChildrenLimit = Math.max(visibleChildren.length, this.expandedChildrenLimit + WebInspector.DOMTreeElement.InitialChildrenLimit);
+    }
+
+    onexpand()
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this.updateTitle();
+        this.treeOutline.updateSelection();
+    }
+
+    oncollapse()
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this.updateTitle();
+        this.treeOutline.updateSelection();
+    }
+
+    onreveal()
+    {
+        if (this.listItemElement) {
+            var tagSpans = this.listItemElement.getElementsByClassName("html-tag-name");
+            if (tagSpans.length)
+                tagSpans[0].scrollIntoViewIfNeeded(false);
+            else
+                this.listItemElement.scrollIntoViewIfNeeded(false);
+        }
+    }
+
+    onselect(treeElement, selectedByUser)
+    {
+        this.treeOutline.suppressRevealAndSelect = true;
+        this.treeOutline.selectDOMNode(this.representedObject, selectedByUser);
+        if (selectedByUser)
+            WebInspector.domTreeManager.highlightDOMNode(this.representedObject.id);
+        this.updateSelection();
+        this.treeOutline.suppressRevealAndSelect = false;
+    }
+
+    ondeselect(treeElement)
+    {
+        this.treeOutline.selectDOMNode(null);
+    }
+
+    ondelete()
+    {
+        if (!this.editable)
+            return false;
+
+        var startTagTreeElement = this.treeOutline.findTreeElement(this.representedObject);
+        if (startTagTreeElement)
+            startTagTreeElement.remove();
+        else
+            this.remove();
+        return true;
+    }
+
+    onenter()
+    {
+        if (!this.editable)
+            return false;
+
+        // On Enter or Return start editing the first attribute
+        // or create a new attribute on the selected element.
+        if (this.treeOutline.editing)
+            return false;
+
+        this._startEditing();
+
+        // prevent a newline from being immediately inserted
+        return true;
+    }
+
+    selectOnMouseDown(event)
+    {
+        super.selectOnMouseDown(event);
+
+        if (this._editing)
+            return;
+
+        // Prevent selecting the nearest word on double click.
+        if (event.detail >= 2)
+            event.preventDefault();
+    }
+
+    ondblclick(event)
+    {
+        if (!this.editable)
+            return false;
+
+        if (this._editing || this._elementCloseTag)
+            return;
+
+        if (this._startEditingTarget(event.target))
+            return;
+
+        if (this.hasChildren && !this.expanded)
+            this.expand();
+    }
+
+    _insertInLastAttributePosition(tag, node)
+    {
+        if (tag.getElementsByClassName("html-attribute").length > 0)
+            tag.insertBefore(node, tag.lastChild);
+        else {
+            var nodeName = tag.textContent.match(/^<(.*?)>$/)[1];
+            tag.textContent = "";
+            tag.append("<" + nodeName, node, ">");
+        }
+
+        this.updateSelection();
+    }
+
+    _startEditingTarget(eventTarget)
+    {
+        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
+            return false;
+
+        if (this.representedObject.isInShadowTree() || this.representedObject.isPseudoElement())
+            return false;
+
+        if (this.representedObject.nodeType() !== Node.ELEMENT_NODE && this.representedObject.nodeType() !== Node.TEXT_NODE)
+            return false;
+
+        var textNode = eventTarget.enclosingNodeOrSelfWithClass("html-text-node");
+        if (textNode)
+            return this._startEditingTextNode(textNode);
+
+        var attribute = eventTarget.enclosingNodeOrSelfWithClass("html-attribute");
+        if (attribute)
+            return this._startEditingAttribute(attribute, eventTarget);
+
+        var tagName = eventTarget.enclosingNodeOrSelfWithClass("html-tag-name");
+        if (tagName)
+            return this._startEditingTagName(tagName);
+
+        return false;
+    }
+
+    _populateTagContextMenu(contextMenu, event)
+    {
+        var node = this.representedObject;
+        if (!node.isInShadowTree()) {
+            var attribute = event.target.enclosingNodeOrSelfWithClass("html-attribute");
+
+            // Add attribute-related actions.
+            if (this.editable) {
+                contextMenu.appendItem(WebInspector.UIString("Add Attribute"), this._addNewAttribute.bind(this));
+                if (attribute)
+                    contextMenu.appendItem(WebInspector.UIString("Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
+                contextMenu.appendSeparator();
+            }
+
+            if (WebInspector.cssStyleManager.canForcePseudoClasses()) {
+                var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString("Forced Pseudo-Classes"));
+                this._populateForcedPseudoStateItems(pseudoSubMenu);
+                contextMenu.appendSeparator();
+            }
+        }
+
+        this._populateNodeContextMenu(contextMenu);
+        this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
+    }
+
+    _populateForcedPseudoStateItems(subMenu)
+    {
+        var node = this.representedObject;
+        var enabledPseudoClasses = node.enabledPseudoClasses;
+        // These strings don't need to be localized as they are CSS pseudo-classes.
+        WebInspector.CSSStyleManager.ForceablePseudoClasses.forEach(function(pseudoClass) {
+            var label = pseudoClass.capitalize();
+            var enabled = enabledPseudoClasses.includes(pseudoClass);
+            subMenu.appendCheckboxItem(label, function() {
+                node.setPseudoClassEnabled(pseudoClass, !enabled);
+            }, enabled, false);
+        });
+    }
+
+    _populateTextContextMenu(contextMenu, textNode)
+    {
+        if (this.editable)
+            contextMenu.appendItem(WebInspector.UIString("Edit Text"), this._startEditingTextNode.bind(this, textNode));
+
+        this._populateNodeContextMenu(contextMenu);
+    }
+
+    _populateNodeContextMenu(contextMenu)
+    {
+        // Add free-form node-related actions.
+        if (this.editable)
+            contextMenu.appendItem(WebInspector.UIString("Edit as HTML"), this._editAsHTML.bind(this));
+        contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), this._copyHTML.bind(this));
+        if (this.editable)
+            contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
+
+        let node = this.representedObject;
+        if (node.nodeType() === Node.ELEMENT_NODE)
+            contextMenu.appendItem(WebInspector.UIString("Scroll Into View"), this._scrollIntoView.bind(this));
+    }
+
+    _startEditing()
+    {
+        if (this.treeOutline.selectedDOMNode() !== this.representedObject)
+            return false;
+
+        if (!this.editable)
+            return false;
+
+        var listItem = this._listItemNode;
+
+        if (this._canAddAttributes) {
+            var attribute = listItem.getElementsByClassName("html-attribute")[0];
+            if (attribute)
+                return this._startEditingAttribute(attribute, attribute.getElementsByClassName("html-attribute-value")[0]);
+
+            return this._addNewAttribute();
+        }
+
+        if (this.representedObject.nodeType() === Node.TEXT_NODE) {
+            var textNode = listItem.getElementsByClassName("html-text-node")[0];
+            if (textNode)
+                return this._startEditingTextNode(textNode);
+            return false;
+        }
+    }
+
+    _addNewAttribute()
+    {
+        // Cannot just convert the textual html into an element without
+        // a parent node. Use a temporary span container for the HTML.
+        var container = document.createElement("span");
+        this._buildAttributeDOM(container, " ", "");
+        var attr = container.firstChild;
+        attr.style.marginLeft = "2px"; // overrides the .editing margin rule
+        attr.style.marginRight = "2px"; // overrides the .editing margin rule
+
+        var tag = this.listItemElement.getElementsByClassName("html-tag")[0];
+        this._insertInLastAttributePosition(tag, attr);
+        return this._startEditingAttribute(attr, attr);
+    }
+
+    _triggerEditAttribute(attributeName)
+    {
+        var attributeElements = this.listItemElement.getElementsByClassName("html-attribute-name");
+        for (var i = 0, len = attributeElements.length; i < len; ++i) {
+            if (attributeElements[i].textContent === attributeName) {
+                for (var elem = attributeElements[i].nextSibling; elem; elem = elem.nextSibling) {
+                    if (elem.nodeType !== Node.ELEMENT_NODE)
+                        continue;
+
+                    if (elem.classList.contains("html-attribute-value"))
+                        return this._startEditingAttribute(elem.parentNode, elem);
+                }
+            }
+        }
+    }
+
+    _startEditingAttribute(attribute, elementForSelection)
+    {
+        if (WebInspector.isBeingEdited(attribute))
+            return true;
+
+        var attributeNameElement = attribute.getElementsByClassName("html-attribute-name")[0];
+        if (!attributeNameElement)
+            return false;
+
+        var attributeName = attributeNameElement.textContent;
+
+        function removeZeroWidthSpaceRecursive(node)
+        {
+            if (node.nodeType === Node.TEXT_NODE) {
+                node.nodeValue = node.nodeValue.replace(/\u200B/g, "");
+                return;
+            }
+
+            if (node.nodeType !== Node.ELEMENT_NODE)
+                return;
+
+            for (var child = node.firstChild; child; child = child.nextSibling)
+                removeZeroWidthSpaceRecursive(child);
+        }
+
+        // Remove zero-width spaces that were added by nodeTitleInfo.
+        removeZeroWidthSpaceRecursive(attribute);
+
+        var config = new WebInspector.EditingConfig(this._attributeEditingCommitted.bind(this), this._editingCancelled.bind(this), attributeName);
+        config.setNumberCommitHandler(this._attributeNumberEditingCommitted.bind(this));
+        this._editing = WebInspector.startEditing(attribute, config);
+
+        window.getSelection().setBaseAndExtent(elementForSelection, 0, elementForSelection, 1);
+
+        return true;
+    }
+
+    _startEditingTextNode(textNode)
+    {
+        if (WebInspector.isBeingEdited(textNode))
+            return true;
+
+        var config = new WebInspector.EditingConfig(this._textNodeEditingCommitted.bind(this), this._editingCancelled.bind(this));
+        config.spellcheck = true;
+        this._editing = WebInspector.startEditing(textNode, config);
+        window.getSelection().setBaseAndExtent(textNode, 0, textNode, 1);
+
+        return true;
+    }
+
+    _startEditingTagName(tagNameElement)
+    {
+        if (!tagNameElement) {
+            tagNameElement = this.listItemElement.getElementsByClassName("html-tag-name")[0];
+            if (!tagNameElement)
+                return false;
+        }
+
+        var tagName = tagNameElement.textContent;
+        if (WebInspector.DOMTreeElement.EditTagBlacklist[tagName.toLowerCase()])
+            return false;
+
+        if (WebInspector.isBeingEdited(tagNameElement))
+            return true;
+
+        let closingTagElement = this._distinctClosingTagElement();
+        let originalClosingTagTextContent = closingTagElement ? closingTagElement.textContent : "";
+
+        function keyupListener(event)
+        {
+            if (closingTagElement)
+                closingTagElement.textContent = "</" + tagNameElement.textContent + ">";
+        }
+
+        function editingComitted(element, newTagName)
+        {
+            tagNameElement.removeEventListener("keyup", keyupListener, false);
+            this._tagNameEditingCommitted.apply(this, arguments);
+        }
+
+        function editingCancelled()
+        {
+            if (closingTagElement)
+                closingTagElement.textContent = originalClosingTagTextContent;
+
+            tagNameElement.removeEventListener("keyup", keyupListener, false);
+            this._editingCancelled.apply(this, arguments);
+        }
+
+        tagNameElement.addEventListener("keyup", keyupListener, false);
+
+        var config = new WebInspector.EditingConfig(editingComitted.bind(this), editingCancelled.bind(this), tagName);
+        this._editing = WebInspector.startEditing(tagNameElement, config);
+        window.getSelection().setBaseAndExtent(tagNameElement, 0, tagNameElement, 1);
+        return true;
+    }
+
+    _startEditingAsHTML(commitCallback, error, initialValue)
+    {
+        if (error)
+            return;
+        if (this._htmlEditElement && WebInspector.isBeingEdited(this._htmlEditElement))
+            return;
+
+        this._htmlEditElement = document.createElement("div");
+        this._htmlEditElement.textContent = initialValue;
+
+        // Hide header items.
+        var child = this.listItemElement.firstChild;
+        while (child) {
+            child.style.display = "none";
+            child = child.nextSibling;
+        }
+        // Hide children item.
+        if (this._childrenListNode)
+            this._childrenListNode.style.display = "none";
+        // Append editor.
+        this.listItemElement.appendChild(this._htmlEditElement);
+
+        this.updateSelection();
+
+        function commit()
+        {
+            commitCallback(this._htmlEditElement.textContent);
+            dispose.call(this);
+        }
+
+        function dispose()
+        {
+            this._editing = false;
+
+            // Remove editor.
+            this.listItemElement.removeChild(this._htmlEditElement);
+            this._htmlEditElement = null;
+            // Unhide children item.
+            if (this._childrenListNode)
+                this._childrenListNode.style.removeProperty("display");
+            // Unhide header items.
+            var child = this.listItemElement.firstChild;
+            while (child) {
+                child.style.removeProperty("display");
+                child = child.nextSibling;
+            }
+
+            this.updateSelection();
+        }
+
+        var config = new WebInspector.EditingConfig(commit.bind(this), dispose.bind(this));
+        config.setMultiline(true);
+        this._editing = WebInspector.startEditing(this._htmlEditElement, config);
+    }
+
+    _attributeEditingCommitted(element, newText, oldText, attributeName, moveDirection)
+    {
+        this._editing = false;
+
+        if (newText === oldText)
+            return;
+
+        var treeOutline = this.treeOutline;
+        function moveToNextAttributeIfNeeded(error)
+        {
+            if (error)
+                this._editingCancelled(element, attributeName);
+
+            if (!moveDirection)
+                return;
+
+            treeOutline._updateModifiedNodes();
+
+            // Search for the attribute's position, and then decide where to move to.
+            var attributes = this.representedObject.attributes();
+            for (var i = 0; i < attributes.length; ++i) {
+                if (attributes[i].name !== attributeName)
+                    continue;
+
+                if (moveDirection === "backward") {
+                    if (i === 0)
+                        this._startEditingTagName();
+                    else
+                        this._triggerEditAttribute(attributes[i - 1].name);
+                } else {
+                    if (i === attributes.length - 1)
+                        this._addNewAttribute();
+                    else
+                        this._triggerEditAttribute(attributes[i + 1].name);
+                }
+                return;
+            }
+
+            // Moving From the "New Attribute" position.
+            if (moveDirection === "backward") {
+                if (newText === " ") {
+                    // Moving from "New Attribute" that was not edited
+                    if (attributes.length)
+                        this._triggerEditAttribute(attributes.lastValue.name);
+                } else {
+                    // Moving from "New Attribute" that holds new value
+                    if (attributes.length > 1)
+                        this._triggerEditAttribute(attributes[attributes.length - 2].name);
+                }
+            } else if (moveDirection === "forward") {
+                if (!/^\s*$/.test(newText))
+                    this._addNewAttribute();
+                else
+                    this._startEditingTagName();
+            }
+        }
+
+        this.representedObject.setAttribute(attributeName, newText, moveToNextAttributeIfNeeded.bind(this));
+    }
+
+    _attributeNumberEditingCommitted(element, newText, oldText, attributeName, moveDirection)
+    {
+        if (newText === oldText)
+            return;
+
+        this.representedObject.setAttribute(attributeName, newText);
+    }
+
+    _tagNameEditingCommitted(element, newText, oldText, tagName, moveDirection)
+    {
+        this._editing = false;
+        var self = this;
+
+        function cancel()
+        {
+            var closingTagElement = self._distinctClosingTagElement();
+            if (closingTagElement)
+                closingTagElement.textContent = "</" + tagName + ">";
+
+            self._editingCancelled(element, tagName);
+            moveToNextAttributeIfNeeded.call(self);
+        }
+
+        function moveToNextAttributeIfNeeded()
+        {
+            if (moveDirection !== "forward") {
+                this._addNewAttribute();
+                return;
+            }
+
+            var attributes = this.representedObject.attributes();
+            if (attributes.length > 0)
+                this._triggerEditAttribute(attributes[0].name);
+            else
+                this._addNewAttribute();
+        }
+
+        newText = newText.trim();
+        if (newText === oldText) {
+            cancel();
+            return;
+        }
+
+        var treeOutline = this.treeOutline;
+        var wasExpanded = this.expanded;
+
+        function changeTagNameCallback(error, nodeId)
+        {
+            if (error || !nodeId) {
+                cancel();
+                return;
+            }
+
+            var node = WebInspector.domTreeManager.nodeForId(nodeId);
+
+            // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
+            treeOutline._updateModifiedNodes();
+            treeOutline.selectDOMNode(node, true);
+
+            var newTreeItem = treeOutline.findTreeElement(node);
+            if (wasExpanded)
+                newTreeItem.expand();
+
+            moveToNextAttributeIfNeeded.call(newTreeItem);
+        }
+
+        this.representedObject.setNodeName(newText, changeTagNameCallback);
+    }
+
+    _textNodeEditingCommitted(element, newText)
+    {
+        this._editing = false;
+
+        var textNode;
+        if (this.representedObject.nodeType() === Node.ELEMENT_NODE) {
+            // We only show text nodes inline in elements if the element only
+            // has a single child, and that child is a text node.
+            textNode = this.representedObject.firstChild;
+        } else if (this.representedObject.nodeType() === Node.TEXT_NODE)
+            textNode = this.representedObject;
+
+        textNode.setNodeValue(newText, this.updateTitle.bind(this));
+    }
+
+    _editingCancelled(element, context)
+    {
+        this._editing = false;
+
+        // Need to restore attributes structure.
+        this.updateTitle();
+    }
+
+    _distinctClosingTagElement()
+    {
+        // FIXME: Improve the Tree Element / Outline Abstraction to prevent crawling the DOM
+
+        // For an expanded element, it will be the last element with class "close"
+        // in the child element list.
+        if (this.expanded) {
+            var closers = this._childrenListNode.querySelectorAll(".close");
+            return closers[closers.length - 1];
+        }
+
+        // Remaining cases are single line non-expanded elements with a closing
+        // tag, or HTML elements without a closing tag (such as <br>). Return
+        // null in the case where there isn't a closing tag.
+        var tags = this.listItemElement.getElementsByClassName("html-tag");
+        return (tags.length === 1 ? null : tags[tags.length - 1]);
+    }
+
+    updateTitle(onlySearchQueryChanged)
+    {
+        // If we are editing, return early to prevent canceling the edit.
+        // After editing is committed updateTitle will be called.
+        if (this._editing)
+            return;
+
+        if (onlySearchQueryChanged) {
+            if (this._highlightResult)
+                this._updateSearchHighlight(false);
+        } else {
+            this.title = document.createElement("span");
+            this.title.appendChild(this._nodeTitleInfo().titleDOM);
+            this._highlightResult = undefined;
+        }
+
+        this.selectionElement = null;
+        this.updateSelection();
+        this._highlightSearchResults();
+    }
+
+    _buildAttributeDOM(parentElement, name, value, node)
+    {
+        let hasText = (value.length > 0);
+        let attrSpanElement = parentElement.createChild("span", "html-attribute");
+        let attrNameElement = attrSpanElement.createChild("span", "html-attribute-name");
+        attrNameElement.textContent = name;
+        let attrValueElement = null;
+        if (hasText)
+            attrSpanElement.append("=\u200B\"");
+
+        if (name === "src" || /\bhref\b/.test(name)) {
+            let baseURL = node.ownerDocument ? node.ownerDocument.documentURL : null;
+            let rewrittenURL = absoluteURL(value, baseURL);
+            value = value.insertWordBreakCharacters();
+            if (!rewrittenURL) {
+                attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
+                attrValueElement.textContent = value;
+            } else {
+                if (value.startsWith("data:"))
+                    value = value.trimMiddle(60);
+
+                attrValueElement = document.createElement("a");
+                attrValueElement.href = rewrittenURL;
+                attrValueElement.textContent = value;
+                attrSpanElement.appendChild(attrValueElement);
+            }
+        } else if (name === "srcset") {
+            let baseURL = node.ownerDocument ? node.ownerDocument.documentURL : null;
+            attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
+
+            // Leading whitespace.
+            let groups = value.split(/\s*,\s*/);
+            for (let i = 0; i < groups.length; ++i) {
+                let string = groups[i].trim();
+                let spaceIndex = string.search(/\s/);
+
+                if (spaceIndex === -1) {
+                    let linkText = string;
+                    let rewrittenURL = absoluteURL(string, baseURL);
+                    let linkElement = attrValueElement.appendChild(document.createElement("a"));
+                    linkElement.href = rewrittenURL;
+                    linkElement.textContent = linkText.insertWordBreakCharacters();
+                } else {
+                    let linkText = string.substring(0, spaceIndex);
+                    let descriptorText = string.substring(spaceIndex).insertWordBreakCharacters();
+                    let rewrittenURL = absoluteURL(linkText, baseURL);
+                    let linkElement = attrValueElement.appendChild(document.createElement("a"));
+                    linkElement.href = rewrittenURL;
+                    linkElement.textContent = linkText.insertWordBreakCharacters();
+                    let descriptorElement = attrValueElement.appendChild(document.createElement("span"));
+                    descriptorElement.textContent = string.substring(spaceIndex);
+                }
+
+                if (i < groups.length - 1) {
+                    let commaElement = attrValueElement.appendChild(document.createElement("span"));
+                    commaElement.textContent = ", ";
+                }
+            }
+        } else {
+            value = value.insertWordBreakCharacters();
+            attrValueElement = attrSpanElement.createChild("span", "html-attribute-value");
+            attrValueElement.textContent = value;
+        }
+
+        if (hasText)
+            attrSpanElement.append("\"");
+
+        for (let change of this._nodeStateChanges) {
+            if (change.type === WebInspector.DOMTreeElement.ChangeType.Attribute && change.attribute === name)
+                change.element = hasText ? attrValueElement : attrNameElement;
+        }
+    }
+
+    _buildTagDOM(parentElement, tagName, isClosingTag, isDistinctTreeElement)
+    {
+        var node = this.representedObject;
+        var classes = [ "html-tag" ];
+        if (isClosingTag && isDistinctTreeElement)
+            classes.push("close");
+        if (node.isInShadowTree())
+            classes.push("shadow");
+        var tagElement = parentElement.createChild("span", classes.join(" "));
+        tagElement.append("<");
+        var tagNameElement = tagElement.createChild("span", isClosingTag ? "" : "html-tag-name");
+        tagNameElement.textContent = (isClosingTag ? "/" : "") + tagName;
+        if (!isClosingTag && node.hasAttributes()) {
+            var attributes = node.attributes();
+            for (var i = 0; i < attributes.length; ++i) {
+                var attr = attributes[i];
+                tagElement.append(" ");
+                this._buildAttributeDOM(tagElement, attr.name, attr.value, node);
+            }
+        }
+        tagElement.append(">");
+        parentElement.append("\u200B");
+    }
+
+    _nodeTitleInfo()
+    {
+        var node = this.representedObject;
+        var info = {titleDOM: document.createDocumentFragment(), hasChildren: this.hasChildren};
+
+        function trimedNodeValue()
+        {
+            // Trim empty lines from the beginning and extra space at the end since most style and script tags begin with a newline
+            // and end with a newline and indentation for the end tag.
+            return node.nodeValue().replace(/^[\n\r]*/, "").replace(/\s*$/, "");
+        }
+
+        switch (node.nodeType()) {
+            case Node.DOCUMENT_FRAGMENT_NODE:
+                var fragmentElement = info.titleDOM.createChild("span", "html-fragment");
+                if (node.isInShadowTree()) {
+                    fragmentElement.textContent = WebInspector.UIString("Shadow Content");
+                    fragmentElement.classList.add("shadow");
+                } else
+                    fragmentElement.textContent = WebInspector.UIString("Document Fragment");
+                break;
+
+            case Node.ATTRIBUTE_NODE:
+                var value = node.value || "\u200B"; // Zero width space to force showing an empty value.
+                this._buildAttributeDOM(info.titleDOM, node.name, value);
+                break;
+
+            case Node.ELEMENT_NODE:
+                if (node.isPseudoElement()) {
+                    var pseudoElement = info.titleDOM.createChild("span", "html-pseudo-element");
+                    pseudoElement.textContent = "::" + node.pseudoType();
+                    info.titleDOM.appendChild(document.createTextNode("\u200B"));
+                    info.hasChildren = false;
+                    break;
+                }
+
+                var tagName = node.nodeNameInCorrectCase();
+                if (this._elementCloseTag) {
+                    this._buildTagDOM(info.titleDOM, tagName, true, true);
+                    info.hasChildren = false;
+                    break;
+                }
+
+                this._buildTagDOM(info.titleDOM, tagName, false, false);
+
+                var textChild = this._singleTextChild(node);
+                var showInlineText = textChild && textChild.nodeValue().length < WebInspector.DOMTreeElement.MaximumInlineTextChildLength;
+
+                if (!this.expanded && (!showInlineText && (this.treeOutline.isXMLMimeType || !WebInspector.DOMTreeElement.ForbiddenClosingTagElements[tagName]))) {
+                    if (this.hasChildren) {
+                        var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
+                        textNodeElement.textContent = ellipsis;
+                        info.titleDOM.append("\u200B");
+                    }
+                    this._buildTagDOM(info.titleDOM, tagName, true, false);
+                }
+
+                // If this element only has a single child that is a text node,
+                // just show that text and the closing tag inline rather than
+                // create a subtree for them
+                if (showInlineText) {
+                    var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
+                    var nodeNameLowerCase = node.nodeName().toLowerCase();
+
+                    if (nodeNameLowerCase === "script")
+                        textNodeElement.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(textChild.nodeValue().trim(), "text/javascript"));
+                    else if (nodeNameLowerCase === "style")
+                        textNodeElement.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(textChild.nodeValue().trim(), "text/css"));
+                    else
+                        textNodeElement.textContent = textChild.nodeValue();
+
+                    info.titleDOM.append("\u200B");
+
+                    this._buildTagDOM(info.titleDOM, tagName, true, false);
+                    info.hasChildren = false;
+                }
+                break;
+
+            case Node.TEXT_NODE:
+                if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "script") {
+                    var newNode = info.titleDOM.createChild("span", "html-text-node large");
+                    newNode.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(trimedNodeValue(), "text/javascript"));
+                } else if (node.parentNode && node.parentNode.nodeName().toLowerCase() === "style") {
+                    var newNode = info.titleDOM.createChild("span", "html-text-node large");
+                    newNode.appendChild(WebInspector.syntaxHighlightStringAsDocumentFragment(trimedNodeValue(), "text/css"));
+                } else {
+                    info.titleDOM.append("\"");
+                    var textNodeElement = info.titleDOM.createChild("span", "html-text-node");
+                    textNodeElement.textContent = node.nodeValue();
+                    info.titleDOM.append("\"");
+                }
+                break;
+
+            case Node.COMMENT_NODE:
+                var commentElement = info.titleDOM.createChild("span", "html-comment");
+                commentElement.append("<!--" + node.nodeValue() + "-->");
+                break;
+
+            case Node.DOCUMENT_TYPE_NODE:
+                var docTypeElement = info.titleDOM.createChild("span", "html-doctype");
+                docTypeElement.append("<!DOCTYPE " + node.nodeName());
+                if (node.publicId) {
+                    docTypeElement.append(" PUBLIC \"" + node.publicId + "\"");
+                    if (node.systemId)
+                        docTypeElement.append(" \"" + node.systemId + "\"");
+                } else if (node.systemId)
+                    docTypeElement.append(" SYSTEM \"" + node.systemId + "\"");
+
+                if (node.internalSubset)
+                    docTypeElement.append(" [" + node.internalSubset + "]");
+
+                docTypeElement.append(">");
+                break;
+
+            case Node.CDATA_SECTION_NODE:
+                var cdataElement = info.titleDOM.createChild("span", "html-text-node");
+                cdataElement.append("<![CDATA[" + node.nodeValue() + "]]>");
+                break;
+
+            case Node.PROCESSING_INSTRUCTION_NODE:
+                var processingInstructionElement = info.titleDOM.createChild("span", "html-processing-instruction");
+                var data = node.nodeValue();
+                var dataString = data.length ? " " + data : "";
+                var title = "<?" + node.nodeNameInCorrectCase() + dataString + "?>";
+                processingInstructionElement.append(title);
+                break;
+
+            default:
+                info.titleDOM.append(node.nodeNameInCorrectCase().collapseWhitespace());
+        }
+
+        return info;
+    }
+
+    _singleTextChild(node)
+    {
+        if (!node)
+            return null;
+
+        var firstChild = node.firstChild;
+        if (!firstChild || firstChild.nodeType() !== Node.TEXT_NODE)
+            return null;
+
+        if (node.hasShadowRoots())
+            return null;
+        if (node.templateContent())
+            return null;
+        if (node.hasPseudoElements())
+            return null;
+
+        var sibling = firstChild.nextSibling;
+        return sibling ? null : firstChild;
+    }
+
+    _showInlineText(node)
+    {
+        if (node.nodeType() === Node.ELEMENT_NODE) {
+            var textChild = this._singleTextChild(node);
+            if (textChild && textChild.nodeValue().length < WebInspector.DOMTreeElement.MaximumInlineTextChildLength)
+                return true;
+        }
+        return false;
+    }
+
+    _hasVisibleChildren()
+    {
+        var node = this.representedObject;
+
+        if (this._showInlineText(node))
+            return false;
+
+        if (node.hasChildNodes())
+            return true;
+        if (node.templateContent())
+            return true;
+        if (node.hasPseudoElements())
+            return true;
+
+        return false;
+    }
+
+    _visibleChildren()
+    {
+        var node = this.representedObject;
+
+        var visibleChildren = [];
+
+        var templateContent = node.templateContent();
+        if (templateContent)
+            visibleChildren.push(templateContent);
+
+        var beforePseudoElement = node.beforePseudoElement();
+        if (beforePseudoElement)
+            visibleChildren.push(beforePseudoElement);
+
+        if (node.childNodeCount && node.children)
+            visibleChildren = visibleChildren.concat(node.children);
+
+        var afterPseudoElement = node.afterPseudoElement();
+        if (afterPseudoElement)
+            visibleChildren.push(afterPseudoElement);
+
+        return visibleChildren;
+    }
+
+    remove()
+    {
+        var parentElement = this.parent;
+        if (!parentElement)
+            return;
+
+        var self = this;
+        function removeNodeCallback(error, removedNodeId)
+        {
+            if (error)
+                return;
+
+            if (!self.parent)
+                return;
+
+            parentElement.removeChild(self);
+            parentElement.adjustCollapsedRange();
+        }
+
+        this.representedObject.removeNode(removeNodeCallback);
+    }
+
+    _scrollIntoView()
+    {
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function scrollIntoView()
+            {
+                this.scrollIntoViewIfNeeded(true);
+            }
+
+            object.callFunction(scrollIntoView, undefined, false, function() {});
+            object.release();
+        }
+
+        let node = this.representedObject;
+        WebInspector.RemoteObject.resolveNode(node, "", resolvedNode);
+    }
+
+    _editAsHTML()
+    {
+        var treeOutline = this.treeOutline;
+        var node = this.representedObject;
+        var parentNode = node.parentNode;
+        var index = node.index;
+        var wasExpanded = this.expanded;
+
+        function selectNode(error, nodeId)
+        {
+            if (error)
+                return;
+
+            // Select it and expand if necessary. We force tree update so that it processes dom events and is up to date.
+            treeOutline._updateModifiedNodes();
+
+            var newNode = parentNode ? parentNode.children[index] || parentNode : null;
+            if (!newNode)
+                return;
+
+            treeOutline.selectDOMNode(newNode, true);
+
+            if (wasExpanded) {
+                var newTreeItem = treeOutline.findTreeElement(newNode);
+                if (newTreeItem)
+                    newTreeItem.expand();
+            }
+        }
+
+        function commitChange(value)
+        {
+            node.setOuterHTML(value, selectNode);
+        }
+
+        node.getOuterHTML(this._startEditingAsHTML.bind(this, commitChange));
+    }
+
+    _copyHTML()
+    {
+        this.representedObject.copyNode();
+    }
+
+    _highlightSearchResults()
+    {
+        if (!this.title || !this._searchQuery || !this._searchHighlightsVisible)
+            return;
+
+        if (this._highlightResult) {
+            this._updateSearchHighlight(true);
+            return;
+        }
+
+        var text = this.title.textContent;
+        var searchRegex = new RegExp(this._searchQuery.escapeForRegExp(), "gi");
+
+        var offset = 0;
+        var match = searchRegex.exec(text);
+        var matchRanges = [];
+        while (match) {
+            matchRanges.push({ offset: match.index, length: match[0].length });
+            match = searchRegex.exec(text);
+        }
+
+        // Fall back for XPath, etc. matches.
+        if (!matchRanges.length)
+            matchRanges.push({ offset: 0, length: text.length });
+
+        this._highlightResult = [];
+        WebInspector.highlightRangesWithStyleClass(this.title, matchRanges, WebInspector.DOMTreeElement.SearchHighlightStyleClassName, this._highlightResult);
+    }
+
+    _markNodeChanged()
+    {
+        for (let change of this._nodeStateChanges) {
+            let element = change.element;
+            if (!element)
+                continue;
+
+            element.classList.remove("node-state-changed");
+            element.addEventListener("animationend", this._boundNodeChangedAnimationEnd);
+            element.classList.add("node-state-changed");
+        }
+    }
+
+    _nodeChangedAnimationEnd(event)
+    {
+        let element = event.target;
+        element.classList.remove("node-state-changed");
+        element.removeEventListener("animationend", this._boundNodeChangedAnimationEnd);
+
+        for (let i = this._nodeStateChanges.length - 1; i >= 0; --i) {
+            if (this._nodeStateChanges[i].element === element)
+                this._nodeStateChanges.splice(i, 1);
+        }
+    }
+
+    _nodePseudoClassesDidChange(event)
+    {
+        if (this._elementCloseTag)
+            return;
+
+        this._listItemNode.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length);
+    }
+
+    _fireDidChange()
+    {
+        super._fireDidChange();
+
+        if (this._nodeStateChanges)
+            this._markNodeChanged();
+    }
+
+    handleEvent(event)
+    {
+        if (event.type === "dragstart" && this._editing)
+            event.preventDefault();
+    }
+};
+
+WebInspector.DOMTreeElement.InitialChildrenLimit = 500;
+WebInspector.DOMTreeElement.MaximumInlineTextChildLength = 80;
+
+// A union of HTML4 and HTML5-Draft elements that explicitly
+// or implicitly (for HTML5) forbid the closing tag.
+WebInspector.DOMTreeElement.ForbiddenClosingTagElements = [
+    "area", "base", "basefont", "br", "canvas", "col", "command", "embed", "frame",
+    "hr", "img", "input", "isindex", "keygen", "link", "meta", "param", "source",
+    "wbr", "track", "menuitem"
+].keySet();
+
+// These tags we do not allow editing their tag name.
+WebInspector.DOMTreeElement.EditTagBlacklist = [
+    "html", "head", "body"
+].keySet();
+
+WebInspector.DOMTreeElement.ChangeType = {
+    Attribute: "dom-tree-element-change-type-attribute"
+};
+
+WebInspector.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
+WebInspector.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js
new file mode 100644
index 000000000..6f6e033e6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js
@@ -0,0 +1,143 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeElementPathComponent = class DOMTreeElementPathComponent extends WebInspector.HierarchicalPathComponent
+{
+    constructor(domTreeElement, representedObject)
+    {
+        var node = domTreeElement.representedObject;
+
+        var title = null;
+        var className = null;
+
+        switch (node.nodeType()) {
+        case Node.ELEMENT_NODE:
+            if (node.isPseudoElement()) {
+                className = WebInspector.DOMTreeElementPathComponent.DOMPseudoElementIconStyleClassName;
+                title = "::" + node.pseudoType();
+            } else {
+                className = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
+                title = WebInspector.displayNameForNode(node);
+            }
+            break;
+
+        case Node.TEXT_NODE:
+            className = WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName;
+            title = "\"" + node.nodeValue().trimEnd(32) + "\"";
+            break;
+
+        case Node.COMMENT_NODE:
+            className = WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName;
+            title = "<!--" + node.nodeValue().trimEnd(32) + "-->";
+            break;
+
+        case Node.DOCUMENT_TYPE_NODE:
+            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
+            title = "<!DOCTYPE>";
+            break;
+
+        case Node.DOCUMENT_NODE:
+            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName;
+            title = node.nodeNameInCorrectCase();
+            break;
+
+        case Node.CDATA_SECTION_NODE:
+            className = WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName;
+            title = "<![CDATA[" + node.trimEnd(32) + "]]>";
+            break;
+
+        case Node.DOCUMENT_FRAGMENT_NODE:
+            // FIXME: At some point we might want a different icon for this.
+            // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE
+            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
+            if (node.isInShadowTree())
+                title = WebInspector.UIString("Shadow Content");
+            else
+                title = WebInspector.displayNameForNode(node);
+            break;
+
+        case Node.PROCESSING_INSTRUCTION_NODE:
+            // FIXME: At some point we might want a different icon for this.
+            // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE.
+            className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
+            title = node.nodeNameInCorrectCase();
+            break;
+
+        default:
+            console.error("Unknown DOM node type: ", node.nodeType());
+            className = WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName;
+            title = node.nodeNameInCorrectCase();
+        }
+
+        super(title, className, representedObject || domTreeElement.representedObject);
+
+        this._domTreeElement = domTreeElement;
+    }
+
+    // Public
+
+    get domTreeElement()
+    {
+        return this._domTreeElement;
+    }
+
+    get previousSibling()
+    {
+        if (!this._domTreeElement.previousSibling)
+            return null;
+        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.previousSibling);
+    }
+
+    get nextSibling()
+    {
+        if (!this._domTreeElement.nextSibling)
+            return null;
+        if (this._domTreeElement.nextSibling.isCloseTag())
+            return null;
+        return new WebInspector.DOMTreeElementPathComponent(this._domTreeElement.nextSibling);
+    }
+
+    // Protected
+
+    mouseOver()
+    {
+        var nodeId = this._domTreeElement.representedObject.id;
+        WebInspector.domTreeManager.highlightDOMNode(nodeId);
+    }
+
+    mouseOut()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    }
+};
+
+WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName = "dom-element-icon";
+WebInspector.DOMTreeElementPathComponent.DOMPseudoElementIconStyleClassName = "dom-pseudo-element-icon";
+WebInspector.DOMTreeElementPathComponent.DOMTextNodeIconStyleClassName = "dom-text-node-icon";
+WebInspector.DOMTreeElementPathComponent.DOMCommentIconStyleClassName = "dom-comment-icon";
+WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName = "dom-document-type-icon";
+WebInspector.DOMTreeElementPathComponent.DOMDocumentIconStyleClassName = "dom-document-icon";
+WebInspector.DOMTreeElementPathComponent.DOMCharacterDataIconStyleClassName = "dom-character-data-icon";
+WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName = "dom-node-icon";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
new file mode 100644
index 000000000..d911f7344
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css
@@ -0,0 +1,187 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.tree-outline.dom {
+    position: relative;
+
+    padding: 0 6px;
+    margin: 0;
+    min-width: 100%;
+
+    outline: none;
+
+    list-style-type: none;
+
+ /* Needed to make the negative z-index on .selection works. Otherwise the background-color from .syntax-highlighted hides the selection. */
+    background-color: transparent !important;
+    color: black;
+}
+
+.tree-outline.dom li.hovered:not(.selected) .selection {
+    background-color: hsla(209, 100%, 49%, 0.1);
+}
+
+.tree-outline.dom li .selection {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 15px;
+    z-index: -1;
+}
+
+.tree-outline.dom li.selected .selection {
+    background-color: hsl(0, 0%, 83%);
+}
+
+.tree-outline.dom li.elements-drag-over .selection {
+    margin-top: -2px;
+    border-top: 2px solid hsl(209, 100%, 49%);
+}
+
+.tree-outline.dom:focus li.selected .selection {
+    background-color: hsl(209, 100%, 49%);
+}
+
+.tree-outline.dom li.selected > span::after {
+    content: " = $0";
+    color: var(--console-secondary-text-color);
+    position: absolute;
+    white-space: pre;
+}
+
+.tree-outline.dom:focus li.selected > span::after {
+    color: hsla(0, 100%, 100%, 0.7);
+}
+
+.tree-outline.dom ol {
+    list-style-type: none;
+    padding-left: 1.2em;
+    margin: 0;
+}
+
+.tree-outline.dom ol.children {
+    display: none;
+}
+
+.tree-outline.dom ol.children.expanded {
+    display: block;
+}
+
+.tree-outline.dom li {
+    padding: 0 0 0 17px;
+    word-wrap: break-word;
+}
+
+.tree-outline.dom li.pseudo-class-enabled > .selection::before {
+    display: inline-block;
+    position: absolute;
+    top: 4px;
+    left: 2px;
+    width: 5px;
+    height: 5px;
+    content: "";
+    background-color: hsl(212, 92%, 54%);
+    border-radius: 50%;
+}
+
+.tree-outline.dom.single-node li {
+    padding-left: 2px;
+}
+
+.tree-outline.dom:focus li.selected {
+    color: white;
+}
+
+.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection::before {
+    background-color: hsl(0, 100%, 100%);
+}
+
+.tree-outline.dom:focus li.selected * {
+    color: inherit;
+}
+
+.tree-outline.dom li.parent {
+    margin-left: -15px;
+}
+
+.tree-outline.dom li .html-tag.close {
+    margin-left: -13px;
+}
+
+.tree-outline.dom li.parent::before {
+    float: left;
+
+    content: "";
+
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-size: 13px 13px;
+    background-repeat: no-repeat;
+
+    width: 13px;
+    height: 13px;
+
+    margin-left: 0;
+    padding-right: 2px;
+}
+
+.tree-outline.dom:focus li.parent.selected::before {
+    background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
+}
+
+.tree-outline.dom li.parent.expanded::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.tree-outline.dom:focus li.parent.expanded.selected::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-selected);
+}
+
+.tree-outline.dom .html-text-node.large {
+    display: inline-block;
+    min-width: 100%;
+    white-space: pre-wrap;
+}
+
+.tree-outline.dom .html-pseudo-element {
+    color: hsl(0, 59%, 41%);
+}
+
+.tree-outline.dom .html-fragment.shadow {
+    opacity: 0.6;
+}
+
+.showing-find-banner .tree-outline.dom .search-highlight {
+    color: black;
+    background-color: hsla(53, 83%, 53%, 0.2);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+}
+
+@keyframes node-state-changed {
+    from { background-color: hsla(83, 100%, 48%, 0.4); }
+}
+
+.node-state-changed {
+    animation: node-state-changed 1s cubic-bezier(0.25, 0, 0.25, 1);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
new file mode 100644
index 000000000..2dd8bcb77
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
@@ -0,0 +1,593 @@
+/*
+ * Copyright (C) 2007, 2008, 2013, 2015 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeOutline = class DOMTreeOutline extends WebInspector.TreeOutline
+{
+    constructor(omitRootDOMNode, selectEnabled, excludeRevealElementContextMenu)
+    {
+        super();
+
+        this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
+        this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
+        this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
+        this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
+        this.element.addEventListener("dragover", this._ondragover.bind(this), false);
+        this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
+        this.element.addEventListener("drop", this._ondrop.bind(this), false);
+        this.element.addEventListener("dragend", this._ondragend.bind(this), false);
+
+        this.element.classList.add("dom", WebInspector.SyntaxHighlightedStyleClassName);
+
+        this._includeRootDOMNode = !omitRootDOMNode;
+        this._selectEnabled = selectEnabled;
+        this._excludeRevealElementContextMenu = excludeRevealElementContextMenu;
+        this._rootDOMNode = null;
+        this._selectedDOMNode = null;
+
+        this._editable = false;
+        this._editing = false;
+        this._visible = false;
+
+        this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this));
+
+        this._hideElementKeyboardShortcut = new WebInspector.KeyboardShortcut(null, "H", this._hideElement.bind(this), this.element);
+        this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
+
+        WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+    }
+
+    // Public
+
+    wireToDomAgent()
+    {
+        this._elementsTreeUpdater = new WebInspector.DOMTreeUpdater(this);
+    }
+
+    close()
+    {
+        WebInspector.showShadowDOMSetting.removeEventListener(null, null, this);
+
+        if (this._elementsTreeUpdater) {
+            this._elementsTreeUpdater.close();
+            this._elementsTreeUpdater = null;
+        }
+    }
+
+    setVisible(visible, omitFocus)
+    {
+        this._visible = visible;
+        if (!this._visible)
+            return;
+
+        this._updateModifiedNodes();
+
+        if (this._selectedDOMNode)
+            this._revealAndSelectNode(this._selectedDOMNode, omitFocus);
+
+        this.update();
+    }
+
+    get rootDOMNode()
+    {
+        return this._rootDOMNode;
+    }
+
+    set rootDOMNode(x)
+    {
+        if (this._rootDOMNode === x)
+            return;
+
+        this._rootDOMNode = x;
+
+        this._isXMLMimeType = x && x.isXMLNode();
+
+        this.update();
+    }
+
+    get isXMLMimeType()
+    {
+        return this._isXMLMimeType;
+    }
+
+    selectedDOMNode()
+    {
+        return this._selectedDOMNode;
+    }
+
+    selectDOMNode(node, focus)
+    {
+        if (this._selectedDOMNode === node) {
+            this._revealAndSelectNode(node, !focus);
+            return;
+        }
+
+        this._selectedDOMNode = node;
+        this._revealAndSelectNode(node, !focus);
+
+        // The _revealAndSelectNode() method might find a different element if there is inlined text,
+        // and the select() call would change the selectedDOMNode and reenter this setter. So to
+        // avoid calling _selectedNodeChanged() twice, first check if _selectedDOMNode is the same
+        // node as the one passed in.
+        // Note that _revealAndSelectNode will not do anything for a null node.
+        if (!node || this._selectedDOMNode === node)
+            this._selectedNodeChanged();
+    }
+
+    get editable()
+    {
+        return this._editable;
+    }
+
+    set editable(x)
+    {
+        this._editable = x;
+    }
+
+    get editing()
+    {
+        return this._editing;
+    }
+
+    update()
+    {
+        var selectedNode = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
+
+        if (!this.rootDOMNode)
+            return;
+
+        this.removeChildren();
+
+        var treeElement;
+        if (this._includeRootDOMNode) {
+            treeElement = new WebInspector.DOMTreeElement(this.rootDOMNode);
+            treeElement.selectable = this._selectEnabled;
+            this.appendChild(treeElement);
+        } else {
+            // FIXME: this could use findTreeElement to reuse a tree element if it already exists
+            var node = this.rootDOMNode.firstChild;
+            while (node) {
+                treeElement = new WebInspector.DOMTreeElement(node);
+                treeElement.selectable = this._selectEnabled;
+                this.appendChild(treeElement);
+                node = node.nextSibling;
+
+                if (treeElement.hasChildren && !treeElement.expanded)
+                    treeElement.expand();
+            }
+        }
+
+        if (selectedNode)
+            this._revealAndSelectNode(selectedNode, true);
+    }
+
+    updateSelection()
+    {
+        if (!this.selectedTreeElement)
+            return;
+        var element = this.treeOutline.selectedTreeElement;
+        element.updateSelection();
+    }
+
+    _selectedNodeChanged()
+    {
+        this.dispatchEventToListeners(WebInspector.DOMTreeOutline.Event.SelectedNodeChanged);
+    }
+
+    findTreeElement(node)
+    {
+        function isAncestorNode(ancestor, node)
+        {
+            return ancestor.isAncestor(node);
+        }
+
+        function parentNode(node)
+        {
+            return node.parentNode;
+        }
+
+        var treeElement = super.findTreeElement(node, isAncestorNode, parentNode);
+        if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
+            // The text node might have been inlined if it was short, so try to find the parent element.
+            treeElement = super.findTreeElement(node.parentNode, isAncestorNode, parentNode);
+        }
+
+        return treeElement;
+    }
+
+    createTreeElementFor(node)
+    {
+        var treeElement = this.findTreeElement(node);
+        if (treeElement)
+            return treeElement;
+
+        if (!node.parentNode)
+            return null;
+
+        treeElement = this.createTreeElementFor(node.parentNode);
+        if (!treeElement)
+            return null;
+
+        return treeElement.showChildNode(node);
+    }
+
+    set suppressRevealAndSelect(x)
+    {
+        if (this._suppressRevealAndSelect === x)
+            return;
+        this._suppressRevealAndSelect = x;
+    }
+
+    populateContextMenu(contextMenu, event, treeElement)
+    {
+        var tag = event.target.enclosingNodeOrSelfWithClass("html-tag");
+        var textNode = event.target.enclosingNodeOrSelfWithClass("html-text-node");
+        var commentNode = event.target.enclosingNodeOrSelfWithClass("html-comment");
+
+        var populated = false;
+        if (tag && treeElement._populateTagContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateTagContextMenu(contextMenu, event);
+            populated = true;
+        } else if (textNode && treeElement._populateTextContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateTextContextMenu(contextMenu, textNode);
+            populated = true;
+        } else if (commentNode && treeElement._populateNodeContextMenu) {
+            if (populated)
+                contextMenu.appendSeparator();
+            treeElement._populateNodeContextMenu(contextMenu);
+            populated = true;
+        }
+
+        return populated;
+    }
+
+    adjustCollapsedRange()
+    {
+    }
+
+    // Private
+
+    _revealAndSelectNode(node, omitFocus)
+    {
+        if (!node || this._suppressRevealAndSelect)
+            return;
+
+        var treeElement = this.createTreeElementFor(node);
+        if (!treeElement)
+            return;
+
+        treeElement.revealAndSelect(omitFocus);
+    }
+
+    _treeElementFromEvent(event)
+    {
+        var scrollContainer = this.element.parentElement;
+
+        // We choose this X coordinate based on the knowledge that our list
+        // items extend at least to the right edge of the outer <ol> container.
+        // In the no-word-wrap mode the outer <ol> may be wider than the tree container
+        // (and partially hidden), in which case we are left to use only its right boundary.
+        var x = scrollContainer.totalOffsetLeft + scrollContainer.offsetWidth - 36;
+
+        var y = event.pageY;
+
+        // Our list items have 1-pixel cracks between them vertically. We avoid
+        // the cracks by checking slightly above and slightly below the mouse
+        // and seeing if we hit the same element each time.
+        var elementUnderMouse = this.treeElementFromPoint(x, y);
+        var elementAboveMouse = this.treeElementFromPoint(x, y - 2);
+        var element;
+        if (elementUnderMouse === elementAboveMouse)
+            element = elementUnderMouse;
+        else
+            element = this.treeElementFromPoint(x, y + 2);
+
+        return element;
+    }
+
+    _onmousedown(event)
+    {
+        var element = this._treeElementFromEvent(event);
+        if (!element || element.isEventWithinDisclosureTriangle(event)) {
+            event.preventDefault();
+            return;
+        }
+
+        element.select();
+    }
+
+    _onmousemove(event)
+    {
+        var element = this._treeElementFromEvent(event);
+        if (element && this._previousHoveredElement === element)
+            return;
+
+        if (this._previousHoveredElement) {
+            this._previousHoveredElement.hovered = false;
+            delete this._previousHoveredElement;
+        }
+
+        if (element) {
+            element.hovered = true;
+            this._previousHoveredElement = element;
+
+            // Lazily compute tag-specific tooltips.
+            if (element.representedObject && !element.tooltip && element._createTooltipForNode)
+                element._createTooltipForNode();
+        }
+
+        WebInspector.domTreeManager.highlightDOMNode(element ? element.representedObject.id : 0);
+    }
+
+    _onmouseout(event)
+    {
+        var nodeUnderMouse = document.elementFromPoint(event.pageX, event.pageY);
+        if (nodeUnderMouse && nodeUnderMouse.isDescendant(this.element))
+            return;
+
+        if (this._previousHoveredElement) {
+            this._previousHoveredElement.hovered = false;
+            delete this._previousHoveredElement;
+        }
+
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    }
+
+    _ondragstart(event)
+    {
+        var treeElement = this._treeElementFromEvent(event);
+        if (!treeElement)
+            return false;
+
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return false;
+
+        if (treeElement.representedObject.nodeName() === "BODY" || treeElement.representedObject.nodeName() === "HEAD")
+            return false;
+
+        event.dataTransfer.setData("text/plain", treeElement.listItemElement.textContent);
+        event.dataTransfer.effectAllowed = "copyMove";
+        this._nodeBeingDragged = treeElement.representedObject;
+
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+
+        return true;
+    }
+
+    _ondragover(event)
+    {
+        if (!this._nodeBeingDragged)
+            return false;
+
+        var treeElement = this._treeElementFromEvent(event);
+        if (!this._isValidDragSourceOrTarget(treeElement))
+            return false;
+
+        var node = treeElement.representedObject;
+        while (node) {
+            if (node === this._nodeBeingDragged)
+                return false;
+            node = node.parentNode;
+        }
+
+        treeElement.updateSelection();
+        treeElement.listItemElement.classList.add("elements-drag-over");
+        this._dragOverTreeElement = treeElement;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+        return false;
+    }
+
+    _ondragleave(event)
+    {
+        this._clearDragOverTreeElementMarker();
+        event.preventDefault();
+        return false;
+    }
+
+    _isValidDragSourceOrTarget(treeElement)
+    {
+        if (!treeElement)
+            return false;
+
+        var node = treeElement.representedObject;
+        if (!(node instanceof WebInspector.DOMNode))
+            return false;
+
+        if (!node.parentNode || node.parentNode.nodeType() !== Node.ELEMENT_NODE)
+            return false;
+
+        return true;
+    }
+
+    _ondrop(event)
+    {
+        event.preventDefault();
+
+        function callback(error, newNodeId)
+        {
+            if (error)
+                return;
+
+            this._updateModifiedNodes();
+            var newNode = WebInspector.domTreeManager.nodeForId(newNodeId);
+            if (newNode)
+                this.selectDOMNode(newNode, true);
+        }
+
+        var treeElement = this._treeElementFromEvent(event);
+        if (this._nodeBeingDragged && treeElement) {
+            var parentNode;
+            var anchorNode;
+
+            if (treeElement._elementCloseTag) {
+                // Drop onto closing tag -> insert as last child.
+                parentNode = treeElement.representedObject;
+            } else {
+                var dragTargetNode = treeElement.representedObject;
+                parentNode = dragTargetNode.parentNode;
+                anchorNode = dragTargetNode;
+            }
+
+            this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
+        }
+
+        delete this._nodeBeingDragged;
+    }
+
+    _ondragend(event)
+    {
+        event.preventDefault();
+        this._clearDragOverTreeElementMarker();
+        delete this._nodeBeingDragged;
+    }
+
+    _clearDragOverTreeElementMarker()
+    {
+        if (this._dragOverTreeElement) {
+            this._dragOverTreeElement.updateSelection();
+            this._dragOverTreeElement.listItemElement.classList.remove("elements-drag-over");
+            delete this._dragOverTreeElement;
+        }
+    }
+
+    _contextMenuEventFired(event)
+    {
+        let treeElement = this._treeElementFromEvent(event);
+        if (!treeElement)
+            return;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        this.populateContextMenu(contextMenu, event, treeElement);
+    }
+
+    _updateModifiedNodes()
+    {
+        if (this._elementsTreeUpdater)
+            this._elementsTreeUpdater._updateModifiedNodes();
+    }
+
+    _populateContextMenu(contextMenu, domNode)
+    {
+        function revealElement()
+        {
+            WebInspector.domTreeManager.inspectElement(domNode.id);
+        }
+
+        function logElement()
+        {
+            WebInspector.RemoteObject.resolveNode(domNode, WebInspector.RuntimeManager.ConsoleObjectGroup, function(remoteObject) {
+                if (!remoteObject)
+                    return;
+                let text = WebInspector.UIString("Selected Element");
+                WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, true);
+            });
+        }
+
+        contextMenu.appendSeparator();
+
+        if (!this._excludeRevealElementContextMenu)
+            contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement);
+
+        contextMenu.appendItem(WebInspector.UIString("Log Element"), logElement);
+    }
+
+    _showShadowDOMSettingChanged(event)
+    {
+        var nodeToSelect = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
+        while (nodeToSelect) {
+            if (!nodeToSelect.isInShadowTree())
+                break;
+            nodeToSelect = nodeToSelect.parentNode;
+        }
+
+        this.children.forEach(function(child) {
+            child.updateChildren(true);
+        });
+
+        if (nodeToSelect)
+            this.selectDOMNode(nodeToSelect);
+    }
+
+    _hideElement(event, keyboardShortcut)
+    {
+        if (!this.selectedTreeElement || WebInspector.isEditingAnyField())
+            return;
+
+        event.preventDefault();
+
+        var effectiveNode = this.selectedTreeElement.representedObject;
+        console.assert(effectiveNode);
+        if (!effectiveNode)
+            return;
+
+        if (effectiveNode.isPseudoElement()) {
+            effectiveNode = effectiveNode.parentNode;
+            console.assert(effectiveNode);
+            if (!effectiveNode)
+                return;
+        }            
+
+        if (effectiveNode.nodeType() !== Node.ELEMENT_NODE)
+            return;
+
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function injectStyleAndToggleClass()
+            {
+                var hideElementStyleSheetIdOrClassName = "__WebInspectorHideElement__";
+                var styleElement = document.getElementById(hideElementStyleSheetIdOrClassName);
+                if (!styleElement) {
+                    styleElement = document.createElement("style");
+                    styleElement.id = hideElementStyleSheetIdOrClassName;
+                    styleElement.textContent = "." + hideElementStyleSheetIdOrClassName + " { visibility: hidden !important; }";
+                    document.head.appendChild(styleElement);
+                }
+
+                this.classList.toggle(hideElementStyleSheetIdOrClassName);
+            }
+
+            object.callFunction(injectStyleAndToggleClass, undefined, false, function(){});
+            object.release();
+        }
+
+        WebInspector.RemoteObject.resolveNode(effectiveNode, "", resolvedNode);
+    }
+};
+
+WebInspector.DOMTreeOutline.Event = {
+    SelectedNodeChanged: "dom-tree-outline-selected-node-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js
new file mode 100644
index 000000000..ee5d2b79c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeUpdater.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2007, 2008, 2013 Apple Inc.  All rights reserved.
+ * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
+ * Copyright (C) 2009 Joseph Pecoraro
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DOMTreeUpdater = function(treeOutline)
+{
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeInserted, this._nodeInserted, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.NodeRemoved, this._nodeRemoved, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeModified, this._attributesUpdated, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.AttributeRemoved, this._attributesUpdated, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.CharacterDataModified, this._characterDataModified, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DocumentUpdated, this._documentUpdated, this);
+    WebInspector.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.ChildNodeCountUpdated, this._childNodeCountUpdated, this);
+
+    this._treeOutline = treeOutline;
+    this._recentlyModifiedNodes = [];
+};
+
+WebInspector.DOMTreeUpdater.prototype = {
+    close: function()
+    {
+        WebInspector.domTreeManager.removeEventListener(null, null, this);
+    },
+
+    _documentUpdated: function(event)
+    {
+        this._reset();
+    },
+
+    _attributesUpdated: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, updated: true, attribute: event.data.name});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _characterDataModified: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, updated: true});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _nodeInserted: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, inserted: true});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _nodeRemoved: function(event)
+    {
+        this._recentlyModifiedNodes.push({node: event.data.node, parent: event.data.parent, removed: true});
+        if (this._treeOutline._visible)
+            this._updateModifiedNodesSoon();
+    },
+
+    _childNodeCountUpdated: function(event)
+    {
+        var treeElement = this._treeOutline.findTreeElement(event.data);
+        if (treeElement)
+            treeElement.hasChildren = event.data.hasChildNodes();
+    },
+
+    _updateModifiedNodesSoon: function()
+    {
+        if (this._updateModifiedNodesTimeout)
+            return;
+        this._updateModifiedNodesTimeout = setTimeout(this._updateModifiedNodes.bind(this), 0);
+    },
+
+    _updateModifiedNodes: function()
+    {
+        if (this._updateModifiedNodesTimeout) {
+            clearTimeout(this._updateModifiedNodesTimeout);
+            this._updateModifiedNodesTimeout = null;
+        }
+
+        let updatedParentTreeElements = [];
+        for (let recentlyModifiedNode of this._recentlyModifiedNodes) {
+            let parent = recentlyModifiedNode.parent;
+            let node = recentlyModifiedNode.node;
+            let changeInfo = null;
+            if (recentlyModifiedNode.attribute)
+                changeInfo = {type: WebInspector.DOMTreeElement.ChangeType.Attribute, attribute: recentlyModifiedNode.attribute};
+
+            if (recentlyModifiedNode.updated) {
+                let nodeTreeElement = this._treeOutline.findTreeElement(node);
+                if (!nodeTreeElement)
+                    continue;
+
+                if (changeInfo)
+                    nodeTreeElement.nodeStateChanged(changeInfo);
+
+                nodeTreeElement.updateTitle();
+            }
+
+            if (!parent)
+                continue;
+
+            let parentNodeItem = this._treeOutline.findTreeElement(parent);
+            if (parentNodeItem && !parentNodeItem.alreadyUpdatedChildren) {
+                parentNodeItem.updateTitle();
+                parentNodeItem.updateChildren();
+                parentNodeItem.alreadyUpdatedChildren = true;
+                updatedParentTreeElements.push(parentNodeItem);
+            }
+        }
+
+        for (let i = 0; i < updatedParentTreeElements.length; ++i)
+            updatedParentTreeElements[i].alreadyUpdatedChildren = null;
+
+        this._recentlyModifiedNodes = [];
+    },
+
+    _reset: function()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._recentlyModifiedNodes = [];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css b/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css
new file mode 100644
index 000000000..5c01c90a3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css
@@ -0,0 +1,171 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar .dashboard-container {
+    position: relative;
+
+    border-radius: 4px;
+    margin: 4px;
+    overflow: hidden;
+}
+
+body.web .toolbar .dashboard-container {
+    width: 36vw;
+    min-width: 350px;
+}
+
+body.javascript .toolbar .dashboard-container {
+    width: 25vw;
+    min-width: 175px;
+}
+
+.toolbar.collapsed .dashboard-container {
+    min-width: 175px !important;
+    width: 175px !important;
+}
+
+.toolbar.icon-and-label-vertical:matches(.small-size, .normal-size) .dashboard-container {
+    margin-top: 6px;
+}
+
+/* Styles for the extra short style, one row with quite a small y-margin */
+
+.toolbar.label-only .dashboard-container,
+.toolbar.small-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard-container {
+    height: 22px;
+}
+
+/* Styles for the fairly short style, one row with quite a bit of y-margin */
+
+.toolbar.normal-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard-container {
+    height: 30px;
+}
+
+/* Default styles for dashboards */
+
+.toolbar .dashboard {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    padding: 0 10px 0 5px;
+
+    animation-duration: 0.4s;
+}
+
+.toolbar .dashboard.visible {
+    z-index: 1; /* Establish a stacking context. */
+}
+
+.toolbar .dashboard:not(.visible) {
+    display: none !important;
+}
+
+.toolbar .dashboard.slide-out-up {
+    animation-name: slide-top-edge;
+    animation-direction: reverse;
+}
+
+.toolbar .dashboard.slide-out-down {
+    animation-name: slide-bottom-edge;
+}
+
+.toolbar .dashboard.slide-in-up {
+    animation-name: slide-bottom-edge;
+    animation-direction: reverse;
+}
+
+.toolbar .dashboard.slide-in-down {
+    animation-name: slide-top-edge;
+}
+
+@keyframes slide-top-edge {
+    from {
+        transform: translateY(-30px);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes slide-bottom-edge {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(30px);
+    }
+}
+
+.dashboard-container .advance-arrow {
+    position: absolute;
+    right: 0;
+    width: 19px;
+    top: 0;
+    bottom: 0;
+    padding: 4px 0;
+    opacity: 0.6;
+
+    z-index: 2;
+    background-repeat: no-repeat;
+    background-size: 8px;
+    background-image: url(../Images/UpDownArrows.svg);
+
+    transition-property: opacity;
+    transition-duration: 0.2s;
+    background-clip: content-box;
+}
+
+.dashboard-container .advance-arrow:hover {
+    opacity: 0.8;
+}
+
+.dashboard-container .advance-arrow:active {
+    opacity: 1;
+}
+
+.dashboard-container .advance-arrow.inactive {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.toolbar.label-only .dashboard-container .advance-arrow {
+    width: 8px;
+    height: 8px;
+    margin: 2px 4px 2px 2px;
+    background-size: 6px;
+}
+
+.dashboard-container .advance-arrow.advance-forward {
+    top: 0;
+    background-position: 50% 4px;
+}
+
+.dashboard-container .advance-arrow.advance-backward {
+    bottom: 0;
+    background-position: 50% -4px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js b/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js
new file mode 100644
index 000000000..b576559a6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js
@@ -0,0 +1,283 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DashboardContainerView = class DashboardContainerView extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._toolbarItem = new WebInspector.NavigationItem("dashboard-container", "group", WebInspector.UIString("Activity Viewer"));
+
+        this._advanceForwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
+        this._advanceForwardArrowElement.className = "advance-arrow advance-forward";
+        this._advanceBackwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
+        this._advanceBackwardArrowElement.className = "advance-arrow advance-backward";
+
+        this._advanceForwardArrowElement.addEventListener("click", this._advanceForwardArrowClicked.bind(this));
+        this._advanceBackwardArrowElement.addEventListener("click", this._advanceBackwardArrowClicked.bind(this));
+
+        // Represents currently open dashboards, with the most recent entries appended to the end.
+        this._dashboardStack = [];
+        this._currentIndex = -1;
+
+        this._updateAdvanceArrowVisibility();
+    }
+
+    // Public
+
+    get toolbarItem()
+    {
+        return this._toolbarItem;
+    }
+
+    get currentDashboardView()
+    {
+        if (this._currentIndex === -1)
+            return null;
+
+        return this._dashboardStack[this._currentIndex];
+    }
+
+    showDashboardViewForRepresentedObject(representedObject)
+    {
+        var dashboardView = this._dashboardViewForRepresentedObject(representedObject);
+        if (!dashboardView)
+            return null;
+
+        if (this.currentDashboardView === dashboardView)
+            return;
+
+        var index = this._dashboardStack.indexOf(dashboardView);
+        this._showDashboardAtIndex(index);
+        return dashboardView;
+    }
+
+    hideDashboardViewForRepresentedObject(representedObject)
+    {
+        var onlyReturnExistingViews = true;
+        var dashboardView = this._dashboardViewForRepresentedObject(representedObject, onlyReturnExistingViews);
+
+        if (this.currentDashboardView !== dashboardView)
+            return;
+
+        console.assert(this._currentIndex > 0);
+        this._showDashboardAtIndex(this._currentIndex - 1);
+    }
+
+    closeDashboardViewForRepresentedObject(representedObject)
+    {
+        var onlyReturnExistingViews = true;
+        var dashboardView = this._dashboardViewForRepresentedObject(representedObject, onlyReturnExistingViews);
+        if (!dashboardView)
+            return null;
+
+        this._closeDashboardView(dashboardView);
+    }
+
+    // Private
+
+    _advanceForwardArrowClicked()
+    {
+        this._showDashboardAtIndex(this._currentIndex + 1);
+    }
+
+    _advanceBackwardArrowClicked()
+    {
+        this._showDashboardAtIndex(this._currentIndex - 1);
+    }
+
+    _dismissAdvanceArrows()
+    {
+        this._advanceForwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
+        this._advanceBackwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
+    }
+
+    _updateAdvanceArrowVisibility()
+    {
+        var canAdvanceForward = this._currentIndex < this._dashboardStack.length - 1;
+        var canAdvanceBackward = this._currentIndex > 0;
+        this._advanceForwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceForward);
+        this._advanceBackwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceBackward);
+    }
+
+    _dashboardViewForRepresentedObject(representedObject, onlyReturnExistingViews)
+    {
+        console.assert(representedObject);
+
+        // Iterate over all known dashboard views and see if any are for this object.
+        for (var dashboardView of this._dashboardStack) {
+            if (dashboardView.representedObject === representedObject)
+                return dashboardView;
+        }
+
+        if (onlyReturnExistingViews)
+            return null;
+
+        // No existing content view found, make a new one.
+        dashboardView = WebInspector.DashboardView.create(representedObject);
+
+        console.assert(dashboardView, "Unknown representedObject", representedObject);
+        if (!dashboardView)
+            return null;
+
+        this._dashboardStack.push(dashboardView);
+        this._toolbarItem.element.appendChild(dashboardView.element);
+
+        return dashboardView;
+    }
+
+    _showDashboardAtIndex(index)
+    {
+        console.assert(index >= 0 && index <= this._dashboardStack.length - 1);
+
+        if (this._currentIndex === index)
+            return;
+
+        var advanceDirection = null;
+        if (this._currentIndex < index)
+            advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Forward;
+        else
+            advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Backward;
+        var initialDirection = WebInspector.DashboardContainerView.AdvanceDirection.None;
+        var isInitialDashboard = this._currentIndex === -1;
+        if (!isInitialDashboard)
+            this._hideDashboardView(this.currentDashboardView, advanceDirection);
+
+        this._currentIndex = index;
+        this._showDashboardView(this.currentDashboardView, isInitialDashboard ? initialDirection : advanceDirection);
+    }
+
+    _showDashboardView(dashboardView, advanceDirection)
+    {
+        console.assert(dashboardView instanceof WebInspector.DashboardView);
+
+        dashboardView.shown();
+        this._dismissAdvanceArrows();
+
+        var animationClass = null;
+        if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Forward)
+            animationClass = WebInspector.DashboardContainerView.ForwardIncomingDashboardStyleClassName;
+        if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Backward)
+            animationClass = WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName;
+
+        var container = this;
+        dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+
+        function animationEnded(event) {
+            if (event.target !== dashboardView.element)
+                return;
+
+            dashboardView.element.removeEventListener("animationend", animationEnded);
+            dashboardView.element.classList.remove(animationClass);
+            container._updateAdvanceArrowVisibility();
+        }
+
+        if (animationClass) {
+            dashboardView.element.classList.add(animationClass);
+            dashboardView.element.addEventListener("animationend", animationEnded);
+        }
+
+        return dashboardView;
+    }
+
+    _hideDashboardView(dashboardView, advanceDirection, callback)
+    {
+        console.assert(dashboardView instanceof WebInspector.DashboardView);
+        console.assert(this.currentDashboardView === dashboardView);
+
+        dashboardView.hidden();
+        this._dismissAdvanceArrows();
+
+        var animationClass = null;
+        if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Forward)
+            animationClass = WebInspector.DashboardContainerView.ForwardOutgoingDashboardStyleClassName;
+        if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Backward)
+            animationClass = WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName;
+
+        var container = this;
+
+        function animationEnded(event) {
+            if (event.target !== dashboardView.element)
+                return;
+
+            dashboardView.element.removeEventListener("animationend", animationEnded);
+            dashboardView.element.classList.remove(animationClass);
+            dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+            container._updateAdvanceArrowVisibility();
+
+            if (typeof callback === "function")
+                callback();
+        }
+
+        if (animationClass) {
+            dashboardView.element.classList.add(animationClass);
+            dashboardView.element.addEventListener("animationend", animationEnded);
+        } else
+            dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+    }
+
+    _closeDashboardView(dashboardView)
+    {
+        console.assert(dashboardView instanceof WebInspector.DashboardView);
+
+        function dissociateDashboardView() {
+            dashboardView.closed();
+            dashboardView.element.parentNode.removeChild(dashboardView.element);
+        }
+
+        var index = this._dashboardStack.indexOf(dashboardView);
+
+        if (this.currentDashboardView === dashboardView) {
+            var direction = WebInspector.DashboardContainerView.AdvanceDirection.Backward;
+            this._hideDashboardView(this.currentDashboardView, direction, dissociateDashboardView);
+            this._dashboardStack.splice(index, 1);
+            --this._currentIndex;
+            this._showDashboardView(this.currentDashboardView, direction);
+            return;
+        }
+
+        this._dashboardStack.splice(index, 1);
+        if (this._currentIndex > index)
+            --this._currentIndex;
+        dissociateDashboardView.call(this);
+
+        this._updateAdvanceArrowVisibility();
+    }
+};
+
+WebInspector.DashboardContainerView.VisibleDashboardStyleClassName = "visible";
+WebInspector.DashboardContainerView.InactiveStyleClassName = "inactive";
+
+WebInspector.DashboardContainerView.AdvanceDirection = {
+    Forward: Symbol("dashboard-container-view-advance-direction-forward"),
+    Backward: Symbol("dashboard-container-view-advance-direction-backward"),
+    None: Symbol("dashboard-container-view-advance-direction-none")
+};
+
+WebInspector.DashboardContainerView.ForwardIncomingDashboardStyleClassName = "slide-in-down";
+WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName = "slide-in-up";
+WebInspector.DashboardContainerView.ForwardOutgoingDashboardStyleClassName = "slide-out-down";
+WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName = "slide-out-up";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DashboardView.js b/Source/WebInspectorUI/UserInterface/Views/DashboardView.js
new file mode 100644
index 000000000..f4e598b9f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DashboardView.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DashboardView = class DashboardView extends WebInspector.Object
+{
+    constructor(representedObject, identifier)
+    {
+        console.assert(identifier);
+
+        super();
+
+        this._representedObject = representedObject;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("dashboard");
+        this._element.classList.add(identifier);
+    }
+
+    // Static
+
+    static create(representedObject)
+    {
+        console.assert(representedObject);
+
+        if (representedObject instanceof WebInspector.DefaultDashboard)
+            return new WebInspector.DefaultDashboardView(representedObject);
+
+        if (representedObject instanceof WebInspector.DebuggerDashboard)
+            return new WebInspector.DebuggerDashboardView(representedObject);
+
+        if (representedObject instanceof WebInspector.ReplayDashboard)
+            return new WebInspector.ReplayDashboardView(representedObject);
+
+        throw "Can't make a DashboardView for an unknown representedObject.";
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get representedObject()
+    {
+        return this._representedObject;
+    }
+
+    shown()
+    {
+        // Implemented by subclasses.
+    }
+
+    hidden()
+    {
+        // Implemented by subclasses.
+    }
+
+    closed()
+    {
+        // Implemented by subclasses.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
new file mode 100644
index 000000000..8c34d333e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css
@@ -0,0 +1,299 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.data-grid {
+    position: relative;
+    outline: none;
+}
+
+.data-grid .highlight {
+    background-color: hsl(40, 100%, 85%);
+}
+
+.data-grid tr.selected .highlight {
+    background-color: transparent;
+}
+
+.data-grid table {
+    table-layout: fixed;
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.data-grid .data-container {
+    position: absolute;
+    top: 23px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-x: hidden;
+    overflow-y: overlay;
+}
+
+.data-grid.inline .data-container {
+    position: static;
+}
+
+.data-grid.inline {
+    border: 1px solid var(--border-color);
+}
+
+.data-grid.no-header > table.header {
+    display: none;
+}
+
+.data-grid.no-header .data-container {
+    top: 0;
+}
+
+.data-grid th {
+    text-align: left;
+    vertical-align: middle;
+
+    background-color: white;
+
+    border-bottom: 1px solid var(--border-color);
+
+    font-weight: normal;
+
+    height: 22px;
+    padding: 0 6px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.data-grid :matches(th, td):not(:last-child) {
+    border-right: 1px solid var(--border-color);
+}
+
+.data-grid th.sortable:active {
+    background-color: hsl(0, 0%, 70%);
+}
+
+.data-grid th:matches(.sort-ascending, .sort-descending) {
+    background-color: hsl(0, 0%, 90%);
+}
+
+.data-grid tr.filler {
+    display: table-row !important;
+    height: auto !important;
+}
+
+.data-grid tr.filler td {
+    height: auto !important;
+    padding: 0 !important;
+}
+
+.data-grid table.data {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    border-top: 0 none transparent;
+    background-image: linear-gradient(to bottom, white, white 50%, hsl(214, 41%, 96%) 50%, hsl(214, 41%, 96%));
+    background-size: 100% 42px;
+    table-layout: fixed;
+}
+
+.data-grid.inline table.data {
+    position: static;
+}
+
+.data-grid table.data tr {
+    display: none;
+}
+
+.data-grid table.data tr.revealed {
+    display: table-row;
+}
+
+.data-grid td {
+    vertical-align: top;
+    height: 12px;
+    line-height: 17px;
+    padding: 2px 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    font-family: -apple-system-monospaced-numbers, sans-serif;
+}
+
+.data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child) {
+    border-right-color: hsl(210, 100%, 40%);
+}
+
+.data-grid :matches(th, td) > div {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.data-grid .centered div {
+    text-align: center;
+}
+
+.data-grid .right div {
+    text-align: right;
+}
+
+.data-grid th.sortable div {
+    position: relative;
+}
+
+.data-grid th:matches(.sort-ascending, .sort-descending) > div:first-child {
+    padding-right: 12px;
+}
+
+.data-grid th.sort-ascending > div:first-child::after {
+    position: absolute;
+    top: 1px;
+    bottom: 0;
+    right: 0;
+
+    margin-bottom: auto;
+    margin-top: auto;
+
+    width: 9px;
+    height: 8px;
+
+    content: "";
+
+    background-image: url(../Images/SortIndicatorArrows.svg#up-arrow-normal);
+    background-size: 9px 8px;
+    background-repeat: no-repeat;
+}
+
+.data-grid th.sort-descending > div:first-child::after {
+    position: absolute;
+    top: 1px;
+    bottom: 0;
+    right: 0;
+
+    margin-bottom: auto;
+    margin-top: auto;
+
+    width: 9px;
+    height: 8px;
+
+    content: "";
+
+    background-image: url(../Images/SortIndicatorArrows.svg#down-arrow-normal);
+    background-size: 9px 8px;
+    background-repeat: no-repeat;
+}
+
+.data-grid button {
+    line-height: 19px;
+}
+
+.data-grid tr.parent td.disclosure::before {
+    float: left;
+
+    content: "";
+
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-position-y: center;
+    background-size: 13px 13px;
+    background-repeat: no-repeat;
+
+    width: 13px;
+    height: 100%;
+}
+
+.data-grid tr.parent.expanded td.disclosure::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.data-grid:matches(:focus, .force-focus) tr.parent.selected td.disclosure::before {
+    background-image: url(../Images/DisclosureTriangles.svg#closed-selected);
+}
+
+.data-grid:matches(:focus, .force-focus) tr.parent.expanded.selected td.disclosure::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-selected);
+}
+
+.data-grid tr.selected {
+    background-color: hsl(0, 0%, 83%) !important;
+    color: inherit !important;
+}
+
+.data-grid:matches(:focus, .force-focus) tr.selected {
+    background-color: hsl(209, 100%, 49%) !important;
+    color: white !important;
+}
+
+.data-grid tr:not(.parent) td.disclosure {
+    text-indent: 13px;
+}
+
+.data-grid td .subtitle {
+    color: hsla(0, 0%, 0%, 0.7);
+}
+
+.data-grid td .subtitle::before {
+    content: " — ";
+}
+
+.data-grid:matches(:focus, .force-focus) tr.selected td .subtitle {
+    color: hsla(0, 0%, 100%, 0.9);
+}
+
+.data-grid td.error {
+    color: hsl(0, 86%, 47%);
+}
+
+.data-grid tr.selected td.error {
+    color: inherit;
+}
+
+.data-grid td .icon {
+    display: inline-block;
+    vertical-align: top;
+
+    width: 16px;
+    height: 16px;
+
+    margin-right: 2px;
+}
+
+.data-grid td .go-to-arrow {
+    float: right;
+
+    display: none;
+
+    margin-left: 2px;
+}
+
+.data-grid tr:matches(.selected, :hover) .go-to-arrow {
+    display: block;
+}
+
+.data-grid .resizer {
+    z-index: var(--z-index-resizer);
+    transform: translateX(-2.5px);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.js b/Source/WebInspectorUI/UserInterface/Views/DataGrid.js
new file mode 100644
index 000000000..ea4c62700
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.js
@@ -0,0 +1,2072 @@
+/*
+ * Copyright (C) 2008, 2013-2015 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *        notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *        notice, this list of conditions and the following disclaimer in the
+ *        documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED.         IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DataGrid = class DataGrid extends WebInspector.View
+{
+    constructor(columnsData, editCallback, deleteCallback, preferredColumnOrder)
+    {
+        super();
+
+        this.columns = new Map;
+        this.orderedColumns = [];
+
+        this._sortColumnIdentifier = null;
+        this._sortColumnIdentifierSetting = null;
+        this._sortOrder = WebInspector.DataGrid.SortOrder.Indeterminate;
+        this._sortOrderSetting = null;
+
+        this.children = [];
+        this.selectedNode = null;
+        this.expandNodesWhenArrowing = false;
+        this.root = true;
+        this.hasChildren = false;
+        this.expanded = true;
+        this.revealed = true;
+        this.selected = false;
+        this.dataGrid = this;
+        this.indentWidth = 15;
+        this.resizers = [];
+        this._columnWidthsInitialized = false;
+
+        this.element.className = "data-grid";
+        this.element.tabIndex = 0;
+        this.element.addEventListener("keydown", this._keyDown.bind(this), false);
+        this.element.copyHandler = this;
+
+        this._headerTableElement = document.createElement("table");
+        this._headerTableElement.className = "header";
+        this._headerTableColumnGroupElement = this._headerTableElement.createChild("colgroup");
+        this._headerTableBodyElement = this._headerTableElement.createChild("tbody");
+        this._headerTableRowElement = this._headerTableBodyElement.createChild("tr");
+        this._headerTableRowElement.addEventListener("contextmenu", this._contextMenuInHeader.bind(this), true);
+        this._headerTableCellElements = new Map;
+
+        this._scrollContainerElement = document.createElement("div");
+        this._scrollContainerElement.className = "data-container";
+
+        this._dataTableElement = this._scrollContainerElement.createChild("table");
+        this._dataTableElement.className = "data";
+
+        this._dataTableElement.addEventListener("mousedown", this._mouseDownInDataTable.bind(this));
+        this._dataTableElement.addEventListener("click", this._clickInDataTable.bind(this));
+        this._dataTableElement.addEventListener("contextmenu", this._contextMenuInDataTable.bind(this), true);
+
+        // FIXME: Add a createCallback which is different from editCallback and has different
+        // behavior when creating a new node.
+        if (editCallback) {
+            this._dataTableElement.addEventListener("dblclick", this._ondblclick.bind(this), false);
+            this._editCallback = editCallback;
+        }
+        if (deleteCallback)
+            this._deleteCallback = deleteCallback;
+
+        this._dataTableColumnGroupElement = this._headerTableColumnGroupElement.cloneNode(true);
+        this._dataTableElement.appendChild(this._dataTableColumnGroupElement);
+
+        // This element is used by DataGridNodes to manipulate table rows and cells.
+        this.dataTableBodyElement = this._dataTableElement.createChild("tbody");
+        this._fillerRowElement = this.dataTableBodyElement.createChild("tr");
+        this._fillerRowElement.className = "filler";
+
+        this.element.appendChild(this._headerTableElement);
+        this.element.appendChild(this._scrollContainerElement);
+
+        if (preferredColumnOrder) {
+            for (var columnIdentifier of preferredColumnOrder)
+                this.insertColumn(columnIdentifier, columnsData[columnIdentifier]);
+        } else {
+            for (var columnIdentifier in columnsData)
+                this.insertColumn(columnIdentifier, columnsData[columnIdentifier]);
+        }
+    }
+
+    static createSortableDataGrid(columnNames, values)
+    {
+        var numColumns = columnNames.length;
+        if (!numColumns)
+            return null;
+
+        var columnsData = {};
+        for (var columnName of columnNames) {
+            columnsData[columnName] = {
+                width: columnName.length,
+                title: columnName,
+                sortable: true,
+            };
+        }
+
+        var dataGrid = new WebInspector.DataGrid(columnsData, undefined, undefined, columnNames);
+        for (var i = 0; i < values.length / numColumns; ++i) {
+            var data = {};
+            for (var j = 0; j < columnNames.length; ++j)
+                data[columnNames[j]] = values[numColumns * i + j];
+
+            var node = new WebInspector.DataGridNode(data, false);
+            dataGrid.appendChild(node);
+        }
+
+        function sortDataGrid()
+        {
+            var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
+
+            var columnIsNumeric = true;
+            for (var node of dataGrid.children) {
+                var value = dataGrid.textForDataGridNodeColumn(node, sortColumnIdentifier);
+                if (isNaN(Number(value)))
+                    columnIsNumeric = false;
+            }
+
+            function comparator(dataGridNode1, dataGridNode2)
+            {
+                var item1 = dataGrid.textForDataGridNodeColumn(dataGridNode1, sortColumnIdentifier);
+                var item2 = dataGrid.textForDataGridNodeColumn(dataGridNode2, sortColumnIdentifier);
+
+                var comparison;
+                if (columnIsNumeric) {
+                    var number1 = parseFloat(item1);
+                    var number2 = parseFloat(item2);
+                    comparison = number1 < number2 ? -1 : (number1 > number2 ? 1 : 0);
+                } else
+                    comparison = item1 < item2 ? -1 : (item1 > item2 ? 1 : 0);
+
+                return comparison;
+            }
+
+            dataGrid.sortNodes(comparator);
+        }
+
+        dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, sortDataGrid, this);
+
+        dataGrid.sortOrder = WebInspector.DataGrid.SortOrder.Ascending;
+        dataGrid.sortColumnIdentifier = columnNames[0];
+
+        return dataGrid;
+    }
+
+    get refreshCallback()
+    {
+        return this._refreshCallback;
+    }
+
+    set refreshCallback(refreshCallback)
+    {
+        this._refreshCallback = refreshCallback;
+    }
+
+    get sortOrder()
+    {
+        return this._sortOrder;
+    }
+
+    set sortOrder(order)
+    {
+        if (!order || order === this._sortOrder)
+            return;
+
+        this._sortOrder = order;
+
+        if (this._sortOrderSetting)
+            this._sortOrderSetting.value = this._sortOrder;
+
+        if (!this._sortColumnIdentifier)
+            return;
+
+        var sortHeaderCellElement = this._headerTableCellElements.get(this._sortColumnIdentifier);
+
+        sortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnAscendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Ascending);
+        sortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnDescendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Descending);
+
+        this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
+    }
+
+    set sortOrderSetting(setting)
+    {
+        console.assert(setting instanceof WebInspector.Setting);
+
+        this._sortOrderSetting = setting;
+        if (this._sortOrderSetting.value)
+            this.sortOrder = this._sortOrderSetting.value;
+    }
+
+    get sortColumnIdentifier()
+    {
+        return this._sortColumnIdentifier;
+    }
+
+    set sortColumnIdentifier(columnIdentifier)
+    {
+        console.assert(columnIdentifier && this.columns.has(columnIdentifier));
+        console.assert("sortable" in this.columns.get(columnIdentifier));
+
+        if (this._sortColumnIdentifier === columnIdentifier)
+            return;
+
+        let oldSortColumnIdentifier = this._sortColumnIdentifier;
+        this._sortColumnIdentifier = columnIdentifier;
+        this._updateSortedColumn(oldSortColumnIdentifier);
+    }
+
+    set sortColumnIdentifierSetting(setting)
+    {
+        console.assert(setting instanceof WebInspector.Setting);
+
+        this._sortColumnIdentifierSetting = setting;
+        if (this._sortColumnIdentifierSetting.value)
+            this.sortColumnIdentifier = this._sortColumnIdentifierSetting.value;
+    }
+
+    _updateSortedColumn(oldSortColumnIdentifier)
+    {
+        if (this._sortColumnIdentifierSetting)
+            this._sortColumnIdentifierSetting.value = this._sortColumnIdentifier;
+
+        if (oldSortColumnIdentifier) {
+            let oldSortHeaderCellElement = this._headerTableCellElements.get(oldSortColumnIdentifier);
+            oldSortHeaderCellElement.classList.remove(WebInspector.DataGrid.SortColumnAscendingStyleClassName);
+            oldSortHeaderCellElement.classList.remove(WebInspector.DataGrid.SortColumnDescendingStyleClassName);
+        }
+
+        if (this._sortColumnIdentifier) {
+            let newSortHeaderCellElement = this._headerTableCellElements.get(this._sortColumnIdentifier);
+            newSortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnAscendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Ascending);
+            newSortHeaderCellElement.classList.toggle(WebInspector.DataGrid.SortColumnDescendingStyleClassName, this._sortOrder === WebInspector.DataGrid.SortOrder.Descending);
+        }
+
+        this.dispatchEventToListeners(WebInspector.DataGrid.Event.SortChanged);
+    }
+
+    _ondblclick(event)
+    {
+        if (this._editing || this._editingNode)
+            return;
+
+        this._startEditing(event.target);
+    }
+
+    _startEditingNodeAtColumnIndex(node, columnIndex)
+    {
+        console.assert(node, "Invalid argument: must provide DataGridNode to edit.");
+
+        this._editing = true;
+        this._editingNode = node;
+        this._editingNode.select();
+
+        var element = this._editingNode._element.children[columnIndex];
+        WebInspector.startEditing(element, this._startEditingConfig(element));
+        window.getSelection().setBaseAndExtent(element, 0, element, 1);
+    }
+
+    _startEditing(target)
+    {
+        var element = target.enclosingNodeOrSelfWithNodeName("td");
+        if (!element)
+            return;
+
+        this._editingNode = this.dataGridNodeFromNode(target);
+        if (!this._editingNode) {
+            if (!this.placeholderNode)
+                return;
+            this._editingNode = this.placeholderNode;
+        }
+
+        // Force editing the 1st column when editing the placeholder node
+        if (this._editingNode.isPlaceholderNode)
+            return this._startEditingNodeAtColumnIndex(this._editingNode, 0);
+
+        this._editing = true;
+        WebInspector.startEditing(element, this._startEditingConfig(element));
+
+        window.getSelection().setBaseAndExtent(element, 0, element, 1);
+    }
+
+    _startEditingConfig(element)
+    {
+        return new WebInspector.EditingConfig(this._editingCommitted.bind(this), this._editingCancelled.bind(this), element.textContent);
+    }
+
+    _editingCommitted(element, newText, oldText, context, moveDirection)
+    {
+        var columnIdentifier = element.__columnIdentifier;
+        var columnIndex = this.orderedColumns.indexOf(columnIdentifier);
+
+        var textBeforeEditing = this._editingNode.data[columnIdentifier] || "";
+        var currentEditingNode = this._editingNode;
+
+        // Returns an object with the next node and column index to edit, and whether it
+        // is an appropriate time to re-sort the table rows. When editing, we want to
+        // postpone sorting until we switch rows or wrap around a row.
+        function determineNextCell(valueDidChange) {
+            if (moveDirection === "forward") {
+                if (columnIndex < this.orderedColumns.length - 1)
+                    return {shouldSort: false, editingNode: currentEditingNode, columnIndex: columnIndex + 1};
+
+                // Continue by editing the first column of the next row if it exists.
+                var nextDataGridNode = currentEditingNode.traverseNextNode(true, null, true);
+                return {shouldSort: true, editingNode: nextDataGridNode || currentEditingNode, columnIndex: 0};
+            }
+
+            if (moveDirection === "backward") {
+                if (columnIndex > 0)
+                    return {shouldSort: false, editingNode: currentEditingNode, columnIndex: columnIndex - 1};
+
+                var previousDataGridNode = currentEditingNode.traversePreviousNode(true, null, true);
+                return {shouldSort: true, editingNode: previousDataGridNode || currentEditingNode, columnIndex: this.orderedColumns.length - 1};
+            }
+
+            // If we are not moving in any direction, then sort and stop.
+            return {shouldSort: true};
+        }
+
+        function moveToNextCell(valueDidChange) {
+            var moveCommand = determineNextCell.call(this, valueDidChange);
+            if (moveCommand.shouldSort && this._sortAfterEditingCallback) {
+                this._sortAfterEditingCallback();
+                this._sortAfterEditingCallback = null;
+            }
+            if (moveCommand.editingNode)
+                this._startEditingNodeAtColumnIndex(moveCommand.editingNode, moveCommand.columnIndex);
+        }
+
+        this._editingCancelled(element);
+
+        // Update table's data model, and delegate to the callback to update other models.
+        currentEditingNode.data[columnIdentifier] = newText.trim();
+        this._editCallback(currentEditingNode, columnIdentifier, textBeforeEditing, newText, moveDirection);
+
+        var textDidChange = textBeforeEditing.trim() !== newText.trim();
+        moveToNextCell.call(this, textDidChange);
+    }
+
+    _editingCancelled(element)
+    {
+        console.assert(this._editingNode.element === element.enclosingNodeOrSelfWithNodeName("tr"));
+        this._editing = false;
+        this._editingNode = null;
+    }
+
+    autoSizeColumns(minPercent, maxPercent, maxDescentLevel)
+    {
+        if (minPercent)
+            minPercent = Math.min(minPercent, Math.floor(100 / this.orderedColumns.length));
+        var widths = {};
+        // For the first width approximation, use the character length of column titles.
+        for (var [identifier, column] of this.columns)
+            widths[identifier] = (column["title"] || "").length;
+
+        // Now approximate the width of each column as max(title, cells).
+        var children = maxDescentLevel ? this._enumerateChildren(this, [], maxDescentLevel + 1) : this.children;
+        for (var node of children) {
+            for (var identifier of this.columns.keys()) {
+                var text = this.textForDataGridNodeColumn(node, identifier);
+                if (text.length > widths[identifier])
+                    widths[identifier] = text.length;
+            }
+        }
+
+        var totalColumnWidths = 0;
+        for (var identifier of this.columns.keys())
+            totalColumnWidths += widths[identifier];
+
+        // Compute percentages and clamp desired widths to min and max widths.
+        var recoupPercent = 0;
+        for (var identifier of this.columns.keys()) {
+            var width = Math.round(100 * widths[identifier] / totalColumnWidths);
+            if (minPercent && width < minPercent) {
+                recoupPercent += (minPercent - width);
+                width = minPercent;
+            } else if (maxPercent && width > maxPercent) {
+                recoupPercent -= (width - maxPercent);
+                width = maxPercent;
+            }
+            widths[identifier] = width;
+        }
+
+        // If we assigned too much width due to the above, reduce column widths.
+        while (minPercent && recoupPercent > 0) {
+            for (var identifier of this.columns.keys()) {
+                if (widths[identifier] > minPercent) {
+                    --widths[identifier];
+                    --recoupPercent;
+                    if (!recoupPercent)
+                        break;
+                }
+            }
+        }
+
+        // If extra width remains after clamping widths, expand column widths.
+        while (maxPercent && recoupPercent < 0) {
+            for (var identifier of this.columns.keys()) {
+                if (widths[identifier] < maxPercent) {
+                    ++widths[identifier];
+                    ++recoupPercent;
+                    if (!recoupPercent)
+                        break;
+                }
+            }
+        }
+
+        for (var [identifier, column] of this.columns)
+            column["element"].style.width = widths[identifier] + "%";
+        this._columnWidthsInitialized = false;
+        this.needsLayout();
+    }
+
+    insertColumn(columnIdentifier, columnData, insertionIndex)
+    {
+        if (insertionIndex === undefined)
+            insertionIndex = this.orderedColumns.length;
+        insertionIndex = Number.constrain(insertionIndex, 0, this.orderedColumns.length);
+
+        var listeners = new WebInspector.EventListenerSet(this, "DataGrid column DOM listeners");
+
+        // Copy configuration properties instead of keeping a reference to the passed-in object.
+        var column = Object.shallowCopy(columnData);
+        column["listeners"] = listeners;
+        column["ordinal"] = insertionIndex;
+        column["columnIdentifier"] = columnIdentifier;
+
+        this.orderedColumns.splice(insertionIndex, 0, columnIdentifier);
+
+        for (var [identifier, existingColumn] of this.columns) {
+            var ordinal = existingColumn["ordinal"];
+            if (ordinal >= insertionIndex) // Also adjust the "old" column at insertion index.
+                existingColumn["ordinal"] = ordinal + 1;
+        }
+        this.columns.set(columnIdentifier, column);
+
+        if (column["disclosure"])
+            this.disclosureColumnIdentifier = columnIdentifier;
+
+        var headerColumnElement = document.createElement("col");
+        if (column["width"])
+            headerColumnElement.style.width = column["width"];
+        column["element"] = headerColumnElement;
+        var referenceElement = this._headerTableColumnGroupElement.children[insertionIndex];
+        this._headerTableColumnGroupElement.insertBefore(headerColumnElement, referenceElement);
+
+        var headerCellElement = document.createElement("th");
+        headerCellElement.className = columnIdentifier + "-column";
+        headerCellElement.columnIdentifier = columnIdentifier;
+        if (column["aligned"])
+            headerCellElement.classList.add(column["aligned"]);
+        this._headerTableCellElements.set(columnIdentifier, headerCellElement);
+        var referenceElement = this._headerTableRowElement.children[insertionIndex];
+        this._headerTableRowElement.insertBefore(headerCellElement, referenceElement);
+
+        if (column["headerView"]) {
+            let headerView = column["headerView"];
+            console.assert(headerView instanceof WebInspector.View);
+
+            headerCellElement.appendChild(headerView.element);
+            this.addSubview(headerView);
+        } else {
+            let titleElement = headerCellElement.createChild("div");
+            if (column["titleDOMFragment"])
+                titleElement.appendChild(column["titleDOMFragment"]);
+            else
+                titleElement.textContent = column["title"] || "";
+        }
+
+        if (column["sortable"]) {
+            listeners.register(headerCellElement, "click", this._headerCellClicked);
+            headerCellElement.classList.add(WebInspector.DataGrid.SortableColumnStyleClassName);
+        }
+
+        if (column["group"])
+            headerCellElement.classList.add("column-group-" + column["group"]);
+
+        if (column["collapsesGroup"]) {
+            console.assert(column["group"] !== column["collapsesGroup"]);
+
+            var dividerElement = headerCellElement.createChild("div");
+            dividerElement.className = "divider";
+
+            var collapseDiv = headerCellElement.createChild("div");
+            collapseDiv.className = "collapser-button";
+            collapseDiv.title = this._collapserButtonCollapseColumnsToolTip();
+            listeners.register(collapseDiv, "mouseover", this._mouseoverColumnCollapser);
+            listeners.register(collapseDiv, "mouseout", this._mouseoutColumnCollapser);
+            listeners.register(collapseDiv, "click", this._clickInColumnCollapser);
+
+            headerCellElement.collapsesGroup = column["collapsesGroup"];
+            headerCellElement.classList.add("collapser");
+        }
+
+        this._headerTableColumnGroupElement.span = this.orderedColumns.length;
+
+        var dataColumnElement = headerColumnElement.cloneNode();
+        var referenceElement = this._dataTableColumnGroupElement.children[insertionIndex];
+        this._dataTableColumnGroupElement.insertBefore(dataColumnElement, referenceElement);
+        column["bodyElement"] = dataColumnElement;
+
+        var fillerCellElement = document.createElement("td");
+        fillerCellElement.className = columnIdentifier + "-column";
+        fillerCellElement.__columnIdentifier = columnIdentifier;
+        if (column["group"])
+            fillerCellElement.classList.add("column-group-" + column["group"]);
+        var referenceElement = this._fillerRowElement.children[insertionIndex];
+        this._fillerRowElement.insertBefore(fillerCellElement, referenceElement);
+
+        listeners.install();
+
+        if (column["hidden"])
+            this._hideColumn(columnIdentifier);
+    }
+
+    removeColumn(columnIdentifier)
+    {
+        console.assert(this.columns.has(columnIdentifier));
+        var removedColumn = this.columns.get(columnIdentifier);
+        this.columns.delete(columnIdentifier);
+        this.orderedColumns.splice(this.orderedColumns.indexOf(columnIdentifier), 1);
+
+        var removedOrdinal = removedColumn["ordinal"];
+        for (var [identifier, column] of this.columns) {
+            var ordinal = column["ordinal"];
+            if (ordinal > removedOrdinal)
+                column["ordinal"] = ordinal - 1;
+        }
+
+        removedColumn["listeners"].uninstall(true);
+
+        if (removedColumn["disclosure"])
+            this.disclosureColumnIdentifier = undefined;
+
+        if (this.sortColumnIdentifier === columnIdentifier)
+            this.sortColumnIdentifier = null;
+
+        this._headerTableCellElements.delete(columnIdentifier);
+        this._headerTableRowElement.children[removedOrdinal].remove();
+        this._headerTableColumnGroupElement.children[removedOrdinal].remove();
+        this._dataTableColumnGroupElement.children[removedOrdinal].remove();
+        this._fillerRowElement.children[removedOrdinal].remove();
+
+        this._headerTableColumnGroupElement.span = this.orderedColumns.length;
+
+        for (var child of this.children)
+            child.refresh();
+    }
+
+    _enumerateChildren(rootNode, result, maxLevel)
+    {
+        if (!rootNode.root)
+            result.push(rootNode);
+        if (!maxLevel)
+            return;
+        for (var i = 0; i < rootNode.children.length; ++i)
+            this._enumerateChildren(rootNode.children[i], result, maxLevel - 1);
+        return result;
+    }
+
+    // Updates the widths of the table, including the positions of the column
+    // resizers.
+    //
+    // IMPORTANT: This function MUST be called once after the element of the
+    // DataGrid is attached to its parent element and every subsequent time the
+    // width of the parent element is changed in order to make it possible to
+    // resize the columns.
+    //
+    // If this function is not called after the DataGrid is attached to its
+    // parent element, then the DataGrid's columns will not be resizable.
+    layout()
+    {
+        // Do not attempt to use offsets if we're not attached to the document tree yet.
+        if (!this._columnWidthsInitialized && this.element.offsetWidth) {
+            // Give all the columns initial widths now so that during a resize,
+            // when the two columns that get resized get a percent value for
+            // their widths, all the other columns already have percent values
+            // for their widths.
+            var headerTableColumnElements = this._headerTableColumnGroupElement.children;
+            var tableWidth = this._dataTableElement.offsetWidth;
+            var numColumns = headerTableColumnElements.length;
+            for (var i = 0; i < numColumns; i++) {
+                var headerCellElement = this._headerTableBodyElement.rows[0].cells[i]
+                if (this._isColumnVisible(headerCellElement.columnIdentifier)) {
+                    var columnWidth = headerCellElement.offsetWidth;
+                    var percentWidth = ((columnWidth / tableWidth) * 100) + "%";
+                    this._headerTableColumnGroupElement.children[i].style.width = percentWidth;
+                    this._dataTableColumnGroupElement.children[i].style.width = percentWidth;
+                } else {
+                    this._headerTableColumnGroupElement.children[i].style.width = 0;
+                    this._dataTableColumnGroupElement.children[i].style.width = 0;
+                }
+            }
+
+            this._columnWidthsInitialized = true;
+        }
+
+        this._positionResizerElements();
+        this._positionHeaderViews();
+    }
+
+    columnWidthsMap()
+    {
+        var result = {};
+        for (var [identifier, column] of this.columns) {
+            var width = this._headerTableColumnGroupElement.children[column["ordinal"]].style.width;
+            result[columnIdentifier] = parseFloat(width);
+        }
+        return result;
+    }
+
+    applyColumnWidthsMap(columnWidthsMap)
+    {
+        for (var [identifier, column] of this.columns) {
+            var width = (columnWidthsMap[identifier] || 0) + "%";
+            var ordinal = column["ordinal"];
+            this._headerTableColumnGroupElement.children[ordinal].style.width = width;
+            this._dataTableColumnGroupElement.children[ordinal].style.width = width;
+        }
+
+        this.needsLayout();
+    }
+
+    _isColumnVisible(columnIdentifier)
+    {
+        return !this.columns.get(columnIdentifier)["hidden"];
+    }
+
+    _showColumn(columnIdentifier)
+    {
+        this.columns.get(columnIdentifier)["hidden"] = false;
+    }
+
+    _hideColumn(columnIdentifier)
+    {
+        var column = this.columns.get(columnIdentifier);
+        column["hidden"] = true;
+
+        var columnElement = column["element"];
+        columnElement.style.width = 0;
+
+        this._columnWidthsInitialized = false;
+    }
+
+    get scrollContainer()
+    {
+        return this._scrollContainerElement;
+    }
+
+    isScrolledToLastRow()
+    {
+        return this._scrollContainerElement.isScrolledToBottom();
+    }
+
+    scrollToLastRow()
+    {
+        this._scrollContainerElement.scrollTop = this._scrollContainerElement.scrollHeight - this._scrollContainerElement.offsetHeight;
+    }
+
+    _positionResizerElements()
+    {
+        var left = 0;
+        var previousResizer = null;
+
+        // Make n - 1 resizers for n columns.
+        for (var i = 0; i < this.orderedColumns.length - 1; ++i) {
+            // Create a new resizer if one does not exist for this column.
+            if (i === this.resizers.length) {
+                resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
+                this.resizers[i] = resizer;
+                // This resizer is associated with the column to its right.
+                this.element.appendChild(resizer.element);
+            }
+
+            var resizer = this.resizers[i];
+
+            // Get the width of the cell in the first (and only) row of the
+            // header table in order to determine the width of the column, since
+            // it is not possible to query a column for its width.
+            left += this._headerTableBodyElement.rows[0].cells[i].offsetWidth;
+
+            if (this._isColumnVisible(this.orderedColumns[i])) {
+                resizer.element.style.removeProperty("display");
+                resizer.element.style.left = left + "px";
+                resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol] = i;
+                if (previousResizer)
+                    previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = i;
+                previousResizer = resizer;
+            } else {
+                resizer.element.style.setProperty("display", "none");
+                resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol] = 0;
+                resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = 0;
+            }
+        }
+        if (previousResizer)
+            previousResizer[WebInspector.DataGrid.NextColumnOrdinalSymbol] = this.orderedColumns.length - 1;
+    }
+
+    _positionHeaderViews()
+    {
+        let visibleHeaderViews = false;
+        for (let column of this.columns.values()) {
+            if (column["headerView"] && !column["hidden"]) {
+                visibleHeaderViews = true;
+                break;
+            }
+        }
+
+        if (!visibleHeaderViews)
+            return;
+
+        let left = 0;
+        for (let columnIdentifier of this.orderedColumns) {
+            let column = this.columns.get(columnIdentifier);
+            console.assert(column, "Missing column data for header cell with columnIdentifier " + columnIdentifier);
+            if (!column)
+                continue;
+
+            let columnWidth = this._headerTableCellElements.get(columnIdentifier).offsetWidth;
+            let headerView = column["headerView"];
+            if (headerView) {
+                headerView.element.style.left = left + "px";
+                headerView.element.style.width = columnWidth + "px";
+                headerView.updateLayout(WebInspector.View.LayoutReason.Resize);
+            }
+
+            left += columnWidth;
+        }
+    }
+
+    addPlaceholderNode()
+    {
+        if (this.placeholderNode)
+            this.placeholderNode.makeNormal();
+
+        var emptyData = {};
+        for (var identifier of this.columns.keys())
+            emptyData[identifier] = "";
+        this.placeholderNode = new WebInspector.PlaceholderDataGridNode(emptyData);
+        this.appendChild(this.placeholderNode);
+    }
+
+    appendChild(child)
+    {
+        this.insertChild(child, this.children.length);
+    }
+
+    insertChild(child, index)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        console.assert(child.parent !== this);
+        if (child.parent === this)
+            return;
+
+        if (child.parent)
+            child.parent.removeChild(child);
+
+        this.children.splice(index, 0, child);
+        this.hasChildren = true;
+
+        child.parent = this;
+        child.dataGrid = this.dataGrid;
+        child._recalculateSiblings(index);
+
+        delete child._depth;
+        delete child._revealed;
+        delete child._attached;
+        child._shouldRefreshChildren = true;
+
+        var current = child.children[0];
+        while (current) {
+            current.dataGrid = this.dataGrid;
+            delete current._depth;
+            delete current._revealed;
+            delete current._attached;
+            current._shouldRefreshChildren = true;
+            current = current.traverseNextNode(false, child, true);
+        }
+
+        if (this.expanded)
+            child._attach();
+    }
+
+    removeChild(child)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        console.assert(child.parent === this);
+        if (child.parent !== this)
+            return;
+
+        child.deselect();
+        child._detach();
+
+        this.children.remove(child, true);
+
+        if (child.previousSibling)
+            child.previousSibling.nextSibling = child.nextSibling;
+        if (child.nextSibling)
+            child.nextSibling.previousSibling = child.previousSibling;
+
+        child.dataGrid = null;
+        child.parent = null;
+        child.nextSibling = null;
+        child.previousSibling = null;
+
+        if (this.children.length <= 0)
+            this.hasChildren = false;
+
+        console.assert(!child.isPlaceholderNode, "Shouldn't delete the placeholder node.");
+    }
+
+    removeChildren()
+    {
+        for (var i = 0; i < this.children.length; ++i) {
+            var child = this.children[i];
+            child.deselect();
+            child._detach();
+
+            child.dataGrid = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+        }
+
+        this.children = [];
+        this.hasChildren = false;
+    }
+
+    removeChildrenRecursive()
+    {
+        var childrenToRemove = this.children;
+
+        var child = this.children[0];
+        while (child) {
+            if (child.children.length)
+                childrenToRemove = childrenToRemove.concat(child.children);
+            child = child.traverseNextNode(false, this, true);
+        }
+
+        for (var i = 0; i < childrenToRemove.length; ++i) {
+            child = childrenToRemove[i];
+            child.deselect();
+            child._detach();
+
+            child.children = [];
+            child.dataGrid = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+        }
+
+        this.children = [];
+    }
+
+    sortNodes(comparator)
+    {
+        if (this._sortNodesRequestId)
+            return;
+
+        this._sortNodesRequestId = window.requestAnimationFrame(this._sortNodesCallback.bind(this, comparator));
+    }
+
+    sortNodesImmediately(comparator)
+    {
+        this._sortNodesCallback(comparator);
+    }
+
+    _sortNodesCallback(comparator)
+    {
+        function comparatorWrapper(aRow, bRow)
+        {
+            var aNode = aRow._dataGridNode;
+            var bNode = bRow._dataGridNode;
+
+            if (aNode.isPlaceholderNode)
+                return 1;
+            if (bNode.isPlaceholderNode)
+                return -1;
+
+            var reverseFactor = this.sortOrder !== WebInspector.DataGrid.SortOrder.Ascending ? -1 : 1;
+            return reverseFactor * comparator(aNode, bNode);
+        }
+
+        this._sortNodesRequestId = undefined;
+
+        if (this._editing) {
+            this._sortAfterEditingCallback = this.sortNodes.bind(this, comparator);
+            return;
+        }
+
+        var tbody = this.dataTableBodyElement;
+        var childNodes = tbody.childNodes;
+        var fillerRowElement = tbody.lastChild;
+
+        var sortedRowElements = Array.prototype.slice.call(childNodes, 0, childNodes.length - 1);
+        sortedRowElements.sort(comparatorWrapper.bind(this));
+
+        tbody.removeChildren();
+
+        var previousSiblingNode = null;
+        for (var rowElement of sortedRowElements) {
+            var node = rowElement._dataGridNode;
+            node.previousSibling = previousSiblingNode;
+            if (previousSiblingNode)
+                previousSiblingNode.nextSibling = node;
+            tbody.appendChild(rowElement);
+            previousSiblingNode = node;
+        }
+
+        if (previousSiblingNode)
+            previousSiblingNode.nextSibling = null;
+
+        tbody.appendChild(fillerRowElement); // We expect to find a filler row when attaching nodes.
+    }
+
+    _toggledSortOrder()
+    {
+        return this._sortOrder !== WebInspector.DataGrid.SortOrder.Descending ? WebInspector.DataGrid.SortOrder.Descending : WebInspector.DataGrid.SortOrder.Ascending;
+    }
+
+    _selectSortColumnAndSetOrder(columnIdentifier, sortOrder)
+    {
+        this.sortColumnIdentifier = columnIdentifier;
+        this.sortOrder = sortOrder;
+    }
+
+    _keyDown(event)
+    {
+        if (!this.selectedNode || event.shiftKey || event.metaKey || event.ctrlKey || this._editing)
+            return;
+
+        var handled = false;
+        var nextSelectedNode;
+        if (event.keyIdentifier === "Up" && !event.altKey) {
+            nextSelectedNode = this.selectedNode.traversePreviousNode(true);
+            while (nextSelectedNode && !nextSelectedNode.selectable)
+                nextSelectedNode = nextSelectedNode.traversePreviousNode(true);
+            handled = nextSelectedNode ? true : false;
+        } else if (event.keyIdentifier === "Down" && !event.altKey) {
+            nextSelectedNode = this.selectedNode.traverseNextNode(true);
+            while (nextSelectedNode && !nextSelectedNode.selectable)
+                nextSelectedNode = nextSelectedNode.traverseNextNode(true);
+            handled = nextSelectedNode ? true : false;
+        } else if (event.keyIdentifier === "Left") {
+            if (this.selectedNode.expanded) {
+                if (event.altKey)
+                    this.selectedNode.collapseRecursively();
+                else
+                    this.selectedNode.collapse();
+                handled = true;
+            } else if (this.selectedNode.parent && !this.selectedNode.parent.root) {
+                handled = true;
+                if (this.selectedNode.parent.selectable) {
+                    nextSelectedNode = this.selectedNode.parent;
+                    handled = nextSelectedNode ? true : false;
+                } else if (this.selectedNode.parent)
+                    this.selectedNode.parent.collapse();
+            }
+        } else if (event.keyIdentifier === "Right") {
+            if (!this.selectedNode.revealed) {
+                this.selectedNode.reveal();
+                handled = true;
+            } else if (this.selectedNode.hasChildren) {
+                handled = true;
+                if (this.selectedNode.expanded) {
+                    nextSelectedNode = this.selectedNode.children[0];
+                    handled = nextSelectedNode ? true : false;
+                } else {
+                    if (event.altKey)
+                        this.selectedNode.expandRecursively();
+                    else
+                        this.selectedNode.expand();
+                }
+            }
+        } else if (event.keyCode === 8 || event.keyCode === 46) {
+            if (this._deleteCallback) {
+                handled = true;
+                this._deleteCallback(this.selectedNode);
+            }
+        } else if (isEnterKey(event)) {
+            if (this._editCallback) {
+                handled = true;
+                this._startEditing(this.selectedNode._element.children[0]);
+            }
+        }
+
+        if (nextSelectedNode) {
+            nextSelectedNode.reveal();
+            nextSelectedNode.select();
+        }
+
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    expand()
+    {
+        // This is the root, do nothing.
+    }
+
+    collapse()
+    {
+        // This is the root, do nothing.
+    }
+
+    reveal()
+    {
+        // This is the root, do nothing.
+    }
+
+    revealAndSelect()
+    {
+        // This is the root, do nothing.
+    }
+
+    dataGridNodeFromNode(target)
+    {
+        var rowElement = target.enclosingNodeOrSelfWithNodeName("tr");
+        return rowElement && rowElement._dataGridNode;
+    }
+
+    dataGridNodeFromPoint(x, y)
+    {
+        var node = this._dataTableElement.ownerDocument.elementFromPoint(x, y);
+        var rowElement = node.enclosingNodeOrSelfWithNodeName("tr");
+        return rowElement && rowElement._dataGridNode;
+    }
+
+    _headerCellClicked(event)
+    {
+        let cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.columnIdentifier || !cell.classList.contains(WebInspector.DataGrid.SortableColumnStyleClassName))
+            return;
+
+        let sortOrder = this._sortColumnIdentifier === cell.columnIdentifier ? this._toggledSortOrder() : this.sortOrder;
+        this._selectSortColumnAndSetOrder(cell.columnIdentifier, sortOrder);
+    }
+
+    _mouseoverColumnCollapser(event)
+    {
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.collapsesGroup)
+            return;
+
+        cell.classList.add("mouse-over-collapser");
+    }
+
+    _mouseoutColumnCollapser(event)
+    {
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.collapsesGroup)
+            return;
+
+        cell.classList.remove("mouse-over-collapser");
+    }
+
+    _clickInColumnCollapser(event)
+    {
+        var cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (!cell || !cell.collapsesGroup)
+            return;
+
+        this._collapseColumnGroupWithCell(cell);
+
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    collapseColumnGroup(columnGroup)
+    {
+        var collapserColumnIdentifier = null;
+        for (var [identifier, column] of this.columns) {
+            if (column["collapsesGroup"] === columnGroup) {
+                collapserColumnIdentifier = identifier;
+                break;
+            }
+        }
+
+        console.assert(collapserColumnIdentifier);
+        if (!collapserColumnIdentifier)
+            return;
+
+        var cell = this._headerTableCellElements.get(collapserColumnIdentifier);
+        this._collapseColumnGroupWithCell(cell);
+    }
+
+    _collapseColumnGroupWithCell(cell)
+    {
+        var columnsWillCollapse = cell.classList.toggle("collapsed");
+
+        this.willToggleColumnGroup(cell.collapsesGroup, columnsWillCollapse);
+
+        var showOrHide = columnsWillCollapse ? this._hideColumn : this._showColumn;
+        for (var [identifier, column] of this.columns) {
+            if (column["group"] === cell.collapsesGroup)
+                showOrHide.call(this, identifier);
+        }
+
+        var collapserButton = cell.querySelector(".collapser-button");
+        if (collapserButton)
+            collapserButton.title = columnsWillCollapse ? this._collapserButtonExpandColumnsToolTip() : this._collapserButtonCollapseColumnsToolTip();
+
+        this.didToggleColumnGroup(cell.collapsesGroup, columnsWillCollapse);
+    }
+
+    _collapserButtonCollapseColumnsToolTip()
+    {
+        return WebInspector.UIString("Collapse columns");
+    }
+
+    _collapserButtonExpandColumnsToolTip()
+    {
+        return WebInspector.UIString("Expand columns");
+    }
+
+    willToggleColumnGroup(columnGroup, willCollapse)
+    {
+        // Implemented by subclasses if needed.
+    }
+
+    didToggleColumnGroup(columnGroup, didCollapse)
+    {
+        // Implemented by subclasses if needed.
+    }
+
+    headerTableHeader(columnIdentifier)
+    {
+        return this._headerTableCellElements.get(columnIdentifier);
+    }
+
+    _mouseDownInDataTable(event)
+    {
+        var gridNode = this.dataGridNodeFromNode(event.target);
+        if (!gridNode || !gridNode.selectable)
+            return;
+
+        if (gridNode.isEventWithinDisclosureTriangle(event))
+            return;
+
+        if (event.metaKey) {
+            if (gridNode.selected)
+                gridNode.deselect();
+            else
+                gridNode.select();
+        } else
+            gridNode.select();
+    }
+
+    _contextMenuInHeader(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        if (this._hasCopyableData())
+            contextMenu.appendItem(WebInspector.UIString("Copy Table"), this._copyTable.bind(this));
+
+        let cell = event.target.enclosingNodeOrSelfWithNodeName("th");
+        if (cell && cell.columnIdentifier && cell.classList.contains(WebInspector.DataGrid.SortableColumnStyleClassName)) {
+            contextMenu.appendSeparator();
+
+            if (this.sortColumnIdentifier !== cell.columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Ascending) {
+                contextMenu.appendItem(WebInspector.UIString("Sort Ascending"), () => {
+                    this._selectSortColumnAndSetOrder(cell.columnIdentifier, WebInspector.DataGrid.SortOrder.Ascending);
+                });
+            }
+
+            if (this.sortColumnIdentifier !== cell.columnIdentifier || this.sortOrder !== WebInspector.DataGrid.SortOrder.Descending) {
+                contextMenu.appendItem(WebInspector.UIString("Sort Descending"), () => {
+                    this._selectSortColumnAndSetOrder(cell.columnIdentifier, WebInspector.DataGrid.SortOrder.Descending);
+                });
+            }
+        }
+    }
+
+    _contextMenuInDataTable(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        let gridNode = this.dataGridNodeFromNode(event.target);
+        if (this.dataGrid._refreshCallback && (!gridNode || gridNode !== this.placeholderNode))
+            contextMenu.appendItem(WebInspector.UIString("Refresh"), this._refreshCallback.bind(this));
+
+        if (gridNode && gridNode.selectable && gridNode.copyable && !gridNode.isEventWithinDisclosureTriangle(event)) {
+            contextMenu.appendItem(WebInspector.UIString("Copy Row"), this._copyRow.bind(this, event.target));
+            contextMenu.appendItem(WebInspector.UIString("Copy Table"), this._copyTable.bind(this));
+
+            if (this.dataGrid._editCallback) {
+                if (gridNode === this.placeholderNode)
+                    contextMenu.appendItem(WebInspector.UIString("Add New"), this._startEditing.bind(this, event.target));
+                else {
+                    let element = event.target.enclosingNodeOrSelfWithNodeName("td");
+                    let columnIdentifier = element.__columnIdentifier;
+                    let columnTitle = this.dataGrid.columns.get(columnIdentifier)["title"];
+                    contextMenu.appendItem(WebInspector.UIString("Edit “%s”").format(columnTitle), this._startEditing.bind(this, event.target));
+                }
+            }
+            if (this.dataGrid._deleteCallback && gridNode !== this.placeholderNode)
+                contextMenu.appendItem(WebInspector.UIString("Delete"), this._deleteCallback.bind(this, gridNode));
+        }
+    }
+
+    _clickInDataTable(event)
+    {
+        var gridNode = this.dataGridNodeFromNode(event.target);
+        if (!gridNode || !gridNode.hasChildren)
+            return;
+
+        if (!gridNode.isEventWithinDisclosureTriangle(event))
+            return;
+
+        if (gridNode.expanded) {
+            if (event.altKey)
+                gridNode.collapseRecursively();
+            else
+                gridNode.collapse();
+        } else {
+            if (event.altKey)
+                gridNode.expandRecursively();
+            else
+                gridNode.expand();
+        }
+    }
+
+    textForDataGridNodeColumn(node, columnIdentifier)
+    {
+        var data = node.data[columnIdentifier];
+        return (data instanceof Node ? data.textContent : data) || "";
+    }
+
+    _copyTextForDataGridNode(node)
+    {
+        let fields = node.dataGrid.orderedColumns.map((identifier) => this.textForDataGridNodeColumn(node, identifier));
+        return fields.join("\t");
+    }
+
+    _copyTextForDataGridHeaders()
+    {
+        let fields = this.orderedColumns.map((identifier) => this.headerTableHeader(identifier).textContent);
+        return fields.join("\t");
+    }
+
+    handleBeforeCopyEvent(event)
+    {
+        if (this.selectedNode && window.getSelection().isCollapsed)
+            event.preventDefault();
+    }
+
+    handleCopyEvent(event)
+    {
+        if (!this.selectedNode || !window.getSelection().isCollapsed)
+            return;
+
+        var copyText = this._copyTextForDataGridNode(this.selectedNode);
+        event.clipboardData.setData("text/plain", copyText);
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    _copyRow(target)
+    {
+        var gridNode = this.dataGridNodeFromNode(target);
+        if (!gridNode)
+            return;
+
+        var copyText = this._copyTextForDataGridNode(gridNode);
+        InspectorFrontendHost.copyText(copyText);
+    }
+
+    _copyTable()
+    {
+        let copyData = [];
+        copyData.push(this._copyTextForDataGridHeaders());
+        for (let gridNode of this.children) {
+            if (!gridNode.copyable)
+                continue;
+            copyData.push(this._copyTextForDataGridNode(gridNode));
+        }
+
+        InspectorFrontendHost.copyText(copyData.join("\n"));
+    }
+
+    _hasCopyableData()
+    {
+        let gridNode = this.children[0];
+        return gridNode && gridNode.selectable && gridNode.copyable;
+    }
+
+    get resizeMethod()
+    {
+        if (!this._resizeMethod)
+            return WebInspector.DataGrid.ResizeMethod.Nearest;
+        return this._resizeMethod;
+    }
+
+    set resizeMethod(method)
+    {
+        this._resizeMethod = method;
+    }
+
+    resizerDragStarted(resizer)
+    {
+        if (!resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol])
+            return true; // Abort the drag;
+
+        this._currentResizer = resizer;
+    }
+
+    resizerDragging(resizer, positionDelta)
+    {
+        console.assert(resizer === this._currentResizer, resizer, this._currentResizer);
+        if (resizer != this._currentResizer)
+            return;
+
+        // Constrain the dragpoint to be within the containing div of the
+        // datagrid.
+        var dragPoint = (resizer.initialPosition - positionDelta) - this.element.totalOffsetLeft;
+        // Constrain the dragpoint to be within the space made up by the
+        // column directly to the left and the column directly to the right.
+        var leftCellIndex = resizer[WebInspector.DataGrid.PreviousColumnOrdinalSymbol];
+        var rightCellIndex = resizer[WebInspector.DataGrid.NextColumnOrdinalSymbol];
+        var firstRowCells = this._headerTableBodyElement.rows[0].cells;
+        var leftEdgeOfPreviousColumn = 0;
+        for (var i = 0; i < leftCellIndex; i++)
+            leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth;
+
+        // Differences for other resize methods
+        if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.Last) {
+            rightCellIndex = this.resizers.length;
+        } else if (this.resizeMethod === WebInspector.DataGrid.ResizeMethod.First) {
+            leftEdgeOfPreviousColumn += firstRowCells[leftCellIndex].offsetWidth - firstRowCells[0].offsetWidth;
+            leftCellIndex = 0;
+        }
+
+        var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[leftCellIndex].offsetWidth + firstRowCells[rightCellIndex].offsetWidth;
+
+        // Give each column some padding so that they don't disappear.
+        var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding;
+        var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding;
+
+        dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum);
+
+        resizer.element.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment) + "px";
+
+        var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this._dataTableElement.offsetWidth) * 100) + "%";
+        this._headerTableColumnGroupElement.children[leftCellIndex].style.width = percentLeftColumn;
+        this._dataTableColumnGroupElement.children[leftCellIndex].style.width = percentLeftColumn;
+
+        var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._dataTableElement.offsetWidth) * 100) + "%";
+        this._headerTableColumnGroupElement.children[rightCellIndex].style.width =  percentRightColumn;
+        this._dataTableColumnGroupElement.children[rightCellIndex].style.width = percentRightColumn;
+
+        this._positionResizerElements();
+        this._positionHeaderViews();
+        event.preventDefault();
+    }
+
+    resizerDragEnded(resizer)
+    {
+        console.assert(resizer === this._currentResizer, resizer, this._currentResizer);
+        if (resizer != this._currentResizer)
+            return;
+
+        this._currentResizer = null;
+    }
+};
+
+WebInspector.DataGrid.Event = {
+    SortChanged: "datagrid-sort-changed",
+    SelectedNodeChanged: "datagrid-selected-node-changed",
+    ExpandedNode: "datagrid-expanded-node",
+    CollapsedNode: "datagrid-collapsed-node",
+    GoToArrowClicked: "datagrid-go-to-arrow-clicked"
+};
+
+WebInspector.DataGrid.ResizeMethod = {
+    Nearest: "nearest",
+    First: "first",
+    Last: "last"
+};
+
+WebInspector.DataGrid.SortOrder = {
+    Indeterminate: "data-grid-sort-order-indeterminate",
+    Ascending: "data-grid-sort-order-ascending",
+    Descending: "data-grid-sort-order-descending"
+};
+
+WebInspector.DataGrid.PreviousColumnOrdinalSymbol = Symbol("previous-column-ordinal");
+WebInspector.DataGrid.NextColumnOrdinalSymbol = Symbol("next-column-ordinal");
+
+WebInspector.DataGrid.ColumnResizePadding = 10;
+WebInspector.DataGrid.CenterResizerOverBorderAdjustment = 3;
+
+WebInspector.DataGrid.SortColumnAscendingStyleClassName = "sort-ascending";
+WebInspector.DataGrid.SortColumnDescendingStyleClassName = "sort-descending";
+WebInspector.DataGrid.SortableColumnStyleClassName = "sortable";
+
+WebInspector.DataGridNode = class DataGridNode extends WebInspector.Object
+{
+    constructor(data, hasChildren)
+    {
+        super();
+
+        this._expanded = false;
+        this._hidden = false;
+        this._selected = false;
+        this._copyable = true;
+        this._shouldRefreshChildren = true;
+        this._data = data || {};
+        this.hasChildren = hasChildren || false;
+        this.children = [];
+        this.dataGrid = null;
+        this.parent = null;
+        this.previousSibling = null;
+        this.nextSibling = null;
+        this.disclosureToggleWidth = 10;
+    }
+
+    get hidden()
+    {
+        return this._hidden;
+    }
+
+    set hidden(x)
+    {
+        x = !!x;
+
+        if (this._hidden === x)
+            return;
+
+        this._hidden = x;
+        if (this._element)
+            this._element.classList.toggle("hidden", this._hidden);
+    }
+
+    get selectable()
+    {
+        return this._element && !this._hidden;
+    }
+
+    get copyable()
+    {
+        return this._copyable;
+    }
+
+    set copyable(x)
+    {
+        this._copyable = x;
+    }
+
+    get element()
+    {
+        if (this._element)
+            return this._element;
+
+        if (!this.dataGrid)
+            return null;
+
+        this._element = document.createElement("tr");
+        this._element._dataGridNode = this;
+
+        if (this.hasChildren)
+            this._element.classList.add("parent");
+        if (this.expanded)
+            this._element.classList.add("expanded");
+        if (this.selected)
+            this._element.classList.add("selected");
+        if (this.revealed)
+            this._element.classList.add("revealed");
+        if (this._hidden)
+            this._element.classList.add("hidden");
+
+        this.createCells();
+        return this._element;
+    }
+
+    createCells()
+    {
+        for (var columnIdentifier of this.dataGrid.orderedColumns)
+            this._element.appendChild(this.createCell(columnIdentifier));
+    }
+
+    createGoToArrowButton(cellElement)
+    {
+        function buttonClicked(event)
+        {
+            if (this.hidden || !this.revealed)
+                return;
+
+            event.stopPropagation();
+
+            let columnIdentifier = cellElement.__columnIdentifier;
+            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.GoToArrowClicked, {dataGridNode: this, columnIdentifier});
+        }
+
+        let button = WebInspector.createGoToArrowButton();
+        button.addEventListener("click", buttonClicked.bind(this));
+
+        let contentElement = cellElement.firstChild;
+        contentElement.appendChild(button);
+    }
+
+    refreshIfNeeded()
+    {
+        if (!this._needsRefresh)
+            return;
+
+        this._needsRefresh = false;
+
+        this.refresh();
+    }
+
+    needsRefresh()
+    {
+        this._needsRefresh = true;
+
+        if (!this._revealed)
+            return;
+
+        if (this._scheduledRefreshIdentifier)
+            return;
+
+        this._scheduledRefreshIdentifier = requestAnimationFrame(this.refresh.bind(this));
+    }
+
+    get data()
+    {
+        return this._data;
+    }
+
+    set data(x)
+    {
+        console.assert(typeof x === "object", "Data should be an object.");
+
+        x = x || {};
+
+        if (Object.shallowEqual(this._data, x))
+            return;
+
+        this._data = x;
+        this.needsRefresh();
+    }
+
+    get revealed()
+    {
+        if ("_revealed" in this)
+            return this._revealed;
+
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (!currentAncestor.expanded) {
+                this._revealed = false;
+                return false;
+            }
+
+            currentAncestor = currentAncestor.parent;
+        }
+
+        this._revealed = true;
+        return true;
+    }
+
+    set hasChildren(x)
+    {
+        if (this._hasChildren === x)
+            return;
+
+        this._hasChildren = x;
+
+        if (!this._element)
+            return;
+
+        if (this._hasChildren)
+        {
+            this._element.classList.add("parent");
+            if (this.expanded)
+                this._element.classList.add("expanded");
+        }
+        else
+        {
+            this._element.classList.remove("parent", "expanded");
+        }
+    }
+
+    get hasChildren()
+    {
+        return this._hasChildren;
+    }
+
+    set revealed(x)
+    {
+        if (this._revealed === x)
+            return;
+
+        this._revealed = x;
+
+        if (this._element) {
+            if (this._revealed)
+                this._element.classList.add("revealed");
+            else
+                this._element.classList.remove("revealed");
+        }
+
+        this.refreshIfNeeded();
+
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i].revealed = x && this.expanded;
+    }
+
+    get depth()
+    {
+        if ("_depth" in this)
+            return this._depth;
+        if (this.parent && !this.parent.root)
+            this._depth = this.parent.depth + 1;
+        else
+            this._depth = 0;
+        return this._depth;
+    }
+
+    get leftPadding()
+    {
+        if (typeof(this._leftPadding) === "number")
+            return this._leftPadding;
+
+        this._leftPadding = this.depth * this.dataGrid.indentWidth;
+        return this._leftPadding;
+    }
+
+    get shouldRefreshChildren()
+    {
+        return this._shouldRefreshChildren;
+    }
+
+    set shouldRefreshChildren(x)
+    {
+        this._shouldRefreshChildren = x;
+        if (x && this.expanded)
+            this.expand();
+    }
+
+    get selected()
+    {
+        return this._selected;
+    }
+
+    set selected(x)
+    {
+        if (x)
+            this.select();
+        else
+            this.deselect();
+    }
+
+    get expanded()
+    {
+        return this._expanded;
+    }
+
+    set expanded(x)
+    {
+        if (x)
+            this.expand();
+        else
+            this.collapse();
+    }
+
+    refresh()
+    {
+        if (!this._element || !this.dataGrid)
+            return;
+
+        if (this._scheduledRefreshIdentifier) {
+            cancelAnimationFrame(this._scheduledRefreshIdentifier);
+            this._scheduledRefreshIdentifier = undefined;
+        }
+
+        this._needsRefresh = false;
+
+        this._element.removeChildren();
+        this.createCells();
+    }
+
+    updateLayout()
+    {
+        // Implemented by subclasses if needed.
+    }
+
+    createCell(columnIdentifier)
+    {
+        var cellElement = document.createElement("td");
+        cellElement.className = columnIdentifier + "-column";
+        cellElement.__columnIdentifier = columnIdentifier;
+
+        var column = this.dataGrid.columns.get(columnIdentifier);
+
+        if (column["aligned"])
+            cellElement.classList.add(column["aligned"]);
+
+        if (column["group"])
+            cellElement.classList.add("column-group-" + column["group"]);
+
+        var div = cellElement.createChild("div");
+        var content = this.createCellContent(columnIdentifier, cellElement);
+        div.append(content);
+
+        if (column["icon"]) {
+            let iconElement = document.createElement("div");
+            iconElement.classList.add("icon");
+            div.insertBefore(iconElement, div.firstChild);
+        }
+
+        if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) {
+            cellElement.classList.add("disclosure");
+            if (this.leftPadding)
+                cellElement.style.setProperty("padding-left", this.leftPadding + "px");
+        }
+
+        return cellElement;
+    }
+
+    createCellContent(columnIdentifier)
+    {
+        return this.data[columnIdentifier] || "\u200b"; // Zero width space to keep the cell from collapsing.
+    }
+
+    elementWithColumnIdentifier(columnIdentifier)
+    {
+        var index = this.dataGrid.orderedColumns.indexOf(columnIdentifier);
+        if (index === -1)
+            return null;
+
+        return this._element.children[index];
+    }
+
+    // Share these functions with DataGrid. They are written to work with a DataGridNode this object.
+    appendChild() { return WebInspector.DataGrid.prototype.appendChild.apply(this, arguments); }
+    insertChild() { return WebInspector.DataGrid.prototype.insertChild.apply(this, arguments); }
+    removeChild() { return WebInspector.DataGrid.prototype.removeChild.apply(this, arguments); }
+    removeChildren() { return WebInspector.DataGrid.prototype.removeChildren.apply(this, arguments); }
+    removeChildrenRecursive() { return WebInspector.DataGrid.prototype.removeChildrenRecursive.apply(this, arguments); }
+
+    _recalculateSiblings(myIndex)
+    {
+        if (!this.parent)
+            return;
+
+        var previousChild = (myIndex > 0 ? this.parent.children[myIndex - 1] : null);
+
+        if (previousChild) {
+            previousChild.nextSibling = this;
+            this.previousSibling = previousChild;
+        } else
+            this.previousSibling = null;
+
+        var nextChild = this.parent.children[myIndex + 1];
+
+        if (nextChild) {
+            nextChild.previousSibling = this;
+            this.nextSibling = nextChild;
+        } else
+            this.nextSibling = null;
+    }
+
+    collapse()
+    {
+        if (this._element)
+            this._element.classList.remove("expanded");
+
+        this._expanded = false;
+
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i].revealed = false;
+
+        this.dispatchEventToListeners("collapsed");
+
+        if (this.dataGrid)
+            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.CollapsedNode, {dataGridNode: this});
+    }
+
+    collapseRecursively()
+    {
+        var item = this;
+        while (item) {
+            if (item.expanded)
+                item.collapse();
+            item = item.traverseNextNode(false, this, true);
+        }
+    }
+
+    expand()
+    {
+        if (!this.hasChildren || this.expanded)
+            return;
+
+        if (this.revealed && !this._shouldRefreshChildren)
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i].revealed = true;
+
+        if (this._shouldRefreshChildren) {
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i]._detach();
+
+            this.dispatchEventToListeners("populate");
+
+            if (this._attached) {
+                for (var i = 0; i < this.children.length; ++i) {
+                    var child = this.children[i];
+                    if (this.revealed)
+                        child.revealed = true;
+                    child._attach();
+                }
+            }
+
+            this._shouldRefreshChildren = false;
+        }
+
+        if (this._element)
+            this._element.classList.add("expanded");
+
+        this._expanded = true;
+
+        this.dispatchEventToListeners("expanded");
+
+        if (this.dataGrid)
+            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.ExpandedNode, {dataGridNode: this});
+    }
+
+    expandRecursively()
+    {
+        var item = this;
+        while (item) {
+            item.expand();
+            item = item.traverseNextNode(false, this);
+        }
+    }
+
+    reveal()
+    {
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (!currentAncestor.expanded)
+                currentAncestor.expand();
+            currentAncestor = currentAncestor.parent;
+        }
+
+        this.element.scrollIntoViewIfNeeded(false);
+
+        this.dispatchEventToListeners("revealed");
+    }
+
+    select(suppressSelectedEvent)
+    {
+        if (!this.dataGrid || !this.selectable || this.selected)
+            return;
+
+        if (this.dataGrid.selectedNode)
+            this.dataGrid.selectedNode.deselect(true);
+
+        this._selected = true;
+        this.dataGrid.selectedNode = this;
+
+        if (this._element)
+            this._element.classList.add("selected");
+
+        if (!suppressSelectedEvent)
+            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.SelectedNodeChanged);
+    }
+
+    revealAndSelect()
+    {
+        this.reveal();
+        this.select();
+    }
+
+    deselect(suppressDeselectedEvent)
+    {
+        if (!this.dataGrid || this.dataGrid.selectedNode !== this || !this.selected)
+            return;
+
+        this._selected = false;
+        this.dataGrid.selectedNode = null;
+
+        if (this._element)
+            this._element.classList.remove("selected");
+
+        if (!suppressDeselectedEvent)
+            this.dataGrid.dispatchEventToListeners(WebInspector.DataGrid.Event.SelectedNodeChanged);
+    }
+
+    traverseNextNode(skipHidden, stayWithin, dontPopulate, info)
+    {
+        if (!dontPopulate && this.hasChildren)
+            this.dispatchEventToListeners("populate");
+
+        if (info)
+            info.depthChange = 0;
+
+        var node = (!skipHidden || this.revealed) ? this.children[0] : null;
+        if (node && (!skipHidden || this.expanded)) {
+            if (info)
+                info.depthChange = 1;
+            return node;
+        }
+
+        if (this === stayWithin)
+            return null;
+
+        node = (!skipHidden || this.revealed) ? this.nextSibling : null;
+        if (node)
+            return node;
+
+        node = this;
+        while (node && !node.root && !((!skipHidden || node.revealed) ? node.nextSibling : null) && node.parent !== stayWithin) {
+            if (info)
+                info.depthChange -= 1;
+            node = node.parent;
+        }
+
+        if (!node)
+            return null;
+
+        return (!skipHidden || node.revealed) ? node.nextSibling : null;
+    }
+
+    traversePreviousNode(skipHidden, dontPopulate)
+    {
+        var node = (!skipHidden || this.revealed) ? this.previousSibling : null;
+        if (!dontPopulate && node && node.hasChildren)
+            node.dispatchEventToListeners("populate");
+
+        while (node && ((!skipHidden || (node.revealed && node.expanded)) ? node.children.lastValue : null)) {
+            if (!dontPopulate && node.hasChildren)
+                node.dispatchEventToListeners("populate");
+            node = ((!skipHidden || (node.revealed && node.expanded)) ? node.children.lastValue : null);
+        }
+
+        if (node)
+            return node;
+
+        if (!this.parent || this.parent.root)
+            return null;
+
+        return this.parent;
+    }
+
+    isEventWithinDisclosureTriangle(event)
+    {
+        if (!this.hasChildren)
+            return false;
+        let cell = event.target.enclosingNodeOrSelfWithNodeName("td");
+        if (!cell.classList.contains("disclosure"))
+            return false;
+
+        let computedLeftPadding = window.getComputedStyle(cell).getPropertyCSSValue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX);
+        let left = cell.totalOffsetLeft + computedLeftPadding;
+        return event.pageX >= left && event.pageX <= left + this.disclosureToggleWidth;
+    }
+
+    _attach()
+    {
+        if (!this.dataGrid || this._attached)
+            return;
+
+        this._attached = true;
+
+        var nextElement = null;
+
+        if (!this.isPlaceholderNode) {
+            var previousGridNode = this.traversePreviousNode(true, true);
+            if (previousGridNode && previousGridNode.element.parentNode)
+                nextElement = previousGridNode.element.nextSibling;
+            else if (!previousGridNode)
+                nextElement = this.dataGrid.dataTableBodyElement.firstChild;
+        }
+
+        // If there is no next grid node, then append before the last child since the last child is the filler row.
+        console.assert(this.dataGrid.dataTableBodyElement.lastChild.classList.contains("filler"));
+
+        if (!nextElement)
+            nextElement = this.dataGrid.dataTableBodyElement.lastChild;
+
+        this.dataGrid.dataTableBodyElement.insertBefore(this.element, nextElement);
+
+        if (this.expanded)
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i]._attach();
+    }
+
+    _detach()
+    {
+        if (!this._attached)
+            return;
+
+        this._attached = false;
+
+        if (this._element && this._element.parentNode)
+            this._element.parentNode.removeChild(this._element);
+
+        for (var i = 0; i < this.children.length; ++i)
+            this.children[i]._detach();
+    }
+
+    savePosition()
+    {
+        if (this._savedPosition)
+            return;
+
+        console.assert(this.parent);
+        if (!this.parent)
+            return;
+
+        this._savedPosition = {
+            parent: this.parent,
+            index: this.parent.children.indexOf(this)
+        };
+    }
+
+    restorePosition()
+    {
+        if (!this._savedPosition)
+            return;
+
+        if (this.parent !== this._savedPosition.parent)
+            this._savedPosition.parent.insertChild(this, this._savedPosition.index);
+
+        this._savedPosition = null;
+    }
+};
+
+// Used to create a new table row when entering new data by editing cells.
+WebInspector.PlaceholderDataGridNode = class PlaceholderDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(data)
+    {
+        super(data, false);
+        this.isPlaceholderNode = true;
+    }
+
+    makeNormal()
+    {
+        this.isPlaceholderNode = false;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css b/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css
new file mode 100644
index 000000000..0d049d563
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.css
@@ -0,0 +1,115 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.storage-view {    
+    font-family: Menlo, monospace;
+
+    outline: none;
+}
+
+.storage-view .data-grid {
+    height: 100%;
+}
+
+.storage-view .storage-table-error {
+    color: hsl(0, 33%, 49%);
+}
+
+.storage-view.query {
+    padding: 2px 0;
+    overflow-y: overlay;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: auto;
+}
+
+.storage-view > .console-prompt {
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    padding: 4px 0;
+}
+
+.storage-view > .console-prompt::before {
+    position: relative;
+    z-index: 1;
+
+    top: 2px;
+    left: 4px;
+
+    width: 10px;
+    height: 10px;
+
+    content: url(../Images/UserInputPrompt.svg);
+}
+
+:matches(.database-user-query, .database-query-result)::before {
+    position: absolute;
+    display: block;
+    z-index: 1;
+    content: "";
+    left: 4px;
+    top: 10px;
+    width: 10px;
+    height: 10px;
+    margin-top: -5px;
+    -webkit-user-select: none;
+}
+
+.database-user-query {
+    position: relative;
+    border-bottom: 1px solid hsl(0, 0%, 96%);
+    padding: 4px 22px 4px 18px;
+    min-height: 16px;
+}
+
+.database-user-query::before {
+    background-image: url(../Images/UserInputPromptPrevious.svg);
+}
+
+.database-query-text {
+    color: hsl(209, 100%, 50%);
+    -webkit-user-select: text;
+}
+
+.database-query-result {
+    position: relative;
+    padding: 4px 0 1px 18px;
+    min-height: 16px;
+    margin-left: -18px;
+}
+
+.database-query-result.error {
+    color: red;
+    -webkit-user-select: text;
+}
+
+.database-query-result.no-results {
+    -webkit-user-select: text;
+}
+
+.database-query-result.error::before {
+    background-image: url(../Images/Error.svg);
+    background-size: 10px 10px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js
new file mode 100644
index 000000000..c54511554
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseContentView.js
@@ -0,0 +1,127 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseContentView = class DatabaseContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        super(representedObject);
+
+        this.database = representedObject;
+
+        this.element.classList.add("storage-view", "query", "monospace");
+
+        this._prompt = new WebInspector.ConsolePrompt(this, "text/x-sql");
+        this.addSubview(this._prompt);
+
+        this.element.addEventListener("click", this._messagesClicked.bind(this), true);
+    }
+
+    // Public
+
+    shown()
+    {
+        // FIXME: remove once <https://webkit.org/b/150741> is fixed.
+        this._prompt.shown();
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.Database;
+        cookie.host = this.representedObject.host;
+        cookie.name = this.representedObject.name;
+    }
+
+    consolePromptCompletionsNeeded(prompt, defaultCompletions, base, prefix, suffix)
+    {
+        let results = [];
+
+        prefix = prefix.toLowerCase();
+
+        function accumulateMatches(textArray)
+        {
+            for (let text of textArray) {
+                if (text.toLowerCase().startsWith(prefix))
+                    results.push(text);
+            }
+        }
+
+        function tableNamesCallback(tableNames)
+        {
+            accumulateMatches(tableNames);
+            accumulateMatches(["SELECT", "FROM", "WHERE", "LIMIT", "DELETE FROM", "CREATE", "DROP", "TABLE", "INDEX", "UPDATE", "INSERT INTO", "VALUES"]);
+
+            this._prompt.updateCompletions(results, " ");
+        }
+
+        this.database.getTableNames(tableNamesCallback.bind(this));
+    }
+
+    consolePromptTextCommitted(prompt, query)
+    {
+        this.database.executeSQL(query, this._queryFinished.bind(this, query), this._queryError.bind(this, query));
+    }
+
+    // Private
+
+    _messagesClicked()
+    {
+        this._prompt.focus();
+    }
+
+    _queryFinished(query, columnNames, values)
+    {
+        let trimmedQuery = query.trim();
+        let queryView = new WebInspector.DatabaseUserQuerySuccessView(trimmedQuery, columnNames, values);
+        this.insertSubviewBefore(queryView, this._prompt);
+
+        if (queryView.dataGrid)
+            queryView.dataGrid.autoSizeColumns(5);
+
+        this._prompt.element.scrollIntoView(false);
+
+        if (trimmedQuery.match(/^create /i) || trimmedQuery.match(/^drop table /i))
+            this.dispatchEventToListeners(WebInspector.DatabaseContentView.Event.SchemaUpdated, this.database);
+    }
+
+    _queryError(query, error)
+    {
+        let message;
+        if (error.message)
+            message = error.message;
+        else if (error.code === 2)
+            message = WebInspector.UIString("Database no longer has expected version.");
+        else
+            message = WebInspector.UIString("An unexpected error %s occurred.").format(error.code);
+
+        let queryView = new WebInspector.DatabaseUserQueryErrorView(query, message);
+        this.insertSubviewBefore(queryView, this._prompt);
+        this._prompt.element.scrollIntoView(false);
+    }
+};
+
+WebInspector.DatabaseContentView.Event = {
+    SchemaUpdated: "SchemaUpdated"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js
new file mode 100644
index 000000000..85bc70dbc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseHostTreeElement.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseHostTreeElement = class DatabaseHostTreeElement extends WebInspector.StorageTreeElement
+{
+    constructor(host)
+    {
+        super(WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
+
+        this._host = host;
+
+        this.hasChildren = true;
+    }
+
+    // Public
+
+    get name()
+    {
+        return WebInspector.displayNameForHost(this._host);
+    }
+
+    get categoryName()
+    {
+        return WebInspector.UIString("Databases");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseIcon.css b/Source/WebInspectorUI/UserInterface/Views/DatabaseIcon.css
new file mode 100644
index 000000000..4584b069d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.database-icon .icon {
+    content: -webkit-image-set(url(../Images/Database.png) 1x, url(../Images/Database@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseTableContentView.css b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableContentView.css
new file mode 100644
index 000000000..91293f01f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableContentView.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.database-table > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseTableContentView.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableContentView.js
new file mode 100644
index 000000000..e3461c916
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableContentView.js
@@ -0,0 +1,120 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTableContentView = class DatabaseTableContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        super(representedObject);
+
+        this.element.classList.add("database-table");
+
+        this._refreshButtonNavigationItem = new WebInspector.ButtonNavigationItem("database-table-refresh", WebInspector.UIString("Refresh"), "Images/ReloadFull.svg", 13, 13);
+        this._refreshButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._refreshButtonClicked, this);
+        this._messageTextViewElement = null;
+
+        this.update();
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._refreshButtonNavigationItem];
+    }
+
+    update()
+    {
+        this.representedObject.database.executeSQL("SELECT * FROM \"" + this._escapeTableName(this.representedObject.name) + "\"", this._queryFinished.bind(this), this._queryError.bind(this));
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.DatabaseTable;
+        cookie.host = this.representedObject.host;
+        cookie.name = this.representedObject.name;
+        cookie.database = this.representedObject.database.name;
+    }
+
+    get scrollableElements()
+    {
+        if (!this._dataGrid)
+            return [];
+        return [this._dataGrid.scrollContainer];
+    }
+
+    // Private
+
+    _escapeTableName(name)
+    {
+        return name.replace(/\"/g, "\"\"");
+    }
+
+    _queryFinished(columnNames, values)
+    {
+        // It would be nice to do better than creating a new data grid each time the table is updated, but the table updating
+        // doesn't happen very frequently. Additionally, using DataGrid's createSortableDataGrid makes our code much cleaner and it knows
+        // how to sort arbitrary columns.
+        if (this._dataGrid) {
+            this.removeSubview(this._dataGrid);
+            this._dataGrid = null;
+        }
+
+        if (this._messageTextViewElement)
+            this._messageTextViewElement.remove();
+
+        if (columnNames.length) {
+            this._dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
+
+            this.addSubview(this._dataGrid);
+            this._dataGrid.updateLayout();
+            return;
+        }
+
+        // We were returned a table with no columns. This can happen when a table has
+        // no data, the SELECT query only returns column names when there is data.
+        this._messageTextViewElement = WebInspector.createMessageTextView(WebInspector.UIString("The “%s”\ntable is empty.").format(this.representedObject.name), false);
+        this.element.appendChild(this._messageTextViewElement);
+    }
+
+    _queryError(error)
+    {
+        if (this._dataGrid) {
+            this.removeSubview(this._dataGrid);
+            this._dataGrid = null;
+        }
+
+        if (this._messageTextViewElement)
+            this._messageTextViewElement.remove();
+
+        this._messageTextViewElement = WebInspector.createMessageTextView(WebInspector.UIString("An error occurred trying to read the “%s” table.").format(this.representedObject.name), true);
+        this.element.appendChild(this._messageTextViewElement);
+    }
+
+    _refreshButtonClicked()
+    {
+        this.update();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseTableIcon.css b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableIcon.css
new file mode 100644
index 000000000..26d5aad3b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.database-table-icon .icon {
+    content: -webkit-image-set(url(../Images/DatabaseTable.png) 1x, url(../Images/DatabaseTable@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js
new file mode 100644
index 000000000..1b976bd06
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseTableTreeElement.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTableTreeElement = class DatabaseTableTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DatabaseTableObject);
+
+        super("database-table-icon", representedObject.name, null, representedObject, false);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js
new file mode 100644
index 000000000..8de7095a9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseTreeElement.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseTreeElement = class DatabaseTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DatabaseObject);
+
+        super("database-icon", representedObject.name, null, representedObject, true);
+
+        this.hasChildren = false;
+
+        // Since we are initially telling the tree element we don't have any children, make sure that we try to populate
+        // the tree element (which will get a list of tables) when the element is created.
+        this.onpopulate();
+    }
+
+    // Overrides from TreeElement (Private)
+
+    oncollapse()
+    {
+        this.shouldRefreshChildren = true;
+    }
+
+    onpopulate()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+
+        function tableNamesCallback(tableNames)
+        {
+            for (var i = 0; i < tableNames.length; ++i) {
+                var databaseTable = new WebInspector.DatabaseTableObject(tableNames[i], this.representedObject);
+                this.appendChild(new WebInspector.DatabaseTableTreeElement(databaseTable));
+            }
+
+            this.hasChildren = tableNames.length;
+        }
+
+        this.representedObject.getTableNames(tableNamesCallback.bind(this));
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryErrorView.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryErrorView.js
new file mode 100644
index 000000000..c7a505d9d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryErrorView.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseUserQueryErrorView = class DatabaseUserQueryErrorView extends WebInspector.DatabaseUserQueryViewBase
+{
+    constructor(query, message)
+    {
+        super(query);
+
+        this.resultElement.classList.add("error");
+        this.resultElement.textContent = message;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.js
new file mode 100644
index 000000000..f2db6c4a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQuerySuccessView.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseUserQuerySuccessView = class DatabaseUserQuerySuccessView extends WebInspector.DatabaseUserQueryViewBase
+{
+    constructor(query, columnNames, values)
+    {
+        super(query);
+
+        this._dataGrid = WebInspector.DataGrid.createSortableDataGrid(columnNames, values);
+        if (this._dataGrid) {
+            this._dataGrid.element.classList.add("inline");
+            this.resultElement.appendChild(this._dataGrid.element);
+        } else {
+            this.resultElement.classList.add("no-results");
+            this.resultElement.textContent = WebInspector.UIString("Query returned no results.");
+        }
+    }
+
+    // Public
+
+    get dataGrid()
+    {
+        return this._dataGrid;
+    }
+
+    // Protected
+
+    layout()
+    {
+        // FIXME: remove once <https://webkit.org/b/150982> is fixed.
+        if (this._dataGrid)
+            this._dataGrid.updateLayout();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryViewBase.js b/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryViewBase.js
new file mode 100644
index 000000000..25deb3399
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DatabaseUserQueryViewBase.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DatabaseUserQueryViewBase = class DatabaseUserQueryViewBase extends WebInspector.View
+{
+    constructor(query)
+    {
+        super();
+
+        this.element.className = "database-user-query";
+
+        let commandTextElement = document.createElement("span");
+        commandTextElement.className = "database-query-text";
+        commandTextElement.textContent = query;
+        this.element.appendChild(commandTextElement);
+
+        this._resultElement = document.createElement("div");
+        this._resultElement.className = "database-query-result";
+        this.element.appendChild(this._resultElement);
+    }
+
+    // Protected
+
+    get resultElement()
+    {
+        // FIXME: remove once <https://webkit.org/b/150982> is fixed.
+        return this._resultElement;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
new file mode 100644
index 000000000..6b7e2c1d5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
@@ -0,0 +1,154 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+.toolbar .dashboard.debugger {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    text-align: center;
+    text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
+    color: hsl(0, 0%, 23%);
+    padding: 0 12px 0 5px;
+}
+
+.dashboard.debugger > .message {
+    font-weight: bold;
+}
+
+.dashboard.debugger .navigation-bar {
+    border: 0;
+    margin-right: 4px;
+}
+
+.toolbar:not(.small-size) .dashboard.debugger .navigation-bar {
+    margin-top: 1px;
+}
+
+.dashboard.debugger .navigation-bar .item.button {
+    flex-direction: row;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    padding: 0;
+    border: none !important;
+    background-image: none !important;
+    box-shadow: none !important;
+}
+
+.dashboard.debugger .navigation-bar .item.button > .glyph {
+    width: 16px;
+    height: 16px;
+    animation-name: pulse-pause-button;
+    animation-duration: 1s;
+    animation-timing-function: ease-out;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    color: hsl(207, 46%, 59%);
+}
+
+body.window-inactive .dashboard.debugger .navigation-bar .item.button > .glyph {
+    animation-name: none;
+}
+
+@keyframes pulse-pause-button {
+    from { opacity: 0.7; transform: scale(1); }
+    to { opacity: 1; transform: scale(1.1); }
+}
+
+.dashboard.debugger > .divider {
+    width: 1px;
+    height: 100%;
+
+    margin: 0 10px;
+
+    background-image: linear-gradient(hsl(0, 0%, 74%), hsl(0, 0%, 74%));
+    background-size: 100% 66%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.dashboard.debugger > div {
+    display: flex;
+    align-items: center;
+    flex: none;
+}
+
+.dashboard.debugger > .location {
+    overflow: hidden;
+    flex: initial;
+}
+
+.dashboard.debugger > .location > * {
+    flex: none;
+}
+
+.dashboard.debugger > .location > :first-child {
+    align-self: center;
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+}
+
+.toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child) {
+    margin-top: 1px;
+}
+
+.dashboard.debugger > .location img.icon {
+    width: 16px;
+    height: 16px;
+}
+
+.dashboard.debugger > .location .function-name {
+    color: hsl(0, 0%, 11%);
+    padding-bottom: 1px;
+}
+
+.dashboard.debugger > .location .function-name::after {
+    content: '\00A0\2014\00A0'; /* &nbsp;&mdash;&nbsp; */
+}
+
+.dashboard.debugger > .location .go-to-link {
+    padding-bottom: 1px;
+    -webkit-text-decoration-color: hsl(0, 0%, 66%);
+    
+    flex: initial;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.toolbar.collapsed .dashboard.debugger > :not(.message, .navigation-bar) {
+    display: none;
+}
+
+.toolbar.small-size .dashboard.debugger > .message {
+    font-size: 10px;
+}
+
+.toolbar.small-size .dashboard.debugger > .location img.icon,
+.toolbar.small-size .dashboard.debugger > .location > :first-child {
+    width: 14px;
+    height: 14px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js
new file mode 100644
index 000000000..90b9b52df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js
@@ -0,0 +1,104 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerDashboardView = class DebuggerDashboardView extends WebInspector.DashboardView
+{
+    constructor(representedObject)
+    {
+        super(representedObject, "debugger");
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._rebuildLocation, this);
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.element.appendChild(this._navigationBar.element);
+
+        var tooltip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.pauseOrResumeKeyboardShortcut.displayName, WebInspector.pauseOrResumeAlternateKeyboardShortcut.displayName);
+        this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, "Images/Resume.svg", 15, 15);
+        this._debuggerResumeButtonItem.activated = true;
+        this._debuggerResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._resumeButtonClicked, this);
+        this._navigationBar.addNavigationItem(this._debuggerResumeButtonItem);
+
+        var message = this._messageElement = document.createElement("div");
+        message.classList.add("message");
+        message.title = message.textContent = WebInspector.UIString("Debugger Paused");
+        this.element.appendChild(message);
+
+        var dividerElement = document.createElement("div");
+        dividerElement.classList.add("divider");
+        this.element.appendChild(dividerElement);
+
+        var locationElement = this._locationElement = document.createElement("div");
+        locationElement.classList.add("location");
+        this.element.appendChild(locationElement);
+
+        this._rebuildLocation();
+    }
+
+    // Private
+
+    _rebuildLocation()
+    {
+        if (!WebInspector.debuggerManager.activeCallFrame)
+            return;
+
+        this._locationElement.removeChildren();
+
+        var callFrame = WebInspector.debuggerManager.activeCallFrame;
+        var functionName = callFrame.functionName || WebInspector.UIString("(anonymous function)");
+
+        var iconClassName = WebInspector.DebuggerDashboardView.FunctionIconStyleClassName;
+
+        // This is more than likely an event listener function with an "on" prefix and it is
+        // as long or longer than the shortest event listener name -- "oncut".
+        if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
+            iconClassName = WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName;
+
+        var iconElement = document.createElement("div");
+        iconElement.classList.add(iconClassName);
+        this._locationElement.appendChild(iconElement);
+
+        var iconImageElement = document.createElement("img");
+        iconImageElement.className = "icon";
+        iconElement.appendChild(iconImageElement);
+
+        var nameElement = document.createElement("div");
+        nameElement.append(functionName);
+        nameElement.classList.add("function-name");
+        this._locationElement.appendChild(nameElement);
+
+        var sourceCodeLocation = WebInspector.debuggerManager.activeCallFrame.sourceCodeLocation;
+        var shouldPreventLinkFloat = true;
+        var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, shouldPreventLinkFloat);
+        this._locationElement.appendChild(linkElement);
+    }
+
+    _resumeButtonClicked()
+    {
+        WebInspector.debuggerManager.resume();
+    }
+};
+
+WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameView.FunctionIconStyleClassName;
+WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameView.EventListenerIconStyleClassName;
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
new file mode 100644
index 000000000..1b2c081cf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.css
@@ -0,0 +1,77 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+
+.sidebar > .panel.navigation.debugger > :matches(.content, .empty-content-placeholder) {
+    top: 29px;
+}
+
+.sidebar > .panel.navigation.debugger > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.navigation.debugger .details-section {
+    font-size: 11px;
+}
+
+.sidebar > .panel.navigation.debugger .details-section > .content {
+    display: block;
+}
+
+.sidebar > .panel.navigation.debugger .details-section.collapsed > .content {
+    display: none;
+}
+
+
+.sidebar > .panel.navigation.debugger .details-section > .content > .group {
+    display: block;
+}
+
+.sidebar > .panel.navigation.debugger .details-section.scripts {
+    border-bottom: none;
+}
+
+.sidebar > .panel.navigation.debugger.paused .details-section.scripts {
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar > .panel.navigation.debugger .details-section.scripts .header {
+    display: none;
+}
+
+.sidebar > .panel.navigation.debugger.paused .details-section.scripts .header {
+    display: block;
+}
+
+.sidebar > .panel.navigation.debugger .details-section.scripts.collapsed > .content {
+    display: block;
+}
+
+.sidebar > .panel.navigation.debugger.paused .details-section.scripts.collapsed > .content {
+    display: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
new file mode 100644
index 000000000..1a4e2f565
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
@@ -0,0 +1,840 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerSidebarPanel = class DebuggerSidebarPanel extends WebInspector.NavigationSidebarPanel
+{
+    constructor(contentBrowser)
+    {
+        super("debugger", WebInspector.UIString("Debugger"), true);
+
+        this.contentBrowser = contentBrowser;
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceAdded, this);
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._breakpointsEnabledDidChange, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.CallFramesDidChange, this._debuggerCallFramesDidChange, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptAdded, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptRemoved, this._scriptRemoved, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptsCleared, this._scriptsCleared, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.WaitingToPause, this._debuggerWaitingToPause, this);
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.addSubview(this._navigationBar);
+
+        var breakpointsImage = {src: "Images/Breakpoints.svg", width: 15, height: 15};
+        var pauseImage = {src: "Images/Pause.svg", width: 15, height: 15};
+        var resumeImage = {src: "Images/Resume.svg", width: 15, height: 15};
+        var stepOverImage = {src: "Images/StepOver.svg", width: 15, height: 15};
+        var stepIntoImage = {src: "Images/StepInto.svg", width: 15, height: 15};
+        var stepOutImage = {src: "Images/StepOut.svg", width: 15, height: 15};
+
+        var toolTip = WebInspector.UIString("Enable all breakpoints (%s)").format(WebInspector.toggleBreakpointsKeyboardShortcut.displayName);
+        var altToolTip = WebInspector.UIString("Disable all breakpoints (%s)").format(WebInspector.toggleBreakpointsKeyboardShortcut.displayName);
+
+        this._debuggerBreakpointsButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-breakpoints", toolTip, altToolTip, breakpointsImage.src, breakpointsImage.width, breakpointsImage.height);
+        this._debuggerBreakpointsButtonItem.activated = WebInspector.debuggerManager.breakpointsEnabled;
+        this._debuggerBreakpointsButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, WebInspector.debuggerToggleBreakpoints, this);
+        this._navigationBar.addNavigationItem(this._debuggerBreakpointsButtonItem);
+
+        toolTip = WebInspector.UIString("Pause script execution (%s or %s)").format(WebInspector.pauseOrResumeKeyboardShortcut.displayName, WebInspector.pauseOrResumeAlternateKeyboardShortcut.displayName);
+        altToolTip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.pauseOrResumeKeyboardShortcut.displayName, WebInspector.pauseOrResumeAlternateKeyboardShortcut.displayName);
+
+        this._debuggerPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("debugger-pause-resume", toolTip, altToolTip, pauseImage.src, resumeImage.src, pauseImage.width, pauseImage.height);
+        this._debuggerPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, WebInspector.debuggerPauseResumeToggle, this);
+        this._navigationBar.addNavigationItem(this._debuggerPauseResumeButtonItem);
+
+        this._debuggerStepOverButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-over", WebInspector.UIString("Step over (%s or %s)").format(WebInspector.stepOverKeyboardShortcut.displayName, WebInspector.stepOverAlternateKeyboardShortcut.displayName), stepOverImage.src, stepOverImage.width, stepOverImage.height);
+        this._debuggerStepOverButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, WebInspector.debuggerStepOver, this);
+        this._debuggerStepOverButtonItem.enabled = false;
+        this._navigationBar.addNavigationItem(this._debuggerStepOverButtonItem);
+
+        this._debuggerStepIntoButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-into", WebInspector.UIString("Step into (%s or %s)").format(WebInspector.stepIntoKeyboardShortcut.displayName, WebInspector.stepIntoAlternateKeyboardShortcut.displayName), stepIntoImage.src, stepIntoImage.width, stepIntoImage.height);
+        this._debuggerStepIntoButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, WebInspector.debuggerStepInto, this);
+        this._debuggerStepIntoButtonItem.enabled = false;
+        this._navigationBar.addNavigationItem(this._debuggerStepIntoButtonItem);
+
+        this._debuggerStepOutButtonItem = new WebInspector.ButtonNavigationItem("debugger-step-out", WebInspector.UIString("Step out (%s or %s)").format(WebInspector.stepOutKeyboardShortcut.displayName, WebInspector.stepOutAlternateKeyboardShortcut.displayName), stepOutImage.src, stepOutImage.width, stepOutImage.height);
+        this._debuggerStepOutButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, WebInspector.debuggerStepOut, this);
+        this._debuggerStepOutButtonItem.enabled = false;
+        this._navigationBar.addNavigationItem(this._debuggerStepOutButtonItem);
+
+        // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
+        this.element.classList.add(WebInspector.DebuggerSidebarPanel.OffsetSectionsStyleClassName);
+
+        this._globalBreakpointsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Global Breakpoints"), null, WebInspector.DebuggerSidebarPanel.GlobalIconStyleClassName);
+        this._allExceptionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.allExceptionsBreakpoint, WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName, WebInspector.UIString("All Exceptions"));
+        this._allUncaughtExceptionsBreakpointTreeElement = new WebInspector.BreakpointTreeElement(WebInspector.debuggerManager.allUncaughtExceptionsBreakpoint, WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName, WebInspector.UIString("All Uncaught Exceptions"));
+        this.suppressFilteringOnTreeElements([this._globalBreakpointsFolderTreeElement, this._allExceptionsBreakpointTreeElement, this._allUncaughtExceptionsBreakpointTreeElement]);
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter Breakpoint List");
+
+        function showResourcesWithIssuesOnlyFilterFunction(treeElement)
+        {
+            // Keep issues.
+            if (treeElement instanceof WebInspector.IssueTreeElement)
+                return true;
+
+            // Keep resources with issues.
+            if (treeElement.hasChildren) {
+                for (let child of treeElement.children) {
+                    if (child instanceof WebInspector.IssueTreeElement)
+                        return true;
+                }
+            }
+            return false;
+        };
+
+        this.filterBar.addFilterBarButton("debugger-show-resources-with-issues-only", showResourcesWithIssuesOnlyFilterFunction, true, WebInspector.UIString("Show only resources with issues."), WebInspector.UIString("Show resources with and without issues."), "Images/Errors.svg", 15, 15);
+
+        this._breakpointsContentTreeOutline = this.contentTreeOutline;
+
+        let breakpointsRow = new WebInspector.DetailsSectionRow;
+        breakpointsRow.element.appendChild(this._breakpointsContentTreeOutline.element);
+
+        let breakpointsGroup = new WebInspector.DetailsSectionGroup([breakpointsRow]);
+        let breakpointsSection = new WebInspector.DetailsSection("scripts", WebInspector.UIString("Scripts"), [breakpointsGroup]);
+        this.contentView.element.appendChild(breakpointsSection.element);
+
+        this._breakpointsContentTreeOutline.element.classList.add("breakpoints");
+        this._breakpointsContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+        this._breakpointsContentTreeOutline.ondelete = this._breakpointTreeOutlineDeleteTreeElement.bind(this);
+        this._breakpointsContentTreeOutline.oncontextmenu = this._breakpointTreeOutlineContextMenuTreeElement.bind(this);
+
+        this._breakpointsContentTreeOutline.appendChild(this._globalBreakpointsFolderTreeElement);
+        this._globalBreakpointsFolderTreeElement.appendChild(this._allExceptionsBreakpointTreeElement);
+        this._globalBreakpointsFolderTreeElement.appendChild(this._allUncaughtExceptionsBreakpointTreeElement);
+        this._globalBreakpointsFolderTreeElement.expand();
+
+        this._callStackContentTreeOutline = this.createContentTreeOutline(true, true);
+        this._callStackContentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+        this._callStackRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Call Frames"));
+        this._callStackRow.showEmptyMessage();
+
+        let callStackGroup = new WebInspector.DetailsSectionGroup([this._callStackRow]);
+        this._callStackSection = new WebInspector.DetailsSection("call-stack", WebInspector.UIString("Call Stack"), [callStackGroup]);
+
+        this._pauseReasonTreeOutline = null;
+
+        this._pauseReasonLinkContainerElement = document.createElement("span");
+        this._pauseReasonTextRow = new WebInspector.DetailsSectionTextRow;
+        this._pauseReasonGroup = new WebInspector.DetailsSectionGroup([this._pauseReasonTextRow]);
+        this._pauseReasonSection = new WebInspector.DetailsSection("paused-reason", null, [this._pauseReasonGroup], this._pauseReasonLinkContainerElement);
+        this._pauseReasonSection.title = WebInspector.UIString("Pause Reason");
+
+        WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisplayLocationDidChange, this._handleDebuggerObjectDisplayLocationDidChange, this);
+        WebInspector.IssueMessage.addEventListener(WebInspector.IssueMessage.Event.DisplayLocationDidChange, this._handleDebuggerObjectDisplayLocationDidChange, this);
+        WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._handleIssueAdded, this);
+        WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.Cleared, this._handleIssuesCleared, this);
+
+        if (WebInspector.frameResourceManager.mainFrame)
+            this._addResourcesRecursivelyForFrame(WebInspector.frameResourceManager.mainFrame);
+
+        for (var script of WebInspector.debuggerManager.knownNonResourceScripts)
+            this._addScript(script);
+    }
+
+    // Public
+
+    get minimumWidth()
+    {
+        return this._navigationBar.minimumWidth;
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.Frame.removeEventListener(null, null, this);
+        WebInspector.debuggerManager.removeEventListener(null, null, this);
+        WebInspector.Breakpoint.removeEventListener(null, null, this);
+        WebInspector.IssueMessage.removeEventListener(null, null, this);
+    }
+
+    showDefaultContentView()
+    {
+        var currentTreeElement = this._contentTreeOutline.children[0];
+        while (currentTreeElement && !currentTreeElement.root) {
+            if (currentTreeElement instanceof WebInspector.ResourceTreeElement || currentTreeElement instanceof WebInspector.ScriptTreeElement) {
+                this.showDefaultContentViewForTreeElement(currentTreeElement);
+                return;
+            }
+
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, true);
+        }
+    }
+
+    treeElementForRepresentedObject(representedObject)
+    {
+        // The main resource is used as the representedObject instead of Frame in our tree.
+        if (representedObject instanceof WebInspector.Frame)
+            representedObject = representedObject.mainResource;
+
+        return this.contentTreeOutline.getCachedTreeElement(representedObject);
+    }
+
+    // Protected
+
+    saveStateToCookie(cookie)
+    {
+        console.assert(cookie);
+
+        var selectedTreeElement = this._breakpointsContentTreeOutline.selectedTreeElement;
+        if (!selectedTreeElement)
+            return;
+
+        var representedObject = selectedTreeElement.representedObject;
+
+        if (representedObject === WebInspector.debuggerManager.allExceptionsBreakpoint) {
+            cookie[WebInspector.DebuggerSidebarPanel.SelectedAllExceptionsCookieKey] = true;
+            return;
+        }
+
+        if (representedObject === WebInspector.debuggerManager.allUncaughtExceptionsBreakpoint) {
+            cookie[WebInspector.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey] = true;
+            return;
+        }
+
+        super.saveStateToCookie(cookie);
+    }
+
+    restoreStateFromCookie(cookie, relaxedMatchDelay)
+    {
+        console.assert(cookie);
+
+        // Eagerly resolve the special breakpoints; otherwise, use the default behavior.
+        if (cookie[WebInspector.DebuggerSidebarPanel.SelectedAllExceptionsCookieKey])
+            this._allExceptionsBreakpointTreeElement.revealAndSelect();
+        else if (cookie[WebInspector.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey])
+            this._allUncaughtExceptionsBreakpointTreeElement.revealAndSelect();
+        else
+            super.restoreStateFromCookie(cookie, relaxedMatchDelay);
+    }
+
+    // Private
+
+    _debuggerWaitingToPause(event)
+    {
+        this._debuggerPauseResumeButtonItem.enabled = false;
+    }
+
+    _debuggerDidPause(event)
+    {
+        this.contentView.element.insertBefore(this._callStackSection.element, this.contentView.element.firstChild);
+        if (this._updatePauseReason())
+            this.contentView.element.insertBefore(this._pauseReasonSection.element, this.contentView.element.firstChild);
+
+        this._debuggerPauseResumeButtonItem.enabled = true;
+        this._debuggerPauseResumeButtonItem.toggled = true;
+        this._debuggerStepOverButtonItem.enabled = true;
+        this._debuggerStepIntoButtonItem.enabled = true;
+
+        this.element.classList.add(WebInspector.DebuggerSidebarPanel.DebuggerPausedStyleClassName);
+    }
+
+    _debuggerDidResume(event)
+    {
+        this._callStackSection.element.remove();
+        this._pauseReasonSection.element.remove();
+
+        this._debuggerPauseResumeButtonItem.enabled = true;
+        this._debuggerPauseResumeButtonItem.toggled = false;
+        this._debuggerStepOverButtonItem.enabled = false;
+        this._debuggerStepIntoButtonItem.enabled = false;
+        this._debuggerStepOutButtonItem.enabled = false;
+
+        this.element.classList.remove(WebInspector.DebuggerSidebarPanel.DebuggerPausedStyleClassName);
+    }
+
+    _breakpointsEnabledDidChange(event)
+    {
+        this._debuggerBreakpointsButtonItem.activated = WebInspector.debuggerManager.breakpointsEnabled;
+    }
+
+    _addBreakpoint(breakpoint)
+    {
+        var sourceCode = breakpoint.sourceCodeLocation.displaySourceCode;
+        if (!sourceCode)
+            return null;
+
+        var parentTreeElement = this._addTreeElementForSourceCodeToContentTreeOutline(sourceCode);
+
+        // Mark disabled breakpoints as resolved if there is source code loaded with that URL.
+        // This gives the illusion the breakpoint was resolved, but since we don't send disabled
+        // breakpoints to the backend we don't know for sure. If the user enables the breakpoint
+        // it will be resolved properly.
+        if (breakpoint.disabled)
+            breakpoint.resolved = true;
+
+        var breakpointTreeElement = new WebInspector.BreakpointTreeElement(breakpoint);
+        parentTreeElement.insertChild(breakpointTreeElement, insertionIndexForObjectInListSortedByFunction(breakpointTreeElement, parentTreeElement.children, this._compareDebuggerTreeElements));
+        if (parentTreeElement.children.length === 1)
+            parentTreeElement.expand();
+        return breakpointTreeElement;
+    }
+
+    _addBreakpointsForSourceCode(sourceCode)
+    {
+        var breakpoints = WebInspector.debuggerManager.breakpointsForSourceCode(sourceCode);
+        for (var i = 0; i < breakpoints.length; ++i)
+            this._addBreakpoint(breakpoints[i], sourceCode);
+    }
+
+    _addIssuesForSourceCode(sourceCode)
+    {
+        var issues = WebInspector.issueManager.issuesForSourceCode(sourceCode);
+        for (var issue of issues)
+            this._addIssue(issue);
+    }
+
+    _addTreeElementForSourceCodeToContentTreeOutline(sourceCode)
+    {
+        var treeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(sourceCode);
+        if (!treeElement) {
+            if (sourceCode instanceof WebInspector.SourceMapResource)
+                treeElement = new WebInspector.SourceMapResourceTreeElement(sourceCode);
+            else if (sourceCode instanceof WebInspector.Resource)
+                treeElement = new WebInspector.ResourceTreeElement(sourceCode);
+            else if (sourceCode instanceof WebInspector.Script)
+                treeElement = new WebInspector.ScriptTreeElement(sourceCode);
+        }
+
+        if (!treeElement) {
+            console.error("Unknown sourceCode instance", sourceCode);
+            return;
+        }
+
+        if (!treeElement.parent) {
+            treeElement.hasChildren = false;
+            treeElement.expand();
+
+            this._breakpointsContentTreeOutline.insertChild(treeElement, insertionIndexForObjectInListSortedByFunction(treeElement, this._breakpointsContentTreeOutline.children, this._compareTopLevelTreeElements.bind(this)));
+        }
+
+        return treeElement;
+    }
+
+    _addResourcesRecursivelyForFrame(frame)
+    {
+        this._addResource(frame.mainResource);
+
+        for (var resource of frame.resources)
+            this._addResource(resource);
+
+        for (var childFrame of frame.childFrames)
+            this._addResourcesRecursivelyForFrame(childFrame);
+    }
+
+    _resourceAdded(event)
+    {
+        this._addResource(event.data.resource);
+    }
+
+    _addResource(resource)
+    {
+        if (![WebInspector.Resource.Type.Document, WebInspector.Resource.Type.Script].includes(resource.type))
+            return;
+
+        let treeElement = this._addTreeElementForSourceCodeToContentTreeOutline(resource);
+        this._addBreakpointsForSourceCode(resource);
+        this._addIssuesForSourceCode(resource);
+
+        if (!this.contentBrowser.currentContentView)
+            this.showDefaultContentViewForTreeElement(treeElement);
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (event.target.isMainFrame()) {
+            // Aggressively prune resources now so the old resources are removed before
+            // the new main resource is added below. This avoids a visual flash when the
+            // prune normally happens on a later event loop cycle.
+            this.pruneStaleResourceTreeElements();
+            this.contentBrowser.contentViewContainer.closeAllContentViews();
+        }
+
+        var resource = event.target.mainResource;
+        this._addTreeElementForSourceCodeToContentTreeOutline(resource);
+        this._addBreakpointsForSourceCode(resource);
+        this._addIssuesForSourceCode(resource);
+    }
+
+    _scriptAdded(event)
+    {
+        this._addScript(event.data.script);
+    }
+
+    _addScript(script)
+    {
+        // COMPATIBILITY(iOS 9): Backends could send the frontend built-in code, filter out JSC internals.
+        if (!script.url)
+            return;
+
+        // Don't add breakpoints if the script is represented by a Resource. They were
+        // already added by _resourceAdded.
+        if (script.resource)
+            return;
+
+        let treeElement = this._addTreeElementForSourceCodeToContentTreeOutline(script);
+        this._addBreakpointsForSourceCode(script);
+        this._addIssuesForSourceCode(script);
+
+        if (!this.contentBrowser.currentContentView)
+            this.showDefaultContentViewForTreeElement(treeElement);
+    }
+
+    _scriptRemoved(event)
+    {
+        let script = event.data.script;
+        let scriptTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(script);
+        if (!scriptTreeElement)
+            return;
+
+        scriptTreeElement.parent.removeChild(scriptTreeElement);
+    }
+
+    _scriptsCleared(event)
+    {
+        for (var i = this._breakpointsContentTreeOutline.children.length - 1; i >= 0; --i) {
+            var treeElement = this._breakpointsContentTreeOutline.children[i];
+            if (!(treeElement instanceof WebInspector.ScriptTreeElement))
+                continue;
+
+            this._breakpointsContentTreeOutline.removeChildAtIndex(i, true, true);
+        }
+    }
+
+    _breakpointAdded(event)
+    {
+        var breakpoint = event.data.breakpoint;
+        this._addBreakpoint(breakpoint);
+    }
+
+    _breakpointRemoved(event)
+    {
+        var breakpoint = event.data.breakpoint;
+
+        if (this._pauseReasonTreeOutline) {
+            var pauseReasonBreakpointTreeElement = this._pauseReasonTreeOutline.getCachedTreeElement(breakpoint);
+            if (pauseReasonBreakpointTreeElement)
+                pauseReasonBreakpointTreeElement.removeStatusImage();
+        }
+
+        var breakpointTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(breakpoint);
+        console.assert(breakpointTreeElement);
+        if (!breakpointTreeElement)
+            return;
+
+        this._removeDebuggerTreeElement(breakpointTreeElement);
+    }
+
+    _handleDebuggerObjectDisplayLocationDidChange(event)
+    {
+        var debuggerObject = event.target;
+
+        if (event.data.oldDisplaySourceCode === debuggerObject.sourceCodeLocation.displaySourceCode)
+            return;
+
+        var debuggerTreeElement = this._breakpointsContentTreeOutline.getCachedTreeElement(debuggerObject);
+        if (!debuggerTreeElement)
+            return;
+
+        // A known debugger object (breakpoint, issueMessage, etc.) moved between resources, remove the old tree element
+        // and create a new tree element with the updated file.
+
+        var wasSelected = debuggerTreeElement.selected;
+
+        this._removeDebuggerTreeElement(debuggerTreeElement);
+        var newDebuggerTreeElement = this._addDebuggerObject(debuggerObject);
+
+        if (newDebuggerTreeElement && wasSelected)
+            newDebuggerTreeElement.revealAndSelect(true, false, true, true);
+    }
+
+    _removeDebuggerTreeElement(debuggerTreeElement)
+    {
+        var parentTreeElement = debuggerTreeElement.parent;
+        parentTreeElement.removeChild(debuggerTreeElement);
+
+        console.assert(parentTreeElement.parent === this._breakpointsContentTreeOutline);
+    }
+
+    _debuggerCallFramesDidChange()
+    {
+        this._callStackContentTreeOutline.removeChildren();
+
+        var callFrames = WebInspector.debuggerManager.callFrames;
+        if (!callFrames || !callFrames.length) {
+            this._callStackRow.showEmptyMessage();
+            return;
+        }
+
+        this._callStackRow.hideEmptyMessage();
+        this._callStackRow.element.appendChild(this._callStackContentTreeOutline.element);
+
+        var treeElementToSelect = null;
+
+        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        for (var i = 0; i < callFrames.length; ++i) {
+            var callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrames[i]);
+            if (callFrames[i] === activeCallFrame)
+                treeElementToSelect = callFrameTreeElement;
+            this._callStackContentTreeOutline.appendChild(callFrameTreeElement);
+        }
+
+        if (treeElementToSelect)
+            treeElementToSelect.select(true, true);
+    }
+
+    _debuggerActiveCallFrameDidChange()
+    {
+        var callFrames = WebInspector.debuggerManager.callFrames;
+        if (!callFrames)
+            return;
+
+        var indexOfActiveCallFrame = callFrames.indexOf(WebInspector.debuggerManager.activeCallFrame);
+        // It is useful to turn off the step out button when there is no call frame to go through
+        // since there might be call frames in the backend that were removed when processing the call
+        // frame payload.
+        this._debuggerStepOutButtonItem.enabled = indexOfActiveCallFrame < callFrames.length - 1;
+    }
+
+    _breakpointsBeneathTreeElement(treeElement)
+    {
+        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
+        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
+            return [];
+
+        var breakpoints = [];
+        var breakpointTreeElements = treeElement.children;
+        for (var i = 0; i < breakpointTreeElements.length; ++i) {
+            console.assert(breakpointTreeElements[i] instanceof WebInspector.BreakpointTreeElement);
+            console.assert(breakpointTreeElements[i].breakpoint);
+            var breakpoint = breakpointTreeElements[i].breakpoint;
+            if (breakpoint)
+                breakpoints.push(breakpoint);
+        }
+
+        return breakpoints;
+    }
+
+    _removeAllBreakpoints(breakpoints)
+    {
+        for (var i = 0; i < breakpoints.length; ++i) {
+            var breakpoint = breakpoints[i];
+            if (WebInspector.debuggerManager.isBreakpointRemovable(breakpoint))
+                WebInspector.debuggerManager.removeBreakpoint(breakpoint);
+        }
+    }
+
+    _toggleAllBreakpoints(breakpoints, disabled)
+    {
+        for (var i = 0; i < breakpoints.length; ++i)
+            breakpoints[i].disabled = disabled;
+    }
+
+    _breakpointTreeOutlineDeleteTreeElement(treeElement)
+    {
+        console.assert(treeElement.selected);
+        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement);
+        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
+            return false;
+
+        var wasTopResourceTreeElement = treeElement.previousSibling === this._allUncaughtExceptionsBreakpointTreeElement;
+        var nextSibling = treeElement.nextSibling;
+
+        var breakpoints = this._breakpointsBeneathTreeElement(treeElement);
+        this._removeAllBreakpoints(breakpoints);
+
+        if (wasTopResourceTreeElement && nextSibling)
+            nextSibling.select(true, true);
+
+        return true;
+    }
+
+    _breakpointTreeOutlineContextMenuTreeElement(event, treeElement)
+    {
+        console.assert(treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement || treeElement.constructor === WebInspector.FolderTreeElement);
+        if (!(treeElement instanceof WebInspector.ResourceTreeElement) && !(treeElement instanceof WebInspector.ScriptTreeElement))
+            return;
+
+        let breakpoints = this._breakpointsBeneathTreeElement(treeElement);
+        let shouldDisable = breakpoints.some((breakpoint) => !breakpoint.disabled);
+
+        let removeAllResourceBreakpoints = () => {
+            this._removeAllBreakpoints(breakpoints);
+        };
+
+        let toggleAllResourceBreakpoints = () => {
+            this._toggleAllBreakpoints(breakpoints, shouldDisable);
+        };
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        if (shouldDisable)
+            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoints"), toggleAllResourceBreakpoints);
+        else
+            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoints"), toggleAllResourceBreakpoints);
+        contextMenu.appendItem(WebInspector.UIString("Delete Breakpoints"), removeAllResourceBreakpoints);
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        // Deselect any other tree elements to prevent two selections in the sidebar.
+        for (let treeOutline of this.visibleContentTreeOutlines) {
+            if (treeOutline === treeElement.treeOutline)
+                continue;
+
+            let selectedTreeElement = treeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                selectedTreeElement.deselect();
+        }
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
+            WebInspector.showSourceCode(treeElement.representedObject);
+            return;
+        }
+
+        if (treeElement instanceof WebInspector.CallFrameTreeElement) {
+            let callFrame = treeElement.callFrame;
+            WebInspector.debuggerManager.activeCallFrame = callFrame;
+            WebInspector.showSourceCodeLocation(callFrame.sourceCodeLocation);
+            return;
+        }
+
+        if (treeElement instanceof WebInspector.IssueTreeElement) {
+            WebInspector.showSourceCodeLocation(treeElement.issueMessage.sourceCodeLocation);
+            return;
+        }
+
+        if (!(treeElement instanceof WebInspector.BreakpointTreeElement) || treeElement.parent.constructor === WebInspector.FolderTreeElement)
+            return;
+
+        let breakpoint = treeElement.breakpoint;
+        if (treeElement.treeOutline === this._pauseReasonTreeOutline) {
+            WebInspector.showSourceCodeLocation(breakpoint.sourceCodeLocation);
+            return;
+        }
+
+        if (!treeElement.parent.representedObject)
+            return;
+
+        console.assert(treeElement.parent.representedObject instanceof WebInspector.SourceCode);
+        if (!(treeElement.parent.representedObject instanceof WebInspector.SourceCode))
+            return;
+
+        WebInspector.showSourceCodeLocation(breakpoint.sourceCodeLocation);
+    }
+
+    _compareTopLevelTreeElements(a, b)
+    {
+        if (a === this._globalBreakpointsFolderTreeElement)
+            return -1;
+        if (b === this._globalBreakpointsFolderTreeElement)
+            return 1;
+
+        return a.mainTitle.localeCompare(b.mainTitle);
+    }
+
+    _compareDebuggerTreeElements(a, b)
+    {
+        if (!a.debuggerObject || !b.debuggerObject)
+            return 0;
+        
+        var aLocation = a.debuggerObject.sourceCodeLocation;
+        var bLocation = b.debuggerObject.sourceCodeLocation;
+
+        var comparisonResult = aLocation.displayLineNumber - bLocation.displayLineNumber;
+        if (comparisonResult !== 0)
+            return comparisonResult;
+
+        return aLocation.displayColumnNumber - bLocation.displayColumnNumber;
+    }
+
+    _updatePauseReason()
+    {
+        this._pauseReasonTreeOutline = null;
+
+        this._updatePauseReasonGotoArrow();
+        return this._updatePauseReasonSection();
+    }
+
+    _updatePauseReasonSection()
+    {
+        var pauseData = WebInspector.debuggerManager.pauseData;
+
+        switch (WebInspector.debuggerManager.pauseReason) {
+        case WebInspector.DebuggerManager.PauseReason.Assertion:
+            // FIXME: We should include the assertion condition string.
+            console.assert(pauseData, "Expected data with an assertion, but found none.");
+            if (pauseData && pauseData.message) {
+                this._pauseReasonTextRow.text = WebInspector.UIString("Assertion with message: %s").format(pauseData.message);
+                return true;
+            }
+
+            this._pauseReasonTextRow.text = WebInspector.UIString("Assertion Failed");
+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
+            return true;
+
+        case WebInspector.DebuggerManager.PauseReason.Breakpoint:
+            console.assert(pauseData, "Expected breakpoint identifier, but found none.");
+            if (pauseData && pauseData.breakpointId) {
+                let breakpoint = WebInspector.debuggerManager.breakpointForIdentifier(pauseData.breakpointId);
+                this._pauseReasonTreeOutline = this.createContentTreeOutline(true, true);
+                this._pauseReasonTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+                let breakpointTreeElement = new WebInspector.BreakpointTreeElement(breakpoint, WebInspector.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName, WebInspector.UIString("Triggered Breakpoint"));
+                let breakpointDetailsSection = new WebInspector.DetailsSectionRow;
+                this._pauseReasonTreeOutline.appendChild(breakpointTreeElement);
+                breakpointDetailsSection.element.appendChild(this._pauseReasonTreeOutline.element);
+
+                this._pauseReasonGroup.rows = [breakpointDetailsSection];
+                return true;
+            }
+            break;
+
+        case WebInspector.DebuggerManager.PauseReason.CSPViolation:
+            console.assert(pauseData, "Expected data with a CSP Violation, but found none.");
+            if (pauseData) {
+                // COMPATIBILITY (iOS 8): 'directive' was 'directiveText'.
+                this._pauseReasonTextRow.text = WebInspector.UIString("Content Security Policy violation of directive: %s").format(pauseData.directive || pauseData.directiveText);
+                this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
+                return true;
+            }
+            break;
+
+        case WebInspector.DebuggerManager.PauseReason.DebuggerStatement:
+            this._pauseReasonTextRow.text = WebInspector.UIString("Debugger Statement");
+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
+            return true;
+
+        case WebInspector.DebuggerManager.PauseReason.Exception:
+            console.assert(pauseData, "Expected data with an exception, but found none.");
+            if (pauseData) {
+                // FIXME: We should improve the appearance of thrown objects. This works well for exception strings.
+                var data = WebInspector.RemoteObject.fromPayload(pauseData);
+                this._pauseReasonTextRow.text = WebInspector.UIString("Exception with thrown value: %s").format(data.description);
+                this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
+                return true;
+            }
+            break;
+
+        case WebInspector.DebuggerManager.PauseReason.PauseOnNextStatement:
+            this._pauseReasonTextRow.text = WebInspector.UIString("Immediate Pause Requested");
+            this._pauseReasonGroup.rows = [this._pauseReasonTextRow];
+            return true;
+
+        case WebInspector.DebuggerManager.PauseReason.Other:
+            console.error("Paused for unknown reason. We should always have a reason.");
+            break;
+        }
+
+        return false;
+    }
+
+    _updatePauseReasonGotoArrow()
+    {
+        this._pauseReasonLinkContainerElement.removeChildren();
+
+        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        if (!activeCallFrame)
+            return;
+
+        var sourceCodeLocation = activeCallFrame.sourceCodeLocation;
+        if (!sourceCodeLocation)
+            return;
+
+        var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, false, true);
+        this._pauseReasonLinkContainerElement.appendChild(linkElement);
+    }
+
+    _addDebuggerObject(debuggerObject)
+    {
+        if (debuggerObject instanceof WebInspector.Breakpoint)
+            return this._addBreakpoint(debuggerObject);
+
+        if (debuggerObject instanceof WebInspector.IssueMessage)
+            return this._addIssue(debuggerObject);
+    }
+
+    _addIssue(issueMessage)
+    {
+        var parentTreeElement = this._addTreeElementForSourceCodeToContentTreeOutline(issueMessage.sourceCodeLocation.sourceCode);
+        if (!parentTreeElement)
+            return null;
+
+        var issueTreeElement = new WebInspector.IssueTreeElement(issueMessage);
+
+        parentTreeElement.insertChild(issueTreeElement, insertionIndexForObjectInListSortedByFunction(issueTreeElement, parentTreeElement.children, this._compareDebuggerTreeElements));
+        if (parentTreeElement.children.length === 1)
+            parentTreeElement.expand();
+
+        return issueTreeElement;
+    }
+
+    _handleIssueAdded(event)
+    {
+        var issue = event.data.issue;
+
+        // We only want to show issues originating from JavaScript source code.
+        if (!issue.sourceCodeLocation || !issue.sourceCodeLocation.sourceCode || (issue.source !== "javascript" && issue.source !== "console-api"))
+            return;
+
+        this._addIssue(issue);
+    }
+
+    _handleIssuesCleared(event)
+    {
+        var currentTreeElement = this._contentTreeOutline.children[0];
+        var issueTreeElements = [];
+
+        while (currentTreeElement && !currentTreeElement.root) {
+            if (currentTreeElement instanceof WebInspector.IssueTreeElement)
+                issueTreeElements.push(currentTreeElement);
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, true);
+        }
+
+        for (var issueTreeElement of issueTreeElements)
+            issueTreeElement.parent.removeChild(issueTreeElement);
+    }
+};
+
+WebInspector.DebuggerSidebarPanel.OffsetSectionsStyleClassName = "offset-sections";
+WebInspector.DebuggerSidebarPanel.DebuggerPausedStyleClassName = "paused";
+WebInspector.DebuggerSidebarPanel.ExceptionIconStyleClassName = "breakpoint-exception-icon";
+WebInspector.DebuggerSidebarPanel.PausedBreakpointIconStyleClassName = "breakpoint-paused-icon";
+WebInspector.DebuggerSidebarPanel.GlobalIconStyleClassName = "global-breakpoints-icon";
+
+WebInspector.DebuggerSidebarPanel.SelectedAllExceptionsCookieKey = "debugger-sidebar-panel-all-exceptions-breakpoint";
+WebInspector.DebuggerSidebarPanel.SelectedAllUncaughtExceptionsCookieKey = "debugger-sidebar-panel-all-uncaught-exceptions-breakpoint";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js
new file mode 100644
index 000000000..3ca7b2415
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerTabContentView.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerTabContentView = class DebuggerTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.DebuggerTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.scopeChainDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
+
+        super(identifier || "debugger", "debugger", tabBarItem, WebInspector.DebuggerSidebarPanel, detailsSidebarPanels);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Debugger.svg",
+            title: WebInspector.UIString("Debugger"),
+        };
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.DebuggerTabContentView.Type;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        if (representedObject instanceof WebInspector.Script)
+            return true;
+
+        if (!(representedObject instanceof WebInspector.Resource))
+            return false;
+
+        return representedObject.type === WebInspector.Resource.Type.Document || representedObject.type === WebInspector.Resource.Type.Script;
+    }
+
+    showDetailsSidebarPanels()
+    {
+        super.showDetailsSidebarPanels();
+
+        if (!this._showScopeChainDetailsSidebarPanel || !WebInspector.scopeChainDetailsSidebarPanel.parentSidebar)
+            return;
+
+        WebInspector.scopeChainDetailsSidebarPanel.show();
+
+        this._showScopeChainDetailsSidebarPanel = false;
+    }
+
+    showScopeChainDetailsSidebarPanel()
+    {
+        this._showScopeChainDetailsSidebarPanel = true;
+    }
+
+    revealAndSelectBreakpoint(breakpoint)
+    {
+        console.assert(breakpoint instanceof WebInspector.Breakpoint);
+
+        var treeElement = this.navigationSidebarPanel.treeElementForRepresentedObject(breakpoint);
+        if (treeElement)
+            treeElement.revealAndSelect();
+    }
+};
+
+WebInspector.DebuggerTabContentView.Type = "debugger";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerTreeElement.js
new file mode 100644
index 000000000..217be3e55
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerTreeElement.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerTreeElement = class DebuggerTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(classNames, title, subtitle, representedObject, hasChildren)
+    {
+        super(classNames, title, subtitle, representedObject, hasChildren);
+    }
+
+    // Public
+
+    get debuggerObject()
+    {
+        return this.representedObject;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
new file mode 100644
index 000000000..0d50ac0d1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.css
@@ -0,0 +1,187 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+body.web .toolbar.collapsed .dashboard.default > :matches(.resourcesSize, .time, .logs) {
+    display: none;
+}
+
+body.javascript .toolbar .dashboard.default > :matches(.resourcesCount, .resourcesSize, .time) {
+    display: none;
+}
+
+.toolbar .dashboard.default {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+}
+
+.toolbar .dashboard.default > .item {
+    line-height: 13px;
+
+    padding: 0 5px;
+
+    display: flex;
+
+    min-width: 45px;
+
+    justify-content: center;
+    align-items: center;
+
+    border-radius: 4px;
+    border: 1px solid transparent;
+
+    font-family: -apple-system-monospaced-numbers, sans-serif;
+}
+
+.toolbar .dashboard.default > :matches(.time, .resourcesSize) {
+    min-width: 70px;
+}
+
+.toolbar .dashboard.default > .item.enabled:hover {
+    border: 1px solid hsla(0, 0%, 0%, 0.1);
+}
+
+.toolbar .dashboard.default > .item.enabled:active {
+    border: 1px solid hsla(0, 0%, 0%, 0.2);
+}
+
+.toolbar .dashboard.default > .item > * {
+    display: flex;
+    align-items: center;
+}
+
+.toolbar .dashboard.default > .item > img {
+    opacity: 0.2;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+}
+
+.toolbar .dashboard.default > .item.enabled > img {
+    opacity: 0.5;
+}
+
+.toolbar .dashboard.default > .item.enabled:hover > img {
+    opacity: 0.65;
+}
+
+.toolbar .dashboard.default > .item > div {
+    display: flex;
+    flex: 1;
+
+    color: hsla(0, 0%, 0%, 0.2);
+    padding-left: 2px;
+}
+
+.toolbar .dashboard.default > .item.enabled > div {
+    color: hsla(0, 0%, 0%, 0.7);
+}
+
+.toolbar .dashboard.default > .item.enabled:hover > div {
+    color: hsla(0, 0%, 0%, 0.85);
+}
+
+.toolbar .dashboard.default > .resourcesCount > img {
+    content: url(../Images/Resources.svg);
+}
+
+.toolbar .dashboard.default > .time > img {
+    content: url(../Images/Time.svg);
+}
+
+.toolbar .dashboard.default > .logs > img {
+    content: url(../Images/Logs.svg);
+}
+
+.toolbar .dashboard.default > .resourcesSize > img {
+    content: url(../Images/Weight.svg);
+}
+
+.toolbar .dashboard.default > .errors > img {
+    content: url(../Images/Errors.svg);
+}
+
+.toolbar .dashboard.default > .errors.enabled > img {
+    content: url(../Images/ErrorsEnabled.svg);
+    opacity: 0.9;
+}
+
+.toolbar .dashboard.default > .errors.enabled:hover > img {
+    opacity: 1;
+}
+
+.toolbar .dashboard.default > .errors.enabled > div {
+    color: hsla(359, 57%, 50%, 0.9);
+}
+
+.toolbar .dashboard.default > .errors.enabled:hover > div {
+    color: hsl(359, 57%, 50%);
+}
+
+.toolbar .dashboard.default > .issues > img {
+    content: url(../Images/Issues.svg);
+}
+
+.toolbar .dashboard.default > .issues.enabled > img {
+    content: url(../Images/IssuesEnabled.svg);
+    opacity: 0.9;
+}
+
+.toolbar .dashboard.default > .issues.enabled:hover > img {
+    opacity: 1;
+}
+
+.toolbar .dashboard.default > .issues.enabled > div {
+    color: hsla(43, 96%, 44%, 0.9);
+}
+
+.toolbar .dashboard.default > .issues.enabled:hover > div {
+    color: hsl(43, 96%, 44%);
+}
+
+/* Styles for the pulsing animated state of console items */
+
+.toolbar .dashboard.default > .item.pulsing {
+    animation-name: console-item-pulse;
+    animation-duration: 0.75s;
+}
+
+@keyframes console-item-pulse {
+    50% { opacity: 0.6; }
+}
+
+
+/* Styles for the extra short style, one row with quite a small y-margin */
+
+.toolbar.label-only .dashboard.default > .item,
+.toolbar.small-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard.default > .item {
+    margin: 1px 0;
+}
+
+/* Styles for the fairly short style, one row with quite a bit of y-margin */
+
+.toolbar.normal-size:matches(.icon-only, .icon-and-label-vertical, .icon-and-label-horizontal) .dashboard.default > .item {
+    margin: 4px 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js
new file mode 100644
index 000000000..f55c85144
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DefaultDashboardView.js
@@ -0,0 +1,191 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DefaultDashboardView = class DefaultDashboardView extends WebInspector.DashboardView
+{
+    constructor(representedObject)
+    {
+        super(representedObject, "default");
+
+        representedObject.addEventListener(WebInspector.DefaultDashboard.Event.DataDidChange, window.requestAnimationFrame.bind(null, this._updateDisplay.bind(this)));
+
+        this._items = {
+            resourcesCount: {
+                tooltip: WebInspector.UIString("Total number of resources, click to show the Resources tab"),
+                handler: this._resourcesItemWasClicked
+            },
+            resourcesSize: {
+                tooltip: WebInspector.UIString("Total size of all resources, click to show the Network Requests timeline"),
+                handler: this._networkItemWasClicked
+            },
+            time: {
+                tooltip: WebInspector.UIString("Time until the load event fired, click to show the Network Requests timeline"),
+                handler: this._timelineItemWasClicked
+            },
+            logs: {
+                tooltip: WebInspector.UIString("Console logs, click to show the Console tab"),
+                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Logs)
+            },
+            errors: {
+                tooltip: WebInspector.UIString("Console errors, click to show the Console tab"),
+                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Errors)
+            },
+            issues: {
+                tooltip: WebInspector.UIString("Console warnings, click to show the Console tab"),
+                handler: this._consoleItemWasClicked.bind(this, WebInspector.LogContentView.Scopes.Warnings)
+            }
+        };
+
+        for (var name in this._items)
+            this._appendElementForNamedItem(name);
+    }
+    
+    // Private
+
+    _updateDisplay()
+    {
+        var dashboard = this.representedObject;
+
+        for (var category of ["logs", "issues", "errors"])
+            this._setConsoleItemValue(category, dashboard[category]);
+
+        var timeItem = this._items.time;
+        timeItem.text = dashboard.time ? Number.secondsToString(dashboard.time) : emDash;
+        this._setItemEnabled(timeItem, dashboard.time > 0);
+
+        var countItem = this._items.resourcesCount;
+        countItem.text = this._formatPossibleLargeNumber(dashboard.resourcesCount);
+        this._setItemEnabled(countItem, dashboard.resourcesCount > 0);
+
+        var sizeItem = this._items.resourcesSize;
+        sizeItem.text = dashboard.resourcesSize ? Number.bytesToString(dashboard.resourcesSize, false) : emDash;
+        this._setItemEnabled(sizeItem, dashboard.resourcesSize > 0);
+    }
+
+    _formatPossibleLargeNumber(number)
+    {
+        return number > 999 ? WebInspector.UIString("999+") : number;
+    }
+
+    _appendElementForNamedItem(name)
+    {
+        var item = this._items[name];
+
+        item.container = this._element.appendChild(document.createElement("div"));
+        item.container.className = "item " + name;
+        item.container.title = item.tooltip;
+
+        item.container.appendChild(document.createElement("img"));
+
+        item.outlet = item.container.appendChild(document.createElement("div"));
+
+        Object.defineProperty(item, "text", {
+            set: function(newText)
+            {
+                if (newText === item.outlet.textContent)
+                    return;
+                item.outlet.textContent = newText;
+            }
+        });
+
+        item.container.addEventListener("click", function(event) {
+            this._itemWasClicked(name);
+        }.bind(this));
+    }
+
+    _itemWasClicked(name)
+    {
+        var item = this._items[name];
+        if (!item.container.classList.contains(WebInspector.DefaultDashboardView.EnabledItemStyleClassName))
+            return;
+
+        if (item.handler)
+            item.handler.call(this);
+    }
+
+    _resourcesItemWasClicked()
+    {
+        WebInspector.showResourcesTab();
+    }
+
+    _networkItemWasClicked()
+    {
+        WebInspector.showNetworkTab();
+    }
+
+    _timelineItemWasClicked()
+    {
+        WebInspector.showTimelineTab();
+    }
+
+    _consoleItemWasClicked(scope)
+    {
+        WebInspector.showConsoleTab(scope);
+    }
+
+    _setConsoleItemValue(itemName, newValue)
+    {
+        var iVarName = "_" + itemName;
+        var previousValue = this[iVarName];
+        this[iVarName] = newValue;
+
+        var item = this._items[itemName];
+        item.text = this._formatPossibleLargeNumber(newValue);
+        this._setItemEnabled(item, newValue > 0);
+
+        if (newValue <= previousValue)
+            return;
+
+        var container = item.container;
+
+        function animationEnded(event)
+        {
+            if (event.target === container) {
+                container.classList.remove("pulsing");
+                container.removeEventListener("animationend", animationEnded);
+            }
+        }
+
+        // We need to force a style invalidation in the case where we already
+        // were animating this item after we've removed the pulsing CSS class.
+        if (container.classList.contains("pulsing")) {
+            container.classList.remove("pulsing");
+            container.recalculateStyles();
+        } else
+            container.addEventListener("animationend", animationEnded);
+
+        container.classList.add("pulsing");
+    }
+
+    _setItemEnabled(item, enabled)
+    {
+        if (enabled)
+            item.container.classList.add(WebInspector.DefaultDashboardView.EnabledItemStyleClassName);
+        else
+            item.container.classList.remove(WebInspector.DefaultDashboardView.EnabledItemStyleClassName);
+    }
+};
+
+WebInspector.DefaultDashboardView.EnabledItemStyleClassName = "enabled";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
new file mode 100644
index 000000000..5e0048216
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
@@ -0,0 +1,294 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section {
+    font-size: 10px;
+    background-color: var(--panel-background-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.details-section .details-section {
+    background-color: hsl(0, 0%, 100%);
+    border-color: hsla(0, 0%, 0%, 0.15);
+}
+
+.details-section .details-section:last-child {
+    border-bottom: none;
+}
+
+.details-section .details-section:first-child {
+    border-top: 1px solid var(--border-color);
+}
+
+.details-section > .header {
+    position: -webkit-sticky;
+    top: -1px;
+    height: 23px;
+
+    background-color: var(--panel-background-color);
+    color: hsl(0, 0%, 22%);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-size: 11px;
+    font-weight: bold;
+
+    padding: 4px 5px 4px 0;
+
+    /* Ensure the headers are displayed above scrollbars. */
+    z-index: var(--z-index-header);
+}
+
+.details-section > .header > .options > .navigation-bar {
+    margin-top: 1px;
+    height: 100%;
+    float: right;
+    border: none;
+}
+
+.details-section > .header > .options > .navigation-bar > .item {
+    width: 20px;
+    height: 100%;
+}
+
+.details-section .details-section > .header {
+    top: 21px;
+    background-color: hsl(0, 0%, 100%);
+    font-weight: 500;
+
+    /* Ensure these headers are displayed below the parent header but above scrollbars. */
+    z-index: calc(var(--z-index-header) - 1);
+}
+
+.details-section .details-section:not(.collapsed) > .header {
+    border-bottom: 1px solid hsl(0, 0%, 87%);
+}
+
+.details-section.computed-style-properties:not(.collapsed) > .header {
+    background-color: hsl(0, 0%, 100%);
+}
+
+.details-section > .header::before {
+    display: block;
+    float: left;
+
+    width: 21px;
+    height: 100%;
+
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 13px 13px;
+
+    content: "";
+}
+
+.details-section > .header:not(.mouse-over-options-element):active::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-active);
+}
+
+.details-section.collapsed > .header::before {
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+}
+
+.details-section.collapsed > .header:not(.mouse-over-options-element):active::before {
+    background-image: url(../Images/DisclosureTriangles.svg#closed-active);
+}
+
+.details-section > .header > label {
+    float: right;
+    font-size: 10px;
+    color: hsla(0, 0%, 0%, 0.6);
+    text-align: right;
+}
+
+.details-section.collapsed  > .header > label {
+    display: none;
+}
+
+.details-section > .header > label > input[type="checkbox"] {
+    margin: 0 0 0 5px;
+    vertical-align: 1px;
+    font-size: 10px;
+}
+
+.details-section > .header > :matches(.node-link, .go-to-arrow) {
+    float: right;
+}
+
+.details-section > .header .go-to-arrow {
+    width: 10px;
+    height: 12px;
+    margin-left: 3px;
+}
+
+.details-section > .content {
+    display: table;
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+.details-section.collapsed > .content {
+    display: none;
+}
+
+.details-section > .content > .group {
+    display: table-row-group;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.details-section > .content > .group:last-child {
+    border-bottom: none;
+}
+
+.details-section > .content > .group:nth-child(even) {
+    background-color: hsl(0, 0%, 97%);
+}
+
+.details-section > .content > .group:nth-child(even) > .row:matches(.simple:first-child > *, :not(.simple):first-child) {
+    border-top: 1px solid var(--border-color);
+}
+
+.details-section > .content > .group > .row.simple {
+    display: table-row;
+}
+
+.details-section > .content > .group > .row.simple:last-child > * {
+    padding-bottom: 5px !important;
+}
+
+.details-section > .content > .group > .row.simple.empty {
+    display: none;
+}
+
+.details-section > .content > .group > .row.empty.syntax-highlighted {
+    font-size: 10px;
+}
+
+.details-section > .content > .group > .row.simple.empty:last-child {
+    display: table-row;
+}
+
+.details-section > .content > .group > .row.simple.empty:last-child > * {
+    display: table-cell;
+    height: 1px;
+    font-size: 0;
+    color: transparent;
+    padding-top: 0;
+    padding-bottom: 3px !important;
+}
+
+.details-section > .content > .group > .row.simple.empty:last-child > * > * {
+    display: none;
+}
+
+.details-section > .content > .group > .row.simple > * {
+    display: table-cell;
+    vertical-align: top;
+    padding: 5px 4px 2px;
+}
+
+.details-section > .content > .group > .row.simple > .label {
+    color: hsl(0, 0%, 20%);
+
+    text-align: right;
+
+    padding-left: 6px;
+
+    width: 85px;
+}
+
+.details-section > .content > .group > .row.simple > .value {
+    word-wrap: break-word;
+
+    padding-right: 6px;
+
+    -webkit-user-select: text;
+    cursor: text;
+}
+
+.details-section > .content > .group > .row.simple > .value .go-to-arrow {
+    width: 10px;
+    height: 12px;
+    margin-left: 5px;
+}
+
+.details-section > .content > .group > .row.simple.data > .value {
+    word-break: break-all;
+}
+
+.details-section > .content > .group > .row:matches(.empty, .text) {
+    padding: 0 6px 7px 6px;
+    text-align: center;
+    color: gray;
+}
+
+.details-section > .content > .group > .row.text {
+    -webkit-user-select: text;
+}
+
+.details-section > .content > .group > .row.properties:not(.empty) {
+    padding: 4px 6px;
+}
+
+.details-section > .content .data-grid {
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+}
+
+.details-section > .content .data-grid table.data {
+    background-image: none;
+}
+
+.details-section > .content .data-grid tr:nth-child(even) {
+    background-color: white;
+}
+
+.details-section > .content .data-grid tr:nth-child(odd) {
+    background-color: hsl(214, 41%, 96%);
+}
+
+.details-section > .content .data-grid td.value-column {
+    height: auto;
+    line-height: initial;
+    white-space: normal;
+}
+
+.details-section > .content .data-grid td.value-column > div {
+    white-space: normal;
+    word-break: break-all;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .details-section,
+    .details-section .details-section:not(.collapsed) > .header,
+    .details-section > .content > .group {
+        border-width: 0.5px !important;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js
new file mode 100644
index 000000000..3a4bbf7bf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.js
@@ -0,0 +1,155 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSection = class DetailsSection extends WebInspector.Object
+{
+    constructor(identifier, title, groups, optionsElement, defaultCollapsedSettingValue)
+    {
+        super();
+
+        console.assert(identifier);
+
+        this._element = document.createElement("div");
+        this._element.classList.add(identifier, "details-section");
+
+        this._headerElement = document.createElement("div");
+        this._headerElement.addEventListener("click", this._headerElementClicked.bind(this));
+        this._headerElement.className = "header";
+        this._element.appendChild(this._headerElement);
+
+        if (optionsElement instanceof HTMLElement) {
+            this._optionsElement = optionsElement;
+            this._optionsElement.classList.add("options");
+            this._optionsElement.addEventListener("mousedown", this._optionsElementMouseDown.bind(this));
+            this._optionsElement.addEventListener("mouseup", this._optionsElementMouseUp.bind(this));
+            this._headerElement.appendChild(this._optionsElement);
+        }
+
+        this._titleElement = document.createElement("span");
+        this._headerElement.appendChild(this._titleElement);
+
+        this._contentElement = document.createElement("div");
+        this._contentElement.className = "content";
+        this._element.appendChild(this._contentElement);
+
+        this._identifier = identifier;
+        this.title = title;
+        this.groups = groups || [new WebInspector.DetailsSectionGroup];
+
+        this._collapsedSetting = new WebInspector.Setting(identifier + "-details-section-collapsed", !!defaultCollapsedSettingValue);
+        this.collapsed = this._collapsedSetting.value;
+        this._expandedByUser = false;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get identifier()
+    {
+        return this._identifier;
+    }
+
+    get title()
+    {
+        return this._titleElement.textContent;
+    }
+
+    set title(title)
+    {
+        this._titleElement.textContent = title;
+    }
+
+    get collapsed()
+    {
+        return this._element.classList.contains(WebInspector.DetailsSection.CollapsedStyleClassName);
+    }
+
+    set collapsed(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.DetailsSection.CollapsedStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.DetailsSection.CollapsedStyleClassName);
+
+        this._collapsedSetting.value = flag || false;
+
+        this.dispatchEventToListeners(WebInspector.DetailsSection.Event.CollapsedStateChanged, {collapsed: this._collapsedSetting.value});
+    }
+
+    get groups()
+    {
+        return this._groups;
+    }
+
+    set groups(groups)
+    {
+        this._contentElement.removeChildren();
+
+        this._groups = groups || [];
+
+        for (var i = 0; i < this._groups.length; ++i)
+            this._contentElement.appendChild(this._groups[i].element);
+    }
+
+    get expandedByUser()
+    {
+        return this._expandedByUser;
+    }
+
+    // Private
+
+    _headerElementClicked(event)
+    {
+        if (event.target.isSelfOrDescendant(this._optionsElement))
+            return;
+
+        var collapsed = this.collapsed;
+        this.collapsed = !collapsed;
+        this._expandedByUser = collapsed;
+
+        this._element.scrollIntoViewIfNeeded(false);
+    }
+
+    _optionsElementMouseDown(event)
+    {
+        this._headerElement.classList.add(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
+    }
+
+    _optionsElementMouseUp(event)
+    {
+        this._headerElement.classList.remove(WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName);
+    }
+};
+
+WebInspector.DetailsSection.CollapsedStyleClassName = "collapsed";
+WebInspector.DetailsSection.MouseOverOptionsElementStyleClassName = "mouse-over-options-element";
+
+WebInspector.DetailsSection.Event = {
+    CollapsedStateChanged: "details-section-collapsed-state-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSectionDataGridRow.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionDataGridRow.js
new file mode 100644
index 000000000..964d6924b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionDataGridRow.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionDataGridRow = class DetailsSectionDataGridRow extends WebInspector.DetailsSectionRow
+{
+    constructor(dataGrid, emptyMessage)
+    {
+        super(emptyMessage);
+
+        this.element.classList.add("data-grid");
+
+        this.dataGrid = dataGrid;
+    }
+
+    // Public
+
+    get dataGrid()
+    {
+        return this._dataGrid;
+    }
+
+    set dataGrid(dataGrid)
+    {
+        if (this._dataGrid === dataGrid)
+            return;
+
+        this._dataGrid = dataGrid || null;
+
+        if (dataGrid) {
+            dataGrid.element.classList.add("inline");
+
+            this.hideEmptyMessage();
+            this.element.appendChild(dataGrid.element);
+        } else
+            this.showEmptyMessage();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSectionGroup.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionGroup.js
new file mode 100644
index 000000000..e5d904ab3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionGroup.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionGroup = class DetailsSectionGroup extends WebInspector.Object
+{
+    constructor(rows)
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.className = "group";
+
+        this.rows = rows || [];
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get rows()
+    {
+        return this._rows;
+    }
+
+    set rows(rows)
+    {
+        this._element.removeChildren();
+
+        this._rows = rows || [];
+
+        for (var i = 0; i < this._rows.length; ++i)
+            this._element.appendChild(this._rows[i].element);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSectionPropertiesRow.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionPropertiesRow.js
new file mode 100644
index 000000000..6c28008b0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionPropertiesRow.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionPropertiesRow = class DetailsSectionPropertiesRow extends WebInspector.DetailsSectionRow
+{
+    constructor(propertiesSection, emptyMessage)
+    {
+        super(emptyMessage);
+
+        this.element.classList.add("properties", WebInspector.SyntaxHighlightedStyleClassName);
+
+        this.propertiesSection = propertiesSection;
+    }
+
+    // Public
+
+    get propertiesSection()
+    {
+        return this._propertiesSection;
+    }
+
+    set propertiesSection(propertiesSection)
+    {
+        this._propertiesSection = propertiesSection || null;
+
+        if (propertiesSection) {
+            // Call expand to cause the section to populate.
+            propertiesSection.expand();
+
+            this.hideEmptyMessage();
+            this.element.appendChild(propertiesSection.element);
+        } else
+            this.showEmptyMessage();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSectionRow.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionRow.js
new file mode 100644
index 000000000..8e98df5fe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionRow.js
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionRow = class DetailsSectionRow extends WebInspector.Object
+{
+    constructor(emptyMessage)
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.className = "row";
+
+        this._emptyMessage = emptyMessage || "";
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get emptyMessage()
+    {
+        return this._emptyMessage;
+    }
+
+    set emptyMessage(emptyMessage)
+    {
+        this._emptyMessage = emptyMessage || "";
+
+        if (!this._element.childNodes.length)
+            this.showEmptyMessage();
+    }
+
+    showEmptyMessage()
+    {
+        this.element.classList.add(WebInspector.DetailsSectionRow.EmptyStyleClassName);
+
+        if (this._emptyMessage instanceof Node) {
+            this.element.removeChildren();
+            this.element.appendChild(this._emptyMessage);
+        } else
+            this.element.textContent = this._emptyMessage;
+    }
+
+    hideEmptyMessage()
+    {
+        this.element.classList.remove(WebInspector.DetailsSectionRow.EmptyStyleClassName);
+        this.element.removeChildren();
+    }
+};
+
+WebInspector.DetailsSectionRow.EmptyStyleClassName = "empty";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSectionSimpleRow.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionSimpleRow.js
new file mode 100644
index 000000000..b6beefc23
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionSimpleRow.js
@@ -0,0 +1,115 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionSimpleRow = class DetailsSectionSimpleRow extends WebInspector.DetailsSectionRow
+{
+    constructor(label, value)
+    {
+        super();
+
+        this.element.classList.add("simple");
+
+        this._labelElement = document.createElement("div");
+        this._labelElement.className = "label";
+        this.element.appendChild(this._labelElement);
+
+        this._valueElement = document.createElement("div");
+        this._valueElement.className = "value";
+        this.element.appendChild(this._valueElement);
+
+        // Workaround for <rdar://problem/12668870> Triple-clicking text within a
+        // <div> set to "display: table-cell" selects text outside the cell.
+        //
+        // On triple-click, adjust the selection range to include only the value
+        // element if the selection extends WebInspector.beyond it.
+        var valueElementClicked = function(event) {
+            event.stopPropagation();
+
+            if (event.detail < 3)
+                return;
+
+            var currentSelection = window.getSelection();
+            if (!currentSelection)
+                return;
+
+            var currentRange = currentSelection.getRangeAt(0);
+            if (!currentRange || currentRange.startContainer === currentRange.endContainer)
+                return;
+
+            var correctedRange = document.createRange();
+            correctedRange.selectNodeContents(event.currentTarget);
+            currentSelection.removeAllRanges();
+            currentSelection.addRange(correctedRange);
+        };
+        this._valueElement.addEventListener("click", valueElementClicked);
+
+        this.label = label;
+        this.value = value;
+    }
+
+    // Public
+
+    get label()
+    {
+        return this._labelElement.textContent;
+    }
+
+    set label(label)
+    {
+        this._labelElement.textContent = label;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    set value(value)
+    {
+        this._value = value || "";
+
+        if (this._value) {
+            this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName);
+
+            // If the value has space characters that cause word wrapping then we don't need the data class.
+            if (/[\s\u200b]/.test(this._value))
+                this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
+            else
+                this.element.classList.add(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
+        } else {
+            this.element.classList.add(WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName);
+            this.element.classList.remove(WebInspector.DetailsSectionSimpleRow.DataStyleClassName);
+        }
+
+        if (value instanceof Node) {
+            this._valueElement.removeChildren();
+            this._valueElement.appendChild(this._value);
+        } else
+            this._valueElement.textContent = this._value;
+    }
+};
+
+WebInspector.DetailsSectionSimpleRow.DataStyleClassName = "data";
+WebInspector.DetailsSectionSimpleRow.EmptyStyleClassName = "empty";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSectionTextRow.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionTextRow.js
new file mode 100644
index 000000000..5b8eb901c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSectionTextRow.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSectionTextRow = class DetailsSectionTextRow extends WebInspector.DetailsSectionRow
+{
+    constructor(text)
+    {
+        super();
+
+        this.element.classList.add("text");
+
+        this.element.textContent = text;
+    }
+
+    // Public
+
+    get text()
+    {
+        return this.element.textContent;
+    }
+
+    set text(text)
+    {
+        this.element.textContent = text;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js
new file mode 100644
index 000000000..b7537ba00
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DetailsSidebarPanel.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DetailsSidebarPanel = class DetailsSidebarPanel extends WebInspector.SidebarPanel
+{
+    constructor(identifier, displayName, singularDisplayName, element, dontCreateNavigationItem)
+    {
+        super(identifier, displayName, element);
+
+        this.element.classList.add("details");
+
+        if (!dontCreateNavigationItem)
+            this._navigationItem = new WebInspector.RadioButtonNavigationItem(identifier, displayName);
+    }
+
+    // Public
+
+    get navigationItem()
+    {
+        return this._navigationItem;
+    }
+
+    inspect(objects)
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        if (this._needsRefresh) {
+            this._needsRefresh = false;
+            this.refresh();
+        }
+    }
+
+    needsRefresh()
+    {
+        if (!this.selected) {
+            this._needsRefresh = true;
+            return;
+        }
+
+        this.refresh();
+    }
+
+    refresh()
+    {
+        // Implemented by subclasses.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
new file mode 100644
index 000000000..4bb739b89
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.css
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar .item.divider {
+    width: 1px;
+
+    background-image: linear-gradient(hsl(0, 0%, 74%), hsl(0, 0%, 74%));
+    background-size: 100% 16px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .navigation-bar .item.divider {
+        width: 0.5px;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.js
new file mode 100644
index 000000000..910c0448a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DividerNavigationItem.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DividerNavigationItem = class DividerNavigationItem extends WebInspector.NavigationItem
+{
+    constructor(identifier)
+    {
+        super(identifier);
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["divider"];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/Editing.css b/Source/WebInspectorUI/UserInterface/Views/Editing.css
new file mode 100644
index 000000000..eebdeee33
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Editing.css
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.editing {
+    -webkit-user-select: text;
+    box-shadow: hsla(0, 0%, 0%, 0.5) 3px 3px 4px;
+    outline: 1px solid hsl(0, 0%, 65%) !important;
+    background-color: white;
+    -webkit-user-modify: read-write-plaintext-only;
+    text-overflow: clip !important;
+    padding-left: 2px;
+    margin-left: -2px;
+    padding-right: 2px;
+    margin-right: -2px;
+    margin-bottom: -1px;
+    padding-bottom: 1px;
+    opacity: 1.0 !important;
+}
+
+.editing.multiline {
+    white-space: pre-wrap;
+}
+
+.editing, .editing * {
+    color: black !important;
+    text-decoration: none !important;
+    cursor: default !important;
+}
+
+.editing br {
+    display: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js b/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js
new file mode 100644
index 000000000..3ad9224b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/EditingSupport.js
@@ -0,0 +1,329 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.isBeingEdited = function(element)
+{
+    while (element) {
+        if (element.__editing)
+            return true;
+        element = element.parentNode;
+    }
+
+    return false;
+};
+
+WebInspector.markBeingEdited = function(element, value)
+{
+    if (value) {
+        if (element.__editing)
+            return false;
+        element.__editing = true;
+        WebInspector.__editingCount = (WebInspector.__editingCount || 0) + 1;
+    } else {
+        if (!element.__editing)
+            return false;
+        delete element.__editing;
+        --WebInspector.__editingCount;
+    }
+    return true;
+};
+
+WebInspector.isEditingAnyField = function()
+{
+    return !!WebInspector.__editingCount;
+};
+
+WebInspector.isEventTargetAnEditableField = function(event)
+{
+    var textInputTypes = {"text": true, "search": true, "tel": true, "url": true, "email": true, "password": true};
+    if (event.target instanceof HTMLInputElement)
+        return event.target.type in textInputTypes;
+
+    var codeMirrorEditorElement = event.target.enclosingNodeOrSelfWithClass("CodeMirror");
+    if (codeMirrorEditorElement && codeMirrorEditorElement.CodeMirror)
+        return !codeMirrorEditorElement.CodeMirror.getOption("readOnly");
+
+    if (event.target instanceof HTMLTextAreaElement)
+        return true;
+
+    if (event.target.enclosingNodeOrSelfWithClass("text-prompt"))
+        return true;
+
+    if (WebInspector.isBeingEdited(event.target))
+        return true;
+
+    return false;
+};
+
+WebInspector.EditingConfig = class EditingConfig
+{
+    constructor(commitHandler, cancelHandler, context)
+    {
+        this.commitHandler = commitHandler;
+        this.cancelHandler = cancelHandler;
+        this.context = context;
+        this.spellcheck = false;
+    }
+
+    setPasteHandler(pasteHandler)
+    {
+        this.pasteHandler = pasteHandler;
+    }
+
+    setMultiline(multiline)
+    {
+        this.multiline = multiline;
+    }
+
+    setCustomFinishHandler(customFinishHandler)
+    {
+        this.customFinishHandler = customFinishHandler;
+    }
+
+    setNumberCommitHandler(numberCommitHandler)
+    {
+        this.numberCommitHandler = numberCommitHandler;
+    }
+};
+
+WebInspector.startEditing = function(element, config)
+{
+    if (!WebInspector.markBeingEdited(element, true))
+        return null;
+
+    config = config || new WebInspector.EditingConfig(function() {}, function() {});
+    var committedCallback = config.commitHandler;
+    var cancelledCallback = config.cancelHandler;
+    var pasteCallback = config.pasteHandler;
+    var context = config.context;
+    var oldText = getContent(element);
+    var moveDirection = "";
+
+    element.classList.add("editing");
+
+    var oldSpellCheck = element.hasAttribute("spellcheck") ? element.spellcheck : undefined;
+    element.spellcheck = config.spellcheck;
+
+    if (config.multiline)
+        element.classList.add("multiline");
+
+    var oldTabIndex = element.tabIndex;
+    if (element.tabIndex < 0)
+        element.tabIndex = 0;
+
+    function blurEventListener() {
+        editingCommitted.call(element);
+    }
+
+    function getContent(element) {
+        if (element.tagName === "INPUT" && element.type === "text")
+            return element.value;
+        else
+            return element.textContent;
+    }
+
+    function cleanUpAfterEditing()
+    {
+        WebInspector.markBeingEdited(element, false);
+
+        this.classList.remove("editing");
+        this.scrollTop = 0;
+        this.scrollLeft = 0;
+
+        if (oldSpellCheck === undefined)
+            element.removeAttribute("spellcheck");
+        else
+            element.spellcheck = oldSpellCheck;
+
+        if (oldTabIndex === -1)
+            this.removeAttribute("tabindex");
+        else
+            this.tabIndex = oldTabIndex;
+
+        element.removeEventListener("blur", blurEventListener, false);
+        element.removeEventListener("keydown", keyDownEventListener, true);
+        if (pasteCallback)
+            element.removeEventListener("paste", pasteEventListener, true);
+
+        WebInspector.restoreFocusFromElement(element);
+    }
+
+    function editingCancelled()
+    {
+        if (this.tagName === "INPUT" && this.type === "text")
+            this.value = oldText;
+        else
+            this.textContent = oldText;
+
+        cleanUpAfterEditing.call(this);
+
+        cancelledCallback(this, context);
+    }
+
+    function editingCommitted()
+    {
+        cleanUpAfterEditing.call(this);
+
+        committedCallback(this, getContent(this), oldText, context, moveDirection);
+    }
+
+    function defaultFinishHandler(event)
+    {
+        var hasOnlyMetaModifierKey = event.metaKey && !event.shiftKey && !event.ctrlKey && !event.altKey;
+        if (isEnterKey(event) && (!config.multiline || hasOnlyMetaModifierKey))
+            return "commit";
+        else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode || event.keyIdentifier === "U+001B")
+            return "cancel";
+        else if (event.keyIdentifier === "U+0009") // Tab key
+            return "move-" + (event.shiftKey ? "backward" : "forward");
+        else if (event.altKey) {
+            if (event.keyIdentifier === "Up" || event.keyIdentifier === "Down")
+                return "modify-" + (event.keyIdentifier === "Up" ? "up" : "down");
+            if (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown")
+                return "modify-" + (event.keyIdentifier === "PageUp" ? "up-big" : "down-big");
+        }
+    }
+
+    function handleEditingResult(result, event)
+    {
+        if (result === "commit") {
+            editingCommitted.call(element);
+            event.preventDefault();
+            event.stopPropagation();
+        } else if (result === "cancel") {
+            editingCancelled.call(element);
+            event.preventDefault();
+            event.stopPropagation();
+        } else if (result && result.startsWith("move-")) {
+            moveDirection = result.substring(5);
+            if (event.keyIdentifier !== "U+0009")
+                blurEventListener();
+        } else if (result && result.startsWith("modify-")) {
+            let direction = result.substring(7);
+            let modifyValue = direction.startsWith("up") ? 1 : -1;
+            if (direction.endsWith("big"))
+                modifyValue *= 10;
+
+            if (event.shiftKey)
+                modifyValue *= 10;
+            else if (event.ctrlKey)
+                modifyValue /= 10;
+
+            let selection = element.ownerDocument.defaultView.getSelection();
+            if (!selection.rangeCount)
+                return;
+
+            let range = selection.getRangeAt(0);
+            if (!range.commonAncestorContainer.isSelfOrDescendant(element))
+                return false;
+
+            let wordRange = range.startContainer.rangeOfWord(range.startOffset, WebInspector.EditingSupport.StyleValueDelimiters, element);
+            let word = wordRange.toString();
+            let wordPrefix = "";
+            let wordSuffix = "";
+            let nonNumberInWord = /[^\d-\.]+/.exec(word);
+            if (nonNumberInWord) {
+                let nonNumberEndOffset = nonNumberInWord.index + nonNumberInWord[0].length;
+                if (range.startOffset > wordRange.startOffset + nonNumberInWord.index && nonNumberEndOffset < word.length && range.startOffset !== wordRange.startOffset) {
+                    wordPrefix = word.substring(0, nonNumberEndOffset);
+                    word = word.substring(nonNumberEndOffset);
+                } else {
+                    wordSuffix = word.substring(nonNumberInWord.index);
+                    word = word.substring(0, nonNumberInWord.index);
+                }
+            }
+
+            let matches = WebInspector.EditingSupport.CSSNumberRegex.exec(word);
+            if (!matches || matches.length !== 4)
+                return;
+
+            let replacement = matches[1] + (Math.round((parseFloat(matches[2]) + modifyValue) * 100) / 100) + matches[3];
+
+            selection.removeAllRanges();
+            selection.addRange(wordRange);
+            document.execCommand("insertText", false, wordPrefix + replacement + wordSuffix);
+
+            let container = range.commonAncestorContainer;
+            let startOffset = range.startOffset;
+            // This check is for the situation when the cursor is in the space between the
+            // opening quote of the attribute and the first character. In that spot, the
+            // commonAncestorContainer is actually the entire attribute node since `="` is
+            // added as a simple text node. Since the opening quote is immediately before
+            // the attribute, the node for that attribute must be the next sibling and the
+            // text of the attribute's value must be the first child of that sibling.
+            if (container.parentNode.classList.contains("editing")) {
+                container = container.nextSibling.firstChild;
+                startOffset = 0;
+            }
+            startOffset += wordPrefix.length;
+
+            if (!container)
+                return;
+
+            let replacementSelectionRange = document.createRange();
+            replacementSelectionRange.setStart(container, startOffset);
+            replacementSelectionRange.setEnd(container, startOffset + replacement.length);
+
+            selection.removeAllRanges();
+            selection.addRange(replacementSelectionRange);
+
+            if (typeof config.numberCommitHandler === "function")
+                config.numberCommitHandler(element, getContent(element), oldText, context, moveDirection);
+
+            event.preventDefault();
+        }
+    }
+
+    function pasteEventListener(event)
+    {
+        var result = pasteCallback(event);
+        handleEditingResult(result, event);
+    }
+
+    function keyDownEventListener(event)
+    {
+        var handler = config.customFinishHandler || defaultFinishHandler;
+        var result = handler(event);
+        handleEditingResult(result, event);
+    }
+
+    element.addEventListener("blur", blurEventListener, false);
+    element.addEventListener("keydown", keyDownEventListener, true);
+    if (pasteCallback)
+        element.addEventListener("paste", pasteEventListener, true);
+
+    element.focus();
+
+    return {
+        cancel: editingCancelled.bind(element),
+        commit: editingCommitted.bind(element)
+    };
+};
+
+WebInspector.EditingSupport = {
+    StyleValueDelimiters: " \xA0\t\n\"':;,/()",
+    CSSNumberRegex: /(.*?)(-?(?:\d+(?:\.\d+)?|\.\d+))(.*)/,
+    NumberRegex: /^(-?(?:\d+(?:\.\d+)?|\.\d+))$/
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js
new file mode 100644
index 000000000..a3a17baeb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js
@@ -0,0 +1,122 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ElementsTabContentView = class ElementsTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.ElementsTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.domNodeDetailsSidebarPanel, WebInspector.cssStyleDetailsSidebarPanel];
+
+        if (WebInspector.layerTreeDetailsSidebarPanel)
+            detailsSidebarPanels.push(WebInspector.layerTreeDetailsSidebarPanel);
+
+        super(identifier || "elements", "elements", tabBarItem, null, detailsSidebarPanels, true);
+
+        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        this._showDOMTreeContentView();
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Elements.svg",
+            title: WebInspector.UIString("Elements"),
+        };
+    }
+
+    static isTabAllowed()
+    {
+        return !!window.DOMAgent;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.ElementsTabContentView.Type;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.DOMTree;
+    }
+
+    showRepresentedObject(representedObject, cookie)
+    {
+        var domTreeContentView = this.contentBrowser.currentContentView;
+        console.assert(!domTreeContentView || domTreeContentView instanceof WebInspector.DOMTreeContentView);
+        if (!domTreeContentView || !(domTreeContentView instanceof WebInspector.DOMTreeContentView)) {
+            // FIXME: Remember inspected node for later when _mainFrameDidChange.
+            return;
+        }
+
+        if (!cookie || !cookie.nodeToSelect)
+            return;
+
+        domTreeContentView.selectAndRevealDOMNode(cookie.nodeToSelect);
+
+        // Because nodeToSelect is ephemeral, we don't want to keep
+        // it around in the back-forward history entries.
+        cookie.nodeToSelect = undefined;
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.frameResourceManager.removeEventListener(null, null, this);
+        WebInspector.Frame.removeEventListener(null, null, this);
+    }
+
+    // Private
+
+    _showDOMTreeContentView()
+    {
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+
+        var mainFrame = WebInspector.frameResourceManager.mainFrame;
+        if (mainFrame)
+            this.contentBrowser.showContentViewForRepresentedObject(mainFrame.domTree);
+    }
+
+    _mainFrameDidChange(event)
+    {
+        this._showDOMTreeContentView();
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this._showDOMTreeContentView();
+    }
+};
+
+WebInspector.ElementsTabContentView.Type = "elements";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
new file mode 100644
index 000000000..991595d19
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.css
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.error-object {
+    display: inline-block;
+}
+
+.error-object > .formatted-error::before {
+    display: inline-block;
+    vertical-align: baseline;
+    margin-bottom: -2px;
+    margin-right: 2px;
+    width: 13px;
+    height: 13px;
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-size: 13px 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+    content: "";
+}
+
+.error-object.expanded > .formatted-error::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.error-object-link-container {
+    color: hsla(0, 0%, 0%, 0.2);
+}
+
+.error-object.expanded > .formatted-error > .error-object-link-container {
+    display: none;
+}
+
+.error-object:not(.expanded) .tree-outline {
+    display: none;
+}
+
+.error-object .tree-outline {
+    padding-left: 16px
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js
new file mode 100644
index 000000000..0d3de1b86
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ErrorObjectView.js
@@ -0,0 +1,144 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ErrorObjectView = class ErrorObjectView extends WebInspector.Object
+{
+    constructor(object)
+    {
+        super();
+
+        console.assert(object instanceof WebInspector.RemoteObject && object.subtype === "error", object);
+
+        this._object = object;
+
+        this._expanded = false;
+        this._hasStackTrace = false;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("error-object");
+        var previewElement = WebInspector.FormattedValue.createElementForError(this._object);
+        this._element.append(previewElement);
+        previewElement.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
+
+        this._outlineElement = this._element.appendChild(document.createElement("div"));
+        this._outline = new WebInspector.TreeOutline(this._outlineElement);
+    }
+
+    // Static
+
+    static makeSourceLinkWithPrefix(sourceURL, lineNumber, columnNumber)
+    {
+        if (!sourceURL)
+            return null;
+
+        var span = document.createElement("span");
+        span.classList.add("error-object-link-container");
+        span.textContent = " — ";
+
+        var a = WebInspector.linkifyLocation(sourceURL, parseInt(lineNumber) - 1, parseInt(columnNumber));
+        a.classList.add("error-object-link");
+        span.appendChild(a);
+
+        return span;
+    }
+
+    // Public
+
+    get object()
+    {
+        return this._object;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get treeOutline()
+    {
+        return this._outline;
+    }
+
+    get expanded()
+    {
+        return this._expanded;
+    }
+
+    update()
+    {
+        this._object.getOwnPropertyDescriptorsAsObject(function(properties) {
+            console.assert(properties && properties.stack && properties.stack.value);
+
+            if (!this._hasStackTrace)
+                this._buildStackTrace(properties.stack.value.value);
+
+            this._hasStackTrace = true;
+        }.bind(this));
+    }
+
+    expand()
+    {
+        if (this._expanded)
+            return;
+
+        this._expanded = true;
+        this._element.classList.add("expanded");
+
+        this.update();
+    }
+
+    collapse()
+    {
+        if (!this._expanded)
+            return;
+
+        this._expanded = false;
+        this._element.classList.remove("expanded");
+    }
+
+    appendTitleSuffix(suffixElement)
+    {
+        this._element.insertBefore(suffixElement, this._outlineElement);
+    }
+
+    // Private
+
+    _handlePreviewOrTitleElementClick(event)
+    {
+        if (!this._expanded)
+            this.expand();
+        else
+            this.collapse();
+
+        event.stopPropagation();
+    }
+
+    _buildStackTrace(stackString)
+    {
+        var stackTrace = WebInspector.StackTrace.fromString(stackString);
+        var stackTraceElement = new WebInspector.StackTraceView(stackTrace).element;
+        this._outlineElement.appendChild(stackTraceElement);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/EventListenerSection.js b/Source/WebInspectorUI/UserInterface/Views/EventListenerSection.js
new file mode 100644
index 000000000..9670b67b8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/EventListenerSection.js
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.EventListenerSection = class EventListenerSection extends WebInspector.DetailsSection
+{
+    constructor(type, nodeId)
+    {
+        super(type + "-event-listener-section", type, [], null, true);
+
+        this.element.classList.add("event-listener-section");
+
+        this._nodeId = nodeId;
+    }
+
+    // Public
+
+    addListener(eventListener)
+    {
+        var groups = this.groups;
+        groups.push(new WebInspector.EventListenerSectionGroup(eventListener, this._nodeId));
+        this.groups = groups;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.css b/Source/WebInspectorUI/UserInterface/Views/EventListenerSectionGroup.css
index 00b18892e..00b18892e 100644
--- a/Source/WebInspectorUI/UserInterface/EventListenerSectionGroup.css
+++ b/Source/WebInspectorUI/UserInterface/Views/EventListenerSectionGroup.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/EventListenerSectionGroup.js b/Source/WebInspectorUI/UserInterface/Views/EventListenerSectionGroup.js
new file mode 100644
index 000000000..ee2477353
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/EventListenerSectionGroup.js
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.EventListenerSectionGroup = class EventListenerSectionGroup extends WebInspector.DetailsSectionGroup
+{
+    constructor(eventListener, nodeId)
+    {
+        super();
+
+        this._eventListener = eventListener;
+        this._nodeId = nodeId;
+
+        var rows = [];
+        rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Node"), this._nodeTextOrLink()));
+        rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Function"), this._functionTextOrLink()));
+        rows.push(new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Type"), this._type()));
+        this.rows = rows;
+    }
+
+    // Private
+
+    _nodeTextOrLink()
+    {
+        var node = this._eventListener.node;
+        console.assert(node);
+        if (!node)
+            return "";
+
+        if (node.nodeType() === Node.DOCUMENT_NODE)
+            return "document";
+
+        return WebInspector.linkifyNodeReference(node);
+    }
+
+    _type()
+    {
+        if (this._eventListener.useCapture)
+            return WebInspector.UIString("Capturing");
+
+        if (this._eventListener.isAttribute)
+            return WebInspector.UIString("Attribute");
+
+        return WebInspector.UIString("Bubbling");
+    }
+
+    _functionTextOrLink()
+    {
+        var match = this._eventListener.handlerBody.match(/function ([^\(]+?)\(/);
+        if (match) {
+            var anonymous = false;
+            var functionName = match[1];
+        } else {
+            var anonymous = true;
+            var functionName = WebInspector.UIString("(anonymous function)");
+        }
+
+        if (!this._eventListener.location)
+            return functionName;
+
+        var sourceCode = WebInspector.debuggerManager.scriptForIdentifier(this._eventListener.location.scriptId);
+        if (!sourceCode)
+            return functionName;
+
+        var sourceCodeLocation = sourceCode.createSourceCodeLocation(this._eventListener.location.lineNumber, this._eventListener.location.columnNumber || 0);
+        var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, anonymous);
+        if (anonymous)
+            return linkElement;
+
+        var fragment = document.createDocumentFragment();
+        fragment.append(linkElement, functionName);
+        return fragment;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/FilterBar.css b/Source/WebInspectorUI/UserInterface/Views/FilterBar.css
new file mode 100644
index 000000000..3d444b430
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FilterBar.css
@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.filter-bar {
+    display: flex;
+
+    height: 29px;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    background-color: var(--panel-background-color);
+}
+
+.filter-bar > .navigation-bar {
+    margin-top: 1px;
+}
+
+.filter-bar > .navigation-bar > .item {
+    padding: 0 0 3px 8px;
+}
+
+.filter-bar > input[type="search"] {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+
+    margin: 3px 6px 4px;
+    padding-top: 0;
+
+    outline: none;
+
+    -webkit-appearance: none;
+
+    border: 1px solid hsla(0, 0%, 0%, 0.25);
+    border-radius: 3px;
+    background-color: hsla(0, 0%, 100%, 0.2);
+    background-clip: padding-box;
+
+    height: 22px;
+}
+
+.filter-bar > input[type="search"]::-webkit-input-placeholder {
+    color: hsla(0, 0%, 0%, 0.35);
+}
+
+.filter-bar > input[type="search"]:focus { background-color: white; }
+
+.filter-bar > input[type="search"]::-webkit-search-decoration {
+    width: 13px;
+    height: 13px;
+
+    margin-left: 6px;
+    margin-right: 6px;
+
+    vertical-align: bottom;
+
+    background-image: url(../Images/FilterFieldGlyph.svg);
+
+    -webkit-appearance: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/FilterBar.js b/Source/WebInspectorUI/UserInterface/Views/FilterBar.js
new file mode 100644
index 000000000..2e7cc7e49
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FilterBar.js
@@ -0,0 +1,148 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FilterBar = class FilterBar extends WebInspector.Object
+{
+    constructor(element)
+    {
+        super();
+
+        this._element = element || document.createElement("div");
+        this._element.classList.add("filter-bar");
+
+        this._filtersNavigationBar = new WebInspector.NavigationBar;
+        this._element.appendChild(this._filtersNavigationBar.element);
+
+        this._filterFunctionsMap = new Map;
+
+        this._inputField = document.createElement("input");
+        this._inputField.type = "search";
+        this._inputField.spellcheck = false;
+        this._inputField.incremental = true;
+        this._inputField.addEventListener("search", this._handleFilterChanged.bind(this), false);
+        this._element.appendChild(this._inputField);
+
+        this._lastFilterValue = this.filters;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get placeholder()
+    {
+        return this._inputField.getAttribute("placeholder");
+    }
+
+    set placeholder(text)
+    {
+        this._inputField.setAttribute("placeholder", text);
+    }
+
+    get inputField()
+    {
+        return this._inputField;
+    }
+
+    get filters()
+    {
+        return {text: this._inputField.value, functions: [...this._filterFunctionsMap.values()]};
+    }
+
+    set filters(filters)
+    {
+        filters = filters || {};
+
+        var oldTextValue = this._inputField.value;
+        this._inputField.value = filters.text || "";
+        if (oldTextValue !== this._inputField.value)
+            this._handleFilterChanged();
+    }
+
+    addFilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight)
+    {
+        var filterBarButton = new WebInspector.FilterBarButton(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight);
+        filterBarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._handleFilterBarButtonClicked, this);
+        filterBarButton.addEventListener(WebInspector.FilterBarButton.Event.ActivatedStateToggled, this._handleFilterButtonToggled, this);
+        this._filtersNavigationBar.addNavigationItem(filterBarButton);
+        if (filterBarButton.activated) {
+            this._filterFunctionsMap.set(filterBarButton.identifier, filterBarButton.filterFunction);
+            this._handleFilterChanged();
+        }
+    }
+
+    hasActiveFilters()
+    {
+        return !!this._inputField.value || !!this._filterFunctionsMap.size;
+    }
+
+    hasFilterChanged()
+    {
+        var currentFunctions = this.filters.functions;
+
+        if (this._lastFilterValue.text !== this._inputField.value || this._lastFilterValue.functions.length !== currentFunctions.length)
+            return true;
+
+        for (var i = 0; i < currentFunctions.length; ++i) {
+            if (this._lastFilterValue.functions[i] !== currentFunctions[i])
+                return true;
+        }
+
+        return false;
+    }
+
+    // Private
+
+    _handleFilterBarButtonClicked(event)
+    {
+        var filterBarButton = event.target;
+        filterBarButton.toggle();
+    }
+
+    _handleFilterButtonToggled(event)
+    {
+        var filterBarButton = event.target;
+        if (filterBarButton.activated)
+            this._filterFunctionsMap.set(filterBarButton.identifier, filterBarButton.filterFunction);
+        else
+            this._filterFunctionsMap.delete(filterBarButton.identifier);
+        this._handleFilterChanged();
+    }
+
+    _handleFilterChanged()
+    {
+        if (this.hasFilterChanged()) {
+            this._lastFilterValue = this.filters;
+            this.dispatchEventToListeners(WebInspector.FilterBar.Event.FilterDidChange);
+        }
+    }
+};
+
+WebInspector.FilterBar.Event = {
+    FilterDidChange: "filter-bar-text-filter-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js b/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js
new file mode 100644
index 000000000..b954bb1f6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FilterBarButton.js
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FilterBarButton = class FilterBarButton extends WebInspector.ActivateButtonNavigationItem
+{
+    constructor(identifier, filterFunction, activatedByDefault, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, role)
+    {
+        super(identifier, defaultToolTip, activatedToolTip, image, imageWidth, imageHeight, role);
+
+        this._filterFunction = filterFunction;
+
+        this._activatedSetting = new WebInspector.Setting(identifier, activatedByDefault);
+
+        this.activated = !!this._activatedSetting.value;
+    }
+
+    // Public
+
+    get filterFunction()
+    {
+        return this._filterFunction;
+    }
+
+    toggle()
+    {
+        this.activated = !this.activated;
+        this._activatedSetting.value = this.activated;
+        this.dispatchEventToListeners(WebInspector.FilterBarButton.Event.ActivatedStateToggled);
+    }
+};
+
+WebInspector.FilterBarButton.Event = {
+    ActivatedStateToggled: "filter-bar-activated-state-toggled"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/FindBanner.css b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
new file mode 100644
index 000000000..e869f2353
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FindBanner.css
@@ -0,0 +1,228 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.find-banner {
+    border-bottom: 1px solid var(--border-color);
+
+    position: absolute;
+    top: -22px;
+    left: 0;
+    right: 0;
+    height: 22px;
+
+    text-align: right;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    transition-property: top;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in;
+
+    z-index: var(--z-index-header);
+}
+
+.find-banner.showing {
+    top: 0;
+    transition-timing-function: ease-out;
+}
+
+.no-find-banner-transition:matches(.find-banner, .supports-find-banner) {
+    transition-duration: 0 !important;
+}
+
+.supports-find-banner {
+    transition-property: top;
+    transition-duration: 200ms;
+    transition-timing-function: ease-in;
+}
+
+.supports-find-banner.showing-find-banner {
+    top: 22px !important;
+    transition-timing-function: ease-out;
+}
+
+.find-banner > :first-child {
+    margin-left: 8px !important;
+}
+
+.find-banner > :last-child {
+    margin-right: 8px !important;
+}
+
+.find-banner > input[type="search"] {
+    margin: 1px 4px;
+
+    width: 30vw;
+    min-width: 143px;
+    max-width: 210px;
+    height: 19px;
+
+    vertical-align: top;
+
+    -webkit-appearance: none;
+
+    outline: none;
+
+    border: 1px solid hsl(0, 0%, 57%);
+    border-radius: 4px;
+    background-color: white;
+}
+
+.find-banner > button {
+    margin: 1px 4px;
+
+    padding-left: 6px;
+    padding-right: 6px;
+
+    -webkit-appearance: none;
+
+    border-radius: 4px;
+    border: 1px solid hsl(0, 0%, 57%);
+
+    background-color: white;
+    background-image: none;
+    box-shadow: none;
+
+    line-height: 11px;
+
+    height: 19px;
+
+    text-align: center;
+    vertical-align: top;
+
+    outline-offset: -2px;
+}
+
+.find-banner > button > .glyph {
+    display: inline-block;
+
+    width: 7px;
+    height: 11px;
+}
+
+.find-banner > button:disabled > .glyph {
+    opacity: 0.65;
+}
+
+.find-banner > button:active:not(:disabled) {
+    border: 1px solid hsl(0, 0%, 55%);
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 85%));
+    box-shadow: hsla(0, 0%, 100%, 0.33) 0 1px 0, inset hsl(0, 0%, 64%) 0 1px 1px;
+}
+
+.find-banner > button:disabled {
+    border: 1px solid hsl(0, 0%, 76%);
+    background-image: none;
+}
+
+.find-banner > button.segmented.left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-right: 0;
+}
+
+.find-banner > button.segmented.left > .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#back-arrow-normal);
+}
+
+.find-banner > button.segmented.left:active:not(:disabled) > .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#back-arrow-active);
+}
+
+.find-banner > button.segmented.right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: -1px;
+}
+
+.find-banner > button.segmented.right > .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#forward-arrow-normal);
+    margin-left: 1px;
+}
+
+.find-banner > button.segmented.right:active:not(:disabled) > .glyph {
+    background-image: url(../Images/BackForwardArrows.svg#forward-arrow-active);
+}
+
+.find-banner > button.segmented {
+    min-width: 22px;
+    padding: 3px 6px 2px;
+}
+
+.find-banner > button.segmented > .glyph {
+    background-size: 7px 11px;
+    background-repeat: no-repeat;
+}
+
+.find-banner > button.segmented:active {
+    z-index: var(--z-index-header);
+    position: relative;
+}
+
+.find-banner > label {
+    margin: 0 6px;
+    line-height: 21px;
+}
+
+.find-banner.console-find-banner {
+    position: relative;
+    top: auto;
+    border: 0;
+}
+
+body .find-banner.console-find-banner {
+    flex-wrap: nowrap;
+}
+
+.find-banner.console-find-banner > input[type="search"] {
+    padding-top: 0;
+    margin: 1px 6px;
+    outline: none;
+    -webkit-appearance: none;
+    border: 1px solid hsla(0, 0%, 0%, 0.35);
+    border-radius: 3px;
+    background-color: hsla(0, 0%, 100%, 0.2);
+    background-clip: padding-box;
+    height: 22px;    
+}
+
+.find-banner.console-find-banner > input[type="search"]::-webkit-input-placeholder {
+    color: hsla(0, 0%, 0%, 0.35);
+}
+
+.find-banner.console-find-banner > input[type="search"]::-webkit-textfield-decoration-container {
+    margin-left: 4px;
+}
+
+.find-banner.console-find-banner > input[type="search"]:focus {
+    background-color: white;
+}
+
+/* Make the search field's background white when it is not focused and has content.
+   Needs to be a separate rule. See http://webkit.org/b/118162 */
+.find-banner.console-find-banner > input[type="search"]:not(:placeholder-shown) {
+    background-color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/FindBanner.js b/Source/WebInspectorUI/UserInterface/Views/FindBanner.js
new file mode 100644
index 000000000..ee0819f7a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FindBanner.js
@@ -0,0 +1,350 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FindBanner = class FindBanner extends WebInspector.NavigationItem
+{
+    constructor(delegate, className, fixed = false)
+    {
+        super();
+
+        this._delegate = delegate || null;
+
+        this.element.classList.add("find-banner");
+
+        if (className)
+            this.element.classList.add(className);
+
+        this._resultCountLabel = document.createElement("label");
+        this.element.appendChild(this._resultCountLabel);
+
+        this._previousResultButton = document.createElement("button");
+        this._previousResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
+        this._previousResultButton.classList.add(WebInspector.FindBanner.LeftSegmentButtonStyleClassName);
+        this._previousResultButton.disabled = true;
+        this._previousResultButton.addEventListener("click", this._previousResultButtonClicked.bind(this));
+        this.element.appendChild(this._previousResultButton);
+
+        var previousResultButtonGlyphElement = document.createElement("div");
+        previousResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
+        this._previousResultButton.appendChild(previousResultButtonGlyphElement);
+
+        this._nextResultButton = document.createElement("button");
+        this._nextResultButton.classList.add(WebInspector.FindBanner.SegmentedButtonStyleClassName);
+        this._nextResultButton.classList.add(WebInspector.FindBanner.RightSegmentButtonStyleClassName);
+        this._nextResultButton.disabled = true;
+        this._nextResultButton.addEventListener("click", this._nextResultButtonClicked.bind(this));
+        this.element.appendChild(this._nextResultButton);
+
+        var nextResultButtonGlyphElement = document.createElement("div");
+        nextResultButtonGlyphElement.classList.add(WebInspector.FindBanner.SegmentGlyphStyleClassName);
+        this._nextResultButton.appendChild(nextResultButtonGlyphElement);
+
+        this._inputField = document.createElement("input");
+        this._inputField.type = "search";
+        this._inputField.spellcheck = false;
+        this._inputField.incremental = true;
+        this._inputField.setAttribute("results", 5);
+        this._inputField.setAttribute("autosave", "inspector-search");
+        this._inputField.addEventListener("keydown", this._inputFieldKeyDown.bind(this), false);
+        this._inputField.addEventListener("keyup", this._inputFieldKeyUp.bind(this), false);
+        this._inputField.addEventListener("search", this._inputFieldSearch.bind(this), false);
+        this.element.appendChild(this._inputField);
+
+        if (fixed)
+            this._clearAndBlurKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._clearAndBlur.bind(this), this.element);
+        else {
+            let doneButtonElement = document.createElement("button");
+            doneButtonElement.textContent = WebInspector.UIString("Done");
+            doneButtonElement.addEventListener("click", this._doneButtonClicked.bind(this));
+            this.element.appendChild(doneButtonElement);
+            this._hideKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this.hide.bind(this), this.element);
+        }
+
+        this._numberOfResults = null;
+        this._searchBackwards = false;
+        this._searchKeyPressed = false;
+        this._previousSearchValue = "";
+
+        this._populateFindKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "E", this._populateSearchQueryFromSelection.bind(this));
+        this._populateFindKeyboardShortcut.implicitlyPreventsDefault = false;
+        this._findNextKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._nextResultButtonClicked.bind(this));
+        this._findPreviousKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "G", this._previousResultButtonClicked.bind(this));
+
+        this.disableKeyboardShortcuts();
+    }
+
+    // Public
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    set delegate(newDelegate)
+    {
+        this._delegate = newDelegate || null;
+    }
+
+    get inputField()
+    {
+        return this._inputField;
+    }
+
+    get searchQuery()
+    {
+        return this._inputField.value || "";
+    }
+
+    set searchQuery(query)
+    {
+        this._inputField.value = query || "";
+    }
+
+    get numberOfResults()
+    {
+        return this._numberOfResults;
+    }
+
+    set numberOfResults(numberOfResults)
+    {
+        if (numberOfResults === undefined || isNaN(numberOfResults))
+            numberOfResults = null;
+
+        this._numberOfResults = numberOfResults;
+
+        this._previousResultButton.disabled = this._nextResultButton.disabled = (numberOfResults <= 0);
+
+        if (numberOfResults === null)
+            this._resultCountLabel.textContent = "";
+        else if (numberOfResults <= 0)
+            this._resultCountLabel.textContent = WebInspector.UIString("Not found");
+        else if (numberOfResults === 1)
+            this._resultCountLabel.textContent = WebInspector.UIString("1 match");
+        else if (numberOfResults > 1)
+            this._resultCountLabel.textContent = WebInspector.UIString("%d matches").format(numberOfResults);
+    }
+
+    get targetElement()
+    {
+        return this._targetElement;
+    }
+
+    set targetElement(element)
+    {
+        function delayedWork()
+        {
+            oldTargetElement.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
+            this.element.classList.remove(WebInspector.FindBanner.NoTransitionStyleClassName);
+        }
+
+        if (this._targetElement) {
+            var oldTargetElement = this._targetElement;
+
+            this._targetElement.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
+            this._targetElement.classList.remove(WebInspector.FindBanner.SupportsFindBannerStyleClassName);
+            this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
+
+            this.element.classList.add(WebInspector.FindBanner.NoTransitionStyleClassName);
+            this.element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
+
+            // Delay so we can remove the no transition style class after the other style changes are committed.
+            setTimeout(delayedWork.bind(this), 0);
+        }
+
+        this._targetElement = element || null;
+
+        if (this._targetElement)
+            this._targetElement.classList.add(WebInspector.FindBanner.SupportsFindBannerStyleClassName);
+    }
+
+    get showing()
+    {
+        return this.element.classList.contains(WebInspector.FindBanner.ShowingStyleClassName);
+    }
+
+    focus()
+    {
+        // FIXME: Workaround for: <https://webkit.org/b/149504> Caret missing from <input> after clearing text and calling select()
+        if (!this._inputField.value.length)
+            this._inputField.focus();
+        else
+            this._inputField.select();
+    }
+
+    _clearAndBlur()
+    {
+        this.numberOfResults = null;
+
+        this._inputField.value = "";
+        this._previousSearchValue = "";
+
+        if (this._delegate.findBannerSearchCleared)
+            this._delegate.findBannerSearchCleared();
+        if (this._delegate.findBannerWantsToClearAndBlur)
+            this._delegate.findBannerWantsToClearAndBlur();
+    }
+
+    show()
+    {
+        console.assert(this._targetElement);
+        if (!this._targetElement)
+            return;
+
+        console.assert(this._targetElement.parentNode);
+        if (!this._targetElement.parentNode)
+            return;
+
+        if (this.element.parentNode !== this._targetElement.parentNode)
+            this._targetElement.parentNode.insertBefore(this.element, this._targetElement);
+
+        function delayedWork()
+        {
+            this._targetElement.classList.add(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
+            this.element.classList.add(WebInspector.FindBanner.ShowingStyleClassName);
+
+            this._inputField.select();
+        }
+
+        // Delay adding the classes in case the target element and/or the find banner were just added to
+        // the document. Adding the class right away will prevent the animation from working the first time.
+        setTimeout(delayedWork.bind(this), 0);
+
+        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidShow);
+    }
+
+    hide()
+    {
+        console.assert(this._targetElement);
+        if (!this._targetElement)
+            return;
+
+        this._inputField.blur();
+
+        this._targetElement.classList.remove(WebInspector.FindBanner.ShowingFindBannerStyleClassName);
+        this.element.classList.remove(WebInspector.FindBanner.ShowingStyleClassName);
+
+        this.dispatchEventToListeners(WebInspector.FindBanner.Event.DidHide);
+    }
+
+    enableKeyboardShortcuts()
+    {
+        this._populateFindKeyboardShortcut.disabled = false;
+        this._findNextKeyboardShortcut.disabled = false;
+        this._findPreviousKeyboardShortcut.disabled = false;
+    }
+
+    disableKeyboardShortcuts()
+    {
+        this._populateFindKeyboardShortcut.disabled = true;
+        this._findNextKeyboardShortcut.disabled = true;
+        this._findPreviousKeyboardShortcut.disabled = true;
+    }
+
+    // Private
+
+    _inputFieldKeyDown(event)
+    {
+        if (event.keyIdentifier === "Shift")
+            this._searchBackwards = true;
+        else if (event.keyIdentifier === "Enter")
+            this._searchKeyPressed = true;
+    }
+
+    _inputFieldKeyUp(event)
+    {
+        if (event.keyIdentifier === "Shift")
+            this._searchBackwards = false;
+        else if (event.keyIdentifier === "Enter")
+            this._searchKeyPressed = false;
+    }
+
+    _inputFieldSearch(event)
+    {
+        if (this._inputField.value) {
+            if (this._previousSearchValue !== this.searchQuery) {
+                if (this._delegate && typeof this._delegate.findBannerPerformSearch === "function")
+                    this._delegate.findBannerPerformSearch(this, this.searchQuery);
+            } else if (this._searchKeyPressed && this._numberOfResults > 0) {
+                if (this._searchBackwards) {
+                    if (this._delegate && typeof this._delegate.findBannerRevealPreviousResult === "function")
+                        this._delegate.findBannerRevealPreviousResult(this);
+                } else {
+                    if (this._delegate && typeof this._delegate.findBannerRevealNextResult === "function")
+                        this._delegate.findBannerRevealNextResult(this);
+                }
+            }
+        } else {
+            this.numberOfResults = null;
+            if (this._delegate && typeof this._delegate.findBannerSearchCleared === "function")
+                this._delegate.findBannerSearchCleared(this);
+        }
+
+        this._previousSearchValue = this.searchQuery;
+    }
+
+    _populateSearchQueryFromSelection(event)
+    {
+        if (this._delegate && typeof this._delegate.findBannerSearchQueryForSelection === "function") {
+            var query = this._delegate.findBannerSearchQueryForSelection(this);
+            if (query) {
+                this.searchQuery = query;
+
+                if (this._delegate && typeof this._delegate.findBannerPerformSearch === "function")
+                    this._delegate.findBannerPerformSearch(this, this.searchQuery);
+            }
+        }
+    }
+
+    _previousResultButtonClicked(event)
+    {
+        if (this._delegate && typeof this._delegate.findBannerRevealPreviousResult === "function")
+            this._delegate.findBannerRevealPreviousResult(this);
+    }
+
+    _nextResultButtonClicked(event)
+    {
+        if (this._delegate && typeof this._delegate.findBannerRevealNextResult === "function")
+            this._delegate.findBannerRevealNextResult(this);
+    }
+
+    _doneButtonClicked(event)
+    {
+        this.hide();
+    }
+};
+
+WebInspector.FindBanner.SupportsFindBannerStyleClassName = "supports-find-banner";
+WebInspector.FindBanner.ShowingFindBannerStyleClassName = "showing-find-banner";
+WebInspector.FindBanner.NoTransitionStyleClassName = "no-find-banner-transition";
+WebInspector.FindBanner.ShowingStyleClassName = "showing";
+WebInspector.FindBanner.SegmentedButtonStyleClassName = "segmented";
+WebInspector.FindBanner.LeftSegmentButtonStyleClassName = "left";
+WebInspector.FindBanner.RightSegmentButtonStyleClassName = "right";
+WebInspector.FindBanner.SegmentGlyphStyleClassName = "glyph";
+
+WebInspector.FindBanner.Event = {
+    DidShow: "find-banner-did-show",
+    DidHide: "find-banner-did-hide"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.css
new file mode 100644
index 000000000..433db56ba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+:matches(.navigation-bar, .toolbar) .item.flexible-space {
+    flex: 1;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.js
new file mode 100644
index 000000000..85c9f0971
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FlexibleSpaceNavigationItem.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FlexibleSpaceNavigationItem = class FlexibleSpaceNavigationItem extends WebInspector.NavigationItem
+{
+    constructor(identifier)
+    {
+        super(identifier);
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["flexible-space"];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css b/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css
new file mode 100644
index 000000000..351da2f3a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FolderIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.folder-icon .icon {
+    content: -webkit-image-set(url(../Images/FolderGeneric.png) 1x, url(../Images/FolderGeneric@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js
new file mode 100644
index 000000000..6ee5d824c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FolderTreeElement.js
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FolderTreeElement = class FolderTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(title, subtitle, additionalClassNames, representedObject)
+    {
+        var classNames;
+        if (!additionalClassNames)
+            classNames = [];
+        else if (additionalClassNames.constructor === Array)
+            classNames = additionalClassNames;
+        else if (typeof additionalClassNames === "string")
+            classNames = [additionalClassNames];
+
+        classNames.unshift(WebInspector.FolderTreeElement.FolderIconStyleClassName);
+
+        super(classNames, title, subtitle, representedObject, true);
+    }
+
+    // No Methods or Properties
+};
+
+WebInspector.FolderTreeElement.FolderIconStyleClassName = "folder-icon";
diff --git a/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js
new file mode 100644
index 000000000..9030f4d9f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FolderizedTreeElement.js
@@ -0,0 +1,382 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FolderizedTreeElement = class FolderizedTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(classNames, title, subtitle, representedObject, hasChildren)
+    {
+        super(classNames, title, subtitle, representedObject, hasChildren);
+
+        this.shouldRefreshChildren = true;
+
+        this._folderExpandedSettingMap = new Map;
+        this._folderSettingsKey = "";
+        this._folderTypeMap = new Map;
+        this._folderizeSettingsMap = new Map;
+        this._groupedIntoFolders = false;
+        this._clearNewChildQueue();
+    }
+
+    // Public
+
+    get groupedIntoFolders()
+    {
+        return this._groupedIntoFolders;
+    }
+
+    set folderSettingsKey(x)
+    {
+        this._folderSettingsKey = x;
+    }
+
+    registerFolderizeSettings(type, folderDisplayName, validateRepresentedObjectCallback, countChildrenCallback, treeElementConstructor)
+    {
+        console.assert(type);
+        console.assert(folderDisplayName);
+        console.assert(typeof validateRepresentedObjectCallback === "function");
+        console.assert(typeof countChildrenCallback === "function");
+        console.assert(typeof treeElementConstructor === "function");
+
+        var settings = {
+            type,
+            folderDisplayName,
+            validateRepresentedObjectCallback,
+            countChildrenCallback,
+            treeElementConstructor
+        };
+
+        this._folderizeSettingsMap.set(type, settings);
+    }
+
+    // Overrides from TreeElement (Private).
+
+    removeChildren()
+    {
+        super.removeChildren();
+
+        this._clearNewChildQueue();
+
+        for (var folder of this._folderTypeMap.values())
+            folder.removeChildren();
+
+        this._folderExpandedSettingMap.clear();
+        this._folderTypeMap.clear();
+
+        this._groupedIntoFolders = false;
+    }
+
+    // Protected
+
+    addChildForRepresentedObject(representedObject)
+    {
+        var settings = this._settingsForRepresentedObject(representedObject);
+        console.assert(settings);
+        if (!settings) {
+            console.error("No settings for represented object", representedObject);
+            return;
+        }
+
+        if (!this.treeOutline) {
+            // Just mark as needing to update to avoid doing work that might not be needed.
+            this.shouldRefreshChildren = true;
+            return;
+        }
+
+        var childTreeElement = this.treeOutline.getCachedTreeElement(representedObject);
+        if (!childTreeElement)
+            childTreeElement = new settings.treeElementConstructor(representedObject);
+
+        this._addTreeElement(childTreeElement);
+    }
+
+    addRepresentedObjectToNewChildQueue(representedObject)
+    {
+        // This queue reduces flashing as resources load and change folders when their type becomes known.
+
+        this._newChildQueue.push(representedObject);
+        if (!this._newChildQueueTimeoutIdentifier)
+            this._newChildQueueTimeoutIdentifier = setTimeout(this._populateFromNewChildQueue.bind(this), WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval);
+    }
+
+    removeChildForRepresentedObject(representedObject)
+    {
+        this._removeRepresentedObjectFromNewChildQueue(representedObject);
+        this.updateParentStatus();
+
+        if (!this.treeOutline) {
+            // Just mark as needing to update to avoid doing work that might not be needed.
+            this.shouldRefreshChildren = true;
+            return;
+        }
+
+        // Find the tree element for the frame by using getCachedTreeElement
+        // to only get the item if it has been created already.
+        var childTreeElement = this.treeOutline.getCachedTreeElement(representedObject);
+        if (!childTreeElement || !childTreeElement.parent)
+            return;
+
+        this._removeTreeElement(childTreeElement);
+    }
+
+    compareChildTreeElements(a, b)
+    {
+        return this._compareTreeElementsByMainTitle(a, b);
+    }
+
+    updateParentStatus()
+    {
+        var hasChildren = false;
+        for (var settings of this._folderizeSettingsMap.values()) {
+            if (settings.countChildrenCallback()) {
+                hasChildren = true;
+                break;
+            }
+        }
+
+        this.hasChildren = hasChildren;
+        if (!this.hasChildren)
+            this.removeChildren();
+    }
+
+    prepareToPopulate()
+    {
+        if (!this._groupedIntoFolders && this._shouldGroupIntoFolders()) {
+            this._groupedIntoFolders = true;
+            return true;
+        }
+
+        return false;
+    }
+
+    // Private
+
+    _clearNewChildQueue()
+    {
+        this._newChildQueue = [];
+        if (this._newChildQueueTimeoutIdentifier) {
+            clearTimeout(this._newChildQueueTimeoutIdentifier);
+            this._newChildQueueTimeoutIdentifier = null;
+        }
+    }
+
+    _populateFromNewChildQueue()
+    {
+        if (!this.children.length) {
+            this.updateParentStatus();
+            this.shouldRefreshChildren = true;
+            return;
+        }
+
+        if (this.prepareToPopulate()) {
+            // Will now folderize, repopulate children.
+            this._clearNewChildQueue();
+            this.shouldRefreshChildren = true;
+            return;
+        }
+
+        for (var i = 0; i < this._newChildQueue.length; ++i)
+            this.addChildForRepresentedObject(this._newChildQueue[i]);
+
+        this._clearNewChildQueue();
+    }
+
+    _removeRepresentedObjectFromNewChildQueue(representedObject)
+    {
+        this._newChildQueue.remove(representedObject);
+    }
+
+    _addTreeElement(childTreeElement)
+    {
+        console.assert(childTreeElement);
+        if (!childTreeElement)
+            return;
+
+        var wasSelected = childTreeElement.selected;
+
+        this._removeTreeElement(childTreeElement, true, true);
+
+        var parentTreeElement = this._parentTreeElementForRepresentedObject(childTreeElement.representedObject);
+        if (parentTreeElement !== this && !parentTreeElement.parent)
+            this._insertFolderTreeElement(parentTreeElement);
+
+        this._insertChildTreeElement(parentTreeElement, childTreeElement);
+
+        if (wasSelected)
+            childTreeElement.revealAndSelect(true, false, true, true);
+    }
+
+    _compareTreeElementsByMainTitle(a, b)
+    {
+        return a.mainTitle.localeCompare(b.mainTitle);
+    }
+
+    _insertFolderTreeElement(folderTreeElement)
+    {
+        console.assert(this._groupedIntoFolders);
+        console.assert(!folderTreeElement.parent);
+        this.insertChild(folderTreeElement, insertionIndexForObjectInListSortedByFunction(folderTreeElement, this.children, this._compareTreeElementsByMainTitle));
+    }
+
+    _insertChildTreeElement(parentTreeElement, childTreeElement)
+    {
+        console.assert(!childTreeElement.parent);
+        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, this.compareChildTreeElements.bind(this)));
+    }
+
+    _removeTreeElement(childTreeElement, suppressOnDeselect, suppressSelectSibling)
+    {
+        var oldParent = childTreeElement.parent;
+        if (!oldParent)
+            return;
+
+        oldParent.removeChild(childTreeElement, suppressOnDeselect, suppressSelectSibling);
+
+        if (oldParent === this)
+            return;
+
+        console.assert(oldParent instanceof WebInspector.FolderTreeElement);
+        if (!(oldParent instanceof WebInspector.FolderTreeElement))
+            return;
+
+        // Remove the old parent folder if it is now empty.
+        if (!oldParent.children.length)
+            oldParent.parent.removeChild(oldParent);
+    }
+
+    _parentTreeElementForRepresentedObject(representedObject)
+    {
+        if (!this._groupedIntoFolders)
+            return this;
+
+        console.assert(this._folderSettingsKey !== "");
+
+        function createFolderTreeElement(type, displayName)
+        {
+            let folderTreeElement = new WebInspector.FolderTreeElement(displayName);
+            let folderExpandedSetting = new WebInspector.Setting(type + "-folder-expanded-" + this._folderSettingsKey, false);
+            this._folderExpandedSettingMap.set(folderTreeElement, folderExpandedSetting);
+
+            if (folderExpandedSetting.value)
+                folderTreeElement.expand();
+
+            folderTreeElement.onexpand = this._folderTreeElementExpandedStateChange.bind(this);
+            folderTreeElement.oncollapse = this._folderTreeElementExpandedStateChange.bind(this);
+            return folderTreeElement;
+        }
+
+        var settings = this._settingsForRepresentedObject(representedObject);
+        if (!settings) {
+            console.error("Unknown representedObject", representedObject);
+            return this;
+        }
+
+        var folder = this._folderTypeMap.get(settings.type);
+        if (folder)
+            return folder;
+
+        folder = createFolderTreeElement.call(this, settings.type, settings.folderDisplayName);
+        this._folderTypeMap.set(settings.type, folder);
+        return folder;
+    }
+
+    _folderTreeElementExpandedStateChange(folderTreeElement)
+    {
+        let expandedSetting = this._folderExpandedSettingMap.get(folderTreeElement);
+        console.assert(expandedSetting, "No expanded setting for folderTreeElement", folderTreeElement);
+        if (!expandedSetting)
+            return;
+
+        expandedSetting.value = folderTreeElement.expanded;
+    }
+
+    _settingsForRepresentedObject(representedObject)
+    {
+        for (var settings of this._folderizeSettingsMap.values()) {
+            if (settings.validateRepresentedObjectCallback(representedObject))
+                return settings;
+        }
+        return null;
+    }
+
+    _shouldGroupIntoFolders()
+    {
+        // Already grouped into folders, keep it that way.
+        if (this._groupedIntoFolders)
+            return true;
+
+        // Child objects are grouped into folders if one of two thresholds are met:
+        // 1) Once the number of medium categories passes NumberOfMediumCategoriesThreshold.
+        // 2) When there is a category that passes LargeChildCountThreshold and there are
+        //    any child objects in another category.
+
+        // Folders are avoided when there is only one category or most categories are small.
+
+        var numberOfSmallCategories = 0;
+        var numberOfMediumCategories = 0;
+        var foundLargeCategory = false;
+
+        function pushCategory(childCount)
+        {
+            if (!childCount)
+                return false;
+
+            // If this type has any resources and there is a known large category, make folders.
+            if (foundLargeCategory)
+                return true;
+
+            // If there are lots of this resource type, then count it as a large category.
+            if (childCount >= WebInspector.FolderizedTreeElement.LargeChildCountThreshold) {
+                // If we already have other resources in other small or medium categories, make folders.
+                if (numberOfSmallCategories || numberOfMediumCategories)
+                    return true;
+
+                foundLargeCategory = true;
+                return false;
+            }
+
+            // Check if this is a medium category.
+            if (childCount >= WebInspector.FolderizedTreeElement.MediumChildCountThreshold) {
+                // If this is the medium category that puts us over the maximum allowed, make folders.
+                return ++numberOfMediumCategories >= WebInspector.FolderizedTreeElement.NumberOfMediumCategoriesThreshold;
+            }
+
+            // This is a small category.
+            ++numberOfSmallCategories;
+            return false;
+        }
+
+        // Iterate over all the available child object types.
+        for (var settings of this._folderizeSettingsMap.values()) {
+            if (pushCategory(settings.countChildrenCallback()))
+                return true;
+        }
+        return false;
+    }
+};
+
+WebInspector.FolderizedTreeElement.MediumChildCountThreshold = 5;
+WebInspector.FolderizedTreeElement.LargeChildCountThreshold = 15;
+WebInspector.FolderizedTreeElement.NumberOfMediumCategoriesThreshold = 2;
+WebInspector.FolderizedTreeElement.NewChildQueueUpdateInterval = 500;
diff --git a/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
new file mode 100644
index 000000000..fb658a221
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.css
@@ -0,0 +1,100 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.resource.font {
+    display: flex;
+
+    justify-content: center;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.content-view.resource.font .preview {
+    font-size: 72px;
+    font-family: serif;
+
+    white-space: nowrap;
+
+ /* A border is used instead of padding or margin so when there is scrolling
+    overflow there will be space on all sides. It also avoids having to account
+    for the padding/margin in FontResourceContentView.siteToFit. */
+    border: 15px solid transparent;
+
+    margin: auto 0;
+}
+
+.content-view.resource.font .preview > .line {
+    border-left: 1px solid lightgrey;
+    border-right: 1px solid lightgrey;
+
+    margin-top: -1px; /* Causes adjacent .line elements to share one border instead of doubling up. */
+}
+
+.content-view.resource.font .preview > .line > .content {
+    display: inline-block;
+
+    width: 100%;
+
+    text-align: center;
+    text-rendering: optimizeLegibility;
+
+    -webkit-user-select: text;
+    cursor: text;
+}
+
+.content-view.resource.font .preview > .line > .metric {
+    display: inline-block;
+
+    width: 100%;
+    height: 1px;
+
+    margin-right: -100%; /* Causes this element to be zero width and draw behind the text. */
+}
+
+.content-view.resource.font .metric.top {
+    vertical-align: top;
+    background-color: lightgrey;
+}
+
+.content-view.resource.font .metric.baseline {
+    vertical-align: baseline;
+    background-color: lightblue;
+}
+
+.content-view.resource.font .metric.middle {
+    vertical-align: middle;
+    background-color: lightgreen;
+}
+
+.content-view.resource.font .metric.xheight {
+    vertical-align: 1ex;
+    background-color: pink;
+}
+
+.content-view.resource.font .metric.bottom {
+    vertical-align: bottom;
+    background-color: lightgrey;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.js b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.js
new file mode 100644
index 000000000..2e56a090b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FontResourceContentView.js
@@ -0,0 +1,152 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FontResourceContentView = class FontResourceContentView extends WebInspector.ResourceContentView
+{
+    constructor(resource)
+    {
+        super(resource, "font");
+
+        this._styleElement = null;
+        this._previewElement = null;
+    }
+
+    // Public
+
+    get previewElement()
+    {
+        return this._previewElement;
+    }
+
+    sizeToFit()
+    {
+        if (!this._previewElement)
+            return;
+
+        // Start at the maximum size and try progressively smaller font sizes until minimum is reached or the preview element is not as wide as the main element.
+        for (var fontSize = WebInspector.FontResourceContentView.MaximumFontSize; fontSize >= WebInspector.FontResourceContentView.MinimumFontSize; fontSize -= 5) {
+            this._previewElement.style.fontSize = fontSize + "px";
+            if (this._previewElement.offsetWidth <= this.element.offsetWidth)
+                break;
+        }
+    }
+
+    contentAvailable(content, base64Encoded)
+    {
+        this.element.removeChildren();
+
+        const uniqueFontName = "WebInspectorFontPreview" + (++WebInspector.FontResourceContentView._uniqueFontIdentifier);
+
+        var format = "";
+
+        // We need to specify a format when loading SVG fonts to make them work.
+        if (this.resource.mimeTypeComponents.type === "image/svg+xml")
+            format = " format(\"svg\")";
+
+        if (this._styleElement && this._styleElement.parentNode)
+            this._styleElement.parentNode.removeChild(this._styleElement);
+
+        this._fontObjectURL = this.resource.createObjectURL();
+
+        this._styleElement = document.createElement("style");
+        this._styleElement.textContent = "@font-face { font-family: \"" + uniqueFontName + "\"; src: url(" + this._fontObjectURL + ")" + format + "; }";
+
+        // The style element will be added when shown later if we are not visible now.
+        if (this.visible)
+            document.head.appendChild(this._styleElement);
+
+        this._previewElement = document.createElement("div");
+        this._previewElement.className = "preview";
+        this._previewElement.style.fontFamily = uniqueFontName;
+
+        function createMetricElement(className)
+        {
+            var metricElement = document.createElement("div");
+            metricElement.className = "metric " + className;
+            return metricElement;
+        }
+
+        var lines = WebInspector.FontResourceContentView.PreviewLines;
+        for (var i = 0; i < lines.length; ++i) {
+            var lineElement = document.createElement("div");
+            lineElement.className = "line";
+
+            lineElement.appendChild(createMetricElement("top"));
+            lineElement.appendChild(createMetricElement("xheight"));
+            lineElement.appendChild(createMetricElement("middle"));
+            lineElement.appendChild(createMetricElement("baseline"));
+            lineElement.appendChild(createMetricElement("bottom"));
+
+            var contentElement = document.createElement("div");
+            contentElement.className = "content";
+            contentElement.textContent = lines[i];
+            lineElement.appendChild(contentElement);
+
+            this._previewElement.appendChild(lineElement);
+        }
+
+        this.element.appendChild(this._previewElement);
+
+        this.sizeToFit();
+    }
+
+    shown()
+    {
+        // Add the style element since it is removed when hidden.
+        if (this._styleElement)
+            document.head.appendChild(this._styleElement);
+    }
+
+    hidden()
+    {
+        // Remove the style element so it will not stick around when this content view is destroyed.
+        if (this._styleElement && this._styleElement.parentNode)
+            this._styleElement.parentNode.removeChild(this._styleElement);
+    }
+
+    closed()
+    {
+        // This is a workaround for the fact that the browser does not send any events
+        // when a @font-face resource is loaded. So, we assume it could be needed until
+        // the content view is destroyed, as re-attaching the style element would cause
+        // the object URL to be resolved again.
+        if (this._fontObjectURL)
+            URL.revokeObjectURL(this._fontObjectURL);
+    }
+
+    // Protected
+
+    layout()
+    {
+        this.sizeToFit();
+    }
+}
+
+WebInspector.FontResourceContentView._uniqueFontIdentifier = 0;
+
+WebInspector.FontResourceContentView.PreviewLines = ["ABCDEFGHIJKLM", "NOPQRSTUVWXYZ", "abcdefghijklm", "nopqrstuvwxyz", "1234567890"];
+
+WebInspector.FontResourceContentView.MaximumFontSize = 72;
+WebInspector.FontResourceContentView.MinimumFontSize = 12;
diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
new file mode 100644
index 000000000..15152e1a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css
@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.formatted-object, .formatted-node, .formatted-error, .formatted-map, .formatted-set, .formatted-weakmap, .formatted-weakset {
+    position: relative;
+    display: inline-block;
+    color: black;
+}
+
+:matches(.formatted-array, .formatted-map, .formatted-set, .formatted-weakmap, .formatted-weakset) > .size {
+    font-style: normal;
+    color: var(--console-secondary-text-color);
+}
+
+.formatted-number {
+    color: var(--syntax-highlight-number-color);
+}
+
+.formatted-boolean {
+    color: var(--syntax-highlight-boolean-color);
+}
+
+.formatted-string, .formatted-regexp {
+    white-space: pre;
+}
+
+.formatted-string {
+    color: var(--syntax-highlight-string-color);
+}
+
+.formatted-regexp {
+    color: var(--syntax-highlight-regexp-color);
+}
+
+.formatted-symbol {
+    color: var(--syntax-highlight-symbol-color);
+}
+
+.formatted-null, .formatted-undefined {
+    color: hsl(0, 0%, 50%);
+}
+
+.formatted-node > .tree-outline.dom {
+    display: block !important;
+    padding: 0;
+    margin-left: -2px;
+}
+
+.formatted-node > .tree-outline.dom ol {
+    -webkit-padding-start: 1.2em;
+}
+
+.formatted-node > .tree-outline.dom li {
+    -webkit-user-select: none !important;
+}
+
+.formatted-node > .tree-outline.dom li.hovered:not(.selected) .selection {
+    display: block;
+    left: -1px;
+    right: -2px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
new file mode 100644
index 000000000..352f44f79
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.js
@@ -0,0 +1,241 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FormattedValue = {};
+
+WebInspector.FormattedValue.classNameForTypes = function(type, subtype)
+{
+    return "formatted-" + (subtype ? subtype : type);
+};
+
+WebInspector.FormattedValue.classNameForObject = function(object)
+{
+    return WebInspector.FormattedValue.classNameForTypes(object.type, object.subtype);
+};
+
+WebInspector.FormattedValue.createLinkifiedElementString = function(string)
+{
+    var span = document.createElement("span");
+    span.className = "formatted-string";
+    span.append("\"", WebInspector.linkifyStringAsFragment(string.replace(/"/g, "\\\"")), "\"");
+    return span;
+};
+
+WebInspector.FormattedValue.createElementForNode = function(object)
+{
+    var span = document.createElement("span");
+    span.className = "formatted-node";
+
+    object.pushNodeToFrontend(function(nodeId) {
+        if (!nodeId) {
+            span.textContent = object.description;
+            return;
+        }
+
+        var treeOutline = new WebInspector.DOMTreeOutline;
+        treeOutline.setVisible(true);
+        treeOutline.rootDOMNode = WebInspector.domTreeManager.nodeForId(nodeId);
+        if (!treeOutline.children[0].hasChildren)
+            treeOutline.element.classList.add("single-node");
+        span.appendChild(treeOutline.element);
+    });
+
+    return span;
+};
+
+WebInspector.FormattedValue.createElementForError = function(object)
+{
+    var span = document.createElement("span");
+    span.classList.add("formatted-error");
+    span.textContent = object.description;
+
+    if (!object.preview)
+        return span;
+
+    function previewToObject(preview)
+    {
+        var result = {};
+        for (var property of preview.propertyPreviews)
+            result[property.name] = property.value;
+
+        return result;
+    }
+
+    var preview = previewToObject(object.preview);
+    if (!preview.sourceURL)
+        return span;
+
+    var sourceLinkWithPrefix = WebInspector.ErrorObjectView.makeSourceLinkWithPrefix(preview.sourceURL, preview.line, preview.column);
+    span.append(sourceLinkWithPrefix);
+    return span;
+};
+
+WebInspector.FormattedValue.createElementForNodePreview = function(preview)
+{
+    var value = preview.value;
+    var span = document.createElement("span");
+    span.className = "formatted-node-preview syntax-highlighted";
+
+    // Comment node preview.
+    if (value.startsWith("<!--")) {
+        var comment = span.appendChild(document.createElement("span"));
+        comment.className = "html-comment";
+        comment.textContent = value;
+        return span;
+    }
+
+    // Doctype node preview.
+    if (value.startsWith("<!DOCTYPE")) {
+        var doctype = span.appendChild(document.createElement("span"));
+        doctype.className = "html-doctype";
+        doctype.textContent = value;
+        return span;
+    }
+
+    // Element node previews have a very strict format, with at most a single attribute.
+    // We can style it up like a DOMNode without interactivity.
+    var matches = value.match(/^<(\S+?)(?: (\S+?)="(.*?)")?>$/);
+
+    // Remaining node types are often #text, #document, etc, with attribute nodes potentially being any string.
+    if (!matches) {
+        console.assert(!value.startsWith("<"), "Unexpected node preview format: " + value);
+        span.textContent = value;
+        return span;
+    }
+
+    var tag = document.createElement("span");
+    tag.className = "html-tag";
+    tag.append("<");
+
+    var tagName = tag.appendChild(document.createElement("span"));
+    tagName.className = "html-tag-name";
+    tagName.textContent = matches[1];
+
+    if (matches[2]) {
+        tag.append(" ");
+        var attribute = tag.appendChild(document.createElement("span"));
+        attribute.className = "html-attribute";
+        var attributeName = attribute.appendChild(document.createElement("span"));
+        attributeName.className = "html-attribute-name";
+        attributeName.textContent = matches[2];
+        attribute.append("=\"");
+        var attributeValue = attribute.appendChild(document.createElement("span"));
+        attributeValue.className = "html-attribute-value";
+        attributeValue.textContent = matches[3];
+        attribute.append("\"");
+    }
+
+    tag.append(">");
+    span.appendChild(tag);
+
+    return span;
+};
+
+WebInspector.FormattedValue.createElementForTypesAndValue = function(type, subtype, displayString, size, isPreview, hadException)
+{
+    var span = document.createElement("span");
+    span.classList.add(WebInspector.FormattedValue.classNameForTypes(type, subtype));
+
+    // Exception.
+    if (hadException) {
+        span.textContent = "[Exception: " + displayString + "]";
+        return span;
+    }
+
+    // String: quoted and replace newlines as nice unicode symbols.
+    if (type === "string") {
+        displayString = displayString.truncate(WebInspector.FormattedValue.MAX_PREVIEW_STRING_LENGTH);
+        span.textContent = doubleQuotedString(displayString.replace(/\n/g, "\u21B5"));
+        return span;
+    }
+
+    // Function: if class, show the description, otherwise elide in previews.
+    if (type === "function") {
+        if (subtype === "class")
+            span.textContent = displayString;
+        else
+            span.textContent = isPreview ? "function" : displayString;
+        return span;
+    }
+
+    // Everything else, the description/value string.
+    span.textContent = displayString;
+
+    // If there is a size, include it.
+    if (size !== undefined && (subtype === "array" || subtype === "set" || subtype === "map" || subtype === "weakmap" || subtype === "weakset")) {
+        var sizeElement = span.appendChild(document.createElement("span"));
+        sizeElement.className = "size";
+        sizeElement.textContent = " (" + size + ")";
+    }
+
+    return span;
+};
+
+WebInspector.FormattedValue.createElementForRemoteObject = function(object, hadException)
+{
+    return WebInspector.FormattedValue.createElementForTypesAndValue(object.type, object.subtype, object.description, object.size, false, hadException);
+};
+
+WebInspector.FormattedValue.createElementForObjectPreview = function(objectPreview)
+{
+    return WebInspector.FormattedValue.createElementForTypesAndValue(objectPreview.type, objectPreview.subtype, objectPreview.description, objectPreview.size, true, false);
+};
+
+WebInspector.FormattedValue.createElementForPropertyPreview = function(propertyPreview)
+{
+    return WebInspector.FormattedValue.createElementForTypesAndValue(propertyPreview.type, propertyPreview.subtype, propertyPreview.value, undefined, true, false);
+};
+
+WebInspector.FormattedValue.createObjectPreviewOrFormattedValueForRemoteObject = function(object, previewViewMode)
+{
+    if (object.subtype === "node")
+        return WebInspector.FormattedValue.createElementForNode(object);
+
+    if (object.subtype === "error")
+        return WebInspector.FormattedValue.createElementForError(object);
+
+    if (object.preview)
+        return new WebInspector.ObjectPreviewView(object.preview, previewViewMode);
+
+    return WebInspector.FormattedValue.createElementForRemoteObject(object);
+};
+
+WebInspector.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject = function(object, propertyPath, forceExpanding)
+{
+    if (object.subtype === "node")
+        return WebInspector.FormattedValue.createElementForNode(object);
+
+    if (object.subtype === "null")
+        return WebInspector.FormattedValue.createElementForRemoteObject(object);
+
+    if (object.type === "object" || object.subtype === "class") {
+        var objectTree = new WebInspector.ObjectTreeView(object, null, propertyPath, forceExpanding);
+        return objectTree.element;
+    }
+
+    return WebInspector.FormattedValue.createElementForRemoteObject(object);
+};
+
+WebInspector.FormattedValue.MAX_PREVIEW_STRING_LENGTH = 140;
diff --git a/Source/WebInspectorUI/UserInterface/Views/FrameDOMTreeContentView.js b/Source/WebInspectorUI/UserInterface/Views/FrameDOMTreeContentView.js
new file mode 100644
index 000000000..dc13c114f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FrameDOMTreeContentView.js
@@ -0,0 +1,84 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FrameDOMTreeContentView = class FrameDOMTreeContentView extends WebInspector.DOMTreeContentView
+{
+    constructor(domTree)
+    {
+        console.assert(domTree instanceof WebInspector.DOMTree, domTree);
+
+        super(domTree);
+
+        this._domTree = domTree;
+        this._domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
+
+        this._requestRootDOMNode();
+    }
+
+    // Public
+
+    get domTree()
+    {
+        return this._domTree;
+    }
+
+    closed()
+    {
+        this._domTree.removeEventListener(null, null, this);
+
+        super.closed();
+    }
+
+    getSearchContextNodes(callback)
+    {
+        this._domTree.requestRootDOMNode(function(rootDOMNode) {
+            callback([rootDOMNode.id]);
+        });
+    }
+
+    // Private
+
+    _rootDOMNodeAvailable(rootDOMNode)
+    {
+        this.domTreeOutline.rootDOMNode = rootDOMNode;
+
+        if (!rootDOMNode) {
+            this.domTreeOutline.selectDOMNode(null, false);
+            return;
+        }
+
+        this._restoreSelectedNodeAfterUpdate(this._domTree.frame.url, rootDOMNode.body || rootDOMNode.documentElement || rootDOMNode.firstChild);
+    }
+
+    _rootDOMNodeInvalidated(event)
+    {
+        this._requestRootDOMNode();
+    }
+
+    _requestRootDOMNode()
+    {
+        this._domTree.requestRootDOMNode(this._rootDOMNodeAvailable.bind(this));
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js
new file mode 100644
index 000000000..af3e3ae21
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js
@@ -0,0 +1,268 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.FrameTreeElement = class FrameTreeElement extends WebInspector.ResourceTreeElement
+{
+    constructor(frame, representedObject)
+    {
+        console.assert(frame instanceof WebInspector.Frame);
+
+        super(frame.mainResource, representedObject || frame);
+
+        this._frame = frame;
+
+        this._updateExpandedSetting();
+
+        frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+        frame.addEventListener(WebInspector.Frame.Event.ResourceWasAdded, this._resourceWasAdded, this);
+        frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._resourceWasRemoved, this);
+        frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasAdded, this._childFrameWasAdded, this);
+        frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._childFrameWasRemoved, this);
+
+        frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasAdded, this._childContentFlowWasAdded, this);
+        frame.domTree.addEventListener(WebInspector.DOMTree.Event.ContentFlowWasRemoved, this._childContentFlowWasRemoved, this);
+        frame.domTree.addEventListener(WebInspector.DOMTree.Event.RootDOMNodeInvalidated, this._rootDOMNodeInvalidated, this);
+
+        if (this._frame.isMainFrame())
+            this._downloadingPage = false;
+
+        this.shouldRefreshChildren = true;
+        this.folderSettingsKey = this._frame.url.hash;
+
+        this.registerFolderizeSettings("frames", WebInspector.UIString("Frames"),
+            function(representedObject) { return representedObject instanceof WebInspector.Frame; },
+            function() { return this.frame.childFrames.length; }.bind(this),
+            WebInspector.FrameTreeElement
+        );
+
+        this.registerFolderizeSettings("flows", WebInspector.UIString("Flows"),
+            function(representedObject) { return representedObject instanceof WebInspector.ContentFlow; },
+            function() { return this.frame.domTree.flowsCount; }.bind(this),
+            WebInspector.ContentFlowTreeElement
+        );
+
+        function makeValidateCallback(resourceType) {
+            return function(representedObject) {
+                return representedObject instanceof WebInspector.Resource && representedObject.type === resourceType;
+            };
+        }
+
+        function makeChildCountCallback(frame, resourceType) {
+            return function() {
+                return frame.resourcesWithType(resourceType).length;
+            };
+        }
+
+        for (var key in WebInspector.Resource.Type) {
+            var value = WebInspector.Resource.Type[key];
+            var folderName = WebInspector.Resource.displayNameForType(value, true);
+            this.registerFolderizeSettings(key, folderName,
+                makeValidateCallback(value),
+                makeChildCountCallback(this.frame, value),
+                WebInspector.ResourceTreeElement
+            );
+        }
+
+        this.updateParentStatus();
+    }
+
+    // Public
+
+    get frame()
+    {
+        return this._frame;
+    }
+
+    descendantResourceTreeElementTypeDidChange(resourceTreeElement, oldType)
+    {
+        // Called by descendant ResourceTreeElements.
+
+        // Add the tree element again, which will move it to the new location
+        // based on sorting and possible folder changes.
+        this._addTreeElement(resourceTreeElement);
+    }
+
+    descendantResourceTreeElementMainTitleDidChange(resourceTreeElement, oldMainTitle)
+    {
+        // Called by descendant ResourceTreeElements.
+
+        // Add the tree element again, which will move it to the new location
+        // based on sorting and possible folder changes.
+        this._addTreeElement(resourceTreeElement);
+    }
+
+    // Overrides from SourceCodeTreeElement.
+
+    updateSourceMapResources()
+    {
+        // Frames handle their own SourceMapResources.
+
+        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
+            return;
+
+        if (!this._frame)
+            return;
+
+        this.updateParentStatus();
+
+        if (this.resource && this.resource.sourceMaps.length)
+            this.shouldRefreshChildren = true;
+    }
+
+    onattach()
+    {
+        // Immediate superclasses are skipped, since Frames handle their own SourceMapResources.
+        WebInspector.GeneralTreeElement.prototype.onattach.call(this);
+    }
+
+    // Overrides from FolderizedTreeElement (Protected).
+
+    compareChildTreeElements(a, b)
+    {
+        if (a === b)
+            return 0;
+
+        var aIsResource = a instanceof WebInspector.ResourceTreeElement;
+        var bIsResource = b instanceof WebInspector.ResourceTreeElement;
+
+        if (aIsResource && bIsResource)
+            return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
+
+        if (!aIsResource && !bIsResource) {
+            // When both components are not resources then default to base class comparison.
+            return super.compareChildTreeElements(a, b);
+        }
+
+        // Non-resources should appear before the resources.
+        // FIXME: There should be a better way to group the elements by their type.
+        return aIsResource ? 1 : -1;
+    }
+
+    // Overrides from TreeElement (Private).
+
+    onpopulate()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+        this.updateParentStatus();
+        this.prepareToPopulate();
+
+        for (var i = 0; i < this._frame.childFrames.length; ++i)
+            this.addChildForRepresentedObject(this._frame.childFrames[i]);
+
+        for (var i = 0; i < this._frame.resources.length; ++i)
+            this.addChildForRepresentedObject(this._frame.resources[i]);
+
+        var sourceMaps = this.resource && this.resource.sourceMaps;
+        for (var i = 0; i < sourceMaps.length; ++i) {
+            var sourceMap = sourceMaps[i];
+            for (var j = 0; j < sourceMap.resources.length; ++j)
+                this.addChildForRepresentedObject(sourceMap.resources[j]);
+        }
+
+        var flowMap = this._frame.domTree.flowMap;
+        for (var flowKey in flowMap)
+            this.addChildForRepresentedObject(flowMap[flowKey]);
+
+    }
+
+    onexpand()
+    {
+        this._expandedSetting.value = true;
+        this._frame.domTree.requestContentFlowList();
+    }
+
+    oncollapse()
+    {
+        // Only store the setting if we have children, since setting hasChildren to false will cause a collapse,
+        // and we only care about user triggered collapses.
+        if (this.hasChildren)
+            this._expandedSetting.value = false;
+    }
+
+    // Private
+
+    _updateExpandedSetting()
+    {
+        this._expandedSetting = new WebInspector.Setting("frame-expanded-" + this._frame.url.hash, this._frame.isMainFrame() ? true : false);
+        if (this._expandedSetting.value)
+            this.expand();
+        else
+            this.collapse();
+    }
+
+    _mainResourceDidChange(event)
+    {
+        this._updateResource(this._frame.mainResource);
+
+        this.updateParentStatus();
+        this.removeChildren();
+
+        // Change the expanded setting since the frame URL has changed. Do this before setting shouldRefreshChildren, since
+        // shouldRefreshChildren will call onpopulate if expanded is true.
+        this._updateExpandedSetting();
+
+        this.shouldRefreshChildren = true;
+    }
+
+    _resourceWasAdded(event)
+    {
+        this.addRepresentedObjectToNewChildQueue(event.data.resource);
+    }
+
+    _resourceWasRemoved(event)
+    {
+        this.removeChildForRepresentedObject(event.data.resource);
+    }
+
+    _childFrameWasAdded(event)
+    {
+        this.addRepresentedObjectToNewChildQueue(event.data.childFrame);
+    }
+
+    _childFrameWasRemoved(event)
+    {
+        this.removeChildForRepresentedObject(event.data.childFrame);
+    }
+
+    _childContentFlowWasAdded(event)
+    {
+        this.addRepresentedObjectToNewChildQueue(event.data.flow);
+    }
+
+    _childContentFlowWasRemoved(event)
+    {
+        this.removeChildForRepresentedObject(event.data.flow);
+    }
+
+    _rootDOMNodeInvalidated()
+    {
+        if (this.expanded)
+            this._frame.domTree.requestContentFlowList();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
new file mode 100644
index 000000000..9fad47ddc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js
@@ -0,0 +1,368 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GeneralTreeElement = class GeneralTreeElement extends WebInspector.TreeElement
+{
+    constructor(classNames, title, subtitle, representedObject, hasChildren)
+    {
+        super("", representedObject, hasChildren);
+
+        this.classNames = classNames;
+
+        this._tooltipHandledSeparately = false;
+        this._mainTitle = title || "";
+        this._subtitle = subtitle || "";
+        this._status = "";
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._listItemNode;
+    }
+
+    get iconElement()
+    {
+        this._createElementsIfNeeded();
+        return this._iconElement;
+    }
+
+    get titlesElement()
+    {
+        this._createElementsIfNeeded();
+        return this._titlesElement;
+    }
+
+    get mainTitleElement()
+    {
+        this._createElementsIfNeeded();
+        return this._mainTitleElement;
+    }
+
+    get subtitleElement()
+    {
+        this._createElementsIfNeeded();
+        this._createSubtitleElementIfNeeded();
+        return this._subtitleElement;
+    }
+
+    get classNames()
+    {
+        return this._classNames;
+    }
+
+    set classNames(x)
+    {
+        x = x || [];
+
+        if (typeof x === "string")
+            x = [x];
+
+        if (Object.shallowEqual(this._classNames, x))
+            return;
+
+        if (this._listItemNode && this._classNames)
+            this._listItemNode.classList.remove(...this._classNames);
+
+        this._classNames = x;
+
+        if (this._listItemNode)
+            this._listItemNode.classList.add(...this._classNames);
+    }
+
+    addClassName(className)
+    {
+        if (this._classNames.includes(className))
+            return;
+
+        this._classNames.push(className);
+
+        if (this._listItemNode)
+            this._listItemNode.classList.add(className);
+    }
+
+    removeClassName(className)
+    {
+        if (!this._classNames.includes(className))
+            return;
+
+        this._classNames.remove(className);
+
+        if (this._listItemNode)
+            this._listItemNode.classList.remove(className);
+    }
+
+    get mainTitle()
+    {
+        return this._mainTitle;
+    }
+
+    set mainTitle(x)
+    {
+        x = x || "";
+
+        if (this._mainTitle === x)
+            return;
+
+        this._mainTitle = x;
+        this._updateTitleElements();
+        this.didChange();
+        this.dispatchEventToListeners(WebInspector.GeneralTreeElement.Event.MainTitleDidChange);
+    }
+
+    get subtitle()
+    {
+        return this._subtitle;
+    }
+
+    set subtitle(x)
+    {
+        x = x || "";
+
+        if (this._subtitle === x)
+            return;
+
+        this._subtitle = x;
+        this._updateTitleElements();
+        this.didChange();
+    }
+
+    get status()
+    {
+        return this._status;
+    }
+
+    set status(x)
+    {
+        x = x || "";
+
+        if (this._status === x)
+            return;
+
+        if (!this._statusElement) {
+            this._statusElement = document.createElement("div");
+            this._statusElement.className = WebInspector.GeneralTreeElement.StatusElementStyleClassName;
+        }
+
+        this._status = x;
+        this._updateStatusElement();
+    }
+
+    get filterableData()
+    {
+        return {text: [this.mainTitle, this.subtitle]};
+    }
+
+    get tooltipHandledSeparately()
+    {
+        return this._tooltipHandledSeparately;
+    }
+
+    set tooltipHandledSeparately(x)
+    {
+        this._tooltipHandledSeparately = !!x;
+    }
+
+    // Overrides from TreeElement (Private)
+
+    isEventWithinDisclosureTriangle(event)
+    {
+        return event.target === this._disclosureButton;
+    }
+
+    onattach()
+    {
+        this._createElementsIfNeeded();
+        this._updateTitleElements();
+
+        this._listItemNode.classList.add("item");
+
+        if (this._classNames)
+            this._listItemNode.classList.add(...this._classNames);
+
+        this._listItemNode.appendChild(this._disclosureButton);
+        this._listItemNode.appendChild(this._iconElement);
+        if (this._statusElement)
+            this._listItemNode.appendChild(this._statusElement);
+        this._listItemNode.appendChild(this._titlesElement);
+
+        if (this.oncontextmenu && typeof this.oncontextmenu === "function") {
+            this._boundContextMenuEventHandler = this.oncontextmenu.bind(this);
+            this._listItemNode.addEventListener("contextmenu", this._boundContextMenuEventHandler);
+        }
+
+        if (!this._boundContextMenuEventHandler && this.treeOutline.oncontextmenu && typeof this.treeOutline.oncontextmenu === "function") {
+            this._boundContextMenuEventHandler = function(event) { this.treeOutline.oncontextmenu(event, this); }.bind(this);
+            this._listItemNode.addEventListener("contextmenu", this._boundContextMenuEventHandler);
+        }
+    }
+
+    ondetach()
+    {
+        if (this._boundContextMenuEventHandler) {
+            this._listItemNode.removeEventListener("contextmenu", this._boundContextMenuEventHandler);
+            this._boundContextMenuEventHandler = null;
+        }
+    }
+
+    onreveal()
+    {
+        if (this._listItemNode)
+            this._listItemNode.scrollIntoViewIfNeeded(false);
+    }
+
+    // Protected
+
+    callFirstAncestorFunction(functionName, args)
+    {
+        // Call the first ancestor that implements a function named functionName (if any).
+        var currentNode = this.parent;
+        while (currentNode) {
+            if (typeof currentNode[functionName] === "function") {
+                currentNode[functionName].apply(currentNode, args);
+                break;
+            }
+
+            currentNode = currentNode.parent;
+        }
+    }
+
+    // Private
+
+    _createElementsIfNeeded()
+    {
+        if (this._createdElements)
+            return;
+
+        this._disclosureButton = document.createElement("button");
+        this._disclosureButton.className = WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName;
+
+        // Don't allow the disclosure button to be keyboard focusable. The TreeOutline is focusable and has
+        // its own keybindings for toggling expand and collapse.
+        this._disclosureButton.tabIndex = -1;
+
+        this._iconElement = document.createElement("img");
+        this._iconElement.className = WebInspector.GeneralTreeElement.IconElementStyleClassName;
+
+        this._titlesElement = document.createElement("div");
+        this._titlesElement.className = WebInspector.GeneralTreeElement.TitlesElementStyleClassName;
+
+        this._mainTitleElement = document.createElement("span");
+        this._mainTitleElement.className = WebInspector.GeneralTreeElement.MainTitleElementStyleClassName;
+        this._titlesElement.appendChild(this._mainTitleElement);
+
+        this._createdElements = true;
+    }
+
+    _createSubtitleElementIfNeeded()
+    {
+        if (this._subtitleElement)
+            return;
+
+        this._subtitleElement = document.createElement("span");
+        this._subtitleElement.className = WebInspector.GeneralTreeElement.SubtitleElementStyleClassName;
+        this._titlesElement.appendChild(this._subtitleElement);
+    }
+
+    _updateTitleElements()
+    {
+        if (!this._createdElements)
+            return;
+
+        if (typeof this._mainTitle === "string") {
+            if (this._mainTitleElement.textContent !== this._mainTitle)
+                this._mainTitleElement.textContent = this._mainTitle;
+        } else if (this._mainTitle instanceof Node) {
+            this._mainTitleElement.removeChildren();
+            this._mainTitleElement.appendChild(this._mainTitle);
+        }
+
+        if (typeof this._subtitle === "string" && this._subtitle) {
+            this._createSubtitleElementIfNeeded();
+            if (this._subtitleElement.textContent !== this._subtitle)
+                this._subtitleElement.textContent = this._subtitle;
+            this._titlesElement.classList.remove(WebInspector.GeneralTreeElement.NoSubtitleStyleClassName);
+        } else if (this._subtitle instanceof Node) {
+            this._createSubtitleElementIfNeeded();
+            this._subtitleElement.removeChildren();
+            this._subtitleElement.appendChild(this._subtitle);
+        } else {
+            if (this._subtitleElement)
+                this._subtitleElement.textContent = "";
+            this._titlesElement.classList.add(WebInspector.GeneralTreeElement.NoSubtitleStyleClassName);
+        }
+
+        // Set a default tooltip if there isn't a custom one already assigned.
+        if (!this.tooltip && !this._tooltipHandledSeparately)
+            this._updateTitleTooltip();
+    }
+
+    _updateTitleTooltip()
+    {
+        console.assert(this._listItemNode);
+        if (!this._listItemNode)
+            return;
+
+        // Get the textContent for the elements since they can contain other nodes,
+        // and the tool tip only cares about the text.
+        let mainTitleText = this._mainTitleElement.textContent;
+        let subtitleText = this._subtitleElement ? this._subtitleElement.textContent : "";
+        let large = this.treeOutline  && this.treeOutline.large;
+        if (mainTitleText && subtitleText)
+            this._listItemNode.title = mainTitleText + (large ? "\n" : " \u2014 ") + subtitleText;
+        else if (mainTitleText)
+            this._listItemNode.title = mainTitleText;
+        else
+            this._listItemNode.title = subtitleText;
+    }
+
+    _updateStatusElement()
+    {
+        if (!this._statusElement)
+            return;
+
+        if (!this._statusElement.parentNode && this._listItemNode)
+            this._listItemNode.insertBefore(this._statusElement, this._titlesElement);
+
+        if (this._status instanceof Node) {
+            this._statusElement.removeChildren();
+            this._statusElement.appendChild(this._status);
+        } else
+            this._statusElement.textContent = this._status;
+    }
+};
+
+WebInspector.GeneralTreeElement.DisclosureButtonStyleClassName = "disclosure-button";
+WebInspector.GeneralTreeElement.IconElementStyleClassName = "icon";
+WebInspector.GeneralTreeElement.StatusElementStyleClassName = "status";
+WebInspector.GeneralTreeElement.TitlesElementStyleClassName = "titles";
+WebInspector.GeneralTreeElement.MainTitleElementStyleClassName = "title";
+WebInspector.GeneralTreeElement.SubtitleElementStyleClassName = "subtitle";
+WebInspector.GeneralTreeElement.NoSubtitleStyleClassName = "no-subtitle";
+
+WebInspector.GeneralTreeElement.Event = {
+    MainTitleDidChange: "general-tree-element-main-title-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElementPathComponent.js b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElementPathComponent.js
new file mode 100644
index 000000000..4a1de05eb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElementPathComponent.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GeneralTreeElementPathComponent = class GeneralTreeElementPathComponent extends WebInspector.HierarchicalPathComponent
+{
+    constructor(generalTreeElement, representedObject)
+    {
+        super(generalTreeElement.mainTitle, generalTreeElement.classNames, representedObject || generalTreeElement.representedObject);
+
+        this._generalTreeElement = generalTreeElement;
+        generalTreeElement.addEventListener(WebInspector.GeneralTreeElement.Event.MainTitleDidChange, this._mainTitleDidChange, this);
+    }
+
+    // Public
+
+    get generalTreeElement()
+    {
+        return this._generalTreeElement;
+    }
+
+    get previousSibling()
+    {
+        var previousSibling = this._generalTreeElement.previousSibling;
+        while (previousSibling && previousSibling.hidden)
+            previousSibling = previousSibling.previousSibling;
+
+        if (!previousSibling)
+            return null;
+
+        return new WebInspector.GeneralTreeElementPathComponent(previousSibling);
+    }
+
+    get nextSibling()
+    {
+        var nextSibling = this._generalTreeElement.nextSibling;
+        while (nextSibling && nextSibling.hidden)
+            nextSibling = nextSibling.nextSibling;
+
+        if (!nextSibling)
+            return null;
+
+        return new WebInspector.GeneralTreeElementPathComponent(nextSibling);
+    }
+
+    // Private
+
+    _mainTitleDidChange(event)
+    {
+        this.displayName = this._generalTreeElement.mainTitle;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/GenericResourceContentView.js b/Source/WebInspectorUI/UserInterface/Views/GenericResourceContentView.js
new file mode 100644
index 000000000..3a5df70c7
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GenericResourceContentView.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GenericResourceContentView = class GenericResourceContentView extends WebInspector.ResourceContentView
+{
+    constructor(resource)
+    {
+        super(resource, "generic");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.css b/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.css
new file mode 100644
index 000000000..f778103e1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.css
@@ -0,0 +1,84 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.go-to-line-dialog {
+    position: relative;
+    left: 50%;
+    top: 50px;
+    width: calc(100% - 40px);
+    max-width: 452px;
+    height: 38px;
+    transform: translate(-50%, -50%);
+    padding: 3px;
+    border-radius: 5px;
+    background-color: hsla(0, 0%, 90%, 0.95);
+    border: 1px hsl(0, 0%, 85%) solid;
+    box-shadow: 1px 5px 20px 3px hsla(0, 0%, 0%, 0.33);
+}
+
+.go-to-line-dialog > div {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    background-color: white;
+    border: 1px hsl(0, 0%, 80%) solid;
+}
+
+.go-to-line-dialog > div > input {
+    position: absolute;
+    left: 2px;
+    right: 36px;
+    border: none;
+    background-color: transparent;
+    font-size: 20px;
+    color: hsl(0, 0%, 4%);
+    padding: 0 0 1px 5px;
+    outline: none;
+}
+
+.go-to-line-dialog > div > input::-webkit-input-placeholder {
+    color: hsl(0, 0%, 52%);
+}
+
+.go-to-line-dialog > div > img {
+    position: absolute;
+    top: 9px;
+    right: 12px;
+    padding: 2px;
+    border-radius: 9px;
+    width: 18px;
+    height: 18px;
+    background-color: hsl(0, 0%, 73%);
+    display: none;
+    content: url(../Images/CloseWhite.svg);
+}
+
+.go-to-line-dialog > div > img:active {
+    background-color: hsl(0, 0%, 54%);
+}
+
+.go-to-line-dialog.non-empty > div > img {
+    display: block;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.js b/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.js
new file mode 100644
index 000000000..02bfcc2da
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GoToLineDialog.js
@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GoToLineDialog = class GoToLineDialog extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.className = "go-to-line-dialog";
+
+        var field = this._element.appendChild(document.createElement("div"));
+
+        this._input = field.appendChild(document.createElement("input"));
+        this._input.type = "text";
+        this._input.placeholder = WebInspector.UIString("Line Number");
+        this._input.spellcheck = false;
+
+        this._clearIcon = field.appendChild(document.createElement("img"));
+
+        this._input.addEventListener("input", this);
+        this._input.addEventListener("keydown", this);
+        this._input.addEventListener("blur", this);
+        this._clearIcon.addEventListener("mousedown", this);
+        this._clearIcon.addEventListener("click", this);
+
+        this._dismissing = false;
+    }
+
+    // Public
+
+    present(parent)
+    {
+        parent.appendChild(this._element);
+        this._input.focus();
+        this._clear();
+    }
+
+    dismiss()
+    {
+        if (this._dismissing)
+            return;
+
+        var parent = this._element.parentNode;
+        if (!parent)
+            return;
+
+        this._dismissing = true;
+
+        parent.removeChild(this._element);
+
+        if (this.delegate && typeof this.delegate.goToLineDialogWasDismissed === "function")
+            this.delegate.goToLineDialogWasDismissed(this);
+
+        this._dismissing = false;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "input":
+            this._handleInputEvent(event);
+            break;
+        case "keydown":
+            this._handleKeydownEvent(event);
+            break;
+        case "blur":
+            this._handleBlurEvent(event);
+            break;
+        case "mousedown":
+            this._handleMousedownEvent(event);
+            break;
+        case "click":
+            this._handleClickEvent(event);
+            break;
+        }
+    }
+
+    // Private
+
+    _handleInputEvent(event)
+    {
+        if (this._input.value === "")
+            this._element.classList.remove(WebInspector.GoToLineDialog.NonEmptyClassName);
+        else
+            this._element.classList.add(WebInspector.GoToLineDialog.NonEmptyClassName);
+    }
+
+    _handleKeydownEvent(event)
+    {
+        if (event.keyCode === WebInspector.KeyboardShortcut.Key.Escape.keyCode) {
+            if (this._input.value === "")
+                this.dismiss();
+            else
+                this._clear();
+
+            event.preventDefault();
+        } else if (event.keyCode === WebInspector.KeyboardShortcut.Key.Enter.keyCode) {
+            var value = parseInt(this._input.value, 10);
+
+            var valueIsValid = false;
+            if (this.delegate && typeof this.delegate.isGoToLineDialogValueValid === "function")
+                valueIsValid = this.delegate.isGoToLineDialogValueValid(this, value);
+
+            if (valueIsValid && this.delegate && typeof this.delegate.goToLineDialogValueWasValidated === "function") {
+                this.delegate.goToLineDialogValueWasValidated(this, value);
+                this.dismiss();
+                return;
+            }
+
+            this._input.select();
+
+            InspectorFrontendHost.beep();
+        }
+    }
+
+    _handleBlurEvent(event)
+    {
+        this.dismiss();
+    }
+
+    _handleMousedownEvent(event)
+    {
+        this._input.select();
+        // This ensures we don't get a "blur" event triggered for the text field
+        // which would end up dimissing the dialog, which is not the intent.
+        event.preventDefault();
+    }
+
+    _handleClickEvent(event)
+    {
+        this._clear();
+    }
+
+    _clear()
+    {
+        this._input.value = "";
+        this._element.classList.remove(WebInspector.GoToLineDialog.NonEmptyClassName);
+    }
+};
+
+WebInspector.GoToLineDialog.NonEmptyClassName = "non-empty";
diff --git a/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css b/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css
new file mode 100644
index 000000000..844631812
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GradientEditor.css
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.gradient-editor {
+    position: relative;
+    margin: 5px 11px;
+    padding-bottom: 45px;
+}
+
+.gradient-editor.radial-gradient {
+    padding-bottom: 15px;
+}
+
+.gradient-editor.editing-color {
+    padding-bottom: 30px;
+}
+
+.gradient-editor.radial-gradient.editing-color {
+    padding-bottom: 0;
+}
+
+.gradient-editor > .gradient-type-select {
+    width: 237px;
+    margin-left: 1px;
+    font-size: 16px;
+}
+
+.gradient-editor > .gradient-slider {
+    position: relative;
+    left: auto;
+    margin-top: 7px;
+}
+
+.gradient-editor > .color-picker {
+    width: 238px;
+    height: auto;
+    margin-top: 25px;
+    padding: 0;
+}
+
+.gradient-editor > .color-picker > .slider {
+    top: 2px;
+    width: 186px;
+}
+
+.gradient-editor > .color-picker > .brightness {
+    left: 202px;
+}
+
+.gradient-editor > .color-picker > .opacity {
+    left: 228px;
+}
+
+.gradient-editor > .gradient-angle {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    text-align: right;
+    font-size: 13px;
+}
+
+.gradient-editor.radial-gradient > .gradient-angle {
+    display: none;
+}
+
+.gradient-editor > .gradient-angle > input {
+    width: 48px;
+    margin-left: 5px;
+    padding-right: 4px;
+    text-align: right;
+    font-size: 13px;
+    background-color: white;
+    border-radius: 4px;
+    border: 1px solid hsl(0, 0%, 60%);
+    box-shadow: inset 0 0 1px 1px hsl(0, 0%, 89%);
+    outline: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js b/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js
new file mode 100644
index 000000000..441701e1e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js
@@ -0,0 +1,229 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GradientEditor = class GradientEditor extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.classList.add("gradient-editor");
+
+        this._gradient = null;
+        this._gradientTypes = {
+            "linear-gradient": {
+                type: WebInspector.LinearGradient,
+                label: WebInspector.UIString("Linear Gradient"),
+                repeats: false
+            },
+            "radial-gradient": {
+                type: WebInspector.RadialGradient,
+                label: WebInspector.UIString("Radial Gradient"),
+                repeats: false
+            },
+            "repeating-linear-gradient": {
+                type: WebInspector.LinearGradient,
+                label: WebInspector.UIString("Repeating Linear Gradient"),
+                repeats: true
+            },
+            "repeating-radial-gradient": {
+                type: WebInspector.RadialGradient,
+                label: WebInspector.UIString("Repeating Radial Gradient"),
+                repeats: true
+            }
+        };
+        this._editingColor = false;
+
+        this._gradientTypePicker = this._element.appendChild(document.createElement("select"));
+        this._gradientTypePicker.classList.add("gradient-type-select");
+        for (let type in this._gradientTypes) {
+            let option = this._gradientTypePicker.appendChild(document.createElement("option"));
+            option.value = type;
+            option.text = this._gradientTypes[type].label;
+        }
+        this._gradientTypePicker.addEventListener("change", this._gradientTypeChanged.bind(this));
+
+        this._gradientSlider = new WebInspector.GradientSlider(this);
+        this._element.appendChild(this._gradientSlider.element);
+
+        this._colorPicker = new WebInspector.ColorPicker;
+        this._colorPicker.colorWheel.dimension = 190;
+        this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
+
+        let angleLabel = this._element.appendChild(document.createElement("label"));
+        angleLabel.classList.add("gradient-angle");
+        angleLabel.append(WebInspector.UIString("Angle"));
+
+        this._angleInput = angleLabel.appendChild(document.createElement("input"));
+        this._angleInput.type = "text";
+        this._angleInput.addEventListener("input", this._angleChanged.bind(this));
+
+        let dragToAdjustController = new WebInspector.DragToAdjustController(this);
+        dragToAdjustController.element = angleLabel;
+        dragToAdjustController.enabled = true;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    set gradient(gradient)
+    {
+        if (!gradient)
+            return;
+
+        const isLinear = gradient instanceof WebInspector.LinearGradient;
+        const isRadial = gradient instanceof WebInspector.RadialGradient;
+        console.assert(isLinear || isRadial);
+        if (!isLinear && !isRadial)
+            return;
+
+        this._gradient = gradient;
+        this._gradientSlider.stops = this._gradient.stops;
+        if (isLinear) {
+            this._gradientTypePicker.value = this._gradient.repeats ? "repeating-linear-gradient" : "linear-gradient";
+            this._angleInput.value = this._gradient.angle + "\u00B0";
+        } else
+            this._gradientTypePicker.value = this._gradient.repeats ? "repeating-radial-gradient" : "radial-gradient";
+
+        this._updateCSSClassForGradientType();
+    }
+
+    get gradient()
+    {
+        return this._gradient;
+    }
+
+    // Protected
+
+    gradientSliderStopsDidChange(gradientSlider)
+    {
+        this._gradient.stops = gradientSlider.stops;
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+    }
+
+    gradientSliderStopWasSelected(gradientSlider, stop)
+    {
+        const selectedStop = gradientSlider.selectedStop;
+        if (selectedStop && !this._editingColor) {
+            this._element.appendChild(this._colorPicker.element);
+            this._element.classList.add("editing-color");
+            this._colorPicker.color = selectedStop.color;
+            this._editingColor = true;
+        } else if (!selectedStop) {
+            this._colorPicker.element.remove();
+            this._element.classList.remove("editing-color");
+            this._editingColor = false;
+        }
+
+        // Ensure the angle input is not focused since, if it were, it'd make a scrollbar appear as we
+        // animate the popover's frame to fit its new content.
+        this._angleInput.blur();
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.ColorPickerToggled);
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+    }
+
+    dragToAdjustControllerWasAdjustedByAmount(dragToAdjustController, amount)
+    {
+        const angleInputValue = parseFloat(this._angleInput.value);
+        if (isNaN(angleInputValue))
+            return;
+
+        let angle = angleInputValue + amount;
+        if (Math.round(angle) !== angle)
+            angle = angle.toFixed(1);
+
+        this._angleInput.value = angle;
+        this._angleInputValueDidChange(angle);
+    }
+
+    // Private
+
+    _updateCSSClassForGradientType()
+    {
+        const isRadial = this._gradient instanceof WebInspector.RadialGradient;
+        this._element.classList.toggle("radial-gradient", isRadial);
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.ColorPickerToggled);
+    }
+
+    _gradientTypeChanged(event)
+    {
+        const descriptor = this._gradientTypes[this._gradientTypePicker.value];
+        if (!(this._gradient instanceof descriptor.type)) {
+            if (descriptor.type === WebInspector.LinearGradient) {
+                this._gradient = new WebInspector.LinearGradient(180, this._gradient.stops);
+                this._angleInput.value = "180\u00B0";
+            } else
+                this._gradient = new WebInspector.RadialGradient("", this._gradient.stops);
+
+            this._updateCSSClassForGradientType();
+        }
+        this._gradient.repeats = descriptor.repeats;
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+    }
+
+    _colorPickerColorChanged(event)
+    {
+        this._gradientSlider.selectedStop.color = event.target.color;
+        this._gradientSlider.stops = this._gradient.stops;
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+    }
+
+    _angleChanged(event)
+    {
+        const angle = parseFloat(this._angleInput.value) || 0;
+        if (isNaN(angle))
+            return;
+
+        this._angleInputValueDidChange(angle);
+    }
+
+    _angleInputValueDidChange(angle)
+    {
+        this._gradient.angle = angle;
+        const matches = this._angleInput.value.match(/\u00B0/g);
+        if (!matches || matches.length !== 1) {
+            const savedStart = this._angleInput.selectionStart;
+            this._angleInput.value = angle + "\u00B0";
+            this._angleInput.selectionStart = savedStart;
+            this._angleInput.selectionEnd = savedStart;
+        }
+
+        this.dispatchEventToListeners(WebInspector.GradientEditor.Event.GradientChanged, {gradient: this._gradient});
+    }
+}
+
+WebInspector.GradientEditor.Event = {
+    GradientChanged: "gradient-editor-gradient-changed",
+    ColorPickerToggled: "gradient-editor-color-picker-toggled"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/GradientSlider.css b/Source/WebInspectorUI/UserInterface/Views/GradientSlider.css
new file mode 100644
index 000000000..75d81930b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GradientSlider.css
@@ -0,0 +1,105 @@
+/*
+ * Copyright (C) 2014 Apple Inc.  All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.gradient-slider {
+    position: absolute;
+
+    left: 26px;
+    width: 238px;
+    height: 21px;
+
+    border: 1px solid hsl(0, 0%, 57%);
+}
+
+.gradient-slider > canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    background-image: url(../Images/Checkers.svg);
+    background-size: 6px 6px;
+}
+
+.gradient-slider > .add-area {
+    position: absolute;
+    
+    top: 14px;
+    left: 0;
+    height: 20px;
+    width: 100%;
+}
+
+.gradient-slider-knob {
+    position: absolute;
+
+    left: -11px;
+    top: 10px;
+    width: 20px;
+    height: 26px;
+
+    background-image: -webkit-image-set(url(../Images/GradientStop.png) 1x, url(../Images/GradientStop@2x.png) 2x);
+
+    transition: opacity 350ms;
+}
+
+.gradient-slider-knob.shadow {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.gradient-slider-knob.selected {
+    background-image: -webkit-image-set(url(../Images/GradientStopSelected.png) 1x, url(../Images/GradientStopSelected@2x.png) 2x);
+}
+
+.gradient-slider-knob.detaching {
+    opacity: 0.75;
+}
+
+.gradient-slider-knob.fade-out {
+    transition: opacity 0.35s;
+    opacity: 0;
+}
+
+.gradient-slider-knob > :matches(img, div) {
+    position: absolute;
+    
+    left: 5px;
+    top: 12px;
+    width: 10px;
+    height: 10px;
+}
+
+.gradient-slider-knob > img {
+    content: url(../Images/Checkers.svg);
+}
+
+.gradient-slider-knob > div {
+    border: 1px solid hsla(0, 0%, 0%, 0.25);
+
+    background-color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/GradientSlider.js b/Source/WebInspectorUI/UserInterface/Views/GradientSlider.js
new file mode 100644
index 000000000..ff87822fb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/GradientSlider.js
@@ -0,0 +1,450 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc.  All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.GradientSlider = class GradientSlider extends WebInspector.Object
+{
+    constructor(delegate)
+    {
+        super();
+
+        this.delegate = delegate;
+
+        this._element = null;
+        this._stops = [];
+        this._knobs = [];
+
+        this._selectedKnob = null;
+        this._canvas = document.createElement("canvas");
+
+        this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
+    }
+
+    // Public
+
+    get element()
+    {
+        if (!this._element) {
+            this._element = document.createElement("div");
+            this._element.className = "gradient-slider";
+            this._element.appendChild(this._canvas);
+
+            this._addArea = this._element.appendChild(document.createElement("div"));
+            this._addArea.addEventListener("mouseover", this);
+            this._addArea.addEventListener("mousemove", this);
+            this._addArea.addEventListener("mouseout", this);
+            this._addArea.addEventListener("click", this);
+            this._addArea.className = WebInspector.GradientSlider.AddAreaClassName;
+        }
+        return this._element;
+    }
+
+    get stops()
+    {
+        return this._stops;
+    }
+
+    set stops(stops)
+    {
+        this._stops = stops;
+
+        this._updateStops();
+    }
+
+    get selectedStop()
+    {
+        return this._selectedKnob ? this._selectedKnob.stop : null;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mouseover":
+            this._handleMouseover(event);
+            break;
+        case "mousemove":
+            this._handleMousemove(event);
+            break;
+        case "mouseout":
+            this._handleMouseout(event);
+            break;
+        case "click":
+            this._handleClick(event);
+            break;
+        }
+    }
+
+    handleKeydownEvent(event)
+    {
+        if (!this._keyboardShortcutEsc.matchesEvent(event) || !this._selectedKnob || !this._selectedKnob.selected)
+            return false;
+
+        this._selectedKnob.selected = false;
+
+        return true;
+    }
+
+    knobXDidChange(knob)
+    {
+        knob.stop.offset = knob.x / WebInspector.GradientSlider.Width;
+        this._sortStops();
+        this._updateCanvas();
+    }
+
+    knobCanDetach(knob)
+    {
+        return this._knobs.length > 2;
+    }
+
+    knobWillDetach(knob)
+    {
+        knob.element.classList.add(WebInspector.GradientSlider.DetachingClassName);
+        
+        this._stops.remove(knob.stop);
+        this._knobs.remove(knob);
+        this._sortStops();
+        this._updateCanvas();
+    }
+
+    knobSelectionChanged(knob)
+    {
+        if (this._selectedKnob && this._selectedKnob !== knob && knob.selected)
+            this._selectedKnob.selected = false;
+
+        this._selectedKnob = knob.selected ? knob : null;
+
+        if (this.delegate && typeof this.delegate.gradientSliderStopWasSelected === "function")
+            this.delegate.gradientSliderStopWasSelected(this, knob.stop);
+
+        if (this._selectedKnob)
+            WebInspector.addWindowKeydownListener(this);
+        else
+            WebInspector.removeWindowKeydownListener(this);
+    }
+
+    // Private
+
+    _handleMouseover(event)
+    {
+        this._updateShadowKnob(event);
+    }
+
+    _handleMousemove(event)
+    {
+        this._updateShadowKnob(event);
+    }
+
+    _handleMouseout(event)
+    {
+        if (!this._shadowKnob)
+            return;
+
+        this._shadowKnob.element.remove();
+        delete this._shadowKnob;
+    }
+
+    _handleClick(event)
+    {
+        this._updateShadowKnob(event);
+
+        this._knobs.push(this._shadowKnob);
+
+        this._shadowKnob.element.classList.remove(WebInspector.GradientSlider.ShadowClassName);
+
+        var stop = {offset: this._shadowKnob.x / WebInspector.GradientSlider.Width, color: this._shadowKnob.wellColor};
+        this._stops.push(stop);
+        this._sortStops();
+        this._updateStops();
+
+        this._knobs[this._stops.indexOf(stop)].selected = true;
+
+        delete this._shadowKnob;
+    }
+
+    _updateShadowKnob(event)
+    {
+        if (!this._shadowKnob) {
+            this._shadowKnob = new WebInspector.GradientSliderKnob(this);
+            this._shadowKnob.element.classList.add(WebInspector.GradientSlider.ShadowClassName);
+            this.element.appendChild(this._shadowKnob.element);
+        }
+        
+        this._shadowKnob.x = window.webkitConvertPointFromPageToNode(this.element, new WebKitPoint(event.pageX, event.pageY)).x;
+
+        var colorData = this._canvas.getContext("2d").getImageData(this._shadowKnob.x - 1, 0, 1, 1).data;
+        this._shadowKnob.wellColor = new WebInspector.Color(WebInspector.Color.Format.RGB, [colorData[0], colorData[1], colorData[2], colorData[3] / 255]);
+    }
+
+    _sortStops()
+    {
+        this._stops.sort(function(a, b) {
+            return a.offset - b.offset;
+        });
+    }
+
+    _updateStops()
+    {
+        this._updateCanvas();
+        this._updateKnobs();
+    }
+
+    _updateCanvas()
+    {
+        var w = WebInspector.GradientSlider.Width;
+        var h = WebInspector.GradientSlider.Height;
+        
+        this._canvas.width = w;
+        this._canvas.height = h;
+
+        var ctx = this._canvas.getContext("2d");
+        var gradient = ctx.createLinearGradient(0, 0, w, 0);
+        for (var stop of this._stops)
+            gradient.addColorStop(stop.offset, stop.color);
+
+        ctx.clearRect(0, 0, w, h);
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, w, h);
+
+        if (this.delegate && typeof this.delegate.gradientSliderStopsDidChange === "function")
+            this.delegate.gradientSliderStopsDidChange(this);
+    }
+
+    _updateKnobs()
+    {
+        var selectedStop = this._selectedKnob ? this._selectedKnob.stop : null;
+        
+        while (this._knobs.length > this._stops.length)
+            this._knobs.pop().element.remove();
+
+        while (this._knobs.length < this._stops.length) {
+            var knob = new WebInspector.GradientSliderKnob(this);
+            this.element.appendChild(knob.element);
+            this._knobs.push(knob);
+        }
+
+        for (var i = 0; i < this._stops.length; ++i) {
+            var stop = this._stops[i];
+            var knob = this._knobs[i];
+
+            knob.stop = stop;
+            knob.x = Math.round(stop.offset * WebInspector.GradientSlider.Width);
+            knob.selected = stop === selectedStop;
+        }
+    }
+};
+
+WebInspector.GradientSlider.Width = 238;
+WebInspector.GradientSlider.Height = 19;
+
+WebInspector.GradientSlider.AddAreaClassName = "add-area";
+WebInspector.GradientSlider.DetachingClassName = "detaching";
+WebInspector.GradientSlider.ShadowClassName = "shadow";
+
+WebInspector.GradientSliderKnob = class GradientSliderKnob extends WebInspector.Object
+{
+    constructor(delegate)
+    {
+        super();
+
+        this._x = 0;
+        this._y = 0;
+        this._stop = null;
+
+        this.delegate = delegate;
+
+        this._element = document.createElement("div");
+        this._element.className = "gradient-slider-knob";
+
+        // Checkers pattern.
+        this._element.appendChild(document.createElement("img"));
+
+        this._well = this._element.appendChild(document.createElement("div"));
+
+        this._element.addEventListener("mousedown", this);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get stop()
+    {
+        return this._stop;
+    }
+
+    set stop(stop)
+    {
+        this.wellColor = stop.color;
+        this._stop = stop;
+    }
+
+    get x()
+    {
+        return this._x;
+    }
+    
+    set x(x) {
+        this._x = x;
+        this._updateTransform();
+    }
+
+    get y()
+    {
+        return this._x;
+    }
+    
+    set y(y) {
+        this._y = y;
+        this._updateTransform();
+    }
+
+    get wellColor()
+    {
+        return this._wellColor;
+    }
+
+    set wellColor(color)
+    {
+        this._wellColor = color;
+        this._well.style.backgroundColor = color;
+    }
+
+    get selected()
+    {
+        return this._element.classList.contains(WebInspector.GradientSliderKnob.SelectedClassName);
+    }
+
+    set selected(selected)
+    {
+        if (this.selected === selected)
+            return;
+
+        this._element.classList.toggle(WebInspector.GradientSliderKnob.SelectedClassName, selected);
+        
+        if (this.delegate && typeof this.delegate.knobSelectionChanged === "function")
+            this.delegate.knobSelectionChanged(this);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        event.preventDefault();
+        event.stopPropagation();
+
+        switch (event.type) {
+        case "mousedown":
+            this._handleMousedown(event);
+            break;
+        case "mousemove":
+            this._handleMousemove(event);
+            break;
+        case "mouseup":
+            this._handleMouseup(event);
+            break;
+        case "transitionend":
+            this._handleTransitionEnd(event);
+            break;
+        }
+    }
+
+    // Private
+
+    _handleMousedown(event)
+    {
+        this._moved = false;
+        this._detaching = false;
+
+        window.addEventListener("mousemove", this, true);
+        window.addEventListener("mouseup", this, true);
+
+        this._startX = this.x;
+        this._startMouseX = event.pageX;
+        this._startMouseY = event.pageY;
+    }
+
+    _handleMousemove(event)
+    {
+        var w = WebInspector.GradientSlider.Width;
+
+        this._moved = true;
+
+        if (!this._detaching && Math.abs(event.pageY - this._startMouseY) > 50) {
+            this._detaching = this.delegate && typeof this.delegate.knobCanDetach === "function" && this.delegate.knobCanDetach(this);
+            if (this._detaching && this.delegate && typeof this.delegate.knobWillDetach === "function") {
+                var translationFromParentToBody = window.webkitConvertPointFromNodeToPage(this.element.parentNode, new WebKitPoint(0, 0));
+                this._startMouseX -= translationFromParentToBody.x;
+                this._startMouseY -= translationFromParentToBody.y;
+                document.body.appendChild(this.element);
+                this.delegate.knobWillDetach(this);
+            }
+        }
+
+        var x = this._startX + event.pageX - this._startMouseX;
+        if (!this._detaching)
+            x = Math.min(Math.max(0, x), w);
+        this.x = x;
+
+        if (this._detaching)
+            this.y = event.pageY - this._startMouseY;
+        else if (this.delegate && typeof this.delegate.knobXDidChange === "function")
+            this.delegate.knobXDidChange(this);
+    }
+
+    _handleMouseup(event)
+    {
+        window.removeEventListener("mousemove", this, true);
+        window.removeEventListener("mouseup", this, true);
+
+        if (this._detaching) {
+            this.element.addEventListener("transitionend", this);
+            this.element.classList.add(WebInspector.GradientSliderKnob.FadeOutClassName);
+            this.selected = false;
+        } else if (!this._moved)
+            this.selected = !this.selected;
+    }
+
+    _handleTransitionEnd(event)
+    {
+        this.element.removeEventListener("transitionend", this);
+        this.element.classList.remove(WebInspector.GradientSliderKnob.FadeOutClassName);
+        this.element.remove();
+    }
+
+    _updateTransform()
+    {
+        this.element.style.webkitTransform = "translate3d(" + this._x + "px, " + this._y + "px, 0)";
+    }
+};
+
+WebInspector.GradientSliderKnob.SelectedClassName = "selected";
+WebInspector.GradientSliderKnob.FadeOutClassName = "fade-out";
diff --git a/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css
new file mode 100644
index 000000000..392694750
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.css
@@ -0,0 +1,133 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.hierarchical-path-component {
+    display: flex;
+    position: relative;
+    height: 20px;
+    min-width: 32px;
+
+    font-size: 11px;
+    font-family: -apple-system, sans-serif;
+}
+
+.hierarchical-path-component.show-selector-arrows {
+    min-width: 44px;
+}
+
+.hierarchical-path-component.collapsed {
+    min-width: 24px;
+}
+
+.hierarchical-path-component.collapsed > .icon {
+    display: none;
+}
+
+.hierarchical-path-component.collapsed > .title {
+    margin-left: 3px;
+}
+
+.hierarchical-path-component.collapsed > select {
+    display: none;
+}
+
+.hierarchical-path-component > .icon {
+    vertical-align: top;
+    margin: 2px 3px 2px 4px;
+    width: 16px;
+    height: 16px;
+}
+
+.hierarchical-path-component > .selector-arrows {
+    vertical-align: top;
+    margin: 2px 3px 2px 4px;
+    width: 5px;
+    height: 16px;
+    opacity: 0.6;
+    content: url(../Images/UpDownArrows.svg);
+}
+
+.hierarchical-path-component > .title {
+    display: flex;
+    flex: 1;
+
+    vertical-align: top;
+
+    text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
+    line-height: 20px;
+    height: 20px;
+
+    min-width: 0;
+    max-width: 400px;
+}
+
+.hierarchical-path-component > .title > .content {
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.hierarchical-path-component > select {
+    opacity: 0;
+
+ /* Positioned so the text in the menu aligns with the text in .title. */
+    position: absolute;
+    top: -1px;
+    left: 10px;
+    right: 0;
+    bottom: 0;
+}
+
+.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-child > .separator {
+    visibility: hidden;
+}
+
+.hierarchical-path-component > .separator {
+    display: inline-block;
+    vertical-align: top;
+
+    background-image: url(../Images/HierarchicalNavigationItemChevron.svg);
+    background-repeat: no-repeat;
+    background-position-y: center;
+
+    opacity: 0.75;
+
+    width: 7px;
+    height: 20px;
+
+    margin-left: 2px;
+}
+
+.hierarchical-path-component.text-only {
+    padding-left: 5px;
+    padding-right: 1px;
+}
+
+.hierarchical-path-component.text-only > select {
+ /* Positions so the text in the menu aligns with the text in .title for text only path components. */
+    left: -8px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.js b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.js
new file mode 100644
index 000000000..1764271d9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathComponent.js
@@ -0,0 +1,336 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.HierarchicalPathComponent = class HierarchicalPathComponent extends WebInspector.Object
+{
+    constructor(displayName, styleClassNames, representedObject, textOnly, showSelectorArrows)
+    {
+        super();
+
+        console.assert(displayName);
+        console.assert(styleClassNames);
+
+        this._representedObject = representedObject || null;
+
+        this._element = document.createElement("div");
+        this._element.className = "hierarchical-path-component";
+
+        if (!(styleClassNames instanceof Array))
+            styleClassNames = [styleClassNames];
+
+        for (var i = 0; i < styleClassNames.length; ++i) {
+            if (!styleClassNames[i])
+                continue;
+            this._element.classList.add(styleClassNames[i]);
+        }
+
+        if (!textOnly) {
+            this._iconElement = document.createElement("img");
+            this._iconElement.className = "icon";
+            this._element.appendChild(this._iconElement);
+        } else
+            this._element.classList.add(WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName);
+
+        this._titleElement = document.createElement("div");
+        this._titleElement.className = "title";
+        this._element.appendChild(this._titleElement);
+
+        this._titleContentElement = document.createElement("div");
+        this._titleContentElement.className = "content";
+        this._titleElement.appendChild(this._titleContentElement);
+
+        this._separatorElement = document.createElement("div");
+        this._separatorElement.className = "separator";
+        this._element.appendChild(this._separatorElement);
+
+        this._selectElement = document.createElement("select");
+        this._selectElement.addEventListener("mouseover", this._selectElementMouseOver.bind(this));
+        this._selectElement.addEventListener("mouseout", this._selectElementMouseOut.bind(this));
+        this._selectElement.addEventListener("mousedown", this._selectElementMouseDown.bind(this));
+        this._selectElement.addEventListener("mouseup", this._selectElementMouseUp.bind(this));
+        this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
+        this._element.appendChild(this._selectElement);
+
+        this._previousSibling = null;
+        this._nextSibling = null;
+
+        this._truncatedDisplayNameLength = 0;
+
+        this.selectorArrows = showSelectorArrows;
+        this.displayName = displayName;
+    }
+
+    // Public
+
+    get selectedPathComponent()
+    {
+        var selectElement = this._selectElement[this._selectElement.selectedIndex];
+        return selectElement && selectElement._pathComponent || null;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get representedObject()
+    {
+        return this._representedObject;
+    }
+
+    get displayName()
+    {
+        return this._displayName;
+    }
+
+    set displayName(newDisplayName)
+    {
+        console.assert(newDisplayName);
+        if (newDisplayName === this._displayName)
+            return;
+
+        this._displayName = newDisplayName;
+
+        this._updateElementTitleAndText();
+    }
+
+    get truncatedDisplayNameLength()
+    {
+        return this._truncatedDisplayNameLength;
+    }
+
+    set truncatedDisplayNameLength(truncatedDisplayNameLength)
+    {
+        truncatedDisplayNameLength = truncatedDisplayNameLength || 0;
+
+        if (truncatedDisplayNameLength === this._truncatedDisplayNameLength)
+            return;
+
+        this._truncatedDisplayNameLength = truncatedDisplayNameLength;
+
+        this._updateElementTitleAndText();
+    }
+
+    get minimumWidth()
+    {
+        if (this.collapsed)
+            return WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed;
+        if (this.selectorArrows)
+            return WebInspector.HierarchicalPathComponent.MinimumWidth + WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
+        return WebInspector.HierarchicalPathComponent.MinimumWidth;
+    }
+
+    get forcedWidth()
+    {
+        var maxWidth = this._element.style.getProperty("width");
+        if (typeof maxWidth === "string")
+            return parseInt(maxWidth);
+        return null;
+    }
+
+    set forcedWidth(width)
+    {
+        if (typeof width === "number") {
+            var minimumWidthForOneCharacterTruncatedTitle = WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle;
+            if (this.selectorArrows)
+                minimumWidthForOneCharacterTruncatedTitle += WebInspector.HierarchicalPathComponent.SelectorArrowsWidth;
+
+            // If the width is less than the minimum width required to show a single character and ellipsis, then
+            // just collapse down to the bare minimum to show only the icon.
+            if (width < minimumWidthForOneCharacterTruncatedTitle)
+                width = 0;
+
+            // Ensure the width does not go less than 1px. If the width is 0 the layout gets funky. There is a min-width
+            // in the CSS too, so as long the width is less than min-width we get the desired effect of only showing the icon.
+            this._element.style.setProperty("width", Math.max(1, width) + "px");
+        } else
+            this._element.style.removeProperty("width");
+    }
+
+    get hidden()
+    {
+        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
+    }
+
+    set hidden(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.HierarchicalPathComponent.HiddenStyleClassName);
+    }
+
+    get collapsed()
+    {
+        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
+    }
+
+    set collapsed(flag)
+    {
+        if (flag)
+            this._element.classList.add(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
+        else
+            this._element.classList.remove(WebInspector.HierarchicalPathComponent.CollapsedStyleClassName);
+    }
+
+    get selectorArrows()
+    {
+        return this._element.classList.contains(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
+    }
+
+    set selectorArrows(flag)
+    {
+        if (flag) {
+            this._selectorArrowsElement = document.createElement("img");
+            this._selectorArrowsElement.className = "selector-arrows";
+            this._element.insertBefore(this._selectorArrowsElement, this._separatorElement);
+
+            this._element.classList.add(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
+        } else {
+            if (this._selectorArrowsElement) {
+                this._selectorArrowsElement.remove();
+                delete this._selectorArrowsElement;
+            }
+
+            this._element.classList.remove(WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName);
+        }
+    }
+
+    get previousSibling()
+    {
+        return this._previousSibling;
+    }
+
+    set previousSibling(newSlibling)
+    {
+        this._previousSibling = newSlibling || null;
+    }
+
+    get nextSibling()
+    {
+        return this._nextSibling;
+    }
+
+    set nextSibling(newSlibling)
+    {
+        this._nextSibling = newSlibling || null;
+    }
+
+    // Private
+
+    _updateElementTitleAndText()
+    {
+        var truncatedDisplayName = this._displayName;
+        if (this._truncatedDisplayNameLength && truncatedDisplayName.length > this._truncatedDisplayNameLength)
+            truncatedDisplayName = truncatedDisplayName.substring(0, this._truncatedDisplayNameLength) + ellipsis;
+
+        this._element.title = this._displayName;
+        this._titleContentElement.textContent = truncatedDisplayName;
+    }
+
+    _updateSelectElement()
+    {
+        this._selectElement.removeChildren();
+
+        function createOption(component)
+        {
+            var optionElement = document.createElement("option");
+            var maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
+            optionElement.textContent = component.displayName.length <= maxPopupMenuLength ? component.displayName : component.displayName.substring(0, maxPopupMenuLength) + ellipsis;
+            optionElement._pathComponent = component;
+            return optionElement;
+        }
+
+        var previousSiblingCount = 0;
+        var sibling = this.previousSibling;
+        while (sibling) {
+            this._selectElement.insertBefore(createOption(sibling), this._selectElement.firstChild);
+            sibling = sibling.previousSibling;
+            ++previousSiblingCount;
+        }
+
+        this._selectElement.appendChild(createOption(this));
+
+        sibling = this.nextSibling;
+        while (sibling) {
+            this._selectElement.appendChild(createOption(sibling));
+            sibling = sibling.nextSibling;
+        }
+
+        // Since the change event only fires when the selection actually changes we are
+        // stuck with either not showing the current selection in the menu or accepting that
+        // the user can't select what is already selected again. Selecting the same item
+        // again can be desired (for selecting the main resource while looking at an image).
+        // So if there is only one option, don't make it be selected by default. This lets
+        // you select the top level item which usually has no siblings to go back.
+        // FIXME: Make this work when there are multiple options with a selectedIndex.
+        if (this._selectElement.options.length === 1)
+            this._selectElement.selectedIndex = -1;
+        else
+            this._selectElement.selectedIndex = previousSiblingCount;
+    }
+
+    _selectElementMouseOver(event)
+    {
+        if (typeof this.mouseOver === "function")
+            this.mouseOver();
+    }
+
+    _selectElementMouseOut(event)
+    {
+        if (typeof this.mouseOut === "function")
+            this.mouseOut();
+    }
+
+    _selectElementMouseDown(event)
+    {
+        this._updateSelectElement();
+    }
+
+    _selectElementMouseUp(event)
+    {
+        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.Clicked, {pathComponent: this.selectedPathComponent});
+    }
+
+    _selectElementSelectionChanged(event)
+    {
+        this.dispatchEventToListeners(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, {pathComponent: this.selectedPathComponent});
+    }
+};
+
+WebInspector.HierarchicalPathComponent.HiddenStyleClassName = "hidden";
+WebInspector.HierarchicalPathComponent.CollapsedStyleClassName = "collapsed";
+WebInspector.HierarchicalPathComponent.TextOnlyStyleClassName = "text-only";
+WebInspector.HierarchicalPathComponent.ShowSelectorArrowsStyleClassName = "show-selector-arrows";
+
+WebInspector.HierarchicalPathComponent.MinimumWidth = 32;
+WebInspector.HierarchicalPathComponent.MinimumWidthCollapsed = 24;
+WebInspector.HierarchicalPathComponent.MinimumWidthForOneCharacterTruncatedTitle = 54;
+WebInspector.HierarchicalPathComponent.SelectorArrowsWidth = 12;
+
+WebInspector.HierarchicalPathComponent.Event = {
+    SiblingWasSelected: "hierarchical-path-component-sibling-was-selected",
+    Clicked: "hierarchical-path-component-clicked"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js
new file mode 100644
index 000000000..88f963b63
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HierarchicalPathNavigationItem.js
@@ -0,0 +1,239 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.HierarchicalPathNavigationItem = class HierarchicalPathNavigationItem extends WebInspector.NavigationItem
+{
+    constructor(identifier, components)
+    {
+        super(identifier);
+
+        this.components = components;
+    }
+
+    // Public
+
+    get components()
+    {
+        return this._components;
+    }
+
+    set components(newComponents)
+    {
+        if (!newComponents)
+            newComponents = [];
+
+        for (var i = 0; this._components && i < this._components.length; ++i)
+            this._components[i].removeEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
+
+        // Make a shallow copy of the newComponents array using slice.
+        this._components = newComponents.slice(0);
+
+        for (var i = 0; i < this._components.length; ++i)
+            this._components[i].addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._siblingPathComponentWasSelected, this);
+
+        this.element.removeChildren();
+        delete this._collapsedComponent;
+
+        for (var i = 0; i < newComponents.length; ++i)
+            this.element.appendChild(newComponents[i].element);
+
+        // Update layout for the so other items can adjust to the extra space (or lack thereof) too.
+        if (this.parentNavigationBar)
+            this.parentNavigationBar.needsLayout();
+    }
+
+    get lastComponent()
+    {
+        return this._components.lastValue || null;
+    }
+
+    get alwaysShowLastPathComponentSeparator()
+    {
+        return this.element.classList.contains(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
+    }
+
+    set alwaysShowLastPathComponentSeparator(flag)
+    {
+        if (flag)
+            this.element.classList.add(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
+        else
+            this.element.classList.remove(WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName);
+    }
+
+    updateLayout(expandOnly)
+    {
+        var navigationBar = this.parentNavigationBar;
+        if (!navigationBar)
+            return;
+
+        if (this._collapsedComponent) {
+            this.element.removeChild(this._collapsedComponent.element);
+            delete this._collapsedComponent;
+        }
+
+        // Expand our components to full width to test if the items can fit at full width.
+        for (var i = 0; i < this._components.length; ++i) {
+            this._components[i].hidden = false;
+            this._components[i].forcedWidth = null;
+        }
+
+        if (expandOnly)
+            return;
+
+        if (navigationBar.sizesToFit)
+            return;
+
+        // Iterate over all the other navigation items in the bar and calculate their width.
+        var totalOtherItemsWidth = 0;
+        for (var i = 0; i < navigationBar.navigationItems.length; ++i) {
+            // Skip ourself.
+            if (navigationBar.navigationItems[i] === this)
+                continue;
+
+            // Skip flexible space items since they can take up no space at the minimum width.
+            if (navigationBar.navigationItems[i] instanceof WebInspector.FlexibleSpaceNavigationItem)
+                continue;
+
+            totalOtherItemsWidth += navigationBar.navigationItems[i].element.realOffsetWidth;
+        }
+
+        // Calculate the width for all the components.
+        var thisItemWidth = 0;
+        var componentWidths = [];
+        for (var i = 0; i < this._components.length; ++i) {
+            var componentWidth = this._components[i].element.realOffsetWidth;
+            componentWidths.push(componentWidth);
+            thisItemWidth += componentWidth;
+        }
+
+        // If all our components fit with the other navigation items in the width of the bar,
+        // then we don't need to collapse any components.
+        var barWidth = navigationBar.element.realOffsetWidth;
+        if (totalOtherItemsWidth + thisItemWidth <= barWidth)
+            return;
+
+        // Calculate the width we need to remove from our components, then iterate over them
+        // and force their width to be smaller.
+        var widthToRemove = totalOtherItemsWidth + thisItemWidth - barWidth;
+        for (var i = 0; i < this._components.length; ++i) {
+            var componentWidth = componentWidths[i];
+
+            // Try to take the whole width we need to remove from each component.
+            var forcedWidth = componentWidth - widthToRemove;
+            this._components[i].forcedWidth = forcedWidth;
+
+            // Since components have a minimum width, we need to see how much was actually
+            // removed and subtract that from what remans to be removed.
+            componentWidths[i] = Math.max(this._components[i].minimumWidth, forcedWidth);
+            widthToRemove -= (componentWidth - componentWidths[i]);
+
+            // If there is nothing else to remove, then we can stop.
+            if (widthToRemove <= 0)
+                break;
+        }
+
+        // If there is nothing else to remove, then we can stop.
+        if (widthToRemove <= 0)
+            return;
+
+        // If there are 3 or fewer components, then we can stop. Collapsing the middle of 3 components
+        // does not save more than a few pixels over just the icon, so it isn't worth it unless there
+        // are 4 or more components.
+        if (this._components.length <= 3)
+            return;
+
+        // We want to collapse the middle components, so find the nearest middle index.
+        var middle = this._components.length >> 1;
+        var distance = -1;
+        var i = middle;
+
+        // Create a component that will represent the hidden components with a ellipse as the display name.
+        this._collapsedComponent = new WebInspector.HierarchicalPathComponent(ellipsis, []);
+        this._collapsedComponent.collapsed = true;
+
+        // Insert it in the middle, it doesn't matter exactly where since the elements around it will be hidden soon.
+        this.element.insertBefore(this._collapsedComponent.element, this._components[middle].element);
+
+        // Add the width of the collapsed component to the width we need to remove.
+        widthToRemove += this._collapsedComponent.minimumWidth;
+
+        var hiddenDisplayNames = [];
+
+        // Loop through the components starting at the middle and fanning out in each direction.
+        while (i >= 0 && i <= this._components.length - 1) {
+            // Only hide components in the middle and never the ends.
+            if (i > 0 && i < this._components.length - 1) {
+                var component = this._components[i];
+                component.hidden = true;
+
+                // Remember the displayName so it can be put in the tool tip of the collapsed component.
+                if (distance > 0)
+                    hiddenDisplayNames.unshift(component.displayName);
+                else
+                    hiddenDisplayNames.push(component.displayName);
+
+                // Fully subtract the hidden component's width.
+                widthToRemove -= componentWidths[i];
+
+                // If there is nothing else to remove, then we can stop.
+                if (widthToRemove <= 0)
+                    break;
+            }
+
+            // Calculate the next index.
+            i = middle + distance;
+
+            // Increment the distance when it is in the positive direction.
+            if (distance > 0)
+                ++distance;
+
+            // Flip the direction of the distance.
+            distance *= -1;
+        }
+
+        // Set the tool tip of the collapsed component.
+        this._collapsedComponent.element.title = hiddenDisplayNames.join("\n");
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["hierarchical-path"];
+    }
+
+    // Private
+
+    _siblingPathComponentWasSelected(event)
+    {
+        this.dispatchEventToListeners(WebInspector.HierarchicalPathNavigationItem.Event.PathComponentWasSelected, event.data);
+    }
+};
+
+WebInspector.HierarchicalPathNavigationItem.AlwaysShowLastPathComponentSeparatorStyleClassName = "always-show-last-path-component-separator";
+
+WebInspector.HierarchicalPathNavigationItem.Event = {
+    PathComponentWasSelected: "hierarchical-path-navigation-item-path-component-was-selected"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
new file mode 100644
index 000000000..97cefe6d9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.css
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.hover-menu {
+    position: absolute;
+
+    transform: translate(-1px, -1px);
+
+    pointer-events: none;
+    opacity: 0;
+
+    transition: opacity 350ms;
+}
+
+.hover-menu.visible {
+    opacity: 1;
+}
+
+.hover-menu > svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.hover-menu > svg > :matches(path, rect) {
+    stroke: hsla(0, 0%, 0%, 0.22);
+    stroke-width: 2px;
+    fill: none;
+}
+
+.hover-menu > img {
+    position: absolute;
+
+    left: 0;
+    top: 0;
+    width: 15px;
+    height: 13px;
+
+    content: -webkit-image-set(url(../Images/HoverMenuButton.png) 1x, url(../Images/HoverMenuButton@2x.png) 2x);
+    transform: translateY(-1px);
+}
+
+.hover-menu.visible > img {
+    pointer-events: all;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/HoverMenu.js b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.js
new file mode 100644
index 000000000..e5edb3fc1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/HoverMenu.js
@@ -0,0 +1,275 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.HoverMenu = class HoverMenu extends WebInspector.Object
+{
+    constructor(delegate)
+    {
+        super();
+
+        this.delegate = delegate;
+
+        this._element = document.createElement("div");
+        this._element.className = "hover-menu";
+        this._element.addEventListener("transitionend", this, true);
+
+        this._outlineElement = this._element.appendChild(document.createElementNS("http://www.w3.org/2000/svg", "svg"));
+
+        this._button = this._element.appendChild(document.createElement("img"));
+        this._button.addEventListener("click", this);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    present(rects)
+    {
+        this._outlineElement.textContent = "";
+
+        document.body.appendChild(this._element);
+        this._drawOutline(rects);
+        this._element.classList.add(WebInspector.HoverMenu.VisibleClassName);
+
+        window.addEventListener("scroll", this, true);
+    }
+
+    dismiss(discrete)
+    {
+        if (this._element.parentNode !== document.body)
+            return;
+
+        if (discrete)
+            this._element.remove();
+
+        this._element.classList.remove(WebInspector.HoverMenu.VisibleClassName);
+
+        window.removeEventListener("scroll", this, true);
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "scroll":
+            if (!this._element.contains(event.target))
+                this.dismiss(true);
+            break;
+        case "click":
+            this._handleClickEvent(event);
+            break;
+        case "transitionend":
+            if (!this._element.classList.contains(WebInspector.HoverMenu.VisibleClassName))
+                this._element.remove();
+            break;
+        }
+    }
+
+    // Private
+
+    _handleClickEvent(event)
+    {
+        if (this.delegate && typeof this.delegate.hoverMenuButtonWasPressed === "function")
+            this.delegate.hoverMenuButtonWasPressed(this);
+    }
+
+    _drawOutline(rects)
+    {
+        var buttonWidth = this._button.width;
+        var buttonHeight = this._button.height;
+        
+        // Add room for the button on the last line.
+        var lastRect = rects.pop();
+        lastRect.size.width += buttonWidth;
+        rects.push(lastRect);
+
+        if (rects.length === 1)
+            this._drawSingleLine(rects[0]);
+        else if (rects.length === 2 && rects[0].minX() >= rects[1].maxX())
+            this._drawTwoNonOverlappingLines(rects);
+        else
+            this._drawOverlappingLines(rects);
+
+        var bounds = WebInspector.Rect.unionOfRects(rects).pad(3); // padding + 1/2 stroke-width
+
+        var style = this._element.style;
+        style.left = bounds.minX() + "px";
+        style.top = bounds.minY() + "px";
+        style.width = bounds.size.width + "px";
+        style.height = bounds.size.height + "px";
+
+        this._outlineElement.style.width = bounds.size.width + "px";
+        this._outlineElement.style.height = bounds.size.height + "px";
+
+        this._button.style.left = (lastRect.maxX() - bounds.minX() - buttonWidth) + "px";
+        this._button.style.top = (lastRect.maxY() - bounds.minY() - buttonHeight) + "px";
+    }
+
+    _addRect(rect)
+    {
+        var r = 4;
+
+        var svgRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        svgRect.setAttribute("x", 1);
+        svgRect.setAttribute("y", 1);
+        svgRect.setAttribute("width", rect.size.width);
+        svgRect.setAttribute("height", rect.size.height);
+        svgRect.setAttribute("rx", r);
+        svgRect.setAttribute("ry", r);
+        return this._outlineElement.appendChild(svgRect);
+    }
+
+    _addPath(commands, tx, ty)
+    {
+        var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        path.setAttribute("d", commands.join(" "));
+        path.setAttribute("transform", "translate(" + (tx + 1) + "," + (ty + 1) + ")");
+        return this._outlineElement.appendChild(path);
+    }
+
+    _drawSingleLine(rect)
+    {
+        this._addRect(rect.pad(2));
+    }
+
+    _drawTwoNonOverlappingLines(rects)
+    {
+        var r = 4;
+
+        var firstRect = rects[0].pad(2);
+        var secondRect = rects[1].pad(2);
+
+        var tx = -secondRect.minX();
+        var ty = -firstRect.minY();
+
+        var rect = firstRect;
+        this._addPath([
+            "M", rect.maxX(), rect.minY(),
+            "H", rect.minX() + r,
+            "q", -r, 0, -r, r,
+            "V", rect.maxY() - r,
+            "q", 0, r, r, r,
+            "H", rect.maxX()
+        ], tx, ty);
+        
+        rect = secondRect;
+        this._addPath([
+            "M", rect.minX(), rect.minY(),
+            "H", rect.maxX() - r,
+            "q", r, 0, r, r,
+            "V", rect.maxY() - r,
+            "q", 0, r, -r, r,
+            "H", rect.minX()
+        ], tx, ty);
+    }
+    
+    _drawOverlappingLines(rects)
+    {
+        var PADDING = 2;
+        var r = 4;
+
+        var minX = Number.MAX_VALUE;
+        var maxX = -Number.MAX_VALUE;
+        for (var rect of rects) {
+            var minX = Math.min(rect.minX(), minX);
+            var maxX = Math.max(rect.maxX(), maxX);
+        }
+
+        minX -= PADDING;
+        maxX += PADDING;
+
+        var minY = rects[0].minY() - PADDING;
+        var maxY = rects.lastValue.maxY() + PADDING;
+        var firstLineMinX = rects[0].minX() - PADDING;
+        var lastLineMaxX = rects.lastValue.maxX() + PADDING;
+        
+        if (firstLineMinX === minX && lastLineMaxX === maxX)
+            return this._addRect(new WebInspector.Rect(minX, minY, maxX - minX, maxY - minY));
+        
+        var lastLineMinY = rects.lastValue.minY() + PADDING;
+        if (rects[0].minX() === minX + PADDING) {
+            return this._addPath([
+                "M", minX + r, minY,
+                "H", maxX - r,
+                "q", r, 0, r, r,
+                "V", lastLineMinY - r,
+                "q", 0, r, -r, r,
+                "H", lastLineMaxX + r,
+                "q", -r, 0, -r, r,
+                "V", maxY - r,
+                "q", 0, r, -r, r,
+                "H", minX + r,
+                "q", -r, 0, -r, -r,
+                "V", minY + r,
+                "q", 0, -r, r, -r
+            ], -minX, -minY);
+        }
+
+        var firstLineMaxY = rects[0].maxY() - PADDING;
+        if (rects.lastValue.maxX() === maxX - PADDING) {
+            return this._addPath([
+                "M", firstLineMinX + r, minY,
+                "H", maxX - r,
+                "q", r, 0, r, r,
+                "V", maxY - r,
+                "q", 0, r, -r, r,
+                "H", minX + r,
+                "q", -r, 0, -r, -r,
+                "V", firstLineMaxY + r,
+                "q", 0, -r, r, -r,
+                "H", firstLineMinX - r,
+                "q", r, 0, r, -r,
+                "V", minY + r,
+                "q", 0, -r, r, -r
+            ], -minX, -minY);
+        }
+
+        return this._addPath([
+            "M", firstLineMinX + r, minY,
+            "H", maxX - r,
+            "q", r, 0, r, r,
+            "V", lastLineMinY - r,
+            "q", 0, r, -r, r,
+            "H", lastLineMaxX + r,
+            "q", -r, 0, -r, r,
+            "V", maxY - r,
+            "q", 0, r, -r, r,
+            "H", minX + r,
+            "q", -r, 0, -r, -r,
+            "V", firstLineMaxY + r,
+            "q", 0, -r, r, -r,
+            "H", firstLineMinX - r,
+            "q", r, 0, r, -r,
+            "V", minY + r,
+            "q", 0, -r, r, -r
+        ], -minX, -minY);
+    }
+};
+
+WebInspector.HoverMenu.VisibleClassName = "visible";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css b/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
new file mode 100644
index 000000000..d314f0cf9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.resource.image {
+    background-color: hsl(0, 0%, 90%);
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    display: flex;
+
+    justify-content: center;
+}
+
+.content-view.resource.image img {
+    min-width: 0;
+    max-width: 100%;
+
+    -webkit-user-select: text;
+    -webkit-user-drag: auto;
+
+ /* A border is used instead of padding or margin so when there is overflow
+    there will be space on all sides. */
+    border: 15px solid transparent;
+
+    margin: auto 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js b/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js
new file mode 100644
index 000000000..54fb13a85
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ImageResourceContentView.js
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2013-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ImageResourceContentView = class ImageResourceContentView extends WebInspector.ResourceContentView
+{
+    constructor(resource)
+    {
+        super(resource, "image");
+
+        this._imageElement = null;
+    }
+
+    // Public
+
+    get imageElement()
+    {
+        return this._imageElement;
+    }
+
+    contentAvailable(content, base64Encoded)
+    {
+        this.element.removeChildren();
+
+        var objectURL = this.resource.createObjectURL();
+        this._imageElement = document.createElement("img");
+        this._imageElement.addEventListener("load", function() { URL.revokeObjectURL(objectURL); });
+        this._imageElement.src = objectURL;
+
+        this.element.appendChild(this._imageElement);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndeterminateProgressSpinner.css b/Source/WebInspectorUI/UserInterface/Views/IndeterminateProgressSpinner.css
new file mode 100644
index 000000000..31f460aa0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndeterminateProgressSpinner.css
@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/* These keyframes try to reproduce the 12 discrete steps seen in a standard system progress indicator. */
+@keyframes discrete-spinner {
+    0% {
+        background-image: url(../Images/IndeterminateProgressSpinner1.svg);
+    }
+
+    8.333% {
+        background-image: url(../Images/IndeterminateProgressSpinner2.svg);
+    }
+
+    16.666% {
+        background-image: url(../Images/IndeterminateProgressSpinner3.svg);
+    }
+
+    25.000% {
+        background-image: url(../Images/IndeterminateProgressSpinner4.svg);
+    }
+
+    33.333% {
+        background-image: url(../Images/IndeterminateProgressSpinner5.svg);
+    }
+
+    41.666% {
+        background-image: url(../Images/IndeterminateProgressSpinner6.svg);
+    }
+
+    50.000% {
+        background-image: url(../Images/IndeterminateProgressSpinner7.svg);
+    }
+
+    58.333% {
+        background-image: url(../Images/IndeterminateProgressSpinner8.svg);
+    }
+
+    66.666% {
+        background-image: url(../Images/IndeterminateProgressSpinner9.svg);
+    }
+
+    75.000% {
+        background-image: url(../Images/IndeterminateProgressSpinner10.svg);
+    }
+
+    83.333% {
+        background-image: url(../Images/IndeterminateProgressSpinner11.svg);
+    }
+
+    91.666% {
+        background-image: url(../Images/IndeterminateProgressSpinner12.svg);
+    }
+
+    100% {
+        background-image: url(../Images/IndeterminateProgressSpinner1.svg);
+    }
+}
+
+.indeterminate-progress-spinner {
+    background-image: url(../Images/IndeterminateProgressSpinner1.svg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+
+    width: 16px;
+    height: 16px;
+
+    animation-name: discrete-spinner;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: step-start;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndeterminateProgressSpinner.js b/Source/WebInspectorUI/UserInterface/Views/IndeterminateProgressSpinner.js
new file mode 100644
index 000000000..22e156acc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndeterminateProgressSpinner.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndeterminateProgressSpinner = class IndeterminateProgressSpinner extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.classList.add("indeterminate-progress-spinner");
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseEntryDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseEntryDataGridNode.js
new file mode 100644
index 000000000..53f9384d6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseEntryDataGridNode.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseEntryDataGridNode = class IndexedDatabaseEntryDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(entry)
+    {
+        super(entry);
+
+        this._entry = entry;
+    }
+
+    // Public
+
+    get entry()
+    {
+        return this._entry;
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var value = this._entry[columnIdentifier];
+        if (value instanceof WebInspector.RemoteObject)
+            return WebInspector.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject(value, null, true);
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js
new file mode 100644
index 000000000..0b205bf40
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseHostTreeElement.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseHostTreeElement = class IndexedDatabaseHostTreeElement extends WebInspector.StorageTreeElement
+{
+    constructor(host)
+    {
+        super(WebInspector.FolderTreeElement.FolderIconStyleClassName, WebInspector.displayNameForHost(host), null);
+
+        this._host = host;
+
+        this.hasChildren = true;
+    }
+
+    // Public
+
+    get name()
+    {
+        return WebInspector.displayNameForHost(this._host);
+    }
+
+    get categoryName()
+    {
+        return WebInspector.UIString("Indexed Databases");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css
new file mode 100644
index 000000000..37633c5a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.css
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.indexed-database-object-store > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.content-view.indexed-database-object-store > .data-grid table.data {
+    background-image: none;
+}
+
+.content-view.indexed-database-object-store > .data-grid table.data tr:nth-child(even) {
+    background-color: white;
+}
+
+.content-view.indexed-database-object-store > .data-grid table.data tr:nth-child(odd) {
+    background-color: hsl(214, 41%, 96%);
+}
+
+.content-view.indexed-database-object-store > .data-grid table.data tr.filler {
+ /* FIXME: This should show an alternating stripe, but I couldn't make it work. */
+    background-color: white;
+}
+
+.content-view.indexed-database-object-store > .data-grid tr.selected {
+    background-color: hsl(210, 90%, 90%) !important;
+}
+
+.content-view.indexed-database-object-store > .data-grid:focus tr.selected td:not(:last-child) {
+    border-right-color: hsl(210, 70%, 75%);
+}
+
+.content-view.indexed-database-object-store > .data-grid .object-tree > :matches(.title, .object-preview)::before {
+ /* The line-height inside a data-grid is 17px instead of 13px, this will center vertically on the top line. */
+    top: 2px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js
new file mode 100644
index 000000000..ac860541b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreContentView.js
@@ -0,0 +1,156 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseObjectStoreContentView = class IndexedDatabaseObjectStoreContentView extends WebInspector.ContentView
+{
+    constructor(objectStoreOrIndex)
+    {
+        super(objectStoreOrIndex);
+
+        this.element.classList.add("indexed-database-object-store");
+
+        if (objectStoreOrIndex instanceof WebInspector.IndexedDatabaseObjectStore) {
+            this._objectStore = objectStoreOrIndex;
+            this._objectStoreIndex = null;
+        } else if (objectStoreOrIndex instanceof WebInspector.IndexedDatabaseObjectStoreIndex) {
+            this._objectStore = objectStoreOrIndex.parentObjectStore;
+            this._objectStoreIndex = objectStoreOrIndex;
+        }
+
+        function displayKeyPath(keyPath)
+        {
+            if (!keyPath)
+                return "";
+            if (keyPath instanceof Array)
+                return keyPath.join(WebInspector.UIString(", "));
+            console.assert(keyPath instanceof String || typeof keyPath === "string");
+            return keyPath;
+        }
+
+        var displayPrimaryKeyPath = displayKeyPath(this._objectStore.keyPath);
+
+        var columnInfo = {
+            primaryKey: {title: displayPrimaryKeyPath ? WebInspector.UIString("Primary Key \u2014 %s").format(displayPrimaryKeyPath) : WebInspector.UIString("Primary Key")},
+            key: {},
+            value: {title: WebInspector.UIString("Value")}
+        };
+
+        if (this._objectStoreIndex) {
+            // When there is an index, show the key path in the Key column.
+            var displayIndexKeyPath = displayKeyPath(this._objectStoreIndex.keyPath);
+            columnInfo.key.title = WebInspector.UIString("Index Key \u2014 %s").format(displayIndexKeyPath);
+        } else {
+            // Only need to show Key for indexes -- it is the same as Primary Key
+            // when there is no index being used.
+            delete columnInfo.key;
+        }
+
+        this._dataGrid = new WebInspector.DataGrid(columnInfo);
+        this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
+        this.addSubview(this._dataGrid);
+
+        this._entries = [];
+
+        this._fetchMoreData();
+
+        this._refreshButtonNavigationItem = new WebInspector.ButtonNavigationItem("indexed-database-object-store-refresh", WebInspector.UIString("Refresh"), "Images/ReloadFull.svg", 13, 13);
+        this._refreshButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._refreshButtonClicked, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._refreshButtonNavigationItem];
+    }
+
+    closed()
+    {
+        this._reset();
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.IndexedDatabaseObjectStore;
+        cookie.securityOrigin = this._objectStore.parentDatabase.securityOrigin;
+        cookie.databaseName = this._objectStore.parentDatabase.name;
+        cookie.objectStoreName = this._objectStore.name;
+        cookie.objectStoreIndexName = this._objectStoreIndex && this._objectStoreIndex.name;
+    }
+
+    // Private
+
+    _reset()
+    {
+        for (var entry of this._entries) {
+            entry.primaryKey.release();
+            entry.key.release();
+            entry.value.release();
+        }
+
+        this._entries = [];
+        this._dataGrid.removeChildren();
+    }
+
+    _dataGridScrolled()
+    {
+        if (!this._moreEntriesAvailable || !this._dataGrid.isScrolledToLastRow())
+            return;
+
+        this._fetchMoreData();
+    }
+
+    _fetchMoreData()
+    {
+        if (this._fetchingMoreData)
+            return;
+
+        function processEntries(entries, moreAvailable)
+        {
+            this._entries = this._entries.concat(entries);
+            this._moreEntriesAvailable = moreAvailable;
+
+            for (var entry of entries) {
+                var dataGridNode = new WebInspector.IndexedDatabaseEntryDataGridNode(entry);
+                this._dataGrid.appendChild(dataGridNode);
+            }
+
+            delete this._fetchingMoreData;
+
+            if (moreAvailable && this._dataGrid.isScrolledToLastRow())
+                this._fetchMoreData();
+        }
+
+        this._fetchingMoreData = true;
+
+        WebInspector.storageManager.requestIndexedDatabaseData(this._objectStore, this._objectStoreIndex, this._entries.length, 25, processEntries.bind(this));
+    }
+
+    _refreshButtonClicked()
+    {
+        this._reset();
+        this._fetchMoreData();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js
new file mode 100644
index 000000000..4e8bb680f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreIndexTreeElement.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseObjectStoreIndexTreeElement = class IndexedDatabaseObjectStoreIndexTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(objectStoreIndex)
+    {
+        console.assert(objectStoreIndex instanceof WebInspector.IndexedDatabaseObjectStoreIndex);
+
+        super("database-table-icon", objectStoreIndex.name, null, objectStoreIndex, false);
+
+        this._objectStoreIndex = objectStoreIndex;
+    }
+
+    // Public
+
+    get objectStoreIndex()
+    {
+        return this._objectStoreIndex;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js
new file mode 100644
index 000000000..1eca00808
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseObjectStoreTreeElement.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseObjectStoreTreeElement = class IndexedDatabaseObjectStoreTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(objectStore)
+    {
+        console.assert(objectStore instanceof WebInspector.IndexedDatabaseObjectStore);
+
+        super("database-table-icon", objectStore.name, null, objectStore, !!objectStore.indexes.length);
+
+        this._objectStore = objectStore;
+    }
+
+    // Public
+
+    get objectStore()
+    {
+        return this._objectStore;
+    }
+
+    // Overrides from TreeElement (Protected)
+
+    oncollapse()
+    {
+        this.shouldRefreshChildren = true;
+    }
+
+    onpopulate()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+
+        for (var objectStoreIndex of this._objectStore.indexes)
+            this.appendChild(new WebInspector.IndexedDatabaseObjectStoreIndexTreeElement(objectStoreIndex));
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js
new file mode 100644
index 000000000..7ab54d687
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IndexedDatabaseTreeElement.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IndexedDatabaseTreeElement = class IndexedDatabaseTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(indexedDatabase)
+    {
+        console.assert(indexedDatabase instanceof WebInspector.IndexedDatabase);
+
+        super("database-icon", indexedDatabase.name, null, indexedDatabase, !!indexedDatabase.objectStores.length);
+
+        this._indexedDatabase = indexedDatabase;
+    }
+
+    // Public
+
+    get indexedDatabase()
+    {
+        return this._indexedDatabase;
+    }
+
+    // Overrides from TreeElement (Protected)
+
+    oncollapse()
+    {
+        this.shouldRefreshChildren = true;
+    }
+
+    onpopulate()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+
+        for (var objectStore of this._indexedDatabase.objectStores)
+            this.appendChild(new WebInspector.IndexedDatabaseObjectStoreTreeElement(objectStore));
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
new file mode 100644
index 000000000..95e1d18ed
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.inline-swatch {
+    display: inline-block;
+    position: relative;
+    width: 1em;
+    height: 1em;
+    margin-right: 3px;
+    vertical-align: -2px;
+    /* Make a checkered background for transparent colors to show against. */
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
+                      linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
+    background-color: white;
+    background-size: 50%;
+    background-position: top left, bottom right;
+    background-repeat: no-repeat;
+    cursor: default;
+    overflow: hidden;
+}
+
+.inline-swatch.bezier {
+    margin-right: 2px;
+    content: url(../Images/CubicBezier.svg);
+    background: none;
+}
+
+.inline-swatch.bezier:hover {
+    filter: brightness(0.9);
+}
+
+.inline-swatch.bezier:active {
+    filter: brightness(0.8);
+}
+
+@media (-webkit-max-device-pixel-ratio: 1) {
+    /* Ensure the color swatch is even by even so that it looks okay checkered. */
+    .inline-swatch {
+        vertical-align: -1px;
+        width: 10px;
+        height: 10px;
+    }
+}
+
+.inline-swatch > span {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid hsla(0, 0%, 25%, 0.4);
+    pointer-events: none;
+}
+
+.inline-swatch:hover > span {
+    border-color: hsla(0, 0%, 25%, 0.8);
+}
+
+.inline-swatch:active > span {
+    border-color: hsl(0, 0%, 25%);
+}
+
+.inline-swatch.bezier > span {
+    display: none;
+}
+
diff --git a/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
new file mode 100644
index 000000000..34c97dc94
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js
@@ -0,0 +1,274 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.InlineSwatch = class InlineSwatch extends WebInspector.Object
+{
+    constructor(type, value, readOnly)
+    {
+        super();
+
+        this._type = type;
+
+        this._swatchElement = document.createElement("span");
+        this._swatchElement.classList.add("inline-swatch", this._type.split("-").lastValue);
+
+        switch (this._type) {
+        case WebInspector.InlineSwatch.Type.Bezier:
+            this._swatchElement.title = WebInspector.UIString("Click to open a cubic-bezier editor.");
+            break;
+        case WebInspector.InlineSwatch.Type.Gradient:
+            this._swatchElement.title = WebInspector.UIString("Click to select a gradient.");
+            break;
+        default:
+            console.assert(this._type === WebInspector.InlineSwatch.Type.Color);
+            this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
+            break;
+        }
+
+        if (!readOnly) {
+            this._swatchElement.addEventListener("click", this._swatchElementClicked.bind(this));
+            if (this._type === WebInspector.InlineSwatch.Type.Color)
+                this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+        }
+
+        this._swatchInnerElement = this._swatchElement.createChild("span");
+
+        this._value = value || this._fallbackValue();
+
+        this._updateSwatch();
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._swatchElement;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    set value(value)
+    {
+        this._value = value;
+        this._updateSwatch(true);
+    }
+
+    // Private
+
+    _fallbackValue()
+    {
+        switch (this._type) {
+        case WebInspector.InlineSwatch.Type.Bezier:
+            return WebInspector.CubicBezier.fromString("linear");
+        case WebInspector.InlineSwatch.Type.Gradient:
+            return WebInspector.Gradient.fromString("linear-gradient(transparent, transparent)");
+        case WebInspector.InlineSwatch.Type.Color:
+            return WebInspector.Color.fromString("white");
+        default:
+            return null;
+        }
+    }
+
+    _updateSwatch(dontFireEvents)
+    {
+        if (this._type === WebInspector.InlineSwatch.Type.Color || this._type === WebInspector.InlineSwatch.Type.Gradient)
+            this._swatchInnerElement.style.background = this._value ? this._value.toString() : null;
+
+        if (!dontFireEvents)
+            this.dispatchEventToListeners(WebInspector.InlineSwatch.Event.ValueChanged, {value: this._value});
+    }
+
+    _swatchElementClicked(event)
+    {
+        this.dispatchEventToListeners(WebInspector.InlineSwatch.Event.BeforeClicked);
+
+        if (this._type === WebInspector.InlineSwatch.Type.Color && event.shiftKey && this._value) {
+            let nextFormat = this._value.nextFormat();
+            console.assert(nextFormat);
+            if (!nextFormat)
+                return;
+
+            this._value.format = nextFormat;
+            this._updateSwatch();
+            return;
+        }
+
+        let bounds = WebInspector.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
+        let popover = new WebInspector.Popover(this);
+
+        let valueEditor = null;
+        if (this._type === WebInspector.InlineSwatch.Type.Bezier) {
+            valueEditor = new WebInspector.BezierEditor;
+            valueEditor.addEventListener(WebInspector.BezierEditor.Event.BezierChanged, this._valueEditorValueDidChange, this);
+        } else if (this._type === WebInspector.InlineSwatch.Type.Gradient) {
+            valueEditor = new WebInspector.GradientEditor;
+            valueEditor.addEventListener(WebInspector.GradientEditor.Event.GradientChanged, this._valueEditorValueDidChange, this);
+            valueEditor.addEventListener(WebInspector.GradientEditor.Event.ColorPickerToggled, (event) => popover.update());
+        } else {
+            valueEditor = new WebInspector.ColorPicker;
+            valueEditor.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._valueEditorValueDidChange, this);
+        }
+
+        popover.content = valueEditor.element;
+        popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+
+        let value = this._value || this._fallbackValue();
+        if (this._type === WebInspector.InlineSwatch.Type.Bezier)
+            valueEditor.bezier = value;
+        else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
+            valueEditor.gradient = value;
+        else
+            valueEditor.color = value;
+    }
+
+    _valueEditorValueDidChange(event)
+    {
+        if (this._type === WebInspector.InlineSwatch.Type.Bezier)
+            this._value = event.data.bezier;
+        else if (this._type === WebInspector.InlineSwatch.Type.Gradient)
+            this._value = event.data.gradient;
+        else
+            this._value = event.data.color;
+
+        this._updateSwatch();
+    }
+
+    _handleContextMenuEvent(event)
+    {
+        if (!this._value)
+            return;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        if (this._value.isKeyword() && this._value.format !== WebInspector.Color.Format.Keyword) {
+            contextMenu.appendItem(WebInspector.UIString("Format: Keyword"), () => {
+                this._value.format = WebInspector.Color.Format.Keyword;
+                this._updateSwatch();
+            });
+        }
+
+        let hexInfo = this._getNextValidHEXFormat();
+        if (hexInfo) {
+            contextMenu.appendItem(hexInfo.title, () => {
+                this._value.format = hexInfo.format;
+                this._updateSwatch();
+            });
+        }
+
+        if (this._value.simple && this._value.format !== WebInspector.Color.Format.HSL) {
+            contextMenu.appendItem(WebInspector.UIString("Format: HSL"), () => {
+                this._value.format = WebInspector.Color.Format.HSL;
+                this._updateSwatch();
+            });
+        } else if (this._value.format !== WebInspector.Color.Format.HSLA) {
+            contextMenu.appendItem(WebInspector.UIString("Format: HSLA"), () => {
+                this._value.format = WebInspector.Color.Format.HSLA;
+                this._updateSwatch();
+            });
+        }
+
+        if (this._value.simple && this._value.format !== WebInspector.Color.Format.RGB) {
+            contextMenu.appendItem(WebInspector.UIString("Format: RGB"), () => {
+                this._value.format = WebInspector.Color.Format.RGB;
+                this._updateSwatch();
+            });
+        } else if (this._value.format !== WebInspector.Color.Format.RGBA) {
+            contextMenu.appendItem(WebInspector.UIString("Format: RGBA"), () => {
+                this._value.format = WebInspector.Color.Format.RGBA;
+                this._updateSwatch();
+            });
+        }
+    }
+
+    _getNextValidHEXFormat()
+    {
+        if (this._type !== WebInspector.InlineSwatch.Type.Color)
+            return false;
+
+        function hexMatchesCurrentColor(hexInfo) {
+            let nextIsSimple = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.HEX;
+            if (nextIsSimple && !this._value.simple)
+                return false;
+
+            let nextIsShort = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.ShortHEXAlpha;
+            if (nextIsShort && !this._value.canBeSerializedAsShortHEX())
+                return false;
+
+            return true;
+        }
+
+        const hexFormats = [
+            {
+                format: WebInspector.Color.Format.ShortHEX,
+                title: WebInspector.UIString("Format: Short Hex")
+            },
+            {
+                format: WebInspector.Color.Format.ShortHEXAlpha,
+                title: WebInspector.UIString("Format: Short Hex with Alpha")
+            },
+            {
+                format: WebInspector.Color.Format.HEX,
+                title: WebInspector.UIString("Format: Hex")
+            },
+            {
+                format: WebInspector.Color.Format.HEXAlpha,
+                title: WebInspector.UIString("Format: Hex with Alpha")
+            }
+        ];
+
+        // FIXME: <https://webkit.org/b/152497> Arrow functions: "this" isn't lexically bound
+        let currentColorIsHEX = hexFormats.some(function(info) {
+            return info.format === this._value.format;
+        }.bind(this));
+
+        for (let i = 0; i < hexFormats.length; ++i) {
+            if (currentColorIsHEX && this._value.format !== hexFormats[i].format)
+                continue;
+
+            for (let j = ~~currentColorIsHEX; j < hexFormats.length; ++j) {
+                let nextIndex = (i + j) % hexFormats.length;
+                if (hexMatchesCurrentColor.call(this, hexFormats[nextIndex]))
+                    return hexFormats[nextIndex];
+            }
+            return null;
+        }
+        return hexFormats[0];
+    }
+};
+
+WebInspector.InlineSwatch.Type = {
+    Color: "inline-swatch-type-color",
+    Gradient: "inline-swatch-type-gradient",
+    Bezier: "inline-swatch-type-bezier"
+};
+
+WebInspector.InlineSwatch.Event = {
+    BeforeClicked: "inline-swatch-before-clicked",
+    ValueChanged: "inline-swatch-value-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css
new file mode 100644
index 000000000..63e63b5c6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.issue .icon {
+    background-image: url(../Images/Warning.svg);
+    content: '';
+}
+
+.issue.error .icon {
+    background-image: url(../Images/Error.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js
new file mode 100644
index 000000000..78581a1f9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/IssueTreeElement.js
@@ -0,0 +1,73 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.IssueTreeElement = class IssueTreeElement extends WebInspector.DebuggerTreeElement
+{
+    constructor(issueMessage)
+    {
+        var levelStyleClassName;
+        switch (issueMessage.level) {
+        case "error":
+            levelStyleClassName = WebInspector.IssueTreeElement.ErrorStyleClassName;
+            break;
+        case "warning":
+            levelStyleClassName = WebInspector.IssueTreeElement.WarningStyleClassName;
+            break;
+        }
+
+        super([WebInspector.IssueTreeElement.StyleClassName, levelStyleClassName], null, null, issueMessage, false);
+
+        this._issueMessage = issueMessage;
+        this._updateTitles();
+
+        this._issueMessage.addEventListener(WebInspector.IssueMessage.Event.DisplayLocationDidChange, this._updateTitles, this);
+    }
+
+    // Public
+
+    get issueMessage()
+    {
+        return this._issueMessage;
+    }
+
+    // Private
+
+    _updateTitles()
+    {
+        var displayLineNumber = this._issueMessage.displayLineNumber;
+        var displayColumnNumber = this._issueMessage.displayColumnNumber;
+        var title;
+        if (displayColumnNumber > 0)
+            title = WebInspector.UIString("Line %d:%d").format(displayLineNumber + 1, displayColumnNumber + 1); // The user visible line and column numbers are 1-based.
+        else
+            title = WebInspector.UIString("Line %d").format(displayLineNumber + 1); // The user visible line number is 1-based.
+
+        this.mainTitle = title + " " + this._issueMessage.text;
+    }
+};
+
+WebInspector.IssueTreeElement.StyleClassName = "issue";
+WebInspector.IssueTreeElement.ErrorStyleClassName = "error";
+WebInspector.IssueTreeElement.WarningStyleClassName = "warning";
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGridNode.js
new file mode 100644
index 000000000..09bf24c14
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGridNode.js
@@ -0,0 +1,165 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeDataGridNode = class LayerTreeDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(layer)
+    {
+        super();
+
+        this._outlets = {};
+        this.layer = layer;
+    }
+
+    // DataGridNode Overrides.
+
+    createCells()
+    {
+        super.createCells();
+
+        this._cellsWereCreated = true;
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var cell = columnIdentifier === "name" ? this._makeNameCell() : this._makeOutlet(columnIdentifier, document.createTextNode());
+        this._updateCell(columnIdentifier);
+        return cell;
+    }
+
+    // Public
+
+    get layer()
+    {
+        return this._layer;
+    }
+
+    set layer(layer)
+    {
+        this._layer = layer;
+
+        var domNode = WebInspector.domTreeManager.nodeForId(layer.nodeId);
+
+        this.data = {
+            name: domNode ? WebInspector.displayNameForNode(domNode) : WebInspector.UIString("Unknown node"),
+            paintCount: layer.paintCount || emDash,
+            memory: Number.bytesToString(layer.memory || 0)
+        };
+    }
+
+    get data()
+    {
+        return this._data;
+    }
+
+    set data(data)
+    {
+        Object.keys(data).forEach(function(columnIdentifier) {
+            if (this._data[columnIdentifier] === data[columnIdentifier])
+                return;
+
+            this._data[columnIdentifier] = data[columnIdentifier];
+            if (this._cellsWereCreated)
+                this._updateCell(columnIdentifier);
+        }, this);
+    }
+
+    // Private
+
+    _makeOutlet(name, element)
+    {
+        this._outlets[name] = element;
+        return element;
+    }
+
+    _makeNameCell()
+    {
+        var fragment = document.createDocumentFragment();
+
+        fragment.appendChild(document.createElement("img")).className = "icon";
+
+        var goToButton = this._makeOutlet("goToButton", fragment.appendChild(WebInspector.createGoToArrowButton()));
+        goToButton.addEventListener("click", this._goToArrowWasClicked.bind(this), false);
+
+        var label = this._makeOutlet("label", fragment.appendChild(document.createElement("span")));
+        label.className = "label";
+
+        var nameLabel = this._makeOutlet("nameLabel", label.appendChild(document.createElement("span")));
+        nameLabel.className = "name";
+
+        var pseudoLabel = this._makeOutlet("pseudoLabel", document.createElement("span"));
+        pseudoLabel.className = "pseudo-element";
+
+        var reflectionLabel = this._makeOutlet("reflectionLabel", document.createElement("span"));
+        reflectionLabel.className = "reflection";
+        reflectionLabel.textContent = " \u2014 " + WebInspector.UIString("Reflection");
+
+        return fragment;
+    }
+
+    _updateCell(columnIdentifier)
+    {
+        var data = this._data[columnIdentifier];
+        if (columnIdentifier === "name")
+            this._updateNameCellData(data);
+        else
+            this._outlets[columnIdentifier].textContent = data;
+    }
+
+    _updateNameCellData(data)
+    {
+        var layer = this._layer;
+        var label = this._outlets.label;
+
+        this._outlets.nameLabel.textContent = data;
+
+        if (WebInspector.domTreeManager.nodeForId(layer.nodeId))
+            label.parentNode.insertBefore(this._outlets.goToButton, label.parentNode.firstChild);
+        else if (this._outlets.goToButton.parentNode)
+            label.parentNode.removeChild(this._outlets.goToButton);
+
+        if (layer.pseudoElement)
+            label.appendChild(this._outlets.pseudoLabel).textContent = "::" + layer.pseudoElement;
+        else if (this._outlets.pseudoLabel.parentNode)
+            label.removeChild(this._outlets.pseudoLabel);
+
+        if (layer.isReflection)
+            label.appendChild(this._outlets.reflectionLabel);
+        else if (this._outlets.reflectionLabel.parentNode)
+            label.removeChild(this._outlets.reflectionLabel);
+
+        var element = this.element;
+        if (layer.isReflection)
+            element.classList.add("reflection");
+        else if (layer.pseudoElement)
+            element.classList.add("pseudo-element");
+    }
+
+    _goToArrowWasClicked()
+    {
+        var domNode = WebInspector.domTreeManager.nodeForId(this._layer.nodeId);
+        WebInspector.showMainFrameDOMTree(domNode);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css
new file mode 100644
index 000000000..3bbad4b23
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.css
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details.layer-tree > .content {
+    bottom: var(--console-prompt-min-height);
+}
+
+.panel.details.layer-tree .data-grid {
+    border-right: none;
+    border-left: none;
+    border-bottom: none;
+}
+
+.panel.details.layer-tree .name-column .icon {
+    content: url(../Images/DOMElement.svg);
+}
+
+.panel.details.layer-tree tr.reflection .name-column .icon {
+    content: url(../Images/Reflection.svg);
+}
+
+.panel.details.layer-tree tr.pseudo-element .name-column .icon {
+    content: url(../Images/PseudoElement.svg);
+}
+
+.panel.details.layer-tree .name-column :matches(.pseudo-element, .reflection) {
+    color: hsl(0, 0%, 50%);
+}
+
+.panel.details.layer-tree tr.selected .name-column :matches(.pseudo-element, .reflection) {
+    color: hsla(0, 0%, 100%, 0.75);
+}
+
+.panel.details.layer-tree .bottom-bar {
+    position: absolute;
+    display: flex;
+    bottom: 0;
+    height: var(--console-prompt-min-height);
+    width: 100%;
+    border-top: 1px solid var(--border-color);
+    background-color: white;
+}
+
+.panel.details.layer-tree .bottom-bar > div {
+    padding: 4px 6px;
+
+    line-height: 20px;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    display: flex;
+    flex: 1;
+}
+
+.panel.details.layer-tree .layers-memory-label {
+    justify-content: flex-end;
+}
+
+.layer-tree-popover {
+    padding: 5px;
+}
+
+.layer-tree-popover p {
+    margin: 0;
+}
+
+.layer-tree-popover ul {
+    list-style-type: none;
+    margin: 10px 0 0 0;
+    padding-left: 10px;
+}
+
+.layer-tree-popover li {
+    line-height: 1.3em;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js
new file mode 100644
index 000000000..1be711d02
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayerTreeDetailsSidebarPanel.js
@@ -0,0 +1,436 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayerTreeDetailsSidebarPanel = class LayerTreeDetailsSidebarPanel extends WebInspector.DOMDetailsSidebarPanel
+{
+    constructor()
+    {
+        super("layer-tree", WebInspector.UIString("Layers"), WebInspector.UIString("Layer"));
+
+        this._dataGridNodesByLayerId = new Map;
+
+        this.element.classList.add("layer-tree");
+
+        WebInspector.showShadowDOMSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
+
+        window.addEventListener("resize", this._windowResized.bind(this));
+
+        this._buildLayerInfoSection();
+        this._buildDataGridSection();
+        this._buildBottomBar();
+    }
+
+    // DetailsSidebarPanel Overrides.
+
+    shown()
+    {
+        WebInspector.layerTreeManager.addEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+        console.assert(this.parentSidebar);
+
+        this.needsRefresh();
+
+        super.shown();
+    }
+
+    hidden()
+    {
+        WebInspector.layerTreeManager.removeEventListener(WebInspector.LayerTreeManager.Event.LayerTreeDidChange, this._layerTreeDidChange, this);
+
+        super.hidden();
+    }
+
+    refresh()
+    {
+        if (!this.domNode)
+            return;
+
+        WebInspector.layerTreeManager.layersForNode(this.domNode, function(layerForNode, childLayers) {
+            this._unfilteredChildLayers = childLayers;
+            this._updateDisplayWithLayers(layerForNode, childLayers);
+        }.bind(this));
+    }
+
+    // DOMDetailsSidebarPanel Overrides
+
+    supportsDOMNode(nodeToInspect)
+    {
+        return WebInspector.layerTreeManager.supported && nodeToInspect.nodeType() === Node.ELEMENT_NODE;
+    }
+
+    // Private
+
+    _layerTreeDidChange(event)
+    {
+        this.needsRefresh();
+    }
+
+    _showShadowDOMSettingChanged(event)
+    {
+        if (this.selected)
+            this._updateDisplayWithLayers(this._layerForNode, this._unfilteredChildLayers);
+    }
+
+    _windowResized(event)
+    {
+        if (this._popover && this._popover.visible)
+            this._updatePopoverForSelectedNode();
+    }
+
+    _buildLayerInfoSection()
+    {
+        var rows = this._layerInfoRows = {};
+        var rowsArray = [];
+
+        rowsArray.push(rows["Width"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width")));
+        rowsArray.push(rows["Height"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height")));
+        rowsArray.push(rows["Paints"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Paints")));
+        rowsArray.push(rows["Memory"] = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Memory")));
+
+        this._layerInfoGroup = new WebInspector.DetailsSectionGroup(rowsArray);
+
+        var emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Layer Available"));
+        emptyRow.showEmptyMessage();
+        this._noLayerInformationGroup = new WebInspector.DetailsSectionGroup([emptyRow]);
+
+        this._layerInfoSection = new WebInspector.DetailsSection("layer-info", WebInspector.UIString("Layer Info"), [this._noLayerInformationGroup]);
+
+        this.contentView.element.appendChild(this._layerInfoSection.element);
+    }
+
+    _buildDataGridSection()
+    {
+        var columns = {name: {}, paintCount: {}, memory: {}};
+
+        columns.name.title = WebInspector.UIString("Node");
+        columns.name.sortable = false;
+
+        columns.paintCount.title = WebInspector.UIString("Paints");
+        columns.paintCount.sortable = true;
+        columns.paintCount.aligned = "right";
+        columns.paintCount.width = "50px";
+
+        columns.memory.title = WebInspector.UIString("Memory");
+        columns.memory.sortable = true;
+        columns.memory.aligned = "right";
+        columns.memory.width = "70px";
+
+        this._dataGrid = new WebInspector.DataGrid(columns);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sortDataGrid, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._selectedDataGridNodeChanged, this);
+
+        this.sortColumnIdentifierSetting = new WebInspector.Setting("layer-tree-details-sidebar-panel-sort", "memory");
+        this.sortOrderSetting = new WebInspector.Setting("layer-tree-details-sidebar-panel-sort-order", WebInspector.DataGrid.SortOrder.Descending);
+
+        var element = this._dataGrid.element;
+        element.classList.add("inline");
+        element.addEventListener("focus", this._dataGridGainedFocus.bind(this), false);
+        element.addEventListener("blur", this._dataGridLostFocus.bind(this), false);
+        element.addEventListener("click", this._dataGridWasClicked.bind(this), false);
+
+        this._childLayersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Child Layers"));
+        var group = new WebInspector.DetailsSectionGroup([this._childLayersRow]);
+        var section = new WebInspector.DetailsSection("layer-children", WebInspector.UIString("Child Layers"), [group], null, true);
+
+        this.contentView.element.appendChild(section.element);
+    }
+
+    _buildBottomBar()
+    {
+        var bottomBar = this.element.appendChild(document.createElement("div"));
+        bottomBar.className = "bottom-bar";
+
+        this._layersCountLabel = bottomBar.appendChild(document.createElement("div"));
+        this._layersCountLabel.className = "layers-count-label";
+
+        this._layersMemoryLabel = bottomBar.appendChild(document.createElement("div"));
+        this._layersMemoryLabel.className = "layers-memory-label";
+    }
+
+    _sortDataGrid()
+    {
+        var sortColumnIdentifier = this._dataGrid.sortColumnIdentifier;
+
+        function comparator(a, b)
+        {
+            var item1 = a.layer[sortColumnIdentifier] || 0;
+            var item2 = b.layer[sortColumnIdentifier] || 0;
+            return item1 - item2;
+        }
+
+        this._dataGrid.sortNodes(comparator);
+        this._updatePopoverForSelectedNode();
+    }
+
+    _selectedDataGridNodeChanged()
+    {
+        if (this._dataGrid.selectedNode) {
+            this._highlightSelectedNode();
+            this._showPopoverForSelectedNode();
+        } else {
+            WebInspector.domTreeManager.hideDOMNodeHighlight();
+            this._hidePopover();
+        }
+    }
+
+    _dataGridGainedFocus(event)
+    {
+        this._highlightSelectedNode();
+        this._showPopoverForSelectedNode();
+    }
+
+    _dataGridLostFocus(event)
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+        this._hidePopover();
+    }
+
+    _dataGridWasClicked(event)
+    {
+        if (this._dataGrid.selectedNode && event.target.parentNode.classList.contains("filler"))
+            this._dataGrid.selectedNode.deselect();
+    }
+
+    _highlightSelectedNode()
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        var layer = dataGridNode.layer;
+        if (layer.isGeneratedContent || layer.isReflection || layer.isAnonymous)
+            WebInspector.domTreeManager.highlightRect(layer.bounds, true);
+        else
+            WebInspector.domTreeManager.highlightDOMNode(layer.nodeId);
+    }
+
+    _updateDisplayWithLayers(layerForNode, childLayers)
+    {
+        if (!WebInspector.showShadowDOMSetting.value) {
+            childLayers = childLayers.filter(function(layer) {
+                return !layer.isInShadowTree;
+            });
+        }
+
+        this._updateLayerInfoSection(layerForNode);
+        this._updateDataGrid(layerForNode, childLayers);
+        this._updateMetrics(layerForNode, childLayers);
+
+        this._layerForNode = layerForNode;
+        this._childLayers = childLayers;
+    }
+
+    _updateLayerInfoSection(layer)
+    {
+        this._layerInfoSection.groups = layer ? [this._layerInfoGroup] : [this._noLayerInformationGroup];
+
+        if (!layer)
+            return;
+
+        this._layerInfoRows["Memory"].value = Number.bytesToString(layer.memory);
+        this._layerInfoRows["Width"].value = layer.compositedBounds.width + "px";
+        this._layerInfoRows["Height"].value = layer.compositedBounds.height + "px";
+        this._layerInfoRows["Paints"].value = layer.paintCount + "";
+    }
+
+    _updateDataGrid(layerForNode, childLayers)
+    {
+        let dataGrid = this._dataGrid;
+        let mutations = WebInspector.layerTreeManager.layerTreeMutations(this._childLayers, childLayers);
+
+        mutations.removals.forEach(function(layer) {
+            let node = this._dataGridNodesByLayerId.get(layer.layerId);
+            if (node) {
+                dataGrid.removeChild(node);
+                this._dataGridNodesByLayerId.delete(layer.layerId);
+            }
+        }, this);
+
+        mutations.additions.forEach(function(layer) {
+            let node = this._dataGridNodeForLayer(layer);
+            if (node)
+                dataGrid.appendChild(node);
+        }, this);
+
+        mutations.preserved.forEach(function(layer) {
+            let node = this._dataGridNodesByLayerId.get(layer.layerId);
+            if (node)
+                node.layer = layer;
+        }, this);
+
+        this._sortDataGrid();
+
+        this._childLayersRow.dataGrid = !isEmptyObject(childLayers) ? this._dataGrid : null;
+    }
+
+    _dataGridNodeForLayer(layer)
+    {
+        let node = new WebInspector.LayerTreeDataGridNode(layer);
+        this._dataGridNodesByLayerId.set(layer.layerId, node);
+
+        return node;
+    }
+
+    _updateMetrics(layerForNode, childLayers)
+    {
+        var layerCount = 0;
+        var totalMemory = 0;
+
+        if (layerForNode) {
+            layerCount++;
+            totalMemory += layerForNode.memory || 0;
+        }
+
+        childLayers.forEach(function(layer) {
+            layerCount++;
+            totalMemory += layer.memory || 0;
+        });
+
+        this._layersCountLabel.textContent = WebInspector.UIString("Layer Count: %d").format(layerCount);
+        this._layersMemoryLabel.textContent = WebInspector.UIString("Memory: %s").format(Number.bytesToString(totalMemory));
+    }
+
+    _showPopoverForSelectedNode()
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        this._contentForPopover(dataGridNode.layer, function(content) {
+            if (dataGridNode === this._dataGrid.selectedNode)
+                this._updatePopoverForSelectedNode(content);
+        }.bind(this));
+    }
+
+    _updatePopoverForSelectedNode(content)
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return;
+
+        var popover = this._popover;
+        if (!popover)
+            popover = this._popover = new WebInspector.Popover;
+
+        var targetFrame = WebInspector.Rect.rectFromClientRect(dataGridNode.element.getBoundingClientRect());
+
+        if (content)
+            popover.content = content;
+
+        popover.present(targetFrame.pad(2), [WebInspector.RectEdge.MIN_X]);
+    }
+
+    _hidePopover()
+    {
+        if (this._popover)
+            this._popover.dismiss();
+    }
+
+    _contentForPopover(layer, callback)
+    {
+        var content = document.createElement("div");
+        content.className = "layer-tree-popover";
+
+        content.appendChild(document.createElement("p")).textContent = WebInspector.UIString("Reasons for compositing:");
+
+        var list = content.appendChild(document.createElement("ul"));
+
+        WebInspector.layerTreeManager.reasonsForCompositingLayer(layer, function(compositingReasons) {
+            if (isEmptyObject(compositingReasons)) {
+                callback(content);
+                return;
+            }
+
+            this._populateListOfCompositingReasons(list, compositingReasons);
+
+            callback(content);
+        }.bind(this));
+
+        return content;
+    }
+
+    _populateListOfCompositingReasons(list, compositingReasons)
+    {
+        function addReason(reason)
+        {
+            list.appendChild(document.createElement("li")).textContent = reason;
+        }
+
+        if (compositingReasons.transform3D)
+            addReason(WebInspector.UIString("Element has a 3D transform"));
+        if (compositingReasons.video)
+            addReason(WebInspector.UIString("Element is <video>"));
+        if (compositingReasons.canvas)
+            addReason(WebInspector.UIString("Element is <canvas>"));
+        if (compositingReasons.plugin)
+            addReason(WebInspector.UIString("Element is a plug-in"));
+        if (compositingReasons.iFrame)
+            addReason(WebInspector.UIString("Element is <iframe>"));
+        if (compositingReasons.backfaceVisibilityHidden)
+            addReason(WebInspector.UIString("Element has “backface-visibility: hidden” style"));
+        if (compositingReasons.clipsCompositingDescendants)
+            addReason(WebInspector.UIString("Element clips compositing descendants"));
+        if (compositingReasons.animation)
+            addReason(WebInspector.UIString("Element is animated"));
+        if (compositingReasons.filters)
+            addReason(WebInspector.UIString("Element has CSS filters applied"));
+        if (compositingReasons.positionFixed)
+            addReason(WebInspector.UIString("Element has “position: fixed” style"));
+        if (compositingReasons.positionSticky)
+            addReason(WebInspector.UIString("Element has “position: sticky” style"));
+        if (compositingReasons.overflowScrollingTouch)
+            addReason(WebInspector.UIString("Element has “-webkit-overflow-scrolling: touch” style"));
+        if (compositingReasons.stacking)
+            addReason(WebInspector.UIString("Element establishes a stacking context"));
+        if (compositingReasons.overlap)
+            addReason(WebInspector.UIString("Element overlaps other compositing element"));
+        if (compositingReasons.negativeZIndexChildren)
+            addReason(WebInspector.UIString("Element has children with a negative z-index"));
+        if (compositingReasons.transformWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has a 2D transform and composited descendants"));
+        if (compositingReasons.opacityWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has opacity applied and composited descendants"));
+        if (compositingReasons.maskWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element is masked and composited descendants"));
+        if (compositingReasons.reflectionWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has a reflection and composited descendants"));
+        if (compositingReasons.filterWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has CSS filters applied and composited descendants"));
+        if (compositingReasons.blendingWithCompositedDescendants)
+            addReason(WebInspector.UIString("Element has CSS blending applied and composited descendants"));
+        if (compositingReasons.isolatesCompositedBlendingDescendants)
+            addReason(WebInspector.UIString("Element is a stacking context and has composited descendants with CSS blending applied"));
+        if (compositingReasons.perspective)
+            addReason(WebInspector.UIString("Element has perspective applied"));
+        if (compositingReasons.preserve3D)
+            addReason(WebInspector.UIString("Element has “transform-style: preserve-3d” style"));
+        if (compositingReasons.willChange)
+            addReason(WebInspector.UIString("Element has “will-change” style with includes opacity, transform, transform-style, perspective, filter or backdrop-filter"));
+        if (compositingReasons.root)
+            addReason(WebInspector.UIString("Element is the root element"));
+        if (compositingReasons.blending)
+            addReason(WebInspector.UIString("Element has “blend-mode” style"));
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGrid.js
new file mode 100644
index 000000000..a16c24335
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGrid.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineDataGrid = class LayoutTimelineDataGrid extends WebInspector.TimelineDataGrid
+{
+    // Protected
+
+    callFramePopoverAnchorElement()
+    {
+        return this.selectedNode.elementWithColumnIdentifier("location");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js
new file mode 100644
index 000000000..9f71d167f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineDataGridNode = class LayoutTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(layoutTimelineRecord, baseStartTime)
+    {
+        super(false, null);
+
+        this._record = layoutTimelineRecord;
+        this._baseStartTime = baseStartTime || 0;
+    }
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    }
+
+    get records()
+    {
+        return [this._record];
+    }
+
+    get data()
+    {
+        if (!this._cachedData) {
+            this._cachedData = {
+                eventType: this._record.eventType,
+                width: this._record.width,
+                height: this._record.height,
+                area: this._record.width * this._record.height,
+                startTime: this._record.startTime,
+                totalTime: this._record.duration,
+                location: this._record.initiatorCallFrame,
+            };
+        }
+
+        return this._cachedData;
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "eventType":
+            return WebInspector.LayoutTimelineRecord.displayNameForEventType(value);
+
+        case "width":
+        case "height":
+            return isNaN(value) ? emDash : WebInspector.UIString("%fpx").format(value);
+
+        case "area":
+            return isNaN(value) ? emDash : WebInspector.UIString("%fpx²").format(value);
+
+        case "startTime":
+            return isNaN(value) ? emDash : Number.secondsToString(value - this._baseStartTime, true);
+
+        case "totalTime":
+            return isNaN(value) ? emDash : Number.secondsToString(value, true);
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.css
new file mode 100644
index 000000000..893548716
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-overview-graph.layout > .graph-row {
+    height: 16px;
+}
+
+.timeline-overview-graph.layout > .graph-row > .timeline-record-bar {
+    height: 12px;
+    margin-top: 4px;
+}
+
+.timeline-overview-graph.layout > .graph-row > .timeline-record-bar > .segment {
+    border-radius: 2px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js
new file mode 100644
index 000000000..68033143d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js
@@ -0,0 +1,113 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineOverviewGraph = class LayoutTimelineOverviewGraph extends WebInspector.TimelineOverviewGraph
+{
+    constructor(timeline, timelineOverview)
+    {
+        super(timelineOverview);
+
+        this.element.classList.add("layout");
+
+        this._layoutTimeline = timeline;
+        this._layoutTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
+
+        this.reset();
+    }
+
+    // Public
+
+    reset()
+    {
+        super.reset();
+
+        function createRecordRow()
+        {
+            var element = document.createElement("div");
+            element.className = "graph-row";
+            this.element.appendChild(element);
+            return {element, recordBars: [], records: []};
+        }
+
+        this.element.removeChildren();
+
+        this._timelineRecordBarMap = new Map;
+        this._timelineLayoutRecordRow = createRecordRow.call(this);
+        this._timelinePaintRecordRow = createRecordRow.call(this);
+    }
+
+    // Protected
+
+    layout()
+    {
+        this._updateRowLayout(this._timelinePaintRecordRow);
+        this._updateRowLayout(this._timelineLayoutRecordRow);
+    }
+
+    // Private
+
+    _updateRowLayout(row)
+    {
+        var secondsPerPixel = this.timelineOverview.secondsPerPixel;
+        var recordBarIndex = 0;
+
+        function createBar(records, renderMode)
+        {
+            var timelineRecordBar = row.recordBars[recordBarIndex];
+            if (!timelineRecordBar)
+                timelineRecordBar = row.recordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
+            else {
+                timelineRecordBar.renderMode = renderMode;
+                timelineRecordBar.records = records;
+            }
+
+            timelineRecordBar.refresh(this);
+            if (!timelineRecordBar.element.parentNode)
+                row.element.appendChild(timelineRecordBar.element);
+            ++recordBarIndex;
+        }
+
+        WebInspector.TimelineRecordBar.createCombinedBars(row.records, secondsPerPixel, this, createBar.bind(this));
+
+        // Remove the remaining unused TimelineRecordBars.
+        for (; recordBarIndex < row.recordBars.length; ++recordBarIndex) {
+            row.recordBars[recordBarIndex].records = null;
+            row.recordBars[recordBarIndex].element.remove();
+        }
+    }
+
+    _layoutTimelineRecordAdded(event)
+    {
+        var layoutTimelineRecord = event.data.record;
+        console.assert(layoutTimelineRecord instanceof WebInspector.LayoutTimelineRecord);
+
+        if (layoutTimelineRecord.eventType === WebInspector.LayoutTimelineRecord.EventType.Paint || layoutTimelineRecord.eventType === WebInspector.LayoutTimelineRecord.EventType.Composite)
+            this._timelinePaintRecordRow.records.push(layoutTimelineRecord);
+        else
+            this._timelineLayoutRecordRow.records.push(layoutTimelineRecord);
+
+        this.needsLayout();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css
new file mode 100644
index 000000000..2830d3a7a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.css
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.layout > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view.layout > .data-grid .eventType-column {
+    border-right: none;
+}
+
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.layout .item .subtitle {
+    display: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
new file mode 100644
index 000000000..bde64b727
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
@@ -0,0 +1,339 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LayoutTimelineView = class LayoutTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.Layout, timeline);
+
+        this.navigationSidebarTreeOutline.element.classList.add("layout");
+
+        var columns = {eventType: {}, location: {}, width: {}, height: {}, startTime: {}, totalTime: {}};
+
+        columns.eventType.title = WebInspector.UIString("Type");
+        columns.eventType.width = "15%";
+
+        var typeToLabelMap = new Map;
+        for (var key in WebInspector.LayoutTimelineRecord.EventType) {
+            var value = WebInspector.LayoutTimelineRecord.EventType[key];
+            typeToLabelMap.set(value, WebInspector.LayoutTimelineRecord.displayNameForEventType(value));
+        }
+
+        columns.eventType.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("layout", typeToLabelMap);
+        columns.eventType.hidden = true;
+        this._scopeBar = columns.eventType.scopeBar;
+
+        columns.location.title = WebInspector.UIString("Initiator");
+        columns.location.width = "25%";
+
+        columns.width.title = WebInspector.UIString("Width");
+        columns.width.width = "8%";
+
+        columns.height.title = WebInspector.UIString("Height");
+        columns.height.width = "8%";
+
+        columns.startTime.title = WebInspector.UIString("Start Time");
+        columns.startTime.width = "8%";
+        columns.startTime.aligned = "right";
+
+        columns.totalTime.title = WebInspector.UIString("Duration");
+        columns.totalTime.width = "8%";
+        columns.totalTime.aligned = "right";
+
+        for (var column in columns)
+            columns[column].sortable = true;
+
+        this._dataGrid = new WebInspector.LayoutTimelineDataGrid(this.navigationSidebarTreeOutline, columns);
+        this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("layout-timeline-view-sort", "startTime");
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("layout-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);
+
+        this._hoveredTreeElement = null;
+        this._hoveredDataGridNode = null;
+        this._showingHighlight = false;
+        this._showingHighlightForRecord = null;
+
+        this._dataGrid.element.addEventListener("mouseover", this._mouseOverDataGrid.bind(this));
+        this._dataGrid.element.addEventListener("mouseleave", this._mouseLeaveDataGrid.bind(this));
+        this.navigationSidebarTreeOutline.element.addEventListener("mouseover", this._mouseOverTreeOutline.bind(this));
+        this.navigationSidebarTreeOutline.element.addEventListener("mouseleave", this._mouseLeaveTreeOutline.bind(this));
+
+        this.element.classList.add("layout");
+        this.addSubview(this._dataGrid);
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._layoutTimelineRecordAdded, this);
+
+        this._pendingRecords = [];
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString("Records");
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._updateHighlight();
+
+        this._dataGrid.shown();
+    }
+
+    hidden()
+    {
+        this._hideHighlightIfNeeded();
+
+        this._dataGrid.hidden();
+
+        super.hidden();
+    }
+
+    closed()
+    {
+        console.assert(this.representedObject instanceof WebInspector.Timeline);
+        this.representedObject.removeEventListener(null, null, this);
+
+        this._dataGrid.closed();
+    }
+
+    filterDidChange()
+    {
+        super.filterDidChange();
+
+        this._updateHighlight();
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement)
+    {
+        return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._hideHighlightIfNeeded();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+    }
+
+    // Protected
+
+    treeElementPathComponentSelected(event)
+    {
+        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
+        if (!dataGridNode)
+            return;
+        dataGridNode.revealAndSelect();
+    }
+
+    treeElementDeselected(treeElement)
+    {
+        super.treeElementDeselected(treeElement);
+
+        this._updateHighlight();
+    }
+
+    treeElementSelected(treeElement, selectedByUser)
+    {
+        if (this._dataGrid.shouldIgnoreSelectionEvent())
+            return;
+
+        super.treeElementSelected(treeElement, selectedByUser);
+
+        this._updateHighlight();
+    }
+
+    layout()
+    {
+        this._processPendingRecords();
+    }
+
+    // Private
+
+    _processPendingRecords()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (var layoutTimelineRecord of this._pendingRecords) {
+            var treeElement = new WebInspector.TimelineRecordTreeElement(layoutTimelineRecord, WebInspector.SourceCodeLocation.NameStyle.Short);
+            var dataGridNode = new WebInspector.LayoutTimelineDataGridNode(layoutTimelineRecord, this.zeroTime);
+
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+
+            var stack = [{children: layoutTimelineRecord.children, parentTreeElement: treeElement, index: 0}];
+            while (stack.length) {
+                var entry = stack.lastValue;
+                if (entry.index >= entry.children.length) {
+                    stack.pop();
+                    continue;
+                }
+
+                var childRecord = entry.children[entry.index];
+                console.assert(childRecord.type === WebInspector.TimelineRecord.Type.Layout, childRecord);
+
+                var childTreeElement = new WebInspector.TimelineRecordTreeElement(childRecord, WebInspector.SourceCodeLocation.NameStyle.Short);
+                var layoutDataGridNode = new WebInspector.LayoutTimelineDataGridNode(childRecord, this.zeroTime);
+                console.assert(entry.parentTreeElement, "entry without parent!");
+                this._dataGrid.addRowInSortOrder(childTreeElement, layoutDataGridNode, entry.parentTreeElement);
+
+                if (childTreeElement && childRecord.children.length)
+                    stack.push({children: childRecord.children, parentTreeElement: childTreeElement, index: 0});
+                ++entry.index;
+            }
+        }
+
+        this._pendingRecords = [];
+    }
+
+    _layoutTimelineRecordAdded(event)
+    {
+        var layoutTimelineRecord = event.data.record;
+        console.assert(layoutTimelineRecord instanceof WebInspector.LayoutTimelineRecord);
+
+        // Only add top-level records, to avoid processing child records multiple times.
+        if (layoutTimelineRecord.parent instanceof WebInspector.LayoutTimelineRecord)
+            return;
+
+        this._pendingRecords.push(layoutTimelineRecord);
+
+        this.needsLayout();
+    }
+
+    _dataGridFiltersDidChange(event)
+    {
+        this.timelineSidebarPanel.updateFilter();
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _updateHighlight()
+    {
+        var record = this._hoveredOrSelectedRecord();
+        if (!record) {
+            this._hideHighlightIfNeeded();
+            return;
+        }
+
+        this._showHighlightForRecord(record);
+    }
+
+    _showHighlightForRecord(record)
+    {
+        if (this._showingHighlightForRecord === record)
+            return;
+
+        this._showingHighlightForRecord = record;
+
+        const contentColor = {r: 111, g: 168, b: 220, a: 0.66};
+        const outlineColor = {r: 255, g: 229, b: 153, a: 0.66};
+
+        var quad = record.quad;
+        if (quad) {
+            DOMAgent.highlightQuad(quad.toProtocol(), contentColor, outlineColor);
+            this._showingHighlight = true;
+            return;
+        }
+
+        // This record doesn't have a highlight, so hide any existing highlight.
+        if (this._showingHighlight) {
+            this._showingHighlight = false;
+            DOMAgent.hideHighlight();
+        }
+    }
+
+    _hideHighlightIfNeeded()
+    {
+        this._showingHighlightForRecord = null;
+
+        if (this._showingHighlight) {
+            this._showingHighlight = false;
+            DOMAgent.hideHighlight();
+        }
+    }
+
+    _hoveredOrSelectedRecord()
+    {
+        if (this._hoveredDataGridNode)
+            return this._hoveredDataGridNode.record;
+
+        if (this._hoveredTreeElement)
+            return this._hoveredTreeElement.record;
+
+        if (this._dataGrid.selectedNode) {
+            var treeElement = this._dataGrid.treeElementForDataGridNode(this._dataGrid.selectedNode);
+            if (treeElement.revealed())
+                return this._dataGrid.selectedNode.record;
+        }
+
+        return null;
+    }
+
+    _mouseOverDataGrid(event)
+    {
+        var hoveredDataGridNode = this._dataGrid.dataGridNodeFromNode(event.target);
+        if (!hoveredDataGridNode)
+            return;
+
+        this._hoveredDataGridNode = hoveredDataGridNode;
+        this._updateHighlight();
+    }
+
+    _mouseLeaveDataGrid(event)
+    {
+        this._hoveredDataGridNode = null;
+        this._updateHighlight();
+    }
+
+    _mouseOverTreeOutline(event)
+    {
+        var hoveredTreeElement = this.navigationSidebarTreeOutline.treeElementFromNode(event.target);
+        if (!hoveredTreeElement)
+            return;
+
+        this._hoveredTreeElement = hoveredTreeElement;
+        this._updateHighlight();
+    }
+
+    _mouseLeaveTreeOutline(event)
+    {
+        this._hoveredTreeElement = null;
+        this._updateHighlight();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/LineChart.js b/Source/WebInspectorUI/UserInterface/Views/LineChart.js
new file mode 100644
index 000000000..7b2fb9ba2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LineChart.js
@@ -0,0 +1,111 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// LineChart creates a single filled line chart.
+//
+// Initialize the chart with a size. You can then include a new point
+// in the line chart by providing an (x, y) point via `addPoint`.
+//
+// SVG:
+//
+// - There is a single path for line.
+//
+//  <div class="line-chart">
+//      <svg width="800" height="75" viewbox="0 0 800 75">
+//          <path d="..."/>
+//      </svg>
+//  </div>
+
+WebInspector.LineChart = class LineChart
+{
+    constructor(size)
+    {
+        this._element = document.createElement("div");
+        this._element.classList.add("line-chart");
+
+        this._chartElement = this._element.appendChild(createSVGElement("svg"));
+        this._pathElement = this._chartElement.appendChild(createSVGElement("path"));
+
+        this._points = [];
+        this.size = size;
+    }
+
+    // Public
+
+    get element() { return this._element; }
+    get points() { return this._points; }
+
+    get size()
+    {
+        return this._size;
+    }
+
+    set size(size)
+    {
+        this._size = size;
+
+        this._chartElement.setAttribute("width", size.width);
+        this._chartElement.setAttribute("height", size.height);
+        this._chartElement.setAttribute("viewbox", `0 0 ${size.width} ${size.height}`);
+    }
+
+    addPoint(x, y)
+    {
+        this._points.push({x, y});
+    }
+
+    clear()
+    {
+        this._points = [];
+    }
+
+    needsLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
+    }
+
+    updateLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
+            this._scheduledLayoutUpdateIdentifier = undefined;
+        }
+
+        let pathComponents = [];
+        pathComponents.push(`M 0 ${this._size.height}`);
+        for (let point of this._points)
+            pathComponents.push(`L ${point.x} ${point.y}`);
+
+        let lastX = this._points.length ? this._points.lastValue.x : 0;
+        pathComponents.push(`L ${lastX} ${this._size.height}`);
+        pathComponents.push("Z");
+
+        let pathString = pathComponents.join(" ");
+        this._pathElement.setAttribute("d", pathString);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/LogContentView.css b/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
new file mode 100644
index 000000000..59c2ebef6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LogContentView.css
@@ -0,0 +1,217 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.log-scope-bar > li.unread::before {
+    content: '';
+    display: inline-block;
+    vertical-align: baseline;
+
+    margin-left: -10px;
+    margin-right: 2px;
+    width: 8px;
+    height: 8px;
+
+    -webkit-clip-path: circle(50% at 50% 50%);
+    animation: unread-background-pulse 1.5s ease-in-out infinite alternate-reverse;
+}
+
+.log-scope-bar > li.unread:hover::before {
+    visibility: hidden;
+}
+
+.log-scope-bar > li.unread.errors::before {
+    background-color: hsl(0, 95%, 72%);
+}
+
+.log-scope-bar > li.unread.warnings::before {
+    background-color: hsl(48, 98%, 51%);
+}
+
+.log-scope-bar > li.unread.logs::before {
+    background-color: hsl(213, 92%, 77%);
+}
+
+@keyframes unread-background-pulse {
+    from { background-color: transparent; }
+}
+
+.content-view.log {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.console-messages {
+    display: flex;
+    flex-direction: column;
+
+    word-wrap: break-word;
+
+    font-family: -apple-system, sans-serif;
+    font-size: 12px;
+
+    min-height: 100%;
+
+    outline: none;
+}
+
+.console-messages > :first-child {
+    margin-top: auto;
+}
+
+.console-item {
+    border-top: 1px solid hsl(0, 0%, 94%);
+}
+
+.console-error-level:not(.filtered-out, .filtered-out-by-search),
+.console-error-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
+    border-top-color: hsl(0, 100%, 92%);
+}
+
+.console-warning-level:not(.filtered-out, .filtered-out-by-search),
+.console-warning-level:not(.filtered-out, .filtered-out-by-search) + .console-item {
+    border-top-color: hsl(40, 100%, 90%);
+}
+
+.console-item::before {
+    position: absolute;
+    left: 4px;
+    height: 12px;
+    width: 12px;
+}
+
+.console-item.selected::after {
+    position: absolute;
+    display: block;
+    content: "";
+    left: 0;
+    top: -1px;
+    bottom: 0;
+    background: hsl(0, 0%, 60%);
+    width: 2px;
+    z-index: 10;
+}
+
+.console-messages:focus .console-item.selected .data-grid tr.selected {
+    background-color: hsl(210, 90%, 90%) !important;
+}
+
+.console-item .data-grid table.data {
+    background-image: none;
+    background-color: white;
+}
+
+.console-item .data-grid table.data tr:nth-child(even) {
+    background-color: hsl(214, 41%, 96%);
+}
+
+.console-item .data-grid tr.selected {
+    background-color: hsl(210, 0%, 90%) !important;
+}
+
+.console-messages:focus .console-item.selected {
+    background-color: hsl(210, 98%, 96%);
+    border-color: hsl(210, 90%, 93%);
+}
+
+.console-messages:focus .console-item.selected + .console-item {
+    border-top-color: hsl(210, 90%, 93%);
+}
+
+.console-messages:focus .console-item.selected::after {
+    background: hsl(210, 100%, 49%);
+}
+
+.console-messages:focus .console-item.selected .go-to-link {
+    color: hsl(210, 100%, 33%);
+}
+
+.console-group-title {
+    font-weight: bold;
+}
+
+.console-group-title::before {
+    content: "";
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+    background-size: 13px 13px;
+    top: 4px;
+    left: 4px;
+    width: 13px;
+    height: 13px;
+}
+
+.console-group.collapsed .console-group-title::before {
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+}
+
+.console-group.collapsed > .console-group-messages {
+    display: none;
+}
+
+.console-group {
+    position: relative;
+}
+
+.console-session + .console-session {
+    border-top: 3px dashed hsl(0, 0%, 94%);
+}
+
+.console-messages a {
+    color: hsl(0, 0%, 32%);
+    cursor: pointer;
+}
+
+.console-messages a:hover {
+    color: hsl(0, 0%, 14%);
+}
+
+.console-messages .data-grid {
+    clear: both;
+}
+
+.console-item.filtered-out {
+    display: none;
+}
+
+.search-in-progress .console-item.filtered-out-by-search {
+    display: none;
+}
+
+.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted {
+    color: black;
+    background-color: hsla(53, 83%, 53%, 0.2);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+}
+
+.search-in-progress .console-item:not(.filtered-out-by-search) .highlighted.selected {
+    background-color: hsla(53, 83%, 53%, 0.75);
+}
+
+.console-user-command::before,
+.console-messages:focus .console-item.selected .console-user-command::before,
+.console-user-command-result.console-log-level::before,
+.console-messages:focus .console-item.selected .console-user-command-result.console-log-level::before {
+        /* Accessible label alternative for icon indicating console input/output/warning/error, etc. */
+        alt: attr(data-labelprefix);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/LogContentView.js b/Source/WebInspectorUI/UserInterface/Views/LogContentView.js
new file mode 100644
index 000000000..dddf83a82
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LogContentView.js
@@ -0,0 +1,999 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// FIXME: <https://webkit.org/b/143545> Web Inspector: LogContentView should use higher level objects
+
+WebInspector.LogContentView = class LogContentView extends WebInspector.ContentView
+{
+    constructor(representedObject)
+    {
+        super(representedObject);
+
+        this._nestingLevel = 0;
+        this._selectedMessages = [];
+
+        // FIXME: Try to use a marker, instead of a list of messages that get re-added.
+        this._provisionalMessages = [];
+
+        this.element.classList.add("log");
+
+        this.messagesElement = document.createElement("div");
+        this.messagesElement.classList.add("console-messages");
+        this.messagesElement.tabIndex = 0;
+        this.messagesElement.setAttribute("role", "log");
+        this.messagesElement.addEventListener("mousedown", this._mousedown.bind(this));
+        this.messagesElement.addEventListener("keydown", this._keyDown.bind(this));
+        this.messagesElement.addEventListener("keypress", this._keyPress.bind(this));
+        this.messagesElement.addEventListener("dragstart", this._ondragstart.bind(this), true);
+        this.element.appendChild(this.messagesElement);
+
+        this.prompt = WebInspector.quickConsole.prompt;
+
+        this._keyboardShortcutCommandA = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "A");
+        this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
+
+        this._logViewController = new WebInspector.JavaScriptLogViewController(this.messagesElement, this.element, this.prompt, this, "console-prompt-history");
+        this._lastMessageView = null;
+
+        this._findBanner = new WebInspector.FindBanner(this, "console-find-banner", true);
+        this._findBanner.inputField.placeholder = WebInspector.UIString("Filter Console Log");
+
+        var scopeBarItems = [
+            new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.All, WebInspector.UIString("All"), true),
+            new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Errors, WebInspector.UIString("Errors"), false, "errors"),
+            new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Warnings, WebInspector.UIString("Warnings"), false, "warnings"),
+            new WebInspector.ScopeBarItem(WebInspector.LogContentView.Scopes.Logs, WebInspector.UIString("Logs"), false, "logs")
+        ];
+
+        this._scopeBar = new WebInspector.ScopeBar("log-scope-bar", scopeBarItems, scopeBarItems[0]);
+        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+        this._clearLogNavigationItem = new WebInspector.ButtonNavigationItem("clear-log", WebInspector.UIString("Clear log (%s or %s)").format(this._logViewController.messagesClearKeyboardShortcut.displayName, this._logViewController.messagesAlternateClearKeyboardShortcut.displayName), "Images/NavigationItemTrash.svg", 15, 15);
+        this._clearLogNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearLog, this);
+
+        var toolTip = WebInspector.UIString("Show console tab");
+        this._showConsoleTabNavigationItem = new WebInspector.ButtonNavigationItem("show-tab", toolTip, "Images/SplitToggleUp.svg", 16, 16);
+        this._showConsoleTabNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._showConsoleTab, this);
+
+        this.messagesElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
+
+        WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.SessionStarted, this._sessionStarted, this);
+        WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.MessageAdded, this._messageAdded, this);
+        WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.PreviousMessageRepeatCountUpdated, this._previousMessageRepeatCountUpdated, this);
+        WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._logCleared, this);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ProvisionalLoadStarted, this._provisionalLoadStarted, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        let navigationItems = [this._findBanner, this._scopeBar, this._clearLogNavigationItem];
+        if (WebInspector.isShowingSplitConsole())
+            navigationItems.push(this._showConsoleTabNavigationItem);
+        return navigationItems;
+    }
+
+    get scopeBar()
+    {
+        return this._scopeBar;
+    }
+
+    get logViewController()
+    {
+        return this._logViewController;
+    }
+
+    get scrollableElements()
+    {
+        return [this.element];
+    }
+
+    get shouldKeepElementsScrolledToBottom()
+    {
+        return true;
+    }
+
+    get searchInProgress()
+    {
+        return this.messagesElement.classList.contains(WebInspector.LogContentView.SearchInProgressStyleClassName);
+    }
+
+    didAppendConsoleMessageView(messageView)
+    {
+        console.assert(messageView instanceof WebInspector.ConsoleMessageView || messageView instanceof WebInspector.ConsoleCommandView);
+
+        WebInspector.quickConsole.needsLayout();
+
+        // Nest the message.
+        var type = messageView instanceof WebInspector.ConsoleCommandView ? null : messageView.message.type;
+        if (type !== WebInspector.ConsoleMessage.MessageType.EndGroup) {
+            var x = 16 * this._nestingLevel;
+            var messageElement = messageView.element;
+            messageElement.style.left = x + "px";
+            messageElement.style.width = "calc(100% - " + x + "px)";
+        }
+
+        // Update the nesting level.
+        switch (type) {
+        case WebInspector.ConsoleMessage.MessageType.StartGroup:
+        case WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed:
+            ++this._nestingLevel;
+            break;
+        case WebInspector.ConsoleMessage.MessageType.EndGroup:
+            if (this._nestingLevel > 0)
+                --this._nestingLevel;
+            break;
+        }
+
+        this._clearFocusableChildren();
+
+        // Some results don't populate until further backend dispatches occur (like the DOM tree).
+        // We want to remove focusable children after those pending dispatches too.
+        InspectorBackend.runAfterPendingDispatches(this._clearFocusableChildren.bind(this));
+
+        // We only auto show the console if the message is a non-synthetic result.
+        // This is when the user evaluated something directly in the prompt.
+        if (type !== WebInspector.ConsoleMessage.MessageType.Result || messageView.message.synthetic)
+            return;
+
+        if (!WebInspector.isShowingConsoleTab())
+            WebInspector.showSplitConsole();
+
+        this._logViewController.scrollToBottom();
+    }
+
+    get supportsSearch()
+    {
+        return true;
+    }
+
+    handleFindEvent(event)
+    {
+        if (!this.visible)
+            return;
+
+        this._findBanner.focus();
+    }
+
+    get supportsSave()
+    {
+        if (!this.visible)
+            return false;
+
+        if (WebInspector.isShowingSplitConsole())
+            return false;
+
+        return true;
+    }
+
+    get saveData()
+    {
+        return {url: "web-inspector:///Console.txt", content: this._formatMessagesAsData(false), forceSaveAs: true};
+    }
+
+    handleCopyEvent(event)
+    {
+        if (!this._selectedMessages.length)
+            return;
+
+        event.clipboardData.setData("text/plain", this._formatMessagesAsData(true));
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    findBannerRevealPreviousResult()
+    {
+        this.highlightPreviousSearchMatch();
+    }
+
+    highlightPreviousSearchMatch()
+    {
+        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
+            return;
+
+        var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) : this._searchMatches.length;
+        this._highlightSearchMatchAtIndex(index - 1);
+    }
+
+    findBannerRevealNextResult()
+    {
+        this.highlightNextSearchMatch();
+    }
+
+    highlightNextSearchMatch()
+    {
+        if (!this.searchInProgress || isEmptyObject(this._searchMatches))
+            return;
+
+        var index = this._selectedSearchMatch ? this._searchMatches.indexOf(this._selectedSearchMatch) + 1 : 0;
+        this._highlightSearchMatchAtIndex(index);
+    }
+
+    findBannerWantsToClearAndBlur(findBanner)
+    {
+        if (this._selectedMessages.length)
+            this.messagesElement.focus();
+        else
+            this.prompt.focus();
+    }
+
+    // Protected
+
+    layout()
+    {
+        this._scrollElementHeight = this.messagesElement.getBoundingClientRect().height;
+    }
+
+    // Private
+
+    _formatMessagesAsData(onlySelected)
+    {
+        var messages = this._allMessageElements();
+
+        if (onlySelected) {
+            messages = messages.filter(function(message) {
+                return message.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
+            });
+        }
+
+        var data = "";
+
+        var isPrefixOptional = messages.length <= 1 && onlySelected;
+        messages.forEach(function(messageElement, index) {
+            var messageView = messageElement.__messageView || messageElement.__commandView;
+            if (!messageView)
+                return;
+
+            if (index > 0)
+                data += "\n";
+            data += messageView.toClipboardString(isPrefixOptional);
+        });
+
+        return data;
+    }
+
+    _sessionStarted(event)
+    {
+        if (WebInspector.logManager.clearLogOnNavigateSetting.value) {
+            this._reappendProvisionalMessages();
+            return;
+        }
+
+        this._logViewController.startNewSession();
+
+        this._clearProvisionalState();
+    }
+
+    _scopeFromMessageLevel(level)
+    {
+        var messageLevel;
+
+        switch(level) {
+        case WebInspector.ConsoleMessage.MessageLevel.Warning:
+            messageLevel = WebInspector.LogContentView.Scopes.Warnings;
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Error:
+            messageLevel = WebInspector.LogContentView.Scopes.Errors;
+            break;
+        case WebInspector.ConsoleMessage.MessageLevel.Log:
+        case WebInspector.ConsoleMessage.MessageLevel.Info:
+        case WebInspector.ConsoleMessage.MessageLevel.Debug:
+            messageLevel = WebInspector.LogContentView.Scopes.Logs;
+            break;
+        }
+
+        return messageLevel;
+    }
+
+    _pulseScopeBarItemBorder(level)
+    {
+        var messageLevel = this._scopeFromMessageLevel(level);
+
+        if (!messageLevel)
+            return;
+
+        var item = this._scopeBar.item(messageLevel);
+
+        if (item && !item.selected && !this._scopeBar.item(WebInspector.LogContentView.Scopes.All).selected)
+            item.element.classList.add("unread");
+    }
+
+    _messageAdded(event)
+    {
+        if (this._startedProvisionalLoad)
+            this._provisionalMessages.push(event.data.message);
+
+        this._lastMessageView = this._logViewController.appendConsoleMessage(event.data.message);
+        if (this._lastMessageView.message.type !== WebInspector.ConsoleMessage.MessageType.EndGroup) {
+            this._pulseScopeBarItemBorder(this._lastMessageView.message.level);
+            this._filterMessageElements([this._lastMessageView.element]);
+        }
+    }
+
+    _previousMessageRepeatCountUpdated(event)
+    {        
+        if (this._logViewController.updatePreviousMessageRepeatCount(event.data.count) && this._lastMessageView)
+            this._pulseScopeBarItemBorder(this._lastMessageView.message.level);
+    }
+
+    _handleContextMenuEvent(event)
+    {
+        if (!window.getSelection().isCollapsed) {
+            // If there is a selection, we want to show our normal context menu
+            // (with Copy, etc.), and not Clear Log.
+            return;
+        }
+
+        // We don't want to show the custom menu for links in the console.
+        if (event.target.enclosingNodeOrSelfWithNodeName("a"))
+            return;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        contextMenu.appendItem(WebInspector.UIString("Clear Log"), this._clearLog.bind(this));
+        contextMenu.appendSeparator();
+
+        let clearLogOnReloadUIString = WebInspector.logManager.clearLogOnNavigateSetting.value ? WebInspector.UIString("Keep Log on Navigation") : WebInspector.UIString("Clear Log on Navigation");
+        contextMenu.appendItem(clearLogOnReloadUIString, this._toggleClearLogOnNavigateSetting.bind(this));
+    }
+
+    _mousedown(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        if (event.defaultPrevented) {
+            // Default was prevented on the event, so this means something deeper (like a disclosure triangle)
+            // handled the mouse down. In this case we want to clear the selection and don't make a new selection.
+            this._clearMessagesSelection();
+            return;
+        }
+
+        this._mouseDownWrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+        this._mouseDownShiftKey = event.shiftKey;
+        this._mouseDownCommandKey = event.metaKey;
+        this._mouseMoveIsRowSelection = false;
+
+        window.addEventListener("mousemove", this);
+        window.addEventListener("mouseup", this);
+    }
+
+    _targetInMessageCanBeSelected(target, message)
+    {
+        if (target.enclosingNodeOrSelfWithNodeName("a"))
+            return false;
+        return true;
+    }
+
+    _mousemove(event)
+    {
+        var selection = window.getSelection();
+        var wrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+
+        if (!wrapper) {
+            // No wrapper under the mouse, so look at the selection to try and find one.
+            if (!selection.isCollapsed) {
+                wrapper = selection.focusNode.parentNode.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+                selection.removeAllRanges();
+            }
+
+            if (!wrapper)
+                return;
+        }
+
+        if (!selection.isCollapsed)
+            this._clearMessagesSelection();
+
+        if (wrapper === this._mouseDownWrapper && !this._mouseMoveIsRowSelection)
+            return;
+
+        selection.removeAllRanges();
+
+        if (!this._mouseMoveIsRowSelection)
+            this._updateMessagesSelection(this._mouseDownWrapper, this._mouseDownCommandKey, this._mouseDownShiftKey, false);
+
+        this._updateMessagesSelection(wrapper, false, true, false);
+
+        this._mouseMoveIsRowSelection = true;
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _mouseup(event)
+    {
+        window.removeEventListener("mousemove", this);
+        window.removeEventListener("mouseup", this);
+
+        var selection = window.getSelection();
+        var wrapper = event.target.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
+
+        if (wrapper && (selection.isCollapsed || event.shiftKey)) {
+            selection.removeAllRanges();
+
+            if (this._targetInMessageCanBeSelected(event.target, wrapper)) {
+                var sameWrapper = wrapper === this._mouseDownWrapper;
+                this._updateMessagesSelection(wrapper, sameWrapper ? this._mouseDownCommandKey : false, sameWrapper ? this._mouseDownShiftKey : true, false);
+            }
+        } else if (!selection.isCollapsed) {
+            // There is a text selection, clear the row selection.
+            this._clearMessagesSelection();
+        } else if (!this._mouseDownWrapper) {
+            // The mouse didn't hit a console item, so clear the row selection.
+            this._clearMessagesSelection();
+
+            // Focus the prompt. Focusing the prompt needs to happen after the click to work.
+            setTimeout(function () { this.prompt.focus(); }.bind(this), 0);
+        }
+
+        delete this._mouseMoveIsRowSelection;
+        delete this._mouseDownWrapper;
+        delete this._mouseDownShiftKey;
+        delete this._mouseDownCommandKey;
+    }
+
+    _ondragstart(event)
+    {
+        if (event.target.enclosingNodeOrSelfWithClass(WebInspector.DOMTreeOutline.StyleClassName)) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousemove":
+            this._mousemove(event);
+            break;
+        case "mouseup":
+            this._mouseup(event);
+            break;
+        }
+    }
+
+    _updateMessagesSelection(message, multipleSelection, rangeSelection, shouldScrollIntoView)
+    {
+        console.assert(message);
+        if (!message)
+            return;
+
+        var alreadySelectedMessage = this._selectedMessages.includes(message);
+        if (alreadySelectedMessage && this._selectedMessages.length && multipleSelection) {
+            message.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+            this._selectedMessages.remove(message);
+            return;
+        }
+
+        if (!multipleSelection && !rangeSelection)
+            this._clearMessagesSelection();
+
+        if (rangeSelection) {
+            var messages = this._visibleMessageElements();
+
+            var refIndex = this._referenceMessageForRangeSelection ? messages.indexOf(this._referenceMessageForRangeSelection) : 0;
+            var targetIndex = messages.indexOf(message);
+
+            var newRange = [Math.min(refIndex, targetIndex), Math.max(refIndex, targetIndex)];
+
+            if (this._selectionRange && this._selectionRange[0] === newRange[0] && this._selectionRange[1] === newRange[1])
+                return;
+
+            var startIndex = this._selectionRange ? Math.min(this._selectionRange[0], newRange[0]) : newRange[0];
+            var endIndex = this._selectionRange ? Math.max(this._selectionRange[1], newRange[1]) : newRange[1];
+
+            for (var i = startIndex; i <= endIndex; ++i) {
+                var messageInRange = messages[i];
+                if (i >= newRange[0] && i <= newRange[1] && !messageInRange.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
+                    messageInRange.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+                    this._selectedMessages.push(messageInRange);
+                } else if (i < newRange[0] || i > newRange[1] && messageInRange.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
+                    messageInRange.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+                    this._selectedMessages.remove(messageInRange);
+                }
+            }
+
+            this._selectionRange = newRange;
+        } else {
+            message.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+            this._selectedMessages.push(message);
+        }
+
+        if (!rangeSelection)
+            this._referenceMessageForRangeSelection = message;
+
+        if (shouldScrollIntoView && !alreadySelectedMessage)
+            this._ensureMessageIsVisible(this._selectedMessages.lastValue);
+    }
+
+    _ensureMessageIsVisible(message)
+    {
+        if (!message)
+            return;
+
+        var y = this._positionForMessage(message).y;
+        if (y < 0) {
+            this.element.scrollTop += y;
+            return;
+        }
+
+        var nextMessage = this._nextMessage(message);
+        if (nextMessage) {
+            y = this._positionForMessage(nextMessage).y;
+            if (y > this._scrollElementHeight)
+                this.element.scrollTop += y - this._scrollElementHeight;
+        } else {
+            y += message.getBoundingClientRect().height;
+            if (y > this._scrollElementHeight)
+                this.element.scrollTop += y - this._scrollElementHeight;
+        }
+    }
+
+    _positionForMessage(message)
+    {
+        var pagePoint = window.webkitConvertPointFromNodeToPage(message, new WebKitPoint(0, 0));
+        return window.webkitConvertPointFromPageToNode(this.element, pagePoint);
+    }
+
+    _isMessageVisible(message)
+    {
+        var node = message;
+
+        if (node.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName))
+            return false;
+
+        if (this.searchInProgress && node.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName))
+            return false;
+
+        if (message.classList.contains("console-group-title"))
+            node = node.parentNode.parentNode;
+
+        while (node && node !== this.messagesElement) {
+            if (node.classList.contains("collapsed"))
+                return false;
+            node = node.parentNode;
+        }
+
+        return true;
+    }
+
+    _isMessageSelected(message)
+    {
+        return message.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
+    }
+
+    _clearMessagesSelection()
+    {
+        this._selectedMessages.forEach(function(message) {
+            message.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+        });
+        this._selectedMessages = [];
+        delete this._referenceMessageForRangeSelection;
+    }
+
+    _selectAllMessages()
+    {
+        this._clearMessagesSelection();
+
+        var messages = this._visibleMessageElements();
+        for (var i = 0; i < messages.length; ++i) {
+            var message = messages[i];
+            message.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+            this._selectedMessages.push(message);
+        }
+    }
+
+    _allMessageElements()
+    {
+        return Array.from(this.messagesElement.querySelectorAll(".console-message, .console-user-command"));
+    }
+
+    _unfilteredMessageElements()
+    {
+        return this._allMessageElements().filter(function(message) {
+            return !message.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName);
+        });
+    }
+
+    _visibleMessageElements()
+    {
+        var unfilteredMessages = this._unfilteredMessageElements();
+
+        if (!this.searchInProgress)
+            return unfilteredMessages;
+
+        return unfilteredMessages.filter(function(message) {
+            return !message.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
+        });
+    }
+
+    _logCleared(event)
+    {
+        this._logViewController.clear();
+
+        let searchQuery = this._findBanner.searchQuery;
+        if (searchQuery)
+            this._performSearch(searchQuery);
+    }
+
+    _showConsoleTab()
+    {
+        WebInspector.showConsoleTab();
+    }
+
+    _toggleClearLogOnNavigateSetting()
+    {
+        WebInspector.logManager.clearLogOnNavigateSetting.value = !WebInspector.logManager.clearLogOnNavigateSetting.value;
+    }
+
+    _clearLog()
+    {
+        for (var item of this._scopeBar.items)
+            item.element.classList.remove("unread");
+
+        WebInspector.logManager.requestClearMessages();
+    }
+
+    _scopeBarSelectionDidChange(event)
+    {
+        var item = this._scopeBar.selectedItems[0];
+        
+        if (item.id === WebInspector.LogContentView.Scopes.All) {
+            for (var item of this._scopeBar.items)
+                item.element.classList.remove("unread");
+        } else
+            item.element.classList.remove("unread");
+
+        this._filterMessageElements(this._allMessageElements());
+    }
+
+    _filterMessageElements(messageElements)
+    {
+        var showsAll = this._scopeBar.item(WebInspector.LogContentView.Scopes.All).selected;
+
+        messageElements.forEach(function(messageElement) {
+            var visible = showsAll || messageElement.__commandView instanceof WebInspector.ConsoleCommandView || messageElement.__message instanceof WebInspector.ConsoleCommandResultMessage;
+            if (!visible) {
+                var messageLevel = this._scopeFromMessageLevel(messageElement.__message.level);
+
+                if (messageLevel)
+                    visible = this._scopeBar.item(messageLevel).selected;
+            }
+
+            var classList = messageElement.classList;
+            if (visible)
+                classList.remove(WebInspector.LogContentView.FilteredOutStyleClassName);
+            else {
+                this._selectedMessages.remove(messageElement);
+                classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+                classList.add(WebInspector.LogContentView.FilteredOutStyleClassName);
+            }
+        }, this);
+
+        this._performSearch(this._findBanner.searchQuery);
+    }
+
+    _keyDown(event)
+    {
+        if (this._keyboardShortcutCommandA.matchesEvent(event))
+            this._commandAWasPressed(event);
+        else if (this._keyboardShortcutEsc.matchesEvent(event))
+            this._escapeWasPressed(event);
+        else if (event.keyIdentifier === "Up")
+            this._upArrowWasPressed(event);
+        else if (event.keyIdentifier === "Down")
+            this._downArrowWasPressed(event);
+        else if (event.keyIdentifier === "Left")
+            this._leftArrowWasPressed(event);
+        else if (event.keyIdentifier === "Right")
+            this._rightArrowWasPressed(event);
+        else if (event.keyIdentifier === "Enter" && event.metaKey)
+            this._commandEnterWasPressed(event);
+    }
+
+    _keyPress(event)
+    {
+        const isCommandC = event.metaKey && event.keyCode === 99;
+        if (!isCommandC)
+            this.prompt.focus();
+    }
+
+    _commandAWasPressed(event)
+    {
+        this._selectAllMessages();
+        event.preventDefault();
+    }
+
+    _escapeWasPressed(event)
+    {
+        if (this._selectedMessages.length)
+            this._clearMessagesSelection();
+        else
+            this.prompt.focus();
+
+        event.preventDefault();
+    }
+
+    _upArrowWasPressed(event)
+    {
+        var messages = this._visibleMessageElements();
+
+        if (!this._selectedMessages.length) {
+            if (messages.length)
+                this._updateMessagesSelection(messages.lastValue, false, false, true);
+            return;
+        }
+
+        var lastMessage = this._selectedMessages.lastValue;
+        var previousMessage = this._previousMessage(lastMessage);
+        if (previousMessage)
+            this._updateMessagesSelection(previousMessage, false, event.shiftKey, true);
+        else if (!event.shiftKey) {
+            this._clearMessagesSelection();
+            this._updateMessagesSelection(messages[0], false, false, true);
+        }
+
+        event.preventDefault();
+    }
+
+    _downArrowWasPressed(event)
+    {
+        var messages = this._visibleMessageElements();
+
+        if (!this._selectedMessages.length) {
+            if (messages.length)
+                this._updateMessagesSelection(messages[0], false, false, true);
+            return;
+        }
+
+        var lastMessage = this._selectedMessages.lastValue;
+        var nextMessage = this._nextMessage(lastMessage);
+        if (nextMessage)
+            this._updateMessagesSelection(nextMessage, false, event.shiftKey, true);
+        else if (!event.shiftKey) {
+            this._clearMessagesSelection();
+            this._updateMessagesSelection(messages.lastValue, false, false, true);
+        }
+
+        event.preventDefault();
+    }
+
+    _leftArrowWasPressed(event)
+    {
+        if (this._selectedMessages.length !== 1)
+            return;
+
+        var currentMessage = this._selectedMessages[0];
+        if (currentMessage.classList.contains("console-group-title")) {
+            currentMessage.parentNode.classList.add("collapsed");
+            event.preventDefault();
+        } else if (currentMessage.__messageView && currentMessage.__messageView.expandable) {
+            currentMessage.__messageView.collapse();
+            event.preventDefault();
+        }
+    }
+
+    _rightArrowWasPressed(event)
+    {
+        if (this._selectedMessages.length !== 1)
+            return;
+
+        var currentMessage = this._selectedMessages[0];
+        if (currentMessage.classList.contains("console-group-title")) {
+            currentMessage.parentNode.classList.remove("collapsed");
+            event.preventDefault();
+        } else if (currentMessage.__messageView && currentMessage.__messageView.expandable) {
+            currentMessage.__messageView.expand();
+            event.preventDefault();
+        }
+    }
+
+    _commandEnterWasPressed(event)
+    {
+        if (this._selectedMessages.length !== 1)
+            return;
+
+        let message = this._selectedMessages[0];
+        if (message.__commandView && message.__commandView.commandText) {
+            this._logViewController.consolePromptTextCommitted(null, message.__commandView.commandText);
+            event.preventDefault();
+        }
+    }
+
+    _previousMessage(message)
+    {
+        var messages = this._visibleMessageElements();
+        for (var i = messages.indexOf(message) - 1; i >= 0; --i) {
+            if (this._isMessageVisible(messages[i]))
+                return messages[i];
+        }
+    }
+
+    _nextMessage(message)
+    {
+        var messages = this._visibleMessageElements();
+        for (var i = messages.indexOf(message) + 1; i < messages.length; ++i) {
+            if (this._isMessageVisible(messages[i]))
+                return messages[i];
+        }
+    }
+
+    _clearFocusableChildren()
+    {
+        var focusableElements = this.messagesElement.querySelectorAll("[tabindex]");
+        for (var i = 0, count = focusableElements.length; i < count; ++i)
+            focusableElements[i].removeAttribute("tabindex");
+    }
+
+    findBannerPerformSearch(findBanner, searchTerms)
+    {
+        this._performSearch(searchTerms);
+    }
+
+    findBannerSearchCleared()
+    {
+        this._performSearch("");
+    }
+
+    revealNextSearchResult()
+    {
+        this.findBannerRevealNextResult();
+    }
+
+    revealPreviousSearchResult()
+    {
+        this.findBannerRevealPreviousResult();
+    }
+
+    _performSearch(searchTerms)
+    {
+        if (!isEmptyObject(this._searchHighlightDOMChanges))
+            WebInspector.revertDomChanges(this._searchHighlightDOMChanges);
+
+        if (searchTerms === "") {
+            delete this._selectedSearchMatch;
+            this._matchingSearchElements = [];
+            this.messagesElement.classList.remove(WebInspector.LogContentView.SearchInProgressStyleClassName);
+            return;
+        }
+
+        this.messagesElement.classList.add(WebInspector.LogContentView.SearchInProgressStyleClassName);
+
+        this._searchHighlightDOMChanges = [];
+        this._searchMatches = [];
+        this._selectedSearchMathIsValid = false;
+        let numberOfResults = 0;
+
+        var searchRegex = new RegExp(searchTerms.escapeForRegExp(), "gi");
+        this._unfilteredMessageElements().forEach(function(message) {
+            var matchRanges = [];
+            var text = message.textContent;
+            var match = searchRegex.exec(text);
+            while (match) {
+                numberOfResults++;
+                matchRanges.push({ offset: match.index, length: match[0].length });
+                match = searchRegex.exec(text);
+            }
+
+            if (!isEmptyObject(matchRanges))
+                this._highlightRanges(message, matchRanges);
+
+            var classList = message.classList;
+            if (!isEmptyObject(matchRanges) || message.__commandView instanceof WebInspector.ConsoleCommandView || message.__message instanceof WebInspector.ConsoleCommandResultMessage)
+                classList.remove(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
+            else
+                classList.add(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
+        }, this);
+
+        if (!this._selectedSearchMathIsValid && this._selectedSearchMatch) {
+            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+            delete this._selectedSearchMatch;
+        }
+
+        this._findBanner.numberOfResults = numberOfResults;
+    }
+
+    _highlightRanges(message, matchRanges)
+    {
+        var highlightedElements = WebInspector.highlightRangesWithStyleClass(message, matchRanges, WebInspector.LogContentView.HighlightedStyleClassName, this._searchHighlightDOMChanges);
+
+        console.assert(highlightedElements.length === matchRanges.length);
+
+        matchRanges.forEach(function(range, index) {
+            this._searchMatches.push({message, range, highlight: highlightedElements[index]});
+
+            if (this._selectedSearchMatch && !this._selectedSearchMathIsValid && this._selectedSearchMatch.message === message) {
+                this._selectedSearchMathIsValid = this._rangesOverlap(this._selectedSearchMatch.range, range);
+                if (this._selectedSearchMathIsValid) {
+                    delete this._selectedSearchMatch;
+                    this._highlightSearchMatchAtIndex(this._searchMatches.length - 1);
+                }
+            }
+        }, this);
+    }
+
+    _rangesOverlap(range1, range2)
+    {
+        return range1.offset <= range2.offset + range2.length && range2.offset <= range1.offset + range1.length;
+    }
+
+    _highlightSearchMatchAtIndex(index)
+    {
+        if (index >= this._searchMatches.length)
+            index = 0;
+        else if (index < 0)
+            index = this._searchMatches.length - 1;
+
+        if (this._selectedSearchMatch)
+            this._selectedSearchMatch.highlight.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
+
+        this._selectedSearchMatch = this._searchMatches[index];
+        this._selectedSearchMatch.highlight.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
+
+        this._ensureMessageIsVisible(this._selectedSearchMatch.message);
+    }
+
+    _provisionalLoadStarted()
+    {
+        this._startedProvisionalLoad = true;
+    }
+
+    _reappendProvisionalMessages()
+    {
+        if (!this._startedProvisionalLoad)
+            return;
+
+        this._startedProvisionalLoad = false;
+
+        for (var provisionalMessage of this._provisionalMessages) {
+            var messageView = this._logViewController.appendConsoleMessage(provisionalMessage);
+            if (messageView.message.type !== WebInspector.ConsoleMessage.MessageType.EndGroup)
+                this._filterMessageElements([messageView.element]);
+        }
+
+        this._provisionalMessages = [];
+    }
+
+    _clearProvisionalState()
+    {
+        this._startedProvisionalLoad = false;
+        this._provisionalMessages = [];
+    }
+};
+
+WebInspector.LogContentView.Scopes = {
+    All: "log-all",
+    Errors: "log-errors",
+    Warnings: "log-warnings",
+    Logs: "log-logs"
+};
+
+WebInspector.LogContentView.ItemWrapperStyleClassName = "console-item";
+WebInspector.LogContentView.FilteredOutStyleClassName = "filtered-out";
+WebInspector.LogContentView.SelectedStyleClassName = "selected";
+WebInspector.LogContentView.SearchInProgressStyleClassName = "search-in-progress";
+WebInspector.LogContentView.FilteredOutBySearchStyleClassName = "filtered-out-by-search";
+WebInspector.LogContentView.HighlightedStyleClassName = "highlighted";
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Views/LogIcon.css b/Source/WebInspectorUI/UserInterface/Views/LogIcon.css
new file mode 100644
index 000000000..3ec19e790
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LogIcon.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.log-icon .icon {
+    content: url(../Images/Console.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js
new file mode 100644
index 000000000..1344bf4af
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/LogTreeElement.js
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.LogTreeElement = class LogTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.LogObject);
+
+        super("log-icon", WebInspector.UIString("Console"), representedObject.startDate.toLocaleTimeString(), representedObject, false);
+
+        this._logObject = representedObject;
+    }
+
+    // Public
+
+    get logObject()
+    {
+        return this._logObject;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css
new file mode 100644
index 000000000..965547853
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Main.css
@@ -0,0 +1,376 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+
+    font-family: -apple-system, sans-serif;
+    font-size: 11px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    padding: 0;
+    margin: 0;
+
+    overflow: hidden;
+
+    -webkit-user-select: none;
+    -webkit-user-drag: none;
+
+    cursor: default;
+
+    -webkit-font-smoothing: subpixel-antialiased;
+
+    tab-size: 4; /* FIXME: This should be controlled by a setting. <rdar://problem/10593948> */
+}
+
+body:not(.mavericks) {
+    background-color: white;
+}
+
+body.docked.bottom {
+    border-top: 1px solid var(--border-color);
+}
+
+body.docked.right {
+    border-left: 1px solid var(--border-color);
+}
+
+#docked-resizer {
+    display: none;
+
+    z-index: var(--z-index-resizer);
+}
+
+body.docked #docked-resizer {
+    display: block;
+}
+
+body.docked.bottom #docked-resizer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+
+    cursor: row-resize;
+}
+
+body.docked.right #docked-resizer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 3px;
+
+    cursor: col-resize;
+}
+
+body.docked.bottom #toolbar {
+    cursor: row-resize;
+}
+
+body.docked.bottom #toolbar .item:not(.flexible-space) {
+    cursor: default;
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track::before {
+    content: "";
+    display: block;
+    background: hsl(212, 92%, 54%);
+    height: 1px;
+    margin: 8px 2px -8px 2px;
+}
+
+#main {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+
+    background-color: white;
+
+    /* The position and z-index are needed to make negative z-index work in the DOM tree. */
+    position: relative;
+    z-index: 0;
+}
+
+#navigation-sidebar {
+    width: 300px;
+}
+
+body.docked.right #navigation-sidebar.collapsed > .resizer {
+    pointer-events: none;
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+#tab-browser {
+    flex: 1;
+}
+
+#split-content-browser {
+    border-top: 1px solid var(--border-color);
+}
+
+#split-content-browser > .navigation-bar {
+    cursor: row-resize;
+
+    background-color: var(--panel-background-color);
+}
+
+#split-content-browser > .navigation-bar .item:not(.flexible-space) {
+    cursor: default;
+}
+
+#split-content-browser .hierarchical-path-component.log-icon .icon {
+    margin-left: 6px;
+    margin-right: 6px;
+    opacity: 0.7;
+}
+
+#split-content-browser .hierarchical-path-component.log-icon .title {
+    color: hsla(0, 0%, 0%, 0.75);
+}
+
+#split-content-browser .hierarchical-path-component.log-icon select {
+    display: none;
+}
+
+#split-content-browser > .navigation-bar > :matches(.hierarchical-path, .log-scope-bar) {
+    pointer-events: none;
+}
+
+#split-content-browser > .navigation-bar > .log-scope-bar > li {
+    pointer-events: all;
+}
+
+#details-sidebar {
+    width: 300px;
+}
+
+.message-text-view {
+    display: flex;
+    z-index: var(--z-index-popover);
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    padding-left: 20%;
+    padding-right: 20%;
+
+    justify-content: center;
+    align-items: center;
+
+    line-height: 20px;
+    white-space: pre-wrap;
+    text-align: center;
+
+    font-size: 18px;
+    font-weight: bold;
+
+    color: hsl(0, 0%, 74%);
+    background-color: white;
+}
+
+.message-text-view.error {
+    color: hsl(0, 86%, 47%);
+}
+
+.message-text-view.error::before {
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
+    vertical-align: bottom;
+
+    background-image: url(../Images/Error.svg);
+    background-size: 100% 100%;
+    content: "";
+}
+
+.resource-link {
+    display: block;
+}
+
+.resource-link + .resource-link {
+    margin-top: 2px;
+}
+
+.resource-link,
+.go-to-link {
+    color: hsl(0, 0%, 33%);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.go-to-link:not(.dont-float) {
+    float: right;
+    margin-left: 5px;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.go-to-arrow {
+    -webkit-appearance: none;
+
+    padding: 0;
+    margin: 0;
+    border: none;
+
+    background-color: transparent;
+    background-image: url(../Images/GoToArrow.svg#normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 10px 10px;
+
+    width: 16px;
+    height: 16px;
+
+ /* Workaround: for text boxes overlapping float:right. Give go-to arrows a z-index to ensure they are clickable.
+    <rdar://problem/11536832> Cannot access content view from Instruments navigator if name of file is truncated */
+    position: relative;
+    z-index: 1;
+}
+
+.go-to-arrow:active {
+    background-image: url(../Images/GoToArrow.svg#active);
+}
+
+:matches(:focus, .force-focus) .selected .go-to-arrow {
+    background-image: url(../Images/GoToArrow.svg#selected);
+}
+
+:matches(:focus, .force-focus) .selected .go-to-arrow:active {
+    background-image: url(../Images/GoToArrow.svg#selected-active);
+}
+
+.hidden {
+    display: none !important;
+}
+
+.expand-list-button {
+    -webkit-appearance: none;
+    text-decoration: underline;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    cursor: pointer;
+    color: black;
+}
+
+.node-link {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.node-link-list, .node-link-list li:not([hidden]) {
+    display: block;
+    margin: 0;
+    padding: 0;
+    line-height: 1.2;
+}
+
+.node-link-list li {
+    margin: 0 0 0.4em;
+}
+
+.node-link-list li:last-child {
+    margin: 0;
+}
+
+.value-with-clarification .clarification {
+    color: hsl(0, 0%, 40%);
+}
+
+.bouncy-highlight {
+    position: absolute;
+    z-index: var(--z-index-highlight);
+
+    box-shadow: inset hsl(50, 91%, 76%) 0 -1px 0, hsl(52, 56%, 60%) 0 1px 1px, hsla(0, 0%, 0%, 0.33) 0 1px 2px 1px;
+    text-shadow: white 0 0 2px;
+
+    background: linear-gradient(to bottom, hsl(54, 93%, 70%), hsl(50, 84%, 67%));
+    border-radius: 7px;
+
+    padding: 2px 4px;
+    margin-top: -2px;
+    margin-left: -4px;
+
+    -webkit-user-select: none;
+    pointer-events: none;
+
+    animation-name: bouncy-highlight-animation;
+    animation-duration: 750ms;
+    animation-timing-function: ease-in-out;
+
+    opacity: 0;
+}
+
+@keyframes bouncy-highlight-animation {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    12.5% {
+        transform: scale(1.25);
+    }
+
+    25% {
+        transform: scale(1);
+    }
+
+    62.5% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
new file mode 100644
index 000000000..ef1e60c69
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.css
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.memory-category-view {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.memory-category-view > .details {
+    width: 150px;
+    padding-left: 15px;
+    padding-top: 10px;
+    border-right: 1px solid var(--border-color);
+    font-family: '-webkit-system-font';
+    font-size: 12px;
+    color: hsl(0, 0%, 70%);
+}
+
+.memory-category-view > .details > .name {
+    color: black;
+}
+
+.memory-category-view > .graph {
+    position: relative;
+    bottom: -3px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
new file mode 100644
index 000000000..52398d6bc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryCategoryView.js
@@ -0,0 +1,115 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MemoryCategoryView = class MemoryCategoryView extends WebInspector.Object
+{
+    constructor(category, displayName)
+    {
+        super();
+
+        console.assert(typeof category === "string");
+
+        this._category = category;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("memory-category-view", category);
+
+        this._detailsElement = this._element.appendChild(document.createElement("div"));
+        this._detailsElement.classList.add("details");
+
+        let detailsNameElement = this._detailsElement.appendChild(document.createElement("span"));
+        detailsNameElement.classList.add("name");
+        detailsNameElement.textContent = displayName;
+        this._detailsElement.appendChild(document.createElement("br"));
+        this._detailsMaxElement = this._detailsElement.appendChild(document.createElement("span"));
+        this._detailsElement.appendChild(document.createElement("br"));
+        this._detailsMinElement = this._detailsElement.appendChild(document.createElement("span"));
+        this._updateDetails(NaN, NaN);
+
+        this._graphElement = this._element.appendChild(document.createElement("div"));
+        this._graphElement.classList.add("graph");
+
+        // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory Timeline View should be responsive / resizable
+        let size = new WebInspector.Size(800, 75);
+        this._chart = new WebInspector.LineChart(size);
+        this._graphElement.appendChild(this._chart.element);
+    }
+
+    // Public
+
+    get element() { return this._element; }
+    get category() { return this._category; }
+
+    clear()
+    {
+        this._chart.clear();
+        this._chart.needsLayout();
+    }
+
+    layoutWithDataPoints(dataPoints, lastTime, minSize, maxSize, xScale, yScale)
+    {
+        console.assert(minSize >= 0);
+        console.assert(maxSize >= 0);
+        console.assert(minSize <= maxSize);
+
+        this._updateDetails(minSize, maxSize);
+        this._chart.clear();
+
+        if (!dataPoints.length)
+            return;
+
+        // Ensure an empty graph is empty.
+        if (!maxSize)
+            return;
+
+        // Extend the first data point to the start so it doesn't look like we originate at zero size.
+        let firstX = 0;
+        let firstY = yScale(dataPoints[0].size);
+        this._chart.addPoint(firstX, firstY);
+
+        // Points for data points.
+        for (let dataPoint of dataPoints) {
+            let x = xScale(dataPoint.time);
+            let y = yScale(dataPoint.size);
+            this._chart.addPoint(x, y);
+        }
+
+        // Extend the last data point to the end time.
+        let lastDataPoint = dataPoints.lastValue;
+        let lastX = Math.floor(xScale(lastTime));
+        let lastY = yScale(lastDataPoint.size);
+        this._chart.addPoint(lastX, lastY);
+
+        this._chart.updateLayout();
+    }
+
+    // Private
+
+    _updateDetails(minSize, maxSize)
+    {
+        this._detailsMaxElement.textContent = WebInspector.UIString("Highest: %s").format(Number.isFinite(maxSize) ? Number.bytesToString(maxSize) : emDash);
+        this._detailsMinElement.textContent = WebInspector.UIString("Lowest: %s").format(Number.isFinite(minSize) ? Number.bytesToString(minSize) : emDash);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
new file mode 100644
index 000000000..7ad2c1054
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+body .sidebar > .panel.navigation.timeline > .timelines-content li.item.memory,
+body .timeline-overview > .graphs-container > .timeline-overview-graph.memory {
+    height: 108px;
+}
+
+.timeline-overview-graph.memory {
+    position: relative;
+}
+
+.timeline-overview-graph.memory > .legend {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    pointer-events: none;
+    padding: 2px;
+    font-size: 8px;
+    background-color: white;
+    color: hsl(0, 0%, 50%);
+}
+
+.timeline-overview-graph:nth-child(even) > .legend {
+    background-color: hsl(0, 0%, 96%);
+}
+
+.timeline-overview-graph.memory > .stacked-line-chart > svg > path.javascript {
+    stroke: var(--memory-javascript-stroke-color);
+    fill: var(--memory-javascript-fill-color);
+}
+
+.timeline-overview-graph.memory > .stacked-line-chart > svg > path.images {
+    stroke: var(--memory-images-stroke-color);
+    fill: var(--memory-images-fill-color);
+}
+
+.timeline-overview-graph.memory > .stacked-line-chart > svg > path.layers {
+    stroke: var(--memory-layers-stroke-color);
+    fill: var(--memory-layers-fill-color);
+}
+
+.timeline-overview-graph.memory > .stacked-line-chart > svg > path.page {
+    stroke: var(--memory-page-stroke-color);
+    fill: var(--memory-page-fill-color);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js
new file mode 100644
index 000000000..a7c63b16d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.js
@@ -0,0 +1,177 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MemoryTimelineOverviewGraph = class MemoryTimelineOverviewGraph extends WebInspector.TimelineOverviewGraph
+{
+    constructor(timeline, timelineOverview)
+    {
+        super(timelineOverview);
+
+        this.element.classList.add("memory");
+
+        this._memoryTimeline = timeline;
+        this._memoryTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._memoryTimelineRecordAdded, this);
+
+        this._didInitializeCategories = false;
+
+        let size = new WebInspector.Size(0, this.height);
+        this._chart = new WebInspector.StackedLineChart(size);
+
+        this.element.appendChild(this._chart.element);
+
+        this._legendElement = this.element.appendChild(document.createElement("div"));
+        this._legendElement.classList.add("legend");
+
+        this.reset();
+    }
+
+    // Protected
+
+    get height()
+    {
+        return 108;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._maxSize = 0;
+
+        this._updateLegend();
+        this._chart.clear();
+        this._chart.needsLayout();
+    }
+
+    layout()
+    {
+        this._updateLegend();
+        this._chart.clear();
+
+        if (!this._didInitializeCategories)
+            return;
+
+        let graphWidth = this.timelineOverview.scrollContainerWidth;
+        if (isNaN(graphWidth))
+            return;
+
+        if (this._chart.size.width !== graphWidth || this._chart.size.height !== this.height)
+            this._chart.size = new WebInspector.Size(graphWidth, this.height);
+
+        let graphStartTime = this.startTime;
+        let graphEndTime = this.endTime;
+        let graphCurrentTime = this.currentTime;
+        let visibleEndTime = Math.min(this.endTime, this.currentTime);
+
+        let visibleRecords = this._visibleRecords(graphStartTime, visibleEndTime);
+        if (!visibleRecords.length)
+            return;
+
+        let secondsPerPixel = this.timelineOverview.secondsPerPixel;
+        let maxCapacity = this._maxSize * 1.05; // Add 5% for padding.
+
+        function xScale(time) {
+            return (time - graphStartTime) / secondsPerPixel;
+        }
+
+        let height = this.height;
+        function yScale(size) {
+            return height - ((size / maxCapacity) * height);
+        }
+
+        function pointSetForRecord(record) {
+            let size = 0;
+            let ys = [];
+            for (let i = 0; i < record.categories.length; ++i) {
+                size += record.categories[i].size;
+                ys[i] = yScale(size);
+            }
+            return ys;
+        }
+
+        // Extend the first record to the start so it doesn't look like we originate at zero size.
+        if (visibleRecords[0] === this._memoryTimeline.records[0])
+            this._chart.addPointSet(0, pointSetForRecord(visibleRecords[0]));
+
+        // Points for visible records.
+        for (let record of visibleRecords) {
+            let x = xScale(record.startTime);
+            this._chart.addPointSet(x, pointSetForRecord(record));
+        }
+
+        // Extend the last value to current / end time.
+        let lastRecord = visibleRecords.lastValue;
+        let x = Math.floor(xScale(visibleEndTime));
+        this._chart.addPointSet(x, pointSetForRecord(lastRecord));
+
+        this._chart.updateLayout();
+    }
+
+    // Private
+
+    _updateLegend()
+    {
+        if (!this._maxSize) {
+            this._legendElement.hidden = true;
+            this._legendElement.textContent = "";
+        } else {
+            this._legendElement.hidden = false;
+            this._legendElement.textContent = WebInspector.UIString("Maximum Size: %s").format(Number.bytesToString(this._maxSize));
+        }
+    }
+
+    _visibleRecords(startTime, endTime)
+    {
+        let records = this._memoryTimeline.records;
+        let lowerIndex = records.lowerBound(startTime, (time, record) => time - record.timestamp);
+        let upperIndex = records.upperBound(endTime, (time, record) => time - record.timestamp);
+
+        // Include the record right before the start time in case it extends into this range.
+        if (lowerIndex > 0)
+            lowerIndex--;
+        // FIXME: <https://webkit.org/b/153759> Web Inspector: Memory Timelines should better extend to future data
+        // if (upperIndex !== records.length)
+        //     upperIndex++;
+
+        return records.slice(lowerIndex, upperIndex);
+    }
+
+    _memoryTimelineRecordAdded(event)
+    {
+        let memoryTimelineRecord = event.data.record;
+
+        this._maxSize = Math.max(this._maxSize, memoryTimelineRecord.totalSize);
+
+        if (!this._didInitializeCategories) {
+            this._didInitializeCategories = true;
+            let types = [];
+            for (let category of memoryTimelineRecord.categories)
+                types.push(category.type);
+            this._chart.initializeSections(types);
+        }
+
+        this.needsLayout();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
new file mode 100644
index 000000000..090096e6a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.css
@@ -0,0 +1,183 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.memory {
+    overflow: scroll;
+    border-top: 1px solid var(--border-color);
+}
+
+.timeline-view.memory > .content {
+    width: 970px;
+    margin: 10px auto;
+}
+
+.timeline-view.memory > .content > .overview {
+    padding: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.timeline-view.memory > .content .subtitle {
+    font-family: '-webkit-system-font';
+    font-size: 14px;
+}
+
+.timeline-view.memory > .content > .details > .timeline-ruler {
+    margin-left: 150px;
+    position: relative;
+    top: 9px;
+}
+
+.timeline-view.memory > .content > .details > .subtitle {
+    padding: 10px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.timeline-view.memory > .content > .overview {
+    display: flex;
+    justify-content: center;
+}
+
+.timeline-view.memory > .content > .overview > .chart {
+    width: 420px;
+    text-align: center;
+}
+
+.timeline-view.memory > .content > .overview > .chart > .subtitle {
+    margin-bottom: 1em;
+}
+
+.timeline-view.memory > .content > .overview > .chart > .container {
+    display: flex;
+    justify-content: center;
+}
+
+.timeline-view.memory > .content > .overview > .divider {
+    border-right: 1px solid var(--border-color);
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.timeline-view.memory > .content > .overview .total-usage,
+.timeline-view.memory > .content > .overview .max-percentage {
+    margin: auto;
+    color: hsl(0, 0%, 70%);
+}
+
+.timeline-view.memory .legend {
+    width: 100px;
+    padding-left: 20px;
+    text-align: left;
+}
+
+.timeline-view.memory .legend > .row {
+    position: relative;
+    height: 27px;
+}
+
+.timeline-view.memory .legend > .row > .swatch {
+    position: absolute;
+    top: 1px;
+    left: 0;
+    width: 1em;
+    height: 1em;
+}
+
+.timeline-view.memory .legend > .row > p {
+    margin: 0;
+}
+
+.timeline-view.memory .legend > .row > .label {
+    position: absolute;
+    top: 0;
+    left: 20px;
+}
+
+.timeline-view.memory .legend > .row > .size {
+    position: absolute;
+    top: 12px;
+    left: 20px;
+    color: hsl(0, 0%, 70%);
+}
+
+.timeline-view.memory .legend > .row > .swatch.javascript {
+    border: 1px solid var(--memory-javascript-stroke-color);
+    background: var(--memory-javascript-fill-color);
+}
+
+.timeline-view.memory .legend > .row > .swatch.images {
+    border: 1px solid var(--memory-images-stroke-color);
+    background: var(--memory-images-fill-color);
+}
+
+.timeline-view.memory .legend > .row > .swatch.layers {
+    border: 1px solid var(--memory-layers-stroke-color);
+    background: var(--memory-layers-fill-color);
+}
+
+.timeline-view.memory .legend > .row > .swatch.page {
+    border: 1px solid var(--memory-page-stroke-color);
+    background: var(--memory-page-fill-color);
+}
+
+
+.timeline-view.memory .circle-chart > svg > path.javascript,
+.memory-category-view.javascript .line-chart > svg > path {
+    stroke: var(--memory-javascript-stroke-color);
+    fill: var(--memory-javascript-fill-color);
+}
+
+.timeline-view.memory .circle-chart > svg > path.images,
+.memory-category-view.images .line-chart > svg > path {
+    stroke: var(--memory-images-stroke-color);
+    fill: var(--memory-images-fill-color);
+}
+
+.timeline-view.memory .circle-chart > svg > path.layers,
+.memory-category-view.layers .line-chart > svg > path {
+    stroke: var(--memory-layers-stroke-color);
+    fill: var(--memory-layers-fill-color);
+}
+
+.timeline-view.memory .circle-chart > svg > path.page,
+.memory-category-view.page .line-chart > svg > path {
+    stroke: var(--memory-page-stroke-color);
+    fill: var(--memory-page-fill-color);
+}
+
+.timeline-view.memory .legend > .row > .swatch.current {
+    border: 1px solid var(--memory-max-comparison-stroke-color);
+    background: var(--memory-max-comparison-fill-color);
+}
+
+.timeline-view.memory .circle-chart > svg > path.current {
+    stroke: var(--memory-max-comparison-stroke-color);
+    fill: var(--memory-max-comparison-fill-color);
+}
+
+.timeline-view.memory .circle-chart > svg > path.remainder {
+    stroke: none;
+    fill: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
new file mode 100644
index 000000000..5f3835390
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineView.js
@@ -0,0 +1,384 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MemoryTimelineView = class MemoryTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.Memory, timeline);
+
+        this.element.classList.add("memory");
+
+        let contentElement = this.element.appendChild(document.createElement("div"));
+        contentElement.classList.add("content");
+
+        let overviewElement = contentElement.appendChild(document.createElement("div"));
+        overviewElement.classList.add("overview");
+
+        function createChartContainer(parentElement, subtitle, tooltip)
+        {
+            let chartElement = parentElement.appendChild(document.createElement("div"));
+            chartElement.classList.add("chart");
+
+            let chartSubtitleElement = chartElement.appendChild(document.createElement("div"));
+            chartSubtitleElement.classList.add("subtitle");
+            chartSubtitleElement.textContent = subtitle;
+            chartSubtitleElement.title = tooltip;
+
+            let chartFlexContainerElement = chartElement.appendChild(document.createElement("div"));
+            chartFlexContainerElement.classList.add("container");
+            return chartFlexContainerElement;
+        }
+
+        let usageTooltip = WebInspector.UIString("Breakdown of each memory category at the end of the selected time range");
+        let usageChartContainerElement = createChartContainer(overviewElement, WebInspector.UIString("Breakdown"), usageTooltip);
+        this._usageCircleChart = new WebInspector.CircleChart({size: 120, innerRadiusRatio: 0.5});
+        usageChartContainerElement.appendChild(this._usageCircleChart.element);
+        this._usageLegendElement = usageChartContainerElement.appendChild(document.createElement("div"));
+        this._usageLegendElement.classList.add("legend", "usage");
+
+        let dividerElement = overviewElement.appendChild(document.createElement("div"));
+        dividerElement.classList.add("divider");
+
+        let maxComparisonTooltip = WebInspector.UIString("Comparison of total memory size at the end of the selected time range to the maximum memory size in this recording");
+        let maxComparisonChartContainerElement = createChartContainer(overviewElement, WebInspector.UIString("Max Comparison"), maxComparisonTooltip);
+        this._maxComparisonCircleChart = new WebInspector.CircleChart({size: 120, innerRadiusRatio: 0.5});
+        maxComparisonChartContainerElement.appendChild(this._maxComparisonCircleChart.element);
+        this._maxComparisonLegendElement = maxComparisonChartContainerElement.appendChild(document.createElement("div"));
+        this._maxComparisonLegendElement.classList.add("legend", "maximum");
+
+        let detailsContainerElement = this._detailsContainerElement = contentElement.appendChild(document.createElement("div"));
+        detailsContainerElement.classList.add("details");
+
+        this._timelineRuler = new WebInspector.TimelineRuler;
+        this.addSubview(this._timelineRuler);
+        detailsContainerElement.appendChild(this._timelineRuler.element);
+
+        let detailsSubtitleElement = detailsContainerElement.appendChild(document.createElement("div"));
+        detailsSubtitleElement.classList.add("subtitle");
+        detailsSubtitleElement.textContent = WebInspector.UIString("Categories");
+
+        this._didInitializeCategories = false;
+        this._categoryViews = [];
+        this._usageLegendSizeElementMap = new Map;
+
+        this._maxSize = 0;
+        this._maxComparisonMaximumSizeElement = null;
+        this._maxComparisonCurrentSizeElement = null;
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._memoryTimelineRecordAdded, this);
+    }
+
+    // Static
+
+    static displayNameForCategory(category)
+    {
+        switch (category) {
+        case WebInspector.MemoryCategory.Type.JavaScript:
+            return WebInspector.UIString("JavaScript");
+        case WebInspector.MemoryCategory.Type.Images:
+            return WebInspector.UIString("Images");
+        case WebInspector.MemoryCategory.Type.Layers:
+            return WebInspector.UIString("Layers");
+        case WebInspector.MemoryCategory.Type.Page:
+            return WebInspector.UIString("Page");
+        }
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString("Records");
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._timelineRuler.updateLayout(WebInspector.View.LayoutReason.Resize);
+    }
+
+    hidden()
+    {
+        super.hidden();
+    }
+
+    closed()
+    {
+        console.assert(this.representedObject instanceof WebInspector.Timeline);
+        this.representedObject.removeEventListener(null, null, this);
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._maxSize = 0;
+
+        this._usageCircleChart.clear();
+        this._usageCircleChart.needsLayout();
+        this._clearUsageLegend();
+
+        this._maxComparisonCircleChart.clear();
+        this._maxComparisonCircleChart.needsLayout();
+        this._clearMaxComparisonLegend();
+
+        for (let categoryView of this._categoryViews)
+            categoryView.clear();
+    }
+
+    // Protected
+
+    treeElementPathComponentSelected(event)
+    {
+        // Nothing. The sidebar will soon be removed.
+    }
+
+    layout()
+    {
+        // Always update timeline ruler.
+        this._timelineRuler.zeroTime = this.zeroTime;
+        this._timelineRuler.startTime = this.startTime;
+        this._timelineRuler.endTime = this.endTime;
+
+        if (!this._didInitializeCategories)
+            return;
+
+        let graphStartTime = this.startTime;
+        let graphEndTime = this.endTime;
+        let graphCurrentTime = this.currentTime;
+        let visibleEndTime = Math.min(this.endTime, this.currentTime);
+
+        let visibleRecords = this._visibleRecords(graphStartTime, visibleEndTime);
+        if (!visibleRecords.length)
+            return;
+
+        // Update total usage chart with the last record's data.
+        let lastRecord = visibleRecords.lastValue;
+        let values = [];
+        for (let {size} of lastRecord.categories)
+            values.push(size);
+        this._usageCircleChart.values = values;
+        this._usageCircleChart.updateLayout();
+        this._updateUsageLegend(lastRecord);
+
+        // Update maximum comparison chart.
+        this._maxComparisonCircleChart.values = [lastRecord.totalSize, this._maxSize - lastRecord.totalSize];
+        this._maxComparisonCircleChart.updateLayout();
+        this._updateMaxComparisonLegend(lastRecord.totalSize);
+
+        // FIXME: <https://webkit.org/b/153758> Web Inspector: Memory Timeline View should be responsive / resizable
+        const categoryViewWidth = 800;
+        const categoryViewHeight = 75;
+
+        let secondsPerPixel = (graphEndTime - graphStartTime) / categoryViewWidth;
+
+        let categoryDataMap = {};
+        for (let categoryView of this._categoryViews)
+            categoryDataMap[categoryView.category] = {dataPoints: [], max: -Infinity, min: Infinity};
+
+        for (let record of visibleRecords) {
+            let time = record.startTime;
+            for (let category of record.categories) {
+                let categoryData = categoryDataMap[category.type];
+                categoryData.dataPoints.push({time, size: category.size});
+                categoryData.max = Math.max(categoryData.max, category.size);
+                categoryData.min = Math.min(categoryData.min, category.size);
+            }
+        }
+
+        function layoutCategoryView(categoryView, categoryData) {
+            let {dataPoints, min, max} = categoryData;
+
+            if (min === Infinity)
+                min = 0;
+            if (max === -Infinity)
+                max = 0;
+
+            // Zoom in to the top of each graph to accentuate small changes.
+            let graphMin = min * 0.95;
+            let graphMax = (max * 1.05) - graphMin;
+
+            function xScale(time) {
+                return (time - graphStartTime) / secondsPerPixel;
+            }
+            function yScale(size) {
+                return categoryViewHeight - (((size - graphMin) / graphMax) * categoryViewHeight);
+            }
+
+            categoryView.layoutWithDataPoints(dataPoints, visibleEndTime, min, max, xScale, yScale);
+        }
+
+        for (let categoryView of this._categoryViews)
+            layoutCategoryView(categoryView, categoryDataMap[categoryView.category]);
+    }
+
+    // Private
+
+    _clearUsageLegend()
+    {
+        for (let sizeElement of this._usageLegendSizeElementMap.values())
+            sizeElement.textContent = emDash;
+
+        let totalElement = this._usageCircleChart.centerElement.firstChild;
+        if (totalElement) {
+            totalElement.firstChild.textContent = "";
+            totalElement.lastChild.textContent = "";
+        }
+    }
+
+    _updateUsageLegend(record)
+    {
+        for (let {type, size} of record.categories) {
+            let sizeElement = this._usageLegendSizeElementMap.get(type);
+            sizeElement.textContent = Number.isFinite(size) ? Number.bytesToString(size) : emDash;
+        }
+
+        let centerElement = this._usageCircleChart.centerElement;
+        let totalElement = centerElement.firstChild;
+        if (!totalElement) {
+            totalElement = centerElement.appendChild(document.createElement("div"));
+            totalElement.classList.add("total-usage");
+            totalElement.appendChild(document.createElement("span")); // firstChild
+            totalElement.appendChild(document.createElement("br"));
+            totalElement.appendChild(document.createElement("span")); // lastChild
+        }
+
+        let totalSize = Number.bytesToString(record.totalSize).split(/\s+/);
+        totalElement.firstChild.textContent = totalSize[0];
+        totalElement.lastChild.textContent = totalSize[1];
+    }
+
+    _clearMaxComparisonLegend()
+    {
+        this._maxComparisonMaximumSizeElement.textContent = emDash;
+        this._maxComparisonCurrentSizeElement.textContent = emDash;
+
+        let totalElement = this._maxComparisonCircleChart.centerElement.firstChild;
+        if (totalElement)
+            totalElement.textContent = "";
+    }
+
+    _updateMaxComparisonLegend(currentSize)
+    {
+        this._maxComparisonMaximumSizeElement.textContent = Number.isFinite(this._maxSize) ? Number.bytesToString(this._maxSize) : emDash;
+        this._maxComparisonCurrentSizeElement.textContent = Number.isFinite(currentSize) ? Number.bytesToString(currentSize) : emDash;
+
+        let centerElement = this._maxComparisonCircleChart.centerElement;
+        let totalElement = centerElement.firstChild;
+        if (!totalElement) {
+            totalElement = centerElement.appendChild(document.createElement("div"));
+            totalElement.classList.add("max-percentage");
+        }
+
+        // The chart will only show a perfect circle if the current and max are really the same value.
+        // So do a little massaging to ensure 99.95 doesn't get rounded up to 100.
+        let percent = ((currentSize / this._maxSize) * 100);
+        totalElement.textContent = (percent === 100 ? percent : (percent - 0.05).toFixed(1)) + "%";
+    }
+
+    _visibleRecords(startTime, endTime)
+    {
+        let records = this.representedObject.records;
+        let lowerIndex = records.lowerBound(startTime, (time, record) => time - record.timestamp);
+        let upperIndex = records.upperBound(endTime, (time, record) => time - record.timestamp);
+
+        // Include the record right before the start time in case it extends into this range.
+        if (lowerIndex > 0)
+            lowerIndex--;
+        // FIXME: <https://webkit.org/b/153759> Web Inspector: Memory Timelines should better extend to future data
+        // if (upperIndex !== records.length)
+        //     upperIndex++;
+
+        return records.slice(lowerIndex, upperIndex);
+    }
+
+    _initializeCategoryViews(record)
+    {
+        console.assert(!this._didInitializeCategories, "Should only initialize category views once");
+        this._didInitializeCategories = true;
+
+        let segments = [];
+        let lastCategoryViewElement = null;
+
+        function appendLegendRow(legendElement, swatchClass, label, tooltip) {
+            let rowElement = legendElement.appendChild(document.createElement("div"));
+            rowElement.classList.add("row");
+            let swatchElement = rowElement.appendChild(document.createElement("div"));
+            swatchElement.classList.add("swatch", swatchClass);
+            let labelElement = rowElement.appendChild(document.createElement("p"));
+            labelElement.classList.add("label");
+            labelElement.textContent = label;
+            let sizeElement = rowElement.appendChild(document.createElement("p"));
+            sizeElement.classList.add("size");
+
+            if (tooltip)
+                rowElement.title = tooltip;
+
+            return sizeElement;
+        }
+
+        for (let {type} of record.categories) {
+            segments.push(type);
+
+            // Per-category graph.
+            let categoryView = new WebInspector.MemoryCategoryView(type, WebInspector.MemoryTimelineView.displayNameForCategory(type));
+            this._categoryViews.push(categoryView);
+            if (!lastCategoryViewElement)
+                this._detailsContainerElement.appendChild(categoryView.element);
+            else
+                this._detailsContainerElement.insertBefore(categoryView.element, lastCategoryViewElement);
+            lastCategoryViewElement = categoryView.element;
+
+            // Usage legend rows.
+            let sizeElement = appendLegendRow.call(this, this._usageLegendElement, type, WebInspector.MemoryTimelineView.displayNameForCategory(type));
+            this._usageLegendSizeElementMap.set(type, sizeElement);
+        }
+
+        this._usageCircleChart.segments = segments;
+
+        // Max comparison legend rows.
+        this._maxComparisonCircleChart.segments = ["current", "remainder"];
+        this._maxComparisonMaximumSizeElement = appendLegendRow.call(this, this._maxComparisonLegendElement, "remainder", WebInspector.UIString("Maximum"), WebInspector.UIString("Maximum maximum memory size in this recording"));
+        this._maxComparisonCurrentSizeElement = appendLegendRow.call(this, this._maxComparisonLegendElement, "current", WebInspector.UIString("Current"), WebInspector.UIString("Total memory size at the end of the selected time range"));
+    }
+
+    _memoryTimelineRecordAdded(event)
+    {
+        let memoryTimelineRecord = event.data.record;
+        console.assert(memoryTimelineRecord instanceof WebInspector.MemoryTimelineRecord);
+
+        if (!this._didInitializeCategories)
+            this._initializeCategoryViews(memoryTimelineRecord);
+
+        this._maxSize = Math.max(this._maxSize, memoryTimelineRecord.totalSize);
+
+        if (memoryTimelineRecord.startTime >= this.startTime && memoryTimelineRecord.endTime <= this.endTime)
+            this.needsLayout();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js b/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js
new file mode 100644
index 000000000..53b479fa5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/MultipleScopeBarItem.js
@@ -0,0 +1,187 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.MultipleScopeBarItem = class MultipleScopeBarItem extends WebInspector.Object
+{
+    constructor(scopeBarItems)
+    {
+        super();
+
+        this._element = document.createElement("li");
+        this._element.classList.add("multiple");
+
+        this._titleElement = document.createElement("span");
+        this._element.appendChild(this._titleElement);
+        this._element.addEventListener("click", this._clicked.bind(this));
+
+        this._selectElement = document.createElement("select");
+        this._selectElement.addEventListener("change", this._selectElementSelectionChanged.bind(this));
+        this._element.appendChild(this._selectElement);
+
+        this._element.appendChild(useSVGSymbol("Images/UpDownArrows.svg", "arrows"));
+
+        this.scopeBarItems = scopeBarItems;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get exclusive()
+    {
+        return false;
+    }
+
+    get scopeBarItems()
+    {
+        return this._scopeBarItems;
+    }
+
+    set scopeBarItems(scopeBarItems)
+    {
+        if (this._scopeBarItems) {
+            for (var scopeBarItem of this._scopeBarItems)
+                scopeBarItem.removeEventListener(null, null, this);
+        }
+
+        this._scopeBarItems = scopeBarItems || [];
+        this._selectedScopeBarItem = null;
+
+        this._selectElement.removeChildren();
+
+        function createOption(scopeBarItem)
+        {
+            var optionElement = document.createElement("option");
+            var maxPopupMenuLength = 130; // <rdar://problem/13445374> <select> with very long option has clipped text and popup menu is still very wide
+            optionElement.textContent = scopeBarItem.label.length <= maxPopupMenuLength ? scopeBarItem.label : scopeBarItem.label.substring(0, maxPopupMenuLength) + ellipsis;
+            return optionElement;
+        }
+
+        for (var scopeBarItem of this._scopeBarItems) {
+            if (scopeBarItem.selected && !this._selectedScopeBarItem)
+                this._selectedScopeBarItem = scopeBarItem;
+            else if (scopeBarItem.selected) {
+                // Only one selected item is allowed at a time.
+                // Deselect any other items after the first.
+                scopeBarItem.selected = false;
+            }
+
+            scopeBarItem.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+
+            this._selectElement.appendChild(createOption(scopeBarItem));
+        }
+
+        this._lastSelectedScopeBarItem = this._selectedScopeBarItem || this._scopeBarItems[0] || null;
+        this._titleElement.textContent = this._lastSelectedScopeBarItem ? this._lastSelectedScopeBarItem.label : "";
+
+        this._element.classList.toggle("selected", !!this._selectedScopeBarItem);
+        this._selectElement.selectedIndex = this._scopeBarItems.indexOf(this._selectedScopeBarItem);
+    }
+
+    get selected()
+    {
+        return !!this._selectedScopeBarItem;
+    }
+
+    set selected(selected)
+    {
+        this.selectedScopeBarItem = selected ? this._lastSelectedScopeBarItem : null;
+    }
+
+    get selectedScopeBarItem()
+    {
+        return this._selectedScopeBarItem;
+    }
+
+    set selectedScopeBarItem(selectedScopeBarItem)
+    {
+        this._ignoreItemSelectedEvent = true;
+
+        if (this._selectedScopeBarItem) {
+            this._selectedScopeBarItem.selected = false;
+            this._lastSelectedScopeBarItem = this._selectedScopeBarItem;
+        } else if (!this._lastSelectedScopeBarItem)
+            this._lastSelectedScopeBarItem = selectedScopeBarItem;
+
+        this._element.classList.toggle("selected", !!selectedScopeBarItem);
+        this._selectedScopeBarItem = selectedScopeBarItem || null;
+        this._selectElement.selectedIndex = this._scopeBarItems.indexOf(this._selectedScopeBarItem);
+
+        if (this._selectedScopeBarItem) {
+            this.displaySelectedItem();
+            this._selectedScopeBarItem.selected = true;
+        }
+
+        var withModifier = WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.ctrlKey && !WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.shiftKey;
+        this.dispatchEventToListeners(WebInspector.ScopeBarItem.Event.SelectionChanged, {withModifier});
+
+        this._ignoreItemSelectedEvent = false;
+    }
+
+    displaySelectedItem()
+    {
+        this._titleElement.textContent = (this._selectedScopeBarItem || this._scopeBarItems[0]).label;
+    }
+
+    displayWidestItem()
+    {
+        let widestLabel = null;
+        let widestSize = 0;
+        for (let option of Array.from(this._selectElement.options)) {
+            this._titleElement.textContent = option.label;
+            if (this._titleElement.realOffsetWidth > widestSize) {
+                widestSize = this._titleElement.realOffsetWidth;
+                widestLabel = option.label;
+            }
+        }
+        this._titleElement.textContent = widestLabel;
+    }
+
+    // Private
+
+    _clicked(event)
+    {
+        // Only support click to select when the item is not selected yet.
+        // Clicking when selected will cause the menu it appear instead.
+        if (this._element.classList.contains("selected"))
+            return;
+        this.selected = true;
+    }
+
+    _selectElementSelectionChanged(event)
+    {
+        this.selectedScopeBarItem = this._scopeBarItems[this._selectElement.selectedIndex];
+    }
+
+    _itemSelectionDidChange(event)
+    {
+        if (this._ignoreItemSelectedEvent)
+            return;
+        this.selectedScopeBarItem = event.target.selected ? event.target : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css b/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css
new file mode 100644
index 000000000..16d6e197e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationBar.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+
+    box-shadow: inset hsla(0, 0%, 100%, 0.2) 0 1px 0;
+    border-bottom: 1px solid var(--border-color);
+
+    height: 29px;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    outline: none;
+}
+
+.navigation-bar .item {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    height: 28px;
+    outline: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js b/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js
new file mode 100644
index 000000000..547ba84b0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationBar.js
@@ -0,0 +1,385 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NavigationBar = class NavigationBar extends WebInspector.View
+{
+    constructor(element, navigationItems, role, label)
+    {
+        super(element);
+
+        this.element.classList.add(this.constructor.StyleClassName || "navigation-bar");
+        this.element.tabIndex = 0;
+
+        if (role)
+            this.element.setAttribute("role", role);
+        if (label)
+            this.element.setAttribute("aria-label", label);
+
+        this.element.addEventListener("focus", this._focus.bind(this), false);
+        this.element.addEventListener("blur", this._blur.bind(this), false);
+        this.element.addEventListener("keydown", this._keyDown.bind(this), false);
+        this.element.addEventListener("mousedown", this._mouseDown.bind(this), false);
+
+        this._minimumWidth = NaN;
+        this._navigationItems = [];
+
+        if (navigationItems) {
+            for (var i = 0; i < navigationItems.length; ++i)
+                this.addNavigationItem(navigationItems[i]);
+        }
+    }
+
+    // Public
+
+    addNavigationItem(navigationItem, parentElement)
+    {
+        return this.insertNavigationItem(navigationItem, this._navigationItems.length, parentElement);
+    }
+
+    insertNavigationItem(navigationItem, index, parentElement)
+    {
+        console.assert(navigationItem instanceof WebInspector.NavigationItem);
+        if (!(navigationItem instanceof WebInspector.NavigationItem))
+            return null;
+
+        if (navigationItem.parentNavigationBar)
+            navigationItem.parentNavigationBar.removeNavigationItem(navigationItem);
+
+        navigationItem._parentNavigationBar = this;
+
+        console.assert(index >= 0 && index <= this._navigationItems.length);
+        index = Math.max(0, Math.min(index, this._navigationItems.length));
+
+        this._navigationItems.splice(index, 0, navigationItem);
+
+        if (!parentElement)
+            parentElement = this.element;
+
+        var nextSibling = this._navigationItems[index + 1];
+        var nextSiblingElement = nextSibling ? nextSibling.element : null;
+        if (nextSiblingElement && nextSiblingElement.parentNode !== parentElement)
+            nextSiblingElement = null;
+
+        parentElement.insertBefore(navigationItem.element, nextSiblingElement);
+
+        this._minimumWidth = NaN;
+
+        this.needsLayout();
+
+        return navigationItem;
+    }
+
+    removeNavigationItem(navigationItemOrIdentifierOrIndex)
+    {
+        var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
+        if (!navigationItem)
+            return null;
+
+        navigationItem._parentNavigationBar = null;
+
+        if (this._selectedNavigationItem === navigationItem)
+            this.selectedNavigationItem = null;
+
+        this._navigationItems.remove(navigationItem);
+        navigationItem.element.remove();
+
+        this._minimumWidth = NaN;
+
+        this.needsLayout();
+
+        return navigationItem;
+    }
+
+    get selectedNavigationItem()
+    {
+        return this._selectedNavigationItem || null;
+    }
+
+    set selectedNavigationItem(navigationItemOrIdentifierOrIndex)
+    {
+        var navigationItem = this._findNavigationItem(navigationItemOrIdentifierOrIndex);
+
+        // Only radio navigation items can be selected.
+        if (!(navigationItem instanceof WebInspector.RadioButtonNavigationItem))
+            navigationItem = null;
+
+        if (this._selectedNavigationItem === navigationItem)
+            return;
+
+        if (this._selectedNavigationItem)
+            this._selectedNavigationItem.selected = false;
+
+        this._selectedNavigationItem = navigationItem || null;
+
+        if (this._selectedNavigationItem)
+            this._selectedNavigationItem.selected = true;
+
+        // When the mouse is down don't dispatch the selected event, it will be dispatched on mouse up.
+        // This prevents sending the event while the user is scrubbing the bar.
+        if (!this._mouseIsDown)
+            this.dispatchEventToListeners(WebInspector.NavigationBar.Event.NavigationItemSelected);
+    }
+
+    get navigationItems()
+    {
+        return this._navigationItems;
+    }
+
+    get minimumWidth()
+    {
+        if (isNaN(this._minimumWidth))
+            this._minimumWidth = this._calculateMinimumWidth();
+        return this._minimumWidth;
+    }
+
+    get sizesToFit()
+    {
+        // Can be overriden by subclasses.
+        return false;
+    }
+
+    layout()
+    {
+        // Remove the collapsed style class to test if the items can fit at full width.
+        this.element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Tell each navigation item to update to full width if needed.
+        for (let navigationItem of this._navigationItems)
+            navigationItem.updateLayout(true);
+
+        let totalItemWidth = 0;
+        for (let navigationItem of this._navigationItems) {
+            // Skip flexible space items since they can take up no space at the minimum width.
+            if (navigationItem instanceof WebInspector.FlexibleSpaceNavigationItem)
+                continue;
+
+            totalItemWidth += navigationItem.element.realOffsetWidth;
+        }
+
+        const barWidth = this.element.realOffsetWidth;
+
+        // Add the collapsed class back if the items are wider than the bar.
+        if (totalItemWidth > barWidth)
+            this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Give each navigation item the opportunity to collapse further.
+        for (let navigationItem of this._navigationItems)
+            navigationItem.updateLayout(false);
+    }
+
+    // Private
+
+    _findNavigationItem(navigationItemOrIdentifierOrIndex)
+    {
+        var navigationItem = null;
+
+        if (navigationItemOrIdentifierOrIndex instanceof WebInspector.NavigationItem) {
+            if (this._navigationItems.includes(navigationItemOrIdentifierOrIndex))
+                navigationItem = navigationItemOrIdentifierOrIndex;
+        } else if (typeof navigationItemOrIdentifierOrIndex === "number") {
+            navigationItem = this._navigationItems[navigationItemOrIdentifierOrIndex];
+        } else if (typeof navigationItemOrIdentifierOrIndex === "string") {
+            for (var i = 0; i < this._navigationItems.length; ++i) {
+                if (this._navigationItems[i].identifier === navigationItemOrIdentifierOrIndex) {
+                    navigationItem = this._navigationItems[i];
+                    break;
+                }
+            }
+        }
+
+        return navigationItem;
+    }
+
+    _mouseDown(event)
+    {
+        // Only handle left mouse clicks.
+        if (event.button !== 0)
+            return;
+
+        // Remove the tabIndex so clicking the navigation bar does not give it focus.
+        // Only keep the tabIndex if already focused from keyboard navigation. This matches Xcode.
+        if (!this._focused)
+            this.element.removeAttribute("tabindex");
+
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
+        if (!itemElement || !itemElement.navigationItem)
+            return;
+
+        this._previousSelectedNavigationItem = this.selectedNavigationItem;
+        this.selectedNavigationItem = itemElement.navigationItem;
+
+        this._mouseIsDown = true;
+
+        this._mouseMovedEventListener = this._mouseMoved.bind(this);
+        this._mouseUpEventListener = this._mouseUp.bind(this);
+
+        if (typeof this.selectedNavigationItem.dontPreventDefaultOnNavigationBarMouseDown === "function"
+            && this.selectedNavigationItem.dontPreventDefaultOnNavigationBarMouseDown()
+            && this._previousSelectedNavigationItem === this.selectedNavigationItem)
+            return;
+
+        // Register these listeners on the document so we can track the mouse if it leaves the navigation bar.
+        document.addEventListener("mousemove", this._mouseMovedEventListener, false);
+        document.addEventListener("mouseup", this._mouseUpEventListener, false);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _mouseMoved(event)
+    {
+        console.assert(event.button === 0);
+        console.assert(this._mouseIsDown);
+        if (!this._mouseIsDown)
+            return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
+        if (!itemElement || !itemElement.navigationItem || !this.element.contains(itemElement)) {
+            // Find the element that is at the X position of the mouse, even when the mouse is no longer
+            // vertically in the navigation bar.
+            var element = document.elementFromPoint(event.pageX, this.element.totalOffsetTop + (this.element.offsetHeight / 2));
+            if (!element)
+                return;
+
+            itemElement = element.enclosingNodeOrSelfWithClass(WebInspector.RadioButtonNavigationItem.StyleClassName);
+            if (!itemElement || !itemElement.navigationItem || !this.element.contains(itemElement))
+                return;
+        }
+
+        if (this.selectedNavigationItem)
+            this.selectedNavigationItem.active = false;
+
+        this.selectedNavigationItem = itemElement.navigationItem;
+
+        this.selectedNavigationItem.active = true;
+    }
+
+    _mouseUp(event)
+    {
+        console.assert(event.button === 0);
+        console.assert(this._mouseIsDown);
+        if (!this._mouseIsDown)
+            return;
+
+        if (this.selectedNavigationItem)
+            this.selectedNavigationItem.active = false;
+
+        this._mouseIsDown = false;
+
+        document.removeEventListener("mousemove", this._mouseMovedEventListener, false);
+        document.removeEventListener("mouseup", this._mouseUpEventListener, false);
+
+        delete this._mouseMovedEventListener;
+        delete this._mouseUpEventListener;
+
+        // Restore the tabIndex so the navigation bar can be in the keyboard tab loop.
+        this.element.tabIndex = 0;
+
+        // Dispatch the selected event here since the selectedNavigationItem setter surpresses it
+        // while the mouse is down to prevent sending it while scrubbing the bar.
+        if (this._previousSelectedNavigationItem !== this.selectedNavigationItem)
+            this.dispatchEventToListeners(WebInspector.NavigationBar.Event.NavigationItemSelected);
+
+        delete this._previousSelectedNavigationItem;
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _keyDown(event)
+    {
+        if (!this._focused)
+            return;
+
+        if (event.keyIdentifier !== "Left" && event.keyIdentifier !== "Right")
+            return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        var selectedNavigationItemIndex = this._navigationItems.indexOf(this._selectedNavigationItem);
+
+        if (event.keyIdentifier === "Left") {
+            if (selectedNavigationItemIndex === -1)
+                selectedNavigationItemIndex = this._navigationItems.length;
+
+            do {
+                selectedNavigationItemIndex = Math.max(0, selectedNavigationItemIndex - 1);
+            } while (selectedNavigationItemIndex && !(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem));
+        } else if (event.keyIdentifier === "Right") {
+            do {
+                selectedNavigationItemIndex = Math.min(selectedNavigationItemIndex + 1, this._navigationItems.length - 1);
+            } while (selectedNavigationItemIndex < this._navigationItems.length - 1 && !(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem));
+        }
+
+        if (!(this._navigationItems[selectedNavigationItemIndex] instanceof WebInspector.RadioButtonNavigationItem))
+            return;
+
+        this.selectedNavigationItem = this._navigationItems[selectedNavigationItemIndex];
+    }
+
+    _focus(event)
+    {
+        this._focused = true;
+    }
+
+    _blur(event)
+    {
+        this._focused = false;
+    }
+
+    _calculateMinimumWidth()
+    {
+        const wasCollapsed = this.element.classList.contains(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Add the collapsed style class to calculate the width of the items when they are collapsed.
+        if (!wasCollapsed)
+            this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        let totalItemWidth = 0;
+        for (let item of this._navigationItems) {
+            // Skip flexible space items since they can take up no space at the minimum width.
+            if (item instanceof WebInspector.FlexibleSpaceNavigationItem)
+                continue;
+
+            totalItemWidth += item.minimumWidth;
+        }
+
+        // Remove the collapsed style class if we were not collapsed before.
+        if (!wasCollapsed)
+            this.element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        return totalItemWidth;
+    }
+};
+
+WebInspector.NavigationBar.CollapsedStyleClassName = "collapsed";
+
+WebInspector.NavigationBar.Event = {
+    NavigationItemSelected: "navigation-bar-navigation-item-selected"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js
new file mode 100644
index 000000000..87bfdfab9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationItem.js
@@ -0,0 +1,102 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NavigationItem = class NavigationItem extends WebInspector.Object
+{
+    constructor(identifier, role, label)
+    {
+        super();
+
+        this._identifier = identifier || null;
+
+        this._element = document.createElement("div");
+        this._hidden = false;
+
+        if (role)
+            this._element.setAttribute("role", role);
+        if (label)
+            this._element.setAttribute("aria-label", label);
+
+        this._element.classList.add(...this._classNames);
+        this._element.navigationItem = this;
+    }
+
+    // Public
+
+    get identifier()
+    {
+        return this._identifier;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get parentNavigationBar()
+    {
+        return this._parentNavigationBar;
+    }
+
+    get minimumWidth()
+    {
+        return this._element.realOffsetWidth;
+    }
+
+    updateLayout(expandOnly)
+    {
+        // Implemented by subclasses.
+    }
+
+    get hidden()
+    {
+        return this._hidden;
+    }
+
+    set hidden(flag)
+    {
+        if (this._hidden === flag)
+            return;
+
+        this._hidden = flag;
+
+        this._element.classList.toggle("hidden", flag);
+
+        if (this._parentNavigationBar)
+            this._parentNavigationBar.needsLayout();
+    }
+
+    // Private
+
+    get _classNames()
+    {
+        var classNames = ["item"];
+        if (this._identifier)
+            classNames.push(this._identifier);
+        if (this.additionalClassNames instanceof Array)
+            classNames = classNames.concat(this.additionalClassNames);
+        return classNames;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
new file mode 100644
index 000000000..da599bbfa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.css
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation > .content {
+    bottom: 29px;
+}
+
+.sidebar > .panel.navigation > .filter-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.navigation > .overflow-shadow {
+    position: absolute;
+    bottom: calc(var(--console-prompt-min-height) - 1px);
+    left: 0;
+    right: 0;
+    height: 1px;
+
+    pointer-events: none;
+
+    opacity: 0;
+
+    border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar > .panel.navigation > .overflow-shadow.top {
+    top: 28px;
+    bottom: initial;
+}
+
+.sidebar > .panel.navigation > .content .empty-content-placeholder {
+    left: 0;
+    right: 0;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.sidebar > .panel.navigation > .content > .empty-content-placeholder {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    padding: 0;
+}
+
+.sidebar > .panel.navigation > .content .empty-content-placeholder > .message {
+    display: inline-block;
+    white-space: nowrap;
+
+    font-size: 13px;
+
+    color: white;
+    background-color: hsla(0, 0%, 0%, 0.15);
+    text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
+    box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
+
+    border-radius: 6px;
+    padding: 5px 15px 6px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
new file mode 100644
index 000000000..a6420dfc3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js
@@ -0,0 +1,792 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NavigationSidebarPanel = class NavigationSidebarPanel extends WebInspector.SidebarPanel
+{
+    constructor(identifier, displayName, shouldAutoPruneStaleTopLevelResourceTreeElements, wantsTopOverflowShadow, element, role, label)
+    {
+        super(identifier, displayName, element, role, label || displayName);
+
+        this.element.classList.add("navigation");
+
+        this._visibleContentTreeOutlines = new Set;
+
+        this.contentView.element.addEventListener("scroll", this._updateContentOverflowShadowVisibility.bind(this));
+
+        this._contentTreeOutline = this.createContentTreeOutline(true);
+        this._selectedContentTreeOutline = null;
+
+        this._filterBar = new WebInspector.FilterBar;
+        this._filterBar.addEventListener(WebInspector.FilterBar.Event.FilterDidChange, this._filterDidChange, this);
+        this.element.appendChild(this._filterBar.element);
+
+        this._bottomOverflowShadowElement = document.createElement("div");
+        this._bottomOverflowShadowElement.className = WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName;
+        this.element.appendChild(this._bottomOverflowShadowElement);
+
+        if (wantsTopOverflowShadow) {
+            this._topOverflowShadowElement = document.createElement("div");
+            this._topOverflowShadowElement.classList.add(WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName);
+            this._topOverflowShadowElement.classList.add(WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName);
+            this.element.appendChild(this._topOverflowShadowElement);
+        }
+
+        this._boundUpdateContentOverflowShadowVisibility = this._updateContentOverflowShadowVisibility.bind(this);
+        window.addEventListener("resize", this._boundUpdateContentOverflowShadowVisibility);
+
+        this._filtersSetting = new WebInspector.Setting(identifier + "-navigation-sidebar-filters", {});
+        this._filterBar.filters = this._filtersSetting.value;
+
+        this._emptyContentPlaceholderElements = new Map;
+        this._emptyFilterResults = new Map;
+
+        this._shouldAutoPruneStaleTopLevelResourceTreeElements = shouldAutoPruneStaleTopLevelResourceTreeElements || false;
+
+        if (this._shouldAutoPruneStaleTopLevelResourceTreeElements) {
+            WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._checkForStaleResources, this);
+            WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ChildFrameWasRemoved, this._checkForStaleResources, this);
+            WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ResourceWasRemoved, this._checkForStaleResources, this);
+        }
+
+        this._pendingViewStateCookie = null;
+        this._restoringState = false;
+    }
+
+    // Public
+
+    closed()
+    {
+        window.removeEventListener("resize", this._boundUpdateContentOverflowShadowVisibility);
+        WebInspector.Frame.removeEventListener(null, null, this);
+    }
+
+    get contentBrowser()
+    {
+        return this._contentBrowser;
+    }
+
+    set contentBrowser(contentBrowser)
+    {
+        this._contentBrowser = contentBrowser || null;
+    }
+
+    get contentTreeOutline()
+    {
+        return this._contentTreeOutline;
+    }
+
+    set contentTreeOutline(newTreeOutline)
+    {
+        console.assert(newTreeOutline);
+        if (!newTreeOutline)
+            return;
+
+        if (this._contentTreeOutline) {
+            this.hideEmptyContentPlaceholder(this._contentTreeOutline);
+            this._contentTreeOutline.hidden = true;
+            this._visibleContentTreeOutlines.delete(this._contentTreeOutline);
+        }
+
+        this._contentTreeOutline = newTreeOutline;
+        this._contentTreeOutline.hidden = false;
+
+        this._visibleContentTreeOutlines.add(newTreeOutline);
+
+        this._updateFilter();
+    }
+
+    get visibleContentTreeOutlines()
+    {
+        return this._visibleContentTreeOutlines;
+    }
+
+    get hasSelectedElement()
+    {
+        return this._visibleContentTreeOutlines.some((treeOutline) => !!treeOutline.selectedTreeElement);
+    }
+
+    get filterBar()
+    {
+        return this._filterBar;
+    }
+
+    get restoringState()
+    {
+        return this._restoringState;
+    }
+
+    cancelRestoringState()
+    {
+        if (!this._finalAttemptToRestoreViewStateTimeout)
+            return;
+
+        clearTimeout(this._finalAttemptToRestoreViewStateTimeout);
+        this._finalAttemptToRestoreViewStateTimeout = undefined;
+    }
+
+    createContentTreeOutline(dontHideByDefault, suppressFiltering)
+    {
+        let contentTreeOutline = new WebInspector.TreeOutline;
+        contentTreeOutline.allowsRepeatSelection = true;
+        contentTreeOutline.hidden = !dontHideByDefault;
+        contentTreeOutline.element.classList.add(WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName);
+
+        this.contentView.element.appendChild(contentTreeOutline.element);
+
+        if (!suppressFiltering) {
+            contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAddedOrChanged, this);
+            contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDidChange, this._treeElementAddedOrChanged, this);
+            contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange, this);
+            contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+        }
+
+        contentTreeOutline[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol] = suppressFiltering;
+
+        if (dontHideByDefault)
+            this._visibleContentTreeOutlines.add(contentTreeOutline);
+
+        return contentTreeOutline;
+    }
+
+    suppressFilteringOnTreeElements(treeElements)
+    {
+        console.assert(Array.isArray(treeElements), "TreeElements should be an array.");
+
+        for (let treeElement of treeElements)
+            treeElement[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol] = true;
+
+        this._updateFilter();
+    }
+
+    treeElementForRepresentedObject(representedObject)
+    {
+        let treeElement = null;
+        for (let treeOutline of this._visibleContentTreeOutlines) {
+            treeElement = treeOutline.getCachedTreeElement(representedObject);
+            if (treeElement)
+                break;
+        }
+
+        return treeElement;
+    }
+
+    showDefaultContentView()
+    {
+        // Implemented by subclasses if needed to show a content view when no existing tree element is selected.
+    }
+
+    showDefaultContentViewForTreeElement(treeElement)
+    {
+        console.assert(treeElement);
+        console.assert(treeElement.representedObject);
+        if (!treeElement || !treeElement.representedObject)
+            return;
+
+        this.contentBrowser.showContentViewForRepresentedObject(treeElement.representedObject);
+        treeElement.revealAndSelect(true, false, true, true);
+    }
+
+    saveStateToCookie(cookie)
+    {
+        console.assert(cookie);
+
+        // This does not save folder selections, which lack a represented object and content view.
+        var selectedTreeElement = null;
+        this._visibleContentTreeOutlines.forEach(function(outline) {
+            if (outline.selectedTreeElement)
+                selectedTreeElement = outline.selectedTreeElement;
+        });
+
+        if (!selectedTreeElement)
+            return;
+
+        if (this._isTreeElementWithoutRepresentedObject(selectedTreeElement))
+            return;
+
+        var representedObject = selectedTreeElement.representedObject;
+        cookie[WebInspector.TypeIdentifierCookieKey] = representedObject.constructor.TypeIdentifier;
+
+        if (representedObject.saveIdentityToCookie)
+            representedObject.saveIdentityToCookie(cookie);
+        else
+            console.error("Error: TreeElement.representedObject is missing a saveIdentityToCookie implementation. TreeElement.constructor: ", selectedTreeElement.constructor);
+    }
+
+    // This can be supplemented by subclasses that admit a simpler strategy for static tree elements.
+    restoreStateFromCookie(cookie, relaxedMatchDelay)
+    {
+        this._pendingViewStateCookie = cookie;
+        this._restoringState = true;
+
+        // Check if any existing tree elements in any outline match the cookie.
+        this._checkOutlinesForPendingViewStateCookie();
+
+        if (this._finalAttemptToRestoreViewStateTimeout)
+            clearTimeout(this._finalAttemptToRestoreViewStateTimeout);
+
+        if (relaxedMatchDelay === 0)
+            return;
+
+        function finalAttemptToRestoreViewStateFromCookie()
+        {
+            this._finalAttemptToRestoreViewStateTimeout = undefined;
+
+            this._checkOutlinesForPendingViewStateCookie(true);
+
+            this._pendingViewStateCookie = null;
+            this._restoringState = false;
+        }
+
+        // If the specific tree element wasn't found, we may need to wait for the resources
+        // to be registered. We try one last time (match type only) after an arbitrary amount of timeout.
+        this._finalAttemptToRestoreViewStateTimeout = setTimeout(finalAttemptToRestoreViewStateFromCookie.bind(this), relaxedMatchDelay);
+    }
+
+    showEmptyContentPlaceholder(message, treeOutline)
+    {
+        console.assert(message);
+
+        treeOutline = treeOutline || this._contentTreeOutline;
+
+        let emptyContentPlaceholderElement = this._createEmptyContentPlaceholderIfNeeded(treeOutline);
+        if (emptyContentPlaceholderElement.parentNode && emptyContentPlaceholderElement.children[0].textContent === message)
+            return;
+
+        emptyContentPlaceholderElement.children[0].textContent = message;
+
+        let emptyContentPlaceholderParentElement = treeOutline.element.parentNode;
+        emptyContentPlaceholderParentElement.appendChild(emptyContentPlaceholderElement);
+
+        this._updateContentOverflowShadowVisibility();
+    }
+
+    hideEmptyContentPlaceholder(treeOutline)
+    {
+        treeOutline = treeOutline || this._contentTreeOutline;
+
+        let emptyContentPlaceholderElement = this._emptyContentPlaceholderElements.get(treeOutline);
+        if (!emptyContentPlaceholderElement || !emptyContentPlaceholderElement.parentNode)
+            return;
+
+        emptyContentPlaceholderElement.remove();
+
+        this._updateContentOverflowShadowVisibility();
+    }
+
+    updateEmptyContentPlaceholder(message, treeOutline)
+    {
+        treeOutline = treeOutline || this._contentTreeOutline;
+
+        if (!treeOutline.children.length) {
+            // No tree elements, so no results.
+            this.showEmptyContentPlaceholder(message, treeOutline);
+        } else if (!this._emptyFilterResults.get(treeOutline)) {
+            // There are tree elements, and not all of them are hidden by the filter.
+            this.hideEmptyContentPlaceholder(treeOutline);
+        }
+    }
+
+    updateFilter()
+    {
+        this._updateFilter();
+    }
+
+    shouldFilterPopulate()
+    {
+        // Overriden by subclasses if needed.
+        return this.hasCustomFilters();
+    }
+
+    hasCustomFilters()
+    {
+        // Implemented by subclasses if needed.
+        return false;
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement)
+    {
+        // Implemented by subclasses if needed.
+        return true;
+    }
+
+    matchTreeElementAgainstFilterFunctions(treeElement)
+    {
+        if (!this._filterFunctions || !this._filterFunctions.length)
+            return true;
+
+        for (var filterFunction of this._filterFunctions) {
+            if (filterFunction(treeElement))
+                return true;
+        }
+
+        return false;
+    }
+
+    applyFiltersToTreeElement(treeElement)
+    {
+        if (!this._filterBar.hasActiveFilters() && !this.hasCustomFilters()) {
+            // No filters, so make everything visible.
+            treeElement.hidden = false;
+
+            // If this tree element was expanded during filtering, collapse it again.
+            if (treeElement.expanded && treeElement[WebInspector.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol]) {
+                treeElement[WebInspector.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol] = false;
+                treeElement.collapse();
+            }
+
+            return;
+        }
+
+        var filterableData = treeElement.filterableData || {};
+
+        var flags = {expandTreeElement: false};
+        var filterRegex = this._textFilterRegex;
+
+        function matchTextFilter(inputs)
+        {
+            if (!inputs || !filterRegex)
+                return true;
+
+            console.assert(inputs instanceof Array, "filterableData.text should be an array of text inputs");
+
+            // Loop over all the inputs and try to match them.
+            for (var input of inputs) {
+                if (!input)
+                    continue;
+                if (filterRegex.test(input)) {
+                    flags.expandTreeElement = true;
+                    return true;
+                }
+            }
+
+            // No inputs matched.
+            return false;
+        }
+
+        function makeVisible()
+        {
+            // Make this element visible.
+            treeElement.hidden = false;
+
+            // Make the ancestors visible and expand them.
+            var currentAncestor = treeElement.parent;
+            while (currentAncestor && !currentAncestor.root) {
+                currentAncestor.hidden = false;
+
+                // Only expand if the built-in filters matched, not custom filters.
+                if (flags.expandTreeElement && !currentAncestor.expanded) {
+                    currentAncestor.__wasExpandedDuringFiltering = true;
+                    currentAncestor.expand();
+                }
+
+                currentAncestor = currentAncestor.parent;
+            }
+        }
+
+        let suppressFiltering = treeElement[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol];
+
+        if (suppressFiltering || (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstFilterFunctions(treeElement, flags) && this.matchTreeElementAgainstCustomFilters(treeElement, flags))) {
+            // Make this element visible since it matches.
+            makeVisible();
+
+            // If this tree element didn't match a built-in filter and was expanded earlier during filtering, collapse it again.
+            if (!flags.expandTreeElement && treeElement.expanded && treeElement[WebInspector.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol]) {
+                treeElement[WebInspector.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol] = false;
+                treeElement.collapse();
+            }
+
+            return;
+        }
+
+        // Make this element invisible since it does not match.
+        treeElement.hidden = true;
+    }
+
+    treeElementAddedOrChanged(treeElement)
+    {
+        // Implemented by subclasses if needed.
+    }
+
+    show()
+    {
+        if (!this.parentSidebar)
+            return;
+
+        super.show();
+
+        let treeOutline = this._selectedContentTreeOutline;
+        if (!treeOutline && this._visibleContentTreeOutlines.length)
+            treeOutline = this._visibleContentTreeOutlines[0];
+
+        if (treeOutline)
+            treeOutline.element.focus();
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._updateContentOverflowShadowVisibility();
+    }
+
+    // Protected
+
+    representedObjectWasFiltered(representedObject, filtered)
+    {
+        // Implemented by subclasses if needed.
+    }
+
+    pruneStaleResourceTreeElements()
+    {
+        if (this._checkForStaleResourcesTimeoutIdentifier) {
+            clearTimeout(this._checkForStaleResourcesTimeoutIdentifier);
+            this._checkForStaleResourcesTimeoutIdentifier = undefined;
+        }
+
+        for (var contentTreeOutline of this._visibleContentTreeOutlines) {
+            // Check all the ResourceTreeElements at the top level to make sure their Resource still has a parentFrame in the frame hierarchy.
+            // If the parentFrame is no longer in the frame hierarchy we know it was removed due to a navigation or some other page change and
+            // we should remove the issues for that resource.
+            for (var i = contentTreeOutline.children.length - 1; i >= 0; --i) {
+                var treeElement = contentTreeOutline.children[i];
+                if (!(treeElement instanceof WebInspector.ResourceTreeElement))
+                    continue;
+
+                var resource = treeElement.resource;
+                if (!resource.parentFrame || resource.parentFrame.isDetached())
+                    contentTreeOutline.removeChildAtIndex(i, true, true);
+            }
+        }
+    }
+
+    // Private
+    
+    _updateContentOverflowShadowVisibilitySoon()
+    {
+        if (this._updateContentOverflowShadowVisibilityIdentifier)
+            return;
+
+        this._updateContentOverflowShadowVisibilityIdentifier = setTimeout(this._updateContentOverflowShadowVisibility.bind(this), 0);
+    }
+
+    _updateContentOverflowShadowVisibility()
+    {
+        this._updateContentOverflowShadowVisibilityIdentifier = undefined;
+
+        let scrollHeight = this.contentView.element.scrollHeight;
+        let offsetHeight = this.contentView.element.offsetHeight;
+
+        if (scrollHeight < offsetHeight) {
+            if (this._topOverflowShadowElement)
+                this._topOverflowShadowElement.style.opacity = 0;
+            this._bottomOverflowShadowElement.style.opacity = 0;
+            return;
+        }
+
+        let edgeThreshold = 1;
+        let scrollTop = this.contentView.element.scrollTop;
+
+        let topCoverage = Math.min(scrollTop, edgeThreshold);
+        let bottomCoverage = Math.max(0, (offsetHeight + scrollTop) - (scrollHeight - edgeThreshold));
+
+        if (this._topOverflowShadowElement)
+            this._topOverflowShadowElement.style.opacity = (topCoverage / edgeThreshold).toFixed(1);
+        this._bottomOverflowShadowElement.style.opacity = (1 - (bottomCoverage / edgeThreshold)).toFixed(1);
+    }
+
+    _checkForEmptyFilterResults()
+    {
+        function checkTreeOutlineForEmptyFilterResults(treeOutline)
+        {
+            // No tree elements, so don't touch the empty content placeholder.
+            if (!treeOutline.children.length)
+                return;
+
+            // Iterate over all the top level tree elements. If any filterable elements are visible, return early.
+            let filterableTreeElementFound = false;
+            let unfilteredTreeElementFound = false;
+            let currentTreeElement = treeOutline.children[0];
+            while (currentTreeElement) {
+                let suppressFilteringForTreeElement = currentTreeElement[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol];
+                if (!suppressFilteringForTreeElement) {
+                    filterableTreeElementFound = true;
+
+                    if (!currentTreeElement.hidden) {
+                        unfilteredTreeElementFound = true;
+                        break;
+                    }
+                }
+
+                currentTreeElement = currentTreeElement.nextSibling;
+            }
+
+            if (unfilteredTreeElementFound || !filterableTreeElementFound) {
+                this.hideEmptyContentPlaceholder(treeOutline);
+                this._emptyFilterResults.set(treeOutline, false);
+                return;
+            }
+
+            // All top level tree elements are hidden, so filtering hid everything. Show a message.
+            this.showEmptyContentPlaceholder(WebInspector.UIString("No Filter Results"), treeOutline);
+            this._emptyFilterResults.set(treeOutline, true);
+        }
+
+        for (let treeOutline of this._visibleContentTreeOutlines) {
+            if (treeOutline[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol])
+                continue;
+
+            checkTreeOutlineForEmptyFilterResults.call(this, treeOutline);
+        }
+    }
+
+    _filterDidChange()
+    {
+        this._updateFilter();
+    }
+
+    _updateFilter()
+    {
+        let selectedTreeElement;
+        for (let treeOutline of this.visibleContentTreeOutlines) {
+            if (treeOutline.hidden || treeOutline[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol])
+                continue;
+
+            selectedTreeElement = treeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                break;
+        }
+
+        let selectionWasHidden = selectedTreeElement && selectedTreeElement.hidden;
+
+        let filters = this._filterBar.filters;
+        this._textFilterRegex = simpleGlobStringToRegExp(filters.text, "i");
+        this._filtersSetting.value = filters;
+        this._filterFunctions = filters.functions;
+
+        // Don't populate if we don't have any active filters.
+        // We only need to populate when a filter needs to reveal.
+        let dontPopulate = !this._filterBar.hasActiveFilters() && !this.shouldFilterPopulate();
+
+        // Update all trees that allow filtering.
+        for (let treeOutline of this.visibleContentTreeOutlines) {
+            if (treeOutline.hidden || treeOutline[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol])
+                continue;
+
+            let currentTreeElement = treeOutline.children[0];
+            while (currentTreeElement && !currentTreeElement.root) {
+                if (!currentTreeElement[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol]) {
+                    const currentTreeElementWasHidden = currentTreeElement.hidden;
+                    this.applyFiltersToTreeElement(currentTreeElement);
+                    if (currentTreeElementWasHidden !== currentTreeElement.hidden)
+                        this.representedObjectWasFiltered(currentTreeElement.representedObject, currentTreeElement.hidden);
+                }
+
+                currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, dontPopulate);
+            }
+        }
+
+        this._checkForEmptyFilterResults();
+        this._updateContentOverflowShadowVisibility();
+
+        // Filter may have hidden the selected resource in the timeline view, which should now notify its listeners.
+        // FIXME: This is a layering violation. This should at least be in TimelineSidebarPanel.
+        if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden) {
+            var currentContentView = this.contentBrowser.currentContentView;
+            if (currentContentView instanceof WebInspector.TimelineRecordingContentView && typeof currentContentView.currentTimelineView.filterUpdated === "function")
+                currentContentView.currentTimelineView.filterUpdated();
+        }
+    }
+
+    _treeElementAddedOrChanged(event)
+    {
+        // Don't populate if we don't have any active filters.
+        // We only need to populate when a filter needs to reveal.
+        var dontPopulate = !this._filterBar.hasActiveFilters() && !this.shouldFilterPopulate();
+
+        // Apply the filters to the tree element and its descendants.
+        let treeElement = event.data.element;
+        let currentTreeElement = treeElement;
+        while (currentTreeElement && !currentTreeElement.root) {
+            if (!currentTreeElement[WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol]) {
+                const currentTreeElementWasHidden = currentTreeElement.hidden;
+                this.applyFiltersToTreeElement(currentTreeElement);
+                if (currentTreeElementWasHidden !== currentTreeElement.hidden)
+                    this.representedObjectWasFiltered(currentTreeElement.representedObject, currentTreeElement.hidden);
+            }
+
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, treeElement, dontPopulate);
+        }
+
+        this._checkForEmptyFilterResults();
+        this._updateContentOverflowShadowVisibilitySoon();
+
+        if (this.selected)
+            this._checkElementsForPendingViewStateCookie([treeElement]);
+
+        this.treeElementAddedOrChanged(treeElement);
+    }
+
+    _treeElementDisclosureDidChange(event)
+    {
+        this._updateContentOverflowShadowVisibility();
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        let selectedElement = event.data.selectedElement;
+        this._selectedContentTreeOutline = selectedElement ? selectedElement.treeOutline : null;
+    }
+
+    _checkForStaleResourcesIfNeeded()
+    {
+        if (!this._checkForStaleResourcesTimeoutIdentifier || !this._shouldAutoPruneStaleTopLevelResourceTreeElements)
+            return;
+        this.pruneStaleResourceTreeElements();
+    }
+
+    _checkForStaleResources(event)
+    {
+        console.assert(this._shouldAutoPruneStaleTopLevelResourceTreeElements);
+
+        if (this._checkForStaleResourcesTimeoutIdentifier)
+            return;
+
+        // Check on a delay to coalesce multiple calls to _checkForStaleResources.
+        this._checkForStaleResourcesTimeoutIdentifier = setTimeout(this.pruneStaleResourceTreeElements.bind(this));
+    }
+
+    _isTreeElementWithoutRepresentedObject(treeElement)
+    {
+        return treeElement instanceof WebInspector.FolderTreeElement
+            || treeElement instanceof WebInspector.DatabaseHostTreeElement
+            || treeElement instanceof WebInspector.IndexedDatabaseHostTreeElement
+            || typeof treeElement.representedObject === "string"
+            || treeElement.representedObject instanceof String;
+    }
+
+    _checkOutlinesForPendingViewStateCookie(matchTypeOnly)
+    {
+        if (!this._pendingViewStateCookie)
+            return;
+
+        this._checkForStaleResourcesIfNeeded();
+
+        var visibleTreeElements = [];
+        this._visibleContentTreeOutlines.forEach(function(outline) {
+            var currentTreeElement = outline.hasChildren ? outline.children[0] : null;
+            while (currentTreeElement) {
+                visibleTreeElements.push(currentTreeElement);
+                currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
+            }
+        });
+
+        return this._checkElementsForPendingViewStateCookie(visibleTreeElements, matchTypeOnly);
+    }
+
+    _checkElementsForPendingViewStateCookie(treeElements, matchTypeOnly)
+    {
+        if (!this._pendingViewStateCookie)
+            return;
+
+        var cookie = this._pendingViewStateCookie;
+
+        function treeElementMatchesCookie(treeElement)
+        {
+            if (this._isTreeElementWithoutRepresentedObject(treeElement))
+                return false;
+
+            var representedObject = treeElement.representedObject;
+            if (!representedObject)
+                return false;
+
+            var typeIdentifier = cookie[WebInspector.TypeIdentifierCookieKey];
+            if (typeIdentifier !== representedObject.constructor.TypeIdentifier)
+                return false;
+
+            if (matchTypeOnly)
+                return true;
+
+            var candidateObjectCookie = {};
+            if (representedObject.saveIdentityToCookie)
+                representedObject.saveIdentityToCookie(candidateObjectCookie);
+
+            var candidateCookieKeys = Object.keys(candidateObjectCookie);
+            return candidateCookieKeys.length && candidateCookieKeys.every(function valuesMatchForKey(key) {
+                return candidateObjectCookie[key] === cookie[key];
+            });
+        }
+
+        var matchedElement = null;
+        treeElements.some(function(element) {
+            if (treeElementMatchesCookie.call(this, element)) {
+                matchedElement = element;
+                return true;
+            }
+        }, this);
+
+        if (matchedElement) {
+            this.showDefaultContentViewForTreeElement(matchedElement);
+
+            this._pendingViewStateCookie = null;
+
+            // Delay clearing the restoringState flag until the next runloop so listeners
+            // checking for it in this runloop still know state was being restored.
+            setTimeout(function() {
+                this._restoringState = false;
+            }.bind(this));
+
+            if (this._finalAttemptToRestoreViewStateTimeout) {
+                clearTimeout(this._finalAttemptToRestoreViewStateTimeout);
+                this._finalAttemptToRestoreViewStateTimeout = undefined;
+            }
+        }
+    }
+
+    _createEmptyContentPlaceholderIfNeeded(treeOutline)
+    {
+        let emptyContentPlaceholderElement = this._emptyContentPlaceholderElements.get(treeOutline);
+        if (emptyContentPlaceholderElement)
+            return emptyContentPlaceholderElement;
+
+        emptyContentPlaceholderElement = document.createElement("div");
+        emptyContentPlaceholderElement.classList.add(WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName);
+        this._emptyContentPlaceholderElements.set(treeOutline, emptyContentPlaceholderElement);
+
+        let emptyContentPlaceholderMessageElement = document.createElement("div");
+        emptyContentPlaceholderMessageElement.className = WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName;
+        emptyContentPlaceholderElement.appendChild(emptyContentPlaceholderMessageElement);
+
+        return emptyContentPlaceholderElement;
+    }
+};
+
+WebInspector.NavigationSidebarPanel.SuppressFilteringSymbol = Symbol("suppress-filtering");
+WebInspector.NavigationSidebarPanel.WasExpandedDuringFilteringSymbol = Symbol("was-expanded-during-filtering");
+
+WebInspector.NavigationSidebarPanel.OverflowShadowElementStyleClassName = "overflow-shadow";
+WebInspector.NavigationSidebarPanel.TopOverflowShadowElementStyleClassName = "top";
+WebInspector.NavigationSidebarPanel.ContentTreeOutlineElementStyleClassName = "navigation-sidebar-panel-content-tree-outline";
+WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderElementStyleClassName = "empty-content-placeholder";
+WebInspector.NavigationSidebarPanel.EmptyContentPlaceholderMessageElementStyleClassName = "message";
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.css
new file mode 100644
index 000000000..313a027d5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.network-grid > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.content-view.network-grid > .data-grid th {
+    border-top: none;
+}
+
+.content-view.network-grid > .data-grid td {
+    height: 16px;
+    line-height: 16px;
+}
+
+.content-view.network-grid > .data-grid table.data {
+    background-image: linear-gradient(to bottom, white, white 50%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 95%));
+    background-size: 100% 40px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
new file mode 100644
index 000000000..0f135df54
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkGridContentView.js
@@ -0,0 +1,229 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkGridContentView = class NetworkGridContentView extends WebInspector.ContentView
+{
+    constructor(representedObject, extraArguments)
+    {
+        console.assert(extraArguments);
+        console.assert(extraArguments.networkSidebarPanel instanceof WebInspector.NetworkSidebarPanel);
+
+        super(representedObject);
+
+        this._networkSidebarPanel = extraArguments.networkSidebarPanel;
+
+        this._contentTreeOutline = this._networkSidebarPanel.contentTreeOutline;
+        this._contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+        var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
+
+        columns.domain.title = WebInspector.UIString("Domain");
+        columns.domain.width = "10%";
+
+        columns.type.title = WebInspector.UIString("Type");
+        columns.type.width = "8%";
+
+        columns.method.title = WebInspector.UIString("Method");
+        columns.method.width = "6%";
+
+        columns.scheme.title = WebInspector.UIString("Scheme");
+        columns.scheme.width = "6%";
+
+        columns.statusCode.title = WebInspector.UIString("Status");
+        columns.statusCode.width = "6%";
+
+        columns.cached.title = WebInspector.UIString("Cached");
+        columns.cached.width = "6%";
+
+        columns.size.title = WebInspector.UIString("Size");
+        columns.size.width = "8%";
+        columns.size.aligned = "right";
+
+        columns.transferSize.title = WebInspector.UIString("Transferred");
+        columns.transferSize.width = "8%";
+        columns.transferSize.aligned = "right";
+
+        columns.requestSent.title = WebInspector.UIString("Start Time");
+        columns.requestSent.width = "9%";
+        columns.requestSent.aligned = "right";
+
+        columns.latency.title = WebInspector.UIString("Latency");
+        columns.latency.width = "9%";
+        columns.latency.aligned = "right";
+
+        columns.duration.title = WebInspector.UIString("Duration");
+        columns.duration.width = "9%";
+        columns.duration.aligned = "right";
+
+        for (var column in columns)
+            columns[column].sortable = true;
+
+        this._dataGrid = new WebInspector.TimelineDataGrid(this._contentTreeOutline, columns);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("network-grid-content-view-sort", "requestSent");
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("network-grid-content-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);
+
+        this.element.classList.add("network-grid");
+        this.addSubview(this._dataGrid);
+
+        var networkTimeline = WebInspector.timelineManager.persistentNetworkTimeline;
+        networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
+        networkTimeline.addEventListener(WebInspector.Timeline.Event.Reset, this._networkTimelineReset, this);
+
+        this._clearNetworkItemsNavigationItem = new WebInspector.ButtonNavigationItem("clear-network-items", WebInspector.UIString("Clear Network Items"), "Images/NavigationItemTrash.svg", 15, 15);
+        this._clearNetworkItemsNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearNetworkItems, this);
+
+        this._pendingRecords = [];
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutline()
+    {
+        return this._contentTreeOutline;
+    }
+
+    get selectionPathComponents()
+    {
+        if (!this._contentTreeOutline.selectedTreeElement || this._contentTreeOutline.selectedTreeElement.hidden)
+            return null;
+
+        var pathComponent = new WebInspector.GeneralTreeElementPathComponent(this._contentTreeOutline.selectedTreeElement);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._treeElementPathComponentSelected, this);
+        return [pathComponent];
+    }
+
+    get zeroTime()
+    {
+        return WebInspector.timelineManager.persistentNetworkTimeline.startTime;
+    }
+
+    get navigationItems()
+    {
+        return [this._clearNetworkItemsNavigationItem];
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._dataGrid.shown();
+    }
+
+    hidden()
+    {
+        this._dataGrid.hidden();
+
+        super.hidden();
+    }
+
+    closed()
+    {
+        this._dataGrid.closed();
+    }
+
+    reset()
+    {
+        this._contentTreeOutline.removeChildren();
+        this._dataGrid.reset();
+    }
+
+    // Protected
+
+    layout()
+    {
+        this._processPendingRecords();
+    }
+
+    // Private
+
+    _processPendingRecords()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (var resourceTimelineRecord of this._pendingRecords) {
+            // Skip the record if it already exists in the tree.
+            var treeElement = this._contentTreeOutline.findTreeElement(resourceTimelineRecord.resource);
+            if (treeElement)
+                continue;
+
+            treeElement = new WebInspector.ResourceTreeElement(resourceTimelineRecord.resource);
+            var dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, false, this);
+
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+        }
+
+        this._pendingRecords = [];
+    }
+
+    _networkTimelineReset(event)
+    {
+        this.reset();
+    }
+
+    _networkTimelineRecordAdded(event)
+    {
+        var resourceTimelineRecord = event.data.record;
+        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+        this._pendingRecords.push(resourceTimelineRecord);
+
+        this.needsLayout();
+    }
+
+    _treeElementPathComponentSelected(event)
+    {
+        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
+        if (!dataGridNode)
+            return;
+        dataGridNode.revealAndSelect();
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+
+        if (!this._networkSidebarPanel.canShowDifferentContentView())
+            return;
+
+        let treeElement = event.data.selectedElement;
+        if (treeElement instanceof WebInspector.ResourceTreeElement) {
+            WebInspector.showRepresentedObject(treeElement.representedObject);
+            return;
+        }
+
+        console.error("Unknown tree element", treeElement);
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _clearNetworkItems(event) {
+        this.reset();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
new file mode 100644
index 000000000..6cfc2861f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.css
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation.network > :matches(.content, .empty-content-placeholder) {
+    top: 52px;
+}
+
+.sidebar > .panel.navigation.network > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.navigation.network > .title-bar {
+    position: absolute;
+    top: 29px;
+    left: 0;
+    right: 0;
+
+    height: 23px;
+
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--panel-background-color);
+    color: hsl(0, 0%, 22%);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-weight: bold;
+
+    padding: 4px 9px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content {
+ /* This hides the scrollbar. The view shows a scrollbar, we don't need two. */
+    padding-right: 16px;
+    right: -16px;
+}
+
+.sidebar > .panel.navigation.network .item:not(:hover, .selected) .status .status-button,
+.sidebar > .panel.navigation.network .item:hover:not(.selected) .status .close.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network:not(.network-grid-content-view-showing) .status .go-to-arrow.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing .status .close.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing .tree-outline.network-grid .item .subtitle {
+    display: none;
+}
+
+.sidebar > .panel.navigation.network > .content > .tree-outline {
+    min-height: 100%;
+    background-image: none;
+}
+
+.sidebar > .panel.navigation.network.network-grid-content-view-showing > .content > .tree-outline {
+    background-image: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03));
+    background-size: 100% 40px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
new file mode 100644
index 000000000..6f25ba1b9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js
@@ -0,0 +1,225 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkSidebarPanel = class NetworkSidebarPanel extends WebInspector.NavigationSidebarPanel
+{
+    constructor(contentBrowser)
+    {
+        super("network", WebInspector.UIString("Network"), true);
+
+        this.contentBrowser = contentBrowser;
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.addSubview(this._navigationBar);
+
+        this._resourcesTitleBarElement = document.createElement("div");
+        this._resourcesTitleBarElement.textContent = WebInspector.UIString("Name");
+        this._resourcesTitleBarElement.classList.add("title-bar");
+        this.element.appendChild(this._resourcesTitleBarElement);
+
+        var scopeItemPrefix = "network-sidebar-";
+        var scopeBarItems = [];
+
+        scopeBarItems.push(new WebInspector.ScopeBarItem(scopeItemPrefix + "type-all", WebInspector.UIString("All Resources"), true));
+
+        for (var key in WebInspector.Resource.Type) {
+            var value = WebInspector.Resource.Type[key];
+            var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + value, WebInspector.Resource.displayNameForType(value, true));
+            scopeBarItem[WebInspector.NetworkSidebarPanel.ResourceTypeSymbol] = value;
+            scopeBarItems.push(scopeBarItem);
+        }
+
+        this._scopeBar = new WebInspector.ScopeBar("network-sidebar-scope-bar", scopeBarItems, scopeBarItems[0], true);
+        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+        this._navigationBar.addNavigationItem(this._scopeBar);
+
+        this.contentTreeOutline.element.classList.add("network-grid");
+        this.contentTreeOutline.disclosureButtons = false;
+
+        this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
+
+        var networkTimeline = WebInspector.timelineManager.persistentNetworkTimeline;
+        networkTimeline.addEventListener(WebInspector.Timeline.Event.Reset, this._networkTimelineReset, this);
+
+        this._networkGridView = new WebInspector.NetworkGridContentView(null, {networkSidebarPanel: this});
+    }
+
+    // Public
+
+    get minimumWidth()
+    {
+        return this._navigationBar.minimumWidth;
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.frameResourceManager.removeEventListener(null, null, this);
+    }
+
+    showDefaultContentView()
+    {
+        this.contentBrowser.showContentView(this._networkGridView);
+    }
+
+    canShowDifferentContentView()
+    {
+        if (this._clickedTreeElementGoToArrow)
+            return true;
+
+        if (this.contentBrowser.currentContentView instanceof WebInspector.NetworkGridContentView)
+            return false;
+
+        return !this.restoringState || !this._restoredShowingNetworkGridContentView;
+    }
+
+    // Protected
+
+    saveStateToCookie(cookie)
+    {
+        console.assert(cookie);
+
+        cookie[WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey] = this.contentBrowser.currentContentView instanceof WebInspector.NetworkGridContentView;
+
+        super.saveStateToCookie(cookie);
+    }
+
+    restoreStateFromCookie(cookie, relaxedMatchDelay)
+    {
+        console.assert(cookie);
+
+        // Don't call NavigationSidebarPanel.restoreStateFromCookie, because it tries to match based
+        // on type selected tree element. This would cause the grid to be deselected.
+        if (cookie[WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey])
+            return;
+
+        super.restoreStateFromCookie(cookie, relaxedMatchDelay);
+    }
+
+    hasCustomFilters()
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+        return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement, flags)
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+
+        // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
+        if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
+            return true;
+
+        function match()
+        {
+            if (treeElement instanceof WebInspector.FrameTreeElement)
+                return selectedScopeBarItem[WebInspector.NetworkSidebarPanel.ResourceTypeSymbol] === WebInspector.Resource.Type.Document;
+
+            console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
+            if (!(treeElement instanceof WebInspector.ResourceTreeElement))
+                return false;
+
+            return treeElement.resource.type === selectedScopeBarItem[WebInspector.NetworkSidebarPanel.ResourceTypeSymbol];
+        }
+
+        var matched = match();
+        if (matched)
+            flags.expandTreeElement = true;
+        return matched;
+    }
+
+    treeElementAddedOrChanged(treeElement)
+    {
+        if (treeElement.status || !treeElement.treeOutline)
+            return;
+
+        var fragment = document.createDocumentFragment();
+
+        var closeButton = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/Close.svg", null, WebInspector.UIString("Close resource view")));
+        closeButton.element.classList.add("close");
+        closeButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementCloseButtonClicked, this);
+        fragment.appendChild(closeButton.element);
+
+        var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
+        goToButton[WebInspector.NetworkSidebarPanel.TreeElementSymbol] = treeElement;
+        goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
+        fragment.appendChild(goToButton.element);
+
+        treeElement.status = fragment;
+    }
+
+    // Private
+
+    _networkTimelineReset(event)
+    {
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+        this.showDefaultContentView();
+    }
+
+    _contentBrowserCurrentContentViewDidChange(event)
+    {
+        var didShowNetworkGridContentView = this.contentBrowser.currentContentView instanceof WebInspector.NetworkGridContentView;
+        this.element.classList.toggle("network-grid-content-view-showing", didShowNetworkGridContentView);
+    }
+
+    _treeElementGoToArrowWasClicked(event)
+    {
+        this._clickedTreeElementGoToArrow = true;
+
+        let treeElement = event.target[WebInspector.NetworkSidebarPanel.TreeElementSymbol];
+        console.assert(treeElement instanceof WebInspector.TreeElement);
+
+        treeElement.select(true, true);
+
+        this._clickedTreeElementGoToArrow = false;
+    }
+
+    _treeElementCloseButtonClicked(event)
+    {
+        // Say we are processing a selection change to avoid the selected tree element
+        // from being deselected when the default content view is shown.
+        this.contentTreeOutline.processingSelectionChange = true;
+
+        this.showDefaultContentView();
+
+        this.contentTreeOutline.processingSelectionChange = false;
+    }
+
+    _scopeBarSelectionDidChange(event)
+    {
+        this.updateFilter();
+    }
+};
+
+WebInspector.NetworkSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
+WebInspector.NetworkSidebarPanel.TreeElementSymbol = Symbol("tree-element");
+
+WebInspector.NetworkSidebarPanel.ShowingNetworkGridContentViewCookieKey = "network-sidebar-panel-showing-network-grid-content-view";
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js
new file mode 100644
index 000000000..fc4fcd790
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTabContentView.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkTabContentView = class NetworkTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.NetworkTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
+
+        super(identifier || "network", "network", tabBarItem, WebInspector.NetworkSidebarPanel, detailsSidebarPanels);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Network.svg",
+            title: WebInspector.UIString("Network"),
+        };
+    }
+
+    static isTabAllowed()
+    {
+        return !!window.NetworkAgent && !!window.PageAgent;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.NetworkTabContentView.Type;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.Resource;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        return false;
+    }
+};
+
+WebInspector.NetworkTabContentView.Type = "network";
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css
new file mode 100644
index 000000000..07332fa04
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-overview-graph.network {
+    padding-top: 3px;
+}
+
+.timeline-overview-graph.network > .graph-row {
+    height: 5px;
+}
+
+.timeline-overview-graph.network > .graph-row > .timeline-record-bar {
+    height: 4px;
+    margin-top: 1px;
+}
+
+.timeline-overview-graph.network > .graph-row > .timeline-record-bar > .segment:not(.inactive) {
+    box-shadow: white 1px 0 0;
+}
+
+.timeline-overview-graph.network:nth-child(even) > .graph-row > .timeline-record-bar > .segment:not(.inactive) {
+    box-shadow: hsl(0, 0%, 96%) 1px 0 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js
new file mode 100644
index 000000000..387c7f541
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js
@@ -0,0 +1,155 @@
+
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkTimelineOverviewGraph = class NetworkTimelineOverviewGraph extends WebInspector.TimelineOverviewGraph
+{
+    constructor(timeline, timelineOverview)
+    {
+        super(timelineOverview);
+
+        this.element.classList.add("network");
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
+        timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this.needsLayout, this);
+
+        this.reset();
+    }
+
+    // Public
+
+    reset()
+    {
+        super.reset();
+
+        this._nextDumpRow = 0;
+        this._timelineRecordGridRows = [];
+
+        for (var i = 0; i < WebInspector.NetworkTimelineOverviewGraph.MaximumRowCount; ++i)
+            this._timelineRecordGridRows.push([]);
+
+        this.element.removeChildren();
+
+        for (var rowRecords of this._timelineRecordGridRows) {
+            rowRecords.__element = document.createElement("div");
+            rowRecords.__element.classList.add("graph-row");
+            this.element.appendChild(rowRecords.__element);
+
+            rowRecords.__recordBars = [];
+        }
+    }
+
+    // Protected
+
+    layout()
+    {
+        let secondsPerPixel = this.timelineOverview.secondsPerPixel;
+        let recordBarIndex = 0;
+
+        function createBar(rowElement, rowRecordBars, records, renderMode)
+        {
+            let timelineRecordBar = rowRecordBars[recordBarIndex];
+            if (!timelineRecordBar)
+                timelineRecordBar = rowRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
+            else {
+                timelineRecordBar.renderMode = renderMode;
+                timelineRecordBar.records = records;
+            }
+            timelineRecordBar.refresh(this);
+            if (!timelineRecordBar.element.parentNode)
+                rowElement.appendChild(timelineRecordBar.element);
+            ++recordBarIndex;
+        }
+
+        for (let rowRecords of this._timelineRecordGridRows) {
+            let rowElement = rowRecords.__element;
+            let rowRecordBars = rowRecords.__recordBars;
+
+            recordBarIndex = 0;
+
+            WebInspector.TimelineRecordBar.createCombinedBars(rowRecords, secondsPerPixel, this, createBar.bind(this, rowElement, rowRecordBars));
+
+            // Remove the remaining unused TimelineRecordBars.
+            for (; recordBarIndex < rowRecordBars.length; ++recordBarIndex) {
+                rowRecordBars[recordBarIndex].records = null;
+                rowRecordBars[recordBarIndex].element.remove();
+            }
+        }
+    }
+
+    // Private
+
+    _networkTimelineRecordAdded(event)
+    {
+        var resourceTimelineRecord = event.data.record;
+        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+        function compareByStartTime(a, b)
+        {
+            return a.startTime - b.startTime;
+        }
+
+        // Try to find a row that has room and does not overlap a previous record.
+        var foundRowForRecord = false;
+        for (var i = 0; i < this._timelineRecordGridRows.length; ++i) {
+            var rowRecords = this._timelineRecordGridRows[i];
+            var lastRecord = rowRecords.lastValue;
+
+            if (!lastRecord || lastRecord.endTime + WebInspector.NetworkTimelineOverviewGraph.MinimumBarPaddingTime <= resourceTimelineRecord.startTime) {
+                insertObjectIntoSortedArray(resourceTimelineRecord, rowRecords, compareByStartTime);
+                this._nextDumpRow = i + 1;
+                foundRowForRecord = true;
+                break;
+            }
+        }
+
+        if (!foundRowForRecord) {
+            // Try to find a row that does not overlap a previous record's active time, but it can overlap the inactive time.
+            for (var i = 0; i < this._timelineRecordGridRows.length; ++i) {
+                var rowRecords = this._timelineRecordGridRows[i];
+                var lastRecord = rowRecords.lastValue;
+                console.assert(lastRecord);
+
+                if (lastRecord.activeStartTime + WebInspector.NetworkTimelineOverviewGraph.MinimumBarPaddingTime <= resourceTimelineRecord.startTime) {
+                    insertObjectIntoSortedArray(resourceTimelineRecord, rowRecords, compareByStartTime);
+                    this._nextDumpRow = i + 1;
+                    foundRowForRecord = true;
+                    break;
+                }
+            }
+        }
+
+        // We didn't find a empty spot, so dump into the designated dump row.
+        if (!foundRowForRecord) {
+            if (this._nextDumpRow >= WebInspector.NetworkTimelineOverviewGraph.MaximumRowCount)
+                this._nextDumpRow = 0;
+            insertObjectIntoSortedArray(resourceTimelineRecord, this._timelineRecordGridRows[this._nextDumpRow++], compareByStartTime);
+        }
+
+        this.needsLayout();
+    }
+};
+
+WebInspector.NetworkTimelineOverviewGraph.MaximumRowCount = 6;
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css
new file mode 100644
index 000000000..838f1540f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.network > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.network .item .subtitle {
+    display: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
new file mode 100644
index 000000000..22bf91f10
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineView.js
@@ -0,0 +1,227 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NetworkTimelineView = class NetworkTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.Network);
+
+        this.navigationSidebarTreeOutline.disclosureButtons = false;
+        this.navigationSidebarTreeOutline.element.classList.add("network");
+
+        var columns = {domain: {}, type: {}, method: {}, scheme: {}, statusCode: {}, cached: {}, size: {}, transferSize: {}, requestSent: {}, latency: {}, duration: {}};
+
+        columns.domain.title = WebInspector.UIString("Domain");
+        columns.domain.width = "10%";
+
+        columns.type.title = WebInspector.UIString("Type");
+        columns.type.width = "8%";
+
+        var typeToLabelMap = new Map;
+        for (var key in WebInspector.Resource.Type) {
+            var value = WebInspector.Resource.Type[key];
+            typeToLabelMap.set(value, WebInspector.Resource.displayNameForType(value, true));
+        }
+
+        columns.type.scopeBar = WebInspector.TimelineDataGrid.createColumnScopeBar("network", typeToLabelMap);
+        this._scopeBar = columns.type.scopeBar;
+
+        columns.method.title = WebInspector.UIString("Method");
+        columns.method.width = "6%";
+
+        columns.scheme.title = WebInspector.UIString("Scheme");
+        columns.scheme.width = "6%";
+
+        columns.statusCode.title = WebInspector.UIString("Status");
+        columns.statusCode.width = "6%";
+
+        columns.cached.title = WebInspector.UIString("Cached");
+        columns.cached.width = "6%";
+
+        columns.size.title = WebInspector.UIString("Size");
+        columns.size.width = "8%";
+        columns.size.aligned = "right";
+
+        columns.transferSize.title = WebInspector.UIString("Transferred");
+        columns.transferSize.width = "8%";
+        columns.transferSize.aligned = "right";
+
+        columns.requestSent.title = WebInspector.UIString("Start Time");
+        columns.requestSent.width = "9%";
+        columns.requestSent.aligned = "right";
+
+        columns.latency.title = WebInspector.UIString("Latency");
+        columns.latency.width = "9%";
+        columns.latency.aligned = "right";
+
+        columns.duration.title = WebInspector.UIString("Duration");
+        columns.duration.width = "9%";
+        columns.duration.aligned = "right";
+
+        for (var column in columns)
+            columns[column].sortable = true;
+
+        this._dataGrid = new WebInspector.TimelineDataGrid(this.navigationSidebarTreeOutline, columns);
+        this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("network-timeline-view-sort", "requestSent");
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("network-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);
+
+        this.element.classList.add("network");
+        this.addSubview(this._dataGrid);
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
+
+        this._pendingRecords = [];
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString("Resources");
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._dataGrid.shown();
+    }
+
+    hidden()
+    {
+        this._dataGrid.hidden();
+
+        super.hidden();
+    }
+
+    closed()
+    {
+        console.assert(this.representedObject instanceof WebInspector.Timeline);
+        this.representedObject.removeEventListener(null, null, this);
+
+        this._dataGrid.closed();
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement)
+    {
+        return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+    }
+
+    // Protected
+
+    canShowContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement)
+            return true;
+        return super.canShowContentViewForTreeElement(treeElement);
+    }
+
+    showContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
+            WebInspector.showSourceCode(treeElement.representedObject);
+            return;
+        }
+
+        console.error("Unknown tree element selected.", treeElement);
+    }
+
+    treeElementPathComponentSelected(event)
+    {
+        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
+        if (!dataGridNode)
+            return;
+        dataGridNode.revealAndSelect();
+    }
+
+    treeElementSelected(treeElement, selectedByUser)
+    {
+        if (this._dataGrid.shouldIgnoreSelectionEvent())
+            return;
+
+        super.treeElementSelected(treeElement, selectedByUser);
+    }
+
+    layout()
+    {
+        this._processPendingRecords();
+    }
+
+    // Private
+
+    _processPendingRecords()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (var resourceTimelineRecord of this._pendingRecords) {
+            // Skip the record if it already exists in the tree.
+            var treeElement = this.navigationSidebarTreeOutline.findTreeElement(resourceTimelineRecord.resource);
+            if (treeElement)
+                continue;
+
+            treeElement = new WebInspector.ResourceTreeElement(resourceTimelineRecord.resource);
+            var dataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, false, this);
+
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+        }
+
+        this._pendingRecords = [];
+    }
+
+    _networkTimelineRecordAdded(event)
+    {
+        var resourceTimelineRecord = event.data.record;
+        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+        this._pendingRecords.push(resourceTimelineRecord);
+
+        this.needsLayout();
+    }
+
+    _dataGridFiltersDidChange(event)
+    {
+        this.timelineSidebarPanel.updateFilter();
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css b/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css
new file mode 100644
index 000000000..b26b61460
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.css
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.new-tab.tab.content-view {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-content: center;
+
+    background-color: hsl(0, 0%, 96%);
+
+    padding: 10px;
+
+    overflow-y: auto;
+}
+
+.new-tab.tab.content-view > .tab-item {
+    display: flex;
+
+    min-width: 110px;
+    min-height: 110px;
+
+    margin: 10px;
+
+    flex-direction: column;
+    align-items: center;
+}
+
+.new-tab.tab.content-view > .tab-item.disabled {
+    opacity: 0.5;
+    filter: brightness(90%);
+}
+
+.new-tab.tab.content-view > .tab-item > .box {
+    width: 94px;
+    height: 94px;
+
+    padding: 15px;
+    border-radius: 5px;
+
+    background-color: hsl(0, 0%, 82%);
+    box-shadow: hsla(0, 0%, 0%, 0.33) 0 1px 6px;
+
+    display: block;
+}
+
+.new-tab.tab.content-view > .tab-item:not(.disabled):hover > .box {
+    filter: brightness(90%);
+}
+
+.new-tab.tab.content-view > .tab-item:not(.disabled):active > .box {
+    filter: brightness(75%);
+}
+
+.new-tab.tab.content-view > .tab-item > .box > img {
+    width: 64px;
+    height: 64px;
+
+    opacity: 0.55; /* Assumes black glyphs. */
+
+    -webkit-user-drag: none;
+}
+
+.new-tab.tab.content-view > .tab-item > label {
+    display: block;
+    margin-top: 8px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js
new file mode 100644
index 000000000..a7229200e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/NewTabContentView.js
@@ -0,0 +1,163 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.NewTabContentView = class NewTabContentView extends WebInspector.TabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.NewTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        tabBarItem.isDefaultTab = true;
+
+        super(identifier || "new-tab", "new-tab", tabBarItem);
+
+        WebInspector.notifications.addEventListener(WebInspector.Notification.TabTypesChanged, this._updateShownTabs.bind(this));
+
+        this._tabElementsByTabClass = new Map;
+        this._updateShownTabs();
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/NewTab.svg",
+            title: WebInspector.UIString("New Tab"),
+        };
+    }
+
+    static isEphemeral()
+    {
+        return true;
+    }
+
+    static shouldSaveTab()
+    {
+        return false;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.NewTabContentView.Type;
+    }
+
+    shown()
+    {
+        WebInspector.tabBrowser.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemAdded, this._updateTabItems, this);
+        WebInspector.tabBrowser.tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._updateTabItems, this);
+
+        this._updateTabItems();
+    }
+
+    hidden()
+    {
+        WebInspector.tabBrowser.tabBar.removeEventListener(null, null, this);
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        // Showing the split console is problematic because some new tabs will cause it to
+        // disappear and not reappear, but others won't. Just prevent it from ever showing.
+        return false;
+    }
+
+    layout()
+    {
+        this._tabElementsByTabClass.clear();
+        this.element.removeChildren();
+
+        for (let tabClass of this._shownTabClasses) {
+            let tabItemElement = document.createElement("div");
+            tabItemElement.classList.add("tab-item");
+            tabItemElement.addEventListener("click", this._createNewTabWithType.bind(this, tabClass.Type));
+            tabItemElement[WebInspector.NewTabContentView.TypeSymbol] = tabClass.Type;
+
+            let boxElement = tabItemElement.appendChild(document.createElement("div"));
+            boxElement.classList.add("box");
+
+            let info = tabClass.tabInfo();
+            let imageElement = boxElement.appendChild(document.createElement("img"));
+            imageElement.src = info.image;
+
+            let labelElement = tabItemElement.appendChild(document.createElement("label"));
+            labelElement.textContent = info.title;
+
+            this.element.appendChild(tabItemElement);
+            this._tabElementsByTabClass.set(tabClass, tabItemElement);
+        }
+
+        this._updateTabItems();
+    }
+
+    // Private
+
+    _createNewTabWithType(tabType, event)
+    {
+        if (!WebInspector.isNewTabWithTypeAllowed(tabType))
+            return;
+
+        const canCreateAdditionalTabs = this._allowableTabTypes().length > 1;
+        const options = {
+            referencedView: this,
+            shouldReplaceTab: !canCreateAdditionalTabs || !WebInspector.modifierKeys.metaKey,
+            shouldShowNewTab: !WebInspector.modifierKeys.metaKey
+        }
+        WebInspector.createNewTabWithType(tabType, options);
+    }
+
+    _updateShownTabs()
+    {
+        let allTabClasses = [...WebInspector.knownTabClasses()];
+        let allowedTabClasses = allTabClasses.filter((tabClass) => tabClass.isTabAllowed() && !tabClass.isEphemeral());
+        allowedTabClasses.sort((a, b) => a.tabInfo().title.localeCompare(b.tabInfo().title));
+
+        if (Object.shallowEqual(this._shownTabClasses, allowedTabClasses))
+            return;
+
+        this._shownTabClasses = allowedTabClasses;
+        this.needsLayout();
+    }
+
+    _allowableTabTypes()
+    {
+        let tabTypes = this._shownTabClasses.map((tabClass) => tabClass.Type);
+        return tabTypes.filter((type) => WebInspector.isNewTabWithTypeAllowed(type));
+    }
+
+    _updateTabItems()
+    {
+        for (let [tabClass, tabItemElement] of this._tabElementsByTabClass.entries()) {
+            let allowed = WebInspector.isNewTabWithTypeAllowed(tabClass.Type);
+            tabItemElement.classList.toggle(WebInspector.NewTabContentView.DisabledStyleClassName, !allowed);
+        }
+    }
+};
+
+WebInspector.NewTabContentView.Type = "new-tab";
+WebInspector.NewTabContentView.TypeSymbol = Symbol("type");
+
+WebInspector.NewTabContentView.TabItemStyleClassName = "tab-item";
+WebInspector.NewTabContentView.DisabledStyleClassName = "disabled";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css
new file mode 100644
index 000000000..954601f0f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.css
@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.object-preview {
+    color: black;
+    font-style: italic;
+    font-family: Menlo, monospace;
+    font-size: 11px;
+}
+
+.object-preview-name,
+.object-preview.lossless {
+    font-style: normal;
+}
+
+.object-preview .name {
+    color: hsl(295, 76%, 32%);
+}
+
+.object-preview > .size {
+    font-style: normal;
+    color: var(--console-secondary-text-color);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js
new file mode 100644
index 000000000..dd78543df
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectPreviewView.js
@@ -0,0 +1,282 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectPreviewView = class ObjectPreviewView extends WebInspector.Object
+{
+    constructor(preview, mode)
+    {
+        console.assert(preview instanceof WebInspector.ObjectPreview);
+
+        super();
+
+        this._preview = preview;
+        this._mode = mode || WebInspector.ObjectPreviewView.Mode.Full;
+
+        this._element = document.createElement("span");
+        this._element.className = "object-preview";
+
+        this._previewElement = this._element.appendChild(document.createElement("span"));
+        this._previewElement.className = "preview";
+        this._lossless = this._appendPreview(this._previewElement, this._preview);
+
+        this._titleElement = this._element.appendChild(document.createElement("span"));
+        this._titleElement.className = "title";
+        this._titleElement.hidden = true;
+        this._initTitleElement();
+
+        if (this._preview.hasSize()) {
+            var sizeElement = this._element.appendChild(document.createElement("span"));
+            sizeElement.className = "size";
+            sizeElement.textContent = " (" + this._preview.size + ")";
+        }
+
+        if (this._lossless)
+            this._element.classList.add("lossless");
+    }
+
+    // Public
+
+    get preview()
+    {
+        return this._preview;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get mode()
+    {
+        return this._mode;
+    }
+
+    get lossless()
+    {
+        return this._lossless;
+    }
+
+    showTitle()
+    {
+        this._titleElement.hidden = false;
+        this._previewElement.hidden = true;
+    }
+
+    showPreview()
+    {
+        this._titleElement.hidden = true;
+        this._previewElement.hidden = false;
+    }
+
+    setOriginatingObjectInfo(remoteObject, propertyPath)
+    {
+        console.assert(!this._remoteObject);
+        console.assert(remoteObject instanceof WebInspector.RemoteObject);
+        console.assert(!propertyPath || propertyPath instanceof WebInspector.PropertyPath);
+
+        this._remoteObject = remoteObject;
+        this._propertyPath = propertyPath || null;
+
+        this.element.addEventListener("contextmenu", this._contextMenuHandler.bind(this));
+    }
+
+    // Private
+
+    _initTitleElement()
+    {
+        // Display null / regexps as simple formatted values even in title.
+        if (this._preview.subtype === "regexp" || this._preview.subtype === "null")
+            this._titleElement.appendChild(WebInspector.FormattedValue.createElementForObjectPreview(this._preview));
+        else
+            this._titleElement.textContent = this._preview.description || "";
+    }
+
+    _numberOfPropertiesToShowInMode()
+    {
+        return this._mode === WebInspector.ObjectPreviewView.Mode.Brief ? 3 : Infinity;
+    }
+
+    _appendPreview(element, preview)
+    {
+        var displayObjectAsValue = false;
+        if (preview.type === "object") {
+            if (preview.subtype === "regexp" || preview.subtype === "null") {
+                // Display null / regexps as simple formatted values.
+                displayObjectAsValue = true;
+            } else if ((preview.subtype === "array" && preview.description !== "Array") || (preview.subtype !== "array" && preview.description !== "Object")) {
+                // Class names for other non-basic-Array / non-basic-Object types.
+                var nameElement = element.appendChild(document.createElement("span"));
+                nameElement.className = "object-preview-name";
+                nameElement.textContent = preview.description + " ";
+            }
+        }
+
+        // Content.
+        var bodyElement = element.appendChild(document.createElement("span"));
+        bodyElement.className = "object-preview-body";
+        if (!displayObjectAsValue) {
+            if (preview.collectionEntryPreviews)
+                return this._appendEntryPreviews(bodyElement, preview);
+            if (preview.propertyPreviews)
+                return this._appendPropertyPreviews(bodyElement, preview);
+        }
+        return this._appendValuePreview(bodyElement, preview);
+    }
+
+    _appendEntryPreviews(element, preview)
+    {
+        var lossless = preview.lossless && !preview.propertyPreviews.length;
+        var overflow = preview.overflow;
+
+        var isIterator = preview.subtype === "iterator";
+
+        element.append(isIterator ? "[" : "{");
+
+        var limit = Math.min(preview.collectionEntryPreviews.length, this._numberOfPropertiesToShowInMode());
+        for (var i = 0; i < limit; ++i) {
+            if (i > 0)
+                element.append(", ");
+
+            var keyPreviewLossless = true;
+            var entry = preview.collectionEntryPreviews[i];
+            if (entry.keyPreview) {
+                keyPreviewLossless = this._appendPreview(element, entry.keyPreview);
+                element.append(" => ");
+            }
+
+            var valuePreviewLossless = this._appendPreview(element, entry.valuePreview);
+
+            if (!keyPreviewLossless || !valuePreviewLossless)
+                lossless = false;
+        }
+
+        if (preview.collectionEntryPreviews.length > limit) {
+            lossless = false;
+            overflow = true;
+        }
+
+        if (overflow) {
+            if (limit > 0)
+                element.append(", ");
+            element.append(ellipsis);
+        }
+
+        element.append(isIterator ? "]" : "}");
+
+        return lossless;
+    }
+
+    _appendPropertyPreviews(element, preview)
+    {
+        // Do not show Error properties in previews. They are more useful in full views.
+        if (preview.subtype === "error")
+            return false;
+
+        // Do not show Date properties in previews. If there are any properties, show them in full view.
+        if (preview.subtype === "date")
+            return !preview.propertyPreviews.length;
+
+        var lossless = preview.lossless;
+        var overflow = preview.overflow;
+
+        // FIXME: Array previews should have better sparse support: (undefined × 10).
+        var isArray = preview.subtype === "array";
+
+        element.append(isArray ? "[" : "{");
+
+        var numberAdded = 0;
+        var limit = this._numberOfPropertiesToShowInMode();
+        for (var i = 0; i < preview.propertyPreviews.length && numberAdded < limit; ++i) {
+            var property = preview.propertyPreviews[i];
+
+            // FIXME: Better handle getter/setter accessors. Should we show getters in previews?
+            if (property.type === "accessor")
+                continue;
+
+            // Constructor name is often already visible, so don't show it as a property.
+            if (property.name === "constructor")
+                continue;
+
+            if (numberAdded++ > 0)
+                element.append(", ");
+
+            if (!isArray || property.name != i) {
+                var nameElement = element.appendChild(document.createElement("span"));
+                nameElement.className = "name";
+                nameElement.textContent = property.name;
+                element.append(": ");
+            }
+
+            if (property.valuePreview)
+                this._appendPreview(element, property.valuePreview);
+            else if (property.subtype === "node")
+                element.appendChild(WebInspector.FormattedValue.createElementForNodePreview(property));
+            else
+                element.appendChild(WebInspector.FormattedValue.createElementForPropertyPreview(property));
+        }
+
+        if (numberAdded === limit && preview.propertyPreviews.length > limit) {
+            lossless = false;
+            overflow = true;
+        }
+
+        if (overflow) {
+            if (limit > 0)
+                element.append(", ");
+            element.append(ellipsis);
+        }
+
+        element.append(isArray ? "]" : "}");
+
+        return lossless;
+    }
+
+    _appendValuePreview(element, preview)
+    {
+        element.appendChild(WebInspector.FormattedValue.createElementForObjectPreview(preview));
+        return true;
+    }
+
+    _contextMenuHandler(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        contextMenu.appendItem(WebInspector.UIString("Log Value"), () => {
+            let remoteObject = this._remoteObject;
+            let isImpossible = !this._propertyPath || this._propertyPath.isFullPathImpossible();
+            let text = isImpossible ? WebInspector.UIString("Selected Value") : this._propertyPath.displayPath(WebInspector.PropertyPath.Type.Value);
+
+            if (!isImpossible)
+                WebInspector.quickConsole.prompt.pushHistoryItem(text);
+
+            WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, this._remoteObject, isImpossible);
+        });
+    }
+};
+
+WebInspector.ObjectPreviewView.Mode = {
+    Brief: Symbol("object-preview-brief"),
+    Full: Symbol("object-preview-full"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css
new file mode 100644
index 000000000..d678c5b33
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.object-tree-array-index {
+    position: relative;
+    left: -12px;
+    margin-top: 2px;
+    margin-bottom: 1px;
+}
+
+.object-tree .object-tree-array-index > .icon {
+    display: none;
+}
+
+.object-tree-array-index .index-name {
+    font-family: -apple-system-monospaced-numbers, sans-serif;
+    font-size: 11px;
+    vertical-align: top;
+    color: var(--console-secondary-text-color);
+
+    position:relative;
+    top: -1px;
+
+    display: inline-block;
+    width: 30px;
+    text-align: right;
+}
+
+/* An array inside an array we should reduce the padding-start. */
+.object-tree-array-index .index-value .object-tree .tree-outline.object {
+    -webkit-padding-start: 6px;
+}
+
+/* An array inside an ObjectTreePropertyTreeElement needs more left shift */
+.object-tree-property + ol .object-tree-array-index {
+    left: -18px;
+}
+
+/* A node inside an array we should reduce the padding-start. */
+.object-tree-array-index .index-value .formatted-node .tree-outline.dom {
+    -webkit-padding-start: 0px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js
new file mode 100644
index 000000000..c36262b8b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeArrayIndexTreeElement.js
@@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectTreeArrayIndexTreeElement = class ObjectTreeArrayIndexTreeElement extends WebInspector.ObjectTreeBaseTreeElement
+{
+    constructor(property, propertyPath)
+    {
+        console.assert(property.isIndexProperty(), "ObjectTreeArrayIndexTreeElement expects numeric property names");
+
+        super(property, propertyPath, property);
+
+        this.mainTitle = this._titleFragment();
+        this.addClassName("object-tree-property");
+        this.addClassName("object-tree-array-index");
+
+        if (!this.property.hasValue())
+            this.addClassName("accessor");
+    }
+
+    // Protected
+
+    invokedGetter()
+    {
+        this.mainTitle = this._titleFragment();
+
+        this.removeClassName("accessor");
+    }
+
+    // Private
+
+    _titleFragment()
+    {
+        var container = document.createDocumentFragment();
+
+        // Array index name.
+        var nameElement = container.appendChild(document.createElement("span"));
+        nameElement.className = "index-name";
+        nameElement.textContent = this.property.name;
+        nameElement.title = this.propertyPathString(this.thisPropertyPath());
+
+        // Space. For copy/paste to have space between the index and value.
+        container.append(" ");
+
+        // Value.
+        var valueElement = container.appendChild(document.createElement("span"));
+        valueElement.className = "index-value";
+
+        var resolvedValue = this.resolvedValue();
+        if (resolvedValue)
+            valueElement.appendChild(WebInspector.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject(resolvedValue, this.resolvedValuePropertyPath()));
+        else {
+            if (this.property.hasGetter())
+                container.appendChild(this.createGetterElement(true));
+            if (this.property.hasSetter())
+                container.appendChild(this.createSetterElement());
+        }
+
+        valueElement.classList.add("value");
+        if (this.hadError())
+            valueElement.classList.add("error");
+
+        return container;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
new file mode 100644
index 000000000..7bed1b228
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeBaseTreeElement.js
@@ -0,0 +1,258 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectTreeBaseTreeElement = class ObjectTreeBaseTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(representedObject, propertyPath, property)
+    {
+        console.assert(representedObject);
+        console.assert(propertyPath instanceof WebInspector.PropertyPath);
+        console.assert(!property || property instanceof WebInspector.PropertyDescriptor);
+
+        super(null, null, null, representedObject, false);
+
+        this._property = property;
+        this._propertyPath = propertyPath;
+
+        this.toggleOnClick = true;
+        this.selectable = false;
+        this.tooltipHandledSeparately = true;
+    }
+
+    // Public
+
+    get property()
+    {
+        return this._property;
+    }
+
+    get propertyPath()
+    {
+        return this._propertyPath;
+    }
+
+    // Protected
+
+    oncontextmenu(event)
+    {
+        this._contextMenuHandler(event);
+    }
+
+    resolvedValue()
+    {
+        console.assert(this._property);
+        if (this._getterValue)
+            return this._getterValue;
+        if (this._property.hasValue())
+            return this._property.value;
+        return null;
+    }
+
+    resolvedValuePropertyPath()
+    {
+        console.assert(this._property);
+        if (this._getterValue)
+            return this._propertyPath.appendPropertyDescriptor(this._getterValue, this._property, WebInspector.PropertyPath.Type.Value);
+        if (this._property.hasValue())
+            return this._propertyPath.appendPropertyDescriptor(this._property.value, this._property, WebInspector.PropertyPath.Type.Value);
+        return null;
+    }
+
+    thisPropertyPath()
+    {
+        console.assert(this._property);
+        return this._propertyPath.appendPropertyDescriptor(null, this._property, this.propertyPathType());
+    }
+
+    hadError()
+    {
+        console.assert(this._property);
+        return this._property.wasThrown || this._getterHadError;
+    }
+
+    propertyPathType()
+    {
+        console.assert(this._property);
+        if (this._getterValue || this._property.hasValue())
+            return WebInspector.PropertyPath.Type.Value;
+        if (this._property.hasGetter())
+            return WebInspector.PropertyPath.Type.Getter;
+        if (this._property.hasSetter())
+            return WebInspector.PropertyPath.Type.Setter;
+        return WebInspector.PropertyPath.Type.Value;
+    }
+
+    propertyPathString(propertyPath)
+    {
+        if (propertyPath.isFullPathImpossible())
+            return WebInspector.UIString("Unable to determine path to property from root");
+
+        return propertyPath.displayPath(this.propertyPathType());
+    }
+
+    createGetterElement(interactive)
+    {
+        var getterElement = document.createElement("img");
+        getterElement.className = "getter";
+
+        if (!interactive) {
+            getterElement.classList.add("disabled");
+            getterElement.title = WebInspector.UIString("Getter");
+            return getterElement;
+        }
+
+        getterElement.title = WebInspector.UIString("Invoke getter");
+        getterElement.addEventListener("click", function(event) {
+            event.stopPropagation();
+            var lastNonPrototypeObject = this._propertyPath.lastNonPrototypeObject;
+            var getterObject = this._property.get;
+            lastNonPrototypeObject.invokeGetter(getterObject, function(error, result, wasThrown) {
+                this._getterHadError = !!(error || wasThrown);
+                this._getterValue = result;
+                if (this.invokedGetter && typeof this.invokedGetter === "function")
+                    this.invokedGetter();
+            }.bind(this));
+        }.bind(this));
+
+        return getterElement;
+    }
+
+    createSetterElement(interactive)
+    {
+        var setterElement = document.createElement("img");
+        setterElement.className = "setter";
+        setterElement.title = WebInspector.UIString("Setter");
+
+        if (!interactive)
+            setterElement.classList.add("disabled");
+
+        return setterElement;
+    }
+
+    // Private
+
+    _logSymbolProperty()
+    {
+        var symbol = this._property.symbol;
+        if (!symbol)
+            return;
+
+        var text = WebInspector.UIString("Selected Symbol");
+        WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, symbol, true);
+    }
+
+    _logValue(value)
+    {
+        var resolvedValue = value || this.resolvedValue();
+        if (!resolvedValue)
+            return;
+
+        var propertyPath = this.resolvedValuePropertyPath();
+        var isImpossible = propertyPath.isFullPathImpossible();
+        var text = isImpossible ? WebInspector.UIString("Selected Value") : propertyPath.displayPath(this.propertyPathType());
+
+        if (!isImpossible)
+            WebInspector.quickConsole.prompt.pushHistoryItem(text);
+
+        WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, resolvedValue, isImpossible);
+    }
+
+    _contextMenuHandler(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        if (typeof this.treeOutline.objectTreeElementAddContextMenuItems === "function") {
+            this.treeOutline.objectTreeElementAddContextMenuItems(this, contextMenu);
+            if (!contextMenu.isEmpty())
+                contextMenu.appendSeparator();
+        }             
+
+        let resolvedValue = this.resolvedValue();
+        if (!resolvedValue)
+            return;
+
+        if (this._property && this._property.symbol)
+            contextMenu.appendItem(WebInspector.UIString("Log Symbol"), this._logSymbolProperty.bind(this));
+
+        contextMenu.appendItem(WebInspector.UIString("Log Value"), this._logValue.bind(this));
+
+        let propertyPath = this.resolvedValuePropertyPath();
+        if (propertyPath && !propertyPath.isFullPathImpossible()) {
+            contextMenu.appendItem(WebInspector.UIString("Copy Path to Property"), () => {
+                InspectorFrontendHost.copyText(propertyPath.displayPath(WebInspector.PropertyPath.Type.Value));
+            });
+        }
+
+        contextMenu.appendSeparator();
+
+        this._appendMenusItemsForObject(contextMenu, resolvedValue);
+    }
+
+    _appendMenusItemsForObject(contextMenu, resolvedValue)
+    {
+        if (resolvedValue.type === "function") {
+            // FIXME: We should better handle bound functions.
+            if (!isFunctionStringNativeCode(resolvedValue.description)) {
+                contextMenu.appendItem(WebInspector.UIString("Jump to Definition"), function() {
+                    DebuggerAgent.getFunctionDetails(resolvedValue.objectId, function(error, response) {
+                        if (error)
+                            return;
+
+                        let location = response.location;
+                        let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId);
+                        if (!sourceCode)
+                            return;
+
+                        let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
+                        WebInspector.showSourceCodeLocation(sourceCodeLocation);
+                    });
+                });
+            }
+            return;
+        }
+
+        if (resolvedValue.subtype === "node") {
+            contextMenu.appendItem(WebInspector.UIString("Copy as HTML"), function() {
+                resolvedValue.pushNodeToFrontend(function(nodeId) {
+                    WebInspector.domTreeManager.nodeForId(nodeId).copyNode();
+                });
+            });
+
+            contextMenu.appendItem(WebInspector.UIString("Scroll Into View"), function() {
+                function scrollIntoView() { this.scrollIntoViewIfNeeded(true); }
+                resolvedValue.callFunction(scrollIntoView, undefined, false, function() {});
+            });
+
+            contextMenu.appendSeparator();
+
+            contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), function() {
+                resolvedValue.pushNodeToFrontend(function(nodeId) {
+                    WebInspector.domTreeManager.inspectElement(nodeId);
+                });
+            });
+            return;
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.css
new file mode 100644
index 000000000..b8a821b57
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.css
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.object-tree-array-index.object-tree-map-entry > .titles > .title > .index-name {
+    width: 40px;
+    text-align: right;
+}
+
+.object-tree-map-entry.key:not(:first-child) {
+    border-top: 1px solid hsla(0, 0%, 0%, 0.05);
+}
+
+.object-tree-map-entry {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    left: -2px;
+}
+
+.object-tree-property + ol .object-tree-map-entry {
+    left: -8px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js
new file mode 100644
index 000000000..0333c5887
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeMapEntryTreeElement.js
@@ -0,0 +1,132 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectTreeMapEntryTreeElement = class ObjectTreeMapEntryTreeElement extends WebInspector.ObjectTreeBaseTreeElement
+{
+    constructor(object, propertyPath)
+    {
+        console.assert(object instanceof WebInspector.RemoteObject);
+
+        // Treat the same as an array-index just with different strings and widths.
+        super(object, propertyPath);
+
+        this._object = object;
+
+        this.addClassName("object-tree-array-index");
+        this.addClassName("object-tree-map-entry");
+    }
+
+    // Public
+
+    get object()
+    {
+        return this._object;
+    }
+
+    // Protected
+
+    resolvedValue()
+    {
+        return this._object;
+    }
+
+    propertyPathType()
+    {
+        return WebInspector.PropertyPath.Type.Value;
+    }
+
+    titleFragment()
+    {
+        var container = document.createDocumentFragment();
+
+        var propertyPath = this.resolvedValuePropertyPath();
+
+        // Index name.
+        var nameElement = container.appendChild(document.createElement("span"));
+        nameElement.className = "index-name";
+        nameElement.textContent = this.displayPropertyName();
+        nameElement.title = this.propertyPathString(propertyPath);
+
+        // Space. For copy/paste to have space between the key and value.
+        container.append(" ");
+
+        // Value.
+        var valueElement = container.appendChild(document.createElement("span"));
+        valueElement.className = "index-value";
+        valueElement.appendChild(WebInspector.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject(this._object, propertyPath));
+
+        return container;
+    }
+};
+
+WebInspector.ObjectTreeMapKeyTreeElement = class ObjectTreeMapKeyTreeElement extends WebInspector.ObjectTreeMapEntryTreeElement
+{
+    constructor(object, propertyPath)
+    {
+        super(object, propertyPath);
+
+        this.mainTitle = this.titleFragment();
+
+        this.addClassName("key");
+    }
+
+    // Protected
+
+    displayPropertyName()
+    {
+        return WebInspector.UIString("key");
+    }
+
+    resolvedValuePropertyPath()
+    {
+        return this._propertyPath.appendMapKey(this._object);
+    }
+};
+
+WebInspector.ObjectTreeMapValueTreeElement = class ObjectTreeMapValueTreeElement extends WebInspector.ObjectTreeMapEntryTreeElement
+{
+    constructor(object, propertyPath, key)
+    {
+        super(object, propertyPath);
+
+        this._key = key;
+        
+        this.mainTitle = this.titleFragment();
+
+        this.addClassName("value");
+    }
+
+    // Protected
+
+    displayPropertyName()
+    {
+        return WebInspector.UIString("value");
+    }
+
+    resolvedValuePropertyPath()
+    {
+        return this._propertyPath.appendMapValue(this._object, this._key);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
new file mode 100644
index 000000000..3fd67ec05
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
@@ -0,0 +1,152 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.tree-outline .item.object-tree-property {
+    margin-top: 0;
+    border-top: 0;
+}
+
+.object-tree-property.boolean > .icon {
+    content: url(../Images/TypeBoolean.svg);
+}
+
+.object-tree-property.function > .icon {
+    content: url(../Images/Function.svg);
+}
+
+.object-tree-property.number > .icon {
+    content: url(../Images/TypeNumber.svg);
+}
+
+.object-tree-property.object > .icon {
+    content: url(../Images/TypeObject.svg);
+}
+
+.object-tree-property.object.null > .icon {
+    content: url(../Images/TypeNull.svg);
+}
+
+.object-tree-property.object.node > .icon {
+    content: url(../Images/DOMElement.svg);
+}
+
+.object-tree-property.regex > .icon {
+    content: url(../Images/TypeRegex.svg);
+}
+
+.object-tree-property.string > .icon {
+    content: url(../Images/TypeString.svg);
+}
+
+.object-tree-property.symbol > .icon {
+    content: url(../Images/TypeSymbol.svg);
+}
+
+.object-tree-property.accessor > .icon,
+.object-tree-property.undefined > .icon {
+    content: url(../Images/TypeUndefined.svg);
+}
+
+.object-tree-property.had-error > .icon {
+    content: url(../Images/TypeUndefined.svg) !important;
+}
+
+.object-tree-property .property-name,
+.object-tree-property .function-parameters,
+.object-tree-property .prototype-name {
+    font-family: -apple-system, sans-serif;
+    font-size: 12px;
+}
+
+.object-tree-property .property-name.not-enumerable {
+    opacity: 0.6;
+}
+
+.item.object-tree-property.prototype-property {
+    display: inline-block;
+
+    border: 1px solid hsla(0, 0%, 0%, 0.06);
+    background-color: hsla(0, 0%, 0%, 0.03);
+    border-radius: 3px;
+
+    padding: 0 10px 1px 0;
+    margin: 3px 0 2px 0;
+}
+
+.object-tree-property.prototype-property:hover, .object-tree-property.prototype-property:focus {
+    border-color: hsla(0, 0%, 0%, 0.1);
+}
+
+.object-tree-property.prototype-property > .icon {
+    display: none;
+}
+
+.item.object-tree-property.prototype-property + ol {
+    -webkit-padding-start: 0px;
+}
+
+.object-tree-property :matches(.getter, .setter) {
+    position: relative;
+    opacity: 0.6;
+    vertical-align: top;
+}
+
+.object-tree-property .spacer {
+    margin-left: 4px;
+}
+
+.object-tree-property .getter {
+    top: 1px;
+
+    content: url(../Images/Eye.svg);
+
+    width: 16px;
+    height: 11px;
+}
+
+.object-tree-property .setter {
+    top: -1px;
+
+    content: url(../Images/Pencil.svg);
+
+    width: 13px;
+    height: 13px;
+}
+
+.object-tree-property .getter + .setter {
+    margin-left: 1px;
+}
+
+.object-tree-property :matches(.getter, .setter).disabled {
+    opacity: 0.35;
+}
+
+.object-tree-property .getter:not(.disabled):hover {
+    opacity: 1;
+}
+
+.object-tree-property .value.error {
+    color: red;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js
new file mode 100644
index 000000000..fb77f8179
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.js
@@ -0,0 +1,398 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectTreePropertyTreeElement = class ObjectTreePropertyTreeElement extends WebInspector.ObjectTreeBaseTreeElement
+{
+    constructor(property, propertyPath, mode, prototypeName)
+    {
+        super(property, propertyPath, property);
+
+        this._mode = mode || WebInspector.ObjectTreeView.Mode.Properties;
+        this._prototypeName = prototypeName;
+
+        this.mainTitle = this._titleFragment();
+        this.addClassName("object-tree-property");
+
+        if (this.property.hasValue()) {
+            this.addClassName(this.property.value.type);
+            if (this.property.value.subtype)
+                this.addClassName(this.property.value.subtype);
+        } else
+            this.addClassName("accessor");
+
+        if (this.property.wasThrown)
+            this.addClassName("had-error");
+        if (this.property.name === "__proto__")
+            this.addClassName("prototype-property");
+
+        this._updateTooltips();
+        this._updateHasChildren();
+    }
+
+    // Protected
+
+    onpopulate()
+    {
+        this._updateChildren();
+    }
+
+    onexpand()
+    {
+        if (this._previewView)
+            this._previewView.showTitle();
+    }
+
+    oncollapse()
+    {
+        if (this._previewView)
+            this._previewView.showPreview();
+    }
+
+    invokedGetter()
+    {
+        this.mainTitle = this._titleFragment();
+
+        var resolvedValue = this.resolvedValue();
+        this.addClassName(resolvedValue.type);
+        if (resolvedValue.subtype)
+            this.addClassName(resolvedValue.subtype);
+        if (this.hadError())
+            this.addClassName("had-error");
+        this.removeClassName("accessor");
+
+        this._updateHasChildren();
+    }
+
+    // Private
+
+    _updateHasChildren()
+    {
+        var resolvedValue = this.resolvedValue();
+        var valueHasChildren = (resolvedValue && resolvedValue.hasChildren);
+        var wasThrown = this.hadError();
+
+        if (this._mode === WebInspector.ObjectTreeView.Mode.Properties)
+            this.hasChildren = !wasThrown && valueHasChildren;
+        else
+            this.hasChildren = !wasThrown && valueHasChildren && (this.property.name === "__proto__" || this._alwaysDisplayAsProperty());
+    }
+
+    _updateTooltips()
+    {
+        var attributes = [];
+
+        if (this.property.configurable)
+            attributes.push("configurable");
+        if (this.property.enumerable)
+            attributes.push("enumerable");
+        if (this.property.writable)
+            attributes.push("writable");
+
+        this.iconElement.title = attributes.join(" ");
+    }
+
+    _titleFragment()
+    {
+        if (this.property.name === "__proto__")
+            return this._createTitlePrototype();
+
+        if (this._mode === WebInspector.ObjectTreeView.Mode.Properties)
+            return this._createTitlePropertyStyle();
+        else
+            return this._createTitleAPIStyle();
+    }
+
+    _createTitlePrototype()
+    {
+        console.assert(this.property.hasValue());
+        console.assert(this.property.name === "__proto__");
+
+        var nameElement = document.createElement("span");
+        nameElement.className = "prototype-name";
+        nameElement.textContent = WebInspector.UIString("%s Prototype").format(this._sanitizedPrototypeString(this.property.value));
+        nameElement.title = this.propertyPathString(this.thisPropertyPath());
+        return nameElement;
+    }
+
+    _createTitlePropertyStyle()
+    {
+        var container = document.createDocumentFragment();
+
+        // Property name.
+        var nameElement = document.createElement("span");
+        nameElement.className = "property-name";
+        nameElement.textContent = this.property.name + ": ";
+        nameElement.title = this.propertyPathString(this.thisPropertyPath());
+
+        // Property attributes.
+        if (this._mode === WebInspector.ObjectTreeView.Mode.Properties) {
+            if (!this.property.enumerable)
+                nameElement.classList.add("not-enumerable");
+        }
+
+        // Value / Getter Value / Getter.
+        var valueOrGetterElement;
+        var resolvedValue = this.resolvedValue();
+        if (resolvedValue) {
+            if (resolvedValue.preview) {
+                this._previewView = new WebInspector.ObjectPreviewView(resolvedValue.preview);
+                valueOrGetterElement = this._previewView.element;
+            } else {
+                valueOrGetterElement = WebInspector.FormattedValue.createElementForRemoteObject(resolvedValue, this.hadError());
+
+                // Special case a function property string.
+                if (resolvedValue.type === "function")
+                    valueOrGetterElement.textContent = this._functionPropertyString();
+            }
+        } else {
+            valueOrGetterElement = document.createElement("span");
+            if (this.property.hasGetter())
+                valueOrGetterElement.appendChild(this.createGetterElement(this._mode !== WebInspector.ObjectTreeView.Mode.ClassAPI));
+            if (this.property.hasSetter())
+                valueOrGetterElement.appendChild(this.createSetterElement());
+        }
+
+        valueOrGetterElement.classList.add("value");
+        if (this.hadError())
+            valueOrGetterElement.classList.add("error");
+
+        container.appendChild(nameElement);
+        container.appendChild(valueOrGetterElement);
+        return container;
+    }
+
+    _createTitleAPIStyle()
+    {
+        // Fixed values and special properties display like a property.
+        if (this._alwaysDisplayAsProperty())
+            return this._createTitlePropertyStyle();
+
+        // No API to display.
+        var isFunction = this.property.hasValue() && this.property.value.type === "function";
+        if (!isFunction && !this.property.hasGetter() && !this.property.hasSetter())
+            return null;
+
+        var container = document.createDocumentFragment();
+
+        // Function / Getter / Setter.
+        var nameElement = document.createElement("span");
+        nameElement.className = "property-name";
+        nameElement.textContent = this.property.name;
+        nameElement.title = this.propertyPathString(this.thisPropertyPath());
+        container.appendChild(nameElement);
+
+        if (isFunction) {
+            var paramElement = document.createElement("span");
+            paramElement.className = "function-parameters";
+            paramElement.textContent = this._functionParameterString();
+            container.appendChild(paramElement);
+        } else {
+            var spacer = container.appendChild(document.createElement("span"));
+            spacer.className = "spacer";
+            if (this.property.hasGetter())
+                container.appendChild(this.createGetterElement(this._mode !== WebInspector.ObjectTreeView.Mode.ClassAPI));
+            if (this.property.hasSetter())
+                container.appendChild(this.createSetterElement());
+        }
+
+        return container;
+    }
+
+    _alwaysDisplayAsProperty()
+    {
+        // Constructor, though a function, is often better treated as an expandable object.
+        if (this.property.name === "constructor")
+            return true;
+
+        // Non-function objects are often better treated as properties.
+        if (this.property.hasValue() && this.property.value.type !== "function")
+            return true;
+
+        // Fetched getter value.
+        if (this._getterValue)
+            return true;
+
+        return false;
+    }
+
+    _functionPropertyString()
+    {
+        return "function" + this._functionParameterString();
+    }
+
+    _functionParameterString()
+    {
+        var resolvedValue = this.resolvedValue();
+        console.assert(resolvedValue.type === "function");
+
+        // For Native methods, the toString is poor. We try to provide good function parameter strings.
+        if (isFunctionStringNativeCode(resolvedValue.description)) {
+            // Native function on a prototype, likely "Foo.prototype.method".
+            if (this._prototypeName) {
+                if (WebInspector.NativePrototypeFunctionParameters[this._prototypeName]) {
+                    var params = WebInspector.NativePrototypeFunctionParameters[this._prototypeName][this._property.name];
+                    return params ? "(" + params + ")" : "()";
+                }
+            }
+
+            var parentDescription = this._propertyPath.object.description;
+
+            // Native function property on a native function is likely a "Foo.method".
+            if (isFunctionStringNativeCode(parentDescription)) {
+                var match = parentDescription.match(/^function\s+([^)]+?)\(/);
+                if (match) {
+                    var name = match[1];
+                    if (WebInspector.NativeConstructorFunctionParameters[name]) {
+                        var params = WebInspector.NativeConstructorFunctionParameters[name][this._property.name];
+                        return params ? "(" + params + ")" : "()";
+                    }
+                }
+            }
+
+            // Native DOM constructor or on native objects that are not functions.
+            if (parentDescription.endsWith("Constructor") || parentDescription === "Math" || parentDescription === "JSON") {
+                var name = parentDescription;
+                if (WebInspector.NativeConstructorFunctionParameters[name]) {
+                    var params = WebInspector.NativeConstructorFunctionParameters[name][this._property.name];
+                    return params ? "(" + params + ")" : "()";
+                }
+            }
+        }
+
+        var match = resolvedValue.functionDescription.match(/^function.*?(\([^)]*?\))/);
+        return match ? match[1] : "()";
+    }
+
+    _sanitizedPrototypeString(value)
+    {
+        // FIXME: <https://webkit.org/b/141610> For many X, X.prototype is an X when it must be a plain object
+        if (value.type === "function")
+            return "Function";
+        if (value.subtype === "date")
+            return "Date";
+        if (value.subtype === "regexp")
+            return "RegExp";
+
+        return value.description.replace(/Prototype$/, "");
+    }
+
+    _updateChildren()
+    {
+        if (this.children.length && !this.shouldRefreshChildren)
+            return;
+
+        var resolvedValue = this.resolvedValue();
+        if (resolvedValue.isCollectionType() && this._mode === WebInspector.ObjectTreeView.Mode.Properties)
+            resolvedValue.getCollectionEntries(0, 100, this._updateChildrenInternal.bind(this, this._updateEntries, this._mode));
+        else if (this._mode === WebInspector.ObjectTreeView.Mode.ClassAPI)
+            resolvedValue.getOwnPropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, WebInspector.ObjectTreeView.Mode.ClassAPI));
+        else if (this.property.name === "__proto__")
+            resolvedValue.getOwnPropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, WebInspector.ObjectTreeView.Mode.PrototypeAPI));
+        else
+            resolvedValue.getDisplayablePropertyDescriptors(this._updateChildrenInternal.bind(this, this._updateProperties, this._mode));
+    }
+
+    _updateChildrenInternal(handler, mode, list)
+    {
+        this.removeChildren();
+
+        if (!list) {
+            var errorMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
+            this.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
+            return;
+        }
+
+        handler.call(this, list, this.resolvedValuePropertyPath(), mode);
+    }
+
+    _updateEntries(entries, propertyPath, mode)
+    {
+        for (var entry of entries) {
+            if (entry.key) {
+                this.appendChild(new WebInspector.ObjectTreeMapKeyTreeElement(entry.key, propertyPath));
+                this.appendChild(new WebInspector.ObjectTreeMapValueTreeElement(entry.value, propertyPath, entry.key));
+            } else
+                this.appendChild(new WebInspector.ObjectTreeSetIndexTreeElement(entry.value, propertyPath));
+        }
+
+        if (!this.children.length) {
+            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Entries."));
+            this.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
+        }
+
+        // Show the prototype so users can see the API.
+        var resolvedValue = this.resolvedValue();
+        resolvedValue.getOwnPropertyDescriptor("__proto__", function(propertyDescriptor) {
+            if (propertyDescriptor)
+                this.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, mode));
+        }.bind(this));
+    }
+
+    _updateProperties(properties, propertyPath, mode)
+    {
+        properties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
+
+        var resolvedValue = this.resolvedValue();
+        var isArray = resolvedValue.isArray();
+        var isPropertyMode = mode === WebInspector.ObjectTreeView.Mode.Properties || this._getterValue;
+        var isAPI = mode !== WebInspector.ObjectTreeView.Mode.Properties;
+
+        var prototypeName;
+        if (this.property.name === "__proto__") {
+            if (resolvedValue.description)
+                prototypeName = this._sanitizedPrototypeString(resolvedValue);
+        }
+
+        var hadProto = false;
+        for (var propertyDescriptor of properties) {
+            // FIXME: If this is a pure API ObjectTree, we should show the native getters.
+            // For now, just skip native binding getters in API mode, since we likely
+            // already showed them in the Properties section.
+            if (isAPI && propertyDescriptor.nativeGetter)
+                continue;
+
+            // COMPATIBILITY (iOS 8): Sometimes __proto__ is not a value, but a get/set property.
+            // In those cases it is actually not useful to show.
+            if (propertyDescriptor.name === "__proto__" && !propertyDescriptor.hasValue())
+                continue;
+
+            if (isArray && isPropertyMode) {
+                if (propertyDescriptor.isIndexProperty())
+                    this.appendChild(new WebInspector.ObjectTreeArrayIndexTreeElement(propertyDescriptor, propertyPath));
+                else if (propertyDescriptor.name === "__proto__")
+                    this.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, mode, prototypeName));
+            } else
+                this.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, mode, prototypeName));
+
+            if (propertyDescriptor.name === "__proto__")
+                hadProto = true;
+        }
+
+        if (!this.children.length || (hadProto && this.children.length === 1)) {
+            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Properties."));
+            this.insertChild(new WebInspector.TreeElement(emptyMessageElement, null, false), 0);
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js
new file mode 100644
index 000000000..7a5c8c77f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeSetIndexTreeElement.js
@@ -0,0 +1,84 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectTreeSetIndexTreeElement = class ObjectTreeSetIndexTreeElement extends WebInspector.ObjectTreeBaseTreeElement
+{
+    constructor(object, propertyPath)
+    {
+        console.assert(object instanceof WebInspector.RemoteObject);
+
+        // Treat the same as an array-index just with different strings and widths.
+        super(object, propertyPath);
+
+        this._object = object;
+
+        this.mainTitle = this._titleFragment();
+        this.addClassName("object-tree-array-index");
+    }
+
+    // Public
+
+    get object()
+    {
+        return this._object;
+    }
+
+    // Protected
+
+    resolvedValue()
+    {
+        return this._object;
+    }
+
+    resolvedValuePropertyPath()
+    {
+        return this.propertyPath.appendSetIndex(this._object);
+    }
+
+    // Private
+
+    _titleFragment()
+    {
+        var container = document.createDocumentFragment();
+
+        var propertyPath = this.resolvedValuePropertyPath();
+
+        // Set bullet.
+        var nameElement = container.appendChild(document.createElement("span"));
+        nameElement.className = "index-name";
+        nameElement.textContent = "\u2022";
+        nameElement.title = WebInspector.UIString("Unable to determine path to property from root");
+
+        // Space. For copy/paste to have space between the bullet and value.
+        container.append(" ");
+
+        // Value.
+        var valueElement = container.appendChild(document.createElement("span"));
+        valueElement.className = "index-value";
+        valueElement.appendChild(WebInspector.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject(this._object, propertyPath));
+
+        return container;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
new file mode 100644
index 000000000..5e8c71ef5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.css
@@ -0,0 +1,133 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.object-tree {
+    position: relative;
+    color: black;
+    font-family: Menlo, monospace;
+    font-size: 11px;
+}
+
+.object-tree > :matches(.title, .object-preview)::before {
+    display: inline-block;
+
+    vertical-align: baseline;
+    margin-bottom: -2px;
+    margin-right: 2px;
+
+    width: 13px;
+    height: 13px;
+
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-size: 13px 13px;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    content: "";
+}
+
+.object-tree:not(.lossless-preview) > :matches(.title, .object-preview) {
+    margin-left: 0;
+}
+
+.object-tree.expanded > :matches(.title, .object-preview)::before {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.object-tree.properties-only > :matches(.title, .object-preview) {
+    display: none;
+}
+
+.object-tree.expanded .object-preview {
+    font-style: normal;
+}
+
+.object-tree.lossless-preview > :matches(.title, .object-preview)::before {
+    background: none;
+    width: 0px;
+}
+
+.object-tree .object-tree {
+    display: inline-block;
+}
+
+.object-tree .tree-outline.object {
+    display: none;
+}
+
+.object-tree.expanded > .tree-outline.object {
+    display: block;
+}
+
+.tree-outline.object {
+    margin: 0;
+    padding: 0 6px 2px;
+    list-style: none;
+    min-height: 18px;
+    outline: none;
+}
+
+.object-tree .tree-outline.object.compact {
+    margin-top: 1px;
+}
+
+.tree-outline.object .item,
+.object-tree.properties-only .tree-outline.object {
+    padding-left: 0;
+}
+
+.object-tree.properties-only .object-tree-property .property-name {
+    opacity: 1;
+}
+
+.tree-outline.object li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-user-select: text;
+    cursor: default;
+}
+
+.tree-outline.object ol {
+    display: none;
+    margin: 0;
+    -webkit-padding-start: 16px;
+    list-style: none;
+}
+
+.tree-outline.object ol.expanded {
+    display: block;
+}
+
+.tree-outline.object li .empty-message {
+    color: hsl(0, 0%, 60%);
+    margin-left: 15px;
+    font-family: -apple-system, sans-serif;
+    font-size: 12px;
+}
+
+.object-tree-property :matches(.formatted-string, .formatted-regexp) {
+    white-space: nowrap;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
new file mode 100644
index 000000000..b16bbb861
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ObjectTreeView.js
@@ -0,0 +1,383 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ObjectTreeView = class ObjectTreeView extends WebInspector.Object
+{
+    constructor(object, mode, propertyPath, forceExpanding)
+    {
+        super();
+
+        console.assert(object instanceof WebInspector.RemoteObject);
+        console.assert(!propertyPath || propertyPath instanceof WebInspector.PropertyPath);
+
+        var providedPropertyPath = propertyPath instanceof WebInspector.PropertyPath;
+
+        this._object = object;
+        this._mode = mode || WebInspector.ObjectTreeView.defaultModeForObject(object);
+        this._propertyPath = propertyPath || new WebInspector.PropertyPath(this._object, "this");
+        this._expanded = false;
+        this._hasLosslessPreview = false;
+
+        // If ObjectTree is used outside of the console, we do not know when to release
+        // WeakMap entries. Currently collapse would work. For the console, we can just
+        // listen for console clear events. Currently all ObjectTrees are in the console.
+        this._inConsole = true;
+
+        // Always force expanding for classes.
+        if (this._object.isClass())
+            forceExpanding = true;
+
+        this._element = document.createElement("div");
+        this._element.className = "object-tree";
+
+        if (this._object.preview) {
+            this._previewView = new WebInspector.ObjectPreviewView(this._object.preview);
+            this._previewView.setOriginatingObjectInfo(this._object, providedPropertyPath ? propertyPath : null);
+            this._previewView.element.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
+            this._element.appendChild(this._previewView.element);
+
+            if (this._previewView.lossless && !this._propertyPath.parent && !forceExpanding) {
+                this._hasLosslessPreview = true;
+                this.element.classList.add("lossless-preview");
+            }
+        } else {
+            this._titleElement = document.createElement("span");
+            this._titleElement.className = "title";
+            this._titleElement.appendChild(WebInspector.FormattedValue.createElementForRemoteObject(this._object));
+            this._titleElement.addEventListener("click", this._handlePreviewOrTitleElementClick.bind(this));
+            this._element.appendChild(this._titleElement);
+        }
+
+        this._outline = new WebInspector.TreeOutline;
+        this._outline.compact = true;
+        this._outline.customIndent = true;
+        this._outline.element.classList.add("object");
+        this._element.appendChild(this._outline.element);
+
+        // FIXME: Support editable ObjectTrees.
+    }
+
+    // Static
+
+    static defaultModeForObject(object)
+    {
+        if (object.subtype === "class")
+            return WebInspector.ObjectTreeView.Mode.ClassAPI;
+
+        return WebInspector.ObjectTreeView.Mode.Properties;
+    }
+
+    static createEmptyMessageElement(message)
+    {
+        var emptyMessageElement = document.createElement("div");
+        emptyMessageElement.className = "empty-message";
+        emptyMessageElement.textContent = message;
+        return emptyMessageElement;
+    }
+
+    static comparePropertyDescriptors(propertyA, propertyB)
+    {
+        var a = propertyA.name;
+        var b = propertyB.name;
+
+        // Put __proto__ at the bottom.
+        if (a === "__proto__")
+            return 1;
+        if (b === "__proto__")
+            return -1;
+
+        // Put Internal properties at the top.
+        if (propertyA.isInternalProperty && !propertyB.isInternalProperty)
+            return -1;
+        if (propertyB.isInternalProperty && !propertyA.isInternalProperty)
+            return 1;
+
+        // Put Symbol properties at the bottom.
+        if (propertyA.symbol && !propertyB.symbol)
+            return 1;
+        if (propertyB.symbol && !propertyA.symbol)
+            return -1;
+
+        // Symbol properties may have the same description string but be different objects.
+        if (a === b)
+            return 0;
+
+        var diff = 0;
+        var chunk = /^\d+|^\D+/;
+        var chunka, chunkb, anum, bnum;
+        while (diff === 0) {
+            if (!a && b)
+                return -1;
+            if (!b && a)
+                return 1;
+            chunka = a.match(chunk)[0];
+            chunkb = b.match(chunk)[0];
+            anum = !isNaN(chunka);
+            bnum = !isNaN(chunkb);
+            if (anum && !bnum)
+                return -1;
+            if (bnum && !anum)
+                return 1;
+            if (anum && bnum) {
+                diff = chunka - chunkb;
+                if (diff === 0 && chunka.length !== chunkb.length) {
+                    if (!+chunka && !+chunkb) // chunks are strings of all 0s (special case)
+                        return chunka.length - chunkb.length;
+                    else
+                        return chunkb.length - chunka.length;
+                }
+            } else if (chunka !== chunkb)
+                return (chunka < chunkb) ? -1 : 1;
+            a = a.substring(chunka.length);
+            b = b.substring(chunkb.length);
+        }
+        return diff;
+    }
+
+    // Public
+
+    get object()
+    {
+        return this._object;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get treeOutline()
+    {
+        return this._outline;
+    }
+
+    get expanded()
+    {
+        return this._expanded;
+    }
+
+    expand()
+    {
+        if (this._expanded)
+            return;
+
+        if (this._hasLosslessPreview)
+            return;
+
+        this._expanded = true;
+        this._element.classList.add("expanded");
+
+        if (this._previewView)
+            this._previewView.showTitle();
+
+        this._trackWeakEntries();
+
+        this.update();
+    }
+
+    collapse()
+    {
+        if (!this._expanded)
+            return;
+
+        this._expanded = false;
+        this._element.classList.remove("expanded");
+
+        if (this._previewView)
+            this._previewView.showPreview();
+
+        this._untrackWeakEntries();
+    }
+
+    showOnlyProperties()
+    {
+        this._inConsole = false;
+
+        this._element.classList.add("properties-only");
+    }
+
+    appendTitleSuffix(suffixElement)
+    {
+        if (this._previewView)
+            this._previewView.element.appendChild(suffixElement);
+        else
+            this._titleElement.appendChild(suffixElement);
+    }
+
+    appendExtraPropertyDescriptor(propertyDescriptor)
+    {
+        if (!this._extraProperties)
+            this._extraProperties = [];
+
+        this._extraProperties.push(propertyDescriptor);
+    }
+
+    // Protected
+
+    update()
+    {
+        if (this._object.isCollectionType() && this._mode === WebInspector.ObjectTreeView.Mode.Properties)
+            this._object.getCollectionEntries(0, 100, this._updateChildren.bind(this, this._updateEntries));
+        else if (this._object.isClass())
+            this._object.classPrototype.getDisplayablePropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
+        else
+            this._object.getDisplayablePropertyDescriptors(this._updateChildren.bind(this, this._updateProperties));
+    }
+
+    // Private
+
+    _updateChildren(handler, list)
+    {
+        this._outline.removeChildren();
+
+        if (!list) {
+            var errorMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("Could not fetch properties. Object may no longer exist."));
+            this._outline.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
+            return;
+        }
+
+        handler.call(this, list, this._propertyPath);
+
+        this.dispatchEventToListeners(WebInspector.ObjectTreeView.Event.Updated);
+    }
+
+    _updateEntries(entries, propertyPath)
+    {
+        for (var entry of entries) {
+            if (entry.key) {
+                this._outline.appendChild(new WebInspector.ObjectTreeMapKeyTreeElement(entry.key, propertyPath));
+                this._outline.appendChild(new WebInspector.ObjectTreeMapValueTreeElement(entry.value, propertyPath, entry.key));
+            } else
+                this._outline.appendChild(new WebInspector.ObjectTreeSetIndexTreeElement(entry.value, propertyPath));
+        }
+
+        if (!this._outline.children.length) {
+            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Entries."));
+            this._outline.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
+        }
+
+        // Show the prototype so users can see the API.
+        this._object.getOwnPropertyDescriptor("__proto__", function(propertyDescriptor) {
+            if (propertyDescriptor)
+                this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
+        }.bind(this));
+    }
+
+    _updateProperties(properties, propertyPath)
+    {
+        if (this._extraProperties)
+            properties = properties.concat(this._extraProperties);
+
+        properties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
+
+        var isArray = this._object.isArray();
+        var isPropertyMode = this._mode === WebInspector.ObjectTreeView.Mode.Properties;
+
+        var hadProto = false;
+        for (var propertyDescriptor of properties) {
+            // COMPATIBILITY (iOS 8): Sometimes __proto__ is not a value, but a get/set property.
+            // In those cases it is actually not useful to show.
+            if (propertyDescriptor.name === "__proto__" && !propertyDescriptor.hasValue())
+                continue;
+
+            if (isArray && isPropertyMode) {
+                if (propertyDescriptor.isIndexProperty())
+                    this._outline.appendChild(new WebInspector.ObjectTreeArrayIndexTreeElement(propertyDescriptor, propertyPath));
+                else if (propertyDescriptor.name === "__proto__")
+                    this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
+            } else
+                this._outline.appendChild(new WebInspector.ObjectTreePropertyTreeElement(propertyDescriptor, propertyPath, this._mode));
+
+            if (propertyDescriptor.name === "__proto__")
+                hadProto = true;
+        }
+
+        if (!this._outline.children.length || (hadProto && this._outline.children.length === 1)) {
+            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No Properties."));
+            this._outline.insertChild(new WebInspector.TreeElement(emptyMessageElement, null, false), 0);
+        }
+    }
+
+    _handlePreviewOrTitleElementClick(event)
+    {
+        if (this._hasLosslessPreview)
+            return;
+
+        if (!this._expanded)
+            this.expand();
+        else
+            this.collapse();
+
+        event.stopPropagation();
+    }
+
+    _trackWeakEntries()
+    {
+        if (this._trackingEntries)
+            return;
+
+        if (!this._object.isWeakCollection())
+            return;
+
+        this._trackingEntries = true;
+
+        if (this._inConsole) {
+            WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.Cleared, this._untrackWeakEntries, this);
+            WebInspector.logManager.addEventListener(WebInspector.LogManager.Event.SessionStarted, this._untrackWeakEntries, this);
+        }
+    }
+
+    _untrackWeakEntries()
+    {
+        if (!this._trackingEntries)
+            return;
+
+        if (!this._object.isWeakCollection())
+            return;
+
+        this._trackingEntries = false;
+
+        this._object.releaseWeakCollectionEntries();
+
+        if (this._inConsole) {
+            WebInspector.logManager.removeEventListener(WebInspector.LogManager.Event.Cleared, this._untrackWeakEntries, this);
+            WebInspector.logManager.removeEventListener(WebInspector.LogManager.Event.SessionStarted, this._untrackWeakEntries, this);
+        }
+
+        // FIXME: This only tries to release weak entries if this object was a WeakMap.
+        // If there was a WeakMap expanded in a sub-object, we will never release those values.
+        // Should we attempt walking the entire tree and release weak collections?
+    }
+};
+
+WebInspector.ObjectTreeView.Mode = {
+    Properties: Symbol("object-tree-properties"),      // Properties
+    PrototypeAPI: Symbol("object-tree-prototype-api"), // API view on a live object instance, so getters can be invoked.
+    ClassAPI: Symbol("object-tree-class-api"),         // API view without an object instance, can not invoke getters.
+};
+
+WebInspector.ObjectTreeView.Event = {
+    Updated: "object-tree-updated",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css
new file mode 100644
index 000000000..6ad403a24
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.css
@@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.overview > .timeline-ruler {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view.overview > .timeline-ruler > .header {
+    border-top: 1px solid var(--border-color);
+    height: 23px;
+}
+
+.timeline-view.overview > .timeline-ruler > .event-markers {
+    top: 23px;
+}
+
+.timeline-view.overview > .data-grid {
+    position: absolute;
+    top: 23px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.timeline-view.overview > .data-grid td.graph-column {
+    padding: 2px 0;
+}
+
+.timeline-view.overview > .data-grid td.graph-column > div {
+    position: relative;
+    height: 16px;
+}
+
+.timeline-view.overview > .data-grid td.graph-column .timeline-record-bar {
+    top: 2px;
+}
+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
+    box-shadow: white 0 0 0 1px;
+}
+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
+    box-shadow: hsl(0, 0%, 83%) 0 0 0 1px;
+}
+
+.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar:not(.has-inactive-segment) > .segment {
+    box-shadow: hsl(215, 67%, 53%) 0 0 0 1px;
+}
+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded) td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+    box-shadow: white 1px 0 0;
+}
+
+.timeline-view.overview > .data-grid tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+    box-shadow: hsl(0, 0%, 83%) 1px 0 0;
+}
+
+.timeline-view.overview > .data-grid:focus tr.parent:not(.expanded).selected td.graph-column .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+    box-shadow: hsl(215, 67%, 53%) 1px 0 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js
new file mode 100644
index 000000000..1e2333878
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/OverviewTimelineView.js
@@ -0,0 +1,370 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.OverviewTimelineView = class OverviewTimelineView extends WebInspector.TimelineView
+{
+    constructor(recording, extraArguments)
+    {
+        super(recording, extraArguments);
+
+        this._recording = recording;
+
+        var columns = {"graph": {width: "100%"}};
+
+        this._dataGrid = new WebInspector.DataGrid(columns);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+        this._dataGrid.element.classList.add("no-header");
+
+        this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this.navigationSidebarTreeOutline, this._dataGrid);
+
+        this._timelineRuler = new WebInspector.TimelineRuler;
+        this._timelineRuler.allowsClippedLabels = true;
+        this.addSubview(this._timelineRuler);
+
+        this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
+        this._timelineRuler.addMarker(this._currentTimeMarker);
+
+        this.element.classList.add("overview");
+        this.addSubview(this._dataGrid);
+
+        this._networkTimeline = recording.timelines.get(WebInspector.TimelineRecord.Type.Network);
+        this._networkTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._networkTimelineRecordAdded, this);
+
+        recording.addEventListener(WebInspector.TimelineRecording.Event.SourceCodeTimelineAdded, this._sourceCodeTimelineAdded, this);
+        recording.addEventListener(WebInspector.TimelineRecording.Event.MarkerAdded, this._markerAdded, this);
+        recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
+
+        this._pendingRepresentedObjects = [];
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString("Timeline Events");
+    }
+
+    get secondsPerPixel()
+    {
+        return this._timelineRuler.secondsPerPixel;
+    }
+
+    set secondsPerPixel(x)
+    {
+        this._timelineRuler.secondsPerPixel = x;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._treeOutlineDataGridSynchronizer.synchronize();
+        this._timelineRuler.updateLayout(WebInspector.View.LayoutReason.Resize);
+    }
+
+    closed()
+    {
+        this._networkTimeline.removeEventListener(null, null, this);
+        this._recording.removeEventListener(null, null, this);
+    }
+
+    get selectionPathComponents()
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return null;
+
+        var pathComponents = [];
+
+        while (dataGridNode && !dataGridNode.root) {
+            var treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+            console.assert(treeElement);
+            if (!treeElement)
+                break;
+
+            if (treeElement.hidden)
+                return null;
+
+            var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.treeElementPathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            dataGridNode = dataGridNode.parent;
+        }
+
+        return pathComponents;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._pendingRepresentedObjects = [];
+    }
+
+    // Protected
+
+    treeElementPathComponentSelected(event)
+    {
+        var dataGridNode = this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
+        if (!dataGridNode)
+            return;
+        dataGridNode.revealAndSelect();
+    }
+
+    canShowContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement)
+            return true;
+        return super.canShowContentViewForTreeElement(treeElement);
+    }
+
+    showContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
+            WebInspector.showSourceCode(treeElement.representedObject);
+            return;
+        }
+
+        if (!(treeElement instanceof WebInspector.SourceCodeTimelineTreeElement)) {
+            console.error("Unknown tree element selected.");
+            return;
+        }
+
+        if (!treeElement.sourceCodeTimeline.sourceCodeLocation) {
+            this.timelineSidebarPanel.showTimelineOverview();
+            return;
+        }
+
+        WebInspector.showOriginalOrFormattedSourceCodeLocation(treeElement.sourceCodeTimeline.sourceCodeLocation);
+    }
+
+    layout()
+    {
+        let oldZeroTime = this._timelineRuler.zeroTime;
+        let oldStartTime = this._timelineRuler.startTime;
+        let oldEndTime = this._timelineRuler.endTime;
+        let oldCurrentTime = this._currentTimeMarker.time;
+
+        this._timelineRuler.zeroTime = this.zeroTime;
+        this._timelineRuler.startTime = this.startTime;
+        this._timelineRuler.endTime = this.endTime;
+        this._currentTimeMarker.time = this.currentTime;
+
+        // The TimelineDataGridNode graphs are positioned with percentages, so they auto resize with the view.
+        // We only need to refresh the graphs when the any of the times change.
+        if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime || this.currentTime !== oldCurrentTime) {
+            let dataGridNode = this._dataGrid.children[0];
+            while (dataGridNode) {
+                dataGridNode.refreshGraph();
+                dataGridNode = dataGridNode.traverseNextNode(true, null, true);
+            }
+        }
+
+        this._processPendingRepresentedObjects();
+    }
+
+    // Private
+
+    _compareTreeElementsByDetails(a, b)
+    {
+        if (a instanceof WebInspector.SourceCodeTimelineTreeElement && b instanceof WebInspector.ResourceTreeElement)
+            return -1;
+
+        if (a instanceof WebInspector.ResourceTreeElement && b instanceof WebInspector.SourceCodeTimelineTreeElement)
+            return 1;
+
+        if (a instanceof WebInspector.SourceCodeTimelineTreeElement && b instanceof WebInspector.SourceCodeTimelineTreeElement) {
+            var aTimeline = a.sourceCodeTimeline;
+            var bTimeline = b.sourceCodeTimeline;
+
+            if (!aTimeline.sourceCodeLocation && !bTimeline.sourceCodeLocation) {
+                if (aTimeline.recordType !== bTimeline.recordType)
+                    return aTimeline.recordType.localeCompare(bTimeline.recordType);
+
+                return a.mainTitle.localeCompare(b.mainTitle);
+            }
+
+            if (!aTimeline.sourceCodeLocation || !bTimeline.sourceCodeLocation)
+                return !!aTimeline.sourceCodeLocation - !!bTimeline.sourceCodeLocation;
+
+            if (aTimeline.sourceCodeLocation.lineNumber !== bTimeline.sourceCodeLocation.lineNumber)
+                return aTimeline.sourceCodeLocation.lineNumber - bTimeline.sourceCodeLocation.lineNumber;
+
+            return aTimeline.sourceCodeLocation.columnNumber - bTimeline.sourceCodeLocation.columnNumber;
+        }
+
+        // Fallback to comparing by start time for ResourceTreeElement or anything else.
+        return this._compareTreeElementsByStartTime(a, b);
+    }
+
+    _compareTreeElementsByStartTime(a, b)
+    {
+        function getStartTime(treeElement)
+        {
+            if (treeElement instanceof WebInspector.ResourceTreeElement)
+                return treeElement.resource.firstTimestamp;
+            if (treeElement instanceof WebInspector.SourceCodeTimelineTreeElement)
+                return treeElement.sourceCodeTimeline.startTime;
+
+            console.error("Unknown tree element.");
+            return 0;
+        }
+
+        var result = getStartTime(a) - getStartTime(b);
+        if (result)
+            return result;
+
+        // Fallback to comparing titles.
+        return a.mainTitle.localeCompare(b.mainTitle);
+    }
+
+    _insertTreeElement(treeElement, parentTreeElement)
+    {
+        console.assert(treeElement);
+        console.assert(!treeElement.parent);
+        console.assert(parentTreeElement);
+
+        parentTreeElement.insertChild(treeElement, insertionIndexForObjectInListSortedByFunction(treeElement, parentTreeElement.children, this._compareTreeElementsByStartTime.bind(this)));
+    }
+
+    _addResourceToTreeIfNeeded(resource)
+    {
+        console.assert(resource);
+        if (!resource)
+            return null;
+
+        var treeElement = this.navigationSidebarTreeOutline.findTreeElement(resource);
+        if (treeElement)
+            return treeElement;
+
+        var parentFrame = resource.parentFrame;
+        if (!parentFrame)
+            return;
+
+        var expandedByDefault = false;
+        if (parentFrame.mainResource === resource || parentFrame.provisionalMainResource === resource) {
+            parentFrame = parentFrame.parentFrame;
+            expandedByDefault = !parentFrame; // Main frame expands by default.
+        }
+
+        var resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
+        if (expandedByDefault)
+            resourceTreeElement.expand();
+
+        var resourceTimelineRecord = this._networkTimeline ? this._networkTimeline.recordForResource(resource) : null;
+        if (!resourceTimelineRecord)
+            resourceTimelineRecord = new WebInspector.ResourceTimelineRecord(resource);
+
+        var resourceDataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, true, this);
+        this._treeOutlineDataGridSynchronizer.associate(resourceTreeElement, resourceDataGridNode);
+
+        var parentTreeElement = this.navigationSidebarTreeOutline;
+        if (parentFrame) {
+            // Find the parent main resource, adding it if needed, to append this resource as a child.
+            var parentResource = parentFrame.provisionalMainResource || parentFrame.mainResource;
+
+            parentTreeElement = this._addResourceToTreeIfNeeded(parentResource);
+            console.assert(parentTreeElement);
+            if (!parentTreeElement)
+                return;
+        }
+
+        this._insertTreeElement(resourceTreeElement, parentTreeElement);
+
+        return resourceTreeElement;
+    }
+
+    _addSourceCodeTimeline(sourceCodeTimeline)
+    {
+        var parentTreeElement = sourceCodeTimeline.sourceCodeLocation ? this._addResourceToTreeIfNeeded(sourceCodeTimeline.sourceCode) : this.navigationSidebarTreeOutline;
+        console.assert(parentTreeElement);
+        if (!parentTreeElement)
+            return;
+
+        var sourceCodeTimelineTreeElement = new WebInspector.SourceCodeTimelineTreeElement(sourceCodeTimeline);
+        var sourceCodeTimelineDataGridNode = new WebInspector.SourceCodeTimelineTimelineDataGridNode(sourceCodeTimeline, this);
+
+        this._treeOutlineDataGridSynchronizer.associate(sourceCodeTimelineTreeElement, sourceCodeTimelineDataGridNode);
+        this._insertTreeElement(sourceCodeTimelineTreeElement, parentTreeElement);
+    }
+
+    _processPendingRepresentedObjects()
+    {
+        if (!this._pendingRepresentedObjects.length)
+            return;
+
+        for (var representedObject of this._pendingRepresentedObjects) {
+            if (representedObject instanceof WebInspector.Resource)
+                this._addResourceToTreeIfNeeded(representedObject);
+            else if (representedObject instanceof WebInspector.SourceCodeTimeline)
+                this._addSourceCodeTimeline(representedObject);
+            else
+                console.error("Unknown represented object");
+        }
+
+        this._pendingRepresentedObjects = [];
+    }
+
+    _networkTimelineRecordAdded(event)
+    {
+        var resourceTimelineRecord = event.data.record;
+        console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
+
+        this._pendingRepresentedObjects.push(resourceTimelineRecord.resource);
+
+        this.needsLayout();
+
+        // We don't expect to have any source code timelines yet. Those should be added with _sourceCodeTimelineAdded.
+        console.assert(!this._recording.sourceCodeTimelinesForSourceCode(resourceTimelineRecord.resource).length);
+    }
+
+    _sourceCodeTimelineAdded(event)
+    {
+        var sourceCodeTimeline = event.data.sourceCodeTimeline;
+        console.assert(sourceCodeTimeline);
+        if (!sourceCodeTimeline)
+            return;
+
+        this._pendingRepresentedObjects.push(sourceCodeTimeline);
+
+        this.needsLayout();
+    }
+
+    _markerAdded(event)
+    {
+        this._timelineRuler.addMarker(event.data.marker);
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _recordingReset(event)
+    {
+        this._timelineRuler.clearMarkers();
+        this._timelineRuler.addMarker(this._currentTimeMarker);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/PathComponentIcons.css b/Source/WebInspectorUI/UserInterface/Views/PathComponentIcons.css
new file mode 100644
index 000000000..5e6891fc4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/PathComponentIcons.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.request-icon .icon {
+    content: url(../Images/Request.svg);
+}
+
+.response-icon .icon {
+    content: url(../Images/Response.svg);
+}
+
+.dom-element-icon .icon {
+    content: url(../Images/DOMElement.svg);
+}
+
+.dom-pseudo-element-icon .icon {
+    content: url(../Images/PseudoElement.svg);
+}
+
+.dom-text-node-icon .icon {
+    content: url(../Images/DOMTextNode.svg);
+}
+
+.dom-comment-icon .icon {
+    content: url(../Images/DOMComment.svg);
+}
+
+.dom-document-type-icon .icon {
+    content: url(../Images/DOMDocumentType.svg);
+}
+
+.dom-document-icon .icon {
+    content: url(../Images/DOMDocument.svg);
+}
+
+.dom-character-data-icon .icon {
+    content: url(../Images/DOMCharacterData.svg);
+}
+
+.dom-node-icon .icon {
+    content: url(../Images/DOMNode.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/Popover.css b/Source/WebInspectorUI/UserInterface/Views/Popover.css
new file mode 100644
index 000000000..6bd2294f2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Popover.css
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.popover {
+    position: absolute;
+    min-width: 20px;
+    min-height: 20px;
+    box-sizing: border-box;
+    pointer-events: none;
+    z-index: var(--z-index-popover);
+}
+
+.popover.arrow-up {
+    padding: 16px 5px 5px 5px;
+}
+
+.popover.arrow-right {
+    padding: 5px 16px 5px 5px;
+}
+
+.popover.arrow-down {
+    padding: 5px 5px 16px 5px;
+}
+
+.popover.arrow-left {
+    padding: 5px 5px 5px 16px;
+}
+
+.popover.fade-out {
+    transition: opacity 350ms;
+    pointer-events: none;
+    opacity: 0;
+}
+
+.popover > .container {
+    position: absolute;
+    left: 5px;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+
+    padding: 5px;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    pointer-events: auto;
+}
+
+.popover > .container.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.popover.arrow-up > .container {
+    top: 16px;
+}
+
+.popover.arrow-right > .container {
+    right: 16px;
+}
+
+.popover.arrow-down > .container {
+    bottom: 16px;
+}
+
+.popover.arrow-left > .container {
+    left: 16px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/Popover.js b/Source/WebInspectorUI/UserInterface/Views/Popover.js
new file mode 100644
index 000000000..d3a0d22dc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Popover.js
@@ -0,0 +1,558 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Popover = class Popover extends WebInspector.Object
+{
+    constructor(delegate)
+    {
+        super();
+
+        this.delegate = delegate;
+        this._edge = null;
+        this._frame = new WebInspector.Rect;
+        this._content = null;
+        this._targetFrame = new WebInspector.Rect;
+        this._anchorPoint = new WebInspector.Point;
+        this._preferredEdges = null;
+
+        this._contentNeedsUpdate = false;
+
+        this._element = document.createElement("div");
+        this._element.className = "popover";
+        this._canvasId = "popover-" + (WebInspector.Popover.canvasId++);
+        this._element.style.backgroundImage = "-webkit-canvas(" + this._canvasId + ")";
+        this._element.addEventListener("transitionend", this, true);
+
+        this._container = this._element.appendChild(document.createElement("div"));
+        this._container.className = "container";
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get frame()
+    {
+        return this._frame;
+    }
+
+    get visible()
+    {
+        return this._element.parentNode === document.body && !this._element.classList.contains(WebInspector.Popover.FadeOutClassName);
+    }
+
+    set frame(frame)
+    {
+        this._element.style.left = frame.minX() + "px";
+        this._element.style.top = frame.minY() + "px";
+        this._element.style.width = frame.size.width + "px";
+        this._element.style.height = frame.size.height + "px";
+        this._element.style.backgroundSize = frame.size.width + "px " + frame.size.height + "px";
+        this._frame = frame;
+    }
+
+    set content(content)
+    {
+        if (content === this._content)
+            return;
+
+        this._content = content;
+
+        this._contentNeedsUpdate = true;
+
+        if (this.visible)
+            this._update(true);
+    }
+
+    update(shouldAnimate = true)
+    {
+        if (!this.visible)
+            return;
+
+        var previouslyFocusedElement = document.activeElement;
+
+        this._contentNeedsUpdate = true;
+        this._update(shouldAnimate);
+
+        if (previouslyFocusedElement)
+            previouslyFocusedElement.focus();
+    }
+
+    present(targetFrame, preferredEdges)
+    {
+        this._targetFrame = targetFrame;
+        this._preferredEdges = preferredEdges;
+
+        if (!this._content)
+            return;
+
+        this._addListenersIfNeeded();
+
+        this._update();
+    }
+
+    presentNewContentWithFrame(content, targetFrame, preferredEdges)
+    {
+        this._content = content;
+        this._contentNeedsUpdate = true;
+
+        this._targetFrame = targetFrame;
+        this._preferredEdges = preferredEdges;
+
+        this._addListenersIfNeeded();
+
+        var shouldAnimate = this.visible;
+        this._update(shouldAnimate);
+    }
+
+    dismiss()
+    {
+        if (this._element.parentNode !== document.body)
+            return;
+
+        console.assert(this._isListeningForPopoverEvents);
+        this._isListeningForPopoverEvents = false;
+        window.removeEventListener("mousedown", this, true);
+        window.removeEventListener("scroll", this, true);
+
+        this._element.classList.add(WebInspector.Popover.FadeOutClassName);
+
+        if (this.delegate && typeof this.delegate.willDismissPopover === "function")
+            this.delegate.willDismissPopover(this);
+    }
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+        case "scroll":
+            if (!this._element.contains(event.target) && !event.target.enclosingNodeOrSelfWithClass(WebInspector.Popover.IgnoreAutoDismissClassName))
+                this.dismiss();
+            break;
+        case "transitionend":
+            if (event.target === this._element) {
+                document.body.removeChild(this._element);
+                this._element.classList.remove(WebInspector.Popover.FadeOutClassName);
+                this._container.textContent = "";
+                if (this.delegate && typeof this.delegate.didDismissPopover === "function")
+                    this.delegate.didDismissPopover(this);
+                break;
+            }
+        }
+    }
+
+    // Private
+
+    _update(shouldAnimate)
+    {
+        if (shouldAnimate)
+            var previousEdge = this._edge;
+
+        var targetFrame = this._targetFrame;
+        var preferredEdges = this._preferredEdges;
+
+        // Ensure our element is on display so that its metrics can be resolved
+        // or interrupt any pending transition to remove it from display.
+        if (this._element.parentNode !== document.body)
+            document.body.appendChild(this._element);
+        else
+            this._element.classList.remove(WebInspector.Popover.FadeOutClassName);
+
+        if (this._contentNeedsUpdate) {
+            // Reset CSS properties on element so that the element may be sized to fit its content.
+            this._element.style.removeProperty("left");
+            this._element.style.removeProperty("top");
+            this._element.style.removeProperty("width");
+            this._element.style.removeProperty("height");
+            if (this._edge !== null)
+                this._element.classList.remove(this._cssClassNameForEdge());
+
+            // Add the content in place of the wrapper to get the raw metrics.
+            this._container.replaceWith(this._content);
+
+            // Get the ideal size for the popover to fit its content.
+            var popoverBounds = this._element.getBoundingClientRect();
+            this._preferredSize = new WebInspector.Size(Math.ceil(popoverBounds.width), Math.ceil(popoverBounds.height));
+        }
+
+        var titleBarOffset = WebInspector.Platform.name === "mac" && WebInspector.Platform.version.release >= 10 ? 22 : 0;
+        var containerFrame = new WebInspector.Rect(0, titleBarOffset, window.innerWidth, window.innerHeight - titleBarOffset);
+        // The frame of the window with a little inset to make sure we have room for shadows.
+        containerFrame = containerFrame.inset(WebInspector.Popover.ShadowEdgeInsets);
+
+        // Work out the metrics for all edges.
+        var metrics = new Array(preferredEdges.length);
+        for (var edgeName in WebInspector.RectEdge) {
+            var edge = WebInspector.RectEdge[edgeName];
+            var item = {
+                edge,
+                metrics: this._bestMetricsForEdge(this._preferredSize, targetFrame, containerFrame, edge)
+            };
+            var preferredIndex = preferredEdges.indexOf(edge);
+            if (preferredIndex !== -1)
+                metrics[preferredIndex] = item;
+            else
+                metrics.push(item);
+        }
+
+        function area(size)
+        {
+            return size.width * size.height;
+        }
+
+        // Find if any of those fit better than the frame for the preferred edge.
+        var bestEdge = metrics[0].edge;
+        var bestMetrics = metrics[0].metrics;
+        for (var i = 1; i < metrics.length; i++) {
+            var itemMetrics = metrics[i].metrics;
+            if (area(itemMetrics.contentSize) > area(bestMetrics.contentSize)) {
+                bestEdge = metrics[i].edge;
+                bestMetrics = itemMetrics;
+            }
+        }
+
+        var anchorPoint;
+        var bestFrame = bestMetrics.frame.round();
+
+        this._edge = bestEdge;
+
+        if (bestFrame === WebInspector.Rect.ZERO_RECT) {
+            // The target for the popover is offscreen.
+            this.dismiss();
+        } else {
+            switch (bestEdge) {
+            case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+                anchorPoint = new WebInspector.Point(bestFrame.size.width - WebInspector.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
+                break;
+            case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+                anchorPoint = new WebInspector.Point(WebInspector.Popover.ShadowPadding, targetFrame.midY() - bestFrame.minY());
+                break;
+            case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+                anchorPoint = new WebInspector.Point(targetFrame.midX() - bestFrame.minX(), bestFrame.size.height - WebInspector.Popover.ShadowPadding);
+                break;
+            case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+                anchorPoint = new WebInspector.Point(targetFrame.midX() - bestFrame.minX(), WebInspector.Popover.ShadowPadding);
+                break;
+            }
+
+            this._element.classList.add(this._cssClassNameForEdge());
+
+            if (shouldAnimate && this._edge === previousEdge)
+                this._animateFrame(bestFrame, anchorPoint);
+            else {
+                 this.frame = bestFrame;
+                 this._setAnchorPoint(anchorPoint);
+                 this._drawBackground();
+            }
+
+            // Make sure content is centered in case either of the dimension is smaller than the minimal bounds.
+            if (this._preferredSize.width < WebInspector.Popover.MinWidth || this._preferredSize.height < WebInspector.Popover.MinHeight)
+                this._container.classList.add("center");
+            else
+                this._container.classList.remove("center");
+        }
+
+        // Wrap the content in the container so that it's located correctly.
+        if (this._contentNeedsUpdate) {
+            this._container.textContent = "";
+            this._content.replaceWith(this._container);
+            this._container.appendChild(this._content);
+        }
+
+        this._contentNeedsUpdate = false;
+    }
+
+    _cssClassNameForEdge()
+    {
+        switch (this._edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            return "arrow-right";
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            return "arrow-left";
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            return "arrow-down";
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            return "arrow-up";
+        }
+        console.error("Unknown edge.");
+        return "arrow-up";
+    }
+
+    _setAnchorPoint(anchorPoint) {
+        anchorPoint.x = Math.floor(anchorPoint.x);
+        anchorPoint.y = Math.floor(anchorPoint.y);
+        this._anchorPoint = anchorPoint;
+    }
+
+    _animateFrame(toFrame, toAnchor)
+    {
+        var startTime = Date.now();
+        var duration = 350;
+        var epsilon = 1 / (200 * duration);
+        var spline = new WebInspector.CubicBezier(0.25, 0.1, 0.25, 1);
+
+        var fromFrame = this._frame.copy();
+        var fromAnchor = this._anchorPoint.copy();
+
+        function animatedValue(from, to, progress)
+        {
+            return from + (to - from) * progress;
+        }
+
+        function drawBackground()
+        {
+            var progress = spline.solve(Math.min((Date.now() - startTime) / duration, 1), epsilon);
+
+            this.frame = new WebInspector.Rect(
+                animatedValue(fromFrame.minX(), toFrame.minX(), progress),
+                animatedValue(fromFrame.minY(), toFrame.minY(), progress),
+                animatedValue(fromFrame.size.width, toFrame.size.width, progress),
+                animatedValue(fromFrame.size.height, toFrame.size.height, progress)
+            ).round();
+
+            this._setAnchorPoint(new WebInspector.Point(
+                animatedValue(fromAnchor.x, toAnchor.x, progress),
+                animatedValue(fromAnchor.y, toAnchor.y, progress)
+            ));
+
+            this._drawBackground();
+
+            if (progress < 1)
+                requestAnimationFrame(drawBackground.bind(this));
+        }
+
+        drawBackground.call(this);
+    }
+
+    _drawBackground()
+    {
+        var scaleFactor = window.devicePixelRatio;
+
+        var width = this._frame.size.width;
+        var height = this._frame.size.height;
+        var scaledWidth = width * scaleFactor;
+        var scaledHeight = height * scaleFactor;
+
+        // Create a scratch canvas so we can draw the popover that will later be drawn into
+        // the final context with a shadow.
+        var scratchCanvas = document.createElement("canvas");
+        scratchCanvas.width = scaledWidth;
+        scratchCanvas.height = scaledHeight;
+
+        var ctx = scratchCanvas.getContext("2d");
+        ctx.scale(scaleFactor, scaleFactor);
+
+        // Bounds of the path don't take into account the arrow, but really only the tight bounding box
+        // of the content contained within the frame.
+        var bounds;
+        var arrowHeight = WebInspector.Popover.AnchorSize.height;
+        switch (this._edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            bounds = new WebInspector.Rect(0, 0, width - arrowHeight, height);
+            break;
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            bounds = new WebInspector.Rect(arrowHeight, 0, width - arrowHeight, height);
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            bounds = new WebInspector.Rect(0, 0, width, height - arrowHeight);
+            break;
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            bounds = new WebInspector.Rect(0, arrowHeight, width, height - arrowHeight);
+            break;
+        }
+
+        bounds = bounds.inset(WebInspector.Popover.ShadowEdgeInsets);
+
+        // Clip the frame.
+        ctx.fillStyle = "black";
+        this._drawFrame(ctx, bounds, this._edge, this._anchorPoint);
+        ctx.clip();
+
+        // Gradient fill, top-to-bottom.
+        var fillGradient = ctx.createLinearGradient(0, 0, 0, height);
+        fillGradient.addColorStop(0, "rgba(255, 255, 255, 0.95)");
+        fillGradient.addColorStop(1, "rgba(235, 235, 235, 0.95)");
+        ctx.fillStyle = fillGradient;
+        ctx.fillRect(0, 0, width, height);
+
+        // Stroke.
+        ctx.strokeStyle = "rgba(0, 0, 0, 0.25)";
+        ctx.lineWidth = 2;
+        this._drawFrame(ctx, bounds, this._edge, this._anchorPoint);
+        ctx.stroke();
+
+        // Draw the popover into the final context with a drop shadow.
+        var finalContext = document.getCSSCanvasContext("2d", this._canvasId, scaledWidth, scaledHeight);
+
+        finalContext.clearRect(0, 0, scaledWidth, scaledHeight);
+
+        finalContext.shadowOffsetX = 1;
+        finalContext.shadowOffsetY = 1;
+        finalContext.shadowBlur = 5;
+        finalContext.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+        finalContext.drawImage(scratchCanvas, 0, 0, scaledWidth, scaledHeight);
+    }
+
+    _bestMetricsForEdge(preferredSize, targetFrame, containerFrame, edge)
+    {
+        var x, y;
+        var width = preferredSize.width + (WebInspector.Popover.ShadowPadding * 2) + (WebInspector.Popover.ContentPadding * 2);
+        var height = preferredSize.height + (WebInspector.Popover.ShadowPadding * 2) + (WebInspector.Popover.ContentPadding * 2);
+        var arrowLength = WebInspector.Popover.AnchorSize.height;
+
+        switch (edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            width += arrowLength;
+            x = targetFrame.origin.x - width + WebInspector.Popover.ShadowPadding;
+            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
+            break;
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            width += arrowLength;
+            x = targetFrame.origin.x + targetFrame.size.width - WebInspector.Popover.ShadowPadding;
+            y = targetFrame.origin.y - (height - targetFrame.size.height) / 2;
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            height += arrowLength;
+            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
+            y = targetFrame.origin.y - height + WebInspector.Popover.ShadowPadding;
+            break;
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            height += arrowLength;
+            x = targetFrame.origin.x - (width - targetFrame.size.width) / 2;
+            y = targetFrame.origin.y + targetFrame.size.height - WebInspector.Popover.ShadowPadding;
+            break;
+        }
+
+        if (edge === WebInspector.RectEdge.MIN_X || edge === WebInspector.RectEdge.MAX_X) {
+            if (y < containerFrame.minY())
+                y = containerFrame.minY();
+            if (y + height > containerFrame.maxY())
+                y = containerFrame.maxY() - height;
+        } else {
+            if (x < containerFrame.minX())
+                x = containerFrame.minX();
+            if (x + width > containerFrame.maxX())
+                x = containerFrame.maxX() - width;
+        }
+
+        var preferredFrame = new WebInspector.Rect(x, y, width, height);
+        var bestFrame = preferredFrame.intersectionWithRect(containerFrame);
+
+        width = bestFrame.size.width - (WebInspector.Popover.ShadowPadding * 2);
+        height = bestFrame.size.height - (WebInspector.Popover.ShadowPadding * 2);
+
+        switch (edge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            width -= arrowLength;
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            height -= arrowLength;
+            break;
+        }
+
+        return {
+            frame: bestFrame,
+            contentSize: new WebInspector.Size(width, height)
+        };
+    }
+
+    _drawFrame(ctx, bounds, anchorEdge)
+    {
+        var r = WebInspector.Popover.CornerRadius;
+        var arrowHalfLength = WebInspector.Popover.AnchorSize.width / 2;
+        var anchorPoint = this._anchorPoint;
+
+        ctx.beginPath();
+        switch (anchorEdge) {
+        case WebInspector.RectEdge.MIN_X: // Displayed on the left of the target, arrow points right.
+            ctx.moveTo(bounds.maxX(), bounds.minY() + r);
+            ctx.lineTo(bounds.maxX(), anchorPoint.y - arrowHalfLength);
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(bounds.maxX(), anchorPoint.y + arrowHalfLength);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            break;
+        case WebInspector.RectEdge.MAX_X: // Displayed on the right of the target, arrow points left.
+            ctx.moveTo(bounds.minX(), bounds.maxY() - r);
+            ctx.lineTo(bounds.minX(), anchorPoint.y + arrowHalfLength);
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(bounds.minX(), anchorPoint.y - arrowHalfLength);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            break;
+        case WebInspector.RectEdge.MIN_Y: // Displayed above the target, arrow points down.
+            ctx.moveTo(bounds.maxX() - r, bounds.maxY());
+            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.maxY());
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.maxY());
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            break;
+        case WebInspector.RectEdge.MAX_Y: // Displayed below the target, arrow points up.
+            ctx.moveTo(bounds.minX() + r, bounds.minY());
+            ctx.lineTo(anchorPoint.x - arrowHalfLength, bounds.minY());
+            ctx.lineTo(anchorPoint.x, anchorPoint.y);
+            ctx.lineTo(anchorPoint.x + arrowHalfLength, bounds.minY());
+            ctx.arcTo(bounds.maxX(), bounds.minY(), bounds.maxX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.maxX(), bounds.maxY(), bounds.minX(), bounds.maxY(), r);
+            ctx.arcTo(bounds.minX(), bounds.maxY(), bounds.minX(), bounds.minY(), r);
+            ctx.arcTo(bounds.minX(), bounds.minY(), bounds.maxX(), bounds.minY(), r);
+            break;
+        }
+        ctx.closePath();
+    }
+
+    _addListenersIfNeeded()
+    {
+        if (!this._isListeningForPopoverEvents) {
+            this._isListeningForPopoverEvents = true;
+            window.addEventListener("mousedown", this, true);
+            window.addEventListener("scroll", this, true);
+        }
+    }
+};
+
+WebInspector.Popover.FadeOutClassName = "fade-out";
+WebInspector.Popover.canvasId = 0;
+WebInspector.Popover.CornerRadius = 5;
+WebInspector.Popover.MinWidth = 40;
+WebInspector.Popover.MinHeight = 40;
+WebInspector.Popover.ShadowPadding = 5;
+WebInspector.Popover.ContentPadding = 5;
+WebInspector.Popover.AnchorSize = new WebInspector.Size(22, 11);
+WebInspector.Popover.ShadowEdgeInsets = new WebInspector.EdgeInsets(WebInspector.Popover.ShadowPadding);
+WebInspector.Popover.IgnoreAutoDismissClassName = "popover-ignore-auto-dismiss";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.css
new file mode 100644
index 000000000..9a6e2cc59
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.css
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.probes > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.probes > .content {
+    position: absolute;
+    top: 23px;
+    bottom: 0px;
+    display: block;
+}
+
+.details-section.probe-set .options > input {
+    height: 12px;
+    width: 40px;
+    font-size: 10px;
+}
+
+.details-section.probe-set .options > a.go-to-link {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+}
+
+.popover .probe-popover {
+    padding: 2px;
+    margin: 2px;
+}
+
+.popover .probe-popover input {
+    margin: 5px 0 0 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js
new file mode 100644
index 000000000..ceb16ecbc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProbeDetailsSidebarPanel.js
@@ -0,0 +1,126 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeDetailsSidebarPanel = class ProbeDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
+{
+    constructor()
+    {
+        super("probe", WebInspector.UIString("Probes"), WebInspector.UIString("Probes"));
+
+        WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetAdded, this);
+        WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetRemoved, this);
+
+        this._probeSetSections = new Map;
+        this._inspectedProbeSets = [];
+
+        // Initialize sidebar sections for probe sets that already exist.
+        for (var probeSet of WebInspector.probeManager.probeSets)
+            this._probeSetAdded(probeSet);
+    }
+
+    // Public
+
+    get inspectedProbeSets()
+    {
+        return this._inspectedProbeSets.slice();
+    }
+
+    set inspectedProbeSets(newProbeSets)
+    {
+        for (let probeSet of this._inspectedProbeSets) {
+            let removedSection = this._probeSetSections.get(probeSet);
+            removedSection.element.remove();
+        }
+
+        this._inspectedProbeSets = newProbeSets;
+
+        for (let probeSet of newProbeSets) {
+            let shownSection = this._probeSetSections.get(probeSet);
+            this.contentView.element.appendChild(shownSection.element);
+        }
+    }
+
+    inspect(objects)
+    {
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var inspectedProbeSets = objects.filter(function(object) {
+            return object instanceof WebInspector.ProbeSet;
+        });
+
+        inspectedProbeSets.sort(function sortBySourceLocation(aProbeSet, bProbeSet) {
+            var aLocation = aProbeSet.breakpoint.sourceCodeLocation;
+            var bLocation = bProbeSet.breakpoint.sourceCodeLocation;
+            var comparisonResult = aLocation.sourceCode.displayName.localeCompare(bLocation.sourceCode.displayName);
+            if (comparisonResult !== 0)
+                return comparisonResult;
+
+            comparisonResult = aLocation.displayLineNumber - bLocation.displayLineNumber;
+            if (comparisonResult !== 0)
+                return comparisonResult;
+
+            return aLocation.displayColumnNumber - bLocation.displayColumnNumber;
+        });
+
+        this.inspectedProbeSets = inspectedProbeSets;
+
+        return !!this._inspectedProbeSets.length;
+    }
+
+    // Private
+
+    _probeSetAdded(probeSetOrEvent)
+    {
+        var probeSet;
+        if (probeSetOrEvent instanceof WebInspector.ProbeSet)
+            probeSet = probeSetOrEvent;
+        else
+            probeSet = probeSetOrEvent.data.probeSet;
+        console.assert(!this._probeSetSections.has(probeSet), "New probe group ", probeSet, " already has its own sidebar.");
+
+        var newSection = new WebInspector.ProbeSetDetailsSection(probeSet);
+        this._probeSetSections.set(probeSet, newSection);
+    }
+
+
+    _probeSetRemoved(event)
+    {
+        var probeSet = event.data.probeSet;
+        console.assert(this._probeSetSections.has(probeSet), "Removed probe group ", probeSet, " doesn't have a sidebar.");
+
+        // First remove probe set from inspected list, then from mapping.
+        var inspectedProbeSets = this.inspectedProbeSets;
+        var index = inspectedProbeSets.indexOf(probeSet);
+        if (index !== -1) {
+            inspectedProbeSets.splice(index, 1);
+            this.inspectedProbeSets = inspectedProbeSets;
+        }
+        var removedSection = this._probeSetSections.get(probeSet);
+        this._probeSetSections.delete(probeSet);
+        removedSection.closed();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.css
new file mode 100644
index 000000000..485643dfe
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.css
@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section.probe-set .data-grid tr.past-value td {
+    background-color: hsla(0, 0%, 39%, 0.2);
+    font-style: italic;
+    color: hsl(0, 0%, 46%);
+}
+
+.details-section.probe-set .data-grid > td.unknown-value {
+    background-color: hsla(0, 0%, 90%, 0.8);
+    background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, hsla(0, 0%, 100%, 0.5) 7px, hsla(0, 0%, 100%, 0.5) 14px);
+}
+
+.details-section.probe-set .data-grid tr.revealed.highlighted {
+    animation-duration: 2s;
+    animation-timing-function: ease;
+    animation-iteration-count: infinite;
+    animation-name: blink-frame-highlight;
+}
+
+@keyframes blink-frame-highlight {
+    0% {
+        background-color: hsla(262, 44%, 60%, 0.8);
+    }
+
+    100% {
+        background-color: hsla(262, 44%, 60%, 0);
+    }
+}
+
+.details-section.probe-set .data-grid tr.separator {
+    border-bottom: 3px solid hsl(0, 0%, 33%);
+}
+
+.details-section.probe-set .data-grid tr.separator {
+    border-bottom: 2px solid hsl(0, 0%, 40%);
+}
+
+.details-section.probe-set .data-grid > tr.data-updated {
+    animation-duration: 0.3s;
+    animation-name: blink-probe-frame;
+}
+
+@keyframes blink-probe-frame {
+    0% {
+        background-color: hsl(262, 44%, 60%);
+    }
+
+    100% {
+        background-color: hsla(262, 44%, 60%, 0);
+    }
+}
+
+.details-section.probe-set .data-grid .selected .section * {
+    color: white;
+}
+
+.details-section.probe-set .data-grid .selected td.unknown-value {
+    color: black !important;
+}
+
+.details-section.probe-set .data-grid .section {
+    left: -6px;
+}
+
+.details-section.probe-set .data-grid .object-tree > :matches(.title, .object-preview)::before {
+ /* The line-height inside a data-grid is 17px instead of 13px, this will center vertically on the top line. */
+    top: 2px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.js
new file mode 100644
index 000000000..43b61cc3e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGrid.js
@@ -0,0 +1,190 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeSetDataGrid = class ProbeSetDataGrid extends WebInspector.DataGrid
+{
+    constructor(probeSet)
+    {
+        console.assert(probeSet instanceof WebInspector.ProbeSet, "Invalid ProbeSet argument: ", probeSet);
+
+        var columns = {};
+        for (var probe of probeSet.probes) {
+            var title = probe.expression || WebInspector.UIString("(uninitialized)");
+            columns[probe.id] = {title};
+        }
+
+        super(columns);
+
+        this.probeSet = probeSet;
+
+        this.element.classList.add("inline");
+
+        this._frameNodes = new Map;
+        this._lastUpdatedFrame = null;
+        this._nodesSinceLastNavigation = [];
+
+        this._listenerSet = new WebInspector.EventListenerSet(this, "ProbeSetDataGrid instance listeners");
+        this._listenerSet.register(probeSet, WebInspector.ProbeSet.Event.ProbeAdded, this._setupProbe);
+        this._listenerSet.register(probeSet, WebInspector.ProbeSet.Event.ProbeRemoved, this._teardownProbe);
+        this._listenerSet.register(probeSet, WebInspector.ProbeSet.Event.SamplesCleared, this._setupData);
+        this._listenerSet.register(WebInspector.Probe, WebInspector.Probe.Event.ExpressionChanged, this._probeExpressionChanged);
+        this._listenerSet.install();
+
+        this._setupData();
+    }
+
+    // Public
+
+    closed()
+    {
+        for (var probe of this.probeSet)
+            this._teardownProbe(probe);
+
+        this._listenerSet.uninstall(true);
+    }
+
+    // Private
+
+    _setupProbe(event)
+    {
+        var probe = event.data;
+        this.insertColumn(probe.id, {title: probe.expression});
+
+        for (var frame of this._data.frames)
+            this._updateNodeForFrame(frame);
+    }
+
+    _teardownProbe(event)
+    {
+        var probe = event.data;
+        this.removeColumn(probe.id);
+
+        for (var frame of this._data.frames)
+            this._updateNodeForFrame(frame);
+    }
+
+    _setupData()
+    {
+        this._data = this.probeSet.dataTable;
+        for (var frame of this._data.frames)
+            this._updateNodeForFrame(frame);
+
+        this._dataListeners = new WebInspector.EventListenerSet(this, "ProbeSetDataGrid data table listeners");
+        this._dataListeners.register(this._data, WebInspector.ProbeSetDataTable.Event.FrameInserted, this._dataFrameInserted);
+        this._dataListeners.register(this._data, WebInspector.ProbeSetDataTable.Event.SeparatorInserted, this._dataSeparatorInserted);
+        this._dataListeners.register(this._data, WebInspector.ProbeSetDataTable.Event.WillRemove, this._teardownData);
+        this._dataListeners.install();
+    }
+
+    _teardownData()
+    {
+        this._dataListeners.uninstall(true);
+        this.removeChildren();
+        this._frameNodes = new Map;
+        this._lastUpdatedFrame = null;
+    }
+
+    _updateNodeForFrame(frame)
+    {
+        console.assert(frame instanceof WebInspector.ProbeSetDataFrame, "Invalid ProbeSetDataFrame argument: ", frame);
+        var node = null;
+        if (this._frameNodes.has(frame)) {
+            node = this._frameNodes.get(frame);
+            node.frame = frame;
+            node.refresh();
+        } else {
+            node = new WebInspector.ProbeSetDataGridNode(this);
+            node.frame = frame;
+            this._frameNodes.set(frame, node);
+            node.createCells();
+
+            var sortFunction = function(a, b) {
+                return WebInspector.ProbeSetDataFrame.compare(a.frame, b.frame);
+            };
+            var insertionIndex = insertionIndexForObjectInListSortedByFunction(node, this.children, sortFunction);
+            if (insertionIndex === this.children.length)
+                this.appendChild(node);
+            else if (this.children[insertionIndex].frame.key === frame.key) {
+                this.removeChild(this.children[insertionIndex]);
+                this.insertChild(node, insertionIndex);
+            } else
+                this.insertChild(node, insertionIndex);
+        }
+        console.assert(node);
+
+        node.element.classList.add("data-updated");
+        window.setTimeout(function() {
+            node.element.classList.remove("data-updated");
+        }, WebInspector.ProbeSetDataGrid.DataUpdatedAnimationDuration);
+
+        this._nodesSinceLastNavigation.push(node);
+    }
+
+    _updateNodeForSeparator(frame)
+    {
+        console.assert(this._frameNodes.has(frame), "Tried to add separator for unknown data frame: ", frame);
+        this._frameNodes.get(frame).updateCellsForSeparator(frame, this.probeSet);
+
+        for (var node of this._nodesSinceLastNavigation)
+            node.element.classList.add("past-value");
+
+        this._nodesSinceLastNavigation = [];
+    }
+
+    _dataFrameInserted(event)
+    {
+        var frame = event.data;
+        this._lastUpdatedFrame = frame;
+        this._updateNodeForFrame(frame);
+    }
+
+    _dataSeparatorInserted(event)
+    {
+        var frame = event.data;
+        this._updateNodeForSeparator(frame);
+    }
+
+    _probeExpressionChanged(event)
+    {
+        var probe = event.target;
+        if (probe.breakpoint !== this.probeSet.breakpoint)
+            return;
+
+        if (!this.columns.has(probe.id))
+            return;
+
+        var oldColumn = this.columns.get(probe.id);
+        this.removeColumn(probe.id);
+        var ordinal = oldColumn["ordinal"];
+        var newColumn = {title: event.data.newValue};
+        this.insertColumn(probe.id, newColumn, ordinal);
+
+        for (var frame of this._data.frames)
+            this._updateNodeForFrame(frame);
+    }
+};
+
+WebInspector.ProbeSetDataGrid.DataUpdatedAnimationDuration = 300; // milliseconds
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGridNode.js
new file mode 100644
index 000000000..97d45a6e4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDataGridNode.js
@@ -0,0 +1,97 @@
+/*
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+ * IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+ * TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+ * PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeSetDataGridNode = class ProbeSetDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(dataGrid)
+    {
+        console.assert(dataGrid instanceof WebInspector.ProbeSetDataGrid, "Invalid ProbeSetDataGrid argument:", dataGrid);
+
+        super();
+        this.dataGrid = dataGrid; // This is set to null in DataGridNode's constructor.
+        this._data = {};
+
+        this._element = document.createElement("tr");
+        this._element.dataGridNode = this;
+        this._element.classList.add("revealed");
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get data()
+    {
+        return this._data;
+    }
+
+    set frame(value)
+    {
+        console.assert(value instanceof WebInspector.ProbeSetDataFrame, "Invalid ProbeSetDataFrame argument: ", value);
+        this._frame = value;
+
+        var data = {};
+        for (var probe of this.dataGrid.probeSet.probes) {
+            var sample = this.frame[probe.id];
+            if (!sample || !sample.object)
+                data[probe.id] = WebInspector.ProbeSetDataFrame.MissingValue;
+            else
+                data[probe.id] = sample.object;
+        }
+        this._data = data;
+    }
+
+    get frame()
+    {
+        return this._frame;
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var sample = this.data[columnIdentifier];
+        if (sample === WebInspector.ProbeSetDataFrame.MissingValue) {
+            cell.classList.add("unknown-value");
+            return sample;
+        }
+
+        if (sample instanceof WebInspector.RemoteObject)
+            return WebInspector.FormattedValue.createObjectTreeOrFormattedValueForRemoteObject(sample, null);
+
+        return sample;
+    }
+
+    updateCellsFromFrame(frame, probeSet)
+    {
+    }
+
+    updateCellsForSeparator(frame, probeSet)
+    {
+        this._element.classList.add("separator");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProbeSetDetailsSection.js b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDetailsSection.js
new file mode 100644
index 000000000..0e79ff272
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProbeSetDetailsSection.js
@@ -0,0 +1,159 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2013 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProbeSetDetailsSection = class ProbeSetDetailsSection extends WebInspector.DetailsSection
+{
+    constructor(probeSet)
+    {
+        console.assert(probeSet instanceof WebInspector.ProbeSet, "Invalid ProbeSet argument:", probeSet);
+
+        var optionsElement = document.createElement("div");
+        var dataGrid = new WebInspector.ProbeSetDataGrid(probeSet);
+
+        var singletonRow = new WebInspector.DetailsSectionRow;
+        singletonRow.element.appendChild(dataGrid.element);
+
+        var probeSectionGroup = new WebInspector.DetailsSectionGroup([singletonRow]);
+
+        super("probe", "", [probeSectionGroup], optionsElement);
+
+        this.element.classList.add("probe-set");
+
+        this._optionsElement = optionsElement;
+
+        this._listenerSet = new WebInspector.EventListenerSet(this, "ProbeSetDetailsSection UI listeners");
+        this._probeSet = probeSet;
+        this._dataGrid = dataGrid;
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this._optionsElement.appendChild(this._navigationBar.element);
+
+        this._addProbeButtonItem = new WebInspector.ButtonNavigationItem("add-probe", WebInspector.UIString("Add probe expression"), "Images/Plus13.svg", 13, 13);
+        this._addProbeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._addProbeButtonClicked, this);
+        this._navigationBar.addNavigationItem(this._addProbeButtonItem);
+
+        this._clearSamplesButtonItem = new WebInspector.ButtonNavigationItem("clear-samples", WebInspector.UIString("Clear samples"), "Images/NavigationItemTrash.svg", 14, 14);
+        this._clearSamplesButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearSamplesButtonClicked, this);
+        this._clearSamplesButtonItem.enabled = this._probeSetHasSamples();
+        this._navigationBar.addNavigationItem(this._clearSamplesButtonItem);
+
+        this._removeProbeButtonItem = new WebInspector.ButtonNavigationItem("remove-probe", WebInspector.UIString("Remove probe"), "Images/CloseLarge.svg", 12, 12);
+        this._removeProbeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._removeProbeButtonClicked, this);
+        this._navigationBar.addNavigationItem(this._removeProbeButtonItem);
+
+        this._listenerSet.register(this._probeSet, WebInspector.ProbeSet.Event.SampleAdded, this._probeSetSamplesChanged);
+        this._listenerSet.register(this._probeSet, WebInspector.ProbeSet.Event.SamplesCleared, this._probeSetSamplesChanged);
+
+        // Update the source link when the breakpoint's resolved state changes,
+        // so that it can become a live location link when possible.
+        this._updateLinkElement();
+        this._listenerSet.register(this._probeSet.breakpoint, WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._updateLinkElement);
+
+        this._listenerSet.install();
+    }
+
+    // Public
+
+    closed()
+    {
+        this._listenerSet.uninstall(true);
+        this.element.remove();
+    }
+
+    // Private
+
+    _updateLinkElement()
+    {
+        var breakpoint = this._probeSet.breakpoint;
+        var titleElement = null;
+        if (breakpoint.sourceCodeLocation.sourceCode)
+            titleElement = WebInspector.createSourceCodeLocationLink(breakpoint.sourceCodeLocation);
+        else {
+            // Fallback for when we can't create a live source link.
+            console.assert(!breakpoint.resolved);
+
+            var location = breakpoint.sourceCodeLocation;
+            titleElement = WebInspector.linkifyLocation(breakpoint.url, location.displayLineNumber, location.displayColumnNumber);
+        }
+
+        titleElement.classList.add(WebInspector.ProbeSetDetailsSection.DontFloatLinkStyleClassName);
+
+        if (this._linkElement)
+            this._optionsElement.removeChild(this._linkElement);
+
+        this._linkElement = titleElement;
+        this._optionsElement.appendChild(this._linkElement);
+    }
+
+    _addProbeButtonClicked(event)
+    {
+        function createProbeFromEnteredExpression(visiblePopover, event)
+        {
+            if (event.keyCode !== 13)
+                return;
+            let expression = event.target.value;
+            this._probeSet.createProbe(expression);
+            visiblePopover.dismiss();
+        }
+
+        let popover = new WebInspector.Popover;
+        let content = document.createElement("div");
+        content.classList.add(WebInspector.ProbeSetDetailsSection.ProbePopoverElementStyleClassName);
+        content.createChild("div").textContent = WebInspector.UIString("Add New Probe Expression");
+        let textBox = content.createChild("input");
+        textBox.addEventListener("keypress", createProbeFromEnteredExpression.bind(this, popover));
+        textBox.addEventListener("click", function (event) { event.target.select(); });
+        textBox.type = "text";
+        textBox.placeholder = WebInspector.UIString("Expression");
+        popover.content = content;
+        let target = WebInspector.Rect.rectFromClientRect(event.target.element.getBoundingClientRect());
+        popover.present(target, [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
+        textBox.select();
+    }
+
+    _clearSamplesButtonClicked(event)
+    {
+        this._probeSet.clearSamples();
+    }
+
+    _removeProbeButtonClicked(event)
+    {
+        this._probeSet.clear();
+    }
+
+    _probeSetSamplesChanged(event)
+    {
+        this._clearSamplesButtonItem.enabled = this._probeSetHasSamples();
+    }
+
+    _probeSetHasSamples()
+    {
+        return this._probeSet.probes.some((probe) => probe.samples.length);
+    }
+};
+
+WebInspector.ProbeSetDetailsSection.DontFloatLinkStyleClassName = "dont-float";
+WebInspector.ProbeSetDetailsSection.ProbePopoverElementStyleClassName = "probe-popover";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js
new file mode 100644
index 000000000..d584c7d00
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeDataGridNode.js
@@ -0,0 +1,122 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileNodeDataGridNode = class ProfileNodeDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(profileNode, baseStartTime, rangeStartTime, rangeEndTime)
+    {
+        var hasChildren = !!profileNode.childNodes.length;
+
+        super(false, null, hasChildren);
+
+        this._profileNode = profileNode;
+        this._baseStartTime = baseStartTime || 0;
+        this._rangeStartTime = rangeStartTime || 0;
+        this._rangeEndTime = typeof rangeEndTime === "number" ? rangeEndTime : Infinity;
+
+        this._data = this._profileNode.computeCallInfoForTimeRange(this._rangeStartTime, this._rangeEndTime);
+        this._data.location = this._profileNode.sourceCodeLocation;
+    }
+
+    // Public
+
+    get profileNode()
+    {
+        return this._profileNode;
+    }
+
+    get records()
+    {
+        return null;
+    }
+
+    get baseStartTime()
+    {
+        return this._baseStartTime;
+    }
+
+    get rangeStartTime()
+    {
+        return this._rangeStartTime;
+    }
+
+    get rangeEndTime()
+    {
+        return this._rangeEndTime;
+    }
+
+    get data()
+    {
+        return this._data;
+    }
+
+    updateRangeTimes(startTime, endTime)
+    {
+        var oldRangeStartTime = this._rangeStartTime;
+        var oldRangeEndTime = this._rangeEndTime;
+
+        if (oldRangeStartTime === startTime && oldRangeEndTime === endTime)
+            return;
+
+        this._rangeStartTime = startTime;
+        this._rangeEndTime = endTime;
+
+        // We only need a refresh if the new range time changes the visible portion of this record.
+        var profileStart = this._profileNode.startTime;
+        var profileEnd = this._profileNode.endTime;
+        var oldStartBoundary = Number.constrain(oldRangeStartTime, profileStart, profileEnd);
+        var oldEndBoundary = Number.constrain(oldRangeEndTime, profileStart, profileEnd);
+        var newStartBoundary = Number.constrain(startTime, profileStart, profileEnd);
+        var newEndBoundary = Number.constrain(endTime, profileStart, profileEnd);
+
+        if (oldStartBoundary !== newStartBoundary || oldEndBoundary !== newEndBoundary)
+            this.needsRefresh();
+    }
+
+    refresh()
+    {
+        this._data = this._profileNode.computeCallInfoForTimeRange(this._rangeStartTime, this._rangeEndTime);
+        this._data.location = this._profileNode.sourceCodeLocation;
+
+        super.refresh();
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "startTime":
+            return isNaN(value) ? emDash : Number.secondsToString(value - this._baseStartTime, true);
+
+        case "selfTime":
+        case "totalTime":
+        case "averageTime":
+            return isNaN(value) ? emDash : Number.secondsToString(value, true);
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js
new file mode 100644
index 000000000..8d16d4c1f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ProfileNodeTreeElement.js
@@ -0,0 +1,135 @@
+/*
+ * Copyright (C) 2014-2105 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ProfileNodeTreeElement = class ProfileNodeTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(profileNode, delegate)
+    {
+        console.assert(profileNode);
+
+        var title = profileNode.functionName;
+        var subtitle = "";
+
+        if (!title) {
+            switch (profileNode.type) {
+            case WebInspector.ProfileNode.Type.Function:
+                title = WebInspector.UIString("(anonymous function)");
+                break;
+            case WebInspector.ProfileNode.Type.Program:
+                title = WebInspector.UIString("(program)");
+                break;
+            default:
+                title = WebInspector.UIString("(anonymous function)");
+                console.error("Unknown ProfileNode type: " + profileNode.type);
+            }
+        }
+
+        var sourceCodeLocation = profileNode.sourceCodeLocation;
+        if (sourceCodeLocation) {
+            subtitle = document.createElement("span");
+            sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent");
+        }
+
+        var className;
+
+        switch (profileNode.type) {
+        case WebInspector.ProfileNode.Type.Function:
+            className = WebInspector.CallFrameView.FunctionIconStyleClassName;
+            if (!sourceCodeLocation)
+                className = WebInspector.CallFrameView.NativeIconStyleClassName;
+            break;
+        case WebInspector.ProfileNode.Type.Program:
+            className = WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
+            break;
+        }
+
+        console.assert(className);
+
+        // This is more than likely an event listener function with an "on" prefix and it is
+        // as long or longer than the shortest event listener name -- "oncut".
+        if (profileNode.functionName && profileNode.functionName.startsWith("on") && profileNode.functionName.length >= 5)
+            className = WebInspector.CallFrameView.EventListenerIconStyleClassName;
+
+        var hasChildren = !!profileNode.childNodes.length;
+
+        super([className], title, subtitle, profileNode, hasChildren);
+
+        this._profileNode = profileNode;
+        this._delegate = delegate || null;
+
+        this.shouldRefreshChildren = true;
+
+        if (sourceCodeLocation)
+            this.tooltipHandledSeparately = true;
+    }
+
+    // Public
+
+    get profileNode()
+    {
+        return this._profileNode;
+    }
+
+    get filterableData()
+    {
+        var url = this._profileNode.sourceCodeLocation ? this._profileNode.sourceCodeLocation.sourceCode.url : "";
+        return {text: [this.mainTitle, url || ""]};
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        console.assert(this.element);
+
+        if (!this.tooltipHandledSeparately)
+            return;
+
+        var tooltipPrefix = this.mainTitle + "\n";
+        this._profileNode.sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
+    }
+
+    onpopulate()
+    {
+        if (!this.hasChildren || !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+
+        if (this._delegate && typeof this._delegate.populateProfileNodeTreeElement === "function") {
+            this._delegate.populateProfileNodeTreeElement(this);
+            return;
+        }
+
+        for (var childProfileNode of this._profileNode.childNodes) {
+            var childTreeElement = new WebInspector.ProfileNodeTreeElement(childProfileNode);
+            this.appendChild(childTreeElement);
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
new file mode 100644
index 000000000..bf02a00eb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.css
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.quick-console {
+    position: relative;
+    min-height: var(--console-prompt-min-height);
+
+    display: flex;
+    align-items: flex-end;
+
+    background-color: white;
+    border-top: 1px solid var(--border-color);
+    padding: 3px 0 4px;
+
+    outline: none;
+    overflow: hidden;
+
+    font-family: Menlo, monospace;
+}
+
+.quick-console.showing-log {
+    border-top-color: hsl(0, 0%, 94%) !important;
+}
+
+.quick-console > .console-prompt {
+    display: flex;
+    flex: 1;
+
+    align-items: flex-start;
+
+    max-height: 150px;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+    pointer-events: none;
+}
+
+.quick-console > .console-prompt::before {
+    position: relative;
+    z-index: 1;
+
+    top: 4px;
+    left: 4px;
+
+    margin-right: 2px;
+
+    width: 12px;
+    height: 12px;
+
+    content: url(../Images/UserInputPrompt.svg);
+}
+
+.quick-console > .console-prompt > .CodeMirror {
+    pointer-events: all;
+    margin: 4px 0 2px;
+}
+
+.quick-console > .navigation-bar {
+    background: transparent;
+    border: none;
+
+    height: 21px;
+}
+
+.quick-console .execution-context {
+    margin-top: -1px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js
new file mode 100644
index 000000000..c48a0d815
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/QuickConsole.js
@@ -0,0 +1,332 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.QuickConsole = class QuickConsole extends WebInspector.View
+{
+    constructor(element)
+    {
+        super(element);
+
+        this._toggleOrFocusKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape, this._toggleOrFocus.bind(this));
+
+        var mainFrameExecutionContext = new WebInspector.ExecutionContext(WebInspector.QuickConsole.MainFrameContextExecutionIdentifier, WebInspector.UIString("Main Frame"), true, null);
+        this._mainFrameExecutionContextPathComponent = this._createExecutionContextPathComponent(mainFrameExecutionContext.name, mainFrameExecutionContext.identifier);
+        this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
+
+        this._otherExecutionContextPathComponents = [];
+        this._frameIdentifierToExecutionContextPathComponentMap = {};
+
+        this.element.classList.add("quick-console");
+        this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+
+        this.prompt = new WebInspector.ConsolePrompt(null, "text/javascript");
+        this.prompt.element.classList.add("text-prompt");
+        this.addSubview(this.prompt);
+
+        // FIXME: CodeMirror 4 has a default "Esc" key handler that always prevents default.
+        // Our keyboard shortcut above will respect the default prevented and ignore the event
+        // and not toggle the console. Install our own Escape key handler that will trigger
+        // when the ConsolePrompt is empty, to restore toggling behavior. A better solution
+        // would be for CodeMirror's event handler to pass if it doesn't do anything.
+        this.prompt.escapeKeyHandlerWhenEmpty = function() { WebInspector.toggleSplitConsole(); };
+
+        this.prompt.shown();
+
+        this._navigationBar = new WebInspector.QuickConsoleNavigationBar;
+        this.addSubview(this._navigationBar);
+
+        this._executionContextSelectorItem = new WebInspector.HierarchicalPathNavigationItem;
+        this._executionContextSelectorItem.showSelectorArrows = true;
+        this._navigationBar.addNavigationItem(this._executionContextSelectorItem);
+
+        this._executionContextSelectorDivider = new WebInspector.DividerNavigationItem;
+        this._navigationBar.addNavigationItem(this._executionContextSelectorDivider);
+
+        this._rebuildExecutionContextPathComponents();
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.PageExecutionContextChanged, this._framePageExecutionContextsChanged, this);
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.ExecutionContextsCleared, this._frameExecutionContextsCleared, this);
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
+    }
+
+    // Public
+
+    get navigationBar()
+    {
+        return this._navigationBar;
+    }
+
+    get executionContextIdentifier()
+    {
+        return this._selectedExecutionContextPathComponent._executionContextIdentifier;
+    }
+
+    consoleLogVisibilityChanged(visible)
+    {
+        if (visible === this.element.classList.contains(WebInspector.QuickConsole.ShowingLogClassName))
+            return;
+
+        this.element.classList.toggle(WebInspector.QuickConsole.ShowingLogClassName, visible);
+
+        this.dispatchEventToListeners(WebInspector.QuickConsole.Event.DidResize);
+    }
+
+    // Protected
+
+    layout()
+    {
+        // A hard maximum size of 33% of the window.
+        let maximumAllowedHeight = Math.round(window.innerHeight * 0.33);
+        this.prompt.element.style.maxHeight = maximumAllowedHeight + "px";
+    }
+
+    // Private
+
+    _handleMouseDown(event)
+    {
+        if (event.target !== this.element)
+            return;
+
+        event.preventDefault();
+        this.prompt.focus();
+    }
+
+    _executionContextPathComponentsToDisplay()
+    {
+        // If we are in the debugger the console will use the active call frame, don't show the selector.
+        if (WebInspector.debuggerManager.activeCallFrame)
+            return [];
+
+        // If there is only the Main Frame, don't show the selector.
+        if (!this._otherExecutionContextPathComponents.length)
+            return [];
+
+        return [this._selectedExecutionContextPathComponent];
+    }
+
+    _rebuildExecutionContextPathComponents()
+    {
+        var components = this._executionContextPathComponentsToDisplay();
+        var isEmpty = !components.length;
+
+        this._executionContextSelectorItem.components = components;
+
+        this._executionContextSelectorItem.hidden = isEmpty;
+        this._executionContextSelectorDivider.hidden = isEmpty;
+    }
+
+    _framePageExecutionContextsChanged(event)
+    {
+        var frame = event.target;
+
+        var shouldAutomaticallySelect = this._restoreSelectedExecutionContextForFrame === frame;
+
+        var newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, shouldAutomaticallySelect);
+
+        if (shouldAutomaticallySelect) {
+            delete this._restoreSelectedExecutionContextForFrame;
+            this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
+            this._rebuildExecutionContextPathComponents();
+        }
+    }
+
+    _frameExecutionContextsCleared(event)
+    {
+        var frame = event.target;
+
+        // If this frame is navigating and it is selected in the UI we want to reselect its new item after navigation.
+        if (event.data.committingProvisionalLoad && !this._restoreSelectedExecutionContextForFrame) {
+            var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+            if (this._selectedExecutionContextPathComponent === executionContextPathComponent) {
+                this._restoreSelectedExecutionContextForFrame = frame;
+                // As a fail safe, if the frame never gets an execution context, clear the restore value.
+                setTimeout(function() { delete this._restoreSelectedExecutionContextForFrame; }.bind(this), 10);
+            }
+        }
+
+        this._removeExecutionContextPathComponentForFrame(frame);
+    }
+
+    _createExecutionContextPathComponent(name, identifier)
+    {
+        var pathComponent = new WebInspector.HierarchicalPathComponent(name, "execution-context", identifier, true, true);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
+        pathComponent.truncatedDisplayNameLength = 50;
+        pathComponent._executionContextIdentifier = identifier;
+        return pathComponent;
+    }
+
+    _createExecutionContextPathComponentFromFrame(frame)
+    {
+        var name = frame.name ? frame.name + " \u2014 " + frame.mainResource.displayName : frame.mainResource.displayName;
+
+        var pathComponent = this._createExecutionContextPathComponent(name, frame.pageExecutionContext.id);
+        pathComponent._frame = frame;
+
+        return pathComponent;
+    }
+
+    _compareExecutionContextPathComponents(a, b)
+    {
+        // "Main Frame" always on top.
+        if (!a._frame)
+            return -1;
+        if (!b._frame)
+            return 1;
+
+        // Frames with a name above frames without a name.
+        if (a._frame.name && !b._frame.name)
+            return -1;
+        if (!a._frame.name && b._frame.name)
+            return 1;
+
+        return a.displayName.localeCompare(b.displayName);
+    }
+
+    _insertExecutionContextPathComponentForFrame(frame, skipRebuild)
+    {
+        if (frame.isMainFrame())
+            return this._mainFrameExecutionContextPathComponent;
+
+        console.assert(!this._frameIdentifierToExecutionContextPathComponentMap[frame.id]);
+        if (this._frameIdentifierToExecutionContextPathComponentMap[frame.id])
+            return null;
+
+        var executionContextPathComponent = this._createExecutionContextPathComponentFromFrame(frame);
+
+        var index = insertionIndexForObjectInListSortedByFunction(executionContextPathComponent, this._otherExecutionContextPathComponents, this._compareExecutionContextPathComponents);
+
+        var prev = index > 0 ? this._otherExecutionContextPathComponents[index - 1] : this._mainFrameExecutionContextPathComponent;
+        var next = this._otherExecutionContextPathComponents[index] || null;
+        if (prev) {
+            prev.nextSibling = executionContextPathComponent;
+            executionContextPathComponent.previousSibling = prev;
+        }
+        if (next) {
+            next.previousSibling = executionContextPathComponent;
+            executionContextPathComponent.nextSibling = next;
+        }
+
+        this._otherExecutionContextPathComponents.splice(index, 0, executionContextPathComponent);
+        this._frameIdentifierToExecutionContextPathComponentMap[frame.id] = executionContextPathComponent;
+
+        if (!skipRebuild)
+            this._rebuildExecutionContextPathComponents();
+
+        return executionContextPathComponent;
+    }
+
+    _removeExecutionContextPathComponentForFrame(frame, skipRebuild)
+    {
+        if (frame.isMainFrame())
+            return;
+
+        var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+        console.assert(executionContextPathComponent);
+        if (!executionContextPathComponent)
+            return;
+
+        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        executionContextPathComponent.removeEventListener(WebInspector.HierarchicalPathComponent.Event.Clicked, this._pathComponentClicked, this);
+
+        var prev = executionContextPathComponent.previousSibling;
+        var next = executionContextPathComponent.nextSibling;
+        if (prev)
+            prev.nextSibling = next;
+        if (next)
+            next.previousSibling = prev;
+
+        if (this._selectedExecutionContextPathComponent === executionContextPathComponent)
+            this._selectedExecutionContextPathComponent = this._mainFrameExecutionContextPathComponent;
+
+        this._otherExecutionContextPathComponents.remove(executionContextPathComponent, true);
+        delete this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+
+        if (!skipRebuild)
+            this._rebuildExecutionContextPathComponents();
+    }
+
+    _updateExecutionContextPathComponentForFrame(frame)
+    {
+        if (frame.isMainFrame())
+            return;
+
+        var executionContextPathComponent = this._frameIdentifierToExecutionContextPathComponentMap[frame.id];
+        if (!executionContextPathComponent)
+            return;
+
+        var wasSelected = this._selectedExecutionContextPathComponent === executionContextPathComponent;
+
+        this._removeExecutionContextPathComponentForFrame(frame, true);
+        var newExecutionContextPathComponent = this._insertExecutionContextPathComponentForFrame(frame, true);
+
+        if (wasSelected)
+            this._selectedExecutionContextPathComponent = newExecutionContextPathComponent;
+
+        this._rebuildExecutionContextPathComponents();
+    }
+
+    _pathComponentSelected(event)
+    {
+        if (event.data.pathComponent === this._selectedExecutionContextPathComponent)
+            return;
+
+        this._selectedExecutionContextPathComponent = event.data.pathComponent;
+
+        this._rebuildExecutionContextPathComponents();
+    }
+
+    _pathComponentClicked(event)
+    {
+        this.prompt.focus();
+    }
+
+    _debuggerActiveCallFrameDidChange(event)
+    {
+        this._rebuildExecutionContextPathComponents();
+    }
+
+    _toggleOrFocus(event)
+    {
+        if (this.prompt.focused)
+            WebInspector.toggleSplitConsole();
+        else if (!WebInspector.isEditingAnyField() && !WebInspector.isEventTargetAnEditableField(event))
+            this.prompt.focus();
+    }
+};
+
+WebInspector.QuickConsole.ShowingLogClassName = "showing-log";
+
+WebInspector.QuickConsole.ToolbarSingleLineHeight = 21;
+WebInspector.QuickConsole.ToolbarPromptPadding = 4;
+WebInspector.QuickConsole.ToolbarTopBorder = 1;
+
+WebInspector.QuickConsole.MainFrameContextExecutionIdentifier = undefined;
+
+WebInspector.QuickConsole.Event = {
+    DidResize: "quick-console-did-resize"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/QuickConsoleNavigationBar.js b/Source/WebInspectorUI/UserInterface/Views/QuickConsoleNavigationBar.js
new file mode 100644
index 000000000..73eac727f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/QuickConsoleNavigationBar.js
@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.QuickConsoleNavigationBar = class QuickConsoleNavigationBar extends WebInspector.NavigationBar
+{
+    get sizesToFit()
+    {
+        return true;
+    }
+
+    addNavigationItem(navigationItem)
+    {
+        // Add new navigation items to the left.
+        return this.insertNavigationItem(navigationItem, 0);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
new file mode 100644
index 000000000..e382faa93
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.navigation-bar .item.radio.button:not(.text-only) {
+    width: 32px;
+}
+
+.navigation-bar.collapsed .item.radio.button:not(.text-only) {
+    width: 24px;
+}
+
+.navigation-bar .item.radio.button.text-only:hover {
+    color: white;
+    background-color: hsla(212, 92%, 54%, 0.5);
+}
+
+.navigation-bar .item.radio.button.text-only.selected {
+    color: white;
+    background-color: hsl(212, 92%, 54%);
+}
+
+.navigation-bar .item.radio.button.text-only:active {
+    color: white;
+    background-color: hsla(212, 92%, 54%, 0.55);
+}
+
+.navigation-bar .item.radio.button.text-only.selected:active {
+    background-color: hsl(218, 85%, 52%);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js
new file mode 100644
index 000000000..9f7440550
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RadioButtonNavigationItem.js
@@ -0,0 +1,93 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RadioButtonNavigationItem = class RadioButtonNavigationItem extends WebInspector.ButtonNavigationItem
+{
+    constructor(identifier, toolTip, image, imageWidth, imageHeight)
+    {
+        super(identifier, toolTip, image, imageWidth, imageHeight, null, "tab");
+    }
+
+    // Public
+
+    get selected()
+    {
+        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+    }
+
+    set selected(flag)
+    {
+        if (flag) {
+            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "true");
+        } else {
+            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "false");
+        }
+    }
+
+    get active()
+    {
+        return this.element.classList.contains(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName);
+    }
+
+    set active(flag)
+    {
+        this.element.classList.toggle(WebInspector.RadioButtonNavigationItem.ActiveStyleClassName, flag);
+    }
+
+    updateLayout(expandOnly)
+    {
+        if (expandOnly)
+            return;
+
+        var isSelected = this.selected;
+
+        if (!isSelected) {
+            this.element.classList.add(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "true");
+        }
+
+        var selectedWidth = this.element.offsetWidth;
+        if (selectedWidth)
+            this.element.style.minWidth = selectedWidth + "px";
+
+        if (!isSelected) {
+            this.element.classList.remove(WebInspector.RadioButtonNavigationItem.SelectedStyleClassName);
+            this.element.setAttribute("aria-selected", "false");
+        }
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["radio", "button"];
+    }
+};
+
+WebInspector.RadioButtonNavigationItem.StyleClassName = "radio";
+WebInspector.RadioButtonNavigationItem.ActiveStyleClassName = "active";
+WebInspector.RadioButtonNavigationItem.SelectedStyleClassName = "selected";
diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js
new file mode 100644
index 000000000..15e178f4c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineDataGridNode.js
@@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RenderingFrameTimelineDataGridNode = class RenderingFrameTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(renderingFrameTimelineRecord, baseStartTime)
+    {
+        super(false, null);
+
+        this._record = renderingFrameTimelineRecord;
+        this._baseStartTime = baseStartTime || 0;
+    }
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    }
+
+    get records()
+    {
+        return [this._record];
+    }
+
+    get data()
+    {
+        if (!this._cachedData) {
+            var scriptTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
+            var layoutTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
+            var paintTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
+            var otherTime = this._record.durationForTask(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
+            this._cachedData = {
+                startTime: this._record.startTime,
+                totalTime: this._record.duration,
+                scriptTime,
+                layoutTime,
+                paintTime,
+                otherTime,
+            };
+        }
+
+        return this._cachedData;
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "startTime":
+            return isNaN(value) ? emDash : Number.secondsToString(value - this._baseStartTime, true);
+
+        case "scriptTime":
+        case "layoutTime":
+        case "paintTime":
+        case "otherTime":
+        case "totalTime":
+            return (isNaN(value) || value === 0) ? emDash : Number.secondsToString(value, true);
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css
new file mode 100644
index 000000000..22dfef522
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-overview > .graphs-container > .timeline-overview-graph.rendering-frame {
+    height: 100%;
+}
+
+.timeline-overview-graph.rendering-frame > .divider {
+    position: absolute;
+    z-index: 10;
+
+    width: 100%;
+    height: 1px;
+
+    background-color: hsla(0, 0%, 0%, 0.07);
+    text-align: right;
+
+    pointer-events: none;
+}
+
+.timeline-overview-graph.rendering-frame > .divider > .label {
+    padding: 2px;
+    font-size: 8px;
+
+    color: hsl(0, 0%, 60%);
+}
+
+.timeline-overview-graph.rendering-frame > .frame-marker {
+    position: absolute;
+    display: block;
+    height: 3px;
+    top: -5px;
+
+    background: -webkit-linear-gradient(left, hsl(210, 100%, 49%), hsl(210, 100%, 49%)) no-repeat 1px 0;
+
+    pointer-events: none;
+}
+
+body.window-inactive .timeline-overview-graph.rendering-frame > .frame-marker {
+    background-image: -webkit-linear-gradient(left, hsl(0, 0%, 60%), hsl(0, 0%, 60%));
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js
new file mode 100644
index 000000000..02ba11304
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js
@@ -0,0 +1,278 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RenderingFrameTimelineOverviewGraph = class RenderingFrameTimelineOverviewGraph extends WebInspector.TimelineOverviewGraph
+{
+    constructor(timeline, timelineOverview)
+    {
+        super(timelineOverview);
+
+        this.element.classList.add("rendering-frame");
+        this.element.addEventListener("click", this._mouseClicked.bind(this));
+
+        this._renderingFrameTimeline = timeline;
+        this._renderingFrameTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._timelineRecordAdded, this);
+
+        this._selectedFrameMarker = document.createElement("div");
+        this._selectedFrameMarker.classList.add("frame-marker");
+
+        this._timelineRecordFrames = [];
+        this._selectedTimelineRecordFrame = null;
+        this._graphHeightSeconds = NaN;
+        this._framesPerSecondDividerMap = new Map;
+
+        this.reset();
+    }
+
+    // Public
+
+    get graphHeightSeconds()
+    {
+        if (!isNaN(this._graphHeightSeconds))
+            return this._graphHeightSeconds;
+
+        var maximumFrameDuration = this._renderingFrameTimeline.records.reduce(function(previousValue, currentValue) {
+            return Math.max(previousValue, currentValue.duration);
+        }, 0);
+
+        this._graphHeightSeconds = maximumFrameDuration * 1.1;  // Add 10% margin above frames.
+        this._graphHeightSeconds = Math.min(this._graphHeightSeconds, WebInspector.RenderingFrameTimelineOverviewGraph.MaximumGraphHeightSeconds);
+        this._graphHeightSeconds = Math.max(this._graphHeightSeconds, WebInspector.RenderingFrameTimelineOverviewGraph.MinimumGraphHeightSeconds);
+        return this._graphHeightSeconds;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this.element.removeChildren();
+
+        this.selectedRecord = null;
+
+        this._framesPerSecondDividerMap.clear();
+    }
+
+    recordWasFiltered(record, filtered)
+    {
+        super.recordWasFiltered(record, filtered);
+
+        if (!(record instanceof WebInspector.RenderingFrameTimelineRecord))
+            return;
+
+        record[WebInspector.RenderingFrameTimelineOverviewGraph.RecordWasFilteredSymbol] = filtered;
+
+        // Set filtered style if the frame element is within the visible range.
+        const startIndex = Math.floor(this.startTime);
+        const endIndex = Math.min(Math.floor(this.endTime), this._renderingFrameTimeline.records.length - 1);
+        if (record.frameIndex < startIndex || record.frameIndex > endIndex)
+            return;
+
+        const frameIndex = record.frameIndex - startIndex;
+        this._timelineRecordFrames[frameIndex].filtered = filtered;
+    }
+
+    // Protected
+
+    get height()
+    {
+        return 108;
+    }
+
+    layout()
+    {
+        if (!this._renderingFrameTimeline.records.length)
+            return;
+
+        let records = this._renderingFrameTimeline.records;
+        let startIndex = Math.floor(this.startTime);
+        let endIndex = Math.min(Math.floor(this.endTime), records.length - 1);
+        let recordFrameIndex = 0;
+
+        for (let i = startIndex; i <= endIndex; ++i) {
+            let record = records[i];
+            let timelineRecordFrame = this._timelineRecordFrames[recordFrameIndex];
+            if (!timelineRecordFrame)
+                timelineRecordFrame = this._timelineRecordFrames[recordFrameIndex] = new WebInspector.TimelineRecordFrame(this, record);
+            else
+                timelineRecordFrame.record = record;
+
+            timelineRecordFrame.refresh(this);
+            if (!timelineRecordFrame.element.parentNode)
+                this.element.appendChild(timelineRecordFrame.element);
+
+            timelineRecordFrame.filtered = record[WebInspector.RenderingFrameTimelineOverviewGraph.RecordWasFilteredSymbol] || false;
+            ++recordFrameIndex;
+        }
+
+        // Remove the remaining unused TimelineRecordFrames.
+        for (; recordFrameIndex < this._timelineRecordFrames.length; ++recordFrameIndex) {
+            this._timelineRecordFrames[recordFrameIndex].record = null;
+            this._timelineRecordFrames[recordFrameIndex].element.remove();
+        }
+
+        this._updateDividers();
+        this._updateFrameMarker();
+    }
+
+    updateSelectedRecord()
+    {
+        if (!this.selectedRecord) {
+            this._updateFrameMarker();
+            return;
+        }
+
+        const visibleDuration = this.timelineOverview.visibleDuration;
+        const frameIndex = this.selectedRecord.frameIndex;
+
+        // Reveal a newly selected record if it's outside the visible range.
+        if (frameIndex < Math.ceil(this.timelineOverview.scrollStartTime) || frameIndex >= this.timelineOverview.scrollStartTime + visibleDuration) {
+            var scrollStartTime = frameIndex;
+            if (!this._selectedTimelineRecordFrame || Math.abs(this._selectedTimelineRecordFrame.record.frameIndex - this.selectedRecord.frameIndex) > 1) {
+                scrollStartTime -= Math.floor(visibleDuration / 2);
+                scrollStartTime = Math.max(Math.min(scrollStartTime, this.timelineOverview.endTime), this.timelineOverview.startTime);
+            }
+
+            this.timelineOverview.scrollStartTime = scrollStartTime;
+            return;
+        }
+
+        this._updateFrameMarker();
+    }
+
+    // Private
+
+    _timelineRecordAdded(event)
+    {
+        this._graphHeightSeconds = NaN;
+
+        this.needsLayout();
+    }
+
+    _updateDividers()
+    {
+        if (this.graphHeightSeconds === 0)
+            return;
+
+        var overviewGraphHeight = this.element.offsetHeight;
+
+        function createDividerAtPosition(framesPerSecond)
+        {
+            var secondsPerFrame = 1 / framesPerSecond;
+            var dividerTop = 1 - secondsPerFrame / this.graphHeightSeconds;
+            if (dividerTop < 0.01 || dividerTop >= 1)
+                return;
+
+            var divider = this._framesPerSecondDividerMap.get(framesPerSecond);
+            if (!divider) {
+                divider = document.createElement("div");
+                divider.classList.add("divider");
+
+                var label = document.createElement("div");
+                label.classList.add("label");
+                label.innerText = framesPerSecond + " fps";
+                divider.appendChild(label);
+
+                this.element.appendChild(divider);
+
+                this._framesPerSecondDividerMap.set(framesPerSecond, divider);
+            }
+
+            divider.style.marginTop = (dividerTop * overviewGraphHeight).toFixed(2) + "px";
+        }
+
+        createDividerAtPosition.call(this, 60);
+        createDividerAtPosition.call(this, 30);
+    }
+
+    _updateFrameMarker()
+    {
+        if (this._selectedTimelineRecordFrame) {
+            this._selectedTimelineRecordFrame.selected = false;
+            this._selectedTimelineRecordFrame = null;
+        }
+
+        if (!this.selectedRecord) {
+            if (this._selectedFrameMarker.parentElement)
+                this.element.removeChild(this._selectedFrameMarker);
+
+            this.dispatchSelectedRecordChangedEvent();
+            return;
+        }
+
+        var frameWidth = (1 / this.timelineOverview.secondsPerPixel);
+        this._selectedFrameMarker.style.width = frameWidth + "px";
+
+        var markerLeftPosition = this.selectedRecord.frameIndex - this.startTime;
+        this._selectedFrameMarker.style.left = ((markerLeftPosition / this.timelineOverview.visibleDuration) * 100).toFixed(2) + "%";
+
+        if (!this._selectedFrameMarker.parentElement)
+            this.element.appendChild(this._selectedFrameMarker);
+
+        // Find and update the selected frame element.
+        var index = this._timelineRecordFrames.binaryIndexOf(this.selectedRecord, function(record, frame) {
+            return frame.record ? record.frameIndex - frame.record.frameIndex : -1;
+        });
+
+        console.assert(index >= 0 && index < this._timelineRecordFrames.length, "Selected record not within visible graph duration.", this.selectedRecord);
+        if (index < 0 || index >= this._timelineRecordFrames.length)
+            return;
+
+        this._selectedTimelineRecordFrame = this._timelineRecordFrames[index];
+        this._selectedTimelineRecordFrame.selected = true;
+
+        this.dispatchSelectedRecordChangedEvent();
+    }
+
+    _mouseClicked(event)
+    {
+        var position = event.pageX - this.element.getBoundingClientRect().left;
+        var frameIndex = Math.floor(position * this.timelineOverview.secondsPerPixel + this.startTime);
+        if (frameIndex < 0 || frameIndex >= this._renderingFrameTimeline.records.length)
+            return;
+
+        var newSelectedRecord = this._renderingFrameTimeline.records[frameIndex];
+        if (newSelectedRecord[WebInspector.RenderingFrameTimelineOverviewGraph.RecordWasFilteredSymbol])
+            return;
+
+        // Clicking the selected frame causes it to be deselected.
+        if (this.selectedRecord === newSelectedRecord)
+            newSelectedRecord = null;
+
+        if (frameIndex >= this.timelineOverview.selectionStartTime && frameIndex < this.timelineOverview.selectionStartTime + this.timelineOverview.selectionDuration) {
+            this.selectedRecord = newSelectedRecord;
+            return;
+        }
+
+        // Clicking a frame outside the current ruler selection changes the selection to include the frame.
+        this.selectedRecord = newSelectedRecord;
+        this.timelineOverview.selectionStartTime = frameIndex;
+        this.timelineOverview.selectionDuration = 1;
+    }
+};
+
+WebInspector.RenderingFrameTimelineOverviewGraph.RecordWasFilteredSymbol = Symbol("rendering-frame-overview-graph-record-was-filtered");
+
+WebInspector.RenderingFrameTimelineOverviewGraph.MaximumGraphHeightSeconds = 0.037;
+WebInspector.RenderingFrameTimelineOverviewGraph.MinimumGraphHeightSeconds = 0.0185;
diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
new file mode 100644
index 000000000..67e2b6707
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.css
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.rendering-frame > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.rendering-frame .item:not(.paint-record):not(.layout-record) .subtitle {
+    display: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js
new file mode 100644
index 000000000..b0c7b19bb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js
@@ -0,0 +1,333 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RenderingFrameTimelineView = class RenderingFrameTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(WebInspector.TimelineRecord.Type.RenderingFrame);
+
+        this.navigationSidebarTreeOutline.element.classList.add("rendering-frame");
+
+        var scopeBarItems = [];
+        for (var key in WebInspector.RenderingFrameTimelineView.DurationFilter) {
+            var value = WebInspector.RenderingFrameTimelineView.DurationFilter[key];
+            scopeBarItems.push(new WebInspector.ScopeBarItem(value, WebInspector.RenderingFrameTimelineView.displayNameForDurationFilter(value)));
+        }
+
+        this._scopeBar = new WebInspector.ScopeBar("rendering-frame-scope-bar", scopeBarItems, scopeBarItems[0], true);
+        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+        let columns = {totalTime: {}, scriptTime: {}, layoutTime: {}, paintTime: {}, otherTime: {}, startTime: {}, location: {}};
+
+        columns.totalTime.title = WebInspector.UIString("Total Time");
+        columns.totalTime.width = "15%";
+        columns.totalTime.aligned = "right";
+
+        columns.scriptTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Script);
+        columns.scriptTime.width = "10%";
+        columns.scriptTime.aligned = "right";
+
+        columns.layoutTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout);
+        columns.layoutTime.width = "10%";
+        columns.layoutTime.aligned = "right";
+
+        columns.paintTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint);
+        columns.paintTime.width = "10%";
+        columns.paintTime.aligned = "right";
+
+        columns.otherTime.title = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(WebInspector.RenderingFrameTimelineRecord.TaskType.Other);
+        columns.otherTime.width = "10%";
+        columns.otherTime.aligned = "right";
+
+        columns.startTime.title = WebInspector.UIString("Start Time");
+        columns.startTime.width = "15%";
+        columns.startTime.aligned = "right";
+
+        columns.location.title = WebInspector.UIString("Location");
+
+        for (var column in columns)
+            columns[column].sortable = true;
+
+        this._dataGrid = new WebInspector.TimelineDataGrid(this.navigationSidebarTreeOutline, columns, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("rendering-frame-timeline-view-sort", "startTime");
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("rendering-frame-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);
+
+        this.element.classList.add("rendering-frame");
+        this.addSubview(this._dataGrid);
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._renderingFrameTimelineRecordAdded, this);
+
+        this._pendingRecords = [];
+    }
+
+    static displayNameForDurationFilter(filter)
+    {
+        switch (filter) {
+            case WebInspector.RenderingFrameTimelineView.DurationFilter.All:
+                return WebInspector.UIString("All");
+            case WebInspector.RenderingFrameTimelineView.DurationFilter.OverOneMillisecond:
+                return WebInspector.UIString("Over 1 ms");
+            case WebInspector.RenderingFrameTimelineView.DurationFilter.OverFifteenMilliseconds:
+                return WebInspector.UIString("Over 15 ms");
+            default:
+                console.error("Unknown filter type", filter);
+        }
+
+        return null;
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString("Records");
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._dataGrid.shown();
+    }
+
+    hidden()
+    {
+        this._dataGrid.hidden();
+
+        super.hidden();
+    }
+
+    closed()
+    {
+        console.assert(this.representedObject instanceof WebInspector.Timeline);
+        this.representedObject.removeEventListener(null, null, this);
+
+        this._dataGrid.closed();
+    }
+
+    get selectionPathComponents()
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return null;
+
+        var pathComponents = [];
+
+        while (dataGridNode && !dataGridNode.root) {
+            var treeElement = this._dataGrid.treeElementForDataGridNode(dataGridNode);
+            console.assert(treeElement);
+            if (!treeElement)
+                break;
+
+            if (treeElement.hidden)
+                return null;
+
+            var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.treeElementPathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            dataGridNode = dataGridNode.parent;
+        }
+
+        return pathComponents;
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement)
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+        if (!selectedScopeBarItem || selectedScopeBarItem.id === WebInspector.RenderingFrameTimelineView.DurationFilter.All)
+            return true;
+
+        while (treeElement && !(treeElement.record instanceof WebInspector.RenderingFrameTimelineRecord))
+            treeElement = treeElement.parent;
+
+        console.assert(treeElement, "Cannot apply duration filter: no RenderingFrameTimelineRecord found.");
+        if (!treeElement)
+            return false;
+
+        var minimumDuration = selectedScopeBarItem.id === WebInspector.RenderingFrameTimelineView.DurationFilter.OverOneMillisecond ? 0.001 : 0.015;
+        return treeElement.record.duration > minimumDuration;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+    }
+
+    // Protected
+
+    canShowContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement)
+            return !!treeElement.profileNode.sourceCodeLocation;
+        return super.canShowContentViewForTreeElement(treeElement);
+    }
+
+    showContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement) {
+            if (treeElement.profileNode.sourceCodeLocation)
+                WebInspector.showOriginalOrFormattedSourceCodeLocation(treeElement.profileNode.sourceCodeLocation);
+            return;
+        }
+
+        super.showContentViewForTreeElement(treeElement);
+    }
+
+    treeElementDeselected(treeElement)
+    {
+        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(treeElement);
+        if (!dataGridNode)
+            return;
+
+        dataGridNode.deselect();
+    }
+
+    treeElementSelected(treeElement, selectedByUser)
+    {
+        if (this._dataGrid.shouldIgnoreSelectionEvent())
+            return;
+
+        super.treeElementSelected(treeElement, selectedByUser);
+    }
+
+    treeElementPathComponentSelected(event)
+    {
+        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
+        if (!dataGridNode)
+            return;
+        dataGridNode.revealAndSelect();
+    }
+
+    dataGridNodeForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement)
+            return new WebInspector.ProfileNodeDataGridNode(treeElement.profileNode, this.zeroTime, this.startTime, this.endTime);
+        return null;
+    }
+
+    layout()
+    {
+        this._processPendingRecords();
+    }
+
+    // Private
+
+    _processPendingRecords()
+    {
+        if (!this._pendingRecords.length)
+            return;
+
+        for (var renderingFrameTimelineRecord of this._pendingRecords) {
+            console.assert(renderingFrameTimelineRecord instanceof WebInspector.RenderingFrameTimelineRecord);
+
+            var treeElement = new WebInspector.TimelineRecordTreeElement(renderingFrameTimelineRecord);
+            var dataGridNode = new WebInspector.RenderingFrameTimelineDataGridNode(renderingFrameTimelineRecord, this.zeroTime);
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+
+            var stack = [{children: renderingFrameTimelineRecord.children, parentTreeElement: treeElement, index: 0}];
+            while (stack.length) {
+                var entry = stack.lastValue;
+                if (entry.index >= entry.children.length) {
+                    stack.pop();
+                    continue;
+                }
+
+                var childRecord = entry.children[entry.index];
+                var childTreeElement = null;
+                if (childRecord.type === WebInspector.TimelineRecord.Type.Layout) {
+                    childTreeElement = new WebInspector.TimelineRecordTreeElement(childRecord, WebInspector.SourceCodeLocation.NameStyle.Short);
+                    if (childRecord.width && childRecord.height) {
+                        let subtitle = document.createElement("span");
+                        subtitle.textContent = WebInspector.UIString("%d \u2A09 %d").format(childRecord.width, childRecord.height);
+                        childTreeElement.subtitle = subtitle;
+                    }
+                    var layoutDataGridNode = new WebInspector.LayoutTimelineDataGridNode(childRecord, this.zeroTime);
+
+                    this._dataGrid.addRowInSortOrder(childTreeElement, layoutDataGridNode, entry.parentTreeElement);
+                } else if (childRecord.type === WebInspector.TimelineRecord.Type.Script) {
+                    var rootNodes = [];
+                    if (childRecord.profile) {
+                        // FIXME: Support using the bottom-up tree once it is implemented.
+                        rootNodes = childRecord.profile.topDownRootNodes;
+                    }
+
+                    childTreeElement = new WebInspector.TimelineRecordTreeElement(childRecord, WebInspector.SourceCodeLocation.NameStyle.Short, rootNodes.length);
+                    var scriptDataGridNode = new WebInspector.ScriptTimelineDataGridNode(childRecord, this.zeroTime);
+
+                    this._dataGrid.addRowInSortOrder(childTreeElement, scriptDataGridNode, entry.parentTreeElement);
+
+                    for (var profileNode of rootNodes) {
+                        var profileNodeTreeElement = new WebInspector.ProfileNodeTreeElement(profileNode, this);
+                        var profileNodeDataGridNode = new WebInspector.ProfileNodeDataGridNode(profileNode, this.zeroTime, this.startTime, this.endTime);
+                        this._dataGrid.addRowInSortOrder(profileNodeTreeElement, profileNodeDataGridNode, childTreeElement);
+                    }
+                }
+
+                if (childTreeElement && childRecord.children.length)
+                    stack.push({children: childRecord.children, parentTreeElement: childTreeElement, index: 0});
+                ++entry.index;
+            }
+        }
+
+        this._pendingRecords = [];
+    }
+
+    _renderingFrameTimelineRecordAdded(event)
+    {
+        var renderingFrameTimelineRecord = event.data.record;
+        console.assert(renderingFrameTimelineRecord instanceof WebInspector.RenderingFrameTimelineRecord);
+        console.assert(renderingFrameTimelineRecord.children.length, "Missing child records for rendering frame.");
+
+        this._pendingRecords.push(renderingFrameTimelineRecord);
+
+        this.needsLayout();
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    _scopeBarSelectionDidChange(event)
+    {
+        this.timelineSidebarPanel.updateFilter();
+    }
+};
+
+WebInspector.RenderingFrameTimelineView.DurationFilter = {
+    All: "rendering-frame-timeline-view-duration-filter-all",
+    OverOneMillisecond: "rendering-frame-timeline-view-duration-filter-over-1-ms",
+    OverFifteenMilliseconds: "rendering-frame-timeline-view-duration-filter-over-15-ms"
+};
+
diff --git a/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.css
new file mode 100644
index 000000000..b1443e8d8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.css
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+.toolbar .dashboard.replay {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    text-align: center;
+    text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
+    color: hsl(0, 0%, 23%);
+    padding: 0 5px;
+}
+
+.toolbar .dashboard.replay div.navigation-bar {
+    border-bottom: none !important;
+}
+
+.toolbar .dashboard.replay .item.button > .glyph {
+    /* ButtonNavigationItem is not aware of alternate button sizes, so override here. */
+    width: 16px !important;
+    height: 16px !important;
+}
+
+.toolbar.label-only .dashboard.replay .item.button > .glyph {
+    /* The default styles here will try to elide buttons in label-only mode. */
+    display: flex !important;
+
+    /* ButtonNavigationItem is not aware of alternate button sizes, so override here. */
+    width: 14px !important;
+    height: 14px !important;
+}
+
diff --git a/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.js b/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.js
new file mode 100644
index 000000000..598b57d81
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ReplayDashboardView.js
@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2014 University of Washington. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ReplayDashboardView = class ReplayDashboardView extends WebInspector.DashboardView
+{
+    constructor(representedObject)
+    {
+        super(representedObject, "replay");
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.element.appendChild(this._navigationBar.element);
+
+        this._captureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-dashboard-capture", WebInspector.UIString("Start Recording"), WebInspector.UIString("Stop Recording"), "Images/ReplayRecordingButton.svg", 16, 16);
+        this._captureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._captureButtonItemClicked, this);
+        this._captureButtonItem.hidden = true;
+        this._navigationBar.addNavigationItem(this._captureButtonItem);
+
+        this._replayButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-dashboard-replay", WebInspector.UIString("Start Playback"), WebInspector.UIString("Pause Playback"), "Images/ReplayPlayButton.svg", "Images/ReplayPauseButton.svg", 16, 16);
+        this._replayButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayButtonItemClicked, this);
+        this._replayButtonItem.hidden = true;
+        this._navigationBar.addNavigationItem(this._replayButtonItem);
+
+        // Add events required to track capture and replay state.
+        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
+        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
+        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackStarted, this._playbackStarted, this);
+        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackPaused, this._playbackPaused, this);
+        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.PlaybackFinished, this._playbackFinished, this);
+
+        // Manually initialize style classes by querying current replay state.
+        if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Capturing)
+            this._captureStarted();
+        else if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
+            this._captureStopped();
+        // ReplayManager.sessionState must be Replaying.
+        else if (WebInspector.replayManager.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching)
+            this._playbackStarted();
+        // ReplayManager.sessionState must be Unloaded or Loaded, so execution is paused.
+        else
+            this._playbackPaused();
+    }
+
+    // Private
+
+    _captureButtonItemClicked()
+    {
+        if (WebInspector.replayManager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing)
+            WebInspector.replayManager.startCapturing();
+        else
+            WebInspector.replayManager.stopCapturing();
+    }
+
+    _replayButtonItemClicked(event)
+    {
+        console.assert(WebInspector.replayManager.sessionState !== WebInspector.ReplayManager.SessionState.Capturing, "Tried to start replaying while SessionState is Capturing!");
+
+        if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Inactive)
+            WebInspector.replayManager.replayToCompletion();
+        else if (WebInspector.replayManager.segmentState === WebInspector.ReplayManager.SegmentState.Dispatching)
+            WebInspector.replayManager.pausePlayback();
+        else
+            WebInspector.replayManager.replayToCompletion();
+    }
+
+    _captureStarted()
+    {
+        this._captureButtonItem.hidden = false;
+        this._captureButtonItem.activated = true;
+        this._replayButtonItem.hidden = true;
+    }
+
+    _captureStopped()
+    {
+        this._captureButtonItem.activated = false;
+        this._captureButtonItem.hidden = true;
+        this._replayButtonItem.hidden = false;
+    }
+
+    _playbackStarted()
+    {
+        this._replayButtonItem.toggled = true;
+    }
+
+    _playbackPaused()
+    {
+        this._replayButtonItem.toggled = false;
+    }
+
+    _playbackFinished()
+    {
+        this._replayButtonItem.toggled = false;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/Resizer.css b/Source/WebInspectorUI/UserInterface/Views/Resizer.css
new file mode 100644
index 000000000..e468b0f95
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Resizer.css
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2015 University of Washington.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.resizer {
+    position: absolute;
+    z-index: var(--z-index-resizer);
+}
+
+.resizer.vertical-rule {
+    top: 0;
+    bottom: 0;
+    width: 5px;
+
+    cursor: col-resize;
+}
+
+.resizer.horizontal-rule {
+    left: 0;
+    right: 0;
+    height: 5px;
+
+    cursor: row-resize;
+}
+
+.glass-pane-for-drag {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    opacity: 0;
+    z-index: var(--z-index-glass-pane-for-drag);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/Resizer.js b/Source/WebInspectorUI/UserInterface/Views/Resizer.js
new file mode 100644
index 000000000..076a7c9dd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Resizer.js
@@ -0,0 +1,158 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 University of Washington.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Resizer = class Resizer extends WebInspector.Object
+{
+    constructor(ruleOrientation, delegate)
+    {
+        console.assert(delegate);
+
+        super();
+
+        this._delegate = delegate;
+        this._orientation = ruleOrientation;
+        this._element = document.createElement("div");
+        this._element.classList.add("resizer");
+
+        if (this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal)
+            this._element.classList.add("horizontal-rule");
+        else if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
+            this._element.classList.add("vertical-rule");
+
+        this._element.addEventListener("mousedown", this._resizerMouseDown.bind(this), false);
+        this._resizerMouseMovedEventListener = this._resizerMouseMoved.bind(this);
+        this._resizerMouseUpEventListener = this._resizerMouseUp.bind(this);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get orientation()
+    {
+        return this._orientation;
+    }
+
+    get initialPosition()
+    {
+        return this._resizerMouseDownPosition || NaN;
+    }
+
+    // Private
+
+    _currentPosition()
+    {
+        if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
+            return event.pageX;
+        if (this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal)
+            return event.pageY;
+
+        console.assert(false, "Should not be reached!");
+    }
+
+    _resizerMouseDown(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        this._resizerMouseDownPosition = this._currentPosition();
+
+        var delegateRequestedAbort = false;
+        if (typeof this._delegate.resizerDragStarted === "function")
+            delegateRequestedAbort = this._delegate.resizerDragStarted(this, event.target);
+
+        if (delegateRequestedAbort) {
+            delete this._resizerMouseDownPosition;
+            return;
+        }
+
+        if (this._orientation === WebInspector.Resizer.RuleOrientation.Vertical)
+            document.body.style.cursor = "col-resize";
+        else {
+            console.assert(this._orientation === WebInspector.Resizer.RuleOrientation.Horizontal);
+            document.body.style.cursor = "row-resize";
+        }
+
+        // Register these listeners on the document so we can track the mouse if it leaves the resizer.
+        document.addEventListener("mousemove", this._resizerMouseMovedEventListener, false);
+        document.addEventListener("mouseup", this._resizerMouseUpEventListener, false);
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        // Install a global "glass pane" which prevents cursor from changing during the drag interaction.
+        // The cursor could change when hovering over links, text, or other elements with cursor cues.
+        // FIXME: when Pointer Events support is available this could be implemented by drawing the cursor ourselves.
+        if (WebInspector._elementDraggingGlassPane)
+            WebInspector._elementDraggingGlassPane.remove();
+
+        var glassPaneElement = document.createElement("div");
+        glassPaneElement.className = "glass-pane-for-drag";
+        document.body.appendChild(glassPaneElement);
+        WebInspector._elementDraggingGlassPane = glassPaneElement;
+    }
+
+    _resizerMouseMoved(event)
+    {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (typeof this._delegate.resizerDragging === "function")
+            this._delegate.resizerDragging(this, this._resizerMouseDownPosition - this._currentPosition());
+    }
+
+    _resizerMouseUp(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        document.body.style.removeProperty("cursor");
+
+        if (WebInspector._elementDraggingGlassPane) {
+            WebInspector._elementDraggingGlassPane.remove();
+            delete WebInspector._elementDraggingGlassPane;
+        }
+
+        document.removeEventListener("mousemove", this._resizerMouseMovedEventListener, false);
+        document.removeEventListener("mouseup", this._resizerMouseUpEventListener, false);
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (typeof this._delegate.resizerDragEnded === "function")
+            this._delegate.resizerDragEnded(this);
+
+        delete this._resizerMouseDownPosition;
+    }
+};
+
+WebInspector.Resizer.RuleOrientation = {
+    Horizontal: Symbol("resizer-rule-orientation-horizontal"),
+    Vertical: Symbol("resizer-rule-orientation-vertical"),
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceClusterContentView.js b/Source/WebInspectorUI/UserInterface/Views/ResourceClusterContentView.js
new file mode 100644
index 000000000..4265fee4e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceClusterContentView.js
@@ -0,0 +1,269 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceClusterContentView = class ResourceClusterContentView extends WebInspector.ClusterContentView
+{
+    constructor(resource)
+    {
+        super(resource);
+
+        this._resource = resource;
+        this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._resourceTypeDidChange, this);
+        this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._resourceLoadingDidFinish, this);
+
+        function createPathComponent(displayName, className, identifier)
+        {
+            var pathComponent = new WebInspector.HierarchicalPathComponent(displayName, className, identifier, false, true);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+            return pathComponent;
+        }
+
+        this._requestPathComponent = createPathComponent.call(this, WebInspector.UIString("Request"), WebInspector.ResourceClusterContentView.RequestIconStyleClassName, WebInspector.ResourceClusterContentView.RequestIdentifier);
+        this._responsePathComponent = createPathComponent.call(this, WebInspector.UIString("Response"), WebInspector.ResourceClusterContentView.ResponseIconStyleClassName, WebInspector.ResourceClusterContentView.ResponseIdentifier);
+
+        this._requestPathComponent.nextSibling = this._responsePathComponent;
+        this._responsePathComponent.previousSibling = this._requestPathComponent;
+
+        this._currentContentViewSetting = new WebInspector.Setting("resource-current-view-" + this._resource.url.hash, WebInspector.ResourceClusterContentView.ResponseIdentifier);
+    }
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    get responseContentView()
+    {
+        if (this._responseContentView)
+            return this._responseContentView;
+
+        switch (this._resource.type) {
+        case WebInspector.Resource.Type.Document:
+        case WebInspector.Resource.Type.Script:
+        case WebInspector.Resource.Type.Stylesheet:
+        case WebInspector.Resource.Type.XHR:
+            this._responseContentView = new WebInspector.TextResourceContentView(this._resource);
+            break;
+
+        case WebInspector.Resource.Type.Image:
+            this._responseContentView = new WebInspector.ImageResourceContentView(this._resource);
+            break;
+
+        case WebInspector.Resource.Type.Font:
+            this._responseContentView = new WebInspector.FontResourceContentView(this._resource);
+            break;
+
+        default:
+            this._responseContentView = new WebInspector.GenericResourceContentView(this._resource);
+            break;
+        }
+
+        return this._responseContentView;
+    }
+
+    get requestContentView()
+    {
+        if (!this._canShowRequestContentView())
+            return null;
+
+        if (this._requestContentView)
+            return this._requestContentView;
+
+        this._requestContentView = new WebInspector.TextContentView(this._resource.requestData || "", this._resource.requestDataContentType);
+
+        return this._requestContentView;
+    }
+
+    get selectionPathComponents()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView)
+            return [];
+
+        if (!this._canShowRequestContentView())
+            return currentContentView.selectionPathComponents;
+
+        // Append the current view's path components to the path component representing the current view.
+        var components = [this._pathComponentForContentView(currentContentView)];
+        return components.concat(currentContentView.selectionPathComponents);
+    }
+
+    shown()
+    {
+        super.shown();
+
+        if (this._shownInitialContent)
+            return;
+
+        this._showContentViewForIdentifier(this._currentContentViewSetting.value);
+    }
+
+    closed()
+    {
+        super.closed();
+
+        this._shownInitialContent = false;
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie[WebInspector.ResourceClusterContentView.ContentViewIdentifierCookieKey] = this._currentContentViewSetting.value;
+    }
+
+    restoreFromCookie(cookie)
+    {
+        var contentView = this._showContentViewForIdentifier(cookie[WebInspector.ResourceClusterContentView.ContentViewIdentifierCookieKey]);
+        if (typeof contentView.revealPosition === "function" && "lineNumber" in cookie && "columnNumber" in cookie)
+            contentView.revealPosition(new WebInspector.SourceCodePosition(cookie.lineNumber, cookie.columnNumber));
+    }
+
+    showRequest()
+    {
+        this._shownInitialContent = true;
+
+        return this._showContentViewForIdentifier(WebInspector.ResourceClusterContentView.RequestIdentifier);
+    }
+
+    showResponse(positionToReveal, textRangeToSelect, forceUnformatted)
+    {
+        this._shownInitialContent = true;
+
+        if (!this._resource.finished) {
+            this._positionToReveal = positionToReveal;
+            this._textRangeToSelect = textRangeToSelect;
+            this._forceUnformatted = forceUnformatted;
+        }
+
+        var responseContentView = this._showContentViewForIdentifier(WebInspector.ResourceClusterContentView.ResponseIdentifier);
+        if (typeof responseContentView.revealPosition === "function")
+            responseContentView.revealPosition(positionToReveal, textRangeToSelect, forceUnformatted);
+        return responseContentView;
+    }
+
+    // Private
+
+    _canShowRequestContentView()
+    {
+        var requestData = this._resource.requestData;
+        if (!requestData)
+            return false;
+
+        var requestDataContentType = this._resource.requestDataContentType;
+        if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i))
+            return false;
+
+        return true;
+    }
+
+    _pathComponentForContentView(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._requestContentView)
+            return this._requestPathComponent;
+        if (contentView === this._responseContentView)
+            return this._responsePathComponent;
+        console.error("Unknown contentView.");
+        return null;
+    }
+
+    _identifierForContentView(contentView)
+    {
+        console.assert(contentView);
+        if (!contentView)
+            return null;
+        if (contentView === this._requestContentView)
+            return WebInspector.ResourceClusterContentView.RequestIdentifier;
+        if (contentView === this._responseContentView)
+            return WebInspector.ResourceClusterContentView.ResponseIdentifier;
+        console.error("Unknown contentView.");
+        return null;
+    }
+
+    _showContentViewForIdentifier(identifier)
+    {
+        var contentViewToShow = null;
+
+        switch (identifier) {
+        case WebInspector.ResourceClusterContentView.RequestIdentifier:
+            contentViewToShow = this._canShowRequestContentView() ? this.requestContentView : null;
+            break;
+        case WebInspector.ResourceClusterContentView.ResponseIdentifier:
+            contentViewToShow = this.responseContentView;
+            break;
+        }
+
+        if (!contentViewToShow)
+            contentViewToShow = this.responseContentView;
+
+        console.assert(contentViewToShow);
+
+        this._currentContentViewSetting.value = this._identifierForContentView(contentViewToShow);
+
+        return this.contentViewContainer.showContentView(contentViewToShow);
+    }
+
+    _pathComponentSelected(event)
+    {
+        this._showContentViewForIdentifier(event.data.pathComponent.representedObject);
+    }
+
+    _resourceTypeDidChange(event)
+    {
+        // Since resource views are based on the type, we need to make a new content view and tell the container to replace this
+        // content view with the new one. Make a new ResourceContentView which will use the new resource type to make the correct
+        // concrete ResourceContentView subclass.
+
+        var currentResponseContentView = this._responseContentView;
+        if (!currentResponseContentView)
+            return;
+
+        delete this._responseContentView;
+
+        this.contentViewContainer.replaceContentView(currentResponseContentView, this.responseContentView);
+    }
+
+    _resourceLoadingDidFinish(event)
+    {
+        if ("_positionToReveal" in this) {
+            if (this._contentViewContainer.currentContentView === this._responseContentView)
+                this._responseContentView.revealPosition(this._positionToReveal, this._textRangeToSelect, this._forceUnformatted);
+
+            delete this._positionToReveal;
+            delete this._textRangeToSelect;
+            delete this._forceUnformatted;
+        }
+    }
+};
+
+WebInspector.ResourceClusterContentView.ContentViewIdentifierCookieKey = "resource-cluster-content-view-identifier";
+
+WebInspector.ResourceClusterContentView.RequestIconStyleClassName = "request-icon";
+WebInspector.ResourceClusterContentView.ResponseIconStyleClassName = "response-icon";
+WebInspector.ResourceClusterContentView.RequestIdentifier = "request";
+WebInspector.ResourceClusterContentView.ResponseIdentifier = "response";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js b/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js
new file mode 100644
index 000000000..9f83b1a2e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceContentView.js
@@ -0,0 +1,134 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceContentView = class ResourceContentView extends WebInspector.ContentView
+{
+    constructor(resource, styleClassName)
+    {
+        console.assert(resource instanceof WebInspector.Resource, resource);
+        console.assert(typeof styleClassName === "string");
+
+        super(resource);
+
+        this._resource = resource;
+
+        this.element.classList.add(styleClassName, "resource");
+
+        // Append a spinner while waiting for contentAvailable. The subclasses are responsible for removing
+        // the spinner before showing the resource content.
+        var spinner = new WebInspector.IndeterminateProgressSpinner;
+        this.element.appendChild(spinner.element);
+
+        this.element.addEventListener("click", this._mouseWasClicked.bind(this), false);
+
+        // Request content last so the spinner will always be removed in case the content is immediately available.
+        resource.requestContent().then(this._contentAvailable.bind(this)).catch(this._protocolError.bind(this));
+
+        if (!this.managesOwnIssues) {
+            WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
+
+            var issues = WebInspector.issueManager.issuesForSourceCode(resource);
+            for (var i = 0; i < issues.length; ++i)
+                this.addIssue(issues[i]);
+        }
+    }
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    contentAvailable(content, base64Encoded)
+    {
+        // Implemented by subclasses.
+    }
+
+    addIssue(issue)
+    {
+        // This generically shows only the last issue, subclasses can override for better handling.
+        this.element.removeChildren();
+        this.element.appendChild(WebInspector.createMessageTextView(issue.text, issue.level === WebInspector.IssueMessage.Level.Error));
+    }
+
+    closed()
+    {
+        if (!this.managesOwnIssues)
+            WebInspector.issueManager.removeEventListener(null, null, this);
+    }
+
+    // Private
+
+    _contentAvailable(parameters)
+    {
+        if (parameters.error) {
+            this._contentError(parameters.error);
+            return;
+        }
+
+        // Content is ready to show, call the public method now.
+        console.assert(!this._hasContent());
+        console.assert(parameters.sourceCode === this._resource);
+        this.contentAvailable(parameters.sourceCode.content, parameters.base64Encoded);
+    }
+
+    _contentError(error)
+    {
+        if (this._hasContent())
+            return;
+
+        this.element.removeChildren();
+        this.element.appendChild(WebInspector.createMessageTextView(error, true));
+    }
+
+    _protocolError(error)
+    {
+        this._contentError(WebInspector.UIString("An error occurred trying to load the resource."));
+    }
+
+    _hasContent()
+    {
+        return !this.element.querySelector(".indeterminate-progress-spinner");
+    }
+
+    _issueWasAdded(event)
+    {
+        console.assert(!this.managesOwnIssues);
+
+        var issue = event.data.issue;
+
+        // FIXME: Check more than just the issue URL (the document could have multiple resources with the same URL).
+        if (issue.url !== this.resource.url)
+            return;
+
+        this.addIssue(issue);
+    }
+
+    _mouseWasClicked(event)
+    {
+        WebInspector.handlePossibleLinkClick(event, this.resource.parentFrame);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
new file mode 100644
index 000000000..3c4824850
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceDetailsSidebarPanel.js
@@ -0,0 +1,498 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceDetailsSidebarPanel = class ResourceDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
+{
+    constructor()
+    {
+        super("resource-details", WebInspector.UIString("Resource"), WebInspector.UIString("Resource"));
+
+        this.element.classList.add("resource");
+
+        this._resource = null;
+
+        this._typeMIMETypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("MIME Type"));
+        this._typeResourceTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Resource Type"));
+
+        this._typeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Type"));
+        this._typeSection.groups = [new WebInspector.DetailsSectionGroup([this._typeMIMETypeRow, this._typeResourceTypeRow])];
+
+        this._locationFullURLRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Full URL"));
+        this._locationSchemeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Scheme"));
+        this._locationHostRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Host"));
+        this._locationPortRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Port"));
+        this._locationPathRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Path"));
+        this._locationQueryStringRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Query String"));
+        this._locationFragmentRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Fragment"));
+        this._locationFilenameRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Filename"));
+        this._initiatorRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Initiator"));
+        this._initiatedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Initiated"));
+
+        var firstGroup = [this._locationFullURLRow];
+        var secondGroup = [this._locationSchemeRow, this._locationHostRow, this._locationPortRow, this._locationPathRow,
+            this._locationQueryStringRow, this._locationFragmentRow, this._locationFilenameRow];
+        var thirdGroup = [this._initiatorRow, this._initiatedRow];
+
+        this._fullURLGroup = new WebInspector.DetailsSectionGroup(firstGroup);
+        this._locationURLComponentsGroup = new WebInspector.DetailsSectionGroup(secondGroup);
+        this._relatedResourcesGroup = new WebInspector.DetailsSectionGroup(thirdGroup);
+
+        this._locationSection = new WebInspector.DetailsSection("resource-location", WebInspector.UIString("Location"), [this._fullURLGroup, this._locationURLComponentsGroup, this._relatedResourcesGroup]);
+
+        this._queryParametersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Query Parameters"));
+        this._queryParametersSection = new WebInspector.DetailsSection("resource-query-parameters", WebInspector.UIString("Query Parameters"));
+        this._queryParametersSection.groups = [new WebInspector.DetailsSectionGroup([this._queryParametersRow])];
+
+        this._requestDataSection = new WebInspector.DetailsSection("resource-request-data", WebInspector.UIString("Request Data"));
+
+        this._requestMethodRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Method"));
+        this._cachedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Cached"));
+
+        this._statusTextRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Status"));
+        this._statusCodeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Code"));
+
+        this._encodedSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Encoded"));
+        this._decodedSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Decoded"));
+        this._transferSizeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Transferred"));
+
+        this._compressedRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Compressed"));
+        this._compressionRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Compression"));
+
+        var requestGroup = new WebInspector.DetailsSectionGroup([this._requestMethodRow, this._cachedRow]);
+        var statusGroup = new WebInspector.DetailsSectionGroup([this._statusTextRow, this._statusCodeRow]);
+        var sizeGroup = new WebInspector.DetailsSectionGroup([this._encodedSizeRow, this._decodedSizeRow, this._transferSizeRow]);
+        var compressionGroup = new WebInspector.DetailsSectionGroup([this._compressedRow, this._compressionRow]);
+
+        this._requestAndResponseSection = new WebInspector.DetailsSection("resource-request-response", WebInspector.UIString("Request & Response"), [requestGroup, statusGroup, sizeGroup, compressionGroup]);
+
+        this._requestHeadersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Request Headers"));
+        this._requestHeadersSection = new WebInspector.DetailsSection("resource-request-headers", WebInspector.UIString("Request Headers"));
+        this._requestHeadersSection.groups = [new WebInspector.DetailsSectionGroup([this._requestHeadersRow])];
+
+        this._responseHeadersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Response Headers"));
+        this._responseHeadersSection = new WebInspector.DetailsSection("resource-response-headers", WebInspector.UIString("Response Headers"));
+        this._responseHeadersSection.groups = [new WebInspector.DetailsSectionGroup([this._responseHeadersRow])];
+
+        // Rows for the "Image Size" section.
+        this._imageWidthRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Width"));
+        this._imageHeightRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Height"));
+
+        // "Image Size" section where we display intrinsic metrics for image resources.
+        this._imageSizeSection = new WebInspector.DetailsSection("resource-type", WebInspector.UIString("Image Size"));
+        this._imageSizeSection.groups = [new WebInspector.DetailsSectionGroup([this._imageWidthRow, this._imageHeightRow])];
+
+        this.contentView.element.appendChild(this._typeSection.element);
+        this.contentView.element.appendChild(this._locationSection.element);
+        this.contentView.element.appendChild(this._requestAndResponseSection.element);
+        this.contentView.element.appendChild(this._requestHeadersSection.element);
+        this.contentView.element.appendChild(this._responseHeadersSection.element);
+    }
+
+    // Public
+
+    inspect(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var resourceToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.Resource to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (objects[i] instanceof WebInspector.Resource) {
+                resourceToInspect = objects[i];
+                break;
+            }
+
+            if (objects[i] instanceof WebInspector.Frame) {
+                resourceToInspect = objects[i].mainResource;
+                break;
+            }
+        }
+
+        this.resource = resourceToInspect;
+
+        return !!this._resource;
+    }
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    set resource(resource)
+    {
+        if (resource === this._resource)
+            return;
+
+        if (this._resource) {
+            this._resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._refreshURL, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.MIMETypeDidChange, this._refreshMIMEType, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._refreshResourceType, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.RequestHeadersDidChange, this._refreshRequestHeaders, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.ResponseReceived, this._refreshRequestAndResponse, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.CacheStatusDidChange, this._refreshRequestAndResponse, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.SizeDidChange, this._refreshDecodedSize, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._refreshTransferSize, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.InitiatedResourcesDidChange, this._refreshRelatedResourcesSection, this);
+        }
+
+        this._resource = resource;
+
+        if (this._resource) {
+            this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._refreshURL, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.MIMETypeDidChange, this._refreshMIMEType, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._refreshResourceType, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.RequestHeadersDidChange, this._refreshRequestHeaders, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.ResponseReceived, this._refreshRequestAndResponse, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.CacheStatusDidChange, this._refreshRequestAndResponse, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._refreshDecodedSize, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._refreshTransferSize, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.InitiatedResourcesDidChange, this._refreshRelatedResourcesSection, this);
+        }
+
+        this.needsRefresh();
+    }
+
+    refresh()
+    {
+        if (!this._resource)
+            return;
+
+        this._refreshURL();
+        this._refreshMIMEType();
+        this._refreshResourceType();
+        this._refreshRequestAndResponse();
+        this._refreshDecodedSize();
+        this._refreshTransferSize();
+        this._refreshRequestHeaders();
+        this._refreshImageSizeSection();
+        this._refreshRequestDataSection();
+        this._refreshRelatedResourcesSection();
+    }
+
+    // Private
+
+    _refreshURL()
+    {
+        if (!this._resource)
+            return;
+
+        this._locationFullURLRow.value = this._resource.url.insertWordBreakCharacters();
+
+        var urlComponents = this._resource.urlComponents;
+        if (urlComponents.scheme) {
+            this._locationSection.groups = [this._fullURLGroup, this._locationURLComponentsGroup, this._relatedResourcesGroup];
+
+            this._locationSchemeRow.value = urlComponents.scheme ? urlComponents.scheme : null;
+            this._locationHostRow.value = urlComponents.host ? urlComponents.host : null;
+            this._locationPortRow.value = urlComponents.port ? urlComponents.port : null;
+            this._locationPathRow.value = urlComponents.path ? urlComponents.path.insertWordBreakCharacters() : null;
+            this._locationQueryStringRow.value = urlComponents.queryString ? urlComponents.queryString.insertWordBreakCharacters() : null;
+            this._locationFragmentRow.value = urlComponents.fragment ? urlComponents.fragment.insertWordBreakCharacters() : null;
+            this._locationFilenameRow.value = urlComponents.lastPathComponent ? urlComponents.lastPathComponent.insertWordBreakCharacters() : null;
+        } else {
+            this._locationSection.groups = [this._fullURLGroup, this._relatedResourcesGroup];
+        }
+
+        if (urlComponents.queryString) {
+            // Ensure the "Query Parameters" section is displayed, right after the "Request & Response" section.
+            this.contentView.element.insertBefore(this._queryParametersSection.element, this._requestAndResponseSection.element.nextSibling);
+
+            this._queryParametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(urlComponents.queryString, true));
+        } else {
+            // Hide the "Query Parameters" section if we don't have a query string.
+            var queryParametersSectionElement = this._queryParametersSection.element;
+            if (queryParametersSectionElement.parentNode)
+                queryParametersSectionElement.parentNode.removeChild(queryParametersSectionElement);
+        }
+    }
+
+    _refreshRelatedResourcesSection()
+    {
+        // Hide the section if we don't have anything to show.
+        let groups = this._locationSection.groups;
+        let isSectionVisible = groups.includes(this._relatedResourcesGroup);
+        if (!this._resource.initiatorSourceCodeLocation && !this._resource.initiatedResources.length) {
+            if (isSectionVisible) {
+                groups.remove(this._relatedResourcesGroup);
+                this._locationSection.groups = groups;
+            }
+            return;
+        }
+
+        if (!isSectionVisible) {
+            groups.push(this._relatedResourcesGroup);
+            this._locationSection.groups = groups;
+        }
+
+        let initiatorLocation = this._resource.initiatorSourceCodeLocation;
+        this._initiatorRow.value = initiatorLocation ? WebInspector.createSourceCodeLocationLink(initiatorLocation, true) : null;
+
+        let initiatedResources = this._resource.initiatedResources;
+        if (initiatedResources.length) {
+            let resourceLinkContainer = document.createElement("div");
+            for (let resource of initiatedResources)
+                resourceLinkContainer.appendChild(WebInspector.createResourceLink(resource));
+
+            this._initiatedRow.value = resourceLinkContainer;
+        } else
+            this._initiatedRow.value = null;
+    }
+
+    _refreshResourceType()
+    {
+        if (!this._resource)
+            return;
+
+        this._typeResourceTypeRow.value = WebInspector.Resource.displayNameForType(this._resource.type);
+    }
+
+    _refreshMIMEType()
+    {
+        if (!this._resource)
+            return;
+
+        this._typeMIMETypeRow.value = this._resource.mimeType;
+    }
+
+    _refreshRequestAndResponse()
+    {
+        var resource = this._resource;
+        if (!resource)
+            return;
+
+        // If we don't have a value, we set an em-dash to keep the row from hiding.
+        // This keeps the UI from shifting around as data comes in.
+
+        this._requestMethodRow.value = resource.requestMethod || emDash;
+
+        this._cachedRow.value = resource.cached ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+
+        this._statusCodeRow.value = resource.statusCode || emDash;
+        this._statusTextRow.value = resource.statusText || emDash;
+
+        this._refreshResponseHeaders();
+        this._refreshCompressed();
+    }
+
+    _valueForSize(size)
+    {
+        // If we don't have a value, we set an em-dash to keep the row from hiding.
+        // This keeps the UI from shifting around as data comes in.
+        return size > 0 ? Number.bytesToString(size) : emDash;
+    }
+
+    _refreshCompressed()
+    {
+        this._compressedRow.value = this._resource.compressed ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+        this._compressionRow.value = this._resource.compressed ? WebInspector.UIString("%.2f\u00d7").format(this._resource.size / this._resource.encodedSize) : null;
+    }
+
+    _refreshDecodedSize()
+    {
+        if (!this._resource)
+            return;
+
+        this._encodedSizeRow.value = this._valueForSize(this._resource.encodedSize);
+        this._decodedSizeRow.value = this._valueForSize(this._resource.size);
+
+        this._refreshCompressed();
+    }
+
+    _refreshTransferSize()
+    {
+        if (!this._resource)
+            return;
+
+        this._encodedSizeRow.value = this._valueForSize(this._resource.encodedSize);
+        this._transferSizeRow.value = this._valueForSize(this._resource.transferSize);
+
+        this._refreshCompressed();
+    }
+
+    _refreshRequestHeaders()
+    {
+        if (!this._resource)
+            return;
+
+        this._requestHeadersRow.dataGrid = this._createNameValueDataGrid(this._resource.requestHeaders);
+    }
+
+    _refreshResponseHeaders()
+    {
+        if (!this._resource)
+            return;
+
+        this._responseHeadersRow.dataGrid = this._createNameValueDataGrid(this._resource.responseHeaders);
+    }
+
+    _createNameValueDataGrid(data)
+    {
+        if (!data || data instanceof Array ? !data.length : isEmptyObject(data))
+            return null;
+
+        var dataGrid = new WebInspector.DataGrid({
+            name: {title: WebInspector.UIString("Name"), width: "30%", sortable: true},
+            value: {title: WebInspector.UIString("Value"), sortable: true}
+        });
+
+        function addDataGridNode(nodeValue)
+        {
+            console.assert(typeof nodeValue.name === "string");
+            console.assert(!nodeValue.value || typeof nodeValue.value === "string");
+
+            var node = new WebInspector.DataGridNode({name: nodeValue.name, value: nodeValue.value || ""}, false);
+            dataGrid.appendChild(node);
+        }
+
+        if (data instanceof Array) {
+            for (var i = 0; i < data.length; ++i)
+                addDataGridNode(data[i]);
+        } else {
+            for (var name in data)
+                addDataGridNode({name, value: data[name] || ""});
+        }
+
+        dataGrid.addEventListener(WebInspector.DataGrid.Event.SortChanged, sortDataGrid, this);
+
+        function sortDataGrid()
+        {
+            var sortColumnIdentifier = dataGrid.sortColumnIdentifier;
+
+            function comparator(a, b)
+            {
+                var item1 = a.data[sortColumnIdentifier];
+                var item2 = b.data[sortColumnIdentifier];
+                return item1.localeCompare(item2);
+            }
+
+            dataGrid.sortNodes(comparator);
+        }
+
+        return dataGrid;
+    }
+
+    _refreshImageSizeSection()
+    {
+        var resource = this._resource;
+
+        if (!resource)
+            return;
+
+        // Hide the section if we're not dealing with an image or if the load failed.
+        if (resource.type !== WebInspector.Resource.Type.Image || resource.failed) {
+            var imageSectionElement = this._imageSizeSection.element;
+            if (imageSectionElement.parentNode)
+                this.contentView.element.removeChild(imageSectionElement);
+            return;
+        }
+
+        // Ensure the section is displayed, right before the "Location" section.
+        this.contentView.element.insertBefore(this._imageSizeSection.element, this._locationSection.element);
+
+        // Get the metrics for this resource and fill in the metrics rows with that information.
+        resource.getImageSize(function(size) {
+            this._imageWidthRow.value = WebInspector.UIString("%fpx").format(size.width);
+            this._imageHeightRow.value = WebInspector.UIString("%fpx").format(size.height);
+        }.bind(this));
+    }
+
+    _goToRequestDataClicked()
+    {
+        WebInspector.showResourceRequest(this._resource);
+    }
+
+    _refreshRequestDataSection()
+    {
+        var resource = this._resource;
+
+        if (!resource)
+            return;
+
+        // Hide the section if we're not dealing with a request with data.
+        var requestData = resource.requestData;
+        if (!requestData) {
+            this._requestDataSection.element.remove();
+            return;
+        }
+
+        // Ensure the section is displayed, right before the "Request Headers" section.
+        this.contentView.element.insertBefore(this._requestDataSection.element, this._requestHeadersSection.element);
+
+        var requestDataContentType = resource.requestDataContentType || "";
+        if (requestDataContentType && requestDataContentType.match(/^application\/x-www-form-urlencoded\s*(;.*)?$/i)) {
+            // Simple form data that should be parsable like a query string.
+            var parametersRow = new WebInspector.DetailsSectionDataGridRow(null, WebInspector.UIString("No Parameters"));
+            parametersRow.dataGrid = this._createNameValueDataGrid(parseQueryString(requestData, true));
+
+            this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup([parametersRow])];
+            return;
+        }
+
+        // Not simple form data, so we can really only show the size and type here.
+        // FIXME: Add a go-to arrow here to show the data in the content browser.
+
+        var mimeTypeComponents = parseMIMEType(requestDataContentType);
+
+        var mimeType = mimeTypeComponents.type;
+        var boundary = mimeTypeComponents.boundary;
+        var encoding = mimeTypeComponents.encoding;
+
+        var rows = [];
+
+        var mimeTypeRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("MIME Type"));
+        mimeTypeRow.value = mimeType;
+        rows.push(mimeTypeRow);
+
+        if (boundary) {
+            var boundryRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Boundary"));
+            boundryRow.value = boundary;
+            rows.push(boundryRow);
+        }
+
+        if (encoding) {
+            var encodingRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Encoding"));
+            encodingRow.value = encoding;
+            rows.push(encodingRow);
+        }
+
+        var sizeValue = Number.bytesToString(requestData.length);
+
+        var dataValue = document.createDocumentFragment();
+
+        dataValue.append(sizeValue);
+
+        var goToButton = dataValue.appendChild(WebInspector.createGoToArrowButton());
+        goToButton.addEventListener("click", this._goToRequestDataClicked.bind(this));
+
+        var dataRow = new WebInspector.DetailsSectionSimpleRow(WebInspector.UIString("Data"));
+        dataRow.value = dataValue;
+        rows.push(dataRow);
+
+        this._requestDataSection.groups = [new WebInspector.DetailsSectionGroup(rows)];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css b/Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css
new file mode 100644
index 000000000..f3e22ed0d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.resource-icon .icon {
+    content: -webkit-image-set(url(../Images/DocumentGeneric.png) 1x, url(../Images/DocumentGeneric@2x.png) 2x);
+}
+
+.resource-icon.resource-type-document .icon {
+    content: -webkit-image-set(url(../Images/DocumentMarkup.png) 1x, url(../Images/DocumentMarkup@2x.png) 2x);
+}
+
+.resource-icon.resource-type-image .icon {
+    content: -webkit-image-set(url(../Images/DocumentImage.png) 1x, url(../Images/DocumentImage@2x.png) 2x);
+}
+
+.resource-icon.resource-type-font .icon {
+    content: -webkit-image-set(url(../Images/DocumentFont.png) 1x, url(../Images/DocumentFont@2x.png) 2x);
+}
+
+.resource-icon.resource-type-stylesheet .icon {
+    content: -webkit-image-set(url(../Images/DocumentCSS.png) 1x, url(../Images/DocumentCSS@2x.png) 2x);
+}
+
+.resource-icon.resource-type-script .icon {
+    content: -webkit-image-set(url(../Images/DocumentJS.png) 1x, url(../Images/DocumentJS@2x.png) 2x);
+}
+
+.anonymous-script-icon .icon {
+    content: -webkit-image-set(url(../Images/ClippingJS.png) 1x, url(../Images/ClippingJS@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon .icon {
+    content: -webkit-image-set(url(../Images/ClippingGeneric.png) 1x, url(../Images/ClippingGeneric@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon.resource-type-stylesheet .icon {
+    content: -webkit-image-set(url(../Images/ClippingCSS.png) 1x, url(../Images/ClippingCSS@2x.png) 2x);
+}
+
+.source-map-resource.resource-icon.resource-type-script .icon {
+    content: -webkit-image-set(url(../Images/ClippingJS.png) 1x, url(../Images/ClippingJS@2x.png) 2x);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css
new file mode 100644
index 000000000..d7481af37
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation.resource > :matches(.content, .empty-content-placeholder) {
+    top: 29px;
+}
+
+.sidebar > .panel.navigation.resource > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
new file mode 100644
index 000000000..428f23712
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceSidebarPanel.js
@@ -0,0 +1,392 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceSidebarPanel = class ResourceSidebarPanel extends WebInspector.NavigationSidebarPanel
+{
+    constructor(contentBrowser)
+    {
+        super("resource", WebInspector.UIString("Resources"), true);
+
+        this.contentBrowser = contentBrowser;
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter Resource List");
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.addSubview(this._navigationBar);
+
+        var scopeItemPrefix = "resource-sidebar-";
+        var scopeBarItems = [];
+
+        scopeBarItems.push(new WebInspector.ScopeBarItem(scopeItemPrefix + "type-all", WebInspector.UIString("All Resources"), true));
+
+        for (var key in WebInspector.Resource.Type) {
+            var value = WebInspector.Resource.Type[key];
+            var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + value, WebInspector.Resource.displayNameForType(value, true));
+            scopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] = value;
+            scopeBarItems.push(scopeBarItem);
+        }
+
+        this._scopeBar = new WebInspector.ScopeBar("resource-sidebar-scope-bar", scopeBarItems, scopeBarItems[0], true);
+        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+        this._navigationBar.addNavigationItem(this._scopeBar);
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        WebInspector.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, this._scriptWasAdded, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptRemoved, this._scriptWasRemoved, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptsCleared, this._scriptsCleared, this);
+
+        WebInspector.notifications.addEventListener(WebInspector.Notification.ExtraDomainsActivated, this._extraDomainsActivated, this);
+
+        this.contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+        this.contentTreeOutline.includeSourceMapResourceChildren = true;
+
+        if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript) {
+            this.contentTreeOutline.disclosureButtons = false;
+            WebInspector.SourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, () => { this.contentTreeOutline.disclosureButtons = true }, this);
+        }
+
+        if (WebInspector.frameResourceManager.mainFrame)
+            this._mainFrameMainResourceDidChange(WebInspector.frameResourceManager.mainFrame);
+    }
+
+    // Public
+
+    get minimumWidth()
+    {
+        return this._navigationBar.minimumWidth;
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.Frame.removeEventListener(null, null, this);
+        WebInspector.frameResourceManager.removeEventListener(null, null, this);
+        WebInspector.debuggerManager.removeEventListener(null, null, this);
+        WebInspector.notifications.removeEventListener(null, null, this);
+    }
+
+    showDefaultContentView()
+    {
+        if (WebInspector.frameResourceManager.mainFrame) {
+            this.contentBrowser.showContentViewForRepresentedObject(WebInspector.frameResourceManager.mainFrame);
+            return;
+        }
+
+        var firstTreeElement = this.contentTreeOutline.children[0];
+        if (firstTreeElement)
+            this.showDefaultContentViewForTreeElement(firstTreeElement);
+    }
+
+    treeElementForRepresentedObject(representedObject)
+    {
+        // A custom implementation is needed for this since the frames are populated lazily.
+
+        if (!this._mainFrameTreeElement && (representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Frame)) {
+            // All resources are under the main frame, so we need to return early if we don't have the main frame yet.
+            return null;
+        }
+
+        // The Frame is used as the representedObject instead of the main resource in our tree.
+        if (representedObject instanceof WebInspector.Resource && representedObject.parentFrame && representedObject.parentFrame.mainResource === representedObject)
+            representedObject = representedObject.parentFrame;
+
+        function isAncestor(ancestor, resourceOrFrame)
+        {
+            // SourceMapResources are descendants of another SourceCode object.
+            if (resourceOrFrame instanceof WebInspector.SourceMapResource) {
+                if (resourceOrFrame.sourceMap.originalSourceCode === ancestor)
+                    return true;
+
+                // Not a direct ancestor, so check the ancestors of the parent SourceCode object.
+                resourceOrFrame = resourceOrFrame.sourceMap.originalSourceCode;
+            }
+
+            var currentFrame = resourceOrFrame.parentFrame;
+            while (currentFrame) {
+                if (currentFrame === ancestor)
+                    return true;
+                currentFrame = currentFrame.parentFrame;
+            }
+
+            return false;
+        }
+
+        function getParent(resourceOrFrame)
+        {
+            // SourceMapResources are descendants of another SourceCode object.
+            if (resourceOrFrame instanceof WebInspector.SourceMapResource)
+                return resourceOrFrame.sourceMap.originalSourceCode;
+            return resourceOrFrame.parentFrame;
+        }
+
+        var treeElement = this.contentTreeOutline.findTreeElement(representedObject, isAncestor, getParent);
+        if (treeElement)
+            return treeElement;
+
+        // Only special case Script objects.
+        if (!(representedObject instanceof WebInspector.Script)) {
+            console.error("Didn't find a TreeElement for representedObject", representedObject);
+            return null;
+        }
+
+        // If the Script has a URL we should have found it earlier.
+        if (representedObject.url) {
+            console.error("Didn't find a ScriptTreeElement for a Script with a URL.");
+            return null;
+        }
+
+        // Since the Script does not have a URL we consider it an 'anonymous' script. These scripts happen from calls to
+        // window.eval() or browser features like Auto Fill and Reader. They are not normally added to the sidebar, but since
+        // we have a ScriptContentView asking for the tree element we will make a ScriptTreeElement on demand and add it.
+
+        if (!this._anonymousScriptsFolderTreeElement)
+            this._anonymousScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Anonymous Scripts"));
+
+        if (!this._anonymousScriptsFolderTreeElement.parent) {
+            var index = insertionIndexForObjectInListSortedByFunction(this._anonymousScriptsFolderTreeElement, this.contentTreeOutline.children, this._compareTreeElements);
+            this.contentTreeOutline.insertChild(this._anonymousScriptsFolderTreeElement, index);
+        }
+
+        var scriptTreeElement = new WebInspector.ScriptTreeElement(representedObject);
+        this._anonymousScriptsFolderTreeElement.appendChild(scriptTreeElement);
+
+        return scriptTreeElement;
+    }
+
+    // Protected
+
+    hasCustomFilters()
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+        return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement, flags)
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+
+        // Show everything if there is no selection or "All Resources" is selected (the exclusive item).
+        if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
+            return true;
+
+        // Folders are hidden on the first pass, but visible childen under the folder will force the folder visible again.
+        if (treeElement instanceof WebInspector.FolderTreeElement)
+            return false;
+
+        function match()
+        {
+            if (treeElement instanceof WebInspector.FrameTreeElement)
+                return selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] === WebInspector.Resource.Type.Document;
+
+            if (treeElement instanceof WebInspector.ScriptTreeElement)
+                return selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol] === WebInspector.Resource.Type.Script;
+
+            console.assert(treeElement instanceof WebInspector.ResourceTreeElement, "Unknown treeElement", treeElement);
+            if (!(treeElement instanceof WebInspector.ResourceTreeElement))
+                return false;
+
+            return treeElement.resource.type === selectedScopeBarItem[WebInspector.ResourceSidebarPanel.ResourceTypeSymbol];
+        }
+
+        var matched = match();
+        if (matched)
+            flags.expandTreeElement = true;
+        return matched;
+    }
+
+    // Private
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this._mainFrameMainResourceDidChange(event.target);
+    }
+
+    _mainFrameDidChange(event)
+    {
+        this._mainFrameMainResourceDidChange(WebInspector.frameResourceManager.mainFrame);
+    }
+
+    _mainFrameMainResourceDidChange(mainFrame)
+    {
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+
+        if (this._mainFrameTreeElement) {
+            this.contentTreeOutline.removeChild(this._mainFrameTreeElement);
+            this._mainFrameTreeElement = null;
+        }
+
+        if (!mainFrame)
+            return;
+
+        this._mainFrameTreeElement = new WebInspector.FrameTreeElement(mainFrame);
+        this.contentTreeOutline.insertChild(this._mainFrameTreeElement, 0);
+
+        function delayedWork()
+        {
+            if (!this.contentTreeOutline.selectedTreeElement) {
+                var currentContentView = this.contentBrowser.currentContentView;
+                var treeElement = currentContentView ? this.treeElementForRepresentedObject(currentContentView.representedObject) : null;
+                if (!treeElement)
+                    treeElement = this._mainFrameTreeElement;
+                this.showDefaultContentViewForTreeElement(treeElement);
+            }
+        }
+
+        // Cookie restoration will attempt to re-select the resource we were showing.
+        // Give it time to do that before selecting the main frame resource.
+        setTimeout(delayedWork.bind(this));
+    }
+
+    _scriptWasAdded(event)
+    {
+        var script = event.data.script;
+
+        // We don't add scripts without URLs here. Those scripts can quickly clutter the interface and
+        // are usually more transient. They will get added if/when they need to be shown in a content view.
+        if (!script.url)
+            return;
+
+        // If the script URL matches a resource we can assume it is part of that resource and does not need added.
+        if (script.resource)
+            return;
+
+        var insertIntoTopLevel = false;
+
+        if (script.injected) {
+            if (!this._extensionScriptsFolderTreeElement)
+                this._extensionScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extension Scripts"));
+            var parentFolderTreeElement = this._extensionScriptsFolderTreeElement;
+        } else {
+            if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript && !WebInspector.hasExtraDomains)
+                insertIntoTopLevel = true;
+            else {
+                if (!this._extraScriptsFolderTreeElement)
+                    this._extraScriptsFolderTreeElement = new WebInspector.FolderTreeElement(WebInspector.UIString("Extra Scripts"));
+                var parentFolderTreeElement = this._extraScriptsFolderTreeElement;
+            }
+        }
+
+        var scriptTreeElement = new WebInspector.ScriptTreeElement(script);
+
+        if (insertIntoTopLevel) {
+            var index = insertionIndexForObjectInListSortedByFunction(scriptTreeElement, this.contentTreeOutline.children, this._compareTreeElements);
+            this.contentTreeOutline.insertChild(scriptTreeElement, index);
+        } else {
+            if (!parentFolderTreeElement.parent) {
+                var index = insertionIndexForObjectInListSortedByFunction(parentFolderTreeElement, this.contentTreeOutline.children, this._compareTreeElements);
+                this.contentTreeOutline.insertChild(parentFolderTreeElement, index);
+            }
+
+            parentFolderTreeElement.appendChild(scriptTreeElement);
+        }
+    }
+
+    _scriptWasRemoved(event)
+    {
+        let script = event.data.script;
+        let scriptTreeElement = this.contentTreeOutline.getCachedTreeElement(script);
+        if (!scriptTreeElement)
+            return;
+
+        scriptTreeElement.parent.removeChild(scriptTreeElement);
+    }
+
+    _scriptsCleared(event)
+    {
+        const suppressOnDeselect = true;
+        const suppressSelectSibling = true;
+        
+        if (this._extensionScriptsFolderTreeElement) {
+            if (this._extensionScriptsFolderTreeElement.parent)
+                this._extensionScriptsFolderTreeElement.parent.removeChild(this._extensionScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
+            this._extensionScriptsFolderTreeElement = null;
+        }
+
+        if (this._extraScriptsFolderTreeElement) {
+            if (this._extraScriptsFolderTreeElement.parent)
+                this._extraScriptsFolderTreeElement.parent.removeChild(this._extraScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
+            this._extraScriptsFolderTreeElement = null;
+        }
+
+        if (this._anonymousScriptsFolderTreeElement) {
+            if (this._anonymousScriptsFolderTreeElement.parent)
+                this._anonymousScriptsFolderTreeElement.parent.removeChild(this._anonymousScriptsFolderTreeElement, suppressOnDeselect, suppressSelectSibling);
+            this._anonymousScriptsFolderTreeElement = null;
+        }
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement || treeElement instanceof WebInspector.FolderTreeElement)
+            return;
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement
+            || treeElement instanceof WebInspector.ScriptTreeElement
+            || treeElement instanceof WebInspector.ContentFlowTreeElement) {
+            WebInspector.showRepresentedObject(treeElement.representedObject);
+            return;
+        }
+
+        console.error("Unknown tree element", treeElement);
+    }
+
+    _compareTreeElements(a, b)
+    {
+        // Always sort the main frame element first.
+        if (a instanceof WebInspector.FrameTreeElement)
+            return -1;
+        if (b instanceof WebInspector.FrameTreeElement)
+            return 1;
+
+        console.assert(a.mainTitle);
+        console.assert(b.mainTitle);
+
+        return (a.mainTitle || "").localeCompare(b.mainTitle || "");
+    }
+
+    _extraDomainsActivated()
+    {
+        if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript)
+            this.contentTreeOutline.disclosureButtons = true;
+    }
+
+    _scopeBarSelectionDidChange(event)
+    {
+        this.updateFilter();
+    }
+};
+
+WebInspector.ResourceSidebarPanel.ResourceTypeSymbol = Symbol("resource-type");
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js
new file mode 100644
index 000000000..0c6df8cbd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNode.js
@@ -0,0 +1,157 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimelineDataGridNode = class ResourceTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(resourceTimelineRecord, graphOnly, graphDataSource)
+    {
+        super(graphOnly, graphDataSource);
+
+        this._resource = resourceTimelineRecord.resource;
+        this._record = resourceTimelineRecord;
+
+        this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, graphOnly ? this._timelineRecordUpdated : this._needsRefresh, this);
+
+        if (!graphOnly) {
+            this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._needsRefresh, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._needsRefresh, this);
+            this._resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._needsRefresh, this);
+        }
+    }
+
+    // Public
+
+    get records()
+    {
+        return [this._record];
+    }
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    get data()
+    {
+        if (this._cachedData)
+            return this._cachedData;
+
+        var resource = this._resource;
+        var data = {};
+
+        if (!this._graphOnly) {
+            var zeroTime = this.graphDataSource ? this.graphDataSource.zeroTime : 0;
+
+            data.domain = WebInspector.displayNameForHost(resource.urlComponents.host);
+            data.scheme = resource.urlComponents.scheme ? resource.urlComponents.scheme.toUpperCase() : "";
+            data.method = resource.requestMethod;
+            data.type = resource.type;
+            data.statusCode = resource.statusCode;
+            data.cached = resource.cached;
+            data.size = resource.size;
+            data.transferSize = resource.transferSize;
+            data.requestSent = resource.requestSentTimestamp - zeroTime;
+            data.duration = resource.receiveDuration;
+            data.latency = resource.latency;
+        }
+
+        data.graph = this._record.startTime;
+
+        this._cachedData = data;
+        return data;
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var resource = this._resource;
+
+        if (resource.failed || resource.canceled || resource.statusCode >= 400)
+            cell.classList.add("error");
+
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "type":
+            return WebInspector.Resource.displayNameForType(value);
+
+        case "statusCode":
+            cell.title = resource.statusText || "";
+            return value || emDash;
+
+        case "cached":
+            return value ? WebInspector.UIString("Yes") : WebInspector.UIString("No");
+
+        case "domain":
+            return value || emDash;
+
+        case "size":
+        case "transferSize":
+            return isNaN(value) ? emDash : Number.bytesToString(value, true);
+
+        case "requestSent":
+        case "latency":
+        case "duration":
+            return isNaN(value) ? emDash : Number.secondsToString(value, true);
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+
+    refresh()
+    {
+        if (this._scheduledRefreshIdentifier) {
+            cancelAnimationFrame(this._scheduledRefreshIdentifier);
+            this._scheduledRefreshIdentifier = undefined;
+        }
+
+        this._cachedData = null;
+
+        super.refresh();
+    }
+
+    // Private
+
+    _needsRefresh()
+    {
+        if (this.dataGrid instanceof WebInspector.TimelineDataGrid) {
+            this.dataGrid.dataGridNodeNeedsRefresh(this);
+            return;
+        }
+
+        if (this._scheduledRefreshIdentifier)
+            return;
+
+        this._scheduledRefreshIdentifier = requestAnimationFrame(this.refresh.bind(this));
+    }
+
+    _timelineRecordUpdated(event)
+    {
+        if (this.isRecordVisible(this._record))
+            this.needsGraphRefresh();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNodePathComponent.js b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNodePathComponent.js
new file mode 100644
index 000000000..7107906a3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTimelineDataGridNodePathComponent.js
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTimelineDataGridNodePathComponent = class ResourceTimelineDataGridNodePathComponent extends WebInspector.HierarchicalPathComponent
+{
+    constructor(resourceTimelineDataGridNode)
+    {
+        var resource = resourceTimelineDataGridNode.record.resource;
+        var classNames = [WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type];
+
+        super(resourceTimelineDataGridNode.data.name, classNames, resource);
+
+        this._resourceTimelineDataGridNode = resourceTimelineDataGridNode;
+    }
+
+    // Public
+
+    get resourceTimelineDataGridNode()
+    {
+        return this._resourceTimelineDataGridNode;
+    }
+
+    get previousSibling()
+    {
+        if (!this._resourceTimelineDataGridNode.previousSibling)
+            return null;
+        return new WebInspector.ResourceTimelineDataGridNodePathComponent(this._resourceTimelineDataGridNode.previousSibling);
+    }
+
+    get nextSibling()
+    {
+        if (!this._resourceTimelineDataGridNode.nextSibling)
+            return null;
+        return new WebInspector.ResourceTimelineDataGridNodePathComponent(this._resourceTimelineDataGridNode.nextSibling);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css
new file mode 100644
index 000000000..f89b87764
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item.resource.failed {
+    color: hsl(0, 86%, 47%) !important;
+}
+
+.item.resource.failed .subtitle {
+    color: hsla(0, 86%, 47%, 0.7) !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js
new file mode 100644
index 000000000..a5232bd98
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js
@@ -0,0 +1,192 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourceTreeElement = class ResourceTreeElement extends WebInspector.SourceCodeTreeElement
+{
+    constructor(resource, representedObject)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+
+        super(resource, ["resource", WebInspector.ResourceTreeElement.ResourceIconStyleClassName, resource.type], "", "", representedObject || resource, false);
+
+        this._updateResource(resource);
+    }
+
+    // Static
+
+    static compareResourceTreeElements(a, b)
+    {
+        // Compare by type first to keep resources grouped by type when not sorted into folders.
+        var comparisonResult = a.resource.type.localeCompare(b.resource.type);
+        if (comparisonResult !== 0)
+            return comparisonResult;
+
+        // Compare async resource types by their first timestamp so they are in chronological order.
+        if (a.resource.type === WebInspector.Resource.Type.XHR || a.resource.type === WebInspector.Resource.Type.WebSocket)
+            return a.resource.firstTimestamp - b.resource.firstTimestamp || 0;
+
+        // Compare by subtitle when the types are the same. The subtitle is used to show the
+        // domain of the resource. This causes resources to group by domain. If the resource
+        // is on the same domain as the frame it will have an empty subtitle. This is good
+        // because empty string sorts first, so those will appear before external resources.
+        comparisonResult = a.subtitle.localeCompare(b.subtitle);
+        if (comparisonResult !== 0)
+            return comparisonResult;
+
+        // Compare by title when the subtitles are the same.
+        return a.mainTitle.localeCompare(b.mainTitle);
+    }
+
+    static compareFolderAndResourceTreeElements(a, b)
+    {
+        var aIsFolder = a instanceof WebInspector.FolderTreeElement;
+        var bIsFolder = b instanceof WebInspector.FolderTreeElement;
+
+        if (aIsFolder && !bIsFolder)
+            return -1;
+        if (!aIsFolder && bIsFolder)
+            return 1;
+        if (aIsFolder && bIsFolder)
+            return a.mainTitle.localeCompare(b.mainTitle);
+
+        return WebInspector.ResourceTreeElement.compareResourceTreeElements(a, b);
+    }
+
+    // Public
+
+    get resource()
+    {
+        return this._resource;
+    }
+
+    get filterableData()
+    {
+        return {text: [this._resource.url]};
+    }
+
+    ondblclick()
+    {
+        InspectorFrontendHost.openInNewTab(this._resource.url);
+    }
+
+    // Protected (Used by FrameTreeElement)
+
+    _updateResource(resource)
+    {
+        console.assert(resource instanceof WebInspector.Resource);
+
+        // This method is for subclasses like FrameTreeElement who don't use a resource as the representedObject.
+        // This method should only be called once if the representedObject is a resource, since changing the resource
+        // without changing the representedObject is bad. If you need to change the resource, make a new ResourceTreeElement.
+        console.assert(!this._resource || !(this.representedObject instanceof WebInspector.Resource));
+
+        if (this._resource) {
+            this._resource.removeEventListener(WebInspector.Resource.Event.URLDidChange, this._urlDidChange, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.TypeDidChange, this._typeDidChange, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._updateStatus, this);
+            this._resource.removeEventListener(WebInspector.Resource.Event.LoadingDidFail, this._updateStatus, this);
+        }
+
+        this._updateSourceCode(resource);
+
+        this._resource = resource;
+
+        resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._urlDidChange, this);
+        resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._typeDidChange, this);
+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._updateStatus, this);
+        resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._updateStatus, this);
+
+        this._updateTitles();
+        this._updateStatus();
+        this._updateToolTip();
+    }
+
+    // Protected
+
+    _updateTitles()
+    {
+        var frame = this._resource.parentFrame;
+        var isMainResource = this._resource.isMainResource();
+        if (isMainResource && frame) {
+            // When the resource is a main resource, get the host from the current frame's parent frame instead of the current frame.
+            var parentResourceHost = frame.parentFrame ? frame.parentFrame.mainResource.urlComponents.host : null;
+        } else if (frame) {
+            // When the resource is a normal sub-resource, get the host from the current frame's main resource.
+            var parentResourceHost = frame.mainResource.urlComponents.host;
+        }
+
+        var urlComponents = this._resource.urlComponents;
+
+        var oldMainTitle = this.mainTitle;
+        this.mainTitle = WebInspector.displayNameForURL(this._resource.url, urlComponents);
+
+        // Show the host as the subtitle if it is different from the main resource or if this is the main frame's main resource.
+        var subtitle = parentResourceHost !== urlComponents.host || frame.isMainFrame() && isMainResource ? WebInspector.displayNameForHost(urlComponents.host) : null;
+        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
+
+        if (oldMainTitle !== this.mainTitle)
+            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
+    }
+
+    // Private
+
+    _updateStatus()
+    {
+        if (this._resource.failed)
+            this.addClassName(WebInspector.ResourceTreeElement.FailedStyleClassName);
+        else
+            this.removeClassName(WebInspector.ResourceTreeElement.FailedStyleClassName);
+
+        if (this._resource.finished || this._resource.failed) {
+            // Remove the spinner.
+            this.status = "";
+        } else {
+            var spinner = new WebInspector.IndeterminateProgressSpinner;
+            this.status = spinner.element;
+        }
+    }
+
+    _updateToolTip()
+    {
+        this.tooltip = this._resource.displayURL;
+    }
+
+    _urlDidChange(event)
+    {
+        this._updateTitles();
+        this._updateToolTip();
+    }
+
+    _typeDidChange(event)
+    {
+        this.removeClassName(event.data.oldType);
+        this.addClassName(this._resource.type);
+
+        this.callFirstAncestorFunction("descendantResourceTreeElementTypeDidChange", [this, event.data.oldType]);
+    }
+};
+
+WebInspector.ResourceTreeElement.ResourceIconStyleClassName = "resource-icon";
+WebInspector.ResourceTreeElement.FailedStyleClassName = "failed";
diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js
new file mode 100644
index 000000000..c86235fc8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ResourcesTabContentView.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ResourcesTabContentView = class ResourcesTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.ResourcesTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
+
+        // FIXME: Until ContentFlows are moved to the Elements tab, these details sidebar panels need to be included.
+        detailsSidebarPanels = detailsSidebarPanels.concat([WebInspector.domNodeDetailsSidebarPanel, WebInspector.cssStyleDetailsSidebarPanel]);
+        if (WebInspector.layerTreeDetailsSidebarPanel)
+            detailsSidebarPanels.push(WebInspector.layerTreeDetailsSidebarPanel);
+
+        super(identifier || "resources", "resources", tabBarItem, WebInspector.ResourceSidebarPanel, detailsSidebarPanels);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Resources.svg",
+            title: WebInspector.UIString("Resources"),
+        };
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.ResourcesTabContentView.Type;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.Frame
+            || representedObject instanceof WebInspector.Resource
+            || representedObject instanceof WebInspector.Script
+            || representedObject instanceof WebInspector.ContentFlow;
+    }
+};
+
+WebInspector.ResourcesTabContentView.Type = "resources";
diff --git a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
new file mode 100644
index 000000000..5b8f58a0a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.css
@@ -0,0 +1,96 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details.css-style .rules .label {
+    color: hsl(0, 0%, 60%);
+    text-shadow: white 0 1px 0;
+    padding: 0 8px;
+}
+
+.sidebar > .panel.details.css-style .rules .label:first-child {
+    padding-top: 10px;
+}
+
+.sidebar > .panel.details.css-style .rules .label .go-to-link {
+    color: inherit !important;
+}
+
+.sidebar > .panel.details.css-style .rules .label + .style-declaration-section {
+    margin-top: 5px;
+    border-top: 1px solid hsla(0, 0%, 0%, 0.3);
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label {
+    padding-top: 15px;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label:not(.filter-section-non-matching) ~ .label {
+    padding-top: 0;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label {
+    padding-bottom: 5px;
+    border-bottom: 1px solid hsla(0, 0%, 0%, 0.3);
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label:not(.filter-section-non-matching) + .label.filter-matching-label:not(.filter-section-non-matching) {
+    padding-top: 0;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .style-declaration-section:not(.filter-section-non-matching) ~ .label:not(.filter-section-non-matching) {
+    padding-top: 15px;
+}
+
+.sidebar > .panel.details.css-style > .content > .rules:not(.filter-non-matching) > .no-filter-results {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.sidebar > .panel.details.css-style > .content.filter-in-progress > .rules.filter-non-matching > .no-filter-results > .no-filter-results-message {
+    font-size: 13px;
+    color: white;
+    background-color: hsla(0, 0%, 0%, 0.15);
+    text-shadow: hsla(0, 0%, 0%, 0.2) 0 1px 0;
+    box-shadow: inset hsla(0, 0%, 0%, 0.2) 0 1px 0, hsla(0, 0%, 100%, 0.4) 0 1px 0;
+    border-radius: 6px;
+    padding: 5px 15px 6px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .sidebar > .panel.details.css-style > .content.filter-in-progress > .rules .label.filter-matching-label,
+    .no-filter-results-message {
+        border-width: 0.5px !important;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
new file mode 100644
index 000000000..5ebbd1219
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js
@@ -0,0 +1,481 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebInspector.StyleDetailsPanel
+{
+    constructor(delegate)
+    {
+        super(delegate, "rules", "rules", WebInspector.UIString("Styles \u2014 Rules"));
+
+        this._sections = [];
+        this._previousFocusedSection = null;
+        this._ruleMediaAndInherticanceList = [];
+        this._propertyToSelectAndHighlight = null;
+
+        this._emptyFilterResultsElement = document.createElement("div");
+        this._emptyFilterResultsElement.classList.add("no-filter-results");
+
+        this._emptyFilterResultsMessage = document.createElement("div");
+        this._emptyFilterResultsMessage.classList.add("no-filter-results-message");
+        this._emptyFilterResultsMessage.textContent = WebInspector.UIString("No Results Found");
+        this._emptyFilterResultsElement.appendChild(this._emptyFilterResultsMessage);
+
+        this._boundRemoveSectionWithActiveEditor = this._removeSectionWithActiveEditor.bind(this);
+    }
+
+    // Public
+
+    refresh(significantChange)
+    {
+        // We only need to do a rebuild on significant changes. Other changes are handled
+        // by the sections and text editors themselves.
+        if (!significantChange) {
+            super.refresh();
+            return;
+        }
+
+        if (!this._forceSignificantChange) {
+            this._sectionWithActiveEditor = null;
+            for (var section of this._sections) {
+                if (!section.editorActive)
+                    continue;
+
+                this._sectionWithActiveEditor = section;
+                break;
+            }
+
+            if (this._sectionWithActiveEditor) {
+                this._sectionWithActiveEditor.addEventListener(WebInspector.CSSStyleDeclarationSection.Event.Blurred, this._boundRemoveSectionWithActiveEditor);
+                return;
+            }
+        }
+
+        var newSections = [];
+        var newDOMFragment = document.createDocumentFragment();
+
+        var previousMediaList = [];
+        var previousSection = null;
+
+        var pseudoElements = this.nodeStyles.pseudoElements;
+        var pseudoElementsStyle = [];
+        for (var pseudoIdentifier in pseudoElements)
+            pseudoElementsStyle = pseudoElementsStyle.concat(pseudoElements[pseudoIdentifier].orderedStyles);
+
+        var orderedPseudoStyles = uniqueOrderedStyles(pseudoElementsStyle);
+        // Reverse the array to allow ensure that splicing the array will not mess with the order.
+        if (orderedPseudoStyles.length)
+            orderedPseudoStyles.reverse();
+
+        function mediaListsEqual(a, b)
+        {
+            a = a || [];
+            b = b || [];
+
+            if (a.length !== b.length)
+                return false;
+
+            for (var i = 0; i < a.length; ++i) {
+                var aMedia = a[i];
+                var bMedia = b[i];
+
+                if (aMedia.type !== bMedia.type)
+                    return false;
+
+                if (aMedia.text !== bMedia.text)
+                    return false;
+
+                if (!aMedia.sourceCodeLocation && bMedia.sourceCodeLocation)
+                    return false;
+
+                if (aMedia.sourceCodeLocation && !aMedia.sourceCodeLocation.isEqual(bMedia.sourceCodeLocation))
+                    return false;
+            }
+
+            return true;
+        }
+
+        function uniqueOrderedStyles(orderedStyles)
+        {
+            var uniqueStyles = [];
+
+            for (var style of orderedStyles) {
+                var rule = style.ownerRule;
+                if (!rule) {
+                    uniqueStyles.push(style);
+                    continue;
+                }
+
+                var found = false;
+                for (var existingStyle of uniqueStyles) {
+                    if (rule.isEqualTo(existingStyle.ownerRule)) {
+                        found = true;
+                        break;
+                    }
+                }
+                if (!found)
+                    uniqueStyles.push(style);
+            }
+
+            return uniqueStyles;
+        }
+
+        function appendStyleSection(style)
+        {
+            var section = style.__rulesSection;
+            if (section && section.focused && !this._previousFocusedSection)
+                this._previousFocusedSection = section;
+
+            if (!section) {
+                section = new WebInspector.CSSStyleDeclarationSection(this, style);
+                style.__rulesSection = section;
+            } else
+                section.refresh();
+
+            if (style.isInspectorRule() && this._newInspectorRuleSelector === style.selectorText && !style.hasProperties()) {
+                this._previousFocusedSection = section;
+                this._newInspectorRuleSelector = null;
+            }
+
+            // Reset lastInGroup in case the order/grouping changed.
+            section.lastInGroup = false;
+
+            newDOMFragment.appendChild(section.element);
+            newSections.push(section);
+
+            previousSection = section;
+        }
+
+        function insertMediaOrInheritanceLabel(style)
+        {
+            if (previousSection && previousSection.style.type === WebInspector.CSSStyleDeclaration.Type.Inline)
+                previousSection.lastInGroup = true;
+
+            var hasMediaOrInherited = [];
+
+            if (previousSection && previousSection.style.node !== style.node) {
+                previousSection.lastInGroup = true;
+
+                var prefixElement = document.createElement("strong");
+                prefixElement.textContent = WebInspector.UIString("Inherited From: ");
+
+                var inheritedLabel = document.createElement("div");
+                inheritedLabel.className = "label";
+                inheritedLabel.appendChild(prefixElement);
+                inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node));
+                newDOMFragment.appendChild(inheritedLabel);
+
+                hasMediaOrInherited.push(inheritedLabel);
+            }
+
+            // Only include the media list if it is different from the previous media list shown.
+            var currentMediaList = (style.ownerRule && style.ownerRule.mediaList) || [];
+            if (!mediaListsEqual(previousMediaList, currentMediaList)) {
+                previousMediaList = currentMediaList;
+
+                // Break the section group even if the media list is empty. That way the user knows
+                // the previous displayed media list does not apply to the next section.
+                if (previousSection)
+                    previousSection.lastInGroup = true;
+
+                for (var media of currentMediaList) {
+                    var prefixElement = document.createElement("strong");
+                    prefixElement.textContent = WebInspector.UIString("Media: ");
+
+                    var mediaLabel = document.createElement("div");
+                    mediaLabel.className = "label";
+                    mediaLabel.append(prefixElement, media.text);
+
+                    if (media.sourceCodeLocation)
+                        mediaLabel.append(" \u2014 ", WebInspector.createSourceCodeLocationLink(media.sourceCodeLocation, true));
+
+                    newDOMFragment.appendChild(mediaLabel);
+
+                    hasMediaOrInherited.push(mediaLabel);
+                }
+            }
+
+            if (!hasMediaOrInherited.length && style.type !== WebInspector.CSSStyleDeclaration.Type.Inline) {
+                if (previousSection && !previousSection.lastInGroup)
+                    hasMediaOrInherited = this._ruleMediaAndInherticanceList.lastValue;
+                else {
+                    var prefixElement = document.createElement("strong");
+                    prefixElement.textContent = WebInspector.UIString("Media: ");
+
+                    var mediaLabel = document.createElement("div");
+                    mediaLabel.className = "label";
+                    mediaLabel.append(prefixElement, "all");
+
+                    newDOMFragment.appendChild(mediaLabel);
+                    hasMediaOrInherited.push(mediaLabel);
+                }
+            }
+
+            this._ruleMediaAndInherticanceList.push(hasMediaOrInherited);
+        }
+
+        function insertAllMatchingPseudoStyles(force)
+        {
+            if (!orderedPseudoStyles.length)
+                return;
+
+            if (force) {
+                for (var j = orderedPseudoStyles.length - 1; j >= 0; --j) {
+                    var pseudoStyle = orderedPseudoStyles[j];
+                    insertMediaOrInheritanceLabel.call(this, pseudoStyle);
+                    appendStyleSection.call(this, pseudoStyle);
+                }
+                orderedPseudoStyles = [];
+            }
+
+            if (!previousSection)
+                return;
+
+            var ownerRule = previousSection.style.ownerRule;
+            if (!ownerRule)
+                return;
+
+            for (var j = orderedPseudoStyles.length - 1; j >= 0; --j) {
+                var pseudoStyle = orderedPseudoStyles[j];
+                if (!pseudoStyle.ownerRule.selectorIsGreater(ownerRule.mostSpecificSelector))
+                    continue;
+
+                insertMediaOrInheritanceLabel.call(this, pseudoStyle);
+                appendStyleSection.call(this, pseudoStyle);
+                ownerRule = pseudoStyle.ownerRule;
+                orderedPseudoStyles.splice(j, 1);
+            }
+        }
+
+        this._ruleMediaAndInherticanceList = [];
+        var orderedStyles = uniqueOrderedStyles(this.nodeStyles.orderedStyles);
+        for (var style of orderedStyles) {
+            var isUserAgentStyle = style.ownerRule && style.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent;
+            insertAllMatchingPseudoStyles.call(this, isUserAgentStyle || style.inherited);
+
+            insertMediaOrInheritanceLabel.call(this, style);
+            appendStyleSection.call(this, style);
+        }
+
+        // Just in case there are any pseudo-selectors left that haven't been added.
+        insertAllMatchingPseudoStyles.call(this, true);
+
+        if (previousSection)
+            previousSection.lastInGroup = true;
+
+        this.element.removeChildren();
+        this.element.appendChild(newDOMFragment);
+        this.element.appendChild(this._emptyFilterResultsElement);
+
+        this._sections = newSections;
+
+        for (var i = 0; i < this._sections.length; ++i)
+            this._sections[i].updateLayout();
+
+        super.refresh();
+    }
+
+    scrollToSectionAndHighlightProperty(property)
+    {
+        if (!this._visible) {
+            this._propertyToSelectAndHighlight = property;
+            return false;
+        }
+
+        for (var section of this._sections) {
+            if (section.highlightProperty(property))
+                return true;
+        }
+
+        return false;
+    }
+
+    cssStyleDeclarationSectionEditorFocused(focusedSection)
+    {
+        for (let section of this._sections) {
+            if (section !== focusedSection)
+                section.clearSelection();
+        }
+        this._previousFocusedSection = focusedSection;
+    }
+
+    cssStyleDeclarationSectionBlurActiveEditor()
+    {
+        this._previousFocusedSection = null;
+    }
+
+    cssStyleDeclarationSectionEditorNextRule(currentSection)
+    {
+        currentSection.clearSelection();
+
+        var index = this._sections.indexOf(currentSection);
+        this._sections[index < this._sections.length - 1 ? index + 1 : 0].focusRuleSelector();
+    }
+
+    cssStyleDeclarationSectionEditorPreviousRule(currentSection, selectLastProperty) {
+        currentSection.clearSelection();
+
+        if (selectLastProperty || currentSection.selectorLocked) {
+            var index = this._sections.indexOf(currentSection);
+            index = index > 0 ? index - 1 : this._sections.length - 1;
+
+            var section = this._sections[index];
+            while (section.locked) {
+                index = index > 0 ? index - 1 : this._sections.length - 1;
+                section = this._sections[index];
+            }
+
+            section.focus();
+            section.selectLastProperty();
+            return;
+        }
+
+        currentSection.focusRuleSelector(true);
+    }
+
+    filterDidChange(filterBar)
+    {
+        for (var labels of this._ruleMediaAndInherticanceList) {
+            for (var i = 0; i < labels.length; ++i) {
+                labels[i].classList.toggle(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, filterBar.hasActiveFilters());
+
+                if (i === labels.length - 1)
+                    labels[i].classList.toggle("filter-matching-label", filterBar.hasActiveFilters());
+            }
+        }
+
+        var matchFound = !filterBar.hasActiveFilters();
+        for (var i = 0; i < this._sections.length; ++i) {
+            var section = this._sections[i];
+
+            if (section.findMatchingPropertiesAndSelectors(filterBar.filters.text) && filterBar.hasActiveFilters()) {
+                if (this._ruleMediaAndInherticanceList[i].length) {
+                    for (var label of this._ruleMediaAndInherticanceList[i])
+                        label.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
+                } else
+                    section.element.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
+                
+                matchFound = true;
+            }
+        }
+
+        this.element.classList.toggle("filter-non-matching", !matchFound);
+    }
+
+    cssStyleDeclarationSectionFocusNewInspectorRuleWithSelector(selector)
+    {
+        this._newInspectorRuleSelector = selector;
+    }
+
+    newRuleButtonClicked()
+    {
+        if (this.nodeStyles.node.isInShadowTree())
+            return;
+
+        for (let existingRule of this.nodeStyles.rulesForSelector()) {
+            if (this.focusEmptySectionWithStyle(existingRule.style))
+                return;
+        }
+
+        this._newInspectorRuleSelector = this.nodeStyles.node.appropriateSelectorFor(true);
+        this.nodeStyles.addRule(this._newInspectorRuleSelector);
+    }
+
+    sectionForStyle(style)
+    {
+        if (style.__rulesSection)
+            return style.__rulesSection;
+
+        for (let section of this._sections) {
+            if (section.style === style)
+                return section;
+        }
+        return null;
+    }
+
+    focusEmptySectionWithStyle(style)
+    {
+        if (style.hasProperties())
+            return false;
+
+        let section = this.sectionForStyle(style);
+        if (!section)
+            return false;
+
+        section.focus();
+        return true;
+    }
+
+    // Protected
+
+    shown()
+    {
+        super.shown();
+
+        // Associate the style and section objects so they can be reused.
+        // Also update the layout in case we changed widths while hidden.
+        for (var i = 0; i < this._sections.length; ++i) {
+            var section = this._sections[i];
+            section.style.__rulesSection = section;
+            section.updateLayout();
+        }
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        // Disconnect the style and section objects so they have a chance
+        // to release their objects when this panel is not visible.
+        for (var i = 0; i < this._sections.length; ++i)
+            delete this._sections[i].style.__rulesSection;
+    }
+
+    widthDidChange()
+    {
+        for (var i = 0; i < this._sections.length; ++i)
+            this._sections[i].updateLayout();
+    }
+
+    nodeStylesRefreshed(event)
+    {
+        super.nodeStylesRefreshed(event);
+        
+        if (this._propertyToSelectAndHighlight) {
+            this.scrollToSectionAndHighlightProperty(this._propertyToSelectAndHighlight);
+            this._propertyToSelectAndHighlight = null;
+        }
+
+        if (this._previousFocusedSection && this._visible)
+            this._previousFocusedSection.focus();
+    }
+
+    // Private
+
+    _removeSectionWithActiveEditor(event)
+    {
+        this._sectionWithActiveEditor.removeEventListener(WebInspector.CSSStyleDeclarationSection.Event.Blurred, this._boundRemoveSectionWithActiveEditor);
+        this.refresh(true);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
new file mode 100644
index 000000000..fed4ea41f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.css
@@ -0,0 +1,99 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.scope-bar {
+    padding: 0 3px;
+    overflow: hidden;
+}
+
+.scope-bar > li {
+    display: inline-block;
+    margin: 0 2px;
+    padding: 1px 8px 3px;
+    font-size: 11px;
+    line-height: 11px;
+    color: hsl(0, 0%, 18%);
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    text-align: center;
+}
+
+.scope-bar > li.multiple {
+    position: relative;
+}
+
+.scope-bar > li.multiple > select {
+    display: none;
+    opacity: 0;
+
+ /* Positioned so the text in the menu aligns with the content text. */
+    position: absolute;
+    top: -5px;
+    left: -4px;
+    right: 0;
+    bottom: 0;
+}
+
+.scope-bar > li.multiple.selected > select {
+    display: block;
+}
+
+.scope-bar > li.multiple > .arrows {
+    width: 5px;
+    height: 12px;
+    display: inline-block;
+    vertical-align: -2px;
+    margin-left: 6px;
+    margin-top: -1px;
+    margin-bottom: -1px;
+}
+
+.scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows {
+    color: white;
+}
+
+.scope-bar > li:matches(.selected, :active) {
+    transition-duration: 75ms;
+}
+
+.scope-bar > li:hover {
+    color: white;
+    background-color: hsla(212, 92%, 54%, 0.5);
+}
+
+.scope-bar > li.selected {
+    color: white;
+    background-color: hsl(212, 92%, 54%);
+}
+
+.scope-bar > li:active {
+    color: white;
+    background-color: hsla(212, 92%, 54%, 0.55);
+}
+
+.scope-bar > li.selected:active {
+    background-color: hsl(218, 85%, 52%);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js
new file mode 100644
index 000000000..ede6988dc
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBar.js
@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeBar = class ScopeBar extends WebInspector.NavigationItem
+{
+    constructor(identifier, items, defaultItem, shouldGroupNonExclusiveItems)
+    {
+        super(identifier);
+
+        this._element.classList.add("scope-bar");
+
+        this._items = items;
+        this._defaultItem = defaultItem;
+        this._shouldGroupNonExclusiveItems = shouldGroupNonExclusiveItems || false;
+
+        this._minimumWidth = 0;
+
+        this._populate();
+    }
+
+    // Public
+
+    get minimumWidth()
+    {
+        if (!this._minimumWidth) {
+            // If a "display: flex;" element is too small for its contents and
+            // has "flex-wrap: wrap;" set as well, this will cause the contents
+            // to wrap (potentially overflowing), thus preventing a proper
+            // measurement of the width of the element. Removing the "flex-wrap"
+            // property will ensure that the contents are rendered on one line.
+            this.element.style.flexWrap = "initial !important";
+
+            if (this._multipleItem)
+                this._multipleItem.displayWidestItem();
+
+            this._minimumWidth = this.element.realOffsetWidth;
+            this.element.style.flexWrap = null;
+
+            if (this._multipleItem)
+                this._multipleItem.displaySelectedItem();
+        }
+        return this._minimumWidth;
+    }
+
+    get defaultItem()
+    {
+        return this._defaultItem;
+    }
+
+    get items()
+    {
+        return this._items;
+    }
+
+    item(id)
+    {
+        return this._itemsById.get(id);
+    }
+
+    get selectedItems()
+    {
+        return this._items.filter(function(item) {
+            return item.selected;
+        });
+    }
+
+    hasNonDefaultItemSelected()
+    {
+        return this._items.some(function(item) {
+            return item.selected && item !== this._defaultItem;
+        }, this);
+    }
+
+    // Private
+
+    _populate()
+    {
+        this._itemsById = new Map;
+
+        if (this._shouldGroupNonExclusiveItems) {
+            var nonExclusiveItems = [];
+
+            for (var item of this._items) {
+                this._itemsById.set(item.id, item);
+
+                if (item.exclusive)
+                    this._element.appendChild(item.element);
+                else
+                    nonExclusiveItems.push(item);
+
+                item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+            }
+
+            this._multipleItem = new WebInspector.MultipleScopeBarItem(nonExclusiveItems);
+            this._element.appendChild(this._multipleItem.element);
+        } else {
+            for (var item of this._items) {
+                this._itemsById.set(item.id, item);
+                this._element.appendChild(item.element);
+
+                item.addEventListener(WebInspector.ScopeBarItem.Event.SelectionChanged, this._itemSelectionDidChange, this);
+            }
+        }
+
+        if (!this.selectedItems.length && this._defaultItem)
+            this._defaultItem.selected = true;
+
+        this._element.classList.toggle("default-item-selected", this._defaultItem.selected);
+    }
+
+    _itemSelectionDidChange(event)
+    {
+        var sender = event.target;
+        var item;
+
+        // An exclusive item was selected, unselect everything else.
+        if (sender.exclusive && sender.selected) {
+            for (var i = 0; i < this._items.length; ++i) {
+                item = this._items[i];
+                if (item !== sender)
+                    item.selected = false;
+            }
+        } else {
+            var replacesCurrentSelection = this._shouldGroupNonExclusiveItems || !event.data.withModifier;
+            for (var i = 0; i < this._items.length; ++i) {
+                item = this._items[i];
+                if (item.exclusive && item !== sender && sender.selected)
+                    item.selected = false;
+                else if (sender.selected && replacesCurrentSelection && sender !== item)
+                    item.selected = false;
+            }
+        }
+
+        // If nothing is selected anymore, select the default item.
+        if (!this.selectedItems.length && this._defaultItem)
+            this._defaultItem.selected = true;
+
+        this._element.classList.toggle("default-item-selected", this._defaultItem.selected);
+        this.dispatchEventToListeners(WebInspector.ScopeBar.Event.SelectionChanged);
+    }
+};
+
+WebInspector.ScopeBar.Event = {
+    SelectionChanged: "scopebar-selection-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js b/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js
new file mode 100644
index 000000000..aff9e1210
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeBarItem.js
@@ -0,0 +1,101 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeBarItem = class ScopeBarItem extends WebInspector.Object
+{
+    constructor(id, label, exclusive, className)
+    {
+        super();
+
+        this._element = document.createElement("li");
+        this._element.classList.toggle("exclusive", !!exclusive);
+        if (className)
+            this._element.classList.add(className);
+        this._element.textContent = label;
+        this._element.addEventListener("click", this._clicked.bind(this));
+
+        this._id = id;
+        this._label = label;
+        this._exclusive = exclusive;
+
+        this._selectedSetting = new WebInspector.Setting("scopebaritem-" + id, false);
+
+        this._element.classList.toggle("selected", this._selectedSetting.value);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get id()
+    {
+        return this._id;
+    }
+
+    get label()
+    {
+        return this._label;
+    }
+
+    get exclusive()
+    {
+        return this._exclusive;
+    }
+
+    get selected()
+    {
+        return this._selectedSetting.value;
+    }
+
+    set selected(selected)
+    {
+        this.setSelected(selected, false);
+    }
+
+    setSelected(selected, withModifier)
+    {
+        if (this._selectedSetting.value === selected)
+            return;
+
+        this._element.classList.toggle("selected", selected);
+        this._selectedSetting.value = selected;
+
+        this.dispatchEventToListeners(WebInspector.ScopeBarItem.Event.SelectionChanged, {withModifier});
+    }
+
+    // Private
+
+    _clicked(event)
+    {
+        this.setSelected(!this.selected, event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey);
+    }
+};
+
+WebInspector.ScopeBarItem.Event = {
+    SelectionChanged: "scope-bar-item-selection-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css
new file mode 100644
index 000000000..8e5944009
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.css
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.popover .watch-expression {
+    padding: 5px;
+    margin: 2px;
+}
+
+.watch-expression-editor {
+    width: 200px;
+    margin-top: 5px;
+    padding: 4px 0 2px 0;
+    -webkit-appearance: textfield;
+    border: 1px solid hsl(0, 0%, 78%);
+    background: white;
+}
+
+.watch-expression-editor > .CodeMirror {
+    width: calc(100% - 2px);
+    height: auto;
+}
+
+.watch-expression-editor > .CodeMirror-scroll {
+    width: calc(100% - 2px);
+    overflow: hidden;
+}
+
+.scope-chain .details-section > .content > .group > .row.properties:not(.empty) {
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+
+.scope-chain .details-section > .content > .group > .row.properties:not(.empty):last-child {
+    position: relative;
+    top: -2px;
+
+    padding-bottom: 2px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js
new file mode 100644
index 000000000..6e2a3d02f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeChainDetailsSidebarPanel.js
@@ -0,0 +1,547 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeChainDetailsSidebarPanel = class ScopeChainDetailsSidebarPanel extends WebInspector.DetailsSidebarPanel
+{
+    constructor()
+    {
+        super("scope-chain", WebInspector.UIString("Scope Chain"), WebInspector.UIString("Scope Chain"));
+
+        this._callFrame = null;
+
+        this._watchExpressionsSetting = new WebInspector.Setting("watch-expressions", []);
+        this._watchExpressionsSetting.addEventListener(WebInspector.Setting.Event.Changed, this._updateWatchExpressionsNavigationBar, this);
+
+        this._watchExpressionOptionsElement = document.createElement("div");
+        this._watchExpressionOptionsElement.classList.add("options");
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this._watchExpressionOptionsElement.appendChild(this._navigationBar.element);
+
+        let addWatchExpressionButton = new WebInspector.ButtonNavigationItem("add-watch-expression", WebInspector.UIString("Add watch expression"), "Images/Plus13.svg", 13, 13);
+        addWatchExpressionButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._addWatchExpressionButtonClicked, this);
+        this._navigationBar.addNavigationItem(addWatchExpressionButton);
+
+        this._clearAllWatchExpressionButton = new WebInspector.ButtonNavigationItem("clear-watch-expressions", WebInspector.UIString("Clear watch expressions"), "Images/NavigationItemTrash.svg", 14, 14);
+        this._clearAllWatchExpressionButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearAllWatchExpressionsButtonClicked, this);
+        this._navigationBar.addNavigationItem(this._clearAllWatchExpressionButton);
+
+        this._refreshAllWatchExpressionButton = new WebInspector.ButtonNavigationItem("refresh-watch-expressions", WebInspector.UIString("Refresh watch expressions"), "Images/ReloadFull.svg", 13, 13);
+        this._refreshAllWatchExpressionButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._refreshAllWatchExpressionsButtonClicked, this);
+        this._navigationBar.addNavigationItem(this._refreshAllWatchExpressionButton);
+
+        this._watchExpressionsSectionGroup = new WebInspector.DetailsSectionGroup;
+        this._watchExpressionsSection = new WebInspector.DetailsSection("watch-expressions", WebInspector.UIString("Watch Expressions"), [this._watchExpressionsSectionGroup], this._watchExpressionOptionsElement);
+        this.contentView.element.appendChild(this._watchExpressionsSection.element);
+
+        this._updateWatchExpressionsNavigationBar();
+
+        this.needsRefresh();
+
+        // Update on console prompt eval as objects in the scope chain may have changed.
+        WebInspector.runtimeManager.addEventListener(WebInspector.RuntimeManager.Event.DidEvaluate, this._didEvaluateExpression, this);
+
+        // Update watch expressions on navigations.
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+    }
+
+    // Public
+
+    inspect(objects)
+    {
+        // Convert to a single item array if needed.
+        if (!(objects instanceof Array))
+            objects = [objects];
+
+        var callFrameToInspect = null;
+
+        // Iterate over the objects to find a WebInspector.CallFrame to inspect.
+        for (var i = 0; i < objects.length; ++i) {
+            if (!(objects[i] instanceof WebInspector.CallFrame))
+                continue;
+            callFrameToInspect = objects[i];
+            break;
+        }
+
+        this.callFrame = callFrameToInspect;
+
+        return true;
+    }
+
+    get callFrame()
+    {
+        return this._callFrame;
+    }
+
+    set callFrame(callFrame)
+    {
+        if (callFrame === this._callFrame)
+            return;
+
+        this._callFrame = callFrame;
+
+        this.needsRefresh();
+    }
+
+    refresh()
+    {
+        let callFrame = this._callFrame;
+
+        Promise.all([this._generateWatchExpressionsSection(), this._generateCallFramesSection()]).then(function(sections) {
+            let [watchExpressionsSection, callFrameSections] = sections;
+
+            function delayedWork()
+            {
+                // Clear the timeout so we don't update the interface twice.
+                clearTimeout(timeout);
+
+                if (watchExpressionsSection)
+                    this._watchExpressionsSectionGroup.rows = [watchExpressionsSection];
+                else {
+                    let emptyRow = new WebInspector.DetailsSectionRow(WebInspector.UIString("No Watch Expressions"));
+                    this._watchExpressionsSectionGroup.rows = [emptyRow];
+                    emptyRow.showEmptyMessage();
+                }
+
+                this.contentView.element.removeChildren();
+                this.contentView.element.appendChild(this._watchExpressionsSection.element);
+
+                // Bail if the call frame changed while we were waiting for the async response.
+                if (this._callFrame !== callFrame)
+                    return;
+
+                if (!callFrameSections)
+                    return;
+
+                for (let callFrameSection of callFrameSections)
+                    this.contentView.element.appendChild(callFrameSection.element);
+            }
+
+            // We need a timeout in place in case there are long running, pending backend dispatches. This can happen
+            // if the debugger is paused in code that was executed from the console. The console will be waiting for
+            // the result of the execution and without a timeout we would never update the scope variables.
+            let delay = WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.size === 0 ? 50 : 250;
+            let timeout = setTimeout(delayedWork.bind(this), delay);
+
+            // Since ObjectTreeView populates asynchronously, we want to wait to replace the existing content
+            // until after all the pending asynchronous requests are completed. This prevents severe flashing while stepping.
+            InspectorBackend.runAfterPendingDispatches(delayedWork.bind(this));
+        }.bind(this)).catch(function(e) { console.error(e); });
+    }
+
+    _generateCallFramesSection()
+    {
+        let callFrame = this._callFrame;
+        if (!callFrame)
+            return Promise.resolve(null);
+
+        let detailsSections = [];
+        let foundLocalScope = false;
+
+        let sectionCountByType = new Map;
+        for (let type in WebInspector.ScopeChainNode.Type)
+            sectionCountByType.set(WebInspector.ScopeChainNode.Type[type], 0);
+
+        // Scopes list goes from top/local (1) to bottom/global (5)
+        // Call frames list goes from top/local (1) to bottom/global (2)
+        //   [scope1, scope2, scope3, scope4, scope5]
+        //   [CallFrame1, CallFrame2]
+        let scopeChain = callFrame.scopeChain;
+        let callFrames = WebInspector.debuggerManager.callFrames;
+
+        // Group scopes with the call frame containing them.
+        // Creating a map that looks like:
+        //   CallFrame2 => [scope5, scope4]
+        //   CallFrame1 => [scope3, scope2, scope1]
+        let reversedScopeChain = scopeChain.slice().reverse();
+        let callFrameScopes = new Map;
+        let lastLength = 0;
+        for (let i = callFrames.length - 1; i >= 0; --i) {
+            let nextCallFrame = callFrames[i];
+            console.assert(nextCallFrame.scopeChain.length > lastLength);
+            callFrameScopes.set(nextCallFrame, reversedScopeChain.slice(lastLength, nextCallFrame.scopeChain.length));
+            lastLength = nextCallFrame.scopeChain.length;
+            if (nextCallFrame === callFrame) {
+                console.assert(lastLength === scopeChain.length);
+                break;
+            }
+        }
+
+        // Now that we have this map we can merge some of the scopes within an individual
+        // call frame. In particular, function call frames may have multiple top level
+        // closure scopes (one for `var`s one for `let`s) that can be combined to a
+        // single scope of variables.
+        // This modifies the Map, resulting in:
+        //   CallFrame2 => [scope4, scope5]
+        //   CallFrame1 => [scope1, scope2&3]
+        for (let [currentCallFrame, scopes] of callFrameScopes) {
+            let firstClosureScope = null;
+            for (let scope of scopes) {
+                // Reached a non-closure scope. Bail.
+                let isClosureScope = scope.type === WebInspector.ScopeChainNode.Type.Closure;
+                if (!isClosureScope && firstClosureScope)
+                    break;
+
+                // Found first closure scope. Mark it so we can provide the function name later in the UI.
+                if (isClosureScope && !firstClosureScope) {
+                    firstClosureScope = scope;
+                    firstClosureScope[WebInspector.ScopeChainDetailsSidebarPanel.CallFrameBaseClosureScopeSymbol] = true;
+                    continue;
+                }
+
+                // Found 2 sequential top level closure scopes. Merge and mark it so we can provide the function name later in the UI.
+                if (isClosureScope && firstClosureScope) {
+                    let type = currentCallFrame === callFrame ? WebInspector.ScopeChainNode.Type.Local : WebInspector.ScopeChainNode.Type.Closure;
+                    let objects = firstClosureScope.objects.concat(scope.objects);
+                    let merged = new WebInspector.ScopeChainNode(type, objects);
+                    merged[WebInspector.ScopeChainDetailsSidebarPanel.CallFrameBaseClosureScopeSymbol] = true;
+                    console.assert(objects.length === 2);
+
+                    let index = scopes.indexOf(firstClosureScope);
+                    scopes.splice(index, 1); // Remove one of them.
+                    scopes[index] = merged; // Replace the remaining with the merged.
+                    break;
+                }
+            }
+            scopes.reverse();
+        }
+
+        // Now we can walk the list of call frames and their scopes.
+        // We walk in top -> down order:
+        //   CallFrame1 => [scope1, scope2&3]
+        //   CallFrame2 => [scope5, scope4]
+        for (let [call, scopes] of [...callFrameScopes.entries()].reverse()) {
+            for (let scope of scopes) {
+                let title = null;
+                let extraPropertyDescriptor = null;
+                let collapsedByDefault = false;
+
+                let count = sectionCountByType.get(scope.type);
+                sectionCountByType.set(scope.type, ++count);
+
+                switch (scope.type) {
+                    case WebInspector.ScopeChainNode.Type.Local:
+                        foundLocalScope = true;
+                        collapsedByDefault = false;
+                        title = WebInspector.UIString("Local Variables");
+                        if (call.thisObject)
+                            extraPropertyDescriptor = new WebInspector.PropertyDescriptor({name: "this", value: call.thisObject});
+                        break;
+
+                    case WebInspector.ScopeChainNode.Type.Closure:
+                        if (scope[WebInspector.ScopeChainDetailsSidebarPanel.CallFrameBaseClosureScopeSymbol] && call.functionName)
+                            title = WebInspector.UIString("Closure Variables (%s)").format(call.functionName);
+                        else
+                            title = WebInspector.UIString("Closure Variables");
+                        collapsedByDefault = false;
+                        break;
+
+                    case WebInspector.ScopeChainNode.Type.Block:
+                        title = WebInspector.UIString("Block Variables");
+                        collapsedByDefault = false;
+                        break;
+
+                    case WebInspector.ScopeChainNode.Type.Catch:
+                        title = WebInspector.UIString("Catch Variables");
+                        collapsedByDefault = false;
+                        break;
+
+                    case WebInspector.ScopeChainNode.Type.FunctionName:
+                        title = WebInspector.UIString("Function Name Variable");
+                        collapsedByDefault = true;
+                        break;
+
+                    case WebInspector.ScopeChainNode.Type.With:
+                        title = WebInspector.UIString("With Object Properties");
+                        collapsedByDefault = foundLocalScope;
+                        break;
+
+                    case WebInspector.ScopeChainNode.Type.Global:
+                        title = WebInspector.UIString("Global Variables");
+                        collapsedByDefault = true;
+                        break;
+
+                    case WebInspector.ScopeChainNode.Type.GlobalLexicalEnvironment:
+                        title = WebInspector.UIString("Global Lexical Environment");
+                        collapsedByDefault = true;
+                        break;
+                }
+
+                let detailsSectionIdentifier = scope.type + "-" + sectionCountByType.get(scope.type);
+
+                // FIXME: This just puts two ObjectTreeViews next to eachother, but that means
+                // that properties are not nicely sorted between the two separate lists.
+
+                let rows = [];
+                for (let object of scope.objects) {
+                    let scopePropertyPath = WebInspector.PropertyPath.emptyPropertyPathForScope(object);
+                    let objectTree = new WebInspector.ObjectTreeView(object, WebInspector.ObjectTreeView.Mode.Properties, scopePropertyPath);
+
+                    objectTree.showOnlyProperties();
+
+                    if (extraPropertyDescriptor) {
+                        objectTree.appendExtraPropertyDescriptor(extraPropertyDescriptor);
+                        extraPropertyDescriptor = null;
+                    }
+
+                    let treeOutline = objectTree.treeOutline;
+                    treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAdded.bind(this, detailsSectionIdentifier), this);
+                    treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange.bind(this, detailsSectionIdentifier), this);
+
+                    rows.push(new WebInspector.DetailsSectionPropertiesRow(objectTree));
+                }
+
+                let detailsSection = new WebInspector.DetailsSection(detailsSectionIdentifier, title, null, null, collapsedByDefault);
+                detailsSection.groups[0].rows = rows;
+                detailsSections.push(detailsSection);
+            }
+        }
+
+        return Promise.resolve(detailsSections);
+    }
+
+    _generateWatchExpressionsSection()
+    {
+        let watchExpressions = this._watchExpressionsSetting.value;
+        if (!watchExpressions.length) {
+            if (this._usedWatchExpressionsObjectGroup) {
+                this._usedWatchExpressionsObjectGroup = false;
+                RuntimeAgent.releaseObjectGroup(WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName);
+            }
+            return Promise.resolve(null);
+        }
+
+        RuntimeAgent.releaseObjectGroup(WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName);
+        this._usedWatchExpressionsObjectGroup = true;
+
+        let watchExpressionsRemoteObject = WebInspector.RemoteObject.createFakeRemoteObject();
+        let fakePropertyPath = WebInspector.PropertyPath.emptyPropertyPathForScope(watchExpressionsRemoteObject);
+        let objectTree = new WebInspector.ObjectTreeView(watchExpressionsRemoteObject, WebInspector.ObjectTreeView.Mode.Properties, fakePropertyPath);
+        objectTree.showOnlyProperties();
+
+        let treeOutline = objectTree.treeOutline;
+        const watchExpressionSectionIdentifier = "watch-expressions";
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAdded.bind(this, watchExpressionSectionIdentifier), this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange.bind(this, watchExpressionSectionIdentifier), this);
+        treeOutline.objectTreeElementAddContextMenuItems = this._objectTreeElementAddContextMenuItems.bind(this);
+
+        let promises = [];
+        for (let expression of watchExpressions) {
+            promises.push(new Promise(function(resolve, reject) {
+                WebInspector.runtimeManager.evaluateInInspectedWindow(expression, WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName, false, true, false, true, false, function(object, wasThrown) {
+                    let propertyDescriptor = new WebInspector.PropertyDescriptor({name: expression, value: object}, undefined, undefined, wasThrown);
+                    objectTree.appendExtraPropertyDescriptor(propertyDescriptor);
+                    resolve(propertyDescriptor);
+                });
+            }));
+        }
+
+        return Promise.all(promises).then(function() {
+            return Promise.resolve(new WebInspector.DetailsSectionPropertiesRow(objectTree));
+        });
+    }
+
+    _addWatchExpression(expression)
+    {
+        let watchExpressions = this._watchExpressionsSetting.value.slice(0);
+        watchExpressions.push(expression);
+        this._watchExpressionsSetting.value = watchExpressions;
+
+        this.needsRefresh();
+    }
+
+    _removeWatchExpression(expression)
+    {
+        let watchExpressions = this._watchExpressionsSetting.value.slice(0);
+        watchExpressions.remove(expression, true);
+        this._watchExpressionsSetting.value = watchExpressions;
+
+        this.needsRefresh();
+    }
+
+    _clearAllWatchExpressions()
+    {
+        this._watchExpressionsSetting.value = [];
+
+        this.needsRefresh();
+    }
+
+    _addWatchExpressionButtonClicked(event)
+    {
+        function presentPopoverOverTargetElement()
+        {
+            let target = WebInspector.Rect.rectFromClientRect(event.target.element.getBoundingClientRect());
+            popover.present(target, [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
+        }
+
+        let popover = new WebInspector.Popover(this);
+        let content = document.createElement("div");
+        content.classList.add("watch-expression");
+        content.appendChild(document.createElement("div")).textContent = WebInspector.UIString("Add New Watch Expression");
+
+        let editorElement = content.appendChild(document.createElement("div"));
+        editorElement.classList.add("watch-expression-editor", WebInspector.SyntaxHighlightedStyleClassName);
+
+        this._codeMirror = WebInspector.CodeMirrorEditor.create(editorElement, {
+            lineWrapping: true,
+            mode: "text/javascript",
+            indentWithTabs: true,
+            indentUnit: 4,
+            matchBrackets: true,
+            value: "",
+        });
+
+        this._popoverCommitted = false;
+
+        this._codeMirror.addKeyMap({
+            "Enter": function() { this._popoverCommitted = true; popover.dismiss(); }.bind(this),
+        });
+
+        let completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror);
+        completionController.addExtendedCompletionProvider("javascript", WebInspector.javaScriptRuntimeCompletionProvider);
+
+        // Resize the popover as best we can when the CodeMirror editor changes size.
+        let previousHeight = 0;
+        this._codeMirror.on("changes", function(cm, event) {
+            let height = cm.getScrollInfo().height;
+            if (previousHeight !== height) {
+                previousHeight = height;
+                popover.update(false);
+            }
+        });
+
+        // Reposition the popover when the window resizes.
+        this._windowResizeListener = presentPopoverOverTargetElement;
+        window.addEventListener("resize", this._windowResizeListener);
+
+        popover.content = content;
+        presentPopoverOverTargetElement();
+
+        // CodeMirror needs a refresh after the popover displays, to layout, otherwise it doesn't appear.
+        setTimeout(function() {
+            this._codeMirror.refresh();
+            this._codeMirror.focus();
+            popover.update();
+        }.bind(this), 0);
+    }
+
+    willDismissPopover(popover)
+    {
+        if (this._popoverCommitted) {
+            let expression = this._codeMirror.getValue().trim();
+            if (expression)
+                this._addWatchExpression(expression);
+        }
+
+        window.removeEventListener("resize", this._windowResizeListener);
+        this._windowResizeListener = null;
+        this._codeMirror = null;
+    }
+
+    _refreshAllWatchExpressionsButtonClicked(event)
+    {
+        this.needsRefresh();
+    }
+
+    _clearAllWatchExpressionsButtonClicked(event)
+    {
+        this._clearAllWatchExpressions();
+    }
+
+    _didEvaluateExpression(event)
+    {
+        if (event.data.objectGroup === WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName)
+            return;
+
+        this.needsRefresh();
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        this.needsRefresh();
+    }
+
+    _objectTreeElementAddContextMenuItems(objectTreeElement, contextMenu)
+    {
+        // Only add our watch expression context menus to the top level ObjectTree elements.
+        if (objectTreeElement.parent !== objectTreeElement.treeOutline)
+            return;
+
+        contextMenu.appendItem(WebInspector.UIString("Remove Watch Expression"), function() {
+            let expression = objectTreeElement.property.name;
+            this._removeWatchExpression(expression);
+        }.bind(this));
+    }
+
+    _propertyPathIdentifierForTreeElement(identifier, objectPropertyTreeElement)
+    {
+        if (!objectPropertyTreeElement.property)
+            return null;
+
+        let propertyPath = objectPropertyTreeElement.thisPropertyPath();
+        if (propertyPath.isFullPathImpossible())
+            return null;
+
+        return identifier + "-" + propertyPath.fullPath;
+    }
+
+    _treeElementAdded(identifier, event)
+    {
+        let treeElement = event.data.element;
+        let propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
+        if (!propertyPathIdentifier)
+            return;
+
+        if (WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.has(propertyPathIdentifier))
+            treeElement.expand();
+    }
+
+    _treeElementDisclosureDidChange(identifier, event)
+    {
+        let treeElement = event.data.element;
+        let propertyPathIdentifier = this._propertyPathIdentifierForTreeElement(identifier, treeElement);
+        if (!propertyPathIdentifier)
+            return;
+
+        if (treeElement.expanded)
+            WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.add(propertyPathIdentifier);
+        else
+            WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties.delete(propertyPathIdentifier);
+    }
+
+    _updateWatchExpressionsNavigationBar()
+    {
+        let enabled = this._watchExpressionsSetting.value.length;
+        this._refreshAllWatchExpressionButton.enabled = enabled;
+        this._clearAllWatchExpressionButton.enabled = enabled;
+    }
+};
+
+WebInspector.ScopeChainDetailsSidebarPanel._autoExpandProperties = new Set;
+WebInspector.ScopeChainDetailsSidebarPanel.WatchExpressionsObjectGroupName = "watch-expressions";
+WebInspector.ScopeChainDetailsSidebarPanel.CallFrameBaseClosureScopeSymbol = Symbol("scope-chain-call-frame-base-closure-scope");
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css
new file mode 100644
index 000000000..b8103cb08
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.css
@@ -0,0 +1,62 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.scope-radio-button-navigation-item {
+    position: relative;
+}
+
+.scope-radio-button-navigation-item > .scope-radio-button-item-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid transparent;
+    -webkit-appearance: none;
+    background: transparent;
+    color: transparent;
+    outline: none;
+}
+
+/* Positions the "Style" text almost exactly over the radio-button-item */
+.scope-radio-button-navigation-item > .scope-radio-button-item-select:focus {
+    top: -3px;
+    left: -3px;
+    border: none;
+}
+
+.scope-radio-button-navigation-item > .arrows {
+    width: 5px;
+    height: 11px;
+    margin-left: 4px;
+}
+
+.scope-radio-button-navigation-item.selected > .arrows {
+    display: inline-block;
+}
+
+.scope-radio-button-navigation-item:hover > .arrows {
+    color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js
new file mode 100644
index 000000000..6fde7db7d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScopeRadioButtonNavigationItem.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScopeRadioButtonNavigationItem = class ScopeRadioButtonNavigationItem extends WebInspector.RadioButtonNavigationItem
+{
+    constructor(identifier, toolTip, scopeItems, defaultScopeItem)
+    {
+        super(identifier, toolTip);
+
+        this._scopeItems = scopeItems || [];
+
+        this._element.classList.add("scope-radio-button-navigation-item");
+        this._element.title = defaultScopeItem ? defaultScopeItem.label : this._scopeItems[0].label;
+
+        this._scopeItemSelect = document.createElement("select");
+        this._scopeItemSelect.classList.add("scope-radio-button-item-select");
+
+        for (var item of this._scopeItems) {
+            var option = document.createElement("option");
+            option.value = item.identifier;
+            option.text = item.label;
+            this._scopeItemSelect.appendChild(option);
+        }
+
+        this.selectedItemIdentifier = defaultScopeItem ? defaultScopeItem.identifier : this._scopeItems[0].identifier;
+        this._scopeItemSelect.addEventListener("change", this._handleItemChanged.bind(this));
+        this._element.appendChild(this._scopeItemSelect);
+
+        this._element.appendChild(useSVGSymbol("Images/UpDownArrows.svg", "arrows"));
+    }
+
+    // Public
+
+    set selectedItemIdentifier(identifier)
+    {
+        if (!identifier)
+            return;
+
+        this._scopeItemSelect.value = identifier;
+    }
+
+    get selectedItemIdentifier()
+    {
+        return this._scopeItemSelect.value;
+    }
+
+    dontPreventDefaultOnNavigationBarMouseDown()
+    {
+        return true;
+    }
+
+    // Private
+
+    _handleItemChanged()
+    {
+        var selectedItemIdentifier;
+        for (var item of this._scopeItems) {
+            if (item.identifier !== this.selectedItemIdentifier)
+                continue;
+
+            selectedItemIdentifier = item;
+            break;
+        }
+
+        this._element.title = selectedItemIdentifier.label;
+        this.dispatchEventToListeners(WebInspector.ScopeRadioButtonNavigationItem.Event.SelectedItemChanged);
+    }
+}
+
+WebInspector.ScopeRadioButtonNavigationItem.Event = {
+    SelectedItemChanged: "scope-radio-button-navigation-item-selected-item-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/ScriptContentView.css b/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.css
index 349510882..349510882 100644
--- a/Source/WebInspectorUI/UserInterface/ScriptContentView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js b/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js
new file mode 100644
index 000000000..1f7b1ff26
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptContentView.js
@@ -0,0 +1,239 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptContentView = class ScriptContentView extends WebInspector.ContentView
+{
+    constructor(script)
+    {
+        console.assert(script instanceof WebInspector.Script, script);
+
+        super(script);
+
+        this.element.classList.add("script");
+
+        // Append a spinner while waiting for _contentWillPopulate.
+        var spinner = new WebInspector.IndeterminateProgressSpinner;
+        this.element.appendChild(spinner.element);
+
+        this._script = script;
+
+        // This view is only for standalone Scripts with no corresponding Resource. All other Scripts
+        // should be handled by TextResourceContentView via the Resource.
+        console.assert(!script.resource);
+        console.assert(script.range.startLine === 0);
+        console.assert(script.range.startColumn === 0);
+
+        this._textEditor = new WebInspector.SourceCodeTextEditor(script);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange, this._executionLineNumberDidChange, this);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
+        this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate, this._contentWillPopulate, this);
+        this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate, this._contentDidPopulate, this);
+
+        var toolTip = WebInspector.UIString("Pretty print");
+        var activatedToolTip = WebInspector.UIString("Original formatting");
+        this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.svg", 13, 13);
+        this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
+        this._prettyPrintButtonNavigationItem.enabled = false; // Enabled when the text editor is populated with content.
+
+        var toolTipTypes = WebInspector.UIString("Show type information");
+        var activatedToolTipTypes = WebInspector.UIString("Hide type information");
+        this._showTypesButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("show-types", toolTipTypes, activatedToolTipTypes, "Images/NavigationItemTypes.svg", 13, 14);
+        this._showTypesButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleTypeAnnotations, this);
+        this._showTypesButtonNavigationItem.enabled = false;
+
+        WebInspector.showJavaScriptTypeInformationSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showJavaScriptTypeInformationSettingChanged, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem, this._showTypesButtonNavigationItem];
+    }
+
+    get script()
+    {
+        return this._script;
+    }
+
+    get textEditor()
+    {
+        return this._textEditor;
+    }
+
+    get supplementalRepresentedObjects()
+    {
+        if (isNaN(this._textEditor.executionLineNumber))
+            return [];
+
+        // If the SourceCodeTextEditor has an executionLineNumber, we can assume
+        // it is always the active call frame.
+        return [WebInspector.debuggerManager.activeCallFrame];
+    }
+
+    revealPosition(position, textRangeToSelect, forceUnformatted)
+    {
+        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
+    }
+
+    shown()
+    {
+        this._textEditor.shown();
+    }
+
+    hidden()
+    {
+        this._textEditor.hidden();
+    }
+
+    closed()
+    {
+        WebInspector.showJavaScriptTypeInformationSetting.removeEventListener(null, null, this);
+
+        this._textEditor.close();
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.Resource;
+        cookie.url = this.representedObject.url;
+    }
+
+    restoreFromCookie(cookie)
+    {
+        if ("lineNumber" in cookie && "columnNumber" in cookie)
+            this.revealPosition(new WebInspector.SourceCodePosition(cookie.lineNumber, cookie.columnNumber));
+    }
+
+    get supportsSave()
+    {
+        return true;
+    }
+
+    get saveData()
+    {
+        var url = this._script.url || "web-inspector:///" + encodeURI(this._script.displayName) + ".js";
+        return {url, content: this._textEditor.string};
+    }
+
+    get supportsSearch()
+    {
+        return true;
+    }
+
+    get numberOfSearchResults()
+    {
+        return this._textEditor.numberOfSearchResults;
+    }
+
+    get hasPerformedSearch()
+    {
+        return this._textEditor.currentSearchQuery !== null;
+    }
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
+    }
+
+    performSearch(query)
+    {
+        this._textEditor.performSearch(query);
+    }
+
+    searchCleared()
+    {
+        this._textEditor.searchCleared();
+    }
+
+    searchQueryWithSelection()
+    {
+        return this._textEditor.searchQueryWithSelection();
+    }
+
+    revealPreviousSearchResult(changeFocus)
+    {
+        this._textEditor.revealPreviousSearchResult(changeFocus);
+    }
+
+    revealNextSearchResult(changeFocus)
+    {
+        this._textEditor.revealNextSearchResult(changeFocus);
+    }
+
+    // Private
+
+    _contentWillPopulate(event)
+    {
+        if (this._textEditor.element.parentNode === this.element)
+            return;
+
+        // Allow editing any local file since edits can be saved and reloaded right from the Inspector.
+        if (this._script.urlComponents.scheme === "file")
+            this._textEditor.readOnly = false;
+
+        this.element.removeChildren();
+        this.addSubview(this._textEditor);
+    }
+
+    _contentDidPopulate(event)
+    {
+        this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
+        this._showTypesButtonNavigationItem.enabled = this._textEditor.canShowTypeAnnotations();
+        this._showTypesButtonNavigationItem.activated = WebInspector.showJavaScriptTypeInformationSetting.value;
+    }
+
+    _togglePrettyPrint(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.formatted = activated;
+    }
+
+    _toggleTypeAnnotations(event)
+    {
+        this._textEditor.toggleTypeAnnotations();
+    }
+
+    _showJavaScriptTypeInformationSettingChanged(event)
+    {
+        this._showTypesButtonNavigationItem.activated = WebInspector.showJavaScriptTypeInformationSetting.value;
+    }
+
+    _textEditorFormattingDidChange(event)
+    {
+        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
+    }
+
+    _executionLineNumberDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    }
+
+    _numberOfSearchResultsDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGrid.js
new file mode 100644
index 000000000..0c7660f08
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGrid.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineDataGrid = class ScriptTimelineDataGrid extends WebInspector.TimelineDataGrid
+{
+    constructor(treeOutline, columns, delegate, editCallback, deleteCallback)
+    {
+        super(treeOutline, columns, delegate, editCallback, deleteCallback);
+    }
+
+    // Protected
+
+    callFramePopoverAnchorElement()
+    {
+        return this.selectedNode.elementWithColumnIdentifier("location");
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js
new file mode 100644
index 000000000..2121b7a80
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineDataGridNode.js
@@ -0,0 +1,144 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineDataGridNode = class ScriptTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(scriptTimelineRecord, baseStartTime, rangeStartTime, rangeEndTime)
+    {
+        super(false, null);
+
+        this._record = scriptTimelineRecord;
+        this._baseStartTime = baseStartTime || 0;
+        this._rangeStartTime = rangeStartTime || 0;
+        this._rangeEndTime = typeof rangeEndTime === "number" ? rangeEndTime : Infinity;
+    }
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    }
+
+    get records()
+    {
+        return [this._record];
+    }
+
+    get baseStartTime()
+    {
+        return this._baseStartTime;
+    }
+
+    get rangeStartTime()
+    {
+        return this._rangeStartTime;
+    }
+
+    get rangeEndTime()
+    {
+        return this._rangeEndTime;
+    }
+
+    get data()
+    {
+        if (!this._cachedData) {
+            var startTime = this._record.startTime;
+            var duration = this._record.startTime + this._record.duration - startTime;
+            var callFrameOrSourceCodeLocation = this._record.initiatorCallFrame || this._record.sourceCodeLocation;
+
+            // COMPATIBILITY (iOS 8): Profiles included per-call information and can be finely partitioned.
+            if (this._record.profile) {
+                var oneRootNode = this._record.profile.topDownRootNodes[0];
+                if (oneRootNode && oneRootNode.calls) {
+                    startTime = Math.max(this._rangeStartTime, this._record.startTime);
+                    duration = Math.min(this._record.startTime + this._record.duration, this._rangeEndTime) - startTime;
+                }
+            }
+
+            this._cachedData = {
+                eventType: this._record.eventType,
+                startTime,
+                selfTime: duration,
+                totalTime: duration,
+                averageTime: duration,
+                callCount: this._record.callCountOrSamples,
+                location: callFrameOrSourceCodeLocation,
+            };
+        }
+
+        return this._cachedData;
+    }
+
+    updateRangeTimes(startTime, endTime)
+    {
+        var oldRangeStartTime = this._rangeStartTime;
+        var oldRangeEndTime = this._rangeEndTime;
+
+        if (oldRangeStartTime === startTime && oldRangeEndTime === endTime)
+            return;
+
+        this._rangeStartTime = startTime;
+        this._rangeEndTime = endTime;
+
+        // If we have no duration the range does not matter.
+        if (!this._record.duration)
+            return;
+
+        // We only need a refresh if the new range time changes the visible portion of this record.
+        var recordStart = this._record.startTime;
+        var recordEnd = this._record.startTime + this._record.duration;
+        var oldStartBoundary = Number.constrain(oldRangeStartTime, recordStart, recordEnd);
+        var oldEndBoundary = Number.constrain(oldRangeEndTime, recordStart, recordEnd);
+        var newStartBoundary = Number.constrain(startTime, recordStart, recordEnd);
+        var newEndBoundary = Number.constrain(endTime, recordStart, recordEnd);
+
+        if (oldStartBoundary !== newStartBoundary || oldEndBoundary !== newEndBoundary)
+            this.needsRefresh();
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        var value = this.data[columnIdentifier];
+
+        switch (columnIdentifier) {
+        case "eventType":
+            return WebInspector.ScriptTimelineRecord.EventType.displayName(value, this._record.details);
+
+        case "startTime":
+            return isNaN(value) ? emDash : Number.secondsToString(value - this._baseStartTime, true);
+
+        case "selfTime":
+        case "totalTime":
+        case "averageTime":
+            return isNaN(value) ? emDash : Number.secondsToString(value, true);
+
+        case "callCount":
+            return isNaN(value) ? emDash : value;
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.css
new file mode 100644
index 000000000..f671511d9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-overview-graph.script > .timeline-record-bar {
+    margin-top: 8px;
+    height: 20px;
+}
+
+.timeline-overview-graph.script > .timeline-record-bar > .segment {
+    border-radius: 2px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js
new file mode 100644
index 000000000..02fc291a4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js
@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineOverviewGraph = class ScriptTimelineOverviewGraph extends WebInspector.TimelineOverviewGraph
+{
+    constructor(timeline, timelineOverview)
+    {
+        super(timelineOverview);
+
+        this.element.classList.add("script");
+
+        this._scriptTimeline = timeline;
+        this._scriptTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._scriptTimelineRecordAdded, this);
+
+        this._timelineRecordBars = [];
+
+        this.reset();
+    }
+
+    // Public
+
+    reset()
+    {
+        super.reset();
+
+        this._timelineRecordBarMap = new Map;
+
+        this.element.removeChildren();
+    }
+
+    // Protected
+
+    layout()
+    {
+        let secondsPerPixel = this.timelineOverview.secondsPerPixel;
+        let recordBarIndex = 0;
+
+        function createBar(records, renderMode)
+        {
+            let timelineRecordBar = this._timelineRecordBars[recordBarIndex];
+            if (!timelineRecordBar)
+                timelineRecordBar = this._timelineRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
+            else {
+                timelineRecordBar.renderMode = renderMode;
+                timelineRecordBar.records = records;
+            }
+            timelineRecordBar.refresh(this);
+            if (!timelineRecordBar.element.parentNode)
+                this.element.appendChild(timelineRecordBar.element);
+            ++recordBarIndex;
+        }
+
+        // Create bars for non-GC records and GC records.
+        let [gcRecords, nonGCRecords] = this._scriptTimeline.records.partition((x) => x.isGarbageCollection());
+        let boundCreateBar = createBar.bind(this);
+        WebInspector.TimelineRecordBar.createCombinedBars(nonGCRecords, secondsPerPixel, this, boundCreateBar);
+        WebInspector.TimelineRecordBar.createCombinedBars(gcRecords, secondsPerPixel, this, boundCreateBar);
+
+        // Remove the remaining unused TimelineRecordBars.
+        for (; recordBarIndex < this._timelineRecordBars.length; ++recordBarIndex) {
+            this._timelineRecordBars[recordBarIndex].records = null;
+            this._timelineRecordBars[recordBarIndex].element.remove();
+        }
+    }
+
+    // Private
+
+    _scriptTimelineRecordAdded(event)
+    {
+        this.needsLayout();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css
new file mode 100644
index 000000000..06af3d941
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view.script > .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .tree-outline.script .item .subtitle {
+    display: none;
+}
+
+.sidebar > .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .tree-outline.script .item .alternate-subtitle {
+    display: none;
+}
+
+.tree-outline .item .alternate-subtitle {
+    color: hsla(0, 0%, 0%, 0.7);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected .alternate-subtitle {
+    color: hsla(0, 0%, 100%, 0.9);
+}
+
+.tree-outline .item.small:not(.two-line) .alternate-subtitle::before {
+    content: " — ";
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js
new file mode 100644
index 000000000..c8e7e5efa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineView.js
@@ -0,0 +1,283 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTimelineView = class ScriptTimelineView extends WebInspector.TimelineView
+{
+    constructor(timeline, extraArguments)
+    {
+        super(timeline, extraArguments);
+
+        console.assert(timeline.type === WebInspector.TimelineRecord.Type.Script);
+
+        this.navigationSidebarTreeOutline.element.classList.add("script");
+
+        var columns = {location: {}, callCount: {}, startTime: {}, totalTime: {}, selfTime: {}, averageTime: {}};
+
+        columns.location.title = WebInspector.UIString("Location");
+        columns.location.width = "15%";
+
+        let isSamplingProfiler = !!window.ScriptProfilerAgent;
+        if (isSamplingProfiler)
+            columns.callCount.title = WebInspector.UIString("Samples");
+        else {
+            // COMPATIBILITY(iOS 9): ScriptProfilerAgent did not exist yet, we had call counts, not samples.
+            columns.callCount.title = WebInspector.UIString("Calls");
+        }
+        columns.callCount.width = "5%";
+        columns.callCount.aligned = "right";
+
+        columns.startTime.title = WebInspector.UIString("Start Time");
+        columns.startTime.width = "10%";
+        columns.startTime.aligned = "right";
+
+        columns.totalTime.title = WebInspector.UIString("Total Time");
+        columns.totalTime.width = "10%";
+        columns.totalTime.aligned = "right";
+
+        columns.selfTime.title = WebInspector.UIString("Self Time");
+        columns.selfTime.width = "10%";
+        columns.selfTime.aligned = "right";
+
+        columns.averageTime.title = WebInspector.UIString("Average Time");
+        columns.averageTime.width = "10%";
+        columns.averageTime.aligned = "right";
+
+        for (var column in columns)
+            columns[column].sortable = true;
+
+        this._dataGrid = new WebInspector.ScriptTimelineDataGrid(this.navigationSidebarTreeOutline, columns, this);
+        this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+        this._dataGrid.sortColumnIdentifierSetting = new WebInspector.Setting("script-timeline-view-sort", "startTime");
+        this._dataGrid.sortOrderSetting = new WebInspector.Setting("script-timeline-view-sort-order", WebInspector.DataGrid.SortOrder.Ascending);
+
+        this.element.classList.add("script");
+        this.addSubview(this._dataGrid);
+
+        timeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._scriptTimelineRecordAdded, this);
+        timeline.addEventListener(WebInspector.Timeline.Event.Refreshed, this._scriptTimelineRecordRefreshed, this);
+
+        this._pendingRecords = [];
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        return WebInspector.UIString("Records");
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._dataGrid.shown();
+    }
+
+    hidden()
+    {
+        this._dataGrid.hidden();
+
+        super.hidden();
+    }
+
+    closed()
+    {
+        console.assert(this.representedObject instanceof WebInspector.Timeline);
+        this.representedObject.removeEventListener(null, null, this);
+
+        this._dataGrid.closed();
+    }
+
+    get selectionPathComponents()
+    {
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (!dataGridNode)
+            return null;
+
+        var pathComponents = [];
+
+        while (dataGridNode && !dataGridNode.root) {
+            var treeElement = this._dataGrid.treeElementForDataGridNode(dataGridNode);
+            console.assert(treeElement);
+            if (!treeElement)
+                break;
+
+            if (treeElement.hidden)
+                return null;
+
+            var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
+            pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.treeElementPathComponentSelected, this);
+            pathComponents.unshift(pathComponent);
+            dataGridNode = dataGridNode.parent;
+        }
+
+        return pathComponents;
+    }
+
+    reset()
+    {
+        super.reset();
+
+        this._dataGrid.reset();
+
+        this._pendingRecords = [];
+    }
+
+    // Protected
+
+    canShowContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement)
+            return !!treeElement.profileNode.sourceCodeLocation;
+        return super.canShowContentViewForTreeElement(treeElement);
+    }
+
+    showContentViewForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement) {
+            if (treeElement.profileNode.sourceCodeLocation)
+                WebInspector.showOriginalOrFormattedSourceCodeLocation(treeElement.profileNode.sourceCodeLocation);
+            return;
+        }
+
+        super.showContentViewForTreeElement(treeElement);
+    }
+
+    treeElementPathComponentSelected(event)
+    {
+        var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
+        if (!dataGridNode)
+            return;
+        dataGridNode.revealAndSelect();
+    }
+
+    treeElementSelected(treeElement, selectedByUser)
+    {
+        if (this._dataGrid.shouldIgnoreSelectionEvent())
+            return;
+
+        super.treeElementSelected(treeElement, selectedByUser);
+    }
+
+    dataGridNodeForTreeElement(treeElement)
+    {
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement)
+            return new WebInspector.ProfileNodeDataGridNode(treeElement.profileNode, this.zeroTime, this.startTime, this.endTime);
+        return null;
+    }
+
+    populateProfileNodeTreeElement(treeElement)
+    {
+        var zeroTime = this.zeroTime;
+        var startTime = this.startTime;
+        var endTime = this.endTime;
+
+        for (var childProfileNode of treeElement.profileNode.childNodes) {
+            var profileNodeTreeElement = new WebInspector.ProfileNodeTreeElement(childProfileNode, this);
+            var profileNodeDataGridNode = new WebInspector.ProfileNodeDataGridNode(childProfileNode, zeroTime, startTime, endTime);
+            this._dataGrid.addRowInSortOrder(profileNodeTreeElement, profileNodeDataGridNode, treeElement);
+        }
+    }
+
+    layout()
+    {
+        if (this.startTime !== this._oldStartTime || this.endTime !== this._oldEndTime) {
+            let dataGridNode = this._dataGrid.children[0];
+            while (dataGridNode) {
+                dataGridNode.updateRangeTimes(this.startTime, this.endTime);
+                if (dataGridNode.revealed)
+                    dataGridNode.refreshIfNeeded();
+                dataGridNode = dataGridNode.traverseNextNode(false, null, true);
+            }
+
+            this._oldStartTime = this.startTime;
+            this._oldEndTime = this.endTime;
+        }
+
+        this._processPendingRecords();
+    }
+
+    // Private
+
+    _processPendingRecords()
+    {
+        if (WebInspector.timelineManager.scriptProfilerIsTracking())
+            return;
+
+        if (!this._pendingRecords.length)
+            return;
+
+        let zeroTime = this.zeroTime;
+        let startTime = this.startTime;
+        let endTime = this.endTime;
+
+        for (var scriptTimelineRecord of this._pendingRecords) {
+            var rootNodes = [];
+            if (scriptTimelineRecord.profile) {
+                // FIXME: Support using the bottom-up tree once it is implemented.
+                rootNodes = scriptTimelineRecord.profile.topDownRootNodes;
+            }
+
+            var treeElement = new WebInspector.TimelineRecordTreeElement(scriptTimelineRecord, WebInspector.SourceCodeLocation.NameStyle.Short, true);
+            var dataGridNode = new WebInspector.ScriptTimelineDataGridNode(scriptTimelineRecord, zeroTime);
+
+            this._dataGrid.addRowInSortOrder(treeElement, dataGridNode);
+
+            for (var profileNode of rootNodes) {
+                var profileNodeTreeElement = new WebInspector.ProfileNodeTreeElement(profileNode, this);
+                var profileNodeDataGridNode = new WebInspector.ProfileNodeDataGridNode(profileNode, zeroTime, startTime, endTime);
+                this._dataGrid.addRowInSortOrder(profileNodeTreeElement, profileNodeDataGridNode, treeElement);
+            }
+        }
+
+        this._pendingRecords = [];
+    }
+
+    _scriptTimelineRecordAdded(event)
+    {
+        var scriptTimelineRecord = event.data.record;
+        console.assert(scriptTimelineRecord instanceof WebInspector.ScriptTimelineRecord);
+
+        this._pendingRecords.push(scriptTimelineRecord);
+
+        this.needsLayout();
+    }
+
+    _scriptTimelineRecordRefreshed(event)
+    {
+        this.needsLayout();
+    }
+
+    _dataGridFiltersDidChange(event)
+    {
+        this.timelineSidebarPanel.updateFilter();
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js
new file mode 100644
index 000000000..b83d26036
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ScriptTreeElement.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ScriptTreeElement = class ScriptTreeElement extends WebInspector.SourceCodeTreeElement
+{
+    constructor(script)
+    {
+        console.assert(script instanceof WebInspector.Script);
+
+        super(script, "script", null, null, script, false);
+
+        this.mainTitle = script.displayName;
+
+        if (script.url) {
+            // Show the host as the subtitle if it is different from the main title.
+            var subtitle = WebInspector.displayNameForHost(script.urlComponents.host);
+            this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
+
+            this.tooltip = script.url;
+
+            this.addClassName(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+            this.addClassName(WebInspector.Resource.Type.Script);
+        } else
+            this.addClassName(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
+
+        this._script = script;
+    }
+
+    // Public
+
+    get script()
+    {
+        return this._script;
+    }
+};
+
+WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName = "anonymous-script-icon";
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchBar.css b/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
new file mode 100644
index 000000000..66b09faf4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchBar.css
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.search-bar > input[type="search"] {
+    padding-top: 0;
+    margin: 1px 6px;
+
+    outline: none;
+
+    -webkit-appearance: none;
+
+    border: 1px solid hsla(0, 0%, 0%, 0.25);
+    border-radius: 3px;
+    background-color: hsla(0, 0%, 100%, 0.2);
+    background-clip: padding-box;
+
+    height: 22px;
+}
+
+.search-bar > input[type="search"]::-webkit-input-placeholder {
+    color: hsla(0, 0%, 0%, 0.35);
+}
+
+.search-bar > input[type="search"]:focus {
+    background-color: white;
+}
+
+/* Make the search field's background white when it is not focused and has content.
+   Needs to be a separate rule. See http://webkit.org/b/118162 */
+.search-bar > input[type="search"]:not(:placeholder-shown) {
+    background-color: white;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchBar.js b/Source/WebInspectorUI/UserInterface/Views/SearchBar.js
new file mode 100644
index 000000000..71c1aa950
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchBar.js
@@ -0,0 +1,98 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SearchBar = class SearchBar extends WebInspector.NavigationItem
+{
+    constructor(identifier, placeholder, delegate, suppressIncremental)
+    {
+        super(identifier);
+
+        this.delegate = delegate;
+
+        this._element.classList.add("search-bar");
+
+        this._keyboardShortcutEsc = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Escape);
+        this._keyboardShortcutEnter = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Enter);
+
+        this._searchInput = this._element.appendChild(document.createElement("input"));
+        this._searchInput.type = "search";
+        this._searchInput.spellcheck = false;
+        this._searchInput.incremental = !suppressIncremental;
+        this._searchInput.setAttribute("results", 5);
+        this._searchInput.setAttribute("autosave", identifier + "-autosave");
+        this._searchInput.setAttribute("placeholder", placeholder);
+        this._searchInput.addEventListener("search", this._handleSearchEvent.bind(this));
+        this._searchInput.addEventListener("keydown", this._handleKeydownEvent.bind(this));
+    }
+
+    // Public
+
+    get text()
+    {
+        return this._searchInput.value;
+    }
+
+    set text(newText)
+    {
+        this._searchInput.value = newText;
+    }
+
+    focus()
+    {
+        // FIXME: Workaround for: <https://webkit.org/b/149504> Caret missing from <input> after clearing text and calling select()
+        if (!this._searchInput.value.length)
+            this._searchInput.focus();
+        else
+            this._searchInput.select();
+    }
+
+    // Private
+
+    _handleSearchEvent(event)
+    {
+        this.dispatchEventToListeners(WebInspector.SearchBar.Event.TextChanged);
+    }
+
+    _handleKeydownEvent(event)
+    {
+        if (this._keyboardShortcutEsc.matchesEvent(event)) {
+            if (this.delegate && typeof this.delegate.searchBarWantsToLoseFocus === "function") {
+                this.delegate.searchBarWantsToLoseFocus(this);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        } else if (this._keyboardShortcutEnter.matchesEvent(event)) {
+            if (this.delegate && typeof this.delegate.searchBarDidActivate === "function") {
+                this.delegate.searchBarDidActivate(this);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        }
+    }
+};
+
+WebInspector.SearchBar.Event = {
+    TextChanged: "searchbar-text-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css b/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css
new file mode 100644
index 000000000..d1bf678ba
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchIcons.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.dom-match-element-icon .icon {
+    content: url(../Images/DOMElement.svg);
+}
+
+.dom-match-text-node-icon .icon {
+    content: url(../Images/DOMTextNode.svg);
+}
+
+.dom-match-comment-icon .icon {
+    content: url(../Images/DOMComment.svg);
+}
+
+.dom-match-document-type-icon .icon {
+    content: url(../Images/DOMDocumentType.svg);
+}
+
+.dom-match-character-data-icon .icon {
+    content: url(../Images/DOMCharacterData.svg);
+}
+
+.dom-match-node-icon .icon {
+    content: url(../Images/DOMNode.svg);
+}
+
+.source-code-match-icon .icon {
+    content: url(../Images/ResultLine.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js
new file mode 100644
index 000000000..89ad735dd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchResultTreeElement.js
@@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SearchResultTreeElement = class SearchResultTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(representedObject)
+    {
+        console.assert(representedObject instanceof WebInspector.DOMSearchMatchObject || representedObject instanceof WebInspector.SourceCodeSearchMatchObject);
+
+        var title = WebInspector.SearchResultTreeElement.truncateAndHighlightTitle(representedObject.title, representedObject.searchTerm, representedObject.sourceCodeTextRange);
+
+        super(representedObject.className, title, null, representedObject, false);
+    }
+
+    // Static
+
+    static truncateAndHighlightTitle(title, searchTerm, sourceCodeTextRange)
+    {
+        // Use the original location, since those line/column offsets match the line text in title.
+        var textRange = sourceCodeTextRange.textRange;
+
+        var searchTermIndex = textRange.startColumn;
+
+        // We should only have one line text ranges, so make sure that is the case.
+        console.assert(textRange.startLine === textRange.endLine);
+
+        // Show some characters before the matching text (if there are enough) for context. TreeOutline takes care of the truncating
+        // at the end of the string.
+        var modifiedTitle = null;
+        if (searchTermIndex > WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch) {
+            modifiedTitle = ellipsis + title.substring(searchTermIndex - WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch);
+            searchTermIndex = WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch + 1;
+        } else
+            modifiedTitle = title;
+
+        // Truncate the tail of the title so the tooltip isn't so large.
+        modifiedTitle = modifiedTitle.trimEnd(searchTermIndex + searchTerm.length + WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch);
+
+        console.assert(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length).toLowerCase() === searchTerm.toLowerCase());
+
+        var highlightedTitle = document.createDocumentFragment();
+
+        highlightedTitle.append(modifiedTitle.substring(0, searchTermIndex));
+
+        var highlightSpan = document.createElement("span");
+        highlightSpan.className = "highlighted";
+        highlightSpan.append(modifiedTitle.substring(searchTermIndex, searchTermIndex + searchTerm.length));
+        highlightedTitle.appendChild(highlightSpan);
+
+        highlightedTitle.append(modifiedTitle.substring(searchTermIndex + searchTerm.length));
+
+        return highlightedTitle;
+    }
+
+    // Public
+
+    get filterableData()
+    {
+        return {text: [this.representedObject.title]};
+    }
+};
+
+WebInspector.SearchResultTreeElement.CharactersToShowBeforeSearchMatch = 15;
+WebInspector.SearchResultTreeElement.CharactersToShowAfterSearchMatch = 50;
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
new file mode 100644
index 000000000..568a78a86
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.css
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation.search > :matches(.content, .empty-content-placeholder) {
+    top: 28px;
+}
+
+.sidebar > .panel.navigation.search > .search-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+
+    display: flex;
+
+    box-shadow: inset hsla(0, 0%, 100%, 0.2) 0 1px 0;
+
+    height: 28px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar > .panel.navigation.search > .search-bar > input[type="search"] {
+    display: flex;
+    flex: 1;
+
+    margin: 3px 6px;
+    padding-left: 4px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js
new file mode 100644
index 000000000..bd05fd5db
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchSidebarPanel.js
@@ -0,0 +1,369 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SearchSidebarPanel = class SearchSidebarPanel extends WebInspector.NavigationSidebarPanel
+{
+    constructor(contentBrowser)
+    {
+        super("search", WebInspector.UIString("Search"), true, true);
+
+        this.contentBrowser = contentBrowser;
+
+        var searchElement = document.createElement("div");
+        searchElement.classList.add("search-bar");
+        this.element.appendChild(searchElement);
+
+        this._inputElement = document.createElement("input");
+        this._inputElement.type = "search";
+        this._inputElement.spellcheck = false;
+        this._inputElement.addEventListener("search", this._searchFieldChanged.bind(this));
+        this._inputElement.addEventListener("input", this._searchFieldInput.bind(this));
+        this._inputElement.setAttribute("results", 5);
+        this._inputElement.setAttribute("autosave", "inspector-search-autosave");
+        this._inputElement.setAttribute("placeholder", WebInspector.UIString("Search Resource Content"));
+        searchElement.appendChild(this._inputElement);
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter Search Results");
+
+        this._searchQuerySetting = new WebInspector.Setting("search-sidebar-query", "");
+        this._inputElement.value = this._searchQuerySetting.value;
+
+        WebInspector.Frame.addEventListener(WebInspector.Frame.Event.MainResourceDidChange, this._mainResourceDidChange, this);
+
+        this.contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+    }
+
+    // Public
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.Frame.removeEventListener(null, null, this);
+    }
+
+    focusSearchField()
+    {
+        this.show();
+
+        this._inputElement.select();
+    }
+
+    performSearch(searchQuery)
+    {
+        // Before performing a new search, clear the old search.
+        this.contentTreeOutline.removeChildren();
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+
+        this._inputElement.value = searchQuery;
+        this._searchQuerySetting.value = searchQuery;
+
+        this.hideEmptyContentPlaceholder();
+
+        searchQuery = searchQuery.trim();
+        if (!searchQuery.length)
+            return;
+
+        // FIXME: Provide UI to toggle regex and case sensitive searches.
+        var isCaseSensitive = false;
+        var isRegex = false;
+
+        var updateEmptyContentPlaceholderTimeout = null;
+
+        function updateEmptyContentPlaceholderSoon()
+        {
+            if (updateEmptyContentPlaceholderTimeout)
+                return;
+            updateEmptyContentPlaceholderTimeout = setTimeout(updateEmptyContentPlaceholder.bind(this), 100);
+        }
+
+        function updateEmptyContentPlaceholder()
+        {
+            if (updateEmptyContentPlaceholderTimeout) {
+                clearTimeout(updateEmptyContentPlaceholderTimeout);
+                updateEmptyContentPlaceholderTimeout = null;
+            }
+
+            this.updateEmptyContentPlaceholder(WebInspector.UIString("No Search Results"));
+        }
+
+        function forEachMatch(searchQuery, lineContent, callback)
+        {
+            var lineMatch;
+            var searchRegex = new RegExp(searchQuery.escapeForRegExp(), "gi");
+            while ((searchRegex.lastIndex < lineContent.length) && (lineMatch = searchRegex.exec(lineContent)))
+                callback(lineMatch, searchRegex.lastIndex);
+        }
+
+        function resourcesCallback(error, result)
+        {
+            updateEmptyContentPlaceholderSoon.call(this);
+
+            if (error)
+                return;
+
+            function resourceCallback(url, error, resourceMatches)
+            {
+                updateEmptyContentPlaceholderSoon.call(this);
+
+                if (error || !resourceMatches || !resourceMatches.length)
+                    return;
+
+                var frame = WebInspector.frameResourceManager.frameForIdentifier(searchResult.frameId);
+                if (!frame)
+                    return;
+
+                var resource = frame.url === url ? frame.mainResource : frame.resourceForURL(url);
+                if (!resource)
+                    return;
+
+                var resourceTreeElement = this._searchTreeElementForResource(resource);
+
+                for (var i = 0; i < resourceMatches.length; ++i) {
+                    var match = resourceMatches[i];
+                    forEachMatch(searchQuery, match.lineContent, function(lineMatch, lastIndex) {
+                        var matchObject = new WebInspector.SourceCodeSearchMatchObject(resource, match.lineContent, searchQuery, new WebInspector.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, lastIndex));
+                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+                        resourceTreeElement.appendChild(matchTreeElement);
+                        if (!this.contentTreeOutline.selectedTreeElement)
+                            matchTreeElement.revealAndSelect(false, true);
+                    }.bind(this));
+                }
+
+                updateEmptyContentPlaceholder.call(this);
+            }
+
+            for (var i = 0; i < result.length; ++i) {
+                var searchResult = result[i];
+                if (!searchResult.url || !searchResult.frameId)
+                    continue;
+
+                PageAgent.searchInResource(searchResult.frameId, searchResult.url, searchQuery, isCaseSensitive, isRegex, resourceCallback.bind(this, searchResult.url));
+            }
+        }
+
+        function searchScripts(scriptsToSearch)
+        {
+            updateEmptyContentPlaceholderSoon.call(this);
+
+            if (!scriptsToSearch.length)
+                return;
+
+            function scriptCallback(script, error, scriptMatches)
+            {
+                updateEmptyContentPlaceholderSoon.call(this);
+
+                if (error || !scriptMatches || !scriptMatches.length)
+                    return;
+
+                var scriptTreeElement = this._searchTreeElementForScript(script);
+
+                for (var i = 0; i < scriptMatches.length; ++i) {
+                    var match = scriptMatches[i];
+                    forEachMatch(searchQuery, match.lineContent, function(lineMatch, lastIndex) {
+                        var matchObject = new WebInspector.SourceCodeSearchMatchObject(script, match.lineContent, searchQuery, new WebInspector.TextRange(match.lineNumber, lineMatch.index, match.lineNumber, lastIndex));
+                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+                        scriptTreeElement.appendChild(matchTreeElement);
+                        if (!this.contentTreeOutline.selectedTreeElement)
+                            matchTreeElement.revealAndSelect(false, true);
+                    }.bind(this));
+                }
+
+                updateEmptyContentPlaceholder.call(this);
+            }
+
+            for (var script of scriptsToSearch)
+                DebuggerAgent.searchInContent(script.id, searchQuery, isCaseSensitive, isRegex, scriptCallback.bind(this, script));
+        }
+
+        function domCallback(error, searchId, resultsCount)
+        {
+            updateEmptyContentPlaceholderSoon.call(this);
+
+            if (error || !resultsCount)
+                return;
+
+            console.assert(searchId);
+
+            this._domSearchIdentifier = searchId;
+
+            function domSearchResults(error, nodeIds)
+            {
+                updateEmptyContentPlaceholderSoon.call(this);
+
+                if (error)
+                    return;
+
+                for (var i = 0; i < nodeIds.length; ++i) {
+                    // If someone started a new search, then return early and stop showing seach results from the old query.
+                    if (this._domSearchIdentifier !== searchId)
+                        return;
+
+                    var domNode = WebInspector.domTreeManager.nodeForId(nodeIds[i]);
+                    if (!domNode || !domNode.ownerDocument)
+                        continue;
+
+                    // We do not display the document node when the search query is "/". We don't have anything to display in the content view for it.
+                    if (domNode.nodeType() === Node.DOCUMENT_NODE)
+                        continue;
+
+                    // FIXME: This should use a frame to do resourceForURL, but DOMAgent does not provide a frameId.
+                    var resource = WebInspector.frameResourceManager.resourceForURL(domNode.ownerDocument.documentURL);
+                    if (!resource)
+                        continue;
+
+                    var resourceTreeElement = this._searchTreeElementForResource(resource);
+                    var domNodeTitle = WebInspector.DOMSearchMatchObject.titleForDOMNode(domNode);
+
+                    // Textual matches.
+                    var didFindTextualMatch = false;
+                    forEachMatch(searchQuery, domNodeTitle, function(lineMatch, lastIndex) {
+                        var matchObject = new WebInspector.DOMSearchMatchObject(resource, domNode, domNodeTitle, searchQuery, new WebInspector.TextRange(0, lineMatch.index, 0, lastIndex));
+                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+                        resourceTreeElement.appendChild(matchTreeElement);
+                        if (!this.contentTreeOutline.selectedTreeElement)
+                            matchTreeElement.revealAndSelect(false, true);
+                        didFindTextualMatch = true;
+                    }.bind(this));
+
+                    // Non-textual matches are CSS Selector or XPath matches. In such cases, display the node entirely highlighted.
+                    if (!didFindTextualMatch) {
+                        var matchObject = new WebInspector.DOMSearchMatchObject(resource, domNode, domNodeTitle, domNodeTitle, new WebInspector.TextRange(0, 0, 0, domNodeTitle.length));
+                        var matchTreeElement = new WebInspector.SearchResultTreeElement(matchObject);
+                        resourceTreeElement.appendChild(matchTreeElement);
+                        if (!this.contentTreeOutline.selectedTreeElement)
+                            matchTreeElement.revealAndSelect(false, true);
+                    }
+
+                    updateEmptyContentPlaceholder.call(this);
+                }
+            }
+
+            DOMAgent.getSearchResults(searchId, 0, resultsCount, domSearchResults.bind(this));
+        }
+
+        if (window.DOMAgent)
+            WebInspector.domTreeManager.requestDocument(function(){});
+
+        if (window.PageAgent)
+            PageAgent.searchInResources(searchQuery, isCaseSensitive, isRegex, resourcesCallback.bind(this));
+
+        setTimeout(searchScripts.bind(this, WebInspector.debuggerManager.searchableScripts), 0);
+
+        if (window.DOMAgent) {
+            if (this._domSearchIdentifier) {
+                DOMAgent.discardSearchResults(this._domSearchIdentifier);
+                this._domSearchIdentifier = undefined;
+            }
+
+            DOMAgent.performSearch(searchQuery, domCallback.bind(this));
+        }
+
+        // FIXME: Resource search should work in JSContext inspection.
+        // <https://webkit.org/b/131252> Web Inspector: JSContext inspection Resource search does not work
+        if (!window.DOMAgent && !window.PageAgent)
+            updateEmptyContentPlaceholderSoon.call(this);
+    }
+
+    // Private
+
+    _searchFieldChanged(event)
+    {
+        this.performSearch(event.target.value);
+    }
+
+    _searchFieldInput(event)
+    {
+        // If the search field is cleared, immediately clear the search results tree outline.
+        if (!event.target.value.length)
+            this.performSearch("");
+    }
+
+    _searchTreeElementForResource(resource)
+    {
+        var resourceTreeElement = this.contentTreeOutline.getCachedTreeElement(resource);
+        if (!resourceTreeElement) {
+            resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
+            resourceTreeElement.hasChildren = true;
+            resourceTreeElement.expand();
+
+            this.contentTreeOutline.appendChild(resourceTreeElement);
+        }
+
+        return resourceTreeElement;
+    }
+
+    _searchTreeElementForScript(script)
+    {
+        var scriptTreeElement = this.contentTreeOutline.getCachedTreeElement(script);
+        if (!scriptTreeElement) {
+            scriptTreeElement = new WebInspector.ScriptTreeElement(script);
+            scriptTreeElement.hasChildren = true;
+            scriptTreeElement.expand();
+
+            this.contentTreeOutline.appendChild(scriptTreeElement);
+        }
+
+        return scriptTreeElement;
+    }
+
+    _mainResourceDidChange(event)
+    {
+        if (!event.target.isMainFrame())
+            return;
+
+        if (this._delayedSearchTimeout) {
+            clearTimeout(this._delayedSearchTimeout);
+            this._delayedSearchTimeout = undefined;
+        }
+
+        this.contentTreeOutline.removeChildren();
+        this.contentBrowser.contentViewContainer.closeAllContentViews();
+
+        if (this.visible)
+            this.focusSearchField();
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement || treeElement instanceof WebInspector.FolderTreeElement)
+            return;
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement || treeElement instanceof WebInspector.ScriptTreeElement) {
+            WebInspector.showRepresentedObject(treeElement.representedObject);
+            return;
+        }
+
+        console.assert(treeElement instanceof WebInspector.SearchResultTreeElement);
+        if (!(treeElement instanceof WebInspector.SearchResultTreeElement))
+            return;
+
+        if (treeElement.representedObject instanceof WebInspector.DOMSearchMatchObject)
+            WebInspector.showMainFrameDOMTree(treeElement.representedObject.domNode);
+        else if (treeElement.representedObject instanceof WebInspector.SourceCodeSearchMatchObject)
+            WebInspector.showOriginalOrFormattedSourceCodeTextRange(treeElement.representedObject.sourceCodeTextRange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js
new file mode 100644
index 000000000..e4b43fc1e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SearchTabContentView.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SearchTabContentView = class SearchTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.SearchTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel,
+            WebInspector.domNodeDetailsSidebarPanel, WebInspector.cssStyleDetailsSidebarPanel];
+
+        if (WebInspector.layerTreeDetailsSidebarPanel)
+            detailsSidebarPanels.push(WebInspector.layerTreeDetailsSidebarPanel);
+
+        super(identifier || "search", "search", tabBarItem, WebInspector.SearchSidebarPanel, detailsSidebarPanels);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/SearchResults.svg",
+            title: WebInspector.UIString("Search"),
+        };
+    }
+
+    static isEphemeral()
+    {
+        return true;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.SearchTabContentView.Type;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        // Perform on a delay because the field might not be visible yet.
+        setTimeout(this.focusSearchField.bind(this));
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Script || representedObject instanceof WebInspector.DOMTree;
+    }
+
+    focusSearchField()
+    {
+        this.navigationSidebarPanel.focusSearchField();
+    }
+
+    performSearch(searchQuery)
+    {
+        this.navigationSidebarPanel.performSearch(searchQuery);
+    }
+};
+
+WebInspector.SearchTabContentView.Type = "search";
diff --git a/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
new file mode 100644
index 000000000..0af4adaa8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.js
@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SettingsTabContentView = class SettingsTabContentView extends WebInspector.TabContentView
+{
+    constructor(identifier)
+    {
+        var tabBarItem = new WebInspector.TabBarItem("Images/Gear.svg", WebInspector.UIString("Settings"), true);
+
+        super(identifier || "settings", "settings", tabBarItem);
+    }
+
+    static isTabAllowed()
+    {
+        // FIXME (149284): This tab isn't ready to be shown yet.
+        return false;
+    }
+
+    static shouldSaveTab()
+    {
+        return false;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.SettingsTabContentView.Type;
+    }
+};
+
+WebInspector.SettingsTabContentView.Type = "settings";
diff --git a/Source/WebInspectorUI/UserInterface/Views/Sidebar.css b/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
new file mode 100644
index 000000000..ccd9feb4d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Sidebar.css
@@ -0,0 +1,85 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar {
+    position: relative;
+
+    background-color: var(--panel-background-color);
+}
+
+.sidebar.collapsed {
+    width: 0 !important;
+    border: none !important;
+}
+
+.sidebar > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    align-content: center;
+}
+
+.sidebar > .panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    display: none;
+
+    overflow: hidden;
+
+    z-index: 0; /* Workaround so that scroll bars appear above position:sticky section headers. */
+}
+
+.sidebar.has-navigation-bar > .panel {
+    top: 29px;
+}
+
+.sidebar > .panel.selected {
+    display: block;
+}
+
+.sidebar.right > .resizer {
+    left: -3px;
+}
+
+.sidebar.left > .resizer {
+    right: -3px;
+}
+
+.sidebar.collapsed {
+    display: none;
+}
+
+.sidebar.left {
+    border-right: 1px solid var(--border-color);
+}
+
+.sidebar.right {
+    border-left: 1px solid var(--border-color);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/Sidebar.js b/Source/WebInspectorUI/UserInterface/Views/Sidebar.js
new file mode 100644
index 000000000..5470e6f57
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Sidebar.js
@@ -0,0 +1,299 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Sidebar = class Sidebar extends WebInspector.View
+{
+    constructor(element, side, sidebarPanels, role, label, hasNavigationBar)
+    {
+        super(element);
+
+        console.assert(!side || side === WebInspector.Sidebar.Sides.Left || side === WebInspector.Sidebar.Sides.Right);
+        this._side = side || WebInspector.Sidebar.Sides.Left;
+        this._collapsed = true;
+
+        this.element.classList.add("sidebar", this._side, WebInspector.Sidebar.CollapsedStyleClassName);
+
+        this.element.setAttribute("role", role || "group");
+        if (label)
+            this.element.setAttribute("aria-label", label);
+
+        if (hasNavigationBar) {
+            this.element.classList.add("has-navigation-bar");
+
+            this._navigationBar = new WebInspector.NavigationBar(null, null, "tablist");
+            this._navigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._navigationItemSelected, this);
+            this.addSubview(this._navigationBar);
+        }
+
+        this._resizer = new WebInspector.Resizer(WebInspector.Resizer.RuleOrientation.Vertical, this);
+        this.element.insertBefore(this._resizer.element, this.element.firstChild);
+
+        this._sidebarPanels = [];
+
+        if (sidebarPanels) {
+            for (let sidebarPanel of sidebarPanels)
+                this.addSidebarPanel(sidebarPanel);
+        }
+    }
+
+    // Public
+
+    addSidebarPanel(sidebarPanel)
+    {
+        console.assert(sidebarPanel instanceof WebInspector.SidebarPanel);
+        if (!(sidebarPanel instanceof WebInspector.SidebarPanel))
+            return null;
+
+        console.assert(!sidebarPanel.parentSidebar);
+        if (sidebarPanel.parentSidebar)
+            return null;
+
+        this._sidebarPanels.push(sidebarPanel);
+        this.addSubview(sidebarPanel);
+
+        if (this._navigationBar) {
+            console.assert(sidebarPanel.navigationItem);
+            this._navigationBar.addNavigationItem(sidebarPanel.navigationItem);
+        }
+
+        sidebarPanel.added();
+
+        return sidebarPanel;
+    }
+
+    removeSidebarPanel(sidebarPanelOrIdentifierOrIndex)
+    {
+        var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
+        if (!sidebarPanel)
+            return null;
+
+        sidebarPanel.willRemove();
+
+        if (sidebarPanel.visible) {
+            sidebarPanel.hidden();
+            sidebarPanel.visibilityDidChange();
+        }
+
+        if (this._selectedSidebarPanel === sidebarPanel) {
+            var index = this._sidebarPanels.indexOf(sidebarPanel);
+            this.selectedSidebarPanel = this._sidebarPanels[index - 1] || this._sidebarPanels[index + 1] || null;
+        }
+
+        this._sidebarPanels.remove(sidebarPanel);
+        this.removeSubview(sidebarPanel);
+
+        if (this._navigationBar) {
+            console.assert(sidebarPanel.navigationItem);
+            this._navigationBar.removeNavigationItem(sidebarPanel.navigationItem);
+        }
+
+        sidebarPanel.removed();
+
+        return sidebarPanel;
+    }
+
+    get selectedSidebarPanel()
+    {
+        return this._selectedSidebarPanel || null;
+    }
+
+    set selectedSidebarPanel(sidebarPanelOrIdentifierOrIndex)
+    {
+        var sidebarPanel = this.findSidebarPanel(sidebarPanelOrIdentifierOrIndex);
+        if (this._selectedSidebarPanel === sidebarPanel)
+            return;
+
+        if (this._selectedSidebarPanel) {
+            var wasVisible = this._selectedSidebarPanel.visible;
+
+            this._selectedSidebarPanel.selected = false;
+
+            if (wasVisible) {
+                this._selectedSidebarPanel.hidden();
+                this._selectedSidebarPanel.visibilityDidChange();
+            }
+        }
+
+        this._selectedSidebarPanel = sidebarPanel || null;
+
+        if (this._navigationBar)
+            this._navigationBar.selectedNavigationItem = sidebarPanel ? sidebarPanel.navigationItem : null;
+
+        if (this._selectedSidebarPanel) {
+            this._selectedSidebarPanel.selected = true;
+
+            if (this._selectedSidebarPanel.visible) {
+                this._selectedSidebarPanel.shown();
+                this._selectedSidebarPanel.visibilityDidChange();
+                this._recalculateWidth(this._selectedSidebarPanel.savedWidth);
+            }
+        }
+
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.SidebarPanelSelected);
+    }
+
+    get minimumWidth()
+    {
+        if (this._navigationBar)
+            return Math.max(WebInspector.Sidebar.AbsoluteMinimumWidth, this._navigationBar.minimumWidth);
+        if (this._selectedSidebarPanel)
+            return Math.max(WebInspector.Sidebar.AbsoluteMinimumWidth, this._selectedSidebarPanel.minimumWidth);
+        return WebInspector.Sidebar.AbsoluteMinimumWidth;
+    }
+
+    get maximumWidth()
+    {
+        // FIXME: This is kind of arbitrary and ideally would be a more complex calculation based on the
+        // available space for the sibling elements.
+        return Math.round(window.innerWidth / 3);
+    }
+
+    get width()
+    {
+        return this.element.offsetWidth;
+    }
+
+    set width(newWidth)
+    {
+        if (newWidth === this.width)
+            return;
+
+        this._recalculateWidth(newWidth);
+    }
+
+    get collapsed()
+    {
+        return this._collapsed;
+    }
+
+    set collapsed(flag)
+    {
+        if (flag === this._collapsed)
+            return;
+
+        this._collapsed = flag || false;
+        this.element.classList.toggle(WebInspector.Sidebar.CollapsedStyleClassName);
+
+        if (!this._collapsed && this._navigationBar)
+            this._navigationBar.needsLayout();
+
+        if (this._selectedSidebarPanel) {
+            if (this._selectedSidebarPanel.visible) {
+                this._selectedSidebarPanel.shown();
+                this._recalculateWidth(this._selectedSidebarPanel.savedWidth);
+            } else
+                this._selectedSidebarPanel.hidden();
+
+            this._selectedSidebarPanel.visibilityDidChange();
+        }
+
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.CollapsedStateDidChange);
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
+    }
+
+    get sidebarPanels()
+    {
+        return this._sidebarPanels;
+    }
+
+    get side()
+    {
+        return this._side;
+    }
+
+    findSidebarPanel(sidebarPanelOrIdentifierOrIndex)
+    {
+        var sidebarPanel = null;
+
+        if (sidebarPanelOrIdentifierOrIndex instanceof WebInspector.SidebarPanel) {
+            if (this._sidebarPanels.includes(sidebarPanelOrIdentifierOrIndex))
+                sidebarPanel = sidebarPanelOrIdentifierOrIndex;
+        } else if (typeof sidebarPanelOrIdentifierOrIndex === "number") {
+            sidebarPanel = this._sidebarPanels[sidebarPanelOrIdentifierOrIndex];
+        } else if (typeof sidebarPanelOrIdentifierOrIndex === "string") {
+            for (var i = 0; i < this._sidebarPanels.length; ++i) {
+                if (this._sidebarPanels[i].identifier === sidebarPanelOrIdentifierOrIndex) {
+                    sidebarPanel = this._sidebarPanels[i];
+                    break;
+                }
+            }
+        }
+
+        return sidebarPanel;
+    }
+
+    // Protected
+
+    resizerDragStarted(resizer)
+    {
+        this._widthBeforeResize = this.width;
+    }
+
+    resizerDragging(resizer, positionDelta)
+    {
+        if (this._side === WebInspector.Sidebar.Sides.Left)
+            positionDelta *= -1;
+
+        var newWidth = positionDelta + this._widthBeforeResize;
+        this.width = newWidth;
+        this.collapsed = (newWidth < (this.minimumWidth / 2));
+    }
+
+    // Private
+
+    _recalculateWidth(newWidth = this.width)
+    {
+        // Need to add 1 because of the 1px border-right.
+        newWidth = Number.constrain(newWidth, this.minimumWidth + 1, this.maximumWidth);
+        this.element.style.width = Math.ceil(newWidth) + "px";
+
+        if (!this.collapsed && this._navigationBar)
+            this._navigationBar.needsLayout();
+
+        if (!this.collapsed && this._selectedSidebarPanel)
+            this._selectedSidebarPanel.widthDidChange();
+
+        this.dispatchEventToListeners(WebInspector.Sidebar.Event.WidthDidChange);
+    }
+
+    _navigationItemSelected(event)
+    {
+        this.selectedSidebarPanel = event.target.selectedNavigationItem ? event.target.selectedNavigationItem.identifier : null;
+    }
+};
+
+WebInspector.Sidebar.CollapsedStyleClassName = "collapsed";
+WebInspector.Sidebar.AbsoluteMinimumWidth = 200;
+
+WebInspector.Sidebar.Sides = {
+    Right: "right",
+    Left: "left"
+};
+
+WebInspector.Sidebar.Event = {
+    SidebarPanelSelected: "sidebar-panel-selected",
+    CollapsedStateDidChange: "sidebar-collapsed-state-did-change",
+    WidthDidChange: "sidebar-width-did-change",
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css
new file mode 100644
index 000000000..15e8dcb1a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel > .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js
new file mode 100644
index 000000000..f1e2efa23
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SidebarPanel.js
@@ -0,0 +1,168 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SidebarPanel = class SidebarPanel extends WebInspector.View
+{
+    constructor(identifier, displayName, element, role, label)
+    {
+        super(element);
+
+        this._identifier = identifier;
+        this._displayName = displayName;
+        this._selected = false;
+
+        this._widthSetting = new WebInspector.Setting(identifier + "-sidebar-panel-width", 300);
+        this._savedScrollPosition = 0;
+
+        this.element.classList.add("panel", identifier);
+
+        this.element.setAttribute("role", role || "group");
+        this.element.setAttribute("aria-label", label || displayName);
+
+        this._contentView = new WebInspector.View;
+        this._contentView.element.classList.add("content");
+        this.addSubview(this._contentView);
+    }
+
+    // Public
+
+    get identifier()
+    {
+        return this._identifier;
+    }
+
+    get contentView()
+    {
+        return this._contentView;
+    }
+
+    get visible()
+    {
+        return this.selected && this.parentSidebar && !this.parentSidebar.collapsed;
+    }
+
+    get selected()
+    {
+        return this._selected;
+    }
+
+    set selected(flag)
+    {
+        if (flag === this._selected)
+            return;
+
+        this._selected = flag || false;
+        this.element.classList.toggle("selected", this._selected);
+    }
+
+    get parentSidebar()
+    {
+        return this.parentView;
+    }
+
+    get minimumWidth()
+    {
+        // Implemented by subclasses.
+        return 0;
+    }
+
+    get savedWidth()
+    {
+        return this._widthSetting.value;
+    }
+
+    show()
+    {
+        if (!this.parentSidebar)
+            return;
+
+        this.parentSidebar.collapsed = false;
+        this.parentSidebar.selectedSidebarPanel = this;
+    }
+
+    hide()
+    {
+        if (!this.parentSidebar)
+            return;
+
+        this.parentSidebar.collapsed = true;
+        this.parentSidebar.selectedSidebarPanel = null;
+    }
+
+    toggle()
+    {
+        if (this.visible)
+            this.hide();
+        else
+            this.show();
+    }
+
+    added()
+    {
+        console.assert(this.parentSidebar);
+
+        // Implemented by subclasses.
+    }
+
+    removed()
+    {
+        console.assert(!this.parentSidebar);
+
+        // Implemented by subclasses.
+    }
+
+    willRemove()
+    {
+        // Implemented by subclasses.
+    }
+
+    shown()
+    {
+        this._contentView.element.scrollTop = this._savedScrollPosition;
+
+        // Implemented by subclasses.
+    }
+
+    hidden()
+    {
+        this._savedScrollPosition = this._contentView.element.scrollTop;
+
+        // Implemented by subclasses.
+    }
+
+    widthDidChange()
+    {
+        let width = this.element.realOffsetWidth;
+        if (width && width !== this._widthSetting.value)
+            this._widthSetting.value = width;
+
+        // Implemented by subclasses.
+    }
+
+    visibilityDidChange()
+    {
+        // Implemented by subclasses.
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/Slider.css b/Source/WebInspectorUI/UserInterface/Views/Slider.css
new file mode 100644
index 000000000..ea369cc0d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Slider.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.slider {
+    position: absolute;
+    height: 11px;
+    border: 1px solid hsl(0, 0%, 75%);
+}
+
+.slider > img {
+    position: absolute;
+    left: -5px;
+    top: -5px;
+    width: 14px;
+    height: 17px;
+    content: -webkit-image-set(url(../Images/SliderThumb.png) 1x, url(../Images/SliderThumb@2x.png) 2x);
+}
+
+.slider > img.dragging {
+    content: -webkit-image-set(url(../Images/SliderThumbPressed.png) 1x, url(../Images/SliderThumbPressed@2x.png) 2x);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .slider {
+        border: 0.5px solid hsl(0, 0%, 50%);
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/Slider.js b/Source/WebInspectorUI/UserInterface/Views/Slider.js
new file mode 100644
index 000000000..1b6c47107
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Slider.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Slider = class Slider extends WebInspector.Object
+{
+    constructor()
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.className = "slider";
+
+        this._knob = this._element.appendChild(document.createElement("img"));
+
+        this._value = 0;
+        this._knobX = 0;
+        this._maxX = 0;
+
+        this._element.addEventListener("mousedown", this);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get value()
+    {
+        return this._value;
+    }
+
+    set value(value)
+    {
+        value = Math.max(Math.min(value, 1), 0);
+
+        if (value === this._value)
+            return;
+
+        this.knobX = value;
+
+        if (this.delegate && typeof this.delegate.sliderValueDidChange === "function")
+            this.delegate.sliderValueDidChange(this, value);
+    }
+
+    set knobX(value)
+    {
+        this._value = value;
+        this._knobX = Math.round(value * this.maxX);
+        this._knob.style.webkitTransform = "translate3d(" + this._knobX + "px, 0, 0)";
+    }
+
+    get maxX()
+    {
+        if (this._maxX <= 0 && document.body.contains(this._element))
+            this._maxX = Math.max(this._element.offsetWidth - Math.ceil(WebInspector.Slider.KnobWidth / 2), 0);
+
+        return this._maxX;
+    }
+
+    recalculateKnobX()
+    {
+        this._maxX = 0;
+        this.knobX = this._value;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        switch (event.type) {
+        case "mousedown":
+            this._handleMousedown(event);
+            break;
+        case "mousemove":
+            this._handleMousemove(event);
+            break;
+        case "mouseup":
+            this._handleMouseup(event);
+            break;
+        }
+    }
+
+    // Private
+
+    _handleMousedown(event)
+    {
+        if (event.target !== this._knob)
+            this.value = (this._localPointForEvent(event).x - 3) / this.maxX;
+
+        this._startKnobX = this._knobX;
+        this._startMouseX = this._localPointForEvent(event).x;
+
+        this._element.classList.add("dragging");
+
+        window.addEventListener("mousemove", this, true);
+        window.addEventListener("mouseup", this, true);
+    }
+
+    _handleMousemove(event)
+    {
+        var dx = this._localPointForEvent(event).x - this._startMouseX;
+        var x = Math.max(Math.min(this._startKnobX + dx, this.maxX), 0);
+
+        this.value = x / this.maxX;
+    }
+
+    _handleMouseup(event)
+    {
+        this._element.classList.remove("dragging");
+
+        window.removeEventListener("mousemove", this, true);
+        window.removeEventListener("mouseup", this, true);
+    }
+
+    _localPointForEvent(event)
+    {
+        // We convert all event coordinates from page coordinates to local coordinates such that the slider
+        // may be transformed using CSS Transforms and interaction works as expected.
+        return window.webkitConvertPointFromPageToNode(this._element, new WebKitPoint(event.pageX, event.pageY));
+    }
+};
+
+WebInspector.Slider.KnobWidth = 13;
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
new file mode 100644
index 000000000..f4ba6c8d5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.css
@@ -0,0 +1,186 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.source-code.text-editor .CodeMirror-linewidget {
+    overflow: initial;
+    z-index: 3; /* overlap line content */
+}
+
+.source-code.text-editor > .CodeMirror .warning {
+    background-color: hsl(51, 87%, 93%);
+}
+
+.source-code.text-editor > .CodeMirror .error {
+    background-color: hsl(15, 100%, 90%);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget {
+    float: right;
+    padding: 0 5px 1px 5px;
+    border-bottom-left-radius: 5px;
+    cursor: default;
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.inline {
+    position: relative;
+    top: -13px;
+    height: 13px;
+    padding: 0px 5px 0 3px;
+    border-bottom-left-radius: 0;
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget > .arrow {
+    display: none;
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.inline > .arrow {
+    position: absolute;
+    left: -5.5px;
+    display: block;
+
+    top: 0px;
+    width: 0px;
+    height: 0px;
+
+    border-top: 6.5px solid transparent;
+    border-bottom: 6.5px solid transparent; 
+    border-right: 5.5px solid transparent;
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget > .icon {
+    height: 9px;
+    width: 9px;
+    padding-right: 12px;
+
+    background-size: 9px 9px;
+    background-repeat: no-repeat;
+    background-position-y: 1px;
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget > .icon.icon-warning {
+    background-image: url(../Images/Warning.svg);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget > .icon.icon-error {
+    background-image: url(../Images/Error.svg);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.warning {
+    background-color: hsl(51, 87%, 93%);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.inline.warning {
+    background-color: hsl(43, 97%, 84%);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.inline.warning > .arrow {
+    border-right-color: hsl(43, 97%, 84%);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.error {
+    background-color: hsl(15, 100%, 90%);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.inline.error {
+    background-color: hsl(11, 100%, 80%);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.inline.error > .arrow {
+    border-right-color: hsl(11, 100%, 80%);
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget > .text {
+    font-family: -apple-system, sans-serif;
+}
+
+.source-code.text-editor > .CodeMirror .issue-widget.inline > .text {
+    display: inline-block;
+    max-width: 300px;
+    vertical-align: baseline;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.popover .debugger-popover-content {
+    font-family: Menlo, monospace;
+    font-size: 11px;
+    white-space: pre;
+}
+
+.popover .expandable {
+    min-width: 300px;
+    min-height: 250px;
+ 
+    max-width: 350px;
+    max-height: 450px;
+}
+
+.popover .debugger-popover-content > .title {
+    font-family: -apple-system, sans-serif;
+    font-weight: 500;
+    padding: 2px 0 4px 10px;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.popover .debugger-popover-content > .title > .go-to-arrow {
+    position: relative;
+    top: 2px;
+    left: 4px;
+    width: 12px;
+    height: 12px;
+}
+
+.popover .debugger-popover-content > .body {
+    border-top: 1px solid hsla(0, 0%, 0%, 0.3);
+    overflow: auto;
+    padding-top: 2px;
+}
+
+.popover .debugger-popover-content.function > .body {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+/* Custom styling for the hover menu attached to color tokens */
+
+.hover-menu.color {
+    padding-right: 15px;
+}
+
+.hover-menu.color > img {
+    width: 16px;
+    height: 16px;
+    content: -webkit-image-set(url(../Images/ColorIcon.png) 1x, url(../Images/ColorIcon@2x.png) 2x);
+    transform: translateY(0.5px);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .popover .debugger-popover-content > .body {
+        border-width: 0.5px;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
new file mode 100644
index 000000000..ae3168cb6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTextEditor.js
@@ -0,0 +1,1792 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTextEditor = class SourceCodeTextEditor extends WebInspector.TextEditor
+{
+    constructor(sourceCode)
+    {
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+        super();
+
+        this.delegate = this;
+
+        this._sourceCode = sourceCode;
+        this._breakpointMap = {};
+        this._issuesLineNumberMap = new Map;
+        this._widgetMap = new Map;
+        this._contentPopulated = false;
+        this._invalidLineNumbers = {0: true};
+        this._ignoreContentDidChange = 0;
+
+        this._typeTokenScrollHandler = null;
+        this._typeTokenAnnotator = null;
+        this._basicBlockAnnotator = null;
+
+        this._isProbablyMinified = false;
+
+        // FIXME: Currently this just jumps between resources and related source map resources. It doesn't "jump to symbol" yet.
+        this._updateTokenTrackingControllerState();
+
+        this.element.classList.add("source-code");
+
+        if (this._supportsDebugging) {
+            WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.DisabledStateDidChange, this._breakpointStatusDidChange, this);
+            WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.AutoContinueDidChange, this._breakpointStatusDidChange, this);
+            WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.ResolvedStateDidChange, this._breakpointStatusDidChange, this);
+            WebInspector.Breakpoint.addEventListener(WebInspector.Breakpoint.Event.LocationDidChange, this._updateBreakpointLocation, this);
+
+            WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointsEnabledDidChange, this._breakpointsEnabledDidChange, this);
+            WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointAdded, this._breakpointAdded, this);
+            WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.BreakpointRemoved, this._breakpointRemoved, this);
+            WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._activeCallFrameDidChange, this);
+
+            WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
+            WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
+            if (WebInspector.debuggerManager.activeCallFrame)
+                this._debuggerDidPause();
+
+            this._activeCallFrameDidChange();
+        }
+
+        WebInspector.issueManager.addEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
+
+        if (this._sourceCode instanceof WebInspector.SourceMapResource || this._sourceCode.sourceMaps.length > 0)
+            WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateTokenTrackingControllerState, this);
+        else
+            this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+
+        sourceCode.requestContent().then(this._contentAvailable.bind(this));
+
+        // FIXME: Cmd+L shorcut doesn't actually work.
+        new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Command, "L", this.showGoToLineDialog.bind(this), this.element);
+        new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, "G", this.showGoToLineDialog.bind(this), this.element);
+    }
+
+    // Public
+
+    get sourceCode()
+    {
+        return this._sourceCode;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        if (WebInspector.showJavaScriptTypeInformationSetting.value) {
+            if (this._typeTokenAnnotator)
+                this._typeTokenAnnotator.resume();
+            if (this._basicBlockAnnotator)
+                this._basicBlockAnnotator.resume();
+            if (!this._typeTokenScrollHandler && (this._typeTokenAnnotator || this._basicBlockAnnotator))
+                this._enableScrollEventsForTypeTokenAnnotator();
+        } else {
+            if (this._typeTokenAnnotator || this._basicBlockAnnotator)
+                this._setTypeTokenAnnotatorEnabledState(false);
+        }
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this.tokenTrackingController.removeHighlightedRange();
+
+        this._dismissPopover();
+
+        this._dismissEditingController(true);
+
+        if (this._typeTokenAnnotator)
+            this._typeTokenAnnotator.pause();
+        if (this._basicBlockAnnotator)
+            this._basicBlockAnnotator.pause();
+    }
+
+    close()
+    {
+        if (this._supportsDebugging) {
+            WebInspector.Breakpoint.removeEventListener(null, null, this);
+            WebInspector.debuggerManager.removeEventListener(null, null, this);
+
+            if (this._activeCallFrameSourceCodeLocation) {
+                this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+                delete this._activeCallFrameSourceCodeLocation;
+            }
+        }
+
+        WebInspector.issueManager.removeEventListener(WebInspector.IssueManager.Event.IssueWasAdded, this._issueWasAdded, this);
+
+        if (this._sourceCode instanceof WebInspector.SourceMapResource || this._sourceCode.sourceMaps.length > 0)
+            WebInspector.notifications.removeEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateTokenTrackingControllerState, this);
+        else
+            this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+    }
+
+    canBeFormatted()
+    {
+        // Currently we assume that source map resources are formatted how the author wants it.
+        // We could allow source map resources to be formatted, we would then need to make
+        // SourceCodeLocation watch listen for mappedResource's formatting changes, and keep
+        // a formatted location alongside the regular mapped location.
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return false;
+
+        return super.canBeFormatted();
+    }
+
+    canShowTypeAnnotations()
+    {
+        return !!this._typeTokenAnnotator;
+    }
+
+    customPerformSearch(query)
+    {
+        function searchResultCallback(error, matches)
+        {
+            // Bail if the query changed since we started.
+            if (this.currentSearchQuery !== query)
+                return;
+
+            if (error || !matches || !matches.length) {
+                // Report zero matches.
+                this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+                return;
+            }
+
+            var queryRegex = new RegExp(query.escapeForRegExp(), "gi");
+            var searchResults = [];
+
+            for (var i = 0; i < matches.length; ++i) {
+                var matchLineNumber = matches[i].lineNumber;
+                var line = this.line(matchLineNumber);
+                if (!line)
+                    return;
+
+                // Reset the last index to reuse the regex on a new line.
+                queryRegex.lastIndex = 0;
+
+                // Search the line and mark the ranges.
+                var lineMatch = null;
+                while (queryRegex.lastIndex + query.length <= line.length && (lineMatch = queryRegex.exec(line))) {
+                    var resultTextRange = new WebInspector.TextRange(matchLineNumber, lineMatch.index, matchLineNumber, queryRegex.lastIndex);
+                    searchResults.push(resultTextRange);
+                }
+            }
+
+            this.addSearchResults(searchResults);
+
+            this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+        }
+
+        if (this.hasEdits())
+            return false;
+
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return false;
+
+        if (this._sourceCode instanceof WebInspector.Resource)
+            PageAgent.searchInResource(this._sourceCode.parentFrame.id, this._sourceCode.url, query, false, false, searchResultCallback.bind(this));
+        else if (this._sourceCode instanceof WebInspector.Script)
+            DebuggerAgent.searchInContent(this._sourceCode.id, query, false, false, searchResultCallback.bind(this));
+        return true;
+    }
+
+    showGoToLineDialog()
+    {
+        if (!this._goToLineDialog) {
+            this._goToLineDialog = new WebInspector.GoToLineDialog;
+            this._goToLineDialog.delegate = this;
+        }
+
+        this._goToLineDialog.present(this.element);
+    }
+
+    isGoToLineDialogValueValid(goToLineDialog, lineNumber)
+    {
+        return !isNaN(lineNumber) && lineNumber > 0 && lineNumber <= this.lineCount;
+    }
+
+    goToLineDialogValueWasValidated(goToLineDialog, lineNumber)
+    {
+        var position = new WebInspector.SourceCodePosition(lineNumber - 1, 0);
+        var range = new WebInspector.TextRange(lineNumber - 1, 0, lineNumber, 0);
+        this.revealPosition(position, range, false, true);
+    }
+
+    goToLineDialogWasDismissed()
+    {
+        this.focus();
+    }
+
+    contentDidChange(replacedRanges, newRanges)
+    {
+        super.contentDidChange(replacedRanges, newRanges);
+
+        if (this._ignoreContentDidChange > 0)
+            return;
+
+        for (var range of newRanges)
+            this._updateEditableMarkers(range);
+
+        if (this._typeTokenAnnotator || this._basicBlockAnnotator) {
+            this._setTypeTokenAnnotatorEnabledState(false);
+            this._typeTokenAnnotator = null;
+            this._basicBlockAnnotator = null;
+        }
+    }
+
+    toggleTypeAnnotations()
+    {
+        if (!this._typeTokenAnnotator)
+            return false;
+
+        var newActivatedState = !this._typeTokenAnnotator.isActive();
+        if (newActivatedState && this._isProbablyMinified && !this.formatted)
+            this.formatted = true;
+
+        this._setTypeTokenAnnotatorEnabledState(newActivatedState);
+        return newActivatedState;
+    }
+
+    showPopoverForTypes(typeDescription, bounds, title)
+    {
+        var content = document.createElement("div");
+        content.className = "object expandable";
+
+        var titleElement = document.createElement("div");
+        titleElement.className = "title";
+        titleElement.textContent = title;
+        content.appendChild(titleElement);
+
+        var bodyElement = content.appendChild(document.createElement("div"));
+        bodyElement.className = "body";
+
+        var typeTreeView = new WebInspector.TypeTreeView(typeDescription);
+        bodyElement.appendChild(typeTreeView.element);
+
+        this._showPopover(content, bounds);
+    }
+
+    // Protected
+
+    prettyPrint(pretty)
+    {
+        // The annotators must be cleared before pretty printing takes place and resumed
+        // after so that they clear their annotations in a known state and insert new annotations
+        // in the new state.
+        var shouldResumeTypeTokenAnnotator = this._typeTokenAnnotator && this._typeTokenAnnotator.isActive();
+        var shouldResumeBasicBlockAnnotator = this._basicBlockAnnotator && this._basicBlockAnnotator.isActive();
+        if (shouldResumeTypeTokenAnnotator || shouldResumeBasicBlockAnnotator)
+            this._setTypeTokenAnnotatorEnabledState(false);
+
+        super.prettyPrint(pretty);
+
+        if (pretty || !this._isProbablyMinified) {
+            if (shouldResumeTypeTokenAnnotator || shouldResumeBasicBlockAnnotator)
+                this._setTypeTokenAnnotatorEnabledState(true);
+        } else {
+            console.assert(!pretty && this._isProbablyMinified);
+            if (this._typeTokenAnnotator || this._basicBlockAnnotator)
+                this._setTypeTokenAnnotatorEnabledState(false);
+        }
+    }
+
+    // Private
+
+    _unformattedLineInfoForEditorLineInfo(lineInfo)
+    {
+        if (this.formatterSourceMap)
+            return this.formatterSourceMap.formattedToOriginal(lineInfo.lineNumber, lineInfo.columnNumber);
+        return lineInfo;
+    }
+
+    _sourceCodeLocationForEditorPosition(position)
+    {
+        var lineInfo = {lineNumber: position.line, columnNumber: position.ch};
+        var unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(lineInfo);
+        return this.sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
+    }
+
+    _editorLineInfoForSourceCodeLocation(sourceCodeLocation)
+    {
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return {lineNumber: sourceCodeLocation.displayLineNumber, columnNumber: sourceCodeLocation.displayColumnNumber};
+        return {lineNumber: sourceCodeLocation.formattedLineNumber, columnNumber: sourceCodeLocation.formattedColumnNumber};
+    }
+
+    _breakpointForEditorLineInfo(lineInfo)
+    {
+        if (!this._breakpointMap[lineInfo.lineNumber])
+            return null;
+        return this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber];
+    }
+
+    _addBreakpointWithEditorLineInfo(breakpoint, lineInfo)
+    {
+        if (!this._breakpointMap[lineInfo.lineNumber])
+            this._breakpointMap[lineInfo.lineNumber] = {};
+
+        this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber] = breakpoint;
+    }
+
+    _removeBreakpointWithEditorLineInfo(breakpoint, lineInfo)
+    {
+        console.assert(breakpoint === this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber]);
+
+        delete this._breakpointMap[lineInfo.lineNumber][lineInfo.columnNumber];
+
+        if (isEmptyObject(this._breakpointMap[lineInfo.lineNumber]))
+            delete this._breakpointMap[lineInfo.lineNumber];
+    }
+
+    _contentWillPopulate(content)
+    {
+        this.dispatchEventToListeners(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate);
+
+        // We only do the rest of this work before the first populate.
+        if (this._contentPopulated)
+            return;
+
+        if (this._supportsDebugging) {
+            this._breakpointMap = {};
+
+            var breakpoints = WebInspector.debuggerManager.breakpointsForSourceCode(this._sourceCode);
+            for (var i = 0; i < breakpoints.length; ++i) {
+                var breakpoint = breakpoints[i];
+                console.assert(this._matchesBreakpoint(breakpoint));
+                var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+                this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+                this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+            }
+        }
+
+        if (this._sourceCode instanceof WebInspector.Resource)
+            this.mimeType = this._sourceCode.syntheticMIMEType;
+        else if (this._sourceCode instanceof WebInspector.Script)
+            this.mimeType = "text/javascript";
+
+        // Automatically format the content if it looks minified and it can be formatted.
+        console.assert(!this.formatted);
+        if (this.canBeFormatted() && this._isLikelyMinified(content)) {
+            this.autoFormat = true;
+            this._isProbablyMinified = true;
+        }
+    }
+
+    _isLikelyMinified(content)
+    {
+        let whiteSpaceCount = 0;
+        let ratio = 0;
+
+        for (let i = 0, size = Math.min(5000, content.length); i < size; i++) {
+            let char = content[i];
+            if (char === " " || char === "\n" || char === "\t")
+                whiteSpaceCount++;
+
+            if (i >= 500) {
+                ratio = whiteSpaceCount / i;
+                if (ratio < 0.05)
+                    return true;
+            }
+        }
+
+        return ratio < 0.1;
+    }
+
+    _contentDidPopulate()
+    {
+        this._contentPopulated = true;
+
+        this.dispatchEventToListeners(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate);
+
+        // We add the issues each time content is populated. This is needed because lines might not exist
+        // if we tried added them before when the full content wasn't available. (When populating with
+        // partial script content this can be called multiple times.)
+
+        this._reinsertAllIssues();
+
+        this._updateEditableMarkers();
+    }
+
+    _populateWithContent(content)
+    {
+        content = content || "";
+
+        this._contentWillPopulate(content);
+        this.string = content;
+
+        this._makeTypeTokenAnnotator();
+        this._makeBasicBlockAnnotator();
+
+        if (WebInspector.showJavaScriptTypeInformationSetting.value) {
+            if (this._basicBlockAnnotator || this._typeTokenAnnotator)
+                this._setTypeTokenAnnotatorEnabledState(true);
+        }
+
+        this._contentDidPopulate();
+    }
+
+    _contentAvailable(parameters)
+    {
+        // Return if resource is not available.
+        if (parameters.error)
+            return;
+
+        var sourceCode = parameters.sourceCode;
+        var content = sourceCode.content;
+        var base64Encoded = parameters.base64Encoded;
+
+        console.assert(sourceCode === this._sourceCode);
+        console.assert(!base64Encoded);
+
+        // Abort if the full content populated while waiting for this async callback.
+        if (this._fullContentPopulated)
+            return;
+
+        this._fullContentPopulated = true;
+        this._invalidLineNumbers = {};
+
+        this._populateWithContent(content);
+    }
+
+    _breakpointStatusDidChange(event)
+    {
+        this._updateBreakpointStatus(event.target);
+    }
+
+    _breakpointsEnabledDidChange()
+    {
+        console.assert(this._supportsDebugging);
+
+        var breakpoints = WebInspector.debuggerManager.breakpointsForSourceCode(this._sourceCode);
+        for (var breakpoint of breakpoints)
+            this._updateBreakpointStatus(breakpoint);
+    }
+
+    _updateBreakpointStatus(breakpoint)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+    }
+
+    _updateBreakpointLocation(event)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        var breakpoint = event.target;
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        if (this._ignoreAllBreakpointLocationUpdates)
+            return;
+
+        if (breakpoint === this._ignoreLocationUpdateBreakpoint)
+            return;
+
+        var sourceCodeLocation = breakpoint.sourceCodeLocation;
+
+        if (this._sourceCode instanceof WebInspector.SourceMapResource) {
+            // Update our breakpoint location if the display location changed.
+            if (sourceCodeLocation.displaySourceCode !== this._sourceCode)
+                return;
+            var oldLineInfo = {lineNumber: event.data.oldDisplayLineNumber, columnNumber: event.data.oldDisplayColumnNumber};
+            var newLineInfo = {lineNumber: sourceCodeLocation.displayLineNumber, columnNumber: sourceCodeLocation.displayColumnNumber};
+        } else {
+            // Update our breakpoint location if the original location changed.
+            if (sourceCodeLocation.sourceCode !== this._sourceCode)
+                return;
+            var oldLineInfo = {lineNumber: event.data.oldFormattedLineNumber, columnNumber: event.data.oldFormattedColumnNumber};
+            var newLineInfo = {lineNumber: sourceCodeLocation.formattedLineNumber, columnNumber: sourceCodeLocation.formattedColumnNumber};
+        }
+
+        var existingBreakpoint = this._breakpointForEditorLineInfo(oldLineInfo);
+        if (!existingBreakpoint)
+            return;
+
+        console.assert(breakpoint === existingBreakpoint);
+
+        this.setBreakpointInfoForLineAndColumn(oldLineInfo.lineNumber, oldLineInfo.columnNumber, null);
+        this.setBreakpointInfoForLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+
+        this._removeBreakpointWithEditorLineInfo(breakpoint, oldLineInfo);
+        this._addBreakpointWithEditorLineInfo(breakpoint, newLineInfo);
+    }
+
+    _breakpointAdded(event)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        var breakpoint = event.data.breakpoint;
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        if (breakpoint === this._ignoreBreakpointAddedBreakpoint)
+            return;
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+    }
+
+    _breakpointRemoved(event)
+    {
+        console.assert(this._supportsDebugging);
+
+        if (!this._contentPopulated)
+            return;
+
+        var breakpoint = event.data.breakpoint;
+        if (!this._matchesBreakpoint(breakpoint))
+            return;
+
+        if (breakpoint === this._ignoreBreakpointRemovedBreakpoint)
+            return;
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._removeBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+        this.setBreakpointInfoForLineAndColumn(lineInfo.lineNumber, lineInfo.columnNumber, null);
+    }
+
+    _activeCallFrameDidChange()
+    {
+        console.assert(this._supportsDebugging);
+
+        if (this._activeCallFrameSourceCodeLocation) {
+            this._activeCallFrameSourceCodeLocation.removeEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+            delete this._activeCallFrameSourceCodeLocation;
+        }
+
+        var activeCallFrame = WebInspector.debuggerManager.activeCallFrame;
+        if (!activeCallFrame || !this._matchesSourceCodeLocation(activeCallFrame.sourceCodeLocation)) {
+            this.executionLineNumber = NaN;
+            this.executionColumnNumber = NaN;
+            return;
+        }
+
+        this._dismissPopover();
+
+        this._activeCallFrameSourceCodeLocation = activeCallFrame.sourceCodeLocation;
+        this._activeCallFrameSourceCodeLocation.addEventListener(WebInspector.SourceCodeLocation.Event.LocationChanged, this._activeCallFrameSourceCodeLocationChanged, this);
+
+        // Don't return early if the line number didn't change. The execution state still
+        // could have changed (e.g. continuing in a loop with a breakpoint inside).
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(activeCallFrame.sourceCodeLocation);
+        this.executionLineNumber = lineInfo.lineNumber;
+        this.executionColumnNumber = lineInfo.columnNumber;
+
+        // If we have full content or this source code isn't a Resource we can return early.
+        // Script source code populates from the request started in the constructor.
+        if (this._fullContentPopulated || !(this._sourceCode instanceof WebInspector.Resource) || this._requestingScriptContent)
+            return;
+
+        // Since we are paused in the debugger we need to show some content, and since the Resource
+        // content hasn't populated yet we need to populate with content from the Scripts by URL.
+        // Document resources will attempt to populate the scripts as inline (in <script> tags.)
+        // Other resources are assumed to be full scripts (JavaScript resources).
+        if (this._sourceCode.type === WebInspector.Resource.Type.Document)
+            this._populateWithInlineScriptContent();
+        else
+            this._populateWithScriptContent();
+    }
+
+    _activeCallFrameSourceCodeLocationChanged(event)
+    {
+        console.assert(!isNaN(this.executionLineNumber));
+        if (isNaN(this.executionLineNumber))
+            return;
+
+        console.assert(WebInspector.debuggerManager.activeCallFrame);
+        console.assert(this._activeCallFrameSourceCodeLocation === WebInspector.debuggerManager.activeCallFrame.sourceCodeLocation);
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(this._activeCallFrameSourceCodeLocation);
+        this.executionLineNumber = lineInfo.lineNumber;
+        this.executionColumnNumber = lineInfo.columnNumber;
+    }
+
+    _populateWithInlineScriptContent()
+    {
+        console.assert(this._sourceCode instanceof WebInspector.Resource);
+        console.assert(!this._fullContentPopulated);
+        console.assert(!this._requestingScriptContent);
+
+        var scripts = this._sourceCode.scripts;
+        console.assert(scripts.length);
+        if (!scripts.length)
+            return;
+
+        var pendingRequestCount = scripts.length;
+
+        // If the number of scripts hasn't change since the last populate, then there is nothing to do.
+        if (this._inlineScriptContentPopulated === pendingRequestCount)
+            return;
+
+        this._inlineScriptContentPopulated = pendingRequestCount;
+
+        function scriptContentAvailable(parameters)
+        {
+            // Return early if we are still waiting for content from other scripts.
+            if (--pendingRequestCount)
+                return;
+
+            delete this._requestingScriptContent;
+
+            // Abort if the full content populated while waiting for these async callbacks.
+            if (this._fullContentPopulated)
+                return;
+
+            var scriptOpenTag = "<script>";
+            var scriptCloseTag = "</script>";
+
+            var content = "";
+            var lineNumber = 0;
+            var columnNumber = 0;
+
+            this._invalidLineNumbers = {};
+
+            for (var i = 0; i < scripts.length; ++i) {
+                // Fill the line gap with newline characters.
+                for (var newLinesCount = scripts[i].range.startLine - lineNumber; newLinesCount > 0; --newLinesCount) {
+                    if (!columnNumber)
+                        this._invalidLineNumbers[scripts[i].range.startLine - newLinesCount] = true;
+                    columnNumber = 0;
+                    content += "\n";
+                }
+
+                // Fill the column gap with space characters.
+                for (var spacesCount = scripts[i].range.startColumn - columnNumber - scriptOpenTag.length; spacesCount > 0; --spacesCount)
+                    content += " ";
+
+                // Add script tags and content.
+                content += scriptOpenTag;
+                content += scripts[i].content;
+                content += scriptCloseTag;
+
+                lineNumber = scripts[i].range.endLine;
+                columnNumber = scripts[i].range.endColumn + scriptCloseTag.length;
+            }
+
+            this._populateWithContent(content);
+        }
+
+        this._requestingScriptContent = true;
+
+        var boundScriptContentAvailable = scriptContentAvailable.bind(this);
+        for (var i = 0; i < scripts.length; ++i)
+            scripts[i].requestContent().then(boundScriptContentAvailable);
+    }
+
+    _populateWithScriptContent()
+    {
+        console.assert(this._sourceCode instanceof WebInspector.Resource);
+        console.assert(!this._fullContentPopulated);
+        console.assert(!this._requestingScriptContent);
+
+        // We can assume this resource only has one script that starts at line/column 0.
+        var scripts = this._sourceCode.scripts;
+        console.assert(scripts.length === 1);
+        if (!scripts.length)
+            return;
+
+        console.assert(scripts[0].range.startLine === 0);
+        console.assert(scripts[0].range.startColumn === 0);
+
+        function scriptContentAvailable(parameters)
+        {
+            var content = parameters.content;
+            delete this._requestingScriptContent;
+
+            // Abort if the full content populated while waiting for this async callback.
+            if (this._fullContentPopulated)
+                return;
+
+            // This is the full content.
+            this._fullContentPopulated = true;
+
+            this._populateWithContent(content);
+        }
+
+        this._requestingScriptContent = true;
+
+        scripts[0].requestContent().then(scriptContentAvailable.bind(this));
+    }
+
+    _matchesSourceCodeLocation(sourceCodeLocation)
+    {
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return sourceCodeLocation.displaySourceCode === this._sourceCode;
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return sourceCodeLocation.sourceCode.url === this._sourceCode.url;
+        if (this._sourceCode instanceof WebInspector.Script)
+            return sourceCodeLocation.sourceCode === this._sourceCode;
+        return false;
+    }
+
+    _matchesBreakpoint(breakpoint)
+    {
+        console.assert(this._supportsDebugging);
+        if (this._sourceCode instanceof WebInspector.SourceMapResource)
+            return breakpoint.sourceCodeLocation.displaySourceCode === this._sourceCode;
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return breakpoint.url === this._sourceCode.url;
+        if (this._sourceCode instanceof WebInspector.Script)
+            return breakpoint.url === this._sourceCode.url || breakpoint.scriptIdentifier === this._sourceCode.id;
+        return false;
+    }
+
+    _matchesIssue(issue)
+    {
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return issue.url === this._sourceCode.url;
+        // FIXME: Support issues for Scripts based on id, not only by URL.
+        if (this._sourceCode instanceof WebInspector.Script)
+            return issue.url === this._sourceCode.url;
+        return false;
+    }
+
+    _issueWasAdded(event)
+    {
+        var issue = event.data.issue;
+        if (!this._matchesIssue(issue))
+            return;
+
+        this._addIssue(issue);
+    }
+
+    _addIssue(issue)
+    {
+        // FIXME: Issue should have a SourceCodeLocation.
+        var sourceCodeLocation = this._sourceCode.createSourceCodeLocation(issue.lineNumber, issue.columnNumber);
+        var lineNumber = sourceCodeLocation.formattedLineNumber;
+
+        var lineNumberIssues = this._issuesLineNumberMap.get(lineNumber);
+        if (!lineNumberIssues) {
+            lineNumberIssues = [];
+            this._issuesLineNumberMap.set(lineNumber, lineNumberIssues);
+        }
+
+        // Avoid displaying duplicate issues on the same line.
+        for (var existingIssue of lineNumberIssues) {
+            if (existingIssue.columnNumber === issue.columnNumber && existingIssue.text === issue.text)
+                return;
+        }
+
+        lineNumberIssues.push(issue);
+
+        if (issue.level === WebInspector.IssueMessage.Level.Error)
+            this.addStyleClassToLine(lineNumber, WebInspector.SourceCodeTextEditor.LineErrorStyleClassName);
+        else if (issue.level === WebInspector.IssueMessage.Level.Warning)
+            this.addStyleClassToLine(lineNumber, WebInspector.SourceCodeTextEditor.LineWarningStyleClassName);
+        else
+            console.error("Unknown issue level");
+
+        var widget = this._issueWidgetForLine(lineNumber);
+        if (widget) {
+            if (issue.level === WebInspector.IssueMessage.Level.Error)
+                widget.widgetElement.classList.add(WebInspector.SourceCodeTextEditor.LineErrorStyleClassName);
+            else if (issue.level === WebInspector.IssueMessage.Level.Warning)
+                widget.widgetElement.classList.add(WebInspector.SourceCodeTextEditor.LineWarningStyleClassName);
+
+            this._updateIssueWidgetForIssues(widget, lineNumberIssues);
+        }
+    }
+
+    _issueWidgetForLine(lineNumber)
+    {
+        var widget = this._widgetMap.get(lineNumber);
+        if (widget)
+            return widget;
+
+        widget = this.createWidgetForLine(lineNumber);
+        if (!widget)
+            return null;
+
+        var widgetElement = widget.widgetElement;
+        widgetElement.classList.add("issue-widget", "inline");
+        widgetElement.addEventListener("click", this._handleWidgetClick.bind(this, widget, lineNumber));
+
+        this._widgetMap.set(lineNumber, widget);
+
+        return widget;
+    }
+
+    _iconClassNameForIssueLevel(level)
+    {
+        if (level === WebInspector.IssueMessage.Level.Warning)
+            return "icon-warning";
+
+        console.assert(level === WebInspector.IssueMessage.Level.Error);
+        return "icon-error";
+    }
+
+    _updateIssueWidgetForIssues(widget, issues)
+    {
+        var widgetElement = widget.widgetElement;
+        widgetElement.removeChildren();
+
+        if (widgetElement.classList.contains("inline") || issues.length === 1) {
+            var arrowElement = widgetElement.appendChild(document.createElement("span"));
+            arrowElement.className = "arrow";
+
+            var iconElement = widgetElement.appendChild(document.createElement("span"));
+            iconElement.className = "icon";
+
+            var textElement = widgetElement.appendChild(document.createElement("span"));
+            textElement.className = "text";
+
+            if (issues.length === 1) {
+                iconElement.classList.add(this._iconClassNameForIssueLevel(issues[0].level));
+                textElement.textContent = issues[0].text;
+            } else {
+                var errorsCount = 0;
+                var warningsCount = 0;
+                for (var issue of issues) {
+                    if (issue.level === WebInspector.IssueMessage.Level.Error)
+                        ++errorsCount;
+                    else if (issue.level === WebInspector.IssueMessage.Level.Warning)
+                        ++warningsCount;
+                }
+
+                if (warningsCount && errorsCount) {
+                    iconElement.classList.add(this._iconClassNameForIssueLevel(issue.level));
+                    textElement.textContent = WebInspector.UIString("%d Errors, %d Warnings").format(errorsCount, warningsCount);
+                } else if (errorsCount) {
+                    iconElement.classList.add(this._iconClassNameForIssueLevel(issue.level));
+                    textElement.textContent = WebInspector.UIString("%d Errors").format(errorsCount);
+                } else if (warningsCount) {
+                    iconElement.classList.add(this._iconClassNameForIssueLevel(issue.level));
+                    textElement.textContent = WebInspector.UIString("%d Warnings").format(warningsCount);
+                }
+
+                widget[WebInspector.SourceCodeTextEditor.WidgetContainsMultipleIssuesSymbol] = true;
+            }
+        } else {
+            for (var issue of issues) {
+                var iconElement = widgetElement.appendChild(document.createElement("span"));
+                iconElement.className = "icon";
+                iconElement.classList.add(this._iconClassNameForIssueLevel(issue.level));
+
+                var textElement = widgetElement.appendChild(document.createElement("span"));
+                textElement.className = "text";
+                textElement.textContent = issue.text;
+
+                widgetElement.appendChild(document.createElement("br"));
+            }
+        }
+
+        widget.update();
+    }
+
+    _isWidgetToggleable(widget)
+    {
+        if (widget[WebInspector.SourceCodeTextEditor.WidgetContainsMultipleIssuesSymbol])
+            return true;
+
+        if (!widget.widgetElement.classList.contains("inline"))
+            return true;
+
+        var textElement = widget.widgetElement.lastChild;
+        if (textElement.offsetWidth !== textElement.scrollWidth)
+            return true;
+
+        return false;
+    }
+
+    _handleWidgetClick(widget, lineNumber, event)
+    {
+        if (!this._isWidgetToggleable(widget))
+            return;
+
+        widget.widgetElement.classList.toggle("inline");
+
+        var lineNumberIssues = this._issuesLineNumberMap.get(lineNumber);
+        this._updateIssueWidgetForIssues(widget, lineNumberIssues);
+    }
+
+    _breakpointInfoForBreakpoint(breakpoint)
+    {
+        return {resolved: breakpoint.resolved, disabled: breakpoint.disabled, autoContinue: breakpoint.autoContinue};
+    }
+
+    get _supportsDebugging()
+    {
+        if (this._sourceCode instanceof WebInspector.Resource)
+            return this._sourceCode.type === WebInspector.Resource.Type.Document || this._sourceCode.type === WebInspector.Resource.Type.Script;
+        if (this._sourceCode instanceof WebInspector.Script)
+            return true;
+        return false;
+    }
+
+    // TextEditor Delegate
+
+    textEditorBaseURL(textEditor)
+    {
+        return this._sourceCode.url;
+    }
+
+    textEditorShouldHideLineNumber(textEditor, lineNumber)
+    {
+        return lineNumber in this._invalidLineNumbers;
+    }
+
+    textEditorGutterContextMenu(textEditor, lineNumber, columnNumber, editorBreakpoints, event)
+    {
+        if (!this._supportsDebugging)
+            return;
+
+        event.preventDefault();
+
+        let addBreakpoint = () => {
+            let data = this.textEditorBreakpointAdded(this, lineNumber, columnNumber);
+            this.setBreakpointInfoForLineAndColumn(data.lineNumber, data.columnNumber, data.breakpointInfo);
+        };
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        // Paused. Add Continue to Here option only if we have a script identifier for the location.
+        if (WebInspector.debuggerManager.paused) {
+            let editorLineInfo = {lineNumber, columnNumber};
+            let unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(editorLineInfo);
+            let sourceCodeLocation = this._sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
+
+            let script;
+            if (sourceCodeLocation.sourceCode instanceof WebInspector.Script)
+                script = sourceCodeLocation.sourceCode;
+            else if (sourceCodeLocation.sourceCode instanceof WebInspector.Resource)
+                script = sourceCodeLocation.sourceCode.scriptForLocation(sourceCodeLocation);
+
+            if (script) {
+                contextMenu.appendItem(WebInspector.UIString("Continue to Here"), () => {
+                    WebInspector.debuggerManager.continueToLocation(script.id, sourceCodeLocation.lineNumber, sourceCodeLocation.columnNumber);
+                });
+                contextMenu.appendSeparator();
+            }
+        }
+
+        let breakpoints = [];
+        for (let lineInfo of editorBreakpoints) {
+            let breakpoint = this._breakpointForEditorLineInfo(lineInfo);
+            console.assert(breakpoint);
+            if (breakpoint)
+                breakpoints.push(breakpoint);
+        }
+
+        // No breakpoints.
+        if (!breakpoints.length) {
+            contextMenu.appendItem(WebInspector.UIString("Add Breakpoint"), addBreakpoint.bind(this));
+            return;
+        }
+
+        // Single breakpoint.
+        if (breakpoints.length === 1) {
+            WebInspector.breakpointPopoverController.appendContextMenuItems(contextMenu, breakpoints[0], event.target);
+
+            if (!WebInspector.isShowingDebuggerTab()) {
+                contextMenu.appendSeparator();
+                contextMenu.appendItem(WebInspector.UIString("Reveal in Debugger Tab"), () => {
+                    WebInspector.showDebuggerTab(breakpoint);
+                });
+            }
+
+            return;
+        }
+
+        // Multiple breakpoints.
+        let removeBreakpoints = () => {
+            for (let breakpoint of breakpoints) {
+                if (WebInspector.debuggerManager.isBreakpointRemovable(breakpoint))
+                    WebInspector.debuggerManager.removeBreakpoint(breakpoint);
+            }
+        };
+
+        let shouldDisable = breakpoints.some((breakpoint) => !breakpoint.disabled);
+        let toggleBreakpoints = (shouldDisable) => {
+            for (let breakpoint of breakpoints)
+                breakpoint.disabled = shouldDisable;
+        };
+
+        if (shouldDisable)
+            contextMenu.appendItem(WebInspector.UIString("Disable Breakpoints"), toggleBreakpoints);
+        else
+            contextMenu.appendItem(WebInspector.UIString("Enable Breakpoints"), toggleBreakpoints);
+        contextMenu.appendItem(WebInspector.UIString("Delete Breakpoints"), removeBreakpoints);
+    }
+
+    textEditorBreakpointAdded(textEditor, lineNumber, columnNumber)
+    {
+        if (!this._supportsDebugging)
+            return null;
+
+        var editorLineInfo = {lineNumber, columnNumber};
+        var unformattedLineInfo = this._unformattedLineInfoForEditorLineInfo(editorLineInfo);
+        var sourceCodeLocation = this._sourceCode.createSourceCodeLocation(unformattedLineInfo.lineNumber, unformattedLineInfo.columnNumber);
+        var breakpoint = new WebInspector.Breakpoint(sourceCodeLocation);
+
+        var lineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._addBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+
+        this._ignoreBreakpointAddedBreakpoint = breakpoint;
+
+        var shouldSkipEventDispatch = false;
+        var shouldSpeculativelyResolveBreakpoint = true;
+        WebInspector.debuggerManager.addBreakpoint(breakpoint, shouldSkipEventDispatch, shouldSpeculativelyResolveBreakpoint);
+        delete this._ignoreBreakpointAddedBreakpoint;
+
+        // Return the more accurate location and breakpoint info.
+        return {
+            breakpointInfo: this._breakpointInfoForBreakpoint(breakpoint),
+            lineNumber: lineInfo.lineNumber,
+            columnNumber: lineInfo.columnNumber
+        };
+    }
+
+    textEditorBreakpointRemoved(textEditor, lineNumber, columnNumber)
+    {
+        console.assert(this._supportsDebugging);
+        if (!this._supportsDebugging)
+            return;
+
+        var lineInfo = {lineNumber, columnNumber};
+        var breakpoint = this._breakpointForEditorLineInfo(lineInfo);
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        this._removeBreakpointWithEditorLineInfo(breakpoint, lineInfo);
+
+        this._ignoreBreakpointRemovedBreakpoint = breakpoint;
+        WebInspector.debuggerManager.removeBreakpoint(breakpoint);
+        delete this._ignoreBreakpointAddedBreakpoint;
+    }
+
+    textEditorBreakpointMoved(textEditor, oldLineNumber, oldColumnNumber, newLineNumber, newColumnNumber)
+    {
+        console.assert(this._supportsDebugging);
+        if (!this._supportsDebugging)
+            return;
+
+        var oldLineInfo = {lineNumber: oldLineNumber, columnNumber: oldColumnNumber};
+        var breakpoint = this._breakpointForEditorLineInfo(oldLineInfo);
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        this._removeBreakpointWithEditorLineInfo(breakpoint, oldLineInfo);
+
+        var newLineInfo = {lineNumber: newLineNumber, columnNumber: newColumnNumber};
+        var unformattedNewLineInfo = this._unformattedLineInfoForEditorLineInfo(newLineInfo);
+        this._ignoreLocationUpdateBreakpoint = breakpoint;
+        breakpoint.sourceCodeLocation.update(this._sourceCode, unformattedNewLineInfo.lineNumber, unformattedNewLineInfo.columnNumber);
+        delete this._ignoreLocationUpdateBreakpoint;
+
+        var accurateNewLineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+        this._addBreakpointWithEditorLineInfo(breakpoint, accurateNewLineInfo);
+
+        if (accurateNewLineInfo.lineNumber !== newLineInfo.lineNumber || accurateNewLineInfo.columnNumber !== newLineInfo.columnNumber)
+            this.updateBreakpointLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, accurateNewLineInfo.lineNumber, accurateNewLineInfo.columnNumber);
+    }
+
+    textEditorBreakpointClicked(textEditor, lineNumber, columnNumber)
+    {
+        console.assert(this._supportsDebugging);
+        if (!this._supportsDebugging)
+            return;
+
+        var breakpoint = this._breakpointForEditorLineInfo({lineNumber, columnNumber});
+        console.assert(breakpoint);
+        if (!breakpoint)
+            return;
+
+        breakpoint.cycleToNextMode();
+    }
+
+    textEditorUpdatedFormatting(textEditor)
+    {
+        this._ignoreAllBreakpointLocationUpdates = true;
+        this._sourceCode.formatterSourceMap = this.formatterSourceMap;
+        delete this._ignoreAllBreakpointLocationUpdates;
+
+        // Always put the source map on both the Script and Resource if both exist. For example,
+        // if this SourceCode is a Resource, then there might also be a Script. In the debugger,
+        // the backend identifies call frames with Script line and column information, and the
+        // Script needs the formatter source map to produce the proper display line and column.
+        if (this._sourceCode instanceof WebInspector.Resource && !(this._sourceCode instanceof WebInspector.SourceMapResource)) {
+            var scripts = this._sourceCode.scripts;
+            for (var i = 0; i < scripts.length; ++i)
+                scripts[i].formatterSourceMap = this.formatterSourceMap;
+        } else if (this._sourceCode instanceof WebInspector.Script) {
+            if (this._sourceCode.resource)
+                this._sourceCode.resource.formatterSourceMap = this.formatterSourceMap;
+        }
+
+        // Some breakpoints / issues may have moved, some might not have. Just go through
+        // and remove and reinsert all the breakpoints / issues.
+
+        var oldBreakpointMap = this._breakpointMap;
+        this._breakpointMap = {};
+
+        for (var lineNumber in oldBreakpointMap) {
+            for (var columnNumber in oldBreakpointMap[lineNumber]) {
+                var breakpoint = oldBreakpointMap[lineNumber][columnNumber];
+                var newLineInfo = this._editorLineInfoForSourceCodeLocation(breakpoint.sourceCodeLocation);
+                this._addBreakpointWithEditorLineInfo(breakpoint, newLineInfo);
+                this.setBreakpointInfoForLineAndColumn(lineNumber, columnNumber, null);
+                this.setBreakpointInfoForLineAndColumn(newLineInfo.lineNumber, newLineInfo.columnNumber, this._breakpointInfoForBreakpoint(breakpoint));
+            }
+        }
+
+        this._reinsertAllIssues();
+    }
+
+    _clearWidgets()
+    {
+        for (var widget of this._widgetMap.values())
+            widget.clear();
+
+        this._widgetMap.clear();
+    }
+
+    _reinsertAllIssues()
+    {
+        this._issuesLineNumberMap.clear();
+        this._clearWidgets();
+
+        var issues = WebInspector.issueManager.issuesForSourceCode(this._sourceCode);
+        for (var issue of issues) {
+            console.assert(this._matchesIssue(issue));
+            this._addIssue(issue);
+        }
+    }
+
+    _debuggerDidPause(event)
+    {
+        this._updateTokenTrackingControllerState();
+        if (this._typeTokenAnnotator && this._typeTokenAnnotator.isActive())
+            this._typeTokenAnnotator.refresh();
+        if (this._basicBlockAnnotator && this._basicBlockAnnotator.isActive())
+            this._basicBlockAnnotator.refresh();
+    }
+
+    _debuggerDidResume(event)
+    {
+        this._updateTokenTrackingControllerState();
+        this._dismissPopover();
+        if (this._typeTokenAnnotator && this._typeTokenAnnotator.isActive())
+            this._typeTokenAnnotator.refresh();
+        if (this._basicBlockAnnotator && this._basicBlockAnnotator.isActive())
+            this._basicBlockAnnotator.refresh();
+    }
+
+    _sourceCodeSourceMapAdded(event)
+    {
+        WebInspector.notifications.addEventListener(WebInspector.Notification.GlobalModifierKeysDidChange, this._updateTokenTrackingControllerState, this);
+        this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this._sourceCodeSourceMapAdded, this);
+
+        this._updateTokenTrackingControllerState();
+    }
+
+    _updateTokenTrackingControllerState()
+    {
+        var mode = WebInspector.CodeMirrorTokenTrackingController.Mode.None;
+        if (WebInspector.debuggerManager.paused)
+            mode = WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression;
+        else if (this._typeTokenAnnotator && this._typeTokenAnnotator.isActive())
+            mode = WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptTypeInformation;
+        else if (this._hasColorMarkers())
+            mode = WebInspector.CodeMirrorTokenTrackingController.Mode.MarkedTokens;
+        else if ((this._sourceCode instanceof WebInspector.SourceMapResource || this._sourceCode.sourceMaps.length !== 0) && WebInspector.modifierKeys.metaKey && !WebInspector.modifierKeys.altKey && !WebInspector.modifierKeys.shiftKey)
+            mode = WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens;
+
+        this.tokenTrackingController.enabled = mode !== WebInspector.CodeMirrorTokenTrackingController.Mode.None;
+
+        if (mode === this.tokenTrackingController.mode)
+            return;
+
+        switch (mode) {
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.MarkedTokens:
+            this.tokenTrackingController.mouseOverDelayDuration = 0;
+            this.tokenTrackingController.mouseOutReleaseDelayDuration = 0;
+            break;
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens:
+            this.tokenTrackingController.mouseOverDelayDuration = 0;
+            this.tokenTrackingController.mouseOutReleaseDelayDuration = 0;
+            this.tokenTrackingController.classNameForHighlightedRange = WebInspector.CodeMirrorTokenTrackingController.JumpToSymbolHighlightStyleClassName;
+            this._dismissPopover();
+            break;
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression:
+        case WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptTypeInformation:
+            this.tokenTrackingController.mouseOverDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOverTokenToMakeHoveredToken;
+            this.tokenTrackingController.mouseOutReleaseDelayDuration = WebInspector.SourceCodeTextEditor.DurationToMouseOutOfHoveredTokenToRelease;
+            this.tokenTrackingController.classNameForHighlightedRange = WebInspector.SourceCodeTextEditor.HoveredExpressionHighlightStyleClassName;
+            break;
+        }
+
+        this.tokenTrackingController.mode = mode;
+    }
+
+    _hasColorMarkers()
+    {
+        for (var marker of this.markers) {
+            if (marker.type === WebInspector.TextMarker.Type.Color)
+                return true;
+        }
+        return false;
+    }
+
+    // CodeMirrorTokenTrackingController Delegate
+
+    tokenTrackingControllerCanReleaseHighlightedRange(tokenTrackingController, element)
+    {
+        if (!this._popover)
+            return true;
+
+        if (!window.getSelection().isCollapsed && this._popover.element.contains(window.getSelection().anchorNode))
+            return false;
+
+        return true;
+    }
+
+    tokenTrackingControllerHighlightedRangeReleased(tokenTrackingController, forceHide = false)
+    {
+        if (forceHide || !this._mouseIsOverPopover)
+            this._dismissPopover();
+    }
+
+    tokenTrackingControllerHighlightedRangeWasClicked(tokenTrackingController)
+    {
+        if (this.tokenTrackingController.mode !== WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens)
+            return;
+
+        // Links are handled by TextEditor.
+        if (/\blink\b/.test(this.tokenTrackingController.candidate.hoveredToken.type))
+            return;
+
+        var sourceCodeLocation = this._sourceCodeLocationForEditorPosition(this.tokenTrackingController.candidate.hoveredTokenRange.start);
+        if (this.sourceCode instanceof WebInspector.SourceMapResource)
+            WebInspector.showOriginalOrFormattedSourceCodeLocation(sourceCodeLocation);
+        else
+            WebInspector.showSourceCodeLocation(sourceCodeLocation);
+    }
+
+    tokenTrackingControllerNewHighlightCandidate(tokenTrackingController, candidate)
+    {
+        if (this.tokenTrackingController.mode === WebInspector.CodeMirrorTokenTrackingController.Mode.NonSymbolTokens) {
+            this.tokenTrackingController.highlightRange(candidate.hoveredTokenRange);
+            return;
+        }
+
+        if (this.tokenTrackingController.mode === WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptExpression) {
+            this._tokenTrackingControllerHighlightedJavaScriptExpression(candidate);
+            return;
+        }
+
+        if (this.tokenTrackingController.mode === WebInspector.CodeMirrorTokenTrackingController.Mode.JavaScriptTypeInformation) {
+            this._tokenTrackingControllerHighlightedJavaScriptTypeInformation(candidate);
+            return;
+        }
+
+        if (this.tokenTrackingController.mode === WebInspector.CodeMirrorTokenTrackingController.Mode.MarkedTokens) {
+            var markers = this.markersAtPosition(candidate.hoveredTokenRange.start);
+            if (markers.length > 0)
+                this._tokenTrackingControllerHighlightedMarkedExpression(candidate, markers);
+            else
+                this._dismissEditingController();
+        }
+    }
+
+    tokenTrackingControllerMouseOutOfHoveredMarker(tokenTrackingController, hoveredMarker)
+    {
+        this._dismissEditingController();
+    }
+
+    _tokenTrackingControllerHighlightedJavaScriptExpression(candidate)
+    {
+        console.assert(candidate.expression);
+
+        function populate(error, result, wasThrown)
+        {
+            if (error || wasThrown)
+                return;
+
+            if (candidate !== this.tokenTrackingController.candidate)
+                return;
+
+            var data = WebInspector.RemoteObject.fromPayload(result);
+            switch (data.type) {
+            case "function":
+                this._showPopoverForFunction(data);
+                break;
+            case "object":
+                if (data.subtype === "null" || data.subtype === "regexp")
+                    this._showPopoverWithFormattedValue(data);
+                else
+                    this._showPopoverForObject(data);
+                break;
+            case "string":
+            case "number":
+            case "boolean":
+            case "undefined":
+            case "symbol":
+                this._showPopoverWithFormattedValue(data);
+                break;
+            }
+        }
+
+        var expression = appendWebInspectorSourceURL(candidate.expression);
+
+        if (WebInspector.debuggerManager.activeCallFrame) {
+            DebuggerAgent.evaluateOnCallFrame.invoke({callFrameId: WebInspector.debuggerManager.activeCallFrame.id, expression, objectGroup: "popover", doNotPauseOnExceptionsAndMuteConsole: true}, populate.bind(this));
+            return;
+        }
+
+        // No call frame available. Use the main page's context.
+        RuntimeAgent.evaluate.invoke({expression, objectGroup: "popover", doNotPauseOnExceptionsAndMuteConsole: true}, populate.bind(this));
+    }
+
+    _tokenTrackingControllerHighlightedJavaScriptTypeInformation(candidate)
+    {
+        console.assert(candidate.expression);
+
+        var sourceCode = this._sourceCode;
+        var sourceID = sourceCode instanceof WebInspector.Script ? sourceCode.id : sourceCode.scripts[0].id;
+        var range = candidate.hoveredTokenRange;
+        var offset = this.currentPositionToOriginalOffset({line: range.start.line, ch: range.start.ch});
+
+        var allRequests = [{
+            typeInformationDescriptor: WebInspector.ScriptSyntaxTree.TypeProfilerSearchDescriptor.NormalExpression,
+            sourceID,
+            divot: offset
+        }];
+
+        function handler(error, allTypes) {
+            if (error)
+                return;
+
+            if (candidate !== this.tokenTrackingController.candidate)
+                return;
+
+            console.assert(allTypes.length === 1);
+            if (!allTypes.length)
+                return;
+
+            var typeDescription = WebInspector.TypeDescription.fromPayload(allTypes[0]);
+            if (typeDescription.valid) {
+                var popoverTitle = WebInspector.TypeTokenView.titleForPopover(WebInspector.TypeTokenView.TitleType.Variable, candidate.expression);
+                this.showPopoverForTypes(typeDescription, null, popoverTitle);
+            }
+        }
+
+        RuntimeAgent.getRuntimeTypesForVariablesAtOffsets(allRequests, handler.bind(this));
+    }
+
+    _showPopover(content, bounds)
+    {
+        console.assert(this.tokenTrackingController.candidate || bounds);
+
+        var shouldHighlightRange = false;
+        var candidate = this.tokenTrackingController.candidate;
+        // If bounds is falsey, this is a popover introduced from a hover event.
+        // Otherwise, this is called from TypeTokenAnnotator.
+        if (!bounds) {
+            if (!candidate)
+                return;
+
+            var rects = this.rectsForRange(candidate.hoveredTokenRange);
+            bounds = WebInspector.Rect.unionOfRects(rects);
+
+            shouldHighlightRange = true;
+        }
+
+        content.classList.add(WebInspector.SourceCodeTextEditor.PopoverDebuggerContentStyleClassName);
+
+        this._popover = this._popover || new WebInspector.Popover(this);
+        this._popover.presentNewContentWithFrame(content, bounds.pad(5), [WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MAX_X]);
+        if (shouldHighlightRange)
+            this.tokenTrackingController.highlightRange(candidate.expressionRange);
+
+        this._trackPopoverEvents();
+    }
+
+    _showPopoverForFunction(data)
+    {
+        let candidate = this.tokenTrackingController.candidate;
+
+        function didGetDetails(error, response)
+        {
+            if (error) {
+                console.error(error);
+                this._dismissPopover();
+                return;
+            }
+
+            // Nothing to do if the token has changed since the time we
+            // asked for the function details from the backend.
+            if (candidate !== this.tokenTrackingController.candidate)
+                return;
+
+            let wrapper = document.createElement("div");
+            wrapper.classList.add("body", "formatted-function");
+            wrapper.textContent = data.description;
+
+            let content = document.createElement("div");
+            content.classList.add("function");
+
+            let location = response.location;
+            let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId);
+            let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber);
+            let functionSourceCodeLink = WebInspector.createSourceCodeLocationLink(sourceCodeLocation);
+
+            let title = content.appendChild(document.createElement("div"));
+            title.classList.add("title");
+            title.textContent = response.name || response.inferredName || response.displayName || WebInspector.UIString("(anonymous function)");
+            title.appendChild(functionSourceCodeLink);
+
+            content.appendChild(wrapper);
+
+            this._showPopover(content);
+        }
+        DebuggerAgent.getFunctionDetails(data.objectId, didGetDetails.bind(this));
+    }
+
+    _showPopoverForObject(data)
+    {
+        var content = document.createElement("div");
+        content.className = "object expandable";
+
+        var titleElement = document.createElement("div");
+        titleElement.className = "title";
+        titleElement.textContent = data.description;
+        content.appendChild(titleElement);
+
+        if (data.subtype === "node") {
+            data.pushNodeToFrontend(function(nodeId) {
+                if (!nodeId)
+                    return;
+
+                var domNode = WebInspector.domTreeManager.nodeForId(nodeId);
+                if (!domNode.ownerDocument)
+                    return;
+
+                var goToButton = titleElement.appendChild(WebInspector.createGoToArrowButton());
+                goToButton.addEventListener("click", function() {
+                    WebInspector.domTreeManager.inspectElement(nodeId);
+                });
+            });
+        }
+
+        // FIXME: If this is a variable, it would be nice to put the variable name in the PropertyPath.
+        var objectTree = new WebInspector.ObjectTreeView(data);
+        objectTree.showOnlyProperties();
+        objectTree.expand();
+
+        var bodyElement = content.appendChild(document.createElement("div"));
+        bodyElement.className = "body";
+        bodyElement.appendChild(objectTree.element);
+
+        // Show the popover once we have the first set of properties for the object.
+        var candidate = this.tokenTrackingController.candidate;
+        objectTree.addEventListener(WebInspector.ObjectTreeView.Event.Updated, function() {
+            if (candidate === this.tokenTrackingController.candidate)
+                this._showPopover(content);
+            objectTree.removeEventListener(null, null, this);
+        }, this);
+    }
+
+    _showPopoverWithFormattedValue(remoteObject)
+    {
+        var content = WebInspector.FormattedValue.createElementForRemoteObject(remoteObject);
+        this._showPopover(content);
+    }
+
+    willDismissPopover(popover)
+    {
+        this.tokenTrackingController.removeHighlightedRange();
+
+        RuntimeAgent.releaseObjectGroup("popover");
+    }
+
+    _dismissPopover()
+    {
+        if (!this._popover)
+            return;
+
+        this._popover.dismiss();
+
+        if (this._popoverEventListeners && this._popoverEventListenersAreRegistered) {
+            this._popoverEventListenersAreRegistered = false;
+            this._popoverEventListeners.unregister();
+        }
+    }
+
+    _trackPopoverEvents()
+    {
+        if (!this._popoverEventListeners)
+            this._popoverEventListeners = new WebInspector.EventListenerSet(this, "Popover listeners");
+        if (!this._popoverEventListenersAreRegistered) {
+            this._popoverEventListenersAreRegistered = true;
+            this._popoverEventListeners.register(this._popover.element, "mouseover", this._popoverMouseover);
+            this._popoverEventListeners.register(this._popover.element, "mouseout", this._popoverMouseout);
+            this._popoverEventListeners.install();
+        }
+    }
+
+    _popoverMouseover(event)
+    {
+        this._mouseIsOverPopover = true;
+    }
+
+    _popoverMouseout(event)
+    {
+        this._mouseIsOverPopover = this._popover.element.contains(event.relatedTarget);
+    }
+
+    _updateEditableMarkers(range)
+    {
+        this.createColorMarkers(range);
+        this.createGradientMarkers(range);
+        this.createCubicBezierMarkers(range);
+
+        this._updateTokenTrackingControllerState();
+    }
+
+    _tokenTrackingControllerHighlightedMarkedExpression(candidate, markers)
+    {
+        // Look for the outermost editable marker.
+        var editableMarker;
+        for (var marker of markers) {
+            if (!marker.range || (marker.type !== WebInspector.TextMarker.Type.Color && marker.type !== WebInspector.TextMarker.Type.Gradient && marker.type !== WebInspector.TextMarker.Type.CubicBezier))
+                continue;
+
+            if (!editableMarker || (marker.range.startLine < editableMarker.range.startLine || (marker.range.startLine === editableMarker.range.startLine && marker.range.startColumn < editableMarker.range.startColumn)))
+                editableMarker = marker;
+        }
+
+        if (!editableMarker) {
+            this.tokenTrackingController.hoveredMarker = null;
+            return;
+        }
+
+        if (this.tokenTrackingController.hoveredMarker === editableMarker)
+            return;
+
+        this._dismissEditingController();
+
+        this.tokenTrackingController.hoveredMarker = editableMarker;
+
+        this._editingController = this.editingControllerForMarker(editableMarker);
+
+        if (marker.type === WebInspector.TextMarker.Type.Color) {
+            var color = this._editingController.value;
+            if (!color || !color.valid) {
+                editableMarker.clear();
+                delete this._editingController;
+                return;
+            }
+        }
+
+        this._editingController.delegate = this;
+        this._editingController.presentHoverMenu();
+    }
+
+    _dismissEditingController(discrete)
+    {
+        if (this._editingController)
+            this._editingController.dismissHoverMenu(discrete);
+
+        this.tokenTrackingController.hoveredMarker = null;
+        delete this._editingController;
+    }
+
+    // CodeMirrorEditingController Delegate
+
+    editingControllerDidStartEditing(editingController)
+    {
+        // We can pause the token tracking controller during editing, it will be reset
+        // to the expected state by calling _updateEditableMarkers() in the
+        // editingControllerDidFinishEditing delegate.
+        this.tokenTrackingController.enabled = false;
+
+        // We clear the marker since we'll reset it after editing.
+        editingController.marker.clear();
+
+        // We ignore content changes made as a result of color editing.
+        this._ignoreContentDidChange++;
+    }
+
+    editingControllerDidFinishEditing(editingController)
+    {
+        this._updateEditableMarkers(editingController.range);
+
+        this._ignoreContentDidChange--;
+
+        delete this._editingController;
+    }
+
+    _setTypeTokenAnnotatorEnabledState(shouldActivate)
+    {
+        console.assert(this._typeTokenAnnotator);
+        if (!this._typeTokenAnnotator)
+            return;
+
+        if (shouldActivate) {
+            console.assert(this.visible, "Annotators should not be enabled if the TextEditor is not visible");
+
+            RuntimeAgent.enableTypeProfiler();
+
+            this._typeTokenAnnotator.reset();
+            if (this._basicBlockAnnotator) {
+                console.assert(!this._basicBlockAnnotator.isActive());
+                this._basicBlockAnnotator.reset();
+            }
+
+            if (!this._typeTokenScrollHandler)
+                this._enableScrollEventsForTypeTokenAnnotator();
+        } else {
+            // Because we disable type profiling when exiting the inspector, there is no need to call
+            // RuntimeAgent.disableTypeProfiler() here.  If we were to call it here, JavaScriptCore would
+            // compile out all the necessary type profiling information, so if a user were to quickly press then
+            // unpress the type profiling button, we wouldn't be able to re-show type information which would
+            // provide a confusing user experience.
+
+            this._typeTokenAnnotator.clear();
+            if (this._basicBlockAnnotator)
+                this._basicBlockAnnotator.clear();
+
+            if (this._typeTokenScrollHandler)
+                this._disableScrollEventsForTypeTokenAnnotator();
+        }
+
+        WebInspector.showJavaScriptTypeInformationSetting.value = shouldActivate;
+
+        this._updateTokenTrackingControllerState();
+    }
+
+    _getAssociatedScript()
+    {
+        var script = null;
+        // FIXME: This needs to me modified to work with HTML files with inline script tags.
+        if (this._sourceCode instanceof WebInspector.Script)
+            script = this._sourceCode;
+        else if (this._sourceCode instanceof WebInspector.Resource && this._sourceCode.type === WebInspector.Resource.Type.Script && this._sourceCode.scripts.length)
+            script = this._sourceCode.scripts[0];
+        return script;
+    }
+
+    _makeTypeTokenAnnotator()
+    {
+        // COMPATIBILITY (iOS 8): Runtime.getRuntimeTypesForVariablesAtOffsets did not exist yet.
+        if (!RuntimeAgent.getRuntimeTypesForVariablesAtOffsets)
+            return;
+
+        var script = this._getAssociatedScript();
+        if (!script)
+            return;
+
+        this._typeTokenAnnotator = new WebInspector.TypeTokenAnnotator(this, script);
+    }
+
+    _makeBasicBlockAnnotator()
+    {
+        // COMPATIBILITY (iOS 8): Runtime.getBasicBlocks did not exist yet.
+        if (!RuntimeAgent.getBasicBlocks)
+            return;
+
+        var script = this._getAssociatedScript();
+        if (!script)
+            return;
+
+        this._basicBlockAnnotator = new WebInspector.BasicBlockAnnotator(this, script);
+    }
+
+    _enableScrollEventsForTypeTokenAnnotator()
+    {
+        // Pause updating type tokens while scrolling to prevent frame loss.
+        console.assert(!this._typeTokenScrollHandler);
+        this._typeTokenScrollHandler = this._makeTypeTokenScrollEventHandler();
+        this.addScrollHandler(this._typeTokenScrollHandler);
+    }
+
+    _disableScrollEventsForTypeTokenAnnotator()
+    {
+        console.assert(this._typeTokenScrollHandler);
+        this.removeScrollHandler(this._typeTokenScrollHandler);
+        this._typeTokenScrollHandler = null;
+    }
+
+    _makeTypeTokenScrollEventHandler()
+    {
+        var timeoutIdentifier = null;
+        function scrollHandler()
+        {
+            if (timeoutIdentifier)
+                clearTimeout(timeoutIdentifier);
+            else {
+                if (this._typeTokenAnnotator)
+                    this._typeTokenAnnotator.pause();
+                if (this._basicBlockAnnotator)
+                    this._basicBlockAnnotator.pause();
+            }
+
+            timeoutIdentifier = setTimeout(function() {
+                timeoutIdentifier = null;
+                if (this._typeTokenAnnotator)
+                    this._typeTokenAnnotator.resume();
+                if (this._basicBlockAnnotator)
+                    this._basicBlockAnnotator.resume();
+            }.bind(this), WebInspector.SourceCodeTextEditor.DurationToUpdateTypeTokensAfterScrolling);
+        }
+
+        return scrollHandler.bind(this);
+    }
+};
+
+WebInspector.SourceCodeTextEditor.LineErrorStyleClassName = "error";
+WebInspector.SourceCodeTextEditor.LineWarningStyleClassName = "warning";
+WebInspector.SourceCodeTextEditor.PopoverDebuggerContentStyleClassName = "debugger-popover-content";
+WebInspector.SourceCodeTextEditor.HoveredExpressionHighlightStyleClassName = "hovered-expression-highlight";
+WebInspector.SourceCodeTextEditor.DurationToMouseOverTokenToMakeHoveredToken = 500;
+WebInspector.SourceCodeTextEditor.DurationToMouseOutOfHoveredTokenToRelease = 1000;
+WebInspector.SourceCodeTextEditor.DurationToUpdateTypeTokensAfterScrolling = 100;
+WebInspector.SourceCodeTextEditor.WidgetContainsMultipleIssuesSymbol = Symbol("source-code-widget-contains-multiple-issues");
+
+WebInspector.SourceCodeTextEditor.Event = {
+    ContentWillPopulate: "source-code-text-editor-content-will-populate",
+    ContentDidPopulate: "source-code-text-editor-content-did-populate"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js
new file mode 100644
index 000000000..6982d3c71
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTimelineDataGridNode.js
@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTimelineTimelineDataGridNode = class SourceCodeTimelineTimelineDataGridNode extends WebInspector.TimelineDataGridNode
+{
+    constructor(sourceCodeTimeline, graphDataSource)
+    {
+        super(true, graphDataSource);
+
+        this._sourceCodeTimeline = sourceCodeTimeline;
+        this._sourceCodeTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._timelineRecordAdded, this);
+    }
+
+    // Public
+
+    get records()
+    {
+        return this._sourceCodeTimeline.records;
+    }
+
+    get sourceCodeTimeline()
+    {
+        return this._sourceCodeTimeline;
+    }
+
+    get data()
+    {
+        return {graph: this._sourceCodeTimeline.startTime};
+    }
+
+    // Private
+
+    _timelineRecordAdded(event)
+    {
+        if (this.isRecordVisible(event.data.record))
+            this.needsGraphRefresh();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js
new file mode 100644
index 000000000..162b57bee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTimelineTreeElement.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTimelineTreeElement = class SourceCodeTimelineTreeElement extends WebInspector.TimelineRecordTreeElement
+{
+    constructor(sourceCodeTimeline, subtitleNameStyle, includeDetailsInMainTitle)
+    {
+        console.assert(sourceCodeTimeline);
+
+        subtitleNameStyle = subtitleNameStyle || WebInspector.SourceCodeLocation.NameStyle.None;
+
+        super(sourceCodeTimeline.records[0], subtitleNameStyle, includeDetailsInMainTitle, sourceCodeTimeline.sourceCodeLocation, sourceCodeTimeline);
+
+        this._sourceCodeTimeline = sourceCodeTimeline;
+    }
+
+    // Public
+
+    get record()
+    {
+        return undefined;
+    }
+
+    get sourceCodeTimeline()
+    {
+        return this._sourceCodeTimeline;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js
new file mode 100644
index 000000000..95e657dfd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.js
@@ -0,0 +1,203 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceCodeTreeElement = class SourceCodeTreeElement extends WebInspector.FolderizedTreeElement
+{
+    constructor(sourceCode, classNames, title, subtitle, representedObject, hasChildren)
+    {
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+        super(classNames, title, subtitle, representedObject || sourceCode, hasChildren);
+
+        this._updateSourceCode(sourceCode);
+    }
+
+    // Public
+
+    updateSourceMapResources()
+    {
+        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
+            return;
+
+        this.hasChildren = !!this._sourceCode.sourceMaps.length;
+        this.shouldRefreshChildren = this.hasChildren;
+
+        if (!this.hasChildren)
+            this.removeChildren();
+    }
+
+    // Overrides from TreeElement
+
+    onattach()
+    {
+        super.onattach();
+
+        this.updateSourceMapResources();
+    }
+
+    onpopulate()
+    {
+        if (!this.treeOutline || !this.treeOutline.includeSourceMapResourceChildren)
+            return;
+
+        if (!this.hasChildren || !this.shouldRefreshChildren)
+            return;
+
+        this.shouldRefreshChildren = false;
+
+        this.removeChildren();
+
+        function combineFolderChain(topFolder, bottomFolder)
+        {
+            console.assert(topFolder.children.length === 1);
+
+            var components = [];
+
+            for (var currentFolder = bottomFolder; currentFolder !== topFolder; currentFolder = currentFolder.parent)
+                components.push(currentFolder.mainTitle);
+            components.push(topFolder.mainTitle);
+
+            var folderName = components.reverse().join("/");
+            var newFolder = new WebInspector.FolderTreeElement(folderName);
+
+            var folderIndex = topFolder.parent.children.indexOf(topFolder);
+            topFolder.parent.insertChild(newFolder, folderIndex);
+            topFolder.parent.removeChild(topFolder);
+
+            var children = bottomFolder.children;
+            bottomFolder.removeChildren();
+            for (var i = 0; i < children.length; ++i)
+                newFolder.appendChild(children[i]);
+        }
+
+        function findAndCombineFolderChains(treeElement, previousSingleTreeElement)
+        {
+            if (!(treeElement instanceof WebInspector.FolderTreeElement)) {
+                if (previousSingleTreeElement && previousSingleTreeElement !== treeElement.parent)
+                    combineFolderChain(previousSingleTreeElement, treeElement.parent);
+                return;
+            }
+
+            if (previousSingleTreeElement && treeElement.children.length !== 1) {
+                combineFolderChain(previousSingleTreeElement, treeElement);
+                previousSingleTreeElement = null;
+            }
+
+            if (!previousSingleTreeElement && treeElement.children.length === 1)
+                previousSingleTreeElement = treeElement;
+
+            for (var i = 0; i < treeElement.children.length; ++i)
+                findAndCombineFolderChains(treeElement.children[i], previousSingleTreeElement);
+        }
+
+        var sourceMaps = this._sourceCode.sourceMaps;
+        for (var i = 0; i < sourceMaps.length; ++i) {
+            var sourceMap = sourceMaps[i];
+            for (var j = 0; j < sourceMap.resources.length; ++j) {
+                var sourceMapResource = sourceMap.resources[j];
+                var relativeSubpath = sourceMapResource.sourceMapDisplaySubpath;
+                var folderTreeElement = this.createFoldersAsNeededForSubpath(relativeSubpath);
+                var sourceMapTreeElement = new WebInspector.SourceMapResourceTreeElement(sourceMapResource);
+                folderTreeElement.insertChild(sourceMapTreeElement, insertionIndexForObjectInListSortedByFunction(sourceMapTreeElement, folderTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements));
+            }
+        }
+
+        for (var i = 0; i < this.children.length; ++i)
+            findAndCombineFolderChains(this.children[i], null);
+    }
+
+    // Protected
+
+    createFoldersAsNeededForSubpath(subpath)
+    {
+        if (!subpath)
+            return this;
+
+        var components = subpath.split("/");
+        if (components.length === 1)
+            return this;
+
+        if (!this._subpathFolderTreeElementMap)
+            this._subpathFolderTreeElementMap = {};
+
+        var currentPath = "";
+        var currentFolderTreeElement = this;
+
+        for (var i = 0; i < components.length - 1; ++i) {
+            var componentName = components[i];
+            currentPath += (i ? "/" : "") + componentName;
+
+            var cachedFolder = this._subpathFolderTreeElementMap[currentPath];
+            if (cachedFolder) {
+                currentFolderTreeElement = cachedFolder;
+                continue;
+            }
+
+            var newFolder = new WebInspector.FolderTreeElement(componentName);
+            newFolder.__path = currentPath;
+            this._subpathFolderTreeElementMap[currentPath] = newFolder;
+
+            var index = insertionIndexForObjectInListSortedByFunction(newFolder, currentFolderTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements);
+            currentFolderTreeElement.insertChild(newFolder, index);
+            currentFolderTreeElement = newFolder;
+        }
+
+        return currentFolderTreeElement;
+    }
+
+    descendantResourceTreeElementTypeDidChange(childTreeElement, oldType)
+    {
+        // Called by descendant SourceMapResourceTreeElements.
+
+        console.assert(this.hasChildren);
+
+        var wasSelected = childTreeElement.selected;
+
+        var parentTreeElement = childTreeElement.parent;
+        parentTreeElement.removeChild(childTreeElement, true, true);
+        parentTreeElement.insertChild(childTreeElement, insertionIndexForObjectInListSortedByFunction(childTreeElement, parentTreeElement.children, WebInspector.ResourceTreeElement.compareFolderAndResourceTreeElements));
+
+        if (wasSelected)
+            childTreeElement.revealAndSelect(true, false, true, true);
+    }
+
+    // Protected (ResourceTreeElement calls this when its Resource changes dynamically for Frames)
+
+    _updateSourceCode(sourceCode)
+    {
+        console.assert(sourceCode instanceof WebInspector.SourceCode);
+
+        if (this._sourceCode === sourceCode)
+            return;
+
+        if (this._sourceCode)
+            this._sourceCode.removeEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this.updateSourceMapResources, this);
+
+        this._sourceCode = sourceCode;
+        this._sourceCode.addEventListener(WebInspector.SourceCode.Event.SourceMapAdded, this.updateSourceMapResources, this);
+
+        this.updateSourceMapResources();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js
new file mode 100644
index 000000000..08722a2f0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SourceMapResourceTreeElement.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SourceMapResourceTreeElement = class SourceMapResourceTreeElement extends WebInspector.ResourceTreeElement
+{
+    constructor(sourceMapResource, representedObject)
+    {
+        console.assert(sourceMapResource instanceof WebInspector.SourceMapResource);
+
+        super(sourceMapResource);
+
+        console.assert(this.resource === sourceMapResource);
+
+        this.addClassName("source-map-resource");
+    }
+
+    // Protected
+
+    _updateTitles()
+    {
+        var oldMainTitle = this.mainTitle;
+        this.mainTitle = this.resource.displayName;
+
+        // Show the host as the subtitle if it is different from the originalSourceCode's host.
+        var sourceMapHost = this.resource.urlComponents.host;
+        var originalHost = this.resource.sourceMap.originalSourceCode.urlComponents.host;
+        var subtitle = sourceMapHost !== originalHost ? WebInspector.displayNameForHost(sourceMapHost) : null;
+        this.subtitle = this.mainTitle !== subtitle ? subtitle : null;
+
+        if (oldMainTitle !== this.mainTitle)
+            this.callFirstAncestorFunction("descendantResourceTreeElementMainTitleDidChange", [this, oldMainTitle]);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/StackTraceView.css b/Source/WebInspectorUI/UserInterface/Views/StackTraceView.css
new file mode 100644
index 000000000..47d1e99cf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StackTraceView.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.stack-trace > .call-frame {
+    margin: 1px 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/StackTraceView.js b/Source/WebInspectorUI/UserInterface/Views/StackTraceView.js
new file mode 100644
index 000000000..54df5f377
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StackTraceView.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StackTraceView = class StackTraceView extends WebInspector.Object
+{
+    constructor(stackTrace)
+    {
+        super();
+
+        var element = this._element = document.createElement("div");
+        element.classList.add("stack-trace");
+
+        for (var callFrame of stackTrace.callFrames) {
+            if (!callFrame.sourceCodeLocation && callFrame.functionName === null)
+                continue;
+
+            var callFrameElement = new WebInspector.CallFrameView(callFrame, true);
+            element.appendChild(callFrameElement);
+        }
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js b/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js
new file mode 100644
index 000000000..e488830a6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StackedLineChart.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+// StackedLineChart creates a line chart stratified with sections.
+//
+// Initialize the chart with a size.
+// To populate with data, first initialize the sections. The class names you
+// provide for the segments will allow you to style them. You can then include
+// a new set of (x, [y1, y2, y3]) points in the chart via `addPointSet`. The
+// order of `y` values must be in the same order as the sections.
+//
+// SVG:
+//
+// - There is a single path for each stratification.
+// - Each path extends all the way down to the bottom, they are layered such
+//   that the paths for lower sections overlap the paths for upper sections.
+//
+//  <div class="stacked-line-chart">
+//      <svg width="1000" height="100" viewbox="0 0 1000 100">
+//          <path class="section-class-name-1" d="..."/>
+//          <path class="section-class-name-2" d="..."/>
+//      </svg>
+//  </div>
+
+WebInspector.StackedLineChart = class StackedLineChart
+{
+    constructor(size)
+    {
+        this._element = document.createElement("div");
+        this._element.classList.add("stacked-line-chart");
+
+        this._chartElement = this._element.appendChild(createSVGElement("svg"));
+        this._pathElements = [];
+
+        this._points = [];
+        this.size = size;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get points()
+    {
+        return this._points;
+    }
+
+    get size()
+    {
+        return this._size;
+    }
+
+    set size(size)
+    {
+        this._size = size;
+
+        this._chartElement.setAttribute("width", size.width);
+        this._chartElement.setAttribute("height", size.height);
+        this._chartElement.setAttribute("viewbox", `0 0 ${size.width} ${size.height}`);
+    }
+
+    initializeSections(sectionClassNames)
+    {
+        console.assert(!this._pathElements.length, "Should not initialize multiple times");
+        
+        sectionClassNames.reverse();
+
+        for (let i = 0; i < sectionClassNames.length; ++i) {
+            let pathElement = this._chartElement.appendChild(createSVGElement("path"));
+            pathElement.classList.add(sectionClassNames[i]);
+            this._pathElements.push(pathElement);
+        }
+
+        this._pathElements.reverse();
+    }
+
+    addPointSet(x, ys)
+    {
+        console.assert(ys.length === this._pathElements.length);
+        this._points.push({x, ys});
+    }
+
+    clear()
+    {
+        this._points = [];
+    }
+
+    needsLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
+    }
+
+    updateLayout()
+    {
+        if (this._scheduledLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
+            this._scheduledLayoutUpdateIdentifier = undefined;
+        }
+
+        let pathComponents = [];
+        let length = this._pathElements.length;
+
+        for (let i = 0; i < length; ++i)
+            pathComponents[i] = [`M 0 ${this._size.height}`];
+
+        for (let {x, ys} of this._points) {
+            for (let i = 0; i < length; ++i)
+                pathComponents[i].push(`L ${x} ${ys[i]}`);
+        }
+
+        let lastX = this._points.length ? this._points.lastValue.x : 0;
+        for (let i = 0; i < length; ++i) {
+            pathComponents[i].push(`L ${lastX} ${this._size.height}`);
+            pathComponents[i].push("Z");
+            let pathString = pathComponents[i].join(" ");
+            this._pathElements[i].setAttribute("d", pathString);
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css
new file mode 100644
index 000000000..1e37bf2e6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation.storage > :matches(.content, .empty-content-placeholder) {
+    top: 29px;
+}
+
+.sidebar > .panel.navigation.storage > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js
new file mode 100644
index 000000000..b39011bcd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StorageSidebarPanel.js
@@ -0,0 +1,383 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StorageSidebarPanel = class StorageSidebarPanel extends WebInspector.NavigationSidebarPanel
+{
+    constructor(contentBrowser)
+    {
+        super("storage", WebInspector.UIString("Storage"));
+
+        this.contentBrowser = contentBrowser;
+
+        this.filterBar.placeholder = WebInspector.UIString("Filter Storage List");
+
+        this._navigationBar = new WebInspector.NavigationBar;
+        this.addSubview(this._navigationBar);
+
+        var scopeItemPrefix = "storage-sidebar-";
+        var scopeBarItems = [];
+
+        scopeBarItems.push(new WebInspector.ScopeBarItem(scopeItemPrefix + "type-all", WebInspector.UIString("All Storage"), true));
+
+        var storageTypes = [{identifier: "application-cache", title: WebInspector.UIString("Application Cache"), classes: [WebInspector.ApplicationCacheFrameTreeElement, WebInspector.ApplicationCacheManifestTreeElement]},
+            {identifier: "cookies", title: WebInspector.UIString("Cookies"), classes: [WebInspector.CookieStorageTreeElement]},
+            {identifier: "database", title: WebInspector.UIString("Databases"), classes: [WebInspector.DatabaseHostTreeElement, WebInspector.DatabaseTableTreeElement, WebInspector.DatabaseTreeElement]},
+            {identifier: "indexed-database", title: WebInspector.UIString("Indexed Databases"), classes: [WebInspector.IndexedDatabaseHostTreeElement, WebInspector.IndexedDatabaseObjectStoreTreeElement, WebInspector.IndexedDatabaseTreeElement]},
+            {identifier: "local-storage", title: WebInspector.UIString("Local Storage"), classes: [WebInspector.DOMStorageTreeElement], localStorage: true},
+            {identifier: "session-storage", title: WebInspector.UIString("Session Storage"), classes: [WebInspector.DOMStorageTreeElement], localStorage: false}];
+
+        storageTypes.sort(function(a, b) { return a.title.localeCompare(b.title); });
+
+        for (var info of storageTypes) {
+            var scopeBarItem = new WebInspector.ScopeBarItem(scopeItemPrefix + info.identifier, info.title);
+            scopeBarItem.__storageTypeInfo = info;
+            scopeBarItems.push(scopeBarItem);
+        }
+
+        this._scopeBar = new WebInspector.ScopeBar("storage-sidebar-scope-bar", scopeBarItems, scopeBarItems[0], true);
+        this._scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectionDidChange, this);
+
+        this._navigationBar.addNavigationItem(this._scopeBar);
+
+        this._localStorageRootTreeElement = null;
+        this._sessionStorageRootTreeElement = null;
+
+        this._databaseRootTreeElement = null;
+        this._databaseHostTreeElementMap = new Map;
+
+        this._indexedDatabaseRootTreeElement = null;
+        this._indexedDatabaseHostTreeElementMap = new Map;
+
+        this._cookieStorageRootTreeElement = null;
+
+        this._applicationCacheRootTreeElement = null;
+        this._applicationCacheURLTreeElementMap = new Map;
+
+        WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.CookieStorageObjectWasAdded, this._cookieStorageObjectWasAdded, this);
+        WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasAdded, this._domStorageObjectWasAdded, this);
+        WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DOMStorageObjectWasInspected, this._domStorageObjectWasInspected, this);
+        WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasAdded, this._databaseWasAdded, this);
+        WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.DatabaseWasInspected, this._databaseWasInspected, this);
+        WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.IndexedDatabaseWasAdded, this._indexedDatabaseWasAdded, this);
+        WebInspector.storageManager.addEventListener(WebInspector.StorageManager.Event.Cleared, this._storageCleared, this);
+
+        WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestAdded, this._frameManifestAdded, this);
+        WebInspector.applicationCacheManager.addEventListener(WebInspector.ApplicationCacheManager.Event.FrameManifestRemoved, this._frameManifestRemoved, this);
+
+        this.contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+        for (var domStorageObject of WebInspector.storageManager.domStorageObjects)
+            this._addDOMStorageObject(domStorageObject);
+
+        for (var cookieStorageObject of WebInspector.storageManager.cookieStorageObjects)
+            this._addCookieStorageObject(cookieStorageObject);
+
+        for (var database of WebInspector.storageManager.databases)
+            this._addDatabase(database);
+
+        for (var indexedDatabase of WebInspector.storageManager.indexedDatabases)
+            this._addIndexedDatabase(indexedDatabase);
+
+        for (var applicationCacheObject of WebInspector.applicationCacheManager.applicationCacheObjects)
+            this._addFrameManifest(applicationCacheObject);
+    }
+
+    // Public
+
+    get minimumWidth()
+    {
+        return this._navigationBar.minimumWidth;
+    }
+
+    showDefaultContentView()
+    {
+        // Don't show anything by default. It doesn't make a whole lot of sense here.
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.storageManager.removeEventListener(null, null, this);
+        WebInspector.applicationCacheManager.removeEventListener(null, null, this);
+    }
+
+    // Protected
+
+    hasCustomFilters()
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+        return selectedScopeBarItem && !selectedScopeBarItem.exclusive;
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement, flags)
+    {
+        console.assert(this._scopeBar.selectedItems.length === 1);
+        var selectedScopeBarItem = this._scopeBar.selectedItems[0];
+
+        // Show everything if there is no selection or "All Storage" is selected (the exclusive item).
+        if (!selectedScopeBarItem || selectedScopeBarItem.exclusive)
+            return true;
+
+        // Folders are hidden on the first pass, but visible childen under the folder will force the folder visible again.
+        if (treeElement instanceof WebInspector.FolderTreeElement)
+            return false;
+
+        function match()
+        {
+            for (var constructor of selectedScopeBarItem.__storageTypeInfo.classes) {
+                if (constructor === WebInspector.DOMStorageTreeElement && treeElement instanceof constructor)
+                    return treeElement.representedObject.isLocalStorage() === selectedScopeBarItem.__storageTypeInfo.localStorage;
+                if (treeElement instanceof constructor)
+                    return true;
+            }
+
+            return false;
+        }
+
+        var matched = match();
+        if (matched)
+            flags.expandTreeElement = true;
+        return matched;
+    }
+
+    // Private
+
+    _treeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        if (treeElement instanceof WebInspector.FolderTreeElement || treeElement instanceof WebInspector.DatabaseHostTreeElement ||
+            treeElement instanceof WebInspector.IndexedDatabaseHostTreeElement || treeElement instanceof WebInspector.IndexedDatabaseTreeElement
+            || treeElement instanceof WebInspector.ApplicationCacheManifestTreeElement)
+            return;
+
+        if (treeElement instanceof WebInspector.StorageTreeElement || treeElement instanceof WebInspector.DatabaseTableTreeElement ||
+            treeElement instanceof WebInspector.DatabaseTreeElement || treeElement instanceof WebInspector.ApplicationCacheFrameTreeElement ||
+            treeElement instanceof WebInspector.IndexedDatabaseObjectStoreTreeElement || treeElement instanceof WebInspector.IndexedDatabaseObjectStoreIndexTreeElement) {
+            WebInspector.showRepresentedObject(treeElement.representedObject);
+            return;
+        }
+
+        console.error("Unknown tree element", treeElement);
+    }
+
+    _domStorageObjectWasAdded(event)
+    {
+        var domStorage = event.data.domStorage;
+        this._addDOMStorageObject(event.data.domStorage);
+    }
+
+    _addDOMStorageObject(domStorage)
+    {
+        var storageElement = new WebInspector.DOMStorageTreeElement(domStorage);
+
+        if (domStorage.isLocalStorage())
+            this._localStorageRootTreeElement = this._addStorageChild(storageElement, this._localStorageRootTreeElement, WebInspector.UIString("Local Storage"));
+        else
+            this._sessionStorageRootTreeElement = this._addStorageChild(storageElement, this._sessionStorageRootTreeElement, WebInspector.UIString("Session Storage"));
+    }
+
+    _domStorageObjectWasInspected(event)
+    {
+        var domStorage = event.data.domStorage;
+        var treeElement = this.treeElementForRepresentedObject(domStorage);
+        treeElement.revealAndSelect(true);
+    }
+
+    _databaseWasAdded(event)
+    {
+        var database = event.data.database;
+        this._addDatabase(event.data.database);
+    }
+
+    _addDatabase(database)
+    {
+        console.assert(database instanceof WebInspector.DatabaseObject);
+
+        let databaseHostElement = this._databaseHostTreeElementMap.get(database.host);
+        if (!databaseHostElement) {
+            databaseHostElement = new WebInspector.DatabaseHostTreeElement(database.host);
+            this._databaseHostTreeElementMap.set(database.host, databaseHostElement);
+            this._databaseRootTreeElement = this._addStorageChild(databaseHostElement, this._databaseRootTreeElement, WebInspector.UIString("Databases"));
+        }
+
+        let databaseElement = new WebInspector.DatabaseTreeElement(database);
+        databaseHostElement.appendChild(databaseElement);
+    }
+
+    _databaseWasInspected(event)
+    {
+        var database = event.data.database;
+        var treeElement = this.treeElementForRepresentedObject(database);
+        treeElement.revealAndSelect(true);
+    }
+
+    _indexedDatabaseWasAdded(event)
+    {
+        this._addIndexedDatabase(event.data.indexedDatabase);
+    }
+
+    _addIndexedDatabase(indexedDatabase)
+    {
+        console.assert(indexedDatabase instanceof WebInspector.IndexedDatabase);
+
+        let indexedDatabaseHostElement = this._indexedDatabaseHostTreeElementMap.get(indexedDatabase.host);
+        if (!indexedDatabaseHostElement) {
+            indexedDatabaseHostElement = new WebInspector.IndexedDatabaseHostTreeElement(indexedDatabase.host);
+            this._indexedDatabaseHostTreeElementMap.set(indexedDatabase.host, indexedDatabaseHostElement);
+            this._indexedDatabaseRootTreeElement = this._addStorageChild(indexedDatabaseHostElement, this._indexedDatabaseRootTreeElement, WebInspector.UIString("Indexed Databases"));
+        }
+
+        let indexedDatabaseElement = new WebInspector.IndexedDatabaseTreeElement(indexedDatabase);
+        indexedDatabaseHostElement.appendChild(indexedDatabaseElement);
+    }
+
+    _cookieStorageObjectWasAdded(event)
+    {
+        this._addCookieStorageObject(event.data.cookieStorage);
+    }
+
+    _addCookieStorageObject(cookieStorage)
+    {
+        console.assert(cookieStorage instanceof WebInspector.CookieStorageObject);
+
+        var cookieElement = new WebInspector.CookieStorageTreeElement(cookieStorage);
+        this._cookieStorageRootTreeElement = this._addStorageChild(cookieElement, this._cookieStorageRootTreeElement, WebInspector.UIString("Cookies"));
+    }
+
+    _frameManifestAdded(event)
+    {
+        this._addFrameManifest(event.data.frameManifest);
+    }
+
+    _addFrameManifest(frameManifest)
+    {
+        console.assert(frameManifest instanceof WebInspector.ApplicationCacheFrame);
+
+        let manifest = frameManifest.manifest;
+        let manifestURL = manifest.manifestURL;
+        let applicationCacheManifestElement = this._applicationCacheURLTreeElementMap.get(manifestURL);
+        if (!applicationCacheManifestElement) {
+            applicationCacheManifestElement = new WebInspector.ApplicationCacheManifestTreeElement(manifest);
+            this._applicationCacheURLTreeElementMap.set(manifestURL, applicationCacheManifestElement);
+            this._applicationCacheRootTreeElement = this._addStorageChild(applicationCacheManifestElement, this._applicationCacheRootTreeElement, WebInspector.UIString("Application Cache"));
+        }
+
+        let frameCacheElement = new WebInspector.ApplicationCacheFrameTreeElement(frameManifest);
+        applicationCacheManifestElement.appendChild(frameCacheElement);
+    }
+
+    _frameManifestRemoved(event)
+    {
+         // FIXME: Implement this.
+    }
+
+    _compareTreeElements(a, b)
+    {
+        console.assert(a.mainTitle);
+        console.assert(b.mainTitle);
+
+        return (a.mainTitle || "").localeCompare(b.mainTitle || "");
+    }
+
+    _addStorageChild(childElement, parentElement, folderName)
+    {
+        if (!parentElement) {
+            childElement.flattened = true;
+
+            this.contentTreeOutline.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, this.contentTreeOutline.children, this._compareTreeElements));
+
+            return childElement;
+        }
+
+        if (parentElement instanceof WebInspector.StorageTreeElement) {
+            console.assert(parentElement.flattened);
+
+            var previousOnlyChild = parentElement;
+            previousOnlyChild.flattened = false;
+            this.contentTreeOutline.removeChild(previousOnlyChild);
+
+            var folderElement = new WebInspector.FolderTreeElement(folderName);
+            this.contentTreeOutline.insertChild(folderElement, insertionIndexForObjectInListSortedByFunction(folderElement, this.contentTreeOutline.children, this._compareTreeElements));
+
+            folderElement.appendChild(previousOnlyChild);
+            folderElement.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, folderElement.children, this._compareTreeElements));
+
+            return folderElement;
+        }
+
+        console.assert(parentElement instanceof WebInspector.FolderTreeElement);
+        parentElement.insertChild(childElement, insertionIndexForObjectInListSortedByFunction(childElement, parentElement.children, this._compareTreeElements));
+
+        return parentElement;
+    }
+
+    _storageCleared(event)
+    {
+        // Close all DOM and cookie storage content views since the main frame has navigated and all storages are cleared.
+        this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.CookieStorageContentView);
+        this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DOMStorageContentView);
+        this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DatabaseTableContentView);
+        this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.DatabaseContentView);
+        this.contentBrowser.contentViewContainer.closeAllContentViewsOfPrototype(WebInspector.ApplicationCacheFrameContentView);
+
+        if (this._localStorageRootTreeElement && this._localStorageRootTreeElement.parent)
+            this._localStorageRootTreeElement.parent.removeChild(this._localStorageRootTreeElement);
+
+        if (this._sessionStorageRootTreeElement && this._sessionStorageRootTreeElement.parent)
+            this._sessionStorageRootTreeElement.parent.removeChild(this._sessionStorageRootTreeElement);
+
+        if (this._databaseRootTreeElement && this._databaseRootTreeElement.parent)
+            this._databaseRootTreeElement.parent.removeChild(this._databaseRootTreeElement);
+
+        if (this._indexedDatabaseRootTreeElement && this._indexedDatabaseRootTreeElement.parent)
+            this._indexedDatabaseRootTreeElement.parent.removeChild(this._indexedDatabaseRootTreeElement);
+
+        if (this._cookieStorageRootTreeElement && this._cookieStorageRootTreeElement.parent)
+            this._cookieStorageRootTreeElement.parent.removeChild(this._cookieStorageRootTreeElement);
+
+        if (this._applicationCacheRootTreeElement && this._applicationCacheRootTreeElement.parent)
+            this._applicationCacheRootTreeElement.parent.removeChild(this._applicationCacheRootTreeElement);
+
+        this._localStorageRootTreeElement = null;
+        this._sessionStorageRootTreeElement = null;
+        this._databaseRootTreeElement = null;
+        this._databaseHostTreeElementMap.clear();
+        this._indexedDatabaseRootTreeElement = null;
+        this._indexedDatabaseHostTreeElementMap.clear();
+        this._cookieStorageRootTreeElement = null;
+        this._applicationCacheRootTreeElement = null;
+        this._applicationCacheURLTreeElementMap.clear();
+    }
+
+    _scopeBarSelectionDidChange(event)
+    {
+        this.updateFilter();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js
new file mode 100644
index 000000000..930cfef4a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StorageTabContentView.js
@@ -0,0 +1,66 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StorageTabContentView = class StorageTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.StorageTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.applicationCacheDetailsSidebarPanel];
+
+        super(identifier || "storage", "storage", tabBarItem, WebInspector.StorageSidebarPanel, detailsSidebarPanels);
+    }
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Storage.svg",
+            title: WebInspector.UIString("Storage"),
+        };
+    }
+
+    static isTabAllowed()
+    {
+        return !!window.DOMStorageAgent || !!window.DatabaseAgent || !!window.IndexedDBAgent;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.StorageTabContentView.Type;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        return representedObject instanceof WebInspector.DOMStorageObject || representedObject instanceof WebInspector.CookieStorageObject ||
+            representedObject instanceof WebInspector.DatabaseTableObject || representedObject instanceof WebInspector.DatabaseObject ||
+            representedObject instanceof WebInspector.ApplicationCacheFrame || representedObject instanceof WebInspector.IndexedDatabaseObjectStore ||
+            representedObject instanceof WebInspector.IndexedDatabaseObjectStoreIndex;
+    }
+};
+
+WebInspector.StorageTabContentView.Type = "storage";
diff --git a/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js
new file mode 100644
index 000000000..934c79c48
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StorageTreeElement.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StorageTreeElement = class StorageTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(classNames, title, representedObject)
+    {
+        super(classNames, title, null, representedObject, false);
+
+        this.flattened = false;
+    }
+
+    // Public
+
+    get flattened()
+    {
+        return this._flattened;
+    }
+
+    set flattened(flattened)
+    {
+        if (this._flattened === flattened)
+            return;
+
+        this._flattened = flattened;
+        if (!this._flattened) {
+            this.mainTitle = this.name;
+            this.subtitle = this.secondaryName;
+            this._updateChildrenTitles();
+            return;
+        }
+
+        this.mainTitle = this.categoryName;
+        this.subtitle = this.name;
+        this._updateChildrenTitles();
+    }
+
+    // Private
+
+    _updateChildrenTitles()
+    {
+        for (var i = 0; i < this.children.length; ++i) {
+            if (typeof this.children[i].updateTitles === "function")
+                this.children[i].updateTitles();
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js
new file mode 100644
index 000000000..56544c52b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StyleDetailsPanel.js
@@ -0,0 +1,162 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.StyleDetailsPanel = class StyleDetailsPanel extends WebInspector.View
+{
+    constructor(delegate, className, identifier, label)
+    {
+        super();
+
+        this._delegate = delegate || null;
+
+        // Add this offset-sections class name so the sticky headers don't overlap the navigation bar.
+        this.element.classList.add(className, "offset-sections");
+
+        this._navigationInfo = {identifier, label};
+
+        this._nodeStyles = null;
+        this._visible = false;
+    }
+
+    // Public
+
+    get navigationInfo()
+    {
+        return this._navigationInfo;
+    }
+
+    get nodeStyles()
+    {
+        return this._nodeStyles;
+    }
+
+    shown()
+    {
+        if (this._visible)
+            return;
+
+        this._visible = true;
+
+        this._refreshNodeStyles();
+    }
+
+    hidden()
+    {
+        this._visible = false;
+    }
+
+    widthDidChange()
+    {
+        // Implemented by subclasses.
+    }
+
+    markAsNeedsRefresh(domNode)
+    {
+        console.assert(domNode);
+        if (!domNode)
+            return;
+
+        if (!this._nodeStyles || this._nodeStyles.node !== domNode) {
+            if (this._nodeStyles) {
+                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this.nodeStylesRefreshed, this);
+                this._nodeStyles.removeEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
+            }
+
+            this._nodeStyles = WebInspector.cssStyleManager.stylesForNode(domNode);
+
+            console.assert(this._nodeStyles);
+            if (!this._nodeStyles)
+                return;
+
+            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.Refreshed, this.nodeStylesRefreshed, this);
+            this._nodeStyles.addEventListener(WebInspector.DOMNodeStyles.Event.NeedsRefresh, this._nodeStylesNeedsRefreshed, this);
+
+            this._forceSignificantChange = true;
+        }
+
+        if (this._visible)
+            this._refreshNodeStyles();
+    }
+
+    refresh(significantChange)
+    {
+        // Implemented by subclasses.
+        this.dispatchEventToListeners(WebInspector.StyleDetailsPanel.Event.Refreshed);
+    }
+
+    // Protected
+
+    nodeStylesRefreshed(event)
+    {
+        if (this._visible)
+            this._refreshPreservingScrollPosition(event.data.significantChange);
+    }
+
+    // Private
+
+    get _initialScrollOffset()
+    {
+        if (!WebInspector.cssStyleManager.canForcePseudoClasses())
+            return 0;
+        return this.nodeStyles.node.enabledPseudoClasses.length ? 0 : WebInspector.CSSStyleDetailsSidebarPanel.NoForcedPseudoClassesScrollOffset;
+    }
+
+    _refreshNodeStyles()
+    {
+        if (!this._nodeStyles)
+            return;
+        this._nodeStyles.refresh();
+    }
+
+    _refreshPreservingScrollPosition(significantChange)
+    {
+        significantChange = this._forceSignificantChange || significantChange || false;
+
+        var previousScrollTop = this._initialScrollOffset;
+
+        // Only remember the scroll position if the previous node is the same as this one.
+        if (this.element.parentNode && this._previousRefreshNodeIdentifier === this._nodeStyles.node.id)
+            previousScrollTop = this.element.parentNode.scrollTop;
+
+        this.refresh(significantChange);
+
+        this._previousRefreshNodeIdentifier = this._nodeStyles.node.id;
+
+        if (this.element.parentNode)
+            this.element.parentNode.scrollTop = previousScrollTop;
+
+        this._forceSignificantChange = false;
+    }
+
+    _nodeStylesNeedsRefreshed(event)
+    {
+        if (this._visible)
+            this._refreshNodeStyles();
+    }
+};
+
+WebInspector.StyleDetailsPanel.Event = {
+    Refreshed: "style-details-panel-refreshed"
+};
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Views/StyleRuleIcons.css b/Source/WebInspectorUI/UserInterface/Views/StyleRuleIcons.css
new file mode 100644
index 000000000..d6b029460
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/StyleRuleIcons.css
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.author-style-rule-icon .icon {
+    content: url(../Images/StyleRuleAuthor.svg);
+}
+
+.user-style-rule-icon .icon {
+    content: url(../Images/StyleRuleUser.svg);
+}
+
+.user-agent-style-rule-icon .icon {
+    content: url(../Images/StyleRuleUserAgent.svg);
+}
+
+.inspector-style-rule-icon .icon {
+    content: url(../Images/StyleRuleInspector.svg);
+}
+
+.inherited-style-rule-icon .icon {
+    content: url(../Images/StyleRuleInherited.svg);
+}
+
+.inherited-element-style-rule-icon .icon {
+    content: url(../Images/StyleRuleInheritedElement.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
new file mode 100644
index 000000000..118d3e7d5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css
@@ -0,0 +1,126 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/* These styles match Xcode 4's Default theme. */
+
+.cm-s-default,
+.syntax-highlighted {
+    color: black;
+
+    font-family: Menlo, monospace;
+    font-size: 11px;
+}
+
+.cm-s-default .cm-comment,
+.syntax-highlighted :matches(.css-comment, .javascript-comment, .html-comment) {
+    color: hsl(119, 100%, 22%);
+}
+
+.cm-s-default :matches(.cm-tag, .cm-bracket, .cm-atom, .cm-keyword, .cm-m-javascript.cm-builtin),
+.cm-s-default .cm-m-css:matches(.cm-atom, .cm-meta, .cm-variable-2, .cm-variable-3, .cm-property),
+.syntax-highlighted :matches(.css-keyword, .css-tag, .css-at-rule, .css-important, .javascript-keyword, .html-tag) {
+    color: var(--syntax-highlight-boolean-color);
+}
+
+.cm-s-default :matches(.cm-number, .cm-atom.cm-hex-color),
+.syntax-highlighted :matches(.css-number, .javascript-number) {
+    color: var(--syntax-highlight-number-color);
+}
+
+.cm-s-default :matches(.cm-def, .cm-operator, .cm-variable, .cm-variable-2),
+.cm-s-default .cm-m-css:matches(.cm-tag, .cm-string-2, .cm-builtin, .cm-qualifier),
+.syntax-highlighted :matches(.css-property, .css-selector, .javascript-ident) {
+    color: inherit;
+}
+
+.cm-s-default .cm-string,
+.syntax-highlighted :matches(.css-string, .javascript-string, .html-attribute-value) {
+    color: var(--syntax-highlight-string-color);
+}
+
+.cm-s-default .cm-string-2,
+.syntax-highlighted .javascript-regexp {
+    color: var(--syntax-highlight-regexp-color);
+}
+
+.cm-s-default .cm-m-xml.cm-meta,
+.syntax-highlighted :matches(.html-doctype, .html-processing-instruction) {
+    color: hsl(0, 0%, 75%);
+}
+
+.cm-s-default .cm-m-xml.cm-attribute,
+.syntax-highlighted .html-attribute-name {
+    color: hsl(44, 53%, 33%);
+}
+
+.syntax-highlighted a {
+    color: hsl(240, 100%, 52%);
+}
+
+.cm-s-default .cm-link,
+.syntax-highlighted a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.cm-s-default .cm-link:hover,
+.syntax-highlighted a:hover {
+    text-decoration: underline;
+}
+
+.supports-find-banner.showing-find-banner.syntax-highlighted .search-result,
+.supports-find-banner.showing-find-banner .syntax-highlighted .search-result {
+    background-color: hsla(53, 83%, 53%, 0.2);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+}
+
+.cm-s-default .basic-block-has-not-executed {
+    color: hsl(0, 0%, 60%);
+}
+
+.cm-s-default .basic-block-has-not-executed.cm-comment {
+    color: hsl(119, 27%, 65%);
+}
+
+.cm-s-default .basic-block-has-not-executed:matches(.cm-tag, .cm-bracket, .cm-atom, .cm-keyword, .cm-m-javascript.cm-builtin),
+.cm-s-default .basic-block-has-not-executed.cm-m-css:matches(.cm-atom, .cm-meta, .cm-variable-2, .cm-variable-3, .cm-property) {
+    color: hsl(309, 21%, 70%);
+}
+
+.cm-s-default .basic-block-has-not-executed:matches(.cm-number, .cm-atom.cm-hex-color) {
+    color: hsl(248, 52%, 78%);
+}
+
+.cm-s-default .basic-block-has-not-executed.cm-string {
+    color: hsl(1, 33%, 70%);
+}
+
+.cm-s-default .basic-block-has-not-executed.cm-m-xml.cm-meta {
+    color: hsl(0, 0%, 82%);
+}
+
+.cm-s-default .basic-block-has-not-executed.cm-m-xml.cm-attribute {
+    color: rgb(201, 192, 166);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingSupport.js b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingSupport.js
new file mode 100644
index 000000000..5181887b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingSupport.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.SyntaxHighlightedStyleClassName = "syntax-highlighted";
+
+WebInspector.syntaxHighlightStringAsDocumentFragment = function(string, mimeType, baseURL)
+{
+    var resultFragment = document.createDocumentFragment();
+
+    function appendText(text, style)
+    {
+        if (!style) {
+            resultFragment.append(text);
+            return;
+        }
+
+        var span = document.createElement("span");
+        span.className = "cm-" + style;
+        span.textContent = text;
+
+        resultFragment.appendChild(span);
+    }
+
+    mimeType = parseMIMEType(mimeType).type;
+
+    CodeMirror.runMode(string, mimeType, appendText);
+
+    return resultFragment;
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBar.css b/Source/WebInspectorUI/UserInterface/Views/TabBar.css
new file mode 100644
index 000000000..07d5c60aa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBar.css
@@ -0,0 +1,324 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.tab-bar {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    position: relative;
+
+    border-bottom: 1px solid hsl(0, 0%, 65%);
+
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
+    background-size: 100% 200%;
+
+    height: 24px;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    outline: none;
+}
+
+body.window-inactive .tab-bar {
+    border-bottom-color: hsl(0, 0%, 85%);
+
+    background-image: none !important;
+    background-color: hsl(0, 0%, 92%) !important;
+}
+
+.tab-bar > .top-border {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+
+    background-color: hsl(0, 0%, 65%);
+
+    z-index: 0;
+}
+
+body.window-inactive .tab-bar > .top-border {
+    background-color: hsl(0, 0%, 85%);
+}
+
+.tab-bar > .item {
+    display: flex;
+    flex: 1;
+
+    position: relative;
+
+    z-index: 1;
+
+    align-items: center;
+
+    padding: 0 6px;
+
+    min-width: 24px;
+    overflow: hidden;
+
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 72%));
+    background-size: 100% 200%;
+
+    border-top: 1px solid hsl(0, 0%, 65%);
+
+    height: 100%;
+    line-height: 15px;
+    outline: none;
+
+    /* FIXME: These cause noticeable transitions when focusing the window. Fix that with JavaScript? */
+    /* transition-property: background-position, border-color; */
+    /* transition-duration: 250ms; */
+    /* transition-delay: 50ms; */
+}
+
+.tab-bar > :nth-child(n + 2 of .item),
+.tab-bar.dragging-tab > .item.selected {
+    border-left: 1px solid hsl(0, 0%, 65%);
+}
+
+.tab-bar > .item.pinned {
+    width: 24px;
+    flex: none;
+    justify-content: center;
+}
+
+.tab-bar > .item:not(.disabled).selected {
+    border-top-color: hsl(0, 0%, 74%);
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 87%), hsl(0, 0%, 82%));
+    background-size: 100% 100%;
+}
+
+body.mavericks .tab-bar > .item:not(.disabled).selected {
+    border-top-color: hsl(0, 0%, 68%);
+}
+
+.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover,
+.tab-bar > .item.new-tab-button:not(.disabled):hover {
+    background-position: 0 100%;
+    border-top-color: hsl(0, 0%, 59%);
+    border-left-color: hsl(0, 0%, 59%);
+}
+
+.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover + .item {
+    border-left-color: hsl(0, 0%, 59%);
+}
+
+body.window-inactive .tab-bar > .item {
+    border-left-color: hsl(0, 0%, 85%) !important;
+    border-top-color: hsl(0, 0%, 85%) !important;
+
+    background-image: none !important;
+    background-color: hsl(0, 0%, 92%) !important;
+
+    transition: none;
+}
+
+body.window-inactive .tab-bar > .item.selected {
+    background-image: none !important;
+    background-color: hsl(0, 0%, 96%) !important;
+}
+
+.tab-bar > .item > .close {
+    width: 16px;
+    height: 16px;
+
+    min-width: 16px;
+    min-height: 16px;
+
+    opacity: 0;
+
+    border-radius: 2px;
+
+    background-image: url(../Images/Close.svg);
+    background-repeat: no-repeat;
+
+    margin-right: 4px;
+
+    transition-property: background-color, opacity;
+    transition-duration: 250ms, 500ms;
+    transition-delay: 0, 50ms;
+}
+
+body:not(.window-inactive) .tab-bar > .item:hover > .close {
+    opacity: 0.6;
+}
+
+body:not(.window-inactive) .tab-bar.single-tab > .item.default-tab:hover > .close {
+    opacity: 0;
+}
+
+.tab-bar.single-tab > .item.default-tab > .close {
+    pointer-events: none;
+}
+
+.tab-bar > .item > .close:hover {
+    background-color: hsla(0, 0%, 0%, 0.2);
+}
+
+.tab-bar > .item > .close:active {
+    opacity: 0.8 !important;
+}
+
+.tab-bar > .item > .flex-space {
+    display: flex;
+    flex: 1;
+}
+
+.tab-bar > .item > .flex-space:last-child {
+    margin-right: 16px;
+}
+
+.tab-bar > .item > .icon {
+    width: 16px;
+    height: 16px;
+
+    min-width: 16px;
+    min-height: 16px;
+
+    opacity: 0.55; /* Assumes black glyphs. */
+
+    -webkit-user-drag: none;
+}
+
+.tab-bar > .item.selected > .icon {
+    opacity: 0.7;
+}
+
+.tab-bar > .item.disabled > .icon {
+    opacity: 0.35;
+}
+
+.tab-bar > .item.new-tab-button > .icon {
+    width: 15px;
+    height: 15px;
+    min-width: 15px;
+    min-height: 15px;
+}
+
+.tab-bar:not(.animating) > .item:not(.selected, .disabled):hover > .icon,
+.tab-bar > .item.new-tab-button:not(.disabled):hover > .icon {
+    opacity: 0.6;
+}
+
+.tab-bar > .item > .title {
+    margin-left: 6px;
+
+    color: hsla(0, 0%, 0%, 0.55);
+
+    display: flex;
+
+    min-width: 0;
+    max-width: 400px;
+}
+
+.tab-bar > .item > .title > .content {
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tab-bar:not(.animating) > .item:not(.selected):hover > .title {
+    color: hsla(0, 0%, 0%, 0.6);
+}
+
+.tab-bar > .item.selected > .title {
+    color: hsla(0, 0%, 0%, 0.7);
+}
+
+.tab-bar.collapsed > .item {
+    justify-content: center;
+}
+
+.tab-bar.collapsed > .item > .flex-space {
+    display: none;
+}
+
+.tab-bar.collapsed > .item > .close {
+    display: none;
+    margin-right: 0;
+}
+
+.tab-bar.hide-titles > .item > .title {
+    display: none;
+}
+
+.tab-bar.collapsed:not(.hide-titles) > .item:not(.pinned, .default-tab):hover > .icon,
+.tab-bar.hide-titles > .item.selected:hover > .icon {
+    display: none;
+}
+
+.tab-bar.collapsed:not(.hide-titles) > .item:not(.default-tab):hover > .close,
+.tab-bar.hide-titles > .item.selected:hover > .close {
+    display: inline-block;
+}
+
+.tab-bar.static-layout {
+    position: relative;
+}
+
+.tab-bar.static-layout > .item {
+    position: absolute !important;
+    top: 0;
+}
+
+.tab-bar.animating.closing-tab > .item {
+    transition-property: left;
+    transition-duration: 250ms;
+    transition-timing-function: ease-in-out;
+}
+
+.tab-bar.animating:matches(.expanding-tabs, .inserting-tab) > .item {
+    transition-property: left, width;
+    transition-duration: 250ms;
+    transition-timing-function: ease-in-out;
+}
+
+.tab-bar.animating.inserting-tab > .item.being-inserted {
+    z-index: 2;
+    min-width: 0 !important;
+    padding: 0 !important;
+}
+
+.tab-bar.dragging-tab > .item.selected,
+.tab-bar.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
+.tab-bar.animating.closing-tab > .item.selected {
+    border-right: 1px solid hsl(0, 0%, 65%);
+}
+
+body.window-inactive .tab-bar.dragging-tab > .item.selected,
+body.window-inactive .tab-bar.static-layout:not(.animating.inserting-tab):not(.dragging-tab) > .item:nth-last-child(1 of :not(.pinned)),
+body.window-inactive .tab-bar.animating.closing-tab > .item.selected {
+    border-right-color: hsl(0, 0%, 85%) !important;
+}
+
+.tab-bar.dragging-tab > .item.selected {
+    z-index: 2;
+    pointer-events: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBar.js b/Source/WebInspectorUI/UserInterface/Views/TabBar.js
new file mode 100644
index 000000000..dc5d9236f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBar.js
@@ -0,0 +1,756 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TabBar = class TabBar extends WebInspector.View
+{
+    constructor(element, tabBarItems)
+    {
+        super(element);
+
+        this.element.classList.add("tab-bar");
+        this.element.setAttribute("role", "tablist");
+
+        var topBorderElement = document.createElement("div");
+        topBorderElement.classList.add("top-border");
+        this.element.appendChild(topBorderElement);
+
+        this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+        this.element.addEventListener("click", this._handleClick.bind(this));
+        this.element.addEventListener("mouseleave", this._handleMouseLeave.bind(this));
+
+        this._tabBarItems = [];
+
+        if (tabBarItems) {
+            for (var tabBarItem in tabBarItems)
+                this.addTabBarItem(tabBarItem);
+        }
+    }
+
+    // Public
+
+    get newTabItem()
+    {
+        return this._newTabItem || null;
+    }
+
+    set newTabItem(newTabItem)
+    {
+        if (!this._handleNewTabClickListener)
+            this._handleNewTabClickListener = this._handleNewTabClick.bind(this);
+
+        if (!this._handleNewTabMouseEnterListener)
+            this._handleNewTabMouseEnterListener = this._handleNewTabMouseEnter.bind(this);
+
+        if (this._newTabItem) {
+            this._newTabItem.element.classList.remove("new-tab-button");
+            this._newTabItem.element.removeEventListener("click", this._handleNewTabClickListener);
+            this._newTabItem.element.removeEventListener("mouseenter", this._handleNewTabMouseEnterListener);
+            this.removeTabBarItem(this._newTabItem, true);
+        }
+
+        if (newTabItem) {
+            newTabItem.element.classList.add("new-tab-button");
+            newTabItem.element.addEventListener("click", this._handleNewTabClickListener);
+            newTabItem.element.addEventListener("mouseenter", this._handleNewTabMouseEnterListener);
+            this.addTabBarItem(newTabItem, true);
+        }
+
+        this._newTabItem = newTabItem || null;
+    }
+
+    addTabBarItem(tabBarItem, doNotAnimate)
+    {
+        return this.insertTabBarItem(tabBarItem, this._tabBarItems.length, doNotAnimate);
+    }
+
+    insertTabBarItem(tabBarItem, index, doNotAnimate)
+    {
+        console.assert(tabBarItem instanceof WebInspector.TabBarItem);
+        if (!(tabBarItem instanceof WebInspector.TabBarItem))
+            return null;
+
+        if (tabBarItem.parentTabBar === this)
+            return;
+
+        if (this._tabAnimatedClosedSinceMouseEnter) {
+            // Delay adding the new tab until we can expand the tabs after a closed tab.
+            this._finishExpandingTabsAfterClose().then(function() {
+                this.insertTabBarItem(tabBarItem, index, doNotAnimate);
+            }.bind(this));
+            return;
+        }
+
+        if (tabBarItem.parentTabBar)
+            tabBarItem.parentTabBar.removeTabBarItem(tabBarItem);
+
+        tabBarItem.parentTabBar = this;
+
+        var lastIndex = this._newTabItem ? this._tabBarItems.length - 1 : this._tabBarItems.length;
+        index = Math.max(0, Math.min(index, lastIndex));
+
+        if (this.element.classList.contains("animating")) {
+            requestAnimationFrame(removeStyles.bind(this));
+            doNotAnimate = true;
+        }
+
+        var beforeTabSizesAndPositions;
+        if (!doNotAnimate)
+            beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
+
+        this._tabBarItems.splice(index, 0, tabBarItem);
+
+        var nextSibling = this._tabBarItems[index + 1];
+        var nextSiblingElement = nextSibling ? nextSibling.element : (this._newTabItem ? this._newTabItem.element : null);
+
+        this.element.insertBefore(tabBarItem.element, nextSiblingElement);
+
+        this.element.classList.toggle("single-tab", !this._hasMoreThanOneNormalTab());
+
+        tabBarItem.element.style.left = null;
+        tabBarItem.element.style.width = null;
+
+        function animateTabs()
+        {
+            this.element.classList.add("animating");
+            this.element.classList.add("inserting-tab");
+
+            this._applyTabBarItemSizesAndPositions(afterTabSizesAndPositions);
+
+            this.element.addEventListener("webkitTransitionEnd", removeStylesListener);
+        }
+
+        function removeStyles()
+        {
+            this.element.classList.remove("static-layout");
+            this.element.classList.remove("animating");
+            this.element.classList.remove("inserting-tab");
+
+            tabBarItem.element.classList.remove("being-inserted");
+
+            this._clearTabBarItemSizesAndPositions();
+
+            this.element.removeEventListener("webkitTransitionEnd", removeStylesListener);
+        }
+
+        if (!doNotAnimate) {
+            var afterTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
+
+            this.updateLayout();
+
+            var previousTabBarItem = this._tabBarItems[this._tabBarItems.indexOf(tabBarItem) - 1] || null;
+            var previousTabBarItemSizeAndPosition = previousTabBarItem ? beforeTabSizesAndPositions.get(previousTabBarItem) : null;
+
+            if (previousTabBarItemSizeAndPosition)
+                beforeTabSizesAndPositions.set(tabBarItem, {left: previousTabBarItemSizeAndPosition.left + previousTabBarItemSizeAndPosition.width, width: 0});
+            else
+                beforeTabSizesAndPositions.set(tabBarItem, {left: 0, width: 0});
+
+            this.element.classList.add("static-layout");
+            tabBarItem.element.classList.add("being-inserted");
+
+            this._applyTabBarItemSizesAndPositions(beforeTabSizesAndPositions);
+
+            var removeStylesListener = removeStyles.bind(this);
+
+            requestAnimationFrame(animateTabs.bind(this));
+        } else
+            this.needsLayout();
+
+        this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemAdded, {tabBarItem});
+
+        return tabBarItem;
+    }
+
+    removeTabBarItem(tabBarItemOrIndex, doNotAnimate, doNotExpand)
+    {
+        var tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
+        if (!tabBarItem)
+            return null;
+
+        tabBarItem.parentTabBar = null;
+
+        if (tabBarItem === this._newTabItem)
+            this.newTabItem = null;
+
+        if (this._selectedTabBarItem === tabBarItem) {
+            var index = this._tabBarItems.indexOf(tabBarItem);
+            var nextTabBarItem = this._tabBarItems[index + 1];
+            if (!nextTabBarItem || nextTabBarItem.pinned)
+                nextTabBarItem = this._tabBarItems[index - 1];
+
+            this.selectedTabBarItem = nextTabBarItem;
+        }
+
+        if (this.element.classList.contains("animating")) {
+            requestAnimationFrame(removeStyles.bind(this));
+            doNotAnimate = true;
+        }
+
+        var beforeTabSizesAndPositions;
+        if (!doNotAnimate)
+            beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
+
+        var wasLastNormalTab = this._tabBarItems.indexOf(tabBarItem) === (this._newTabItem ? this._tabBarItems.length - 2 : this._tabBarItems.length - 1);
+
+        this._tabBarItems.remove(tabBarItem);
+        tabBarItem.element.remove();
+
+        var hasMoreThanOneNormalTab = this._hasMoreThanOneNormalTab();
+        this.element.classList.toggle("single-tab", !hasMoreThanOneNormalTab);
+
+        const shouldOpenDefaultTab = !tabBarItem.isDefaultTab && !this.hasNormalTab();
+        if (shouldOpenDefaultTab)
+            doNotAnimate = true;
+
+        if (!hasMoreThanOneNormalTab || wasLastNormalTab || !doNotExpand) {
+            if (!doNotAnimate) {
+                this._tabAnimatedClosedSinceMouseEnter = true;
+                this._finishExpandingTabsAfterClose(beforeTabSizesAndPositions);
+            } else
+                this.needsLayout();
+
+            this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
+
+            if (shouldOpenDefaultTab)
+                this._openDefaultTab();
+
+            return tabBarItem;
+        }
+
+        var lastNormalTabBarItem;
+
+        function animateTabs()
+        {
+            this.element.classList.add("animating");
+            this.element.classList.add("closing-tab");
+
+            var left = 0;
+            for (var currentTabBarItem of this._tabBarItems) {
+                var sizeAndPosition = beforeTabSizesAndPositions.get(currentTabBarItem);
+
+                if (!currentTabBarItem.pinned) {
+                    currentTabBarItem.element.style.left = left + "px";
+                    left += sizeAndPosition.width;
+                    lastNormalTabBarItem = currentTabBarItem;
+                } else
+                    left = sizeAndPosition.left + sizeAndPosition.width;
+            }
+
+            // The selected tab and last tab need to draw a right border as well, so make them 1px wider.
+            if (this._selectedTabBarItem)
+                this._selectedTabBarItem.element.style.width = (parseFloat(this._selectedTabBarItem.element.style.width) + 1) + "px";
+
+            if (lastNormalTabBarItem !== this._selectedTabBarItem)
+                lastNormalTabBarItem.element.style.width = (parseFloat(lastNormalTabBarItem.element.style.width) + 1) + "px";
+
+            this.element.addEventListener("webkitTransitionEnd", removeStylesListener);
+        }
+
+        function removeStyles()
+        {
+            // The selected tab needs to stop drawing the right border, so make it 1px smaller. Only if it isn't the last.
+            if (this._selectedTabBarItem && this._selectedTabBarItem !== lastNormalTabBarItem)
+                this._selectedTabBarItem.element.style.width = (parseFloat(this._selectedTabBarItem.element.style.width) - 1) + "px";
+
+            this.element.classList.remove("animating");
+            this.element.classList.remove("closing-tab");
+
+            this.updateLayout();
+
+            this.element.removeEventListener("webkitTransitionEnd", removeStylesListener);
+        }
+
+        if (!doNotAnimate) {
+            this.element.classList.add("static-layout");
+
+            this._tabAnimatedClosedSinceMouseEnter = true;
+
+            this._applyTabBarItemSizesAndPositions(beforeTabSizesAndPositions);
+
+            var removeStylesListener = removeStyles.bind(this);
+
+            requestAnimationFrame(animateTabs.bind(this));
+        } else
+            this.needsLayout();
+
+        this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemRemoved, {tabBarItem});
+
+        if (shouldOpenDefaultTab)
+            this._openDefaultTab();
+
+        return tabBarItem;
+    }
+
+    selectPreviousTab()
+    {
+        if (this._tabBarItems.length <= 1)
+            return;
+
+        var startIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
+        var newIndex = startIndex;
+        do {
+            if (newIndex === 0)
+                newIndex = this._tabBarItems.length - 1;
+            else
+                newIndex--;
+
+            if (!this._tabBarItems[newIndex].pinned)
+                break;
+        } while (newIndex !== startIndex);
+
+        if (newIndex === startIndex)
+            return;
+
+        this.selectedTabBarItem = this._tabBarItems[newIndex];
+    }
+
+    selectNextTab()
+    {
+        if (this._tabBarItems.length <= 1)
+            return;
+
+        var startIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
+        var newIndex = startIndex;
+        do {
+            if (newIndex === this._tabBarItems.length - 1)
+                newIndex = 0;
+            else
+                newIndex++;
+
+            if (!this._tabBarItems[newIndex].pinned)
+                break;
+        } while (newIndex !== startIndex);
+
+        if (newIndex === startIndex)
+            return;
+
+        this.selectedTabBarItem = this._tabBarItems[newIndex];
+    }
+
+    get selectedTabBarItem()
+    {
+        return this._selectedTabBarItem;
+    }
+
+    set selectedTabBarItem(tabBarItemOrIndex)
+    {
+        var tabBarItem = this._findTabBarItem(tabBarItemOrIndex);
+        if (tabBarItem === this._newTabItem)
+            tabBarItem = this._tabBarItems[this._tabBarItems.length - 2];
+
+        if (this._selectedTabBarItem === tabBarItem)
+            return;
+
+        if (this._selectedTabBarItem)
+            this._selectedTabBarItem.selected = false;
+
+        this._selectedTabBarItem = tabBarItem || null;
+
+        if (this._selectedTabBarItem)
+            this._selectedTabBarItem.selected = true;
+
+        this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemSelected);
+    }
+
+    get tabBarItems()
+    {
+        return this._tabBarItems;
+    }
+
+    hasNormalTab()
+    {
+        return this._tabBarItems.some((tab) => !tab.pinned);
+    }
+
+    // Protected
+
+    layout()
+    {
+        if (this.element.classList.contains("static-layout"))
+            return;
+
+        this.element.classList.remove("hide-titles");
+        this.element.classList.remove("collapsed");
+
+        let firstNormalTabItem = null;
+        for (let tabItem of this._tabBarItems) {
+            if (tabItem.pinned)
+                continue;
+            firstNormalTabItem = tabItem;
+            break;
+        }
+
+        if (!firstNormalTabItem)
+            return;
+
+        if (firstNormalTabItem.element.offsetWidth >= 120)
+            return;
+
+        this.element.classList.add("collapsed");
+
+        if (firstNormalTabItem.element.offsetWidth >= 60)
+            return;
+
+        this.element.classList.add("hide-titles");
+    }
+
+    // Private
+
+    _findTabBarItem(tabBarItemOrIndex)
+    {
+        if (typeof tabBarItemOrIndex === "number")
+            return this._tabBarItems[tabBarItemOrIndex] || null;
+
+        if (tabBarItemOrIndex instanceof WebInspector.TabBarItem) {
+            if (this._tabBarItems.includes(tabBarItemOrIndex))
+                return tabBarItemOrIndex;
+        }
+
+        return null;
+    }
+
+    _hasMoreThanOneNormalTab()
+    {
+        var normalTabCount = 0;
+        for (var tabBarItem of this._tabBarItems) {
+            if (tabBarItem.pinned)
+                continue;
+            ++normalTabCount;
+            if (normalTabCount >= 2)
+                return true;
+        }
+
+        return false;
+    }
+
+    _openDefaultTab()
+    {
+        this.dispatchEventToListeners(WebInspector.TabBar.Event.OpenDefaultTab);
+    }
+
+    _recordTabBarItemSizesAndPositions()
+    {
+        var tabBarItemSizesAndPositions = new Map;
+
+        const barRect = this.element.getBoundingClientRect();
+
+        for (var tabBarItem of this._tabBarItems) {
+            var boundingRect = tabBarItem.element.getBoundingClientRect();
+            tabBarItemSizesAndPositions.set(tabBarItem, {left: boundingRect.left - barRect.left, width: boundingRect.width});
+        }
+
+        return tabBarItemSizesAndPositions;
+    }
+
+    _applyTabBarItemSizesAndPositions(tabBarItemSizesAndPositions, skipTabBarItem)
+    {
+        for (var [tabBarItem, sizeAndPosition] of tabBarItemSizesAndPositions) {
+            if (skipTabBarItem && tabBarItem === skipTabBarItem)
+                continue;
+            tabBarItem.element.style.left = sizeAndPosition.left + "px";
+            tabBarItem.element.style.width = sizeAndPosition.width + "px";
+        }
+    }
+
+    _clearTabBarItemSizesAndPositions(skipTabBarItem)
+    {
+        for (var tabBarItem of this._tabBarItems) {
+            if (skipTabBarItem && tabBarItem === skipTabBarItem)
+                continue;
+            tabBarItem.element.style.left = null;
+            tabBarItem.element.style.width = null;
+        }
+    }
+
+    _finishExpandingTabsAfterClose(beforeTabSizesAndPositions)
+    {
+        return new Promise(function(resolve, reject) {
+            console.assert(this._tabAnimatedClosedSinceMouseEnter);
+            this._tabAnimatedClosedSinceMouseEnter = false;
+
+            if (!beforeTabSizesAndPositions)
+                beforeTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
+
+            this.element.classList.remove("static-layout");
+            this._clearTabBarItemSizesAndPositions();
+
+            var afterTabSizesAndPositions = this._recordTabBarItemSizesAndPositions();
+
+            this._applyTabBarItemSizesAndPositions(beforeTabSizesAndPositions);
+            this.element.classList.add("static-layout");
+
+            function animateTabs()
+            {
+                this.element.classList.add("static-layout");
+                this.element.classList.add("animating");
+                this.element.classList.add("expanding-tabs");
+
+                this._applyTabBarItemSizesAndPositions(afterTabSizesAndPositions);
+
+                this.element.addEventListener("webkitTransitionEnd", removeStylesListener);
+            }
+
+            function removeStyles()
+            {
+                this.element.classList.remove("static-layout");
+                this.element.classList.remove("animating");
+                this.element.classList.remove("expanding-tabs");
+
+                this._clearTabBarItemSizesAndPositions();
+
+                this.updateLayout();
+
+                this.element.removeEventListener("webkitTransitionEnd", removeStylesListener);
+
+                resolve();
+            }
+
+            var removeStylesListener = removeStyles.bind(this);
+
+            requestAnimationFrame(animateTabs.bind(this));
+        }.bind(this));
+    }
+
+    _handleMouseDown(event)
+    {
+        // Only consider left mouse clicks for tab movement.
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.StyleClassName);
+        if (!itemElement)
+            return;
+
+        var tabBarItem = itemElement[WebInspector.TabBarItem.ElementReferenceSymbol];
+        if (!tabBarItem)
+            return;
+
+        if (tabBarItem.disabled)
+            return;
+
+        if (tabBarItem === this._newTabItem)
+            return;
+
+        var closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
+        if (closeButtonElement)
+            return;
+
+        this.selectedTabBarItem = tabBarItem;
+
+        if (tabBarItem.pinned || !this._hasMoreThanOneNormalTab())
+            return;
+
+        this._firstNormalTabItemIndex = 0;
+        for (var i = 0; i < this._tabBarItems.length; ++i) {
+            if (this._tabBarItems[i].pinned)
+                continue;
+            this._firstNormalTabItemIndex = i;
+            break;
+        }
+
+        this._mouseIsDown = true;
+
+        this._mouseMovedEventListener = this._handleMouseMoved.bind(this);
+        this._mouseUpEventListener = this._handleMouseUp.bind(this);
+
+        // Register these listeners on the document so we can track the mouse if it leaves the tab bar.
+        document.addEventListener("mousemove", this._mouseMovedEventListener, true);
+        document.addEventListener("mouseup", this._mouseUpEventListener, true);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleClick(event)
+    {
+        var itemElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.StyleClassName);
+        if (!itemElement)
+            return;
+
+        var tabBarItem = itemElement[WebInspector.TabBarItem.ElementReferenceSymbol];
+        if (!tabBarItem)
+            return;
+
+        if (tabBarItem.disabled)
+            return;
+
+        const clickedMiddleButton = event.button === 1;
+
+        var closeButtonElement = event.target.enclosingNodeOrSelfWithClass(WebInspector.TabBarItem.CloseButtonStyleClassName);
+        if (closeButtonElement || clickedMiddleButton) {
+            // Disallow closing the default tab if it is the only tab.
+            if (tabBarItem.isDefaultTab && this.element.classList.contains("single-tab"))
+                return;
+
+            this.removeTabBarItem(tabBarItem, false, true);
+        }
+    }
+
+    _handleMouseMoved(event)
+    {
+        console.assert(event.button === 0);
+        console.assert(this._mouseIsDown);
+        if (!this._mouseIsDown)
+            return;
+
+        console.assert(this._selectedTabBarItem);
+        if (!this._selectedTabBarItem)
+            return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!this.element.classList.contains("static-layout")) {
+            this._applyTabBarItemSizesAndPositions(this._recordTabBarItemSizesAndPositions());
+            this.element.classList.add("static-layout");
+            this.element.classList.add("dragging-tab");
+        }
+
+        if (this._mouseOffset === undefined)
+            this._mouseOffset = event.pageX - this._selectedTabBarItem.element.totalOffsetLeft;
+
+        var tabBarMouseOffset = event.pageX - this.element.totalOffsetLeft;
+        var newLeft = tabBarMouseOffset - this._mouseOffset;
+
+        this._selectedTabBarItem.element.style.left = newLeft + "px";
+
+        var selectedTabMidX = newLeft + (this._selectedTabBarItem.element.realOffsetWidth / 2);
+
+        var currentIndex = this._tabBarItems.indexOf(this._selectedTabBarItem);
+        var newIndex = currentIndex;
+
+        for (var tabBarItem of this._tabBarItems) {
+            if (tabBarItem === this._selectedTabBarItem)
+                continue;
+
+            var tabBarItemRect = tabBarItem.element.getBoundingClientRect();
+
+            if (selectedTabMidX < tabBarItemRect.left || selectedTabMidX > tabBarItemRect.right)
+                continue;
+
+            newIndex = this._tabBarItems.indexOf(tabBarItem);
+            break;
+        }
+
+        newIndex = Math.max(this._firstNormalTabItemIndex, newIndex);
+        newIndex = Math.min(this._newTabItem ? this._tabBarItems.length - 2 : this._tabBarItems.length - 1, newIndex);
+
+        if (currentIndex === newIndex)
+            return;
+
+        this._tabBarItems.splice(currentIndex, 1);
+        this._tabBarItems.splice(newIndex, 0, this._selectedTabBarItem);
+
+        var nextSibling = this._tabBarItems[newIndex + 1];
+        var nextSiblingElement = nextSibling ? nextSibling.element : (this._newTabItem ? this._newTabItem.element : null);
+
+        this.element.insertBefore(this._selectedTabBarItem.element, nextSiblingElement);
+
+        // FIXME: Animate the tabs that move to make room for the selected tab. This was causing me trouble when I tried.
+
+        var left = 0;
+        for (var tabBarItem of this._tabBarItems) {
+            if (tabBarItem !== this._selectedTabBarItem && tabBarItem !== this._newTabItem && parseFloat(tabBarItem.element.style.left) !== left)
+                tabBarItem.element.style.left = left + "px";
+            left += parseFloat(tabBarItem.element.style.width);
+        }
+    }
+
+    _handleMouseUp(event)
+    {
+        console.assert(event.button === 0);
+        console.assert(this._mouseIsDown);
+        if (!this._mouseIsDown)
+            return;
+
+        this.element.classList.remove("dragging-tab");
+
+        if (!this._tabAnimatedClosedSinceMouseEnter) {
+            this.element.classList.remove("static-layout");
+            this._clearTabBarItemSizesAndPositions();
+        } else {
+            var left = 0;
+            for (var tabBarItem of this._tabBarItems) {
+                if (tabBarItem === this._selectedTabBarItem)
+                    tabBarItem.element.style.left = left + "px";
+                left += parseFloat(tabBarItem.element.style.width);
+            }
+        }
+
+        this._mouseIsDown = false;
+        this._mouseOffset = undefined;
+
+        document.removeEventListener("mousemove", this._mouseMovedEventListener, true);
+        document.removeEventListener("mouseup", this._mouseUpEventListener, true);
+
+        this._mouseMovedEventListener = null;
+        this._mouseUpEventListener = null;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.dispatchEventToListeners(WebInspector.TabBar.Event.TabBarItemsReordered);
+    }
+
+    _handleMouseLeave(event)
+    {
+        if (this._mouseIsDown || !this._tabAnimatedClosedSinceMouseEnter || !this.element.classList.contains("static-layout") || this.element.classList.contains("animating"))
+            return;
+
+        // This event can still fire when the mouse is inside the element if DOM nodes are added, removed or generally change inside.
+        // Check if the mouse really did leave the element by checking the bounds.
+        // FIXME: Is this a WebKit bug or correct behavior?
+        const barRect = this.element.getBoundingClientRect();
+        const newTabItemRect = this._newTabItem ? this._newTabItem.element.getBoundingClientRect() : null;
+        if (event.pageY > barRect.top && event.pageY < barRect.bottom && event.pageX > barRect.left && event.pageX < (newTabItemRect ? newTabItemRect.right : barRect.right))
+            return;
+
+        this._finishExpandingTabsAfterClose();
+    }
+
+    _handleNewTabClick(event)
+    {
+        if (this._newTabItem.disabled)
+            return;
+        this.dispatchEventToListeners(WebInspector.TabBar.Event.NewTabItemClicked);
+    }
+
+    _handleNewTabMouseEnter(event)
+    {
+        if (!this._tabAnimatedClosedSinceMouseEnter || !this.element.classList.contains("static-layout") || this.element.classList.contains("animating"))
+            return;
+
+        this._finishExpandingTabsAfterClose();
+    }
+};
+
+WebInspector.TabBar.Event = {
+    TabBarItemSelected: "tab-bar-tab-bar-item-selected",
+    TabBarItemAdded: "tab-bar-tab-bar-item-added",
+    TabBarItemRemoved: "tab-bar-tab-bar-item-removed",
+    TabBarItemsReordered: "tab-bar-tab-bar-items-reordered",
+    NewTabItemClicked: "tab-bar-new-tab-item-clicked",
+    OpenDefaultTab: "tab-bar-open-default-tab"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js b/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js
new file mode 100644
index 000000000..fcacdf287
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBarItem.js
@@ -0,0 +1,206 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TabBarItem = class TabBarItem extends WebInspector.Object
+{
+    constructor(image, title, pinned, representedObject)
+    {
+        super();
+
+        this._parentTabBar = null;
+
+        this._element = document.createElement("div");
+        this._element.classList.add(WebInspector.TabBarItem.StyleClassName);
+        this._element.setAttribute("role", "tab");
+        this._element.tabIndex = 0;
+        if (pinned)
+            this._element.classList.add("pinned");
+        this._element[WebInspector.TabBarItem.ElementReferenceSymbol] = this;
+
+        if (!pinned) {
+            this._closeButtonElement = document.createElement("div");
+            this._closeButtonElement.classList.add(WebInspector.TabBarItem.CloseButtonStyleClassName);
+            this._closeButtonElement.title = WebInspector.UIString("Click to close this tab");
+            this._element.appendChild(this._closeButtonElement);
+
+            var flexSpaceElement = document.createElement("div");
+            flexSpaceElement.classList.add("flex-space");
+            this._element.appendChild(flexSpaceElement);
+
+            this._element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+        }
+
+        this._iconElement = document.createElement("img");
+        this._iconElement.classList.add("icon");
+        this._element.appendChild(this._iconElement);
+
+        if (!pinned) {
+            var flexSpaceElement = document.createElement("div");
+            flexSpaceElement.classList.add("flex-space");
+            this._element.appendChild(flexSpaceElement);
+        }
+
+        this.title = title;
+        this.image = image;
+        this.representedObject = representedObject;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get representedObject()
+    {
+        return this._representedObject;
+    }
+
+    set representedObject(representedObject)
+    {
+        this._representedObject = representedObject || null;
+    }
+
+    get parentTabBar()
+    {
+        return this._parentTabBar;
+    }
+
+    set parentTabBar(tabBar)
+    {
+        this._parentTabBar = tabBar || null;
+    }
+
+    get selected()
+    {
+        return this._element.classList.contains("selected");
+    }
+
+    set selected(selected)
+    {
+        this._element.classList.toggle("selected", selected);
+
+        if (selected)
+            this._element.setAttribute("aria-selected", "true");
+        else
+            this._element.removeAttribute("aria-selected");
+    }
+
+    get disabled()
+    {
+        return this._element.classList.contains("disabled");
+    }
+
+    set disabled(disabled)
+    {
+        this._element.classList.toggle("disabled", disabled);
+    }
+
+    get isDefaultTab()
+    {
+        return this._element.classList.contains("default-tab");
+    }
+
+    set isDefaultTab(isDefaultTab)
+    {
+        this._element.classList.toggle("default-tab", isDefaultTab);
+    }
+
+    get pinned()
+    {
+        return this._element.classList.contains("pinned");
+    }
+
+    get image()
+    {
+        return this._iconElement.src;
+    }
+
+    set image(url)
+    {
+        this._iconElement.src = url || "";
+    }
+
+    get title()
+    {
+        return this._element.title || "";
+    }
+
+    set title(title)
+    {
+        if (title && !this.pinned) {
+            this._titleElement = document.createElement("span");
+            this._titleElement.classList.add("title");
+
+            this._titleContentElement = document.createElement("span");
+            this._titleContentElement.classList.add("content");
+            this._titleElement.appendChild(this._titleContentElement);
+
+            this._titleContentElement.textContent = title;
+
+            this._element.insertBefore(this._titleElement, this._element.lastChild);
+        } else {
+            if (this._titleElement)
+                this._titleElement.remove();
+
+            this._titleContentElement = null;
+            this._titleElement = null;
+        }
+
+        this._element.title = title || "";
+    }
+
+    // Private
+
+    _handleContextMenuEvent(event)
+    {
+        if (!this._parentTabBar)
+            return;
+
+        let closeTab = () => {
+            this._parentTabBar.removeTabBarItem(this);
+        };
+
+        let closeOtherTabs = () => {
+            let tabBarItems = this._parentTabBar.tabBarItems;
+            for (let i = tabBarItems.length - 1; i >= 0; --i) {
+                let item = tabBarItems[i];
+                if (item === this || item.pinned)
+                    continue;
+                this._parentTabBar.removeTabBarItem(item);
+            }
+        };
+
+        let hasOtherNonPinnedTabs = this._parentTabBar.tabBarItems.some((item) => item !== this && !item.pinned);
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        contextMenu.appendItem(WebInspector.UIString("Close Tab"), closeTab, !hasOtherNonPinnedTabs);
+        contextMenu.appendItem(WebInspector.UIString("Close Other Tabs"), closeOtherTabs, !hasOtherNonPinnedTabs);
+    }
+};
+
+WebInspector.TabBarItem.StyleClassName = "item";
+WebInspector.TabBarItem.CloseButtonStyleClassName = "close";
+WebInspector.TabBarItem.ElementReferenceSymbol = Symbol("tab-bar-item");
diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBrowser.css b/Source/WebInspectorUI/UserInterface/Views/TabBrowser.css
new file mode 100644
index 000000000..0179b72e4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBrowser.css
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.tab-browser {
+    position: relative;
+    overflow: hidden;
+}
+
+.tab-browser > .tab-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.tab-browser > .content-view-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.tab-browser > .tab-bar + .content-view-container {
+    top: 31px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js b/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js
new file mode 100644
index 000000000..56dbb5f57
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabBrowser.js
@@ -0,0 +1,375 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TabBrowser = class TabBrowser extends WebInspector.View
+{
+    constructor(element, tabBar, navigationSidebar, detailsSidebar)
+    {
+        console.assert(tabBar, "Must provide a TabBar.");
+
+        super(element);
+
+        this.element.classList.add("tab-browser");
+
+        this._tabBar = tabBar;
+        this._navigationSidebar = navigationSidebar || null;
+        this._detailsSidebar = detailsSidebar || null;
+
+        if (this._navigationSidebar)
+            this._navigationSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
+
+        if (this._detailsSidebar) {
+            this._detailsSidebar.addEventListener(WebInspector.Sidebar.Event.CollapsedStateDidChange, this._sidebarCollapsedStateDidChange, this);
+            this._detailsSidebar.addEventListener(WebInspector.Sidebar.Event.SidebarPanelSelected, this._sidebarPanelSelected, this);
+        }
+
+        this._contentViewContainer = new WebInspector.ContentViewContainer;
+        this.addSubview(this._contentViewContainer);
+
+        var showNextTab = this._showNextTab.bind(this);
+        var showPreviousTab = this._showPreviousTab.bind(this);
+
+        this._showNextTabKeyboardShortcut1 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.RightCurlyBrace, showNextTab);
+        this._showPreviousTabKeyboardShortcut1 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.LeftCurlyBrace, showPreviousTab);
+        this._showNextTabKeyboardShortcut2 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control, WebInspector.KeyboardShortcut.Key.Tab, showNextTab);
+        this._showPreviousTabKeyboardShortcut2 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Tab, showPreviousTab);
+
+        this._showNextTabKeyboardShortcut3 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Right, this._showNextTabCheckingForEditableField.bind(this));
+        this._showNextTabKeyboardShortcut3.implicitlyPreventsDefault = false;
+        this._showPreviousTabKeyboardShortcut3 = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Left, this._showPreviousTabCheckingForEditableField.bind(this));
+        this._showPreviousTabKeyboardShortcut3.implicitlyPreventsDefault = false;
+
+        this._tabBar.newTabItem = new WebInspector.TabBarItem("Images/NewTabPlus.svg", WebInspector.UIString("Create a new tab"), true);
+
+        this._tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemSelected, this._tabBarItemSelected, this);
+        this._tabBar.addEventListener(WebInspector.TabBar.Event.TabBarItemRemoved, this._tabBarItemRemoved, this);
+
+        this._recentTabContentViews = [];
+    }
+
+    // Public
+
+    get tabBar()
+    {
+        return this._tabBar;
+    }
+
+    get navigationSidebar()
+    {
+        return this._navigationSidebar;
+    }
+
+    get detailsSidebar()
+    {
+        return this._detailsSidebar;
+    }
+
+    get selectedTabContentView()
+    {
+        return this._contentViewContainer.currentContentView;
+    }
+
+    bestTabContentViewForClass(constructor)
+    {
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+
+        for (var tabContentView of this._recentTabContentViews) {
+            if (tabContentView instanceof constructor)
+                return tabContentView;
+        }
+
+        return null;
+    }
+
+    bestTabContentViewForRepresentedObject(representedObject)
+    {
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+
+        for (var tabContentView of this._recentTabContentViews) {
+            if (tabContentView.canShowRepresentedObject(representedObject))
+                return tabContentView;
+        }
+
+        return null;
+    }
+
+    addTabForContentView(tabContentView, doNotAnimate, insertionIndex)
+    {
+        console.assert(tabContentView instanceof WebInspector.TabContentView);
+        if (!(tabContentView instanceof WebInspector.TabContentView))
+            return false;
+
+        var tabBarItem = tabContentView.tabBarItem;
+
+        console.assert(tabBarItem instanceof WebInspector.TabBarItem);
+        if (!(tabBarItem instanceof WebInspector.TabBarItem))
+            return false;
+
+        if (tabBarItem.representedObject !== tabContentView)
+            tabBarItem.representedObject = tabContentView;
+
+        tabContentView.parentTabBrowser = this;
+
+        if (tabBarItem.parentTabBar === this._tabBar)
+            return true;
+
+        // Add the tab after the first tab content view, since the first
+        // tab content view is the currently selected one.
+        if (this._recentTabContentViews.length && this.selectedTabContentView)
+            this._recentTabContentViews.splice(1, 0, tabContentView);
+        else
+            this._recentTabContentViews.push(tabContentView);
+
+        if (typeof insertionIndex === "number")
+            this._tabBar.insertTabBarItem(tabBarItem, insertionIndex, doNotAnimate);
+        else
+            this._tabBar.addTabBarItem(tabBarItem, doNotAnimate);
+
+        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+
+        return true;
+    }
+
+    showTabForContentView(tabContentView, doNotAnimate, insertionIndex)
+    {
+        if (!this.addTabForContentView(tabContentView, doNotAnimate, insertionIndex))
+            return false;
+
+        this._tabBar.selectedTabBarItem = tabContentView.tabBarItem;
+
+        // FIXME: this is a workaround for <https://webkit.org/b/151876>.
+        // Without this extra call, we might never lay out the child tab
+        // if it has already marked itself as dirty in the same run loop
+        // as it is attached. It will schedule a layout, but when the rAF
+        // fires the parent will abort the layout because the counter is
+        // out of sync.
+        this.needsLayout();
+        return true;
+    }
+
+    closeTabForContentView(tabContentView, doNotAnimate)
+    {
+        console.assert(tabContentView instanceof WebInspector.TabContentView);
+        if (!(tabContentView instanceof WebInspector.TabContentView))
+            return false;
+
+        console.assert(tabContentView.tabBarItem instanceof WebInspector.TabBarItem);
+        if (!(tabContentView.tabBarItem instanceof WebInspector.TabBarItem))
+            return false;
+
+        if (tabContentView.tabBarItem.parentTabBar !== this._tabBar)
+            return false;
+
+        this._tabBar.removeTabBarItem(tabContentView.tabBarItem, doNotAnimate);
+
+        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+
+        return true;
+    }
+
+    // Private
+
+    _tabBarItemSelected(event)
+    {
+        var tabContentView = this._tabBar.selectedTabBarItem ? this._tabBar.selectedTabBarItem.representedObject : null;
+
+        if (tabContentView) {
+            this._recentTabContentViews.remove(tabContentView);
+            this._recentTabContentViews.unshift(tabContentView);
+
+            this._contentViewContainer.showContentView(tabContentView);
+
+            console.assert(this.selectedTabContentView);
+            console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
+            console.assert(this.selectedTabContentView === this._recentTabContentViews[0]);
+        } else {
+            this._contentViewContainer.closeAllContentViews();
+
+            console.assert(!this.selectedTabContentView);
+        }
+
+        this._showNavigationSidebarPanelForTabContentView(tabContentView);
+        this._showDetailsSidebarPanelsForTabContentView(tabContentView);
+
+        this.dispatchEventToListeners(WebInspector.TabBrowser.Event.SelectedTabContentViewDidChange);
+    }
+
+    _tabBarItemRemoved(event)
+    {
+        var tabContentView = event.data.tabBarItem.representedObject;
+
+        console.assert(tabContentView);
+        if (!tabContentView)
+            return;
+
+        this._recentTabContentViews.remove(tabContentView);
+        this._contentViewContainer.closeContentView(tabContentView);
+
+        tabContentView.parentTabBrowser = null;
+
+        console.assert(this._recentTabContentViews.length === this._tabBar.tabBarItems.length - (this._tabBar.newTabItem ? 1 : 0));
+        console.assert(!this.selectedTabContentView || this.selectedTabContentView === this._recentTabContentViews[0]);
+    }
+
+    _sidebarPanelSelected(event)
+    {
+        if (this._ignoreSidebarEvents)
+            return;
+
+        var tabContentView = this.selectedTabContentView;
+        if (!tabContentView)
+            return;
+
+        console.assert(event.target === this._detailsSidebar);
+
+        if (tabContentView.managesDetailsSidebarPanels)
+            return;
+
+        var selectedSidebarPanel = this._detailsSidebar.selectedSidebarPanel;
+        tabContentView.detailsSidebarSelectedPanelSetting.value = selectedSidebarPanel ? selectedSidebarPanel.identifier : null;
+    }
+
+    _sidebarCollapsedStateDidChange(event)
+    {
+        if (this._ignoreSidebarEvents)
+            return;
+
+        var tabContentView = this.selectedTabContentView;
+        if (!tabContentView)
+            return;
+
+        if (event.target === this._navigationSidebar)
+            tabContentView.navigationSidebarCollapsedSetting.value = this._navigationSidebar.collapsed;
+        else if (event.target === this._detailsSidebar && !tabContentView.managesDetailsSidebarPanels)
+            tabContentView.detailsSidebarCollapsedSetting.value = this._detailsSidebar.collapsed;
+    }
+
+    _showNavigationSidebarPanelForTabContentView(tabContentView)
+    {
+        if (!this._navigationSidebar)
+            return;
+
+        this._ignoreSidebarEvents = true;
+
+        this._navigationSidebar.removeSidebarPanel(0);
+
+        console.assert(!this._navigationSidebar.sidebarPanels.length);
+
+        if (!tabContentView) {
+            this._ignoreSidebarEvents = false;
+            return;
+        }
+
+        var navigationSidebarPanel = tabContentView.navigationSidebarPanel;
+        if (!navigationSidebarPanel) {
+            this._navigationSidebar.collapsed = true;
+            this._ignoreSidebarEvents = false;
+            return;
+        }
+
+        this._navigationSidebar.addSidebarPanel(navigationSidebarPanel);
+        this._navigationSidebar.selectedSidebarPanel = navigationSidebarPanel;
+
+        this._navigationSidebar.collapsed = tabContentView.navigationSidebarCollapsedSetting.value;
+
+        this._ignoreSidebarEvents = false;
+    }
+
+    _showDetailsSidebarPanelsForTabContentView(tabContentView)
+    {
+        if (!this._detailsSidebar)
+            return;
+
+        this._ignoreSidebarEvents = true;
+
+        for (var i = this._detailsSidebar.sidebarPanels.length - 1; i >= 0; --i)
+            this._detailsSidebar.removeSidebarPanel(i);
+
+        console.assert(!this._detailsSidebar.sidebarPanels.length);
+
+        if (!tabContentView) {
+            this._ignoreSidebarEvents = false;
+            return;
+        }
+
+        if (tabContentView.managesDetailsSidebarPanels) {
+            tabContentView.showDetailsSidebarPanels();
+            this._ignoreSidebarEvents = false;
+            return;
+        }
+
+        var detailsSidebarPanels = tabContentView.detailsSidebarPanels;
+        if (!detailsSidebarPanels) {
+            this._detailsSidebar.collapsed = true;
+            this._ignoreSidebarEvents = false;
+            return;
+        }
+
+        for (var detailsSidebarPanel of detailsSidebarPanels)
+            this._detailsSidebar.addSidebarPanel(detailsSidebarPanel);
+
+        this._detailsSidebar.selectedSidebarPanel = tabContentView.detailsSidebarSelectedPanelSetting.value || detailsSidebarPanels[0];
+
+        this._detailsSidebar.collapsed = tabContentView.detailsSidebarCollapsedSetting.value || !detailsSidebarPanels.length;
+
+        this._ignoreSidebarEvents = false;
+    }
+
+    _showPreviousTab(event)
+    {
+        this._tabBar.selectPreviousTab();
+    }
+
+    _showNextTab(event)
+    {
+        this._tabBar.selectNextTab();
+    }
+
+    _showNextTabCheckingForEditableField(event)
+    {
+        if (WebInspector.isEventTargetAnEditableField(event))
+            return;
+
+        this._showNextTab(event);
+
+        event.preventDefault();
+    }
+
+    _showPreviousTabCheckingForEditableField(event)
+    {
+        if (WebInspector.isEventTargetAnEditableField(event))
+            return;
+
+        this._showPreviousTab(event);
+
+        event.preventDefault();
+    }
+};
+
+WebInspector.TabBrowser.Event = {
+    SelectedTabContentViewDidChange: "tab-browser-selected-tab-content-view-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TabContentView.js b/Source/WebInspectorUI/UserInterface/Views/TabContentView.js
new file mode 100644
index 000000000..d9f768dfd
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TabContentView.js
@@ -0,0 +1,190 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TabContentView = class TabContentView extends WebInspector.ContentView
+{
+    constructor(identifier, styleClassNames, tabBarItem, navigationSidebarPanel, detailsSidebarPanels)
+    {
+        console.assert(typeof identifier === "string");
+        console.assert(typeof styleClassNames === "string" || styleClassNames.every(function(className) { return typeof className === "string"; }));
+        console.assert(tabBarItem instanceof WebInspector.TabBarItem);
+        console.assert(!navigationSidebarPanel || navigationSidebarPanel instanceof WebInspector.NavigationSidebarPanel);
+        console.assert(!detailsSidebarPanels || detailsSidebarPanels.every(function(detailsSidebarPanel) { return detailsSidebarPanel instanceof WebInspector.DetailsSidebarPanel; }));
+
+        super(null);
+
+        this.element.classList.add("tab");
+
+        if (typeof styleClassNames === "string")
+            styleClassNames = [styleClassNames];
+
+        this.element.classList.add(...styleClassNames);
+
+        this._identifier = identifier;
+        this._tabBarItem = tabBarItem;
+        this._navigationSidebarPanel = navigationSidebarPanel || null;
+        this._detailsSidebarPanels = detailsSidebarPanels || [];
+
+        this._navigationSidebarCollapsedSetting = new WebInspector.Setting(identifier + "-navigation-sidebar-collapsed", false);
+
+        this._detailsSidebarCollapsedSetting = new WebInspector.Setting(identifier + "-details-sidebar-collapsed", true);
+        this._detailsSidebarSelectedPanelSetting = new WebInspector.Setting(identifier + "-details-sidebar-selected-panel", null);
+
+        this._cookieSetting = new WebInspector.Setting(identifier + "-tab-cookie", {});
+    }
+
+    static isTabAllowed()
+    {
+        // Returns false if a necessary domain or other features are unavailable.
+        return true;
+    }
+
+    static isEphemeral()
+    {
+        // Returns true if the tab should not be shown in the new tab content view.
+        return false;
+    }
+
+    static shouldSaveTab()
+    {
+        // Returns false if the tab should not be restored when re-opening the Inspector.
+        return true;
+    }
+
+    // Public
+
+    get type()
+    {
+        // Implemented by subclasses.
+        return null;
+    }
+
+    get parentTabBrowser()
+    {
+        return this._parentTabBrowser;
+    }
+
+    set parentTabBrowser(tabBrowser)
+    {
+        this._parentTabBrowser = tabBrowser || null;
+    }
+
+    get identifier()
+    {
+        return this._identifier;
+    }
+
+    get tabBarItem()
+    {
+        return this._tabBarItem;
+    }
+
+    get managesDetailsSidebarPanels()
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    showDetailsSidebarPanels()
+    {
+        // Implemented by subclasses.
+    }
+
+    showRepresentedObject(representedObject, cookie)
+    {
+        // Implemented by subclasses.
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        // Implemented by subclasses.
+        return false;
+    }
+
+    shown()
+    {
+        if (this._shouldRestoreStateWhenShown)
+            this.restoreStateFromCookie(WebInspector.StateRestorationType.Delayed);
+    }
+
+    restoreStateFromCookie(restorationType)
+    {
+        if (!this.navigationSidebarPanel)
+            return;
+
+        if (!this.visible) {
+            this._shouldRestoreStateWhenShown = true;
+            return;
+        }
+
+        this._shouldRestoreStateWhenShown = false;
+
+        var relaxMatchDelay = 0;
+        if (restorationType === WebInspector.StateRestorationType.Load)
+            relaxMatchDelay = 1000;
+        else if (restorationType === WebInspector.StateRestorationType.Navigation)
+            relaxMatchDelay = 2000;
+
+        this.navigationSidebarPanel.restoreStateFromCookie(this._cookieSetting.value || {}, relaxMatchDelay);
+    }
+
+    saveStateToCookie()
+    {
+        if (!this.navigationSidebarPanel)
+            return;
+
+        if (this._shouldRestoreStateWhenShown)
+            return;
+
+        var cookie = {};
+        this.navigationSidebarPanel.saveStateToCookie(cookie);
+        this._cookieSetting.value = cookie;
+    }
+
+    get navigationSidebarPanel()
+    {
+        return this._navigationSidebarPanel;
+    }
+
+    get navigationSidebarCollapsedSetting()
+    {
+        return this._navigationSidebarCollapsedSetting;
+    }
+
+    get detailsSidebarPanels()
+    {
+        return this._detailsSidebarPanels;
+    }
+
+    get detailsSidebarCollapsedSetting()
+    {
+        return this._detailsSidebarCollapsedSetting;
+    }
+
+    get detailsSidebarSelectedPanelSetting()
+    {
+        return this._detailsSidebarSelectedPanelSetting;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/TextContentView.css b/Source/WebInspectorUI/UserInterface/Views/TextContentView.css
index e03aa2433..e03aa2433 100644
--- a/Source/WebInspectorUI/UserInterface/TextContentView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/TextContentView.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/TextContentView.js b/Source/WebInspectorUI/UserInterface/Views/TextContentView.js
new file mode 100644
index 000000000..d3a5e5923
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextContentView.js
@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextContentView = class TextContentView extends WebInspector.ContentView
+{
+    constructor(string, mimeType)
+    {
+        super(string);
+
+        this.element.classList.add("text");
+
+        this._textEditor = new WebInspector.TextEditor;
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
+
+        this.addSubview(this._textEditor);
+
+        this._textEditor.readOnly = true;
+        this._textEditor.mimeType = mimeType;
+        this._textEditor.string = string;
+
+        var toolTip = WebInspector.UIString("Pretty print");
+        var activatedToolTip = WebInspector.UIString("Original formatting");
+        this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.svg", 13, 13);
+        this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
+        this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
+
+        var toolTipTypes = WebInspector.UIString("Show type information");
+        var activatedToolTipTypes = WebInspector.UIString("Hide type information");
+        this._showTypesButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("show-types", toolTipTypes, activatedToolTipTypes, "Images/NavigationItemTypes.svg", 13, 14);
+        this._showTypesButtonNavigationItem.enabled = false;
+    }
+
+    // Public
+
+    get textEditor()
+    {
+        return this._textEditor;
+    }
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem, this._showTypesButtonNavigationItem];
+    }
+
+    revealPosition(position, textRangeToSelect, forceUnformatted)
+    {
+        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._textEditor.shown();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._textEditor.hidden();
+    }
+
+    closed()
+    {
+        super.closed();
+
+        this._textEditor.close();
+    }
+
+    get supportsSave()
+    {
+        return true;
+    }
+
+    get saveData()
+    {
+        var url = "web-inspector:///" + encodeURI(WebInspector.UIString("Untitled")) + ".txt";
+        return {url, content: this._textEditor.string, forceSaveAs: true};
+    }
+
+    get supportsSearch()
+    {
+        return true;
+    }
+
+    get numberOfSearchResults()
+    {
+        return this._textEditor.numberOfSearchResults;
+    }
+
+    get hasPerformedSearch()
+    {
+        return this._textEditor.currentSearchQuery !== null;
+    }
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
+    }
+
+    performSearch(query)
+    {
+        this._textEditor.performSearch(query);
+    }
+
+    searchCleared()
+    {
+        this._textEditor.searchCleared();
+    }
+
+    searchQueryWithSelection()
+    {
+        return this._textEditor.searchQueryWithSelection();
+    }
+
+    revealPreviousSearchResult(changeFocus)
+    {
+        this._textEditor.revealPreviousSearchResult(changeFocus);
+    }
+
+    revealNextSearchResult(changeFocus)
+    {
+        this._textEditor.revealNextSearchResult(changeFocus);
+    }
+
+    // Private
+
+    _togglePrettyPrint(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.formatted = activated;
+    }
+
+    _textEditorFormattingDidChange(event)
+    {
+        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
+    }
+
+    _numberOfSearchResultsDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TextEditor.css b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
new file mode 100644
index 000000000..2cce89d34
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextEditor.css
@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.text-editor {
+    position: relative;
+
+    overflow: hidden;
+}
+
+.text-editor > .CodeMirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: auto;
+}
+
+.text-editor > .CodeMirror .has-breakpoint:not(.breakpoint-disabled) .CodeMirror-linenumber {
+    color: white;
+}
+
+.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber {
+    color: transparent;
+}
+
+.text-editor > .CodeMirror .has-breakpoint .CodeMirror-linenumber::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: -7px;
+
+    content: "";
+
+    z-index: -2;
+
+    border-image-source: -webkit-image-set(url(../Images/BreakpointInactive.png) 1x, url(../Images/BreakpointInactive@2x.png) 2x);
+    border-image-slice: 3 7 3 3 fill;
+    border-width: 3px 7px 3px 3px;
+}
+
+.text-editor > .CodeMirror .breakpoint-resolved .CodeMirror-linenumber::before {
+    border-image-source: -webkit-image-set(url(../Images/Breakpoint.png) 1x, url(../Images/Breakpoint@2x.png) 2x);
+}
+
+.text-editor > .CodeMirror .breakpoint-auto-continue:not(.breakpoint-disabled) .CodeMirror-linenumber::before {
+    opacity: 0.6;
+}
+
+.text-editor > .CodeMirror .breakpoint-disabled .CodeMirror-linenumber::before {
+    opacity: 0.35;
+}
+
+.text-editor > .CodeMirror .has-breakpoint.multiple-breakpoints .CodeMirror-linenumber::before {
+    content: "•••";
+    color: white;
+    line-height: 6px;
+    text-align: center;
+    text-indent: -1px;
+}
+
+.text-editor > .CodeMirror .execution-line .CodeMirror-linenumber::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: -9px;
+    width: 9px;
+
+    content: "";
+
+    z-index: -1;
+
+    background-image: -webkit-image-set(url(../Images/InstructionPointer.png) 1x, url(../Images/InstructionPointer@2x.png) 2x);
+    background-size: 9px 100%;
+    background-repeat: no-repeat;
+}
+
+.text-editor > .CodeMirror .execution-line {
+    background-color: hsl(99, 38%, 86%) !important;
+}
+
+.text-editor > .CodeMirror .highlighted {
+    animation: "text-editor-highlight-fadeout" 2s;
+}
+
+@keyframes text-editor-highlight-fadeout {
+    from { background-color: highlight; }
+}
+
+.text-editor > .CodeMirror .hovered-expression-highlight {
+    animation: "text-editor-hovered-expression-highlight-fadeout" 2s;
+    background-color: hsla(0, 0%, 0%, 0.1);
+}
+
+@keyframes text-editor-hovered-expression-highlight-fadeout {
+    from { background-color: highlight; }
+    to { background-color: hsla(0, 0%, 0%, 0.1); }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TextEditor.js b/Source/WebInspectorUI/UserInterface/Views/TextEditor.js
new file mode 100644
index 000000000..ea5d0ab07
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextEditor.js
@@ -0,0 +1,1445 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextEditor = class TextEditor extends WebInspector.View
+{
+    constructor(element, mimeType, delegate)
+    {
+        super(element);
+
+        this.element.classList.add("text-editor", WebInspector.SyntaxHighlightedStyleClassName);
+
+        // FIXME: <https://webkit.org/b/149120> Web Inspector: Preferences for Text Editor behavior
+        this._codeMirror = WebInspector.CodeMirrorEditor.create(this.element, {
+            readOnly: true,
+            indentWithTabs: true,
+            indentUnit: 4,
+            lineNumbers: true,
+            lineWrapping: false,
+            matchBrackets: true,
+            autoCloseBrackets: true
+        });
+
+        this._codeMirror.on("change", this._contentChanged.bind(this));
+        this._codeMirror.on("gutterClick", this._gutterMouseDown.bind(this));
+        this._codeMirror.on("gutterContextMenu", this._gutterContextMenu.bind(this));
+        this._codeMirror.getScrollerElement().addEventListener("click", this._openClickedLinks.bind(this), true);
+
+        this._completionController = new WebInspector.CodeMirrorCompletionController(this._codeMirror, this);
+        this._tokenTrackingController = new WebInspector.CodeMirrorTokenTrackingController(this._codeMirror, this);
+
+        this._initialStringNotSet = true;
+
+        this.mimeType = mimeType;
+
+        this._breakpoints = {};
+        this._executionLineNumber = NaN;
+        this._executionColumnNumber = NaN;
+
+        this._searchQuery = null;
+        this._searchResults = [];
+        this._currentSearchResultIndex = -1;
+        this._ignoreCodeMirrorContentDidChangeEvent = 0;
+
+        this._formatted = false;
+        this._formatterSourceMap = null;
+
+        this._delegate = delegate || null;
+    }
+
+    // Public
+
+    get visible()
+    {
+        return this._visible;
+    }
+
+    get string()
+    {
+        return this._codeMirror.getValue();
+    }
+
+    set string(newString)
+    {
+        function update()
+        {
+            // Clear any styles that may have been set on the empty line before content loaded.
+            if (this._initialStringNotSet)
+                this._codeMirror.removeLineClass(0, "wrap");
+
+            this._codeMirror.setValue(newString);
+            console.assert(this.string.length === newString.length, "A lot of our code depends on precise text offsets, so the string should remain the same.");
+
+            if (this._initialStringNotSet) {
+                this._codeMirror.clearHistory();
+                this._codeMirror.markClean();
+                delete this._initialStringNotSet;
+            }
+
+            // Automatically format the content.
+            if (this._autoFormat) {
+                console.assert(!this.formatted);
+                this.formatted = true;
+                delete this._autoFormat;
+            }
+
+            // Update the execution line now that we might have content for that line.
+            this._updateExecutionLine();
+
+            // Set the breakpoint styles now that we might have content for those lines.
+            for (var lineNumber in this._breakpoints)
+                this._setBreakpointStylesOnLine(lineNumber);
+
+            // Try revealing the pending line now that we might have content with enough lines.
+            this._revealPendingPositionIfPossible();
+        }
+
+        this._ignoreCodeMirrorContentDidChangeEvent++;
+        this._codeMirror.operation(update.bind(this));
+        this._ignoreCodeMirrorContentDidChangeEvent--;
+        console.assert(this._ignoreCodeMirrorContentDidChangeEvent >= 0);
+    }
+
+    get readOnly()
+    {
+        return this._codeMirror.getOption("readOnly") || false;
+    }
+
+    set readOnly(readOnly)
+    {
+        this._codeMirror.setOption("readOnly", readOnly);
+    }
+
+    get formatted()
+    {
+        return this._formatted;
+    }
+
+    set formatted(formatted)
+    {
+        if (this._formatted === formatted)
+            return;
+
+        console.assert(!formatted || this.canBeFormatted());
+        if (formatted && !this.canBeFormatted())
+            return;
+
+        this._ignoreCodeMirrorContentDidChangeEvent++;
+        this.prettyPrint(formatted);
+        this._ignoreCodeMirrorContentDidChangeEvent--;
+        console.assert(this._ignoreCodeMirrorContentDidChangeEvent >= 0);
+
+        this._formatted = formatted;
+
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.FormattingDidChange);
+    }
+
+    set autoFormat(auto)
+    {
+        this._autoFormat = auto;
+    }
+
+    hasFormatter()
+    {
+        var supportedModes = {
+            "javascript": true,
+            "css": true,
+        };
+
+        var mode = this._codeMirror.getMode();
+        return mode.name in supportedModes;
+    }
+
+    canBeFormatted()
+    {
+        // Can be overriden by subclasses.
+        return this.hasFormatter();
+    }
+
+    canShowTypeAnnotations()
+    {
+        return false;
+    }
+
+    get selectedTextRange()
+    {
+        var start = this._codeMirror.getCursor(true);
+        var end = this._codeMirror.getCursor(false);
+        return this._textRangeFromCodeMirrorPosition(start, end);
+    }
+
+    set selectedTextRange(textRange)
+    {
+        var position = this._codeMirrorPositionFromTextRange(textRange);
+        this._codeMirror.setSelection(position.start, position.end);
+    }
+
+    get mimeType()
+    {
+        return this._mimeType;
+    }
+
+    set mimeType(newMIMEType)
+    {
+        newMIMEType = parseMIMEType(newMIMEType).type;
+
+        this._mimeType = newMIMEType;
+        this._codeMirror.setOption("mode", newMIMEType);
+    }
+
+    get executionLineNumber()
+    {
+        return this._executionLineNumber;
+    }
+
+    set executionLineNumber(lineNumber)
+    {
+        // Only return early if there isn't a line handle and that isn't changing.
+        if (!this._executionLineHandle && isNaN(lineNumber))
+            return;
+
+        this._executionLineNumber = lineNumber;
+        this._updateExecutionLine();
+
+        // Still dispatch the event even if the number didn't change. The execution state still
+        // could have changed (e.g. continuing in a loop with a breakpoint inside).
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange);
+    }
+
+    get executionColumnNumber()
+    {
+        return this._executionColumnNumber;
+    }
+
+    set executionColumnNumber(columnNumber)
+    {
+        this._executionColumnNumber = columnNumber;
+    }
+
+    get formatterSourceMap()
+    {
+        return this._formatterSourceMap;
+    }
+
+    get tokenTrackingController()
+    {
+        return this._tokenTrackingController;
+    }
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    set delegate(newDelegate)
+    {
+        this._delegate = newDelegate || null;
+    }
+
+    get numberOfSearchResults()
+    {
+        return this._searchResults.length;
+    }
+
+    get currentSearchQuery()
+    {
+        return this._searchQuery;
+    }
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._automaticallyRevealFirstSearchResult = reveal;
+
+        // If we haven't shown a search result yet, reveal one now.
+        if (this._automaticallyRevealFirstSearchResult && this._searchResults.length > 0) {
+            if (this._currentSearchResultIndex === -1)
+                this._revealFirstSearchResultAfterCursor();
+        }
+    }
+
+    performSearch(query)
+    {
+        if (this._searchQuery === query)
+            return;
+
+        this.searchCleared();
+
+        this._searchQuery = query;
+
+        // Allow subclasses to handle the searching if they have a better way.
+        // If we are formatted, just use CodeMirror's search.
+        if (typeof this.customPerformSearch === "function" && !this.formatted) {
+            if (this.customPerformSearch(query))
+                return;
+        }
+
+        // Go down the slow patch for all other text content.
+        var queryRegex = new RegExp(query.escapeForRegExp(), "gi");
+        var searchCursor = this._codeMirror.getSearchCursor(queryRegex, {line: 0, ch: 0}, false);
+        var boundBatchSearch = batchSearch.bind(this);
+        var numberOfSearchResultsDidChangeTimeout = null;
+
+        function reportNumberOfSearchResultsDidChange()
+        {
+            if (numberOfSearchResultsDidChangeTimeout) {
+                clearTimeout(numberOfSearchResultsDidChangeTimeout);
+                numberOfSearchResultsDidChangeTimeout = null;
+            }
+
+            this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+        }
+
+        function batchSearch()
+        {
+            // Bail if the query changed since we started.
+            if (this._searchQuery !== query)
+                return;
+
+            var newSearchResults = [];
+            var foundResult = false;
+            for (var i = 0; i < WebInspector.TextEditor.NumberOfFindsPerSearchBatch && (foundResult = searchCursor.findNext()); ++i) {
+                var textRange = this._textRangeFromCodeMirrorPosition(searchCursor.from(), searchCursor.to());
+                newSearchResults.push(textRange);
+            }
+
+            this.addSearchResults(newSearchResults);
+
+            // Don't report immediately, coalesce updates so they come in no faster than half a second.
+            if (!numberOfSearchResultsDidChangeTimeout)
+                numberOfSearchResultsDidChangeTimeout = setTimeout(reportNumberOfSearchResultsDidChange.bind(this), 500);
+
+            if (foundResult) {
+                // More lines to search, set a timeout so we don't block the UI long.
+                setTimeout(boundBatchSearch, 50);
+            } else {
+                // Report immediately now that we are finished, canceling any pending update.
+                reportNumberOfSearchResultsDidChange.call(this);
+            }
+        }
+
+        // Start the search.
+        boundBatchSearch();
+    }
+
+    addSearchResults(textRanges)
+    {
+        console.assert(textRanges);
+        if (!textRanges || !textRanges.length)
+            return;
+
+        function markRanges()
+        {
+            for (var i = 0; i < textRanges.length; ++i) {
+                var position = this._codeMirrorPositionFromTextRange(textRanges[i]);
+                var mark = this._codeMirror.markText(position.start, position.end, {className: WebInspector.TextEditor.SearchResultStyleClassName});
+                this._searchResults.push(mark);
+            }
+
+            // If we haven't shown a search result yet, reveal one now.
+            if (this._automaticallyRevealFirstSearchResult) {
+                if (this._currentSearchResultIndex === -1)
+                    this._revealFirstSearchResultAfterCursor();
+            }
+        }
+
+        this._codeMirror.operation(markRanges.bind(this));
+    }
+
+    searchCleared()
+    {
+        function clearResults() {
+            for (var i = 0; i < this._searchResults.length; ++i)
+                this._searchResults[i].clear();
+        }
+
+        this._codeMirror.operation(clearResults.bind(this));
+
+        this._searchQuery = null;
+        this._searchResults = [];
+        this._currentSearchResultIndex = -1;
+    }
+
+    searchQueryWithSelection()
+    {
+        if (!this._codeMirror.somethingSelected())
+            return null;
+
+        return this._codeMirror.getSelection();
+    }
+
+    revealPreviousSearchResult(changeFocus)
+    {
+        if (!this._searchResults.length)
+            return;
+
+        if (this._currentSearchResultIndex === -1 || this._cursorDoesNotMatchLastRevealedSearchResult()) {
+            this._revealFirstSearchResultBeforeCursor(changeFocus);
+            return;
+        }
+
+        if (this._currentSearchResultIndex > 0)
+            --this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = this._searchResults.length - 1;
+
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, -1);
+    }
+
+    revealNextSearchResult(changeFocus)
+    {
+        if (!this._searchResults.length)
+            return;
+
+        if (this._currentSearchResultIndex === -1 || this._cursorDoesNotMatchLastRevealedSearchResult()) {
+            this._revealFirstSearchResultAfterCursor(changeFocus);
+            return;
+        }
+
+        if (this._currentSearchResultIndex + 1 < this._searchResults.length)
+            ++this._currentSearchResultIndex;
+        else
+            this._currentSearchResultIndex = 0;
+
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, 1);
+    }
+
+    line(lineNumber)
+    {
+        return this._codeMirror.getLine(lineNumber);
+    }
+
+    getTextInRange(startPosition, endPosition)
+    {
+        return this._codeMirror.getRange(startPosition, endPosition);
+    }
+
+    addStyleToTextRange(startPosition, endPosition, styleClassName)
+    {
+        endPosition.ch += 1;
+        return this._codeMirror.getDoc().markText(startPosition, endPosition, {className: styleClassName, inclusiveLeft: true, inclusiveRight: true});
+    }
+
+    revealPosition(position, textRangeToSelect, forceUnformatted, noHighlight)
+    {
+        console.assert(position === undefined || position instanceof WebInspector.SourceCodePosition, "revealPosition called without a SourceCodePosition");
+        if (!(position instanceof WebInspector.SourceCodePosition))
+            return;
+
+        var lineHandle = this._codeMirror.getLineHandle(position.lineNumber);
+        if (!lineHandle || !this._visible || this._initialStringNotSet) {
+            // If we can't get a line handle or are not visible then we wait to do the reveal.
+            this._positionToReveal = position;
+            this._textRangeToSelect = textRangeToSelect;
+            this._forceUnformatted = forceUnformatted;
+            return;
+        }
+
+        // Delete now that the reveal is happening.
+        delete this._positionToReveal;
+        delete this._textRangeToSelect;
+        delete this._forceUnformatted;
+
+        // If we need to unformat, reveal the line after a wait.
+        // Otherwise the line highlight doesn't work properly.
+        if (this._formatted && forceUnformatted) {
+            this.formatted = false;
+            setTimeout(this.revealPosition.bind(this), 0, position, textRangeToSelect);
+            return;
+        }
+
+        if (!textRangeToSelect)
+            textRangeToSelect = new WebInspector.TextRange(position.lineNumber, position.columnNumber, position.lineNumber, position.columnNumber);
+
+        function removeStyleClass()
+        {
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
+        }
+
+        function revealAndHighlightLine()
+        {
+            // If the line is not visible, reveal it as the center line in the editor.
+            var position = this._codeMirrorPositionFromTextRange(textRangeToSelect);
+            if (!this._isPositionVisible(position.start))
+                this._scrollIntoViewCentered(position.start);
+
+            this.selectedTextRange = textRangeToSelect;
+
+            if (noHighlight)
+                return;
+
+            this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HighlightedStyleClassName);
+
+            // Use a timeout instead of a animationEnd event listener because the line element might
+            // be removed if the user scrolls during the animation. In that case animationEnd isn't
+            // fired, and the line would highlight again the next time it scrolls into view.
+            setTimeout(removeStyleClass.bind(this), WebInspector.TextEditor.HighlightAnimationDuration);
+        }
+
+        this._codeMirror.operation(revealAndHighlightLine.bind(this));
+    }
+
+    shown()
+    {
+        this._visible = true;
+
+        // Refresh since our size might have changed.
+        this._codeMirror.refresh();
+
+        // Try revealing the pending line now that we are visible.
+        // This needs to be done as a separate operation from the refresh
+        // so that the scrollInfo coordinates are correct.
+        this._revealPendingPositionIfPossible();
+    }
+
+    hidden()
+    {
+        this._visible = false;
+    }
+
+    setBreakpointInfoForLineAndColumn(lineNumber, columnNumber, breakpointInfo)
+    {
+        if (this._ignoreSetBreakpointInfoCalls)
+            return;
+
+        if (breakpointInfo)
+            this._addBreakpointToLineAndColumnWithInfo(lineNumber, columnNumber, breakpointInfo);
+        else
+            this._removeBreakpointFromLineAndColumn(lineNumber, columnNumber);
+    }
+
+    updateBreakpointLineAndColumn(oldLineNumber, oldColumnNumber, newLineNumber, newColumnNumber)
+    {
+        console.assert(this._breakpoints[oldLineNumber]);
+        if (!this._breakpoints[oldLineNumber])
+            return;
+
+        console.assert(this._breakpoints[oldLineNumber][oldColumnNumber]);
+        if (!this._breakpoints[oldLineNumber][oldColumnNumber])
+            return;
+
+        var breakpointInfo = this._breakpoints[oldLineNumber][oldColumnNumber];
+        this._removeBreakpointFromLineAndColumn(oldLineNumber, oldColumnNumber);
+        this._addBreakpointToLineAndColumnWithInfo(newLineNumber, newColumnNumber, breakpointInfo);
+    }
+
+    addStyleClassToLine(lineNumber, styleClassName)
+    {
+        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+        if (!lineHandle)
+            return null;
+
+        return this._codeMirror.addLineClass(lineHandle, "wrap", styleClassName);
+    }
+
+    removeStyleClassFromLine(lineNumber, styleClassName)
+    {
+        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+        console.assert(lineHandle);
+        if (!lineHandle)
+            return null;
+
+        return this._codeMirror.removeLineClass(lineHandle, "wrap", styleClassName);
+    }
+
+    toggleStyleClassForLine(lineNumber, styleClassName)
+    {
+        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+        console.assert(lineHandle);
+        if (!lineHandle)
+            return false;
+
+        return this._codeMirror.toggleLineClass(lineHandle, "wrap", styleClassName);
+    }
+
+    createWidgetForLine(lineNumber)
+    {
+        var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+        if (!lineHandle)
+            return null;
+
+        var widgetElement = document.createElement("div");
+        var lineWidget = this._codeMirror.addLineWidget(lineHandle, widgetElement, {coverGutter: false, noHScroll: true});
+        return new WebInspector.LineWidget(lineWidget, widgetElement);
+    }
+
+    get lineCount()
+    {
+        return this._codeMirror.lineCount();
+    }
+
+    focus()
+    {
+        this._codeMirror.focus();
+    }
+
+    contentDidChange(replacedRanges, newRanges)
+    {
+        // Implemented by subclasses.
+    }
+
+    rectsForRange(range)
+    {
+        return this._codeMirror.rectsForRange(range);
+    }
+
+    get markers()
+    {
+        return this._codeMirror.getAllMarks().map(WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker);
+    }
+
+    markersAtPosition(position)
+    {
+        return this._codeMirror.findMarksAt(position).map(WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker);
+    }
+
+    createColorMarkers(range)
+    {
+        return createCodeMirrorColorTextMarkers(this._codeMirror, range);
+    }
+
+    createGradientMarkers(range)
+    {
+        return createCodeMirrorGradientTextMarkers(this._codeMirror, range);
+    }
+
+    createCubicBezierMarkers(range)
+    {
+        return createCodeMirrorCubicBezierTextMarkers(this._codeMirror, range);
+    }
+
+    editingControllerForMarker(editableMarker)
+    {
+        switch (editableMarker.type) {
+        case WebInspector.TextMarker.Type.Color:
+            return new WebInspector.CodeMirrorColorEditingController(this._codeMirror, editableMarker);
+        case WebInspector.TextMarker.Type.Gradient:
+            return new WebInspector.CodeMirrorGradientEditingController(this._codeMirror, editableMarker);
+        case WebInspector.TextMarker.Type.CubicBezier:
+            return new WebInspector.CodeMirrorBezierEditingController(this._codeMirror, editableMarker);
+        default:
+            return new WebInspector.CodeMirrorEditingController(this._codeMirror, editableMarker);
+        }
+    }
+
+    visibleRangeOffsets()
+    {
+        var startOffset = null;
+        var endOffset = null;
+        var visibleRange = this._codeMirror.getViewport();
+
+        if (this._formatterSourceMap) {
+            startOffset = this._formatterSourceMap.formattedToOriginalOffset(Math.max(visibleRange.from - 1, 0), 0);
+            endOffset = this._formatterSourceMap.formattedToOriginalOffset(visibleRange.to - 1, 0);
+        } else {
+            startOffset = this._codeMirror.getDoc().indexFromPos({line: visibleRange.from, ch: 0});
+            endOffset = this._codeMirror.getDoc().indexFromPos({line: visibleRange.to, ch: 0});
+        }
+
+        return {startOffset, endOffset};
+    }
+
+    originalOffsetToCurrentPosition(offset)
+    {
+        var position = null;
+        if (this._formatterSourceMap) {
+            var location = this._formatterSourceMap.originalPositionToFormatted(offset);
+            position = {line: location.lineNumber, ch: location.columnNumber};
+        } else
+            position = this._codeMirror.getDoc().posFromIndex(offset);
+
+        return position;
+    }
+
+    currentOffsetToCurrentPosition(offset)
+    {
+        return this._codeMirror.getDoc().posFromIndex(offset);
+    }
+
+    currentPositionToOriginalOffset(position)
+    {
+        var offset = null;
+        if (this._formatterSourceMap)
+            offset = this._formatterSourceMap.formattedToOriginalOffset(position.line, position.ch);
+        else
+            offset = this.tokenTrackingController._codeMirror.getDoc().indexFromPos(position);
+
+        return offset;
+    }
+
+    currentPositionToCurrentOffset(position)
+    {
+        return this._codeMirror.getDoc().indexFromPos(position);
+    }
+
+    setInlineWidget(position, inlineElement)
+    {
+        return this._codeMirror.setUniqueBookmark(position, {widget: inlineElement});
+    }
+
+    addScrollHandler(handler)
+    {
+        this._codeMirror.on("scroll", handler);
+    }
+
+    removeScrollHandler(handler)
+    {
+        this._codeMirror.off("scroll", handler);
+    }
+
+    // Protected
+
+    layout()
+    {
+        // FIXME: <https://webkit.org/b/146256> Web Inspector: Nested ContentBrowsers / ContentViewContainers cause too many ContentView updates
+        // Ideally we would not get an updateLayout call if we are not visible. We should restructure ContentView
+        // show/hide restoration to reduce duplicated work and solve this in the process.
+
+        // FIXME: visible check can be removed once <https://webkit.org/b/150741> is fixed.
+        if (this._visible)
+            this._codeMirror.refresh();
+    }
+
+    prettyPrint(pretty)
+    {
+        function prettyPrintAndUpdateEditor()
+        {
+            var start = {line: 0, ch: 0};
+            var end = {line: this._codeMirror.lineCount() - 1};
+
+            var oldSelectionAnchor = this._codeMirror.getCursor("anchor");
+            var oldSelectionHead = this._codeMirror.getCursor("head");
+            var newSelectionAnchor, newSelectionHead;
+            var newExecutionLocation = null;
+
+            if (pretty) {
+                // <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+                var indentString = "    ";
+                var originalLineEndings = [];
+                var formattedLineEndings = [];
+                var mapping = {original: [0], formatted: [0]};
+                var builder = new WebInspector.FormatterContentBuilder(mapping, originalLineEndings, formattedLineEndings, 0, 0, indentString);
+                var formatter = new WebInspector.Formatter(this._codeMirror, builder);
+                formatter.format(start, end);
+
+                this._formatterSourceMap = WebInspector.FormatterSourceMap.fromBuilder(builder);
+
+                this._codeMirror.setValue(builder.formattedContent);
+
+                if (this._positionToReveal) {
+                    var newRevealPosition = this._formatterSourceMap.originalToFormatted(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
+                    this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
+                }
+
+                if (this._textRangeToSelect) {
+                    var mappedRevealSelectionStart = this._formatterSourceMap.originalToFormatted(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
+                    var mappedRevealSelectionEnd = this._formatterSourceMap.originalToFormatted(this._textRangeToSelect.endLine, this._textRangeToSelect.endColumn);
+                    this._textRangeToSelect = new WebInspector.TextRange(mappedRevealSelectionStart.lineNumber, mappedRevealSelectionStart.columnNumber, mappedRevealSelectionEnd.lineNumber, mappedRevealSelectionEnd.columnNumber);
+                }
+
+                if (!isNaN(this._executionLineNumber)) {
+                    console.assert(!isNaN(this._executionColumnNumber));
+                    newExecutionLocation = this._formatterSourceMap.originalToFormatted(this._executionLineNumber, this._executionColumnNumber);
+                }
+
+                var mappedAnchorLocation = this._formatterSourceMap.originalToFormatted(oldSelectionAnchor.line, oldSelectionAnchor.ch);
+                var mappedHeadLocation = this._formatterSourceMap.originalToFormatted(oldSelectionHead.line, oldSelectionHead.ch);
+                newSelectionAnchor = {line: mappedAnchorLocation.lineNumber, ch: mappedAnchorLocation.columnNumber};
+                newSelectionHead = {line: mappedHeadLocation.lineNumber, ch: mappedHeadLocation.columnNumber};
+            } else {
+                this._codeMirror.undo();
+
+                if (this._positionToReveal) {
+                    var newRevealPosition = this._formatterSourceMap.formattedToOriginal(this._positionToReveal.lineNumber, this._positionToReveal.columnNumber);
+                    this._positionToReveal = new WebInspector.SourceCodePosition(newRevealPosition.lineNumber, newRevealPosition.columnNumber);
+                }
+
+                if (this._textRangeToSelect) {
+                    var mappedRevealSelectionStart = this._formatterSourceMap.formattedToOriginal(this._textRangeToSelect.startLine, this._textRangeToSelect.startColumn);
+                    var mappedRevealSelectionEnd = this._formatterSourceMap.formattedToOriginal(this._textRangeToSelect.endLine, this._textRangeToSelect.endColumn);
+                    this._textRangeToSelect = new WebInspector.TextRange(mappedRevealSelectionStart.lineNumber, mappedRevealSelectionStart.columnNumber, mappedRevealSelectionEnd.lineNumber, mappedRevealSelectionEnd.columnNumber);
+                }
+
+                if (!isNaN(this._executionLineNumber)) {
+                    console.assert(!isNaN(this._executionColumnNumber));
+                    newExecutionLocation = this._formatterSourceMap.formattedToOriginal(this._executionLineNumber, this._executionColumnNumber);
+                }
+
+                var mappedAnchorLocation = this._formatterSourceMap.formattedToOriginal(oldSelectionAnchor.line, oldSelectionAnchor.ch);
+                var mappedHeadLocation = this._formatterSourceMap.formattedToOriginal(oldSelectionHead.line, oldSelectionHead.ch);
+                newSelectionAnchor = {line: mappedAnchorLocation.lineNumber, ch: mappedAnchorLocation.columnNumber};
+                newSelectionHead = {line: mappedHeadLocation.lineNumber, ch: mappedHeadLocation.columnNumber};
+
+                this._formatterSourceMap = null;
+            }
+
+            this._scrollIntoViewCentered(newSelectionAnchor);
+            this._codeMirror.setSelection(newSelectionAnchor, newSelectionHead);
+
+            if (newExecutionLocation) {
+                delete this._executionLineHandle;
+                this.executionColumnNumber = newExecutionLocation.columnNumber;
+                this.executionLineNumber = newExecutionLocation.lineNumber;
+            }
+
+            // FIXME: <rdar://problem/13129955> FindBanner: New searches should not lose search position (start from current selection/caret)
+            if (this.currentSearchQuery) {
+                var searchQuery = this.currentSearchQuery;
+                this.searchCleared();
+                // Set timeout so that this happens after the current CodeMirror operation.
+                // The editor has to update for the value and selection changes.
+                setTimeout(function(query) {
+                    this.performSearch(searchQuery);
+                }.bind(this), 0);
+            }
+
+            if (this._delegate && typeof this._delegate.textEditorUpdatedFormatting === "function")
+                this._delegate.textEditorUpdatedFormatting(this);
+        }
+
+        this._codeMirror.operation(prettyPrintAndUpdateEditor.bind(this));
+    }
+
+    // Private
+
+    hasEdits()
+    {
+        return !this._codeMirror.isClean();
+    }
+
+    _contentChanged(codeMirror, change)
+    {
+        if (this._ignoreCodeMirrorContentDidChangeEvent > 0)
+            return;
+
+        var replacedRanges = [];
+        var newRanges = [];
+        while (change) {
+            replacedRanges.push(new WebInspector.TextRange(
+                change.from.line,
+                change.from.ch,
+                change.to.line,
+                change.to.ch
+            ));
+            newRanges.push(new WebInspector.TextRange(
+                change.from.line,
+                change.from.ch,
+                change.from.line + change.text.length - 1,
+                change.text.length === 1 ? change.from.ch + change.text[0].length : change.text.lastValue.length
+            ));
+            change = change.next;
+        }
+        this.contentDidChange(replacedRanges, newRanges);
+
+        if (this._formatted) {
+            this._formatterSourceMap = null;
+            this._formatted = false;
+
+            if (this._delegate && typeof this._delegate.textEditorUpdatedFormatting === "function")
+                this._delegate.textEditorUpdatedFormatting(this);
+
+            this.dispatchEventToListeners(WebInspector.TextEditor.Event.FormattingDidChange);
+        }
+
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.ContentDidChange);
+    }
+
+    _textRangeFromCodeMirrorPosition(start, end)
+    {
+        console.assert(start);
+        console.assert(end);
+
+        return new WebInspector.TextRange(start.line, start.ch, end.line, end.ch);
+    }
+
+    _codeMirrorPositionFromTextRange(textRange)
+    {
+        console.assert(textRange);
+
+        var start = {line: textRange.startLine, ch: textRange.startColumn};
+        var end = {line: textRange.endLine, ch: textRange.endColumn};
+        return {start, end};
+    }
+
+    _revealPendingPositionIfPossible()
+    {
+        // Nothing to do if we don't have a pending position.
+        if (!this._positionToReveal)
+            return;
+
+        // Don't try to reveal unless we are visible.
+        if (!this._visible)
+            return;
+
+        this.revealPosition(this._positionToReveal, this._textRangeToSelect, this._forceUnformatted);
+    }
+
+    _revealSearchResult(result, changeFocus, directionInCaseOfRevalidation)
+    {
+        var position = result.find();
+
+        // Check for a valid position, it might have been removed from editing by the user.
+        // If the position is invalide, revalidate all positions reveal as needed.
+        if (!position) {
+            this._revalidateSearchResults(directionInCaseOfRevalidation);
+            return;
+        }
+
+        // If the line is not visible, reveal it as the center line in the editor.
+        if (!this._isPositionVisible(position.from))
+            this._scrollIntoViewCentered(position.from);
+
+        // Update the text selection to select the search result.
+        this.selectedTextRange = this._textRangeFromCodeMirrorPosition(position.from, position.to);
+
+        // Remove the automatically reveal state now that we have revealed a search result.
+        this._automaticallyRevealFirstSearchResult = false;
+
+        // Focus the editor if requested.
+        if (changeFocus)
+            this._codeMirror.focus();
+
+        // Remove the bouncy highlight if it is still around. The animation will not
+        // start unless we remove it and add it back to the document.
+        if (this._bouncyHighlightElement)
+            this._bouncyHighlightElement.remove();
+
+        // Create the bouncy highlight.
+        this._bouncyHighlightElement = document.createElement("div");
+        this._bouncyHighlightElement.className = WebInspector.TextEditor.BouncyHighlightStyleClassName;
+
+        // Collect info for the bouncy highlight.
+        var textContent = this._codeMirror.getSelection();
+        var coordinates = this._codeMirror.cursorCoords(true, "page");
+
+        // Adjust the coordinates to be based in the text editor's space.
+        let textEditorRect = this.element.getBoundingClientRect();
+        coordinates.top -= textEditorRect.top;
+        coordinates.left -= textEditorRect.left;
+
+        // Position and show the bouncy highlight.
+        this._bouncyHighlightElement.textContent = textContent;
+        this._bouncyHighlightElement.style.top = coordinates.top + "px";
+        this._bouncyHighlightElement.style.left = coordinates.left + "px";
+        this.element.appendChild(this._bouncyHighlightElement);
+
+        function animationEnded()
+        {
+            if (!this._bouncyHighlightElement)
+                return;
+
+            this._bouncyHighlightElement.remove();
+            delete this._bouncyHighlightElement;
+        }
+
+        // Listen for the end of the animation so we can remove the element.
+        this._bouncyHighlightElement.addEventListener("animationend", animationEnded.bind(this));
+    }
+
+    _binarySearchInsertionIndexInSearchResults(object, comparator)
+    {
+        // It is possible that markers in the search results array may have been deleted.
+        // In those cases the comparator will return "null" and we immediately stop
+        // the binary search and return null. The search results list needs to be updated.
+        var array = this._searchResults;
+
+        var first = 0;
+        var last = array.length - 1;
+
+        while (first <= last) {
+            var mid = (first + last) >> 1;
+            var c = comparator(object, array[mid]);
+            if (c === null)
+                return null;
+            if (c > 0)
+                first = mid + 1;
+            else if (c < 0)
+                last = mid - 1;
+            else
+                return mid;
+        }
+
+        return first - 1;
+    }
+
+    _revealFirstSearchResultBeforeCursor(changeFocus)
+    {
+        console.assert(this._searchResults.length);
+
+        var currentCursorPosition = this._codeMirror.getCursor("start");
+        if (currentCursorPosition.line === 0 && currentCursorPosition.ch === 0) {
+            this._currentSearchResultIndex = this._searchResults.length - 1;
+            this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, -1);
+            return;
+        }
+
+        var index = this._binarySearchInsertionIndexInSearchResults(currentCursorPosition, function(current, searchResult) {
+            var searchResultMarker = searchResult.find();
+            if (!searchResultMarker)
+                return null;
+            return WebInspector.compareCodeMirrorPositions(current, searchResultMarker.from);
+        });
+
+        if (index === null) {
+            this._revalidateSearchResults(-1);
+            return;
+        }
+
+        this._currentSearchResultIndex = index;
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus);
+    }
+
+    _revealFirstSearchResultAfterCursor(changeFocus)
+    {
+        console.assert(this._searchResults.length);
+
+        var currentCursorPosition = this._codeMirror.getCursor("start");
+        if (currentCursorPosition.line === 0 && currentCursorPosition.ch === 0) {
+            this._currentSearchResultIndex = 0;
+            this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus, 1);
+            return;
+        }
+
+        var index = this._binarySearchInsertionIndexInSearchResults(currentCursorPosition, function(current, searchResult) {
+            var searchResultMarker = searchResult.find();
+            if (!searchResultMarker)
+                return null;
+            return WebInspector.compareCodeMirrorPositions(current, searchResultMarker.from);
+        });
+
+        if (index === null) {
+            this._revalidateSearchResults(1);
+            return;
+        }
+
+        if (index + 1 < this._searchResults.length)
+            ++index;
+        else
+            index = 0;
+
+        this._currentSearchResultIndex = index;
+        this._revealSearchResult(this._searchResults[this._currentSearchResultIndex], changeFocus);
+    }
+
+    _cursorDoesNotMatchLastRevealedSearchResult()
+    {
+        console.assert(this._currentSearchResultIndex !== -1);
+        console.assert(this._searchResults.length);
+
+        var lastRevealedSearchResultMarker = this._searchResults[this._currentSearchResultIndex].find();
+        if (!lastRevealedSearchResultMarker)
+            return true;
+
+        var currentCursorPosition = this._codeMirror.getCursor("start");
+        var lastRevealedSearchResultPosition = lastRevealedSearchResultMarker.from;
+
+        return WebInspector.compareCodeMirrorPositions(currentCursorPosition, lastRevealedSearchResultPosition) !== 0;
+    }
+
+    _revalidateSearchResults(direction)
+    {
+        console.assert(direction !== undefined);
+
+        this._currentSearchResultIndex = -1;
+
+        var updatedSearchResults = [];
+        for (var i = 0; i < this._searchResults.length; ++i) {
+            if (this._searchResults[i].find())
+                updatedSearchResults.push(this._searchResults[i]);
+        }
+
+        console.assert(updatedSearchResults.length !== this._searchResults.length);
+
+        this._searchResults = updatedSearchResults;
+        this.dispatchEventToListeners(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange);
+
+        if (this._searchResults.length) {
+            if (direction > 0)
+                this._revealFirstSearchResultAfterCursor();
+            else
+                this._revealFirstSearchResultBeforeCursor();
+        }
+    }
+
+    _updateExecutionLine()
+    {
+        function update()
+        {
+            if (this._executionLineHandle)
+                this._codeMirror.removeLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
+
+            this._executionLineHandle = !isNaN(this._executionLineNumber) ? this._codeMirror.getLineHandle(this._executionLineNumber) : null;
+
+            if (this._executionLineHandle)
+                this._codeMirror.addLineClass(this._executionLineHandle, "wrap", WebInspector.TextEditor.ExecutionLineStyleClassName);
+        }
+
+        this._codeMirror.operation(update.bind(this));
+    }
+
+    _setBreakpointStylesOnLine(lineNumber)
+    {
+        var columnBreakpoints = this._breakpoints[lineNumber];
+        console.assert(columnBreakpoints);
+        if (!columnBreakpoints)
+            return;
+
+        var allDisabled = true;
+        var allResolved = true;
+        var allAutoContinue = true;
+        var multiple = Object.keys(columnBreakpoints).length > 1;
+        for (var columnNumber in columnBreakpoints) {
+            var breakpointInfo = columnBreakpoints[columnNumber];
+            if (!breakpointInfo.disabled)
+                allDisabled = false;
+            if (!breakpointInfo.resolved)
+                allResolved = false;
+            if (!breakpointInfo.autoContinue)
+                allAutoContinue = false;
+        }
+
+        allResolved = allResolved && WebInspector.debuggerManager.breakpointsEnabled;
+
+        function updateStyles()
+        {
+            // We might not have a line if the content isn't fully populated yet.
+            // This will be called again when the content is available.
+            var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+            if (!lineHandle)
+                return;
+
+            this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName);
+
+            if (allResolved)
+                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
+            else
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
+
+            if (allDisabled)
+                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
+            else
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
+
+            if (allAutoContinue)
+                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName);
+            else
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName);
+
+            if (multiple)
+                this._codeMirror.addLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
+            else
+                this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
+        }
+
+        this._codeMirror.operation(updateStyles.bind(this));
+    }
+
+    _addBreakpointToLineAndColumnWithInfo(lineNumber, columnNumber, breakpointInfo)
+    {
+        if (!this._breakpoints[lineNumber])
+            this._breakpoints[lineNumber] = {};
+        this._breakpoints[lineNumber][columnNumber] = breakpointInfo;
+
+        this._setBreakpointStylesOnLine(lineNumber);
+    }
+
+    _removeBreakpointFromLineAndColumn(lineNumber, columnNumber)
+    {
+        console.assert(columnNumber in this._breakpoints[lineNumber]);
+        delete this._breakpoints[lineNumber][columnNumber];
+
+        // There are still breakpoints on the line. Update the breakpoint style.
+        if (!isEmptyObject(this._breakpoints[lineNumber])) {
+            this._setBreakpointStylesOnLine(lineNumber);
+            return;
+        }
+
+        delete this._breakpoints[lineNumber];
+
+        function updateStyles()
+        {
+            var lineHandle = this._codeMirror.getLineHandle(lineNumber);
+            if (!lineHandle)
+                return;
+
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName);
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointResolvedStyleClassName);
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointDisabledStyleClassName);
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.BreakpointAutoContinueStyleClassName);
+            this._codeMirror.removeLineClass(lineHandle, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName);
+        }
+
+        this._codeMirror.operation(updateStyles.bind(this));
+    }
+
+    _allColumnBreakpointInfoForLine(lineNumber)
+    {
+        return this._breakpoints[lineNumber];
+    }
+
+    _setColumnBreakpointInfoForLine(lineNumber, columnBreakpointInfo)
+    {
+        console.assert(columnBreakpointInfo);
+        this._breakpoints[lineNumber] = columnBreakpointInfo;
+        this._setBreakpointStylesOnLine(lineNumber);
+    }
+
+    _gutterMouseDown(codeMirror, lineNumber, gutterElement, event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        if (!this._codeMirror.hasLineClass(lineNumber, "wrap", WebInspector.TextEditor.HasBreakpointStyleClassName)) {
+            console.assert(!(lineNumber in this._breakpoints));
+
+            // No breakpoint, add a new one.
+            if (this._delegate && typeof this._delegate.textEditorBreakpointAdded === "function") {
+                var data = this._delegate.textEditorBreakpointAdded(this, lineNumber, 0);
+                if (data) {
+                    var breakpointInfo = data.breakpointInfo;
+                    if (breakpointInfo)
+                        this._addBreakpointToLineAndColumnWithInfo(data.lineNumber, data.columnNumber, breakpointInfo);
+                }
+            }
+
+            return;
+        }
+
+        console.assert(lineNumber in this._breakpoints);
+
+        if (this._codeMirror.hasLineClass(lineNumber, "wrap", WebInspector.TextEditor.MultipleBreakpointsStyleClassName)) {
+            console.assert(!isEmptyObject(this._breakpoints[lineNumber]));
+            return;
+        }
+
+        // Single existing breakpoint, start tracking it for dragging.
+        console.assert(Object.keys(this._breakpoints[lineNumber]).length === 1);
+        var columnNumber = Object.keys(this._breakpoints[lineNumber])[0];
+        this._draggingBreakpointInfo = this._breakpoints[lineNumber][columnNumber];
+        this._lineNumberWithMousedDownBreakpoint = lineNumber;
+        this._lineNumberWithDraggedBreakpoint = lineNumber;
+        this._columnNumberWithMousedDownBreakpoint = columnNumber;
+        this._columnNumberWithDraggedBreakpoint = columnNumber;
+
+        this._documentMouseMovedEventListener = this._documentMouseMoved.bind(this);
+        this._documentMouseUpEventListener = this._documentMouseUp.bind(this);
+
+        // Register these listeners on the document so we can track the mouse if it leaves the gutter.
+        document.addEventListener("mousemove", this._documentMouseMovedEventListener, true);
+        document.addEventListener("mouseup", this._documentMouseUpEventListener, true);
+    }
+
+    _gutterContextMenu(codeMirror, lineNumber, gutterElement, event)
+    {
+        if (this._delegate && typeof this._delegate.textEditorGutterContextMenu === "function") {
+            var breakpoints = [];
+            for (var columnNumber in this._breakpoints[lineNumber])
+                breakpoints.push({lineNumber, columnNumber});
+
+            this._delegate.textEditorGutterContextMenu(this, lineNumber, 0, breakpoints, event);
+        }
+    }
+
+    _documentMouseMoved(event)
+    {
+        console.assert("_lineNumberWithMousedDownBreakpoint" in this);
+        if (!("_lineNumberWithMousedDownBreakpoint" in this))
+            return;
+
+        event.preventDefault();
+
+        var lineNumber;
+        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+
+        // CodeMirror's coordsChar returns a position even if it is outside the bounds. Nullify the position
+        // if the event is outside the bounds of the gutter so we will remove the breakpoint.
+        var gutterBounds = this._codeMirror.getGutterElement().getBoundingClientRect();
+        if (event.pageX < gutterBounds.left || event.pageX > gutterBounds.right || event.pageY < gutterBounds.top || event.pageY > gutterBounds.bottom)
+            position = null;
+
+        // If we have a position and it has a line then use it.
+        if (position && "line" in position)
+            lineNumber = position.line;
+
+        // The _lineNumberWithDraggedBreakpoint property can be undefined if the user drags
+        // outside of the gutter. The lineNumber variable can be undefined for the same reason.
+
+        if (lineNumber === this._lineNumberWithDraggedBreakpoint)
+            return;
+
+        // Record that the mouse dragged some so when mouse up fires we know to do the
+        // work of removing and moving the breakpoint.
+        this._mouseDragged = true;
+
+        if ("_lineNumberWithDraggedBreakpoint" in this) {
+            // We have a line that is currently showing the dragged breakpoint. Remove that breakpoint
+            // and restore the previous one (if any.)
+            if (this._previousColumnBreakpointInfo)
+                this._setColumnBreakpointInfoForLine(this._lineNumberWithDraggedBreakpoint, this._previousColumnBreakpointInfo);
+            else
+                this._removeBreakpointFromLineAndColumn(this._lineNumberWithDraggedBreakpoint, this._columnNumberWithDraggedBreakpoint);
+
+            delete this._previousColumnBreakpointInfo;
+            delete this._lineNumberWithDraggedBreakpoint;
+            delete this._columnNumberWithDraggedBreakpoint;
+        }
+
+        if (lineNumber !== undefined) {
+            // We have a new line that will now show the dragged breakpoint.
+            var newColumnBreakpoints = {};
+            var columnNumber = (lineNumber === this._lineNumberWithMousedDownBreakpoint ? this._columnNumberWithDraggedBreakpoint : 0);
+            newColumnBreakpoints[columnNumber] = this._draggingBreakpointInfo;
+            this._previousColumnBreakpointInfo = this._allColumnBreakpointInfoForLine(lineNumber);
+            this._setColumnBreakpointInfoForLine(lineNumber, newColumnBreakpoints);
+            this._lineNumberWithDraggedBreakpoint = lineNumber;
+            this._columnNumberWithDraggedBreakpoint = columnNumber;
+        }
+    }
+
+    _documentMouseUp(event)
+    {
+        console.assert("_lineNumberWithMousedDownBreakpoint" in this);
+        if (!("_lineNumberWithMousedDownBreakpoint" in this))
+            return;
+
+        event.preventDefault();
+
+        document.removeEventListener("mousemove", this._documentMouseMovedEventListener, true);
+        document.removeEventListener("mouseup", this._documentMouseUpEventListener, true);
+
+        var delegateImplementsBreakpointClicked = this._delegate && typeof this._delegate.textEditorBreakpointClicked === "function";
+        var delegateImplementsBreakpointRemoved = this._delegate && typeof this._delegate.textEditorBreakpointRemoved === "function";
+        var delegateImplementsBreakpointMoved = this._delegate && typeof this._delegate.textEditorBreakpointMoved === "function";
+
+        if (this._mouseDragged) {
+            if (!("_lineNumberWithDraggedBreakpoint" in this)) {
+                // The breakpoint was dragged off the gutter, remove it.
+                if (delegateImplementsBreakpointRemoved) {
+                    this._ignoreSetBreakpointInfoCalls = true;
+                    this._delegate.textEditorBreakpointRemoved(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint);
+                    delete this._ignoreSetBreakpointInfoCalls;
+                }
+            } else if (this._lineNumberWithMousedDownBreakpoint !== this._lineNumberWithDraggedBreakpoint) {
+                // The dragged breakpoint was moved to a new line.
+
+                // If there is are breakpoints already at the drop line, tell the delegate to remove them.
+                // We have already updated the breakpoint info internally, so when the delegate removes the breakpoints
+                // and tells us to clear the breakpoint info, we can ignore those calls.
+                if (this._previousColumnBreakpointInfo && delegateImplementsBreakpointRemoved) {
+                    this._ignoreSetBreakpointInfoCalls = true;
+                    for (var columnNumber in this._previousColumnBreakpointInfo)
+                        this._delegate.textEditorBreakpointRemoved(this, this._lineNumberWithDraggedBreakpoint, columnNumber);
+                    delete this._ignoreSetBreakpointInfoCalls;
+                }
+
+                // Tell the delegate to move the breakpoint from one line to another.
+                if (delegateImplementsBreakpointMoved) {
+                    this._ignoreSetBreakpointInfoCalls = true;
+                    this._delegate.textEditorBreakpointMoved(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint, this._lineNumberWithDraggedBreakpoint, this._columnNumberWithDraggedBreakpoint);
+                    delete this._ignoreSetBreakpointInfoCalls;
+                }
+            }
+        } else {
+            // Toggle the disabled state of the breakpoint.
+            console.assert(this._lineNumberWithMousedDownBreakpoint in this._breakpoints);
+            console.assert(this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint]);
+            if (this._lineNumberWithMousedDownBreakpoint in this._breakpoints && this._columnNumberWithMousedDownBreakpoint in this._breakpoints[this._lineNumberWithMousedDownBreakpoint] && delegateImplementsBreakpointClicked)
+                this._delegate.textEditorBreakpointClicked(this, this._lineNumberWithMousedDownBreakpoint, this._columnNumberWithMousedDownBreakpoint);
+        }
+
+        delete this._documentMouseMovedEventListener;
+        delete this._documentMouseUpEventListener;
+        delete this._lineNumberWithMousedDownBreakpoint;
+        delete this._lineNumberWithDraggedBreakpoint;
+        delete this._columnNumberWithMousedDownBreakpoint;
+        delete this._columnNumberWithDraggedBreakpoint;
+        delete this._previousColumnBreakpointInfo;
+        delete this._mouseDragged;
+    }
+
+    _openClickedLinks(event)
+    {
+        // Get the position in the text and the token at that position.
+        var position = this._codeMirror.coordsChar({left: event.pageX, top: event.pageY});
+        var tokenInfo = this._codeMirror.getTokenAt(position);
+        if (!tokenInfo || !tokenInfo.type || !tokenInfo.string)
+            return;
+
+        // If the token is not a link, then ignore it.
+        if (!/\blink\b/.test(tokenInfo.type))
+            return;
+
+        // The token string is the URL we should open. It might be a relative URL.
+        var url = tokenInfo.string;
+
+        // Get the base URL.
+        var baseURL = "";
+        if (this._delegate && typeof this._delegate.textEditorBaseURL === "function")
+            baseURL = this._delegate.textEditorBaseURL(this);
+
+        // Open the link after resolving the absolute URL from the base URL.
+        WebInspector.openURL(absoluteURL(url, baseURL));
+
+        // Stop processing the event.
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _isPositionVisible(position)
+    {
+        var scrollInfo = this._codeMirror.getScrollInfo();
+        var visibleRangeStart = scrollInfo.top;
+        var visibleRangeEnd = visibleRangeStart + scrollInfo.clientHeight;
+        var coords = this._codeMirror.charCoords(position, "local");
+
+        return coords.top >= visibleRangeStart && coords.bottom <= visibleRangeEnd;
+    }
+
+    _scrollIntoViewCentered(position)
+    {
+        var scrollInfo = this._codeMirror.getScrollInfo();
+        var lineHeight = Math.ceil(this._codeMirror.defaultTextHeight());
+        var margin = Math.floor((scrollInfo.clientHeight - lineHeight) / 2);
+        this._codeMirror.scrollIntoView(position, margin);
+    }
+};
+
+WebInspector.TextEditor.HighlightedStyleClassName = "highlighted";
+WebInspector.TextEditor.SearchResultStyleClassName = "search-result";
+WebInspector.TextEditor.HasBreakpointStyleClassName = "has-breakpoint";
+WebInspector.TextEditor.BreakpointResolvedStyleClassName = "breakpoint-resolved";
+WebInspector.TextEditor.BreakpointAutoContinueStyleClassName = "breakpoint-auto-continue";
+WebInspector.TextEditor.BreakpointDisabledStyleClassName = "breakpoint-disabled";
+WebInspector.TextEditor.MultipleBreakpointsStyleClassName = "multiple-breakpoints";
+WebInspector.TextEditor.ExecutionLineStyleClassName = "execution-line";
+WebInspector.TextEditor.BouncyHighlightStyleClassName = "bouncy-highlight";
+WebInspector.TextEditor.NumberOfFindsPerSearchBatch = 10;
+WebInspector.TextEditor.HighlightAnimationDuration = 2000;
+
+WebInspector.TextEditor.Event = {
+    ExecutionLineNumberDidChange: "text-editor-execution-line-number-did-change",
+    NumberOfSearchResultsDidChange: "text-editor-number-of-search-results-did-change",
+    ContentDidChange: "text-editor-content-did-change",
+    FormattingDidChange: "text-editor-formatting-did-change"
+};
diff --git a/Source/WebInspectorUI/UserInterface/TextResourceContentView.css b/Source/WebInspectorUI/UserInterface/Views/TextResourceContentView.css
index 9921f5332..9921f5332 100644
--- a/Source/WebInspectorUI/UserInterface/TextResourceContentView.css
+++ b/Source/WebInspectorUI/UserInterface/Views/TextResourceContentView.css
diff --git a/Source/WebInspectorUI/UserInterface/Views/TextResourceContentView.js b/Source/WebInspectorUI/UserInterface/Views/TextResourceContentView.js
new file mode 100644
index 000000000..f4c198c96
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TextResourceContentView.js
@@ -0,0 +1,255 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TextResourceContentView = class TextResourceContentView extends WebInspector.ResourceContentView
+{
+    constructor(resource)
+    {
+        super(resource, "text");
+
+        resource.addEventListener(WebInspector.SourceCode.Event.ContentDidChange, this._sourceCodeContentDidChange, this);
+
+        this._textEditor = new WebInspector.SourceCodeTextEditor(resource);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.ExecutionLineNumberDidChange, this._executionLineNumberDidChange, this);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.NumberOfSearchResultsDidChange, this._numberOfSearchResultsDidChange, this);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.ContentDidChange, this._textEditorContentDidChange, this);
+        this._textEditor.addEventListener(WebInspector.TextEditor.Event.FormattingDidChange, this._textEditorFormattingDidChange, this);
+        this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentWillPopulate, this._contentWillPopulate, this);
+        this._textEditor.addEventListener(WebInspector.SourceCodeTextEditor.Event.ContentDidPopulate, this._contentDidPopulate, this);
+
+        WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetAdded, this._probeSetsChanged, this);
+        WebInspector.probeManager.addEventListener(WebInspector.ProbeManager.Event.ProbeSetRemoved, this._probeSetsChanged, this);
+
+        var toolTip = WebInspector.UIString("Pretty print");
+        var activatedToolTip = WebInspector.UIString("Original formatting");
+        this._prettyPrintButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("pretty-print", toolTip, activatedToolTip, "Images/NavigationItemCurleyBraces.svg", 13, 13);
+        this._prettyPrintButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._togglePrettyPrint, this);
+        this._prettyPrintButtonNavigationItem.enabled = false; // Enabled when the text editor is populated with content.
+
+        var toolTipTypes = WebInspector.UIString("Show type information");
+        var activatedToolTipTypes = WebInspector.UIString("Hide type information");
+        this._showTypesButtonNavigationItem = new WebInspector.ActivateButtonNavigationItem("show-types", toolTipTypes, activatedToolTipTypes, "Images/NavigationItemTypes.svg", 13, 14);
+        this._showTypesButtonNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._toggleTypeAnnotations, this);
+        this._showTypesButtonNavigationItem.enabled = false;
+
+        WebInspector.showJavaScriptTypeInformationSetting.addEventListener(WebInspector.Setting.Event.Changed, this._showJavaScriptTypeInformationSettingChanged, this);
+    }
+
+    // Public
+
+    get navigationItems()
+    {
+        return [this._prettyPrintButtonNavigationItem, this._showTypesButtonNavigationItem];
+    }
+
+    get managesOwnIssues()
+    {
+        // SourceCodeTextEditor manages the issues, we don't need ResourceContentView doing it.
+        return true;
+    }
+
+    get textEditor()
+    {
+        return this._textEditor;
+    }
+
+    get supplementalRepresentedObjects()
+    {
+        var objects = WebInspector.probeManager.probeSets.filter(function(probeSet) {
+            return this._resource.url === probeSet.breakpoint.url;
+        }, this);
+
+        // If the SourceCodeTextEditor has an executionLineNumber, we can assume
+        // it is always the active call frame.
+        if (!isNaN(this._textEditor.executionLineNumber))
+            objects.push(WebInspector.debuggerManager.activeCallFrame);
+
+        return objects;
+    }
+
+    revealPosition(position, textRangeToSelect, forceUnformatted)
+    {
+        this._textEditor.revealPosition(position, textRangeToSelect, forceUnformatted);
+    }
+
+    shown()
+    {
+        super.shown();
+
+        this._textEditor.shown();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._textEditor.hidden();
+    }
+
+    closed()
+    {
+        super.closed();
+
+        this.resource.removeEventListener(null, null, this);
+        WebInspector.probeManager.removeEventListener(null, null, this);
+        WebInspector.showJavaScriptTypeInformationSetting.removeEventListener(null, null, this);
+
+        this._textEditor.close();
+    }
+
+    get supportsSave()
+    {
+        return true;
+    }
+
+    get saveData()
+    {
+        return {url: this.resource.url, content: this._textEditor.string};
+    }
+
+    get supportsSearch()
+    {
+        return true;
+    }
+
+    get numberOfSearchResults()
+    {
+        return this._textEditor.numberOfSearchResults;
+    }
+
+    get hasPerformedSearch()
+    {
+        return this._textEditor.currentSearchQuery !== null;
+    }
+
+    set automaticallyRevealFirstSearchResult(reveal)
+    {
+        this._textEditor.automaticallyRevealFirstSearchResult = reveal;
+    }
+
+    performSearch(query)
+    {
+        this._textEditor.performSearch(query);
+    }
+
+    searchCleared()
+    {
+        this._textEditor.searchCleared();
+    }
+
+    searchQueryWithSelection()
+    {
+        return this._textEditor.searchQueryWithSelection();
+    }
+
+    revealPreviousSearchResult(changeFocus)
+    {
+        this._textEditor.revealPreviousSearchResult(changeFocus);
+    }
+
+    revealNextSearchResult(changeFocus)
+    {
+        this._textEditor.revealNextSearchResult(changeFocus);
+    }
+
+    // Private
+
+    _contentWillPopulate(event)
+    {
+        if (this._textEditor.parentView === this)
+            return;
+
+        // Check the MIME-type for CSS since Resource.Type.Stylesheet also includes XSL, which we can't edit yet.
+        if (this.resource.type === WebInspector.Resource.Type.Stylesheet && this.resource.syntheticMIMEType === "text/css")
+            this._textEditor.readOnly = false;
+
+        // Allow editing any local file since edits can be saved and reloaded right from the Inspector.
+        if (this.resource.urlComponents.scheme === "file")
+            this._textEditor.readOnly = false;
+
+        this.element.removeChildren();
+        this.addSubview(this._textEditor);
+    }
+
+    _contentDidPopulate(event)
+    {
+        this._prettyPrintButtonNavigationItem.enabled = this._textEditor.canBeFormatted();
+        this._showTypesButtonNavigationItem.enabled = this._textEditor.canShowTypeAnnotations();
+        this._showTypesButtonNavigationItem.activated = WebInspector.showJavaScriptTypeInformationSetting.value;
+    }
+
+    _togglePrettyPrint(event)
+    {
+        var activated = !this._prettyPrintButtonNavigationItem.activated;
+        this._textEditor.formatted = activated;
+    }
+
+    _toggleTypeAnnotations(event)
+    {
+        this._textEditor.toggleTypeAnnotations();
+    }
+
+    _showJavaScriptTypeInformationSettingChanged(event)
+    {
+        this._showTypesButtonNavigationItem.activated = WebInspector.showJavaScriptTypeInformationSetting.value;
+    }
+
+    _textEditorFormattingDidChange(event)
+    {
+        this._prettyPrintButtonNavigationItem.activated = this._textEditor.formatted;
+    }
+
+    _sourceCodeContentDidChange(event)
+    {
+        if (this._ignoreSourceCodeContentDidChangeEvent)
+            return;
+
+        this._textEditor.string = this.resource.currentRevision.content;
+    }
+
+    _textEditorContentDidChange(event)
+    {
+        this._ignoreSourceCodeContentDidChangeEvent = true;
+        WebInspector.branchManager.currentBranch.revisionForRepresentedObject(this.resource).content = this._textEditor.string;
+        delete this._ignoreSourceCodeContentDidChangeEvent;
+    }
+
+    _executionLineNumberDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    }
+
+    _numberOfSearchResultsDidChange(event)
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NumberOfSearchResultsDidChange);
+    }
+
+    _probeSetsChanged(event)
+    {
+        var breakpoint = event.data.probeSet.breakpoint;
+        if (breakpoint.sourceCodeLocation.sourceCode === this.resource)
+            this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
new file mode 100644
index 000000000..99adcb6ce
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.data-grid.timeline th {
+    border-top: 1px solid var(--border-color);
+}
+
+.tree-outline.timeline-data-grid .item:hover {
+    color: white;
+    border-radius: 4px;
+    box-shadow: inset hsl(207, 54%, 57%) 0 1px 0;
+    background: linear-gradient(to bottom, hsl(207, 57%, 63%), hsl(207, 66%, 42%));
+    background-origin: padding-box;
+    background-clip: padding-box;
+    text-shadow: hsl(209, 41%, 34%) 0 1px 0;
+}
+
+.tree-outline.timeline-data-grid .item:hover .subtitle {
+    color: white;
+}
\ No newline at end of file
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
new file mode 100644
index 000000000..e32c0ed5c
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGrid.js
@@ -0,0 +1,496 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineDataGrid = class TimelineDataGrid extends WebInspector.DataGrid
+{
+    constructor(treeOutline, columns, delegate, editCallback, deleteCallback)
+    {
+        super(columns, editCallback, deleteCallback);
+
+        this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(treeOutline, this, delegate);
+
+        this.element.classList.add("timeline");
+
+        this._filterableColumns = [];
+
+        // Check if any of the cells can be filtered.
+        for (var [identifier, column] of this.columns) {
+            var scopeBar = column.scopeBar;
+
+            if (!scopeBar)
+                continue;
+
+            this._filterableColumns.push(identifier);
+            scopeBar.columnIdentifier = identifier;
+            scopeBar.addEventListener(WebInspector.ScopeBar.Event.SelectionChanged, this._scopeBarSelectedItemsDidChange, this);
+        }
+
+        if (this._filterableColumns.length > 1) {
+            console.error("Creating a TimelineDataGrid with more than one filterable column is not yet supported.");
+            return;
+        }
+
+        this.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridSelectedNodeChanged, this);
+        this.addEventListener(WebInspector.DataGrid.Event.SortChanged, this._sort, this);
+
+        window.addEventListener("resize", this);
+    }
+
+    static createColumnScopeBar(prefix, map)
+    {
+        prefix = prefix + "-timeline-data-grid-";
+
+        var scopeBarItems = [];
+        for (var [key, value] of map) {
+            var id = prefix + key;
+            var item = new WebInspector.ScopeBarItem(id, value);
+            item.value = key;
+            scopeBarItems.push(item);
+        }
+
+        var allItem = new WebInspector.ScopeBarItem(prefix + "type-all", WebInspector.UIString("All"));
+        scopeBarItems.unshift(allItem);
+
+        return new WebInspector.ScopeBar(prefix + "scope-bar", scopeBarItems, allItem, true);
+    }
+
+    // Public
+
+    reset()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        this._hidePopover();
+    }
+
+    shown()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        this._treeOutlineDataGridSynchronizer.synchronize();
+    }
+
+    hidden()
+    {
+        // May be overridden by subclasses. If so, they should call the superclass.
+
+        this._hidePopover();
+    }
+
+    closed()
+    {
+        window.removeEventListener("resize", this);
+    }
+
+    treeElementForDataGridNode(dataGridNode)
+    {
+        return this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+    }
+
+    dataGridNodeForTreeElement(treeElement)
+    {
+        return this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(treeElement);
+    }
+
+    callFramePopoverAnchorElement()
+    {
+        // Implemented by subclasses.
+        return null;
+    }
+
+    treeElementMatchesActiveScopeFilters(treeElement)
+    {
+        var dataGridNode = this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(treeElement);
+        console.assert(dataGridNode);
+
+        for (var identifier of this._filterableColumns) {
+            var scopeBar = this.columns.get(identifier).scopeBar;
+            if (!scopeBar || scopeBar.defaultItem.selected)
+                continue;
+
+            var value = dataGridNode.data[identifier];
+            var matchesFilter = scopeBar.selectedItems.some(function(scopeBarItem) {
+                return scopeBarItem.value === value;
+            });
+
+            if (!matchesFilter)
+                return false;
+        }
+
+        return true;
+    }
+
+    addRowInSortOrder(treeElement, dataGridNode, parentElement)
+    {
+        this._treeOutlineDataGridSynchronizer.associate(treeElement, dataGridNode);
+
+        parentElement = parentElement || this._treeOutlineDataGridSynchronizer.treeOutline;
+        var parentNode = parentElement.root ? this : this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(parentElement);
+
+        console.assert(parentNode);
+
+        if (this.sortColumnIdentifier) {
+            var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, parentNode.children, this._sortComparator.bind(this));
+
+            // Insert into the parent, which will cause the synchronizer to insert into the data grid.
+            parentElement.insertChild(treeElement, insertionIndex);
+        } else {
+            // Append to the parent, which will cause the synchronizer to append to the data grid.
+            parentElement.appendChild(treeElement);
+        }
+    }
+
+    shouldIgnoreSelectionEvent()
+    {
+        return this._ignoreSelectionEvent || false;
+    }
+
+    // Protected
+
+    handleEvent(event)
+    {
+        console.assert(event.type === "resize");
+
+        this._windowResized(event);
+    }
+
+    dataGridNodeNeedsRefresh(dataGridNode)
+    {
+        if (!this._dirtyDataGridNodes)
+            this._dirtyDataGridNodes = new Set;
+        this._dirtyDataGridNodes.add(dataGridNode);
+
+        if (this._scheduledDataGridNodeRefreshIdentifier)
+            return;
+
+        this._scheduledDataGridNodeRefreshIdentifier = requestAnimationFrame(this._refreshDirtyDataGridNodes.bind(this));
+    }
+
+    // Private
+
+    _refreshDirtyDataGridNodes()
+    {
+        if (this._scheduledDataGridNodeRefreshIdentifier) {
+            cancelAnimationFrame(this._scheduledDataGridNodeRefreshIdentifier);
+            this._scheduledDataGridNodeRefreshIdentifier = undefined;
+        }
+
+        if (!this._dirtyDataGridNodes)
+            return;
+
+        var selectedNode = this.selectedNode;
+        var sortComparator = this._sortComparator.bind(this);
+        var treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
+
+        this._treeOutlineDataGridSynchronizer.enabled = false;
+
+        for (var dataGridNode of this._dirtyDataGridNodes) {
+            dataGridNode.refresh();
+
+            if (!this.sortColumnIdentifier)
+                continue;
+
+            if (dataGridNode === selectedNode)
+                this._ignoreSelectionEvent = true;
+
+            var treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+            console.assert(treeElement);
+
+            console.assert(!treeElement.parent || treeElement.parent === treeOutline);
+            if (treeElement.parent === treeOutline)
+                treeOutline.removeChild(treeElement);
+
+            console.assert(!dataGridNode.parent || dataGridNode.parent === this);
+            if (dataGridNode.parent === this)
+                this.removeChild(dataGridNode);
+
+            var insertionIndex = insertionIndexForObjectInListSortedByFunction(dataGridNode, this.children, sortComparator);
+            treeOutline.insertChild(treeElement, insertionIndex);
+            this.insertChild(dataGridNode, insertionIndex);
+
+            // Adding the tree element back to the tree outline subjects it to filters.
+            // Make sure we keep the hidden state in-sync while the synchronizer is disabled.
+            dataGridNode.element.classList.toggle("hidden", treeElement.hidden);
+
+            if (dataGridNode === selectedNode) {
+                selectedNode.revealAndSelect();
+                this._ignoreSelectionEvent = false;
+            }
+        }
+
+        this._treeOutlineDataGridSynchronizer.enabled = true;
+
+        this._dirtyDataGridNodes = null;
+    }
+
+    _sort()
+    {
+        var sortColumnIdentifier = this.sortColumnIdentifier;
+        if (!sortColumnIdentifier)
+            return;
+
+        var selectedNode = this.selectedNode;
+        this._ignoreSelectionEvent = true;
+
+        this._treeOutlineDataGridSynchronizer.enabled = false;
+
+        var treeOutline = this._treeOutlineDataGridSynchronizer.treeOutline;
+        if (treeOutline.selectedTreeElement)
+            treeOutline.selectedTreeElement.deselect(true);
+
+        // Collect parent nodes that need their children sorted. So this in two phases since
+        // traverseNextNode would get confused if we sort the tree while traversing it.
+        var parentDataGridNodes = [this];
+        var currentDataGridNode = this.children[0];
+        while (currentDataGridNode) {
+            if (currentDataGridNode.children.length)
+                parentDataGridNodes.push(currentDataGridNode);
+            currentDataGridNode = currentDataGridNode.traverseNextNode(false, null, true);
+        }
+
+        // Sort the children of collected parent nodes.
+        for (var parentDataGridNode of parentDataGridNodes) {
+            var parentTreeElement = parentDataGridNode === this ? treeOutline : this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(parentDataGridNode);
+            console.assert(parentTreeElement);
+
+            var childDataGridNodes = parentDataGridNode.children.slice();
+
+            parentDataGridNode.removeChildren();
+            parentTreeElement.removeChildren();
+
+            childDataGridNodes.sort(this._sortComparator.bind(this));
+
+            for (var dataGridNode of childDataGridNodes) {
+                var treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
+                console.assert(treeElement);
+
+                parentTreeElement.appendChild(treeElement);
+                parentDataGridNode.appendChild(dataGridNode);
+
+                // Adding the tree element back to the tree outline subjects it to filters.
+                // Make sure we keep the hidden state in-sync while the synchronizer is disabled.
+                dataGridNode.element.classList.toggle("hidden", treeElement.hidden);
+            }
+        }
+
+        this._treeOutlineDataGridSynchronizer.enabled = true;
+
+        if (selectedNode)
+            selectedNode.revealAndSelect();
+
+        this._ignoreSelectionEvent = false;
+    }
+
+    _sortComparator(node1, node2)
+    {
+        var sortColumnIdentifier = this.sortColumnIdentifier;
+        if (!sortColumnIdentifier)
+            return 0;
+
+        var sortDirection = this.sortOrder === WebInspector.DataGrid.SortOrder.Ascending ? 1 : -1;
+
+        var value1 = node1.data[sortColumnIdentifier];
+        var value2 = node2.data[sortColumnIdentifier];
+
+        if (typeof value1 === "number" && typeof value2 === "number") {
+            if (isNaN(value1) && isNaN(value2))
+                return 0;
+            if (isNaN(value1))
+                return -sortDirection;
+            if (isNaN(value2))
+                return sortDirection;
+            return (value1 - value2) * sortDirection;
+        }
+
+        if (typeof value1 === "string" && typeof value2 === "string")
+            return value1.localeCompare(value2) * sortDirection;
+
+        if (value1 instanceof WebInspector.CallFrame || value2 instanceof WebInspector.CallFrame) {
+            // Sort by function name if available, then fall back to the source code object.
+            value1 = value1 && value1.functionName ? value1.functionName : (value1 && value1.sourceCodeLocation ? value1.sourceCodeLocation.sourceCode : "");
+            value2 = value2 && value2.functionName ? value2.functionName : (value2 && value2.sourceCodeLocation ? value2.sourceCodeLocation.sourceCode : "");
+        }
+
+        if (value1 instanceof WebInspector.SourceCode || value2 instanceof WebInspector.SourceCode) {
+            value1 = value1 ? value1.displayName || "" : "";
+            value2 = value2 ? value2.displayName || "" : "";
+        }
+
+        // For everything else (mostly booleans).
+        return (value1 < value2 ? -1 : (value1 > value2 ? 1 : 0)) * sortDirection;
+    }
+
+    _updateScopeBarForcedVisibility()
+    {
+        for (var identifier of this._filterableColumns) {
+            var scopeBar = this.columns.get(identifier).scopeBar;
+            if (scopeBar) {
+                this.element.classList.toggle(WebInspector.TimelineDataGrid.HasNonDefaultFilterStyleClassName, scopeBar.hasNonDefaultItemSelected());
+                break;
+            }
+        }
+    }
+
+    _scopeBarSelectedItemsDidChange(event)
+    {
+        this._updateScopeBarForcedVisibility();
+
+        var columnIdentifier = event.target.columnIdentifier;
+        this.dispatchEventToListeners(WebInspector.TimelineDataGrid.Event.FiltersDidChange, {columnIdentifier});
+    }
+
+    _dataGridSelectedNodeChanged(event)
+    {
+        if (!this.selectedNode) {
+            this._hidePopover();
+            return;
+        }
+
+        var record = this.selectedNode.record;
+        if (!record || !record.callFrames || !record.callFrames.length) {
+            this._hidePopover();
+            return;
+        }
+
+        this._showPopoverForSelectedNodeSoon();
+    }
+
+    _windowResized(event)
+    {
+        if (this._popover && this._popover.visible)
+            this._updatePopoverForSelectedNode(false);
+    }
+
+    _showPopoverForSelectedNodeSoon()
+    {
+        if (this._showPopoverTimeout)
+            return;
+
+        function delayedWork()
+        {
+            if (!this._popover)
+                this._popover = new WebInspector.Popover;
+
+            this._updatePopoverForSelectedNode(true);
+        }
+
+        this._showPopoverTimeout = setTimeout(delayedWork.bind(this), WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout);
+    }
+
+    _hidePopover()
+    {
+        if (this._showPopoverTimeout) {
+            clearTimeout(this._showPopoverTimeout);
+            this._showPopoverTimeout = undefined;
+        }
+
+        if (this._popover)
+            this._popover.dismiss();
+
+        function delayedWork()
+        {
+            if (this._popoverCallStackTreeOutline)
+                this._popoverCallStackTreeOutline.removeChildren();
+        }
+
+        if (this._hidePopoverContentClearTimeout)
+            clearTimeout(this._hidePopoverContentClearTimeout);
+        this._hidePopoverContentClearTimeout = setTimeout(delayedWork.bind(this), WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout);
+    }
+
+    _updatePopoverForSelectedNode(updateContent)
+    {
+        if (!this._popover || !this.selectedNode)
+            return;
+
+        var targetPopoverElement = this.callFramePopoverAnchorElement();
+        console.assert(targetPopoverElement, "TimelineDataGrid subclass should always return a valid element from callFramePopoverAnchorElement.");
+        if (!targetPopoverElement)
+            return;
+
+        var targetFrame = WebInspector.Rect.rectFromClientRect(targetPopoverElement.getBoundingClientRect());
+
+        // The element might be hidden if it does not have a width and height.
+        if (!targetFrame.size.width && !targetFrame.size.height)
+            return;
+
+        if (this._hidePopoverContentClearTimeout) {
+            clearTimeout(this._hidePopoverContentClearTimeout);
+            this._hidePopoverContentClearTimeout = undefined;
+        }
+
+        if (updateContent)
+            this._popover.content = this._createPopoverContent();
+
+        this._popover.present(targetFrame.pad(2), [WebInspector.RectEdge.MAX_Y, WebInspector.RectEdge.MIN_Y, WebInspector.RectEdge.MAX_X]);
+    }
+
+    _createPopoverContent()
+    {
+        if (!this._popoverCallStackTreeOutline) {
+            this._popoverCallStackTreeOutline = new WebInspector.TreeOutline;
+            this._popoverCallStackTreeOutline.disclosureButtons = false;
+            this._popoverCallStackTreeOutline.element.classList.add("timeline-data-grid");
+            this._popoverCallStackTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._popoverCallStackTreeSelectionDidChange, this);
+        } else
+            this._popoverCallStackTreeOutline.removeChildren();
+
+        var callFrames = this.selectedNode.record.callFrames;
+        for (var i = 0; i < callFrames.length; ++i) {
+            var callFrameTreeElement = new WebInspector.CallFrameTreeElement(callFrames[i]);
+            this._popoverCallStackTreeOutline.appendChild(callFrameTreeElement);
+        }
+
+        var content = document.createElement("div");
+        content.className = "timeline-data-grid-popover";
+        content.appendChild(this._popoverCallStackTreeOutline.element);
+        return content;
+    }
+
+    _popoverCallStackTreeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        this._popover.dismiss();
+
+        console.assert(treeElement instanceof WebInspector.CallFrameTreeElement, "TreeElements in TimelineDataGrid popover should always be CallFrameTreeElements");
+        var callFrame = treeElement.callFrame;
+        if (!callFrame.sourceCodeLocation)
+            return;
+
+        WebInspector.showSourceCodeLocation(callFrame.sourceCodeLocation);
+    }
+};
+
+WebInspector.TimelineDataGrid.HasNonDefaultFilterStyleClassName = "has-non-default-filter";
+WebInspector.TimelineDataGrid.DelayedPopoverShowTimeout = 250;
+WebInspector.TimelineDataGrid.DelayedPopoverHideContentClearTimeout = 500;
+
+WebInspector.TimelineDataGrid.Event = {
+    FiltersDidChange: "timelinedatagrid-filters-did-change"
+};
+
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js
new file mode 100644
index 000000000..f8202204b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineDataGridNode.js
@@ -0,0 +1,341 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineDataGridNode = class TimelineDataGridNode extends WebInspector.DataGridNode
+{
+    constructor(graphOnly, graphDataSource, hasChildren)
+    {
+        super({}, hasChildren);
+
+        this.copyable = false;
+
+        this._graphOnly = graphOnly || false;
+        this._graphDataSource = graphDataSource || null;
+
+        if (graphDataSource) {
+            this._graphContainerElement = document.createElement("div");
+            this._timelineRecordBars = [];
+        }
+    }
+
+    // Public
+
+    get records()
+    {
+        // Implemented by subclasses.
+        return [];
+    }
+
+    get graphDataSource()
+    {
+        return this._graphDataSource;
+    }
+
+    get data()
+    {
+        if (!this._graphDataSource)
+            return {};
+
+        var records = this.records || [];
+        return {graph: records.length ? records[0].startTime : 0};
+    }
+
+    collapse()
+    {
+        super.collapse();
+
+        if (!this._graphDataSource || !this.revealed)
+            return;
+
+        // Refresh to show child bars in our graph now that we collapsed.
+        this.refreshGraph();
+    }
+
+    expand()
+    {
+        super.expand();
+
+        if (!this._graphDataSource || !this.revealed)
+            return;
+
+        // Refresh to remove child bars from our graph now that we expanded.
+        this.refreshGraph();
+
+        // Refresh child graphs since they haven't been updating while we were collapsed.
+        var childNode = this.children[0];
+        while (childNode) {
+            if (childNode instanceof WebInspector.TimelineDataGridNode)
+                childNode.refreshGraph();
+            childNode = childNode.traverseNextNode(true, this);
+        }
+    }
+
+    createCellContent(columnIdentifier, cell)
+    {
+        if (columnIdentifier === "graph" && this._graphDataSource) {
+            this.needsGraphRefresh();
+            return this._graphContainerElement;
+        }
+
+        var value = this.data[columnIdentifier];
+        if (!value)
+            return emDash;
+
+        if (value instanceof WebInspector.SourceCodeLocation) {
+            if (value.sourceCode instanceof WebInspector.Resource) {
+                cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+                cell.classList.add(value.sourceCode.type);
+            } else if (value.sourceCode instanceof WebInspector.Script) {
+                if (value.sourceCode.url) {
+                    cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+                    cell.classList.add(WebInspector.Resource.Type.Script);
+                } else
+                    cell.classList.add(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
+            } else
+                console.error("Unknown SourceCode subclass.");
+
+            // Give the whole cell a tooltip and keep it up to date.
+            value.populateLiveDisplayLocationTooltip(cell);
+
+            var fragment = document.createDocumentFragment();
+
+            var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(value, false, true);
+            fragment.appendChild(goToArrowButtonLink);
+
+            var icon = document.createElement("div");
+            icon.className = "icon";
+            fragment.appendChild(icon);
+
+            var titleElement = document.createElement("span");
+            value.populateLiveDisplayLocationString(titleElement, "textContent");
+            fragment.appendChild(titleElement);
+
+            return fragment;
+        }
+
+        if (value instanceof WebInspector.CallFrame) {
+            var callFrame = value;
+
+            var isAnonymousFunction = false;
+            var functionName = callFrame.functionName;
+            if (!functionName) {
+                functionName = WebInspector.UIString("(anonymous function)");
+                isAnonymousFunction = true;
+            }
+
+            cell.classList.add(WebInspector.CallFrameView.FunctionIconStyleClassName);
+
+            var fragment = document.createDocumentFragment();
+
+            if (callFrame.sourceCodeLocation && callFrame.sourceCodeLocation.sourceCode) {
+                // Give the whole cell a tooltip and keep it up to date.
+                callFrame.sourceCodeLocation.populateLiveDisplayLocationTooltip(cell);
+
+                var goToArrowButtonLink = WebInspector.createSourceCodeLocationLink(callFrame.sourceCodeLocation, false, true);
+                fragment.appendChild(goToArrowButtonLink);
+
+                var icon = document.createElement("div");
+                icon.classList.add("icon");
+                fragment.appendChild(icon);
+
+                if (isAnonymousFunction) {
+                    // For anonymous functions we show the resource or script icon and name.
+                    if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Resource) {
+                        cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+                        cell.classList.add(callFrame.sourceCodeLocation.sourceCode.type);
+                    } else if (callFrame.sourceCodeLocation.sourceCode instanceof WebInspector.Script) {
+                        if (callFrame.sourceCodeLocation.sourceCode.url) {
+                            cell.classList.add(WebInspector.ResourceTreeElement.ResourceIconStyleClassName);
+                            cell.classList.add(WebInspector.Resource.Type.Script);
+                        } else
+                            cell.classList.add(WebInspector.ScriptTreeElement.AnonymousScriptIconStyleClassName);
+                    } else
+                        console.error("Unknown SourceCode subclass.");
+
+                    var titleElement = document.createElement("span");
+                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(titleElement, "textContent");
+
+                    fragment.appendChild(titleElement);
+                } else {
+                    // Show the function name and icon.
+                    cell.classList.add(WebInspector.CallFrameView.FunctionIconStyleClassName);
+
+                    fragment.append(functionName);
+
+                    var subtitleElement = document.createElement("span");
+                    subtitleElement.classList.add("subtitle");
+                    callFrame.sourceCodeLocation.populateLiveDisplayLocationString(subtitleElement, "textContent");
+
+                    fragment.appendChild(subtitleElement);
+                }
+
+                return fragment;
+            }
+
+            var icon = document.createElement("div");
+            icon.classList.add("icon");
+
+            fragment.append(icon, functionName);
+
+            return fragment;
+        }
+
+        return super.createCellContent(columnIdentifier, cell);
+    }
+
+    refresh()
+    {
+        if (this._graphDataSource && this._graphOnly) {
+            this.needsGraphRefresh();
+            return;
+        }
+
+        super.refresh();
+    }
+
+    refreshGraph()
+    {
+        if (!this._graphDataSource)
+            return;
+
+        if (this._scheduledGraphRefreshIdentifier) {
+            cancelAnimationFrame(this._scheduledGraphRefreshIdentifier);
+            this._scheduledGraphRefreshIdentifier = undefined;
+        }
+
+        // We are not visible, but an ancestor will draw our graph.
+        // They need notified by using our needsGraphRefresh.
+        console.assert(this.revealed);
+        if (!this.revealed)
+            return;
+
+        var secondsPerPixel = this._graphDataSource.secondsPerPixel;
+        console.assert(isFinite(secondsPerPixel) && secondsPerPixel > 0);
+
+        var recordBarIndex = 0;
+
+        function createBar(records, renderMode)
+        {
+            var timelineRecordBar = this._timelineRecordBars[recordBarIndex];
+            if (!timelineRecordBar)
+                timelineRecordBar = this._timelineRecordBars[recordBarIndex] = new WebInspector.TimelineRecordBar(records, renderMode);
+            else {
+                timelineRecordBar.renderMode = renderMode;
+                timelineRecordBar.records = records;
+            }
+            timelineRecordBar.refresh(this._graphDataSource);
+            if (!timelineRecordBar.element.parentNode)
+                this._graphContainerElement.appendChild(timelineRecordBar.element);
+            ++recordBarIndex;
+        }
+
+        function collectRecordsByType(records, recordsByTypeMap)
+        {
+            for (var record of records) {
+                var typedRecords = recordsByTypeMap.get(record.type);
+                if (!typedRecords) {
+                    typedRecords = [];
+                    recordsByTypeMap.set(record.type, typedRecords);
+                }
+
+                typedRecords.push(record);
+            }
+        }
+
+        var boundCreateBar = createBar.bind(this);
+
+        if (this.expanded) {
+            // When expanded just use the records for this node.
+            WebInspector.TimelineRecordBar.createCombinedBars(this.records, secondsPerPixel, this._graphDataSource, boundCreateBar);
+        } else {
+            // When collapsed use the records for this node and its descendants.
+            // To share bars better, group records by type.
+
+            var recordTypeMap = new Map;
+            collectRecordsByType(this.records, recordTypeMap);
+
+            var childNode = this.children[0];
+            while (childNode) {
+                if (childNode instanceof WebInspector.TimelineDataGridNode)
+                    collectRecordsByType(childNode.records, recordTypeMap);
+                childNode = childNode.traverseNextNode(false, this);
+            }
+
+            for (var records of recordTypeMap.values())
+                WebInspector.TimelineRecordBar.createCombinedBars(records, secondsPerPixel, this._graphDataSource, boundCreateBar);
+        }
+
+        // Remove the remaining unused TimelineRecordBars.
+        for (; recordBarIndex < this._timelineRecordBars.length; ++recordBarIndex) {
+            this._timelineRecordBars[recordBarIndex].records = null;
+            this._timelineRecordBars[recordBarIndex].element.remove();
+        }
+    }
+
+    needsGraphRefresh()
+    {
+        if (!this.revealed) {
+            // We are not visible, but an ancestor will be drawing our graph.
+            // Notify the next visible ancestor that their graph needs to refresh.
+            var ancestor = this;
+            while (ancestor && !ancestor.root) {
+                if (ancestor.revealed && ancestor instanceof WebInspector.TimelineDataGridNode) {
+                    ancestor.needsGraphRefresh();
+                    return;
+                }
+
+                ancestor = ancestor.parent;
+            }
+
+            return;
+        }
+
+        if (!this._graphDataSource || this._scheduledGraphRefreshIdentifier)
+            return;
+
+        this._scheduledGraphRefreshIdentifier = requestAnimationFrame(this.refreshGraph.bind(this));
+    }
+
+    // Protected
+
+    isRecordVisible(record)
+    {
+        if (!this._graphDataSource)
+            return false;
+
+        if (isNaN(record.startTime))
+            return false;
+
+        // If this bar is completely before the bounds of the graph, not visible.
+        if (record.endTime < this.graphDataSource.startTime)
+            return false;
+
+        // If this record is completely after the current time or end time, not visible.
+        if (record.startTime > this.graphDataSource.currentTime || record.startTime > this.graphDataSource.endTime)
+            return false;
+
+        return true;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css b/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
new file mode 100644
index 000000000..6d70310c4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
@@ -0,0 +1,142 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.network-icon .icon {
+    content: url(../Images/NetworkInstrument.svg);
+}
+
+.script-icon .icon {
+    content: url(../Images/ScriptsInstrument.svg);
+}
+
+.memory-icon .icon {
+    content: url(../Images/MemoryInstrument.svg);
+}
+
+.layout-icon .icon {
+    content: url(../Images/LayoutInstrument.svg);
+}
+
+.rendering-frame-icon .icon {
+    content: url(../Images/RenderingFramesInstrument.svg);
+}
+
+/* FIXME: <https://webkit.org/b/153892> [GTK] Web Inspector: Add new GTK+ icons for instrument icons */
+body:not(.mac-platform, .windows-platform) .network-icon .icon {
+    content: -webkit-image-set(url(../Images/Network.png) 1x, url(../Images/Network@2x.png) 2x);
+}
+
+body:not(.mac-platform, .windows-platform) .network-icon.large .icon {
+    content: -webkit-image-set(url(../Images/NetworkLarge.png) 1x, url(../Images/NetworkLarge@2x.png) 2x);
+}
+
+body:not(.mac-platform, .windows-platform) .layout-icon .icon {
+    content: -webkit-image-set(url(../Images/Colors.png) 1x, url(../Images/Colors@2x.png) 2x);
+}
+
+body:not(.mac-platform, .windows-platform) .layout-icon.large .icon {
+    content: -webkit-image-set(url(../Images/ColorsLarge.png) 1x, url(../Images/ColorsLarge@2x.png) 2x);
+}
+ 
+body:not(.mac-platform, .windows-platform) .script-icon .icon {
+    content: -webkit-image-set(url(../Images/Script.png) 1x, url(../Images/Script@2x.png) 2x);
+}
+ 
+body:not(.mac-platform, .windows-platform) .script-icon.large .icon {
+    content: -webkit-image-set(url(../Images/ScriptLarge.png) 1x, url(../Images/ScriptLarge@2x.png) 2x);
+}
+ 
+body:not(.mac-platform, .windows-platform) .rendering-frame-icon .icon {
+    content: -webkit-image-set(url(../Images/Frames.png) 1x, url(../Images/Frames@2x.png) 2x);
+}
+
+.stopwatch-icon .icon {
+    content: url(../Images/Stopwatch.svg);
+}
+
+/* FIXME: <https://webkit.org/b/154088> [GTK] Web Inspector: Add new GTK+ icon for timeline recording stopwatch */
+body:not(.mac-platform, .windows-platform) .stopwatch-icon .icon {
+    content: -webkit-image-set(url(../Images/Stopwatch.png) 1x, url(../Images/Stopwatch@2x.png) 2x);
+}
+
+.profile-icon .icon {
+    content: -webkit-image-set(url(../Images/Profile.png) 1x, url(../Images/Profile@2x.png) 2x);
+}
+
+.style-record .icon {
+    content: url(../Images/TimelineRecordStyle.svg);
+}
+
+.layout-record .icon {
+    content: url(../Images/TimelineRecordLayout.svg);
+}
+
+.paint-record .icon {
+    content: url(../Images/TimelineRecordPaint.svg);
+}
+
+.composite-record .icon {
+    content: url(../Images/TimelineRecordComposite.svg);
+}
+
+.rendering-frame-record .icon {
+    content: url(../Images/TimelineRecordRenderingFrame.svg);
+}
+
+.api-record .icon {
+    content: url(../Images/TimelineRecordAPI.svg);
+}
+
+.evaluated-record .icon {
+    content: url(../Images/TimelineRecordScriptEvaluated.svg);
+}
+
+.event-record .icon {
+    content: url(../Images/TimelineRecordEvent.svg);
+}
+
+.probe-record .icon {
+    content: url(../Images/TimelineRecordProbeSampled.svg);
+}
+
+.runloop-record .icon {
+    width: 0 !important;
+}
+
+.console-profile-record .icon {
+    content: url(../Images/TimelineRecordConsoleProfile.svg);
+}
+
+.garbage-collection-profile-record .icon {
+    content: url(../Images/TimelineRecordGarbageCollection.svg);
+}
+
+.timer-record .icon {
+    content: url(../Images/TimelineRecordTimer.svg);
+}
+
+.animation-record .icon {
+    content: url(../Images/TimelineRecordAnimation.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
new file mode 100644
index 000000000..5cc73af8b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css
@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-overview > .scroll-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 16px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    opacity: 0;
+
+ /* Allows the horizontal scroll bar to be interacted with. */
+    z-index: calc(var(--z-index-resizer) + 1);
+}
+
+.timeline-overview:hover > .scroll-container {
+    opacity: 0.75;
+}
+
+.timeline-overview > .scroll-container:hover {
+    opacity: 1;
+}
+
+.timeline-overview > .timeline-ruler {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.timeline-overview > .timeline-ruler > .markers {
+    top: 28px;
+}
+
+.timeline-overview.frames > .timeline-ruler > .markers > .marker:not(.current-time) {
+    display: none;
+}
+
+.timeline-overview.frames > .timeline-ruler > .header > .divider,
+.timeline-overview.frames > .timeline-ruler > .markers > .divider {
+    transform: translateX(0px);
+}
+
+.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .selection-handle.right {
+    transform: translateX(5px);
+}
+
+.timeline-overview.frames > .timeline-ruler:not(.both-handles-clamped) > .shaded-area.right {
+    transform: translateX(1px);
+}
+
+.timeline-overview > .graphs-container {
+    position: absolute;
+    top: 29px;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+body.mac-platform.legacy .timeline-overview > .graphs-container {
+    top: 22px;
+}
+
+.timeline-overview > .graphs-container > .timeline-overview-graph {
+    height: 36px;
+}
+
+.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even) {
+    background-color: hsl(0, 0%, 96%);
+    background-clip: padding-box;
+}
+
+.timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:not(:first-child) {
+    border-top: 1px solid hsla(0, 0%, 0%, 0.09);
+}
+
+.timeline-overview > .scroll-container > .scroll-width-sizer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+    visibility: hidden;
+    pointer-events: none;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js
new file mode 100644
index 000000000..5332897c1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js
@@ -0,0 +1,721 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineOverview = class TimelineOverview extends WebInspector.View
+{
+    constructor(timelineRecording)
+    {
+        super();
+
+        console.assert(timelineRecording instanceof WebInspector.TimelineRecording);
+
+        this._timelinesViewModeSettings = this._createViewModeSettings(WebInspector.TimelineOverview.ViewMode.Timelines, 0.0001, 60, 0.01, 0, 15);
+
+        if (WebInspector.FPSInstrument.supported()) {
+            let minimumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MaximumWidthPixels;
+            let maximumDurationPerPixel = 1 / WebInspector.TimelineRecordFrame.MinimumWidthPixels;
+            this._renderingFramesViewModeSettings = this._createViewModeSettings(WebInspector.TimelineOverview.ViewMode.RenderingFrames, minimumDurationPerPixel, maximumDurationPerPixel, minimumDurationPerPixel, 0, 100);
+        }
+
+        this._recording = timelineRecording;
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentAdded, this._instrumentAdded, this);
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentRemoved, this._instrumentRemoved, this);
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.MarkerAdded, this._markerAdded, this);
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
+
+        this.element.classList.add("timeline-overview");
+        this.element.addEventListener("wheel", this._handleWheelEvent.bind(this));
+        this.element.addEventListener("gesturestart", this._handleGestureStart.bind(this));
+        this.element.addEventListener("gesturechange", this._handleGestureChange.bind(this));
+        this.element.addEventListener("gestureend", this._handleGestureEnd.bind(this));
+
+        this._graphsContainerView = new WebInspector.View;
+        this._graphsContainerView.element.classList.add("graphs-container");
+        this.addSubview(this._graphsContainerView);
+
+        this._overviewGraphsByTypeMap = new Map;
+
+        this._timelineRuler = new WebInspector.TimelineRuler;
+        this._timelineRuler.allowsClippedLabels = true;
+        this._timelineRuler.allowsTimeRangeSelection = true;
+        this._timelineRuler.element.addEventListener("mousedown", this._timelineRulerMouseDown.bind(this));
+        this._timelineRuler.element.addEventListener("click", this._timelineRulerMouseClicked.bind(this));
+        this._timelineRuler.addEventListener(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
+        this.addSubview(this._timelineRuler);
+
+        this._currentTimeMarker = new WebInspector.TimelineMarker(0, WebInspector.TimelineMarker.Type.CurrentTime);
+        this._timelineRuler.addMarker(this._currentTimeMarker);
+
+        this._scrollContainerElement = document.createElement("div");
+        this._scrollContainerElement.classList.add("scroll-container");
+        this._scrollContainerElement.addEventListener("scroll", this._handleScrollEvent.bind(this));
+        this.element.appendChild(this._scrollContainerElement);
+
+        this._scrollWidthSizer = document.createElement("div");
+        this._scrollWidthSizer.classList.add("scroll-width-sizer");
+        this._scrollContainerElement.appendChild(this._scrollWidthSizer);
+
+        this._startTime = 0;
+        this._currentTime = 0;
+        this._revealCurrentTime = false;
+        this._endTime = 0;
+        this._pixelAlignDuration = false;
+        this._mouseWheelDelta = 0;
+        this._cachedScrollContainerWidth = NaN;
+        this._timelineRulerSelectionChanged = false;
+        this._viewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+
+        for (let instrument of this._recording.instruments)
+            this._instrumentAdded(instrument);
+
+        if (!WebInspector.timelineManager.isCapturingPageReload())
+            this._resetSelection();
+
+        this._viewModeDidChange();
+    }
+
+    // Public
+
+    get viewMode()
+    {
+        return this._viewMode;
+    }
+
+    set viewMode(x)
+    {
+        if (this._viewMode === x)
+            return;
+
+        this._viewMode = x;
+        this._viewModeDidChange();
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    set startTime(x)
+    {
+        x = x || 0;
+
+        if (this._startTime === x)
+            return;
+
+        if (this._viewMode !== WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+            let selectionOffset = this.selectionStartTime - this._startTime;
+            this.selectionStartTime = selectionOffset + x;
+        }
+
+        this._startTime = x;
+
+        this.needsLayout();
+    }
+
+    get currentTime()
+    {
+        return this._currentTime;
+    }
+
+    set currentTime(x)
+    {
+        x = x || 0;
+
+        if (this._currentTime === x)
+            return;
+
+        this._currentTime = x;
+        this._revealCurrentTime = true;
+
+        this.needsLayout();
+    }
+
+    get secondsPerPixel()
+    {
+        return this._currentSettings.durationPerPixelSetting.value;
+    }
+
+    set secondsPerPixel(x)
+    {
+        x = Math.min(this._currentSettings.maximumDurationPerPixel, Math.max(this._currentSettings.minimumDurationPerPixel, x));
+
+        if (this.secondsPerPixel === x)
+            return;
+
+        if (this._pixelAlignDuration) {
+            x = 1 / Math.round(1 / x);
+            if (this.secondsPerPixel === x)
+                return;
+        }
+
+        this._currentSettings.durationPerPixelSetting.value = x;
+
+        this.needsLayout();
+    }
+
+    get pixelAlignDuration()
+    {
+        return this._pixelAlignDuration;
+    }
+
+    set pixelAlignDuration(x)
+    {
+        if (this._pixelAlignDuration === x)
+            return;
+
+        this._mouseWheelDelta = 0;
+        this._pixelAlignDuration = x;
+        if (this._pixelAlignDuration)
+            this.secondsPerPixel = 1 / Math.round(1 / this.secondsPerPixel);
+    }
+
+    get endTime()
+    {
+        return this._endTime;
+    }
+
+    set endTime(x)
+    {
+        x = x || 0;
+
+        if (this._endTime === x)
+            return;
+
+        this._endTime = x;
+
+        this.needsLayout();
+    }
+
+    get scrollStartTime()
+    {
+        return this._currentSettings.scrollStartTime;
+    }
+
+    set scrollStartTime(x)
+    {
+        x = x || 0;
+
+        if (this.scrollStartTime === x)
+            return;
+
+        this._currentSettings.scrollStartTime = x;
+
+        this.needsLayout();
+    }
+
+    get scrollContainerWidth()
+    {
+        return this._cachedScrollContainerWidth;
+    }
+
+    get visibleDuration()
+    {
+        if (isNaN(this._cachedScrollContainerWidth)) {
+            this._cachedScrollContainerWidth = this._scrollContainerElement.offsetWidth;
+            if (!this._cachedScrollContainerWidth)
+                this._cachedScrollContainerWidth = NaN;
+        }
+
+        return this._cachedScrollContainerWidth * this.secondsPerPixel;
+    }
+
+    get selectionStartTime()
+    {
+        return this._timelineRuler.selectionStartTime;
+    }
+
+    set selectionStartTime(x)
+    {
+        x = x || 0;
+
+        if (this._timelineRuler.selectionStartTime === x)
+            return;
+
+        let selectionDuration = this.selectionDuration;
+        this._timelineRuler.selectionStartTime = x;
+        this._timelineRuler.selectionEndTime = x + selectionDuration;
+    }
+
+    get selectionDuration()
+    {
+        return this._timelineRuler.selectionEndTime - this._timelineRuler.selectionStartTime;
+    }
+
+    set selectionDuration(x)
+    {
+        x = Math.max(this._timelineRuler.minimumSelectionDuration, x);
+
+        this._timelineRuler.selectionEndTime = this._timelineRuler.selectionStartTime + x;
+    }
+
+    get height()
+    {
+        let height = 0;
+        for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+            if (overviewGraph.visible)
+                height += overviewGraph.height;
+        }
+        return height;
+    }
+
+    get visible()
+    {
+        return this._visible;
+    }
+
+    shown()
+    {
+        this._visible = true;
+
+        for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
+            if (this._canShowTimelineType(type))
+                overviewGraph.shown();
+        }
+
+        this.updateLayout(WebInspector.View.LayoutReason.Resize);
+    }
+
+    hidden()
+    {
+        this._visible = false;
+
+        for (let overviewGraph of this._overviewGraphsByTypeMap.values())
+            overviewGraph.hidden();
+    }
+
+    reset()
+    {
+        for (let overviewGraph of this._overviewGraphsByTypeMap.values())
+            overviewGraph.reset();
+
+        this._mouseWheelDelta = 0;
+
+        this._resetSelection();
+    }
+
+    revealMarker(marker)
+    {
+        this.scrollStartTime = marker.time - (this.visibleDuration / 2);
+    }
+
+    recordWasFiltered(timeline, record, filtered)
+    {
+        let overviewGraph = this._overviewGraphsByTypeMap.get(timeline.type);
+        console.assert(overviewGraph, "Missing overview graph for timeline type " + timeline.type);
+        if (!overviewGraph)
+            return;
+
+        console.assert(overviewGraph.visible, "Record filtered in hidden overview graph", record);
+
+        overviewGraph.recordWasFiltered(record, filtered);
+    }
+
+    selectRecord(timeline, record)
+    {
+        let overviewGraph = this._overviewGraphsByTypeMap.get(timeline.type);
+        console.assert(overviewGraph, "Missing overview graph for timeline type " + timeline.type);
+        if (!overviewGraph)
+            return;
+
+        console.assert(overviewGraph.visible, "Record selected in hidden overview graph", record);
+
+        overviewGraph.selectedRecord = record;
+    }
+
+    updateLayoutIfNeeded()
+    {
+        if (this.layoutPending) {
+            super.updateLayoutIfNeeded();
+            return;
+        }
+
+        this._timelineRuler.updateLayoutIfNeeded();
+
+        for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+            if (overviewGraph.visible)
+                overviewGraph.updateLayoutIfNeeded();
+        }
+    }
+
+    // Protected
+
+    get timelineRuler()
+    {
+        return this._timelineRuler;
+    }
+
+    layout(layoutReason)
+    {
+        if (layoutReason === WebInspector.View.LayoutReason.Resize)
+            this._cachedScrollContainerWidth = NaN;
+
+        let startTime = this._startTime;
+        let endTime = this._endTime;
+        let currentTime = this._currentTime;
+        if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+            let renderingFramesTimeline = this._recording.timelines.get(WebInspector.TimelineRecord.Type.RenderingFrame);
+            console.assert(renderingFramesTimeline, "Recoring missing rendering frames timeline");
+
+            startTime = 0;
+            endTime = renderingFramesTimeline.records.length;
+            currentTime = endTime;
+        }
+
+        // Calculate the required width based on the duration and seconds per pixel.
+        let duration = endTime - startTime;
+        let newWidth = Math.ceil(duration / this.secondsPerPixel);
+
+        // Update all relevant elements to the new required width.
+        this._updateElementWidth(this._scrollWidthSizer, newWidth);
+
+        this._currentTimeMarker.time = currentTime;
+
+        if (this._revealCurrentTime) {
+            this.revealMarker(this._currentTimeMarker);
+            this._revealCurrentTime = false;
+        }
+
+        const visibleDuration = this.visibleDuration;
+
+        // Clamp the scroll start time to match what the scroll bar would allow.
+        let scrollStartTime = Math.min(this.scrollStartTime, endTime - visibleDuration);
+        scrollStartTime = Math.max(startTime, scrollStartTime);
+
+        this._timelineRuler.zeroTime = startTime;
+        this._timelineRuler.startTime = scrollStartTime;
+        this._timelineRuler.secondsPerPixel = this.secondsPerPixel;
+
+        if (!this._dontUpdateScrollLeft) {
+            this._ignoreNextScrollEvent = true;
+            let scrollLeft = Math.ceil((scrollStartTime - startTime) / this.secondsPerPixel);
+            if (scrollLeft)
+                this._scrollContainerElement.scrollLeft = scrollLeft;
+        }
+
+        for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+            if (!overviewGraph.visible)
+                continue;
+
+            overviewGraph.zeroTime = startTime;
+            overviewGraph.startTime = scrollStartTime;
+            overviewGraph.currentTime = currentTime;
+            overviewGraph.endTime = scrollStartTime + visibleDuration;
+        }
+    }
+
+    // Private
+
+    _updateElementWidth(element, newWidth)
+    {
+        var currentWidth = parseInt(element.style.width);
+        if (currentWidth !== newWidth)
+            element.style.width = newWidth + "px";
+    }
+
+    _handleScrollEvent(event)
+    {
+        if (this._ignoreNextScrollEvent) {
+            this._ignoreNextScrollEvent = false;
+            return;
+        }
+
+        this._dontUpdateScrollLeft = true;
+
+        let scrollOffset = this._scrollContainerElement.scrollLeft;
+        this.scrollStartTime = this._startTime + (scrollOffset * this.secondsPerPixel);
+
+        // Force layout so we can update with the scroll position synchronously.
+        this.updateLayoutIfNeeded();
+
+        this._dontUpdateScrollLeft = false;
+    }
+
+    _handleWheelEvent(event)
+    {
+        // Ignore cloned events that come our way, we already handled the original.
+        if (event.__cloned)
+            return;
+
+        // Ignore wheel events while handing gestures.
+        if (this._handlingGesture)
+            return;
+
+        // Require twice the vertical delta to overcome horizontal scrolling. This prevents most
+        // cases of inadvertent zooming for slightly diagonal scrolls.
+        if (Math.abs(event.deltaX) >= Math.abs(event.deltaY) * 0.5) {
+            // Clone the event to dispatch it on the scroll container. Mark it as cloned so we don't get into a loop.
+            let newWheelEvent = new event.constructor(event.type, event);
+            newWheelEvent.__cloned = true;
+
+            this._scrollContainerElement.dispatchEvent(newWheelEvent);
+            return;
+        }
+
+        // Remember the mouse position in time.
+        let mouseOffset = event.pageX - this.element.totalOffsetLeft;
+        let mousePositionTime = this._currentSettings.scrollStartTime + (mouseOffset * this.secondsPerPixel);
+        let deviceDirection = event.webkitDirectionInvertedFromDevice ? 1 : -1;
+        let delta = event.deltaY * (this.secondsPerPixel / WebInspector.TimelineOverview.ScrollDeltaDenominator) * deviceDirection;
+
+        // Reset accumulated wheel delta when direction changes.
+        if (this._pixelAlignDuration && (delta < 0 && this._mouseWheelDelta >= 0 || delta >= 0 && this._mouseWheelDelta < 0))
+            this._mouseWheelDelta = 0;
+
+        let previousDurationPerPixel = this.secondsPerPixel;
+        this._mouseWheelDelta += delta;
+        this.secondsPerPixel += this._mouseWheelDelta;
+
+        if (this.secondsPerPixel === this._currentSettings.minimumDurationPerPixel && delta < 0 || this.secondsPerPixel === this._currentSettings.maximumDurationPerPixel && delta >= 0)
+            this._mouseWheelDelta = 0;
+        else
+            this._mouseWheelDelta = previousDurationPerPixel + this._mouseWheelDelta - this.secondsPerPixel;
+
+        // Center the zoom around the mouse based on the remembered mouse position time.
+        this.scrollStartTime = mousePositionTime - (mouseOffset * this.secondsPerPixel);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleGestureStart(event)
+    {
+        if (this._handlingGesture) {
+            // FIXME: <https://webkit.org/b/151068> [Mac] Unexpected gesturestart events when already handling gesture
+            return;
+        }
+
+        let mouseOffset = event.pageX - this.element.totalOffsetLeft;
+        let mousePositionTime = this._currentSettings.scrollStartTime + (mouseOffset * this.secondsPerPixel);
+
+        this._handlingGesture = true;
+        this._gestureStartStartTime = mousePositionTime;
+        this._gestureStartDurationPerPixel = this.secondsPerPixel;
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleGestureChange(event)
+    {
+        // Cap zooming out at 5x.
+        let scale = Math.max(1/5, event.scale);
+
+        let mouseOffset = event.pageX - this.element.totalOffsetLeft;
+        let newSecondsPerPixel = this._gestureStartDurationPerPixel / scale;
+
+        this.secondsPerPixel = newSecondsPerPixel;
+        this.scrollStartTime = this._gestureStartStartTime - (mouseOffset * this.secondsPerPixel);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleGestureEnd(event)
+    {
+        this._handlingGesture = false;
+        this._gestureStartStartTime = NaN;
+        this._gestureStartDurationPerPixel = NaN;
+    }
+
+    _instrumentAdded(instrumentOrEvent)
+    {
+        let instrument = instrumentOrEvent instanceof WebInspector.Instrument ? instrumentOrEvent : instrumentOrEvent.data.instrument;
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+
+        let timeline = this._recording.timelineForInstrument(instrument);
+        console.assert(!this._overviewGraphsByTypeMap.has(timeline.type), timeline);
+
+        let overviewGraph = WebInspector.TimelineOverviewGraph.createForTimeline(timeline, this);
+        overviewGraph.addEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
+        this._overviewGraphsByTypeMap.set(timeline.type, overviewGraph);
+
+        this._graphsContainerView.addSubview(overviewGraph);
+
+        if (!this._canShowTimelineType(timeline.type))
+            overviewGraph.hidden();
+    }
+
+    _instrumentRemoved(event)
+    {
+        let instrument = event.data.instrument;
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+
+        let timeline = this._recording.timelineForInstrument(instrument);
+        console.assert(this._overviewGraphsByTypeMap.has(timeline.type), timeline);
+
+        let overviewGraph = this._overviewGraphsByTypeMap.take(timeline.type);
+        overviewGraph.removeEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
+        this._graphsContainerView.removeSubview(overviewGraph);
+    }
+
+    _markerAdded(event)
+    {
+        this._timelineRuler.addMarker(event.data.marker);
+    }
+
+    _timelineRulerMouseDown(event)
+    {
+        this._timelineRulerSelectionChanged = false;
+    }
+
+    _timelineRulerMouseClicked(event)
+    {
+        if (this._timelineRulerSelectionChanged)
+            return;
+
+        for (let overviewGraph of this._overviewGraphsByTypeMap.values()) {
+            let graphRect = overviewGraph.element.getBoundingClientRect();
+            if (!(event.pageX >= graphRect.left && event.pageX <= graphRect.right && event.pageY >= graphRect.top && event.pageY <= graphRect.bottom))
+                continue;
+
+            // Clone the event to dispatch it on the overview graph element.
+            let newClickEvent = new event.constructor(event.type, event);
+            overviewGraph.element.dispatchEvent(newClickEvent);
+            return;
+        }
+    }
+
+    _timeRangeSelectionChanged(event)
+    {
+        this._timelineRulerSelectionChanged = true;
+
+        let startTime = this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines ? this._startTime : 0;
+        this._currentSettings.selectionStartValueSetting.value = this.selectionStartTime - startTime;
+        this._currentSettings.selectionDurationSetting.value = this.selectionDuration;
+
+        this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged);
+    }
+
+    _recordSelected(event)
+    {
+        for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
+            if (overviewGraph !== event.target)
+                continue;
+
+            let timeline = this._recording.timelines.get(type);
+            console.assert(timeline, "Timeline recording missing timeline type", type);
+            this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.RecordSelected, {timeline, record: event.data.record});
+            return;
+        }
+    }
+
+    _resetSelection()
+    {
+        function reset(settings)
+        {
+            settings.durationPerPixelSetting.reset();
+            settings.selectionStartValueSetting.reset();
+            settings.selectionDurationSetting.reset();
+        }
+
+        reset(this._timelinesViewModeSettings);
+        if (this._renderingFramesViewModeSettings)
+            reset(this._renderingFramesViewModeSettings);
+
+        this.secondsPerPixel = this._currentSettings.durationPerPixelSetting.value;
+        this.selectionStartTime = this._currentSettings.selectionStartValueSetting.value;
+        this.selectionDuration = this._currentSettings.selectionDurationSetting.value;
+    }
+
+    _recordingReset(event)
+    {
+        this._timelineRuler.clearMarkers();
+        this._timelineRuler.addMarker(this._currentTimeMarker);
+    }
+
+    _canShowTimelineType(type)
+    {
+        let timelineViewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+        if (type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            timelineViewMode = WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+
+        return timelineViewMode === this._viewMode;
+    }
+
+    _viewModeDidChange()
+    {
+        let startTime = 0;
+        let isRenderingFramesMode = this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+        if (isRenderingFramesMode) {
+            this._timelineRuler.minimumSelectionDuration = 1;
+            this._timelineRuler.snapInterval = 1;
+            this._timelineRuler.formatLabelCallback = (value) => value.toFixed(0);
+        } else {
+            this._timelineRuler.minimumSelectionDuration = 0.01;
+            this._timelineRuler.snapInterval = NaN;
+            this._timelineRuler.formatLabelCallback = null;
+
+            startTime = this._startTime;
+        }
+
+        this.pixelAlignDuration = isRenderingFramesMode;
+        this.selectionStartTime = this._currentSettings.selectionStartValueSetting.value + startTime;
+        this.selectionDuration = this._currentSettings.selectionDurationSetting.value;
+
+        for (let [type, overviewGraph] of this._overviewGraphsByTypeMap) {
+            if (this._canShowTimelineType(type))
+                overviewGraph.shown();
+            else
+                overviewGraph.hidden();
+        }
+
+        this.element.classList.toggle("frames", isRenderingFramesMode);
+    }
+
+    _createViewModeSettings(viewMode, minimumDurationPerPixel, maximumDurationPerPixel, durationPerPixel, selectionStartValue, selectionDuration)
+    {
+        durationPerPixel = Math.min(maximumDurationPerPixel, Math.max(minimumDurationPerPixel, durationPerPixel));
+
+        let durationPerPixelSetting = new WebInspector.Setting(viewMode + "-duration-per-pixel", durationPerPixel);
+        let selectionStartValueSetting = new WebInspector.Setting(viewMode + "-selection-start-value", selectionStartValue);
+        let selectionDurationSetting = new WebInspector.Setting(viewMode + "-selection-duration", selectionDuration);
+
+        return {
+            scrollStartTime: 0,
+            minimumDurationPerPixel,
+            maximumDurationPerPixel,
+            durationPerPixelSetting,
+            selectionStartValueSetting,
+            selectionDurationSetting
+        };
+    }
+
+    get _currentSettings()
+    {
+        return this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines ? this._timelinesViewModeSettings : this._renderingFramesViewModeSettings;
+    }
+};
+
+WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
+
+WebInspector.TimelineOverview.ViewMode = {
+    Timelines: "timeline-overview-view-mode-timelines",
+    RenderingFrames: "timeline-overview-view-mode-rendering-frames"
+};
+
+WebInspector.TimelineOverview.Event = {
+    RecordSelected: "timeline-overview-record-selected",
+    TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js b/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js
new file mode 100644
index 000000000..a28b3a658
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js
@@ -0,0 +1,249 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineOverviewGraph = class TimelineOverviewGraph extends WebInspector.View
+{
+    constructor(timelineOverview)
+    {
+        super();
+
+        this.element.classList.add("timeline-overview-graph");
+
+        this._zeroTime = 0;
+        this._startTime = 0;
+        this._endTime = 5;
+        this._currentTime = 0;
+        this._timelineOverview = timelineOverview;
+        this._selectedRecord = null;
+        this._selectedRecordChanged = false;
+        this._scheduledSelectedRecordLayoutUpdateIdentifier = undefined;
+        this._visible = true;
+    }
+
+    // Public
+
+    static createForTimeline(timeline, timelineOverview)
+    {
+        console.assert(timeline instanceof WebInspector.Timeline, timeline);
+        console.assert(timelineOverview instanceof WebInspector.TimelineOverview, timelineOverview);
+
+        var timelineType = timeline.type;
+        if (timelineType === WebInspector.TimelineRecord.Type.Network)
+            return new WebInspector.NetworkTimelineOverviewGraph(timeline, timelineOverview);
+
+        if (timelineType === WebInspector.TimelineRecord.Type.Layout)
+            return new WebInspector.LayoutTimelineOverviewGraph(timeline, timelineOverview);
+
+        if (timelineType === WebInspector.TimelineRecord.Type.Script)
+            return new WebInspector.ScriptTimelineOverviewGraph(timeline, timelineOverview);
+
+        if (timelineType === WebInspector.TimelineRecord.Type.RenderingFrame)
+            return new WebInspector.RenderingFrameTimelineOverviewGraph(timeline, timelineOverview);
+
+        if (timelineType === WebInspector.TimelineRecord.Type.Memory)
+            return new WebInspector.MemoryTimelineOverviewGraph(timeline, timelineOverview);
+
+        throw new Error("Can't make a graph for an unknown timeline.");
+    }
+
+    get zeroTime()
+    {
+        return this._zeroTime;
+    }
+
+    set zeroTime(x)
+    {
+        x = x || 0;
+
+        if (this._zeroTime === x)
+            return;
+
+        this._zeroTime = x;
+
+        this.needsLayout();
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    set startTime(x)
+    {
+        x = x || 0;
+
+        if (this._startTime === x)
+            return;
+
+        this._startTime = x;
+
+        this.needsLayout();
+    }
+
+    get endTime()
+    {
+        return this._endTime;
+    }
+
+    set endTime(x)
+    {
+        x = x || 0;
+
+        if (this._endTime === x)
+            return;
+
+        this._endTime = x;
+
+        this.needsLayout();
+    }
+
+    get currentTime()
+    {
+        return this._currentTime;
+    }
+
+    set currentTime(x)
+    {
+        x = x || 0;
+
+        if (this._currentTime === x)
+            return;
+
+        let oldCurrentTime = this._currentTime;
+
+        this._currentTime = x;
+
+        if ((this._startTime <= oldCurrentTime && oldCurrentTime <= this._endTime) || (this._startTime <= this._currentTime && this._currentTime <= this._endTime))
+            this.needsLayout();
+    }
+
+    get timelineOverview()
+    {
+        return this._timelineOverview;
+    }
+
+    get visible()
+    {
+        return this._visible;
+    }
+
+    get selectedRecord()
+    {
+        return this._selectedRecord;
+    }
+
+    set selectedRecord(x)
+    {
+        if (this._selectedRecord === x)
+            return;
+
+        this._selectedRecord = x;
+        this._selectedRecordChanged = true;
+
+        this._needsSelectedRecordLayout();
+    }
+
+    get height()
+    {
+        // Overridden by sub-classes if needed.
+        return 36;
+    }
+
+    shown()
+    {
+        if (this._visible)
+            return;
+
+        this._visible = true;
+        this.element.classList.toggle("hidden", !this._visible);
+        this.updateLayout();
+    }
+
+    hidden()
+    {
+        if (!this._visible)
+            return;
+
+        this._visible = false;
+        this.element.classList.toggle("hidden", !this._visible);
+    }
+
+    reset()
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    recordWasFiltered(record, filtered)
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    needsLayout()
+    {
+        // FIXME: needsLayout can be removed once <https://webkit.org/b/150741> is fixed.
+        if (!this._visible)
+            return;
+
+        super.needsLayout();
+    }
+
+    // Protected
+
+    dispatchSelectedRecordChangedEvent()
+    {
+        if (!this._selectedRecordChanged)
+            return;
+
+        this._selectedRecordChanged = false;
+
+        this.dispatchEventToListeners(WebInspector.TimelineOverviewGraph.Event.RecordSelected, {record: this.selectedRecord});
+    }
+
+    updateSelectedRecord()
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    // Private
+
+    _needsSelectedRecordLayout()
+    {
+        // If layout is scheduled, abort since the selected record will be updated when layout happens.
+        if (this.layoutPending)
+            return;
+
+        if (this._scheduledSelectedRecordLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledSelectedRecordLayoutUpdateIdentifier = requestAnimationFrame(function() {
+            this._scheduledSelectedRecordLayoutUpdateIdentifier = undefined;
+            this.updateSelectedRecord();
+        }.bind(this));
+    }
+};
+
+WebInspector.TimelineOverviewGraph.Event = {
+    RecordSelected: "timeline-overview-graph-record-selected"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
new file mode 100644
index 000000000..e7cc28b15
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
@@ -0,0 +1,106 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-record-bar {
+    position: absolute;
+    height: 12px;
+    z-index: 1;
+}
+
+.timeline-record-bar > .segment {
+    position: absolute;
+    height: 100%;
+    background-color: hsl(0, 0%, 88%);
+    border: 1px solid hsl(0, 0%, 78%);
+    border-radius: 3px;
+    min-width: 4px;
+    z-index: 1;
+}
+
+.timeline-record-bar:not(.has-inactive-segment) > .segment {
+    left: 0;
+    width: 100%;
+}
+
+.timeline-record-bar > .segment.inactive {
+    z-index: 0;
+}
+
+.timeline-record-bar > .segment.inactive,
+.timeline-record-bar.unfinished > .segment {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right: none;
+}
+
+.timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+}
+
+:matches(:focus, .force-focus) .selected .timeline-record-bar > .segment {
+    background-color: white !important;
+    border: none !important;
+}
+
+:matches(:focus, .force-focus) .selected .timeline-record-bar > .segment.inactive {
+    background-color: hsl(215, 63%, 85%) !important;
+}
+
+:matches(:focus, .force-focus) .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
+    border-left: 1px solid hsla(215, 67%, 53%, 0.7) !important;
+}
+
+.timeline-record-bar.timeline-record-type-network > .segment {
+    background-color: hsl(207, 63%, 67%);
+    border-color: hsl(202, 55%, 51%);
+}
+
+.timeline-record-bar.timeline-record-type-network > .segment.inactive {
+    background-color: hsl(208, 66%, 79%);
+    border-color: hsl(202, 57%, 68%);
+}
+
+.timeline-record-bar.timeline-record-type-layout > .segment {
+    background-color: hsl(0, 65%, 75%);
+    border-color: hsl(0, 54%, 62%);
+}
+
+
+.timeline-record-bar.timeline-record-type-layout.layout-timeline-record-paint > .segment,
+.timeline-record-bar.timeline-record-type-layout.layout-timeline-record-composite > .segment {
+    background-color: hsl(76, 49%, 60%);
+    border-color: hsl(79, 45%, 51%);
+}
+
+.timeline-record-bar.timeline-record-type-script > .segment {
+    background-color: hsl(269, 65%, 74%);
+    border-color: hsl(273, 33%, 58%);
+}
+
+.timeline-record-bar.timeline-record-type-script.script-timeline-record-garbage-collected > .segment {
+    background-color: hsl(23, 69%, 73%);
+    border-color: hsl(11, 54%, 62%);    
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js
new file mode 100644
index 000000000..7ba053736
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.js
@@ -0,0 +1,344 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecordBar = class TimelineRecordBar extends WebInspector.Object
+{
+    constructor(records, renderMode)
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.classList.add("timeline-record-bar");
+
+        this.renderMode = renderMode;
+        this.records = records;
+    }
+
+    static createCombinedBars(records, secondsPerPixel, graphDataSource, createBarCallback)
+    {
+        if (!records.length)
+            return;
+
+        var startTime = graphDataSource.startTime;
+        var currentTime = graphDataSource.currentTime;
+        var endTime = graphDataSource.endTime;
+
+        var visibleRecords = [];
+        var usesActiveStartTime = false;
+        var lastRecordType = null;
+
+        // FIXME: Do a binary search for records that fall inside start and current time.
+
+        for (var record of records) {
+            if (isNaN(record.startTime))
+                continue;
+
+            // If this bar is completely before the bounds of the graph, skip this record.
+            if (record.endTime < startTime)
+                continue;
+
+            // If this record is completely after the current time or end time, break out now.
+            // Records are sorted, so all records after this will be beyond the current or end time too.
+            if (record.startTime > currentTime || record.startTime > endTime)
+                break;
+
+            if (record.usesActiveStartTime)
+                usesActiveStartTime = true;
+
+            // If one record uses active time the rest are assumed to use it.
+            console.assert(record.usesActiveStartTime === usesActiveStartTime);
+
+            // Only a single record type is supported right now.
+            console.assert(!lastRecordType || record.type === lastRecordType);
+
+            visibleRecords.push(record);
+
+            lastRecordType = record.type;
+        }
+
+        if (!visibleRecords.length)
+            return;
+
+        if (visibleRecords.length === 1) {
+            createBarCallback(visibleRecords, WebInspector.TimelineRecordBar.RenderMode.Normal);
+            return;
+        }
+
+        function compareByActiveStartTime(a, b)
+        {
+            return a.activeStartTime - b.activeStartTime;
+        }
+
+        var minimumDuration = secondsPerPixel * WebInspector.TimelineRecordBar.MinimumWidthPixels;
+        var minimumMargin = secondsPerPixel * WebInspector.TimelineRecordBar.MinimumMarginPixels;
+
+        if (usesActiveStartTime) {
+            var inactiveStartTime = NaN;
+            var inactiveEndTime = NaN;
+            var inactiveRecords = [];
+
+            for (var record of visibleRecords) {
+                // Check if the previous record is far enough away to create the inactive bar.
+                if (!isNaN(inactiveStartTime) && inactiveStartTime + Math.max(inactiveEndTime - inactiveStartTime, minimumDuration) + minimumMargin <= record.startTime) {
+                    createBarCallback(inactiveRecords, WebInspector.TimelineRecordBar.RenderMode.InactiveOnly);
+                    inactiveRecords = [];
+                    inactiveStartTime = NaN;
+                    inactiveEndTime = NaN;
+                }
+
+                // If this is a new bar, peg the start time.
+                if (isNaN(inactiveStartTime))
+                    inactiveStartTime = record.startTime;
+
+                // Update the end time to be the maximum we encounter. inactiveEndTime might be NaN, so "|| 0" to prevent Math.max from returning NaN.
+                inactiveEndTime = Math.max(inactiveEndTime || 0, record.activeStartTime);
+
+                inactiveRecords.push(record);
+            }
+
+            // Create the inactive bar for the last record if needed.
+            if (!isNaN(inactiveStartTime))
+                createBarCallback(inactiveRecords, WebInspector.TimelineRecordBar.RenderMode.InactiveOnly);
+
+            visibleRecords.sort(compareByActiveStartTime);
+        }
+
+        var activeStartTime = NaN;
+        var activeEndTime = NaN;
+        var activeRecords = [];
+
+        var startTimeProperty = usesActiveStartTime ? "activeStartTime" : "startTime";
+
+        for (var record of visibleRecords) {
+            var startTime = record[startTimeProperty];
+
+            // Check if the previous record is far enough away to create the active bar. We also create it now if the current record has no active state time.
+            if (!isNaN(activeStartTime) && (activeStartTime + Math.max(activeEndTime - activeStartTime, minimumDuration) + minimumMargin <= startTime
+                || (isNaN(startTime) && !isNaN(activeEndTime)))) {
+                createBarCallback(activeRecords, WebInspector.TimelineRecordBar.RenderMode.ActiveOnly);
+                activeRecords = [];
+                activeStartTime = NaN;
+                activeEndTime = NaN;
+            }
+
+            if (isNaN(startTime))
+                continue;
+
+            // If this is a new bar, peg the start time.
+            if (isNaN(activeStartTime))
+                activeStartTime = startTime;
+
+            // Update the end time to be the maximum we encounter. activeEndTime might be NaN, so "|| 0" to prevent Math.max from returning NaN.
+            if (!isNaN(record.endTime))
+                activeEndTime = Math.max(activeEndTime || 0, record.endTime);
+
+            activeRecords.push(record);
+        }
+
+        // Create the active bar for the last record if needed.
+        if (!isNaN(activeStartTime))
+            createBarCallback(activeRecords, WebInspector.TimelineRecordBar.RenderMode.ActiveOnly);
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get renderMode()
+    {
+        return this._renderMode;
+    }
+
+    set renderMode(renderMode)
+    {
+        this._renderMode = renderMode || WebInspector.TimelineRecordBar.RenderMode.Normal;
+    }
+
+    get records()
+    {
+        return this._records;
+    }
+
+    set records(records)
+    {
+        if (this._records && this._records.length) {
+            this._element.classList.remove(this._records[0].type);
+            if (this._records[0].eventType)
+                this._element.classList.remove(this._records[0].eventType);
+        }
+
+        records = records || [];
+
+        console.assert(records instanceof Array, "records should be an array");
+
+        this._records = records;
+
+        // Assume all records are the same type.
+        if (this._records.length) {
+            this._element.classList.add(this._records[0].type);
+            // Although all records may not have the same event type, the first record is
+            // sufficient to determine the correct style for the record bar.
+            if (this._records[0].eventType)
+                this._element.classList.add(this._records[0].eventType);
+        }
+    }
+
+    refresh(graphDataSource)
+    {
+        if (!this._records || !this._records.length)
+            return false;
+
+        var firstRecord = this._records[0];
+        var barStartTime = firstRecord.startTime;
+
+        // If this bar has no time info, return early.
+        if (isNaN(barStartTime))
+            return false;
+
+        var graphStartTime = graphDataSource.startTime;
+        var graphEndTime = graphDataSource.endTime;
+        var graphCurrentTime = graphDataSource.currentTime;
+
+        var barEndTime = this._records.reduce(function(previousValue, currentValue) { return Math.max(previousValue, currentValue.endTime); }, 0);
+
+        // If this bar is completely after the current time, return early.
+        if (barStartTime > graphCurrentTime)
+            return false;
+
+        // If this bar is completely before or after the bounds of the graph, return early.
+        if (barEndTime < graphStartTime || barStartTime > graphEndTime)
+            return false;
+
+        var barUnfinished = isNaN(barEndTime) || barEndTime >= graphCurrentTime;
+        if (barUnfinished)
+            barEndTime = graphCurrentTime;
+
+        var graphDuration = graphEndTime - graphStartTime;
+
+        this._element.classList.toggle("unfinished", barUnfinished);
+
+        var newBarLeftPosition = (barStartTime - graphStartTime) / graphDuration;
+        this._updateElementPosition(this._element, newBarLeftPosition, "left");
+
+        var newBarWidth = ((barEndTime - graphStartTime) / graphDuration) - newBarLeftPosition;
+        this._updateElementPosition(this._element, newBarWidth, "width");
+
+        if (!this._activeBarElement && this._renderMode !== WebInspector.TimelineRecordBar.RenderMode.InactiveOnly) {
+            this._activeBarElement = document.createElement("div");
+            this._activeBarElement.classList.add("segment");
+        }
+
+        if (!firstRecord.usesActiveStartTime) {
+            this._element.classList.remove("has-inactive-segment");
+
+            if (this._inactiveBarElement)
+                this._inactiveBarElement.remove();
+
+            if (this._renderMode === WebInspector.TimelineRecordBar.RenderMode.InactiveOnly) {
+                if (this._activeBarElement)
+                    this._activeBarElement.remove();
+
+                return false;
+            }
+
+            // If this TimelineRecordBar is reused and had an inactive bar previously, clean it up.
+            this._activeBarElement.style.removeProperty("left");
+            this._activeBarElement.style.removeProperty("width");
+
+            if (!this._activeBarElement.parentNode)
+                this._element.appendChild(this._activeBarElement);
+
+            return true;
+        }
+
+        this._element.classList.add("has-inactive-segment");
+
+        // Find the earliest active start time for active only rendering, and the latest for the other modes.
+        // This matches the values that TimelineRecordBar.createCombinedBars uses when combining.
+        if (this._renderMode === WebInspector.TimelineRecordBar.RenderMode.ActiveOnly)
+            var barActiveStartTime = this._records.reduce(function(previousValue, currentValue) { return Math.min(previousValue, currentValue.activeStartTime); }, Infinity);
+        else
+            var barActiveStartTime = this._records.reduce(function(previousValue, currentValue) { return Math.max(previousValue, currentValue.activeStartTime); }, 0);
+
+        var barDuration = barEndTime - barStartTime;
+
+        var inactiveUnfinished = isNaN(barActiveStartTime) || barActiveStartTime >= graphCurrentTime;
+        this._element.classList.toggle("unfinished", inactiveUnfinished);
+
+        if (inactiveUnfinished)
+            barActiveStartTime = graphCurrentTime;
+
+        var middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
+
+        if (this._renderMode !== WebInspector.TimelineRecordBar.RenderMode.ActiveOnly) {
+            if (!this._inactiveBarElement) {
+                this._inactiveBarElement = document.createElement("div");
+                this._inactiveBarElement.classList.add("segment");
+                this._inactiveBarElement.classList.add("inactive");
+            }
+
+            this._updateElementPosition(this._inactiveBarElement, 1 - middlePercentage, "right");
+            this._updateElementPosition(this._inactiveBarElement, middlePercentage, "width");
+
+            if (!this._inactiveBarElement.parentNode)
+                this._element.insertBefore(this._inactiveBarElement, this._element.firstChild);
+        }
+
+        if (!inactiveUnfinished && this._renderMode !== WebInspector.TimelineRecordBar.RenderMode.InactiveOnly) {
+            this._updateElementPosition(this._activeBarElement, middlePercentage, "left");
+            this._updateElementPosition(this._activeBarElement, 1 - middlePercentage, "width");
+
+            if (!this._activeBarElement.parentNode)
+                this._element.appendChild(this._activeBarElement);
+        } else if (this._activeBarElement)
+            this._activeBarElement.remove();
+
+        return true;
+    }
+
+    // Private
+
+    _updateElementPosition(element, newPosition, property)
+    {
+        newPosition *= 100;
+        newPosition = newPosition.toFixed(2);
+
+        var currentPosition = parseFloat(element.style[property]).toFixed(2);
+        if (currentPosition !== newPosition)
+            element.style[property] = newPosition + "%";
+    }
+};
+
+WebInspector.TimelineRecordBar.MinimumWidthPixels = 4;
+WebInspector.TimelineRecordBar.MinimumMarginPixels = 1;
+
+WebInspector.TimelineRecordBar.RenderMode = {
+    Normal: "timeline-record-bar-normal-render-mode",
+    InactiveOnly: "timeline-record-bar-inactive-only-render-mode",
+    ActiveOnly: "timeline-record-bar-active-only-render-mode"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css
new file mode 100644
index 000000000..290df3e88
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-record-frame {
+    position: absolute;
+    height: 108px;
+    min-height: 3px;
+    min-width: 4px;
+    width: 4px;
+
+    overflow: hidden;
+}
+
+.timeline-record-frame.tall {
+    -webkit-mask-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 1) 10%);
+}
+
+.timeline-record-frame > .frame {
+    position: absolute;
+    z-index: 1;
+    bottom: 1px;
+    min-width: 4px;
+    width: 100%;
+
+    padding-left: 1px;
+
+    box-sizing: border-box;
+}
+
+.timeline-record-frame.selected {
+    background: -webkit-linear-gradient(left, hsl(210, 98%, 96%), hsl(210, 98%, 96%)) no-repeat 1px -1px;
+}
+
+body.window-inactive .timeline-record-frame.selected {
+    background: -webkit-linear-gradient(left, hsl(0, 0%, 96%), hsl(0, 0%, 96%)) no-repeat 1px -1px;
+}
+
+.timeline-record-frame.filtered > .frame {
+    opacity: 0.35;
+}
+
+.timeline-record-frame.selected > .frame {
+    box-shadow: 0 -1px 0 white;
+}
+
+.timeline-record-frame > .frame > .duration {
+    box-sizing: border-box;
+
+    min-height: 3px;
+    background-color: hsl(0, 0%, 90%);
+    border-style: solid solid none solid;
+    border-width: 1px;
+    border-color: hsl(0, 0%, 82%);
+}
+
+.timeline-record-frame > .frame > .duration:last-child {
+    border-bottom-style: solid;
+}
+
+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-script {
+    background-color: hsl(269, 65%, 74%);
+    border-color: hsl(273, 33%, 58%);
+}
+
+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-layout {
+    background-color: hsl(0, 65%, 75%);
+    border-color: hsl(0, 54%, 62%);
+}
+
+.timeline-record-frame > .frame > .duration.rendering-frame-timeline-record-paint {
+    background-color: hsl(76, 49%, 60%);
+    border-color: hsl(79, 45%, 51%);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js
new file mode 100644
index 000000000..96d1c2e85
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js
@@ -0,0 +1,285 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecordFrame = class TimelineRecordFrame extends WebInspector.Object
+{
+    constructor(graphDataSource, record)
+    {
+        super();
+
+        this._element = document.createElement("div");
+        this._element.classList.add("timeline-record-frame");
+
+        this._graphDataSource = graphDataSource;
+        this._record = record || null;
+        this._filtered = false;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get record()
+    {
+        return this._record;
+    }
+
+    set record(record)
+    {
+        this._record = record;
+    }
+
+    get selected()
+    {
+        return this._element.classList.contains("selected");
+    }
+
+    set selected(x)
+    {
+        if (this.selected === x)
+            return;
+
+        this._element.classList.toggle("selected");
+    }
+
+    get filtered()
+    {
+        return this._filtered;
+    }
+
+    set filtered(x)
+    {
+        if (this._filtered === x)
+            return;
+
+        this._filtered = x;
+        this._element.classList.toggle("filtered");
+    }
+
+    refresh(graphDataSource)
+    {
+        if (!this._record)
+            return false;
+
+        var frameIndex = this._record.frameIndex;
+        var graphStartFrameIndex = Math.floor(graphDataSource.startTime);
+        var graphEndFrameIndex = graphDataSource.endTime;
+
+        // If this frame is completely before or after the bounds of the graph, return early.
+        if (frameIndex < graphStartFrameIndex || frameIndex > graphEndFrameIndex)
+            return false;
+
+        this._element.style.width = (1 / graphDataSource.timelineOverview.secondsPerPixel) + "px";
+
+        var graphDuration = graphDataSource.endTime - graphDataSource.startTime
+        var recordLeftPosition = (frameIndex - graphDataSource.startTime) / graphDuration;
+        this._updateElementPosition(this._element, recordLeftPosition, "left");
+        this._updateChildElements(graphDataSource);
+
+        return true;
+    }
+
+    // Private
+
+    _calculateFrameDisplayData(graphDataSource)
+    {
+        var secondsPerBlock = (graphDataSource.graphHeightSeconds / graphDataSource.height) * WebInspector.TimelineRecordFrame.MinimumHeightPixels;
+        var segments = [];
+        var invisibleSegments = [];
+        var currentSegment = null;
+
+        function updateDurationRemainder(segment)
+        {
+            if (segment.duration <= secondsPerBlock) {
+                segment.remainder = 0;
+                return;
+            }
+
+            var roundedDuration = Math.roundTo(segment.duration, secondsPerBlock);
+            segment.remainder = Math.max(segment.duration - roundedDuration, 0);
+        }
+
+        function pushCurrentSegment()
+        {
+            updateDurationRemainder(currentSegment);
+            segments.push(currentSegment);
+            if (currentSegment.duration < secondsPerBlock)
+                invisibleSegments.push({segment: currentSegment, index: segments.length - 1});
+
+            currentSegment = null;
+        }
+
+        // Frame segments aren't shown at arbitrary pixel heights, but are divided into blocks of pixels. One block
+        // represents the minimum displayable duration of a rendering frame, in seconds. Contiguous tasks less than a
+        // block high are grouped until the minimum is met, or a task meeting the minimum is found. The group is then
+        // added to the list of segment candidates. Large tasks (one block or more) are not grouped with other tasks
+        // and are simply added to the candidate list.
+        for (var key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
+            var taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+            var duration = this._record.durationForTask(taskType);
+            if (duration === 0)
+                continue;
+
+            if (currentSegment && duration >= secondsPerBlock)
+                pushCurrentSegment();
+
+            if (!currentSegment)
+                currentSegment = {taskType: null, longestTaskDuration: 0, duration: 0, remainder: 0};
+
+            currentSegment.duration += duration;
+            if (duration > currentSegment.longestTaskDuration) {
+                currentSegment.taskType = taskType;
+                currentSegment.longestTaskDuration = duration;
+            }
+
+            if (currentSegment.duration >= secondsPerBlock)
+                pushCurrentSegment();
+        }
+
+        if (currentSegment)
+            pushCurrentSegment();
+
+        // A frame consisting of a single segment is always visible.
+        if (segments.length === 1) {
+            segments[0].duration = Math.max(segments[0].duration, secondsPerBlock);
+            invisibleSegments = [];
+        }
+
+        // After grouping sub-block tasks, a second pass is needed to handle those groups that are still beneath the
+        // minimum displayable duration. Each sub-block task has one or two adjacent display segments greater than one
+        // block. The rounded-off time from these tasks is added to the sub-block, if it's sufficient to create a full
+        // block. Failing that, the task is merged with an adjacent segment.
+        invisibleSegments.sort(function(a, b) { return a.segment.duration - b.segment.duration; });
+
+        for (var item of invisibleSegments) {
+            var segment = item.segment;
+            var previousSegment = item.index > 0 ? segments[item.index - 1] : null;
+            var nextSegment = item.index < segments.length - 1 ? segments[item.index + 1] : null;
+            console.assert(previousSegment || nextSegment, "Invisible segment should have at least one adjacent visible segment.");
+
+            // Try to increase the segment's size to exactly one block, by taking subblock time from neighboring segments.
+            // If there are two neighbors, the one with greater subblock duration is borrowed from first.
+            var adjacentSegments;
+            var availableDuration;
+            if (previousSegment && nextSegment) {
+                adjacentSegments = previousSegment.remainder > nextSegment.remainder ? [previousSegment, nextSegment] : [nextSegment, previousSegment];
+                availableDuration = previousSegment.remainder + nextSegment.remainder;
+            } else {
+                adjacentSegments = [previousSegment || nextSegment];
+                availableDuration = adjacentSegments[0].remainder;
+            }
+
+            if (availableDuration < (secondsPerBlock - segment.duration)) {
+                // Merge with largest adjacent segment.
+                var targetSegment;
+                if (previousSegment && nextSegment)
+                    targetSegment = previousSegment.duration > nextSegment.duration ? previousSegment : nextSegment;
+                else
+                    targetSegment = previousSegment || nextSegment;
+
+                targetSegment.duration += segment.duration;
+                updateDurationRemainder(targetSegment);
+                continue;
+            }
+
+            adjacentSegments.forEach(function(adjacentSegment) {
+                if (segment.duration >= secondsPerBlock)
+                    return;
+                var remainder = Math.min(secondsPerBlock - segment.duration, adjacentSegment.remainder);
+                segment.duration += remainder;
+                adjacentSegment.remainder -= remainder;
+            });
+        }
+
+        // Round visible segments to the nearest block, and compute the rounded frame duration.
+        var frameDuration = 0;
+        segments = segments.filter(function(segment) {
+            if (segment.duration < secondsPerBlock)
+                return false;
+            segment.duration = Math.roundTo(segment.duration, secondsPerBlock);
+            frameDuration += segment.duration;
+            return true;
+        });
+
+        return {frameDuration, segments};
+    }
+
+    _updateChildElements(graphDataSource)
+    {
+        this._element.removeChildren();
+
+        console.assert(this._record);
+        if (!this._record)
+            return;
+
+        if (graphDataSource.graphHeightSeconds === 0)
+            return;
+
+        var frameElement = document.createElement("div");
+        frameElement.classList.add("frame");
+        this._element.appendChild(frameElement);
+
+        // Display data must be recalculated when the overview graph's vertical axis changes.
+        if (this._record.__displayData && this._record.__displayData.graphHeightSeconds !== graphDataSource.graphHeightSeconds)
+            this._record.__displayData = null;
+
+        if (!this._record.__displayData) {
+            this._record.__displayData = this._calculateFrameDisplayData(graphDataSource);
+            this._record.__displayData.graphHeightSeconds = graphDataSource.graphHeightSeconds;
+        }
+
+        var frameHeight = this._record.__displayData.frameDuration / graphDataSource.graphHeightSeconds;
+        if (frameHeight >= 0.95)
+            this._element.classList.add("tall");
+        else
+            this._element.classList.remove("tall");
+
+        this._updateElementPosition(frameElement, frameHeight, "height");
+
+        for (var segment of this._record.__displayData.segments) {
+            var element = document.createElement("div");
+            this._updateElementPosition(element, segment.duration / this._record.__displayData.frameDuration, "height");
+            element.classList.add("duration", segment.taskType);
+            frameElement.insertBefore(element, frameElement.firstChild);
+        }
+    }
+
+    _updateElementPosition(element, newPosition, property)
+    {
+        newPosition *= 100;
+        newPosition = newPosition.toFixed(2);
+
+        var currentPosition = parseFloat(element.style[property]).toFixed(2);
+        if (currentPosition !== newPosition)
+            element.style[property] = newPosition + "%";
+    }
+};
+
+WebInspector.TimelineRecordFrame.MinimumHeightPixels = 3;
+WebInspector.TimelineRecordFrame.MaximumWidthPixels = 14;
+WebInspector.TimelineRecordFrame.MinimumWidthPixels = 4;
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
new file mode 100644
index 000000000..b97825e15
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecordTreeElement = class TimelineRecordTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(timelineRecord, subtitleNameStyle, includeDetailsInMainTitle, sourceCodeLocation, representedObject)
+    {
+        console.assert(timelineRecord);
+
+        sourceCodeLocation = sourceCodeLocation || timelineRecord.sourceCodeLocation || null;
+
+        let alternateSubtitle = null;
+        if (includeDetailsInMainTitle && timelineRecord.type === WebInspector.TimelineRecord.Type.Script && timelineRecord.eventType === WebInspector.ScriptTimelineRecord.EventType.TimerInstalled) {
+            let timeoutString = Number.secondsToString(timelineRecord.details.timeout / 1000);
+            alternateSubtitle = document.createElement("span");
+            alternateSubtitle.classList.add("alternate-subtitle");
+            if (timelineRecord.details.repeating)
+                alternateSubtitle.textContent = WebInspector.UIString("%s interval").format(timeoutString);
+            else
+                alternateSubtitle.textContent = WebInspector.UIString("%s delay").format(timeoutString);
+        }
+
+        let subtitle = null;
+        if (sourceCodeLocation) {
+            subtitle = document.createElement("span");
+
+            if (subtitleNameStyle !== WebInspector.SourceCodeLocation.NameStyle.None)
+                sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, subtitleNameStyle);
+            else
+                sourceCodeLocation.populateLiveDisplayLocationString(subtitle, "textContent", null, WebInspector.SourceCodeLocation.NameStyle.None, WebInspector.UIString("line "));
+        }
+
+        let iconStyleClass = WebInspector.TimelineTabContentView.iconClassNameForRecord(timelineRecord);
+        let title = WebInspector.TimelineTabContentView.displayNameForRecord(timelineRecord);
+
+        super([iconStyleClass], title, subtitle, representedObject || timelineRecord, false);
+
+        this._record = timelineRecord;
+        this._sourceCodeLocation = sourceCodeLocation;
+
+        if (this._sourceCodeLocation)
+            this.tooltipHandledSeparately = true;
+
+        if (alternateSubtitle)
+            this.titlesElement.appendChild(alternateSubtitle);
+    }
+
+    // Public
+
+    get record()
+    {
+        return this._record;
+    }
+
+    get filterableData()
+    {
+        var url = this._sourceCodeLocation ? this._sourceCodeLocation.sourceCode.url : "";
+        return {text: [this.mainTitle, url || "", this._record.details || ""]};
+    }
+
+    get sourceCodeLocation()
+    {
+        return this._sourceCodeLocation;
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        console.assert(this.element);
+
+        if (!this.tooltipHandledSeparately)
+            return;
+
+        var tooltipPrefix = this.mainTitle + "\n";
+        this._sourceCodeLocation.populateLiveDisplayLocationTooltip(this.element, tooltipPrefix);
+    }
+};
+
+WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass = "style-record";
+WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass = "layout-record";
+WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass = "paint-record";
+WebInspector.TimelineRecordTreeElement.CompositeRecordIconStyleClass = "composite-record";
+WebInspector.TimelineRecordTreeElement.RenderingFrameRecordIconStyleClass = "rendering-frame-record";
+WebInspector.TimelineRecordTreeElement.APIRecordIconStyleClass = "api-record";
+WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass = "evaluated-record";
+WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass = "event-record";
+WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass = "timer-record";
+WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass = "animation-record";
+WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass = "probe-record";
+WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass = "console-profile-record";
+WebInspector.TimelineRecordTreeElement.GarbageCollectionIconStyleClass = "garbage-collection-profile-record";
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
new file mode 100644
index 000000000..b395b4c7e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.css
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.content-view.timeline-recording > .timeline-overview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.content-view.timeline-recording > .content-view-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+}
+
+.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid td {
+    height: 16px;
+    line-height: 16px;
+}
+
+.content-view.timeline-recording > .content-view-container > .timeline-view > .data-grid table.data {
+    background-image: linear-gradient(to bottom, white, white 50%, hsl(0, 0%, 95%) 50%, hsl(0, 0%, 95%));
+    background-size: 100% 40px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js
new file mode 100644
index 000000000..cfaba58c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js
@@ -0,0 +1,683 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 University of Washington.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRecordingContentView = class TimelineRecordingContentView extends WebInspector.ContentView
+{
+    constructor(recording, extraArguments)
+    {
+        console.assert(extraArguments);
+        console.assert(extraArguments.timelineSidebarPanel instanceof WebInspector.TimelineSidebarPanel);
+
+        super(recording);
+
+        this._recording = recording;
+        this._timelineSidebarPanel = extraArguments.timelineSidebarPanel;
+
+        this.element.classList.add("timeline-recording");
+
+        this._timelineOverview = new WebInspector.TimelineOverview(this._recording);
+        this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
+        this._timelineOverview.addEventListener(WebInspector.TimelineOverview.Event.RecordSelected, this._recordSelected, this);
+        this.addSubview(this._timelineOverview);
+
+        this._contentViewContainer = new WebInspector.ContentViewContainer;
+        this._contentViewContainer.addEventListener(WebInspector.ContentViewContainer.Event.CurrentContentViewDidChange, this._currentContentViewDidChange, this);
+        this.addSubview(this._contentViewContainer);
+
+        this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), "Images/NavigationItemTrash.svg", 15, 15);
+        this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
+
+        this._overviewTimelineView = new WebInspector.OverviewTimelineView(recording, {timelineSidebarPanel: this._timelineSidebarPanel});
+        this._overviewTimelineView.secondsPerPixel = this._timelineOverview.secondsPerPixel;
+
+        this._timelineViewMap = new Map;
+        this._pathComponentMap = new Map;
+
+        this._updating = false;
+        this._currentTime = NaN;
+        this._lastUpdateTimestamp = NaN;
+        this._startTimeNeedsReset = true;
+        this._renderingFrameTimeline = null;
+
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentAdded, this._instrumentAdded, this);
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentRemoved, this._instrumentRemoved, this);
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
+        this._recording.addEventListener(WebInspector.TimelineRecording.Event.Unloaded, this._recordingUnloaded, this);
+
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
+
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerPaused, this);
+        WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerResumed, this);
+
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SelectionPathComponentsDidChange, this._contentViewSelectionPathComponentDidChange, this);
+        WebInspector.ContentView.addEventListener(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange, this._contentViewSupplementalRepresentedObjectsDidChange, this);
+
+        for (let instrument of this._recording.instruments)
+            this._instrumentAdded(instrument);
+
+        this.showOverviewTimelineView();
+    }
+
+    // Public
+
+    showOverviewTimelineView()
+    {
+        this._contentViewContainer.showContentView(this._overviewTimelineView);
+    }
+
+    showTimelineViewForTimeline(timeline)
+    {
+        console.assert(timeline instanceof WebInspector.Timeline, timeline);
+        console.assert(this._timelineViewMap.has(timeline), timeline);
+        if (!this._timelineViewMap.has(timeline))
+            return;
+
+        this._contentViewContainer.showContentView(this._timelineViewMap.get(timeline));
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        // The layout of the overview and split content browser don't work well.
+        return false;
+    }
+
+    get selectionPathComponents()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+
+        var pathComponents = this._contentViewContainer.currentContentView.selectionPathComponents || [];
+        var representedObject = this._contentViewContainer.currentContentView.representedObject;
+        if (representedObject instanceof WebInspector.Timeline)
+            pathComponents.unshift(this._pathComponentMap.get(representedObject));
+        return pathComponents;
+    }
+
+    get supplementalRepresentedObjects()
+    {
+        if (!this._contentViewContainer.currentContentView)
+            return [];
+        return this._contentViewContainer.currentContentView.supplementalRepresentedObjects;
+    }
+
+    get navigationItems()
+    {
+        return [this._clearTimelineNavigationItem];
+    }
+
+    get handleCopyEvent()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && typeof currentContentView.handleCopyEvent === "function" ? currentContentView.handleCopyEvent.bind(currentContentView) : null;
+    }
+
+    get supportsSave()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && currentContentView.supportsSave;
+    }
+
+    get saveData()
+    {
+        var currentContentView = this._contentViewContainer.currentContentView;
+        return currentContentView && currentContentView.saveData || null;
+    }
+
+    get currentTimelineView()
+    {
+        var contentView = this._contentViewContainer.currentContentView;
+        return (contentView instanceof WebInspector.TimelineView) ? contentView : null;
+    }
+
+    get timelineOverviewHeight()
+    {
+        return this._timelineOverview.height;
+    }
+
+    shown()
+    {
+        this._timelineOverview.shown();
+        this._contentViewContainer.shown();
+        this._clearTimelineNavigationItem.enabled = !this._recording.readonly && !isNaN(this._recording.startTime);
+
+        this._currentContentViewDidChange();
+
+        if (!this._updating && WebInspector.timelineManager.activeRecording === this._recording && WebInspector.timelineManager.isCapturing())
+            this._startUpdatingCurrentTime(this._currentTime);
+    }
+
+    hidden()
+    {
+        this._timelineOverview.hidden();
+        this._contentViewContainer.hidden();
+
+        if (this._updating)
+            this._stopUpdatingCurrentTime();
+    }
+
+    closed()
+    {
+        this._contentViewContainer.closeAllContentViews();
+
+        this._recording.removeEventListener(null, null, this);
+
+        WebInspector.timelineManager.removeEventListener(null, null, this);
+        WebInspector.debuggerManager.removeEventListener(null, null, this);
+        WebInspector.ContentView.removeEventListener(null, null, this);
+    }
+
+    canGoBack()
+    {
+        return this._contentViewContainer.canGoBack();
+    }
+
+    canGoForward()
+    {
+        return this._contentViewContainer.canGoForward();
+    }
+
+    goBack()
+    {
+        this._contentViewContainer.goBack();
+    }
+
+    goForward()
+    {
+        this._contentViewContainer.goForward();
+    }
+
+    saveToCookie(cookie)
+    {
+        cookie.type = WebInspector.ContentViewCookieType.Timelines;
+
+        var currentContentView = this._contentViewContainer.currentContentView;
+        if (!currentContentView || currentContentView === this._overviewTimelineView)
+            cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue;
+        else if (currentContentView.representedObject instanceof WebInspector.Timeline)
+            cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey] = this.currentTimelineView.representedObject.type;
+    }
+
+    restoreFromCookie(cookie)
+    {
+        var timelineType = cookie[WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey];
+        if (timelineType === WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue)
+            this.showOverviewTimelineView();
+        else
+            this.showTimelineViewForTimeline(this.representedObject.timelines.get(timelineType));
+    }
+
+    filterDidChange()
+    {
+        if (!this.currentTimelineView)
+            return;
+
+        this.currentTimelineView.filterDidChange();
+    }
+
+    recordWasFiltered(record, filtered)
+    {
+        if (!this.currentTimelineView)
+            return;
+
+        this._timelineOverview.recordWasFiltered(this.currentTimelineView.representedObject, record, filtered);
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement)
+    {
+        if (this.currentTimelineView && !this.currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
+            return false;
+
+        let startTime = this._timelineOverview.selectionStartTime;
+        let endTime = startTime + this._timelineOverview.selectionDuration;
+        let currentTime = this._currentTime || this._recording.startTime;
+
+        if (this._timelineOverview.viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+            console.assert(this._renderingFrameTimeline);
+
+            if (this._renderingFrameTimeline && this._renderingFrameTimeline.records.length) {
+                let records = this._renderingFrameTimeline.records;
+                let startIndex = this._timelineOverview.timelineRuler.snapInterval ? startTime : Math.floor(startTime);
+                if (startIndex >= records.length)
+                    return false;
+
+                let endIndex = this._timelineOverview.timelineRuler.snapInterval ? endTime - 1: Math.floor(endTime);
+                endIndex = Math.min(endIndex, records.length - 1);
+                console.assert(startIndex <= endIndex, startIndex);
+
+                startTime = records[startIndex].startTime;
+                endTime = records[endIndex].endTime;
+            }
+        }
+
+        function checkTimeBounds(itemStartTime, itemEndTime)
+        {
+            itemStartTime = itemStartTime || currentTime;
+            itemEndTime = itemEndTime || currentTime;
+
+            return startTime <= itemEndTime && itemStartTime <= endTime;
+        }
+
+        if (treeElement instanceof WebInspector.ResourceTreeElement) {
+            var resource = treeElement.resource;
+            return checkTimeBounds(resource.requestSentTimestamp, resource.finishedOrFailedTimestamp);
+        }
+
+        if (treeElement instanceof WebInspector.SourceCodeTimelineTreeElement) {
+            var sourceCodeTimeline = treeElement.sourceCodeTimeline;
+
+            // Do a quick check of the timeline bounds before we check each record.
+            if (!checkTimeBounds(sourceCodeTimeline.startTime, sourceCodeTimeline.endTime))
+                return false;
+
+            for (var record of sourceCodeTimeline.records) {
+                if (checkTimeBounds(record.startTime, record.endTime))
+                    return true;
+            }
+
+            return false;
+        }
+
+        if (treeElement instanceof WebInspector.ProfileNodeTreeElement) {
+            var profileNode = treeElement.profileNode;
+            if (checkTimeBounds(profileNode.startTime, profileNode.endTime))
+                return true;
+
+            return false;
+        }
+
+        if (treeElement instanceof WebInspector.TimelineRecordTreeElement) {
+            var record = treeElement.record;
+            return checkTimeBounds(record.startTime, record.endTime);
+        }
+
+        console.error("Unknown TreeElement, can't filter by time.");
+        return true;
+    }
+
+    // Private
+
+    _currentContentViewDidChange(event)
+    {
+        let newViewMode;
+        let timelineView = this.currentTimelineView;
+        if (timelineView && timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            newViewMode = WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+        else
+            newViewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+
+        this._timelineOverview.viewMode = newViewMode;
+
+        if (timelineView) {
+            this._timelineSidebarPanel.contentTreeOutline = timelineView.navigationSidebarTreeOutline;
+            this._timelineSidebarPanel.contentTreeOutlineLabel = timelineView.navigationSidebarTreeOutlineLabel;
+            this._timelineSidebarPanel.contentTreeOutlineScopeBar = timelineView.navigationSidebarTreeOutlineScopeBar;
+
+            timelineView.startTime = this._timelineOverview.selectionStartTime;
+            timelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
+            timelineView.currentTime = this._currentTime;
+        }
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.NavigationItemsDidChange);
+    }
+
+    _pathComponentSelected(event)
+    {
+        this._timelineSidebarPanel.showTimelineViewForTimeline(event.data.pathComponent.representedObject);
+    }
+
+    _contentViewSelectionPathComponentDidChange(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+
+        if (this.currentTimelineView === this._overviewTimelineView)
+            return;
+
+        var recordPathComponent = this.selectionPathComponents.find(function(element) { return element.representedObject instanceof WebInspector.TimelineRecord; });
+        var record = recordPathComponent ? recordPathComponent.representedObject : null;
+        this._timelineOverview.selectRecord(event.target.representedObject, record);
+    }
+
+    _contentViewSupplementalRepresentedObjectsDidChange(event)
+    {
+        if (event.target !== this._contentViewContainer.currentContentView)
+            return;
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SupplementalRepresentedObjectsDidChange);
+    }
+
+    _update(timestamp)
+    {
+        if (this._waitingToResetCurrentTime) {
+            requestAnimationFrame(this._updateCallback);
+            return;
+        }
+
+        var startTime = this._recording.startTime;
+        var currentTime = this._currentTime || startTime;
+        var endTime = this._recording.endTime;
+        var timespanSinceLastUpdate = (timestamp - this._lastUpdateTimestamp) / 1000 || 0;
+
+        currentTime += timespanSinceLastUpdate;
+
+        this._updateTimes(startTime, currentTime, endTime);
+
+        // Only stop updating if the current time is greater than the end time, or the end time is NaN.
+        // The recording end time will be NaN if no records were added.
+        if (!this._updating && (currentTime >= endTime || isNaN(endTime))) {
+            if (this.visible)
+                this._lastUpdateTimestamp = NaN;
+            return;
+        }
+
+        this._lastUpdateTimestamp = timestamp;
+
+        requestAnimationFrame(this._updateCallback);
+    }
+
+    _updateTimes(startTime, currentTime, endTime)
+    {
+        if (this._startTimeNeedsReset && !isNaN(startTime)) {
+            this._timelineOverview.startTime = startTime;
+            this._overviewTimelineView.zeroTime = startTime;
+            for (var timelineView of this._timelineViewMap.values())
+                timelineView.zeroTime = startTime;
+
+            this._startTimeNeedsReset = false;
+        }
+
+        this._timelineOverview.endTime = Math.max(endTime, currentTime);
+
+        this._currentTime = currentTime;
+        this._timelineOverview.currentTime = currentTime;
+        if (this.currentTimelineView)
+            this.currentTimelineView.currentTime = currentTime;
+
+        this._timelineSidebarPanel.updateFilter();
+
+        // Force a layout now since we are already in an animation frame and don't need to delay it until the next.
+        this._timelineOverview.updateLayoutIfNeeded();
+        if (this.currentTimelineView)
+            this.currentTimelineView.updateLayoutIfNeeded();
+    }
+
+    _startUpdatingCurrentTime(startTime)
+    {
+        console.assert(!this._updating);
+        if (this._updating)
+            return;
+
+        if (typeof startTime === "number")
+            this._currentTime = startTime;
+        else if (!isNaN(this._currentTime)) {
+            // This happens when you stop and later restart recording.
+            // COMPATIBILITY (iOS 9): Timeline.recordingStarted events did not include a timestamp.
+            // We likely need to jump into the future to a better current time which we can
+            // ascertained from a new incoming timeline record, so we wait for a Timeline to update.
+            console.assert(!this._waitingToResetCurrentTime);
+            this._waitingToResetCurrentTime = true;
+            this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+        }
+
+        this._updating = true;
+
+        if (!this._updateCallback)
+            this._updateCallback = this._update.bind(this);
+
+        requestAnimationFrame(this._updateCallback);
+    }
+
+    _stopUpdatingCurrentTime()
+    {
+        console.assert(this._updating);
+        this._updating = false;
+
+        if (this._waitingToResetCurrentTime) {
+            // Did not get any event while waiting for the current time, but we should stop waiting.
+            this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+            this._waitingToResetCurrentTime = false;
+        }
+    }
+
+    _capturingStarted(event)
+    {
+        if (!this._updating)
+            this._startUpdatingCurrentTime(event.data.startTime);
+        this._clearTimelineNavigationItem.enabled = !this._recording.readonly;
+    }
+
+    _capturingStopped(event)
+    {
+        if (this._updating)
+            this._stopUpdatingCurrentTime();
+    }
+
+    _debuggerPaused(event)
+    {
+        if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Replaying)
+            return;
+
+        if (this._updating)
+            this._stopUpdatingCurrentTime();
+    }
+
+    _debuggerResumed(event)
+    {
+        if (WebInspector.replayManager.sessionState === WebInspector.ReplayManager.SessionState.Replaying)
+            return;
+
+        if (!this._updating)
+            this._startUpdatingCurrentTime();
+    }
+
+    _recordingTimesUpdated(event)
+    {
+        if (!this._waitingToResetCurrentTime)
+            return;
+
+        // COMPATIBILITY (iOS 9): Timeline.recordingStarted events did not include a new startTime.
+        // Make the current time be the start time of the last added record. This is the best way
+        // currently to jump to the right period of time after recording starts.
+
+        for (var timeline of this._recording.timelines.values()) {
+            var lastRecord = timeline.records.lastValue;
+            if (!lastRecord)
+                continue;
+            this._currentTime = Math.max(this._currentTime, lastRecord.startTime);
+        }
+
+        this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+        this._waitingToResetCurrentTime = false;
+    }
+
+    _clearTimeline(event)
+    {
+        if (WebInspector.timelineManager.activeRecording === this._recording && WebInspector.timelineManager.isCapturing())
+            WebInspector.timelineManager.stopCapturing();
+
+        this._recording.reset();
+    }
+
+    _updateTimelineOverviewHeight()
+    {
+        const rulerHeight = 29;
+        
+        let styleValue = (rulerHeight + this.timelineOverviewHeight) + "px";
+        this._timelineOverview.element.style.height = styleValue;
+        this._contentViewContainer.element.style.top = styleValue;
+    }
+
+    _instrumentAdded(instrumentOrEvent)
+    {
+        let instrument = instrumentOrEvent instanceof WebInspector.Instrument ? instrumentOrEvent : instrumentOrEvent.data.instrument;
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+
+        let timeline = this._recording.timelineForInstrument(instrument);
+        console.assert(!this._timelineViewMap.has(timeline), timeline);
+
+        this._timelineViewMap.set(timeline, WebInspector.ContentView.createFromRepresentedObject(timeline, {timelineSidebarPanel: this._timelineSidebarPanel}));
+        if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            this._renderingFrameTimeline = timeline;
+
+        let displayName = WebInspector.TimelineTabContentView.displayNameForTimeline(timeline);
+        let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(timeline);
+        let pathComponent = new WebInspector.HierarchicalPathComponent(displayName, iconClassName, timeline);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this._pathComponentSelected, this);
+        this._pathComponentMap.set(timeline, pathComponent);
+
+        this._timelineCountChanged();
+    }
+
+    _instrumentRemoved(event)
+    {
+        let instrument = event.data.instrument;
+        console.assert(instrument instanceof WebInspector.Instrument);
+
+        let timeline = this._recording.timelineForInstrument(instrument);
+        console.assert(this._timelineViewMap.has(timeline), timeline);
+
+        let timelineView = this._timelineViewMap.take(timeline);
+        if (this.currentTimelineView === timelineView)
+            this.showOverviewTimelineView();
+        if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            this._renderingFrameTimeline = null;
+
+        this._pathComponentMap.delete(timeline);
+
+        this._timelineCountChanged();
+    }
+
+    _timelineCountChanged()
+    {
+        var previousPathComponent = null;
+        for (var pathComponent of this._pathComponentMap.values()) {
+            if (previousPathComponent) {
+                previousPathComponent.nextSibling = pathComponent;
+                pathComponent.previousSibling = previousPathComponent;
+            }
+
+            previousPathComponent = pathComponent;
+        }
+
+        this._updateTimelineOverviewHeight();
+    }
+
+    _recordingReset(event)
+    {
+        this._currentTime = NaN;
+
+        if (!this._updating) {
+            // Force the time ruler and views to reset to 0.
+            this._startTimeNeedsReset = true;
+            this._updateTimes(0, 0, 0);
+        }
+
+        this._lastUpdateTimestamp = NaN;
+        this._startTimeNeedsReset = true;
+
+        this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+        this._waitingToResetCurrentTime = false;
+
+        this._timelineOverview.reset();
+        this._overviewTimelineView.reset();
+        for (var timelineView of this._timelineViewMap.values())
+            timelineView.reset();
+        this._clearTimelineNavigationItem.enabled = false;
+    }
+
+    _recordingUnloaded(event)
+    {
+        console.assert(!this._updating);
+
+        WebInspector.timelineManager.removeEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
+        WebInspector.timelineManager.removeEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
+    }
+
+    _timeRangeSelectionChanged(event)
+    {
+        if (this.currentTimelineView) {
+            this.currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
+            this.currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
+
+            if (this.currentTimelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+                this._updateFrameSelection();
+        }
+
+        // Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
+        requestAnimationFrame(function() {
+            var selectedTreeElement = this.currentTimelineView && this.currentTimelineView.navigationSidebarTreeOutline ? this.currentTimelineView.navigationSidebarTreeOutline.selectedTreeElement : null;
+            var selectionWasHidden = selectedTreeElement && selectedTreeElement.hidden;
+
+            this._timelineSidebarPanel.updateFilter();
+
+            if (selectedTreeElement && selectedTreeElement.hidden !== selectionWasHidden)
+                this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+        }.bind(this));
+    }
+
+    _recordSelected(event)
+    {
+        var timelineView = this._timelineViewMap.get(event.data.timeline);
+        console.assert(timelineView === this.currentTimelineView, timelineView);
+        if (timelineView !== this.currentTimelineView)
+            return;
+
+        var selectedTreeElement = this.currentTimelineView.navigationSidebarTreeOutline.selectedTreeElement;
+        if (!event.data.record) {
+            if (selectedTreeElement)
+                selectedTreeElement.deselect();
+            return;
+        }
+
+        var treeElement = this.currentTimelineView.navigationSidebarTreeOutline.findTreeElement(event.data.record);
+        console.assert(treeElement, "Timeline view has no tree element for record selected in timeline overview.", timelineView, event.data.record);
+        if (!treeElement || treeElement.selected)
+            return;
+
+        // Don't select the record's tree element if one of it's children is already selected.
+        if (selectedTreeElement && selectedTreeElement.hasAncestor(treeElement))
+            return;
+
+        treeElement.revealAndSelect(false, false, false, true);
+    }
+
+    _updateFrameSelection()
+    {
+        console.assert(this._renderingFrameTimeline);
+        if (!this._renderingFrameTimeline)
+            return;
+
+        let startIndex = this._timelineOverview.selectionStartTime;
+        let endIndex = startIndex + this._timelineOverview.selectionDuration - 1;
+        this._timelineSidebarPanel.updateFrameSelection(startIndex, endIndex);
+    }
+};
+
+WebInspector.TimelineRecordingContentView.SelectedTimelineTypeCookieKey = "timeline-recording-content-view-selected-timeline-type";
+WebInspector.TimelineRecordingContentView.OverviewTimelineViewCookieValue = "timeline-recording-content-view-overview-timeline-view";
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
new file mode 100644
index 000000000..31605b4a2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
@@ -0,0 +1,222 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-ruler {
+    position: relative;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.timeline-ruler.allows-time-range-selection {
+    pointer-events: all;
+}
+
+.timeline-ruler.resizing-selection,
+.timeline-ruler.resizing-selection > .selection-drag {
+    cursor: col-resize;
+}
+
+.timeline-ruler > * {
+    pointer-events: none;
+}
+
+.timeline-ruler > .header {
+    border-bottom: 1px solid var(--border-color);
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 29px;
+}
+
+.timeline-ruler > .header > .divider {
+    position: absolute;
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    transform: translateX(-1px);
+    background-image: linear-gradient(to bottom, hsla(0, 0%, 70%, 0), hsla(0, 0%, 70%, 2) 85%);
+}
+
+body.window-inactive .timeline-ruler > .header > .divider {
+    background-image: linear-gradient(to bottom, hsla(0, 0%, 85%, 0), hsla(0, 0%, 85%, 1) 85%);
+}
+
+.timeline-ruler > .header > .divider > .label {
+    position: absolute;
+    top: 8px;
+    right: 5px;
+    font-size: 9px;
+    color: hsl(0, 0%, 50%);
+    white-space: nowrap;
+}
+
+.timeline-ruler > .markers {
+    position: absolute;
+    top: 22px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+}
+
+.timeline-ruler > .markers > .divider {
+    position: absolute;
+    width: 1px;
+    top: 1px;
+    bottom: 0;
+    transform: translateX(-1px);
+    background-color: hsla(0, 0%, 0%, 0.05);
+}
+
+.timeline-ruler > .markers > .marker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    transform: translateX(-1px);
+
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: hsla(0, 0%, 50%, 0.5);
+
+    pointer-events: all;
+}
+
+/* Larger tooltip area */
+.timeline-ruler > .markers > .marker {
+    z-index: 20;
+    width: 3px;
+}
+.timeline-ruler > .markers > .marker::before {
+    width: 3px;
+    content: "";
+    position: absolute;
+    left: -3px;
+    top: 0;
+    bottom: 0;
+}
+
+.timeline-ruler > .markers > .marker.current-time {
+    border-left-color: red;
+}
+
+.timeline-ruler > .markers > .marker.current-time::before {
+    position: absolute;
+    top: -5px;
+    left: -5px;
+
+    width: 9px;
+    height: 9px;
+    border-radius: 5px;
+
+    background-color: red;
+
+    content: "";
+}
+
+.timeline-ruler > .markers > .marker.load-event {
+    border-left-color: hsl(0, 100%, 50%);
+    opacity: 0.25;
+}
+
+.timeline-ruler > .markers > .marker.dom-content-event {
+    border-left-color: hsl(240, 100%, 50%);
+    opacity: 0.25;
+}
+
+.timeline-ruler > .markers > .marker.timestamp {
+    border-left-color: hsl(119, 100%, 21%);
+    opacity: 0.25;
+}
+
+.timeline-ruler > .selection-drag {
+    position: absolute;
+    top: 0;
+    height: 29px;
+    cursor: -webkit-grab;
+    pointer-events: all;
+}
+
+.timeline-ruler > .selection-drag:active {
+    cursor: -webkit-grabbing;
+}
+
+.timeline-ruler > .selection-handle {
+    position: absolute;
+    top: 0;
+    width: 8px;
+    height: 28px;
+    border-radius: 5px;
+    background-color: hsl(0, 0%, 64%);
+    border: 1px solid white;
+    cursor: col-resize;
+    pointer-events: all;
+    z-index: 15;
+}
+
+.timeline-ruler > .selection-handle.clamped {
+    border-color: hsl(0, 0%, 64%);
+    background-color: white;
+}
+
+.timeline-ruler > .selection-handle:hover,
+.timeline-ruler > .selection-handle:active {
+    background-color: hsl(0, 0%, 50%);
+    border-color: white;
+}
+
+.timeline-ruler.both-handles-clamped > .selection-handle {
+    z-index: 14;
+}
+
+.timeline-ruler > .selection-handle.clamped.hidden {
+    display: none;
+}
+
+.timeline-ruler > .selection-handle.left {
+    transform: translateX(-4px);
+}
+
+.timeline-ruler > .selection-handle.right {
+    transform: translateX(4px);
+}
+
+.timeline-ruler > .shaded-area {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: hsla(0, 0%, 0%, 0.1);
+    z-index: 15;
+}
+
+.timeline-ruler > .shaded-area.left {
+    left: 0;
+}
+
+.timeline-ruler > .shaded-area.right {
+    right: 0;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js
new file mode 100644
index 000000000..28178c6de
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.js
@@ -0,0 +1,867 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineRuler = class TimelineRuler extends WebInspector.View
+{
+    constructor()
+    {
+        super();
+
+        this.element.classList.add("timeline-ruler");
+
+        this._headerElement = document.createElement("div");
+        this._headerElement.classList.add("header");
+        this.element.appendChild(this._headerElement);
+
+        this._markersElement = document.createElement("div");
+        this._markersElement.classList.add("markers");
+        this.element.appendChild(this._markersElement);
+
+        this._zeroTime = 0;
+        this._startTime = 0;
+        this._endTime = 0;
+        this._duration = NaN;
+        this._secondsPerPixel = 0;
+        this._selectionStartTime = 0;
+        this._selectionEndTime = Infinity;
+        this._endTimePinned = false;
+        this._snapInterval = 0;
+        this._allowsClippedLabels = false;
+        this._allowsTimeRangeSelection = false;
+        this._minimumSelectionDuration = 0.01;
+        this._formatLabelCallback = null;
+        this._timeRangeSelectionChanged = false;
+
+        this._markerElementMap = new Map;
+    }
+
+    // Public
+
+    get allowsClippedLabels()
+    {
+        return this._allowsClippedLabels;
+    }
+
+    set allowsClippedLabels(x)
+    {
+        x = !!x;
+
+        if (this._allowsClippedLabels === x)
+            return;
+
+        this._allowsClippedLabels = x;
+
+        this.needsLayout();
+    }
+
+    set formatLabelCallback(x)
+    {
+        console.assert(typeof x === "function" || !x, x);
+
+        x = x || null;
+
+        if (this._formatLabelCallback === x)
+            return;
+
+        this._formatLabelCallback = x;
+
+        this.needsLayout();
+    }
+
+    get allowsTimeRangeSelection()
+    {
+        return this._allowsTimeRangeSelection;
+    }
+
+    set allowsTimeRangeSelection(x)
+    {
+        x = !!x;
+
+        if (this._allowsTimeRangeSelection === x)
+            return;
+
+        this._allowsTimeRangeSelection = x;
+
+        if (x) {
+            this._mouseDownEventListener = this._handleMouseDown.bind(this);
+            this.element.addEventListener("mousedown", this._mouseDownEventListener);
+
+            this._leftShadedAreaElement = document.createElement("div");
+            this._leftShadedAreaElement.classList.add("shaded-area");
+            this._leftShadedAreaElement.classList.add("left");
+
+            this._rightShadedAreaElement = document.createElement("div");
+            this._rightShadedAreaElement.classList.add("shaded-area");
+            this._rightShadedAreaElement.classList.add("right");
+
+            this._leftSelectionHandleElement = document.createElement("div");
+            this._leftSelectionHandleElement.classList.add("selection-handle");
+            this._leftSelectionHandleElement.classList.add("left");
+            this._leftSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this));
+
+            this._rightSelectionHandleElement = document.createElement("div");
+            this._rightSelectionHandleElement.classList.add("selection-handle");
+            this._rightSelectionHandleElement.classList.add("right");
+            this._rightSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this));
+
+            this._selectionDragElement = document.createElement("div");
+            this._selectionDragElement.classList.add("selection-drag");
+
+            this._needsSelectionLayout();
+        } else {
+            this.element.removeEventListener("mousedown", this._mouseDownEventListener);
+            delete this._mouseDownEventListener;
+
+            this._leftShadedAreaElement.remove();
+            this._rightShadedAreaElement.remove();
+            this._leftSelectionHandleElement.remove();
+            this._rightSelectionHandleElement.remove();
+            this._selectionDragElement.remove();
+
+            delete this._leftShadedAreaElement;
+            delete this._rightShadedAreaElement;
+            delete this._leftSelectionHandleElement;
+            delete this._rightSelectionHandleElement;
+            delete this._selectionDragElement;
+        }
+    }
+
+    get minimumSelectionDuration()
+    {
+        return this._minimumSelectionDuration;
+    }
+
+    set minimumSelectionDuration(x)
+    {
+        this._minimumSelectionDuration = x;
+    }
+
+    get zeroTime()
+    {
+        return this._zeroTime;
+    }
+
+    set zeroTime(x)
+    {
+        x = x || 0;
+
+        if (this._zeroTime === x)
+            return;
+
+        this._zeroTime = x;
+
+        this.needsLayout();
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    set startTime(x)
+    {
+        x = x || 0;
+
+        if (this._startTime === x)
+            return;
+
+        this._startTime = x;
+
+        if (!isNaN(this._duration))
+            this._endTime = this._startTime + this._duration;
+
+        this.needsLayout();
+    }
+
+    get duration()
+    {
+        if (!isNaN(this._duration))
+            return this._duration;
+        return this.endTime - this.startTime;
+    }
+
+    get endTime()
+    {
+        if (!this._endTimePinned && this.layoutPending)
+            this._recalculate();
+        return this._endTime;
+    }
+
+    set endTime(x)
+    {
+        x = x || 0;
+
+        if (this._endTime === x)
+            return;
+
+        this._endTime = x;
+        this._endTimePinned = true;
+
+        this.needsLayout();
+    }
+
+    get secondsPerPixel()
+    {
+        if (this.layoutPending)
+            this._recalculate();
+        return this._secondsPerPixel;
+    }
+
+    set secondsPerPixel(x)
+    {
+        x = x || 0;
+
+        if (this._secondsPerPixel === x)
+            return;
+
+        this._secondsPerPixel = x;
+        this._endTimePinned = false;
+        this._currentSliceTime = 0;
+
+        this.needsLayout();
+    }
+
+    get snapInterval()
+    {
+        return this._snapInterval;
+    }
+
+    set snapInterval(x)
+    {
+        if (this._snapInterval === x)
+            return;
+
+        this._snapInterval = x;
+    }
+
+    get selectionStartTime()
+    {
+        return this._selectionStartTime;
+    }
+
+    set selectionStartTime(x)
+    {
+        x = this._snapValue(x) || 0;
+
+        if (this._selectionStartTime === x)
+            return;
+
+        this._selectionStartTime = x;
+        this._timeRangeSelectionChanged = true;
+
+        this._needsSelectionLayout();
+    }
+
+    get selectionEndTime()
+    {
+        return this._selectionEndTime;
+    }
+
+    set selectionEndTime(x)
+    {
+        x = this._snapValue(x) || 0;
+
+        if (this._selectionEndTime === x)
+            return;
+
+        this._selectionEndTime = x;
+        this._timeRangeSelectionChanged = true;
+
+        this._needsSelectionLayout();
+    }
+
+    addMarker(marker)
+    {
+        console.assert(marker instanceof WebInspector.TimelineMarker);
+
+        if (this._markerElementMap.has(marker))
+            return;
+
+        marker.addEventListener(WebInspector.TimelineMarker.Event.TimeChanged, this._timelineMarkerTimeChanged, this);
+
+        let markerTime = marker.time - this._startTime;
+        let markerElement = document.createElement("div");
+        markerElement.classList.add(marker.type, "marker");
+
+        switch (marker.type) {
+        case WebInspector.TimelineMarker.Type.LoadEvent:
+            markerElement.title = WebInspector.UIString("Load \u2014 %s").format(Number.secondsToString(markerTime));
+            break;
+        case WebInspector.TimelineMarker.Type.DOMContentEvent:
+            markerElement.title = WebInspector.UIString("DOM Content Loaded \u2014 %s").format(Number.secondsToString(markerTime));
+            break;
+        case WebInspector.TimelineMarker.Type.TimeStamp:
+            if (marker.details)
+                markerElement.title = WebInspector.UIString("%s \u2014 %s").format(marker.details, Number.secondsToString(markerTime));
+            else
+                markerElement.title = WebInspector.UIString("Timestamp \u2014 %s").format(Number.secondsToString(markerTime));
+            break;
+        }
+
+        this._markerElementMap.set(marker, markerElement);
+
+        this._needsMarkerLayout();
+    }
+
+    clearMarkers()
+    {
+        for (let markerElement of this._markerElementMap.values())
+            markerElement.remove();
+
+        this._markerElementMap.clear();
+    }
+
+    elementForMarker(marker)
+    {
+        return this._markerElementMap.get(marker) || null;
+    }
+
+    updateLayoutIfNeeded()
+    {
+        // If a layout is pending we can let the base class handle it and return, since that will update
+        // markers and the selection at the same time.
+        if (this.layoutPending) {
+            super.updateLayoutIfNeeded();
+            return;
+        }
+
+        let visibleWidth = this._recalculate();
+        if (visibleWidth <= 0)
+            return;
+
+        if (this._scheduledMarkerLayoutUpdateIdentifier)
+            this._updateMarkers(visibleWidth, this.duration);
+
+        if (this._scheduledSelectionLayoutUpdateIdentifier)
+            this._updateSelection(visibleWidth, this.duration);
+    }
+
+    needsLayout(layoutReason)
+    {
+        if (this.layoutPending)
+            return;
+
+        if (this._scheduledMarkerLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier);
+            this._scheduledMarkerLayoutUpdateIdentifier = undefined;
+        }
+
+        if (this._scheduledSelectionLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier);
+            this._scheduledSelectionLayoutUpdateIdentifier = undefined;
+        }
+
+        super.needsLayout(layoutReason);
+    }
+
+    // Protected
+
+    layout(layoutReason)
+    {
+        if (layoutReason === WebInspector.View.LayoutReason.Resize)
+            this._cachedClientWidth = this.element.clientWidth;
+
+        let visibleWidth = this._recalculate();
+        if (visibleWidth <= 0)
+            return;
+
+        let duration = this.duration;
+        let pixelsPerSecond = visibleWidth / duration;
+
+        // Calculate a divider count based on the maximum allowed divider density.
+        let dividerCount = Math.round(visibleWidth / WebInspector.TimelineRuler.MinimumDividerSpacing);
+        let sliceTime;
+        if (this._endTimePinned || !this._currentSliceTime) {
+            // Calculate the slice time based on the rough divider count and the time span.
+            sliceTime = duration / dividerCount;
+
+            // Snap the slice time to a nearest number (e.g. 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, etc.)
+            sliceTime = Math.pow(10, Math.ceil(Math.log(sliceTime) / Math.LN10));
+            if (sliceTime * pixelsPerSecond >= 5 * WebInspector.TimelineRuler.MinimumDividerSpacing)
+                sliceTime = sliceTime / 5;
+            if (sliceTime * pixelsPerSecond >= 2 * WebInspector.TimelineRuler.MinimumDividerSpacing)
+                sliceTime = sliceTime / 2;
+
+            this._currentSliceTime = sliceTime;
+        } else {
+            // Reuse the last slice time since the time duration does not scale to fit when the end time isn't pinned.
+            sliceTime = this._currentSliceTime;
+        }
+
+        let firstDividerTime = (Math.ceil((this._startTime - this._zeroTime) / sliceTime) * sliceTime) + this._zeroTime;
+        let lastDividerTime = this._endTime;
+
+        // Calculate the divider count now based on the final slice time.
+        dividerCount = Math.ceil((lastDividerTime - firstDividerTime) / sliceTime);
+
+        // Make an extra divider in case the last one is partially visible.
+        if (!this._endTimePinned)
+            ++dividerCount;
+
+        let dividerData = {
+            count: dividerCount,
+            firstTime: firstDividerTime,
+            lastTime: lastDividerTime,
+        };
+
+        if (Object.shallowEqual(dividerData, this._currentDividers)) {
+            this._updateMarkers(visibleWidth, duration);
+            this._updateSelection(visibleWidth, duration);
+            return;
+        }
+
+        this._currentDividers = dividerData;
+
+        let markerDividers = this._markersElement.querySelectorAll("." + WebInspector.TimelineRuler.DividerElementStyleClassName);
+        let dividerElement = this._headerElement.firstChild;
+
+        for (var i = 0; i <= dividerCount; ++i) {
+            if (!dividerElement) {
+                dividerElement = document.createElement("div");
+                dividerElement.className = WebInspector.TimelineRuler.DividerElementStyleClassName;
+                this._headerElement.appendChild(dividerElement);
+
+                let labelElement = document.createElement("div");
+                labelElement.className = WebInspector.TimelineRuler.DividerLabelElementStyleClassName;
+                dividerElement.appendChild(labelElement);
+            }
+
+            let markerDividerElement = markerDividers[i];
+            if (!markerDividerElement) {
+                markerDividerElement = document.createElement("div");
+                markerDividerElement.className = WebInspector.TimelineRuler.DividerElementStyleClassName;
+                this._markersElement.appendChild(markerDividerElement);
+            }
+
+            let dividerTime = firstDividerTime + (sliceTime * i);
+            let newLeftPosition = (dividerTime - this._startTime) / duration;
+
+            if (!this._allowsClippedLabels) {
+                // Don't allow dividers under 0% where they will be completely hidden.
+                if (newLeftPosition < 0)
+                    continue;
+
+                // When over 100% it is time to stop making/updating dividers.
+                if (newLeftPosition > 1)
+                    break;
+
+                // Don't allow the left-most divider spacing to be so tight it clips.
+                if ((newLeftPosition * visibleWidth) < WebInspector.TimelineRuler.MinimumLeftDividerSpacing)
+                    continue;
+            }
+
+            this._updatePositionOfElement(dividerElement, newLeftPosition, visibleWidth);
+            this._updatePositionOfElement(markerDividerElement, newLeftPosition, visibleWidth);
+
+            console.assert(dividerElement.firstChild.classList.contains(WebInspector.TimelineRuler.DividerLabelElementStyleClassName));
+
+            dividerElement.firstChild.textContent = isNaN(dividerTime) ? "" : this._formatDividerLabelText(dividerTime - this._zeroTime);
+            dividerElement = dividerElement.nextSibling;
+        }
+
+        // Remove extra dividers.
+        while (dividerElement) {
+            let nextDividerElement = dividerElement.nextSibling;
+            dividerElement.remove();
+            dividerElement = nextDividerElement;
+        }
+
+        for (; i < markerDividers.length; ++i)
+            markerDividers[i].remove();
+
+        this._updateMarkers(visibleWidth, duration);
+        this._updateSelection(visibleWidth, duration);
+    }
+
+    // Private
+
+    _needsMarkerLayout()
+    {
+        // If layout is scheduled, abort since markers will be updated when layout happens.
+        if (this.layoutPending)
+            return;
+
+        if (this._scheduledMarkerLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledMarkerLayoutUpdateIdentifier = requestAnimationFrame(() => {
+            this._scheduledMarkerLayoutUpdateIdentifier = undefined;
+
+            let visibleWidth = this._cachedClientWidth;
+            if (visibleWidth <= 0)
+                return;
+
+            this._updateMarkers(visibleWidth, this.duration);
+        });
+    }
+
+    _needsSelectionLayout()
+    {
+        if (!this._allowsTimeRangeSelection)
+            return;
+
+        // If layout is scheduled, abort since the selection will be updated when layout happens.
+        if (this.layoutPending)
+            return;
+
+        if (this._scheduledSelectionLayoutUpdateIdentifier)
+            return;
+
+        this._scheduledSelectionLayoutUpdateIdentifier = requestAnimationFrame(() => {
+            this._scheduledSelectionLayoutUpdateIdentifier = undefined;
+
+            let visibleWidth = this._cachedClientWidth;
+            if (visibleWidth <= 0)
+                return;
+
+            this._updateSelection(visibleWidth, this.duration);
+        });
+    }
+
+    _recalculate()
+    {
+        let visibleWidth = this._cachedClientWidth;
+        if (visibleWidth <= 0)
+            return 0;
+
+        let duration;
+        if (this._endTimePinned)
+            duration = this._endTime - this._startTime;
+        else
+            duration = visibleWidth * this._secondsPerPixel;
+
+        this._secondsPerPixel = duration / visibleWidth;
+
+        if (!this._endTimePinned)
+            this._endTime = this._startTime + (visibleWidth * this._secondsPerPixel);
+
+        return visibleWidth;
+    }
+
+    _updatePositionOfElement(element, newPosition, visibleWidth, property)
+    {
+        property = property || "left";
+
+        newPosition *= this._endTimePinned ? 100 : visibleWidth;
+        newPosition = newPosition.toFixed(2);
+
+        var currentPosition = parseFloat(element.style[property]).toFixed(2);
+        if (currentPosition !== newPosition)
+            element.style[property] = newPosition + (this._endTimePinned ? "%" : "px");
+    }
+
+    _updateMarkers(visibleWidth, duration)
+    {
+        if (this._scheduledMarkerLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier);
+            this._scheduledMarkerLayoutUpdateIdentifier = undefined;
+        }
+
+        for (let [marker, markerElement] of this._markerElementMap) {
+            let newLeftPosition = (marker.time - this._startTime) / duration;
+
+            this._updatePositionOfElement(markerElement, newLeftPosition, visibleWidth);
+
+            if (!markerElement.parentNode)
+                this._markersElement.appendChild(markerElement);
+        }
+    }
+
+    _updateSelection(visibleWidth, duration)
+    {
+        if (this._scheduledSelectionLayoutUpdateIdentifier) {
+            cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier);
+            this._scheduledSelectionLayoutUpdateIdentifier = undefined;
+        }
+
+        this.element.classList.toggle(WebInspector.TimelineRuler.AllowsTimeRangeSelectionStyleClassName, this._allowsTimeRangeSelection);
+
+        if (!this._allowsTimeRangeSelection)
+            return;
+
+        let startTimeClamped = this._selectionStartTime < this._startTime || this._selectionStartTime > this._endTime;
+        let endTimeClamped = this._selectionEndTime < this._startTime || this._selectionEndTime > this._endTime;
+
+        this.element.classList.toggle("both-handles-clamped", startTimeClamped && endTimeClamped);
+
+        let formattedStartTimeText = this._formatDividerLabelText(this._selectionStartTime);
+        let formattedEndTimeText = this._formatDividerLabelText(this._selectionEndTime);
+
+        let newLeftPosition = Number.constrain((this._selectionStartTime - this._startTime) / duration, 0, 1);
+        this._updatePositionOfElement(this._leftShadedAreaElement, newLeftPosition, visibleWidth, "width");
+        this._updatePositionOfElement(this._leftSelectionHandleElement, newLeftPosition, visibleWidth, "left");
+        this._updatePositionOfElement(this._selectionDragElement, newLeftPosition, visibleWidth, "left");
+
+        this._leftSelectionHandleElement.classList.toggle("clamped", startTimeClamped);
+        this._leftSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionStartTime < this._startTime);
+        this._leftSelectionHandleElement.title = formattedStartTimeText;
+
+        let newRightPosition = 1 - Number.constrain((this._selectionEndTime - this._startTime) / duration, 0, 1);
+        this._updatePositionOfElement(this._rightShadedAreaElement, newRightPosition, visibleWidth, "width");
+        this._updatePositionOfElement(this._rightSelectionHandleElement, newRightPosition, visibleWidth, "right");
+        this._updatePositionOfElement(this._selectionDragElement, newRightPosition, visibleWidth, "right");
+
+        this._rightSelectionHandleElement.classList.toggle("clamped", endTimeClamped);
+        this._rightSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionEndTime > this._endTime);
+        this._rightSelectionHandleElement.title = formattedEndTimeText;
+
+        if (!this._selectionDragElement.parentNode) {
+            this.element.appendChild(this._selectionDragElement);
+            this.element.appendChild(this._leftShadedAreaElement);
+            this.element.appendChild(this._leftSelectionHandleElement);
+            this.element.appendChild(this._rightShadedAreaElement);
+            this.element.appendChild(this._rightSelectionHandleElement);
+        }
+
+        this._dispatchTimeRangeSelectionChangedEvent();
+    }
+
+    _formatDividerLabelText(value)
+    {
+        if (this._formatLabelCallback)
+            return this._formatLabelCallback(value);
+
+        return Number.secondsToString(value, true);
+    }
+
+    _snapValue(value)
+    {
+        if (!value || !this.snapInterval)
+            return value;
+
+        return Math.round(value / this.snapInterval) * this.snapInterval;
+    }
+
+    _dispatchTimeRangeSelectionChangedEvent()
+    {
+        if (!this._timeRangeSelectionChanged)
+            return;
+
+        this._timeRangeSelectionChanged = false;
+
+        this.dispatchEventToListeners(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged);
+    }
+
+    _timelineMarkerTimeChanged()
+    {
+        this._needsMarkerLayout();
+    }
+
+    _handleMouseDown(event)
+    {
+        // Only handle left mouse clicks.
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        this._selectionIsMove = event.target === this._selectionDragElement;
+        this._rulerBoundingClientRect = this.element.getBoundingClientRect();
+
+        if (this._selectionIsMove) {
+            this._lastMousePosition = event.pageX;
+            var selectionDragElementRect = this._selectionDragElement.getBoundingClientRect();
+            this._moveSelectionMaximumLeftOffset = this._rulerBoundingClientRect.left + (event.pageX - selectionDragElementRect.left);
+            this._moveSelectionMaximumRightOffset = this._rulerBoundingClientRect.right - (selectionDragElementRect.right - event.pageX);
+        } else
+            this._mouseDownPosition = event.pageX - this._rulerBoundingClientRect.left;
+
+        this._mouseMoveEventListener = this._handleMouseMove.bind(this);
+        this._mouseUpEventListener = this._handleMouseUp.bind(this);
+
+        // Register these listeners on the document so we can track the mouse if it leaves the ruler.
+        document.addEventListener("mousemove", this._mouseMoveEventListener);
+        document.addEventListener("mouseup", this._mouseUpEventListener);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleMouseMove(event)
+    {
+        console.assert(event.button === 0);
+
+        let currentMousePosition;
+        if (this._selectionIsMove) {
+            currentMousePosition = Math.max(this._moveSelectionMaximumLeftOffset, Math.min(this._moveSelectionMaximumRightOffset, event.pageX));
+
+            let offsetTime = (currentMousePosition - this._lastMousePosition) * this.secondsPerPixel;
+            let selectionDuration = this.selectionEndTime - this.selectionStartTime;
+            let oldSelectionStartTime = this.selectionStartTime;
+
+            this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime + offsetTime, this.endTime - selectionDuration));
+            this.selectionEndTime = this.selectionStartTime + selectionDuration;
+
+            if (this.snapInterval) {
+                // When snapping we need to check the mouse position delta relative to the last snap, rather than the
+                // last mouse move. If a snap occurs we adjust for the amount the cursor drifted, so that the mouse
+                // position relative to the selection remains constant.
+                let snapOffset = this.selectionStartTime - oldSelectionStartTime;
+                if (!snapOffset)
+                    return;
+
+                let positionDrift = (offsetTime - snapOffset * this.snapInterval) / this.secondsPerPixel;
+                currentMousePosition -= positionDrift;
+            }
+
+            this._lastMousePosition = currentMousePosition;
+        } else {
+            currentMousePosition = event.pageX - this._rulerBoundingClientRect.left;
+
+            this.selectionStartTime = Math.max(this.startTime, this.startTime + (Math.min(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel));
+            this.selectionEndTime = Math.min(this.startTime + (Math.max(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel), this.endTime);
+
+            // Turn on col-resize cursor style once dragging begins, rather than on the initial mouse down.
+            this.element.classList.add(WebInspector.TimelineRuler.ResizingSelectionStyleClassName);
+        }
+
+        this._updateSelection(this._cachedClientWidth, this.duration);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleMouseUp(event)
+    {
+        console.assert(event.button === 0);
+
+        if (!this._selectionIsMove) {
+            this.element.classList.remove(WebInspector.TimelineRuler.ResizingSelectionStyleClassName);
+
+            if (this.selectionEndTime - this.selectionStartTime < this.minimumSelectionDuration) {
+                // The section is smaller than allowed, grow in the direction of the drag to meet the minumum.
+                var currentMousePosition = event.pageX - this._rulerBoundingClientRect.left;
+                if (currentMousePosition > this._mouseDownPosition) {
+                    this.selectionEndTime = Math.min(this.selectionStartTime + this.minimumSelectionDuration, this.endTime);
+                    this.selectionStartTime = this.selectionEndTime - this.minimumSelectionDuration;
+                } else {
+                    this.selectionStartTime = Math.max(this.startTime, this.selectionEndTime - this.minimumSelectionDuration);
+                    this.selectionEndTime = this.selectionStartTime + this.minimumSelectionDuration;
+                }
+            }
+        }
+
+        this._dispatchTimeRangeSelectionChangedEvent();
+
+        document.removeEventListener("mousemove", this._mouseMoveEventListener);
+        document.removeEventListener("mouseup", this._mouseUpEventListener);
+
+        delete this._mouseMovedEventListener;
+        delete this._mouseUpEventListener;
+        delete this._mouseDownPosition;
+        delete this._lastMousePosition;
+        delete this._selectionIsMove;
+        delete this._rulerBoundingClientRect;
+        delete this._moveSelectionMaximumLeftOffset;
+        delete this._moveSelectionMaximumRightOffset;
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleSelectionHandleMouseDown(event)
+    {
+        // Only handle left mouse clicks.
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        this._dragHandleIsStartTime = event.target === this._leftSelectionHandleElement;
+        this._mouseDownPosition = event.pageX - this.element.totalOffsetLeft;
+
+        this._selectionHandleMouseMoveEventListener = this._handleSelectionHandleMouseMove.bind(this);
+        this._selectionHandleMouseUpEventListener = this._handleSelectionHandleMouseUp.bind(this);
+
+        // Register these listeners on the document so we can track the mouse if it leaves the ruler.
+        document.addEventListener("mousemove", this._selectionHandleMouseMoveEventListener);
+        document.addEventListener("mouseup", this._selectionHandleMouseUpEventListener);
+
+        this.element.classList.add(WebInspector.TimelineRuler.ResizingSelectionStyleClassName);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleSelectionHandleMouseMove(event)
+    {
+        console.assert(event.button === 0);
+
+        let currentMousePosition = event.pageX - this.element.totalOffsetLeft;
+        let currentTime = this.startTime + (currentMousePosition * this.secondsPerPixel);
+        if (this.snapInterval)
+            currentTime = this._snapValue(currentTime);
+
+        if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+            // Resize the selection on both sides when the Option keys is held down.
+            if (this._dragHandleIsStartTime) {
+                let timeDifference = currentTime - this.selectionStartTime;
+                this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - this.minimumSelectionDuration));
+                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, this.selectionEndTime - timeDifference), this.endTime);
+            } else {
+                let timeDifference = currentTime - this.selectionEndTime;
+                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, currentTime), this.endTime);
+                this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime - timeDifference, this.selectionEndTime - this.minimumSelectionDuration));
+            }
+        } else {
+            // Resize the selection on side being dragged.
+            if (this._dragHandleIsStartTime)
+                this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - this.minimumSelectionDuration));
+            else
+                this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, currentTime), this.endTime);
+        }
+
+        this._updateSelection(this._cachedClientWidth, this.duration);
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    _handleSelectionHandleMouseUp(event)
+    {
+        console.assert(event.button === 0);
+
+        this.element.classList.remove(WebInspector.TimelineRuler.ResizingSelectionStyleClassName);
+
+        document.removeEventListener("mousemove", this._selectionHandleMouseMoveEventListener);
+        document.removeEventListener("mouseup", this._selectionHandleMouseUpEventListener);
+
+        delete this._selectionHandleMouseMoveEventListener;
+        delete this._selectionHandleMouseUpEventListener;
+        delete this._dragHandleIsStartTime;
+        delete this._mouseDownPosition;
+
+        event.preventDefault();
+        event.stopPropagation();
+    }
+};
+
+WebInspector.TimelineRuler.MinimumLeftDividerSpacing = 48;
+WebInspector.TimelineRuler.MinimumDividerSpacing = 64;
+
+WebInspector.TimelineRuler.AllowsTimeRangeSelectionStyleClassName = "allows-time-range-selection";
+WebInspector.TimelineRuler.ResizingSelectionStyleClassName = "resizing-selection";
+WebInspector.TimelineRuler.DividerElementStyleClassName = "divider";
+WebInspector.TimelineRuler.DividerLabelElementStyleClassName = "label";
+
+WebInspector.TimelineRuler.Event = {
+    TimeRangeSelectionChanged: "time-ruler-time-range-selection-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
new file mode 100644
index 000000000..00f9e32d0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css
@@ -0,0 +1,199 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop {
+    /* Workaround for background image clipping issue on non-retina machines. See http://webkit.org/b/147346. */
+    filter: brightness(100%);
+}
+
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop:hover {
+    filter: brightness(95%);
+}
+
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop:active {
+    filter: brightness(80%);
+}
+
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop * {
+    pointer-events: none;
+}
+
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.flexible-space {
+    justify-content: center;
+
+    line-height: 20px;
+    font-weight: bold;
+
+    color: hsl(0, 0%, 29%);
+    text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
+}
+
+.sidebar > .panel.navigation.timeline > .title-bar {
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    height: 29px;
+
+    border-bottom: 1px solid var(--border-color);
+    background-color: var(--panel-background-color);
+    color: hsl(0, 0%, 22%);
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    font-weight: bold;
+
+    padding: 4px 9px;
+
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar > .panel.navigation.timeline > .title-bar.timelines {
+    top: 29px;
+    padding: 8px 9px;
+}
+
+.sidebar > .panel.navigation.timeline > .navigation-bar-container {
+    position: absolute;
+    top: 29px;
+    left: 0;
+    right: 0;
+}
+
+.sidebar > .panel.navigation.timeline > .navigation-bar-container > .navigation-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    align-content: center;
+}
+
+.sidebar > .panel.navigation.timeline > .title-bar.timeline-events {
+    display: flex;
+    height: 23px;
+    border-top: 1px solid var(--border-color);
+}
+
+.sidebar > .panel.navigation.timeline > .title-bar.timeline-events > .title-bar-scope-bar {
+    position: absolute;
+    top: 2px;
+    right: 0;
+    font-weight: normal;
+}
+
+.sidebar > .panel.navigation.timeline > .title-bar.timeline-events > .title-bar-scope-bar > .default-item-selected > .multiple {
+    background-color: transparent;
+    color: black;
+}
+
+.sidebar > .panel.navigation.timeline > .title-bar.timeline-events > .title-bar-scope-bar > .default-item-selected > .multiple .arrows {
+    color: black;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content {
+    position: absolute;
+    top: 58px;
+    left: 0;
+    right: 0;
+
+    overflow: hidden;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content .close-button {
+    width: 14px;
+
+    visibility: hidden;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content li.item .icon {
+    width: 24px;
+    height: 24px;
+    margin-top: 5px;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content li.item.selected .close-button {
+    visibility: visible;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content li.item:not(.selected):nth-child(even) {
+    background-color: hsla(0, 0%, 0%, 0.03);
+    background-clip: padding-box;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content li.item:not(.selected):not(:first-child) {
+    border-top: 1px solid hsla(0, 0%, 0%, 0.09);
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content li.item.selected + li.item {
+    border-top-color: hsl(0, 0%, 83%);
+}
+
+body.window-inactive .sidebar > .panel.navigation.timeline > .timelines-content li.item.selected + li.item {
+    border-top-color: hsl(0, 0%, 83%);
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content :focus li.item.selected + li.item {
+    border-top-color: hsl(209, 100%, 49%);
+}
+
+.sidebar > .panel.navigation.timeline > .content,
+.sidebar > .panel.navigation.timeline > .empty-content-placeholder {
+    top: 189px;
+}
+
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing > .content {
+ /* This hides the scrollbar. The view shows a scrollbar, we don't need two. */
+    padding-right: 16px;
+    right: -16px;
+}
+
+.sidebar > .panel.navigation.timeline .item:not(:hover, .selected) .status .status-button,
+.sidebar > .panel.navigation.timeline .item:hover:not(.selected) .status .close.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.timeline:not(.timeline-recording-content-view-showing) .status .go-to-arrow.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.timeline.timeline-recording-content-view-showing .status .close.status-button {
+    display: none;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > div.header {
+    display: none;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > .content > .group > .row.chart {
+    height: 108px;
+}
+
+.sidebar > .panel.navigation.timeline > .timelines-content > .details-section > .content > .group > .row.chart > .chart-content > .chart {
+    width: 76px;
+    height: 76px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
new file mode 100644
index 000000000..0da0c43b4
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js
@@ -0,0 +1,1064 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineSidebarPanel = class TimelineSidebarPanel extends WebInspector.NavigationSidebarPanel
+{
+    constructor(contentBrowser)
+    {
+        super("timeline", WebInspector.UIString("Timelines"));
+
+        this.contentBrowser = contentBrowser;
+
+        this._timelineEventsTitleBarContainer = document.createElement("div");
+        this._timelineEventsTitleBarContainer.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
+        this._timelineEventsTitleBarContainer.classList.add(WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass);
+
+        this._timelineEventsTitleBarElement = document.createElement("div");
+        this._timelineEventsTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TitleBarTextStyleClass);
+        this._timelineEventsTitleBarContainer.appendChild(this._timelineEventsTitleBarElement);
+
+        this._timelineEventsTitleBarScopeContainer = document.createElement("div");
+        this._timelineEventsTitleBarScopeContainer.classList.add(WebInspector.TimelineSidebarPanel.TitleBarScopeBarStyleClass);
+        this._timelineEventsTitleBarContainer.appendChild(this._timelineEventsTitleBarScopeContainer);
+
+        this.element.insertBefore(this._timelineEventsTitleBarContainer, this.element.firstChild);
+
+        this.contentTreeOutlineLabel = "";
+
+        this._timelinesContentContainerElement = document.createElement("div");
+        this._timelinesContentContainerElement.classList.add(WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass);
+        this.element.insertBefore(this._timelinesContentContainerElement, this.element.firstChild);
+
+        this._displayedRecording = null;
+        this._displayedContentView = null;
+        this._viewMode = null;
+        this._previousSelectedTimelineType = null;
+
+        // Maintain an invisible tree outline containing tree elements for all recordings.
+        // The visible recording's tree element is selected when the content view changes.
+        this._recordingTreeElementMap = new Map;
+        this._recordingsTreeOutline = this.createContentTreeOutline(true, true);
+        this._recordingsTreeOutline.disclosureButtons = false;
+        this._recordingsTreeOutline.hidden = true;
+        this._recordingsTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._recordingsTreeSelectionDidChange, this);
+        this._timelinesContentContainerElement.appendChild(this._recordingsTreeOutline.element);
+
+        // Maintain a tree outline with tree elements for each timeline of the selected recording.
+        this._timelinesTreeOutline = this.createContentTreeOutline(true, true);
+        this._timelinesTreeOutline.disclosureButtons = false;
+        this._timelinesTreeOutline.large = true;
+        this._timelinesTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._timelinesTreeSelectionDidChange, this);
+        this._timelinesContentContainerElement.appendChild(this._timelinesTreeOutline.element);
+
+        this._timelineTreeElementMap = new Map;
+
+        this._basicTitleBar = document.createElement("div");
+        this._basicTitleBar.textContent = WebInspector.UIString("Timelines");
+        this._basicTitleBar.classList.add(WebInspector.TimelineSidebarPanel.TitleBarStyleClass);
+        this._basicTitleBar.classList.add(WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass);
+        this.element.insertBefore(this._basicTitleBar, this.element.firstChild);
+
+        if (WebInspector.FPSInstrument.supported()) {
+            let timelinesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineOverview.ViewMode.Timelines, WebInspector.UIString("Timelines"))
+            let renderingFramesNavigationItem = new WebInspector.RadioButtonNavigationItem(WebInspector.TimelineOverview.ViewMode.RenderingFrames, WebInspector.UIString("Rendering Frames"))
+            this._viewModeNavigationBar = new WebInspector.NavigationBar(null, [timelinesNavigationItem, renderingFramesNavigationItem], "tablist");
+            this._viewModeNavigationBar.addEventListener(WebInspector.NavigationBar.Event.NavigationItemSelected, this._viewModeSelected, this);
+
+            this._renderingFramesTitleBar = document.createElement("div");
+            this._renderingFramesTitleBar.className = "navigation-bar-container";
+            this._renderingFramesTitleBar.appendChild(this._viewModeNavigationBar.element);
+            this._renderingFramesTitleBar.hidden = true;
+            this.element.insertBefore(this._renderingFramesTitleBar, this.element.firstChild);
+
+            this._chartColors = new Map;
+            this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Script, "rgb(153, 113, 185)");
+            this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Layout, "rgb(212, 108, 108)");
+            this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Paint, "rgb(152, 188, 77)");
+            this._chartColors.set(WebInspector.RenderingFrameTimelineRecord.TaskType.Other, "rgb(221, 221, 221)");
+
+            this._frameSelectionChartRow = new WebInspector.ChartDetailsSectionRow(this, 74, 0.5);
+            this._frameSelectionChartRow.addEventListener(WebInspector.ChartDetailsSectionRow.Event.LegendItemChecked, this._frameSelectionLegendItemChecked, this);
+
+            for (let key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
+                let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+                let label = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(taskType);
+                let color = this._chartColors.get(taskType);
+                let checkbox = taskType !== WebInspector.RenderingFrameTimelineRecord.TaskType.Other;
+                this._frameSelectionChartRow.addItem(taskType, label, 0, color, checkbox, true);
+            }
+
+            this._renderingFrameTaskFilter = new Set;
+
+            var chartGroup = new WebInspector.DetailsSectionGroup([this._frameSelectionChartRow]);
+            this._frameSelectionChartSection = new WebInspector.DetailsSection("frames-selection-chart", WebInspector.UIString("Selected Frames"), [chartGroup], null, true);
+            this._timelinesContentContainerElement.appendChild(this._frameSelectionChartSection.element);
+        }
+
+        this._toggleRecordingShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Space, this._toggleRecordingOnSpacebar.bind(this));
+        this._toggleRecordingShortcut.implicitlyPreventsDefault = false;
+        this._toggleRecordingShortcut.disabled = true;
+
+        this._toggleNewRecordingShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Space, this._toggleNewRecordingOnSpacebar.bind(this));
+        this._toggleNewRecordingShortcut.implicitlyPreventsDefault = false;
+        this._toggleNewRecordingShortcut.disabled = true;
+
+        this._recordingNavigationBar = new WebInspector.NavigationBar;
+        this.element.insertBefore(this._recordingNavigationBar.element, this.element.firstChild);
+
+        let toolTip = WebInspector.UIString("Start recording (%s)\nCreate new recording (%s)").format(this._toggleRecordingShortcut.displayName, this._toggleNewRecordingShortcut.displayName);
+        let altToolTip = WebInspector.UIString("Stop recording (%s)").format(this._toggleRecordingShortcut.displayName);
+
+        this._recordButton = new WebInspector.ToggleButtonNavigationItem("record-start-stop", toolTip, altToolTip, "Images/Record.svg", "Images/Stop.svg", 13, 13);
+        this._recordButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._recordButtonClicked, this);
+        this._recordButton.element.addEventListener("mouseover", this._recordButtonMousedOver.bind(this));
+        this._recordButton.element.addEventListener("mouseout", this._recordButtonMousedOut.bind(this));
+        this._recordingNavigationBar.addNavigationItem(this._recordButton);
+
+        this._recordingStatusItem = new WebInspector.FlexibleSpaceNavigationItem;
+        this._recordingNavigationBar.addNavigationItem(this._recordingStatusItem);
+
+        WebInspector.showReplayInterfaceSetting.addEventListener(WebInspector.Setting.Event.Changed, this._updateReplayInterfaceVisibility, this);
+
+        // We always create a replay navigation bar; its visibility is controlled by WebInspector.showReplayInterfaceSetting.
+        this._replayNavigationBar = new WebInspector.NavigationBar;
+        this.element.appendChild(this._replayNavigationBar.element);
+
+        toolTip = WebInspector.UIString("Begin Capturing");
+        altToolTip = WebInspector.UIString("End Capturing");
+        this._replayCaptureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-capture", toolTip, altToolTip, "Images/Circle.svg", 16, 16);
+        this._replayCaptureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayCaptureButtonClicked, this);
+        this._replayCaptureButtonItem.enabled = true;
+        this._replayNavigationBar.addNavigationItem(this._replayCaptureButtonItem);
+
+        toolTip = WebInspector.UIString("Start Playback");
+        altToolTip = WebInspector.UIString("Pause Playback");
+        this._replayPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("replay-pause-resume", toolTip, altToolTip, "Images/Resume.svg", "Images/Pause.svg", 15, 15);
+        this._replayPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayPauseResumeButtonClicked, this);
+        this._replayPauseResumeButtonItem.enabled = false;
+        this._replayNavigationBar.addNavigationItem(this._replayPauseResumeButtonItem);
+
+        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
+        WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
+
+        this._recordingNavigationBar.element.oncontextmenu = this._contextMenuNavigationBarOrStatusBar.bind(this);
+        this._replayNavigationBar.element.oncontextmenu = this._contextMenuNavigationBarOrStatusBar.bind(this);
+        this._updateReplayInterfaceVisibility();
+
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingCreated, this._recordingCreated, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingLoaded, this._recordingLoaded, this);
+
+        this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStartedOrStopped, this);
+        WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStartedOrStopped, this);
+
+        for (var recording of WebInspector.timelineManager.recordings)
+            this._addRecording(recording);
+
+        this._recordingCountChanged();
+
+        if (WebInspector.timelineManager.activeRecording)
+            this._recordingLoaded();
+    }
+
+    // Public
+
+    get minimumWidth()
+    {
+        if (WebInspector.FPSInstrument.supported())
+            return Math.max(this._replayNavigationBar.minimumWidth, this._viewModeNavigationBar.minimumWidth);
+        return this._replayNavigationBar.minimumWidth;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        if (this._displayedContentView)
+            this.contentBrowser.showContentView(this._displayedContentView);
+
+        this._toggleRecordingShortcut.disabled = false;
+        this._toggleNewRecordingShortcut.disabled = false;
+
+        this._updateTimelineOverviewHeight();
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        this._toggleRecordingShortcut.disabled = true;
+        this._toggleNewRecordingShortcut.disabled = true;
+    }
+
+    closed()
+    {
+        super.closed();
+
+        WebInspector.showReplayInterfaceSetting.removeEventListener(null, null, this);
+        WebInspector.replayManager.removeEventListener(null, null, this);
+        WebInspector.timelineManager.removeEventListener(null, null, this);
+
+        WebInspector.timelineManager.reset();
+    }
+
+    showDefaultContentView()
+    {
+        if (this._displayedContentView)
+            this.showTimelineOverview();
+    }
+
+    treeElementForRepresentedObject(representedObject)
+    {
+        if (representedObject instanceof WebInspector.TimelineRecording)
+            return this._recordingTreeElementMap.get(representedObject);
+
+        // This fails if the timeline does not belong to the selected recording.
+        if (representedObject instanceof WebInspector.Timeline) {
+            var foundTreeElement = this._timelineTreeElementMap.get(representedObject);
+            if (foundTreeElement)
+                return foundTreeElement;
+        }
+
+        // The main resource is used as the representedObject instead of Frame in our tree.
+        if (representedObject instanceof WebInspector.Frame)
+            representedObject = representedObject.mainResource;
+
+        var foundTreeElement = this.contentTreeOutline.getCachedTreeElement(representedObject);
+        if (foundTreeElement)
+            return foundTreeElement;
+
+        // Look for TreeElements loosely based on represented objects that can contain the represented
+        // object we are really looking for. This allows a SourceCodeTimelineTreeElement or a
+        // TimelineRecordTreeElement to stay selected when the Resource it represents is showing.
+
+        function looselyCompareRepresentedObjects(candidateTreeElement)
+        {
+            if (!candidateTreeElement)
+                return false;
+
+            var candidateRepresentedObject = candidateTreeElement.representedObject;
+            if (candidateRepresentedObject instanceof WebInspector.SourceCodeTimeline) {
+                if (candidateRepresentedObject.sourceCode === representedObject)
+                    return true;
+                return false;
+            } else if (candidateRepresentedObject instanceof WebInspector.Timeline && representedObject instanceof WebInspector.Timeline) {
+                // Reopen to the same timeline, even if a different parent recording is currently shown.
+                if (candidateRepresentedObject.type === representedObject.type)
+                    return true;
+                return false;
+            }
+
+            if (candidateRepresentedObject instanceof WebInspector.TimelineRecord) {
+                if (!candidateRepresentedObject.sourceCodeLocation)
+                    return false;
+                if (candidateRepresentedObject.sourceCodeLocation.sourceCode === representedObject)
+                    return true;
+                return false;
+            }
+
+            if (candidateRepresentedObject instanceof WebInspector.ProfileNode)
+                return false;
+
+            console.error("Unknown TreeElement", candidateTreeElement);
+            return false;
+        }
+
+        // Check the selected tree element first so we don't need to do a longer search and it is
+        // likely to be the best candidate for the current view.
+        if (looselyCompareRepresentedObjects(this.contentTreeOutline.selectedTreeElement))
+            return this.contentTreeOutline.selectedTreeElement;
+
+        var currentTreeElement = this._contentTreeOutline.children[0];
+        while (currentTreeElement && !currentTreeElement.root) {
+            if (looselyCompareRepresentedObjects(currentTreeElement))
+                return currentTreeElement;
+            currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
+        }
+
+        return null;
+    }
+
+    get contentTreeOutlineLabel()
+    {
+        return this._timelineEventsTitleBarElement.textContent;
+    }
+
+    set contentTreeOutlineLabel(label)
+    {
+        label = label || WebInspector.UIString("Timeline Events");
+
+        this._timelineEventsTitleBarElement.textContent = label;
+        this.filterBar.placeholder = WebInspector.UIString("Filter %s").format(label);
+    }
+
+    get contentTreeOutlineScopeBar()
+    {
+        return this._timelineEventsTitleBarScopeContainer.children;
+    }
+
+    set contentTreeOutlineScopeBar(scopeBar)
+    {
+        this._timelineEventsTitleBarScopeContainer.removeChildren();
+
+        if (!scopeBar || !scopeBar.element)
+            return;
+
+        this._timelineEventsTitleBarScopeContainer.appendChild(scopeBar.element);
+    }
+
+    showTimelineOverview()
+    {
+        if (this._timelinesTreeOutline.selectedTreeElement)
+            this._timelinesTreeOutline.selectedTreeElement.deselect();
+
+        this._displayedContentView.showOverviewTimelineView();
+        this.contentBrowser.showContentView(this._displayedContentView);
+    }
+
+    showTimelineViewForTimeline(timeline)
+    {
+        console.assert(timeline instanceof WebInspector.Timeline, timeline);
+        console.assert(this._displayedRecording.timelines.has(timeline.type), "Cannot show timeline because it does not belong to the shown recording.", timeline.type);
+
+        if (this._timelineTreeElementMap.has(timeline)) {
+            // Defer showing the relevant timeline to the onselect handler of the timelines tree element.
+            var wasSelectedByUser = true;
+            var shouldSuppressOnSelect = false;
+            this._timelineTreeElementMap.get(timeline).select(true, wasSelectedByUser, shouldSuppressOnSelect, true);
+        } else {
+            this._displayedContentView.showTimelineViewForTimeline(timeline);
+            this.contentBrowser.showContentView(this._displayedContentView);
+        }
+    }
+
+    updateFrameSelection(startFrameIndex, endFrameIndex)
+    {
+        console.assert(startFrameIndex <= endFrameIndex, startFrameIndex, endFrameIndex);
+        if (this._startFrameIndex === startFrameIndex && this._endFrameIndex === endFrameIndex)
+            return;
+
+        this._startFrameIndex = startFrameIndex;
+        this._endFrameIndex = endFrameIndex;
+
+        this._refreshFrameSelectionChart();
+    }
+
+    formatChartValue(value)
+    {
+        return this._frameSelectionChartRow.total === 0 ? "" : Number.secondsToString(value);
+    }
+
+    // Protected
+
+    representedObjectWasFiltered(representedObject, filtered)
+    {
+        super.representedObjectWasFiltered(representedObject, filtered);
+
+        if (representedObject instanceof WebInspector.TimelineRecord)
+            this._displayedContentView.recordWasFiltered(representedObject, filtered);
+    }
+
+    updateFilter()
+    {
+        super.updateFilter();
+
+        this._displayedContentView.filterDidChange();
+    }
+
+    shouldFilterPopulate()
+    {
+        return false;
+    }
+
+    hasCustomFilters()
+    {
+        return true;
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement)
+    {
+        if (!this._displayedContentView)
+            return true;
+
+        if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames && this._renderingFrameTaskFilter.size) {
+            while (treeElement && !(treeElement.record instanceof WebInspector.TimelineRecord))
+                treeElement = treeElement.parent;
+
+            console.assert(treeElement, "Cannot apply task filter: no TimelineRecord found.");
+            if (!treeElement)
+                return false;
+
+            let records;
+            if (treeElement.record instanceof WebInspector.RenderingFrameTimelineRecord)
+                records = treeElement.record.children;
+            else
+                records = [treeElement.record];
+
+            const filtered = records.every(function(record) {
+                var taskType = WebInspector.RenderingFrameTimelineRecord.taskTypeForTimelineRecord(record);
+                return this._renderingFrameTaskFilter.has(taskType);
+            }, this);
+
+            if (filtered)
+                return false;
+        }
+
+        return this._displayedContentView.matchTreeElementAgainstCustomFilters(treeElement);
+    }
+
+    treeElementAddedOrChanged(treeElement)
+    {
+        if (treeElement.status)
+            return;
+
+        if (!treeElement.treeOutline || typeof treeElement.treeOutline.__canShowContentViewForTreeElement !== "function")
+            return;
+
+        if (!treeElement.treeOutline.__canShowContentViewForTreeElement(treeElement))
+            return;
+
+        var fragment = document.createDocumentFragment();
+
+        var closeButton = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/Close.svg", null, WebInspector.UIString("Close resource view")));
+        closeButton.element.classList.add("close");
+        closeButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementCloseButtonClicked, this);
+        fragment.appendChild(closeButton.element);
+
+        var goToButton = new WebInspector.TreeElementStatusButton(WebInspector.createGoToArrowButton());
+        goToButton.__treeElement = treeElement;
+        goToButton.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this._treeElementGoToArrowWasClicked, this);
+        fragment.appendChild(goToButton.element);
+
+        treeElement.status = fragment;
+    }
+
+    canShowDifferentContentView()
+    {
+        if (this._clickedTreeElementGoToArrow)
+            return true;
+
+        if (this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView)
+            return false;
+
+        return !this.restoringState || !this._restoredShowingTimelineRecordingContentView;
+    }
+
+    saveStateToCookie(cookie)
+    {
+        console.assert(cookie);
+
+        cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey] = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
+
+        if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames)
+            cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineRecord.Type.RenderingFrame;
+        else {
+            var selectedTreeElement = this._timelinesTreeOutline.selectedTreeElement;
+            if (selectedTreeElement)
+                cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = selectedTreeElement.representedObject.type;
+            else
+                cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey] = WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue;    
+        }
+
+        super.saveStateToCookie(cookie);
+    }
+
+    restoreStateFromCookie(cookie, relaxedMatchDelay)
+    {
+        console.assert(cookie);
+
+        // The _displayedContentView is not ready on initial load, so delay the restore.
+        // This matches the delayed work in the WebInspector.TimelineSidebarPanel constructor.
+        if (!this._displayedContentView) {
+            setTimeout(this.restoreStateFromCookie.bind(this, cookie, relaxedMatchDelay), 0);
+            return;
+        }
+
+        this._restoredShowingTimelineRecordingContentView = cookie[WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey];
+
+        var selectedTimelineViewIdentifier = cookie[WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey];
+        if (selectedTimelineViewIdentifier === WebInspector.TimelineRecord.Type.RenderingFrame && !WebInspector.FPSInstrument.supported())
+            selectedTimelineViewIdentifier = null;
+
+        if (selectedTimelineViewIdentifier && this._displayedRecording.timelines.has(selectedTimelineViewIdentifier))
+            this.showTimelineViewForTimeline(this._displayedRecording.timelines.get(selectedTimelineViewIdentifier));
+        else
+            this.showTimelineOverview();
+
+        // Don't call NavigationSidebarPanel.restoreStateFromCookie, because it tries to match based
+        // on type only as a last resort. This would cause the first recording to be reselected on reload.
+    }
+
+    // Private
+
+    _toggleRecordingOnSpacebar(event)
+    {
+        if (WebInspector.isEventTargetAnEditableField(event))
+            return;
+
+        this._toggleRecording();
+
+        event.preventDefault();
+    }
+
+    _toggleNewRecordingOnSpacebar(event)
+    {
+        if (WebInspector.isEventTargetAnEditableField(event))
+            return;
+
+        this._toggleRecording(true);
+
+        event.preventDefault();
+    }
+
+    _toggleRecording(shouldCreateRecording)
+    {
+        if (WebInspector.timelineManager.isCapturing()) {
+            WebInspector.timelineManager.stopCapturing();
+        } else {
+            WebInspector.timelineManager.startCapturing(shouldCreateRecording);
+            // Show the timeline to which events will be appended.
+            this._recordingLoaded();
+        }
+    }
+
+    _treeElementGoToArrowWasClicked(event)
+    {
+        this._clickedTreeElementGoToArrow = true;
+
+        var treeElement = event.target.__treeElement;
+        console.assert(treeElement instanceof WebInspector.TreeElement);
+
+        treeElement.select(true, true);
+
+        this._clickedTreeElementGoToArrow = false;
+    }
+
+    _treeElementCloseButtonClicked(event)
+    {
+        var currentTimelineView = this._displayedContentView ? this._displayedContentView.currentTimelineView : null;
+        if (currentTimelineView && currentTimelineView.representedObject instanceof WebInspector.Timeline)
+            this.showTimelineViewForTimeline(currentTimelineView.representedObject);
+        else
+            this.showTimelineOverview();
+    }
+
+    _recordingsTreeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        console.assert(treeElement.representedObject instanceof WebInspector.TimelineRecording);
+
+        this._recordingSelected(treeElement.representedObject);
+    }
+
+    _renderingFrameTimelineTimesUpdated(event)
+    {
+        if (this._viewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames)
+            this._refreshFrameSelectionChart();
+    }
+
+    _timelinesTreeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        console.assert(this._timelineTreeElementMap.get(treeElement.representedObject) === treeElement, treeElement);
+
+        // If not selected by user, then this selection merely synced the tree element with the content view's contents.
+        let selectedByUser = event.data.selectedByUser;
+        if (!selectedByUser) {
+            console.assert(this._displayedContentView.currentTimelineView.representedObject === treeElement.representedObject);
+            return;
+        }
+
+        let timeline = treeElement.representedObject;
+        console.assert(timeline instanceof WebInspector.Timeline, timeline);
+        console.assert(this._displayedRecording.timelines.get(timeline.type) === timeline, timeline);
+
+        this._previousSelectedTimelineType = timeline.type;
+
+        this._displayedContentView.showTimelineViewForTimeline(timeline);
+        this.contentBrowser.showContentView(this._displayedContentView);
+    }
+
+    _contentBrowserCurrentContentViewDidChange(event)
+    {
+        let didShowTimelineRecordingContentView = this.contentBrowser.currentContentView instanceof WebInspector.TimelineRecordingContentView;
+        this.element.classList.toggle(WebInspector.TimelineSidebarPanel.TimelineRecordingContentViewShowingStyleClass, didShowTimelineRecordingContentView);
+
+        if (!didShowTimelineRecordingContentView)
+            return;
+
+        this._updateViewModeIfNeeded();
+        this._timelineCountChanged();
+
+        this.updateFilter();
+
+        let timelineView = this.contentBrowser.currentContentView.currentTimelineView;
+        if (timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            this._refreshFrameSelectionChart();
+    }
+
+    _capturingStartedOrStopped(event)
+    {
+        let isCapturing = WebInspector.timelineManager.isCapturing();
+        this._updateRecordButton(isCapturing);
+    }
+
+    _recordingCreated(event)
+    {
+        this._addRecording(event.data.recording)
+        this._recordingCountChanged();
+    }
+
+    _addRecording(recording)
+    {
+        console.assert(recording instanceof WebInspector.TimelineRecording, recording);
+
+        var recordingTreeElement = new WebInspector.GeneralTreeElement(WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass, recording.displayName, null, recording);
+        this._recordingTreeElementMap.set(recording, recordingTreeElement);
+        this._recordingsTreeOutline.appendChild(recordingTreeElement);
+    }
+
+    _recordingCountChanged()
+    {
+        var previousTreeElement = null;
+        for (var treeElement of this._recordingTreeElementMap.values()) {
+            if (previousTreeElement) {
+                previousTreeElement.nextSibling = treeElement;
+                treeElement.previousSibling = previousTreeElement;
+            }
+
+            previousTreeElement = treeElement;
+        }
+    }
+
+    _recordingSelected(recording)
+    {
+        console.assert(recording instanceof WebInspector.TimelineRecording, recording);
+
+        var oldRecording = this._displayedRecording || null;
+
+        if (oldRecording) {
+            oldRecording.removeEventListener(WebInspector.TimelineRecording.Event.InstrumentAdded, this._instrumentAdded, this);
+            oldRecording.removeEventListener(WebInspector.TimelineRecording.Event.InstrumentRemoved, this._instrumentRemoved, this);
+
+            // Destroy tree elements in one operation to avoid unnecessary fixups.
+            this._timelinesTreeOutline.removeChildren();
+            this._timelineTreeElementMap.clear();
+        }
+
+        this._clearInstruments();
+
+        this._displayedRecording = recording;
+        this._displayedRecording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentAdded, this._instrumentAdded, this);
+        this._displayedRecording.addEventListener(WebInspector.TimelineRecording.Event.InstrumentRemoved, this._instrumentRemoved, this);
+
+        for (let instrument of recording.instruments)
+            this._instrumentAdded(instrument);
+
+        // Save the current state incase we need to restore it to a new recording.
+        var cookie = {};
+        this.saveStateToCookie(cookie);
+
+        if (this._displayedContentView)
+            this._displayedContentView.removeEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._updateViewModeIfNeeded, this);
+
+        // Try to get the recording content view if it exists already, if it does we don't want to restore the cookie.
+        var onlyExisting = true;
+        this._displayedContentView = this.contentBrowser.contentViewForRepresentedObject(this._displayedRecording, onlyExisting, {timelineSidebarPanel: this});
+        if (this._displayedContentView) {
+            this._displayedContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._updateViewModeIfNeeded, this);
+
+            // Show the timeline that was being shown to update the sidebar tree state.
+            var currentTimelineView = this._displayedContentView.currentTimelineView;
+            if (currentTimelineView && currentTimelineView.representedObject instanceof WebInspector.Timeline)
+                this.showTimelineViewForTimeline(currentTimelineView.representedObject);
+            else
+                this.showTimelineOverview();
+
+            this.updateFilter();
+            return;
+        }
+
+        onlyExisting = false;
+        this._displayedContentView = this.contentBrowser.contentViewForRepresentedObject(this._displayedRecording, onlyExisting, {timelineSidebarPanel: this});
+        if (this._displayedContentView)
+            this._displayedContentView.addEventListener(WebInspector.ContentView.Event.NavigationItemsDidChange, this._updateViewModeIfNeeded, this);
+
+        // Restore the cookie to carry over the previous recording view state to the new recording.
+        this.restoreStateFromCookie(cookie);
+
+        this.updateFilter();
+    }
+
+    _recordingLoaded(event)
+    {
+        this._recordingSelected(WebInspector.timelineManager.activeRecording);
+    }
+
+    _clearInstruments()
+    {
+        this._timelineTreeElementMap.clear();
+
+        if (WebInspector.FPSInstrument.supported())
+            this._removedFPSInstrument();
+    }
+
+    _instrumentAdded(instrumentOrEvent)
+    {
+        let instrument = instrumentOrEvent instanceof WebInspector.Instrument ? instrumentOrEvent : instrumentOrEvent.data.instrument;
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+
+        let timeline = this._displayedRecording.timelineForInstrument(instrument);
+        console.assert(!this._timelineTreeElementMap.has(timeline), timeline);
+
+        if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+            this._addedFPSInstrument();
+            timeline.addEventListener(WebInspector.Timeline.Event.TimesUpdated, this._renderingFrameTimelineTimesUpdated, this);
+            return;
+        }
+
+        let displayName = WebInspector.TimelineTabContentView.displayNameForTimeline(timeline);
+        let iconClassName = WebInspector.TimelineTabContentView.iconClassNameForTimeline(timeline);
+        let genericClassName = WebInspector.TimelineTabContentView.genericClassNameForTimeline(timeline);
+        let timelineTreeElement = new WebInspector.GeneralTreeElement([iconClassName, genericClassName, WebInspector.TimelineSidebarPanel.LargeIconStyleClass], displayName, null, timeline);
+        let tooltip = WebInspector.UIString("Close %s timeline view").format(displayName);
+        let button = new WebInspector.TreeElementStatusButton(useSVGSymbol("Images/CloseLarge.svg", "close-button", tooltip));
+        button.addEventListener(WebInspector.TreeElementStatusButton.Event.Clicked, this.showTimelineOverview, this);
+        timelineTreeElement.status = button.element;
+
+        this._timelinesTreeOutline.appendChild(timelineTreeElement);
+        this._timelineTreeElementMap.set(timeline, timelineTreeElement);
+
+        this._timelineCountChanged();
+    }
+
+    _instrumentRemoved(event)
+    {
+        let instrument = event.data.instrument;
+        console.assert(instrument instanceof WebInspector.Instrument, instrument);
+
+        let timeline = this._displayedRecording.timelineForInstrument(instrument);
+
+        if (timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame) {
+            this._removedFPSInstrument();
+            timeline.removeEventListener(WebInspector.Timeline.Event.TimesUpdated, this._renderingFrameTimelineTimesUpdated, this);
+            return;
+        }
+
+        console.assert(this._timelineTreeElementMap.has(timeline), timeline);
+
+        let timelineTreeElement = this._timelineTreeElementMap.take(timeline);
+        let shouldSuppressOnDeselect = false;
+        let shouldSuppressSelectSibling = true;
+        this._timelinesTreeOutline.removeChild(timelineTreeElement, shouldSuppressOnDeselect, shouldSuppressSelectSibling);
+        this._timelineTreeElementMap.delete(timeline);
+
+        this._timelineCountChanged();
+    }
+
+    _addedFPSInstrument()
+    {
+        this._basicTitleBar.hidden = true;
+        this._renderingFramesTitleBar.hidden = false;
+    }
+
+    _removedFPSInstrument()
+    {
+        this._basicTitleBar.hidden = false;
+        this._renderingFramesTitleBar.hidden = true;
+    }
+
+    _timelineCountChanged()
+    {
+        var previousTreeElement = null;
+        for (var treeElement of this._timelineTreeElementMap.values()) {
+            if (previousTreeElement) {
+                previousTreeElement.nextSibling = treeElement;
+                treeElement.previousSibling = previousTreeElement;
+            }
+
+            previousTreeElement = treeElement;
+        }
+
+        this._updateTimelineOverviewHeight();
+    }
+
+    _updateTimelineOverviewHeight()
+    {
+        const eventTitleBarOffset = 58;
+        const contentElementOffset = 81;
+
+        if (!this._displayedContentView)
+            return;
+
+        let overviewHeight = this._displayedContentView.timelineOverviewHeight;
+        this._timelineEventsTitleBarContainer.style.top = (overviewHeight + eventTitleBarOffset) + "px";
+        this.contentView.element.style.top = (overviewHeight + contentElementOffset) + "px";
+    }
+
+    _recordButtonClicked(event)
+    {
+        let isCapturing = !WebInspector.timelineManager.isCapturing();
+
+        this._updateRecordButton(isCapturing);
+        this._toggleRecording(event.shiftKey);
+    }
+
+    _recordButtonMousedOver(event)
+    {
+        if (WebInspector.timelineManager.isCapturing())
+            this._recordingStatusItem.element.textContent = WebInspector.UIString("Stop Recording");
+        else
+            this._recordingStatusItem.element.textContent = WebInspector.UIString("Start Recording");
+    }
+
+    _recordButtonMousedOut(event)
+    {
+        if (WebInspector.timelineManager.isCapturing())
+            this._recordingStatusItem.element.textContent = WebInspector.UIString("Recording");
+        else
+            this._recordingStatusItem.element.textContent = "";
+    }
+
+    _updateRecordButton(isCapturing)
+    {
+        this._recordingStatusItem.element.textContent = isCapturing ? WebInspector.UIString("Recording") : "";
+        this._recordButton.toggled = isCapturing;
+    }
+
+    _viewModeSelected(event)
+    {
+        console.assert(event.target.selectedNavigationItem);
+        if (!event.target.selectedNavigationItem)
+            return;
+
+        let selectedNavigationItem = event.target.selectedNavigationItem;
+        let newViewMode = selectedNavigationItem.identifier;
+        if (this._viewMode === newViewMode)
+            return;
+
+        let timelineType = this._previousSelectedTimelineType;
+        if (newViewMode === WebInspector.TimelineOverview.ViewMode.RenderingFrames) {
+            this._previousSelectedTimelineType = this._timelinesTreeOutline.selectedTreeElement ? this._timelinesTreeOutline.selectedTreeElement.representedObject.type : null;
+            timelineType = WebInspector.TimelineRecord.Type.RenderingFrame;
+        }
+
+        if (timelineType) {
+            console.assert(this._displayedRecording.timelines.has(timelineType), timelineType);
+            this.showTimelineViewForTimeline(this._displayedRecording.timelines.get(timelineType));
+            return;
+        }
+
+        this.showTimelineOverview();
+    }
+
+    _viewModeForTimeline(timeline)
+    {
+        if (timeline && timeline.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            return WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+
+        return WebInspector.TimelineOverview.ViewMode.Timelines;
+    }
+
+    _frameSelectionLegendItemChecked(event)
+    {
+        if (event.data.checked)
+            this._renderingFrameTaskFilter.delete(event.data.id);
+        else
+            this._renderingFrameTaskFilter.add(event.data.id);
+
+        this.updateFilter();
+    }
+
+    _refreshFrameSelectionChart()
+    {
+        console.assert(WebInspector.FPSInstrument.supported());
+        if (!WebInspector.FPSInstrument.supported())
+            return;
+
+        if (!this.visible)
+            return;
+
+        function getSelectedRecords()
+        {
+            console.assert(this._displayedRecording);
+            console.assert(this._displayedRecording.timelines.has(WebInspector.TimelineRecord.Type.RenderingFrame), "Cannot find rendering frames timeline in displayed recording");
+
+            var timeline = this._displayedRecording.timelines.get(WebInspector.TimelineRecord.Type.RenderingFrame);
+            var selectedRecords = [];
+            for (var record of timeline.records) {
+                console.assert(record instanceof WebInspector.RenderingFrameTimelineRecord);
+                // If this frame is completely before the bounds of the graph, skip this record.
+                if (record.frameIndex < this._startFrameIndex)
+                    continue;
+
+                // If this record is completely after the end time, break out now.
+                // Records are sorted, so all records after this will be beyond the end time too.
+                if (record.frameIndex > this._endFrameIndex)
+                    break;
+
+                selectedRecords.push(record);
+            }
+
+            return selectedRecords;
+        }
+
+        let records = getSelectedRecords.call(this);
+        for (let key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
+            let taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+            let value = records.reduce(function(previousValue, currentValue) { return previousValue + currentValue.durationForTask(taskType); }, 0);
+            this._frameSelectionChartRow.setItemValue(taskType, value);
+        }
+
+        if (!records.length) {
+            this._frameSelectionChartRow.title = WebInspector.UIString("Frames: None Selected");
+            return;
+        }
+
+        var firstRecord = records[0];
+        var lastRecord = records.lastValue;
+
+        if (records.length > 1) {
+            this._frameSelectionChartRow.title = WebInspector.UIString("Frames: %d \u2013 %d (%s \u2013 %s)").format(firstRecord.frameNumber, lastRecord.frameNumber,
+                Number.secondsToString(firstRecord.startTime), Number.secondsToString(lastRecord.endTime));
+        } else {
+            this._frameSelectionChartRow.title = WebInspector.UIString("Frame: %d (%s \u2013 %s)").format(firstRecord.frameNumber,
+                Number.secondsToString(firstRecord.startTime), Number.secondsToString(lastRecord.endTime));
+        }
+    }
+
+    // These methods are only used when ReplayAgent is available.
+
+    _updateReplayInterfaceVisibility()
+    {
+        var shouldShowReplayInterface = !!(window.ReplayAgent && WebInspector.showReplayInterfaceSetting.value);
+
+        this._recordingNavigationBar.element.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, shouldShowReplayInterface);
+        this._replayNavigationBar.element.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, !shouldShowReplayInterface);
+    }
+
+    _contextMenuNavigationBarOrStatusBar()
+    {
+        if (!window.ReplayAgent)
+            return;
+
+        let toggleReplayInterface = () => {
+            WebInspector.showReplayInterfaceSetting.value = !WebInspector.showReplayInterfaceSetting.value;
+        };
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+        if (WebInspector.showReplayInterfaceSetting.value)
+            contextMenu.appendItem(WebInspector.UIString("Hide Replay Controls"), toggleReplayInterface);
+        else
+            contextMenu.appendItem(WebInspector.UIString("Show Replay Controls"), toggleReplayInterface);
+    }
+
+    _replayCaptureButtonClicked()
+    {
+        if (!this._replayCaptureButtonItem.activated) {
+            WebInspector.replayManager.startCapturing();
+            WebInspector.timelineManager.startCapturing();
+
+            // De-bounce further presses until the backend has begun capturing.
+            this._replayCaptureButtonItem.activated = true;
+            this._replayCaptureButtonItem.enabled = false;
+        } else {
+            WebInspector.replayManager.stopCapturing();
+            WebInspector.timelineManager.stopCapturing();
+
+            this._replayCaptureButtonItem.enabled = false;
+        }
+    }
+
+    _replayPauseResumeButtonClicked()
+    {
+        if (this._replayPauseResumeButtonItem.toggled)
+            WebInspector.replayManager.pausePlayback();
+        else
+            WebInspector.replayManager.replayToCompletion();
+    }
+
+    _captureStarted()
+    {
+        this._replayCaptureButtonItem.enabled = true;
+    }
+
+    _captureStopped()
+    {
+        this._replayCaptureButtonItem.activated = false;
+        this._replayPauseResumeButtonItem.enabled = true;
+    }
+
+    _playbackStarted()
+    {
+        this._replayPauseResumeButtonItem.toggled = true;
+    }
+
+    _playbackPaused()
+    {
+        this._replayPauseResumeButtonItem.toggled = false;
+    }
+
+    _updateViewModeIfNeeded()
+    {
+        let timelineView = this.contentBrowser.currentContentView.currentTimelineView;
+        let newViewMode = WebInspector.TimelineOverview.ViewMode.Timelines;
+        if (timelineView.representedObject instanceof WebInspector.Timeline && timelineView.representedObject.type === WebInspector.TimelineRecord.Type.RenderingFrame)
+            newViewMode = WebInspector.TimelineOverview.ViewMode.RenderingFrames;
+
+        if (newViewMode === this._viewMode)
+            return;
+
+        this._viewMode = newViewMode;
+
+        let isShowingTimelines = this._viewMode === WebInspector.TimelineOverview.ViewMode.Timelines;
+        this._timelinesTreeOutline.hidden = !isShowingTimelines;
+
+        if (WebInspector.FPSInstrument.supported()) {
+            this._frameSelectionChartSection.collapsed = isShowingTimelines;
+            this._viewModeNavigationBar.selectedNavigationItem = this._viewMode;
+        }
+    }
+};
+
+WebInspector.TimelineSidebarPanel.HiddenStyleClassName = "hidden";
+WebInspector.TimelineSidebarPanel.TitleBarStyleClass = "title-bar";
+WebInspector.TimelineSidebarPanel.TitleBarTextStyleClass = "title-bar-text";
+WebInspector.TimelineSidebarPanel.TitleBarScopeBarStyleClass = "title-bar-scope-bar";
+WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass = "timelines";
+WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass = "timeline-events";
+WebInspector.TimelineSidebarPanel.TimelinesContentContainerStyleClass = "timelines-content";
+WebInspector.TimelineSidebarPanel.LargeIconStyleClass = "large";
+WebInspector.TimelineSidebarPanel.StopwatchIconStyleClass = "stopwatch-icon";
+WebInspector.TimelineSidebarPanel.TimelineRecordingContentViewShowingStyleClass = "timeline-recording-content-view-showing";
+
+WebInspector.TimelineSidebarPanel.ShowingTimelineRecordingContentViewCookieKey = "timeline-sidebar-panel-showing-timeline-recording-content-view";
+WebInspector.TimelineSidebarPanel.SelectedTimelineViewIdentifierCookieKey = "timeline-sidebar-panel-selected-timeline-view-identifier";
+WebInspector.TimelineSidebarPanel.OverviewTimelineIdentifierCookieValue = "overview";
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js b/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js
new file mode 100644
index 000000000..669a4260d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js
@@ -0,0 +1,236 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineTabContentView = class TimelineTabContentView extends WebInspector.ContentBrowserTabContentView
+{
+    constructor(identifier)
+    {
+        let {image, title} = WebInspector.TimelineTabContentView.tabInfo();
+        let tabBarItem = new WebInspector.TabBarItem(image, title);
+        let detailsSidebarPanels = [WebInspector.resourceDetailsSidebarPanel, WebInspector.probeDetailsSidebarPanel];
+
+        super(identifier || "timeline", "timeline", tabBarItem, WebInspector.TimelineSidebarPanel, detailsSidebarPanels);
+    }
+
+    // Static
+
+    static tabInfo()
+    {
+        return {
+            image: "Images/Timeline.svg",
+            title: WebInspector.UIString("Timelines"),
+        };
+    }
+
+    static isTabAllowed()
+    {
+        return !!window.TimelineAgent || !!window.ScriptProfilerAgent;
+    }
+
+    static displayNameForTimeline(timeline)
+    {
+        switch (timeline.type) {
+        case WebInspector.TimelineRecord.Type.Network:
+            return WebInspector.UIString("Network Requests");
+        case WebInspector.TimelineRecord.Type.Layout:
+            return WebInspector.UIString("Layout & Rendering");
+        case WebInspector.TimelineRecord.Type.Script:
+            return WebInspector.UIString("JavaScript & Events");
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return WebInspector.UIString("Rendering Frames");
+        case WebInspector.TimelineRecord.Type.Memory:
+            return WebInspector.UIString("Memory");
+        default:
+            console.error("Unknown Timeline type:", timeline.type);
+        }
+
+        return null;
+    }
+
+    static iconClassNameForTimeline(timeline)
+    {
+        switch (timeline.type) {
+        case WebInspector.TimelineRecord.Type.Network:
+            return "network-icon";
+        case WebInspector.TimelineRecord.Type.Layout:
+            return "layout-icon";
+        case WebInspector.TimelineRecord.Type.Memory:
+            return "memory-icon";
+        case WebInspector.TimelineRecord.Type.Script:
+            return "script-icon";
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return "rendering-frame-icon";
+        default:
+            console.error("Unknown Timeline type:", timeline.type);
+        }
+
+        return null;
+    }
+
+    static genericClassNameForTimeline(timeline)
+    {
+        switch (timeline.type) {
+        case WebInspector.TimelineRecord.Type.Network:
+            return "network";
+        case WebInspector.TimelineRecord.Type.Layout:
+            return "colors";
+        case WebInspector.TimelineRecord.Type.Memory:
+            return "memory";
+        case WebInspector.TimelineRecord.Type.Script:
+            return "script";
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return "rendering-frame";
+        default:
+            console.error("Unknown Timeline type:", timeline.type);
+        }
+
+        return null;
+    }
+
+    static iconClassNameForRecord(timelineRecord)
+    {
+        switch (timelineRecord.type) {
+        case WebInspector.TimelineRecord.Type.Layout:
+            switch (timelineRecord.eventType) {
+            case WebInspector.LayoutTimelineRecord.EventType.InvalidateStyles:
+            case WebInspector.LayoutTimelineRecord.EventType.RecalculateStyles:
+                return WebInspector.TimelineRecordTreeElement.StyleRecordIconStyleClass;
+            case WebInspector.LayoutTimelineRecord.EventType.InvalidateLayout:
+            case WebInspector.LayoutTimelineRecord.EventType.ForcedLayout:
+            case WebInspector.LayoutTimelineRecord.EventType.Layout:
+                return WebInspector.TimelineRecordTreeElement.LayoutRecordIconStyleClass;
+            case WebInspector.LayoutTimelineRecord.EventType.Paint:
+                return WebInspector.TimelineRecordTreeElement.PaintRecordIconStyleClass;
+            case WebInspector.LayoutTimelineRecord.EventType.Composite:
+                return WebInspector.TimelineRecordTreeElement.CompositeRecordIconStyleClass;
+            default:
+                console.error("Unknown LayoutTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
+            }
+
+            break;
+
+        case WebInspector.TimelineRecord.Type.Script:
+            switch (timelineRecord.eventType) {
+            case WebInspector.ScriptTimelineRecord.EventType.APIScriptEvaluated:
+                return WebInspector.TimelineRecordTreeElement.APIRecordIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.ScriptEvaluated:
+                return WebInspector.TimelineRecordTreeElement.EvaluatedRecordIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.MicrotaskDispatched:
+            case WebInspector.ScriptTimelineRecord.EventType.EventDispatched:
+                return WebInspector.TimelineRecordTreeElement.EventRecordIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.ProbeSampleRecorded:
+                return WebInspector.TimelineRecordTreeElement.ProbeRecordIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.ConsoleProfileRecorded:
+                return WebInspector.TimelineRecordTreeElement.ConsoleProfileIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.GarbageCollected:
+                return WebInspector.TimelineRecordTreeElement.GarbageCollectionIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.TimerInstalled:
+                return WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.TimerFired:
+            case WebInspector.ScriptTimelineRecord.EventType.TimerRemoved:
+                return WebInspector.TimelineRecordTreeElement.TimerRecordIconStyleClass;
+            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameFired:
+            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameRequested:
+            case WebInspector.ScriptTimelineRecord.EventType.AnimationFrameCanceled:
+                return WebInspector.TimelineRecordTreeElement.AnimationRecordIconStyleClass;
+            default:
+                console.error("Unknown ScriptTimelineRecord eventType: " + timelineRecord.eventType, timelineRecord);
+            }
+
+            break;
+
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return WebInspector.TimelineRecordTreeElement.RenderingFrameRecordIconStyleClass;
+
+        case WebInspector.TimelineRecord.Type.Memory:
+            // Not used. Fall through to error just in case.
+
+        default:
+            console.error("Unknown TimelineRecord type: " + timelineRecord.type, timelineRecord);
+        }
+
+        return null;
+    }
+
+    static displayNameForRecord(timelineRecord, includeDetailsInMainTitle)
+    {
+        switch (timelineRecord.type) {
+        case WebInspector.TimelineRecord.Type.Network:
+            return WebInspector.displayNameForURL(timelineRecord.resource.url, timelineRecord.resource.urlComponents);
+        case WebInspector.TimelineRecord.Type.Layout:
+            return WebInspector.LayoutTimelineRecord.displayNameForEventType(timelineRecord.eventType);
+        case WebInspector.TimelineRecord.Type.Script:
+            return WebInspector.ScriptTimelineRecord.EventType.displayName(timelineRecord.eventType, timelineRecord.details, includeDetailsInMainTitle);
+        case WebInspector.TimelineRecord.Type.RenderingFrame:
+            return WebInspector.UIString("Frame %d").format(timelineRecord.frameNumber);
+        case WebInspector.TimelineRecord.Type.Memory:
+            // Not used. Fall through to error just in case.
+        default:
+            console.error("Unknown TimelineRecord type: " + timelineRecord.type, timelineRecord);
+        }
+
+        return null;
+    }
+
+    // Public
+
+    get type()
+    {
+        return WebInspector.TimelineTabContentView.Type;
+    }
+
+    shown()
+    {
+        super.shown();
+
+        WebInspector.timelineManager.autoCaptureOnPageLoad = true;
+    }
+
+    hidden()
+    {
+        super.hidden();
+
+        WebInspector.timelineManager.autoCaptureOnPageLoad = false;
+    }
+
+    canShowRepresentedObject(representedObject)
+    {
+        if (representedObject instanceof WebInspector.TimelineRecording)
+            return true;
+
+        // Only support showing a resource or script if we have that represented object in the sidebar.
+        if (representedObject instanceof WebInspector.Resource || representedObject instanceof WebInspector.Script)
+            return !!this.navigationSidebarPanel.treeElementForRepresentedObject(representedObject);
+
+        return false;
+    }
+
+    get supportsSplitContentBrowser()
+    {
+        return false;
+    }
+};
+
+WebInspector.TimelineTabContentView.Type = "timeline";
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineView.css b/Source/WebInspectorUI/UserInterface/Views/TimelineView.css
new file mode 100644
index 000000000..7f62a829e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineView.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.timeline-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.panel.navigation.timeline > .content > .tree-outline {
+    min-height: 100%;
+    background-image: none;
+}
+
+.panel.navigation.timeline.timeline-recording-content-view-showing > .content > .tree-outline {
+    background-image: linear-gradient(to bottom, transparent, transparent 50%, hsla(0, 0%, 0%, 0.03) 50%, hsla(0, 0%, 0%, 0.03));
+    background-size: 100% 40px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineView.js b/Source/WebInspectorUI/UserInterface/Views/TimelineView.js
new file mode 100644
index 000000000..10c07cd2a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineView.js
@@ -0,0 +1,258 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 University of Washington.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TimelineView = class TimelineView extends WebInspector.ContentView
+{
+    constructor(representedObject, extraArguments)
+    {
+        console.assert(extraArguments);
+        console.assert(extraArguments.timelineSidebarPanel instanceof WebInspector.TimelineSidebarPanel);
+
+        super(representedObject);
+
+        // This class should not be instantiated directly. Create a concrete subclass instead.
+        console.assert(this.constructor !== WebInspector.TimelineView && this instanceof WebInspector.TimelineView);
+
+        this._timelineSidebarPanel = extraArguments.timelineSidebarPanel;
+
+        this._contentTreeOutline = this._timelineSidebarPanel.createContentTreeOutline();
+        this._contentTreeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+        this._contentTreeOutline.__canShowContentViewForTreeElement = this.canShowContentViewForTreeElement.bind(this);
+
+        this.element.classList.add("timeline-view");
+
+        this._zeroTime = 0;
+        this._startTime = 0;
+        this._endTime = 5;
+        this._currentTime = 0;
+    }
+
+    // Public
+
+    get navigationSidebarTreeOutline()
+    {
+        return this._contentTreeOutline;
+    }
+
+    get navigationSidebarTreeOutlineLabel()
+    {
+        // Implemented by sub-classes if needed.
+        return null;
+    }
+
+    get navigationSidebarTreeOutlineScopeBar()
+    {
+        return this._scopeBar;
+    }
+
+    get timelineSidebarPanel()
+    {
+        return this._timelineSidebarPanel;
+    }
+
+    get selectionPathComponents()
+    {
+        if (!this._contentTreeOutline.selectedTreeElement || this._contentTreeOutline.selectedTreeElement.hidden)
+            return null;
+
+        var pathComponent = new WebInspector.GeneralTreeElementPathComponent(this._contentTreeOutline.selectedTreeElement);
+        pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.treeElementPathComponentSelected, this);
+        return [pathComponent];
+    }
+
+    get zeroTime()
+    {
+        return this._zeroTime;
+    }
+
+    set zeroTime(x)
+    {
+        x = x || 0;
+
+        if (this._zeroTime === x)
+            return;
+
+        this._zeroTime = x;
+
+        this.needsLayout();
+    }
+
+    get startTime()
+    {
+        return this._startTime;
+    }
+
+    set startTime(x)
+    {
+        x = x || 0;
+
+        if (this._startTime === x)
+            return;
+
+        this._startTime = x;
+
+        this.needsLayout();
+    }
+
+    get endTime()
+    {
+        return this._endTime;
+    }
+
+    set endTime(x)
+    {
+        x = x || 0;
+
+        if (this._endTime === x)
+            return;
+
+        this._endTime = x;
+
+        this.needsLayout();
+    }
+
+    get currentTime()
+    {
+        return this._currentTime;
+    }
+
+    set currentTime(x)
+    {
+        x = x || 0;
+
+        if (this._currentTime === x)
+            return;
+
+        let oldCurrentTime = this._currentTime;
+
+        this._currentTime = x;
+
+        function checkIfLayoutIsNeeded(currentTime)
+        {
+            // Include some wiggle room since the current time markers can be clipped off the ends a bit and still partially visible.
+            const wiggleTime = 0.05; // 50ms
+            return this._startTime - wiggleTime <= currentTime && currentTime <= this._endTime + wiggleTime;
+        }
+
+        if (checkIfLayoutIsNeeded.call(this, oldCurrentTime) || checkIfLayoutIsNeeded.call(this, this._currentTime))
+            this.needsLayout();
+    }
+
+    reset()
+    {
+        this._contentTreeOutline.removeChildren();
+        this._timelineSidebarPanel.hideEmptyContentPlaceholder();
+    }
+
+
+    filterDidChange()
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    matchTreeElementAgainstCustomFilters(treeElement)
+    {
+        // Implemented by sub-classes if needed.
+        return true;
+    }
+
+    filterUpdated()
+    {
+        this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+    }
+
+    needsLayout()
+    {
+        // FIXME: needsLayout can be removed once <https://webkit.org/b/150741> is fixed.
+        if (!this.visible)
+            return;
+
+        super.needsLayout();
+    }
+
+    // Protected
+
+    canShowContentViewForTreeElement(treeElement)
+    {
+        // Implemented by sub-classes if needed.
+
+        if (treeElement instanceof WebInspector.TimelineRecordTreeElement)
+            return !!treeElement.sourceCodeLocation;
+        return false;
+    }
+
+    showContentViewForTreeElement(treeElement)
+    {
+        // Implemented by sub-classes if needed.
+
+        if (!(treeElement instanceof WebInspector.TimelineRecordTreeElement)) {
+            console.error("Unknown tree element selected.", treeElement);
+            return;
+        }
+
+        var sourceCodeLocation = treeElement.sourceCodeLocation;
+        if (!sourceCodeLocation) {
+            this._timelineSidebarPanel.showTimelineViewForTimeline(this.representedObject);
+            return;
+        }
+
+        WebInspector.showOriginalOrFormattedSourceCodeLocation(sourceCodeLocation);
+    }
+
+    treeElementPathComponentSelected(event)
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    treeElementDeselected(treeElement)
+    {
+        // Implemented by sub-classes if needed.
+    }
+
+    treeElementSelected(treeElement, selectedByUser)
+    {
+        // Implemented by sub-classes if needed.
+
+        if (!this._timelineSidebarPanel.canShowDifferentContentView())
+            return;
+
+        if (treeElement instanceof WebInspector.FolderTreeElement)
+            return;
+
+        this.showContentViewForTreeElement(treeElement);
+    }
+
+    // Private
+
+    _treeSelectionDidChange(event)
+    {
+        if (event.data.deselectedElement)
+            this.treeElementDeselected(event.data.deselectedElement);
+
+        if (event.data.selectedElement)
+            this.treeElementSelected(event.data.selectedElement, event.data.selectedByUser);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js
new file mode 100644
index 000000000..1f609a3e9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ToggleButtonNavigationItem.js
@@ -0,0 +1,106 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ToggleButtonNavigationItem = class ToggleButtonNavigationItem extends WebInspector.ButtonNavigationItem
+{
+    constructor(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight)
+    {
+        super(identifier, defaultToolTip, defaultImage, imageWidth, imageHeight);
+
+        this._toggled = false;
+        this._defaultImage = defaultImage;
+        this._alternateImage = alternateImage;
+        this._defaultToolTip = defaultToolTip;
+        this._alternateToolTip = alternateToolTip || defaultToolTip;
+    }
+
+    // Public
+
+    get defaultToolTip()
+    {
+        return this._defaultToolTip;
+    }
+
+    get alternateToolTip()
+    {
+        return this._alternateToolTip;
+    }
+
+    set alternateToolTip(toolTip)
+    {
+        this._alternateToolTip = toolTip;
+
+        if (this._toggled)
+            this.toolTip = this._alternateToolTip;
+    }
+
+    get defaultImage()
+    {
+        return this._defaultImage;
+    }
+
+    get alternateImage()
+    {
+        return this._alternateImage;
+    }
+
+    set alternateImage(image)
+    {
+        this._alternateImage = image;
+
+        if (this._toggled)
+            this.image = this._alternateImage;
+    }
+
+    get toggled()
+    {
+        return this._toggled;
+    }
+
+    set toggled(flag)
+    {
+        flag = flag || false;
+
+        if (this._toggled === flag)
+            return;
+
+        this._toggled = flag;
+
+        if (this._toggled) {
+            this.toolTip = this._alternateToolTip;
+            this.image = this._alternateImage;
+        } else {
+            this.toolTip = this._defaultToolTip;
+            this.image = this._defaultImage;
+        }
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["toggle", "button"];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ToggleControlToolbarItem.js b/Source/WebInspectorUI/UserInterface/Views/ToggleControlToolbarItem.js
new file mode 100644
index 000000000..7a68f616f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/ToggleControlToolbarItem.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ToggleControlToolbarItem = class ToggleControlToolbarItem extends WebInspector.ToggleButtonNavigationItem
+{
+    constructor(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight)
+    {
+        super(identifier, defaultToolTip, alternateToolTip, defaultImage, alternateImage, imageWidth, imageHeight, false);
+    }
+
+    // Protected
+
+    get additionalClassNames()
+    {
+        return ["toggle", "control"];
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/Toolbar.css b/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
new file mode 100644
index 000000000..85f57efb3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Toolbar.css
@@ -0,0 +1,209 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.toolbar {
+    display: flex;
+
+    white-space: nowrap;
+    overflow: hidden;
+
+    outline: none;
+
+    padding-top: 3px;
+    padding-bottom: 3px;
+    height: 36px;
+}
+
+body:not(.mavericks) .toolbar,
+body.mavericks.docked .toolbar {
+    background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 87%));
+    box-shadow: inset hsla(0, 0%, 100%, 0.5) 0 1px 1px;
+}
+
+body.window-inactive:not(.mavericks) .toolbar {
+    background-image: none;
+    background-color: hsl(0, 0%, 96%);
+}
+
+body.mac-platform:not(.docked, .mavericks) .toolbar {
+    padding-top: 21px;
+    height: 54px;
+}
+
+.toolbar .control-section {
+    display: flex;
+
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding-left: 6px;
+    padding-right: 2px;
+
+    min-width: -webkit-min-content;
+}
+
+.toolbar:matches(.icon-and-label-horizontal.small-size, .icon-only.small-size, .label-only) .control-section {
+    flex-direction: row;
+}
+
+.toolbar .item-section {
+    display: flex;
+    flex: 1;
+    min-width: -webkit-min-content;
+}
+
+.toolbar .item-section.left {
+    justify-content: flex-start;
+}
+
+.toolbar .item-section.center-left {
+    justify-content: flex-start;
+}
+
+.toolbar .item-section.center-right {
+    justify-content: center;
+}
+
+.toolbar .item-section.center {
+    justify-content: center;
+}
+
+.toolbar .item-section.right {
+    justify-content: flex-end;
+    padding-right: 4px;
+}
+
+.toolbar .item {
+    display: flex;
+    outline: none;
+}
+
+.toolbar .search-bar {
+    width: 100%;
+    min-width: 100px;
+}
+
+.toolbar .search-bar > input[type="search"] {
+    width: 100%;
+    font-size: 12px;
+    background-clip: initial;
+    margin: 4px;
+}
+
+.toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container {
+    margin-left: 4px;
+}
+
+body.legacy-mac .toolbar .item.button,
+body.legacy-mac .toolbar .search-bar > input[type="search"],
+body.legacy-mac .toolbar .dashboard-container {
+    background-color: hsl(0, 0%, 99%);
+    border: 1px solid transparent;
+    border-top-color: hsl(0, 0%, 100%);
+    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0;
+    border-radius: 4px;
+}
+
+body.legacy-mac .toolbar .search-bar > input[type="search"] {
+    box-shadow: 0 0 0 7px hsla(211, 96%, 48%, 0);
+    transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
+}
+
+body.legacy-mac .toolbar .search-bar > input[type="search"]:focus {
+    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
+}
+
+body.legacy-mac .toolbar .item.button:active {
+    border-top-color: hsl(0, 0%, 94%);
+    background-color: hsl(0, 0%, 89%);
+}
+
+body.window-inactive.legacy-mac .toolbar .item.button,
+body.window-inactive.legacy-mac .toolbar .search-bar > input[type="search"],
+body.window-inactive.legacy-mac .toolbar .dashboard-container {
+    border: 1px solid hsl(0, 0%, 86%);
+    background-color: hsl(0, 0%, 96%);
+    box-shadow: none;
+}
+
+body.latest-mac .toolbar .item.button,
+body.latest-mac .toolbar .search-bar > input[type="search"],
+body.latest-mac .toolbar .dashboard-container {
+    background-image: linear-gradient(hsl(0, 0%, 99%), var(--panel-background-color));
+    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px;
+
+    border-radius: 4px;
+    border: 1px solid hsl(0, 1%, 82%);
+    border-top-color: hsl(0, 0%, 83%);
+    border-bottom-color: hsl(0, 0%, 76%);
+}
+
+body.latest-mac .toolbar .search-bar > input[type="search"] {
+    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, 0 0 0 7px hsla(211, 96%, 48%, 0);
+    transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
+}
+
+body.latest-mac .toolbar .search-bar > input[type="search"]:focus {
+    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    body.latest-mac .toolbar .item.button,
+    body.latest-mac .toolbar .search-bar > input[type="search"],
+    body.latest-mac .toolbar .dashboard-container {
+        border: 0.5px solid hsl(0, 0%, 78%);
+        border-top-color: hsl(0, 0%, 80%);
+        border-bottom-color: hsl(0, 0%, 65%);
+    }
+}
+
+body.latest-mac .toolbar .item.button:active {
+    background-image: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 86%));
+    box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, inset 0 1px 1px -1px white;
+}
+
+body.latest-mac.window-inactive .toolbar .item.button,
+body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
+body.latest-mac.window-inactive .toolbar .dashboard-container {
+    opacity: 0.65;
+    border-color: hsla(0, 0%, 0%, 0.15);
+    background-color: transparent;
+    background-image: none;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    body.latest-mac.window-inactive .toolbar .item.button,
+    body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
+    body.latest-mac.window-inactive .toolbar .dashboard-container {
+        box-shadow: inset 0 0 1px 0 hsla(0, 0%, 0%, 0.1);
+    }
+}
+
+@media (max-width: 539px) {
+    .toolbar .item.download {
+        display: none;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/Toolbar.js b/Source/WebInspectorUI/UserInterface/Views/Toolbar.js
new file mode 100644
index 000000000..580d9ef66
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Toolbar.js
@@ -0,0 +1,259 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.Toolbar = class Toolbar extends WebInspector.NavigationBar
+{
+    constructor(element, navigationItems, dontAllowModeChanges)
+    {
+        super(element, navigationItems, "toolbar");
+
+        this.displayMode = WebInspector.Toolbar.DisplayMode.IconAndLabelVertical;
+        this.sizeMode = WebInspector.Toolbar.SizeMode.Normal;
+
+        this._controlSectionElement = document.createElement("div");
+        this._controlSectionElement.className = WebInspector.Toolbar.ControlSectionStyleClassName;
+        this.element.appendChild(this._controlSectionElement);
+
+        this._leftSectionElement = document.createElement("div");
+        this._leftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.LeftItemSectionStyleClassName;
+        this.element.appendChild(this._leftSectionElement);
+
+        this._centerLeftSectionElement = document.createElement("div");
+        this._centerLeftSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterLeftItemSectionStyleClassName;
+        this.element.appendChild(this._centerLeftSectionElement);
+
+        this._centerSectionElement = document.createElement("div");
+        this._centerSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterItemSectionStyleClassName;
+        this.element.appendChild(this._centerSectionElement);
+
+        this._centerRightSectionElement = document.createElement("div");
+        this._centerRightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.CenterRightItemSectionStyleClassName;
+        this.element.appendChild(this._centerRightSectionElement);
+
+        this._rightSectionElement = document.createElement("div");
+        this._rightSectionElement.className = WebInspector.Toolbar.ItemSectionStyleClassName + " " + WebInspector.Toolbar.RightItemSectionStyleClassName;
+        this.element.appendChild(this._rightSectionElement);
+
+        if (!dontAllowModeChanges)
+            this.element.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this), false);
+    }
+
+    // Public
+
+    get displayMode()
+    {
+        return this._displayMode;
+    }
+
+    set displayMode(mode)
+    {
+        if (mode === this._displayMode)
+            return;
+
+        if (this._displayMode)
+            this.element.classList.remove(this._displayMode);
+
+        // Revert the forced icon-only mode if it was applied.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal)
+            this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
+
+        this._displayMode = mode;
+
+        this.element.classList.add(mode);
+
+        this.updateLayout();
+
+        this.dispatchEventToListeners(WebInspector.Toolbar.Event.DisplayModeDidChange);
+    }
+
+    get sizeMode()
+    {
+        return this._sizeMode;
+    }
+
+    set sizeMode(mode)
+    {
+        if (mode === this._sizeMode)
+            return;
+
+        if (this._sizeMode)
+            this.element.classList.remove(this._sizeMode);
+
+        this._sizeMode = mode;
+
+        this.element.classList.add(mode);
+
+        this.updateLayout();
+
+        this.dispatchEventToListeners(WebInspector.Toolbar.Event.SizeModeDidChange);
+    }
+
+    addToolbarItem(toolbarItem, sectionIdentifier)
+    {
+        var sectionElement;
+
+        switch (sectionIdentifier) {
+        case WebInspector.Toolbar.Section.Control:
+            sectionElement = this._controlSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.Left:
+            sectionElement = this._leftSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.CenterLeft:
+            sectionElement = this._centerLeftSectionElement;
+            break;
+
+        default:
+        case WebInspector.Toolbar.Section.Center:
+            sectionElement = this._centerSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.CenterRight:
+            sectionElement = this._centerRightSectionElement;
+            break;
+
+        case WebInspector.Toolbar.Section.Right:
+            sectionElement = this._rightSectionElement;
+            break;
+        }
+
+        console.assert(sectionElement);
+
+        this.addNavigationItem(toolbarItem, sectionElement);
+    }
+
+    // Protected
+
+    layout()
+    {
+        // Bail early if our sections are not created yet. This means we are being called during construction.
+        if (!this._leftSectionElement || !this._centerSectionElement || !this._rightSectionElement)
+            return;
+
+        // Force collapsed style for JavaScript debuggables.
+        if (WebInspector.debuggableType === WebInspector.DebuggableType.JavaScript) {
+            this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+            return;
+        }
+
+        // Remove the collapsed style class to test if the items can fit at full width.
+        this.element.classList.remove(WebInspector.NavigationBar.CollapsedStyleClassName);
+
+        // Revert the forced icon-only mode if it was applied.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal) {
+            this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconOnly);
+            this.element.classList.add(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+        }
+
+        function isOverflowingToolbar()
+        {
+            var controlSectionWidth = this._controlSectionElement.realOffsetWidth;
+            var leftSectionWidth = this._leftSectionElement.realOffsetWidth;
+            var centerLeftSectionWidth = this._centerLeftSectionElement.realOffsetWidth;
+            var centerSectionWidth = this._centerSectionElement.realOffsetWidth;
+            var centerRightSectionWidth = this._centerRightSectionElement.realOffsetWidth;
+            var rightSectionWidth = this._rightSectionElement.realOffsetWidth;
+
+            var toolbarWidth = Math.round(this.element.realOffsetWidth);
+            return Math.round(controlSectionWidth + leftSectionWidth + centerLeftSectionWidth + centerSectionWidth + centerRightSectionWidth + rightSectionWidth) > toolbarWidth;
+        }
+
+        // Only the horizontal display mode supports collapsing labels.
+        // If any sections are overflowing the toolbar then force the display mode to be icon only.
+        if (this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal && isOverflowingToolbar.call(this)) {
+            this.element.classList.remove(WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+            this.element.classList.add(WebInspector.Toolbar.DisplayMode.IconOnly);
+        }
+
+        if (!isOverflowingToolbar.call(this))
+            return;
+
+        this.element.classList.add(WebInspector.NavigationBar.CollapsedStyleClassName);
+    }
+
+    // Private
+
+    _handleContextMenuEvent(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Vertical)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelVertical), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelVertical);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon and Text (Horizontal)"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal), this._displayMode === WebInspector.Toolbar.DisplayMode.IconAndLabelHorizontal);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Icon Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.IconOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.IconOnly);
+        contextMenu.appendCheckboxItem(WebInspector.UIString("Text Only"), this._changeDisplayMode.bind(this, WebInspector.Toolbar.DisplayMode.LabelOnly), this._displayMode === WebInspector.Toolbar.DisplayMode.LabelOnly);
+
+        if (this._displayMode !== WebInspector.Toolbar.DisplayMode.LabelOnly) {
+            contextMenu.appendSeparator();
+            contextMenu.appendCheckboxItem(WebInspector.UIString("Small Icons"), this._toggleSmallIcons.bind(this), this._sizeMode === WebInspector.Toolbar.SizeMode.Small);
+        }
+    }
+
+    _changeDisplayMode(displayMode)
+    {
+        this.displayMode = displayMode;
+    }
+
+    _toggleSmallIcons()
+    {
+        this.sizeMode = this._sizeMode === WebInspector.Toolbar.SizeMode.Normal ? WebInspector.Toolbar.SizeMode.Small : WebInspector.Toolbar.SizeMode.Normal;
+    }
+};
+
+WebInspector.Toolbar.StyleClassName = "toolbar";
+WebInspector.Toolbar.ControlSectionStyleClassName = "control-section";
+WebInspector.Toolbar.ItemSectionStyleClassName = "item-section";
+WebInspector.Toolbar.LeftItemSectionStyleClassName = "left";
+WebInspector.Toolbar.CenterLeftItemSectionStyleClassName = "center-left";
+WebInspector.Toolbar.CenterItemSectionStyleClassName = "center";
+WebInspector.Toolbar.CenterRightItemSectionStyleClassName = "center-right";
+WebInspector.Toolbar.RightItemSectionStyleClassName = "right";
+
+WebInspector.Toolbar.Event = {
+    DisplayModeDidChange: "toolbar-display-mode-did-change",
+    SizeModeDidChange: "toolbar-size-mode-did-change"
+};
+
+WebInspector.Toolbar.Section = {
+    Control: "control",
+    Left: "left",
+    CenterLeft: "center-left",
+    Center: "center",
+    CenterRight: "center-right",
+    Right: "right"
+};
+
+WebInspector.Toolbar.DisplayMode = {
+    IconAndLabelVertical: "icon-and-label-vertical",
+    IconAndLabelHorizontal: "icon-and-label-horizontal",
+    IconOnly: "icon-only",
+    LabelOnly: "label-only"
+};
+
+WebInspector.Toolbar.SizeMode = {
+    Normal: "normal-size",
+    Small: "small-size"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css b/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css
new file mode 100644
index 000000000..c79762c1a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item > .status > .status-button {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.item > .status > .status-button {
+    color: hsl(0, 0%, 50%);
+}
+
+:matches(:focus, .force-focus) .item.selected > .status > .status-button {
+    color: white;
+}
+
+.item.selected > .status > .status-button:active {
+    opacity: 0.75;
+}
+
+.item > .status > .status-button.disabled {
+    opacity: 0.4 !important;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.js b/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.js
new file mode 100644
index 000000000..2ee3ac8b0
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeElementStatusButton.js
@@ -0,0 +1,86 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TreeElementStatusButton = class TreeElementStatusButton extends WebInspector.Object
+{
+    constructor(element)
+    {
+        super();
+
+        console.assert(element);
+
+        this._element = element;
+        this._element.classList.add("status-button");
+        this._element.addEventListener("click", this._clicked.bind(this));
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get hidden()
+    {
+        return !this._element.classList.contains(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
+    }
+
+    set hidden(flag)
+    {
+        this._element.classList.toggle("hidden", flag);
+    }
+
+    get enabled()
+    {
+        return !this._element.classList.contains(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
+    }
+
+    set enabled(flag)
+    {
+        if (flag)
+            this._element.classList.remove(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
+        else
+            this._element.classList.add(WebInspector.TreeElementStatusButton.DisabledStyleClassName);
+    }
+
+    // Private
+
+    _clicked(event)
+    {
+        if (!this.enabled)
+            return;
+
+        event.stopPropagation();
+
+        this.dispatchEventToListeners(WebInspector.TreeElementStatusButton.Event.Clicked, event);
+    }
+};
+
+WebInspector.TreeElementStatusButton.DisabledStyleClassName = "disabled";
+
+WebInspector.TreeElementStatusButton.Event = {
+    Clicked: "status-button-clicked"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
new file mode 100644
index 000000000..ec592ccaa
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.css
@@ -0,0 +1,231 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.tree-outline,
+.tree-outline .children {
+    padding: 0;
+    margin: 0;
+
+    outline: none;
+
+    list-style: none;
+}
+
+.tree-outline .children {
+    display: none;
+}
+
+.tree-outline .children.expanded {
+    display: block;
+}
+
+.tree-outline .item {
+    height: 20px;
+
+    padding: 0 5px;
+
+    border-top: 1px solid transparent;
+
+    white-space: nowrap;
+}
+
+.tree-outline.compact .item {
+    height: inherit;
+}
+
+.tree-outline.large .item {
+    height: 36px;
+    line-height: 34px;
+}
+
+.tree-outline.hide-disclosure-buttons > .children {
+    display: none;
+}
+
+.tree-outline > .children.hide-disclosure-buttons > .children {
+    display: none;
+}
+
+.tree-outline:not(.hide-disclosure-buttons) .item:not(.parent) > .icon {
+    margin-left: 16px;
+}
+
+.tree-outline .item .disclosure-button {
+    display: none;
+
+    float: left;
+
+    width: 16px;
+    height: 16px;
+
+    border: 0;
+
+    background-color: transparent;
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 13px 13px;
+
+    -webkit-appearance: none;
+}
+
+.tree-outline.hide-disclosure-buttons .item .disclosure-button {
+    display: none;
+}
+
+.tree-outline .item.parent .disclosure-button {
+    display: block;
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#closed-selected) !important;
+}
+
+.tree-outline .item.expanded .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected.expanded .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#open-selected) !important;
+}
+
+.tree-outline .item .icon {
+    float: left;
+    position: relative;
+
+    width: 16px;
+    height: 16px;
+
+    margin-top: 1px;
+    margin-right: 3px;
+}
+
+.tree-outline.compact .item .icon {
+    margin-top: 0;
+}
+
+.tree-outline.large .item .icon {
+    width: 32px;
+    margin-right: 6px;
+}
+
+.tree-outline .item .status {
+    float: right;
+
+    margin-left: 4px;
+    margin-top: 1px;
+
+    line-height: 1em;
+}
+
+.tree-outline.large .item .status {
+    margin-top: 9px;
+}
+
+.tree-outline .item .status:empty {
+    display: none;
+}
+
+.tree-outline .item.selected {
+    background-color: hsl(0, 0%, 83%);
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected {
+    color: white;
+    background-color: hsl(209, 100%, 49%);
+}
+
+body.window-inactive .tree-outline .item.selected {
+    background-color: hsl(0, 0%, 83%);
+}
+
+.tree-outline .item .titles {
+    position: relative;
+    top: 2px;
+
+    line-height: normal;
+
+    padding-bottom: 1px;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.tree-outline.compact .item .titles {
+    top: 0;
+}
+
+.tree-outline.large .item .titles {
+    top: 5px;
+    line-height: 11px;
+}
+
+.tree-outline .item .highlighted {
+    background-color: hsla(53, 83%, 53%, 0.2);
+    border-bottom: 1px solid hsl(47, 82%, 60%);
+}
+
+.tree-outline.large .item .titles.no-subtitle {
+    top: 10px;
+}
+
+.tree-outline .item .title::after {
+    content: "\A"; /* Newline */
+    white-space: pre;
+}
+
+.tree-outline .item .subtitle {
+    font-size: inherit;
+    color: hsla(0, 0%, 0%, 0.7);
+}
+
+.tree-outline.large .item .subtitle {
+    font-size: 9px;
+}
+
+.tree-outline:matches(:focus, .force-focus) .item.selected .subtitle {
+    color: hsla(0, 0%, 100%, 0.9);
+}
+
+.tree-outline .item .titles.no-subtitle .subtitle,
+.tree-outline .item .subtitle:empty {
+    display: none;
+}
+
+.tree-outline:not(.large) .item .status .indeterminate-progress-spinner {
+    margin-top: 1px;
+    width: 14px;
+    height: 14px;
+}
+
+.tree-outline .item .title::after {
+    content: "";
+}
+
+.tree-outline .item .subtitle::before,
+.tree-outline .item .alternate-subtitle::before {
+    content: " — ";
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
new file mode 100644
index 000000000..bf6cba0f1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutline.js
@@ -0,0 +1,1234 @@
+/*
+ * Copyright (C) 2007, 2013, 2015 Apple Inc.  All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ *
+ * 1.  Redistributions of source code must retain the above copyright
+ *     notice, this list of conditions and the following disclaimer.
+ * 2.  Redistributions in binary form must reproduce the above copyright
+ *     notice, this list of conditions and the following disclaimer in the
+ *     documentation and/or other materials provided with the distribution.
+ * 3.  Neither the name of Apple Inc. ("Apple") nor the names of
+ *     its contributors may be used to endorse or promote products derived
+ *     from this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
+ * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TreeOutline = class TreeOutline extends WebInspector.Object
+{
+    constructor(element)
+    {
+        super();
+
+        this.element = element || document.createElement("ol");
+        this.element.classList.add(WebInspector.TreeOutline.ElementStyleClassName);
+
+        this.children = [];
+        this.selectedTreeElement = null;
+        this._childrenListNode = this.element;
+        this._childrenListNode.removeChildren();
+        this._knownTreeElements = [];
+        this._treeElementsExpandedState = [];
+        this.allowsRepeatSelection = false;
+        this.root = true;
+        this.hasChildren = false;
+        this.expanded = true;
+        this.selected = false;
+        this.treeOutline = this;
+        this._hidden = false;
+        this._compact = false;
+        this._large = false;
+        this._disclosureButtons = true;
+        this._customIndent = false;
+
+        this._childrenListNode.tabIndex = 0;
+        this._childrenListNode.addEventListener("keydown", this._treeKeyDown.bind(this), true);
+
+        WebInspector.TreeOutline._generateStyleRulesIfNeeded();
+    }
+
+    // Public
+
+    get hidden()
+    {
+        return this._hidden;
+    }
+
+    set hidden(x)
+    {
+        if (this._hidden === x)
+            return;
+
+        this._hidden = x;
+        this.element.hidden = this._hidden;
+    }
+
+    get compact()
+    {
+        return this._compact;
+    }
+
+    set compact(x)
+    {
+        if (this._compact === x)
+            return;
+
+        this._compact = x;
+        if (this._compact)
+            this.large = false;
+
+        this.element.classList.toggle("compact", this._compact);
+    }
+
+    get large()
+    {
+        return this._large;
+    }
+
+    set large(x)
+    {
+        if (this._large === x)
+            return;
+
+        this._large = x;
+        if (this._large)
+            this.compact = false;
+
+        this.element.classList.toggle("large", this._large);
+    }
+
+    get disclosureButtons()
+    {
+        return this._disclosureButtons;
+    }
+
+    set disclosureButtons(x)
+    {
+        if (this._disclosureButtons === x)
+            return;
+
+        this._disclosureButtons = x;
+        this.element.classList.toggle("hide-disclosure-buttons", !this._disclosureButtons);
+    }
+
+    get customIndent()
+    {
+        return this._customIndent;
+    }
+
+    set customIndent(x)
+    {
+        if (this._customIndent === x)
+            return;
+
+        this._customIndent = x;
+        this.element.classList.toggle(WebInspector.TreeOutline.CustomIndentStyleClassName, this._customIndent);
+    }
+
+    appendChild(child)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        var lastChild = this.children[this.children.length - 1];
+        if (lastChild) {
+            lastChild.nextSibling = child;
+            child.previousSibling = lastChild;
+        } else {
+            child.previousSibling = null;
+            child.nextSibling = null;
+        }
+
+        var isFirstChild = !this.children.length;
+
+        this.children.push(child);
+        this.hasChildren = true;
+        child.parent = this;
+        child.treeOutline = this.treeOutline;
+        child.treeOutline._rememberTreeElement(child);
+
+        var current = child.children[0];
+        while (current) {
+            current.treeOutline = this.treeOutline;
+            current.treeOutline._rememberTreeElement(current);
+            current = current.traverseNextTreeElement(false, child, true);
+        }
+
+        if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
+
+        if (this._childrenListNode)
+            child._attach();
+
+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});
+
+        if (isFirstChild && this.expanded)
+            this.expand();
+    }
+
+    insertChild(child, index)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        var previousChild = (index > 0 ? this.children[index - 1] : null);
+        if (previousChild) {
+            previousChild.nextSibling = child;
+            child.previousSibling = previousChild;
+        } else {
+            child.previousSibling = null;
+        }
+
+        var nextChild = this.children[index];
+        if (nextChild) {
+            nextChild.previousSibling = child;
+            child.nextSibling = nextChild;
+        } else {
+            child.nextSibling = null;
+        }
+
+        var isFirstChild = !this.children.length;
+
+        this.children.splice(index, 0, child);
+        this.hasChildren = true;
+        child.parent = this;
+        child.treeOutline = this.treeOutline;
+        child.treeOutline._rememberTreeElement(child);
+
+        var current = child.children[0];
+        while (current) {
+            current.treeOutline = this.treeOutline;
+            current.treeOutline._rememberTreeElement(current);
+            current = current.traverseNextTreeElement(false, child, true);
+        }
+
+        if (child.hasChildren && child.treeOutline._treeElementsExpandedState[child.identifier] !== undefined)
+            child.expanded = child.treeOutline._treeElementsExpandedState[child.identifier];
+
+        if (this._childrenListNode)
+            child._attach();
+
+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementAdded, {element: child});
+
+        if (isFirstChild && this.expanded)
+            this.expand();
+    }
+
+    removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling)
+    {
+        console.assert(childIndex >= 0 && childIndex < this.children.length);
+        if (childIndex < 0 || childIndex >= this.children.length)
+            return;
+
+        let child = this.children[childIndex];
+        this.children.splice(childIndex, 1);
+
+        let parent = child.parent;
+        if (child.deselect(suppressOnDeselect)) {
+            if (child.previousSibling && !suppressSelectSibling)
+                child.previousSibling.select(true, false);
+            else if (child.nextSibling && !suppressSelectSibling)
+                child.nextSibling.select(true, false);
+            else if (!suppressSelectSibling)
+                parent.select(true, false);
+        }
+
+        if (child.previousSibling)
+            child.previousSibling.nextSibling = child.nextSibling;
+        if (child.nextSibling)
+            child.nextSibling.previousSibling = child.previousSibling;
+
+        let treeOutline = child.treeOutline;
+        if (treeOutline) {
+            treeOutline._forgetTreeElement(child);
+            treeOutline._forgetChildrenRecursive(child);
+        }
+
+        child._detach();
+        child.treeOutline = null;
+        child.parent = null;
+        child.nextSibling = null;
+        child.previousSibling = null;
+
+        if (treeOutline)
+            treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
+    }
+
+    removeChild(child, suppressOnDeselect, suppressSelectSibling)
+    {
+        console.assert(child);
+        if (!child)
+            return;
+
+        var childIndex = this.children.indexOf(child);
+        console.assert(childIndex !== -1);
+        if (childIndex === -1)
+            return;
+
+        this.removeChildAtIndex(childIndex, suppressOnDeselect, suppressSelectSibling);
+
+        if (!this.children.length) {
+            if (this._listItemNode)
+                this._listItemNode.classList.remove("parent");
+            this.hasChildren = false;
+        }
+    }
+
+    removeChildren(suppressOnDeselect)
+    {
+        for (let child of this.children) {
+            child.deselect(suppressOnDeselect);
+
+            let treeOutline = child.treeOutline;
+            if (treeOutline) {
+                treeOutline._forgetTreeElement(child);
+                treeOutline._forgetChildrenRecursive(child);
+            }
+
+            child._detach();
+            child.treeOutline = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+
+            if (treeOutline)
+                treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
+        }
+
+        this.children = [];
+    }
+
+    removeChildrenRecursive(suppressOnDeselect)
+    {
+        let childrenToRemove = this.children;
+        let child = this.children[0];
+        while (child) {
+            if (child.children.length)
+                childrenToRemove = childrenToRemove.concat(child.children);
+            child = child.traverseNextTreeElement(false, this, true);
+        }
+
+        for (let child of childrenToRemove) {
+            child = childrenToRemove[i];
+            child.deselect(suppressOnDeselect);
+
+            let treeOutline = child.treeOutline;
+            if (treeOutline)
+                treeOutline._forgetTreeElement(child);
+
+            child._detach();
+            child.children = [];
+            child.treeOutline = null;
+            child.parent = null;
+            child.nextSibling = null;
+            child.previousSibling = null;
+
+            if (treeOutline)
+                treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementRemoved, {element: child});
+        }
+
+        this.children = [];
+    }
+
+    _rememberTreeElement(element)
+    {
+        if (!this._knownTreeElements[element.identifier])
+            this._knownTreeElements[element.identifier] = [];
+
+        // check if the element is already known
+        var elements = this._knownTreeElements[element.identifier];
+        if (elements.indexOf(element) !== -1)
+            return;
+
+        // add the element
+        elements.push(element);
+    }
+
+    _forgetTreeElement(element)
+    {
+        if (this.selectedTreeElement === element) {
+            element.deselect(true)
+            this.selectedTreeElement = null;
+        }
+        if (this._knownTreeElements[element.identifier])
+            this._knownTreeElements[element.identifier].remove(element, true);
+    }
+
+    _forgetChildrenRecursive(parentElement)
+    {
+        var child = parentElement.children[0];
+        while (child) {
+            this._forgetTreeElement(child);
+            child = child.traverseNextTreeElement(false, parentElement, true);
+        }
+    }
+
+    getCachedTreeElement(representedObject)
+    {
+        if (!representedObject)
+            return null;
+
+        if (representedObject.__treeElementIdentifier) {
+            // If this representedObject has a tree element identifier, and it is a known TreeElement
+            // in our tree we can just return that tree element.
+            var elements = this._knownTreeElements[representedObject.__treeElementIdentifier];
+            if (elements) {
+                for (var i = 0; i < elements.length; ++i)
+                    if (elements[i].representedObject === representedObject)
+                        return elements[i];
+            }
+        }
+        return null;
+    }
+
+    findTreeElement(representedObject, isAncestor, getParent)
+    {
+        if (!representedObject)
+            return null;
+
+        var cachedElement = this.getCachedTreeElement(representedObject);
+        if (cachedElement)
+            return cachedElement;
+
+        // The representedObject isn't known, so we start at the top of the tree and work down to find the first
+        // tree element that represents representedObject or one of its ancestors.
+        var item;
+        var found = false;
+        for (var i = 0; i < this.children.length; ++i) {
+            item = this.children[i];
+            if (item.representedObject === representedObject || (isAncestor && isAncestor(item.representedObject, representedObject))) {
+                found = true;
+                break;
+            }
+        }
+
+        if (!found)
+            return null;
+
+        // Make sure the item that we found is connected to the root of the tree.
+        // Build up a list of representedObject's ancestors that aren't already in our tree.
+        var ancestors = [];
+        var currentObject = representedObject;
+        while (currentObject) {
+            ancestors.unshift(currentObject);
+            if (currentObject === item.representedObject)
+                break;
+            currentObject = getParent(currentObject);
+        }
+
+        // For each of those ancestors we populate them to fill in the tree.
+        for (var i = 0; i < ancestors.length; ++i) {
+            // Make sure we don't call findTreeElement with the same representedObject
+            // again, to prevent infinite recursion.
+            if (ancestors[i] === representedObject)
+                continue;
+
+            // FIXME: we could do something faster than findTreeElement since we will know the next
+            // ancestor exists in the tree.
+            item = this.findTreeElement(ancestors[i], isAncestor, getParent);
+            if (item)
+                item.onpopulate();
+        }
+
+        return this.getCachedTreeElement(representedObject);
+    }
+
+    _treeElementDidChange(treeElement)
+    {
+        if (treeElement.treeOutline !== this)
+            return;
+
+        this.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDidChange, {element: treeElement});
+    }
+
+    treeElementFromNode(node)
+    {
+        var listNode = node.enclosingNodeOrSelfWithNodeNameInArray(["ol", "li"]);
+        if (listNode)
+            return listNode.parentTreeElement || listNode.treeElement;
+        return null;
+    }
+
+    treeElementFromPoint(x, y)
+    {
+        var node = this._childrenListNode.ownerDocument.elementFromPoint(x, y);
+        if (!node)
+            return null;
+
+        return this.treeElementFromNode(node);
+    }
+
+    _treeKeyDown(event)
+    {
+        if (event.target !== this._childrenListNode)
+            return;
+
+        if (!this.selectedTreeElement || event.shiftKey || event.metaKey || event.ctrlKey)
+            return;
+
+        var handled = false;
+        var nextSelectedElement;
+        if (event.keyIdentifier === "Up" && !event.altKey) {
+            nextSelectedElement = this.selectedTreeElement.traversePreviousTreeElement(true);
+            while (nextSelectedElement && !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.traversePreviousTreeElement(true);
+            handled = nextSelectedElement ? true : false;
+        } else if (event.keyIdentifier === "Down" && !event.altKey) {
+            nextSelectedElement = this.selectedTreeElement.traverseNextTreeElement(true);
+            while (nextSelectedElement && !nextSelectedElement.selectable)
+                nextSelectedElement = nextSelectedElement.traverseNextTreeElement(true);
+            handled = nextSelectedElement ? true : false;
+        } else if (event.keyIdentifier === "Left") {
+            if (this.selectedTreeElement.expanded) {
+                if (event.altKey)
+                    this.selectedTreeElement.collapseRecursively();
+                else
+                    this.selectedTreeElement.collapse();
+                handled = true;
+            } else if (this.selectedTreeElement.parent && !this.selectedTreeElement.parent.root) {
+                handled = true;
+                if (this.selectedTreeElement.parent.selectable) {
+                    nextSelectedElement = this.selectedTreeElement.parent;
+                    while (nextSelectedElement && !nextSelectedElement.selectable)
+                        nextSelectedElement = nextSelectedElement.parent;
+                    handled = nextSelectedElement ? true : false;
+                } else if (this.selectedTreeElement.parent)
+                    this.selectedTreeElement.parent.collapse();
+            }
+        } else if (event.keyIdentifier === "Right") {
+            if (!this.selectedTreeElement.revealed()) {
+                this.selectedTreeElement.reveal();
+                handled = true;
+            } else if (this.selectedTreeElement.hasChildren) {
+                handled = true;
+                if (this.selectedTreeElement.expanded) {
+                    nextSelectedElement = this.selectedTreeElement.children[0];
+                    while (nextSelectedElement && !nextSelectedElement.selectable)
+                        nextSelectedElement = nextSelectedElement.nextSibling;
+                    handled = nextSelectedElement ? true : false;
+                } else {
+                    if (event.altKey)
+                        this.selectedTreeElement.expandRecursively();
+                    else
+                        this.selectedTreeElement.expand();
+                }
+            }
+        } else if (event.keyCode === 8 /* Backspace */ || event.keyCode === 46 /* Delete */) {
+            if (this.selectedTreeElement.ondelete)
+                handled = this.selectedTreeElement.ondelete();
+            if (!handled && this.treeOutline.ondelete)
+                handled = this.treeOutline.ondelete(this.selectedTreeElement);
+        } else if (isEnterKey(event)) {
+            if (this.selectedTreeElement.onenter)
+                handled = this.selectedTreeElement.onenter();
+            if (!handled && this.treeOutline.onenter)
+                handled = this.treeOutline.onenter(this.selectedTreeElement);
+        } else if (event.keyIdentifier === "U+0020" /* Space */) {
+            if (this.selectedTreeElement.onspace)
+                handled = this.selectedTreeElement.onspace();
+            if (!handled && this.treeOutline.onspace)
+                handled = this.treeOutline.onspace(this.selectedTreeElement);
+        }
+
+        if (nextSelectedElement) {
+            nextSelectedElement.reveal();
+            nextSelectedElement.select(false, true);
+        }
+
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+
+    expand()
+    {
+        // this is the root, do nothing
+    }
+
+    collapse()
+    {
+        // this is the root, do nothing
+    }
+
+    revealed()
+    {
+        return true;
+    }
+
+    reveal()
+    {
+        // this is the root, do nothing
+    }
+
+    select()
+    {
+        // this is the root, do nothing
+    }
+
+    revealAndSelect(omitFocus)
+    {
+        // this is the root, do nothing
+    }
+
+    get selectedTreeElementIndex()
+    {
+        if (!this.hasChildren || !this.selectedTreeElement)
+            return;
+
+        for (var i = 0; i < this.children.length; ++i) {
+            if (this.children[i] === this.selectedTreeElement)
+                return i;
+        }
+
+        return false;
+    }
+
+    // Private
+
+    static _generateStyleRulesIfNeeded()
+    {
+        if (WebInspector.TreeOutline._styleElement)
+           return;
+
+        WebInspector.TreeOutline._styleElement = document.createElement("style");
+
+        let maximumTreeDepth = 32;
+        let baseLeftPadding = 5; // Matches the padding in TreeOutline.css for the item class. Keep in sync.
+        let depthPadding = 10;
+
+        let styleText = "";
+        let childrenSubstring = "";
+        for (let i = 1; i <= maximumTreeDepth; ++i) {
+            // Keep all the elements at the same depth once the maximum is reached.
+            childrenSubstring += i === maximumTreeDepth ? " .children" : " > .children";
+            styleText += `.${WebInspector.TreeOutline.ElementStyleClassName}:not(.${WebInspector.TreeOutline.CustomIndentStyleClassName})${childrenSubstring} > .item { `;
+            styleText += "padding-left: " + (baseLeftPadding + (depthPadding * i)) + "px; }\n";
+        }
+
+        WebInspector.TreeOutline._styleElement.textContent = styleText;
+
+        document.head.appendChild(WebInspector.TreeOutline._styleElement);
+    }
+};
+
+WebInspector.TreeOutline._styleElement = null;
+
+WebInspector.TreeOutline.ElementStyleClassName = "tree-outline";
+WebInspector.TreeOutline.CustomIndentStyleClassName = "custom-indent";
+
+WebInspector.TreeOutline.Event = {
+    ElementAdded: Symbol("element-added"),
+    ElementDidChange: Symbol("element-did-change"),
+    ElementRemoved: Symbol("element-removed"),
+    ElementDisclosureDidChanged: Symbol("element-disclosure-did-change"),
+    ElementVisibilityDidChange: Symbol("element-visbility-did-change"),
+    SelectionDidChange: Symbol("selection-did-change")
+};
+
+WebInspector.TreeOutline._knownTreeElementNextIdentifier = 1;
+
+WebInspector.TreeElement = class TreeElement extends WebInspector.Object
+{
+    constructor(title, representedObject, hasChildren)
+    {
+        super();
+
+        this._title = title;
+        this.representedObject = (representedObject || {});
+
+        if (this.representedObject.__treeElementIdentifier)
+            this.identifier = this.representedObject.__treeElementIdentifier;
+        else {
+            this.identifier = WebInspector.TreeOutline._knownTreeElementNextIdentifier++;
+            this.representedObject.__treeElementIdentifier = this.identifier;
+        }
+
+        this._hidden = false;
+        this._selectable = true;
+        this.expanded = false;
+        this.selected = false;
+        this.hasChildren = hasChildren;
+        this.children = [];
+        this.treeOutline = null;
+        this.parent = null;
+        this.previousSibling = null;
+        this.nextSibling = null;
+        this._listItemNode = null;
+    }
+
+    // Methods
+
+    appendChild() { return WebInspector.TreeOutline.prototype.appendChild.apply(this, arguments); }
+    insertChild() { return WebInspector.TreeOutline.prototype.insertChild.apply(this, arguments); }
+    removeChild() { return WebInspector.TreeOutline.prototype.removeChild.apply(this, arguments); }
+    removeChildAtIndex() { return WebInspector.TreeOutline.prototype.removeChildAtIndex.apply(this, arguments); }
+    removeChildren() { return WebInspector.TreeOutline.prototype.removeChildren.apply(this, arguments); }
+    removeChildrenRecursive() { return WebInspector.TreeOutline.prototype.removeChildrenRecursive.apply(this, arguments); }
+
+    get arrowToggleWidth()
+    {
+        return 10;
+    }
+
+    get selectable()
+    {
+        if (this._hidden)
+            return false;
+        return this._selectable;
+    }
+
+    set selectable(x)
+    {
+        this._selectable = x;
+    }
+
+    get listItemElement()
+    {
+        return this._listItemNode;
+    }
+
+    get title()
+    {
+        return this._title;
+    }
+
+    set title(x)
+    {
+        this._title = x;
+        this._setListItemNodeContent();
+        this.didChange();
+    }
+
+    get titleHTML()
+    {
+        return this._titleHTML;
+    }
+
+    set titleHTML(x)
+    {
+        this._titleHTML = x;
+        this._setListItemNodeContent();
+        this.didChange();
+    }
+
+    get tooltip()
+    {
+        return this._tooltip;
+    }
+
+    set tooltip(x)
+    {
+        this._tooltip = x;
+        if (this._listItemNode)
+            this._listItemNode.title = x ? x : "";
+    }
+
+    get hasChildren()
+    {
+        return this._hasChildren;
+    }
+
+    set hasChildren(x)
+    {
+        if (this._hasChildren === x)
+            return;
+
+        this._hasChildren = x;
+
+        if (!this._listItemNode)
+            return;
+
+        if (x)
+            this._listItemNode.classList.add("parent");
+        else {
+            this._listItemNode.classList.remove("parent");
+            this.collapse();
+        }
+
+        this.didChange();
+    }
+
+    get hidden()
+    {
+        return this._hidden;
+    }
+
+    set hidden(x)
+    {
+        if (this._hidden === x)
+            return;
+
+        this._hidden = x;
+
+        if (this._listItemNode)
+            this._listItemNode.hidden = this._hidden;
+        if (this._childrenListNode)
+            this._childrenListNode.hidden = this._hidden;
+
+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementVisibilityDidChange, {element: this});
+    }
+
+    get shouldRefreshChildren()
+    {
+        return this._shouldRefreshChildren;
+    }
+
+    set shouldRefreshChildren(x)
+    {
+        this._shouldRefreshChildren = x;
+        if (x && this.expanded)
+            this.expand();
+    }
+
+    _fireDidChange()
+    {
+        this._didChangeTimeoutIdentifier = undefined;
+
+        if (this.treeOutline)
+            this.treeOutline._treeElementDidChange(this);
+    }
+
+    didChange()
+    {
+        if (!this.treeOutline)
+            return;
+
+        // Prevent telling the TreeOutline multiple times in a row by delaying it with a timeout.
+        if (!this._didChangeTimeoutIdentifier)
+            this._didChangeTimeoutIdentifier = setTimeout(this._fireDidChange.bind(this), 0);
+    }
+
+    _setListItemNodeContent()
+    {
+        if (!this._listItemNode)
+            return;
+
+        if (!this._titleHTML && !this._title)
+            this._listItemNode.removeChildren();
+        else if (typeof this._titleHTML === "string")
+            this._listItemNode.innerHTML = this._titleHTML;
+        else if (typeof this._title === "string")
+            this._listItemNode.textContent = this._title;
+        else {
+            this._listItemNode.removeChildren();
+            if (this._title.parentNode)
+                this._title.parentNode.removeChild(this._title);
+            this._listItemNode.appendChild(this._title);
+        }
+    }
+
+    _attach()
+    {
+        if (!this._listItemNode || this.parent._shouldRefreshChildren) {
+            if (this._listItemNode && this._listItemNode.parentNode)
+                this._listItemNode.parentNode.removeChild(this._listItemNode);
+
+            this._listItemNode = this.treeOutline._childrenListNode.ownerDocument.createElement("li");
+            this._listItemNode.treeElement = this;
+            this._setListItemNodeContent();
+            this._listItemNode.title = this._tooltip ? this._tooltip : "";
+            this._listItemNode.hidden = this.hidden;
+
+            if (this.hasChildren)
+                this._listItemNode.classList.add("parent");
+            if (this.expanded)
+                this._listItemNode.classList.add("expanded");
+            if (this.selected)
+                this._listItemNode.classList.add("selected");
+
+            this._listItemNode.addEventListener("mousedown", WebInspector.TreeElement.treeElementMouseDown);
+            this._listItemNode.addEventListener("click", WebInspector.TreeElement.treeElementToggled);
+            this._listItemNode.addEventListener("dblclick", WebInspector.TreeElement.treeElementDoubleClicked);
+
+            if (this.onattach)
+                this.onattach(this);
+        }
+
+        var nextSibling = null;
+        if (this.nextSibling && this.nextSibling._listItemNode && this.nextSibling._listItemNode.parentNode === this.parent._childrenListNode)
+            nextSibling = this.nextSibling._listItemNode;
+        this.parent._childrenListNode.insertBefore(this._listItemNode, nextSibling);
+        if (this._childrenListNode)
+            this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
+        if (this.selected)
+            this.select();
+        if (this.expanded)
+            this.expand();
+    }
+
+    _detach()
+    {
+        if (this.ondetach)
+            this.ondetach(this);
+        if (this._listItemNode && this._listItemNode.parentNode)
+            this._listItemNode.parentNode.removeChild(this._listItemNode);
+        if (this._childrenListNode && this._childrenListNode.parentNode)
+            this._childrenListNode.parentNode.removeChild(this._childrenListNode);
+    }
+
+    static treeElementMouseDown(event)
+    {
+        var element = event.currentTarget;
+        if (!element || !element.treeElement || !element.treeElement.selectable)
+            return;
+
+        if (element.treeElement.isEventWithinDisclosureTriangle(event)) {
+            event.preventDefault();
+            return;
+        }
+
+        element.treeElement.selectOnMouseDown(event);
+    }
+
+    static treeElementToggled(event)
+    {
+        var element = event.currentTarget;
+        if (!element || !element.treeElement)
+            return;
+
+        var toggleOnClick = element.treeElement.toggleOnClick && !element.treeElement.selectable;
+        var isInTriangle = element.treeElement.isEventWithinDisclosureTriangle(event);
+        if (!toggleOnClick && !isInTriangle)
+            return;
+
+        if (element.treeElement.expanded) {
+            if (event.altKey)
+                element.treeElement.collapseRecursively();
+            else
+                element.treeElement.collapse();
+        } else {
+            if (event.altKey)
+                element.treeElement.expandRecursively();
+            else
+                element.treeElement.expand();
+        }
+        event.stopPropagation();
+    }
+
+    static treeElementDoubleClicked(event)
+    {
+        var element = event.currentTarget;
+        if (!element || !element.treeElement)
+            return;
+
+        if (element.treeElement.isEventWithinDisclosureTriangle(event))
+            return;
+
+        if (element.treeElement.ondblclick)
+            element.treeElement.ondblclick.call(element.treeElement, event);
+        else if (element.treeElement.hasChildren && !element.treeElement.expanded)
+            element.treeElement.expand();
+    }
+
+    collapse()
+    {
+        if (this._listItemNode)
+            this._listItemNode.classList.remove("expanded");
+        if (this._childrenListNode)
+            this._childrenListNode.classList.remove("expanded");
+
+        this.expanded = false;
+        if (this.treeOutline)
+            this.treeOutline._treeElementsExpandedState[this.identifier] = false;
+
+        if (this.oncollapse)
+            this.oncollapse(this);
+
+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
+    }
+
+    collapseRecursively()
+    {
+        var item = this;
+        while (item) {
+            if (item.expanded)
+                item.collapse();
+            item = item.traverseNextTreeElement(false, this, true);
+        }
+    }
+
+    expand()
+    {
+        if (this.expanded && !this._shouldRefreshChildren && this._childrenListNode)
+            return;
+
+        // Set this before onpopulate. Since onpopulate can add elements and dispatch an ElementAdded event,
+        // this makes sure the expanded flag is true before calling those functions. This prevents the
+        // possibility of an infinite loop if onpopulate or an event handler were to call expand.
+
+        this.expanded = true;
+        if (this.treeOutline)
+            this.treeOutline._treeElementsExpandedState[this.identifier] = true;
+
+        // If there are no children, return. We will be expanded once we have children.
+        if (!this.hasChildren)
+            return;
+
+        if (this.treeOutline && (!this._childrenListNode || this._shouldRefreshChildren)) {
+            if (this._childrenListNode && this._childrenListNode.parentNode)
+                this._childrenListNode.parentNode.removeChild(this._childrenListNode);
+
+            this._childrenListNode = this.treeOutline._childrenListNode.ownerDocument.createElement("ol");
+            this._childrenListNode.parentTreeElement = this;
+            this._childrenListNode.classList.add("children");
+            this._childrenListNode.hidden = this.hidden;
+
+            this.onpopulate();
+
+            for (var i = 0; i < this.children.length; ++i)
+                this.children[i]._attach();
+
+            this._shouldRefreshChildren = false;
+        }
+
+        if (this._listItemNode) {
+            this._listItemNode.classList.add("expanded");
+            if (this._childrenListNode && this._childrenListNode.parentNode !== this._listItemNode.parentNode)
+                this.parent._childrenListNode.insertBefore(this._childrenListNode, this._listItemNode.nextSibling);
+        }
+
+        if (this._childrenListNode)
+            this._childrenListNode.classList.add("expanded");
+
+        if (this.onexpand)
+            this.onexpand(this);
+
+        if (this.treeOutline)
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, {element: this});
+    }
+
+    expandRecursively(maxDepth)
+    {
+        var item = this;
+        var info = {};
+        var depth = 0;
+
+        // The Inspector uses TreeOutlines to represents object properties, so recursive expansion
+        // in some case can be infinite, since JavaScript objects can hold circular references.
+        // So default to a recursion cap of 3 levels, since that gives fairly good results.
+        if (maxDepth === undefined)
+            maxDepth = 3;
+
+        while (item) {
+            if (depth < maxDepth)
+                item.expand();
+            item = item.traverseNextTreeElement(false, this, (depth >= maxDepth), info);
+            depth += info.depthChange;
+        }
+    }
+
+    hasAncestor(ancestor)
+        {
+        if (!ancestor)
+            return false;
+
+        var currentNode = this.parent;
+        while (currentNode) {
+            if (ancestor === currentNode)
+                return true;
+            currentNode = currentNode.parent;
+        }
+
+        return false;
+    }
+
+    reveal()
+    {
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (!currentAncestor.expanded)
+                currentAncestor.expand();
+            currentAncestor = currentAncestor.parent;
+        }
+
+        if (this.onreveal)
+            this.onreveal(this);
+    }
+
+    revealed(ignoreHidden)
+    {
+        if (!ignoreHidden && this.hidden)
+            return false;
+
+        var currentAncestor = this.parent;
+        while (currentAncestor && !currentAncestor.root) {
+            if (!currentAncestor.expanded)
+                return false;
+            if (!ignoreHidden && currentAncestor.hidden)
+                return false;
+            currentAncestor = currentAncestor.parent;
+        }
+
+        return true;
+    }
+
+    selectOnMouseDown(event)
+    {
+        this.select(false, true);
+    }
+
+    select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
+    {
+        if (!this.treeOutline || !this.selectable)
+            return;
+
+        if (this.selected && !this.treeOutline.allowsRepeatSelection)
+            return;
+
+        if (!omitFocus)
+            this.treeOutline._childrenListNode.focus();
+
+        // Focusing on another node may detach "this" from tree.
+        let treeOutline = this.treeOutline;
+        if (!treeOutline)
+            return;
+
+        treeOutline.processingSelectionChange = true;
+
+        // Prevent dispatching a SelectionDidChange event for the deselected element if
+        // it will be dispatched for the selected element. The event data includes both
+        // the selected and deselected elements, so one event is.
+        if (!suppressOnSelect)
+            suppressOnDeselect = true;
+
+        let deselectedElement = treeOutline.selectedTreeElement;
+        if (!this.selected) {
+            if (treeOutline.selectedTreeElement)
+                treeOutline.selectedTreeElement.deselect(suppressOnDeselect);
+
+            this.selected = true;
+            treeOutline.selectedTreeElement = this;
+
+            if (this._listItemNode)
+                this._listItemNode.classList.add("selected");
+        }
+
+        if (!suppressOnSelect) {
+            if (this.onselect)
+                this.onselect(this, selectedByUser);
+
+            treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.SelectionDidChange, {selectedElement: this, deselectedElement, selectedByUser});
+        }
+
+        treeOutline.processingSelectionChange = false;
+    }
+
+    revealAndSelect(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect)
+    {
+        this.reveal();
+        this.select(omitFocus, selectedByUser, suppressOnSelect, suppressOnDeselect);
+    }
+
+    deselect(suppressOnDeselect)
+    {
+        if (!this.treeOutline || this.treeOutline.selectedTreeElement !== this || !this.selected)
+            return false;
+
+        this.selected = false;
+        this.treeOutline.selectedTreeElement = null;
+
+        if (this._listItemNode)
+            this._listItemNode.classList.remove("selected");
+
+        if (!suppressOnDeselect) {
+            if (this.ondeselect)
+                this.ondeselect(this);
+
+            this.treeOutline.dispatchEventToListeners(WebInspector.TreeOutline.Event.SelectionDidChange, {deselectedElement: this});
+        }
+
+        return true;
+    }
+
+    onpopulate()
+    {
+        // Overriden by subclasses.
+    }
+
+    traverseNextTreeElement(skipUnrevealed, stayWithin, dontPopulate, info)
+    {
+        function shouldSkip(element) {
+            return skipUnrevealed && !element.revealed(true);
+        }
+
+        var depthChange = 0;
+        var element = this;
+
+        if (!dontPopulate)
+            element.onpopulate();
+
+        do {
+            if (element.hasChildren && element.children[0] && (!skipUnrevealed || element.expanded)) {
+                element = element.children[0];
+                depthChange += 1;
+            } else {
+                while (element && !element.nextSibling && element.parent && !element.parent.root && element.parent !== stayWithin) {
+                    element = element.parent;
+                    depthChange -= 1;
+                }
+
+                if (element)
+                    element = element.nextSibling;
+            }
+        } while (element && shouldSkip(element));
+
+        if (info)
+            info.depthChange = depthChange;
+
+        return element;
+    }
+
+    traversePreviousTreeElement(skipUnrevealed, dontPopulate)
+    {
+        function shouldSkip(element) {
+            return skipUnrevealed && !element.revealed(true);
+        }
+
+        var element = this;
+
+        do {
+            if (element.previousSibling) {
+                element = element.previousSibling;
+
+                while (element && element.hasChildren && element.expanded && !shouldSkip(element)) {
+                    if (!dontPopulate)
+                        element.onpopulate();
+                    element = element.children.lastValue;
+                }
+            } else
+                element = element.parent && element.parent.root ? null : element.parent;
+        } while (element && shouldSkip(element));
+
+        return element;
+    }
+
+    isEventWithinDisclosureTriangle(event)
+    {
+        if (!document.contains(this._listItemNode))
+            return false;
+
+        // FIXME: We should not use getComputedStyle(). For that we need to get rid of using ::before for disclosure triangle. (http://webk.it/74446)
+        var computedLeftPadding = window.getComputedStyle(this._listItemNode).getPropertyCSSValue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX);
+        var left = this._listItemNode.totalOffsetLeft + computedLeftPadding;
+        return event.pageX >= left && event.pageX <= left + this.arrowToggleWidth && this.hasChildren;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js b/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js
new file mode 100644
index 000000000..2cc86b1e3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TreeOutlineDataGridSynchronizer.js
@@ -0,0 +1,284 @@
+/*
+ * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TreeOutlineDataGridSynchronizer = class TreeOutlineDataGridSynchronizer extends WebInspector.Object
+{
+    constructor(treeOutline, dataGrid, delegate)
+    {
+        super();
+
+        this._treeOutline = treeOutline;
+        this._dataGrid = dataGrid;
+        this._delegate = delegate || null;
+        this._enabled = true;
+
+        this._treeOutline.element.parentNode.addEventListener("scroll", this._treeOutlineScrolled.bind(this));
+        this._dataGrid.scrollContainer.addEventListener("scroll", this._dataGridScrolled.bind(this));
+
+        this._treeOutline.__dataGridNode = this._dataGrid;
+
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.ExpandedNode, this._dataGridNodeExpanded, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.CollapsedNode, this._dataGridNodeCollapsed, this);
+        this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
+
+        this._dataGrid.element.addEventListener("focus", this._dataGridGainedFocus.bind(this));
+        this._dataGrid.element.addEventListener("blur", this._dataGridLostFocus.bind(this));
+
+        this._treeOutline.element.addEventListener("focus", this._treeOutlineGainedFocus.bind(this));
+        this._treeOutline.element.addEventListener("blur", this._treeOutlineLostFocus.bind(this));
+
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementAdded, this._treeElementAdded, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementRemoved, this._treeElementRemoved, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementDisclosureDidChanged, this._treeElementDisclosureDidChange, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.ElementVisibilityDidChange, this._treeElementVisibilityDidChange, this);
+        treeOutline.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+    }
+
+    // Public
+
+    get treeOutline()
+    {
+        return this._treeOutline;
+    }
+
+    get dataGrid()
+    {
+        return this._dataGrid;
+    }
+
+    get delegate()
+    {
+        return this._delegate;
+    }
+
+    get enabled()
+    {
+        return this._enabled;
+    }
+
+    set enabled(x)
+    {
+        this._enabled = x || false;
+    }
+
+    associate(treeElement, dataGridNode)
+    {
+        console.assert(treeElement);
+        console.assert(dataGridNode);
+
+        treeElement.__dataGridNode = dataGridNode;
+        dataGridNode.__treeElement = treeElement;
+    }
+
+    synchronize()
+    {
+        this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
+        if (this._treeOutline.selectedTreeElement)
+            this._treeOutline.selectedTreeElement.__dataGridNode.select(true);
+        else if (this._dataGrid.selectedNode)
+            this._dataGrid.selectedNode.deselect(true);
+    }
+
+    treeElementForDataGridNode(dataGridNode)
+    {
+        return dataGridNode.__treeElement || null;
+    }
+
+    dataGridNodeForTreeElement(treeElement)
+    {
+        if (treeElement.__dataGridNode)
+            return treeElement.__dataGridNode;
+
+        if (typeof this._delegate.dataGridNodeForTreeElement === "function") {
+            var dataGridNode = this._delegate.dataGridNodeForTreeElement(treeElement);
+            if (dataGridNode)
+                this.associate(treeElement, dataGridNode);
+            return dataGridNode;
+        }
+
+        return null;
+    }
+
+    // Private
+
+    _treeOutlineScrolled(event)
+    {
+        if (!this._enabled)
+            return;
+
+        if (this._ignoreNextTreeOutlineScrollEvent) {
+            this._ignoreNextTreeOutlineScrollEvent = false;
+            return;
+        }
+
+        this._ignoreNextDataGridScrollEvent = true;
+        this._dataGrid.scrollContainer.scrollTop = this._treeOutline.element.parentNode.scrollTop;
+    }
+
+    _dataGridGainedFocus(event)
+    {
+        this._treeOutline.element.classList.add("force-focus");
+    }
+
+    _dataGridLostFocus(event)
+    {
+        this._treeOutline.element.classList.remove("force-focus");
+    }
+
+    _dataGridScrolled(event)
+    {
+        if (!this._enabled)
+            return;
+
+        if (this._ignoreNextDataGridScrollEvent) {
+            this._ignoreNextDataGridScrollEvent = false;
+            return;
+        }
+
+        this._ignoreNextTreeOutlineScrollEvent = true;
+        this._treeOutline.element.parentNode.scrollTop = this._dataGrid.scrollContainer.scrollTop;
+    }
+
+    _dataGridNodeSelected(event)
+    {
+        if (!this._enabled)
+            return;
+
+        var dataGridNode = this._dataGrid.selectedNode;
+        if (dataGridNode)
+            dataGridNode.__treeElement.select(true, true, true, true);
+    }
+
+    _dataGridNodeExpanded(event)
+    {
+        if (!this._enabled)
+            return;
+
+        var dataGridNode = event.data.dataGridNode;
+        console.assert(dataGridNode);
+
+        if (!dataGridNode.__treeElement.expanded)
+            dataGridNode.__treeElement.expand();
+    }
+
+    _dataGridNodeCollapsed(event)
+    {
+        if (!this._enabled)
+            return;
+
+        var dataGridNode = event.data.dataGridNode;
+        console.assert(dataGridNode);
+
+        if (dataGridNode.__treeElement.expanded)
+            dataGridNode.__treeElement.collapse();
+    }
+
+    _treeOutlineGainedFocus(event)
+    {
+        this._dataGrid.element.classList.add("force-focus");
+    }
+
+    _treeOutlineLostFocus(event)
+    {
+        this._dataGrid.element.classList.remove("force-focus");
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        if (!this._enabled)
+            return;
+
+        let treeElement = event.data.selectedElement || event.data.deselectedElement;
+        console.assert(treeElement);
+        if (!treeElement)
+            return;
+
+        let dataGridNode = treeElement.__dataGridNode;
+        console.assert(dataGridNode);
+
+        if (event.data.selectedElement)
+            dataGridNode.select();
+        else
+            dataGridNode.deselect();
+    }
+
+    _treeElementAdded(event)
+    {
+        if (!this._enabled)
+            return;
+
+        let treeElement = event.data.element;
+        let dataGridNode = this.dataGridNodeForTreeElement(treeElement);
+        console.assert(dataGridNode);
+
+        var parentDataGridNode = treeElement.parent.__dataGridNode;
+        console.assert(parentDataGridNode);
+
+        var childIndex = treeElement.parent.children.indexOf(treeElement);
+        console.assert(childIndex !== -1);
+
+        parentDataGridNode.insertChild(dataGridNode, childIndex);
+    }
+
+    _treeElementRemoved(event)
+    {
+        if (!this._enabled)
+            return;
+
+        let treeElement = event.data.element;
+        let dataGridNode = treeElement.__dataGridNode;
+        console.assert(dataGridNode);
+
+        if (dataGridNode.parent)
+            dataGridNode.parent.removeChild(dataGridNode);
+    }
+
+    _treeElementDisclosureDidChange(event)
+    {
+        if (!this._enabled)
+            return;
+
+        let treeElement = event.data.element;
+        let dataGridNode = treeElement.__dataGridNode;
+        console.assert(dataGridNode);
+
+        if (treeElement.expanded)
+            dataGridNode.expand();
+        else
+            dataGridNode.collapse();
+    }
+
+    _treeElementVisibilityDidChange(event)
+    {
+        if (!this._enabled)
+            return;
+
+        let treeElement = event.data.element;
+        let dataGridNode = treeElement.__dataGridNode;
+        console.assert(dataGridNode);
+
+        dataGridNode.hidden = treeElement.hidden;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTokenView.css b/Source/WebInspectorUI/UserInterface/Views/TypeTokenView.css
new file mode 100644
index 000000000..003b3a413
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTokenView.css
@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2014, 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.type-token {
+    display: inline;
+    border-radius: 10px;
+    border-color: transparent;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-bottom: 1px;
+    color: white;
+    font-size: 10px;
+    opacity: 0.85;
+}
+
+.type-token-left-spacing {
+    margin-left: 5px;
+}
+
+.type-token-right-spacing {
+    margin-right: 5px;
+}
+
+.type-token-function, .type-token-boolean {
+    background-color: hsl(305, 58%, 51%);
+}
+
+.type-token-number {
+    background-color: hsl(220, 74%, 55%);
+}
+
+.type-token-string {
+    background-color: hsl(2, 73%, 52%);
+}
+
+.type-token-symbol {
+    background-color: var(--syntax-highlight-symbol-color);
+}
+
+.type-token-default {
+    background-color: hsl(83, 71%, 39%);
+}
+
+.type-token-empty {
+    background-color: hsl(0, 0%, 49%);
+}
+
+.type-token-many {
+    background-color: hsl(33, 100%, 46%);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTokenView.js b/Source/WebInspectorUI/UserInterface/Views/TypeTokenView.js
new file mode 100644
index 000000000..ba3b1b794
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTokenView.js
@@ -0,0 +1,207 @@
+/*
+ * Copyright (C) 2014-2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TypeTokenView = class TypeTokenView extends WebInspector.Object
+{
+    constructor(tokenAnnotator, shouldHaveRightMargin, shouldHaveLeftMargin, titleType, functionOrVariableName)
+    {
+        console.assert(titleType === WebInspector.TypeTokenView.TitleType.Variable || titleType === WebInspector.TypeTokenView.TitleType.ReturnStatement);
+
+        super();
+
+        var span = document.createElement("span");
+        span.classList.add("type-token");
+        if (shouldHaveRightMargin)
+            span.classList.add("type-token-right-spacing");
+        if (shouldHaveLeftMargin)
+            span.classList.add("type-token-left-spacing");
+
+        this.element = span;
+        this._tokenAnnotator = tokenAnnotator;
+
+        this._typeDescription = null;
+
+        this._colorClass = null;
+
+        this._popoverTitle = WebInspector.TypeTokenView.titleForPopover(titleType, functionOrVariableName);
+
+        this._setUpMouseoverHandlers();
+    }
+
+    // Static
+
+    static titleForPopover(titleType, functionOrVariableName)
+    {
+        if (titleType === WebInspector.TypeTokenView.TitleType.Variable)
+            return WebInspector.UIString("Type information for variable: %s").format(functionOrVariableName);
+
+        if (functionOrVariableName)
+            return WebInspector.UIString("Return type for function: %s").format(functionOrVariableName);
+
+        return WebInspector.UIString("Return type for anonymous function");
+    }
+
+    // Public
+
+    update(typeDescription)
+    {
+        console.assert(typeDescription instanceof WebInspector.TypeDescription);
+
+        this._typeDescription = typeDescription;
+
+        var title = this._displayTypeName();
+        if (title === this.element.textContent)
+            return;
+
+        this.element.textContent = title;
+        var hashString = title[title.length - 1] === "?" ? title.slice(0, title.length - 1) : title;
+
+        if (this._colorClass)
+            this.element.classList.remove(this._colorClass);
+
+        this._colorClass = WebInspector.TypeTokenView.ColorClassForType[hashString] || "type-token-default";
+        this.element.classList.add(this._colorClass);
+    }
+
+    // Private
+
+    _setUpMouseoverHandlers()
+    {
+        var timeoutID = null;
+
+        this.element.addEventListener("mouseover", function() {
+            function showPopoverAfterDelay()
+            {
+                timeoutID = null;
+
+                var domRect = this.element.getBoundingClientRect();
+                var bounds = new WebInspector.Rect(domRect.left, domRect.top, domRect.width, domRect.height);
+                this._tokenAnnotator.sourceCodeTextEditor.showPopoverForTypes(this._typeDescription, bounds, this._popoverTitle);
+            }
+
+            if (this._shouldShowPopover())
+                timeoutID = setTimeout(showPopoverAfterDelay.bind(this), WebInspector.TypeTokenView.DelayHoverTime);
+        }.bind(this));
+
+        this.element.addEventListener("mouseout", function() {
+            if (timeoutID)
+                clearTimeout(timeoutID);
+        });
+    }
+
+    _shouldShowPopover()
+    {
+        if (!this._typeDescription.valid)
+            return false;
+
+        if (this._typeDescription.typeSet.primitiveTypeNames.length > 1)
+            return true;
+
+        if (this._typeDescription.structures && this._typeDescription.structures.length)
+            return true;
+
+        return false;
+    }
+
+    _displayTypeName()
+    {
+        if (!this._typeDescription.valid)
+            return "";
+
+        var typeSet = this._typeDescription.typeSet;
+
+        if (this._typeDescription.leastCommonAncestor) {
+            if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Object))
+                return this._typeDescription.leastCommonAncestor;
+            if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Object | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+                return this._typeDescription.leastCommonAncestor + "?";
+        }
+
+        // The order of these checks are important.
+        // For example, if a value is only a function, it is contained in TypeFunction, but it is also contained in (TypeFunction | TypeNull).
+        // Therefore, more specific types must be checked first.
+
+        // The strings returned here should match those in TypeTokenView.ColorClassForType
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Function))
+            return "Function";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Undefined))
+            return "Undefined";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Null))
+            return "Null";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Boolean))
+            return "Boolean";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Integer))
+            return "Integer";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Number | WebInspector.TypeSet.TypeBit.Integer))
+            return "Number";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.String))
+            return "String";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Symbol))
+            return "Symbol";
+
+        if (typeSet.isContainedIn(WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "(?)";
+
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Function | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "Function?";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Boolean | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "Boolean?";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Integer | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "Integer?";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Number | WebInspector.TypeSet.TypeBit.Integer | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "Number?";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.String | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "String?";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Symbol | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "Symbol?";
+
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Object | WebInspector.TypeSet.TypeBit.Function | WebInspector.TypeSet.TypeBit.String))
+            return "Object";
+        if (typeSet.isContainedIn(WebInspector.TypeSet.TypeBit.Object | WebInspector.TypeSet.TypeBit.Function | WebInspector.TypeSet.TypeBit.String | WebInspector.TypeSet.NullOrUndefinedTypeBits))
+            return "Object?";
+
+        return WebInspector.UIString("(many)");
+    }
+};
+
+WebInspector.TypeTokenView.TitleType = {
+    Variable: Symbol("title-type-variable"),
+    ReturnStatement: Symbol("title-type-return-statement")
+};
+
+WebInspector.TypeTokenView.ColorClassForType = {
+    "String": "type-token-string",
+    "Symbol": "type-token-symbol",
+    "Function": "type-token-function",
+    "Number": "type-token-number",
+    "Integer": "type-token-number",
+    "Undefined": "type-token-empty",
+    "Null": "type-token-empty",
+    "(?)": "type-token-empty",
+    "Boolean": "type-token-boolean",
+    "(many)": "type-token-many"
+};
+
+WebInspector.TypeTokenView.DelayHoverTime = 350;
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.css
new file mode 100644
index 000000000..12246c26f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.css
@@ -0,0 +1,88 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.type-tree-element {
+    margin-top: 1px;
+}
+
+.type-tree-element > .titles {
+    position: relative;
+    line-height: normal;
+    padding-bottom: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.type-tree-element > .disclosure-button {
+    display: inline-block;
+    vertical-align: top;
+
+    width: 15px;
+    height: 16px;
+
+    margin-left: -1px;
+    border: 0;
+    background: none;
+    -webkit-appearance: none;
+}
+
+.type-tree-element.parent > .disclosure-button {
+    background-color: transparent;
+    background-image: url(../Images/DisclosureTriangles.svg#closed-normal);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 13px 13px;
+}
+
+.type-tree-element.parent.expanded > .disclosure-button {
+    background-image: url(../Images/DisclosureTriangles.svg#open-normal);
+}
+
+.type-tree-element > .icon {
+    display: none;
+}
+
+.type-tree-element.prototype {
+    display: inline-block;
+
+    border: 1px solid hsla(0, 0%, 0%, 0.06);
+    background-color: hsla(0, 0%, 0%, 0.03);
+    border-radius: 3px;
+
+    padding: 0 10px 1px 0;
+    margin: 3px 0 2px 0;
+}
+
+.type-tree-element.prototype:hover,
+.type-tree-element.prototype:focus {
+    border-color: hsla(0, 0%, 0%, 0.1);
+}
+
+.type-tree-element.prototype + ol {
+    -webkit-padding-start: 0px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js
new file mode 100644
index 000000000..417155eef
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeElement.js
@@ -0,0 +1,130 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TypeTreeElement = class TypeTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(name, structureDescription, isPrototype)
+    {
+        super(null, null, null, structureDescription || null, false);
+
+        console.assert(!structureDescription || structureDescription instanceof WebInspector.StructureDescription);
+
+        this._name = name;
+        this._structureDescription = structureDescription || null;
+        this._isPrototype = isPrototype;
+
+        this._populated = false;
+        this._autoExpandedChildren = false;
+
+        this.toggleOnClick = true;
+        this.selectable = false;
+        this.tooltipHandledSeparately = true;
+        this.hasChildren = structureDescription;
+
+        var displayName = this._isPrototype ? WebInspector.UIString("%s Prototype").format(name.replace(/Prototype$/, "")) : name;
+        var nameElement = document.createElement("span");
+        nameElement.classList.add("type-name");
+        nameElement.textContent = displayName;
+        this.mainTitle = nameElement;
+
+        this.addClassName("type-tree-element");
+        if (this._isPrototype)
+            this.addClassName("prototype");
+    }
+
+    // Public
+
+    get name()
+    {
+        return this._name;
+    }
+
+    get isPrototype()
+    {
+        return this._isPrototype;
+    }
+
+    // Protected
+
+    onpopulate()
+    {
+        if (this._populated)
+            return;
+
+        this._populated = true;
+
+        var properties = [];
+        for (var name of this._structureDescription.fields) {
+            // FIXME: The backend can send us an empty string. Why? (Symbol?)
+            if (name === "")
+                continue;
+            properties.push({name});
+        }
+        properties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
+
+        var optionalProperties = [];
+        for (var name of this._structureDescription.optionalFields) {
+            // FIXME: The backend can send us an empty string. Why? (Symbol?)
+            if (name === "")
+                continue;
+            optionalProperties.push({name: name + "?"});
+        }
+        optionalProperties.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
+
+        for (var property of properties)
+            this.appendChild(new WebInspector.TypeTreeElement(property.name, null));
+        for (var property of optionalProperties)
+            this.appendChild(new WebInspector.TypeTreeElement(property.name, null));
+
+        if (this._structureDescription.imprecise) {
+            var truncatedMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(ellipsis);
+            this.appendChild(new WebInspector.TreeElement(truncatedMessageElement, null, false));
+        }
+
+        if (!this.children.length) {
+            var emptyMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No properties."));
+            this.appendChild(new WebInspector.TreeElement(emptyMessageElement, null, false));
+        }
+
+        console.assert(this.children.length > 0);
+
+        var prototypeStructure = this._structureDescription.prototypeStructure;
+        if (prototypeStructure)
+            this.appendChild(new WebInspector.TypeTreeElement(prototypeStructure.constructorName, prototypeStructure, true));
+    }
+
+    onexpand()
+    {
+        if (this._autoExpandedChildren)
+            return;
+
+        this._autoExpandedChildren = true;
+
+        // On first expand, auto-expand children until "Object".
+        var lastChild = this.children[this.children.length - 1];
+        if (lastChild && lastChild.hasChildren && lastChild.isPrototype && lastChild.name !== "Object")
+            lastChild.expand();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
new file mode 100644
index 000000000..563979846
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.css
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.type-tree {
+    position: relative;
+    display: block;
+
+    color: black;
+    font-family: -apple-system, sans-serif;
+    font-size: 12px;
+}
+
+.tree-outline.type {
+    margin: 0;
+    padding: 0 6px 2px;
+    list-style: none;
+    min-height: 18px;
+    outline: none;
+}
+
+.tree-outline.type li {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    -webkit-user-select: text;
+    cursor: default;
+}
+
+.tree-outline.type ol {
+    display: none;
+    margin: 0;
+    -webkit-padding-start: 16px;
+    list-style: none;
+}
+
+.tree-outline.type ol.expanded {
+    display: block;
+}
+
+.tree-outline.type li .empty-message {
+    color: hsl(0, 0%, 60%);
+    margin-left: 13px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js
new file mode 100644
index 000000000..abcef8856
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/TypeTreeView.js
@@ -0,0 +1,91 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.TypeTreeView = class TypeTreeView extends WebInspector.Object
+{
+    constructor(typeDescription)
+    {
+        super();
+
+        console.assert(typeDescription instanceof WebInspector.TypeDescription);
+
+        this._typeDescription = typeDescription;
+
+        this._element = document.createElement("div");
+        this._element.className = "type-tree";
+
+        this._outline = new WebInspector.TreeOutline;
+        this._outline.element.classList.add("type");
+        this._element.appendChild(this._outline.element);
+
+        this._populate();
+
+        // Auto-expand if there is one sub-type. TypeTreeElement handles further auto-expansion.
+        if (this._outline.children.length === 1)
+            this._outline.children[0].expand();
+    }
+
+    // Public
+
+    get typeDescription()
+    {
+        return this._typeDescription;
+    }
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get treeOutline()
+    {
+        return this._outline;
+    }
+
+    // Private
+
+    _populate()
+    {
+        var types = [];
+        for (var structure of this._typeDescription.structures)
+            types.push({name: structure.constructorName, structure});
+        for (var primitiveName of this._typeDescription.typeSet.primitiveTypeNames)
+            types.push({name: primitiveName});
+        types.sort(WebInspector.ObjectTreeView.comparePropertyDescriptors);
+
+        for (var type of types)
+            this._outline.appendChild(new WebInspector.TypeTreeElement(type.name, type.structure, false));
+
+        if (this._typeDescription.truncated) {
+            var truncatedMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(ellipsis);
+            this._outline.appendChild(new WebInspector.TreeElement(truncatedMessageElement, null, false));
+        }
+
+        if (!this._outline.children.length) {
+            var errorMessageElement = WebInspector.ObjectTreeView.createEmptyMessageElement(WebInspector.UIString("No properties."));
+            this._outline.appendChild(new WebInspector.TreeElement(errorMessageElement, null, false));
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
new file mode 100644
index 000000000..499b1c58d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
@@ -0,0 +1,61 @@
+/*
+ * Copyright (C) 2015-2016 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+:root {
+    --z-index-highlight: 64;
+    --z-index-header: 128;
+    --z-index-resizer: 256;
+    --z-index-popover: 512;
+    --z-index-tooltip: 1024;
+    --z-index-glass-pane-for-drag: 2048;
+    --z-index-uncaught-exception-sheet: 4096;
+
+    --border-color: hsl(0, 0%, 70%);
+    --panel-background-color: hsl(0, 0%, 94%);
+
+    --console-secondary-text-color: hsla(0, 0%, 0%, 0.33);
+    --console-prompt-min-height: 30px;
+
+    --syntax-highlight-number-color: hsl(248, 100%, 40%);
+    --syntax-highlight-boolean-color: hsl(309, 85%, 35%);
+    --syntax-highlight-string-color: hsl(1, 79%, 42%);
+    --syntax-highlight-regexp-color: hsl(20, 100%, 44%);
+    --syntax-highlight-symbol-color: hsl(172, 45%, 45%);
+
+    --memory-javascript-fill-color: hsl(269, 65%, 75%);
+    --memory-javascript-stroke-color: hsl(269, 33%, 50%);
+    --memory-images-fill-color: hsl(0, 65%, 75%);
+    --memory-images-stroke-color: hsl(0, 54%, 50%);
+    --memory-layers-fill-color: hsl(76, 49%, 75%);
+    --memory-layers-stroke-color: hsl(79, 45%, 50%);
+    --memory-page-fill-color: hsl(22, 60%, 70%);
+    --memory-page-stroke-color: hsl(22, 40%, 50%);
+    --memory-max-comparison-fill-color: hsl(220, 10%, 75%);
+    --memory-max-comparison-stroke-color: hsl(220, 10%, 55%);
+}
+
+body.window-inactive * {
+    --border-color: hsl(0, 0%, 85%);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/View.js b/Source/WebInspectorUI/UserInterface/Views/View.js
new file mode 100644
index 000000000..b936fedc1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/View.js
@@ -0,0 +1,309 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.View = class View extends WebInspector.Object
+{
+    constructor(element)
+    {
+        super();
+
+        this._element = element || document.createElement("div");
+        this._element.__view = this;
+        this._parentView = null;
+        this._subviews = [];
+        this._dirty = false;
+        this._dirtyDescendantsCount = 0;
+        this._needsLayoutWhenAttachedToRoot = false;
+        this._isAttachedToRoot = false;
+        this._layoutReason = null;
+    }
+
+    // Static
+
+    static rootView()
+    {
+        if (!WebInspector.View._rootView)
+            WebInspector.View._rootView = new WebInspector.View(document.body);
+
+        return WebInspector.View._rootView;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get layoutPending()
+    {
+        return this._dirty;
+    }
+
+    get parentView()
+    {
+        return this._parentView;
+    }
+
+    get subviews()
+    {
+        return this._subviews;
+    }
+
+    isDescendantOf(view)
+    {
+        let parentView = this._parentView;
+        while (parentView) {
+            if (parentView === view)
+                return true;
+            parentView = parentView.parentView;
+        }
+
+        return false;
+    }
+
+    addSubview(view)
+    {
+        this.insertSubviewBefore(view, null);
+    }
+
+    insertSubviewBefore(view, referenceView)
+    {
+        console.assert(view instanceof WebInspector.View);
+        console.assert(!referenceView || referenceView instanceof WebInspector.View);
+        console.assert(view !== WebInspector.View._rootView, "Root view cannot be a subview.");
+
+        if (this._subviews.includes(view)) {
+            console.assert(false, "Cannot add view that is already a subview.", view);
+            return;
+        }
+
+        const beforeIndex = referenceView ? this._subviews.indexOf(referenceView) : this._subviews.length;
+        if (beforeIndex === -1) {
+            console.assert(false, "Cannot insert view. Invalid reference view.", referenceView);
+            return;
+        }
+
+        this._subviews.insertAtIndex(view, beforeIndex);
+
+        if (!view.element.parentNode)
+            this._element.insertBefore(view.element, referenceView ? referenceView.element : null);
+
+        view.didMoveToParent(this);
+    }
+
+    removeSubview(view)
+    {
+        console.assert(view instanceof WebInspector.View);
+        console.assert(view.element.parentNode === this._element, "Subview DOM element must be a child of the parent view element.");
+
+        if (!this._subviews.includes(view)) {
+            console.assert(false, "Cannot remove view which isn't a subview.", view);
+            return;
+        }
+
+        this._subviews.remove(view, true);
+        this._element.removeChild(view.element);
+
+        view.didMoveToParent(null);
+    }
+
+    replaceSubview(oldView, newView)
+    {
+        console.assert(oldView !== newView, "Cannot replace subview with itself.");
+
+        this.insertSubviewBefore(newView, oldView);
+        this.removeSubview(oldView);
+    }
+
+    updateLayout(layoutReason)
+    {
+        WebInspector.View._cancelScheduledLayoutForView(this);
+
+        this._setLayoutReason(layoutReason);
+        this._layoutSubtree();
+    }
+
+    updateLayoutIfNeeded()
+    {
+        if (!this._dirty)
+            return;
+
+        this.updateLayout();
+    }
+
+    needsLayout(layoutReason)
+    {
+        this._setLayoutReason(layoutReason);
+
+        if (this._dirty)
+            return;
+
+        WebInspector.View._scheduleLayoutForView(this);
+    }
+
+    // Protected
+
+    didMoveToWindow(isAttachedToRoot)
+    {
+        this._isAttachedToRoot = isAttachedToRoot;
+
+        if (this._isAttachedToRoot && this._needsLayoutWhenAttachedToRoot) {
+            WebInspector.View._scheduleLayoutForView(this);
+            this._needsLayoutWhenAttachedToRoot = false;
+        }
+
+        for (let view of this._subviews)
+            view.didMoveToWindow(isAttachedToRoot);
+    }
+
+    didMoveToParent(parentView)
+    {
+        this._parentView = parentView;
+
+        let isAttachedToRoot = this.isDescendantOf(WebInspector.View._rootView);
+        this.didMoveToWindow(isAttachedToRoot);
+
+        if (!this._parentView)
+            return;
+
+        let pendingLayoutsCount = this._dirtyDescendantsCount;
+        if (this._dirty)
+            pendingLayoutsCount++;
+
+        let view = this._parentView;
+        while (view) {
+            view._dirtyDescendantsCount += pendingLayoutsCount;
+            view = view.parentView;
+        }
+    }
+
+    layout()
+    {
+        // Overridden by subclasses.
+        // Not responsible for recursing to child views.
+        // Should not be called directly; use updateLayout() instead.
+    }
+
+    // Private
+
+    _layoutSubtree()
+    {
+        this._dirty = false;
+        this._dirtyDescendantsCount = 0;
+
+        this.layout(this._layoutReason);
+
+        for (let view of this._subviews) {
+            view._setLayoutReason(this._layoutReason);
+            view._layoutSubtree();
+        }
+
+        this._layoutReason = null;
+    }
+
+    _setLayoutReason(layoutReason)
+    {
+        if (this._layoutReason === WebInspector.View.LayoutReason.Resize)
+            return;
+
+        this._layoutReason = layoutReason || WebInspector.View.LayoutReason.Dirty;
+    }
+
+    // Layout controller logic
+
+    static _scheduleLayoutForView(view)
+    {
+        view._dirty = true;
+
+        let parentView = view.parentView;
+        while (parentView) {
+            parentView._dirtyDescendantsCount++;
+            parentView = parentView.parentView;
+        }
+
+        if (!view._isAttachedToRoot) {
+            // Don't schedule layout of the view unless it is a descendant of the root view.
+            // When it moves to a rooted view tree, schedule an initial layout.
+            view._needsLayoutWhenAttachedToRoot = true;
+            return;
+        }
+
+        if (WebInspector.View._scheduledLayoutUpdateIdentifier)
+            return;
+
+        WebInspector.View._scheduledLayoutUpdateIdentifier = requestAnimationFrame(WebInspector.View._visitViewTreeForLayout);
+    }
+
+    static _cancelScheduledLayoutForView(view)
+    {
+        let cancelledLayoutsCount = view._dirtyDescendantsCount;
+        if (view.layoutPending)
+            cancelledLayoutsCount++;
+
+        let parentView = view.parentView;
+        while (parentView) {
+            parentView._dirtyDescendantsCount = Math.max(0, parentView._dirtyDescendantsCount - cancelledLayoutsCount);
+            parentView = parentView.parentView;
+        }
+
+        if (!WebInspector.View._scheduledLayoutUpdateIdentifier)
+            return;
+
+        let rootView = WebInspector.View._rootView;
+        if (!rootView || rootView._dirtyDescendantsCount)
+            return;
+
+        // No views need layout, so cancel the pending requestAnimationFrame.
+        cancelAnimationFrame(WebInspector.View._scheduledLayoutUpdateIdentifier);
+        WebInspector.View._scheduledLayoutUpdateIdentifier = undefined;
+    }
+
+    static _visitViewTreeForLayout()
+    {
+        console.assert(WebInspector.View._rootView, "Cannot layout view tree without a root.");
+
+        WebInspector.View._scheduledLayoutUpdateIdentifier = undefined;
+
+        let views = [WebInspector.View._rootView];
+        while (views.length) {
+            let view = views.shift();
+            if (view.layoutPending)
+                view._layoutSubtree();
+            else if (view._dirtyDescendantsCount) {
+                views = views.concat(view.subviews);
+                view._dirtyDescendantsCount = 0;
+            }
+        }
+    }
+};
+
+WebInspector.View.LayoutReason = {
+    Dirty: Symbol("layout-reason-dirty"),
+    Resize: Symbol("layout-reason-resize")
+};
+
+WebInspector.View._rootView = null;
+WebInspector.View._scheduledLayoutUpdateIdentifier = undefined;
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css
new file mode 100644
index 000000000..fc45d883b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.css
@@ -0,0 +1,78 @@
+/*
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container {
+    display: flex;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient {
+    width: 38px;
+    height: 18px;
+    margin: 1px 0 0;
+    border: 1px solid hsla(0, 0%, 25%, 0.4);
+    border-radius: 4px;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container:not(.gradient-value) > .inline-swatch.gradient {
+    display: none;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:hover {
+    border-color: hsla(0, 0%, 25%, 0.8);
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient:active {
+    border-color: hsl(0, 0%, 25%);
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .inline-swatch.gradient > span {
+    border: none;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container.gradient-value > .inline-swatch.gradient + .value-input {
+    margin-left: -3px;
+    padding-left: 5px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: none;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-input {
+    margin: 1px 4px 3px 0;
+    padding: 0 3px;
+    border-radius: 4px;
+    border: solid 1px hsl(0, 0%, 83%);
+    text-align: left;
+    font-size: 10px;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-input[disabled] {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.visual-style-property-container.background-picker > .visual-style-property-value-container > .value-type-picker-select {
+    max-width: 170px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js
new file mode 100644
index 000000000..a516fb76d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleBackgroundPicker.js
@@ -0,0 +1,226 @@
+/*
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleBackgroundPicker = class VisualStyleBackgroundPicker extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, possibleValues, layoutReversed)
+    {
+        super(propertyNames, text, possibleValues, null, "background-picker", layoutReversed);
+
+        this._gradientSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Gradient);
+        this._gradientSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._gradientSwatchColorChanged, this);
+        this.contentElement.appendChild(this._gradientSwatch.element);
+
+        this._valueInputElement = document.createElement("input");
+        this._valueInputElement.classList.add("value-input");
+        this._valueInputElement.type = "url";
+        this._valueInputElement.placeholder = WebInspector.UIString("Enter a URL");
+        this._valueInputElement.addEventListener("input", this._valueInputValueChanged.debounce(250, this));
+        this.contentElement.appendChild(this._valueInputElement);
+
+        this._valueTypePickerElement = document.createElement("select");
+        this._valueTypePickerElement.classList.add("value-type-picker-select");
+        if (this._possibleValues.advanced)
+            this._valueTypePickerElement.title = WebInspector.UIString("Option-click to show all values");
+
+        let imageOption = document.createElement("option");
+        imageOption.value = "url";
+        imageOption.text = WebInspector.UIString("Image");
+        this._valueTypePickerElement.appendChild(imageOption);
+
+        let linearGradientOption = document.createElement("option");
+        linearGradientOption.value = "linear-gradient";
+        linearGradientOption.text = WebInspector.UIString("Linear Gradient");
+        this._valueTypePickerElement.appendChild(linearGradientOption);
+
+        let radialGradientOption = document.createElement("option");
+        radialGradientOption.value = "radial-gradient";
+        radialGradientOption.text = WebInspector.UIString("Radial Gradient");
+        this._valueTypePickerElement.appendChild(radialGradientOption);
+
+        let repeatingLinearGradientOption = document.createElement("option");
+        repeatingLinearGradientOption.value = "repeating-linear-gradient";
+        repeatingLinearGradientOption.text = WebInspector.UIString("Repeating Linear Gradient");
+        this._valueTypePickerElement.appendChild(repeatingLinearGradientOption);
+
+        let repeatingRadialGradientOption = document.createElement("option");
+        repeatingRadialGradientOption.value = "repeating-radial-gradient";
+        repeatingRadialGradientOption.text = WebInspector.UIString("Repeating Radial Gradient");
+        this._valueTypePickerElement.appendChild(repeatingRadialGradientOption);
+
+        this._valueTypePickerElement.appendChild(document.createElement("hr"));
+
+        this._createValueOptions(this._possibleValues.basic);
+        this._advancedValuesElements = null;
+
+        this._valueTypePickerElement.addEventListener("mousedown", this._keywordSelectMouseDown.bind(this));
+        this._valueTypePickerElement.addEventListener("change", this._handleKeywordChanged.bind(this));
+        this.contentElement.appendChild(this._valueTypePickerElement);
+
+        this._currentType = "url";
+    }
+
+    // Public
+
+    get value()
+    {
+        return this._valueInputElement.value;
+    }
+
+    set value(value)
+    {
+        if (!value || !value.length || value === this.value)
+            return;
+
+        const isKeyword = this.valueIsSupportedKeyword(value);
+        this._currentType = isKeyword ? value : value.substring(0, value.indexOf("("));
+        this._updateValueInput();
+        if (!isKeyword)
+            this._valueInputElement.value = value.substring(value.indexOf("(") + 1, value.length - 1);
+
+        this._valueTypePickerElement.value = this._currentType;
+
+        if (!this._currentType.includes("gradient"))
+            return;
+
+        this._updateGradient();
+    }
+
+    get synthesizedValue()
+    {
+        if (this.valueIsSupportedKeyword(this._currentType))
+            return this._currentType;
+
+        return this._currentType + "(" + this.value + ")";
+    }
+
+    // Protected
+
+    parseValue(text)
+    {
+        const validPrefixes = ["url", "linear-gradient", "radial-gradient", "repeating-linear-gradient", "repeating-radial-gradient"];
+        return validPrefixes.some((item) => text.startsWith(item)) ? [text, text] : null;
+    }
+
+    // Private
+
+    _updateValueInput()
+    {
+        const supportedKeyword = this.valueIsSupportedKeyword(this._currentType);
+        const gradientValue = this._currentType.includes("gradient");
+        this.contentElement.classList.toggle("gradient-value", !supportedKeyword && gradientValue);
+        this._valueInputElement.disabled = supportedKeyword;
+        if (supportedKeyword) {
+            this._valueInputElement.value = "";
+            this._valueInputElement.placeholder = WebInspector.UIString("Using Keyword Value");
+        } else {
+            if (this._currentType === "image") {
+                this._valueInputElement.type = "url";
+                this._valueInputElement.placeholder = WebInspector.UIString("Enter a URL");
+            } else if (gradientValue) {
+                this._valueInputElement.type = "text";
+                this._valueInputElement.placeholder = WebInspector.UIString("Enter a Gradient");
+            }
+        }
+    }
+
+    _updateGradient()
+    {
+        const value = this.synthesizedValue;
+        if (!value || value === this._currentType)
+            return;
+
+        this._gradientSwatch.value = WebInspector.Gradient.fromString(value);
+    }
+
+    _gradientSwatchColorChanged(event)
+    {
+        this.value = event.data.value.toString();
+        this._valueDidChange();
+    }
+
+    _valueInputValueChanged(event)
+    {
+        this._updateGradient();
+        this._valueDidChange();
+    }
+
+    _keywordSelectMouseDown(event)
+    {
+        if (event.altKey)
+            this._addAdvancedValues();
+        else if (!this._valueIsSupportedAdvancedKeyword(this.value))
+            this._removeAdvancedValues();
+    }
+
+    _handleKeywordChanged(event)
+    {
+        this._currentType = this._valueTypePickerElement.value;
+        this._updateValueInput();
+        this._updateGradient();
+        this._valueDidChange();
+    }
+
+    _createValueOptions(values)
+    {
+        let addedElements = [];
+        for (let key in values) {
+            let option = document.createElement("option");
+            option.value = key;
+            option.text = values[key];
+            this._valueTypePickerElement.appendChild(option);
+            addedElements.push(option);
+        }
+        return addedElements;
+    }
+
+    _addAdvancedValues()
+    {
+        if (this._advancedValuesElements)
+            return;
+
+        this._valueTypePickerElement.appendChild(document.createElement("hr"));
+        this._advancedValuesElements = this._createValueOptions(this._possibleValues.advanced);
+    }
+
+    _removeAdvancedValues()
+    {
+        if (!this._advancedValuesElements)
+            return;
+
+        this._valueTypePickerElement.removeChild(this._advancedValuesElements[0].previousSibling);
+        for (let element of this._advancedValuesElements)
+            this._valueTypePickerElement.removeChild(element);
+
+        this._advancedValuesElements = null;
+    }
+
+    _toggleTabbingOfSelectableElements(disabled)
+    {
+        let tabIndex = disabled ? "-1" : null;
+        this._valueInputElement.tabIndex = tabIndex;
+        this._valueTypePickerElement.tabIndex = tabIndex;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleBasicInput.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleBasicInput.js
new file mode 100644
index 000000000..5f63df4ee
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleBasicInput.js
@@ -0,0 +1,64 @@
+/*
+ * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleBasicInput = class VisualStyleBasicInput extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, placeholder, layoutReversed)
+    {
+        super(propertyNames, text, null, null, "basic-input", layoutReversed);
+
+        this._inputElement = this.contentElement.createChild("input");
+        this._inputElement.spellcheck = false;
+        this._inputElement.setAttribute("placeholder", placeholder || "");
+        this._inputElement.addEventListener("input", this._handleInputElementInput.bind(this));
+    }
+
+    // Public
+
+    get value()
+    {
+        return this._inputElement.value || null;
+    }
+
+    set value(value)
+    {
+        if (value && value === this.value)
+            return;
+
+        this._inputElement.value = value || "";
+    }
+
+    get synthesizedValue()
+    {
+        return this.value;
+    }
+
+    // Private
+
+    _handleInputElementInput(event)
+    {
+        this._valueDidChange();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css
new file mode 100644
index 000000000..157dea5c8
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css
@@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container {
+    display: flex;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .visual-style-special-property-placeholder {
+    display: none;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color {
+    width: 22px;
+    height: 18px;
+    margin-top: 1px;
+    margin-right: 0;
+    border: 1px solid hsla(0, 0%, 25%, 0.4);
+    border-radius: 4px;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:hover {
+    border-color: hsla(0, 0%, 25%, 0.8);
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color:active {
+    border-color: hsl(0, 0%, 25%);
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .inline-swatch.color > span {
+    border: none;
+}
+
+.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input {
+    margin: 1px 0 3px -3px;
+    padding: 0 3px 0 5px;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border: solid 1px hsl(0, 0%, 83%);
+    border-left: none;
+    text-align: left;
+    font-size: 10px;
+}
+
+.visual-style-property-container.input-color-picker.multiple > .visual-style-property-value-container > .visual-style-multiple-property-placeholder {
+    width: calc(100% - 20px);
+    left: 18px;
+    padding-right: 3px;
+    text-align: left;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js
new file mode 100644
index 000000000..eef2f753f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js
@@ -0,0 +1,189 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleColorPicker = class VisualStyleColorPicker extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, layoutReversed)
+    {
+        super(propertyNames, text, null, null, "input-color-picker", layoutReversed);
+
+        this._colorSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Color);
+        this._colorSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._colorSwatchColorChanged, this);
+        this.contentElement.appendChild(this._colorSwatch.element);
+
+        this._textInputElement = document.createElement("input");
+        this._textInputElement.spellcheck = false;
+        this._textInputElement.addEventListener("keydown", this._textInputKeyDown.bind(this));
+        this._textInputElement.addEventListener("keyup", this._textInputKeyUp.bind(this));
+        this._textInputElement.addEventListener("blur", this._hideCompletions.bind(this));
+        this.contentElement.appendChild(this._textInputElement);
+
+        this._completionController = new WebInspector.VisualStyleCompletionsController(this);
+        this._completionController.addEventListener(WebInspector.VisualStyleCompletionsController.Event.CompletionSelected, this._completionClicked, this);
+
+        this._formatChanged = false;
+        this._updateColorSwatch();
+        this._colorProperty = true;
+    }
+
+    // Public
+
+    get value()
+    {
+        return this._textInputElement.value;
+    }
+
+    set value(value)
+    {
+        if (value && value === this.value)
+            return;
+
+        this._textInputElement.value = this._hasMultipleConflictingValues() ? null : value;
+        this._updateColorSwatch();
+    }
+
+    get placeholder()
+    {
+        return this._textInputElement.getAttribute("placeholder");
+    }
+
+    set placeholder(text)
+    {
+        if (text && text === this.placeholder)
+            return;
+
+        if (this._hasMultipleConflictingValues())
+            text = this.specialPropertyPlaceholderElement.textContent;
+
+        this._textInputElement.setAttribute("placeholder", text || "transparent");
+    }
+
+    get synthesizedValue()
+    {
+        return this.value || null;
+    }
+
+    get hasCompletions()
+    {
+        return this._completionController.hasCompletions;
+    }
+
+    set completions(completions)
+    {
+        this._completionController.completions = completions;
+    }
+
+    // Private
+
+    _colorSwatchColorChanged(event)
+    {
+        let colorString = event && event.data && event.data.value && event.data.value.toString();
+        if (!colorString)
+            return;
+
+        this.value = colorString;
+        this._valueDidChange();
+    }
+
+    _updateColorSwatch()
+    {
+        let value = this._textInputElement.value;
+        this._colorSwatch.value = WebInspector.Color.fromString(value);
+    }
+
+    _completionClicked(event)
+    {
+        this.value = event.data.text;
+        this._valueDidChange();
+    }
+
+    _textInputKeyDown(event)
+    {
+        if (!this._completionController.visible)
+            return;
+
+        let keyCode = event.keyCode;
+        let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
+        let tabKeyCode = WebInspector.KeyboardShortcut.Key.Tab.keyCode;
+        if (keyCode === enterKeyCode || keyCode === tabKeyCode) {
+            this.value = this._completionController.currentCompletion;
+            this._hideCompletions();
+            this._valueDidChange();
+            return;
+        }
+
+        let escapeKeyCode = WebInspector.KeyboardShortcut.Key.Escape.keyCode;
+        if (keyCode === escapeKeyCode) {
+            this._hideCompletions();
+            return;
+        }
+
+        let key = event.keyIdentifier;
+        if (key === "Up") {
+            this._completionController.previous();
+            return;
+        }
+
+        if (key === "Down") {
+            this._completionController.next();
+            return;
+        }
+    }
+
+    _textInputKeyUp()
+    {
+        this._showCompletionsIfAble();
+        this._updateColorSwatch();
+        this._valueDidChange();
+    }
+
+    _showCompletionsIfAble()
+    {
+        if (!this.hasCompletions)
+            return;
+
+        let result = this._valueDidChange();
+        if (!result)
+            return;
+
+        if (this._completionController.update(this.value)) {
+            let bounds = WebInspector.Rect.rectFromClientRect(this._textInputElement.getBoundingClientRect());
+            if (!bounds)
+                return;
+
+            this._completionController.show(bounds, 2);
+        }
+    }
+
+    _hideCompletions()
+    {
+        this._completionController.hide();
+    }
+
+    _toggleTabbingOfSelectableElements(disabled)
+    {
+        this._textInputElement.tabIndex = disabled ? "-1" : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css
new file mode 100644
index 000000000..9bd21e50d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.css
@@ -0,0 +1,121 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.comma-separated-keyword-editor {
+    margin-bottom: 5px;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container {
+    border: 1px solid hsl(0, 0%, 83%);
+    overflow: auto;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-special-property-placeholder {
+    display: none;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list {
+    min-height: 51px;
+    max-height: 94px;
+    background-color: hsl(0, 0%, 95%);
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item {
+    position: relative;
+    height: 17px;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item:nth-child(odd) {
+    background-color: white;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.selected {
+    background-color: hsl(213, 92%, 55%) !important;
+    color: white;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > :matches(button, img) {
+    display: none;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item.selected:not(.editor-hidden) > .titles > * {
+    color: transparent;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item > .visual-style-comma-separated-keyword-item-editor {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 5px;
+    padding: 0;
+    line-height: 17px;
+    font-family: inherit;
+    font-size: inherit;
+    color: white;
+    border: none;
+    background-color: transparent;
+    z-index: 1;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item.visual-style-font-family-list-item.editor-hidden > .visual-style-comma-separated-keyword-item-editor {
+    display: none;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles {
+    top: 1px;
+    line-height: 15px;
+}
+
+.visual-style-property-container .visual-style-comma-separated-keyword-item-editor::-webkit-input-placeholder,
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle {
+    font-size: 10px;
+    color: hsla(0, 0%, 100%, 0.7);
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item > .titles > .subtitle::before {
+    content: none;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-list > .visual-style-comma-separated-keyword-item:not(.no-value) > .titles > .subtitle {
+    display: none;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-controls {
+    display: flex;
+    border-top: 1px solid hsl(0, 0%, 83%);
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-controls > div {
+    width: 20px;
+    height: 19px;
+    padding: 3px;
+    border-right: 1px solid hsl(0, 0%, 83%);
+    opacity: 0.7;
+}
+
+.visual-style-property-container.comma-separated-keyword-editor > .visual-style-property-value-container > .visual-style-comma-separated-keyword-controls > .visual-style-remove-comma-separated-keyword {
+    order: 2;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js
new file mode 100644
index 000000000..c66b3eae5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleCommaSeparatedKeywordEditor.js
@@ -0,0 +1,289 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleCommaSeparatedKeywordEditor = class VisualStyleCommaSeparatedKeywordEditor extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, longhandProperties, insertNewItemsBeforeSelected, layoutReversed)
+    {
+        super(propertyNames, text, null, null, "comma-separated-keyword-editor", layoutReversed);
+
+        this._insertNewItemsBeforeSelected = insertNewItemsBeforeSelected || false;
+        this._longhandProperties = longhandProperties || {};
+
+        let listElement = document.createElement("ol");
+        listElement.classList.add("visual-style-comma-separated-keyword-list");
+        listElement.addEventListener("keydown", this._listElementKeyDown.bind(this));
+        this.contentElement.appendChild(listElement);
+
+        this._commaSeparatedKeywords = new WebInspector.TreeOutline(listElement);
+        this._commaSeparatedKeywords.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._treeSelectionDidChange, this);
+
+        let controlContainer = document.createElement("div");
+        controlContainer.classList.add("visual-style-comma-separated-keyword-controls");
+        this.contentElement.appendChild(controlContainer);
+
+        let addGlyphElement = useSVGSymbol("Images/Plus13.svg", "visual-style-add-comma-separated-keyword");
+        addGlyphElement.addEventListener("click", this._addEmptyCommaSeparatedKeyword.bind(this));
+        controlContainer.appendChild(addGlyphElement);
+
+        let removeGlyphElement = useSVGSymbol("Images/Minus.svg", "visual-style-remove-comma-separated-keyword", WebInspector.UIString("Click to remove the selected item."));
+        removeGlyphElement.addEventListener("click", this._removeSelectedCommaSeparatedKeyword.bind(this));
+        controlContainer.appendChild(removeGlyphElement);
+    }
+
+    // Public
+
+    set selectedTreeElementValue(text)
+    {
+        let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
+        if (!selectedTreeElement)
+            return;
+
+        selectedTreeElement.element.classList.toggle("no-value", !text || !text.length);
+        selectedTreeElement.mainTitle = text;
+        this._valueDidChange();
+    }
+
+    get value()
+    {
+        if (!this._commaSeparatedKeywords.hasChildren)
+            return;
+
+        let value = "";
+        for (let treeItem of this._commaSeparatedKeywords.children) {
+            if (this._treeElementIsEmpty(treeItem))
+                continue;
+
+            if (value.length)
+                value += ", ";
+
+            let text = treeItem.mainTitle;
+            if (typeof this._modifyCommaSeparatedKeyword === "function")
+                text = this._modifyCommaSeparatedKeyword(text);
+
+            value += text;
+        }
+
+        return value;
+    }
+
+    set value(commaSeparatedValue)
+    {
+        if (commaSeparatedValue && commaSeparatedValue === this.value)
+            return;
+
+        this._commaSeparatedKeywords.removeChildren();
+        if (!commaSeparatedValue || !commaSeparatedValue.length) {
+            this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems);
+            return;
+        }
+
+        // It is necessary to add the beginning \) to ensure inner parenthesis are not matched.
+        let values = commaSeparatedValue.split(/\)\s*,\s*(?![^\(\)]*\))/);
+        for (let i = 0; i < values.length; ++i) {
+            if (!values[i].includes(","))
+                continue;
+
+            let openParentheses = values[i].getMatchingIndexes("(").length;
+            let closedParenthesis = values[i].getMatchingIndexes(")").length;
+            values[i] += (openParentheses - closedParenthesis === 1) ? ")" : "";
+        }
+
+        if (values.length === 1 && !values[0].includes("(") && !values[0].includes(")"))
+            values = values[0].split(/\s*,\s*/);
+
+        for (let value of values)
+            this._addCommaSeparatedKeyword(value);
+
+        this._commaSeparatedKeywords.children[0].select(true);
+    }
+
+    get synthesizedValue()
+    {
+        return this.value || null;
+    }
+
+    recalculateWidth(value)
+    {
+        if (this._titleElement) {
+            // 55px width and 4px margin on left and right for title element,
+            // plus the 11px margin right on the content element
+            value -= 74;
+        } else {
+            // 11px margin on left and right of the content element
+            value -= 22;
+        }
+
+        this.contentElement.style.width = Math.max(value, 0) + "px";
+    }
+
+    // Private
+
+    _generateTextFromLonghandProperties()
+    {
+        let text = "";
+        if (!this._style)
+            return text;
+
+        function propertyValue(existingProperty, propertyName) {
+            if (existingProperty)
+                return existingProperty.value;
+
+            if (propertyName)
+                return this._longhandProperties[propertyName];
+
+            return "";
+        }
+
+        let onePropertyExists = false;
+        let valueLists = [];
+        let valuesCount = 0;
+        for (let propertyName in this._longhandProperties) {
+            let existingProperty = this._style.propertyForName(propertyName, true);
+            if (existingProperty)
+                onePropertyExists = true;
+
+            let matches = propertyValue.call(this, existingProperty, propertyName).split(/\s*,\s*(?![^\(]*\))/);
+            valuesCount = Math.max(valuesCount, matches.length);
+            valueLists.push(matches);
+        }
+
+        if (!onePropertyExists)
+            return text;
+
+        let count = 0;
+        while (count < valuesCount) {
+            if (count > 0)
+                text += ",";
+
+            for (let valueList of valueLists)
+                text += valueList[count > valueList.length - 1 ? valueList.length - 1 : count] + " ";
+
+            ++count;
+        }
+        return text;
+    }
+
+    modifyPropertyText(text, value)
+    {
+        for (let property in this._longhandProperties) {
+            let replacementRegExp = new RegExp(property + "\s*:\s*[^;]*(;|$)");
+            text = text.replace(replacementRegExp, "");
+        }
+        return super.modifyPropertyText(text, value);
+    }
+
+    _listElementKeyDown(event)
+    {
+        let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
+        if (!selectedTreeElement)
+            return;
+
+        if (selectedTreeElement.currentlyEditing)
+            return;
+
+        let keyCode = event.keyCode;
+        let backspaceKeyCode = WebInspector.KeyboardShortcut.Key.Backspace.keyCode;
+        let deleteKeyCode = WebInspector.KeyboardShortcut.Key.Delete.keyCode;
+        if (keyCode === backspaceKeyCode || keyCode === deleteKeyCode)
+            this._removeSelectedCommaSeparatedKeyword();
+    }
+
+    _treeSelectionDidChange(event)
+    {
+        let treeElement = event.data.selectedElement;
+        if (!treeElement)
+            return;
+
+        this._removeEmptyCommaSeparatedKeywords();
+        this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, {text: treeElement.mainTitle});
+    }
+
+    _treeElementIsEmpty(item)
+    {
+        return !item._mainTitle || !item._mainTitle.length;
+    }
+
+    _addEmptyCommaSeparatedKeyword()
+    {
+        let newTreeElement = this._addCommaSeparatedKeyword(null, this._commaSeparatedKeywords.selectedTreeElementIndex);
+        newTreeElement.subtitle = WebInspector.UIString("(modify the boxes below to add a value)");
+        newTreeElement.element.classList.add("no-value");
+        newTreeElement.select(true, true);
+        return newTreeElement;
+    }
+
+    _removeSelectedCommaSeparatedKeyword()
+    {
+        let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
+        this._removeCommaSeparatedKeyword(selectedTreeElement);
+    }
+
+    _removeEmptyCommaSeparatedKeywords()
+    {
+        for (let treeElement of this._commaSeparatedKeywords.children) {
+            if (!this._treeElementIsEmpty(treeElement) || treeElement.selected)
+                continue;
+
+            treeElement.deselect();
+            this._removeCommaSeparatedKeyword(treeElement);
+        }
+    }
+
+    _addCommaSeparatedKeyword(value, index)
+    {
+        let valueElement = this._createNewTreeElement(value);
+        if (!isNaN(index))
+            this._commaSeparatedKeywords.insertChild(valueElement, index + !this._insertNewItemsBeforeSelected);
+        else
+            this._commaSeparatedKeywords.appendChild(valueElement);
+
+        return valueElement;
+    }
+
+    _removeCommaSeparatedKeyword(treeElement)
+    {
+        if (!treeElement)
+            return;
+
+        this._commaSeparatedKeywords.removeChild(treeElement);
+        if (!this._commaSeparatedKeywords.children.length)
+            this.dispatchEventToListeners(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems);
+
+        this._valueDidChange();
+    }
+
+    _createNewTreeElement(value)
+    {
+        return new WebInspector.GeneralTreeElement(WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName, value);
+    }
+};
+
+WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName = "visual-style-comma-separated-keyword-item";
+
+WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event = {
+    TreeItemSelected: "visual-style-comma-separated-keyword-editor-tree-item-selected",
+    NoRemainingTreeItems: "visual-style-comma-separated-keyword-editor-no-remaining-tree-items"
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css
new file mode 100644
index 000000000..57e681b4e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css
@@ -0,0 +1,112 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header {
+    font-weight: normal;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > .visual-style-section-clear {
+    position: absolute;
+    right: 5px;
+    width: 15px;
+    height: 15px;
+    background-image: url(../Images/NavigationItemTrash.svg);
+    background-size: 15px 15px;
+    opacity: 0.7;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section.collapsed > .header > .visual-style-section-clear,
+.sidebar > .panel.details.css-style .visual > .details-section .details-section:not(.modified) > .header > .visual-style-section-clear {
+    display: none;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .header > span {
+    display: flex;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section.has-set-property > .header > span::after {
+    width: 7px;
+    height: 7px;
+    margin: 4px 6px;
+    border-radius: 50%;
+    background-color: hsl(212, 92%, 54%);
+    opacity: 0.5;
+    content: "";
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content {
+    margin-top: 5px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row {
+    display: flex;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content > .group + .group > .row:first-child {
+    padding-top: 7px;
+    border-top: none;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row:last-child {
+    padding-bottom: 3px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row {
+    border-bottom: 1px solid hsl(0, 0%, 83%);
+    margin-bottom: 5px;
+    padding-bottom: 2px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row {
+        border-bottom-width: 0.5px !important;
+    }
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container > .visual-style-property-title {
+    width: 55px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container:not(.layout-reversed):last-child {
+    margin-right: 11px;
+}
+
+.sidebar > .panel.details.css-style .visual.disabled > .details-section:not(.visual-style-selector-section) {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.sidebar > .panel.details.css-style .visual.disabled > .details-section:not(.visual-style-selector-section) input {
+    pointer-events: none;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row + .row.visual-style-tabbed-properties-row,
+.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.background-style .visual-style-property-container.comma-separated-keyword-editor.background {
+    margin-top: 3px;
+}
+
+.sidebar > .panel.details.css-style .visual > .details-section.background .details-section.border .visual-style-property-container.keyword-checkbox.border-image-slice {
+    flex: 1;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
new file mode 100644
index 000000000..eacb5ee84
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
@@ -0,0 +1,1377 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends WebInspector.StyleDetailsPanel
+{
+    constructor(delegate)
+    {
+        super(delegate, "visual", "visual", WebInspector.UIString("Styles \u2014 Visual"));
+
+        this._currentStyle = null;
+
+        this._sections = {};
+        this._groups = {};
+        this._keywords = {};
+        this._units = {};
+
+        // These keywords, as well as the values below, are not localized as they must match the CSS spec.
+        this._keywords.defaults = ["Inherit", "Initial", "Unset", "Revert"];
+        this._keywords.normal = this._keywords.defaults.concat(["Normal"]);
+        this._keywords.boxModel = this._keywords.defaults.concat(["Auto"]);
+        this._keywords.borderStyle = {
+            basic: this._keywords.defaults.concat(["None", "Hidden", "Solid"]),
+            advanced: ["Dashed", "Dotted", "Double", "Groove", "Inset", "Outset", "Ridge"]
+        };
+        this._keywords.borderWidth = this._keywords.defaults.concat(["Medium", "Thick", "Thin"]);
+
+        this._units.defaultsSansPercent = {
+            basic: ["px", "em"],
+            advanced: ["ch", "cm", "ex", "in", "mm", "pc", "pt", "rem", "vh", "vw", "vmax", "vmin"]
+        };
+        this._units.defaults = {
+            basic: ["%"].concat(this._units.defaultsSansPercent.basic),
+            advanced: this._units.defaultsSansPercent.advanced
+        };
+
+        // Selector Section
+        this._selectorSection = new WebInspector.VisualStyleSelectorSection(this);
+        this._selectorSection.addEventListener(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged, this._updateSections, this);
+        this.element.appendChild(this._selectorSection.element);
+
+        // Layout Section
+        this._generateSection("display", WebInspector.UIString("Display"));
+        this._generateSection("position", WebInspector.UIString("Position"));
+        this._generateSection("float", WebInspector.UIString("Float and Clear"));
+        this._generateSection("dimensions", WebInspector.UIString("Dimensions"));
+        this._generateSection("margin", WebInspector.UIString("Margin"));
+        this._generateSection("padding", WebInspector.UIString("Padding"));
+        this._generateSection("flexbox", WebInspector.UIString("Flexbox"));
+        this._generateSection("alignment", WebInspector.UIString("Alignment"));
+
+        this._sections.layout = new WebInspector.DetailsSection("layout", WebInspector.UIString("Layout"), [this._groups.display.section, this._groups.position.section, this._groups.float.section, this._groups.dimensions.section, this._groups.margin.section, this._groups.padding.section, this._groups.flexbox.section, this._groups.alignment.section]);
+        this.element.appendChild(this._sections.layout.element);
+
+        // Text Section
+        this._generateSection("content", WebInspector.UIString("Content"));
+        this._generateSection("text-style", WebInspector.UIString("Style"));
+        this._generateSection("font", WebInspector.UIString("Font"));
+        this._generateSection("font-variants", WebInspector.UIString("Variants"));
+        this._generateSection("text-spacing", WebInspector.UIString("Spacing"));
+        this._generateSection("text-shadow", WebInspector.UIString("Shadow"));
+
+        this._sections.text = new WebInspector.DetailsSection("text", WebInspector.UIString("Text"), [this._groups.content.section, this._groups.textStyle.section, this._groups.font.section, this._groups.fontVariants.section, this._groups.textSpacing.section, this._groups.textShadow.section]);
+        this.element.appendChild(this._sections.text.element);
+
+        // Background Section
+        this._generateSection("background-style", WebInspector.UIString("Style"));
+        this._generateSection("border", WebInspector.UIString("Border"));
+        this._generateSection("outline", WebInspector.UIString("Outline"));
+        this._generateSection("box-shadow", WebInspector.UIString("Box Shadow"));
+        this._generateSection("list-style", WebInspector.UIString("List Styles"));
+
+        this._sections.background = new WebInspector.DetailsSection("background", WebInspector.UIString("Background"), [this._groups.backgroundStyle.section, this._groups.border.section, this._groups.outline.section, this._groups.boxShadow.section, this._groups.listStyle.section]);
+        this.element.appendChild(this._sections.background.element);
+
+        // Effects Section
+        this._generateSection("transition", WebInspector.UIString("Transition"));
+        this._generateSection("animation", WebInspector.UIString("Animation"));
+
+        this._sections.effects = new WebInspector.DetailsSection("effects", WebInspector.UIString("Effects"), [this._groups.transition.section, this._groups.animation.section]);
+        this.element.appendChild(this._sections.effects.element);
+    }
+
+    // Public
+
+    refresh(significantChange)
+    {
+        if (significantChange)
+            this._selectorSection.update(this._nodeStyles);
+        else
+            this._updateSections();
+
+        super.refresh();
+    }
+
+    widthDidChange()
+    {
+        super.widthDidChange();
+
+        let sidebarWidth = this.element.realOffsetWidth;
+        for (let key in this._groups) {
+            let group = this._groups[key];
+            if (!group.specifiedWidthProperties)
+                continue;
+
+            for (let editor of group.specifiedWidthProperties)
+                editor.recalculateWidth(sidebarWidth);
+        }
+    }
+
+    // Private
+
+    _generateSection(id, displayName)
+    {
+        if (!id || !displayName)
+            return;
+
+        let camelCaseId = id.toCamelCase();
+
+        function createOptionsElement() {
+            let container = document.createElement("div");
+            container.classList.add("visual-style-section-clear");
+            container.title = WebInspector.UIString("Click to clear modified properties");
+            container.addEventListener("click", this._clearModifiedSection.bind(this, camelCaseId));
+            return container;
+        }
+
+        this._groups[camelCaseId] = {
+            section: new WebInspector.DetailsSection(id, displayName, [], createOptionsElement.call(this)),
+            properties: {}
+        };
+
+        let populateFunction = this["_populate" + camelCaseId.capitalize() + "Section"];
+        populateFunction.call(this);
+    }
+
+    _updateSections(event)
+    {
+        this._currentStyle = this._selectorSection.currentStyle();
+        if (!this._currentStyle)
+            return;
+
+        let disabled = this._currentStyle[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol];
+        this.element.classList.toggle("disabled", !!disabled);
+        if (disabled)
+            return;
+
+        for (let key in this._groups)
+            this._updateProperties(this._groups[key], !!event);
+
+        if (event) {
+            for (let key in this._sections) {
+                let section = this._sections[key];
+                let oneSectionExpanded = false;
+                for (let group of section.groups) {
+                    let camelCaseId = group.identifier.toCamelCase();
+                    group.collapsed = !group.expandedByUser && !this._groupHasSetProperty(this._groups[camelCaseId]);
+                    if (!group.collapsed)
+                        oneSectionExpanded = true;
+                }
+                if (oneSectionExpanded)
+                    section.collapsed = false;
+            }
+        }
+    }
+
+    _updateProperties(group, forceStyleUpdate)
+    {
+        if (!group.section)
+            return;
+
+        if (forceStyleUpdate && group.links) {
+            for (let key in group.links)
+                group.links[key].linked = false;
+        }
+
+        let initialTextList = this._initialTextList;
+        if (!initialTextList)
+            this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol] = initialTextList = new WeakMap;
+
+        let initialPropertyText = {};
+        let initialPropertyTextMissing = !initialTextList.has(group);
+        for (let key in group.properties) {
+            let propertyEditor = group.properties[key];
+            propertyEditor.update(!propertyEditor.style || forceStyleUpdate ? this._currentStyle : null);
+
+            let value = propertyEditor.synthesizedValue;
+            if (value && !propertyEditor.propertyMissing && initialPropertyTextMissing)
+                initialPropertyText[key] = value;
+        }
+
+        if (initialPropertyTextMissing)
+            initialTextList.set(group, initialPropertyText);
+
+        this._sectionModified(group);
+
+        if (group.autocompleteCompatibleProperties) {
+            for (let editor of group.autocompleteCompatibleProperties)
+                this._updateAutocompleteCompatiblePropertyEditor(editor, forceStyleUpdate);
+        }
+
+        if (group.specifiedWidthProperties) {
+            let sidebarWidth = this.element.realOffsetWidth;
+            for (let editor of group.specifiedWidthProperties)
+                editor.recalculateWidth(sidebarWidth);
+        }
+    }
+
+    _updateAutocompleteCompatiblePropertyEditor(editor, force)
+    {
+        if (!editor || (editor.hasCompletions && !force))
+            return;
+
+        editor.completions = WebInspector.CSSKeywordCompletions.forProperty(editor.propertyReferenceName);
+    }
+
+    _sectionModified(group)
+    {
+        group.section.element.classList.toggle("modified", this._initialPropertyTextModified(group));
+        group.section.element.classList.toggle("has-set-property", this._groupHasSetProperty(group));
+    }
+
+    _clearModifiedSection(groupId)
+    {
+        let group = this._groups[groupId];
+        group.section.element.classList.remove("modified");
+        let initialPropertyTextList = this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol].get(group);
+        if (!initialPropertyTextList)
+            return;
+
+        let newStyleText = this._currentStyle.text;
+        for (let key in group.properties) {
+            let propertyEditor = group.properties[key];
+            let initialValue = initialPropertyTextList[key] || null;
+            newStyleText = propertyEditor.modifyPropertyText(newStyleText, initialValue);
+            propertyEditor.resetEditorValues(initialValue);
+        }
+
+        this._currentStyle.text = newStyleText;
+        group.section.element.classList.toggle("has-set-property", this._groupHasSetProperty(group));
+    }
+
+    get _initialTextList()
+    {
+        return this._currentStyle[WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol];
+    }
+
+    _initialPropertyTextModified(group)
+    {
+        if (!group.properties)
+            return false;
+
+        let initialPropertyTextList = this._initialTextList.get(group);
+        if (!initialPropertyTextList)
+            return false;
+
+        for (let key in group.properties) {
+            let propertyEditor = group.properties[key];
+            if (propertyEditor.propertyMissing)
+                continue;
+
+            let value = propertyEditor.synthesizedValue;
+            if (value && initialPropertyTextList[key] !== value)
+                return true;
+        }
+
+        return false;
+    }
+
+    _groupHasSetProperty(group)
+    {
+        for (let key in group.properties) {
+            let propertyEditor = group.properties[key];
+            let value = propertyEditor.synthesizedValue;
+            if (value && !propertyEditor.propertyMissing)
+                return true;
+        }
+        return false;
+    }
+
+    _populateSection(group, groups)
+    {
+        if (!group || !groups)
+            return;
+
+        group.section.groups = groups;
+        for (let key in group.properties)
+            group.properties[key].addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._sectionModified.bind(this, group));
+    }
+
+    _populateDisplaySection()
+    {
+        let group = this._groups.display;
+        let properties = group.properties;
+
+        let displayRow = new WebInspector.DetailsSectionRow;
+
+        properties.display = new WebInspector.VisualStyleKeywordPicker("display", WebInspector.UIString("Type"), {
+            basic: ["None", "Block", "Flex", "Inline", "Inline Block"],
+            advanced: ["Compact", "Inline Flex", "Inline Table", "List Item", "Table", "Table Caption", "Table Cell", "Table Column", "Table Column Group", "Table Footer Group", "Table Header Group", "Table Row", "Table Row Group", " WAP Marquee", " WebKit Box", " WebKit Grid", " WebKit Inline Box", " WebKit Inline Grid"]
+        });
+        properties.visibility = new WebInspector.VisualStyleKeywordPicker("visibility", WebInspector.UIString("Visibility"), {
+            basic: ["Hidden", "Visible"],
+            advanced: ["Collapse"]
+        });
+
+        displayRow.element.appendChild(properties.display.element);
+        displayRow.element.appendChild(properties.visibility.element);
+
+        let sizingRow = new WebInspector.DetailsSectionRow;
+
+        properties.boxSizing = new WebInspector.VisualStyleKeywordPicker("box-sizing", WebInspector.UIString("Sizing"), this._keywords.defaults.concat(["Border Box", "Content Box"]));
+        properties.cursor = new WebInspector.VisualStyleKeywordPicker("cursor", WebInspector.UIString("Cursor"), {
+            basic: ["Auto", "Default", "None", "Pointer", "Crosshair", "Text"],
+            advanced: ["Context Menu", "Help", "Progress", "Wait", "Cell", "Vertical Text", "Alias", "Copy", "Move", "No Drop", "Not Allowed", "All Scroll", "Col Resize", "Row Resize", "N Resize", "E Resize", "S Resize", "W Resize", "NS Resize", "EW Resize", "NE Resize", "NW Resize", "SE Resize", "sW Resize", "NESW Resize", "NWSE Resize"]
+        });
+
+        sizingRow.element.appendChild(properties.boxSizing.element);
+        sizingRow.element.appendChild(properties.cursor.element);
+
+        let overflowRow = new WebInspector.DetailsSectionRow;
+
+        properties.opacity = new WebInspector.VisualStyleUnitSlider("opacity", WebInspector.UIString("Opacity"));
+        properties.overflow = new WebInspector.VisualStyleKeywordPicker(["overflow-x", "overflow-y"], WebInspector.UIString("Overflow"), {
+            basic: ["Initial", "Unset", "Revert", "Auto", "Hidden", "Scroll", "Visible"],
+            advanced: ["Marquee", "Overlay", " WebKit Paged X", " WebKit Paged Y"]
+        });
+
+        overflowRow.element.appendChild(properties.opacity.element);
+        overflowRow.element.appendChild(properties.overflow.element);
+
+        group.specifiedWidthProperties = [properties.opacity];
+
+        let displayGroup = new WebInspector.DetailsSectionGroup([displayRow, sizingRow, overflowRow]);
+        this._populateSection(group, [displayGroup]);
+    }
+
+    _addMetricsMouseListeners(editor, mode)
+    {
+        function editorMouseover() {
+            if (!this._currentStyle)
+                return;
+
+            if (!this._currentStyle.ownerRule) {
+                WebInspector.domTreeManager.highlightDOMNode(this._currentStyle.node.id, mode);
+                return;
+            }
+
+            WebInspector.domTreeManager.highlightSelector(this._currentStyle.ownerRule.selectorText, this._currentStyle.node.ownerDocument.frameIdentifier, mode);
+        }
+
+        function editorMouseout() {
+            WebInspector.domTreeManager.hideDOMNodeHighlight();
+        }
+
+        editor.element.addEventListener("mouseover", editorMouseover.bind(this));
+        editor.element.addEventListener("mouseout", editorMouseout);
+    }
+
+    _generateMetricSectionRows(group, prefix, allowNegatives, highlightOnHover)
+    {
+        let properties = group.properties;
+        let links = group.links = {};
+
+        let hasPrefix = prefix && prefix.length;
+        let propertyNamePrefix = hasPrefix ? prefix + "-" : "";
+
+        let top = hasPrefix ? prefix + "Top" : "top";
+        let bottom = hasPrefix ? prefix + "Bottom" : "bottom";
+        let left = hasPrefix ? prefix + "Left" : "left";
+        let right = hasPrefix ? prefix + "Right" : "right";
+
+        let vertical = new WebInspector.DetailsSectionRow;
+
+        properties[top] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "top", WebInspector.UIString("Top"), this._keywords.boxModel, this._units.defaults, allowNegatives);
+        properties[bottom] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "bottom", WebInspector.UIString("Bottom"), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
+        links["vertical"] = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom]], "link-vertical");
+
+        vertical.element.appendChild(properties[top].element);
+        vertical.element.appendChild(links["vertical"].element);
+        vertical.element.appendChild(properties[bottom].element);
+
+        let horizontal = new WebInspector.DetailsSectionRow;
+
+        properties[left] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "left", WebInspector.UIString("Left"), this._keywords.boxModel, this._units.defaults, allowNegatives);
+        properties[right] = new WebInspector.VisualStyleNumberInputBox(propertyNamePrefix + "right", WebInspector.UIString("Right"), this._keywords.boxModel, this._units.defaults, allowNegatives, true);
+        links["horizontal"] = new WebInspector.VisualStylePropertyEditorLink([properties[left], properties[right]], "link-horizontal");
+
+        horizontal.element.appendChild(properties[left].element);
+        horizontal.element.appendChild(links["horizontal"].element);
+        horizontal.element.appendChild(properties[right].element);
+
+        let allLinkRow = new WebInspector.DetailsSectionRow;
+        links["all"] = new WebInspector.VisualStylePropertyEditorLink([properties[top], properties[bottom], properties[left], properties[right]], "link-all", [links["vertical"], links["horizontal"]]);
+        allLinkRow.element.appendChild(links["all"].element);
+
+        if (highlightOnHover) {
+            this._addMetricsMouseListeners(properties[top], prefix);
+            this._addMetricsMouseListeners(links["vertical"], prefix);
+            this._addMetricsMouseListeners(properties[bottom], prefix);
+            this._addMetricsMouseListeners(links["all"], prefix);
+            this._addMetricsMouseListeners(properties[left], prefix);
+            this._addMetricsMouseListeners(links["horizontal"], prefix);
+            this._addMetricsMouseListeners(properties[right], prefix);
+        }
+
+        return [vertical, allLinkRow, horizontal];
+    }
+
+    _populatePositionSection()
+    {
+        let group = this._groups.position;
+        let rows = this._generateMetricSectionRows(group, null, true);
+        let properties = group.properties;
+
+        let positionType = new WebInspector.DetailsSectionRow;
+
+        properties.position = new WebInspector.VisualStyleKeywordPicker("position", WebInspector.UIString("Type"), {
+            basic: ["Static", "Relative", "Absolute", "Fixed"],
+            advanced: [" WebKit Sticky"]
+        });
+        properties.zIndex = new WebInspector.VisualStyleNumberInputBox("z-index", WebInspector.UIString("Z-Index"), this._keywords.boxModel, null, true);
+
+        positionType.element.appendChild(properties.position.element);
+        positionType.element.appendChild(properties.zIndex.element);
+        positionType.element.classList.add("visual-style-separated-row");
+
+        rows.unshift(positionType)
+
+        let positionGroup = new WebInspector.DetailsSectionGroup(rows);
+        this._populateSection(group, [positionGroup]);
+
+        let allowedPositionValues = ["relative", "absolute", "fixed", "-webkit-sticky"];
+        properties.zIndex.addDependency("position", allowedPositionValues);
+        properties.top.addDependency("position", allowedPositionValues);
+        properties.right.addDependency("position", allowedPositionValues);
+        properties.bottom.addDependency("position", allowedPositionValues);
+        properties.left.addDependency("position", allowedPositionValues);
+    }
+
+    _populateFloatSection()
+    {
+        let group = this._groups.float;
+        let properties = group.properties;
+
+        let floatRow = new WebInspector.DetailsSectionRow;
+
+        properties.float = new WebInspector.VisualStyleKeywordIconList("float", WebInspector.UIString("Float"), ["Left", "Right", "None"]);
+        floatRow.element.appendChild(properties.float.element);
+
+        let clearRow = new WebInspector.DetailsSectionRow;
+
+        properties.clear = new WebInspector.VisualStyleKeywordIconList("clear", WebInspector.UIString("Clear"), ["Left", "Right", "Both", "None"]);
+        clearRow.element.appendChild(properties.clear.element);
+
+        let floatGroup = new WebInspector.DetailsSectionGroup([floatRow, clearRow]);
+        this._populateSection(group, [floatGroup]);
+    }
+
+    _populateDimensionsSection()
+    {
+        let group = this._groups.dimensions;
+        let properties = group.properties;
+
+        let dimensionsWidth = new WebInspector.DetailsSectionRow;
+
+        properties.width = new WebInspector.VisualStyleRelativeNumberSlider("width", WebInspector.UIString("Width"), this._keywords.boxModel, this._units.defaults);
+
+        dimensionsWidth.element.appendChild(properties.width.element);
+
+        let dimensionsHeight = new WebInspector.DetailsSectionRow;
+
+        properties.height = new WebInspector.VisualStyleRelativeNumberSlider("height", WebInspector.UIString("Height"), this._keywords.boxModel, this._units.defaults, true);
+
+        dimensionsHeight.element.appendChild(properties.height.element);
+
+        let dimensionsProperties = [properties.width, properties.height];
+        let dimensionsRegularGroup = new WebInspector.DetailsSectionGroup([dimensionsWidth, dimensionsHeight]);
+
+        let dimensionsMinWidth = new WebInspector.DetailsSectionRow;
+
+        properties.minWidth = new WebInspector.VisualStyleRelativeNumberSlider("min-width", WebInspector.UIString("Width"), this._keywords.boxModel, this._units.defaults);
+
+        dimensionsMinWidth.element.appendChild(properties.minWidth.element);
+
+        let dimensionsMinHeight = new WebInspector.DetailsSectionRow;
+
+        properties.minHeight = new WebInspector.VisualStyleRelativeNumberSlider("min-height", WebInspector.UIString("Height"), this._keywords.boxModel, this._units.defaults);
+
+        dimensionsMinHeight.element.appendChild(properties.minHeight.element);
+
+        let dimensionsMinProperties = [properties.minWidth, properties.minHeight];
+        let dimensionsMinGroup = new WebInspector.DetailsSectionGroup([dimensionsMinWidth, dimensionsMinHeight]);
+
+        let dimensionsMaxKeywords = this._keywords.defaults.concat("None");
+        let dimensionsMaxWidth = new WebInspector.DetailsSectionRow;
+
+        properties.maxWidth = new WebInspector.VisualStyleRelativeNumberSlider("max-width", WebInspector.UIString("Width"), dimensionsMaxKeywords, this._units.defaults);
+
+        dimensionsMaxWidth.element.appendChild(properties.maxWidth.element);
+
+        let dimensionsMaxHeight = new WebInspector.DetailsSectionRow;
+
+        properties.maxHeight = new WebInspector.VisualStyleRelativeNumberSlider("max-height", WebInspector.UIString("Height"), dimensionsMaxKeywords, this._units.defaults);
+
+        dimensionsMaxHeight.element.appendChild(properties.maxHeight.element);
+
+        let dimensionsMaxProperties = [properties.maxWidth, properties.maxHeight];
+        let dimensionsMaxGroup = new WebInspector.DetailsSectionGroup([dimensionsMaxWidth, dimensionsMaxHeight]);
+
+        let dimensionsTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+            "default": {title: WebInspector.UIString("Default"), element: dimensionsRegularGroup.element, properties: dimensionsProperties},
+            "min": {title: WebInspector.UIString("Min"), element: dimensionsMinGroup.element, properties: dimensionsMinProperties},
+            "max": {title: WebInspector.UIString("Max"), element: dimensionsMaxGroup.element, properties: dimensionsMaxProperties}
+        });
+
+        let highlightMode = "content";
+        this._addMetricsMouseListeners(group.properties.width, highlightMode);
+        this._addMetricsMouseListeners(group.properties.height, highlightMode);
+        this._addMetricsMouseListeners(group.properties.minWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.minHeight, highlightMode);
+        this._addMetricsMouseListeners(group.properties.maxWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.maxHeight, highlightMode);
+
+        let dimensionsGroup = new WebInspector.DetailsSectionGroup([dimensionsTabController, dimensionsRegularGroup, dimensionsMinGroup, dimensionsMaxGroup]);
+        this._populateSection(group, [dimensionsGroup]);
+    }
+
+    _populateMarginSection()
+    {
+        let group = this._groups.margin;
+        let rows = this._generateMetricSectionRows(group, "margin", true, true);
+        let marginGroup = new WebInspector.DetailsSectionGroup(rows);
+        this._populateSection(group, [marginGroup]);
+    }
+
+    _populatePaddingSection()
+    {
+        let group = this._groups.padding;
+        let rows = this._generateMetricSectionRows(group, "padding", false, true);
+        let paddingGroup = new WebInspector.DetailsSectionGroup(rows);
+        this._populateSection(group, [paddingGroup]);
+    }
+
+    _populateFlexboxSection()
+    {
+        let group = this._groups.flexbox;
+        let properties = group.properties;
+
+        let flexOrderRow = new WebInspector.DetailsSectionRow;
+
+        properties.order = new WebInspector.VisualStyleNumberInputBox("order", WebInspector.UIString("Order"), this._keywords.defaults);
+        properties.flexBasis = new WebInspector.VisualStyleNumberInputBox("flex-basis", WebInspector.UIString("Basis"), this._keywords.boxModel, this._units.defaults, true);
+
+        flexOrderRow.element.appendChild(properties.order.element);
+        flexOrderRow.element.appendChild(properties.flexBasis.element);
+
+        let flexSizeRow = new WebInspector.DetailsSectionRow;
+
+        properties.flexGrow = new WebInspector.VisualStyleNumberInputBox("flex-grow", WebInspector.UIString("Grow"), this._keywords.defaults);
+        properties.flexShrink = new WebInspector.VisualStyleNumberInputBox("flex-shrink", WebInspector.UIString("Shrink"), this._keywords.defaults);
+
+        flexSizeRow.element.appendChild(properties.flexGrow.element);
+        flexSizeRow.element.appendChild(properties.flexShrink.element);
+
+        let flexFlowRow = new WebInspector.DetailsSectionRow;
+
+        properties.flexDirection = new WebInspector.VisualStyleKeywordPicker("flex-direction", WebInspector.UIString("Direction"), this._keywords.defaults.concat(["Row", "Row Reverse", "Column", "Column Reverse"]));
+        properties.flexWrap = new WebInspector.VisualStyleKeywordPicker("flex-wrap", WebInspector.UIString("Wrap"), this._keywords.defaults.concat(["Wrap", "Wrap Reverse", "Nowrap"]));
+
+        flexFlowRow.element.appendChild(properties.flexDirection.element);
+        flexFlowRow.element.appendChild(properties.flexWrap.element);
+
+        let flexboxGroup = new WebInspector.DetailsSectionGroup([flexOrderRow, flexSizeRow, flexFlowRow]);
+        this._populateSection(group, [flexboxGroup]);
+
+        let allowedDisplayValues = ["flex", "inline-flex", "-webkit-box", "-webkit-inline-box"];
+        properties.order.addDependency("display", allowedDisplayValues);
+        properties.flexBasis.addDependency("display", allowedDisplayValues);
+        properties.flexGrow.addDependency("display", allowedDisplayValues);
+        properties.flexShrink.addDependency("display", allowedDisplayValues);
+        properties.flexDirection.addDependency("display", allowedDisplayValues);
+        properties.flexWrap.addDependency("display", allowedDisplayValues);
+    }
+
+    _populateAlignmentSection()
+    {
+        let group = this._groups.alignment;
+        let properties = group.properties;
+        let alignmentKeywords = ["Initial", "Unset", "Revert", "Auto", "Flex Start", "Flex End", "Center", "Stretch"];
+        let advancedAlignmentKeywords = ["Start", "End", "Left", "Right", "Baseline", "Last Baseline"];
+
+        let contentRow = new WebInspector.DetailsSectionRow;
+        let contentKeywords = {
+            basic: alignmentKeywords.concat(["Space Between", "Space Around"]),
+            advanced: advancedAlignmentKeywords.concat(["Space Evenly"])
+        };
+
+        properties.justifyContent = new WebInspector.VisualStyleKeywordPicker("justify-content", WebInspector.UIString("Horizontal"), contentKeywords);
+        properties.alignContent = new WebInspector.VisualStyleKeywordPicker("align-content", WebInspector.UIString("Vertical"), contentKeywords);
+
+        contentRow.element.appendChild(properties.justifyContent.element);
+        contentRow.element.appendChild(properties.alignContent.element);
+
+        let itemsRow = new WebInspector.DetailsSectionRow;
+        let itemKeywords = {
+            basic: alignmentKeywords,
+            advanced: ["Self Start", "Self End"].concat(advancedAlignmentKeywords)
+        };
+
+        properties.alignItems = new WebInspector.VisualStyleKeywordPicker("align-items", WebInspector.UIString("Children"), itemKeywords);
+        properties.alignSelf = new WebInspector.VisualStyleKeywordPicker("align-self", WebInspector.UIString("Self"), itemKeywords);
+
+        itemsRow.element.appendChild(properties.alignItems.element);
+        itemsRow.element.appendChild(properties.alignSelf.element);
+
+        let alignmentGroup = new WebInspector.DetailsSectionGroup([contentRow, itemsRow]);
+        this._populateSection(group, [alignmentGroup]);
+
+        let allowedDisplayValues = ["flex", "inline-flex", "-webkit-box", "-webkit-inline-box"];
+        properties.justifyContent.addDependency("display", allowedDisplayValues);
+        properties.alignContent.addDependency("display", allowedDisplayValues);
+        properties.alignItems.addDependency("display", allowedDisplayValues);
+        properties.alignSelf.addDependency("display", allowedDisplayValues);
+    }
+
+    _populateContentSection()
+    {
+        let group = this._groups.content;
+        let properties = group.properties;
+
+        let contentRow = new WebInspector.DetailsSectionRow;
+
+        properties.content = new WebInspector.VisualStyleBasicInput("content", null, WebInspector.UIString("Enter a value"));
+
+        contentRow.element.appendChild(properties.content.element);
+
+        let contentGroup = new WebInspector.DetailsSectionGroup([contentRow]);
+        this._populateSection(group, [contentGroup]);
+    }
+
+    _populateTextStyleSection()
+    {
+        let group = this._groups.textStyle;
+        let properties = group.properties;
+
+        let textAppearanceRow = new WebInspector.DetailsSectionRow;
+
+        properties.color = new WebInspector.VisualStyleColorPicker("color", WebInspector.UIString("Color"));
+        properties.textDirection = new WebInspector.VisualStyleKeywordPicker("direction", WebInspector.UIString("Direction"), this._keywords.defaults.concat(["LTR", "RTL"]));
+
+        textAppearanceRow.element.appendChild(properties.color.element);
+        textAppearanceRow.element.appendChild(properties.textDirection.element);
+
+        let textAlignRow = new WebInspector.DetailsSectionRow;
+
+        properties.textAlign = new WebInspector.VisualStyleKeywordIconList("text-align", WebInspector.UIString("Align"), ["Left", "Center", "Right", "Justify"]);
+
+        textAlignRow.element.appendChild(properties.textAlign.element);
+
+        let textTransformRow = new WebInspector.DetailsSectionRow;
+
+        properties.textTransform = new WebInspector.VisualStyleKeywordIconList("text-transform", WebInspector.UIString("Transform"), ["Capitalize", "Uppercase", "Lowercase", "None"]);
+
+        textTransformRow.element.appendChild(properties.textTransform.element);
+
+        let textDecorationRow = new WebInspector.DetailsSectionRow;
+
+        properties.textDecoration = new WebInspector.VisualStyleKeywordIconList("text-decoration", WebInspector.UIString("Decoration"), ["Underline", "Line Through", "Overline", "None"]);
+
+        textDecorationRow.element.appendChild(properties.textDecoration.element);
+
+        group.autocompleteCompatibleProperties = [properties.color];
+
+        let textStyleGroup = new WebInspector.DetailsSectionGroup([textAppearanceRow, textAlignRow, textTransformRow, textDecorationRow]);
+        this._populateSection(group, [textStyleGroup]);
+    }
+
+    _populateFontSection()
+    {
+        let group = this._groups.font;
+        let properties = group.properties;
+
+        let fontFamilyRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontFamily = new WebInspector.VisualStyleFontFamilyListEditor("font-family", WebInspector.UIString("Family"));
+
+        fontFamilyRow.element.appendChild(properties.fontFamily.element);
+
+        let fontSizeRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontSize = new WebInspector.VisualStyleNumberInputBox("font-size", WebInspector.UIString("Size"), this._keywords.defaults.concat(["Larger", "XX Large", "X Large", "Large", "Medium", "Small", "X Small", "XX Small", "Smaller"]), this._units.defaults);
+
+        properties.fontWeight = new WebInspector.VisualStyleKeywordPicker("font-weight", WebInspector.UIString("Weight"), {
+            basic: this._keywords.defaults.concat(["Bolder", "Bold", "Normal", "Lighter"]),
+            advanced: ["100", "200", "300", "400", "500", "600", "700", "800", "900"]
+        });
+
+        fontSizeRow.element.appendChild(properties.fontSize.element);
+        fontSizeRow.element.appendChild(properties.fontWeight.element);
+
+        let fontStyleRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontStyle = new WebInspector.VisualStyleKeywordIconList("font-style", WebInspector.UIString("Style"), ["Italic", "Normal"]);
+        properties.fontFeatureSettings = new WebInspector.VisualStyleBasicInput("font-feature-settings", WebInspector.UIString("Features"), WebInspector.UIString("Enter Tag"));
+
+        fontStyleRow.element.appendChild(properties.fontStyle.element);
+        fontStyleRow.element.appendChild(properties.fontFeatureSettings.element);
+
+        group.autocompleteCompatibleProperties = [properties.fontFamily];
+        group.specifiedWidthProperties = [properties.fontFamily];
+
+        let fontGroup = new WebInspector.DetailsSectionGroup([fontFamilyRow, fontSizeRow, fontStyleRow]);
+        this._populateSection(group, [fontGroup]);
+    }
+
+    _populateFontVariantsSection()
+    {
+        let group = this._groups.fontVariants;
+        let properties = group.properties;
+
+        let alternatesRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontVariantAlternates = new WebInspector.VisualStyleBasicInput("font-variant-alternates", WebInspector.UIString("Alternates"), WebInspector.UIString("Enter Value"));
+
+        alternatesRow.element.appendChild(properties.fontVariantAlternates.element);
+
+        let positionRow = new WebInspector.DetailsSectionRow;
+
+        properties.fontVariantPosition = new WebInspector.VisualStyleKeywordPicker("font-variant-position", WebInspector.UIString("Position"), this._keywords.normal.concat(["Sub", "Super"]));
+
+        positionRow.element.appendChild(properties.fontVariantPosition.element);
+
+        properties.fontVariantCaps = new WebInspector.VisualStyleKeywordPicker("font-variant-caps", WebInspector.UIString("Caps"), this._keywords.normal.concat(["None", "Small Caps", "All Small Caps", "Petite Caps", "All Petite Caps", "Unicase", "Titling Caps"]));
+
+        positionRow.element.appendChild(properties.fontVariantCaps.element);
+
+        let ligaturesRow = new WebInspector.DetailsSectionRow;
+
+        // FIXME <http://webkit.org/b/153645> Add token based editor for Visual Sidebar
+        properties.fontVariantLigatures = new WebInspector.VisualStyleKeywordPicker("font-variant-ligatures", WebInspector.UIString("Ligatures"), this._keywords.normal.concat(["None", "Common Ligatures", "No Common Ligatures", "Discretionary Ligatures", "No Discretionary Ligatures", "Historical Ligatures", "No Historical Ligatures", "Contextual", "No Contextual"]));
+
+        ligaturesRow.element.appendChild(properties.fontVariantLigatures.element);
+
+        properties.fontVariantNumeric = new WebInspector.VisualStyleKeywordPicker("font-variant-numeric", WebInspector.UIString("Numeric"), this._keywords.normal.concat(["None", "Ordinal", "Slashed Zero", "Lining Nums", "Oldstyle Nums", "Proportional Nums", "Tabular Nums", "Diagonal Fractions", "Stacked Fractions"]));
+
+        ligaturesRow.element.appendChild(properties.fontVariantNumeric.element);
+
+        let variantsGroup = new WebInspector.DetailsSectionGroup([alternatesRow, positionRow, ligaturesRow]);
+        this._populateSection(group, [variantsGroup]);
+    }
+
+    _populateTextSpacingSection()
+    {
+        let group = this._groups.textSpacing;
+        let properties = group.properties;
+
+        let textLayoutRow = new WebInspector.DetailsSectionRow;
+
+        properties.lineHeight = new WebInspector.VisualStyleNumberInputBox("line-height", WebInspector.UIString("Height"), this._keywords.normal, this._units.defaults);
+        properties.verticalAlign = new WebInspector.VisualStyleNumberInputBox("vertical-align", WebInspector.UIString("Align"), ["Baseline", "Bottom"].concat(this._keywords.defaults, ["Middle", "Sub", "Super", "Text Bottom", "Text Top", "Top"]), this._units.defaults);
+
+        textLayoutRow.element.appendChild(properties.lineHeight.element);
+        textLayoutRow.element.appendChild(properties.verticalAlign.element);
+
+        let textSpacingRow = new WebInspector.DetailsSectionRow;
+
+        properties.letterSpacing = new WebInspector.VisualStyleNumberInputBox("letter-spacing", WebInspector.UIString("Letter"), this._keywords.normal, this._units.defaults);
+        properties.wordSpacing = new WebInspector.VisualStyleNumberInputBox("word-spacing", WebInspector.UIString("Word"), this._keywords.normal, this._units.defaults);
+
+        textSpacingRow.element.appendChild(properties.letterSpacing.element);
+        textSpacingRow.element.appendChild(properties.wordSpacing.element);
+
+        let textWhitespaceRow = new WebInspector.DetailsSectionRow;
+
+        properties.textIndent = new WebInspector.VisualStyleNumberInputBox("text-indent", WebInspector.UIString("Indent"), this._keywords.defaults, this._units.defaults);
+        properties.whiteSpace = new WebInspector.VisualStyleKeywordPicker("white-space", WebInspector.UIString("Whitespace"), this._keywords.defaults.concat(["Normal", "Nowrap", "Pre", "Pre Line", "Pre Wrap"]));
+
+        textWhitespaceRow.element.appendChild(properties.textIndent.element);
+        textWhitespaceRow.element.appendChild(properties.whiteSpace.element);
+
+        let textSpacingGroup = new WebInspector.DetailsSectionGroup([textLayoutRow, textSpacingRow, textWhitespaceRow]);
+        this._populateSection(group, [textSpacingGroup]);
+    }
+
+    _populateTextShadowSection()
+    {
+        let group = this._groups.textShadow;
+        let properties = group.properties;
+
+        let textShadowSizing = new WebInspector.DetailsSectionRow;
+
+        let textShadowH = new WebInspector.VisualStyleNumberInputBox("text-shadow", WebInspector.UIString("Horizontal"), null, this._units.defaultsSansPercent);
+        let textShadowV = new WebInspector.VisualStyleNumberInputBox("text-shadow", WebInspector.UIString("Vertical"), null, this._units.defaultsSansPercent);
+
+        textShadowSizing.element.appendChild(textShadowH.element);
+        textShadowSizing.element.appendChild(textShadowV.element);
+
+        let textShadowStyle = new WebInspector.DetailsSectionRow;
+
+        let textShadowColor = new WebInspector.VisualStyleColorPicker("text-shadow", WebInspector.UIString("Color"));
+        let textShadowBlur = new WebInspector.VisualStyleNumberInputBox("text-shadow", WebInspector.UIString("Blur"), null, this._units.defaultsSansPercent);
+        textShadowBlur.optionalProperty = true;
+
+        textShadowStyle.element.appendChild(textShadowColor.element);
+        textShadowStyle.element.appendChild(textShadowBlur.element);
+
+        properties.textShadow = new WebInspector.VisualStylePropertyCombiner("text-shadow", [textShadowH, textShadowV, textShadowBlur, textShadowColor]);
+
+        group.autocompleteCompatibleProperties = [textShadowColor];
+
+        let textShadowGroup = new WebInspector.DetailsSectionGroup([textShadowSizing, textShadowStyle]);
+        this._populateSection(group, [textShadowGroup]);
+    }
+
+    _populateBackgroundStyleSection()
+    {
+        let group = this._groups.backgroundStyle;
+        let properties = group.properties;
+
+        let backgroundStyleRow = new WebInspector.DetailsSectionRow;
+
+        properties.backgroundColor = new WebInspector.VisualStyleColorPicker("background-color", WebInspector.UIString("Color"));
+        properties.backgroundBlendMode = new WebInspector.VisualStyleKeywordPicker("background-blend-mode", WebInspector.UIString("Blend"), ["Normal", "Multiply", "Screen", "Overlay", "Darken", "Lighten", "Color", "Color Dodge", "Saturation", "Luminosity"]);
+
+        backgroundStyleRow.element.appendChild(properties.backgroundColor.element);
+        backgroundStyleRow.element.appendChild(properties.backgroundBlendMode.element);
+
+        let backgroundClipRow = new WebInspector.DetailsSectionRow;
+
+        let backgroundClipKeywords = ["Initial", "Border Box", "Padding Box", "Content Box"];
+        properties.backgroundClip = new WebInspector.VisualStyleKeywordPicker("background-clip", WebInspector.UIString("Clip"), backgroundClipKeywords);
+        properties.backgroundOrigin = new WebInspector.VisualStyleKeywordPicker("background-origin", WebInspector.UIString("Origin"), backgroundClipKeywords);
+
+        backgroundClipRow.element.appendChild(properties.backgroundClip.element);
+        backgroundClipRow.element.appendChild(properties.backgroundOrigin.element);
+
+        let backgroundSizeRow = new WebInspector.DetailsSectionRow;
+
+        let backgroundSizeKeywords = this._keywords.boxModel.concat(["Contain", "Cover"]);
+        let backgroundSizeX = new WebInspector.VisualStyleNumberInputBox("background-size", WebInspector.UIString("Width"), backgroundSizeKeywords, this._units.defaults);
+        backgroundSizeX.masterProperty = true;
+        let backgroundSizeY = new WebInspector.VisualStyleNumberInputBox("background-size", WebInspector.UIString("Height"), backgroundSizeKeywords, this._units.defaults);
+        backgroundSizeY.masterProperty = true;
+
+        properties.backgroundSize = new WebInspector.VisualStylePropertyCombiner("background-size", [backgroundSizeX, backgroundSizeY]);
+
+        backgroundSizeRow.element.appendChild(backgroundSizeX.element);
+        backgroundSizeRow.element.appendChild(backgroundSizeY.element);
+
+        let backgroundRow = new WebInspector.DetailsSectionRow;
+
+        properties.background = new WebInspector.VisualStyleCommaSeparatedKeywordEditor("background", null, {
+            "background-image": "none",
+            "background-position": "0% 0%",
+            "background-repeat": "repeat",
+            "background-attachment": "scroll",
+        });
+
+        backgroundRow.element.appendChild(properties.background.element);
+
+        let backgroundImageRow = new WebInspector.DetailsSectionRow;
+
+        let backgroundImage = new WebInspector.VisualStyleBackgroundPicker("background-image", WebInspector.UIString("Type"), this._keywords.defaults.concat(["None"]));
+
+        backgroundImageRow.element.appendChild(backgroundImage.element);
+
+        let backgroundPositionRow = new WebInspector.DetailsSectionRow;
+
+        let backgroundPositionX = new WebInspector.VisualStyleNumberInputBox("background-position", WebInspector.UIString("Position X"), ["Center", "Left", "Right"], this._units.defaults);
+        backgroundPositionX.optionalProperty = true;
+        let backgroundPositionY = new WebInspector.VisualStyleNumberInputBox("background-position", WebInspector.UIString("Position Y"), ["Bottom", "Center", "Top"], this._units.defaults);
+        backgroundPositionY.optionalProperty = true;
+
+        backgroundPositionRow.element.appendChild(backgroundPositionX.element);
+        backgroundPositionRow.element.appendChild(backgroundPositionY.element);
+
+        let backgroundRepeatRow = new WebInspector.DetailsSectionRow;
+
+        let backgroundRepeat = new WebInspector.VisualStyleKeywordPicker("background-repeat", WebInspector.UIString("Repeat"), this._keywords.defaults.concat(["No Repeat", "Repeat", "Repeat X", "Repeat Y"]));
+        backgroundRepeat.optionalProperty = true;
+        let backgroundAttachment = new WebInspector.VisualStyleKeywordPicker("background-attachment", WebInspector.UIString("Attach"), this._keywords.defaults.concat(["Fixed", "Local", "Scroll"]));
+        backgroundAttachment.optionalProperty = true;
+
+        backgroundRepeatRow.element.appendChild(backgroundRepeat.element);
+        backgroundRepeatRow.element.appendChild(backgroundAttachment.element);
+
+        let backgroundProperties = [backgroundImage, backgroundPositionX, backgroundPositionY, backgroundRepeat, backgroundAttachment];
+        let backgroundPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("background", backgroundProperties);
+
+        let noRemainingCommaSeparatedEditorItems = this._noRemainingCommaSeparatedEditorItems.bind(this, backgroundPropertyCombiner, backgroundProperties);
+        properties.background.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingCommaSeparatedEditorItems, this);
+
+        let selectedCommaSeparatedEditorItemValueChanged = this._selectedCommaSeparatedEditorItemValueChanged.bind(this, properties.background, backgroundPropertyCombiner);
+        backgroundPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedCommaSeparatedEditorItemValueChanged, this);
+
+        let commaSeparatedEditorTreeItemSelected = this._commaSeparatedEditorTreeItemSelected.bind(backgroundPropertyCombiner);
+        properties.background.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
+
+        group.autocompleteCompatibleProperties = [properties.backgroundColor];
+        group.specifiedWidthProperties = [properties.background];
+
+        let backgroundStyleGroup = new WebInspector.DetailsSectionGroup([backgroundStyleRow, backgroundClipRow, backgroundSizeRow, backgroundRow, backgroundImageRow, backgroundPositionRow, backgroundRepeatRow]);
+        this._populateSection(group, [backgroundStyleGroup]);
+    }
+
+    _populateBorderSection()
+    {
+        let group = this._groups.border;
+        let properties = group.properties;
+
+        let borderAllSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderStyle = new WebInspector.VisualStyleKeywordPicker(["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"] , WebInspector.UIString("Style"), this._keywords.borderStyle);
+        properties.borderStyle.propertyReferenceName = "border-style";
+        properties.borderWidth = new WebInspector.VisualStyleNumberInputBox(["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"], WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+        properties.borderWidth.propertyReferenceName = "border-width";
+
+        borderAllSize.element.appendChild(properties.borderStyle.element);
+        borderAllSize.element.appendChild(properties.borderWidth.element);
+
+        let borderAllStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderColor = new WebInspector.VisualStyleColorPicker(["border-top-color", "border-right-color", "border-bottom-color", "border-left-color"], WebInspector.UIString("Color"));
+        properties.borderColor.propertyReferenceName = "border-color";
+        properties.borderRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-left-radius", "border-top-right-radius", "border-bottom-left-radius", "border-bottom-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+        properties.borderRadius.propertyReferenceName = "border-radius";
+
+        borderAllStyle.element.appendChild(properties.borderColor.element);
+        borderAllStyle.element.appendChild(properties.borderRadius.element);
+
+        let borderAllProperties = [properties.borderStyle, properties.borderWidth, properties.borderColor, properties.borderRadius];
+        let borderAllGroup = new WebInspector.DetailsSectionGroup([borderAllSize, borderAllStyle]);
+
+        let borderTopSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderTopStyle = new WebInspector.VisualStyleKeywordPicker("border-top-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+        properties.borderTopWidth = new WebInspector.VisualStyleNumberInputBox("border-top-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+        borderTopSize.element.appendChild(properties.borderTopStyle.element);
+        borderTopSize.element.appendChild(properties.borderTopWidth.element);
+
+        let borderTopStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderTopColor = new WebInspector.VisualStyleColorPicker("border-top-color", WebInspector.UIString("Color"));
+        properties.borderTopRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-left-radius", "border-top-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+        borderTopStyle.element.appendChild(properties.borderTopColor.element);
+        borderTopStyle.element.appendChild(properties.borderTopRadius.element);
+
+        let borderTopProperties = [properties.borderTopStyle, properties.borderTopWidth, properties.borderTopColor, properties.borderTopRadius];
+        let borderTopGroup = new WebInspector.DetailsSectionGroup([borderTopSize, borderTopStyle]);
+
+        let borderRightSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderRightStyle = new WebInspector.VisualStyleKeywordPicker("border-right-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+        properties.borderRightWidth = new WebInspector.VisualStyleNumberInputBox("border-right-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+        borderRightSize.element.appendChild(properties.borderRightStyle.element);
+        borderRightSize.element.appendChild(properties.borderRightWidth.element);
+
+        let borderRightStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderRightColor = new WebInspector.VisualStyleColorPicker("border-right-color", WebInspector.UIString("Color"));
+        properties.borderRightRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-right-radius", "border-bottom-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+        borderRightStyle.element.appendChild(properties.borderRightColor.element);
+        borderRightStyle.element.appendChild(properties.borderRightRadius.element);
+
+        let borderRightProperties = [properties.borderRightStyle, properties.borderRightWidth, properties.borderRightColor, properties.borderRightRadius];
+        let borderRightGroup = new WebInspector.DetailsSectionGroup([borderRightSize, borderRightStyle]);
+
+        let borderBottomSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderBottomStyle = new WebInspector.VisualStyleKeywordPicker("border-bottom-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+        properties.borderBottomWidth = new WebInspector.VisualStyleNumberInputBox("border-bottom-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+        borderBottomSize.element.appendChild(properties.borderBottomStyle.element);
+        borderBottomSize.element.appendChild(properties.borderBottomWidth.element);
+
+        let borderBottomStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderBottomColor = new WebInspector.VisualStyleColorPicker("border-bottom-color", WebInspector.UIString("Color"));
+        properties.borderBottomRadius = new WebInspector.VisualStyleNumberInputBox(["border-bottom-left-radius", "border-bottom-right-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+        borderBottomStyle.element.appendChild(properties.borderBottomColor.element);
+        borderBottomStyle.element.appendChild(properties.borderBottomRadius.element);
+
+        let borderBottomProperties = [properties.borderBottomStyle, properties.borderBottomWidth, properties.borderBottomColor, properties.borderBottomRadius];
+        let borderBottomGroup = new WebInspector.DetailsSectionGroup([borderBottomSize, borderBottomStyle]);
+
+        let borderLeftSize = new WebInspector.DetailsSectionRow;
+
+        properties.borderLeftStyle = new WebInspector.VisualStyleKeywordPicker("border-left-style", WebInspector.UIString("Style"), this._keywords.borderStyle);
+        properties.borderLeftWidth = new WebInspector.VisualStyleNumberInputBox("border-left-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+        borderLeftSize.element.appendChild(properties.borderLeftStyle.element);
+        borderLeftSize.element.appendChild(properties.borderLeftWidth.element);
+
+        let borderLeftStyle = new WebInspector.DetailsSectionRow;
+
+        properties.borderLeftColor = new WebInspector.VisualStyleColorPicker("border-left-color", WebInspector.UIString("Color"));
+        properties.borderLeftRadius = new WebInspector.VisualStyleNumberInputBox(["border-top-left-radius", "border-bottom-left-radius"], WebInspector.UIString("Radius"), this._keywords.defaults, this._units.defaults);
+
+        borderLeftStyle.element.appendChild(properties.borderLeftColor.element);
+        borderLeftStyle.element.appendChild(properties.borderLeftRadius.element);
+
+        let borderLeftProperties = [properties.borderLeftStyle, properties.borderLeftWidth, properties.borderLeftColor, properties.borderLeftRadius];
+        let borderLeftGroup = new WebInspector.DetailsSectionGroup([borderLeftSize, borderLeftStyle]);
+
+        let borderTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+            "all": {title: WebInspector.UIString("All"), element: borderAllGroup.element, properties: borderAllProperties},
+            "top": {title: WebInspector.UIString("Top"), element: borderTopGroup.element, properties: borderTopProperties},
+            "right": {title: WebInspector.UIString("Right"), element: borderRightGroup.element, properties: borderRightProperties},
+            "bottom": {title: WebInspector.UIString("Bottom"), element: borderBottomGroup.element, properties: borderBottomProperties},
+            "left": {title: WebInspector.UIString("Left"), element: borderLeftGroup.element, properties: borderLeftProperties}
+        });
+
+        let highlightMode = "border";
+        this._addMetricsMouseListeners(group.properties.borderWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderTopWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderBottomWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderLeftWidth, highlightMode);
+        this._addMetricsMouseListeners(group.properties.borderRightWidth, highlightMode);
+
+        let borderGroup = new WebInspector.DetailsSectionGroup([borderTabController, borderAllGroup, borderTopGroup, borderRightGroup, borderBottomGroup, borderLeftGroup]);
+
+        let borderImageSourceRow = new WebInspector.DetailsSectionRow;
+
+        properties.borderImageSource = new WebInspector.VisualStyleURLInput("border-image-source", WebInspector.UIString("Image"), this._keywords.defaults.concat(["None"]));
+
+        borderImageSourceRow.element.appendChild(properties.borderImageSource.element);
+
+        let borderImageRepeatRow = new WebInspector.DetailsSectionRow;
+
+        let borderImageSliceFill = new WebInspector.VisualStyleKeywordCheckbox("border-image-slice", WebInspector.UIString("Fill"), "Fill");
+        borderImageSliceFill.optionalProperty = true;
+        properties.borderImageRepeat = new WebInspector.VisualStyleKeywordPicker("border-image-repeat", WebInspector.UIString("Repeat"), this._keywords.defaults.concat(["Stretch", "Repeat", "Round", "Space"]));
+
+        borderImageRepeatRow.element.appendChild(borderImageSliceFill.element);
+        borderImageRepeatRow.element.appendChild(properties.borderImageRepeat.element);
+
+        function generateBorderImagePropertyEditors(propertyName, keywords, units) {
+            let vertical = new WebInspector.DetailsSectionRow;
+
+            let top = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Top"), keywords, units);
+            top.masterProperty = true;
+            let bottom = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Bottom"), keywords, units);
+            bottom.masterProperty = true;
+
+            vertical.element.appendChild(top.element);
+            vertical.element.appendChild(bottom.element);
+
+            let horizontal = new WebInspector.DetailsSectionRow;
+
+            let left = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Left"), keywords, units);
+            left.masterProperty = true;
+            let right = new WebInspector.VisualStyleNumberInputBox(propertyName, WebInspector.UIString("Right"), keywords, units);
+            right.masterProperty = true;
+
+            horizontal.element.appendChild(left.element);
+            horizontal.element.appendChild(right.element);
+
+            return {group: new WebInspector.DetailsSectionGroup([vertical, horizontal]), properties: [top, bottom, left, right]};
+        }
+
+        let nonKeywordUnits = [WebInspector.UIString("Number")];
+
+        let borderImageUnits = Object.shallowCopy(this._units.defaults);
+        borderImageUnits.basic = nonKeywordUnits.concat(borderImageUnits.basic);
+        let borderImageWidth = generateBorderImagePropertyEditors("border-image-width", this._keywords.boxModel, borderImageUnits);
+        properties.borderImageWidth = new WebInspector.VisualStylePropertyCombiner("border-image-width", borderImageWidth.properties, true);
+
+        let borderOutsetUnits = Object.shallowCopy(this._units.defaultsSansPercent);
+        borderOutsetUnits.basic = nonKeywordUnits.concat(borderOutsetUnits.basic);
+        let borderImageOutset = generateBorderImagePropertyEditors("border-image-outset", this._keywords.defaults, borderOutsetUnits);
+        properties.borderImageOutset = new WebInspector.VisualStylePropertyCombiner("border-image-outset", borderImageOutset.properties, true);
+
+        let borderImageSlice = generateBorderImagePropertyEditors("border-image-slice", this._keywords.defaults, ["%"].concat(nonKeywordUnits));
+        borderImageSlice.properties.push(borderImageSliceFill);
+        properties.borderImageSlice = new WebInspector.VisualStylePropertyCombiner("border-image-slice", borderImageSlice.properties, true);
+
+        let borderImagePropertiesTabController = new WebInspector.VisualStyleTabbedPropertiesRow({
+            "width": {title: WebInspector.UIString("Width"), element: borderImageWidth.group.element, properties: [properties.borderImageWidth]},
+            "outset": {title: WebInspector.UIString("Outset"), element: borderImageOutset.group.element, properties: [properties.borderImageOutset]},
+            "slice": {title: WebInspector.UIString("Slice"), element: borderImageSlice.group.element, properties: [properties.borderImageSlice]}
+        });
+
+        let borderImageGroup = new WebInspector.DetailsSectionGroup([borderImageSourceRow, borderImageRepeatRow, borderImagePropertiesTabController, borderImageWidth.group, borderImageOutset.group, borderImageSlice.group]);
+
+        group.autocompleteCompatibleProperties = [properties.borderColor, properties.borderTopColor, properties.borderBottomColor, properties.borderLeftColor, properties.borderRightColor];
+
+        this._populateSection(group, [borderGroup, borderImageGroup]);
+
+        let allowedBorderValues = ["solid", "dashed", "dotted", "double", "groove", "inset", "outset", "ridge"];
+        properties.borderWidth.addDependency(["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"], allowedBorderValues);
+        properties.borderColor.addDependency(["border-top-style", "border-right-style", "border-bottom-style", "border-left-style"], allowedBorderValues);
+        properties.borderTopWidth.addDependency("border-top-style", allowedBorderValues);
+        properties.borderTopColor.addDependency("border-top-style", allowedBorderValues);
+        properties.borderRightWidth.addDependency("border-right-style", allowedBorderValues);
+        properties.borderRightColor.addDependency("border-right-style", allowedBorderValues);
+        properties.borderBottomWidth.addDependency("border-bottom-style", allowedBorderValues);
+        properties.borderBottomColor.addDependency("border-bottom-style", allowedBorderValues);
+        properties.borderLeftWidth.addDependency("border-left-style", allowedBorderValues);
+        properties.borderLeftColor.addDependency("border-left-style", allowedBorderValues);
+    }
+
+    _populateOutlineSection()
+    {
+        let group = this._groups.outline;
+        let properties = group.properties;
+
+        let outlineSizeRow = new WebInspector.DetailsSectionRow;
+
+        properties.outlineStyle = new WebInspector.VisualStyleKeywordPicker("outline-style" , WebInspector.UIString("Style"), this._keywords.borderStyle);
+        properties.outlineWidth = new WebInspector.VisualStyleNumberInputBox("outline-width", WebInspector.UIString("Width"), this._keywords.borderWidth, this._units.defaults);
+
+        outlineSizeRow.element.appendChild(properties.outlineStyle.element);
+        outlineSizeRow.element.appendChild(properties.outlineWidth.element);
+
+        let outlineStyleRow = new WebInspector.DetailsSectionRow;
+
+        properties.outlineColor = new WebInspector.VisualStyleColorPicker("outline-color", WebInspector.UIString("Color"));
+        properties.outlineOffset = new WebInspector.VisualStyleNumberInputBox("outline-offset", WebInspector.UIString("Offset"), this._keywords.defaults, this._units.defaults, true);
+
+        outlineStyleRow.element.appendChild(properties.outlineColor.element);
+        outlineStyleRow.element.appendChild(properties.outlineOffset.element);
+
+        group.autocompleteCompatibleProperties = [properties.outlineColor];
+
+        let outlineGroup = new WebInspector.DetailsSectionGroup([outlineSizeRow, outlineStyleRow]);
+        this._populateSection(group, [outlineGroup]);
+
+        let allowedOutlineValues = ["solid", "dashed", "dotted", "double", "groove", "inset", "outset", "ridge"];
+        properties.outlineWidth.addDependency("outline-style", allowedOutlineValues);
+        properties.outlineColor.addDependency("outline-style", allowedOutlineValues);
+    }
+
+    _populateBoxShadowSection()
+    {
+        let group = this._groups.boxShadow;
+        let properties = group.properties;
+
+        let boxShadowRow = new WebInspector.DetailsSectionRow;
+
+        properties.boxShadow = new WebInspector.VisualStyleCommaSeparatedKeywordEditor("box-shadow");
+
+        boxShadowRow.element.appendChild(properties.boxShadow.element);
+
+        let boxShadowHRow = new WebInspector.DetailsSectionRow;
+
+        let boxShadowH = new WebInspector.VisualStyleRelativeNumberSlider("box-shadow", WebInspector.UIString("Left"), null, this._units.defaultsSansPercent, true);
+
+        boxShadowHRow.element.appendChild(boxShadowH.element);
+
+        let boxShadowVRow = new WebInspector.DetailsSectionRow;
+
+        let boxShadowV = new WebInspector.VisualStyleRelativeNumberSlider("box-shadow", WebInspector.UIString("Top"), null, this._units.defaultsSansPercent, true);
+
+        boxShadowVRow.element.appendChild(boxShadowV.element);
+
+        let boxShadowBlurRow = new WebInspector.DetailsSectionRow;
+
+        let boxShadowBlur = new WebInspector.VisualStyleNumberInputBox("box-shadow", WebInspector.UIString("Blur"), null, this._units.defaultsSansPercent);
+        boxShadowBlur.optionalProperty = true;
+        let boxShadowSpread = new WebInspector.VisualStyleNumberInputBox("box-shadow", WebInspector.UIString("Spread"), null, this._units.defaultsSansPercent, true);
+        boxShadowSpread.optionalProperty = true;
+
+        boxShadowBlurRow.element.appendChild(boxShadowBlur.element);
+        boxShadowBlurRow.element.appendChild(boxShadowSpread.element);
+
+        let boxShadowColorRow = new WebInspector.DetailsSectionRow;
+
+        let boxShadowColor = new WebInspector.VisualStyleColorPicker("box-shadow", WebInspector.UIString("Color"));
+        let boxShadowInset = new WebInspector.VisualStyleKeywordCheckbox("box-shadow", WebInspector.UIString("Inset"), "Inset");
+        boxShadowInset.optionalProperty = true;
+
+        boxShadowColorRow.element.appendChild(boxShadowColor.element);
+        boxShadowColorRow.element.appendChild(boxShadowInset.element);
+
+        let boxShadowProperties = [boxShadowH, boxShadowV, boxShadowBlur, boxShadowSpread, boxShadowColor, boxShadowInset];
+        let boxShadowPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("box-shadow", boxShadowProperties);
+
+        let noRemainingCommaSeparatedEditorItems = this._noRemainingCommaSeparatedEditorItems.bind(this, boxShadowPropertyCombiner, boxShadowProperties);
+        properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingCommaSeparatedEditorItems, this);
+
+        let selectedCommaSeparatedEditorItemValueChanged = this._selectedCommaSeparatedEditorItemValueChanged.bind(this, properties.boxShadow, boxShadowPropertyCombiner);
+        boxShadowPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedCommaSeparatedEditorItemValueChanged, this);
+
+        let commaSeparatedEditorTreeItemSelected = this._commaSeparatedEditorTreeItemSelected.bind(boxShadowPropertyCombiner);
+        properties.boxShadow.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
+
+        group.autocompleteCompatibleProperties = [boxShadowColor];
+        group.specifiedWidthProperties = [properties.boxShadow];
+
+        let boxShadow = new WebInspector.DetailsSectionGroup([boxShadowRow, boxShadowHRow, boxShadowVRow, boxShadowBlurRow, boxShadowColorRow]);
+        this._populateSection(group, [boxShadow]);
+    }
+
+    _populateListStyleSection()
+    {
+        let group = this._groups.listStyle;
+        let properties = group.properties;
+
+        let listStyleTypeRow = new WebInspector.DetailsSectionRow;
+
+        properties.listStyleType = new WebInspector.VisualStyleKeywordPicker("list-style-type", WebInspector.UIString("Type"), {
+            basic: this._keywords.defaults.concat(["None", "Circle", "Disc", "Square", "Decimal", "Lower Alpha", "Upper Alpha", "Lower Roman", "Upper Roman"]),
+            advanced: ["Decimal Leading Zero", "Asterisks", "Footnotes", "Binary", "Octal", "Lower Hexadecimal", "Upper Hexadecimal", "Lower Latin", "Upper Latin", "Lower Greek", "Upper Greek", "Arabic Indic", "Hebrew", "Hiragana", "Katakana", "Hiragana Iroha", "Katakana Iroha", "CJK Earthly Branch", "CJK Heavenly Stem", "CJK Ideographic", "Bengali", "Cambodian", "Khmer", "Devanagari", "Gujarati", "Gurmukhi", "Kannada", "Lao", "Malayalam", "Mongolian", "Myanmar", "Oriya", "Persian", "Urdu", "Telugu", "Armenian", "Lower Armenian", "Upper Armenian", "Georgian", "Tibetan", "Thai", "Afar", "Hangul Consonant", "Hangul", "Lower Norwegian", "Upper Norwegian", "Ethiopic", "Ethiopic Halehame Gez", "Ethiopic Halehame Aa Et", "Ethiopic Halehame Aa Er", "Oromo", "Ethiopic Halehame Om Et", "Sidama", "Ethiopic Halehame Sid Et", "Somali", "Ethiopic Halehame So Et", "Amharic", "Ethiopic Halehame Am Et", "Tigre", "Ethiopic Halehame Tig", "Tigrinya Er", "Ethiopic Halehame Ti Er", "Tigrinya Et", "Ethiopic Halehame Ti Et", "Ethiopic Abegede", "Ethiopic Abegede Gez", "Amharic Abegede", "Ethiopic Abegede Am Et", "Tigrinya Er Abegede", "Ethiopic Abegede Ti Er", "Tigrinya Et Abegede", "Ethiopic Abegede Ti Et"]
+        });
+
+        properties.listStylePosition = new WebInspector.VisualStyleKeywordIconList("list-style-position", WebInspector.UIString("Position"), ["Outside", "Inside", "Initial"]);
+
+        listStyleTypeRow.element.appendChild(properties.listStyleType.element);
+        listStyleTypeRow.element.appendChild(properties.listStylePosition.element);
+
+        let listStyleImageRow = new WebInspector.DetailsSectionRow;
+
+        properties.listStyleImage = new WebInspector.VisualStyleURLInput("list-style-image", WebInspector.UIString("Image"), this._keywords.defaults.concat(["None"]));
+
+        listStyleImageRow.element.appendChild(properties.listStyleImage.element);
+
+        let listStyle = new WebInspector.DetailsSectionGroup([listStyleTypeRow, listStyleImageRow]);
+        this._populateSection(group, [listStyle]);
+    }
+
+    _populateTransitionSection()
+    {
+        let group = this._groups.transition;
+        let properties = group.properties;
+
+        let transitionRow = new WebInspector.DetailsSectionRow;
+
+        properties.transition = new WebInspector.VisualStyleCommaSeparatedKeywordEditor("transition", null, {
+            "transition-property": "all",
+            "transition-timing-function": "ease",
+            "transition-duration": "0",
+            "transition-delay": "0"
+        });
+
+        transitionRow.element.appendChild(properties.transition.element);
+
+        let transitionPropertyRow = new WebInspector.DetailsSectionRow;
+
+        let transitionProperty = new WebInspector.VisualStylePropertyNameInput("transition-property", WebInspector.UIString("Property"));
+        let transitionTiming = new WebInspector.VisualStyleTimingEditor("transition-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
+
+        transitionPropertyRow.element.appendChild(transitionProperty.element);
+        transitionPropertyRow.element.appendChild(transitionTiming.element);
+
+        let transitionDurationRow = new WebInspector.DetailsSectionRow;
+
+        let transitionTimeKeywords = ["s", "ms"];
+        let transitionDuration = new WebInspector.VisualStyleNumberInputBox("transition-duration", WebInspector.UIString("Duration"), null, transitionTimeKeywords);
+        let transitionDelay = new WebInspector.VisualStyleNumberInputBox("transition-delay", WebInspector.UIString("Delay"), null, transitionTimeKeywords);
+        transitionDelay.optionalProperty = true;
+
+        transitionDurationRow.element.appendChild(transitionDuration.element);
+        transitionDurationRow.element.appendChild(transitionDelay.element);
+
+        let transitionProperties = [transitionProperty, transitionTiming, transitionDuration, transitionDelay];
+        let transitionPropertyCombiner = new WebInspector.VisualStylePropertyCombiner("transition", transitionProperties);
+
+        let noRemainingCommaSeparatedEditorItems = this._noRemainingCommaSeparatedEditorItems.bind(this, transitionPropertyCombiner, transitionProperties);
+        properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.NoRemainingTreeItems, noRemainingCommaSeparatedEditorItems, this);
+
+        let selectedCommaSeparatedEditorItemValueChanged = this._selectedCommaSeparatedEditorItemValueChanged.bind(this, properties.transition, transitionPropertyCombiner);
+        transitionPropertyCombiner.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, selectedCommaSeparatedEditorItemValueChanged, this);
+
+        let commaSeparatedEditorTreeItemSelected = this._commaSeparatedEditorTreeItemSelected.bind(transitionPropertyCombiner);
+        properties.transition.addEventListener(WebInspector.VisualStyleCommaSeparatedKeywordEditor.Event.TreeItemSelected, commaSeparatedEditorTreeItemSelected, this);
+
+        group.autocompleteCompatibleProperties = [transitionProperty];
+        group.specifiedWidthProperties = [properties.transition];
+
+        let transitionGroup = new WebInspector.DetailsSectionGroup([transitionRow, transitionPropertyRow, transitionDurationRow]);
+        this._populateSection(group, [transitionGroup]);
+    }
+
+    _populateAnimationSection()
+    {
+        let group = this._groups.animation;
+        let properties = group.properties;
+
+        let animationNameRow = new WebInspector.DetailsSectionRow;
+
+        properties.animationName = new WebInspector.VisualStyleBasicInput("animation-name", WebInspector.UIString("Name"), WebInspector.UIString("Enter the name of a Keyframe"));
+
+        animationNameRow.element.appendChild(properties.animationName.element);
+
+        let animationTimingRow = new WebInspector.DetailsSectionRow;
+
+        properties.animationTiming = new WebInspector.VisualStyleTimingEditor("animation-timing-function", WebInspector.UIString("Timing"), ["Linear", "Ease", "Ease In", "Ease Out", "Ease In Out"]);
+        properties.animationIterationCount = new WebInspector.VisualStyleNumberInputBox("animation-iteration-count", WebInspector.UIString("Iterations"), this._keywords.defaults.concat(["Infinite"]), null);
+
+        animationTimingRow.element.appendChild(properties.animationTiming.element);
+        animationTimingRow.element.appendChild(properties.animationIterationCount.element);
+
+        let animationDurationRow = new WebInspector.DetailsSectionRow;
+
+        let animationTimeKeywords = ["s", "ms"];
+        properties.animationDuration = new WebInspector.VisualStyleNumberInputBox("animation-duration", WebInspector.UIString("Duration"), null, animationTimeKeywords);
+        properties.animationDelay = new WebInspector.VisualStyleNumberInputBox("animation-delay", WebInspector.UIString("Delay"), null, animationTimeKeywords);
+
+        animationDurationRow.element.appendChild(properties.animationDuration.element);
+        animationDurationRow.element.appendChild(properties.animationDelay.element);
+
+        let animationDirectionRow = new WebInspector.DetailsSectionRow;
+
+        properties.animationDirection = new WebInspector.VisualStyleKeywordPicker("animation-direction", WebInspector.UIString("Direction"), {
+            basic: this._keywords.normal.concat(["Reverse"]),
+            advanced: ["Alternate", "Alternate Reverse"]
+        });
+        properties.animationFillMode = new WebInspector.VisualStyleKeywordPicker("animation-fill-mode", WebInspector.UIString("Fill Mode"), this._keywords.defaults.concat(["None", "Forwards", "Backwards", "Both"]));
+
+        animationDirectionRow.element.appendChild(properties.animationDirection.element);
+        animationDirectionRow.element.appendChild(properties.animationFillMode.element);
+
+        let animationStateRow = new WebInspector.DetailsSectionRow;
+
+        properties.animationPlayState = new WebInspector.VisualStyleKeywordIconList("animation-play-state", WebInspector.UIString("State"), ["Running", "Paused", "Initial"]);
+
+        animationStateRow.element.appendChild(properties.animationPlayState.element);
+
+        let animationGroup = new WebInspector.DetailsSectionGroup([animationNameRow, animationTimingRow, animationDurationRow, animationDirectionRow, animationStateRow]);
+        this._populateSection(group, [animationGroup]);
+    }
+
+    _noRemainingCommaSeparatedEditorItems(propertyCombiner, propertyEditors)
+    {
+        if (!propertyCombiner || !propertyEditors)
+            return;
+
+        propertyCombiner.updateValuesFromText("");
+        for (let editor of propertyEditors)
+            editor.disabled = true;
+    }
+
+    _selectedCommaSeparatedEditorItemValueChanged(propertyEditor, propertyCombiner)
+    {
+        propertyEditor.selectedTreeElementValue = propertyCombiner.synthesizedValue;
+    }
+
+    _commaSeparatedEditorTreeItemSelected(event)
+    {
+        if (typeof this.updateValuesFromText === "function")
+            this.updateValuesFromText(event.data.text || "");
+    }
+};
+
+WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol = Symbol("visual-style-style-disabled");
+WebInspector.VisualStyleDetailsPanel.InitialPropertySectionTextListSymbol = Symbol("visual-style-initial-property-section-text");
+
+// FIXME: Add information about each property as a form of documentation.  This is currently empty as
+// we do not have permission to use the info on sites like MDN and have not written anything ourselves.
+WebInspector.VisualStyleDetailsPanel.propertyReferenceInfo = {};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleFontFamilyListEditor.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleFontFamilyListEditor.js
new file mode 100644
index 000000000..7f731171e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleFontFamilyListEditor.js
@@ -0,0 +1,158 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleFontFamilyListEditor = class VisualStyleFontFamilyListEditor extends WebInspector.VisualStyleCommaSeparatedKeywordEditor
+{
+    constructor(propertyNames, text, longhandProperties, layoutReversed)
+    {
+        super(propertyNames, text, longhandProperties, true, layoutReversed);
+
+        this._commaSeparatedKeywords.element.addEventListener("scroll", this._hideCompletions.bind(this));
+
+        this._completionController = new WebInspector.VisualStyleCompletionsController(this);
+        this._completionController.addEventListener(WebInspector.VisualStyleCompletionsController.Event.CompletionSelected, this._completionClicked, this);
+
+        this._wrapWithQuotesRegExp = /^[a-zA-Z\-]+$/;
+        this._removeWrappedQuotesRegExp = /[\"\']/g;
+    }
+
+    // Public
+
+    visualStyleCompletionsControllerCustomizeCompletionElement(suggestionsView, element, item)
+    {
+        element.style.fontFamily = item;
+    }
+
+    get hasCompletions()
+    {
+        return this._completionController.hasCompletions;
+    }
+
+    set completions(completions)
+    {
+        this._completionController.completions = completions;
+    }
+
+    // Private
+
+    _modifyCommaSeparatedKeyword(text)
+    {
+        if (!this._wrapWithQuotesRegExp.test(text))
+            text = "\"" + text + "\"";
+
+        return text;
+    }
+
+    _addCommaSeparatedKeyword(value, index)
+    {
+        if (value)
+            value = value.replace(this._removeWrappedQuotesRegExp, "");
+
+        let valueElement = super._addCommaSeparatedKeyword(value, index);
+        valueElement.addEventListener(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, this._treeElementKeyDown, this);
+        valueElement.addEventListener(WebInspector.VisualStyleFontFamilyTreeElement.Event.KeywordChanged, this._treeElementKeywordChanged, this);
+        valueElement.addEventListener(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorBlurred, this._hideCompletions, this);
+        return valueElement;
+    }
+
+    _addEmptyCommaSeparatedKeyword()
+    {
+        let newItem = super._addEmptyCommaSeparatedKeyword();
+        newItem.showKeywordEditor();
+    }
+
+    _completionClicked(event)
+    {
+        this.value = event.data.text;
+        this._valueDidChange();
+    }
+
+    _treeElementKeyDown(event)
+    {
+        if (!this._completionController.visible)
+            return;
+
+        let key = event && event.data && event.data.key;
+        if (!key)
+            return;
+
+        if (key === "Enter" || key === "Tab") {
+            let selectedTreeElement = this._commaSeparatedKeywords.selectedTreeElement;
+            if (!selectedTreeElement)
+                return;
+
+            selectedTreeElement.updateMainTitle(this._completionController.currentCompletion);
+            this._completionController.hide();
+            return;
+        }
+
+        if (key === "Escape") {
+            this._hideCompletions();
+            return;
+        }
+
+        if (key === "Up") {
+            this._completionController.previous();
+            return;
+        }
+
+        if (key === "Down") {
+            this._completionController.next();
+            return;
+        }
+    }
+
+    _treeElementKeywordChanged()
+    {
+        if (!this.hasCompletions)
+            return;
+
+        let result = this._valueDidChange();
+        if (!result)
+            return;
+
+        let treeElement = this._commaSeparatedKeywords.selectedTreeElement;
+        if (!treeElement)
+            return;
+
+        if (this._completionController.update(treeElement.mainTitle)) {
+            let bounds = treeElement.editorBounds(2);
+            if (!bounds)
+                return;
+
+            this._completionController.show(bounds);
+        }
+    }
+
+    _hideCompletions()
+    {
+        this._completionController.hide();
+    }
+
+    _createNewTreeElement(value)
+    {
+        return new WebInspector.VisualStyleFontFamilyTreeElement(value);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleFontFamilyTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleFontFamilyTreeElement.js
new file mode 100644
index 000000000..c438ecc2a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleFontFamilyTreeElement.js
@@ -0,0 +1,175 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleFontFamilyTreeElement = class VisualStyleFontFamilyTreeElement extends WebInspector.GeneralTreeElement
+{
+    constructor(text)
+    {
+        super([WebInspector.VisualStyleCommaSeparatedKeywordEditor.ListItemClassName, "visual-style-font-family-list-item"], text);
+
+        this._keywordEditor = document.createElement("input");
+        this._keywordEditor.classList.add("visual-style-comma-separated-keyword-item-editor");
+        this._keywordEditor.placeholder = WebInspector.UIString("(modify the boxes below to add a value)");
+        this._keywordEditor.spellcheck = false;
+        this._keywordEditor.addEventListener("keydown", this._keywordEditorKeyDown.bind(this));
+        this._keywordEditor.addEventListener("keyup", this._keywordEditorKeyUp.bind(this));
+        this._keywordEditor.addEventListener("blur", this._keywordEditorBlurred.bind(this));
+    }
+
+    // Public
+
+    editorBounds(padding)
+    {
+        if (this.keywordEditorHidden)
+            return;
+
+        let bounds = WebInspector.Rect.rectFromClientRect(this._keywordEditor.getBoundingClientRect());
+        return bounds.pad(padding || 0);
+    }
+
+    updateMainTitle(text)
+    {
+        this.mainTitle = this._keywordEditor.value = text;
+        this._listItemNode.style.fontFamily = text + ", " + WebInspector.VisualStyleFontFamilyTreeElement.FontFamilyFallback;
+
+        let hasText = text && text.length;
+        this._listItemNode.classList.toggle("no-value", !hasText);
+        if (!hasText)
+            this.subtitle = this._keywordEditor.placeholder;
+
+        this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.KeywordChanged);
+    }
+
+    get currentlyEditing()
+    {
+        return !this.keywordEditorHidden;
+    }
+
+    showKeywordEditor()
+    {
+        if (!this.keywordEditorHidden)
+            return;
+
+        this.subtitle = "";
+        this._listItemNode.classList.remove("editor-hidden");
+        this._listItemNode.scrollIntoViewIfNeeded();
+
+        this._keywordEditor.value = this._mainTitle;
+        this._keywordEditor.select();
+    }
+
+    hideKeywordEditor()
+    {
+        if (this.keywordEditorHidden)
+            return;
+
+        this.updateMainTitle(this._keywordEditor.value);
+        this._listItemNode.classList.add("editor-hidden");
+    }
+
+    get keywordEditorHidden()
+    {
+        return this._listItemNode.classList.contains("editor-hidden");
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        this._listItemNode.style.fontFamily = this._mainTitle;
+        this._listItemNode.classList.add("editor-hidden");
+        this._listItemNode.appendChild(this._keywordEditor);
+        this._listItemNode.addEventListener("click", this.showKeywordEditor.bind(this));
+    }
+
+    ondeselect()
+    {
+        this.hideKeywordEditor();
+    }
+
+    // Private
+
+    _keywordEditorKeyDown(event)
+    {
+        if (this.keywordEditorHidden)
+            return;
+
+        let keyCode = event.keyCode;
+        let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
+        if (keyCode === enterKeyCode) {
+            this._listItemNode.classList.add("editor-hidden");
+            this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Enter"});
+            return;
+        }
+
+        let escapeKeyCode = WebInspector.KeyboardShortcut.Key.Escape.keyCode;
+        if (keyCode === escapeKeyCode) {
+            this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Escape"});
+            return;
+        }
+
+        let tabKeyCode = WebInspector.KeyboardShortcut.Key.Tab.keyCode;
+        if (keyCode === tabKeyCode) {
+            event.preventDefault();
+            this._dontFireKeyUp = true;
+            this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key: "Tab"});
+            return;
+        }
+
+        let key = event.keyIdentifier;
+        if (key === "Up" || key === "Down") {
+            event.preventDefault();
+            this._dontFireKeyUp = true;
+            this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown, {key});
+            return;
+        }
+
+        this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorKeyDown);
+    }
+
+    _keywordEditorKeyUp()
+    {
+        if (this.keywordEditorHidden || this._dontFireKeyUp)
+            return;
+
+        this.updateMainTitle(this._keywordEditor.value);
+    }
+
+    _keywordEditorBlurred()
+    {
+        this.hideKeywordEditor();
+        this.dispatchEventToListeners(WebInspector.VisualStyleFontFamilyTreeElement.Event.EditorBlurred);
+    }
+};
+
+WebInspector.VisualStyleFontFamilyTreeElement.FontFamilyFallback = "-apple-system, sans-serif";
+
+WebInspector.VisualStyleFontFamilyTreeElement.Event = {
+    KeywordChanged: "visual-style-font-family-tree-element-keyword-changed",
+    EditorKeyDown: "visual-style-font-family-tree-element-editor-key-down",
+    EditorBlurred: "visual-style-font-family-tree-element-editor-blurred"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css
new file mode 100644
index 000000000..952cf0d9d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container {
+    display: flex;
+    align-items: center;
+}
+
+.visual-style-property-container.keyword-checkbox > .visual-style-property-value-container > input {
+    width: auto;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js
new file mode 100644
index 000000000..be415cfd9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordCheckbox.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleKeywordCheckbox = class VisualStyleKeywordCheckbox extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, value, layoutReversed)
+    {
+        super(propertyNames, text, null, null, "keyword-checkbox", layoutReversed);
+
+        this._checkboxElement = document.createElement("input");
+        this._checkboxElement.type = "checkbox";
+        this._checkboxElement.addEventListener("change", this._valueDidChange.bind(this));
+        this.contentElement.appendChild(this._checkboxElement);
+
+        this._value = value.toLowerCase().replace(/\s/g, "-") || null;
+    }
+
+    // Public
+
+    get value()
+    {
+        return this._checkboxElement.checked ? this._value : null;
+    }
+
+    set value(value)
+    {
+        this._checkboxElement.checked = value === this._value;
+    }
+
+    get synthesizedValue()
+    {
+        return this.value;
+    }
+
+    // Private
+
+    _toggleTabbingOfSelectableElements(disabled)
+    {
+        this._checkboxElement.tabIndex = disabled ? "-1" : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css
new file mode 100644
index 000000000..4f3c828bf
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.css
@@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container {
+    margin: 1px 0 2px;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container {
+    display: flex;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon {
+    position: relative;
+    width: 26px;
+    height: 18px;
+    color: black;
+    background-color: hsl(0, 100%, 100%);
+    border: 1px solid hsl(0, 0%, 83%);
+    border-right: none;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:last-child {
+    border-right: 1px solid hsl(0, 0%, 83%);
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) {
+    width: 27px;
+    border-right: 1px solid;
+    border-color: hsl(212, 92%, 54%);
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon.selected {
+    background-color: hsl(212, 92%, 54%);
+    color: hsl(0, 100%, 100%);
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:matches(.computed, .selected) + .keyword-icon {
+    width: 25px;
+    border-left: none;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon > div {
+    position: absolute;
+    top: 0;
+    left: 5px;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+}
+
+.visual-style-property-container.keyword-icon-list > .visual-style-property-value-container > .keyword-icon-list-container > .keyword-icon:not(.selected) > div {
+    opacity: 0.7;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js
new file mode 100644
index 000000000..9bf4e02b1
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordIconList.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleKeywordIconList = class VisualStyleKeywordIconList extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, possibleValues, layoutReversed)
+    {
+        super(propertyNames, text, possibleValues, null, "keyword-icon-list", layoutReversed);
+
+        this._iconListContainer = document.createElement("div");
+        this._iconListContainer.classList.add("keyword-icon-list-container");
+
+        this._iconElements = [];
+        this._computedIcon = null;
+        this._selectedIcon = null;
+
+        let prettyPropertyReferenceName = this._propertyReferenceName.capitalize().replace(/(-.)/g, (match) => match[1].toUpperCase());
+
+        function createListItem(value, title) {
+            let iconButtonElement = document.createElement("button");
+            iconButtonElement.id = value;
+            iconButtonElement.title = title;
+            iconButtonElement.classList.add("keyword-icon");
+            iconButtonElement.addEventListener("click", this._handleKeywordChanged.bind(this));
+
+            let imageName = (value === "none" || value === "initial") ? "VisualStyleNone" : prettyPropertyReferenceName + title.replace(/\s/g, "");
+            iconButtonElement.appendChild(useSVGSymbol("Images/" + imageName + ".svg"));
+
+            return iconButtonElement;
+        }
+
+        for (let key in this._possibleValues.basic) {
+            let iconElement = createListItem.call(this, key, this._possibleValues.basic[key]);
+            this._iconListContainer.appendChild(iconElement);
+            this._iconElements.push(iconElement);
+        }
+
+        this.contentElement.appendChild(this._iconListContainer);
+    }
+
+    // Public
+
+    get value()
+    {
+        if (!this._selectedIcon)
+            return null;
+
+        return this._selectedIcon.id;
+    }
+
+    set value(value)
+    {
+        this._computedIcon = null;
+        this._selectedIcon = null;
+        for (let icon of this._iconElements) {
+            icon.classList.remove("selected", "computed");
+
+            if (icon.id === this._updatedValues.placeholder)
+                this._computedIcon = icon;
+
+            if (icon.id === value && !this._propertyMissing)
+                this._selectedIcon = icon;
+        }
+
+        if (!this._computedIcon)
+            this._computedIcon = this._iconElements[0];
+
+        if (this._selectedIcon)
+            this._selectedIcon.classList.add("selected");
+        else
+            this._computedIcon.classList.add("computed");
+    }
+
+    get synthesizedValue()
+    {
+        return this.value;
+    }
+
+    // Private
+
+    _handleKeywordChanged(event)
+    {
+        let toggleOff = this.value === event.target.id;
+        this._propertyMissing = toggleOff;
+        this.value = toggleOff ? null : event.target.id;
+        this._valueDidChange();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js
new file mode 100644
index 000000000..1741f36a6
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleKeywordPicker.js
@@ -0,0 +1,174 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleKeywordPicker = class VisualStyleKeywordPicker extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, possibleValues, layoutReversed)
+    {
+        super(propertyNames, text, possibleValues, null, "keyword-picker", layoutReversed);
+
+        this._keywordSelectElement = document.createElement("select");
+        this._keywordSelectElement.classList.add("keyword-picker-select");
+        if (this._possibleValues.advanced)
+            this._keywordSelectElement.title = WebInspector.UIString("Option-click to show all values");
+
+        this._unchangedOptionElement = document.createElement("option");
+        this._unchangedOptionElement.value = "";
+        this._unchangedOptionElement.text = WebInspector.UIString("Unchanged");
+        this._keywordSelectElement.appendChild(this._unchangedOptionElement);
+
+        this._keywordSelectElement.appendChild(document.createElement("hr"));
+
+        this._createValueOptions(this._possibleValues.basic);
+        this._advancedValuesElements = null;
+
+        this._keywordSelectElement.addEventListener("mousedown", this._keywordSelectMouseDown.bind(this));
+        this._keywordSelectElement.addEventListener("change", this._handleKeywordChanged.bind(this));
+        this.contentElement.appendChild(this._keywordSelectElement);
+    }
+
+    // Public
+
+    get value()
+    {
+        // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+        return this._getValue();
+    }
+
+    set value(value)
+    {
+        // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+        this._setValue(value);
+    }
+
+    set placeholder(placeholder)
+    {
+        if (this._updatedValues.conflictingValues)
+            return;
+
+        this.specialPropertyPlaceholderElement.textContent = this._canonicalizedKeywordForKey(placeholder) || placeholder;
+    }
+
+    get synthesizedValue()
+    {
+        // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+        return this._generateSynthesizedValue();
+    }
+
+    updateEditorValues(updatedValues)
+    {   if (!updatedValues.conflictingValues) {
+            let missing = this._propertyMissing || !updatedValues.value;
+            this._unchangedOptionElement.selected = missing;
+            this.specialPropertyPlaceholderElement.hidden = !missing;
+        }
+
+        super.updateEditorValues(updatedValues);
+    }
+
+    // Private
+
+    _getValue()
+    {
+        return this._keywordSelectElement.value;
+    }
+
+    _setValue(value)
+    {
+        if (!value || !value.length) {
+            this._unchangedOptionElement.selected = true;
+            this.specialPropertyPlaceholderElement.hidden = false;
+            return;
+        }
+
+        if (this._propertyMissing || !this.valueIsSupportedKeyword(value))
+            return;
+
+        if (value === this._keywordSelectElement.value)
+            return;
+
+        if (this._valueIsSupportedAdvancedKeyword(value))
+            this._addAdvancedValues();
+
+        this._keywordSelectElement.value = value;
+    }
+
+    _generateSynthesizedValue()
+    {
+        return this._unchangedOptionElement.selected ? null : this._keywordSelectElement.value;
+    }
+
+    _handleKeywordChanged()
+    {
+        this._valueDidChange();
+        this.specialPropertyPlaceholderElement.hidden = !this._unchangedOptionElement.selected;
+    }
+
+    _keywordSelectMouseDown(event)
+    {
+        if (event.altKey)
+            this._addAdvancedValues();
+        else if (!this._valueIsSupportedAdvancedKeyword(this.value))
+            this._removeAdvancedValues();
+    }
+
+    _createValueOptions(values)
+    {
+        let addedElements = [];
+        for (let key in values) {
+            let option = document.createElement("option");
+            option.value = key;
+            option.text = values[key];
+            this._keywordSelectElement.appendChild(option);
+            addedElements.push(option);
+        }
+        return addedElements;
+    }
+
+    _addAdvancedValues()
+    {
+        if (this._advancedValuesElements)
+            return;
+
+        this._keywordSelectElement.appendChild(document.createElement("hr"));
+        this._advancedValuesElements = this._createValueOptions(this._possibleValues.advanced);
+    }
+
+    _removeAdvancedValues()
+    {
+        if (!this._advancedValuesElements)
+            return;
+
+        this._keywordSelectElement.removeChild(this._advancedValuesElements[0].previousSibling);
+        for (let element of this._advancedValuesElements)
+            this._keywordSelectElement.removeChild(element);
+
+        this._advancedValuesElements = null;
+    }
+
+    _toggleTabbingOfSelectableElements(disabled)
+    {
+        this._keywordSelectElement.tabIndex = disabled ? "-1" : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css
new file mode 100644
index 000000000..e7a469827
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.css
@@ -0,0 +1,82 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container > .visual-style-property-value-container.focused > .focus-ring {
+    position: absolute;
+    top: 2px;
+    left: 1px;
+    width: calc(100% - 2px);
+    height: 16px;
+    border-radius: 3px;
+    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.25);
+    pointer-events: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-keyword-select {
+    outline: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container {
+    display: flex;
+    position: absolute;
+    top: 2px;
+    left: 1px;
+    width: calc(100% - 20px);
+    line-height: 16px;
+    text-align: right;
+    border-radius: 4px;
+    background-color: white;
+    pointer-events: none;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.visual-style-property-container > .visual-style-property-value-container:not(.number-input-editable) > .number-input-container {
+    display: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container > .number-input-value {
+    width: 100%;
+    height: 16px;
+    margin-right: 1px;
+    padding: 0 0 1px 3px;
+    border-bottom-left-radius: 3px;
+    text-align: right;
+    border: none;
+    outline: none;
+    pointer-events: none;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder[hidden] ~ .number-input-container > .number-input-value {
+    pointer-events: all;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container > span {
+    min-width: -webkit-fit-content;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .number-input-container:not(.has-value) > span {
+    color: hsl(0, 0%, 60%);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js
new file mode 100644
index 000000000..85eb517c3
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleNumberInputBox.js
@@ -0,0 +1,409 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleNumberInputBox = class VisualStyleNumberInputBox extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
+    {
+        let unitlessNumberUnit = WebInspector.UIString("Number");
+
+        super(propertyNames, text, possibleValues, possibleUnits || [unitlessNumberUnit], "number-input-box", layoutReversed);
+
+        this._unitlessNumberUnit = unitlessNumberUnit;
+
+        this._hasUnits = this._possibleUnits.basic.some((unit) => unit !== unitlessNumberUnit);
+        this._allowNegativeValues = !!allowNegativeValues || false;
+
+        this.contentElement.classList.toggle("no-values", !possibleValues || !possibleValues.length);
+        this.contentElement.classList.toggle("no-units", !this._hasUnits);
+
+        let focusRingElement = document.createElement("div");
+        focusRingElement.classList.add("focus-ring");
+        this.contentElement.appendChild(focusRingElement);
+
+        this._keywordSelectElement = document.createElement("select");
+        this._keywordSelectElement.classList.add("number-input-keyword-select");
+        if (this._possibleUnits.advanced)
+            this._keywordSelectElement.title = WebInspector.UIString("Option-click to show all units");
+
+        this._unchangedOptionElement = document.createElement("option");
+        this._unchangedOptionElement.value = "";
+        this._unchangedOptionElement.text = WebInspector.UIString("Unchanged");
+        this._keywordSelectElement.appendChild(this._unchangedOptionElement);
+
+        this._keywordSelectElement.appendChild(document.createElement("hr"));
+
+        if (this._possibleValues) {
+            this._createValueOptions(this._possibleValues.basic);
+            this._keywordSelectElement.appendChild(document.createElement("hr"));
+        }
+
+        if (this._possibleUnits)
+            this._createUnitOptions(this._possibleUnits.basic);
+
+        this._advancedUnitsElements = null;
+
+        this._keywordSelectElement.addEventListener("focus", this._focusContentElement.bind(this));
+        this._keywordSelectElement.addEventListener("mousedown", this._keywordSelectMouseDown.bind(this));
+        this._keywordSelectElement.addEventListener("change", this._keywordChanged.bind(this));
+        this._keywordSelectElement.addEventListener("blur", this._blurContentElement.bind(this));
+        this.contentElement.appendChild(this._keywordSelectElement);
+
+        this._numberUnitsContainer = document.createElement("div");
+        this._numberUnitsContainer.classList.add("number-input-container");
+
+        this._valueNumberInputElement = document.createElement("input");
+        this._valueNumberInputElement.classList.add("number-input-value");
+        this._valueNumberInputElement.spellcheck = false;
+        this._valueNumberInputElement.addEventListener("focus", this._focusContentElement.bind(this));
+        this._valueNumberInputElement.addEventListener("keydown", this._valueNumberInputKeyDown.bind(this));
+        this._valueNumberInputElement.addEventListener("keyup", this._valueNumberInputKeyUp.bind(this));
+        this._valueNumberInputElement.addEventListener("blur", this._blurContentElement.bind(this));
+        this._valueNumberInputElement.addEventListener("change", this._valueNumberInputChanged.bind(this));
+        this._numberUnitsContainer.appendChild(this._valueNumberInputElement);
+
+        this._unitsElement = document.createElement("span");
+        this._numberUnitsContainer.appendChild(this._unitsElement);
+
+        this.contentElement.appendChild(this._numberUnitsContainer);
+
+        this._setNumberInputIsEditable(true);
+        this._valueNumberInputElement.value = null;
+        this._valueNumberInputElement.setAttribute("placeholder", 0);
+        this._unitsElementTextContent = this._keywordSelectElement.value = this.valueIsSupportedUnit("px") ? "px" : this._possibleUnits.basic[0];
+    }
+
+    // Public
+
+    get value()
+    {
+        if (this._numberInputIsEditable)
+            return parseFloat(this._valueNumberInputElement.value);
+        return this._keywordSelectElement.value || null;
+    }
+
+    set value(value)
+    {
+        if (value && value === this.value)
+            return;
+
+        if (this._propertyMissing) {
+            if (value || this._updatedValues.placeholder)
+                this.specialPropertyPlaceholderElement.textContent = (value || this._updatedValues.placeholder) + (this._updatedValues.units || "");
+
+            if (isNaN(value)) {
+                this._unchangedOptionElement.selected = true;
+                this._setNumberInputIsEditable();
+                this.specialPropertyPlaceholderElement.hidden = false;
+                return;
+            }
+        }
+
+        this.specialPropertyPlaceholderElement.hidden = true;
+
+        if (!value) {
+            this._valueNumberInputElement.value = null;
+            this._markUnitsContainerIfInputHasValue();
+            return;
+        }
+
+        if (!isNaN(value)) {
+            this._setNumberInputIsEditable(true);
+            this._valueNumberInputElement.value = Math.round(value * 100) / 100;
+            this._markUnitsContainerIfInputHasValue();
+            return;
+        }
+
+        if (this.valueIsSupportedKeyword(value)) {
+            this._setNumberInputIsEditable();
+            this._keywordSelectElement.value = value;
+            return;
+        }
+    }
+
+    get units()
+    {
+        if (this._unchangedOptionElement.selected)
+            return null;
+
+        let keyword = this._keywordSelectElement.value;
+        if (!this.valueIsSupportedUnit(keyword))
+            return null;
+
+        return keyword;
+    }
+
+    set units(unit)
+    {
+        if (this._unchangedOptionElement.selected || unit === this.units)
+            return;
+
+        if (!unit && !this._possibleUnits.basic.includes(this._unitlessNumberUnit) && !this.valueIsSupportedUnit(unit))
+            return;
+
+        if (this._valueIsSupportedAdvancedUnit(unit))
+            this._addAdvancedUnits();
+
+        this._setNumberInputIsEditable(true);
+        this._keywordSelectElement.value = unit || this._unitlessNumberUnit;
+        this._unitsElementTextContent = unit;
+    }
+
+    get placeholder()
+    {
+        return this._valueNumberInputElement.getAttribute("placeholder");
+    }
+
+    set placeholder(text)
+    {
+        if (text === this.placeholder)
+            return;
+
+        let onlyNumericalText = text && !isNaN(text) && (Math.round(text * 100) / 100);
+        this._valueNumberInputElement.setAttribute("placeholder", onlyNumericalText || 0);
+
+        if (!onlyNumericalText)
+            this.specialPropertyPlaceholderElement.textContent = this._canonicalizedKeywordForKey(text) || text;
+    }
+
+    get synthesizedValue()
+    {
+        if (this._unchangedOptionElement.selected)
+            return null;
+
+        let value = this._valueNumberInputElement.value;
+        if (this._numberInputIsEditable && !value)
+            return null;
+
+        let keyword = this._keywordSelectElement.value;
+        return this.valueIsSupportedUnit(keyword) ? value + (keyword === this._unitlessNumberUnit ? "" : keyword) : keyword;
+    }
+
+    updateValueFromText(text, value)
+    {
+        let match = this.parseValue(value);
+        this.value = match ? match[1] : value;
+        this.units = match ? match[2] : null;
+        return this.modifyPropertyText(text, value);
+    }
+
+    // Protected
+
+    set specialPropertyPlaceholderElementText(text)
+    {
+        this._unchangedOptionElement.selected = true;
+
+        // FIXME: <https://webkit.org/b/147064> Getter and setter on super are called with wrong "this" object
+        WebInspector.VisualStylePropertyEditor.prototype.__lookupSetter__("specialPropertyPlaceholderElementText").call(this, text);
+    }
+
+    parseValue(text)
+    {
+        return /^(-?[\d.]+)([^\s\d]{0,4})(?:\s*;?)$/.exec(text);
+    }
+
+    // Private
+
+    set _unitsElementTextContent(text)
+    {
+        if (!this._hasUnits)
+            return;
+
+        this._unitsElement.textContent = text === this._unitlessNumberUnit ? "" : text;
+        this._markUnitsContainerIfInputHasValue();
+    }
+
+    _setNumberInputIsEditable(flag)
+    {
+        this._numberInputIsEditable = flag || false;
+        this.contentElement.classList.toggle("number-input-editable", this._numberInputIsEditable);
+    }
+
+    _markUnitsContainerIfInputHasValue()
+    {
+        let numberInputValue = this._valueNumberInputElement.value;
+        this._numberUnitsContainer.classList.toggle("has-value", numberInputValue && numberInputValue.length);
+    }
+
+    _keywordChanged()
+    {
+        let unchangedOptionSelected = this._unchangedOptionElement.selected;
+        if (!unchangedOptionSelected) {
+            let selectedKeywordIsUnit = this.valueIsSupportedUnit(this._keywordSelectElement.value);
+            if (!this._numberInputIsEditable && selectedKeywordIsUnit)
+                this._valueNumberInputElement.value = null;
+
+            this._unitsElementTextContent = this._keywordSelectElement.value;
+            this._setNumberInputIsEditable(selectedKeywordIsUnit);
+        } else
+            this._setNumberInputIsEditable(false);
+
+        this._valueDidChange();
+        this.specialPropertyPlaceholderElement.hidden = !unchangedOptionSelected;
+    }
+
+    _valueNumberInputKeyDown(event)
+    {
+        if (!this._numberInputIsEditable)
+            return;
+
+        function adjustValue(delta)
+        {
+            let newValue;
+            let value = this.value;
+            if (!value && isNaN(value)) {
+                let placeholderValue = this.placeholder && !isNaN(this.placeholder) ? parseFloat(this.placeholder) : 0;
+                newValue = placeholderValue + delta;
+            } else
+                newValue = value + delta;
+
+            if (!this._allowNegativeValues && newValue < 0)
+                newValue = 0;
+
+            this._propertyMissing = false;
+            this.value = Math.round(newValue * 100) / 100;
+            this._valueDidChange();
+        }
+
+        let shift = 1;
+        if (event.ctrlKey)
+            shift /= 10;
+        else if (event.shiftKey)
+            shift *= 10;
+
+        let key = event.keyIdentifier;
+        if (key.startsWith("Page"))
+            shift *= 10;
+
+        if (key === "Up" || key === "PageUp") {
+            event.preventDefault();
+            adjustValue.call(this, shift);
+            return;
+        }
+
+        if (key === "Down" || key === "PageDown") {
+            event.preventDefault();
+            adjustValue.call(this, -shift);
+            return;
+        }
+
+        this._markUnitsContainerIfInputHasValue();
+        this._valueDidChange();
+    }
+
+    _valueNumberInputKeyUp(event)
+    {
+        if (!this._numberInputIsEditable)
+            return;
+
+        this._markUnitsContainerIfInputHasValue();
+        this._valueDidChange();
+    }
+
+    _keywordSelectMouseDown(event)
+    {
+        if (event.altKey)
+            this._addAdvancedUnits();
+        else if (!this._valueIsSupportedAdvancedUnit(this._keywordSelectElement.value))
+            this._removeAdvancedUnits();
+    }
+
+    _createValueOptions(values)
+    {
+        let addedElements = [];
+        for (let key in values) {
+            let option = document.createElement("option");
+            option.value = key;
+            option.text = values[key];
+            this._keywordSelectElement.appendChild(option);
+            addedElements.push(option);
+        }
+
+        return addedElements;
+    }
+
+    _createUnitOptions(units)
+    {
+        let addedElements = [];
+        for (let unit of units) {
+            let option = document.createElement("option");
+            option.text = unit;
+            this._keywordSelectElement.appendChild(option);
+            addedElements.push(option);
+        }
+
+        return addedElements;
+    }
+
+    _addAdvancedUnits()
+    {
+        if (this._advancedUnitsElements)
+            return;
+
+        this._keywordSelectElement.appendChild(document.createElement("hr"));
+        this._advancedUnitsElements = this._createUnitOptions(this._possibleUnits.advanced);
+    }
+
+    _removeAdvancedUnits()
+    {
+        if (!this._advancedUnitsElements)
+            return;
+
+        this._keywordSelectElement.removeChild(this._advancedUnitsElements[0].previousSibling);
+        for (let element of this._advancedUnitsElements)
+            this._keywordSelectElement.removeChild(element);
+
+        this._advancedUnitsElements = null;
+    }
+
+    _focusContentElement(event)
+    {
+        this.contentElement.classList.add("focused");
+    }
+
+    _blurContentElement(event)
+    {
+        this.contentElement.classList.remove("focused");
+    }
+
+    _valueNumberInputChanged(event)
+    {
+        let newValue = this.value;
+        if (!newValue && isNaN(newValue))
+            newValue = this.placeholder && !isNaN(this.placeholder) ? parseFloat(this.placeholder) : 0;
+
+        if (!this._allowNegativeValues && newValue < 0)
+            newValue = 0;
+
+        this.value = Math.round(newValue * 100) / 100;
+        this._valueDidChange();
+    }
+
+    _toggleTabbingOfSelectableElements(disabled)
+    {
+        this._keywordSelectElement.tabIndex = disabled ? "-1" : null;
+        this._valueNumberInputElement.tabIndex = disabled ? "-1" : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js
new file mode 100644
index 000000000..285868e2b
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyCombiner.js
@@ -0,0 +1,204 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStylePropertyCombiner = class VisualStylePropertyCombiner extends WebInspector.Object
+{
+    constructor(propertyName, propertyEditors, spreadNumberValues)
+    {
+        super();
+
+        this._style = null;
+        this._propertyName = propertyName;
+        this._propertyMissing = false;
+        this._propertyEditors = propertyEditors || [];
+        this._spreadNumberValues = !!spreadNumberValues && this._propertyEditors.length >= 4;
+
+        for (let editor of this._propertyEditors) {
+            editor.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._handlePropertyEditorValueChanged, this);
+            editor.suppressStyleTextUpdate = true;
+        }
+
+        this._textContainsNameRegExp = new RegExp("(?:(?:^|;)\\s*" + this._propertyName + "\\s*:)");
+        this._replacementRegExp = new RegExp("((?:^|;)\\s*)(" + this._propertyName + ")(.+?(?:;|$))");
+        this._valueRegExp = /([^\s]+\(.+\)|[^\s]+)(?:;?)/g;
+    }
+
+    get style()
+    {
+        return this._style;
+    }
+
+    get synthesizedValue()
+    {
+        let value = "";
+        let oneEditorHasValue = false;
+        for (let editor of this._propertyEditors) {
+            let editorValue = editor.synthesizedValue;
+            if (editorValue && editorValue.length)
+                oneEditorHasValue = true;
+            else if (editor.optionalProperty)
+                continue;
+
+            if (editor.masterProperty && editor.valueIsSupportedKeyword(editor.value)) {
+                this._markEditors(editor, true);
+                return editorValue;
+            }
+
+            if (editor !== this._propertyEditors[0])
+                value += " ";
+
+            value += editorValue || (editor.colorProperty ? "transparent" : 0);
+        }
+
+        this._markEditors();
+        return value.length && oneEditorHasValue ? value : null;
+    }
+
+    modifyPropertyText(text, value)
+    {
+        if (this._textContainsNameRegExp.test(text))
+            text = text.replace(this._replacementRegExp, value !== null ? "$1$2: " + value + ";" : "$1");
+        else if (value !== null)
+            text += WebInspector.VisualStylePropertyEditor.generateFormattedTextForNewProperty(text, this._propertyName, value);
+
+        return text;
+    }
+
+    update(style)
+    {
+        if (style)
+            this._style = style;
+        else if (this._ignoreNextUpdate) {
+            this._ignoreNextUpdate = false;
+            return;
+        }
+
+        if (!this._style || !this._valueRegExp)
+            return;
+
+        let property = this._style.propertyForName(this._propertyName, true);
+        let propertyMissing = !property;
+        if (propertyMissing && this._style.nodeStyles)
+            property = this._style.nodeStyles.computedStyle.propertyForName(this._propertyName);
+
+        if (!property)
+            return;
+
+        this.updateValuesFromText(property.value, propertyMissing);
+        this._propertyMissing = propertyMissing;
+    }
+
+    updateValuesFromText(styleText, propertyMissing)
+    {
+        if (styleText === this.synthesizedValue)
+            return;
+
+        for (let editor of this._propertyEditors)
+            editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = false;
+
+        function updateEditor(editor, value) {
+            let updatedValues = editor.getValuesFromText(value || "", propertyMissing);
+            if (!updatedValues)
+                return;
+
+            editor.updateEditorValues(updatedValues);
+            editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol] = true;
+        }
+
+        if (this._spreadNumberValues) {
+            let numberValues = styleText.match(/\d+[\w%]*/g);
+            let count = numberValues && numberValues.length;
+            if (count === 1) {
+                for (let editor of this._propertyEditors)
+                    updateEditor(editor, numberValues[0]);
+            } else if (count === 2) {
+                for (let i = 0; i < count; ++i) {
+                    updateEditor(this._propertyEditors[i], numberValues[i]);
+                    updateEditor(this._propertyEditors[i + 2], numberValues[i]);
+                }
+            } else if (count === 3) {
+                updateEditor(this._propertyEditors[0], numberValues[0]);
+                updateEditor(this._propertyEditors[1], numberValues[1]);
+                updateEditor(this._propertyEditors[2], numberValues[2]);
+                updateEditor(this._propertyEditors[3], numberValues[1]);
+            }
+        }
+
+        function updateCompatibleEditor(value) {
+            for (let editor of this._propertyEditors) {
+                if (value && !editor.valueIsCompatible(value) || editor[WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol])
+                    continue;
+
+                if (this._currentValueIsKeyword && editor.disabled)
+                    continue;
+
+                updateEditor(editor, value);
+                if (value)
+                    return;
+            }
+        }
+
+        let matches = styleText.match(this._valueRegExp);
+        for (let i = 0; i < this._propertyEditors.length; ++i)
+            updateCompatibleEditor.call(this, matches && matches[i]);
+    }
+
+    get propertyMissing()
+    {
+        return this._propertyMissing;
+    }
+
+    resetEditorValues(value)
+    {
+        this._ignoreNextUpdate = false;
+        this.updateValuesFromText(value || "");
+    }
+
+    // Private
+
+    _markEditors(ignoredEditor, disabled)
+    {
+        this._currentValueIsKeyword = disabled || false;
+        for (let editor of this._propertyEditors) {
+            if (ignoredEditor && editor === ignoredEditor)
+                continue;
+
+            editor.disabled = this._currentValueIsKeyword;
+        }
+    }
+
+    _handlePropertyEditorValueChanged()
+    {
+        this._ignoreNextUpdate = true;
+        let value = this.synthesizedValue;
+        if (this._style)
+            this._style.text = this.modifyPropertyText(this._style.text, value);
+
+        this._propertyMissing = !value;
+        this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
+    }
+};
+
+WebInspector.VisualStylePropertyCombiner.EditorUpdatedSymbol = Symbol("visual-style-property-combiner-editor-updated");
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css
new file mode 100644
index 000000000..738d8d935
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.css
@@ -0,0 +1,136 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container {
+    display: flex;
+    width: 100%;
+    min-height: 22px;
+}
+
+.visual-style-property-container > .visual-style-property-title {
+    margin: 4px;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.visual-style-property-container.layout-reversed > .visual-style-property-title {
+    order: 2;
+    text-align: left;
+}
+
+.visual-style-property-container > .visual-style-property-title > .property-reference-info {
+    cursor: help;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-title > :not(.property-reference-info) {
+    opacity: 0.7;
+}
+
+.visual-style-property-container > .visual-style-property-editor-warning {
+    display: none;
+    position: relative;
+    order: 1;
+    top: 5px;
+    width: 10px;
+    height: 10px;
+    margin-right: 4px;
+}
+
+.visual-style-property-container.layout-reversed > .visual-style-property-editor-warning {
+    margin-right: 0;
+    margin-left: 4px;
+}
+
+.visual-style-property-container > .visual-style-property-editor-warning.missing-dependency {
+    display: block;
+    content: url(../Images/Warning.svg);
+}
+
+.visual-style-property-container > .visual-style-property-editor-warning.invalid-value {
+    display: block;
+    content: url(../Images/Error.svg);
+}
+
+.visual-style-property-container > .visual-style-property-value-container {
+    flex: 1;
+    order: 2;
+    position: relative;
+}
+
+.visual-style-property-container.layout-reversed > .visual-style-property-value-container {
+    order: 0;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-value-container {
+    pointer-events: none;
+    opacity: 0.4;
+}
+
+.visual-style-property-container > *:first-child:matches(.visual-style-property-value-container) {
+    margin-left: 11px;
+}
+
+.visual-style-property-container > .visual-style-property-value-container select {
+    width: 100%;
+    margin: 1px 0;
+}
+
+.visual-style-property-container > .visual-style-property-value-container input {
+    width: calc(100% - 1px);
+    margin: 0;
+    outline: none;
+}
+
+.visual-style-property-container.disabled > .visual-style-property-value-container input {
+    pointer-events: none !important;
+}
+
+.visual-style-property-container > .visual-style-property-value-container > .visual-style-special-property-placeholder {
+    position: absolute;
+    top: 2px;
+    left: 1px;
+    width: calc(100% - 20px);
+    line-height: 16px;
+    text-indent: 7px;
+    border-radius: 4px;
+    background-color: white;
+    color: hsl(0, 0%, 50%);
+    font-size: 11px;
+    pointer-events: none;
+    overflow: hidden;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.visual-style-property-info-popover {
+    width: 190px;
+    margin: 0 5px 3px;
+    padding: 0;
+}
+
+.visual-style-property-info-popover > h3 {
+    margin: 6px 3px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js
new file mode 100644
index 000000000..9f2234d75
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditor.js
@@ -0,0 +1,615 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStylePropertyEditor = class VisualStylePropertyEditor extends WebInspector.Object
+{
+    constructor(propertyNames, label, possibleValues, possibleUnits, className, layoutReversed)
+    {
+        super();
+
+        this._propertyInfoList = [];
+        this._style = null;
+
+        function canonicalizeValues(values)
+        {
+            if (!values)
+                return;
+
+            let canonicalizedValues = {};
+            for (let value of values)
+                canonicalizedValues[value.toLowerCase().replace(/\s/g, "-")] = value;
+
+            return canonicalizedValues;
+        }
+
+        this._possibleValues = null;
+        if (possibleValues) {
+            this._possibleValues = {};
+            if (Array.isArray(possibleValues))
+                this._possibleValues.basic = canonicalizeValues(possibleValues);
+            else {
+                this._possibleValues.basic = canonicalizeValues(possibleValues.basic);
+                this._possibleValues.advanced = canonicalizeValues(possibleValues.advanced);
+            } 
+        }
+        this._possibleUnits = null;
+        if (possibleUnits) {
+            this._possibleUnits = {};
+            if (Array.isArray(possibleUnits))
+                this._possibleUnits.basic = possibleUnits;
+            else
+                this._possibleUnits = possibleUnits;
+        }
+        this._dependencies = new Map;
+
+        this._element = document.createElement("div");
+        this._element.classList.add("visual-style-property-container", className);
+        this._element.classList.toggle("layout-reversed", !!layoutReversed);
+
+        if (label && label.length) {
+            let titleContainer = this._element.createChild("div", "visual-style-property-title");
+
+            this._titleElement = titleContainer.createChild("span");
+            this._titleElement.append(label);
+            this._titleElement.title = label;
+            this._titleElement.addEventListener("mouseover", this._titleElementMouseOver.bind(this));
+            this._titleElement.addEventListener("mouseout", this._titleElementMouseOut.bind(this));
+            this._titleElement.addEventListener("click", this._titleElementClick.bind(this));
+
+            this._boundTitleElementPrepareForClick = this._titleElementPrepareForClick.bind(this);
+        }
+
+        this._contentElement = this._element.createChild("div", "visual-style-property-value-container");
+
+        this._specialPropertyPlaceholderElement = this._contentElement.createChild("span", "visual-style-special-property-placeholder");
+        this._specialPropertyPlaceholderElement.hidden = true;
+
+        this._warningElement = this._element.createChild("div", "visual-style-property-editor-warning");
+
+        this._updatedValues = {};
+        this._lastValue = null;
+        this._propertyMissing = false;
+
+        if (typeof propertyNames === "string")
+            propertyNames = [propertyNames];
+        else {
+            this._hasMultipleProperties = true;
+            this._element.classList.add("multiple");
+        }
+
+        for (let name of propertyNames) {
+            this._element.classList.add(name);
+            this._propertyInfoList.push({
+                name,
+                textContainsNameRegExp: new RegExp("(?:(?:^|;)\\s*" + name + "\\s*:)"),
+                replacementRegExp: new RegExp("((?:^|;)\\s*)(" + name + ")(.+?(?:;|$))")
+            })
+        }
+
+        this._propertyReferenceName = propertyNames[0];
+        this._propertyReferenceText = WebInspector.VisualStyleDetailsPanel.propertyReferenceInfo[this._propertyReferenceName];
+        this._hasPropertyReference = this._propertyReferenceText && !!this._propertyReferenceText.trim().length;
+        this._representedProperty = null;
+    }
+
+    // Static
+
+    static generateFormattedTextForNewProperty(styleText, propertyName, propertyValue) {
+        if (!propertyName || !propertyValue)
+            return "";
+
+        styleText = styleText || "";
+
+        // FIXME: <rdar://problem/10593948> Provide a way to change the tab width in the Web Inspector
+        let linePrefixText = "    ";
+        let lineSuffixWhitespace = "\n";
+        let trimmedText = styleText.trimRight();
+        let textHasNewlines = trimmedText.includes("\n");
+
+        if (trimmedText.trimLeft().length) {
+            let styleTextPrefixWhitespace = trimmedText.match(/^\s*/);
+            if (styleTextPrefixWhitespace) {
+                let linePrefixWhitespaceMatch = styleTextPrefixWhitespace[0].match(/[^\S\n]+$/);
+                if (linePrefixWhitespaceMatch && textHasNewlines)
+                    linePrefixText = linePrefixWhitespaceMatch[0];
+                else {
+                    linePrefixText = "";
+                    lineSuffixWhitespace = styleTextPrefixWhitespace[0];
+                }
+            }
+
+            if (!trimmedText.endsWith(";"))
+                linePrefixText = ";" + linePrefixText;
+        } else
+            linePrefixText = "\n" + linePrefixText;
+
+        return linePrefixText + propertyName + ": " + propertyValue + ";" + lineSuffixWhitespace;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    get style()
+    {
+        return this._style;
+    }
+
+    get value()
+    {
+        // Implemented by subclass.
+    }
+
+    set value(value)
+    {
+        // Implemented by subclass.
+    }
+
+    get units()
+    {
+        // Implemented by subclass.
+    }
+
+    set units(unit)
+    {
+        // Implemented by subclass.
+    }
+
+    get placeholder()
+    {
+        // Implemented by subclass.
+    }
+
+    set placeholder(text)
+    {
+        // Implemented by subclass.
+    }
+
+    get synthesizedValue()
+    {
+        // Implemented by subclass.
+    }
+
+    set suppressStyleTextUpdate(flag)
+    {
+        this._suppressStyleTextUpdate = flag;
+    }
+
+    set masterProperty(flag)
+    {
+        this._masterProperty = flag;
+    }
+
+    get masterProperty()
+    {
+        return this._masterProperty;
+    }
+
+    set optionalProperty(flag)
+    {
+        this._optionalProperty = flag;
+    }
+
+    get optionalProperty()
+    {
+        return this._optionalProperty;
+    }
+
+    set colorProperty(flag)
+    {
+        this._colorProperty = flag;
+    }
+
+    get colorProperty()
+    {
+        return this._colorProperty;
+    }
+
+    get propertyReferenceName()
+    {
+        return this._propertyReferenceName;
+    }
+
+    set propertyReferenceName(name)
+    {
+        if (!name || !name.length)
+            return;
+
+        this._propertyReferenceName = name;
+    }
+
+    set disabled(flag)
+    {
+        this._disabled = flag;
+        this._element.classList.toggle("disabled", this._disabled);
+        this._toggleTabbingOfSelectableElements(this._disabled);
+    }
+
+    get disabled()
+    {
+        return this._disabled;
+    }
+
+    update(style)
+    {
+        if (style)
+            this._style = style;
+        else if (this._ignoreNextUpdate) {
+            this._ignoreNextUpdate = false;
+            return;
+        }
+
+        if (!this._style)
+            return;
+
+        this._updatedValues = {};
+        let propertyValuesConflict = false;
+        let propertyMissing = false;
+        for (let propertyInfo of this._propertyInfoList) {
+            let property = this._style.propertyForName(propertyInfo.name, true);
+            propertyMissing = !property;
+            if (propertyMissing && this._style.nodeStyles)
+                property = this._style.nodeStyles.computedStyle.propertyForName(propertyInfo.name);
+
+            let longhandPropertyValue = null;
+            if (typeof this._generateTextFromLonghandProperties === "function")
+                longhandPropertyValue = this._generateTextFromLonghandProperties();
+
+            if (longhandPropertyValue)
+                propertyMissing = false;
+
+            let propertyText = (property && property.value) || longhandPropertyValue;
+            if (!propertyText || !propertyText.length)
+                continue;
+
+            if (!propertyMissing && property && property.anonymous)
+                this._representedProperty = property;
+
+            if (!propertyMissing && property && !property.valid) {
+                this._warningElement.classList.add("invalid-value");
+                this._warningElement.title = WebInspector.UIString("The value “%s” is not supported for this property.").format(propertyText);
+                this.specialPropertyPlaceholderElementText = propertyText;
+                return;
+            }
+
+            let newValues = this.getValuesFromText(propertyText, propertyMissing);
+            if (this._updatedValues.placeholder && this._updatedValues.placeholder !== newValues.placeholder)
+                propertyValuesConflict = true;
+
+            if (!this._updatedValues.placeholder)
+                this._updatedValues = newValues;
+
+            if (propertyValuesConflict) {
+                this._updatedValues.conflictingValues = true;
+                this.specialPropertyPlaceholderElementText = WebInspector.UIString("(multiple)");
+                break;
+            }
+        }
+
+        if (this._hasMultipleProperties)
+            this._specialPropertyPlaceholderElement.hidden = !propertyValuesConflict;
+
+        this.updateEditorValues(this._updatedValues);
+    }
+
+    updateEditorValues(updatedValues)
+    {
+        this.value = updatedValues.value;
+        this.units = updatedValues.units;
+        this.placeholder = updatedValues.placeholder;
+
+        this._lastValue = this.synthesizedValue;
+        this.disabled = false;
+
+        this._warningElement.classList.remove("invalid-value");
+        this._checkDependencies();
+    }
+
+    resetEditorValues(value)
+    {
+        this._ignoreNextUpdate = false;
+        if (!value || !value.length) {
+            this.value = null;
+            this._specialPropertyPlaceholderElement.hidden = false;
+            return;
+        }
+
+        let updatedValues = this.getValuesFromText(value);
+        this.updateEditorValues(updatedValues);
+    }
+
+    modifyPropertyText(text, value)
+    {
+        for (let property of this._propertyInfoList) {
+            if (property.textContainsNameRegExp.test(text))
+                text = text.replace(property.replacementRegExp, value !== null ? "$1$2: " + value + ";" : "$1");
+            else if (value !== null)
+                text += WebInspector.VisualStylePropertyEditor.generateFormattedTextForNewProperty(text, property.name, value);
+        }
+        return text;
+    }
+
+    getValuesFromText(text, propertyMissing)
+    {
+        let match = this.parseValue(text);
+        let placeholder = match ? match[1] : text;
+        let units = match ? match[2] : null;
+        let value = placeholder;
+        if (propertyMissing)
+            value = this.valueIsSupportedKeyword(text) ? text : null;
+
+        this._propertyMissing = propertyMissing || false;
+        return {value, units, placeholder};
+    }
+
+    get propertyMissing()
+    {
+        return this._updatedValues && this._propertyMissing;
+    }
+
+    valueIsCompatible(value)
+    {
+        if (!value || !value.length)
+            return false;
+
+        return this.valueIsSupportedKeyword(value) || !!this.parseValue(value);
+    }
+
+    valueIsSupportedKeyword(value) {
+        if (!this._possibleValues)
+            return false;
+
+        if (Object.keys(this._possibleValues.basic).includes(value))
+            return true;
+
+        return this._valueIsSupportedAdvancedKeyword(value);
+    }
+
+    valueIsSupportedUnit(unit)
+    {
+        if (!this._possibleUnits)
+            return false;
+
+        if (this._possibleUnits.basic.includes(unit))
+            return true;
+
+        return this._valueIsSupportedAdvancedUnit(unit);
+    }
+
+    addDependency(propertyNames, propertyValues)
+    {
+        if (!propertyNames || !propertyNames.length || !propertyValues || !propertyValues.length)
+            return;
+
+        if (!Array.isArray(propertyNames))
+            propertyNames = [propertyNames];
+
+        for (let property of propertyNames)
+            this._dependencies.set(property, propertyValues);
+    }
+
+    // Protected
+
+    get contentElement()
+    {
+        return this._contentElement;
+    }
+
+    get specialPropertyPlaceholderElement()
+    {
+        return this._specialPropertyPlaceholderElement;
+    }
+
+    set specialPropertyPlaceholderElementText(text)
+    {
+        if (!text || !text.length)
+            return;
+
+        this._specialPropertyPlaceholderElement.hidden = false;
+        this._specialPropertyPlaceholderElement.textContent = text;
+    }
+
+    parseValue(text)
+    {
+        return /^([^;]+)\s*;?$/.exec(text);
+    }
+
+    // Private
+
+    _valueIsSupportedAdvancedKeyword(value)
+    {
+        return this._possibleValues.advanced && Object.keys(this._possibleValues.advanced).includes(value);
+    }
+
+    _valueIsSupportedAdvancedUnit(unit)
+    {
+        return this._possibleUnits.advanced && this._possibleUnits.advanced.includes(unit);
+    }
+
+    _canonicalizedKeywordForKey(value)
+    {
+        if (!value || !this._possibleValues)
+            return null;
+
+        return this._possibleValues.basic[value] || (this._possibleValues.advanced && this._possibleValues.advanced[value]) || null;
+    }
+
+    _keyForKeyword(keyword)
+    {
+        if (!keyword || !keyword.length || !this._possibleValues)
+            return null;
+
+        for (let basicKey in this._possibleValues.basic) {
+            if (this._possibleValues.basic[basicKey] === keyword)
+                return basicKey;
+        }
+
+        if (!this._possibleValues.advanced)
+            return null;
+
+        for (let advancedKey in this._possibleValues.advanced) {
+            if (this._possibleValues.advanced[advancedKey] === keyword)
+                return advancedKey;
+        }
+
+        return null;
+    }
+
+    _valueDidChange()
+    {
+        let value = this.synthesizedValue;
+        if (value === this._lastValue)
+            return false;
+
+        if (this._style && !this._suppressStyleTextUpdate) {
+            let newText = this._style.text;
+            newText = this._replaceShorthandPropertyWithLonghandProperties(newText);
+            newText = this.modifyPropertyText(newText, value);
+            this._style.text = newText;
+            if (!newText.length)
+                this._style.update(null, null, this._style.styleSheetTextRange);
+        }
+
+        this._lastValue = value;
+        this._propertyMissing = !value;
+        this._ignoreNextUpdate = true;
+        this._specialPropertyPlaceholderElement.hidden = true;
+
+        this._checkDependencies();
+        this._warningElement.classList.remove("invalid-value");
+
+        this.dispatchEventToListeners(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange);
+        return true;
+    }
+
+    _replaceShorthandPropertyWithLonghandProperties(text)
+    {
+        if (!this._representedProperty)
+            return text;
+
+        let shorthand = this._representedProperty.relatedShorthandProperty;
+        if (!shorthand)
+            return text;
+
+        let longhandText = "";
+        for (let longhandProperty of shorthand.relatedLonghandProperties) {
+            if (longhandProperty.anonymous)
+                longhandText += longhandProperty.synthesizedText;
+        }
+        return longhandText ? text.replace(shorthand.text, longhandText) : text;
+    }
+
+    _hasMultipleConflictingValues()
+    {
+        return this._hasMultipleProperties && !this._specialPropertyPlaceholderElement.hidden;
+    }
+
+    _checkDependencies()
+    {
+        if (!this._dependencies.size || !this._style || !this.synthesizedValue) {
+            this._warningElement.classList.remove("missing-dependency");
+            return;
+        }
+
+        let title = "";
+
+        // FIXME: <https://webkit.org/b/152497> Arrow functions: "this" isn't lexically bound
+        let dependencies = this._style.nodeStyles.computedStyle.properties.filter(function(property) {
+            return this._dependencies.has(property.name) || this._dependencies.has(property.canonicalName);
+        }.bind(this));
+
+        for (let property of dependencies) {
+            let dependencyValues = this._dependencies.get(property.name);
+            if (!dependencyValues.includes(property.value))
+                title += "\n " + property.name + ": " + dependencyValues.join("/");
+        }
+
+        this._warningElement.classList.toggle("missing-dependency", !!title.length);
+        this._warningElement.title = !!title.length ? WebInspector.UIString("Missing Dependencies:%s").format(title) : null;
+    }
+
+    _titleElementPrepareForClick(event)
+    {
+        this._titleElement.classList.toggle("property-reference-info", event.type === "keydown" && event.altKey);
+    }
+
+    _titleElementMouseOver(event)
+    {
+        if (!this._hasPropertyReference)
+            return;
+
+        this._titleElement.classList.toggle("property-reference-info", event.altKey);
+        document.addEventListener("keydown", this._boundTitleElementPrepareForClick);
+        document.addEventListener("keyup", this._boundTitleElementPrepareForClick);
+    }
+
+    _titleElementMouseOut()
+    {
+        if (!this._hasPropertyReference)
+            return;
+
+        this._titleElement.classList.remove("property-reference-info");
+        document.removeEventListener("keydown", this._boundTitleElementPrepareForClick);
+        document.removeEventListener("keyup", this._boundTitleElementPrepareForClick);
+    }
+
+    _titleElementClick(event)
+    {
+        if (event.altKey)
+            this._showPropertyInfoPopover();
+    }
+
+    _showPropertyInfoPopover()
+    {
+        if (!this._hasPropertyReference)
+            return;
+
+        let propertyInfoElement = document.createElement("p");
+        propertyInfoElement.classList.add("visual-style-property-info-popover");
+
+        let propertyInfoTitleElement = document.createElement("h3");
+        propertyInfoTitleElement.appendChild(document.createTextNode(this._propertyReferenceName));
+        propertyInfoElement.appendChild(propertyInfoTitleElement);
+
+        propertyInfoElement.appendChild(document.createTextNode(this._propertyReferenceText));
+
+        let bounds = WebInspector.Rect.rectFromClientRect(this._titleElement.getBoundingClientRect());
+        let popover = new WebInspector.Popover(this);
+        popover.content = propertyInfoElement;
+        popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_Y]);
+    }
+
+    _toggleTabbingOfSelectableElements(disabled)
+    {
+        // Implemented by subclass.
+    }
+};
+
+WebInspector.VisualStylePropertyEditor.Event = {
+    ValueDidChange: "visual-style-property-editor-value-changed"
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css
new file mode 100644
index 000000000..e16a31ced
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css
@@ -0,0 +1,135 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-editor-link {
+    display: flex;
+    align-items: center;
+    position: relative;
+    min-width: 32px;
+    margin-left: 1px;
+}
+
+.visual-style-property-editor-link.disabled {
+    visibility: hidden;
+}
+
+.visual-style-property-editor-link.link-all {
+    height: 13px;
+    margin: 0 auto 2px;
+    padding: 0 50px;
+    border-top-width: 0;
+    border-right-width: 1px;
+    border-bottom-width: 0;
+    border-left-width: 1px;
+    border-color: hsl(0, 0%, 50%);
+    border-style: dashed;
+}
+
+.visual-style-property-editor-link.link-all.linked {
+    border-color: black;
+    border-style: solid;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border {
+    position: absolute;
+    top: -webkit-calc(50% - 0.5px);
+    width: 48px;
+    border-top: 1px dashed hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border {
+    border-top: 1px solid black;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border.left {
+    left: 0;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-border.right {
+    right: 1px;
+}
+
+.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left {
+    left: 1px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border {
+    width: 51px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
+    left: 0;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right {
+    right: 0;
+}
+
+.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-border {
+    width: 10px;
+    top: 50%;
+}
+
+.visual-style-property-editor-link:not(.link-all).linked > .visual-style-property-editor-link-border {
+    width: 12px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > :matches(.linked-icon, .unlinked-icon) {
+    width: 9px;
+    height: 12px;
+}
+
+.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon {
+    position: relative;
+    background-color: white;
+    z-index: 1;
+}
+
+.visual-style-property-editor-link:not(.linked) > .visual-style-property-editor-link-icon > :matches(.linked-icon, .unlinked-icon) {
+    color: hsl(0, 0%, 50%);
+}
+
+.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon {
+    margin-left: 11px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left,
+    .visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right  {
+        width: 49px;
+    }
+
+    .visual-style-property-editor-link > .visual-style-property-editor-link-border.left {
+        left: 1px;
+    }
+
+    .visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
+        width: 52px;
+    }
+
+    .visual-style-property-editor-link > .visual-style-property-editor-link-icon > :matches(.linked-icon, .unlinked-icon) {
+        width: 10px;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js
new file mode 100644
index 000000000..6bd897e4f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStylePropertyEditorLink = class VisualStylePropertyEditorLink extends WebInspector.Object
+{
+    constructor(linkedProperties, className, linksToHideWhenLinked)
+    {
+        super();
+
+        this._linkedProperties = linkedProperties || [];
+        this._linksToHideWhenLinked = linksToHideWhenLinked || [];
+        this._lastPropertyEdited = null;
+
+        for (let property of this._linkedProperties)
+            property.addEventListener(WebInspector.VisualStylePropertyEditor.Event.ValueDidChange, this._linkedPropertyValueChanged, this);
+
+        this._element = document.createElement("div");
+        this._element.classList.add("visual-style-property-editor-link", className || "");
+
+        let leftLineElement = document.createElement("div");
+        leftLineElement.classList.add("visual-style-property-editor-link-border", "left");
+        this._element.appendChild(leftLineElement);
+
+        this._iconElement = document.createElement("div");
+        this._iconElement.classList.add("visual-style-property-editor-link-icon");
+        this._iconElement.title = WebInspector.UIString("Click to link property values");
+        this._iconElement.addEventListener("mouseover", this._iconMouseover.bind(this));
+        this._iconElement.addEventListener("mouseout", this._iconMouseout.bind(this));
+        this._iconElement.addEventListener("click", this._iconClicked.bind(this));
+
+        this._unlinkedIcon = useSVGSymbol("Images/VisualStylePropertyUnlinked.svg", "unlinked-icon");
+        this._iconElement.appendChild(this._unlinkedIcon);
+
+        this._linkedIcon = useSVGSymbol("Images/VisualStylePropertyLinked.svg", "linked-icon");
+        this._linkedIcon.hidden = true;
+        this._iconElement.appendChild(this._linkedIcon);
+
+        this._element.appendChild(this._iconElement);
+
+        let rightLineElement = document.createElement("div");
+        rightLineElement.classList.add("visual-style-property-editor-link-border", "right");
+        this._element.appendChild(rightLineElement);
+
+        this._linked = false;
+        this._disabled = false;
+    }
+
+    // Public
+
+    get element()
+    {
+        return this._element;
+    }
+
+    set linked(flag)
+    {
+        this._linked = flag;
+        this._element.classList.toggle("linked", this._linked);
+
+        if (this._linkedIcon)
+            this._linkedIcon.hidden = !this._linked;
+
+        if (this._unlinkedIcon)
+            this._unlinkedIcon.hidden = this._linked;
+
+        this._iconElement.title = this._linked ? WebInspector.UIString("Click to remove link") : WebInspector.UIString("Click to link property values");
+
+        for (let linkToHide of this._linksToHideWhenLinked)
+            linkToHide.disabled = this._linked;
+    }
+
+    set disabled(flag)
+    {
+        this._disabled = flag;
+        this._element.classList.toggle("disabled", this._disabled);
+    }
+
+    // Private
+
+    _linkedPropertyValueChanged(event)
+    {
+        if (!event)
+            return;
+
+        let property = event.target;
+        if (!property)
+            return;
+
+        this._lastPropertyEdited = property;
+        if (!this._linked)
+            return;
+
+        this._updateLinkedEditors(property);
+    }
+
+    _updateLinkedEditors(property)
+    {
+        let style = property.style;
+        let text = style.text;
+        let value = property.synthesizedValue || null;
+
+        for (let linkedProperty of this._linkedProperties)
+            text = linkedProperty.updateValueFromText(text, value);
+
+        style.text = text;
+    }
+
+    _iconMouseover()
+    {
+        this._linkedIcon.hidden = this._linked;
+        this._unlinkedIcon.hidden = !this._linked;
+    }
+
+    _iconMouseout()
+    {
+        this._linkedIcon.hidden = !this._linked;
+        this._unlinkedIcon.hidden = this._linked;
+    }
+
+    _iconClicked()
+    {
+        this.linked = !this._linked;
+        this._updateLinkedEditors(this._lastPropertyEdited || this._linkedProperties[0]);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js
new file mode 100644
index 000000000..00e53a965
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyNameInput.js
@@ -0,0 +1,141 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStylePropertyNameInput = class VisualStylePropertyNameInput extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, layoutReversed)
+    {
+        super(propertyNames, text, null, null, "property-name-input", layoutReversed);
+
+        this._propertyNameInputElement = document.createElement("input");
+        this._propertyNameInputElement.placeholder = WebInspector.UIString("Enter a name.");
+        this._propertyNameInputElement.addEventListener("keydown", this._inputKeyDown.bind(this));
+        this._propertyNameInputElement.addEventListener("keyup", this._inputKeyUp.bind(this));
+        this._propertyNameInputElement.addEventListener("blur", this._hideCompletions.bind(this));
+        this.contentElement.appendChild(this._propertyNameInputElement);
+
+        this._completionController = new WebInspector.VisualStyleCompletionsController(this);
+        this._completionController.addEventListener(WebInspector.VisualStyleCompletionsController.Event.CompletionSelected, this._completionClicked, this);
+    }
+
+    // Public
+
+    get value()
+    {
+        return this._propertyNameInputElement.value;
+    }
+
+    set value(value)
+    {
+        if (value && value === this.value)
+            return;
+
+        this._propertyNameInputElement.value = value;
+    }
+
+    get synthesizedValue()
+    {
+        return this.value || null;
+    }
+
+    get hasCompletions()
+    {
+        return this._completionController.hasCompletions;
+    }
+
+    set completions(completions)
+    {
+        this._completionController.completions = completions;
+    }
+
+    // Private
+
+    _completionClicked(event)
+    {
+        this.value = event.data.text;
+        this._valueDidChange();
+    }
+
+    _inputKeyDown(event)
+    {
+        if (!this._completionController.visible)
+            return;
+
+        let keyCode = event.keyCode;
+        let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
+        let tabKeyCode = WebInspector.KeyboardShortcut.Key.Tab.keyCode;
+        if (keyCode === enterKeyCode || keyCode === tabKeyCode) {
+            this.value = this._completionController.currentCompletion;
+            this._hideCompletions();
+            this._valueDidChange();
+            return;
+        }
+
+        let escapeKeyCode = WebInspector.KeyboardShortcut.Key.Escape.keyCode;
+        if (keyCode === escapeKeyCode) {
+            this._hideCompletions();
+            return;
+        }
+
+        let key = event.keyIdentifier;
+        if (key === "Up") {
+            this._completionController.previous();
+            return;
+        }
+
+        if (key === "Down") {
+            this._completionController.next();
+            return;
+        }
+    }
+
+    _inputKeyUp()
+    {
+        if (!this.hasCompletions)
+            return;
+
+        let result = this._valueDidChange();
+        if (!result)
+            return;
+
+        if (this._completionController.update(this.value)) {
+            let bounds = WebInspector.Rect.rectFromClientRect(this._propertyNameInputElement.getBoundingClientRect());
+            if (!bounds)
+                return;
+
+            this._completionController.show(bounds, 2);
+        }
+    }
+
+    _hideCompletions()
+    {
+        this._completionController.hide();
+    }
+
+    _toggleTabbingOfSelectableElements(disabled)
+    {
+        this._propertyNameInputElement.tabIndex = disabled ? "-1" : null;
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css
new file mode 100644
index 000000000..cc172708a
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-title {
+    margin-right: 3px;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container {
+    order: 2;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container:not(.number-input-editable) + .relative-slider,
+.visual-style-property-container.number-input-box.relative-number-slider.disabled > .relative-slider {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .visual-style-property-value-container.no-values.no-units {
+    display: none;
+}
+
+.visual-style-property-container.number-input-box.relative-number-slider > .relative-slider {
+    width: 47%;
+    margin-right: 7px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js
new file mode 100644
index 000000000..f155825f5
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleRelativeNumberSlider.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleRelativeNumberSlider = class VisualStyleRelativeNumberSlider extends WebInspector.VisualStyleNumberInputBox
+{
+    constructor(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed)
+    {
+        super(propertyNames, text, possibleValues, possibleUnits, allowNegativeValues, layoutReversed);
+
+        this._element.classList.add("relative-number-slider");
+
+        this._sliderElement = document.createElement("input");
+        this._sliderElement.classList.add("relative-slider");
+        this._sliderElement.type = "range";
+        this._sliderElement.addEventListener("input", this._sliderChanged.bind(this));
+        this._element.appendChild(this._sliderElement);
+
+        this._startingValue = 0;
+        this._scale = 200;
+    }
+
+    // Public
+
+    set scale(scale)
+    {
+        this._scale = scale || 1;
+    }
+
+    updateEditorValues(updatedValues)
+    {
+        super.updateEditorValues(updatedValues);
+        this._resetSlider();
+    }
+
+    // Private
+
+    _resetSlider()
+    {
+        this._startingValue = parseFloat(this._valueNumberInputElement.value);
+        if (isNaN(this._startingValue))
+            this._startingValue = parseFloat(this.placeholder) || 0;
+
+        let midpoint = this._scale / 2;
+        if (this._allowNegativeValues || this._startingValue > midpoint) {
+            this._sliderElement.min = -midpoint;
+            this._sliderElement.max = midpoint;
+            this._sliderElement.value = 0;
+        } else {
+            this._sliderElement.min = 0;
+            this._sliderElement.max = this._scale;
+            this._sliderElement.value = this._startingValue;
+            this._startingValue = 0;
+        }
+    }
+
+    _sliderChanged()
+    {
+        this.value = this._startingValue + Math.round(parseFloat(this._sliderElement.value) * 100) / 100;
+        this._valueDidChange();
+    }
+
+    _numberInputChanged()
+    {
+        super._numberInputChanged();
+        this._resetSlider();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css
new file mode 100644
index 000000000..f2665c29f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.css
@@ -0,0 +1,129 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.details-section.visual-style-selector-section > .header {
+    display: flex;
+    height: 22px;
+}
+
+.details-section.visual-style-selector-section:not(.collapsed) > .header {
+    border-bottom: 1px solid var(--border-color);
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .details-section.visual-style-selector-section:not(.collapsed) > .header {
+        border-width: 0.5px !important;
+    }
+}
+
+.details-section.visual-style-selector-section > .header > .current-selector {
+    width: calc(100% - 95px);
+    margin-left: 10px;
+    font-weight: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.visual-style-selector-section.details-section:not(.collapsed) > .header > .current-selector {
+    display: none;
+}
+
+.details-section.visual-style-selector-section > .header > .current-selector > .icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 3px;
+}
+
+.details-section.visual-style-selector-section > .header > .current-selector > span {
+    margin-left: 21px;
+}
+
+.details-section.visual-style-selector-section > .header > .controls {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-left: 1px solid hsl(0, 0%, 83%);
+}
+
+.details-section.visual-style-selector-section.collapsed > .header > .controls {
+    display: none;
+}
+
+.details-section.visual-style-selector-section > .header > .controls > .visual-style-selector-section-add-rule {
+    width: 23px;
+    height: 21px;
+    padding: 4px 5px;
+    opacity: 0.7;
+}
+
+.details-section.visual-style-selector-section:not(.collapsed) > .content {
+    display: block;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors {
+    max-height: 110px;
+    overflow: auto;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list {
+    margin: 0;
+    padding-left: 0;
+    outline: none;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .visual-style-selector-item:nth-child(odd) {
+    background-color: hsl(0, 100%, 100%);
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider {
+    position: -webkit-sticky;
+    top: -1px;
+    height: 19px;
+    background-color: hsl(0, 0%, 95%);
+    border-color: var(--border-color);
+    border-style: solid;
+    border-width: 1px 0;
+    z-index: var(--z-index-header);
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > :matches(.disclosure-button, .icon) {
+    display: none;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider > .titles {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(even) {
+    background-color: hsl(0, 100%, 100%);
+}
+
+.details-section.visual-style-selector-section > .content > .selectors > .selector-list > .section-divider ~ .visual-style-selector-item:nth-child(odd) {
+    background-color: transparent;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js
new file mode 100644
index 000000000..1cef1eadb
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js
@@ -0,0 +1,330 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleSelectorSection = class VisualStyleSelectorSection extends WebInspector.DetailsSection
+{
+    constructor(delegate)
+    {
+        let selectorSection = {element: document.createElement("div")};
+        selectorSection.element.classList.add("selectors");
+
+        let controlElement = document.createElement("div");
+        controlElement.classList.add("controls");
+
+        super("visual-style-selector-section", WebInspector.UIString("Style Rules"), [selectorSection], controlElement);
+
+        this._delegate = delegate || null;
+        this._nodeStyles = null;
+
+        this._currentSelectorElement = document.createElement("div");
+        this._currentSelectorElement.classList.add("current-selector");
+
+        let currentSelectorIconElement = document.createElement("img");
+        currentSelectorIconElement.classList.add("icon");
+        this._currentSelectorElement.appendChild(currentSelectorIconElement);
+
+        this._currentSelectorText = document.createElement("span");
+        this._currentSelectorElement.appendChild(this._currentSelectorText);
+
+        this._headerElement.appendChild(this._currentSelectorElement);
+
+        let selectorListElement = document.createElement("ol");
+        selectorListElement.classList.add("selector-list");
+        selectorSection.element.appendChild(selectorListElement);
+
+        this._selectors = new WebInspector.TreeOutline(selectorListElement);
+        this._selectors.disclosureButtons = false;
+        this._selectors.addEventListener(WebInspector.TreeOutline.Event.SelectionDidChange, this._selectorChanged, this);
+
+        this._newInspectorRuleSelector = null;
+
+        let addGlyphElement = useSVGSymbol("Images/Plus13.svg", "visual-style-selector-section-add-rule", WebInspector.UIString("Click to add a new rule."));
+        addGlyphElement.addEventListener("click", this._addNewRule.bind(this));
+        controlElement.appendChild(addGlyphElement);
+
+        this._headerElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
+        this._headerElement.addEventListener("mouseout", this._handleMouseOut.bind(this));
+    }
+
+    // Public
+
+    update(nodeStyles)
+    {
+        let style = this.currentStyle();
+        if (style)
+            this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = style;
+
+        if (nodeStyles)
+            this._nodeStyles = nodeStyles;
+
+        if (!this._nodeStyles)
+            return;
+
+        this._selectors.removeChildren();
+        let previousRule = null;
+
+        // Pseudo Styles
+        let pseudoRules = [];
+        let pseudoElements = this._nodeStyles.pseudoElements;
+        for (let pseudoIdentifier in pseudoElements)
+            pseudoRules = pseudoRules.concat(pseudoElements[pseudoIdentifier].matchedRules);
+
+        let orderedPseudoRules = uniqueOrderedRules(pseudoRules);
+        // Reverse the array to ensure that splicing the array will not mess with the order.
+        if (orderedPseudoRules.length)
+            orderedPseudoRules.reverse();
+
+        function createSelectorItem(style, title, subtitle) {
+            let selector = new WebInspector.VisualStyleSelectorTreeItem(this, style, title, subtitle);
+            selector.addEventListener(WebInspector.VisualStyleSelectorTreeItem.Event.CheckboxChanged, this._treeElementCheckboxToggled, this);
+            this._selectors.appendChild(selector);
+
+            if (style.isInspectorRule() && this._newInspectorRuleSelector === style.selectorText && !style.hasProperties()) {
+                selector.select(true);
+                selector.element.scrollIntoView();
+                this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = style;
+                this._newInspectorRuleSelector = null;
+                return;
+            }
+
+            if (this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] === style) {
+                selector.select(true);
+                selector.element.scrollIntoView();
+            }
+        }
+
+        function uniqueOrderedRules(orderedRules)
+        {
+            if (!orderedRules || !orderedRules.length)
+                return new Array;
+
+            let uniqueRules = new Map;
+            for (let rule of orderedRules) {
+                if (!uniqueRules.has(rule.id))
+                    uniqueRules.set(rule.id, rule);
+            }
+            return Array.from(uniqueRules.values());
+        }
+
+        function insertAllMatchingPseudoRules(force)
+        {
+            if (!orderedPseudoRules.length)
+                return;
+
+            if (force) {
+                for (let i = orderedPseudoRules.length - 1; i >= 0; --i) {
+                    let pseudoRule = orderedPseudoRules[i];
+                    createSelectorItem.call(this, pseudoRule.style, pseudoRule.selectorText, pseudoRule.mediaText);
+                }
+                orderedPseudoRules = [];
+            }
+
+            if (!previousRule)
+                return;
+
+            for (let i = orderedPseudoRules.length - 1; i >= 0; --i) {
+                let pseudoRule = orderedPseudoRules[i];
+                if (!pseudoRule.selectorIsGreater(previousRule.mostSpecificSelector))
+                    continue;
+
+                createSelectorItem.call(this, pseudoRule.style, pseudoRule.selectorText, pseudoRule.mediaText);
+                previousRule = pseudoRule;
+                orderedPseudoRules.splice(i, 1);
+            }
+        }
+
+        if (this._nodeStyles.inlineStyle) {
+            if (!this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol])
+                this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = this._nodeStyles.inlineStyle;
+
+            // Inline Style
+            createSelectorItem.call(this, this._nodeStyles.inlineStyle, WebInspector.UIString("This Element"));
+        } else if (!this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol])
+            this._nodeStyles[WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol] = this._nodeStyles.matchedRules[0].style;
+
+        // Matched Rules
+        for (let rule of uniqueOrderedRules(this._nodeStyles.matchedRules)) {
+            if (rule.type === WebInspector.CSSStyleSheet.Type.UserAgent) {
+                insertAllMatchingPseudoRules.call(this, true);
+                continue;
+            }
+
+            insertAllMatchingPseudoRules.call(this);
+            createSelectorItem.call(this, rule.style, rule.selectorText, rule.mediaText);
+            previousRule = rule;
+        }
+
+        // Just in case there are any remaining pseudo-styles.
+        insertAllMatchingPseudoRules.call(this, true);
+
+        // Inherited Rules
+        for (let inherited of this._nodeStyles.inheritedRules) {
+            if (!inherited.matchedRules || !inherited.matchedRules.length)
+                continue;
+
+            let divider = null;
+
+            for (let rule of uniqueOrderedRules(inherited.matchedRules)) {
+                if (rule.type === WebInspector.CSSStyleSheet.Type.UserAgent)
+                    continue;
+
+                if (!divider) {
+                    let dividerText = WebInspector.UIString("Inherited from %s").format(WebInspector.displayNameForNode(inherited.node));
+                    divider = new WebInspector.GeneralTreeElement("section-divider", dividerText);
+                    divider.selectable = false;
+                    this._selectors.appendChild(divider);
+                }
+
+                createSelectorItem.call(this, rule.style, rule.selectorText, rule.mediaText);
+            }
+        }
+
+        this._newInspectorRuleSelector = null;
+    }
+
+    currentStyle()
+    {
+        if (!this._nodeStyles || !this._selectors.selectedTreeElement)
+            return;
+
+        return this._selectors.selectedTreeElement.representedObject;
+    }
+
+    treeItemForStyle(style)
+    {
+        for (let item of this._selectors.children) {
+            if (item.representedObject === style)
+                return item;
+        }
+        return null;
+    }
+
+    selectEmptyStyleTreeItem(style)
+    {
+        if (style.hasProperties())
+            return false;
+
+        let treeItem = this.treeItemForStyle(style);
+        if (!treeItem)
+            return false;
+
+        treeItem.select(true, true);
+        return true;
+    }
+
+    // Private
+
+    _selectorChanged(event)
+    {
+        let selectedTreeElement = event.data.selectedElement;
+        if (!selectedTreeElement)
+            return;
+
+        // The class needs to be completely reset as the previously selected treeElement most likely had
+        // a different icon className and it is simpler to regenerate the class than to find out which
+        // class was previously applied.
+        this._currentSelectorElement.className = "current-selector " + selectedTreeElement.iconClassName;
+
+        let selectorText = selectedTreeElement.mainTitle;
+        let mediaText = selectedTreeElement.subtitle;
+        if (mediaText && mediaText.length)
+            selectorText += " \u2014 " + mediaText; // em-dash
+
+        this._currentSelectorText.textContent = selectorText;
+
+        this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged);
+    }
+
+    _addNewRule(event)
+    {
+        if (!this._nodeStyles || this._nodeStyles.node.isInShadowTree())
+            return;
+
+        let selector = this.currentStyle().selectorText;
+        let existingRules = this._nodeStyles.rulesForSelector(selector);
+        for (let rule of existingRules) {
+            if (this.selectEmptyStyleTreeItem(rule.style))
+                return;
+        }
+
+        this._newInspectorRuleSelector = selector;
+        this._nodeStyles.addRule(selector);
+    }
+
+    _treeElementCheckboxToggled(event)
+    {
+        let style = this.currentStyle();
+        if (!style)
+            return;
+
+        let styleText = style.text;
+        if (!styleText || !styleText.length)
+            return;
+
+        // Comment or uncomment the style text.
+        let newStyleText = "";
+        let styleEnabled = event && event.data && event.data.enabled;
+        if (styleEnabled)
+            newStyleText = styleText.replace(/\s*(\/\*|\*\/)\s*/g, "");
+        else
+            newStyleText = "/* " + styleText.replace(/(\s*;(?!$)\s*)/g, "$1 *//* ") + " */";
+
+        style.text = newStyleText;
+        style[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol] = !styleEnabled;
+        this.dispatchEventToListeners(WebInspector.VisualStyleSelectorSection.Event.SelectorChanged);
+
+    }
+
+    _handleMouseOver()
+    {
+        if (!this.collapsed)
+            return;
+
+        let style = this.currentStyle();
+        if (!style)
+            return;
+
+        if (!style.ownerRule) {
+            WebInspector.domTreeManager.highlightDOMNode(style.node.id);
+            return;
+        }
+
+        WebInspector.domTreeManager.highlightSelector(style.ownerRule.selectorText, style.node.ownerDocument.frameIdentifier);
+    }
+
+    _handleMouseOut()
+    {
+        if (!this.collapsed)
+            return;
+
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    }
+};
+
+WebInspector.VisualStyleSelectorSection.LastSelectedRuleSymbol = Symbol("visual-style-selector-section-last-selected-rule");
+
+WebInspector.VisualStyleSelectorSection.Event = {
+    SelectorChanged: "visual-style-selector-section-selector-changed"
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css
new file mode 100644
index 000000000..512fbec9d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css
@@ -0,0 +1,139 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.item.visual-style-selector-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 25px;
+    padding: 2px 0;
+    line-height: 20px;
+    font-size: 11px;
+}
+
+.item.visual-style-selector-item.selected {
+    background-color: hsl(213, 92%, 55%) !important;
+    color: white;
+}
+
+.item.visual-style-selector-item > .disclosure-button {
+    display: none;
+}
+
+.item.visual-style-selector-item > input[type="checkbox"] {
+    position: relative;
+    margin-left: 5px;
+}
+
+body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-item.selected > input[type="checkbox"]:checked::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid white;
+    border-radius: 3px;
+    content: "";
+}
+
+.item.visual-style-selector-item > .icon {
+    width: 16px;
+    height: 16px;
+    margin: 0 3px 0 4px;
+}
+
+.item.visual-style-selector-item.modified > .icon {
+    filter: brightness(0.75);
+}
+
+.item.visual-style-selector-item.selector-invalid > .icon {
+    height: 14px;
+    content: url(../Images/Error.svg);
+}
+
+.item.visual-style-selector-item.selector-invalid > .icon:hover {
+    filter: brightness(0.9);
+}
+
+.item.visual-style-selector-item.selector-invalid > .icon:active {
+    filter: brightness(0.8);
+}
+
+.item.visual-style-selector-item.selector-invalid > .titles > .title {
+    position: relative;
+}
+
+.item.visual-style-selector-item.selector-invalid > .titles > .title::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    border-bottom: 1px solid hsla(0, 100%, 50%, 0.6);
+    content: "";
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .item.visual-style-selector-item.selector-invalid > .titles > .title::before {
+        top: -0.5px;
+    }
+}
+
+.item.visual-style-selector-item > .titles {
+    flex: 1;
+    top: 0;
+    line-height: inherit;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.item.visual-style-selector-item:not(.dom-element-icon) > .titles > .title {
+    padding: 0 1px 2px;
+    line-height: 12px;
+    outline: none;
+}
+
+.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title {
+    cursor: text;
+    -webkit-user-select: text;
+    -webkit-user-modify: read-write-plaintext-only;
+}
+
+.item.visual-style-selector-item:not(.dom-element-icon).editable > .titles > .title:focus {
+    color: black;
+    background-color: white;
+    border-radius: 2px;
+    box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(0, 100%, 100%, 0.3);
+}
+
+.item.visual-style-selector-item > .titles > .subtitle {
+    vertical-align: 1px;
+    font-size: 9px;
+}
+
+.item.visual-style-selector-item.selected > .titles > .subtitle {
+    color: inherit;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js
new file mode 100644
index 000000000..d8b6b8d16
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.js
@@ -0,0 +1,289 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleSelectorTreeItem = class VisualStyleSelectorTreeItem extends WebInspector.GeneralTreeElement
+{
+    constructor(delegate, style, title, subtitle)
+    {
+        let iconClassName;
+        switch (style.type) {
+        case WebInspector.CSSStyleDeclaration.Type.Rule:
+            console.assert(style.ownerRule instanceof WebInspector.CSSRule, style.ownerRule);
+
+            if (style.inherited)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Author)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.User)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName;
+            else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Inspector)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName;
+            break;
+
+        case WebInspector.CSSStyleDeclaration.Type.Inline:
+        case WebInspector.CSSStyleDeclaration.Type.Attribute:
+            if (style.inherited)
+                iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName;
+            else
+                iconClassName = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
+            break;
+        }
+
+        title = title.trim();
+
+        super(["visual-style-selector-item", iconClassName], title, subtitle, style);
+
+        this._delegate = delegate;
+
+        this._iconClassName = iconClassName;
+        this._lastValue = title;
+        this._enableEditing = true;
+        this._hasInvalidSelector = false;
+    }
+
+    // Public
+
+    get iconClassName()
+    {
+        return this._iconClassName;
+    }
+
+    get selectorText()
+    {
+        let titleText = this._mainTitleElement.textContent;
+        if (!titleText || !titleText.length)
+            titleText = this._mainTitle;
+
+        return titleText.trim();
+    }
+
+    // Protected
+
+    onattach()
+    {
+        super.onattach();
+
+        this._listItemNode.addEventListener("mouseover", this._highlightNodesWithSelector.bind(this));
+        this._listItemNode.addEventListener("mouseout", this._hideDOMNodeHighlight.bind(this));
+        this._listItemNode.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+
+        this._checkboxElement = document.createElement("input");
+        this._checkboxElement.type = "checkbox";
+        this._checkboxElement.checked = !this.representedObject[WebInspector.VisualStyleDetailsPanel.StyleDisabledSymbol];
+        this._updateCheckboxTitle();
+        this._checkboxElement.addEventListener("change", this._handleCheckboxChanged.bind(this));
+        this._listItemNode.insertBefore(this._checkboxElement, this._iconElement);
+
+        this._iconElement.addEventListener("click", this._handleIconElementClicked.bind(this));
+
+        this._mainTitleElement.spellcheck = false;
+        this._mainTitleElement.addEventListener("mousedown", this._handleMainTitleMouseDown.bind(this));
+        this._mainTitleElement.addEventListener("keydown", this._handleMainTitleKeyDown.bind(this));
+        this._mainTitleElement.addEventListener("keyup", this._highlightNodesWithSelector.bind(this));
+        this._mainTitleElement.addEventListener("blur", this._commitSelector.bind(this));
+
+        this.representedObject.addEventListener(WebInspector.CSSStyleDeclaration.Event.InitialTextModified, this._styleTextModified, this);
+        if (this.representedObject.ownerRule)
+            this.representedObject.ownerRule.addEventListener(WebInspector.CSSRule.Event.SelectorChanged, this._updateSelectorIcon, this);
+
+        this._styleTextModified();
+    }
+
+    ondeselect()
+    {
+        this._listItemNode.classList.remove("editable");
+    }
+
+    // Private
+
+    _highlightNodesWithSelector()
+    {
+        if (!this.representedObject.ownerRule) {
+            WebInspector.domTreeManager.highlightDOMNode(this.representedObject.node.id);
+            return;
+        }
+
+        WebInspector.domTreeManager.highlightSelector(this.selectorText, this.representedObject.node.ownerDocument.frameIdentifier);
+    }
+
+    _hideDOMNodeHighlight()
+    {
+        WebInspector.domTreeManager.hideDOMNodeHighlight();
+    }
+
+    _handleContextMenuEvent(event)
+    {
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        contextMenu.appendItem(WebInspector.UIString("Copy Rule"), () => {
+            InspectorFrontendHost.copyText(this.representedObject.generateCSSRuleString());
+        });
+
+        if (this.representedObject.modified) {
+            contextMenu.appendItem(WebInspector.UIString("Reset"), () => {
+                this.representedObject.resetText();
+            });
+        }
+
+        if (!this.representedObject.ownerRule)
+            return;
+
+        contextMenu.appendItem(WebInspector.UIString("Show Source"), () => {
+            if (event.metaKey)
+                WebInspector.showOriginalUnformattedSourceCodeLocation(this.representedObject.ownerRule.sourceCodeLocation);
+            else
+                WebInspector.showSourceCodeLocation(this.representedObject.ownerRule.sourceCodeLocation);
+        });
+
+        // Only used one colon temporarily since single-colon pseudo elements are valid CSS.
+        if (WebInspector.CSSStyleManager.PseudoElementNames.some((className) => this.representedObject.selectorText.includes(":" + className)))
+            return;
+
+        if (WebInspector.CSSStyleManager.ForceablePseudoClasses.every((className) => !this.representedObject.selectorText.includes(":" + className))) {
+            contextMenu.appendSeparator();
+
+            for (let pseudoClass of WebInspector.CSSStyleManager.ForceablePseudoClasses) {
+                if (pseudoClass === "visited" && this.representedObject.node.nodeName() !== "A")
+                    continue;
+
+                let pseudoClassSelector = ":" + pseudoClass;
+
+                contextMenu.appendItem(WebInspector.UIString("Add %s Rule").format(pseudoClassSelector), () => {
+                    this.representedObject.node.setPseudoClassEnabled(pseudoClass, true);
+                    let pseudoSelectors = this.representedObject.ownerRule.selectors.map((selector) => selector.text + pseudoClassSelector);
+                    this.representedObject.nodeStyles.addRule(pseudoSelectors.join(", "));
+                });
+            }
+        }
+
+        contextMenu.appendSeparator();
+
+        for (let pseudoElement of WebInspector.CSSStyleManager.PseudoElementNames) {
+            let pseudoElementSelector = "::" + pseudoElement;
+            const styleText = "content: \"\";";
+
+            let existingTreeItem = null;
+            if (this._delegate && typeof this._delegate.treeItemForStyle === "function") {
+                let selectorText = this.representedObject.ownerRule.selectorText;
+                let existingRules = this.representedObject.nodeStyles.rulesForSelector(selectorText + pseudoElementSelector);
+                if (existingRules.length) {
+                    // There shouldn't really ever be more than one pseudo-element rule
+                    // that is not in a media query. As such, just focus the first rule
+                    // on the assumption that it is the only one necessary.
+                    existingTreeItem = this._delegate.treeItemForStyle(existingRules[0].style);
+                }
+            }
+
+            let title = existingTreeItem ? WebInspector.UIString("Select %s Rule") : WebInspector.UIString("Create %s Rule");
+            contextMenu.appendItem(title.format(pseudoElementSelector), () => {
+                if (existingTreeItem) {
+                    existingTreeItem.select(true, true);
+                    return;
+                }
+
+                let pseudoSelectors = this.representedObject.ownerRule.selectors.map((selector) => selector.text + pseudoElementSelector);
+                this.representedObject.nodeStyles.addRule(pseudoSelectors.join(", "), styleText);
+            });
+        }
+    }
+
+    _handleCheckboxChanged(event)
+    {
+        this._updateCheckboxTitle();
+        this.dispatchEventToListeners(WebInspector.VisualStyleSelectorTreeItem.Event.CheckboxChanged, {enabled: this._checkboxElement.checked});
+    }
+
+    _updateCheckboxTitle()
+    {
+        if (this._checkboxElement.checked)
+            this._checkboxElement.title = WebInspector.UIString("Click to disable the selected rule");
+        else
+            this._checkboxElement.title = WebInspector.UIString("Click to enable the selected rule");
+    }
+
+    _handleMainTitleMouseDown(event)
+    {
+        if (event.button !== 0 || event.ctrlKey)
+            return;
+
+        this._listItemNode.classList.toggle("editable", this.selected);
+    }
+
+    _handleMainTitleKeyDown(event)
+    {
+        this._highlightNodesWithSelector();
+
+        let enterKeyCode = WebInspector.KeyboardShortcut.Key.Enter.keyCode;
+        if (event.keyCode === enterKeyCode)
+            this._mainTitleElement.blur();
+    }
+
+    _commitSelector()
+    {
+        this._hideDOMNodeHighlight();
+        this._listItemNode.classList.remove("editable");
+        this._updateTitleTooltip();
+
+        let value = this.selectorText;
+        if (value === this._lastValue && !this._hasInvalidSelector)
+            return;
+
+        this.representedObject.ownerRule.selectorText = value;
+    }
+
+    _styleTextModified()
+    {
+        this._listItemNode.classList.toggle("modified", this.representedObject.modified);
+    }
+
+    _updateSelectorIcon(event)
+    {
+        this._hasInvalidSelector = event && event.data && !event.data.valid;
+        this._listItemNode.classList.toggle("selector-invalid", !!this._hasInvalidSelector);
+        if (this._hasInvalidSelector) {
+            this._iconElement.title = WebInspector.UIString("The selector “%s” is invalid.\nClick to revert to the previous selector.").format(this.selectorText);
+            this.mainTitleElement.title = WebInspector.UIString("Using the previous selector “%s”.").format(this.representedObject.ownerRule.selectorText);
+            return;
+        }
+
+        this._iconElement.title = null;
+        this.mainTitleElement.title = null;
+    }
+
+    _handleIconElementClicked(event)
+    {
+        if (this._hasInvalidSelector && this.representedObject.ownerRule) {
+            this.mainTitleElement.textContent = this._lastValue = this.representedObject.ownerRule.selectorText;
+            this._updateSelectorIcon();
+            return;
+        }
+    }
+};
+
+WebInspector.VisualStyleSelectorTreeItem.Event = {
+    CheckboxChanged: "visual-style-selector-item-checkbox-changed"
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css
new file mode 100644
index 000000000..87900db81
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.css
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-tabbed-properties-row ~ :not(.visible) {
+    visibility: hidden;
+    height: 0;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container {
+    margin: 0 auto;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button {
+    margin: 0 2px 2px;
+    border-radius: 3px;
+    border-width: 0 1px;
+    border-color: transparent;
+    background-color: transparent;
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button.selected {
+    color: white;
+    background-color: hsl(213, 92%, 55%);
+}
+
+.visual-style-tabbed-properties-row > .visual-style-tabbed-properties-row-container > button:not(.selected):hover {
+    color: white;
+    background-color: hsla(213, 92%, 55%, 0.5);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js
new file mode 100644
index 000000000..63bdbb2c2
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTabbedPropertiesRow.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleTabbedPropertiesRow = class VisualStyleTabbedPropertiesRow extends WebInspector.DetailsSectionRow
+{
+    constructor(tabMap)
+    {
+        super();
+
+        this._element.classList.add("visual-style-tabbed-properties-row");
+
+        let containerElement = document.createElement("div");
+        containerElement.classList.add("visual-style-tabbed-properties-row-container");
+
+        this._tabButtons = [];
+        this._tabMap = tabMap;
+        for (let key in this._tabMap) {
+            let button = document.createElement("button");
+            button.id = key;
+            button.textContent = this._tabMap[key].title;
+            button.addEventListener("click", this._handleButtonClicked.bind(this));
+
+            containerElement.appendChild(button);
+            this._tabButtons.push(button);
+        }
+
+        let firstButton = this._tabButtons[0];
+        firstButton.classList.add("selected");
+        this._tabMap[firstButton.id].element.classList.add("visible");
+
+        this._element.appendChild(containerElement);
+    }
+
+    // Private
+
+    _handleButtonClicked(event)
+    {
+        for (let item of this._tabButtons) {
+            let tab = this._tabMap[item.id];
+            let selected = item === event.target;
+            item.classList.toggle("selected", selected);
+            tab.element.classList.toggle("visible", selected);
+            for (let propertyEditor of tab.properties)
+                propertyEditor.update();
+        }
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css
new file mode 100644
index 000000000..c71adbc5d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css
@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container {
+    display: flex;
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container > .keyword-picker-select {
+    order: 1;
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier {
+    width: 23px;
+    height: 20px;
+}
+
+.visual-style-property-container.timing-editor > .visual-style-property-value-container:not(.bezier-value) > .inline-swatch.bezier {
+    display: none;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+    .visual-style-property-container.timing-editor > .visual-style-property-value-container > .inline-swatch.bezier {
+        margin-left: 0.5px;
+    }
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js
new file mode 100644
index 000000000..9b2acf3a9
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.js
@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleTimingEditor = class VisualStyleTimingEditor extends WebInspector.VisualStyleKeywordPicker
+{
+    constructor(propertyNames, text, possibleValues, layoutReversed)
+    {
+        super(propertyNames, text, possibleValues, layoutReversed);
+
+        this.element.classList.add("timing-editor");
+
+        this._customValueOptionElement = document.createElement("option");
+        this._customValueOptionElement.value = "custom";
+        this._customValueOptionElement.text = WebInspector.UIString("Custom");
+        this._keywordSelectElement.appendChild(this._customValueOptionElement);
+
+        this._bezierSwatch = new WebInspector.InlineSwatch(WebInspector.InlineSwatch.Type.Bezier);
+        this._bezierSwatch.addEventListener(WebInspector.InlineSwatch.Event.ValueChanged, this._bezierSwatchValueChanged, this);
+        this.contentElement.appendChild(this._bezierSwatch.element);
+    }
+
+    // Protected
+
+    parseValue(text)
+    {
+        return /(cubic-bezier\(.+\))/.exec(text);
+    }
+
+    get bezierValue()
+    {
+        let bezier = this._bezierSwatch.value;
+        if (!bezier)
+            return null;
+
+        return bezier.toString();
+    }
+
+    set bezierValue(text)
+    {
+        let bezier = WebInspector.CubicBezier.fromString(text);
+        this._bezierSwatch.value = bezier;
+    }
+
+    // Private
+
+    _getValue()
+    {
+        return this._customValueOptionElement.selected ? this.bezierValue : super._getValue();
+    }
+
+    _setValue(value)
+    {
+        this.bezierValue = value;
+        if (this.valueIsSupportedKeyword(value)) {
+            super._setValue(value);
+            this.contentElement.classList.remove("bezier-value");
+            return;
+        }
+
+        let bezier = this.bezierValue;
+        this._customValueOptionElement.selected = !!bezier;
+        this.contentElement.classList.toggle("bezier-value", !!bezier);
+        this.specialPropertyPlaceholderElement.hidden = !!bezier;
+        if (!bezier)
+            super._setValue(value);
+    }
+
+    _generateSynthesizedValue()
+    {
+        return this._customValueOptionElement.selected ? this.bezierValue : super._generateSynthesizedValue();
+    }
+
+    _handleKeywordChanged()
+    {
+        super._handleKeywordChanged();
+        let customOptionSelected = this._customValueOptionElement.selected;
+        this.contentElement.classList.toggle("bezier-value", !!customOptionSelected);
+        this.specialPropertyPlaceholderElement.hidden = !!customOptionSelected;
+        if (customOptionSelected)
+            this.bezierValue = "linear";
+    }
+
+    _bezierSwatchValueChanged(event)
+    {
+        this._valueDidChange();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js
new file mode 100644
index 000000000..344f73e10
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleURLInput.js
@@ -0,0 +1,75 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleURLInput = class VisualStyleURLInput extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, text, possibleValues, layoutReversed)
+    {
+        super(propertyNames, text, possibleValues, null, "url-input", layoutReversed);
+
+        this._urlInputElement = document.createElement("input");
+        this._urlInputElement.type = "url";
+        this._urlInputElement.placeholder = WebInspector.UIString("Enter a URL");
+        this._urlInputElement.addEventListener("keyup", this._valueDidChange.debounce(250, this));
+        this.contentElement.appendChild(this._urlInputElement);
+    }
+
+    // Public
+
+    get value()
+    {
+        return this._urlInputElement.value;
+    }
+
+    set value(value)
+    {
+        if ((value && value === this.value) || this._propertyMissing)
+            return;
+
+        this._urlInputElement.value = value;
+    }
+
+    get synthesizedValue()
+    {
+        let value = this.value;
+        if (!value || !value.length)
+            return null;
+
+        if (this.valueIsSupportedKeyword(value))
+            return value;
+
+        return "url(" + value + ")";
+    }
+
+    // Protected
+
+    parseValue(text)
+    {
+        if (this.valueIsSupportedKeyword(text))
+            return [text, text];
+
+        return /^(?:url\(\s*)([^\)]*)(?:\s*\)\s*;?)$/.exec(text);
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css b/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css
new file mode 100644
index 000000000..9c7105e01
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.css
@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider {
+    position: relative;
+    margin: 5px 1px 0;
+}
+
+.visual-style-property-container.unit-slider > .visual-style-property-value-container > .slider > img {
+    top: -1px;
+}
+
+.visual-style-property-container.unit-slider.opacity > .visual-style-property-value-container > .slider {
+    background-image: linear-gradient(90deg, hsla(0, 0%, 0%, 0), #000), url(../Images/Checkers.svg);
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js b/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js
new file mode 100644
index 000000000..f6fabaa8e
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/VisualStyleUnitSlider.js
@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ *    notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ *    notice, this list of conditions and the following disclaimer in the
+ *    documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.VisualStyleUnitSlider = class VisualStyleUnitSlider extends WebInspector.VisualStylePropertyEditor
+{
+    constructor(propertyNames, label, layoutReversed)
+    {
+        super(propertyNames, label, null, null, "unit-slider", layoutReversed);
+
+        this._slider = new WebInspector.Slider;
+        this._slider.delegate = this;
+        this.contentElement.appendChild(this._slider.element);
+    }
+
+    // Public
+
+    set value(value)
+    {
+        let knobX = parseFloat(value);
+        if (isNaN(knobX))
+            knobX = parseFloat(this._updatedValues.placeholder) || 0;
+
+        this._slider.knobX = knobX;
+    }
+
+    get value()
+    {
+        return Math.round(this._slider.value * 100) / 100;
+    }
+
+    get synthesizedValue()
+    {
+        return this.value;
+    }
+
+    recalculateWidth(value)
+    {
+        this._slider.recalculateKnobX();
+    }
+
+    sliderValueDidChange(slider, value)
+    {
+        this._valueDidChange();
+    }
+};
diff --git a/Source/WebInspectorUI/UserInterface/WebInspector.js b/Source/WebInspectorUI/UserInterface/WebInspector.js
deleted file mode 100644
index 5519e35a7..000000000
--- a/Source/WebInspectorUI/UserInterface/WebInspector.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- *
- * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
- * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
- * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
- * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
- * THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-const WebInspector = {}; // Namespace